/* ===== Tokens ===== */
:root{
  --gold:#C99D51;
  --gold-light:#E4C287;
  --gold-dark:#A87F3A;
  --ink:#2E3440;
  --ink-2:#242933;
  --ink-3:#1B1F27;
  --olive:#5C6B4B;
  --olive-light:#7C8F63;
  --bone:#F7F5F0;
  --bone-2:#EFEAE0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Onest', ui-sans-serif, system-ui, sans-serif;
  background:var(--bone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold); color:var(--ink-3);}

section{scroll-margin-top:88px;}

/* ===== Glow blobs ===== */
.glow{
  position:absolute;
  border-radius:9999px;
  filter:blur(100px);
  pointer-events:none;
  z-index:0;
}
.glow-gold{background:radial-gradient(circle, rgba(201,157,81,.4), transparent 70%);}
.glow-olive{background:radial-gradient(circle, rgba(124,143,99,.32), transparent 70%);}

/* ===== Glass ===== */
.glass{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(255,255,255,.10);
}
.glass-light{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(46,52,64,.08);
}

/* ===== Gradient text ===== */
.text-gradient{
  background:linear-gradient(95deg, var(--gold-light), var(--gold) 45%, var(--olive-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== Header ===== */
#site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
#site-header.header-scrolled{
  background:rgba(27,31,39,.65);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}

.hamburger{
  width:26px; height:18px; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; background:none; border:none; padding:0;
}
.hamburger span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--bone);
  transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease, background-color .3s ease;
  transform-origin:center;
}
.hamburger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

#mobile-menu{
  position:fixed; inset:0; z-index:49;
  background:rgba(27,31,39,.97);
  backdrop-filter:blur(24px);
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
#mobile-menu.is-open{opacity:1; pointer-events:auto;}
#mobile-menu a{
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
}
#mobile-menu.is-open a{opacity:1; transform:translateY(0);}

/* ===== Buttons ===== */
.btn{
  position:relative; overflow:visible; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:9999px;
  transition:transform .35s cubic-bezier(.65,0,.35,1), box-shadow .35s ease, background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn:active{transform:scale(.96);}
.btn::before, .btn::after{
  content:''; position:absolute; width:9px; height:9px; opacity:0;
  border-color:currentColor; transition:opacity .3s ease, transform .3s ease;
  transform:scale(.6); pointer-events:none;
}
.btn::before{top:-4px; left:-4px; border-top:1.5px solid; border-left:1.5px solid; border-radius:3px 0 0 0;}
.btn::after{bottom:-4px; right:-4px; border-bottom:1.5px solid; border-right:1.5px solid; border-radius:0 0 3px 0;}
.btn:hover::before, .btn:hover::after{opacity:.55; transform:scale(1);}
.btn-primary{
  background:linear-gradient(95deg, var(--gold-light), var(--gold));
  color:var(--ink-3);
  box-shadow:0 8px 30px -8px rgba(201,157,81,.55);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px -8px rgba(201,157,81,.75);
}
.btn-primary::before, .btn-primary::after{color:var(--ink-3);}

.btn-secondary{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
  color:var(--bone);
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--gold);
  transform:translateY(-2px);
}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ===== Demo panel (HUD) ===== */
.demo-panel{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.hud-corner{position:absolute; width:26px; height:26px; border-color:var(--gold); opacity:.9; z-index:20;}
.hud-corner.tl{top:14px; left:14px; border-top:2px solid; border-left:2px solid; border-radius:6px 0 0 0;}
.hud-corner.tr{top:14px; right:14px; border-top:2px solid; border-right:2px solid; border-radius:0 6px 0 0;}
.hud-corner.bl{bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid; border-radius:0 0 0 6px;}
.hud-corner.br{bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 6px 0;}

.scan-line{
  position:absolute; left:0; right:0; height:2px; z-index:15;
  background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow:0 0 12px 2px rgba(201,157,81,.7);
  animation:scan 3.6s ease-in-out infinite;
}
@keyframes scan{
  0%,100%{top:8%; opacity:0;}
  10%{opacity:1;}
  50%{top:92%; opacity:1;}
  60%{opacity:0;}
}

.pulse-dot{
  width:8px; height:8px; border-radius:50%; background:var(--olive-light);
  box-shadow:0 0 0 0 rgba(124,143,99,.7);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(124,143,99,.55);}
  70%{box-shadow:0 0 0 9px rgba(124,143,99,0);}
  100%{box-shadow:0 0 0 0 rgba(124,143,99,0);}
}

.hud-badge{
  opacity:0; transform:translateY(10px) scale(.9);
  animation:badge-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes badge-in{
  to{opacity:1; transform:translateY(0) scale(1);}
}

.hud-telemetry{
  background:linear-gradient(to top, rgba(27,31,39,.85), transparent);
  font-variant-numeric:tabular-nums;
}

/* ===== Marquee ===== */
.marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:2.5rem;
  animation:marquee 32s linear infinite;
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== Cards ===== */
.feature-card{
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .5s ease;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 60px -20px rgba(46,52,64,.35);
}
.feature-card .card-glow{
  position:absolute; inset:-2px; opacity:0; border-radius:inherit;
  background:linear-gradient(135deg, rgba(201,157,81,.35), rgba(124,143,99,.25));
  transition:opacity .5s ease; z-index:-1; filter:blur(18px);
}
.feature-card:hover .card-glow{opacity:1;}

/* ===== Detection tags (bounding-box style labels) ===== */
.detection-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:.65rem; font-weight:500; letter-spacing:.06em;
  padding:.3rem .55rem; border-radius:5px;
  white-space:nowrap;
}
.detection-tag::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.detection-tag--gold{
  color:var(--gold-dark); background:rgba(201,157,81,.1); border:1px solid rgba(201,157,81,.3);
}
.detection-tag--gold::before{background:var(--gold);}
.detection-tag--olive{
  color:var(--olive); background:rgba(92,107,75,.08); border:1px solid rgba(92,107,75,.28);
}
.detection-tag--olive::before{background:var(--olive-light);}

/* ===== Video section ===== */
.play-btn{
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.play-btn:hover{transform:scale(1.1);}
.play-ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,157,81,.5);
  animation:ring-pulse 2.4s ease-out infinite;
}
@keyframes ring-pulse{
  0%{transform:scale(1); opacity:.8;}
  100%{transform:scale(1.6); opacity:0;}
}

/* ===== FAQ ===== */
.faq-item .faq-icon{transition:transform .4s cubic-bezier(.65,0,.35,1);}
.faq-item[data-open="true"] .faq-icon{transform:rotate(45deg);}
.faq-panel{
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.65,0,.35,1);
}

/* ===== Form ===== */
.field-input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  border-bottom:2px solid rgba(255,255,255,.25);
  transition:border-color .3s ease, background-color .3s ease;
}
.field-input:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.09);
}
.field-input::placeholder{color:rgba(247,245,240,.35);}

/* ===== Glass distortion cursor lens (hero only) ===== */
.glass-lens{
  position:absolute;
  top:0; left:0;
  width:260px; height:260px;
  border-radius:50%;
  pointer-events:none;
  z-index:5;
  opacity:0;
  transform:translate(-50%,-50%) scale(.85);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.28), inset 0 0 24px rgba(255,255,255,.08);
  backdrop-filter:blur(3px) url(#glass-distortion-filter) saturate(160%);
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.glass-lens.is-active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ===== Particle canvas cursor hint ===== */
.demo-video, .demo-canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ===== Utility animations ===== */
@keyframes float-slow{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.float-slow{animation:float-slow 6s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}