:root {scroll-behavior:smooth}
body {background:#0f0f0f;color:#f5f5f5}
.site-hero{min-height:80vh;display:grid;place-items:center;background:#111;border-radius:16px;overflow:hidden;position:relative}
.site-hero .hero-inner{max-width:1100px;width:100%;padding:6vw;display:grid;gap:1.25rem}
.site-hero .badge{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:#1DB954;color:#0b0b0b;font-weight:700;font-size:.9rem}
.site-hero .cta-row{display:flex;gap:.75rem;flex-wrap:wrap}
.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#171717;border-radius:14px;overflow:hidden}
.card .pad{padding:14px}
.footer {opacity:.8}
.fade-in {opacity:0; transform: translateY(8px); animation:fadeUp .6s ease .05s forwards}
@keyframes fadeUp {to {opacity:1; transform:none}}