<?php

/**
 * The template for displaying 404 pages (not found)
 */
get_header();
?>

<style>
    .not-found-section {
        min-height: calc(100vh - 72px);
        margin-top: 72px;
        background: #0c0f18;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .not-found-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 40%, rgba(10, 49, 97, .18) 0%, transparent 70%);
        pointer-events: none;
    }

    .not-found-code {
        font-size: clamp(100px, 20vw, 200px);
        font-weight: 800;
        line-height: 1;
        background: #fff;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 8px;
    }

    .not-found-title {
        font-size: clamp(22px, 4vw, 36px);
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 16px;
    }

    .not-found-desc {
        font-size: 16px;
        color: rgba(255, 255, 255, .6);
        max-width: 420px;
        line-height: 1.7;
        margin: 0 auto 36px;
    }

    .not-found-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nf-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 1000px;
        background: #0A3161 !important;
        color: #fff !important;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none !important;
        transition: background .25s, transform .2s;
    }

    .nf-btn-primary:hover {
        background: #06203f !important;
        color: #fff !important;
        transform: translateY(-2px);
        text-decoration: none !important;
    }

    .nf-btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 1000px;
        background: transparent !important;
        border: 2px solid #0A3161 !important;
        color: #fff !important;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none !important;
        transition: border-color .25s, color .25s, transform .2s, background .25s;
    }

    .nf-btn-outline:hover {
        background: #0A3161 !important;
        border-color: #0A3161 !important;
        color: #fff !important;
        transform: translateY(-2px);
        text-decoration: none !important;
    }

    /* Floating blobs */
    .nf-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: .18;
        pointer-events: none;
    }

    .nf-blob-1 {
        width: 400px;
        height: 400px;
        background: #0A3161;
        top: -100px;
        right: -80px;
    }

    .nf-blob-2 {
        width: 300px;
        height: 300px;
        background: #06203f;
        bottom: -60px;
        left: -60px;
    }
</style>

<section class="not-found-section">
    <!-- Floating decoration blobs -->
    <div class="nf-blob nf-blob-1"></div>
    <div class="nf-blob nf-blob-2"></div>

    <div class="container text-center position-relative">
        <div class="not-found-code">404</div>
        <div class="not-found-title">Page Not Found</div>
        <p class="not-found-desc">
            Oops! The page you're looking for doesn't exist or has been moved.
            Let's get you back on track.
        </p>
        <div class="not-found-actions">
            <a href="<?php echo home_url(); ?>" class="nf-btn-outline">
                ← Back to Home
            </a>
            <a href="<?php echo home_url('/insights/'); ?>" class="nf-btn-outline">
                Explore Insights
            </a>
        </div>
    </div>
</section>

<?php get_footer(); ?>