:root{
  --bg: #F1ECE3;
  --bg-2:#E8E1D4;
  --paper:#FAF6EE;
  --ink:#14130F;
  --ink-2:#2A2722;
  --muted:#6B6559;
  --rule:#D8CFBE;
  --rule-2:#BEB29C;
  --accent:#C2571C;      /* burnt amber */
  --accent-2:#8A3E13;
  --gold:#B48A3F;
  --ok:#2E5E3A;
  --red:#8A2A1E;
  --shadow: 0 1px 0 #fff inset, 0 30px 60px -40px rgba(20,19,15,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight", system-ui, sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.5;
}
::selection{background:var(--accent);color:var(--paper)}

/* ========== Reveal / motion primitives ========== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in-view{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}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
}

/* Hero letter-in */
.hero-display .row{overflow:hidden; display:block}
.hero-display .row > span{display:inline-block; transform:translateY(110%); animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-display .row:nth-child(1) > span:nth-child(1){animation-delay:.05s}
.hero-display .row:nth-child(1) > span:nth-child(2){animation-delay:.18s}
.hero-display .row:nth-child(2) > span:nth-child(1){animation-delay:.32s}
.hero-display .row:nth-child(2) > span:nth-child(2){animation-delay:.42s}
@keyframes heroIn{to{transform:translateY(0)}}

/* Fund dot pulse */
.hero-display .fund .dot{animation: dotPulse 2.4s ease-in-out 1.4s infinite}
@keyframes dotPulse{0%,100%{color:var(--accent-2); transform:translateY(-.05em) scale(1)} 50%{color:var(--accent); transform:translateY(-.05em) scale(1.25)}}

/* Metric count-in accent */
.metric .val{opacity:0; transform:translateY(14px); transition:opacity 1s, transform 1s}
.metrics.in-view .metric .val{opacity:1; transform:none}
.metrics.in-view .metric:nth-child(2) .val{transition-delay:.1s}
.metrics.in-view .metric:nth-child(3) .val{transition-delay:.2s}
.metrics.in-view .metric:nth-child(4) .val{transition-delay:.3s}

/* Gap diagram bars: draw in */
.tl-bar{transform-origin:left center; transform:scaleX(0); transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gap-diagram.in-view .tl-bar.trad{transform:scaleX(1); transition-delay:.05s}
.gap-diagram.in-view .tl-bar.fact{transform:scaleX(1); transition-delay:.3s}
.gap-diagram.in-view .tl-bar.bf{transform:scaleX(1); transition-delay:.55s}

/* Secured cards stagger */
.sec-card{opacity:0; transform:translateY(14px); transition:opacity .7s, transform .7s}
.secured-grid.in-view .sec-card{opacity:1; transform:none}
.secured-grid.in-view .sec-card:nth-child(1){transition-delay:.00s}
.secured-grid.in-view .sec-card:nth-child(2){transition-delay:.06s}
.secured-grid.in-view .sec-card:nth-child(3){transition-delay:.12s}
.secured-grid.in-view .sec-card:nth-child(4){transition-delay:.18s}
.secured-grid.in-view .sec-card:nth-child(5){transition-delay:.24s}
.secured-grid.in-view .sec-card:nth-child(6){transition-delay:.30s}
.secured-grid.in-view .sec-card:nth-child(7){transition-delay:.36s}
.secured-grid.in-view .sec-card:nth-child(8){transition-delay:.42s}
.sec-card .sym{transition:transform .4s cubic-bezier(.2,.7,.2,1), background .3s, color .3s}
.sec-card:hover .sym{background:var(--accent); color:var(--paper); border-color:var(--accent); transform:scale(1.08)}

/* Roadmap cols */
.rm-col{opacity:0; transform:translateY(14px); transition:opacity .7s, transform .7s}
.rm-track.in-view .rm-col{opacity:1; transform:none}
.rm-track.in-view .rm-col:nth-child(1){transition-delay:.0s}
.rm-track.in-view .rm-col:nth-child(2){transition-delay:.1s}
.rm-track.in-view .rm-col:nth-child(3){transition-delay:.2s}
.rm-track.in-view .rm-col:nth-child(4){transition-delay:.3s}
.rm-track.in-view .rm-col.active::before{box-shadow:0 0 0 4px rgba(194,87,28,.15); animation:pingDot 2.2s ease-out infinite}
@keyframes pingDot{
  0%{box-shadow:0 0 0 0 rgba(194,87,28,.35)}
  80%{box-shadow:0 0 0 10px rgba(194,87,28,0)}
  100%{box-shadow:0 0 0 0 rgba(194,87,28,0)}
}

/* Product cards tilt on hover via gentle rotate */
.prod{transform:translateY(0) rotateX(0deg); transition:transform .35s ease, box-shadow .35s}
.prod .prod-visual{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-visual{transform:translateY(-2px)}

/* Signal cards on underwriting */
.signal{opacity:0; transform:translateY(12px); transition:opacity .6s, transform .6s}
.signals.in-view .signal{opacity:1; transform:none}
.signals.in-view .signal:nth-child(1){transition-delay:.0s}
.signals.in-view .signal:nth-child(2){transition-delay:.08s}
.signals.in-view .signal:nth-child(3){transition-delay:.16s}
.signals.in-view .signal:nth-child(4){transition-delay:.24s}

/* ADE dial draw-in */
.ade-right circle.dial-arc{
  stroke-dasharray:264; stroke-dashoffset:264;
  transition:stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1);
}
.ade-right.in-view circle.dial-arc{stroke-dashoffset:68}
.scr-row .bar i{width:0 !important; transition: width 1.6s cubic-bezier(.2,.7,.2,1)}
.ade-right.in-view .scr-row:nth-child(1) .bar i{width:88% !important}
.ade-right.in-view .scr-row:nth-child(2) .bar i{width:76% !important; transition-delay:.1s}
.ade-right.in-view .scr-row:nth-child(3) .bar i{width:81% !important; transition-delay:.2s}
.ade-right.in-view .scr-row:nth-child(4) .bar i{width:62% !important; transition-delay:.3s}
.ade-right.in-view .scr-row:nth-child(5) .bar i{width:94% !important; transition-delay:.4s}

/* Button micro-interactions */
.btn:active{transform:translateY(0) scale(.98)}

/* Nav link underline */
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav-links a:hover::after{transform:scaleX(1)}

/* Ticker pause on hover */
.ticker:hover .ticker-track{animation-play-state:paused}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-feature-settings:"ss01","ss02"; letter-spacing:.01em}
.serif{font-family:"Instrument Serif", "Times New Roman", serif; font-weight:400; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}

/* ------ Grid / container ------ */
.wrap{max-width:1400px; margin:0 auto; padding:0 28px; position:relative}
.rule{height:1px; background:var(--rule); width:100%}
.rule-strong{height:1px; background:var(--ink); width:100%}
.eyebrow{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.eyebrow .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); vertical-align:2px; margin-right:8px}

/* ------ Nav ------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{display:grid; grid-template-columns: auto 1fr auto; align-items:center; height:64px; gap:32px; padding:0 28px; max-width:1400px; margin:0 auto}
/* ---- Wordmark: Space Grotesk, tight, amber "fi" ---- */
.brand{
  display:inline-flex; align-items:baseline;
  font-family:"Space Grotesk", "Inter Tight", system-ui, sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--ink);
  text-transform:lowercase;
}
.brand .fi{color:var(--accent)}
.brand:hover .fi{color:var(--accent-2)}
/* legacy mark is now collapsed; kept hidden so older markup doesn't show an empty square */
.brand-mark{display:none !important}
.nav-links{display:flex; gap:28px; font-size:14px; color:var(--ink-2)}
.nav-links a{padding:8px 2px; position:relative}
.nav-links a:hover{color:var(--accent-2)}
.nav-cta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; font-size:13px; border-radius:999px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition: transform .15s ease, background .15s ease;
  font-weight:500;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.btn.accent{background:var(--accent); border-color:var(--accent)}
.btn.accent:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn .arr{display:inline-block; transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ------ Section scaffolding ------ */
section{padding:88px 0; position:relative}
.section-head{
  display:grid; grid-template-columns: 200px 1fr; gap:40px; align-items:baseline;
  padding-bottom:32px;
}
.section-head .num{font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.section-head h2{
  margin:0;
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:clamp(36px, 5vw, 72px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:14ch;
}
.section-head h2 em{font-style:italic; color:var(--accent-2)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:32px 0 0;
  overflow:hidden;
}
.hero-top{
  display:grid; grid-template-columns: 1fr auto 1fr; gap:24px;
  padding: 18px 28px;
  border-bottom:1px solid var(--rule);
  font-size:12px; color:var(--muted);
  font-family:"JetBrains Mono", monospace;
  letter-spacing:.06em;
  max-width:1400px; margin:0 auto;
}
.hero-top .center{text-align:center; color:var(--ink-2)}
.hero-top .right{text-align:right}
.blink{display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:50%; margin-right:6px; animation: blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.hero-main{padding: 56px 28px 28px; max-width:1400px; margin:0 auto; position:relative}
.hero-kicker{
  display:flex; gap:18px; align-items:center; margin-bottom:28px; flex-wrap:wrap;
}
.tag{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 12px; border:1px solid var(--rule-2); border-radius:999px;
  font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  background:var(--paper);
}
.tag .bullet{width:6px; height:6px; border-radius:50%; background:var(--accent)}
.tag.gold .bullet{background:var(--gold)}
.tag.ink .bullet{background:var(--ink)}

.hero-display{
  font-family:"Instrument Serif", serif;
  font-weight:400;
  font-size:clamp(64px, 13vw, 220px);
  line-height:.86;
  letter-spacing:-.035em;
  margin:0;
}
.hero-display .row{display:block}
.hero-display .you{color:var(--ink)}
.hero-display .build{font-style:italic; color:var(--ink)}
.hero-display .we{color:var(--ink)}
.hero-display .fund{font-style:italic; color:var(--accent)}
.hero-display .dot{color:var(--accent-2); display:inline-block; transform:translateY(-.05em)}

.hero-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:48px;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--rule);
  align-items:start;
}
.hero-lede{
  font-family:"Instrument Serif", serif;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.25;
  color:var(--ink-2);
  max-width:34ch;
  letter-spacing:-.005em;
}
.hero-lede em{color:var(--accent-2); font-style:italic}
.hero-right{display:flex; flex-direction:column; gap:20px; max-width:380px; margin-left:auto}
.hero-copy{font-size:15px; color:var(--ink-2); line-height:1.55}
.hero-cta-row{display:flex; gap:10px; flex-wrap:wrap}

/* Measurement marks in hero */
.measure{
  position:absolute; pointer-events:none;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.1em; color:var(--muted);
  text-transform:uppercase;
}
.measure.tl{top:12px; left:28px}
.measure.tr{top:12px; right:28px}

/* Ticker strip */
.ticker{
  margin-top:40px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  overflow:hidden; position:relative;
}
.ticker-track{
  display:flex; gap:56px; padding:14px 0;
  animation: tick 40s linear infinite;
  font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.08em; color:var(--ink-2);
  white-space:nowrap;
}
.ticker-track span{display:inline-flex; align-items:center; gap:10px}
.ticker-track .t-dot{width:5px; height:5px; border-radius:50%; background:var(--accent)}
.ticker-track .t-up{color:var(--ok)}
@keyframes tick{to{transform:translateX(-50%)}}

/* =========================================================
   PROBLEM: pay-when-paid
   ========================================================= */
.problem{background:var(--bg); padding-top:120px}
.problem-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:32px;
  padding-top:24px;
}
.problem-lead{
  grid-column: 1 / span 7;
  font-family:"Instrument Serif", serif;
  font-size:clamp(28px, 3.4vw, 52px);
  line-height:1.1; letter-spacing:-.015em;
  color:var(--ink);
}
.problem-lead em{font-style:italic; color:var(--accent-2)}
.problem-lead s{color:var(--muted); text-decoration-thickness:1px}
.problem-side{
  grid-column: 9 / span 4;
  font-size:15px; color:var(--ink-2); line-height:1.6;
}

.gap-diagram{
  grid-column: 1 / -1;
  margin-top:40px;
  border:1px solid var(--rule-2);
  background:var(--paper);
  border-radius:6px;
  padding:28px;
  position:relative;
}
.gap-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; padding-bottom:16px; border-bottom:1px dashed var(--rule-2)}
.gap-head .title{font-family:"Instrument Serif", serif; font-size:22px}
.gap-head .meta{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}

.timeline{
  position:relative; padding:32px 0 40px;
}
.tl-axis{position:relative; height:2px; background:var(--ink); margin: 44px 0 0}
.tl-tick{position:absolute; top:-6px; width:1px; height:14px; background:var(--ink)}
.tl-tick::after{content:attr(data-day); position:absolute; top:18px; left:50%; transform:translateX(-50%); font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; color:var(--muted); white-space:nowrap}

.tl-bar{
  position:absolute; height:22px; border-radius:3px;
  display:flex; align-items:center; padding:0 10px;
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper);
}
.tl-bar.trad{background:#7A6A54; top:-80px}
.tl-bar.fact{background:var(--ink-2); top:-46px}
.tl-bar.bf{background:var(--accent); top:-12px}
.tl-legend{
  display:flex; gap:28px; margin-top:56px; font-size:13px; color:var(--ink-2);
}
.tl-legend .k{display:inline-block; width:14px; height:14px; border-radius:2px; margin-right:8px; vertical-align:-2px}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how{background:var(--bg-2)}
.how-steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background:var(--rule-2);
  border:1px solid var(--rule-2);
  border-radius:6px; overflow:hidden;
}
.step{
  background:var(--paper); padding:28px 24px 32px;
  display:flex; flex-direction:column; gap:16px;
  min-height:420px;
  position:relative;
  transition: background .3s ease;
}
.step:hover{background:#FDFAF3}
.step:hover .step-diagram svg .flow-path{stroke-dashoffset:0; opacity:1}
.step:hover .step-diagram svg .flow-pulse{animation-play-state:running}
.step-num{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; color:var(--muted); display:flex; justify-content:space-between; align-items:center}
.step-num .idx-big{font-family:"Instrument Serif", serif; font-size:20px; color:var(--ink); font-style:italic; letter-spacing:-.01em}
.step-diagram{
  height:150px; border:1px solid var(--rule); border-radius:4px;
  position:relative; background:var(--bg);
  overflow:hidden;
}
.step-diagram svg{width:100%; height:100%; display:block}
.step-diagram .grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:16px 16px;
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 100%);
}
.step h3{margin:0; font-family:"Instrument Serif", serif; font-weight:400; font-size:26px; line-height:1.1; letter-spacing:-.01em}
.step h3 em{font-style:italic; color:var(--accent-2)}
.step p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.step .kpi{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; color:var(--accent-2); text-transform:uppercase; margin-top:auto; padding-top:12px; border-top:1px solid var(--rule)}

/* SVG flow primitives */
.flow-node-svg rect{fill:var(--paper); stroke:var(--ink); stroke-width:1}
.flow-node-svg text{font-family:"JetBrains Mono", monospace; font-size:9px; letter-spacing:.04em; fill:var(--ink); text-transform:uppercase}
.flow-node-svg.accent rect{fill:var(--ink); stroke:var(--ink)}
.flow-node-svg.accent text{fill:var(--paper)}
.flow-node-svg.amber rect{fill:var(--accent); stroke:var(--accent)}
.flow-node-svg.amber text{fill:var(--paper)}
.flow-path{
  fill:none; stroke:var(--ink); stroke-width:1.2;
  stroke-dasharray:300; stroke-dashoffset:300;
  opacity:.7;
  transition: stroke-dashoffset 1.4s ease, opacity .3s;
}
.in-view .flow-path{stroke-dashoffset:0; opacity:1}
.flow-pulse{
  fill:var(--accent); r:3;
  animation: pulse-flow 2.4s ease-in-out infinite;
  animation-play-state:paused;
}
.in-view .flow-pulse{animation-play-state:running}
@keyframes pulse-flow{
  0%{opacity:0; r:2}
  20%{opacity:1; r:3}
  80%{opacity:1; r:3}
  100%{opacity:0; r:2}
}

/* =========================================================
   NUMBERS / METRICS BAND
   ========================================================= */
.metrics{background:var(--ink); color:var(--paper); padding:96px 0}
.metrics .section-head h2{color:var(--paper)}
.metrics .section-head .num, .metrics .eyebrow{color:rgba(244,239,232,.55)}
.metrics-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px;
  background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.metric{
  background:var(--ink); padding:40px 28px 36px;
  display:flex; flex-direction:column; gap:12px;
}
.metric .label{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,232,.55)}
.metric .val{
  font-family:"Instrument Serif", serif; font-size:72px; line-height:.95; letter-spacing:-.03em; color:var(--paper);
}
.metric .val small{font-size:24px; color:var(--accent); margin-left:4px; letter-spacing:0}
.metric .note{font-size:13px; color:rgba(244,239,232,.7); line-height:1.5}

.mkt-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; margin-top:72px; align-items:start;
}
.mkt-row .q{
  font-family:"Instrument Serif", serif; font-style:italic; font-size:28px; line-height:1.25; color:var(--paper);
  border-left:2px solid var(--accent); padding-left:20px; max-width:26ch;
}
.mkt-list{display:flex; flex-direction:column; gap:14px; font-size:15px; color:rgba(244,239,232,.85)}
.mkt-list li{display:grid; grid-template-columns: 80px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); list-style:none}
.mkt-list .big{font-family:"Instrument Serif", serif; font-size:32px; color:var(--paper); line-height:1}
.mkt-list ul{padding:0; margin:0}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{background:var(--bg)}
.product-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.prod{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:6px;
  padding:28px; display:flex; flex-direction:column; gap:20px;
  position:relative; min-height:520px;
  transition: transform .25s ease, box-shadow .25s;
}
.prod:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.prod-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--rule); padding-bottom:16px}
.prod-head .idx{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; color:var(--muted)}
.prod-head .stage{
  font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; border:1px solid var(--rule-2); color:var(--ink-2); background:var(--bg);
}
.prod-head .stage.live{color:var(--accent); border-color:var(--accent)}
.prod h3{margin:0; font-family:"Instrument Serif", serif; font-weight:400; font-size:36px; line-height:1; letter-spacing:-.01em}
.prod .desc{font-size:14.5px; color:var(--ink-2); line-height:1.55}
.prod .specs{display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:20px; border-top:1px dashed var(--rule-2); font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.05em; color:var(--ink-2)}
.prod .specs .row{display:flex; justify-content:space-between; gap:16px}
.prod .specs .row .k{color:var(--muted)}
.prod .specs .row .v{color:var(--ink); font-weight:500}

.prod-visual{
  height:140px; border-radius:4px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--bg-2), var(--paper));
  border:1px solid var(--rule);
}

/* visual 1: stacked blocks */
.viz-blocks{position:absolute; inset:16px; display:flex; align-items:flex-end; gap:6px}
.viz-blocks i{display:block; background:var(--ink); width:14px; border-radius:1px}
.viz-blocks i:nth-child(1){height:30%; background:var(--ink-2)}
.viz-blocks i:nth-child(2){height:48%}
.viz-blocks i:nth-child(3){height:35%; background:var(--ink-2)}
.viz-blocks i:nth-child(4){height:62%}
.viz-blocks i:nth-child(5){height:44%; background:var(--accent); width:16px}
.viz-blocks i:nth-child(6){height:78%; background:var(--accent)}
.viz-blocks i:nth-child(7){height:58%; background:var(--accent-2)}
.viz-blocks i:nth-child(8){height:90%; background:var(--accent); width:16px}
.viz-label{position:absolute; top:12px; right:12px; font-family:"JetBrains Mono", monospace; font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}

/* visual 2: invoice flow */
.viz-invoice{position:absolute; inset:16px; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.viz-card{border:1px solid var(--ink); background:var(--paper); padding:10px; font-family:"JetBrains Mono", monospace; font-size:9px; letter-spacing:.04em; color:var(--ink); border-radius:2px; line-height:1.5}
.viz-card .amt{font-family:"Instrument Serif", serif; font-size:18px; display:block; margin-top:4px}
.viz-arrow{height:1px; background:var(--ink); position:relative}
.viz-arrow::after{content:"→"; position:absolute; right:-4px; top:-9px; font-size:14px; color:var(--accent)}

/* visual 3: api */
.viz-api{position:absolute; inset:16px; font-family:"JetBrains Mono", monospace; font-size:10px; color:var(--ink-2); line-height:1.65}
.viz-api .tok{color:var(--accent-2)}
.viz-api .str{color:var(--ok)}

/* =========================================================
   UNDERWRITING (ADE)
   ========================================================= */
.ade{background:var(--bg-2)}
.ade-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; align-items:stretch}
.ade-left{display:flex; flex-direction:column; gap:28px}
.ade-left h3{margin:0; font-family:"Instrument Serif", serif; font-weight:400; font-size:44px; line-height:1.05; letter-spacing:-.015em}
.ade-left h3 em{font-style:italic; color:var(--accent-2)}
.ade-left p{font-size:15px; line-height:1.6; color:var(--ink-2); max-width:52ch}
.signals{display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:8px}
.signal{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:4px;
  padding:18px;
}
.signal .label{font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-bottom:8px}
.signal .src{font-size:14px; color:var(--ink); font-weight:500}
.signal .ex{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.5}

.ade-right{
  background:var(--ink); color:var(--paper); border-radius:6px; padding:28px;
  display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden;
}
.ade-right::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(220px circle at var(--mx, -200px) var(--my, -200px), rgba(194,87,28,.18), transparent 60%),
    linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.04) 24px 25px, transparent 25px 100%),
    linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.04) 24px 25px, transparent 25px 100%);
  background-size:auto, 25px 25px, 25px 25px;
  pointer-events:none;
  transition: background .1s;
}
.ade-right *{position:relative}
.scr-head{display:flex; justify-content:space-between; font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,239,232,.55); padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1)}
.scr-head .live{color:var(--accent); display:inline-flex; gap:6px; align-items:center}
.scr-head .live .d{width:6px; height:6px; background:var(--accent); border-radius:50%; animation:blink 1.6s infinite}
.scr-project{font-family:"Instrument Serif", serif; font-size:26px; line-height:1.15}
.scr-meta{font-family:"JetBrains Mono", monospace; font-size:11px; color:rgba(244,239,232,.65); display:flex; gap:18px; flex-wrap:wrap}
.scr-meta span::before{content:"·"; margin-right:8px; color:rgba(255,255,255,.3)}
.scr-meta span:first-child::before{content:""; margin:0}
.scr-score{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1)}
.scr-score .dial{width:92px; height:92px; position:relative; display:grid; place-items:center}
.scr-score .dial svg{position:absolute; inset:0}
.scr-score .dial .n{font-family:"Instrument Serif", serif; font-size:42px; line-height:1}
.scr-score .dial .u{font-family:"JetBrains Mono", monospace; font-size:10px; color:rgba(244,239,232,.55); letter-spacing:.08em; margin-top:-4px}
.scr-score .decide{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; color:rgba(244,239,232,.55); text-transform:uppercase; display:flex; flex-direction:column; gap:6px}
.scr-score .decide .verdict{font-family:"Instrument Serif", serif; font-size:28px; color:var(--accent); letter-spacing:-.01em; text-transform:none}
.scr-score .decide .amt{font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--paper); letter-spacing:.04em}
.scr-rows{display:flex; flex-direction:column; gap:10px; font-family:"JetBrains Mono", monospace; font-size:12px}
.scr-row{display:grid; grid-template-columns: 120px 1fr auto; gap:16px; align-items:center; color:rgba(244,239,232,.75)}
.scr-row .bar{height:6px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden}
.scr-row .bar i{display:block; height:100%; background:var(--accent)}
.scr-row .v{color:var(--paper)}

/* =========================================================
   LEGAL / STRUCTURE (secured)
   ========================================================= */
.secured{background:var(--bg)}
.secured-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-top:24px}
.sec-card{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:6px;
  padding:24px; display:flex; flex-direction:column; gap:14px; min-height:240px;
  position:relative;
}
.sec-card .sym{
  width:36px; height:36px; border:1px solid var(--ink); border-radius:4px;
  display:grid; place-items:center; font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--ink);
  background:var(--bg);
}
.sec-card h4{margin:0; font-family:"Instrument Serif", serif; font-weight:400; font-size:22px; letter-spacing:-.005em; line-height:1.15}
.sec-card p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.sec-card .tag-sm{margin-top:auto; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; padding-top:10px; border-top:1px dashed var(--rule)}

/* =========================================================
   ROADMAP
   ========================================================= */
.roadmap{background:var(--bg-2)}
.rm-track{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  margin-top:40px;
  border-top:1px solid var(--ink);
}
.rm-col{
  padding:24px 24px 32px; border-right:1px solid var(--rule-2); position:relative;
}
.rm-col:last-child{border-right:0}
.rm-col::before{
  content:""; position:absolute; top:-6px; left:-1px; width:11px; height:11px; background:var(--ink);
  border-radius:50%; border:2px solid var(--bg-2);
}
.rm-col.active::before{background:var(--accent)}
.rm-phase{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-bottom:4px}
.rm-when{font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--accent-2); letter-spacing:.08em; margin-bottom:18px}
.rm-title{font-family:"Instrument Serif", serif; font-size:28px; line-height:1.1; letter-spacing:-.01em; margin-bottom:14px}
.rm-body{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-bottom:16px}
.rm-list{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-2); line-height:1.8; padding:0; margin:0; list-style:none}
.rm-list li::before{content:"▸  "; color:var(--accent)}

/* =========================================================
   PARTNERS
   ========================================================= */
.partners{background:var(--bg); padding:64px 0}
.p-row{
  display:grid; grid-template-columns: 200px 1fr; gap:40px; align-items:center;
  padding:24px 0; border-top:1px solid var(--rule);
}
.p-row:last-child{border-bottom:1px solid var(--rule)}
.p-row .label{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.logo-strip{display:flex; gap:48px; flex-wrap:wrap; align-items:center}
.logo-strip .logo{
  font-family:"Instrument Serif", serif; font-size:22px; color:var(--ink-2);
  padding:8px 4px;
  opacity:.7; letter-spacing:-.01em;
}
.logo-strip .logo.mono{font-family:"JetBrains Mono", monospace; font-size:14px; letter-spacing:.06em; text-transform:uppercase}

/* =========================================================
   TWO-AUDIENCE CTA
   ========================================================= */
.audiences{background:var(--bg); padding-top:64px}
.aud-grid{display:grid; grid-template-columns: 1fr 1fr; gap:20px}
.aud{
  background:var(--paper); border:1px solid var(--rule-2); border-radius:8px;
  padding:40px; display:flex; flex-direction:column; gap:24px;
  min-height:360px; position:relative; overflow:hidden;
}
.aud.dark{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.aud .aud-eye{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.aud.dark .aud-eye{color:rgba(244,239,232,.55)}
.aud h3{margin:0; font-family:"Instrument Serif", serif; font-weight:400; font-size:44px; line-height:1.05; letter-spacing:-.015em}
.aud h3 em{font-style:italic; color:var(--accent-2)}
.aud.dark h3 em{color:var(--accent)}
.aud p{font-size:15px; color:var(--ink-2); line-height:1.6; max-width:44ch}
.aud.dark p{color:rgba(244,239,232,.8)}
.aud ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.04em; color:var(--ink-2)}
.aud.dark ul{color:rgba(244,239,232,.8)}
.aud ul li::before{content:"↳  "; color:var(--accent)}
.aud .cta{margin-top:auto; display:flex; gap:10px}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--ink); color:var(--paper); padding:80px 0 40px; border-top:1px solid var(--ink)}
.ft-word{
  font-family:"Instrument Serif", serif;
  font-size:clamp(80px, 18vw, 280px);
  line-height:.85; letter-spacing:-.04em; color:var(--paper);
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.15);
}
.ft-word em{font-style:italic; color:var(--accent)}
.ft-grid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; padding-top:40px}
.ft-col h5{font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,232,.5); margin:0 0 16px}
.ft-col a, .ft-col p{display:block; color:rgba(244,239,232,.85); font-size:14px; margin:0 0 8px; line-height:1.6}
.ft-col a:hover{color:var(--accent)}
.ft-brand{
  display:inline-flex; align-items:baseline; margin-bottom:12px;
  font-family:"Space Grotesk", "Inter Tight", system-ui, sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--paper);
  text-transform:lowercase;
}
.ft-brand .fi{color:var(--accent)}
.ft-bot{display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.08em; color:rgba(244,239,232,.5); text-transform:uppercase; flex-wrap:wrap; gap:20px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1040px){
  .hero-grid{grid-template-columns:1fr}
  .how-steps{grid-template-columns: repeat(2, 1fr)}
  .metrics-grid{grid-template-columns: repeat(2, 1fr)}
  .product-grid{grid-template-columns: 1fr}
  .ade-grid{grid-template-columns:1fr}
  .secured-grid{grid-template-columns: repeat(2, 1fr)}
  .rm-track{grid-template-columns: 1fr 1fr}
  .aud-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns: 1fr 1fr}
  .section-head{grid-template-columns: 1fr}
  .problem-lead, .problem-side{grid-column: 1 / -1}
  .mkt-row{grid-template-columns: 1fr}
  .mkt-list li{grid-template-columns: 60px 1fr}
}
@media (max-width: 640px){
  section{padding:64px 0}
  .nav-links{display:none}
  .how-steps, .metrics-grid, .secured-grid, .rm-track{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .hero-top{grid-template-columns:1fr; font-size:10.5px; padding:12px 20px}
  .hero-top .right, .hero-top .center{text-align:left}
  .wrap, .nav-inner, .hero-main{padding-left:20px; padding-right:20px}
}