/* ================================================
   BEATS.CSS – CS Productions
   Blau → Lila Verlauf
   ================================================ */

:root {
  --primary:      #0b9cd9;
  --primary-2:    #38bdf8;
  --primary-3:    #7dd3fc;
  --secondary:    #22c55e;
  --secondary-2:  #4ade80;
  --purple:       #a855f7;
  --purple-2:     #c084fc;
  --purple-3:     #e879f9;
  --surface:      #100a22;
  --surface-2:    #18103a;
  --surface-3:    #201548;
  --text:         #f0eeff;
  --text-soft:    #b8aede;
  --text-muted:   #7060a0;
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.15);
  --radius-xl:    28px;
  --radius-lg:    22px;
  --radius-md:    18px;
  --radius-sm:    12px;
  --radius-pill:  999px;
  --shadow-dark:  0 24px 64px rgba(0,0,0,0.55);
  --shadow-purple: 0 0 0 1px rgba(168,85,247,0.18), 0 20px 60px rgba(168,85,247,0.2);
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --ease-snappy:  cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { box-sizing: border-box; }

body.page-beats {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 90%  50% at 0% 5%,   rgba(11,156,217,0.18)  0%, transparent 55%),
    radial-gradient(ellipse 60%  40% at 8% 38%,   rgba(56,189,248,0.10)  0%, transparent 50%),
    radial-gradient(ellipse 80%  60% at 100% 55%,  rgba(168,85,247,0.20)  0%, transparent 55%),
    radial-gradient(ellipse 120% 50% at 50% 100%,  rgba(92,21,133,0.55)   0%, transparent 65%),
    radial-gradient(ellipse 70%  35% at 75% 72%,   rgba(192,38,211,0.12)  0%, transparent 50%),
    radial-gradient(ellipse 50%  30% at 92% 8%,    rgba(34,197,94,0.07)   0%, transparent 45%),
    linear-gradient(165deg,
      #040916 0%, #060b1d 8%, #080e28 16%, #0b1035 26%,
      #10093a 36%, #180a40 44%, #230b4a 52%, #2e0d52 60%,
      #3a0f5e 68%, #450f6a 76%, #4e1272 84%, #521478 92%, #4a126e 100%
    );
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.skip-link {
  position:absolute; left:-999px; top:0; z-index:9999;
  background:#fff; color:#000; padding:10px 14px; border-radius:10px;
}
.skip-link:focus { left:16px; top:16px; }
.page-wrapper { min-height: 100vh; overflow-x: clip; }
.section-bleed { background: transparent !important; }

.beats-hero-inner, .beats-filter-inner, .beats-list-inner,
.license-info-inner, .beats-cta-inner, .footer-inner {
  width: min(calc(100% - 40px), 1120px);
  margin: 0 auto;
  position: relative;
}

h1,h2,h3,h4 { font-family: "Bebas Neue", system-ui, sans-serif; letter-spacing: 0.02em; }

.beats-eyebrow, .beats-filter-eyebrow, .beats-list-kicker,
.license-eyebrow, .beats-cta-eyebrow, .beat-type, .beat-license-eyebrow,
.license-tier, .beats-stat-label, .beats-panel-kicker, .hero-scroll-hint {
  font-family: "Space Mono", monospace;
}

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:44px; padding:10px 22px;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    background 180ms ease, border-color 180ms ease, color 180ms ease, filter 180ms ease;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  position:relative; overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent 60%);
  opacity:0; transition:opacity 200ms ease; pointer-events:none; border-radius:inherit;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform:translateY(-2px); }
  .btn:hover::after { opacity:1; }
}
.btn:active { transform:translateY(0) scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color:#fff;
  box-shadow: 0 12px 32px rgba(124,58,237,0.35);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.1); box-shadow: 0 18px 44px rgba(124,58,237,0.50); }
}
.btn-primary:active { filter: brightness(1.1); }

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text); border-color: rgba(168,85,247,0.2);
  backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.35); }
}
.btn-ghost:active { background:rgba(168,85,247,0.12); }

.glass-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.pulse-border { position:relative; overflow:hidden; }
.pulse-border::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(56,189,248,.5), rgba(168,85,247,.4), rgba(192,38,211,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderPulse 3.5s linear infinite; pointer-events:none;
}
@keyframes borderPulse { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }

/* ── HERO ─────────────────────────────────────── */
.beats-hero { position:relative; padding:120px 0 44px; overflow:hidden; }
.beats-hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(70px); }
.beats-hero-orb-a { width:500px; height:500px; left:-80px; top:20px; background:radial-gradient(circle,rgba(11,156,217,0.22),transparent 65%); }
.beats-hero-orb-b { width:420px; height:420px; right:-60px; top:80px; background:radial-gradient(circle,rgba(168,85,247,0.22),transparent 65%); }
.beats-hero-inner { display:grid; grid-template-columns:1.1fr 0.9fr; gap:20px; align-items:center; }
.beats-eyebrow { display:inline-block; margin:0 0 14px; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--purple-2); }
.beats-hero h1 { margin:0 0 18px; font-size:clamp(54px,8vw,108px); line-height:0.9; }
.beats-hero h1 span { color:var(--purple-2); }
.beats-hero-text { margin:0; max-width:720px; color:var(--text-soft); font-size:16px; line-height:1.8; font-weight:300; }
.beats-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.beats-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.beats-stat { padding:16px 14px; border-radius:var(--radius-md); background:rgba(16,10,34,0.75); border:1px solid rgba(168,85,247,0.14); box-shadow:var(--shadow-dark); }
.beats-stat-num { display:block; font-family:"Bebas Neue",sans-serif; font-size:38px; line-height:0.9; background:linear-gradient(135deg,var(--primary-2),var(--purple-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.beats-stat-label { display:block; margin-top:8px; color:var(--text-muted); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; }
.hero-scroll-hint { display:inline-flex; align-items:center; gap:10px; margin-top:22px; color:var(--text-muted); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; }
.hero-scroll-line { width:40px; height:1px; background:var(--text-muted); }
.hero-scroll-dot { width:6px; height:6px; border-radius:50%; background:var(--purple-2); animation:scrollBounce 1.8s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(7px);opacity:.4} }

/* ── FILTER ──────────────────────────────────── */
.beats-filter-section { padding: 12px 0 24px; }
.beats-filter-top { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.beats-filter-copy h2 { margin:0; font-size:clamp(30px,4vw,48px); line-height:0.95; }
.beats-filter-eyebrow { display:inline-block; margin:0 0 14px; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--purple-2); }
.beats-results-badge { padding:10px 14px; border-radius:999px; background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.18); color:var(--text); font-size:13px; }
.beats-results-badge span { color:var(--purple-2); font-weight:700; }
.beats-filter-bar {
  display:grid; grid-template-columns:1.2fr repeat(3,minmax(0,0.68fr)) auto;
  gap:10px; align-items:end; padding:16px; border-radius:var(--radius-xl);
  background:rgba(16,10,34,0.80); border:1px solid rgba(168,85,247,0.12); box-shadow:var(--shadow-dark);
}
.beats-field { display:flex; flex-direction:column; gap:8px; }
.beats-field label { color:var(--text-muted); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-family:"Space Mono",monospace; }

/* ── SELECT & INPUT FIX (Windows-kompatibel) ─── */
.beats-field input,
.beats-field select {
  min-height:46px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,0.20);
  /* eigener Hintergrund – kein System-Default mehr */
  background: rgba(16,10,34,0.95);
  color: #f0eeff;          /* explizit weiß, nie System-Default */
  padding:0 16px;
  outline:none;
  font-family:"Outfit",system-ui,sans-serif;
  font-size:14px;
  transition:border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  /* Safari/Chrome eigenen Pfeil entfernen, damit unser Pfeil sichtbar ist */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.beats-field input::placeholder { color: rgba(192,132,252,0.45); }
.beats-field input:focus,
.beats-field select:focus {
  border-color:rgba(168,85,247,0.5);
  box-shadow:0 0 0 2px rgba(168,85,247,0.18);
  background:rgba(20,10,40,0.98);
}

/* Eigener Dropdown-Pfeil für <select> */
.beats-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23c084fc' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

/* <option> Styling – erzwingt dunklen BG auf Windows Chrome */
.beats-field select option {
  background: #100a22;
  color: #f0eeff;
}
/* Windows Firefox eigenes Styling */
.beats-field select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #f0eeff;
}

.beats-reset-btn {
  min-height:46px; padding:0 18px; border-radius:999px;
  border:1px solid rgba(168,85,247,0.24); background:rgba(168,85,247,0.08);
  color:var(--purple-2); cursor:pointer; transition:background 180ms, border-color 180ms;
  font-family:"Space Mono",monospace; font-size:12px; letter-spacing:0.08em;
}
@media (hover: hover) and (pointer: fine) {
  .beats-reset-btn:hover { background:rgba(168,85,247,0.16); border-color:rgba(168,85,247,0.4); }
}
.beats-reset-btn:active { background:rgba(168,85,247,0.18); }

/* ══════════════════════════════════════════════
   BEAT CARDS – Kompaktes Track-Listen-Design
   ══════════════════════════════════════════════ */
.beats-list-section { padding: 0 0 52px; }
.beats-list-head { margin-bottom: 16px; }
.beats-list-kicker { font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--purple-2); }

/* Grid: eine Spalte, volle Breite – Listen-Stil */
.beats-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── BEAT CARD ───────────────────────────────── */
.beat-card {
  position: relative;
  display: grid;
  /* Linke Accent-Spur | Nummer | Waveform | Infos | Player | Buttons */
  grid-template-columns: 4px 52px 70px 1fr auto auto;
  align-items: center;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(16,10,34,0.82);
  border: 1px solid rgba(168,85,247,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: border-color 250ms ease, box-shadow 250ms ease, background 250ms ease;
  min-height: 76px;
}

@media (hover: hover) and (pointer: fine) {
  .beat-card:hover {
    border-color: rgba(168,85,247,0.28);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.12);
    background: rgba(20,12,40,0.90);
  }
  .beat-card:hover .beat-card-accent { opacity: 1; }
  .beat-card:hover .beat-wave-bars span { animation-play-state: running; }
}

/* Linke Accent-Linie */
.beat-card-accent {
  grid-column: 1;
  align-self: stretch;
  background: linear-gradient(180deg, var(--primary-2), var(--purple-2), transparent);
  opacity: 0.35;
  transition: opacity 250ms ease;
  border-radius: 16px 0 0 16px;
}

/* Nummer */
.beat-card-number {
  grid-column: 2;
  font-family: "Space Mono", monospace;
  font-size: 13px;
  color: rgba(192,132,252,0.45);
  text-align: center;
  letter-spacing: 0;
  user-select: none;
  padding: 0 4px;
}

/* Waveform-Icon – kompakt */
.beat-card-visual {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 100%;
  background: transparent;
}

.beat-wave-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 36px;
}

.beat-wave-bars span {
  display: block;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--purple-2), var(--primary-2));
  animation: waveJump 1.8s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0.7;
}

/* Beats die gerade spielen – Animation aktiv */
.beat-card.is-playing .beat-wave-bars span {
  animation-play-state: running;
  opacity: 1;
}

.beat-wave-bars span:nth-child(1)  { height:10px; animation-delay:.00s; }
.beat-wave-bars span:nth-child(2)  { height:22px; animation-delay:.12s; }
.beat-wave-bars span:nth-child(3)  { height:14px; animation-delay:.06s; }
.beat-wave-bars span:nth-child(4)  { height:28px; animation-delay:.18s; }
.beat-wave-bars span:nth-child(5)  { height:18px; animation-delay:.03s; }
.beat-wave-bars span:nth-child(6)  { height:32px; animation-delay:.15s; }
.beat-wave-bars span:nth-child(7)  { height:12px; animation-delay:.09s; }
.beat-wave-bars span:nth-child(8)  { height:24px; animation-delay:.21s; }
.beat-wave-bars span:nth-child(9)  { height:16px; animation-delay:.24s; }
.beat-wave-bars span:nth-child(10) { height:20px; animation-delay:.27s; }

@keyframes waveJump {
  0%,100% { transform:scaleY(.4); opacity:.35; }
  50%      { transform:scaleY(1);  opacity:1; }
}

/* Beat Info – Mitte */
.beat-card-content {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
}

.beat-top-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.beat-type {
  font-family: "Space Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-2);
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}

.beat-title {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beat-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.beat-meta-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(168,85,247,0.07);
  border: 1px solid rgba(168,85,247,0.14);
  color: var(--text-soft); font-size: 11px;
  font-family: "Space Mono", monospace;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Dateiname ausblenden – zu technisch für User */
.beat-filename { display: none; }

/* ── INLINE PLAYER (Mitte-Rechts) ──────────────
   Kompakter Seek-Player direkt in der Zeile
   ─────────────────────────────────────────────── */
.beat-card-player {
  grid-column: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px;
  min-width: 220px;
  max-width: 280px;
}

.custom-player {
  display: contents; /* Player-Elemente werden von beat-card-player gehandelt */
}

.player-main-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.player-btn {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.18);
  background: rgba(168,85,247,0.06);
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 11px;
  transition: background 180ms, border-color 180ms, color 180ms;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .player-btn:hover { background:rgba(168,85,247,0.18); border-color:rgba(168,85,247,0.38); color:var(--text); }
}
.player-btn:active { background:rgba(168,85,247,0.22); color:var(--text); }

/* Play-Button etwas größer & hervorgehoben */
.player-play, .player-pause {
  width: 38px; height: 38px;
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.28);
  color: var(--purple-2);
}

.player-play.is-playing {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(168,85,247,0.4);
}

/* Seekbar-Zeile */
.player-seek-wrap {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 6px;
}

.player-time {
  color: var(--text-muted);
  font-size: 10px;
  font-family: "Space Mono", monospace;
  text-align: center;
  letter-spacing: 0;
  min-width: 0;
}

.player-seekbar {
  position: relative; height: 6px; border-radius: 999px;
  background: rgba(168,85,247,0.14); cursor: pointer; overflow: visible;
}
.player-seek-fill {
  position: absolute; left:0; top:0; bottom:0; width:0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-2), var(--purple-2));
}
.player-seek-thumb {
  position: absolute; top:50%; left:0%; width:12px; height:12px;
  border-radius: 50%; background: #e8d8ff;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.3);
  transform: translate(-50%,-50%);
}

/* ── KAUFBUTTONS (ganz rechts) ──────────────── */
.beat-card-actions {
  grid-column: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 12px 8px;
  align-items: stretch;
}

.beat-buy {
  white-space: nowrap;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 12px;
}

.beat-exclusive {
  white-space: nowrap;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 12px;
}

/* ── "NOW PLAYING" Indikator ────────────────── */
.beat-card.is-playing {
  border-color: rgba(168,85,247,0.32);
  background: rgba(22,12,44,0.92);
}
.beat-card.is-playing .beat-card-accent { opacity: 1; }
.beat-card.is-playing .beat-card-number { color: var(--purple-2); }

/* ── EMPTY STATE ─────────────────────────────── */
.beats-empty-state {
  margin-top:22px; padding:36px 22px; border-radius:var(--radius-xl);
  background:rgba(16,10,34,0.75); border:1px solid rgba(168,85,247,0.1);
  text-align:center; box-shadow:var(--shadow-dark);
}
.beats-empty-state[hidden] { display:none !important; }
.beats-empty-icon { width:66px; height:66px; margin:0 auto 14px; display:grid; place-items:center; border-radius:20px; background:rgba(168,85,247,0.1); color:var(--purple-2); font-family:"Bebas Neue",sans-serif; font-size:34px; }
.beats-empty-state h3 { margin:0 0 10px; font-size:34px; }
.beats-empty-state p  { margin:0; color:var(--text-soft); }

/* ── LICENSE INFO ─────────────────────────────── */
.license-info-section { padding: 28px 0 50px; }
.license-copy { margin-bottom:16px; }
.license-copy h2 { margin:0 0 12px; font-size:clamp(34px,5vw,58px); line-height:0.95; }
.license-copy p  { margin:0; max-width:700px; color:var(--text-soft); line-height:1.8; }
.license-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.license-card { padding:20px; border-radius:var(--radius-xl); background:rgba(16,10,34,0.80); border:1px solid rgba(168,85,247,0.12); box-shadow:var(--shadow-dark); }
.license-tier { color:var(--purple-2); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:10px; }
.license-card h3 { margin:0 0 10px; font-size:30px; line-height:0.94; }
.license-card p  { margin:0; color:var(--text-soft); line-height:1.75; }

/* ── CTA ─────────────────────────────────────── */
.beats-cta-section { padding: 0 0 58px; }
.beats-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px; border-radius:var(--radius-xl); background:linear-gradient(160deg,rgba(24,16,58,0.95),rgba(16,10,34,0.92)); border:1px solid rgba(168,85,247,0.16); box-shadow:var(--shadow-dark),var(--shadow-purple); }
.beats-cta-eyebrow { display:block; margin-bottom:10px; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--purple-2); }
.beats-cta-copy h2 { margin:0 0 10px; font-size:clamp(32px,5vw,52px); line-height:0.94; }
.beats-cta-copy p  { margin:0; max-width:660px; color:var(--text-soft); line-height:1.8; }
.beats-cta-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* ── FOOTER ──────────────────────────────────── */
.footer { padding:22px 0 30px; background:rgba(4,2,12,0.75); backdrop-filter:blur(20px); border-top:1px solid rgba(168,85,247,0.1); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; }
.footer-copy { color:var(--text-muted); letter-spacing:0.1em; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a { color:var(--text-muted); font-size:12px; letter-spacing:0.06em; transition:color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { color:var(--purple-2); }
}
.footer-links a:active { color:var(--purple-2); }
.footer-socials .social-icon { width:38px; height:38px; border-radius:11px; border:1px solid rgba(168,85,247,0.18); background:rgba(168,85,247,0.06); }
.footer-socials .social-icon svg { width:18px; height:18px; opacity:0.7; transition:opacity 180ms; color:var(--text-soft); }
@media (hover: hover) and (pointer: fine) {
  .footer-socials .social-icon:hover svg { opacity:1; }
}

/* ── LICENSE MODAL ───────────────────────────── */
.beat-license-modal { position:fixed; inset:0; display:none; z-index:500; }
.beat-license-modal.active { display:block; }
.beat-license-backdrop { position:absolute; inset:0; background:rgba(4,2,12,0.82); backdrop-filter:blur(12px); }
.beat-license-dialog { position:relative; width:min(calc(100% - 32px),980px); margin:72px auto; padding:28px; border-radius:var(--radius-xl); background:linear-gradient(160deg,rgba(24,16,58,0.98),rgba(16,10,34,0.96)); border:1px solid rgba(168,85,247,0.18); box-shadow:var(--shadow-dark),var(--shadow-purple); color:var(--text); z-index:1; }
.beat-license-close { position:absolute; top:12px; right:14px; width:42px; height:42px; border-radius:999px; border:1px solid rgba(168,85,247,0.16); background:rgba(168,85,247,0.06); color:var(--text); cursor:pointer; font-size:24px; }
.beat-license-header { margin-bottom:18px; }
.beat-license-eyebrow { color:var(--purple-2); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:10px; display:block; }
.beat-license-header h2 { margin:0 0 10px; font-size:clamp(34px,5vw,58px); line-height:0.94; }
.beat-license-intro { margin:0; color:var(--text-soft); line-height:1.8; }
#selected-beat-name { color:var(--purple-2); font-weight:700; }
.beat-license-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.license-tier-card { padding:22px; border-radius:24px; background:rgba(168,85,247,0.04); border:1px solid rgba(168,85,247,0.1); }
.license-tier-card.featured { background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.28); }
.license-tier-name { color:var(--purple-2); font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:0.18em; font-size:11px; margin-bottom:10px; }
.license-tier-price { font-family:"Bebas Neue",sans-serif; font-size:44px; line-height:0.9; margin-bottom:12px; }
.license-tier-card ul { margin:0 0 18px; padding-left:18px; color:var(--text-soft); }
.license-tier-card li+li { margin-top:8px; }
.license-select { width:100%; }

/* ── TRUST STRIP ─────────────────────────────── */
.trust-strip { padding:22px 0 26px; background:transparent; border-top:1px solid rgba(168,85,247,0.1); border-bottom:1px solid rgba(168,85,247,0.1); }
.trust-strip-inner { width:min(calc(100% - 40px),1120px); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; }
.trust-item { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(168,85,247,0.06); border:1px solid rgba(168,85,247,0.14); border-radius:999px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-soft); font-family:"Space Mono",monospace; transition:border-color 200ms,color 200ms,background 200ms; }
@media (hover: hover) and (pointer: fine) {
  .trust-item:hover { border-color:rgba(168,85,247,0.35); color:var(--text); background:rgba(168,85,247,0.12); }
}
.trust-item-dot { width:5px; height:5px; border-radius:50%; background:var(--purple-2); flex-shrink:0; }

/* ── SPOTLIGHT + SPARKLE ─────────────────────── */
#spotlight { position:fixed; pointer-events:none; z-index:1; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(168,85,247,0.06) 0%,transparent 65%); transform:translate(-50%,-50%); transition:opacity 400ms ease; opacity:0; mix-blend-mode:screen; }
.sparkle { position:fixed; pointer-events:none; z-index:9998; border-radius:50%; animation:sparkleFade 700ms ease-out forwards; }
@keyframes sparkleFade { 0%{transform:scale(1) translate(0,0);opacity:.9} 100%{transform:scale(0) translate(var(--dx,0),var(--dy,0));opacity:0} }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 900px) {
  .beat-card {
    grid-template-columns: 4px 40px 52px 1fr;
    grid-template-rows: auto auto;
  }
  .beat-card-accent  { grid-row: 1 / 3; }
  .beat-card-number  { grid-column: 2; grid-row: 1; align-self: center; }
  .beat-card-visual  { grid-column: 3; grid-row: 1; }
  .beat-card-content { grid-column: 4; grid-row: 1; padding: 12px 12px 8px; }
  .beat-card-player  { grid-column: 2 / 5; grid-row: 2; min-width: 0; max-width: 100%; padding: 0 12px 12px; }
  .beat-card-actions { grid-column: 2 / 5; grid-row: 3; flex-direction: row; padding: 0 12px 12px; }
  .beat-buy, .beat-exclusive { flex: 1; }
}

@media (max-width: 620px) {
  .beats-hero-inner { grid-template-columns: 1fr; }
  .beats-filter-bar { grid-template-columns: 1fr 1fr; }
  .beats-filter-bar .beats-search-field { grid-column: 1 / -1; }
  .beats-filter-bar .beats-reset-btn { grid-column: 1 / -1; width: 100%; }
  .beat-title { font-size: clamp(18px, 5vw, 24px); }
  .beat-license-options { grid-template-columns: 1fr; }
  .beats-cta-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .beat-wave-bars span { animation: none !important; }
  .beats-hero-orb { display: none; }
  * { transition-duration: 0.01ms !important; }
}