/* ==========================================================================
   Home — Experience bento strip  (Figma node 1:1238)
   Pale blue slab with 80px top corners, overlapping the hero, six stat cards.
   ========================================================================== */

.home-experience {
    --home-experience-bg: #eff4ff;
    --home-experience-num: #f97316;
    --home-experience-label: #434656;

    position: relative;
    z-index: 3;
    /* Figma: the bar sits at y=672 inside the 902px hero frame, so it rides
       over the full 230px of its own height. */
    margin-top: -230px;
    padding: 53px 0;
    background: var(--home-experience-bg);
    border-radius: 80px 80px 0 0;
}

.home-experience__grid {
    display: flex;
    align-items: stretch;
    gap: 26px;
}

.home-experience__card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 124px;
    padding: 20px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    background: var(--gg-white);
    border-radius: var(--gg-radius);
}

.home-experience__value {
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    color: var(--home-experience-num);
    white-space: nowrap;
}

.home-experience__label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--home-experience-label);
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
    .home-experience__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .home-experience {
        margin-top: -64px;
        padding: 44px 0;
        border-radius: 48px 48px 0 0;
    }
}

@media (max-width: 700px) {
    .home-experience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 560px) {
    .home-experience {
        margin-top: -40px;
        padding: 36px 0;
        border-radius: 32px 32px 0 0;
    }

    .home-experience__card {
        min-height: 104px;
        padding: 16px 12px;
    }

    .home-experience__value {
        font-size: 26px;
        line-height: 34px;
    }

    .home-experience__label {
        font-size: 14px;
        line-height: 20px;
    }
}