.text-gradient {
            background: linear-gradient(135deg, #ff0000 0%, #4f0000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .logo-gradient {
            background: linear-gradient(135deg, #bdbdbd 0%, #a4a4a4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-slide {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .slide-1 { background-image: url('https://res.cloudinary.com/dllsrleu6/image/upload/v1758470859/1757743894294_njieui.jpg'); }
        .slide-2 { background-image: url('https://res.cloudinary.com/dllsrleu6/image/upload/v1758470867/1757754621190_yqkzzy.jpg'); }
        .slide-3 { background-image: url('https://res.cloudinary.com/dllsrleu6/image/upload/v1758472969/1757756329408_gvggna.jpg'); }
        .slide-4 { background-image: url('https://res.cloudinary.com/dllsrleu6/image/upload/v1758470895/1757756564520_r8aa30.jpg'); }
        .slide-5 { background-image: url('https://res.cloudinary.com/dllsrleu6/image/upload/v1758470881/1757770651277_b2plow.jpg'); }
        .carousel-container {
            width: 500%;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .hero-content {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }
        .hero-slide.active .hero-content {
            opacity: 1;
            transform: translateY(0);
        }
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .section-primary{
            background: #101010;
        }
        .section-secondary{
            background-color: #101010;
        }
        .feature-card, .game-card, .tech-card{
            background-color: #1B1B1B !important;
        }
        .news-card, .ai-feature{
            background: rgb(18, 18, 18) !important;
        }
        .dot-active{
           width: 35px !important;
        }
        .logo-gradient {
            background: linear-gradient(135deg, #bdbdbd 0%, #a4a4a4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .grid-pattern {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,0,0,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
        }
        
        .pixel-art-bg {
            background: 
                repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 2px, transparent 2px, transparent 8px),
                repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) 2px, transparent 2px, transparent 8px);
        }
        
        .neural-network-bg {
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="red"/><circle cx="50" cy="30" r="3" fill="red"/><circle cx="80" cy="25" r="3" fill="red"/><circle cx="30" cy="70" r="3" fill="red"/><circle cx="70" cy="75" r="3" fill="red"/><line x1="20" y1="20" x2="50" y2="30" stroke="red" stroke-width="1"/><line x1="50" y1="30" x2="80" y2="25" stroke="red" stroke-width="1"/><line x1="20" y1="20" x2="30" y2="70" stroke="red" stroke-width="1"/><line x1="80" y1="25" x2="70" y2="75" stroke="red" stroke-width="1"/></svg>');
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: ripple 600ms linear;
        }
        @media (min-width: 768px) {
            .hero-container {
                height: 45rem;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-container {
                height: 30rem;
            }
        }

        @media (max-width: 640px) {
            .hero-container {
                height: 20rem;
            }
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000000; }
        ::-webkit-scrollbar-thumb { background: #ff0000; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #cc0000; }