/* Kaizen Quest — landing site
   Layout: full-bleed night-sky bands, 1200px content column, parallax layers driven by js/main.js */
:root {
  --night: #0d0c1e;
  --ink: #121127;
  --dusk: #17153a;
  --panel: #1e1c3d;
  --line: #34316a;
  --text: #f4f1ff;
  --muted: #c9c5ee;
  --dim: #a9a5d6;
  --gold: #ffd34e;
  --gold-deep: #c98f00;
  --sakura: #ff5c93;
  --sakura-soft: #ff9fbd;
  --cyan: #5fe1e6;
  --cyan-deep: #2c9aa0;
  --violet: #b48cff;
  --danger: #ff6b6b;
  --font-display: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: hidden; }
body { margin: 0; background: var(--night); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.pixel { font-family: var(--font-display); letter-spacing: 0.5px; }
h1, h2, h3 { text-wrap: balance; }

/* page blur while the waitlist gate is open */
.site { transition: filter .6s ease, transform .6s ease; }
body.gated .site { filter: blur(12px) brightness(.65); transform: scale(1.01); pointer-events: none; user-select: none; }
body.gated { overflow: hidden; }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top, 0px); transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(13, 12, 30, .82); backdrop-filter: blur(10px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { font-family: var(--font-display); font-size: 14px; color: var(--gold); text-shadow: 3px 3px 0 #c93c72; text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: #e9e6ff; text-decoration: none; font-weight: 700; font-size: 15px; }
.nav-links a:hover { color: var(--gold); }
@media (max-width: 820px) { .nav-links a { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 15px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(3px); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 var(--gold-deep); }
.btn-cyan { background: var(--cyan); color: var(--ink); box-shadow: 0 5px 0 var(--cyan-deep); }
.btn-ghost { background: transparent; color: var(--text); border: 2px solid #5b57a0; }
.btn-lg { min-height: 60px; padding: 0 30px; font-family: var(--font-display); font-size: 12px; }

/* hero + parallax */
.hero { position: relative; min-height: 820px; overflow: hidden; background: var(--dusk); }
.layer { position: absolute; left: 0; right: 0; will-change: transform; pointer-events: none; }
.layer-sky { inset: -20% 0 0; }
.star { position: absolute; animation: twinkle var(--d, 2s) ease-in-out var(--dl, 0s) infinite; }
.moon { position: absolute; right: 14%; top: 18%; width: 74px; height: 74px; background: #fff1c2; box-shadow: 0 0 70px #fff1c2; }
.moon::after { content: ""; position: absolute; left: -14px; top: 18px; width: 102px; height: 38px; background: #fff1c2; }
.layer-mtn { bottom: 20%; height: 36%; background: #2a2360; clip-path: polygon(0 60%, 9% 32%, 20% 56%, 33% 14%, 46% 52%, 59% 24%, 72% 56%, 85% 18%, 100% 46%, 100% 100%, 0 100%); }
.layer-mtn2 { bottom: 14%; height: 26%; background: #322a6c; clip-path: polygon(0 70%, 14% 40%, 28% 64%, 42% 34%, 58% 62%, 70% 38%, 84% 66%, 100% 42%, 100% 100%, 0 100%); }
.layer-ground { bottom: 0; height: 22%; background: #3a2e6e; border-top: 10px solid #5b4ba0; }
.petal { position: absolute; width: 10px; height: 10px; background: var(--sakura-soft); opacity: .8; animation: fall var(--d, 9s) linear var(--dl, 0s) infinite; }
.hero-inner { position: relative; z-index: 2; min-height: 820px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-block: 130px 70px; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.tag { align-self: flex-start; font-family: var(--font-display); font-size: 11px; padding: 10px 14px; border-radius: 999px; background: #2a1730; color: var(--sakura-soft); border: 2px solid var(--sakura); }
.hero h1 { margin: 0; font-size: clamp(44px, 7.2vw, 92px); line-height: 1.02; letter-spacing: -2px; font-weight: 800; }
.hero h1 span { color: var(--gold); }
.lead { margin: 0; max-width: 560px; font-size: clamp(17px, 1.7vw, 21px); color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-art { flex: 1 1 360px; position: relative; height: 480px; display: flex; align-items: flex-end; justify-content: center; }
.aura { position: absolute; left: 50%; bottom: 20px; width: 380px; max-width: 100%; height: 440px; transform: translateX(-50%); border-radius: 45% 45% 30% 30%; background: var(--cyan); opacity: .2; animation: glow 1.6s ease-in-out infinite; }
.flame { position: absolute; bottom: 20px; width: 18px; background: var(--cyan); animation: flame var(--d, .8s) ease-in-out var(--dl, 0s) infinite; }

/* sections */
.band { position: relative; padding-block: 110px; overflow: hidden; }
.band-ink { background: var(--ink); }
.band-dusk { background: var(--dusk); }
.band-blood { background: #1a0f24; }
.head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 54px; }
.eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; }
.head h2 { margin: 0; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; }
.head p { margin: 0; max-width: 640px; color: var(--muted); font-size: 18px; }

.grid { display: grid; gap: 20px; }
.grid-feat { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 24px; background: rgba(30, 28, 61, .86); border: 2px solid var(--line); min-width: 0; }
.card h3 { margin: 0; font-size: 21px; font-weight: 800; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ink); border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; }
.icon svg { width: 30px; height: 30px; }

/* screenshots fan */
.shots { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.4vw, 34px); padding-top: 70px; }
.shots::before { content: ""; position: absolute; left: 50%; top: 52%; width: min(900px, 100%); height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: #5b4ba0; opacity: .35; filter: blur(70px); }
.shot { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: rotate(var(--r)) translateY(var(--y)); }
.shot .float { animation: float var(--d, 5s) ease-in-out var(--dl, 0s) infinite; }
.phone { width: clamp(160px, 18vw, 232px); aspect-ratio: 390 / 844; max-width: 100%; border-radius: 34px; padding: 7px; background: linear-gradient(160deg, #4a4690, #1e1c3d); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 2px var(--c); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.shot figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.shot figcaption b { font-size: 16px; }
.shot figcaption span { font-size: 13px; font-weight: 700; color: var(--c); }

/* steps */
.grid-steps { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step-n { font-family: var(--font-display); font-size: 28px; }
.float-mon { position: absolute; opacity: .45; }

/* forms */
.grid-forms { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); justify-items: center; }
.form-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 210px; }
.form-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 22px; background: #241d52; border: 3px solid var(--c); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.form-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: #3a2e6e; }
.form-stage .aura { width: 150px; height: 200px; bottom: 14px; background: var(--c); }
.form-stage svg { filter: drop-shadow(0 0 5px var(--c)); position: relative; z-index: 1; margin-bottom: 14%; margin-left: 30px; width: 76%; height: auto; }
.form-card .pixel { font-size: 12px; color: var(--c); }
.form-card small { color: var(--dim); font-size: 14px; }

/* monsters */
.grid-mons { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mon { align-items: center; text-align: center; }
.mon .art { height: 130px; display: flex; align-items: flex-end; justify-content: center; }
.mon b { font-size: 16px; }
.mon span { font-size: 13px; color: var(--sakura-soft); font-weight: 700; }

/* final cta + footer */
.final { text-align: center; }
.final .wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 760px; }
.final h2 { margin: 0; font-size: clamp(32px, 5vw, 60px); line-height: 1.1; }
.final p { margin: 0; color: var(--muted); font-size: 18px; }
footer { background: var(--night); padding-block: 30px calc(30px + env(safe-area-inset-bottom, 0px)); color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* waitlist gate */
.gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: rgba(13, 12, 30, .45); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; overflow-y: auto; }
body.gated .gate { opacity: 1; visibility: visible; }
.gate-card { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 26px; border-radius: 28px; background: #1a1935; border: 3px solid var(--gold); box-shadow: 0 0 90px rgba(255, 211, 78, .22); transform: translateY(18px) scale(.97); transition: transform .45s ease; }
body.gated .gate-card { transform: none; }
.gate-stage { position: relative; height: 170px; border-radius: 20px; background: #241d52; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.gate-stage .aura { width: 170px; height: 180px; bottom: 6px; background: #ff8a3d; }
.gate-stage svg { filter: drop-shadow(0 0 4px #ff8a3d) drop-shadow(0 0 10px #ff6a2b); position: relative; margin-left: 40px; margin-bottom: 10px; animation: breathe 1.6s ease-in-out infinite; }
.gate h2 { margin: 0; font-size: 28px; line-height: 1.15; text-align: center; }
.gate p { margin: 0; text-align: center; color: var(--muted); font-size: 15px; }
.gate label { font-size: 13px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field input { height: 54px; padding: 0 16px; border-radius: 14px; border: 2px solid #5b57a0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 16px; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.err { min-height: 20px; font-size: 13px; font-weight: 700; color: #ff8a8a; }
.fine { font-size: 12px; color: var(--dim); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .7; cursor: progress; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: max-content; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 16px; background: #1a2a2e; border: 2px solid var(--cyan); color: #e6ffff; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transform: translate(-50%, 140%); transition: transform .4s ease; }
.toast.show { transform: translate(-50%, 0); }

@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes glow { 0%, 100% { opacity: .16; transform: translateX(-50%) scale(1); } 50% { opacity: .34; transform: translateX(-50%) scale(1.06); } }
@keyframes flame { 0%, 100% { transform: translateY(0) scaleY(1); opacity: .9; } 50% { transform: translateY(-20px) scaleY(1.4); opacity: .45; } }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fall { 0% { transform: translate(0, -10vh) rotate(0); } 100% { transform: translate(-120px, 110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* brand logo */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; flex: none; }
.gate-logo { display: block; width: 150px; height: auto; margin: 0 auto 2px; image-rendering: pixelated; filter: drop-shadow(0 0 24px rgba(255, 138, 61, .25)); }
@media (max-width: 420px) { .gate-logo { width: 120px; } }

/* hero: animated level-up logo (replaces the hero sprite) */
.lvl { --T: 6.5s; position: relative; width: min(440px, 84vw); aspect-ratio: 1; margin-bottom: 10px; }
.lvl::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 211, 78, .35), transparent); animation: lvl-floor var(--T) ease-out infinite; }
.lvl-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lvl-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: var(--T) infinite; }
.lvl-bar.b1 { animation-name: lvl-b1; filter: drop-shadow(0 0 .4px #5fe1e6); }
.lvl-bar.b2 { animation-name: lvl-b2; filter: drop-shadow(0 0 .4px #b48cff); }
.lvl-bar.b3 { animation-name: lvl-b3; filter: drop-shadow(0 0 .4px #ff5c93); }
.lvl-bar.b4 { animation-name: lvl-b4; filter: drop-shadow(0 0 .5px #ffd34e); }
@keyframes lvl-b1 { 0%, 4% { transform: scaleY(0); animation-timing-function: steps(4, end); } 12%, 88% { transform: scaleY(1); animation-timing-function: steps(4, end); } 95%, 100% { transform: scaleY(0); } }
@keyframes lvl-b2 { 0%, 12% { transform: scaleY(0); animation-timing-function: steps(7, end); } 21%, 88% { transform: scaleY(1); animation-timing-function: steps(4, end); } 95%, 100% { transform: scaleY(0); } }
@keyframes lvl-b3 { 0%, 21% { transform: scaleY(0); animation-timing-function: steps(10, end); } 30%, 88% { transform: scaleY(1); animation-timing-function: steps(4, end); } 95%, 100% { transform: scaleY(0); } }
@keyframes lvl-b4 { 0%, 30% { transform: scaleY(0); animation-timing-function: steps(13, end); } 41%, 88% { transform: scaleY(1); animation-timing-function: steps(4, end); } 95%, 100% { transform: scaleY(0); } }

.lvl-flame { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: lvl-ignite var(--T) infinite; filter: drop-shadow(0 0 .6px #ff8a3d) drop-shadow(0 0 1.4px #ff6a2b); }
@keyframes lvl-ignite { 0%, 41% { opacity: 0; transform: scale(0); } 44% { opacity: 1; transform: scale(1.5); } 47% { transform: scale(.9); } 50%, 86% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(0); } }
.lvl-core { animation: lvl-flicker .36s steps(1, end) infinite; }
.lvl-ember { animation: lvl-ember 1.1s steps(3, end) infinite; }
@keyframes lvl-flicker { 50% { fill: #FFB020; } }
@keyframes lvl-ember { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-1px, -3px); opacity: 0; } }

.lvl-fx { position: absolute; transform: translate(-50%, 0); font-size: clamp(9px, 1.1vw, 11px); color: var(--gold); text-shadow: 2px 2px 0 #c93c72; white-space: nowrap; opacity: 0; animation: var(--T) linear infinite; }
.lvl-fx.f1 { left: 11.4%; top: 66%; animation-name: lvl-fx1; }
.lvl-fx.f2 { left: 34%; top: 53%; animation-name: lvl-fx2; color: var(--violet); }
.lvl-fx.f3 { left: 56.8%; top: 39%; animation-name: lvl-fx3; color: var(--sakura-soft); }
@keyframes lvl-fx1 { 0%, 12% { opacity: 0; transform: translate(-50%, 0); } 14% { opacity: 1; } 26% { opacity: 0; transform: translate(-50%, -48px); } 100% { opacity: 0; } }
@keyframes lvl-fx2 { 0%, 21% { opacity: 0; transform: translate(-50%, 0); } 23% { opacity: 1; } 35% { opacity: 0; transform: translate(-50%, -48px); } 100% { opacity: 0; } }
@keyframes lvl-fx3 { 0%, 30% { opacity: 0; transform: translate(-50%, 0); } 32% { opacity: 1; } 44% { opacity: 0; transform: translate(-50%, -48px); } 100% { opacity: 0; } }

.lvl-burst { position: absolute; left: 79.5%; top: 20%; width: 0; height: 0; }
.lvl-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #ffd34e; opacity: 0; animation: lvl-spark var(--T) cubic-bezier(.15, .7, .3, 1) infinite; }
.lvl-burst i:nth-child(3n) { background: #ff6b2c; width: 6px; height: 6px; }
.lvl-burst i:nth-child(3n+1) { background: #fff1c4; }
@keyframes lvl-spark { 0%, 42% { opacity: 0; transform: translate(0, 0) scale(1); } 43% { opacity: 1; } 60% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 100% { opacity: 0; } }

.lvl-pop { position: absolute; left: 34%; top: 21%; font-size: clamp(18px, 2.6vw, 28px); color: var(--gold); text-shadow: 3px 3px 0 #c93c72, 0 0 18px rgba(255, 211, 78, .55); white-space: nowrap; opacity: 0; transform: translate(-50%, 0) scale(0); animation: lvl-pop var(--T) infinite; }
@keyframes lvl-pop { 0%, 43% { opacity: 0; transform: translate(-50%, 0) scale(0); } 46% { opacity: 1; transform: translate(-50%, 0) scale(1.35); } 49% { transform: translate(-50%, 0) scale(1); } 52%, 66% { transform: translate(-50%, -6px) scale(1); } 59% { transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; transform: translate(-50%, -4px) scale(1); } 88%, 100% { opacity: 0; transform: translate(-50%, -22px) scale(1); } }

.lvl-hud { position: absolute; left: 3%; top: 2%; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); opacity: 0; animation: lvl-hud var(--T) infinite; }
.lvl-lv { position: relative; display: inline-flex; gap: 6px; }
.lvl-lv b { color: var(--gold); font-weight: 400; min-width: 2ch; }
.lvl-new { position: absolute; right: 0; opacity: 0; animation: lvl-new var(--T) steps(1, end) infinite; }
.lvl-old { animation: lvl-old var(--T) steps(1, end) infinite; }
.lvl-xp { width: 96px; height: 10px; padding: 2px; border: 2px solid var(--line); background: var(--night); }
.lvl-xp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--sakura), var(--gold)); transform-origin: 0 50%; transform: scaleX(0); animation: lvl-xp var(--T) infinite; }
@keyframes lvl-hud { 0% { opacity: 0; } 4%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes lvl-xp { 0%, 4% { transform: scaleX(0); animation-timing-function: steps(12, end); } 41% { transform: scaleX(1); } 43% { transform: scaleX(1); filter: brightness(2); } 47% { transform: scaleX(0); filter: none; animation-timing-function: ease-out; } 88%, 100% { transform: scaleX(.18); } }
@keyframes lvl-old { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes lvl-new { 0%, 44% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes lvl-floor { 0%, 4% { opacity: 0; } 41% { opacity: .6; } 44% { opacity: 1; transform: scaleX(1.15); } 50%, 86% { opacity: .8; transform: scaleX(1); } 95%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lvl *, .lvl::before { animation: none !important; }
  .lvl-bar, .lvl-flame { transform: none; opacity: 1; }
  .lvl-pop { opacity: 1; transform: translate(-50%, 0); }
  .lvl-hud, .lvl::before { opacity: 1; }
  .lvl-old { opacity: 0; } .lvl-new { opacity: 1; }
  .lvl-xp i { transform: scaleX(.18); }
}

/* features: locked "classified" teaser screens (replace app screenshots until launch) */
.shots-tag { margin: 56px 0 0; text-align: center; font-size: 10px; letter-spacing: 1px; color: var(--sakura-soft); animation: twinkle 2.4s ease-in-out infinite; }
.shots.teasers { padding-top: 40px; }
.teaser-btn { display: block; border: 0; cursor: pointer; font: inherit; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.teaser-btn:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 2px var(--c), 0 0 40px color-mix(in srgb, var(--c) 45%, transparent); }
.teaser-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 34px; }
.teaser { position: relative; display: block; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 70% at 50% 45%, color-mix(in srgb, var(--c) 16%, #141331), #0b0a1a 75%); }
.teaser::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px); }
.teaser::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 14%, transparent), transparent); animation: t-scan 3.2s linear infinite; }
@keyframes t-scan { 0% { top: -30%; } 100% { top: 100%; } }

/* blurred ghost UI behind the glyph: hints there's a real screen, reveals nothing */
.t-ghost { position: absolute; inset: 14% 10% 22%; display: flex; flex-direction: column; gap: 9%; filter: blur(5px); opacity: .5; }
.t-ghost i { display: block; height: 15%; border-radius: 10px; background: linear-gradient(90deg, #2b2858, #3c3878, #2b2858); background-size: 200% 100%; animation: t-shimmer 2.4s linear infinite; }
.t-ghost i:nth-child(2) { width: 70%; } .t-ghost i:nth-child(4) { width: 85%; }
@keyframes t-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.t-stamp { position: absolute; top: 7%; left: 50%; z-index: 4; transform: translateX(-50%) rotate(-8deg); padding: 5px 8px; border: 2px solid var(--c); border-radius: 4px; font-size: clamp(7px, .75vw, 9px); color: var(--c); background: rgba(11, 10, 26, .7); white-space: nowrap; animation: t-glitch 4s steps(1, end) infinite; }
@keyframes t-glitch { 0%, 86%, 100% { transform: translateX(-50%) rotate(-8deg); text-shadow: none; } 88% { transform: translateX(calc(-50% + 3px)) rotate(-8deg); text-shadow: -2px 0 #ff5c93, 2px 0 #5fe1e6; } 90% { transform: translateX(calc(-50% - 2px)) rotate(-8deg); } 92% { transform: translateX(-50%) rotate(-8deg); text-shadow: 2px 0 #ff5c93, -2px 0 #5fe1e6; } }
.t-stage { position: absolute; inset: 22% 8% 24%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10%; }
.t-lock { position: absolute; left: 50%; bottom: 7%; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(11, 10, 26, .85); border: 1px solid var(--line); font-size: clamp(6px, .65vw, 8px); color: var(--muted); white-space: nowrap; }
.t-lock svg { width: 10px; height: 11px; color: var(--c); transform-origin: 50% 0; animation: t-wobble 3s ease-in-out infinite; }
.teaser-btn:hover .t-lock svg { animation-duration: .5s; }
@keyframes t-wobble { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-6deg); } }

/* 1 · daily quests: boxes tick, XP pops, bar fills (4s loop) */
.t-quests .t-stage { --T: 4s; }
.tq-list { display: flex; flex-direction: column; gap: 12px; width: 82%; }
.tq-row { position: relative; display: flex; align-items: center; gap: 8px; }
.tq-box { flex: none; width: 16px; height: 16px; border: 2px solid var(--c); display: grid; place-items: center; }
.tq-box b { width: 8px; height: 8px; background: var(--c); transform: scale(0); animation: tq-tick var(--T) steps(1, end) infinite; animation-delay: calc(var(--i) * .7s); }
.tq-line { height: 8px; flex: 1; border-radius: 2px; background: #3c3878; }
.tq-row:nth-child(2) .tq-line { flex: .7; } .tq-row:nth-child(3) .tq-line { flex: .85; }
.tq-row em { position: absolute; right: -2px; top: -4px; font-style: normal; font-size: 8px; color: var(--gold); text-shadow: 1px 1px 0 #c93c72; opacity: 0; animation: tq-xp var(--T) ease-out infinite; animation-delay: calc(var(--i) * .7s); }
.tq-xp { width: 82%; height: 10px; padding: 2px; border: 2px solid var(--line); }
.tq-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); transform-origin: 0 50%; animation: tq-bar var(--T) steps(6, end) infinite; }
@keyframes tq-tick { 0%, 14% { transform: scale(0); } 15%, 85% { transform: scale(1); } 86%, 100% { transform: scale(0); } }
@keyframes tq-xp { 0%, 14% { opacity: 0; transform: translateY(0); } 16% { opacity: 1; } 34%, 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes tq-bar { 0%, 12% { transform: scaleX(0); } 70%, 85% { transform: scaleX(1); } 86%, 100% { transform: scaleX(0); } }

/* 2 · workouts: dumbbell pumps reps, sets light up, PR flashes (3.6s loop) */
.t-workout .t-stage { --T: 3.6s; }
.tw-bell { width: 70%; height: auto; filter: drop-shadow(0 0 6px rgba(255, 92, 147, .6)); animation: tw-rep .9s steps(3, end) infinite alternate; }
@keyframes tw-rep { 0% { transform: translateY(14px); } 100% { transform: translateY(-14px); } }
.tw-sets { display: flex; gap: 7px; }
.tw-sets i { width: 12px; height: 12px; border: 2px solid var(--c); animation: tw-set var(--T) steps(1, end) infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes tw-set { 0%, 15% { background: transparent; } 16%, 80% { background: var(--c); } 81%, 100% { background: transparent; } }
.tw-pr { font-size: 14px; color: var(--gold); text-shadow: 2px 2px 0 #c93c72; opacity: 0; animation: tw-pr var(--T) infinite; }
@keyframes tw-pr { 0%, 66% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.3); } 74%, 82% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; } }

/* 3 · calories: ring fills, flame flickers, macro bars grow (4.4s loop) */
.t-cal .t-stage { --T: 4.4s; }
.tc-ring { position: relative; width: 66%; aspect-ratio: 1; display: grid; place-items: center; }
.tc-ring > svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.tc-track { fill: none; stroke: #2b2858; stroke-width: 4; }
.tc-fill { fill: none; stroke: var(--c); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: tc-fill var(--T) steps(10, end) infinite; filter: drop-shadow(0 0 2px var(--c)); }
@keyframes tc-fill { 0%, 6% { stroke-dashoffset: 100; } 60%, 86% { stroke-dashoffset: 18; } 92%, 100% { stroke-dashoffset: 100; } }
.tc-flame { width: 34%; height: auto; filter: drop-shadow(0 0 5px #ff8a3d); animation: breathe 1.2s ease-in-out infinite; }
.tc-core { animation: lvl-flicker .4s steps(1, end) infinite; }
.tc-macros { display: flex; align-items: flex-end; gap: 8px; height: 26px; }
.tc-macros i { width: 12px; height: 100%; background: var(--m); transform-origin: 50% 100%; animation: tc-macro var(--T) steps(5, end) infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes tc-macro { 0%, 8% { transform: scaleY(.1); } 55%, 86% { transform: scaleY(1); } 92%, 100% { transform: scaleY(.1); } }

/* 4 · boss battles: shadow boss, blinking eyes, ??? HP draining, hits shake the screen (3s loop) */
.t-boss .t-stage { --T: 3s; animation: tb-shake var(--T) infinite; }
.tb-boss { width: 62%; height: auto; filter: drop-shadow(0 0 10px rgba(255, 59, 92, .45)); animation: breathe 1.8s ease-in-out infinite; }
.tb-eyes { animation: tb-blink 2.6s steps(1, end) infinite; }
@keyframes tb-blink { 0%, 90%, 100% { opacity: 1; } 92%, 96% { opacity: 0; } }
.tb-hp { display: flex; align-items: center; gap: 6px; width: 80%; font-size: 8px; color: #ff6b6b; }
.tb-hp i { flex: 1; height: 8px; padding: 1px; border: 2px solid var(--line); }
.tb-hp b { display: block; height: 100%; background: #ff3b5c; transform-origin: 0 50%; animation: tb-hp var(--T) steps(1, end) infinite; }
@keyframes tb-hp { 0%, 30% { transform: scaleX(1); } 31%, 63% { transform: scaleX(.72); } 64%, 92% { transform: scaleX(.41); } 93%, 100% { transform: scaleX(1); } }
.tb-slash { position: absolute; left: 50%; top: 30%; width: 90%; height: 4px; background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px var(--c); transform: translateX(-50%) rotate(-30deg) scaleX(0); animation: tb-slash var(--T) infinite; }
@keyframes tb-slash { 0%, 26%, 37%, 59%, 70%, 100% { transform: translateX(-50%) rotate(-30deg) scaleX(0); opacity: 0; } 29%, 62% { transform: translateX(-50%) rotate(-30deg) scaleX(1); opacity: 1; } }
@keyframes tb-shake { 0%, 29%, 34%, 62%, 67%, 100% { transform: translate(0, 0); } 30%, 63% { transform: translate(-4px, 2px); } 31%, 64% { transform: translate(4px, -2px); } 32%, 65% { transform: translate(-2px, -1px); } }

@media (prefers-reduced-motion: reduce) {
  .teaser *, .teaser::after, .shots-tag { animation: none !important; }
  .tq-box b, .tq-xp i, .tc-macros i { transform: none; }
  .tw-sets i { background: var(--c); }
  .tc-fill { stroke-dashoffset: 18; }
  .tw-pr { opacity: 1; }
}
@media (max-width: 640px) {
  .shots.teasers { row-gap: 36px; }
  .shots.teasers .shot { transform: rotate(calc(var(--r) / 2)); }
  .shots-tag { padding: 0 8px; line-height: 1.8; }
}

/* waitlist: typo hint + "check your inbox" state */
.hint:empty { display: none; }
.hint-btn { align-self: flex-start; border: 0; padding: 0; background: none; color: var(--cyan); font: 700 14px var(--font-body); text-decoration: underline; cursor: pointer; }
.gate-done { display: none; flex-direction: column; gap: 14px; text-align: center; }
.gate-done h3 { margin: 0; font-size: 24px; }
.gate-done p { margin: 0; }
.gate-card.is-done > :not(.gate-logo):not(.gate-done) { display: none; }
.gate-card.is-done .gate-done { display: flex; }