/* =========================================================
   N-FLUX — CUSTOMER STORIES
========================================================= */

.customer-stories-section {

    position: relative;

    padding:
        var(--section-space-lg)
        0;

    overflow: hidden;

    background:
        var(--surface-soft);

}


/* =========================================================
   BACKGROUND
========================================================= */

.customer-stories-section::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    top: -260px;

    left: -190px;

    border-radius: 50%;

    background:
        rgba(22,141,226,.045);

    pointer-events: none;

}


.customer-stories-section::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    right: -170px;

    bottom: -190px;

    border-radius: 50%;

    background:
        rgba(53,168,83,.035);

    pointer-events: none;

}


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

.customer-stories-header {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin:
        0 auto 42px;

    text-align: center;

}


.customer-stories-header
.section-eyebrow {

    justify-content: center;

}


.customer-stories-description {

    max-width: 590px;

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size: .88rem;

    line-height: 1.75;

}


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

.customer-story-wrap {

    position: relative;

    z-index: 2;

    max-width: 940px;

    margin:
        0 auto;

}


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

.customer-story-card {

    position: relative;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    min-height: 360px;

    overflow: hidden;

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

    border-radius:
        var(--radius-xl);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-md);

}


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

.customer-story-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        48px;

}


.customer-story-content::before {

    content: "“";

    position: absolute;

    top: 20px;

    left: 39px;

    color:
        var(--primary-light);

    font-size: 6rem;

    font-weight: 900;

    line-height: 1;

    pointer-events: none;

}


.customer-story-label {

    position: relative;

    z-index: 2;

    margin-bottom: 13px;

    color:
        var(--primary);

    font-size: .59rem;

    font-weight: 850;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.customer-story-title {

    position: relative;

    z-index: 2;

    max-width: 470px;

    margin:
        0 0 16px;

    color:
        var(--text);

    font-size:
        clamp(1.45rem, 3vw, 2rem);

    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -.04em;

}


.customer-story-text {

    position: relative;

    z-index: 2;

    max-width: 480px;

    margin:
        0 0 24px;

    color:
        var(--text-muted);

    font-size: .76rem;

    line-height: 1.8;

}


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

.customer-story-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.customer-story-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        8px 11px;

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

    border-radius:
        var(--radius-pill);

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: .7rem;

    font-weight: 750;

}


.customer-story-tag i {

    color:
        var(--accent);

    font-size: .7rem;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.customer-story-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #0b3b82 0%,
            #168de2 100%
        );
        
    padding: 40px 0px;

}


/* Decorative circles */

.customer-story-visual::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    top: -125px;

    right: -90px;

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

    border-radius: 50%;

}


.customer-story-visual::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    bottom: -120px;

    left: -100px;

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

    border-radius: 50%;

}


/* =========================================================
   APPROACH VISUAL
========================================================= */

.customer-approach {

    position: relative;

    z-index: 2;

    width:
        min(330px, 78%);

}


.customer-approach-label {

    margin-bottom: 17px;

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

    font-size: .85rem;

    font-weight: 850;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.customer-approach-title {

    margin:
        0 0 25px;

    color:
        #fff;

    font-size: 1.25rem;

    font-weight: 850;

    line-height: 1.3;

}


/* =========================================================
   APPROACH ITEMS
========================================================= */

.customer-approach-list {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.customer-approach-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        11px 13px;

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

    border-radius: 13px;

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

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

    font-size: .64rem;

    font-weight: 700;

    backdrop-filter:
        blur(8px);

}


.customer-approach-item i {

    display: grid;

    place-items: center;

    width: 25px;

    height: 25px;

    flex: 0 0 25px;

    border-radius: 8px;

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

    color:
        #fff;

    font-size: .62rem;

}


/* =========================================================
   BOTTOM FLOW
========================================================= */

.customer-story-flow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top:
        25px;

}


.customer-story-flow-item {

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        var(--text-soft);

    font-size: .59rem;

    font-weight: 750;

}


.customer-story-flow-item i {

    color:
        var(--primary);

    font-size: .67rem;

}


.customer-story-flow-arrow {

    color:
        var(--border);

    font-size: .7rem;

}


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

.customer-stories-cta {

    display: flex;

    justify-content: center;

    margin-top:
        29px;

}


.customer-stories-cta .btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}


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

@media (max-width: 767px) {

    .customer-stories-section {

        padding:
            var(--section-space)
            0;

    }


    .customer-stories-header {

        margin-bottom:
            28px;

    }


    .customer-stories-description {

        font-size: .82rem;

        line-height: 1.7;

    }


    .customer-story-card {

        display: flex;

        flex-direction: column;

        min-height: auto;

        border-radius:
            var(--radius-lg);

    }


    .customer-story-content {

        padding:
            29px 23px 25px;

    }


    .customer-story-content::before {

        top: 11px;

        left: 18px;

        font-size: 4.8rem;

    }


    .customer-story-label {

        margin-bottom: 10px;

    }


    .customer-story-title {

        margin-bottom: 12px;

        font-size: 1.32rem;

        line-height: 1.2;

    }


    .customer-story-text {

        margin-bottom: 18px;

        font-size: .69rem;

        line-height: 1.75;

    }


    .customer-story-tag {

        padding:
            7px 9px;

        font-size: .7rem;

    }


    .customer-story-visual {

        min-height: 285px;

    }


    .customer-approach {

        width:
            calc(100% - 42px);

    }


    .customer-approach-title {

        margin-bottom: 18px;

        font-size: 1.05rem;

    }


    .customer-approach-item {

        padding:
            9px 11px;

        font-size: .59rem;

    }


    .customer-story-flow {

        flex-wrap: wrap;

        gap: 7px;

    }


    .customer-story-flow-arrow {

        display: none;

    }


    .customer-stories-cta {

        margin-top:
            22px;

    }

}


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

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

    .customer-story-card,
    .customer-approach-item {

        transition: none;

    }

}