.page-products {
  --pr-cut: 18px;
  --pr-line: 1px solid var(--rock);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products .pr-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 6vw, 52px) 0 clamp(40px, 7vw, 84px);
  border-bottom: 1px solid var(--rock);
}

.page-products .pr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.page-products .pr-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

.page-products .pr-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.62), rgba(11, 13, 15, 0.94) 58%, var(--ink));
}

.page-products .pr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.page-products .pr-crumbs a {
  color: var(--steel);
  text-decoration: none;
}

.page-products .pr-crumbs a:hover,
.page-products .pr-crumbs a:focus-visible {
  color: var(--lava);
}

.page-products .pr-hero__head {
  max-width: 60ch;
  margin: clamp(20px, 4vw, 36px) 0 clamp(28px, 4vw, 44px);
}

.page-products .pr-hero h1 {
  margin: 0.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.page-products .pr-hero__lede {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.8;
  color: var(--text-soft);
}

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

.page-products .pr-console-grid {
  display: grid;
  gap: 18px;
}

.page-products .pr-panel {
  position: relative;
  background: var(--ink-2);
  border: var(--pr-line);
  padding: 18px 16px;
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
}

.page-products .pr-console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.page-products .pr-console__head .panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-products .pr-console__lamp {
  width: 8px;
  height: 8px;
  background: var(--lava);
  transform: rotate(45deg);
}

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

.page-products .pr-console__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(42, 49, 54, 0.95);
}

.page-products .pr-console__row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.page-products .pr-console__k {
  font-size: 0.86rem;
  color: var(--steel);
}

.page-products .pr-console__v {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--signal);
  white-space: nowrap;
}

.page-products .pr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--moss);
}

.page-products .pr-dot--live {
  background: var(--lava);
}

.page-products .pr-device {
  margin: 0;
  position: relative;
}

.page-products .pr-device img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: var(--pr-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .pr-device__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.page-products .pr-version__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--clay);
}

.page-products .pr-version__num {
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 3.4rem);
  line-height: 1;
  color: var(--signal);
}

.page-products .pr-version__date {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.page-products .pr-version__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .pr-version__list li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-soft);
  border-top: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-version__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  background: var(--lava);
}

.page-products .pr-version__go {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--lava);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 90, 31, 0.5);
  padding-bottom: 2px;
}

.page-products .pr-version__go:hover,
.page-products .pr-version__go:focus-visible {
  color: var(--signal);
  border-color: var(--signal);
}

.page-products .pr-sec {
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid rgba(42, 49, 54, 0.7);
}

.page-products .pr-sec--alt {
  background: var(--ink-2);
}

.page-products .pr-sec__head {
  max-width: 60ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-products .pr-sec__head h2 {
  margin: 0.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.page-products .pr-sec__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-soft);
}

.page-products .pr-split,
.page-products .pr-matchup,
.page-products .pr-pickup-grid {
  display: grid;
  gap: clamp(20px, 4vw, 34px);
}

.page-products .pr-figure {
  margin: 0;
}

.page-products .pr-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: var(--pr-line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.page-products .pr-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.page-products .pr-metrics {
  display: grid;
  gap: 2px;
}

.page-products .pr-metric {
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--rock);
}

.page-products .pr-metric:nth-child(odd) {
  border-left-color: var(--lava);
}

.page-products .pr-metric__k {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--bone);
  margin-bottom: 4px;
}

.page-products .pr-metric p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-tiles {
  display: grid;
  gap: 14px;
}

.page-products .pr-tile {
  background: var(--ink);
  border: var(--pr-line);
  padding: 16px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pr-cut) 100%, 0 calc(100% - var(--pr-cut)));
}

.page-products .pr-tile h3 {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.page-products .pr-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  margin-top: 12px;
}

.page-products .pr-bars span {
  flex: 1;
  height: var(--h, 50%);
  background: var(--steel);
}

.page-products .pr-bars span:nth-child(5),
.page-products .pr-bars span:nth-child(4) {
  background: var(--signal);
}

.page-products .pr-mobile-grid {
  display: grid;
  gap: clamp(26px, 5vw, 44px);
}

.page-products .pr-phone {
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 10px;
  border-radius: 32px;
  background: linear-gradient(155deg, var(--rock), var(--ink));
  border: 1px solid var(--rock);
}

.page-products .pr-phone__screen {
  display: grid;
  gap: 4px;
  padding: 16px 14px 18px;
  border-radius: 24px;
  background: var(--ink-2);
}

.page-products .pr-phone__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-products .pr-phone__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-phone__round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.page-products .pr-phone__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.page-products .pr-phone__tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--signal);
  background: rgba(255, 210, 63, 0.13);
}

.page-products .pr-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.page-products .pr-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-feature:last-child {
  border-bottom: 0;
}

.page-products .pr-feature__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clay);
  padding-top: 3px;
}

.page-products .pr-feature h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.page-products .pr-feature p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--text-soft);
}

.page-products .pr-pickup-side {
  display: grid;
  gap: 18px;
}

.page-products .pr-filter {
  background: var(--ink);
  border: var(--pr-line);
  padding: 18px 16px;
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
}

.page-products .pr-filter__row {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(42, 49, 54, 0.95);
}

.page-products .pr-filter__row:first-child {
  padding-top: 0;
}

.page-products .pr-filter__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .pr-filter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--clay);
}

.page-products .pr-filter__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .pr-opt {
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-soft);
  border: 1px solid var(--rock);
}

.page-products .pr-pack {
  padding: 18px 16px;
  background: rgba(255, 90, 31, 0.08);
  border-left: 3px solid var(--lava);
}

.page-products .pr-pack h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.page-products .pr-pack p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.page-products .pr-pack__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

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

.page-products .pr-timeline__item {
  position: relative;
  padding: 16px 16px 18px;
  background: var(--ink-2);
  border: var(--pr-line);
  border-top: 3px solid var(--rock);
}

.page-products .pr-timeline__item:nth-child(3) {
  border-top-color: var(--lava);
}

.page-products .pr-timeline__year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal);
  line-height: 1;
}

.page-products .pr-timeline__item h3 {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.page-products .pr-timeline__item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-get {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 5vw, 48px);
  padding: clamp(20px, 4vw, 34px);
  background: var(--ink-2);
  border: var(--pr-line);
  border-left: 4px solid var(--lava);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pr-cut)), calc(100% - var(--pr-cut)) 100%, 0 100%);
}

.page-products .pr-get h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.page-products .pr-get p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

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

@media (min-width: 720px) {
  .page-products .pr-console-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .page-products .pr-version {
    grid-column: 1 / -1;
  }

  .page-products .pr-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
  }

  .page-products .pr-tiles {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 900px) {
  .page-products .pr-console-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr) minmax(0, 0.62fr);
  }

  .page-products .pr-version {
    grid-column: auto;
  }

  .page-products .pr-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }

  .page-products .pr-matchup {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-products .pr-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .page-products .pr-tile:nth-child(even) {
    margin-top: 26px;
  }

  .page-products .pr-mobile-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }

  .page-products .pr-pickup-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }

  .page-products .pr-get {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: center;
  }

  .page-products .pr-get__actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products * {
    transition: none !important;
    animation: none !important;
  }
}


<main id="main-content" class="page-products">
  <section class="pr-hero" aria-labelledby="pr-hero-title">
    <div class="pr-hero__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光与看台光斑，低角度仰拍">
    </div>
    <div class="shell">
      <nav class="pr-crumbs" aria-label="页面路径">
        <a href="/">赛场总览</a>
        <span aria-hidden="true">/</span>
        <span>业务与移动端</span>
      </nav>

      <div class="pr-hero__head" data-reveal>
        <p class="eyebrow">业务控制台 · 2024 升级</p>
        <h1 id="pr-hero-title">从临时查分到赛后复盘，一套工具接得住</h1>
        <p class="pr-hero__lede">火博体育站把战绩查询、球队对照和赛后内容放在同一块屏幕上。坐在电脑前，临时确认联赛排名和对手近况；人在场边，打开移动端 v3.2 按比赛日翻集锦与复盘。终场后十分钟内，比分和赛果就会出现在你眼前。</p>
        <div class="pr-hero__cta">
          <a class="btn btn--primary" href="#mobile">看移动端 v3.2</a>
          <a class="btn btn--ghost" href="#desktop">电脑端怎么查</a>
        </div>
      </div>

      <div class="pr-console-grid">
        <div class="pr-panel pr-console" data-reveal>
          <div class="panel__head pr-console__head">
            <span class="pr-console__lamp" aria-hidden="true"></span>
            <h2 class="panel__title">功能状态</h2>
          </div>
          <ul class="pr-console__list">
            <li class="pr-console__row">
              <span class="pr-console__k">赛果补齐</span>
              <span class="pr-console__v">10 分钟内</span>
              <span class="pr-dot pr-dot--live" aria-hidden="true"></span>
            </li>
            <li class="pr-console__row">
              <span class="pr-console__k">覆盖赛事</span>
              <span class="pr-console__v">12 个联赛与杯赛</span>
              <span class="pr-dot" aria-hidden="true"></span>
            </li>
            <li class="pr-console__row">
              <span class="pr-console__k">球队对照档案</span>
              <span class="pr-console__v">36 支</span>
              <span class="pr-dot" aria-hidden="true"></span>
            </li>
            <li class="pr-console__row">
              <span class="pr-console__k">赛后复盘条目</span>
              <span class="pr-console__v">4,200+ 场</span>
              <span class="pr-dot" aria-hidden="true"></span>
            </li>
            <li class="pr-console__row">
              <span class="pr-console__k">每月更新赛事</span>
              <span class="pr-console__v">约 180 场</span>
              <span class="pr-dot" aria-hidden="true"></span>
            </li>
          </ul>
        </div>

        <figure class="pr-device" data-reveal>
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手持手机查看比赛日列表的特写，屏幕内容为抽象化排布">
          <figcaption class="pr-device__cap">比赛日目录按天排开，点开就是集锦与复盘</figcaption>
        </figure>

        <aside class="pr-panel pr-version" data-reveal aria-labelledby="pr-version-title">
          <p class="pr-version__label" id="pr-version-title">当前版本</p>
          <p class="pr-version__num">v3.2</p>
          <p class="pr-version__date">2024 年上线</p>
          <ul class="pr-version__list">
            <li>比赛日目录按天排列</li>
            <li>集锦续播与离线赛果缓存</li>
            <li>开赛与比分变化提醒</li>
          </ul>
          <a class="pr-version__go" href="/faqs/">使用问题看这里</a>
        </aside>
      </div>
    </div>
  </section>

  <section class="pr-sec" id="desktop" aria-labelledby="pr-desktop-title">
    <div class="shell">
      <div class="pr-sec__head" data-reveal>
        <p class="eyebrow">01 / 电脑端战绩查询</p>
        <h2 id="pr-desktop-title">临时查数，开浏览器比开应用更快</h2>
        <p class="pr-sec__lede">联赛排名、积分和近期走势在电脑端刷新得更勤。想确认今晚对手排第几、最近五轮赢了几场，输入球队名就能看到一屏结论，不用等手机端同步完成。</p>
      </div>

      <div class="pr-split" data-reveal>
        <figure class="pr-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暗色数据屏幕上的抽象比分条与排名网格" loading="lazy" decoding="async">
          <figcaption>积分、胜负场与净胜分并排显示，名次变化一眼看得出来</figcaption>
        </figure>

        <div class="pr-metrics">
          <div class="pr-metric">
            <span class="pr-metric__k">积分</span>
            <p>胜平负换算后的即时排名依据，与联赛当前轮次同步。</p>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__k">胜负场</span>
            <p>主客场分开计数，看球队是在家门口稳，还是在客场掉分。</p>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__k">净胜分</span>
            <p>同分时决定名次先后的关键项，进攻与防守两端都算进去。</p>
          </div>
          <div class="pr-metric">
            <span class="pr-metric__k">近期走势</span>
            <p>最近几轮结果连成一条线，状态在升还是在落，不用自己回忆。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-sec pr-sec--alt" id="matchup" aria-labelledby="pr-matchup-title">
    <div class="shell">
      <div class="pr-sec__head" data-reveal>
        <p class="eyebrow">02 / 球队对照</p>
        <h2 id="pr-matchup-title">两支球队摆在一起看，赛前判断才有依据</h2>
        <p class="pr-sec__lede">只看总战绩容易看走眼。主客场的落差、近五场的手感、过往交手的心理优势，摊开到同一张工作台上，你和队员讨论时才有共同语言。</p>
      </div>

      <div class="pr-matchup" data-reveal>
        <figure class="pr-figure pr-figure--tall">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="战术板磁贴与箭头标记特写，局部裁切" loading="lazy" decoding="async">
          <figcaption>把对照结果摊成磁贴，讨论时随手一指就能说清</figcaption>
        </figure>

        <div class="pr-tiles">
          <article class="pr-tile">
            <span class="index-num">A</span>
            <h3>主客场拆分</h3>
            <p>同一支队伍在主客场的得失分差异单列，出门打硬仗前先看清底气。</p>
          </article>
          <article class="pr-tile">
            <span class="index-num">B</span>
            <h3>近五场走势</h3>
            <p>五场结果按时间连成走势条，连胜与连败的拐点标出来。</p>
            <div class="pr-bars" aria-hidden="true">
              <span style="--h:42%"></span>
              <span style="--h:64%"></span>
              <span style="--h:38%"></span>
              <span style="--h:78%"></span>
              <span style="--h:92%"></span>
            </div>
          </article>
          <article class="pr-tile">
            <span class="index-num">C</span>
            <h3>交锋记录</h3>
            <p>两队近年的对位结果并排呈现，谁在主场更占便宜一清二楚。</p>
          </article>
          <article class="pr-tile">
            <span class="index-num">D</span>
            <h3>伤停与阵容索引</h3>
            <p>缺阵位置和轮换深浅做索引，帮你判断一场比赛的胜负会在哪一端倾斜。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-sec" id="mobile" aria-labelledby="pr-mobile-title">
    <div class="shell">
      <div class="pr-sec__head" data-reveal>
        <p class="eyebrow">03 / 移动端 v3.2</p>
        <h2 id="pr-mobile-title">手机里按比赛日往下翻，集锦接着上次看</h2>
        <p class="pr-sec__lede">下班路上、看台边上，一只手就能翻完一整轮。移动端 v3.2 把内容目录按比赛日排好，赛果、集锦和复盘收在同一屏里，不用来回跳页面。</p>
      </div>

      <div class="pr-mobile-grid" data-reveal>
        <div class="pr-phone" role="img" aria-label="移动端 v3.2 比赛日目录界面示意">
          <div class="pr-phone__screen">
            <div class="pr-phone__bar">
              <span>比赛日目录</span>
              <span>v3.2</span>
            </div>
            <div class="pr-phone__item">
              <span class="pr-phone__round">第 18 轮 · 周六</span>
              <span class="pr-phone__tag">集锦</span>
              <span class="pr-phone__meta">3 场 · 已结束</span>
            </div>
            <div class="pr-phone__item">
              <span class="pr-phone__round">第 18 轮 · 周日</span>
              <span class="pr-phone__tag">复盘</span>
              <span class="pr-phone__meta">5 场 · 已结束</span>
            </div>
            <div class="pr-phone__item">
              <span class="pr-phone__round">杯赛 · 周三</span>
              <span class="pr-phone__tag">赛果</span>
              <span class="pr-phone__meta">2 场 · 进行中</span>
            </div>
            <div class="pr-phone__item">
              <span class="pr-phone__round">第 19 轮 · 周六</span>
              <span class="pr-phone__tag">提醒</span>
              <span class="pr-phone__meta">4 场 · 待开赛</span>
            </div>
          </div>
        </div>

        <ul class="pr-features">
          <li class="pr-feature">
            <span class="pr-feature__num">01</span>
            <div>
              <h3>目录按比赛日排列</h3>
              <p>一天的赛果、集锦和复盘收在一处，往下滑就是前一个比赛日，找内容不用搜索。</p>
            </div>
          </li>
          <li class="pr-feature">
            <span class="pr-feature__num">02</span>
            <div>
              <h3>集锦续播</h3>
              <p>看到一半退出，下次点开从断点继续，通勤路上分几段也能看完。</p>
            </div>
          </li>
          <li class="pr-feature">
            <span class="pr-feature__num">03</span>
            <div>
              <h3>离线赛果缓存</h3>
              <p>地铁里没信号，最近翻过的比分依然能调出来，和球友争两句不落下风。</p>
            </div>
          </li>
          <li class="pr-feature">
            <span class="pr-feature__num">04</span>
            <div>
              <h3>开赛与比分提醒</h3>
              <p>关注的对阵在开赛前给你一声提示，比分变化也会及时推过来。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="pr-sec pr-sec--alt" id="pickup" aria-labelledby="pr-pickup-title">
    <div class="shell">
      <div class="pr-sec__head" data-reveal>
        <p class="eyebrow">04 / 约球看赛</p>
        <h2 id="pr-pickup-title">缺人、缺对手、缺一场好球，都能在这里凑齐</h2>
        <p class="pr-sec__lede">约球最怕问到第五个人还没定场地。按场地、时间和水平三层条件收窄，合适的球队和空场很快就浮出来；赛后要发战报，内容包也一并给你。</p>
      </div>

      <div class="pr-pickup-grid" data-reveal>
        <figure class="pr-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="观众席局部与手持围巾的剪影，暖光氛围" loading="lazy" decoding="async">
          <figcaption>一场约球的热度，往往从赛后的复盘讨论开始</figcaption>
        </figure>

        <div class="pr-pickup-side">
          <div class="pr-filter">
            <div class="pr-filter__row">
              <span class="pr-filter__label">场地</span>
              <div class="pr-filter__opts">
                <span class="pr-opt">城北灯光球场</span>
                <span class="pr-opt">河东体育公园</span>
                <span class="pr-opt">裕华室内馆</span>
              </div>
            </div>
            <div class="pr-filter__row">
              <span class="pr-filter__label">时间</span>
              <div class="pr-filter__opts">
                <span class="pr-opt">周三夜场</span>
                <span class="pr-opt">周六上午</span>
                <span class="pr-opt">周日下午</span>
              </div>
            </div>
            <div class="pr-filter__row">
              <span class="pr-filter__label">水平</span>
              <div class="pr-filter__opts">
                <span class="pr-opt">业余入门</span>
                <span class="pr-opt">业余中级</span>
                <span class="pr-opt">业余中高级</span>
              </div>
            </div>
          </div>

          <div class="pr-pack">
            <h3>赛事组织者的赛后内容包</h3>
            <p>赛果摘要、集锦索引、复盘要点打包给你，赛后当晚就能发到球队群里。已经服务 1,800+ 支业余球队，与 6 个地方联赛组委会、12 家业余球馆保持内容合作。</p>
            <div class="pr-pack__links">
              <a class="btn btn--primary" href="/contact-us/">咨询内容包</a>
              <a class="btn btn--quiet" href="/blog/">去赛场日志看样稿</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="pr-sec" id="versions" aria-labelledby="pr-versions-title">
    <div class="shell">
      <div class="pr-sec__head" data-reveal>
        <p class="eyebrow">05 / 版本演进</p>
        <h2 id="pr-versions-title">三年三个台阶，路线一直很清楚</h2>
        <p class="pr-sec__lede">先把查询做准，再把内容搬到手上，最后把比赛日体验打磨顺手。每一步都从球友最常提的问题出发。</p>
      </div>

      <ol class="pr-timeline" data-reveal>
        <li class="pr-timeline__item">
          <span class="pr-timeline__year">2021</span>
          <h3>电脑端战绩查询上线</h3>
          <p>联赛排名与球队战绩第一次能在一个页面里查完，赛果整理进入按比赛日排班的节奏。</p>
        </li>
        <li class="pr-timeline__item">
          <span class="pr-timeline__year">2023</span>
          <h3>移动端推出</h3>
          <p>内容目录跟着比赛日走，视频集锦和赛后复盘在手机上直接翻看，看台边也能查。</p>
        </li>
        <li class="pr-timeline__item">
          <span class="pr-timeline__year">2024</span>
          <h3>升级至 v3.2</h3>
          <p>加上离线赛果缓存、集锦续播与开赛提醒，弱网环境下的体验明显顺了一截。</p>
        </li>
      </ol>

      <div class="pr-get" data-reveal>
        <div class="pr-get__text">
          <h3>怎么拿到移动端 v3.2</h3>
          <p>把使用机型和你关心的功能发到 info@teamsync-huobo.com.cn，工作日 9:00–18:00 内会有人回你；需要电话沟通，邮件里留个号码，我们在 1 个工作日内回拨。</p>
        </div>
        <div class="pr-get__actions">
          <a class="btn btn--primary" href="/faqs/">查使用问题</a>
          <a class="btn btn--ghost" href="/contact-us/">联系我们</a>
          <a class="btn btn--quiet" href="/">回首页查战绩</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pr-cut: 18px;
  --pr-line: 1px solid var(--rock);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products .pr-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 6vw, 52px) 0 clamp(40px, 7vw, 84px);
  border-bottom: 1px solid var(--rock);
}

.page-products .pr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.page-products .pr-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

.page-products .pr-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.62), rgba(11, 13, 15, 0.94) 58%, var(--ink));
}

.page-products .pr-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.page-products .pr-crumbs a {
  color: var(--steel);
  text-decoration: none;
}

.page-products .pr-crumbs a:hover,
.page-products .pr-crumbs a:focus-visible {
  color: var(--lava);
}

.page-products .pr-hero__head {
  max-width: 60ch;
  margin: clamp(20px, 4vw, 36px) 0 clamp(28px, 4vw, 44px);
}

.page-products .pr-hero h1 {
  margin: 0.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.page-products .pr-hero__lede {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.8;
  color: var(--text-soft);
}

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

.page-products .pr-console-grid {
  display: grid;
  gap: 18px;
}

.page-products .pr-panel {
  position: relative;
  background: var(--ink-2);
  border: var(--pr-line);
  padding: 18px 16px;
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
}

.page-products .pr-console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.page-products .pr-console__head .panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-products .pr-console__lamp {
  width: 8px;
  height: 8px;
  background: var(--lava);
  transform: rotate(45deg);
}

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

.page-products .pr-console__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(42, 49, 54, 0.95);
}

.page-products .pr-console__row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.page-products .pr-console__k {
  font-size: 0.86rem;
  color: var(--steel);
}

.page-products .pr-console__v {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--signal);
  white-space: nowrap;
}

.page-products .pr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--moss);
}

.page-products .pr-dot--live {
  background: var(--lava);
}

.page-products .pr-device {
  margin: 0;
  position: relative;
}

.page-products .pr-device img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: var(--pr-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .pr-device__cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.page-products .pr-version__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--clay);
}

.page-products .pr-version__num {
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 3.4rem);
  line-height: 1;
  color: var(--signal);
}

.page-products .pr-version__date {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.page-products .pr-version__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .pr-version__list li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-soft);
  border-top: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-version__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  background: var(--lava);
}

.page-products .pr-version__go {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--lava);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 90, 31, 0.5);
  padding-bottom: 2px;
}

.page-products .pr-version__go:hover,
.page-products .pr-version__go:focus-visible {
  color: var(--signal);
  border-color: var(--signal);
}

.page-products .pr-sec {
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid rgba(42, 49, 54, 0.7);
}

.page-products .pr-sec--alt {
  background: var(--ink-2);
}

.page-products .pr-sec__head {
  max-width: 60ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-products .pr-sec__head h2 {
  margin: 0.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.page-products .pr-sec__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-soft);
}

.page-products .pr-split,
.page-products .pr-matchup,
.page-products .pr-pickup-grid {
  display: grid;
  gap: clamp(20px, 4vw, 34px);
}

.page-products .pr-figure {
  margin: 0;
}

.page-products .pr-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: var(--pr-line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.page-products .pr-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.page-products .pr-metrics {
  display: grid;
  gap: 2px;
}

.page-products .pr-metric {
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--rock);
}

.page-products .pr-metric:nth-child(odd) {
  border-left-color: var(--lava);
}

.page-products .pr-metric__k {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--bone);
  margin-bottom: 4px;
}

.page-products .pr-metric p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-tiles {
  display: grid;
  gap: 14px;
}

.page-products .pr-tile {
  background: var(--ink);
  border: var(--pr-line);
  padding: 16px 15px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pr-cut) 100%, 0 calc(100% - var(--pr-cut)));
}

.page-products .pr-tile h3 {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.page-products .pr-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
  margin-top: 12px;
}

.page-products .pr-bars span {
  flex: 1;
  height: var(--h, 50%);
  background: var(--steel);
}

.page-products .pr-bars span:nth-child(5),
.page-products .pr-bars span:nth-child(4) {
  background: var(--signal);
}

.page-products .pr-mobile-grid {
  display: grid;
  gap: clamp(26px, 5vw, 44px);
}

.page-products .pr-phone {
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 10px;
  border-radius: 32px;
  background: linear-gradient(155deg, var(--rock), var(--ink));
  border: 1px solid var(--rock);
}

.page-products .pr-phone__screen {
  display: grid;
  gap: 4px;
  padding: 16px 14px 18px;
  border-radius: 24px;
  background: var(--ink-2);
}

.page-products .pr-phone__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--steel);
  text-transform: uppercase;
}

.page-products .pr-phone__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-phone__round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.page-products .pr-phone__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.page-products .pr-phone__tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--signal);
  background: rgba(255, 210, 63, 0.13);
}

.page-products .pr-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.page-products .pr-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(42, 49, 54, 0.9);
}

.page-products .pr-feature:last-child {
  border-bottom: 0;
}

.page-products .pr-feature__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clay);
  padding-top: 3px;
}

.page-products .pr-feature h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.page-products .pr-feature p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--text-soft);
}

.page-products .pr-pickup-side {
  display: grid;
  gap: 18px;
}

.page-products .pr-filter {
  background: var(--ink);
  border: var(--pr-line);
  padding: 18px 16px;
  clip-path: polygon(0 0, calc(100% - var(--pr-cut)) 0, 100% var(--pr-cut), 100% 100%, 0 100%);
}

.page-products .pr-filter__row {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(42, 49, 54, 0.95);
}

.page-products .pr-filter__row:first-child {
  padding-top: 0;
}

.page-products .pr-filter__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .pr-filter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--clay);
}

.page-products .pr-filter__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-products .pr-opt {
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-soft);
  border: 1px solid var(--rock);
}

.page-products .pr-pack {
  padding: 18px 16px;
  background: rgba(255, 90, 31, 0.08);
  border-left: 3px solid var(--lava);
}

.page-products .pr-pack h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.page-products .pr-pack p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.page-products .pr-pack__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

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

.page-products .pr-timeline__item {
  position: relative;
  padding: 16px 16px 18px;
  background: var(--ink-2);
  border: var(--pr-line);
  border-top: 3px solid var(--rock);
}

.page-products .pr-timeline__item:nth-child(3) {
  border-top-color: var(--lava);
}

.page-products .pr-timeline__year {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal);
  line-height: 1;
}

.page-products .pr-timeline__item h3 {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.page-products .pr-timeline__item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.page-products .pr-get {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 5vw, 48px);
  padding: clamp(20px, 4vw, 34px);
  background: var(--ink-2);
  border: var(--pr-line);
  border-left: 4px solid var(--lava);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pr-cut)), calc(100% - var(--pr-cut)) 100%, 0 100%);
}

.page-products .pr-get h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.page-products .pr-get p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

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

@media (min-width: 720px) {
  .page-products .pr-console-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .page-products .pr-version {
    grid-column: 1 / -1;
  }

  .page-products .pr-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
  }

  .page-products .pr-tiles {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 900px) {
  .page-products .pr-console-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr) minmax(0, 0.62fr);
  }

  .page-products .pr-version {
    grid-column: auto;
  }

  .page-products .pr-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }

  .page-products .pr-matchup {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-products .pr-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .page-products .pr-tile:nth-child(even) {
    margin-top: 26px;
  }

  .page-products .pr-mobile-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }

  .page-products .pr-pickup-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }

  .page-products .pr-get {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: center;
  }

  .page-products .pr-get__actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products * {
    transition: none !important;
    animation: none !important;
  }
}