* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none;
        }

        :root {
            --color-bg: #fafafa;
            --color-text: #1a1a1a;
            --color-accent: #667eea;
            --color-accent-2: #764ba2;
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            overflow-x: hidden; 
            cursor: none;
        }

        /* Subtle Noise Background */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: 0.04;
            z-index: -1;
            pointer-events: none;
        }


        /* Custom Cursor */
        .cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #000;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 10000;
            transition: background 0.3s ease, opacity 0.3s ease;
        }

        /* --- NEW: View Project Cursor --- */
        .cursor-view {
            position: fixed;
            top: 0;
            left: 0;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255, 68, 108, 0.9);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 0.875rem;
            text-transform: uppercase;
            transform: translate(-50%, -50%) scale(0);
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
        }
        /* --- END NEW --- */


        /* Hide cursors on mobile */
        @media (max-width: 1023px) {
            .cursor, .cursor-view { display: none; }
            * { cursor: auto; }
        }

        a:hover ~ .cursor,
        button:hover ~ .cursor,
        .cursor.hover {
            background: #ff0055;
        }

        /* Fonts */
        .font-bebas { font-family: 'Bebas Neue', sans-serif; }
        .font-display { font-family: 'Playfair Display', serif; }
        /* REMOVED .font-caveat */

        /* Loading */
        .loader {
            position: fixed;
            inset: 0;
            background: var(--color-bg);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000; /* Increased z-index */
            padding: 2rem 10rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            background: transparent;
            color: #1a1a1a;
        }

        nav.scrolled {
            background: rgba(250, 250, 250, 0.075);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(26, 26, 26, 0.1);
            padding: 1.5rem 4rem;
        }

        .nav-link {
            position: relative;
            font-size: 0.875rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transition: opacity 0.3s;
            text-decoration: none; 
            color: var(--color-text);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--color-accent);
            transition: width 0.3s;
        }

        .nav-link:hover::after { width: 100%; }

        /* Text Stroke */
        .text-stroke {
            -webkit-text-stroke: 2px var(--color-text);
            -webkit-text-fill-color: transparent;
        }

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

        .marquee-content { animation: marquee 40s linear infinite; }

        /* Hover Effects */
        .hover-lift { transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
        .hover-lift:hover { transform: translateY(-10px); }

        /* Service Hover */
        .service-item { transition: all 0.3s ease; }
        .service-item:hover {
            transform: translateX(15px);
            border-color: var(--color-accent) !important;
        }

        /* --- NEW CSS FOR NAV --- */
        .nav-menu {
            display: flex;
            gap: 3rem;
            align-items: center;
        }

        .hamburger {
            display: none; /* Hidden by default, shown in media query */
            width: 30px;
            height: 20px;
            position: relative;
            cursor: pointer;
        }
        /* --- END NEW CSS FOR NAV --- */

        /* --- NEW: Unique Mobile Menu --- */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--color-bg);
            z-index: 999; /* Below nav */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            /* * FIXED: Removed 'transform: translateX(100%)' 
             * GSAP now handles the initial position via JavaScript.
             */
        }
        
        .mobile-menu a {
            text-decoration: none;
            color: var(--color-text);
            font-size: clamp(2.5rem, 10vw, 3.5rem); 
            font-weight: 900; 
            font-family: 'Bebas Neue';
            /* * FIXED: Removed 'opacity: 0' and 'transform: translateY(50px)'
             * GSAP now handles the initial state via JavaScript.
             */
        }

        /* Hamburger */
        .hamburger {
            z-index: 1001; /* Above everything */
        }
        .hamburger span {
            position: absolute;
            width: 100%;
            height: 2px;
            background: var(--color-text);
            transition: all 0.3s;
        }
        /* Change hamburger color when menu is active */
        .hamburger.active span {
            background: var(--color-text); 
        }

        .hamburger span:nth-child(1) { top: 0; }
        .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
        .hamburger span:nth-child(3) { bottom: 0; }

        .hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 50%; }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: rotate(-45deg); bottom: auto; top: 50%; }

        @media (max-width: 1023px) {
            .nav-menu { display: none; } /* This will now correctly hide the desktop links */
            .hamburger { display: block !important; } /* This will now correctly show the hamburger */
            nav { padding: 2rem 1.5rem; }
            nav.scrolled { padding: 1.5rem; }
        }

        /* About Section Special Styles */

        .reveal-line {
            overflow: hidden;
        }

        .reveal-line span {
            display: inline-block;
            transform: translateY(100%);
        }

        .footer-panel {
            transform: translateY(100%);
        }

        .spotlight {
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
            pointer-events: none; 
            z-index: 30; 
            transform: translate(-50%, -50%); 
            opacity: 0; 
        }
        
        .link-text-clip {
            overflow: hidden;
            display: inline-block;
        }
        .letter-reveal {
            display: inline-block;
            opacity: 0;
            transform: translateY(100%);
        }

        .img-reveal {
            transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        /* NEW: Button Hover Effect */
        .btn {
            position: relative;
            overflow: hidden;
            transition: color 0.4s ease-out;
            z-index: 1;
        }
        .btn.btn-dark {
            border: none;
            background: #1a1a1a;
            color: white;
        }
        .btn.btn-light {
            background: transparent;
            color: #1a1a1a;
            border: 2px solid #1a1a1a;
        }
        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: -1;
        }
        .btn.btn-dark::after {
            background: white;
        }
        .btn.btn-light::after {
            background: #1a1a1a;
        }
        .btn:hover {
            color: #1a1a1a;
        }
        .btn.btn-light:hover {
            color: white;
        }
        .btn:hover::after {
            transform: scaleX(1);
        }
        
        /* NEW: Project Hover Effect */
        .project-card-image {
            filter: grayscale(100%); 
            transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .project-card:hover .project-card-image {
            filter: grayscale(0%);
            transform: scale(1.05);
        }
        .project-card-title { /* NEW: For title animation */
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Mobile: Disable hover effects for project cards */
        @media (max-width: 1023px) {
            .project-card-image {
                filter: grayscale(0%); /* Show color on mobile */
            }
            .project-card:hover .project-card-image {
                transform: none;
            }
        }


        /* NEW: Footer Icon Styles */
        #footer-icon-container {
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        .footer-icon {
            position: absolute;
            width: 300px; /* Large icons */
            height: 300px;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.4s ease, transform 0.4s ease;
            color: rgba(255, 255, 255, 0.2); /* Semi-transparent */
        }
        /* Hide icons on mobile */
        @media (max-width: 768px) {
            #footer-icon-container { display: none; }
        }

        /* --- NEW: Animated Typing Styles --- */
       .typing-animation {
    display: block;
    margin-top: 2rem;
    font-family: 'Space Grotesk', monospace;
    font-size: 1rem; /* 16px */
    color: #b0b0b0; /* Faint gray */
    height: 60px; 
    line-height: 1.6;
    /* z-index: -1; */ /* <-- REMOVED */
    /* position: relative; */ /* <-- REMOVED */
    opacity: 0; /* Start hidden for GSAP */
}
        /* Custom cursor for TypeIt */
        .ti-cursor {
            color: #b0b0b0;
            animation: blink 0.5s infinite;
        }
        @keyframes blink {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        /* Hide on mobile where there's no empty space */
        @media (max-width: 767px) {
            .typing-animation {
                display: none;
            }
#hehe{
    display:none;
}
#hehe1{
    display:none;
}

            
        }
        /* --- END NEW --- */