/* ============================================================
   SIGIL — living AI · design system
   bg near-black · accent app-green #36EC4E · Syne / Sora / Space Mono
   ============================================================ */
:root{
  --bg:#030404; --bg2:#060807; --panel:#0a0d0b; --panel2:#080b09;
  --ink:#EDEDE6; --body:#c6d2c4; --muted:#7f8a7e; --dim:#53604f;
  --acc:#36EC4E; --acc2:#8CFF70; --acc-deep:#0c2e16;
  --acc-soft:rgba(54,236,78,.13); --acc-soft2:rgba(54,236,78,.07);
  --line:rgba(54,236,78,.16); --hair:rgba(255,255,255,.06); --hair2:rgba(255,255,255,.09);
  --shadow:0 40px 110px rgba(0,0,0,.65);
  --ease:cubic-bezier(.22,.68,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Sora",sans-serif;font-weight:300;line-height:1.55;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
::selection{background:var(--acc);color:#060708}

.mono{font-family:"Space Mono",monospace;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--acc);font-weight:400}
.dsp{font-family:"Syne",sans-serif;font-weight:800;letter-spacing:-.028em;line-height:.94;text-wrap:balance}
em.hl{font-style:normal;color:var(--acc);text-shadow:0 0 48px rgba(54,236,78,.32)}
strong{font-weight:500;color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* eyebrow with leading tick */
.eyebrow{display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--acc));display:inline-block}

/* ---------- atmosphere ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos .g{position:absolute;border-radius:50%;filter:blur(30px);opacity:.9}
.atmos .g1{width:78vw;height:78vw;top:-26vw;right:-14vw;background:radial-gradient(circle,rgba(54,236,78,.085),transparent 62%)}
.atmos .g2{width:70vw;height:70vw;bottom:-30vw;left:-18vw;background:radial-gradient(circle,rgba(28,206,60,.05),transparent 62%)}
.atmos .vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
.grain{position:fixed;inset:0;z-index:42;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}

/* ---------- organism canvas (hero, fixed behind) ---------- */
#organism-stage{position:fixed;inset:0;z-index:1;pointer-events:none;will-change:opacity,transform}
#organism-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* organism A/B switcher */
.org-switch{position:fixed;right:24px;bottom:22px;z-index:70;display:flex;align-items:center;gap:0;
  background:rgba(8,11,10,.72);backdrop-filter:blur(14px);border:1px solid var(--hair2);border-radius:999px;
  padding:5px;font-family:"Space Mono";box-shadow:0 14px 40px rgba(0,0,0,.5)}
.org-switch .lbl{font-size:9px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;padding:0 12px 0 10px}
.org-switch button{font-family:"Space Mono";font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;transition:.25s var(--ease)}
.org-switch button.on{color:#060708;background:var(--acc);box-shadow:0 0 18px var(--acc-soft)}
.org-switch button:not(.on):hover{color:var(--acc)}

/* ---------- progress + nav ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--acc2),var(--acc));box-shadow:0 0 12px var(--acc)}
nav{position:fixed;top:0;left:0;right:0;z-index:55;padding:20px 0;opacity:0;transform:translateY(-14px);
  transition:.55s var(--ease);backdrop-filter:blur(12px);
  background:linear-gradient(to bottom,rgba(5,6,7,.82),rgba(5,6,7,0));border-bottom:1px solid transparent}
nav.show{opacity:1;transform:none;border-bottom-color:var(--hair)}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:"Syne";font-weight:800;letter-spacing:.36em;font-size:14px;text-transform:uppercase}
.gmark{width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 32%,var(--acc),var(--acc2) 42%,var(--acc-deep) 78%);
  box-shadow:0 0 14px var(--acc-soft),0 0 5px var(--acc),inset 0 0 4px rgba(0,0,0,.4)}
@keyframes glmbreathe{0%,100%{box-shadow:0 0 12px var(--acc-soft),0 0 4px var(--acc)}50%{box-shadow:0 0 22px rgba(54,236,78,.45),0 0 8px var(--acc)}}
.gmark{animation:glmbreathe 4.5s ease-in-out infinite}

.btn{font-family:"Space Mono";font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;border-radius:999px;
  border:1px solid var(--acc);color:#060708;background:var(--acc);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:.28s var(--ease);cursor:pointer;white-space:nowrap}
.btn:hover{background:transparent;color:var(--acc);box-shadow:0 0 30px var(--acc-soft)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair2)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);box-shadow:none;background:var(--acc-soft2)}

/* chapter rail (left) */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;
  opacity:0;transition:.6s var(--ease)}
.rail.show{opacity:1}
.rail a{width:9px;height:9px;border-radius:50%;border:1px solid var(--hair2);position:relative;transition:.3s var(--ease)}
.rail a::after{content:attr(data-l);position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-family:"Space Mono";font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transition:.3s}
.rail a:hover::after{opacity:1}
.rail a.on{border-color:var(--acc);background:var(--acc);box-shadow:0 0 12px var(--acc-soft)}
.rail a.on::after{opacity:1;color:var(--acc)}

/* ---------- HERO ---------- */
.hero-wrap{height:260vh;position:relative;z-index:2}
.hero{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-inner{text-align:center;position:relative;z-index:3;padding:0 24px;will-change:transform,opacity}
.hero .eyebrow{justify-content:center}
.hero h1{font-size:clamp(46px,9.2vw,138px);margin:22px 0 0;text-shadow:0 2px 60px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.7)}
.hero h1 .l{display:block}
.hero .sub{margin:30px auto 0;max-width:30em;color:var(--body);font-size:clamp(15px,1.7vw,20px);font-weight:300;text-shadow:0 2px 30px rgba(0,0,0,.9)}
.hero-inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130%;height:150%;z-index:-1;
  background:radial-gradient(50% 42% at 50% 50%,rgba(4,6,7,.72),rgba(4,6,7,.3) 60%,transparent 78%);filter:blur(8px);pointer-events:none}
.hero .cue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;will-change:opacity}
.hero .cue .mono{color:var(--muted);font-size:10px;letter-spacing:.3em}
.hero .cue .bar{width:1px;height:46px;background:linear-gradient(var(--acc),transparent);animation:cuePulse 2.2s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

/* intro entrance (only before scroll) */
.intro{opacity:0;transform:translateY(20px);animation:rise 1.1s var(--ease) forwards}
.intro.d1{animation-delay:.15s}.intro.d2{animation-delay:.32s}.intro.d3{animation-delay:.5s}.intro.d4{animation-delay:.72s}.intro.d5{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- scenes / pin tracks ---------- */
.scene{padding:clamp(96px,17vh,210px) 0;position:relative;z-index:2}
.pin-wrap{position:relative;z-index:2}
.pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}

.reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.vis{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.22s}.reveal.d3{transition-delay:.34s}.reveal.d4{transition-delay:.46s}

/* statement */
.statement{text-align:center;max-width:16em;margin:0 auto}
.statement .dsp{font-size:clamp(34px,6.6vw,92px)}
.statement p{margin:30px auto 0;color:var(--muted);font-size:clamp(16px,1.8vw,22px);max-width:30em;font-weight:300}

/* feature */
.feat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,96px);align-items:center;width:100%}
.feat.flip .copy{order:2}
.feat .copy .num{font-family:"Space Mono";font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.feat .copy .num b{color:var(--acc);font-weight:400}
.feat .copy .dsp{font-size:clamp(30px,4.6vw,60px);margin-top:16px}
.feat .copy p{margin-top:22px;color:var(--body);font-size:clamp(15px,1.5vw,19px);max-width:25em;font-weight:300}
.feat .copy .lead{color:var(--muted)}
.chips{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.chip{font-family:"Space Mono";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--acc-soft2)}

/* metric */
.metric{text-align:center}
.metric .row-m{display:flex;align-items:center;justify-content:center;gap:6px}
.metric .big{font-family:"Syne";font-weight:800;font-size:clamp(72px,17vw,230px);line-height:.86;color:var(--acc);
  text-shadow:0 0 70px rgba(54,236,78,.3);letter-spacing:-.04em}
.metric .big.dim{color:var(--ink);opacity:.18;text-shadow:none}
.metric .arrow{color:var(--muted);font-size:clamp(28px,5vw,64px);margin:0 clamp(10px,2.4vw,40px);font-family:"Syne";font-weight:700}
.metric .lab{font-family:"Space Mono";text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-size:clamp(11px,1.3vw,13px);margin-top:26px}

/* alive */
.alive{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.alive .ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vh,820px);aspect-ratio:1;
  opacity:.5;z-index:1;pointer-events:none}
.alive .ghost .gorb{position:absolute;inset:24%;border-radius:50%;filter:blur(3px);
  background:radial-gradient(circle at 40% 36%,rgba(220,255,160,.8),rgba(28,206,60,.4) 32%,rgba(22,44,0,.7) 64%,rgba(4,10,0,0) 100%);
  box-shadow:0 0 120px rgba(54,236,78,.25);animation:orbPulse 6s ease-in-out infinite}
.alive .ghost .gring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(54,236,78,.1)}
.alive .ghost .gring.a{width:58%;aspect-ratio:1;animation:spin 30s linear infinite}
.alive .ghost .gring.b{width:80%;aspect-ratio:1.02;border-style:dashed;border-color:rgba(54,236,78,.06);animation:spin 60s linear infinite reverse}
.alive .inner{position:relative;z-index:3;max-width:18em}
.alive .dsp{font-size:clamp(38px,7.4vw,104px)}
.alive p{color:var(--body);margin-top:26px;font-size:clamp(15px,1.7vw,20px);font-weight:300}

/* waitlist */
.band{border:1px solid var(--line);border-radius:30px;padding:clamp(44px,7vw,92px);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(150% 130% at 50% -10%,rgba(54,236,78,.1),var(--panel) 56%);box-shadow:0 0 110px rgba(54,236,78,.08),inset 0 1px 0 rgba(255,255,255,.04)}
.band .dsp{font-size:clamp(34px,5.6vw,72px)}
.band p{color:var(--muted);margin-top:20px;font-size:17px;font-weight:300}
form{margin:36px auto 0;max-width:480px;display:flex;gap:10px}
input[type=email]{flex:1;background:#070a08;border:1px solid var(--hair2);border-radius:999px;padding:16px 24px;color:var(--ink);
  font-family:"Sora";font-size:15px;outline:none;transition:.22s var(--ease)}
input[type=email]::placeholder{color:var(--dim)}
input[type=email]:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.ok{margin-top:22px;font-family:"Space Mono";color:var(--acc);font-size:14px;display:none;letter-spacing:.04em}
.ok.show{display:block;animation:rise .5s var(--ease) forwards}
.fine{margin-top:26px;font-family:"Space Mono";font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}

footer{border-top:1px solid var(--hair);padding:42px 0 60px;margin-top:64px;position:relative;z-index:2}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-in .links{display:flex;gap:24px}
.foot-in a{color:var(--muted);text-decoration:none;font-family:"Space Mono";font-size:12px;letter-spacing:.1em;transition:.25s}
.foot-in a:hover{color:var(--acc)}
.foot-in .cr{font-family:"Space Mono";font-size:11px;color:var(--dim);letter-spacing:.12em}

@media (max-width:880px){
  .wrap{padding:0 22px}
  .feat{grid-template-columns:1fr;gap:40px}
  .feat.flip .copy{order:0}
  .feat .phonewrap{order:-1}
  nav .btn{display:none}
  .rail{display:none}
  .metric .row-m{flex-direction:column;gap:2px}
  .metric .arrow{transform:rotate(90deg);margin:8px 0}
  .org-switch{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .intro{animation:none;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  .gmark,.cue .bar{animation:none}
}