img {
    max-width: 100%;
    height: auto;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* This prevents horizontal scrolling */
    background: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1509316785289-025f5b846b35?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

.gold {
    color: #d4a368;
}

.gold-bg {
    background: #d4a368;
}

.spotify-bg {
    background: #1DB954;
}

.section-border {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.glass {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

/* =========================================
   Mobile Responsiveness Overrides
   ========================================= */

@media (max-width: 768px) {

    /* 1. Add bottom padding to body so the sticky Mobile CTA doesn't cover content */
    body {
        padding-bottom: 80px;
    }

    /* 2. Reduce massive section paddings for smaller screens */
    section.py-24,
    .py-20 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* 3. Scale down overly large headings to prevent awkward wrapping */
    h1.text-5xl {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    h2.text-4xl,
    h2.text-5xl {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    /* 4. Force language buttons in the hero to stack neatly on small screens */
    .max-w-7xl .flex-wrap>a.glass {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* 5. Ensure footer links wrap nicely and don't push off-screen */
    footer .flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* 6. Adjust grid gap for better breathing room on small screens */
    .grid {
        gap: 1.5rem !important;
    }
}

/* Extra tweak for very small devices (like older iPhones) */
@media (max-width: 380px) {
    h1.text-5xl {
        font-size: 2.25rem !important;
    }

    /* Make details/summary text slightly smaller to fit screen bounds */
    details summary {
        font-size: 0.95rem !important;
    }
}