.page-products {
  --pf-rail: 208px;
  --pf-hair: 1px solid rgba(43, 245, 200, 0.18);
  --pf-hair-strong: 1px solid rgba(43, 245, 200, 0.32);
  --pf-hair-ink: 1px solid rgba(27, 34, 31, 0.14);
  background: var(--ink-950);
  color: var(--cyan-200);
  font-family: var(--font-body);
}

.page-products a {
  color: inherit;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(166, 255, 232, 0.62);
}

.page-products .breadcrumb__list li + li::before {
  content: "/";
  margin: 0 8px;
  color: rgba(43, 245, 200, 0.42);
}

.page-products .breadcrumb__list a {
  color: var(--cyan-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 200, 0.4);
}

.page-products .breadcrumb__list a:hover,
.page-products .breadcrumb__list a:focus-visible {
  color: var(--cyan-400);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  padding: 16px 0 42px;
  background:
    radial-gradient(120% 92% at 90% 0%, rgba(43, 245, 200, 0.15), transparent 62%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border-bottom: 1px solid rgba(43, 245, 200, 0.16);
}

.page-products .cat-hero__grid {
  display: grid;
  gap: 26px;
  padding-top: 22px;
}

.page-products .cat-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 7.6vw, 58px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.page-products .cat-hero__intro {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.86);
}

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

.page-products .cat-hero .eyebrow {
  color: var(--cyan-400);
}

.page-products .cat-hero__stats {
  padding: 18px;
  border-radius: var(--r-md);
}

.page-products .cat-hero__stats-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(166, 255, 232, 0.66);
}

.page-products .cat-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(43, 245, 200, 0.16);
  border: 1px solid rgba(43, 245, 200, 0.18);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.page-products .cat-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  background: rgba(4, 21, 15, 0.74);
}

.page-products .cat-stats__item .stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cyan-400);
}

.page-products .cat-stats__item .stat__label {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(166, 255, 232, 0.72);
}

.page-products .cat-hero__stats-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(166, 255, 232, 0.62);
}

/* ---------- 目录总览 ---------- */
.page-products .cat-map {
  padding: 40px 0 46px;
  background: var(--paper);
  color: var(--carbon-900);
  border-bottom: var(--pf-hair-ink);
}

.page-products .cat-map .eyebrow {
  color: var(--ink-700);
}

.page-products .cat-map .section-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5.2vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.page-products .cat-map__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(27, 34, 31, 0.78);
}

.page-products .cat-map__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.page-products .map-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: var(--pf-hair-ink);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.page-products .map-card--a {
  grid-column: 1 / -1;
}

.page-products .map-card:hover,
.page-products .map-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ink-700);
}

.page-products .map-card__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist-500);
}

.page-products .map-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-950);
}

.page-products .map-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(27, 34, 31, 0.76);
}

.page-products .map-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: auto 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px dashed rgba(27, 34, 31, 0.2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
}

.page-products .map-card--a {
  background: linear-gradient(155deg, var(--ink-900), var(--ink-700));
  border-color: rgba(43, 245, 200, 0.32);
}

.page-products .map-card--a .map-card__no {
  color: var(--cyan-400);
}

.page-products .map-card--a .map-card__title {
  color: var(--paper);
}

.page-products .map-card--a .map-card__text {
  color: rgba(166, 255, 232, 0.82);
}

.page-products .map-card--a .map-card__meta {
  color: var(--cyan-200);
  border-top-color: rgba(43, 245, 200, 0.3);
}

.page-products .cat-dims {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed rgba(27, 34, 31, 0.24);
}

.page-products .cat-dims__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.page-products .cat-dims__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.page-products .cat-dim {
  padding-left: 12px;
  border-left: 2px solid var(--ink-700);
}

.page-products .cat-dim__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--carbon-900);
}

.page-products .cat-dim__text {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: rgba(27, 34, 31, 0.74);
}

/* ---------- 模块主体 ---------- */
.page-products .cat-body {
  padding: 34px 0 50px;
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 48%, var(--ink-950) 100%);
}

.page-products .cat-body__inner {
  display: grid;
  gap: 24px;
}

.page-products .cat-rail__title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(166, 255, 232, 0.6);
}

.page-products .cat-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .cat-rail__link {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  border: var(--pf-hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--cyan-200);
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-products .cat-rail__link:hover,
.page-products .cat-rail__link:focus-visible {
  background: rgba(43, 245, 200, 0.13);
  border-color: rgba(43, 245, 200, 0.5);
  color: var(--cyan-400);
}

.page-products .mod {
  padding: 26px 0;
  border-top: var(--pf-hair);
  scroll-margin-top: 92px;
}

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

.page-products .mod__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--yellow-400);
}

.page-products .mod__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 5.2vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-products .mod__lead {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: rgba(166, 255, 232, 0.85);
}

.page-products .mod__note {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 210, 74, 0.6);
  font-size: 13px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.7);
}

.page-products .mod__more {
  margin: 18px 0 0;
}

.page-products .mod__split {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.page-products .mod__col {
  min-width: 0;
}

/* ---------- 图片框 ---------- */
.page-products .cat-shot {
  margin: 0;
  border: var(--pf-hair-strong);
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  background: rgba(12, 66, 52, 0.45);
}

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

.page-products .cat-shot--tall img {
  aspect-ratio: 4 / 5;
}

.page-products .cat-shot--wide img {
  aspect-ratio: 2 / 1;
}

.page-products .cat-shot--sq img {
  aspect-ratio: 4 / 3;
}

.page-products .media__caption {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(166, 255, 232, 0.7);
  border-top: 1px solid rgba(43, 245, 200, 0.16);
}

/* ---------- 轮次刻度条 ---------- */
.page-products .tickbar {
  position: relative;
  margin: 18px 0 4px;
  padding-bottom: 30px;
}

.page-products .tickbar__scale {
  position: relative;
  height: 32px;
  border: 1px solid rgba(43, 245, 200, 0.24);
  border-radius: var(--r-sm);
  background-color: rgba(12, 66, 52, 0.62);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(43, 245, 200, 0.42) 0,
    rgba(43, 245, 200, 0.42) 1px,
    transparent 1px,
    transparent 2.632%
  );
  overflow: hidden;
}

.page-products .tickbar__knob {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 53%;
  width: 2px;
  background: var(--yellow-400);
  box-shadow: 0 0 0 1px rgba(4, 21, 15, 0.6);
}

.page-products .tickbar__now {
  position: absolute;
  left: 53%;
  bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--yellow-400);
}

.page-products .tickbar__ends {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(166, 255, 232, 0.66);
}

/* ---------- 要点列表 ---------- */
.page-products .mod-facts {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .mod-facts li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.83);
}

.page-products .mod-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--cyan-400);
}

.page-products .mod-facts strong {
  font-weight: 700;
  color: var(--paper);
}

/* ---------- 字段表 ---------- */
.page-products .fields {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.page-products .fields__group {
  border: var(--pf-hair);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.46);
}

.page-products .fields__sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
}

.page-products .fields__sum::-webkit-details-marker {
  display: none;
}

.page-products .fields__k {
  flex: 1 1 auto;
}

.page-products .fields__n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--yellow-400);
}

.page-products .fields__sum::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform 180ms var(--ease);
}

.page-products .fields__group[open] .fields__sum::after {
  transform: rotate(-135deg);
}

.page-products .fields__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
  border-top: 1px solid rgba(43, 245, 200, 0.16);
}

.page-products .fields__list li {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(4, 21, 15, 0.58);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cyan-200);
  transition: background 160ms var(--ease);
}

.page-products .fields__list li:hover {
  background: rgba(43, 245, 200, 0.16);
}

/* ---------- 规则三分类 ---------- */
.page-products .rules {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.page-products .rule-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: var(--pf-hair);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.42);
}

.page-products .rule-card__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-400);
}

.page-products .rule-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .rule-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.8);
}

.page-products .rule-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(43, 245, 200, 0.22);
}

.page-products .rule-card__tags span {
  padding: 3px 8px;
  border: 1px solid rgba(43, 245, 200, 0.3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan-200);
}

/* ---------- 上手流程 ---------- */
.page-products .steps {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--cyan-400);
}

.page-products .step__no {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--cyan-400);
}

.page-products .step h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-products .step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.8);
}

/* ---------- 尾部入口 ---------- */
.page-products .cat-cta {
  padding: 0 0 54px;
  background: var(--ink-950);
}

.page-products .cat-cta__box {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: var(--pf-hair-strong);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.4);
}

.page-products .cat-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 4.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-products .cat-cta__text {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.82);
}

.page-products .cat-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 720px) {
  .page-products .cat-hero {
    padding: 20px 0 56px;
  }

  .page-products .cat-map {
    padding: 52px 0 58px;
  }

  .page-products .cat-map__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .map-card--a {
    grid-column: span 4;
  }

  .page-products .map-card--b,
  .page-products .map-card--c {
    grid-column: span 3;
  }

  .page-products .map-card--d {
    grid-column: span 6;
  }

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

  .page-products .mod__split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 26px;
  }

  .page-products .mod__split--rev {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  }

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

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

  .page-products .cat-cta__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 26px;
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    padding-top: 30px;
  }

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

@media (min-width: 960px) {
  .page-products .cat-body {
    padding: 44px 0 60px;
  }

  .page-products .cat-body__inner {
    grid-template-columns: var(--pf-rail) minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .cat-rail {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .page-products .cat-rail__list {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    gap: 0;
  }

  .page-products .cat-rail__link {
    padding: 10px 0 10px 14px;
    border: 0;
    border-left: 2px solid rgba(43, 245, 200, 0.22);
    border-radius: 0;
  }

  .page-products .cat-rail__link:hover,
  .page-products .cat-rail__link:focus-visible {
    border-left-color: var(--cyan-400);
    background: rgba(43, 245, 200, 0.07);
  }

  .page-products .mod {
    padding: 34px 0;
  }

  .page-products .mod__split {
    gap: 34px;
  }
}


<main id="main-content" class="page-products">
  <section class="cat-hero">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑导航">
        <ol class="breadcrumb__list">
          <li><a href="/">首页</a></li>
          <li aria-current="page">数据目录</li>
        </ol>
      </nav>
      <div class="cat-hero__grid">
        <div class="cat-hero__lead">
          <p class="eyebrow">功能一览 · 本季目录</p>
          <h1>赛程、球员、专题与规则，各有各的查法</h1>
          <p class="cat-hero__intro">
            安博体育把一整季的信息拆成四个能直接下手的模块：排轮次看对阵、按字段比球员、读专题补上下文、翻条文判争议。你先在这一页看清每个模块给什么，再决定从哪一个进去。
          </p>
          <div class="cat-hero__actions">
            <a class="btn btn--primary" href="#schedule">从赛程开始</a>
            <a class="btn btn--ghost" href="#players">看球员字段</a>
          </div>
        </div>
        <aside class="glass cat-hero__stats" aria-label="目录规模">
          <p class="cat-hero__stats-title">当前目录</p>
          <div class="cat-stats">
            <div class="cat-stats__item">
              <span class="stat__value">26</span>
              <span class="stat__label">球员数据字段</span>
            </div>
            <div class="cat-stats__item">
              <span class="stat__value">1–38</span>
              <span class="stat__label">iOS 赛程轮次</span>
            </div>
            <div class="cat-stats__item">
              <span class="stat__value">12</span>
              <span class="stat__label">联赛专题</span>
            </div>
            <div class="cat-stats__item">
              <span class="stat__value">48</span>
              <span class="stat__label">规则条目</span>
            </div>
          </div>
          <p class="cat-hero__stats-note">登录后收藏联赛与专题，换设备继续看。</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="cat-map" aria-labelledby="map-title">
    <div class="wrap">
      <p class="eyebrow">目录总览</p>
      <h2 id="map-title" class="section-title">四块内容，用同一套条件挑出来</h2>
      <p class="cat-map__lead">
        要找的是一场球、一个人还是一条判罚，入口只有四个；挑法却是同一套——关键词、联赛、轮次、球员位置可以一层层叠上去，叠得越细，落点越准。
      </p>

      <div class="cat-map__grid">
        <a class="map-card map-card--a" href="#schedule">
          <span class="map-card__no">01</span>
          <h3 class="map-card__title">赛程查询</h3>
          <p class="map-card__text">选联赛、滑轮次，单轮的对阵和开球时间一屏读完，不用一层层点进去。</p>
          <ul class="map-card__meta">
            <li>第 1–38 轮</li>
            <li>单轮最多 10 场</li>
            <li>比分 30 分钟内更新</li>
          </ul>
        </a>
        <a class="map-card map-card--b" href="#players">
          <span class="map-card__no">02</span>
          <h3 class="map-card__title">球员数据</h3>
          <p class="map-card__text">26 项字段分组展开，出场、投射、篮板助攻与效率各占一块，横向比人不用来回换算。</p>
          <ul class="map-card__meta">
            <li>常规赛 / 季后赛分列</li>
          </ul>
        </a>
        <a class="map-card map-card--c" href="#topics">
          <span class="map-card__no">03</span>
          <h3 class="map-card__title">联赛专题</h3>
          <p class="map-card__text">把一轮的数字写成有上下文的解读，读完还能顺着文末入口回到具体字段。</p>
          <ul class="map-card__meta">
            <li>每周 3–5 篇</li>
          </ul>
        </a>
        <a class="map-card map-card--d" href="#rules">
          <span class="map-card__no">04</span>
          <h3 class="map-card__title">规则速查</h3>
          <p class="map-card__text">48 条条文按比赛流程、判罚尺度、场地器材三类排，遇到争议顺着一路找下去。</p>
          <ul class="map-card__meta">
            <li>三类编排</li>
            <li>术语对照</li>
          </ul>
        </a>
      </div>

      <div class="cat-dims">
        <p class="cat-dims__title">四个维度 · 可任意组合</p>
        <div class="cat-dims__grid">
          <div class="cat-dim">
            <p class="cat-dim__name">关键词</p>
            <p class="cat-dim__text">球员名、球队名、规则术语直接输进去，命中的场次与条目一起列出。</p>
          </div>
          <div class="cat-dim">
            <p class="cat-dim__name">联赛</p>
            <p class="cat-dim__text">把范围收到你固定关注的那一个联赛，或跨联赛对照同一名球员的表现。</p>
          </div>
          <div class="cat-dim">
            <p class="cat-dim__name">轮次</p>
            <p class="cat-dim__text">从第 1 轮切到第 38 轮，赛程与专题里的对应阶段跟着一起变。</p>
          </div>
          <div class="cat-dim">
            <p class="cat-dim__name">球员位置</p>
            <p class="cat-dim__text">按后卫、前锋、中锋圈人，同位置放一起才看得出手感差异。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="cat-body" aria-label="模块详解">
    <div class="wrap cat-body__inner">
      <aside class="cat-rail" aria-label="模块快速跳转">
        <p class="cat-rail__title">模块</p>
        <ul class="cat-rail__list">
          <li><a class="cat-rail__link" href="#schedule">01 赛程查询</a></li>
          <li><a class="cat-rail__link" href="#players">02 球员数据</a></li>
          <li><a class="cat-rail__link" href="#topics">03 联赛专题</a></li>
          <li><a class="cat-rail__link" href="#rules">04 规则速查</a></li>
          <li><a class="cat-rail__link" href="#sync">05 跨设备续查</a></li>
          <li><a class="cat-rail__link" href="#steps">06 上手流程</a></li>
        </ul>
      </aside>

      <div class="cat-modules">
        <article id="schedule" class="mod">
          <p class="mod__index num">01 / 赛程查询</p>
          <h2 class="mod__title">先定轮次，再看这一轮都有谁打</h2>
          <p class="mod__lead">
            用安博体育iOS版查联赛赛程，轮次条就压在列表上方：手指从第 1 轮划到第 38 轮，停在哪儿就显示哪一轮的全部场次，看完一轮接着划下一轮。
          </p>
          <div class="mod__split">
            <div class="mod__col">
              <div class="tickbar">
                <div class="tickbar__scale" role="img" aria-label="联赛轮次刻度示意，共 38 轮，当前停在示意位置">
                  <span class="tickbar__knob" aria-hidden="true"></span>
                </div>
                <span class="tickbar__now">示意位置 · 第 21 轮</span>
                <div class="tickbar__ends">
                  <span>第 1 轮</span>
                  <span>第 38 轮</span>
                </div>
              </div>
              <ul class="mod-facts">
                <li><strong>单轮最多 10 场</strong>，对阵双方、开球时间与场馆名称并排写着，扫一眼就知道今晚看哪场。</li>
                <li><strong>比分 30 分钟内更新</strong>，比赛日刷一轮，不会看到滞后几小时的旧分数。</li>
                <li><strong>技术统计赛后 2 小时补齐</strong>，看完比分顺手就能查这场谁的数据最突出。</li>
                <li><strong>收藏球队之后</strong>，下次进来默认停在这支球队所在的轮次附近。</li>
              </ul>
            </div>
            <figure class="cat-shot cat-shot--tall">
              <img src="{zhanqunpic:h:900w:720}" width="720" height="900" alt="手机上的联赛赛程页面，顶部是连续的轮次刻度，下方依次列出对阵双方、开球时间与场馆" loading="lazy" decoding="async">
              <figcaption class="media__caption">轮次条常驻顶部，左右滑动切换，列表随之刷新。</figcaption>
            </figure>
          </div>
        </article>

        <article id="players" class="mod">
          <p class="mod__index num">02 / 球员数据</p>
          <h2 class="mod__title">26 项字段，够你把两个人摆在一起比</h2>
          <figure class="cat-shot cat-shot--wide">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="密集的数字表格与半透明横向数据条叠加，表现球员字段的排列密度" loading="lazy" decoding="async">
            <figcaption class="media__caption">字段按数值对齐，同一列上下对比不用先换算。</figcaption>
          </figure>
          <p class="mod__lead">
            当季球员数据查询板块把 26 项字段分成四组。先按联赛和位置圈人，再展开你关心的那一组，两名同位置球员放进同一屏，差别一眼可见。
          </p>

          <div class="fields">
            <details class="fields__group" open>
              <summary class="fields__sum">
                <span class="fields__k">出场与时间</span>
                <span class="fields__n num">6 项</span>
              </summary>
              <ul class="fields__list">
                <li>出场次数</li>
                <li>首发次数</li>
                <li>场均出场时间</li>
                <li>赛季总出场时间</li>
                <li>出场率</li>
                <li>背靠背出场</li>
              </ul>
            </details>

            <details class="fields__group" open>
              <summary class="fields__sum">
                <span class="fields__k">得分与投射</span>
                <span class="fields__n num">8 项</span>
              </summary>
              <ul class="fields__list">
                <li>场均得分</li>
                <li>赛季总得分</li>
                <li>投篮命中数</li>
                <li>投篮出手数</li>
                <li>投篮命中率</li>
                <li>三分命中率</li>
                <li>罚球命中率</li>
                <li>真实命中率</li>
              </ul>
            </details>

            <details class="fields__group" open>
              <summary class="fields__sum">
                <span class="fields__k">篮板与助攻</span>
                <span class="fields__n num">6 项</span>
              </summary>
              <ul class="fields__list">
                <li>场均篮板</li>
                <li>前场篮板</li>
                <li>后场篮板</li>
                <li>场均助攻</li>
                <li>助攻率</li>
                <li>失误数</li>
              </ul>
            </details>

            <details class="fields__group" open>
              <summary class="fields__sum">
                <span class="fields__k">效率与进阶</span>
                <span class="fields__n num">6 项</span>
              </summary>
              <ul class="fields__list">
                <li>效率值</li>
                <li>使用率</li>
                <li>抢断</li>
                <li>盖帽</li>
                <li>正负值</li>
                <li>两双次数</li>
              </ul>
            </details>
          </div>
          <p class="mod__note">常规赛与季后赛分开统计。同一名球员在两个阶段的数据各算各的，专题里切换阶段，页面上数值跟着换。</p>
        </article>

        <article id="topics" class="mod">
          <p class="mod__index num">03 / 联赛专题</p>
          <h2 class="mod__title">一轮打完，专题把数字写成一段有前因后果的话</h2>
          <div class="mod__split mod__split--rev">
            <figure class="cat-shot cat-shot--sq">
              <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="联赛标签簇与球员卡片交错排列的界面示意，呈现专题内的检索层级" loading="lazy" decoding="async">
              <figcaption class="media__caption">专题内先选联赛，再按阶段看球员表现。</figcaption>
            </figure>
            <div class="mod__col">
              <p class="mod__lead">
                站内共 12 个联赛专题，覆盖常规赛与季后赛两个阶段。做联赛专题球员数据查询时，从联赛入口进去，先读当轮复盘，再顺着文末的入口回到对应数据模块，把文字里的判断落到具体数字上。
              </p>
              <ul class="mod-facts">
                <li><strong>三个系列并行</strong>：联赛专题、规则说明与数据复盘，按你关心的角度各取所需。</li>
                <li><strong>每周更新 3 至 5 篇</strong>，赛季期间保持这个节奏，当轮内容赛后很快就能读到。</li>
                <li><strong>每篇结尾都有二次入口</strong>，写到哪名球员，就能直接跳去他的字段表。</li>
              </ul>
              <p class="mod__more"><a class="btn btn--ghost" href="/topics/">进入专题中心</a></p>
            </div>
          </div>
        </article>

        <article id="rules" class="mod">
          <p class="mod__index num">04 / 规则速查</p>
          <h2 class="mod__title">48 条条文，按比赛发生的顺序排好</h2>
          <p class="mod__lead">
            华人体育规则说明专题收录 48 条规则条目，分比赛流程、判罚尺度、场地器材三类。看球时遇到说不清的那一下，从比赛进行到哪一步入手，比漫无目的翻目录快得多。
          </p>
          <figure class="cat-shot cat-shot--sq">
            <img src="{zhanqunpic:h:480w:720}" width="720" height="480" alt="三块并列的规则示意图形，分别对应比赛流程、判罚尺度与场地器材" loading="lazy" decoding="async">
            <figcaption class="media__caption">三类条目共用一个检索框，输入术语即可定位。</figcaption>
          </figure>
          <div class="rules">
            <div class="rule-card">
              <span class="rule-card__no num">01</span>
              <h3 class="rule-card__title">比赛流程</h3>
              <p class="rule-card__text">从跳球、节次与加时，到暂停次数与换人时机，按时间线排列，刚接触这项运动的人可以照着顺一遍。</p>
              <p class="rule-card__tags"><span>开球与节次</span><span>暂停</span><span>换人</span></p>
            </div>
            <div class="rule-card">
              <span class="rule-card__no num">02</span>
              <h3 class="rule-card__title">判罚尺度</h3>
              <p class="rule-card__text">犯规类型、技术犯规与录像回看的适用情形写成短条目，每条讲清什么动作、怎么判、后果是什么。</p>
              <p class="rule-card__tags"><span>犯规类型</span><span>回看</span><span>罚则</span></p>
            </div>
            <div class="rule-card">
              <span class="rule-card__no num">03</span>
              <h3 class="rule-card__title">场地器材</h3>
              <p class="rule-card__text">场地尺寸、三分线距离与用球规格等硬件条目集中放置，写稿或带孩子练球时可以直接取数。</p>
              <p class="rule-card__tags"><span>场地尺寸</span><span>球与篮架</span><span>标识</span></p>
            </div>
          </div>
        </article>

        <article id="sync" class="mod">
          <p class="mod__index num">05 / 跨设备续查</p>
          <h2 class="mod__title">白天在电脑上存的，晚上在手机上接着看</h2>
          <p class="mod__lead">
            收藏的专题、常看的联赛和最近几次检索记录都跟着账号走。家里那台电脑查到一半的对阵，换到办公室那台，登录后仍能接着查。
          </p>
          <ul class="mod-facts">
            <li><strong>收藏同步</strong>：专题文章、联赛专题页与常看球队，换台设备登录就能调出同一份列表。</li>
            <li><strong>检索记录同步</strong>：最近几次的组合条件留着，回来时不用重新勾那四个维度。</li>
            <li><strong>电脑端有常驻入口</strong>：首页右侧的帮助中心随时可以展开，遇到操作问题不用离开当前页。</li>
          </ul>
          <figure class="cat-shot cat-shot--wide">
            <img src="{zhanqunpic:h:560w:1000}" width="1000" height="560" alt="桌面与手机两端呈现同一份收藏列表的示意画面，表现账号内的同步效果" loading="lazy" decoding="async">
            <figcaption class="media__caption">同一账号下的收藏与最近检索，在多台设备上保持一致。</figcaption>
          </figure>
        </article>

        <article id="steps" class="mod">
          <p class="mod__index num">06 / 上手流程</p>
          <h2 class="mod__title">从打开检索到收藏一个专题，四步走完</h2>
          <ol class="steps">
            <li class="step">
              <span class="step__no num">01</span>
              <h3>定条件</h3>
              <p>先输关键词，或者直接勾联赛、轮次与位置，命中数量即时显示。</p>
            </li>
            <li class="step">
              <span class="step__no num">02</span>
              <h3>看结果</h3>
              <p>赛程按轮次成组列出，球员按字段表铺开，规则按类别排序，各取所需。</p>
            </li>
            <li class="step">
              <span class="step__no num">03</span>
              <h3>进专题</h3>
              <p>想弄清数字背后的原因，从结果里挑一篇同联赛的复盘读下去。</p>
            </li>
            <li class="step">
              <span class="step__no num">04</span>
              <h3>收藏留存</h3>
              <p>把常看的那一页收进账号，下次登录直接在列表里点开。</p>
            </li>
          </ol>
        </article>
      </div>
    </div>
  </section>

  <section class="cat-cta" aria-label="延伸入口">
    <div class="wrap">
      <div class="cat-cta__box">
        <div>
          <h2 class="cat-cta__title">还没想好先从哪一块查起？</h2>
          <p class="cat-cta__text">去帮助中心看看别人常卡在哪一步，或者把你要查的比赛、球员、条文写给我们，客服会告诉你走哪条路更快。想了解这套数据看台是怎么一路做起来的，可以翻品牌文化。</p>
        </div>
        <div class="cat-cta__links">
          <a class="btn btn--primary" href="/faqs/">查看帮助中心</a>
          <a class="btn btn--ghost" href="/contact-us/">联系客服</a>
          <a class="btn btn--paper" href="/culture/">品牌文化</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pf-rail: 208px;
  --pf-hair: 1px solid rgba(43, 245, 200, 0.18);
  --pf-hair-strong: 1px solid rgba(43, 245, 200, 0.32);
  --pf-hair-ink: 1px solid rgba(27, 34, 31, 0.14);
  background: var(--ink-950);
  color: var(--cyan-200);
  font-family: var(--font-body);
}

.page-products a {
  color: inherit;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(166, 255, 232, 0.62);
}

.page-products .breadcrumb__list li + li::before {
  content: "/";
  margin: 0 8px;
  color: rgba(43, 245, 200, 0.42);
}

.page-products .breadcrumb__list a {
  color: var(--cyan-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 245, 200, 0.4);
}

.page-products .breadcrumb__list a:hover,
.page-products .breadcrumb__list a:focus-visible {
  color: var(--cyan-400);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  padding: 16px 0 42px;
  background:
    radial-gradient(120% 92% at 90% 0%, rgba(43, 245, 200, 0.15), transparent 62%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border-bottom: 1px solid rgba(43, 245, 200, 0.16);
}

.page-products .cat-hero__grid {
  display: grid;
  gap: 26px;
  padding-top: 22px;
}

.page-products .cat-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 7.6vw, 58px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.page-products .cat-hero__intro {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.86);
}

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

.page-products .cat-hero .eyebrow {
  color: var(--cyan-400);
}

.page-products .cat-hero__stats {
  padding: 18px;
  border-radius: var(--r-md);
}

.page-products .cat-hero__stats-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(166, 255, 232, 0.66);
}

.page-products .cat-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(43, 245, 200, 0.16);
  border: 1px solid rgba(43, 245, 200, 0.18);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.page-products .cat-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  background: rgba(4, 21, 15, 0.74);
}

.page-products .cat-stats__item .stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cyan-400);
}

.page-products .cat-stats__item .stat__label {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(166, 255, 232, 0.72);
}

.page-products .cat-hero__stats-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(166, 255, 232, 0.62);
}

/* ---------- 目录总览 ---------- */
.page-products .cat-map {
  padding: 40px 0 46px;
  background: var(--paper);
  color: var(--carbon-900);
  border-bottom: var(--pf-hair-ink);
}

.page-products .cat-map .eyebrow {
  color: var(--ink-700);
}

.page-products .cat-map .section-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5.2vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.page-products .cat-map__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(27, 34, 31, 0.78);
}

.page-products .cat-map__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.page-products .map-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fff;
  border: var(--pf-hair-ink);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}

.page-products .map-card--a {
  grid-column: 1 / -1;
}

.page-products .map-card:hover,
.page-products .map-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ink-700);
}

.page-products .map-card__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mist-500);
}

.page-products .map-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-950);
}

.page-products .map-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(27, 34, 31, 0.76);
}

.page-products .map-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: auto 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px dashed rgba(27, 34, 31, 0.2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
}

.page-products .map-card--a {
  background: linear-gradient(155deg, var(--ink-900), var(--ink-700));
  border-color: rgba(43, 245, 200, 0.32);
}

.page-products .map-card--a .map-card__no {
  color: var(--cyan-400);
}

.page-products .map-card--a .map-card__title {
  color: var(--paper);
}

.page-products .map-card--a .map-card__text {
  color: rgba(166, 255, 232, 0.82);
}

.page-products .map-card--a .map-card__meta {
  color: var(--cyan-200);
  border-top-color: rgba(43, 245, 200, 0.3);
}

.page-products .cat-dims {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed rgba(27, 34, 31, 0.24);
}

.page-products .cat-dims__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.page-products .cat-dims__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.page-products .cat-dim {
  padding-left: 12px;
  border-left: 2px solid var(--ink-700);
}

.page-products .cat-dim__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--carbon-900);
}

.page-products .cat-dim__text {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: rgba(27, 34, 31, 0.74);
}

/* ---------- 模块主体 ---------- */
.page-products .cat-body {
  padding: 34px 0 50px;
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 48%, var(--ink-950) 100%);
}

.page-products .cat-body__inner {
  display: grid;
  gap: 24px;
}

.page-products .cat-rail__title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(166, 255, 232, 0.6);
}

.page-products .cat-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .cat-rail__link {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  border: var(--pf-hair);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--cyan-200);
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-products .cat-rail__link:hover,
.page-products .cat-rail__link:focus-visible {
  background: rgba(43, 245, 200, 0.13);
  border-color: rgba(43, 245, 200, 0.5);
  color: var(--cyan-400);
}

.page-products .mod {
  padding: 26px 0;
  border-top: var(--pf-hair);
  scroll-margin-top: 92px;
}

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

.page-products .mod__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--yellow-400);
}

.page-products .mod__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 5.2vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-products .mod__lead {
  margin: 12px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: rgba(166, 255, 232, 0.85);
}

.page-products .mod__note {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 210, 74, 0.6);
  font-size: 13px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.7);
}

.page-products .mod__more {
  margin: 18px 0 0;
}

.page-products .mod__split {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.page-products .mod__col {
  min-width: 0;
}

/* ---------- 图片框 ---------- */
.page-products .cat-shot {
  margin: 0;
  border: var(--pf-hair-strong);
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  background: rgba(12, 66, 52, 0.45);
}

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

.page-products .cat-shot--tall img {
  aspect-ratio: 4 / 5;
}

.page-products .cat-shot--wide img {
  aspect-ratio: 2 / 1;
}

.page-products .cat-shot--sq img {
  aspect-ratio: 4 / 3;
}

.page-products .media__caption {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(166, 255, 232, 0.7);
  border-top: 1px solid rgba(43, 245, 200, 0.16);
}

/* ---------- 轮次刻度条 ---------- */
.page-products .tickbar {
  position: relative;
  margin: 18px 0 4px;
  padding-bottom: 30px;
}

.page-products .tickbar__scale {
  position: relative;
  height: 32px;
  border: 1px solid rgba(43, 245, 200, 0.24);
  border-radius: var(--r-sm);
  background-color: rgba(12, 66, 52, 0.62);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(43, 245, 200, 0.42) 0,
    rgba(43, 245, 200, 0.42) 1px,
    transparent 1px,
    transparent 2.632%
  );
  overflow: hidden;
}

.page-products .tickbar__knob {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 53%;
  width: 2px;
  background: var(--yellow-400);
  box-shadow: 0 0 0 1px rgba(4, 21, 15, 0.6);
}

.page-products .tickbar__now {
  position: absolute;
  left: 53%;
  bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--yellow-400);
}

.page-products .tickbar__ends {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(166, 255, 232, 0.66);
}

/* ---------- 要点列表 ---------- */
.page-products .mod-facts {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .mod-facts li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.83);
}

.page-products .mod-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 2px;
  background: var(--cyan-400);
}

.page-products .mod-facts strong {
  font-weight: 700;
  color: var(--paper);
}

/* ---------- 字段表 ---------- */
.page-products .fields {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.page-products .fields__group {
  border: var(--pf-hair);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.46);
}

.page-products .fields__sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
}

.page-products .fields__sum::-webkit-details-marker {
  display: none;
}

.page-products .fields__k {
  flex: 1 1 auto;
}

.page-products .fields__n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--yellow-400);
}

.page-products .fields__sum::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform 180ms var(--ease);
}

.page-products .fields__group[open] .fields__sum::after {
  transform: rotate(-135deg);
}

.page-products .fields__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
  border-top: 1px solid rgba(43, 245, 200, 0.16);
}

.page-products .fields__list li {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: rgba(4, 21, 15, 0.58);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cyan-200);
  transition: background 160ms var(--ease);
}

.page-products .fields__list li:hover {
  background: rgba(43, 245, 200, 0.16);
}

/* ---------- 规则三分类 ---------- */
.page-products .rules {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.page-products .rule-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: var(--pf-hair);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.42);
}

.page-products .rule-card__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-400);
}

.page-products .rule-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-products .rule-card__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.8);
}

.page-products .rule-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(43, 245, 200, 0.22);
}

.page-products .rule-card__tags span {
  padding: 3px 8px;
  border: 1px solid rgba(43, 245, 200, 0.3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan-200);
}

/* ---------- 上手流程 ---------- */
.page-products .steps {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--cyan-400);
}

.page-products .step__no {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--cyan-400);
}

.page-products .step h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
}

.page-products .step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(166, 255, 232, 0.8);
}

/* ---------- 尾部入口 ---------- */
.page-products .cat-cta {
  padding: 0 0 54px;
  background: var(--ink-950);
}

.page-products .cat-cta__box {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: var(--pf-hair-strong);
  border-radius: var(--r-md);
  background: rgba(12, 66, 52, 0.4);
}

.page-products .cat-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 4.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-products .cat-cta__text {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(166, 255, 232, 0.82);
}

.page-products .cat-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 720px) {
  .page-products .cat-hero {
    padding: 20px 0 56px;
  }

  .page-products .cat-map {
    padding: 52px 0 58px;
  }

  .page-products .cat-map__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-products .map-card--a {
    grid-column: span 4;
  }

  .page-products .map-card--b,
  .page-products .map-card--c {
    grid-column: span 3;
  }

  .page-products .map-card--d {
    grid-column: span 6;
  }

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

  .page-products .mod__split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 26px;
  }

  .page-products .mod__split--rev {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  }

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

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

  .page-products .cat-cta__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 26px;
  }
}

@media (min-width: 900px) {
  .page-products .cat-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    padding-top: 30px;
  }

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

@media (min-width: 960px) {
  .page-products .cat-body {
    padding: 44px 0 60px;
  }

  .page-products .cat-body__inner {
    grid-template-columns: var(--pf-rail) minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .cat-rail {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .page-products .cat-rail__list {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    gap: 0;
  }

  .page-products .cat-rail__link {
    padding: 10px 0 10px 14px;
    border: 0;
    border-left: 2px solid rgba(43, 245, 200, 0.22);
    border-radius: 0;
  }

  .page-products .cat-rail__link:hover,
  .page-products .cat-rail__link:focus-visible {
    border-left-color: var(--cyan-400);
    background: rgba(43, 245, 200, 0.07);
  }

  .page-products .mod {
    padding: 34px 0;
  }

  .page-products .mod__split {
    gap: 34px;
  }
}