.background-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(180deg, #f4fff6 0%, #e7f8eb 45%, #def1e4 100%);
}

.glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 55% 45% 60% 40% / 48% 52% 45% 55%;
    opacity: 0.25;
    filter: blur(0px);
    background: radial-gradient(circle at 35% 35%, rgba(140, 214, 167, 0.65), rgba(140, 214, 167, 0));
    animation: floaty 32s ease-in-out infinite;
}

.glow-1 {
    top: -140px;
    left: -160px;
    animation-delay: 0s;
}

.glow-2 {
    top: 55%;
    left: 60%;
    animation-delay: 8s;
    background: radial-gradient(circle at 60% 60%, rgba(120, 192, 152, 0.55), rgba(120, 192, 152, 0));
}

.glow-3 {
    bottom: -160px;
    right: -120px;
    animation-delay: 16s;
    background: radial-gradient(circle at 40% 40%, rgba(176, 229, 197, 0.6), rgba(176, 229, 197, 0));
}

@keyframes floaty {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    30% {
        transform: translate3d(35px, -25px, 0) scale(1.05);
    }
    60% {
        transform: translate3d(-30px, 30px, 0) scale(0.95);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 768px) {
    .glow {
        width: 260px;
        height: 260px;
        opacity: 0.22;
    }

    .glow-1 {
        top: -110px;
        left: -140px;
    }

    .glow-2 {
        top: 48%;
        left: 38%;
    }

    .glow-3 {
        bottom: -140px;
        right: -120px;
    }
}