body{
  margin:0;
  font-family:system-ui, Arial;
  background:#f6f8fc;
  color:#0f172a;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  padding:20px;
  max-width:1100px;
  margin:auto;
}

.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  transition:0.2s;
}

.card:hover{
  transform:translateY(-3px);
}

.hero{
  text-align:center;
  padding:30px 20px;
}

.section{
  max-width:1100px;
  margin:auto;
  padding:30px 20px;
}