Minimal Floating Footer

<!--
  A compact footer that floats as an inset card rather than a full-bleed bar:
  the padding around it and the rounded, shadowed surface set it off from the
  page. Everything lives in one flex row that stacks below sm, so the brand,
  links and copyright are never clipped by the card's own padding at 320px. The
  outer padding is the gap to the page edge; the card itself is centred and
  capped at max-w-5xl.
-->
<div class="px-4 pb-4">
  <footer class="mx-auto flex max-w-5xl flex-col items-center gap-4 rounded-2xl border border-gray-200 bg-white px-6 py-5 shadow-sm sm:flex-row sm:justify-between dark:border-gray-800 dark:bg-gray-900">
    <a href="/" class="font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>

    <nav aria-label="Footer">
      <ul class="flex flex-wrap justify-center gap-x-5 gap-y-2">
        <li><a href="/about" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">About</a></li>
        <li><a href="/pricing" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Pricing</a></li>
        <li><a href="/contact" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Contact</a></li>
      </ul>
    </nav>

    <p class="text-[0.8125rem] text-gray-500 dark:text-gray-400">
      © <time datetime="2026">2026</time> Adysre Inc.
    </p>
  </footer>
</div>