.page-products {
  --apps-gap: clamp(48px, 7vw, 92px);
  --apps-radius: 2px;
  color: var(--paper);
}

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

.page-products h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.page-products h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-products .lede {
  margin: 0 0 26px;
  color: var(--paper);
  opacity: .88;
}

.page-products .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--lime);
}

.page-products .big-num {
  color: var(--lime);
}

/* ---------- Hero ---------- */
.page-products .apps-hero {
  position: relative;
  padding: 8px 0 var(--apps-gap);
}

.page-products .apps-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.page-products .apps-hero__lead h1 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 5.6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.page-products .apps-hero__points {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.page-products .apps-hero__points li {
  padding: 14px 0 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-size: .96rem;
  line-height: 1.6;
  opacity: .9;
}

.page-products .apps-hero__points li::before {
  content: "▸";
  color: var(--lime);
  margin-right: 10px;
  font-family: var(--font-mono);
}

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

.page-products .apps-device {
  margin: 0;
}

.page-products .apps-device__screen {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  padding: 14px;
}

.page-products .apps-device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.4) contrast(1.05) brightness(.8);
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .35;
}

.page-products .apps-device__svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

/* ---------- Install ---------- */
.page-products .apps-install {
  padding: 0 0 var(--apps-gap);
}

.page-products .apps-steps {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .apps-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .apps-steps__idx {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lime);
}

.page-products .apps-steps__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .84;
}

.page-products .apps-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: var(--apps-radius);
}

.page-products .apps-copyrow__text {
  margin: 0;
  flex: 1 1 240px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--mute);
}

.page-products .apps-install__figure {
  margin: 0;
}

/* ---------- Abilities ---------- */
.page-products .apps-abilities {
  padding: var(--apps-gap) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .apps-abilities__filter {
  margin-bottom: 26px;
}

.page-products .apps-ability-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.page-products .apps-ability {
  position: relative;
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid transparent;
  background: var(--ink-2);
  transition: border-color .16s var(--ease), transform .16s var(--ease), background-color .16s var(--ease);
}

.page-products .apps-ability:hover {
  border-color: var(--lime);
  transform: translateY(-2px);
  background: var(--ink-3);
}

.page-products .apps-ability .tag {
  margin-bottom: 14px;
}

.page-products .apps-ability h3 {
  font-size: 1.12rem;
}

.page-products .apps-ability p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .82;
}

/* ---------- Path ---------- */
.page-products .apps-path {
  position: relative;
  padding: var(--apps-gap) 0;
  overflow: hidden;
  background: var(--ink);
}

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

.page-products .apps-path__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.28) brightness(.4) hue-rotate(90deg);
  opacity: .5;
}

.page-products .apps-path .shell {
  position: relative;
  z-index: 1;
}

.page-products .apps-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-products .apps-tree__node {
  position: relative;
  padding-bottom: 20px;
}

.page-products .apps-tree__node details {
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--apps-radius);
}

.page-products .apps-tree__node details[open] {
  border-color: var(--lime);
}

.page-products .apps-tree__node summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.page-products .apps-tree__node summary::-webkit-details-marker {
  display: none;
}

.page-products .apps-tree__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: .92rem;
  color: var(--ink);
  background: var(--lime);
  flex: 0 0 auto;
}

.page-products .apps-tree__node--live .apps-tree__badge {
  background: var(--amber);
}

.page-products .apps-tree__node--post .apps-tree__badge {
  background: var(--steel);
  color: var(--ink);
}

.page-products .apps-tree__title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.page-products .apps-tree__hint {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--mute);
  text-transform: uppercase;
}

.page-products .apps-tree__node details[open] .apps-tree__hint {
  color: var(--lime);
}

.page-products .apps-tree__body {
  padding: 0 18px 18px 70px;
}

.page-products .apps-tree__body p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .84;
}

.page-products .apps-tree__line {
  display: block;
  width: 1px;
  height: 20px;
  margin-left: 38px;
  background: var(--line);
}

.page-products .apps-tree__node--live .apps-tree__line {
  background: linear-gradient(var(--lime), var(--amber));
}

.page-products .apps-tree__node:last-child .apps-tree__line {
  display: none;
}

/* ---------- Collect ---------- */
.page-products .apps-collect {
  padding: var(--apps-gap) 0;
}

.page-products .apps-collect__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .apps-collect__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
  line-height: 1.7;
  color: var(--paper);
  opacity: .86;
}

.page-products .apps-collect__list strong {
  color: var(--lime);
  font-weight: 700;
}

.page-products .apps-collect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .apps-collect__figure {
  margin: 0;
}

/* ---------- Perf ---------- */
.page-products .apps-perf {
  padding: var(--apps-gap) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .apps-perf__head {
  margin-bottom: 30px;
}

.page-products .apps-perf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-products .apps-perf__figure {
  margin: 0;
}

.page-products .apps-perf__stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-products .apps-perf__stats li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 18px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.page-products .apps-perf__stats .big-num {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1;
}

.page-products .apps-perf__unit {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--amber);
  letter-spacing: .04em;
}

.page-products .apps-perf__label {
  flex: 1 0 100%;
  font-size: .78rem;
  color: var(--mute);
  line-height: 1.4;
}

/* ---------- Versions ---------- */
.page-products .apps-versions {
  padding: var(--apps-gap) 0;
}

.page-products .apps-versions__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0 max(24px, calc((100vw - 1240px) / 2)) var(--apps-gap);
  -webkit-overflow-scrolling: touch;
}

.page-products .apps-versions__scroller:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -4px;
}

.page-products .apps-versions__track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0;
  border-top: 2px solid var(--line);
  min-width: max-content;
}

.page-products .apps-version {
  flex: 0 0 auto;
  width: min(280px, 78vw);
  padding: 26px 22px 0 0;
  scroll-snap-align: start;
  border-right: 1px solid transparent;
  position: relative;
}

.page-products .apps-version::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.page-products .apps-version:nth-child(even)::before {
  background: var(--amber);
}

.page-products .apps-version__year {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 12px;
}

.page-products .apps-version h3 {
  font-size: 1rem;
}

.page-products .apps-version p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--mute);
}

/* ---------- Next ---------- */
.page-products .apps-next {
  padding: var(--apps-gap) 0 calc(var(--apps-gap) + 8px);
  border-top: 1px solid var(--line);
}

.page-products .apps-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-products .apps-next__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .apps-next__links .btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .page-products .apps-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: 44px;
    align-items: end;
  }

  .page-products .apps-hero__device {
    transform: translateY(18px);
  }

  .page-products .apps-ability-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .apps-ability {
    border-right: 1px solid var(--line);
  }

  .page-products .apps-perf__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
    gap: 28px;
  }
}

@media (min-width: 960px) {
  .page-products .apps-path__bg img {
    object-position: center 30%;
  }

  .page-products .apps-next__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    align-items: start;
  }

  .page-products .apps-next__links {
    gap: 12px;
  }

  .page-products .apps-tree {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-products .apps-tree__body {
    padding-left: 18px;
  }

  .page-products .apps-tree__line {
    margin-left: 18px;
  }

  .page-products .apps-hero__points li {
    font-size: .9rem;
  }

  .page-products .apps-steps__item {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .apps-ability {
    transition: none;
  }
}


<main id="main-content" class="page-products">
  <div class="shell">
    <nav class="crumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">应用中心</li>
      </ol>
    </nav>
  </div>

  <section class="apps-hero" aria-labelledby="apps-hero-title">
    <div class="shell apps-hero__grid">
      <div class="apps-hero__lead">
        <p class="eyebrow">安卓客户端 · 移动端赛事工具</p>
        <h1 id="apps-hero-title">装进口袋的比赛助手：赛前查阵容，赛中盯排名，赛后十分钟读战报</h1>
        <p class="lede">装好客户端，打开第一步就落在排名页。今天谁在打、几点开球，点进一场比赛翻阵容名单、盯名次跳动，终场后十分钟回到同一屏把图文战报读完。中间不换应用，也不用在几个页面之间来回找。威廉体育安卓版战报跟着轮次走，你收藏的那场比赛，复盘就直接贴在它旁边。</p>
        <ul class="apps-hero__points">
          <li><span class="num">28</span> MB 安装包，Android <span class="num">8.0</span> 及以上机型直接可装</li>
          <li>排名、赛程、战报、阵容、收藏收进一处，换联赛不用跳站</li>
          <li>收藏赛事页面标一次，下次启动直接落到你常看的那场</li>
        </ul>
        <div class="apps-hero__actions">
          <a class="btn btn--lime" href="#install">看安装步骤</a>
          <a class="btn btn--ghost" href="/trends/">翻本轮战报</a>
        </div>
      </div>

      <div class="apps-hero__device">
        <figure class="figure figure--tall apps-device">
          <div class="figure__media apps-device__screen">
            <img src="{zhanqunpic:h:1600w:900}" width="900" height="1600" alt="暗色场边光下竖握手机，屏幕内显示联赛排名列表与实时比分条" loading="eager" decoding="async">
            <svg class="apps-device__svg" viewBox="0 0 300 540" role="img" aria-label="客户端排名页示意：顶部联赛切换、中部排名列表、底部比分条与收藏入口">
              <rect x="12" y="18" width="140" height="12" fill="#C6FF3D" opacity=".9"/>
              <rect x="12" y="44" width="94" height="8" fill="#9DB3AB" opacity=".7"/>
              <rect x="216" y="18" width="72" height="30" fill="#C6FF3D"/>
              <rect x="230" y="30" width="44" height="6" fill="#0B1F1A"/>
              <g opacity=".92">
                <rect x="12" y="92" width="276" height="56" fill="#1B473B"/>
                <rect x="24" y="106" width="20" height="10" fill="#C6FF3D"/>
                <rect x="52" y="106" width="120" height="8" fill="#EAF3EE" opacity=".8"/>
                <rect x="24" y="126" width="150" height="6" fill="#9DB3AB"/>
                <rect x="250" y="104" width="26" height="30" fill="#C6FF3D"/>
              </g>
              <g opacity=".72">
                <rect x="12" y="158" width="276" height="44" fill="#12302A"/>
                <rect x="24" y="170" width="20" height="8" fill="#9DB3AB"/>
                <rect x="52" y="170" width="100" height="8" fill="#EAF3EE" opacity=".7"/>
                <rect x="248" y="168" width="28" height="20" fill="#7C93A8"/>
              </g>
              <g opacity=".55">
                <rect x="12" y="210" width="276" height="44" fill="#12302A"/>
                <rect x="24" y="222" width="20" height="8" fill="#9DB3AB"/>
                <rect x="52" y="222" width="120" height="8" fill="#EAF3EE" opacity=".7"/>
                <rect x="248" y="220" width="28" height="20" fill="#7C93A8"/>
              </g>
              <g opacity=".4">
                <rect x="12" y="262" width="276" height="44" fill="#12302A"/>
                <rect x="24" y="274" width="20" height="8" fill="#9DB3AB"/>
                <rect x="52" y="274" width="90" height="8" fill="#EAF3EE" opacity=".7"/>
                <rect x="248" y="272" width="28" height="20" fill="#7C93A8"/>
              </g>
              <rect x="12" y="330" width="276" height="1" fill="#2E5C4F"/>
              <rect x="12" y="348" width="120" height="10" fill="#E8A93B"/>
              <rect x="12" y="370" width="276" height="60" fill="#0B1F1A" opacity=".8"/>
              <rect x="24" y="384" width="60" height="8" fill="#9DB3AB"/>
              <rect x="24" y="402" width="160" height="10" fill="#EAF3EE" opacity=".8"/>
              <rect x="248" y="384" width="28" height="30" fill="#C6FF3D"/>
              <rect x="12" y="452" width="276" height="70" fill="#1B473B" opacity=".85"/>
              <rect x="24" y="466" width="40" height="40" fill="#C6FF3D" opacity=".85"/>
              <rect x="76" y="470" width="130" height="8" fill="#EAF3EE" opacity=".8"/>
              <rect x="76" y="488" width="90" height="6" fill="#9DB3AB"/>
            </svg>
          </div>
          <figcaption class="figure__cap">启动即落地排名页，联赛切换、比分条与战报入口都在同一屏</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="apps-install" id="install" aria-labelledby="apps-install-title">
    <div class="shell layout">
      <div class="layout__main">
        <p class="eyebrow">下载与首次配置</p>
        <h2 id="apps-install-title">三步装好，第一步就落在排名上</h2>
        <p class="lede">包体约 <span class="num">28</span> MB，Android <span class="num">8.0</span> 及以上机型可直接安装。不注册也能看排名与战报；想跨设备接住收藏，再把账号绑上。</p>
        <ol class="apps-steps">
          <li class="apps-steps__item">
            <span class="apps-steps__idx num">01</span>
            <div>
              <h3>拿安装包</h3>
              <p>从本页客户端入口取包，或在手机浏览器里直接打开应用中心。下载完成后系统提示安装，允许一次来源授权即可，不额外索要通讯录与位置。</p>
            </div>
          </li>
          <li class="apps-steps__item">
            <span class="apps-steps__idx num">02</span>
            <div>
              <h3>选一个常看的联赛</h3>
              <p>首次启动会让你挑联赛，挑完直接跳到该联赛排名页。几个联赛同时看也没问题，之后在顶部横条一键切换，排名与赛程会跟着一起走。</p>
            </div>
          </li>
          <li class="apps-steps__item">
            <span class="apps-steps__idx num">03</span>
            <div>
              <h3>把下一场收藏起来</h3>
              <p>在排名或赛程里点赛事右侧的标记按钮，这场比赛就进了收藏夹。下次打开客户端，从收藏夹一步进到那场比赛的阵容与比分页。</p>
            </div>
          </li>
        </ol>
        <div class="apps-copyrow">
          <p class="apps-copyrow__text">装机环境：Android 8.0 及以上，约 28MB，支持 320px 起的屏幕宽度。</p>
          <button class="btn btn--ghost btn--sm" type="button" data-copy="Android 8.0 及以上机型可安装，安装包约 28MB；首次启动选择常看联赛后进入排名页，赛事页右侧的标记按钮可将比赛加入收藏夹。" data-copy-label="复制安装说明">复制安装说明</button>
        </div>
      </div>

      <aside class="layout__side">
        <figure class="figure apps-install__figure">
          <div class="figure__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="青柠色线条勾勒的下载、选择联赛、收藏三步几何图形" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">下载 → 选联赛 → 收藏，首次启动三段走完</figcaption>
        </figure>
      </aside>
    </div>
  </section>

  <section class="apps-abilities" aria-labelledby="apps-abilities-title">
    <div class="shell">
      <p class="eyebrow">移动端能力清单</p>
      <h2 id="apps-abilities-title">五块能力，覆盖你手机上的每一段看球时间</h2>
      <p class="lede">按赛前、赛中、赛后筛一下，就能看到对应时段真正用得上的功能，不必等安装完再摸索。</p>

      <div class="filterbar apps-abilities__filter" data-filter-group data-filter-target="#abilityGrid" role="group" aria-label="按比赛阶段筛选能力">
        <button class="chip" type="button" data-filter="all" aria-pressed="true">全部</button>
        <button class="chip" type="button" data-filter="pre">赛前</button>
        <button class="chip" type="button" data-filter="live">赛中</button>
        <button class="chip" type="button" data-filter="post">赛后</button>
      </div>

      <ul class="apps-ability-grid" id="abilityGrid">
        <li class="apps-ability" data-filter-item data-tags="pre live post">
          <span class="tag tag--lime">全程</span>
          <h3>实时排名</h3>
          <p>训练间隙刷新一下，就能看到关注的联赛此刻名次。主客场拆分、近 5 场走势、净胜分三种视图切换着看，名次是升是降一眼抓得住。</p>
        </li>
        <li class="apps-ability" data-filter-item data-tags="live post">
          <span class="tag tag--amber">赛中 · 赛后</span>
          <h3>威廉体育安卓版战报</h3>
          <p>每轮比赛结束后 <span class="num">10</span> 分钟内推送图文战报，比分、关键事件与阵容变化一次读完。赶不上直播的夜晚，第二天通勤路上也能补完昨夜那场。</p>
        </li>
        <li class="apps-ability" data-filter-item data-tags="pre live">
          <span class="tag tag--lime">赛前 · 赛中</span>
          <h3>阵容名单</h3>
          <p>开赛前翻一眼首发与轮换，谁伤停、谁能上，心里先有谱。客队名单也在同一页，对照着看不用另起一个应用。</p>
        </li>
        <li class="apps-ability" data-filter-item data-tags="pre">
          <span class="tag tag--steel">赛前</span>
          <h3>伤停提示</h3>
          <p>关键球员缺阵会单独标在阵容页顶部。看长期走势时，把它跟近 5 场放在一起对照，哪段掉分是缺人还是赛程硬，心里就有数了。</p>
        </li>
        <li class="apps-ability" data-filter-item data-tags="pre live post">
          <span class="tag tag--amber">全程</span>
          <h3>收藏赛事页面</h3>
          <p>常看的那几场标一下，最多存 <span class="num">60</span> 个赛事或球队页面，还能按联赛分组。下次打开直接落到列表里，不用从联赛首页一路点进去。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="apps-path" aria-labelledby="apps-path-title">
    <div class="apps-path__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="抽象球场边线与数据流叠加的暗色背景图" loading="lazy" decoding="async">
    </div>
    <div class="shell">
      <p class="eyebrow">赛前 · 赛中 · 赛后</p>
      <h2 id="apps-path-title">一场比赛的三段路，点开节点就看得到怎么操作</h2>
      <p class="lede">路径从左往右，节点会依次亮起。每段对应手机上的一个动作，点开看具体按哪里。</p>

      <ol class="apps-tree">
        <li class="apps-tree__node apps-tree__node--pre">
          <details>
            <summary>
              <span class="apps-tree__badge num">01</span>
              <span class="apps-tree__title">赛前：查阵容与交锋</span>
              <span class="apps-tree__hint">展开操作</span>
            </summary>
            <div class="apps-tree__body">
              <p>从排名页点进今晚那场比赛，阵容页顶部会列出双方首发与伤停，再往下翻是近三次交锋记录。三条信息在同一屏，出门前两分钟就能看完。</p>
            </div>
          </details>
          <span class="apps-tree__line" aria-hidden="true"></span>
        </li>
        <li class="apps-tree__node apps-tree__node--live">
          <details>
            <summary>
              <span class="apps-tree__badge num">02</span>
              <span class="apps-tree__title">赛中：盯排名变动</span>
              <span class="apps-tree__hint">展开操作</span>
            </summary>
            <div class="apps-tree__body">
              <p>比赛页下方的比分条随比分刷新，排名页的名次也会实时跟着挪。想知道同轮其他场次怎么影响排名，切到排名页的「近 5 场走势」视图就能对照。</p>
            </div>
          </details>
          <span class="apps-tree__line" aria-hidden="true"></span>
        </li>
        <li class="apps-tree__node apps-tree__node--post">
          <details>
            <summary>
              <span class="apps-tree__badge num">03</span>
              <span class="apps-tree__title">赛后：读战报与数据摘要</span>
              <span class="apps-tree__hint">展开操作</span>
            </summary>
            <div class="apps-tree__body">
              <p>终场哨响后 <span class="num">10</span> 分钟内，图文战报推到客户端。同一场比赛旁边还配一份数据摘要，比分、关键事件、阵容变化逐条列好，方便你回头引用。</p>
            </div>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <section class="apps-collect" aria-labelledby="apps-collect-title">
    <div class="shell layout">
      <div class="layout__main">
        <p class="eyebrow">收藏与再次直达</p>
        <h2 id="apps-collect-title">常看的那几场，标一下就别再找了</h2>
        <p class="lede">收藏夹最多放 <span class="num">60</span> 个赛事或球队页面。按联赛分组摆好，标记点一下变琥珀色，点回来即取消。</p>
        <ul class="apps-collect__list">
          <li><strong>按联赛分组：</strong>几个联赛混着看也不会乱，分组名就是联赛名，一眼找到。</li>
          <li><strong>一步进站：</strong>客户端启动时先显示收藏夹，再决定进哪场；不常看的趁赛季开始前清一下即可。</li>
          <li><strong>跨设备接住：</strong>绑定账号后，手机和平板上标记的赛事会互相同步，收藏不会留在旧机型里。</li>
        </ul>
        <div class="apps-collect__actions">
          <button class="btn btn--lime btn--sm" type="button" data-collect aria-pressed="false">把当前联赛标进收藏</button>
          <a class="btn btn--ghost btn--sm" href="#install">回到安装步骤</a>
        </div>
      </div>
      <aside class="layout__side">
        <figure class="figure apps-collect__figure">
          <div class="figure__media">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="层叠的赛事卡片特写，边缘带青柠高光，卡片上为比分与球队简称" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">收藏后的赛事卡片按联赛分组堆叠，边缘青柠高光标识已标记</figcaption>
        </figure>
      </aside>
    </div>
  </section>

  <section class="apps-perf" aria-labelledby="apps-perf-title">
    <div class="shell">
      <div class="apps-perf__head">
        <p class="eyebrow">适配与性能</p>
        <h2 id="apps-perf-title">旧机型、弱网、地铁里，也别卡住</h2>
        <p class="lede">从 <span class="num">320</span> px 宽的屏幕起就能用，平板和桌面共用同一套数据卡片。首屏平均 <span class="num">1.2</span> 秒打开，全国 <span class="num">6</span> 个分发节点就近取页面。</p>
      </div>
      <div class="apps-perf__grid">
        <figure class="figure figure--wide apps-perf__figure">
          <div class="figure__media">
            <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="手机与平板并排放在同一暗色台面上，屏幕内容抽象显示排名与赛程" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__cap">小屏到大屏同一套数据卡，横向不撑破，纵向不挤字</figcaption>
        </figure>
        <ul class="apps-perf__stats">
          <li><span class="big-num">1.2</span><span class="apps-perf__unit">秒</span><span class="apps-perf__label">首屏平均打开时间</span></li>
          <li><span class="big-num">6</span><span class="apps-perf__unit">个</span><span class="apps-perf__label">全国分发节点就近接入</span></li>
          <li><span class="big-num">320</span><span class="apps-perf__unit">px</span><span class="apps-perf__label">起适配的最小屏幕宽度</span></li>
          <li><span class="big-num">8.0</span><span class="apps-perf__unit">+</span><span class="apps-perf__label">Android 版本下限</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="apps-versions" aria-labelledby="apps-versions-title">
    <div class="shell">
      <p class="eyebrow">版本演进</p>
      <h2 id="apps-versions-title">一年 6 次更新，把移动端一步步补齐</h2>
      <p class="lede">每年 <span class="num">2</span> 次大版本加 <span class="num">4</span> 次季度小版本，合计 <span class="num">6</span> 次功能更新。下面这条时间带从左往右划，看移动端怎么走到今天。</p>
    </div>
    <div class="apps-versions__scroller" role="region" aria-label="移动端版本时间带，可横向滚动" tabindex="0">
      <ol class="apps-versions__track">
        <li class="apps-version">
          <span class="apps-version__year num">2020</span>
          <h3>赛程聚合页上线</h3>
          <p>把散在各处的开球时间收进一个页面，查本轮哪天有球不用再翻三个地方。</p>
        </li>
        <li class="apps-version">
          <span class="apps-version__year num">2021</span>
          <h3>排名页推出</h3>
          <p>从这一年起，名次能在一个页面上直接看，主客场拆分也在同屏切换。</p>
        </li>
        <li class="apps-version">
          <span class="apps-version__year num">2022</span>
          <h3>按轮次组织内容</h3>
          <p>战报改成按轮次集结，一场比赛的复盘跟同轮其他场次放在一起，翻查更顺。</p>
        </li>
        <li class="apps-version">
          <span class="apps-version__year num">2023</span>
          <h3>阵容与伤停进页面</h3>
          <p>赛前名单和伤停提示正式进到单场赛事页，开球前能提前对照。</p>
        </li>
        <li class="apps-version">
          <span class="apps-version__year num">2024</span>
          <h3>收藏夹与个人视图</h3>
          <p>收藏赛事页面和按个人习惯组织的赛事视图上线，回头找比赛不再从联赛首页点起。</p>
        </li>
        <li class="apps-version">
          <span class="apps-version__year num">2025</span>
          <h3>移动端整体改版</h3>
          <p>客户端布局重排，把排名、战报、收藏串成一条路径，小屏阅读也少了横向撑页。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="apps-next" aria-labelledby="apps-next-title">
    <div class="shell apps-next__inner">
      <div>
        <p class="eyebrow">接下来看什么</p>
        <h2 id="apps-next-title">装好了，就顺着这几条路继续</h2>
        <p class="lede">碰到排名不刷新、战报不显示、收藏没同步，去问题排查里按步骤自查；想按轮次翻近几场，赛况观察里有合集；想谈合作或提数据疑问，走联系通道。</p>
      </div>
      <ul class="apps-next__links">
        <li><a class="btn btn--lime" href="/trends/">赛况观察 · 轮次战报合集</a></li>
        <li><a class="btn btn--ghost" href="/troubleshooting/">问题排查 · 常见故障自查</a></li>
        <li><a class="btn btn--ghost" href="/connect/">联系通道 · 客服与合作</a></li>
        <li><a class="btn btn--ghost" href="/">回到首页 · 今日赛程</a></li>
      </ul>
    </div>
  </section>
</main>

.page-products {
  --apps-gap: clamp(48px, 7vw, 92px);
  --apps-radius: 2px;
  color: var(--paper);
}

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

.page-products h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.page-products h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-products .lede {
  margin: 0 0 26px;
  color: var(--paper);
  opacity: .88;
}

.page-products .num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--lime);
}

.page-products .big-num {
  color: var(--lime);
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1;
}

/* ---------- Hero ---------- */
.page-products .apps-hero {
  position: relative;
  padding: 8px 0 var(--apps-gap);
}

.page-products .apps-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.page-products .apps-hero__lead h1 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 5.6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.page-products .apps-hero__points {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .apps-hero__points li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-size: .96rem;
  line-height: 1.6;
  opacity: .9;
}

.page-products .apps-hero__points li::before {
  content: "▸";
  color: var(--lime);
  margin-right: 10px;
  font-family: var(--font-mono);
}

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

.page-products .apps-hero__device {
  min-width: 0;
}

.page-products .apps-device {
  margin: 0;
}

.page-products .apps-device__screen {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  padding: 14px;
  overflow: hidden;
}

.page-products .apps-device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.4) contrast(1.05) brightness(.8);
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .35;
}

.page-products .apps-device__svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}

/* ---------- Install ---------- */
.page-products .apps-install {
  padding: 0 0 var(--apps-gap);
}

.page-products .apps-steps {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .apps-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-products .apps-steps__idx {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lime);
}

.page-products .apps-steps__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .84;
}

.page-products .apps-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--glass);
  border-radius: var(--apps-radius);
}

.page-products .apps-copyrow__text {
  margin: 0;
  flex: 1 1 240px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--mute);
}

.page-products .apps-install__figure,
.page-products .apps-collect__figure {
  margin: 0;
}

/* ---------- Abilities ---------- */
.page-products .apps-abilities {
  padding: var(--apps-gap) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .apps-abilities__filter {
  margin-bottom: 26px;
}

.page-products .apps-ability-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.page-products .apps-ability {
  position: relative;
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid transparent;
  background: var(--ink-2);
  transition: border-color .16s var(--ease), transform .16s var(--ease), background-color .16s var(--ease);
}

.page-products .apps-ability:hover {
  border-color: var(--lime);
  transform: translateY(-2px);
  background: var(--ink-3);
}

.page-products .apps-ability .tag {
  margin-bottom: 14px;
}

.page-products .apps-ability h3 {
  font-size: 1.12rem;
}

.page-products .apps-ability p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .82;
}

/* ---------- Path ---------- */
.page-products .apps-path {
  position: relative;
  padding: var(--apps-gap) 0;
  overflow: hidden;
  background: var(--ink);
}

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

.page-products .apps-path__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.28) brightness(.4) hue-rotate(90deg);
  opacity: .5;
}

.page-products .apps-path .shell {
  position: relative;
  z-index: 1;
}

.page-products .apps-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.page-products .apps-tree__node {
  position: relative;
  padding-bottom: 0;
}

.page-products .apps-tree__node details {
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--apps-radius);
  transition: border-color .16s var(--ease);
}

.page-products .apps-tree__node details[open],
.page-products .apps-tree__node details:hover {
  border-color: var(--lime);
}

.page-products .apps-tree__node summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.page-products .apps-tree__node summary::-webkit-details-marker {
  display: none;
}

.page-products .apps-tree__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: .92rem;
  color: var(--ink);
  background: var(--lime);
  flex: 0 0 auto;
}

.page-products .apps-tree__node--live .apps-tree__badge {
  background: var(--amber);
}

.page-products .apps-tree__node--post .apps-tree__badge {
  background: var(--steel);
  color: var(--ink);
}

.page-products .apps-tree__title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  min-width: 0;
}

.page-products .apps-tree__hint {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--mute);
  flex: 0 0 auto;
}

.page-products .apps-tree__node details[open] .apps-tree__hint {
  color: var(--lime);
}

.page-products .apps-tree__body {
  padding: 0 18px 18px 70px;
}

.page-products .apps-tree__body p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--paper);
  opacity: .84;
}

.page-products .apps-tree__line {
  display: block;
  width: 1px;
  height: 22px;
  margin-left: 38px;
  background: var(--line);
}

.page-products .apps-tree__node--live .apps-tree__line {
  background: linear-gradient(var(--lime), var(--amber));
}

.page-products .apps-tree__node:last-child .apps-tree__line {
  display: none;
}

/* ---------- Collect ---------- */
.page-products .apps-collect {
  padding: var(--apps-gap) 0;
}

.page-products .apps-collect__list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-products .apps-collect__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
  line-height: 1.7;
  color: var(--paper);
  opacity: .86;
}

.page-products .apps-collect__list strong {
  color: var(--lime);
  font-weight: 700;
}

.page-products .apps-collect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Perf ---------- */
.page-products .apps-perf {
  padding: var(--apps-gap) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-products .apps-perf__head {
  margin-bottom: 30px;
}

.page-products .apps-perf__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-products .apps-perf__figure {
  margin: 0;
}

.page-products .apps-perf__stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-products .apps-perf__stats li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 18px 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.page-products .apps-perf__stats .big-num {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.page-products .apps-perf__unit {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--amber);
  letter-spacing: .04em;
}

.page-products .apps-perf__label {
  flex: 1 0 100%;
  font-size: .78rem;
  color: var(--mute);
  line-height: 1.4;
}

/* ---------- Versions ---------- */
.page-products .apps-versions {
  padding: var(--apps-gap) 0;
}

.page-products .apps-versions__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 0 max(24px, calc((100vw - 1240px) / 2)) 12px;
  -webkit-overflow-scrolling: touch;
}

.page-products .apps-versions__scroller:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -4px;
}

.page-products .apps-versions__track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0;
  border-top: 2px solid var(--line);
  width: max-content;
}

.page-products .apps-version {
  flex: 0 0 auto;
  width: min(280px, 78vw);
  padding: 26px 22px 8px 0;
  scroll-snap-align: start;
  position: relative;
}

.page-products .apps-version::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--lime);
  border: 2px solid var(--ink);
}

.page-products .apps-version:nth-child(even)::before {
  background: var(--amber);
}

.page-products .apps-version__year {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  margin-bottom: 12px;
}

.page-products .apps-version h3 {
  font-size: 1rem;
}

.page-products .apps-version p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--mute);
}

/* ---------- Next ---------- */
.page-products .apps-next {
  padding: var(--apps-gap) 0 calc(var(--apps-gap) + 8px);
  border-top: 1px solid var(--line);
}

.page-products .apps-next__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.page-products .apps-next__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-products .apps-next__links .btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .page-products .apps-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: 44px;
    align-items: end;
  }

  .page-products .apps-hero__device {
    transform: translateY(18px);
  }

  .page-products .apps-ability-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .apps-ability {
    border-right: 1px solid var(--line);
  }

  .page-products .apps-perf__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
    gap: 28px;
  }
}

@media (min-width: 960px) {
  .page-products .apps-path__bg img {
    object-position: center 30%;
  }

  .page-products .apps-next__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    align-items: start;
  }

  .page-products .apps-next__links {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .page-products .apps-tree__body {
    padding-left: 18px;
  }

  .page-products .apps-tree__line {
    margin-left: 18px;
  }

  .page-products .apps-hero__points li {
    font-size: .9rem;
  }

  .page-products .apps-steps__item {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .apps-ability,
  .page-products .apps-tree__node details {
    transition: none;
  }
}