/* =========================================================================
   MissedCall Rescue — design system v3
   Refined SaaS aesthetic (à la Firecrawl): clean sans, generous whitespace,
   subtle cards, metric-led. Hermes electric-blue #0000f2 as the single accent.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --bg:#ffffff;
  --bg-subtle:#f7f8fa;
  --card:#ffffff;
  --fg:#0a0a0c;
  --fg-muted:#565d68;
  --fg-faint:#8b919b;
  --border:#e9ebef;
  --border-strong:#dcdfe5;

  /* brand accent (Hermes) */
  --hermes:#0a18ff;          /* electric blue, nudged for legibility on white */
  --hermes-ink:#0b1280;
  --hermes-soft:#eef0ff;
  --accent:#e7ff4f;          /* chartreuse — used sparingly */

  /* semantic */
  --ok:#0a8f5a; --ok-soft:#e9f7f0;
  --block:#e23b54; --block-soft:#fdecef;
  --warn:#b06a00; --warn-soft:#fbf2e3;

  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(12,14,20,.05);
  --shadow:0 1px 3px rgba(12,14,20,.06), 0 12px 32px -18px rgba(12,14,20,.22);
  --shadow-lg:0 20px 50px -24px rgba(12,14,20,.32);

  --maxw:1080px;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Instrument Serif','Times New Roman',serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-ui); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
a{color:var(--hermes); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.1; color:var(--fg)}
p{margin:0 0 1em}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-display); font-weight:400}
.muted{color:var(--fg-muted)} .dim{color:var(--fg-muted)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--hermes); background:var(--hermes-soft); padding:6px 11px; border-radius:999px; margin-bottom:22px}

/* motion */
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.in{animation:fade-up .6s var(--ease) forwards}
.reveal.in.d1{animation-delay:.05s}.reveal.in.d2{animation-delay:.1s}.reveal.in.d3{animation-delay:.15s}.reveal.in.d4{animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;animation:none!important}}
.caret::after{content:"▌";color:var(--hermes);animation:blink 1.1s step-end infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}

/* top bar */
.topbar{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.topbar .row{display:flex; align-items:center; gap:16px; height:64px}
.brandmark{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:-.02em}
.brandmark .dot{width:11px;height:11px;border-radius:4px;background:var(--hermes)}
.spacer{flex:1}
.sponsors{display:flex; align-items:center; gap:7px}
.chip{font-size:12px; font-weight:500; color:var(--fg-muted); padding:5px 10px; border:1px solid var(--border); border-radius:999px; background:var(--bg); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--border-strong); color:var(--fg)}
.chip i{width:7px;height:7px;border-radius:50%}
.chip.nous i{background:var(--hermes)} .chip.nv i{background:var(--ok)} .chip.stripe i{background:#635bff}

/* hero animated grid background (à la Firecrawl) */
.hero-section{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--border)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(10,12,22,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,12,22,.045) 1px, transparent 1px);
  background-size:152px 152px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(125% 88% at 50% 4%, #000 42%, transparent 86%);
  mask-image:radial-gradient(125% 88% at 50% 4%, #000 42%, transparent 86%);
}
.hero-bg .deco{position:absolute}
.glabel{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--fg-faint); opacity:.5; white-space:nowrap}
.gdot{width:4px; height:4px; border-radius:50%; background:rgba(10,12,22,.14)}
.pix{opacity:.2; animation:pixflicker 4.5s var(--ease) infinite}
.spark{animation:twinkle 3.4s var(--ease) infinite; transform-origin:center}
@keyframes twinkle{0%,100%{opacity:.4; transform:scale(.78)} 50%{opacity:1; transform:scale(1.12)}}
@keyframes pixflicker{0%,100%{opacity:.14} 40%{opacity:.32} 72%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.pix,.spark{animation:none}}
.hero-section > .wrap{position:relative; z-index:1}

/* hero */
.hero{padding:84px 0 36px; text-align:center}
.hero .eyebrow{margin-bottom:24px}
.hero h1{font-size:clamp(2.6rem,6vw,4.2rem); letter-spacing:-.03em}
.hero h1 em, .grad-money{font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--hermes); letter-spacing:-.01em}
.hero .lede{color:var(--fg-muted); font-size:clamp(1.05rem,2vw,1.28rem); max-width:60ch; margin:22px auto 0; line-height:1.55}
.hero .lede strong{color:var(--fg); font-weight:600}
.cta-row{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.trust{margin-top:26px; font-size:13.5px; color:var(--fg-faint); font-family:var(--font-mono)}

/* buttons */
.cta{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:11px; background:var(--hermes); color:#fff; font-weight:600; font-size:15px; transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; box-shadow:var(--shadow-sm)}
.cta:hover{transform:translateY(-1px); box-shadow:var(--shadow); background:var(--hermes-ink); text-decoration:none}
.cta .ph{background:rgba(255,255,255,.18); padding:2px 9px; border-radius:999px; font-size:13px}
.cta-ghost{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px; border:1px solid var(--border-strong); background:var(--bg); color:var(--fg); font-weight:600; font-size:15px; transition:border-color .15s, background .15s}
.cta-ghost:hover{border-color:var(--fg-faint); background:var(--bg-subtle); text-decoration:none}

/* legacy blue band (kept for proof hero compatibility, refined) */
.band-blue{background:var(--hermes); color:#fff; border-radius:var(--radius); padding:44px}
.band-blue h1,.band-blue h2{color:#fff}
.band-blue h1 em{color:var(--accent)}
.band-blue .eyebrow{color:var(--hermes); background:var(--accent)}
.band-blue .lede{color:rgba(255,255,255,.86)}

/* stats — clean metric cards */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0 6px}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative; transition:transform .2s var(--ease), box-shadow .2s var(--ease); text-align:left}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.stat .v{font-size:2.4rem; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--fg)}
.stat .k{font-size:14px; color:var(--fg-muted); margin-top:10px; line-height:1.45}
.stat.money .v{color:var(--hermes)} .stat.safe .v{color:var(--ok)} .stat.block .v{color:var(--block)}
.stat .edge{display:none}
.stat .art{display:none} /* art removed from metric tiles — kept selector for safety */

/* sections / cards */
.section{margin:72px 0}
.section > h2{font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; margin-bottom:8px}
.section > .section-sub{color:var(--fg-muted); font-size:1.05rem; margin-bottom:26px; max-width:60ch}
.section > h2 .n{display:none}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .2s var(--ease)}
.card:hover{box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card .head{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border)}
.card .head .title{font-weight:600; font-size:1.05rem}
.card .head .sub{color:var(--fg-faint); font-size:13px}
.card .body{padding:20px 22px}
.ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--bg-subtle);border:1px solid var(--border)}

/* badges */
.badge{font-size:12px; font-weight:600; letter-spacing:.01em; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid transparent}
.badge::before{content:""; width:6px; height:6px; border-radius:50%}
.badge--ok{color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 22%,transparent)} .badge--ok::before{background:var(--ok)}
.badge--pay{color:var(--hermes); background:var(--hermes-soft); border-color:color-mix(in srgb,var(--hermes) 22%,transparent)} .badge--pay::before{background:var(--hermes)}
.badge--block{color:var(--block); background:var(--block-soft); border-color:color-mix(in srgb,var(--block) 24%,transparent)} .badge--block::before{background:var(--block)}
.badge--warn{color:var(--warn); background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 24%,transparent)} .badge--warn::before{background:var(--warn)}

/* key/value */
.kv{display:grid; grid-template-columns:150px 1fr; gap:10px 18px; font-size:14px}
.kv dt{color:var(--fg-faint); font-weight:500}
.kv dd{margin:0; color:var(--fg)}

/* transcript */
.transcript{display:flex; flex-direction:column; gap:10px}
.turn{max-width:78%; padding:11px 15px; border-radius:14px; font-size:14.5px; line-height:1.45}
.turn .who{display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px; color:var(--fg-faint)}
.turn.caller{align-self:flex-start; background:var(--bg-subtle); border:1px solid var(--border); border-bottom-left-radius:4px}
.turn.agent{align-self:flex-end; background:var(--hermes-soft); border:1px solid color-mix(in srgb,var(--hermes) 18%,transparent); border-bottom-right-radius:4px}
.turn.agent .who{color:var(--hermes)}

/* code / json */
.pre{font-family:var(--font-mono); font-size:12.8px; line-height:1.6; color:#e8eaf2; background:#0c0e16; border-radius:var(--radius-sm); padding:16px 18px; overflow:auto; white-space:pre; margin:0}
.pre .k{color:#9db4ff} .pre .s{color:#9ae6b4} .pre .n{color:#e6c07b}

/* 403 callout */
.block-callout{border:1px solid color-mix(in srgb,var(--block) 26%,transparent); border-radius:var(--radius); background:var(--block-soft); padding:22px 24px; display:flex; gap:20px; align-items:flex-start}
.block-callout .big{font-weight:700; font-size:2.4rem; color:var(--block); line-height:1; letter-spacing:-.03em}
.block-callout h3{font-size:1.15rem; margin-bottom:6px}
.block-callout .note{color:var(--fg-muted); font-size:14px}
.block-callout .nostripe{margin-top:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--ok)}

/* ledger */
.ledger{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12.5px}
.ledger th{text-align:left; color:var(--fg-faint); font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:11px; padding:9px 13px; border-bottom:1px solid var(--border); background:var(--bg-subtle)}
.ledger td{padding:10px 13px; border-bottom:1px solid var(--border); color:var(--fg-muted); white-space:nowrap}
.ledger tr:last-child td{border-bottom:none}
.ledger tr:hover td{background:var(--bg-subtle)}
.ledger td.hash{color:var(--hermes)} .ledger td.amt{color:var(--fg); font-weight:600}
.ledger td .pol-allow{color:var(--ok)} .ledger td .pol-deny{color:var(--block)} .ledger td .pol-none{color:var(--fg-faint)}
.verify-bar{display:flex; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--border); background:var(--ok-soft)}

/* steps — refined feature cards with art */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .45s var(--ease)}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.step .art{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--hermes); transition:transform .5s var(--ease)}
.step:hover .art{transform:scale(1.04)}
.step .step-body{padding:18px}
.step .num{font-family:var(--font-mono); font-size:12px; color:var(--fg-faint)}
.step .t{font-weight:600; font-size:1.1rem; margin:6px 0 6px; letter-spacing:-.01em}
.step .d{font-size:13.5px; color:var(--fg-muted); line-height:1.5}
.step .tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; text-transform:uppercase; margin-top:12px; display:inline-block; color:var(--fg-faint)}
.step .tag.nous,.step .tag.nv,.step .tag.stripe{color:var(--hermes)}

/* footer */
.foot{margin:80px 0 48px; padding-top:24px; border-top:1px solid var(--border); color:var(--fg-faint); font-size:13.5px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}

@media (max-width:880px){
  .stats{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr} .turn{max-width:92%} .section{margin:52px 0}
}