:root{
  --bg: #0b0b0b;
  --fg: #f4f4f4;
  --muted:#9aa0a6;
  --acc:#00b7ff;
  --btn:#1e1e1e;
  --btn-h:#272727;
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:clamp(16px, 4vw, 48px);
  text-align:center;
}
h1{
  font-size:clamp(1.6rem, 5.6vw, 3rem);
  margin:0 0 .5em;
  letter-spacing:.2px;
}
.lead{
  font-size:clamp(1rem, 3.6vw, 1.2rem);
  color:var(--muted);
  margin:0 0 1.5rem;
}
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:clamp(10px, 3vw, 18px);
  width:min(860px, 100%);
}
.btn{
  display:inline-block;
  padding:clamp(12px, 2.6vw, 18px) clamp(14px, 3vw, 22px);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--fg);
  background:var(--btn);
  border:1px solid #2b2b2b;
  font-weight:700;
  font-size:clamp(1rem, 3.6vw, 1.25rem);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:3px}
.btn:hover{ background:var(--btn-h); transform:translateY(-1px); border-color:#3a3a3a}
.note{
  margin:1.25rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}
@media (max-width:720px){
  .grid{ grid-template-columns:1fr; }
}