.page-products {
  --pd-gap: 20px;
  --pd-panel: rgba(12, 23, 48, 0.68);
  --pd-panel-hi: rgba(19, 34, 65, 0.88);
}

.page-products .pd-hero {
  position: relative;
  padding-top: 4px;
  background: radial-gradient(110% 72% at 88% -12%, rgba(47, 240, 214, 0.15), transparent 62%);
}

.page-products .pd-hero-grid {
  display: grid;
  gap: 26px;
}

.page-products .pd-hero-copy {
  min-width: 0;
}

.page-products .pd-hero-copy .display {
  margin: 10px 0 18px;
}

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

.page-products .pd-fact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(47, 240, 214, 0.08), rgba(4, 9, 26, 0) 62%);
}

.page-products .pd-fact-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.page-products .pd-fact-num .unit {
  font-size: 0.74rem;
  margin-left: 3px;
  font-weight: 500;
  color: var(--text-mid);
}

.page-products .pd-fact-label {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.page-products .pd-tint {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 34, 65, 0.5), rgba(4, 9, 26, 0) 78%);
}

.page-products .pd-services {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.page-products .pd-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--pd-panel);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-products .pd-service::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  opacity: 0.85;
}

.page-products .pd-service:hover {
  border-color: var(--cyan-line);
  transform: translateY(-3px);
}

.page-products .pd-service-index {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-low);
}

.page-products .pd-service h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--text-hi);
}

.page-products .pd-service p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--text-mid);
}

.page-products .pd-service .pill {
  align-self: flex-start;
  margin-top: 2px;
}

.page-products .pd-layout {
  display: grid;
  gap: 26px;
}

.page-products .pd-rail {
  min-width: 0;
}

.page-products .pd-rail-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-low);
}

.page-products .pd-rail-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.page-products .pd-rail-nav a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-products .pd-rail-nav a:hover,
.page-products .pd-rail-nav a:focus-visible {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .pd-stream {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.page-products .pd-block {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--pd-panel);
  scroll-margin-top: 104px;
  min-width: 0;
}

.page-products .pd-block-inner {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.page-products .pd-block-inner > * {
  min-width: 0;
}

.page-products .pd-block-title {
  margin: 8px 0 14px;
  font-size: 1.28rem;
  line-height: 1.42;
  color: var(--text-hi);
}

.page-products .pd-block-copy p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .pd-block-head p {
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .pd-ticks {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.72;
  color: var(--text-mid);
}

.page-products .pd-ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}

.page-products .pd-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--cyan-line);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-low);
}

.page-products .pd-figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-figure .media-frame {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-800);
}

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

.page-products .pd-figure-wide {
  margin-top: 20px;
}

.page-products .pd-metrics {
  display: grid;
  gap: 12px;
  margin: 20px 0 4px;
}

.page-products .pd-metric {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(60, 124, 255, 0.14), rgba(4, 9, 26, 0) 72%);
}

.page-products .pd-metric:nth-child(3) {
  background: linear-gradient(160deg, rgba(255, 106, 61, 0.14), rgba(4, 9, 26, 0) 72%);
}

.page-products .pd-metric-num {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}

.page-products .pd-metric:nth-child(2) .pd-metric-num {
  color: var(--cyan);
}

.page-products .pd-metric:nth-child(3) .pd-metric-num {
  color: var(--orange);
}

.page-products .pd-metric-num .unit {
  margin-left: 3px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-mid);
}

.page-products .pd-metric-label {
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--text-mid);
}

.page-products .accordion {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.page-products .accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--pd-panel);
  overflow: hidden;
  transition: border-color 0.22s ease;
}

.page-products .accordion-item[data-open] {
  border-color: var(--cyan-line);
}

.page-products .accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.page-products .accordion-trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-products .accordion-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--cyan-line);
  position: relative;
}

.page-products .accordion-icon::before,
.page-products .accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--cyan);
  transform: translate(-50%, -50%);
}

.page-products .accordion-icon::before {
  width: 8px;
  height: 1.5px;
}

.page-products .accordion-icon::after {
  width: 1.5px;
  height: 8px;
}

.page-products .accordion-panel {
  padding: 0 20px 20px;
  font-size: 0.93rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .accordion-panel p {
  margin: 0;
}

.page-products .pd-cta-inner {
  display: grid;
  gap: 24px;
  padding: 32px 24px;
  border: 1px solid var(--cyan-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(47, 240, 214, 0.14), rgba(60, 124, 255, 0.1) 46%, rgba(4, 9, 26, 0) 86%);
}

.page-products .pd-cta-copy .section-title {
  margin-top: 0;
  margin-bottom: 14px;
}

.page-products .pd-cta-copy p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-mid);
}

.page-products .pd-contact-line {
  font-size: 0.86rem;
  color: var(--text-low);
}

.page-products .pd-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

@media (min-width: 640px) {
  .page-products .pd-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .pd-block {
    padding: 30px 28px;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: end;
  }

  .page-products .pd-layout {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }

  .page-products .pd-rail {
    position: sticky;
    top: 104px;
  }

  .page-products .pd-rail-nav {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-products .pd-rail-nav a {
    border-radius: var(--radius-sm);
    border-color: transparent;
    padding: 11px 14px;
  }

  .page-products .pd-rail-nav a:hover,
  .page-products .pd-rail-nav a:focus-visible {
    background: var(--cyan-soft);
    border-color: var(--cyan-line);
    color: var(--cyan);
  }

  .page-products .pd-block-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
  }

  .page-products .pd-block-reverse .pd-block-copy {
    order: 2;
  }

  .page-products .pd-block-reverse .pd-figure {
    order: 1;
  }

  .page-products .pd-block-wide .pd-block-head {
    max-width: 780px;
  }

  .page-products .pd-cta-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding: 40px 36px;
  }

  .page-products .pd-cta-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-service,
  .page-products .pd-rail-nav a,
  .page-products .accordion-item {
    transition: none;
  }

  .page-products .pd-service:hover {
    transform: none;
  }
}
<<<END>>>

等等，我加了 <<<END>>> 但规范里说只要两个标记。我删掉它。只用  和 。

其实序言说每个标记只出现一次，标记应该就是三个尖括号。所以我只用那两个标记。不用 <<<END>>>。

让我重新输出。还要检查一下 `data-reveal` 用法——这是 site_kit 交互属性列表里的，没问题。

还有一点：我用了 `<p class="pill">`——pill 是既有的共享 class，放在 p 上没问题。

还有 `<a href="/">首页</a>` 的面包屑链接——这个 route 是合法的。

好，现在定稿。
<main id="main-content" class="page-products">
  <div class="container">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <a class="crumb" href="/">首页</a>
      <span class="crumb-sep" aria-hidden="true">/</span>
      <span class="crumb" aria-current="page">业务介绍</span>
    </nav>
  </div>

  <section class="section pd-hero">
    <div class="container pd-hero-grid">
      <div class="pd-hero-copy">
        <p class="eyebrow">业务介绍</p>
        <h1 class="display">把一场比赛的来龙去脉，做成能直接用的东西</h1>
        <p class="lede measure">新世纪体育做的是比赛信息的整理与分发：赛程可以一键导出成你需要的文件格式，球队资料和战报在站内就能检索，实时数据面板按固定节奏自动刷新。无论是排下一周的转播表、在通勤路上看一眼关注球队的近况，还是把场上指标接进自己的分析流程，都能在这套业务里找到对应的接口。</p>
      </div>
      <ul class="pd-hero-facts">
        <li class="pd-fact">
          <span class="pd-fact-num mono">04</span>
          <span class="pd-fact-label">条业务线，覆盖赛程、球队、数据与关注同步</span>
        </li>
        <li class="pd-fact">
          <span class="pd-fact-num mono">多格式</span>
          <span class="pd-fact-label">赛程文件一次导出，直接进入下游流程</span>
        </li>
        <li class="pd-fact">
          <span class="pd-fact-num mono">跨设备</span>
          <span class="pd-fact-label">关注列表在电脑、平板与手机之间保持同步</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section pd-tint" id="services">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">四条业务线</p>
        <h2 class="section-title">从拿到赛程到盯住比分，每一步都有人接得住</h2>
        <p class="section-lede measure">这四条线可以单独用，也可以串起来用。俱乐部多半从赛程导出开始，媒体编辑更依赖球队库和战报，做数据的人则在面板上停留最久。</p>
      </div>

      <div class="pd-services">
        <article class="pd-service" data-reveal>
          <p class="pd-service-index mono">01</p>
          <h3>赛程导出</h3>
          <p>把一周、一个月甚至整个赛季的安排一次拿到手，按需要导出成能被日历、排期表或印刷物料直接读取的文件。编辑排班、转播计划、场地协调，不用再一条条誊抄。</p>
          <p class="pill">一键导出多格式</p>
        </article>

        <article class="pd-service" data-reveal>
          <p class="pd-service-index mono">02</p>
          <h3>球队库与检索</h3>
          <p>中文版球队库收着球队资料、近期战报和历史交手，站内检索框直接放在页面里。平板和手机的布局都做过压缩，单手翻查也不费劲。</p>
          <p class="pill">平板站内检索</p>
        </article>

        <article class="pd-service" data-reveal>
          <p class="pd-service-index mono">03</p>
          <h3>实时数据面板</h3>
          <p>控球率、射门次数、传球成功率等指标并列挂在同一块面板上，数据每 10 分钟自动刷新一次，页面开着就是最新的。</p>
          <p class="pill">自动刷新</p>
        </article>

        <article class="pd-service" data-reveal>
          <p class="pd-service-index mono">04</p>
          <h3>关注同步与移动入口</h3>
          <p>把常看的球队收藏起来，关注列表跟着账号走，换设备打开还是同一份。移动端首页路径缩短，快速通道新版入口把常用位置往前挪。</p>
          <p class="pill">跨设备同步</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container pd-layout">
      <aside class="pd-rail" aria-label="业务线快速跳转">
        <p class="pd-rail-title mono">业务线导航</p>
        <nav class="pd-rail-nav">
          <a href="#schedule">赛程导出</a>
          <a href="#team">球队库检索</a>
          <a href="#live">实时数据面板</a>
          <a href="#mobile">关注与移动入口</a>
        </nav>
      </aside>

      <div class="pd-stream">
        <article id="schedule" class="pd-block" data-reveal>
          <div class="pd-block-inner">
            <div class="pd-block-copy">
              <p class="eyebrow">业务线 01</p>
              <h3 class="pd-block-title">赛程导出：一次拿全，换种格式接着用</h3>
              <p>赛季刚开始那阵子，最耗时间的往往不是看比赛，而是把散在各处的比赛时间拼成一张能派上用场的表。赛程导出把这件事压缩成一次操作：先圈定范围，再挑格式，文件直接落到本地。</p>
              <ul class="pd-ticks">
                <li>支持多格式导出，按下游系统能读的形式来选</li>
                <li>可以只取某个联赛、某支球队，或者某一段时间</li>
                <li>导出的内容能直接对接日历、排期表和印刷物料，二次整理的工作量很小</li>
              </ul>
              <p class="pd-note">常见用法：转播编排、票务排期、场地协调、内容日历规划。</p>
            </div>
            <figure class="pd-figure">
              <div class="media-frame media-wide">
                <img src="{zhanqunpic:h:400w:600}" width="600" height="400" alt="夜间球场俯视视角下，赛程条目以数据轨迹形式依次铺开" loading="lazy" decoding="async">
              </div>
              <figcaption class="media-caption">先框出需要的比赛范围，再决定带走哪种文件格式。</figcaption>
            </figure>
          </div>
        </article>

        <article id="team" class="pd-block pd-block-reverse" data-reveal>
          <div class="pd-block-inner">
            <div class="pd-block-copy">
              <p class="eyebrow">业务线 02</p>
              <h3 class="pd-block-title">球队库检索：在地铁上也能把资料查清楚</h3>
              <p>球队库按中文阅读习惯整理队名、常用简称、所属联赛和近期战报，检索入口就放在站内，查一支队不必来回跳转。平板横向浏览和手机竖向滑动各有适配，通勤路上单手也能走完一次查询。</p>
              <ul class="pd-ticks">
                <li>输入球队全名或常用简称都能定位</li>
                <li>球队资料、近期战报与历史交手集中在一处呈现</li>
                <li>移动端操作步骤更少，站台上那几分钟就够查完</li>
              </ul>
              <p class="pd-note">常见用法：赛前准备、播报前核对、深度阅读前的资料补齐。</p>
            </div>
            <figure class="pd-figure">
              <div class="media-frame media-wide">
                <img src="{zhanqunpic:h:400w:600}" width="600" height="400" alt="平板屏幕上显示球队检索结果与近期战报的深色界面" loading="lazy" decoding="async">
              </div>
              <figcaption class="media-caption">中文版球队库在平板上完整展开，手机上自动收成单列。</figcaption>
            </figure>
          </div>
        </article>

        <article id="live" class="pd-block pd-block-wide" data-reveal>
          <div class="pd-block-head">
            <p class="eyebrow">业务线 03</p>
            <h3 class="pd-block-title">实时数据面板：开着页面，数字自己往前走</h3>
            <p>比赛进行中，控球率、射门次数、传球成功率这些指标并列挂在同一块面板上。数据每 10 分钟自动刷新一次，页面开着就是最新的，不用手动点，也不会把上一轮的数值当成现在的。</p>
          </div>

          <div class="pd-metrics">
            <div class="pd-metric">
              <span class="pd-metric-num mono">10<span class="unit">分钟</span></span>
              <span class="pd-metric-label">面板自动刷新一次，无需人工触发</span>
            </div>
            <div class="pd-metric">
              <span class="pd-metric-num mono">控球率</span>
              <span class="pd-metric-label">面板上持续更新的核心指标之一</span>
            </div>
            <div class="pd-metric">
              <span class="pd-metric-num mono">副屏</span>
              <span class="pd-metric-label">适合长时间挂在编辑室或分析工位上</span>
            </div>
          </div>

          <figure class="pd-figure pd-figure-wide">
            <div class="media-frame media-wide">
              <img src="{zhanqunpic:h:500w:900}" width="900" height="500" alt="深色数据面板上并列排布的比赛指标与实时曲线轨迹" loading="lazy" decoding="async">
            </div>
            <figcaption class="media-caption">场上指标随比赛进程更新，整场挂着不用切页面。</figcaption>
          </figure>
        </article>

        <article id="mobile" class="pd-block pd-block-reverse" data-reveal>
          <div class="pd-block-inner">
            <div class="pd-block-copy">
              <p class="eyebrow">业务线 04</p>
              <h3 class="pd-block-title">关注同步与移动入口：换个设备，还是同一份列表</h3>
              <p>把常跟的球队收藏起来，关注列表跟着账号走。手机上标的，回到电脑打开还是同一份，不用重新找一遍。移动端首页的路径也做过压缩，从打开页面到看见赛程和比分，中间少了几次跳转。</p>
              <ul class="pd-ticks">
                <li>中文版球队库收藏已就位，关注项跨设备同步</li>
                <li>移动端首页路径缩短，快速通道新版入口直达核心数据</li>
                <li>常用位置前置，电梯里、站台上的碎片时间也够看一轮</li>
              </ul>
              <p class="pd-note">常见用法：跟队看球、值班时盯分、把关注列表当作个人的赛事清单。</p>
            </div>
            <figure class="pd-figure">
              <div class="media-frame media-wide">
                <img src="{zhanqunpic:h:400w:800}" width="800" height="400" alt="手机屏幕上显示关注球队列表与快速通道入口的深色界面" loading="lazy" decoding="async">
              </div>
              <figcaption class="media-caption">关注列表与常用入口并排呈现，减少来回点击。</figcaption>
            </figure>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section pd-tint">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">常见问题</p>
        <h2 class="section-title">刚接触这套业务时问得最多的几件事</h2>
        <p class="section-lede measure">下面这些问题来自团队在日常对接中反复遇到的场景，先看一遍基本就能判断这套业务线跟你手上的活儿合不合。</p>
      </div>

      <div class="accordion" data-accordion>
        <div class="accordion-item" data-accordion-item data-open>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>赛程能导出成哪些格式，能直接进我们自己的系统吗？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>赛程导出支持多格式文件输出，导出前可以按联赛、球队或时间区间先缩小范围。拿到文件之后直接进日历、排期表或者印刷排版流程都可以，不需要再逐条重打一遍。</p>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>赛程导出异常怎么处理？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>把出问题的那次导出截图，连同你选的范围与目标格式一起发到 service@xsj-sprint.com.cn。工作日 9:00-18:00 会有回复。截图能帮我们更快定位是范围筛错了还是格式不匹配。</p>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>数据面板多久更新一次，需要手动刷新吗？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>面板每 10 分钟自动刷新一次，控球率这类指标会跟着比赛进程走。页面开着就够了，不用反复点刷新，也适合挂在副屏上整场不切换。</p>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>平板和手机上的球队库用起来一样吗？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>两支端都能用站内检索定位球队。平板横向展开更完整，适合一次看多列资料；手机收成单列，操作步骤更少，通勤时单手也好翻。数据是同一份，只是呈现方式不同。</p>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>换设备之后，我收藏的球队还在吗？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>中文版球队库收藏功能已就位，关注项在设备之间同步。手机上标过的球队，回到电脑或者平板打开，看到的还是同一份关注列表。</p>
          </div>
        </div>

        <div class="accordion-item" data-accordion-item>
          <button class="accordion-trigger" data-accordion-trigger type="button">
            <span>移动端首页路径变短之后，常用入口在哪？</span>
            <span class="accordion-icon" aria-hidden="true"></span>
          </button>
          <div class="accordion-panel" data-accordion-panel>
            <p>移动端首页路径缩短，快速通道新版入口把核心数据前置。打开页面之后不用经过多级列表，赛程和比分在靠前的位置就能看到，适合比赛刚开始前那几分钟快速瞄一眼。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section pd-cta">
    <div class="container pd-cta-inner">
      <div class="pd-cta-copy">
        <h2 class="section-title">先说说你们现在是怎么处理比赛信息的</h2>
        <p class="measure">不管你是要把赛程塞进内部系统，还是想让编辑每天少抄几遍数据，把现状讲一遍，对应到哪条业务线、需要调什么，通常在第一次沟通里就能对齐。</p>
        <p class="pd-contact-line">工作日上午 9:00 到下午 18:00，可发邮件至 service@xsj-sprint.com.cn</p>
      </div>
      <div class="pd-cta-actions">
        <a class="btn btn-primary" href="/feedback/">说明你的需求</a>
        <a class="btn btn-ghost" href="/values/">看看我们的主张</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  --pd-gap: 20px;
  --pd-panel: rgba(12, 23, 48, 0.68);
  --pd-panel-hi: rgba(19, 34, 65, 0.88);
}

.page-products .pd-hero {
  position: relative;
  padding-top: 4px;
  background: radial-gradient(110% 72% at 88% -12%, rgba(47, 240, 214, 0.15), transparent 62%);
}

.page-products .pd-hero-grid {
  display: grid;
  gap: 26px;
}

.page-products .pd-hero-copy {
  min-width: 0;
}

.page-products .pd-hero-copy .display {
  margin: 10px 0 18px;
}

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

.page-products .pd-fact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(47, 240, 214, 0.08), rgba(4, 9, 26, 0) 62%);
}

.page-products .pd-fact-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.page-products .pd-fact-num .unit {
  font-size: 0.74rem;
  margin-left: 3px;
  font-weight: 500;
  color: var(--text-mid);
}

.page-products .pd-fact-label {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.page-products .pd-tint {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 34, 65, 0.5), rgba(4, 9, 26, 0) 78%);
}

.page-products .pd-services {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.page-products .pd-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--pd-panel);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-products .pd-service::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  opacity: 0.85;
}

.page-products .pd-service:hover {
  border-color: var(--cyan-line);
  transform: translateY(-3px);
}

.page-products .pd-service-index {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-low);
}

.page-products .pd-service h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--text-hi);
}

.page-products .pd-service p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.78;
  color: var(--text-mid);
}

.page-products .pd-service .pill {
  align-self: flex-start;
  margin-top: 2px;
}

.page-products .pd-layout {
  display: grid;
  gap: 26px;
}

.page-products .pd-rail {
  min-width: 0;
}

.page-products .pd-rail-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-low);
}

.page-products .pd-rail-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.page-products .pd-rail-nav a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-products .pd-rail-nav a:hover,
.page-products .pd-rail-nav a:focus-visible {
  color: var(--ink-900);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-products .pd-stream {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.page-products .pd-block {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--pd-panel);
  scroll-margin-top: 104px;
  min-width: 0;
}

.page-products .pd-block-inner {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.page-products .pd-block-inner > * {
  min-width: 0;
}

.page-products .pd-block-title {
  margin: 8px 0 14px;
  font-size: 1.28rem;
  line-height: 1.42;
  color: var(--text-hi);
}

.page-products .pd-block-copy p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .pd-block-head p {
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .pd-ticks {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.72;
  color: var(--text-mid);
}

.page-products .pd-ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}

.page-products .pd-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--cyan-line);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-low);
}

.page-products .pd-figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-figure .media-frame {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-800);
}

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

.page-products .pd-figure-wide {
  margin-top: 20px;
}

.page-products .pd-metrics {
  display: grid;
  gap: 12px;
  margin: 20px 0 4px;
}

.page-products .pd-metric {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(60, 124, 255, 0.14), rgba(4, 9, 26, 0) 72%);
}

.page-products .pd-metric:nth-child(3) {
  background: linear-gradient(160deg, rgba(255, 106, 61, 0.14), rgba(4, 9, 26, 0) 72%);
}

.page-products .pd-metric-num {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}

.page-products .pd-metric:nth-child(2) .pd-metric-num {
  color: var(--cyan);
}

.page-products .pd-metric:nth-child(3) .pd-metric-num {
  color: var(--orange);
}

.page-products .pd-metric-num .unit {
  margin-left: 3px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-mid);
}

.page-products .pd-metric-label {
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--text-mid);
}

.page-products .accordion {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.page-products .accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--pd-panel);
  overflow: hidden;
  transition: border-color 0.22s ease;
}

.page-products .accordion-item[data-open] {
  border-color: var(--cyan-line);
}

.page-products .accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.page-products .accordion-trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-products .accordion-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--cyan-line);
  position: relative;
}

.page-products .accordion-icon::before,
.page-products .accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--cyan);
  transform: translate(-50%, -50%);
}

.page-products .accordion-icon::before {
  width: 8px;
  height: 1.5px;
}

.page-products .accordion-icon::after {
  width: 1.5px;
  height: 8px;
}

.page-products .accordion-panel {
  padding: 0 20px 20px;
  font-size: 0.93rem;
  line-height: 1.82;
  color: var(--text-mid);
}

.page-products .accordion-panel p {
  margin: 0;
}

.page-products .pd-cta-inner {
  display: grid;
  gap: 24px;
  padding: 32px 24px;
  border: 1px solid var(--cyan-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(47, 240, 214, 0.14), rgba(60, 124, 255, 0.1) 46%, rgba(4, 9, 26, 0) 86%);
}

.page-products .pd-cta-copy .section-title {
  margin-top: 0;
  margin-bottom: 14px;
}

.page-products .pd-cta-copy p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-mid);
}

.page-products .pd-contact-line {
  font-size: 0.86rem;
  color: var(--text-low);
}

.page-products .pd-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
}

@media (min-width: 640px) {
  .page-products .pd-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-products .pd-block {
    padding: 30px 28px;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: end;
  }

  .page-products .pd-layout {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }

  .page-products .pd-rail {
    position: sticky;
    top: 104px;
  }

  .page-products .pd-rail-nav {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-products .pd-rail-nav a {
    border-radius: var(--radius-sm);
    border-color: transparent;
    padding: 11px 14px;
  }

  .page-products .pd-rail-nav a:hover,
  .page-products .pd-rail-nav a:focus-visible {
    background: var(--cyan-soft);
    border-color: var(--cyan-line);
    color: var(--cyan);
  }

  .page-products .pd-block-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
  }

  .page-products .pd-block-reverse .pd-block-copy {
    order: 2;
  }

  .page-products .pd-block-reverse .pd-figure {
    order: 1;
  }

  .page-products .pd-block-wide .pd-block-head {
    max-width: 780px;
  }

  .page-products .pd-cta-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding: 40px 36px;
  }

  .page-products .pd-cta-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-service,
  .page-products .pd-rail-nav a,
  .page-products .accordion-item {
    transition: none;
  }

  .page-products .pd-service:hover {
    transform: none;
  }
}