/* ===== 第1套（根域名）：经典官方蓝白风 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: #1f2d3d; background: #ffffff; line-height: 1.75; font-size: 16px;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { vertical-align: middle; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* 页头 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff; border-bottom: 1px solid #e5eaf3;
  box-shadow: 0 2px 12px rgba(15, 40, 80, .05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: #1f2d3d; }
.brand:hover { text-decoration: none; }
.brand .logo-badge {
  width: 34px; height: 34px; border-radius: 9px; background: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
}
.main-nav { display: flex; gap: 6px; }
.main-nav a {
  padding: 8px 16px; border-radius: 8px; color: #44546a; font-size: 15px; font-weight: 500;
}
.main-nav a:hover { background: #eff4fd; color: #2563eb; text-decoration: none; }
.main-nav a.active { background: #2563eb; color: #ffffff; }

/* Hero */
.hero {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
  color: #ffffff; padding: 88px 0 96px;
}
.hero h1 { font-size: 40px; line-height: 1.3; font-weight: 800; max-width: 760px; }
.hero .lead { margin-top: 18px; font-size: 18px; color: #dbeafe; max-width: 720px; }
.hero-actions { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 10px; font-size: 16px; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: #ffffff; color: #1d4ed8; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.7); color: #ffffff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-blue { background: #2563eb; color: #ffffff; }
.btn-blue:hover { background: #1d4ed8; }
.btn.is-loading { opacity: .75; pointer-events: none; }

/* 通用区块 */
.section { padding: 72px 0; }
.section.tint { background: #f5f8fd; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.section-head h2 { font-size: 30px; font-weight: 800; color: #17233c; }
.section-head p { margin-top: 12px; color: #5b6b82; font-size: 16px; }

/* 卡片网格 */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #ffffff; border: 1px solid #e5eaf3; border-radius: 14px; padding: 28px;
  box-shadow: 0 4px 16px rgba(15, 40, 80, .05);
}
.card h3 { font-size: 18px; font-weight: 700; margin: 14px 0 8px; color: #17233c; }
.card p { color: #55637a; font-size: 15px; }
.icon-tile {
  width: 46px; height: 46px; border-radius: 12px; background: #e8f0fe;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 平台下载卡 */
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.platform-card {
  text-align: center; background: #ffffff; border: 1px solid #e5eaf3; border-radius: 14px;
  padding: 30px 18px; transition: border-color .15s ease, box-shadow .15s ease;
}
.platform-card:hover { border-color: #2563eb; box-shadow: 0 8px 24px rgba(37,99,235,.12); }
.platform-card h3 { font-size: 17px; margin: 12px 0 6px; color: #17233c; }
.platform-card p { font-size: 14px; color: #6b7a90; margin-bottom: 14px; }

/* 功能深讲：交替行 */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.feat-row:last-child { margin-bottom: 0; }
.feat-row .feat-text h3 { font-size: 22px; font-weight: 700; color: #17233c; margin-bottom: 12px; }
.feat-row .feat-text p { color: #55637a; margin-bottom: 10px; }
.feat-row .feat-text ul { padding-left: 20px; color: #55637a; }
.feat-row .feat-text li { margin-bottom: 6px; }
.feat-visual {
  border-radius: 16px; background: linear-gradient(135deg, #e8f0fe, #dbeafe);
  min-height: 220px; display: flex; align-items: center; justify-content: center;
}
.feat-row.reverse .feat-visual { order: -1; }

/* 数据统计条 */
.stats-band { background: #17233c; color: #ffffff; border-radius: 18px; padding: 44px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats-band .num { font-size: 34px; font-weight: 800; color: #60a5fa; }
.stats-band .label { margin-top: 6px; color: #cbd5e1; font-size: 14px; }

/* 评价 */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: #ffffff; border: 1px solid #e5eaf3; border-radius: 14px; padding: 26px; }
.review-card .quote { color: #44546a; font-size: 15px; }
.review-card .who { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.review-card .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #2563eb; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.review-card .who .name { font-weight: 600; color: #17233c; font-size: 14px; }
.review-card .who .role { color: #8494a9; font-size: 13px; }

/* 对比表 */
.compare-table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(15,40,80,.06); }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid #edf1f7; font-size: 15px; }
.compare-table thead th { background: #2563eb; color: #ffffff; font-weight: 600; }
.compare-table tbody tr:hover { background: #f5f8fd; }
.compare-table .hl { color: #2563eb; font-weight: 600; }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { background: #ffffff; border: 1px solid #e5eaf3; border-radius: 12px; padding: 22px 26px; margin-bottom: 16px; }
.faq-item h3 { font-size: 17px; font-weight: 700; color: #17233c; margin-bottom: 8px; }
.faq-item p { color: #55637a; font-size: 15px; }

/* CTA 横幅 */
.cta-banner {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-radius: 18px;
  color: #ffffff; text-align: center; padding: 52px 32px;
}
.cta-banner h2 { font-size: 28px; font-weight: 800; }
.cta-banner p { margin: 12px auto 26px; max-width: 640px; color: #dbeafe; }

/* 文章页（zh-cn） */
.article-body { max-width: 780px; margin: 0 auto; }
.article-body h2 { font-size: 26px; font-weight: 800; color: #17233c; margin: 44px 0 16px; }
.article-body h3 { font-size: 19px; font-weight: 700; color: #25344d; margin: 26px 0 10px; }
.article-body p { margin-bottom: 14px; color: #3c4c63; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 14px; color: #3c4c63; }
.article-body li { margin-bottom: 6px; }
.article-hero { background: #f5f8fd; padding: 64px 0; border-bottom: 1px solid #e5eaf3; }
.article-hero h1 { font-size: 34px; font-weight: 800; color: #17233c; max-width: 780px; }
.article-hero .sub { margin-top: 14px; color: #5b6b82; max-width: 720px; font-size: 17px; }

/* 步骤列表 */
.steps { counter-reset: step; max-width: 820px; margin: 0 auto; }
.step { position: relative; padding: 22px 26px 22px 74px; background: #ffffff; border: 1px solid #e5eaf3; border-radius: 12px; margin-bottom: 16px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 22px; top: 22px; width: 34px; height: 34px; border-radius: 50%;
  background: #2563eb; color: #ffffff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 17px; color: #17233c; margin-bottom: 6px; }
.step p { color: #55637a; font-size: 15px; }

/* 页脚 */
.site-footer { background: #17233c; color: #9fb0c7; padding: 48px 0 32px; margin-top: 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.site-footer h4 { color: #ffffff; font-size: 16px; margin-bottom: 12px; }
.site-footer a { color: #9fb0c7; display: block; margin-bottom: 8px; font-size: 14px; }
.site-footer a:hover { color: #ffffff; }
.footer-note { border-top: 1px solid #2b3c58; padding-top: 20px; font-size: 13px; color: #7d8fa9; }
.footer-note p { margin-bottom: 6px; }

@media (max-width: 900px) {
  .card-grid, .review-grid { grid-template-columns: 1fr 1fr; }
  .platform-grid, .stats-band { grid-template-columns: 1fr 1fr; }
  .feat-row { grid-template-columns: 1fr; gap: 20px; }
  .feat-row.reverse .feat-visual { order: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .main-nav a { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 560px) {
  .card-grid, .review-grid, .platform-grid, .stats-band { grid-template-columns: 1fr; }
}