<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>404 - Page Not Found | Hisab Seba</title>

<script src="https://cdn.tailwindcss.com"></script>

<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter','ui-sans-serif','system-ui']
},
boxShadow: {
premium: '0 25px 80px rgba(37,99,235,.25)'
}
}
}
}
</script>

</head>

<body class="min-h-screen bg-slate-950 text-white font-sans flex items-center justify-center px-6">

<!-- background glow -->
<div class="absolute inset-0 -z-10 overflow-hidden">

<div class="absolute -top-32 -left-32 w-96 h-96 bg-blue-500/30 blur-3xl rounded-full"></div>

<div class="absolute top-1/3 right-[-150px] w-[450px] h-[450px] bg-cyan-400/20 blur-3xl rounded-full"></div>

<div class="absolute bottom-[-200px] left-[20%] w-[500px] h-[500px] bg-indigo-500/20 blur-3xl rounded-full"></div>

</div>


<div class="max-w-6xl w-full grid lg:grid-cols-2 gap-16 items-center">


<!-- LEFT SIDE -->
<div>

<a href="{{ url('/') }}" class="flex items-center gap-3 mb-8">

<img src="{{ asset('storage/hisabseba-logo.png') }}" class="h-12">

<span class="text-xl font-bold">Hisab Seba</span>

</a>


<h1 class="text-8xl font-black tracking-tight text-white">
404
</h1>


<h2 class="mt-6 text-4xl font-bold leading-tight">
Page Not Found
</h2>


<p class="mt-6 text-lg text-slate-300 leading-8 max-w-lg">
The page you are looking for doesn't exist or may have been moved.
Please check the URL or return to the homepage.
</p>


<div class="mt-10 flex flex-wrap gap-4">

<a href="{{ route('landing.home') }}"
class="px-8 py-4 rounded-2xl bg-gradient-to-r from-blue-600 to-cyan-500 font-bold shadow-premium hover:from-blue-700 hover:to-cyan-600 transition">

Go to Homepage

</a>


<a href="{{ route('landing.contact') }}"
class="px-8 py-4 rounded-2xl border border-white/20 hover:bg-white/10 transition font-semibold">

Contact Support

</a>

</div>


<div class="mt-12 grid grid-cols-3 gap-4 max-w-lg">

<div class="bg-white/5 border border-white/10 rounded-xl p-4 text-center">

<p class="text-xl font-bold">Check</p>
<p class="text-sm text-slate-400">URL</p>

</div>


<div class="bg-white/5 border border-white/10 rounded-xl p-4 text-center">

<p class="text-xl font-bold">Return</p>
<p class="text-sm text-slate-400">Homepage</p>

</div>


<div class="bg-white/5 border border-white/10 rounded-xl p-4 text-center">

<p class="text-xl font-bold">Search</p>
<p class="text-sm text-slate-400">Again</p>

</div>

</div>

</div>



<!-- RIGHT SIDE VISUAL -->
<div class="relative">

<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/10 blur-2xl rounded-[40px]"></div>


<div class="relative bg-white/5 border border-white/10 backdrop-blur-xl rounded-[40px] p-8">

<div class="bg-slate-900 rounded-[28px] border border-white/10 p-10 text-center">

<div class="mx-auto w-28 h-28 rounded-[28px] bg-gradient-to-br from-blue-600 to-cyan-500 flex items-center justify-center text-5xl shadow-premium">

!

</div>

<h3 class="text-3xl font-black mt-8">
Lost Page
</h3>

<p class="text-slate-400 mt-4 max-w-sm mx-auto leading-7">
This page is missing or no longer exists on this server.
Try navigating back to the homepage.
</p>


<div class="mt-10 space-y-3 text-left">

<div class="p-4 rounded-xl border border-white/10 bg-white/5">

<p class="font-semibold">Status</p>
<p class="text-sm text-rose-400">HTTP 404 Not Found</p>

</div>


<div class="p-4 rounded-xl border border-white/10 bg-white/5">

<p class="font-semibold">Suggestion</p>
<p class="text-sm text-slate-400">Use navigation menu to continue</p>

</div>


<div class="p-4 rounded-xl border border-white/10 bg-white/5">

<p class="font-semibold">Need help?</p>
<p class="text-sm text-slate-400">Contact support team</p>

</div>

</div>

</div>

</div>

</div>

</div>


</body>
</html>