/* Explain: Refined section spacing and subtle reveal animations. */
.section {
    position: relative;
    padding: 60px 0;
}

.section-head {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.section-title {
    font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.4rem);
    line-height: 1.5;
}

.section-title .accent {
    color: var(--primary-dark);
}

.section-sub {
    margin: 12px auto 0;
    max-width: 42rem;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.9;
}

.section-dark {
    color: var(--text-on-dark);
    background: var(--navy);
}

.section-dark .section-title { color: var(--text-on-dark); }
.eyebrow-light { color: var(--accent-color); }
.sub-light { color: var(--text-muted-on-dark); }
.section-tint { background: var(--surface-2); }

.reveal {
    opacity: 1;
}

.reveal.reveal-pending {
    opacity: 0;
}

.reveal.reveal-pending.is-visible {
    opacity: 1;
    transition: opacity 500ms var(--ease-out);
}

@media (min-width: 1024px) {
    .section { padding: 84px 0; }
    .section-head { margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .reveal.reveal-pending.is-visible {
        transition-duration: 400ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal.reveal-pending {
        opacity: 1;
        transition: none;
    }
}