/* ===== COLORS: edit here ===== */
:root{
  --deep:#06140C; --sapphire:#0E3320; --sapphire-2:#1F6B3E;
  --gold:#D9A441; --leaf:#4DB874; --white:#F6EED8; --soft:#C5D2C0;
  --ac:217,164,65;
  --sans:"Avenir Next","Segoe UI",Inter,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --s:0;
}
*{box-sizing:border-box}
html{background:var(--deep)}
body{margin:0;color:var(--white);font:1rem/1.5 var(--sans);overflow-x:hidden;
  background:radial-gradient(120% 90% at 70% 15%,#175530 0%,var(--sapphire) 38%,var(--deep) 85%) fixed}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--deep);padding:.6rem 1rem;z-index:200}
.skip:focus{left:0}
.scroll{height:600vh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Atmosphere */
.atmo,#world,.grid{position:fixed;inset:0;pointer-events:none}
#world{width:100%;height:100%}
.bl{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.b1{width:60vmax;height:60vmax;left:-18vmax;top:-18vmax;background:var(--sapphire-2);translate:calc(var(--s)*9vw) calc(var(--s)*4vh);animation:drift 24s ease-in-out infinite alternate}
.b2{width:34vmax;height:34vmax;right:-10vmax;bottom:-12vmax;background:rgba(217,164,65,.45);translate:calc(var(--s)*-7vw) calc(var(--s)*-9vh);animation:drift 30s ease-in-out infinite alternate-reverse}
.b3{width:30vmax;height:30vmax;left:35%;bottom:-24vmax;background:rgba(138,90,54,.4);translate:calc(var(--s)*-10vw) calc(var(--s)*-14vh);animation:drift 36s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(6vw,5vh,0) scale(1.18)}}
.grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%)}
.glow{position:fixed;left:0;top:0;width:560px;height:560px;pointer-events:none;z-index:3;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(var(--ac),.16),transparent 62%);transform:translate3d(-999px,-999px,0)}
@media(hover:none){.glow{display:none}}

/* Intro */
#intro{display:none}
.js #intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;background:var(--deep);transition:opacity .9s .1s,visibility 0s 1s}
.ready #intro{opacity:0;visibility:hidden;pointer-events:none}
#intro svg{width:104px;overflow:visible}
#intro .r{stroke-dasharray:164;stroke-dashoffset:164;animation:draw 1.1s .2s cubic-bezier(.6,0,.2,1) forwards}
#intro .m{stroke-dasharray:90;stroke-dashoffset:90;animation:draw .9s .6s ease forwards}
#intro .n{opacity:0;animation:fade .5s 1.2s forwards}
#intro p{margin:1.2rem 0 1rem;letter-spacing:.4em;text-transform:uppercase;font-size:.78rem;opacity:0;animation:fade .8s 1s forwards}
#intro b{display:block;height:2px;width:120px;margin:0 auto;background:linear-gradient(90deg,var(--gold),var(--leaf));transform:scaleX(0);transform-origin:0 50%;animation:ld 1.9s .2s ease-in-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes ld{to{transform:scaleX(1)}}

/* Header + rail */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:calc(.9rem + env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) .9rem max(1.25rem,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:700;letter-spacing:.05em}
.brand svg{width:34px;height:34px}
.hr{display:flex;align-items:center;gap:.8rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding:.35rem .8rem;border:1px solid rgba(255,255,255,.2);border-radius:99px;background:rgba(6,20,12,.45)}
.pill{background:none;border:1px solid var(--gold);border-radius:99px;padding:.4rem 1.1rem;font-size:.9rem;cursor:pointer;transition:background .25s,color .25s}
.pill:hover{background:var(--gold);color:var(--deep)}
@media(max-width:420px){.chip{display:none}}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--leaf);position:relative;display:inline-block;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--leaf);animation:ping 2s ease-out infinite}
@keyframes ping{to{transform:scale(3.2);opacity:0}}
.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:.35rem}
.rail button{background:none;border:0;height:26px;min-width:26px;display:flex;align-items:center;justify-content:flex-end;gap:.7rem;cursor:pointer;padding:0 .4rem}
.rail button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:transform .3s,background .3s}
.rail span{font-size:.75rem;opacity:0;transform:translateX(6px);transition:.3s;white-space:nowrap;display:none}
@media(min-width:1000px){.rail span{display:block}}
.rail button:hover span,.rail button:focus-visible span,.rail button[aria-current] span{opacity:1;transform:none}
.rail button[aria-current]::after{background:var(--gold);transform:scale(1.7)}

/* Panels: scroll drives --w (presence) and --dir */
.stage{position:fixed;inset:0;z-index:20;pointer-events:none}
.pn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:5rem max(1.4rem,6vw) 4rem;visibility:hidden;opacity:0}
.js .pn{opacity:var(--w,0);transform:translate3d(0,calc((1 - var(--w,0))*var(--dir,1)*40px),0)}
.pn.on .btn,.pn.on a{pointer-events:auto}
h2{font:800 clamp(2.4rem,9vw,8rem)/.92 var(--sans);text-transform:uppercase;letter-spacing:-.035em;margin:0}
.p0{padding-bottom:6rem}
.kicker{margin:0 0 1.4rem;letter-spacing:.34em;font-size:clamp(.66rem,2.3vw,.85rem);text-transform:uppercase;color:var(--soft)}
h1{margin:0;font:800 clamp(2.6rem,13vw,10.5rem)/.9 var(--sans);text-transform:uppercase;letter-spacing:-.04em;
  translate:calc(var(--px,0)*-18px) calc(var(--py,0)*-10px)}
.pre{display:block;font-size:clamp(1rem,3.4vw,2.2rem);letter-spacing:.5em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.7);margin-bottom:.5em}
.ln{display:block;overflow:hidden;padding:.02em 0 .1em;
  transform:translateX(calc((1 - var(--w,1))*var(--dir,1)*var(--k)*22vw))}
.ch{display:inline-block;transition:transform .35s,color .25s}
.ch.dot{color:var(--leaf)}
.ln.o .ch{color:transparent;-webkit-text-stroke:clamp(1px,.2vw,2.5px) #fff}

.ln.g .ch{color:var(--gold)}.ln.g .ch.dot{color:var(--leaf)}
.ch:hover{transform:translateY(-6%);color:var(--gold)}
.ln.o .ch:hover{-webkit-text-stroke-color:var(--gold)}
.ln.g .ch:hover{color:#fff}.ch:hover{color:var(--gold)}
.js .ch{animation:up 1.1s cubic-bezier(.2,.7,.1,1) backwards paused;animation-delay:calc(var(--i)*.22s + var(--j)*.045s)}
.ready .ch{animation-play-state:running}
@keyframes up{from{transform:translateY(115%)}}
.cue{position:absolute;left:max(1.4rem,6vw);bottom:2.6rem;display:flex;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.cue::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);animation:cue 2s ease-in-out infinite;transform-origin:0 50%}
@keyframes cue{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.p1{justify-content:flex-end;padding-bottom:12vh}
.p1 p{margin:1.2rem 0 0;color:var(--soft);font-size:clamp(.95rem,2.4vw,1.2rem);max-width:22em}
.p2{align-items:center;justify-content:center;text-align:center}
#hub{width:min(180px,40vw);transition:opacity .2s}
#hub h2{font-size:clamp(.95rem,2.4vw,1.5rem);letter-spacing:0;line-height:1.1;text-shadow:0 0 18px var(--deep)}
#hub p{margin:.4rem 0 0;color:var(--soft);font-size:.8rem;text-shadow:0 0 14px var(--deep)}
#hub.sw{animation:sw .45s ease}
@keyframes sw{from{opacity:0;transform:scale(.92)}}
.p3{justify-content:flex-start;padding-top:16vh}
.lanes{position:absolute;left:max(1.4rem,6vw);right:max(1.4rem,6vw);bottom:19vh;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.lanes span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.7rem;background:var(--leaf)}
.lanes span:nth-child(2)::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.lanes span:last-child::before{background:var(--gold)}
h2.out{color:transparent;-webkit-text-stroke:clamp(1px,.2vw,2.5px) #fff}
.p4{justify-content:flex-start;padding-top:15vh}
.p4 h2{font-size:clamp(1.6rem,5.4vw,4.4rem)}
.stat{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.p5{align-items:center;justify-content:center;text-align:center}
.acts{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem}
.btn{display:inline-block;padding:.95rem 1.7rem;border-radius:99px;font-weight:600;text-decoration:none;pointer-events:none;transition:background .3s,box-shadow .3s}
.gold{background:var(--gold);color:var(--deep)}.gold:hover{background:#E8B452;box-shadow:0 0 34px rgba(217,164,65,.5)}
.ghost{border:1px solid rgba(255,255,255,.5);background:rgba(6,20,12,.4)}.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Ecosystem nodes */
.node{position:fixed;left:0;top:0;z-index:30;display:flex;align-items:center;gap:.5rem;min-height:38px;padding:.35rem .85rem;border-radius:99px;
  border:1px solid rgba(var(--c),.6);background:rgba(6,20,12,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 .76rem var(--sans);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;will-change:transform;
  transition:background .25s,border-color .25s,box-shadow .25s,scale .25s}
.node i{width:7px;height:7px;border-radius:50%;background:rgb(var(--c))}
.node:hover,.node:focus-visible,.node[aria-pressed=true]{background:rgba(var(--c),.24);border-color:rgb(var(--c));box-shadow:0 0 30px rgba(var(--c),.5);scale:1.08}
@media(max-width:560px){.node{font-size:.6rem;padding:.3rem .55rem;min-height:34px;gap:.35rem}}

.ft{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem max(1.25rem,5vw) calc(.8rem + env(safe-area-inset-bottom));font-size:.72rem;color:var(--soft);pointer-events:none}
.ft a{pointer-events:auto}
@media(max-width:560px){.ft{justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js #intro{display:none}
}