:root{
  --bg:#f7f4f1;
  --paper:#ffffff;
  --ink:#222;
  --muted:#6e6a67;
  --line:#e9e4de;
}



*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
.wrap{width:min(980px, 92%); margin-inline:auto}
.header{
  padding:1rem 0 2rem; border-bottom:1px solid var(--line);
}
.nav{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.nav a{ color:var(--muted); text-decoration:none; font-weight:600 }
.brand{ font-weight:700 }
.hero{ padding:2.2rem 0 }
.hero h1{ margin:0 0 .4rem; font-size:clamp(1.8rem,4vw,2.6rem) }
.lede{ color:var(--muted); max-width:60ch }

.about{ padding:1.6rem 0 1rem; border-bottom:1px solid var(--line) }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.4rem 0 2.4rem;
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.1rem; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.5rem; transition:.2s ease;
}
.card p{ color:var(--muted); margin:.1rem 0 .3rem }
.card .arrow{ margin-top:auto; opacity:.6 }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.06) }

.footer{ padding:1rem 0 2rem; border-top:1px solid var(--line); color:var(--muted) }

@media (max-width:820px){
  .cards{ grid-template-columns:1fr; }
}