/* ============================================================================
   SOTTO — landing page
   Dark, institutional, precise. Tokens mirror the Sotto app exactly.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root[data-theme="dark"] {
  --bg:#0a0c0f; --panel:#0f1318; --panel2:#13181d; --pop:#161b21;
  --line:#1e242b; --line2:#2b333c;
  --text:#e9ecef; --dim:#98a2ac; --faint:#646e78;
  --accent:oklch(0.64 0.13 232); --accent-text:oklch(0.82 0.09 232);
  --accent-soft:oklch(0.64 0.13 232 / 0.14);
  --good:oklch(0.74 0.12 165); --warn:oklch(0.8 0.12 78); --bad:oklch(0.68 0.17 26);
  --hatch:rgba(152,162,172,0.14);
  --shadow:0 24px 60px -20px rgba(0,0,0,0.7);
  --grain-opacity:0.05;
}

/* Light theme mirrors the app's light palette */
:root[data-theme="light"] {
  --bg:#f4f6f8; --panel:#ffffff; --panel2:#f0f3f6; --pop:#e9eef3;
  --line:#dde3ea; --line2:#c6cfd9;
  --text:#11161c; --dim:#54606c; --faint:#8a96a2;
  --accent:oklch(0.55 0.13 232); --accent-text:oklch(0.45 0.13 232);
  --accent-soft:oklch(0.55 0.13 232 / 0.12);
  --good:oklch(0.55 0.13 165); --warn:oklch(0.62 0.13 70); --bad:oklch(0.55 0.18 26);
  --hatch:rgba(84,96,108,0.16);
  --shadow:0 24px 60px -28px rgba(20,30,45,0.28);
  --grain-opacity:0.025;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* When Lenis is active it owns scrolling — native smooth-scroll fights it. */
html.lenis, html.lenis body { height:auto; }
html.lenis { scroll-behavior:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--text);
  font-family:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(15px,1vw + 12px,18px);
  line-height:1.55;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s ease, color .5s ease;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; border-radius:3px; }

.mono {
  font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.accent { color:var(--accent-text); }
.good { color:var(--good); }
.warn { color:var(--warn); }
.dim  { color:var(--dim); }

/* ---------- Layout primitives ---------- */
.section { padding:clamp(80px,12vh,160px) 0; position:relative; }
.section-grid {
  width:min(1200px,92vw);
  margin-inline:auto;
}
.section-head { margin-bottom:clamp(36px,5vw,64px); max-width:34ch; }
.section-label {
  font-family:"IBM Plex Mono", monospace;
  font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:18px;
}
.section-heading {
  font-size:clamp(30px,4.4vw,58px);
  font-weight:600; line-height:1.04; letter-spacing:-0.022em;
  text-wrap:balance;
}
.lede {
  font-size:clamp(18px,1.6vw,23px);
  color:var(--dim); max-width:62ch; line-height:1.5;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:500; font-size:16px; letter-spacing:-0.01em;
  padding:14px 22px; border-radius:10px;
  min-height:48px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn-sm { padding:10px 16px; min-height:44px; font-size:14px; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn-accent { background:var(--accent); color:#04080c; font-weight:600; }
.btn-accent:hover { background:var(--accent-text); }
:root[data-theme="light"] .btn-accent { color:#fff; }
.btn-ghost { border-color:var(--line2); color:var(--text); background:color-mix(in srgb,var(--panel) 50%,transparent); }
.btn-ghost:hover { border-color:var(--accent-text); color:var(--accent-text); }
.btn-bad { border-color:color-mix(in srgb,var(--bad) 45%,transparent); color:var(--bad); }
.btn-bad:hover { background:color-mix(in srgb,var(--bad) 14%,transparent); }
.btn .arrow { transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arrow { transform:translateX(4px); }

/* ---------- FX overlays ---------- */
.skip-link {
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--accent); color:#04080c; padding:10px 16px; border-radius:8px;
  font-weight:600; transition:top .2s;
}
.skip-link:focus { top:16px; }

.fx-grain {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  /* No mix-blend-mode: it forces a full-viewport recomposite every scroll frame.
     A flat low-opacity texture on its own GPU layer is effectively free. */
  opacity:var(--grain-opacity); transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-glow {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(50vw 40vh at 0% 12%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 60%);
}

/* ============================================================================
   HEADER
   ========================================================================== */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(16px,4vw,40px);
  /* Near-opaque background instead of a live backdrop-blur: blurring scrolling
     content under a fixed bar repaints that strip on every frame. */
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s, background-color .4s, padding .4s;
}
.site-header.scrolled { border-bottom-color:var(--line); background:color-mix(in srgb,var(--bg) 96%,transparent); padding-top:10px; padding-bottom:10px; }

.wordmark { display:inline-flex; align-items:center; gap:11px; color:var(--text); }
.wordmark .mark { color:var(--accent-text); display:inline-flex; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.wordmark:hover .mark { transform:rotate(180deg); }
.wordmark-text { font-weight:700; letter-spacing:0.2em; font-size:18px; }
.wordmark-lg .wordmark-text { font-size:clamp(26px,3vw,40px); }
.wordmark-lg .mark { color:var(--accent-text); }

.site-nav { display:flex; gap:26px; }
.site-nav a { color:var(--dim); font-size:15px; transition:color .2s; position:relative; }
.site-nav a:hover { color:var(--text); }
.site-nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--accent-text); transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.site-nav a:hover::after { right:0; }

.header-actions { display:flex; align-items:center; gap:14px; }

/* Theme toggle — sun / moon icon */
.theme-toggle {
  width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line2); background:var(--panel2);
  display:grid; place-items:center; color:var(--dim);
  transition:color .25s, border-color .25s, background-color .25s, transform .2s;
}
.theme-toggle:hover { color:var(--accent-text); border-color:var(--accent-text); transform:translateY(-1px); }
.theme-toggle .ti { grid-area:1 / 1; transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
:root[data-theme="dark"]  .theme-toggle .ti-sun  { opacity:0; transform:rotate(-90deg) scale(.4); }
:root[data-theme="dark"]  .theme-toggle .ti-moon { opacity:1; transform:none; }
:root[data-theme="light"] .theme-toggle .ti-moon { opacity:0; transform:rotate(90deg) scale(.4); }
:root[data-theme="light"] .theme-toggle .ti-sun  { opacity:1; transform:none; }

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position:relative; z-index:2;
  min-height:100svh;
  display:grid; align-items:center;
  grid-template-columns:1fr;
  padding:120px clamp(16px,4vw,40px) 80px;
  width:min(1200px,92vw); margin-inline:auto;
}
.hero-inner { max-width:18ch; max-width:min(760px,100%); position:relative; z-index:3; }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:"IBM Plex Mono", monospace; font-size:13px;
  letter-spacing:0.2em; color:var(--dim);
  padding:8px 14px; border:1px solid var(--line); border-radius:100px;
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  margin-bottom:28px;
}
.dot-good { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent); animation:pulse 2.6s ease-out infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 50%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

.hero-heading {
  font-size:clamp(46px,9vw,128px);
  font-weight:600; line-height:0.96; letter-spacing:-0.035em;
  margin-bottom:30px;
}
.hero-heading .line { display:block; overflow:hidden; }
.hero-heading .line-in { display:block; will-change:transform; }

/* the redacted word in the hero */
.redact-word { position:relative; display:inline-block; color:var(--accent-text); }
.redact-word .redact-cover {
  position:absolute; inset:-2px -6px; border-radius:6px;
  background:var(--accent); 
  background-image:repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.22) 6px 7px);
  transform:scaleX(1); transform-origin:right; 
  transition:transform .7s cubic-bezier(.7,0,.2,1);
}
.redact-word.revealed .redact-cover { transform:scaleX(0); }

.hero-sub { font-size:clamp(17px,1.5vw,21px); color:var(--dim); max-width:54ch; line-height:1.5; margin-bottom:36px; }

.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.hero-stats { display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,64px); border-top:1px solid var(--line); padding-top:26px; }
.hero-stats dt { font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.14em; color:var(--faint); text-transform:uppercase; margin-bottom:8px; }
.hero-stats dd { font-size:clamp(18px,2vw,26px); font-weight:500; }
.hero-stats dd.accent { color:var(--accent-text); }

/* Hero visual — sealed envelopes */
.hero-visual {
  position:absolute; z-index:1;
  right:clamp(-40px,-2vw,0px); top:50%;
  width:min(46vw,560px); height:min(46vw,560px);
  transform:translateY(-46%);
  pointer-events:none;
}
.envelope {
  position:absolute; width:62%; 
  background:var(--panel); border:1px solid var(--line2);
  border-radius:14px; box-shadow:var(--shadow);
  padding:0; overflow:hidden;
  will-change:transform;
}
.env-a { top:8%; right:2%; transform:rotate(4deg); }
.env-b { bottom:8%; right:2%; left:auto; transform:rotate(-5deg); }
.env-tab {
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.14em;
  color:var(--dim); padding:11px 16px; border-bottom:1px solid var(--line);
  background:var(--panel2);
}
.env-body { padding:18px 16px 22px; display:flex; flex-direction:column; gap:14px; }
.env-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.env-key { font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em; color:var(--faint); }
.env-val { font-family:"IBM Plex Mono", monospace; font-size:18px; padding:4px 10px; border-radius:6px; color:transparent; }
.hatch {
  background-image:repeating-linear-gradient(45deg, var(--hatch) 0 5px, transparent 5px 10px);
  color:var(--faint); letter-spacing:2px;
}
.env-seal {
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--accent-text); position:relative;
  background:var(--accent-soft);
}
.env-seal::after { content:""; position:absolute; left:5px; right:5px; top:50%; height:3px; transform:translateY(-50%); border-radius:2px; background:var(--accent-text); }

.hero-eyeslash {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--accent-text); opacity:.9;
  background:var(--bg); border:1px solid var(--line2); border-radius:50%;
  padding:14px; box-shadow:var(--shadow);
}

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:26px; left:clamp(16px,4vw,40px);
  display:inline-flex; align-items:center; gap:12px;
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.22em; color:var(--faint);
}
.scroll-cue-line { width:46px; height:1px; background:var(--line2); position:relative; overflow:hidden; }
.scroll-cue-line::after { content:""; position:absolute; inset:0; width:40%; background:var(--accent-text); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%{ transform:translateX(-120%);} 60%,100%{ transform:translateX(280%);} }

/* ============================================================================
   PROBLEM
   ========================================================================== */
.problem { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; z-index:2; }
.problem .section-grid { display:grid; gap:clamp(40px,6vw,80px); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .problem .section-grid, .insight .section-grid { grid-template-columns:minmax(280px,0.85fr) minmax(0,1.15fr); align-items:start; } }
.problem .section-head, .insight .section-head { margin-bottom:0; position:sticky; top:100px; }
@media (max-width:899px){ .problem .section-head, .insight .section-head { position:static; } }

.problem-cards { display:grid; gap:18px; margin-top:30px; grid-template-columns:1fr; }
@media (min-width:620px){ .problem-cards { grid-template-columns:1fr 1fr; } }
.pcard {
  background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px; position:relative;
  transition:border-color .3s, transform .3s;
}
.pcard:hover { border-color:var(--line2); transform:translateY(-3px); }
.pcard-idx { position:absolute; top:20px; right:22px; font-size:13px; color:var(--faint); border:1px solid var(--line2); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; }
.pcard h3 { font-size:20px; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em; }
.pcard p { color:var(--dim); font-size:15.5px; }
.problem-foot { margin-top:30px; font-size:13px; letter-spacing:0.12em; color:var(--bad); }

/* ============================================================================
   INSIGHT
   ========================================================================== */
.insight { position:relative; z-index:2; }
.insight-points { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:6px; }
.insight-points li { display:flex; gap:18px; padding:22px 4px; border-top:1px solid var(--line); }
.insight-points li:last-of-type { border-bottom:1px solid var(--line); }
.ip-mark { flex:none; width:46px; height:46px; border-radius:11px; display:grid; place-items:center; color:var(--accent-text); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.insight-points h3 { font-size:18px; font-weight:600; margin-bottom:4px; }
.insight-points p { color:var(--dim); font-size:15.5px; max-width:52ch; }

.boundary {
  margin-top:36px; padding:26px 28px; border-radius:14px;
  background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  position:relative;
}
.boundary-tag { display:inline-block; font-size:11px; letter-spacing:0.2em; color:var(--warn); margin-bottom:12px; }
.boundary p { color:var(--text); font-size:16px; max-width:60ch; }
.boundary strong { color:var(--warn); font-weight:600; }

/* ============================================================================
   PROOF — signature interaction
   ========================================================================== */
.proof { position:relative; z-index:2; background:var(--panel); border-top:1px solid var(--line); }
.proof-intro { font-size:clamp(16px,1.4vw,19px); color:var(--dim); max-width:56ch; margin-top:18px; }
/* center the proof header block */
.proof .section-head { max-width:none; text-align:center; display:flex; flex-direction:column; align-items:center; margin-inline:auto; }
.proof .section-head .proof-intro { margin-left:auto; margin-right:auto; max-width:54ch; text-wrap:balance; }
.proof-openfull { margin-top:22px; font-size:15px; color:var(--dim); }
.proof-openfull a { color:var(--accent-text); border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding-bottom:1px; transition:border-color .2s; }
.proof-openfull a:hover { border-color:var(--accent-text); }

.proof-app {
  margin-top:clamp(36px,5vw,60px);
  background:linear-gradient(180deg,var(--panel2),var(--bg));
  border:1px solid var(--line2); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow);
}

/* Auction header */
.auction-head {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:24px clamp(20px,3vw,34px);
  border-bottom:1px solid var(--line);
  background:var(--pop);
}
.ah-asset { display:flex; flex-direction:column; gap:8px; }
.ah-label { font-size:11px; letter-spacing:0.18em; color:var(--faint); }
.ah-name { font-size:clamp(18px,2vw,24px); font-weight:600; letter-spacing:-0.01em; }
.ah-meta { display:flex; gap:clamp(20px,3vw,40px); }
.ah-meta dt { font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:0.14em; color:var(--faint); text-transform:uppercase; margin-bottom:6px; }
.ah-meta dd { font-size:15px; }

/* View-as switcher */
.viewas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px clamp(20px,3vw,34px); border-bottom:1px solid var(--line); }
.viewas-label { font-size:11px; letter-spacing:0.2em; color:var(--faint); flex:none; }
.viewas-tabs { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.vtab {
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:10px 16px; border:1px solid var(--line2); border-radius:10px;
  background:var(--panel); min-height:44px;
  transition:border-color .25s, background-color .25s, transform .2s;
}
.vtab:hover { border-color:var(--accent-text); transform:translateY(-2px); }
.vtab[aria-selected="true"] { border-color:var(--accent-text); background:var(--accent-soft); }
.vtab-role { font-size:10px; letter-spacing:0.14em; color:var(--faint); }
.vtab[aria-selected="true"] .vtab-role { color:var(--accent-text); }
.vtab-name { font-size:14px; font-weight:500; }

/* Stage */
.proof-stage { padding:clamp(24px,3.5vw,40px); min-height:340px; position:relative; }
.pview { animation:viewIn .5s cubic-bezier(.2,.8,.2,1) both; }
.pview[hidden]{ display:none; }
@keyframes viewIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.pview-chip {
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:var(--dim);
  background:var(--panel); border:1px solid var(--line); border-radius:100px;
  padding:9px 16px; margin-bottom:24px;
}
.chip-eye { width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; position:relative; color:var(--good); flex:none; }
.chip-eye::after { content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:currentColor; transform:translate(-50%,-50%); }

/* Bid table */
.bidtable { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.bidrow {
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px;
  padding:18px 22px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel2); transition:border-color .3s, background-color .3s;
}
.bidrow.best { border-color:color-mix(in srgb,var(--good) 45%,transparent); background:color-mix(in srgb,var(--good) 8%,var(--panel2)); }
.bidrow.reserve { background:transparent; border-style:dashed; }
.br-party { font-weight:500; font-size:16px; }
.br-bid { font-size:clamp(18px,2vw,24px); font-weight:500; }
.br-tag { font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.1em; padding:5px 10px; border-radius:6px; white-space:nowrap; }
.br-tag.good { color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); }
.br-tag.dim { color:var(--faint); border:1px solid var(--line2); }
.br-tag.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); }
@media (max-width:560px){ .bidrow{ grid-template-columns:1fr auto; } .br-tag{ grid-column:1 / -1; justify-self:start; } }

/* redacted value */
.redacted {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:128px; padding:6px 14px; border-radius:8px;
  background-image:repeating-linear-gradient(45deg, var(--hatch) 0 6px, transparent 6px 12px);
  border:1px solid var(--line2);
  color:var(--faint); letter-spacing:3px; font-size:18px;
  overflow:hidden;
}
.bidrow.masked { animation:redactSnap .55s cubic-bezier(.7,0,.2,1) both; }
@keyframes redactSnap { 0%{ filter:none;} 35%{ filter:blur(1px);} 100%{ filter:none;} }
.notdisclosed { color:var(--bad)!important; background:color-mix(in srgb,var(--bad) 12%,transparent)!important; display:inline-flex; align-items:center; gap:7px; }
.mini-eyeslash { width:13px; height:13px; position:relative; display:inline-block; border:1.4px solid currentColor; border-radius:60% 60% 60% 60%/80% 80% 60% 60%; }
.mini-eyeslash::after { content:""; position:absolute; left:-2px; top:50%; width:18px; height:1.4px; background:currentColor; transform:rotate(-45deg); transform-origin:center; }

/* own bid card */
.ownbid {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 24px;
  padding:24px 26px; border-radius:14px; margin-bottom:18px;
  border:1px solid var(--line2);
}
.ownbid.win { border-color:color-mix(in srgb,var(--good) 50%,transparent); background:color-mix(in srgb,var(--good) 9%,var(--panel2)); }
.ownbid.lose { border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 7%,var(--panel2)); }
.ob-label { font-size:11px; letter-spacing:0.16em; color:var(--faint); width:100%; }
.ob-val { font-size:clamp(28px,4vw,44px); font-weight:600; letter-spacing:-0.01em; }
.ob-tag { font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.1em; padding:7px 12px; border-radius:7px; }
.ob-tag.good { color:var(--good); background:color-mix(in srgb,var(--good) 16%,transparent); }
.ob-tag.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); }

.escrow-return {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding:18px 22px; border-radius:12px;
  border:1px solid color-mix(in srgb,var(--good) 36%,transparent);
  background:color-mix(in srgb,var(--good) 8%,transparent);
}
.er-icon { font-size:22px; color:var(--good); }
.er-text { font-weight:500; }
.er-val { font-size:20px; margin-left:auto; }

.pview-foot { margin-top:24px; font-size:12px; letter-spacing:0.1em; color:var(--faint); }

/* split view */
.split-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(12px,2vw,28px); align-items:stretch; }
@media (max-width:680px){ .split-grid{ grid-template-columns:1fr; } .split-divider{ transform:rotate(90deg); padding:6px 0; } }
.split-pane {
  display:flex; flex-direction:column; gap:14px;
  padding:26px 24px; border-radius:14px; border:1px solid var(--line2); background:var(--panel2);
}
.sp-head { font-size:11px; letter-spacing:0.18em; color:var(--accent-text); }
.sp-own { font-size:17px; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sp-own b { font-weight:600; }
.sp-rival { font-size:17px; color:var(--dim); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.split-divider { display:grid; place-items:center; color:var(--accent-text); }
.split-caption { text-align:center; margin-top:26px; font-size:clamp(18px,2.4vw,28px); font-weight:500; letter-spacing:-0.015em; color:var(--text); }

/* ============================================================================
   SETTLEMENT — DvP
   ========================================================================== */
.settlement { background:var(--bg); border-top:1px solid var(--line); position:relative; z-index:2; padding:0; }
.settle-pin { padding:clamp(80px,12vh,150px) clamp(16px,4vw,40px); width:min(1200px,92vw); margin-inline:auto; }
.settle-pin .section-grid { width:100%; }

.dvp {
  position:relative; margin:clamp(40px,7vw,90px) auto;
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,4vw,60px);
  align-items:center; max-width:920px;
}
@media (max-width:640px){ .dvp{ grid-template-columns:1fr; gap:18px; } }
.dvp-leg {
  display:flex; flex-direction:column; gap:10px; text-align:center;
  padding:30px 24px; border-radius:16px;
  border:1px solid var(--line2); background:var(--panel2);
  will-change:transform; box-shadow:var(--shadow);
}
.leg-label { font-size:11px; letter-spacing:0.2em; color:var(--faint); }
.leg-amount { font-size:clamp(22px,3vw,34px); font-weight:600; letter-spacing:-0.015em; }
.dvp-asset .leg-amount { color:var(--accent-text); }
.dvp-cash .leg-amount { color:var(--good); }
.leg-from { font-size:12px; letter-spacing:0.06em; color:var(--dim); }

.dvp-core { display:flex; flex-direction:column; align-items:center; gap:14px; }
.dvp-lock { color:var(--dim); transition:color .4s; }
.dvp-lock .lock-shackle { transform-origin:20px 18px; transition:transform .5s cubic-bezier(.6,-0.4,.3,1.4); }
.dvp-status {
  font-size:12px; letter-spacing:0.16em; padding:6px 12px; border-radius:7px;
  border:1px solid var(--line2); color:var(--dim); white-space:nowrap;
  transition:color .4s, border-color .4s, background-color .4s;
}
/* settled state */
.dvp.is-settled .dvp-lock { color:var(--good); }
.dvp.is-settled .dvp-lock .lock-shackle { transform:translateY(0) rotate(0); }
.dvp.is-settled .dvp-status { color:var(--good); border-color:color-mix(in srgb,var(--good) 45%,transparent); background:color-mix(in srgb,var(--good) 12%,transparent); }
/* failed state */
.dvp.is-failed .dvp-lock { color:var(--bad); }
.dvp.is-failed .dvp-status { color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent); background:color-mix(in srgb,var(--bad) 12%,transparent); }

.dvp-controls { max-width:600px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.dvp-explainer { color:var(--dim); font-size:16px; }
.dvp-explainer strong { color:var(--text); }

/* ============================================================================
   VERIFY
   ========================================================================== */
.verify { position:relative; z-index:2; background:var(--panel); border-top:1px solid var(--line); min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
#verify-heading { white-space:nowrap; }
.verify .section-head { max-width:none; text-align:center; display:flex; flex-direction:column; align-items:center; margin-inline:auto; }
.verify .section-head .proof-intro { margin-left:auto; margin-right:auto; }
.verify-grid { display:grid; gap:18px; grid-template-columns:1fr; margin-top:10px; }
@media (min-width:760px){ .verify-grid{ grid-template-columns:repeat(3,1fr); } }
.vcard {
  padding:30px 26px 26px; border-radius:16px; border:1px solid var(--line);
  background:var(--panel2); display:flex; flex-direction:column; gap:12px;
  position:relative; transition:border-color .3s, transform .3s;
}
.vcard:hover { border-color:var(--line2); transform:translateY(-4px); }
.vcard-figure { font-size:clamp(30px,4vw,46px); font-weight:600; color:var(--accent-text); letter-spacing:0; }
.vcard h3 { font-size:19px; font-weight:600; }
.vcard p { color:var(--dim); font-size:15px; flex:1; }
.vcard-tag { align-self:flex-start; font-size:11px; letter-spacing:0.12em; padding:5px 11px; border-radius:6px; }
.vcard-tag.good { color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); }
.vcard-tag.accent { color:var(--accent-text); background:var(--accent-soft); }

.verify-cta { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:36px; }
.verify-note { font-size:12px; letter-spacing:0.1em; color:var(--faint); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer { background:var(--bg); border-top:1px solid var(--line); padding:clamp(60px,9vw,110px) clamp(16px,4vw,40px) 50px; position:relative; z-index:2; }
.footer-top { width:min(1200px,92vw); margin:0 auto clamp(40px,6vw,70px); display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px; }
.footer-claim { font-size:clamp(22px,3.4vw,42px); font-weight:500; letter-spacing:-0.02em; max-width:18ch; text-wrap:balance; }
.footer-bottom { width:min(1200px,92vw); margin:0 auto; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.footer-links a { color:var(--text); transition:color .2s; }
.footer-links a:hover { color:var(--accent-text); }
.footer-meta { font-size:11px; letter-spacing:0.16em; color:var(--faint); }
.footer-fine { width:100%; margin-top:14px; font-size:12px; color:var(--faint); letter-spacing:0.02em; }
.footer-fine em { color:var(--dim); font-style:italic; }

/* ============================================================================
   REVEAL ANIMATIONS (JS adds .in-view) — base state hidden only if JS present
   ========================================================================== */
.js .reveal-up { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.js .reveal-up.in-view { opacity:1; transform:none; }

/* responsive nav */
@media (max-width:860px){ .site-nav{ display:none; } }
@media (max-width:520px){
  .header-code { display:none; }
  .hero-stats { gap:22px; }
  .hero-visual { opacity:.5; }
}
@media (max-width:380px){
  .header-launch .arrow { display:none; }
}

/* ============================================================================
   THE ARGUMENT — horizontal-scroll placeholder panels
   ========================================================================== */
.story { position:relative; z-index:2; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(60px,9vh,110px) 0; }
.story-head { margin-bottom:clamp(30px,4vw,48px); }
.story-hint { margin-top:14px; font-size:11px; letter-spacing:0.2em; color:var(--faint); display:inline-flex; align-items:center; gap:8px; }
.story-hint-arrow { display:inline-block; animation:nudge 1.8s ease-in-out infinite; color:var(--accent-text); }
@keyframes nudge { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(5px);} }

/* When GSAP pins the section, it becomes a fixed-height stage.
   Header + panels are centered together as one group (no overlap on short
   viewports); the progress bar stays pinned at the bottom edge. */
.story.is-pinned { height:100vh; min-height:600px; padding:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(18px,3.5vh,40px); overflow:hidden; }
.story.is-pinned .story-head { position:static; width:100%; max-width:none; margin:0; padding-inline:clamp(16px,4vw,40px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.story.is-pinned .story-viewport, .story.is-pinned .story-progress { width:100%; }

/* Panels fit on screen: center them on the true middle of the page, both axes. */
.story.is-flat { min-height:100vh; padding:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(24px,5vh,56px); }
.story.is-flat .story-head { width:100%; max-width:none; margin:0; padding-inline:clamp(16px,4vw,40px); text-align:center; display:flex; flex-direction:column; align-items:center; }
.story.is-flat .story-viewport { overflow:visible; }
.story.is-flat .story-track { width:auto; justify-content:center; }
.story.is-flat .story-progress { margin-top:0; }

/* Fallback (mobile / reduced-motion / no-GSAP): native horizontal scroll. */
.story-viewport { overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.story-viewport::-webkit-scrollbar { display:none; }
.story.is-pinned .story-viewport { overflow:visible; scroll-snap-type:none; }
.story-track { display:flex; gap:clamp(16px,2.5vw,32px); padding-inline:clamp(16px,4vw,40px); width:max-content; will-change:transform; }

.spanel {
  flex:0 0 auto; width:clamp(280px,80vw,620px); scroll-snap-align:start;
  background:var(--panel2); border:1px solid var(--line); border-radius:18px;
  padding:clamp(26px,3vw,42px); display:flex; flex-direction:column;
  min-height:clamp(360px,52vh,460px); position:relative; box-shadow:var(--shadow);
}
.spanel-idx { position:absolute; top:clamp(18px,3vw,30px); right:clamp(22px,3vw,34px); font-size:clamp(40px,6vw,72px); font-weight:600; color:var(--line2); line-height:1; letter-spacing:-0.02em; }
.spanel .section-label { margin-bottom:14px; }
.spanel-title { font-size:clamp(22px,2.6vw,32px); font-weight:600; letter-spacing:-0.02em; line-height:1.1; max-width:16ch; margin-bottom:auto; }

/* skeleton placeholders */
.sk { display:flex; flex-direction:column; gap:11px; margin:26px 0; max-width:300px; }
.sk-line { height:10px; border-radius:6px; background:linear-gradient(90deg,var(--line) 0%,var(--line2) 50%,var(--line) 100%); background-size:200% 100%; animation:shimmer 2.4s linear infinite; }
.sk-line.w80{ width:80%; } .sk-line.w70{ width:70%; } .sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; }
@keyframes shimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.spanel-motif { display:flex; gap:12px; align-items:center; margin-bottom:22px; min-height:62px; }
.sk-card { flex:1; max-width:120px; height:62px; border-radius:10px; border:1px dashed var(--line2); background:var(--panel); }
.sk-box { width:74px; height:50px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); flex:none; }
.sk-lock { color:var(--accent-text); display:inline-flex; opacity:.8; }
.spanel-figure { font-size:clamp(28px,4vw,42px); font-weight:600; color:var(--line2); letter-spacing:0; }
.spanel .redacted { align-self:flex-start; }
.spanel-tag { align-self:flex-start; font-size:11px; letter-spacing:0.16em; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:5px 11px; }

/* real panel copy + motifs */
.spanel-body { color:var(--dim); font-size:clamp(15px,1.4vw,17px); line-height:1.55; max-width:42ch; margin:18px 0 auto; }
.motif-chip { font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.08em; color:var(--dim); padding:8px 12px; border-radius:8px; border:1px solid var(--line2); background:var(--panel); }
.hatch-chip { background-image:repeating-linear-gradient(45deg, var(--hatch) 0 6px, transparent 6px 12px); }
.motif-leak { font-size:11px; letter-spacing:0.1em; color:var(--bad); align-self:center; }
.motif-lock { color:var(--accent-text); display:inline-flex; padding:9px; border-radius:10px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.motif-text { font-size:12px; letter-spacing:0.12em; color:var(--accent-text); }
.spanel-cta { background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--panel2)),var(--panel2)); border-color:color-mix(in srgb,var(--accent) 26%,var(--line2)); }
.spanel-go { align-self:flex-start; margin:18px 0 0; }
.spanel-cta .spanel-tag { color:var(--accent-text); border-color:color-mix(in srgb,var(--accent) 30%,transparent); margin-top:16px; }

/* ============================================================================
   LAUNCH — bridge into product usage
   ========================================================================== */
.launch { position:relative; z-index:2; background:var(--bg); border-top:1px solid var(--line); }
.launch-grid { display:grid; gap:clamp(36px,5vw,72px); grid-template-columns:1fr; align-items:start; }
@media (min-width:880px){ .launch-grid { grid-template-columns:1.05fr 0.95fr; } }
.launch-copy .lede { margin-top:18px; }
.launch-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.launch-steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; counter-reset:none; }
.launch-steps li { display:flex; gap:18px; align-items:flex-start; padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--panel2); transition:border-color .3s, transform .3s; }
.launch-steps li:hover { border-color:var(--line2); transform:translateY(-3px); }
.ls-num { flex:none; font-size:14px; color:var(--accent-text); width:38px; height:38px; border-radius:9px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); background:var(--accent-soft); }
.launch-steps h3 { font-size:18px; font-weight:600; margin-bottom:4px; }
.launch-steps p { color:var(--dim); font-size:15px; max-width:42ch; }

.story-progress { height:2px; background:var(--line); margin:clamp(26px,3vw,40px) clamp(16px,4vw,40px) 0; border-radius:2px; overflow:hidden; }
.story.is-pinned .story-progress { position:absolute; bottom:clamp(26px,5vh,50px); left:0; right:0; margin-top:0; }
.story-progress-bar { display:block; height:100%; width:100%; background:var(--accent-text); border-radius:2px; transform-origin:left; transform:scaleX(0.2); transition:transform .1s linear; }

/* ============================================================================
   REDUCED MOTION — calm, fully legible fallback
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .js .reveal-up { opacity:1!important; transform:none!important; }
  .redact-word .redact-cover { transform:scaleX(0)!important; }
  .dot-good, .scroll-cue-line::after { animation:none!important; }
  .hero-heading .line-in { transform:none!important; }
}