/* BitRep home page. Midnight and Iris, dark only.
   Flat colour, the app's own corner sizes (12 px controls, 16 px cards),
   and the app's pixel star field behind the hero. No glows or gradients
   apart from the star field fading out. */
@font-face { font-family: "Archivo"; src: url("fonts/Archivo_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/PixelifySans_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ground: #0E1020; --card: #171A2E; --raised: #22263F; --line: rgba(255,255,255,0.08);
  --text: #F3F3FA; --muted: #A3A8C4; --dim: #6F7496;
  --accent: #8F8DFF; --on-accent: #0E1020; --link: #B8B6FF; --mint: #5EE0B0;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel: "Pixelify Sans", var(--body);
  --r-control: 12px; --r-card: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background:
    radial-gradient(rgba(255,255,255,0.07) 0.75px, transparent 1.25px) 0 0 / 30px 30px,
    radial-gradient(rgba(143,141,255,0.11) 0.75px, transparent 1.25px) 15px 22px / 46px 46px,
    var(--ground); color: var(--text); font: 400 17px/1.55 var(--body); font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { max-width: 100%; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
[id] { scroll-margin-top: 84px; }
main { overflow-x: clip; }

/* Type */
h1, .h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(38px, 8vw, 80px); }
h1 .soft { color: var(--dim); }
.h2 { font-size: clamp(28px, 4.6vw, 46px); }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.fine { font-size: 14px; color: var(--muted); }
.section { padding-top: clamp(80px, 11vw, 144px); }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }

/* Header: a plain bar that stays at the top */
.bar { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.bar .wordmark { display: block; width: 118px; height: auto; }
.bar nav { display: none; gap: 28px; }
.bar nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 700; }
.bar nav a:hover { color: var(--text); }
@media (min-width: 860px) { .bar nav { display: flex; } }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-control); background: var(--accent); color: var(--on-accent); font: 700 16px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: #A19FFF; }
.btn:active { transform: scale(0.97); opacity: 0.9; }

/* Backgrounds. The whole page sits on the app's pixel star field, kept
   faint. The hero adds a pixel skyline along its base, the same night
   city as BitRun, and the phones stand in front of it. Two sections sit
   on a flat band a shade lighter than the page, to break up the scroll. */
.hero-band { background:
    url("img/skyline.svg") bottom center / auto 200px repeat-x,
    radial-gradient(rgba(255,255,255,0.10) 0.75px, transparent 1.25px) 0 0 / 30px 30px,
    radial-gradient(rgba(143,141,255,0.16) 0.75px, transparent 1.25px) 15px 22px / 46px 46px; }
@media (max-width: 600px) { .hero-band { background-size: auto 130px, 30px 30px, 46px 46px; } }
.band { margin-top: clamp(80px, 11vw, 144px); padding-bottom: clamp(64px, 9vw, 112px); background: #12142A; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .section { padding-top: clamp(64px, 9vw, 112px); }
.hero { padding-top: clamp(44px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.signup { width: 100%; max-width: 460px; margin-top: 8px; }
.signup .row { display: flex; gap: 8px; }
.signup input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border: 0; border-radius: var(--r-control); background: var(--raised); color: var(--text); font: 400 16px var(--body); box-shadow: inset 0 0 0 1px var(--line); }
.signup input::placeholder { color: var(--muted); }
.signup input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.signup .btn { min-height: 50px; }
.signup .fine { margin-top: 12px; }
@media (max-width: 420px) { .signup .row { flex-direction: column; } }

/* Phones. The clip follows the phone's outline in the 900 x 1790 stills;
   the looping clips are the same picture at 600 x 1194. */
.phone-still { display: block; width: 100%; height: auto; padding: 0; border: 0; clip-path: inset(1.56% 4.11% 1.51% 4% round 14.2% / 7.15%); }
.cluster { --f: min(270px, calc((100vw - 40px) / 2.07)); position: relative; width: calc(var(--f) * 2.0667); height: calc(var(--f) * 1.9889); margin-top: clamp(20px, 4vw, 40px); }
.cluster .phone-still { position: absolute; height: auto; }
.cluster .front { left: calc(var(--f) * 0.5333); top: 0; width: var(--f); z-index: 1; }
.cluster .back { top: calc(var(--f) * 0.2); width: calc(var(--f) * 0.8); filter: brightness(0.72); }
.cluster .left { left: 0; } .cluster .right { right: 0; }

/* Promise strip */
.strip { padding: 18px 0; background: var(--ground); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.strip ul { display: flex; gap: 40px; width: max-content; padding-right: 40px; animation: slide 40s linear infinite; }
.strip li { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.strip svg { width: 18px; height: 18px; color: var(--mint); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Numbered steps */
.steps { display: grid; gap: clamp(64px, 9vw, 120px); }
.step { display: grid; gap: 28px; align-items: center; justify-items: center; }
.step-copy { order: -1; justify-self: start; display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.step-num { font-family: var(--pixel); color: var(--accent); font-size: 20px; letter-spacing: 0.1em; }
.step-num b { color: var(--text); margin-left: 8px; letter-spacing: 0.14em; }
.step h3 { font-size: clamp(26px, 3.8vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.step p { color: var(--muted); font-size: 18px; text-wrap: pretty; }
.step-shot { width: min(290px, 72vw); }
/* On phones the step text is centred over its phone */
@media (max-width: 859px) {
  .step-copy { justify-self: center; align-items: center; text-align: center; }
  .callout { text-align: center; }
  .callout p { margin-left: auto; margin-right: auto; }
}
@media (min-width: 860px) {
  .step { grid-template-columns: 1fr 1fr; gap: 40px; }
  .step:nth-child(odd) .step-copy { order: 2; padding-left: 24px; }
  .step:nth-child(even) .step-copy { justify-self: end; padding-right: 24px; }
}
/* cards are solid so the stars stay behind them */
.callout { margin-top: clamp(64px, 9vw, 112px); background: var(--card); border-radius: var(--r-card); padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; align-items: center; }
.callout h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.1; }
.callout p { color: var(--muted); margin-top: 10px; max-width: 44ch; }
.callout .step-shot { width: min(200px, 56vw); justify-self: center; }
@media (min-width: 760px) { .callout { grid-template-columns: 1fr auto; } .callout .step-shot { margin-right: 24px; } }

/* The five stages, standing on the app's mint ground line */
.stages { max-width: 760px; margin: 0 auto; }
.stages ol { display: flex; align-items: flex-end; }
.stages li { flex: 1 1 0; min-width: 0; text-align: center; }
.stages img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.ground { height: 4px; background: var(--mint); }
.stages .names { display: flex; margin-top: 12px; }
.stages .names span { flex: 1 1 0; text-align: center; font-family: var(--pixel); font-size: clamp(11px, 2.6vw, 16px); letter-spacing: 0.06em; color: var(--muted); }

/* Film */
.film-stage { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 5vw, 72px); }
.film-frame { position: relative; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line); transform: translateZ(0); }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.film-play svg { width: 30px; height: 30px; margin-left: 3px; }
.film-frame.is-started .film-play { display: none; }
.film-fox { display: none; text-align: center; padding-bottom: 36px; }
.film-fox img { display: block; width: 190px; height: 190px; }
.film-fox .ground { width: 118px; margin: -4px auto 0; }
.film-fox figcaption { margin-top: 14px; display: grid; gap: 2px; }
.film-fox figcaption strong { font-size: 18px; } .film-fox figcaption span { font-size: 14px; color: var(--muted); }
@media (min-width: 980px) { .film-fox { display: block; } }

/* Game */
.game-card { max-width: 900px; margin: 0 auto; }
.game-card iframe { display: block; width: 100%; height: 900px; border: 0; background: transparent; color-scheme: dark; }

/* Promises: a plain list */
.promises { max-width: 860px; margin: 0 auto; display: grid; column-gap: 48px; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .promises { grid-template-columns: 1fr 1fr; border-top: 0; } }
.promises li { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.4; }
@media (min-width: 720px) { .promises li:nth-child(-n+2) { border-top: 1px solid var(--line); } }
.promises svg { width: 18px; height: 18px; color: var(--mint); flex: none; margin-top: 4px; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding: 0 0 20px; max-width: 60ch; }

/* Closing sign-up */
.closing { margin-top: clamp(80px, 11vw, 144px); background: var(--card); border-radius: var(--r-card); padding: clamp(40px, 7vw, 80px) 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.closing img.pet { width: 120px; height: 120px; }
.closing .ground { width: 76px; margin-top: -20px; margin-bottom: 12px; }

/* Footer */
.foot { padding: 56px 20px calc(48px + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font-size: 14px; }
.foot ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 18px; }
.foot a { color: var(--muted); } .foot a:hover { color: var(--text); }
.foot p { max-width: 70ch; margin: 6px auto 0; }

/* Motion: foxes bob and hop, as on the current site. Nothing else moves
   by itself except the strip and the phone clips. */
.fox, .fox-hop, .fox-tap { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .fox img { animation: bob 2.8s ease-in-out infinite; }
  .fox-tap.tap { animation: hop .35s; }
  @media (hover: hover) { .fox:hover .fox-tap { animation: hop .35s; } }
}
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes hop { 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .strip ul { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding: 0 20px; } html { scroll-behavior: auto; } }

/* The spin wheel card under the game: text left, button right; stacked and centred on phones */
.spin-card { max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 28px; }
.spin-card .btn { justify-self: start; }
@media (max-width: 759px) { .spin-card { text-align: center; } .spin-card p { margin-left: auto; margin-right: auto; } .spin-card .btn { justify-self: center; } }