/* MoveCombo — marketing site. Tokens mirror src/theme/tokens.ts in the mobile app repo. */
:root {
  --bg: #070a16;
  --bg-2: #0e1326;
  --surface: #141a33;
  --surface-hi: #1d2547;
  --line: #2a3360;
  --line-soft: #1c2347;
  --lime: #c6ff3d;
  --lime-deep: #8fd400;
  --cyan: #2ee6ff;
  --orange: #ff8a1f;
  --yellow: #ffd23f;
  --pink: #ff3d7f;
  --text: #ffffff;
  --muted: #9aa3c7;
  --dim: #5e6893;
  --on-lime: #0a1000;
  --danger: #ff4d6d;
  --success: #3dffa8;

  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 20px;
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--lime); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--display); font-size: 17px; letter-spacing: .5px; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand b { color: var(--lime); font-weight: 400; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links a:not(.btn):hover { color: var(--text); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--lime);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--b); color: var(--on-lime); text-decoration: none;
  font: 400 14px/1 var(--display); letter-spacing: .8px; text-transform: uppercase;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--b) 60%, transparent), 0 6px 0 var(--lime-deep);
  transform: translateY(-3px);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
}
.btn:hover { color: var(--on-lime); filter: brightness(1.06); box-shadow: 0 0 28px color-mix(in srgb, var(--b) 55%, transparent), 0 6px 0 var(--lime-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lime-deep); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 12px; white-space: nowrap; }
@media (max-width: 400px) { .brand { font-size: 14px; gap: 8px; } .brand img { width: 30px; height: 30px; } .nav .btn-sm { padding: 0 12px; font-size: 11px; } }
.btn-ghost { background: transparent; color: var(--text); border: 2px solid var(--line); box-shadow: none; transform: none; }
.btn-ghost:hover { color: var(--text); border-color: var(--cyan); box-shadow: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 8vw, 96px) 0 clamp(56px, 8vw, 110px); isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% 0; z-index: -1;
  background:
    radial-gradient(600px 380px at 78% 30%, rgba(46,230,255,.16), transparent 70%),
    radial-gradient(520px 360px at 12% 18%, rgba(198,255,61,.12), transparent 70%),
    linear-gradient(transparent 0 0);
}
.hero::after { /* arcade floor grid */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1;
  background-image:
    linear-gradient(rgba(46,230,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,230,255,.13) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to top, #000 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 95%);
  transform: perspective(600px) rotateX(58deg); transform-origin: bottom;
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.04; letter-spacing: .3px; }
.hero h1 { font-size: clamp(42px, 7.2vw, 88px); margin: 22px 0 18px; text-wrap: balance; }
.hero h1 .l { color: var(--lime); text-shadow: 0 0 36px rgba(198,255,61,.35); }
.hero h1 .c { color: var(--cyan); }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 33ch; margin: 0 0 30px; }
.lede strong { color: var(--text); }

/* ---------- Waitlist form ---------- */
.waitlist { max-width: 520px; }
.field-row { display: flex; gap: 10px; padding: 6px; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.field-row:focus-within { border-color: var(--lime); box-shadow: 0 0 0 5px rgba(198,255,61,.12); }
.field-row input[type=email] {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font: 500 17px var(--body); padding: 0 16px; outline: none;
}
.field-row input::placeholder { color: var(--dim); }
.field-row .btn { transform: none; box-shadow: none; flex: none; }
.field-row .btn:active { transform: scale(.97); }
@media (max-width: 460px) {
  .field-row { flex-direction: column; border-radius: 22px; padding: 8px; }
  .field-row input[type=email] { min-height: 48px; }
}
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 2px 0; font-size: 14px; color: var(--muted); }
.opts > span { font-weight: 700; margin-right: 2px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip label { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 700; transition: .15s; }
.chip input:checked + label { border-color: var(--cyan); color: var(--bg); background: var(--cyan); }
.chip input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lime); flex: none; cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 24px; margin: 12px 2px 0; font-size: 15px; font-weight: 700; }
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--danger); }
.waitlist.done .field-row, .waitlist.done .opts, .waitlist.done .consent { display: none; }
.success-card {
  display: none; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(198,255,61,.14), rgba(46,230,255,.10)); border: 1.5px solid rgba(198,255,61,.5);
}
.waitlist.done .success-card { display: flex; }
.success-card .big { font: 400 26px var(--display); color: var(--lime); white-space: nowrap; }
.success-card p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.store-badges[hidden] { display: none; }

/* ---------- Phone mock ---------- */
.phone-stage { position: relative; display: grid; place-items: center; }
.phone {
  position: relative; width: min(330px, 78vw); aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 12px;
  background: linear-gradient(160deg, #2a3360, #0e1326 40%, #1d2547);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1.5px #3a4680 inset, 0 0 90px rgba(46,230,255,.18);
  transform: rotate(3deg);
}
.phone::before { content: ''; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 3; }
.phone canvas { width: 100%; height: 100%; border-radius: 36px; background: #0b1024; }
.sticker {
  position: absolute; z-index: 4; padding: 10px 14px; border-radius: 14px; font: 400 13px/1.15 var(--display); letter-spacing: .4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.sticker.s1 { left: -6%; top: 16%; background: var(--orange); color: #1a0a00; transform: rotate(-8deg); }
.sticker.s2 { right: -6%; top: 44%; background: var(--cyan); color: #00161b; transform: rotate(6deg); }
@media (max-width: 900px) { .sticker.s1 { left: 2%; } .sticker.s2 { right: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sticker.s1 { animation: bob 3.2s ease-in-out infinite; }
  .sticker.s2 { animation: bob 3.6s ease-in-out -1.2s infinite; }
}
@keyframes bob { 50% { translate: 0 -8px; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 2px solid var(--lime); background: var(--lime); color: var(--on-lime); overflow: hidden; transform: rotate(-1.4deg); margin: 0 -2vw; }
.marquee div { display: flex; gap: 42px; width: max-content; padding: 14px 0; font: 400 clamp(16px, 2vw, 22px) var(--display); letter-spacing: 1px; white-space: nowrap; }
.marquee span::after { content: '✦'; margin-left: 42px; }
@media (prefers-reduced-motion: no-preference) { .marquee div { animation: slide 26s linear infinite; } }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { padding: clamp(72px, 10vw, 128px) 0; }
.kicker { font: 400 13px var(--display); letter-spacing: 2px; color: var(--cyan); text-transform: uppercase; margin-bottom: 14px; }
h2 { font-size: clamp(32px, 5vw, 56px); text-wrap: balance; }
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { color: var(--muted); font-size: 19px; margin: 16px 0 0; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 24px 22px 26px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-soft); overflow: hidden; }
.step .num { font: 400 15px var(--display); color: var(--bg); background: var(--lime); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.step:nth-child(2) .num { background: var(--cyan); }
.step:nth-child(3) .num { background: var(--yellow); }
.step:nth-child(4) .num { background: var(--orange); }
.step svg { width: 100%; height: 120px; margin: 18px 0 12px; }
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { grid-column: span 2; padding: 28px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.tile.wide { grid-column: span 4; }
.tile.half { grid-column: span 3; }
@media (max-width: 900px) { .tile, .tile.wide, .tile.half { grid-column: span 6; } }
.tile h3 { font-size: 22px; margin: 14px 0 8px; }
.tile p { margin: 0; color: var(--muted); }
.tile .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-hi); }
.tile .ico svg { width: 24px; height: 24px; }
.tile.feature { background: radial-gradient(500px 260px at 100% 0%, rgba(198,255,61,.14), transparent 70%), var(--bg-2); border-color: rgba(198,255,61,.3); }
.angle-demo { display: flex; gap: 22px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.angle-demo .pill { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.angle-demo .pill b { color: var(--lime); font-weight: 700; }
.diff { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.diff span { font: 400 12px var(--display); letter-spacing: .6px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid; }
.diff span:nth-child(1) { color: var(--success); }
.diff span:nth-child(2) { color: var(--yellow); }
.diff span:nth-child(3) { color: var(--pink); }

/* share card preview */
.card-preview { margin: 22px auto 0; width: 170px; aspect-ratio: 9/16; border-radius: 18px; padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(170deg, #1d2547, #070a16 70%); border: 1.5px solid var(--line); transform: rotate(-4deg); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.card-preview .t { font: 400 10px var(--display); color: var(--cyan); letter-spacing: 1px; }
.card-preview .sc { font: 400 52px/1 var(--display); color: var(--lime); text-shadow: 0 0 20px rgba(198,255,61,.4); }
.card-preview .lb { font-size: 9.5px; white-space: nowrap; color: var(--muted); font-weight: 700; }
.card-preview .msg { font: 400 11px/1.25 var(--display); }
.card-preview .pb { align-self: flex-start; font: 400 9px var(--display); background: var(--orange); color: #1a0a00; padding: 4px 7px; border-radius: 6px; }

/* privacy band */
.privacy-band { background: linear-gradient(180deg, transparent, rgba(46,230,255,.06) 30%, rgba(46,230,255,.06) 70%, transparent); }
.privacy-band .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .privacy-band .wrap { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.checks li svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.checks b { display: block; font-size: 17px; }
.checks span { color: var(--muted); font-size: 15.5px; }
.lock { width: min(320px, 70vw); margin: 0 auto; }

/* FAQ */
.faq { max-width: 820px; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-weight: 700; font-size: 19px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 400 26px var(--display); color: var(--lime); transition: rotate .2s; }
details[open] summary::after { rotate: 45deg; }
details > div { padding: 0 0 24px; color: var(--muted); max-width: 70ch; }
details > div p { margin: 0 0 10px; }

/* final CTA */
.final { text-align: center; }
.final .box { position: relative; padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 64px); border-radius: 32px; overflow: hidden;
  background: radial-gradient(700px 400px at 50% 0%, rgba(198,255,61,.18), transparent 70%), var(--bg-2); border: 1.5px solid rgba(198,255,61,.35); }
.final h2 { margin-bottom: 14px; }
.final p.sub { color: var(--muted); font-size: 19px; margin: 0 auto 30px; max-width: 40ch; }
.final .waitlist { margin: 0 auto; text-align: left; }

/* footer */
footer { border-top: 1px solid var(--line-soft); padding: 40px 0 56px; color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--muted); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--lime); }
footer .motto { margin: 0; font: 400 14px var(--display); color: var(--lime); letter-spacing: .6px; }
footer .safety-note { flex-basis: 100%; font-size: 13px; line-height: 1.6; max-width: 80ch; }

/* placeholders from config.js */
.todo { background: rgba(255,138,31,.18); color: var(--orange); border: 1px dashed var(--orange); border-radius: 4px; padding: 0 4px; font-weight: 700; }

/* ---------- Legal pages ---------- */
.legal { padding: clamp(40px, 6vw, 72px) 0 96px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin: 10px 0 8px; }
.legal .meta { color: var(--dim); font-size: 14px; margin-bottom: 28px; }
.legal .review { padding: 16px 18px; border-radius: 14px; border: 1.5px dashed var(--orange); background: rgba(255,138,31,.07); color: var(--muted); font-size: 14.5px; margin-bottom: 36px; }
.legal .review b { color: var(--orange); }
.legal .toc { padding: 20px 22px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-soft); margin-bottom: 40px; }
.legal .toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 15px; }
@media (max-width: 600px) { .legal .toc ol { columns: 1; } }
.legal .toc a { color: var(--muted); text-decoration: none; }
.legal .toc a:hover { color: var(--lime); }
.legal h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 48px 0 14px; scroll-margin-top: 90px; color: var(--lime); }
.legal h3 { font: 700 18px var(--body); margin: 26px 0 8px; }
.legal p, .legal li { color: #d4d9ee; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal .tbl { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.legal th { background: var(--surface); font-weight: 700; color: var(--text); }
.legal tr:last-child td { border-bottom: 0; }
.legal .callout { padding: 18px 20px; border-radius: 14px; background: var(--bg-2); border-left: 4px solid var(--cyan); margin: 18px 0; }
.legal .callout.warn { border-left-color: var(--orange); }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; }

/* challenge page */
.challenge { min-height: calc(100vh - 68px); display: grid; place-items: center; text-align: center; padding: 48px 0; }
.challenge .score { font: 400 clamp(84px, 20vw, 150px)/1 var(--display); color: var(--lime); text-shadow: 0 0 50px rgba(198,255,61,.35); margin: 10px 0; }
.challenge h1 { font-size: clamp(28px, 5vw, 44px); }
.challenge p { color: var(--muted); }
.challenge .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 28px 0; }
.code { font: 700 20px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; padding: 10px 16px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--line); display: inline-block; }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}