---
---
<header class="fixed top-0 left-0 w-full z-50 p-6 pointer-events-none">
  <div class="flex justify-between items-start w-full max-w-[1800px] mx-auto">
    <!-- Left: Logo & Menu -->
    <div class="pointer-events-auto flex gap-2">
      <div class="h-12 px-6 rounded-full border border-white/10 bg-[#080a09]/60 backdrop-blur-xl flex items-center shadow-2xl">
        <div class="w-2 h-2 bg-accent rounded-full mr-3 animate-pulse"></div>
        <span class="font-serif text-lg tracking-tight text-white">TitanFlow</span>
      </div>
      <a href="#features" class="h-12 px-6 rounded-full border border-white/10 bg-[#080a09]/60 backdrop-blur-xl flex items-center justify-center group hover:bg-white/10 transition-all duration-300">
        <span class="font-mono text-[10px] uppercase tracking-widest text-white/70 group-hover:text-white">Features</span>
      </a>
    </div>

    <!-- Right: Action -->
    <div class="pointer-events-auto flex gap-2">
      <a href="#waitlist" class="h-12 px-8 rounded-full border border-white/10 bg-white text-[#080a09] flex items-center gap-2 hover:bg-accent transition-all duration-300 font-mono text-[10px] font-bold uppercase tracking-widest shadow-2xl">
        Join Waitlist
      </a>
      <div class="h-12 w-12 rounded-full border border-white/10 bg-[#080a09]/60 backdrop-blur-xl flex items-center justify-center text-white/70 group hover:bg-white/10 transition-all duration-300 cursor-pointer shadow-2xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16m-7 6h7" /></svg>
      </div>
    </div>
  </div>
</header>