/* Simple gray background like news.html */
        body { 
            background: var(--gray-100); 
            overflow-x: hidden; 
        }
        
        /* Dark mode compatibility */
        [data-theme="dark"] body { 
            background: var(--gray-900); 
        }
        


        /* Quick view modal styles */
        .modal { 
            position: fixed; 
            inset: 0; 
            background: rgba(2,6,23,.6); 
            display: none; 
            align-items: center; 
            justify-content: center; 
            z-index: 1000; 
            overflow: auto; 
        }
        .modal.show { 
            display: flex; 
        }
        .modal-card { 
            width: min(1000px, 92vw); 
            max-height: 92vh; 
            background: var(--surface); 
            border-radius: 14px; 
            border: 1px solid var(--gray-200); 
            box-shadow: var(--elev-2); 
            display: flex; 
            flex-direction: column; 
        }
        .modal-head { 
            position: sticky; 
            top: 0; 
            background: var(--surface); 
            z-index: 2; 
            display: flex; 
            flex-direction: column; 
            align-items: flex-start; 
            gap: .4rem; 
            padding: .8rem 1rem; 
            border-bottom: 1px solid var(--gray-200); 
            border-top-left-radius: 14px; 
            border-top-right-radius: 14px; 
        }
        .modal-head .head-row { 
            width: 100%; 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
        }
        .modal-head .head-actions { 
            display: block; 
        }
        .modal-subtitle { 
            color: var(--gray-600); 
            font-size: .9rem; 
            margin-top: .25rem; 
        }
        .modal-body { 
            padding: 1rem; 
            display: block; 
            overflow: auto; 
        }
        .modal-close { 
            position: absolute; 
            top: .8rem; 
            right: 1rem; 
            width: 40px; 
            height: 40px; 
            border-radius: 999px; 
            border: 0; 
            background: #ffffff; 
            display: inline-grid; 
            place-items: center; 
            cursor: pointer; 
            box-shadow: 0 8px 22px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.08) inset; 
            transition: box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); 
        }
        .modal-close:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 12px 28px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.12) inset; 
        }
        .modal-close:focus-visible { 
            outline: none; 
            box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 8px 22px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.1) inset; 
        }
        .modal-close .icon-x { 
            display: none; 
        }
        .modal-close::before, .modal-close::after { 
            content: ''; 
            position: absolute; 
            width: 16px; 
            height: 2px; 
            background: #0f172a; 
            border-radius: 2px; 
            opacity: 1; 
            transform: scaleX(1) rotate(45deg); 
            transition: transform .18s ease, opacity .18s ease, background-color .18s ease; 
        }
        .modal-close::after { 
            transform: scaleX(1) rotate(-45deg); 
        }
        .modal-close:hover::before, .modal-close:hover::after { 
            background: #0b1220; 
            transform: scaleX(1.05) rotate(45deg); 
        }
        .modal-close:hover::after { 
            transform: scaleX(1.05) rotate(-45deg); 
            transition-delay: .02s; 
        }
        .modal-sections { 
            display: flex; 
            flex-direction: column; 
            gap: .75rem; 
        }
        .modal-title { 
            display: flex; 
            align-items: center; 
            justify-content: flex-end; 
            gap: .5rem; 
        }
        .modal-title h3 { 
            margin: 0; 
            font-size: 1.2rem; 
        }
        .modal-primary { 
            display: flex; 
            flex-direction: column; 
            gap: .35rem; 
        }
        .modal-subgrid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: .75rem; 
        }
        .modal-media { 
            border: 1px solid var(--gray-200); 
            border-radius: 10px; 
            padding: .55rem; 
            background: #fff; 
            display: flex; 
            flex-direction: column; 
            gap: .3rem; 
        }
        .modal-media h4 { 
            margin: .05rem 0 .1rem; 
            font-size: .95rem; 
            color: var(--gray-700); 
        }
        .modal-media .embed { 
            position: relative; 
            aspect-ratio: 16/9; 
            border-radius: 10px; 
            overflow: hidden; 
            background: #0b1220; 
        }
        .modal-media .embed iframe, .modal-media .embed video { 
            position: absolute; 
            inset: 0; 
            width: 100%; 
            height: 100%; 
            border: 0; 
        }
        .modal-media .meta { 
            font-size: .9rem; 
            color: var(--gray-600); 
            display: flex; 
            flex-wrap: wrap; 
            gap: .25rem; 
            align-items: center; 
        }
        .modal-media .video-desc { 
            padding-top: .25rem; 
        }
        .modal-desc { 
            color: var(--gray-700); 
        }
        .modal-media.audio .embed { 
            aspect-ratio: auto; 
            background: transparent; 
        }
        .modal-media.spotify .embed { 
            aspect-ratio: auto; 
            background: transparent; 
        }
        .mv-nav { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            gap: .75rem; 
            margin-top: .4rem; 
        }
        .mv-counter { 
            color: var(--gray-600); 
            font-size: .9rem; 
            flex: 1; 
            text-align: center; 
        }
        .related-list { 
            display: grid; 
            gap: .5rem; 
        }
        .rel-item { 
            border: 1px solid var(--gray-200); 
            border-radius: 10px; 
            padding: .6rem .75rem; 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
        }
        .divider { 
            height: 1px; 
            background: var(--gray-200); 
            border: 0; 
            margin: .4rem 0; 
        }
        .tag { 
            padding: .15rem .45rem; 
            border-radius: 999px; 
            background: var(--gray-100); 
            border: 1px solid var(--gray-200); 
            font-size: .75rem; 
            color: var(--gray-700); 
        }
        .tag-cat { 
            background: #eef2ff; 
            border-color: #c7d2fe; 
            color: #3730a3; 
        }
        .muted { 
            color: var(--gray-600); 
            font-size: .92rem; 
            letter-spacing: 0; 
        }
        .btn { 
            padding: .5rem .8rem; 
            border-radius: 10px; 
            border: 1px solid var(--gray-300); 
            background: var(--surface); 
            color: var(--gray-800); 
            font-weight: 600; 
            font-size: .95rem; 
            cursor: pointer; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            text-align: center; 
            transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease; 
            letter-spacing: -0.005em; 
        }
        .btn:link, .btn:visited { 
            text-decoration: none; 
        }
        .btn:hover { 
            transform: translateY(-2px); 
            box-shadow: var(--elev-1); 
            text-decoration: none; 
            background: var(--gray-50); 
            border-color: var(--gray-300); 
        }
        .btn.primary { 
            background: var(--gray-900); 
            border-color: var(--gray-900); 
            color: white; 
        }
        .btn.primary:hover { 
            background: var(--gray-800); 
            border-color: var(--gray-800); 
            box-shadow: var(--elev-1); 
        }
        @media (max-width: 900px) { 
            .modal-subgrid { 
                grid-template-columns: 1fr; 
            } 
        }
        @media (max-width: 640px) {
            .modal {
                align-items: flex-start;
            }
            .modal-card {
                width: 100vw;
                max-width: 100vw;
                height: 100vh;
                max-height: 100vh;
                border-radius: 0;
            }
            .modal-body {
                padding: .75rem;
            }
            .modal-head {
                padding: .6rem .75rem;
            }
        }

        /* Dark mode compatibility for modal */
        [data-theme="dark"] .modal-card,
        [data-theme="dark"] .modal-media { 
            background: var(--gray-900); 
        }
        [data-theme="dark"] .modal-card,
        [data-theme="dark"] .modal-media { 
            border-color: var(--gray-700); 
        }
        [data-theme="dark"] .btn { 
            color: var(--gray-100); 
            border-color: var(--gray-700); 
        }
        [data-theme="dark"] .btn.primary { 
            background: var(--gray-700); 
            border-color: var(--gray-700); 
            color: white; 
        }
        [data-theme="dark"] .modal-close { 
            background: var(--gray-900); 
            box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset; 
        }
        [data-theme="dark"] .modal-close::before, 
        [data-theme="dark"] .modal-close::after { 
            background: var(--gray-100); 
        }


                

        html, body {
      scroll-behavior: smooth;
            margin: 0;
            padding: 0;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        
        * {
            box-sizing: border-box;
    }
    @keyframes pulse-glow {
        0%, 100% { 
            opacity: 0.85; 
            transform: scale(1);
        }
        50% { 
            opacity: .98; 
            transform: scale(1.03);
        }
    }
    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes subtleShimmer {
        0% {
            background-position: -200% 0, 0 0;
        }
        100% {
            background-position: 200% 0, 0 0;
        }
    }

    /* Section Borders for Visual Separation */
    .highlights-section {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
        padding-bottom: 4rem;
    }

    .section-showcase {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        margin-bottom: 0;
        padding-bottom: 4rem;
    }

    .popular-compositions-section {
        margin-bottom: 3rem;
        padding-bottom: 2rem;
    }

    .section-showcase.alt-bg {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .testimonials-section {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
        padding-bottom: 4rem;
    }

    .cta-section {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        margin-top: 0;
        padding-top: 4rem;
    }

    /* Responsive borders for mobile */
    @media (max-width: 768px) {
        .highlights-section,
        .section-showcase,
        .testimonials-section,
        .cta-section {
            border-width: 0.5px;
            padding-bottom: 3rem;
        }
        
        .cta-section {
            padding-top: 3rem;
        }
    }
    /* Explore Button Styles */
    .explore-btn {
        display: inline-block;
        color: var(--gray-100);
        font-size: 25px;
        background: var(--primary-400);
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
        border-radius: 50px;
        padding: 7px 10px;
        border: 1px solid var(--primary-400);
        box-shadow: 0 4px 10px rgba(0,0,0,0.13);
        position: relative;
        overflow: hidden;
        z-index: 10;
        pointer-events: auto;
        
        /* Initial hidden state for animation */
        opacity: 0;
        transform: translateY(20px);
        
        /* Animation sequence - removed infinite pulse-glow animation */
        animation: 
            fadeInUp 0.8s ease-out 0.6s forwards;
    }
    
    .explore-btn:hover { 
        color: var(--gray-100);
        background: 
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 20%,
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 255, 255, 0.3) 80%,
                transparent 100%
            ),
            var(--primary-500);
        background-size: 200% 100%, 100% 100%;
        border-color: var(--primary-500);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
        
        /* Removed pulse-glow animation, keep fadeInUp intact, add shimmer */
        animation: 
            fadeInUp 0.8s ease-out 0.6s forwards,
            subtleShimmer 4s linear infinite;
            
        /* Override transform for hover effect */
        transform: scale(1.05) translateY(-1px) !important;
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    @media (max-width: 768px) {
        .explore-btn {
            font-size: 18px;
            padding: 8px 16px;
        }
    }



    .explore-btn.secondary {
        background: rgba(255, 255, 255, 0.2);
        color: var(--gray-100);
        border: 2px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        font-size: 1.1rem; /* ✨ INCREASED: Larger font size */
        padding: 1rem 3rem; /* ✨ INCREASED: More padding for bigger buttons */
        width: 320px; /* ✨ INCREASED: Wider buttons */
        height: 56px; /* ✨ INCREASED: Taller buttons */
        position: relative;
        z-index: 1000 !important; /* ✨ FIXED: Much higher z-index to ensure clickability */
        text-decoration: none;
        display: inline-flex; /* ✨ FIXED: Changed from inline-block to inline-flex for better alignment */
        align-items: center; /* ✨ FIXED: Added for better text alignment */
        justify-content: center; /* ✨ FIXED: Added for better text alignment */
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(0);
        pointer-events: auto !important; /* ✨ FIXED: Force pointer events */
        white-space: nowrap; /* ✨ FIXED: Prevent text wrapping in buttons */
        text-align: center; /* ✨ FIXED: Ensure text is centered */
        box-sizing: border-box; /* ✨ FIXED: Ensure padding is included in width */
        min-width: 320px; /* ✨ INCREASED: Ensure minimum width */
        max-width: 320px; /* ✨ INCREASED: Ensure maximum width */
        flex-shrink: 0; /* ✨ ADDED: Prevent shrinking */
        margin: 0 1rem; /* ✨ ADDED: More spacing between buttons */
        border-radius: 8px; /* ✨ ADDED: Rounded corners to prevent cut-out */
        overflow: hidden; /* ✨ ADDED: Ensure content doesn't overflow */
    }

    .explore-btn.secondary:hover {
        background: rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 255, 255, 0.9);
        transform: scale(1.08) translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
        color: var(--gray-100);
    }

    .explore-btn.secondary:active {
        transform: scale(1.05) translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    }
    /* Hero Video Styles */
      .hero-video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 3;
          opacity: 0;
        transition: opacity 0.8s ease;
      }

      .hero-video.loaded {
          opacity: 1;
      }

      .hero-fallback-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 1;
          opacity: 1;
        transition: all 0.8s ease;
        filter: brightness(0.8);
      }

      .hero-fallback-image.hidden {
          opacity: 0;
          z-index: 0 !important;
        transform: scale(0.98);
          visibility: hidden;
          pointer-events: none;
      }

      .hero-fallback-image.active {
          opacity: 1;
          z-index: 2 !important;
        transform: scale(1);
          visibility: visible;
          pointer-events: auto;
      }

    .works-grid.dragging {
        cursor: grabbing;
        user-select: none;
    }
    .works-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: var(--space-5);
        padding: 0;
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        scroll-behavior: smooth;
        cursor: grab;
    }

    /* Dynamic Hero Styles */
    .hero-content-dynamic {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .hero-main-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--gray-100);
        margin-bottom: 1.5rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        letter-spacing: 2px;
    }

    .hero-content-container {
        /* ✨ ENHANCED: Improved styling for hero content dynamic */
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 2rem 1.5rem;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;

        /* ✨ NEW: Enhanced fade-in animation for content container */
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: heroContentFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        cursor: pointer; /* make full card feel interactive */
    }

    /* Subtle lift and glow on full card hover/focus */
    .hero-content-container:hover,
    .hero-content-container:focus-visible {
        transform: translateY(-6px) scale(0.99);
        box-shadow: 0 16px 48px rgba(2,6,23,.25), 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 28px rgba(59,130,246,.18);
        border-color: rgba(255,255,255,0.18);
        outline: none;
    }

    @keyframes heroContentFadeIn {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            filter: blur(8px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0px);
        }
    }

    .hero-rotating-content {
        position: relative;
        min-height: 150px; /* ✨ REDUCED: More compact without buttons */
        height: 150px; /* ✨ REDUCED: More compact without buttons */
        overflow: hidden;
        width: 100%;
        display: block;
    }

    .hero-role {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
        text-align: center;
        min-height: 150px; /* ✨ REDUCED: More compact without buttons */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        z-index: 1;
        padding: 1rem; /* ✨ FIXED: Added padding to prevent edge cutoff */
    }

    .hero-role.active {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        z-index: 100 !important; /* ✨ FIXED: Higher z-index for active role */
        cursor: pointer;
    }

    /* Clickable hover affordance for hero cards: lift only, no inner glow */
    .hero-role.active:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }

    /* ✨ SMART DIRECTIONAL ANIMATIONS: Dynamic transitions based on navigation flow */
    .hero-role.slide-left {
        transform: translateX(-100px) translateY(0);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role.slide-right {
        transform: translateX(100px) translateY(0);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role.slide-up {
        transform: translateY(60px);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role.slide-down {
        transform: translateY(-60px);
        opacity: 0;
        pointer-events: none;
    }

    /* Fallback for auto-rotation (original directional animations) */
    .hero-role[data-role="composer"]:not(.active) {
        transform: translateX(-100px) translateY(0);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role[data-role="trumpeter"]:not(.active) {
        transform: translateX(100px) translateY(0);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role[data-role="educator"]:not(.active) {
        transform: translateX(100px);
        opacity: 0;
        pointer-events: none;
    }

    .hero-role-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--gray-100);
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .hero-role-description {
        font-size: 1.1rem;
        color: var(--gray-200);
        margin-bottom: 2.5rem; /* ✨ FIXED: Increased from 2rem to give more space before button */
        line-height: 1.6;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 1rem; /* ✨ FIXED: Added horizontal padding for better text wrapping */
    }
    .hero-nav-dots {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
        position: relative;
        z-index: 1000 !important; /* ✨ FIXED: Much higher z-index to ensure clickability */
        pointer-events: auto !important; /* ✨ FIXED: Force pointer events */
    }

    .dot {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        border: none;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1001 !important; /* ✨ FIXED: Higher z-index than container */
        pointer-events: auto !important; /* ✨ FIXED: Force pointer events */
        overflow: hidden;
        transform: scaleX(1);
    }

    .dot.active {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
        transform: scaleX(1.1);
    }

    .dot:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: scaleX(1.3) scaleY(1.2);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }

    .dot:active {
        transform: scaleX(1.2) scaleY(1.1);
        background: rgba(255, 255, 255, 0.8);
    }

    /* ✨ ADDED: Hero Scroll Toggle Styles */
    .hero-scroll-toggle {
        position: absolute;
        bottom: -5.5rem; /* ✨ ADJUSTED: Closer to compact content */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        z-index: 1000 !important;
        pointer-events: auto !important;
        transition: all 0.3s ease;
        opacity: 0.8;
    }

    /* removed scroll toggle styles */

    .dot::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transition: left 0.5s ease;
    }

    .dot:hover::before {
        left: 100%;
    }

    @media (max-width: 768px) {
        .hero-main-title {
            font-size: 2rem;
        }
        
        .hero-role-title {
            font-size: 1.5rem;
        }
        
        .hero-role-description {
            font-size: 1rem;
        }
        
        .hero-content-dynamic {
            padding: 0 1rem;
        }

        .hero-nav-dots {
            gap: 0.75rem;
        }

        .dot {
            width: 30px;
            height: 3px;
        }
    }

     /* Section Styles */
     .section-showcase {
         padding: 4rem 0;
         background: var(--gray-50);
     }

     .section-showcase.alt-bg {
         background: var(--gray-100);
     }

     .section-header {
         text-align: center;
         margin-bottom: 3rem;
     }

     .section-title {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--gray-900);
     }

     .section-subtitle {
         font-size: 1.1rem;
         color: var(--gray-600);
         max-width: 600px;
         margin: 0 auto;
         line-height: 1.6;
     }

     /* Enhanced Catalog Highlights Section */
     .catalog-highlights-grid {
         display: flex;
         grid-template-columns: 2fr 1fr;
         gap: 3rem;
         align-items: start;
        width: 96%;
         margin: 0 auto;
     }

     .featured-composition {
         background: white;
         border-radius: 16px;
         overflow: hidden;
         box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         display: flex;
         min-height: 400px;
     }

     .featured-composition:hover {
         transform: translateY(-5px);
         box-shadow: 0 20px 40px rgba(0,0,0,0.15);
     }

     .featured-composition-image {
         flex: 1;
         position: relative;
         overflow: hidden;
         min-height: 400px;
     }

     .composition-highlight-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.3s ease;
     }

     .featured-composition:hover .composition-highlight-img {
         transform: scale(1.05);
     }

     /* Audio Preview Overlay */
     .audio-preview-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .featured-composition:hover .audio-preview-overlay {
         opacity: 1;
     }

     .preview-play-btn {
         background: rgba(255, 255, 255, 0.9);
         border: none;
         border-radius: 50px;
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
         font-weight: 600;
         color: var(--gray-900);
         cursor: pointer;
         transition: all 0.3s ease;
         backdrop-filter: blur(10px);
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     }

     .preview-play-btn:hover {
         background: white;
         transform: scale(1.05);
         box-shadow: 0 6px 20px rgba(0,0,0,0.2);
     }

     .play-icon {
         font-size: 1.2rem;
         color: var(--primary-500);
     }

     .featured-composition-content {
         flex: 1;
         padding: 2.5rem;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .composition-header {
         margin-bottom: 1.5rem;
     }

     .featured-title {
         font-size: 1.8rem;
         font-weight: 700;
         margin-bottom: 1rem;
         color: var(--gray-900);
         line-height: 1.3;
     }

     .composition-badges {
         display: flex;
         gap: 0.5rem;
         flex-wrap: wrap;
     }

     .difficulty-badge {
         background: var(--primary-100);
         color: var(--primary-700);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
     }

     .year-badge {
         background: var(--gray-100);
         color: var(--gray-700);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
     }

     .featured-instrumentation {
         font-size: 1.1rem;
         color: var(--primary-600);
         font-weight: 600;
         margin-bottom: 0;
     }

     .featured-description {
         color: var(--gray-600);
         line-height: 1.6;
         margin-bottom: 1.5rem;
         flex-grow: 1;
     }

     /* Audio Player Styling */
     .composition-audio-preview {
         margin-bottom: 1.5rem;
         padding: 1rem;
         background: var(--gray-50);
         border-radius: 12px;
         border: 1px solid var(--gray-200);
     }

     .composition-audio-preview audio {
         width: 100%;
         height: 40px;
         border-radius: 8px;
     }

         .primary-actions-container {
        display: flex;
        gap: 1rem;

    }

    .primary-actions-container .btn-buy,
    .primary-actions-container .btn-primary {
        flex: 1;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: 1px solid;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        white-space: nowrap;
    }

    .primary-actions-container .btn-buy {
        background: var(--primary-500);
        color: white;
        border-color: var(--primary-500);
    }

    .primary-actions-container .btn-buy:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
    
    /* Disabled Buy Now button styling */
    .primary-actions-container .btn-buy[style*="opacity: 0.6"] {
        background: var(--gray-300);
        border-color: var(--gray-400);
        color: var(--gray-600);
        cursor: not-allowed;
        transform: none;
    }
    
    .primary-actions-container .btn-buy[style*="opacity: 0.6"]:hover {
        background: var(--gray-300);
        border-color: var(--gray-400);
        color: var(--gray-600);
        transform: none;
        box-shadow: none;
    }

    .primary-actions-container .btn-primary {
        background: transparent;
        color: var(--primary-600);
        border-color: var(--primary-500);
    }

    .primary-actions-container .btn-primary:hover {
        background: var(--primary-50);
        color: var(--primary-700);
        border-color: var(--primary-600);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }

    .buy-now-container {
        margin-bottom: 1rem;
    }
     .composition-actions {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .composition-actions .btn-primary {
         flex: 1;
         min-width: 140px;
         text-align: center;
     }

     .composition-actions .btn-secondary {
         flex: 1;
         min-width: 140px;
         text-align: center;
         background: transparent;
         color: var(--gray-700);
         border: 2px solid var(--gray-300);
     }

     .composition-actions .btn-secondary:hover {
         background: var(--gray-100);
         border-color: var(--gray-400);
     }

     /* Enhanced Stats Section */
     .catalog-stats {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         background: white;
         padding: 2rem;
         border-radius: 16px;
         box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         height: fit-content;
     }
     
     /* Horizontal Stats Layout */
     .catalog-stats-horizontal {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .stats-header {
         text-align: center;
         margin-bottom: 1rem;
         padding-bottom: 1rem;
         border-bottom: 2px solid var(--gray-100);
     }

     .stats-header h3 {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--gray-900);
         margin: 0;
     }

     .stat-item {
         text-align: center;
         padding: 1.5rem;
         background: var(--gray-50);
         border-radius: 12px;
         transition: all 0.3s ease;
         border: 2px solid transparent;
     }

     .stat-item:hover {
         background: white;
         border-color: var(--primary-200);
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }

     .featured-stat {
         background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
         border: 2px solid var(--primary-200);
     }

     .stat-number {
         display: block;
         font-size: 2.5rem;
         font-weight: 900;
         color: var(--primary-500);
         margin-bottom: 0.5rem;
         line-height: 1;
     }

     .stat-label {
         font-size: 1rem;
         color: var(--gray-800);
         font-weight: 600;
         display: block;
         margin-bottom: 0.25rem;
     }

     .stat-detail {
         font-size: 0.85rem;
         color: var(--gray-600);
         font-style: italic;
     }

     .cta-stat {
         background: var(--primary-500);
         color: white;
         padding: 0;
         border-radius: 12px;
         overflow: hidden;
     }

     .cta-stat:hover {
         background: var(--primary-600);
         transform: translateY(-3px);
     }

     .catalog-browse-btn {
         width: 100%;
         padding: 1.5rem 1rem !important;
         border-radius: 12px !important;
         background: transparent !important;
         color: white !important;
         border: none !important;
         font-weight: 700;
         font-size: 1rem;
         display: flex !important;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
         text-decoration: none;
         transition: all 0.3s ease;
     }

     .catalog-browse-btn:hover {
         background: rgba(255,255,255,0.1) !important;
         transform: none;
     }

     .btn-icon {
         font-size: 1.2rem;
     }

     /* Education Section */
     .education-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .education-card {
         background: white;
         padding: 2rem;
         border-radius: 12px;
         text-align: center;
         box-shadow: 0 5px 15px rgba(0,0,0,0.08);
         transition: all 0.3s ease;
     }

     .education-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(0,0,0,0.15);
     }

     .card-icon {
         font-size: 3rem;
         margin-bottom: 1rem;
     }

     .education-card h3 {
         font-size: 1.3rem;
         font-weight: 600;
         color: var(--gray-900);
         margin-bottom: 1rem;
     }

     .education-card p {
         color: var(--gray-600);
         line-height: 1.6;
         margin-bottom: 1.5rem;
     }

     /* Enhanced Featured Compositions Styles */
     .featured-compositions-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 2rem;
     }

     .featured-main-display {
         margin-bottom: 2rem;
     }

     .featured-composition-card {
         background: white;
         border-radius: 20px;
         padding: 2.5rem;
         box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         border: 1px solid var(--gray-200);
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     .featured-composition-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 4px;
         background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
         transition: left 0.6s ease;
     }

     .featured-composition-card.active::before {
         left: 0;
     }

     .featured-composition-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 20px 40px rgba(0,0,0,0.15);
     }

     .featured-header {
         display: flex;
         gap: 2rem;
         margin-bottom: 2rem;
         align-items: flex-start;
     }

     .featured-image-container {
         flex: 0 0 200px;
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }

     .featured-image {
         width: 100%;
         height: 150px;
         object-fit: cover;
         transition: transform 0.3s ease;
     }

     .featured-composition-card:hover .featured-image {
         transform: scale(1.05);
     }

     .featured-info {
         flex: 1;
     }

     .featured-title {
         font-size: 1.8rem;
         font-weight: 700;
         color: var(--gray-900);
         margin-bottom: 0.5rem;
         line-height: 1.2;
     }

     .featured-instrumentation {
         font-size: 1.1rem;
         color: var(--primary-600);
         font-weight: 600;
         margin-bottom: 1rem;
     }

     .featured-description {
         color: var(--gray-600);
         line-height: 1.6;
         margin-bottom: 1.5rem;
     }

     .featured-meta {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         margin-bottom: 1.5rem;
     }

     .meta-badge {
         background: var(--gray-100);
         color: var(--gray-700);
         padding: 0.4rem 0.8rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
     }

     .meta-badge.featured {
         background: var(--primary-100);
         color: var(--primary-700);
     }

     /* Enhanced Audio Section */
     .featured-audio-section {
         background: var(--gray-50);
         border-radius: 12px;
         padding: 1.5rem;
         margin: 1.5rem 0;
         border: 1px solid var(--gray-200);
     }

     .audio-header {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         margin-bottom: 1rem;
         padding-bottom: 0.75rem;
         border-bottom: 1px solid var(--gray-200);
     }

     .audio-icon {
         font-size: 1.2rem;
         color: var(--primary-500);
     }

     .audio-title {
         font-size: 1rem;
         font-weight: 600;
         color: var(--gray-800);
     }

     .audio-controls {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1rem;
     }

     .audio-nav-btn {
         background: var(--primary-500);
         color: white;
         border: none;
         border-radius: 50%;
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         font-size: 1.2rem;
     }

     .audio-nav-btn:hover {
         background: var(--primary-600);
         transform: scale(1.1);
     }

     .audio-nav-btn:disabled {
         background: var(--gray-300);
         cursor: not-allowed;
         transform: none;
     }

     .audio-info {
         flex: 1;
         text-align: center;
         font-size: 0.9rem;
         color: var(--gray-600);
     }

     .featured-audio-player {
         width: 100%;
         height: 50px;
         border-radius: 8px;
         background: white;
         border: 1px solid var(--gray-300);
     }

     /* Featured Videos Section */
     .featured-videos-section {
         margin-top: 2rem;
         padding: 1.5rem;
         background: var(--gray-50);
         border-radius: 12px;
         border: 1px solid var(--gray-200);
     }
     
     .featured-videos-list {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
     }
     
     .featured-video-item {
         background: white;
         border-radius: 8px;
         padding: 1rem;
         border: 1px solid var(--gray-200);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     
     .featured-video-content {
         display: flex;
         flex-direction: column;
         gap: 0.75rem;
     }
     
     .featured-video-title {
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--gray-900);
         margin: 0;
     }
     
     .featured-video-player {
         width: 100%;
     }
     
     .featured-video-player video {
         width: 100%;
         height: auto;
         border-radius: 6px;
     }
     
     .featured-video-placeholder {
         background: var(--gray-100);
         border: 2px dashed var(--gray-300);
         border-radius: 6px;
         padding: 2rem;
         text-align: center;
         color: var(--gray-600);
     }
     
     .featured-video-description {
         font-size: 0.9rem;
         color: var(--gray-600);
         margin: 0;
         line-height: 1.4;
     }
     
     .featured-videos-loading {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 2rem;
         color: var(--gray-600);
     }
     
     .featured-videos-empty {
         text-align: center;
         padding: 2rem;
         color: var(--gray-600);
     }

     /* Score Section */
     .featured-score-section {
         background: var(--primary-50);
         border-radius: 12px;
         padding: 1.5rem;
         margin: 1.5rem 0;
         border: 1px solid var(--primary-200);
         display: none;
     }

     .featured-score-section.active {
         display: block;
     }

     .score-header {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         margin-bottom: 1rem;
     }

     .score-icon {
         font-size: 1.2rem;
         color: var(--primary-600);
     }

     .score-title {
         font-size: 1rem;
         font-weight: 600;
         color: var(--primary-800);
     }

     .score-viewer {
         background: white;
         border-radius: 8px;
         overflow: hidden;
         margin-bottom: 1rem;
         border: 1px solid var(--primary-300);
     }

         .score-iframe {
        width: 100%;
        height: 100%;
        border: none;
        min-height: 400px;
        max-height: 600px;
    }
     .score-audio-section {
         background: white;
         border-radius: 8px;
         padding: 1rem;
         border: 1px solid var(--primary-200);
     }

     /* Action Buttons */
     .featured-actions {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .featured-actions .btn-primary {
         flex: 1;
         min-width: 140px;
         padding: 0.875rem 1.5rem;
         font-weight: 600;
         border-radius: 10px;
         transition: all 0.3s ease;
     }

     .featured-actions .btn-secondary {
         flex: 1;
         min-width: 140px;
         padding: 0.875rem 1.5rem;
         font-weight: 600;
         border-radius: 10px;
         background: var(--gray-100);
         color: var(--gray-700);
         border: 2px solid var(--gray-300);
         transition: all 0.3s ease;
     }

     .featured-actions .btn-secondary:hover {
         background: var(--gray-200);
         border-color: var(--gray-400);
         transform: translateY(-2px);
     }

     .featured-actions .btn-score {
         background: var(--primary-100);
         color: var(--primary-700);
         border: 2px solid var(--primary-300);
     }

     .featured-actions .btn-score:hover {
         background: var(--primary-200);
         border-color: var(--primary-400);
     }

     /* Navigation Controls */
     .featured-controls {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 1.5rem;
         padding: 0 1rem;
     }

     .featured-nav-btn {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         background: white;
         border: 2px solid var(--gray-200);
         border-radius: 25px;
         padding: 0.75rem 1.25rem;
         cursor: pointer;
         transition: all 0.3s ease;
         font-weight: 600;
         color: var(--gray-700);
     }

     .featured-nav-btn:hover {
         border-color: var(--primary-300);
         background: var(--primary-50);
         color: var(--primary-700);
         transform: translateY(-2px);
     }

     .featured-nav-btn:disabled {
         opacity: 0.5;
         cursor: not-allowed;
         transform: none;
     }

     .nav-icon {
         font-size: 1.4rem;
         font-weight: bold;
     }

     .featured-indicators {
         display: flex;
         gap: 0.5rem;
         align-items: center;
     }

     .indicator-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: var(--gray-300);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .indicator-dot.active {
         background: var(--primary-500);
         transform: scale(1.2);
     }

     .indicator-dot:hover {
         background: var(--primary-400);
         transform: scale(1.1);
     }

     /* Auto-cycle Control */
     .auto-cycle-control {
         text-align: center;
         padding: 1rem;
     }

     .cycle-toggle {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         cursor: pointer;
         font-size: 0.9rem;
         color: var(--gray-600);
     }

     .toggle-slider {
         position: relative;
         width: 50px;
         height: 24px;
         background: var(--gray-300);
         border-radius: 24px;
         transition: all 0.3s ease;
     }

     .toggle-slider::before {
         content: '';
         position: absolute;
         top: 2px;
         left: 2px;
         width: 20px;
         height: 20px;
         background: white;
         border-radius: 50%;
         transition: all 0.3s ease;
         box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     }

     .cycle-toggle input:checked + .toggle-slider {
         background: var(--primary-500);
     }

     .cycle-toggle input:checked + .toggle-slider::before {
         transform: translateX(26px);
     }

     .cycle-toggle input {
         display: none;
     }

     /* Mobile Responsive */
         @media (max-width: 768px) {
        .featured-compositions-container {
            padding: 1rem;
        }

        .featured-composition-card {
            padding: 1.5rem;
        }

        .featured-header {
            flex-direction: column;
            gap: 1rem;
        }

        .featured-image-container {
            flex: none;
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
        }

        .featured-actions {
            flex-direction: column;
        }

        .featured-controls {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
        }

        .featured-nav-btn {
            width: 100%;
            justify-content: center;
        }

        .score-iframe {
            min-height: 300px;
            max-height: 450px;
        }
        
        .score-iframe-container {
            min-height: 300px;
            max-height: 450px;
        }
        
        .score-container {
            max-height: 450px;
        }
        
        .single-page-score-viewer {
            max-height: 450px;
        }
        
        .score-layout-container {
            max-height: 450px;
        }
        
        .new-release-score-container {
            margin-top: 0.25rem;
            padding: 0.5rem;
        }
        
        .score-toggle-container {
            gap: 0.25rem;
            margin-bottom: 0.25rem;
            padding: 0 0.25rem;
        }
        
        .score-toggle-btn {
            padding: 0.4rem 0.75rem;
            font-size: 0.75rem;
        }
     }

     .composition-featured-instrumentation {
         font-size: 1.3rem;
         color: var(--primary-600);
         font-weight: 500;
         margin-bottom: 1rem;
     }

     .composition-featured-description {
         color: var(--gray-700);
         line-height: 1.6;
         font-size: 1.1rem;
         margin-bottom: 1.5rem;
     }

     .composition-meta-badges {
         display: flex;
         gap: 0.75rem;
         flex-wrap: wrap;
         margin-bottom: 2rem;
     }

     .composition-meta-badge {
         padding: 0.5rem 1rem;
         background: var(--gray-100);
         color: var(--gray-700);
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 500;
         border: 1px solid var(--gray-200);
     }

     .composition-meta-badge.featured {
         background: var(--primary-100);
         color: var(--primary-700);
         border-color: var(--primary-200);
     }

     .composition-actions {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .composition-actions .btn-primary {
         flex: 0 0 auto;
         min-width: 150px;
         padding: 0.75rem 1.5rem;
         font-size: 1rem;
     }

     .composition-actions .btn-secondary {
         flex: 0 0 auto;
         min-width: 150px;
         padding: 0.75rem 1.5rem;
         font-size: 1rem;
         background: transparent;
         color: var(--gray-700);
         border: 2px solid var(--gray-300);
     }

     .composition-actions .btn-secondary:hover {
         background: var(--gray-100);
         border-color: var(--gray-400);
     }

     /* Navigation Controls */
     .carousel-navigation {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 2rem;
         margin: 2rem 0;
     }

     .carousel-nav-btn {
         background: var(--primary-500);
         color: white;
         border: none;
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         cursor: pointer;
         font-weight: 600;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .carousel-nav-btn:hover:not(:disabled) {
         background: var(--primary-600);
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
     }

     .carousel-nav-btn:disabled {
         background: var(--gray-400);
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
     }

     .carousel-indicators {
         display: flex;
         gap: 0.5rem;
     }

     .carousel-indicator-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: var(--gray-300);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .carousel-indicator-dot.active {
         background: var(--primary-500);
         transform: scale(1.2);
     }

     .carousel-indicator-dot:hover {
         background: var(--primary-400);
         transform: scale(1.1);
     }

     @media (max-width: 768px) {
         .composition-card-layout {
             grid-template-columns: 1fr;
             gap: 2rem;
             text-align: center;
         }

         .composition-featured-title {
             font-size: 2rem;
         }

         .composition-featured-instrumentation {
             font-size: 1.1rem;
         }

         .composition-actions {
             justify-content: center;
         }

         .carousel-navigation {
             flex-direction: column;
             gap: 1rem;
         }

         .carousel-nav-btn {
             width: 100%;
             max-width: 200px;
             justify-content: center;
         }
     }

     .card-link {
         color: var(--primary-500);
         font-weight: 600;
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .card-link:hover {
         color: var(--primary-600);
     }

     /* Footer Styles - MOVED TO styles.css for modular template system */
     /* See styles.css for footer CSS - removed duplicate */

     /* Testimonials Section */
     .testimonials-section {
         padding: 4rem 0;
         background: var(--gray-900);
         color: white;
     }

     .testimonials-section .section-title {
         color: white;
     }

     .testimonials-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }

     .testimonial-card {
         background: rgba(255,255,255,0.1);
         padding: 2rem;
         border-radius: 12px;
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255,255,255,0.1);
     }

     .testimonial-content p {
         font-style: italic;
         font-size: 1.1rem;
         line-height: 1.6;
         margin-bottom: 1.5rem;
         color: var(--gray-200);
     }

     .testimonial-author strong {
         color: white;
         display: block;
         margin-bottom: 0.25rem;
     }

     .testimonial-author span {
         color: var(--gray-400);
         font-size: 0.9rem;
     }

     /* Mobile Responsiveness */
     @media (max-width: 768px) {
         .catalog-highlights-grid {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .featured-composition {
             flex-direction: column;
             min-height: auto;
         }

         .featured-composition-image {
             height: 250px;
             min-height: 250px;
         }

         .featured-composition-content {
             padding: 2rem 1.5rem;
         }

         .featured-title {
             font-size: 1.5rem;
         }

         .composition-actions {
             flex-direction: column;
         }

         .composition-actions .btn-primary,
         .composition-actions .btn-secondary {
             flex: none;
             width: 100%;
         }

         .catalog-stats {
             padding: 1.5rem;
             gap: 1rem;
         }

         .stats-header {
             margin-bottom: 0.5rem;
             padding-bottom: 0.5rem;
         }

         .stat-item {
             padding: 1rem;
         }

         .stat-number {
             font-size: 2rem;
         }

         .catalog-browse-btn {
             padding: 1.25rem 1rem !important;
         }

         .section-title {
             font-size: 2rem;
         }

         .section-subtitle {
             font-size: 1rem;
         }

         .education-card, .testimonial-card {
             padding: 1.5rem;
         }
     }
      /* Call to Action Section */
      .cta-section {
          padding: 4rem 0;
          background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
          color: white;
          text-align: center;
      }

      .cta-content h2 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 1rem;
          color: white;
      }

      .cta-content p {
          font-size: 1.2rem;
          margin-bottom: 2rem;
          color: rgba(255,255,255,0.9);
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
      }

      .cta-buttons {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
      }

      .cta-buttons .btn-primary {
          background: white;
          color: var(--primary-600);
          border: 2px solid white;
      }

      .cta-buttons .btn-primary:hover {
          background: transparent;
          color: white;
          border-color: white;
      }

      .cta-buttons .btn-secondary {
          background: transparent;
          color: white;
          border: 2px solid rgba(255,255,255,0.5);
      }

      .cta-buttons .btn-secondary:hover {
          background: rgba(255,255,255,0.1);
          border-color: white;
      }

      @media (max-width: 768px) {
          .cta-content h2 {
              font-size: 2rem;
          }
          
          .cta-content p {
              font-size: 1rem;
          }
          
          .cta-buttons {
              flex-direction: column;
              align-items: center;
          }
          
          .cta-buttons a {
              width: 200px;
          }
      }
      
      /* Hero Container Styles */
      .hero-container {
          position: relative;
          width: 100vw;
          height: 100vh;
          min-height: 100vh;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: calc(50% - 50vw);
          margin-right: calc(50% - 50vw);
          margin-top: 0; /* Remove extra top offset on homepage */
          box-sizing: border-box;
          z-index: 1; /* ✨ FIXED: Ensure hero container is properly positioned */
      }
      
      .hero-carousel {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          overflow: hidden;
      }
      
    /* ✨ ENHANCED: Professional hero slideshow with creative transitions */
      .hero-video-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          opacity: 0;
        transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: scale(1.08) rotate(1deg);
          background: #000; /* Ensure black background */
        filter: none;
        display: none; /* Start hidden */
        visibility: hidden;
      }

      .hero-video-container.loaded {
        display: block;
        visibility: visible;
          opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: none;
    }
      .hero-video-container, .hero-fallback-image { will-change: opacity, transform; }

    /* Simple video entrance animation */
    .hero-video-container.entrance {
        animation: videoSimpleEntrance 1s ease-out forwards;
    }

    @keyframes videoSimpleEntrance {
        0% {
            opacity: 0;
            transform: scale(1.05);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

      .hero-video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 10;
          filter: none;
          pointer-events: none;
      }

      .hero-fallback-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          object-fit: cover;
          z-index: 1;
        opacity: 0; /* Start hidden; animations and JS will control opacity */
        transition: all 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transform: scale(1.05) translateY(20px);
        filter: none;
        display: none; /* Start hidden */
        visibility: hidden;
      }

      .hero-fallback-image.active {
        z-index: 2 !important;
          transform: scale(1) translateY(0);
        filter: none;
        /* Note: opacity is now controlled by JavaScript for smooth transitions */
      }

      .hero-fallback-image.hidden {
          opacity: 0;
          z-index: 0 !important;
          transform: scale(0.98) translateY(-10px);
          visibility: hidden;
          pointer-events: none;
          filter: none;
      }

      /* Clean fallback image transitions */
      .hero-fallback-image.blurring {
          filter: none;
          transition: opacity 0.6s ease;
      }

      /* ✨ ENHANCED: Dramatic slideshow transitions with extended blur effects */
      .hero-fallback-image.slide-in {
          animation: dramaticSlideIn 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      .hero-fallback-image.slide-out {
          animation: dramaticSlideOut 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      /* Mobile performance: hide complex overlay and disable heavy entrance */
      @media (max-width: 768px) {
          /* Hide shader overlay stack on mobile to reduce composite cost */
          .hero-content-overlay { display: none !important; }
          /* Neutralize heavy video entrance animation on mobile */
          .hero-video-container.entrance { animation: none !important; opacity: 1 !important; transform: none !important; }
      }

      .hero-fallback-image.fade-in {
          animation: dramaticFadeIn 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      .hero-fallback-image.subtle-fade-in {
          animation: subtleFadeIn 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      .hero-fallback-image.fade-out {
          animation: dramaticFadeOut 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      /* Simplify image carousel animations on mobile for better performance */
      @media (max-width: 768px) {
          .hero-fallback-image.slide-in,
          .hero-fallback-image.slide-out,
          .hero-fallback-image.fade-in,
          .hero-fallback-image.subtle-fade-in,
          .hero-fallback-image.fade-out {
              animation-duration: 1.5s; /* Faster transitions on mobile */
              animation-timing-function: ease-in-out; /* Simpler easing */
          }

          /* Clean fallback image on mobile */
          .hero-fallback-image.blurring {
              filter: none !important;
          }
      }

        /* ✨ ADDED: Animated tent/coloring effect */
        .hero-content-overlay {
            animation: overlayProminenceCycle 100s ease-in-out infinite;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 20;
            overflow: hidden;
            perspective: 1200px;
            transform-style: preserve-3d;
            opacity: 1;
            transition: opacity 2s ease-out, filter 2s ease-out;
        }

        /* Overlay transition states */
        .hero-content-overlay.video-loading {
            opacity: 1;
            filter: none;
        }

        .hero-content-overlay.video-loaded {
            opacity: 0;
            filter: blur(20px) brightness(0.3);
            pointer-events: none;
        }

        /* Simplified overlay animations on mobile for performance */
        @media (max-width: 768px) {
            .hero-content-overlay {
                /* Much shorter, simpler animation cycle */
                animation: overlayProminenceCycle 60s ease-in-out infinite;
                /* Keep basic overlay gradient */
                background: linear-gradient(
                    45deg,
                    rgba(0, 0, 0, 0.4) 0%,
                    rgba(0, 0, 0, 0.2) 50%,
                    rgba(0, 0, 0, 0.3) 100%
                );
                /* Reduce 3D complexity but keep some depth */
                perspective: 600px;
                transform-style: preserve-3d;
            }
        }

      @keyframes overlayProminenceCycle {
          /* 0-1%: Fade in from opacity 0 */
          0% {
              filter: brightness(1.6) contrast(1.5) saturate(1.6) blur(0px) hue-rotate(19deg);
              opacity: 0;
          }
          /* 1-7%: Fade in to full opacity, then stay prominent */
          1% {
              filter: brightness(1.6) contrast(1.5) saturate(1.6) blur(0px) hue-rotate(19deg);
              opacity: 1;
          }
          /* 7-8%: Transition to toned down state */
          7% {
              filter: brightness(1.6) contrast(1.5) saturate(1.6) blur(0px) hue-rotate(19deg);
              opacity: 1;
          }
          8% {
              filter: brightness(1.2) contrast(1.2) saturate(1.4) blur(20px) hue-rotate(19deg);
              opacity: 0.9;
          }
          /* 8-57%: Stay in toned down state with color */
          57% {
              filter: brightness(1.2) contrast(1.2) saturate(1.4) blur(20px) hue-rotate(19deg);
              opacity: 0.9;
          }
          /* 57-60%: Quick return to prominence (3 seconds) */
          60% {
              filter: brightness(1.6) contrast(1.5) saturate(1.6) blur(0px) hue-rotate(19deg);
              opacity: 1;
          }
      }

      /* Simplified overlay cycle for mobile */
      @media (max-width: 768px) {
          @keyframes overlayProminenceCycle {
              0% {
                  filter: brightness(1.2) contrast(1.1) saturate(1.2) blur(0px) hue-rotate(10deg);
                  opacity: 0.8;
              }
              25% {
                  filter: brightness(1.3) contrast(1.2) saturate(1.3) blur(0px) hue-rotate(15deg);
                  opacity: 0.9;
              }
              50% {
                  filter: brightness(1.1) contrast(1.0) saturate(1.1) blur(0px) hue-rotate(5deg);
                  opacity: 0.85;
              }
              75% {
                  filter: brightness(1.3) contrast(1.2) saturate(1.3) blur(0px) hue-rotate(12deg);
                  opacity: 0.9;
              }
              100% {
                  filter: brightness(1.2) contrast(1.1) saturate(1.2) blur(0px) hue-rotate(10deg);
                  opacity: 0.8;
              }
          }
      }

      /* ✨ Dynamic diagonal band shader layers (single-direction scroll) - MUCH LARGER */
      .hero-content-overlay .shader-layer {
          position: absolute;
          inset: -25% -25% -25% -25%; /* Extend 25% outside viewport on all sides */
          pointer-events: none;
          mix-blend-mode: soft-light;
          opacity: .38; /* base opacity, modulated by overlay cycle */
          transform: translate3d(0,0,0) translateZ(var(--z, 0px)) scale(1.01) rotate(var(--rot, -135deg));
          will-change: transform, opacity, background-position, filter;
          background-size: auto; /* scale set by gradient stops, not tiles */
          background-position: 0 0, 0 0;
          filter: hue-rotate(var(--shader-h, 0deg)) saturate(1.05);
          animation: shaderScroll 80s linear infinite, shaderPulse 16s ease-in-out infinite alternate, shaderHue 48s ease-in-out infinite;
      }

      /* Simplified shader layers on mobile for performance */
      @media (max-width: 768px) {
          .hero-content-overlay .shader-layer {
              /* Only show one simple layer instead of all complex ones */
              opacity: 0.15; /* Much lower opacity */
              animation: none; /* Disable complex animations */
              /* Reduce transform complexity */
              transform: translate3d(0,0,0) rotate(-45deg) scale(1);
              /* Use simpler gradients */
              background-image:
                repeating-linear-gradient(45deg, rgba(59,130,246,.03) 0 800px, rgba(59,130,246,0) 800px 2400px);
              background-size: auto;
              background-position: 0 0;
              filter: hue-rotate(0deg) saturate(1);
          }

          /* Hide the more complex layers */
          .hero-content-overlay .shader-layer.layer-a,
          .hero-content-overlay .shader-layer.layer-b {
              display: none !important;
          }

          /* Keep only the simplest layer active */
          .hero-content-overlay .shader-layer.layer-c {
              display: block;
              opacity: 0.1;
          }
      }

      /* Layer A: cool tint, medium bands */
      .hero-content-overlay .shader-layer.layer-a {
          --rot: -135deg;
          --z: -80px;
          /* Larger, softer bands: 1400px color, 3000px transparent - more green influence */
          background-image:
            repeating-linear-gradient(45deg, rgba(147,51,234,.07) 0 1400px, rgba(147,51,234,0) 1400px 4400px),
            repeating-linear-gradient(45deg, rgba(34,197,94,.08) 0 1600px, rgba(34,197,94,0) 1600px 4800px);
          opacity: .34;
          animation: shaderScrollA 100s linear infinite, shaderPulse 18s ease-in-out infinite alternate, shaderHue 54s ease-in-out infinite;
      }

      /* Layer B: warm tint, broader bands for depth */
      .hero-content-overlay .shader-layer.layer-b {
          --rot: -155deg; /* different plane for intersection */
          --z: -140px;
          /* Even broader bands: 2000px color, 5000px transparent; second layer 2400/5600 */
          background-image:
            repeating-linear-gradient(45deg, rgba(236,72,153,.07) 0 2000px, rgba(236,72,153,0) 2000px 7000px),
            repeating-linear-gradient(45deg, rgba(34,197,94,.05) 0 2400px, rgba(34,197,94,0) 2400px 8000px);
          opacity: .30;
          animation: shaderScrollB 120s linear infinite, shaderPulse 20s ease-in-out infinite alternate, shaderHue 60s ease-in-out infinite;
      }

      .hero-content-overlay .shader-layer.layer-c {
          --rot: -112deg; /* shallower tilt to cross others */
          --z: -40px;
          background-image:
            repeating-linear-gradient(45deg, rgba(59,130,246,.06) 0 1000px, rgba(59,130,246,0) 1000px 4200px),
            repeating-linear-gradient(45deg, rgba(147,51,234,.05) 0 1200px, rgba(147,51,234,0) 1200px 4600px);
          opacity: .26;
          animation: shaderScrollC 90s linear infinite, shaderPulse 22s ease-in-out infinite alternate, shaderHue 64s ease-in-out infinite;
      }

      /* One-direction scroll (no back-and-forth), continuous */
      @keyframes shaderScroll {
          0%   { background-position: 0 0, 0 0; }
          100% { background-position: 8000px 0, -8000px 0; }
      }
      /* Variant scrolls to create crossing shards and depth - LARGER SCROLLS */
      @keyframes shaderScrollA {
          0%   { background-position: 0 0, 0 0; }
          100% { background-position: 8500px -800px, -8500px -500px; }
      }
      @keyframes shaderScrollB {
          0%   { background-position: 0 0, 0 0; }
          100% { background-position: -9000px 900px, 9000px 500px; }
      }
      @keyframes shaderScrollC {
          0%   { background-position: -4000px 0, 2000px 0; }
          100% { background-position: 4000px -1000px, -2000px 700px; }
      }

      /* ✨ Mega gradient pulse layer (very large, very subtle, diagonal sweep) - MUCH LARGER */
      .hero-content-overlay .shader-pulse {
          position: absolute;
          inset: -40% -40% -40% -40%; /* Extend 40% outside viewport on all sides */
          pointer-events: none;
          mix-blend-mode: soft-light;
          opacity: .12; /* base opacity, modulated by overlay cycle */
          transform: translate3d(0,0,0) rotate(-135deg) scale(1.5); /* Scale up for better coverage */
          background-image: linear-gradient(45deg,
              rgba(34,197,94,0) 0%,
              rgba(59,130,246,.08) 25%,
              rgba(147,51,234,.10) 50%,
              rgba(236,72,153,.08) 75%,
              rgba(34,197,94,0) 100%
          );
          background-size: 400% 400%; /* Larger sweep area */
          background-position: -300% 0%;
          animation: gradientSweep 85s ease-in-out infinite;
      }

      /* Simplified shader pulse on mobile for performance */
      @media (max-width: 768px) {
          .hero-content-overlay .shader-pulse {
              /* Much smaller and simpler pulse effect */
              inset: -15% -15% -15% -15%; /* Smaller extension */
              opacity: 0.05; /* Much lower opacity */
              animation: gradientSweep 120s ease-in-out infinite; /* Slower, simpler animation */
              transform: translate3d(0,0,0) rotate(-45deg) scale(1.1); /* Less complex transform */
              background-image: linear-gradient(45deg,
                  rgba(34,197,94,0) 0%,
                  rgba(59,130,246,.04) 25%,
                  rgba(147,51,234,.05) 50%,
                  rgba(236,72,153,.04) 75%,
                  rgba(34,197,94,0) 100%
              );
              background-size: 200% 200%; /* Smaller sweep area */
          }
      }

      @keyframes gradientSweep {
          0%   { background-position: -300% 0%; opacity: .10; }
          50%  { background-position: 300% 0%;  opacity: .16; }
          100% { background-position: -300% 0%; opacity: .10; }
      }

      /* ✨ Corner shards to improve coverage on BL/TR corners - MUCH LARGER */
      .hero-content-overlay .shader-edge {
          position: absolute;
          width: 120vw; /* Much larger */
          height: 120vw;
          pointer-events: none;
          mix-blend-mode: soft-light;
          opacity: .22; /* base opacity, modulated by overlay cycle */
          background-image:
            repeating-linear-gradient(45deg, rgba(34,197,94,.08) 0 1600px, rgba(34,197,94,0) 1600px 5200px),
            repeating-linear-gradient(45deg, rgba(59,130,246,.06) 0 1800px, rgba(59,130,246,0) 1800px 5800px);
          background-size: auto;
          animation: shaderEdgeScroll 100s linear infinite;
          will-change: transform, background-position, opacity;
      }

      /* Disable shader edges on mobile for performance */
      @media (max-width: 768px) {
          .hero-content-overlay .shader-edge {
              display: none !important;
              animation: none !important;
              opacity: 0 !important;
          }
      }
      .hero-content-overlay .shader-edge.edge-bl {
          left: -35vw; /* Much further out */
          bottom: -35vw;
          transform: rotate(-140deg) translateZ(-60px) translateX(-20vw) translateY(-20vw);
          clip-path: polygon(0% 0%, 65% 0%, 0% 65%);
      }
      .hero-content-overlay .shader-edge.edge-tr {
          right: -35vw; /* Much further out */
          top: -35vw;
          transform: rotate(-120deg) translateZ(-100px) translateX(20vw) translateY(20vw);
          clip-path: polygon(35% 100%, 100% 35%, 100% 100%);
          animation-duration: 130s;
          opacity: .18;
      }

      /* ✨ Green feathering for uncovered edges - MUCH LARGER */
      .hero-content-overlay .green-feather {
          position: absolute;
          pointer-events: none;
          mix-blend-mode: soft-light;
          opacity: .15; /* base opacity, modulated by overlay cycle */
          background-image:
            radial-gradient(ellipse 180vw 120vh at -10% 110%, rgba(34,197,94,.15) 0%, rgba(34,197,94,0) 80%),
            radial-gradient(ellipse 160vw 110vh at 110% -10%, rgba(34,197,94,.13) 0%, rgba(34,197,94,0) 75%),
            radial-gradient(ellipse 140vw 100vh at 50% 50%, rgba(34,197,94,.08) 0%, rgba(34,197,94,0) 60%);
          background-size: 180vw 120vh, 160vw 110vh, 140vw 100vh;
          background-position: -10% 110%, 110% -10%, 50% 50%;
          animation: greenFeatherPulse 120s ease-in-out infinite;
      }

      /* Disable green feathering on mobile for performance */
      @media (max-width: 768px) {
          .hero-content-overlay .green-feather {
              display: none !important;
              animation: none !important;
              opacity: 0 !important;
          }
      }

      @keyframes greenFeatherPulse {
          0%, 100% {
              opacity: .12;
              transform: scale(1) rotate(0deg);
          }
          50% {
              opacity: .20;
              transform: scale(1.08) rotate(3deg); /* Slightly larger pulse for bigger elements */
          }
      }
      @keyframes shaderEdgeScroll {
          0%   { background-position: 0 0; }
          100% { background-position: 10000px 0; } /* Larger scroll for bigger elements */
      }

      /* Adaptive blend for light backgrounds */
      .hero-content-overlay.on-light .shader-layer,
      .hero-content-overlay.on-light .shader-edge,
      .hero-content-overlay.on-light .green-feather {
          mix-blend-mode: multiply;
          opacity: .18; /* base opacity, modulated by overlay cycle */
      }
      .hero-content-overlay.on-light .shader-pulse {
          mix-blend-mode: multiply;
          opacity: .06; /* base opacity, modulated by overlay cycle */
      }

      /* Simplified adaptive blend on mobile for light backgrounds */
      @media (max-width: 768px) {
          .hero-content-overlay.on-light .shader-layer {
              mix-blend-mode: soft-light;
              opacity: 0.08; /* Even lower opacity for light backgrounds */
          }
          .hero-content-overlay.on-light .shader-pulse {
              mix-blend-mode: soft-light;
              opacity: 0.03; /* Very subtle for light backgrounds */
          }
          /* Keep other elements hidden for performance */
          .hero-content-overlay.on-light .shader-edge,
          .hero-content-overlay.on-light .green-feather {
              display: none !important;
              opacity: 0 !important;
          }
      }

      @keyframes shaderPulse {
          0%   { opacity: .46; filter: brightness(.96) saturate(1.02); }
          100% { opacity: .78; filter: brightness(1.06) saturate(1.10); }
      }

      @keyframes shaderHue {
          0%   { --shader-h: 0deg; }
          50%  { --shader-h: 12deg; }
          100% { --shader-h: 0deg; }
      }

      @keyframes tentGradientShift {
          0%, 100% {
              background: linear-gradient(
                  45deg,
                  rgba(0, 0, 0, 0.4) 0%,
                  rgba(0, 0, 0, 0.2) 50%,
                  rgba(0, 0, 0, 0.3) 100%
              ),
              linear-gradient(
                  135deg,
                  rgba(59, 130, 246, 0.1) 0%,
                  rgba(147, 51, 234, 0.1) 25%,
                  rgba(236, 72, 153, 0.1) 50%,
                  rgba(34, 197, 94, 0.1) 75%,
                  rgba(59, 130, 246, 0.1) 100%
              );
          }
          25% {
              background: linear-gradient(
                  45deg,
                  rgba(0, 0, 0, 0.4) 0%,
                  rgba(0, 0, 0, 0.2) 50%,
                  rgba(0, 0, 0, 0.3) 100%
              ),
              linear-gradient(
                  135deg,
                  rgba(147, 51, 234, 0.1) 0%,
                  rgba(236, 72, 153, 0.1) 25%,
                  rgba(34, 197, 94, 0.1) 50%,
                  rgba(59, 130, 246, 0.1) 75%,
                  rgba(147, 51, 234, 0.1) 100%
              );
          }
          50% {
              background: linear-gradient(
                  45deg,
                  rgba(0, 0, 0, 0.4) 0%,
                  rgba(0, 0, 0, 0.2) 50%,
                  rgba(0, 0, 0, 0.3) 100%
              ),
              linear-gradient(
                  135deg,
                  rgba(236, 72, 153, 0.1) 0%,
                  rgba(34, 197, 94, 0.1) 25%,
                  rgba(59, 130, 246, 0.1) 50%,
                  rgba(147, 51, 234, 0.1) 75%,
                  rgba(236, 72, 153, 0.1) 100%
              );
          }
          75% {
              background: linear-gradient(
                  45deg,
                  rgba(0, 0, 0, 0.4) 0%,
                  rgba(0, 0, 0, 0.2) 50%,
                  rgba(0, 0, 0, 0.3) 100%
              ),
              linear-gradient(
                  135deg,
                  rgba(34, 197, 94, 0.1) 0%,
                  rgba(59, 130, 246, 0.1) 25%,
                  rgba(147, 51, 234, 0.1) 50%,
                  rgba(236, 72, 153, 0.1) 75%,
                  rgba(34, 197, 94, 0.1) 100%
              );
          }
      }

      @keyframes dramaticSlideIn {
          0% {
              opacity: 0.1;
              transform: scale(1.12) translateX(150px) rotate(2deg);
              filter: blur(35px) brightness(0.6) saturate(0.8) contrast(0.9);
          }
          25% {
              opacity: 0.3;
              transform: scale(1.08) translateX(80px) rotate(1deg);
              filter: blur(25px) brightness(0.7) saturate(0.85) contrast(0.95);
          }
          50% {
              opacity: 0.6;
              transform: scale(1.04) translateX(30px) rotate(0.3deg);
              filter: blur(15px) brightness(0.8) saturate(0.9) contrast(1.0);
          }
          75% {
              opacity: 0.8;
              transform: scale(1.015) translateX(10px) rotate(0.1deg);
              filter: blur(6px) brightness(0.9) saturate(0.95) contrast(1.05);
          }
          90% {
              opacity: 0.95;
              transform: scale(1.005) translateX(2px) rotate(0.05deg);
              filter: blur(2px) brightness(0.98) saturate(0.98) contrast(1.02);
          }
          100% {
              opacity: 1;
              transform: scale(1) translateX(0) rotate(0deg);
              filter: blur(0px) brightness(1) saturate(1) contrast(1);
          }
      }

      @keyframes dramaticSlideOut {
          0% {
              opacity: 1;
              transform: scale(1) translateX(0) rotate(0deg);
              filter: blur(0px) brightness(1) saturate(1) contrast(1);
          }
          10% {
              opacity: 0.95;
              transform: scale(0.99) translateX(5px) rotate(-0.2deg);
              filter: blur(1px) brightness(0.98) saturate(0.98) contrast(1.02);
          }
          30% {
              opacity: 0.8;
              transform: scale(0.97) translateX(20px) rotate(-0.4deg);
              filter: blur(5px) brightness(0.9) saturate(0.95) contrast(1.0);
          }
          50% {
              opacity: 0.6;
              transform: scale(0.95) translateX(40px) rotate(-0.6deg);
              filter: blur(12px) brightness(0.8) saturate(0.9) contrast(0.95);
          }
          75% {
              opacity: 0.3;
              transform: scale(0.93) translateX(70px) rotate(-0.8deg);
              filter: blur(22px) brightness(0.65) saturate(0.8) contrast(0.85);
          }
          100% {
              opacity: 0;
              transform: scale(0.9) translateX(-100px) rotate(-1deg);
              filter: blur(35px) brightness(0.4) saturate(0.7) contrast(0.7);
          }
      }

      @keyframes subtleFadeIn {
          0% {
              opacity: 0;
              transform: scale(1.05) translateY(20px);
              filter: blur(60px) brightness(0.8) saturate(0.9) contrast(1.1);
          }
          20% {
              opacity: 0.2;
              transform: scale(1.03) translateY(15px);
              filter: blur(45px) brightness(0.85) saturate(0.92) contrast(1.05);
          }
          40% {
              opacity: 0.4;
              transform: scale(1.015) translateY(8px);
              filter: blur(30px) brightness(0.9) saturate(0.95) contrast(1.0);
          }
          60% {
              opacity: 0.6;
              transform: scale(1.008) translateY(3px);
              filter: blur(15px) brightness(0.95) saturate(0.97) contrast(0.98);
          }
          80% {
              opacity: 0.8;
              transform: scale(1.002) translateY(1px);
              filter: blur(6px) brightness(0.98) saturate(0.99) contrast(0.99);
          }
          100% {
              opacity: 1;
              transform: scale(1) translateY(0);
              filter: blur(0px) brightness(1) saturate(1) contrast(1);
          }
      }

      @keyframes dramaticFadeIn {
          0% {
              opacity: 0.1;
              transform: scale(1.15) translateY(30px) rotate(1deg);
              filter: blur(50px) brightness(0.6) saturate(0.8) contrast(0.9);
          }
          30% {
              opacity: 0.3;
              transform: scale(1.08) translateY(15px) rotate(0.5deg);
              filter: blur(35px) brightness(0.7) saturate(0.85) contrast(0.95);
          }
          60% {
              opacity: 0.5;
              transform: scale(1.04) translateY(5px) rotate(0.2deg);
              filter: blur(20px) brightness(0.8) saturate(0.9) contrast(1.0);
          }
          80% {
              opacity: 0.7;
              transform: scale(1.015) translateY(2px) rotate(0.1deg);
              filter: blur(10px) brightness(0.9) saturate(0.95) contrast(1.05);
          }
          95% {
              opacity: 0.9;
              transform: scale(1.005) translateY(0.5px) rotate(0.05deg);
              filter: blur(3px) brightness(0.98) saturate(0.99) contrast(1.02);
          }
          100% {
              opacity: 1;
              transform: scale(1) translateY(0) rotate(0deg);
              filter: blur(0px) brightness(1) saturate(1) contrast(1);
          }
      }

      @keyframes dramaticFadeOut {
          0% {
              opacity: 1;
              transform: scale(1) translateY(0) rotate(0deg);
              filter: blur(0px) brightness(1) saturate(1) contrast(1);
          }
          20% {
              opacity: 0.9;
              transform: scale(0.98) translateY(5px) rotate(-0.2deg);
              filter: blur(3px) brightness(0.95) saturate(0.95) contrast(1.05);
          }
          40% {
              opacity: 0.7;
              transform: scale(0.96) translateY(12px) rotate(-0.4deg);
              filter: blur(8px) brightness(0.85) saturate(0.9) contrast(1.0);
          }
          60% {
              opacity: 0.5;
              transform: scale(0.94) translateY(20px) rotate(-0.6deg);
              filter: blur(15px) brightness(0.75) saturate(0.85) contrast(0.95);
          }
          80% {
              opacity: 0.3;
              transform: scale(0.92) translateY(35px) rotate(-0.8deg);
              filter: blur(25px) brightness(0.6) saturate(0.8) contrast(0.9);
          }
          100% {
              opacity: 0;
              transform: scale(0.9) translateY(-50px) rotate(-1deg);
              filter: blur(40px) brightness(0.4) saturate(0.7) contrast(0.8);
          }
      }



      
    /* Hero Content Overlay */
    .hero-content-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.3) 100%
        );
        z-index: 15;
        pointer-events: none;
    }

    .hero-content-wrapper {
        position: absolute;
        bottom: 12%;
        left: 0;
        right: 0;
        z-index: 100 !important;
        text-align: center;
        pointer-events: auto;
        padding: 0 2rem;
    }

      /* Ensure all interactive elements within hero content are clickable */
      .hero-content-wrapper * {
          pointer-events: auto;
      }

      /* Specific styling for the hero roles to ensure they're clickable */
      .hero-role {
          pointer-events: auto;
          position: absolute !important;
          z-index: 16;
      }

      /* Ensure the navigation dots container is clickable */
      .hero-nav-dots {
          pointer-events: auto;
          position: relative;
          z-index: 16;
      }
      
      @media (max-width: 768px) {
          .hero-container {
              height: 100vh;
              min-height: 100vh;
              margin-top: 0;
          }
          
          .hero-content-wrapper {
              bottom: 20%;
              padding: 0 1rem;
          }
          
          .hero-role-description {
              padding: 0 0.5rem;
              margin-bottom: 2rem;
          }
          
          .hero-role {
              padding: 0.5rem;
          }
          
          .hero-content-container {
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 10px;
              padding: 1.5rem 1rem;
              backdrop-filter: blur(8px);
              box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
          }
          
          .hero-rotating-content {
              min-height: 120px;
              height: 120px;
          }

          .hero-nav-dots {
              gap: 0.75rem;
          }

          .dot {
              width: 30px;
              height: 3px;
          }
      }



    /* Welcome & Navigation Section */
    .welcome-section {
        padding: 1rem 0;
        background: white;
        text-align: center;
    }

    .welcome-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .welcome-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .welcome-subtitle {
        font-size: 1.2rem;
        color: var(--gray-600);
        margin-bottom: 1rem;
    }

    .main-navigation {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .nav-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem 1.5rem;
        background: var(--primary-500);
        border: 1px solid var(--primary-500);
        border-radius: 8px;
        text-decoration: none;
        color: white;
        transition: all 0.3s ease;
        min-width: 120px;
        font-weight: 600;
    }

    .nav-card:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
        color: white;
    }

    .nav-card .nav-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .nav-card span {
        font-weight: 600;
        font-size: 0.9rem;
    }

    /* Highlights Section */
    .highlights-section {
        padding: 1rem 0;
        background: var(--gray-50);
        position: relative;
        z-index: 1;
    }

    .highlights-grid {
        display: flex;
        gap: 2rem;
        align-items: stretch;
    }
    
    /* Make catalog highlight (new releases) take more width than media highlight */
    .highlight-card.catalog-highlight {
        flex: 1.38; /* 58% of total width (1.38 / (1.38 + 1) = 0.58) */
    }
    
    .highlight-card.media-highlight {
        flex: 1; /* 42% of total width (1 / (1.38 + 1) = 0.42) */
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        transition: none;
    }
    
    .highlight-card.media-highlight:hover {
        box-shadow: none;
        transform: none;
    }

    .highlight-card {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid var(--gray-200);
    }
    


    .highlight-card:hover {
        /* Removed transform animation - keeping only subtle shadow */
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--primary-100);
    }

    .card-header h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }

    .card-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.55px;
        background: linear-gradient(180deg, #f5f6f8 0%, #eceff3 100%); /* subtle gray gradient */
        border: 2px solid #d1d5db; /* stronger border */
        color: #1f2937; /* gray-800 */
        position: relative;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); /* bevel */
    }

    .card-badge::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 1px rgba(0,0,0,0.06);
    }

    /* Video badge - yellow dot */
    .card-badge[data-type="video"] { color: var(--gray-800); }
    .card-badge[data-type="video"]::before { background: #f59e0b; }

    /* News badge - red dot */
    .card-badge[data-type="news"] { color: var(--gray-800); }
    .card-badge[data-type="news"]::before { background: #ef4444; }

    /* Compositions badge - blue dot */
    .card-badge[data-type="compositions"] { color: var(--gray-800); }
    .card-badge[data-type="compositions"]::before { background: #3b82f6; }
    /* New Releases badge - orange dot (support multiple labels) */
    .card-badge[data-type="new-releases"],
    .card-badge[data-type="new"] { color: var(--gray-800); }
    .card-badge[data-type="new-releases"]::before,
    .card-badge[data-type="new"]::before { background: #f97316; }

    .card-content {
        margin-bottom: 0;
    }

    .card-footer {
        border-top: 1px solid var(--gray-200);
        padding-top: 1rem;
    }

    .card-link {
        color: var(--primary-600);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .card-link:hover {
        color: var(--primary-700);
    }

    /* News Placeholder */
    .news-placeholder {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--gray-500);
    }

    .placeholder-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .placeholder-note {
        font-size: 0.85rem;
        color: var(--gray-400);
        font-style: italic;
    }

    /* Catalog Preview */
    .composition-featured {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }



    .composition-image {
        flex: 0 0 280px; /* Fixed width for the image container */
        min-height: 200px; /* Minimum height to ensure some presence */
        max-height: 350px; /* Maximum height to prevent excessive stretching */
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        position: relative; /* Required for absolute positioning of ::before */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .composition-img {
        width: 100%;
        height: auto; /* Let height adjust naturally */
        max-height: 100%; /* Don't exceed container height */
        object-fit: contain; /* Show full image without cropping */
        object-position: center; /* Center the image */
        display: block; /* Removes any extra space below the image */
    }
    
    /* Default cover image when no image is available */
    .composition-image::before {
        content: '🎼';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 4rem;
        color: var(--gray-400);
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: var(--gray-100);
        border-radius: 12px;
    }
    
    .composition-image.has-image::before {
        display: none;
    }

    .composition-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .title-badge-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .title-instrumentation-container {
        flex: 1;
    }

    .composition-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--gray-900);
        margin: 0;
        line-height: 1.2;
    }

    .composition-instrumentation {
        margin: 0;
    }

    .composition-instrumentation p {
        font-size: 1.2rem;
        color: var(--primary-600);
        font-weight: 450;
        margin: 0 !important;

    }

    .composition-description {
        font-size: 1rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin: 0;
    }

    .composition-metadata {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }

    .metadata-tag {
        padding: 0.25rem 0.75rem;
        background: var(--gray-100);
        color: var(--gray-600);
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .metadata-tag.featured {
        background: var(--primary-100);
        color: var(--primary-700);
    }

    .composition-actions {
        display: flex;
        gap: 0.1rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }

    .btn-icon {
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }

    .btn-primary {
        background: white;
        color: var(--primary-600);
        border: 1px solid var(--gray-300);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
    }

    .btn-primary:hover {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: translateY(-1px);
    }

    .btn-secondary {
        background: white;
        color: var(--primary-600);
        border: 1px solid var(--gray-300);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
    }

    .btn-secondary:hover {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: translateY(-1px);
    }

    .btn-buy {
        background: var(--primary-500);
        color: white;
        border: 1px solid var(--primary-500);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
    }

    .btn-buy:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .btn-listen {
        background: var(--gray-600);
        color: white;
        border: 1px solid var(--gray-600);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-listen.in-view {
        background: #ff6b35;
        color: white;
        border: 1px solid #ff6b35;
    }

    .btn-listen .status-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
        background: transparent;
        transition: all 0.3s ease;
    }

    .btn-listen.in-view .status-circle {
        background: white;
    }

    .btn-listen:hover {
        background: var(--primary-200);
        border-color: var(--primary-300);
        transform: translateY(-1px);
    }

    .btn-score {
        background: var(--gray-600);
        color: white;
        border: 1px solid var(--gray-600);
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-score.in-view {
        background: #ff6b35;
        color: white;
        border: 1px solid #ff6b35;
    }

    .btn-score .status-circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid white;
        background: transparent;
        transition: all 0.3s ease;
    }

    .btn-score.in-view .status-circle {
        background: white;
    }

    .btn-score:hover {
        background: var(--primary-200);
        border-color: var(--primary-300);
        transform: translateY(-1px);
    }

    /* Featured Audio Player Section */
    .featured-audio-section {
        padding: 2rem 0;
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
    }

    .audio-player-container {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid var(--gray-200);
    }

    .audio-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .audio-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }

    .close-audio-btn {
        background: var(--gray-200);
        color: var(--gray-600);
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .close-audio-btn:hover {
        background: var(--gray-300);
        color: var(--gray-700);
    }

    .audio-content {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    .audio-info {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex: 0 0 auto;
    }

    .audio-cover {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .audio-details h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.25rem 0;
    }

    .audio-details p {
        font-size: 0.9rem;
        color: var(--gray-600);
        margin: 0;
    }

    .audio-controls {
        flex: 1;
    }

    .audio-controls audio {
        width: 100%;
        height: 40px;
    }

    /* New Catalog Release Divider */
    .new-release-divider {
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, var(--primary-400) 20%, var(--primary-500) 50%, var(--primary-400) 80%, transparent 100%);
        margin: 1rem 0 0.75rem 0;
        border-radius: 2px;
        opacity: 0.8;
    }

    /* New Catalog Release Carousel Navigation */
    .new-release-carousel-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.75rem;
        padding: 0 1rem;
    }

    .nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: pointer;
        border: none;
        text-decoration: none;
        border: 3px solid var(--gray-100);
        color: var(--gray-700);
        background: white;
    }

    .nav-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .nav-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .nav-btn.next-btn {
        background: var(--primary-500);
        color: white;
        border-color: var(--primary-500);
    }

    .nav-btn.next-btn:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .carousel-dots {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #dee2e6;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .carousel-dot.active {
        background: #007bff;
        transform: scale(1.2);
    }
    
    /* ✨ NEW: Composition Title Navigation Styles */
    .composition-title-nav {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* ✨ CHANGED: Left align for scrolling */
        gap: 0.75rem;
        margin: 0.5rem 0 1rem 0;
        padding: 0 1rem;
        font-size: 0.75rem; /* ✨ REDUCED: Smaller font size */
        color: var(--gray-600);
        overflow-x: auto; /* ✨ ADDED: Horizontal scroll */
        overflow-y: hidden; /* ✨ ADDED: Hide vertical scroll */
        scrollbar-width: none; /* ✨ ADDED: Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* ✨ ADDED: Hide scrollbar for IE/Edge */
        white-space: nowrap; /* ✨ ADDED: Prevent wrapping */
        flex-wrap: nowrap; /* ✨ CHANGED: Prevent wrapping to new lines */
        transition: all 0.3s ease; /* ✨ ADDED: Smooth container transitions */
    }
    
    /* ✨ ADDED: Hide scrollbar for WebKit browsers (Chrome, Safari) */
    .composition-title-nav::-webkit-scrollbar {
        display: none;
    }
    
    .composition-title-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; /* Simplified transition without transform */
        text-decoration: none;
        color: var(--gray-600);
        font-weight: 400;
        white-space: nowrap;
        flex-shrink: 0; /* ✨ ADDED: Prevent shrinking */
        min-width: fit-content; /* ✨ ADDED: Ensure full title is visible */
        opacity: 0.7; /* ✨ ADDED: Start with lower opacity for smooth fade */
    }
    
    .composition-title-link:hover {
        background: var(--primary-50);
        color: var(--primary-700);
        opacity: 0.9; /* ✨ ADDED: Smooth opacity increase */
    }
    
    .composition-title-link.active {
        background: var(--primary-100);
        color: var(--primary-700);
        font-weight: 500;
        opacity: 1; /* ✨ ADDED: Full opacity when active */
    }
    
    .composition-title-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--gray-400);
        flex-shrink: 0;
        transition: background 0.3s ease; /* Simplified transition for color only */
    }
    
    .composition-title-link:hover .composition-title-dot {
        background: var(--primary-500);
    }
    
    .composition-title-link.active .composition-title-dot {
        background: var(--primary-600);
    }
    
    /* Mobile responsive for title navigation */
    @media (max-width: 768px) {
        .composition-title-nav {
            gap: 0.5rem;
            font-size: 0.7rem; /* ✨ REDUCED: Even smaller for mobile */
            padding: 0 0.5rem; /* ✨ REDUCED: Less padding on mobile */
        }
        
        .composition-title-link {
            padding: 0.2rem 0.4rem;
            min-width: fit-content; /* ✨ KEPT: Ensure full title visibility */
        }
    }

    .auto-cycle-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 24px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    input:checked + .toggle-slider {
        background-color: #007bff;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(26px);
    }

    .toggle-label {
        font-size: 0.85rem;
        color: #6c757d;
    }

        /* New Release Loading State */
    .new-release-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        padding: 2rem;
        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
        border-radius: 12px;
        border: 2px dashed var(--gray-300);
        animation: loadingPulse 2s ease-in-out infinite;
    }

    .loading-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .loading-image {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading-spinner {
        width: 60px;
        height: 60px;
        border: 4px solid var(--gray-200);
        border-top: 4px solid var(--primary-500);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

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

    .loading-text h3 {
        color: var(--gray-700);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
    }

    .loading-text p {
        color: var(--gray-500);
        font-size: 0.9rem;
        margin: 0;
    }

    @keyframes loadingPulse {
        0%, 100% {
            opacity: 0.8;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.02);
        }
    }

    /* New Release Integrated Audio Player */
    .new-release-audio-container {
        margin-top: 0.5rem;
        padding: 0.75rem;
        background: var(--gray-50);
        border-radius: 8px;
        border: 1px solid var(--gray-200);
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        margin-bottom: 0;
    }

    .new-release-audio-container.has-audio {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        max-height: 500px;
        animation: slideDown 0.3s ease-out;
        margin-bottom: 0.5rem;
        display: block;
    }

    .new-release-audio-container.no-audio {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
                    margin: 0;
                    padding: 0;
                    display: none;
    }

    .audio-player-content {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .audio-info {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex: 0 0 auto;
    }

    .audio-cover {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .audio-details h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.25rem 0;
    }

    .audio-details p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0;
    }

    .audio-controls {
        flex: 1;
    }

    .audio-controls audio {
        width: 100%;
        height: 36px;
    }

    .performed-by-info {
        text-align: center;
        padding: 0.25rem 0;
    }

    .performed-by-text {
        font-size: 0.9rem;
        color: var(--gray-600);
        margin: 0;
        font-weight: 500;
    }
    .performed-by-artist {
        color: var(--primary-600);
        font-weight: 600;
    }

    /* New Release Multi-Audio Navigation Styles */
    .new-release-audio-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .new-release-audio-nav .audio-nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: pointer;
        border: none;
        text-decoration: none;
        border: 3px solid var(--gray-100);
        color: var(--gray-700);
        background: white;
        min-width: 80px;
        text-align: center;
    }

    .new-release-audio-nav .audio-nav-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .new-release-audio-nav .audio-nav-btn:disabled {
        background: var(--gray-300);
        color: var(--gray-500);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .new-release-audio-nav .audio-nav-info {
        font-size: 0.9rem;
        color: var(--gray-600);
        font-weight: 500;
    }

    .new-release-audio-player {
        margin-bottom: 0.75rem;
    }

    .new-release-audio-player .movement-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary-600);
        margin-bottom: 0.5rem;
    }

    .new-release-audio-player .audio-metadata {
        font-size: 0.9rem;
        color: var(--gray-600);
        margin-bottom: 0.75rem;
    }

    .new-release-audio-player audio {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .new-release-audio-player .audio-duration {
        font-size: 0.8rem;
        color: var(--gray-500);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===== RELATED WORKS CAROUSEL COMPONENT STYLES ===== */
    .related-works-carousel-component {
        width: 100%;
        margin: 2rem auto 0;
        padding: 0 1rem;
    }
    
    /* ✨ OPTIMIZED: Popular compositions carousel performance */
    .related-composition-card {
        animation: fadeInUp 0.2s ease-out;
        animation-fill-mode: both;
    }
    
    .related-composition-card:nth-child(1) { animation-delay: 0.05s; }
    .related-composition-card:nth-child(2) { animation-delay: 0.1s; }
    .related-composition-card:nth-child(3) { animation-delay: 0.15s; }
    .related-composition-card:nth-child(4) { animation-delay: 0.2s; }
    .related-composition-card:nth-child(5) { animation-delay: 0.25s; }
    .related-composition-card:nth-child(6) { animation-delay: 0.3s; }

    .related-works-carousel-container {
        background: white;
        border-radius: 16px;
        border: 1px solid var(--gray-200);
        padding: 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
    
    /* Dark mode compatibility for popular compositions */
    [data-theme="dark"] .related-works-carousel-container {
        background: var(--gray-900);
        border-color: var(--gray-700);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    /* Full width for featured compositions carousel */
    #featured-compositions-carousel .related-works-carousel-container {
        max-width: 100%;
        width: 100%;
    }

    .related-works-carousel-title {
        color: var(--primary-600);
        margin-bottom: 1rem;
        font-size: 1.25rem;
        font-weight: 600;
        text-align: center;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--primary-100);
    }

    /* ===== CAROUSEL CONTAINER ===== */
    .related-works-carousel {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 1rem;
        padding: 0.5rem 0;
        width: 100%;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-500) var(--gray-200);
    }

    /* Style the scrollbar (Webkit browsers) */
    .related-works-carousel::-webkit-scrollbar {
        height: 6px;
    }

    .related-works-carousel::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: var(--radius-full);
        margin: 0 0.5rem;
    }

    .related-works-carousel::-webkit-scrollbar-thumb {
        background: var(--primary-500);
        border-radius: var(--radius-full);
        border: 1px solid var(--gray-200);
    }

    .related-works-carousel::-webkit-scrollbar-thumb:hover {
        background: var(--primary-600);
    }

    /* ===== COMPOSITION CARDS ===== */
    .related-composition-card {
        min-width: 200px;
        max-width: 200px;
        flex: 0 0 auto;
        background: linear-gradient(145deg, var(--gray-50) 0%, var(--gray-100) 100%);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        border: 1px solid var(--gray-200);
        position: relative;
        transform: translateY(20px);
        opacity: 0;
        will-change: transform, box-shadow, background, opacity;
        animation: cardEntrance 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* ===== HOVER OVERLAY REMOVED - CLICK TO NAVIGATE ===== */

    /* Staggered entrance animation for cards */
    .related-composition-card:nth-child(1) { animation-delay: 0.05s; }
    .related-composition-card:nth-child(2) { animation-delay: 0.1s; }
    .related-composition-card:nth-child(3) { animation-delay: 0.15s; }
    .related-composition-card:nth-child(4) { animation-delay: 0.2s; }
    .related-composition-card:nth-child(5) { animation-delay: 0.25s; }
    .related-composition-card:nth-child(6) { animation-delay: 0.3s; }

    @keyframes cardEntrance {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .related-composition-card:hover {
        transform: translateY(-7px) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(59, 130, 246, 0.2);
        background: linear-gradient(145deg, var(--gray-50) 0%, var(--primary-50) 100%);
        border-color: var(--primary-300);
        z-index: 10;
    }

    .related-composition-card:hover .related-composition-title {
        color: var(--primary-700);
    }

    /* ===== CARD IMAGE (8.5x11 aspect ratio) ===== */
    .related-composition-image {
        width: 100%;
        height: 258px; /* 200px width * (11/8.5) = 258px height for 8.5x11 ratio */
        object-fit: cover;
        object-position: center;
        display: block; /* remove baseline gap below inline images */
        border-radius: inherit; /* ensure corners match the card */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--gray-200);
        will-change: transform;
    }

    .related-composition-card:hover .related-composition-image {
        transform: scale(1);
    }

    /* ===== CARD CONTENT ===== */
    .related-composition-content {
        padding: 0.75rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .related-composition-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.25rem 0;
        line-height: 1.2;
        transition: color 0.3s ease;
    }

    .related-composition-instrumentation {
        font-size: 0.75rem;
        color: var(--gray-600);
        font-weight: 500;
        margin-bottom: 0;
        line-height: 1.2;
    }

    /* ===== DYNAMIC NEW RELEASE SCORE SECTION ===== */
    .new-release-score-container {
        margin-top: 0.5rem;
        padding: 0.75rem;
        background: var(--gray-50);
        border-radius: 8px;
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        height: auto;
        overflow: visible;
        transform: scaleY(1);
        transform-origin: top;
    }

    /* Hidden state - collapse completely */
    .new-release-score-container.hidden {
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: none;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
        display: none;
    }

    /* Full-width expansion when score is viewed */
    .highlight-card.catalog-highlight.score-expanded {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        max-width: 1400px;
        max-height: 820px;
        z-index: 1000;
        background: white;
        border-radius: 16px;
        margin: 0;
        padding: 2rem;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        border: none;
        animation: expandToFull 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes expandToFull {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
            border-radius: 12px;
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            border-radius: 16px;
        }
    }

    @keyframes shrinkFromFull {
        from {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            border-radius: 16px;
        }
        to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
            border-radius: 12px;
        }
    }

    .highlight-card.catalog-highlight.score-expanded .card-content {
        max-width: none;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .highlight-card.catalog-highlight.score-expanded .new-release-score-container {
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: var(--gray-50);
        border-radius: 12px;
        border: 1px solid var(--gray-200);
    }

    .highlight-card.catalog-highlight.score-expanded .score-layout-container {
        min-height: 400px;
        max-height: 600px;
    }

    /* Backdrop overlay */
    .score-expand-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Close button for full-width mode */
    .score-expand-close {
        position: fixed;
        top: 1rem;
        right: 1rem;
        background: var(--gray-900);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 600;
        z-index: 1002;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
    }

    .score-expand-close:hover {
        background: #1f2937;
        transform: scale(1.15);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .score-expand-close:active {
        transform: scale(0.95);
    }

    /* ===== NEW SECTIONS LAYOUT ===== */
    .new-releases-section {
        margin-bottom: 3rem;
    }



    .featured-media-section {
        margin-bottom: 3rem;
    }

    .featured-media-container {
    width: 100%;
    margin: 0;
    padding: 1rem;
    gap: 2rem;
    display: flex
;
}
                   /* New Two-Column Layout Styles */
     .featured-split-layout {
         display: grid;
         grid-template-columns: 1.4fr 0.6fr;
         gap: 2rem;
         align-items: start;
     }
    
    .featured-video-column {
        min-width: 0;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    
    .featured-news-column {
        width: 100%;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        transition: all 0.3s ease;
    }
    
    /* Dark mode compatibility for featured media */
    [data-theme="dark"] .featured-media-container {
        background: var(--gray-900);
        border-color: var(--gray-700);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }
    
    /* Dark mode compatibility for individual columns */
    [data-theme="dark"] .featured-video-column,
    [data-theme="dark"] .featured-news-column {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    
    /* Featured News Styles - make transparent */
    .featured-wrap {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        box-shadow: none;
    }
    
    /* Featured News Image Styles - full display with proper sizing */
    .feat-row.has-thumb {
        grid-template-columns: 1fr auto;
        gap: 1.5rem;
        align-items: start;
    }
    
    .feat-row.no-thumb {
        grid-template-columns: 1fr;
    }
    
    .feat-thumb {
        flex: 0 0 280px;
        min-height: 200px;
        max-height: 350px;
        max-width: 320px;
        border-radius: 12px;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc; /* lighter backdrop for thumb */
        border: 1px solid var(--gray-100);
    }
    
    .feat-thumb img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }
    
    /* Responsive design for featured news images */
    @media (max-width: 768px) {
        .feat-row.has-thumb {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        
        .feat-thumb {
            flex: 0 0 auto;
            min-height: 180px;
            max-height: 250px;
            order: -1; /* Move image to top on mobile */
        }
    }
    

    
    /* Featured Video Button Styles - Black and White Aesthetic */
    .featured-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }
    
    .featured-actions .learn-more-btn {
        background: var(--surface);
        color: var(--gray-900);
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    
    .featured-actions .learn-more-btn:hover {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: translateY(-1px);
        text-decoration: none;
    }
    
    .featured-actions .btn.primary {
        background: var(--gray-900);
        color: white;
        border: 1px solid var(--gray-900);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .featured-actions .btn.primary:hover {
        background: var(--gray-800);
        border-color: var(--gray-800);
        transform: translateY(-1px);
    }
    
    /* Dark mode compatibility for buttons */
    [data-theme="dark"] .featured-actions .learn-more-btn {
        background: var(--surface);
        color: var(--gray-100);
        border-color: var(--gray-600);
        text-decoration: none;
    }
    
    [data-theme="dark"] .featured-actions .learn-more-btn:hover {
        background: var(--gray-800);
        border-color: var(--gray-500);
        text-decoration: none;
    }
    
    [data-theme="dark"] .featured-actions .btn.primary {
        background: var(--gray-700);
        border-color: var(--gray-700);
    }
    
    [data-theme="dark"] .featured-actions .btn.primary:hover {
        background: var(--gray-600);
        border-color: var(--gray-600);
    }
    
    /* Featured Video Styles (from media.html) */
    .featured-primary {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        padding: 0;
        margin: 0;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .featured-player {
        position: relative;
        aspect-ratio: 16 / 9;
        width: 100%;
        background: #0b1220;
        border-radius: 14px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
        .featured-player iframe, .featured-player video { 
        position: absolute; 
        inset: 0; 
        width: 100%; 
        height: 100%; 
        border: 0; 
        border-radius: 14px;
        object-fit: cover;
    }
    
    .featured-meta {
        padding: .4rem 0 0;
        display: flex;
        gap: 0;
        align-items: flex-start;
        flex-wrap: wrap;
        border-top: 1px solid var(--gray-200);
        margin-top: .5rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .video-meta-line {
        display: flex;
        gap: .5rem;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    
    .video-meta-left {
        color: var(--gray-500);
        font-weight: 400;
        font-size: .9rem;
    }
    
    .video-meta-right {
        display: flex;
        gap: .35rem;
        flex-wrap: wrap;
    }
    
    .tag {
        padding: .15rem .45rem;
        border-radius: 999px;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        font-size: .75rem;
        color: var(--gray-700);
    }
    
    .tag-cat {
        background: #eef2ff;
        border-color: #c7d2fe;
        color: #3730a3;
    }
    
    .performer {
        color: var(--gray-700);
        font-weight: 600;
        margin-right: .25rem;
    }
    
    /* Video carousel */
    .video-carousel {
        position: relative;
        margin: 0 0 .5rem;
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        overflow: hidden;
    }
    
    .video-carousel .rail {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        padding: .35rem .2rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: var(--gray-400) transparent;
        scroll-behavior: smooth;
    }
    
    .video-carousel .rail::-webkit-scrollbar {
        height: 8px;
    }
    
    .video-carousel .rail::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .video-carousel .rail::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: 999px;
    }
    
    .video-carousel .rail:hover::-webkit-scrollbar-thumb {
        background: var(--gray-400);
    }
    
    .video-thumb {
        scroll-snap-align: start;
        min-width: 180px;
        max-width: 220px;
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        background: #fff;
        box-shadow: 0 6px 18px rgba(2,6,23,.08);
        transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
    }
    
    .video-thumb:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(2,6,23,.14);
    }
    
    .video-thumb.active {
        border: 3px solid #dc2626;
        box-shadow: 0 12px 28px rgba(220, 38, 38, 0.25);
        transform: translateY(-2px);
    }
    
    .video-thumb.disabled {
        opacity: .45;
        cursor: not-allowed;
    }
    
    .video-thumb img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        display: block;
    }
    
    .video-thumb .vt-title {
        padding: .45rem .6rem;
        font-size: .85rem;
        color: var(--gray-800);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Featured News Styles (from news.html) */
    .featured-wrap {
        margin: 1rem auto .75rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    
    .featured-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: .25rem 0 .5rem;
    }
    
    .featured-title {
        font-size: 1.35rem;
        font-weight: 900;
        letter-spacing: -.01em;
        margin: 0;
    }
    
    .featured-list {
        display: block;
    }
    
    .feat-row {
        border: 1px solid var(--gray-100);
        border-radius: 12px;
        background: #ffffff; /* brighten card */
        box-shadow: 0 4px 12px rgba(2,6,23,.06); /* softer, lighter */
        margin: 0 0 .5rem;
        padding: .55rem .7rem;
        display: grid;
        grid-template-columns: 1fr min(380px, 28%);
        align-items: start;
        gap: .6rem;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    
    .feat-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(2,6,23,.12);
        border-color: var(--gray-200);
    }
    
    .feat-row {
        grid-template-columns: 1fr;
    }
    
    .feat-main {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding-right: .25rem;
    }
    
    .feat-headline {
        display: flex;
        align-items: baseline;
        gap: .55rem;
        flex-wrap: wrap;
    }
    
    .feat-headline .t {
        font-weight: 800;
        color: var(--gray-900);
        font-size: 1.45rem;
    }
    
    .feat-headline .d {
        color: var(--gray-600);
        font-weight: 700;
        font-size: .95rem;
    }
    
    .feat-main .m {
        color: var(--gray-650, #64748b);
        font-size: 1.02rem;
        line-height: 1.5;
    }
    

    
    .feat-div {
        grid-column: 1/-1;
        border: 0;
        border-top: 1px solid var(--gray-200);
        margin: .6rem 0 .5rem;
    }
    
    .feat-bottom {
        grid-column: 1/-1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        flex-wrap: wrap;
    }
    
    .feat-bottom .feat-meta {
        color: var(--gray-600);
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }
    
    .feat-bottom .feat-actions {
        display: flex;
        align-items: center;
        gap: .45rem;
    }
    
    /* Footer links */
    .footer-links {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    
    /* Responsive adjustments */
    @media (max-width: 900px) {
        .featured-split-layout {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .feat-row {
            grid-template-columns: 1fr;
        }
        
        .feat-thumb {
            max-width: 100%;
            justify-self: center;
        }
    }

    /* ===== SOUND EFFECTS ===== */
    .sound-effect {
        position: fixed;
        top: -100px;
        left: -100px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    /* ===== FEATURED CAROUSEL OVERLAY ===== */
    .featured-carousel-overlay {
        margin: 2rem 0;
        padding: 2rem 0;
        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
        border-radius: 16px;
        border: 1px solid var(--gray-200);
    }

    .carousel-overlay-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .carousel-overlay-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .carousel-overlay-header h3 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0 0 0.5rem 0;
    }

    .carousel-badge {
        display: inline-block;
        background: var(--gray-100); /* flat gray */
        color: var(--gray-800);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 1px solid var(--gray-300);
        position: relative;
    }
    .carousel-badge::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        background: #3b82f6; /* default nub (blue for compositions) */
        vertical-align: middle;
    }

    .carousel-overlay-content {
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
    }

    .video-carousel-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        gap: 2rem;
    }

    .video-carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        background: white;
        transition: transform 0.3s ease;
    }

    .video-carousel-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .video-carousel-item iframe {
        width: 100%;
        height: 400px;
        border: none;
        border-radius: 12px 12px 0 0;
    }



    .carousel-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: white;
        border: 1px solid var(--gray-300);
        border-radius: 6px;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--gray-700);
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        white-space: nowrap;
        min-width: 80px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .carousel-nav-btn:hover {
        background: var(--gray-50);
        border-color: var(--gray-400);
        transform: translateY(-50%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .carousel-nav-btn.prev {
        left: -25px;
    }

    .carousel-nav-btn.next {
        right: -25px;
    }

    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .carousel-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--gray-300);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .carousel-dot.active {
        background: var(--primary-500);
        transform: scale(1.2);
    }

    .carousel-loading {
        text-align: center;
        padding: 3rem;
        color: var(--gray-600);
    }

    .carousel-loading .loading-spinner {
        margin: 0 auto 1rem;
    }

    /* ===== SCORE TOGGLE BUTTONS ===== */
    .score-toggle-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
        flex-wrap: wrap;
    }

    .score-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, #6b7280, #4b5563); /* Lower saturation primary for hidden */
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
    }

    .score-toggle-btn:hover {
        background: linear-gradient(135deg, #4b5563, #374151);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    }

    /* Higher saturation orange for "in view" state */
    .score-toggle-btn.in-view {
        background: linear-gradient(135deg, #f97316, #ea580c);
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
    }

    .score-toggle-btn.in-view:hover {
        background: linear-gradient(135deg, #ea580c, #dc2626);
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    }

    .score-toggle-btn:active {
        transform: translateY(0);
    }

    .score-toggle-btn .toggle-icon {
        transition: all 0.3s ease;
        font-size: 1.1rem;
        line-height: 1;
        font-weight: bold;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .score-toggle-btn.toggled .toggle-icon {
        transform: scale(1.1);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Smooth color transitions for state changes */
    .score-toggle-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ===== DYNAMIC SCORE LAYOUT SYSTEM ===== */
    .score-layout-container {
        display: flex;
        align-items: stretch;
        width: 100%;
        position: relative;
        min-height: 0;
        height: 0;
        overflow: hidden;
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Show container when content is visible */
    .score-layout-container:has(.score-carousel-container.show),
    .score-layout-container:has(.score-video-column:not(.hidden)) {
        min-height: 400px;
        max-height: 600px;
        height: auto;
        overflow: visible;
    }

    /* Fallback for browsers that don't support :has() */
    .score-layout-container.has-content {
        min-height: 400px;
        max-height: 600px;
        height: auto;
        overflow: visible;
    }

    /* Hidden state - no height */
    .score-layout-container.hidden {
        height: 0;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .score-pdf-column {
        flex: 1 1 60%; /* Default: Larger space for PDF */
        display: flex;
        flex-direction: column;
        min-width: 300px; /* Increased minimum for better proportions */
        max-width: none; /* Remove max-width constraint */
        transition: flex-basis 0.2s ease; /* Smoother transition */
    }

    .score-carousel-container {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
        height: 0;
        overflow: hidden;
    }

    .score-carousel-container.show {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }

    /* ===== RESIZABLE DIVIDER ===== */
    .score-divider {
        width: 8px;
        background: var(--gray-200);
        position: relative;
        cursor: col-resize;
        transition: all 0.3s ease;
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        margin: 0 0.5rem;
        opacity: 1;
        transform: scaleX(1);
        z-index: 10; /* Ensure divider is above content */
        user-select: none; /* Prevent text selection during resize */
    }
    /* Hide divider when either column is hidden */
    .score-layout-container.pdf-only .score-divider,
    .score-layout-container.video-only .score-divider {
        display: none !important;
        opacity: 0;
        transform: scaleX(0);
        width: 0;
        margin: 0;
    }

    /* Proper divider handle hiding */
    .score-divider.divider-handle-hidden {
        display: none !important;
        opacity: 0;
        transform: scaleX(0);
        width: 0;
        margin: 0;
        pointer-events: none;
    }

    .score-divider:hover {
        background: var(--primary-300);
    }

    .score-divider.resizing {
        background: var(--primary-500);
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
    }

    /* Add visual feedback during resize */
    .score-layout-container.resizing .score-pdf-column,
    .score-layout-container.resizing .score-video-column {
        transition: none; /* Disable transitions during resize for immediate feedback */
    }
    
    /* Prevent content interference during resize */
    .score-layout-container.resizing {
        pointer-events: none; /* Disable pointer events on content during resize */
    }
    
    .score-layout-container.resizing .score-divider {
        pointer-events: auto; /* Re-enable pointer events on divider */
    }
    
    /* Specifically disable iframe interaction during resize */
    .score-layout-container.resizing iframe {
        pointer-events: none !important;
        user-select: none !important;
    }
    
    /* Disable YouTube iframe interaction during resize */
    .score-layout-container.resizing .youtube-embed-container iframe {
        pointer-events: none !important;
        user-select: none !important;
    }

    .divider-handle {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .divider-grip {
        width: 4px;
        height: 40px;
        background: var(--gray-400);
        border-radius: 2px;
        position: relative;
    }

    .divider-grip::before,
    .divider-grip::after {
        content: '';
        position: absolute;
        left: 50%;
        width: 2px;
        height: 8px;
        background: var(--gray-400);
        border-radius: 1px;
    }

    .divider-grip::before {
        top: 8px;
        transform: translateX(-50%);
    }

    .divider-grip::after {
        bottom: 8px;
        transform: translateX(-50%);
    }

    .score-divider:hover .divider-grip,
    .score-divider.resizing .divider-grip {
        background: var(--primary-600);
    }

    .score-divider:hover .divider-grip::before,
    .score-divider:hover .divider-grip::after,
    .score-divider.resizing .divider-grip::before,
    .score-divider.resizing .divider-grip::after {
        background: var(--primary-600);
    }

    .score-video-column {
        flex: 1 1 40%; /* Default: Smaller space for video */
        display: flex;
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
        min-width: 300px; /* Increased minimum width for video column */
        transition: flex-basis 0.2s ease; /* Smoother transition */
        /* ✨ ADDED: Initial state for smooth animation */
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), flex-basis 0.2s ease;
    }

    .score-video-column.full-width {
        flex: 1 1 100%;
        max-width: 1000px;
        margin: 0 auto; /* Center the video when in full width */
        padding-left: 0;
        padding-right: 0;
    }

    .score-video-column.hidden {
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
        height: 0;
        overflow: hidden;
    }

    .score-pdf-column.full-width {
        flex: 1 1 100%;
        max-width: 1000px;
        margin: 0 auto; /* Center the PDF when in full width */
        padding-left: 0;
        padding-right: 0;
    }

    /* Better centering for PDF-only layout */
    .score-layout-container.pdf-only .score-pdf-column {
        flex: 1 1 100%;
        max-width: 800px; /* Reduced from 1000px for better proportions */
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        display: block; /* Changed from flex to block for easier navigation */
        text-align: center;
    }
    
    /* Hide video column completely in PDF-only state */
    .score-layout-container.pdf-only .score-video-column {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Better centering for video-only layout */
    .score-layout-container.video-only .score-video-column {
        flex: 1 1 100%;
        max-width: 1200px; /* Increased for better video sizing */
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        display: block; /* Changed from flex to block for easier navigation */
        text-align: center;
        /* ✨ ADDED: Smooth slide-in animation from right (opposite PDF) */
        opacity: 1;
        transform: translateX(0);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation: videoSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
    }

    /* ✨ ADDED: Keyframe animation for video slide-in */
    @keyframes videoSlideIn {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Hide PDF column completely in video-only state */
    .score-layout-container.video-only .score-pdf-column {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* ✨ ADDED: Animation for video column when both are visible */
    .score-layout-container:not(.pdf-only):not(.video-only) .score-video-column {
        opacity: 1;
        transform: translateX(0);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Ensure video content is properly sized in video-only mode */
    .score-layout-container.video-only .composition-score-video-player {
        width: 100%;
        max-width: 100%;
    }
    
    /* Ensure YouTube embeds are properly sized in video-only mode */
    .score-layout-container.video-only .youtube-embed-container {
        width: 100%;
        max-width: 100%;
    }

    /* ===== PDF NAVIGATION STYLES ===== */
    .single-page-score-viewer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        max-height: 600px;
        overflow: hidden;
    }

    .score-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        max-height: 600px;
        overflow: hidden;
    }

    .score-iframe-container {
        flex: 1;
        width: 100%;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        min-height: 400px;
        max-height: 600px;
    }

    /* ===== PDF WATERMARK STYLES ===== */
    .pdf-watermark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .watermark-text {
        position: absolute;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        font-size: 3rem;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        line-height: 1.2;
        transform: rotate(-45deg);
        white-space: nowrap;
        user-select: none;
        pointer-events: none;
    }

    .watermark-text.for-perusal {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .watermark-text.all-rights {
        top: calc(50% + 2rem);
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 2.2rem;
    }

    /* Responsive watermark sizing */
    @media (max-width: 768px) {
        .watermark-text {
            font-size: 2.2rem;
        }
        
        .watermark-text.all-rights {
            font-size: 1.6rem;
            top: calc(50% + 1.5rem);
        }
    }

    @media (max-width: 480px) {
        .watermark-text {
            font-size: 1.8rem;
        }
        
        .watermark-text.all-rights {
            font-size: 1.3rem;
            top: calc(50% + 1rem);
        }
    }

    .score-navigation-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--gray-50);
        border-top: 1px solid var(--gray-200);
        border-radius: 0 0 8px 8px;
        margin-top: 0.5rem;
    }

    .score-nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: pointer;
        border: none;
        text-decoration: none;
        border: 3px solid var(--gray-100);
        color: var(--gray-700);
        background: white;
    }

    .score-nav-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .score-nav-btn:disabled {
        background: var(--gray-400);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .score-nav-btn .nav-icon {
        font-size: 1.1rem;
        font-weight: bold;
    }

    .score-page-info {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--gray-700);
        background: white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        border: 1px solid var(--gray-300);
        min-width: 120px;
        text-align: center;
    }

    /* ===== VIDEO PLAYER STYLES ===== */
    .composition-score-video-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .composition-video-player {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .composition-video-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 1rem;
        text-align: center;
    }

    .youtube-embed-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .youtube-embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 8px;
    }

    /* ===== LOADING AND ERROR STATES ===== */
    .related-composition-loading,
    .related-composition-empty,
    .related-composition-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        text-align: center;
        color: var(--gray-600);
        width: 100%;
    }

    .related-composition-loading .loading-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid var(--gray-200);
        border-top: 2px solid var(--primary-500);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 0.75rem;
    }

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

    .related-composition-empty p,
    .related-composition-error p {
        margin: 0;
        font-size: 0.85rem;
    }

    /* ===== RESPONSIVE DESIGN ===== */
    @media (max-width: 768px) {
        .related-works-carousel-component {
            padding: 0 0.5rem;
        }

        .related-works-carousel-container {
            padding: 1rem;
        }

        .related-works-carousel-title {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .related-composition-card {
            min-width: 160px;
            max-width: 160px;
        }

        .related-composition-image {
            height: 207px; /* 160px width * (11/8.5) = 207px height */
        }

        .related-composition-content {
            padding: 0.5rem;
            text-align: center;
        }

        .related-composition-title {
            font-size: 0.8rem;
            margin: 0 0 0.25rem 0;
        }

        .related-composition-instrumentation {
            font-size: 0.7rem;
        }
    }

    @media (max-width: 480px) {
        .related-composition-card {
            min-width: 140px;
            max-width: 140px;
        }

        .related-composition-image {
            height: 181px; /* 140px width * (11/8.5) = 181px height */
        }

        .related-composition-title {
            font-size: 0.75rem;
            margin: 0 0 0.25rem 0;
        }

        .related-composition-instrumentation {
            font-size: 0.65rem;
        }
    }

    /* Media Preview */
    .media-preview {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .video-thumbnail {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        aspect-ratio: 16/9;
    }

    .video-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-thumbnail:hover .video-overlay {
        opacity: 1;
    }

    .play-btn {
        background: var(--primary-500);
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        cursor: pointer;
        font-size: 1.2rem;
        margin-right: 0.5rem;
    }

    .video-duration {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
    }

    .video-info h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.25rem 0;
    }

    .video-info p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0;
    }

    /* Compositions Carousel Section */
    .compositions-carousel-section {
        padding: 4rem 0;
        background: white;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        position: relative;
    }

    .compositions-carousel-container {
        position: relative;
        margin-top: 2rem;
    }

    .carousel-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;
        z-index: 10;
    }

    .carousel-btn {
        background: white;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
        border-radius: 6px;
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        pointer-events: auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        white-space: nowrap;
        min-width: 80px;
    }

    .carousel-btn:hover {
        background: var(--gray-50);
        border-color: var(--gray-400);
    }

    .carousel-btn:disabled {
        background: var(--gray-100);
        color: var(--gray-400);
        cursor: not-allowed;
        border-color: var(--gray-200);
    }

    .compositions-carousel {
        display: flex;
        gap: 2rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 1rem 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .compositions-carousel::-webkit-scrollbar {
        display: none;
    }

    .carousel-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        color: var(--gray-500);
        width: 100%;
    }

    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gray-300);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .carousel-indicator.active {
        background: var(--primary-500);
        transform: scale(1.2);
    }

    /* ===== RESPONSIVE DESIGN SYSTEM ===== */
    
    /* Tablet Breakpoint */
    @media (max-width: 1024px) {
        .highlights-grid {
            gap: 1.5rem;
        }
        
        .highlight-card.catalog-highlight {
            flex: 1.5; /* Slightly more space for catalog on tablets */
        }
        
        .highlight-card.media-highlight {
            flex: 1;
        }
        
        .composition-image {
            flex: 0 0 200px; /* Slightly smaller on tablets */
            height: 260px;
        }
    }

    /* Specific breakpoint for 764px to prevent overlay issues */
    @media (max-width: 764px) {
        .highlights-grid {
            flex-direction: column;
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }
        
        .highlight-card.catalog-highlight,
        .highlight-card.media-highlight {
            flex: 1;
            position: relative;
            z-index: 1;
            width: 100%;
        }

        .highlight-card {
            padding: 1.25rem;
            position: relative;
            z-index: 1;
        }
    }
    /* Tablet Breakpoint - Fix layout at 1064px */
    @media (max-width: 1064px) {
        /* Composition featured layout for tablets */
        .composition-featured {
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 1.25rem;
            width: 100%;
        }

        .composition-image {
            flex: none;
            width: 100%;
            max-width: 100%;
            min-height: 180px;
            max-height: 280px;
            margin: 0;
            align-self: center; /* Center only the image */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .composition-img {
            width: 100%;
            height: auto;
            max-height: 100%;
            object-fit: contain;
            object-position: center;
        }
        
        /* Tablet text sizing */
        .composition-title {
            font-size: 1.3rem;
            text-align: left;
            width: 100%;
        }
        
        .composition-instrumentation {
            font-size: 1rem;
            text-align: left;
            width: 100%;
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        /* Override any general p element rules that might affect composition-instrumentation */
        #new-release-content .composition-instrumentation,
        .composition-featured .composition-instrumentation,
        .composition-details .composition-instrumentation {
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        .composition-description {
            font-size: 0.9rem;
            line-height: 1.5;
            text-align: left;
            width: 100%;
        }

        /* Tablet button layout */
        .composition-actions {
            justify-content: flex-start;
            gap: 0.1rem;
            width: 100%;
        }
        
        .btn-primary,
        .btn-buy {
            padding: 0.5rem 0.75rem;
            font-size: 0.8rem;
        }
        
        /* Override the general container p rule */
        .container p {
            font-size: 1.1rem;
            margin: 0;
            color: var(--gray-600);
            /* margin-bottom: 2rem; */
            line-height: 1.6;
        }
        
        /* Nuclear option - target the exact element with maximum specificity */
        #new-release-content .composition-details .title-instrumentation-container p.composition-instrumentation,
        .composition-featured .composition-details .title-instrumentation-container p.composition-instrumentation,
        p.composition-instrumentation {
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: 0 !important;
        }
    }

    /* Mobile Breakpoint */
    @media (max-width: 768px) {
        .welcome-title {
            font-size: 2rem;
        }

        .welcome-subtitle {
            font-size: 1.1rem;
        }

        .main-navigation {
            gap: 1rem;
        }

        .nav-card {
            padding: 0.75rem 1.25rem;
            min-width: 100px;
        }

        .nav-card .nav-icon {
            font-size: 1.5rem;
        }

        /* Clean mobile highlights layout */
        .highlights-grid {
            flex-direction: column;
            gap: 1.5rem;
            position: relative;
            z-index: 1;
        }
        
        .highlight-card.catalog-highlight,
        .highlight-card.media-highlight {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .highlight-card {
            padding: 1.25rem;
            position: relative;
            z-index: 1;
        }

        /* Mobile-specific adjustments (inherits from tablet breakpoint) */
        .composition-title {
            font-size: 1.2rem; /* Slightly smaller for mobile */
        }
        
        .composition-description {
            font-size: 0.85rem; /* Slightly smaller for mobile */
        }

        .audio-content {
            flex-direction: column;
            text-align: center;
        }

        .audio-info {
            justify-content: center;
        }

        .carousel-controls {
            display: none;
        }

        .compositions-carousel {
            gap: 1rem;
          }
    }
    
    /* Small Mobile Breakpoint */
    @media (max-width: 480px) {
        .highlight-card {
            padding: 1rem;
        }
        
        .composition-featured {
            gap: 1rem;
            align-items: flex-start;
            text-align: left;
            width: 100%;
        }
        
        .composition-image {
            max-width: 100%;
            height: 200px;
            align-self: center;
        }
        
        .composition-title {
            font-size: 1.2rem;
            text-align: left;
            width: 100%;
        }
        
        .composition-instrumentation {
            font-size: 0.9rem;
            text-align: left;
            width: 100%;
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        /* Override any general p element rules that might affect composition-instrumentation */
        #new-release-content .composition-instrumentation,
        .composition-featured .composition-instrumentation,
        .composition-details .composition-instrumentation {
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        .composition-description {
            font-size: 0.85rem;
            text-align: left;
            width: 100%;
        }
        
        .composition-actions {
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            justify-content: flex-start;
        }
        
        .btn-primary,
        .btn-buy {
            width: 100%;
            justify-content: center;
        }
        
        /* Nuclear option - target the exact element with maximum specificity */
        #new-release-content .composition-details .title-instrumentation-container p.composition-instrumentation,
        .composition-featured .composition-details .title-instrumentation-container p.composition-instrumentation,
        p.composition-instrumentation {
            margin: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: 0 !important;
        }
    }

    /* Pre-rendered hero mode: hide dynamic overlay layers */
    .hero-container[data-prerendered="true"] .hero-content-overlay .shader-edge,
    .hero-container[data-prerendered="true"] .hero-content-overlay .shader-layer,
    .hero-container[data-prerendered="true"] .hero-content-overlay .shader-pulse,
    .hero-container[data-prerendered="true"] .hero-content-overlay .green-feather {
        display: none !important;
        animation: none !important;
    }

    /* Capture mode (recording overlay only): hide site chrome and hero content */
    body.capture-mode nav,
    body.capture-mode .secondary-nav,
    body.capture-mode .header-base,
    body.capture-mode .Primary.Nav,
    body.capture-mode .primary-nav,
    body.capture-mode .header,
    body.capture-mode .header-base.example-1,
    body.capture-mode .hero-content-wrapper,
    body.capture-mode .hero-nav-dots { display: none !important; }
    body.capture-mode .hero-container { margin-left: 0 !important; margin-right: 0 !important; }
    body.capture-mode, html.capture-mode { overflow: hidden; }

    /* Overlay-only capture: hide the base video, ensure overlay visible, set neutral bg */
    html.capture-mode.overlay-only body,
    body.capture-mode.overlay-only .hero-container { background: #0b1220; }
    body.capture-mode.overlay-only #hero-video-container { display: none !important; }
    body.capture-mode.overlay-only .hero-content-overlay { display: block !important; opacity: 1 !important; visibility: visible !important; z-index: 1; }

    /* Text-based fallback for pre-rendered video */
    .hero-video-container { position: absolute; inset: 0; }
    .hero-text-fallback { 
        position: absolute; 
        inset: 0; 
        display: none; 
        align-items: center; 
        justify-content: center; 
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        z-index: 12;
    }
    .hero-text-fallback.active { display: flex; }
    .hero-text-fallback .fallback-inner { text-align: center; color: #fff; padding: 2rem; }
    .hero-text-fallback .fallback-bars { display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 64px; margin-bottom: 16px; }
    .hero-text-fallback .fallback-bars .bar { width: 8px; height: 40px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6, #8b5cf6, #ec4899); animation: fb 1.6s ease-in-out infinite; animation-delay: var(--d); opacity: .85; }
    @keyframes fb { 0%, 100% { transform: scaleY(.3); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
    .hero-text-fallback .fallback-text h2 { font-size: 2rem; margin: 0 0 .25rem; background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .hero-text-fallback .fallback-text p { margin: 0; opacity: .9; }