/* =================================================================== AC26 FOG section css =================================================================== */
.ac26-fog {
    position: relative;
    padding-block: var(--sectionGap);
    background: var(--surface-1);
    overflow: hidden;

    &::before {
        position: absolute; top: 0; left: 50%;
        width: 900px; height: 420px;
        background: radial-gradient(ellipse at top, var(--blue-50) 0%, transparent 70%);
        transform: translateX(-50%);
        content: "";
    }

    & .container { position: relative; }

    & .ac26-fog__head {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: end;
        gap: var(--sp50);
        margin-bottom: var(--sp60);

        & .section-title-wrap { margin-bottom: 0; }
    }

    & .ac26-fog__intro { font-size: var(--f20); color: var(--body); }

    & .ac26-fog__stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--g30);
    }

    & .ac26-fog__stat {
        display: flex; flex-direction: column;
        gap: var(--sp15);
        padding: var(--sp40) var(--sp30);
        background: var(--white);
        border: 1px solid var(--line);
        border-top: 3px solid var(--primary);
        box-shadow: var(--shadow-sm);
        border-radius: var(--r-md);
        transition: var(--transition);

        &:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
    }

    & .ac26-fog__num {
        font-size: var(--f64);
        font-weight: 600;
        line-height: 1;
        letter-spacing: -.04em;
        color: var(--primary);
    }

    & .ac26-fog__label { font-size: var(--f15); color: var(--body); }

    & .ac26-fog__stat--gap {
        border-top-color: var(--accent);
        & .ac26-fog__num {
            background: var(--gradient-warm);
            -webkit-background-clip: text;
                    background-clip: text;
            color: transparent;
        }
    }

    & .ac26-fog__statement {
        display: flex; flex-direction: column;
        gap: var(--sp4);
        margin-top: var(--sp80);
        padding-top: var(--sp50);
        border-top: 1px solid var(--line);
        font-size: var(--f40);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -.02em;
        color: var(--black);
    }

    & .ac26-fog__statement-accent { color: var(--accent); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .ac26-fog {
        & .ac26-fog__stats { grid-template-columns: 1fr 1fr; }
    }
}

@media (max-width: 991.98px) {
    .ac26-fog {
        & .ac26-fog__head { grid-template-columns: 1fr; gap: var(--sp20); }
    }
}

@media (max-width: 575.98px) {
    .ac26-fog {
        & .ac26-fog__stats { grid-template-columns: 1fr; }
        & .ac26-fog__stat { padding: var(--sp30) var(--sp25); }
    }
}