:root{
  --blue:#1E3951;
  --blue-mid:#3E6484;
  --glow:#8FB8D6;

  --bg:#ffffff;
  --bg-alt:#F5F5F7;
  --ink:#1D1D1F;
  --text-muted:#6E6E73;
  --border: rgba(0,0,0,.09);
  --accent: var(--blue);
  --on-accent:#ffffff;
  --shadow-c: rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg-alt:#0E0F11;
    --ink:#F5F5F7;
    --text-muted:#86868B;
    --border: rgba(255,255,255,.13);
    --accent: var(--glow);
    --on-accent:#00131F;
    --shadow-c: rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-alt:#0E0F11;
  --ink:#F5F5F7;
  --text-muted:#86868B;
  --border: rgba(255,255,255,.13);
  --accent: var(--glow);
  --on-accent:#00131F;
  --shadow-c: rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:var(--accent); z-index:200;
  transition:width .08s linear;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--on-accent); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.eyebrow{
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--text-muted); margin-bottom:1rem;
}

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,4vw,40px);
}
.logo{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.navlinks{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; font-size:.82rem; color:var(--text-muted); }
.navlinks a:hover{ color:var(--ink); }
.navcta{
  font-size:.8rem; font-weight:600; color:var(--accent);
}
.navcta:hover{ opacity:.7; }
@media (max-width:820px){ .navlinks{ display:none; } }

/* ============ HERO ============ */
.hero{
  padding:clamp(64px,10vw,110px) clamp(20px,5vw,40px) clamp(12px,2vw,24px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-copy{
  display:flex; flex-direction:column; align-items:center;
  transition:opacity .1s linear, transform .1s linear;
}
.hero h1, .hero .h1-sm{
  font-size:clamp(2.6rem,7vw,5.6rem);
  line-height:1.03;
}
.hero .h1-sm{ font-size:clamp(2.2rem,5.4vw,4rem); }
.hero-sub{
  margin-top:1.3rem;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--text-muted);
  max-width:36ch;
  font-weight:500;
}
.links{
  margin-top:1.8rem;
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center;
}
.links > a:not(.pill){
  font-size:1.02rem; color:var(--accent); font-weight:500;
}
.links > a:not(.pill) span{ display:inline-block; transition:transform .2s ease; }
.links > a:not(.pill):hover span{ transform:translateX(3px); }
.pill{
  background:var(--accent); color:var(--on-accent);
  padding:.7rem 1.4rem; border-radius:100px; font-weight:600; font-size:.92rem;
  transition:transform .18s ease, opacity .18s ease;
  display:inline-block;
}
.pill:hover{ transform:translateY(-1px); opacity:.88; }
.pill--lg{ padding:1rem 2rem; font-size:1.02rem; margin-top:2.2rem; }

/* ============ 3D STAGE ============ */
.stage{
  position:relative;
  width:100%; max-width:1280px;
  margin-top:clamp(-4px,0.6vw,10px);
  display:flex; flex-direction:column; align-items:center;
}
.gl-wrap{
  position:relative;
  width:100%;
  height:clamp(440px,70vw,820px);
  touch-action:none; cursor:grab;
}
.stage--md .gl-wrap{ height:clamp(360px,50vw,560px); }
.gl-wrap:active{ cursor:grabbing; }
.gl-wrap canvas{ width:100%; height:100%; display:block; }
.gl-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--text-muted); opacity:1; transition:opacity .5s ease; pointer-events:none;
}
.gl-loading.done{ opacity:0; }
.shadow-ellipse{
  width:38%; height:24px; margin-top:-18px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, var(--shadow-c) 0%, transparent 72%);
  pointer-events:none;
}
.drag-hint{
  margin-top:.9rem; font-size:.78rem; color:var(--text-muted); opacity:.75;
}

/* ============ STATEMENT SECTIONS ============ */
.statement{
  padding:clamp(80px,11vw,140px) clamp(20px,5vw,40px);
  max-width:860px; margin:0 auto; text-align:center;
}
.statement h2{ font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.08; margin-bottom:2rem; }
.statement-sub{
  font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; color:var(--text-muted);
  max-width:56ch; margin:1.6rem auto 0; font-weight:500;
}
.wave{
  display:flex; align-items:center; justify-content:center; gap:3px; height:52px; margin:2.4rem auto;
  max-width:420px;
}
.wave i{
  flex:1; width:3px; border-radius:3px; background:var(--accent); opacity:.55;
  transform-origin:center; animation:wv 1.8s ease-in-out infinite;
}
@keyframes wv{ 0%,100%{ transform:scaleY(.18);} 50%{ transform:scaleY(1);} }

/* ============ FEATURE (dark band) ============ */
.feature-dark{
  background:var(--bg-alt);
  padding:clamp(72px,10vw,120px) clamp(20px,5vw,40px);
  text-align:center;
}
.feature-dark h2{ font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.06; }
.feature-sub{
  margin-top:1.2rem; font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--text-muted);
  max-width:48ch; margin-left:auto; margin-right:auto; font-weight:500;
}

.trio{
  margin-top:clamp(2.6rem,5vw,4rem);
  max-width:1080px; margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem);
  text-align:left;
}
@media (max-width:840px){ .trio{ grid-template-columns:1fr; text-align:center; } }
.tcard{
  background:var(--bg); border:1px solid var(--border); border-radius:20px;
  padding:2.2rem 2rem;
}
.tnum{ display:block; font-size:.78rem; font-weight:700; color:var(--accent); margin-bottom:1rem; }
.tcard h3, .fcard h3{ font-size:1.2rem; margin-bottom:.6rem; letter-spacing:-.01em; }
.tcard p, .fcard p{ color:var(--text-muted); line-height:1.6; font-size:.98rem; font-weight:500; }

.trio--plain .fcard{ padding:0; background:none; border:none; text-align:center; }

/* ============ HARDWARE spec row ============ */
.spec-row{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2rem);
  max-width:960px; padding-top:2rem; border-top:1px solid var(--border);
  text-align:left;
}
@media (max-width:760px){ .spec-row{ grid-template-columns:1fr; } }
.spec-row div{ display:flex; flex-direction:column; gap:.35rem; }
.spec-row b{ font-size:1rem; font-weight:600; }
.spec-row span{ color:var(--text-muted); font-size:.92rem; font-weight:500; }

/* ============ CLOSING / CONTACT ============ */
.closing{
  padding:clamp(90px,13vw,150px) clamp(20px,5vw,40px);
  text-align:center; max-width:760px; margin:0 auto;
}
.closing h2{ font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.05; margin-bottom:1.6rem; }
.closing p{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--text-muted); line-height:1.6; font-weight:500; }

footer{
  border-top:1px solid var(--border);
  padding:1.8rem clamp(20px,5vw,40px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  font-size:.78rem; color:var(--text-muted);
  max-width:1180px; margin:0 auto;
}

.reveal{
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.in{ opacity:1; transform:translateY(0) scale(1); }
.tcard.reveal:nth-child(2){ transition-delay:.08s; }
.tcard.reveal:nth-child(3){ transition-delay:.16s; }
.fcard.reveal:nth-child(2){ transition-delay:.08s; }
.fcard.reveal:nth-child(3){ transition-delay:.16s; }
.spec-row .reveal:nth-child(2){ transition-delay:.08s; }
.spec-row .reveal:nth-child(3){ transition-delay:.16s; }

#heroGlWrap, #hwGlWrap{ will-change:transform, opacity; }