/* ═══════════════════════════════════════════════════════════════
   Home · USP / trust-strook — "zacht-tactiel toy-craft"
   Eén afgerond crème/wit panel met 4 zachte cellen. Elke cel een
   speels icoon-chip in afwisselend getinte cirkel (grape/coral/
   sun/teal), titel + subtitel. Springerige hover-lift, warme schaduw.
   Sectie-prefix: .usp-*  · alle kleuren via tokens.
   ═══════════════════════════════════════════════════════════════ */

/* Het panel: één zacht, warm-getint vlak met subtiele clay-diepte. */
.usp-band {
    list-style: none;
    margin: 0;
    padding: clamp(14px, 2vw, 22px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1.4vw, 16px);
    background: radial-gradient(120% 150% at 15% -10%, #3E82E6 0%, #2A6AD6 40%, #1C55BE 78%, #1544A0 100%);
    border: 1px solid #1C55BE;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}

/* Eén cel = één USP. Tikdoel ruim, tekst leesbaar gegroepeerd. */
.usp-kaart {
    display: flex;
    align-items: center;
    gap: clamp(11px, 1.2vw, 16px);
    min-height: 88px;
    padding: clamp(13px, 1.4vw, 18px) clamp(13px, 1.3vw, 18px);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: none;
    transition: transform .3s var(--veer), box-shadow .3s var(--vloei);
}

/* Verticale scheidslijntjes vervallen — losse witte kaarten op het panel. */

/* Springerige lift + warmere schaduw bij hover. */
.usp-kaart:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

/* Icoon-chip: zachte getinte cirkel, lichte clay-diepte. */
.usp-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 4vw, 58px);
    height: clamp(48px, 4vw, 58px);
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    transition: transform .35s var(--veer);
}
.usp-chip .icoon {
    width: 26px;
    height: 26px;
    vertical-align: 0;
}

/* Speelse "squish"-wiebel van de chip bij hover op de cel. */
.usp-kaart:hover .usp-chip {
    transform: scale(1.08) rotate(-5deg);
}

/* Afwisselende tinten — getint vlak + verzadigde-inkt icoon (≥4.5:1). */
.usp-chip.is-grape { background: #fff; color: var(--grape); }
.usp-chip.is-coral { background: var(--coral); color: #fff; }
.usp-chip.is-sun   { background: var(--sun);   color: #14204A; }
.usp-chip.is-teal  { background: var(--teal);  color: #fff; }

/* Tekstblok. */
.usp-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.usp-titel {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-base);
    line-height: 1.18;
    color: #fff;
}
.usp-sub {
    font-size: var(--t-sm);
    line-height: 1.4;
    color: #D3E0F7;
}

/* ── Responsief: 4 → 2 → 1 ───────────────────────────────────── */
@media (max-width: 860px) {
    .usp-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .usp-band {
        grid-template-columns: 1fr;
        border-radius: var(--r-lg);
    }
    .usp-kaart { min-height: 0; }
}

/* ── Reduced motion: lift/wiebel tot rust ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .usp-kaart:hover { transform: none; }
    .usp-kaart:hover .usp-chip { transform: none; }
}