/* Charcoal Background and Neon Theme */
        :root {
            --color-charcoal: #121212;
            --color-neon-blue: #0ea5e9; /* sky-500 */
            --color-neon-glow: 0 0 10px #0ea5e9, 0 0 20px #0ea5e980;
        }
        
        body {
            background-color: var(--color-charcoal);
            font-family: 'Space Mono', monospace;
            color: #e5e5e5; /* Near-white text */
        }

        /* Neon Glowing Text */
        .neon-text {
            color: var(--color-neon-blue);
            text-shadow: var(--color-neon-glow);
        }

        /* Glowing Buttons */
        .btn-neon {
            background-color: var(--color-neon-blue);
            color: var(--color-charcoal);
            box-shadow: var(--color-neon-glow);
            transition: all 0.3s;
        }
        .btn-neon:hover {
            box-shadow: 0 0 15px var(--color-neon-blue), 0 0 30px var(--color-neon-blue);
            transform: translateY(-2px);
        }

        /* Outline Button with Glow */
        .btn-outline {
            border: 1px solid var(--color-neon-blue);
            color: var(--color-neon-blue);
            transition: all 0.3s;
        }
        .btn-outline:hover {
            background-color: var(--color-neon-blue);
            color: var(--color-charcoal);
            box-shadow: var(--color-neon-glow);
            transform: translateY(-2px);
        }

        /* Code Card Glow Effect */
        .code-card {
            border: 1px solid transparent;
            transition: all 0.3s ease-in-out;
        }
        .code-card:hover {
            border-color: #0ea5e933;
            box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
            transform: scale(1.02);
        }

        /* Cyber Grid Background (Subtle) */
        .cyber-grid {
            background: linear-gradient(-90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px),
                        linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: grid-fade 8s infinite alternate;
        }
        @keyframes grid-fade {
            from { background-position: 0 0; }
            to { background-position: 50px 50px; }
        }

        /* Section Fade-in Animation */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .fade-in-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Scrollbar for a sleek look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--color-charcoal);
        }
        ::-webkit-scrollbar-thumb {
            background: #2a2a2a;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #3f3f3f;
        }