.hero-parallax-container {
    position: absolute !important;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.parallax-bubble {
    position: absolute !important;
    border-radius: 50%;
    will-change: transform;
}

.bubble-1 {
    top: 50%;
    left: 40px;
    width: 80px !important;
    height: 80px;
    background: rgba(124, 58, 237, 0.2);
    filter: blur(24px);
}

.bubble-2 {
    top: 33%;
    right: 40px;
    width: 128px !important;
    height: 128px;
    background: rgba(168, 85, 247, 0.2);
    filter: blur(24px);
}

.bubble-3 {
    bottom: 25%;
    left: 25%;
    width: 64px !important;
    height: 64px;
    background: rgba(124, 58, 237, 0.3);
    filter: blur(24px);
}

.bubble-4 {
    top: 25%;
    right: 25%;
    width: 96px !important;
    height: 96px;
    background: rgba(168, 85, 247, 0.15);
    filter: blur(40px);
}

.bubble-5 {
    bottom: 33%;
    right: 33%;
    width: 56px !important;
    height: 56px;
    background: rgba(124, 58, 237, 0.25);
    filter: blur(24px);
}

.bubble-6 {
    top: 66%;
    left: 33%;
    width: 112px !important;
    height: 112px;
    background: rgba(168, 85, 247, 0.1);
    filter: blur(40px);
}

@media (max-width: 768px) {
    .parallax-bubble {
        display: none !important;
    }
}