/* Explain: Section layouts, hero, and content bands for the site. */
.section-pad {
    padding-top: clamp(4.5rem, 8vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}

.section-pad-sm {
    padding-top: clamp(3rem, 5vw, 4.5rem);
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.hero-shell {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
}

.hero-shell::before {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 82% 16%, rgba(154, 170, 187, 0.18), transparent 22rem),
        radial-gradient(circle at 6% 92%, rgba(46, 95, 128, 0.12), transparent 26rem);
    content: "";
    pointer-events: none;
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #0D2643 0%, #123154 58%, #1E4E77 100%);
    color: var(--text-on-dark);
}

.page-hero::after {
    position: absolute;
    right: -6rem;
    top: -6rem;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: rgba(178, 190, 204, 0.16);
    content: "";
    pointer-events: none;
}

.band-surface {
    background: var(--surface-color);
}

.band-alt {
    background: var(--surface-alt);
}

.cta-section {
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}