:root{
  --text:#EEEEEE;
  --text-muted:#B0B0B0;
  --text-dim:#666666;
  --teal:#0097A7;
  --teal-light:#66CCDA;
  --container:1280px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 50% 0%,rgba(0,151,167,0.08),transparent 60%),
    radial-gradient(1000px 700px at 50% 50%,rgba(0,151,167,0.05),transparent 65%),
    radial-gradient(1200px 800px at 50% 100%,rgba(0,151,167,0.08),transparent 60%),
    linear-gradient(180deg,#0A0A0A 0%,#1A1A1A 50%,#0D1117 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
/* Chaque section porte sa propre bande circuit en fond */
.hero,
.products,
.blogs,
.final-cta,
.site-footer{
  position:relative;
}
.hero::before,
.products::before,
.blogs::before,
.final-cta::before,
.site-footer::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("images/bg-circuit-cropped.jpg");
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center center;
  opacity:.85;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:2;
}
main,footer,header{position:relative;z-index:2}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  padding:20px 0;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(10,10,10,0.65);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.nav{display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;color:var(--text);text-decoration:none}
.brand-logo{display:block;height:28px;width:auto;flex-shrink:0}
.primary-nav{display:flex;gap:28px;margin-left:24px}
.primary-nav a{color:var(--text);text-decoration:none;font-size:15px;font-weight:500;opacity:.9}
.primary-nav a:hover{opacity:1}
.site-header .btn{margin-left:auto}
.site-header .btn-primary {
  animation: pulse-ring 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring {
  0% { box-shadow: 0 6px 20px -6px rgba(0,151,167,0.6), 0 0 0 0 rgba(0, 151, 167, 0.85); }
  70% { box-shadow: 0 6px 20px -6px rgba(0,151,167,0.6), 0 0 0 25px rgba(0, 151, 167, 0); }
  100% { box-shadow: 0 6px 20px -6px rgba(0,151,167,0.6), 0 0 0 0 rgba(0, 151, 167, 0); }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:10px;
  font-weight:600;font-size:15px;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:8px}
.btn-primary{
  background:var(--teal);
  color:#fff;
  box-shadow:0 6px 20px -6px rgba(0,151,167,0.6);
}
.btn-primary:hover{background:#00a9bb;transform:translateY(-1px)}

.magnetic-btn {
  transition: transform 0.5s cubic-bezier(0.3, 0.6, 0.2, 1.3), background 0.15s ease, box-shadow 0.15s ease !important;
}
.magnetic-btn:hover {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) !important;
}
.magnetic-btn.moving {
  transition: transform 0.05s linear, background 0.15s ease, box-shadow 0.15s ease !important;
}

/* ---------- HERO ---------- */
.hero{padding:96px 0 80px;text-align:center}
.hero-title .cursor {
  animation: blink 0.9s step-end infinite;
  display: inline-block !important;
  font-weight: 700;
  margin-left: 2px;
  color: #0097A7 !important;
  -webkit-text-fill-color: #0097A7 !important;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.hero-title{
  font-size:92px;line-height:1.1;margin:0 auto 28px;
  font-weight:800;letter-spacing:-.02em;
  max-width:1000px;
  background:linear-gradient(122deg,#FFFFFF 0%,#0097A7 50%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title span{display:block}
.hero-sub{
  max-width:640px;margin:0 auto 36px;
  font-size:18px;color:var(--text-muted);
}

/* ---------- SECTION TITLES ---------- */
.section-title{
  font-size:36px;font-weight:700;
  margin:0 0 20px;letter-spacing:-.01em;
  background:linear-gradient(90deg,#0097A7,#66CCDA,#0097A7);
  background-size:200% auto;
  animation:gradientFlow 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;
}

/* ---------- PRODUCTS — Chipwatcher agents ---------- */
.products{padding:80px 0}
.products-header{margin:0 0 56px}
.products-header .lead{
  font-size:18px;color:var(--text-muted);margin:8px 0 0;line-height:1.55;
}
.products-header .lead strong{color:var(--text);font-weight:600}

.agent-tabs-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}

.agent-tabs-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.agent-tab {
  display: flex;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 32px 32px;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  color: var(--text-muted);
}
.agent-tab:hover {
  background: rgba(255, 255, 255, 0.02);
}
.agent-tab.active {
  background: rgba(0, 151, 167, 0.05);
  border: 1px solid var(--teal);
  box-shadow: inset 0 0 24px rgba(0, 151, 167, 0.08);
}

.agent-tab .material-symbols-outlined {
  font-size: 32px;
  color: var(--teal-dark);
  transition: color 0.3s ease;
}
.agent-tab.active .material-symbols-outlined {
  color: var(--teal-light);
}

.agent-tab h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: var(--text-muted);
  transition: all 0.3s ease;
}
.agent-tab.active h3 {
  background: linear-gradient(90deg, #0097A7, #66CCDA, #0097A7);
  background-size: 200% auto;
  animation: gradientFlow 6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.agent-tabs-content {
  position: relative;
  min-height: 500px;
}

.agent-tab-pane {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(10px);
}
.agent-tab-pane.active {
  opacity: 1;
  transform: translateY(0);
}

.agent-pane-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
.agent-pane-stage {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
}
.agent-pane-text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.agent-pane-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,0.1);
}

.agent-tabs-footer {
  margin-top: 40px;
  display: flex;
}
.muted{color:#9A9A9A;font-size:14px;margin:0}

/* ---------- BLOGS ---------- */
.blogs{padding:80px 0}
.blogs .section-title{margin-bottom:36px}
.post-grid{
  display:grid;grid-template-columns:504px 504px;
  gap:32px;align-items:start;justify-content:center;
  max-width:1040px;margin:0 auto;
}
.post{display:flex;flex-direction:column;gap:14px;width:504px}
.post-embed iframe{
  width:100%;max-width:504px;height:auto;aspect-ratio:1/1;display:block;border:0;
  border-radius:18px;background:#ffffff;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.6);
}
.post-thumb{
  width:100%;aspect-ratio:1/1;border-radius:18px;
  background:#1a1a1a center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}
.post-title{font-size:18px;font-weight:700;margin:0;color:#fff}
.post-excerpt{color:#A8A8A8;font-size:14px;margin:0}
.post-link{
  color:var(--teal-light);text-decoration:none;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.post-link .material-symbols-outlined{
  font-size:16px;
  font-variation-settings:'opsz' 20,'wght' 400,'FILL' 0,'GRAD' 0;
}
.post-link:hover{text-decoration:underline}

/* ---------- FINAL CTA ---------- */
.final-cta{padding:40px 0 80px}
.cta-box{
  border-radius:24px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.08);
  padding:56px 48px;text-align:center;
}
.cta-title{
  font-size:30px;font-weight:700;margin:0 0 16px;
  background:linear-gradient(90deg,#0097A7,#66CCDA,#0097A7);
  background-size:200% auto;
  animation:gradientFlow 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-text{max-width:1120px;margin:0 auto 24px;color:var(--text-muted);font-size:15px}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:0 0 28px;
}
.site-footer .container{padding-left:72px;padding-right:72px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;
  padding:56px 0 40px;
  border-top:1px solid rgba(255,255,255,0.05);
  align-items:start;
}
.footer-brand .brand{margin-bottom:16px}
.socials{display:flex;gap:10px}
.social{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;transition:background .15s ease;
}
.social:hover{background:rgba(0,151,167,0.25)}
.footer-nav{display:flex;flex-direction:column;gap:12px;align-items:flex-end;padding-top:4px}
.footer-nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.footer-nav a:hover{color:var(--teal-light)}

.footer-legal{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;border-top:1px solid rgba(255,255,255,0.05);
  color:#777;font-size:12px;
}
.legal-links{display:flex;gap:20px}
.legal-links a{color:#777;text-decoration:none}
.legal-links a:hover{color:#bbb}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0097A7, #66CCDA);
  width: 0%;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(102, 204, 218, 0.6);
  transition: width 0.1s ease-out;
}

/* ---------- ANIMATIONS / SPOTLIGHT ---------- */
#mouse-glow {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  background: radial-gradient(
    800px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), 
    rgba(0, 151, 167, 0.4), 
    transparent 60%
  );
  mix-blend-mode: screen;
  z-index: 9998;
}

@keyframes gradientFlow {
  to { background-position: 200% center; }
}

/* ---------- ANIMATIONS / REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,504px);max-width:504px}
  .post{width:100%;max-width:504px}
  .agent-tabs-container { grid-template-columns: 1fr; gap: 40px; }
  .agent-tabs-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .agent-tab { flex-direction: column; text-align: center; min-width: 240px; padding: 24px; gap: 12px; scroll-snap-align: start; flex: 1 0 auto; }
  .agent-pane-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
}
@media (max-width:960px){
  .primary-nav { display: none; }
  .hero-title{font-size:56px}
  .site-footer .container{padding:0 32px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-nav{align-items:flex-start}
  .footer-legal{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width: 768px) {
  .nav { height: 60px; padding: 0 16px; justify-content: space-between; }
  .site-header .btn { font-size: 13px; padding: 0 16px; margin-left: 0; }
  .brand { margin-right: 0; }
  .brand-logo { height: 22px; }
}
@media (max-width: 400px) {
  .site-header .btn { padding: 0 12px; font-size: 12px; }
  .brand-logo { height: 18px; }
}
@media (max-width:640px){
  .container{padding:0 20px}
  .site-footer .container{padding:0 20px}
  .hero{padding:64px 0 48px}
  .hero-title{font-size:44px}
  .hero-sub{font-size:16px}
  .section-title{font-size:28px}
  .cta-box{padding:40px 24px}
  .cta-title{font-size:24px}
}