/* Explain: Layout utilities for section spacing, background elements, and decorative orbs. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

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

.orb-sage {
    width: 26rem;
    height: 26rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 67, 64, 0.2);
}

.orb-terracotta {
    width: 17rem;
    height: 17rem;
    inset-inline-start: 3%;
    bottom: 12%;
    background: rgba(237, 78, 140, 0.15);
}

.contact-section {
    background:
        radial-gradient(circle at 82% 20%, rgba(237, 78, 140, 0.16), transparent 24rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}