:root {
  color-scheme: dark;
  --void: #030207;
  --void-2: #07060c;
  --surface: #0b0912;
  --ink: #f8f9ff;
  --soft: rgba(242, 244, 255, .7);
  --muted: rgba(224, 226, 241, .49);
  --faint: rgba(224, 226, 241, .28);
  --line: rgba(236, 241, 255, .12);
  --line-strong: rgba(236, 241, 255, .22);
  --cyan: #00edff;
  --cyan-soft: #77f7ff;
  --pink: #ff0a93;
  --purple: #8428ff;
  --green: #29f59f;
  --yellow: #ffd51f;
  --red: #ff3654;
  --orange: #ff7b1c;
  --header: 84px;
  --gutter: clamp(22px, 5.2vw, 84px);
  --content: 1540px;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pointer-x: 70%;
  --pointer-y: 30%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--void);
  scrollbar-color: rgba(0, 237, 255, .34) var(--void);
}

body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(800px 500px at var(--pointer-x) var(--pointer-y), rgba(96, 20, 180, .07), transparent 75%),
    var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
body.menu-open .site-header {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #001114; background: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.noise {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 14px;
  left: 14px;
  translate: 0 -180%;
  padding: 11px 15px;
  border-radius: 7px;
  background: var(--cyan);
  color: #001114;
  font: 900 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skip-link:focus { translate: 0; }

.site-header {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  display: flex;
  height: var(--header);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.site-header.is-scrolled,
.content-page .site-header {
  border-color: var(--line);
  background: rgba(3, 2, 7, .78);
  backdrop-filter: blur(20px) saturate(1.35);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font: 950 14px/1 var(--mono);
  letter-spacing: .2em;
  text-decoration: none;
}

.brand-reticle {
  position: relative;
  display: grid;
  width: 27px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(0, 237, 255, .68);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 237, 255, .2);
}

.brand-reticle::before,
.brand-reticle::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.brand-reticle::before { width: 35px; height: 1px; }
.brand-reticle::after { width: 1px; height: 35px; }
.brand-reticle i { width: 5px; aspect-ratio: 1; border: 1px solid var(--cyan); border-radius: 50%; }
.wordmark-mark {
  position: relative;
  display: grid;
  width: 27px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(0, 237, 255, .68);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 237, 255, .2);
}
.wordmark-mark::before,
.wordmark-mark::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}
.wordmark-mark::before { width: 35px; height: 1px; }
.wordmark-mark::after { width: 1px; height: 35px; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font: 950 14px/1 var(--mono); letter-spacing: .2em; }
.brand-copy small { color: var(--muted); font: 800 7px/1.2 var(--mono); letter-spacing: .29em; }

.site-navigation {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
}

.site-navigation a {
  position: relative;
  padding: 10px 0;
  color: var(--soft);
  font: 820 10px var(--mono);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
}

.site-navigation a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--cyan);
  transition: right .24s var(--ease);
}

.site-navigation a:hover { color: #fff; }
.site-navigation a:hover::after { right: 0; }
.site-navigation .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
}
.nav-cta span { width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); animation: pulse 2.4s ease-in-out infinite; }
.menu-toggle { display: none; }

.eyebrow {
  margin: 0;
  color: var(--cyan-soft);
  font: 850 10px/1.4 var(--mono);
  letter-spacing: .25em;
  text-transform: uppercase;
}

.eyebrow > span { color: var(--pink); }
.system-label {
  margin: 0;
  color: var(--cyan-soft);
  font: 850 10px/1.4 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(760px, 100svh);
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 44%, rgba(114, 25, 242, .29), transparent 28%),
    radial-gradient(circle at 29% 69%, rgba(255, 10, 147, .1), transparent 31%),
    var(--void);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 2, 7, .95) 0%, rgba(3, 2, 7, .68) 38%, transparent 67%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  height: 17vh;
  pointer-events: none;
  background: linear-gradient(transparent, var(--void));
}

.hero-grid,
.multiplayer-grid,
.launch-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .23;
  background-image:
    linear-gradient(rgba(0, 237, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 237, 255, .16) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 68% 47%, #000, transparent 67%);
}

.hero-beam {
  position: absolute;
  z-index: -1;
  top: -10%;
  right: 23%;
  width: 1px;
  height: 120%;
  rotate: 14deg;
  background: linear-gradient(transparent, rgba(0, 237, 255, .34), transparent);
  box-shadow: 0 0 50px 18px rgba(0, 237, 255, .04);
}

.hero-copy {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(760px, 51vw);
  min-height: max(760px, 100svh);
  flex-direction: column;
  justify-content: center;
  margin-left: var(--gutter);
  padding: calc(var(--header) + 46px) 0 92px;
}

.hero-eyebrow { margin-bottom: 26px; }
.hero h1,
.chapter h2,
.showcase h2,
.multiplayer h2,
.threats h2,
.upgrades h2,
.safety h2,
.faq h2,
.launch h2,
.legal-hero h1 {
  margin: 0;
  font-weight: 960;
  letter-spacing: -.068em;
  line-height: .88;
}

.hero h1 { font-size: clamp(62px, 8vw, 136px); }
.hero h1 > span { display: block; }
.spectral {
  color: transparent;
  background: linear-gradient(100deg, #fff 1%, #ff64bd 42%, #8d37ff 79%, #00eaff 112%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 26px rgba(255, 10, 147, .17));
}
.cyan { color: var(--cyan); }
.green { color: var(--green); }

.hero-lede {
  max-width: 570px;
  margin: 34px 0 0;
  color: var(--soft);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 900 10px var(--mono);
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: translate .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { translate: 0 -2px; }
.button-primary { background: var(--cyan); color: #001114; box-shadow: 0 0 36px rgba(0, 237, 255, .22); }
.button-primary:hover { box-shadow: 0 0 50px rgba(0, 237, 255, .4); }
.button-primary i { font-style: normal; font-size: 15px; }
.button-secondary { border-color: var(--line-strong); background: rgba(255, 255, 255, .025); color: #fff; }
.button-secondary:hover { border-color: rgba(0, 237, 255, .52); background: rgba(0, 237, 255, .05); }

.hero-specs {
  display: flex;
  gap: clamp(28px, 4vw, 64px);
  margin: 54px 0 0;
}
.hero-specs div { display: grid; gap: 6px; }
.hero-specs dt { color: var(--muted); font: 800 8px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.hero-specs dd { margin: 0; color: #fff; font-size: 13px; font-weight: 750; }

.hero-art {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: clamp(1vw, 8vw, 150px);
  width: clamp(300px, 28vw, 475px);
  translate: 0 -48%;
}

.phone {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: clamp(34px, 4vw, 58px);
  background: #020105;
  box-shadow:
    0 55px 120px rgba(0, 0, 0, .72),
    0 0 85px rgba(123, 36, 255, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, .06);
  pointer-events: none;
}
.phone img { width: 100%; height: auto; }
.phone-hero { opacity: 0; transform: perspective(1400px) rotateY(-8deg) rotateX(2deg) translateY(30px); animation: acquire 1.15s .2s var(--ease) forwards; }
.phone-speaker { position: absolute; z-index: 2; top: 1.7%; left: 50%; width: 27%; height: 2.8%; translate: -50%; border-radius: 999px; background: #000; }

.orbital-system { position: absolute; z-index: -1; top: 50%; left: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(0, 237, 255, .13); border-radius: 50%; animation: orbit 18s linear infinite; }
.orbit::before { content: ""; position: absolute; top: 50%; left: -4px; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.orbit-b { inset: 15%; border-color: rgba(255, 10, 147, .18); animation-duration: 13s; animation-direction: reverse; }
.orbit-b::before { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.orbit-c { inset: 31%; border-style: dashed; border-color: rgba(133, 40, 255, .28); animation-duration: 25s; }
.axis { position: absolute; top: 50%; left: 50%; background: linear-gradient(90deg, transparent, rgba(0, 237, 255, .12), transparent); }
.axis-x { width: 130%; height: 1px; translate: -50%; }
.axis-y { width: 1px; height: 130%; translate: 0 -50%; background: linear-gradient(transparent, rgba(0, 237, 255, .12), transparent); }

.hero-readout {
  position: absolute;
  display: grid;
  min-width: 134px;
  padding: 11px 13px;
  border-left: 1px solid var(--cyan);
  background: linear-gradient(90deg, rgba(0, 237, 255, .09), transparent);
  backdrop-filter: blur(8px);
}
.hero-readout small { color: var(--muted); font: 750 7px var(--mono); letter-spacing: .19em; }
.hero-readout strong { margin-top: 2px; font: 900 16px var(--mono); letter-spacing: .08em; }
.hero-readout span { color: var(--cyan); font: 750 8px var(--mono); letter-spacing: .1em; }
.readout-top { top: 19%; right: -31%; }
.readout-bottom { bottom: 17%; left: -30%; border-color: var(--pink); background: linear-gradient(90deg, rgba(255, 10, 147, .09), transparent); }
.readout-bottom span { color: var(--pink); }

[data-entrance] { opacity: 0; translate: 0 22px; animation: entrance .9s var(--ease) forwards; }
[data-entrance]:nth-child(2) { animation-delay: .09s; }
[data-entrance]:nth-child(3) { animation-delay: .17s; }
[data-entrance]:nth-child(4) { animation-delay: .24s; }
[data-entrance]:nth-child(5) { animation-delay: .31s; }

.scroll-marker {
  position: absolute;
  z-index: 15;
  bottom: 26px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  translate: -50%;
  color: var(--muted);
  font: 800 7px var(--mono);
  letter-spacing: .2em;
  text-decoration: none;
}
.scroll-marker i { width: 1px; height: 34px; background: linear-gradient(var(--cyan), transparent); animation: scroll 1.8s ease-in-out infinite; }

.transmission { overflow: hidden; border-block: 1px solid var(--line); background: #08060c; }
.transmission-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 34px;
  padding: 14px 0;
  animation: marquee 30s linear infinite;
}
.transmission span { color: var(--soft); font: 850 9px var(--mono); letter-spacing: .25em; white-space: nowrap; }
.transmission i { width: 5px; aspect-ratio: 1; rotate: 45deg; background: var(--pink); box-shadow: 0 0 10px var(--pink); }

.chapter,
.threats,
.faq {
  max-width: var(--content);
  margin-inline: auto;
  padding: clamp(110px, 12vw, 200px) var(--gutter);
}

.chapter-protocol { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(420px, 1.14fr); gap: clamp(70px, 11vw, 180px); }
.chapter-heading { position: sticky; top: 140px; align-self: start; }
.chapter-heading h2,
.showcase h2,
.multiplayer h2,
.threats h2,
.upgrades h2,
.safety h2,
.faq h2 { margin-top: 22px; font-size: clamp(48px, 6.4vw, 106px); }
.chapter-heading > p:last-child,
.showcase-copy > p:last-child,
.threat-heading > p:last-child,
.upgrades-copy > p,
.safety-copy > p,
.multiplayer-copy > p {
  max-width: 540px;
  margin: 29px 0 0;
  color: var(--soft);
  font-size: clamp(16px, 1.35vw, 20px);
}

.protocol-flow { margin: 0; padding: 0; list-style: none; }
.protocol-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1px 1fr;
  gap: 26px;
  min-height: 190px;
}
.protocol-index { padding-top: 4px; color: var(--cyan); font: 900 11px var(--mono); letter-spacing: .12em; }
.protocol-line { position: relative; width: 1px; height: 100%; background: linear-gradient(var(--cyan), rgba(0, 237, 255, .06)); }
.protocol-line::before { content: ""; position: absolute; top: 4px; left: 50%; width: 9px; aspect-ratio: 1; translate: -50%; rotate: 45deg; border: 1px solid var(--cyan); background: var(--void); box-shadow: 0 0 13px rgba(0, 237, 255, .5); }
.protocol-item:last-child .protocol-line { background: linear-gradient(var(--pink), transparent); }
.protocol-item:last-child .protocol-line::before { border-color: var(--pink); box-shadow: 0 0 13px var(--pink); }
.protocol-item h3 { margin: 0; font-size: clamp(23px, 2.2vw, 34px); letter-spacing: -.035em; }
.protocol-item p { max-width: 490px; margin: 12px 0 0; color: var(--soft); }

.showcase {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  padding: 80px var(--gutter) 190px;
}
.showcase::before { content: ""; position: absolute; z-index: -1; inset: 12% 0 8%; background: radial-gradient(circle at 52% 48%, rgba(108, 25, 210, .18), transparent 52%); }
.showcase-copy { max-width: 780px; margin-left: min(8vw, 130px); }
.showcase-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 50px); align-items: start; margin-top: 95px; }
.screen-panel { margin: 0; }
.screen-panel:nth-child(2) { margin-top: 120px; }
.screen-panel:nth-child(3) { margin-top: 35px; }
.screen-meta { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--muted); font: 800 8px var(--mono); letter-spacing: .17em; }
.screen-meta small { color: var(--pink); }
.phone-flat { border-radius: clamp(28px, 3vw, 48px); box-shadow: 0 42px 95px rgba(0, 0, 0, .65), 0 0 60px rgba(113, 28, 230, .16); }

.multiplayer {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 900px;
  grid-template-columns: minmax(360px, .92fr) minmax(460px, 1.08fr);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
  overflow: hidden;
  padding: clamp(110px, 12vw, 190px) var(--gutter);
  border-block: 1px solid var(--line);
  background: #05070b;
}
.multiplayer-grid { opacity: .32; mask-image: linear-gradient(90deg, transparent 20%, black); }
.multiplayer-copy { max-width: 680px; justify-self: end; }
.feature-ledger { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature-ledger li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.feature-ledger li > span { padding-top: 3px; color: var(--pink); font: 850 9px var(--mono); }
.feature-ledger div { display: grid; gap: 3px; }
.feature-ledger strong { font-size: 15px; letter-spacing: -.01em; }
.feature-ledger small { color: var(--muted); font-size: 13px; }

.network-visual { position: relative; width: min(100%, 720px); aspect-ratio: 1; justify-self: start; }
.network-lines { position: absolute; inset: 0; width: 100%; overflow: visible; fill: none; stroke: rgba(0, 237, 255, .18); stroke-width: 1; filter: drop-shadow(0 0 8px rgba(0, 237, 255, .15)); }
.network-lines path { stroke-dasharray: 4 10; }
.network-core,
.network-avatar { position: absolute; display: grid; place-items: center; border: 1px solid rgba(0, 237, 255, .45); background: rgba(4, 12, 18, .86); backdrop-filter: blur(12px); }
.network-core { top: 50%; left: 50%; width: 33%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 80px rgba(0, 237, 255, .15), inset 0 0 50px rgba(0, 237, 255, .04); }
.network-core::before { content: ""; position: absolute; inset: -13%; border: 1px dashed rgba(132, 40, 255, .45); border-radius: 50%; animation: orbit 22s linear infinite; }
.network-core small { color: var(--cyan); font: 800 7px var(--mono); letter-spacing: .2em; }
.network-core strong { font: 950 clamp(25px, 3vw, 47px)/1 var(--mono); letter-spacing: -.06em; }
.network-core span { color: var(--green); font: 800 7px var(--mono); letter-spacing: .16em; }
.network-avatar { width: 76px; aspect-ratio: 1; border-radius: 18px; color: #fff; font: 950 24px var(--mono); box-shadow: 0 0 30px rgba(0, 237, 255, .13); }
.network-avatar small { position: absolute; top: calc(100% + 9px); color: var(--muted); font: 750 7px var(--mono); letter-spacing: .16em; }
.avatar-a { top: 15%; left: 17%; border-color: var(--orange); color: var(--orange); }
.avatar-m { top: 14%; right: 15%; }
.avatar-t { bottom: 13%; left: 19%; border-color: var(--purple); color: #ca8aff; }
.avatar-j { right: 16%; bottom: 14%; border-color: var(--green); color: var(--green); }

.threats { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(55px, 10vw, 165px); }
.threat-heading { align-self: center; }
.threat-spectrum { border-top: 1px solid var(--line); }
.threat-level {
  position: relative;
  display: grid;
  grid-template-columns: 42px 150px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 27px 5px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.threat-level::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent, var(--tone)); transition: opacity .25s ease; }
.threat-level:hover::before { opacity: .1; }
.threat-level > * { position: relative; }
.threat-level > span { color: var(--muted); font: 800 9px var(--mono); }
.threat-level strong { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.04em; }
.threat-level p { margin: 0; color: var(--soft); }
.threat-nice { --tone: var(--green); }
.threat-mild { --tone: var(--cyan); }
.threat-spicy { --tone: var(--orange); }
.threat-insane { --tone: var(--red); }
.threat-nice strong { color: var(--green); }
.threat-mild strong { color: var(--cyan); }
.threat-spicy strong { color: var(--orange); }
.threat-insane strong { color: var(--red); }

.upgrades {
  display: grid;
  min-height: 1000px;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(60px, 10vw, 170px);
  overflow: hidden;
  padding: clamp(110px, 12vw, 190px) var(--gutter);
  background:
    radial-gradient(circle at 24% 52%, rgba(132, 40, 255, .23), transparent 34%),
    #07060d;
}
.upgrades-art { position: relative; width: min(100%, 780px); height: 720px; justify-self: end; }
.phone-market,
.phone-pro { position: absolute; width: 45%; border-radius: 38px; }
.phone-market { z-index: 2; top: 0; right: 10%; rotate: 6deg; }
.phone-pro { z-index: 1; bottom: 0; left: 10%; rotate: -9deg; filter: saturate(.92) brightness(.75); }
.upgrades-copy { max-width: 650px; }
.upgrade-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 46px; border-block: 1px solid var(--line); background: var(--line); }
.upgrade-stats div { display: grid; gap: 2px; padding: 20px 14px; background: #07060d; }
.upgrade-stats strong { color: var(--cyan); font: 950 28px var(--mono); }
.upgrade-stats span { color: var(--muted); font: 750 8px var(--mono); letter-spacing: .11em; text-transform: uppercase; }

.safety {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(60px, 11vw, 180px);
  max-width: var(--content);
  margin-inline: auto;
  padding: clamp(110px, 13vw, 210px) var(--gutter);
}
.safety-copy { align-self: center; }
.inline-link { display: inline-flex; gap: 15px; margin-top: 34px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 237, 255, .55); color: var(--cyan); font: 850 10px var(--mono); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.safety-manifest { border-top: 1px solid var(--line); }
.safety-manifest p { display: grid; grid-template-columns: 40px minmax(190px, .75fr) 1fr; gap: 18px; align-items: baseline; margin: 0; padding: 26px 0; border-bottom: 1px solid var(--line); }
.safety-manifest p > span { color: var(--green); font: 850 9px var(--mono); }
.safety-manifest strong { font-size: 18px; }
.safety-manifest small { color: var(--muted); font-size: 13px; }

.faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(55px, 10vw, 165px); padding-top: 90px; }
.faq-heading { padding-top: 10px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: clamp(17px, 1.7vw, 23px); font-weight: 740; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq summary i::before,
.faq summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; translate: -50% -50%; background: var(--cyan); transition: rotate .25s var(--ease); }
.faq summary i::after { rotate: 90deg; }
.faq details[open] summary i::after { rotate: 0deg; }
.faq details p { max-width: 700px; margin: -8px 0 28px; color: var(--soft); }

.launch {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(900px, 100svh);
  place-items: center;
  overflow: hidden;
  padding: 130px var(--gutter);
  text-align: center;
  background: radial-gradient(circle at center, rgba(108, 25, 210, .24), transparent 48%), #030207;
}
.launch-grid { opacity: .3; mask-image: radial-gradient(circle, #000 5%, transparent 72%); }
.launch-lock { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(72vw, 800px); aspect-ratio: 1; translate: -50% -50%; }
.launch-lock span,
.launch-lock i,
.launch-lock b { position: absolute; inset: 0; border: 1px solid rgba(0, 237, 255, .13); border-radius: 50%; animation: orbit 30s linear infinite; }
.launch-lock span::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.launch-lock i { inset: 16%; border-color: rgba(255, 10, 147, .2); animation-direction: reverse; animation-duration: 22s; }
.launch-lock b { inset: 32%; border-style: dashed; border-color: rgba(132, 40, 255, .35); animation-duration: 16s; }
.launch-copy { display: grid; justify-items: center; }
.launch h2 { margin-top: 24px; font-size: clamp(58px, 9vw, 148px); }
.launch-copy > p:not(.eyebrow) { margin: 30px 0 32px; color: var(--soft); font-size: 18px; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 65px;
  padding: 64px var(--gutter) 36px;
  border-top: 1px solid var(--line);
  background: #020105;
}
.footer-brand p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 11px 34px; align-content: start; }
.site-footer nav a { color: var(--soft); font: 700 11px var(--mono); letter-spacing: .05em; text-decoration: none; }
.site-footer nav a:hover { color: var(--cyan); }
.footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 26px; border-top: 1px solid var(--line); color: var(--faint); font: 750 8px var(--mono); letter-spacing: .13em; text-transform: uppercase; }

.reveal { opacity: 0; translate: 0 34px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.reveal.is-visible { opacity: 1; translate: 0; }

/* Legal, support, and App Store metadata pages */
.content-page {
  background:
    radial-gradient(circle at 77% 5%, rgba(117, 29, 222, .13), transparent 30%),
    var(--void);
}
.legal-main { min-height: 82vh; max-width: var(--content); margin-inline: auto; padding: calc(var(--header) + 65px) var(--gutter) 140px; }
.legal-breadcrumb { display: inline-flex; padding: 8px 0; color: var(--muted); font: 800 9px var(--mono); letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.legal-breadcrumb:hover { color: var(--cyan); }
.legal-hero { position: relative; padding: 64px 0 72px; border-bottom: 1px solid var(--line); }
.legal-hero::after { content: ""; position: absolute; right: 0; bottom: -1px; width: min(32vw, 440px); height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 12px rgba(0, 237, 255, .35); }
.legal-hero h1 { margin-top: 19px; font-size: clamp(55px, 8vw, 118px); }
.legal-hero > p:last-child { margin: 24px 0 0; color: var(--muted); font: 800 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.legal-content { display: grid; grid-template-columns: minmax(190px, .29fr) minmax(0, .71fr); gap: clamp(50px, 10vw, 155px); padding-top: 70px; }
.legal-aside { align-self: stretch; }
.legal-aside nav { position: sticky; top: calc(var(--header) + 30px); display: grid; border-top: 1px solid var(--line); }
.legal-aside a { padding: 13px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font: 760 9px var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.legal-aside a:hover,
.legal-aside a[aria-current="page"] { color: var(--cyan); }
.legal-aside a[aria-current="page"]::before { content: "◆"; margin-right: 9px; color: var(--pink); font-size: 6px; }
.legal-body { max-width: 880px; color: var(--soft); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; }
.legal-body h2 { margin: 54px 0 15px; padding-top: 4px; color: #fff; font-size: clamp(23px, 2.2vw, 33px); line-height: 1.16; letter-spacing: -.035em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: 32px 0 10px; color: #fff; font-size: 19px; }
.legal-body p { margin: 0 0 18px; }
.legal-body ul,
.legal-body ol { margin: 8px 0 25px; padding-left: 22px; }
.legal-body li { margin: 8px 0; padding-left: 7px; }
.legal-body li::marker { color: var(--cyan); }
.legal-body a { color: var(--cyan-soft); text-underline-offset: 4px; text-decoration-color: rgba(0, 237, 255, .35); }
.legal-body a:hover { text-decoration-color: var(--cyan); }
.legal-body strong { color: #fff; }
.legal-body blockquote { margin: 28px 0; padding: 18px 22px; border-left: 1px solid var(--cyan); background: rgba(0, 237, 255, .045); }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 35px 0; border: 1px solid var(--line); background: var(--line); }
.support-card { padding: 25px; background: var(--void-2); }
.support-card h2,
.support-card h3 { margin-top: 0; }

.error-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 70px var(--gutter);
  background:
    radial-gradient(circle at 50% 45%, rgba(111, 26, 219, .24), transparent 38%),
    var(--void);
}
.error-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(0, 237, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 237, 255, .13) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle, #000, transparent 68%);
}
.error-orbit { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(78vw, 820px); aspect-ratio: 1; translate: -50% -50%; }
.error-orbit span,
.error-orbit i,
.error-orbit b { position: absolute; inset: 0; border: 1px solid rgba(0, 237, 255, .14); border-radius: 50%; animation: orbit 30s linear infinite; }
.error-orbit span::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--pink); box-shadow: 0 0 15px var(--pink); }
.error-orbit i { inset: 17%; border-color: rgba(255, 10, 147, .22); animation-direction: reverse; animation-duration: 22s; }
.error-orbit b { inset: 34%; border-style: dashed; border-color: rgba(132, 40, 255, .42); animation-duration: 17s; }
.error-copy { display: grid; max-width: 850px; justify-items: center; text-align: center; }
.error-copy .brand { margin-bottom: clamp(60px, 10vh, 110px); }
.error-copy h1 { margin: 25px 0 0; font-size: clamp(74px, 13vw, 190px); font-weight: 960; letter-spacing: -.08em; line-height: .8; }
.error-copy > p:not(.eyebrow) { max-width: 570px; margin: 36px 0 32px; color: var(--soft); font-size: clamp(16px, 1.5vw, 20px); }

@media (max-width: 1180px) {
  :root { --header: 76px; }
  .hero-copy { width: 55vw; }
  .hero-art { right: 3vw; width: 32vw; }
  .hero h1 { font-size: clamp(58px, 8.5vw, 106px); }
  .readout-top { right: -17%; }
  .readout-bottom { left: -18%; }
  .chapter-protocol,
  .threats,
  .faq,
  .safety { gap: 70px; }
  .multiplayer { grid-template-columns: .95fr 1.05fr; gap: 44px; }
  .network-avatar { width: 64px; border-radius: 15px; }
  .upgrades { gap: 55px; }
}

@media (max-width: 900px) {
  .menu-toggle {
    display: grid;
    width: 46px;
    height: 46px;
    place-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: white;
  }
  .menu-toggle i { display: block; width: 19px; height: 1px; background: currentColor; transition: translate .2s ease, rotate .2s ease; }
  .menu-toggle .menu-lines,
  .menu-toggle .menu-lines::after { display: block; width: 19px; height: 1px; background: currentColor; content: ""; transition: translate .2s ease, rotate .2s ease; }
  .menu-toggle .menu-lines::after { translate: 0 6px; }
  .menu-toggle[aria-expanded="true"] .menu-lines { translate: 0 3px; rotate: 45deg; }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { translate: 0; rotate: -90deg; }
  .menu-toggle[aria-expanded="true"] i:first-of-type { translate: 0 3.5px; rotate: 45deg; }
  .menu-toggle[aria-expanded="true"] i:last-of-type { translate: 0 -3.5px; rotate: -45deg; }
  .site-navigation {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    visibility: hidden;
    opacity: 0;
    background: rgba(3, 2, 7, .97);
    transition: opacity .24s ease, visibility .24s ease;
  }
  .site-navigation.is-open { visibility: visible; opacity: 1; }
  .site-navigation a { font-size: 15px; }
  .site-navigation .nav-cta { margin-top: 16px; }
  .hero { min-height: 1500px; }
  .hero::before { background: linear-gradient(var(--void) 0%, rgba(3, 2, 7, .86) 43%, transparent 70%); }
  .hero-copy { width: auto; min-height: auto; margin: 0; padding: 150px var(--gutter) 0; text-align: center; align-items: center; }
  .hero-lede { max-width: 640px; }
  .hero-specs { justify-content: center; }
  .hero-art { top: auto; right: auto; bottom: 100px; left: 50%; width: min(40vw, 350px); translate: -50% 0; }
  .hero h1 { font-size: clamp(60px, 12.5vw, 106px); }
  .readout-top { right: -32%; }
  .readout-bottom { left: -32%; }
  .chapter-protocol,
  .threats,
  .faq,
  .safety { grid-template-columns: 1fr; }
  .chapter-heading { position: static; }
  .protocol-flow { max-width: 720px; margin-left: auto; }
  .showcase-gallery { gap: 16px; }
  .screen-panel:nth-child(2) { margin-top: 75px; }
  .multiplayer { grid-template-columns: 1fr; }
  .multiplayer-copy { justify-self: start; }
  .network-visual { width: min(90vw, 650px); justify-self: center; }
  .threat-spectrum { max-width: 760px; margin-left: auto; }
  .upgrades { grid-template-columns: 1fr; }
  .upgrades-art { order: 2; width: min(88vw, 700px); justify-self: center; }
  .upgrades-copy { max-width: 720px; }
  .safety-manifest { max-width: 800px; margin-left: auto; }
  .faq-list { max-width: 800px; margin-left: auto; }
  .legal-content { grid-template-columns: 1fr; gap: 44px; }
  .legal-aside nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --header: 70px; }
  .brand-copy small { display: none; }
  .site-header { padding-inline: 18px; }
  .hero { min-height: 1320px; }
  .hero-copy { padding-top: 126px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: .17em; }
  .hero h1 { font-size: clamp(51px, 16vw, 78px); line-height: .91; }
  .hero-lede { margin-top: 25px; font-size: 16px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-specs { width: 100%; gap: 0; justify-content: space-between; margin-top: 38px; text-align: left; }
  .hero-specs dd { font-size: 11px; }
  .hero-art { bottom: 65px; width: min(62vw, 250px); }
  .hero-readout { min-width: 105px; padding: 8px 9px; }
  .hero-readout strong { font-size: 13px; }
  .readout-top { right: -33%; }
  .readout-bottom { left: -33%; }
  .scroll-marker { display: none; }
  .chapter,
  .threats,
  .faq,
  .safety { padding-block: 100px; }
  .chapter-heading h2,
  .showcase h2,
  .multiplayer h2,
  .threats h2,
  .upgrades h2,
  .safety h2,
  .faq h2 { font-size: clamp(46px, 14vw, 72px); }
  .protocol-item { grid-template-columns: 31px 1px 1fr; gap: 16px; min-height: 175px; }
  .protocol-item h3 { font-size: 22px; }
  .showcase { padding: 50px 20px 115px; }
  .showcase-copy { margin-left: 0; }
  .showcase-gallery { grid-template-columns: repeat(3, 72vw); gap: 18px; margin: 64px -20px 0; padding: 0 20px 25px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .showcase-gallery::-webkit-scrollbar { display: none; }
  .screen-panel { scroll-snap-align: center; }
  .screen-panel:nth-child(2),
  .screen-panel:nth-child(3) { margin-top: 0; }
  .multiplayer { min-height: 0; padding: 100px 20px; }
  .network-visual { width: 100%; }
  .network-avatar { width: 51px; border-radius: 13px; font-size: 18px; }
  .network-core { width: 38%; }
  .network-core strong { font-size: 23px; }
  .threat-level { grid-template-columns: 25px 92px 1fr; gap: 10px; padding: 22px 0; }
  .threat-level strong { font-size: 23px; }
  .threat-level p { font-size: 13px; }
  .upgrades { min-height: 0; padding: 100px 20px; }
  .upgrades-art { height: 480px; }
  .phone-market,
  .phone-pro { width: 53%; border-radius: 28px; }
  .phone-market { right: 4%; }
  .phone-pro { left: 4%; }
  .upgrade-stats { grid-template-columns: 1fr; }
  .upgrade-stats div { grid-template-columns: 50px 1fr; align-items: center; }
  .safety-manifest p { grid-template-columns: 29px 1fr; gap: 12px; }
  .safety-manifest small { grid-column: 2; }
  .launch { min-height: 720px; padding-inline: 20px; }
  .launch h2 { font-size: clamp(55px, 16vw, 84px); }
  .site-footer { grid-template-columns: 1fr; gap: 38px; padding: 50px 20px 28px; }
  .footer-meta { gap: 20px; }
  .footer-meta span:last-child { text-align: right; }
  .legal-main { padding: calc(var(--header) + 42px) 20px 100px; }
  .legal-hero { padding: 43px 0 50px; }
  .legal-hero h1 { font-size: clamp(48px, 15vw, 80px); }
  .legal-content { padding-top: 45px; }
  .legal-aside nav { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .error-copy .brand { margin-bottom: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-entrance],
  .phone-hero,
  .reveal { opacity: 1; translate: 0; transform: none; }
  .transmission-track { animation: none; }
}

@keyframes entrance { to { opacity: 1; translate: 0; } }
@keyframes acquire { to { opacity: 1; transform: perspective(1400px) rotateY(-5deg) rotateX(1deg); } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes pulse { 50% { opacity: .35; box-shadow: 0 0 4px var(--pink); } }
@keyframes scroll { 0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes marquee { to { translate: -50%; } }