<header class="sticky top-0 z-50 bg-navy/95 backdrop-blur supports-[backdrop-filter]:bg-navy/90 px-6 md:px-12 py-4">
    <div class="max-w-7xl mx-auto flex items-center justify-between gap-6">
        <a href="#" class="flex items-baseline font-black text-xl md:text-2xl tracking-tight text-white shrink-0">
            kontá<span class="text-gold">í</span>
        </a>

        <nav class="hidden md:flex items-center gap-8">
            <a href="#servicos" class="text-white/85 font-bold text-sm hover:text-gold transition-colors">Serviços</a>
            <a href="#planos" class="text-white/85 font-bold text-sm hover:text-gold transition-colors">Planos</a>
            <a href="#como-funciona" class="text-white/85 font-bold text-sm hover:text-gold transition-colors">Como funciona</a>
        </nav>

        <div class="flex items-center gap-4">
            <a href="{{ route('painel') }}" class="hidden lg:flex items-center gap-1.5 text-white/85 font-bold text-sm hover:text-gold transition-colors whitespace-nowrap">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[18px] h-[18px]">
                    <circle cx="12" cy="8" r="4"/>
                    <path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
                </svg>
                Painel do Cliente
            </a>

            <button type="button" class="hidden sm:inline-flex bg-gold hover:bg-gold-hover text-navy font-extrabold text-sm px-5 py-2.5 rounded-full transition-colors whitespace-nowrap cursor-pointer">
                Abrir empresa grátis
            </button>

            <button type="button" data-mobile-menu-toggle aria-label="Abrir menu" aria-expanded="false"
                class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-full text-white hover:bg-white/10 transition-colors cursor-pointer">
                <svg data-menu-icon-open viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="w-6 h-6">
                    <path d="M4 7h16M4 12h16M4 17h16"/>
                </svg>
                <svg data-menu-icon-close viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="w-6 h-6 hidden">
                    <path d="M6 6l12 12M18 6 6 18"/>
                </svg>
            </button>
        </div>
    </div>

    <nav data-mobile-menu class="md:hidden hidden mt-4 pb-2 flex flex-col gap-1 border-t border-white/10 pt-4">
        <a href="#servicos" class="text-white/85 font-bold text-sm py-2.5 hover:text-gold transition-colors">Serviços</a>
        <a href="#planos" class="text-white/85 font-bold text-sm py-2.5 hover:text-gold transition-colors">Planos</a>
        <a href="#como-funciona" class="text-white/85 font-bold text-sm py-2.5 hover:text-gold transition-colors">Como funciona</a>
        <a href="{{ route('painel') }}" class="text-white/85 font-bold text-sm py-2.5 hover:text-gold transition-colors">Painel do Cliente</a>
        <button type="button" class="sm:hidden mt-2 bg-gold hover:bg-gold-hover text-navy font-extrabold text-sm px-5 py-3 rounded-full transition-colors cursor-pointer">
            Abrir empresa grátis
        </button>
    </nav>
</header>
