.content-wrapper {
    position: relative;
    z-index: 1;
}

.mesh-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background-color: black;
    filter: blur(90px);
}

.cloud {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
}

.cloud-1 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.7) 0%, rgba(99, 102, 241, 0) 70%);
    top: -15%;
    left: -10%;
    animation: float1 8s infinite alternate steps(60);
}

.cloud-2 {
    width: 65vw;
    height: 65vw;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.5) 0%, rgba(79, 70, 229, 0) 70%);
    bottom: -25%;
    right: -15%;
    animation: float1 8s infinite alternate steps(60);
}

.cloud-3 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(129, 140, 255, 0.4) 0%, rgba(129, 140, 255, 0) 70%);
    top: 35%;
    left: 30%;
    animation: float1 8s infinite alternate steps(60);
}

@keyframes float1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(12vw, 18vh) scale(1.25); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) scale(1.10); }
    100% { transform: translate(-18vw, -12vh) scale(0.90); }
}

@keyframes float3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-12vw, 15vh); }
}

@media (max-width: 768px) {
    .mesh-background { filter: blur(50px); }
    .cloud-1 { width: 100vw; height: 100vw; }
    .cloud-2 { width: 100vw; height: 100vw; }
    .cloud-3 { width: 100vw; height: 100vw; }
}