/* netmap: a scroll through a city where the network lives, from the core
   tower on the tallest roof to every customer below. The page is a pale,
   hazy architectural model in WebGL; text sits on it as a quiet HUD. Everything is readable without the world, too (.no-gl). */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* netmap's own palette: the app's night map, its signal gradient, and
     green for online, red for down */
  color-scheme: dark;
  --paper: #070b16;
  --paper-2: #0b1222;
  --snow: #0f182d;
  --panel-2: #142039;
  --ink: #e8eef9;
  --ink-2: #c3cde1;
  --mute: #8b9ab7;
  --faint: #5f6d8a;
  --line: #1b2742;
  --line-2: #273859;
  --edge: rgba(148, 163, 184, .2);
  --glass: rgba(11, 18, 34, .62);
  --glass-2: rgba(15, 24, 45, .84);
  --shade: rgba(0, 0, 0, .55);
  --cyan: #22d3ee;
  --blue: #60a5fa;
  --violet: #a78bfa;
  --magenta: #e879f9;
  --up: #34d399;
  --down: #f43f5e;
  --warn: #f5a524;
  --grad: linear-gradient(90deg, #22d3ee 0%, #60a5fa 38%, #a78bfa 72%, #e879f9 100%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --f-display: "IBM Plex Sans Condensed", "IBM Plex Sans Arabic", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gx: clamp(20px, 5.2vw, 84px);
  --top: clamp(78px, 11vh, 118px);
  --blur: blur(22px) saturate(1.35);
}
:root[lang="ar"] {
  --f-display: "IBM Plex Sans Arabic", "IBM Plex Sans Condensed", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(15, 181, 212, .22); }
.mono { font-family: var(--f-mono); }
:root[lang="ar"] .mono:not([dir="ltr"]) { font-family: var(--f-mono), var(--f-body); }
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--cyan); color: #061021; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }

/* ------------------------------------------------------------ the world */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 70% 30%, rgba(96, 165, 250, .12), transparent 60%), radial-gradient(70% 60% at 20% 90%, rgba(167, 139, 250, .1), transparent 60%), #070b16; }
.backdrop::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .52 0 0 0 0 .6 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.frame { position: fixed; inset: 14px; z-index: 30; pointer-events: none; }
.frame i { position: absolute; width: 14px; height: 14px; border-color: rgba(195, 205, 225, .35); border-style: solid; border-width: 0; transition: border-color .8s; }
.frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.dark-hud .frame i { border-color: rgba(255, 255, 255, .45); }

/* --------------------------------------------------------------- loader */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--paper); transition: opacity 1.1s var(--ease), visibility 1.1s, filter 1.1s var(--ease); }
.loader.done { opacity: 0; visibility: hidden; filter: blur(12px); }
.ld-grid { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.ld-core { position: relative; width: min(340px, 72vw); display: grid; gap: 18px; }
.ld-mark { width: 150px; height: auto; margin: 0 auto 10px; animation: ldBreathe 2.6s var(--ease) infinite; }
.ld-bar { height: 1px; background: var(--line-2); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
[dir="rtl"] .ld-bar i { transform-origin: right; }
.ld-row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
:root[lang="ar"] .ld-row { letter-spacing: 0; font-size: 12.5px; }
.ld-row #ld-pct { color: var(--ink); direction: ltr; }
.ld-corner { position: absolute; font-size: 10.5px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; direction: ltr; }
.ld-corner.tl { top: 30px; left: 32px; } .ld-corner.br { bottom: 30px; right: 32px; }

/* ------------------------------------------------------------------ HUD */
.hud-top { position: fixed; top: 0; inset-inline: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px 28px; padding: 26px var(--gx) 0; pointer-events: none; transition: background .5s, padding .5s var(--ease), box-shadow .5s; }
.hud-top > * { pointer-events: auto; }
.hud-top.solid { padding-top: 14px; padding-bottom: 14px; background: rgba(7, 11, 22, .8); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 1px 0 var(--line); align-items: center; }
.brand { display: block; line-height: 0; position: relative; }
.brand svg { height: 30px; width: auto; overflow: visible; }
.brand:hover svg { animation: glitch .5s steps(2) 1; }
.meta { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 1px; margin-top: -4px; font-size: 10.5px; line-height: 1.55; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); transition: opacity .5s; }
:root[lang="ar"] .meta { letter-spacing: 0; font-size: 11.5px; }
.meta span:first-child { color: var(--faint); direction: ltr; text-align: start; }
.hud-top.solid .meta { display: none; }
.nav { grid-column: 2; display: flex; justify-content: flex-end; gap: 4px; }
.nav a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: .86rem; color: var(--ink-2); transition: color .25s, background .25s; }
.nav a i { font-style: normal; font-size: 10px; color: var(--faint); transition: color .25s; }
.nav a:hover { color: var(--ink); background: rgba(148, 163, 184, .12); }
.nav a:hover i, .nav a.on i { color: var(--cyan); }
.nav a.on { color: var(--ink); }
.nav-end { grid-column: 3; display: flex; align-items: center; gap: 10px; }
.chip-btn { cursor: pointer; padding: 8px 13px; border-radius: 999px; font-size: .86rem; border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--ink-2); transition: border-color .25s, color .25s, background .25s; }
.chip-btn:hover { border-color: var(--ink); color: var(--ink); }
.menu-btn { display: none; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); cursor: pointer; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn i:first-child { top: 16px; } .menu-btn i:last-child { top: 22px; }
.menu-btn[aria-expanded="true"] i:first-child { top: 19px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { top: 19px; transform: rotate(-45deg); }
.dark-hud .hud-top:not(.solid) .nav a, .dark-hud .hud-top:not(.solid) .meta { color: rgba(255, 255, 255, .78); }
.dark-hud .hud-top:not(.solid) .nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dark-hud .hud-top:not(.solid) .chip-btn { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(20, 24, 44, .25); }
.dark-hud .hud-top:not(.solid) .brand svg { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .5)); }

.rail { position: fixed; inset-inline-start: 26px; top: 50%; z-index: 35; transform: translateY(-50%); display: flex; gap: 14px; align-items: stretch; transition: opacity .5s; }
.rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; order: 2; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 4px 0; text-decoration: none; color: var(--faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: color .3s; }
:root[lang="ar"] .rail a { letter-spacing: 0; font-size: 12px; }
.rail a b { font-weight: 400; font-size: 10px; min-width: 18px; }
.rail a span { opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease); white-space: nowrap; }
[dir="rtl"] .rail a span { transform: translateX(6px); }
.rail:hover a span, .rail:focus-within a span { opacity: 1; transform: none; }
.rail a.on { color: var(--ink); }
.rail a.on b { color: var(--cyan); }
.rail a:hover { color: var(--ink-2); }
.rail-bar { order: 1; width: 1px; background: var(--line-2); position: relative; }
.rail-bar i { position: absolute; inset: 0 0 auto 0; height: 100%; background: var(--ink); transform-origin: top; transform: scaleY(0); }
.dark-hud .rail a { color: rgba(255, 255, 255, .55); } .dark-hud .rail a.on { color: #fff; }
.dark-hud .rail-bar { background: rgba(255, 255, 255, .25); } .dark-hud .rail-bar i { background: #fff; }

.hud-bottom { position: fixed; bottom: 0; inset-inline: 0; z-index: 35; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 var(--gx) 24px; pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
.hud-bottom > * { pointer-events: auto; }
.hud-bottom.away { opacity: 0; transform: translateY(12px); }
.hud-bottom.away > * { pointer-events: none; }
.hb-l { display: flex; align-items: center; gap: 22px; }
.sound { display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; border: 0; background: none; cursor: pointer; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
:root[lang="ar"] .sound, :root[lang="ar"] .hint { letter-spacing: 0; font-size: 12px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.sound[aria-pressed="true"] .eq i { animation: eq 1s ease-in-out infinite; }
.sound[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; } .sound[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; } .sound[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
.hint { display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.hint-line { position: relative; width: 34px; height: 1px; background: var(--line-2); overflow: hidden; }
.hint-line::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: hintLine 2.2s var(--ease-io) infinite; }
.telemetry { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); direction: ltr; }
:root[lang="ar"] .telemetry { letter-spacing: 0; font-size: 11.5px; }
.telemetry b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.telemetry b.bad { color: var(--down); }
.telemetry .dot { display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: var(--up); vertical-align: 1px; animation: ping 2.2s var(--ease) infinite; }
.dark-hud .sound, .dark-hud .hint, .dark-hud .telemetry { color: rgba(255, 255, 255, .7); }
.dark-hud .telemetry b { color: #fff; }
.dark-hud .hint-line { background: rgba(255, 255, 255, .3); } .dark-hud .hint-line::after { background: #fff; }

/* map labels and the scan brackets, placed by script */
.labels { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.lb { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink); white-space: nowrap; direction: ltr; background: rgba(11, 18, 34, .78); border: 1px solid var(--edge); border-radius: 999px; box-shadow: 0 6px 18px -10px var(--shade); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; will-change: transform; }
.lb.on { opacity: 1; }
.lb i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--cyan)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--cyan)) 25%, transparent); }
.lb small { color: var(--mute); font-weight: 400; }
.lb.down { color: #ff8fa3; border-color: rgba(244, 63, 94, .45); }
.lb.down i { background: var(--down); animation: blink 1s steps(1) infinite; }
.dark-hud .lb { background: rgba(20, 24, 44, .5); color: #fff; border-color: rgba(255, 255, 255, .2); }
.dark-hud .lb small { color: rgba(255, 255, 255, .6); }
.scanbox { position: fixed; top: 0; left: 0; z-index: 12; width: 100px; height: 100px; pointer-events: none; opacity: 0; transition: opacity .5s; will-change: transform; }
.scanbox.on { opacity: 1; }
.scanbox i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ink); }
.scanbox i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.scanbox i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.scanbox i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.scanbox i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.scanbox span { position: absolute; top: -20px; left: 0; font-size: 10px; letter-spacing: .12em; color: var(--ink-2); direction: ltr; }

.toasts { position: fixed; z-index: 36; inset-inline-end: var(--gx); bottom: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 420px; padding: 11px 14px; border-radius: 14px; font-size: .86rem; color: #ffd3db; background: rgba(46, 12, 24, .86); border: 1px solid rgba(244, 63, 94, .55); box-shadow: 0 18px 40px -18px rgba(244, 63, 94, .7); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: toastIn .5s var(--spring) both; }
.toast.up { color: #c8f6e4; background: rgba(7, 36, 30, .86); border-color: rgba(52, 211, 153, .5); box-shadow: 0 18px 40px -18px rgba(52, 211, 153, .6); }
.toast.out { animation: toastOut .4s var(--ease) both; }
.toast .t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--down); animation: blink 1s steps(1) infinite; }
.toast.up .t-dot { background: var(--up); animation: none; }
.toast b { font-weight: 600; }
.toast .t-name { font-family: var(--f-mono); font-size: .8rem; direction: ltr; }
.toast .imp { font-size: .78rem; opacity: .85; border-inline-start: 1px solid currentColor; padding-inline-start: 9px; }
.toast time { font: 400 .7rem var(--f-mono); opacity: .6; margin-inline-start: auto; }

/* soft night behind headlines and the HUD, so text reads over the lit city */
.hero::before, .ch-head::before, .launch::before, .stats::before { content: ""; position: absolute; z-index: -1; inset: -35% -45% -45% -35%; pointer-events: none; background: radial-gradient(closest-side, rgba(7, 11, 22, .82), rgba(7, 11, 22, 0)); }
.stats::before { inset: -60% -10% -40% -10%; }
.hud-top::before { content: ""; position: absolute; inset: 0 0 -70px 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7, 11, 22, .78), rgba(7, 11, 22, 0)); transition: opacity .5s; }
.hud-top.solid::before { opacity: 0; }
.hud-bottom::before { content: ""; position: absolute; inset: -70px 0 0 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7, 11, 22, 0), rgba(7, 11, 22, .8)); }

/* the chapter card seen through each white-out */
.inter { position: fixed; inset: 0; z-index: 13; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; opacity: 0; color: var(--ink); }
.inter b { font-weight: 400; font-size: 11px; letter-spacing: .3em; color: var(--cyan); }
.inter span { font: 300 clamp(1.6rem, 3vw, 2.6rem)/1 var(--f-display); letter-spacing: -.01em; }
.in-after .frame, .in-after .rail { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------- chapters */
main { position: relative; z-index: 10; }
.chapter { position: relative; height: calc(var(--len, 200) * 1vh); }
.stick { position: fixed; inset: 0; pointer-events: none; visibility: hidden; z-index: 11; }
.chapter.is-active .stick { visibility: visible; }
.stick a, .stick button, .stick .deck, .stick .cta-row { pointer-events: auto; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow b { font-weight: 500; color: var(--cyan); }
.eyebrow b::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-inline-start: 10px; vertical-align: 3px; background: currentColor; }
:root[lang="ar"] .eyebrow { letter-spacing: 0; font: 600 13px/1.4 var(--f-body); }
.eyebrow.light { color: rgba(255, 255, 255, .85); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; animation: ping 2.2s var(--ease) infinite; }
.display { margin: 0; font: 300 clamp(2.6rem, 5.9vw, 5.6rem)/.96 var(--f-display); letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.display .line { display: block; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad .w { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[lang="ar"] .display { font-weight: 400; line-height: 1.22; letter-spacing: 0; font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.h2 { margin: 0 0 16px; font: 300 clamp(1.9rem, 3.4vw, 3.1rem)/1.04 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
:root[lang="ar"] .h2 { font-weight: 500; line-height: 1.3; letter-spacing: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.sub { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.lede { margin: 0 0 26px; max-width: 50ch; color: var(--ink-2); }
.mobile-only { display: none; }

/* scroll reveals: toggled by script with .on / .past */
.js.gl [data-r] { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(10px); transition: opacity .7s var(--ease), transform 1s var(--ease), filter .8s var(--ease); }
.js.gl [data-r].on { opacity: 1; transform: none; filter: none; }
.js.gl [data-r].past { transform: translate3d(0, -28px, 0); }
.js.gl [data-r] .w { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0) rotate(2deg); filter: blur(6px); transition: opacity .6s var(--ease), transform .9s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 38ms + .08s); }
.js.gl [data-r].on .w { opacity: 1; transform: none; filter: none; }
.js.gl [data-r]:not(.on) .w { transition-delay: 0s; }
.w { white-space: pre; }
:root[lang="ar"] .w { white-space: normal; }

.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 999px; border: 1px solid transparent; font: 500 .95rem/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .45s var(--spring), background .3s, color .3s, border-color .3s, box-shadow .3s; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }
[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg.arrow { transform: scaleX(-1) translateX(3px); }
.btn-ink { color: #061021; font-weight: 600; background: var(--grad); box-shadow: 0 12px 32px -12px rgba(96, 165, 250, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .14); opacity: 0; transition: opacity .45s var(--ease); }
.btn-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease); }
.btn-ink:hover::before { opacity: 1; }
.btn-ink:hover { box-shadow: 0 18px 44px -12px rgba(167, 139, 250, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-ink:hover::after { transform: translateX(130%); }
.btn-glass { color: var(--ink); background: var(--glass); border-color: var(--line-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 10px 30px -18px var(--shade); }
.btn-glass:hover { border-color: var(--cyan); }
.btn-glass.dark { color: #fff; background: rgba(20, 24, 44, .28); border-color: rgba(255, 255, 255, .35); }
.btn-glass.dark:hover { border-color: #fff; }
.btn-light { color: #061021; font-weight: 600; background: var(--grad); box-shadow: 0 12px 32px -12px rgba(96, 165, 250, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-light:hover { box-shadow: 0 18px 44px -12px rgba(167, 139, 250, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-sm { padding: 10px 16px; font-size: .86rem; }
.btn-link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; text-decoration: none; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
:root[lang="ar"] .btn-link { letter-spacing: 0; font: 600 13px var(--f-body); }
.btn-link i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .4s var(--spring), border-color .3s; }
.btn-link i svg { width: 11px; height: 11px; margin-left: 2px; fill: var(--ink); }
.btn-link:hover i { transform: scale(1.1); border-color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* 01 · summit */
.hero { position: absolute; inset-inline-start: var(--gx); bottom: clamp(88px, 15vh, 150px); max-width: min(680px, 56vw); }
.hero .display { margin-bottom: 30px; }
.brief { position: absolute; inset-inline-end: var(--gx); top: calc(var(--top) + 26px); width: 300px; margin: 0; font-size: 11px; line-height: 1.7; letter-spacing: .02em; color: var(--ink-2); }
.brief p { margin: 0; }
.brief-h { margin: 0 0 10px !important; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
:root[lang="ar"] .brief { font: 400 13px/1.8 var(--f-body); }
:root[lang="ar"] .brief-h { letter-spacing: 0; font-size: 12px; }

/* 02 · discover */
.ch-head { position: absolute; inset-inline-start: var(--gx); top: calc(var(--top) + 40px); max-width: 540px; }
.ch-head.top { top: calc(var(--top) + 30px); }
.steps { list-style: none; margin: 0; padding: 0; position: absolute; inset-inline-start: var(--gx); bottom: 88px; width: min(400px, 88vw); }
.step { position: absolute; bottom: 0; inset-inline: 0; }
.step, .card, .hw { background: var(--glass); border: 1px solid var(--edge); border-radius: 22px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 30px 60px -36px var(--shade), inset 0 1px 0 rgba(255, 255, 255, .06); }
.step { padding: 22px 22px 20px; }
.step-n { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .12em; color: var(--cyan); direction: ltr; text-align: start; }
.step h3 { margin: 0 0 8px; font: 400 1.7rem/1.1 var(--f-display); letter-spacing: -.01em; }
:root[lang="ar"] .step h3 { font-weight: 600; font-size: 1.45rem; }
.step p { margin: 0 0 14px; color: var(--ink-2); font-size: .94rem; }
.log { display: block; padding: 10px 12px; border-radius: 12px; direction: ltr; text-align: left; font: 400 .74rem/1.65 var(--f-mono); color: var(--ink-2); background: rgba(7, 11, 22, .6); border: 1px solid var(--line); }
.log .c { color: var(--cyan); } .log .ok { color: var(--up); }
.legend { position: absolute; inset-inline-end: var(--gx); bottom: 88px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
:root[lang="ar"] .legend { letter-spacing: 0; font: 500 12px var(--f-body); }
.legend > span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }

/* 03 · hardware */
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw { position: absolute; bottom: 92px; width: min(360px, 86vw); padding: 24px 24px 22px; opacity: 0; filter: blur(10px); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .8s var(--ease); }
.hw[data-side="left"] { left: var(--gx); transform: translateX(-24px); }
.hw[data-side="right"] { right: var(--gx); transform: translateX(24px); }
.hw.on { opacity: 1; filter: none; transform: none; }
.hw-i { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
:root[lang="ar"] .hw-i { letter-spacing: 0; font-size: 12px; }
.hw h3 { margin: 0 0 8px; font: 300 clamp(1.8rem, 2.6vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.015em; direction: ltr; text-align: start; }
.hw-s { margin: 0 0 12px; font-size: .8rem; color: var(--ink-2); }
.hw-d { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--mute); font-size: .92rem; }

/* 04 · sweep */
.stats { position: absolute; inset-inline: var(--gx); bottom: 92px; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 0; align-items: end; }
.stats-lead { margin: 0; padding-inline-end: 28px; font: 300 clamp(1.1rem, 1.5vw, 1.35rem)/1.4 var(--f-display); color: var(--ink-2); text-wrap: balance; }
:root[lang="ar"] .stats-lead { font-weight: 400; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px; border-inline-start: 1px solid var(--line-2); }
.stat b { font-weight: 300; font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.stat b small { font-size: .38em; margin-inline-start: 5px; letter-spacing: 0; color: var(--mute); }
.stat > span { color: var(--mute); font-size: .86rem; line-height: 1.45; }

/* 05 · features */
.feat-head { max-width: 480px; }
.deck { position: absolute; inset-inline-end: var(--gx); top: 50%; transform: translateY(-46%); width: min(440px, 38vw); display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity .7s var(--ease); }
.deck.on { opacity: 1; }
.deck-top { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; color: var(--mute); direction: ltr; }
.deck-i { font-size: 1.5rem; font-weight: 300; color: var(--ink); letter-spacing: -.02em; }
.deck-bar { flex: 1; height: 1px; margin-inline-start: 14px; background: var(--line-2); position: relative; overflow: hidden; }
.deck-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.cards { position: relative; min-height: 420px; }
.card { position: absolute; inset: 0 0 auto 0; padding: 26px 26px 22px; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.985); filter: blur(8px); transition: opacity .55s var(--ease), transform .8s var(--ease), filter .6s var(--ease), visibility 0s .6s; }
.card.on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .08s, .08s, .08s, 0s; }
.card.prev { transform: translateY(-18px) scale(.985); }
.card h3 { margin: 0 0 10px; font: 400 clamp(1.6rem, 2.2vw, 2.1rem)/1.08 var(--f-display); letter-spacing: -.015em; }
:root[lang="ar"] .card h3 { font-weight: 600; font-size: 1.5rem; line-height: 1.35; }
.card > p { margin: 0 0 18px; color: var(--ink-2); font-size: .95rem; }
.deck-nav { display: flex; align-items: center; gap: 14px; }
.arrow-btn { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color .3s, transform .45s var(--spring), background .3s; }
.arrow-btn svg { width: 20px; height: 20px; }
[dir="rtl"] .arrow-btn svg { transform: scaleX(-1); }
.arrow-btn:hover { border-color: var(--cyan); background: rgba(34, 211, 238, .12); transform: scale(1.06); }
.arrow-btn:disabled { opacity: .35; pointer-events: none; }
.dots { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex: 1; justify-content: center; }
.dots li { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background .3s, transform .3s var(--spring), width .4s var(--ease); }
.dots li.on { width: 20px; border-radius: 3px; background: var(--ink); }

/* the miniatures of real screens inside the feature cards */
.mini { position: relative; padding: 14px; border-radius: 16px; font-size: .85rem; background: rgba(7, 11, 22, .62); border: 1px solid var(--line); }
.al { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; font-size: .84rem; color: #ffcad3; border: 1px solid rgba(244, 63, 94, .5); background: rgba(244, 63, 94, .08); }
.al + .al { margin-top: 8px; }
.al.up { color: #c8f6e4; border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .06); }
.al .d { width: 8px; height: 8px; border-radius: 50%; background: var(--down); animation: blink 1.1s steps(1) infinite; }
.al.up .d { background: var(--up); animation: none; }
.al .n { font-family: var(--f-mono); font-size: .78rem; }
.al .imp { font-size: .76rem; opacity: .85; border-inline-start: 1px solid currentColor; padding-inline-start: 8px; }
.al time { margin-inline-start: auto; font: 400 .7rem var(--f-mono); opacity: .6; }
.tg { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.tg-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #229ed9; }
.tg-ico svg { width: 15px; height: 15px; }
.tg-msg { padding: 8px 12px; border-radius: 4px 14px 14px 14px; font-size: .82rem; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2); }
[dir="rtl"] .tg-msg { border-radius: 14px 4px 14px 14px; }
.tg-msg b { display: block; font-size: .74rem; color: #6ec3f0; font-weight: 600; margin-bottom: 2px; }
.sm-box { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); }
.sm-box svg { width: 16px; height: 16px; flex: none; color: var(--mute); }
.sm-q { font-size: .98rem; color: var(--ink); min-height: 1.5em; unicode-bidi: plaintext; }
.caret { width: 1.5px; height: 1.15em; background: var(--cyan); animation: blink 1s steps(1) infinite; flex: none; }
.sm-res { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-height: 100px; }
.sm-res li { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 10px; animation: fadeUp .35s var(--ease) both; }
.sm-res li:first-child { background: rgba(34, 211, 238, .08); }
.sm-k { flex: none; font: 500 .62rem/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; }
:root[lang="ar"] .sm-k { letter-spacing: 0; font: 600 .7rem/1.6 var(--f-body); }
.sm-t { color: var(--ink); overflow-wrap: anywhere; }
.sm-t mark { background: none; color: var(--cyan); font-weight: 600; }
.sm-s { margin-inline-start: auto; color: var(--mute); font: 400 .74rem var(--f-mono); direction: ltr; white-space: nowrap; }
.ov-row { display: flex; align-items: center; gap: 8px; font: 500 .82rem var(--f-mono); }
.ov-row + .ov-row { margin-top: 4px; }
.ov-mhz { margin-inline-start: auto; color: var(--warn); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.a { background: var(--blue); } .dot.b { background: var(--violet); }
.ov-bars { position: relative; height: 30px; margin: 12px 0 8px; border-radius: 8px; background: rgba(148, 163, 184, .08); direction: ltr; }
.ov-bars i { position: absolute; }
.ov-bars .ov { top: 0; bottom: 0; left: 35.7%; width: 28.6%; background: rgba(217, 119, 6, .14); border-inline: 1.5px dashed var(--warn); animation: glowWarn 2.4s ease-in-out infinite; }
.ov-bars .a { top: 7px; height: 7px; left: 7.1%; width: 57.1%; border-radius: 99px; background: var(--blue); }
.ov-bars .b { bottom: 7px; height: 7px; left: 35.7%; width: 57.1%; border-radius: 99px; background: var(--violet); }
.ov-det { font: 400 .74rem var(--f-mono); color: var(--mute); direction: ltr; text-align: left; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs span { font-size: .72rem; padding: 4px 10px; border-radius: 999px; color: var(--mute); border: 1px solid var(--line); }
.tabs span.on { color: var(--ink); background: var(--panel-2); border-color: var(--line-2); }
.mini-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mini-tbl th { text-align: start; font-weight: 500; color: var(--mute); padding: 0 6px 7px; border-bottom: 1px solid var(--line); }
.mini-tbl td { padding: 6px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-tbl td:first-child { font-family: var(--f-body); color: var(--ink); }
.mini-tbl tr:last-child td { border-bottom: 0; }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; margin-inline-end: 6px; vertical-align: -1px; }
.sig i { width: 3px; border-radius: 1px; background: var(--up); }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 7px; } .sig i:nth-child(3) { height: 10px; } .sig i:nth-child(4) { height: 13px; }
.sig.s3 i:nth-child(4), .sig.s2 i:nth-child(n+3) { background: var(--line-2); }
.sig.s2 i:nth-child(-n+2) { background: var(--warn); }
.cfg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cfg-pill { font: 500 .74rem var(--f-mono); padding: 4px 10px; border-radius: 999px; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .35); direction: ltr; }
.cfg-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); font: 400 .78rem var(--f-mono); }
.cfg-row .chg { direction: ltr; white-space: nowrap; }
.cfg-row s { color: var(--faint); } .cfg-row b { color: var(--up); font-weight: 500; }
.cfg-more { padding-top: 8px; color: var(--mute); font-size: .78rem; }
.tr { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; padding: 6px 0; font-size: .8rem; }
.tr + .tr { border-top: 1px solid var(--line); }
.tr-n { font-family: var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-bar { position: relative; height: 12px; direction: ltr; }
.tr-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line-2); border-radius: 2px; }
.tr-bar span { position: absolute; top: 5px; height: 2px; }
.tr-bar i, .tr-bar b { position: absolute; top: 2px; width: 8px; height: 8px; border-radius: 50%; margin-left: -4px; }
.tr-bar i { background: var(--faint); }
.tr-v { font: 500 .74rem var(--f-mono); direction: ltr; white-space: nowrap; }
.tr.worse .tr-bar span, .tr.worse .tr-bar b { background: var(--down); } .tr.worse .tr-v { color: var(--down); }
.tr.better .tr-bar span, .tr.better .tr-bar b { background: var(--up); } .tr.better .tr-v { color: var(--up); }
.tr.unstable .tr-bar span, .tr.unstable .tr-bar b { background: var(--warn); } .tr.unstable .tr-v { color: var(--warn); }
.bh { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; gap: 8px; direction: ltr; }
.bh-l + .bh { margin-top: 12px; }
.bh svg { width: 26px; height: 26px; }
.bh-line { height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 9px, transparent 9px 15px); background-size: 15px 2px; animation: dash .8s linear infinite; }
.bh-l { font: 400 .72rem var(--f-mono); color: var(--mute); text-align: center; direction: ltr; margin-top: 4px; }
.term { margin: 0; font: 400 .76rem/1.65 var(--f-mono); color: var(--ink-2); direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .p { color: var(--cyan); } .term .ok { color: var(--up); } .term .m { color: var(--faint); }
.roles { display: flex; flex-direction: column; gap: 8px; }
.role { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--mute); }
.role b { flex: none; min-width: 78px; text-align: center; font: 500 .72rem/1.9 var(--f-mono); border-radius: 999px; border: 1px solid; }
.role:nth-child(1) b { color: var(--ink-2); border-color: var(--line-2); }
.role:nth-child(2) b { color: var(--blue); border-color: rgba(59, 130, 246, .45); }
.role:nth-child(3) b { color: var(--violet); border-color: rgba(139, 92, 246, .45); }

/* 06 · launch, at dusk */
.launch { position: absolute; inset-inline-start: var(--gx); bottom: clamp(96px, 16vh, 160px); max-width: min(760px, 62vw); color: #fff; }

.launch .display { color: #fff; margin-bottom: 18px; text-shadow: 0 2px 40px rgba(30, 20, 60, .35); }
.launch .sub { color: rgba(255, 255, 255, .85); margin-bottom: 28px; }

/* ------------------------------------------------ after the journey */
.after { position: relative; z-index: 20; background: var(--paper); border-radius: 32px 32px 0 0; box-shadow: 0 -30px 80px -30px rgba(0, 0, 0, .8), 0 -1px 0 var(--line-2); }
.after::before { content: ""; position: absolute; top: 12px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--line-2); }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gx); }
.sec { padding-block: clamp(90px, 10vw, 140px) 0; }
.sec:first-child { padding-top: clamp(100px, 11vw, 150px); }
.sec-head { max-width: 760px; margin-bottom: clamp(34px, 5vw, 56px); }
.sec-head.split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px 56px; align-items: end; }
.sec-head .h2 { margin: 0; }
.sec-head .sub { color: var(--mute); }

/* the app window keeps the product's own night palette */
.win { --night: #070b16; --deep: #0b1222; --panel-2: #142039; --line: #1b2742; --line-2: #273859; --ink: #e8eef9; --ink-2: #c3cde1; --mute: #8b9ab7; --faint: #5f6d8a; --cyan: #22d3ee; --violet: #a78bfa; --blue: #60a5fa; --up: #34d399;
  position: relative; border-radius: 22px; overflow: hidden; color: var(--ink); background: #090f1d; border: 1px solid #1d2944;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 40px 90px -60px rgba(96, 165, 250, .5); }
.win-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding-inline: 14px; background: #0c1426; border-bottom: 1px solid var(--line); }
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3654; }
.win-addr { display: inline-flex; align-items: center; gap: 7px; margin-inline: auto; padding: 4px 14px; border-radius: 8px; background: var(--night); border: 1px solid var(--line); font: 400 .76rem var(--f-mono); color: var(--mute); direction: ltr; }
.win-addr svg { width: 11px; height: 11px; }
.app-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(15, 24, 45, .6); }
.app-brand { height: 20px; width: auto; flex: none; }
.app-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px; min-width: 0; padding: 7px 12px; border-radius: 999px; background: var(--night); border: 1px solid var(--line-2); font-size: .84rem; }
.app-search svg { width: 14px; height: 14px; flex: none; color: var(--mute); }
.app-q { color: var(--ink); white-space: nowrap; unicode-bidi: plaintext; }
.app-ph { color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .caret { background: var(--cyan); }
.app-chip { padding: 6px 12px; border-radius: 9px; font-size: .8rem; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.app-scan { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font: 600 .8rem var(--f-body); color: #061021; background: linear-gradient(90deg, #22d3ee, #60a5fa 38%, #a78bfa 72%, #e879f9); white-space: nowrap; }
.app-scan svg { width: 13px; height: 13px; }
.app-icons { display: flex; gap: 12px; margin-inline-start: auto; color: var(--mute); }
.app-icons svg { width: 16px; height: 16px; }
.app-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 .7rem var(--f-body); color: #fff; background: #2563eb; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 580px; }
.app-map { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(96, 165, 250, .08), transparent 60%); }
.app-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(148, 163, 184, .1) 1px, transparent 1.3px); background-size: 24px 24px; }
#tour-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app-legend { position: absolute; inset-inline: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.app-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; color: var(--ink-2); background: rgba(11, 18, 34, .8); border: 1px solid var(--line); }
.app-legend i { width: 8px; height: 8px; border-radius: 50%; }
.app-legend b { font: 600 .76rem var(--f-mono); color: var(--ink); }
.app-panel { border-inline-start: 1px solid var(--line); background: rgba(12, 19, 36, .92); padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.app-panel.swap > * { animation: panelIn .6s var(--ease) both; }
[dir="rtl"] .app-panel.swap > * { animation-name: panelInRtl; }
.app-panel.swap > :nth-child(2) { animation-delay: .05s; } .app-panel.swap > :nth-child(3) { animation-delay: .1s; } .app-panel.swap > :nth-child(4) { animation-delay: .15s; }
.app-panel.swap > :nth-child(5) { animation-delay: .2s; } .app-panel.swap > :nth-child(6) { animation-delay: .25s; } .app-panel.swap > :nth-child(n+7) { animation-delay: .3s; }
.ap-head { display: flex; align-items: center; gap: 10px; }
.ap-head .d { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(96, 165, 250, .18); flex: none; }
.ap-head b { display: block; font: 600 1.02rem var(--f-mono); }
.ap-head small { display: block; color: var(--mute); font-size: .74rem; direction: ltr; text-align: start; }
.ap-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
:root[lang="ar"] .ap-sec { letter-spacing: 0; font: 700 .76rem var(--f-body); }
.ap-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); order: 1; }
.ap-leg { display: inline-flex; align-items: center; gap: 5px; order: 2; text-transform: none; letter-spacing: 0; font: 500 .7rem var(--f-body); color: var(--mute); }
.ap-leg i { width: 8px; height: 2px; border-radius: 2px; }
.ap-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-tile { padding: 9px 10px; border-radius: 10px; background: var(--night); border: 1px solid var(--line); }
.ap-tile span { display: block; font-size: .7rem; color: var(--mute); }
.ap-tile b { font: 600 1.05rem var(--f-mono); font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; }
.ap-tile b.flash { animation: numFlash .6s var(--ease); }
.spark { display: block; width: 100%; height: 64px; }
.ap-rates { display: flex; justify-content: space-between; font: 500 .78rem var(--f-mono); direction: ltr; margin-top: -4px; }
.ap-rates .c { color: var(--cyan); } .ap-rates .v { color: var(--violet); }
.ap-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-path li { position: relative; display: flex; align-items: center; gap: 10px; padding: 3px 0; font: 400 .78rem var(--f-mono); color: var(--ink-2); }
.ap-path li i { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(12, 19, 36, 1); }
.ap-path li + li::before { content: ""; position: absolute; inset-inline-start: 4px; top: -8px; height: 16px; width: 1px; background: var(--cyan); opacity: .6; }
.ap-path li small { margin-inline-start: auto; color: var(--faint); font-family: var(--f-body); font-size: .7rem; }
.ap-cust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ap-cust li { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.ap-cust li i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; }
.ap-cust li small { margin-inline-start: auto; color: var(--mute); font: 400 .72rem var(--f-mono); }

.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; isolation: isolate; background: #070b16; border: 1px solid var(--line-2); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 30px 80px -50px rgba(167, 139, 250, .55); }
.vid-player { position: absolute; inset: 0; z-index: 1; }
.vid-player iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the poster sits over the player until it is ready, then fades away */
.vid-link { position: absolute; inset: 0; z-index: 2; display: block; isolation: isolate; text-decoration: none; color: #fff; background: #070b16; transition: opacity .6s var(--ease), visibility .6s; }
.vid.ready .vid-link { opacity: 0; visibility: hidden; }
.vid-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; }
.vid-link:hover img { transform: scale(1.04); filter: saturate(1.1) brightness(1.05); }
.vid-link::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 11, 22, 0) 45%, rgba(7, 11, 22, .85)), radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 60%); }
.vid-meta { position: absolute; inset-inline: clamp(16px, 3vw, 30px); bottom: clamp(14px, 2.6vw, 28px); z-index: 2; display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.vid-play { position: relative; flex: none; width: clamp(56px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .3); transition: transform .45s var(--spring), background .3s; }
.vid-play::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; padding: 1.5px; background: conic-gradient(from var(--ang), #22d3ee, #60a5fa, #a78bfa, #e879f9, #22d3ee); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; }
.vid-play svg { width: 34%; height: 34%; margin-left: 7%; fill: #fff; }
.vid-link:hover .vid-play { transform: scale(1.1); background: rgba(255, 255, 255, .24); }
.vid-title { margin: 0; max-width: 60ch; font: 600 clamp(.92rem, 1.5vw, 1.12rem)/1.45 var(--f-body); unicode-bidi: plaintext; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.vid-chips { display: flex; gap: 8px; flex: none; margin-inline-start: auto; }
.vid-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .74rem; background: rgba(7, 11, 22, .6); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.vid-chips svg { width: 11px; height: 11px; fill: currentColor; }
.vid-chips .yt { font-family: var(--f-body); }
.vid-sound { position: absolute; z-index: 3; top: 14px; left: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(7, 11, 22, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .25s; }
:root[lang="ar"] .vid-sound { letter-spacing: 0; font: 600 12.5px var(--f-body); }
.vid-sound svg { width: 15px; height: 15px; flex: none; }
.vid-sound.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vid-sound:hover { background: rgba(7, 11, 22, .85); }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; }
.faq .sec-head { margin: 0; }
.qa details { border-bottom: 1px solid var(--line-2); padding: 20px 0; }
.qa details:first-child { padding-top: 0; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; font: 500 1.08rem/1.4 var(--f-body); transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 300 1.5rem/1 var(--f-mono); color: var(--cyan); transition: transform .35s var(--spring); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin: 12px 0 0; max-width: 64ch; color: var(--mute); }
.qa details[open] p { animation: fadeUp .4s var(--ease); }

.end-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(34px, 5.5vw, 64px); border-radius: 30px; background: radial-gradient(110% 150% at 0% 0%, rgba(34, 211, 238, .16), transparent 52%), radial-gradient(110% 150% at 100% 100%, rgba(232, 121, 249, .13), transparent 52%), var(--snow); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9); }
.end-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 62%, rgba(15, 181, 212, .9) 76%, rgba(139, 92, 246, .9) 86%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; }
.end-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(90% 140% at 0% 0%, rgba(15, 181, 212, .1), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(217, 70, 239, .08), transparent 55%); }
.end-card .h2 { margin-bottom: 10px; }

.foot { margin-top: clamp(90px, 10vw, 140px); padding-block: 46px 40px; border-top: 1px solid var(--line-2); color: var(--mute); font-size: .88rem; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.foot-brand svg { height: 26px; width: auto; margin-bottom: 14px; }
.foot-brand p { margin: 0; max-width: 36ch; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.foot-links a { text-decoration: none; color: var(--ink-2); width: fit-content; }
.foot-links a:hover { color: var(--ink); }
.foot-end { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.to-top { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
:root[lang="ar"] .to-top { letter-spacing: 0; font-size: 12.5px; }
.to-top:hover { color: var(--ink); }
.foot-copy { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; direction: ltr; }

/* ---------------------------------------------------------------- buying */
dialog.co { width: min(580px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; overflow: auto; color: var(--ink); background: rgba(11, 18, 34, .96); border: 1px solid var(--line-2); border-radius: 26px; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .95); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
dialog.co::backdrop { background: rgba(3, 6, 14, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
dialog.co[open] { animation: pop .5s var(--spring); }
.co-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.co-head h2 { margin: 0 0 4px; font: 400 1.7rem/1.1 var(--f-display); letter-spacing: -.01em; }
:root[lang="ar"] .co-head h2 { font-weight: 600; font-size: 1.45rem; }
.co-head p { margin: 0; color: var(--mute); font-size: .9rem; }
.co-x { border: 0; background: none; cursor: pointer; color: var(--mute); font-size: 1.5rem; line-height: 1; padding: 6px 10px; border-radius: 10px; }
.co-x:hover { color: var(--ink); background: rgba(148, 163, 184, .1); }
.co-body { display: grid; gap: 15px; padding: 20px 24px; }
.co-lbl { font-size: .85rem; color: var(--ink-2); margin-bottom: 8px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-2); background: transparent; transition: border-color .2s, background .2s, color .2s; }
.chip input:checked + span { border-color: var(--cyan); background: rgba(34, 211, 238, .1); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .85rem; color: var(--ink-2); }
.field input, .field textarea { font: inherit; font-size: .95rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.co-err { margin: 0; min-height: 1.3em; color: var(--down); font-size: .86rem; }
.co-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 0 24px 24px; }
.co-done { display: grid; gap: 14px; padding: 26px 24px; }
.co-check { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 159, 110, .1); border: 1px solid rgba(14, 159, 110, .4); animation: pop .5s var(--spring); }
.co-check svg { width: 26px; height: 26px; }
.co-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .6s var(--ease) .2s forwards; }
.co-done h3 { margin: 0; font: 400 1.5rem var(--f-display); }
.co-done p { margin: 0; color: var(--mute); }
pre.co-sum { margin: 0; padding: 14px; border-radius: 14px; max-height: 230px; overflow: auto; white-space: pre-wrap; font: 400 .82rem/1.65 var(--f-mono); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); unicode-bidi: plaintext; }
.co-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.co-note { color: var(--faint); font-size: .84rem; }

/* ------------------------------------------------------------ keyframes */
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(14, 159, 110, 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@keyframes hintLine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes ldBreathe { 50% { opacity: .55; transform: scale(.985); } }
@keyframes glitch { 0% { transform: translate(1px, 0); filter: drop-shadow(-2px 0 0 rgba(217, 70, 239, .6)) drop-shadow(2px 0 0 rgba(15, 181, 212, .6)); } 50% { transform: translate(-1px, 0); } 100% { transform: none; filter: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes panelInRtl { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes numFlash { 0% { color: #22d3ee; } 100% { color: inherit; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes dash { to { background-position: 15px 0; } }
@keyframes glowWarn { 50% { background: rgba(217, 119, 6, .26); } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spin { to { --ang: 360deg; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------- smaller */
@media (max-width: 1100px) {
  .nav a i { display: none; }
  .brief { display: none; }
  .hero { max-width: 70vw; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-lead { grid-column: 1 / -1; margin-bottom: 26px; }
  .stat:first-of-type { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 860px) {
  :root { --top: 72px; }
  .hud-top { padding-top: 16px; grid-template-columns: auto 1fr auto; align-items: center; }
  .meta, .rail { display: none; }
  .nav { position: fixed; top: 70px; inset-inline: 12px; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: 20px; background: rgba(11, 18, 34, .96); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav a { padding: 12px 14px; font-size: 1rem; color: var(--ink) !important; }
  .nav a i { display: inline; }
  .menu-btn { display: block; }
  .nav-end .btn-sm { display: none; }
  .telemetry span:nth-child(n+3) { display: none; }
  .hud-bottom { padding-bottom: 16px; }
  .hint { display: none; }
  .mobile-only { display: block; }
  .hero, .launch { inset-inline: 18px; bottom: 64px; max-width: none; }
  .hero .display { margin-bottom: 16px; }
  .display { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .lede { font-size: .95rem; margin-bottom: 20px; }
  .ch-head, .ch-head.top { inset-inline: 18px; top: 84px; max-width: none; }
  .ch-head .sub { display: none; }
  .steps { inset-inline: 18px; width: auto; bottom: 60px; }
  .step { padding: 18px; }
  .legend { display: none; }
  .hw { top: auto; bottom: 60px; inset-inline: 18px !important; width: auto; transform: translateY(20px) !important; }
  .hw.on { transform: none !important; }
  .stats { inset-inline: 18px; bottom: 60px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; padding: 18px; border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
  .stats-lead { font-size: 1rem; margin-bottom: 4px; }
  .stat { padding: 0 14px; }
  .stat:nth-of-type(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .stat b { font-size: 2.2rem; }
  .deck { inset-inline: 12px; top: auto; bottom: 54px; width: auto; transform: none; gap: 10px; }
  .cards { min-height: 0; height: min(44vh, 390px); }
  .card { padding: 18px; max-height: 100%; overflow: auto; }
  .card .mini { font-size: .8rem; }
  .card h3 { font-size: 1.45rem; }
  .card > p { font-size: .88rem; margin-bottom: 12px; }
  .arrow-btn { width: 42px; height: 42px; }
  .feat-head { display: none; }
  .toasts { inset-inline: 12px; bottom: 56px; align-items: stretch; }
  .labels .lb:not(.major) { display: none; }
  .sec-head.split { grid-template-columns: minmax(0, 1fr); }
  .app-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .app-map { height: 360px; }
  .app-panel { border-inline-start: 0; border-top: 1px solid var(--line); }
  .app-icons, .app-chip { display: none; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-end { align-items: flex-start; }
  .vid-title { display: none; }
  .frame { inset: 8px; }
}
@media (max-width: 560px) {
  .app-scan span, .app-avatar { display: none; }
  .app-map { height: 300px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .cta-row .btn-link span { display: none; }
  .btn { padding: 14px 18px; }
}
@media (max-height: 700px) and (min-width: 861px) {
  .ch-head .sub { display: none; }
  .cards { min-height: 360px; }
}

/* ----------------------------------------------- no WebGL: plain pages */
.no-gl #gl, .no-gl .labels, .no-gl .scanbox, .no-gl .rail, .no-gl .telemetry, .no-gl .hint, .no-gl .sound, .no-gl .frame { display: none; }
.no-gl .chapter { height: auto !important; }
.no-gl .stick { position: relative; visibility: visible; inset: auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 130px var(--gx) 80px; }
.no-gl .stick > *, .no-gl .steps, .no-gl .step, .no-gl .hw, .no-gl .stats, .no-gl .deck, .no-gl .card, .no-gl .legend { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; visibility: visible !important; width: auto; max-width: 900px; }
.no-gl .steps, .no-gl .hw-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.no-gl .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; min-height: 0; height: auto; }
.no-gl .deck { max-width: none; }
.no-gl .deck-top, .no-gl .deck-nav { display: none; }
.no-gl .launch { color: var(--ink); } .no-gl .launch .display { color: var(--ink); text-shadow: none; } .no-gl .launch .sub { color: var(--ink-2); }
.no-gl .launch .btn-light { color: #061021; } .no-gl .launch .btn-glass.dark { color: var(--ink); border-color: var(--line-2); }
.no-gl .eyebrow.light { color: var(--ink-2); }
.no-gl .brief { display: none; }
.no-gl .hud-top { padding-top: 14px; padding-bottom: 14px; background: rgba(7, 11, 22, .85); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 1px 0 var(--line); align-items: center; }
.no-gl .meta { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .js.gl [data-r], .js.gl [data-r] .w, .card, .hw { filter: none !important; transition-duration: .25s !important; transition-delay: 0s !important; }
  .co-check path { stroke-dashoffset: 0; }
}