:root {
	--bg-0: #0b0d12;
	--bg-1: #121620;
	--bg-2: #1a2130;
	--text: #e6e9f2;
	--muted: #a9b0c3;
	--accent: #5ac8fa;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 800px at 10% -10%, #1b2436 0%, transparent 70%),
		radial-gradient(1200px 800px at 110% 110%, #101725 0%, transparent 65%),
		linear-gradient(160deg, var(--bg-1), var(--bg-0));
	display: grid;
	place-items: center;
}

.page {
	width: 100%;
	min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	padding: 48px 20px;
	position: relative;
	overflow: hidden;
}

.content {
	text-align: center;
	max-width: 860px;
	padding: 24px;
	backdrop-filter: blur(2px);
}

.logo {
	width: clamp(140px, 28vw, 320px);
	height: auto;
	display: inline-block;
	filter: drop-shadow(0 6px 30px rgba(0,0,0,.45));
	animation: fade-in .9s ease-out both;
}

.title {
	margin: 22px 0 8px;
	font-weight: 800;
	letter-spacing: .02em;
	font-size: clamp(28px, 5vw, 56px);
}

.subtitle {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: clamp(14px, 2.2vw, 18px);
}

.domain {
	margin: 8px 0 0;
	color: #cfd5e6;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: clamp(12px, 1.8vw, 14px);
	opacity: .9;
}

.footer {
	font-size: 12px;
	color: var(--muted);
	opacity: .8;
}

.footer a {
	color: var(--accent);
	text-decoration: none;
}
.footer a:hover { text-decoration: underline; }

.social { margin-top: 12px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; }
.social-icon {
	width: 28px;
	height: 28px;
	color: #1877f2; /* Facebook blue */
	fill: currentColor;
	transition: transform .2s ease, opacity .2s ease;
	opacity: .95;
}
.social-link:hover .social-icon {
	transform: translateY(-1px) scale(1.05);
	opacity: 1;
}

/* Ambient decorative shapes inspired by template */
.decor {
	position: absolute;
	border-radius: 999px;
	filter: blur(40px);
	opacity: .22;
	pointer-events: none;
}
.decor--top-left {
	width: 420px; height: 420px;
	background: radial-gradient(closest-side, #3b82f6, transparent 70%);
	top: -140px; left: -120px;
}
.decor--bottom-right {
	width: 560px; height: 560px;
	background: radial-gradient(closest-side, #22d3ee, transparent 70%);
	right: -200px; bottom: -200px;
}

@keyframes fade-in {
	from { opacity: 0; transform: translateY(6px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-color-scheme: light) {
	:root { --text: #0e1320; --muted: #535a70; }
	body {
		background:
			radial-gradient(1200px 800px at -10% -10%, #e6f0ff 0%, transparent 65%),
			radial-gradient(1200px 800px at 110% 110%, #eaf8ff 0%, transparent 65%),
			linear-gradient(160deg, #f5f7fb, #f1f5ff);
	}
	.decor { opacity: .4; }
}