/* ==========================================================================
   SSI TESTIMONIALS
   ========================================================================== */

.ssi-testimonials {
    position: relative;

    overflow: hidden;

    padding:
        125px
        0
        125px;

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

    color:
        var(--ssi-color-primary);
}

.ssi-testimonials__background {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;
}

.ssi-testimonials__pattern {
    position:
        absolute;

    inset:
        0;

    opacity:
        0.28;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        );

    background-size:
        48px
        48px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}

.ssi-testimonials__orb {
    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    filter:
        blur(8px);
}

.ssi-testimonials__orb--one {
    top:
        -280px;

    right:
        -180px;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.08),
            transparent 70%
        );
}

.ssi-testimonials__orb--two {
    bottom:
        -300px;

    left:
        -190px;

    background:
        radial-gradient(
            circle,
            rgba(220, 162, 56, 0.07),
            transparent 70%
        );
}

.ssi-testimonials__container {
    position:
        relative;

    z-index:
        2;
}


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

.ssi-testimonials__header {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.65fr);

    gap:
        70px;

    align-items:
        end;

    margin-bottom:
        62px;
}

.ssi-testimonials__heading .ssi-heading {
    margin-bottom:
        0;
}

.ssi-testimonials__heading .ssi-heading span {
    background:
        linear-gradient(
            135deg,
            var(--ssi-color-secondary),
            var(--ssi-color-accent)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.ssi-testimonials__intro {
    max-width:
        480px;
}

.ssi-testimonials__intro p {
    margin:
        0;

    color:
        var(--ssi-color-text-light);

    font-size:
        0.95rem;

    line-height:
        1.8;
}


/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.ssi-testimonials__layout {
    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        18px;

    align-items:
        stretch;
}


/* ==========================================================================
   FEATURED TESTIMONIAL
   ========================================================================== */

.ssi-testimonial-featured {
    position:
        relative;

    min-height:
        535px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        30px;

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #061426 0%,
            #0b1f3a 55%,
            #102f55 100%
        );

    color:
        var(--ssi-color-white);

    box-shadow:
        0 28px 75px
        rgba(6, 20, 38, 0.18);

    transition:
        transform 450ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        box-shadow 450ms ease;
}

.ssi-testimonial-featured::before {
    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -160px;

    top:
        -160px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.20),
            transparent 70%
        );
}

.ssi-testimonial-featured::after {
    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    left:
        -150px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 162, 56, 0.13),
            transparent 70%
        );
}

.ssi-testimonial-featured:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 38px 90px
        rgba(6, 20, 38, 0.24);
}

.ssi-testimonial-featured__quote {
    position:
        absolute;

    right:
        28px;

    bottom:
        54px;

    z-index:
        1;

    color:
        rgba(255, 255, 255, 0.05);

    font-family:
        Georgia,
        serif;

    font-size:
        14rem;

    font-weight:
        700;

    line-height:
        0.6;

    pointer-events:
        none;
}

.ssi-testimonial-featured__top {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;
}

.ssi-testimonial-featured__label {
    color:
        rgba(255, 255, 255, 0.53);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.ssi-testimonial-featured__tag {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0
        11px;

    border-radius:
        999px;

    background:
        rgba(220, 162, 56, 0.13);

    color:
        var(--ssi-color-accent-light);

    font-size:
        0.63rem;

    font-weight:
        800;
}

.ssi-testimonial-featured__text {
    position:
        relative;

    z-index:
        3;

    max-width:
        610px;

    margin:
        auto
        0
        42px;

    color:
        var(--ssi-color-white);

    font-family:
        "Manrope",
        sans-serif;

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

    font-weight:
        600;

    line-height:
        1.35;

    letter-spacing:
        -0.035em;
}

.ssi-testimonial-featured__author {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.ssi-testimonial-featured__avatar {
    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dbeafe
        );

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        800;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.18);
}

.ssi-testimonial-featured__author strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--ssi-color-white);

    font-size:
        0.86rem;

    font-weight:
        800;
}

.ssi-testimonial-featured__author span {
    display:
        block;

    color:
        rgba(255, 255, 255, 0.47);

    font-size:
        0.66rem;

    font-weight:
        600;
}


/* ==========================================================================
   TESTIMONIAL GRID
   ========================================================================== */

.ssi-testimonials__grid {
    display:
        grid;

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

    gap:
        18px;
}


/* ==========================================================================
   TESTIMONIAL CARD
   ========================================================================== */

.ssi-testimonial-card {
    position:
        relative;

    min-height:
        258px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        24px;

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

    border-radius:
        22px;

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

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 420ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        background 420ms ease,
        color 420ms ease,
        box-shadow 420ms ease,
        border-color 420ms ease;
}

.ssi-testimonial-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--ssi-color-secondary),
            var(--ssi-color-accent)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 420ms ease;
}

.ssi-testimonial-card:hover {
    transform:
        translateY(-7px);

    background:
        linear-gradient(
            145deg,
            #0b1f3a,
            #102f55
        );

    border-color:
        transparent;

    box-shadow:
        0 28px 60px
        rgba(11, 31, 58, 0.16);

    color:
        var(--ssi-color-white);
}

.ssi-testimonial-card:hover::before {
    transform:
        scaleX(1);
}

.ssi-testimonial-card--accent {
    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffffff
        );
}

.ssi-testimonial-card--accent:hover {
    background:
        linear-gradient(
            145deg,
            #0b1f3a,
            #102f55
        );
}

.ssi-testimonial-card__top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.ssi-testimonial-card__number {
    color:
        rgba(
            11,
            31,
            58,
            0.16
        );

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    transition:
        color 350ms ease;
}

.ssi-testimonial-card:hover
.ssi-testimonial-card__number {
    color:
        rgba(
            255,
            255,
            255,
            0.27
        );
}

.ssi-testimonial-card__quote {
    color:
        var(--ssi-color-accent);

    font-family:
        Georgia,
        serif;

    font-size:
        2.6rem;

    line-height:
        0.7;
}

.ssi-testimonial-card p {
    margin:
        24px
        0
        auto;

    color:
        var(--ssi-color-text-light);

    font-size:
        0.82rem;

    line-height:
        1.75;

    transition:
        color 350ms ease;
}

.ssi-testimonial-card:hover p {
    color:
        rgba(
            255,
            255,
            255,
            0.65
        );
}

.ssi-testimonial-card__author {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        20px;
}

.ssi-testimonial-card__avatar {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        rgba(
            29,
            78,
            216,
            0.09
        );

    color:
        var(--ssi-color-secondary);

    font-size:
        0.58rem;

    font-weight:
        800;

    transition:
        background-color 350ms ease,
        color 350ms ease;
}

.ssi-testimonial-card:hover
.ssi-testimonial-card__avatar {
    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color:
        var(--ssi-color-accent-light);
}

.ssi-testimonial-card__author strong {
    display:
        block;

    margin-bottom:
        2px;

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

    font-size:
        0.75rem;

    font-weight:
        800;

    transition:
        color 350ms ease;
}

.ssi-testimonial-card:hover
.ssi-testimonial-card__author strong {
    color:
        var(--ssi-color-white);
}

.ssi-testimonial-card__author span {
    display:
        block;

    color:
        var(--ssi-color-text-muted);

    font-size:
        0.61rem;

    font-weight:
        600;

    transition:
        color 350ms ease;
}

.ssi-testimonial-card:hover
.ssi-testimonial-card__author span {
    color:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


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

.ssi-testimonials__bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    margin-top:
        58px;

    color:
        var(--ssi-color-text-light);

    font-size:
        0.72rem;

    font-weight:
        700;
}

.ssi-testimonials__bottom strong {
    color:
        var(--ssi-color-accent);

    font-weight:
        800;
}

.ssi-testimonials__bottom-line {
    width:
        70px;

    height:
        1px;

    background:
        var(--ssi-color-border);
}


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

@media (max-width: 1050px) {

    .ssi-testimonials {
        padding:
            105px
            0
            110px;
    }

    .ssi-testimonials__header {
        gap:
            45px;
    }

    .ssi-testimonials__layout {
        grid-template-columns:
            1fr;
    }

    .ssi-testimonial-featured {
        min-height:
            450px;
    }
}

@media (max-width: 800px) {

    .ssi-testimonials__header {
        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            50px;
    }

    .ssi-testimonials__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

@media (max-width: 600px) {

    .ssi-testimonials {
        padding:
            80px
            0
            90px;
    }

    .ssi-testimonials__grid {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .ssi-testimonial-featured {
        min-height:
            440px;

        padding:
            23px;
    }

    .ssi-testimonial-featured__text {
        font-size:
            1.3rem;
    }

    .ssi-testimonial-card {
        min-height:
            235px;

        padding:
            22px;
    }

    .ssi-testimonials__bottom {
        flex-wrap:
            wrap;

        text-align:
            center;
    }

    .ssi-testimonials__bottom-line {
        display:
            none;
    }
}


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

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

    .ssi-testimonial-featured,
    .ssi-testimonial-card {
        transition:
            none !important;
    }
}