/* Explain: CSS for page layout structure, spacing, and section styling. */
.section-pad {
    padding-top: clamp(4.5rem, 8vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}

.hero-section {
    background:
        radial-gradient(circle at 82% 12%, rgba(30, 136, 229, 0.12), transparent 26rem),
        radial-gradient(circle at 8% 90%, rgba(15, 42, 67, 0.07), transparent 24rem),
        var(--background-color);
}

.hero-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(234, 241, 248, 0.7), transparent 60%);
    pointer-events: none;
}

html[data-theme="dark"] .hero-glow {
    background: linear-gradient(180deg, rgba(30, 136, 229, 0.14), transparent 60%);
}

.dark-band {
    background:
        radial-gradient(circle at 12% 20%, rgba(30, 136, 229, 0.22), transparent 24rem),
        radial-gradient(circle at 88% 80%, rgba(30, 136, 229, 0.16), transparent 22rem),
        var(--footer-bg);
}

.contact-section {
    background:
        radial-gradient(circle at 92% 8%, rgba(30, 136, 229, 0.1), transparent 24rem),
        var(--surface-color);
}