<!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</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    body{
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#0f172a,#1e293b);
      color:white;
      overflow:hidden;
    }

    .container{
      text-align:center;
    }

    h1{
      font-size:120px;
      color:#38bdf8;
      text-shadow:0 0 20px rgba(56,189,248,0.7);
    }

    h2{
      font-size:32px;
      margin-bottom:15px;
    }

    p{
      color:#cbd5e1;
      margin-bottom:30px;
      font-size:18px;
    }

    .btn{
      display:inline-block;
      padding:14px 28px;
      background:#38bdf8;
      color:#0f172a;
      text-decoration:none;
      font-weight:bold;
      border-radius:8px;
      transition:0.3s;
    }

    .btn:hover{
      background:white;
      transform:scale(1.05);
    }

    .circle{
      position:absolute;
      border-radius:50%;
      background:rgba(56,189,248,0.15);
      animation:float 6s infinite ease-in-out;
    }

    .circle:nth-child(1){
      width:200px;
      height:200px;
      top:10%;
      left:10%;
    }

    .circle:nth-child(2){
      width:150px;
      height:150px;
      bottom:10%;
      right:15%;
      animation-delay:2s;
    }

    @keyframes float{
      0%,100%{
        transform:translateY(0);
      }
      50%{
        transform:translateY(-20px);
      }
    }
  </style>
</head>
<body>

  <div class="circle"></div>
  <div class="circle"></div>

  <div class="container">
    <h1>404</h1>
    <h2>Page Not Found</h2>
    <p>Oops! The page you are looking for doesn't exist.</p>
    <a href="{{ url('/') }}" class="btn">Go Home</a>
  </div>

</body>
