:root {
      --bg: #0c1017; --panel: #10151d; --panel2: #141b24; --border: #232b36;
      --text: #e6e9ec; --muted: #99a3ad; --amber: #e8a33d; --amber-ink: #14100a;
      --rec: #e4574d; --ok: #57d98a;
      --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
      --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body { background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
    .wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
    a { color: var(--amber); }

    nav { display: flex; align-items: center; gap: 10px; padding: 18px 0; }
    nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
    nav .brand img { width: 24px; height: 24px; }
    nav .brand b { font: 700 15px/1 var(--mono); letter-spacing: .14em; }
    nav .cta { margin-left: auto; }
    .btn {
      display: inline-block; text-decoration: none; cursor: pointer;
      font: 600 14px/1 var(--mono); letter-spacing: .05em;
      background: var(--amber); color: var(--amber-ink); border: 0;
      padding: 13px 20px; border-radius: 4px;
    }
    .btn:hover, .btn:focus-visible { background: #f4b658; outline: none; }
    .btn.small { padding: 10px 15px; font-size: 12.5px; }
    .ghost { font: 500 13px/1 var(--mono); color: var(--amber); margin-left: 14px; text-decoration: none; }

    /* hero */
    .hero { padding: 48px 0 72px; }
    .vf { position: relative; padding: 34px 30px 30px; }
    .vf::before, .vf::after, .vf i::before, .vf i::after {
      content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--amber);
    }
    .vf::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
    .vf::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
    .vf i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
    .vf i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
    .osd { display: flex; justify-content: space-between; font: 500 12px/1 var(--mono); color: var(--amber); letter-spacing: .08em; margin-bottom: 30px; }
    .osd .rec::before { content: "●"; color: var(--rec); margin-right: 7px; animation: blink 1.6s steps(1) infinite; }
    @keyframes blink { 50% { opacity: .25; } }
    @media (prefers-reduced-motion: reduce) { .osd .rec::before { animation: none; } }
    h1 { font: 750 clamp(30px, 5vw, 48px)/1.1 var(--sans); letter-spacing: -.015em; max-width: 21ch; text-wrap: balance; margin-bottom: 18px; }
    h1 em { font-style: normal; color: var(--amber); }
    .hero p.sub { color: var(--muted); max-width: 54ch; margin-bottom: 28px; font-size: 17px; }
    .proof { margin-top: 34px; display: flex; gap: 28px; flex-wrap: wrap; font: 500 12.5px/1.5 var(--mono); color: var(--muted); letter-spacing: .04em; }
    .proof b { color: var(--text); display: block; font-size: 17px; font-variant-numeric: tabular-nums; }

    section { padding: 56px 0; border-top: 1px solid var(--border); }
    h2 { font: 700 clamp(22px, 3vw, 28px)/1.2 var(--sans); margin-bottom: 8px; text-wrap: balance; }
    .kicker { font: 600 11.5px/1 var(--mono); letter-spacing: .16em; color: var(--amber); text-transform: uppercase; margin-bottom: 12px; }
    .lead { color: var(--muted); max-width: 62ch; margin-bottom: 30px; }

    .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
    .card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 20px 22px; }
    .card h3 { font-size: 16px; margin-bottom: 8px; }
    .card .n { font: 600 11px/1 var(--mono); color: var(--amber); letter-spacing: .1em; display: block; margin-bottom: 12px; }
    .card p { color: var(--muted); font-size: 14.5px; }

    /* verify section */
    .verify { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 26px 28px; }
    .verify ol { margin: 14px 0 0 18px; color: var(--muted); font-size: 15px; display: grid; gap: 8px; }
    .verify code { font: 500 13px/1.6 var(--mono); background: var(--panel2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 7px; color: var(--text); }

    /* use cases */
    .chips { display: flex; gap: 10px; flex-wrap: wrap; }
    .chip { font: 500 13px/1 var(--mono); letter-spacing: .03em; color: var(--text); border: 1px solid var(--border); background: var(--panel); border-radius: 3px; padding: 10px 14px; }

    /* faq */
    details { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding: 0; margin-bottom: 10px; }
    summary { cursor: pointer; padding: 15px 20px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
    summary::after { content: "+"; color: var(--amber); font: 400 18px/1 var(--mono); }
    details[open] summary::after { content: "–"; }
    details p { padding: 0 20px 16px; color: var(--muted); font-size: 14.5px; max-width: 70ch; }
    details a { color: var(--amber); }

    .final { text-align: center; padding: 72px 0 84px; }
    .final h2 { max-width: 26ch; margin: 0 auto 24px; }

    footer { border-top: 1px solid var(--border); padding: 26px 0 40px; color: var(--muted); font-size: 13px; }
    footer .row { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
    footer p { margin-top: 12px; max-width: 90ch; font-size: 12.5px; }