---
import Layout from '../layouts/Layout.astro';
import HeroAtmosphere from '../components/HeroAtmosphere.astro';
import Icon from '../components/Icon.astro';
---
<Layout title="Page Not Found | Warmbly" description="The page you are looking for does not exist." noIndex>
  <section class="relative isolate overflow-hidden text-white min-h-[88vh] flex items-center justify-center">
    <!-- Same airy sky as the marketing hero -->
    <HeroAtmosphere />

    <div class="container-page relative text-center py-24">
      <div class="text-[110px] sm:text-[140px] md:text-[168px] font-semibold tracking-[-0.05em] leading-[0.8] text-white select-none">
        404
      </div>

      <h1 class="mt-6 text-[26px] md:text-[34px] font-semibold tracking-[-0.025em] text-white">
        Page not found
      </h1>
      <p class="mt-4 text-[15px] md:text-[16.5px] text-white/75 max-w-md mx-auto leading-relaxed">
        The page you are looking for doesn't exist or has moved.
      </p>

      <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
        <a href="/" class="inline-flex h-11 px-5 items-center gap-2 rounded-[10px] text-[14.5px] font-medium bg-white hover:bg-white/95 transition-colors shadow-[0_10px_24px_-10px_rgba(8,47,73,0.55)]" style="color:#0c4a6e;">
          <Icon name="arrowRight" size={14} class="rotate-180" /> Back to home
        </a>
        <a href="https://docs.warmbly.com" class="inline-flex h-11 px-5 items-center rounded-[10px] text-[14.5px] font-medium bg-white/10 backdrop-blur ring-1 ring-white/30 text-white hover:bg-white/20 transition-colors">
          Browse the guides
        </a>
      </div>
    </div>
  </section>
</Layout>
