/*
|--------------------------------------------------------------------------
| ToolVerse - Contact Page
|--------------------------------------------------------------------------
| Scope:
| - ONLY .tv-contact-page and children
| - Fully responsive
| - Matches ToolVerse design system
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   PAGE
   ========================================================================== */

.tv-contact-page {
    width: 100%;

    color:
        var(--tv-color-text);

    background:
        #ffffff;
}


/* ==========================================================================
   SHARED LABELS
   ========================================================================== */

.tv-contact-eyebrow,
.tv-contact-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(99, 91, 255, 0.13);

    border-radius:
        999px;

    background:
        var(--tv-color-primary-soft);

    color:
        var(--tv-color-primary-dark);

    font-size:
        9px;

    font-weight:
        760;

    line-height:
        1;

    letter-spacing:
        0.2px;
}


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

.tv-contact-hero {
    position: relative;

    overflow: hidden;

    padding:
        44px
        0
        64px;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(99, 91, 255, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(0, 168, 132, 0.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbfcff 0%,
            #f7f9fc 100%
        );
}


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.tv-contact-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom:
        27px;

    color:
        #7b8798;

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1.4;
}


.tv-contact-breadcrumb a {
    color:
        var(--tv-color-primary);

    text-decoration:
        none;

    transition:
        color 160ms ease;
}


.tv-contact-breadcrumb a:hover {
    color:
        var(--tv-color-primary-dark);
}


.tv-contact-breadcrumb span[aria-current="page"] {
    color:
        #596579;
}


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

.tv-contact-hero__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.5fr);

    align-items: center;

    gap:
        52px;
}


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

.tv-contact-hero__content {
    min-width: 0;
}


.tv-contact-hero__content h1 {
    max-width:
        760px;

    margin:
        14px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    font-weight:
        840;

    line-height:
        1.03;

    letter-spacing:
        -2px;
}


.tv-contact-hero__content > p {
    max-width:
        680px;

    margin:
        18px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        15px;

    line-height:
        1.75;
}


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

.tv-contact-hero__card {
    position: relative;

    overflow: hidden;

    padding:
        24px;

    border:
        1px solid
        rgba(99, 91, 255, 0.12);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 18px 42px
        rgba(16, 24, 40, 0.065);
}


.tv-contact-hero__card::before {
    content: "";

    position: absolute;

    top:
        -90px;

    right:
        -90px;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 91, 255, 0.12),
            transparent 68%
        );

    pointer-events:
        none;
}


.tv-contact-hero__card > span,
.tv-contact-hero__card > strong,
.tv-contact-hero__card > p {
    position: relative;

    z-index: 2;
}


.tv-contact-hero__card > span {
    display: block;

    color:
        var(--tv-color-primary);

    font-size:
        9px;

    font-weight:
        780;

    line-height:
        1.3;

    letter-spacing:
        0.55px;

    text-transform:
        uppercase;
}


.tv-contact-hero__card > strong {
    display: block;

    margin-top:
        9px;

    color:
        var(--tv-color-heading);

    font-size:
        17px;

    font-weight:
        790;

    line-height:
        1.45;
}


.tv-contact-hero__card > p {
    margin:
        8px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        10px;

    line-height:
        1.7;
}


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

.tv-contact-main {
    padding:
        78px
        0;

    background:
        #ffffff;
}


.tv-contact-main__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(350px, 0.62fr);

    align-items: start;

    gap:
        65px;
}


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

.tv-contact-info {
    min-width: 0;
}


.tv-contact-info > h2 {
    max-width:
        570px;

    margin:
        13px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        clamp(
            29px,
            3.2vw,
            42px
        );

    font-weight:
        820;

    line-height:
        1.13;

    letter-spacing:
        -1.25px;
}


.tv-contact-info > p {
    max-width:
        650px;

    margin:
        13px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        13px;

    line-height:
        1.8;
}


/* ==========================================================================
   INFO LIST
   ========================================================================== */

.tv-contact-info__list {
    display: grid;

    gap:
        12px;

    margin-top:
        29px;
}


/* ==========================================================================
   INFO ITEM
   ========================================================================== */

.tv-contact-info__item {
    display: flex;
    align-items: flex-start;

    gap:
        15px;

    padding:
        17px;

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

    border-radius:
        16px;

    background:
        #fafbfc;

    transition:
        border-color 170ms ease,
        background-color 170ms ease,
        transform 170ms ease,
        box-shadow 170ms ease;
}


.tv-contact-info__item:hover {
    border-color:
        rgba(99, 91, 255, 0.17);

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(16, 24, 40, 0.05);
}


/* ==========================================================================
   INFO ICON
   ========================================================================== */

.tv-contact-info__icon {
    display: grid;
    place-items: center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        12px;

    background:
        var(--tv-color-primary-soft);

    color:
        var(--tv-color-primary-dark);
}


.tv-contact-info__icon svg {
    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tv-contact-info__item strong {
    display: block;

    color:
        var(--tv-color-heading);

    font-size:
        12px;

    font-weight:
        760;

    line-height:
        1.4;
}


.tv-contact-info__item p {
    margin:
        5px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        10px;

    line-height:
        1.65;
}


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

.tv-contact-panel {
    position: sticky;

    top:
        calc(
            var(--tv-header-height)
            + 24px
        );

    overflow: hidden;

    padding:
        24px;

    border:
        1px solid
        rgba(99, 91, 255, 0.13);

    border-radius:
        21px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafaff 100%
        );

    box-shadow:
        0 18px 42px
        rgba(16, 24, 40, 0.07);
}


/* ==========================================================================
   PANEL HEAD
   ========================================================================== */

.tv-contact-panel__head > span {
    display: block;

    color:
        var(--tv-color-primary);

    font-size:
        8px;

    font-weight:
        790;

    line-height:
        1;

    letter-spacing:
        0.6px;

    text-transform:
        uppercase;
}


.tv-contact-panel__head h2 {
    margin:
        8px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        23px;

    font-weight:
        810;

    line-height:
        1.25;

    letter-spacing:
        -0.6px;
}


.tv-contact-panel__head p {
    margin:
        8px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        10px;

    line-height:
        1.7;
}


/* ==========================================================================
   EMAIL BOX
   ========================================================================== */

.tv-contact-panel__email-box {
    margin-top:
        21px;

    padding:
        16px;

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

    border-radius:
        14px;

    background:
        #ffffff;
}


.tv-contact-panel__email-box > span {
    display: block;

    color:
        #7b8798;

    font-size:
        8px;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        0.45px;

    text-transform:
        uppercase;
}


.tv-contact-panel__email {
    display: inline-block;

    max-width:
        100%;

    margin-top:
        7px;

    overflow-wrap:
        anywhere;

    color:
        var(--tv-color-primary-dark);

    font-size:
        14px;

    font-weight:
        780;

    line-height:
        1.4;

    text-decoration:
        none;

    transition:
        color 160ms ease;
}


.tv-contact-panel__email:hover {
    color:
        var(--tv-color-primary);
}


.tv-contact-panel__email-box p {
    margin:
        7px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        9px;

    line-height:
        1.6;
}


/* ==========================================================================
   EMAIL BUTTON
   ========================================================================== */

.tv-contact-panel__button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        8px;

    width:
        100%;

    min-height:
        45px;

    margin-top:
        12px;

    padding:
        0
        15px;

    border:
        1px solid
        rgba(99, 91, 255, 0.14);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #7169ff 0%,
            #635bff 52%,
            #5149dc 100%
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        760;

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        0 8px 18px
        rgba(99, 91, 255, 0.18);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}


.tv-contact-panel__button svg {
    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tv-contact-panel__button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 11px 23px
        rgba(99, 91, 255, 0.24);
}


/* ==========================================================================
   PANEL NOTE
   ========================================================================== */

.tv-contact-panel__note {
    margin-top:
        16px;

    padding-top:
        15px;

    border-top:
        1px solid
        var(--tv-color-border);
}


.tv-contact-panel__note strong {
    display: block;

    color:
        var(--tv-color-heading);

    font-size:
        9px;

    font-weight:
        750;

    line-height:
        1.3;
}


.tv-contact-panel__note p {
    margin:
        5px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        8px;

    line-height:
        1.65;
}


/* ==========================================================================
   TIPS SECTION
   ========================================================================== */

.tv-contact-tips {
    padding:
        76px
        0;

    background:
        #f8fafc;
}


.tv-contact-tips__head {
    max-width:
        650px;

    margin-bottom:
        28px;
}


.tv-contact-tips__head h2 {
    margin:
        12px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );

    font-weight:
        820;

    line-height:
        1.14;

    letter-spacing:
        -1.15px;
}


/* ==========================================================================
   TIPS GRID
   ========================================================================== */

.tv-contact-tips__grid {
    display: grid;

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

    gap:
        14px;
}


/* ==========================================================================
   TIP CARD
   ========================================================================== */

.tv-contact-tips__card {
    min-width: 0;

    min-height:
        190px;

    padding:
        20px;

    border:
        1px solid
        rgba(222, 227, 235, 0.96);

    border-radius:
        17px;

    background:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(16, 24, 40, 0.03);

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease;
}


.tv-contact-tips__card:hover {
    border-color:
        rgba(99, 91, 255, 0.18);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 27px
        rgba(16, 24, 40, 0.065);
}


.tv-contact-tips__card > span {
    display: grid;
    place-items: center;

    width:
        35px;

    height:
        35px;

    border-radius:
        10px;

    background:
        var(--tv-color-primary-soft);

    color:
        var(--tv-color-primary-dark);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;
}


.tv-contact-tips__card h3 {
    margin:
        16px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        15px;

    font-weight:
        780;

    line-height:
        1.35;
}


.tv-contact-tips__card p {
    margin:
        7px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        10px;

    line-height:
        1.7;
}


/* ==========================================================================
   QUICK ANSWERS
   ========================================================================== */

.tv-contact-quick {
    padding:
        78px
        0;

    background:
        #ffffff;
}


.tv-contact-quick__layout {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.55fr)
        minmax(0, 1fr);

    align-items: start;

    gap:
        65px;
}


.tv-contact-quick__layout > div:first-child {
    position: sticky;

    top:
        calc(
            var(--tv-header-height)
            + 24px
        );
}


.tv-contact-quick__layout h2 {
    margin:
        12px
        0
        0;

    color:
        var(--tv-color-heading);

    font-size:
        clamp(
            27px,
            3vw,
            38px
        );

    font-weight:
        820;

    line-height:
        1.15;

    letter-spacing:
        -1px;
}


/* ==========================================================================
   QUICK LIST
   ========================================================================== */

.tv-contact-quick__list {
    border-top:
        1px solid
        var(--tv-color-border);
}


.tv-contact-quick__item {
    padding:
        21px
        4px;

    border-bottom:
        1px solid
        var(--tv-color-border);
}


.tv-contact-quick__item strong {
    display: block;

    color:
        var(--tv-color-heading);

    font-size:
        12px;

    font-weight:
        760;

    line-height:
        1.45;
}


.tv-contact-quick__item p {
    margin:
        7px
        0
        0;

    color:
        var(--tv-color-muted);

    font-size:
        10px;

    line-height:
        1.7;
}


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

.tv-contact-cta {
    padding:
        0
        0
        84px;

    background:
        #ffffff;
}


.tv-contact-cta__box {
    position: relative;

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

    gap:
        40px;

    overflow:
        hidden;

    padding:
        34px;

    border-radius:
        23px;

    background:
        linear-gradient(
            145deg,
            #111827 0%,
            #171d2d 58%,
            #242047 100%
        );

    color:
        #ffffff;

    box-shadow:
        0 22px 50px
        rgba(16, 24, 40, 0.12);
}


.tv-contact-cta__box::before {
    content: "";

    position: absolute;

    top:
        -100px;

    right:
        -80px;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 116, 255, 0.22),
            transparent 68%
        );

    pointer-events:
        none;
}


.tv-contact-cta__box > div,
.tv-contact-cta__box > a {
    position: relative;

    z-index: 2;
}


.tv-contact-cta__box > div > span {
    color:
        #aeb8c8;

    font-size:
        8px;

    font-weight:
        760;

    line-height:
        1;

    letter-spacing:
        0.55px;

    text-transform:
        uppercase;
}


.tv-contact-cta__box h2 {
    max-width:
        590px;

    margin:
        7px
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            25px,
            3vw,
            36px
        );

    font-weight:
        820;

    line-height:
        1.16;

    letter-spacing:
        -1px;
}


.tv-contact-cta__box p {
    max-width:
        600px;

    margin:
        8px
        0
        0;

    color:
        #9ca9ba;

    font-size:
        10px;

    line-height:
        1.65;
}


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

.tv-contact-cta__box > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        auto;

    gap:
        8px;

    min-height:
        45px;

    padding:
        0
        17px;

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

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #242047;

    font-size:
        10px;

    font-weight:
        760;

    line-height:
        1;

    text-decoration:
        none;

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, 0.10);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease;
}


.tv-contact-cta__box > a span {
    font-size:
        14px;

    transition:
        transform 170ms ease;
}


.tv-contact-cta__box > a:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 11px 22px
        rgba(0, 0, 0, 0.14);
}


.tv-contact-cta__box > a:hover span {
    transform:
        translateX(2px);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.tv-contact-breadcrumb a:focus-visible,
.tv-contact-panel__email:focus-visible,
.tv-contact-panel__button:focus-visible,
.tv-contact-cta__box > a:focus-visible {
    outline:
        3px solid
        rgba(99, 91, 255, 0.20);

    outline-offset:
        3px;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

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

        gap:
            30px;
    }


    .tv-contact-hero__card {
        max-width:
            620px;
    }


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

        gap:
            38px;
    }


    .tv-contact-panel {
        position:
            static;

        max-width:
            650px;
    }


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

        gap:
            30px;
    }


    .tv-contact-quick__layout > div:first-child {
        position:
            static;
    }
}


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

@media (max-width: 700px) {

    .tv-contact-hero {
        padding:
            34px
            0
            48px;
    }


    .tv-contact-breadcrumb {
        margin-bottom:
            20px;
    }


    .tv-contact-hero__content h1 {
        font-size:
            clamp(
                32px,
                10vw,
                43px
            );

        letter-spacing:
            -1.4px;
    }


    .tv-contact-hero__content > p {
        margin-top:
            14px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    .tv-contact-main,
    .tv-contact-tips,
    .tv-contact-quick {
        padding:
            58px
            0;
    }


    .tv-contact-info > h2,
    .tv-contact-tips__head h2,
    .tv-contact-quick__layout h2 {
        font-size:
            clamp(
                26px,
                7vw,
                33px
            );

        letter-spacing:
            -0.95px;
    }


    .tv-contact-info > p {
        font-size:
            12px;
    }


    .tv-contact-tips__grid {
        grid-template-columns:
            1fr;
    }


    .tv-contact-tips__card {
        min-height:
            auto;
    }


    .tv-contact-cta {
        padding-bottom:
            62px;
    }


    .tv-contact-cta__box {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            24px;

        padding:
            26px;

        border-radius:
            19px;
    }
}


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

@media (max-width: 480px) {

    .tv-contact-hero__card {
        padding:
            20px;
    }


    .tv-contact-info__item {
        padding:
            15px;
    }


    .tv-contact-info__icon {
        width:
            39px;

        height:
            39px;

        flex-basis:
            39px;
    }


    .tv-contact-panel {
        padding:
            20px;

        border-radius:
            18px;
    }


    .tv-contact-panel__email {
        font-size:
            12px;
    }


    .tv-contact-tips__card {
        padding:
            18px;
    }


    .tv-contact-cta__box {
        padding:
            22px;
    }


    .tv-contact-cta__box > a {
        width:
            100%;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 360px) {

    .tv-contact-hero__content h1 {
        font-size:
            30px;
    }


    .tv-contact-info__item {
        gap:
            11px;
    }


    .tv-contact-panel {
        padding:
            17px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .tv-contact-breadcrumb a,
    .tv-contact-info__item,
    .tv-contact-panel__email,
    .tv-contact-panel__button,
    .tv-contact-tips__card,
    .tv-contact-cta__box > a,
    .tv-contact-cta__box > a span {
        transition:
            none;
    }


    .tv-contact-info__item:hover,
    .tv-contact-panel__button:hover,
    .tv-contact-tips__card:hover,
    .tv-contact-cta__box > a:hover {
        transform:
            none;
    }
}