/* ============================================================
   VESPER — portable single-file rebuild (full port).

   A faithful vanilla-three.js translation of the production R3F rig
   (src/views/home/scene/*): backdrop flame quad, hero-line, the orb
   point sphere, the spiral galaxy, a procedural brain point cloud, and
   camera-attached atmosphere motes — all driven by ONE shared scroll
   clock (0→4, port of lib/scene/timeline.ts) that also cross-fades the
   three fixed section overlays and the closing cards. Lenis smooth
   scroll; spring-feel per-letter / per-word text reveals.

   Colours are the EXACT constants.ts / color-store.ts values, uploaded
   linear (THREE.Color sRGB→linear) exactly as the source does. GLSL is
   ported verbatim. Design tokens inlined from src/app/globals.css.
============================================================ */
:root{
  --background:#170a2b;
  --foreground:#fdfdfd;
  --void:#170a2b;
  --chalk:#fdfdfd;
  --signal:#6cf3a3;
  --surface:#100823;
  --surface-raised:#17102e;

  --glow-signal:0 0 10px rgba(108,243,163,.6);
  --glow-chalk:0 0 12px rgba(255,255,255,.6);
  --glass-panel:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -24px rgba(0,0,0,.85);

  --font-general:"Onest",ui-sans-serif,system-ui,sans-serif;
  --font-tag:"Mulish",ui-sans-serif,system-ui,sans-serif;
  --font-hud-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --text-body:clamp(.9375rem,1.05vw,1.0625rem);
  --tracking-hud:.08em;
  --tracking-brand:.22em;
  --tracking-title:-.022em;
  --leading-title:.98;
  --leading-body:1.6;

  /* spring-feel easings (utils/animation/easing): easeOutQuint / easeOutCubic. */
  --eq:cubic-bezier(.22,1,.36,1);
  --ec:cubic-bezier(.33,1,.68,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  background:var(--background);color:var(--foreground);
  font-family:var(--font-general);font-size:16px;line-height:var(--leading-body);
  overflow-x:clip;overscroll-behavior-y:none;
}
body::-webkit-scrollbar{width:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
img{max-width:100%}
button{font-family:inherit;color:inherit}

/* ---------- WebGL scene, fixed full-bleed behind everything ---------- */
#orb{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:var(--void)}
#orb-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(23,10,43,.55) 100%)}

/* ---------- Header pill ---------- */
.site-header{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:50;width:min(720px,calc(100% - 3rem));height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .55rem .55rem 1.15rem;border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .8s ease .2s}
body.ready .site-header{opacity:1}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-general);font-weight:400;font-size:1.125rem;letter-spacing:0;color:var(--chalk)}
.wordmark .wm-star{width:18px;height:18px;flex:none}
.nav{display:flex;align-items:center;gap:2rem;font-size:.9375rem}
.nav a{opacity:.82;transition:opacity .25s,color .25s}
.nav a:hover{opacity:1;color:#fff}
.header-cta{align-self:stretch;display:inline-flex;align-items:center;gap:.5rem;padding:0 1.1rem;
  border:1px solid rgba(255,255,255,.35);font-size:.9375rem;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s}
.header-cta:hover{background:var(--signal);color:#0b0517;border-color:var(--signal)}
.header-cta i{width:4px;height:4px;background:currentColor;display:block}
@media(max-width:760px){.nav,.header-cta{display:none}}

/* ---------- Send Request CTA ---------- */
.send-request{display:inline-flex;align-items:center;gap:.278vw}
.send-request .fill{display:inline-flex;align-items:center;justify-content:center;
  padding:1.111vw 4.167vw;font-family:var(--font-general);font-weight:500;font-size:1.111vw;line-height:1.2;
  background:var(--chalk);color:#0b0517;transition:background .25s,color .25s}
.send-request:hover .fill{background:var(--signal)}
.send-request .arrow{width:3.542vw;height:3.542vw;flex:none;display:grid;place-items:center;
  background:var(--chalk);color:#0b0517;transition:background .25s}
.send-request:hover .arrow{background:var(--signal)}
.send-request .arrow svg{width:60%;height:60%}

/* ============================================================
   Fixed section overlays — the Figma artboard placed in `vw`
   (Figma px ÷ 14.4), exactly as the source. Opacity is scrubbed by
   the shared scene clock; copy reveals on spring-feel transitions.
============================================================ */
.overlay{position:fixed;inset:0;z-index:10;color:#fff;pointer-events:none;visibility:hidden}
.overlay .pe{pointer-events:auto}
.disp{font-family:var(--font-general);font-weight:300;line-height:.9;letter-spacing:var(--tracking-title);
  text-shadow:0 0 30px rgba(255,255,255,.08)}

/* Hero */
#ov-hero .title{position:absolute;top:9.028vw;left:1.667vw;width:41.875vw;font-size:5.556vw}
#ov-hero .cluster{position:absolute;right:1.667vw;bottom:2.153vw;left:1.667vw;height:14.514vw}
#ov-hero .tagline{position:absolute;top:0;left:0;width:27.5vw;font-family:var(--font-tag);
  font-size:1.111vw;line-height:1.2;text-transform:uppercase}
#ov-hero .support{position:absolute;top:0;right:0;width:19.348vw;font-family:var(--font-general);
  font-size:1.111vw;line-height:1.2}
#ov-hero .tags{position:absolute;top:13.194vw;left:0;display:flex;align-items:center;gap:1.667vw;
  font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;white-space:nowrap;text-transform:uppercase}
#ov-hero .tags i{width:.208vw;height:.208vw;flex:none;background:#fff;display:block}
#ov-hero .cta{position:absolute;top:10.972vw;right:0}

/* Galaxy */
#ov-galaxy .title{position:absolute;top:7.014vw;left:50%;width:46.319vw;transform:translateX(-50%);
  text-align:center;font-size:5.556vw}
#ov-galaxy .cluster{position:absolute;left:0;right:0;bottom:0;height:16.181vw}
#ov-galaxy .support{position:absolute;top:0;left:50%;width:29.097vw;transform:translateX(-50%);
  text-align:center;font-family:var(--font-general);font-size:1.111vw;line-height:1.2}
#ov-galaxy .rule{position:absolute;left:0;right:0;top:4.792vw;border-top:1px solid rgba(255,255,255,.2)}
#ov-galaxy .vrule{position:absolute;top:4.792vw;height:11.389vw;border-left:1px solid rgba(255,255,255,.2)}
#ov-galaxy .stat{position:absolute;top:8.333vw;width:11.111vw;display:flex;flex-direction:column;
  align-items:flex-start;gap:.833vw;border-left:1px solid rgba(255,255,255,.8);padding-left:1.111vw}
#ov-galaxy .stat .v{font-family:var(--font-tag);font-size:2.222vw;line-height:1;font-weight:300}
#ov-galaxy .stat .l{font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;font-weight:400}

/* Brain (four-corner) */
#ov-brain .tl-left{position:absolute;top:9.028vw;left:1.667vw;width:41.875vw;font-size:5.556vw}
#ov-brain .tl-right{position:absolute;right:1.667vw;bottom:1.667vw;width:40.972vw;text-align:right;
  justify-content:flex-end;font-size:5.556vw}
#ov-brain .flank-left{position:absolute;top:calc(50% + 2.361vw);left:1.667vw;width:26.597vw;
  font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;text-transform:uppercase}
#ov-brain .flank-right{position:absolute;top:calc(50% + 2.361vw);right:1.667vw;width:14.583vw;
  text-align:right;justify-content:flex-end;font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;text-transform:uppercase}
#ov-brain .cta{position:absolute;bottom:1.667vw;left:1.667vw}

/* ============================================================
   Closing sections (in normal flow, over the still-drawing scene).
============================================================ */
main{position:relative;z-index:2}
.closing{position:relative;z-index:10}
.fin{position:relative;margin:0 auto;height:44.167vw;width:96.667vw;perspective:1400px}
.fin .card{position:relative;height:100%;width:100%;transform-origin:bottom;border:1px solid rgba(255,255,255,.1);
  background:#fff;color:#000}
.fin h2{position:absolute;top:2.222vw;left:2.222vw;width:41.875vw;font-size:5.556vw}
.fin .photo{position:absolute;top:2.222vw;right:2.222vw;height:39.722vw;width:27.361vw;overflow:hidden;background:#0a1a1f}
.fin .photo img{width:100%;height:100%;object-fit:cover;display:block}
.fin .num{position:absolute;font-family:var(--font-general);font-size:1.111vw;line-height:1.2}
.fin .n1{top:34.236vw;left:2.222vw}
.fin .n2{top:34.236vw;left:24.792vw}
.fin .b1{position:absolute;top:36.667vw;left:2.222vw;width:20.347vw;font-family:var(--font-general);font-size:1.111vw;line-height:1.2}
.fin .b2{position:absolute;top:36.667vw;left:24.792vw;width:20.347vw;font-family:var(--font-general);font-size:1.111vw;line-height:1.2}

.faq{margin:0 auto;width:96.667vw;perspective:1400px;margin-top:1.667vw}
.faq .card{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:bottom;
  border:1px solid rgba(255,255,255,.1);background:#fff;color:#000;padding:2.222vw 0 3.056vw}
.faq .mark{width:1.806vw;height:1.806vw;animation:spin 9s linear infinite}
.faq h2{margin-top:1.111vw;text-align:center;font-size:5.556vw}
.faq ul{list-style:none;margin:4.167vw 0 0;padding:0;width:42.778vw;border-top:1px solid rgba(0,0,0,.15)}
.faq li{border-bottom:1px solid rgba(0,0,0,.15)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:1.111vw;padding:1.667vw .75vw;text-align:left;color:#000;
  font-family:var(--font-tag);text-transform:uppercase;font-size:1.111vw;line-height:1.2;transition:opacity .25s}
.faq-q:hover{opacity:.65}
.faq-marker{position:relative;width:1.389vw;height:1.389vw;flex:none;transition:transform .35s var(--eq)}
.faq-marker::before,.faq-marker::after{content:"";position:absolute;background:#000}
.faq-marker::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-.5px)}
.faq-marker::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-.5px)}
.faq li.open .faq-marker{transform:rotate(45deg)}
.faq-a{overflow:hidden;height:0;transition:height .5s var(--eq),opacity .5s;opacity:0}
.faq li.open .faq-a{opacity:1}
.faq-a p{padding:0 .75vw 1.667vw;width:33.958vw;font-family:var(--font-general);font-size:.972vw;line-height:1.4}

.footer{position:relative;z-index:10;width:100%;padding-top:4.444vw;color:#fff}
.footer h2{text-align:center;font-size:5.556vw}
.contact-pill{margin:2.917vw auto 0;width:38.264vw;height:3.542vw;display:flex;align-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.556vw .556vw .556vw 1.667vw}
.contact-pill input{width:12.5vw;background:transparent;border:0;color:#fff;font-family:var(--font-general);
  font-size:1.111vw;line-height:1.2;outline:none}
.contact-pill input+input{margin-left:1.111vw}
.contact-pill input::placeholder{color:#fff}
.contact-pill button{margin-left:auto;align-self:stretch;display:inline-flex;align-items:center;gap:.694vw;
  border:1px solid rgba(255,255,255,.5);background:none;color:#fff;cursor:pointer;padding:0 1.111vw;
  font-family:var(--font-general);font-size:1.111vw;line-height:1.2;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s}
.contact-pill button:hover{background:var(--signal);color:#0b0517;border-color:var(--signal)}
.contact-pill button i{width:.139vw;height:.139vw;flex:none;background:currentColor;display:block}
.footer-divider{margin-top:4.444vw;border-top:1px solid rgba(255,255,255,.15)}
.footer-body{margin:2.014vw auto 0;width:96.667vw;display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:4.444vw}
.footer-brand{width:27.5vw;display:flex;flex-direction:column;gap:1.667vw}
.footer-brand .lm{height:1.806vw;width:5.86vw}
.footer-brand p{font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;text-transform:uppercase;color:#fff}
.footer-cols{display:flex;gap:6.25vw}
.footer-col{width:12.5vw;display:flex;flex-direction:column;gap:1.667vw}
.footer-col p{font-family:var(--font-tag);font-size:1.111vw;line-height:1.2;text-transform:uppercase}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.111vw}
.footer-col a{font-family:var(--font-general);font-size:1.111vw;line-height:1.2;color:rgba(255,255,255,.7);transition:color .25s}
.footer-col a:hover{color:#fff}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- spring-feel reveals ---------- */
/* LETTER_REVEAL: per-letter opacity+blur, stagger 26ms, 1000ms easeOutQuint.
   Letters live inside per-word inline-block spans so a word never splits across
   a line — only whole words wrap. */
.tl{display:block}
.tl .word{display:inline-block;white-space:nowrap}
.tl .ch{display:inline-block;opacity:0;filter:blur(12px);
  transition:opacity 1000ms var(--eq),filter 1000ms var(--eq)}
.tl.in .ch{opacity:1;filter:blur(0)}
/* WORD_REVEAL: per-word y+opacity+blur, stagger 42ms, 1200ms */
.tw{display:flex;flex-wrap:wrap;gap:0 .25em}
.tw.center{justify-content:center}
.tw.right{justify-content:flex-end}
.tw .wd{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(8px);
  transition:opacity 1200ms var(--eq),transform 1200ms var(--eq),filter 1200ms var(--eq)}
.tw.in .wd{opacity:1;transform:none;filter:blur(0)}
/* UNIT_REVEAL: fade+rise+blur 1000ms */
.ur{opacity:0;transform:translateY(20px);filter:blur(10px);
  transition:opacity 1000ms var(--eq),transform 1000ms var(--eq),filter 1000ms var(--eq)}
.ur.in{opacity:1;transform:none;filter:blur(0)}
/* CARD_REVEAL: scale+rotateX+blur 1200ms */
.cr{opacity:0;transform:rotateX(12deg) scale(.94);filter:blur(14px);transform-origin:bottom;
  transition:opacity 1200ms var(--eq),transform 1200ms var(--eq),filter 1200ms var(--eq)}
.cr.in{opacity:1;transform:none;filter:blur(0)}
/* MASK_REVEAL: clip top→bottom 1200ms */
.mr{clip-path:inset(0 0 100% 0);transition:clip-path 1200ms var(--eq)}
.mr.in{clip-path:inset(0 0 0 0)}

/* ---------- Loader curtain ---------- */
#loader{position:fixed;inset:0;z-index:60;overflow:hidden;background:#000;
  font-family:var(--font-tag);font-size:1.111vw;color:var(--chalk);text-transform:uppercase;
  transition:opacity .9s var(--ec),transform .9s var(--ec)}
#loader.done{opacity:0;transform:scale(1.06);pointer-events:none}
#loader canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ld-top{position:absolute;top:0;left:0;display:flex;align-items:center;gap:.875rem;padding:1.5rem 2rem}
.ld-top .d{color:rgba(253,253,253,.35)}
.ld-bot{position:absolute;left:0;right:0;bottom:0;padding:0 2rem 1.5rem}
.ld-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.875rem}
.ld-init{font-size:.972vw;color:rgba(253,253,253,.4)}
.ld-pct{font-family:var(--font-general);font-size:1.111vw;font-variant-numeric:tabular-nums;color:rgba(253,253,253,.8)}
.ld-pct small{color:rgba(253,253,253,.35)}
.ld-rail{position:relative;height:1px;width:100%;overflow:hidden;background:rgba(253,253,253,.12)}
.ld-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--chalk)}

/* ---------- Responsive fallback (< 1024px): plain stacks ---------- */
@media(max-width:1023px){
  .overlay,.overlay .title,.overlay .cluster,.overlay .support,.overlay .tagline,
  #ov-brain .tl-left,#ov-brain .tl-right,#ov-brain .flank-left,#ov-brain .flank-right,#ov-brain .cta,
  #ov-hero .cta,#ov-hero .tags{position:static}
  .overlay{display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:6.5rem 1.5rem 2rem}
  .overlay .title,.overlay .tl-left,.overlay .tl-right{width:100%!important;font-size:2.75rem!important;text-align:left!important}
  .overlay .support,.overlay .tagline,#ov-brain .flank-left,#ov-brain .flank-right{width:100%!important;font-size:.9375rem!important;text-align:left!important;transform:none!important}
  #ov-galaxy .cluster,#ov-hero .cluster{height:auto;display:flex;flex-direction:column;gap:1.5rem}
  #ov-galaxy .rule,#ov-galaxy .vrule{display:none}
  #ov-galaxy .stat{position:static;width:auto;border-left:0}
  #ov-galaxy .stat .v{font-size:1.5rem}#ov-galaxy .stat .l{font-size:.75rem;color:rgba(255,255,255,.7)}
  .send-request .fill{padding:.9375rem 1.5rem;font-size:1rem}
  .send-request .arrow{width:3.125rem;height:3.125rem}
  .fin{height:auto;width:calc(100% - 3rem)}
  .fin .card{position:relative}
  .fin h2,.fin .num,.fin .b1,.fin .b2{position:static;width:auto;font-size:inherit}
  .fin h2{font-size:2.75rem;padding:1.5rem}
  .fin .photo{position:relative;height:15rem;width:100%;top:0;right:0}
  .fin .b1,.fin .b2{padding:.5rem 1.5rem 1.5rem;font-size:.9375rem}
  .fin .num{padding:.5rem 1.5rem 0;font-size:.875rem}
  .faq{width:calc(100% - 3rem)}
  .faq h2{font-size:2.75rem}.faq ul{width:100%}
  .faq-q,.faq-marker,.faq-a p{font-size:.875rem}.faq-marker{width:1rem;height:1rem}
  .faq-a p{width:100%}
  .footer h2{font-size:3rem}
  .contact-pill{width:100%;max-width:30rem;height:auto;flex-direction:column;gap:.75rem;padding:1rem}
  .contact-pill input,.contact-pill input+input{width:100%;margin:0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:.5rem}
  .contact-pill button{margin:0;justify-content:center;padding:.875rem;font-size:1rem}
  .footer-body{width:100%;flex-direction:column;gap:2.5rem}
  .footer-brand,.footer-col{width:100%}
  .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand p,.footer-col p,.footer-col a{font-size:.8125rem}
  #loader{font-size:.875rem}.ld-init,.ld-pct{font-size:.75rem}
}

@media(prefers-reduced-motion:reduce){
  .tl .ch,.tw .wd,.ur,.cr,.mr{transition:none!important}
  .faq .mark{animation:none}
}