

<!-- v1/error/404.html -->
<div class="d-flex flex-column justify-content-center align-items-center text-center px-4 bg-light"
     style="min-height: 100vh;">


    <div class="p-4 border rounded-3 bg-white shadow-sm" style="max-width: 420px;">
        <h1 class="display-5 fw-bold text-danger mb-2">404</h1>

        <p class="text-muted mb-4">
            The page you’re looking for could not be found.
        </p>

        <a href="/v1/home" class="btn btn-outline-secondary px-4">
            <i class="bi bi-arrow-left"></i> Back to Home
        </a>
    </div>
</div>

</div>


<style>
    /* Glass effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Cool “glitch” effect for the 404 */
    .glitch-text {
        /* position: relative; */
        color: #fff;
        animation: glitch 1.5s infinite;
    }

    @keyframes glitch {
        0% { text-shadow: 2px 2px #ff0000; }
        20% { text-shadow: -2px -2px #00ffff; }
        40% { text-shadow: 3px -3px #ff00ff; }
        60% { text-shadow: -3px 3px #ffff00; }
        80% { text-shadow: 1px -1px #00ff00; }
        100% { text-shadow: -1px 1px #0000ff; }
    }
</style>
