/* ============================================
   VARIABLES & RESET - South Central Blue Theme
   ============================================ */

:root {
    /* South Central Blue Color Palette */
    --primary-dark: #000B1E;
    --primary-accent: #1E90FF;
    --primary-light: #0A1A3A;
    
    /* Silver/Chrome Accents */
    --silver-primary: #C0C0C0;
    --silver-secondary: #D4D4D4;
    --silver-glow: rgba(192, 192, 192, 0.3);
    
    /* Glassmorphism Effects */
    --glass-bg: rgba(0, 11, 30, 0.7);
    --glass-border: rgba(30, 144, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 11, 30, 0.3);
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B0B8D0;
    --text-accent: #1E90FF;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
}

/* UNIVERSAL SLIM HEADER - GLOBAL CSS */
header, .navbar {
    display: flex !important;
    align-items: center !important; /* Vertical center */
    height: 60px !important;
    padding: 0 40px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

.nav-container, .container-fluid, .container, .navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

.nav-link, .navbar-brand, .logo, .nav-links a {
    margin: 0 !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: normal !important;
}

/* UNIFIED PAGE SPACING - GLOBAL */
main, .main-content, section:first-of-type {
    margin-top: 60px !important; /* The height of the header */
    padding-top: 20px !important;
}
    
    /* Typography */
    --font-heading: 'Archivo Black', sans-serif;
    --font-subheading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--primary-dark);
    background-image: url('../assets/img/bg-bandana-blue.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed; /* 👈 ON CHANGE "absolute" PAR "fixed" */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
}

h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar, header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* .navbar .container rule removed - replaced by global .container rule with !important */

.logo {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);
    position: relative;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-accent);
    transition: var(--transition-medium);
}

.nav-links a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    min-height: 200px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    margin-top: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1px);
    z-index: -1;
}

.smoke-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.5;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    animation: fadeInUp 1s ease;
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.hero-photo {
    position: relative;
    z-index: 2;
}

.hero-title {
    margin-bottom: var(--spacing-sm);
    text-shadow: 
        2px 2px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 150, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.2);
    white-space: nowrap;
}

.title-line {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
    font-weight: 900;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--primary-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        2px 2px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 150, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.2);
}

.title-line:first-child {
    font-size: 5rem;
    line-height: 1;
}

.title-line:last-child {
    font-size: 4rem;
    line-height: 1;
    margin-left: 0.5rem;
}

.title-line {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
    font-weight: 900;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--primary-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--silver-primary);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition-medium);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--primary-accent);
    color: var(--text-primary);
}

.btn-primary:hover {
    background: #0D7FFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 144, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--silver-primary);
}

.btn-secondary:hover {
    background: rgba(192, 192, 192, 0.1);
    border-color: var(--primary-accent);
    transform: translateY(-2px);
}



.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator i {
    font-size: 1.5rem;
    color: var(--silver-primary);
}

/* ============================================
   HERO CONTAINER & PHOTO
   ============================================ */

.hero-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 50px !important;
    padding: 40px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    width: 100%;
}

.hero-photo img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 20px;
    filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.4));
    max-height: 500px;
    display: block;
    border: 2px solid rgba(0, 150, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.hero-photo img:hover {
    filter: drop-shadow(0 0 35px rgba(0, 150, 255, 0.8));
    transform: scale(1.05);
    border: 2px solid rgba(0, 200, 255, 0.7);
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px !important;
    }
    
    .hero-photo img {
        max-height: 400px;
        width: auto !important;
        max-width: 100%;
    }
}

/* ============================================
   VIDEO SHOWCASE
   ============================================ */

.video-showcase {
    padding: calc(var(--spacing-xl) + 15px) 0;
    background: transparent !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    contain: paint;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    color: var(--text-primary);
    margin-top: 0 !important;
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.section-divider {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-accent), var(--silver-primary));
    margin: var(--spacing-sm) auto;
    border-radius: var(--radius-sm);
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.video-container {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(0, 150, 255, 0.5);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 
        0 0 20px rgba(0, 150, 255, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.4));
    transition: all 0.3s ease;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden !important;
}

.video-container:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 35px rgba(0, 150, 255, 0.8));
    border: 2px solid rgba(0, 200, 255, 0.7);
    box-shadow: 
        0 0 30px rgba(0, 150, 255, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
}



.video-border {
    position: relative;
    overflow: hidden !important;
    border-radius: 18px;
    background: transparent;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden !important;
    border-radius: 12px;
    background: transparent;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
    border: 1px solid rgba(30, 144, 255, 0.3);
}

.video-info {
    margin-top: var(--spacing-md);
    text-align: center;
}

.video-info h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.video-info p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}



/* ============================================
   DISCOGRAPHY
   ============================================ */

.discography {
    padding: var(--spacing-xl) 0;
    background: var(--primary-dark);
}

.albums-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.album-card {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible;
    transition: none;
    position: relative;
}

.album-card:hover {
    transform: none;
    border-color: transparent !important;
    box-shadow: none !important;
}

.album-card::before {
    content: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: transparent !important;
    opacity: 0;
    transition: none;
    z-index: 1;
}

.album-card:hover::before {
    opacity: 0;
}

.album-cover {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

.album-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.album-1 { background: linear-gradient(135deg, #1E3A8A, #3B82F6); }
.album-2 { background: linear-gradient(135deg, #7C2D12, #DC2626); }
.album-3 { background: linear-gradient(135deg, #065F46, #10B981); }
.album-4 { background: linear-gradient(135deg, #5B21B6, #8B5CF6); }
.album-5 { background: linear-gradient(135deg, #B45309, #F59E0B); }
.album-6 { background: linear-gradient(135deg, #6B21A8, #C084FC); }

/* New album placeholders for the three sections */
.classic-1 { background: linear-gradient(135deg, #1E3A8A, #3B82F6); } /* South Central Blue */
.classic-2 { background: linear-gradient(135deg, #0F172A, #1E40AF); } /* Dark Blue */
.classic-3 { background: linear-gradient(135deg, #1E3A8A, #60A5FA); } /* Light Blue */

.collab-1 { background: linear-gradient(135deg, #7C2D12, #DC2626); } /* Red/Brown */
.collab-2 { background: linear-gradient(135deg, #065F46, #10B981); } /* Green */
.collab-3 { background: linear-gradient(135deg, #5B21B6, #8B5CF6); } /* Purple */

.solo-1 { background: linear-gradient(135deg, #B45309, #F59E0B); } /* Orange */
.solo-2 { background: linear-gradient(135deg, #6B21A8, #C084FC); } /* Purple */
.solo-3 { background: linear-gradient(135deg, #0F766E, #14B8A6); } /* Teal */

.album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 11, 30, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-medium);
}

.album-card:hover .album-overlay {
    opacity: 1;
}

.play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-accent);
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn:hover {
    background: var(--silver-primary);
    transform: scale(1.1);
}

/* Spotify Button Styles */
.spotify-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: #1DB954;
    color: white;
    border: none;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-medium);
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}

.spotify-btn:hover {
    background: #1ED760;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(29, 185, 84, 0.4);
}

.spotify-btn i {
    font-size: 1.2rem;
}

.spotify-btn span {
    white-space: nowrap;
}

/* Coming Soon button variation */
.album-card .spotify-btn[href*="coming-soon"],
.album-card .spotify-btn[href*="placeholder-cartelifornia"] {
    background: var(--silver-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3);
}

.album-card .spotify-btn[href*="coming-soon"]:hover,
.album-card .spotify-btn[href*="placeholder-cartelifornia"]:hover {
    background: var(--silver-secondary);
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4);
}

.album-info {
    padding: var(--spacing-md);
    position: relative;
    z-index: 2;
}

.album-info h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: 1.2rem;
}

.album-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.album-tags {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.album-tags span {
    background: rgba(30, 144, 255, 0.1);
    color: var(--primary-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================================
   DISCOGRAPHY SECTIONS
   ============================================ */

.discography-section {
    margin-top: 0 !important;
    margin-bottom: var(--spacing-xl);
    padding-top: 20px !important;
    padding-bottom: var(--spacing-xl) 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

.discography-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.discography-section .section-header {
    margin-bottom: var(--spacing-lg);
}

.discography-section .section-title {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.discography-section .section-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   BIOGRAPHY
   ============================================ */

.biography {
    padding: var(--spacing-xl) 0;
    position: relative;
    background: var(--primary-light);
    overflow: hidden;
}

.bio-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(circle at 30% 30%, rgba(30, 144, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(192, 192, 192, 0.03) 0%, transparent 50%);
    opacity: 0.15;
    pointer-events: none;
    animation: vinylSpin 60s linear infinite;
}

.bio-content {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.bio-text h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-size: 2rem;
}

.bio-text p {
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    line-height: 1.8;
}

.bio-highlights {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.highlight {
    text-align: center;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: auto !important;
}

.highlight-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-accent);
    margin-bottom: var(--spacing-xs);
}

.highlight-text {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.bio-image {
    position: relative;
}

.bio-frame {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.bio-placeholder {
    width: 100%;
    padding-top: 125%;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1A2B4A 100%);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.bio-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(30, 144, 255, 0.05) 2px, transparent 4px);
    border-radius: 50%;
}

.bio-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, var(--primary-accent), var(--silver-primary));
    border-radius: calc(var(--radius-lg) + 10px);
    z-index: -1;
    opacity: 0.3;
    filter: blur(15px);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    padding: var(--spacing-lg) 0;
    background: var(--primary-dark);
    border-top: 1px solid var(--glass-border);
}

.footer-content {
    text-align: center;
}

.footer-brand h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 0.05em;
}

.footer-brand p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    width: 100%;
}

.social-icon {
    width: 50px;
    height: 50px;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--silver-primary);
    font-size: 1.2rem;
    text-decoration: none;
    transition: none !important;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.social-icon:hover {
    background: transparent !important;
    color: var(--silver-primary);
    transform: none !important;
}

.social-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.social-icon .tidal-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.footer-credits {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.designer-credit {
    color: var(--silver-primary);
    font-weight: 500;
    margin-top: var(--spacing-xs);
}

.designer-credit a {
    color: #ffffff;
    text-decoration: none;
}

.designer-credit a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes chromeGlow {
    0% {
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.3),
            0 0 60px rgba(192, 192, 192, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.3),
            0 0 80px rgba(192, 192, 192, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
}

@keyframes neonGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px var(--primary-accent),
            0 0 20px var(--primary-accent),
            inset 0 0 10px rgba(30, 144, 255, 0.3);
        border-color: var(--primary-accent);
    }
    50% {
        box-shadow: 
            0 0 20px var(--primary-accent),
            0 0 40px var(--primary-accent),
            inset 0 0 15px rgba(30, 144, 255, 0.5);
        border-color: #00BFFF;
    }
}

@keyframes chromeShift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}

@keyframes vinylSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .albums-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero .container {
        gap: var(--spacing-lg);
    }
    
    .portrait-frame {
        width: 350px;
        height: 450px;
    }
}

@media (max-width: 768px) {
    .navbar .container {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-links {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .portrait-frame {
        width: 300px;
        height: 400px;
    }
    

    
    .bio-highlights {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .video-frame {
        padding: 0 !important;
    }
}

@media (max-width: 640px) {
    .albums-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .portrait-frame {
        width: 250px;
        height: 350px;
    }
    
    .footer-social {
        flex-wrap: wrap;
    }
    
    .title-line:first-child {
        font-size: 3.5rem;
    }
    
    .title-line:last-child {
        font-size: 2.8rem;
        margin-left: 0.4rem;
    }
    
    .hero h2 {
        font-size: 1.5rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .bio-text h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .title-line:first-child {
        font-size: 2.5rem;
    }
    
    .title-line:last-child {
        font-size: 2rem;
        margin-left: 0.3rem;
    }
    
    .hero h2 {
        font-size: 1.2rem;
    }
    
    .portrait-frame {
        width: 200px;
        height: 300px;
    }
    
    .highlight {
        min-width: 100px;
        padding: var(--spacing-sm);
    }
    
    .highlight-number {
        font-size: 1.5rem;
    }
    
    .footer-brand h3 {
        font-size: 1.2rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.glass-effect {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary-accent), var(--silver-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glow-effect {
    position: relative;
}

.glow-effect::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-accent), var(--silver-primary));
    border-radius: inherit;
    z-index: -1;
    opacity: 0.5;
    filter: blur(10px);
}

/* Scroll Animation Classes */
.animated {
    animation: fadeInUp 0.8s ease forwards;
}

.section-header.animated {
    animation-delay: 0.1s;
}

.album-card.animated {
    animation-delay: calc(var(--i, 0) * 0.1s);
}

.video-container.animated {
    animation-delay: 0.2s;
}

.bio-content.animated {
    animation-delay: 0.3s;
}

/* ============================================
   MULTI-PAGE STYLES
   ============================================ */

/* Page Hero */
.page-hero {
    min-height: 150px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    padding-top: 20px !important; /* From global rule */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.page-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 900;
    color: var(--silver-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.page-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* Biography Page - Magazine Layout */
.biography-page {
    padding: var(--spacing-xl) 0;
    position: relative;
}

.bio-container {
    max-width: 850px !important;
    margin: 50px auto !important;
    padding: 40px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 150, 255, 0.2) !important;
    color: white !important;
}

.bio-container h1,
.bio-container h2,
.bio-container h3,
.bio-container .section-title {
    text-align: center;
}

.bio-container p {
    text-align: justify;
}

.biography-page .bio-content {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Nuclear CSS for centering - applied per user request */
.biography-page, #bio-page {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.bio-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
    display: inline-block !important;
    text-align: left !important;
    padding: 40px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 15px !important;
}

/* Magazine Header */
.magazine-header {
    margin-bottom: var(--spacing-xl);
}

.magazine-headline {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--primary-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.magazine-subtitle {
    font-family: var(--font-subheading);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.magazine-divider {
    height: 2px;
    width: 100px;
    background: linear-gradient(90deg, var(--primary-accent), transparent);
    margin: var(--spacing-lg) 0;
}

/* Magazine Content */
.magazine-content {
    font-family: var(--font-body);
    line-height: 1.8;
}

.lead-paragraph {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.magazine-section {
    margin-bottom: var(--spacing-xl);
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

.magazine-section .section-header {
    margin-bottom: var(--spacing-md);
}

.magazine-section .section-title {
    font-family: var(--font-subheading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.magazine-section .section-divider {
    height: 1px;
    width: 60px;
    background: var(--primary-accent);
    opacity: 0.5;
}

.magazine-section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.magazine-section em {
    font-style: italic;
    color: var(--text-primary);
}

.magazine-section strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* Magazine Highlights */
.magazine-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.highlight-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.highlight-icon {
    font-size: 1.5rem;
    color: var(--primary-accent);
    margin-top: 2px;
}

.highlight-content h4 {
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.highlight-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Magazine Quote */
.magazine-quote {
    margin-top: var(--spacing-xl);
    padding: 0 !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
}

.magazine-quote blockquote {
    font-style: italic;
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.magazine-quote cite {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Magazine Cover */
.magazine-cover {
    position: sticky;
    top: var(--spacing-xl);
}

.cover-frame {
    position: relative;
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.cover-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #0f3460, #1a1a2e);
}

.cover-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, var(--primary-accent), var(--silver-primary));
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: 0.3;
    filter: blur(15px);
}

.cover-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary-accent);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-subheading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cover-caption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cover-caption p {
    margin-bottom: 2px;
}

.caption-credit {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Timeline */
.timeline {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 144, 255, 0.05) 100%);
}

.timeline-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-accent), transparent);
}

.timeline-item {
    display: flex;
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.timeline-year {
    width: 60px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--primary-accent);
    text-align: center;
    padding-right: var(--spacing-md);
}

.timeline-content h3 {
    font-family: var(--font-subheading);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

/* Discography Page */
.discography-page {
    padding: 20px 0 !important;
}

.discography-page .albums-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.album-year {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.album-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.album-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Solo Catalog Section */
.solo-catalog-section {
    padding: var(--spacing-xl) 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.solo-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

@media (max-width: 1024px) {
    .solo-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .solo-catalog-grid {
        grid-template-columns: 1fr;
    }
}

.solo-album-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solo-album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.solo-album-header {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.solo-album-title.silver-title {
    color: var(--silver-primary);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.solo-album-year {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}



.solo-album-info {
    text-align: center;
    margin-top: var(--spacing-md);
}

.solo-album-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.solo-album-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.solo-album-tags span {
    background: rgba(30, 144, 255, 0.1);
    color: var(--primary-accent);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(30, 144, 255, 0.2);
}

/* Fade-in animation */
.solo-album-card.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.solo-album-card.fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays */
.solo-album-card.fade-in:nth-child(1) { transition-delay: 0.1s; }
.solo-album-card.fade-in:nth-child(2) { transition-delay: 0.2s; }
.solo-album-card.fade-in:nth-child(3) { transition-delay: 0.3s; }
.solo-album-card.fade-in:nth-child(4) { transition-delay: 0.4s; }
.solo-album-card.fade-in:nth-child(5) { transition-delay: 0.5s; }

/* Singles Section */
.singles-section {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 144, 255, 0.05) 100%);
}

.singles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.single-card {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible;
    transition: none;
}

.single-card:hover {
    transform: none;
    box-shadow: none !important;
}

.single-cover {
    height: 150px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    position: relative;
}

.single-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}

.single-1 { background-image: linear-gradient(135deg, #FF6B6B, #4ECDC4); }
.single-2 { background-image: linear-gradient(135deg, #45B7D1, #96E6A1); }
.single-3 { background-image: linear-gradient(135deg, #FAD961, #F76B1C); }
.single-4 { background-image: linear-gradient(135deg, #6A11CB, #2575FC); }

.single-info {
    padding: var(--spacing-md);
}

.single-info h3 {
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.single-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.single-tags span {
    background: rgba(30, 144, 255, 0.1);
    color: var(--primary-accent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

/* Singles & Latest Tracks Grid */
.singles-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.single-latest-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-latest-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.single-latest-header {
    margin-bottom: var(--spacing-md);
}

.single-latest-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    color: var(--silver-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.single-latest-year {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.single-latest-info {
    margin-top: var(--spacing-md);
}

.single-latest-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.single-latest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.single-latest-tags span {
    background: rgba(30, 144, 255, 0.1);
    color: var(--primary-accent);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(30, 144, 255, 0.2);
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .singles-latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .singles-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* Streaming Section */
.streaming-section {
    padding: var(--spacing-xl) 0;
}

.streaming-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.streaming-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.streaming-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.streaming-btn.spotify {
    background: #1DB954;
    color: white;
}

.streaming-btn.apple {
    background: #000;
    color: white;
}

.streaming-btn.youtube {
    background: #FF0000;
    color: white;
}

.streaming-btn.deezer {
    background: linear-gradient(135deg, #00C7F2, #A500FF);
    color: white;
}

.streaming-btn.tidal {
    background: #111;
    color: white;
    border: 1px solid #333;
}

.streaming-btn.tidal .tidal-icon {
    width: 24px;
    height: 24px;
    fill: white;
    transition: fill 0.3s ease;
}

.streaming-btn.tidal:hover .tidal-icon {
    fill: #00FFFF;
}

/* Spotify Player Styles */
.spotify-player {
    position: relative;
    min-height: 352px;
    overflow: hidden;
}

.spotify-player iframe {
    border: none;
    display: block;
    width: 100%;
    height: 352px;
    position: relative;
    z-index: 2;
}

.spotify-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 !important;
    z-index: 1;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.spotify-fallback .spotify-logo {
    font-size: 4rem;
    color: #1DB954;
    margin-bottom: var(--spacing-sm);
    animation: pulse 2s infinite;
}

.spotify-fallback p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-subheading);
}

.spotify-fallback .fallback-text {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-top: var(--spacing-md);
    opacity: 0.8;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Contact Page */
.contact-page {
    padding: var(--spacing-xl) 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.contact-card {
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

.contact-card:hover {
    transform: none !important;
}

.contact-icon {
    font-size: 2rem;
    color: var(--primary-accent);
    margin-bottom: var(--spacing-sm);
}

.contact-card h3 {
    font-family: var(--font-subheading);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.contact-card p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-details {
    font-size: 0.9rem;
}

.contact-details p {
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.contact-details i {
    color: var(--primary-accent);
    width: 20px;
}

/* Contact Image - Framed like homepage hero */
.contact-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.contact-image-frame {
    max-width: 700px;
    width: 100%;
}

.contact-image-frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.4));
    max-height: 500px;
    display: block;
    border: 2px solid rgba(0, 150, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contact-image-frame img:hover {
    filter: drop-shadow(0 0 35px rgba(0, 150, 255, 0.8));
    transform: scale(1.05);
    border: 2px solid rgba(0, 200, 255, 0.7);
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Contact Emails Section */
.contact-emails-section {
    padding: var(--spacing-xl) 0;
}

.contact-emails-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
}

.contact-email-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 150, 255, 0.3);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-email-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 150, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 150, 255, 0.2);
}

.contact-email-icon {
    font-size: 2.5rem;
    color: var(--primary-accent);
    margin-bottom: var(--spacing-md);
}

.contact-email-card h3 {
    font-family: var(--font-subheading);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.contact-email-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.contact-email-link {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-accent);
    text-decoration: none;
    padding: 12px 24px;
    border: 2px solid rgba(0, 150, 255, 0.4);
    border-radius: 12px;
    transition: all 0.3s ease;
    word-break: break-all;
}

.contact-email-link:hover {
    background: rgba(0, 150, 255, 0.1);
    border-color: var(--primary-accent);
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .contact-emails-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-email-link {
        font-size: 1.1rem;
        padding: 10px 18px;
    }
    
    .contact-image-frame {
        max-width: 100%;
    }
}

/* ============================================ 
    BIO GALLERY CAROUSEL - SINGLE IMAGE SHOWCASE 
    ============================================ */ 
 
 .bio-gallery-section { 
     padding: var(--spacing-xl) 0; 
     background: transparent !important; 
 } 
 
 .bio-gallery-carousel { 
     position: relative; 
     max-width: 850px; 
     margin: 0 auto; 
     overflow: hidden !important; 
     padding: 0 !important; 
     border-radius: 12px; 
     background: rgba(0, 11, 30, 0.4); 
     backdrop-filter: blur(10px); 
     border: 1px solid rgba(255, 255, 255, 0.05); 
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); 
 } 
 
 .bio-gallery-track { 
     display: flex; 
     transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
     width: 100% !important; 
     margin: 0 !important; 
     padding: 0 !important; 
 } 
 
 .bio-gallery-slide { 
     min-width: 100% !important; 
     width: 100% !important; 
     flex: 0 0 100% !important; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     padding: 20px !important; 
     box-sizing: border-box !important; 
 } 
 
 .bio-gallery-frame { 
     width: 100%; 
     position: relative; 
     display: flex; 
     justify-content: center; 
 } 
 
 .bio-gallery-frame img { 
     max-width: 100%; 
     height: auto; 
     max-height: 600px; 
     object-fit: contain; 
     border-radius: 8px; 
     border: 1px solid rgba(192, 192, 192, 0.2); 
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); 
     transition: transform 0.4s ease; 
     background: #000; 
 } 
 
 .bio-gallery-frame img:hover { 
     transform: scale(1.02); 
     border-color: rgba(30, 144, 255, 0.4); 
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(30, 144, 255, 0.2); 
 } 
 
 .gallery-nav { 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     background: rgba(0, 11, 30, 0.8); 
     color: var(--silver-primary); 
     border: 1px solid rgba(255, 255, 255, 0.1); 
     width: 50px; 
     height: 50px; 
     border-radius: 50%; 
     cursor: pointer; 
     font-size: 1.2rem; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     transition: all 0.3s ease; 
     z-index: 10; 
     backdrop-filter: blur(5px); 
 } 
 
 .gallery-nav:hover { 
     background: rgba(30, 144, 255, 0.2); 
     color: #fff; 
     border-color: var(--primary-accent); 
     transform: translateY(-50%) scale(1.1); 
 } 
 
 .gallery-prev { left: 15px; } 
 .gallery-next { right: 15px; } 
 
 .gallery-dots { 
     display: flex; 
     justify-content: center; 
     gap: 12px; 
     margin-top: 25px; 
     padding-bottom: 10px; 
 } 
 
 .gallery-dot { 
     width: 10px; 
     height: 10px; 
     border-radius: 50%; 
     background: rgba(255, 255, 255, 0.15); 
     border: none; 
     cursor: pointer; 
     transition: all 0.3s ease; 
 } 
 
 .gallery-dot.active { 
     background: var(--primary-accent); 
     transform: scale(1.3); 
     box-shadow: 0 0 10px rgba(30, 144, 255, 0.6); 
 } 
 
 .gallery-dot:hover:not(.active) { 
     background: rgba(255, 255, 255, 0.5); 
 } 
 
 @media (max-width: 768px) { 
     .bio-gallery-carousel { 
         width: 100% !important; 
         max-width: 100vw !important; 
         overflow: hidden !important; 
         padding: 0 !important; 
         border-radius: 0 !important; 
     } 
 
     .bio-gallery-track { 
         display: flex !important; 
         padding: 0 !important; 
         margin: 0 !important; 
         width: 100% !important; 
     } 
 
     .bio-gallery-slide { 
         flex: 0 0 100% !important; 
         min-width: 100% !important; 
         max-width: 100% !important; 
         width: 100% !important; 
         padding: 0 !important; 
         margin: 0 !important; 
         box-sizing: border-box !important; 
     } 
 
     .bio-gallery-frame { 
         width: 100% !important; 
         padding: 0 15px !important; 
         display: flex !important; 
         justify-content: center !important; 
         align-items: center !important; 
     } 
 
     .bio-gallery-frame img { 
         max-width: 100% !important; 
         width: auto !important; 
         height: auto !important; 
         max-height: 400px !important; 
         object-fit: contain !important; 
         border-radius: 8px !important; 
     } 
     
     .gallery-nav { 
         width: 35px; 
         height: 35px; 
         font-size: 1rem; 
     } 
     
     .gallery-prev { left: 5px; } 
     .gallery-next { right: 5px; } 
 }

/* Contact Form */
.contact-form-section {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.contact-form {
    margin-top: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.checkbox-label input {
    width: auto;
}

/* Social Media Section */
.social-media-section {
    padding: var(--spacing-xl) 0;
    background: transparent !important;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-decoration: none;
    transition: none !important;
}

.social-card:hover {
    transform: none !important;
}

.social-card.instagram {
    border-left: 4px solid #E4405F;
}

.social-card.youtube {
    border-left: 4px solid #FF0000;
}

.social-card.spotify {
    border-left: 4px solid #1DB954;
}

.social-card.twitter {
    border-left: 4px solid #1DA1F2;
}

.social-card.apple {
    border-left: 4px solid #FA243C;
}

.social-card.deezer {
    border-left: 4px solid #FEAA2D;
}

.social-card.tidal {
    border-left: 4px solid #00FFFF;
}

.social-icon {
    font-size: 2rem;
}

.social-card.instagram .social-icon {
    color: #E4405F;
}

.social-card.youtube .social-icon {
    color: #FF0000;
}

.social-card.spotify .social-icon {
    color: #1DB954;
}

.social-card.twitter .social-icon {
    color: #1DA1F2;
}

.social-card.apple .social-icon {
    color: #FA243C;
}

.social-card.deezer .social-icon {
    color: #FEAA2D;
}

.social-card.tidal .social-icon {
    color: #00FFFF;
}

.social-info h3 {
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.social-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.social-stats {
    font-size: 0.8rem;
    color: var(--primary-accent);
    font-weight: 600;
}

/* Responsive Styles for Multi-Page */
@media (max-width: 768px) {
    .page-title {
        font-size: 3rem;
    }
    
    .page-subtitle {
        font-size: 1.2rem;
    }
    

    
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .discography-page .albums-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .timeline-content::before {
        left: 20px;
    }
    
    .timeline-year {
        width: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 2.5rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    .singles-grid,
    .social-grid {
        grid-template-columns: 1fr;
    }
    
    .streaming-links {
        flex-direction: column;
        align-items: center;
    }
    
    .streaming-btn {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

/* ============================================
   MOBILE OPTIMIZATION FOR BACKGROUND
   ============================================ */

@media (max-width: 768px) {
    /* Désactiver background-attachment: fixed sur mobile pour de meilleures performances */
    body {
        background-attachment: scroll !important;
    }
    
    /* Réduire légèrement le flou du backdrop-filter sur mobile pour de meilleures performances */
    .navbar,
    .album-card,
    .single-latest-card,
    .discography-section,
    .video-showcase,
    .magazine-section,
    .contact-card,
    .solo-album-card {
        backdrop-filter: none !important;
    }
    
    /* Ajuster les paddings des sections sur mobile */
    .discography-section,
    .magazine-section {
        padding: var(--spacing-md);
    }
    
    /* Optimiser l'overlay du hero sur mobile */
    .hero-overlay {
        backdrop-filter: blur(3px);
    }
}

/* ============================================
   FORCE TRANSPARENCY - OVERRIDE ALL BLUE BANNERS
   ============================================ */

header, nav, section.page-title, .hero-section, .page-header, [class*='header'], [class*='hero'] {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 20px !important;
    margin-top: 0 !important;
}



/* REMOVE WRAPPERS - Force transparency on main containers */
main, .main-container, .app-container, .content-wrapper, .page-wrapper,
section:not(.discography-section):not(.magazine-section):not(.contact-section),
.container > div:first-child {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================
   STRICT UI CLEANUP - FLAT & FLOATING DESIGN
   ============================================ */

.container, .section, .card, .content-wrapper, section,
.section-wrapper, .content-container, .wrapper, .grid-container,
.discography-section, .magazine-section, .contact-section,
.album-card, .single-card, .spotify-card, .music-card,
.video-showcase, .video-container, .video-frame, .video-border,
.hero-content, .hero-overlay, .portrait-frame, .portrait-placeholder,
.footer, .footer-content, .footer-brand, .footer-social,
.navbar, .nav-links, .logo,
.page-header, .page-content, .page-wrapper,
.bio-section, .contact-form, .form-group,
.highlight-card, .magazine-card, .quote-card {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding-top: 20px !important;
    margin-top: 0 !important;
}

/* Exclude Spotify players from the cleanup */
.spotify-player, iframe[src*="spotify"], .spotify-embed {
    /* These keep their default styling - override the cleanup */
    background: initial !important;
    background-color: initial !important;
    box-shadow: initial !important;
    border: initial !important;
    border-radius: initial !important;
}

/* Keep only Spotify player containers */
.spotify-player, iframe[src*="spotify"], .spotify-embed,
.album-card iframe, .single-card iframe {
    /* These keep their default styling */
}

/* Ensure text floats directly over bandana background */
/* Main titles and headers */
.section-title, .page-title, .hero-title, .title-line,
.discography-header h1, .magazine-header h1, .contact-header h1,
h1, h2, h3, h4, h5, h6,
.card-title, .album-title, .single-title, .solo-album-title,
.single-latest-title, .solo-album-title, .album-info h3, .single-info h3,
h3.silver-title, .silver-title,

/* Subtitles and secondary text */
.section-subtitle, .page-subtitle, .hero-subtitle,
.album-info p, .single-info p, .solo-album-year, .single-latest-year,
.magazine-section h2, .magazine-section h3, .magazine-section p,
.contact-section h2, .contact-section h3, .contact-section p,

/* Navigation and footer */
.nav-links a, .footer h3, .footer p, .footer a,
.footer-brand h2, .footer-brand p,

/* All white/silver text that needs to be readable */
.text-white, .text-silver, .silver-text, .white-text,
[class*="title"], [class*="header"] h1, [class*="header"] h2, [class*="header"] h3 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

/* Stronger shadow for very important titles */
.hero-title, .page-title, .section-title,
.discography-header h1, .magazine-header h1 {
    text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.9);
}

/* Subtle shadow for body text */
p, span, li, .text-body, .content-text {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

/* =========================================== */
/* GLASSMORPHISM STYLES FOR MEDIA PLAYERS */
/* =========================================== */

/* Spotify Players - Glassmorphism Default State */
.spotify-player {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Spotify Players - Glassmorphism Hover Effect */
.spotify-player:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* YouTube Video Container - Clean Frame */
.video-frame {
    background: transparent;
    overflow: hidden;
}

/* YouTube Video Container - Glassmorphism Hover Effect */
.video-frame:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Highlight Cards (Murder Squad) - Glassmorphism Default State */
.highlight-card {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-sm) !important;
    transition: all 0.3s ease;
}

/* Highlight Cards (Murder Squad) - Glassmorphism Hover Effect */
.highlight-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

/* Ensure iframes inside glass containers maintain proper display */
.spotify-player iframe {
    border-radius: 10px;
    overflow: hidden;
}

.video-wrapper iframe {
    border-radius: 15px;
    overflow: hidden;
}

/* ============================================
   EMERGENCY RESET - Clean Standard Flow
   ============================================ */

/* Remove all problematic positioning from sections and containers */
section,
.section,
.page-hero,
.solo-catalog-section,
.discography-page,
.bio-page,
.contact-page,
.container,
.main-content,
.content-wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
}

/* Ensure natural vertical flow with proper spacing */
main,
.main-content,
section {
    display: block !important;
    margin-top: 0 !important;
    padding: 40px 0 !important;
}

/* First section after header must have margin-top to clear fixed header */
main > section:first-child,
.main-content > section:first-child,
.page-hero {
    margin-top: 60px !important;
    padding-top: 20px !important;
}



/* Ensure header remains fixed */
header, .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* Reset any transform overlaps */
* {
    transform-box: border-box !important;
}

/* ============================================
   SOUTH CENTRAL CARTEL LEGACY SECTION
   ============================================ */

#scc-legacy {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.section-title.neon-blue {
    background: linear-gradient(90deg, #00FFFF 0%, #0080FF 50%, #00FFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        0 0 10px rgba(0, 200, 255, 0.5),
        0 0 20px rgba(0, 150, 255, 0.3),
        0 0 30px rgba(0, 100, 255, 0.2);
    text-align: center;
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

#scc-legacy .section-title.neon-blue {
    /* Inherits all styles from .section-title.neon-blue */
}

#scc-legacy .section-subtitle {
    text-align: center;
    color: var(--silver-primary);
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

.scc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

#scc-legacy .album-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#scc-legacy .album-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#scc-legacy .album-card iframe {
    border-radius: 12px;
    width: 100%;
    height: 352px;
    border: none;
}

/* Fade-in animation for SCC cards */
#scc-legacy .album-card.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#scc-legacy .album-card.fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for SCC cards */
#scc-legacy .album-card.fade-in:nth-child(1) { transition-delay: 0.1s; }
#scc-legacy .album-card.fade-in:nth-child(2) { transition-delay: 0.2s; }
#scc-legacy .album-card.fade-in:nth-child(3) { transition-delay: 0.3s; }
#scc-legacy .album-card.fade-in:nth-child(4) { transition-delay: 0.4s; }
#scc-legacy .album-card.fade-in:nth-child(5) { transition-delay: 0.5s; }
#scc-legacy .album-card.fade-in:nth-child(6) { transition-delay: 0.6s; }
#scc-legacy .album-card.fade-in:nth-child(7) { transition-delay: 0.7s; }
#scc-legacy .album-card.fade-in:nth-child(8) { transition-delay: 0.8s; }
#scc-legacy .album-card.fade-in:nth-child(9) { transition-delay: 0.9s; }
#scc-legacy .album-card.fade-in:nth-child(10) { transition-delay: 1.0s; }
#scc-legacy .album-card.fade-in:nth-child(11) { transition-delay: 1.1s; }
#scc-legacy .album-card.fade-in:nth-child(12) { transition-delay: 1.2s; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .scc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title.neon-blue {
        font-size: 2.5rem;
    }
    
    .scc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-title.neon-blue {
        font-size: 2rem;
    }
}

/* S.C.C. Singles & Remixes Section */
#scc-singles .section-subtitle {
    text-align: center;
    color: var(--silver-primary);
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

#scc-singles .album-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#scc-singles .album-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#scc-singles .album-card iframe {
    border-radius: 12px;
    width: 100%;
    height: 352px;
    border: none;
}

/* Fade-in animation for SCC singles cards */
#scc-singles .album-card.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#scc-singles .album-card.fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for SCC singles cards */
#scc-singles .album-card.fade-in:nth-child(1) { transition-delay: 0.1s; }
#scc-singles .album-card.fade-in:nth-child(2) { transition-delay: 0.2s; }
#scc-singles .album-card.fade-in:nth-child(3) { transition-delay: 0.3s; }
#scc-singles .album-card.fade-in:nth-child(4) { transition-delay: 0.4s; }
#scc-singles .album-card.fade-in:nth-child(5) { transition-delay: 0.5s; }
#scc-singles .album-card.fade-in:nth-child(6) { transition-delay: 0.6s; }
#scc-singles .album-card.fade-in:nth-child(7) { transition-delay: 0.7s; }
#scc-singles .album-card.fade-in:nth-child(8) { transition-delay: 0.8s; }
#scc-singles .album-card.fade-in:nth-child(9) { transition-delay: 0.9s; }
#scc-singles .album-card.fade-in:nth-child(10) { transition-delay: 1.0s; }
#scc-singles .album-card.fade-in:nth-child(11) { transition-delay: 1.1s; }

/* Responsive adjustments for SCC singles */
/* Note: .section-title.neon-blue responsive styles are already defined above */

/* ============================================
/* ============================================
   🔥 LE VRAI FIX MOBILE (PARDON POUR LE BUG)
   ============================================ */

@media (max-width: 768px) {
    /* 1. ANTI-DÉBORDEMENT */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    *, *::before, *::after {
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    /* 2. LE HEADER (Lui seul est fixe) */
    header, .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 70px !important;
        background: rgba(0, 11, 30, 0.98) !important;
        z-index: 99990 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 3. LE CONTENEUR INTERNE (Garde l'alignement propre) */
    header .container, .navbar .container, .nav-container {
        position: relative !important; /* PAS DE FIXED ICI */
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    /* 4. LE LOGO ET LE BOUTON (Au premier plan) */
    .logo, .navbar-brand {
        position: relative !important;
        z-index: 99999 !important;
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    .menu-toggle {
        display: flex !important;
        position: relative !important;
        z-index: 99999 !important; /* Passe au-dessus du menu */
        pointer-events: auto !important; /* FORCE LE CLIC */
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        width: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 1px solid white !important;
        color: white !important;
        border-radius: 8px !important;
    }

    /* 5. LE TIROIR DÉROULANT */
    .navbar .nav-links, header .nav-links {
        display: none !important;
    }

    .navbar .nav-links.active, header .nav-links.active {
        display: flex !important;
        flex-direction: column !important; /* Force la verticale */
        position: absolute !important; /* S'accroche sous le header */
        top: 70px !important;
        left: 0 !important;
        width: 100vw !important;
        background: rgba(0, 11, 30, 0.98) !important;
        z-index: 99980 !important; /* Sous le bouton mais sur le site */
        padding: 10px 0 20px 0 !important;
        margin: 0 !important;
        border-bottom: 2px solid rgba(30, 144, 255, 0.5) !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.8) !important;
    }

    .navbar .nav-links.active a, header .nav-links.active a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 15px !important;
        margin: 0 !important;
        font-size: 1.3rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* 6. CENTRAGE S25 (Le reste de la page) */
    main, .main-content, .hero {
        margin-top: 70px !important;
    }
    
    .hero-container, .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-title .title-line {
        display: block !important;
        text-align: center !important;
        white-space: normal !important;
        margin: 0 !important;
    }

    .hero-title .title-line:first-child { font-size: 3.2rem !important; line-height: 1 !important; }
    .hero-title .title-line:last-child { font-size: 2.5rem !important; line-height: 1 !important; }

    .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .hero-cta .btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}
/* ============================================
   🔥 FIX SPÉCIFIQUE : CENTRAGE PAGE BIO MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* 1. On centre la boîte principale et son contenu */
    .bio-container, .bio-content, .bio-text, .magazine-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 2. On dompte le texte géant "THE ARCHITECT" */
    .magazine-headline {
        font-size: 2.2rem !important; /* Taille réduite pour téléphone */
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important; /* Autorise le retour à la ligne */
        word-wrap: break-word !important; /* Coupe les mots trop longs si besoin */
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    /* 3. On centre le sous-titre "30 years of..." */
    .magazine-subtitle {
        font-size: 1.2rem !important;
        text-align: center !important;
    }

    /* 4. On centre la petite barre bleue de séparation */
    .magazine-divider {
        margin: 20px auto !important; /* Le "auto" gauche/droite centre la ligne */
    }

    /* 5. On centre tous les paragraphes de texte en dessous */
    .magazine-content, .magazine-section, .magazine-intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .lead-paragraph, .magazine-section p {
        text-align: center !important;
        width: 100% !important;
    }

    /* 6. On empile les petits encarts (Billboard, 30 Years, etc.) proprement */
    .magazine-highlights {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        width: 100% !important;
    }

    .highlight-card {
        display: flex !important;
        flex-direction: column !important; /* L'icône passe au-dessus du texte */
        align-items: center !important;
        text-align: center !important;
    }
}
/* ============================================
   🌊 FIX GLOBAL : VOILE PLEIN ÉCRAN (S25)
   ============================================ */

@media (max-width: 768px) {
    /* 1. On s'assure que rien ne bloque sur les bords du site */
    html, body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 2. On force TOUS les voiles et textures à coller aux bords */
    .hero-overlay, 
    .bio-texture, 
    .smoke-bg, 
    .page-hero::before,
    section::before {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important; /* vw = largeur totale de la vue */
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: absolute !important;
    }

    /* 3. On vérifie la section bio spécifiquement */
    .biography-page, .page-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    /* 1. On organise les icônes en ligne qui revient à la ligne (Wrap) */
    .streaming-links {
        display: flex !important;
        flex-direction: row !important; /* On repasse en ligne */
        flex-wrap: wrap !important;     /* On autorise le passage à la ligne */
        justify-content: center !important;
        gap: 20px !important;           /* Espace entre les icônes */
        padding: 20px !important;
        width: 100% !important;
    }

    /* 2. On ajuste la taille pour qu'elles soient bien visibles mais pas géantes */
    .streaming-btn {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.4rem !important;
        margin: 0 !important; /* On enlève les marges qui pourraient décentrer */
    }
}

/* ============================================ 
    PRO NEON SIGN - SOUTH CENTRAL CARTEL 
    ============================================ */ 
 
 .pro-neon-container { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     /* On ajoute un gros espace en haut (100px) pour passer sous le menu */ 
     padding: 100px 20px 20px 20px; 
     background: transparent; 
     width: 100%; 
     position: relative; 
     z-index: 10; /* Pour s'assurer qu'il passe par-dessus les autres fonds */ 
 } 
 
 .pro-neon-text { 
     font-family: 'Tilt Neon', sans-serif !important; 
     font-weight: 400 !important; /* Tilt Neon est optimisée pour ce poids */ 
     font-size: clamp(2rem, 6vw, 4.5rem); 
     color: #e0f2fe; 
     text-transform: uppercase; 
     letter-spacing: 8px !important; /* Un peu moins espacé pour que les courbes respirent bien */ 
     text-align: center; 
     margin: 0; 
     
     text-shadow: 
         0 0 2px rgba(255, 255, 255, 0.8), 
         0 0 10px rgba(30, 144, 255, 0.8), 
         0 0 20px rgba(30, 144, 255, 0.8), 
         0 0 40px rgba(0, 100, 255, 0.9), 
         0 0 80px rgba(0, 100, 255, 0.7), 
         0 0 120px rgba(0, 50, 255, 0.5); 
         
     animation: neonFault 4s infinite alternate; 
 } 
 
 @keyframes neonFault { 
     0%, 18%, 22%, 25%, 53%, 57%, 100% { 
         text-shadow: 
             0 0 2px rgba(255, 255, 255, 0.8), 
             0 0 10px rgba(30, 144, 255, 0.8), 
             0 0 20px rgba(30, 144, 255, 0.8), 
             0 0 40px rgba(0, 100, 255, 0.9), 
             0 0 80px rgba(0, 100, 255, 0.7), 
             0 0 120px rgba(0, 50, 255, 0.5); 
         color: #e0f2fe; 
     } 
     20%, 24%, 55% {        
         text-shadow: none; 
         color: rgba(30, 144, 255, 0.15); 
     } 
 } 
 
 @media (max-width: 768px) { 
     .pro-neon-text { 
         letter-spacing: 4px; 
         font-size: 2.2rem; 
     } 
 } 
 
 /* ============================================ 
     HEADER SLIM FIX - AFFINAGE DE LA BARRE DE NAV 
     ============================================ */ 
 
 /* Sur PC : On passe de 60px à 45px de hauteur */ 
 header, .navbar { 
     height: 45px !important; 
 } 
 
 /* On remonte un peu le néon pour compenser la barre plus fine */ 
 .pro-neon-container { 
     padding: 60px 20px 10px 20px !important; 
 } 
 
 /* Sur Mobile : On passe de 70px à 55px de hauteur */ 
 @media (max-width: 768px) { 
     header, .navbar { 
         height: 55px !important; 
     } 
     
     /* On ajuste le décalage du contenu pour qu'il ne rentre pas dans la barre */ 
     main, .main-content, .hero { 
         margin-top: 55px !important; 
     } 
     
     /* Le menu déroulant avec un vrai fond opaque */ 
     header .nav-links.active, .navbar .nav-links.active { 
         display: flex !important; 
         flex-direction: column !important; 
         justify-content: flex-start !important; 
         align-items: center !important; 
         position: absolute !important; 
         top: 55px !important; /* Se cale juste sous la barre */ 
         left: 0 !important; 
         width: 100% !important; 
         background: #00050b !important; /* Fond noir profond */ 
         padding: 20px 0 30px 0 !important; 
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9) !important; 
         z-index: 9999 !important; /* Oblige le menu à rester au-dessus de tout */ 
         border-bottom: 2px solid rgba(30, 144, 255, 0.3) !important; /* Petite ligne bleue en bas */ 
     } 
     
     /* Espacement parfait pour cliquer avec le doigt sur mobile */ 
     header .nav-links.active a, .navbar .nav-links.active a { 
         padding: 15px 0 !important; 
         width: 100% !important; 
         text-align: center !important; 
         font-size: 1.2rem !important; 
         display: block !important; 
     } 
 } 
 
 /* ============================================ 
     FIX CENTRAGE VERTICAL DU HEADER 
     ============================================ */ 
 
 header, .navbar { 
     height: 50px !important; /* Un poil plus grand pour respirer */ 
     padding-top: 0 !important; /* C'EST ÇA QUI CAUSAIT LE BUG */ 
     padding-bottom: 0 !important; 
     display: flex !important; 
     align-items: center !important; 
 } 
 
 header .container, .navbar .container, .nav-container { 
     height: 100% !important; 
     display: flex !important; 
     align-items: center !important; 
     margin: 0 auto !important; 
 } 
 
 .logo, .navbar-brand, .nav-links { 
     margin: 0 !important; 
     padding: 0 !important; 
     display: flex !important; 
     align-items: center !important; 
     height: 100% !important; 
 } 
 
 .nav-links a { 
     display: flex !important; 
     align-items: center !important; 
     height: 100% !important; 
     margin: 0 !important; 
 } 
 
 @media (max-width: 768px) { 
     /* On s'assure que le header est la base de référence */ 
     header, .navbar { 
         position: relative !important; 
     } 
 
     /* Le nouveau menu stylé */ 
     .nav-links.active, 
     header .nav-links.active, 
     .navbar .nav-links.active { 
         position: absolute !important; 
         top: 100% !important; /* S'accroche pile au bas du header, AUCUN espace */ 
         left: 0 !important; 
         width: 100% !important; 
         height: auto !important; /* S'adapte au contenu, plus joli que le plein écran */ 
         
         /* Le style "Verre Fumé & Néon" */ 
         background: rgba(0, 5, 11, 0.95) !important; 
         backdrop-filter: blur(10px) !important; 
         border-top: 1px solid rgba(30, 144, 255, 0.4) !important; 
         border-bottom: 3px solid rgba(30, 144, 255, 0.8) !important; 
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important; 
         
         z-index: 999999 !important; 
         display: flex !important; 
         flex-direction: column !important; 
         padding: 20px 0 !important; 
         gap: 10px !important; 
     } 
     
     /* Des liens beaucoup plus classes */ 
     .nav-links.active a { 
         color: #ffffff !important; 
         font-family: 'Oswald', sans-serif !important; /* Typo agressive */ 
         font-size: 1.4rem !important; 
         text-transform: uppercase !important; 
         letter-spacing: 4px !important; 
         padding: 15px 0 !important; 
         width: 100% !important; 
         text-align: center !important; 
         background: transparent !important; 
         border: none !important; /* Enlève les vieilles lignes de séparation */ 
         transition: all 0.3s ease !important; 
     } 
     
     /* Effet quand on touche le lien sur l'écran */ 
     .nav-links.active a:active, 
     .nav-links.active a:hover { 
         color: #1E90FF !important; 
         text-shadow: 0 0 15px rgba(30, 144, 255, 0.8) !important; 
         background: rgba(30, 144, 255, 0.05) !important; 
     } 
 } 
 
 /* ============================================ 
     BOUTONS HYDRAULIQUES (LOWRIDER EFFECT) 
     ============================================ */ 
 
 /* Ajoute ces classes selon le nom de tes boutons */ 
 .btn, .cta-button, .hero-content a { 
     /* Le secret du rebond : la courbe cubic-bezier */ 
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
     display: inline-block; /* Nécessaire pour que le transform fonctionne bien */ 
 } 
 
 /* L'effet "Jump" au survol de la souris */ 
 .btn:hover, .cta-button:hover, .hero-content a:hover { 
     transform: translateY(-8px) scale(1.05) !important; /* Saute vers le haut */ 
     box-shadow: 0 15px 25px rgba(30, 144, 255, 0.5) !important; /* L'ombre s'étire en dessous */ 
 } 
 
 /* L'effet "Drop" quand on clique (sur PC) ou qu'on appuie (sur Mobile) */ 
 .btn:active, .cta-button:active, .hero-content a:active { 
     transform: translateY(4px) scale(0.95) !important; /* S'enfonce dans le sol */ 
     box-shadow: 0 5px 10px rgba(30, 144, 255, 0.8) !important; 
     transition: all 0.1s ease !important; /* Très rapide à l'impact */ 
 } 
 
 /* ============================================ 
     LIENS DU HEADER PC - EFFET NEON & SOULIGNEMENT 
     ============================================ */ 
 
 /* Uniquement pour les écrans PC (pour ne pas casser le menu mobile qu'on a fait) */ 
 @media (min-width: 769px) { 
     header .nav-links a, .navbar .nav-links a { 
         /* On utilise une typo plus massive (Archivo Black ou on force le gras sur Oswald) */ 
         font-family: 'Archivo Black', 'Oswald', sans-serif !important; 
         font-size: 1.1rem !important; 
         font-weight: 900 !important; /* Ultra gras pour l'impact */ 
         font-style: italic !important; /* Incliné pour le côté dynamique/rapide */ 
         text-transform: uppercase !important; 
         letter-spacing: 3px !important; /* Lettres bien espacées */ 
         color: #e2e8f0 !important; /* Blanc un peu métallique */ 
         text-decoration: none !important; 
         padding: 5px 10px !important; 
         margin: 0 15px !important; 
         position: relative !important; 
         transition: all 0.3s ease !important; 
         /* Une micro-ombre portée noire par défaut pour faire ressortir le texte */ 
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; 
     } 
 
     /* La barre bleue cachée sous le texte */ 
     header .nav-links a::after, .navbar .nav-links a::after { 
         content: ''; 
         position: absolute; 
         width: 0; 
         height: 2px; 
         bottom: -2px; /* Se place juste sous le texte */ 
         left: 50%; 
         transform: translateX(-50%); /* Permet à la barre de s'étendre depuis le centre */ 
         background-color: #1E90FF; 
         box-shadow: 0 0 10px rgba(30, 144, 255, 0.8); /* Lueur de la barre */ 
         transition: width 0.3s ease; 
     } 
 
     /* L'effet au survol de la souris */ 
     header .nav-links a:hover, .navbar .nav-links a:hover { 
         color: #1E90FF !important; 
         text-shadow: 0 0 15px rgba(30, 144, 255, 0.5) !important; 
     } 
 
     /* La barre s'étire à 100% de la largeur au survol */ 
     header .nav-links a:hover::after, .navbar .nav-links a:hover::after { 
         width: 100%; 
     } 
 } 
 
 /* ============================================ 
     LOGO HEADER - EFFET NÉON "BIG PRODEJE" 
     ============================================ */ 
 
 header .logo, .navbar .navbar-brand, .logo a { 
     font-family: 'Archivo Black', 'Oswald', sans-serif !important; 
     font-size: 1.6rem !important; /* Un peu plus grand que les autres liens */ 
     font-weight: 900 !important; 
     color: #ffffff !important; 
     text-transform: uppercase !important; 
     letter-spacing: 4px !important; 
     text-decoration: none !important; 
     
     /* L'effet Néon Bleu permanent */ 
     text-shadow: 
         0 0 5px rgba(255, 255, 255, 0.8), 
         0 0 10px rgba(30, 144, 255, 0.8), 
         0 0 20px rgba(30, 144, 255, 0.8), 
         0 0 40px rgba(30, 144, 255, 0.6) !important; 
         
     transition: all 0.3s ease !important; 
     display: inline-block !important; /* Nécessaire pour le petit zoom au survol */ 
 } 
 
 /* Le néon brille encore plus fort quand on passe la souris dessus */ 
 header .logo:hover, .navbar .navbar-brand:hover, .logo a:hover { 
     text-shadow: 
         0 0 5px rgba(255, 255, 255, 1), 
         0 0 15px rgba(30, 144, 255, 1), 
         0 0 30px rgba(30, 144, 255, 0.9), 
         0 0 60px rgba(30, 144, 255, 0.7) !important; 
     transform: scale(1.05) !important; /* Petit effet de zoom */ 
 } 
 
 /* ============================================ 
    BOUTON ACCUEIL "BIG PRODEJE" - EFFET NÉON 
    ============================================ */ 
 
 .brand-neon { 
     font-family: 'Archivo Black', 'Oswald', sans-serif !important; 
     font-size: 1.8rem !important; 
     font-weight: 900 !important; 
     color: #ffffff !important; 
     text-transform: uppercase !important; 
     letter-spacing: 4px !important; 
     text-decoration: none !important; 
     
     /* Néon Bleu permanent */ 
     text-shadow: 
         0 0 5px rgba(255, 255, 255, 0.8), 
         0 0 10px rgba(30, 144, 255, 0.8), 
         0 0 20px rgba(30, 144, 255, 0.8), 
         0 0 40px rgba(30, 144, 255, 0.6) !important; 
         
     transition: all 0.3s ease !important; 
     display: inline-block !important; /* Pour que le survol fonctionne bien */ 
     margin-right: auto !important; /* Pousse le reste du menu à droite si besoin */ 
 } 
 
 /* Lueur intense au survol */ 
 .brand-neon:hover { 
     color: #ffffff !important; 
     text-shadow: 
         0 0 5px rgba(255, 255, 255, 1), 
         0 0 15px rgba(30, 144, 255, 1), 
         0 0 30px rgba(30, 144, 255, 0.9), 
         0 0 60px rgba(30, 144, 255, 0.7) !important; 
     transform: scale(1.05) !important; 
 }