:root {
    --pink: #e84ba4;
    --purple: #8b5cff;
    --blue: #4c88ff;
}

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

.beat-header {
    height: 76px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: sticky;
    top: 0;
    z-index: 100;

    background:
        linear-gradient(
            180deg,
            rgba(8,10,18,.88),
            rgba(5,7,12,.72)
        );

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

    backdrop-filter: blur(24px);

    transition:
        height .28s ease,
        background .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.beat-header::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 15% 50%, rgba(232,75,164,.08), transparent 22%),
        radial-gradient(circle at 85% 40%, rgba(139,92,255,.08), transparent 24%);

    pointer-events:none;
}

.beat-header.is-scrolled {
    height: 70px;

    background:
        linear-gradient(
            180deg,
            rgba(4,5,9,.96),
            rgba(5,7,12,.92)
        );

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

    border-color: rgba(255,255,255,.12);
}

.brand {
    position:relative;
    z-index:2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 26px;
    font-weight: 900;
    letter-spacing: .22em;

    color: #fff;
    text-decoration: none;
}

.brand span {
    color: #fff;
}

.brand strong {
    color: var(--pink);
}

.brand-mark {
    width: 40px;
    height: 40px;

    border-radius: 14px;

    display: grid;
    place-items: center;

    letter-spacing: 0;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--purple)
        );

    box-shadow:
        0 0 28px rgba(232,75,164,.35),
        0 10px 30px rgba(139,92,255,.22);

    position:relative;
    overflow:hidden;
}

.brand-mark::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.28),
            transparent 60%
        );

    pointer-events:none;
}

.main-nav {
    position:relative;
    z-index:2;

    display: flex;
    align-items: center;
    gap: 28px;

    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;

    color: rgba(255,255,255,.76);
}

.main-nav a {
    position:relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: inherit;
    text-decoration: none;

    transition:
        color .22s ease,
        transform .22s ease;
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--purple)
        );

    transition:width .22s ease;
}

.main-nav a:hover {
    color: #fff;
    transform: translateY(-1px);
}

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

.main-nav i {
    color: var(--pink);
    font-size: 13px;
}

.header-auth{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:10px;
}

.header-auth form {
    margin: 0;
}

.header-auth button {
    cursor: pointer;
    border: 0;
}

.header-btn {
    height: 42px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--purple)
        );

    box-shadow:
        0 0 30px rgba(232,75,164,.22),
        0 14px 34px rgba(139,92,255,.16);

    color: #fff;
    text-decoration: none;

    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        opacity .22s ease;
}

.header-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 34px rgba(232,75,164,.3),
        0 18px 42px rgba(139,92,255,.24);
}

.header-btn-ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
}

.header-btn-ghost:hover {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.09);
}

.mobile-toggle {
    display: none;

    width: 44px;
    height: 44px;

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

    border-radius: 14px;

    cursor: pointer;

    transition:
        background .22s ease,
        border-color .22s ease;
}

.mobile-toggle:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.24);
}

.mobile-toggle span {
    display: block;

    width: 18px;
    height: 2px;

    background: #fff;

    margin: 4px auto;

    border-radius: 99px;
}

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

.footer-premium{
    position:relative;
    overflow:hidden;

    margin-top:26px;
    padding:54px 34px 26px;

    border-radius:34px;

    background:
        radial-gradient(circle at 12% 12%, rgba(232,75,164,.16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(139,92,255,.16), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.footer-premium::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;
    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.03),
            rgba(255,255,255,.08)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}

.footer-premium::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            transparent 20%
        );

    pointer-events:none;
}

.footer-orb{
    position:absolute;

    width:280px;
    height:280px;

    border-radius:999px;

    filter:blur(34px);
    opacity:.34;

    pointer-events:none;
}

.footer-orb-one{
    left:-90px;
    bottom:-120px;
    background:#e84ba4;
}

.footer-orb-two{
    right:-120px;
    top:-110px;
    background:#8b5cff;
}

.footer-inner{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.45fr .8fr .9fr 1fr;

    gap:34px;
}

.footer-col{
    min-width:0;
}

.footer-brand-col{
    padding-right:16px;
}

.footer-brand{
    display:inline-flex;
    margin-bottom:20px;
}

.footer-description{
    max-width:420px;

    color:rgba(255,255,255,.68);

    line-height:1.75;
    font-size:.98rem;
}

.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:22px;
}

.footer-badges span{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 13px;

    border-radius:999px;

    background:rgba(255,255,255,.055);

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

    color:rgba(255,255,255,.78);

    font-size:.84rem;
    font-weight:700;
}

.footer-badges i{
    color:#e84ba4;
}

.footer-socials{
    display:flex;
    gap:12px;

    margin-top:24px;
}

.footer-socials a{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:rgba(255,255,255,.06);

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

    color:#fff;
    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.footer-socials a:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #e84ba4,
            #8b5cff
        );

    box-shadow:
        0 16px 34px rgba(139,92,255,.28);
}

.footer-col h4{
    color:#fff;

    font-size:1rem;
    font-weight:900;

    margin-bottom:18px;
}

.footer-col h4::after{
    content:"";

    display:block;

    width:34px;
    height:3px;

    margin-top:10px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #e84ba4,
            #8b5cff
        );
}

.footer-col a,
.footer-contact-col p{
    position:relative;

    display:flex;
    align-items:center;
    gap:10px;

    width:max-content;
    max-width:100%;

    color:rgba(255,255,255,.66);

    text-decoration:none;

    font-size:.95rem;
    font-weight:650;
    line-height:1.4;

    margin-bottom:13px;

    transition:
        color .22s ease,
        transform .22s ease;
}

.footer-col a::before{
    content:"";

    position:absolute;
    left:-10px;
    top:50%;

    width:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #e84ba4,
            #8b5cff
        );

    opacity:0;

    transition:
        width .25s ease,
        opacity .25s ease;

    transform:translateY(-50%);
}

.footer-col a:hover::before{
    width:6px;
    opacity:1;
}

.footer-col a i,
.footer-contact-col p i{
    width:18px;
    color:rgba(232,75,164,.85);
}

.footer-col a:hover{
    color:#fff;
    transform:translateX(4px);
}

.footer-contact-col p{
    width:100%;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,.035);

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

    transition:
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.footer-contact-col p:hover{
    transform:translateY(-2px);

    background:rgba(255,255,255,.05);

    border-color:rgba(255,255,255,.12);
}

.footer-contact-col p span{
    word-break:break-word;
}

.footer-bottom{
    position:relative;
    z-index:2;

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

    gap:18px;

    margin-top:42px;
    padding-top:22px;

    min-height:64px;

    border-top:1px solid rgba(255,255,255,.09);

    color:rgba(255,255,255,.56);

    font-size:.9rem;
}

.footer-bottom p,
.footer-bottom span{
    display:flex;
    align-items:center;
    gap:8px;
}

.footer-bottom span{
    color:rgba(255,255,255,.7);
    font-weight:700;
}

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

@media(max-width: 1200px){

    .mobile-toggle{
        display:block;
    }

    .main-nav{
        position:absolute;

        top:82px;
        left:18px;
        right:18px;

        display:none;

        padding:18px;

        border-radius:22px;

        background:rgba(6,8,14,.96);

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

        box-shadow:
            0 30px 80px rgba(0,0,0,.55);

        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .main-nav.is-open{
        display:flex;
    }

}

@media(max-width:1080px){

    .footer-inner{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:860px){

    .header-auth{
        width:100%;
        flex-direction:column;
    }

    .header-auth form{
        width:100%;
    }

    .header-auth .header-btn{
        width:100%;
    }

}

@media(max-width:720px){

    .beat-header{
        padding:0 16px;
    }

    .brand{
        font-size:19px;
        letter-spacing:.14em;
    }

    .brand-mark{
        width:34px;
        height:34px;
    }

    .header-btn{
        display:none;
    }

    .footer-premium{
        padding:38px 20px 22px;
        border-radius:26px;
    }

    .footer-inner{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-brand-col{
        padding-right:0;
    }

    .footer-socials{
        margin-top:20px;
    }

    .footer-badges{
        margin-top:18px;
    }

    .footer-contact-col p{
        width:100%;
    }

    .footer-col a{
        width:100%;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.brand-logo{
    width:auto;
    height:60px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 12px rgba(232,75,164,.45))
        drop-shadow(0 0 20px rgba(76,136,255,.35));
}

.brand-text{
    display:flex;
    align-items:baseline;
    gap:2px;
    font-family:'Inter',sans-serif;
    font-weight:900;
    letter-spacing:.04em;
    font-size:1.15rem;
    color:#fff;
}

.brand-text strong{
    color:#c84dff;
    font-weight:900;
}