{% extends 'base.html' %}{% load static %}
{% block title %}Page Not Found — Unity Nation{% endblock %}
{% block content %}
<div class="container" style="min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:60px 20px;text-align:center">
<div style="max-width:440px;position:relative">
  <div style="position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(123,95,230,.15),transparent 70%);filter:blur(30px);pointer-events:none"></div>
  <div style="position:relative;z-index:1">
    <div style="font-family:var(--ff);font-size:6rem;font-weight:800;background:linear-gradient(90deg,var(--vlt),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:18px">404</div>
    <h1 style="font-family:var(--ff);font-size:1.6rem;font-weight:700;margin-bottom:10px">Page Not Found</h1>
    <p style="color:var(--muted);margin-bottom:30px">The page you're looking for doesn't exist or has been moved.</p>
    <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap">
      <a href="{% url 'home' %}" class="btn btn-violet btn-lg"><i class="fas fa-home"></i>Go Home</a>
      {% if user.is_authenticated %}<a href="{% url 'dashboard' %}" class="btn btn-ghost btn-lg"><i class="fas fa-th-large"></i>Dashboard</a>{% endif %}
    </div>
  </div>
</div>
</div>
{% endblock %}