* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #0c1445 0%, #1a237e 25%, #283593 50%, #3949ab 75%, #5c6bc0 100%);
            font-family: 'Arial', sans-serif;
            cursor: none;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Animated background particles */
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }

        .particle:nth-child(odd) {
            animation-delay: -2s;
            background: rgba(100, 200, 255, 0.15);
        }

        .particle:nth-child(3n) {
            animation-delay: -4s;
            background: rgba(0, 255, 200, 0.1);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
        }

        /* Main title */
        .title {
            font-size: clamp(3rem, 8vw, 8rem);
            font-weight: 900;
            text-align: center;
            background: linear-gradient(45deg, #ffffff, #64b5f6, #81c784, #ffb74d, #f06292);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 4s ease-in-out infinite, titlePulse 3s ease-in-out infinite;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            letter-spacing: 0.05em;
            position: relative;
            z-index: 10;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes titlePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Glowing orbs */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(1px);
            animation: orbFloat 8s ease-in-out infinite;
        }

        .orb-1 {
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(100, 200, 255, 0.3), rgba(100, 200, 255, 0.1), transparent);
            top: 20%;
            left: 15%;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(255, 100, 200, 0.3), rgba(255, 100, 200, 0.1), transparent);
            bottom: 30%;
            right: 20%;
            animation-delay: -3s;
        }

        .orb-3 {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(100, 255, 200, 0.4), rgba(100, 255, 200, 0.1), transparent);
            top: 60%;
            left: 70%;
            animation-delay: -1.5s;
        }

        @keyframes orbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -30px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
        }

        /* Interactive cursor effect */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: difference;
            z-index: 9999;
            transition: transform 0.1s ease;
        }

        .cursor-trail {
            position: fixed;
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
        }

        /* Ripple effect on hover */
        .title:hover {
            animation: titlePulse 3s ease-in-out infinite, gradientShift 4s ease-in-out infinite, ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
            100% { box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); }
        }

        /* Subtle scan lines effect */
        .scanlines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(255, 255, 255, 0.03) 2px,
                rgba(255, 255, 255, 0.03) 4px
            );
            pointer-events: none;
            z-index: 1;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .title {
                font-size: clamp(2rem, 12vw, 4rem);
                letter-spacing: 0.02em;
            }
            
            .orb-1, .orb-2, .orb-3 {
                opacity: 0.7;
            }
        }