/*
|--------------------------------------------------------------------------
| ToolVerse - About Page
|--------------------------------------------------------------------------
| Scope:
| - ONLY .tv-about-page and children
| - Fully responsive
| - No external library
|--------------------------------------------------------------------------
*/


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

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

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

    background:
        #ffffff;
}


/* ==========================================================================
   SHARED LABEL
   ========================================================================== */

.tv-about-eyebrow,
.tv-about-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-about-hero {
    position: relative;

    overflow: hidden;

    padding:
        44px
        0
        64px;

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


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

.tv-about-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-about-breadcrumb a {
    color:
        var(--tv-color-primary);

    text-decoration:
        none;

    transition:
        color 160ms ease;
}


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


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


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

.tv-about-hero__layout {
    display: grid;

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

    align-items: center;

    gap:
        52px;
}


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

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


.tv-about-hero__content h1 {
    max-width:
        780px;

    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-about-hero__content > p {
    max-width:
        700px;

    margin:
        18px
        0
        0;

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

    font-size:
        15px;

    line-height:
        1.75;
}


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

.tv-about-hero__points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        10px
        14px;

    margin-top:
        23px;
}


.tv-about-hero__points span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color:
        #536173;

    font-size:
        10px;

    font-weight:
        650;
}


.tv-about-hero__points svg {
    width:
        17px;

    height:
        17px;

    padding:
        3px;

    border-radius:
        50%;

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

    fill:
        none;

    stroke:
        var(--tv-color-success);

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

.tv-about-hero__card {
    position: relative;

    padding:
        24px;

    overflow:
        hidden;

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

    border-radius:
        22px;

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

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


.tv-about-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.11),
            transparent 68%
        );

    pointer-events:
        none;
}


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

    z-index: 2;
}


.tv-about-hero__card > span {
    color:
        var(--tv-color-primary);

    font-size:
        9px;

    font-weight:
        780;

    text-transform:
        uppercase;

    letter-spacing:
        0.55px;
}


.tv-about-hero__card strong {
    display: block;

    margin-top:
        9px;

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

    font-size:
        17px;

    font-weight:
        790;

    line-height:
        1.45;
}


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

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

    font-size:
        10px;

    line-height:
        1.7;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.tv-about-intro {
    padding:
        76px
        0;

    background:
        #ffffff;
}


.tv-about-intro__layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1fr);

    align-items: start;

    gap:
        72px;
}


.tv-about-intro__heading h2 {
    max-width:
        520px;

    margin:
        13px
        0
        0;

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

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

    font-weight:
        820;

    line-height:
        1.15;

    letter-spacing:
        -1.15px;
}


.tv-about-intro__content {
    max-width:
        720px;
}


.tv-about-intro__content p {
    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.85;
}


.tv-about-intro__content p + p {
    margin-top:
        16px;
}


/* ==========================================================================
   VALUES
   ========================================================================== */

.tv-about-values {
    padding:
        78px
        0
        82px;

    background:
        #f8fafc;
}


.tv-about-values__head {
    max-width:
        710px;

    margin-bottom:
        31px;
}


.tv-about-values__head h2 {
    margin:
        12px
        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-about-values__head p {
    margin:
        11px
        0
        0;

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

    font-size:
        13px;

    line-height:
        1.7;
}


/* ==========================================================================
   VALUES GRID
   ========================================================================== */

.tv-about-values__grid {
    display: grid;

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

    gap:
        14px;
}


/* ==========================================================================
   VALUE CARD
   ========================================================================== */

.tv-about-values__card {
    position: relative;

    min-width: 0;

    min-height:
        235px;

    padding:
        20px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 6px 18px
        rgba(16, 24, 40, 0.035);

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


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

    transform:
        translateY(-3px);

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


.tv-about-values__icon {
    display: grid;
    place-items: center;

    width:
        45px;

    height:
        45px;

    border-radius:
        13px;

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

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


.tv-about-values__icon svg {
    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.tv-about-values__card h3 {
    margin:
        18px
        0
        0;

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

    font-size:
        16px;

    font-weight:
        780;

    line-height:
        1.3;
}


.tv-about-values__card p {
    margin:
        8px
        0
        0;

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

    font-size:
        10px;

    line-height:
        1.7;
}


/* ==========================================================================
   CATEGORIES
   ========================================================================== */

.tv-about-categories {
    padding:
        80px
        0;

    background:
        #ffffff;
}


.tv-about-categories__layout {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.65fr)
        minmax(0, 1fr);

    align-items: start;

    gap:
        58px;
}


/* ==========================================================================
   CATEGORY CONTENT
   ========================================================================== */

.tv-about-categories__content {
    position: sticky;

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


.tv-about-categories__content h2 {
    max-width:
        470px;

    margin:
        12px
        0
        0;

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

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

    font-weight:
        820;

    line-height:
        1.14;

    letter-spacing:
        -1.1px;
}


.tv-about-categories__content p {
    max-width:
        490px;

    margin:
        12px
        0
        0;

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

    font-size:
        12px;

    line-height:
        1.75;
}


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

.tv-about-categories__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        8px;

    min-height:
        42px;

    margin-top:
        21px;

    padding:
        0
        15px;

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

    border-radius:
        999px;

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

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

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}


.tv-about-categories__cta span {
    font-size:
        14px;

    transition:
        transform 160ms ease;
}


.tv-about-categories__cta:hover {
    border-color:
        rgba(99, 91, 255, 0.24);

    background:
        rgba(99, 91, 255, 0.12);

    transform:
        translateY(-1px);
}


.tv-about-categories__cta:hover span {
    transform:
        translateX(2px);
}


/* ==========================================================================
   CATEGORY GRID
   ========================================================================== */

.tv-about-categories__grid {
    display: grid;

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

    gap:
        13px;
}


/* ==========================================================================
   CATEGORY CARD
   ========================================================================== */

.tv-about-categories__card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    min-height:
        185px;

    padding:
        19px;

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

    border-radius:
        17px;

    background:
        #fafbfc;

    text-decoration:
        none;

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


.tv-about-categories__card:hover {
    border-color:
        rgba(99, 91, 255, 0.19);

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(16, 24, 40, 0.055);
}


.tv-about-categories__card > span {
    color:
        var(--tv-color-primary);

    font-size:
        8px;

    font-weight:
        790;

    line-height:
        1;

    text-transform:
        uppercase;

    letter-spacing:
        0.55px;
}


.tv-about-categories__card strong {
    margin-top:
        11px;

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

    font-size:
        14px;

    font-weight:
        770;

    line-height:
        1.4;
}


.tv-about-categories__card small {
    margin-top:
        7px;

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

    font-size:
        9px;

    line-height:
        1.6;
}


/* ==========================================================================
   PURPOSE
   ========================================================================== */

.tv-about-purpose {
    padding:
        0
        0
        78px;

    background:
        #ffffff;
}


.tv-about-purpose__box {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.65fr)
        minmax(0, 1fr);

    align-items: center;

    gap:
        50px;

    padding:
        30px
        32px;

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

    border-radius:
        21px;

    background:
        linear-gradient(
            135deg,
            #f8f7ff,
            #fbfcff
        );
}


.tv-about-purpose__box h2 {
    margin:
        10px
        0
        0;

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

    font-size:
        25px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -0.7px;
}


.tv-about-purpose__box > p {
    margin:
        0;

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

    font-size:
        11px;

    line-height:
        1.8;
}


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

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

    background:
        #ffffff;
}


.tv-about-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-about-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-about-cta__box > div,
.tv-about-cta__box > a {
    position: relative;

    z-index: 2;
}


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

    font-size:
        8px;

    font-weight:
        760;

    text-transform:
        uppercase;

    letter-spacing:
        0.55px;
}


.tv-about-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-about-cta__box p {
    max-width:
        600px;

    margin:
        8px
        0
        0;

    color:
        #9ca9ba;

    font-size:
        10px;

    line-height:
        1.65;
}


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

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

    flex:
        0
        0
        auto;

    gap:
        8px;

    min-height:
        45px;

    padding:
        0
        16px;

    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-about-cta__box > a span {
    font-size:
        14px;

    transition:
        transform 170ms ease;
}


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

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


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


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

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

    outline-offset:
        3px;
}


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

@media (max-width: 1024px) {

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

        gap:
            30px;
    }


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


    .tv-about-intro__layout,
    .tv-about-categories__layout,
    .tv-about-purpose__box {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .tv-about-categories__content {
        position:
            static;
    }


    .tv-about-values__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


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

@media (max-width: 700px) {

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


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


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

        letter-spacing:
            -1.4px;
    }


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

        font-size:
            13px;

        line-height:
            1.7;
    }


    .tv-about-intro,
    .tv-about-values,
    .tv-about-categories {
        padding:
            58px
            0;
    }


    .tv-about-values {
        padding-bottom:
            62px;
    }


    .tv-about-intro__heading h2,
    .tv-about-values__head h2,
    .tv-about-categories__content h2 {
        font-size:
            clamp(
                26px,
                7vw,
                33px
            );

        letter-spacing:
            -0.95px;
    }


    .tv-about-intro__content p,
    .tv-about-values__head p,
    .tv-about-categories__content p {
        font-size:
            12px;
    }


    .tv-about-categories__grid {
        grid-template-columns:
            1fr;
    }


    .tv-about-purpose {
        padding-bottom:
            58px;
    }


    .tv-about-purpose__box {
        padding:
            24px;

        border-radius:
            18px;
    }


    .tv-about-purpose__box h2 {
        font-size:
            22px;
    }


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


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

        align-items:
            flex-start;

        gap:
            24px;

        padding:
            26px;

        border-radius:
            19px;
    }
}


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

@media (max-width: 480px) {

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


    .tv-about-values__grid {
        grid-template-columns:
            1fr;
    }


    .tv-about-values__card {
        min-height:
            auto;

        padding:
            18px;
    }


    .tv-about-categories__card {
        min-height:
            160px;

        padding:
            17px;
    }


    .tv-about-purpose__box {
        padding:
            21px;
    }


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


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


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

@media (max-width: 360px) {

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


    .tv-about-purpose__box h2 {
        font-size:
            20px;
    }
}


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

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

    .tv-about-breadcrumb a,
    .tv-about-values__card,
    .tv-about-categories__cta,
    .tv-about-categories__cta span,
    .tv-about-categories__card,
    .tv-about-cta__box > a,
    .tv-about-cta__box > a span {
        transition:
            none;
    }


    .tv-about-values__card:hover,
    .tv-about-categories__cta:hover,
    .tv-about-categories__card:hover,
    .tv-about-cta__box > a:hover {
        transform:
            none;
    }
}