Fixed Blurred Header with Responsive Mobile Nav

<header class="fixed top-0 w-full z-20 bg-neutral-950/80 backdrop-blur-sm border-b border-white/5 animate-[slideDown_0.8s_ease-out_0.2s_forwards]">
      <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
        <div class="flex pt-5 pb-5 items-center justify-between">
          <!-- Brand -->
          <a href="#" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
            <span class="relative inline-grid h-10 w-10 place-items-center rounded-xl bg-neutral-900 ring-1 ring-white/10 hover:ring-emerald-400/30 transition-all duration-300">
              <span class="absolute inset-0 rounded-xl bg-gradient-to-br from-emerald-500/20 to-cyan-500/20"></span>
              <span class="relative text-xl font-semibold tracking-tight font-sans" style="">C</span>
            </span>
            <div class="flex flex-col leading-none">
              <span class="text-sm font-medium text-neutral-300 font-sans" style="">CHROMAMAX</span>
              <span class="text-xs text-neutral-500 font-sans" style="">SYSTEMS</span>
            </div>
          </a>

          <!-- Nav -->
          <nav class="hidden items-center gap-8 lg:flex">
            <a href="#product" class="text-sm font-medium text-neutral-300 hover:text-white transition-colors duration-200 hover:scale-105 transform font-sans" style="">Solutions</a>
            <a href="#contact" class="text-sm font-medium text-neutral-300 hover:text-white transition-colors duration-200 hover:scale-105 transform font-sans" style="">Support</a>
            <a href="#company" class="text-sm font-medium text-neutral-300 hover:text-white transition-colors duration-200 hover:scale-105 transform font-sans" style="">About</a>
          </nav>

          <!-- Right -->
          <div class="flex items-center gap-3">
            <div class="hidden md:flex items-center gap-3">
              <a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram h-4 w-4 text-neutral-300"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
              </a>
              <a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="Facebook">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="facebook" class="lucide lucide-facebook h-4 w-4 text-neutral-300"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path></svg>
              </a>
              <a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="YouTube">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube" class="lucide lucide-youtube h-4 w-4 text-neutral-300"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" class=""></path><path d="m10 15 5-3-5-3z" class=""></path></svg>
              </a>
            </div>
            <a href="#buy" class="relative inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:scale-105 transition-all duration-200">
              <span class="absolute inset-0 rounded-lg bg-gradient-to-r from-emerald-500/20 to-cyan-500/20"></span>
              <span class="absolute inset-0 rounded-lg ring-1 ring-emerald-400/40 group-hover:ring-emerald-400/60 transition-all"></span>
              <span class="relative font-sans" style="">Order Now</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right relative h-4 w-4 group-hover:translate-x-1 transition-transform"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </a>
            <button id="menuBtn" class="lg:hidden grid h-10 w-10 place-items-center rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-200" aria-label="Menu">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5 transition-transform duration-200" id="menuIcon"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-5 w-5 hidden transition-transform duration-200" id="closeIcon"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Mobile Nav -->
      <div id="mobileNav" class="mx-6 hidden overflow-hidden rounded-2xl bg-neutral-900/80 ring-1 ring-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-900/60 transform scale-95 opacity-0 transition-all duration-300">
        <div class="flex flex-col px-6 py-4">
          <a href="#product" class="py-2 text-sm font-medium text-neutral-300 hover:text-white hover:translate-x-2 transition-all duration-200 font-sans mobile-link" style="">Solutions</a>
          <a href="#contact" class="py-2 text-sm font-medium text-neutral-300 hover:text-white hover:translate-x-2 transition-all duration-200 font-sans mobile-link" style="">Support</a>
          <a href="#company" class="py-2 text-sm font-medium text-neutral-300 hover:text-white hover:translate-x-2 transition-all duration-200 font-sans mobile-link" style="">About</a>
        </div>
      </div>
    </header>