/* ============================================================
   ARO·MEDIA — Landing (Plaid-structure · Dark · Near-monochrome)
   Neutral near-black. Chromatic color lives ONLY in: code syntax,
   the white CTA, the muted wax seal, status-ok, and errors.
   ============================================================ */
@import url("../shared/fonts.css");
@import url("../shared/tokens.css");

:root {
  /* canvas — neutral near-black (no visible tint; the engravings read best on no-color black) */
  --bg-0:#0A0A0A; --bg-1:#0D0D0E; --bg-panel:#111112; --bg-panel-2:#151517;
  --hairline: rgba(255,255,255,.07); --hairline-strong: rgba(255,255,255,.13);
  --edge-top: inset 0 1px 0 rgba(255,255,255,.05); /* top-light on raised surfaces */

  --text-0:#F4F4F5; --text-1:#C2C2C8; --text-2:#94949C; --text-3:#6E6E76;

  --maxw:1240px; --gutter: clamp(20px,5vw,80px); --sec-pad: clamp(64px,8vw,120px);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px;
  /* ONE elevation system — no colored glows anywhere */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.5);
  --shadow-2: 0 24px 60px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-3: 0 44px 100px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-panel: var(--shadow-2); /* alias for pre-restyle usages */
  --focus: rgba(255,255,255,.65);  /* outline:2px solid; outline-offset:2px, page-wide */

  /* the whole chromatic budget */
  --cta-bg:#FFFFFF; --cta-fg:#0A0A0A; --cta-bg-hover:#E9E9EA;
  --seal-wax:#A79BD6; --seal-wax-deep:#574B86; --seal-wax-glow: 0 0 12px rgba(139,92,246,.25);
  --ok:#57B98A; --err:#E87C7C;
  --syn-key:#8AA9CE; --syn-str:#A3C9AF; --syn-num:#C7AE85; --syn-fn:#B3A6D9; --syn-cmt:#5C5C64; --syn-resp:#86BFA0;

  --fs-hero: clamp(32px,3.8vw,52px);
  --fs-h2: clamp(27px,3.4vw,44px);
  --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(255,255,255,.24); color:#fff; }

body::before { content:""; position:fixed; inset:0; z-index:-3; background:
  radial-gradient(1200px 720px at 82% -8%, rgba(255,255,255,.03), transparent 60%),
  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; }

/* atmosphere canvas — the "encrypted field": drifting blooms + sealed-packet
   particles. Sits between the base gradient (-3) and the grain (-1), behind all
   content. Painted by the atmosphere IIFE in landing.js; hidden under reduced
   motion (JS returns early, and the rule below is a belt-and-braces backstop). */
#atmos { position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none;
  opacity:0; transition: opacity 1.4s var(--ease-out); }
#atmos.lit { opacity:1; }

/* ---------- layout / type ---------- */
.wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
section { position:relative; padding-block: var(--sec-pad); }
/* Section seams — a hairline of light at the top edge of each major section, so
   the page reads as layered depth rather than stacked blocks. (The soft glow that
   used to sit above the line was retired with the near-monochrome pass.) */
#featured, #products, #xend, #stats, #developers, #contact { isolation:isolate; }
#featured::before, #products::before, #xend::before, #stats::before, #developers::before, #contact::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:0; pointer-events:none;
  width:min(1180px, 92%); height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
#featured > *, #products > *, #xend > *, #stats > *, #developers > *, #contact > * { position:relative; z-index:1; }
h1,h2,h3 { font-family: var(--font-display); font-weight:650; letter-spacing:-.02em; 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(--text-0); } .conf { color: var(--text-0); }
.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(--text-2); }
.eyebrow::before { content:""; width:24px; height:1px; background: var(--hairline-strong); }
.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(--focus); outline-offset:2px; }

/* The Cursor signature: on a near-monochrome page the solid white button is the
   loudest possible object — it must stay the ONLY filled white surface. */
.btn-primary { background: var(--cta-bg); color: var(--cta-fg); border-color: transparent;
  box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--cta-bg-hover); transform: translateY(-1px);
  box-shadow: var(--shadow-1); }

.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(--hairline-strong); 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(--text-0); 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: var(--r-sm); display:grid; place-items:center; background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); color: var(--text-1); }
.icon-badge .ico { width:22px; height:22px; }
.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); } .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(--text-2); border-color: var(--hairline-strong); background: rgba(255,255,255,.03); }

/* 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(255,255,255,.05), transparent 60%),
  radial-gradient(120% 120% at 20% 90%, rgba(255,255,255,.03), transparent 60%),
  linear-gradient(160deg, #141416, #0C0C0D); 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(0,0,0,.5)); }

/* ============================================================
   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(10,10,11,.72); backdrop-filter: blur(20px) saturate(1.2);
  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; }

/* wordmark: the slashed-A mark + tight AroPay type */
.brand { display:inline-flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:750; font-size:19px; letter-spacing:-.025em; color: var(--text-0); }
.brand .brand-mark { width:23px; height:23px; display:block; flex:0 0 23px; }

.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(17,17,18,.97); backdrop-filter: blur(20px); border:1px solid var(--hairline-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); 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: rgba(255,255,255,.05); }
.dropdown .di-ico { width:34px; height:34px; flex:0 0 34px; border-radius: var(--r-xs); background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); display:grid; place-items:center; color: var(--text-1); }
.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: rgba(255,255,255,.28); }

/* ============================================================
   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(255,255,255,.03), transparent 66%),
   var(--bg-0); }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(46% 54% at 80% 44%, rgba(255,255,255,.05), transparent 66%);
  /* one-shot ignite on load — a bloom swells behind the hero then settles.
     A CSS animation auto-plays on first paint (no JS); reduced-motion kills it. */
  animation: hero-ignite 2.4s var(--ease-out) 1; }
@keyframes hero-ignite {
  0%   { opacity:0; transform: scale(1.12); }
  55%  { opacity:1; }
  100% { opacity:1; transform: scale(1); } }
.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: rgba(255,255,255,.04); backdrop-filter: blur(8px); margin-bottom: clamp(18px,2.4vh,24px); }
.eyebrow-pill .ep-dot { width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.9); box-shadow:0 0 0 0 rgba(255,255,255,.35); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.3);} 70%,100%{box-shadow:0 0 0 8px rgba(255,255,255,0);} }
.hero h1 { font-size: var(--fs-hero); line-height:1.06; letter-spacing:-.024em; font-weight:650; margin-bottom: clamp(16px,2.2vh,22px); text-wrap: balance;
  color: var(--text-0); }
.hero h1 .grad { color:inherit; }
.hero-lead { font-size: clamp(15.5px,1.15vw,17.5px); line-height:1.62; color: var(--text-1); max-width:40ch; margin-bottom: clamp(26px,3.2vh,32px); }
.hero-lead .accent { color:#E8E8EC; } .hero-lead .conf { color:#E8E8EC; }
.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: rgba(255,255,255,.35); }

/* 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) */
/* min-width:0 on both — as grid/flex items they default to min-width:auto and
   refuse to shrink below the terminal code's intrinsic width (same lesson as
   .code-card), pushing the card off-screen on phones. */
.hero-visual { position:relative; min-width:0; min-height: min(560px, 60vh); display:flex; flex-direction:column; justify-content:center; }
/* The postmaster steps back behind the hero terminal: 78% height, right-anchored,
   slightly faded. The terminal is the subject now; he's the identity behind it. */
.hero-figure { position:absolute; inset:auto 0 0 auto; height:78%; width:auto; aspect-ratio:3044/3852;
  opacity:.8; 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; transition: opacity .8s var(--ease-out); }
/* living-portrait video. The i2v model baked a soft background glow, so its ground
   isn't pure black and screen-blend alone left a faint rectangle. Two layers fix it:
   a SILHOUETTE mask (the figure's own alpha, from a video frame) cuts the outer box,
   and screen-blend lifts the dark between-engraving-line areas so it reads exactly
   like the static cutout. Mask + video share framing (both 540x720 from the i2v). */
.hero-figure .fig-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen; opacity:0; pointer-events:none; transition: opacity .8s var(--ease-out);
  -webkit-mask-image: url(../assets/video/postmaster-hero-mask.webp); mask-image: url(../assets/video/postmaster-hero-mask.webp);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.hero-figure .fig-video.playing { opacity:1; }
.hero-figure.video-on .fig-illus { opacity:0; }

/* 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 var(--hairline-strong); }
.hero-logos .ll-label { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.45); margin-right:6px; }
.hero-logos .ll-item { font-family: var(--font-display); font-weight:600; font-size:15px; letter-spacing:.01em; color: rgba(255,255,255,.66); }
/* hero terminal — compact code-card v2, the visual subject of the hero. Sits in
   flow (flex-centred) in front of the absolutely-positioned figure. */
.hero-terminal { position:relative; z-index:4; min-width:0; width:min(480px,100%); }
.hero-terminal pre { font-size:12.5px; padding:18px 20px; line-height:1.7; }
/* Floating .nota card — the visual "response", overlapping the terminal's lower
   corner and the figure behind it. */
.float-card { position:absolute; z-index:5; padding:14px 16px; border-radius: var(--r-md); background: rgba(17,17,19,.85); backdrop-filter: blur(14px); border:1px solid var(--hairline-strong); box-shadow: var(--shadow-2); will-change: transform; }
.float-card.fc-nota { bottom:-2%; right:-2%; 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(--text-2); }
.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 at 38% 32%, var(--seal-wax), var(--seal-wax-deep)); box-shadow: var(--seal-wax-glow); 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: rgba(255,255,255,.55); 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 { display:none; }
.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: var(--r-lg); border:1px solid var(--hairline-strong);
  box-shadow: var(--shadow-3); }
/* framed engraving portrait — the Notary sits in a dark glass panel, bottom-anchored */
.proof2-portrait { position:relative; aspect-ratio:4/5; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--hairline-strong);
  background: radial-gradient(86% 72% at 50% 14%, rgba(255,255,255,.05), transparent 62%), linear-gradient(180deg, #111112, #0C0C0D);
  box-shadow: var(--shadow-3); }
.proof2-portrait .portrait-fig { position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); height:104%; width:auto; max-width:none; object-fit:contain; }

/* The engraving cast was inked postal-blue against navy; on the neutral black
   canvas the blue ink + baked-in glow read as a loud cyan aura. Desaturate all
   of it toward silver-steel — banknote engraving in the monochrome language. */
.portrait-fig, .sec-figure, .hero-figure .fig-illus, .hero-figure .fig-video, .footer-mark { filter: saturate(.4); }

/* section characters — engraving figures emerging from a section edge, behind the
   content, masked-fade so they melt into the dark. They live in the outer margin
   and bleed off-screen; hidden below 1200px where there's no room. */
.sec-figure { position:absolute; bottom:0; height:min(84%,600px); width:auto; opacity:.5; pointer-events:none; z-index:0; }
.sec-figure.right { right:0; transform: translateX(24%);
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 58%); mask-image: linear-gradient(90deg, transparent 2%, #000 58%); }
.sec-figure.left { left:0; transform: translateX(-24%);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 98%); mask-image: linear-gradient(90deg, #000 42%, transparent 98%); }
/* beat the `#sec > *` rule (position:relative; z-index:1) — it has ID specificity,
   so BOTH position and z-index must be re-asserted here or the figure falls into
   normal flow at the top of the section instead of sitting absolutely behind content. */
#stats > .sec-figure, #developers > .sec-figure { position:absolute; z-index:0; }
/* the treasurer now sits behind the page's biggest code surface — step back */
#developers > .sec-figure { opacity:.35; }
/* clip the intentional off-edge bleed so it can't create a horizontal scrollbar */
#stats, #developers { overflow:hidden; }
@media (max-width:1200px){ .sec-figure { display:none; } }

/* compliance portrait anchoring the contact side panel */
.contact-portrait { position:relative; align-self:flex-start; width:min(300px,72%); aspect-ratio:4/5; border-radius:16px; overflow:hidden; margin-bottom:6px;
  border:1px solid var(--hairline-strong);
  background: radial-gradient(84% 70% at 50% 16%, rgba(255,255,255,.05), transparent 62%), linear-gradient(180deg, #101012, #0A0A0A);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.contact-portrait .portrait-fig { position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); height:106%; width:auto; max-width:none; object-fit:contain; }
.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(10,10,11,.66); backdrop-filter:blur(10px); border:1px solid rgba(87,185,138,.35); 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); animation: pulse-ok 2.2s ease-out infinite; }
@keyframes pulse-ok { 0%{box-shadow:0 0 0 0 rgba(87,185,138,.4);} 70%,100%{box-shadow:0 0 0 8px rgba(87,185,138,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(--hairline-strong); }
.pc-tag { font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--text-0); 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(255,255,255,.03), 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(--hairline-strong); 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(255,255,255,.05), transparent 60%); }
.prod-card::after { z-index:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.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; }
/* endpoint chip — each capability names its future REST surface */
.pc-copy .ep-chip { align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-1);
  border:1px solid var(--hairline-strong);
  background: rgba(255,255,255,.04);
  padding:3px 9px; border-radius:999px; margin:2px 0 10px; }
.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(255,255,255,.03), rgba(255,255,255,.015)); 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(255,255,255,.03), 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(--text-1); }
.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. */
.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:650; font-size: clamp(30px,3.4vw,40px); letter-spacing:-.02em; color: var(--text-0);
  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(--text-1); }
.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 38% 32%, var(--seal-wax), var(--seal-wax-deep)); box-shadow: var(--seal-wax-glow); }
.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: rgba(255,255,255,.28); 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(255,255,255,.04); stroke: var(--hairline-strong); stroke-width:1; }
.gfx-payouts .src rect { fill: rgba(255,255,255,.08); }
.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:#F4F4F5; }

/* passport */
.gfx-passport .pass-top { display:flex; align-items:center; gap:12px; }
.pass-ava { width:38px; height:38px; flex:0 0 38px; border-radius: var(--r-sm); display:grid; place-items:center; background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); }
.pass-ava { color: var(--text-1); }
.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(87,185,138,.35); border-radius:999px; padding:4px 9px; background: rgba(87,185,138,.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: var(--r-sm); display:grid; place-items:center; background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); }
.rwa-ico { color: var(--text-1); }
.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: var(--text-0); border-color: var(--hairline-strong); background: rgba(255,255,255,.06); }
.rwa-conn { flex:1; height:1px; background: linear-gradient(90deg, rgba(255,255,255,.25), transparent); position:relative; }
.rwa-conn::after { content:"→"; position:absolute; right:-2px; top:-9px; color: var(--text-1); 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: var(--text-0); border-color: var(--hairline-strong); background: rgba(255,255,255,.06); } }

/* ---------- 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:#E6E8EE; 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%); } }

/* ---------- Layer 3 · pointer reaction ----------
   Hover-capable pointers only, so touch never lands in a stuck hover state.
   (The holographic/scanline/sweep sheens were retired with the near-monochrome
   pass — the decrypt moment is the blur lifting, not a colored band.) */
@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 */
  .prod-card:hover .gfx-amt { filter: blur(0); }

  /* 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; }
/* ambient envelope loop — faint, screen-blended, radial-masked, behind content */
#xend > .ambient-loop { position:absolute; z-index:0; }
.ambient-loop { position:absolute; inset:0; margin:auto; width:min(720px,64%); height:auto; max-height:78%; object-fit:contain;
  mix-blend-mode:screen; opacity:.10; pointer-events:none;
  -webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 38%, transparent 82%); mask-image: radial-gradient(58% 58% at 50% 50%, #000 38%, transparent 82%); }
/* faint desktop-only decoration — don't ship a 332KB bg video to phones */
@media (max-width:900px){ .ambient-loop { display:none; } }
.receipts-grid { position:relative; z-index:1; 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: var(--r-lg); border:1px solid var(--hairline-strong); overflow:hidden;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  box-shadow: var(--shadow-3); }

.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); 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(--hairline-strong); background: rgba(255,255,255,.04); }
/* 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, rgba(255,255,255,.9), rgba(255,255,255,.25)); 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: var(--r-sm); display:grid; place-items:center;
  background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); color: var(--text-1); }
.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(--text-1); }

.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(--text-2);
  border:1px solid var(--hairline-strong); background: rgba(255,255,255,.03); 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:650; 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(87,185,138,.10); border:1px solid rgba(87,185,138,.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(--text-0);
  border:1px solid var(--hairline-strong); background: rgba(255,255,255,.05); 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(255,255,255,.03), transparent 55%); }
.stat:hover { transform: translateY(-4px); border-color: var(--hairline-strong); box-shadow: var(--shadow-2); }
.stat:hover::before { opacity:1; }
.stat > * { position:relative; }
.stat .big { font-family: var(--font-display); font-weight:650; font-size: clamp(32px,3.4vw,46px); letter-spacing:-.02em; margin-bottom:0; display:flex; align-items:baseline; }
.stat .big .accent { color: var(--text-0); }
/* 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, rgba(255,255,255,.8), rgba(255,255,255,0)); }
.stat-bar.alt { background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,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(--text-2); margin-left:2px; }
.stat p { font-size:13.5px; color: var(--text-2); line-height:1.5; }
/* deployed-surface ribbon — the honest dev-credibility strip under "Shipped" */
.deploy-ribbon { margin-top:16px; padding:14px 16px; border:1px solid var(--hairline); border-radius: var(--r-sm); background:rgba(255,255,255,.02); }
.dr-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.dr-pills { display:flex; flex-wrap:wrap; gap:6px; }
.dr-pills span { font-family:var(--font-mono); font-size:11px; color:var(--text-2); border:1px solid var(--hairline-strong); border-radius:999px; padding:3px 9px; }

/* ============================================================
   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. */
/* Cursor read: the code surface is a 1-step lift off the canvas (bg-1 on bg-0),
   defined by its hairline + top-light, not a heavy shadow. */
.code-card { padding:0; min-width:0; overflow:hidden; border-radius: var(--r-md); border:1px solid var(--hairline-strong); background: var(--bg-1); box-shadow: var(--shadow-2); }
.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(--text-2); }
.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:var(--syn-key);} .tok-str{color:var(--syn-str);} .tok-punct{color:var(--text-3);} .tok-num{color:var(--syn-num);} .tok-fn{color:var(--syn-fn);}
.tok-cmt{color:var(--syn-cmt);} .tok-resp{color:var(--syn-resp);}
.dev-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---- code-card v2 — tabbed API lifecycle ---- */
/* min-width:0 for the same reason as .code-card: as a grid item this wrapper
   refuses to shrink below the code's intrinsic width otherwise. */
.cc-col { min-width:0; }
.cc-status { margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--text-2);
  border:1px solid var(--hairline-strong); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.cc-copy { font-family:var(--font-mono); font-size:11px; color:var(--text-2); background:transparent;
  border:1px solid var(--hairline-strong); border-radius:8px; padding:4px 11px; cursor:pointer;
  transition: color .18s, border-color .18s; }
.cc-copy:hover { color:var(--text-0); border-color:var(--hairline-strong); }
.cc-copy:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.cc-copy.ok { color:var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.cc-tabs { display:flex; gap:2px; padding:6px 10px 0; border-bottom:1px solid var(--hairline); overflow-x:auto; scrollbar-width:none; }
.cc-tabs::-webkit-scrollbar { display:none; }
.cc-tab { appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-3);
  padding:9px 12px 10px; cursor:pointer; white-space:nowrap; transition: color .18s; }
.cc-tab:hover { color:var(--text-1); }
.cc-tab[aria-selected="true"] { color:var(--text-0); border-bottom-color:#FFFFFF; }
.cc-tab:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; border-radius:6px; }
.cc-honesty { margin-top:12px; font-family:var(--font-mono); font-size:11px; line-height:1.6; letter-spacing:.02em; color:var(--text-2); }

/* ============================================================
   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: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.field input:focus-visible, .field select:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.field .err { font-size:11.5px; color:var(--err); 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: var(--r-md); background: rgba(255,255,255,.04); border:1px solid var(--hairline-strong); display:grid; place-items:center; color: var(--text-1); }
.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 { position:relative; overflow:hidden; padding-block:72px 40px; }
/* glowing seam (replaces the flat border-top) + faint sealed-envelope watermark */
.footer::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1180px,92%); height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.footer .wrap { position:relative; z-index:1; }
.footer-mark { position:absolute; right:-1%; bottom:-6%; width:min(440px,40%); height:auto; opacity:.11; z-index:0; pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%); mask-image: linear-gradient(90deg, transparent, #000 58%); }
.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: copy → full-width terminal. The figure and float card go —
     the terminal IS the hero visual on a phone (and this drops the 626KB
     living-portrait video + fragile card-over-face geometry entirely). The
     identity is carried by the four remaining portraits down-page. */
  .hero-grid { grid-template-columns:1fr; gap: clamp(18px,3.5vh,30px); }
  .hero-visual { position:relative; min-height:0; }
  .hero-figure { display:none; }
  .float-card { display:none; }
  .hero-terminal { width:100%; }
  .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 { 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 */
  .pc-copy .ep-chip { font-size:11px; }
  .dr-label { font-size:11px; letter-spacing:.1em; }
}

/* ---------- 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 */
  #atmos { display:none; }                         /* atmosphere off entirely */
  .fig-video { display:none !important; }           /* living hero → static poster */
  .ambient-loop { display:none !important; }        /* ambient product loop off */
  .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; }
  .seal-dot::after { display:none; }
}