:root{
  --void:#04060B; --panel:#0A0F19; --panel-2:#0F1826; --panel-3:#152134;
  --gold:#E9C56B; --gold-hot:#FFF0B8; --gold-deep:#8E6C22; --gold-dim:#6B5320;
  --blue:#45C8FF; --blue-hot:#A9E8FF; --blue-deep:#12496E;
  --blue-2:#1B6FA8;
  --text:#DCE6F0; --text-2:#A9B8C9; --muted:#71829A;
  --line:#1B2637; --line-2:#26374F;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0; background:var(--void); color:var(--text);
  font-family:Barlow,ui-sans-serif,system-ui,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.dsp{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;text-wrap:balance;margin:0;letter-spacing:.01em}
.mono,code,.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:var(--blue)}
::selection{background:rgba(233,197,107,.28);color:var(--gold-hot)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
section{position:relative;padding:96px 0}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--gold-deep) 50%,var(--line-2) 82%,transparent);opacity:.55}

/* ---------- holographic atmosphere ---------- */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(69,200,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(69,200,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%)}
.scan{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.content{position:relative;z-index:2}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(4,6,11,.94),rgba(4,6,11,.72));
  border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:22px;padding:13px 26px;max-width:var(--max);margin:0 auto}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none}
.brandmark .bt{font-family:"Chakra Petch";font-weight:700;letter-spacing:.30em;font-size:15px;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--text-2);text-decoration:none;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  font-family:"Chakra Petch";font-weight:500;padding:4px 0;border-bottom:1px solid transparent;transition:.2s}
nav a:hover{color:var(--gold);border-bottom-color:var(--gold-deep)}
@media(max-width:880px){nav{display:none}}

/* depth toggle */
.depth{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:2px;
  padding:5px 11px;background:rgba(21,33,52,.6);cursor:pointer;color:var(--text-2);
  font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.depth:hover{border-color:var(--gold-deep);color:var(--gold)}
.depth .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 0 rgba(69,200,255,0);transition:.25s}
body.expert .depth{border-color:var(--blue-2);color:var(--blue-hot);background:rgba(27,111,168,.16)}
body.expert .depth .dot{background:var(--blue);box-shadow:0 0 10px 2px rgba(69,200,255,.55)}

/* ---------- hero ---------- */
.hero{padding:64px 0 84px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-8%;transform:translateX(-50%);
  width:1100px;height:1100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,197,107,.16),rgba(69,200,255,.07) 42%,transparent 66%)}
.logo{position:relative;width:min(560px,84vw);height:auto;margin:0 auto 6px;display:block;
  filter:drop-shadow(0 0 42px rgba(233,197,107,.42)) drop-shadow(0 0 90px rgba(69,200,255,.16))}
.motto{position:relative;font-family:"Chakra Petch";font-weight:600;letter-spacing:.44em;
  font-size:clamp(11px,2.1vw,14px);color:var(--gold);text-transform:uppercase;margin:6px 0 30px;text-indent:.44em}
.tagline{position:relative;font-family:"JetBrains Mono";font-size:11.5px;letter-spacing:.28em;
  color:var(--muted);text-transform:uppercase;margin-bottom:26px}
.hero h1{position:relative;font-size:clamp(30px,5.4vw,58px);font-weight:700;line-height:1.06;max-width:17ch;margin:0 auto 22px;
  background:linear-gradient(180deg,#FFFFFF,#C9D8E8 62%,#7E93AB);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lede{position:relative;max-width:60ch;margin:0 auto;color:var(--text-2);font-size:clamp(16px,2.1vw,19.5px);font-weight:300}
.hero-cta{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;text-decoration:none;font-family:"Chakra Petch";font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;padding:13px 26px;border:1px solid var(--gold-deep);
  color:var(--gold-hot);background:linear-gradient(180deg,rgba(233,197,107,.14),rgba(233,197,107,.03));transition:.22s}
.btn:hover{background:linear-gradient(180deg,rgba(233,197,107,.28),rgba(233,197,107,.08));border-color:var(--gold);
  box-shadow:0 0 26px rgba(233,197,107,.25)}
.btn.ghost{border-color:var(--line-2);color:var(--blue-hot);background:rgba(27,111,168,.1)}
.btn.ghost:hover{border-color:var(--blue);box-shadow:0 0 26px rgba(69,200,255,.22);background:rgba(27,111,168,.2)}

/* ---------- section furniture ---------- */
.eyebrow{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blue);opacity:.8}
h2{font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.12;max-width:20ch;margin-bottom:18px;
  background:linear-gradient(180deg,#FFFFFF,#BACBDD 70%,#78899E);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-lede{max-width:66ch;color:var(--text-2);font-size:18px;font-weight:300;margin-bottom:14px}
h3{font-size:20px;font-weight:600;color:var(--gold);margin:30px 0 10px}
h4{font-size:15px;font-weight:600;color:var(--text);margin:0 0 7px;letter-spacing:.02em}
p{margin:0 0 15px;max-width:70ch}
strong{color:var(--text);font-weight:600}
em.hl{font-style:normal;color:var(--gold);font-weight:500}

/* ---------- panels & cards ---------- */
.panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));
  padding:26px 28px;position:relative}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(69,200,255,.09),transparent 34%,transparent 66%,rgba(233,197,107,.09))}
.panel>*{position:relative}
.corner{position:absolute;width:11px;height:11px;border-color:var(--gold-deep);border-style:solid;border-width:0}
.corner.tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.corner.br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}

.stat{border:1px solid var(--line);background:var(--panel);padding:19px 20px}
.stat .v{font-family:"JetBrains Mono";font-size:26px;font-weight:500;color:var(--gold);line-height:1.1}
.stat .v small{font-size:14px;color:var(--gold-deep)}
.stat .k{font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.stat .d{font-size:14.5px;color:var(--text-2);margin-top:9px;line-height:1.5}

/* ---------- expert blocks ---------- */
.tech{display:none}
body.expert .tech{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tech-inner{border-left:2px solid var(--blue-2);background:linear-gradient(90deg,rgba(27,111,168,.13),transparent 70%);
  padding:16px 20px;margin:16px 0 20px}
.tech-inner .tlabel{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px}
.tech-inner p:last-child{margin-bottom:0}
.tech-inner p,.tech-inner li{font-size:15.5px;color:var(--text-2)}
.hint{font-family:"JetBrains Mono";font-size:12px;color:var(--muted);letter-spacing:.05em;
  border:1px dashed var(--line-2);padding:11px 15px;margin:18px 0;display:inline-block}
body.expert .hint{border-color:var(--blue-2);color:var(--blue-hot)}

/* ---------- spectrum figure ---------- */
.figure{border:1px solid var(--line);background:var(--panel);padding:22px;overflow-x:auto;margin:26px 0}
.figcap{font-family:"JetBrains Mono";font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-top:14px;line-height:1.6}
svg{display:block;margin:0 auto;max-width:100%;height:auto}

/* ---------- phases ---------- */
.phase{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;overflow:hidden}
.phase-h{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.phase-n{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.18em;color:var(--void);
  background:linear-gradient(180deg,var(--gold-hot),var(--gold-deep));padding:5px 10px;font-weight:500;white-space:nowrap;margin-top:3px}
.phase-t{font-family:"Chakra Petch";font-weight:700;font-size:22px;color:var(--text);line-height:1.15}
.phase-s{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-top:5px}
.phase-b{padding:20px 24px 24px}
.phase-b ul{margin:0;padding-left:19px}
.phase-b li{margin-bottom:9px;color:var(--text-2);font-size:15.5px}
.phase-b li strong{color:var(--gold)}

/* ---------- tables ---------- */
.twrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel);margin:20px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th{text-align:left;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:12px 15px;border-bottom:1px solid var(--line-2);
  background:var(--panel-3);white-space:nowrap}
td{padding:11px 15px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:top}
tr:last-child td{border-bottom:none}
td.n{font-family:"JetBrains Mono";font-size:13.5px;color:var(--gold);white-space:nowrap}

/* ---------- callouts ---------- */
.note{border:1px solid var(--gold-dim);background:linear-gradient(180deg,rgba(233,197,107,.09),rgba(233,197,107,.02));
  padding:19px 22px;margin:24px 0}
.note .nlabel{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.note p:last-child{margin-bottom:0}
.warn{border-color:var(--blue-2);background:linear-gradient(180deg,rgba(69,200,255,.08),rgba(69,200,255,.02))}
.warn .nlabel{color:var(--blue)}

/* ---------- closing ---------- */
.closing{text-align:center;padding:110px 0 96px;position:relative}
.closing::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(233,197,107,.14),transparent 66%)}
.closing h2{margin:0 auto 20px;max-width:22ch;font-size:clamp(30px,5.6vw,54px)}
.bigmotto{position:relative;font-family:"Chakra Petch";font-weight:700;font-size:clamp(24px,5.2vw,50px);
  letter-spacing:.2em;text-indent:.2em;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 48%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin:8px 0 22px}

footer{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--muted);font-size:13.5px}
.frow{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.fmono{font-family:"JetBrains Mono";font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}

/* ---------- holographic figures ---------- */
.holo{position:relative;border:1px solid var(--line-2);margin:30px 0;padding:22px 20px 18px;overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(69,200,255,.10),transparent 64%),
             linear-gradient(180deg,var(--panel-2),var(--panel))}
.holo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(140,220,255,.045) 0 1px,transparent 1px 4px)}
.holo>*{position:relative;z-index:2}
.hb{position:absolute;width:13px;height:13px;border:1px solid var(--gold);opacity:.7;z-index:4}
.hb.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.hb.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.hb.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.hb.br{bottom:6px;right:6px;border-left:0;border-top:0}
.htitle{font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;display:flex;gap:12px;align-items:center}
.htitle::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(69,200,255,.6),transparent)}
.hcap{font-family:"JetBrains Mono";font-size:11.5px;color:var(--muted);letter-spacing:.04em;
  margin-top:14px;line-height:1.65;max-width:78ch}
.hcap b{color:var(--gold);font-weight:500}
.holo svg{overflow:visible}

@keyframes sweepY{0%{opacity:0}8%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes dashmove{to{stroke-dashoffset:-40}}
@keyframes pulseO{0%,100%{opacity:.30}50%{opacity:1}}
@keyframes breathe{0%,100%{r:3}50%{r:7}}
.anim-sweep{animation:sweepY 5s ease-in-out infinite}
.anim-dash{stroke-dasharray:7 7;animation:dashmove 2s linear infinite}
.anim-pulse{animation:pulseO 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .anim-sweep,.anim-dash,.anim-pulse{animation:none;opacity:.85}
}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;
  font-family:"JetBrains Mono";font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.legend i{display:inline-block;width:16px;height:2px;margin-right:7px;vertical-align:middle;border-radius:1px}

/* ================= CINEMATIC LAYER ================= */
.aurora{position:fixed;inset:-25%;z-index:0;pointer-events:none;opacity:.6;
  background:
    radial-gradient(38% 30% at 18% 18%, rgba(69,200,255,.20), transparent 62%),
    radial-gradient(34% 26% at 82% 26%, rgba(233,197,107,.18), transparent 62%),
    radial-gradient(46% 34% at 46% 82%, rgba(27,111,168,.20), transparent 64%),
    radial-gradient(30% 24% at 74% 68%, rgba(233,197,107,.10), transparent 62%);
  filter:blur(46px);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.1)}}

#motes{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.85}
.vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 130% 85% at 50% 38%,transparent 42%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.72) 100%)}

.reveal{opacity:0;transform:translateY(30px) scale(.985);filter:blur(7px);
  transition:opacity 1s cubic-bezier(.16,.8,.24,1),transform 1s cubic-bezier(.16,.8,.24,1),filter 1s cubic-bezier(.16,.8,.24,1)}
.reveal.in{opacity:1;transform:none;filter:none}

.holo{box-shadow:0 0 0 1px rgba(69,200,255,.07),0 30px 90px -26px rgba(69,200,255,.34),
      0 10px 44px -18px rgba(233,197,107,.20),inset 0 0 70px rgba(69,200,255,.055)}
.holo::before{content:"";position:absolute;top:0;left:-38%;width:34%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(169,232,255,.13),rgba(255,240,184,.07),transparent);
  animation:shimmer 8.5s cubic-bezier(.5,0,.5,1) infinite;transform:skewX(-14deg)}
@keyframes shimmer{0%{left:-38%}52%{left:108%}100%{left:108%}}
.htitle{text-shadow:0 0 16px rgba(69,200,255,.55)}

.logo{animation:logoGlow 6s ease-in-out infinite}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 32px rgba(233,197,107,.34)) drop-shadow(0 0 78px rgba(69,200,255,.12))}
  50%{filter:drop-shadow(0 0 66px rgba(233,197,107,.66)) drop-shadow(0 0 150px rgba(69,200,255,.30))}}

.orbits{position:absolute;left:50%;top:250px;width:0;height:0;pointer-events:none;z-index:0}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.r1{width:560px;height:560px;border:1px dashed rgba(233,197,107,.20);animation:spin 46s linear infinite}
.r2{width:800px;height:800px;border:1px dashed rgba(69,200,255,.13);animation:spin 82s linear infinite reverse}
.r3{width:1080px;height:1080px;border:1px solid rgba(69,200,255,.05);animation:spin 130s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:700px){.r2,.r3{display:none}}

.hero h1{text-shadow:0 0 44px rgba(140,190,240,.22)}
.motto{text-shadow:0 0 22px rgba(233,197,107,.55);animation:mottoPulse 4.5s ease-in-out infinite}
@keyframes mottoPulse{0%,100%{opacity:.86}50%{opacity:1}}
.bigmotto{background-size:220% 100%;animation:shine 7s linear infinite;
  filter:drop-shadow(0 0 34px rgba(233,197,107,.34))}
@keyframes shine{to{background-position:220% 0}}

.rule{box-shadow:0 0 22px rgba(233,197,107,.22)}
h2{text-shadow:0 0 34px rgba(150,200,240,.16)}
.eyebrow{text-shadow:0 0 14px rgba(69,200,255,.5)}
.btn{transition:.28s cubic-bezier(.16,.8,.24,1)}
.btn:hover{transform:translateY(-2px)}
.stat{transition:.4s cubic-bezier(.16,.8,.24,1)}
.stat:hover{border-color:var(--gold-deep);box-shadow:0 14px 44px -18px rgba(233,197,107,.4);transform:translateY(-3px)}
.panel{transition:.4s cubic-bezier(.16,.8,.24,1)}
.panel:hover{border-color:var(--line-2);box-shadow:0 16px 50px -22px rgba(69,200,255,.34)}
.phase{transition:.4s cubic-bezier(.16,.8,.24,1)}
.phase:hover{box-shadow:0 18px 56px -24px rgba(233,197,107,.3)}

@media (prefers-reduced-motion:reduce){
  .aurora,.holo::before,.logo,.motto,.bigmotto,.ring{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  #motes{display:none}
}


/* ================= ADAPTIVE PERFORMANCE + MOBILE ================= */

/* Skip rendering work for offscreen sections. Big win on weak GPUs. */
section{content-visibility:auto;contain-intrinsic-size:auto 1000px}

/* --- real mobile navigation (was: display:none below 880px) --- */
@media(max-width:880px){
  .navrow{flex-wrap:wrap;gap:12px;padding:10px 16px}
  nav{display:flex;order:3;width:100%;gap:18px;overflow-x:auto;
      padding:6px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
      -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
      mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;font-size:12.5px;padding:6px 0}
  .depth{margin-left:auto;padding:8px 12px}
  .brandmark .bt{font-size:14px;letter-spacing:.24em}
}

/* --- touch targets & type on small screens --- */
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:64px 0}
  .hero{padding:36px 0 56px}
  h2{font-size:clamp(24px,7vw,32px)}
  .sec-lede{font-size:16.5px}
  .btn{padding:14px 22px;font-size:12.5px}
  nav a,.depth{min-height:44px;display:flex;align-items:center}
  .stat .v{font-size:22px}
  .phase-h{padding:18px 16px 14px}
  .phase-b{padding:16px 16px 20px}
  .panel,.note,.tech-inner{padding:16px 16px}
  .holo{padding:16px 12px 14px;margin:22px 0}
  .hcap,.figcap{font-size:11px}
  .legend{gap:12px;font-size:9.5px}
  .bigmotto{letter-spacing:.12em;text-indent:.12em}
  table{min-width:460px;font-size:14px}
}

/* Wide figures: make horizontal scroll obvious rather than clipped */
@media(max-width:880px){
  .holo,.figure,.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .holo svg,.figure svg{min-width:660px}
  .holo::after{display:none}          /* scanline overlay tiles badly when scrolled */
  .scrollhint{display:block}
}
.scrollhint{display:none;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:8px;opacity:.8}

/* ================= LITE TIER ================= */
/* Applied when the device is a phone, low-memory, low-core, on a slow link,
   or when a live FPS check shows the full experience is dropping frames. */
body.lite .aurora{filter:none;opacity:.30;animation:none;
  background:radial-gradient(60% 40% at 22% 16%,rgba(69,200,255,.14),transparent 62%),
             radial-gradient(56% 38% at 78% 30%,rgba(233,197,107,.12),transparent 62%)}
body.lite #motes{display:none}
body.lite .scan{display:none}
body.lite .holo::before{display:none}
body.lite .holo{box-shadow:0 0 0 1px rgba(69,200,255,.06),0 12px 34px -20px rgba(69,200,255,.22)}
body.lite .grid-bg{background-size:96px 96px;opacity:.55}
body.lite .logo{animation:none;filter:drop-shadow(0 0 26px rgba(233,197,107,.42))}
body.lite .ring{animation:none;opacity:.5}
body.lite .r3{display:none}
body.lite .bigmotto{animation:none}
body.lite .motto{animation:none}
body.lite .reveal{transition-duration:.45s;filter:none;transform:translateY(16px)}
body.lite .anim-sweep,body.lite .anim-pulse{animation:none;opacity:.85}
body.lite h2,body.lite .hero h1{text-shadow:none}
/* SVG bloom is the single most expensive thing on a weak GPU. `filter` is a
   presentation attribute, so a CSS rule overrides filter="url(#...)". */
body.lite .holo svg *{filter:none!important}

/* Honour explicit data-saving requests */
@media (prefers-reduced-data:reduce){
  #motes{display:none}
  .aurora{filter:none;animation:none;opacity:.3}
  .holo::before{display:none}
}