/* 第2套：功能磁贴 · 青绿珊瑚 · 居中三栏 */
:root {
  --teal: #0d7377;
  --teal-d: #085458;
  --coral: #e85d4c;
  --sand: #f4f7f6;
  --card: #ffffff;
  --ink: #163033;
  --mute: #5a6e70;
  --line: #d5e3e2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--sand);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}
a { color: var(--teal-d); }
.shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; }
.head {
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
.head-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 16px;
  gap: 14px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--teal);
  font-weight: 800;
  font-size: 20px;
}
.logo svg { width: 26px; height: 26px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pills a {
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: #e7f3f3;
  color: var(--teal-d);
  font-size: 14px;
}
.pills a.current { background: var(--teal); color: #fff; }
.hero {
  text-align: center;
  padding: 56px 0 28px;
}
.hero h1 {
  font-size: 30px;
  line-height: 1.4;
  margin: 0 0 16px;
}
.hero p { color: var(--mute); max-width: 36em; margin: 0 auto 24px; }
.main-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 6px;
  font-weight: 700;
}
.main-cta svg { width: 18px; height: 18px; }
.sub-cta {
  display: inline-block;
  margin-left: 12px;
  color: var(--teal);
  font-weight: 600;
}
section.block { padding: 36px 0; }
section.block h2 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 8px;
}
.subhead { text-align: center; color: var(--mute); margin-bottom: 22px; }
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile {
  background: var(--card);
  border-radius: 8px;
  padding: 18px 16px 16px;
  border-top: 4px solid var(--teal);
  box-shadow: 0 8px 18px rgba(13, 115, 119, 0.06);
}
.tile.alt { border-top-color: var(--coral); }
.tile h3 { font-size: 16px; margin-bottom: 8px; }
.tile p { color: var(--mute); font-size: 14px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.panel {
  background: #fff;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.panel h3 { color: var(--teal); margin-bottom: 10px; font-size: 17px; }
table.cmp {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}
table.cmp th, table.cmp td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
}
table.cmp th { color: var(--teal-d); }
.bar {
  background: var(--teal);
  color: #fff;
  padding: 28px 0;
  text-align: center;
}
.bar a {
  color: #fff;
  background: var(--coral);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 700;
  margin: 0 6px;
}
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.faq-list summary { font-weight: 700; cursor: pointer; }
.faq-list p { margin-top: 8px; color: var(--mute); }
.site-foot {
  background: #0b3d3f;
  color: #c9e4e4;
  text-align: center;
  padding: 28px 16px;
  font-size: 12px;
  margin-top: 20px;
}
.site-foot a { color: #ffd2cb; }
.site-foot .navs { margin-bottom: 10px; }
.site-foot .navs a { margin: 0 8px; }
@media (max-width: 800px) {
  .tiles, .split { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
}