.dashboard-cta-ambient {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dashboard-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.dashboard-cta-content {
    position: relative;
    z-index: 2;
}

.dashboard-blob {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.30;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 210, 135, 0.96) 0%,
        rgba(255, 149, 0, 0.74) 34%,
        rgba(255, 115, 0, 0.48) 60%,
        rgba(255, 115, 0, 0) 100%
    );
}

.dashboard-blob-1 {
    width: 260px;
    height: 260px;
    left: -40px;
    top: -20px;
    animation: dashboardBlobFloat1 20s ease-in-out infinite alternate;
}

.dashboard-blob-2 {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -60px;
    opacity: 0.26;
    animation: dashboardBlobFloat2 24s ease-in-out infinite alternate;
}

.dashboard-blob-3 {
    width: 240px;
    height: 240px;
    left: 18%;
    bottom: -90px;
    opacity: 0.22;
    animation: dashboardBlobFloat3 22s ease-in-out infinite alternate;
}

.dashboard-blob-4 {
    width: 220px;
    height: 220px;
    right: 22%;
    bottom: -70px;
    opacity: 0.18;
    animation: dashboardBlobFloat4 26s ease-in-out infinite alternate;
}

.dashboard-blob-5 {
    width: 180px;
    height: 180px;
    left: 42%;
    top: 14%;
    opacity: 0.16;
    animation: dashboardBlobFloat5 18s ease-in-out infinite alternate;
}

.dashboard-blob-6 {
    width: 210px;
    height: 210px;
    right: 38%;
    bottom: 8%;
    opacity: 0.14;
    animation: dashboardBlobFloat6 21s ease-in-out infinite alternate;
}

@keyframes dashboardBlobFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    28% {
        transform: translate3d(72px, 18px, 0) scale(1.08);
    }
    58% {
        transform: translate3d(118px, 54px, 0) scale(1.03);
    }
    100% {
        transform: translate3d(86px, 26px, 0) scale(0.97);
    }
}

@keyframes dashboardBlobFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    34% {
        transform: translate3d(-86px, 24px, 0) scale(1.08);
    }
    68% {
        transform: translate3d(-132px, 58px, 0) scale(1.02);
    }
    100% {
        transform: translate3d(-92px, 12px, 0) scale(0.95);
    }
}

@keyframes dashboardBlobFloat3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    40% {
        transform: translate3d(44px, -42px, 0) scale(1.06);
    }
    72% {
        transform: translate3d(82px, -92px, 0) scale(1.01);
    }
    100% {
        transform: translate3d(26px, -54px, 0) scale(0.96);
    }
}

@keyframes dashboardBlobFloat4 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    38% {
        transform: translate3d(-46px, -34px, 0) scale(1.10);
    }
    70% {
        transform: translate3d(-94px, -82px, 0) scale(1.02);
    }
    100% {
        transform: translate3d(-36px, -46px, 0) scale(0.94);
    }
}

@keyframes dashboardBlobFloat5 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-18px, 18px, 0) scale(1.08);
    }
    100% {
        transform: translate3d(22px, -12px, 0) scale(0.96);
    }
}

@keyframes dashboardBlobFloat6 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    45% {
        transform: translate3d(-24px, -22px, 0) scale(1.05);
    }
    100% {
        transform: translate3d(18px, 12px, 0) scale(0.97);
    }
}

@media (max-width: 767.98px) {
    .dashboard-blob {
        filter: blur(34px);
        opacity: 0.22;
    }

    .dashboard-blob-1 {
        width: 190px;
        height: 190px;
        left: -50px;
        top: -20px;
    }

    .dashboard-blob-2 {
        width: 220px;
        height: 220px;
        right: -70px;
        top: -50px;
    }

    .dashboard-blob-3 {
        width: 180px;
        height: 180px;
        left: 10%;
        bottom: -70px;
    }

    .dashboard-blob-4 {
        width: 160px;
        height: 160px;
        right: 10%;
        bottom: -55px;
    }

    .dashboard-blob-5 {
        width: 130px;
        height: 130px;
        left: 38%;
        top: 10%;
    }

    .dashboard-blob-6 {
        width: 150px;
        height: 150px;
        right: 28%;
        bottom: 4%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-blob {
        animation: none !important;
    }
}