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

    & .ac26-hero__ring {
        position: absolute;
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        pointer-events: none;
    }
    & .ac26-hero__ring--1 { top: -220px; right: -160px; width: 640px; height: 640px; }
    & .ac26-hero__ring--2 { bottom: -260px; left: -200px; width: 520px; height: 520px; }

    & .container { position: relative; z-index: 1; }

    & .ac26-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        margin-bottom: var(--sp50);
        font-size: var(--f14);
        font-weight: 500;
        color: var(--muted);

        & a { color: var(--ink); transition: var(--transition); }
        & a:hover { color: var(--primary); }
        & li { display: flex; align-items: center; gap: var(--sp8); }
        & li + li::before {
            width: 6px; height: 6px;
            border-top: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
            transform: rotate(45deg);
            content: "";
        }
    }

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

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

    & .ac26-hero__kicker {
        margin-bottom: var(--sp15);
        font-size: var(--f18);
        font-weight: 500;
        color: var(--body);
    }

    & .ac26-hero__title {
        max-width: 720px;
        font-size: var(--f64);
        & span {
            background: var(--gradient-warm);
            -webkit-background-clip: text;
                    background-clip: text;
            color: transparent;
        }
    }

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

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

    & .ac26-hero__note {
        margin-top: var(--sp20);
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }

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

    & .ac26-hero__glow {
        position: absolute;
        width: 86%; aspect-ratio: 1;
        background: radial-gradient(circle, var(--blue-100) 0%, rgba(220, 230, 253, 0) 68%);
        border-radius: var(--r-full);
    }

    & .ac26-hero__book {
        position: relative;
        z-index: 1;
        width: 76%;
        max-width: 430px;
        filter: drop-shadow(0 40px 50px rgba(15, 42, 120, .22));
    }

    & .ac26-hero__chip {
        position: absolute;
        z-index: 2;
        display: flex; flex-direction: column;
        padding: var(--sp15) var(--sp25);
        background: var(--white);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);

        & strong {
            font-size: var(--f40);
            font-weight: 600;
            line-height: 1;
            letter-spacing: -.03em;
            color: var(--primary);
        }
        & span { font-size: var(--f13); font-weight: 600; color: var(--muted); }
    }
    & .ac26-hero__chip--leaders { top: 12%; left: 0; }
    & .ac26-hero__chip--clients { right: 0; bottom: 14%; & strong { color: var(--accent); } }
}

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

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

@media (max-width: 575.98px) {
    .ac26-hero {
        & .ac26-hero__crumbs { margin-bottom: var(--sp30); }
        & .ac26-hero__visual { min-height: 360px; }
        & .ac26-hero__chip { padding: var(--sp10) var(--sp15); }
    }
}