/* Explain: Layout utilities and background styles for various page sections. */
.section-pad {
    padding-top: clamp(5rem, 10vw, 8rem);
    padding-bottom: clamp(5rem, 10vw, 8rem);
}

.hero-stage {
    background:
        radial-gradient(circle at 18% 14%, rgba(212, 175, 55, 0.15), transparent 32rem),
        linear-gradient(135deg, #000000 0%, #050505 48%, #0a0a0a 100%);
}

.hero-dashboard {
    position: relative;
    z-index: 1;
    align-items: stretch;
    max-width: 44rem;
    width: 100%;
    margin-inline: auto;
}

.hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.55;
    pointer-events: none;
}

.hero-orb--one {
    width: 16rem;
    height: 16rem;
    right: 8%;
    top: 17%;
    background: rgba(212, 175, 55, 0.1);
}

.hero-orb--two {
    width: 13rem;
    height: 13rem;
    right: 30%;
    bottom: 10%;
    background: rgba(212, 175, 55, 0.15);
}

.strategy-field {
    background:
        radial-gradient(circle at 80% 10%, rgba(212, 175, 55, 0.1), transparent 30rem),
        linear-gradient(180deg, #000000 0%, #050505 100%);
}

.values-field {
    background:
        radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.12), transparent 28rem),
        radial-gradient(circle at 8% 88%, rgba(212, 175, 55, 0.05), transparent 26rem),
        linear-gradient(180deg, #050505 0%, #000000 100%);
}

.contact-field {
    background:
        radial-gradient(circle at 16% 18%, rgba(212, 175, 55, 0.12), transparent 26rem),
        radial-gradient(circle at 92% 74%, rgba(212, 175, 55, 0.05), transparent 30rem),
        #050505;
}

@media (max-width: 640px) {
    .hero-stage {
        padding-top: 3.5rem;
    }

    .hero-dashboard {
        max-width: 100%;
    }
}