.page-products {
  --bs-hair: rgba(30, 42, 68, 0.9);
  --bs-hair-soft: rgba(30, 42, 68, 0.6);
  --bs-pad: clamp(54px, 8vw, 108px);
  --bs-space: clamp(22px, 3vw, 44px);
  --bs-text: rgba(232, 238, 247, 0.8);
  position: relative;
  background: var(--c-void);
  color: var(--c-mist);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products .bs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fog);
}

.page-products .bs-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--c-nebula);
}

.page-products .bs-head {
  max-width: 68ch;
  margin-bottom: clamp(26px, 4vw, 50px);
}

.page-products .bs-head h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.9vw, 33px);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--c-mist);
}

.page-products .bs-head p {
  margin: 0;
  max-width: 42em;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-text {
  max-width: 38em;
  margin: 0 0 var(--bs-space);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-text--tight {
  margin-bottom: 0;
}

.page-products .bs-inline-link {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 255, 0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .bs-inline-link:hover {
  color: var(--c-lime);
  border-color: var(--c-lime);
}

/* ---------- 首屏 ---------- */
.page-products .bs-hero {
  position: relative;
  padding: clamp(104px, 17vw, 186px) 0 clamp(46px, 7vw, 86px);
  overflow: hidden;
}

.page-products .bs-hero::before {
  content: "";
  position: absolute;
  top: 46%;
  left: -20%;
  width: 150%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-violet-gray) 24%, var(--c-cyan) 56%, transparent 92%);
  transform: rotate(-12deg);
  opacity: 0.5;
  pointer-events: none;
}

.page-products .bs-hero__crumb {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(22px, 4vw, 44px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-fog);
}

.page-products .bs-hero__crumb a {
  color: var(--c-fog);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-products .bs-hero__crumb a:hover {
  color: var(--c-cyan);
}

.page-products .bs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
}

@media (min-width: 900px) {
  .page-products .bs-hero__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: end;
  }
}

.page-products .bs-hero h1 {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 5.4vw, 54px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--c-mist);
}

.page-products .bs-hero__lede {
  margin: 0 0 clamp(22px, 3vw, 34px);
  max-width: 36em;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .bs-hero__stats {
  display: grid;
  gap: 1px;
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
}

.page-products .bs-hero__stat {
  background: var(--c-panel);
  padding: 15px 18px;
}

.page-products .bs-hero__stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-lime);
}

.page-products .bs-hero__stat span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-fog);
}

/* ---------- 区块基础 ---------- */
.page-products .bs-section {
  position: relative;
  padding: var(--bs-pad) 0;
  border-top: 1px solid var(--bs-hair);
}

/* ---------- 业务全景 ---------- */
.page-products .bs-overview {
  overflow: hidden;
}

.page-products .bs-overview__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-products .bs-overview__veil img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.page-products .bs-overview__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(124, 77, 255, 0.24), transparent 62%),
    linear-gradient(180deg, var(--c-void) 0%, rgba(5, 7, 15, 0.74) 46%, var(--c-void) 100%);
}

.page-products .bs-overview__inner {
  position: relative;
  z-index: 1;
}

.page-products .bs-tabs {
  position: relative;
}

.page-products .bs-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.page-products .bs-tabs__bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
  border-bottom: 0;
}

@media (min-width: 760px) {
  .page-products .bs-tabs__bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .bs-tabs__tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 18px;
  background: var(--c-panel);
  color: var(--c-mist);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .bs-tabs__tab:hover {
  color: var(--c-cyan);
}

.page-products .bs-tabs__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-fog);
}

.page-products #bs-biz-zone:checked ~ .bs-tabs__bar label[for="bs-biz-zone"],
.page-products #bs-biz-h2h:checked ~ .bs-tabs__bar label[for="bs-biz-h2h"],
.page-products #bs-biz-run:checked ~ .bs-tabs__bar label[for="bs-biz-run"] {
  background: var(--c-void);
  color: var(--c-cyan);
  box-shadow: inset 0 -2px 0 var(--c-cyan);
}

.page-products .bs-tabs__panels {
  border: 1px solid var(--bs-hair);
  background: var(--c-panel);
}

.page-products .bs-tabs__panel {
  display: none;
  padding: clamp(22px, 3vw, 36px);
}

.page-products #bs-biz-zone:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(1),
.page-products #bs-biz-h2h:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(2),
.page-products #bs-biz-run:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(3) {
  display: block;
  animation: bs-fade 180ms var(--ease) both;
}

@keyframes bs-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-products .bs-tabs__panel p {
  margin: 0 0 16px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-tabs__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .bs-tabs__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-fog);
}

.page-products .bs-tabs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--c-nebula);
}

.page-products .bs-tabs__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(34, 224, 255, 0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .bs-tabs__link:hover {
  color: var(--c-lime);
  border-color: var(--c-lime);
}

/* ---------- 赛区分布 ---------- */
.page-products .bs-zones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-zones__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(28px, 4vw, 56px);
  }
}

.page-products .bs-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-rail__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bs-hair);
  font-size: 14px;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.page-products .bs-rail__item:hover {
  color: var(--c-cyan);
  padding-left: 6px;
}

.page-products .bs-rail__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-nebula);
}

.page-products .bs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-bottom: var(--bs-space);
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
}

.page-products .bs-metric {
  background: var(--c-panel);
  padding: 16px 18px;
}

.page-products .bs-metric strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-lime);
}

.page-products .bs-metric span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--c-fog);
}

.page-products .bs-figure {
  margin: 0;
  border: 1px solid var(--bs-hair);
  background: var(--c-panel);
  overflow: hidden;
}

.page-products .bs-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .bs-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--bs-hair);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--c-fog);
}

/* ---------- 交锋档案 ---------- */
.page-products .bs-h2h__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-h2h__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-fields {
  margin: 0 0 var(--bs-space);
  padding: 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-fields__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--bs-hair);
  transition: background var(--dur) var(--ease);
}

@media (min-width: 620px) {
  .page-products .bs-fields__row {
    grid-template-columns: minmax(0, 122px) minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-products .bs-fields__row:hover {
  background: var(--c-panel);
}

.page-products .bs-fields dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease);
}

.page-products .bs-fields__row:hover dt {
  color: var(--c-cyan);
}

.page-products .bs-fields dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-fog);
}

/* ---------- 跑动数据看板 ---------- */
.page-products .bs-running__banner {
  margin: 0 0 var(--bs-space);
  border: 1px solid var(--bs-hair);
  overflow: hidden;
}

.page-products .bs-running__banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.page-products .bs-running__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-running__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .bs-bar {
  display: grid;
  gap: 7px;
}

.page-products .bs-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.page-products .bs-bar__name {
  font-size: 14px;
  color: var(--c-mist);
}

.page-products .bs-bar__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-fog);
}

.page-products .bs-bar__track {
  display: block;
  height: 6px;
  background: rgba(30, 42, 68, 0.8);
  overflow: hidden;
}

.page-products .bs-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-nebula), var(--c-cyan));
  transition: background var(--dur) var(--ease);
}

.page-products .bs-bar:hover .bs-bar__fill {
  background: linear-gradient(90deg, var(--c-cyan), var(--c-lime));
}

/* ---------- 版本演进 ---------- */
.page-products .bs-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-products .bs-track__node {
  position: relative;
  padding: 18px 0 18px 24px;
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-track__node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-void);
  border: 1px solid var(--c-nebula);
}

.page-products .bs-track__node--now::before {
  background: var(--c-lime);
  border-color: var(--c-lime);
}

.page-products .bs-track__ver {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-nebula);
}

.page-products .bs-track__node--now .bs-track__ver {
  color: var(--c-lime);
}

.page-products .bs-track__title {
  margin: 7px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
}

.page-products .bs-track__text {
  margin: 0;
  max-width: 34em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-fog);
}

@media (min-width: 840px) {
  .page-products .bs-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .bs-track::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--c-nebula), var(--c-violet-gray) 58%, var(--c-cyan));
  }

  .page-products .bs-track__node {
    padding: 34px 22px 0 0;
    border-bottom: 0;
  }

  .page-products .bs-track__node::before {
    top: 4px;
    left: 0;
    width: 11px;
    height: 11px;
  }

  .page-products .bs-track__node--now::before {
    box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.16);
  }
}

/* ---------- 适用场景 ---------- */
.page-products .bs-scenes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-scenes__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-scene {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-scene:last-child {
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-scene h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease);
}

.page-products .bs-scene h3 span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-nebula);
}

.page-products .bs-scene p {
  margin: 0;
  max-width: 44em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-fog);
}

.page-products .bs-scene:hover h3 {
  color: var(--c-cyan);
}

.page-products .bs-figure--scene {
  margin-top: 4px;
}

/* ---------- 使用流程 ---------- */
.page-products .bs-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-products .bs-flow__step {
  padding: 20px 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-flow__step:last-child {
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-flow__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
}

.page-products .bs-flow__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
}

.page-products .bs-flow__text {
  margin: 0;
  max-width: 30em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-fog);
}

@media (min-width: 900px) {
  .page-products .bs-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-products .bs-flow__step {
    padding: 24px 22px 0 0;
    border-bottom: 0;
  }

  .page-products .bs-flow__step:last-child {
    border-bottom: 0;
  }
}

/* ---------- 结尾 ---------- */
.page-products .bs-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-cta__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: clamp(28px, 4vw, 56px);
  }
}

.page-products .bs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 900px) {
  .page-products .bs-cta__actions {
    justify-content: flex-end;
  }
}


<main id="main-content" class="page-products">

  <section class="bs-hero">
    <div class="shell">
      <nav class="breadcrumb bs-hero__crumb" aria-label="面包屑">
        <a href="/">首页</a>
        <span class="breadcrumb__sep" aria-hidden="true">/</span>
        <span aria-current="page">业务中心</span>
      </nav>
      <div class="bs-hero__inner">
        <div class="bs-hero__lead">
          <p class="bs-kicker">SEC-00 · 业务中心</p>
          <h1>赛区怎么分布、两队交手过几次、一场跑出多少米，都能在这里查到</h1>
          <p class="bs-hero__lede">星空体育自 2016 年起整理内地联赛的赛区结构与赛事数据。您可以在浏览器里按联赛逐级查看赛区分布，调阅两支球队的历史交锋战绩，也能按轮次对照单场跑动记录，用来备赛、写稿或者复盘。</p>
          <div class="bs-hero__actions">
            <a class="btn btn--primary" href="#flow">从哪一步开始</a>
            <a class="btn btn--ghost" href="/help/">先去帮助中心</a>
          </div>
        </div>
        <div class="bs-hero__stats">
          <div class="bs-hero__stat"><b>31</b><span>省级行政区赛区</span></div>
          <div class="bs-hero__stat"><b>187</b><span>城市赛区节点</span></div>
          <div class="bs-hero__stat"><b>4,860</b><span>场历史对阵记录</span></div>
        </div>
      </div>
    </div>
  </section>

  <section class="bs-section bs-overview" id="overview">
    <div class="bs-overview__veil" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="俯视的球场与数据坐标网格相互叠合" loading="lazy" decoding="async">
    </div>
    <div class="shell bs-overview__inner">
      <div class="bs-head">
        <p class="bs-kicker">SEC-01 · 业务全景</p>
        <h2 class="section-title">想知道赛区在哪、交手战绩如何、跑动跑成什么样</h2>
        <p>三种问题，对应三块内容。它们各自解决一件事，也能串起来用：先确认赛区范围，再翻对手的交锋记录，最后用跑动数据判断体能节奏。您可以从最急的一块入手，也可以按顺序读下来。</p>
      </div>

      <div class="bs-tabs">
        <input class="bs-tabs__radio" type="radio" name="bs-biz" id="bs-biz-zone" checked>
        <input class="bs-tabs__radio" type="radio" name="bs-biz" id="bs-biz-h2h">
        <input class="bs-tabs__radio" type="radio" name="bs-biz" id="bs-biz-run">

        <div class="bs-tabs__bar">
          <label class="bs-tabs__tab" for="bs-biz-zone"><span class="bs-tabs__idx">01</span>赛区分布</label>
          <label class="bs-tabs__tab" for="bs-biz-h2h"><span class="bs-tabs__idx">02</span>交锋档案</label>
          <label class="bs-tabs__tab" for="bs-biz-run"><span class="bs-tabs__idx">03</span>跑动数据看板</label>
        </div>

        <div class="bs-tabs__panels">
          <div class="bs-tabs__panel">
            <p>想知道某个省里有哪些城市赛区、六类联赛各自覆盖到哪一层，从赛区分布入手最快。</p>
            <ul class="bs-tabs__list">
              <li>按顶级职业、次级职业、青年、女子、城市、校园六类联赛归类</li>
              <li>覆盖 31 个省级行政区、187 个城市赛区节点</li>
              <li>大区 → 联赛 → 城市 三级向下查看，一路落到具体赛区</li>
            </ul>
            <a class="bs-tabs__link" href="#zones">展开赛区分布体系 →</a>
          </div>

          <div class="bs-tabs__panel">
            <p>要判断两支球队碰面时通常踢成什么样，零散战报不够用，得把历年对阵摆在一起看。</p>
            <ul class="bs-tabs__list">
              <li>收录 4,860 场对阵记录，最早回溯到 2009 赛季</li>
              <li>赛后 2 小时内归档，比分、进球时间与首发名单同一条记录呈现</li>
              <li>按球队、赛季或赛区缩小范围，逐场往下翻</li>
            </ul>
            <a class="bs-tabs__link" href="#h2h">展开交锋档案 →</a>
          </div>

          <div class="bs-tabs__panel">
            <p>球队体能和比赛节奏的变化，藏在每一场的跑动记录里，看清了就能预判下半场的走势。</p>
            <ul class="bs-tabs__list">
              <li>已更新至 2024 赛季第 18 轮，覆盖内地六类联赛赛场</li>
              <li>每场按 22 名出场球员统计四项指标</li>
              <li>赛区分布与跑动榜每轮赛后 6 小时内刷新</li>
            </ul>
            <a class="bs-tabs__link" href="#running">展开跑动数据看板 →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="bs-section bs-zones" id="zones">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-02 · 赛区分布</p>
        <h2 class="section-title">六类联赛各归各位，从大区一路看到城市赛区</h2>
        <p>同一座城市可能既承接职业梯队比赛，又承办校园联赛。把联赛类型分清楚，赛程与场地的对应关系才不容易搞错。</p>
      </div>

      <div class="bs-zones__grid">
        <div class="bs-zones__rail">
          <ol class="bs-rail">
            <li class="bs-rail__item"><span class="bs-rail__idx">L1</span><span>顶级职业联赛</span></li>
            <li class="bs-rail__item"><span class="bs-rail__idx">L2</span><span>次级职业联赛</span></li>
            <li class="bs-rail__item"><span class="bs-rail__idx">L3</span><span>青年联赛</span></li>
            <li class="bs-rail__item"><span class="bs-rail__idx">L4</span><span>女子联赛</span></li>
            <li class="bs-rail__item"><span class="bs-rail__idx">L5</span><span>城市联赛</span></li>
            <li class="bs-rail__item"><span class="bs-rail__idx">L6</span><span>校园联赛</span></li>
          </ol>
        </div>

        <div class="bs-zones__body">
          <div class="bs-metrics">
            <div class="bs-metric"><strong>6</strong><span>类联赛分别归类</span></div>
            <div class="bs-metric"><strong>31</strong><span>省级行政区覆盖</span></div>
            <div class="bs-metric"><strong>34</strong><span>西南地区城市节点</span></div>
          </div>
          <p class="bs-text">赛区分布可以正着看，也可以倒着看。正着走，先选联赛类型，再从省级行政区进入、沿着联赛层落到具体城市；倒着走，直接点开一座城市的赛区节点，回看它这一年承接了哪几类比赛、哪些球队把主场放在这里。城市联赛与校园联赛的节点变动更勤，每轮赛后会跟着赛程一起更新。</p>
          <figure class="bs-figure">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="城市地图上分布着分层显示的赛区节点标记" loading="lazy" decoding="async">
            <figcaption>赛区节点按大区分层展开，城市层继续细分到具体赛区</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="bs-section bs-h2h" id="h2h">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-03 · 交锋档案</p>
        <h2 class="section-title">两支球队碰过几次，逐场往下翻就有答案</h2>
        <p>零散的战报和集锦拼不出交手脉络。把同一对球队的记录排在一起，规律自己会浮出来。</p>
      </div>

      <div class="bs-h2h__grid">
        <figure class="bs-figure">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="摊开的赛程册与对阵记录表格特写" loading="lazy" decoding="async">
          <figcaption>每场对阵以一条记录归档，球队、赛季与赛区三个维度都能反查</figcaption>
        </figure>

        <div class="bs-h2h__body">
          <p class="bs-text">星空CN梳理历史交锋战绩时，会把比分、进球时间与首发名单写进同一条记录，最早的场次可以回溯到 2009 赛季，目前共收录 4,860 场。每场比赛结束后 2 小时内完成归档，不用等第二天的战报汇总，当晚就能查到这场交手的完整面貌。</p>

          <dl class="bs-fields">
            <div class="bs-fields__row"><dt>比赛时间</dt><dd>比赛日与开球时间，按赛季顺序排列，方便看出两队碰面的间隔</dd></div>
            <div class="bs-fields__row"><dt>比分</dt><dd>终场结果，加时与点球决胜分别标出</dd></div>
            <div class="bs-fields__row"><dt>进球时间</dt><dd>每个进球的分钟数，用来还原比赛是在哪一段被打开的</dd></div>
            <div class="bs-fields__row"><dt>首发名单</dt><dd>双方首发与换人记录，判断当时是哪套阵容打这场球</dd></div>
            <div class="bs-fields__row"><dt>所属赛区</dt><dd>对阵归属的联赛类型与城市赛区，跨赛区的交手同样标清</dd></div>
          </dl>

          <p class="bs-text bs-text--tight">想按自己的习惯缩小范围，可以到 <a class="bs-inline-link" href="/help/">帮助中心</a> 看按球队、赛季、赛区三种筛选方式的操作步骤。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="bs-section bs-running" id="running">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-04 · 跑动数据看板</p>
        <h2 class="section-title">一场球跑了多少、冲了几次，拆成四项慢慢看</h2>
        <p>体能不是一句“跑得凶”。拆开看才知道力气花在哪里、下半场还剩多少余量。</p>
      </div>

      <figure class="bs-running__banner">
        <img src="{zhanqunpic:h:800w:1600}" width="1600" height="800" alt="球场俯视图上叠加抽象跑动轨迹线条" loading="lazy" decoding="async">
      </figure>

      <div class="bs-running__grid">
        <div class="bs-running__body">
          <p class="bs-text">内地场均跑动数据按单场 22 名出场球员统计，目前已经更新到 2024 赛季第 18 轮，覆盖内地六类联赛赛场。先看总量判断球队这场比赛的整体投入，再落到冲刺次数与高强度跑动距离，最后对照阵型区间分布，判断体能是压在对方半场还是消耗在回追上。赛区分布与跑动榜在每轮比赛结束后 6 小时内一并刷新。</p>
        </div>

        <ul class="bs-bars">
          <li class="bs-bar">
            <span class="bs-bar__top"><span class="bs-bar__name">总跑动距离</span><span class="bs-bar__meta">全场 · 22 人</span></span>
            <span class="bs-bar__track"><span class="bs-bar__fill"></span></span>
          </li>
          <li class="bs-bar">
            <span class="bs-bar__top"><span class="bs-bar__name">冲刺次数</span><span class="bs-bar__meta">全场 · 22 人</span></span>
            <span class="bs-bar__track"><span class="bs-bar__fill"></span></span>
          </li>
          <li class="bs-bar">
            <span class="bs-bar__top"><span class="bs-bar__name">高强度跑动距离</span><span class="bs-bar__meta">全场 · 22 人</span></span>
            <span class="bs-bar__track"><span class="bs-bar__fill"></span></span>
          </li>
          <li class="bs-bar">
            <span class="bs-bar__top"><span class="bs-bar__name">阵型区间分布</span><span class="bs-bar__meta">全场 · 22 人</span></span>
            <span class="bs-bar__track"><span class="bs-bar__fill"></span></span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="bs-section bs-versions" id="versions">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-05 · 版本能力演进</p>
        <h2 class="section-title">能力是一版一版加上来的</h2>
        <p>四版迭代下来，从只能看赛区，到现在换设备也能接着看同一场比赛。</p>
      </div>

      <ol class="bs-track">
        <li class="bs-track__node">
          <span class="bs-track__ver">V1</span>
          <h3 class="bs-track__title">赛区分布页</h3>
          <p class="bs-track__text">把六类联赛的赛区节点整理成可以逐级展开的页面结构，联赛与城市的对应关系第一次集中呈现。</p>
        </li>
        <li class="bs-track__node">
          <span class="bs-track__ver">V2</span>
          <h3 class="bs-track__title">交锋档案</h3>
          <p class="bs-track__text">加入逐场对阵记录，可按球队、赛季、赛区检索，赛季纵深向前推到 2009 年。</p>
        </li>
        <li class="bs-track__node">
          <span class="bs-track__ver">V3</span>
          <h3 class="bs-track__title">跑动数据看板</h3>
          <p class="bs-track__text">每场 22 名出场球员的跑动被拆成四项指标，教练可以先看全场总量，再落到阵型区间。</p>
        </li>
        <li class="bs-track__node bs-track__node--now">
          <span class="bs-track__ver">V4 · 当前</span>
          <h3 class="bs-track__title">跨屏同构结构</h3>
          <p class="bs-track__text">换设备登录后栏目与筛选位置一起回来，手机上看赛区、电脑上写稿，不用重新找入口。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="bs-section bs-scenes" id="scenes">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-06 · 适用场景</p>
        <h2 class="section-title">不同角色取用同一份资料，拿走的结论并不一样</h2>
        <p>教练、记者、球迷和赛区运营关心的东西相差很远。下面四种用法，可以帮着对照自己的需求。</p>
      </div>

      <div class="bs-scenes__grid">
        <div class="bs-scenes__list">
          <div class="bs-scene">
            <h3><span>S-01</span>教练备赛</h3>
            <p>先把对手近几轮的交锋记录调出来，再看跑动四项指标，判断对方的体能是集中在开局还是留到下半场，据此安排轮换节奏和针对性逼抢。</p>
          </div>
          <div class="bs-scene">
            <h3><span>S-02</span>媒体写稿</h3>
            <p>写赛前前瞻时直接从交锋档案取比分、进球时间与首发名单，历史对照有出处，不用在多个来源之间反复比对。</p>
          </div>
          <div class="bs-scene">
            <h3><span>S-03</span>球迷复盘</h3>
            <p>按赛区找同城对决，再翻两队历年交手，看完球和朋友聊起来的时候，手上有一整条时间线可以对着说。</p>
          </div>
          <div class="bs-scene">
            <h3><span>S-04</span>赛区运营排期</h3>
            <p>城南起步区共有 6 个城市联赛节点并实行场地轮换，对照节点分布与赛程安排，能提前判断哪几周场地压力最集中。</p>
          </div>
        </div>

        <figure class="bs-figure bs-figure--scene">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="低角度仰拍的场边场景，人物手持平板查看数据" loading="lazy" decoding="async">
          <figcaption>场边看数据，教练最常查的是对手近期交锋与跑动分布</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="bs-section bs-flow-section" id="flow">
    <div class="shell">
      <div class="bs-head">
        <p class="bs-kicker">SEC-07 · 使用流程与更新节奏</p>
        <h2 class="section-title">从挑联赛到收下季度简报，一共五步</h2>
        <p>第一次用的时候按顺序走一遍，之后基本就固定在自己常用的那一两块数据上。</p>
      </div>

      <ol class="bs-flow">
        <li class="bs-flow__step">
          <span class="bs-flow__num">STEP 01</span>
          <h3 class="bs-flow__title">选定联赛</h3>
          <p class="bs-flow__text">从六类联赛里挑出您关心的那一类，进入对应的赛区层。</p>
        </li>
        <li class="bs-flow__step">
          <span class="bs-flow__num">STEP 02</span>
          <h3 class="bs-flow__title">缩小范围</h3>
          <p class="bs-flow__text">按球队、赛季或赛区收窄条件，对照这条记录里要看的字段。</p>
        </li>
        <li class="bs-flow__step">
          <span class="bs-flow__num">STEP 03</span>
          <h3 class="bs-flow__title">存下常用视图</h3>
          <p class="bs-flow__text">注册后可保存赛区订阅、交锋对比与跑动榜单三组自定义视图，下次直接打开。</p>
        </li>
        <li class="bs-flow__step">
          <span class="bs-flow__num">STEP 04</span>
          <h3 class="bs-flow__title">跟上轮次</h3>
          <p class="bs-flow__text">赛区分布与跑动榜每轮赛后 6 小时内刷新，交锋记录赛后 2 小时归档。</p>
        </li>
        <li class="bs-flow__step">
          <span class="bs-flow__num">STEP 05</span>
          <h3 class="bs-flow__title">收下季度与年度资料</h3>
          <p class="bs-flow__text">每赛季发布《跑动趋势季度简报》与《赛区分布年报》，适合作为长期对照的底稿。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="bs-section bs-cta" id="start">
    <div class="shell bs-cta__inner">
      <div class="bs-cta__text">
        <p class="bs-kicker">SEC-08 · 开始使用</p>
        <h2 class="section-title">先挑一块用起来，剩下的顺着入口就能找到</h2>
        <p class="bs-text bs-text--tight">不确定从哪一步开始，可以先去 <a class="bs-inline-link" href="/help/">帮助中心</a> 看按场景写的操作说明；想了解近期赛区变化与跑动走势，<a class="bs-inline-link" href="/information/">资讯与数据</a> 里有固定更新的解读。需要洽谈赛区数据合作，直接走 <a class="bs-inline-link" href="/feedback/">联系与反馈</a>。我们与 26 家地方体育机构、14 家青训中心、8 家校园联赛组委会保持内容合作，也欢迎新的赛区加入。</p>
      </div>
      <div class="bs-cta__actions">
        <a class="btn btn--primary" href="/help/">查看操作说明</a>
        <a class="btn btn--ghost" href="/business/">回到业务中心</a>
      </div>
    </div>
  </section>

</main>

.page-products {
  --bs-hair: rgba(30, 42, 68, 0.9);
  --bs-pad: clamp(54px, 8vw, 108px);
  --bs-space: clamp(22px, 3vw, 44px);
  --bs-text: rgba(232, 238, 247, 0.8);
  position: relative;
  background: var(--c-void);
  color: var(--c-mist);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products .bs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-fog);
}

.page-products .bs-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--c-nebula);
}

.page-products .bs-head {
  max-width: 68ch;
  margin-bottom: clamp(26px, 4vw, 50px);
}

.page-products .bs-head h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.9vw, 33px);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--c-mist);
}

.page-products .bs-head p {
  margin: 0;
  max-width: 42em;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-text {
  max-width: 38em;
  margin: 0 0 var(--bs-space);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-text--tight {
  margin-bottom: 0;
}

.page-products .bs-inline-link {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 255, 0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .bs-inline-link:hover {
  color: var(--c-lime);
  border-color: var(--c-lime);
}

/* ---------- 首屏 ---------- */
.page-products .bs-hero {
  position: relative;
  padding: clamp(104px, 17vw, 186px) 0 clamp(46px, 7vw, 86px);
  overflow: hidden;
}

.page-products .bs-hero::before {
  content: "";
  position: absolute;
  top: 46%;
  left: -20%;
  width: 150%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-violet-gray) 24%, var(--c-cyan) 56%, transparent 92%);
  transform: rotate(-12deg);
  opacity: 0.5;
  pointer-events: none;
}

.page-products .bs-hero__crumb {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(22px, 4vw, 44px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-fog);
}

.page-products .bs-hero__crumb a {
  color: var(--c-fog);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-products .bs-hero__crumb a:hover {
  color: var(--c-cyan);
}

.page-products .bs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
}

@media (min-width: 900px) {
  .page-products .bs-hero__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: end;
  }
}

.page-products .bs-hero h1 {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 5.4vw, 54px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--c-mist);
}

.page-products .bs-hero__lede {
  margin: 0 0 clamp(22px, 3vw, 34px);
  max-width: 36em;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .bs-hero__stats {
  display: grid;
  gap: 1px;
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
}

.page-products .bs-hero__stat {
  background: var(--c-panel);
  padding: 15px 18px;
}

.page-products .bs-hero__stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-lime);
}

.page-products .bs-hero__stat span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--c-fog);
}

/* ---------- 区块基础 ---------- */
.page-products .bs-section {
  position: relative;
  padding: var(--bs-pad) 0;
  border-top: 1px solid var(--bs-hair);
}

/* ---------- 业务全景 ---------- */
.page-products .bs-overview {
  overflow: hidden;
}

.page-products .bs-overview__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-products .bs-overview__veil img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.page-products .bs-overview__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(124, 77, 255, 0.24), transparent 62%),
    linear-gradient(180deg, var(--c-void) 0%, rgba(5, 7, 15, 0.74) 46%, var(--c-void) 100%);
}

.page-products .bs-overview__inner {
  position: relative;
  z-index: 1;
}

.page-products .bs-tabs {
  position: relative;
}

.page-products .bs-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.page-products .bs-tabs__bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
  border-bottom: 0;
}

@media (min-width: 760px) {
  .page-products .bs-tabs__bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-products .bs-tabs__tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 18px;
  background: var(--c-panel);
  color: var(--c-mist);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-products .bs-tabs__tab:hover {
  color: var(--c-cyan);
}

.page-products .bs-tabs__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-fog);
}

.page-products #bs-biz-zone:checked ~ .bs-tabs__bar label[for="bs-biz-zone"],
.page-products #bs-biz-h2h:checked ~ .bs-tabs__bar label[for="bs-biz-h2h"],
.page-products #bs-biz-run:checked ~ .bs-tabs__bar label[for="bs-biz-run"] {
  background: var(--c-void);
  color: var(--c-cyan);
  box-shadow: inset 0 -2px 0 var(--c-cyan);
}

.page-products .bs-tabs__panels {
  border: 1px solid var(--bs-hair);
  background: var(--c-panel);
}

.page-products .bs-tabs__panel {
  display: none;
  padding: clamp(22px, 3vw, 36px);
}

.page-products #bs-biz-zone:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(1),
.page-products #bs-biz-h2h:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(2),
.page-products #bs-biz-run:checked ~ .bs-tabs__panels .bs-tabs__panel:nth-child(3) {
  display: block;
  animation: bs-fade 180ms var(--ease) both;
}

@keyframes bs-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-products .bs-tabs__panel p {
  margin: 0 0 16px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--bs-text);
}

.page-products .bs-tabs__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .bs-tabs__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-fog);
}

.page-products .bs-tabs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--c-nebula);
}

.page-products .bs-tabs__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(34, 224, 255, 0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-products .bs-tabs__link:hover {
  color: var(--c-lime);
  border-color: var(--c-lime);
}

/* ---------- 赛区分布 ---------- */
.page-products .bs-zones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-zones__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(28px, 4vw, 56px);
  }
}

.page-products .bs-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-rail__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bs-hair);
  font-size: 14px;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.page-products .bs-rail__item:hover {
  color: var(--c-cyan);
  padding-left: 6px;
}

.page-products .bs-rail__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-nebula);
}

.page-products .bs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-bottom: var(--bs-space);
  background: var(--bs-hair);
  border: 1px solid var(--bs-hair);
}

.page-products .bs-metric {
  background: var(--c-panel);
  padding: 16px 18px;
}

.page-products .bs-metric strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-lime);
}

.page-products .bs-metric span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--c-fog);
}

.page-products .bs-figure {
  margin: 0;
  border: 1px solid var(--bs-hair);
  background: var(--c-panel);
  overflow: hidden;
}

.page-products .bs-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .bs-figure figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--bs-hair);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--c-fog);
}

/* ---------- 交锋档案 ---------- */
.page-products .bs-h2h__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-h2h__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-fields {
  margin: 0 0 var(--bs-space);
  padding: 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-fields__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--bs-hair);
  transition: background var(--dur) var(--ease);
}

@media (min-width: 620px) {
  .page-products .bs-fields__row {
    grid-template-columns: minmax(0, 122px) minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-products .bs-fields__row:hover {
  background: var(--c-panel);
}

.page-products .bs-fields dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease);
}

.page-products .bs-fields__row:hover dt {
  color: var(--c-cyan);
}

.page-products .bs-fields dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-fog);
}

/* ---------- 跑动数据看板 ---------- */
.page-products .bs-running__banner {
  margin: 0 0 var(--bs-space);
  border: 1px solid var(--bs-hair);
  overflow: hidden;
}

.page-products .bs-running__banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.page-products .bs-running__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-running__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-products .bs-bar {
  display: grid;
  gap: 7px;
}

.page-products .bs-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.page-products .bs-bar__name {
  font-size: 14px;
  color: var(--c-mist);
}

.page-products .bs-bar__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-fog);
}

.page-products .bs-bar__track {
  display: block;
  height: 6px;
  background: rgba(30, 42, 68, 0.8);
  overflow: hidden;
}

.page-products .bs-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-nebula), var(--c-cyan));
  transition: background var(--dur) var(--ease);
}

.page-products .bs-bar:hover .bs-bar__fill {
  background: linear-gradient(90deg, var(--c-cyan), var(--c-lime));
}

/* ---------- 版本演进 ---------- */
.page-products .bs-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-products .bs-track__node {
  position: relative;
  padding: 18px 0 18px 24px;
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-track__node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-void);
  border: 1px solid var(--c-nebula);
}

.page-products .bs-track__node--now::before {
  background: var(--c-lime);
  border-color: var(--c-lime);
}

.page-products .bs-track__ver {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-nebula);
}

.page-products .bs-track__node--now .bs-track__ver {
  color: var(--c-lime);
}

.page-products .bs-track__title {
  margin: 7px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
}

.page-products .bs-track__text {
  margin: 0;
  max-width: 34em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-fog);
}

@media (min-width: 840px) {
  .page-products .bs-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .bs-track::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--c-nebula), var(--c-violet-gray) 58%, var(--c-cyan));
  }

  .page-products .bs-track__node {
    padding: 34px 22px 0 0;
    border-bottom: 0;
  }

  .page-products .bs-track__node::before {
    top: 4px;
    left: 0;
    width: 11px;
    height: 11px;
  }

  .page-products .bs-track__node--now::before {
    box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.16);
  }
}

/* ---------- 适用场景 ---------- */
.page-products .bs-scenes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-scenes__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

.page-products .bs-scene {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-scene:last-child {
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-scene h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
  transition: color var(--dur) var(--ease);
}

.page-products .bs-scene h3 span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-nebula);
}

.page-products .bs-scene p {
  margin: 0;
  max-width: 44em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-fog);
}

.page-products .bs-scene:hover h3 {
  color: var(--c-cyan);
}

.page-products .bs-figure--scene {
  margin-top: 4px;
}

/* ---------- 使用流程 ---------- */
.page-products .bs-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-products .bs-flow__step {
  padding: 20px 0;
  border-top: 1px solid var(--bs-hair);
}

.page-products .bs-flow__step:last-child {
  border-bottom: 1px solid var(--bs-hair);
}

.page-products .bs-flow__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
}

.page-products .bs-flow__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-mist);
}

.page-products .bs-flow__text {
  margin: 0;
  max-width: 30em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-fog);
}

@media (min-width: 900px) {
  .page-products .bs-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-products .bs-flow__step {
    padding: 24px 22px 0 0;
    border-bottom: 0;
  }

  .page-products .bs-flow__step:last-child {
    border-bottom: 0;
  }
}

/* ---------- 结尾 ---------- */
.page-products .bs-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space);
}

@media (min-width: 900px) {
  .page-products .bs-cta__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: clamp(28px, 4vw, 56px);
  }
}

.page-products .bs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 900px) {
  .page-products .bs-cta__actions {
    justify-content: flex-end;
  }
}