/* ClawGentics — brutalist editorial design system.
   Flat by design: depth comes from surface contrast (canvas -> white -> black),
   never from shadows. Do not add box-shadow to cards or buttons. */

@font-face{font-family:'Anton';src:url('../fonts/anton.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'InterVar';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JBMono';src:url('../fonts/jetbrains-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --carbon:#000; --paper:#fff; --canvas:#e5e5e5; --mist:#f3f3f3;
  --ash:#c6c6c6; --smoke:#979797; --slate:#444; --graphite:#2f2f2f;
  --mint:#d1ffca; --voltage:#fff100;

  --f-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --f-body:'InterVar',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JBMono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1200px; --gap:80px; --pad:24px; --navh:96px;
  --r-tag:64px; --r-card:32px; --r-btn:6px; --r-pill:48px; --r-big:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--carbon);
  font-family:var(--f-body); font-size:16px; line-height:1.25;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- type ---------- */
.display{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.9; letter-spacing:-.03em; margin:0;
  font-size:clamp(44px,9.2vw,130px);
}
.display--sm{font-size:clamp(34px,6vw,80px)}
h2.sec-title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:-.03em; margin:0 0 24px;
  font-size:clamp(32px,5.2vw,68px);
}
h3{
  font-family:var(--f-body); font-weight:500; text-transform:uppercase;
  font-size:clamp(22px,2.6vw,40px); line-height:1.1; letter-spacing:-.02em; margin:0 0 12px;
}
p{margin:0 0 16px; color:var(--slate); line-height:1.5}
.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.45; color:var(--slate); max-width:62ch}

.mono{font-family:var(--f-mono); font-size:12px; letter-spacing:-.03em; line-height:1.3}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--smoke); margin:0 0 16px; display:block;
}
.tag{
  display:inline-block; background:var(--mint); color:var(--carbon);
  border-radius:var(--r-tag); padding:7px 16px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:-.02em;
}
.hl{background:var(--voltage); padding:0 4px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:96px; display:flex; align-items:center;
  background:var(--canvas);
}
.nav-in{max-width:var(--max); margin:0 auto; padding:0 24px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
/* the SVG mark carries its own corner radius, so no clipping here */
.brand-mark{width:30px; height:30px; display:block}
.brand-name{font-family:var(--f-display); text-transform:uppercase; font-size:22px; letter-spacing:-.02em}
.pill{
  display:flex; align-items:center; gap:26px;
  background:var(--paper); border-radius:var(--r-pill); padding:14px 28px;
}
.pill a{font-size:15px; font-weight:500; color:var(--slate); text-decoration:none; letter-spacing:-.01em}
.pill a:hover{color:var(--carbon)}
.nav-cta{
  background:var(--carbon); color:var(--paper); text-decoration:none;
  border-radius:var(--r-btn); padding:15px 22px; font-size:15px; font-weight:500;
  white-space:nowrap; flex:0 0 auto;
}
.nav-cta:hover{background:var(--graphite)}
@media(max-width:1000px){ .pill{display:none} .nav{height:78px} :root{--navh:78px} }

/* ---------- buttons ---------- */
.btn{display:inline-block; text-decoration:none; font-weight:500; font-size:16px;
  border-radius:var(--r-btn); padding:16px 26px; transition:background .15s,color .15s}
.btn-primary{background:var(--carbon); color:var(--paper)}
.btn-primary:hover{background:var(--graphite)}
.btn-ghost{background:transparent; color:var(--slate); border:1.5px solid var(--slate)}
.btn-ghost:hover{background:var(--carbon); border-color:var(--carbon); color:var(--paper)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* ---------- announce ---------- */
.announce{background:var(--carbon); color:var(--paper); text-align:center;
  padding:11px 20px; font-size:14px}
.announce a{color:var(--voltage); text-decoration:none; font-weight:500}
.announce a:hover{text-decoration:underline}

/* ---------- hero (scroll-driven) ----------
   .hero-track is the scroll runway; .hero-stage pins inside it. Track height
   IS the animation duration — shortening it makes the morph feel rushed. */
.hero-track{height:260vh; position:relative}
/* Sticks BELOW the nav, and its height excludes the nav, so the pinned frame is
   the space the user can actually see. Before it sticks the stage also sits
   under the announce bar, which is why the art has to stay well under 100vh. */
.hero-stage{position:sticky; top:var(--navh); height:calc(100vh - var(--navh)); display:flex; align-items:center}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%}
.hero-copy{max-width:none}
.hero-sub{margin-top:clamp(14px,2.6vh,32px); max-width:44ch; font-size:17px; line-height:1.5; color:var(--slate)}

/* The pinned hero must fit the VIEWPORT HEIGHT, not just its width. At 130px the
   headline alone ran 690px tall and pushed the tower off the bottom of a short
   window. Sizing on min(vw, vh) makes it shrink when the window is short. */
.hero-track .display{font-size:clamp(38px,min(8.4vw,12.4vh),120px)}
.hero-track .btn-row{margin-top:clamp(16px,2.8vh,30px)}

/* The hero IS the product: a fund waterfall that computes itself as you scroll.
   Numbers and bar widths are scrubbed directly from scroll progress, so it reads
   as a live calculation rather than a decorative animation. Figures are exact:
   100 + 8 + 2 + 72 + 18 = 200M, GP taking precisely 20% of the 100M profit.
   Finance people check this, so do not round it for looks. */
.calc{
  background:var(--paper); border-radius:var(--r-card); padding:30px 30px 24px;
  margin-left:auto; width:100%; max-width:560px;
}
.calc-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.calc-tag{
  background:var(--mint); color:var(--carbon); border-radius:var(--r-tag);
  padding:6px 15px; font-family:var(--f-mono); font-size:12px; letter-spacing:-.02em;
}
.calc-state{color:var(--smoke); text-transform:uppercase; letter-spacing:.09em; font-size:11px}
.calc-input{
  color:var(--slate); font-size:12px; padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--ash);
}
.crow{display:grid; grid-template-columns:1fr 1.15fr auto; align-items:center; gap:14px; margin-bottom:15px}
.crow-lab{color:var(--slate); font-size:11.5px}
.crow-track{height:14px; background:var(--mist); border-radius:4px; overflow:hidden}
.crow-bar{display:block; height:100%; width:0; border-radius:4px}
.crow-cap{background:var(--graphite)}
.crow-pref{background:var(--smoke)}
.crow-catch{background:var(--ash)}
.crow-lp{background:var(--mint)}
.crow-gp{background:var(--voltage)}
.crow-num{font-size:12.5px; text-align:right; min-width:9ch; font-variant-numeric:tabular-nums}

.calc-tot{border-top:1px solid var(--ash); margin-top:20px; padding-top:18px}
.tot{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.tot-l{color:var(--slate); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em}
.tot-v{font-family:var(--f-display); font-size:clamp(22px,2.6vw,32px); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.calc-foot{color:var(--smoke); font-size:11px; margin-top:14px; opacity:0; transition:opacity .4s ease}
.calc-foot.on{opacity:1}
@media(max-width:900px){.calc{max-width:none; padding:24px 20px 20px}}



@media(max-width:900px){
  .hero-track{height:220vh}
  .hero-grid{grid-template-columns:1fr; gap:20px}
  .calc{order:-1; margin:0 auto}
  .hero-stage{height:auto; position:static; padding:24px 0 56px}
  .hero-track{height:auto}
}

/* No pinning and no motion when motion is reduced: show the rebuilt tower
   assembled, since that is the state that names the four products. */
@media(prefers-reduced-motion:reduce){
  .hero-track{height:auto}
  .hero-stage{position:static; height:auto; padding:40px 0 96px}
  .calc{max-width:none}
}

/* ---------- sections ---------- */
section{padding:var(--gap) 0}
/* the nav is sticky at 96px, so anchor jumps must clear it or the section
   heading lands underneath the nav bar */
section[id]{scroll-margin-top:112px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sec-head{max-width:70ch; margin-bottom:48px}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.stat{background:var(--paper); border-radius:var(--r-card); padding:34px 28px}
.stat-n{font-family:var(--f-display); font-size:clamp(44px,5.4vw,72px); line-height:.9;
  letter-spacing:-.03em; margin-bottom:12px}
.stat-l{font-size:14px; color:var(--slate); line-height:1.35}
@media(max-width:820px){.stats{grid-template-columns:1fr}}

/* products */
.prod{background:var(--paper); border-radius:var(--r-card); padding:40px; margin-bottom:24px}
.prod:last-child{margin-bottom:0}
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.prod-name{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(30px,3.6vw,52px);
  line-height:.92; letter-spacing:-.03em; margin:14px 0 6px}
.prod-role{font-size:14px; color:var(--smoke); text-transform:uppercase; letter-spacing:.06em;
  font-family:var(--f-mono); margin-bottom:16px}
.prod ul{list-style:none; margin:20px 0 0; padding:0}
.prod li{position:relative; padding-left:26px; margin-bottom:12px; font-size:15px;
  color:var(--slate); line-height:1.45}
.prod li::before{content:""; position:absolute; left:0; top:8px; width:12px; height:12px;
  background:var(--mint); border-radius:3px}
@media(max-width:900px){.prod{padding:28px} .prod-grid{grid-template-columns:1fr; gap:28px}}

/* chart shells */
.viz{background:var(--mist); border-radius:24px; padding:26px}
.viz-cap{font-family:var(--f-mono); font-size:12px; color:var(--smoke); margin-bottom:18px}
.bars{display:flex; align-items:flex-end; gap:14px; height:210px}
.bar-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%}
/* min-height keeps a genuinely small bar (the 2% GP catch-up) visible without
   overstating it — the value label above each bar carries the real number. */
.bar{border-radius:8px 8px 0 0; width:100%; min-height:5px; transition:height .9s cubic-bezier(.22,1,.36,1)}
.bar-lab{font-family:var(--f-mono); font-size:11px; color:var(--smoke); margin-top:10px;
  text-align:center; line-height:1.25}
.bar-val{font-family:var(--f-mono); font-size:12px; text-align:center; margin-bottom:6px}
.legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px}
.legend span{font-family:var(--f-mono); font-size:11px; color:var(--slate);
  display:flex; align-items:center; gap:7px}
.dot{width:11px; height:11px; border-radius:3px; display:inline-block}

/* inverted block */
.inverted{background:var(--carbon); color:var(--paper); border-radius:var(--r-big); padding:72px 48px}
.inverted h2{color:var(--paper)}
.inverted p{color:var(--smoke)}
.inverted .eyebrow{color:var(--smoke)}
@media(max-width:820px){.inverted{padding:44px 26px; border-radius:32px}}

/* stack diagram */
.stack{display:grid; gap:14px; margin-top:40px}
.layer{border:1.5px solid #333; border-radius:20px; padding:22px 24px}
.layer-t{font-family:var(--f-mono); font-size:12px; color:var(--voltage); margin-bottom:12px;
  letter-spacing:.06em; text-transform:uppercase}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{border:1px solid #3a3a3a; border-radius:var(--r-tag); padding:7px 15px;
  font-family:var(--f-mono); font-size:12px; color:#ddd}
.chip--mint{background:var(--mint); color:var(--carbon); border-color:var(--mint)}

/* why cards */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.why{background:var(--paper); border-radius:var(--r-card); padding:34px}
.why h3{font-size:clamp(20px,2.1vw,28px); margin-bottom:10px}
.why p{font-size:15px; margin:0}
.why-n{font-family:var(--f-mono); font-size:12px; color:var(--smoke); margin-bottom:18px; display:block}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}}

/* quote */
.quote{padding:0}
.quote-in{background:var(--mint); border-radius:var(--r-big); padding:64px 48px; text-align:center}
.quote-t{font-family:var(--f-display); text-transform:uppercase; line-height:.95;
  letter-spacing:-.03em; font-size:clamp(26px,3.9vw,54px); margin:0 0 22px}
.quote-a{font-family:var(--f-mono); font-size:12px; color:var(--slate)}
@media(max-width:820px){.quote-in{padding:40px 24px; border-radius:32px}}

/* cta */
.cta-in{background:var(--paper); border-radius:var(--r-big); padding:72px 48px; text-align:center}
.cta-in p{margin-left:auto; margin-right:auto; max-width:56ch}
.cta-mail{font-size:14px; color:var(--smoke); margin-top:22px}
.cta-mail a{color:var(--carbon)}
@media(max-width:820px){.cta-in{padding:44px 24px; border-radius:32px}}

/* footer */
.foot{background:var(--carbon); color:var(--paper); padding:56px 0 40px; margin-top:var(--gap)}
.foot-in{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start}
.foot a{color:var(--smoke); text-decoration:none; font-size:14px}
.foot a:hover{color:var(--paper)}
.foot-links{display:flex; flex-wrap:wrap; gap:20px}
.foot-note{color:var(--smoke); font-size:13px; margin-top:34px; font-family:var(--f-mono)}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}
.par{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .par{transform:none !important}
  .bar{transition:none}
}