/* Explain: Layout structure and background gradients for cyberpunk sections. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.hero-split {
    background:
        radial-gradient(circle at 78% 12%, rgba(0, 229, 255, 0.20), transparent 34rem),
        radial-gradient(circle at 8% 88%, rgba(255, 46, 151, 0.18), transparent 26rem),
        linear-gradient(180deg, #070b16 0%, #0a1120 58%, var(--background-color) 100%);
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: var(--doodle-pattern);
    background-size: 380px 380px;
    mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: -1;
}

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

.orb-blue {
    width: 24rem;
    height: 24rem;
    right: 4%;
    top: 4%;
    background: rgba(0, 229, 255, 0.38);
}

.orb-cyan {
    width: 17rem;
    height: 17rem;
    left: 2%;
    bottom: 6%;
    background: rgba(255, 46, 151, 0.34);
}

.contact-section {
    background:
        radial-gradient(circle at 6% 10%, rgba(0, 229, 255, 0.14), transparent 26rem),
        radial-gradient(circle at 94% 90%, rgba(255, 46, 151, 0.14), transparent 24rem),
        linear-gradient(180deg, var(--background-color), #070b16);
}