/* Floating animations (plain CSS so it works without a Tailwind build) */
        @keyframes float-left {
            0%, 100% {
                transform: translateY(0) translateX(0) scale(1);
            }

            50% {
                transform: translateY(-20px) translateX(12px) scale(1.04);
            }
        }

        @keyframes float-right {
            0%, 100% {
                transform: translateY(0) translateX(0) scale(1);
            }

            50% {
                transform: translateY(18px) translateX(-12px) scale(1.06);
            }
        }

        .blob-left {
            animation: float-left 6.5s ease-in-out infinite;
            filter: blur(28px);
            opacity: 0.42;
            transform-origin: center;
        }

        .blob-right {
            animation: float-right 7.2s ease-in-out infinite;
            filter: blur(22px);
            opacity: 0.48;
            transform-origin: center;
        }

        /* small extra: improve sharp edges on Safari/Chrome */
        .blob-shape {
            will-change: transform;
            backface-visibility: hidden;
        }