.about-page-hero {

    
        padding: 55px 0 100px

}


.about-hero-copy {

    max-width:
        760px;

}


.about-hero-copy .lead {

    max-width:
        700px;

}


.about-hero-stats {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        30px;

}


.about-stat {

    padding:
        20px;

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

    border-radius:
        18px;

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

}


.about-stat strong {

    display:
        block;

    font-size:
        24px;

}


.about-stat span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--muted, #6b7280);

    font-size:
        12px;

}



/* =====================================================
           SECTION HEADING
        ===================================================== */

.about-section-heading {

    max-width:
        780px;

    margin-bottom:
        35px;

}


.about-section-heading .muted {

    max-width:
        700px;

}



/* =====================================================
           STORY
        ===================================================== */

.about-story-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(320px, .95fr);

    gap:
        28px;

}


.about-story-panel,
.about-highlight-panel {

    padding:
        clamp(24px, 4vw, 40px);

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

    border-radius:
        24px;

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

}


.about-highlight-panel {

    background:
        linear-gradient(145deg,
            rgba(99, 91, 255, .10),
            rgba(255, 255, 255, .65));

}


.about-highlight-list {

    display:
        grid;

    gap:
        15px;

    margin-top:
        22px;

}


.about-highlight-list div {

    display:
        flex;

    gap:
        12px;

    align-items:
        flex-start;

}


.about-highlight-list b {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        10px;

    background:
        #635bff;

    color:
        white;

    font-size:
        11px;

}



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

.about-values-grid {

    display:
        grid;

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

    gap:
        18px;

}


.about-value {

    padding:
        26px;

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

    border-radius:
        22px;

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

}


.value-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    border-radius:
        13px;

    background:
        rgba(99, 91, 255, .10);

    color:
        #635bff;

    font-weight:
        900;

}


.about-value h3 {

    font-size:
        18px;

    margin-bottom:
        10px;

}


.about-value p {

    line-height:
        1.7;

}



/* =====================================================
           TECHNOLOGIES
        ===================================================== */

.about-tech-grid {

    display:
        grid;

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

    gap:
        14px;

}


.about-tech-card {

    min-height:
        110px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        16px;

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

    border-radius:
        18px;

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

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.about-tech-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #635bff;

}


.about-tech-card>b {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        rgba(99, 91, 255, .1);

    color:
        #635bff;

    font-weight:
        900;

}


.about-tech-card h3 {

    margin:
        0 0 3px;

    font-size:
        15px;

}


.about-tech-card span {

    color:
        var(--muted, #6b7280);

    font-size:
        11px;

}



/* =====================================================
           INDUSTRIES
        ===================================================== */

.about-industry-grid {

    display:
        grid;

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

    gap:
        14px;

}


.about-industry-card {

    padding:
        22px;

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

    border-radius:
        20px;

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

}


.about-industry-card span {

    color:
        #635bff;

    font-size:
        11px;

    font-weight:
        900;

}


.about-industry-card h3 {

    margin:
        12px 0 7px;

    font-size:
        16px;

}


.about-industry-card p {

    margin:
        0;

    color:
        var(--muted, #6b7280);

    font-size:
        12px;

    line-height:
        1.55;

}



/* =====================================================
           TEAM
        ===================================================== */

.about-team-grid {

    display:
        grid;

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

    gap:
        24px;

}


.about-team-card {

    display:
        grid;

    grid-template-columns:
        190px 1fr;

    gap:
        25px;

    align-items:
        center;

    padding:
        28px;

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

    border-radius:
        24px;

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

}


.about-team-card img {

    width:
        180px;

    height:
        180px;

    object-fit:
        cover;

    border-radius:
        25px;

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

}


.about-team-role {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #635bff;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.about-team-role::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #635bff;

}


.about-team-card h3 {

    margin:
        10px 0 8px;

}


.about-team-card p {

    color:
        var(--muted, #6b7280);

    line-height:
        1.7;

}


.about-team-skills {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        16px;

}


.about-team-skills span {

    padding:
        7px 10px;

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

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;

}



/* =====================================================
           PROCESS
        ===================================================== */

.about-process-grid {

    display:
        grid;

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

    gap:
        18px;

}


.about-process-card {

    padding:
        28px 22px;

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

    border-radius:
        22px;

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

}


.about-process-card .step {

    font-size:
        38px;

    font-weight:
        900;

    line-height:
        1;

    color:
        rgba(99, 91, 255, .18);

}


.about-process-card h3 {

    margin:
        15px 0 8px;

}



/* =====================================================
           FAQ
        ===================================================== */

.about-faq {

    max-width:
        900px;

    margin:
        auto;

    display:
        grid;

    gap:
        12px;

}


.about-faq details {

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

    border-radius:
        17px;

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

    overflow:
        hidden;

}


.about-faq summary {

    cursor:
        pointer;

    padding:
        19px 22px;

    font-weight:
        800;

    list-style:
        none;

    display:
        flex;

    justify-content:
        space-between;

}


.about-faq summary::-webkit-details-marker {

    display:
        none;

}


.about-faq summary::after {

    content:
        "+";

    color:
        #635bff;

}


.about-faq details[open] summary::after {

    content:
        "−";

}


.about-faq details p {

    padding:
        0 22px 20px;

    margin:
        0;

    color:
        var(--muted, #6b7280);

    line-height:
        1.7;

}



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

.about-final-cta {

    text-align:
        center;

}



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

@media (max-width:1050px) {

    .about-tech-grid {

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

    }


    .about-industry-grid {

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

    }

}


@media (max-width:900px) {

    .about-story-grid {

        grid-template-columns:
            1fr;

    }


    .about-values-grid {

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

    }


    .about-process-grid {

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

    }


    .about-team-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width:620px) {

    .about-page-hero {

        padding:
            55px 0 45px;

    }


    .about-hero-stats {

        grid-template-columns:
            1fr;

    }


    .about-values-grid,
    .about-process-grid,
    .about-tech-grid,
    .about-industry-grid {

        grid-template-columns:
            1fr;

    }


    .about-team-card {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .about-team-card img {

        margin:
            auto;

    }


    .about-team-skills {

        justify-content:
            center;

    }

}