/* Base Configuration */
        :root {
            --neon-blue: #00e0ff;
            --neon-fuchsia: #f04e98;
            --bg-color: #0d0d1a;
            --card-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
            --gradient-1: #0e0e1a;
            --gradient-2: #1e1e35;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: #e2e8f0;
            overflow-x: hidden;
        }

        /* Glassmorphism Effect */
        .glass-card {
            background-color: var(--card-bg);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        .glass-card:hover {
            box-shadow: 0 0 20px var(--neon-blue), 0 0 30px var(--neon-fuchsia);
            transform: translateY(-4px);
        }

        /* Neon Text and Gradient */
        .neon-text {
            text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-fuchsia);
        }

        /* Animated Background Hero */
        .hero-bg {
            background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-bg::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 50% 50%, rgba(0, 224, 255, 0.1) 0%, rgba(240, 78, 152, 0.05) 50%, transparent 70%);
            animation: moveGradient 25s infinite alternate ease-in-out;
            opacity: 0.5;
        }

        @keyframes moveGradient {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(50%, 50%) rotate(30deg); }
        }

        /* Gradient Button */
        .gradient-btn {
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-fuchsia));
            transition: transform 0.2s;
            box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
        }

        .gradient-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px var(--neon-fuchsia), 0 0 30px var(--neon-blue);
        }

        /* Fade-in Animation on Scroll */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Shimmer Effect for Loading (Placeholder CSS) */
        @keyframes shimmer {
            0% { background-position: -468px 0; }
            100% { background-position: 468px 0; }
        }

        .shimmer-bg {
            background: linear-gradient(to right, #1f2937 8%, #111827 18%, #1f2937 33%);
            background-size: 800px 104px;
            animation: shimmer 1.5s infinite linear;
        }

        /* Custom Scrollbar (Aesthetic) */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); }
        ::-webkit-scrollbar-thumb { background: var(--neon-fuchsia); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); }
        /* Sliding Hero Background */
            .slider-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            animation: slideShow 18s infinite;
            background-size: cover;
            background-position: center;
        }

        .slide:nth-child(1) { animation-delay: 0s; }
        .slide:nth-child(2) { animation-delay: 6s; }
        .slide:nth-child(3) { animation-delay: 12s; }

        @keyframes slideShow {
            0% { opacity: 0; }
            5% { opacity: 1; }
            30% { opacity: 1; }
            35% { opacity: 0; }
            100% { opacity: 0; }
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .animate-card-float { animation: floatCard 3s ease-in-out infinite; }
        .delay-150 { animation-delay: .15s; }
        .delay-300 { animation-delay: .3s; }
        .delay-450 { animation-delay: .45s; }

        @keyframes floatCard {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-12px); }
        }
        .animate-fade-in { animation: fadeInUp 1s ease forwards; opacity: 0; }
            .delay-100 { animation-delay: .1s; }
            .delay-200 { animation-delay: .2s; }
            @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
            }


/* Marquee Animation */
.marquee-track {
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}