:root {
            --bg-color: #F5F5F7;
            --text-color: #111111;
            --text-muted: #666666;
            --surface-color: #EAEAEA;
            --line-color: #D1D1D1;
            --card-bg: #FFFFFF;
        }

        html[data-theme='dark'] {
            --bg-color: #0A0A0A;
            --text-color: #EAEAEA;
            --text-muted: #888888;
            --surface-color: #141414;
            --line-color: #2A2A2A;
            --card-bg: #141414;
        }

        /* --- Scroll Fixes --- */
        html { overflow-y: auto; }
        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; }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.6s ease, color 0.6s ease;
            cursor: none;
            overflow-x: hidden;
            width: 100%;
            min-height: 100vh;
        }

        /* --- Noise Grain --- */
        .noise-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 9999; opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* --- Custom Cursor --- */
        .cursor-dot {
            width: 8px; height: 8px; background: white; border-radius: 50%;
            position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000;
            transform: translate(-50%, -50%); mix-blend-mode: difference;
        }
        .cursor-ring {
            width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%;
            position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000;
            transform: translate(-50%, -50%); transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex; justify-content: center; align-items: center; backdrop-filter: blur(2px);
        }
        body.is-dragging .cursor-ring { width: 60px; height: 60px; background: white; mix-blend-mode: difference; }
        .cursor-text { font-size: 10px; font-weight: 700; text-transform: uppercase; color: black; opacity: 0; }
        body.is-dragging .cursor-text { opacity: 1; }

        /* --- Brand Gradient Animation --- */
        .brand-gradient-anim {
            background: linear-gradient(90deg, #FF61D2, #6F4CFF, #FF61D2);
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: gradientMove 4s linear infinite;
        }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Preloader */
        #preloader {
            position: fixed; inset: 0; background-color: var(--bg-color); z-index: 20000;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }

        /* --- FEATURED PROJECTS (INFINITE LOOP ENGINE) --- */
        #featured-projects {
            position: relative;
            padding: 8rem 0;
            overflow: hidden;
        }

        .featured-header {
            padding: 0 6vw;
            margin-bottom: 4rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* Bottom align title and button */
        }

        /* --- Global Font Weight Override --- */
        .font-light {
            font-weight: 500 !important;
        }
        .font-normal {
            font-weight: 500 !important;
        }
        .font-medium {
            font-weight: 600 !important;
        }

        /* --- Scroll Indicator Gradient Line (Seamless) --- */
        .scroll-line-gradient {
            /* Fades out to transparent at the top and bottom for a seamless blend */
            background: linear-gradient(180deg, 
                transparent 0%, 
                #FF61D2 25%, 
                #6F4CFF 50%, 
                #FF61D2 75%, 
                transparent 100%
            );
            background-size: 100% 200%;
            animation: scrollLineBounce 2s ease-in-out infinite, lineGradientMove 3s linear infinite;
        }
        
        @keyframes lineGradientMove {
            0% { background-position: 50% 0%; }
            100% { background-position: 50% 200%; }
        }
        
        @keyframes scrollLineBounce {
            0%, 100% { 
                transform: translateY(-2px); 
                opacity: 1;
            }
            50% { 
                transform: translateY(8px); 
                opacity: 0.5;
            }
        }

.nav-contact-btn {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 8px 20px;
    border: 1px solid currentColor;
    border-radius: 999px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}


    
    .nav-contact-btn:hover {
        background-color: var(--text-color);
        color: var(--bg-color);
    }

    /* --- Active Nav Indicator --- */
        .nav-link, .mobile-link {
            position: relative;
            color: var(--text-muted); 
            transition: color 0.3s ease;
        }
        
        .nav-link:hover, .mobile-link:hover {
            color: var(--text-color);
        }
        
        .nav-link.active, .mobile-link.active {
            color: var(--text-color);
        }
        
        /* The glowing dot under the desktop nav */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%) scale(0);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #FF61D2; 
            box-shadow: 0 0 8px rgba(255, 97, 210, 0.8);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }
        
        .nav-link.active::after {
            transform: translateX(-50%) scale(1);
        }

        /* --- Mobile Active Indicator (Glowing dot on the left) --- */
        .mobile-link {
            position: relative;
            display: inline-block; /* Ensures the dot positions correctly next to the text */
        }

        .mobile-link::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -24px; /* Positions it nicely to the left of the word */
            transform: translateY(-50%) scale(0);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #FF61D2;
            box-shadow: 0 0 12px rgba(255, 97, 210, 0.8);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .mobile-link.active::before {
            transform: translateY(-50%) scale(1);
        }

        /* Loop Container */
        .loop-container {
            width: 100%;
            overflow: hidden;
            cursor: grab;
        }
        .loop-container:active { cursor: grabbing; }

        .loop-track {
            display: flex;
            width: max-content;
            padding-left: 6vw;
        }

        

        /* Card Design - Desktop Base */
        .project-card {
            flex-shrink: 0;
            width: 40vw; /* Reduced from 60vw to tame the height on large screens */
            max-width: 800px; /* Hard cap for ultra-wide monitors */
            margin-right: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 16px;
            user-select: none;
            cursor: pointer;
        }

       /* 1. The Parent Box (Mobile Base) */
        .card-visual {
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 1.5rem;
            overflow: hidden;
            background: var(--card-bg);
            position: relative;
            /* Forces the parent to handle the GPU layer, protecting the image inside */
            transform: translateZ(0); 
        }

        /* 2. The Desktop Media Query */
        @media (min-width: 768px) {
            .card-visual {
                /* Your safeguard to stop it from taking over the whole screen */
                max-height: 60vh; 
            }
        }

        /* 3. The Image Base State */
        .card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Lock the starting scale so the browser renders native resolution */
            transform: scale(1); 
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* 4. The Hover State */
        .project-card:hover .card-img { 
            transform: scale(1.05); 
        }

        .pd-visit { display: inline-flex; text-decoration: none; flex-shrink: 0; }
        .pd-visit-inner {
            display: inline-flex; align-items: center; gap: .45rem;
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .14em; padding: 10px 20px;
            border: 1px solid var(--text-color); border-radius: 999px;
            color: var(--text-color); transition: background .3s ease, color .3s ease;
        }
        .pd-visit:hover .pd-visit-inner { background: var(--text-color); color: var(--bg-color); }
        .pd-visit-ico { width: 14px; height: 14px; }


        .tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 8px 16px;
            border: 1px solid var(--line-color);
            border-radius: 99px;
            color: var(--text-muted);
            background: var(--card-bg);
        }
        .tag-dot { width: 4px; height: 4px; border-radius: 50%; background: #FF9F1C; }
        .tag-dot.accent { background: #FF61D2; }

        
        /* Hover Button */
        .view-project-btn {
            margin-top: 0.5rem;
            background: var(--text-color);
            color: var(--bg-color);
            padding: 10px 20px;
            border-radius: 99px;
            width: fit-content;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .project-card:hover .view-project-btn {
            opacity: 1;
            transform: translateY(0);
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .project-card { 
                width: 85vw; /* Keeps cards wide on phones */
                margin-right: 1rem;
                gap: 16px;
            }
            
            /* Forces button to be visible permanently on mobile */
            .view-project-btn {
                opacity: 1;
                transform: translateY(0);
                display: inline-block; 
            }
        }
        
        /* IMPORTANT: Delete the old @media (hover: none) block that was hiding the button entirely */


        /* Gyroscope Animation Glow */
        .gyro-glow { filter: drop-shadow(0px 0px 8px rgba(255, 97, 210, 0.4)); }
        html[data-theme='light'] .gyro-glow { filter: drop-shadow(0px 0px 5px rgba(111, 76, 255, 0.2)); }
        .gyro-ring { transform-origin: center; }

        /* Mobile Nav */
        #mobile-nav {
            transform: translateY(-100%);
            transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        #mobile-nav.is-open {
            transform: translateY(0);
        }

        /* Magnetic Area */
        .magnetic-wrap { display: inline-block; position: relative; }
        .magnetic-area { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: 0; }
        .magnetic-content { display: inline-block; transition: transform 0.2s; position: relative; z-index: 10; }

        /* Theme Toggle (Classic Knob) */
        .toggle-track {
            width: 48px; height: 24px;
            border-radius: 999px;
            border: 1px solid currentColor;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        .toggle-knob {
            width: 16px; height: 16px;
            border-radius: 50%;
            background-color: currentColor;
            position: absolute;
            top: 3px;
            left: 3px;
            pointer-events: none;
        }

        /* Navigation Transition States */
        #main-nav {
            transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), background-color 0.5s ease, border-color 0.5s ease;
            border-bottom: 1px solid transparent;
        }

        .nav-hidden {
            transform: translateY(-100%);
        }

        /* Nav Glass State */
        .nav-glass {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        html[data-theme='dark'] .nav-glass {
            background-color: rgba(10, 10, 10, 0.85);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }



        /* --- Capabilities: Live System SVGs --- */
        .sys-node { transform-origin: center; animation: sysPulse 2s infinite; }
        .sys-node:nth-child(2) { animation-delay: 0.3s; }
        .sys-node:nth-child(3) { animation-delay: 0.6s; }
        @keyframes sysPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 3px #FF61D2); }
        }

        .sys-float { animation: sysFloat 3s ease-in-out infinite; }
        @keyframes sysFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .sys-data { animation: sysDataFlow 20s linear infinite; stroke-dasharray: 4 4; }
        @keyframes sysDataFlow {
            to { stroke-dashoffset: -100; }
        }

        .sys-spin { transform-origin: center; animation: sysRotate 10s linear infinite; }
        @keyframes sysRotate {
            to { transform: rotate(360deg); }
        }


        
        /* --- CTA Custom Gyroscope Animations --- */
        .ct-orb-mark {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .ct-orb-r1 { transform-origin: center; animation: sysRotate 12s linear infinite; }
        .ct-orb-r2 { transform-origin: center; animation: sysRotate 18s linear infinite reverse; }
        .ct-orb-dot-wrap { transform-origin: center; animation: sysRotate 6s linear infinite; }

        /* --- Capabilities: Premium Bento Box --- */
        .capability-bento {
            position: relative;
            padding: 2.5rem;
            border-radius: 1.5rem;
            border: 1px solid var(--line-color);
            background: var(--surface-color);
            overflow: hidden;
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s ease;
        }

        /* Perfect Mobile Padding */
        @media (max-width: 768px) {
            .capability-bento { padding: 2rem; }
        }

        /* Ambient Glow Background inside Card */
        .bento-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 100% 100%, rgba(111, 76, 255, 0.05) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.6s ease;
        }

        .capability-bento:hover {
            transform: translateY(-6px);
            border-color: rgba(255, 97, 210, 0.4);
        }
        .capability-bento:hover .bento-bg { opacity: 1; }
        .capability-bento svg { transition: transform 0.5s ease, filter 0.5s ease; }
        .capability-bento:hover svg {
            transform: scale(1.15);
            filter: drop-shadow(0px 0px 8px rgba(255, 97, 210, 0.6));
        }

        /* Background detail spin */
        .spin-slow { animation: sysRotate 40s linear infinite; transform-origin: center; }

        /* Remove basic CSS animation to allow GSAP control */
        .reveal-item { opacity: 0; }