:root{
	--bg-1: linear-gradient(135deg,#0f1724 0%, #0b1220 50%, #071022 100%);
	--card: rgba(255,255,255,0.04);
	--glass: rgba(255,255,255,0.06);
	--accent: #7dd3fc;
	--accent-2: #60a5fa;
	--muted: rgba(255,255,255,0.75);
	--text: #e6eef8;
	--radius: 14px;
	--shadow: 0 8px 30px rgba(2,6,23,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:var(--text);
	background: var(--bg-1);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	/* display:flex; */
	align-items:center;
	justify-content:center;
	padding: 1.25rem;
	line-height:1.45;
}

.page-card{
	width:100%;
	max-width:860px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border:1px solid var(--glass);
	border-radius:var(--radius);
	padding:2.25rem 2.5rem;
	box-shadow:var(--shadow);
	backdrop-filter: blur(6px) saturate(120%);
}

h1{
	margin:0 0 .6rem 0;
	font-weight:700;
	letter-spacing:-0.02em;
	color:var(--text);
	font-size:clamp(1.6rem, 4vw, 2.6rem);
}

p{
	margin:0;
	color:var(--muted);
	font-size:clamp(1rem, 1.6vw, 1.125rem);
}

.lead{
	margin-top:.6rem;
	color:var(--muted);
}

.cta{
	display:inline-block;
	margin-top:1.25rem;
	padding:.65rem 1rem;
	border-radius:10px;
	background:linear-gradient(90deg,var(--accent),var(--accent-2));
	color:#04202b;
	font-weight:600;
	text-decoration:none;
	box-shadow:0 8px 20px rgba(96,165,250,0.12);
	transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(96,165,250,0.18)}

.meta{
	margin-top:1rem;
	font-size:.9rem;
	color:rgba(255,255,255,0.55);
}

/* small utilities */
.row{display:flex;gap:1rem;flex-wrap:wrap}
.center{display:flex;align-items:center;justify-content:center}

/* simple entrance animation */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-card{animation:fadeUp .5s ease both}

/* responsive spacing */
@media (max-width:520px){
	.page-card{padding:1.25rem}
}

/* dark-mode tuned via prefers-color-scheme */
@media (prefers-color-scheme: light){
	:root{--text:#0b1220;--muted:rgba(11,18,32,0.7);--card:rgba(255,255,255,0.92);--bg-1:linear-gradient(180deg,#f7fbff,#eef6ff)}
	body{background:var(--bg-1)}
	.page-card{border-color:rgba(2,6,23,0.04);box-shadow:0 8px 30px rgba(2,6,23,0.06)}
	.cta{color:#04202b}
}

/* Accessibility focus */
a:focus{outline:3px solid rgba(125,211,252,0.16);outline-offset:3px;border-radius:8px}