/* Explain: Layout utilities for premium spatial design */
.section-pad {
    padding-top: clamp(6rem, 12vw, 10rem);
    padding-bottom: clamp(6rem, 12vw, 10rem);
}

.hero-layout {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    animation: float 20s infinite ease-in-out alternate;
}

.orb-blue {
    width: 600px;
    height: 600px;
    background: var(--primary-color);
    top: -100px;
    right: -200px;
    opacity: 0.15;
}

.orb-light {
    width: 400px;
    height: 400px;
    background: var(--accent-color);
    bottom: 100px;
    left: -100px;
    opacity: 0.2;
    animation-delay: -5s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(50px, 30px) scale(1.1);
    }
}