/* APEX — design language derived from the BMW M system
 * Near-black cockpit canvas · M tricolor accent (brand marker only) ·
 * industrial zero-radius geometry · uppercase letterspaced labels.
 */

:root {
  /* surface */
  --canvas: #000000;
  --surface-soft: #0d0d0d;
  --surface-card: #141414;
  --surface-elevated: #1c1c1c;
  --carbon: #2b2b2b;

  /* hairlines */
  --hairline: #2a2a2a;
  --hairline-strong: #3c3c3c;

  /* text */
  --ink: #ffffff;
  --body: #bbbbbb;
  --body-strong: #e6e6e6;
  --muted: #7e7e7e;

  /* M tricolor — brand marker, never a CTA fill */
  --m-blue-light: #0066b1;
  --m-blue-dark: #1c69d4;
  --m-red: #e22718;

  /* type */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* scale */
  --container: 1180px;
  --gutter: 40px;
  --section-y: 104px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* ===== M tricolor stripe ===== */
.mstripe {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--m-blue-light) 0 33.33%,
    var(--m-blue-dark) 33.33% 66.66%,
    var(--m-red) 66.66% 100%);
}
.mstripe--short { width: 52px; }

/* ===== header / nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: 0.28em; font-size: 18px;
}
.brand .dot {
  width: 9px; height: 9px; background: var(--m-red);
  display: inline-block;
}
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--body); transition: color .15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }

/* ===== language toggle ===== */
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
.lang a {
  padding: 7px 12px; color: var(--muted); text-transform: uppercase;
  transition: color .15s, background .15s;
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { color: var(--ink); background: var(--surface-card); }
.lang .div { width: 1px; align-self: stretch; background: var(--hairline-strong); }

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 15px 26px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.btn:hover { background: var(--ink); color: var(--canvas); }
.btn--primary { background: var(--ink); color: var(--canvas); }
.btn--primary:hover { background: transparent; color: var(--ink); }
.nav-links a.btn--primary { color: var(--canvas); }
.nav-links a.btn--primary:hover { color: var(--ink); }
.btn--ghost { border-color: var(--hairline-strong); color: var(--body); }
.btn--ghost:hover { background: var(--surface-card); color: var(--ink); border-color: var(--hairline-strong); }

/* ===== eyebrow / labels ===== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.eyebrow .tick { color: var(--m-red); }

/* ===== type ===== */
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; margin: 0; }
.display { font-size: clamp(44px, 8vw, 86px); line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; }
.display b { font-weight: 700; }
.h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--body); max-width: 56ch; }

/* ===== hero ===== */
.hero { position: relative; padding: 92px 0 84px; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(28,105,212,0.10), transparent 55%),
    radial-gradient(80% 70% at 10% 110%, rgba(226,39,24,0.07), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }

/* HUD readout under hero */
.hud {
  margin-top: 56px; border: 1px solid var(--hairline);
  background: var(--surface-soft);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hud .cell { padding: 22px 24px; border-right: 1px solid var(--hairline); }
.hud .cell:last-child { border-right: 0; }
.hud .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hud .v { font-size: 26px; font-weight: 300; margin-top: 8px; }
.hud .v b { font-weight: 700; }

/* ===== sections ===== */
section { padding: var(--section-y) 0; border-top: 1px solid var(--hairline); }
.section-head { max-width: 60ch; margin-bottom: 56px; }
.section-head .lede { margin-top: 20px; }

/* ===== step grid (how it works) ===== */
.steps { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--hairline); }
.step {
  display: grid; grid-template-columns: 120px 1fr; gap: 28px;
  padding: 36px 32px; border-bottom: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 0; }
.step .num { font-family: var(--font-mono); font-size: 13px; color: var(--m-red); letter-spacing: 0.1em; padding-top: 6px; }
.step h3 { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 12px; }
.step p { color: var(--body); margin: 0; max-width: 64ch; }

/* ===== feature cards ===== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.card { background: var(--surface-soft); padding: 38px 30px; }
.card .ic { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.card h3 { font-size: 21px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
.card p { color: var(--body); margin: 0; }

/* ===== spec strip ===== */
.spec { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
.spec .s { padding: 40px 30px; border-right: 1px solid var(--hairline); }
.spec .s:last-child { border-right: 0; }
.spec .big { font-size: clamp(40px, 6vw, 64px); font-weight: 300; line-height: 1; }
.spec .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ===== quote ===== */
.quote { padding: 80px 0; }
.quote blockquote { margin: 0; font-size: clamp(24px, 3.6vw, 40px); font-weight: 300; line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; }
.quote cite { display: block; margin-top: 28px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--muted); font-style: normal; }

/* ===== CTA band ===== */
.cta-band { background: var(--surface-soft); }
.cta-band .inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { max-width: 16ch; }

/* ===== beta form ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hairline); }
.form-grid .field { padding: 26px 28px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.form-grid .field:nth-child(2n) { border-right: 0; }
.form-grid .field.full { grid-column: 1 / -1; border-right: 0; }
.form-grid label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; background: transparent; border: 0; color: var(--ink);
  font-family: var(--font-body); font-size: 17px; padding: 0; outline: none;
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: #555; }
.form-grid select { appearance: none; cursor: pointer; }
.form-grid select option { background: var(--surface-card); }
.field:focus-within { background: var(--surface-soft); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.form-note { font-size: 13px; color: var(--muted); max-width: 48ch; }
.form-ok { display: none; border: 1px solid var(--m-blue-dark); background: rgba(28,105,212,0.08); padding: 26px 28px; margin-top: 22px; }
.form-ok.show { display: block; }
.form-ok strong { display: block; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

/* ===== footer ===== */
.foot { border-top: 1px solid var(--hairline); padding: 56px 0 64px; }
.foot-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.foot .brand { margin-bottom: 16px; }
.foot p { color: var(--muted); font-size: 13px; max-width: 36ch; margin: 0; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 400; }
.foot-col a { display: block; font-size: 14px; color: var(--body); margin-bottom: 10px; }
.foot-col a:hover { color: var(--ink); }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ===== reveal (progressive enhancement) ===== */
/* Visible by default. Only when JS marks the page .js-ready do we hide+animate. */
.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ===== focus ===== */
:focus-visible { outline: 2px solid var(--m-blue-dark); outline-offset: 3px; }

/* ===== responsive ===== */
@media (max-width: 900px) {
  :root { --gutter: 22px; --section-y: 72px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-right { display: flex; align-items: center; gap: 14px; }
  .lang { font-size: 11px; }
  .hud { grid-template-columns: 1fr 1fr; }
  .hud .cell:nth-child(2) { border-right: 0; }
  .hud .cell:nth-child(1), .hud .cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .cards { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .spec .s { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .spec .s:last-child { border-bottom: 0; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field { border-right: 0; }
}