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

    .customers-hero {
        --hero-floor: 0px;

        position: relative;
        overflow: hidden;
        padding-top: var(--header-height);
    }

    .customers-hero-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        align-items: center;
        gap: var(--gap-large);
    }

    .customers-overline {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xsmall);
        color: var(--primary-color);
    }

    .customers-overline .fa{
        font-size:15px;
    }

    .customers-hero-intro {
        padding: var(--padding-large) 0;
        animation: heroRise 1100ms var(--ease-out) both;
    }

    .customers-hero-title {
        margin-top: var(--margin-small);
        font-size: clamp(46px, 7.2vw, 60px);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .customers-hero-text {
        max-width: 500px;
        margin-top: var(--margin-small);
        font-size: 17px;
        line-height: 1.6;
    }

    .customers-hero-actions {
        display: flex;
        align-items: center;
        gap: var(--gap-medium);
        margin-top: var(--margin-medium);
    }

    .customers-cta {
        padding: var(--padding-xsmall) var(--padding-small);
        background: var(--dark-color);
    }

    .customers-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--dark-dark-color);
    }

    .customers-link .fa {
        font-size: 11px;
        transition: transform 400ms var(--ease-out);
    }

    .customers-link:hover .fa {
        transform: translateX(3px);
    }


    /*===================================================
    // CUSTOMER WALL
    /==================================================*/

    /* Each column loops vertically; the middle one runs the other way */
    .customers-wall {
        --card-h: 260px;
        --card-gap: 16px;

        height: 680px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--card-gap);
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
        animation: heroFade 1200ms ease 300ms both;
    }

    .customers-wall-column {
        min-width: 0;
    }

    /* Padding equals the gap, so -50% lands exactly on the copy */
    .customers-wall-track,
    .customers-wall-repeat {
        display: flex;
        flex-direction: column;
        gap: var(--card-gap);
    }

    .customers-wall-track {
        padding-bottom: var(--card-gap);
        animation: customersScroll 38s linear infinite;
    }

    .customers-wall-column:nth-child(2) .customers-wall-track {
        animation-duration: 46s;
        animation-direction: reverse;
    }

    .customers-wall-column:nth-child(3) .customers-wall-track {
        animation-duration: 42s;
    }

    .customers-wall:hover .customers-wall-track {
        animation-play-state: paused;
    }

    @keyframes customersScroll {
        from { transform: translateY(0); }
        to { transform: translateY(-50%); }
    }


    /*=== Card ===*/

    .customer-card {
        position: relative;
        overflow: hidden;
        height: var(--card-h);
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--gap-small);
        padding: var(--padding-small);
        border-radius: var(--radius-large);
        color: #fff;
    }

    /* Soft oversized disc for depth without a gradient */
    .customer-card::after {
        content: '';
        position: absolute;
        right: -30%;
        bottom: -30%;
        width: 90%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .customer-card.is-dark { background: var(--dark-color); }
    .customer-card.is-primary { background: var(--primary-color); }
    .customer-card.is-accent { background: var(--accent-color); }
    .customer-card.is-secondary { background: var(--secondary-dark-color); }

    .customer-card.is-light {
        border: 1px solid var(--hairline-color);
        background: #fff;
        color: var(--dark-dark-color);
    }

    .customer-card.is-light::after {
        background: var(--surface-color);
    }

    .customer-card-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--gap-xsmall);
        font-size: 13px;
    }

    .customer-card-head strong{
        color:#fff;
    }

    .customer-logo {
        display: block;
        width: 28px;
        height: 28px;
        padding: 3px;
        object-fit: contain;
        border-radius: 50%;
        background: #fff;
    }

    .is-light .customer-logo {
        border: 1px solid var(--hairline-color);
    }

    .customer-card-foot {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .customer-card-text {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .customer-card-tag {
        padding: 3px var(--padding-xsmall);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .is-light .customer-card-tag {
        background: var(--surface-color);
        color: var(--ink-muted-color);
    }


    /*===================================================
    // USE CASES
    /==================================================*/

    .use-cases {
        padding-top: var(--padding-large);
        padding-bottom: var(--padding-large);
    }

    .use-cases-head {
        max-width: 640px;
        margin: 0 auto var(--margin-medium);
        text-align: center;
    }

    .use-cases-head h2 {
        margin-top: var(--margin-xsmall);
        font-size: clamp(30px, 3.4vw, 42px);
        letter-spacing: -0.035em;
    }

    /* Copy on the left, photo on the right, as on the Nimble use cases page */
    .use-case {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--gap-large);
        padding: var(--padding-large);
    }

    .use-case-title {
        margin: var(--margin-xsmall) 0 var(--margin-small);
        font-size: clamp(32px, 3.6vw, 28px);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .use-case-text {
        max-width: 500px;
        font-size: 17px;
        line-height: 1.6;
    }

    .use-case-points {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xsmall);
        margin-top: var(--margin-medium);
        list-style: none;
    }

    .use-case-points li {
        display: flex;
        align-items: baseline;
        gap: var(--gap-xsmall);
        font-size: 15px;
        color: var(--dark-light-color);
    }

    .use-case-points .fa {
        font-size: 13px;
        color: var(--primary-color);
    }

    .use-case-customers {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-small) var(--gap-medium);
        margin-top: var(--margin-medium);
        list-style: none;
    }

    .use-case-customers li {
        display: flex;
        align-items: center;
        gap: var(--gap-xsmall);
        font-size: 13px;
        color: var(--dark-light-color);
    }

    .use-case-customers img {
        display: block;
        width: 32px;
        height: 32px;
        padding: 2px;
        object-fit: contain;
        border-radius: var(--radius);
        border: 1px solid var(--hairline-color);
        background: #fff;
    }

    .use-case-media {
        display: flex;
        justify-content: center;
    }

    .use-case-media img {
        display: block;
        width: 100%;
        max-width: 480px;
        aspect-ratio: 1.1;
        object-fit: cover;
        border-radius: var(--radius-large);
        box-shadow: 0 40px 80px -48px rgba(0, 13, 35, 0.2);
    }


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

    @media screen and (max-width: 960px) {

        .customers-hero-grid,
        .use-case {
            grid-template-columns: 1fr;
            gap: var(--gap-medium);
        }

        .customers-wall {
            height: 520px;
        }

        .use-case-media {
            order: -1;
        }

    }

    @media screen and (max-width: 560px) {

        .customers-wall {
            grid-template-columns: repeat(2, 1fr);
        }

        .customers-wall-column:nth-child(3) {
            display: none;
        }

    }

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

        .customers-wall-track {
            animation: none;
        }

        .customers-wall-repeat {
            display: none;
        }

    }