/* ============================================================
   TRUVEIL — Phase D stylesheet · LIGHT / WHITE product theme
   ------------------------------------------------------------
   Clean, light, modern corporate-tech. White backgrounds, dark
   ink text, a deep navy brand ink + electric-blue accent, with a
   retained gold seal for the premium "attestation" feel.

   PALETTE
     bg / paper        #ffffff
     paper-2 (wash)    #f7f8fa
     paper-3 (panel)   #eef1f6
     ink (text)        #0e1116
     ink-2 (muted)     #5a6270
     ink-3 (faint)     #8a92a0
     navy (brand)      #12274a
     blue (accent)     #2f6bff
     blue-lite         #5f8bff
     gold (seal)       #c8971f
     gold-lite         #e7c24e
     green (match)     #12a06a
     red (alert)       #e0453e
   ============================================================ */

:root {
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --paper-3: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f4f6fa;

  --ink: #0e1116;
  --ink-2: #5a6270;
  --ink-3: #8a92a0;

  --navy: #12274a;
  --navy-2: #1c3a68;
  --blue: #2f6bff;
  --blue-lite: #5f8bff;
  --blue-wash: rgba(47, 107, 255, 0.08);

  --gold: #c8971f;
  --gold-lite: #e7c24e;
  --bone: #0e1116;          /* legacy alias → now ink, so old rules read dark */

  --muted: #5a6270;         /* legacy alias */
  --charcoal: #ffffff;      /* legacy alias → paper */
  --charcoal-2: #f7f8fa;    /* legacy alias */

  --red: #e0453e;
  --green: #12a06a;

  --line: rgba(18, 39, 74, 0.14);
  --hairline: rgba(18, 39, 74, 0.09);

  --serif: "Playfair Display", "Cambria", "Georgia", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 2px 10px rgba(18,39,74,.06);
  --shadow-md: 0 12px 34px rgba(18,39,74,.10);
  --shadow-lg: 0 26px 60px rgba(18,39,74,.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* ======================= SPA PAGES / ROUTER ======================= */
/* Every page stays in the DOM so existing JS queries keep working; the
   router shows the active page and hides the rest. */
.page { display: none; }
.page.active { display: block; animation: pageIn .4s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Soft light background wash */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 820px at 82% -12%, rgba(47,107,255,0.07), transparent 60%),
    radial-gradient(940px 720px at -5% 105%, rgba(200,151,31,0.06), transparent 55%),
    var(--paper);
}

/* Grain overlay disabled on light theme (kept element for markup stability) */
.grain { display: none; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--navy); }

/* -------- Layout helpers -------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }
.section { padding: 112px 0; position: relative; }
.section + .section { border-top: 1px solid var(--hairline); }

.kicker {
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--serif); font-weight: 700; color: var(--navy);
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08;
  margin: 0 0 20px; letter-spacing: -.01em;
}
.lede { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 660px; }
.lede em { color: var(--navy); font-style: normal; font-weight: 600; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 8px; font-weight: 600; font-size: 15px;
  letter-spacing: .01em; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  will-change: transform;
}
.btn.big { padding: 17px 34px; font-size: 16px; }
/* Primary CTA is now electric blue (was gold). Keeps .btn-gold class name. */
.btn-gold {
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  color: #ffffff; box-shadow: 0 10px 26px rgba(47,107,255,0.28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(47,107,255,0.42); }
.btn-ghost {
  border-color: var(--line); color: var(--navy); background: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* ======================= NAV ======================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 68px;
  display: flex; align-items: center; gap: 26px;
}
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.wordmark-text {
  font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .16em;
  color: var(--navy); transition: letter-spacing .35s var(--ease), color .25s;
  /* subtle gold underline accent on the T-cross of the wordmark via text-shadow depth */
}
.wordmark:hover .wordmark-text { letter-spacing: .19em; }

/* ---- Truveil brand mark (fingerprint-in-shield, gold + navy) ---- */
.mark { display: inline-flex; }
.mark-svg { display: block; overflow: hidden; filter: drop-shadow(0 3px 7px rgba(18,39,74,.22)); }
.mark-shield { transition: filter .3s; }
.mark-check {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: markDraw 1s var(--ease) .25s forwards;
  filter: drop-shadow(0 0 2px rgba(231,194,78,.6));
}
@keyframes markDraw { to { stroke-dashoffset: 0; } }
/* Hover: re-draw the check + sweep a gold sheen across the shield */
.wordmark:hover .mark-check { animation: markDraw .7s var(--ease) forwards; }
.mark-sheen { opacity: 0; }
.wordmark:hover .mark-sheen { animation: markSheen .8s var(--ease); }
@keyframes markSheen {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60px); }
}
.wordmark:hover .mark-svg { filter: drop-shadow(0 4px 12px rgba(200,151,31,.45)); }
/* Footer mark: static, no sheen element; check settles drawn */
.mark-foot .mark-svg { filter: drop-shadow(0 2px 5px rgba(18,39,74,.2)); }
.foot-brand:hover .mark-check { animation: markDraw .7s var(--ease) forwards; }

.nav-links { margin-left: auto; display: flex; gap: 24px; }
.nav-links a {
  font-size: 14px; color: var(--ink-2); font-weight: 500; position: relative;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--blue); transition: width .28s var(--ease); border-radius: 2px;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { width: 100%; }
/* Active tab (set via aria-current by the router) */
.nav-links a[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta { padding: 9px 18px; font-size: 14px; }

.nav-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav-burger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: .3s; }

/* ======================= HERO ======================= */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 78% 20%, rgba(47,107,255,0.09), transparent 62%),
    linear-gradient(180deg, #ffffff, #f4f7fc 100%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Vault-door motif kept but softened for light theme, tucked behind cards */
.hero-vault {
  position: absolute; right: -14vw; top: 50%; transform: translateY(-50%);
  width: 54vw; max-width: 720px; aspect-ratio: 1; z-index: 0;
  opacity: .5; pointer-events: none;
}
.vault-door {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #eef2f8, #dbe3ef 72%);
  box-shadow: inset 0 0 60px rgba(18,39,74,.10), 0 30px 80px rgba(18,39,74,.10);
  border: 2px solid rgba(47,107,255,.16);
}
.vault-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(47,107,255,.16); }
.vault-ring.r1 { inset: 6%; border-width: 2px; border-color: rgba(47,107,255,.22); }
.vault-ring.r2 { inset: 15%; }
.vault-ring.r3 { inset: 26%; border-style: dashed; animation: spin 90s linear infinite; }
.vault-spokes {
  position: absolute; inset: 30%; border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 8%, rgba(47,107,255,.14) 8% 9%, transparent 9% 33%,
      rgba(47,107,255,.14) 33% 34%, transparent 34% 58%,
      rgba(47,107,255,.14) 58% 59%, transparent 59% 83%,
      rgba(47,107,255,.14) 83% 84%, transparent 84% 100%);
  animation: spin 120s linear infinite reverse;
}
.vault-hub {
  position: absolute; inset: 41%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--gold-lite), var(--gold) 55%, #9a7714);
  box-shadow: 0 0 40px rgba(200,151,31,.30), inset 0 -6px 14px rgba(0,0,0,.2);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-inner {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
  padding: 96px 28px 40px; width: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-block; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); border: 1px solid rgba(47,107,255,.28); border-radius: 40px;
  padding: 7px 16px; margin-bottom: 22px; background: var(--blue-wash);
  animation: rise .8s var(--ease) both;
}
.hero-title {
  font-family: var(--serif); font-weight: 800; color: var(--navy);
  font-size: clamp(40px, 6.4vw, 78px); line-height: 1.0; letter-spacing: -.02em;
  margin: 0 0 22px; animation: rise .9s .05s var(--ease) both;
}
.hero-title em { color: var(--blue); font-style: italic; }
.hero-sub {
  font-size: clamp(16px, 1.7vw, 21px); color: var(--ink-2); max-width: 560px;
  margin: 0 0 30px; animation: rise 1s .12s var(--ease) both;
}
.hero-sub em { color: var(--navy); font-style: normal; font-weight: 600; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; animation: rise 1.05s .2s var(--ease) both; }
.hero-tags {
  margin-top: 30px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2); letter-spacing: .02em;
  animation: rise 1.1s .3s var(--ease) both;
}
.hero-tags .dot { color: var(--blue); }
.hero-tags em { color: var(--navy); font-style: normal; font-weight: 600; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* --- HERO MARQUEE CARDS (showcase the colorful slab art) --- */
.hero-cards {
  position: relative; z-index: 2; min-height: 420px;
  perspective: 1400px;
  animation: rise 1.1s .25s var(--ease) both;
}
.hero-card {
  position: absolute; width: 200px; aspect-ratio: 5/7; border-radius: 14px;
  overflow: hidden; background: #e9edf4;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 60px rgba(18,39,74,.24), 0 4px 14px rgba(18,39,74,.14);
  transform: rotate(var(--rot,0deg));
  animation: floatCard 7s ease-in-out infinite;
  will-change: transform;
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  mix-blend-mode: screen; opacity: .55;
}
.hero-card .hc-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #201800; background: linear-gradient(180deg, var(--gold-lite), var(--gold));
  padding: 3px 8px; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero-card.hc-0 { left: 4%;  top: 40px;  --rot: -8deg;  z-index: 3; animation-delay: 0s; }
.hero-card.hc-1 { left: 26%; top: 4px;   --rot: -2deg;  z-index: 5; animation-delay: .8s; width: 214px; }
.hero-card.hc-2 { left: 49%; top: 34px;  --rot: 5deg;   z-index: 4; animation-delay: 1.5s; }
.hero-card.hc-3 { left: 8%;  top: 220px; --rot: 6deg;   z-index: 2; animation-delay: 2.1s; width: 178px; opacity: .96; }
.hero-card.hc-4 { left: 58%; top: 210px; --rot: -6deg;  z-index: 2; animation-delay: 1.1s; width: 178px; opacity: .96; }
@keyframes floatCard {
  0%,100% { transform: rotate(var(--rot,0deg)) translateY(0); }
  50%     { transform: rotate(var(--rot,0deg)) translateY(-14px); }
}
.hero-cards-note {
  position: absolute; bottom: -6px; left: 6%; z-index: 6;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em;
}

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 20px;
  z-index: 2; display: flex; justify-content: center; padding-top: 8px; background: rgba(255,255,255,.6);
}
.scroll-hint span { width: 3px; height: 8px; background: var(--blue); border-radius: 3px; animation: scrolldot 1.6s infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ======================= PROBLEM ======================= */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 46px 0 40px;
}
.stat {
  background: #ffffff;
  border: 1px solid var(--hairline); border-radius: 14px; padding: 32px 28px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lite));
  opacity: .9;
}
.stat.alert::before { background: linear-gradient(90deg, var(--red), #ff8a84); }
.stat-num {
  font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 5vw, 54px);
  color: var(--navy); line-height: 1; letter-spacing: -.01em;
}
.stat.alert .stat-num { color: var(--red); }
.stat-label { color: var(--ink-2); font-size: 14.5px; margin-top: 12px; }

.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
  margin-top: 12px;
}
.versus-side { background: #ffffff; border: 1px solid var(--hairline); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-sm); }
.versus-side.old { border-color: rgba(224,69,62,.28); background: linear-gradient(180deg,#fff,#fff7f6); }
.versus-side.new { border-color: rgba(18,160,106,.30); background: linear-gradient(180deg,#fff,#f4fdf8); }
.versus-tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.versus-side.old .versus-tag { color: var(--red); }
.versus-side.new .versus-tag { color: var(--green); }
.versus-side p { margin: 0; color: var(--ink-2); font-size: 15px; }
.versus-side p em { color: var(--navy); font-weight: 600; }
.versus-arrow { font-size: 30px; color: var(--blue); }

/* ======================= DEMO ======================= */
.demo { background:
  radial-gradient(900px 560px at 50% 0%, rgba(47,107,255,.06), transparent 60%); }

/* Vault value headline block */
.vault-value {
  margin: 30px 0 8px; text-align: center;
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.vv-label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.vv-num { font-family: var(--serif); font-weight: 800; color: var(--navy);
  font-size: clamp(34px, 6vw, 58px); line-height: 1.05; margin: 6px 0 8px; letter-spacing: -.01em; }
.vv-fine { font-size: 12.5px; color: var(--ink-3); max-width: 640px; margin: 0 auto; }
.vv-fine em { color: var(--navy); font-style: italic; }

.demo-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px;
}
.tool {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid var(--line); color: var(--navy);
  padding: 11px 16px; border-radius: 8px; font-family: var(--sans); font-size: 14px;
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.tool .tool-i { color: var(--blue); font-size: 15px; }
.tool:hover { transform: translateY(-2px); border-color: var(--blue); background: #fff; box-shadow: 0 10px 22px rgba(47,107,255,.16); }
.tool.danger:hover { border-color: var(--red); box-shadow: 0 8px 20px rgba(224,69,62,.2); }
.tool.danger .tool-i { color: var(--red); }
.tool.ok:hover { border-color: var(--green); box-shadow: 0 8px 20px rgba(18,160,106,.18); }
.tool.ok .tool-i { color: var(--green); }
.tool.subtle { color: var(--ink-2); }
.tool.sound-toggle { border-color: var(--line); }
.tool.sound-toggle .tool-i { color: var(--blue); }
.tool.sound-toggle:hover { border-color: var(--blue); }
.tool.sound-toggle.muted { color: var(--ink-3); border-color: var(--hairline); }
.tool.sound-toggle.muted .tool-i { color: var(--ink-3); }
.tool:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.tool.busy { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.demo-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; }

/* --- Vault panel with slabs --- */
.vault-panel, .console-panel {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow-sm);
}
.vault-panel-head, .console-head, .evidence-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 18px; font-weight: 700;
}
.selected-hint { color: var(--blue); text-transform: none; letter-spacing: .02em; font-weight: 600; }
.slabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }

/* A slab = a graded-card holder; card art shows through clearly on white */
.slab {
  position: relative; aspect-ratio: 5/7; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, #f2f5fa, #e6ebf3);
  border: 1px solid var(--line);
  padding: 8px; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.slab:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(18,39,74,.18); }
.slab.selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), 0 14px 30px rgba(47,107,255,.2); }
.slab-label {
  font-size: 8.5px; letter-spacing: .02em; color: var(--navy); font-weight: 700;
  text-align: center; background: rgba(18,39,74,.06); border-radius: 4px; padding: 3px 2px;
  line-height: 1.3;
}
.slab-surface {
  flex: 1; margin: 7px 3px; border-radius: 6px; position: relative; overflow: hidden;
  background: #dfe5ee;
}
.slab-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.02) brightness(1.0);
}
.slab-holo {
  position: absolute; inset: 0; z-index: 1; mix-blend-mode: overlay; opacity: .4;
  background:
    conic-gradient(from var(--holo, 210deg) at 50% 50%,
      #6a4fb0, #4f7fb0, #4fb08a, #b0a24f, #b04f6a, #6a4fb0);
}
.slab-surface::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .1s;
}
.slab:hover .slab-surface::after { animation: sheen 1.1s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
.slab-value { font-size: 8.5px; text-align: center; color: var(--ink-2); font-weight: 600; letter-spacing: .02em; }
.slab-grade {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg,var(--gold-lite),var(--gold)); color: #201800; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.28); z-index: 3;
}

/* status ribbons on slabs */
.slab-status {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; padding: 3px;
  transform: translateY(100%); transition: transform .3s var(--ease); z-index: 4;
}
.slab.bound .slab-status.bound-s,
.slab.matched .slab-status.match-s,
.slab.frozen .slab-status.frozen-s { transform: translateY(0); }
.slab-status.bound-s { background: linear-gradient(180deg,var(--gold-lite),var(--gold)); color: #201800; }
.slab-status.match-s { background: var(--green); color: #fff; }
.slab-status.frozen-s { background: var(--red); color: #fff; }
.slab.frozen { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 0 26px rgba(224,69,62,.3); }
.slab.frozen .slab-art { filter: saturate(1.15) hue-rotate(-30deg) brightness(.85) contrast(1.05); }
.slab.frozen .slab-holo { opacity: .8; background: repeating-linear-gradient(45deg, rgba(224,69,62,.35) 0 6px, transparent 6px 12px); mix-blend-mode: normal; }
.slab.matched { border-color: var(--green); }
.slab.matched .slab-holo { background:
    conic-gradient(from var(--holo, 210deg) at 50% 50%, #4fb08a, #6ad0a0, #4fb08a); opacity: .3; }

/* magnifier scan overlay */
.scanner {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--blue); background: radial-gradient(circle, rgba(47,107,255,.14), transparent 70%);
  box-shadow: 0 0 20px rgba(47,107,255,.5), inset 0 0 12px rgba(47,107,255,.3);
  pointer-events: none; opacity: 0; z-index: 5;
}
.slab.scanning .scanner { opacity: 1; animation: scanmove 1.4s var(--ease); }
@keyframes scanmove {
  0% { top: 6%; left: 6%; opacity: 0; }
  15% { opacity: 1; }
  50% { top: 55%; left: 55%; }
  85% { opacity: 1; }
  100% { top: 30%; left: 30%; opacity: 0; }
}

.live-note {
  margin-top: 18px; font-size: 12.5px; color: var(--ink-2); text-align: center;
  padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper-2);
}
.live-note strong { color: var(--blue); }

/* --- Console panel --- */
.console-panel { background: linear-gradient(180deg, #ffffff, #f9fbfe); }
.console-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px var(--green); display: inline-block; margin-right: 6px;
  animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .4; } }

.merkle {
  min-height: 168px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--paper-2); padding: 16px 10px; display: flex; flex-direction: column;
  gap: 12px; align-items: center; justify-content: center; position: relative;
}
.merkle-empty { color: var(--ink-3); font-size: 13px; text-align: center; }
.merkle-level { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mnode {
  font-family: var(--mono); font-size: 9px; color: var(--ink-2);
  background: #ffffff; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 7px; min-width: 46px; text-align: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s, border-color .3s, color .3s, box-shadow .3s;
}
.mnode.show { opacity: 1; transform: none; }
.mnode.root { color: var(--navy); border-color: var(--blue); background: var(--blue-wash);
  font-size: 10px; font-weight: 700; box-shadow: 0 0 16px rgba(47,107,255,.22); }
.mnode.leaf { color: var(--ink); }
.mnode.proof { border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 14px rgba(47,107,255,.5); background: var(--blue-wash); }
.mnode.target { border-color: var(--green); color: var(--green); box-shadow: 0 0 14px rgba(18,160,106,.4); }

/* seal block */
.seal-block { margin-top: 16px; display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  background: linear-gradient(180deg,#fffdf6,#fff9ea); animation: stamp .5s var(--ease); }
@keyframes stamp { 0% { transform: scale(1.4); opacity: 0; } 60% { transform: scale(.96); } 100% { transform: scale(1); opacity: 1; } }
.gold-seal { text-align: center; flex-shrink: 0; }
.gold-seal svg { filter: drop-shadow(0 4px 12px rgba(200,151,31,.4)); animation: sealpop .6s var(--ease); }
@keyframes sealpop { 0% { transform: rotate(-30deg) scale(.4); } 100% { transform: none; } }
.seal-signed { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 14px; margin-top: 4px; letter-spacing: .05em; }
.seal-meta { flex: 1; min-width: 0; }
.meta-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.meta-row:last-child { border-bottom: 0; }
.meta-row span { color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.meta-row code { font-family: var(--mono); color: var(--blue); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* console log */
.console-log {
  margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 12px;
}
.console-log .cl { opacity: 0; animation: rise .3s var(--ease) forwards; }
.console-log .cl .t { color: var(--ink-3); margin-right: 8px; }
.console-log .cl.gold { color: var(--gold); }
.console-log .cl.green { color: var(--green); }
.console-log .cl.red { color: var(--red); }

/* --- KMS honesty note --- */
.kms-note {
  margin-top: 22px; background: linear-gradient(180deg,#ffffff,var(--paper-2));
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.kms-tag { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); border: 1px solid rgba(47,107,255,.28); border-radius: 20px; padding: 5px 12px; margin-bottom: 12px; }
.kms-note p { margin: 0; color: var(--ink-2); font-size: 14px; }
.kms-note strong { color: var(--navy); }
.kms-note em { color: var(--navy); }

/* --- Evidence chain --- */
.evidence { margin-top: 26px; background: #ffffff; border: 1px solid var(--line);
  border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.integrity { font-size: 11px; padding: 4px 10px; border-radius: 20px; letter-spacing: .1em; font-weight: 700; }
.integrity.ok { background: rgba(18,160,106,.12); color: var(--green); }
.integrity.fail { background: rgba(224,69,62,.14); color: var(--red); animation: pulse .8s infinite; }
.evidence-list { display: flex; flex-direction: column; gap: 8px; }
.ev-row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 14px; transition: border-color .3s, background .3s;
}
.ev-row.broken { border-color: var(--red); background: rgba(224,69,62,.06); }
.ev-idx { font-family: var(--mono); color: var(--blue); font-size: 12px; }
.ev-row.broken .ev-idx { color: var(--red); }
.ev-event {
  background: transparent; border: 0; color: var(--ink); font-family: var(--sans);
  font-size: 14px; width: 100%; padding: 4px 6px; border-radius: 6px;
  border: 1px solid transparent; transition: border-color .2s;
}
.ev-event:focus { outline: none; border-color: var(--blue); background: var(--blue-wash); }
.ev-hash { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.ev-row.broken .ev-hash { color: var(--red); }
.ev-link { font-size: 10px; color: var(--ink-3); }
.evidence-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.evidence-hint code { font-family: var(--mono); color: var(--blue); }

/* --- Freeze banner --- */
.freeze-banner {
  margin-top: 40px; background: linear-gradient(90deg, #b1332c, var(--red), #b1332c);
  border-top: 2px solid #ff9a95; border-bottom: 2px solid #ff9a95;
  overflow: hidden; white-space: nowrap;
}
.freeze-banner:not([hidden]) { animation: bannerin .5s var(--ease); }
@keyframes bannerin { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
.freeze-inner {
  display: inline-flex; align-items: center; gap: 20px; padding: 16px 0;
  font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff;
  letter-spacing: .05em; animation: marquee 14s linear infinite;
}
.freeze-inner::after { content: "⚠ TOKEN FROZEN — TRADING HALTED"; margin-left: 40px; }
.freeze-sub { font-family: var(--mono); font-size: 13px; color: #ffe2e0; font-weight: 400; letter-spacing: .02em; }
@keyframes marquee { from { transform: translateX(4%); } to { transform: translateX(-40%); } }

/* ======================= HOW EACH MOAT WORKS ======================= */
.moatlab { background: radial-gradient(820px 520px at 20% 0%, rgba(47,107,255,.06), transparent 60%); }
.moatlab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.mlab {
  background: #ffffff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.mlab:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.mlab-tag {
  align-self: flex-start; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); border: 1px solid rgba(47,107,255,.28); border-radius: 20px; padding: 4px 12px; font-weight: 700;
}
.mlab h3 { font-family: var(--serif); font-size: 22px; margin: 0; font-weight: 700; color: var(--navy); }
.mlab p.mlab-cap { color: var(--ink-2); font-size: 13.5px; margin: 0; }

/* Verdict badge shared style */
.verdict {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-weight: 800; letter-spacing: .04em; font-size: 14px;
  padding: 8px 16px; border-radius: 30px; border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s;
}
.verdict.match { background: rgba(18,160,106,.12); color: var(--green); border-color: rgba(18,160,106,.4); }
.verdict.mismatch { background: rgba(224,69,62,.10); color: var(--red); border-color: rgba(224,69,62,.4); }
.verdict.review { background: rgba(200,151,31,.12); color: var(--gold); border-color: rgba(200,151,31,.4); }

/* Confidence meter (bar) */
.meter { height: 10px; border-radius: 6px; background: var(--paper-3); overflow: hidden; position: relative; }
.meter > i { display: block; height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, var(--green), #46d39a); transition: width .35s var(--ease), background .35s; }
.meter.low > i { background: linear-gradient(90deg, var(--red), #ff8a84); }
.meter-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-2); }
.meter-row b { font-size: 18px; color: var(--navy); font-family: var(--serif); }

/* --- OPTICAL explainer --- */
.opt-stage { position: relative; border-radius: 12px; background: var(--paper-2);
  border: 1px solid var(--hairline); padding: 16px; display: flex; gap: 14px; align-items: center; }
.opt-card {
  width: 96px; aspect-ratio: 5/7; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), filter .3s;
  background: #dfe5ee;
}
.opt-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fingerprint hash grid */
.fpgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; flex: 1; }
.fpgrid i { aspect-ratio: 1; border-radius: 2px; background: var(--blue);
  transition: opacity .25s, background .25s; }
.opt-controls { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ctrl-row { display: flex; flex-direction: column; gap: 4px; }
.ctrl-row label { font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; justify-content: space-between; }
.ctrl-row label span { color: var(--blue); font-family: var(--mono); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px;
  background: var(--paper-3); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(47,107,255,.4); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
  background: var(--blue); box-shadow: 0 2px 6px rgba(47,107,255,.4); cursor: pointer;
}

/* --- ACOUSTIC explainer --- */
.aco-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.ring-btn {
  flex: 1; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--navy); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.ring-btn:hover { transform: translateY(-2px); }
.ring-btn.genuine:hover { border-color: var(--green); box-shadow: 0 8px 20px rgba(18,160,106,.2); }
.ring-btn.suspect:hover { border-color: var(--red); box-shadow: 0 8px 20px rgba(224,69,62,.2); }
.ring-btn .ring-i { font-size: 16px; }
.ring-btn.active { transform: translateY(0) scale(.98); }
.aco-visual { border-radius: 12px; background: var(--navy); border: 1px solid var(--navy-2);
  padding: 12px; position: relative; overflow: hidden; }
.aco-wave { width: 100%; height: 56px; display: block; }
.spectrum { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: 8px; }
.spectrum i { flex: 1; border-radius: 2px 2px 0 0; height: 8%;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  transition: height .3s var(--ease), background .3s; }
.spectrum.genuine i { background: linear-gradient(180deg, #46d39a, var(--green)); }
.spectrum.suspect i { background: linear-gradient(180deg, #ff8a84, var(--red)); }

/* --- FUSION explainer --- */
.fuse-dials { display: flex; flex-direction: column; gap: 16px; }
.fuse-verdict-wrap { text-align: center; padding: 10px 0 2px; }
.fuse-formula { font-size: 12px; color: var(--ink-3); text-align: center; font-family: var(--mono); }
.fuse-note { font-size: 12px; color: var(--ink-2); }

/* ======================= PROTOCOL ======================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 44px 0 40px; }
.step-card {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px;
  position: relative; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.step-card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.step-n {
  font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--blue);
  opacity: .55; line-height: 1; margin-bottom: 12px;
}
.step-card h3 { font-family: var(--serif); font-size: 23px; margin: 0 0 10px; font-weight: 700; color: var(--navy); }
.step-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

.anticheat { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.anti-card {
  background: linear-gradient(180deg,#ffffff,var(--paper-2)); border: 1px solid var(--line); border-radius: 14px; padding: 28px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.anti-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0%, rgba(47,107,255,.08), transparent 70%); }
.anti-tag { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); border: 1px solid rgba(47,107,255,.28); border-radius: 20px; padding: 5px 12px; margin-bottom: 14px; position: relative; }
.anti-card h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 12px; font-weight: 700; color: var(--navy); position: relative; }
.anti-card p { color: var(--ink-2); font-size: 15px; margin: 0; position: relative; }

/* ======================= AUTOMATION / ML ======================= */
.automation { background:
  radial-gradient(760px 480px at 80% 0%, rgba(47,107,255,.05), transparent 62%); }
.ml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.ml-card {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px;
  position: relative; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.ml-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.ml-ico {
  font-size: 24px; color: var(--blue); line-height: 1; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid rgba(47,107,255,.24); background: var(--blue-wash);
}
.ml-card h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 10px; font-weight: 700; color: var(--navy); }
.ml-card p { color: var(--ink-2); font-size: 14px; margin: 0; }
.ml-card p em { color: var(--navy); font-style: normal; font-weight: 600; }

.ml-card.ml-secure {
  grid-column: 1 / -1; border-color: var(--line);
  background: linear-gradient(180deg, #fbfcff, #ffffff);
}
.ml-card.ml-secure::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: radial-gradient(520px 220px at 100% 0%, rgba(47,107,255,.07), transparent 70%);
}
.ml-card.ml-secure > * { position: relative; }
.ml-card.ml-secure p { font-size: 15px; max-width: 900px; }
.ml-card.ml-secure p em { color: var(--blue); font-style: normal; font-weight: 700; }
.ml-tag {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); border: 1px solid rgba(47,107,255,.28); border-radius: 20px;
  padding: 5px 12px; margin-bottom: 14px;
}

/* ======================= MOATS ======================= */
.moat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.moat-card {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  position: relative; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.moat-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.moat-n {
  position: absolute; top: 20px; right: 22px; font-family: var(--serif); font-size: 30px;
  font-weight: 700; color: var(--blue); opacity: .3;
}
.moat-card h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; font-weight: 700; padding-right: 34px; color: var(--navy); }
.moat-card p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* ======================= AUDIENCE ======================= */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.aud-col { text-align: center; padding: 30px 18px; border: 1px solid var(--line);
  border-radius: 14px; background: #ffffff; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.aud-col:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.aud-ico { font-size: 30px; color: var(--blue); margin-bottom: 12px; }
.aud-col h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; font-weight: 700; color: var(--navy); }
.aud-col p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* ======================= COMPARISON ======================= */
.table-scroll { overflow-x: auto; margin: 44px 0 22px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--hairline); }
.cmp thead th {
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink-2);
  text-transform: none; letter-spacing: .02em; border-bottom: 1px solid var(--line);
}
.cmp thead th.vp { color: var(--navy); font-family: var(--serif); font-size: 18px; font-weight: 700; }
.cmp .rowhead { text-align: left; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.cmp td.vp { background: var(--blue-wash); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cmp tbody tr:last-child td.vp { border-bottom: 1px solid var(--line); }
.yes { color: var(--green); font-size: 19px; font-weight: 700; }
.no { color: var(--red); font-size: 17px; }
.part { color: var(--ink-3); font-size: 18px; }
.cmp-line { font-family: var(--serif); font-style: italic; font-size: clamp(18px,2.4vw,26px);
  color: var(--navy); text-align: center; margin-top: 30px; }

/* ======================= EXPANSION ======================= */
.roadmap-scroll { overflow-x: auto; padding: 20px 0 8px; margin-top: 30px; }
.roadmap { display: flex; align-items: center; gap: 0; min-width: 900px; padding: 0 28px;
  max-width: 1240px; margin: 0 auto; }
.road-node { text-align: center; flex-shrink: 0; width: 96px; position: relative; }
.road-ico {
  display: flex; align-items: center; justify-content: center; width: 62px; height: 62px;
  margin: 0 auto 12px; border-radius: 50%; font-size: 26px;
  border: 1px solid var(--line); background: #ffffff; color: var(--navy); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.road-node:hover .road-ico { transform: translateY(-4px) scale(1.05); border-color: var(--blue); }
.road-label { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--navy); }
.road-node.now .road-ico { border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 24px rgba(47,107,255,.28); background: var(--blue-wash); }
.road-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.road-node.now .road-sub { color: var(--blue); }
.road-line { flex: 1; height: 2px; min-width: 26px; background: linear-gradient(90deg, var(--line), rgba(47,107,255,.08)); margin-top: -28px; }

/* ======================= FINAL CTA + FOOTER ======================= */
.final-cta { background: radial-gradient(760px 420px at 50% 120%, rgba(47,107,255,.12), transparent 60%); }
.final-cta .lede { margin: 0 auto 30px; }
.final-cta .btn { margin-top: 6px; }

.footer { border-top: 1px solid var(--line); padding: 44px 0; background: var(--paper-2); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foot-brand { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; color: var(--navy); }
.foot-meta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; color: var(--ink-2); font-size: 14px; }
.foot-meta a:hover { color: var(--blue); }
.foot-meta .sep { color: var(--blue); }
.foot-fine { font-size: 13px; color: var(--ink-3); font-style: italic; }

/* ======================= ABOUT / FOUNDER ======================= */
.about { background: radial-gradient(820px 480px at 82% 4%, rgba(200,151,31,.06), transparent 60%); }
.about-card {
  display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: start;
  margin: 46px 0 34px; padding: 34px; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f9fbfe); box-shadow: var(--shadow-md);
}
.about-founder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.about-avatar {
  width: 128px; height: 128px; border-radius: 26px;
  background: linear-gradient(150deg, #1c3a68, #12274a 70%);
  border: 2px solid var(--gold); box-shadow: 0 10px 28px rgba(18,39,74,.28), inset 0 0 0 4px rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 800; font-size: 46px; letter-spacing: .04em;
  color: var(--gold-lite); position: relative;
}
.about-avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  background: linear-gradient(135deg, rgba(231,194,78,.28), transparent 55%);
}
.about-id { display: flex; flex-direction: column; gap: 3px; }
.about-name { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--navy); margin: 0; }
.about-role { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.about-sub { font-size: 12.5px; color: var(--ink-3); }
.about-mail { font-size: 13.5px; color: var(--blue); margin-top: 6px; word-break: break-all; }
.about-mail:hover { color: var(--navy); }
.about-bio p { color: var(--ink-2); font-size: 15.5px; line-height: 1.62; margin: 0 0 14px; }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio em { color: var(--navy); font-style: normal; font-weight: 600; }
.about-bio b { color: var(--navy); }

.about-why {
  margin: 0 0 34px; padding: 30px 34px; border-radius: 20px;
  border: 1px solid rgba(200,151,31,.32);
  background: linear-gradient(180deg, #fffdf6, #fffaf0);
  position: relative;
}
.about-why-tag {
  display: inline-block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--gold); border: 1px solid rgba(200,151,31,.4);
  background: rgba(200,151,31,.08); border-radius: 20px; padding: 5px 14px; margin-bottom: 16px;
}
.about-quote { margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--gold); }
.about-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink); line-height: 1.55; margin: 0 0 14px; }
.about-quote p:last-child { margin-bottom: 0; }
.about-quote em { color: var(--navy); font-style: italic; }
.about-quote b { font-style: normal; color: var(--navy); }

.about-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(150deg, #12274a, #1c3a68);
}
.about-company { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: .03em; }
.about-cta-copy p { margin: 8px 0 0; color: rgba(255,255,255,.82); font-size: 14.5px; max-width: 560px; }
.about-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.about-cta-actions .btn-ghost {
  color: #fff; background: transparent; border-color: rgba(255,255,255,.55); box-shadow: none;
}
.about-cta-actions .btn-ghost:hover {
  color: var(--navy); background: #fff; border-color: #fff;
}

@media (max-width: 760px) {
  .about-card { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .about-founder { flex-direction: row; text-align: left; align-items: center; }
  .about-avatar { width: 84px; height: 84px; font-size: 32px; border-radius: 20px; }
  .about-cta { flex-direction: column; align-items: flex-start; }
}

/* ======================= BEYOND / MULTIMODAL ======================= */
.beyond { background: radial-gradient(780px 480px at 20% 0%, rgba(47,107,255,.05), transparent 62%); }
.beyond-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 46px 0 30px; }
.beyond-card {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px;
  position: relative; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.beyond-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.beyond-tag {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px; margin-bottom: 14px;
}
.beyond-card h3 { font-family: var(--serif); font-size: 21px; margin: 0 0 10px; font-weight: 700; color: var(--navy); }
.beyond-card p { color: var(--ink-2); font-size: 14px; margin: 0; }
.beyond-card.beyond-live { border-color: rgba(18,160,106,.35);
  background: linear-gradient(180deg, #f5fdf9, #ffffff); }
.beyond-tag.live { color: var(--green); border-color: rgba(18,160,106,.4); background: rgba(18,160,106,.08); position: relative; }
.beyond-tag.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green); margin-right: 7px; vertical-align: middle;
  animation: blink 2s infinite;
}
.beyond-card p em, .beyond-card h3 em { color: var(--navy); font-style: italic; }
.beyond-line { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 21px);
  color: var(--ink-2); max-width: 780px; margin-top: 10px; }
.beyond-line em { color: var(--navy); }

/* ======================= THE COLLECTION GALLERY ======================= */
.collection { background: radial-gradient(840px 520px at 80% 0%, rgba(47,107,255,.05), transparent 60%); }
.coll-controls {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; justify-content: space-between;
  margin: 40px 0 28px;
}
.coll-total {
  background: linear-gradient(180deg, #ffffff, var(--paper-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 24px; min-width: 260px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.coll-total::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lite)); opacity: .9;
}
.ct-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.ct-num { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4vw, 42px);
  color: var(--navy); line-height: 1.05; margin: 6px 0 2px; letter-spacing: -.01em; }
.ct-sub { font-size: 12.5px; color: var(--ink-2); }
.ct-sub span { color: var(--navy); font-weight: 700; }

.coll-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: #ffffff; border: 1px solid var(--line); border-radius: 22px;
  padding: 8px 15px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.chip:hover { color: var(--navy); border-color: var(--blue); transform: translateY(-1px); }
.chip.active { color: #ffffff; background: linear-gradient(180deg, var(--blue-lite), var(--blue));
  border-color: transparent; font-weight: 700; box-shadow: 0 6px 16px rgba(47,107,255,.28); }

.coll-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px;
}
.coll-card {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.coll-card.in { opacity: 1; transform: none; }
.coll-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.cc-media { position: relative; aspect-ratio: 5/7; overflow: hidden; background: #e6ebf3; }
.cc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease); }
.coll-card:hover .cc-img { transform: scale(1.05); }
.cc-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(18,39,74,.14) 100%);
}
.cc-grade {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #201800; background: linear-gradient(180deg, var(--gold-lite), var(--gold));
  padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.cc-chip {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); background: rgba(255,255,255,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); padding: 4px 9px; border-radius: 20px;
}
.cc-chip.cat-pokemon    { border-color: rgba(200,151,31,.5); color: #a5791a; }
.cc-chip.cat-sports     { border-color: rgba(47,107,255,.5); color: #2f6bff; }
.cc-chip.cat-onepiece   { border-color: rgba(224,69,62,.5);  color: #c73831; }
.cc-chip.cat-dragonball { border-color: rgba(230,140,50,.55);color: #cf7a1f; }
.cc-chip.cat-magic      { border-color: rgba(140,110,200,.5);color: #7a5bc8; }
.cc-chip.cat-yugioh     { border-color: rgba(120,90,60,.6);  color: #8a6a3c; }

.cc-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cc-name {
  font-family: var(--serif); font-size: 15px; font-weight: 700; margin: 0; line-height: 1.25;
  color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.cc-meta { font-size: 12px; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; }
.cc-meta .cc-dot { color: var(--blue); }
.cc-rarity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-value {
  font-family: var(--serif); font-weight: 800; font-size: 24px; color: var(--navy);
  letter-spacing: -.01em; line-height: 1; margin-top: 2px;
}
.cc-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hairline); }
.cc-cert { font-family: var(--mono); font-size: 11px; color: var(--ink-2); letter-spacing: .02em; }
.cc-basis { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; }

.coll-disclaimer {
  margin-top: 30px; font-size: 12.5px; color: var(--ink-2); text-align: center;
  max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.coll-disclaimer em { color: var(--navy); font-style: italic; }

/* ======================= PROBLEM · OPERATORS + FRAUD GAPS ======================= */
.op-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 30px 0 4px;
}
.op-strip-label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; }
.op-pill {
  font-size: 13px; color: var(--ink-2); background: #ffffff;
  border: 1px solid var(--line); border-radius: 22px; padding: 7px 14px;
  box-shadow: var(--shadow-sm);
}
.op-pill b { color: var(--navy); font-weight: 700; }

.gap-head { margin: 44px 0 20px; }
.gap-head h3 {
  font-family: var(--serif); font-weight: 700; color: var(--navy);
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.25; margin: 0; max-width: 820px;
}
.gaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 46px; }
.gap-tile {
  background: linear-gradient(180deg, #fff, #fff7f6);
  border: 1px solid rgba(224,69,62,.24); border-radius: 14px; padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.gap-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(224,69,62,.4); }
.gap-ico {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; color: var(--red);
  background: rgba(224,69,62,.08); border: 1px solid rgba(224,69,62,.2);
}
.gap-tile h4 { font-family: var(--serif); font-size: 18px; margin: 0 0 8px; font-weight: 700; color: var(--navy); }
.gap-tile p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.gap-tile p em { color: var(--red); font-style: normal; font-weight: 600; }

/* ======================= HOW TRUVEIL WORKS · PIPELINE ======================= */
.pipeline { background: radial-gradient(900px 560px at 50% 0%, rgba(47,107,255,.06), transparent 62%); }

/* Color tokens for the pipeline moats/nodes */
.pipeline {
  --opt: #2f6bff;    /* optical = blue */
  --aco: #12a06a;    /* acoustic = teal/green */
  --ml:  #7a5bc8;    /* ML = purple */
  --cry: #c8971f;    /* crypto = gold */
  --frz: #e0453e;    /* freeze = red */
}

.pipe-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.pipe-legend .lg {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 6px 13px; border-radius: 22px; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow-sm);
}
.lg-opt { color: var(--opt); border-color: rgba(47,107,255,.35); }
.lg-aco { color: var(--aco); border-color: rgba(18,160,106,.35); }
.lg-ml  { color: var(--ml);  border-color: rgba(122,91,200,.35); }
.lg-crypto { color: var(--cry); border-color: rgba(200,151,31,.4); }
.lg-freeze { color: var(--frz); border-color: rgba(224,69,62,.35); }

/* Pipeline layout: stages separated by animated connectors. Horizontal on
   wide screens, vertical stack on narrow ones. */
.pipe {
  display: flex; align-items: stretch; gap: 0; margin-top: 6px;
  overflow-x: auto; padding: 6px 2px 14px;
}
.stage {
  flex: 1 1 0; min-width: 210px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px 24px; position: relative; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.stage:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stage-num {
  position: absolute; top: 16px; right: 18px; font-family: var(--serif);
  font-size: 22px; font-weight: 700; color: var(--blue); opacity: .28;
}
.stage-ico { font-size: 30px; line-height: 1; }
.stage-ico .seal-mini svg { filter: drop-shadow(0 3px 8px rgba(200,151,31,.4)); }
.stage h3 { font-family: var(--serif); font-size: 22px; margin: 0; font-weight: 700; color: var(--navy); }
.stage-cap { font-size: 13px; color: var(--ink-2); margin: 0; }
.stage-cap em, .stage-cap b { color: var(--navy); font-style: normal; font-weight: 600; }

/* Stage accent bars (top border tint by role) */
.stage::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 3px; background: var(--blue); opacity: .8;
}
.stage-bind::before { background: linear-gradient(90deg, var(--opt), var(--aco)); }
.stage-monitor::before { background: linear-gradient(90deg, var(--blue), var(--ml)); }
.stage-attest::before { background: var(--cry); }
.stage-redeem::before { background: linear-gradient(90deg, var(--aco), var(--frz)); }

/* --- animated connectors with traveling pulse --- */
.connector {
  flex: 0 0 46px; align-self: center; height: 4px; position: relative;
  background: linear-gradient(90deg, rgba(47,107,255,.15), rgba(47,107,255,.35));
  border-radius: 4px; margin: 0 -2px;
}
.connector .pulse {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--blue); box-shadow: 0 0 12px 2px rgba(47,107,255,.7);
  animation: pipeflow 2.4s var(--ease) infinite;
}
.connector:nth-of-type(4) .pulse { animation-delay: .3s; }
.connector:nth-of-type(6) .pulse { animation-delay: .6s; }
.connector:nth-of-type(8) .pulse { animation-delay: .9s; }
@keyframes pipeflow {
  0%   { left: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --- BIND: the two prominent physics moats --- */
.moat-pair { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
.moat-chip {
  flex: 1; border-radius: 12px; padding: 12px 12px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line);
  position: relative;
}
.moat-chip .mc-ico { font-size: 22px; }
.moat-chip b { font-size: 13px; color: var(--navy); }
.moat-chip small { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.moat-optical {
  border-color: rgba(47,107,255,.4); background: rgba(47,107,255,.06);
  box-shadow: 0 0 0 1px rgba(47,107,255,.14), 0 0 22px rgba(47,107,255,.12);
  animation: glowOpt 3.4s ease-in-out infinite;
}
.moat-optical b { color: var(--opt); }
.moat-acoustic {
  border-color: rgba(18,160,106,.4); background: rgba(18,160,106,.06);
  box-shadow: 0 0 0 1px rgba(18,160,106,.14), 0 0 22px rgba(18,160,106,.12);
  animation: glowAco 3.4s ease-in-out infinite; animation-delay: .5s;
}
.moat-acoustic b { color: var(--aco); }
@keyframes glowOpt {
  0%,100% { box-shadow: 0 0 0 1px rgba(47,107,255,.14), 0 0 18px rgba(47,107,255,.10); }
  50%     { box-shadow: 0 0 0 1px rgba(47,107,255,.30), 0 0 30px rgba(47,107,255,.28); }
}
@keyframes glowAco {
  0%,100% { box-shadow: 0 0 0 1px rgba(18,160,106,.14), 0 0 18px rgba(18,160,106,.10); }
  50%     { box-shadow: 0 0 0 1px rgba(18,160,106,.30), 0 0 30px rgba(18,160,106,.28); }
}
.moat-fuse { display: flex; align-items: center; justify-content: center; }
.fuse-plus {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--navy);
  writing-mode: vertical-rl; text-orientation: mixed; opacity: .7;
}

/* --- MONITOR: hash-chain + prominent ML node --- */
.mon-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mon-chip {
  border-radius: 12px; padding: 11px 13px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.mon-chip .mc-ico { font-size: 18px; }
.mon-chip b { font-size: 13px; color: var(--navy); }
.mon-chip small { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.mon-chain { border-color: rgba(47,107,255,.3); background: rgba(47,107,255,.05); }
.mon-ml {
  border-color: rgba(122,91,200,.42); background: rgba(122,91,200,.07);
  box-shadow: 0 0 0 1px rgba(122,91,200,.14), 0 0 22px rgba(122,91,200,.14);
  animation: glowMl 3.4s ease-in-out infinite; animation-delay: .9s;
}
.mon-ml b { color: var(--ml); }
.mon-ml .ml-brain { animation: mlpulse 2.6s ease-in-out infinite; display: inline-block; }
@keyframes glowMl {
  0%,100% { box-shadow: 0 0 0 1px rgba(122,91,200,.14), 0 0 18px rgba(122,91,200,.12); }
  50%     { box-shadow: 0 0 0 1px rgba(122,91,200,.32), 0 0 30px rgba(122,91,200,.30); }
}
@keyframes mlpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* --- ATTEST: crypto badges --- */
.attest-badges { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.attest-badges .ab {
  font-size: 12px; font-weight: 600; color: #7a5c10; letter-spacing: .01em;
  background: linear-gradient(180deg, #fffdf6, #fff7e6);
  border: 1px solid rgba(200,151,31,.4); border-radius: 10px; padding: 7px 11px;
}

/* --- REDEEM: the match gate --- */
.gate { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.gate-branch {
  border-radius: 12px; padding: 11px 13px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.gate-branch .gb-ico { font-size: 17px; }
.gate-branch b { font-size: 13px; letter-spacing: .03em; }
.gate-branch small { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.gate-match { border-color: rgba(18,160,106,.4); background: rgba(18,160,106,.06); }
.gate-match b { color: var(--green); }
.gate-freeze {
  border-color: rgba(224,69,62,.42); background: rgba(224,69,62,.06);
  animation: glowFrz 2.6s ease-in-out infinite;
}
.gate-freeze b { color: var(--red); }
.gate-freeze small em { color: var(--red); font-style: normal; font-weight: 700; }
@keyframes glowFrz {
  0%,100% { box-shadow: 0 0 0 1px rgba(224,69,62,.10), 0 0 14px rgba(224,69,62,.10); }
  50%     { box-shadow: 0 0 0 1px rgba(224,69,62,.30), 0 0 26px rgba(224,69,62,.28); }
}

.pipe-foot {
  font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 21px);
  color: var(--ink-2); max-width: 820px; margin: 26px auto 0; text-align: center;
}
.pipe-foot em { color: var(--navy); }

/* ======================= WHAT WE PROTECT · VERTICALS ======================= */
.protect { background: radial-gradient(840px 520px at 20% 0%, rgba(47,107,255,.05), transparent 60%); }
.verticals { display: flex; flex-direction: column; gap: 34px; margin: 44px 0 40px; }
.vert { }
.vert-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline);
}
.vert-ico {
  font-size: 22px; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-wash); border: 1px solid rgba(47,107,255,.24); color: var(--navy);
}
.vert-title { font-family: var(--serif); font-size: 23px; margin: 0; font-weight: 700; color: var(--navy); }
.vert-modeled { color: var(--blue); font-size: .62em; font-weight: 700; letter-spacing: .02em; }
.vert-modality {
  margin-left: auto; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 6px 13px;
  box-shadow: var(--shadow-sm);
}

.vex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vex-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.vex-card.in { opacity: 1; transform: none; }
.vex-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.vex-media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  display: flex; align-items: center; justify-content: center;
}
.vex-img { width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .5s var(--ease); }
.vex-card:hover .vex-img { transform: scale(1.04); }
/* Fallback tile when a PNG is missing: show the vertical emoji big + centered. */
.vex-media[data-emoji]::after {
  content: attr(data-emoji); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 72px;
  color: var(--ink-3);
}
.vex-img-fallback { display: none; }

.vex-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vex-name {
  font-family: var(--serif); font-size: 15px; font-weight: 700; margin: 0; line-height: 1.28;
  color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.vex-value { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--navy);
  letter-spacing: -.01em; line-height: 1; }
.vex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.vex-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--blue);
  background: var(--blue-wash); border: 1px solid rgba(47,107,255,.24);
  border-radius: 20px; padding: 4px 9px;
}

/* Capability verticals (lending / evidence) */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.cap-card {
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cap-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.cap-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.cap-ico {
  font-size: 24px; width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-wash); border: 1px solid rgba(47,107,255,.24); color: var(--navy);
}
.cap-head h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 2px; font-weight: 700; color: var(--navy); }
.cap-modeled { color: var(--blue); font-size: .6em; font-weight: 700; }
.cap-modality { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.cap-lede { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.cap-scenarios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cap-scenarios li {
  position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-2);
}
.cap-scenarios li::before {
  content: "→"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700;
}
.cap-scenarios li em { color: var(--navy); font-style: normal; font-weight: 700; }

.protect-disclaimer {
  margin-top: 30px; font-size: 12.5px; color: var(--ink-2); text-align: center;
  max-width: 760px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.protect-disclaimer em { color: var(--navy); font-style: italic; }

/* ======================= HOME · THE TECHNOLOGY ======================= */
.tech { background: linear-gradient(180deg, #ffffff, #f7f9fd); }
.tech-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px;
  align-items: start;
}
.tech-card {
  background: #ffffff; border: 1px solid var(--line); border-radius: 16px;
  padding: 28px 26px; position: relative;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.tech-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.tech-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tech-ico {
  flex: none; color: var(--blue); display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 13px;
  border: 1px solid rgba(47,107,255,.24); background: var(--blue-wash);
}
.tech-ico-gold {
  color: var(--gold); border-color: rgba(200,151,31,.4);
  background: linear-gradient(180deg, #fffdf6, #fff6df);
}
.tech-eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 3px;
}
.tech-title { font-family: var(--serif); font-size: 22px; margin: 0; font-weight: 700; color: var(--navy); }
.tech-lead { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; line-height: 1.55; }
.tech-lead em { color: var(--navy); font-style: normal; font-weight: 600; }
.tech-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.tech-list li { position: relative; padding-left: 20px; }
.tech-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
.tech-patent .tech-list li::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(200,151,31,.12); }
.tech-list li b { display: block; color: var(--navy); font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.tech-list li small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.tech-foot {
  margin: auto 0 0; padding-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}
.tech-live { color: var(--green); font-weight: 700; letter-spacing: .02em; }
.tech-fine { font-style: italic; }
.tech-patent {
  border-color: rgba(200,151,31,.34);
  background: linear-gradient(180deg, #fffdf7, #ffffff);
}
.tech-patent::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: radial-gradient(460px 200px at 100% 0%, rgba(200,151,31,.08), transparent 70%);
}
.tech-patent > * { position: relative; }

/* Subtle icon motion — auto-stilled by the global reduced-motion reset. */
.tech-lock { animation: techLock 4.5s var(--ease) infinite; transform-origin: 20px 25px; }
@keyframes techLock { 0%,72%,100% { transform: none; } 80%,92% { transform: translateY(-1px); } }
.tech-node { animation: techPulse 3.2s ease-in-out infinite; transform-origin: 26px 20px; }
@keyframes techPulse { 0%,100% { opacity: .18; transform: scale(.7); } 50% { opacity: .55; transform: scale(1); } }
.tech-seal { animation: techSpin 22s linear infinite; transform-origin: 20px 18px; stroke-dasharray: 3 3; }
@keyframes techSpin { to { transform: rotate(360deg); } }

@media (max-width: 940px) { .tech-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOME · "UNDER THE HOOD" ANIMATED TECH DIAGRAM
   ------------------------------------------------------------
   Pure inline SVG + CSS keyframes on one shared 10s master loop.
   Calm/premium — shows crypto + ML working together end to end:
   fingerprint → SHA-256 chain (tamper flashes red) → ML soft-flag
   (amber, human review) → Merkle root + gold Ed25519 seal +
   public-anchor pin. Static under prefers-reduced-motion.
   ============================================================ */
.uh-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center; gap: 6px;
  margin: 46px 0 12px; padding: 26px 22px;
  background: linear-gradient(180deg, #ffffff, #f7f9fd);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm);
}
.uh-step { text-align: center; padding: 6px 4px; }
.uh-icons { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.uh-emo { filter: saturate(1.05); }
.uh-emo-a { margin-left: 4px; }
.uh-svg { width: 100%; height: auto; max-width: 132px; margin: 0 auto; display: block; }
.uh-cap { margin-top: 8px; }
.uh-cap b { display: block; color: var(--navy); font-size: 13px; font-weight: 700; }
.uh-cap small { display: block; color: var(--ink-2); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.uh-hash { fill: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.uh-flag-t { fill: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 800; }

/* connectors between steps — a soft blue flow travels along each */
.uh-arrow { position: relative; width: 34px; height: 2px; align-self: center; margin-top: -14px;
  background: linear-gradient(90deg, rgba(47,107,255,.14), rgba(47,107,255,.34)); border-radius: 2px; }
.uh-flow {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(47,107,255,.6);
  animation: uhFlow 10s linear infinite;
}
@keyframes uhFlow { 0%,92% { left: 0; opacity: 0; } 4% { opacity: 1; } 40% { left: calc(100% - 8px); opacity: 1; } 46%,100% { left: calc(100% - 8px); opacity: 0; } }

.uh-legend { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.uh-legend em { color: var(--navy); font-style: normal; font-weight: 600; }

/* --- STEP 1 · fingerprint: optical scan sweep + acoustic rings --- */
.uh-scan { animation: uhScan 10s ease-in-out infinite; }
@keyframes uhScan {
  0%,2% { transform: translateY(0); opacity: 0; }
  6% { opacity: .9; } 14% { transform: translateY(36px); opacity: .9; }
  18%,100% { transform: translateY(36px); opacity: 0; }
}
.uh-ring { transform-origin: 45px 70px; opacity: 0; }
.uh-ring.r1 { animation: uhRing 10s ease-out infinite; }
.uh-ring.r2 { animation: uhRing 10s ease-out infinite; animation-delay: .35s; }
@keyframes uhRing { 0%,6% { opacity: 0; transform: scale(.4); } 12% { opacity: .7; } 22% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; transform: scale(2.2); } }

/* --- STEP 2 · chain: blocks draw in, then a tamper flashes red --- */
.uh-block { opacity: 0; transform-origin: center; }
.uh-block.b1 { animation: uhBlock 10s ease-out infinite; animation-delay: 1.6s; }
.uh-block.b2 { animation: uhBlock 10s ease-out infinite; animation-delay: 1.9s; }
.uh-block.b3 { animation: uhBlock 10s ease-out infinite, uhTamper 10s ease-in-out infinite; animation-delay: 2.2s, 0s; }
@keyframes uhBlock {
  0%,2% { opacity: 0; transform: translateY(-4px) scale(.8); }
  8%,100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* the last block (and by implication its later links) flashes red on the tamper beat */
@keyframes uhTamper {
  0%,58% { stroke: #2f6bff; fill: #2f6bff; }
  63%,70% { stroke: #e0453e; fill: #e0453e; }
  76%,100% { stroke: #2f6bff; fill: #2f6bff; }
}

/* --- STEP 3 · ML: an amber soft-flag pulses (human review) --- */
.uh-flag { opacity: 0; transform-origin: 66px 45px; animation: uhFlag 10s ease-in-out infinite; }
.uh-flag-t { opacity: 0; animation: uhFlagT 10s ease-in-out infinite; }
@keyframes uhFlag { 0%,40% { opacity: 0; transform: scale(.7); } 48% { opacity: 1; transform: scale(1.08); } 56% { transform: scale(1); } 82% { opacity: 1; } 90%,100% { opacity: 0; transform: scale(1); } }
@keyframes uhFlagT { 0%,44% { opacity: 0; } 50%,86% { opacity: 1; } 92%,100% { opacity: 0; } }

/* --- STEP 4 · Merkle root rises, gold seal strokes on, anchor drops --- */
.uh-root { opacity: 0; transform-origin: 35px 37px; animation: uhRoot 10s ease-out infinite; }
@keyframes uhRoot { 0%,52% { opacity: 0; transform: translateY(8px) scale(.7); } 60%,100% { opacity: 1; transform: translateY(0) scale(1); } }
.uh-seal { transform-origin: 80px 40px; opacity: .25; animation: uhSeal 10s ease-in-out infinite; }
@keyframes uhSeal { 0%,60% { opacity: .25; transform: scale(.92); } 70% { opacity: 1; transform: scale(1.06); } 78%,100% { opacity: 1; transform: scale(1); } }
.uh-seal-check { stroke-dasharray: 26; stroke-dashoffset: 26; animation: uhSealCheck 10s ease-in-out infinite; }
@keyframes uhSealCheck { 0%,64% { stroke-dashoffset: 26; } 74%,100% { stroke-dashoffset: 0; } }
.uh-anchor { opacity: 0; transform-origin: 80px 58px; animation: uhAnchor 10s ease-out infinite; }
@keyframes uhAnchor { 0%,80% { opacity: 0; transform: translateY(-6px); } 88%,100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 940px) {
  .uh-diagram { grid-template-columns: 1fr; gap: 14px; }
  .uh-arrow { width: 2px; height: 26px; margin: -4px auto; justify-self: center;
    background: linear-gradient(180deg, rgba(47,107,255,.14), rgba(47,107,255,.34)); }
  .uh-flow { animation: none; opacity: 1; left: 50%; margin-left: -4px; top: 0; }
}

/* ============================================================
   HOME · NEUTRALITY CALLOUT — "we handle the software, not the vault"
   ============================================================ */
.neutrality {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  margin: 40px 0 8px; padding: 26px 28px;
  background: linear-gradient(180deg, #f4f7fc, #ffffff);
  border: 1px solid rgba(47,107,255,.24); border-left: 4px solid var(--blue);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.neu-badge {
  align-self: start; white-space: nowrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  color: var(--blue); background: var(--blue-wash);
  border: 1px solid rgba(47,107,255,.3); border-radius: 20px; padding: 6px 13px;
}
.neu-title { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); color: var(--navy); margin: 2px 0 10px; font-weight: 700; }
.neu-lead { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0 0 8px; }
.neu-lead:last-child { margin-bottom: 0; }
.neu-lead b { color: var(--navy); font-weight: 700; }
.neu-lead em { color: var(--blue); font-style: normal; font-weight: 600; }
@media (max-width: 680px) { .neutrality { grid-template-columns: 1fr; gap: 14px; } }

/* ============================================================
   HOME · INSURANCE & AUDITS BENEFIT
   ============================================================ */
.ins-benefit {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  margin: 26px 0 0; padding: 24px 26px;
  background: linear-gradient(180deg, #fffdf7, #ffffff);
  border: 1px solid rgba(200,151,31,.34); border-left: 4px solid var(--gold);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.ins-ico {
  font-size: 26px; width: 52px; height: 52px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fffdf6, #fff6df); border: 1px solid rgba(200,151,31,.4);
}
.ins-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7a5c10; font-weight: 800; margin-bottom: 4px; }
.ins-title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 25px); color: var(--navy); margin: 0 0 8px; font-weight: 700; }
.ins-lead { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0; }
.ins-lead em { color: var(--navy); font-style: normal; font-weight: 600; }
@media (max-width: 680px) { .ins-benefit { grid-template-columns: 1fr; gap: 12px; } }

/* ======================= HOME · TRUST METRICS BAND ======================= */
.trust-band { padding: 56px 0; background: linear-gradient(180deg, #f4f7fc, #ffffff); }
.trust-band.section + .section { border-top: 1px solid var(--hairline); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-stat {
  text-align: center; padding: 22px 16px; background: #ffffff;
  border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.trust-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lite)); opacity: .9;
}
.trust-num {
  font-family: var(--serif); font-weight: 800; color: var(--navy);
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1; letter-spacing: -.01em;
}
.trust-label { color: var(--ink-2); font-size: 13.5px; margin-top: 10px; line-height: 1.4; }

/* ======================= HOME · TEASER + FEATURE TILES ======================= */
.home-teaser { padding-top: 80px; }
.inline-link { color: var(--blue); font-weight: 600; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }
.home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.home-tile {
  display: flex; flex-direction: column; gap: 8px;
  background: #ffffff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.home-tile:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.home-tile .ht-ico {
  font-size: 26px; width: 50px; height: 50px; border-radius: 12px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-wash); border: 1px solid rgba(47,107,255,.24);
}
.home-tile h3 { font-family: var(--serif); font-size: 20px; margin: 0; font-weight: 700; color: var(--navy); }
.home-tile p { color: var(--ink-2); font-size: 13.5px; margin: 0; flex: 1; }
.home-tile .ht-go { color: var(--blue); font-weight: 700; font-size: 13px; margin-top: 6px; }

/* ======================= CONTACT · PILOT FORM ======================= */
.pilot-form {
  max-width: 640px; margin: 36px auto 0; text-align: left;
  display: flex; flex-direction: column; gap: 16px;
}
/* Visible white card with a blue accent so the form reads as a real,
   intentional panel against the near-white contact section. */
.pf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 16px;
  padding: 30px 30px 28px;
  box-shadow: var(--shadow-md);
}
.pf-cardhead {
  font-family: var(--serif); font-weight: 700; color: var(--navy);
  font-size: 18px; margin: -4px 0 6px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field > span {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); font-weight: 700;
}
.pf-field input, .pf-field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #f5f8ff; border: 1.5px solid rgba(47,107,255,.28); border-radius: 10px;
  padding: 12px 14px; width: 100%; resize: vertical;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.pf-field input::placeholder, .pf-field textarea::placeholder { color: var(--ink-3); }
.pf-field input:hover, .pf-field textarea:hover { border-color: var(--blue-lite); }
.pf-field input:focus, .pf-field textarea:focus {
  outline: none; background: #ffffff;
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash);
}
.pf-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 10px; }
.pf-actions .btn { min-width: 240px; justify-content: center; }
.pf-note { font-size: 12px; color: var(--ink-2); text-align: center; max-width: 460px; }

/* ======================= PATENT-PENDING BADGE ======================= */
.patent-badge {
  display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #7a5c10;
  background: linear-gradient(180deg, #fffdf6, #fff2cf);
  border: 1px solid rgba(200,151,31,.5); border-radius: 20px; padding: 3px 10px;
  vertical-align: middle; margin-right: 8px;
}
.eyebrow .patent-badge { margin-right: 10px; }

/* ======================= HOME · PROBLEM → SOLVE ======================= */
.solve { background: linear-gradient(180deg, #ffffff, #f7f9fd); }
.solve-flow {
  display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 24px; align-items: stretch;
  margin-top: 40px;
}
.solve-problem, .solve-answer {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 28px;
  box-shadow: var(--shadow-sm);
}
.solve-problem { border-color: rgba(224,69,62,.28); background: linear-gradient(180deg,#fff,#fff7f6); }
.solve-answer { border-color: rgba(18,160,106,.30); background: linear-gradient(180deg,#fff,#f5fdf9); }
.sp-tag, .sa-tag {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  margin-bottom: 16px;
}
.sp-tag { color: var(--red); }
.sa-tag { color: var(--green); }
.sp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sp-list li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.sp-list li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }
.sp-list li b, .sa-steps li b { color: var(--navy); }
.sa-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.sa-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.sa-n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  background: linear-gradient(180deg, var(--blue-lite), var(--blue)); color: #fff;
  box-shadow: 0 4px 12px rgba(47,107,255,.3);
}
.solve-arrow { align-self: center; font-size: 34px; color: var(--blue); font-weight: 700; }

/* Full-width variants: the problem "gap" list and the 3-step answer now stand
   on their own (the old 2-column solve-flow was split into separate sections). */
.solve-problem-full, .solve-answer-full { margin-top: 40px; }
.solve-solution { background: linear-gradient(180deg, #ffffff, #f5fdf9); }

/* ======================= HOW IT WORKS · STEP PLAYER ======================= */
.stepdemo { background: radial-gradient(900px 560px at 50% 0%, rgba(47,107,255,.06), transparent 62%); }
.player {
  margin-top: 40px; background: linear-gradient(180deg,#fff,#fbfcfe);
  border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 20px;
  padding: 20px 26px 26px; box-shadow: var(--shadow-md);
}
/* Live status bar */
.player-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.player-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  border: 1px solid rgba(47,107,255,.35); background: var(--blue-wash);
  border-radius: 20px; padding: 4px 11px;
}
.player-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 8px var(--blue); animation: blink 1.6s infinite; }
.player-status { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-status::before { content: "› "; color: var(--blue); }
/* Progress bar */
.player-progress { height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; margin-bottom: 20px; }
.player-progress-fill { display: block; height: 100%; width: 20%; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lite)); transition: width .55s var(--ease); }
.player-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }
.player-dot {
  width: 34px; height: 6px; border-radius: 6px; border: 0; cursor: pointer; padding: 0;
  background: var(--paper-3); transition: background .3s, transform .2s;
}
.player-dot:hover { transform: scaleY(1.4); }
.player-dot.done { background: var(--blue-lite); }
.player-dot.active { background: var(--blue); box-shadow: 0 0 10px rgba(47,107,255,.5); }
.player-stage {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center;
  min-height: 260px;
}
/* Cinematic "camera" ease on step change: a soft slide + settle. */
.player-stage.pv-slide { animation: pvSlide .55s var(--ease); }
@keyframes pvSlide {
  0%   { opacity: .25; transform: translateX(16px) scale(.985); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* The stage is a framed demo-player screen: rounded, soft shadow, a faint
   animated backdrop grid + drifting gradient so it reads as a polished
   film frame rather than a diagram. */
.player-visual {
  min-height: 236px; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(47,107,255,.07), transparent 60%),
    linear-gradient(180deg,#f9fbff,#eef2f9);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 20px; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm);
}
/* Backdrop grid — decorative, drifts slowly behind the actor. */
.player-visual::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(18,39,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,39,74,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 40%, transparent 78%);
  animation: pvGrid 16s linear infinite;
}
@keyframes pvGrid { to { background-position: 26px 26px, 26px 26px; } }
/* Cinematic vignette + top light. */
.player-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(460px 220px at 50% -6%, rgba(47,107,255,.08), transparent 72%),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(18,39,74,.06));
}
.player-visual .pv-scene { position: relative; z-index: 2; }
.player-visual.pv-in { animation: pvIn .6s var(--ease); }
@keyframes pvIn { from { opacity: 0; transform: scale(.94); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
/* "Step N of 5" gets a soft pulse when it changes (class toggled in JS). */
.player-count { color: var(--ink-3); font-size: 12.5px; font-weight: 600; transition: color .3s; }
.player-count.pv-bump { animation: pvCount .5s var(--ease); }
@keyframes pvCount { from { opacity: .25; transform: translateY(-4px); color: var(--blue); } to { opacity: 1; transform: none; } }
.player-why { color: var(--ink); font-size: 14px; line-height: 1.55; margin: 14px 0 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--blue-wash); border: 1px solid rgba(47,107,255,.16); }
.player-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.player-points li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.player-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800;
  width: 16px; height: 16px; font-size: 12px; line-height: 16px; text-align: center;
}
.player-who {
  display: inline-block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px;
}
.player-who.you { color: var(--blue); background: var(--blue-wash); border: 1px solid rgba(47,107,255,.3); }
.player-who.truveil { color: #fff; background: var(--navy); border: 1px solid var(--navy); }
.player-title { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--navy); margin: 0 0 12px; line-height: 1.15; }
.player-desc { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.player-controls { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.player-controls .btn { padding: 11px 22px; border-radius: 12px; }
.player-count { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.stepdemo-foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--ink-2); }

/* --- Step player scenes: cinematic inline-SVG "film frames".
   Each scene plays as a single ~2.6s "take" (forwards, one-shot) so the
   on-screen action lines up with the audio cues and the auto-advance. The
   "You do" steps star a consistent human actor; "Truveil does" steps use a
   clean system look. All motion honors prefers-reduced-motion below. --- */
.pv-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.pv-svg { width: 100%; max-width: 300px; height: auto; }
.pv-svg-wide { max-width: 340px; }
.pv-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pv-tag {
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; background: #fff;
}
.pv-tag.opt { color: var(--blue); border-color: rgba(47,107,255,.3); }
.pv-tag.aco, .pv-tag.green { color: var(--green); border-color: rgba(18,160,106,.35); }
.pv-tag.chain, .pv-tag.sig { color: var(--navy); }
.pv-tag.ml, .pv-tag.gold { color: var(--gold); border-color: rgba(200,151,31,.35); }

/* ---- STEP 1 · a person photographs, then taps the slab ---- */
/* the item settles onto the table */
.pvc-item { transform-box: fill-box; transform-origin: center; animation: pvcItem .6s var(--ease) both; }
@keyframes pvcItem { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 100% { opacity: 1; transform: none; } }
/* the phone rises into frame from the lower-left */
.pvc-phone { transform-box: fill-box; transform-origin: bottom left; animation: pvcPhone 1.1s var(--ease) both; }
@keyframes pvcPhone { 0% { opacity: 0; transform: translate(-24px,54px) rotate(8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* the focus reticle locks (scales in, then settles) */
.pvc-reticle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvcReticle 1.4s var(--ease) .5s both; }
@keyframes pvcReticle { 0% { opacity: 0; transform: scale(1.5); } 40% { opacity: 1; } 55% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
/* full-frame shutter flash */
.pvc-flash { opacity: 0; animation: pvcFlash 2.6s ease-out .6s both; }
@keyframes pvcFlash { 0% { opacity: 0; } 3% { opacity: .85; } 12% { opacity: 0; } 100% { opacity: 0; } }
/* the tapping hand comes down, taps, lifts */
.pvc-taphand { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvcTapHand 2.6s var(--ease) 1s both; }
@keyframes pvcTapHand {
  0% { opacity: 0; transform: translate(150px,-80px) rotate(150deg); }
  25% { opacity: 1; }
  42% { transform: translate(150px,-44px) rotate(150deg); }
  52% { transform: translate(150px,-52px) rotate(150deg); }
  70%,100% { opacity: 0; transform: translate(150px,-80px) rotate(150deg); }
}
/* concentric tap sound rings ripple out after the tap lands */
.pvc-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pvcRing 1.4s ease-out 1.15s both; }
.pvc-ring.d2 { animation-delay: 1.32s; } .pvc-ring.d3 { animation-delay: 1.5s; }
@keyframes pvcRing { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(4); } }

/* ---- STEP 2 · optical scan + acoustic wave → one signature ---- */
.pvf-scan { animation: pvfScan 1.4s var(--ease) both; }
@keyframes pvfScan { 0% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(108px); opacity: 0; } }
.pvf-glow { transform-box: fill-box; animation: pvfGlowM 1.4s var(--ease) both; }
@keyframes pvfGlowM { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(96px); opacity: 0; } }
.pvf-wave { stroke-dasharray: 220; stroke-dashoffset: 220; animation: pvfWave 1.3s var(--ease) .3s both; }
@keyframes pvfWave { to { stroke-dashoffset: 0; } }
.pvf-flow { stroke-dasharray: 6 5; opacity: 0; animation: pvfFlow 1s linear .9s infinite, pvfFade .3s .9s both; }
@keyframes pvfFlow { to { stroke-dashoffset: -22; } }
@keyframes pvfFade { to { opacity: 1; } }
.pvf-r { stroke-dasharray: 260; stroke-dashoffset: 260; animation: pvfDraw 1.4s var(--ease) 1s both; }
.pvf-r.r2 { animation-delay: 1.08s; } .pvf-r.r3 { animation-delay: 1.16s; } .pvf-r.r4 { animation-delay: 1.24s; }
.pvf-r.r5 { animation-delay: 1.1s; } .pvf-r.r6 { animation-delay: 1.18s; } .pvf-r.r7 { animation-delay: 1.26s; }
@keyframes pvfDraw { to { stroke-dashoffset: 0; } }
.pvf-hash { font-family: var(--mono); font-size: 12px; fill: var(--gold); opacity: 0; animation: pvfHash .7s ease-out 2s both; }
@keyframes pvfHash { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* ---- STEP 3 · a person opens the drawer; chain grows; ML flags ---- */
.pvl-drawer { transform-box: view-box; transform-origin: center; animation: pvlDrawer 2.4s var(--ease) both; }
@keyframes pvlDrawer { 0% { transform: translateX(0); } 30% { transform: translateX(-10px); } 60%,100% { transform: translateX(-10px); } }
.pvl-hand { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvlHand 2.4s var(--ease) both; }
@keyframes pvlHand { 0% { opacity: 0; transform: translate(88px,132px) rotate(-90deg) scale(.42); }
  20% { opacity: 1; } 60%,100% { opacity: 1; transform: translate(78px,132px) rotate(-90deg) scale(.42); } }
.pvl-block { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: pvlBlock .5s var(--ease) forwards; animation-delay: var(--d); }
@keyframes pvlBlock { 0% { opacity: 0; transform: translateY(-10px) scale(.6); } 60% { transform: translateY(2px) scale(1.06); } 100% { opacity: 1; transform: none; } }
.pvl-block.flag rect { animation: pvlFlagPulse 1.4s ease-in-out 1.4s infinite; }
@keyframes pvlFlagPulse { 0%,100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
.pvl-hash { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.pvl-link { opacity: 0; animation: pvlLink .4s var(--ease) forwards; animation-delay: var(--d); }
@keyframes pvlLink { to { opacity: 1; } }
.pvl-eye { opacity: 0; animation: pvlEyeIn .5s var(--ease) 1.2s both; }
@keyframes pvlEyeIn { to { opacity: 1; } }
.pvl-pupil { animation: pvlLook 3.2s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pvlLook { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.pvl-flagline { opacity: 0; animation: pvfFade .5s 1.6s both, pvlBeam 1.2s linear 1.6s infinite; }
@keyframes pvlBeam { to { stroke-dashoffset: -14; } }

/* ---- STEP 4 · Merkle fold → gold seal → public anchor lock ---- */
.pva-leaf { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: pvaLeaf .5s var(--ease) forwards; animation-delay: var(--d); }
@keyframes pvaLeaf { 0% { opacity: 0; transform: translateY(12px) scale(.7); } 100% { opacity: 1; transform: none; } }
.pva-branch { stroke-dasharray: 90; stroke-dashoffset: 90; animation: pvfDraw .5s var(--ease) forwards; animation-delay: var(--d); }
.pva-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pvaLeaf .5s var(--ease) forwards; animation-delay: var(--d); }
.pva-root { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pvaRoot .55s var(--ease) .95s forwards; }
@keyframes pvaRoot { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 60% { transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
.pva-root-t { font-family: var(--mono); font-size: 9px; fill: var(--navy); opacity: 0; animation: pvfFade .4s 1.2s both; }
.pva-sealring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvaSealRing .8s linear 1.1s both; }
@keyframes pvaSealRing { 0% { opacity: 0; transform: rotate(-40deg) scale(.7); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
.pva-seal { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: pvaSeal .6s var(--ease) 1.2s forwards; }
@keyframes pvaSeal { 0% { opacity: 0; transform: scale(.4) rotate(-25deg); } 70% { transform: scale(1.08) rotate(4deg); } 100% { opacity: 1; transform: none; } }
.pva-check { stroke-dasharray: 46; stroke-dashoffset: 46; animation: pvfDraw2 .6s var(--ease) 1.6s forwards; }
@keyframes pvfDraw2 { to { stroke-dashoffset: 0; } }
.pva-anchor { opacity: 0; transform-box: fill-box; transform-origin: top center; animation: pvaAnchor .6s var(--ease) 2s forwards; }
@keyframes pvaAnchor { 0% { opacity: 0; transform: translateY(-12px); } 60% { transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.pva-shackle { transform-box: fill-box; transform-origin: center; animation: pvaShackle .3s var(--ease) 2.5s both; }
@keyframes pvaShackle { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
.pva-anchor-t { font-family: var(--mono); font-size: 8.5px; fill: var(--green); opacity: 0; animation: pvfFade .4s 2.4s both; }

/* ---- STEP 5 · redeem — two "takes": MATCH release / MISMATCH freeze ---- */
.pv-redeem { width: 100%; }
.pvr-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.pvr-take { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: #fff; opacity: 0; }
.pvr-take.match { border-color: rgba(18,160,106,.4); background: rgba(18,160,106,.05); animation: pvrIn .5s var(--ease) .1s both; }
.pvr-take.freeze { border-color: rgba(224,69,62,.42); background: rgba(224,69,62,.05); animation: pvrIn .5s var(--ease) .5s both; }
@keyframes pvrIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.pvr-txt b { display: block; font-size: 12.5px; }
.pvr-take.match .pvr-txt b { color: var(--green); }
.pvr-take.freeze .pvr-txt b { color: var(--red); }
.pvr-txt small { display: block; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.pvr-scan { animation: pvrScan 1s var(--ease) .3s both; }
.pvr-scan.match { animation-delay: .3s; } .pvr-scan.freeze { animation-delay: .7s; }
@keyframes pvrScan { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }
.pvr-hand { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvrHand 1s var(--ease) 1.4s both; }
@keyframes pvrHand { 0% { opacity: 0; transform: translate(74px,132px) scale(.30); } 100% { opacity: 1; transform: translate(74px,118px) scale(.30); } }
.pvr-seal { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvaSeal .5s var(--ease) 1s both; }
.pvr-take.freeze .pvr-seal { animation-delay: 1.3s; }
.pvr-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: pvfDraw2 .5s var(--ease) 1.3s forwards; }
.pvr-cross { stroke-dasharray: 40; stroke-dashoffset: 40; animation: pvfDraw2 .5s var(--ease) 1.6s forwards; }
/* the FREEZE stamp slams down and the whole take shakes */
.pvr-stamp { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pvrStamp .5s var(--ease) 1.9s both; }
@keyframes pvrStamp { 0% { opacity: 0; transform: translate(60px,96px) rotate(-11deg) scale(2.4); }
  70% { opacity: 1; transform: translate(60px,96px) rotate(-11deg) scale(.92); }
  100% { opacity: 1; transform: translate(60px,96px) rotate(-11deg) scale(1); } }
.pvr-stamp-t { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--red); }
.pvr-take.freeze { animation: pvrIn .5s var(--ease) .5s both, pvrShake .45s var(--ease) 2s; }
@keyframes pvrShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ======================= FEATURES · CARDS ======================= */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.feat-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.feat-card.in { opacity: 1; transform: none; }
.feat-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feat-head { display: flex; align-items: center; gap: 12px; }
.feat-ico {
  font-size: 22px; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-wash); border: 1px solid rgba(47,107,255,.24);
}
.feat-name { font-family: var(--serif); font-size: 18px; margin: 0; font-weight: 700; color: var(--navy); line-height: 1.2; }
.feat-what { color: var(--ink); font-size: 14px; margin: 0; font-weight: 600; }
.feat-diagram {
  height: 56px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.feat-example {
  font-size: 12.5px; color: var(--ink-2); margin-top: auto; line-height: 1.5;
  border-top: 1px solid var(--hairline); padding-top: 12px;
}
.fe-tag {
  display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--blue); margin-right: 6px;
}
/* mini feature diagrams */
.fd { display: flex; align-items: center; gap: 8px; }
.fd-grid { display: grid; grid-template-columns: repeat(3, 8px); gap: 2px; }
.fd-grid i { width: 8px; height: 8px; border-radius: 1px; background: var(--blue); }
.fd-grid i:nth-child(3n) { opacity: .35; }
.fd-item { font-size: 22px; }
.fd-wave svg { width: 90px; height: 26px; }
.fd-chain { display: flex; align-items: center; gap: 4px; }
.fd-blk { width: 16px; height: 16px; border-radius: 4px; background: var(--blue-wash); border: 1px solid var(--blue); }
.fd-lnk { font-size: 12px; }
.fd-seal, .fd-eye { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fd-badge {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 45% 38%, var(--gold-lite), var(--gold)); color: #201800; font-size: 16px;
}
.fd-seal small, .fd-eye small { font-size: 9.5px; color: var(--ink-2); font-weight: 700; }
.fd-flag { color: var(--gold) !important; }
.fd-anchor { font-size: 22px; }
.fd-keys { font-size: 20px; }
.fd-x { color: var(--red); font-weight: 800; }
.fd-live { font-size: 22px; }
.fd-code { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--blue);
  background: #fff; border: 1px solid var(--blue); border-radius: 5px; padding: 2px 6px; }

/* ======================= PRODUCTS ======================= */
.products { background: radial-gradient(840px 520px at 80% 0%, rgba(47,107,255,.05), transparent 60%); }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
.prod-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.prod-card.in { opacity: 1; transform: none; }
.prod-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.prod-media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f2f5fa);
  display: flex; align-items: center; justify-content: center;
}
.prod-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-emoji { font-size: 64px; color: var(--ink-3); }
.prod-media[data-emoji]::after { content: attr(data-emoji); font-size: 60px; color: var(--ink-3); }
.prod-status {
  position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px;
}
.prod-status.ship { color: #fff; background: var(--green); }
.prod-status.modeled { color: var(--navy); background: rgba(255,255,255,.9); border: 1px solid var(--line); }
.prod-body { padding: 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prod-head { display: flex; align-items: center; gap: 9px; }
.prod-ico { font-size: 20px; }
.prod-name { font-family: var(--serif); font-size: 18px; margin: 0; font-weight: 700; color: var(--navy); }
.prod-modality { font-size: 12px; color: var(--blue); font-weight: 700; }
.prod-example { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.prod-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-chip {
  font-size: 10px; font-weight: 700; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--hairline); border-radius: 20px; padding: 3px 8px;
}
.prod-test { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.prod-btn {
  flex: 1; font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer;
  border-radius: 9px; padding: 9px 8px; border: 1px solid var(--line); background: #fff;
  transition: transform .15s var(--ease), border-color .2s, box-shadow .2s, background .2s;
}
.prod-btn.genuine { color: var(--green); }
.prod-btn.fake { color: var(--red); }
.prod-btn.genuine:hover { border-color: var(--green); background: rgba(18,160,106,.06); box-shadow: 0 6px 14px rgba(18,160,106,.15); }
.prod-btn.fake:hover { border-color: var(--red); background: rgba(224,69,62,.06); box-shadow: 0 6px 14px rgba(224,69,62,.15); }
.prod-btn.active { transform: scale(.96); }
.prod-verdict { min-height: 18px; font-size: 12.5px; font-weight: 800; text-align: center; }
.prod-verdict.match { color: var(--green); }
.prod-verdict.mismatch { color: var(--red); }

/* ======================= PRICING ======================= */
.pricing { background: radial-gradient(760px 460px at 50% 0%, rgba(47,107,255,.06), transparent 62%); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.price-card.featured { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,107,255,.18), var(--shadow-md);
  background: linear-gradient(180deg, #fbfcff, #ffffff); }
.price-tag {
  display: inline-block; align-self: flex-start; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800; color: var(--blue);
  border: 1px solid rgba(47,107,255,.3); border-radius: 20px; padding: 4px 12px;
}
.price-name { font-family: var(--serif); font-size: 22px; margin: 0; font-weight: 700; color: var(--navy); }
.price-figure { font-family: var(--serif); font-weight: 800; font-size: 34px; color: var(--navy); line-height: 1; }
.price-figure span { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.price-sub { color: var(--ink-2); font-size: 14px; margin: 0; }
.price-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.price-list li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-2); }
.price-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.pilot-banner {
  margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: linear-gradient(180deg, #fffdf6, #fff8ea); border: 1px solid rgba(200,151,31,.4);
  border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.pilot-banner .pb-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.pilot-banner p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 640px; }
.pilot-banner p b { color: var(--navy); }

/* ======================= SCROLL REVEAL ======================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 92px; }
  .hero-cards { min-height: 380px; margin-top: 8px; }
  .moatlab-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .player-stage { grid-template-columns: 1fr; gap: 18px; }
  .price-grid { grid-template-columns: 1fr; }
  .solve-flow { grid-template-columns: 1fr; }
  .solve-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 940px) {
  .demo-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ml-grid { grid-template-columns: repeat(2, 1fr); }
  .moat-grid { grid-template-columns: repeat(2, 1fr); }
  .aud-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr; }
  .versus { grid-template-columns: 1fr; }
  .versus-arrow { transform: rotate(90deg); justify-self: center; }
  .anticheat { grid-template-columns: 1fr; }
  .beyond-grid { grid-template-columns: 1fr; }
  .coll-controls { flex-direction: column; align-items: stretch; }
  .hero-vault { opacity: .3; right: -30vw; }
  .gaps { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: 1fr; }
  .vex-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .home-tiles { grid-template-columns: repeat(2, 1fr); }

  /* Pipeline: stack vertically, connectors become vertical arrows. */
  .pipe { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .connector {
    flex: 0 0 34px; width: 4px; height: 34px; align-self: center; margin: -2px 0;
    background: linear-gradient(180deg, rgba(47,107,255,.15), rgba(47,107,255,.35));
  }
  .connector .pulse { top: 0; left: 50%; animation-name: pipeflowV; }
  @keyframes pipeflowV {
    0% { top: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}
/* Collapse the tab bar into the burger before the tabs would crowd. */
@media (max-width: 940px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column;
    background: rgba(255,255,255,.98); padding: 20px 28px; gap: 18px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); margin-left: 0;
  }
  .nav-links.open a::after { display: none; }
}
@media (max-width: 680px) {
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .section { padding: 82px 0; }
  .steps, .ml-grid, .moat-grid, .aud-grid { grid-template-columns: 1fr; }
  .gaps { grid-template-columns: 1fr; }
  .vex-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .home-tiles { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .pf-row { grid-template-columns: 1fr; }
  .meta-row code { max-width: 130px; }
  .hero-cards { min-height: 330px; }
  .hero-card { width: 150px; }
  .hero-card.hc-1 { width: 160px; }
  .hero-card.hc-3, .hero-card.hc-4 { width: 132px; }
}

/* ======================= ANIMATED EXPLAINER (living diagram) =======================
   A refined, minimal "promise → proof" visual. Two clean cards flank a single
   daily pulse that flows left → right. Motion is slow, staggered, and ease-in-out
   on one shared 9s master loop; under prefers-reduced-motion it settles to a
   clean static end-state (see the reduced-motion block far below).
   ================================================================================ */
.explainer { background: radial-gradient(900px 560px at 50% 0%, rgba(47,107,255,.035), transparent 64%); }
.explain-diagram {
  display: grid; grid-template-columns: 1fr 128px 1fr; gap: 0; align-items: stretch;
  margin-top: 52px;
}
.ex-col {
  background: #ffffff; border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 30px 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.ex-problem { border-color: rgba(224,69,62,.16); }
.ex-answer  { border-color: rgba(18,160,106,.18); }

/* refined monospace-ish channel labels */
.ex-tag {
  align-self: flex-start; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; border-radius: 6px; padding: 5px 11px; margin-bottom: 26px;
}
.ex-tag-red   { color: var(--red);   border: 1px solid rgba(224,69,62,.28);  background: rgba(224,69,62,.05); }
.ex-tag-green { color: var(--green); border: 1px solid rgba(18,160,106,.3);  background: rgba(18,160,106,.05); }

.ex-svg { width: 100%; height: auto; display: block; max-width: 380px; margin: 0 auto; }
.ex-svg .ex-label {
  fill: var(--ink-3); font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-weight: 600; font-size: 9px; letter-spacing: .14em;
}
.ex-freeze-t {
  fill: var(--red); font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-weight: 700; font-size: 10px; letter-spacing: .1em;
}

.ex-caps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ex-cap {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.35;
}
.ex-cap b { color: var(--navy); font-weight: 600; }
.ex-problem .ex-cap b { color: var(--red); }
.ex-answer  .ex-cap b { color: var(--green); }
.ex-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); transform: translateY(-1px);
}
.ex-dot-g { background: var(--green); }

/* --- MIDDLE · the single daily pulse, flowing left → right --- */
.ex-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ex-pulse-track {
  position: relative; height: 2px; width: 96px;
  background: linear-gradient(90deg, rgba(224,69,62,.18), rgba(47,107,255,.28), rgba(18,160,106,.22));
  border-radius: 2px;
}
.ex-pulse-dot {
  position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(47,107,255,.7);
  opacity: 0; animation: exPulse 4.5s cubic-bezier(.45,0,.35,1) infinite;
}
.ex-pulse-dot.d2 { animation-delay: 1.5s; }
.ex-pulse-dot.d3 { animation-delay: 3s; }
@keyframes exPulse {
  0%   { left: 0;    opacity: 0; transform: scale(.5); }
  14%  { opacity: 1; transform: scale(1); }
  86%  { opacity: 1; transform: scale(1); }
  100% { left: 100%; opacity: 0; transform: scale(.5); }
}
.ex-pulse-label {
  position: absolute; top: calc(50% + 16px); font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 9px; color: var(--blue); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}

/* ================= MOTION · one shared 9s master loop, gently staggered =================
   Beats roughly: 0–33% the three failures play sequentially on the left;
   33–100% the proof sequence resolves on the right (fingerprint → chain → seal),
   with the FROZEN stamp flashing briefly near the end on the mismatch beat. */

/* left · slow vault-ring drift */
.ex-vaultring { transform-origin: 42px 42px; animation: spin 60s linear infinite; }

/* left · SWAP — genuine flips to a red look-alike, label unchanged */
.ex-swap .ex-card-fake { opacity: 0; animation: exSwap 9s ease-in-out infinite; }
.ex-swap .ex-card-real { animation: exSwapReal 9s ease-in-out infinite; }
@keyframes exSwap     { 0%,4% { opacity: 0; } 12%,30% { opacity: 1; } 40%,100% { opacity: 0; } }
@keyframes exSwapReal { 0%,4% { opacity: 1; } 12%,30% { opacity: 0; } 40%,100% { opacity: 1; } }

/* left · VANISH — item fades to a dashed ghost while the paper still says present */
.ex-vanish .ex-card-gone { animation: exVanish 9s ease-in-out infinite; transform-origin: center; }
@keyframes exVanish {
  0%,14% { opacity: 1; transform: translateY(0) scale(1); }
  24%,40% { opacity: 0; transform: translateY(-5px) scale(.96); }
  50%,100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* left · EDIT — a custody log line quietly rewrites / turns red */
.ex-log-edit { animation: exEdit 9s ease-in-out infinite; }
@keyframes exEdit {
  0%,24% { stroke: #12274a; stroke-opacity: .28; transform: translateX(0); }
  32%,44% { stroke: #e0453e; stroke-opacity: 1; transform: translateX(3px); }
  54%,100% { stroke: #12274a; stroke-opacity: .28; transform: translateX(0); }
}
.ex-pen { fill: var(--red); font-size: 11px; opacity: 0; animation: exPen 9s ease-in-out infinite; }
@keyframes exPen { 0%,26% { opacity: 0; } 32%,44% { opacity: 1; } 54%,100% { opacity: 0; } }

/* right · FINGERPRINT — soft optical scan sweep + two acoustic rings */
.ex-scan { animation: exScan 9s ease-in-out infinite; }
@keyframes exScan {
  0%,30% { transform: translateY(0); opacity: 0; }
  36% { opacity: .9; }
  50% { transform: translateY(52px); opacity: .9; }
  56%,100% { transform: translateY(52px); opacity: 0; }
}
.ex-ring { transform-origin: 57px 70px; opacity: 0; }
.ex-ring.r1 { animation: exRing 9s ease-out infinite; }
.ex-ring.r2 { animation: exRing 9s ease-out infinite; animation-delay: .4s; }
@keyframes exRing {
  0%,38% { opacity: 0; transform: scale(.4); }
  44% { opacity: .7; }
  58% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* right · CHAIN — a few linked blocks draw in */
.ex-block { opacity: 0; transform-origin: center; }
.ex-block.b1 { animation: exBlock 9s ease-out infinite; animation-delay: 4.6s; }
.ex-block.b2 { animation: exBlock 9s ease-out infinite; animation-delay: 4.9s; }
.ex-block.b3 { animation: exBlock 9s ease-out infinite; animation-delay: 5.2s; }
@keyframes exBlock {
  0%,3% { opacity: 0; transform: translateY(-5px) scale(.8); }
  10%,44% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* right · SEAL — a green checkmark strokes on inside a softly pulsing ring */
.ex-seal { transform-origin: 112px 138px; animation: exSeal 9s ease-in-out infinite; }
@keyframes exSeal {
  0%,66% { opacity: .3; transform: scale(.92); }
  76% { opacity: 1; transform: scale(1.08); }
  84% { transform: scale(1); }
  100% { opacity: .6; transform: scale(1); }
}
.ex-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: exCheck 9s ease-in-out infinite; }
@keyframes exCheck { 0%,68% { stroke-dashoffset: 34; } 82%,100% { stroke-dashoffset: 0; } }

/* right · FROZEN — a red stamp that appears only on the mismatch beat */
.ex-freeze { opacity: 0; transform-origin: 197px 135px; animation: exFreeze 9s ease-in-out infinite; }
@keyframes exFreeze {
  0%,86% { opacity: 0; transform: scale(.9); }
  90% { opacity: 1; transform: scale(1.04); }
  95% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@media (max-width: 940px) {
  .explain-diagram { grid-template-columns: 1fr; gap: 0; }
  .ex-col { border-radius: 18px; }
  .ex-mid { min-height: 64px; padding: 8px 0; }
  .ex-pulse-track {
    height: 2px; width: 60%; max-width: 220px;
    background: linear-gradient(90deg, rgba(224,69,62,.18), rgba(47,107,255,.28), rgba(18,160,106,.22));
  }
  .ex-pulse-label { top: calc(50% + 14px); }
}

/* ======================= INCIDENTS ("it already happens") ======================= */
.incidents { background: radial-gradient(760px 480px at 80% 0%, rgba(224,69,62,.045), transparent 62%); }
.inc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px;
}
.inc-card {
  position: relative; background: #ffffff; border: 1px solid var(--line);
  border-left: 3px solid var(--red); border-radius: 14px; padding: 24px 22px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.inc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.inc-cat {
  align-self: flex-start; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--red); border: 1px solid rgba(224,69,62,.32);
  background: rgba(224,69,62,.06); border-radius: 20px; padding: 4px 11px; margin-bottom: 14px;
}
.inc-head { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 10px; line-height: 1.15; }
.inc-body { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.inc-body b { color: var(--navy); font-weight: 700; }
.inc-body em { color: var(--navy); font-style: italic; }
.inc-catch {
  font-size: 13px; color: var(--green); line-height: 1.45; margin: 0 0 14px;
  padding: 12px 14px; background: rgba(18,160,106,.07); border: 1px solid rgba(18,160,106,.25);
  border-radius: 10px;
}
.inc-catch-i { font-weight: 800; margin-right: 6px; }
.inc-src { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; }
.inc-src a { font-size: 11.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .01em; transition: color .2s; }
.inc-src a:hover { color: var(--blue); }

@media (max-width: 940px) { .inc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .inc-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }

  /* Clean, legible static end-state of the living diagram (captions unchanged).
     Left shows all three failures resolved (swap = red look-alike, vanish = ghost,
     edit = red line). Right shows the proof done (chain drawn, seal checked). */
  .ex-swap .ex-card-real { opacity: 0 !important; }
  .ex-swap .ex-card-fake { opacity: 1 !important; }
  .ex-vanish .ex-card-gone { opacity: .18 !important; }
  .ex-log-edit { stroke: #e0453e !important; stroke-opacity: 1 !important; transform: none !important; }
  .ex-pen { opacity: 1 !important; }
  .ex-pulse-dot { opacity: 1 !important; left: 50% !important; }
  .ex-pulse-dot.d2 { left: 20% !important; } .ex-pulse-dot.d3 { left: 80% !important; }
  .ex-scan { opacity: .9 !important; transform: translateY(26px) !important; }
  .ex-ring { opacity: .4 !important; }
  .ex-block { opacity: 1 !important; }
  .ex-seal { opacity: 1 !important; transform: none !important; }
  .ex-check { stroke-dashoffset: 0 !important; }
  .ex-freeze { opacity: 0 !important; }

  /* "Under the hood" diagram · clean static end-state (all steps resolved:
     scan settled, chain drawn, ML flag shown in amber, root + gold seal +
     anchor all in place). Captions read exactly as animated. */
  .uh-flow { opacity: 0 !important; }
  .uh-scan { opacity: .8 !important; transform: translateY(18px) !important; }
  .uh-ring { opacity: .35 !important; }
  .uh-block { opacity: 1 !important; transform: none !important; }
  .uh-flag { opacity: 1 !important; transform: none !important; }
  .uh-flag-t { opacity: 1 !important; }
  .uh-root { opacity: 1 !important; transform: none !important; }
  .uh-seal { opacity: 1 !important; transform: none !important; }
  .uh-seal-check { stroke-dashoffset: 0 !important; }
  .uh-anchor { opacity: 1 !important; transform: none !important; }

  /* Brand mark: no sheen sweep, check shown fully drawn. */
  .mark-check { animation: none !important; stroke-dashoffset: 0 !important; }
  .mark-sheen { display: none !important; }
  .wordmark:hover .wordmark-text { letter-spacing: .16em !important; }

  /* Step player: freeze scene motion; force every drawn/faded element to its
     settled end-state so each cinematic scene reads clearly as a static frame.
     The human actor and system elements all resolve to their final pose. */
  .player-stage.pv-slide, .player-visual.pv-in, .player-count.pv-bump { animation: none !important; }
  .player-visual::before { animation: none !important; }

  /* Step 1 · capture — phone framed on the item, tap done, flash cleared. */
  .pvc-flash, .pvc-ring { opacity: 0 !important; }
  .pvc-item, .pvc-phone { opacity: 1 !important; transform: none !important; }
  .pvc-reticle { opacity: 1 !important; transform: none !important; }
  /* keep the tapping hand visible at rest, mid-tap on the slab */
  .pvc-taphand { opacity: 1 !important; transform: translate(150px,-46px) rotate(150deg) !important; }

  /* Step 2 · fingerprint — scan settled, wave + whorl + hash all drawn. */
  .pvf-scan, .pvf-glow { opacity: 0 !important; transform: translateY(96px) !important; }
  .pvf-wave, .pvf-r, .pva-branch { stroke-dashoffset: 0 !important; }
  .pvl-flagline { opacity: 1 !important; }
  .pvf-flow, .pvf-hash { opacity: 1 !important; transform: none !important; }

  /* Step 3 · custody — drawer open, chain drawn, flag steady amber, eye centered. */
  .pvl-drawer { transform: translateX(-10px) !important; }
  .pvl-hand { opacity: 1 !important; transform: translate(78px,132px) rotate(-90deg) scale(.42) !important; }
  .pvl-block, .pvl-link, .pvl-eye { opacity: 1 !important; transform: none !important; }
  .pvl-block.flag rect { stroke-opacity: 1 !important; }
  .pvl-pupil { transform: none !important; }

  /* Step 4 · attest — leaves/nodes/root placed, seal checked, anchor locked. */
  .pvf-hash, .pvl-block, .pvl-link, .pva-leaf, .pva-node, .pva-root, .pva-root-t,
  .pva-sealring, .pva-seal, .pva-anchor, .pva-anchor-t, .pva-shackle {
    opacity: 1 !important; transform: none !important; }
  .pva-check { stroke-dashoffset: 0 !important; }

  /* Step 5 · redeem — both takes shown, MATCH check + MISMATCH cross + FROZEN stamp. */
  .pvr-take { opacity: 1 !important; transform: none !important; }
  .pvr-scan { opacity: 0 !important; transform: translateY(58px) !important; }
  .pvr-hand { opacity: 1 !important; transform: translate(74px,118px) scale(.30) !important; }
  .pvr-seal { opacity: 1 !important; transform: none !important; }
  .pvr-check, .pvr-cross { stroke-dashoffset: 0 !important; }
  .pvr-stamp { opacity: 1 !important; transform: translate(60px,96px) rotate(-11deg) scale(1) !important; }
}