:root{
  --bg:#f7f9fc;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#1d4ed8;
  --white:#fff;
  --line:#e5e7eb;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}
.container{
  width:min(1100px,92%);
  margin-inline:auto;
}
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
.logo{
  font-weight:700; color:var(--brand); font-size:20px;
}
nav a{
  color:var(--text); text-decoration:none; margin-left:16px; font-size:14px;
}
nav a:hover{color:var(--brand)}
.hero{
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  padding:80px 0;
}
.hero h1{margin:0 0 10px}
.hero p{margin:0 0 20px;color:var(--muted)}
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:8px;
}
.section{padding:56px 0}
.section h2{margin-top:0}
.alt{background:#fff}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:10px; padding:18px;
}
.list{padding-left:18px}
.site-footer{
  border-top:1px solid var(--line);
  background:#fff;
}
.footer-wrap{
  display:flex; flex-wrap:wrap; gap:12px 18px;
  justify-content:space-between; align-items:center; padding:18px 0;
  font-size:14px; color:var(--muted);
}
.footer-wrap a{color:var(--muted); text-decoration:none}
.footer-wrap a:hover{color:var(--brand)}
@media (max-width: 820px){
  .grid{grid-template-columns:1fr}
  nav{display:none}
}