/* ============================================================
   SYRAEL NEXUS — v3 "IMMERSION CORE"
   Paper-white high-tech world · neon signal red · HUD game layer
   WebGL silk shader behind everything · decode typography
   ============================================================ */
:root{
  --bg:#eef1f4; --bg2:#f6f8fa; --panel:#ffffff; --panel2:#f0f3f6;
  --ink:#0e1116; --ink2:#232a31; --grey:#4d565f; --grey2:#777;
  --line:rgba(14,17,22,.10); --line2:rgba(14,17,22,.22);
  --dark:#101318; --dark2:#171c22;
  --neon:#ff3b1d; --neon2:#ff7a3c; --neon-deep:#d92c0f;
  --glow:rgba(255,59,29,.45); --glow2:rgba(255,122,60,.5);
  --sb:230px; --nav:70px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease2:cubic-bezier(.83,0,.17,1);
  --fd:"Chakra Petch",sans-serif;
  --fb:"Space Grotesk",sans-serif;
  --fm:"JetBrains Mono",monospace;
  --fs:"Instrument Serif",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* CRITICAL: native smooth-scroll must stay OFF — it stacked on top of
   Lenis and caused multi-second scroll latency */
html{scroll-behavior:auto}
body{background:linear-gradient(180deg,#fbfcfd 0%,#f2f5f8 45%,#e9edf2 100%) fixed;color:var(--ink);font-family:var(--fb);font-weight:400;line-height:1.6;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--neon);color:#fff}

/* WebGL canvas IS the world — everything floats above it */
#bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== HUD frame (fixed corner brackets + live readouts) ===== */
.hud{position:fixed;inset:0;z-index:70;pointer-events:none;font-family:var(--fm)}
.hud .hbr{position:absolute;width:22px;height:22px;border:1.5px solid var(--line2)}
.hud .tl{top:14px;left:calc(var(--sb) + 14px);border-right:0;border-bottom:0}
.hud .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.hud .bl2{bottom:14px;left:calc(var(--sb) + 14px);border-right:0;border-top:0}
.hud .br{bottom:14px;right:14px;border-left:0;border-top:0}
.hud .hud-sec{position:absolute;bottom:20px;right:48px;font-size:9px;font-weight:700;letter-spacing:3px;color:var(--grey2)}
.hud .hud-pos{position:absolute;bottom:20px;left:calc(var(--sb) + 48px);font-size:9px;font-weight:700;letter-spacing:3px;color:var(--grey2)}
@media(max-width:900px){.hud .tl,.hud .bl2{left:14px}.hud .hud-pos{left:48px}}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--line2);border-radius:50%;transform:translate(-50%,-50%);z-index:10010;pointer-events:none;transition:width .3s,height .3s,background .3s,border-color .3s}
.cursor-dot{position:fixed;top:0;left:0;width:5px;height:5px;background:var(--neon);border-radius:50%;transform:translate(-50%,-50%);z-index:10011;pointer-events:none;box-shadow:0 0 10px var(--glow)}
.cursor.hover{width:62px;height:62px;border-color:var(--neon);background:rgba(255,59,29,.06)}
@media(hover:none){body{cursor:auto}.cursor,.cursor-dot{display:none}}

/* cursor-following audio prompt — removed, now in loader */

/* ===== IMMERSIVE AI LOADER — sovereign cognitive boot sequence ===== */
#loader{position:fixed;inset:0;z-index:10001;background:radial-gradient(ellipse at 50% 60%,#2a2a2e 0%,#1a1a1e 50%,#101014 100%);color:#e8e8ec;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:opacity 1s var(--ease),visibility 1s;overflow:hidden;padding-top:160px;padding-bottom:40px}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loader::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px);pointer-events:none}
#loader::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(16,16,20,.5) 100%);pointer-events:none}
#lcanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6;z-index:0}

/* concentric cognitive rings — dark military */
.lrings{position:relative;top:auto;left:auto;transform:none;width:360px;height:360px;pointer-events:none;z-index:2;margin-top:10px;flex-shrink:0;overflow:visible}
.lring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.15)}
.lring.r1{inset:0;animation:lspin 8s linear infinite;border-color:rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.8)}
.lring.r2{inset:45px;animation:lspin 6s linear infinite reverse;border-color:rgba(255,255,255,.12);border-right-color:rgba(255,255,255,.5)}
.lring.r3{inset:90px;animation:lspin 4s linear infinite;border-color:rgba(255,255,255,.1);border-bottom-color:rgba(255,255,255,.4)}
.lcore{position:absolute;inset:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);animation:lpulse 2s ease-in-out infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
@keyframes lpulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

/* neural network SVG — dark */
.lneural{position:absolute;top:40px;left:0;right:0;transform:none;width:100%;height:400px;opacity:0;animation:lnfade 1.5s ease .3s forwards;pointer-events:none;z-index:2}
@keyframes lnfade{to{opacity:.5}}
.lneural .ln-node{fill:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}
.lneural .ln-line{stroke:rgba(255,255,255,.25);stroke-width:.8}
.lneural .ln-pulse{stroke:#fff;stroke-width:2;opacity:0;animation:lnpulse 2s ease-in-out infinite}
@keyframes lnpulse{0%{opacity:0;stroke-dashoffset:20}50%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}

/* classified corner brackets */
.lcorners{position:absolute;inset:20px;pointer-events:none;z-index:4}
.lcorners::before,.lcorners::after{content:"";position:absolute;width:32px;height:32px;border:1px solid rgba(255,255,255,.5)}
.lcorners::before{top:0;left:0;border-right:none;border-bottom:none}
.lcorners::after{bottom:0;right:0;border-left:none;border-top:none}

/* brand — military stencil */
.lbrand{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:14px;color:#ff0a00;text-indent:14px;z-index:2;position:relative;margin-top:20px;text-shadow:0 0 30px rgba(255,10,0,.5)}
.lbrand::after{content:"_";color:#ff0a00;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lsub{font-family:var(--fm);font-size:9px;letter-spacing:5px;color:rgba(255,255,255,.8);margin-top:8px;z-index:2;position:relative}

/* classified header */
.lclass{position:absolute;top:220px;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:12px;letter-spacing:4px;color:#ff0a00;z-index:5;display:flex;gap:32px;align-items:center;text-shadow:0 0 12px rgba(255,10,0,.6)}
.lclass::before,.lclass::after{content:"";width:60px;height:1px;background:rgba(255,10,0,.6)}

/* AI boot log — terminal green */
.llog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:680px;height:130px;margin-top:0;font-family:var(--fm);font-size:10px;letter-spacing:.8px;color:rgba(255,255,255,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;z-index:3;padding:0;pointer-events:none}
.llog .ll{opacity:0;animation:llin .4s ease forwards}
.llog .ll.new{color:#fff;opacity:1;text-shadow:0 0 12px rgba(255,255,255,.8)}
@keyframes llin{to{opacity:.7}}

/* progress ring — dark */
.lprogress{position:relative;width:64px;height:64px;margin-top:50px;z-index:2}
.lprsvg{width:100%;height:100%;transform:rotate(-90deg)}
.lpr-track{stroke:rgba(255,255,255,.15)}
.lpr-fill{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .3s ease;filter:drop-shadow(0 0 14px rgba(255,255,255,.9))}
.lpr-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:12px;color:rgba(255,255,255,1);letter-spacing:1px}

/* entry buttons — dark military */
.lentry{display:flex;gap:16px;margin-top:40px;z-index:2;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.lentry.show{opacity:1;transform:translateY(0)}
.lbtn{display:flex;align-items:center;gap:10px;padding:14px 28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);border-radius:2px;color:#e8e8ec;font-family:var(--fm);font-size:10px;letter-spacing:2px;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(8px);text-transform:uppercase}
.lbtn:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff;box-shadow:0 0 36px rgba(255,255,255,.3)}
.lbtn.lsnd:hover{border-color:#fff;box-shadow:0 0 36px rgba(255,255,255,.4)}
.lbtn.lsilent:hover{border-color:rgba(255,255,255,.2);box-shadow:0 0 24px rgba(255,255,255,.05)}
.lbtn svg{opacity:.5}

/* tactical grid overlay */
.lgrid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.7}

/* side data panels — Palantir/Lockheed style */
.lpanel{position:absolute;top:50%;transform:translateY(-50%);width:320px;z-index:3;pointer-events:none;opacity:0;animation:lpfade 1s ease .5s forwards}
@keyframes lpfade{to{opacity:1}}
.lpanel-l{left:280px}
.lpanel-r{right:280px}
@media(max-width:1300px){.lpanel{display:none}}

.lp-hd{font-family:var(--fm);font-size:10px;letter-spacing:2.5px;color:rgba(255,255,255,.7);text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:12px}
.lp-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:11px;letter-spacing:1px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lp-k{color:rgba(255,255,255,.4);text-transform:uppercase}
.lp-v{color:rgba(232,232,236,.7);text-transform:uppercase}
.lp-v.lp-ok{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}
.lp-bar{margin-top:10px;height:3px;background:rgba(255,255,255,.08);border-radius:1px;overflow:hidden}
.lp-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#fff,#aaa);box-shadow:0 0 8px rgba(255,255,255,.6);transition:width .3s ease}

/* intel feed */
.lp-feed{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:hidden}
.lp-feed .lpi{font-family:var(--fm);font-size:10px;letter-spacing:.5px;color:rgba(232,232,236,.4);padding:4px 0;border-left:2px solid rgba(255,255,255,.15);padding-left:10px;opacity:0;animation:lpiin .4s ease forwards}
.lp-feed .lpi.alert{color:rgba(255,255,255,.8);border-left-color:rgba(255,255,255,.5)}
@keyframes lpiin{to{opacity:1}}

/* bottom data ticker */
.lticker{position:absolute;bottom:20px;left:20px;right:20px;height:28px;background:rgba(16,16,20,.8);border-top:1px solid rgba(255,255,255,.12);overflow:hidden;z-index:3;display:flex;align-items:center}
.lticker-track{display:flex;gap:80px;white-space:nowrap;font-family:var(--fm);font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.5);text-transform:uppercase;animation:ltscroll 30s linear infinite}
@keyframes ltscroll{from{transform:translateX(-25%)}to{transform:translateX(-50%)}}
.lticker-track .lti{display:flex;align-items:center;gap:6px}
.lticker-track .lti::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ===== TOP NAV ===== */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:0 34px 0 calc(var(--sb) + 34px);
  background:linear-gradient(180deg,rgba(246,248,250,.75),rgba(246,248,250,0));backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topnav .brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;letter-spacing:3px;font-size:16px}
.topnav .brand .bname{line-height:1}
.topnav .brand .labs{font-family:var(--fm);font-weight:500;font-size:8.5px;letter-spacing:2.5px;color:var(--neon);border:1px solid rgba(255,59,29,.55);padding:3px 5px 2px;border-radius:2px;box-shadow:0 0 12px -4px var(--glow);animation:labspulse 3.2s ease-in-out infinite}
@keyframes labspulse{0%,100%{box-shadow:0 0 12px -4px var(--glow);border-color:rgba(255,59,29,.55)}50%{box-shadow:0 0 16px -2px var(--glow);border-color:var(--neon)}}
/* ===== OPHANIM MARK — wheel within wheel, alien-tech gyroscope ===== */
.lmark{width:34px;height:34px;overflow:visible}
.lmark *{transform-box:view-box;transform-origin:50% 50%}
.lmark .ow{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:2.5 4.1;animation:ophspin 26s linear infinite}
.lmark .oi{fill:none;stroke:#8b929b;stroke-width:1;stroke-dasharray:1 4.3;animation:ophspinR 18s linear infinite}
.lmark .gy1 ellipse,.lmark .gy2 ellipse{fill:none;stroke:var(--neon);stroke-width:1.5;stroke-dasharray:120;stroke-dashoffset:120;animation:ophdraw 1.6s .2s var(--ease) forwards}
.lmark .gy2 ellipse{stroke:var(--ink);stroke-width:1.2;animation-delay:.5s}
.lmark .gy1{animation:ophg1 9s linear infinite}
.lmark .gy2{animation:ophg2 13s linear infinite}
.lmark .gy3 ellipse{fill:none;stroke:rgba(255,59,29,.0);stroke-width:.8}
.lmark .orb{animation:ophspin 6.5s linear infinite}
.lmark .orb2{animation:ophspinR 4.2s linear infinite}
.lmark .eye{fill:var(--neon);filter:drop-shadow(0 0 4px var(--glow))}
.lmark .eye2{fill:var(--ink)}
.lmark .core{fill:var(--neon);filter:drop-shadow(0 0 7px var(--glow));animation:ophcore 2.4s ease-in-out infinite}
.lmark .corehalo{fill:none;stroke:var(--neon);stroke-width:.8;opacity:.5;animation:ophhalo 2.4s ease-in-out infinite}
@keyframes ophspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ophspinR{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes ophg1{from{transform:rotate(28deg)}to{transform:rotate(388deg)}}
@keyframes ophg2{from{transform:rotate(-28deg)}to{transform:rotate(-388deg)}}
@keyframes ophdraw{to{stroke-dashoffset:0}}
@keyframes ophcore{0%,100%{opacity:1;r:3}50%{opacity:.55;r:2.4}}
@keyframes ophhalo{0%,100%{opacity:.5;r:5.6}50%{opacity:.1;r:7.2}}
@keyframes markpulse{0%,100%{opacity:1}50%{opacity:.5}}
.topnav .links{display:flex;gap:36px}
.topnav .links a{font-family:var(--fm);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);position:relative;padding:6px 0;transition:color .3s}
.topnav .links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--neon);transition:width .35s var(--ease);box-shadow:0 0 8px var(--glow)}
.topnav .links a:hover{color:var(--ink)}.topnav .links a:hover::after{width:100%}
.topnav .cta{font-family:var(--fm);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--neon);padding:11px 20px;border-radius:2px;box-shadow:0 6px 20px -8px var(--glow);transition:transform .3s,background .3s}
.topnav .cta:hover{background:var(--neon-deep)}
@media(max-width:900px){.topnav .links{display:none}.topnav{padding-left:24px}}

/* ===== SIDEBAR RAIL ===== */
.rail{position:fixed;top:0;left:0;width:var(--sb);height:100vh;z-index:85;background:linear-gradient(180deg,var(--dark),#0d1116);
  display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px;border-right:1px solid rgba(255,255,255,.06)}
.rail .rtop{display:flex;flex-direction:column;align-items:center;gap:10px}
.rail .dot{width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--glow);animation:markpulse 2.4s ease-in-out infinite}
.rail .rtop .tag{font-family:var(--fm);font-size:9px;letter-spacing:3px;color:#7b8390;text-transform:uppercase;line-height:1.5;text-align:center}
.rail .vnav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.rail .vnav a{font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#7b8390;padding:9px 0;position:relative;transition:color .35s;overflow:hidden;text-align:center}
.rail .vnav a span.ch{display:inline-block;transition:transform .4s var(--ease),color .4s;transition-delay:calc(var(--i)*16ms)}
.rail .vnav a::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:4px;width:0;height:1px;background:var(--neon);transition:width .4s var(--ease);box-shadow:0 0 8px var(--glow)}
.rail .vnav a:hover{color:#fff}
.rail .vnav a:hover span.ch{transform:translateY(-3px);color:var(--neon2)}
.rail .vnav a:hover::after{width:32px}
.rail .vnav a.on{color:#fff}.rail .vnav a.on::after{width:32px}
.rail .rbot{display:flex;flex-direction:column;align-items:center;gap:16px}
.rail .sound{display:flex;align-items:center;justify-content:center;gap:8px;cursor:none;width:100%}
.rail .sound .eq{display:flex;align-items:flex-end;gap:2px;height:13px}
.rail .sound .eq i{width:2px;height:4px;background:#5a626b;transition:background .3s}
.rail .sound.on .eq i{background:var(--neon);animation:eq 1s ease-in-out infinite}
.rail .sound.on .eq i:nth-child(2){animation-delay:.2s}.rail .sound.on .eq i:nth-child(3){animation-delay:.4s}
.rail .socials{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--fm);font-size:9px;letter-spacing:1px;color:#4b525a;text-align:center}
.rail .socials a:hover{color:var(--neon2)}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
@media(max-width:900px){:root{--sb:0px}.rail{display:none}}

/* ===== stage / sections ===== */
.stage{position:relative;z-index:5;margin-left:var(--sb)}
.hero{min-height:100vh;padding:calc(var(--nav) + 40px) 7vw 60px;display:flex;flex-direction:column;justify-content:center;position:relative}
.section{min-height:100vh;padding:170px 7vw 110px;display:flex;flex-direction:column;justify-content:center;position:relative}
.section.tall{min-height:auto;padding-bottom:140px}

/* labels + type */
.klabel{font-family:var(--fm);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--neon);display:flex;align-items:center;gap:12px;margin-bottom:24px}
.klabel::before{content:"";width:26px;height:1px;background:var(--neon);box-shadow:0 0 8px var(--glow)}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.0;letter-spacing:.01em;color:var(--ink);text-transform:uppercase}
.h-hero{font-size:clamp(46px,7.6vw,116px);font-weight:700;line-height:.92}
.h-xl{font-size:clamp(34px,5vw,72px);font-weight:700}
.h-lg{font-size:clamp(26px,3.2vw,46px)}
.sub{font-family:var(--fb);font-size:clamp(15px,1.4vw,20px);color:var(--grey);max-width:56ch;line-height:1.55;text-transform:none;font-weight:400}
.accent{color:var(--neon)}
.hero .h-hero{max-width:16ch}
.hero .sub{margin-top:26px}
.dim{color:var(--grey2);font-weight:700}
strong{font-weight:600;color:var(--ink)}

/* ===== DECODE TEXT (per-char glyph scramble) ===== */
h1,h2,.klabel,.foot .big{visibility:hidden}
h1.dec-run,h2.dec-run,.klabel.dec-run,.foot .big.dec-run,
h1.dec-done,h2.dec-done,.klabel.dec-done,.foot .big.dec-done{visibility:visible}
.din{display:inline}
.dw{display:inline-block;white-space:nowrap}
.dch{display:inline-block;opacity:.35;transform:translateY(.08em);color:var(--grey2);transition:opacity .18s,transform .3s var(--ease),color .25s}
.dch.set{opacity:1;transform:none;color:inherit}
.accent .dch.set{color:var(--neon)}
.dec-done .dch{transition:none}

/* masked line fallback */
.rline{overflow:hidden;display:block}
.rline>span,.word{display:inline-block}
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:15px 28px;font-family:var(--fm);font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:#fff;background:var(--neon);border-radius:2px;overflow:hidden;transition:transform .3s;box-shadow:0 10px 28px -10px var(--glow)}
.btn::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);transition:transform .45s var(--ease2)}
.btn span{position:relative;z-index:1}
.btn:hover::after{transform:translateX(0)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line2);box-shadow:none}
.btn.ghost::after{background:var(--neon)}.btn.ghost:hover{color:#fff}
.hero .btns{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap}

/* corner meta */
.hint{position:absolute;bottom:36px;right:7vw;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--grey2);text-align:right;text-transform:uppercase}
.corner-l{position:absolute;bottom:36px;left:7vw;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--grey2);text-transform:uppercase}
.sec-no{font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--grey2);text-transform:uppercase;margin-bottom:8px}

/* ===== STAT BLOCKS — transparent zig-zag panels ===== */
.stats.panels{display:flex;flex-direction:column;gap:40px;margin-top:56px}
.stat-panel{position:relative;background:transparent;border:1px solid transparent;border-radius:2px;width:50%;min-height:auto;opacity:0;transform:translateY(50px);padding:44px 52px;overflow:hidden}
.stat-panel:nth-child(odd){margin-right:auto}
.stat-panel:nth-child(even){margin-left:auto}
.stat-panel::before{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:2px;opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .8s var(--ease),clip-path .8s var(--ease),border-color .6s var(--ease)}
.stat-panel:nth-child(even)::before{clip-path:inset(0 0 0 100%)}
.stat-panel.imm::before{opacity:1;clip-path:inset(0)}
.stat-panel::after{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,59,29,.0);border-radius:2px;opacity:0;transition:opacity .8s var(--ease),clip-path .8s var(--ease),border-color .6s var(--ease);filter:drop-shadow(0 0 12px rgba(255,59,29,.18))}
.stat-panel:nth-child(even)::after{clip-path:inset(0 0 0 100%)}
.stat-panel.imm::after{opacity:1;clip-path:inset(0);border-color:rgba(255,59,29,.55)}
.stat-panel .p-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.stat-panel .p-tag{font-family:var(--fm);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--neon);margin-bottom:14px;opacity:0;transform:translateY(14px)}
.stat-panel .p-body h3{font-size:clamp(34px,3.6vw,64px);margin-bottom:16px;text-transform:none;line-height:1.05;opacity:0;transform:translateY(24px)}
.stat-panel .p-desc{font-family:var(--fb);font-size:16px;line-height:1.65;color:var(--grey);margin-bottom:34px;opacity:0;transform:translateY(20px)}
.panel-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;opacity:0;transform:translateY(24px);perspective:800px}
.panel-stats.cols-3{grid-template-columns:repeat(3,1fr)}
.panel-stats.cols-1{grid-template-columns:1fr;max-width:260px}
.panel-stats .statb{padding:22px 20px;background:rgba(246,248,250,.45);border:1px solid var(--line);border-radius:14px;min-height:auto;transition:background .3s,border-color .3s,transform .3s var(--ease);backdrop-filter:none}
.panel-stats .statb:hover{background:#fff;border-color:rgba(255,59,29,.35);transform:translateY(-4px)}
.panel-stats .statb::before{display:none}
.panel-stats .statb .k{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--grey2);text-transform:uppercase;margin-bottom:8px}
.panel-stats .statb .num{font-family:var(--fs);font-weight:400;font-size:clamp(30px,2.8vw,50px);line-height:.95;color:var(--neon);letter-spacing:-.01em;white-space:nowrap}
.panel-stats .statb .lab{font-family:var(--fb);font-size:12px;font-weight:700;line-height:1.4;color:var(--grey2);text-transform:none}
@media(max-width:1100px){
  .stat-panel{width:70%;padding:38px 42px}
}
@media(max-width:980px){
  .stat-panel{width:100%;padding:32px 28px}
  .stat-panel::before,.stat-panel::after{opacity:1;clip-path:inset(0)}
}
@media(max-width:680px){.panel-stats{grid-template-columns:repeat(2,1fr)}.panel-stats.cols-3{grid-template-columns:1fr}.panel-stats.cols-1{max-width:none}}
@media(prefers-reduced-motion:reduce){.stat-panel,.stat-panel::before,.stat-panel .p-tag,.stat-panel .p-body h3,.stat-panel .p-desc,.stat-panel .panel-stats{opacity:1;transform:none;clip-path:none}}

/* ===== 3D WORLD MAP (WebGL atlas above the range) ===== */
#global{min-height:auto;padding-bottom:420px}
.maphint{margin-top:26px;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--grey2);text-transform:uppercase}
.maplabel3d{position:fixed;top:0;left:0;z-index:60;font-family:var(--fm);font-size:10px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s}
.maplabel3d::before{content:"";display:inline-block;width:5px;height:5px;background:var(--neon);border-radius:50%;margin-right:6px;box-shadow:0 0 10px var(--glow);vertical-align:middle}

/* ===== C.O.R.E 3D SPHERES ===== */
.core-hint{margin-top:34px;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:3px;color:var(--grey2);text-transform:uppercase;opacity:.7}
.coretip{position:fixed;top:0;left:0;z-index:60;width:min(320px,82vw);padding:22px 24px;background:rgba(230,230,232,.94);border:1px solid rgba(255,59,29,.45);border-radius:16px;backdrop-filter:blur(14px);box-shadow:0 20px 60px -20px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translate(-50%,-100%) translateY(-16px);transition:opacity .25s var(--ease);will-change:transform,opacity}
.core-panel{position:absolute;right:10%;top:60%;bottom:auto;width:32%;max-width:none;margin:0;opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.core-panel.in{opacity:1;transform:translateY(0)}
.core-panel .p-tag,.core-panel .p-body h3,.core-panel .p-desc{opacity:1;transform:none}
.coretip.active{opacity:1}
.coretip .ct-no{font-family:var(--fs);font-size:36px;color:var(--neon);line-height:1;margin-bottom:8px}
.coretip h3{font-size:18px;margin-bottom:8px;text-transform:none;color:#1a1a1a}
.coretip p{font-size:13px;color:#444;text-transform:none;line-height:1.55}

/* ===== X-TEAM — 2-column zigzag with circular portraits ===== */
.xt-wrap{position:relative;width:100%;max-width:none;margin:0 auto;padding:0 20px}
.xt-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:start}
@media(max-width:700px){.xt-cols{grid-template-columns:1fr;gap:20px}}

.xt-col{display:flex;flex-direction:column;gap:24px;padding:10px 0}
#xtLeft{align-items:flex-end;padding-right:60px}
#xtRight{align-items:flex-start;padding-left:60px}
@media(max-width:700px){#xtLeft,#xtRight{align-items:center;padding:5px 0}}

/* center heading */
.xt-center-hd{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 24px;min-width:220px;align-self:center;position:sticky;top:50%;transform:translateY(-50%)}
@media(max-width:700px){.xt-center-hd{position:static;transform:none}}
.xtc-bracket{position:absolute;width:20px;height:20px;border:1.5px solid var(--neon);opacity:.3}
.xtc-bracket.tl{top:0;left:0;border-right:none;border-bottom:none}
.xtc-bracket.tr{top:0;right:0;border-left:none;border-bottom:none}
.xtc-bracket.bl{bottom:0;left:0;border-right:none;border-top:none}
.xtc-bracket.br{bottom:0;right:0;border-left:none;border-top:none}
.xtc-label{font-family:var(--fm);font-size:9px;letter-spacing:3px;color:var(--neon);text-transform:uppercase;opacity:.6;text-align:center;white-space:nowrap}
.xtc-heading{font-family:var(--fd);font-size:clamp(24px,3.5vw,42px);font-weight:700;text-transform:uppercase;letter-spacing:2px;text-align:center;line-height:1;margin:0;white-space:nowrap}
.xtc-accent{color:var(--neon);text-shadow:0 0 30px rgba(255,59,29,.3)}
.xtc-sub{font-family:var(--fm);font-size:8px;font-weight:700;letter-spacing:2px;color:var(--grey2);text-transform:uppercase;text-align:center;white-space:nowrap}

/* ══ OBSIDIAN CORE — crystal + constellation network ══ */
.xt-cols{position:relative;z-index:1}
.xt-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.xtn-path{fill:none;stroke:rgba(217,44,15,.18);stroke-width:1;transition:stroke .3s,stroke-width .3s}
.xtn-dot{fill:var(--neon);opacity:.55;filter:drop-shadow(0 0 4px var(--glow));transition:opacity .3s}
.xtn-pulse{fill:#fff;filter:drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 2px #fff)}
.xt-net g.on .xtn-path{stroke:var(--neon);stroke-width:1.5;filter:drop-shadow(0 0 6px var(--glow))}
.xt-net g.on .xtn-dot{opacity:1}
@media(max-width:700px){.xt-net{display:none}}

.xt-crystal{position:relative;width:150px;height:190px;margin-bottom:12px;animation:xtcFloat 6s ease-in-out infinite}
.xtc-gem{width:100%;height:100%;display:block;position:relative;z-index:1;animation:xtcGlow 3.2s ease-in-out infinite}
.xtc-gem .f{animation:xtcFacet 4.5s ease-in-out infinite}
.xtc-gem .f:nth-of-type(1){animation-delay:0s}
.xtc-gem .f:nth-of-type(2){animation-delay:.7s}
.xtc-gem .f:nth-of-type(3){animation-delay:1.4s}
.xtc-gem .f:nth-of-type(4){animation-delay:2.1s}
.xtc-gem .f:nth-of-type(5){animation-delay:2.8s}
.xtc-gem .f:nth-of-type(6){animation-delay:3.5s}
@keyframes xtcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes xtcGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(255,59,29,.3)) drop-shadow(0 0 50px rgba(255,59,29,.12))}50%{filter:drop-shadow(0 0 26px rgba(255,59,29,.55)) drop-shadow(0 0 80px rgba(255,59,29,.28))}}
@keyframes xtcFacet{0%,100%{opacity:.45}50%{opacity:.95}}
.xtc-ring{position:absolute;left:50%;top:50%;width:40px;height:40px;border:1px solid var(--neon);border-radius:50%;transform:translate(-50%,-50%);opacity:0;animation:xtcRing 3.4s ease-out infinite;pointer-events:none}
.xtc-ring.r2{animation-delay:1.7s}
@keyframes xtcRing{0%{opacity:.5;width:30px;height:30px}100%{opacity:0;width:180px;height:180px}}
.xtc-sparks{position:absolute;inset:-30px;pointer-events:none}
.xtc-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--neon);opacity:0;box-shadow:0 0 6px var(--glow);animation:xtcTw 3s ease-in-out infinite}
@keyframes xtcTw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.xt-crystal,.xtc-gem,.xtc-gem .f,.xtc-ring,.xtc-sparks i{animation:none}}

/* rows — compact, zigzag horizontally within column */
.xt-row{display:flex;align-items:center;gap:16px;cursor:none;position:relative;padding:6px 0;opacity:0}
.xt-row.xt-in{opacity:1}
#xtLeft .xt-row{justify-content:flex-end}
#xtRight .xt-row{justify-content:flex-start;flex-direction:row-reverse}
/* zigzag — alternate horizontal offset toward/away from center */
#xtLeft .xt-row:nth-child(odd){padding-right:280px}
#xtLeft .xt-row:nth-child(even){padding-right:40px}
#xtRight .xt-row:nth-child(odd){padding-left:280px}
#xtRight .xt-row:nth-child(even){padding-left:40px}
@media(max-width:700px){
  #xtLeft .xt-row:nth-child(odd),#xtRight .xt-row:nth-child(odd){padding-right:0;padding-left:0}
  #xtLeft .xt-row:nth-child(even),#xtRight .xt-row:nth-child(even){padding-right:0;padding-left:0}
}

/* connector line from circle toward center */
.xt-row .xt-line{flex:0 0 40px;height:1px;background:linear-gradient(90deg,rgba(14,17,22,.08),transparent);transition:background .3s}
#xtRight .xt-line{background:linear-gradient(90deg,transparent,rgba(14,17,22,.08))}
.xt-row:hover .xt-line{background:linear-gradient(90deg,var(--neon),transparent)}
#xtRight .xt-row:hover .xt-line{background:linear-gradient(90deg,transparent,var(--neon))}
@media(max-width:700px){.xt-line{display:none}}

/* square portrait panel */
.xt-portrait{width:260px;height:100px;border-radius:8px;position:relative;overflow:hidden;flex-shrink:0}
.xt-portrait::before,.xt-portrait::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line)}
.xt-portrait::before{top:0}
.xt-portrait::after{bottom:0}
.xt-row:hover .xt-portrait::before,.xt-row:hover .xt-portrait::after{background:var(--neon)}
.xt-portrait .xt-pname{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-family:var(--fd);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink);text-align:center;white-space:nowrap;transition:color .3s;z-index:1}
.xt-portrait .xt-pcat{position:absolute;top:50%;left:50%;transform:translate(-50%,12px);font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:1.5px;color:#777!important;text-transform:uppercase;opacity:1!important;text-align:center;white-space:nowrap;transition:color .3s;z-index:2}
.xt-row:hover .xt-pname{color:var(--neon)}
.xt-row:hover .xt-pcat{color:var(--neon)!important}
.xt-portrait .xt-pscan{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:0;transition:opacity .3s}
.xt-row:hover .xt-pscan{opacity:.5;animation:xtscan 1.8s linear infinite}
@keyframes xtscan{0%{transform:translateY(-2px);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(98px);opacity:0}}

/* name + cat block (legacy — now inside portrait panel) */
.xt-info{display:flex;flex-direction:column;gap:1px}
#xtRight .xt-info{text-align:right}
.xt-iname{font-family:var(--fd);font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:letter-spacing .3s,color .3s}
.xt-row:hover .xt-iname{letter-spacing:1.5px;color:var(--neon)}
.xt-icat{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--grey2);text-transform:uppercase;opacity:.5;transition:opacity .3s}
.xt-row:hover .xt-icat{opacity:1}

/* hover popup card — fixed position, follows cursor */
.xt-popup{position:fixed;top:0;left:0;width:280px;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:18px 16px;box-shadow:0 16px 40px -12px rgba(14,17,22,.15)}
.xt-popup.xt-show{opacity:1}
.xtp-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,59,29,.06),transparent 60%);pointer-events:none}
.xtp-corner{position:absolute;width:12px;height:12px;border:1px solid rgba(255,59,29,.25);pointer-events:none}
.xtp-corner.tl{top:5px;left:5px;border-right:none;border-bottom:none}
.xtp-corner.tr{top:5px;right:5px;border-left:none;border-bottom:none}
.xtp-corner.bl{bottom:5px;left:5px;border-right:none;border-top:none}
.xtp-corner.br{bottom:5px;right:5px;border-left:none;border-top:none}
.xtp-id{font-family:var(--fm);font-size:9px;color:var(--neon);letter-spacing:2px;position:relative;z-index:1}
.xtp-name{font-family:var(--fd);font-size:18px;font-weight:700;text-transform:uppercase;color:var(--ink);letter-spacing:1px;position:relative;z-index:1;margin-top:2px}
.xtp-cat{font-family:var(--fm);font-size:8px;letter-spacing:1.5px;color:var(--neon);text-transform:uppercase;position:relative;z-index:1}
.xtp-desc{font-size:10px;color:var(--grey);text-transform:none;line-height:1.5;position:relative;z-index:1;margin-top:8px}
.xtp-meta{margin-top:8px;position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:4px 14px}
.xtp-meta .xtp-mi{font-family:var(--fm);font-size:8px}
.xtp-meta .xtp-mi .k{color:var(--grey2);letter-spacing:1px;font-weight:700}
.xtp-meta .xtp-mi .v{color:var(--ink2);margin-left:4px}
@media(max-width:600px){.xt-popup{display:none}}

.arow{border-top:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:baseline;transition:padding-left .5s var(--ease),background .5s;position:relative}
.arow:last-child{border-bottom:1px solid var(--line)}
.arow:hover{padding-left:16px;background:linear-gradient(90deg,rgba(255,59,29,.05),transparent)}
.arow .an{font-family:var(--fd);font-size:clamp(20px,2vw,30px);text-transform:uppercase;transition:letter-spacing .4s var(--ease)}
.arow:hover .an{letter-spacing:.06em}
.arow .ad{font-size:14px;color:var(--grey);text-transform:none}
.arow .at{font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--grey2);text-transform:uppercase}
@media(max-width:900px){.arow{grid-template-columns:1fr;gap:6px}}
.arow,.tri{cursor:none}
.arow::before{content:"+ OPEN";position:absolute;right:0;top:26px;font-family:var(--fm);font-size:10px;letter-spacing:2px;color:var(--neon);opacity:0;transform:translateX(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.arow:hover::before{opacity:1;transform:translateX(0)}

/* ===== MODAL ===== */
#modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:40px;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
#modal.open{opacity:1;pointer-events:auto}
#modal .scrim2{position:absolute;inset:0;background:rgba(10,14,20,.55);backdrop-filter:blur(6px)}
#modal .panel{position:relative;width:min(1040px,94vw);max-height:88vh;overflow:hidden;
  background:#eef1f7;color:#0e1116;border-radius:22px;display:grid;grid-template-columns:1.05fr .95fr;
  transform:translateY(46px) scale(.97);transition:transform .6s var(--ease2);box-shadow:0 40px 120px -30px rgba(0,0,0,.6)}
#modal:not(.agent-modal) .panel{width:min(1400px,94vw)}
#modal.open .panel{transform:none}
@media(max-width:820px){#modal .panel{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}}
#modal .mL{padding:38px 40px;display:flex;flex-direction:column}
#modal .mR{background:#0f1116;position:relative;min-height:420px;overflow:hidden}
#modal .mtag{font-family:var(--fm);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#0e1116;display:flex;align-items:center;gap:8px}
#modal .mtag::before{content:"";width:9px;height:9px;background:var(--neon);border-radius:2px}
#modal h3.mt{font-family:var(--fd);font-weight:700;font-size:clamp(40px,5vw,72px);line-height:.92;text-transform:uppercase;margin:24px 0 6px;visibility:visible}
#modal .mcat{font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#6a707a;margin-bottom:20px}
#modal .mdesc{font-size:15px;line-height:1.6;color:#2a3038;max-width:46ch}
#modal.agent-modal .mdesc{max-width:none}
#modal .mdata{margin-top:26px;border-top:1px solid rgba(10,12,15,.14)}
#modal .mrow{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid rgba(10,12,15,.10);font-family:var(--fm);font-size:12px;letter-spacing:.5px}
#modal .mrow .mk2{color:#6a707a;text-transform:uppercase;font-size:10px;letter-spacing:2px}
#modal .mrow .mv{color:#0e1116;text-align:right}
#modal .mclose{position:absolute;top:22px;right:22px;z-index:3;background:#0f1116;color:#fff;border:0;border-radius:12px;padding:12px 18px;font-family:var(--fm);font-size:11px;letter-spacing:2px;cursor:none;display:flex;align-items:center;gap:8px}
#modal .mclose:hover{background:var(--neon)}
#modal .mimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(120% 90% at 70% 20%,rgba(255,59,29,.28),transparent 60%),linear-gradient(160deg,#12151b,#0b0d11)}
#modal .mimg .ph{font-family:var(--fm);font-size:11px;letter-spacing:3px;color:#5a626b;text-transform:uppercase;border:1px dashed rgba(255,255,255,.18);padding:14px 20px;border-radius:8px}
#modal .mimg img{width:100%;height:100%;object-fit:cover;display:none}
#modal .mR .glyph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--fd);font-size:200px;color:rgba(255,59,29,.10);font-weight:700;line-height:1}

/* footer */
.foot{position:relative;z-index:5;margin-left:var(--sb);border-top:1px solid var(--line);padding:60px 7vw;background:rgba(246,248,250,.7);backdrop-filter:blur(8px)}

/* zeustya link — animated neon glow + pulsing arrow */
.zeustya-link{color:var(--neon);text-decoration:none;position:relative;font-weight:700;font-size:1.15em;animation:zeustya-glow 2s ease-in-out infinite}
.zeustya-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--neon);animation:zeustya-underline 2s ease-in-out infinite}
.zeustya-link::before{content:"\\2197";position:absolute;top:-8px;right:-14px;font-size:10px;color:var(--neon);animation:zeustya-arrow 1.5s ease-in-out infinite;opacity:0}
.zeustya-link:hover{color:#fff;text-shadow:0 0 20px rgba(255,10,0,.8)}
.zeustya-link:hover::before{opacity:1}
@keyframes zeustya-glow{0%,100%{text-shadow:0 0 4px rgba(255,10,0,.3)}50%{text-shadow:0 0 16px rgba(255,10,0,.7),0 0 32px rgba(255,10,0,.3)}}
@keyframes zeustya-underline{0%,100%{opacity:.3;transform:scaleX(.6)}50%{opacity:1;transform:scaleX(1)}}
@keyframes zeustya-arrow{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
.foot .big{font-family:var(--fd);font-weight:700;font-size:clamp(28px,4.4vw,60px);text-transform:uppercase;margin-bottom:26px;text-align:center}
.foot .row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--grey2);text-transform:uppercase}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  h1,h2,.klabel,.foot .big{visibility:visible}
}

/* ============================================================
   MOBILE — touch-first responsive layout
   ============================================================ */

/* Mobile hamburger button — hidden on desktop */
.m-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0 10px;z-index:90}
.m-burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.m-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m-burger.open span:nth-child(2){opacity:0}
.m-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile slide-out menu */
.m-menu{position:fixed;top:0;right:0;width:min(320px,85vw);height:100vh;z-index:88;background:linear-gradient(180deg,var(--dark),#0d1116);transform:translateX(100%);transition:transform .4s var(--ease2);display:flex;flex-direction:column;justify-content:center;padding:40px 32px;gap:0;overflow-y:auto}
.m-menu.open{transform:translateX(0)}
.m-menu::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 30%,rgba(255,59,29,.08),transparent 60%);pointer-events:none}
.m-nav{display:flex;flex-direction:column;gap:0;position:relative;z-index:1}
.m-link{font-family:var(--fd);font-size:22px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#aeb6bf;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:color .3s,padding-left .3s var(--ease)}
.m-link:active,.m-link:hover{color:var(--neon);padding-left:12px}
.m-socials{display:flex;flex-direction:column;gap:8px;margin-top:32px;position:relative;z-index:1}
.m-socials a{font-family:var(--fm);font-size:11px;letter-spacing:1.5px;color:#5a626b;text-transform:uppercase;transition:color .3s}
.m-socials a:active{color:var(--neon2)}
.m-menu-scrim{position:fixed;inset:0;z-index:87;background:rgba(10,14,20,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s}
.m-menu-scrim.open{opacity:1;pointer-events:auto}

@media(max-width:900px){
  /* ===== BASE ===== */
  :root{--sb:0px;--nav:56px}
  .m-burger{display:flex}
  .topnav{position:fixed;top:0;left:0;right:0;z-index:85;padding:0 12px 0 16px;height:56px;background:rgba(238,241,244,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .topnav .cta{display:none}
  .topnav .links{display:none}
  .topnav .brand{gap:6px}
  .topnav .brand .bname{font-size:13px}
  .topnav .brand .labs{font-size:6px;padding:2px 3px}
  .lmark{width:26px;height:26px}
  .stage{margin-left:0;max-width:100vw;overflow-x:hidden}
  .foot{margin-left:0}

  /* ===== LOADER — HIDDEN COMPLETELY ===== */
  #loader{display:none!important}
  body.loading{overflow:auto!important}

  /* ===== VISIBILITY — NO JS DEPENDENCY ===== */
  .stat-panel,.fade,.reveal,.imm,.in,.dec-done{opacity:1!important;transform:none!important;filter:none!important}
  .p-tag,.p-body h3,.p-desc,.panel-stats,.statb,.arow{opacity:1!important;transform:none!important;filter:none!important}

  /* ===== DISABLE HEAVY EFFECTS ===== */
  #bg{display:none}
  .grain{opacity:.02}
  .hud{display:none}
  .cursor,.cursor-dot{display:none!important}
  body{cursor:auto}
  .btn,.topnav .cta{transform:none!important}

  /* ===== HERO ===== */
  .hero{padding:70px 16px 40px;min-height:auto;max-width:100vw;overflow-x:hidden}
  .hero .h-hero{font-size:clamp(26px,9vw,42px)!important;max-width:none!important;margin-bottom:12px!important}
  .hero .h-xl{font-size:clamp(20px,6vw,32px)!important;margin-top:4px!important}
  .hero .sub{font-size:13px!important;max-width:none!important;margin-top:10px!important;line-height:1.5!important}
  .hero .btns{margin-top:20px!important;flex-direction:column;gap:10px;width:100%}
  .hero .btn{width:100%;text-align:center;justify-content:center;padding:12px 18px;font-size:10px;min-height:44px}
  .hero .hint{position:static!important;text-align:center;margin-top:20px;font-size:9px;right:auto;bottom:auto}

  /* ===== SECTIONS ===== */
  .section{padding:48px 16px 48px!important;min-height:auto!important;margin:0!important;max-width:100vw;overflow-x:hidden}
  .section.tall{padding-bottom:48px!important}
  .h-xl{font-size:clamp(22px,6.5vw,34px)!important;line-height:1.1!important}
  .h-lg{font-size:clamp(18px,5vw,26px)!important}
  .sub{font-size:13px!important;max-width:none!important;margin-top:12px!important;line-height:1.5!important}
  .klabel{font-size:10px!important;letter-spacing:2px;margin-bottom:10px}
  .sec-no{font-size:9px!important;margin-bottom:4px!important}
  .p-list{font-size:12px!important;line-height:1.7!important}

  /* ===== KILL ALL INLINE DESKTOP STYLES ===== */
  #risk,#movement,#global,#agents,#products,#architect{margin-top:0!important;min-height:auto!important}
  #risk article,#movement article{width:100%!important;margin:0!important;padding:0!important}
  #risk article .p-body{padding:0!important}
  #core{margin-top:24px!important;width:100%!important;text-align:left!important}
  #movement .stats.panels{margin-top:24px!important}
  #global{padding-bottom:80px!important}
  #architect{text-align:center!important}
  #architect .sub{margin:14px auto 0!important;text-align:center!important}
  #architect .btns{justify-content:center!important;margin-top:20px!important}
  #architect h2{max-width:none!important;font-size:clamp(20px,6vw,32px)!important}

  /* ===== AGENTS CENTERING ===== */
  #agents .sec-no,#agents .klabel,#agents h2{text-align:center!important}
  #agents .klabel{justify-content:center!important}
  #agents .sub{max-width:none!important;margin-left:0!important;margin-right:0!important;text-align:center!important}

  /* ===== STATS PANELS ===== */
  .stats.panels{margin-top:24px!important;gap:16px!important;max-width:100%;overflow:hidden}
  .stat-panel{width:100%!important;padding:20px 16px!important;margin:0!important;max-width:100%!important;overflow:hidden}
  .stat-panel .p-body h3{font-size:clamp(20px,5.5vw,30px)!important;margin-bottom:10px!important;line-height:1.1!important}
  .stat-panel .p-desc{font-size:13px!important;margin-bottom:14px!important;line-height:1.5!important}
  .stat-panel .p-tag{font-size:9px!important;margin-bottom:8px!important}
  #risk .stats.panels{margin-top:0!important;gap:20px!important}

  /* ===== PANEL STATS GRID ===== */
  .panel-stats{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .panel-stats.cols-3,.panel-stats.cols-1{grid-template-columns:repeat(2,1fr)!important;max-width:none!important}
  .panel-stats .statb{padding:10px 8px;min-height:auto}
  .panel-stats .statb .num{font-size:clamp(18px,5vw,28px)!important}
  .panel-stats .statb .lab{font-size:11px!important;line-height:1.35!important}
  .panel-stats .statb .k{font-size:8px!important;margin-bottom:4px!important}

  /* ===== C.O.R.E PANEL ===== */
  .core-panel{position:relative!important;right:auto!important;top:auto!important;width:100%!important;margin-top:20px!important}
  .core-hint{display:none}
  .coretip{width:min(260px,78vw);padding:14px 16px}
  .coretip .ct-no{font-size:24px}
  .coretip h3{font-size:14px}
  .coretip p{font-size:11px}

  /* ===== X-TEAM ===== */
  .xt-wrap{padding:0!important;margin-top:16px!important}
  .xt-cols{grid-template-columns:1fr!important;gap:12px!important}
  #xtLeft,#xtRight{align-items:center!important;padding:0!important;gap:12px!important}
  #xtLeft .xt-row,#xtRight .xt-row{justify-content:center!important;flex-direction:row!important;padding:6px 0!important}
  .xt-portrait{width:180px;height:70px}
  .xt-portrait .xt-pname{font-size:13px}
  .xt-portrait .xt-pcat{font-size:8px}
  .xt-line,.xt-net,.xt-popup{display:none}
  .xt-center-hd{position:static!important;transform:none!important;padding:16px 12px;min-width:auto!important}
  .xtc-heading{font-size:clamp(18px,5.5vw,28px)!important;white-space:normal!important;letter-spacing:1px!important}
  .xtc-label{font-size:7px!important;letter-spacing:2px!important}
  .xtc-sub{font-size:6px!important;letter-spacing:1px!important}
  .xt-crystal{width:80px;height:100px;margin-bottom:8px}

  /* ===== PRODUCT ROWS ===== */
  .arow{grid-template-columns:1fr!important;gap:2px;padding:16px 0!important;min-height:44px;border-bottom:1px solid var(--line)}
  .arow:active{padding-left:6px;background:linear-gradient(90deg,rgba(255,59,29,.05),transparent)}
  .arow::before{display:none}
  .arow .an{font-size:17px;font-weight:700}
  .arow .ad{font-size:12px;color:var(--grey);margin-top:2px}
  .arow .at{font-size:9px;margin-top:4px;color:var(--neon);text-transform:uppercase;letter-spacing:1px}

  /* ===== MODAL — FULL SCREEN ===== */
  #modal{padding:0}
  #modal .panel{grid-template-columns:1fr!important;width:100%!important;max-height:100vh!important;border-radius:0!important;height:100vh;overflow-y:auto}
  #modal .mL{padding:50px 16px 20px}
  #modal .mR{min-height:200px}
  #modal .mclose{top:12px;right:12px;padding:8px 12px;font-size:9px}
  #modal h3.mt{font-size:clamp(24px,7vw,38px)!important}
  #modal .mdesc{font-size:13px!important}
  #modal .mdata{font-size:11px!important}

  /* ===== FOOTER ===== */
  .foot{padding:32px 16px;text-align:center}
  .foot .big{font-size:clamp(16px,5vw,24px)!important;line-height:1.3!important;margin-bottom:12px!important}
  .foot .row{flex-direction:column;gap:4px;align-items:center;text-align:center;font-size:9px!important}

  /* ===== MISC ===== */
  .corner-l{left:16px;bottom:16px;font-size:8px}
  .maphint{font-size:8px;margin-top:14px!important}
  .btn,.lbtn,.m-link{min-height:44px}
  .btn.ghost{min-height:44px}
  h1,h2,h3,.sub,.p-desc{word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  html,body{overflow-x:hidden;max-width:100vw}
}

@media(max-width:480px){
  .hero{padding:50px 14px 40px}
  .section{padding:40px 14px 35px!important}
  .hero .h-hero{font-size:clamp(24px,10vw,38px)!important}
  .panel-stats,.panel-stats.cols-3{grid-template-columns:1fr!important}
  .xt-portrait{width:150px;height:60px}
  .m-link{font-size:16px;padding:10px 0}
  .foot .big{font-size:clamp(14px,5vw,20px)!important}
  .hero .btn{font-size:10px!important;padding:12px 16px!important}
  .h-xl{font-size:clamp(20px,7vw,30px)!important}
  .stat-panel .p-body h3{font-size:clamp(18px,6vw,26px)!important}
}