/* Explain: Section padding, hero background gradient, and contact section radial gradient. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 8rem);
    padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.hero {
    background:
        radial-gradient(circle at 80% 26%, rgba(230, 51, 41, 0.24), transparent 34rem),
        linear-gradient(180deg, rgba(21, 13, 7, 0) 62%, var(--background-color) 100%);
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(52px);
    pointer-events: none;
    z-index: -1;
}

.orb-red {
    width: 26rem;
    height: 26rem;
    right: 2%;
    top: 6%;
    background: rgba(230, 51, 41, 0.34);
}

.orb-amber {
    width: 20rem;
    height: 20rem;
    left: 2%;
    bottom: 4%;
    background: rgba(255, 184, 0, 0.2);
}

.contact-section {
    background:
        radial-gradient(circle at 10% 14%, rgba(255, 140, 66, 0.12), transparent 26rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}