/* ==========================================================================
   Bright Spark Ops
   Dark precision system. Monochrome plus one acid-lime action.
   ========================================================================== */

:root {
  /* Colors */
  --color-void: #08090a;
  --color-carbon: #0f1011;
  --color-obsidian: #161718;
  --color-graphite: #23252a;
  --color-smoke: #383b3f;
  --color-ash: #62666d;
  --color-fog: #8a8f98;
  --color-mist: #d0d6e0;
  --color-bone: #e5e5e6;
  --color-paper: #ffffff;
  --color-acid-lime: #e4f222;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-micro: 10px;
  --text-label: 12px;
  --text-caption: 13px;
  --text-body: 16px;
  --text-body-sm: 15px;
  --text-body-lg: 17px;
  --text-body-xl: 20px;
  --text-subheading: 24px;
  --text-heading-sm: 32px;
  --text-heading: 48px;
  --text-heading-lg: 64px;

  /* Spacing */
  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px;
  --sp-96: 96px; --sp-128: 128px;

  /* Layout */
  --page-max: 1200px;
  --section-gap: 96px;
  --gutter: 24px;

  /* Radius */
  --radius-badge: 4px;
  --radius-btn: 6px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* Elevation, borders first */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: #23252a;
  --shadow-sm: rgba(0, 0, 0, 0.4) 0 2px 4px 0;
  --shadow-card: rgb(35, 37, 42) 0 0 0 1px inset;
  --shadow-lime:
    rgba(0, 0, 0, 0.01) 0 5px 2px 0,
    rgba(0, 0, 0, 0.04) 0 3px 2px 0,
    rgba(0, 0, 0, 0.07) 0 1px 1px 0,
    rgba(0, 0, 0, 0.08) 0 0 1px 0;
}

/* --------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-void);
  color: var(--color-mist);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: 'cv01' on, 'ss03' on, 'zero' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 510;
  color: var(--color-paper);
  overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

svg { display: block; }

::selection { background: var(--color-acid-lime); color: var(--color-void); }

:focus-visible {
  outline: 2px solid var(--color-mist);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-12) var(--sp-16);
  background: var(--color-paper);
  color: var(--color-void);
  font-size: var(--text-caption);
  border-radius: var(--radius-btn);
}
.skip:focus { left: var(--sp-16); top: var(--sp-16); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: -0.013em;
  font-variant-ligatures: none;
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fog);
  margin-bottom: var(--sp-20);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.011em;
  padding: var(--sp-8) var(--sp-12);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-acid-lime);
  color: var(--color-void);
  font-size: 14px;
  font-weight: 510;
  padding: 10px var(--sp-16);
  box-shadow: var(--shadow-lime);
}
.btn--primary:hover { background: #eefa4a; }

.btn--ghost {
  border-color: var(--color-graphite);
  color: var(--color-mist);
}
.btn--ghost:hover { border-color: var(--color-smoke); background: rgba(255, 255, 255, 0.03); }

.btn--pill {
  background: var(--color-paper);
  color: var(--color-void);
  border-radius: var(--radius-pill);
  font-weight: 510;
  padding: var(--sp-8) var(--sp-16);
}
.btn--pill:hover { background: var(--color-bone); }

/* --------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--color-graphite); }

.nav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-16) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-32);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

/* Supplied wordmark. Width is derived from the 1024x248 source so the box is
   reserved before the image loads and nothing shifts. */
.brand__logo {
  height: 26px;
  width: auto;
  aspect-ratio: 1024 / 248;
  max-width: 100%;
}
.brand__logo--foot { height: 20px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}
.nav__links a {
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--text-caption);
  color: var(--color-mist);
  border-radius: var(--radius-btn);
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--color-paper); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------- hero */

.hero {
  padding-top: var(--sp-96);
  padding-bottom: var(--sp-64);
  position: relative;
  /* The gradient floor bleeds past the content column on purpose. Clip it at
     the section edge so it can never widen the page. `clip` rather than
     `hidden` so no scroll container is created and sticky nav is unaffected. */
  overflow-x: clip;
}

.hero__copy { max-width: 780px; }

.hero__title {
  font-size: var(--text-heading-lg);
  line-height: 1;
  letter-spacing: -0.022em;
  font-weight: 510;
  margin-bottom: var(--sp-24);
  text-wrap: balance;
}

.hero__sub {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-fog);
  max-width: 62ch;
  margin-bottom: var(--sp-32);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.hero__stage {
  position: relative;
  margin-top: var(--sp-64);
}

/* Atmospheric wash under the card. Fades to fully transparent well inside its
   own box so there is never a hard edge, whatever clips it. */
.floor {
  position: absolute;
  inset: 22% 0 -12% 0;
  background: radial-gradient(
    ellipse 58% 76% at 50% 106%,
    rgba(208, 214, 224, 0.22),
    rgba(208, 214, 224, 0.05) 46%,
    rgba(208, 214, 224, 0) 72%
  );
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------- ledger */

.ledger {
  position: relative;
  z-index: 1;
  margin: 0;
  background: var(--color-carbon);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-24);
}

.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-graphite);
  color: var(--color-mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ledger__meta { color: var(--color-fog); }

.ledger__rows { padding-top: var(--sp-8); }

.ledger__row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: baseline;
  gap: var(--sp-16);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ledger__rows > .ledger__row:last-child { border-bottom: 0; }

.ledger__rule {
  height: 1px;
  background: var(--color-graphite);
  margin: var(--sp-8) 0;
}

.ledger__t { color: var(--color-fog); }

.ledger__e {
  font-size: var(--text-body-sm);
  letter-spacing: -0.011em;
  color: var(--color-fog);
  min-width: 0;
}

.ledger__d {
  color: var(--color-paper);
  font-weight: 400;
  white-space: nowrap;
}
.ledger__d--idle { color: var(--color-smoke); }

.ledger__row.is-response .ledger__e { color: var(--color-mist); }
.ledger__row.is-response .ledger__t { color: var(--color-fog); }

.ledger__foot {
  margin-top: var(--sp-20);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-graphite);
  color: var(--color-fog);
  letter-spacing: 0;
  text-transform: none;
}

/* --------------------------------------------------------------- fit strip */

.strip { padding: var(--sp-80) 0; }

.strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-48);
  flex-wrap: wrap;
  padding-top: var(--sp-40);
  border-top: 1px solid var(--color-graphite);
}

.strip__lead {
  font-size: var(--text-body-sm);
  color: var(--color-fog);
  max-width: 46ch;
  line-height: 1.6;
}

.strip__list {
  display: flex;
  align-items: center;
  gap: var(--sp-48);
  flex-wrap: wrap;
}
.strip__list li {
  font-size: var(--text-body-lg);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--color-mist);
}

/* --------------------------------------------------------------- bands */

.band { padding: var(--section-gap) 0; }
.band--tight { padding-top: var(--sp-64); }

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--sp-80);
  align-items: start;
}
.band--flip .band__copy { order: 2; }
.band--flip .band__aside { order: 1; }

.band__title {
  font-size: var(--text-heading);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: var(--sp-24);
  text-wrap: balance;
}

.band__copy p {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-fog);
  max-width: 56ch;
}
.band__copy p + p { margin-top: var(--sp-20); }

.band__note {
  margin-top: var(--sp-24);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--color-graphite);
  color: var(--color-fog);
}
.band__copy .band__note { font-size: var(--text-body-sm); }

/* --------------------------------------------------------------- panels */

.panel {
  background: var(--color-carbon);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-24);
}
.panel--plain { background: rgba(255, 255, 255, 0.02); }

.panel__head {
  color: var(--color-mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: var(--sp-16);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-graphite);
}

.panel__foot {
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-graphite);
  font-size: var(--text-caption);
  color: var(--color-fog);
}

/* cadence */

.cadence__row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: var(--sp-16);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cadence__row:last-child { border-bottom: 0; }

.cadence__day { color: var(--color-fog); }
.cadence__what { font-size: var(--text-body-sm); color: var(--color-mist); letter-spacing: -0.011em; }
.cadence__ch {
  color: var(--color-fog);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-badge);
  padding: 3px 6px;
}
.cadence__row.is-rest .cadence__what { color: var(--color-fog); }
.cadence__row.is-rest .cadence__ch { background: none; color: var(--color-smoke); }

/* quote */

.panel--quote .quote {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-body-xl);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-paper);
  font-weight: 400;
}
.quote__src {
  margin-top: var(--sp-20);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-graphite);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-fog);
}

/* race */

.race__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8) var(--sp-16);
  align-items: baseline;
  padding: var(--sp-12) 0;
}
.race__co { font-size: var(--text-body-sm); color: var(--color-fog); letter-spacing: -0.011em; }
.race__t { color: var(--color-mist); }
.race__bar {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--color-smoke);
  border-radius: 2px;
  transition: width .8s cubic-bezier(.2, .7, .3, 1) .15s;
}
.race__row.is-win .race__co { color: var(--color-paper); }
.race__row.is-win .race__bar { background: var(--color-mist); }

/* contrast list */

.contrast li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.contrast li:last-child { border-bottom: 0; }
.contrast__k { font-size: var(--text-body-sm); color: var(--color-fog); }
.contrast__v { font-size: var(--text-body-sm); color: var(--color-mist); text-align: right; }

/* --------------------------------------------------------------- how */

.how { padding: var(--section-gap) 0; }

.section-head { margin-bottom: var(--sp-56); max-width: 780px; }
.section-head__title {
  font-size: var(--text-heading);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-graphite);
}

.step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-32);
  padding: var(--sp-40) 0;
  border-bottom: 1px solid var(--color-graphite);
}
.step__n { color: var(--color-ash); padding-top: 5px; }
.step__title {
  font-size: var(--text-subheading);
  line-height: 1.33;
  letter-spacing: -0.012em;
  font-weight: 510;
  margin-bottom: var(--sp-12);
}
.step__body p {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-fog);
  max-width: 68ch;
}

/* --------------------------------------------------------------- promise */

.promise { padding: var(--section-gap) 0; }

.promise__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-64);
}

.promise__label {
  color: var(--color-mist);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-graphite);
  margin-bottom: var(--sp-24);
}

.ticks li {
  position: relative;
  padding-left: var(--sp-24);
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-mist);
}
.ticks li + li { margin-top: var(--sp-16); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--color-mist);
}
.ticks--neg li { color: var(--color-fog); }
.ticks--neg li::before { background: var(--color-smoke); }

/* --------------------------------------------------------------- faq */

.faq { padding: var(--section-gap) 0; }

.faq__list { border-top: 1px solid var(--color-graphite); }

.qa { border-bottom: 1px solid var(--color-graphite); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: var(--sp-24) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-body-lg);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--color-paper);
  transition: color .15s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--color-fog);
  border-bottom: 1px solid var(--color-fog);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease, border-color .2s ease;
}
.qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--color-mist); }
.qa summary:hover { color: var(--color-mist); }

.qa p {
  padding: 0 0 var(--sp-24);
  max-width: 76ch;
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-fog);
}

/* --------------------------------------------------------------- cta */

.cta { padding: var(--section-gap) 0 var(--sp-128); }

.cta__inner {
  border-top: 1px solid var(--color-graphite);
  padding-top: var(--sp-64);
  max-width: 900px;
}

.cta__title {
  font-size: var(--text-heading-sm);
  line-height: 1.13;
  letter-spacing: -0.022em;
  margin-bottom: var(--sp-16);
  text-wrap: balance;
}
.cta__sub {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-fog);
  max-width: 60ch;
  margin-bottom: var(--sp-32);
}
.cta__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
  flex-wrap: wrap;
}
.cta__addr {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-fog);
}

/* --------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--color-graphite); padding: var(--sp-40) 0; }

.foot__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  flex-wrap: wrap;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.foot__legal { font-size: var(--text-caption); color: var(--color-fog); }
.foot__legal--dim { color: var(--color-ash); margin-left: auto; }

/* --------------------------------------------------------------- motion */

/* Scoped to .js so that with JavaScript disabled nothing is ever hidden.
   The inline script in <head> adds the class before first paint. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.race__bar { width: var(--w); }
.js .race__bar { width: 0; }
.js .reveal.is-in .race__bar { width: var(--w); }

.js .ledger.is-in .ledger__row,
.js .ledger.is-in .ledger__rule {
  animation: rowIn .45s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i) * 55ms + 120ms);
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .js .ledger.is-in .ledger__row,
  .js .ledger.is-in .ledger__rule { animation: none; }
  .race__bar, .js .race__bar { transition: none; width: var(--w); }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  :root { --text-heading-lg: 56px; --text-heading: 42px; --section-gap: 80px; }
  .band__grid { gap: var(--sp-56); }
  .strip__list { gap: var(--sp-32); }
}

@media (max-width: 900px) {
  :root { --text-heading-lg: 46px; --text-heading: 34px; --text-heading-sm: 28px; --section-gap: 72px; }

  .nav__links { display: none; }
  .nav__inner { gap: var(--sp-16); }
  .btn--pill { margin-left: auto; }

  .band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  .band--flip .band__copy { order: 0; }
  .band--flip .band__aside { order: 0; }

  .promise__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }

  .hero { padding-top: var(--sp-64); }
  .hero__stage { margin-top: var(--sp-48); }
  .floor { inset: 25% -6% -10% -6%; }

  .strip__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-24); }
}

@media (max-width: 620px) {
  :root {
    --text-heading-lg: 36px;
    --text-heading: 28px;
    --text-heading-sm: 24px;
    --text-body-lg: 16px;
    --text-body-xl: 18px;
    --text-subheading: 20px;
    --section-gap: 64px;
    --gutter: 20px;
  }

  .hero__sub { font-size: var(--text-body); }
  .hero__actions .btn { flex: 1 1 auto; }

  .ledger { padding: var(--sp-16); }
  .ledger__row { grid-template-columns: 74px minmax(0, 1fr); row-gap: 2px; column-gap: var(--sp-12); }
  .ledger__d { grid-column: 2; justify-self: start; color: var(--color-fog); font-size: var(--text-micro); }
  .ledger__row.is-response .ledger__d { color: var(--color-paper); }
  .ledger__e { font-size: var(--text-caption); }

  .step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-32) 0; }
  .step__n { padding-top: 0; }

  .cadence__row { grid-template-columns: 54px minmax(0, 1fr) auto; gap: var(--sp-8); }
  .cadence__what { font-size: var(--text-caption); }

  .contrast li { gap: var(--sp-12); }

  .qa summary { font-size: var(--text-body); }

  .foot__legal--dim { margin-left: 0; }
}