:root{
	--bg:#0b1220;
	--card:rgba(255,255,255,.06);
	--text:rgba(255,255,255,.92);
	--muted:rgba(255,255,255,.70);
	--line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
body{
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	background:
		radial-gradient(1200px 700px at 20% -10%, rgba(76,154,255,.25), transparent 60%),
		radial-gradient(900px 500px at 90% 10%, rgba(110,220,255,.20), transparent 55%),
		var(--bg);
	color:var(--text);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

.top{
	border-bottom:1px solid var(--line);
	background:rgba(0,0,0,.15);
	backdrop-filter:blur(10px);
}
.top .wrap{
	display:flex;gap:16px;align-items:center;justify-content:space-between;
	padding:14px 16px;
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:44px;height:44px;object-fit:contain}
.name{font-weight:800;letter-spacing:.2px}
.tag{font-size:13px;color:var(--muted)}

.nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.btn{
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--line);
	border-radius:12px;
	padding:10px 12px;
	min-height:44px; /* mobile touch target */
}
.btn:hover{text-decoration:none;border-color:rgba(255,255,255,.25)}
.btn.solid{background:rgba(76,154,255,.26);border-color:rgba(76,154,255,.35)}
.btn.outline{background:transparent}

.hero{padding:48px 16px 22px}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.hero p{max-width:720px;color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 18px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 24px}

.grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	margin-top:18px;
}
.card{
	background:var(--card);
	border:1px solid var(--line);
	border-radius:16px;
	padding:16px;
}
.card h2{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.5}

.foot{border-top:1px solid var(--line);margin-top:40px}
.small{color:var(--muted);font-size:13px;padding:16px;display:flex;gap:10px}
.footer-row {
	display: flex;
	align-items: center;
	gap: 3px;          /* controls spacing between elements */
	line-height: 1;    /* removes vertical double-spacing */
}

@media (max-width: 860px){
	.grid{grid-template-columns:1fr}
	.top .wrap{flex-direction:column;align-items:stretch}
	.nav{justify-content:flex-start}
}