:root{
  --ink:#1A1C21;
  --ink-2:#3F4652;
  --muted:#8A9099;
  --line:#E8EAEE;
  --soft:#F5F6F9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.75;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--ink);text-decoration:none}

.hero{
  background:#111214;
  color:#fff;
  padding:56px 0 52px;
  text-align:center;
}
.hero .wrap{padding:0 24px}
.logo{
  width:64px;height:64px;line-height:64px;
  margin:0 auto 18px;
  border-radius:20px;
  background:rgba(255,255,255,.1);
  font-size:26px;font-weight:800;letter-spacing:.04em;
}
.hero h1{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:.06em}
.slogan{margin:0 0 18px;font-size:13.5px;color:rgba(255,255,255,.62);letter-spacing:.08em}
.intro{
  margin:0 auto;max-width:520px;
  font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.72);
}

.sec-title{
  margin:40px 0 16px;
  font-size:16px;font-weight:800;
  padding-left:10px;
  border-left:3px solid #111214;
}

.card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 20px 18px;
  margin-bottom:14px;
  background:#fff;
}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card-mark{
  flex:none;width:46px;height:46px;line-height:46px;text-align:center;
  border-radius:14px;background:var(--soft);
  font-size:17px;font-weight:800;color:#111214;
}
.card-name{flex:1;min-width:0;display:flex;flex-direction:column}
.card-name b{font-size:16.5px;font-weight:700}
.card-name i{font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.tag{
  flex:none;font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:4px 11px;
}
.card-desc{margin:0 0 14px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.card-links{display:flex;gap:10px}
.card-links a{
  flex:1;text-align:center;
  font-size:13.5px;font-weight:600;
  background:var(--soft);
  border-radius:12px;
  padding:11px 0;
}
.card-links a:active{background:#E8EBF1}

.contact{
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 20px;
  font-size:13.5px;
  color:var(--ink-2);
}
.contact p{margin:4px 0}
.contact a{font-weight:600;border-bottom:1px solid var(--line)}

.site-foot{
  margin-top:48px;
  border-top:1px solid var(--line);
  padding:26px 0 40px;
  text-align:center;
}
.site-foot p{margin:6px 0}
.site-foot .copy{font-size:12px;color:var(--muted)}
.site-foot a{
  font-size:12.5px;color:var(--muted);
  padding:4px 8px;border-radius:8px;
}
.site-foot a:active{background:var(--soft);color:#111214}