/* ─────────────────────────────────────────────────────────────────────────────
   Voidride — apex site
   Every colour here is lifted from apps/mobile/src/ui/theme.ts. Do not invent
   new hues: the point of this page is that it looks like the product.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/rajdhani-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surface ramp, darkest -> lightest (theme.ts) */
  --rail:       #04060a;
  --void:       #05070d;
  --surface-alt:#090c13;
  --panel:      #0a0d15;
  --surface:    #0c1018;
  --border:     #1c2230;

  /* accents — the four ride variants */
  --red:        #ff2a2a;
  --red-text:   #ff4040;
  --red-deep:   #b00606;
  --purple:     #9d4edd;
  --blue:       #2d7bff;
  --gold:       #fbd456;
  --reward:     #7cfc00;
  --cyan:       #5fb8d8;

  --text:       #f2f3f5;
  --dim:        #dbdee1;
  --muted:      #8a92a2;

  --glow:       rgba(255, 42, 42, 0.55);
  --glow-soft:  rgba(255, 42, 42, 0.20);
  --hairline:   rgba(255, 42, 42, 0.35);
  --panel-edge: rgba(255, 42, 42, 0.18);
  --scanline:   rgba(255, 255, 255, 0.025);

  --display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --body: -apple-system, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient CRT scanlines + vignette, fixed over the whole document. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(
    to bottom,
    var(--scanline) 0 1px,
    transparent 1px 3px
  );
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 59;
  background: radial-gradient(120% 85% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

img { max-width: 100%; display: block; }

a { color: var(--red-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

/* ── type ──────────────────────────────────────────────────────────────────── */

.kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.72rem, 1.6vw, .85rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--red-text);
  display: inline-flex;
  align-items: center;
  gap: .9em;
}
/* The ◤ ◥ flanks from the app's login screen, drawn rather than typed so they
   never depend on a glyph the subset font does not carry. */
.kicker::before,
.kicker::after {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  flex: none;
}
.kicker::before { border-width: .42em .42em 0 0; border-color: var(--red) transparent transparent transparent; }
.kicker::after  { border-width: 0 .42em .42em 0; border-color: transparent var(--red) transparent transparent; }

.wordmark {
  font-family: var(--body);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
  text-wrap: balance;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  letter-spacing: .02em;
  line-height: 1.08;
  text-transform: uppercase;
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

p { margin: 0; }
.lede { font-size: clamp(1.05rem, 2.1vw, 1.2rem); color: var(--dim); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

/* Diamond-capped rule — the divider under the wordmark in-app. */
.rule {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: min(340px, 70%);
}
.rule::before, .rule::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  transform: rotate(45deg);
  flex: none;
}
.rule > span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hairline), transparent);
}

/* ── chamfered HUD panel ───────────────────────────────────────────────────── */
/* Two stacked clip-paths: the outer carries the accent, the inner sits 1px in
   with the panel fill. clip-path cuts a real border off, so it has to be faked
   this way or the notch loses its edge. */

.panel {
  --notch: 20px;
  --edge: var(--panel-edge);
  position: relative;
  background: var(--edge);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
.panel > .panel-in {
  background: var(--panel);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
  margin: 1px;
  padding: clamp(1.3rem, 3vw, 2rem);
  height: calc(100% - 2px);
}
.panel.lit { --edge: var(--hairline); box-shadow: 0 0 34px -12px var(--glow); }

/* ── layout ────────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

section { position: relative; }
.band { padding-block: clamp(4rem, 11vw, 8rem); }
.band + .band { border-top: 1px solid var(--border); }

.stack { display: flex; flex-direction: column; gap: 1.15rem; }
.stack-lg { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); }

.grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip > :first-child { order: 2; }
}

/* ── nav ───────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-brand { display: flex; align-items: center; gap: .6rem; color: var(--text); }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 34px; filter: drop-shadow(0 0 6px var(--glow)); }
.nav-brand span {
  font-family: var(--body);
  font-weight: 900;
  letter-spacing: .16em;
  font-size: .95rem;
  text-transform: uppercase;
}
.nav-links { display: flex; gap: clamp(.9rem, 2.5vw, 1.8rem); align-items: center; }
.nav-links a {
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 620px) { .nav-links a.hide-sm { display: none; } }

/* ── hero ──────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
#fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Red bloom behind the wordmark, as on the login screen. */
.hero-glow {
  position: absolute;
  left: 50%; top: 46%;
  width: min(120vw, 1000px);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 42, 42, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-in {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: clamp(4rem, 12vw, 7rem) var(--gutter);
}
.hero-mark {
  width: clamp(190px, 34vw, 330px);
  filter: drop-shadow(0 0 26px var(--glow));
  animation: markPulse 5.5s ease-in-out infinite;
}
@keyframes markPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 42, 42, 0.42)); }
  50%      { filter: drop-shadow(0 0 40px rgba(255, 42, 42, 0.72)); }
}
.hero .wordmark { font-size: clamp(3rem, 13vw, 7.5rem); }
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
  max-width: 20ch;
}
.hero .lede { text-align: center; margin-inline: auto; }

/* ── badges / CTA ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .8rem 1.5rem;
  color: var(--red-text);
  background: rgba(176, 6, 6, 0.16);
  border: 1px solid var(--red);
  --notch: 12px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}
.badge.ghost { background: transparent; border-color: var(--border); color: var(--muted); }

.chip {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .22em .7em;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ── feature cards ─────────────────────────────────────────────────────────── */

.card-title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .7rem;
}
.dot {
  width: 9px; height: 9px;
  background: var(--accent, var(--red));
  transform: rotate(45deg);
  flex: none;
  box-shadow: 0 0 12px var(--accent, var(--red));
}

/* Ride-variant swatches — the four accents the app actually retones itself with. */
.variants { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.variant { --accent: var(--red); }
.variant .panel { --edge: color-mix(in srgb, var(--accent) 22%, transparent); }
.variant .swatch {
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
  margin-bottom: 1rem;
}
.variant h3 { color: var(--accent); }

/* ── device frame ──────────────────────────────────────────────────────────── */

.device {
  position: relative;
  margin-inline: auto;
  width: min(300px, 78vw);
  padding: 10px;
  background: linear-gradient(160deg, #171c26, #090c13);
  border-radius: 34px;
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 50px -20px var(--glow-soft);
}
.device img, .device .device-empty {
  border-radius: 26px;
  width: 100%;
  display: block;
  background: var(--surface);
}
.device-empty {
  aspect-ratio: 9 / 19.5;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px dashed var(--border);
  text-align: center;
  padding: 2rem;
}

/* ── data / safety table ───────────────────────────────────────────────────── */

.facts { display: grid; gap: 0; }
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem .5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.fact:first-child { border-top: 1px solid var(--border); }
@media (min-width: 700px) { .fact { grid-template-columns: 15rem 1fr; gap: 1.5rem; } }
.fact dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
.fact dd { margin: 0; color: var(--muted); }

/* ── footer ────────────────────────────────────────────────────────────────── */

.foot {
  background: var(--rail);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.foot-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: 2.5rem;
}
.foot h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.foot a { color: var(--dim); font-size: .95rem; }
.foot a:hover { color: var(--red-text); }
.foot-base {
  border-top: 1px solid var(--border);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .87rem;
}

/* ── long-form (legal pages) ───────────────────────────────────────────────── */

.doc { padding-block: clamp(3rem, 8vw, 5rem); }
.doc-head { border-bottom: 1px solid var(--border); padding-bottom: 1.6rem; margin-bottom: 2.5rem; }
.doc h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: .6rem 0 0;
}
.doc-body { max-width: var(--measure); display: flex; flex-direction: column; gap: 2.2rem; }
.doc-body section { display: flex; flex-direction: column; gap: .85rem; }
.doc-body h2 {
  font-size: 1.25rem;
  letter-spacing: .1em;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.doc-body h3 { font-size: 1rem; letter-spacing: .1em; color: var(--dim); }
.doc-body ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; color: var(--dim); }
.doc-body li::marker { color: var(--red); }
.doc-body p { color: var(--dim); }
.doc-body strong { color: var(--text); }
.doc-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: #161c28;
  padding: .12em .4em;
  border-radius: 3px;
  color: #e6edf3;
}
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.toc a {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .8em;
  border: 1px solid var(--border);
  color: var(--muted);
}
.toc a:hover { color: var(--red-text); border-color: var(--hairline); text-decoration: none; }

.callout { --edge: var(--hairline); }
.callout .panel-in { display: flex; flex-direction: column; gap: .7rem; }
.callout h3 { color: var(--red-text); }

/* ── utilities ─────────────────────────────────────────────────────────────── */
/* These exist so no element needs a style="" attribute: the site ships a CSP
   with no 'unsafe-inline' in either script-src or style-src, and a single inline
   style would break it. See _headers. */

.a-red    { --accent: var(--red); }
.a-purple { --accent: var(--purple); }
.a-blue   { --accent: var(--blue); }
.a-gold   { --accent: var(--gold); }
.a-reward { --accent: var(--reward); }
.a-cyan   { --accent: var(--cyan); }

.center { align-items: center; text-align: center; }
.center .lede { margin-inline: auto; text-align: center; }
.narrow { max-width: 46rem; }
.w-32 { max-width: 32ch; }
.mt-sm { margin-top: .8rem; }
.mb-sm { margin-bottom: .9rem; }

/* reveal-on-scroll, opt-in via JS adding .in */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }