<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Not Found - Zabibu Residence</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body style="background:#f8fafc;font-family:'Inter',sans-serif">
<div class="min-vh-100 d-flex align-items-center justify-content-center">
  <div class="text-center p-4">
    <div style="font-size:8rem;font-weight:800;color:#e2e8f0;line-height:1">404</div>
    <i class="bi bi-buildings" style="font-size:4rem;color:#1a3c5e;margin-top:-2rem;display:block"></i>
    <h1 style="font-family:'Playfair Display',serif;font-size:2rem;color:#1e293b;margin:1rem 0 0.5rem">Page Not Found</h1>
    <p class="text-muted mb-4">The page you're looking for doesn't exist or has been moved.</p>
    <div class="d-flex gap-3 justify-content-center">
      <a href="<?= defined('APP_URL') ? APP_URL : '/' ?>/" class="btn btn-primary px-4"><i class="bi bi-house me-2"></i>Go Home</a>
      <a href="javascript:history.back()" class="btn btn-outline-secondary px-4"><i class="bi bi-arrow-left me-2"></i>Go Back</a>
    </div>
  </div>
</div>
</body>
</html>
