@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Figtree:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ── TYPOGRAPHY UTILS ────────────────────────────────────── */
.t-hero    { font: 800 56px/1.0 var(--font-display); letter-spacing: -0.025em; }
.t-section { font: 800 40px/1.1 var(--font-display); letter-spacing: -0.02em; }
.t-stat    { font: 800 48px/1.0 var(--font-display); letter-spacing: -0.03em; }
.t-body-lg { font: 300 19px/1.75 var(--font-body); }
.t-body    { font: 400 15px/1.7 var(--font-body); }
.t-label   { font: 500 10px/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
.t-mono    { font: 400 12px/1.8 var(--font-mono); }
.t-mono-sm { font: 400 11px/1.8 var(--font-mono); }

/* ── ANIMATIONS ────────────────────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}