<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>404 — Page Not Found | SwiftPOS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      font-family: 'Segoe UI', sans-serif;
      color: #fff;
      overflow: hidden;
    }
    .stars {
      position: fixed; inset: 0; overflow: hidden; z-index: 0;
    }
    .stars::before, .stars::after {
      content: '';
      position: absolute;
      width: 2px; height: 2px;
      background: white;
      border-radius: 50%;
      box-shadow:
        100px 200px white, 300px 100px white, 500px 350px white,
        700px 50px white, 200px 400px white, 800px 300px white,
        150px 500px white, 600px 200px white, 900px 100px white,
        400px 450px white, 50px 350px white, 750px 400px white;
      animation: twinkle 3s infinite alternate;
    }
    .stars::after {
      width: 1px; height: 1px; opacity: .6;
      box-shadow:
        250px 150px white, 450px 250px white, 650px 180px white,
        850px 380px white, 120px 480px white, 550px 420px white;
      animation-delay: 1.5s;
    }
    @keyframes twinkle { from{opacity:.4} to{opacity:1} }

    .error-card {
      position: relative; z-index: 1;
      text-align: center;
      max-width: 520px;
      padding: 60px 40px;
    }
    .error-number {
      font-size: clamp(100px, 20vw, 160px);
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -8px;
      animation: float 3s ease-in-out infinite;
    }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .error-icon {
      font-size: 64px;
      margin-bottom: 16px;
      opacity: .85;
    }
    .error-title {
      font-size: 28px;
      font-weight: 700;
      margin: 16px 0 12px;
    }
    .error-desc {
      opacity: .75;
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 36px;
    }
    .btn-home {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      border: none;
      padding: 14px 36px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: transform .2s, box-shadow .2s;
    }
    .btn-home:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(102,126,234,.5);
      color: white;
    }
    .btn-back {
      background: rgba(255,255,255,.1);
      color: white;
      border: 1px solid rgba(255,255,255,.2);
      padding: 14px 28px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: 12px;
      transition: background .2s;
    }
    .btn-back:hover { background: rgba(255,255,255,.2); color: white; }
    .brand {
      font-size: 13px;
      opacity: .4;
      margin-top: 40px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <div class="stars"></div>
  <div class="error-card">
    <div class="error-number">404</div>
    <div class="error-icon">🔭</div>
    <h1 class="error-title">Page Not Found</h1>
    <p class="error-desc">The page you're looking for seems to have drifted into deep space.<br>It doesn't exist, was moved, or the URL is incorrect.</p>
    <div>
      <a href="/" class="btn-home"><i class="fas fa-home"></i> Go Home</a>
      <a href="javascript:history.back()" class="btn-back"><i class="fas fa-arrow-left"></i> Go Back</a>
    </div>
    <p class="brand">SwiftPOS Software</p>
  </div>
</body>
</html>
