/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary:    #0A0E27;
  --bg-secondary:  #0F1328;
  --bg-tertiary:   #16192C;
  --bg-accent:     #1C1F3A;
  --accent:        #B19CD9;
  --accent-hover:  #C9AFF0;
  --accent-active: #9A7BB8;
  --accent-deep:   #7D5FA8;
  --text-primary:  #F5F5F7;
  --text-secondary:#A8A8AF;
  --text-tertiary: #7A7A85;
  --border:        #1C1F3A;
  --border-light:  #2A2E45;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.93);      } to { opacity:1; transform:scale(1);     } }
@keyframes floatA   { 0%,100%{transform:translateY(0);}  50%{transform:translateY(-18px);} }
@keyframes floatB   { 0%,100%{transform:translateY(0);}  50%{transform:translateY(14px);} }
@keyframes barPulse { from{opacity:.5;transform:scaleY(.4);} to{opacity:1;transform:scaleY(1);} }
@keyframes shimmer  { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes dotPop   { 0%,80%,100%{transform:scaleY(.4);opacity:.4;} 40%{transform:scaleY(1);opacity:1;} }
@keyframes particleDrift {
  0%   { transform:translateY(0)   scale(1);   opacity:.6; }
  100% { transform:translateY(-80px) scale(0); opacity:0; }
}
@keyframes glowPulse { 0%,100%{opacity:.5;} 50%{opacity:1;} }
@keyframes progressAnim { from{width:0;} to{width:38%;} }

/* Vinyl Record Spinning */
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Music Notes */
@keyframes noteFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(var(--tx, 0px)) scale(1);
  }
}

@keyframes notePulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
  50% { text-shadow: 0 0 25px rgba(177, 156, 217, 0.8), 0 0 40px rgba(177, 156, 217, 0.4); }
}

/* Hero entrance */
.reveal-up          { opacity:0; animation:fadeUp .7s ease forwards; }
.delay-1            { animation-delay:.15s; }
.delay-2            { animation-delay:.3s; }
.delay-3            { animation-delay:.45s; }
.delay-4            { animation-delay:.65s; }

/* Scroll-reveal (JS adds .visible) */
.scroll-reveal        { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.scroll-reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-scale         { opacity:0; transform:scale(.95) translateY(20px); transition:opacity .8s ease, transform .8s ease; }
.reveal-scale.visible { opacity:1; transform:scale(1)  translateY(0); }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 24px;
  background:rgba(10,14,39,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-light);
  transition:border-color .3s;
}
.nav-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:60px; }
.nav-logo  { 
  display:flex; 
  align-items:center; 
  font-family: 'Ruigslay', 'Cinzel', serif; 
  font-size:1.8rem; 
  font-weight:500; 
  letter-spacing:0.5px; 
  color: var(--accent);
}
.nav-links { display:flex; gap:28px; }
.nav-links a { color:var(--text-secondary); font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--accent); }
.btn-nav {
  background:var(--accent); color:var(--bg-primary);
  font-size:.85rem; font-weight:700; padding:8px 18px; border-radius:8px;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-nav:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(177,156,217,.3); }

/* ── HERO ── */
.hero { position:relative; padding:160px 0 80px; overflow:hidden; }
.hero-bg-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(177,156,217,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(177,156,217,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
}
.hero-glow {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(177,156,217,.14) 0%,transparent 68%);
  pointer-events:none; animation:glowPulse 4s ease-in-out infinite;
}
.hero-glow-2 { top:auto; bottom:-200px; width:500px; height:500px; opacity:.5; animation-delay:2s; }

/* Floating orbs */
.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(40px); }
.orb-1 { width:220px; height:220px; background:rgba(177,156,217,.12); top:15%; left:8%; animation:floatA 7s ease-in-out infinite; }
.orb-2 { width:160px; height:160px; background:rgba(125,95,168,.1);  top:30%; right:10%; animation:floatB 9s ease-in-out infinite; }
.orb-3 { width:100px; height:100px; background:rgba(201,175,240,.08); bottom:20%; left:20%; animation:floatA 6s ease-in-out infinite 1s; }

/* === VINYL RECORD === */
.vinyl-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  perspective: 1000px;
  z-index: 1;
  opacity: 0.15;
  pointer-events: none;
}

.vinyl-record {
  width: 100%;
  height: 100%;
  position: relative;
  animation: vinylSpin 12s linear infinite;
  filter: drop-shadow(0 20px 60px rgba(177, 156, 217, 0.4));
}

/* Vinyl outer ring (black) */
.vinyl-outer {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a1a, #000);
  position: relative;
  overflow: hidden;
  border: 12px solid #1a1a1a;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(177, 156, 217, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* Vinyl grooves */
.vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 20%, rgba(100, 100, 120, 0.1) 21%, rgba(100, 100, 120, 0.1) 22%, transparent 23%),
    radial-gradient(circle, transparent 30%, rgba(100, 100, 120, 0.1) 31%, rgba(100, 100, 120, 0.1) 32%, transparent 33%),
    radial-gradient(circle, transparent 40%, rgba(100, 100, 120, 0.1) 41%, rgba(100, 100, 120, 0.1) 42%, transparent 43%),
    radial-gradient(circle, transparent 50%, rgba(100, 100, 120, 0.1) 51%, rgba(100, 100, 120, 0.1) 52%, transparent 53%);
}

/* Vinyl label (purple center) */
.vinyl-label {
  position: absolute;
  width: 45%;
  height: 45%;
  top: 27.5%;
  left: 27.5%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  box-shadow:
    0 0 20px rgba(177, 156, 217, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

/* Vinyl center hole */
.vinyl-center {
  position: absolute;
  width: 12%;
  height: 12%;
  top: 44%;
  left: 44%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #333, #000);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 1),
    0 0 8px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

/* Needle arm */
.needle-arm {
  position: absolute;
  width: 160px;
  height: 10px;
  background: linear-gradient(90deg, #888, #ccc, #888);
  border-radius: 5px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) rotateZ(-25deg);
  transform-origin: 0 50%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  z-index: 10;
}

.needle-head {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #e8e8e8;
  border-radius: 50%;
  right: 2px;
  top: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Sound wave indicator */
.sound-waves {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.wave {
  width: 5px;
  height: 25px;
  background: linear-gradient(to top, var(--accent), var(--accent-hover));
  border-radius: 2px;
  animation: barPulse 0.8s ease-in-out infinite;
  transform-origin: bottom;
}

.wave:nth-child(1) { animation-delay: 0s; height: 15px; }
.wave:nth-child(2) { animation-delay: 0.1s; height: 22px; }
.wave:nth-child(3) { animation-delay: 0.2s; height: 30px; }
.wave:nth-child(4) { animation-delay: 0.1s; height: 22px; }
.wave:nth-child(5) { animation-delay: 0s; height: 15px; }

/* ── MUSIC NOTE CONTAINER ── */
.music-notes-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.music-note {
  position: fixed;
  font-size: 1.5rem;
  color: white;
  opacity: 0;
  pointer-events: none;
  animation: noteFloat var(--duration, 3s) ease-in forwards;
  animation-delay: var(--delay, 0s);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

.music-note.pulse {
  animation: notePulse 1.5s ease-in-out infinite;
}

/* === STAVE BACKGROUND === */
.stave-container {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}

.stave-svg {
  width: 100%;
  height: 100%;
}

.stave-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 5, 5;
  opacity: 0.5;
}

.stave-note {
  font-family: serif;
  font-size: 40px;
  fill: var(--accent-deep);
  transition: fill 0.4s ease, filter 0.4s ease, transform 0.4s ease;
  filter: drop-shadow(0 0 5px rgba(177, 156, 217, 0));
  dominant-baseline: middle;
  text-anchor: middle;
}

.stave-note.glowing {
  fill: white;
  filter: drop-shadow(0 0 15px white) drop-shadow(0 0 30px var(--accent));
  transform: scale(1.3) translateY(-5px);
}

.hero-content { position:relative; text-align:center; z-index: 2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(177,156,217,.1); border:1px solid rgba(177,156,217,.3);
  color:var(--accent); font-size:.78rem; font-weight:600;
  padding:6px 16px; border-radius:100px; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:28px;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900;
  line-height:1.08; letter-spacing:-1px; margin-bottom:22px;
}
.gradient-text {
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 60%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { max-width:520px; margin:0 auto 36px; color:var(--text-secondary); font-size:1.05rem; line-height:1.7; }

.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--bg-primary);
  font-weight:700; font-size:.95rem; padding:14px 28px;
  border-radius:12px; transition:background .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 20px rgba(177,156,217,.3);
}
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 8px 32px rgba(177,156,217,.45); }
.btn-primary:active { transform:translateY(0); }
.btn-large { padding:18px 36px; font-size:1.05rem; border-radius:14px; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1.5px solid var(--border-light);
  color:var(--text-secondary); font-weight:600; font-size:.95rem;
  padding:14px 28px; border-radius:12px;
  transition:border-color .2s, color .2s, transform .15s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ── STATS ── */
.stats-row { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.stat-card {
  background:var(--bg-secondary); border:1px solid var(--border-light);
  border-radius:16px; padding:20px 36px; text-align:center; min-width:150px;
  transition:border-color .3s, transform .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(177,156,217,.05),transparent);
  opacity:0; transition:opacity .3s;
}
.stat-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 12px 36px rgba(177,156,217,.15); }
.stat-card:hover::before { opacity:1; }
.stat-number { font-size:1.9rem; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1; margin-bottom:6px; }
.stat-label  { color:var(--text-tertiary); font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }

/* ── APP WINDOW PREVIEW ── */
.preview-section { padding:40px 0 100px; }
.app-window {
  background:var(--bg-secondary); border:1px solid var(--border-light);
  border-radius:18px; overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(177,156,217,.07);
  transition:box-shadow .4s, transform .4s;
}
.app-window:hover { box-shadow:0 60px 140px rgba(0,0,0,.6), 0 0 40px rgba(177,156,217,.08); transform:translateY(-4px); }

.window-chrome { display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--bg-tertiary); border-bottom:1px solid var(--border-light); }
.chrome-dot { width:12px; height:12px; border-radius:50%; }
.chrome-dot.red    { background:#FF5F57; }
.chrome-dot.yellow { background:#FEBC2E; }
.chrome-dot.green  { background:#28C840; }
.chrome-title { margin-left:8px; font-size:.82rem; color:var(--text-tertiary); font-weight:500; }

.window-body { display:grid; grid-template-columns:200px 1fr 260px; min-height:320px; }

.mock-sidebar { background:var(--bg-primary); border-right:1px solid var(--border-light); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.mock-nav-item { padding:7px 10px; border-radius:7px; font-size:.78rem; color:var(--text-tertiary); font-weight:500; cursor:default; transition:background .2s; }
.mock-nav-item.active { background:rgba(177,156,217,.12); color:var(--accent); }
.mock-nav-item:not(.active):hover { background:var(--bg-tertiary); }
.mock-divider { height:1px; background:var(--border-light); margin:8px 0; }

.mock-song-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; transition:background .2s; }
.mock-song-row.playing { background:rgba(177,156,217,.08); }
.mock-thumb { width:32px; height:32px; border-radius:6px; background:var(--bg-tertiary); flex-shrink:0; }
.mock-thumb.purple { background:linear-gradient(135deg,var(--accent-deep),var(--accent)); }
.mock-song-info { flex:1; display:flex; flex-direction:column; gap:4px; }
.mock-line { height:7px; border-radius:4px; background:var(--bg-tertiary); }
.mock-line.w80{width:80%;} .mock-line.w75{width:75%;} .mock-line.w70{width:70%;}
.mock-line.w60{width:60%;} .mock-line.w55{width:55%;} .mock-line.w50{width:50%;}
.mock-line.w45{width:45%;} .mock-line.w40{width:40%;}
.mock-line.dim    { opacity:.4; }
.mock-line.bright { background:var(--accent); opacity:.7; }
.mock-playing-dots { display:flex; gap:2px; align-items:flex-end; height:14px; }
.mock-playing-dots span { display:block; width:3px; border-radius:2px; background:var(--accent); animation:dotPop 1.2s ease-in-out infinite; }
.mock-playing-dots span:nth-child(2){animation-delay:.2s;}
.mock-playing-dots span:nth-child(3){animation-delay:.4s;}

.mock-center { display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg-secondary); }
.mock-album-art { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mock-art-inner {
  width:150px; height:150px; border-radius:16px;
  background:linear-gradient(135deg,var(--accent-deep) 0%,var(--bg-tertiary) 100%);
  border:1px solid var(--border-light); position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.mock-note { font-size:3.2rem; opacity:.35; position:relative; z-index:1; }
.mock-art-glow {
  position:absolute; inset:-30px;
  background:radial-gradient(circle,rgba(177,156,217,.25) 0%,transparent 70%);
  animation:glowPulse 3s ease-in-out infinite;
}

.mock-visualizer { display:flex; align-items:flex-end; gap:3px; height:40px; width:100%; justify-content:center; }
.v-bar {
  width:5px; height:var(--h); border-radius:3px;
  background:linear-gradient(to top,var(--accent),var(--accent-hover));
  animation:barPulse 1.4s ease-in-out infinite alternate;
  transform-origin:bottom;
}
.v-bar:nth-child(1){animation-delay:.00s;} .v-bar:nth-child(2){animation-delay:.10s;}
.v-bar:nth-child(3){animation-delay:.20s;} .v-bar:nth-child(4){animation-delay:.05s;}
.v-bar:nth-child(5){animation-delay:.15s;} .v-bar:nth-child(6){animation-delay:.25s;}
.v-bar:nth-child(7){animation-delay:.08s;} .v-bar:nth-child(8){animation-delay:.18s;}
.v-bar:nth-child(9){animation-delay:.30s;} .v-bar:nth-child(10){animation-delay:.12s;}
.v-bar:nth-child(11){animation-delay:.22s;}.v-bar:nth-child(12){animation-delay:.04s;}
.v-bar:nth-child(13){animation-delay:.16s;}.v-bar:nth-child(14){animation-delay:.06s;}
.mock-song-meta { display:flex; flex-direction:column; gap:4px; align-items:center; width:100%; }

.mock-lyrics { padding:24px 20px; display:flex; flex-direction:column; justify-content:center; gap:14px; background:var(--bg-tertiary); border-left:1px solid var(--border-light); }
.mock-lyrics-header { font-size:.7rem; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.lyrics-line { font-size:.82rem; font-weight:500; line-height:1.4; transition:color .3s, font-size .3s; }
.lyrics-line.dim    { color:var(--text-tertiary); opacity:.5; }
.lyrics-line.active { color:var(--text-primary); font-size:.92rem; font-weight:700; }

.mock-player-bar { background:var(--bg-primary); border-top:1px solid var(--border-light); padding:10px 20px 14px; }
.mock-progress-track { height:3px; background:var(--border-light); border-radius:2px; margin-bottom:12px; overflow:visible; position:relative; }
.mock-progress-fill  { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-hover)); border-radius:2px; animation:progressAnim 8s ease-in-out infinite alternate; }
.mock-progress-handle{ width:9px; height:9px; border-radius:50%; background:white; position:absolute; top:50%; right:62%; transform:translate(50%,-50%); }
.mock-controls { display:flex; align-items:center; justify-content:center; gap:20px; }
.mock-ctrl-icon { color:var(--text-secondary); font-size:.9rem; cursor:default; }
.play-icon { background:var(--accent); color:var(--bg-primary); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.7rem; }
.mock-volume { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-tertiary); }
.mock-vol-bar  { width:60px; height:3px; background:var(--border-light); border-radius:2px; }
.mock-vol-fill { width:70%; height:100%; background:var(--accent); border-radius:2px; }

/* ── HOW IT WORKS ── */
.how-it-works { padding:100px 0; background:var(--bg-secondary); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
.section-header { text-align:center; margin-bottom:60px; }
.section-eyebrow { color:var(--accent); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.section-header h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; letter-spacing:-1.5px; line-height:1.15; }

.steps { display:flex; flex-direction:column; max-width:640px; margin:0 auto; }
.step { display:flex; gap:28px; align-items:flex-start; padding:28px 0; border-bottom:1px solid var(--border-light); transition-delay:calc(var(--i,.1) * .15s); }
.step:last-child { border-bottom:none; }
.step-number { font-size:.78rem; font-weight:800; color:var(--accent); letter-spacing:1px; padding-top:4px; flex-shrink:0; width:28px; }
.step-content h3 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.step-content p  { color:var(--text-secondary); font-size:.92rem; line-height:1.65; }
.step-content code { background:rgba(177,156,217,.12); color:var(--accent); padding:2px 7px; border-radius:5px; font-size:.85rem; font-family:'Consolas',monospace; }

/* ── FEATURES ── */
.features { padding: 100px 0; overflow-x: auto; }
.features-grid { 
  display: flex; 
  justify-content: center; 
  gap: 4px; 
  perspective: 1000px;
  padding: 20px 0 60px;
}
.feature-card {
  flex: 1;
  min-width: 140px;
  max-width: 180px;
  height: 380px;
  background: white; 
  border: 1px solid #ddd;
  border-radius: 0 0 12px 12px; 
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #1a1a1a;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  cursor: pointer;
  box-shadow: 0 10px 0 #eee, 0 15px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
}

.feature-card:hover {
  background: #f9f9f9;
  transform: translateY(2px);
  box-shadow: 0 8px 0 #eee, 0 10px 15px rgba(0,0,0,0.2);
}

.feature-card:active, .feature-card.playing {
  background: var(--accent);
  color: white;
  transform: translateY(10px);
  box-shadow: 0 0 0 #eee, 0 5px 10px rgba(0,0,0,0.1);
}

.feature-card h3 { 
  font-family: 'Cinzel', serif;
  font-size: 0.95rem; 
  font-weight: 700; 
  margin-bottom: 12px; 
  text-align: center;
}
.feature-card p { 
  font-size: 0.8rem; 
  line-height: 1.5; 
  text-align: center;
  opacity: 0.8;
}

.feature-icon { 
  height: 0; 
  margin-bottom: 0; 
}

/* ── DOWNLOAD ── */
.download-section { padding:100px 0; }
.download-card {
  position:relative; background:var(--bg-secondary);
  border:1px solid rgba(177,156,217,.3); border-radius:24px;
  padding:80px 40px; text-align:center; overflow:hidden;
}
.download-glow {
  position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(177,156,217,.13) 0%,transparent 70%);
  pointer-events:none; animation:glowPulse 4s ease-in-out infinite;
}
.download-particles { position:absolute; inset:0; pointer-events:none; }
.download-particles span {
  position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent);
  animation:particleDrift 4s ease-in infinite;
  opacity:0;
}
.download-particles span:nth-child(1){left:20%; bottom:0; animation-delay:0s;   animation-duration:4.2s;}
.download-particles span:nth-child(2){left:40%; bottom:0; animation-delay:.8s;  animation-duration:3.8s;}
.download-particles span:nth-child(3){left:60%; bottom:0; animation-delay:1.5s; animation-duration:4.5s;}
.download-particles span:nth-child(4){left:75%; bottom:0; animation-delay:.4s;  animation-duration:3.6s;}
.download-particles span:nth-child(5){left:88%; bottom:0; animation-delay:2s;   animation-duration:4s;}

.download-content { position:relative; }
.download-card h2 { font-size:clamp(2rem,5vw,3rem); font-weight:800; letter-spacing:-1.5px; margin-bottom:14px; }
.download-sub  { color:var(--text-secondary); font-size:1rem; margin-bottom:20px; }
.download-meta { display:flex; gap:10px; justify-content:center; align-items:center; color:var(--text-tertiary); font-size:.82rem; margin-bottom:28px; }
.download-note { margin-top:20px; color:var(--text-tertiary); font-size:.82rem; }
.download-note a { color:var(--accent); text-decoration:underline; }

/* ── FOOTER ── */
.footer { padding:40px 0; border-top:1px solid var(--border-light); }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.footer-sub   { color:var(--text-tertiary); font-size:.82rem; }
.footer-links { display:flex; gap:20px; }
.footer-links a { color:var(--text-tertiary); font-size:.82rem; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .window-body { grid-template-columns:1fr; }
  .mock-sidebar,.mock-lyrics { display:none; }
  .nav-links { display:none; }
  .stats-row { gap:12px; }
  .stat-card { padding:16px 20px; min-width:110px; }
  .stat-number { font-size:1.4rem; }
  .features-grid { grid-template-columns:1fr; }
  h1 { letter-spacing:-1.5px; }
}