@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{--black:#020403;--paper:#f4fff8;--green:#75ffad;--orange:#ff7a18;--red:#ff244f}
*{box-sizing:border-box}
html,body{margin:0;background:var(--black);color:var(--paper);font-family:'Space Mono',monospace;overflow:hidden}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:4px 100%;mix-blend-mode:soft-light}

.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:18px;background:#000;transition:opacity .8s,visibility .8s}
.gate.hide{opacity:0;visibility:hidden}
.gate img{width:min(46vw,430px);filter:drop-shadow(0 0 40px rgba(255,109,25,.34));animation:breathe 2.4s ease-in-out infinite}
.gate p{margin:0;color:#a9b8ae;letter-spacing:.22em;font-size:12px}
.gate button{border:0;background:transparent;padding:18px;color:#fff;font-weight:700;letter-spacing:.12em;text-shadow:0 0 18px var(--orange)}

.topbar{position:fixed;z-index:40;left:0;top:0;width:100%;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:linear-gradient(#020403 0%,rgba(2,4,3,.68) 60%,transparent)}
.brand{text-decoration:none;font-family:'Archivo Black',sans-serif;letter-spacing:-.04em;font-size:18px}
.brand span{color:var(--orange)}
.topbar nav{display:flex;gap:25px}
.topbar nav button{border:0;background:transparent;padding:10px 0;color:#7f8d84;font-size:12px;letter-spacing:.12em}
.topbar nav button.active{color:#fff;text-shadow:0 0 15px var(--green)}
.ticker{font-size:12px;color:var(--green)}

#app{position:relative;width:100vw;height:100vh}
.screen{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .65s,transform .8s,visibility .65s}
.screen.active{opacity:1;visibility:visible;transform:scale(1)}
.hero-backdrop{position:absolute;inset:-5%;background:url('assets/curve-background.png') center/cover;filter:brightness(.38) saturate(1.1);transform:scale(1.08)}
.hero-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 47%,transparent 0 20%,rgba(0,0,0,.35) 55%,#000 88%)}
.hero-copy{position:absolute;z-index:3;left:5vw;top:19vh;width:56vw}
.eyebrow{margin:0 0 16px;color:var(--green);font-size:12px;letter-spacing:.2em}
h1,h2{font-family:'Archivo Black',sans-serif;margin:0;line-height:.83;letter-spacing:-.065em}
h1{font-size:clamp(56px,10vw,160px)}
h1 span{display:block}
h1 span:last-child{color:transparent;-webkit-text-stroke:1px var(--orange);text-shadow:0 0 30px rgba(255,122,24,.23)}
.hero-line{font-size:clamp(14px,1.4vw,20px);max-width:540px;margin:28px 0 0;color:#c6d2ca}
.hero-symbol{position:absolute;z-index:2;width:min(46vw,620px);right:3vw;top:10vh;filter:drop-shadow(0 0 42px rgba(255,120,20,.26));animation:float 5.5s ease-in-out infinite;transition:filter .25s,transform .25s}
.pulse-readout{position:absolute;z-index:4;left:5vw;bottom:8vh;display:flex;align-items:flex-end;gap:18px}
.pulse-readout span{font-size:11px;letter-spacing:.12em;color:#93a298}
.pulse-readout strong{font-family:'Archivo Black';font-size:38px;color:var(--orange)}
.ignite{position:absolute;z-index:4;right:5vw;bottom:8vh;border:0;background:transparent;padding:20px 0;font-size:12px;font-weight:700;letter-spacing:.1em;color:#fff;text-shadow:0 0 18px var(--orange);user-select:none}
.screen.overdrive .hero-symbol{filter:drop-shadow(0 0 72px rgba(255,80,20,.9));transform:scale(1.04)}
.screen.overdrive .hero-backdrop{filter:brightness(.62) saturate(1.45)}

.story-image,.story-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-image{transition:opacity .35s,transform 1s;transform:scale(1.02)}
.story-screen.active .story-image{transform:scale(1)}
.story-shade{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.74) 38%,rgba(0,0,0,.04) 72%),linear-gradient(0deg,#000 0%,transparent 32%)}
.story-copy{position:absolute;z-index:3;left:6vw;top:24vh;width:min(560px,43vw)}
.chapter-count{color:var(--orange);letter-spacing:.16em}
.story-copy h2,.access-heading h2,.chart-copy h2{font-size:clamp(48px,7vw,112px)}
.story-copy>p:last-child{font-size:clamp(16px,1.3vw,21px);line-height:1.75;color:#d5ded8}
.chapter-nav{position:absolute;z-index:5;left:6vw;right:6vw;bottom:6vh;display:grid;grid-template-columns:repeat(4,1fr);gap:2vw}
.chapter-nav button{border:0;border-top:1px solid rgba(255,255,255,.28);background:transparent;text-align:left;padding:18px 0 0;color:#8c9b92;font-size:12px;letter-spacing:.11em}
.chapter-nav button span{color:var(--orange);margin-right:10px}
.chapter-nav button.active{color:#fff;border-color:var(--orange);text-shadow:0 0 16px rgba(255,122,24,.8)}

.access-bg{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:brightness(.28)}
.access-heading{position:absolute;z-index:2;left:5vw;top:15vh}
.portal-row{position:absolute;z-index:3;inset:31vh 5vw 14vh;display:grid;grid-template-columns:repeat(3,1fr);gap:3vw}
.portal{position:relative;overflow:hidden;text-decoration:none;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);background:#000}
.portal img{width:100%;height:100%;object-fit:cover;filter:brightness(.56);transition:transform .65s,filter .45s}
.portal span{position:absolute;left:9%;bottom:8%;font-family:'Archivo Black';font-size:clamp(20px,2.7vw,48px);text-shadow:0 4px 20px #000}
.portal:hover img,.portal:focus img{transform:scale(1.08);filter:brightness(.95)}
.contract{position:absolute;z-index:4;right:5vw;bottom:4vh;border:0;background:transparent;text-align:right}
.contract span{display:block;color:#829087;font-size:10px;letter-spacing:.13em}.contract strong{font-size:12px;color:var(--green)}

.chart-screen{background:url('assets/chapter-beacon.png') center/cover}
.chart-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.88) 36%,rgba(0,0,0,.3)),linear-gradient(0deg,#000 0%,transparent 45%)}
.chart-copy{position:absolute;z-index:3;left:5vw;top:15vh;width:38vw}.chart-copy h2{font-size:clamp(50px,6.5vw,105px)}
.chart-copy>p:last-child{max-width:490px;color:#bdc9c1;line-height:1.6}
.chart-shell{position:absolute;z-index:3;right:4vw;top:14vh;width:52vw;height:57vh;overflow:hidden;box-shadow:0 0 70px rgba(0,0,0,.8)}
.chart-shell iframe{width:100%;height:100%;border:0;background:#070b09}
.roadmap{position:absolute;z-index:4;left:5vw;right:5vw;bottom:4vh;display:grid;grid-template-columns:repeat(3,1fr);gap:5vw}
.roadmap div{border-top:1px solid rgba(255,255,255,.25);padding-top:14px}.roadmap span{color:var(--orange);font-size:11px}.roadmap strong{display:block;margin:6px 0}.roadmap p{margin:0;color:#95a299;font-size:12px}

.screen-index{position:fixed;z-index:42;right:1.5vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#718077;font-size:10px}.screen-index i{display:block;width:1px;height:90px;background:linear-gradient(var(--orange),rgba(255,255,255,.15))}
.ember-cursor{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px 8px rgba(255,92,18,.3);z-index:80;pointer-events:none;transform:translate(-50%,-50%)}
.spark{position:absolute;width:3px;height:3px;background:var(--orange);box-shadow:0 0 10px var(--orange);animation:spark 1s ease-out forwards}

@keyframes float{50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes breathe{50%{transform:scale(1.035);filter:drop-shadow(0 0 65px rgba(255,109,25,.55))}}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}

@media(max-width:760px){
  html,body{overflow:auto}.ember-cursor,.screen-index{display:none}.topbar{height:70px;padding:0 18px}.topbar nav{gap:10px}.topbar nav button{font-size:0}.topbar nav button::first-letter{font-size:11px}.brand{font-size:14px}.ticker{display:none}
  #app{height:auto}.screen{position:relative;min-height:100svh;display:none}.screen.active{display:block}
  .hero-copy{left:7vw;top:16vh;width:86vw}.hero-symbol{width:78vw;right:-16vw;top:31vh;opacity:.72}.pulse-readout{left:7vw;bottom:9vh}.ignite{right:7vw;bottom:9vh;width:42vw;text-align:right}
  .story-copy{left:7vw;top:16vh;width:86vw}.story-copy>p:last-child{max-width:85vw}.story-shade{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.7) 54%,rgba(0,0,0,.22))}.chapter-nav{left:7vw;right:7vw;grid-template-columns:repeat(2,1fr)}
  .access-heading{left:7vw;top:13vh}.portal-row{inset:30vh 7vw 13vh;grid-template-columns:1fr 1fr;gap:12px}.portal:last-child{grid-column:1/3}.contract{right:7vw}
  .chart-copy{left:7vw;top:12vh;width:86vw}.chart-copy h2{font-size:48px}.chart-shell{left:7vw;right:7vw;top:39vh;width:auto;height:35vh}.roadmap{left:7vw;right:7vw;grid-template-columns:1fr;gap:7px}.roadmap div{padding-top:6px}.roadmap p{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}