@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');
* {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }

    .font-display {
        font-family: 'Playfair Display', serif;
    }

    body {
        overflow-x: hidden;
    }

/* Clean White Background with Colorful Pixels */
        .futuristic-pixel-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            z-index: -1;
            overflow: hidden;
        }

/* Subtle Upward Moving Pixels */
        .pixel-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }
        
        .pixel {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(59, 130, 246, 0.3);
            border-radius: 1px;
            animation: pixelRise linear infinite;
        }
        
        .pixel:nth-child(odd) {
            background: rgba(99, 102, 241, 0.25);
            width: 1px;
            height: 3px;
        }
        
        .pixel:nth-child(3n) {
            background: rgba(168, 85, 247, 0.2);
            width: 3px;
            height: 1px;
        }
        
        .pixel:nth-child(5n) {
            background: rgba(147, 51, 234, 0.15);
            width: 2px;
            height: 2px;
        }
        
        @keyframes pixelRise {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: translateY(90vh) scale(1);
            }
            90% {
                opacity: 1;
                transform: translateY(-10vh) scale(1);
            }
            100% {
                transform: translateY(-20vh) scale(0);
                opacity: 0;
            }
        }
        
        /* Floating Particles */
        .particle {
            position: absolute;
            background: rgba(6, 182, 212, 0.6);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        .particle:nth-child(1) { width: 4px; height: 4px; top: 20%; left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { width: 6px; height: 6px; top: 60%; left: 20%; animation-delay: 1s; }
        .particle:nth-child(3) { width: 3px; height: 3px; top: 40%; left: 70%; animation-delay: 2s; }
        .particle:nth-child(4) { width: 5px; height: 5px; top: 80%; left: 80%; animation-delay: 3s; }
        .particle:nth-child(5) { width: 4px; height: 4px; top: 30%; left: 90%; animation-delay: 4s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
        }

 /* Floating Keywords */
        .floating-keywords {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }
        
        .keyword {
            position: absolute;
            font-size: 10px;
            font-weight: 400;
            opacity: 0.15;
            animation: keywordFloat linear infinite;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.5px;
            z-index: 5;
        }
        
        @keyframes keywordFloat {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(-20vh) rotate(360deg);
                opacity: 0;
            }
        }

        .keyword.tech { color: #06b6d4; }
        .keyword.marketing { color: #8b5cf6; }
        .keyword.digital { color: #10b981; }
        .keyword.analytics { color: #f59e0b; }
        .keyword.social { color: #ec4899; }
        .keyword.seo { color: #3b82f6; }
        .keyword.design { color: #ef4444; }
        .keyword.growth { color: #84cc16; }