.page-products {
  --pp-pad: clamp(20px, 4vw, 56px);
  --pp-gap: clamp(18px, 3vw, 36px);
  background: var(--night-pitch);
  color: var(--paper);
  overflow-x: clip;
}

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

.page-products .section {
  padding: clamp(40px, 6vw, 84px) 0;
}

.page-products .breadcrumbs {
  padding-top: clamp(16px, 3vw, 28px);
  padding-bottom: 4px;
  background: var(--night-pitch);
}

.page-products .sec-head {
  max-width: 62ch;
}

.page-products .sec-head h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--paper);
}

.page-products .sec-lede {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: var(--silver);
}

.page-products .sec-head--tight {
  margin-bottom: 6px;
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px) 0 clamp(36px, 6vw, 80px);
  background:
    radial-gradient(circle at 84% 8%, rgba(215, 255, 63, 0.18), transparent 46%),
    var(--sheen);
  border-bottom: 1px solid var(--line);
}

.page-products .cat-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 58%;
  height: 170%;
  background: linear-gradient(135deg, rgba(199, 210, 215, 0.12), transparent 62%);
  transform: skewX(-14deg);
  pointer-events: none;
}

.page-products .cat-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}

.page-products .cat-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--paper);
  transform: skewX(-2deg);
  transform-origin: left bottom;
  word-break: break-word;
}

.page-products .cat-hero__lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.page-products .cat-hero__panel {
  border: 1px solid var(--line-strong);
  background: rgba(6, 26, 19, 0.62);
  padding: 18px 18px 16px;
}

.page-products .panel-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-products .status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.page-products .status-key {
  color: var(--mist-blue);
  letter-spacing: 0.04em;
}

.page-products .status-val {
  font-family: var(--font-mono);
  color: var(--paper);
  font-weight: 600;
  text-align: right;
}

.page-products .status-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist-blue);
}

/* ---------- 总览仪表板 ---------- */
.page-products .cat-overview {
  border-bottom: 1px solid var(--line);
}

.page-products .board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(24px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .board-cell {
  position: relative;
  display: block;
  padding: 20px 18px 24px;
  background: var(--stand-green);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease);
}

.page-products .board-cell::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: width 0.24s var(--ease);
}

.page-products .board-cell:hover,
.page-products .board-cell:focus-visible {
  background: var(--cold-slate);
}

.page-products .board-cell:hover::after,
.page-products .board-cell:focus-visible::after {
  width: 100%;
}

.page-products .board-cell:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-products .board-cell__phase {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silver);
  border-radius: 2px;
}

.page-products .board-cell__num {
  display: block;
  margin: 16px 0 4px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: rgba(215, 255, 63, 0.45);
}

.page-products .board-cell__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.page-products .board-cell__desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .cat-overview__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

/* ---------- 筛选与服务块 ---------- */
.page-products .catalog-filter {
  margin-top: clamp(18px, 3vw, 28px);
}

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

.page-products .phase-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.page-products .phase-bar label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  background: rgba(13, 46, 34, 0.66);
  color: var(--silver);
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .phase-bar label:hover {
  border-color: var(--lime);
  color: var(--paper);
}

.page-products .catalog-filter #phase-all:checked ~ .phase-bar label[for="phase-all"],
.page-products .catalog-filter #phase-pre:checked ~ .phase-bar label[for="phase-pre"],
.page-products .catalog-filter #phase-live:checked ~ .phase-bar label[for="phase-live"],
.page-products .catalog-filter #phase-post:checked ~ .phase-bar label[for="phase-post"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--night-pitch);
  font-weight: 700;
}

.page-products .catalog-filter #phase-all:focus-visible ~ .phase-bar label[for="phase-all"],
.page-products .catalog-filter #phase-pre:focus-visible ~ .phase-bar label[for="phase-pre"],
.page-products .catalog-filter #phase-live:focus-visible ~ .phase-bar label[for="phase-live"],
.page-products .catalog-filter #phase-post:focus-visible ~ .phase-bar label[for="phase-post"] {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-products .catalog-filter #phase-pre:checked ~ .service-stack .svc:not([data-phase~="pre"]),
.page-products .catalog-filter #phase-live:checked ~ .service-stack .svc:not([data-phase~="live"]),
.page-products .catalog-filter #phase-post:checked ~ .service-stack .svc:not([data-phase~="post"]) {
  display: none;
}

.page-products .svc {
  padding: clamp(26px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
}

.page-products .svc:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-products .svc__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-products .svc__num {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--mist-blue);
}

.page-products .svc__title {
  margin: 14px 0 0;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .svc__lede {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--silver);
}

.page-products .svc__body {
  margin-top: clamp(20px, 3vw, 32px);
}

/* 榜单阶梯 */
.page-products .ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .ladder__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, rgba(215, 255, 63, 0.09), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__item:nth-child(2) {
  border-left-color: var(--silver);
  background: linear-gradient(90deg, rgba(199, 210, 215, 0.09), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__item:nth-child(3) {
  border-left-color: var(--mist-blue);
  background: linear-gradient(90deg, rgba(111, 135, 148, 0.12), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__rank {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--paper);
}

.page-products .ladder__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .ladder__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* 资讯波次 */
.page-products .wave-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(20px, 3vw, 32px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .wave {
  padding: 16px 18px;
  background: var(--cold-slate);
}

.page-products .wave__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--lime);
}

.page-products .wave__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver);
}

/* 镜像双栏 */
.page-products .mirror {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-strong);
  background: var(--cold-slate);
}

.page-products .mirror__tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.page-products .mirror__tabs label {
  flex: 1 1 0;
  padding: 13px 10px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--silver);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .mirror__tabs label:hover {
  color: var(--paper);
}

.page-products .mirror #view-score:checked ~ .mirror__tabs label[for="view-score"],
.page-products .mirror #view-run:checked ~ .mirror__tabs label[for="view-run"] {
  background: var(--lime);
  color: var(--night-pitch);
  font-weight: 700;
}

.page-products .mirror #view-score:focus-visible ~ .mirror__tabs label[for="view-score"],
.page-products .mirror #view-run:focus-visible ~ .mirror__tabs label[for="view-run"] {
  outline: 2px solid var(--lime);
  outline-offset: -3px;
}

.page-products .mirror #view-score:checked ~ .mirror__panes .mirror__pane[data-view="run"],
.page-products .mirror #view-run:checked ~ .mirror__panes .mirror__pane[data-view="score"] {
  display: none;
}

.page-products .mirror__pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.page-products .mirror__col {
  padding: 18px;
}

.page-products .mirror__axis {
  display: none;
  background: var(--line-strong);
}

.page-products .mirror__col-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mist-blue);
}

.page-products .mirror__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .mirror__list li {
  font-size: 14px;
  line-height: 1.72;
  color: var(--silver);
  padding-left: 14px;
  position: relative;
}

.page-products .mirror__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--lime);
}

.page-products .mirror__list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

/* 回放时间轴 */
.page-products .timeline {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  background: rgba(13, 46, 34, 0.62);
}

.page-products .tl-track {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.page-products .tl-track label {
  flex: 1 1 110px;
  padding: 14px 10px 12px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--silver);
  cursor: pointer;
  border-right: 1px solid var(--line-soft);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .tl-track label:last-child {
  border-right: 0;
}

.page-products .tl-track label::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 9px;
  border: 1px solid var(--silver);
  border-radius: 50%;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .timeline #round-1:checked ~ .tl-track label[for="round-1"],
.page-products .timeline #round-2:checked ~ .tl-track label[for="round-2"],
.page-products .timeline #round-3:checked ~ .tl-track label[for="round-3"] {
  background: rgba(215, 255, 63, 0.1);
  color: var(--paper);
  font-weight: 700;
}

.page-products .timeline #round-1:checked ~ .tl-track label[for="round-1"]::before,
.page-products .timeline #round-2:checked ~ .tl-track label[for="round-2"]::before,
.page-products .timeline #round-3:checked ~ .tl-track label[for="round-3"]::before {
  background: var(--lime);
  border-color: var(--lime);
}

.page-products .timeline #round-1:focus-visible ~ .tl-track label[for="round-1"],
.page-products .timeline #round-2:focus-visible ~ .tl-track label[for="round-2"],
.page-products .timeline #round-3:focus-visible ~ .tl-track label[for="round-3"] {
  outline: 2px solid var(--lime);
  outline-offset: -3px;
}

.page-products .timeline #round-1:checked ~ .tl-panels .tl-panel:not([data-round="1"]),
.page-products .timeline #round-2:checked ~ .tl-panels .tl-panel:not([data-round="2"]),
.page-products .timeline #round-3:checked ~ .tl-panels .tl-panel:not([data-round="3"]) {
  display: none;
}

.page-products .tl-panel {
  padding: 18px;
}

.page-products .tl-panel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.page-products .tl-panel__row:last-of-type {
  border-bottom: 0;
}

.page-products .tl-key {
  color: var(--mist-blue);
  letter-spacing: 0.06em;
}

.page-products .tl-val {
  color: var(--paper);
}

.page-products .tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-products .tl-chip {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--silver);
  border-radius: 2px;
}

/* 使用动线 */
.page-products .cat-flow {
  background: var(--stand-green);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .flow-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .flow-step {
  padding: 20px 18px 24px;
  background: var(--night-pitch);
}

.page-products .flow-step__num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-products .flow-step__title {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .flow-step__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .flow-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-blue);
}

/* 收尾 */
.page-products .cat-next__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-products .cat-next h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .cat-next__text {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cat-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-products .cat-next__contact {
  padding: 20px 18px;
  border: 1px solid var(--line-strong);
  background: var(--stand-green);
}

.page-products .contact-label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-products .cat-next__contact .contact-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--paper);
  word-break: break-all;
}

.page-products .contact-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist-blue);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .mirror__pane {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  }

  .page-products .mirror__axis {
    display: block;
  }

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

  .page-products .ladder__item:nth-child(2) {
    margin-left: 24px;
  }

  .page-products .ladder__item:nth-child(3) {
    margin-left: 48px;
  }
}

@media (min-width: 860px) {
  .page-products .svc__body--ladder {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }

  .page-products .cat-next__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-products .board-cell,
  .page-products .board-cell::after,
  .page-products .phase-bar label,
  .page-products .mirror__tabs label,
  .page-products .tl-track label,
  .page-products .tl-track label::before {
    transition: none;
  }

  .page-products .cat-hero h1 {
    transform: none;
  }
}
</main>
<<<END>>>

等等，输出标记必须严格按照指定的顺序只出现一次。要求是：

...

...

我不应该在结尾再加上 <<<END>>>。让我重新干净地输出一次。

还有，我得再确认一下 `.page-products .contact-row` —— .contact-row 和 .contact-value 是全局类。我给 `.cat-next__contact .contact-value` 加了作用域样式，这没问题，因为它是限定在作用域内的。好的。

另外，`main` 标签结束——我是不是写重复了？让我检查一下：我写了 `</main>`，然后又写了 ``……不对，我写的是 CSS，然后 `</main>` 出现在 CSS 之前。让我重新梳理干净。

顺序必须是：先用 `<main ...>...</main>`，然后 ``，再是 CSS。确保 main 内部的 HTML 没有多余的 `</main>` 重复。

我会重新输出一遍，把格式弄干净。
<main id="main-content" class="page-products">

  <nav class="breadcrumbs" aria-label="面包屑">
    <div class="container">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">观赛内容目录</li>
      </ol>
    </div>
  </nav>

  <section class="cat-hero" aria-labelledby="cat-hero-title">
    <div class="container cat-hero__grid">
      <div class="cat-hero__copy">
        <p class="eyebrow">观赛内容服务</p>
        <h1 id="cat-hero-title">从赛前首发到赛后回放，跟队要的东西都在这</h1>
        <p class="cat-hero__lede">
          支持一支球队，一个赛季要盯的事不少：赛前想知道排到第几、这场谁上不了，赛后想弄明白那场球到底怎么踢的，
          还想把上一轮的跑动再看一遍。开云体育主站把这些事分成四条内容线，你按眼下最急的那件挑一个进去，几步就落到具体内容。
        </p>
        <div class="cat-hero__actions">
          <a class="btn btn-lime" href="#board">先看榜单</a>
          <a class="btn btn-line" href="/help/">遇到问题</a>
        </div>
      </div>

      <aside class="cat-hero__panel" aria-label="本轮内容状态">
        <p class="panel-title">本轮状态</p>
        <ul class="status-list">
          <li class="status-row"><span class="status-key">首发名单</span><span class="status-val">开赛前 2 小时</span></li>
          <li class="status-row"><span class="status-key">看台榜单</span><span class="status-val">每轮更新</span></li>
          <li class="status-row"><span class="status-key">赛后核对</span><span class="status-val">5 类指标</span></li>
          <li class="status-row"><span class="status-key">视频回放</span><span class="status-val">近三轮全场</span></li>
        </ul>
        <p class="status-foot">覆盖贵州 9 个市州、42 个球迷社群</p>
      </aside>
    </div>
  </section>

  <section class="section cat-overview" id="overview" aria-labelledby="overview-title">
    <div class="container">
      <header class="sec-head">
        <p class="eyebrow">内容总览</p>
        <h2 id="overview-title">四条内容线，各自顶住一轮比赛的一个时刻</h2>
        <p class="sec-lede">
          赛前要判断这场怎么打，开球前要确认谁上，终场后要复盘数据，第二天还想把画面再看一遍。
          四条线分别照着这四件事来做，点进去就是具体的榜单、名单、对照表或回放时间轴。
        </p>
      </header>

      <div class="board-grid">
        <a class="board-cell" href="#board">
          <span class="board-cell__phase">赛前</span>
          <span class="board-cell__num data-num">01</span>
          <h3 class="board-cell__title">看台榜单</h3>
          <p class="board-cell__desc">射手榜排名、伤停名单与近轮状态，一屏看完这场的基本盘。</p>
        </a>
        <a class="board-cell" href="#news">
          <span class="board-cell__phase">赛前 · 赛中</span>
          <span class="board-cell__num data-num">02</span>
          <h3 class="board-cell__title">赛事资讯</h3>
          <p class="board-cell__desc">每轮首发名单与比赛日消息，开赛前两小时准时到位。</p>
        </a>
        <a class="board-cell" href="#data">
          <span class="board-cell__phase">赛后</span>
          <span class="board-cell__num data-num">03</span>
          <h3 class="board-cell__title">赛后数据核对</h3>
          <p class="board-cell__desc">比分与跑动放在左右两栏，一场球的来龙去脉对着看。</p>
        </a>
        <a class="board-cell" href="#replay">
          <span class="board-cell__phase">赛后</span>
          <span class="board-cell__num data-num">04</span>
          <h3 class="board-cell__title">视频回放</h3>
          <p class="board-cell__desc">近三轮全场排在一条时间轴上，关键片段单独标出。</p>
        </a>
      </div>

      <figure class="media-frame media-frame--wide cat-overview__figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="四类观赛内容服务的细线图标总览，榜单、赛事资讯、数据核对与视频回放排成仪表板">
        <figcaption class="media-frame__cap">四个时刻，四条内容线，各管一段。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section cat-services" aria-labelledby="services-title">
    <div class="container">
      <header class="sec-head sec-head--tight">
        <p class="eyebrow">按阶段找</p>
        <h2 id="services-title">你现在在比赛的哪个阶段</h2>
      </header>

      <div class="catalog-filter">
        <input class="phase-input" type="radio" name="phase" id="phase-all" checked>
        <input class="phase-input" type="radio" name="phase" id="phase-pre">
        <input class="phase-input" type="radio" name="phase" id="phase-live">
        <input class="phase-input" type="radio" name="phase" id="phase-post">

        <div class="phase-bar" role="group" aria-label="按观赛阶段筛选内容">
          <label for="phase-all">全部</label>
          <label for="phase-pre">赛前</label>
          <label for="phase-live">赛中</label>
          <label for="phase-post">赛后</label>
        </div>

        <div class="service-stack">

          <article class="svc svc--board" id="board" data-phase="pre">
            <div class="svc__head">
              <span class="tag tag--lime">赛前</span>
              <span class="svc__num data-num">01</span>
            </div>
            <h3 class="svc__title">先看排名，再看这场谁上不了</h3>
            <p class="svc__lede">
              榜单是多数人进站后的第一站。所支持球队在射手榜上排到第几、这场有谁停赛或还在恢复、最近几轮是往上走还是连着没赢，
              三件事挤在一块就能判断这场的难度。榜单每轮更新一次，并在开赛前两小时和首发名单一起校准——你出门去球场前刷的那一遍，
              看到的就是这场能用的版本。
            </p>

            <div class="svc__body svc__body--ladder">
              <ol class="ladder">
                <li class="ladder__item">
                  <span class="ladder__rank data-num">01</span>
                  <div class="ladder__body">
                    <h4 class="ladder__title">射手榜排名</h4>
                    <p class="ladder__text">队里谁在进球、在联赛射手榜排到第几，进攻火力集中在哪个位置，扫一眼就有数。</p>
                  </div>
                </li>
                <li class="ladder__item">
                  <span class="ladder__rank data-num">02</span>
                  <div class="ladder__body">
                    <h4 class="ladder__title">伤停信息</h4>
                    <p class="ladder__text">谁这场停赛、谁还在恢复期，开球前就知道阵容缺了哪一块，不用等到现场才发现人不在。</p>
                  </div>
                </li>
                <li class="ladder__item">
                  <span class="ladder__rank data-num">03</span>
                  <div class="ladder__body">
                    <h4 class="ladder__title">近轮状态</h4>
                    <p class="ladder__text">最近几轮的胜负走向摆在一起，是顺风球还是硬仗，心里先有个预期。</p>
                  </div>
                </li>
              </ol>

              <figure class="media-frame media-frame--tall">
                <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="阶梯式纵向排列的榜单界面，排名数字与伤停标记并列展示" loading="lazy" decoding="async">
                <figcaption class="media-frame__cap">排名、伤停、近轮状态，同一屏里对上。</figcaption>
              </figure>
            </div>
          </article>

          <article class="svc svc--news" id="news" data-phase="pre live">
            <div class="svc__head">
              <span class="tag tag--lime">赛前 · 赛中</span>
              <span class="svc__num data-num">02</span>
            </div>
            <h3 class="svc__title">开赛前两小时，首发名单准时到位</h3>
            <p class="svc__lede">
              赛前最急的从来不是长篇分析，是“这场到底谁上”。首发名单在每轮开赛前两小时更新，并和榜单做一次同步校准。
              比赛日的内容按三个波次推进：开赛前两小时、终场后 30 分钟、次日 10 点前，从首发到比分再到全场数据，一条线接得上。
            </p>

            <div class="wave-band">
              <div class="wave">
                <span class="wave__time">开赛前 2 小时</span>
                <p class="wave__text">首发名单发布，榜单同步校准</p>
              </div>
              <div class="wave">
                <span class="wave__time">终场后 30 分钟</span>
                <p class="wave__text">比分与关键事件先行更新</p>
              </div>
              <div class="wave">
                <span class="wave__time">次日 10:00 前</span>
                <p class="wave__text">全场数据与回放整理完毕</p>
              </div>
            </div>

            <figure class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="首发名单板与开赛倒计时并列，体现开赛前两小时更新的节奏" loading="lazy" decoding="async">
              <figcaption class="media-frame__cap">名单一贴出来，阵容的疑问就少了大半。</figcaption>
            </figure>
          </article>

          <article class="svc svc--data" id="data" data-phase="post">
            <div class="svc__head">
              <span class="tag">赛后</span>
              <span class="svc__num data-num">03</span>
            </div>
            <h3 class="svc__title">一场球，两边摆开慢慢对</h3>
            <p class="svc__lede">
              比分只是结果。为什么是这个结果，得把两边的射门、控球、跑动距离和冲刺次数并排放着才看得出来。
              单项数据单看容易误判，左右一对照，哪边一直压着打、哪边后半段跑不动，画面就清楚了。
              这一项按赛季累计，已经完成 620 轮赛后数据核对。
            </p>

            <div class="mirror">
              <input class="mirror__input" type="radio" name="dataview" id="view-score" checked>
              <input class="mirror__input" type="radio" name="dataview" id="view-run">

              <div class="mirror__tabs" role="group" aria-label="切换核对视角">
                <label for="view-score">比分视角</label>
                <label for="view-run">跑动视角</label>
              </div>

              <div class="mirror__panes">
                <div class="mirror__pane" data-view="score">
                  <div class="mirror__col">
                    <h4 class="mirror__col-title">左栏 · 比分侧三项</h4>
                    <ul class="mirror__list">
                      <li><strong>比分</strong>终场结果，一切讨论的起点</li>
                      <li><strong>射门</strong>这场创造了多少次机会</li>
                      <li><strong>控球</strong>节奏握在哪一边手里</li>
                    </ul>
                  </div>
                  <span class="mirror__axis" aria-hidden="true"></span>
                  <div class="mirror__col">
                    <h4 class="mirror__col-title">右栏 · 对照时看什么</h4>
                    <ul class="mirror__list">
                      <li>比分和射门数量差得远，多半是把握机会的问题</li>
                      <li>控球高不代表威胁大，得配着射门一起读</li>
                      <li>两队射门接近时，胜负常常落在几个具体回合上</li>
                    </ul>
                  </div>
                </div>

                <div class="mirror__pane" data-view="run">
                  <div class="mirror__col">
                    <h4 class="mirror__col-title">左栏 · 跑动侧两项</h4>
                    <ul class="mirror__list">
                      <li><strong>跑动距离</strong>全队覆盖了多大的场面</li>
                      <li><strong>冲刺次数</strong>强度峰值出现在哪些时段</li>
                    </ul>
                  </div>
                  <span class="mirror__axis" aria-hidden="true"></span>
                  <div class="mirror__col">
                    <h4 class="mirror__col-title">右栏 · 对照时看什么</h4>
                    <ul class="mirror__list">
                      <li>跑动接近而比分悬殊，差距往往出在效率上</li>
                      <li>冲刺集中在下半场，说明体能分配有调整</li>
                      <li>落后一方跑动上涨，是压上还是慌乱要看具体时段</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <figure class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="左右镜像排布的比分栏与跑动热力图，强调双栏对照关系" loading="lazy" decoding="async">
              <figcaption class="media-frame__cap">左边结果，右边过程，中间那条线是判断的地方。</figcaption>
            </figure>
          </article>

          <article class="svc svc--replay" id="replay" data-phase="post">
            <div class="svc__head">
              <span class="tag">赛后</span>
              <span class="svc__num data-num">04</span>
            </div>
            <h3 class="svc__title">近三轮全场，按轮次排成时间轴</h3>
            <p class="svc__lede">
              数据看完还不过瘾，就回放。近三轮的全场回放按轮次排在同一条时间轴上，点哪个节点看哪一轮；
              每场下面挂着关键片段和看台视角标签，只想看进球或者只想看现场机位，不用一路拖进度条。
              按赛季累计，整理的全场回放超过 180 场。
            </p>

            <div class="timeline">
              <input class="tl-input" type="radio" name="round" id="round-1" checked>
              <input class="tl-input" type="radio" name="round" id="round-2">
              <input class="tl-input" type="radio" name="round" id="round-3">

              <div class="tl-track" role="group" aria-label="切换回放轮次">
                <label for="round-1">本轮</label>
                <label for="round-2">上一轮</label>
                <label for="round-3">再上一轮</label>
              </div>

              <div class="tl-panels">
                <div class="tl-panel" data-round="1">
                  <p class="tl-panel__row"><span class="tl-key">全场回放</span><span class="tl-val">90 分钟完整版</span></p>
                  <p class="tl-panel__row"><span class="tl-key">关键片段</span><span class="tl-val">进球、红黄牌节点单独成段</span></p>
                  <p class="tl-panel__row"><span class="tl-key">看台视角</span><span class="tl-val">现场机位片段，还原看台所见</span></p>
                  <div class="tl-chips">
                    <span class="tl-chip">全场</span>
                    <span class="tl-chip">关键片段</span>
                    <span class="tl-chip">看台视角</span>
                  </div>
                </div>

                <div class="tl-panel" data-round="2">
                  <p class="tl-panel__row"><span class="tl-key">全场回放</span><span class="tl-val">90 分钟完整版</span></p>
                  <p class="tl-panel__row"><span class="tl-key">关键片段</span><span class="tl-val">进球、红黄牌节点单独成段</span></p>
                  <p class="tl-panel__row"><span class="tl-key">看台视角</span><span class="tl-val">现场机位片段，还原看台所见</span></p>
                  <div class="tl-chips">
                    <span class="tl-chip">全场</span>
                    <span class="tl-chip">关键片段</span>
                    <span class="tl-chip">看台视角</span>
                  </div>
                </div>

                <div class="tl-panel" data-round="3">
                  <p class="tl-panel__row"><span class="tl-key">全场回放</span><span class="tl-val">90 分钟完整版</span></p>
                  <p class="tl-panel__row"><span class="tl-key">关键片段</span><span class="tl-val">进球、红黄牌节点单独成段</span></p>
                  <p class="tl-panel__row"><span class="tl-key">看台视角</span><span class="tl-val">现场机位片段，还原看台所见</span></p>
                  <div class="tl-chips">
                    <span class="tl-chip">全场</span>
                    <span class="tl-chip">关键片段</span>
                    <span class="tl-chip">看台视角</span>
                  </div>
                </div>
              </div>
            </div>

            <figure class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="近三轮视频回放时间轴与播放标识，三个轮次节点依次排开" loading="lazy" decoding="async">
              <figcaption class="media-frame__cap">三轮并排，想补哪一轮就点哪个节点。</figcaption>
            </figure>
          </article>

        </div>
      </div>
    </div>
  </section>

  <section class="section cat-flow" id="flow" aria-labelledby="flow-title">
    <div class="container">
      <header class="sec-head">
        <p class="eyebrow">怎么连起来用</p>
        <h2 id="flow-title">一轮比赛，四步走完</h2>
        <p class="sec-lede">
          固定跟一支队的球迷，多半是按这个顺序走下来的。只看某一轮的，从上面对应阶段直接进也完全可以。
        </p>
      </header>

      <ol class="flow-steps">
        <li class="flow-step">
          <span class="flow-step__num data-num">01</span>
          <h3 class="flow-step__title">赛前几天</h3>
          <p class="flow-step__text">打开榜单，先确认射手排名和这场谁上不了。</p>
        </li>
        <li class="flow-step">
          <span class="flow-step__num data-num">02</span>
          <h3 class="flow-step__title">开赛前两小时</h3>
          <p class="flow-step__text">刷一次首发名单，阵容的疑问到这里基本就有答案。</p>
        </li>
        <li class="flow-step">
          <span class="flow-step__num data-num">03</span>
          <h3 class="flow-step__title">终场后 30 分钟</h3>
          <p class="flow-step__text">进数据核对，把比分、射门、控球和跑动两边摆开看。</p>
        </li>
        <li class="flow-step">
          <span class="flow-step__num data-num">04</span>
          <h3 class="flow-step__title">次日</h3>
          <p class="flow-step__text">调出全场回放，对着关键片段把几个回合重看一遍。</p>
        </li>
      </ol>

      <p class="flow-note">一个赛季下来，这样的顺序会走很多遍；走得多了，哪一段最该看你自己最清楚。</p>
    </div>
  </section>

  <section class="section cat-next" aria-labelledby="next-title">
    <div class="container cat-next__grid">
      <div class="cat-next__main">
        <h2 id="next-title">接着往下看</h2>
        <p class="cat-next__text">
          想读具体的赛前情报和赛后复盘，去赛事专栏；第一次用、不确定入口在哪，帮助中心里把常见问题都列清楚了；
          有内容共建或社群合作的想法，走合作联系谈。
        </p>
        <div class="cat-next__links">
          <a class="btn btn-lime" href="/articles/">读赛事专栏</a>
          <a class="btn btn-line" href="/help/">去帮助中心</a>
          <a class="btn btn-line" href="/cooperation/">谈内容合作</a>
        </div>
      </div>

      <div class="cat-next__contact">
        <p class="contact-label">内容咨询</p>
        <div class="contact-row">
          <span class="contact-value">service@gaze-kaiyun.com.cn</span>
          <button class="copy-btn" type="button" data-copy="service@gaze-kaiyun.com.cn">复制</button>
        </div>
        <p class="contact-note">工作日 9:00–18:00 内回复；赛事高峰期优先处理赛后数据核对与视频集锦相关咨询。</p>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pp-gap: clamp(18px, 3vw, 36px);
  background: var(--night-pitch);
  color: var(--paper);
  overflow-x: clip;
}

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

.page-products .section {
  padding: clamp(40px, 6vw, 84px) 0;
}

.page-products .breadcrumbs {
  padding-top: clamp(16px, 3vw, 28px);
  padding-bottom: 4px;
  background: var(--night-pitch);
}

.page-products .sec-head {
  max-width: 62ch;
}

.page-products .sec-head h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--paper);
}

.page-products .sec-lede {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: var(--silver);
}

.page-products .sec-head--tight {
  margin-bottom: 6px;
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px) 0 clamp(36px, 6vw, 80px);
  background:
    radial-gradient(circle at 84% 8%, rgba(215, 255, 63, 0.18), transparent 46%),
    var(--sheen);
  border-bottom: 1px solid var(--line);
}

.page-products .cat-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 58%;
  height: 170%;
  background: linear-gradient(135deg, rgba(199, 210, 215, 0.12), transparent 62%);
  transform: skewX(-14deg);
  pointer-events: none;
}

.page-products .cat-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}

.page-products .cat-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--paper);
  transform: skewX(-2deg);
  transform-origin: left bottom;
  word-break: break-word;
}

.page-products .cat-hero__lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.page-products .cat-hero__panel {
  border: 1px solid var(--line-strong);
  background: rgba(6, 26, 19, 0.62);
  padding: 18px 18px 16px;
}

.page-products .panel-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}

.page-products .status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.page-products .status-key {
  color: var(--mist-blue);
  letter-spacing: 0.04em;
}

.page-products .status-val {
  font-family: var(--font-mono);
  color: var(--paper);
  font-weight: 600;
  text-align: right;
}

.page-products .status-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist-blue);
}

/* ---------- 总览仪表板 ---------- */
.page-products .cat-overview {
  border-bottom: 1px solid var(--line);
}

.page-products .board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(24px, 4vw, 40px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .board-cell {
  position: relative;
  display: block;
  padding: 20px 18px 24px;
  background: var(--stand-green);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease);
}

.page-products .board-cell::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: width 0.24s var(--ease);
}

.page-products .board-cell:hover,
.page-products .board-cell:focus-visible {
  background: var(--cold-slate);
}

.page-products .board-cell:hover::after,
.page-products .board-cell:focus-visible::after {
  width: 100%;
}

.page-products .board-cell:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-products .board-cell__phase {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silver);
}

.page-products .board-cell__num {
  display: block;
  margin: 16px 0 4px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: rgba(215, 255, 63, 0.45);
}

.page-products .board-cell__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.page-products .board-cell__desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .cat-overview__figure {
  margin: clamp(24px, 4vw, 40px) 0 0;
}

/* ---------- 筛选与服务块 ---------- */
.page-products .catalog-filter {
  margin-top: clamp(18px, 3vw, 28px);
}

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

.page-products .phase-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.page-products .phase-bar label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  background: rgba(13, 46, 34, 0.66);
  color: var(--silver);
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .phase-bar label:hover {
  border-color: var(--lime);
  color: var(--paper);
}

.page-products .catalog-filter #phase-all:checked ~ .phase-bar label[for="phase-all"],
.page-products .catalog-filter #phase-pre:checked ~ .phase-bar label[for="phase-pre"],
.page-products .catalog-filter #phase-live:checked ~ .phase-bar label[for="phase-live"],
.page-products .catalog-filter #phase-post:checked ~ .phase-bar label[for="phase-post"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--night-pitch);
  font-weight: 700;
}

.page-products .catalog-filter #phase-all:focus-visible ~ .phase-bar label[for="phase-all"],
.page-products .catalog-filter #phase-pre:focus-visible ~ .phase-bar label[for="phase-pre"],
.page-products .catalog-filter #phase-live:focus-visible ~ .phase-bar label[for="phase-live"],
.page-products .catalog-filter #phase-post:focus-visible ~ .phase-bar label[for="phase-post"] {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.page-products .catalog-filter #phase-pre:checked ~ .service-stack .svc:not([data-phase~="pre"]),
.page-products .catalog-filter #phase-live:checked ~ .service-stack .svc:not([data-phase~="live"]),
.page-products .catalog-filter #phase-post:checked ~ .service-stack .svc:not([data-phase~="post"]) {
  display: none;
}

.page-products .svc {
  padding: clamp(26px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
}

.page-products .svc:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-products .svc__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-products .svc__num {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--mist-blue);
}

.page-products .svc__title {
  margin: 14px 0 0;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .svc__lede {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--silver);
}

.page-products .svc__body {
  margin-top: clamp(20px, 3vw, 32px);
}

/* 榜单阶梯 */
.page-products .ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .ladder__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, rgba(215, 255, 63, 0.09), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__item:nth-child(2) {
  border-left-color: var(--silver);
  background: linear-gradient(90deg, rgba(199, 210, 215, 0.09), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__item:nth-child(3) {
  border-left-color: var(--mist-blue);
  background: linear-gradient(90deg, rgba(111, 135, 148, 0.12), rgba(13, 46, 34, 0.78) 46%);
}

.page-products .ladder__rank {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--paper);
}

.page-products .ladder__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .ladder__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

/* 资讯波次 */
.page-products .wave-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(20px, 3vw, 32px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .wave {
  padding: 16px 18px;
  background: var(--cold-slate);
}

.page-products .wave__time {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--lime);
}

.page-products .wave__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver);
}

/* 镜像双栏 */
.page-products .mirror {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-strong);
  background: var(--cold-slate);
}

.page-products .mirror__tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.page-products .mirror__tabs label {
  flex: 1 1 0;
  padding: 13px 10px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--silver);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .mirror__tabs label:hover {
  color: var(--paper);
}

.page-products .mirror #view-score:checked ~ .mirror__tabs label[for="view-score"],
.page-products .mirror #view-run:checked ~ .mirror__tabs label[for="view-run"] {
  background: var(--lime);
  color: var(--night-pitch);
  font-weight: 700;
}

.page-products .mirror #view-score:focus-visible ~ .mirror__tabs label[for="view-score"],
.page-products .mirror #view-run:focus-visible ~ .mirror__tabs label[for="view-run"] {
  outline: 2px solid var(--lime);
  outline-offset: -3px;
}

.page-products .mirror #view-score:checked ~ .mirror__panes .mirror__pane[data-view="run"],
.page-products .mirror #view-run:checked ~ .mirror__panes .mirror__pane[data-view="score"] {
  display: none;
}

.page-products .mirror__pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.page-products .mirror__col {
  padding: 18px;
}

.page-products .mirror__axis {
  display: none;
  background: var(--line-strong);
}

.page-products .mirror__col-title {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mist-blue);
}

.page-products .mirror__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-products .mirror__list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--silver);
}

.page-products .mirror__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--lime);
}

.page-products .mirror__list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

/* 回放时间轴 */
.page-products .timeline {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  background: rgba(13, 46, 34, 0.62);
}

.page-products .tl-track {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.page-products .tl-track label {
  flex: 1 1 110px;
  padding: 14px 10px 12px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--silver);
  cursor: pointer;
  border-right: 1px solid var(--line-soft);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.page-products .tl-track label:last-child {
  border-right: 0;
}

.page-products .tl-track label::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 9px;
  border: 1px solid var(--silver);
  border-radius: 50%;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-products .timeline #round-1:checked ~ .tl-track label[for="round-1"],
.page-products .timeline #round-2:checked ~ .tl-track label[for="round-2"],
.page-products .timeline #round-3:checked ~ .tl-track label[for="round-3"] {
  background: rgba(215, 255, 63, 0.1);
  color: var(--paper);
  font-weight: 700;
}

.page-products .timeline #round-1:checked ~ .tl-track label[for="round-1"]::before,
.page-products .timeline #round-2:checked ~ .tl-track label[for="round-2"]::before,
.page-products .timeline #round-3:checked ~ .tl-track label[for="round-3"]::before {
  background: var(--lime);
  border-color: var(--lime);
}

.page-products .timeline #round-1:focus-visible ~ .tl-track label[for="round-1"],
.page-products .timeline #round-2:focus-visible ~ .tl-track label[for="round-2"],
.page-products .timeline #round-3:focus-visible ~ .tl-track label[for="round-3"] {
  outline: 2px solid var(--lime);
  outline-offset: -3px;
}

.page-products .timeline #round-1:checked ~ .tl-panels .tl-panel:not([data-round="1"]),
.page-products .timeline #round-2:checked ~ .tl-panels .tl-panel:not([data-round="2"]),
.page-products .timeline #round-3:checked ~ .tl-panels .tl-panel:not([data-round="3"]) {
  display: none;
}

.page-products .tl-panel {
  padding: 18px;
}

.page-products .tl-panel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.page-products .tl-panel__row:last-of-type {
  border-bottom: 0;
}

.page-products .tl-key {
  color: var(--mist-blue);
  letter-spacing: 0.06em;
}

.page-products .tl-val {
  color: var(--paper);
}

.page-products .tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-products .tl-chip {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--silver);
}

/* 使用动线 */
.page-products .cat-flow {
  background: var(--stand-green);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .flow-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-products .flow-step {
  padding: 20px 18px 24px;
  background: var(--night-pitch);
}

.page-products .flow-step__num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}

.page-products .flow-step__title {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .flow-step__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}

.page-products .flow-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist-blue);
}

/* 收尾 */
.page-products .cat-next__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.page-products .cat-next h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .cat-next__text {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--silver);
}

.page-products .cat-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.page-products .cat-next__contact {
  padding: 20px 18px;
  border: 1px solid var(--line-strong);
  background: var(--stand-green);
}

.page-products .contact-label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--lime);
}

.page-products .cat-next__contact .contact-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--paper);
  word-break: break-all;
}

.page-products .contact-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mist-blue);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .mirror__pane {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  }

  .page-products .mirror__axis {
    display: block;
  }

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

  .page-products .ladder__item:nth-child(2) {
    margin-left: 24px;
  }

  .page-products .ladder__item:nth-child(3) {
    margin-left: 48px;
  }
}

@media (min-width: 860px) {
  .page-products .svc__body--ladder {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }

  .page-products .cat-next__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-products .board-cell,
  .page-products .board-cell::after,
  .page-products .phase-bar label,
  .page-products .mirror__tabs label,
  .page-products .tl-track label,
  .page-products .tl-track label::before {
    transition: none;
  }

  .page-products .cat-hero h1 {
    transform: none;
  }
}