:root{color-scheme:dark;--bg:#080912;--text:#edf0fa;--muted:#9196b0;--cyan:#65efff;--pink:#ff3cbd;--border:#ffffff22}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{min-height:100svh;margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 36%,#14243f85 0%,transparent 55%),linear-gradient(140deg,#060711,#0b0b18 55%,#080911);z-index:-5}
.noise{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.ambient{position:fixed;width:36vw;height:36vw;min-width:340px;min-height:340px;border-radius:50%;filter:blur(75px);pointer-events:none;opacity:.33;z-index:-3;animation:drift 11s ease-in-out infinite alternate}
.ambient-left{background:#04a7ed56;top:8%;left:-15%}.ambient-right{background:#df0d8b66;right:-19%;top:32%;animation-delay:-5s}
.grid-floor{position:fixed;bottom:-38vh;left:-30vw;width:160vw;height:100vh;z-index:-2;pointer-events:none;transform:perspective(500px) rotateX(67deg);transform-origin:center top;background-image:linear-gradient(#1df6fa25 1px,transparent 1px),linear-gradient(90deg,#1df6fa25 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(transparent 5%,#000 45%,transparent 100%);animation:gridMove 15s linear infinite}
.scanline{position:fixed;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 4px,#0002 5px 6px);opacity:.23}
.page{display:flex;min-height:100svh;flex-direction:column;padding:28px clamp(22px,5.5vw,104px);max-width:1650px;margin:auto}
.topbar,.footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar{position:relative;padding-bottom:26px;border-bottom:1px solid #ffffff20}
.wordmark{font-size:22px;font-weight:900;letter-spacing:.25em}.dot{color:var(--pink)}
.header-right,.footer,.eyebrow,.panel-top,.panel-bottom{font-family:Consolas,"Courier New",monospace;font-weight:700;letter-spacing:.15em;font-size:10px}
.header-right{color:#bbc0d8;display:flex;align-items:center;gap:10px}
.status-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2s infinite}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:75px 0 80px;position:relative}
.eyebrow{display:flex;align-items:center;gap:15px;color:var(--cyan);margin-bottom:23px}.eyebrow .line{height:1px;width:33px;background:var(--cyan)}.sep{color:#777}
.headline{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.99;letter-spacing:-.065em;font-weight:950;font-stretch:condensed;text-transform:uppercase;text-wrap:balance;font-size:clamp(55px,10vw,148px)}
.headline-top{font-size:.43em;letter-spacing:.18em;transform:translateX(.1em);font-weight:800;color:#dce1ec;margin-bottom:.23em}
.glitch{position:relative;display:block;font-weight:950;color:#f5f5ff;text-shadow:0 0 44px #65efff2a;animation:appear .9s ease-out both}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden}
.glitch:before{color:var(--cyan);transform:translateX(3px);text-shadow:-3px 0 var(--cyan);animation:glitchA 7.2s infinite}
.glitch:after{color:var(--pink);transform:translateX(-3px);text-shadow:3px 0 var(--pink);animation:glitchB 7.2s infinite}
.intro{color:#adb4ca;line-height:1.8;font-size:clamp(15px,1.5vw,18px);margin:31px 0 45px;letter-spacing:.02em}
.glass-panel{width:min(600px,100%);border:1px solid #ffffff2b;background:linear-gradient(135deg,#ffffff0e,#ffffff04);backdrop-filter:blur(14px);padding:25px 27px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:0 8px 45px #0004}
.panel-top,.panel-bottom{display:flex;justify-content:space-between;gap:16px;color:#aeb7c9;text-align:left}.panel-top .ready{color:var(--cyan)}.blink{animation:blink 1s steps(1) infinite}
.progress-track{margin:23px 0;height:5px;background:#ffffff20;overflow:hidden}.progress-fill{height:100%;width:34%;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 23px var(--cyan);animation:loading 4.3s ease-in-out infinite alternate}
.panel-bottom{font-size:9px;color:#80899f}
.coming{display:flex;gap:16px;align-items:center;margin-top:42px;color:#e9eaf5;font-size:12px;letter-spacing:.37em;font-family:Consolas,"Courier New",monospace;font-weight:800}.accent-square{width:5px;height:5px;transform:rotate(45deg);background:var(--pink);box-shadow:0 0 13px var(--pink)}
.footer{border-top:1px solid #ffffff20;padding-top:24px;color:#737d94}.coordinate{color:var(--cyan)}
@keyframes loading{0%{width:12%}100%{width:93%}}@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{opacity:.3;box-shadow:0 0 2px var(--cyan)}}@keyframes drift{to{transform:translate(80px,-70px)}}@keyframes gridMove{to{background-position:0 65px,65px 0}}@keyframes appear{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes glitchA{0%,90%,92%,96%,100%{opacity:0;clip-path:inset(0 0 100% 0)}90.6%{opacity:.85;clip-path:inset(10% 0 60% 0)}91.3%{opacity:.7;clip-path:inset(50% 0 25% 0)}95.2%{opacity:.7;clip-path:inset(75% 0 5% 0)}}
@keyframes glitchB{0%,90%,93%,97%,100%{opacity:0;clip-path:inset(0 0 100% 0)}91%{opacity:.7;clip-path:inset(48% 0 45% 0)}92%{opacity:.8;clip-path:inset(20% 0 70% 0)}96%{opacity:.7;clip-path:inset(60% 0 10% 0)}}
@media(max-width:680px){.page{padding:23px 21px}.topbar{align-items:flex-start}.header-right{font-size:8px;max-width:135px;line-height:1.6}.wordmark{font-size:18px}.hero{padding:76px 0}.headline{font-size:clamp(42px,12.6vw,85px)}.headline-top{font-size:.5em}.eyebrow{font-size:9px;gap:8px}.eyebrow .line{width:16px}.glass-panel{padding:22px 16px}.panel-top,.panel-bottom{font-size:8px;letter-spacing:.075em}.coming{font-size:10px;letter-spacing:.24em}.footer{font-size:8px;flex-wrap:wrap}.footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.progress-fill{width:65%}.glitch:before,.glitch:after{display:none}}

/* v2 — cinematic system start and restrained reactive atmosphere */
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.66}
body:before{background:radial-gradient(ellipse at 50% 38%,#19335790 0%,transparent 54%),linear-gradient(145deg,#060711,#0b0c19 55%,#070912)}
.grid-floor{background-size:72px 72px;animation:gridMoveV2 19s linear infinite;opacity:.7;filter:drop-shadow(0 0 3px #38bfe930)}
@keyframes gridMoveV2{to{background-position:0 72px,72px 0}}
.sweep{position:fixed;pointer-events:none;inset:-60% 0 auto;height:42%;z-index:-1;opacity:0;background:linear-gradient(to bottom,transparent,#65efff0a 55%,#65efff14 60%,transparent);transform:translateY(-100%);animation:sweep 13s linear infinite 4s}
@keyframes sweep{0%{transform:translateY(-100%);opacity:0}4%{opacity:.6}32%{opacity:.4}40%,100%{transform:translateY(550%);opacity:0}}
.ambient-left{animation:driftV2 18s ease-in-out infinite alternate}.ambient-right{animation:driftV2 22s ease-in-out infinite alternate-reverse}
@keyframes driftV2{from{transform:translate(-20px,12px) scale(.95)}to{transform:translate(60px,-44px) scale(1.13)}}
.page{position:relative;z-index:2}
.topbar{animation:slideDown .8s cubic-bezier(.18,.85,.24,1) .45s both}
.hero .eyebrow{animation:slideUp .9s cubic-bezier(.16,.82,.22,1) .72s both}
.headline-top{animation:slideUp .95s cubic-bezier(.16,.82,.22,1) .87s both}
.headline .glitch{animation:headlineIn 1.05s cubic-bezier(.12,.82,.24,1) 1s both}
.intro{animation:slideUp .85s ease-out 1.35s both}
.glass-panel{animation:panelIn 1.05s cubic-bezier(.16,.8,.22,1) 1.52s both;position:relative;isolation:isolate;overflow:hidden}
.glass-panel::before{content:"";position:absolute;inset:-60% auto -60% -30%;width:20%;background:linear-gradient(90deg,transparent,#65efff13,transparent);transform:skewX(-18deg) translateX(-450%);animation:panelSheen 11s ease-in-out 4.5s infinite;z-index:-1}
.coming{animation:slideUp .85s ease-out 1.85s both}
.footer{animation:slideUp .75s ease-out 2.02s both}
@keyframes slideDown{from{opacity:0;transform:translateY(-13px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(25px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes headlineIn{0%{opacity:0;transform:translateY(38px) scale(1.06);filter:blur(11px)}70%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(28px) scale(.975);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes panelSheen{0%,77%,100%{transform:skewX(-18deg) translateX(-450%)}90%{transform:skewX(-18deg) translateX(800%)}}
.glitch::before,.glitch::after{animation:none!important}
.glitch.is-glitching::before{animation:glitchBurstA .35s steps(2,end) both!important}
.glitch.is-glitching::after{animation:glitchBurstB .35s steps(2,end) both!important}
@keyframes glitchBurstA{0%{opacity:0;clip-path:inset(0 0 100%)}20%{opacity:1;transform:translateX(-6px);clip-path:inset(13% 0 67%)}45%{opacity:.65;transform:translateX(5px);clip-path:inset(63% 0 18%)}75%{opacity:.8;transform:translateX(-2px);clip-path:inset(42% 0 45%)}100%{opacity:0;clip-path:inset(0 0 100%)}}
@keyframes glitchBurstB{0%{opacity:0;clip-path:inset(0 0 100%)}18%{opacity:.7;transform:translateX(8px);clip-path:inset(58% 0 28%)}52%{opacity:.9;transform:translateX(-6px);clip-path:inset(24% 0 62%)}80%{opacity:.6;transform:translateX(3px);clip-path:inset(79% 0 9%)}100%{opacity:0;clip-path:inset(0 0 100%)}}
.progress-track{height:6px;position:relative;border-radius:10px;background:#ffffff16;overflow:visible}
.progress-fill{width:0%;border-radius:10px;animation:none;transition:width 1.7s cubic-bezier(.22,.75,.2,1);box-shadow:0 0 14px #65efff77}
.progress-spark{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#deffff;transform:translate(-50%,-50%);filter:blur(3px);box-shadow:0 0 24px 7px #65efff66;opacity:.5;transition:left 1.7s cubic-bezier(.22,.75,.2,1)}
.panel-bottom #progressNumber{color:#7eeaf6;letter-spacing:.11em}
.boot-overlay{position:fixed;z-index:20;inset:0;background:#070913;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;transition:opacity .7s ease,visibility .7s;pointer-events:none}
.boot-overlay span{font:700 11px Consolas,monospace;color:#8debf5;letter-spacing:.33em}
.boot-track{width:min(280px,70vw);height:2px;background:#ffffff24;overflow:hidden}
.boot-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 20px var(--cyan);animation:bootLoading 1.15s ease-out forwards}
@keyframes bootLoading{0%{width:0}45%{width:39%}73%{width:66%}100%{width:100%}}
.boot-overlay.dismissed{opacity:0;visibility:hidden}
@media(max-width:680px){.grid-floor{opacity:.45}#particles{opacity:.4}.boot-overlay span{font-size:9px}.sweep{display:none}}
@media(prefers-reduced-motion:reduce){.boot-overlay{display:none!important}.glitch.is-glitching::before,.glitch.is-glitching::after{animation:none!important}.progress-fill,.progress-spark{transition:none!important}.glass-panel::before{animation:none!important}}
