/* Fonts. verbatim from brand: Inter (body) + Satoshi (headings) */
@font-face { font-family:'Inter';    src:url('../fonts/Inter-Variable.woff2') format('woff2');        font-weight:100 900; font-display:swap; font-style:normal; }
@font-face { font-family:'Satoshi';  src:url('../fonts/Satoshi-Variable.woff2') format('woff2');      font-weight:300 900; font-display:swap; font-style:normal; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight:300 700; font-display:swap; font-style:normal; }
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-500.woff2') format('woff2'); font-weight:500; font-display:swap; font-style:normal; }
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-600.woff2') format('woff2'); font-weight:600; font-display:swap; font-style:normal; }
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-700.woff2') format('woff2'); font-weight:700; font-display:swap; font-style:normal; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(123,47,255,0.45); color: #fff; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-2);
  line-height: 1.7;
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Fixed backdrop. base + radial halos, with vignette for depth */
.mesh-bg { position: fixed; inset: 0; z-index: -2; background: var(--mesh); pointer-events: none; }
.mesh-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 50% -10%, transparent 35%, rgba(4,4,15,0.7) 100%); }

/* ── Headings: Satoshi, heavy, tight ── */
h1,h2,h3,h4 { font-family: var(--font-heading); color: var(--text-1); line-height: 1.05; letter-spacing: var(--tracking-heading); font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: var(--tracking-tight); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.15rem; }
p { color: var(--text-2); }
strong { color: var(--text-1); font-weight: 600; }

/* ── Utilities ── */
.eyebrow { display:inline-flex; align-items:center; gap:var(--s2); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-section); color:var(--accent-2); }
.eyebrow::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--grad-brand-r); }
.eyebrow-green { color: var(--green); }
.eyebrow-green::before { background: var(--grad-green); }

.gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ── Containers ── */
.container-wide   { width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--s6); }
.container-narrow { width: 100%; max-width: var(--content);      margin: 0 auto; padding: 0 var(--s6); }
.section { padding-block: var(--s10); }
.site-main { min-height: 60vh; padding-bottom: var(--s10); }

@media (max-width: 600px) { body { font-size: 17px; } .section { padding-block: var(--s9); } }