.section-3d-bg {
    position: relative;
    background: var(--bg-light-1, #ffffff);
    /* Prevents background elements from leaking into other sections */
    isolation: isolate; 
    overflow: hidden;
}

/* 1. LAYER -3: Composite Radial Gradients (The Glow) */
.section-3d-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 70% 55% at 15% 85%, var(--eds-orange-dim), transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 15%, var(--eds-gold-dim), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fffbf5 50%, #f8fafc 100%);
    z-index: -3;
    pointer-events: none;
}

/* 2. LAYER -2: Organic Noise Texture (Prevents banding) */
.section-3d-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: var(--noise-opacity);
    z-index: -2;
    pointer-events: none;
}


/* 3. LAYER -1: Technical Mesh & Grids */
.section-bg-mesh {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--eds-orange-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--eds-orange-dim) 1px, transparent 1px);
    background-size: 50px 50px;
    /* Refined Mask: Fades out towards the edges to create depth */
    mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 85%);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* 4. LAYER 0: Kinetic Orbs (Animated Blobs) */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--blur-orb));
    will-change: transform;
    z-index: -1;
    opacity: 0.45;
}

.orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--eds-orange) 0%, transparent 70%);
    top: -10%; left: -5%;
    animation: orbFloat 22s ease-in-out infinite;
}

.orb-2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--eds-gold) 0%, transparent 70%);
    bottom: -15%; right: -10%;
    animation: orbFloat 30s ease-in-out infinite reverse;
}

.orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--eds-purple) 0%, transparent 70%);
    top: 40%; left: 45%;
    animation: orbFloat 25s ease-in-out infinite 2s;
}

/* Dark Section Specialization (Stats / CTA) */
.section-dark, .stats, .cta {
    background: var(--bg-eds-deep) !important;
}

.section-dark::before {
    background: 
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255, 107, 53, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 70%, rgba(212, 160, 23, 0.06) 0%, transparent 50%),
        linear-gradient(160deg, #050510 0%, #0f172a 50%, #050510 100%) !important;
}

.section-dark .section-bg-mesh {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    opacity: 0.3;
}

/* 5. SEAMLESS TRANSITIONS (Fade Edges) */
.section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    /* Creates a smooth fade into the next section */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.05));
    pointer-events: none;
    z-index: 2;
}

/* 6. TECHNICAL ORNAMENTATION (Blueprint Corners) */
.blueprint-corner {
    position: absolute;
    width: 60px; height: 60px;
    border: 1px solid var(--eds-orange-dim);
    z-index: 3;
    pointer-events: none;
    opacity: 0.4;
}

.blueprint-corner.tl { top: 30px; left: 30px; border-right: 0; border-bottom: 0; }
.blueprint-corner.tr { top: 30px; right: 30px; border-left: 0; border-bottom: 0; }
.blueprint-corner.bl { bottom: 30px; left: 30px; border-right: 0; border-top: 0; }
.blueprint-corner.br { bottom: 30px; right: 30px; border-left: 0; border-top: 0; }

/* ANIMATIONS */
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(40px, -30px) scale(1.08); }
    50%      { transform: translate(-25px, 40px) scale(0.94); }
    75%      { transform: translate(35px, 20px) scale(1.04); }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .gradient-orb {
        animation: none !important;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gradient-orb {
        width: 300px !important;
        height: 300px !important;
        filter: blur(60px);
    }
    .orb-3 { display: none; }
}