.page-products {
  --pro-gap: 18px;
  --pro-pad: clamp(16px, 3vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-products .pro-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--abyss) 0%, rgba(11, 34, 48, 0.35) 62%, transparent 100%),
    var(--deep);
}

.page-products .pro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(43, 30, 92, 0.55) 0%, transparent 46%);
  clip-path: polygon(0 0, 42% 0, 30% 100%, 0 100%);
  pointer-events: none;
}

.page-products .pro-hero .container {
  position: relative;
  z-index: 1;
}

.page-products .pro-hero .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
}

.page-products .pro-hero-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pro-hero-copy h1 {
  margin: 14px 0 20px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  transform: skewX(-4deg);
  transform-origin: left bottom;
  color: var(--cold);
  max-width: 20ch;
}

.page-products .pro-hero-lede {
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--silver);
  margin: 0;
}

.page-products .pro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* 首屏右侧仪表板 */
.page-products .pro-hero-board {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--neon);
  background: rgba(7, 13, 31, 0.72);
  padding: var(--pro-pad);
}

.page-products .board-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-products .board-list {
  margin: 0;
  padding: 0;
}

.page-products .board-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}

.page-products .board-item dt {
  font-size: 0.88rem;
  color: var(--slate);
}

.page-products .board-item dd {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--cold);
  font-variant-numeric: tabular-nums;
}

.page-products .board-note {
  margin: 16px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ember);
}

/* ---------- 模块通用 ---------- */
.page-products .pro-mod {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.page-products .pro-mod-copy h2,
.page-products .pro-mod-head h2 {
  margin: 12px 0 16px;
  max-width: 26ch;
}

.page-products .pro-mod-lede {
  max-width: 48ch;
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .pro-mod-tail {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--neon);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .pro-mod-grid {
  align-items: start;
  row-gap: clamp(26px, 4vw, 40px);
}

.page-products .pro-mod-head {
  margin-bottom: clamp(26px, 4vw, 40px);
}

.page-products .pro-mod-head .pro-mod-lede {
  margin-bottom: 0;
}

/* ---------- 01 实时比分 ---------- */
.page-products .pro-mod--live {
  background: linear-gradient(200deg, rgba(43, 30, 92, 0.28) 0%, transparent 55%);
}

.page-products .pulse-track {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(7, 13, 31, 0.6);
}

.page-products .pulse-cap {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .pulse-cells {
  display: flex;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 120px;
}

.page-products .pulse-cells span {
  flex: 1 1 0;
  height: 6px;
  background: rgba(198, 206, 220, 0.18);
}

.page-products .pulse-cells span.is-live {
  background: var(--neon);
}

.page-products .spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .spec-list li {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--deep);
}

.page-products .spec-k {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

.page-products .spec-v {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .pro-mod-aside {
  display: grid;
  gap: var(--pro-gap);
}

.page-products .pro-mod-aside .media-frame {
  margin: 0;
}

.page-products .mini-strip {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--neon);
  background: rgba(11, 34, 48, 0.7);
  padding: 14px 16px;
}

.page-products .mini-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.page-products .mini-strip-meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-products .mini-score {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
}

.page-products .mini-team {
  font-size: 0.84rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-products .mini-team--right {
  text-align: right;
}

.page-products .mini-num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cold);
  font-variant-numeric: tabular-nums;
}

.page-products .mini-sep {
  font-size: 1.2rem;
  color: var(--ember);
}

.page-products .mini-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ember);
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

/* ---------- 02 赛程 ---------- */
.page-products .pro-mod--schedule {
  background: linear-gradient(160deg, rgba(11, 34, 48, 0.9) 0%, transparent 60%);
}

.page-products .pro-mod-grid--flip {
  direction: ltr;
}

.page-products .filter-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .filter-cell {
  padding: 15px 16px;
  background: var(--deep);
}

.page-products .filter-cell p {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .filter-k {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  border-bottom: 1px solid var(--neon-soft);
  padding-bottom: 4px;
}

.page-products .inline-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  background: rgba(7, 13, 31, 0.65);
}

.page-products .inline-fact-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neon);
  white-space: nowrap;
}

.page-products .inline-fact-text {
  flex: 1 1 200px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

/* ---------- 03 档案 ---------- */
.page-products .pro-mod--archive {
  background: linear-gradient(20deg, rgba(43, 30, 92, 0.22) 0%, transparent 50%);
}

.page-products .archive-fields {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .archive-fields > div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .archive-fields dt {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--lime);
}

.page-products .archive-fields dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .pro-mod--archive .media-frame {
  margin: 0;
}

/* ---------- 04 跑动与进阶 ---------- */
.page-products .adv-band {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-strong);
  background: rgba(7, 13, 31, 0.78);
  overflow: hidden;
}

.page-products .adv-band-copy {
  padding: clamp(20px, 3vw, 32px);
}

.page-products .adv-band-copy .pro-mod-lede {
  margin-bottom: 0;
}

.page-products .adv-band-visual {
  border-top: 1px solid var(--line);
  padding: 8px 0 0;
  background: linear-gradient(180deg, rgba(57, 255, 139, 0.06), transparent 70%);
}

.page-products .adv-band-visual svg {
  display: block;
  width: 100%;
  height: 140px;
}

.page-products .adv-metrics {
  display: grid;
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .adv-metric {
  padding: 18px 16px;
  background: var(--deep);
  border-left: 2px solid transparent;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.page-products .adv-metric:hover {
  border-left-color: var(--neon);
  background: rgba(57, 255, 139, 0.045);
}

.page-products .adv-metric-k {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}

.page-products .adv-metric-v {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cold);
}

.page-products .adv-metric-d {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--slate);
}

.page-products .adv-figure {
  margin: 26px 0 0;
}

/* ---------- 05 版本与接入 ---------- */
.page-products .pro-mod--versions {
  background: linear-gradient(210deg, rgba(110, 27, 51, 0.2) 0%, transparent 48%);
}

.page-products .version-track {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line-strong);
}

.page-products .version-node {
  position: relative;
  padding: 0 0 26px 22px;
}

.page-products .version-node::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--neon);
}

.page-products .version-node--soon::before {
  background: var(--ember);
}

.page-products .version-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
  border: 1px solid var(--neon-soft);
  padding: 3px 8px;
}

.page-products .version-node--soon .version-tag {
  color: var(--ember);
  border-color: rgba(255, 90, 54, 0.34);
}

.page-products .version-node h3 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .version-node p {
  margin: 0;
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--slate);
}

.page-products .access-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .access-card {
  padding: 20px 18px;
  background: var(--deep);
  border-top: 2px solid var(--silver);
  transition: border-color 180ms ease, transform 180ms ease;
}

.page-products .access-card:hover {
  border-top-color: var(--neon);
  transform: translateY(-2px);
}

.page-products .access-card--app {
  border-top-color: var(--indigo);
}

.page-products .access-card--api {
  border-top-color: var(--ember);
}

.page-products .access-card h3 {
  margin: 12px 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .access-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--silver);
}

.page-products .access-fit {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem !important;
  color: var(--slate) !important;
}

.page-products .access-no {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-products .api-detail {
  margin-top: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 34, 48, 0.55);
}

.page-products .api-detail-toggle {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--neon);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.page-products .api-detail-toggle:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.page-products .api-detail-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.page-products .api-rows {
  display: grid;
  gap: 1px;
  background: var(--line);
  margin: 16px 0;
}

.page-products .api-row {
  padding: 14px 16px;
  background: var(--deep);
}

.page-products .api-row-k {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}

.page-products .api-row p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--silver);
}

.page-products .api-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .ver-figure {
  margin: 26px 0 0;
}

/* ---------- 06 角色 ---------- */
.page-products .role-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .role-card {
  position: relative;
  padding: 22px 18px;
  background: var(--deep);
  display: grid;
  align-content: start;
  gap: 10px;
  transition: background-color 180ms ease;
}

.page-products .role-card:hover {
  background: rgba(57, 255, 139, 0.05);
}

.page-products .role-card--league,
.page-products .role-card--media {
  background: rgba(11, 34, 48, 0.75);
}

.page-products .role-no {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--neon);
}

.page-products .role-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .role-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--silver);
}

.page-products .role-link {
  align-self: end;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  width: fit-content;
}

.page-products .role-link:hover,
.page-products .role-link:focus-visible {
  color: var(--lime);
}

/* ---------- 收尾 ---------- */
.page-products .pro-cta {
  background:
    linear-gradient(140deg, rgba(43, 30, 92, 0.35) 0%, transparent 52%),
    var(--abyss);
  border-bottom: none;
}

.page-products .cta-box {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--neon);
  padding: clamp(24px, 4vw, 44px);
  background: rgba(7, 13, 31, 0.7);
}

.page-products .cta-box h2 {
  margin: 12px 0 16px;
  max-width: 24ch;
}

.page-products .cta-box > p {
  margin: 0;
  max-width: 56ch;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .cta-links {
  margin-top: 20px !important;
  font-size: 0.84rem !important;
  color: var(--slate) !important;
}

.page-products .cta-links a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-products .cta-links a:hover,
.page-products .cta-links a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-products .pro-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .page-products .spec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .adv-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .adv-band-visual svg {
    height: 170px;
  }
}

@media (min-width: 1024px) {
  .page-products .pro-mod-grid--flip .pro-mod-aside {
    order: -1;
  }

  .page-products .adv-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: stretch;
  }

  .page-products .adv-band-visual {
    border-top: 0;
    border-left: 1px solid var(--line);
    display: flex;
    align-items: center;
  }

  .page-products .adv-band-visual svg {
    height: 200px;
  }

  .page-products .adv-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-products .role-card--fan {
    grid-column: span 5;
  }

  .page-products .role-card--league {
    grid-column: span 7;
  }

  .page-products .role-card--media {
    grid-column: span 7;
  }

  .page-products .role-card--uni {
    grid-column: span 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .access-card:hover {
    transform: none;
  }
}
</main>>>

等等，我需要在 main_html 里再用 h1 检查一下。已经有一个了。在写最终版本之前，我再快速核对一下：

- 只有一个 h1 ✓
- 面包屑 ✓
- 全站有效的 hrefs ✓（/#、/values/、/offerings/、/trends/、/faqs/、/contact/）
- 页内锚点：#live-scores、#schedule、#profiles、#advanced、#versions、#roles ✓——这些 id 都存在
- 图片：5 张图片 ✓
- 第一张图片上没有 lazy ✓
- data-reveal 属性 ✓
- data-panel-toggle ✓
- 品牌名“博业赛场”出现在 hero lede ✓
- 没有禁用的短语 ✓——等等，让我检查一下“本页”之类的。“本页”没出现。“口径”也没出现。“可核对”也没出现。好。

其实等等，我写了“足球与篮球分别按亚足联、国际篮联的竞赛规程确认结果，避免出现两套说法。”这里用的是“竞赛规程”而不是“口径”——没问题。

另外，也没有编造的具名人物 ✓
没有表单 ✓
没有外部链接 ✓

有一个问题：“以亚足联、国际篮联的竞赛规程确认结果”可能会被解读为声称是官方数据。但规则说的是允许“按……口径核定”这种说法，而我的表述指的是按照他们的规则进行核验。应该没问题。

再确认一下迷你比分条里的“主队/客队”——没问题。

另外，page_css 里的选择器都正确限定在 .page-products 下 ✓

让我再确认一下 min-height/overflow——应该没问题。

好，定稿。
<main id="main-content" class="page-products">

  <!-- ========== 首屏 ========== -->
  <section class="section pro-hero" aria-labelledby="pro-hero-title">
    <div class="container">
      <nav class="breadcrumbs" aria-label="页面路径">
        <a href="/">首页</a>
        <span class="crumb-sep" aria-hidden="true">/</span>
        <span class="crumb-current" aria-current="page">数据服务</span>
      </nav>

      <div class="pro-hero-grid">
        <div class="pro-hero-copy" data-reveal>
          <p class="eyebrow">服务清单 · 足球与篮球十二类赛事</p>
          <h1 id="pro-hero-title">比分、赛程、球队资料与跑动数据，一个入口全部查到</h1>
          <p class="pro-hero-lede">
            博业赛场把十二类足球与篮球赛事的四组数据能力放在同一处。比赛日开赛 90 秒内同步比分，
            每轮对阵提前发布，球队档案与跑动指标跟着赛程一起往前走。您想看哪一场，从轮次或球队进去就行。
          </p>
          <div class="pro-hero-actions">
            <a class="btn btn--primary" href="#live-scores">看实时比分能力</a>
            <a class="btn btn--ghost" href="#roles">按角色挑用法</a>
          </div>
        </div>

        <aside class="pro-hero-board" data-reveal data-reveal-delay="60" aria-label="服务规模速览">
          <div class="board-bar">
            <span class="dot" aria-hidden="true"></span>
            <span class="mono">当前服务规模</span>
          </div>
          <dl class="board-list">
            <div class="board-item">
              <dt>在架赛事</dt>
              <dd class="mono">12 类</dd>
            </div>
            <div class="board-item">
              <dt>球队档案</dt>
              <dd class="mono">480 余支</dd>
            </div>
            <div class="board-item">
              <dt>正式比赛</dt>
              <dd class="mono">36,000 余场</dd>
            </div>
            <div class="board-item">
              <dt>归档轮次</dt>
              <dd class="mono">2,400 余个</dd>
            </div>
          </dl>
          <p class="board-note mono">数据版本节点 / 2025 年 6 月</p>
        </aside>
      </div>
    </div>
  </section>

  <!-- ========== 01 实时比分引擎 ========== -->
  <section class="section pro-mod pro-mod--live" id="live-scores" aria-labelledby="mod-live-title">
    <div class="container">
      <div class="grid-12 pro-mod-grid">
        <div class="span-7 pro-mod-copy" data-reveal>
          <p class="eyebrow">01 / 实时比分引擎</p>
          <h2 class="section-title" id="mod-live-title">比分一变，页面上立刻就更新</h2>
          <p class="pro-mod-lede">
            比赛日全天运行，比分快照每 15 秒刷新一次，从开球到终场哨不断流。
            现场记录到访客可见控制在 90 秒以内，您不需要反复手动刷新。
          </p>

          <div class="pulse-track" aria-hidden="true">
            <span class="pulse-cap mono">15s 快照</span>
            <div class="pulse-cells">
              <span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span class="is-live"></span>
            </div>
          </div>

          <ul class="spec-list">
            <li>
              <span class="spec-k mono">15 秒</span>
              <span class="spec-v">单次快照间隔，进球、罚球、换人与红黄牌都会出现在列表和详情页上。</span>
            </li>
            <li>
              <span class="spec-k mono">90 秒</span>
              <span class="spec-v">从现场记录到访客读到结果，这段时间足够您把消息转给一起看球的人。</span>
            </li>
            <li>
              <span class="spec-k mono">三班</span>
              <span class="spec-v">比赛日轮值编辑守场，跨时区的晚间与凌晨场次同样有人接管。</span>
            </li>
          </ul>

          <p class="pro-mod-tail">
            每场比赛的结果页面都带数据来源与最近改写时间，可以直接发链接，不必再补一句解释。
            足球与篮球分别按亚足联、国际篮联的竞赛规程确认结果，避免出现两套说法。
          </p>
        </div>

        <aside class="span-5 pro-mod-aside" data-reveal data-reveal-delay="60">
          <figure class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场边线视角，记分牌数字在背景中发光">
            <figcaption class="media-caption">比赛日夜场，比分条跟着现场节奏刷新</figcaption>
          </figure>

          <div class="mini-strip">
            <div class="mini-strip-head">
              <span class="tag tag--live"><span class="dot" aria-hidden="true"></span>进行中</span>
              <span class="mini-strip-meta mono">足球 · 第 18 轮</span>
            </div>
            <div class="mini-score">
              <span class="mini-team">主队</span>
              <span class="mini-num mono">2</span>
              <span class="mini-sep" aria-hidden="true">:</span>
              <span class="mini-num mono">1</span>
              <span class="mini-team mini-team--right">客队</span>
            </div>
            <div class="mini-meta mono">
              <span>12 秒前更新</span>
              <span>全场 67′</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <!-- ========== 02 中文版赛程与轮次编排 ========== -->
  <section class="section pro-mod pro-mod--schedule" id="schedule" aria-labelledby="mod-sch-title">
    <div class="container">
      <div class="grid-12 pro-mod-grid pro-mod-grid--flip">
        <aside class="span-4 pro-mod-aside" data-reveal>
          <figure class="media-frame media-frame--cut">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="被抽象成线条与刻度的赛程视觉，斜向排列" loading="lazy" decoding="async">
            <figcaption class="media-caption">按轮次铺开的赛季日程</figcaption>
          </figure>
        </aside>

        <div class="span-8 pro-mod-copy" data-reveal data-reveal-delay="60">
          <p class="eyebrow">02 / 中文版赛程</p>
          <h2 class="section-title" id="mod-sch-title">这一轮什么时候开踢，提前半个月就能查</h2>
          <p class="pro-mod-lede">
            博业中文版赛程按轮次编排，每轮开赛前 14 天发布完整对阵与开球时间，赛前 2 小时同步最终参赛名单。
            想提前约人看球、替球队安排出行，或者给自己排一个周末观赛计划，都能拿到确定信息。
          </p>

          <div class="filter-grid">
            <div class="filter-cell">
              <span class="filter-k mono">赛事类别</span>
              <p>各国顶级联赛、次级联赛、杯赛、超级杯、洲际俱乐部赛与国家队赛事，共十二类。</p>
            </div>
            <div class="filter-cell">
              <span class="filter-k mono">轮次</span>
              <p>按第几轮直接跳转，往期的历史轮次同样能往回翻。</p>
            </div>
            <div class="filter-cell">
              <span class="filter-k mono">日期</span>
              <p>看某个比赛日一共排了几场，开场时段一眼扫完。</p>
            </div>
            <div class="filter-cell">
              <span class="filter-k mono">球队</span>
              <p>锁定一支球队，它的全部赛程按时间顺序铺在那里。</p>
            </div>
          </div>

          <div class="inline-fact">
            <span class="mono inline-fact-num">2,400+</span>
            <span class="inline-fact-text">已经归档的轮次记录，最早可以回溯到 2018 赛季，跨赛季对比也能找到参照。</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== 03 球队与球员档案 ========== -->
  <section class="section pro-mod pro-mod--archive" id="profiles" aria-labelledby="mod-arc-title">
    <div class="container">
      <div class="grid-12 pro-mod-grid pro-mod-grid--even">
        <div class="span-6 pro-mod-copy" data-reveal>
          <p class="eyebrow">03 / 球队与球员档案</p>
          <h2 class="section-title" id="mod-arc-title">翻一支冷门球队，也能查到球衣号码</h2>
          <p class="pro-mod-lede">
            已收录 480 余支球队的档案页，覆盖球衣号码、主客场球衣配色、队史荣誉与历史交锋记录。
            查老比赛、写赛前稿、做知识卡片，需要用的字段都摆在同一个页面上。
          </p>

          <dl class="archive-fields">
            <div>
              <dt>球衣号码</dt>
              <dd>按赛季记录号码变化，换号、转会都能对上时间点。</dd>
            </div>
            <div>
              <dt>主客场球衣配色</dt>
              <dd>色值直接可读，做图或排版时不用再去翻旧图找颜色。</dd>
            </div>
            <div>
              <dt>队史荣誉</dt>
              <dd>联赛冠军、杯赛冠军与洲际赛事成绩按赛季列明，不缺年份。</dd>
            </div>
            <div>
              <dt>历史交锋记录</dt>
              <dd>两队过往交手逐场展开，附轮次、开球时间与最终比分。</dd>
            </div>
          </dl>

          <p class="pro-mod-tail">
            低级别联赛和新建球队同样有档案页。想核实一件十多年前的旧球衣，打开球队页按赛季找就行。
          </p>
        </div>

        <aside class="span-6 pro-mod-aside" data-reveal data-reveal-delay="60">
          <figure class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="球衣号码布料的特写，缝线与质感清晰" loading="lazy" decoding="async">
            <figcaption class="media-caption">球衣号码与配色是档案页的常用字段</figcaption>
          </figure>
        </aside>
      </div>
    </div>
  </section>

  <!-- ========== 04 跑动与进阶数据 ========== -->
  <section class="section pro-mod pro-mod--advanced" id="advanced" aria-labelledby="mod-adv-title">
    <div class="container">
      <div class="adv-band" data-reveal>
        <div class="adv-band-copy">
          <p class="eyebrow">04 / 跑动与进阶数据</p>
          <h2 class="section-title" id="mod-adv-title">不止看比分，还能看见球是怎么跑起来的</h2>
          <p class="pro-mod-lede">
            足球赛事逐场记录场均跑动距离，篮球赛事记录回合数、攻防转换次数与投篮分布。
            想看一支球队的体能走势、判断一场比赛的攻防节奏，这些数字比比分本身更能说明问题。
          </p>
        </div>

        <div class="adv-band-visual" aria-hidden="true">
          <svg viewBox="0 0 640 200" preserveAspectRatio="none" focusable="false">
            <defs>
              <linearGradient id="advLine" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stop-color="#39FF8B" stop-opacity="0.25"/>
                <stop offset="55%" stop-color="#39FF8B" stop-opacity="0.95"/>
                <stop offset="100%" stop-color="#9CFFC7" stop-opacity="0.5"/>
              </linearGradient>
            </defs>
            <g stroke="rgba(198,206,220,0.13)" stroke-width="1">
              <line x1="0" y1="40" x2="640" y2="40"/>
              <line x1="0" y1="90" x2="640" y2="90"/>
              <line x1="0" y1="140" x2="640" y2="140"/>
            </g>
            <path d="M0,168 C70,160 120,112 180,116 C250,120 268,58 330,70 C400,84 430,32 500,44 C560,54 590,26 640,20"
                  fill="none" stroke="url(#advLine)" stroke-width="2.5" stroke-linecap="square"/>
            <path d="M0,182 C80,176 140,150 200,154 C272,159 300,120 360,126 C430,133 470,96 540,102 C590,106 616,90 640,86"
                  fill="none" stroke="rgba(198,206,220,0.32)" stroke-width="1.5" stroke-dasharray="4 5"/>
          </svg>
        </div>
      </div>

      <div class="adv-metrics">
        <div class="adv-metric" data-reveal>
          <span class="adv-metric-k mono">足球 / 场均跑动</span>
          <p class="adv-metric-v">全队与个人的场均跑动距离，按轮次累计。</p>
          <p class="adv-metric-d">适合比较同一支球队在密集赛程里的体能起伏。</p>
        </div>
        <div class="adv-metric" data-reveal data-reveal-delay="60">
          <span class="adv-metric-k mono">篮球 / 回合数</span>
          <p class="adv-metric-v">单场回合总数与节奏快慢，和比分放在一起看。</p>
          <p class="adv-metric-d">判断一场球是快打还是磨阵地，不用只看最终分差。</p>
        </div>
        <div class="adv-metric" data-reveal data-reveal-delay="120">
          <span class="adv-metric-k mono">篮球 / 攻防转换</span>
          <p class="adv-metric-v">转换回合的次数与占比，按节次拆分。</p>
          <p class="adv-metric-d">看一支球队在哪一节把节奏提起来。</p>
        </div>
        <div class="adv-metric" data-reveal data-reveal-delay="180">
          <span class="adv-metric-k mono">篮球 / 投篮分布</span>
          <p class="adv-metric-v">出手位置分区统计，从篮下到三分线逐层展开。</p>
          <p class="adv-metric-d">对手感偏好的变化，可以按赛季纵向比对。</p>
        </div>
      </div>

      <figure class="media-frame media-frame--wide adv-figure">
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="球场跑动轨迹的可视化图形，线条重叠交织" loading="lazy" decoding="async">
        <figcaption class="media-caption">整场跑动轨迹叠在一起，能看到队形怎么拉开又怎么收拢</figcaption>
      </figure>
    </div>
  </section>

  <!-- ========== 05 版本演进与接入方式 ========== -->
  <section class="section pro-mod pro-mod--versions" id="versions" aria-labelledby="mod-ver-title">
    <div class="container">
      <div class="pro-mod-head" data-reveal>
        <p class="eyebrow">05 / 版本演进与接入方式</p>
        <h2 class="section-title" id="mod-ver-title">从 2018 年上线到现在，能力一层层加上来</h2>
        <p class="pro-mod-lede">
          比分应用从最基础的当天赛程起步，之后逐步补齐球队档案、历史交锋与跑步指标。
          每个版本更新都围绕同一个方向：让查询更快，让字段更细。
        </p>
      </div>

      <ol class="version-track">
        <li class="version-node" data-reveal>
          <span class="version-tag mono">2018</span>
          <h3>比分应用上线</h3>
          <p>先把当天所有赛事的比分和赛程放进一个页面，一个入口就能扫完整个比赛日。</p>
        </li>
        <li class="version-node" data-reveal data-reveal-delay="60">
          <span class="version-tag mono">v4.0 / 2023</span>
          <h3>球队档案与历史交锋补齐</h3>
          <p>档案页加入球衣号码、主客场配色与队史荣誉，历史交锋可以逐场往回看。</p>
        </li>
        <li class="version-node" data-reveal data-reveal-delay="120">
          <span class="version-tag mono">v4.5 / 2024 赛季</span>
          <h3>跑动与进阶指标上线</h3>
          <p>足球逐场记录场均跑动，篮球加入回合数、攻防转换与投篮分布，分析维度更立体。</p>
        </li>
        <li class="version-node version-node--soon" data-reveal data-reveal-delay="180">
          <span class="version-tag mono">v5.0</span>
          <h3>内测进行中</h3>
          <p>移动端提醒与筛选联动继续打磨，已开放给部分长期使用者先行试用。</p>
        </li>
      </ol>

      <div class="access-grid">
        <article class="access-card access-card--web" data-reveal>
          <span class="access-no mono">A</span>
          <h3>网页端</h3>
          <p>打开即用。比分、赛程、球队档案与跑动数据都在同一个入口下，适合在电脑上长时间对照查看。</p>
          <p class="access-fit">适合：办公室、家里连着看几场的深度使用者。</p>
        </article>
        <article class="access-card access-card--app" data-reveal data-reveal-delay="60">
          <span class="access-no mono">B</span>
          <h3>移动端</h3>
          <p>支持按球队或赛事类别订阅比分提醒，名单更新也能收到推送，通勤路上一样跟得住。</p>
          <p class="access-fit">适合：只想盯住一两支球队的球迷与现场工作人员。</p>
        </article>
        <article class="access-card access-card--api" data-reveal data-reveal-delay="120">
          <span class="access-no mono">C</span>
          <h3>数据接口</h3>
          <p>提供比分推送、赛程查询、球队档案与跑动数据四类调用能力，单日峰值处理约 1,800 万次请求。</p>
          <p class="access-fit">适合：需要把数据接进自己产品的应用团队与内容平台。</p>
        </article>
      </div>

      <div class="api-detail" data-reveal>
        <button class="panel-toggle api-detail-toggle" type="button" aria-expanded="false" aria-controls="api-panel-body" data-panel-toggle>
          展开四类接口的调用场景
        </button>
        <div class="panel-body api-detail-body" id="api-panel-body" hidden>
          <div class="api-rows">
            <div class="api-row">
              <span class="api-row-k mono">比分推送</span>
              <p>按赛事类别或指定球队订阅，比分发生变化时收到回调，可用于自己的直播页或聊天室。</p>
            </div>
            <div class="api-row">
              <span class="api-row-k mono">赛程查询</span>
              <p>按轮次、日期或球队拉取对阵与开球时间，赛前 2 小时的最终名单同样可以取到。</p>
            </div>
            <div class="api-row">
              <span class="api-row-k mono">球队档案</span>
              <p>取回球衣号码、主客场配色、队史荣誉与历史交锋，适合做球队页或赛前专题。</p>
            </div>
            <div class="api-row">
              <span class="api-row-k mono">跑动数据</span>
              <p>足球场均跑动与篮球回合数、攻防转换、投篮分布，用于赛后复盘与数据栏目。</p>
            </div>
          </div>
          <p class="api-note">
            接口的合作方式与调用样例，可以在联系我们页面说明您的使用场景后进一步沟通。
            服务网络覆盖 26 个省份，浙江是核心运营区域，省内的业余联赛与高校赛事对接最为密集。
          </p>
        </div>
      </div>

      <figure class="media-frame media-frame--wide ver-figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="数据中心机柜指示灯与冷色调走廊的透视画面" loading="lazy" decoding="async">
        <figcaption class="media-caption">接口与推送服务运行在持续值守的数据环境里</figcaption>
      </figure>
    </div>
  </section>

  <!-- ========== 06 选一个适合你的用法 ========== -->
  <section class="section pro-mod pro-mod--roles" id="roles" aria-labelledby="mod-role-title">
    <div class="container">
      <div class="pro-mod-head" data-reveal>
        <p class="eyebrow">06 / 选一个适合你的用法</p>
        <h2 class="section-title" id="mod-role-title">您是哪一类使用者，就从哪一条开始</h2>
        <p class="pro-mod-lede">
          同一个入口，不同角色用得上的功能并不一样。对照下面四类场景，先挑一条往下走。
        </p>
      </div>

      <div class="role-grid">
        <article class="role-card role-card--fan" data-reveal>
          <span class="role-no mono">01</span>
          <h3>关注赛事的球迷</h3>
          <p>开赛前查当轮全部对阵，比赛日看实时比分，赛后翻进球与跑动数据。移动端订阅提醒之后，就不用一直守着页面。</p>
          <a class="role-link" href="#live-scores">从实时比分看起</a>
        </article>

        <article class="role-card role-card--league" data-reveal data-reveal-delay="60">
          <span class="role-no mono">02</span>
          <h3>业余联赛与高校赛事组织者</h3>
          <p>把你们联赛的对阵、轮次和球队资料放进同一套编排里，报名队和观众都能自己查到赛程。目前已有 36 家业余联赛组委会与 18 家地方体育协会采用类似方式对外发布数据。</p>
          <a class="role-link" href="#schedule">看赛程编排方式</a>
        </article>

        <article class="role-card role-card--media" data-reveal data-reveal-delay="120">
          <span class="role-no mono">03</span>
          <h3>体育自媒体与内容创作者</h3>
          <p>赛前稿需要的对阵、历史交锋和队史荣誉都能直接查到。需要批量出稿的时候，用数据接口按轮次拉取，比分与球衣号码不会写错。</p>
          <a class="role-link" href="#versions">看接口接入方式</a>
        </article>

        <article class="role-card role-card--uni" data-reveal data-reveal-delay="180">
          <span class="role-no mono">04</span>
          <h3>高校球队与教练组</h3>
          <p>用场均跑动与回合数复盘自己的比赛，看清楚哪一节体能掉下来、哪一段节奏被对手带走。12 所高校体育院系已在用这套数据做赛后分析。</p>
          <a class="role-link" href="#advanced">看跑动与进阶数据</a>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== 收尾 ========== -->
  <section class="section pro-cta" aria-labelledby="pro-cta-title">
    <div class="container">
      <div class="cta-box" data-reveal>
        <p class="eyebrow">下一步</p>
        <h2 class="section-title" id="pro-cta-title">先把您关心的那场比赛查出来，再谈长期怎么用</h2>
        <p>
          比分和赛程直接在网页上就能查，不需要注册也不需要安装。需要接口对接、赛事数据长期合作，
          或者想让我们把你们联赛的赛程接进来，都可以先聊清楚场景再定方案。
        </p>
        <div class="cta-actions">
          <a class="btn btn--primary" href="/contact/">联系我们</a>
          <a class="btn btn--ghost" href="/faqs/">先看常见问答</a>
        </div>
        <p class="cta-links">
          延伸阅读：<a href="/trends/">趋势观察</a><span aria-hidden="true"> · </span><a href="/values/">品牌价值</a><span aria-hidden="true"> · </span><a href="/">回到首页</a>
        </p>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pro-gap: 18px;
  --pro-pad: clamp(16px, 3vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-products .pro-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--abyss) 0%, rgba(11, 34, 48, 0.35) 62%, transparent 100%),
    var(--deep);
}

.page-products .pro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(43, 30, 92, 0.55) 0%, transparent 46%);
  clip-path: polygon(0 0, 42% 0, 30% 100%, 0 100%);
  pointer-events: none;
}

.page-products .pro-hero .container {
  position: relative;
  z-index: 1;
}

.page-products .pro-hero .breadcrumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
}

.page-products .pro-hero-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.page-products .pro-hero-copy h1 {
  margin: 14px 0 20px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  transform: skewX(-4deg);
  transform-origin: left bottom;
  color: var(--cold);
  max-width: 20ch;
}

.page-products .pro-hero-lede {
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--silver);
  margin: 0;
}

.page-products .pro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-products .pro-hero-board {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--neon);
  background: rgba(7, 13, 31, 0.72);
  padding: var(--pro-pad);
}

.page-products .board-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-products .board-list {
  margin: 0;
  padding: 0;
}

.page-products .board-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}

.page-products .board-item dt {
  font-size: 0.88rem;
  color: var(--slate);
}

.page-products .board-item dd {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--cold);
  font-variant-numeric: tabular-nums;
}

.page-products .board-note {
  margin: 16px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ember);
}

/* ---------- 模块通用 ---------- */
.page-products .pro-mod {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.page-products .pro-mod-copy h2,
.page-products .pro-mod-head h2 {
  margin: 12px 0 16px;
  max-width: 26ch;
}

.page-products .pro-mod-lede {
  max-width: 48ch;
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .pro-mod-tail {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--neon);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .pro-mod-grid {
  align-items: start;
  row-gap: clamp(26px, 4vw, 40px);
}

.page-products .pro-mod-head {
  margin-bottom: clamp(26px, 4vw, 40px);
}

.page-products .pro-mod-head .pro-mod-lede {
  margin-bottom: 0;
}

/* ---------- 01 实时比分 ---------- */
.page-products .pro-mod--live {
  background: linear-gradient(200deg, rgba(43, 30, 92, 0.28) 0%, transparent 55%);
}

.page-products .pulse-track {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(7, 13, 31, 0.6);
}

.page-products .pulse-cap {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .pulse-cells {
  display: flex;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 120px;
}

.page-products .pulse-cells span {
  flex: 1 1 0;
  height: 6px;
  background: rgba(198, 206, 220, 0.18);
}

.page-products .pulse-cells span.is-live {
  background: var(--neon);
}

.page-products .spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .spec-list li {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--deep);
}

.page-products .spec-k {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

.page-products .spec-v {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .pro-mod-aside {
  display: grid;
  gap: var(--pro-gap);
}

.page-products .pro-mod-aside .media-frame {
  margin: 0;
}

.page-products .mini-strip {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--neon);
  background: rgba(11, 34, 48, 0.7);
  padding: 14px 16px;
}

.page-products .mini-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.page-products .mini-strip-meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-products .mini-score {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
}

.page-products .mini-team {
  font-size: 0.84rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-products .mini-team--right {
  text-align: right;
}

.page-products .mini-num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cold);
  font-variant-numeric: tabular-nums;
}

.page-products .mini-sep {
  font-size: 1.2rem;
  color: var(--ember);
}

.page-products .mini-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ember);
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

/* ---------- 02 赛程 ---------- */
.page-products .pro-mod--schedule {
  background: linear-gradient(160deg, rgba(11, 34, 48, 0.9) 0%, transparent 60%);
}

.page-products .pro-mod-grid--flip {
  direction: ltr;
}

.page-products .filter-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .filter-cell {
  padding: 15px 16px;
  background: var(--deep);
}

.page-products .filter-cell p {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .filter-k {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  border-bottom: 1px solid var(--neon-soft);
  padding-bottom: 4px;
}

.page-products .inline-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  background: rgba(7, 13, 31, 0.65);
}

.page-products .inline-fact-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neon);
  white-space: nowrap;
}

.page-products .inline-fact-text {
  flex: 1 1 200px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

/* ---------- 03 档案 ---------- */
.page-products .pro-mod--archive {
  background: linear-gradient(20deg, rgba(43, 30, 92, 0.22) 0%, transparent 50%);
}

.page-products .archive-fields {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .archive-fields > div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .archive-fields dt {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--lime);
}

.page-products .archive-fields dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--silver);
}

.page-products .pro-mod--archive .media-frame {
  margin: 0;
}

/* ---------- 04 跑动与进阶 ---------- */
.page-products .adv-band {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-strong);
  background: rgba(7, 13, 31, 0.78);
  overflow: hidden;
}

.page-products .adv-band-copy {
  padding: clamp(20px, 3vw, 32px);
}

.page-products .adv-band-copy .pro-mod-lede {
  margin-bottom: 0;
}

.page-products .adv-band-visual {
  border-top: 1px solid var(--line);
  padding: 8px 0 0;
  background: linear-gradient(180deg, rgba(57, 255, 139, 0.06), transparent 70%);
}

.page-products .adv-band-visual svg {
  display: block;
  width: 100%;
  height: 140px;
}

.page-products .adv-metrics {
  display: grid;
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .adv-metric {
  padding: 18px 16px;
  background: var(--deep);
  border-left: 2px solid transparent;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.page-products .adv-metric:hover {
  border-left-color: var(--neon);
  background: rgba(57, 255, 139, 0.045);
}

.page-products .adv-metric-k {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}

.page-products .adv-metric-v {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cold);
}

.page-products .adv-metric-d {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--slate);
}

.page-products .adv-figure {
  margin: 26px 0 0;
}

/* ---------- 05 版本与接入 ---------- */
.page-products .pro-mod--versions {
  background: linear-gradient(210deg, rgba(110, 27, 51, 0.2) 0%, transparent 48%);
}

.page-products .version-track {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line-strong);
}

.page-products .version-node {
  position: relative;
  padding: 0 0 26px 22px;
}

.page-products .version-node::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--neon);
}

.page-products .version-node--soon::before {
  background: var(--ember);
}

.page-products .version-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
  border: 1px solid var(--neon-soft);
  padding: 3px 8px;
}

.page-products .version-node--soon .version-tag {
  color: var(--ember);
  border-color: rgba(255, 90, 54, 0.34);
}

.page-products .version-node h3 {
  margin: 10px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .version-node p {
  margin: 0;
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--slate);
}

.page-products .access-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .access-card {
  padding: 20px 18px;
  background: var(--deep);
  border-top: 2px solid var(--silver);
  transition: border-color 180ms ease, transform 180ms ease;
}

.page-products .access-card:hover {
  border-top-color: var(--neon);
  transform: translateY(-2px);
}

.page-products .access-card--app {
  border-top-color: var(--indigo);
}

.page-products .access-card--api {
  border-top-color: var(--ember);
}

.page-products .access-card h3 {
  margin: 12px 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .access-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--silver);
}

.page-products .access-fit {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem !important;
  color: var(--slate) !important;
}

.page-products .access-no {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-products .api-detail {
  margin-top: 22px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 34, 48, 0.55);
}

.page-products .api-detail-toggle {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--neon);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.page-products .api-detail-toggle:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.page-products .api-detail-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}

.page-products .api-rows {
  display: grid;
  gap: 1px;
  background: var(--line);
  margin: 16px 0;
}

.page-products .api-row {
  padding: 14px 16px;
  background: var(--deep);
}

.page-products .api-row-k {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}

.page-products .api-row p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--silver);
}

.page-products .api-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .ver-figure {
  margin: 26px 0 0;
}

/* ---------- 06 角色 ---------- */
.page-products .role-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .role-card {
  position: relative;
  padding: 22px 18px;
  background: var(--deep);
  display: grid;
  align-content: start;
  gap: 10px;
  transition: background-color 180ms ease;
}

.page-products .role-card:hover {
  background: rgba(57, 255, 139, 0.05);
}

.page-products .role-card--league,
.page-products .role-card--media {
  background: rgba(11, 34, 48, 0.75);
}

.page-products .role-no {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--neon);
}

.page-products .role-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cold);
}

.page-products .role-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--silver);
}

.page-products .role-link {
  align-self: end;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  width: fit-content;
}

.page-products .role-link:hover,
.page-products .role-link:focus-visible {
  color: var(--lime);
}

/* ---------- 收尾 ---------- */
.page-products .pro-cta {
  background:
    linear-gradient(140deg, rgba(43, 30, 92, 0.35) 0%, transparent 52%),
    var(--abyss);
  border-bottom: none;
}

.page-products .cta-box {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--neon);
  padding: clamp(24px, 4vw, 44px);
  background: rgba(7, 13, 31, 0.7);
}

.page-products .cta-box h2 {
  margin: 12px 0 16px;
  max-width: 24ch;
}

.page-products .cta-box > p {
  margin: 0;
  max-width: 56ch;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .cta-links {
  margin-top: 20px !important;
  font-size: 0.84rem !important;
  color: var(--slate) !important;
}

.page-products .cta-links a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.page-products .cta-links a:hover,
.page-products .cta-links a:focus-visible {
  color: var(--neon);
  border-bottom-color: var(--neon);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-products .pro-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .page-products .spec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .adv-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .adv-band-visual svg {
    height: 170px;
  }
}

@media (min-width: 1024px) {
  .page-products .pro-mod-grid--flip .pro-mod-aside {
    order: -1;
  }

  .page-products .adv-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: stretch;
  }

  .page-products .adv-band-visual {
    border-top: 0;
    border-left: 1px solid var(--line);
    display: flex;
    align-items: center;
  }

  .page-products .adv-band-visual svg {
    height: 200px;
  }

  .page-products .adv-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-products .role-card--fan {
    grid-column: span 5;
  }

  .page-products .role-card--league {
    grid-column: span 7;
  }

  .page-products .role-card--media {
    grid-column: span 7;
  }

  .page-products .role-card--uni {
    grid-column: span 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .access-card:hover {
    transform: none;
  }
}