:root{
  --bg:#0b1020;
  --panel:#121a2f;
  --text:#f3f6ff;
  --muted:#aeb8d0;
  --line:#273453;
  --link:#8fb1ff;
  --max:760px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at top, rgba(82,112,190,.10), transparent 38%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
body{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
main{
  width:100%;
  max-width:var(--max);
  padding:70px 22px;
}
.card{
  background:linear-gradient(180deg,rgba(18,26,47,.98),rgba(14,21,39,.98));
  border:1px solid var(--line);
  border-radius:22px;
  padding:38px;
  box-shadow:
    0 22px 55px rgba(0,0,0,.34),
    0 2px 8px rgba(0,0,0,.18);
}
h1{
  margin:0 0 16px;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
h2{
  margin:30px 0 8px;
  font-size:1.08rem;
  color:var(--text);
}
p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.7;
  font-size:1rem;
}
a{
  color:var(--link);
  text-decoration:none;
}
a:hover{text-decoration:underline}
nav{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.badge{
  display:inline-block;
  margin-bottom:12px;
  color:var(--muted);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@media(max-width:600px){
  main{padding:34px 16px}
  .card{padding:26px;border-radius:18px}
}