#solutionsection {
     position: relative !important;
     overflow: hidden !important;
}

#solutionsection > .animated-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

#solutionsection > .e-con-inner {
    position: relative;
    z-index: 1 !important;
}

.animated-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
    hsl(250, 100%, 95%),
    hsl(280, 100%, 96%),
    hsl(210, 100%, 96%)
    );
    background-size: 200% 200%;
    animation: animatedBgShift 15s ease infinite;
}

.animated-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes animatedBgShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* =========================================
   DELIVERABILITY SECTION
========================================= */

#deliverabilitysection,
.deliverability-section {
    position: relative !important;
    overflow: hidden !important;
    background: #0E0F14 !important;
}

/* Background container (inserted by JS) */
#deliverabilitysection > .animated-bg-container,
.deliverability-section > .animated-bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Keep content above background */
#deliverabilitysection > .e-con-inner,
.deliverability-section > .e-con-inner {
    position: relative;
    z-index: 1;
}


/* =========================================
   ANIMATED GRADIENT LAYER
========================================= */

.deliverability-animated-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.12),
            rgba(168, 85, 247, 0.10),
            rgba(34, 211, 238, 0.08)
    );
    background-size: 220% 220%;
    animation: deliverabilityAnimatedBgShift 18s ease infinite;
}

/* Animation */
@keyframes deliverabilityAnimatedBgShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


/* =========================================
   FIGMA CENTER BLUR BLOBS
========================================= */

.deliverability-animated-bg-gradient::before,
.deliverability-animated-bg-gradient::after {
    content: "";
    position: absolute;
    width: 384px;
    height: 384px;
    border-radius: 999999px;
    filter: blur(64px);
    pointer-events: none;
}

/* Blue Blob */
.deliverability-animated-bg-gradient::before {
    background: rgba(21, 93, 252, 0.10);
    left: 50%;
    top: 50%;
    transform: translate(-70%, -60%);
}

/* Purple Blob */
.deliverability-animated-bg-gradient::after {
    background: rgba(127, 34, 254, 0.10);
    left: 50%;
    top: 50%;
    transform: translate(-15%, -35%);
}


/* =========================================
   MOUSE FOLLOW GLOW LAYER (from JS)
========================================= */

#deliverabilitysection .animated-bg-glow,
.deliverability-section .animated-bg-glow {
    position: absolute;
    inset: 0;
}


/* =========================================
   RESPONSIVE TWEAKS
========================================= */

@media (max-width: 768px) {
    .deliverability-animated-bg-gradient::before,
    .deliverability-animated-bg-gradient::after {
        width: 280px;
        height: 280px;
        filter: blur(48px);
    }
}