<header class="fixed top-0 left-0 right-0 bg-[#f9f0e6]/80 backdrop-blur-md border-b border-gray-200 z-50">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <a href="/" class="text-sm font-light text-gray-800 hover:text-gray-600">
            aktascorp
        </a>

        <nav class="hidden md:flex gap-8">
            <a href="/news" class="text-sm font-light text-gray-800 hover:text-gray-600">news</a>
            <a href="/privacy" class="text-sm font-light text-gray-800 hover:text-gray-600">privacy page</a>
            <a href="/cantesso" class="text-sm font-light text-gray-800 hover:text-gray-600">The Cantesso academy</a>
        </nav>

        <button id="menu-toggle" class="md:hidden flex flex-col gap-1.5">
            <span class="w-6 h-0.5 bg-gray-800"></span>
            <span class="w-6 h-0.5 bg-gray-800"></span>
        </button>
    </div>

    <div id="mobile-menu" class="hidden md:hidden bg-[#f9f0e6]/80 backdrop-blur-md border-b border-gray-200">
        <nav class="flex flex-col px-4 py-6 gap-4">
            <a href="/news" class="text-sm font-light text-gray-800 hover:text-gray-600 border-b border-gray-200 pb-3">news</a>
            <a href="/privacy" class="text-sm font-light text-gray-800 hover:text-gray-600 border-b border-gray-200 pb-3">privacy page</a>
            <a href="/cantesso" class="text-sm font-light text-gray-800 hover:text-gray-600">The Cantesso academy</a>
        </nav>
    </div>
</header>

<script>
    document.getElementById('menu-toggle').addEventListener('click', function() {
        document.getElementById('mobile-menu').classList.toggle('hidden');
    });
</script>

<div class="h-[73px]"></div>