---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Page Not Found" description="The page you are looking for could not be found.">
  <section class="not-found">
    <div class="container">
      <div class="not-found__content fade-in">
        <span class="not-found__code">404</span>
        <h1 class="not-found__title">Page Not Found</h1>
        <p class="not-found__desc">
          The page you are looking for does not exist or has been moved.
        </p>
        <a href="/" class="btn btn--primary">Go Home</a>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  .not-found {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
  }
  .not-found__content {
    max-width: 480px;
  }
  .not-found__code {
    display: block;
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-4);
  }
  .not-found__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
  }
  .not-found__desc {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
  }

  @media (max-width: 768px) {
    .not-found__code {
      font-size: 5rem;
    }
  }
</style>