:root{
	--bg: black; /* dark navy */
	--card:#111827;
	--muted:#94a3b8;
	--accent:#60a5fa;
	--glass:rgba(255,255,255,0.04);
	--radius:12px;
	--max-w:900px;
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
	color-scheme: dark;
}
html,body{height:100%;}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.05), transparent),
				radial-gradient(1000px 500px at 90% 90%, rgba(34,197,94,0.02), transparent),
				var(--bg);
	color:lightcyan;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	display:flex;
	align-items:flex-start; /* keep content at the top instead of vertically centered */
	justify-content:center;
	min-height:100vh; /* ensure body fills viewport */
	padding:48px 20px;
}
.card{
	width:100%;
	max-width:var(--max-w);
	margin-top:12px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius:var(--radius);
	box-shadow: 0 10px 30px rgba(2,6,23,0.6);
	border:1px solid rgba(255,255,255,0.04);
	padding:36px;
	backdrop-filter: blur(6px) saturate(120%);
	display:flex;
	flex-direction:column;
	/* Make the card fill the viewport minus the body's vertical padding (48px top + 48px bottom = 96px) */
	min-height:calc(100vh - 96px);
}
header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin-bottom:18px;
}
.brand{
	display:flex;
	gap:12px;
	align-items:center;
}
main{display:grid;grid-template-columns:1fr;gap:18px}
.hero{
	display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.tag{color:var(--muted);font-size:13px}
.lead{font-size:16px;color:#dbeafe;line-height:1.5}
.links{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.section{padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px}
.muted{color:var(--muted);font-size:14px}
footer{display:flex;justify-content:space-between;align-items:center;margin-top:0;font-size:13px;color:var(--muted)}
/* push footer to the bottom of the card */
.card > footer{margin-top:auto}
@media (max-width:560px){
	body{padding:28px 12px}
	.brand h1{font-size:16px}
	.logo{width:40px;height:40px}
	/* mobile: adjust card min-height to match smaller body vertical padding (28px top + 28px bottom = 56px) */
	.card{min-height:calc(100vh - 56px)}
}