/* site.css: audit-B2 fixes + design.md tokens, layered over B2's own styles.
   Numbers in comments refer to the findings table in ../audit-B2.md. */

/* #14 brand background, #1 gold is the only accent */
:root{
  --bg:#0d1117;--bg-2:#11161d;--panel:#141a22;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --muted:#a3acb9;--dim:#8a93a6;
  --violet:#d4a017;--violet-text:#d9dee8;--mint:#f3c94f;
  --r-sm:12px;--r:24px;--r-lg:24px;
}
body{font-size:16px}
header.top.scrolled{background:rgba(13,17,23,.74)}
.glow-violet{background:radial-gradient(circle,rgba(212,160,23,.10),transparent 65%)}
.glow-violet-2{display:none}
.price-card.feature{border-color:rgba(212,160,23,.35)}
.monogram::after{display:none}
/* #22 no grain over the ads */
body::after{display:none}

/* #2 ambient loops: only the hero media, logo strip and grid swap move */
.links .orbit{animation:none}
.links .wire{animation:none;stroke-dasharray:none;opacity:.5}
.hub::before{animation:none;opacity:.35}

/* #3 type scale: desktop 13/16/22/56/72, mobile 13/16/20/34/44, one 144/88 numeral */
h2{font-size:56px;line-height:1.02;letter-spacing:-.03em}
h3,.card h3{font-size:22px;line-height:1.3;letter-spacing:-.01em}
.sub,.card p,.step p,.faq p,.price-card p{font-size:16px}
.kicker{font-size:13px;letter-spacing:.08em}
.count .num{font-size:56px}
.count .c-big .num,.c-big .num{font-size:144px}
.count .num.nw{font-size:56px}
.price{font-size:56px}
.price small{font-size:16px}
.faq summary{font-size:16px}
.tag,.fbtn,nav.main a{font-size:13px}
.m-chips span,.mini-label{font-size:13px}
footer{font-size:13px}

/* #15 / #17 spacing on the 8px grid */
section{padding:96px 0}
.kicker{margin-bottom:16px}
h2{margin-bottom:16px}
.sub{margin-bottom:48px}
.head-row{margin-bottom:48px}
.toolbar{margin-bottom:24px}
.more-row{margin-top:32px}
.ctas{margin-top:32px}
.wrap{padding:0 32px}

/* #4 card padding 32 desktop */
.count,.make .card,.price-card,.founder{padding:32px}
.diagram-card{padding:24px}
.faq summary{padding:24px 32px}
.contact-card{padding:96px 32px}

/* #5 radii 12 / 24 / 999 */
.slot,.vcard,.monogram,.contact-card,.mini{border-radius:24px}
.icon,.step .sn,.m-thumbs img,.m-browser{border-radius:12px}
/* design.md §6 buttons: pill, 48px */
.btn{min-height:48px;border-radius:999px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s}
.btn-sm{min-height:44px;border-radius:999px}
.btn-gold{background:var(--gold);box-shadow:none}
.btn-gold:hover{background:var(--gold-2);box-shadow:none}

/* #10 motion: hovers 0.2s, reveals 0.3s / 12px */
.slot,.vcard{transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.fan img{transition:transform .3s var(--ease)}
.reveal{transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.reveal.d1{transition-delay:.05s}.reveal.d2{transition-delay:.1s}.reveal.d3{transition-delay:.15s}
.layer{transition:opacity .6s var(--ease);transform:none}

/* #6 weight: no blurred full-size image behind every grid tile */
.layer::before{background:#0b0e14;filter:none}

/* #11 filter row never wraps */
.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.fbtn{flex:none}

/* #18 FAQ columns */
.faq-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* #19 / #20 contrast fixes */
.fbtn[aria-pressed="true"]{background:var(--gold)}
.fbtn[aria-pressed="true"] small{color:rgba(26,20,0,.85)}
.vcard .play{background:rgba(7,9,15,.55);border-color:rgba(255,255,255,.3)}

/* ---------- logo strip: 15 real files, never retyped ---------- */
.logos{padding:48px 0 56px;border-bottom:1px solid var(--line)}
.logos-cap{font:500 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.lg{display:flex;align-items:center;justify-content:center;min-height:44px;flex:none}
.lg img{height:var(--h,24px);width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.7;transition:opacity .2s var(--ease)}
.lg:hover img{opacity:1}
.logo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:24px 32px;align-items:center}
.logo-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-mq .lg-track{display:flex;gap:56px;width:max-content;animation:lgmq 40s linear infinite}
.logo-mq:hover .track{animation-play-state:paused}
@keyframes lgmq{to{transform:translateX(-50%)}}

/* #9 768 overlap */
@media (max-width:1024px){
  .fan{width:50%;height:56%;bottom:-40px}
  .c-big .copy{max-width:56%}
  h2{font-size:44px}
}

/* ---------- mobile pass (390) ---------- */
@media (max-width:680px){
  .wrap{padding:0 16px}
  section{padding:64px 0}
  h2{font-size:34px;line-height:1.06}
  h3,.card h3{font-size:20px}
  .count .num,.count .num.nw,.price{font-size:34px}
  .count .c-big .num,.c-big .num{font-size:88px}
  .count,.make .card,.price-card,.founder{padding:24px}
  .diagram-card{padding:16px}
  .faq summary{padding:16px 24px}
  .contact-card{padding:64px 24px}
  .faq-grid{grid-template-columns:1fr}
  .logos{padding:40px 0 48px}
  .logo-grid{grid-template-columns:repeat(3,1fr);gap:16px 24px}
  .lg img{height:calc(var(--h,24px)*.8)}
  .logo-mq .lg-track{gap:32px}
  .ctas .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .logo-mq .lg-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:24px 40px}
  .logo-mq .lg-track [aria-hidden="true"]{display:none}
  .logo-mq{-webkit-mask-image:none;mask-image:none}
}

/* #1 remaining violet in B2's own rules: neutral, so gold stays the only accent */
.icon.v{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--text)}
.k-body{background:rgba(255,255,255,.08);color:var(--muted)}
.m-page .img{background:linear-gradient(160deg,#1f2733,#141a22)}
.node .nb{border-color:var(--line-2);color:var(--text)}
.feature{background:linear-gradient(180deg,rgba(26,22,14,.94),rgba(13,17,23,.94)) padding-box,linear-gradient(160deg,var(--gold-2),rgba(212,160,23,.15) 60%,rgba(255,255,255,.08)) border-box}
.spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(243,201,79,.10),transparent 60%)}