/* Sound Impulse — shared brand tokens + base (all tiers) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Unbounded:wght@400;700;800&display=swap');

:root {
  --ink: #0a0a0f;
  --surface: #14141c;
  --surface-2: #1d1d28;
  --line: rgba(255, 255, 255, .08);
  --text: #f4f4f7;
  --muted: #a3a3b2;
  --lime: #c6ff3d;
  --magenta: #ff3d81;
  --violet: #7c5cff;
  --ffd: 'Unbounded', 'Arial Black', sans-serif;
  --ffb: 'Manrope', system-ui, sans-serif;
  --r: 18px;
  --pad: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.6 var(--ffb); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--ffd); line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow { font: 700 12px/1 var(--ffd); letter-spacing: .22em; text-transform: uppercase; color: var(--lime); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 800 15px/1 var(--ffb);
  text-decoration: none; border: 0; cursor: pointer; transition: transform .2s var(--ease), box-shadow .3s, background .3s; }
.btn-lime { background: var(--lime); color: #0a0a0f; box-shadow: 0 10px 30px -10px rgba(198, 255, 61, .55); }
.btn-lime:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(198, 255, 61, .7); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.demo-note { text-align: center; font-size: 12px; color: var(--muted); padding: 18px var(--pad) 28px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
