Dark Gradient Brand Footer

<!--
  A footer that paints its own dark gradient, so it looks identical in light and
  dark mode and carries no dark: classes at all. Because the surface is fixed,
  the contrast is set against it once: white on the near-black end clears ~17:1,
  the muted gray-400 links ~7:1. The wordmark grows fluidly (text-4xl -> 6xl)
  rather than at a fixed size that would push past 320px, and the columns fall
  from three to two on the narrowest screens.
-->
<footer class="bg-gradient-to-br from-gray-900 to-black text-gray-300">
  <div class="mx-auto max-w-6xl px-4 py-14">
    <div class="grid gap-10 md:grid-cols-[1.5fr_2fr]">
      <div>
        <a href="/" class="text-4xl font-bold tracking-tight text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 sm:text-5xl lg:text-6xl">Adysre</a>
        <p class="mt-3 max-w-sm text-sm leading-relaxed text-gray-400">The operating system for modern teams.</p>
      </div>

      <nav aria-label="Footer">
        <div class="grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3">
          <div>
            <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-400">Product</h2>
            <ul class="flex flex-col gap-2">
              <li><a href="/features" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400">Features</a></li>
              <li><a href="/pricing" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Pricing</a></li>
              <li><a href="/changelog" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Changelog</a></li>
            </ul>
          </div>
          <div>
            <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-400">Company</h2>
            <ul class="flex flex-col gap-2">
              <li><a href="/about" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">About</a></li>
              <li><a href="/careers" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Careers</a></li>
              <li><a href="/blog" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Blog</a></li>
            </ul>
          </div>
          <div>
            <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-400">Legal</h2>
            <ul class="flex flex-col gap-2">
              <li><a href="/privacy" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Privacy</a></li>
              <li><a href="/terms" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Terms</a></li>
              <li><a href="/security" class="text-sm text-gray-300 hover:text-white hover:underline hover:underline-offset-4">Security</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

    <div class="mt-12 border-t border-white/10 pt-6">
      <p class="text-[0.8125rem] text-gray-400">© <time datetime="2026">2026</time> Adysre Inc.</p>
    </div>
  </div>
</footer>