/* ===== NEON CLUB THEME =====
   Electric neon colors, glowing effects, club atmosphere
   ===== */

:root {
    --primary: #00ff88;
    --primary-dark: #00cc6a;
    --primary-light: #33ffaa;
    --primary-glow: rgba(0, 255, 136, 0.3);
    --secondary: #ff00ff;
    --secondary-dark: #cc00cc;
    --accent: #ffff00;
    --bg-dark: #0a000f;
    --bg-card: #140020;
    --bg-surface: #1e0030;
    --bg-hover: #2a0045;
    --border: #3a0060;
    --border-light: #5a0090;
    --shadow-glow: 0 0 20px rgba(0, 255, 136, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(0, 255, 136, 0.4);
}

body {
    background: var(--bg-dark);
}

.site-header {
    background: rgba(10, 0, 15, 0.95);
    border-bottom-color: var(--border);
}

.hero::before {
    background: linear-gradient(135deg, rgba(10, 0, 15, 0.9), rgba(20, 0, 32, 0.7));
}

.hero::after {
    background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.08) 0%, transparent 70%);
}

.hero h1 {
    background: linear-gradient(135deg, #00ff88, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #00cc6a);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

.track-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.4);
}

.track-card-play button {
    background: var(--primary);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.radio-play-btn {
    background: linear-gradient(135deg, #00ff88, #ff00ff);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
}

.radio-visualizer .bar {
    background: linear-gradient(to top, #00ff88, #ff00ff);
}

.newsletter-section {
    background: linear-gradient(135deg, #140020, #1e0030);
    border-color: var(--border);
}

.footer-social a:hover {
    background: var(--primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.genre-tag:hover,
.genre-tag.active {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.page-header::after {
    background: radial-gradient(ellipse at top, rgba(0, 255, 136, 0.06) 0%, transparent 60%);
}

.stat-card:hover {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.back-to-top {
    background: var(--primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* Neon glow text effect for headings */
.section-header h2,
.page-header h1 {
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}