@import url("/tokens.css");

/* HERON landing. Every component below is a named Auros component, built to its spec:
   Gradient Pill Button, Ghost Navigation Link, Surface Card, Recessed Card, Feature Row
   Card, Arrow Icon Button, Uppercase Section Label, Hero Headline, Oversized Kinetic Text,
   Statistic Counter, Navigation Bar, Geometric Molecule Illustration, Particle Visual. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--silver);
  font-family: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Particle Visual — the brand-defining atmospheric element */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nav, section, footer { position: relative; z-index: 1; }

/* ── type ─────────────────────────────────────────────────────────
   Weights 400 and 500 only. Pure white for headings and nav; body copy never white. */
.caption {
  display: block; font-size: var(--t-caption); font-weight: var(--w-medium);
  line-height: var(--lh-caption); letter-spacing: var(--tr-caption);
  text-transform: uppercase; color: var(--mist);
}
.label {
  display: block; font-size: var(--t-label); font-weight: var(--w-medium);
  line-height: var(--lh-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--silver);
}
.caption.accent, .label.accent { color: var(--mint); }
.body { font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); margin: 0; color: var(--silver); }
.body.mist { color: var(--mist); }
.body.small { font-size: 13px; color: var(--steel); }
.subheading {
  font-size: var(--t-subheading); font-weight: var(--w-regular);
  line-height: var(--lh-subheading); letter-spacing: var(--tr-subheading);
  color: var(--white); margin: 0;
}
.heading {
  font-size: var(--t-heading); font-weight: var(--w-medium); line-height: var(--lh-tight);
  color: var(--white); margin: var(--s-20) 0 var(--s-24); text-wrap: balance;
}
.heading-lg {
  font-size: var(--t-heading-lg); font-weight: var(--w-medium); line-height: var(--lh-tight);
  letter-spacing: var(--tr-heading-lg); color: var(--white);
  margin: var(--s-20) 0 var(--s-48); text-wrap: balance;
}
.display {
  font-size: var(--t-display); font-weight: var(--w-medium); line-height: var(--lh-tight);
  letter-spacing: var(--tr-display); color: var(--white);
  margin: var(--s-24) 0 var(--s-28); text-wrap: balance;
}
/* Oversized Kinetic Text — text as environmental element */
.kinetic {
  font-size: clamp(120px, 21vw, var(--t-kinetic));
  font-weight: var(--w-medium); line-height: var(--lh-tight);
  letter-spacing: var(--tr-kinetic); color: var(--mist);
  opacity: .05; margin: 0; user-select: none; pointer-events: none; white-space: nowrap;
}

/* ── Navigation Bar ──────────────────────────────────────────────
   Full width, transparent, ~80px. Logo left, links centre, CTA right. */
.nav {
  height: var(--nav-h); max-width: var(--max); margin: 0 auto;
  padding: 0 var(--s-40); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-24); background: transparent;
}
.nav-brand { display: flex; align-items: center; gap: var(--s-12); text-decoration: none; }
.nav-links { display: flex; column-gap: var(--s-16); }
/* Ghost Navigation Link — 12px, 0.12em, white active / silver inactive, no padding */
.nav-links a {
  font-size: var(--t-nav); font-weight: var(--w-regular);
  letter-spacing: var(--tr-nav); text-transform: uppercase;
  color: var(--silver); text-decoration: none; padding: var(--s-12) 0;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--white); }

/* ── Gradient Pill Button — the only place the aurora gradient appears ─ */
.cta {
  display: inline-block; background: var(--grad-aurora);
  color: #222222; text-decoration: none;
  font-size: var(--t-ui); font-weight: var(--w-regular);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 15px 22px; border-radius: var(--r-small); border: 0; cursor: pointer;
  font-family: inherit;
}
.cta:hover { filter: brightness(1.05); }
.cta.lg { padding: 22px 28px; }
/* filled action on the raised surface colour, per the reference's primary-action note */
.cta-solid {
  display: inline-block; background: var(--shoal); color: var(--white);
  text-decoration: none; font-size: var(--t-ui); letter-spacing: 0.06em;
  text-transform: uppercase; padding: 15px 22px; border-radius: var(--r-small);
  border: 1px solid var(--rule); cursor: pointer; font-family: inherit;
}
.cta-solid:hover { border-color: var(--mint); }

/* ── Arrow Icon Button — 32x32, 6px, semi-transparent fill, white arrow ─ */
.arrow {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-small);
  background: rgba(24, 74, 84, 0.5); border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--white); padding: 0;
}
.arrow:hover { background: rgba(24, 74, 84, 0.85); }
.arrow svg { display: block; }

/* ── layout ──────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-40); }
.wrap.narrow { max-width: 640px; }          /* narrow reading column, per the reference */
.band { padding: var(--section-gap) 0; scroll-margin-top: 96px; }
.band.recessed { background: var(--abyss); }

.hero { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; position: relative; }
.hero-kinetic { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: -1; }
.hero-inner { max-width: 980px; margin: 0 auto; padding: 0 var(--s-40) var(--s-80); text-align: center; }

/* The heron mark, above the stack. Sized by height so the aspect ratio is the asset's own
   (520x418), and given width/height attributes in the markup so it reserves its space
   before it loads — otherwise the whole hero jumps when it arrives. */
.hero-mark {
  display: block; height: 128px; width: auto; margin: 0 auto var(--s-28);
  animation: mark-in .7s cubic-bezier(.2, 0, 0, 1) both;
}
@keyframes mark-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.lede { max-width: 62ch; margin: 0 auto var(--s-40); }
.hero-actions { display: flex; gap: var(--s-16); justify-content: center; flex-wrap: wrap; }

/* ── Statistic Counter — 86px in the phosphor tint, 13px label ────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--element-gap); }
.stat { display: flex; flex-direction: column; gap: var(--s-12); }
.stat-n {
  font-size: var(--t-stat); font-weight: var(--w-medium); line-height: var(--lh-tight);
  letter-spacing: var(--tr-stat); color: var(--phosphor);
}
.stat-l {
  font-size: var(--t-stat-label); font-weight: var(--w-regular);
  letter-spacing: var(--tr-stat-label); text-transform: uppercase; color: var(--mist);
}

/* ── Surface Card — raised, 16px, 36px padding, no shadow, no border ─ */
.card { background: var(--shoal); border-radius: var(--r-card); padding: var(--card-pad); }

/* ── Feature Row Card — transparent, 48px vertical / 36px horizontal ─ */
.feature {
  background: transparent; border-radius: var(--r-card);
  padding: var(--s-48) var(--s-36); border-bottom: 1px solid var(--rule);
}
.feature:last-child { border-bottom: 0; }
.feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-20); }
.feature-body { max-width: 62ch; margin-top: var(--s-12); }
.feature[data-open="false"] .feature-body { display: none; }
.feature .arrow svg { transition: transform .18s ease; }
.feature[data-open="true"] .arrow svg { transform: rotate(90deg); }

/* ── Recessed Card — deepest surface, 120px vertical ─────────────── */
.well { background: var(--abyss); border-radius: var(--r-card); padding: var(--s-120) var(--s-48); }
.well-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-40); margin-top: var(--s-40); }

/* asymmetric two-column: stacked cards left, illustration right */
.split { display: grid; grid-template-columns: 1fr 0.82fr; gap: var(--s-48); align-items: start; }

/* ── interactive term-structure explorer ─────────────────────────── */
.explorer { background: var(--shoal); border-radius: var(--r-card); padding: var(--card-pad); }
.explorer-tabs { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-24); }
.chip {
  font: inherit; font-size: var(--t-nav); letter-spacing: var(--tr-nav);
  text-transform: uppercase; color: var(--silver);
  background: transparent; border: 1px solid var(--rule);
  border-radius: var(--r-small); padding: 8px 12px; cursor: pointer;
}
.chip:hover { border-color: var(--mint); color: var(--white); }
.chip[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--canvas); }
.ex-chart { width: 100%; height: 210px; display: block; }
.ex-axis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); margin-top: var(--s-12); }
.ex-axis div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ex-axis b { font-family: "IBM Plex Mono", monospace; font-weight: var(--w-regular); font-size: 12px; color: var(--mist); }
/* --steel at 10px on --shoal measures 2.78:1, well under the 4.5:1 floor, and these are
   the window labels that give the chart its meaning — not decoration. The reference
   assigns --steel to captions; contrast wins over that assignment. --silver is 11:1. */
.ex-axis small { font-size: var(--t-caption); letter-spacing: var(--tr-caption); text-transform: uppercase; color: var(--silver); }
.ex-verdict { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-24); flex-wrap: wrap; }
.ex-verdict .tag {
  font-size: var(--t-nav); letter-spacing: var(--tr-nav); text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--r-small); padding: 5px 10px;
}
.ex-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-20); margin-top: var(--s-24); }
.ex-meta div { display: flex; flex-direction: column; gap: 4px; }
.ex-meta b { font-family: "IBM Plex Mono", monospace; font-weight: var(--w-regular); font-size: 20px; color: var(--white); }
.ex-meta small { font-size: var(--t-caption); letter-spacing: var(--tr-caption); text-transform: uppercase; color: var(--silver); }

/* ── funnel ──────────────────────────────────────────────────────── */
.funnel { list-style: none; margin: var(--s-32) 0 var(--s-20); padding: 0; }
.funnel li {
  display: grid; grid-template-columns: 1fr 200px auto; gap: var(--s-20);
  align-items: center; padding: var(--s-16) 0; border-bottom: 1px solid var(--rule);
}
.funnel li:last-child { border-bottom: 0; }
.funnel .f-n { font-family: "IBM Plex Mono", monospace; font-size: 20px; color: var(--mist); text-align: right; }
/* --phosphor is reserved for large statistics and this is a 20px count, so the highlight
   comes from the accent that already means "survived" everywhere else in the app. */
.funnel li:last-child .f-n { color: var(--mint); }
.f-bar { height: 6px; border-radius: var(--r-small); background: var(--rule-2); overflow: hidden; }
.f-bar i { display: block; height: 100%; background: var(--slate); transition: width .7s cubic-bezier(.2,0,0,1); }
.funnel li:last-child .f-bar i { background: var(--mint); }

/* ── Geometric Molecule Illustration ─────────────────────────────── */
.molecule { width: 100%; height: auto; display: block; opacity: .5; }

/* ── footer: recessed well, 120px ────────────────────────────────── */
.foot { background: var(--abyss); padding: var(--s-120) 0; margin-top: var(--section-gap); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-48); }
.foot-links { display: flex; flex-direction: column; gap: var(--s-12); }
.foot-links a { color: var(--silver); text-decoration: none; font-size: var(--t-body); }
.foot-links a:hover { color: var(--white); }
.foot-note { margin-top: var(--s-48); padding-top: var(--s-24); border-top: 1px solid var(--rule); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

@media (max-width: 1080px) {
  :root { --t-display: 54px; --t-heading-lg: 38px; --t-heading: 28px; --t-stat: 52px; --section-gap: 48px; }
  .hero-mark { height: 92px; margin-bottom: var(--s-20); }
  .split, .well-grid, .stats, .foot-grid, .ex-meta { grid-template-columns: 1fr; }
  .stats { gap: var(--s-32); }
  .nav-links { display: none; }
  .well { padding: var(--s-64) var(--s-28); }
  .foot { padding: var(--s-64) 0; }
  .wrap { padding: 0 var(--s-24); }
  .funnel li { grid-template-columns: 1fr auto; }
  .funnel .f-bar { display: none; }
}
@media (max-width: 720px) { .hero-mark { height: 74px; } }

@media (prefers-reduced-motion: reduce) {
  #field { display: none; }
  .f-bar i { transition: none; }
  .hero-mark { animation: none; }
}

/* THE RECORD — a 2x2 of live ledger statistics beside the argument for it */
.rec-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.rec-tiles > div { background: var(--shoal); padding: 30px var(--s-28); display: flex; flex-direction: column; gap: 8px; }
.rec-tiles b { font-size: 44px; font-weight: var(--w-medium); line-height: 1; letter-spacing: var(--tr-stat);
  color: var(--phosphor); }
.rec-tiles b.pending { color: var(--steel); }
.rec-tiles small { font-size: var(--t-caption); font-weight: var(--w-medium); letter-spacing: var(--tr-caption);
  text-transform: uppercase; color: var(--silver); }
@media (max-width: 720px) { .rec-tiles b { font-size: 34px; } }