@import url('data:text/css,');

:root {
  --ink: #030706;
  --ink-2: #07110f;
  --panel: rgba(9, 29, 25, .72);
  --mint: #39ed9a;
  --mint-2: #11b875;
  --ice: #f3f8f5;
  --teal: #064f43;
  --line: rgba(121, 255, 201, .24);
  --muted: #a3b9b0;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mono: "Courier New", Courier, monospace;
  --sans: Arial, Helvetica, sans-serif;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ice);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(45, 255, 165, .07), transparent 17rem),
    var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

body.booting { overflow: hidden; }
body.overdrive { --mint: #68ffc1; }

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { color: var(--ink); background: var(--mint); }

.noise {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: soft-light;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  z-index: 300;
  border: 1px solid var(--mint);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s, background .18s, opacity .2s;
  opacity: 0;
}
.cursor span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mint);
  transform: translate(-50%, -50%);
}
.cursor.is-visible { opacity: 1; }
.cursor.is-active { width: 56px; height: 56px; background: rgba(57, 237, 154, .13); }

.kicker {
  margin: 0 0 1rem;
  color: var(--mint);
  font: 700 .76rem/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.live-dot, .phone-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(57, 237, 154, .6);
  animation: ping 2s infinite;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: #020504;
  transition: opacity .7s ease, visibility .7s ease;
}
.boot.is-gone { opacity: 0; visibility: hidden; }
.boot__objects {
  position: absolute;
  inset: -12%;
  background: url('assets/pump-paid-objects.png') center / min(80vw, 1000px) no-repeat;
  opacity: .17;
  filter: blur(1px);
  animation: boot-float 9s ease-in-out infinite alternate;
}
.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 15%, #020504 68%);
}
.boot__card {
  position: relative;
  z-index: 1;
  width: min(92vw, 620px);
  padding: clamp(2rem, 7vw, 4.6rem);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 42px 12px 42px 12px;
  background: rgba(2, 10, 8, .87);
  box-shadow: 0 0 80px rgba(24, 220, 139, .1), inset 0 0 70px rgba(24, 220, 139, .04);
}
.boot__card > img { margin: 0 auto 1.4rem; filter: drop-shadow(0 0 22px rgba(57, 237, 154, .45)); }
.boot__card h1 {
  max-width: 500px;
  margin: 0 auto 1rem;
  font: 400 clamp(3.3rem, 10vw, 6.7rem)/.83 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.boot__card > p:not(.kicker) { max-width: 410px; margin: 0 auto 1.7rem; color: var(--muted); }
.boot__card small { display: block; margin-top: 1.2rem; color: #648277; font: 700 .68rem var(--mono); letter-spacing: .12em; }

.magnetic-button, .buy-button, .terminal-buy, .terminal-x {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 54px;
  padding: .9rem 1.15rem .9rem 1.35rem;
  border: 1px solid var(--mint);
  border-radius: 999px;
  color: var(--ink);
  background: var(--mint);
  font: 800 .78rem var(--mono);
  letter-spacing: .08em;
  box-shadow: 0 0 0 rgba(57, 237, 154, 0);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s;
}
.magnetic-button i, .buy-button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--mint);
  font-style: normal;
}
.magnetic-button:hover, .buy-button:hover, .terminal-buy:hover { box-shadow: 0 0 36px rgba(57, 237, 154, .34); transform: translateY(-3px); }
.ghost-button {
  min-height: 54px;
  padding: .9rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ice);
  background: rgba(3, 12, 10, .55);
  font: 700 .74rem var(--mono);
  letter-spacing: .07em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color .2s, transform .2s;
}
.ghost-button:hover { border-color: var(--mint); transform: translateY(-2px); }

.transition-wipe {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  background: var(--mint);
  transform: translateY(105%);
}
.transition-wipe.is-wiping { animation: wipe .75s cubic-bezier(.76, 0, .24, 1); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2.2vw;
  border-bottom: 1px solid transparent;
  transition: padding .3s, background .3s, border-color .3s;
}
.site-header.is-scrolled {
  padding-top: .6rem;
  padding-bottom: .6rem;
  background: rgba(3, 9, 8, .82);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; width: max-content; align-items: center; gap: .7rem; font: 900 .86rem/1 var(--mono); letter-spacing: .05em; }
.brand img { border-radius: 11px; }
.brand span { display: flex; flex-direction: column; gap: .25rem; }
.brand small { color: var(--mint); font-size: .58rem; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.desktop-nav a { position: relative; color: #b9cbc4; font: 700 .7rem var(--mono); letter-spacing: .08em; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -.45rem; width: 0; height: 1px; background: var(--mint); transition: width .25s; }
.desktop-nav a:hover::after { width: 100%; }
.header-actions { justify-self: end; display: flex; gap: .55rem; }
.icon-button { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 25, 21, .66); transition: border-color .2s, transform .2s; }
.icon-button:hover { border-color: var(--mint); transform: rotate(-8deg); }
.buy-button { min-height: 45px; padding: .5rem .55rem .5rem 1rem; gap: 1rem; }
.buy-button span { width: 30px; height: 30px; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 8.5rem 4vw 6.5rem;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr) 255px;
  align-items: center;
  gap: clamp(1rem, 3vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(56, 237, 154, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 237, 154, .04) 1px, transparent 1px),
    radial-gradient(circle at 64% 46%, rgba(22, 194, 122, .18), transparent 32%),
    #030706;
  background-size: 72px 72px, 72px 72px, auto, auto;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(3,7,6,.95) 8%, transparent 48%, rgba(3,7,6,.78) 91%);
}
.object-field { position: absolute; pointer-events: none; background: url('assets/pump-paid-objects.png') center / contain no-repeat; }
.object-field--hero { z-index: -1; width: min(80vw, 1050px); aspect-ratio: 1; right: -26vw; top: -20vw; opacity: .11; transform: rotate(17deg); filter: blur(.2px); }
.object-field--story { width: 760px; aspect-ratio: 1; left: -430px; top: 26%; opacity: .08; transform: rotate(-20deg); }
.radar { position: absolute; z-index: -1; width: 720px; height: 720px; left: 53%; top: 51%; transform: translate(-50%, -50%); border: 1px solid rgba(57,237,154,.08); border-radius: 50%; }
.radar i { position: absolute; inset: 12%; border: 1px dashed rgba(57,237,154,.09); border-radius: inherit; }
.radar i:nth-child(2) { inset: 25%; }
.radar i:nth-child(3) { inset: 39%; background: radial-gradient(circle, rgba(57,237,154,.13), transparent 70%); }

.hero__copy { position: relative; z-index: 3; max-width: 650px; }
.hero__copy h1 { margin: 0; text-transform: uppercase; }
.hero__small { display: block; margin-bottom: .35rem; color: #b8c9c2; font: 700 clamp(.8rem, 1.2vw, 1.1rem)/1 var(--mono); letter-spacing: .21em; }
.hero__big { display: block; font: 400 clamp(5.3rem, 10.5vw, 11rem)/.76 var(--display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff 8%, #b8d9ce 48%, var(--mint) 49%, #10a56b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 0 #063b32); }
.hero__lead { max-width: 570px; margin: 2rem 0; color: #b6c8c1; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; color: #6f8c81; font: 700 .66rem var(--mono); letter-spacing: .05em; }
.hero__meta b { color: var(--mint); margin-right: .35rem; }

.hero__visual { position: relative; align-self: end; min-height: min(76vh, 790px); display: grid; place-items: end center; transform-style: preserve-3d; }
.hero__character { position: relative; z-index: 2; width: min(100%, 535px); max-height: 82vh; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 28px 38px rgba(0,0,0,.74)) drop-shadow(0 0 25px rgba(57,237,154,.18)); transform: translateZ(34px); animation: character-breathe 4.5s ease-in-out infinite; }
.halo-copy { position: absolute; z-index: -1; top: 38%; left: 50%; width: 470px; color: rgba(57,237,154,.17); font: 900 4.2rem/1 var(--display); letter-spacing: -.03em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.character-tag { position: absolute; z-index: 8; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ice); background: rgba(4,18,15,.76); font: 700 .62rem var(--mono); letter-spacing: .07em; cursor: pointer; backdrop-filter: blur(10px); transition: border-color .2s, transform .2s; }
.character-tag span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--ink); background: var(--mint); font-size: .8rem; }
.character-tag:hover { border-color: var(--mint); transform: scale(1.05); }
.tag--headphones { top: 22%; left: -4%; }
.tag--earring { top: 38%; right: -7%; }
.tag--beanie { top: 7%; right: 4%; }
.clue-popover { position: absolute; z-index: 9; right: 2%; bottom: 10%; width: 230px; min-height: 0; padding: 0 1rem; overflow: hidden; border: 1px solid transparent; border-radius: 16px 4px 16px 4px; color: #b9ccc4; background: rgba(4, 18, 15, .93); font: .78rem/1.45 var(--mono); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s, padding .25s, border-color .25s; }
.clue-popover.is-open { padding: 1rem; border-color: var(--line); opacity: 1; transform: translateY(0); }

.pump-console { align-self: center; padding: 1.15rem; border: 1px solid var(--line); border-radius: 28px 8px 28px 8px; background: rgba(6, 24, 20, .72); box-shadow: inset 0 0 32px rgba(56,237,154,.03); backdrop-filter: blur(15px); }
.console__label { display: flex; justify-content: space-between; padding-bottom: .75rem; color: #7f998f; font: 700 .65rem var(--mono); letter-spacing: .09em; }
.console__label output { color: var(--mint); }
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.meter i { height: 39px; border-radius: 3px; background: rgba(57,237,154,.09); box-shadow: inset 0 0 0 1px rgba(57,237,154,.06); transition: background .15s, box-shadow .15s, transform .15s; }
.meter i.is-on { background: var(--mint); box-shadow: 0 0 13px rgba(57,237,154,.52); transform: scaleY(1.07); }
.pump-console > p { min-height: 38px; margin: .9rem 0; color: #92aaa1; font: .7rem/1.35 var(--mono); }
.pump-hold { position: relative; width: 100%; min-height: 112px; padding: 1rem; border: 1px solid var(--mint); border-radius: 17px 5px 17px 5px; color: var(--mint); background: rgba(1, 12, 9, .8); font: 800 .7rem var(--mono); letter-spacing: .08em; cursor: pointer; overflow: hidden; transition: color .2s, box-shadow .2s; }
.pump-hold::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 0%); background: var(--mint); transition: height .08s linear; }
.pump-hold > span { position: relative; z-index: 1; display: block; }
.pump-hold__icon { margin-bottom: .5rem; font: 400 2.7rem/.8 var(--display); }
.pump-hold.is-held { color: var(--ink); box-shadow: 0 0 34px rgba(57,237,154,.3); }
.sound-toggle { width: 100%; margin-top: .6rem; padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #789187; background: transparent; font: 700 .65rem var(--mono); letter-spacing: .06em; cursor: pointer; }
.sound-toggle[aria-pressed="true"] { color: var(--mint); border-color: var(--line); }
.scroll-cue { position: absolute; left: 4vw; bottom: 2.2rem; display: flex; align-items: center; gap: 1rem; color: #638076; font: 700 .64rem var(--mono); letter-spacing: .12em; }
.scroll-cue i { color: var(--mint); font-style: normal; animation: bob 1.3s ease-in-out infinite; }

.ticker { position: relative; z-index: 5; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mint); color: var(--ink); transform: rotate(-1.1deg) scale(1.02); }
.ticker div { width: max-content; padding: .8rem 0; font: 900 .78rem var(--mono); letter-spacing: .12em; white-space: nowrap; animation: ticker 28s linear infinite; }

.section { position: relative; padding: clamp(6rem, 11vw, 10rem) 5vw; overflow: hidden; }
.section-heading { position: relative; z-index: 2; max-width: 780px; margin-bottom: clamp(3rem, 7vw, 6rem); }
.section-heading h2, .drift__copy h2, .terminal__copy h2 { margin: 0; font: 400 clamp(4.2rem, 9.5vw, 9rem)/.84 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.section-heading h2 em, .terminal__copy h2 em { color: var(--mint); font-style: normal; }
.section-heading > p:last-child { max-width: 540px; color: var(--muted); }
.section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading--center > p:last-child { margin-left: auto; margin-right: auto; }

.story {
  background:
    radial-gradient(circle at 90% 30%, rgba(57,237,154,.12), transparent 23%),
    linear-gradient(145deg, #06120f 0%, #020504 60%);
}
.story::after { content: "ARCHIVE / 77"; position: absolute; right: -1rem; top: 10rem; color: rgba(255,255,255,.022); font: 400 13vw/.7 var(--display); writing-mode: vertical-rl; }
.origin-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; max-width: 1180px; margin: 0 auto clamp(7rem, 13vw, 12rem); }
.origin-card { position: relative; margin: 0; padding: 1rem; border: 1px solid rgba(255,255,255,.18); background: #d9e0dc; transform: rotate(-2.5deg); box-shadow: 28px 28px 0 rgba(57,237,154,.08); }
.origin-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.origin-card figcaption { padding: .8rem .2rem .15rem; color: #18231f; font: 800 .71rem var(--mono); letter-spacing: .11em; text-align: center; }
.origin-card__tape { position: absolute; z-index: 2; left: 50%; top: -17px; padding: .5rem 2rem; color: #05110d; background: rgba(57,237,154,.9); font: 700 .66rem var(--mono); letter-spacing: .08em; transform: translateX(-50%) rotate(1deg); }
.story-copy { color: #afc1ba; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.story-copy p { margin: 0 0 1.4rem; }
.story-copy__dropcap::first-letter { float: left; margin: -.14rem .55rem 0 0; color: var(--mint); font: 400 5.5rem/.9 var(--display); }
.story-copy em { color: var(--ice); }
.story-copy blockquote { margin: 2rem 0; color: var(--ice); font: 400 clamp(3rem, 6vw, 5.8rem)/.8 var(--display); letter-spacing: -.03em; }

.anatomy { position: relative; z-index: 2; max-width: 1280px; margin: auto; padding: clamp(1.2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 42px 10px 42px 10px; background: rgba(5, 19, 16, .8); }
.anatomy__header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; }
.anatomy__header h3 { margin: 0; font: 400 clamp(2.7rem, 6vw, 5.6rem)/.9 var(--display); text-transform: uppercase; }
.memory-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.memory-tab { min-height: 72px; padding: .85rem; border: 0; border-right: 1px solid var(--line); color: #6f8c81; background: transparent; font: 700 .69rem var(--mono); letter-spacing: .05em; cursor: pointer; transition: color .2s, background .2s; }
.memory-tab:last-child { border-right: 0; }
.memory-tab span { display: block; margin-bottom: .25rem; color: var(--mint); }
.memory-tab:hover, .memory-tab.is-active { color: var(--ice); background: rgba(57,237,154,.08); }
.memory-stage { position: relative; min-height: 350px; display: grid; grid-template-columns: .25fr 1.15fr .6fr; align-items: center; gap: 2rem; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; }
.memory-stage__number { align-self: start; margin: 0; color: var(--mint); font: 400 clamp(4rem, 9vw, 8rem)/1 var(--display); opacity: .45; }
.memory-stage h4 { max-width: 750px; margin: 0 0 1.1rem; font: 400 clamp(2rem, 4vw, 4.4rem)/.94 var(--display); text-transform: uppercase; }
.memory-stage__body { max-width: 650px; margin: 0; color: var(--muted); }
.memory-stage__glyph { justify-self: end; color: var(--mint); font: 400 clamp(8rem, 17vw, 16rem)/.7 var(--display); text-shadow: 0 0 70px rgba(57,237,154,.35); transform: rotate(-8deg); }
.memory-stage.is-changing > * { animation: memory-flash .48s ease; }

.drift { min-height: 100svh; display: grid; grid-template-columns: .52fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 7rem); background: #020504; }
.drift__copy { position: relative; z-index: 3; }
.drift__copy h2 { font-size: clamp(4rem, 8vw, 7.6rem); }
.drift__copy > p:last-child { max-width: 430px; color: var(--muted); }
.magnet-board { position: relative; min-height: min(74vw, 760px); border: 1px solid var(--line); border-radius: 50%; outline: none; background: radial-gradient(circle at 50% 50%, #07291f 0%, #03100d 44%, #010302 68%); overflow: hidden; box-shadow: inset 0 0 80px #000, 0 0 0 22px rgba(57,237,154,.018); }
.magnet-board::before, .magnet-board::after { content: ""; position: absolute; z-index: 1; inset: 15%; border: 1px dashed rgba(57,237,154,.12); border-radius: 50%; animation: rotate 22s linear infinite; }
.magnet-board::after { inset: 35%; animation-direction: reverse; animation-duration: 14s; }
.magnet-board img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: saturate(.72) brightness(.7); transition: filter .3s; }
.magnet-board:hover img, .magnet-board:focus img { filter: saturate(1.15) brightness(1); }
.magnet-light { position: absolute; z-index: 3; left: var(--bx, 50%); top: var(--by, 50%); width: 210px; height: 210px; border: 1px solid rgba(57,237,154,.28); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(57,237,154,.26), rgba(57,237,154,.08) 45%, transparent 70%); mix-blend-mode: screen; transform: translate(-50%, -50%); transition: left .08s, top .08s; }
.magnet-readout { position: absolute; z-index: 5; left: 8%; bottom: 13%; display: flex; flex-direction: column; color: #718a80; font: 700 .63rem var(--mono); letter-spacing: .08em; }
.magnet-readout b { color: var(--mint); font: 400 2.7rem var(--display); }
.phone-call { position: absolute; z-index: 6; right: 8%; bottom: 13%; width: 104px; height: 104px; border: 1px solid var(--mint); border-radius: 50%; color: var(--ink); background: var(--mint); font: 800 .64rem/1.2 var(--mono); cursor: pointer; box-shadow: 0 0 0 0 rgba(57,237,154,.35); animation: call-pulse 2s infinite; }

.route { min-height: 110svh; background: radial-gradient(circle at 50% 62%, rgba(57,237,154,.11), transparent 36%), #06100e; }
.route-machine { --phase: 0deg; position: relative; width: min(89vw, 910px); aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(57,237,154,.2); border-radius: 50%; background: radial-gradient(circle, #0a2a21 0%, #071813 24%, #030806 60%, #020403 100%); box-shadow: 0 0 0 18px rgba(57,237,154,.016), 0 0 130px rgba(0,0,0,.55), inset 0 0 110px rgba(0,0,0,.8); }
.route-machine::before { content: "NIGHT ROUTE / 77"; position: absolute; z-index: 3; left: 50%; top: 3.3%; color: var(--mint); font: 700 .65rem var(--mono); letter-spacing: .2em; transform: translateX(-50%); }
.route-orbits, .route-orbits i { position: absolute; inset: 10%; border: 1px solid rgba(57,237,154,.1); border-radius: 50%; }
.route-orbits { inset: 5%; border-style: dashed; transform: rotate(var(--phase)); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.route-orbits i:nth-child(1) { inset: 9%; border-style: dashed; }
.route-orbits i:nth-child(2) { inset: 23%; }
.route-orbits i:nth-child(3) { inset: 37%; border-style: dotted; }
.route-orbits i:nth-child(4) { inset: 48%; background: var(--mint); box-shadow: 0 0 30px var(--mint); }
.route-sweep { position: absolute; z-index: 1; left: 50%; bottom: 50%; width: 2px; height: 45%; transform-origin: bottom center; background: linear-gradient(transparent, var(--mint)); opacity: .35; animation: sweep 6s linear infinite; }
.route-node { position: absolute; z-index: 8; width: 88px; height: 88px; border: 1px solid var(--line); border-radius: 50%; color: #789086; background: #07110e; box-shadow: 0 0 0 9px rgba(57,237,154,.025); cursor: pointer; transition: color .2s, background .2s, transform .2s, box-shadow .2s; }
.route-node span { display: block; color: var(--mint); font: 700 .61rem var(--mono); }
.route-node b { font: 400 1.15rem var(--display); letter-spacing: .03em; }
.route-node:hover, .route-node.is-active { color: var(--ink); background: var(--mint); box-shadow: 0 0 34px rgba(57,237,154,.42), 0 0 0 9px rgba(57,237,154,.08); transform: scale(1.09); }
.route-node:hover span, .route-node.is-active span { color: var(--teal); }
.route-node--1 { left: 50%; top: -2%; transform: translateX(-50%); }
.route-node--1:hover, .route-node--1.is-active { transform: translateX(-50%) scale(1.09); }
.route-node--2 { right: 3%; top: 27%; }
.route-node--3 { right: 17%; bottom: 7%; }
.route-node--4 { left: 17%; bottom: 7%; }
.route-node--5 { left: 3%; top: 27%; }
.route-core { position: absolute; z-index: 4; inset: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(4, 14, 11, .88); box-shadow: 0 0 65px rgba(57,237,154,.1), inset 0 0 45px rgba(57,237,154,.04); }
.route-core__time { margin: 0 0 .25rem; color: var(--mint); font: 400 clamp(2rem, 4vw, 3.6rem)/1 var(--display); }
.route-core h3 { max-width: 380px; margin: .3rem 0 .85rem; font: 400 clamp(1.9rem, 4vw, 3.6rem)/.9 var(--display); text-transform: uppercase; }
.route-core > p:not(.kicker):not(.route-core__time) { max-width: 390px; margin: 0; color: var(--muted); font-size: clamp(.8rem, 1.2vw, 1rem); }
.route-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.route-controls button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--mint); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.route-controls button:hover { color: var(--ink); background: var(--mint); }
.route-controls span { color: #6c857b; font: 700 .66rem var(--mono); }
.route-core.is-changing > * { animation: memory-flash .45s ease; }

.terminal { background: linear-gradient(180deg, #020504 0%, #061813 100%); }
.terminal__inner { position: relative; max-width: 1280px; min-height: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); padding: clamp(2rem, 6vw, 6rem); border: 1px solid var(--line); border-radius: 60px 14px 60px 14px; overflow: hidden; background: url('assets/pump-paid-objects.png') 116% 130% / 550px no-repeat, radial-gradient(circle at 15% 20%, rgba(57,237,154,.13), transparent 42%), rgba(4,16,13,.84); }
.terminal__inner::after { content: "77"; position: absolute; left: 2%; bottom: -12%; color: rgba(57,237,154,.035); font: 400 24rem/.7 var(--display); }
.terminal__copy { position: relative; z-index: 2; }
.terminal__copy h2 { font-size: clamp(4rem, 8vw, 8.4rem); }
.terminal__copy > p:not(.kicker) { max-width: 610px; color: var(--muted); }
.terminal__actions { display: grid; gap: .7rem; max-width: 510px; margin-top: 2rem; }
.terminal-buy, .terminal-x { min-height: 64px; padding: 1rem 1.1rem 1rem 1.5rem; }
.terminal-buy b, .terminal-x b { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: var(--mint); background: var(--ink); }
.terminal-x { color: var(--ice); border-color: var(--line); background: rgba(5,18,15,.8); }
.terminal-x b { color: var(--ink); background: var(--ice); }
.terminal-x:hover { border-color: var(--mint); transform: translateY(-3px); }

.receipt-machine { position: relative; z-index: 3; justify-self: center; width: min(100%, 360px); padding: 1.3rem 1.3rem 2rem; border: 1px solid var(--line); border-radius: 32px 8px 32px 8px; background: #07110f; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.receipt-machine__slot { height: 16px; margin-bottom: -8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: #010302; box-shadow: inset 0 2px 5px #000; }
.receipt { position: relative; z-index: 2; margin: 0 auto 1.2rem; padding: 2rem 1.6rem 1.4rem; color: #0b1713; background: #ecf5ef; font: .72rem/1.35 var(--mono); transform-origin: top center; box-shadow: 0 16px 28px rgba(0,0,0,.25); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px; background: linear-gradient(135deg, transparent 5px, #ecf5ef 0) 0 0/10px 10px repeat-x; }
.receipt > p:first-child { margin: 0; text-align: center; letter-spacing: .22em; }
.receipt h3 { margin: .2rem 0 1.5rem; text-align: center; font: 400 2.8rem/.9 var(--display); }
.receipt > div:not(.barcode) { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed rgba(3,12,9,.22); }
.receipt__quote { margin: 1.4rem 0; text-align: center; font-weight: 700; }
.barcode { height: 42px; margin: 1rem 0 .2rem; background: repeating-linear-gradient(90deg, #08110e 0 2px, transparent 2px 5px, #08110e 5px 9px, transparent 9px 11px); }
.receipt.is-printing { animation: print .85s cubic-bezier(.2,.9,.25,1); }
.receipt-machine button { width: 100%; min-height: 48px; border: 1px solid var(--mint); border-radius: 999px; color: var(--mint); background: transparent; font: 700 .66rem var(--mono); letter-spacing: .07em; cursor: pointer; transition: background .2s, color .2s; }
.receipt-machine button:hover { color: var(--ink); background: var(--mint); }

footer { min-height: 190px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 3rem 4vw 5.5rem; border-top: 1px solid var(--line); background: #020504; }
.footer__brand { display: flex; align-items: center; gap: .8rem; font: 900 .9rem var(--mono); }
.footer__brand span { display: flex; flex-direction: column; gap: .25rem; }
.footer__brand small { color: var(--mint); font-size: .62rem; }
footer > p { color: #657e74; font: 700 .66rem var(--mono); letter-spacing: .11em; }
footer > a { justify-self: end; color: var(--mint); font: 700 .7rem var(--mono); }

.mobile-dock { display: none; }
.lost-phone { width: min(92vw, 390px); padding: 0; border: 1px solid var(--line); border-radius: 48px; color: var(--ice); background: #030806; box-shadow: 0 40px 120px #000, 0 0 70px rgba(57,237,154,.15); }
.lost-phone::backdrop { background: rgba(0,4,3,.78); backdrop-filter: blur(10px); }
.lost-phone__close { position: absolute; z-index: 3; right: 1rem; top: 1rem; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ice); background: rgba(3,8,6,.8); font-size: 1.5rem; cursor: pointer; }
.lost-phone__screen { min-height: 650px; padding: 2rem 1.4rem; display: flex; flex-direction: column; justify-content: center; border: 12px solid #0a1512; border-radius: 47px; background: radial-gradient(circle at 50% 28%, rgba(57,237,154,.2), transparent 35%), linear-gradient(160deg,#071b16,#010302); }
.lost-phone__top { position: absolute; left: 2.3rem; right: 2.3rem; top: 1.7rem; display: flex; justify-content: space-between; color: #82988f; font: 700 .62rem var(--mono); }
.lost-phone__screen > .kicker { text-align: center; }
.voice-wave { height: 120px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.voice-wave i { width: 4px; height: calc(14px + var(--h, 20px)); border-radius: 9px; background: var(--mint); animation: wave 1s ease-in-out infinite alternate; animation-play-state: paused; }
.voice-wave i:nth-child(2n) { --h: 43px; animation-delay: -.2s; }
.voice-wave i:nth-child(3n) { --h: 67px; animation-delay: -.45s; }
.voice-wave.is-playing i { animation-play-state: running; }
.lost-phone__screen > button { align-self: center; min-height: 48px; padding: .7rem 1.1rem; border: 1px solid var(--mint); border-radius: 999px; color: var(--ink); background: var(--mint); font: 800 .66rem var(--mono); cursor: pointer; }
.phone-message { min-height: 106px; margin: 2rem 0 1.5rem; color: var(--ice); font: 400 1.35rem/1.25 var(--mono); opacity: .24; filter: blur(4px); transition: opacity .4s, filter .4s; }
.phone-message.is-visible { opacity: 1; filter: none; }
.lost-phone__screen small { color: #6e857c; font: 700 .62rem var(--mono); text-align: center; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

body.overdrive .hero { animation: overdrive-flash .75s ease; }
body.overdrive .hero__character { filter: drop-shadow(0 28px 38px rgba(0,0,0,.74)) drop-shadow(0 0 60px rgba(57,237,154,.7)); }
body.overdrive .radar { animation: radar-boom 1.2s ease-out; }

@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(57,237,154,0); } 100% { box-shadow: 0 0 0 0 rgba(57,237,154,0); } }
@keyframes boot-float { to { transform: scale(1.08) rotate(4deg); } }
@keyframes wipe { 0% { transform: translateY(105%); } 45%, 55% { transform: translateY(0); } 100% { transform: translateY(-105%); } }
@keyframes character-breathe { 0%,100% { transform: translateZ(34px) translateY(0) rotate(-.35deg); } 50% { transform: translateZ(34px) translateY(-9px) rotate(.45deg); } }
@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes memory-flash { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes call-pulse { 70% { box-shadow: 0 0 0 18px rgba(57,237,154,0); } 100% { box-shadow: 0 0 0 0 rgba(57,237,154,0); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes print { 0% { transform: translateY(-90%) scaleY(.4); opacity: .2; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes wave { to { transform: scaleY(.32); opacity: .45; } }
@keyframes overdrive-flash { 0%,100% { filter: none; } 50% { filter: brightness(1.35) saturate(1.35); } }
@keyframes radar-boom { 0% { transform: translate(-50%,-50%) scale(.7); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr minmax(340px, .8fr); }
  .pump-console { position: absolute; z-index: 10; right: 3vw; bottom: 2.5rem; width: 240px; }
  .scroll-cue { display: none; }
  .hero__visual { min-height: 70vh; }
}

@media (max-width: 900px) {
  .cursor { display: none; }
  .site-header { grid-template-columns: 1fr auto; padding: .75rem 1rem; }
  .desktop-nav { display: none; }
  .header-actions .buy-button { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 8rem 1.2rem 3rem; }
  .hero__copy { text-align: center; margin: 0 auto; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions, .hero__meta { justify-content: center; }
  .hero__big { font-size: clamp(5.3rem, 20vw, 9rem); }
  .hero__visual { min-height: 680px; width: min(100%, 570px); margin: 0 auto; }
  .pump-console { position: relative; right: auto; bottom: auto; width: min(100%, 560px); margin: 0 auto; }
  .origin-grid, .drift, .terminal__inner { grid-template-columns: 1fr; }
  .drift { gap: 3rem; }
  .drift__copy { text-align: center; }
  .drift__copy > p:last-child { margin-left: auto; margin-right: auto; }
  .magnet-board { min-height: min(92vw, 720px); }
  .terminal__inner { padding-bottom: 5rem; }
  .terminal__copy { text-align: center; }
  .terminal__copy > p:not(.kicker), .terminal__actions { margin-left: auto; margin-right: auto; }
  .receipt-machine { width: min(100%, 390px); }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer__brand { justify-content: center; }
  footer > a { justify-self: center; }
  .mobile-dock { position: fixed; z-index: 90; left: 50%; bottom: .8rem; display: grid; grid-template-columns: 46px 1fr 1fr; width: min(calc(100% - 1.2rem), 430px); padding: .35rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(3,12,9,.9); backdrop-filter: blur(16px); transform: translateX(-50%); box-shadow: 0 16px 50px rgba(0,0,0,.4); }
  .mobile-dock a, .mobile-dock button { min-height: 46px; display: grid; place-items: center; border: 0; border-radius: 999px; color: var(--ice); background: transparent; font: 800 .68rem var(--mono); }
  .mobile-dock a:last-child { color: var(--ink); background: var(--mint); }
}

@media (max-width: 650px) {
  .section { padding: 6.5rem 1rem; }
  .boot__card { border-radius: 28px 8px 28px 8px; }
  .hero__visual { min-height: 520px; }
  .hero__character { max-height: 570px; }
  .character-tag { font-size: .55rem; }
  .tag--headphones { left: 0; top: 25%; }
  .tag--earring { right: 0; }
  .tag--beanie { right: 2%; }
  .clue-popover { right: 4%; bottom: 4%; }
  .hero__meta { gap: .7rem 1rem; }
  .section-heading h2, .drift__copy h2, .terminal__copy h2 { font-size: clamp(3.7rem, 17vw, 6.8rem); }
  .origin-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .origin-card { width: 92%; margin: auto; }
  .story-copy { font-size: 1.05rem; }
  .anatomy { padding: 1rem; border-radius: 26px 7px 26px 7px; }
  .anatomy__header { display: block; }
  .memory-tabs { grid-template-columns: repeat(2, 1fr); }
  .memory-tab:nth-child(2) { border-right: 0; }
  .memory-tab:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .memory-stage { grid-template-columns: 1fr; gap: .7rem; min-height: 480px; padding: 2rem 1rem; }
  .memory-stage__number { font-size: 4rem; }
  .memory-stage__glyph { position: absolute; right: .5rem; bottom: 1.4rem; opacity: .12; }
  .magnet-board { width: calc(100vw - 2rem); min-height: calc(100vw - 2rem); }
  .phone-call { right: 5%; bottom: 7%; width: 90px; height: 90px; }
  .magnet-readout { left: 7%; bottom: 8%; }
  .route { min-height: auto; }
  .route-machine { width: calc(100vw - 1.5rem); margin-left: calc(-.25rem); }
  .route-node { width: 61px; height: 61px; }
  .route-node b { font-size: .82rem; }
  .route-node--1 { top: -3%; }
  .route-core { inset: 21%; padding: 1rem; }
  .route-core__time { font-size: 1.6rem; }
  .route-core .kicker { margin-bottom: .3rem; font-size: .52rem; }
  .route-core h3 { margin-bottom: .45rem; font-size: clamp(1.35rem, 6vw, 2.2rem); }
  .route-core > p:not(.kicker):not(.route-core__time) { font-size: .66rem; line-height: 1.35; }
  .route-controls { margin-top: .6rem; gap: .55rem; }
  .route-controls button { width: 32px; height: 32px; }
  .terminal__inner { padding: 4rem 1rem; border-radius: 32px 8px 32px 8px; }
  .lost-phone__screen { min-height: 590px; }
}

@media (max-width: 420px) {
  .hero__actions { display: grid; }
  .hero__actions > * { width: 100%; }
  .hero__visual { min-height: 450px; }
  .route-node { width: 55px; height: 55px; }
  .route-node span { font-size: .5rem; }
  .route-node b { font-size: .72rem; }
  .route-core { inset: 19%; }
  .route-core > p:not(.kicker):not(.route-core__time) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}