/* =================================================================== HOME HERO section css =================================================================== */
.home-hero {
    position: relative;
    padding-block: var(--sp80) var(--sp100);
    background: var(--blue-50);
    overflow: hidden;


    & .home-hero__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp60);
    }

    & .home-hero__eyebrow { margin-bottom: var(--sp20); }

    & .home-hero__title { max-width: 680px; }

    & .home-hero__text {
        max-width: 540px;
        margin-top: var(--sp25);
        font-size: var(--f18);
    }

    & .home-hero__actions { margin-top: var(--sp40); }

    & .home-hero__pledge {
        display: flex; flex-wrap: wrap;
        gap: var(--sp10) var(--sp25);
        margin-top: var(--sp40);
        padding-top: var(--sp25);
        border-top: 1px solid var(--line);

        & li {
            display: flex; align-items: center;
            gap: var(--sp8);
            font-size: var(--f14);
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ink);

            &::before {
                width: 8px; height: 8px;
                background: var(--gradient-warm);
                border-radius: var(--r-full);
                content: "";
            }
        }
    }

    & .home-hero__visual {
        position: relative;
        display: grid; place-items: center;
        min-height: 560px;
    }

    & .home-hero__blob {
        position: absolute;
        pointer-events: none;
    }
    & .home-hero__blob--back {
        top: 2%; right: 4%;
        width: 78%; aspect-ratio: 1;
        background: var(--blue-100);
        border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%;
    }
    & .home-hero__blob--front {
        bottom: 4%; left: 8%;
        width: 62%; aspect-ratio: 1;
        background: var(--gradient1);
        border-radius: 42% 58% 38% 62% / 55% 38% 62% 45%;
        opacity: .95;
    }

    & .home-hero__book {
        position: relative;
        z-index: 1;
        width: 74%;
        max-width: 440px;
        filter: drop-shadow(0 40px 50px rgba(0, 12, 52, .28));
    }

    & .home-hero__card {
        position: absolute;
        z-index: 2;
        display: flex; align-items: center;
        gap: var(--sp12);
        padding: var(--sp15) var(--sp20);
        background: var(--white);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
    }

    & .home-hero__card--stat {
        top: 14%; left: 0;
        flex-direction: column; align-items: flex-start;
        gap: 0;
    }

    & .home-hero__card-num {
        font-size: var(--f40);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -.03em;
        color: var(--primary);
    }

    & .home-hero__card-label { font-size: var(--f13); font-weight: 600; color: var(--muted); }

    & .home-hero__card--clients {
        right: 0; bottom: 12%;
        font-size: var(--f15);
        color: var(--body);
        & strong { color: var(--ink); }
    }

    & .home-hero__card-icon {
        display: grid; place-items: center;
        width: 42px; height: 42px;
        background: var(--blue-50);
        border-radius: var(--r-full);
        color: var(--primary);
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .home-hero {
        & .home-hero__visual { min-height: 480px; }
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        & .home-hero__inner { grid-template-columns: 1fr; }
        & .home-hero__visual { max-width: 560px; width: 100%; margin-inline: auto; }
    }
}


@media (max-width: 575.98px) {
    .home-hero {
        & .home-hero__visual { min-height: 380px; }
        & .home-hero__card { padding: var(--sp10) var(--sp15); }
        & .home-hero__card--clients { font-size: var(--f13); }
        & .home-hero__actions .btn-icon { width: 100%; }
    }
}