:root{
  --bg:#0b0f14;
  --card:#121a22;
  --text:#e7eef7;
  --muted:#9fb0c3;
  --stroke:#1f2b38;
  --btn:#1f6feb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 600px at 20% 0%, #132033, var(--bg));
  color:var(--text);
}

.wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 18px 60px;
}

.card{
  background: rgba(18,26,34,.92);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.title{margin:0 0 6px; font-size: 34px; letter-spacing:.2px}
.subtitle{margin:0; color:var(--muted)}

.links{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  color:white;
  background: var(--btn);
  border: 1px solid rgba(255,255,255,.08);
}

.btn.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--stroke);
}

.bullets{color:var(--muted)}
code{color:#cfe3ff}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.tile{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px;
  background: rgba(11,15,20,.35);
}

.tile h3{margin:0 0 6px}
.tile p{margin:0; color:var(--muted)}

.back{
  display:inline-block;
  margin-bottom: 10px;
  color: var(--muted);
  text-decoration:none;
}

.footer{
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}