<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile Not Found</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=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root { --primary:#f9811e; --secondary:#00a854; }
    body { font-family:'DM Sans',sans-serif; background:#f4f2ee; min-height:100vh; display:flex; align-items:center; justify-content:center; }
    .card-404 {
      max-width:440px; width:100%; background:#fff; border-radius:24px;
      padding:48px 32px; text-align:center;
      box-shadow:0 8px 40px rgba(0,0,0,.09);
    }
    .icon-wrap {
      width:90px; height:90px; background:rgba(249,129,30,.1); border-radius:50%;
      display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
    }
    .icon-wrap i { font-size:40px; color:var(--primary); }
    h1 { font-size:28px; font-weight:700; color:#191919; margin-bottom:8px; }
    p  { color:#666; font-size:16px; line-height:1.6; }
    .slug-box {
      background:#f9f9f7; border:1px dashed #e0e0e0; border-radius:10px;
      padding:10px 16px; font-family:monospace; font-size:15px; color:#444;
      margin:16px 0; word-break:break-all;
    }
    .btn-home {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--primary); color:#fff; border:none; border-radius:12px;
      padding:13px 28px; font-size:16px; font-weight:600; cursor:pointer;
      text-decoration:none; transition:all .25s; margin-top:8px;
      box-shadow:0 4px 16px rgba(249,129,30,.3);
    }
    .btn-home:hover { background:#e57316; transform:translateY(-1px); color:#fff; }
  </style>
</head>
<body>
  <div class="card-404">
    <div class="icon-wrap">
      <i class="bi bi-person-x"></i>
    </div>
    <h1>Profile Not Found</h1>
    <p>The profile you're looking for doesn't exist, may have been removed, or the link might be incorrect.</p>
    <?php if (!empty($slug)): ?>
    <div class="slug-box">/<strong><?= esc($slug) ?></strong></div>
    <?php endif; ?>
    <p style="font-size:14px;color:#999">Please check the URL or scan the QR code again.</p>
    <a href="<?= base_url() ?>" class="btn-home">
      <i class="bi bi-house-fill"></i> Go Home
    </a>
  </div>
</body>
</html>
