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

<BaseLayout
    title="Page Not Found | CULTSCALE"
    description="The page you're looking for doesn't exist."
>
    <section class="error-hero">
        <div class="container">
            <h1 class="error-code">404</h1>
            <h2 class="error-title">Page Not Found</h2>
            <p class="error-message">The page you're looking for doesn't exist or has been moved.</p>
            <a href="/" class="cta-button">Return Home</a>
        </div>
    </section>

    <style>
        .error-hero {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8rem 0 6rem;
        }

        .error-code {
            font-size: clamp(6rem, 15vw, 12rem);
            font-weight: 700;
            color: var(--cult-white);
            line-height: 1;
            margin: 0 0 1rem;
            letter-spacing: -0.02em;
        }

        .error-title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 600;
            color: var(--cult-white);
            margin: 0 0 1.5rem;
        }

        .error-message {
            font-size: 1.25rem;
            color: var(--cult-gray);
            margin: 0 auto 3rem;
            max-width: 600px;
        }

    </style>
</BaseLayout>