/* =====================================================
   PROMIX ENTERTAINMENT STUDIO
   GLOBAL VARIABLES
===================================================== */

:root {

    --purple-dark: #0b0115;
    --purple-deep: #160025;
    --purple-900: #24033d;
    --purple-800: #36065b;
    --purple-700: #4d0a78;
    --purple-600: #68129b;
    --purple-500: #8520c2;
    --purple-400: #a83be0;
    --purple-300: #c875f1;
    --purple-200: #dda5fa;

    --gold: #d4af37;
    --gold-light: #f5d76e;

    --white: #ffffff;
    --text: #f8f3ff;
    --muted: #c6b6d4;

    --border: rgba(255,255,255,.14);

    --shadow:
        0 20px 60px rgba(0,0,0,.45);

    --radius:
        20px;

    --max-width:
        1200px;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {
    margin: 0;

    color: var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(184, 68, 255, .35),
            transparent 25%
        ),

        radial-gradient(
            circle at 10% 40%,
            rgba(126, 32, 190, .25),
            transparent 30%
        ),

        radial-gradient(
            circle at 70% 75%,
            rgba(105, 18, 155, .25),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #0b0115 0%,
            #1b0230 20%,
            #3d075f 45%,
            #68129b 65%,
            #26043f 82%,
            #0b0115 100%
        );

    background-attachment: fixed;

    min-height: 100vh;
}


img {

    width: 100%;

    display: block;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width:
        min(
            92%,
            var(--max-width)
        );

    margin:
        auto;

}


/* =====================================================
   HEADER
===================================================== */

.site-header  {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(17, 1, 30, .45);

    backdrop-filter: blur(20px);

    border-bottom:
        1px solid rgba(255,255,255,.12);
}


.nav-container {
    min-height: 95px;

    display: flex;
    align-items: center;
}


.logo {
    width: 100px;
    height: auto;

    object-fit: contain;
}


.main-nav {

    display:
        flex;

    align-items:
        center;
    margin-left: auto;
    gap:
        26px;

}


.main-nav a {

    color:
        #ddd;

    font-size:
        .9rem;

    font-weight:
        700;

    transition:
        .2s ease;
}


.main-nav a:hover {

    color:
        var(--gold);

}


.nav-button {

    padding:
        11px 18px;

    border:
        1px solid var(--gold);

    border-radius:
        999px;

    color:
        var(--gold) !important;

}


.menu-toggle {

    display:
        none;

    background:
        none;

    border:
        0;

    color:
        white;

    font-size:
        1.8rem;
		
}


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

.hero {
    min-height: 700px;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 40%,
            rgba(190, 70, 255, .45),
            transparent 35%
        ),

        linear-gradient(
            120deg,
            rgba(16, 0, 29, .85),
            rgba(61, 7, 95, .55),
            rgba(118, 20, 168, .30)
        ),

        url("assets/hero.jpg")
        center/cover no-repeat;
}

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(124,58,237,.25),
            transparent 40%
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    padding-top:
        80px;

    max-width:
        850px;

}


.eyebrow {

    color:
        var(--gold);

    font-size:
        .78rem;

    font-weight:
        800;

    letter-spacing:
        .22em;

    margin-bottom:
        15px;

}


.hero h1 {
    font-size: clamp(
        4rem,
        9vw,
        7rem
    );

    line-height: .9;

    color: var(--gold-light);

    font-weight: 900;

    letter-spacing: -4px;

    margin: 15px 0;
}


.hero h1 span {

    display:
        block;

    color:
        var(--gold);

}


.hero-text {

    max-width:
        700px;

    color:
        #ddd;

    font-size:
        1.15rem;

}


.hero-buttons {

    display:
        flex;

    gap:
        15px;

    margin-top:
        35px;

}

.hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: 50px;

    border-radius: 50%;

    background:
        rgba(190,70,255,.25);

    filter: blur(80px);

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -150px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(112,25,175,.30);

    filter: blur(80px);

    pointer-events: none;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px 25px;

    border-radius:
        999px;

    font-weight:
        800;

    border:
        1px solid transparent;

    transition:
        .2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-gold {

    background:
        var(--gold);

    color:
        #080808;

}


.btn-gold:hover {

    background:
        var(--gold-light);

}


.btn-outline {

    border:
        1px solid rgba(255,255,255,.3);

    color:
        white;

}


.btn-outline:hover {

    border-color:
        var(--gold);

    color:
        var(--gold);

}



.music-player {
    display: flex;

    gap: 20px;

    padding: 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(91,18,137,.75),
            rgba(20,2,35,.9)
        );

    border:
        1px solid
        rgba(255,255,255,.14);
}


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

.section {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            rgba(21, 2, 37, .92),
            rgba(76, 11, 115, .80)
        );
}


.dark-section {
    background:
        linear-gradient(
            135deg,
            #100019,
            #30044f,
            #5e0e8d
        );
}


.purple-section {
    background:
        linear-gradient(
            135deg,
            #4b0873,
            #7d1bb3,
            #a638d7
        );
}

.darkest-section {
    background:
        linear-gradient(
            135deg,
            #08000f,
            #160022
        );
}
.section-heading {

    max-width:
        750px;

    margin-bottom:
        55px;

}


.section-heading h2 {

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height:
        1.05;

    margin-bottom:
        18px;

}


.section-heading p {

    color:
        var(--muted);

}


.section-heading.light p {

    color:
        #ddd;

}

.gallery {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}

.gallery img {
    width: 100%;

    height: 230px;

    object-fit: cover;

    border-radius: 14px;
}
/* =====================================================
   SERVICE GRID
===================================================== */

.service-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        22px;

}


.service-card {
    padding: 28px;

    min-height: 230px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(126, 28, 177, .75),
            rgba(35, 4, 58, .95)
        );

    border:
        1px solid rgba(214, 139, 255, .25);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


.service-card:hover {
    transform: translateY(-6px);

    border-color:
        var(--gold);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);
}


.service-icon {

    font-size:
        2rem;

    margin-bottom:
        20px;

}


.service-card h3 {

    font-size:
        1.4rem;

    margin-bottom:
        10px;

}


.service-card p {

    color:
        var(--muted);

    margin-bottom:
        25px;

}


.service-card a {

    color:
        var(--gold);

    font-weight:
        700;

}


/* =====================================================
   ARTISTS
===================================================== */

.artist-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        24px;

}


.artist-card {
    position: relative;

    height: 380px;

    overflow: hidden;

    border-radius: 16px;

    background: var(--purple-dark);
}


.artist-image {

    height:
        400px;

    overflow:
        hidden;

    object-fit: cover;

    transition: transform .4s ease;
}


.artist-image img {

    height:
        100%;

    object-fit:
        cover;

    transition:
        .4s ease;

}


.artist-card:hover img {

    transform:
        scale(1.05);

}

.artist-card::after {
    content: "";

    position: absolute;

    inset: 35% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(9,0,15,.95)
        );
}
.artist-info {

    padding:
        25px;

}


.artist-info span {

    color:
        var(--gold);

    font-size:
        .72rem;

    letter-spacing:
        .15em;

    font-weight:
        800;

}


.artist-info h3 {

    font-size:
        1.6rem;

    margin:
        8px 0;

}


.artist-info p {

    color:
        var(--muted);

}


.artist-info a {

    display:
        inline-block;

    margin-top:
        18px;

    color:
        var(--gold);

    font-weight:
        700;

}


.artist-placeholder {

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        30px;

    background:

        radial-gradient(
            circle,
            rgba(124,58,237,.3),
            transparent 60%
        );

}


/* =====================================================
   STUDIO
===================================================== */

.studio-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

}


.studio-image {

    border-radius:
        var(--radius);

    overflow:
        hidden;

    border:
        1px solid var(--border);

}


.studio-image img {

    min-height:
        550px;

    object-fit:
        cover;

}


.studio-content h2 {

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.3rem
        );

    line-height:
        1;

    margin-bottom:
        25px;

}


.studio-content > p {

    color:
        var(--muted);

}


.feature-list {

    margin:
        30px 0;

    display:
        grid;

    gap:
        20px;

}


.feature-list div {

    display:
        grid;

    gap:
        4px;

    padding:
        16px 0;

    border-bottom:
        1px solid var(--border);

}


.feature-list strong {

    color:
        var(--gold);

}


.feature-list span {

    color:
        var(--muted);

}


/* =====================================================
   EVENTS
===================================================== */

.event-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        20px;

}


.event-card {

    padding:
        30px;

    border:
        1px solid rgba(255,255,255,.14);

    background:
        rgba(0,0,0,.25);

    border-radius:
        var(--radius);

}


.event-number {

    color:
        var(--gold);

    font-weight:
        900;

    font-size:
        1.2rem;

    margin-bottom:
        40px;

}


.event-card h3 {

    margin-bottom:
        12px;

}


.event-card p {

    color:
        #c8c4d0;

}


/* =====================================================
   DJ PACKAGES
===================================================== */

.pricing-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        24px;

}


.package-card {

    padding:
        35px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        #0d0c11;

}


.package-card.featured {

    border-color:
        var(--gold);

    box-shadow:
        0 0 50px rgba(212,175,55,.10);

}


.package-label {

    color:
        var(--gold);

    font-size:
        .75rem;

    letter-spacing:
        .15em;

    font-weight:
        900;

}


.package-card h3 {

    font-size:
        1.8rem;

    margin:
        15px 0;

}


.package-card p {

    color:
        var(--muted);

}


.package-card ul {

    list-style:
        none;

    margin:
        25px 0;

}


.package-card li {

    padding:
        9px 0;

    border-bottom:
        1px solid var(--border);

}


.package-card li::before {

    content:
        "✓";

    color:
        var(--gold);

    margin-right:
        10px;

}


/* =====================================================
   EQUIPMENT
===================================================== */

.equipment-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        20px;

}


.equipment-item {

    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        #0e0d12;

}


.equipment-item span {

    color:
        var(--gold);

    font-weight:
        900;

}


.equipment-item h3 {

    margin:
        15px 0 8px;

}


.equipment-item p {

    color:
        var(--muted);

}


.center-button {

    text-align:
        center;

    margin-top:
        45px;

}


/* =====================================================
   MUSIC
===================================================== */

.music-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        25px;

}


.music-card {

    display:
        grid;

    grid-template-columns:
        220px 1fr;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    overflow:
        hidden;

    background:
        #0d0c11;

}


.music-cover img {

    height:
        100%;

    object-fit:
        cover;

}


.music-info {

    padding:
        30px;

}


.music-info span {

    color:
        var(--gold);

    font-size:
        .7rem;

    letter-spacing:
        .15em;

    font-weight:
        900;

}


.music-info h3 {

    font-size:
        1.5rem;

    margin:
        8px 0;

}


.music-info p {

    color:
        var(--muted);

}


.music-links {

    display:
        flex;

    gap:
        15px;

    margin-top:
        20px;

}


.music-links a {

    color:
        var(--gold);

    font-weight:
        700;

}


/* =====================================================
   CTA
===================================================== */

.cta-section {

    text-align:
        center;

    padding:
        110px 20px;

    background:

        radial-gradient(
            circle at center,
            rgba(124,58,237,.35),
            transparent 55%
        ),

        #08070a;

}


.cta-section h2 {

    max-width:
        850px;

    margin:
        auto auto 20px;

    font-size:
        clamp(
            2.5rem,
            6vw,
            5rem
        );

    line-height:
        1;

}


.cta-section p:not(.eyebrow) {

    max-width:
        650px;

    margin:
        0 auto 30px;

    color:
        var(--muted);

}


/* =====================================================
   CONTACT
===================================================== */

.contact-layout {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        70px;

}


.contact-info h2 {

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.3rem
        );

    line-height:
        1;

    margin-bottom:
        20px;

}


.contact-info > p {

    color:
        var(--muted);

}


.contact-details {

    margin-top:
        40px;

    display:
        grid;

    gap:
        22px;

}


.contact-details div {

    display:
        grid;

}


.contact-details strong {

    color:
        var(--gold);

}


.contact-details span {

    color:
        #ccc;

}


.booking-form {

    padding:
        35px;

    background:
        #0d0c11;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

}


.form-group {

    margin-bottom:
        18px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        .85rem;

    font-weight:
        700;

}


.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    border:
        1px solid rgba(255,255,255,.13);

    background:
        #07070a;

    color:
        white;

    border-radius:
        12px;

    padding:
        13px 14px;

    outline:
        none;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        var(--gold);

}


.form-message {

    margin-top:
        15px;

    color:
        var(--gold);

}


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

.site-footer {

    background:
        #030303;

    border-top:
        1px solid var(--border);

    padding-top:
        5px;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        20px;

    padding-bottom:
        1px;

}


.footer-logo {

    width:
        100px;

    margin-bottom:
        10px;

}


.footer-grid p {

    color:
        var(--muted);

    max-width:
        300px;

}


.footer-grid h4 {

    color:
        var(--gold);

    margin-bottom:
        10px;

}


.footer-grid a {

    display:
        block;

    color:
        #bbb;

    margin-bottom:
        10px;

}


.footer-grid a:hover {

    color:
        var(--gold);

}


.footer-bottom {

    border-top:
        1px solid var(--border);

    text-align:
        center;

    padding:
        5px;

    color:
        #777;

    font-size:
        .85rem;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {


    .menu-toggle {

        display:
            block;

    }


    .main-nav {

        position:
            absolute;

        top:
            82px;

        left:
            0;

        width:
            100%;

        padding:
            25px;

        background:
            #08070a;

        flex-direction:
            column;

        align-items:
            flex-start;

        display:
            none;

    }


    .main-nav.active {

        display:
            flex;

    }


    .service-grid,
    .artist-grid,
    .pricing-grid,
    .equipment-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .event-grid {
    background:
        linear-gradient(
            100deg,
            #260343,
            #7e18b5,
            #a83bdd,
            #410765
        );

    border-radius: 20px;

    overflow: hidden;

    padding: 50px;
}


    .studio-layout,
    .contact-layout {

        grid-template-columns:
            1fr;

    }


    .music-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 600px) {


    .section {

        padding:
            80px 0;

    }


    .hero {

        min-height:
            90vh;

    }


    .hero h1 {

        font-size:
            3.2rem;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .service-grid,
    .artist-grid,
    .event-grid,
    .pricing-grid,
    .equipment-grid {

        grid-template-columns:
            1fr;

    }


    .studio-image img {

        min-height:
            350px;

    }


    .music-card {

        grid-template-columns:
            1fr;

    }


    .music-cover img {

        height:
            300px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}