/* ============================================================
   ARO·MEDIA — Landing (Plaid-structure · Dark · Postal Blue)
   Postal blue = primary accent. Violet = "confidential" only.
   ============================================================ */
@import url("../shared/fonts.css");
@import url("../shared/tokens.css");

:root {
  /* canvas — deep postal navy (Plaid-style rich blue, not near-black) */
  --bg-0:#0A1430; --bg-1:#0C1A3D; --bg-panel:#112349; --bg-panel-2:#152B57;
  --hairline: rgba(255,255,255,.09); --hairline-strong: rgba(255,255,255,.16);

  /* PRIMARY — postal blue */
  --postal-blue:#2E6BE6; --postal-blue-bright:#5C93FF; --postal-blue-deep:#0A3A82;
  --postal-cyan:#57C7E6;
  --postal-blue-dim: rgba(46,107,230,.18); --postal-line: rgba(92,147,255,.45);
  /* CONFIDENTIAL — violet, scoped to encrypted UI */
  --confidential:#8B5CF6; --confidential-dim: rgba(139,92,246,.14); --confidential-line: rgba(139,92,246,.45);
  /* seal accent */
  --seal:#C9A24B;

  --text-0:#F4F6FB; --text-1:#C4CADA; --text-2:#94A0B8; --text-3:#66718C;

  --maxw:1240px; --gutter: clamp(20px,5vw,80px); --sec-pad: clamp(64px,8vw,120px);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --shadow-panel: 0 24px 70px -24px rgba(0,0,0,.62);
  --shadow-blue: 0 20px 60px -20px rgba(46,107,230,.45);
  --shadow-glow: 0 0 120px -20px rgba(46,107,230,.4);

  --fs-hero: clamp(34px,4.6vw,60px);
  --fs-h2: clamp(28px,3.6vw,46px);
  --fs-h3: clamp(19px,1.9vw,24px);
  --fs-lead: clamp(16px,1.35vw,19px);
  --fs-body: clamp(15px,1.1vw,16.5px);
  --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast:.18s; --dur:.34s; --dur-slow:.62s;
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* overshoot — seal stamp only */
  --gfx-beat:.18s; /* graphic boots up this long after its card settles */
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
section { scroll-margin-top: 84px; }
body {
  width:100%; min-height:100vh; background: var(--bg-0); color: var(--text-0);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width:100%; display:block; } a { color: inherit; text-decoration: none; }
::selection { background: rgba(46,107,230,.34); color:#fff; }

body::before { content:""; position:fixed; inset:0; z-index:-2; background:
  radial-gradient(1200px 720px at 82% -8%, rgba(46,107,230,.22), transparent 60%),
  radial-gradient(1000px 640px at 4% 106%, rgba(46,107,230,.14), transparent 55%),
  linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.04) .6px, transparent .6px); background-size:3px 3px; opacity:.42; }

/* ---------- layout / type ---------- */
.wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
section { position:relative; padding-block: var(--sec-pad); }
h1,h2,h3 { font-family: var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.06; }
h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing:-.01em; }
.lead { font-size: var(--fs-lead); color: var(--text-1); line-height:1.5; }
.muted { color: var(--text-2); } .accent { color: var(--postal-blue-bright); } .conf { color: var(--confidential); }
.mono { font-family: var(--font-mono); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-family: var(--font-mono); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--postal-blue-bright); }
.eyebrow::before { content:""; width:24px; height:1px; background: var(--postal-line); }
.sec-head { max-width:760px; margin-bottom: clamp(36px,4.5vw,60px); }
.sec-head .eyebrow { margin-bottom:20px; } .sec-head h2 + .lead { margin-top:20px; }
.center { text-align:center; margin-inline:auto; }

/* ---------- buttons ---------- */
/* Modern flat button system. The old primary was a 180deg gradient + inset white
   highlight — the glossy Web-2.0 look. Now: solid fill, one crisp hairline for
   edge definition on dark, a tight ambient shadow (not a glow), a 1px lift, and a
   real press state. Focus-visible ring for keyboard users. */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family: var(--font-body); font-weight:600; font-size:15px; letter-spacing:-.005em; padding:12px 22px; border-radius:12px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .16s var(--ease-out), background .16s var(--ease), border-color .16s, box-shadow .16s; }
.btn svg { width:16px; height:16px; }
.btn:active { transform: translateY(0) scale(.985); transition-duration:.06s; }
.btn:focus-visible { outline:2px solid var(--postal-blue-bright); outline-offset:2px; }

.btn-primary { background: var(--postal-blue); color:#fff; border-color: rgba(255,255,255,.14);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -12px rgba(46,107,230,.7); }
.btn-primary:hover { background: var(--postal-blue-bright); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 14px 30px -12px rgba(46,107,230,.85); }

.btn-ghost { background: rgba(255,255,255,.025); border-color: var(--hairline-strong); color: var(--text-0); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--postal-line); transform: translateY(-1px); }

.btn-lg { padding:15px 28px; font-size:16px; border-radius:14px; }
.link-arrow { position:relative; display:inline-flex; align-items:center; gap:7px; font-weight:600; color: var(--postal-blue-bright); font-size:15px; transition: gap .2s; }
.link-arrow svg { width:15px; height:15px; }
.link-arrow:hover { gap:11px; }
/* The text box is only 22px tall — under the 24px WCAG 2.2 AA target minimum
   (2.5.8). Expand the hit area with a pseudo-element rather than padding, so
   touch gets a comfortable ~38px target without shifting any layout. */
@media (pointer: coarse) {
  .link-arrow::after { content:""; position:absolute; inset:-8px -6px; }
}

/* ---------- primitives ---------- */
.panel { background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2)); border:1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }

/* Icon system. The source SVGs are stroke="currentColor", which cannot inherit
   the page's color through an <img> — it resolves to black, which was invisible
   on every dark panel. Painting currentColor through the SVG as a mask lets each
   icon take its color from CSS, so one file serves the blue, violet and green
   contexts. Size with width/height at the call site. */
.ico { display:inline-block; width:1em; height:1em; flex:0 0 auto; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* Registry. These url()s MUST live here, not in an inline style="--i:…": a url()
   inside a custom property resolves against the stylesheet that substitutes the
   var() — i.e. this file — so an inline one resolved to /css/assets/… and 404'd.
   Paths are therefore relative to /css/. */
.ico[data-i="lock"]         { --i: url(../assets/icons/lock.svg); }
.ico[data-i="send"]         { --i: url(../assets/icons/send.svg); }
.ico[data-i="landmark"]     { --i: url(../assets/icons/landmark.svg); }
.ico[data-i="layers"]       { --i: url(../assets/icons/layers.svg); }
.ico[data-i="badge-check"]  { --i: url(../assets/icons/badge-check.svg); }
.ico[data-i="banknote"]     { --i: url(../assets/icons/banknote.svg); }
.ico[data-i="handshake"]    { --i: url(../assets/icons/handshake.svg); }
.ico[data-i="globe"]        { --i: url(../assets/icons/globe.svg); }
.ico[data-i="circle-check"] { --i: url(../assets/icons/circle-check.svg); }
.ico[data-i="file-check"]   { --i: url(../assets/icons/file-check.svg); }
.ico[data-i="scale"]        { --i: url(../assets/icons/scale.svg); }

.icon-badge { width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center; background: var(--postal-blue-dim); border:1px solid var(--postal-line); color: var(--postal-blue-bright); }
.icon-badge .ico { width:22px; height:22px; }
.icon-badge.conf { color: var(--confidential); }
.icon-badge.conf { background: var(--confidential-dim); border-color: var(--confidential-line); }
.status-chip { display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid var(--hairline-strong); color: var(--text-2); background: rgba(255,255,255,.02); }
.status-chip .dot { width:7px; height:7px; border-radius:50%; background: var(--open); }
.status-chip.ok .dot { background: var(--ok); box-shadow:0 0 10px var(--ok); } .status-chip.ok { color: var(--ok); }
.status-chip.warn .dot { background: var(--warn); }
.pill { font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-2); padding:6px 12px; border-radius:999px; border:1px solid var(--hairline); background: rgba(255,255,255,.02); white-space:nowrap; }
.pill.conf { color: var(--confidential); border-color: var(--confidential-line); background: var(--confidential-dim); }

/* placeholder art slot (until painterly figures are generated) */
.art-slot { position:relative; border-radius: var(--r-lg); overflow:hidden; background:
  radial-gradient(120% 120% at 70% 20%, rgba(46,107,230,.28), transparent 60%),
  radial-gradient(120% 120% at 20% 90%, rgba(139,92,246,.18), transparent 60%),
  linear-gradient(160deg, #141826, #0b0e18); border:1px solid var(--hairline); display:grid; place-items:center; }
.art-slot::after { content: attr(data-label); position:absolute; bottom:12px; left:12px; font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-3); }
.art-slot .env-motif { width:44%; opacity:.9; filter: drop-shadow(0 10px 30px rgba(46,107,230,.4)); }

/* ============================================================
   NAV (mega-menu)
   ============================================================ */
/* Full-width fixed bar. Was a centered floating pill (max-width 1180, its own
   padding) which never lined up with the content grid. Now the inner content is
   constrained to the SAME container as the sections (.wrap: --maxw + --gutter),
   so the wordmark sits directly above the column edge on every section. */
.nav { position:fixed; top:0; left:0; right:0; width:100%; z-index:80;
  padding-block: clamp(11px,1.4vw,15px); background:transparent;
  border-bottom:1px solid transparent;
  transition: background .3s var(--ease), border-color .3s, padding .3s var(--ease); }
.nav.scrolled { background: rgba(9,16,36,.72); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--hairline); padding-block: clamp(9px,1.1vw,12px); }
.nav-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* clean text wordmark */
.brand { display:inline-flex; align-items:baseline; gap:9px; font-family: var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color: var(--text-0); }
.brand small { font-family: var(--font-mono); font-weight:500; font-size:9px; letter-spacing:.22em; color: var(--text-3); text-transform:uppercase; }

.nav-menu { display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav-item { position:relative; }
.nav-item > button, .nav-item > a { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:14.5px; color: var(--text-1); background:none; border:none; cursor:pointer; padding:10px 14px; border-radius:10px; transition: color .2s, background .2s; }
.nav-item > button:hover, .nav-item > a:hover, .nav-item.open > button { color: var(--text-0); background: rgba(255,255,255,.04); }
.nav-item .chev { width:12px; height:12px; transition: transform .25s var(--ease); opacity:.7; }
.nav-item.open .chev { transform: rotate(180deg); }
.dropdown { position:absolute; top:calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(8px); min-width:300px; padding:10px; background: rgba(14,16,24,.96); backdrop-filter: blur(20px); border:1px solid var(--hairline-strong); border-radius: var(--r-md); box-shadow: var(--shadow-panel); opacity:0; visibility:hidden; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.nav-item.open .dropdown { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:10px; transition: background .18s; }
.dropdown a > span:last-child { display:flex; flex-direction:column; }
.dropdown a:hover { background: var(--postal-blue-dim); }
.dropdown .di-ico { width:34px; height:34px; flex:0 0 34px; border-radius:9px; background: var(--postal-blue-dim); border:1px solid var(--postal-line); display:grid; place-items:center; color: var(--postal-blue-bright); }
.dropdown .di-ico .ico { width:17px; height:17px; }
.dropdown .di-t { display:block; font-size:14px; font-weight:600; color: var(--text-0); }
.dropdown .di-d { display:block; font-size:12.5px; color: var(--text-2); margin-top:3px; line-height:1.4; }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-login { font-size:14.5px; color: var(--text-1); padding:10px 6px; }
.nav-login:hover { color: var(--text-0); }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--hairline-strong); border-radius:10px; background:rgba(255,255,255,.03); cursor:pointer; }
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:0; z-index:90; background: linear-gradient(90deg, var(--postal-blue), var(--confidential)); box-shadow:0 0 12px var(--postal-blue-bright); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap: clamp(26px,4vh,46px); padding-top: clamp(104px,13vh,132px); padding-bottom: clamp(32px,5vh,60px); overflow:hidden;
  background:
   radial-gradient(64% 78% at 78% 44%, rgba(40,92,196,.24), transparent 66%),
   linear-gradient(120deg, #05070E 0%, #070A15 44%, #08101f 74%, #0a1428 100%),
   #060810; }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(46% 54% at 80% 44%, rgba(60,120,220,.12), transparent 66%); }
.hero-bg::after { content:""; position:absolute; inset:0; background:
  radial-gradient(135% 105% at 50% 120%, transparent 50%, rgba(0,0,0,.5)),
  linear-gradient(180deg, transparent 76%, var(--bg-0)); }
.hero > .wrap { position:relative; }
.hero .float-card { z-index:6; }
.hero-copy { z-index:5; }
.hero-grid { display:grid; grid-template-columns: minmax(0,540px) 1fr; gap: clamp(36px,6vw,92px); align-items:center; width:100%; }
.hero-copy { max-width:540px; position:relative; z-index:5; }
.eyebrow-pill { display:inline-flex; align-items:center; gap:9px; font-family: var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color: var(--text-1); padding:7px 14px 7px 12px; border-radius:999px; border:1px solid var(--hairline-strong); background: var(--postal-blue-dim); backdrop-filter: blur(8px); margin-bottom: clamp(18px,2.4vh,24px); }
.eyebrow-pill .ep-dot { width:7px; height:7px; border-radius:50%; background: var(--postal-blue-bright); box-shadow:0 0 0 0 rgba(76,134,255,.6); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(76,134,255,.55);} 70%,100%{box-shadow:0 0 0 8px rgba(76,134,255,0);} }
.hero h1 { font-size: clamp(33px,4vw,56px); line-height:1.06; letter-spacing:-.028em; font-weight:800; margin-bottom: clamp(16px,2.2vh,22px); text-wrap: balance;
  background: linear-gradient(102deg, var(--postal-cyan) 0%, var(--postal-blue-bright) 44%, #eef3ff 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1 .grad { color:inherit; -webkit-text-fill-color:currentColor; }
.hero-lead { font-size: clamp(15.5px,1.15vw,17.5px); line-height:1.62; color: rgba(224,232,248,.8); max-width:40ch; margin-bottom: clamp(26px,3.2vh,32px); }
.hero-lead .accent { color:#bfe0ff; } .hero-lead .conf { color:#c9b6ff; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom: clamp(22px,3vh,30px); }
.hero-trust { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top: clamp(16px,2.4vh,22px); border-top:1px solid var(--hairline); }
.trust-label { font-family: var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--text-3); }
.trust-logos { display:flex; flex-wrap:wrap; gap:8px 16px; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; color: var(--text-2); }
.trust-logos span { display:inline-flex; align-items:center; gap:7px; }
.trust-logos span::before { content:""; width:4px; height:4px; border-radius:50%; background: var(--postal-blue-bright); opacity:.8; }

/* hero visual — large bleeding character + floating cards */
/* The figure fills its container exactly (height-driven, aspect derived from the
   cropped art) rather than being oversized and pushed off-canvas. That was what
   made card placement unpredictable: the old figure's top sat ~233px ABOVE
   .hero-visual, so a card at top:2% landed squarely on his face. Now figure
   coordinates == container coordinates, and the cards below are placed against
   measured empty zones in the art. */
/* min() against vh so the figure shrinks on short laptops instead of pushing the
   logo strip below the fold (a flat 560px overflowed 1366x768 by 21px) */
.hero-visual { position:relative; min-height: min(560px, 60vh); display:block; }
.hero-figure { position:absolute; inset:0 0 0 auto; height:100%; width:auto; aspect-ratio:3044/3852;
  margin-inline:auto; animation: float 8s ease-in-out infinite; z-index:1; }
/* true alpha cutout — no mask, nothing to feather, composites on any background */
.hero-figure .fig-illus { width:100%; height:100%; object-fit:contain; }

/* logo cloud */
.hero-logos { position:relative; z-index:2; }
.hero-logos .ll-inner { display:flex; align-items:center; gap: clamp(14px,3vw,40px); flex-wrap:wrap; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); }
.hero-logos .ll-label { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color: rgba(233,240,255,.5); margin-right:6px; }
.hero-logos .ll-item { font-family: var(--font-display); font-weight:800; font-size:15px; letter-spacing:.01em; color: rgba(233,240,255,.7); }
/* Floating UI cards. Placed against the art's measured alpha coverage so they
   never cross his face (brightest upper mass sits x 9-73%, y 15-55%; centroid
   45%/35%). The clear zones are the band above the hat (y 0-10%: <13% covered)
   and the lower-left (y 70-90%: 9-20% covered) — one card in each. */
.float-card { position:absolute; z-index:3; padding:14px 16px; border-radius:14px; background: rgba(16,19,29,.86); backdrop-filter: blur(14px); border:1px solid var(--hairline-strong); box-shadow: var(--shadow-panel); will-change: transform; }
.float-card.fc-balance { top:-2%; right:-8%; width:210px; }
/* -12% keeps the overhang inside the grid gap at every width; -16% reached past it
   and clipped the hero CTA once the column narrowed (1280) */
.float-card.fc-nota { bottom:4%; left:-12%; width:238px; }
.fc-label { font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-3); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.fc-label .lock { width:13px; height:13px; color: var(--postal-blue-bright); }
.fc-balance .amt { font-family: var(--font-display); font-weight:800; font-size:24px; color: var(--confidential); filter: blur(7px); transition: filter .5s var(--ease); }
.hero-figure:hover ~ .float-card .amt, .float-card.fc-balance:hover .amt { filter: blur(0); }
.fc-nota .fc-row { display:flex; align-items:center; gap:9px; font-size:12.5px; color: var(--text-1); }
.fc-nota .seal { width:22px; height:22px; border-radius:50%; background: radial-gradient(circle,#a98bff,#6d4fd0); box-shadow:0 0 14px rgba(139,92,246,.6); display:grid; place-items:center; flex:0 0 22px; }
.fc-nota .seal .ico { width:12px; height:12px; color:#fff; }
.fc-nota .fc-meta { margin-top:8px; display:flex; gap:6px; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.scroll-cue { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:24px; height:38px; border:1px solid var(--hairline-strong); border-radius:12px; display:grid; place-items:start center; padding-top:7px; z-index:2; opacity:.65; }
.scroll-cue span { width:3px; height:7px; border-radius:2px; background: var(--postal-blue-bright); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%{transform:translateY(0);opacity:0;} 30%{opacity:1;} 60%{transform:translateY(9px);opacity:0;} 100%{opacity:0;} }

/* ============================================================
   FEATURED TILE
   ============================================================ */
.proof2 { position:relative; overflow:hidden; }
.proof2-glow { position:absolute; left:2%; top:14%; width:min(52vw,720px); height:min(52vw,720px); border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(58,132,244,.22), rgba(58,132,244,.06) 44%, transparent 68%); filter:blur(20px); }
.proof2-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px,5vw,84px); align-items:center; }
.proof2-visual { position:relative; }
.proof2-img { width:100%; height:auto; border-radius:20px; border:1px solid var(--hairline-strong);
  box-shadow: 0 44px 100px -34px rgba(0,0,0,.75), 0 0 70px -24px rgba(58,132,244,.42), inset 0 1px 0 rgba(255,255,255,.06); }
.mainnet-chip { position:absolute; top:6%; left:4%; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-weight:600; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#d8f6e6;
  background:rgba(7,18,36,.66); backdrop-filter:blur(10px); border:1px solid rgba(52,211,153,.42); padding:8px 14px; border-radius:999px; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); }
.mainnet-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation: pulse-ok 2.2s ease-out infinite; }
@keyframes pulse-ok { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%,100%{box-shadow:0 0 0 8px rgba(52,211,153,0);} }
.proof2-copy { max-width:560px; }
.proof2-copy .eyebrow { margin-bottom:20px; }
.proof2-copy h2 { margin-bottom:20px; }
.proof2-copy .lead { margin-bottom: clamp(26px,3vw,34px); }
.proof2-list { display:flex; flex-direction:column; margin-bottom:28px; }
.proof2-callout { display:grid; grid-template-columns:132px 1fr; gap:22px; align-items:start; padding:18px 2px; border-top:1px solid var(--hairline); transition: border-color .3s; }
.proof2-callout:last-child { border-bottom:1px solid var(--hairline); }
.proof2-callout:hover { border-top-color: var(--postal-line); }
.pc-tag { font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--postal-blue-bright); white-space:nowrap; }
.proof2-callout p { font-size:14px; color:var(--text-2); line-height:1.5; }
@media (max-width:900px){
  .proof2-grid { grid-template-columns:1fr; }
  .proof2-callout { grid-template-columns:110px 1fr; gap:16px; }
}

/* ============================================================
   PRODUCT GRID (layered cards)
   ============================================================ */
.prod-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: clamp(16px,1.5vw,22px); }
/* no overflow:hidden — the ::after glow must paint outside the border box.
   .gfx clips its own contents; the ::before spotlight self-clips via border-radius. */
.prod-card { position:relative; grid-column: span 2; display:flex; flex-direction:column; gap:22px; padding: clamp(22px,2vw,28px); border-radius: var(--r-lg); border:1px solid var(--hairline);
  background: radial-gradient(120% 90% at 82% 0%, rgba(46,107,230,.12), transparent 58%), linear-gradient(180deg,var(--bg-panel),var(--bg-panel-2));
  box-shadow: var(--shadow-panel);
  transition: transform .4s var(--ease), border-color .4s, opacity var(--dur-slow) var(--ease); }
.prod-card:hover { transform: translateY(-6px); border-color: var(--postal-line); will-change: transform; }

/* pointer spotlight (::before) + hover glow (::after) — both opacity-only, no box-shadow repaint */
.prod-card::before, .prod-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition: opacity var(--dur) var(--ease); }
.prod-card::before { z-index:0; background: radial-gradient(circle 380px at var(--mx,50%) var(--my,50%), rgba(92,147,255,.10), transparent 60%); }
.prod-card::after { z-index:0; box-shadow: 0 0 60px -24px rgba(60,130,240,.55); }
.prod-card > * { position:relative; z-index:1; }
.prod-card.flag { grid-column: span 3; min-height: clamp(370px,32vw,430px); padding: clamp(26px,2.4vw,34px); }
.prod-card .pc-copy { display:flex; flex-direction:column; margin-top:auto; }
.prod-card h3 { font-size:19px; letter-spacing:-.01em; margin-bottom:9px; }
.prod-card.flag h3 { font-size:22px; }
.prod-card p { font-size:14px; color: var(--text-2); line-height:1.55; margin-bottom:16px; max-width:44ch; }
.prod-card .link-arrow { margin-top:auto; font-size:14.5px; }

/* ---- shared graphic-UI panel ---- */
.gfx { position:relative; border:1px solid var(--hairline); border-radius: var(--r-md); padding:18px; background: linear-gradient(180deg, rgba(10,20,44,.6), rgba(8,14,30,.5)); backdrop-filter: blur(6px); overflow:hidden; }
.prod-card.flag .gfx { padding:22px; }
.prod-card.sup .gfx { min-height:184px; display:flex; flex-direction:column; justify-content:center; }
.gfx::after { content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(90% 70% at 80% 0%, rgba(74,140,240,.14), transparent 62%); pointer-events:none; }
.gfx-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.gfx-label { font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--text-3); }
.gfx-note { display:flex; align-items:center; gap:9px; font-size:12px; color: var(--text-2); margin-top:14px; }
.s-dot { width:7px; height:7px; border-radius:50%; background: var(--open); flex:0 0 auto; }
.s-dot.ok { background: var(--ok); box-shadow:0 0 10px var(--ok); }

/* balance */
.gfx-lock { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--hairline-strong); background: rgba(255,255,255,.03); }
/* Icons here are inline <svg> with stroke:currentColor so they inherit the panel's
   accent. As <img> they could not — currentColor resolved to black on dark. */
.gfx-lock { color: var(--postal-blue-bright); }
.gfx-lock svg { width:15px; height:15px; }
/* padding gives the amount's blur(9px) room to fall off before overflow:hidden clips
   it (otherwise the sealed number gets a hard rectangular cut); the negative margin
   cancels the padding so layout is unchanged. overflow:hidden is what bounds the scanline. */
.amt-wrap { position:relative; overflow:hidden; padding:12px 14px; margin:-12px -14px; }
/* tabular-nums pins glyph advance so the scramble can't jitter the number's width */
.gfx-amt { font-family: var(--font-display); font-weight:800; font-size: clamp(30px,3.4vw,40px); letter-spacing:-.02em; color: var(--confidential);
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
  filter: blur(9px); transition: filter .45s var(--ease); user-select:none; }
.gfx-meta { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* nota */
.gfx-id { font-family: var(--font-mono); font-size:12px; color: var(--postal-blue-bright); }
.nota-line { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--hairline); font-size:13px; }
.nota-line:first-of-type { border-top:none; }
.nl-k { color: var(--text-3); font-size:11.5px; font-family: var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.nl-v { color: var(--text-1); }
.seal-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px; background: radial-gradient(circle at 40% 35%, #b49cff, #6d4fd0); box-shadow:0 0 10px rgba(139,92,246,.6); }
.nota-verify { display:flex; align-items:center; gap:9px; margin-top:14px; padding-top:13px; border-top:1px solid var(--hairline); font-family: var(--font-mono); font-size:11px; letter-spacing:.04em; color: var(--ok); }
.nota-verify .v-ico { width:18px; height:18px; display:grid; place-items:center; }
.nota-verify .v-ico svg { width:16px; height:16px; }

/* payouts fan-out */
.gfx-payouts .fan { width:100%; height:auto; display:block; }
/* pathLength="1" on each path normalizes the three unequal curves, so they draw in unison */
.gfx-payouts .fan path { stroke: var(--postal-line); stroke-width:1.5; fill:none; stroke-dasharray:1; stroke-dashoffset:1; }
@keyframes fan-draw { to { stroke-dashoffset:0; } }
.gfx-payouts .fan rect { fill: rgba(46,107,230,.12); stroke: var(--postal-line); stroke-width:1; }
.gfx-payouts .src rect { fill: rgba(46,107,230,.2); }
.gfx-payouts .fan text { fill: var(--text-1); font-family: var(--font-mono); font-size:10px; text-anchor:middle; letter-spacing:.02em; }
.gfx-payouts .src text { fill:#eaf1ff; }

/* passport */
.gfx-passport .pass-top { display:flex; align-items:center; gap:12px; }
.pass-ava { width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center; background: var(--postal-blue-dim); border:1px solid var(--postal-line); }
.pass-ava { color: var(--postal-blue-bright); }
.pass-ava svg { width:20px; height:20px; }
.pass-id { display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.pass-name { font-size:13.5px; color: var(--text-0); font-weight:600; }
.pass-sub { font-family: var(--font-mono); font-size:9.5px; letter-spacing:.08em; color: var(--text-3); margin-top:2px; }
.pass-kyc { display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:10px; letter-spacing:.06em; color: var(--ok); border:1px solid rgba(52,211,153,.4); border-radius:999px; padding:4px 9px; background: rgba(52,211,153,.08); }
.pass-kyc svg { width:12px; height:12px; flex:0 0 12px; }
.pass-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1px solid var(--hairline); font-size:12.5px; color: var(--text-2); }
.pass-ok { display:inline-flex; align-items:center; gap:6px; color: var(--text-1); }
.pass-ok svg { width:14px; height:14px; flex:0 0 14px; color: var(--ok); }

/* rwa */
.gfx-rwa .rwa-asset { display:flex; align-items:center; gap:12px; }
.rwa-ico { width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center; background: var(--postal-blue-dim); border:1px solid var(--postal-line); }
.rwa-ico { color: var(--postal-blue-bright); }
.rwa-ico svg { width:19px; height:19px; }
.rwa-name { display:block; font-size:13.5px; color: var(--text-0); font-weight:600; }
.rwa-sub { display:block; font-size:10px; color: var(--text-3); margin-top:2px; letter-spacing:.04em; }
.rwa-flow { display:flex; align-items:center; gap:10px; margin-top:16px; }
.rwa-step { font-family: var(--font-mono); font-size:11px; letter-spacing:.04em; color: var(--text-2); border:1px solid var(--hairline); border-radius:999px; padding:6px 11px; white-space:nowrap; }
.rwa-step.on { color:#dff0ff; border-color: var(--postal-line); background: var(--postal-blue-dim); }
.rwa-conn { flex:1; height:1px; background: linear-gradient(90deg, var(--postal-line), transparent); position:relative; }
.rwa-conn::after { content:"→"; position:absolute; right:-2px; top:-9px; color: var(--postal-blue-bright); font-size:12px; }

/* ============================================================
   PRODUCT GRID — MOTION
   Three layers: (1) entrance choreography, fires once on .in
                 (2) ambient loops, run at rest
                 (3) pointer reaction, hover only
   Every graphic beat is offset by calc(var(--gfx-t) + var(--gfx-beat))
   so the card settles first and the graphic boots up after it.
   ============================================================ */

/* ---------- Layer 1 · entrance ---------- */
.prod-card.reveal { transform: translateY(22px) scale(.985); }
.prod-card.reveal.in { transform:none; }

/* shared: graphic parts start hidden, released by .in */
.prod-card .gfx-top, .prod-card .gfx-meta .pill, .prod-card .gfx-note,
.prod-card .nota-line, .prod-card .nota-verify,
.prod-card .pass-top, .prod-card .pass-row,
.prod-card .rwa-asset, .prod-card .rwa-flow,
.prod-card .amt-wrap { opacity:0; }
.prod-card.in .gfx-top, .prod-card.in .gfx-meta .pill, .prod-card.in .gfx-note,
.prod-card.in .nota-line, .prod-card.in .nota-verify,
.prod-card.in .pass-top, .prod-card.in .pass-row,
.prod-card.in .rwa-asset, .prod-card.in .rwa-flow,
.prod-card.in .amt-wrap { animation: gfx-rise .5s var(--ease-out) both; }
@keyframes gfx-rise { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* balance: label+lock → amount (arrives already sealed) → pills → footnote */
.prod-card.in .gfx-balance .gfx-top      { animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-balance .amt-wrap     { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .10s); }
.prod-card.in .gfx-balance .pill:nth-child(1) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .22s); }
.prod-card.in .gfx-balance .pill:nth-child(2) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .29s); }
.prod-card.in .gfx-balance .gfx-note     { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .38s); }

/* nota: rows print top-down, then the seal stamps */
.prod-card.in .gfx-nota .gfx-top { animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-nota .nota-line:nth-of-type(1) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .10s); }
.prod-card.in .gfx-nota .nota-line:nth-of-type(2) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .19s); }
.prod-card.in .gfx-nota .nota-line:nth-of-type(3) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .28s); }
.prod-card.in .gfx-nota .nota-verify {
  animation: nota-stamp .5s var(--ease-spring) both;
  animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .46s); }
@keyframes nota-stamp {
  from { opacity:0; transform: scale(1.35) rotate(-7deg); }
  60%  { opacity:1; }
  to   { opacity:1; transform: scale(1) rotate(0); } }
/* one-shot ring pulse behind the stamp */
.gfx-nota .nota-verify { position:relative; }
.gfx-nota .nota-verify .v-ico { position:relative; }
.gfx-nota .nota-verify .v-ico::after { content:""; position:absolute; inset:-2px; border-radius:50%; opacity:0; }
.prod-card.in .gfx-nota .nota-verify .v-ico::after {
  animation: pulse-ok 1s var(--ease-out) 1 backwards;
  animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .58s); opacity:1; }

/* treasury: lines draw, then each node lands after its own line */
.prod-card.in .gfx-payouts .fan path {
  animation: fan-draw .9s var(--ease-out) both;
  animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-payouts .fan path:nth-of-type(2) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .12s); }
.prod-card.in .gfx-payouts .fan path:nth-of-type(3) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .24s); }
.gfx-payouts .fan .src, .gfx-payouts .fan .dst { opacity:0; }
.prod-card.in .gfx-payouts .fan .src { animation: node-land .42s var(--ease-out) both; animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-payouts .fan .dst { animation: node-land .42s var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
.prod-card.in .gfx-payouts .fan .dst:nth-of-type(2) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .74s); }
.prod-card.in .gfx-payouts .fan .dst:nth-of-type(3) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .86s); }
.prod-card.in .gfx-payouts .fan .dst:nth-of-type(4) { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .98s); }
@keyframes node-land { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }

/* passport: chip in → KYC check draws → allowlist */
.prod-card.in .gfx-passport .pass-top { animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-passport .pass-row { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .34s); }
.ck-tick { stroke-dasharray:1; stroke-dashoffset:1; }
.prod-card.in .ck-tick { animation: ck-draw .42s var(--ease-out) forwards; animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .26s); }
.prod-card.in .gfx-passport .pass-row .ck-tick { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .5s); }
@keyframes ck-draw { to { stroke-dashoffset:0; } }
.pass-kyc { position:relative; }
.prod-card.in .gfx-passport .pass-kyc { animation: pulse-ok 1s var(--ease-out) 1 backwards; animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .3s); }

/* rwa: asset → connector grows → pill lights */
.prod-card.in .gfx-rwa .rwa-asset { animation-delay: calc(var(--gfx-t) + var(--gfx-beat)); }
.prod-card.in .gfx-rwa .rwa-flow  { animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .14s); }
.rwa-conn { transform: scaleX(0); transform-origin:left; }
.prod-card.in .rwa-conn { animation: conn-grow .5s var(--ease-out) forwards; animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .28s); }
@keyframes conn-grow { to { transform: scaleX(1); } }
.rwa-conn::after { opacity:0; }
.prod-card.in .rwa-conn::after { animation: arrow-in .3s var(--ease-out) forwards; animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .7s); }
@keyframes arrow-in { from { opacity:0; transform: translateX(-5px); } to { opacity:1; transform:none; } }
.rwa-step.on { --lit:0; }
.prod-card.in .rwa-step.on { animation: pill-light .45s var(--ease-out) forwards; animation-delay: calc(var(--gfx-t) + var(--gfx-beat) + .8s); }
@keyframes pill-light { from { color: var(--text-2); border-color: var(--hairline); background: transparent; }
                        to   { color:#dff0ff; border-color: var(--postal-line); background: var(--postal-blue-dim); } }

/* ---------- Layer 2 · ambient loops ----------
   Compositor-only (transform / opacity / offset-distance). Durations are
   deliberately mismatched (3.4 / 3.9 / 4.3 / 5.5 / 6.2 / 7.4s) so the loops
   never phase-lock into a visible collective beat. All gated on .in so
   nothing animates before the section is reached. */

/* treasury — packets travel the same curves the lines drew */
.gfx-payouts .fan .pkt { fill: var(--postal-cyan); opacity:0; offset-rotate:0deg; }
.prod-card.in .gfx-payouts .fan .pkt { animation: pkt-run 3.4s linear infinite; animation-delay: calc(var(--gfx-t) + 1.1s); }
.gfx-payouts .fan .pkt.p1 { offset-path: path("M78 66 C120 66 128 26 190 26"); }
.gfx-payouts .fan .pkt.p2 { offset-path: path("M78 66 C120 66 128 66 190 66"); }
.gfx-payouts .fan .pkt.p3 { offset-path: path("M78 66 C120 66 128 106 190 106"); }
.prod-card.in .gfx-payouts .fan .pkt.p2 { animation-duration: 3.9s; animation-delay: calc(var(--gfx-t) + 1.45s); }
.prod-card.in .gfx-payouts .fan .pkt.p3 { animation-duration: 4.3s; animation-delay: calc(var(--gfx-t) + 1.8s); }
@keyframes pkt-run {
  0%   { offset-distance:0%;   opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; } }

/* nota — wax seal catches the light */
.seal-dot { position:relative; overflow:hidden; }
.seal-dot::after { content:""; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); }
.prod-card.in .seal-dot::after { animation: seal-spec 6.2s var(--ease-out) infinite; }
@keyframes seal-spec { 0%,72% { transform: translateX(-120%); } 88%,100% { transform: translateX(120%); } }

/* passport — holographic sheen across the chip, like an ID card catching light */
.gfx-passport::before { content:""; position:absolute; inset:-40% -60%; z-index:2; pointer-events:none; mix-blend-mode:overlay;
  background: linear-gradient(102deg, transparent 42%, rgba(140,190,255,.5) 50%, rgba(190,160,255,.35) 54%, transparent 62%);
  transform: translateX(-120%); }
.prod-card.in .gfx-passport::before { animation: holo 7.4s var(--ease-out) infinite; }
@keyframes holo { 0%,68% { transform: translateX(-120%); } 92%,100% { transform: translateX(120%); } }

/* balance — a faint band drifting down the sealed number: still being computed */
.amt-wrap::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(87,199,230,.5), transparent);
  height:38%; opacity:.06; }
.prod-card.in .amt-wrap::before { animation: scanline 5.5s linear infinite; }
@keyframes scanline { from { transform: translateY(-120%); } to { transform: translateY(320%); } }

/* ---------- Layer 3 · pointer reaction ----------
   Hover-capable pointers only, so touch never lands in a stuck hover state. */
@media (hover:hover) and (pointer:fine) {
  .prod-card:hover::before, .prod-card:hover::after { opacity:1; }

  /* sibling dim — focus the card being read */
  .prod-grid:hover .prod-card:not(:hover) { opacity:.82; }

  /* balance decrypts: blur lifts while JS scrambles the digits, and a
     cyan band sweeps left-to-right across the number as it resolves */
  .prod-card:hover .gfx-amt { filter: blur(0); }
  .amt-wrap::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
    background: linear-gradient(100deg, transparent 40%, rgba(87,199,230,.45) 50%, transparent 60%); }
  .prod-card:hover .amt-wrap::after { animation: decrypt-sweep .55s var(--ease-out) 1; }
  @keyframes decrypt-sweep { from { opacity:1; transform: translateX(-110%); } to { opacity:0; transform: translateX(110%); } }

  /* nota — paper catches the light */
  .gfx-nota::before { content:""; position:absolute; inset:-40% -60%; z-index:2; pointer-events:none; opacity:0;
    background: linear-gradient(102deg, transparent 44%, rgba(180,210,255,.16) 50%, transparent 56%); }
  .prod-card:hover .gfx-nota::before { animation: paper-sheen .8s var(--ease-out) 1; }
  @keyframes paper-sheen { from { opacity:1; transform: translateX(-120%); } to { opacity:0; transform: translateX(120%); } }

  /* treasury — packets pick up pace under the cursor */
  .prod-card:hover .gfx-payouts .fan .pkt   { animation-duration: 2.1s; }
  .prod-card:hover .gfx-payouts .fan .pkt.p2 { animation-duration: 2.4s; }
  .prod-card:hover .gfx-payouts .fan .pkt.p3 { animation-duration: 2.7s; }

  /* rwa — the arrow makes the trip again */
  .prod-card:hover .rwa-conn::after { animation: arrow-travel 1.1s var(--ease-out) infinite; }
  @keyframes arrow-travel { 0% { transform: translateX(-5px); opacity:0; } 25%,70% { opacity:1; } 100% { transform: translateX(3px); opacity:0; } }
}

/* ============================================================
   RECEIPTS BAND
   ============================================================ */
.receipts { position:relative; }
.receipts-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }

/* ---- live .nota feed ----
   One framed console panel in the section-2 / section-3 glass language.
   The verified badge lives in the header ONCE, rather than repeating on
   every row where it read as noise. */
.feed { position:relative; border-radius:20px; border:1px solid var(--hairline-strong); overflow:hidden;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  box-shadow: 0 44px 100px -34px rgba(0,0,0,.75), 0 0 70px -24px rgba(58,132,244,.42), inset 0 1px 0 rgba(255,255,255,.06); }
.feed::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(80% 60% at 78% 0%, rgba(74,140,240,.12), transparent 60%); }

.feed-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:15px 18px; border-bottom:1px solid var(--hairline); background: rgba(255,255,255,.02); }
.feed-title { display:inline-flex; align-items:center; gap:9px; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--text-1); }
.live-dot { width:7px; height:7px; border-radius:50%; background: var(--ok); box-shadow:0 0 10px var(--ok); flex:0 0 auto; animation: pulse-ok 2.4s var(--ease-out) infinite; }
.feed-verified { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:10px; letter-spacing:.06em; color: var(--ok); }
.feed-verified .ico { width:12px; height:12px; }

.feed-list { list-style:none; margin:0; padding:10px; display:block; }

/* Each row is a 0fr/1fr grid so an arriving receipt can expand from nothing
   without the list jumping. .fr-in carries the visible card. */
.fr { display:grid; grid-template-rows: 1fr; margin-bottom:8px;
  transition: grid-template-rows .5s var(--ease-out), opacity .4s var(--ease), margin-bottom .5s var(--ease-out); }
.fr:last-child { margin-bottom:0; }
.fr.is-new { grid-template-rows: 0fr; opacity:0; margin-bottom:0; }
.fr.is-out { opacity:0; }
.fr-in { position:relative; overflow:hidden; min-height:0; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:14px;
  padding:14px 16px; border-radius: var(--r-md); border:1px solid var(--hairline); background: rgba(255,255,255,.02);
  transition: border-color .4s, background .4s; }
.fr:first-child .fr-in { border-color: var(--postal-line); background: var(--postal-blue-dim); }
/* left accent bar on the newest row. Each arriving receipt is a NEW element, so
   this one-shot draw replays every cycle as a different row becomes first-child. */
.fr:first-child .fr-in::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0;
  background: linear-gradient(180deg, var(--postal-blue-bright), var(--postal-cyan)); transform: scaleY(0); transform-origin:center;
  animation: fresh-bar .5s var(--ease-out) .05s forwards; }
@keyframes fresh-bar { to { transform: scaleY(1); } }
.fr-seal { width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:grid; place-items:center;
  background: var(--confidential-dim); border:1px solid var(--confidential-line); color: var(--confidential); }
.fr-seal .ico { width:17px; height:17px; }
.fr-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.fr-t { font-size:14px; font-weight:600; color: var(--text-0); line-height:1.35; }
.fr-d { font-size:12.5px; color: var(--text-2); line-height:1.4; }
/* age sits in its own grid column, so a wrapping title can never collide with it */
.fr-age { font-family: var(--font-mono); font-size:10.5px; letter-spacing:.04em; color: var(--text-3); white-space:nowrap; align-self:start; padding-top:2px; }
.fr:first-child .fr-age { color: var(--postal-blue-bright); }

.feed-foot { display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid var(--hairline);
  font-size:12px; color: var(--text-2); background: rgba(255,255,255,.015); flex-wrap:wrap; }
.ff-k { font-family: var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--confidential);
  border:1px solid var(--confidential-line); background: var(--confidential-dim); border-radius:999px; padding:3px 8px; flex:0 0 auto; }
.ff-tally { color: var(--text-1); }
.ff-count { font-family: var(--font-display); font-weight:800; font-variant-numeric: tabular-nums; color: var(--text-0); }
.ff-note { margin-left:auto; color: var(--text-3); font-size:11.5px; }

/* ---- left-column proof checklist (animated check-draw) ---- */
.proof-checks { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; }
.proof-checks li { display:flex; align-items:center; gap:12px; font-size:14.5px; color: var(--text-1); }
.pc-check { width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center;
  background: rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.32); color: var(--ok); }
.pc-check svg { width:15px; height:15px; }
.ck-draw-line { stroke-dasharray:1; stroke-dashoffset:1; }
.proof-checks.in .ck-draw-line { animation: ck-draw .45s var(--ease-out) forwards; }
.proof-checks.in li:nth-child(1) .ck-draw-line { animation-delay:.15s; }
.proof-checks.in li:nth-child(2) .ck-draw-line { animation-delay:.32s; }
.proof-checks.in li:nth-child(3) .ck-draw-line { animation-delay:.49s; }
/* the check tiles pop in with a slight spring as their tick draws */
.proof-checks li .pc-check { transform: scale(.7); opacity:0; }
.proof-checks.in li .pc-check { animation: pc-pop .4s var(--ease-spring) forwards; }
.proof-checks.in li:nth-child(1) .pc-check { animation-delay:.1s; }
.proof-checks.in li:nth-child(2) .pc-check { animation-delay:.27s; }
.proof-checks.in li:nth-child(3) .pc-check { animation-delay:.44s; }
@keyframes pc-pop { to { transform: scale(1); opacity:1; } }

/* ============================================================
   STATS
   ============================================================ */
.stats-groups { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,44px); }
.stat-group { display:flex; flex-direction:column; gap:16px; }
.sg-head { display:flex; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--hairline); }
.sg-k { font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--postal-blue-bright);
  border:1px solid var(--postal-line); background: var(--postal-blue-dim); border-radius:999px; padding:5px 11px; white-space:nowrap; }
.sg-k.alt { color: var(--text-2); border-color: var(--hairline-strong); background: rgba(255,255,255,.02); }
.sg-d { font-size:13px; color: var(--text-3); }
.stats-row { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.stat { position:relative; padding:28px 24px; overflow:hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
/* a faint accent wash that intensifies on hover, plus a lift — matches the
   prod-card language so the page reads as one system */
.stat::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition: opacity .3s var(--ease);
  background: radial-gradient(120% 90% at 0% 0%, rgba(46,107,230,.14), transparent 55%); }
.stat:hover { transform: translateY(-4px); border-color: var(--postal-line); box-shadow: var(--shadow-panel), 0 0 54px -26px rgba(60,130,240,.6); }
.stat:hover::before { opacity:1; }
.stat > * { position:relative; }
.stat .big { font-family: var(--font-display); font-weight:800; font-size: clamp(32px,3.4vw,46px); letter-spacing:-.02em; margin-bottom:0; display:flex; align-items:baseline; }
.stat .big .accent { color: var(--postal-blue-bright); }
/* accent bar that draws in under the number on reveal — the section's motion beat */
.stat-bar { display:block; height:3px; width:46px; border-radius:2px; margin:14px 0 16px; transform: scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--postal-blue-bright), rgba(92,147,255,0)); }
.stat-bar.alt { background: linear-gradient(90deg, var(--postal-cyan), rgba(87,199,230,0)); }
.stat-group.in .stat-bar { animation: bar-grow .8s var(--ease-out) .25s forwards; }
.stat-group.in .stats-row .stat:nth-child(2) .stat-bar { animation-delay:.4s; }
@keyframes bar-grow { to { transform: scaleX(1); } }
/* The display face renders U+00D7 as a heavy ✖ that reads as a close icon. The
   body face has a proper multiplication sign; keeping it accent-coloured ties it
   to the numeral instead of floating beside it like UI chrome. */
.stat .big .mult { font-family: var(--font-body); font-size:.6em; font-weight:700; color: var(--postal-blue-bright); margin-left:2px; }
.stat p { font-size:13.5px; color: var(--text-2); line-height:1.5; }

/* ============================================================
   DEVELOPER CODE
   ============================================================ */
.dev-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,5vw,60px); align-items:center; }
/* min-width:0 — as a grid item this defaults to min-width:auto, so it refused to
   shrink below the code's intrinsic width, grew, and got clipped by overflow:hidden
   instead of letting the <pre> scroll. */
.code-card { padding:0; min-width:0; overflow:hidden; border-radius: var(--r-md); border:1px solid var(--hairline-strong); background:#080a10; box-shadow: var(--shadow-panel); }
.code-head { display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--hairline); }
.code-head i { width:11px; height:11px; border-radius:50%; background: var(--hairline-strong); display:inline-block; }
.code-head .endpoint { margin-left:10px; font-family: var(--font-mono); font-size:12px; color: var(--postal-blue-bright); }
.code-card pre { padding:22px 24px; font-family: var(--font-mono); font-size:13.5px; line-height:1.75; color: var(--text-1);
  overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color: var(--hairline-strong) transparent; }
.code-card pre::-webkit-scrollbar { height:6px; }
.code-card pre::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius:999px; }
.code-card pre::-webkit-scrollbar-track { background:transparent; }
.tok-key{color:#8fb2ff;} .tok-str{color:#b7f7d8;} .tok-punct{color:var(--text-3);} .tok-num{color:var(--seal);} .tok-fn{color:#c9b6ff;}
.dev-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,60px); }
.contact-panel { padding: clamp(28px,4vw,44px); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); }
.field input, .field select { font-family:inherit; font-size:14.5px; color: var(--text-0); background: rgba(255,255,255,.03); border:1px solid var(--hairline-strong); border-radius:10px; padding:12px 14px; transition: border-color .2s, background .2s; }
.field input:focus, .field select:focus { outline:none; border-color: var(--postal-blue); background: rgba(46,107,230,.06); }
.field .err { font-size:11.5px; color:#ff8a8a; min-height:14px; }
.contact-side { display:flex; flex-direction:column; justify-content:center; gap:18px; }
.contact-side .lock-badge { width:52px; height:52px; border-radius:14px; background: var(--confidential-dim); border:1px solid var(--confidential-line); display:grid; place-items:center; color: var(--confidential); }
.contact-side .lock-badge .ico { width:24px; height:24px; }
.contact-side h3 { font-size:22px; } .contact-side p { color: var(--text-2); font-size:14.5px; }
.form-note { font-size:12px; color: var(--text-3); margin-top:8px; }

/* ============================================================
   FOOTER (6-col)
   ============================================================ */
.footer { padding-block:64px 40px; border-top:1px solid var(--hairline); }
.footer-top { display:grid; grid-template-columns: 1.4fr repeat(3, .9fr); gap:36px; }
.footer .brand { margin-bottom:14px; }
.footer-intro p { font-size:13.5px; color: var(--text-3); max-width:34ch; }
.footer-col { display:flex; flex-direction:column; gap:11px; }
.footer-col strong { font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--text-3); font-weight:600; margin-bottom:4px; }
.footer-col a { font-size:13.5px; color: var(--text-2); transition: color .2s; }
.footer-col a:hover { color: var(--text-0); }
/* 21px text box is under the 24px WCAG 2.2 AA target minimum; on touch, trade the
   tight 11px column gap for real spacing so each link is comfortably tappable. */
@media (pointer: coarse) {
  .footer-col { gap:4px; }
  .footer-col a { padding-block:7px; }
}
.footer-base { margin-top:48px; padding-top:24px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-base span { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; color: var(--text-3); text-transform:uppercase; }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} .reveal.d5{transition-delay:.40s;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-menu { display:none; }
  .nav-toggle { display:grid; place-items:center; }
  /* Mobile hero: the figure was display:none here, which left the phone — where
     most people meet this page — with a text-only hero and none of the identity.
     Stack it under the copy instead, centred, keeping only the sealed-balance
     card (the single strongest idea; two cards is clutter at this width). */
  .hero-grid { grid-template-columns:1fr; gap: clamp(18px,3.5vh,30px); }
  .hero-visual { display:block; position:relative; min-height: clamp(360px,92vw,440px); }
  /* Anchor the figure to the BOTTOM at 84% height, reserving a clear band at the
     top for the card. Full height put his hat at y=0, and a 186px card on a
     ~350px container spans x 44-100% — straight across his face (hat/face occupy
     x 9-73%). Centre with margins, NOT translateX — @keyframes float animates
     transform and would clobber it every frame. */
  .hero-figure { inset:auto 0 0 0; height:84%; width:auto; margin-inline:auto; }
  /* one card only; two is clutter at this width. It now lands in the reserved
     band + the art's empty top 10% (<13% covered), so it clears his face. */
  .float-card.fc-nota { display:none; }
  .float-card.fc-balance { top:0; right:0; width:180px; }
  .prod-card.flag { grid-column: span 6; } .prod-card.sup { grid-column: span 3; }
  .featured-card, .receipts-grid, .dev-grid, .contact-grid { grid-template-columns:1fr; }
  .stats-groups { grid-template-columns:1fr; gap:32px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width:680px){
  .prod-grid { grid-template-columns:1fr; } .prod-card, .prod-card.flag, .prod-card.sup { grid-column: 1 / -1; min-height:auto; }
  .stats-row { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .nav-cta .nav-login { display:none; }
  .featured-art { display:none; }
  /* the head's two mono labels won't sit side by side at this width */
  .feed-head { flex-direction:column; align-items:flex-start; gap:8px; }
  .fr-in { gap:12px; padding:13px 14px; }
}
@media (max-width:520px){
  .brand small { display:none; }
  .brand { font-size:17px; }
  .nav-cta .btn-primary { padding:10px 15px; font-size:13px; white-space:nowrap; }
}

/* ---------- touch legibility ----------
   The graphic-UI blocks use deliberately small mono labels as chrome. That reads
   fine at desktop distance, but 9.5–10px is genuinely hard on a phone, where the
   cards are full-width and have room to spare. Scoped to coarse pointers so the
   desktop composition is untouched. */
@media (pointer: coarse) {
  /* long label — ease the tracking so 11px doesn't force an uglier wrap */
  .pass-sub { font-size:11px; letter-spacing:.05em; }
  .rwa-sub { font-size:11px; }
  .feed-verified { font-size:11px; }
  .gfx-label, .nl-k { font-size:11px; }
  .fr-age { font-size:11px; }
  .fc-label { font-size:11px; }   /* hero card label — now visible on mobile */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }

  /* The rule above kills the animations that would have revealed the product
     graphics — but their "start hidden" values (opacity:0, stroke-dashoffset:1,
     scaleX(0), blur) are plain declarations, so without this block the graphics
     would be stranded invisible. Snap every one to its resolved end state. */
  .prod-card.reveal { transform:none; }
  .prod-card .gfx-top, .prod-card .gfx-meta .pill, .prod-card .gfx-note,
  .prod-card .nota-line, .prod-card .nota-verify,
  .prod-card .pass-top, .prod-card .pass-row,
  .prod-card .rwa-asset, .prod-card .rwa-flow,
  .prod-card .amt-wrap,
  .gfx-payouts .fan .src, .gfx-payouts .fan .dst,
  .rwa-conn::after { opacity:1; }
  .gfx-payouts .fan path, .ck-tick { stroke-dashoffset:0; }
  .rwa-conn { transform: scaleX(1); }
  .gfx-payouts .fan .pkt { opacity:0; }          /* packets are ambient only — stay gone */
  .gfx-amt { filter:none; }                       /* no hover to un-seal it, so show the value */
  .fr { grid-template-rows: 1fr; opacity:1; }     /* feed doesn't cycle — show its static rows */
  .stat-bar { transform: scaleX(1); }             /* accent bars: show full, no draw */
  .ck-draw-line { stroke-dashoffset:0; }          /* section-4 proof checks: shown drawn */
  .proof-checks li .pc-check { opacity:1; transform:none; }
  .amt-wrap::before, .amt-wrap::after,
  .gfx-passport::before, .gfx-nota::before, .seal-dot::after { display:none; }
}