{% extends "base.html" %}

{% block title %}404 - Node Not Found{% endblock %}

{% block content %}
<main class="max-w-4xl mx-auto px-6 py-40 text-center">
    <div class="glass p-16 rounded-3xl shadow-2xl relative overflow-hidden border-2 terminal-border group">
        <!-- Decorative Glows -->
        <div class="absolute -top-24 -right-24 w-96 h-96 neon-bg opacity-10 rounded-full blur-[100px]"></div>
        <div class="absolute -bottom-24 -left-24 w-96 h-96 neon-bg opacity-10 rounded-full blur-[100px]"></div>

        <div class="relative z-10">
            <div class="inline-block px-3 py-1 border border-rose-500/50 rounded-full mb-8 bg-rose-500/5">
                <span class="text-[9px] font-black tracking-[0.5em] text-rose-500 uppercase">Error_404_NotFound</span>
            </div>
            
            <h1 class="text-8xl font-black text-white tracking-tighter mb-6 group-hover:neon-text transition-all duration-700">404</h1>
            <p class="text-xl font-black text-zinc-300 uppercase tracking-widest mb-10">Target Node Disconnected</p>
            
            <div class="max-w-md mx-auto p-6 bg-zinc-900/50 border terminal-border rounded-xl mb-12">
                <p class="text-[11px] text-zinc-500 leading-relaxed font-medium uppercase tracking-[0.1em]">
                    The requested segment or template could not be located in the current registry synchronization. 
                    Verify the address or check for system updates.
                </p>
            </div>

            <a href="/" class="inline-flex items-center px-12 py-5 neon-bg text-black font-black text-[11px] uppercase tracking-[0.3em] rounded-xl hover:brightness-125 transition-all">
                Return to Core
            </a>
        </div>
    </div>
</main>
{% endblock %}