Products Headers

<nav class="fixed top-0 w-full z-50 bg-[#050505]/80 backdrop-blur-md border-b border-white/5">
    <div class="flex h-20 max-w-7xl mx-auto px-6 items-center justify-between">
      <a href="/" class="block group relative z-50" aria-label="VIONYX Home">
        <svg width="120" height="32" viewBox="0 0 120 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition-opacity duration-300 hover:opacity-80">
          <text x="0" y="24" font-family="'Marcellus', serif" font-size="24" fill="#E7E7E7" letter-spacing="0.05em">VIONYX</text>
          <circle cx="100" cy="18" r="1.5" fill="#C6A98C" class="animate-pulse"></circle>
        </svg>
      </a>

      <div class="flex items-center gap-8">
        <a href="/que-es-un-sistema" class="hidden md:block text-[10px] tracking-[0.2em] text-neutral-400 hover:text-white transition-colors uppercase">
          Ciencia
        </a>
        <a href="/systems-catalog" class="hidden md:block text-[10px] tracking-[0.2em] text-neutral-400 hover:text-white transition-colors uppercase">
          Sistemas
        </a>
        <a href="/test-biologico" class="text-[10px] tracking-[0.2em] uppercase text-white border border-white/10 px-5 py-2 hover:border-vionyx-bronze hover:text-vionyx-bronze transition-all duration-300">
          Iniciar Test
        </a>
      </div>
    </div>
  </nav>