/* ============================================================
   ToastyAI — design system  ·  /assets/site.css
   Dark theme only. System fonts only. Zero external requests.
   Motion contract: every keyframe + reveal transition lives inside
   @media (prefers-reduced-motion: no-preference). No-JS and
   reduced-motion users always get the complete static page.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg: #170121;
  --panel: #28113B;
  --panel-deep: #1f0c31;
  --ink: #F4ECF8;
  --muted: #B9A8C9;
  --faint: #6F5C82;          /* borders + decorative glyphs inside aria-hidden mocks only */
  --faint-text: #9B87B3;     /* readable dim text — ≥4.5:1 on bg, panel, and footer */
  --amber: #FA9C1B;
  --amber-hover: #FFB94F;
  --border: rgba(111, 92, 130, .4);
  --glow: rgba(250, 156, 27, .15);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --r-card: 16px;
  --r-pill: 999px;
  --r-term: 12px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0 0 1rem; text-wrap: balance; }
a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--amber-hover); }
::selection { background: var(--amber); color: var(--bg); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: 88px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--amber); color: var(--bg); font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none;
}
.skip:focus { top: 12px; color: var(--bg); }

/* Demo triggers are meaningless without JS */
html:not(.js) .needs-js { display: none; }

/* ---------- type scale ---------- */
h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 1rem;
}
.eyebrow .mark { width: 1.35em; height: auto; color: var(--amber); flex: none; }
.lede { font-size: 1.125rem; color: var(--muted); max-width: 56ch; }
.small, .nerd-note { font-size: .9375rem; color: var(--muted); }
.nerd-note { font-family: var(--mono); font-size: .8125rem; color: var(--faint-text); }
.kicker { font-weight: 700; color: var(--ink); }
.mono { font-family: var(--mono); }

/* ---------- layout ---------- */
.container { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.section { padding-block: clamp(4rem, 10vw, 8rem); position: relative; }
.section-panel { background: var(--panel); }
.sec-head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sec-head h2 { max-width: 24ch; }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split.rev > :first-child { order: 2; }
  .split.rev > :last-child { order: 1; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 1, 33, .8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(111, 92, 130, .22);
}
.nav-in { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); min-height: 64px; }
.brand { display: inline-flex; flex: none; border-radius: 6px; }
.brand img { height: 28px; width: auto; }
.nav-links { display: flex; gap: clamp(.75rem, 2.5vw, 1.75rem); margin-left: auto; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: .9375rem; font-weight: 500;
  padding: 6px 2px;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--amber); }
.nav-chip {
  flex: none; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: var(--amber); border: 1px solid rgba(250, 156, 27, .45);
  border-radius: var(--r-pill); padding: 4px 12px; white-space: nowrap;
}
@media (max-width: 560px) { .nav-chip { display: none; } }

/* ---------- buttons / chips / links ---------- */
.chip-status {
  display: inline-block; background: var(--amber); color: var(--bg);
  font-weight: 600; font-size: 1rem; border-radius: var(--r-pill);
  padding: 12px 24px; white-space: nowrap;
}
.btn-ghost {
  display: inline-block; background: transparent; color: var(--ink);
  border: 1px solid var(--faint); border-radius: var(--r-pill);
  padding: 12px 24px; font-weight: 600; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-action {
  display: inline-block; background: var(--amber); color: var(--bg);
  border: 0; border-radius: var(--r-pill); padding: 12px 24px;
  font: 600 1rem var(--font); cursor: pointer;
}
.btn-action:hover { background: var(--amber-hover); }
.btn-action:disabled { opacity: .55; cursor: default; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.75rem; }
.tlink { font-weight: 600; }

/* user pause/play control for all looping animations (WCAG 2.2.2) */
.motion-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  background: rgba(23, 1, 33, .88); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 15px; font: 600 .8125rem var(--font); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.motion-toggle:hover { color: var(--amber); border-color: var(--amber); }
html.anim-paused .motion-toggle { color: var(--amber); border-color: rgba(250, 156, 27, .6); }
/* with reduced motion there is nothing to pause — every loop is already off */
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ---------- cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
}
@media (hover: hover) {
  .card.hoverable:hover, .tile:hover {
    border-color: var(--amber);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 24px var(--glow);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 92vh; display: flex; align-items: center; overflow: clip; padding-block: clamp(3rem, 8vw, 5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; width: 100%; }
@media (min-width: 769px) { .hero-grid { grid-template-columns: 55fr 45fr; } }
.hero h1 { margin-bottom: 1.25rem; }
.hero-sub { font-size: 1.1875rem; color: var(--muted); max-width: 46ch; }

/* firelight blob (layer 1) */
.fire {
  position: absolute; z-index: 0; pointer-events: none;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  left: -12%; top: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(250, 156, 27, .9), rgba(250, 156, 27, 0) 62%);
  filter: blur(120px); opacity: .05; will-change: transform;
}
.hero .container, .cta-close .container { position: relative; z-index: 1; }

/* key-ledger backdrop (layer 2, behind the phone only) */
.hero-demo { position: relative; }
.hero-ledgerbg {
  position: absolute; inset: -8% -4%; z-index: 0; overflow: hidden;
  pointer-events: none; opacity: .06; font-family: var(--mono);
  font-size: 11px; line-height: 2.2; color: var(--ink); white-space: nowrap;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.hlb-inner { display: flex; flex-direction: column; }

/* phone frame */
.phone-wrap { position: relative; z-index: 1; width: min(100%, 300px); margin-inline: auto; }
@media (min-width: 769px) { .phone-wrap { width: min(100%, 310px); } }
.phone {
  position: relative; aspect-ratio: 9 / 19.5; border-radius: 40px;
  background: #0e0018; border: 1px solid rgba(111, 92, 130, .55);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), inset 0 0 0 5px #1d0a2c;
  padding: 11px; will-change: transform;
}
.phone::before { /* notch bar */
  content: ""; position: absolute; top: 11px; left: 50%; margin-left: -44px;
  width: 88px; height: 21px; background: #0e0018;
  border-radius: 0 0 13px 13px; z-index: 3;
}
.phone-screen {
  height: 100%; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #241035 0%, #170121 70%);
  display: flex; flex-direction: column;
}
.chat-head {
  padding: 34px 14px 10px; text-align: center;
  border-bottom: 1px solid rgba(111, 92, 130, .25);
}
.chat-title { font-size: .875rem; font-weight: 700; }
.chat-sub { font-size: .6875rem; color: var(--faint); display: inline-flex; align-items: center; gap: .35em; }
.chat-sub svg { width: .8em; height: auto; }
.chat-body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 9px; padding: 12px 10px;
}
.chat-input {
  margin: 0 10px 12px; padding: 8px 14px; border-radius: var(--r-pill);
  background: #2c1440; color: var(--faint); font-size: .75rem;
}

/* chat pieces */
.msg { display: flex; gap: 6px; align-items: flex-end; max-width: 100%; }
.chat-avatar {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: .625rem; font-weight: 700;
  display: grid; place-items: center;
}
.chat-avatar.ai { color: var(--amber); }
.chat-avatar.ai svg { width: 14px; height: auto; }
.bubble {
  padding: 7px 11px; border-radius: 18px; font-size: .8125rem; line-height: 1.45;
  max-width: 85%; width: fit-content;
}
.bubble.in { background: var(--panel); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.out {
  background: linear-gradient(135deg, var(--amber), var(--amber-hover));
  color: var(--bg); border-bottom-right-radius: 6px; margin-left: auto; font-weight: 500;
}
.syspill {
  align-self: center; display: inline-flex; align-items: center; gap: .45em;
  font-size: .6875rem; color: var(--muted); background: rgba(40, 17, 59, .7);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 12px;
  text-align: center;
}
.syspill svg { width: .95em; height: auto; color: var(--amber); flex: none; }
.ai-chip {
  font-size: .5625rem; font-weight: 700; letter-spacing: .06em; color: var(--amber);
  border: 1px solid rgba(250, 156, 27, .5); border-radius: 4px; padding: 0 4px;
}
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; justify-self: start; }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 10px 12px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.m-typing, .am-typing { opacity: 0; } /* hidden in the static composite */

/* notification mock */
.notif {
  position: absolute; z-index: 5; top: -16px; left: 0; right: 0;
  width: min(94%, 292px); margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  background: rgba(40, 17, 59, .92); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.napp {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg); display: grid; place-items: center; color: var(--amber);
}
.napp svg { width: 18px; height: auto; }
.ntxt { min-width: 0; font-size: .75rem; line-height: 1.35; }
.ntxt b { display: block; font-size: .8125rem; }
.nbody { display: inline-flex; align-items: center; gap: .4em; color: var(--muted); }
.nbody svg { width: .85em; height: auto; flex: none; }
.ntime { margin-left: auto; font-size: .6875rem; color: var(--faint); align-self: flex-start; }
.notif.mini { position: static; width: 100%; margin-top: 1.25rem; }

/* scoreboard cards */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: inline-block; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  box-shadow: inset 0 0 0 1.5px var(--faint);
}
.dot.on, .dot.tick-on { background: var(--amber); box-shadow: none; }
.odo { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; }
.odo-stack { display: flex; flex-direction: column; }
.odo-stack span { display: block; height: 1em; line-height: 1; }
.odo.ticked .odo-stack { transform: translateY(-50%); }

.score-mini {
  width: min(88%, 220px); background: var(--panel-deep);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  font-variant-numeric: tabular-nums;
}
.sm-head {
  display: flex; align-items: center; gap: 6px;
  font-size: .5625rem; font-weight: 700; letter-spacing: .14em; color: var(--amber);
}
.sm-row {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 1.05rem; margin-top: 6px;
}
.sm-abbr { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.sm-foot {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: .6875rem; color: var(--muted);
}
.sc-arrow { color: var(--amber); font-size: .55em; }
.dots { display: inline-flex; gap: 4px; align-items: center; }

/* hero demo static composite: card already ticked */
.hero-demo .odo .odo-stack { transform: translateY(-50%); }

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard { overflow: hidden; display: flex; flex-direction: column; }
.pcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--amber); transform-origin: left center;
}
.pcard p { color: var(--muted); font-size: .9375rem; flex: 1; }
.pcard .how { font-size: .875rem; font-weight: 600; text-decoration: none; margin-top: .25rem; }
.pcard .how:hover { text-decoration: underline; text-underline-offset: 3px; }
.picon { color: var(--amber); margin-bottom: 1rem; }
.picon svg { width: 26px; height: 26px; }

/* ============================================================
   AGENTS
   ============================================================ */
.contrast-line { font-size: 1.1875rem; font-weight: 700; margin: 1.25rem 0; }
.contrast-line em { font-style: normal; color: var(--amber); }
.agents-mock { max-width: 420px; margin-inline: auto; width: 100%; padding: 1.25rem; }
.agents-mock .chat-flow { display: flex; flex-direction: column; gap: 10px; }
.msg-meta {
  font-size: .6875rem; color: var(--faint); margin: 0 0 3px 30px;
  display: flex; align-items: center; gap: 6px;
}
.callbar {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  background: var(--panel-deep); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; font-size: .75rem; color: var(--muted);
}
.callbar .cicon { color: var(--amber); flex: none; }
.callbar .cicon svg { width: 16px; height: 16px; }
.call-avatars { display: flex; margin-left: auto; }
.call-avatars .chat-avatar { width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--panel-deep); }
.call-avatars .chat-avatar:first-child { margin-left: 0; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.wave i { width: 2.5px; height: 5px; border-radius: 2px; background: currentColor; }
.wave i:nth-child(1), .wave i:nth-child(5) { height: 5px; }
.wave i:nth-child(2), .wave i:nth-child(4) { height: 9px; }
.wave i:nth-child(3) { height: 12px; }
.ai-callchip {
  display: inline-flex; align-items: center; gap: 5px; color: var(--amber);
  background: rgba(250, 156, 27, .08); border: 1px solid rgba(250, 156, 27, .4);
  border-radius: var(--r-pill); padding: 3px 9px; font-size: .6875rem; font-weight: 600;
}
.ai-callchip svg { width: 11px; height: auto; }

/* ============================================================
   LIVE CARDS
   ============================================================ */
.score-card {
  background: var(--panel-deep); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 400px; width: 100%; margin-inline: auto;
  font-variant-numeric: tabular-nums;
}
.sc-top {
  display: flex; align-items: center; gap: 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; color: var(--amber);
}
.sc-top .sc-league { margin-left: auto; color: var(--faint); letter-spacing: .1em; }
.sc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.sc-badge {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border);
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; color: var(--muted);
}
.sc-team { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1rem; }
.sc-score { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; }
.sc-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--muted);
}
.sc-outs { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; }
.sc-outs .lbl { font-size: .6875rem; color: var(--faint); margin-left: 2px; }
.demo-actions { display: flex; align-items: center; gap: 14px; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center; }
.card-caption { font-size: .8125rem; color: var(--faint-text); text-align: center; margin-top: 1rem; }

/* ============================================================
   KEY TRANSPARENCY — ledger terminal
   ============================================================ */
.term {
  background: #12001c; border: 1px solid var(--border); border-radius: var(--r-term);
  overflow: hidden; max-width: 640px; width: 100%;
  font-family: var(--mono); font-size: .8125rem;
}
.term-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--panel-deep); border-bottom: 1px solid var(--border);
  color: var(--faint-text); font-size: .6875rem;
}
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); opacity: .5; }
.term-bar i:first-child { background: var(--amber); opacity: .8; }
.term-bar span { margin-left: 8px; letter-spacing: .04em; }
/* bottom-anchored: newest rows stay visible even when text zoom grows row height */
.ledger-rows {
  padding: 12px 0; height: 292px; overflow-x: auto; overflow-y: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.lrow {
  display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: none;
  padding: 4px 16px; color: var(--muted); line-height: 1.6;
}
.lrow .ln { color: var(--amber); }
.lrow b { color: var(--ink); font-weight: 600; }
.lrow .ok { color: var(--muted); }
.lrow.tamper {
  background: rgba(250, 156, 27, .12); border-block: 1px solid rgba(250, 156, 27, .5);
  color: var(--ink);
}
.lrow.tamper .ln, .lrow.tamper .bad { color: var(--amber); font-weight: 700; }
.stamp {
  display: inline-block; font-size: .625rem; font-weight: 800; letter-spacing: .1em;
  color: var(--amber); border: 1.5px solid var(--amber); border-radius: 4px;
  padding: 1px 7px; transform: rotate(-2deg); margin-left: 4px;
}
.term-foot { padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.term-cap {
  font-family: var(--font); font-size: .875rem; color: var(--muted);
  margin: 10px 0 0; opacity: 0;
}
.term-cap.show { opacity: 1; }
html:not(.js) .term-cap { display: none; }

/* ============================================================
   E2EE — ratchet chain
   ============================================================ */
.ratchet-scroll { overflow-x: auto; padding-block: .5rem; }
.ratchet {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 18px);
  width: max-content; margin-inline: auto; padding-inline: .5rem;
}
.rstep { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rbubble {
  width: 44px; height: 34px; border-radius: 12px 12px 12px 4px;
  background: var(--panel); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted);
}
.rbubble svg { width: 15px; height: 15px; }
.rkey { color: var(--muted); }
.rkey svg { width: 22px; height: 22px; }
.rlabel { font-family: var(--mono); font-size: .6875rem; color: var(--faint); }
.rstep.spent .rkey { color: var(--faint); opacity: .45; transform: rotate(-40deg); }
.rstep.spent .rbubble { opacity: .45; }
.rstep.live .rkey { color: var(--amber); filter: drop-shadow(0 0 8px var(--glow)); }
.rstep.live .rbubble { border-color: var(--amber); color: var(--ink); }
.rarr { color: var(--faint); font-size: 1rem; flex: none; padding-bottom: 24px; }

/* ============================================================
   VERIFY — twin phones
   ============================================================ */
.verify-visual { position: relative; display: flex; gap: clamp(12px, 3vw, 24px); justify-content: center; }
.vphone {
  flex: 1 1 0; max-width: 220px; background: var(--panel-deep);
  border: 1px solid var(--border); border-radius: 22px; padding: 18px 12px 20px;
  text-align: center;
}
.vp-name { font-size: .75rem; font-weight: 700; margin-bottom: 2px; }
.vp-sub { font-size: .625rem; color: var(--faint); margin-bottom: 14px; }
.vemoji { display: flex; justify-content: center; gap: 4px; font-size: 1.05rem; line-height: 1; flex-wrap: wrap; }
.vemoji span { display: inline-block; }
.vstamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg);
  background: var(--amber); color: var(--bg); font-weight: 800; font-size: .9375rem;
  border-radius: var(--r-pill); padding: 8px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ============================================================
   DEVICES — cross-signing diagram
   ============================================================ */
.devices-fig { margin: 0; }
.devices-fig svg { width: 100%; height: auto; }
.dphone { fill: none; stroke: var(--faint); stroke-width: 2; }
.dphone.new { stroke: var(--amber); }
.dnotch { fill: var(--faint); opacity: .6; }
.thread { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.env rect { fill: var(--panel); stroke: var(--amber); stroke-width: 2; }
.env path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }
.env { transform: translate(312px, 0); } /* static: envelope has arrived */
.dserver rect { fill: var(--panel-deep); stroke: var(--faint); stroke-width: 2; }
.dserver path, .dserver line { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.dserver circle { fill: var(--faint); }
.dlabel { fill: var(--muted); font-family: var(--font); font-size: 13px; }

/* ============================================================
   CALLS
   ============================================================ */
.calls-grid { display: grid; gap: 20px; max-width: 760px; }
@media (min-width: 700px) { .calls-grid { grid-template-columns: 1fr 1fr; } }
.call-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.call-avatar-wrap { position: relative; width: 76px; height: 76px; margin: 10px auto 14px; }
.call-avatar {
  position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%;
  background: var(--panel-deep); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: var(--muted);
}
.ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.call-name { font-size: 1.125rem; font-weight: 700; }
.call-sub { font-size: .8125rem; color: var(--faint); margin-bottom: 18px; }
.call-actions { display: flex; gap: 12px; justify-content: center; margin-top: auto; }
.cpill {
  border-radius: var(--r-pill); padding: 9px 22px; font-size: .875rem; font-weight: 600;
}
.cpill.accept { background: var(--amber); color: var(--bg); }
.cpill.decline { border: 1px solid var(--faint); color: var(--muted); }
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gtile {
  position: relative; aspect-ratio: 1; border-radius: 14px;
  background: var(--panel-deep); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 700; color: var(--muted);
}
.gtile::after {
  content: ""; position: absolute; inset: -1px; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--amber), 0 0 24px var(--glow); opacity: 0;
  pointer-events: none;
}
.gtile.ai { color: var(--amber); }
.gtile.ai .gt-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gtile.ai svg.mark { width: 30px; height: auto; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 1.75rem 0 0; list-style: none; }
.spec-chips li {
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: .8125rem; color: var(--muted);
}

/* ============================================================
   EVERYDAY — bento grid
   ============================================================ */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 20px;
}
.tile h3 { font-size: 1rem; margin: .9rem 0 .35rem; }
.tile p { font-size: .875rem; color: var(--muted); margin: 0; }
.tile .ticon { color: var(--faint); }
.tile .ticon svg { width: 22px; height: 22px; }
.tile:hover .ticon { color: var(--amber); }
.code-chip {
  display: inline-block; font-family: var(--mono); font-size: .8125rem;
  color: var(--amber); background: var(--panel-deep); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px; margin-top: .75rem; letter-spacing: .08em;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { overflow: clip; }
.manifesto-mark {
  position: absolute; right: -6%; bottom: -14%; width: min(540px, 70vw);
  color: var(--amber); opacity: .05; pointer-events: none;
}
.manifesto .container { position: relative; }
.mline {
  font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 600; line-height: 1.5;
  max-width: 30em; margin-bottom: 1.1rem; color: var(--ink);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cta-close { text-align: center; overflow: clip; }
.cta-fire {
  position: absolute; left: -10%; right: -10%; bottom: -45%; height: 80%;
  background: radial-gradient(ellipse at 50% 100%, rgba(250, 156, 27, .55), rgba(250, 156, 27, 0) 62%);
  filter: blur(90px); opacity: .12; pointer-events: none;
}
.cta-close .container { position: relative; }
.cta-mark { width: 54px; height: auto; color: var(--amber); margin: 0 auto 1.5rem; }
.cta-close h2 { max-width: none; }
.cta-close .lede { margin-inline: auto; }
.cta-close .cta-row { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #12001a; border-top: 1px solid rgba(111, 92, 130, .25); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.f-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .f-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.f-logo { height: 24px; width: auto; margin-bottom: 1rem; }
.f-tag { color: var(--faint-text); font-size: .9375rem; max-width: 26ch; }
.f-col h3 {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint-text); margin-bottom: .9rem;
}
.f-col ul { list-style: none; margin: 0; padding: 0; }
.f-col li { margin-bottom: .55rem; }
.f-col a { color: var(--muted); text-decoration: none; font-size: .9375rem; }
.f-col a:hover { color: var(--amber); }
.f-small {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(111, 92, 130, .2);
  color: var(--faint-text); font-size: .8125rem;
}

/* ============================================================
   MOTION — every keyframe and reveal transition lives here.
   Outside this block the page is a complete static composite.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  /* freeze everything while the tab is hidden — or when the user hits
     the "Pause animations" toggle (html.anim-paused, set by site.js) */
  html.doc-hidden *, html.doc-hidden *::before, html.doc-hidden *::after,
  html.anim-paused *, html.anim-paused *::before, html.anim-paused *::after {
    animation-play-state: paused !important;
  }
  .cut, .cut * { transition: none !important; animation: none !important; }

  /* ---- scroll-reveal system (JS + motion only) ---- */
  html.js .reveal { opacity: 0; transform: translateY(12px); }
  html.js .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
  html.js .stagger > * { opacity: 0; transform: translateY(14px); }
  html.js .stagger.in > * { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
  html.js .stagger.in > :nth-child(2) { transition-delay: var(--stag, 80ms); }
  html.js .stagger.in > :nth-child(3) { transition-delay: calc(var(--stag, 80ms) * 2); }
  html.js .stagger.in > :nth-child(4) { transition-delay: calc(var(--stag, 80ms) * 3); }
  html.js .stagger.in > :nth-child(5) { transition-delay: calc(var(--stag, 80ms) * 4); }
  html.js .stagger.in > :nth-child(6) { transition-delay: calc(var(--stag, 80ms) * 5); }

  /* ---- shared keyframes ---- */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes drift { from { translate: -4% -3%; } to { translate: 7% 5%; } }
  @keyframes breathe { from { scale: 1; } to { scale: 1.06; } }
  @keyframes ledgerScroll { to { transform: translateY(-50%); } }
  @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
  @keyframes typingBounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
  @keyframes rippleK { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.65); opacity: 0; } }
  @keyframes waveBar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
  @keyframes glowPass { 0%, 30%, 100% { opacity: 0; } 6%, 22% { opacity: 1; } }
  @keyframes flashDecay { from { background: rgba(250, 156, 27, .2); } to { background: transparent; } }
  @keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes shakeX { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
  @keyframes flipIn { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
  @keyframes popIn { from { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); } }
  @keyframes threadDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes envTravel {
    0%   { translate: 0 0; }
    25%  { translate: 78px -38px; }
    50%  { translate: 156px -50px; }
    75%  { translate: 234px -38px; }
    100% { translate: 312px 0; }
  }
  @keyframes typingWin { 0%, 8% { opacity: 0; } 16%, 84% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(250, 156, 27, .12)); }
    50% { filter: drop-shadow(0 0 16px rgba(250, 156, 27, .4)); }
  }

  /* ---- ambient firelight ---- */
  [data-loop].running .fire {
    animation: drift 40s ease-in-out infinite alternate, breathe 8s ease-in-out infinite alternate;
  }
  [data-loop].running .cta-fire { animation: breathe 8s ease-in-out infinite alternate; }
  [data-loop].running .lotus-glow { animation: glowPulse 4s ease-in-out infinite; }

  /* ---- hero ledger backdrop ---- */
  [data-loop].running .hlb-inner { animation: ledgerScroll 42s linear infinite; }

  /* ---- looping micro-bits ---- */
  [data-loop].running .live-dot { animation: pulseDot 1.2s ease-in-out infinite; }
  [data-loop].running .typing i { animation: typingBounce 1s ease-in-out infinite; }
  [data-loop].running .typing i:nth-child(2) { animation-delay: .15s; }
  [data-loop].running .typing i:nth-child(3) { animation-delay: .3s; }
  [data-loop].running .wave i { animation: waveBar 1s ease-in-out infinite; }
  [data-loop].running .wave i:nth-child(2) { animation-delay: .12s; }
  [data-loop].running .wave i:nth-child(3) { animation-delay: .24s; }
  [data-loop].running .wave i:nth-child(4) { animation-delay: .36s; }
  [data-loop].running .wave i:nth-child(5) { animation-delay: .48s; }
  [data-loop].running .ripple { animation: rippleK 2s linear infinite; }
  [data-loop].running .ripple.r2 { animation-delay: .6s; }
  [data-loop].running .gtile:nth-child(1)::after { animation: glowPass 12s linear infinite; }
  [data-loop].running .gtile:nth-child(2)::after { animation: glowPass 12s linear infinite 3s; }
  [data-loop].running .gtile:nth-child(3)::after { animation: glowPass 12s linear infinite 6s; }
  [data-loop].running .gtile:nth-child(4)::after { animation: glowPass 12s linear infinite 9s; }

  /* ---- hero conversation timeline (class-stepped by JS) ---- */
  html.js .hero-demo .notif,
  html.js .hero-demo .m-friend,
  html.js .hero-demo .m-pill,
  html.js .hero-demo .m-ai,
  html.js .hero-demo .m-card {
    opacity: 0; transform: translateY(12px);
    transition: opacity .42s ease-out, transform .42s ease-out;
  }
  html.js .hero-demo .notif { transform: translateY(-18px); }
  html.js .hero-demo .m-typing { transition: opacity .3s ease-out; }
  html.js .hero-demo.s1 .notif,
  html.js .hero-demo.s2 .m-friend,
  html.js .hero-demo.s3 .m-pill,
  html.js .hero-demo.s5 .m-ai,
  html.js .hero-demo.s6 .m-card { opacity: 1; transform: none; }
  html.js .hero-demo.s4:not(.s5) .m-typing { opacity: 1; }
  /* odometer + outs tick in place at step 7 */
  html.js .hero-demo .odo .odo-stack { transform: translateY(0); transition: transform .38s cubic-bezier(.3, .7, .3, 1.05); }
  html.js .hero-demo.s7 .odo .odo-stack { transform: translateY(-50%); }
  html.js .hero-demo .dot.tick-on { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); transition: background .3s ease, box-shadow .3s ease; }
  html.js .hero-demo.s7 .dot.tick-on { background: var(--amber); box-shadow: none; }
  /* soft crossfade restart */
  html.js .hero-demo.fade .chat-body,
  html.js .hero-demo.fade .notif { opacity: 0 !important; transition: opacity .55s ease !important; }

  /* phone hover lift */
  .phone { transition: transform .3s ease, box-shadow .3s ease; }
  @media (hover: hover) {
    .phone-wrap:hover .phone {
      transform: translateY(-6px);
      box-shadow: 0 32px 90px rgba(0, 0, 0, .6), 0 0 44px var(--glow);
    }
  }

  /* ---- proof cards: amber bar draws in ---- */
  html.js .proof-grid .pcard::before { transform: scaleX(0); transition: transform .6s ease-out; }
  html.js .proof-grid.in .pcard::before { transform: scaleX(1); }
  html.js .proof-grid.in .pcard:nth-child(2)::before { transition-delay: .1s; }
  html.js .proof-grid.in .pcard:nth-child(3)::before { transition-delay: .2s; }

  /* ---- card / tile hover lifts ---- */
  .card, .tile { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .tile .ticon, .btn-ghost, .btn-action, .nav-links a, .f-col a { transition: all .2s ease; }
  @media (hover: hover) {
    .card.hoverable:hover { transform: translateY(-4px); }
    .tile:hover { transform: translateY(-3px); }
    .btn-action:hover { transform: translateY(-2px); }
    .brand:hover img { filter: brightness(1.12); }
  }
  .brand img { transition: filter .2s ease; }

  /* ---- agents mock: fires once on reveal ---- */
  html.js .agents-mock .am-friend,
  html.js .agents-mock .am-reply,
  html.js .agents-mock .am-call { opacity: 0; }
  html.js .agents-mock.in .am-friend { animation: fadeUp .45s ease-out .15s both; }
  html.js .agents-mock.in .am-typing { animation: typingWin 2.2s ease .75s both; }
  html.js .agents-mock.in .am-reply { animation: fadeUp .45s ease-out 3s both; }
  html.js .agents-mock.in .am-call { animation: fadeUp .45s ease-out 3.9s both; }

  /* ---- live scoreboard demo transitions ---- */
  .odo .odo-stack { transition: transform .38s cubic-bezier(.3, .7, .3, 1.05); }
  .dot { transition: background .3s ease, box-shadow .3s ease; }
  .sc-swap { transition: opacity .2s ease, transform .2s ease; }
  .sc-swap.swap { opacity: 0; transform: translateY(4px); }

  /* ---- ledger rows ---- */
  .lrow.flash { animation: rowIn .35s ease-out, flashDecay 2s ease-out; }
  .lrow.tamper { animation: rowIn .3s ease-out, shakeX .3s ease-out .3s, flashDecay 2.4s ease-out .6s; }
  .term-cap { transition: opacity .5s ease .4s; }

  /* ---- ratchet chain ---- */
  .rstep .rkey { transition: transform .35s ease, color .35s ease, opacity .35s ease, filter .35s ease; }
  .rstep .rbubble { transition: opacity .35s ease, border-color .35s ease; }

  /* ---- emoji verification ---- */
  html.js .verify-visual .vemoji span { opacity: 0; transform: rotateX(90deg); }
  html.js .verify-visual.in .vemoji span { animation: flipIn .35s ease-out both; }
  html.js .verify-visual.in .vemoji span:nth-child(1) { animation-delay: .1s; }
  html.js .verify-visual.in .vemoji span:nth-child(2) { animation-delay: .18s; }
  html.js .verify-visual.in .vemoji span:nth-child(3) { animation-delay: .26s; }
  html.js .verify-visual.in .vemoji span:nth-child(4) { animation-delay: .34s; }
  html.js .verify-visual.in .vemoji span:nth-child(5) { animation-delay: .42s; }
  html.js .verify-visual.in .vemoji span:nth-child(6) { animation-delay: .5s; }
  html.js .verify-visual.in .vemoji span:nth-child(7) { animation-delay: .58s; }
  html.js .verify-visual .vstamp { opacity: 0; }
  html.js .verify-visual.in .vstamp { animation: popIn .25s ease-out 1.15s both; }

  /* ---- cross-signing diagram ---- */
  html.js .devices-fig .thread { stroke-dasharray: 100; stroke-dashoffset: 100; }
  html.js .devices-fig.in .thread { animation: threadDraw 1.2s ease-in-out .2s both; }
  html.js .devices-fig .env { translate: 0 0; transform: none; }
  html.js .devices-fig.in .env { animation: envTravel 1.6s ease-in-out 1.3s both; }

  /* ---- manifesto lines ---- */
  html.js .manifesto-lines > * { opacity: 0; transform: translateY(12px); color: var(--faint); }
  html.js .manifesto-lines.in > * {
    opacity: 1; transform: none; color: var(--ink);
    transition: opacity .6s ease-out, transform .6s ease-out, color .8s ease-out;
  }
  html.js .manifesto-lines.in > :nth-child(2) { transition-delay: .2s; }
  html.js .manifesto-lines.in > :nth-child(3) { transition-delay: .4s; }
  html.js .manifesto-lines.in > :nth-child(4) { transition-delay: .6s; }
}

/* ---------- small helpers (safe after the motion block) ---------- */
.lotus { aspect-ratio: 95 / 66; height: auto; }
.am-reply { display: flex; flex-direction: column; gap: 8px; }
.am-reply .score-mini { width: min(100%, 200px); }
.hlb-inner > div { padding-bottom: 2.2em; }