Responsive Multi-Column Footer with Branding & Links

<footer class="relative">
  <div class="mx-auto max-w-7xl px-6 pb-10">
    <div class="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent mb-8"></div>
    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <div class="space-y-3">
        <a href="#" class="flex items-center gap-3">
          <div
            class="h-8 w-8 rounded-md bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-sm tracking-tight font-semibold"
            style="letter-spacing:-0.02em;">
            ΛN
          </div>
          <span class="text-base font-medium tracking-tight">Nova</span>
        </a>
        <p class="text-sm text-neutral-400 max-w-xs">
          Build, ship, and scale delightful products with a platform designed for speed and reliability.
        </p>
      </div>
      <div class="space-y-2">
        <div class="text-sm font-medium">Product</div>
        <ul class="space-y-1.5 text-sm text-neutral-300">
          <li><a class="hover:text-white transition-colors" href="#">Features</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Pricing</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Changelog</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Docs</a></li>
        </ul>
      </div>
      <div class="space-y-2">
        <div class="text-sm font-medium">Company</div>
        <ul class="space-y-1.5 text-sm text-neutral-300">
          <li><a class="hover:text-white transition-colors" href="#">About</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Blog</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Careers</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="space-y-2">
        <div class="text-sm font-medium">Resources</div>
        <ul class="space-y-1.5 text-sm text-neutral-300">
          <li><a class="hover:text-white transition-colors" href="#">Guides</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Status</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Security</a></li>
          <li><a class="hover:text-white transition-colors" href="#">Support</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-neutral-400">
      <p>© 2025 Nova Inc. All rights reserved.</p>
      <div class="flex items-center gap-4">
        <a href="#" class="hover:text-white transition-colors">Privacy</a>
        <a href="#" class="hover:text-white transition-colors">Terms</a>
        <a href="#" class="hover:text-white transition-colors">Cookies</a>
      </div>
    </div>
  </div>
</footer>