/* Pokepad — Pokédex direction.
   One display face (DotGothic16, dot-matrix), one accent (the lens cyan).
   Red is the hardware itself, not decoration. Screens are backlit LCD. */
:root {
  --bg: #0E0F12;
  --bg-2: #16181D;
  --line: #2A2D35;
  --fg: #F2F2EE;
  --fg-2: #A4A7AF;
  --fg-3: #686B74;

  --chassis: #D7262E;
  --chassis-hi: #F2484F;
  --chassis-lo: #9E141B;
  --bezel: #E6E6E0;
  --bezel-lo: #BDBDB5;
  --plastic: #1B1C21;

  --lcd: #D9E6CF;
  --lcd-2: #B9CDB0;
  --lcd-ink: #17241A;
  --lcd-ink-2: #4D6250;
  --lcd-glow: rgba(200, 255, 190, .18);

  --lens: #3CCBFF;
  --led-r: #FF4A4A;
  --led-y: #FFD23F;
  --led-g: #4CE07A;

  --display: "DotGothic16", ui-monospace, monospace;
  --ui: "Chakra Petch", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 80% -10%, rgba(215, 38, 46, .18), transparent 50%),
    radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
  color: var(--fg);
  font-family: var(--ui); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lens); color: var(--bg); }
b { font-weight: 600; color: var(--fg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lens); outline-offset: 3px; }
.tk { font-family: var(--display); font-size: .95em; }
.placeholder { border-bottom: 1px dashed currentColor; }
.placeholder::after {
  content: "TO BE SET"; margin-left: 6px; padding: 0 5px;
  font-family: var(--display); font-size: 11px; letter-spacing: .06em;
  border: 1px solid currentColor; opacity: .8; vertical-align: 2px;
}
.placeholder.is-set::after { display: none; }

/* ---------- hardware bits ---------- */
.led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 -2px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.5); }
.led.r { background: var(--led-r); box-shadow: inset 0 -2px 2px rgba(0,0,0,.35), 0 0 8px rgba(255,74,74,.6); }
.led.y { background: var(--led-y); }
.led.g { background: var(--led-g); }
.lens {
  position: relative; display: inline-block; flex: none;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 7%, #b8f0ff 11%, var(--lens) 38%, #0b5f87 74%, #06364d);
  border: 6px solid #f4f4f0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 28px rgba(60, 203, 255, .55), inset 0 -6px 10px rgba(0,0,0,.35);
  animation: lens 3.6s ease-in-out infinite;
}
.lens.sm { width: 42px; height: 42px; border-width: 4px; }
.lens.zap { animation: lensflash .6s ease-out; }
@keyframes lens { 0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 18px rgba(60,203,255,.35), inset 0 -6px 10px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 38px rgba(60,203,255,.75), inset 0 -6px 10px rgba(0,0,0,.35); } }
@keyframes lensflash { 0% { filter: brightness(2.6); box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 90px 20px rgba(60,203,255,.9); } 100% { filter: none; } }

.hw {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; cursor: pointer;
  background: var(--plastic); border: 1px solid #33353d; border-radius: 999px;
  padding: 8px 20px 8px 8px;
  box-shadow: 0 4px 0 #050506, inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .08s, box-shadow .08s;
}
.hw i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--display); font-style: normal; font-size: 16px;
  background: var(--chassis); color: #fff;
  box-shadow: inset 0 -3px 0 var(--chassis-lo), inset 0 2px 0 var(--chassis-hi);
}
.hw.ghost i { background: #2c2e35; box-shadow: inset 0 -3px 0 #16171b, inset 0 2px 0 #43464f; }
.hw:hover { box-shadow: 0 4px 0 #050506, inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--fg-3); }
.hw:active { transform: translateY(3px); box-shadow: 0 1px 0 #050506; }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; letter-spacing: .04em; text-decoration: none; }
.bar-lens { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--lens) 40%, #0b5f87); border: 2px solid #f4f4f0; box-shadow: 0 0 10px rgba(60,203,255,.6); }
.bar-set { font-family: var(--display); font-size: 13px; color: var(--fg-3); letter-spacing: .06em; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.snd {
  font-family: var(--display); font-size: 12px; letter-spacing: .06em; color: var(--fg-2); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 4px;
}
.snd:hover { color: var(--fg); border-color: var(--fg-3); }
.snd[aria-pressed="true"] { color: var(--bg); background: var(--lens); border-color: var(--lens); }
.bar-link { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; border-bottom: 2px solid var(--chassis); padding-bottom: 2px; }

/* ---------- sections ---------- */
section, .hero, .foot { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section { margin-top: clamp(110px, 13vw, 200px); }
.sec-head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 22rem); gap: 0 24px; align-items: end;
  padding-bottom: 20px; margin-bottom: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.sec-n { align-self: start; padding-top: .7em; font-family: var(--display); font-size: 18px; color: var(--chassis-hi); }
.sec-n::before { content: "No."; color: var(--fg-3); margin-right: 2px; }
.sec-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(52px, 8vw, 124px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.sec-sub { margin: 0; color: var(--fg-2); font-size: 16px; }

/* ---------- the device ---------- */
.dex {
  position: relative;
  background: linear-gradient(160deg, var(--chassis-hi) 0%, var(--chassis) 30%, #c11f27 70%, var(--chassis-lo) 100%);
  border-radius: 26px 26px 26px 60px;
  padding: 20px 22px 26px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -8px 0 rgba(0,0,0,.22),
    inset 6px 0 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.5);
  transform-style: preserve-3d;
}
.dex::before { /* hinge */
  content: ""; position: absolute; top: 34px; bottom: 34px; right: -10px; width: 12px; border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #7d0f15, #b51a21 40%, #6d0c11);
}
.dex-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid rgba(0,0,0,.18); box-shadow: 0 1px 0 rgba(255,255,255,.15); }
.dex-top .lens { margin-right: 10px; }
.dex-brand { margin-left: auto; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .3em; color: rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(255,255,255,.2); }

.bezel {
  background: linear-gradient(180deg, var(--bezel), var(--bezel-lo));
  padding: 20px 20px 30px;
  border-radius: 8px 8px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.2);
  position: relative;
}
.bezel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 30px; height: 6px; margin-left: -15px;
  background: radial-gradient(circle, var(--led-r) 0 2.5px, transparent 3px) 0 0 / 15px 6px repeat-x; }
.bezel::after { content: ""; position: absolute; bottom: 9px; right: 22px; width: 26px; height: 12px;
  background: repeating-linear-gradient(0deg, #8f8f88 0 2px, transparent 2px 4px); }

.screen {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #e9f3e0, var(--lcd) 60%, var(--lcd-2));
  color: var(--lcd-ink);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px #22252a, inset 0 6px 16px rgba(0,0,0,.25), 0 0 24px var(--lcd-glow);
  font-family: var(--display);
  padding: 14px 16px 12px;
  container-type: inline-size;
}
.screen::after { /* pixel grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background:
    repeating-linear-gradient(0deg, rgba(23,36,26,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(23,36,26,.05) 0 1px, transparent 1px 3px);
}

/* screen contents */
.scr-head { display: flex; justify-content: space-between; font-size: max(12px, 4.2cqw); letter-spacing: .04em; }
.scr-head .no { background: var(--lcd-ink); color: var(--lcd); padding: 0 6px; }
.scr-stage { position: relative; aspect-ratio: 1.45; display: grid; place-items: center; margin: 1cqw 0 0; }
.scr-stage::before { /* floor ellipse */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 10%; height: 9%;
  border-radius: 50%; background: rgba(23,36,26,.16);
}
.spr {
  position: absolute; bottom: 14%; left: 50%;
  height: 72%; width: auto; max-width: 80%;
  transform: translateX(-50%);
  image-rendering: pixelated;
  transition: opacity .05s;
}
.spr.static { height: 86%; bottom: 8%; }
.spr.sil { filter: brightness(0) opacity(.85); }
.spr.hide { opacity: 0; }
.flash { position: absolute; inset: -20%; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.scr-name { font-size: max(22px, 9.5cqw); line-height: 1; margin-top: 1cqw; letter-spacing: .02em; }
.scr-meta { display: flex; justify-content: space-between; gap: 8px; font-size: max(12px, 4cqw); color: var(--lcd-ink-2); margin-top: 1.2cqw; }
.scr-meta b { color: var(--lcd-ink); font-weight: 400; }
.scr-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 2.4cqw; font-size: max(11px, 3.6cqw); }
.bar-track { height: max(10px, 3.2cqw); border: 2px solid var(--lcd-ink); padding: 2px; background: rgba(255,255,255,.25); }
.bar-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--lcd-ink) 0 6px, transparent 6px 8px); transition: width .25s steps(12); }
.bar-fill.full { animation: blinkbar .5s steps(1) 3; }
@keyframes blinkbar { 50% { opacity: .2; } }
.textbox {
  position: relative; margin-top: 2.6cqw;
  min-height: 3.2em; padding: 8px 12px 8px;
  background: #fbfdf7; color: var(--lcd-ink);
  border: 3px double var(--lcd-ink); border-radius: 6px;
  font-size: max(13px, 4.2cqw); line-height: 1.35;
}
.tb-caret { position: absolute; right: 10px; bottom: 4px; font-size: .8em; animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.dex-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-top: 22px; padding: 0 6px; }
.dpad { position: relative; width: 74px; height: 74px; }
.dpad i { position: absolute; background: var(--plastic); border-radius: 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 3px 0 #050506; }
.dpad i:first-child { left: 26px; top: 0; width: 22px; height: 74px; }
.dpad i:last-child { top: 26px; left: 0; width: 74px; height: 22px; }
.grille { height: 40px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 4px, transparent 4px 10px); border-radius: 4px; max-width: 120px; justify-self: center; width: 100%; }
.ab { display: flex; gap: 14px; align-items: center; }
.ab button {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 18px; color: rgba(255,255,255,.75);
  background: var(--plastic);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 4px 0 #050506;
  transition: transform .06s, box-shadow .06s;
}
.ab .btn-b { transform: translateY(14px); }
.ab button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 1px 0 #050506; }
.ab .btn-b:active { transform: translateY(17px); }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh; padding-top: 92px; padding-bottom: 32px;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
.kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-family: var(--display); font-size: 14px; color: var(--fg-2); letter-spacing: .06em; }
.kicker .led:last-of-type { margin-right: 8px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(54px, 6.9vw, 124px); line-height: .92; letter-spacing: -.01em; }
.hero h1 span { display: block; }
.hero h1 .hl { color: var(--chassis-hi); text-shadow: 0 0 40px rgba(215,38,46,.4); }
.lede { max-width: 30rem; margin: 26px 0 30px; font-size: 18.5px; color: var(--fg-2); }
.cta { display: flex; gap: 16px; flex-wrap: wrap; }
.dex-wrap { position: relative; justify-self: center; perspective: 1500px; perspective-origin: 40% 20%; }
.dex-wrap::after { /* floor shadow */
  content: ""; position: absolute; left: 6%; right: 2%; bottom: -46px; height: 70px; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.85), rgba(0,0,0,.4) 45%, transparent 70%);
  filter: blur(10px);
}
/* the device is a solid object: tilted three-quarter, following the cursor a little */
.device {
  --tx: 20deg; --ty: 24deg; --tz: -4deg;
  display: flex; align-items: stretch;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz));
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.device.live { transition: transform .15s linear; }
/* extruded body: stacked layers behind each face, so the edge follows the rounded corners */
.ex { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ex.rim { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.hero .dex { width: clamp(330px, 32vw, 450px); border-radius: 26px 6px 6px 60px; }
.hero .dex::before { right: -8px; }
.hero .scr-stage { aspect-ratio: 1.75; }

/* the cover swings open on load */
.cover {
  position: relative; width: clamp(240px, 23vw, 320px); margin-left: 8px;
  transform-style: preserve-3d; transform-origin: -8px 50%;
  animation: unfold 1.25s cubic-bezier(.3,.05,.2,1) .45s both;
}
@keyframes unfold { from { transform: rotateY(-176deg); } 72% { transform: rotateY(-14deg); } to { transform: rotateY(-26deg); } }
.cover-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px 26px 60px 6px;
  background: linear-gradient(200deg, var(--chassis-hi) 0%, var(--chassis) 30%, #c11f27 70%, var(--chassis-lo) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -8px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.5);
}
.cover-face.front::after { /* the inside of the lid is in shadow until it's open */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, #000, rgba(0,0,0,.4));
  animation: lidshade 1.25s cubic-bezier(.3,.05,.2,1) .45s both;
}
@keyframes lidshade { from { opacity: .9; } 60% { opacity: .2; } to { opacity: .08; } }
.cover-face.back { transform: translateZ(var(--depth, -22px)) rotateY(180deg); display: grid; place-items: center; align-content: center; gap: 16px; }
.cover-emblem { width: 90px; height: 90px; border-radius: 50%; border: 8px solid rgba(0,0,0,.25); box-shadow: inset 0 0 0 10px rgba(255,255,255,.12); }
.cover-word { font-family: var(--ui); font-weight: 700; letter-spacing: .4em; font-size: 13px; color: rgba(0,0,0,.35); }
.cover-face.front { display: flex; flex-direction: column; gap: 18px; padding: 72px 22px 26px; }
.cover-face.front::before { /* the stepped top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 6px 26px 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 100%, 34% 38%, 0 38%);
}
.cover-led { position: absolute; top: 16px; right: 22px; }
.mini {
  position: relative; overflow: hidden;
  background: #0b1710; color: #86ffa4;
  font-family: var(--display); font-size: 13px; line-height: 1.55; letter-spacing: .04em;
  border-radius: 4px; padding: 10px 12px;
  box-shadow: inset 0 0 0 3px #050806, inset 0 4px 10px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 0 6px rgba(134,255,164,.55);
}
.mini::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.mini .ln { display: flex; justify-content: space-between; gap: 8px; }
.mini .ln span:first-child { color: #4fae69; }
.mini .ln.lk span:last-child { color: #b4ffc6; }
.mini .ln.rw span:last-child { animation: minirw .5s steps(2); }
@keyframes minirw { 50% { opacity: .2; } }
.mini.sm { font-size: 12px; text-align: center; padding: 8px 6px; }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.keys button {
  aspect-ratio: 1.15; border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--display); font-size: 15px; color: #06364d;
  background: linear-gradient(180deg, #8ae6ff, #3cb9ec 55%, #1a86b8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #0b4d6c, 0 0 0 1px rgba(0,0,0,.35);
  transition: transform .06s, box-shadow .06s;
}
.keys button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #0b4d6c, 0 0 0 1px rgba(0,0,0,.35); }
.keys button[aria-pressed="true"] { background: linear-gradient(180deg, #fff6b0, var(--led-y) 55%, #c79b0e); color: #3d2c00; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 #7a5d05, 0 0 0 1px rgba(0,0,0,.35); }
.slots { display: flex; gap: 10px; }
.slots i { flex: 1; height: 10px; border-radius: 5px; background: #1b1c21; box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.18); }
.mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.mini.log { flex: 1; min-height: 90px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 12px; line-height: 1.6; }
.mini.log::before { content: "EVOLUTION LOG"; position: absolute; top: 8px; left: 12px; color: #4fae69; font-size: 11px; }
.mini.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini.log div:last-child { color: #d6ffe0; }
.mini.log div:last-child::after { content: "_"; animation: caret .7s steps(1) infinite; }

/* ---------- evolution (scroll-driven) ---------- */
.evo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem; opacity: .25; transition: opacity .4s; }
.step.is-active { opacity: 1; }
.step:first-child { min-height: 72vh; justify-content: flex-start; padding-top: 8vh; }
.step-n { margin: 0; font-family: var(--display); color: var(--chassis-hi); font-size: 16px; letter-spacing: .06em; }
.step h3 { margin: 6px 0 20px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(56px, 6.4vw, 100px); line-height: .9; }
.trig { margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--fg-3); border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 600; line-height: 1.25; }
.trig span:first-child { display: block; font-family: var(--display); font-size: 12px; font-weight: 400; color: var(--fg-3); letter-spacing: .08em; margin-bottom: 4px; text-transform: uppercase; }
.step p { color: var(--fg-2); margin: 0 0 14px; }
.evo-stage { position: sticky; top: 72px; height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; perspective: 1500px; }
.dex-lg { width: min(100%, 480px); transform: rotateX(14deg) rotateY(-22deg) rotateZ(2deg); }
.dex-lg .bezel { padding-bottom: 34px; }

/* ---------- entry ---------- */
.entry-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.panel { background: linear-gradient(160deg, #24262c, #16171b); border-radius: 14px; padding: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 70px -40px #000, 0 0 0 1px #000; }
.lcd {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #e9f3e0, var(--lcd) 60%, var(--lcd-2));
  color: var(--lcd-ink); font-family: var(--display);
  border-radius: 4px; box-shadow: inset 0 0 0 3px #22252a, inset 0 6px 16px rgba(0,0,0,.25);
  padding: 16px 20px;
}
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(23,36,26,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(23,36,26,.05) 0 1px, transparent 1px 3px); }
.lcd-head { display: flex; justify-content: space-between; font-size: 13px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--lcd-ink); }
.lcd-head span:first-child { background: var(--lcd-ink); color: var(--lcd); padding: 0 6px; }
.row { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 54px; border-bottom: 1px dashed rgba(23,36,26,.35); }
.row .k { font-size: 13px; color: var(--lcd-ink-2); }
.row .v { font-size: clamp(18px, 2.2vw, 30px); line-height: 1; white-space: nowrap; overflow: hidden; }
.row .v img { height: 76px; margin: -14px 0 -14px -14px; image-rendering: pixelated; vertical-align: middle; }
.row .flag { font-size: 11px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 6px; }
.row.rw .flag { background: var(--lcd-ink); color: var(--lcd); }
.row.lk .flag { border: 1px solid var(--lcd-ink-2); color: var(--lcd-ink-2); }
.row.lk .v { color: var(--lcd-ink-2); }
.row.rw .v.glitch { animation: glitch .45s steps(4); }
@keyframes glitch {
  0% { transform: translateX(0); opacity: 1; }
  25% { transform: translateX(-4px); opacity: .2; clip-path: inset(0 0 50% 0); }
  50% { transform: translateX(3px); opacity: .8; clip-path: inset(40% 0 0 0); }
  75% { transform: translateX(-2px); opacity: .4; }
  100% { transform: none; opacity: 1; clip-path: none; }
}
.lock { width: 9px; height: 8px; background: currentColor; position: relative; display: inline-block; margin-top: 4px; }
.lock::before { content: ""; position: absolute; left: 1.5px; top: -6px; width: 6px; height: 6px; border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.entry-notes .big { font-family: var(--display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; margin: 0 0 22px; text-transform: uppercase; }
.entry-notes .big span { color: var(--lens); }
.entry-notes p { color: var(--fg-2); margin: 0 0 16px; }
.entry-notes .small { font-size: 14.5px; color: var(--fg-3); }

/* ---------- register ---------- */
.console {
  background: linear-gradient(160deg, var(--chassis-hi) 0%, var(--chassis) 26%, #bd1f26 70%, var(--chassis-lo));
  border-radius: 24px; padding: 18px 22px 24px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -8px 0 rgba(0,0,0,.22), 0 50px 90px -40px #000, 0 0 0 1px #000;
}
.console-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid rgba(0,0,0,.18); }
.console-top .lens { margin-right: 8px; }
.console-label { margin-left: auto; font-weight: 700; font-size: 12px; letter-spacing: .3em; color: rgba(0,0,0,.4); }
.console-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: stretch; }
.reg-form { background: rgba(0,0,0,.18); border-radius: 12px; padding: 18px; box-shadow: inset 0 2px 8px rgba(0,0,0,.25); }
.lcd-field { display: block; margin-bottom: 16px; }
.lcd-field span { display: block; font-family: var(--display); font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 6px; letter-spacing: .06em; }
.lcd-field input {
  width: 100%; border: 0; border-radius: 4px;
  font-family: var(--display); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; text-transform: uppercase;
  color: var(--lcd-ink); background: var(--lcd);
  padding: 12px 14px 10px;
  box-shadow: inset 0 0 0 3px #22252a, inset 0 5px 12px rgba(0,0,0,.25);
}
.lcd-field input:focus { outline: none; box-shadow: inset 0 0 0 3px #22252a, inset 0 5px 12px rgba(0,0,0,.25), 0 0 0 3px var(--lens); }
.tick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lcd-field.sm input { font-size: 20px; padding: 10px 10px 8px; }
.reg-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.bezel.wide { padding: 16px 16px 30px; }
.reg-screen { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.line { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: 4px; padding-top: 6px; }
.form { text-align: center; }
.form .pod { position: relative; aspect-ratio: 1; display: grid; place-items: end center; }
.form .pod::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 4%; height: 10%; border-radius: 50%; background: rgba(23,36,26,.16); }
.form img { position: relative; height: 86%; image-rendering: pixelated; }
.form .no { font-size: max(11px, 2.4cqw); color: var(--lcd-ink-2); margin-top: 4px; }
.form .nm { font-size: max(15px, 3.6cqw); line-height: 1.05; margin-top: 2px; overflow-wrap: anywhere; }
.form .tk { font-size: max(12px, 2.8cqw); display: inline-block; margin-top: 4px; background: var(--lcd-ink); color: var(--lcd); padding: 1px 6px; }
.form .ty { font-size: max(10px, 2.2cqw); color: var(--lcd-ink-2); margin-top: 3px; }
.arrow { align-self: center; font-size: max(11px, 2.2cqw); color: var(--lcd-ink-2); text-align: center; line-height: 1.2; padding-bottom: 30%; }
.arrow b { display: block; font-weight: 400; font-size: 1.8em; color: var(--lcd-ink); }
.line.loading .form { opacity: .25; }
.scanline { position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(60,203,255,.35) 60%, rgba(255,255,255,.8) 62%, transparent 64%); }
.scanline.go { animation: scan 1s linear; }
@keyframes scan { 0% { top: -20%; opacity: 1; } 100% { top: 105%; opacity: 1; } }

/* ---------- manual ---------- */
.manual-lcd { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 0; padding: 0; min-height: 250px; }
.manual-page { display: flex; flex-direction: column; justify-content: center; }
.menu { list-style: none; margin: 0; padding: 14px 0; border-right: 2px solid var(--lcd-ink); }
.menu li { position: relative; padding: 12px 18px 12px 38px; font-size: 18px; cursor: pointer; text-transform: uppercase; }
.menu li[aria-selected="true"] { background: var(--lcd-ink); color: var(--lcd); }
.menu li[aria-selected="true"]::before { content: "▶"; position: absolute; left: 14px; font-size: 12px; top: 50%; transform: translateY(-50%); animation: caret .7s steps(1) infinite; }
.menu li:focus-visible { outline: 2px solid var(--lens); outline-offset: -4px; }
.manual-page { padding: 22px clamp(18px, 3vw, 40px); }
.manual-page h3 { margin: 0 0 14px; font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; text-transform: uppercase; }
.manual-page p { margin: 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; max-width: 46rem; }

/* ---------- foot ---------- */
.foot {
  margin-top: clamp(100px, 12vw, 180px); padding-top: 40px; padding-bottom: 48px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto minmax(0, 42rem) auto; gap: 32px; align-items: end;
  font-size: 13.5px; color: var(--fg-3);
}
.foot p { margin: 0; }
.foot-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 30px; color: var(--fg); }
.foot-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-family: var(--display); font-size: 13px; }
.foot-links a { text-decoration: none; border-bottom: 1px solid var(--fg-3); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .bar { grid-template-columns: auto 1fr; }
  .bar-set { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 90px; }
  .hero h1 { font-size: 13.6vw; }
  .dex-wrap { margin-top: 18px; width: 100%; perspective: 1100px; }
  .device { --tx: 16deg; --ty: 14deg; --tz: -2deg; display: block; }
  .hero .dex { width: 100%; border-radius: 26px 26px 26px 60px; }
  .cover { display: none; }
  .bar-link { display: none; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-n { padding: 0 0 8px; }
  .sec-sub { margin-top: 14px; }
  .evo-grid { grid-template-columns: 1fr; }
  .evo-stage { order: -1; top: 50px; height: auto; z-index: 3; background: var(--bg); padding: 8px 0 12px; }
  .dex-lg { width: 100%; padding: 12px 14px 16px; border-radius: 18px 18px 18px 36px; transform: rotateX(6deg); }
  .dex-lg .dex-top { display: none; }
  .dex-lg .bezel { padding: 10px 10px 22px; }
  .dex-lg .scr-stage { aspect-ratio: 2.4; }
  .dex-lg .textbox { min-height: 0; }
  .step, .step:first-child { min-height: 70vh; padding-top: 0; }
  .entry-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: 8px; }
  .row .flag { font-size: 9.5px; }
  .console { padding: 14px 12px 16px; }
  .console-body { grid-template-columns: 1fr; }
  .manual-lcd { grid-template-columns: 1fr; }
  .menu { border-right: 0; border-bottom: 2px solid var(--lcd-ink); }
  .foot { grid-template-columns: 1fr; gap: 18px; }
  .foot-links { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =====================================================================
   Premium layer
   Marketing type is a tight grotesk; the dot-matrix face lives on the
   device screens and in small labels only. The page is lit like a
   product shot: a soft key light, a red bounce under the device, grain.
   ===================================================================== */
:root {
  --ui: "Inter Tight", system-ui, sans-serif;
  --pixel: "DotGothic16", ui-monospace, monospace;
  --ink-0: #07080A;
  --muted: #8D9099;
  --muted-2: #5E616A;
  --hair: rgba(255, 255, 255, .08);
}
body {
  background: var(--ink-0);
  background-image: none;
  font-size: 18px; line-height: 1.6; letter-spacing: -.006em;
}
body::before { /* film grain */
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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)'/%3E%3C/svg%3E");
}
body::after { /* vignette */
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55));
}

/* nav */
.bar { background: rgba(7, 8, 10, .62); border-bottom: 1px solid var(--hair); padding-top: 14px; padding-bottom: 14px; }
.bar-mark { font-family: var(--ui); font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.bar-nav { display: flex; gap: 30px; }
.bar-nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s; }
.bar-nav a:hover { color: var(--fg); }
.bar-link { border: 0; padding: 8px 16px; border-radius: 999px; background: #F2F2EE; color: #0A0B0D; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; }
.bar-link:hover { background: #fff; }
.snd { font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: 0; padding: 7px 13px; border-color: var(--hair); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 999px;
  background: #F2F2EE; color: #0A0B0D; text-decoration: none;
  font-family: var(--ui); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 34px -14px rgba(255,255,255,.35);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn-link { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15.5px; }
.btn-link span { display: inline-block; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn-link:hover span { transform: translateX(4px); }

/* hero: one centred product shot */
html { overflow-x: clip; }
.hero { overflow-x: clip; display: block; position: relative; isolation: isolate; text-align: center; min-height: 0; padding-top: clamp(130px, 14vw, 180px); padding-bottom: 40px; }
.hero::before { /* key light + red bounce */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 1600px; height: 1300px; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 50% 58%, rgba(255,255,255,.085), transparent 72%),
    radial-gradient(ellipse 24% 12% at 50% 86%, rgba(215,38,46,.28), transparent 72%),
    radial-gradient(ellipse 40% 26% at 50% 8%, rgba(255,255,255,.05), transparent 70%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px;
  padding: 7px 15px 7px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,.03);
  color: var(--muted); font-size: 14px; font-weight: 500;
}
.eyebrow .bar-lens { width: 12px; height: 12px; border-width: 2px; }
.hero h1 {
  font-family: var(--ui); font-weight: 600; text-transform: none;
  font-size: clamp(48px, 7.6vw, 124px); line-height: .98; letter-spacing: -.05em;
}
.hero h1 span {
  display: inline; color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #9a9da6 0%, #4d5058 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero .lede { margin: 28px auto 36px; max-width: 35rem; font-size: 19.5px; line-height: 1.55; color: var(--muted); }
.hero .cta { justify-content: center; align-items: center; gap: 28px; }
.dex-wrap { width: fit-content; margin: clamp(64px, 7vw, 100px) auto 0; text-align: left; }
.dex-wrap::before { /* red light bouncing off the floor */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -120px; height: 160px; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, rgba(215,38,46,.32), transparent 70%);
  filter: blur(22px);
}
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 16rem)); justify-content: center; gap: clamp(28px, 4vw, 64px); margin: clamp(100px, 10vw, 150px) auto 0; text-align: left; }
.specs > div { border-top: 1px solid var(--hair); padding-top: 18px; }
.specs dt { font-weight: 600; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -.055em; }
.specs dd { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }

/* plastic: a soft key light and a darker turn at the far corner */
.dex, .cover-face, .console {
  background:
    radial-gradient(120% 70% at 16% 0%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%),
    radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.3), transparent 62%),
    linear-gradient(160deg, #EE4047 0%, #D7262E 36%, #BD1E26 76%, #98131A 100%);
}

/* section headings */
section { margin-top: clamp(150px, 17vw, 260px); }
.sec-head { display: block; border: 0; padding: 0; max-width: 62rem; margin-bottom: clamp(52px, 6vw, 92px); }
.sec-n { display: block; padding: 0; margin: 0 0 20px; font-family: var(--pixel); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--chassis-hi); }
.sec-n::before { content: none; }
.sec-head h2 { font-family: var(--ui); font-weight: 600; text-transform: none; font-size: clamp(40px, 5.6vw, 86px); line-height: 1.02; letter-spacing: -.048em; }
.sec-head h2 span { color: var(--muted-2); }
.sec-sub { margin: 22px 0 0; max-width: 34rem; font-size: 18.5px; color: var(--muted); }

/* evolution steps */
.step-n { font-family: var(--pixel); font-size: 13px; color: var(--chassis-hi); letter-spacing: .08em; text-transform: uppercase; }
.step h3 { font-family: var(--ui); font-weight: 600; text-transform: none; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -.045em; margin: 12px 0 22px; }
.trig { border-top: 1px solid var(--hair); border-bottom: 0; padding: 16px 0 0; margin-bottom: 18px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.trig span:first-child { font-family: var(--pixel); font-weight: 400; letter-spacing: .08em; color: var(--muted-2); }
.step p { color: var(--muted); }
.evo-stage { isolation: isolate; }
.evo-stage::before {
  content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 40% at 50% 50%, rgba(255,255,255,.06), transparent 70%), radial-gradient(ellipse 30% 12% at 50% 88%, rgba(215,38,46,.22), transparent 70%);
}

/* entry */
.panel { background: linear-gradient(180deg, #1a1b20, #101114); border-radius: 22px; padding: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04), 0 50px 90px -50px #000; }
.entry-notes .big { font-family: var(--ui); font-weight: 600; text-transform: none; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.035em; }
.entry-notes .big span { color: var(--muted-2); }
.entry-notes p { color: var(--muted); }
.entry-notes .small { color: var(--muted-2); }

/* footer */
.foot { border-top: 1px solid var(--hair); color: var(--muted-2); }
.foot-mark { font-family: var(--ui); font-weight: 650; font-size: 22px; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .bar-nav { display: none; }
  .bar { grid-template-columns: auto 1fr auto; }
  .hero { padding-top: 112px; }
  .hero h1 { font-size: 12.4vw; }
  .hero .lede { font-size: 17.5px; }
  .dex-wrap { width: 100%; margin-top: 54px; }
  .specs { grid-template-columns: 1fr; gap: 26px; margin-top: 90px; }
  .sec-head h2 { font-size: 10.5vw; }
}


/* =====================================================================
   Hero v3: split poster layout with depth
   ===================================================================== */
.hero {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: 1fr auto; align-items: center; gap: 24px clamp(24px, 4vw, 64px);
  min-height: 100vh; text-align: left;
  padding-top: clamp(110px, 11vw, 140px); padding-bottom: 36px;
}
.hero::before { /* key light sits behind the device, not the middle */
  left: 64%; top: -6%; width: 1300px; height: 1200px;
  background:
    radial-gradient(ellipse 34% 32% at 50% 46%, rgba(255,255,255,.09), transparent 72%),
    radial-gradient(ellipse 26% 12% at 50% 80%, rgba(215,38,46,.3), transparent 72%);
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(56px, 7.4vw, 132px); line-height: .94; letter-spacing: -.055em; }
.hero .lede { margin: 30px 0 36px; max-width: 30rem; font-size: 19px; }
.hero .cta { justify-content: flex-start; }
.dex-wrap { margin: 0; justify-self: center; align-self: center; z-index: 2; }
.hero .dex { width: clamp(300px, 26vw, 400px); }
.cover { width: clamp(214px, 19vw, 290px); }
.specs { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; margin: clamp(36px, 4vw, 56px) 0 0; position: relative; z-index: 2; }

/* depth layers behind the device */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-num {
  position: absolute; right: -2%; top: 4%;
  font-family: var(--ui); font-weight: 700; font-size: clamp(260px, 34vw, 560px); line-height: .8; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 70%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-rings { position: absolute; left: 70%; top: 46%; width: 0; height: 0; }
.hero-rings i {
  position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%;
  border: 1px solid rgba(60, 203, 255, .22);
  animation: ring 7s cubic-bezier(.2,.6,.3,1) infinite;
  opacity: 0;
}
.hero-rings i:nth-child(2) { animation-delay: 1.75s; }
.hero-rings i:nth-child(3) { animation-delay: 3.5s; }
.hero-rings i:nth-child(4) { animation-delay: 5.25s; }
@keyframes ring { 0% { transform: scale(.35); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.hero-floor {
  position: absolute; left: -10%; right: -10%; bottom: -4%; height: 58%;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center bottom;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask: radial-gradient(ellipse 60% 85% at 64% 100%, #000 10%, transparent 72%);
          mask: radial-gradient(ellipse 60% 85% at 64% 100%, #000 10%, transparent 72%);
}

/* grain you can actually see on black, heavier in places */
body::before { opacity: .085; mix-blend-mode: screen; }
.grainy { position: relative; isolation: isolate; }
.grainy::after {
  content: ""; position: absolute; inset: -12% -20%; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask: radial-gradient(ellipse 50% 50% at var(--gx, 70%) var(--gy, 40%), #000, transparent 70%);
          mask: radial-gradient(ellipse 50% 50% at var(--gx, 70%) var(--gy, 40%), #000, transparent 70%);
}
/* pools of light, so each section has its own depth */
.evo, .entry, .register, .manual { position: relative; isolation: isolate; overflow-x: clip; overflow-clip-margin: 0; }
.evo::before, .entry::before, .register::before, .manual::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none; inset: -18% -25%;
}
.evo::before { background: radial-gradient(ellipse 30% 26% at 72% 40%, rgba(215,38,46,.14), transparent 70%), radial-gradient(ellipse 22% 18% at 20% 12%, rgba(255,255,255,.035), transparent 70%); }
.entry::before { background: radial-gradient(ellipse 30% 30% at 28% 60%, rgba(60,203,255,.08), transparent 70%), radial-gradient(ellipse 20% 20% at 80% 30%, rgba(255,255,255,.035), transparent 70%); }
.register::before { background: radial-gradient(ellipse 36% 24% at 55% 70%, rgba(215,38,46,.18), transparent 70%); }
.manual::before { background: radial-gradient(ellipse 34% 26% at 40% 60%, rgba(140,255,170,.06), transparent 70%); }
.evo { --gx: 75%; --gy: 45%; }
.entry { --gx: 25%; --gy: 60%; }
.register { --gx: 60%; --gy: 70%; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; padding-top: 108px; text-align: left; }
  .hero h1 { font-size: 15vw; }
  .hero::before { left: 50%; top: 30%; }
  .hero-num { top: auto; bottom: 30%; font-size: 70vw; }
  .hero-rings { left: 50%; top: 66%; }
  .hero-rings i { left: -240px; top: -240px; width: 480px; height: 480px; }
  .hero-floor { height: 36%; }
  .hero .dex { width: 100%; }
  .specs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero-rings i { animation: none; opacity: .5; } }

/* keep the Dex pinned through the last stage */
.steps { padding-bottom: 28vh; }
@media (max-width: 900px) { .steps { padding-bottom: 10vh; } }


/* =====================================================================
   Personality layer: premium, but alive. Toy-hardware, not Apple.
   ===================================================================== */
:root {
  --fun: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --yellow: #FFD23F;
  --yellow-lo: #C69A12;
  --ink-0: #0C0A0F;
}
body { background: var(--ink-0); }
.hero h1, .sec-head h2, .step h3, .specs dt, .entry-notes .big, .foot-mark, .manual-page h3 {
  font-family: var(--fun); font-weight: 800; font-variation-settings: "opsz" 96;
}
.hero h1 { letter-spacing: -.045em; line-height: .92; }
.hero h1 .mute { color: #6c6775; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.hero h1 .pop {
  background: linear-gradient(92deg, #FFE36B 0%, var(--yellow) 22%, #FF8A3D 55%, #FF4A55 85%, #FF6FA8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s ease-in-out infinite alternate;
  padding-right: .06em;
}
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.sec-head h2 { letter-spacing: -.04em; }
.sec-head h2 span { color: #6c6775; }
.step h3 { letter-spacing: -.04em; }

/* little sprites set in the type */
.h-spr {
  height: .78em; width: auto; margin-left: .14em; vertical-align: -.04em;
  image-rendering: pixelated;
  animation: hop 2.6s cubic-bezier(.3,.7,.4,1) infinite;
  transform-origin: 50% 100%;
}
.sec-head h2 .h-spr { height: .9em; }
@keyframes hop { 0%, 62%, 100% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.08, .9); } 80% { transform: translateY(-22%) scale(.95, 1.06); } 90% { transform: translateY(0) scale(1.05, .95); } }

/* buttons: chunky, pressable */
.btn {
  background: var(--yellow); color: #1D1600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 var(--yellow-lo), 0 18px 34px -14px rgba(255,210,63,.55);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.btn:hover { background: #FFDC5E; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 7px 0 var(--yellow-lo), 0 22px 40px -14px rgba(255,210,63,.6); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 var(--yellow-lo); }
.bar-link { background: var(--yellow); color: #1D1600; box-shadow: 0 3px 0 var(--yellow-lo); }
.bar-link:hover { background: #FFDC5E; }

/* the sticker */
.sticker {
  position: absolute; z-index: 6; left: -44px; bottom: 54px;
  width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE680, var(--yellow) 55%, #F2B80C);
  color: #241A00;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.12);
  display: grid; place-items: center;
  transform: rotate(-12deg);
}
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.sticker text { font-family: var(--fun); font-weight: 800; font-size: 11.5px; letter-spacing: .14em; fill: currentColor; }
.sticker b { font-family: var(--fun); font-weight: 800; font-size: 34px; letter-spacing: -.04em; line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* floating sprites at three depths */
.floaters { position: absolute; inset: 0; }
.fl { position: absolute; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fl img { display: block; image-rendering: pixelated; animation: bob var(--d, 5s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.fl.far img { filter: blur(1.2px) brightness(.55) saturate(.7); opacity: .55; }
.fl.mid img { filter: brightness(.8); opacity: .8; }
@keyframes bob { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(10px) rotate(3deg); } }

/* tape: two marquee bands crossing */
.tape { position: relative; height: 190px; margin-top: 24px; overflow: hidden; }
.band { position: absolute; left: -5%; right: -5%; top: 50%; padding: 12px 0; overflow: hidden; }
.band.red { background: var(--chassis); transform: translateY(-92%) rotate(-2.4deg); z-index: 2; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.band.yellow { background: var(--yellow); color: #241A00; transform: translateY(8%) rotate(1.8deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.track { display: flex; align-items: center; gap: 22px; width: max-content; animation: mq 46s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 58s; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.track span { font-family: var(--fun); font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.band.red .track span { color: #fff; }
.track img { height: 40px; image-rendering: pixelated; }
.track i { font-style: normal; opacity: .55; font-size: 18px; }

/* specs get a bit of colour */
.specs > div:nth-child(1) dt { color: var(--yellow); }
.specs > div:nth-child(2) dt { color: #FF5A5F; }
.specs > div:nth-child(3) dt { color: var(--lens); }

/* warmer, more colourful light */
.hero::before {
  background:
    radial-gradient(ellipse 34% 32% at 50% 46%, rgba(255,240,220,.09), transparent 72%),
    radial-gradient(ellipse 26% 12% at 50% 80%, rgba(215,38,46,.32), transparent 72%),
    radial-gradient(ellipse 22% 22% at 18% 30%, rgba(255,210,63,.07), transparent 70%);
}
.hero-floor { opacity: .7; }

@media (max-width: 900px) {
  .sticker { width: 86px; height: 86px; left: auto; right: -6px; top: -26px; bottom: auto; }
  .fl.far { display: none; }
  .fl.mid img { opacity: .6; }
  .sticker b { font-size: 24px; }
  .sticker text { font-size: 11px; }
  .tape { height: 120px; }
  .track span { font-size: 17px; }
  .track img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-spr, .fl img, .track, .sticker svg, .hero h1 .pop { animation: none !important; }
}


/* =====================================================================
   Logo lockup: the mark (logo-mark.svg, source in brand/) + wordmark
   ===================================================================== */
.mark { display: block; flex: none; }
.bar-mark { gap: 11px; }
.bar-mark .mark {
  width: 30px; height: 30px;
  filter: drop-shadow(0 4px 10px rgba(215, 38, 46, .35)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
  transition: transform .35s cubic-bezier(.3, 1.6, .4, 1);
}
.bar-mark:hover .mark { transform: rotate(-8deg) scale(1.06); }
.wordmark { font-family: var(--fun); font-weight: 800; font-variation-settings: "opsz" 96; font-size: 24px; letter-spacing: -.045em; line-height: 1; padding-bottom: 3px; }
.eyebrow .mark { width: 18px; height: 18px; filter: drop-shadow(0 2px 5px rgba(215, 38, 46, .35)); }
.foot-mark { gap: 14px; }
.foot-mark .mark { width: 40px; height: 40px; filter: drop-shadow(0 6px 14px rgba(215, 38, 46, .35)); }
.foot-mark .wordmark { font-size: 32px; }


/* Pikachu hides behind the primary button and peeks over its top edge on hover */
.peek-wrap { position: relative; display: inline-flex; isolation: isolate; }
.peek-wrap .btn { position: relative; z-index: 1; }
.peek {
  position: absolute; z-index: 0; right: 18px; bottom: 6px;
  height: 58px; width: auto; image-rendering: pixelated; pointer-events: none;
  transform: translateY(0) rotate(0); opacity: 0;
  transition: transform .45s cubic-bezier(.3, 1.7, .45, 1), opacity .15s;
}
.peek-wrap:hover .peek, .peek-wrap:focus-within .peek {
  opacity: 1; transform: translateY(-38px) rotate(-6deg);
}
.peek-wrap:active .peek { transform: translateY(-6px); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) { .peek { transition: opacity .2s; } }


/* =====================================================================
   Evolution v2: all three stages beside the Dex, no scroll-through
   ===================================================================== */
.evo .evo-grid { align-items: center; }
.evo .steps { padding-bottom: 0; display: grid; gap: 14px; align-content: center; }
.evo .step {
  position: relative; overflow: hidden;
  min-height: 0; padding: 22px 26px 24px; max-width: none;
  display: block; opacity: .6; cursor: pointer;
  border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid var(--hair);
  transition: opacity .3s, background .3s, border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.evo .step:first-child { min-height: 0; padding-top: 22px; }
.evo .step:hover { opacity: .9; transform: translateX(4px); }
.evo .step:focus-visible { outline: 2px solid var(--lens); outline-offset: 3px; }
.evo .step.is-active { opacity: 1; background: rgba(255,255,255,.055); border-color: rgba(242,72,79,.45); box-shadow: inset 3px 0 0 var(--chassis-hi); }
.evo .step.is-done { opacity: .75; }
.evo .step-head { display: flex; align-items: baseline; gap: 14px; }
.evo .step h3 { font-size: clamp(30px, 2.8vw, 42px); margin: 6px 0 12px; }
.evo .step .trig { font-size: 17px; padding-top: 10px; margin-bottom: 10px; }
.evo .step p:last-of-type { font-size: 16px; line-height: 1.5; margin: 0; }
.evo .step .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.05); }
.evo .step .prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--chassis-hi), var(--yellow)); transition: width .25s linear; }
.evo .evo-stage { position: relative; top: auto; height: auto; min-height: 0; }
@media (max-width: 900px) {
  .evo .evo-stage { order: -1; position: relative; top: auto; padding: 0 0 8px; box-shadow: none; background: none; }
  .evo .step:hover { transform: none; }
}


/* nudge: how to see the evolution on the hero device */
.ab { position: relative; }
.ab button { position: relative; }
.evo-hint {
  position: absolute; z-index: 5; right: -10px; bottom: calc(100% + 16px);
  white-space: nowrap; pointer-events: none;
  padding: 8px 12px 7px; border-radius: 9px;
  background: var(--yellow); color: #231900;
  font-family: var(--pixel); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--yellow-lo), 0 10px 18px -6px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s, right .3s cubic-bezier(.3,1.4,.4,1);
}
.evo-hint::after { content: ""; position: absolute; top: 100%; right: 28px; border: 7px solid transparent; border-top-color: var(--yellow); }
.evo-hint.at-b { right: 56px; }
.device.hinting .evo-hint { opacity: 1; animation: hintbob 1.8s ease-in-out infinite; }
@keyframes hintbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.device.hinting .btn-a::after, .device.hinting.final .btn-b::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--yellow); animation: ping 1.8s ease-out infinite;
}
.device.hinting.final .btn-a::after { display: none; }
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.keys button.next { animation: keyglow 1.6s ease-in-out infinite; }
@keyframes keyglow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #0b4d6c, 0 0 0 1px rgba(0,0,0,.35); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #0b4d6c, 0 0 0 2px var(--yellow), 0 0 18px rgba(255,210,63,.75); }
}
@media (prefers-reduced-motion: reduce) { .device.hinting .evo-hint, .keys button.next { animation: none; } }

/* Full-bleed hero and lit sections: the content keeps its 1360px measure through padding,
   but the box itself spans the viewport, so lights, rings and the tilted device are only
   ever clipped by the edge of the screen, never by a line in the middle of it. */
.hero, .evo, .entry, .register, .manual {
  max-width: none;
  --bleed: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}

/* =====================================================================
   Final rules update: App button, live $ values, 1–3 form lines
   ===================================================================== */
.bar-app {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, var(--chassis-hi), var(--chassis));
  color: #fff; font-family: var(--ui); font-weight: 650; font-size: 13.5px; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--chassis-lo), 0 10px 24px -10px rgba(215,38,46,.7);
  transition: transform .12s, box-shadow .12s;
}
.bar-app:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 var(--chassis-lo), 0 14px 28px -10px rgba(215,38,46,.8); }
.bar-app:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 var(--chassis-lo); }
.bar-app span { transition: transform .2s; }
.bar-app:hover span { transform: translateX(3px); }

/* "≈ $22.5K" with the contract's SOL value underneath, small */
.usd { white-space: nowrap; }
.usd .sol { margin-left: .4em; font-size: .62em; font-weight: 500; letter-spacing: 0; color: var(--muted-2); vertical-align: .15em; }
.trig .usd .sol, .manual-page .usd .sol { color: inherit; opacity: .55; }
.specs dd .usd .sol { display: none; }

.reg-actions .app-go { background: var(--chassis); color: #fff; text-decoration: none; }
.reg-actions .app-go i { background: #fff; color: var(--chassis); box-shadow: none; }
.tick-row label[hidden] { display: none; }
.line.n1 { grid-template-columns: minmax(0, 1fr) auto; max-width: 70%; margin: 0 auto; }
.line.n2 { grid-template-columns: 1fr auto 1fr; max-width: 85%; margin: 0 auto; }
.arrow.solo b { font-size: 2.2em; }

@media (max-width: 900px) {
  .bar-app { padding: 7px 12px; font-size: 13px; }
  .bar-right { gap: 10px; }
}

/* X link: icon in the nav, handle in the footer */
.bar-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--fg); border: 1px solid var(--hair); text-decoration: none; transition: background .2s, border-color .2s; }
.bar-x:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.foot-x { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); }
.foot-x:hover { background: rgba(255,255,255,.05); }
@media (max-width: 900px) { .foot-x { justify-self: start; } }
/* nav: let the right-hand buttons take what they need, centre the links in the rest */
.bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; }
.bar-nav { justify-self: center; }
@media (max-width: 1180px) { .bar-nav { gap: 20px; } .bar-right { gap: 12px; } }
@media (max-width: 1020px) { .bar-right .snd { display: none; } }

.btn > span[aria-hidden] { margin-left: 8px; transition: transform .2s; }
.btn:hover > span[aria-hidden] { transform: translateX(3px); }

/* fixed dollar milestones in running copy */
.mc { font-weight: inherit; color: inherit; white-space: nowrap; }
.trig .mc, .manual-page .mc { font-weight: inherit; }

/* $POKE contract address: one strip under the hero specs, plus inline copies */
.ca { grid-column: 1 / -1; position: relative; z-index: 2; margin-top: 28px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  padding: 14px 16px 14px 20px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,210,63,.3); }
.ca-k { font-family: var(--pixel); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; }
.ca-v { flex: 1 1 auto; min-width: 0; font-family: var(--pixel); font-size: clamp(14px, 1.35vw, 18px); letter-spacing: .03em; color: var(--fg); overflow-wrap: anywhere; user-select: all; }
.ca-copy { font: 600 13px/1 var(--ui); color: #241A00; background: var(--yellow); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.ca-copy:hover { background: #FFE07A; }
.ca-copy.sm { padding: 6px 12px; font-size: 12px; vertical-align: middle; }
.ca-copy.done { background: #4CE07A; }
.ca-link { font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ca-link:hover { color: var(--fg); }
.ca-inline { font-family: var(--pixel); font-size: .82em; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
@media (max-width: 640px) { .ca { padding: 14px 16px; } .ca-v { flex-basis: 100%; order: 2; } .ca-copy { order: 3; } .ca-link { order: 4; } }