/* ============================================================
   Mini Nash — landing v4 · "Hyperspace Tour"
   Body scrolls natively. Galaxy is fixed backdrop.
   Stars stretch on scroll velocity. Cards animate in 3D as they enter.
   ============================================================ */

:root {
  --bg:           #06060a;
  --bg-deep:      #03030a;
  --ink:          #ffffff;
  --ink-soft:     rgba(255,255,255,0.62);
  --ink-faint:    rgba(255,255,255,0.30);
  --ink-ghost:    rgba(255,255,255,0.12);
  --accent:       #ff2545;
  --accent-soft:  rgba(255, 37, 69, 0.5);
  --accent-glow:  rgba(255, 37, 69, 0.22);
  --cool:         #5188ff;
  --ok:           #5dffb1;
  --warn:         #ffbd2e;
  --glass:        rgba(255, 255, 255, 0.04);
  --glass-edge:   rgba(255, 255, 255, 0.14);
  --glass-rim:    rgba(255, 255, 255, 0.36);

  --font-display: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --type-mega:    clamp(3rem, 8vw, 7rem);
  --type-large:   clamp(1.6rem, 3vw, 2.8rem);
  --type-body:    clamp(0.95rem, 0.4vw + 0.85rem, 1.125rem);
  --type-small:   0.8125rem;
  --type-tiny:    0.6875rem;
  --type-stat:    clamp(2.5rem, 4.5vw + 1rem, 5rem);

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glide:   cubic-bezier(0.3, 0, 0.2, 1);

  /* JS-controlled — drive star stretch + camera based on scroll velocity */
  --warp:         0;          /* 0–1 scroll velocity */
  --scroll-progress: 0;       /* 0–1 total page progress */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg-deep);
  /* Native scroll only — no smooth easing, no snap. Eliminates the "snag" feel. */
  scroll-behavior: auto;
  scroll-snap-type: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  top: -100px; left: 1rem;
  background: var(--accent); color: #fff;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 800; text-decoration: none;
  z-index: 200;
  transition: top 200ms var(--ease-out);
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   WARP — fixed backdrop, the galaxy you fly through
   ============================================================ */
.warp {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #1a1430 0%, #08080d 55%, #03030a 100%);
}

.warp__nebula {
  position: absolute;
  border-radius: 50%;
  /* Reduced for perf — re-blur cost scales hard with radius. */
  filter: blur(40px);
  mix-blend-mode: screen;
  will-change: transform;
}
.warp__nebula--a {
  width: 70vw; height: 70vw;
  top: -15vw; left: -20vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: 0.45;
  animation: drift-a 60s ease-in-out infinite alternate;
}
.warp__nebula--b {
  width: 80vw; height: 80vw;
  bottom: -25vw; right: -25vw;
  background: radial-gradient(circle, var(--cool) 0%, transparent 60%);
  opacity: 0.35;
  animation: drift-b 80s ease-in-out infinite alternate;
}
.warp__nebula--c {
  width: 50vw; height: 50vw;
  top: 30%; left: 50%;
  background: radial-gradient(circle, #b34dff 0%, transparent 65%);
  opacity: 0.22;
  animation: drift-c 100s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(8vw, 4vh) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-6vw, -8vh) scale(1.15); } }
@keyframes drift-c { to { transform: translate(-12vw, 6vh) rotate(40deg); } }

/* Perspective grid floor — vanishing point */
.warp__grid {
  position: absolute;
  left: 50%; bottom: -10%;
  width: 220vw; height: 60vh;
  transform: translateX(-50%) rotateX(72deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,0.07) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.07) 0 1px, transparent 1px 60px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
}

/* Stars container — JS populates. Extends 3x viewport tall so parallax scroll keeps stars on screen */
.warp__stars {
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  height: 300vh;
  transform-origin: center center;
  will-change: transform;
  /* transform fully set by JS for parallax + warp */
}

.warp__star {
  position: absolute;
  width: var(--s, 1px);
  height: var(--s, 1px);
  background: var(--col, #fff);
  border-radius: 50%;
  opacity: var(--op, 0.6);
  box-shadow: 0 0 calc(var(--s, 1px) * 2) var(--col, #fff);
  will-change: transform;
}
.warp__star--twink {
  animation: twink var(--td, 3s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes twink {
  0%, 100% { opacity: var(--op, 0.6); }
  50%      { opacity: calc(var(--op, 0.6) * 0.15); }
}

/* Streaks container — JS spawns comets */
.warp__streaks { position: absolute; inset: 0; }
.streak {
  position: absolute;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--col, #fff), transparent);
  box-shadow: 0 0 12px var(--col, #fff);
  transform: translateX(-100%);
  animation: streak-fly var(--dur, 1.6s) linear forwards;
  pointer-events: none;
}
@keyframes streak-fly {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%, 90% { opacity: 0.85; }
  100% { transform: translateX(calc(100vw + 400px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .warp__nebula, .warp__star--twink, .streak,
  .warp__stars { animation: none !important; transform: none !important; }
}

/* Cinematic vignette */
.warp::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.6) 100%),
    radial-gradient(ellipse at top, rgba(255,37,69,0.08), transparent 50%);
}

/* ============================================================
   BRAND — top-left
   ============================================================ */
.brand {
  position: fixed;
  top: 1.4rem; left: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  z-index: 30;
  pointer-events: none;
}
.brand__face {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.08em;
}
.brand__name { color: var(--ink); }

/* ============================================================
   DOCK — right edge module nav
   ============================================================ */
.dock {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 30;
}
.dock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 28px;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  transition: all 220ms var(--ease-out);
}
.dock__btn:hover {
  color: var(--ink);
  border-color: var(--ink-ghost);
}
.dock__btn.is-active {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: rgba(255, 37, 69, 0.08);
  box-shadow: 0 0 14px var(--accent-glow);
  width: 44px;
}

/* ============================================================
   RETICLE — custom cursor
   ============================================================ */
.reticle {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 100;
  transform: translate(-1000px, -1000px);
  mix-blend-mode: difference;
  will-change: transform;
}
.reticle span { position: absolute; background: #fff; }
.reticle span:nth-child(1) { top: 0; left: 50%; width: 1px; height: 6px; transform: translateX(-50%); }
.reticle span:nth-child(2) { bottom: 0; left: 50%; width: 1px; height: 6px; transform: translateX(-50%); }
.reticle span:nth-child(3) { left: 0; top: 50%; height: 1px; width: 6px; transform: translateY(-50%); }
.reticle span:nth-child(4) { right: 0; top: 50%; height: 1px; width: 6px; transform: translateY(-50%); }
.reticle::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 4px; height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .reticle { display: none; }
}

/* ============================================================
   REEL — natural body scroll, sections are 100vh each
   ============================================================ */
.reel {
  position: relative;
  z-index: 1;
}

.step {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem;
  perspective: 900px;
  perspective-origin: 50% 50%;
  /* Kill any scroll-snap that might be inherited or default */
  scroll-snap-align: none;
}

/* ============================================================
   CARDS — INVISIBLE shell. Content inside floats in 3D space.
   No background, no border, no glass — just the data, hovering.
   ============================================================ */
.card {
  position: relative;
  width: min(620px, 94vw);
  padding: 32px 32px 28px;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform-style: preserve-3d;
  will-change: transform;
  /* Mouse parallax — JS sets --mx, --my (range -1 to 1) */
  transform:
    rotateY(calc(var(--mx, 0) * 14deg))
    rotateX(calc(var(--my, 0) * -10deg));
  transition: transform 320ms var(--ease-glide);
}

/* Per-section base rotation — each section has its own floating attitude */
.step[data-pose="0"] .card { --base-y:  0deg; --base-x:  0deg; }
.step[data-pose="1"] .card { --base-y: -8deg; --base-x:  2deg; }
.step[data-pose="2"] .card { --base-y:  8deg; --base-x: -2deg; }
.step[data-pose="3"] .card { --base-y: -6deg; --base-x:  3deg; }
.step[data-pose="4"] .card { --base-y:  7deg; --base-x: -3deg; }
.step[data-pose="5"] .card { --base-y:  0deg; --base-x:  0deg; }

.step .card {
  transform:
    rotateY(calc(var(--base-y, 0deg) + var(--mx, 0) * 14deg))
    rotateX(calc(var(--base-x, 0deg) + var(--my, 0) * -10deg));
}

/* All children participate in the 3D space */
/* preserve-3d for the cascade so per-child translateZ works,
   but NO will-change here — applying it to every text element thrashes GPU
   layers during scroll and was causing the "disappearing text" bug. */
.card > * { transform-style: preserve-3d; }

/* ============================================================
   FLOATING DEPTH LAYERS — each element pulled toward viewer
   on its own Z-axis. Heavy drop-shadow sells the float.
   ============================================================ */

/* Headers float deeper-back than data */
.card__head {
  transform: translateZ(40px);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7));
}

/* Hero face floats high in front */
.card__face {
  transform: translateZ(120px) rotateX(-4deg);
  filter:
    drop-shadow(0 24px 36px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 32px rgba(255, 255, 255, 0.4));
}

.card__h1 {
  transform: translateZ(160px) translateZ(0);
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  /* True 3D extruded block — 8 stacked solid shadows + soft drop */
  text-shadow:
    0 1px 0 #d8d8d8,
    0 2px 0 #b8b8b8,
    0 3px 0 #989898,
    0 4px 0 #787878,
    0 5px 0 #585858,
    0 6px 0 #404040,
    0 7px 0 #2a2a2a,
    0 8px 0 #181818,
    0 12px 18px rgba(0, 0, 0, 0.7),
    0 20px 40px rgba(0, 0, 0, 0.85);
}
.card__tag {
  transform: translateZ(100px) translateZ(0);
  color: var(--accent);
  /* Red extruded block */
  text-shadow:
    0 1px 0 #e8334c,
    0 2px 0 #d1283f,
    0 3px 0 #b91d33,
    0 4px 0 #a01629,
    0 5px 0 #6c0c19,
    0 6px 0 #3a050b,
    0 10px 16px rgba(255, 37, 69, 0.35),
    0 16px 30px rgba(0, 0, 0, 0.75);
}
.card__hint {
  transform: translateZ(30px);
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}
.card__lede {
  transform: translateZ(70px);
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.75);
}
.card__foot {
  transform: translateZ(20px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.65));
}

/* AUCTION TICKER — each row floats at its own depth, foreground forward */
.ticker { transform: translateZ(60px); }
.ticker li {
  background: rgba(18, 20, 32, 0.55);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ticker li:nth-child(1) { transform: translateZ(50px); }
.ticker li:nth-child(2) { transform: translateZ(30px); }
.ticker li:nth-child(3) { transform: translateZ(10px); }
.ticker li:nth-child(4) { transform: translateZ(-10px); }

/* GRADES — each grade hovers, top forward */
.grades { transform: translateZ(50px); }
.grade {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7));
}
.grade:nth-child(1) { transform: translateZ(45px); }
.grade:nth-child(2) { transform: translateZ(28px); }
.grade:nth-child(3) { transform: translateZ(14px); }
.grade:nth-child(4) { transform: translateZ(2px); }

/* FEED — terminal panel floats forward with heavy glass */
.feed {
  transform: translateZ(70px);
  background: rgba(4, 6, 14, 0.72);
  border: 1px solid var(--ink-ghost);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* STATS — biggest depth pop. Each number lifted */
.stats { transform: translateZ(60px); }
.stat {
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.85));
}
.stat:nth-child(1) { transform: translateZ(140px) rotateY(-3deg); }
.stat:nth-child(2) { transform: translateZ(180px); }
.stat:nth-child(3) { transform: translateZ(140px) rotateY( 3deg); }

/* ACCESS FORM — inputs float, button pops forward, label sits back */
.access { transform: translateZ(30px); }
.access__row {
  transform: translateZ(50px);
  background: rgba(6, 8, 16, 0.6);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
}
.access__row:focus-within {
  border-color: var(--accent-soft);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.6),
    0 0 20px var(--accent-glow);
}
.access__submit {
  transform: translateZ(130px);
  box-shadow:
    0 24px 50px rgba(255, 37, 69, 0.45),
    0 0 40px rgba(255, 37, 69, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.access__consent {
  margin: 12px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}
.access__consent a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 18px;
  margin: 0 0 14px;
}
.social a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 180ms ease;
}
.social a:hover,
.social a:focus-visible {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .card { transform: none !important; transition: none !important; }
  .card > *, .ticker li, .grade, .stat, .access__row, .access__submit {
    transform: none !important;
  }
}

/* ============================================================
   CARD HEAD — common
   ============================================================ */
.card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-ghost);
  padding-bottom: 0.85rem;
}
.card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  flex-shrink: 0;
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.card__dot--red { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@keyframes dot-pulse { 50% { opacity: 0.4; } }
.card__title { flex: 1; color: var(--ink); font-weight: 700; }
.card__time, .card__meta { color: var(--ink-faint); }
.card__meta em {
  font-style: normal;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px var(--accent-glow);
  margin-right: 0.25em;
  display: inline-block;
}
.card__meta em.is-counting {
  animation: count-pop 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); color: #fff; }
  100% { transform: scale(1); }
}
.card__pulse {
  width: 22px; height: 6px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: pulse-line 1.6s linear infinite;
}
@keyframes pulse-line {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.card__foot {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ink-ghost);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ============================================================
   HERO CARD
   ============================================================ */
.card--hero { text-align: left; }
.card__face {
  width: 124px; height: 124px;
  margin: 0 0 1.2rem;
  color: var(--ink);
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
}
.card__face svg { width: 100%; height: 100%; display: block; }
.card__face svg [data-eye] {
  transition: transform 200ms var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}
.card__h1 {
  font-family: var(--font-display);
  font-size: var(--type-mega);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 1rem;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.card__tag {
  font-family: var(--font-display);
  font-size: var(--type-large);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 1.2rem;
  color: var(--accent);
}
.card__hint {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.25em;
  color: var(--ink-faint);
  margin: 1.6rem 0 0;
  text-transform: uppercase;
  animation: hint-pulse 2.6s ease-in-out infinite;
}
@keyframes hint-pulse {
  50% { opacity: 1; transform: translateY(4px); }
  0%, 100% { opacity: 0.5; transform: translateY(0); }
}

/* ============================================================
   AUCTION TICKER
   ============================================================ */
.ticker {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.55rem;
  max-height: 260px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.ticker li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink);
  padding: 0.55rem 0.8rem;
  background: rgba(16, 18, 30, 0.5);
  border: 1px solid var(--ink-ghost);
  border-radius: 8px;
  animation: tick-in 600ms var(--ease-out);
}
@keyframes tick-in { from { opacity: 0; transform: translateY(8px); } }
.stamp {
  font-family: var(--font-display);
  font-size: var(--type-tiny);
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 0.15em 0.55em;
  border: 1.5px solid;
  transform: rotate(-4deg);
  flex-shrink: 0;
}
.stamp--buy  { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.stamp--pass { color: var(--ink-faint); border-color: var(--ink-faint); opacity: 0.7; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.12em;
  border: 1px solid var(--ink-ghost);
  border-radius: 3px;
}
.badge--ok     { color: var(--ok); border-color: rgba(93, 255, 177, 0.4); }
.badge--accent { color: var(--accent); border-color: var(--accent-soft); }
.badge--alert  { color: var(--warn); border-color: rgba(255, 189, 46, 0.45); background: rgba(255,189,46,0.06); }

/* ============================================================
   GRADES
   ============================================================ */
.grades { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-ghost);
}
.grade:last-child { border-bottom: none; }
.grade__name {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.1em;
}
.grade__bar {
  position: relative; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.grade__bar span {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ok), #fff);
  transform-origin: left;
  transform: scaleX(var(--w, 0));
  animation: bar-fill 1.4s var(--ease-out) backwards;
  animation-delay: 200ms;
}
@keyframes bar-fill { from { transform: scaleX(0); } }
.grade__score {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.2rem;
  letter-spacing: -0.02em;
  min-width: 1.8em; text-align: right;
}
.grade--flag .grade__name, .grade--flag .grade__score { color: var(--warn); }
.grade--flag .grade__bar span { background: linear-gradient(90deg, var(--accent), var(--warn)); }

/* ============================================================
   FEED (terminal)
   ============================================================ */
.feed {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  line-height: 1.65;
  color: var(--ink-soft);
  height: 280px; overflow: hidden;
  white-space: pre-wrap;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
.feed .ln--ts   { color: var(--ink-faint); }
.feed .ln--ok   { color: var(--ok); }
.feed .ln--warn { color: var(--warn); }
.feed .ln--err  { color: var(--accent); }
.feed .ln--face { color: var(--ink); font-weight: 700; }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
/* Mobile: flatten the stat 3D pop. The big translateZ values perspective-scale
   the huge numbers past the viewport edge AND trip an iOS Safari glitch where
   gradient-clipped text flickers during 3D transforms. Flat = clean + stable. */
@media (max-width: 700px) {
  .stats,
  .stat,
  .stat:nth-child(1),
  .stat:nth-child(2),
  .stat:nth-child(3) { transform: none !important; }
}
.stat {
  padding: 1rem 0;
  border-top: 1.5px solid var(--ink);
}
.stat--accent { border-top-color: var(--accent); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-stat);
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0 0 0.4rem;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat--accent .stat__num {
  background: linear-gradient(180deg, #ffcfd6 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ============================================================
   ACCESS / FORM
   ============================================================ */
.card--access {
  background:
    linear-gradient(135deg, rgba(255, 37, 69, 0.10) 0%, rgba(255,255,255,0.02) 100%);
}
.card__lede {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
}
.access {
  display: grid;
  gap: 1rem;
}
.access__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--ink-ghost);
  padding-bottom: 0.5rem;
  transition: border-color 200ms var(--ease-out);
}
.access__row:focus-within { border-bottom-color: var(--accent); }
.access__lbl {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.access__row input {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  background: transparent;
  border: none;
  outline: none;
  padding: 0.45rem 0;
  color: var(--ink);
  width: 100%;
  letter-spacing: 0.02em;
}
.access__row input::placeholder { color: var(--ink-ghost); }
.access__submit {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: var(--type-small);
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(255, 37, 69, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.access__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease-out);
}
.access__submit:hover, .access__submit:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 12px 32px rgba(255, 37, 69, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.access__submit:hover::before, .access__submit:focus-visible::before { transform: translateX(100%); }
.access__submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.access__arrow { transition: transform 250ms var(--ease-out); }
.access__submit:hover .access__arrow { transform: translateX(4px); }

/* ---- FIX: keep the waitlist card steady & clickable ------------------------
   Every .card tilts with the mouse (3D parallax) and this card's submit button
   is pushed 130px toward the viewer (translateZ). On a form that made the
   button swing with the tilt and snap flat on hover/disable as you moved to
   fill it out or click "Join" — it looked broken. Flatten just the waitlist
   card so the form holds still; the rest of the site keeps the 3D effect.
   (Same approach the site already uses under prefers-reduced-motion.) */
.step .card--access,
.card--access {
  transform: none !important;
  transition: none !important;
}
.card--access .access,
.card--access .access__row,
.card--access .access__submit {
  transform: none !important;
}
.access__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  min-height: 1em;
}
.access__status[data-state='error']   { color: var(--accent); }
.access__status[data-state='success'] { color: var(--ok); }

/* ============================================================
   POSE 6 + 7 — story + access positioning
   ============================================================ */
.step[data-pose="6"] .card { --base-y: -5deg; --base-x:  3deg; }
.step[data-pose="7"] .card { --base-y:  0deg; --base-x:  0deg; }

/* ============================================================
   PAIN PANEL — your monday
   ============================================================ */
.card--pain { text-align: left; }

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  transform: translateZ(40px);
  text-shadow: 0 0 12px var(--accent-glow);
}

.card__h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 0 0 2rem;
  transform: translateZ(140px);
  text-shadow:
    0 18px 36px rgba(0,0,0,0.85),
    0 4px 10px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.card__h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #ffcfd6 0%, var(--accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  transform: translateZ(70px);
}
.timeline li {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-ghost);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}
.timeline li:last-child { border-bottom: none; }
.timeline__t {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.timeline__e {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.timeline__e--miss {
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
  font-weight: 700;
}

.card--pain .card__lede {
  margin-top: 1.8rem;
  color: var(--ink);
  font-style: italic;
  font-size: var(--type-large);
  font-weight: 700;
  transform: translateZ(110px);
  text-shadow: 0 14px 30px rgba(0,0,0,0.8);
}

/* ============================================================
   STORY PANEL — built for my dad's lot
   ============================================================ */
.card--story { text-align: left; }
.card__body {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 1.6rem;
  transform: translateZ(80px);
  text-shadow: 0 10px 20px rgba(0,0,0,0.7);
}
.card__body em {
  font-style: normal;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -0.08em;
  text-shadow: 0 0 16px var(--accent-glow);
}
.card__sig {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin: 0;
  text-transform: uppercase;
  transform: translateZ(50px);
}

/* ============================================================
   LIGHTNING — rare full-page flash for drama
   ============================================================ */
.lightning {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.4) 0%, transparent 50%);
  opacity: 0;
  animation: lightning-strike 28s ease-out infinite;
  mix-blend-mode: screen;
}
@keyframes lightning-strike {
  0%, 96%, 100% { opacity: 0; }
  96.5% { opacity: 0.08; }
  97%   { opacity: 0; }
  97.4% { opacity: 0.12; }
  97.6% { opacity: 0.02; }
  98%   { opacity: 0.06; }
}
@media (prefers-reduced-motion: reduce) {
  .lightning { animation: none; }
}

/* ============================================================
   SCANLINE — subtle horizontal sweep across the whole page
   ============================================================ */
.scanline {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 49.6%, rgba(255, 37, 69, 0.025) 50%, transparent 50.4%);
  background-size: 100% 8px;
  animation: scanline-scroll 14s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes scanline-scroll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}
@media (prefers-reduced-motion: reduce) {
  .scanline { animation: none; }
}

/* ============================================================
   AMBIENT — floating data fragments drifting in deep background
   ============================================================ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient__frag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.10);
  white-space: nowrap;
  text-transform: uppercase;
  animation: frag-drift var(--dur, 80s) linear infinite;
  animation-delay: var(--dl, 0s);
}
.ambient__frag--accent { color: rgba(255, 37, 69, 0.14); }
@keyframes frag-drift {
  from { transform: translate3d(var(--fx, 0), 110vh, 0); }
  to   { transform: translate3d(var(--fx, 0), -120vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient__frag { animation: none; opacity: 0; }
}

/* ============================================================
   SYS — system status floating UI bottom-left
   ============================================================ */
.sys {
  position: fixed;
  bottom: 1.4rem;
  left: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  z-index: 30;
  pointer-events: none;
  padding: 0.4rem 0.7rem;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--ink-ghost);
  border-radius: 4px;
}
.sys__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.sys__label {
  transition: color 200ms ease-out;
}
@media (max-width: 720px) {
  .sys { font-size: 9px; padding: 0.3rem 0.55rem; }
}

/* ============================================================
   BIGSTATS — visual pain panel (3 huge floating numbers)
   ============================================================ */
.bigstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 1.5rem 0 1.8rem;
  transform: translateZ(80px);
}
@media (max-width: 640px) {
  .bigstats { grid-template-columns: 1fr; gap: 1.5rem; }
}
.bigstat { text-align: center; }
.bigstat:nth-child(1) { transform: translateZ(150px) rotateY(-5deg); }
.bigstat:nth-child(2) { transform: translateZ(200px); }
.bigstat:nth-child(3) { transform: translateZ(150px) rotateY( 5deg); }

.bigstat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 7vw + 1rem, 7rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0 0 0.5rem;
  color: #ffffff;
  text-shadow:
    0 1px 0 #d8d8d8,
    0 2px 0 #b8b8b8,
    0 3px 0 #989898,
    0 4px 0 #787878,
    0 5px 0 #585858,
    0 6px 0 #404040,
    0 7px 0 #2a2a2a,
    0 8px 0 #181818,
    0 9px 0 #0a0a0a,
    0 14px 22px rgba(0, 0, 0, 0.75),
    0 24px 50px rgba(0, 0, 0, 0.9);
}
.bigstat--miss .bigstat__num {
  color: #ff4d6a;
  text-shadow:
    0 1px 0 #e8334c,
    0 2px 0 #d1283f,
    0 3px 0 #b91d33,
    0 4px 0 #a01629,
    0 5px 0 #871020,
    0 6px 0 #6c0c19,
    0 7px 0 #520811,
    0 8px 0 #3a050b,
    0 9px 0 #240306,
    0 14px 22px rgba(255, 37, 69, 0.45),
    0 24px 50px rgba(0, 0, 0, 0.85);
}
.bigstat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.bigstat--miss .bigstat__label { color: var(--accent-soft); }

/* ============================================================
   BIGNUMBER — visual story panel (31 YEARS)
   ============================================================ */
.bignumber {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0 2.4rem;
  transform: translateZ(200px);
}
.bignumber__val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(8rem, 22vw, 22rem);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: #ffffff;
  /* MEGA 3D — 14-stack extrusion for the biggest number on the page */
  text-shadow:
    0 1px 0 #ebebeb,
    0 2px 0 #d8d8d8,
    0 3px 0 #c5c5c5,
    0 4px 0 #b0b0b0,
    0 5px 0 #989898,
    0 6px 0 #808080,
    0 7px 0 #686868,
    0 8px 0 #505050,
    0 9px 0 #383838,
    0 10px 0 #202020,
    0 11px 0 #0e0e0e,
    0 12px 0 #050505,
    0 18px 30px rgba(0, 0, 0, 0.80),
    0 32px 64px rgba(0, 0, 0, 0.95);
}
.bignumber__unit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: 0.1em;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
}
.bignumber__cap {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  transform: translateZ(90px);
  text-shadow: 0 14px 26px rgba(0,0,0,0.75);
}
.bignumber__cap--accent {
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}
.bignumber__cap em {
  font-style: normal;
  color: var(--accent);
  letter-spacing: -0.08em;
  text-shadow: 0 0 18px var(--accent-glow);
}
.card--story .card__sig {
  text-align: center;
  margin-top: 2rem;
  transform: translateZ(40px);
}

/* ============================================================
   VACATION PANEL — Mini Nash handles the lot while you're away
   Palm tree + sunset + :) on beach + speech bubble
   Techno-tropical aesthetic
   ============================================================ */
.card--vacation {
  text-align: left;
  transform-style: preserve-3d;
  /* Wider card to fit the scene */
  width: min(720px, 94vw);
}

.vac-scene {
  margin: 1rem 0;
  border: 1px solid var(--ink-ghost);
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255, 37, 69, 0.06) 0%,
      rgba(81, 136, 255, 0.04) 60%,
      rgba(0, 0, 0, 0.3) 100%);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateZ(80px);
  position: relative;
}
.vac-scene::before {
  /* Scan line overlay for techno feel */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(81, 136, 255, 0.04) 3px,
    transparent 4px
  );
  pointer-events: none;
}

.vac-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Sun pulses slowly */
.vac-sun {
  filter: drop-shadow(0 0 40px rgba(255, 37, 69, 0.7));
  animation: vac-sun-pulse 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes vac-sun-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

/* Rays rotate slowly */
.vac-rays {
  animation: vac-rays-spin 30s linear infinite;
  transform-origin: 450px 160px;
}
@keyframes vac-rays-spin {
  to { transform: translate(450px, 160px) rotate(360deg); }
}

/* Palm fronds sway gently */
.vac-fronds {
  animation: vac-sway 6s ease-in-out infinite;
  transform-origin: 100px 120px;
}
@keyframes vac-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-3deg); }
}

/* Waves drift horizontally */
.vac-waves path {
  animation: vac-waves 8s linear infinite;
}
@keyframes vac-waves {
  to { transform: translateX(-60px); }
}

/* :) bobs gently */
.vac-nash {
  animation: vac-bob 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.6));
}
@keyframes vac-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .vac-sun, .vac-rays, .vac-fronds, .vac-waves path, .vac-nash {
    animation: none !important;
  }
}

/* Speech bubble */
.vac-bubble {
  position: relative;
  margin: 1rem 0 1.2rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-ghost);
  border-radius: 14px;
  transform: translateZ(120px);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vac-bubble::before {
  /* Tail pointing to :) */
  content: '';
  position: absolute;
  top: -10px;
  left: 36%;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 1px solid var(--ink-ghost);
  border-top: 1px solid var(--ink-ghost);
  transform: rotate(45deg);
}
.vac-bubble__head {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}
.vac-bubble__text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  min-height: 3em;
}
.vac-bubble__text::after {
  content: '▍';
  margin-left: 2px;
  color: var(--accent);
  animation: blink-caret 1s steps(2) infinite;
}
.vac-bubble__text.is-done::after { display: none; }

/* LEAD INTERCEPT (legacy — kept for any orphan refs but no longer used) */
.card--intercept { text-align: left; transform-style: preserve-3d; }

/* Card pose for additional panels (8-12) */
.step[data-pose="8"]  .card { --base-y:  5deg; --base-x: -3deg; }
.step[data-pose="9"]  .card { --base-y: -6deg; --base-x:  2deg; }
.step[data-pose="10"] .card { --base-y:  7deg; --base-x: -2deg; }
.step[data-pose="11"] .card { --base-y: -5deg; --base-x:  3deg; }
.step[data-pose="12"] .card { --base-y:  0deg; --base-x:  0deg; }

/* ============================================================
   GROUP CHATS — Mini Nash in 3 dealer chats at once
   ============================================================ */
.card--chats { text-align: left; width: min(720px, 94vw); }

.chats {
  display: grid;
  gap: 0.85rem;
  margin: 0.5rem 0 0;
  transform: translateZ(80px);
}
.chats__pane {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
}
.chats__head {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ink-ghost);
}

.chat-line {
  font-family: var(--font-mono);
  font-size: 0.825rem;
  line-height: 1.5;
  padding: 0.45rem 0.7rem;
  margin: 0.35rem 0;
  border-radius: 8px;
  letter-spacing: 0.01em;
}
.chat-line b {
  font-weight: 700;
  color: var(--ink-faint);
  margin-right: 0.35em;
  letter-spacing: 0.08em;
}
.chat-line--in {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-soft);
}
.chat-line--in b { color: var(--ok); }
.chat-line--out {
  background: rgba(255, 37, 69, 0.12);
  border: 1px solid var(--accent-soft);
  color: var(--ink);
}
.chat-line--out b { color: var(--accent); }

/* ============================================================
   SALES COACH — Mini Nash teaching a rep
   ============================================================ */
.card--coach { text-align: left; width: min(680px, 94vw); }

.coach-thread {
  display: grid;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
  transform: translateZ(80px);
}

.chat-line--cta {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.coach-invite {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  transform: translateZ(120px);
}
.coach-invite__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.7rem;
  background: var(--accent);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-mono);
  line-height: 1;
}
.coach-invite__day { font-size: 0.6875rem; letter-spacing: 0.18em; font-weight: 700; }
.coach-invite__time { font-size: 0.95rem; font-weight: 800; margin-top: 0.2rem; }
.coach-invite__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.15rem;
  color: var(--ink);
}
.coach-invite__meta {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  margin: 0;
}
.coach-invite__btn {
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  font-weight: 800;
  cursor: pointer;
}
.coach-invite__btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   CRM ANALYSIS
   ============================================================ */
.card--crm { text-align: left; width: min(700px, 94vw); }

.crm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin: 0.6rem 0 1.2rem;
  transform: translateZ(80px);
}
@media (max-width: 640px) {
  .crm-stats { grid-template-columns: repeat(2, 1fr); }
}
.crm-stat {
  padding: 0.75rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-ghost);
  border-radius: 8px;
  text-align: center;
}
.crm-stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.crm-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.crm-stat--miss .crm-stat__num   { color: var(--accent); }
.crm-stat--ghost .crm-stat__num  { color: var(--warn); }
.crm-stat--win .crm-stat__num    { color: var(--ok); }

.crm-callout {
  padding: 0.85rem 1rem;
  background: rgba(255, 189, 46, 0.08);
  border: 1px solid rgba(255, 189, 46, 0.4);
  border-radius: 10px;
  transform: translateZ(60px);
}
.crm-callout__head {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--warn);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}
.crm-callout__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--warn);
}
.crm-callout__note {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0;
}
.crm-callout__note b { color: var(--accent); font-weight: 700; margin-right: 0.3em; }

/* ============================================================
   INVENTORY ANALYSIS
   ============================================================ */
.card--inventory { text-align: left; width: min(720px, 94vw); }

.inv {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  transform: translateZ(80px);
}
.inv__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-ghost);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
}
.inv__car  { letter-spacing: 0.06em; }
.inv__days { color: var(--ink-faint); letter-spacing: 0.05em; }
.inv__verdict {
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.inv__row--up   { border-color: rgba(93, 255, 177, 0.35); background: rgba(93, 255, 177, 0.04); }
.inv__row--up   .inv__verdict { color: var(--ok); }
.inv__row--aged { border-color: var(--accent-soft); background: rgba(255, 37, 69, 0.06); }
.inv__row--aged .inv__verdict { color: var(--accent); }
.inv__row--warn { border-color: rgba(255, 189, 46, 0.4); background: rgba(255, 189, 46, 0.05); }
.inv__row--warn .inv__verdict { color: var(--warn); }

/* ============================================================
   SELF-EVOLVING — features Mini Nash installs on its own
   ============================================================ */
.card--evolve { text-align: left; width: min(700px, 94vw); }

.evolve {
  list-style: none;
  margin: 0.5rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  transform: translateZ(80px);
}
.evolve__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
}
.evolve__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.evolve__body { min-width: 0; }
.evolve__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}
.evolve__why {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}
.card--evolve .card__lede {
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--type-large);
  text-align: center;
  margin: 1rem 0 0;
  transform: translateZ(110px);
  text-shadow: 0 14px 26px rgba(0,0,0,0.75);
}
.card--evolve .card__lede em {
  font-style: normal;
  color: var(--accent);
  letter-spacing: -0.08em;
  text-shadow: 0 0 14px var(--accent-glow);
}

.intercept__call {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 37, 69, 0.10);
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0 1rem;
  font-family: var(--font-mono);
  font-size: var(--type-small);
  color: var(--ink);
  transform: translateZ(80px);
  box-shadow: 0 14px 32px rgba(255, 37, 69, 0.25);
}
.intercept__pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: ring-pulse 0.9s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.4; }
}
.intercept__num   { flex: 1; letter-spacing: 0.05em; }
.intercept__state { color: var(--accent); letter-spacing: 0.2em; font-weight: 700; }

.intercept__match {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  margin: 0 0 1rem;
  transform: translateZ(100px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
.intercept__matchhead {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--ok);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}
.intercept__matchhead em {
  font-style: normal;
  color: var(--ink-faint);
}
.intercept__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1rem;
}
.intercept__facts li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.08em;
  align-items: baseline;
}
.intercept__facts span { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.16em; }
.intercept__facts b    { color: var(--ink); font-weight: 600; }

.intercept__draft {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-ghost);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  transform: translateZ(120px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
}
.intercept__drafthead {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}
.intercept__bubble {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--accent);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  margin: 0 0 0.85rem;
  min-height: 2.6em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 28px rgba(255, 37, 69, 0.45);
}
.intercept__bubble::after {
  content: '▍';
  margin-left: 2px;
  animation: blink-caret 1s steps(2) infinite;
}
.intercept__bubble.is-done::after { display: none; }
@keyframes blink-caret { 50% { opacity: 0; } }

.intercept__send {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  font-weight: 800;
  cursor: pointer;
  float: right;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.intercept__send:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Story + pain visual cards align center */
.card--visual { text-align: center; }
.card--visual .card__eyebrow { text-align: center; }
.card--visual .card__lede {
  font-style: italic;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--type-large);
  transform: translateZ(110px);
  text-shadow: 0 14px 30px rgba(0,0,0,0.8);
  text-align: center;
}

/* ============================================================
   LASERS — beams shooting across the scene
   ============================================================ */
.lasers {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.laser {
  position: absolute;
  pointer-events: none;
}
.laser--h {
  height: 2px;
  width: 32vw;
  background: linear-gradient(90deg, transparent 0%, var(--col, #fff) 30%, var(--col, #fff) 70%, transparent 100%);
  box-shadow: 0 0 20px var(--col, #fff), 0 0 4px var(--col, #fff);
  animation: laser-h-fly var(--dur, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: translateX(-32vw);
}
.laser--v {
  width: 2px;
  height: 32vh;
  background: linear-gradient(180deg, transparent 0%, var(--col, #fff) 30%, var(--col, #fff) 70%, transparent 100%);
  box-shadow: 0 0 20px var(--col, #fff), 0 0 4px var(--col, #fff);
  animation: laser-v-fly var(--dur, 0.7s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: translateY(-32vh);
}
@keyframes laser-h-fly {
  0%   { transform: translateX(-32vw); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}
@keyframes laser-v-fly {
  0%   { transform: translateY(-32vh); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lasers { display: none; }
}

/* ============================================================
   ORBS — drifting glow blobs
   ============================================================ */
.orbs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  /* Smaller blur radius = much less GPU cost. Gradient softness picks up the slack. */
  filter: blur(20px);
  mix-blend-mode: screen;
  will-change: transform;
  animation: orb-drift var(--dur, 30s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
}
@keyframes orb-drift {
  0%   { transform: translate(var(--fx, 0), var(--fy, 0)) scale(1); opacity: var(--op, 0.5); }
  50%  { transform: translate(calc(var(--fx, 0) + 20vw), calc(var(--fy, 0) - 15vh)) scale(1.3); opacity: calc(var(--op, 0.5) * 1.5); }
  100% { transform: translate(calc(var(--fx, 0) - 15vw), calc(var(--fy, 0) + 20vh)) scale(0.9); opacity: var(--op, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* ============================================================
   ROLLERCOASTER — grid lines always pull toward viewer
   Plus scroll-velocity-driven camera tilt
   ============================================================ */
.warp__grid {
  animation: grid-pull 5s linear infinite;
}
@keyframes grid-pull {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .warp__grid { animation: none; }
}

/* ============================================================
   DUST — foreground particles racing past for "flying forward" feel
   These move FAST as you scroll = visceral forward motion
   ============================================================ */
.dust {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}
.dust__particle {
  position: absolute;
  width: 1.5px;
  height: var(--len, 18px);
  background: linear-gradient(180deg, transparent, var(--col, rgba(255,255,255,0.7)), transparent);
  opacity: 0;
  will-change: transform, opacity;
  /* CSS animation drives constant drift; JS adds extra velocity-driven boost */
  animation: dust-fall var(--dur, 6s) linear infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes dust-fall {
  0%   { transform: translateY(-20vh) translateZ(0); opacity: 0; }
  10%  { opacity: var(--op, 0.6); }
  90%  { opacity: var(--op, 0.6); }
  100% { transform: translateY(120vh) translateZ(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dust { display: none; }
}

/* Scroll-velocity camera tilt — DISABLED (was causing text to vanish during scroll
   because rotating the whole reel forced sub-pixel re-rasterization on every text
   element). The "rollercoaster" feel comes from parallax stars + dust + grid pull. */
.reel {
  transform-style: flat;
}

/* During fast scroll, blur the warp + dim stars slightly */
.warp__stars {
  /* No scroll-driven blur — re-rasterizing 150 stars every frame was a major
     cost. The scaleY stretch (set in JS) already sells the warp. */
  filter: none;
}
.warp__nebula {
  /* Static blur so the GPU caches it as one texture and scroll just transforms
     the cached layer, instead of re-blurring 3 huge nebulas every frame. */
  filter: blur(40px);
}

/* ============================================================
   LOW-POWER TIER — toggled by `.perf-lite` (set in JS for weaker
   devices: ≤4 cores / ≤4GB / coarse pointer / small screen).
   Strips the most GPU-hungry always-on effects so the page stays
   smooth on ordinary laptops and phones.
   ============================================================ */
.perf-lite .lightning,
.perf-lite .scanline,
.perf-lite .reticle,
.perf-lite .orbs,
.perf-lite .lasers { display: none !important; }

/* Native cursor back, since the custom reticle is hidden. */
.perf-lite, .perf-lite body { cursor: auto; }

/* One fewer large blurred layer; freeze nebula drift. */
.perf-lite .warp__nebula--c { display: none; }
.perf-lite .warp__nebula { animation: none; filter: blur(32px); }

/* Cheaper stars — drop per-element glow and twinkle repaints. */
.perf-lite .warp__star { box-shadow: none !important; }
.perf-lite .warp__star--twink { animation: none !important; }

/* ============================================================
   SEVERE TIER — `.perf-min` (set by the FPS watchdog when the
   device renders below ~32fps, e.g. a no-GPU VM). Near-static:
   freezes nearly all continuous motion so scrolling stays usable.
   ============================================================ */
.perf-min .warp__nebula,
.perf-min .warp__grid,
.perf-min .warp__star--twink,
.perf-min .ambient__frag { animation: none !important; }
.perf-min .ambient,
.perf-min .dust,
.perf-min .streak,
.perf-min .lightning,
.perf-min .scanline { display: none !important; }

/* ============================================================
   TOUCH / MOBILE — flatten the mouse-driven 3D so the page is
   smooth, tappable, and overflow-free on phones and tablets.
   Desktop (fine pointer w/ hover) is intentionally untouched.
   Gated on coarse pointer AND mirrored at narrow widths so a
   small touch laptop or an emulator both get the clean layout.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  /* No mouse parallax / 3D tilt — the JS already stops driving --mx/--my,
     this guarantees a flat plane even if a stray pointer event slips through.
     The deep translateZ card-internals are the main cause of clipped text and
     the "not-smooth" feel on touch, so neutralize the whole 3D cascade. */
  .step { perspective: none; }
  .card,
  .step .card,
  .step[data-pose] .card { transform: none !important; transition: none !important; }
  .card > *,
  .ticker, .ticker li,
  .grades, .grade,
  .feed,
  .stats, .stat,
  .access, .access__row, .access__submit,
  .card__head, .card__face, .card__h1, .card__tag, .card__hint,
  .card__lede, .card__foot, .card__eyebrow, .card__h2, .card__sig, .card__body,
  .chats, .coach-thread, .crm-stats, .crm-callout, .inv, .evolve,
  .bigstats, .bigstat, .bignumber, .bignumber__cap, .vac-scene, .vac-bubble,
  .timeline, .intercept__call, .intercept__match, .intercept__draft {
    transform: none !important;
  }

  /* Dock no longer overlaps card content. Pin it to the bottom as a slim
     horizontal rail; cards then own the full width without colliding. */
  .dock {
    top: auto;
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    max-width: 94vw;
    padding: 0.35rem 0.5rem;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
  .dock__btn { width: 30px; height: 32px; }
  .dock__btn.is-active { width: 34px; }

  /* Keep the bottom dock from sitting on top of the waitlist CTA / footer. */
  .card--access { padding-bottom: 3.5rem; }

  /* The bottom-left "// SYS READY" chip would collide with the new bottom
     dock rail. It's a decorative HUD element (aria-hidden) — hide it on touch. */
  .sys { display: none; }
}

/* Width-based mirror — covers touch laptops, narrow windows, and emulators
   that may not report coarse pointer but are still phone-width. */
@media (max-width: 560px) {
  .step { perspective: none; padding: 3.25rem 1rem; }
  .card { width: min(620px, 100%); padding: 24px 18px 24px; }

  /* Coach invite: stop the 3-column grid from clipping the title + button.
     Stack the meeting block vertically so nothing runs under the edge. */
  .coach-invite {
    grid-template-columns: auto 1fr;
    row-gap: 0.6rem;
  }
  .coach-invite__btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
    padding: 0.7rem 1rem;
  }

  /* Inventory rows: let the verdict wrap under the car instead of clipping. */
  .inv__row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.8rem;
  }
  .inv__verdict { grid-column: 1 / -1; }

  /* Chat lines: allow long words to wrap rather than overflow the pane. */
  .chat-line { overflow-wrap: anywhere; }

  /* Taller form inputs so each field is an easy tap target. */
  .access__row input { padding: 0.7rem 0; }

  /* Tappable footer / social / consent links — meet ~44px touch target. */
  .social { gap: 4px 10px; }
  .social a { padding: 0.55rem 0.4rem; }
  .access__consent a,
  .card__foot a { display: inline-block; padding: 0.3rem 0; }

  /* Hide the tiny ambient drift fragments on phones — they extend past the
     viewport and add render churn for no real visual payoff at this size. */
  .ambient { display: none; }
}