Footer Gaming Futuristic

                <!--
@type: Footer
@industry: Gaming
@style: Futuristic
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
  body {
    background-color: #09090b;
    font-family: 'Rajdhani', sans-serif;
    color: #fafafa;
  }
  .font-orbitron {
    font-family: 'Orbitron', sans-serif;
  }
  .glitch-clip {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 95% 100%, 0 100%);
  }
</style>

<footer class="relative bg-zinc-950 pt-20 pb-10 overflow-hidden border-t border-zinc-900">
  <div class="absolute inset-0 z-0 opacity-10"
    style="background-image: radial-gradient(circle, #facc15 1px, transparent 1px); background-size: 40px 40px;">
  </div>

  <div class="container mx-auto px-6 md:px-12 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20">

      <div class="lg:col-span-5 space-y-6">
        <div class="flex flex-col cursor-pointer">
          <span class="font-orbitron text-xl font-black tracking-tighter text-white leading-none">
            ZINC<span class="text-yellow-400">CITADEL</span>
          </span>
          <span class="font-orbitron text-[8px] text-zinc-500 tracking-[0.4em] uppercase">Security Protocol v4.2</span>
        </div>

        <p class="text-zinc-500 leading-relaxed max-w-md">
          Established in the ashes of the Great Blackout of 2104. We provide the hardware and the neural-links required
          to survive the digital wasteland. Your consciousness is your currency. Spend it wisely.
        </p>
      </div>

      <div class="lg:col-span-2 space-y-4">
        <h4 class="font-orbitron text-xs font-bold text-yellow-400 uppercase tracking-[0.3em] mb-6">Protocols</h4>
        <ul class="space-y-3 text-zinc-400 font-medium uppercase text-sm">
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Neural Sync</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Data Mining</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Black Market</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Ghost Mode</a></li>
        </ul>
      </div>

      <div class="lg:col-span-2 space-y-4">
        <h4 class="font-orbitron text-xs font-bold text-yellow-400 uppercase tracking-[0.3em] mb-6">Sectors</h4>
        <ul class="space-y-3 text-zinc-400 font-medium uppercase text-sm">
          <li><a href="#" class="hover:text-yellow-400 transition-colors">The Core</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Neon Slums</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Orbit Stations</a></li>
          <li><a href="#" class="hover:text-yellow-400 transition-colors">Vault 7</a></li>
        </ul>
      </div>

      <div class="lg:col-span-3 space-y-6">
        <h4 class="font-orbitron text-xs font-bold text-yellow-400 uppercase tracking-[0.3em]">Join the Resistance</h4>
        <div class="relative">
          <input type="email" placeholder="[email protected]"
            class="w-full bg-zinc-900/50 border border-zinc-800 p-4 font-orbitron text-xs text-yellow-400 focus:outline-none focus:border-yellow-400 transition-all uppercase placeholder:text-zinc-700">
          <button
            class="absolute right-2 top-2 bg-yellow-400 text-black px-3 py-2 font-orbitron text-[10px] font-bold uppercase hover:bg-white transition-colors">
            Link
          </button>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
          <span class="text-[10px] text-zinc-600 font-orbitron uppercase tracking-widest">Global Comms: Online</span>
        </div>
      </div>
    </div>

    <div class="pt-10 border-t border-zinc-900 flex flex-col md:flex-row justify-between items-center gap-6">
      <div class="text-[10px] font-orbitron text-zinc-600 tracking-[0.2em] uppercase">
        &copy; 2026 ZINC-CITADEL. ALL BIOMETRIC DATA RESERVED.
      </div>

      <div class="text-[10px] font-orbitron text-zinc-500 uppercase tracking-widest border border-zinc-800 px-3 py-1">
        Ver: 9.0.4-Stable
      </div>
    </div>
  </div>

  <div
    class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-yellow-400 to-transparent opacity-20">
  </div>
</footer>