/* Custom Tailwind Configuration (for colors and fonts) */
        :root {
            --color-jet-black: #111111;
            --color-graphite-grey: #1A1A1A;
            --color-neon-blue: #3BA8FF;
            --color-soft-white: #F5F5F5;
            --color-silver: #C5C5C5;
        }

        /* Essential Dark Mode */
        body {
            background-color: var(--color-jet-black);
            color: var(--color-soft-white);
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .font-heading {
            font-family: 'Montserrat', sans-serif;
        }

        .font-stats {
            font-family: 'Roboto Mono', monospace;
        }

        /* Neon Glow Effect */
        .text-neon {
            color: var(--color-neon-blue);
            text-shadow: 0 0 5px var(--color-neon-blue), 0 0 10px rgba(59, 168, 255, 0.5);
        }
        .border-neon {
            border-color: var(--color-neon-blue);
            box-shadow: 0 0 5px rgba(59, 168, 255, 0.7);
        }
        
        /* Glassmorphism Effect */
        .glass-card {
            background-color: rgba(26, 26, 26, 0.7); /* Graphite Grey with transparency */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(197, 197, 197, 0.1); /* Subtle silver border */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hover-Lift Effect */
        .hover-lift:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px rgba(59, 168, 255, 0.2);
            z-index: 10;
        }

        /* Hero Glitch/Animate Effect - Using opacity/transform for digital feel */
        .hero-glitch-text {
            animation: fadeInScale 1.5s ease-out;
            text-shadow: 0 0 15px rgba(59, 168, 255, 0.8);
        }
        @keyframes fadeInScale {
            0% { opacity: 0; transform: scale(0.95) translateY(20px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* Animated Gradient Background */
        .animated-gradient {
            background: linear-gradient(135deg, var(--color-graphite-grey) 0%, var(--color-jet-black) 50%, #000022 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Page Transition (Fade) */
        .page {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            min-height: 85vh; /* Ensure pages have a minimal height */
        }
        .page.active {
            opacity: 1;
        }
        .page.fading-out {
            opacity: 0;
        }

        /* Parallax Simulation for About Page */
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .tech-image {
            background-image: url('https://i.pinimg.com/736x/85/12/d2/8512d2fe67a477ef9f18f9feb696a87f.jpg');
        }
        .team-image {
            background-image: url('https://i.pinimg.com/736x/01/c7/77/01c77745d903f0c95e824be985cd89b8.jpg');
        }
        
        /* Custom scrollbar for carousel */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }