keystoneintel-v2/src/routes/404/+page.svelte

<svelte:head>
	<title>Page Not Found — KeystoneIntel</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<section class="hero-bg relative flex items-center overflow-hidden" style="min-height: 100vh;">
	<div class="absolute left-0 top-0 bottom-0 w-1" style="background: var(--color-gold);"></div>
	<div
		class="absolute right-0 bottom-0 select-none pointer-events-none leading-none"
		style="font-family: var(--font-heading); font-size: 28vw; font-weight: 700; color: rgba(255,255,255,0.025); line-height: 0.85; right: -2vw; bottom: -2vw;"
		aria-hidden="true"
	>404</div>
	<div class="relative z-10 max-w-7xl mx-auto px-6 sm:px-12 py-20 w-full">
		<div class="max-w-3xl mx-auto sm:mx-0 text-center sm:text-left">
			<a href="/" class="font-heading font-700 text-xl" style="color: var(--color-white);">KeystoneIntel</a>
			<div class="overline mt-12 mb-4 sm:mb-5" style="color: var(--color-gold);">Error 404</div>
			<h1 class="font-heading font-700 leading-[1.05] mb-5" style="font-size: clamp(2rem, 5.5vw, 4.2rem); color: var(--color-white);">
				No Signal<br />
				<em style="font-style: italic; color: var(--color-gold-light);">At This Address.</em>
			</h1>
			<p class="mb-9 max-w-xl mx-auto sm:mx-0" style="font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.7);">
				The page you requested has moved or never existed. Return to the homepage or initiate a secure inquiry.
			</p>
			<div class="flex flex-wrap gap-4 justify-center sm:justify-start">
				<a href="/" class="btn-gold">Back to Homepage</a>
				<a href="/#contact" class="btn-outline">Secure Inquiry</a>
			</div>
		</div>
	</div>
</section>