/* --- GLOBAL STYLES --- */
        :root {--bg-color: #000000; --text-white: #FFFFFF;--neon-green: #59FF00;--gray-text: #888888;--font-head: 'Syne', sans-serif;--font-body: 'Space Grotesk', sans-serif;}
        /* --- LENIS SMOOTH SCROLL CSS --- */
        html.lenis, html.lenis body {height: auto;}
        .lenis.lenis-smooth { scroll-behavior: auto !important;}
        .lenis.lenis-smooth [data-lenis-prevent] {  overscroll-behavior: contain;}
        .lenis.lenis-stopped {  overflow: hidden;}
        .lenis.lenis-scrolling iframe {pointer-events: none;}
        body {background-color: var(--bg-color);color: var(--text-white);font-family: var(--font-body);overflow-x: hidden; /* Hide horizontal scrollbar */}
        /* 3D BACKGROUND CANVAS (Fixed) */
        #webgl-canvas {position: fixed; top: 0; left: 0; width: 100%; height: 100vh;z-index: -1; opacity: 0.4; pointer-events: none; }
        /* --- CUSTOM HEADER STYLES --- */
        header {padding: 30px 60px;position: fixed; /* Keep header visible */ width: 100%;top: 0;display: flex;justify-content: space-between;align-items: center; z-index: 50; backdrop-filter: blur(5px);}
        
        .logo {
            font-family: var(--font-head);
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #E0CEB6;
        }

        .btn {
            padding: 10px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            transition: 0.3s;
            cursor: pointer;
        }
        .btn-primary {
            background-color: var(--neon-green);
            color: #000;
            border: 1px solid var(--neon-green);
        }
        .btn-primary:hover { background: transparent; color: var(--neon-green); }

        .btn-outline {
            background: transparent;
            color: var(--text-white);
            border: 1px solid var(--text-white);
        }
        .btn-outline:hover { background: var(--text-white); color: #000; }

        /* --- HERO TEXT STYLES --- */
        .hero-line {
            font-family: var(--font-head);
            font-size: clamp(3rem, 8vw, 7rem); /* Responsive font size */
            font-weight: 800;
            text-transform: uppercase;
            line-height: 0.9;
            letter-spacing: -2px;
        }
        .line-1 { color: var(--text-white); }
        .line-2 {
            color: transparent;
            -webkit-text-stroke: 2px var(--text-white);
        }
        .line-3 { color: var(--neon-green); }

        .status-indicator { display: flex; align-items: center; gap: 10px; }
        .blink { animation: blinker 1.5s linear infinite; color: var(--neon-green); }
        @keyframes blinker { 50% { opacity: 0; } }

        /* --- WORK SECTION STYLES --- */
        .text-outline {
            color: transparent;
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
        }

        /* SCROLLBAR */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #59FF00; }

        @media (max-width: 768px) {
            header { padding: 20px; }
            .nav-buttons { display: none; }
        }

        /* === RESPONSIVE DESIGN === */
        
        /* Mobile Devices (Portrait) */
        @media (max-width: 640px) {
            header { 
                padding: 5px 15px; 
                backdrop-filter: blur(10px);
                background: rgba(0, 0, 0, 0.8);
            }
            .logo { font-size: 0.8rem; }
            .nav-buttons { display: none; }
            
            /* Hero Section */
            .min-h-screen { 
                min-height: 100vh;
                padding-top: 80px !important;
            }
            
            .hero-text-block {
                margin-bottom: 30px !important;
            }
            
            .hero-line { 
                font-size: 2.4rem !important;
                line-height: 1 !important;
                letter-spacing: -1px !important;
                margin-bottom: 5px;
            }
            
            .hero-line.line-2 {
                -webkit-text-stroke: 1.5px var(--text-white);
            }
            
            /* Hero description text */
            .min-h-screen p {
                font-size: 1rem !important;
                line-height: 1.5 !important;
                margin-top: 20px !important;
            }
            
            /* Tech stack text */
            .min-h-screen .mt-10 {
                margin-top: 30px !important;
                font-size: 0.9rem !important;
            }
            /* Bottom status section */
            .min-h-screen > .py-10 {
                padding: 30px 0 !important;
                gap: 30px !important;
            }
            
            .min-h-screen > .py-10 > div {
                text-align: left !important;
            }
            
            .min-h-screen > .py-10 p,
            .min-h-screen > .py-10 h4 {
                font-size: 0.75rem !important;
            }
            
            /* Scroll indicator section */
            .h-\[50vh\] {
                height: 30vh !important;
            }
            .project-slide {
                flex-direction: column !important;
                padding: 40px 20px !important;
                justify-content: flex-start !important;
                padding-top: 100px !important;
            }
            
            .project-slide > div:first-of-type {
                width: 100% !important;
                margin-bottom: 30px;
            }
            
            .project-slide > div:last-of-type {
                width: 100% !important;
                height: 250px !important;
            }
            
            /* HUD Card */
            #hud-card { padding: 1px; }
            #hud-card > div { padding: 20px; }
            
            /* Skills Section */
            .skill-item, .skill-item-filled { 
                font-size: 1.5rem !important; 
            }
            
            /* Contact Form */
            .contact-text-col h2 { 
                font-size: 2.5rem !important; 
            }
        }
        
        /* Mobile Landscape & Small Tablets */
        @media (min-width: 641px) and (max-width: 1024px) {
            header { padding: 15px 40px; }
            .logo { font-size: 1rem; }
            
            .hero-line { 
                font-size: clamp(3.5rem, 10vw, 6rem);
            }
            
            .project-slide {
                padding: 60px 30px !important;
            }
            
            .skill-item, .skill-item-filled { 
                font-size: 2.2rem; 
            }
        }
        
        /* Laptop & Desktop (1024px - 1440px) */
        @media (min-width: 1025px) and (max-width: 1440px) {
            header { padding: 30px 50px; }
            
            .hero-line { 
                font-size: clamp(4rem, 7vw, 6rem);
            }
            
            .project-slide {
                padding: 80px 40px !important;
            }
        }
        
        /* Large Desktop (1441px+) */
        @media (min-width: 1441px) {
            header { padding: 30px 80px; }
            
            .hero-line { 
                font-size: clamp(5rem, 8vw, 8rem);
            }
            
            .project-slide {
                padding: 100px 60px !important;
            }
        }
        
        /* Touch Device Optimizations */
        @media (hover: none) and (pointer: coarse) {
            .btn { 
                padding: 12px 28px; 
                font-size: 1rem;
            }
            
            /* Larger tap targets */
            a, button { 
                min-height: 44px; 
                display: inline-flex;
                align-items: center;
            }
        }
        
        /* Prevent horizontal scroll on all devices */
        body, html {  overflow-x: hidden; max-width: 100vw;
        }

        /* --- CURSOR STYLES --- */
    @media (min-width: 768px) {
        /* Hide default cursor only on desktop */
        body, a, button, input, textarea {
            cursor: none;
        }
    }
    
    /* Hover State (Expanded) */
    body.hovering #cursor-outline {
        transform: translate(-50%, -50%) scale(2.5);
        background-color: rgba(255, 255, 255, 0.1);
        border-color: #59FF00;
    }