/* ===== STYLES.CSS - MODULAR DESIGN SYSTEM ===== */
/*
 * STRUCTURE:
 * 1. CSS Variables & Brand System
 * 2. Global Reset & Base Styles
 * 3. Scroll System (unified fast-scroll compatible)
 * 4. Complete Header System
 * 5. Navigation & Components
 * 6. Layout Grid System
 * 7. Responsive Breakpoints (Mobile → Tablet → Desktop)
 * 8. Advanced Screen Scaling (Monitor optimization)
 * 9. Component Styles (Cards, Buttons, etc.)
 * 10. Brand Palette Overrides
 */

/* ===== 1. CSS VARIABLES & BRAND SYSTEM ===== */
:root {
    /* Core brand – sampled from the logo */
    --teal:      #20C6B7;   /* primary hue */
    --gold:      #F6B645;   /* accent/cta */
    --orange:    #F2842E;   /* warm accent */

    /* Neutral brand foundation */
    --bg:        #0B0D11;   /* near-black navy - matches logo background */
    --surface-1: #0F141B;   /* dark card/nav */
    --surface-2: #131A22;   /* slightly lighter */
    --panel:     #F4F7FB;   /* light section bg */
    --text:      #E8EEF4;
    --text-dim:  #9AA7B4;
    --line:      #223046;

    /* Hero background - inky blue-navy base like the logo */
    --bg-ink:   #0b1115; /* main */
    --bg-ink-2: #0a0f12; /* deeper */
    --bg-ink-3: #091016; /* deepest */

    /* Very low-alpha glows used for vignette */
    --glow-teal:   rgba(32, 198, 183, 0.08);
    --glow-orange: rgba(242, 132, 46, 0.05);
    --glow-cyan:   rgba(88, 213, 255, 0.06);

    /* Grid controls */
    --grid-size: 48px;                /* distance between lines */
    --grid-line: rgba(255,255,255,.05);
    --grid-opacity: .25;              /* overall strength (lighter) */

    /* Gradients (use sparingly) */
    --brand-gradient: linear-gradient(135deg,#20C6B7 0%,#1CB0A2 38%,#F6B645 72%,#F2842E 100%);
    --teal-gradient:  linear-gradient(135deg,#20C6B7,#159e90);

    /* Legacy compatibility */
    --primary: var(--teal);
    --secondary: var(--orange);
    --dark: var(--bg);
    --light: var(--panel);
    --accent: var(--gold);
    --gradient: var(--brand-gradient);
}

/* ===== 2. GLOBAL RESET & BASE STYLES ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    background: linear-gradient(180deg, var(--bg-ink) 0%, var(--bg-ink-2) 50%, var(--bg-ink-3) 100%);
    color-scheme: dark;
    line-height: 1.6;
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== 4. COMPLETE HEADER SYSTEM ===== */
/* Used across all pages */
header {
    background: var(--surface-1);
    border-bottom: 1px solid rgba(246,182,69,.18); /* subtle gold line */
    color: white;
    padding: 1.5rem 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100px;
    /* Leave space for scrollbar */
    width: calc(100% - var(--scrollbar-width, 0px));
}

/* ===== 5. NAVIGATION & COMPONENTS ===== */

/* Wigley Studios Logo Image Styling */
.logo, .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    height: 50px; /* Set consistent height */
}

.logo img, .navbar-brand img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
    filter: brightness(1.1) saturate(1.2); /* Enhance the logo colors slightly */
}

.logo:hover img, .navbar-brand:hover img {
    transform: translateY(-1px);
    filter: brightness(1.2) saturate(1.3);
}

/* Logo text styling - Always visible for icon+text combination */
.logo-text, .navbar-brand-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: white; /* Fallback color */
    background: linear-gradient(135deg, #ffffff, #f0f0f0, #ffffff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    display: inline-block; /* Always show text with icon */
    align-items: center;
    gap: 0.5rem;
}

/* Ensure text is visible if gradient fails */
@supports not (background-clip: text) {
    .logo-text, .navbar-brand-text {
        -webkit-text-fill-color: white;
        color: white;
    }
}

/* Style the fallback icon */
.logo-text i, .navbar-brand-text i {
    background: linear-gradient(135deg, #ffffff, #f0f0f0, #ffffff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
}

/* Navigation styling */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.8;
}

/* Dropdown navigation for Audio Analyzer */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    position: absolute;
    background-color: rgba(45, 55, 72, 0.95);
    backdrop-filter: blur(10px);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1000;
    top: 100%;
    left: 0;
    margin-top: 2px;
    /* Minimal gap to prevent accidental triggering */
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nav-dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    border-radius: 4px;
    margin: 4px;
}

.nav-dropdown-content a:hover {
    background-color: rgba(108, 99, 255, 0.2);
}

/* Show dropdown on hover - keep it visible with a bridge */
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown-content:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: block;
}

/* Create invisible bridge to prevent dropdown from disappearing */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 999;
}

/* Cart icon styling */
.cart-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
}

.cart-count {
    background-color: var(--accent);
    color: var(--dark);
    padding: 0.2rem 0.5rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 1.5rem;
    text-align: center;
}

/* Coming Soon Banner - now handled by sticky positioning rule below */

.coming-soon-banner span {
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

/* ===== 3. SCROLL SYSTEM ===== */
/* Unified scroll behavior with fast-scroll compatibility */

/* Global scrolling (one scrollbar) */
html, body {
    height: 100%;
    overflow-y: auto;         /* browser scroll only */
    scroll-behavior: smooth;  /* nice when clicking dots */
}

/* Scroll snap disabled - mousewheel scrolls normally, only keyboard triggers snapping */
html {
    scroll-snap-type: none;   /* No CSS-based snapping, keyboard navigation uses JS scrollIntoView */
    scroll-padding-top: clamp(100px, 12vh, 150px); /* Dynamic padding based on viewport */
}

/* Faster, more responsive scroll snap during user interaction */
html:not(.fast-scrolling) {
    scroll-behavior: smooth;
    scroll-snap-stop: normal; /* Allow quick navigation through sections */
}

/* Disable scroll snap during fast scrolling */
html.fast-scrolling {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* CRITICAL FIX: Reduce scroll-snap aggressiveness for touchpad users */
/* This prevents touchpad momentum from triggering unwanted section snaps */
@media (pointer: fine) and (hover: hover) {
    /* Scroll snap disabled for normal mousewheel behavior */
    html {
        scroll-snap-type: none; /* No snapping for mousewheel */
        scroll-snap-stop: normal; /* Allow skipping sections during fast scrolling */
    }

    .scroll-section {
        scroll-snap-align: none; /* No CSS-based snap alignment */
        /* Increased scroll margin creates larger "dead zone" before snapping */
        scroll-margin-top: clamp(120px, 15vh, 180px);
    }
}

/* Unified scroll section - dynamically sized to show full content */
.scroll-section {
    min-height: 100svh;       /* full screen section */
    display: grid;            /* Keep original grid layout */
    align-items: center;      /* Vertical centering */
    scroll-snap-align: none; /* No CSS snapping, keyboard nav uses JS */
    scroll-margin-top: 0; /* Handled by scroll-padding-top on html */

    /* Default responsive padding - can be overridden per section */
    --section-pad-top: clamp(2rem, 8vh, 6rem);
    --section-pad-bottom: clamp(2rem, 8vh, 6rem);
    --section-pad-horizontal: clamp(1rem, 3vw, 2rem);

    padding: var(--section-pad-top) var(--section-pad-horizontal) var(--section-pad-bottom);
}

/* ===== PER-SECTION VERTICAL SPACING ADJUSTMENTS ===== */
/* Hero sections - default padding for all pages except index */
.hero-section.scroll-section,
#hero.scroll-section {
    --section-pad-top: clamp(2rem, 5vh, 4rem);
    --section-pad-bottom: clamp(2rem, 5vh, 4rem);
    align-items: center; /* Force center alignment */
}

/* Index page hero gets compact padding for 1920x1080 (NOT on ultrawide) */
@media (max-width: 2559px) {
    body.index-page .hero-section.scroll-section,
    body.index-page #hero.scroll-section {
        --section-pad-top: clamp(1rem, 2vh, 2rem);
        --section-pad-bottom: clamp(1rem, 2vh, 2rem);
    }
}

/* Features section - needs less top padding on smaller screens */
#features.scroll-section {
    --section-pad-top: clamp(1rem, 4vh, 3rem);
    --section-pad-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Supporting Tools section - similar to features */
#supporting-tools.scroll-section {
    --section-pad-top: clamp(1rem, 4vh, 3rem);
    --section-pad-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* GUI Toolkit section - needs less padding to fit cards */
#gui-toolkit.scroll-section {
    --section-pad-top: clamp(1rem, 3vh, 2.5rem);
    --section-pad-bottom: clamp(1rem, 3vh, 2.5rem);
    /* Removed align-items to allow vertical centering */
}

/* Pricing section - very minimal padding for card display on all screens */
#pricing.scroll-section {
    --section-pad-top: clamp(1rem, 3vh, 2.5rem);
    --section-pad-bottom: clamp(1rem, 3vh, 2.5rem);
    /* Removed align-items to allow vertical centering */
}

/* Testimonials section - minimal padding on ultrawide */
#testimonials.scroll-section {
    --section-pad-top: clamp(1.5rem, 5vh, 4rem);
    --section-pad-bottom: clamp(1.5rem, 5vh, 4rem);
}

/* Increase testimonials padding on smaller screens to fill viewport better */
@media (max-width: 2559px) {
    #testimonials.scroll-section {
        --section-pad-top: clamp(6rem, 12vh, 10rem);
        --section-pad-bottom: clamp(6rem, 12vh, 10rem);
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Kill the inner scrollbar */
.scroll-container {
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
}

/* ===== BODY PADDING SYSTEM ===== */
/* Body padding to account for fixed header + sticky banner - dynamic for all screens */
body {
    padding-top: clamp(100px, 12vh, 150px);
}

/* Hero section starts at the top (no gap) on all pages */
.hero.scroll-section {
    margin-top: calc(-1 * clamp(100px, 12vh, 150px)); /* Compensate for body padding */
    padding-top: clamp(100px, 12vh, 150px); /* Add padding inside so content isn't hidden under header */
}

/* Mobile responsive header */
@media (max-width: 768px) {
    header {
        padding: 0.75rem 0;
        height: 70px; /* Smaller on mobile */
    }

    .nav-links {
        display: none !important;
    }

    nav {
        padding: 0 0.5rem;
        justify-content: space-between;
        width: 100%;
    }

    .logo {
        height: 40px;
        flex-shrink: 0;
        max-width: 70%;
        overflow: visible;
    }

    .logo img {
        height: 40px;
    }

    .logo-text {
        display: inline-block !important;
        font-size: 0.9rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .cart-icon {
        flex-shrink: 0;
        margin-left: auto;
        padding: 0.5rem;
    }

    .coming-soon-banner {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
        min-height: 40px;
        line-height: 1.3;
    }

    .coming-soon-banner span {
        display: inline-block;
        margin-left: 0.3rem;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* Override scroll behavior on mobile */
    html {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
        scroll-padding-top: 0;
    }

    .scroll-section {
        min-height: auto;
        scroll-snap-align: none;
        padding: clamp(1.5rem, 5vh, 3rem) 1rem;
    }

    body {
        padding-top: 110px; /* Smaller mobile header */
    }

    .hero.scroll-section {
        margin-top: -110px;
        padding-top: 110px;
    }
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.8;
}

/* Enhanced nav link styling for dark headers */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: white !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.nav-links a.active {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 3px;
}

.cta-button {
    background: var(--teal);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 6px 16px rgba(32, 198, 183, 0.3), 0 3px 8px rgba(246, 182, 69, 0.2);
    border: none;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary,
.pricing-card .pricing-button,
.btn-purchase,
.hero-buttons .btn-purchase,
.pricing-cta,
.email-subscribe-button,
.cta-button,
.checkout-btn-proceed {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(32, 198, 183, 0.45), 0 5px 15px rgba(246, 182, 69, 0.35);
    background: #1ab5a6;
}

/* Cart Button - Unique Green Styling */
.nav-links .cta-button[href*="cart"],
a.cta-button[href*="cart"] {
    background: #51CF66 !important;
    box-shadow: 0 2px 6px rgba(81, 207, 102, 0.2) !important;
}

.nav-links .cta-button[href*="cart"]:hover,
a.cta-button[href*="cart"]:hover {
    background: #40c057 !important;
    box-shadow: 0 8px 20px rgba(81, 207, 102, 0.4), 0 4px 10px rgba(64, 192, 87, 0.3) !important;
    transform: translateY(-3px);
}

.learn-more-button {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #20c6b7 0%, #f6b645 100%);
    border-radius: 5px;
    font-weight: 600;
    box-shadow: 0 5px 14px rgba(32, 198, 183, 0.25), 0 2px 6px rgba(246, 182, 69, 0.15);
    transition: all 0.3s ease;
    text-align: center;
    border: none;
}

.learn-more-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px rgba(32, 198, 183, 0.4), 0 4px 12px rgba(246, 182, 69, 0.3);
    color: white;
    background: linear-gradient(135deg, #1ab5a6 0%, #f5ad2e 100%);
}

.cta-button-alt {
    display: inline-block;
    background: linear-gradient(90deg, #4A5568, #2D3748);
    color: white;
    padding: 0.85rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button-alt:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    color: white;
}

.cta-section {
    padding: 6rem 0;
    background: var(--gradient);
    color: white;
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cta-content p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Section headers - responsive typography */
.section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vh, 4rem);
}

.section-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    margin-bottom: clamp(0.75rem, 1.5vh, 1.5rem);
    line-height: 1.2;
}

.section-header p {
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    line-height: 1.5;
    opacity: 0.9;
}

.cta-content .cta-button {
    font-size: 1.25rem;
    padding: 1rem 2rem;
    background-color: white;
    color: var(--primary);
}

footer {
    background-color: var(--dark);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--accent);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.75rem;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-column ul li a:hover {
    opacity: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    opacity: 0.7;
    font-size: 0.875rem;
}

.cart-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
}

/* ===== 7. RESPONSIVE BREAKPOINTS ===== */
/* Tablet layout adjustments */
@media (max-width: 992px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: clamp(1rem, 3vh, 2rem);
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        order: -1; /* Show image first on tablet */
    }

    .centered-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    }
}

/* Narrow tablet/wide mobile fixes (750px - 920px) - handles awkward multi-line banner */
@media (max-width: 920px) and (min-width: 750px) {
    /* Increase top padding to prevent banner overlap */
    body.index-page .hero-section.scroll-section,
    body.index-page #hero.scroll-section {
        padding-top: calc(clamp(100px, 12vh, 150px) + 1.5rem) !important;
        padding-bottom: 5rem !important;
        min-height: 100vh;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    /* Constrain hero container */
    body.index-page .hero-section .container {
        max-width: 90% !important;
        margin-top: 0 !important;
    }

    /* Adjust hero image size - bigger but not too big */
    body.index-page .hero-image img {
        width: clamp(220px, 38vw, 350px) !important;
        max-height: 28vh;
        object-fit: contain;
    }

    /* Balanced spacing in hero section */
    body.index-page .hero-content {
        gap: clamp(0.75rem, 1.8vh, 1.2rem) !important;
    }

    /* Reduce hero text sizes but keep readable */
    body.index-page .hero-text h1 {
        font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
        margin-bottom: 0.6rem !important;
        line-height: 1.2 !important;
    }

    body.index-page .hero-text p.lead {
        font-size: clamp(0.9rem, 1.15vw, 1.05rem) !important;
        margin-bottom: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* Convert stats grid to 2x2 and make compact */
    body.index-page #hero [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 0.75rem auto 0.6rem !important;
        gap: 0.6rem !important;
        max-width: 100% !important;
    }

    /* Balanced font sizes in stats cards */
    body.index-page #hero [style*="grid-template-columns"] > div > div:first-child {
        font-size: 1.5rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    body.index-page #hero [style*="grid-template-columns"] > div > div:last-child {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.3px !important;
    }

    /* Balanced padding in stats cards */
    body.index-page #hero [style*="grid-template-columns"] > div {
        padding: 0.65rem 0.5rem !important;
    }

    /* Balanced button spacing */
    body.index-page .hero-buttons {
        margin-top: 0.65rem !important;
        gap: 0.6rem !important;
        margin-bottom: 0 !important;
    }

    body.index-page .hero-buttons a {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Keep scroll hint visible with absolute positioning at bottom */
    .hero-section .scroll-hint {
        position: absolute !important;
        bottom: 1.5rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        font-size: 0.85rem !important;
    }

    /* Fix sections with 3 cards - convert to single column for better fit */
    #features .centered-grid,
    #advantages .centered-grid {
        grid-template-columns: 1fr !important;
        max-width: 90% !important;
        gap: 1rem !important;
    }

    /* Compact feature cards */
    .feature-card,
    body.index-page #features .feature-card,
    body.index-page #advantages .feature-card {
        padding: 1rem !important;
        margin-bottom: 0 !important;
    }

    /* Reduce section header sizes */
    .section-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
    }

    .section-header p {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }

    .section-header {
        margin-bottom: 1rem !important;
    }

    /* Testimonials section - convert to 2 columns for better fit */
    #testimonials .centered-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 95% !important;
        gap: 1rem !important;
    }

    /* Compact testimonial cards */
    #testimonials .feature-card {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }

    #testimonials h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Adjust section padding for all scroll sections */
    .scroll-section {
        padding-top: clamp(1.5rem, 3vh, 2rem) !important;
        padding-bottom: clamp(1.5rem, 3vh, 2rem) !important;
    }
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .centered-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    /* Features section - single column on mobile */
    #features .centered-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet - 2 columns for features */
@media (max-width: 1024px) and (min-width: 769px) {
    #features .centered-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== 10. BRAND PALETTE OVERRIDES ===== */

/* Header: go dark, not rainbow */
/* Note: Main header styles defined in "Complete Header System" section above */

/* Logo can stay bright; links calmer */
.nav-links a {
    color: var(--text);
    opacity: .9;
}
.nav-links a:hover {
    opacity: 1;
}

/* Hero: keep the cinematic dark */
.hero {
    background:
        /* Subtle teal/orange vignette to mirror the logo lighting */
        radial-gradient(70% 100% at 78% 22%, var(--glow-teal) 0%, transparent 60%),
        radial-gradient(65% 95% at 12% 88%, var(--glow-orange) 0%, transparent 70%),
        /* Faint grid pattern */
        linear-gradient(transparent 97%, var(--grid-line) 97%),
        linear-gradient(90deg, transparent 97%, var(--grid-line) 97%),
        /* Inky blue-navy base */
        linear-gradient(180deg, var(--bg-ink) 0%, var(--bg-ink-2) 60%, var(--bg-ink-3) 100%) !important;
    background-size:
        100% 100%,
        100% 100%,
        40px 40px,
        40px 40px,
        100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text);
}
.hero-text h1 span {
    color: var(--gold);
}

/* Light sections: use a soft panel, not pure white */
.features,
.pricing,
.coming-soon,
.section-light {
    background: var(--panel) !important;
    color: #0e1622;
}

/* Cards */
.feature-card,
.pricing-card {
    background: #fff;
    border: 1px solid rgba(34,48,70,.06);
}
.pricing-card.featured {
    background: var(--brand-gradient);
    color: #fff;
}

/* Buttons */
.cta-button,
.pricing-button {
    background: var(--teal);
    color: #081116;
}
.cta-button:hover,
.pricing-button:hover {
    background: #18b1a5; /* darker teal */
}

/* Pill badges / highlights */
.pricing-badge.discount {
    background: rgba(32,198,183,.2);
    color: #0b4e49;
}
.pricing-badge.save {
    background: var(--gold);
    color: var(--dark);
    font-weight: 600;
}

/* "Coming soon" banner: restored gold gradient that pops against dark header */
.coming-soon-banner {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53, #FFD93D) !important;
}

/* Music Scroll Rows - Beautiful horizontal scrolling */
.music-row-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.music-row-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.music-row-header p {
    color: #4a5568;
    font-size: 1rem;
    margin: 0;
}

.music-scroll-container {
    position: relative;
    overflow: hidden;
    margin: 0 -1rem;
    padding: 0 3rem;
}

.music-scroll-row {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--teal) transparent;
}

.music-scroll-row::-webkit-scrollbar {
    height: 12px;
}

.music-scroll-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin: 0 20px;
}

.music-scroll-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--teal), var(--gold));
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    background-clip: content-box;
}

.music-scroll-row::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, var(--gold), var(--orange));
    background-clip: content-box;
}

.music-scroll-row .pricing-card {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.music-scroll-row .pricing-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 32px rgba(32, 198, 183, 0.15);
}

.music-scroll-row .pricing-card.featured {
    flex: 0 0 320px;
    min-width: 320px;
    max-width: 320px;
}

.music-scroll-row .pricing-card.featured:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 16px 48px rgba(246, 182, 69, 0.25);
}

/* Navigation arrows for scroll rows */
.music-scroll-container .scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--teal), var(--gold));
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(32, 198, 183, 0.3);
}

.music-scroll-container .scroll-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(32, 198, 183, 0.4);
    background: linear-gradient(135deg, var(--gold), var(--orange));
}

.music-scroll-container .scroll-arrow.left {
    left: 0;
}

.music-scroll-container .scroll-arrow.right {
    right: 0;
}

/* Gradient fade edges for scroll rows */
.music-scroll-container::before,
.music-scroll-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.music-scroll-container::before {
    left: 50px;
    background: linear-gradient(to right, var(--panel), transparent);
}

.music-scroll-container::after {
    right: 50px;
    background: linear-gradient(to left, var(--panel), transparent);
}


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

/* ===== 6. RESPONSIVE GRID SYSTEM ===== */
/* Desktop (3 columns) - Base for 1200px-1920px */
@media (min-width: 1200px) and (max-width: 1920px) {
    .centered-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: clamp(1200px, 90vw, 1600px);
    }

    .gui-toolkit-section .centered-grid {
        grid-template-columns: repeat(3, minmax(280px, 350px));
        max-width: 1200px;
        gap: 1.5rem;
    }
}

/* Large screens 1921px-2559px - Wider cards */
@media (min-width: 1921px) and (max-width: 2559px) {
    .centered-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: clamp(1300px, 90vw, 1700px);
    }

    .gui-toolkit-section .centered-grid {
        grid-template-columns: repeat(3, minmax(300px, 380px));
        max-width: 1300px;
        gap: 2rem;
    }
}

/* Ultra-wide 2560px-3440px */
@media (min-width: 2560px) and (max-width: 3440px) {
    .centered-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: clamp(1400px, 90vw, 1800px);
    }

    .gui-toolkit-section .centered-grid {
        grid-template-columns: repeat(3, minmax(330px, 420px));
        max-width: 1450px;
        gap: 2.5rem;
    }
}

/* Super ultra-wide 3441px+ */
@media (min-width: 3441px) {
    .centered-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: clamp(1500px, 90vw, 2000px);
    }

    .gui-toolkit-section .centered-grid {
        grid-template-columns: repeat(3, minmax(360px, 480px));
        max-width: 1600px;
        gap: 3rem;
    }
}

/* Tablet (2 columns) */
@media (max-width: 1199px) and (min-width: 769px) {
    .centered-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: clamp(700px, 80vw, 1000px);
    }

    .gui-toolkit-section .centered-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: clamp(700px, 80vw, 1000px);
    }
}

/* Mobile (1 column) */
@media (max-width: 768px) {
    .centered-grid {
        grid-template-columns: 1fr;
        max-width: clamp(300px, 90vw, 500px);
    }
}

/* ===== PRICING SECTION RESPONSIVE CARDS (Bravura page) ===== */
/* Base pricing grid - 1200px to 1920px */
@media (min-width: 1200px) and (max-width: 1920px) {
    .pricing-section .centered-grid {
        grid-template-columns: repeat(3, minmax(340px, 380px));
        gap: 1.25rem;
        max-width: 1300px;
    }

    /* Reduce card padding and font sizes to fit better on 1920x1080 */
    .pricing-card {
        max-width: 380px;
        --card-padding: 1rem;
        --font-scale: 0.9rem;
    }

    .pricing-card .pricing-features li {
        padding: 0.2rem 0.5rem 0.2rem 1.5rem;
        min-height: unset;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    .pricing-card .pricing-features li:before {
        font-size: 0.9rem;
        left: 0.4rem;
    }

    /* Ensure pricing section fits in viewport on 1920x1080 */
    #pricing.scroll-section {
        --section-pad-top: clamp(1rem, 2.5vh, 2rem);
        --section-pad-bottom: clamp(1rem, 2.5vh, 2rem);
        padding-top: var(--section-pad-top) !important;
        padding-bottom: var(--section-pad-bottom) !important;
    }

    /* Reduce section header margins for better fit */
    .pricing-section .section-header,
    #pricing .section-header {
        margin-bottom: clamp(1rem, 2vh, 1.5rem);
    }

    .pricing-section .section-header h2,
    #pricing .section-header h2 {
        font-size: clamp(1.75rem, 2.5vw, 2.25rem);
        margin-bottom: 0.75rem;
    }

    .pricing-section .section-header p,
    #pricing .section-header p {
        font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    }

    /* Adjust pricing card title and price sizing */
    .pricing-card .pricing-name {
        font-size: 1.2rem;
    }

    .pricing-card .pricing-price {
        font-size: 1.8rem;
    }

    .pricing-card.featured .pricing-price {
        font-size: 1.7rem;
    }
}

/* Large screens 1921px-2559px */
@media (min-width: 1921px) and (max-width: 2559px) {
    .pricing-section .centered-grid {
        grid-template-columns: repeat(3, minmax(400px, 1fr));
        gap: 1.75rem;
        max-width: 1550px;
    }
}

/* Ultra-wide 2560px-3440px */
@media (min-width: 2560px) and (max-width: 3440px) {
    .pricing-section .centered-grid {
        grid-template-columns: repeat(3, minmax(420px, 450px));
        gap: 2rem;
        max-width: 1500px;
    }

    .pricing-card {
        max-width: 450px;
    }

    .pricing-card.featured {
        max-width: 450px;
    }

    .pricing-card.enterprise-premium {
        max-width: 450px;
    }
}

/* Super ultra-wide 3441px+ */
@media (min-width: 3441px) {
    .pricing-section .centered-grid {
        grid-template-columns: repeat(3, minmax(420px, 460px));
        gap: 2rem;
        max-width: 1500px;
    }

    .pricing-card {
        max-width: 460px;
    }

    .pricing-card.featured {
        max-width: 460px;
    }

    .pricing-card.enterprise-premium {
        max-width: 460px;
    }
}

/* ===== 8. SIMPLIFIED RESPONSIVE SCALING SYSTEM ===== */
/* Uses flexible units for automatic scaling across all screen sizes */
:root {
    /* Dynamic scaling based on viewport - works across all screen sizes */
    --scale-factor: clamp(0.75, 0.8vw, 1.2);
    --card-gap: clamp(0.8rem, 1.5vw, 2rem);
    --card-padding: clamp(0.8rem, 1.2vw, 1.5rem);
    --section-padding: clamp(2rem, 4vh, 5rem);
    --font-scale: clamp(0.85rem, 0.95vw, 1.05rem);
    --card-width: clamp(280px, 22vw, 380px);
}

/* Unified responsive grid system - works across all screen sizes */
.centered-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--card-gap);
    max-width: clamp(1000px, 85vw, 1400px);
    margin: 0 auto;
    justify-items: center;
    padding: 0 clamp(0.5rem, 2vw, 2rem);
    width: 100%;
}

/* Features section - force 3 column layout */
#features .centered-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1300px;
}

/* Feature grid - ensure 3 columns for feature cards */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(1.5rem, 2vw, 2.5rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Coming soon cards in scroll rows */
#coming-soon-row .pricing-card {
    flex: 0 0 var(--card-width);
    min-width: var(--card-width);
    max-width: var(--card-width);
    margin-right: var(--card-gap);
    height: auto;
}

#coming-soon-row .pricing-features {
    margin-bottom: clamp(1.2rem, 1.8vw, 2rem);
}

#coming-soon-row .pricing-features li {
    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
    line-height: 1.3;
    padding: clamp(0.2rem, 0.35vw, 0.4rem) 0;
}

/* Screen-aware card sizing */
.pricing-card {
    display: flex;
    flex-direction: column;
    font-size: var(--font-scale);
    height: auto;
    min-height: auto;
    background: white;
    border-radius: calc(12px * var(--scale-factor));
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    max-width: var(--card-width);
    width: 100%;
}

.pricing-card:hover {
    transform: translateY(calc(-3px * var(--scale-factor)));
}

.pricing-card .pricing-content {
    flex: 1;
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
}

.pricing-card .pricing-header {
    margin-bottom: calc(var(--card-padding) * 0.8);
}

.pricing-card .pricing-name {
    font-size: calc(var(--font-scale) * 1.4);
    font-weight: 600;
    margin-bottom: calc(var(--card-padding) * 0.3);
}

.pricing-card .pricing-price {
    font-size: calc(var(--font-scale) * 2.2);
    font-weight: 700;
    margin: calc(var(--card-padding) * 0.4) 0;
}

.pricing-card .pricing-description {
    font-size: calc(var(--font-scale) * 1.1);
    margin-bottom: var(--card-padding);
    opacity: 0.8;
    line-height: 1.3;
}

.pricing-card .pricing-features {
    flex: 1;
    margin-bottom: var(--card-padding);
    list-style: none;
    padding: 0;
}

.pricing-card .pricing-features li {
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    font-size: var(--font-scale);
    line-height: 1.35;
    position: relative;
    text-align: left;
    min-height: unset;
    display: flex;
    align-items: flex-start;
}

.pricing-card .pricing-features li:before {
    content: "✓";
    position: absolute;
    left: 0.25rem;
    top: 0.3rem;
    color: var(--teal);
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1;
    width: 1rem;
    text-align: center;
}

/* Bravura pricing page overrides - ensure consistent flex layout for static + JS content */
body.pricing-page .pricing-card .pricing-features {
    margin-bottom: 1.2rem;
    list-style: none;
    padding: 0;
}

body.pricing-page .pricing-card .pricing-features li {
    padding: 0.35rem 0;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: clamp(0.85rem, 0.95rem, 1rem);
    line-height: 1.35;
    color: #333333;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: auto;
    position: static;
    flex-wrap: nowrap;
}

body.pricing-page .pricing-card .pricing-features li:last-child {
    border-bottom: none;
}

body.pricing-page .pricing-card.featured .pricing-features li {
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

body.pricing-page .pricing-card .pricing-features li::before {
    content: none;
}

body.pricing-page .pricing-card .pricing-features .check-icon {
    flex: 0 0 1.35rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 0.1rem;
    color: var(--teal);
    flex-shrink: 0;
}

body.pricing-page .pricing-card.featured .pricing-features .check-icon {
    color: var(--gold);
}

body.pricing-page .pricing-card .pricing-features .feature-label {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
    color: inherit;
    line-height: 1.4;
}

/* Home (index) pricing card refinements */
body.index-page #pricing .pricing-card .pricing-features {
    margin-bottom: clamp(0.85rem, 1.2vw, 1.1rem);
}

body.index-page #pricing .pricing-card .pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.3rem 0 !important;
    min-height: auto;
    line-height: 1.25;
    padding-left: 0 !important;
}

body.index-page #pricing .pricing-card .pricing-features li::before {
    position: relative;
    transform: none;
    left: auto;
    top: 0.1rem;
    margin-right: 0.25rem;
    flex: 0 0 auto;
}

/* Featured cards styling - screen aware with enhanced readability */
.pricing-card.featured {
    background: linear-gradient(135deg,
        rgba(32,198,183,0.95) 0%,
        rgba(14,20,25,0.98) 60%,
        rgba(26,33,43,0.95) 100%);
    color: white;
    border: calc(2px * var(--scale-factor)) solid var(--gold);
    max-width: calc(var(--card-width) * 1.15);
    box-shadow:
        0 0 0 1px rgba(246, 182, 69, 0.4),
        0 20px 60px rgba(32,198,183,0.15),
        0 8px 32px rgba(246,182,69,0.12),
        inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(15px);
    overflow: visible; /* Allow sale badges to show properly */
    position: relative;
}

/* Add controlled brightness with subtle glow overlays */
.pricing-card.featured::before {
    content: '';
    position: absolute;
    inset: 2px; /* Stay inside border */
    border-radius: calc(10px * var(--scale-factor)); /* Match card border radius */
    background:
        radial-gradient(circle at 70% 20%, rgba(32,198,183,0.15) 0%, transparent 60%),
        radial-gradient(circle at 30% 80%, rgba(246,182,69,0.12) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* Ensure content stays above glow effects */
.pricing-card.featured .pricing-content,
.pricing-card.featured .pricing-button,
.pricing-card.featured * {
    position: relative;
    z-index: 1;
}

/* Ensure pricing cards have relative positioning for badges */
.pricing-card {
    position: relative;
}

/* Sale badge positioning - top-right corner */
.sale-badge {
    background: #f6b645; /* Gold color */
    color: #0b1115; /* Dark background color */
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 3;
}

/* Sale badges need to be above everything */
.pricing-card.featured .sale-badge {
    position: absolute;
    z-index: 3;
}

/* Add subtle inner glow animation */
.pricing-card.featured::after {
    content: '';
    position: absolute;
    inset: 2px; /* Stay inside border */
    border-radius: calc(10px * var(--scale-factor)); /* Match card border radius */
    background:
        radial-gradient(circle at 30% 20%, rgba(246,182,69,0.1) 0%, transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(32,198,183,0.08) 0%, transparent 50%);
    animation: featuredGlow 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes featuredGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .pricing-card.featured::after {
        animation: none;
    }

    .pricing-card,
    .pricing-card.featured {
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .pricing-card:hover,
    .pricing-card.featured:hover {
        transform: none;
    }
}

.pricing-card.featured .pricing-features li:before {
    color: var(--gold);
}

.pricing-card.featured .pricing-price {
    font-size: calc(var(--font-scale) * 2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.pricing-card.featured .pricing-features li {
    font-size: calc(var(--font-scale) * 0.95);
    line-height: 1.35;
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    min-height: unset;
    display: flex;
    align-items: flex-start;
}

/* Screen-aware button sizing */
.pricing-card .pricing-button {
    margin-top: auto;
    flex-shrink: 0;
    padding: calc(var(--card-padding) * 0.8) var(--card-padding);
    font-size: calc(var(--font-scale) * 1.1);
    font-weight: 600;
    border: none;
    border-radius: calc(6px * var(--scale-factor));
    background: var(--teal);
    color: white;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    display: block;
    line-height: 1.2;
}

.pricing-card .pricing-button:hover {
    background: #18b1a5;
    transform: translateY(-2px);
}

.pricing-card.featured .pricing-button {
    background: white;
    color: var(--teal);
    border: 2px solid var(--gold);
    position: relative;
    z-index: 2;
    font-weight: 600;
    text-shadow: none;
}

.pricing-card.featured .pricing-button:hover {
    background: var(--gold);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(246,182,69,0.3);
}

/* Music scroll row - responsive sizing */
.music-scroll-row .pricing-card {
    flex: 0 0 var(--card-width);
    min-width: var(--card-width);
    max-width: var(--card-width);
    margin-right: var(--card-gap);
}

.music-scroll-row .pricing-card.featured {
    flex: 0 0 calc(var(--card-width) * 1.15);
    min-width: calc(var(--card-width) * 1.15);
    max-width: calc(var(--card-width) * 1.15);
    margin-right: var(--card-gap);
}

/* Mobile optimizations for music scroll rows */
@media (max-width: 768px) {
    .music-scroll-row .pricing-card,
    #coming-soon-row .pricing-card {
        flex: 0 0 clamp(260px, 80vw, 300px);
        min-width: clamp(260px, 80vw, 300px);
        max-width: clamp(260px, 80vw, 300px);
    }

    .music-scroll-row .pricing-card.featured {
        flex: 0 0 clamp(280px, 85vw, 320px);
        min-width: clamp(280px, 85vw, 320px);
        max-width: clamp(280px, 85vw, 320px);
    }
}


/* Force the hero to use the tuned inky gradient + subtle cyan glow */
.hero {
  background:
    radial-gradient(70% 100% at 78% 22%, var(--glow-teal) 0%, transparent 60%),
    radial-gradient(65% 95%  at 12% 88%, var(--glow-orange) 0%, transparent 70%),
    radial-gradient(60% 90%  at 72% 40%, var(--glow-cyan) 0%, transparent 65%),
    linear-gradient(transparent 97%, rgba(255,255,255,0.02) 97%),
    linear-gradient(90deg, transparent 97%, rgba(255,255,255,0.02) 97%),
    linear-gradient(180deg, var(--bg-ink) 0%, var(--bg-ink-2) 60%, var(--bg-ink-3) 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== MUSIC PACK BACKGROUNDS ===== */
/* Modern music-themed backgrounds for product pages */

/* Music pack product container with audio waveform background */
.music-pack-container {
    position: relative;
    background:
        /* Audio waveform pattern - sine wave simulation */
        radial-gradient(ellipse 400% 50% at 20% 30%, rgba(32, 198, 183, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 300% 60% at 80% 40%, rgba(246, 182, 69, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 350% 40% at 60% 70%, rgba(32, 198, 183, 0.04) 0%, transparent 50%),
        /* Audio frequency visualization bars */
        linear-gradient(90deg,
            transparent 0%, transparent 1%,
            rgba(32, 198, 183, 0.08) 1%, rgba(32, 198, 183, 0.08) 2%,
            transparent 2%, transparent 4%,
            rgba(246, 182, 69, 0.06) 4%, rgba(246, 182, 69, 0.06) 5%,
            transparent 5%, transparent 7%,
            rgba(32, 198, 183, 0.05) 7%, rgba(32, 198, 183, 0.05) 8%,
            transparent 8%, transparent 11%,
            rgba(242, 132, 46, 0.04) 11%, rgba(242, 132, 46, 0.04) 12%,
            transparent 12%, transparent 15%,
            rgba(32, 198, 183, 0.07) 15%, rgba(32, 198, 183, 0.07) 16%,
            transparent 16%
        ),
        /* Sound wave circular ripples */
        radial-gradient(circle at 15% 25%, rgba(32, 198, 183, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 85% 35%, rgba(246, 182, 69, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 70% 75%, rgba(32, 198, 183, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 25% 80%, rgba(242, 132, 46, 0.04) 0%, transparent 20%),
        /* Base gradient */
        linear-gradient(135deg, var(--bg-ink) 0%, var(--bg-ink-2) 40%, var(--bg-ink-3) 100%);

    background-size:
        100% 100%, /* waveforms */
        100% 100%,
        100% 100%,
        20px 100%, /* frequency bars */
        400px 400px, /* ripples */
        300px 300px,
        500px 500px,
        350px 350px,
        100% 100%; /* base */

    background-position:
        0 0, /* waveforms */
        0 0,
        0 0,
        0 0, /* frequency bars */
        0 0, /* ripples */
        100% 0,
        50% 100%,
        0 50%,
        0 0; /* base */

    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    color: var(--text);
    overflow: hidden;
}

/* Animated audio spectrum overlay */
.music-pack-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Audio equalizer bars effect */
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 3px,
            rgba(32, 198, 183, 0.06) 3px, rgba(32, 198, 183, 0.06) 4px,
            transparent 4px, transparent 8px,
            rgba(246, 182, 69, 0.05) 8px, rgba(246, 182, 69, 0.05) 9px,
            transparent 9px, transparent 13px,
            rgba(32, 198, 183, 0.04) 13px, rgba(32, 198, 183, 0.04) 14px,
            transparent 14px, transparent 18px,
            rgba(242, 132, 46, 0.03) 18px, rgba(242, 132, 46, 0.03) 19px,
            transparent 19px, transparent 24px
        );
    opacity: 0.8;
    animation: musicSpectrum 6s ease-in-out infinite;
    pointer-events: none;
}

/* Floating music note particles */
.music-pack-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Musical note-like dots with varying sizes */
        radial-gradient(circle 2px at 18% 22%, rgba(32, 198, 183, 0.15) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 82% 18%, rgba(246, 182, 69, 0.12) 0%, transparent 100%),
        radial-gradient(circle 2.5px at 65% 42%, rgba(32, 198, 183, 0.1) 0%, transparent 100%),
        radial-gradient(circle 1px at 28% 78%, rgba(242, 132, 46, 0.13) 0%, transparent 100%),
        radial-gradient(circle 1.8px at 88% 82%, rgba(32, 198, 183, 0.08) 0%, transparent 100%),
        radial-gradient(circle 1.2px at 45% 15%, rgba(246, 182, 69, 0.09) 0%, transparent 100%),
        radial-gradient(circle 2.2px at 12% 65%, rgba(32, 198, 183, 0.11) 0%, transparent 100%),
        radial-gradient(circle 1.6px at 75% 88%, rgba(242, 132, 46, 0.07) 0%, transparent 100%);
    background-size: 450px 450px, 350px 350px, 550px 550px, 300px 300px, 280px 280px, 400px 400px, 380px 380px, 320px 320px;
    animation: musicFloat 20s linear infinite;
    pointer-events: none;
}

/* Keyframe animations for music effects */
@keyframes musicSpectrum {
    0%, 100% {
        opacity: 0.3;
        transform: scaleY(1);
    }
    25% {
        opacity: 0.5;
        transform: scaleY(1.02);
    }
    50% {
        opacity: 0.4;
        transform: scaleY(0.98);
    }
    75% {
        opacity: 0.6;
        transform: scaleY(1.01);
    }
}

@keyframes musicFloat {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: translateX(-10px) translateY(-5px) rotate(90deg);
    }
    50% {
        transform: translateX(5px) translateY(-10px) rotate(180deg);
    }
    75% {
        transform: translateX(-5px) translateY(-2px) rotate(270deg);
    }
    100% {
        transform: translateX(0) translateY(0) rotate(360deg);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .music-pack-container::before,
    .music-pack-container::after {
        animation: none;
    }

    .music-pack-container::before {
        opacity: 0.4;
    }
}

/* Music pack specific styling */
.music-pack-container .product-container {
    position: relative;
    z-index: 1;
    padding: 6rem 0;
}

/* Ensure content is readable over the background */
.music-pack-container .product-details h1,
.music-pack-container .product-details p,
.music-pack-container .product-details li {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ===== MUSIC PACK FEATURES & LICENSING ===== */
/* Yellow checkmark features list for music packs */
.features-list {
    margin-bottom: 2rem;
}

.features-list li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.features-list li:before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--accent);
    color: white;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 14px;
}

/* Purchase options styling */
.purchase-options {
    margin-bottom: 2rem;
}

.license-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.license-option:hover {
    background-color: rgba(32, 198, 183, 0.05);
}

.license-option.selected {
    border-color: var(--primary);
    background-color: rgba(32, 198, 183, 0.1);
}

.license-radio {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.license-details {
    flex: 1;
}

.license-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.license-price {
    font-weight: 700;
    color: var(--primary);
}

.license-description {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Remove any accidental color shift on the logo tile itself */
.hero-image::after { background: none; }

/* Hero section responsive typography and layout - default for all pages */
.hero-text h1 {
    font-size: clamp(1.75rem, 3.5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.hero-text p {
    font-size: clamp(0.95rem, 1.2vw, 1.25rem);
    line-height: 1.4;
    margin-bottom: clamp(0.75rem, 1.5vh, 1.5rem);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
}

.hero-image img {
    width: clamp(300px, 35vw, 600px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Index page gets more compact hero typography and layout (NOT on ultrawide) */
@media (max-width: 2559px) {
    body.index-page .hero-text h1 {
        line-height: 1.05;
        margin-bottom: clamp(0.4rem, 0.8vh, 0.8rem);
    }

    body.index-page .hero-text p {
        font-size: clamp(0.9rem, 1.1vw, 1.2rem);
        line-height: 1.35;
        margin-bottom: clamp(0.6rem, 1vh, 1.2rem);
    }

    body.index-page .hero-content {
        gap: clamp(0.75rem, 1.5vw, 1.5rem);
    }

    body.index-page .hero-image img {
        width: clamp(280px, 32vw, 550px);
    }
}

.hero-buttons {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    flex-wrap: wrap;
    margin-top: clamp(0.75rem, 1.5vh, 1.5rem);
}

.hero-buttons a {
    padding: clamp(0.6rem, 0.8vh, 0.8rem) clamp(1rem, 1.2vw, 1.3rem);
    font-size: clamp(0.9rem, 0.95vw, 1rem);
}

/* Index page gets more compact buttons (NOT on ultrawide) */
@media (max-width: 2559px) {
    body.index-page .hero-buttons {
        gap: clamp(0.6rem, 1.2vw, 1.2rem);
        margin-top: clamp(0.6rem, 1vh, 1.2rem);
    }

    body.index-page .hero-buttons a {
        padding: clamp(0.55rem, 0.7vh, 0.75rem) clamp(0.9rem, 1.1vw, 1.2rem);
        font-size: clamp(0.85rem, 0.9vw, 0.95rem);
    }
}

/* Stats cards in hero - make more compact (index page only, NOT on ultrawide) */
@media (max-width: 2559px) {
    body.index-page .hero-section [style*="grid-template-columns: repeat(4, 1fr)"] {
        margin: clamp(1rem, 1.5vh, 2rem) auto !important;
        gap: clamp(0.6rem, 0.8vw, 1rem) !important;
        max-width: 750px !important;
    }

    body.index-page .hero-section [style*="grid-template-columns: repeat(4, 1fr)"] > div {
        padding: clamp(0.75rem, 1vh, 1.25rem) clamp(0.6rem, 0.8vw, 1rem) !important;
    }

    body.index-page .hero-section [style*="grid-template-columns: repeat(4, 1fr)"] > div > div:first-child {
        font-size: clamp(1.6rem, 2vh, 2.2rem) !important;
        margin-bottom: clamp(0.3rem, 0.4vh, 0.5rem) !important;
    }

    body.index-page .hero-section [style*="grid-template-columns: repeat(4, 1fr)"] > div > div:last-child {
        font-size: clamp(0.7rem, 0.75vw, 0.8rem) !important;
    }
}

/* ===== COMING-SOON BANNER & NAVIGATION ===== */
/* Coming-soon banner is in-flow and sticky */
.coming-soon-banner {
  position: sticky;
  top: 100px; /* Match the actual header height */
  z-index: 100; /* Reduced to avoid scrollbar overlap */
  width: calc(100% - var(--scrollbar-width, 0px)); /* Leave space for scrollbar */
  padding: 0.6rem 1rem;
  background: linear-gradient(90deg, #f6b645, #f2842e);
  color: #0b0905;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-right: 0;
}

/* ===== Dot nav (fixed) ===== */
.section-indicator {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  z-index: 950;
}

.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.section-dot:hover {
  transform: scale(1.25);
}

.section-dot.active {
  background: #f6b645;
  box-shadow: 0 0 10px rgba(246, 182, 69, 0.6);
}

.section-indicator .scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 20px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  line-height: 1;
  transition: opacity 1s ease, top 1s ease;
  pointer-events: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0;
}

.section-indicator .scroll-arrow.visible {
  opacity: 0.95;
  pointer-events: auto;
}

.section-indicator .scroll-arrow .arrow-icon {
  display: block;
  color: #f6b645;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(246, 182, 69, 0.8);
  user-select: none;
  pointer-events: none;
  line-height: 1;
  margin: 0;
}

.section-indicator .scroll-arrow .arrow-body {
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, #f6b645 0%, rgba(246, 182, 69, 0.6) 100%);
  box-shadow: 0 0 6px rgba(246, 182, 69, 0.6);
  pointer-events: none;
  animation: bodyGlow 2s ease-in-out infinite;
}

.section-indicator .scroll-arrow-up .arrow-body {
  background: linear-gradient(180deg, #f6b645 0%, rgba(246, 182, 69, 0.6) 100%);
}

.section-indicator .scroll-arrow-down .arrow-body {
  background: linear-gradient(180deg, rgba(246, 182, 69, 0.6) 0%, #f6b645 100%);
}

.section-indicator .scroll-arrow-up:hover {
  animation: floatUpHover 2.5s ease-in-out infinite;
}

.section-indicator .scroll-arrow-down:hover {
  animation: floatDownHover 2.5s ease-in-out infinite;
}

@keyframes floatUpHover {
  0% {
    transform: translateX(-50%) translateY(0) scale(1.15);
  }
  50% {
    transform: translateX(-50%) translateY(-3px) scale(1.15);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1.15);
  }
}

@keyframes floatDownHover {
  0% {
    transform: translateX(-50%) translateY(0) scale(1.15);
  }
  50% {
    transform: translateX(-50%) translateY(3px) scale(1.15);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1.15);
  }
}

.section-indicator .scroll-arrow:hover .arrow-icon {
  text-shadow: 0 0 12px rgba(246, 182, 69, 1);
}

.section-indicator .scroll-arrow-up {
  animation: floatUp 2.5s ease-in-out 0s infinite;
}

.section-indicator .scroll-arrow-down {
  animation: floatDown 2.5s ease-in-out 0s infinite;
}

.section-indicator .scroll-arrow-up .arrow-icon {
  animation: arrowGlow 2s ease-in-out infinite;
}

.section-indicator .scroll-arrow-down .arrow-icon {
  animation: arrowGlow 2s ease-in-out infinite;
}

@keyframes floatUp {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes floatDown {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(3px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes arrowGlow {
  0%, 100% {
    text-shadow: 0 0 4px rgba(246, 182, 69, 0.5);
  }
  50% {
    text-shadow: 0 0 12px rgba(246, 182, 69, 1);
  }
}

@keyframes bodyGlow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(246, 182, 69, 0.5);
  }
  50% {
    box-shadow: 0 0 10px rgba(246, 182, 69, 1);
  }
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }

  .section-indicator .scroll-arrow-up,
  .section-indicator .scroll-arrow-down,
  .section-indicator .scroll-arrow-up:hover,
  .section-indicator .scroll-arrow-down:hover,
  .section-indicator .scroll-arrow .arrow-body,
  .section-indicator .scroll-arrow .arrow-icon {
    animation: none !important;
    transform: translateX(-50%) !important;
  }

  .section-indicator .scroll-arrow-up:hover,
  .section-indicator .scroll-arrow-down:hover {
    transform: translateX(-50%) scale(1.15) !important;
  }
}

/* Hero with optional grid overlay */
.hero { position: relative; overflow: clip; }

/* Adjust hero content positioning for better centering */
.hero-section .container {
    justify-content: center !important;
    transform: translateY(15px) !important;
}

/* Show subtle grid that fades at the edges */
.hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity: var(--grid-opacity);

  /* Two perpendicular line sets make a square grid */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);

  /* Soft vignette so lines fade near the edges */
  -webkit-mask-image: radial-gradient(
      120% 120% at 60% 45%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.85) 70%,
      rgba(0,0,0,0) 98%
  );
          mask-image: radial-gradient(
      120% 120% at 60% 45%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.85) 70%,
      rgba(0,0,0,0) 98%
  );

  mix-blend-mode: screen;
}

/* ===== MUSIC PACK CAROUSEL BACKGROUND ===== */
/* Apply the same beautiful background as the product section */
.music-pack-carousel {
    position: relative;
    background:
        /* Audio waveform pattern - sine wave simulation */
        radial-gradient(ellipse 400% 50% at 20% 30%, rgba(32, 198, 183, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 300% 60% at 80% 40%, rgba(246, 182, 69, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 350% 40% at 60% 70%, rgba(32, 198, 183, 0.04) 0%, transparent 50%),
        /* Audio frequency visualization bars */
        linear-gradient(90deg,
            transparent 0%, transparent 1%,
            rgba(32, 198, 183, 0.08) 1%, rgba(32, 198, 183, 0.08) 2%,
            transparent 2%, transparent 4%,
            rgba(246, 182, 69, 0.06) 4%, rgba(246, 182, 69, 0.06) 5%,
            transparent 5%, transparent 7%,
            rgba(32, 198, 183, 0.05) 7%, rgba(32, 198, 183, 0.05) 8%,
            transparent 8%, transparent 11%,
            rgba(242, 132, 46, 0.04) 11%, rgba(242, 132, 46, 0.04) 12%,
            transparent 12%, transparent 15%,
            rgba(32, 198, 183, 0.07) 15%, rgba(32, 198, 183, 0.07) 16%,
            transparent 16%
        ),
        /* Sound wave circular ripples */
        radial-gradient(circle at 15% 25%, rgba(32, 198, 183, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 85% 35%, rgba(246, 182, 69, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 70% 75%, rgba(32, 198, 183, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 25% 80%, rgba(242, 132, 46, 0.04) 0%, transparent 20%),
        /* Base gradient */
        linear-gradient(135deg, var(--bg-ink) 0%, var(--bg-ink-2) 40%, var(--bg-ink-3) 100%);

    background-size:
        100% 100%, /* waveforms */
        100% 100%,
        100% 100%,
        20px 100%, /* frequency bars */
        400px 400px, /* ripples */
        300px 300px,
        500px 500px,
        350px 350px,
        100% 100%; /* base */

    background-position:
        0 0, /* waveforms */
        0 0,
        0 0,
        0 0, /* frequency bars */
        0 0, /* ripples */
        100% 0,
        50% 100%,
        0 50%,
        0 0; /* base */

    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    color: var(--text);
    overflow: hidden;
    padding: 4rem 0;
}

/* Animated audio spectrum overlay */
.music-pack-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Audio equalizer bars effect */
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 3px,
            rgba(32, 198, 183, 0.06) 3px, rgba(32, 198, 183, 0.06) 4px,
            transparent 4px, transparent 8px,
            rgba(246, 182, 69, 0.05) 8px, rgba(246, 182, 69, 0.05) 9px,
            transparent 9px, transparent 13px,
            rgba(32, 198, 183, 0.04) 13px, rgba(32, 198, 183, 0.04) 14px,
            transparent 14px, transparent 18px,
            rgba(242, 132, 46, 0.03) 18px, rgba(242, 132, 46, 0.03) 19px,
            transparent 19px, transparent 24px
        );
    opacity: 0.8;
    animation: musicSpectrum 6s ease-in-out infinite;
    pointer-events: none;
}

/* Floating music note particles */
.music-pack-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Musical note-like dots with varying sizes */
        radial-gradient(circle 2px at 18% 22%, rgba(32, 198, 183, 0.15) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 82% 18%, rgba(246, 182, 69, 0.12) 0%, transparent 100%),
        radial-gradient(circle 2.5px at 65% 42%, rgba(32, 198, 183, 0.1) 0%, transparent 100%),
        radial-gradient(circle 1px at 28% 78%, rgba(242, 132, 46, 0.13) 0%, transparent 100%),
        radial-gradient(circle 1.8px at 88% 82%, rgba(32, 198, 183, 0.08) 0%, transparent 100%),
        radial-gradient(circle 1.2px at 45% 15%, rgba(246, 182, 69, 0.09) 0%, transparent 100%),
        radial-gradient(circle 2.2px at 72% 58%, rgba(32, 198, 183, 0.11) 0%, transparent 100%),
        radial-gradient(circle 1.6px at 35% 65%, rgba(242, 132, 46, 0.07) 0%, transparent 100%);
    background-size: 600px 600px, 450px 450px, 800px 800px, 350px 350px, 500px 500px, 400px 400px, 700px 700px, 550px 550px;
    animation: musicFloat 15s linear infinite;
    pointer-events: none;
}

/* Ensure carousel content is readable over the beautiful background */
.music-pack-carousel .carousel-header h2,
.music-pack-carousel .carousel-header p,
.music-pack-carousel .container {
    position: relative;
    z-index: 1;
}

/* ===== PRODUCT PAGE STYLING ===== */
/* Product image styling */
.product-image img {
    max-width: 666px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Product grid layout - image column smaller than text */
.product-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 2rem;
    align-items: center;
}

/* Responsive adjustments for product grid */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===== DOCS-ONLY DARK THEME (SCOPED) ===== */
.docs-page {
  color: var(--text);
  background: var(--bg-ink, #0b0d11);
}
.docs-page .doc-container,
.docs-page .doc-header,
.docs-page .doc-content,
.docs-page .doc-footer {
  color: var(--text);
}

/* Code / pre */
.docs-page pre,
.docs-page code {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 6px;
}

/* Tables */
.docs-page table { border-collapse: collapse; }
.docs-page th, .docs-page td { border: 1px solid rgba(255,255,255,.12); }
.docs-page th { background: rgba(255,255,255,.08); }
.docs-page td { background: rgba(255,255,255,.03); }

/* Blockquotes */
.docs-page blockquote {
  border-left: 4px solid var(--primary, #20C6B7);
  color: rgba(255,255,255,.9);
  padding-left: .9rem;
}

/* Text utility classes */
.text-nowrap {
  white-space: nowrap;
}

/* Force hide mobile navigation on desktop ONLY - mobile-fix.css handles mobile */
@media (min-width: 769px) {
  .mobile-nav-overlay,
  .mobile-nav-menu,
  #mobile-nav-overlay,
  #mobile-nav-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transform: scale(0) !important;
  }
}