/* ============================================================
   AFTERPAD — the look. White, tight grotesque type, hairlines,
   one accent. Market colours only where there is market data.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f6f6f4;
  --ink: #0f0f0f;
  --ink-2: #3d3d3b;
  --muted: #7a7a77;
  --line: #e6e6e2;
  --line-2: #d6d6d1;
  --accent: #0f0f0f;
  --up: #12a86a;
  --down: #e5484d;
  --panel: #151515;
  --panel-2: #1f1f1f;
  --radius: 14px;
  --radius-lg: 22px;
  --nav-h: 68px;
  --wrap: 1200px;
  --gutter: 24px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.h1 {
  font-size: clamp(52px, 8.4vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
@media (max-width: 640px) { .h2 br { display: none; } }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.body { color: var(--ink-2); max-width: 36em; }
.muted { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-2); margin-bottom: 20px;
}
.eyebrow-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-ghost { background: var(--bg-2); color: var(--ink); }
.btn-ghost:hover { background: #ededea; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #ececec; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-outline:hover { border-color: rgba(255,255,255,.6); }
.btn:active { transform: translateY(1px); }

.link-arrow { font-weight: 500; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow span { transition: transform .18s ease; }
.link-arrow:hover span { transform: translateX(3px); }

/* ------------------------------------------------------------
   Nav
   ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.84);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
/* the supplied mark, used exactly as given: it comes on an opaque black
   field, so it is shown as a tile rather than floated on the page —
   that reads as deliberate on the white nav and disappears into the
   night band on the dark one */
.brand-mark { width: 26px; height: 26px; border-radius: 7px; display: block; flex: none; }
.brand-name { font-weight: 600; font-size: 21px; letter-spacing: -0.03em; }
.nav-links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; }
.nav-burger {
  display: none; margin-left: auto; width: 40px; height: 40px; border: 0; background: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { display: none; }
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px var(--gutter) 20px; border-top: 1px solid var(--line);
  }
  .mobile-menu a { padding: 12px 0; font-size: 18px; font-weight: 500; }
  .mobile-menu .btn { margin-top: 8px; justify-content: center; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 400px); gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero-copy .h1 { margin-bottom: 28px; }
.hero-copy .lede { margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* market clock card */
.clock {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px 18px; background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 50px -30px rgba(0,0,0,.25);
}
.clock-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.clock-row-chain { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.clock-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.clock-value { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; }
.clock-sub { font-size: 14px; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.clock-foot { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-live { background: #e8f8ef; color: var(--up); }
.pill-live .pill-dot { animation: blink 1.6s ease-in-out infinite; }
.pill-closed { background: #f4f4f2; color: var(--ink-2); }
.pill-muted { background: #f4f4f2; color: var(--muted); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.daybar { margin-top: 18px; }
.daybar-track { position: relative; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.daybar-session { position: absolute; top: 0; bottom: 0; background: #d9d9d5; }
.daybar-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent); }
.daybar-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 6px; }

/* ------------------------------------------------------------
   The tape — canvas + terminal window
   ------------------------------------------------------------ */
.tape { padding: clamp(16px, 3vw, 40px) 0 clamp(48px, 6vw, 80px); }
.tape-panel {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  overflow: clip;
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px 0;
}
@media (min-width: 720px) { .tape-panel { aspect-ratio: 16 / 9; padding: 56px 56px 0; } }
@media (min-width: 1024px) { .tape-panel { padding: 64px 64px 0; } }
#tape-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.term {
  position: relative; z-index: 1; width: 100%; max-width: 1100px; min-width: 0;
  background: #fff; color: var(--ink);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255,255,255,.35); border-bottom: 0;
  box-shadow: 0 -10px 60px -20px rgba(0,0,0,.7);
  font-family: var(--font); font-size: 12px;
  transition: transform .5s ease;
  overflow: hidden;
}
.tape-panel:hover .term { transform: scale(1.01); }
.term-chrome {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; }
.term-title { margin-left: 8px; font-weight: 500; color: var(--ink-2); }
.term-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.term-status .pill-dot { background: var(--up); animation: blink 1.6s ease-in-out infinite; }

.term-ticker {
  display: flex; gap: 22px; padding: 7px 12px; border-bottom: 1px solid var(--line);
  font-weight: 500; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.term-ticker b { font-weight: 600; margin-right: 4px; }

.term-grid { display: grid; grid-template-columns: 1.35fr 1fr; }
.term-col { min-width: 0; }
.term-col:first-child { border-right: 1px solid var(--line); }
.term-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.badge-live { background: #d3f5e3; color: #0b6b43; }
.badge-up { background: #e8f8ef; color: var(--up); border-radius: 999px; font-size: 11px; letter-spacing: 0; text-transform: none; padding: 4px 10px; }
.risk { display: inline-block; padding: 2px 7px; border-radius: 999px; border: 1px solid; font-size: 9px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.risk-clean { color: #0b6b43; background: #eefaf3; border-color: #bfeed3; }
.risk-caution { color: #8a5a00; background: #fff6e0; border-color: #f4dc9a; }
.risk-danger { color: #9b1c22; background: #fdecec; border-color: #f5bcbf; }

.term-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.term-table td { padding: 6px 0; border-bottom: 1px solid #f0f0ed; white-space: nowrap; }
.term-table td:first-child { padding-left: 12px; font-weight: 600; }
.term-table td:first-child::before { content: ""; display: inline-block; width: 2px; height: 12px; margin-right: 8px; vertical-align: -2px; background: transparent; border-radius: 1px; }
.term-table tr.is-hot td:first-child::before { background: var(--ink); }
.term-table tr.is-hot td { background: #fafaf8; }
.term-table td:last-child { padding-right: 12px; text-align: right; }
.term-table .t-chg { text-align: right; font-weight: 500; }
.term-table .t-muted { color: var(--muted); }

.term-buy { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.buy-pill {
  height: 26px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; cursor: default;
}
.term-fee { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.term-tape { font-variant-numeric: tabular-nums; }
.term-tape li {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid #f0f0ed; white-space: nowrap;
  animation: tape-in .35s ease both;
}
.term-tape .tp-side { font-weight: 700; font-size: 10px; letter-spacing: .04em; }
.term-tape .tp-buy { color: var(--up); } .term-tape .tp-sell { color: var(--down); }
.term-tape .tp-lp { color: var(--accent); } .term-tape .tp-new { color: var(--ink); }
.term-tape .tp-sym { font-weight: 600; }
.term-tape .tp-who { color: var(--muted); }
@keyframes tape-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 719px) {
  /* the window is a fixed-height block, so the panel takes a fixed
     height to keep a band of candles above it. (A min-height would
     transfer through the aspect ratio into a min-width.) */
  .tape-panel { aspect-ratio: auto; height: 560px; }
}
@media (max-width: 640px) {
  .term-grid { grid-template-columns: 1fr; }
  .term-col-tape { display: none; }
  .term-col:first-child { border-right: 0; }
  .term-ticker { gap: 14px; }
  .term-fee { display: none; }
  .term-status { display: none; }
}

/* ------------------------------------------------------------
   Principles
   ------------------------------------------------------------ */
.statement { padding: 0 0 clamp(48px, 7vw, 96px); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.principle { padding: 32px 28px 8px 0; border-right: 1px solid var(--line); margin-right: 28px; }
.principle:last-child { border-right: 0; margin-right: 0; }
.principle-num { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 40px; }
.principle h3 { margin-bottom: 10px; }
.principle p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .principle:last-child { border-bottom: 0; }
  .principle-num { margin-bottom: 16px; }
}

/* ------------------------------------------------------------
   Section heads
   ------------------------------------------------------------ */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.section-note { max-width: 24em; color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .section-head { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ------------------------------------------------------------
   Capabilities — five expanding panels
   ------------------------------------------------------------ */
.caps { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.cap-strip {
  display: flex; height: clamp(360px, 42vw, 520px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--panel); border: 1px solid #262626;
}
.cap {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px; color: #fff; overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: flex-grow .45s cubic-bezier(.2,.7,.2,1);
}
.cap:last-child { border-right: 0; }
.cap:hover, .cap.is-open { flex-grow: 1.9; }
.cap-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; transition: transform .6s ease, opacity .4s ease; }
.cap:hover .cap-art, .cap.is-open .cap-art { transform: scale(1.04); }
.cap::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity .35s ease;
}
.cap:hover::after, .cap.is-open::after { opacity: 1; }
.cap-plus {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px); display: grid; place-items: center; flex: none;
  transition: background .25s ease;
}
.cap-plus::before {
  content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: #fff;
  transition: transform .3s ease;
}
.cap:hover .cap-plus, .cap.is-open .cap-plus { background: #fff; }
.cap:hover .cap-plus::before, .cap.is-open .cap-plus::before { content: "→"; color: var(--ink); font-size: 18px; }
.cap-body { display: block; }
.cap-title { display: block; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cap-desc {
  display: block; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82);
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .45s ease, opacity .35s ease .08s, margin-top .3s ease;
}
.cap:hover .cap-desc, .cap.is-open .cap-desc { max-height: 140px; opacity: 1; margin-top: 10px; }
@media (max-width: 860px) {
  .cap-strip { flex-direction: column; height: auto; }
  .cap { min-height: 150px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 20px; }
  .cap:last-child { border-bottom: 0; }
  .cap:hover, .cap.is-open { flex-grow: 1; }
  .cap-desc { max-height: none; opacity: 1; margin-top: 8px; }
  .cap::after { opacity: 1; }
}

/* ------------------------------------------------------------
   After hours
   ------------------------------------------------------------ */
.after { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line); background: var(--bg-2); }
.after-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.after-copy .h2 { margin-bottom: 24px; }
.after-copy .body { margin-bottom: 16px; }
.after-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.after-stats strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 4px; }
.after-stats span { font-size: 13px; color: var(--muted); line-height: 1.4; display: block; }
@media (max-width: 960px) { .after-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .after-stats { grid-template-columns: 1fr; gap: 14px; } }

.disloc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px 14px; box-shadow: 0 20px 50px -35px rgba(0,0,0,.3); }
.disloc-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.disloc-head .badge-up { margin-left: auto; }
.logo-sm { width: 22px; height: 22px; border-radius: 6px; }
.disloc-prices { display: flex; gap: 28px; margin: 16px 0 8px; }
.disloc-prices span { display: block; font-size: 12px; }
.disloc-prices strong { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.disloc-chart { width: 100%; height: 150px; display: block; }
.disloc-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 6px; }

.disloc-list { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.disloc-list li { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.disloc-list li:last-child { border-bottom: 0; }
.disloc-list img { width: 22px; height: 22px; border-radius: 6px; }
.disloc-list .up, .disloc-list .down { min-width: 56px; text-align: right; }

/* ------------------------------------------------------------
   $BELL
   ------------------------------------------------------------ */
.token { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.token-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.token-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px 28px; min-height: 260px; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; }
.token-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.token-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: auto; }
.token-card h3 { margin: 40px 0 10px; }
.token-card p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 1024px) { .token-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .token-grid { grid-template-columns: 1fr; } .token-card { min-height: 0; } .token-card h3 { margin-top: 20px; } }

/* ------------------------------------------------------------
   Agents
   ------------------------------------------------------------ */
.agents { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.agents-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.agents .h2 { margin-bottom: 24px; }
.bullets { margin-top: 28px; display: grid; gap: 14px; color: var(--ink-2); font-size: 16px; }
.bullets li { padding-left: 22px; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.bullets strong { color: var(--ink); font-weight: 600; }
.code {
  margin: 0; background: var(--panel); color: #e9e9e6; border-radius: var(--radius-lg);
  padding: 26px 28px; font-family: var(--mono); font-size: 13px; line-height: 1.7;
  overflow: auto; border: 1px solid #262626;
}
.c-muted { color: #8a8a86; } .c-key { color: #fff; font-weight: 600; } .c-str { color: #d9d9d5; } .c-num { color: #fff; }
@media (max-width: 960px) { .agents-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Privacy
   ------------------------------------------------------------ */
.privacy { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line); }
.privacy .h2 { margin-bottom: 40px; max-width: 16em; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.privacy-grid h3 { margin-bottom: 10px; }
.privacy-grid p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) { .privacy-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ------------------------------------------------------------
   CTA + footer
   ------------------------------------------------------------ */
.cta { padding: 0 0 clamp(48px, 6vw, 80px); }
.cta-box {
  background: var(--panel); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.cta-box .hero-actions { margin: 0; justify-content: center; }

.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { margin-top: 14px; color: var(--muted); max-width: 26em; }
.footer h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.footer-grid a:not(.brand) { display: block; color: var(--ink-2); padding: 4px 0; }
.footer-grid a:not(.brand):hover { color: var(--ink); }
.footer-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Night. The hero and the tape are one dark band; the rest of the
   page stays white. Behind the headline the real tape drifts by.
   ============================================================ */
.night { background: radial-gradient(120% 80% at 70% 0%, #1c1c1c 0%, #101010 55%, #0c0c0c 100%); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.night .hero { position: relative; padding-bottom: clamp(28px, 4vw, 48px); }
.night .eyebrow { color: rgba(255,255,255,.72); }
.night .eyebrow-dot { background: #fff; }
.night .lede { color: rgba(255,255,255,.72); }
.night .tape { padding-top: 0; }
.night .tape-panel { border-color: rgba(255,255,255,.12); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03); }


.hero-copy, .clock { position: relative; z-index: 1; }
.night .clock { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); color: #fff; }
.night .clock-label { color: rgba(255,255,255,.5); }
.night .clock-sub, .night .clock-foot, .night .daybar-ticks { color: rgba(255,255,255,.6); }
.night .clock-row-chain { border-top-color: rgba(255,255,255,.12); }
.night .daybar-track { background: rgba(255,255,255,.08); }
.night .daybar-session { background: rgba(255,255,255,.28); }
.night .daybar-now { background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.35); }
.night .pill-closed { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.night .pill-muted { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.night .pill-live { background: rgba(47,209,139,.16); color: #2fd18b; }
.night .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-stats b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-stats span { font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ============================================================
   Motion. Many effects, each restrained; none on the type.
   ============================================================ */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* pointer light: a soft spot follows the cursor over cards */
.lit { position: relative; }
.lit::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,.045), transparent 60%);
}
.lit.is-lit::after { opacity: 1; }
.night .lit::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 60%); }

.magnet { transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; will-change: transform; }

/* numbers that changed roll into place; cells that moved flash */
.roll { display: inline-block; animation: roll-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes roll-in { from { transform: translateY(-.6em); opacity: 0; } to { transform: none; opacity: 1; } }
.tick-up { animation: tick-up .9s ease; }
.tick-down { animation: tick-down .9s ease; }
@keyframes tick-up { 0% { background: rgba(18,168,106,.18); } 100% { background: transparent; } }
@keyframes tick-down { 0% { background: rgba(229,72,77,.16); } 100% { background: transparent; } }

/* ambient motion inside the capability panels */
.cap-art polyline { animation: art-drift 11s ease-in-out infinite alternate; }
.cap-art polyline:nth-child(odd) { animation-duration: 14s; animation-direction: alternate-reverse; }
@keyframes art-drift { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.cap-art .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: art-breathe 7s ease-in-out infinite alternate; }
@keyframes art-breathe { from { transform: scaleY(.94); } to { transform: scaleY(1.06); } }
.cap-art .ring { animation: art-ping 6s ease-out infinite; }
@keyframes art-ping { 0% { stroke-opacity: .05; } 12% { stroke-opacity: .5; } 100% { stroke-opacity: .05; } }
.cap-art .route { animation: art-march 3.2s linear infinite; }
@keyframes art-march { to { stroke-dashoffset: -52; } }
.cap-art .hop { transform-box: fill-box; transform-origin: center; animation: art-hop 4s ease-in-out infinite; }
@keyframes art-hop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.cap-art .cell { animation: art-flicker var(--d, 6s) ease-in-out infinite alternate; animation-delay: var(--o, 0s); }
@keyframes art-flicker { from { fill-opacity: var(--lo, .05); } to { fill-opacity: var(--hi, .35); } }
.cap-art .core { transform-box: fill-box; transform-origin: center; animation: art-hop 3s ease-in-out infinite; }
.cap-art .follower { animation: art-flicker var(--d, 5s) ease-in-out infinite alternate; animation-delay: var(--o, 0s); }

@media (prefers-reduced-motion: reduce) {
  .ribbon-track, .cap-art polyline, .cap-art .bar, .cap-art .ring, .cap-art .route, .cap-art .hop, .cap-art .cell, .cap-art .core, .cap-art .follower { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   More motion.
   ============================================================ */

/* night: two blurred lights drifting behind the hero, and a film grain */
.night::before, .night::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px);
}
.night::before { width: 720px; height: 720px; left: -180px; top: -240px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 62%); animation: glow-a 26s ease-in-out infinite alternate; }
.night::after { width: 560px; height: 560px; right: 8%; top: 40%; background: radial-gradient(circle, rgba(47,209,139,.13), transparent 60%); animation: glow-b 33s ease-in-out infinite alternate; }
@keyframes glow-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes glow-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-160px, -120px) scale(.9); } }
.grain {
  position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-5%,-2%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); } }
.night .hero, .night .tape { position: relative; z-index: 1; }

/* the clock: a sweep runs across the session window; the now-marker pulses */
.daybar-session { overflow: hidden; }
.daybar-session::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: sweep 4.5s ease-in-out infinite; }
@keyframes sweep { to { left: 140%; } }
.night .daybar-now { animation: now-pulse 2.4s ease-in-out infinite; }
@keyframes now-pulse { 0%, 100% { box-shadow: 0 0 6px 1px rgba(255,255,255,.3); } 50% { box-shadow: 0 0 14px 4px rgba(255,255,255,.6); } }

/* the terminal window: a caret, a ticker that scrolls, rows that land, a pill that breathes */
.term-title::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 6px; vertical-align: -1px; background: var(--ink); animation: caret 1.1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.term-ticker { gap: 0; padding-left: 0; padding-right: 0; }
.term-ticker-track { display: inline-flex; gap: 22px; padding: 0 12px; animation: ticker 38s linear infinite; will-change: transform; }
.term-ticker:hover .term-ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.term-tape li.is-new { animation: tape-in .35s ease both, land 1.6s ease-out; }
@keyframes land { 0% { background: rgba(18,168,106,.16); } 100% { background: transparent; } }
.term-tape li.is-new .tp-sell { animation: none; }
.term-table tr.is-hot td:first-child::before { animation: hot 1.6s ease-in-out infinite; }
@keyframes hot { 50% { opacity: .25; } }
.buy-pill { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.035); box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); } }

/* the five panels: the art leans toward the pointer */
.cap-art { transition: transform .6s ease, opacity .4s ease; }
.cap.is-lit .cap-art { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.05); }

/* a rule draws itself under a section heading as it arrives */
.section-head .eyebrow, .after-copy .eyebrow, .privacy .eyebrow, .agents .eyebrow { position: relative; padding-bottom: 8px; }
.section-head .eyebrow::after, .after-copy .eyebrow::after, .privacy .eyebrow::after, .agents .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.7,.2,1) .2s;
}
.is-in .eyebrow::after, .is-in.after-copy .eyebrow::after { transform: scaleX(1); }
.after-grid.is-in .after-copy .eyebrow::after { transform: scaleX(1); }

/* grids arrive one card at a time */
.token-grid > *, .principles > *, .privacy-grid > *, .after-stats > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.is-in > .token-card, .is-in > .principle, .is-in > .privacy-grid > *, .privacy-grid.is-in > *, .after-grid.is-in .after-stats > * { opacity: 1; transform: none; }
.token-grid.is-in > :nth-child(2), .principles.is-in > :nth-child(2), .privacy-grid.is-in > :nth-child(2), .after-grid.is-in .after-stats > :nth-child(2) { transition-delay: .12s; }
.token-grid.is-in > :nth-child(3), .principles.is-in > :nth-child(3), .privacy-grid.is-in > :nth-child(3), .after-grid.is-in .after-stats > :nth-child(3) { transition-delay: .24s; }
.token-grid.is-in > :nth-child(4) { transition-delay: .36s; }

/* the dislocation card's candles grow in when the section arrives */
.disloc-chart rect, .disloc-chart line.wick { transform-box: fill-box; transform-origin: 50% 100%; animation: candle-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 9ms); }
@keyframes candle-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* the dark call-to-action box gets the same drifting light */
.cta-box { position: relative; overflow: hidden; }
.cta-box::before { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; top: -60%; margin-left: -300px; border-radius: 50%; filter: blur(60px); background: radial-gradient(circle, rgba(255,255,255,.12), transparent 62%); animation: glow-a 24s ease-in-out infinite alternate; pointer-events: none; }
.cta-box > * { position: relative; }

/* the nav's terminal button carries a live dot */
.nav-cta .btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2fd18b; animation: blink 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .night::before, .night::after, .grain, .daybar-session::after, .night .daybar-now, .term-title::after, .term-ticker-track, .buy-pill, .cta-box::before, .nav-cta .btn::before, .disloc-chart rect, .term-table tr.is-hot td:first-child::before { animation: none !important; }
  .token-grid > *, .principles > *, .privacy-grid > *, .after-stats > * { opacity: 1; transform: none; }
}

.term-ticker img, .term-tape img, .term-table img { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; object-fit: cover; background: #fff; }

/* ============================================================
   Air. The page was pressed to the top; everything breathes now.
   ============================================================ */
.hero { padding: clamp(88px, 13vw, 176px) 0 clamp(56px, 7vw, 96px); }
.night .hero { padding-bottom: clamp(56px, 7vw, 96px); }
.hero-grid { gap: clamp(48px, 7vw, 120px); align-items: center; }
.hero-copy .eyebrow { margin-bottom: 30px; }
.hero-copy .h1 { margin-bottom: 40px; }
.hero-copy .lede { margin-bottom: 48px; }
.hero-actions { margin-bottom: 40px; gap: 14px; }
.hero-stats { margin-top: 48px; padding-top: 32px; gap: 12px 48px; }
.hero-stats b { font-size: 30px; }
.clock { padding: 30px 32px 26px; }
.clock-row-chain { margin-top: 30px; padding-top: 26px; }
.daybar { margin-top: 26px; }

.tape { padding: clamp(24px, 4vw, 56px) 0 clamp(88px, 12vw, 160px); }

.statement { padding: clamp(88px, 12vw, 168px) 0; }
.principles { gap: 0; }
.principle { padding: 44px 40px 24px 0; margin-right: 40px; }
.principle-num { margin-bottom: 56px; }
.principle h3 { margin-bottom: 14px; }

.caps, .after, .token, .agents, .privacy { padding: clamp(96px, 13vw, 184px) 0; }
.section-head { margin-bottom: 56px; gap: 48px; }
.cap { padding: 32px; }
.cap-strip { height: clamp(400px, 46vw, 580px); }

.after-grid { gap: clamp(48px, 8vw, 128px); }
.after-copy .h2 { margin-bottom: 32px; }
.after-copy .body { margin-bottom: 22px; }
.after-stats { margin-top: 48px; padding-top: 32px; gap: 28px; }
.disloc-card { padding: 26px 28px 20px; }
.disloc-prices { margin: 22px 0 14px; gap: 36px; }
.disloc-list { margin-top: 18px; }
.disloc-list li { padding: 14px 20px; }

.token-grid { gap: 20px; }
.token-card { padding: 32px 30px 34px; min-height: 300px; }
.token-card h3 { margin: 56px 0 14px; }

.agents-grid { gap: clamp(48px, 8vw, 128px); }
.agents .h2 { margin-bottom: 32px; }
.bullets { margin-top: 36px; gap: 18px; }
.code { padding: 34px 36px; line-height: 1.8; }

.privacy .h2 { margin-bottom: 56px; }
.privacy-grid { gap: 48px; }
.privacy-grid h3 { margin-bottom: 14px; }

.cta { padding: 0 0 clamp(88px, 12vw, 160px); }
.cta-box { padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 64px); gap: 36px; }

.footer { padding: 72px 0 40px; }
.footer-grid { gap: 48px; }
.footer-foot { margin-top: 56px; padding-top: 28px; }

@media (max-width: 860px) {
  .principle { padding: 32px 0; }
  .principle-num { margin-bottom: 20px; }
  .cap { padding: 24px; }
}

/* a token with no real mark: its initial in a chip */
.logo-init { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 4px; background: #e9e9e5; color: #4b4b4b; font-family: var(--mono); font-size: 8px; font-weight: 600; vertical-align: -2px; margin-right: 4px; line-height: 1; }

/* ============================================================
   Composure. One grid, one card, one spacing scale. The hero
   carries fewer layers; every section sits the same distance
   from the last; the in-between widths get their own layout.
   ============================================================ */
:root { --section: clamp(80px, 10vw, 136px); --card-radius: 18px; }

/* the same rhythm everywhere */
.statement, .caps, .after, .token, .agents, .privacy { padding: var(--section) 0; }
.cta { padding: 0 0 var(--section); }
.section-head { margin-bottom: 44px; }
.h2 { font-size: clamp(30px, 4.2vw, 50px); }

/* the same card everywhere */
.clock, .disloc-card, .disloc-list, .token-card, .code, .cta-box, .tape-panel, .cap-strip { border-radius: var(--card-radius); }
.token-card { min-height: 0; padding: 28px 28px 30px; }
.token-card h3 { margin: 40px 0 12px; }

/* the hero: copy and card share a top line */
.hero { padding: clamp(72px, 10vw, 128px) 0 clamp(48px, 6vw, 80px); }
.hero-grid { align-items: start; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px); }
.clock { margin-top: 6px; }
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy .h1 { margin-bottom: 32px; }
.hero-copy .lede { margin-bottom: 40px; }
.hero-actions { margin-bottom: 32px; }
.hero-stats { margin-top: 40px; padding-top: 26px; gap: 10px 40px; }
.hero-stats b { font-size: 26px; }
.night .tape { padding: clamp(16px, 3vw, 40px) 0 clamp(64px, 8vw, 104px); }
.tape-panel { border-color: rgba(255,255,255,.16); }

/* the strip */
.cap-strip { height: clamp(360px, 40vw, 500px); }

/* headings: no rule drawing under them */
.section-head .eyebrow::after, .after-copy .eyebrow::after, .privacy .eyebrow::after, .agents .eyebrow::after { display: none; }
.section-head .eyebrow, .after-copy .eyebrow, .privacy .eyebrow, .agents .eyebrow { padding-bottom: 0; }

/* the in-between widths: a real tablet layout, not a squeezed desktop */
@media (max-width: 960px) {
  .hero { padding-top: clamp(56px, 8vw, 96px); }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .clock { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 0; padding: 24px 26px 20px; }
  .clock-row { grid-column: 1; }
  .clock-sub { grid-column: 1; }
  .daybar { grid-column: 1 / -1; order: 5; margin-top: 18px; }
  .clock-row-chain { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding-left: 28px; }
  .clock-row-chain + .clock-sub { grid-column: 2; padding-left: 28px; }
  .clock-foot { grid-column: 1 / -1; order: 6; }
  .hero-stats { gap: 10px 32px; }
  .term-grid { grid-template-columns: 1fr; }
  .term-col-tape { display: none; }
  .term-col:first-child { border-right: 0; }
  .after-grid { gap: 40px; }
  .agents-grid { gap: 40px; }
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0; }
  .principle:last-child { border-bottom: 0; }
  .principle-num { margin-bottom: 14px; }
  .token-grid { grid-template-columns: 1fr 1fr; }
  .privacy-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .tape-panel { height: 520px; }
}

.term-table img, .term-table .logo-init { width: 14px; height: 14px; }
.term-table td:first-child::before { display: none; }
.term-table tr.is-hot td:first-child { box-shadow: inset 2px 0 0 var(--ink); }

/* ============================================================
   The hero is the chart. Full-height night screen, TSLA's real
   on-chain candles edge to edge behind the headline, one glass
   strip of live numbers beneath.
   ============================================================ */
.night { background: #0b0b0b; }
.night::before { left: -10%; top: -30%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 62%); }
.night::after { right: -5%; top: 10%; width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(47,209,139,.10), transparent 60%); }

.hero-night {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(92vh, 940px); padding: clamp(96px, 12vw, 160px) 0 clamp(28px, 4vw, 44px) !important;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* legibility: the left third and the bottom go darker under the copy, the top fades under the nav */
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.72) 34%, rgba(11,11,11,.12) 62%, rgba(11,11,11,0) 100%),
    linear-gradient(180deg, rgba(11,11,11,.9) 0%, rgba(11,11,11,0) 22%, rgba(11,11,11,0) 70%, rgba(11,11,11,.85) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }
.hero-night .h1 { font-size: clamp(56px, 9vw, 120px); margin-bottom: 30px; }
.hero-night .lede { max-width: 30em; margin-bottom: 36px; }
.hero-night .hero-actions { margin-bottom: 0; }

/* the strip */
.strip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 0;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius);
  background: rgba(14,14,14,.62); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.strip-cell { padding: 18px 24px; border-right: 1px solid rgba(255,255,255,.1); min-width: 0; }
.strip-cell:last-child { border-right: 0; }
.strip-stock { display: flex; align-items: center; gap: 14px; }
.strip-logo { width: 34px; height: 34px; border-radius: 9px; background: #fff; flex: none; }
.strip-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.strip-value { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.strip-value em { font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.strip-sub { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-sub b { color: #fff; font-weight: 600; }
.strip-time .strip-value { font-family: var(--mono); font-size: 20px; letter-spacing: 0; }
.strip .pill { height: 22px; font-size: 11px; }

/* the terminal window as its own section */
.live { padding: var(--section) 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.term-standalone {
  border-radius: var(--card-radius); border: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.35); max-width: none; font-size: 12.5px; transform: none;
}
.term-standalone .term-chrome { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.term-standalone .term-table td { padding: 8px 0; }
.term-standalone .term-tape li { padding: 8px 14px; }
.live .term-col-tape { display: block; }
.buy-pill { text-decoration: none; display: inline-flex; align-items: center; }

@media (max-width: 1100px) { .strip { grid-template-columns: 1.4fr 1fr 1fr; } .strip-time { display: none; } }
@media (max-width: 760px) {
  .hero-night { min-height: 0; padding-top: calc(72px + var(--nav-h)) !important; }
  .hero-inner { margin-bottom: 32px; }
  .strip { grid-template-columns: 1fr; }
  .strip-cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px 18px; }
  .strip-cell:last-child { border-bottom: 0; }
  .live .term-col-tape { display: none; }
}

/* hero: copy on the grid's left edge, everything inside one screen */
.hero-night { padding: clamp(80px, 9vw, 120px) 0 clamp(24px, 3vw, 36px) !important; min-height: min(92vh, 900px); }
.hero-inner { max-width: var(--wrap); margin-bottom: clamp(32px, 4.5vw, 52px); }
.hero-inner > * { max-width: 640px; }
.hero-night .h1 { font-size: clamp(52px, 8.2vw, 108px); margin-bottom: 26px; }
.hero-night .lede { margin-bottom: 30px; }
.hero-night .hero-actions { margin-bottom: 0; }
.strip-cell { padding: 16px 22px; }
.term-standalone .term-table td:first-child { padding-left: 14px; }
.term-standalone .term-table td:last-child { padding-right: 14px; }
@media (max-width: 960px) {
  .hero-shade { background: linear-gradient(180deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.88) 42%, rgba(11,11,11,.25) 62%, rgba(11,11,11,.1) 80%, rgba(11,11,11,.9) 100%); }
  .hero-inner > * { max-width: 100%; }
}

/* ============================================================
   The seam. The page opens as one dark screen: the nav belongs to
   the night, transparent and light over it, and only turns to
   white glass once you have scrolled past the band. No switch.
   ============================================================ */
.nav {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .4s ease, border-color .4s ease;
}
.nav.is-stuck {
  background: rgba(255,255,255,.84);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
}
/* the night band runs up behind the bar, so the chart is the background
   of the nav too and there is no edge to see. The bar only blurs what
   scrolls under it. */
.night { margin-top: calc(var(--nav-h) * -1); }
.hero-night { padding-top: calc(clamp(80px, 9vw, 120px) + var(--nav-h)) !important; }
body.at-night { background: #0b0b0b; }
body.at-night .nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }


.brand-name, .nav-links { transition: color .4s ease; }
.nav-burger span { transition: background-color .4s ease, transform .2s ease, opacity .2s ease; }
.nav-cta .btn-dark { transition: background-color .4s ease, color .4s ease; }
.progress { transition: background-color .4s ease; }


body.at-night .brand-name { color: #fff; }
body.at-night .nav-links { color: rgba(255,255,255,.6); }
body.at-night .nav-links a:hover { color: #fff; }
body.at-night .nav-burger span { background: #fff; }
body.at-night .nav-cta .btn-dark { background: #fff; color: #0f0f0f; }
body.at-night .nav-cta .btn-dark:hover { background: rgba(255,255,255,.86); }
body.at-night .progress { background: #fff; }
body.at-night .mobile-menu { background: #0c0c0c; border-top-color: rgba(255,255,255,.12); color: #fff; }
body.at-night .mobile-menu .btn-dark { background: #fff; color: #0f0f0f; }

/* ============================================================
   The rail. The real tape, one line, running out of the night and
   into the page — the band's bottom edge rather than a cut.
   ============================================================ */
.ribbon {
  position: relative; background: #0c0c0c; overflow: hidden; height: 44px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
/* the prints fade out at both ends, the rail itself does not */
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none;
}
.ribbon::before { left: 0; background: linear-gradient(to right, #0c0c0c, rgba(12,12,12,0)); }
.ribbon::after { right: 0; background: linear-gradient(to left, #0c0c0c, rgba(12,12,12,0)); }
.ribbon-track {
  display: inline-flex; align-items: center; height: 44px;
  animation: ribbon-run var(--ribbon-dur, 110s) linear infinite;
  will-change: transform;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-item {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; height: 20px;
  border-right: 1px solid rgba(255,255,255,.09);
  font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.52);
  font-variant-numeric: tabular-nums;
}
.ribbon-item img { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.ribbon-item .ri-init {
  width: 16px; height: 16px; border-radius: 4px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: 8px; font-weight: 700;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.8);
}
.ribbon-item b { font-weight: 600; color: rgba(255,255,255,.92); }
.ribbon-item .rb { color: #2fd18b; }
.ribbon-item .rs { color: #ff5470; }
@keyframes ribbon-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }

/* ============================================================
   Rhythm. The middle of the page turns dark where the writing does
   — the hours after four — so the run of white is broken once.
   ============================================================ */
.night-band {
  background: radial-gradient(110% 90% at 18% 0%, #1a1a1a 0%, #101010 58%, #0b0b0b 100%);
  color: #fff; border-top: 0; position: relative; isolation: isolate; overflow: hidden;
}
.night-band .h2, .night-band h3, .night-band strong { color: #fff; }
.night-band .body, .night-band p { color: rgba(255,255,255,.7); }
.night-band .eyebrow { color: rgba(255,255,255,.7); }
.night-band .eyebrow-dot { background: #fff; }
.night-band .muted { color: rgba(255,255,255,.48); }
.night-band .after-stats { border-top-color: rgba(255,255,255,.14); }
.night-band .after-stats span { color: rgba(255,255,255,.5); }
.night-band .disloc-card,
.night-band .disloc-list {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 40px 100px -55px rgba(0,0,0,.95);
}
.night-band .disloc-list li { border-bottom-color: rgba(255,255,255,.08); }
.night-band .disloc-axis { color: rgba(255,255,255,.4); }
.night-band .badge-up { background: rgba(47,209,139,.16); color: #2fd18b; }
.night-band .lit::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 62%);
}
/* faint rule-work behind the dark band, drifting */
.night-band::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px 132px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 132px);
  animation: band-drift 60s linear infinite;
}
@keyframes band-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-132px,-132px,0); } }
@media (prefers-reduced-motion: reduce) { .night-band::before { animation: none; } }

/* ============================================================
   The quiet blocks, given something to do.
   ============================================================ */
.statement { padding-top: clamp(40px, 6vw, 72px); }
.principle { position: relative; }
.principle::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--ink);
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.principles.is-in .principle::before { width: 52px; }
.principles.is-in .principle:nth-child(2)::before { transition-delay: .12s; }
.principles.is-in .principle:nth-child(3)::before { transition-delay: .24s; }
.principle-num { letter-spacing: .1em; }
.principle h3 { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.principle:hover h3 { transform: translateX(4px); }

.token-card { position: relative; overflow: hidden; }
.token-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.token-card:hover::after { width: 100%; }
.token-tag { display: inline-flex; align-items: center; gap: 7px; }
.token-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none;
  animation: blink 2.4s ease-in-out infinite;
}
.token-card:nth-child(2) .token-tag::before { animation-delay: .6s; }
.token-card:nth-child(3) .token-tag::before { animation-delay: 1.2s; }
.token-card:nth-child(4) .token-tag::before { animation-delay: 1.8s; }

/* the machine front door reads as a console, so it sits on the dark too */
.night-band .bullets { color: rgba(255,255,255,.7); }
.night-band .bullets li::before { background: rgba(255,255,255,.55); }
.night-band .bullets strong { color: #fff; }
.night-band .code {
  background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 40px 100px -55px rgba(0,0,0,.95);
}
.night-band code, .night-band .code p { color: #e9e9e6; }