Dark Footer with Newsletter and Multi-Column Links

<footer class="bg-[#1e2420] text-white pt-24 pb-12 border-t-4 border-[#3F556B]"
  style="font-family: 'Inter', sans-serif;">
  <!-- External Asset Imports -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&display=swap"
    rel="stylesheet" />
  <script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>

  <div class="max-w-[1400px] mx-auto px-6 lg:px-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-20">

      <!-- Newsletter Section -->
      <div class="lg:col-span-2">
        <h3 class="text-2xl font-semibold tracking-tighter uppercase text-white mb-4 flex items-center gap-3"
          style="font-family: 'Oswald', sans-serif;">
          <iconify-icon icon="solar:radar-linear" width="24" height="24" class="text-[#3F556B]"></iconify-icon>
          Join Command
        </h3>
        <p class="text-sm text-white/60 mb-6 max-w-sm leading-relaxed">
          Secure frequency for field reports, prototype access, and technical system updates.
        </p>

        <form class="flex max-w-md" onsubmit="event.preventDefault();">
          <input
            type="email"
            placeholder="ENTER COMM LINK"
            class="w-full bg-[#2d322f] border border-white/10 px-4 py-3 text-xs text-white placeholder:text-white/30 focus:outline-none focus:border-[#3F556B] transition-colors uppercase tracking-[0.15em]"
          />
          <button
            type="submit"
            class="bg-[#3F556B] text-white px-6 py-3 text-xs font-semibold uppercase tracking-widest hover:bg-white hover:text-[#1e2420] transition-colors shrink-0 border border-[#3F556B] hover:border-white"
          >
            Transmit
          </button>
        </form>
      </div>

      <!-- Navigation Columns -->
      <div>
        <h4 class="text-xs font-semibold uppercase tracking-[0.2em] text-[#3F556B] mb-6">Systems</h4>
        <ul class="space-y-4">
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Outerwear Matrices</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Thermal Layers</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Tactical Packs</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">All-Terrain Treads</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-xs font-semibold uppercase tracking-[0.2em] text-[#3F556B] mb-6">Logistics</h4>
        <ul class="space-y-4">
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Maintenance Bay</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Warranty Protocol</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Extraction / Returns</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Comm Channel</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-xs font-semibold uppercase tracking-[0.2em] text-[#3F556B] mb-6">Identity</h4>
        <ul class="space-y-4">
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Mission Statement</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Eco-Directive</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Operative Roster</a></li>
          <li><a href="#" class="text-sm text-white/60 hover:text-white transition-colors">Recruitment</a></li>
        </ul>
      </div>
    </div>

    <!-- Bottom Branding and Socials -->
    <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
      <div class="flex items-center gap-4">
        <span class="text-3xl font-semibold tracking-tighter text-white uppercase" style="font-family: 'Oswald', sans-serif;">
          AEX
        </span>
        <p class="text-[10px] text-white/40 uppercase tracking-[0.2em]">
          © 2024 Alpine Engineered Extremes.
        </p>
      </div>

      <div class="flex gap-6">
        <a href="#" class="text-white/40 hover:text-white transition-colors" aria-label="Instagram">
          <iconify-icon icon="solar:camera-linear" width="20" height="20"></iconify-icon>
        </a>
        <a href="#" class="text-white/40 hover:text-white transition-colors" aria-label="Email">
          <iconify-icon icon="solar:letter-linear" width="20" height="20"></iconify-icon>
        </a>
        <a href="#" class="text-white/40 hover:text-white transition-colors" aria-label="YouTube">
          <iconify-icon icon="solar:play-circle-linear" width="20" height="20"></iconify-icon>
        </a>
      </div>
    </div>
  </div>
</footer>