:root{
  --bg:#0b1020;
  --card:#121a33;
  --text:#e9ecf1;
  --muted:#b8c0d6;
  --accent:#7aa2ff;
  --accent2:#9bb4ff;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #17214a 0%, var(--bg) 60%);
  color:var(--text);
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(720px,100%);
  background:linear-gradient(180deg,var(--card),#0f1730);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:28px;
  box-shadow:0 20px 80px rgba(0,0,0,0.35);
}

.header h1{
  margin:0 0 6px;
  font-size:34px;
  letter-spacing:.2px;
}
.tagline{
  margin:0;
  color:var(--muted);
  font-size:16px;
}

.about{
  margin-top:18px;
  padding:16px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  line-height:1.55;
}

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

.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:var(--accent2);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover,
.btn:focus{
  transform:translateY(-1px);
  border-color:rgba(122,162,255,0.6);
  color:#c7d3ff;
  outline:none;
}

.footer{
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
}

/* If you also want normal links somewhere else */
a { color: var(--accent2); }
a:visited { color: #8fa6e6; }
a:hover, a:focus { color: #c7d3ff; }