.page-about {
  --about-pad: clamp(46px, 6.5vw, 92px);
  --about-num: clamp(42px, 6vw, 76px);
  color: var(--paper);
  background: var(--indigo);
  overflow-x: hidden;
}

.page-about a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 197, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-about a:hover {
  color: var(--gold);
  border-bottom-color: rgba(242, 181, 68, .55);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.page-about .about-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(46, 230, 197, .16), transparent 58%),
    linear-gradient(180deg, rgba(5, 8, 20, .46) 0%, rgba(11, 18, 48, .88) 58%, var(--indigo) 100%);
}

.page-about .about-hero__inner {
  padding-top: clamp(30px, 5vw, 52px);
  padding-bottom: clamp(44px, 7vw, 84px);
}

.page-about .about-hero__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 6.2vw, 68px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .01em;
  max-width: 15em;
}

.page-about .about-hero__lede {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-hero__tags li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--mist);
}

/* ---------- 章节索引 ---------- */

.page-about .about-toc {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.page-about .about-toc__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-toc__list::-webkit-scrollbar {
  display: none;
}

.page-about .about-toc__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--mist);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}

.page-about .about-toc__link:hover {
  color: var(--paper);
  border-color: var(--line);
}

.page-about .about-toc__link.is-active {
  color: var(--gold);
  border-color: rgba(242, 181, 68, .45);
  background: var(--gold-soft);
}

.page-about .about-toc__idx {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--teal);
}

/* ---------- 章节骨架 ---------- */

.page-about .about-chapter {
  position: relative;
  padding: var(--about-pad) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-chapter:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(18, 27, 68, .55), rgba(11, 18, 48, 0) 78%);
}

.page-about .about-chapter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-about .about-chapter__aside {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.page-about .about-chapter__num {
  font-size: var(--about-num);
  line-height: .86;
  letter-spacing: -.02em;
  color: rgba(143, 166, 200, .26);
  -webkit-text-stroke: 1px rgba(143, 166, 200, .45);
}

.page-about .about-chapter__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-chapter__body {
  min-width: 0;
}

.page-about .about-chapter__body .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.28;
}

.page-about .about-chapter__body .section-lede {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-chapter__body > p {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.9;
  color: rgba(244, 247, 255, .88);
}

.page-about .about-chapter__foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 01 场景要点 ---------- */

.page-about .about-points {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-points__item {
  padding: 20px 18px 22px;
  background: var(--panel-2);
  border-top: 2px solid transparent;
  transition: border-top-color .3s var(--ease), background-color .3s var(--ease);
}

.page-about .about-points__item:hover {
  border-top-color: var(--gold);
  background: var(--panel);
}

.page-about .about-points__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244, 247, 255, .86);
}

/* ---------- 02 版本轨道 ---------- */

.page-about .about-timeline {
  position: relative;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, var(--teal) 0%, var(--line) 62%, rgba(42, 55, 102, 0) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 0 30px 30px;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 11px;
  height: 11px;
  background: var(--indigo);
  border: 1px solid var(--teal);
  transform: rotate(45deg);
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 4px;
}

.page-about .about-timeline__item:last-child::before {
  background: var(--gold);
  border-color: var(--gold);
}

.page-about .about-timeline__ver {
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--teal);
}

.page-about .about-timeline__item:last-child .about-timeline__ver {
  color: var(--gold);
}

.page-about .about-timeline__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper);
}

.page-about .about-timeline__desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 图片 ---------- */

.page-about .about-figure {
  margin: 30px 0 0;
}

.page-about .about-figure .figure__caption {
  color: var(--mist);
}

/* ---------- 03 校验网格 ---------- */

.page-about .about-verify {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-verify__cell {
  padding: 22px 18px 24px;
  background: var(--panel-2);
  border-top: 2px solid transparent;
  transition: border-top-color .3s var(--ease), background-color .3s var(--ease);
}

.page-about .about-verify__cell:hover {
  border-top-color: var(--gold);
  background: var(--panel);
}

.page-about .about-verify__num {
  display: block;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.1;
  color: var(--gold);
}

.page-about .about-verify__num--teal {
  color: var(--teal);
}

.page-about .about-verify__label {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(244, 247, 255, .84);
}

/* ---------- 04 岗位分工 ---------- */

.page-about .about-roles {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.page-about .about-role {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-role__name {
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--teal);
}

.page-about .about-role__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244, 247, 255, .86);
}

/* ---------- 05 覆盖数据 ---------- */

.page-about .about-stats {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-stat {
  padding: 24px 18px 26px;
  background: var(--panel-2);
}

.page-about .about-stat__num {
  display: block;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--teal);
}

.page-about .about-stat__num--gold {
  color: var(--gold);
}

.page-about .about-stat__unit {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--mist);
}

.page-about .about-stat__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(244, 247, 255, .8);
}

/* ---------- 06 合作 ---------- */

.page-about .about-partners {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .about-partners__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-partners__num {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  color: var(--teal);
}

.page-about .about-partners__num--gold {
  color: var(--gold);
}

.page-about .about-partners__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
}

.page-about .about-partners__desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 结尾 ---------- */

.page-about .about-closing {
  padding: var(--about-pad) 0 calc(var(--about-pad) + 8px);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(46, 230, 197, .13), transparent 62%),
    var(--ink);
  border-top: 1px solid var(--line);
}

.page-about .about-closing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.28;
}

.page-about .about-closing__text {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

/* ---------- 显现 ---------- */

.page-about [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 断点 ---------- */

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

  .page-about .about-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-about .about-chapter__inner {
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 52px;
  }

  .page-about .about-chapter__aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 6px;
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .page-about .about-timeline__item {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 22px;
    padding-left: 34px;
  }

  .page-about .about-timeline__ver {
    text-align: right;
  }

  .page-about .about-role {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 28px;
    align-items: baseline;
  }
}

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

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

  .page-about .about-verify {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .page-about .about-partners__item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
  }

  .page-about .about-hero__tags li {
    font-size: 11px;
    padding: 5px 9px;
  }
}


<main id="main-content" class="page-about">
  <section class="about-hero">
    <div class="about-hero__media">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间球场看台灯光与深蓝渐变的抽象背景">
    </div>
    <div class="container about-hero__inner">
      <nav class="breadcrumb" aria-label="面包屑">
        <ul class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
          <li class="breadcrumb__item" aria-hidden="true"><span class="breadcrumb__sep">/</span></li>
          <li class="breadcrumb__item"><span class="breadcrumb__link" aria-current="page">品牌价值</span></li>
        </ul>
      </nav>
      <p class="eyebrow">品牌价值 · 2019 至今</p>
      <h1 class="about-hero__title">把赛程入口做扎实，把历史资料留下来</h1>
      <p class="about-hero__lede">多宝平台自 2019 年上线，一直在做同一件事：让跟队的球迷打开页面就能找到今晚的比赛，赛后翻得到统计，隔几个月回来还调得出旧的版本资料。这件事听着简单，背后是一次次入口重排、一套双人复核的编辑流程，和一支常年值夜的团队。</p>
      <ul class="about-hero__tags">
        <li>快速入口</li>
        <li>资料回访</li>
        <li>版本对照</li>
      </ul>
    </div>
  </section>

  <nav class="about-toc" aria-label="页面章节">
    <div class="container">
      <ol class="about-toc__list">
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-origin" data-spy-link="sec-origin"><span class="about-toc__idx mono">01</span>起点与跟队场景</a></li>
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-route" data-spy-link="sec-route"><span class="about-toc__idx mono">02</span>版本路线</a></li>
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-verify" data-spy-link="sec-verify"><span class="about-toc__idx mono">03</span>数据校验</a></li>
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-team" data-spy-link="sec-team"><span class="about-toc__idx mono">04</span>团队分工</a></li>
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-reach" data-spy-link="sec-reach"><span class="about-toc__idx mono">05</span>覆盖与用户</a></li>
        <li class="about-toc__item"><a class="about-toc__link" href="#sec-partner" data-spy-link="sec-partner"><span class="about-toc__idx mono">06</span>合作与认可</a></li>
      </ol>
    </div>
  </nav>

  <section class="about-chapter" id="sec-origin" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">01</span>
        <span class="about-chapter__kicker">起点</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">从一张手动整理的赛程表开始</h2>
        <p class="section-lede">2019 年，平台还只是一张手动维护的赛程表。整理的过程中，我们看清了球迷那一晚真正在做的事。</p>
        <p>有人刚下班，想确认半小时后开球的是哪一场；有人看完比赛，第二天要复盘数据和关键球员表现；也有人隔了两个月回来，想把当时看过的资料再对一遍。这三种需求叠在一起，才是一次完整的跟队体验。</p>
        <p>所以我们的精力主要放在两头：入口少绕路，资料留得住。<a href="/">首页</a>导航第二位的赛程栏目常年不动；赛事回访专区按版本保留历史资料包，中间的功能再慢慢往上加。</p>
        <ul class="about-points">
          <li class="about-points__item">
            <span class="chip chip--gold">第一次来</span>
            <p class="about-points__text">导航第二位固定是赛程栏目，点进去就是当天的场次，不用在页面里来回试。第一次访问的球迷，按这条路径走最快。</p>
          </li>
          <li class="about-points__item">
            <span class="chip chip--teal">长期跟队</span>
            <p class="about-points__text">赛事回访专区保留 2022 年以来的 9 个历史版本资料包，3 月版本可以在线对照。跟一支队跟了几年的人，旧资料随时调得出来。</p>
          </li>
          <li class="about-points__item">
            <span class="chip chip--orange">看数据</span>
            <p class="about-points__text">PC 端复盘页整理了每场的得分分布与关键球员数据，<a href="/platform/">平台服务</a>里写清了各模块的位置和用法。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="sec-route" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">02</span>
        <span class="about-chapter__kicker">路线</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">每一次调整，都在缩短找入口的路</h2>
        <p class="section-lede">六年多里平台完成 17 次版本升级，真正改变了使用习惯的是下面四个节点。</p>
        <ol class="about-timeline">
          <li class="about-timeline__item">
            <span class="about-timeline__ver mono">V1.x</span>
            <div class="about-timeline__content">
              <h3 class="about-timeline__title">基础赛程与入口导航</h3>
              <p class="about-timeline__desc">先把比赛找齐，再把栏目摆正。这个阶段的赛程按日期和项目排列，球迷第一次能在同一个页面里看完当天的全部场次。</p>
            </div>
          </li>
          <li class="about-timeline__item">
            <span class="about-timeline__ver mono">V2.x</span>
            <div class="about-timeline__content">
              <h3 class="about-timeline__title">赛事复盘与帮助文档</h3>
              <p class="about-timeline__desc">赛后有了可看的技术统计，遇到问题也有了图文说明。帮助文档从最早的十几篇起步，逐渐按账号、赛程、阵容、复盘、版本五类长成型。</p>
            </div>
          </li>
          <li class="about-timeline__item">
            <span class="about-timeline__ver mono">V3.0</span>
            <div class="about-timeline__content">
              <h3 class="about-timeline__title">首页导航重构</h3>
              <p class="about-timeline__desc">栏目变多了，入口反而要更清楚。这次重构把常用栏目提到导航主干上，压平页面层级，减少球迷在几个页面之间来回跳的次数。</p>
            </div>
          </li>
          <li class="about-timeline__item">
            <span class="about-timeline__ver mono">V3.1</span>
            <div class="about-timeline__content">
              <h3 class="about-timeline__title">赛程进第二位，射手榜上线</h3>
              <p class="about-timeline__desc">赛程栏目固定在首页导航第二位；射手榜覆盖 5 大联赛与 6 项杯赛，支持按赛季、轮次和球员维度检索，赛前查人赛后看分布都在同一个模块里。</p>
            </div>
          </li>
        </ol>
        <figure class="figure about-figure">
          <img class="figure__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="从 V1 到 V3.1 的轨道式几何图形与版本刻度示意" loading="lazy" decoding="async">
          <figcaption class="figure__caption">版本推进的四个节点：入口位置、复盘能力与检索维度依次叠加。</figcaption>
        </figure>
        <p class="about-chapter__foot">版本记录按版本发布、数据观察、使用指南与赛事专题四类持续更新，全部条目在<a href="/press/">版本动态</a>里可以按月翻看。</p>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="sec-verify" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">03</span>
        <span class="about-chapter__kicker">校验</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">一条赛程改动，经过两双手才算数</h2>
        <p class="section-lede">赛事数据最怕的不是慢，是错。写反一个比分，用户第二次就不会再来。</p>
        <div class="about-verify">
          <div class="about-verify__cell">
            <span class="about-verify__num mono">双人</span>
            <p class="about-verify__label">赛程与结果类改动由两名数据校验岗分别确认后才对外呈现，任一方存疑就退回重查。</p>
          </div>
          <div class="about-verify__cell">
            <span class="about-verify__num about-verify__num--teal mono">12 分钟</span>
            <p class="about-verify__label">从赛事方变更到站内可见的平均间隔。夜间密集赛程段由值班编辑盯着节奏。</p>
          </div>
          <div class="about-verify__cell">
            <span class="about-verify__num mono">8,600+ 场</span>
            <p class="about-verify__label">PC 端复盘页已整理的赛后技术统计场次，每场包含得分分布与关键球员数据。</p>
          </div>
          <div class="about-verify__cell">
            <span class="about-verify__num about-verify__num--teal mono">AA</span>
            <p class="about-verify__label">正文对比度标准。2023 年完成页面对比度与无障碍优化，帮助文档的小号字也在同一轮里调整过。</p>
          </div>
        </div>
        <figure class="figure about-figure">
          <img class="figure__img" src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="两条并行数据线与校验标记组成的抽象流程图" loading="lazy" decoding="async">
          <figcaption class="figure__caption">两名校验岗各自走一遍，两条线在同一个节点汇合后才对外发布。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="sec-team" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">04</span>
        <span class="about-chapter__kicker">团队</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">38 个人守着一块战术板</h2>
        <p class="section-lede">运营团队共 38 人，其中内容编辑与数据校验岗位 16 人。分工按内容类型切，不按页面切，所以从一条赛程上线到一份旧资料被调出来，都能找到对应的负责人。</p>
        <dl class="about-roles">
          <div class="about-role">
            <dt class="about-role__name mono">赛程编辑</dt>
            <dd class="about-role__desc">负责足球、篮球、网球、电竞等 12 个常见项目的条目排布，以及开赛前临时变更的处理。日更赛程条目 300+ 场的工作量主要落在这一岗。</dd>
          </div>
          <div class="about-role">
            <dt class="about-role__name mono">复盘数据岗</dt>
            <dd class="about-role__desc">整理赛后技术统计与得分分布，维护射手榜的赛季、轮次、球员三个检索维度，保证同一场比赛在不同入口看到的数据一致。</dd>
          </div>
          <div class="about-role">
            <dt class="about-role__name mono">文档编辑</dt>
            <dd class="about-role__desc">维护 140+ 篇图文说明，按账号、赛程、阵容、复盘、版本五类组织。赛前阵容去哪查这类高频问题，入口就收在帮助文档的阵容分类下。</dd>
          </div>
          <div class="about-role">
            <dt class="about-role__name mono">版本档案</dt>
            <dd class="about-role__desc">管理赛事回访专区的历史版本资料，保证隔了几个月回来的球迷，能按当时看到的版本把内容调出来对照。</dd>
          </div>
        </dl>
        <p class="about-chapter__foot">如果你长期跟一支队，发现某场比赛的数据和现场印象对不上，直接写信到客服邮箱，值班编辑会复核并回复。</p>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="sec-reach" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">05</span>
        <span class="about-chapter__kicker">覆盖</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">31 个省级行政区，六成以上是回头客</h2>
        <p class="section-lede">用户结构决定了我们做决定的方式。入口一旦挪动，第二天就会有人察觉。</p>
        <div class="about-stats">
          <div class="about-stat">
            <span class="about-stat__num mono">31</span>
            <span class="about-stat__unit">个省级行政区</span>
            <p class="about-stat__note">服务覆盖全国，从东部沿海到西部省份都能稳定访问赛程与复盘内容。</p>
          </div>
          <div class="about-stat">
            <span class="about-stat__num about-stat__num--gold mono">63%</span>
            <span class="about-stat__unit">长期跟队用户</span>
            <p class="about-stat__note">超过六成的访问来自跟踪固定球队的熟面孔，这也是我们把历史资料留着的原因。</p>
          </div>
          <div class="about-stat">
            <span class="about-stat__num mono">6.8</span>
            <span class="about-stat__unit">分钟 / 次</span>
            <p class="about-stat__note">平均单次访问时长。多数人不是扫一眼就走，而是在页面里连着看好几场。</p>
          </div>
          <div class="about-stat">
            <span class="about-stat__num about-stat__num--gold mono">9%</span>
            <span class="about-stat__unit">海外华人访问</span>
            <p class="about-stat__note">时差让夜里看球变成常态需求，移动端适配和跨时区赛程显示因此格外重要。</p>
          </div>
        </div>
        <p class="about-chapter__foot">平台兼容 Chrome、Edge、Safari、Firefox 近两年主流版本，并适配 iOS 与 Android 移动端访问，换设备不用重新熟悉页面。</p>
      </div>
    </div>
  </section>

  <section class="about-chapter" id="sec-partner" data-reveal>
    <div class="container about-chapter__inner">
      <div class="about-chapter__aside">
        <span class="about-chapter__num mono">06</span>
        <span class="about-chapter__kicker">合作</span>
      </div>
      <div class="about-chapter__body">
        <h2 class="section-title">数据从哪来，谁在长期供给</h2>
        <p class="section-lede">赛事数据不是一家能做完的事，所以我们的合作按供给环节划分。</p>
        <ul class="about-partners">
          <li class="about-partners__item">
            <span class="about-partners__num mono">24</span>
            <div>
              <h3 class="about-partners__title">区域体育媒体</h3>
              <p class="about-partners__desc">提供本地赛事的现场线索与赛程调整信息，是我们判断一场比赛是否有变动的重要来源。</p>
            </div>
          </li>
          <li class="about-partners__item">
            <span class="about-partners__num mono">18</span>
            <div>
              <h3 class="about-partners__title">赛事数据服务商</h3>
              <p class="about-partners__desc">提供标准化的技术统计底稿，复盘页与射手榜的得分分布建立在这批底稿之上。</p>
            </div>
          </li>
          <li class="about-partners__item">
            <span class="about-partners__num about-partners__num--gold mono">2024</span>
            <div>
              <h3 class="about-partners__title">年度数据体验案例</h3>
              <p class="about-partners__desc">由行业媒体评选。对我们更实际的意义是：把入口设计和历史资料回访放在一起考虑，这条路是走得通的。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-closing">
    <div class="container about-closing__inner">
      <h2 class="about-closing__title">想聊聊具体的问题，从这里开始</h2>
      <p class="about-closing__text">无论是赛程入口找不到、某场数据想确认，还是想了解版本资料的用法，写一封邮件就行，工作日内会有人回。</p>
      <div class="about-closing__actions">
        <a class="btn btn--primary" href="/feedback/">联系与反馈</a>
        <a class="btn btn--ghost" href="/platform/">查看平台服务</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-pad: clamp(46px, 6.5vw, 92px);
  --about-num: clamp(42px, 6vw, 76px);
  color: var(--paper);
  background: var(--indigo);
  overflow-x: hidden;
}

.page-about a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 197, .35);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-about a:hover {
  color: var(--gold);
  border-bottom-color: rgba(242, 181, 68, .55);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.page-about .about-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(46, 230, 197, .16), transparent 58%),
    linear-gradient(180deg, rgba(5, 8, 20, .46) 0%, rgba(11, 18, 48, .88) 58%, var(--indigo) 100%);
}

.page-about .about-hero__inner {
  padding-top: clamp(30px, 5vw, 52px);
  padding-bottom: clamp(44px, 7vw, 84px);
}

.page-about .about-hero__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 6.2vw, 68px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .01em;
  max-width: 15em;
}

.page-about .about-hero__lede {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-hero__tags li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--mist);
}

/* ---------- 章节索引 ---------- */

.page-about .about-toc {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.page-about .about-toc__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-toc__list::-webkit-scrollbar {
  display: none;
}

.page-about .about-toc__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--mist);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}

.page-about .about-toc__link:hover {
  color: var(--paper);
  border-color: var(--line);
}

.page-about .about-toc__link.is-active {
  color: var(--gold);
  border-color: rgba(242, 181, 68, .45);
  background: var(--gold-soft);
}

.page-about .about-toc__idx {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--teal);
}

/* ---------- 章节骨架 ---------- */

.page-about .about-chapter {
  position: relative;
  padding: var(--about-pad) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-chapter:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(18, 27, 68, .55), rgba(11, 18, 48, 0) 78%);
}

.page-about .about-chapter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-about .about-chapter__aside {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.page-about .about-chapter__num {
  font-size: var(--about-num);
  line-height: .86;
  letter-spacing: -.02em;
  color: rgba(143, 166, 200, .26);
  -webkit-text-stroke: 1px rgba(143, 166, 200, .45);
}

.page-about .about-chapter__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-about .about-chapter__body {
  min-width: 0;
}

.page-about .about-chapter__body .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.28;
}

.page-about .about-chapter__body .section-lede {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-chapter__body > p {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.9;
  color: rgba(244, 247, 255, .88);
}

.page-about .about-chapter__foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 01 场景要点 ---------- */

.page-about .about-points {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-points__item {
  padding: 20px 18px 22px;
  background: var(--panel-2);
  border-top: 2px solid transparent;
  transition: border-top-color .3s var(--ease), background-color .3s var(--ease);
}

.page-about .about-points__item:hover {
  border-top-color: var(--gold);
  background: var(--panel);
}

.page-about .about-points__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244, 247, 255, .86);
}

/* ---------- 02 版本轨道 ---------- */

.page-about .about-timeline {
  position: relative;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, var(--teal) 0%, var(--line) 62%, rgba(42, 55, 102, 0) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 0 30px 30px;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 11px;
  height: 11px;
  background: var(--indigo);
  border: 1px solid var(--teal);
  transform: rotate(45deg);
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 4px;
}

.page-about .about-timeline__item:last-child::before {
  background: var(--gold);
  border-color: var(--gold);
}

.page-about .about-timeline__ver {
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--teal);
}

.page-about .about-timeline__item:last-child .about-timeline__ver {
  color: var(--gold);
}

.page-about .about-timeline__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper);
}

.page-about .about-timeline__desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 图片 ---------- */

.page-about .about-figure {
  margin: 30px 0 0;
}

.page-about .about-figure .figure__caption {
  color: var(--mist);
}

/* ---------- 03 校验网格 ---------- */

.page-about .about-verify {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-verify__cell {
  padding: 22px 18px 24px;
  background: var(--panel-2);
  border-top: 2px solid transparent;
  transition: border-top-color .3s var(--ease), background-color .3s var(--ease);
}

.page-about .about-verify__cell:hover {
  border-top-color: var(--gold);
  background: var(--panel);
}

.page-about .about-verify__num {
  display: block;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.1;
  color: var(--gold);
}

.page-about .about-verify__num--teal {
  color: var(--teal);
}

.page-about .about-verify__label {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(244, 247, 255, .84);
}

/* ---------- 04 岗位分工 ---------- */

.page-about .about-roles {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.page-about .about-role {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-role__name {
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--teal);
}

.page-about .about-role__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244, 247, 255, .86);
}

/* ---------- 05 覆盖数据 ---------- */

.page-about .about-stats {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-about .about-stat {
  padding: 24px 18px 26px;
  background: var(--panel-2);
}

.page-about .about-stat__num {
  display: block;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--teal);
}

.page-about .about-stat__num--gold {
  color: var(--gold);
}

.page-about .about-stat__unit {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--mist);
}

.page-about .about-stat__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(244, 247, 255, .8);
}

/* ---------- 06 合作 ---------- */

.page-about .about-partners {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-about .about-partners__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-partners__num {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  color: var(--teal);
}

.page-about .about-partners__num--gold {
  color: var(--gold);
}

.page-about .about-partners__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
}

.page-about .about-partners__desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 结尾 ---------- */

.page-about .about-closing {
  padding: var(--about-pad) 0 calc(var(--about-pad) + 8px);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(46, 230, 197, .13), transparent 62%),
    var(--ink);
  border-top: 1px solid var(--line);
}

.page-about .about-closing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.28;
}

.page-about .about-closing__text {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

/* ---------- 显现 ---------- */

.page-about [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 断点 ---------- */

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

  .page-about .about-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-about .about-chapter__inner {
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 52px;
  }

  .page-about .about-chapter__aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 6px;
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .page-about .about-timeline__item {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 22px;
    padding-left: 34px;
  }

  .page-about .about-timeline__ver {
    text-align: right;
  }

  .page-about .about-role {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 28px;
    align-items: baseline;
  }
}

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

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

  .page-about .about-verify {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .page-about .about-partners__item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 12px;
  }

  .page-about .about-hero__tags li {
    font-size: 11px;
    padding: 5px 9px;
  }
}