/* ── PAGE LAYOUT ── */
.error-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 40px 20px;
}

/* ── ANIMATED BG ── */
.bg-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 55% at 20% 30%, rgba(6,182,212,.1) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(129,140,248,.1) 0%, transparent 60%), radial-gradient(ellipse 35% 35% at 60% 20%, rgba(6,182,212,.06) 0%, transparent 55%);
}

.bg-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(6,182,212,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
}

/* ── FLOATING PARTICLES ── */
.particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden
}

.particle {
	position: absolute;
	border-radius: 50%;
	animation: floatUp linear infinite;
	opacity: 0;
}

@keyframes floatUp {
	0% {
		transform: translateY(100vh) scale(0);
		opacity: 0
	}

	10% {
		opacity: .6
	}

	90% {
		opacity: .3
	}

	100% {
		transform: translateY(-10vh) scale(1);
		opacity: 0
	}
}

/* ── 404 NUMBER ── */
.error-num-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	z-index: 2;
}

.error-num {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(7rem, 22vw, 16rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	background: linear-gradient(135deg, #06b6d4, #818cf8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 0 40px rgba(6,182,212,.25)) drop-shadow(0 0 80px rgba(129,140,248,.18));
	animation: glitch 6s ease-in-out infinite;
	user-select: none;
}

@keyframes glitch {
	0%,94%,100% {
		transform: translate(0);
		filter: drop-shadow(0 0 40px rgba(6,182,212,.25)) drop-shadow(0 0 80px rgba(129,140,248,.18))
	}

	95% {
		transform: translate(-3px, 1px);
		filter: drop-shadow(3px 0 0 rgba(6,182,212,.7)) drop-shadow(-3px 0 0 rgba(129,140,248,.7))
	}

	96% {
		transform: translate(3px,-1px);
		filter: drop-shadow(-3px 0 0 rgba(6,182,212,.7)) drop-shadow(3px 0 0 rgba(129,140,248,.7))
	}

	97% {
		transform: translate(-2px, 2px)
	}

	98% {
		transform: translate(2px,-2px)
	}
}
/* big faded num behind */
.error-num-bg {
	position: absolute;
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(9rem, 28vw, 22rem);
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, rgba(6,182,212,.06), rgba(129,140,248,.06));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	pointer-events: none;
	z-index: 1;
	user-select: none;
}

/* ── CONTENT ── */
.error-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 600px
}

.error-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: linear-gradient(135deg, rgba(6,182,212,.1), rgba(129,140,248,.1));
	border: 1px solid rgba(99,102,241,.3);
	border-radius: 50px;
	padding: .32rem 1rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c2);
	margin-bottom: 1.5rem;
}

.error-title {
	font-family: 'Orbitron', sans-serif;
	font-size: clamp(1.4rem, 3.5vw, 2.2rem);
	font-weight: 900;
	line-height: 1.2;
	color: var(--text);
	margin-bottom: 1rem;
}

.error-desc {
	font-size: 1.05rem;
	color: var(--text-sub);
	line-height: 1.78;
	margin-bottom: 2.5rem;
}

/* ── SEARCH BAR ── */
.search-bar {
	display: flex;
	gap: .6rem;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(99,102,241,.22);
	border-radius: 50px;
	padding: .4rem .4rem .4rem 1.25rem;
	max-width: 460px;
	margin: 0 auto 2.5rem;
	transition: border-color .25s, box-shadow .25s;
}

	.search-bar:focus-within {
		border-color: var(--c1);
		box-shadow: 0 0 0 3px rgba(6,182,212,.1);
	}

	.search-bar input {
		background: transparent;
		border: none;
		outline: none;
		color: var(--text);
		font-family: 'Rajdhani', sans-serif;
		font-size: 1rem;
		flex: 1;
	}

		.search-bar input::placeholder {
			color: var(--text-faint)
		}

.search-btn {
	background: linear-gradient(135deg,#06b6d4,#818cf8);
	border: none;
	color: #fff;
	border-radius: 50px;
	padding: .5rem 1.25rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: box-shadow .25s;
	display: flex;
	align-items: center;
	gap: .4rem;
}

	.search-btn:hover {
		box-shadow: 0 0 20px rgba(6,182,212,.35)
	}

/* ── QUICK LINKS ── */
.quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-bottom: 2.5rem
}

.quick-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--dark-card);
	border: 1px solid var(--border);
	border-radius: 50px;
	padding: .45rem 1.1rem;
	font-family: 'Rajdhani', sans-serif;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .25s;
}

	.quick-link.c1 {
		color: var(--c1)
	}

	.quick-link.c2 {
		color: var(--c2)
	}

	.quick-link.c1:hover {
		background: rgba(6,182,212,.1);
		border-color: var(--border-c1);
		transform: translateY(-2px)
	}

	.quick-link.c2:hover {
		background: rgba(129,140,248,.1);
		border-color: var(--border-c2);
		transform: translateY(-2px)
	}

/* ── DIVIDER ── */
.or-line {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--text-faint);
	font-size: .8rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	max-width: 300px;
	margin: 0 auto 2rem;
}

	.or-line::before, .or-line::after {
		content: '';
		flex: 1;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(99,102,241,.25));
	}

	.or-line::after {
		background: linear-gradient(90deg, rgba(99,102,241,.25), transparent)
	}

/* ── BOTTOM STRIP ── */
.bottom-strip {
	position: relative;
	z-index: 2;
	margin-top: 3rem;
	text-align: center;
	color: var(--text-muted);
	font-size: .82rem;
}

	.bottom-strip a {
		color: var(--c1);
		text-decoration: none;
		transition: color .2s
	}

		.bottom-strip a:hover {
			color: var(--c2)
		}

/* ── ASTRONAUT SVG ── */
.astronaut-wrap {
	position: relative;
	z-index: 2;
	margin-bottom: 1.5rem;
	animation: float 4s ease-in-out infinite;
}

@keyframes float {
	0%,100% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-16px)
	}
}