html {
            background-color: #0A0A0A;
            /* Hide the default cursor for the entire page */
            cursor: none;
        }
        body {
            background-color: #0A0A0A;
            color: #EAEAEA;
            font-family: 'Geist Mono', monospace;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Hide default cursor for interactive elements */
        a, button, .bento-cell, .command-bar-trigger {
            cursor: none;
        }

        /* --- Custom Cursor Styles --- */
        #custom-cursor {
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            will-change: transform; /* Performance optimization */
            transform: translate(-50%, -50%); /* Center the SVG cursor */
        }

        /* 2. Multi-Layer Blueprint Background */
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -2;
            pointer-events: none;
        }
        .background-container::before { /* Grid Lines */
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(to right, rgba(112, 112, 112, 0.15) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(112, 112, 112, 0.15) 1px, transparent 1px);
            background-size: 80px 80px;
        }
        .background-container::after { /* Noise Texture */
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><g fill-opacity="0.12"><circle fill="%23FFFFFF" cx="400" cy="400" r="600"/><circle fill="%231E1E1E" cx="400" cy="400" r="500"/><circle fill="%23121212" cx="400" cy="400" r="400"/><circle fill="%231A1A1A" cx="400" cy="400" r="300"/><circle fill="%231E1E1E" cx="400" cy="400" r="200"/><circle fill="%23121212" cx="400" cy="400" r="100"/></g></svg>');
            opacity: 0.08;
        }


        /* 3. Bento Cell Styling */
        .bento-cell {
            position: relative;
            background-color: #111111;
            border: 1px solid #2D2D2D;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
            overflow: hidden;
        }
        
        /* Only apply initial animation to hero cells */
        .hero-cell {
             animation: fadeIn 0.5s ease-in-out forwards;
             opacity: 0;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 4. Internal "Aurora" Glow on Hover */
        .bento-cell::after {
            content: "";
            position: absolute;
            top: var(--mouse-y-cell, -50%);
            left: var(--mouse-x-cell, -50%);
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
            transform: translate(-50%, -50%);
            transition: opacity 0.4s, top 0.3s, left 0.3s;
            opacity: 0;
            z-index: 0;
        }

        .bento-cell:hover::after { opacity: 1; }
        .bento-cell > * { position: relative; z-index: 1; }

        /* 5. Glowing Border on Hover */
        .bento-cell:hover {
            transform: scale(1.02) translateY(-5px);
            border-color: #3B82F6;
            box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.4);
        }

        /* 6. Marquee Animation for Tech Stack */
        .marquee-container {
            display: flex;
            overflow: hidden;
        }
        .marquee-track {
            flex-shrink: 0;
            display: flex;
            justify-content: space-around;
            min-width: 100%;
            animation: marquee 20s linear infinite;
        }
        .marquee-container:hover .marquee-track {
            animation-play-state: paused;
        }
        @keyframes marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-100%); }
        }
        
        /* 7. Scroll Down Indicator */
        .scroll-indicator {
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        /* 8. Tech Tag Styling */
        .tech-tag {
            display: inline-block;
            background-color: #1a1a1a;
            color: #888888;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid #2D2D2D;
        }

        /* 9. Contact Form Styles */
        .form-input {
            background-color: #0A0A0A;
            border: 1px solid #2D2D2D;
            color: #EAEAEA;
            transition: border-color 0.3s;
        }
        .form-input:focus {
            outline: none;
            border-color: #3B82F6;
        }

        /* 10. Navbar Styles */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            padding: 1rem;
            background-color: rgba(17, 17, 17, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid #2D2D2D;
            z-index: 90;
            transform: translateY(-100%);
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }
        .navbar.visible {
            transform: translateY(0);
            opacity: 1;
        }
        .nav-link {
            color: #888888;
            transition: color 0.2s;
        }
         .nav-link:hover, .nav-link.active { /* ACTIVE LINK STYLE ADDED */
            color: #3B82F6;
        }

        /* 11. Command Bar Styles */
        .command-bar-trigger {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background-color: #111111;
            border: 1px solid #2D2D2D;
            color: #888888;
            padding: 0.75rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            z-index: 50;
        }
        .command-bar-trigger:hover {
            color: #EAEAEA;
            border-color: #3B82F6;
        }
        .command-bar-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            z-index: 110;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .command-bar {
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 640px;
            background-color: #111111;
            border: 1px solid #2D2D2D;
            border-radius: 0.75rem;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
            z-index: 120;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .command-bar-overlay.visible, .command-bar.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .command-bar.visible {
            top: 50%;
        }

           /* 12. Social Link Hover Effects */
        .social-link {
            transition: all 0.3s ease;
        }
        .social-link:hover {
            transform: scale(1.15);
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8));
            color: white;
        }

        /* SCROLL ANIMATION STYLES START */
        .scroll-animate {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .scroll-animate.is-visible {
            opacity: 1;
            transform: translateY(0);
        }