.contact-page{
    padding:0;
}

.contact-hero{
    position:relative;
    overflow:hidden;

    min-height:360px;

    display:flex;
    align-items:center;

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

    background:
        radial-gradient(circle at top right, rgba(232,75,164,.16), transparent 34%),
        linear-gradient(135deg, #11131c 0%, #171927 48%, #10131d 100%);
}

.contact-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(90deg, rgba(8,10,16,.92), rgba(8,10,16,.62)),
        url('/assets/img/beat/hero-bg.jpg') center/cover no-repeat;

    opacity:.92;
}

.contact-hero-content{
    position:relative;
    z-index:2;

    max-width:760px;

    padding:90px 60px;
}

.contact-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 16px;

    border-radius:999px;

    background:rgba(232,75,164,.12);

    border:1px solid rgba(232,75,164,.18);

    color:#e84ba4;

    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.contact-hero-content h1{
    margin-top:24px;

    font-size:clamp(48px, 6vw, 82px);

    line-height:1;

    font-weight:950;

    color:#fff;
}

.contact-hero-content p{
    margin-top:22px;

    max-width:560px;

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

    font-size:17px;

    line-height:1.9;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);

    gap:22px;

    padding:42px 56px;
}

.contact-card{
    padding:28px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

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

    box-shadow:
        0 24px 70px rgba(0,0,0,.24);

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

.contact-card:hover{
    transform:translateY(-5px);

    border-color:rgba(232,75,164,.22);
}

.contact-card-head{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.contact-card-head span{
    width:58px;
    height:58px;

    border-radius:18px;

    display:grid;
    place-items:center;

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

    color:#fff;

    font-size:1.2rem;

    flex-shrink:0;
}

.contact-card-head h3{
    color:#fff;

    font-size:1.08rem;

    margin-bottom:8px;
}

.contact-card-head p{
    color:rgba(255,255,255,.6);

    line-height:1.7;

    font-size:.9rem;
}

.contact-link,
.contact-static{
    display:block;

    margin-top:24px;

    color:#fff;

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

    word-break:break-word;
}

.contact-link:hover{
    color:#e84ba4;
}

.contact-form-section{
    padding:0 56px 56px;
}

.contact-form-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;

    gap:30px;

    padding:34px;

    border-radius:34px;

    background:
        radial-gradient(circle at top right, rgba(232,75,164,.12), transparent 28%),
        rgba(16,18,28,.92);

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.34);
}

.contact-form-copy{
    padding:12px;
}

.contact-form-copy span{
    color:#e84ba4;

    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.contact-form-copy h2{
    margin-top:18px;

    color:#fff;

    font-size:2.5rem;

    line-height:1.1;
}

.contact-form-copy p{
    margin-top:18px;

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

    line-height:1.9;
}

.contact-features{
    margin-top:32px;

    display:grid;
    gap:14px;
}

.contact-features div{
    display:flex;
    align-items:center;
    gap:12px;

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

    font-weight:650;
}

.contact-features i{
    color:#e84ba4;
}

.contact-form{
    display:grid;
    gap:18px;
}

.form-group{
    display:grid;
    gap:10px;
}

.form-group label{
    color:#fff;

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

.form-group input,
.form-group textarea{
    width:100%;

    border:none;
    outline:none;

    padding:16px 18px;

    border-radius:18px;

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

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

    color:#fff;

    font-size:.96rem;

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

.form-group input:focus,
.form-group textarea:focus{
    border-color:rgba(232,75,164,.32);

    background:rgba(255,255,255,.07);
}

.contact-submit-btn{
    height:56px;

    border:none;

    border-radius:999px;

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

    color:#fff;

    font-size:13px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;

    cursor:pointer;

    box-shadow:
        0 18px 40px rgba(139,92,255,.22);

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

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

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

@media(max-width:1180px){

    .contact-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .contact-form-card{
        grid-template-columns:1fr;
    }

}

@media(max-width:720px){

    .contact-hero-content{
        padding:70px 24px;
    }

    .contact-grid{
        grid-template-columns:1fr;

        padding:24px 18px;
    }

    .contact-form-section{
        padding:0 18px 24px;
    }

    .contact-form-card{
        padding:24px;
        border-radius:24px;
    }

    .contact-form-copy h2{
        font-size:2rem;
    }

}