<header class="sticky top-0 z-50 bg-light-bg/80 dark:bg-dark-bg/80 backdrop-blur-lg shadow-soft">
    <div class="container mx-auto px-6 lg:px-10 py-4 flex justify-between items-center relative">
        <!-- Logo -->
        <a href="/" class="flex-shrink-0 text-3xl font-bold">
            <span class="inline-block bg-gradient-to-r from-[#d1d5db] via-[#9ca3af] to-[#6b7280] text-transparent bg-clip-text">
                Ashok KC
            </span>
        </a>

        <!-- Absolutely centered Nav -->
        <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
            <nav class="hidden lg:flex gap-6 pointer-events-auto">
                <a href="#home" class="text-sm font-thin text-primary transition-colors">Home</a>
                <a href="#services" class="text-sm font-thin text-light-text-solid dark:text-dark-text hover:text-primary transition-colors">Services</a>
                <a href="#resume" class="text-sm font-thin text-light-text-solid dark:text-dark-text hover:text-primary transition-colors">Resume</a>
                <a href="#products" class="text-sm font-thin text-light-text-solid dark:text-dark-text hover:text-primary transition-colors">Products</a>
                <a href="#contact" class="text-sm font-thin text-light-text-solid dark:text-dark-text hover:text-primary transition-colors">Contact</a>
            </nav>
        </div>

        <!-- Menu & Actions Group -->
        <div class="flex items-center gap-6">
            <a href="#contact" class="hidden sm:inline-block bg-light-bg dark:bg-dark-bg text-primary px-8 py-3 rounded-md text-sm font-semibold shadow-light-neumorphic dark:shadow-dark-neumorphic group hover:text-white hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 hover:-translate-y-1">
                HIRE ME
            </a>

            <button @click="darkMode = !darkMode" class="w-12 h-12 flex items-center justify-center bg-light-bg dark:bg-dark-bg rounded-full shadow-light-neumorphic dark:shadow-dark-neumorphic hover:shadow-light-neumorphic-inset dark:hover:shadow-dark-neumorphic-inset transition-all">
                <svg x-show="!darkMode" class="w-6 h-6 text-light-headings" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
                <svg x-show="darkMode" class="w-6 h-6 text-dark-text" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
            </button>

            <button class="lg:hidden p-2 rounded-md text-light-headings dark:text-dark-headings">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
            </button>
        </div>
    </div>
</header>
