.page-about {
  --about-pad: clamp(38px, 5.2vw, 82px);
  --about-soft: rgba(36, 68, 95, 0.6);
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--about-soft);
  background:
    radial-gradient(120% 90% at 8% -20%, rgba(53, 224, 208, 0.14), transparent 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(230, 180, 92, 0.08), transparent 62%),
    var(--ink-950);
}

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

.page-about .about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.65);
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.5) 0%, rgba(7, 17, 31, 0.86) 58%, var(--ink-950) 100%);
}

.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 6vw, 88px) clamp(30px, 4.6vw, 62px);
}

.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin-bottom: clamp(20px, 3.4vw, 42px);
}

.page-about .crumbs a {
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .crumbs span[aria-current="page"] {
  color: var(--gold);
}

.page-about .about-hero__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-about .about-hero__tag .num {
  color: var(--ink-950);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: var(--radius);
}

.page-about .about-hero__tagline {
  color: var(--paper-dim);
}

.page-about .about-hero h1 {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20em;
  text-wrap: balance;
}

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

.page-about .about-hero__stats {
  list-style: none;
  margin: clamp(26px, 3.6vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--about-soft);
  border: 1px solid var(--about-soft);
}

.page-about .about-hero__stats li {
  background: rgba(12, 27, 44, 0.82);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-about .about-hero__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-about .about-hero__unit {
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--paper-dim);
}

.page-about .about-hero__label {
  font-size: 12.5px;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

/* ---------- 章节导航 ---------- */
.page-about .about-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  background: rgba(4, 16, 24, 0.94);
  border-bottom: 1px solid var(--about-soft);
  backdrop-filter: blur(10px);
}

.page-about .about-subnav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.page-about .about-subnav__link {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-subnav__link:hover,
.page-about .about-subnav__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .about-subnav__readout {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  white-space: nowrap;
}

.page-about .about-subnav__readout [data-section-readout] {
  color: var(--orange);
}

/* ---------- 章节面板 ---------- */
.page-about .about-block {
  padding-block: var(--about-pad);
  border-bottom: 1px solid var(--about-soft);
  scroll-margin-top: calc(var(--header-h) + 58px);
}

.page-about .about-block__head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 42px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--about-soft);
}

.page-about .chapter-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 80px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: rgba(53, 224, 208, 0.06);
  -webkit-text-stroke: 1px rgba(36, 68, 95, 0.95);
}

.page-about .chapter-num.is-current {
  color: rgba(53, 224, 208, 0.12);
  -webkit-text-stroke-color: var(--cyan);
}

.page-about .about-block__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24em;
}

.page-about .about-block__grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
  min-width: 0;
}

.page-about .about-block__main,
.page-about .about-block__aside {
  min-width: 0;
}

.page-about .about-block__main p {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--paper-dim);
}

.page-about .about-block__main p:last-child {
  margin-bottom: 0;
}

/* ---------- 要点列表 ---------- */
.page-about .about-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-points li {
  position: relative;
  padding: 15px 0 15px 24px;
  border-bottom: 1px solid var(--about-soft);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper-dim);
}

.page-about .about-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 11px;
  height: 2px;
  background: var(--cyan);
}

.page-about .about-points strong {
  display: block;
  color: var(--paper);
  font-weight: 600;
  margin-bottom: 2px;
}

/* ---------- 图表与配图 ---------- */
.page-about .about-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}

.page-about .about-figure {
  margin: 0;
  border: 1px solid var(--about-soft);
  background: var(--ink-800);
  box-shadow: var(--shadow-panel);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.8);
}

.page-about .about-figure__cap {
  padding: 12px 14px;
  border-top: 1px solid var(--about-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--paper-dim);
}

/* ---------- 版本阶段 ---------- */
.page-about .about-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: phase;
}

.page-about .about-phase {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-phase:last-child {
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-phase__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
  align-self: start;
}

.page-about .about-phase__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--paper);
}

.page-about .about-phase__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-dim);
}

/* ---------- 规格摘要 ---------- */
.page-about .about-spec {
  margin: 0;
  border: 1px solid var(--about-soft);
  background: var(--ink-800);
}

.page-about .about-spec__row {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-spec__row:last-child {
  border-bottom: 0;
}

.page-about .about-spec dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-about .about-spec dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
}

/* ---------- 工序步骤 ---------- */
.page-about .about-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-about .about-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-steps li:last-child {
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-steps__idx {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--orange);
}

.page-about .about-steps h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--paper);
}

.page-about .about-steps p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-dim);
}

/* ---------- 标签组 ---------- */
.page-about .about-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .about-tags .tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border-radius: var(--radius);
}

/* ---------- 结尾 ---------- */
.page-about .about-next {
  padding-block: clamp(40px, 5.4vw, 84px);
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255, 122, 69, 0.1), transparent 60%),
    var(--ink-950);
}

.page-about .about-next__inner {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.page-about .about-next h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page-about .about-next p {
  margin: 0;
  font-size: clamp(14.5px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--paper-dim);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-hero__stats li {
    padding: 20px 18px;
  }

  .page-about .about-spec__row {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 15px 18px;
  }

  .page-about .about-phase {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 20px 0;
  }
}

@media (min-width: 960px) {
  .page-about .about-block__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4.5vw, 68px);
    align-items: start;
  }

  .page-about .about-block__grid--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-about .about-block__grid--flip .about-figure {
    order: -1;
  }

  .page-about .about-block__head {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: end;
    gap: 24px;
  }

  .page-about .about-next__inner {
    max-width: 820px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .crumbs a,
  .page-about .about-subnav__link {
    transition: none;
  }
}
<<<END>>>

等等——我不应该加 `<<<END>>>`。协议里写的标记就只有 `` 和 ``，每个只能出现一次。所以要删掉那个尾部标记。

另外再核对一下：`.page-about .about-block__grid--flip .about-figure { order: -1; }`——但这个块里图片本来就在前面。在某些版本里我把图片放在了第一 DOM 位置。嗯，在“阶段”那个块里，图片在 DOM 里本来就靠前，再给它加 `order: -1` 反而多余。在“流程”那个块里，图片在 DOM 里靠后，`order: -1` 会把它拉到前面。不过视觉上我更想把图片放右侧。那就干脆去掉 `order: -1`，用普通的网格列顺序就好——图片始终是第一列。可以。

另外，`.about-block__grid--flip` 的列宽比例为 0.9/1.1，图片在左。

还有一点要确认：`text-wrap: balance` 支持没问题，留着也行。

就这样定稿吧。
<main id="main-content" class="page-about">

  <section class="about-hero" data-section="起点">
    <div class="about-hero__media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深色桌面上层叠排开的档案夹与数据卡片，暖金标签在冷光下反出细边">
    </div>
    <div class="shell about-hero__inner">
      <nav class="crumbs" aria-label="面包屑">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">品牌总览</span>
      </nav>

      <p class="about-hero__tag"><span class="num">品牌档案</span><span class="about-hero__tagline">中国区赛事资料服务</span></p>

      <h1>2019 年至今，金多宝赛事把中国区赛事资料做成一份长期可查的档案</h1>

      <p class="about-hero__lede">
        我们最早只做一件事：把中国区各联赛的赛程按日期排清楚。后来用户的问题一个接一个——这场的数据在哪看、谁有伤停、上一轮是什么样。
        今天，金多宝赛事把这些答案放进同一套资料里，覆盖 31 个省级区域，服务 12.6 万活跃用户，开赛前十分钟也能把想知道的都看完。
      </p>

      <ul class="about-hero__stats">
        <li>
          <span class="about-hero__value num">2019</span>
          <span class="about-hero__label">年开始持续运营</span>
        </li>
        <li>
          <span class="about-hero__value num">31</span>
          <span class="about-hero__label">个省级区域覆盖</span>
        </li>
        <li>
          <span class="about-hero__value num">12.6<span class="about-hero__unit">万</span></span>
          <span class="about-hero__label">活跃用户</span>
        </li>
        <li>
          <span class="about-hero__value num">42</span>
          <span class="about-hero__label">人编辑与服务团队</span>
        </li>
      </ul>
    </div>
  </section>

  <nav class="about-subnav" aria-label="本页章节">
    <div class="shell about-subnav__inner">
      <a class="about-subnav__link" href="#origin">01 起点</a>
      <a class="about-subnav__link" href="#phases">02 演进</a>
      <a class="about-subnav__link" href="#coverage">03 覆盖</a>
      <a class="about-subnav__link" href="#workflow">04 流程</a>
      <a class="about-subnav__link" href="#ecosystem">05 生态</a>
      <span class="about-subnav__readout">当前：<span data-section-readout>起点</span></span>
    </div>
  </nav>

  <section class="about-block" id="origin" data-section="起点">
    <div class="shell">
      <header class="about-block__head">
        <span class="chapter-num" aria-hidden="true">01</span>
        <h2>从一张赛程表，长成三块彼此呼应的资料面板</h2>
      </header>

      <div class="about-block__grid">
        <div class="about-block__main">
          <p>
            起步阶段只有赛程。用户查完开赛时间，紧接着会问下一个问题：这场的走势去哪儿看？谁因伤缺阵？我们把这些追问当成产品需求，
            于是赛程页旁长出了数据面板，又单独辟出一栏放伤停信息。今天这三块在同一次浏览里互相跳转，你不用回到搜索结果里重新翻第二遍。
          </p>
          <p>
            对正在挑选长期资料源的人来说，意义在于：你面对的不是一堆分散的页面，而是一条从头到尾走得通的路径——先确认时间，再看数据，
            最后把伤停变化带回判断里。换联赛、换日期、换版本，路径都是同一条。
          </p>
        </div>

        <aside class="about-block__aside">
          <ul class="about-points">
            <li>
              <strong>查完时间顺手看数据。</strong>
              赛程卡片直接带场次入口，省掉一次检索。
            </li>
            <li>
              <strong>伤停独立成栏。</strong>
              来源类型、更新轮次与适用位置并排显示，一眼扫完。
            </li>
            <li>
              <strong>历史对照。</strong>
              同一场次不同阶段的记录摆在一起，变化看得很直观。
            </li>
            <li>
              <strong>版本可回退。</strong>
              适应了新版就用新版，习惯老版可以从旧入口继续走。
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-block" id="phases" data-section="演进">
    <div class="shell">
      <header class="about-block__head">
        <span class="chapter-num" aria-hidden="true">02</span>
        <h2>四个阶段，把面板能力一层一层叠上去</h2>
      </header>

      <div class="about-block__grid about-block__grid--flip">
        <figure class="about-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="抽象的光线节点串联成上升曲线，表现版本迭代与数据累积" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap">版本节点由浅入深：从单张赛程表，到三栏联动的资料面板。</figcaption>
        </figure>

        <div class="about-block__main">
          <svg class="about-chart" viewBox="0 0 640 132" role="img" aria-label="四个版本阶段的推进示意：起步、数据化、V3、当前迭代依次升高">
            <line x1="36" y1="104" x2="604" y2="104" stroke="#24445F" stroke-width="1"></line>
            <polyline points="36,96 226,80 416,54 604,26" fill="none" stroke="#35E0D0" stroke-width="2" stroke-opacity="0.85"></polyline>
            <circle cx="36" cy="96" r="5" fill="#E6B45C"></circle>
            <circle cx="226" cy="80" r="5" fill="#35E0D0"></circle>
            <circle cx="416" cy="54" r="5" fill="#35E0D0"></circle>
            <circle cx="604" cy="26" r="6" fill="#FF7A45"></circle>
            <text x="36" y="126" fill="#A9BCCD" font-size="12" font-family="monospace">起步</text>
            <text x="210" y="126" fill="#A9BCCD" font-size="12" font-family="monospace">数据化</text>
            <text x="404" y="126" fill="#A9BCCD" font-size="12" font-family="monospace">V3</text>
            <text x="560" y="126" fill="#A9BCCD" font-size="12" font-family="monospace">V3.2</text>
          </svg>

          <ol class="about-phases">
            <li class="about-phase">
              <span class="about-phase__key num">起步阶段</span>
              <div class="about-phase__body">
                <h3>先把时间说清楚</h3>
                <p>按日期轴铺开近 30 天赛程，支持联赛与日期两个方向查找。那时只有赛果和阶段，够用，但不够深。</p>
              </div>
            </li>
            <li class="about-phase">
              <span class="about-phase__key num">数据化阶段</span>
              <div class="about-phase__body">
                <h3>开始往回翻</h3>
                <p>历史数据被接进同一场次，关键数据摘要与过往记录可以对照，赛程页不再只是一张时间表。</p>
              </div>
            </li>
            <li class="about-phase">
              <span class="about-phase__key num">V3 阶段</span>
              <div class="about-phase__body">
                <h3>面板成为主角</h3>
                <p>2024 赛季上线，指标列可以按需显隐，场次搜索直达，旧版 1.8 入口同时保留，切换不需要重新摸索。</p>
              </div>
            </li>
            <li class="about-phase">
              <span class="about-phase__key num">当前迭代</span>
              <div class="about-phase__body">
                <h3>三栏连成一条线</h3>
                <p>V3.2 把伤停栏接进面板与赛程之间，三处互相跳转；更新轮次在页顶就能看到，最近一轮的变化不会漏。</p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="about-block" id="coverage" data-section="覆盖">
    <div class="shell">
      <header class="about-block__head">
        <span class="chapter-num" aria-hidden="true">03</span>
        <h2>能查到什么，多久翻新一次</h2>
      </header>

      <div class="about-block__grid">
        <div class="about-block__main">
          <p>
            覆盖范围决定了这套资料能不能陪你走完一个完整赛季。足球、篮球、网球、电竞、排球等 12 类项目在同一套分类体系下组织，
            联赛、杯赛、巡回赛、系列赛、电竞联赛各归其位，找起来不必先猜在哪一栏。
          </p>
          <p>
            每一场都保留基础赛果、所处阶段、关键数据摘要与历史对照字段，方便你从结果倒推过程。资料库按每日 4 轮推进，
            页顶显示的最近一轮状态，就是当下所有条目翻到的那一版。
          </p>
        </div>

        <aside class="about-block__aside">
          <dl class="about-spec">
            <div class="about-spec__row">
              <dt>项目类型</dt>
              <dd>足球、篮球、网球、电竞、排球等 12 类</dd>
            </div>
            <div class="about-spec__row">
              <dt>赛事覆盖</dt>
              <dd>160 项赛事，含联赛、杯赛、巡回赛、系列赛、电竞联赛</dd>
            </div>
            <div class="about-spec__row">
              <dt>累计记录</dt>
              <dd>18 万场，每场含赛果、阶段、关键数据摘要与历史对照</dd>
            </div>
            <div class="about-spec__row">
              <dt>更新节奏</dt>
              <dd>每日 4 轮，最近一轮状态在页面顶部显示</dd>
            </div>
            <div class="about-spec__row">
              <dt>筛选方式</dt>
              <dd>按联赛、日期、场次状态组合筛选，条件可保存在本地浏览器</dd>
            </div>
          </dl>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-block" id="workflow" data-section="流程">
    <div class="shell">
      <header class="about-block__head">
        <span class="chapter-num" aria-hidden="true">04</span>
        <h2>42 个人盯着，三道工序之后才发出去</h2>
      </header>

      <div class="about-block__grid about-block__grid--flip">
        <div class="about-block__main">
          <p>
            资料的价值不在多，在于你敢不敢直接拿去用。所以我们的编辑团队按工种拆开：16 名数据编辑专注赛果与关键数据，
            客服团队 8 人在工作日 9:00—18:00 轮值，剩下的力量铺在专题整理、版本测试与内容运营上。
          </p>

          <ol class="about-steps">
            <li>
              <span class="about-steps__idx num">01</span>
              <div>
                <h3>机器初筛</h3>
                <p>新到的条目先过格式与字段完整性检查，缺项、重复与异常值在源头被拦下，不会直接进到你看的页面。</p>
              </div>
            </li>
            <li>
              <span class="about-steps__idx num">02</span>
              <div>
                <h3>编辑复核</h3>
                <p>数据编辑逐场比对赛果、阶段与关键摘要，涉及伤停的条目额外确认来源类型与适用位置。</p>
              </div>
            </li>
            <li>
              <span class="about-steps__idx num">03</span>
              <div>
                <h3>发布前抽检</h3>
                <p>按轮次抽取样本回看，确认没问题才推上最近一轮。这一轮的状态会同步显示在页面顶部。</p>
              </div>
            </li>
          </ol>
        </div>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="多屏数据面板与资料卡整齐排列的编辑工作区，冷蓝光下无人物出现" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap">从初筛到发布，每一轮都要走完三道工序。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="about-block" id="ecosystem" data-section="生态">
    <div class="shell">
      <header class="about-block__head">
        <span class="chapter-num" aria-hidden="true">05</span>
        <h2>资料不是一个人攒出来的</h2>
      </header>

      <div class="about-block__grid">
        <div class="about-block__main">
          <p>
            我们与 28 家赛事数据服务商和内容合作方保持资料交换，把散落在各处的赛果、阶段与伤停线索汇到同一条管线里，
            再由编辑团队统一整理成你看到的样子。合作方各有所长，我们负责把它们接得住、排得顺。
          </p>
          <p>
            稳定运营靠的是背后的功夫：每年完成 2 次数据备份演练和 1 次信息安全风险评估，
            让资料在赛季最密集的时段也保持可访问。连续 3 年入选体育数据资料服务优秀案例，是行业对我们这份耐心的认可。
          </p>
        </div>

        <aside class="about-block__aside">
          <ul class="about-tags">
            <li><span class="tag tag--cyan">28 家合作方</span></li>
            <li><span class="tag tag--gold">连续 3 年入选优秀案例</span></li>
            <li><span class="tag tag--orange">每年 2 次备份演练</span></li>
            <li><span class="tag tag--cyan">1 次信息安全风险评估</span></li>
            <li><span class="tag tag--gold">每日 4 轮更新</span></li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="about-next">
    <div class="shell about-next__inner">
      <h2>想直接看看这套资料长什么样</h2>
      <p>从版本面板到伤停信息栏，上手路径都写在功能中心；如果你更关心最近几轮改了什么，专栏里有连续的观察记录。</p>
      <div class="about-next__links">
        <a class="btn btn--signal" href="/features/">进入功能中心</a>
        <a class="btn btn--ghost" href="/column/">看最近更新</a>
        <a class="btn btn--quiet" href="/consult/">联系客服团队</a>
        <a class="btn btn--quiet" href="/agreement/">打开使用指南</a>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-pad: clamp(38px, 5.2vw, 82px);
  --about-soft: rgba(36, 68, 95, 0.6);
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--about-soft);
  background:
    radial-gradient(120% 90% at 8% -20%, rgba(53, 224, 208, 0.14), transparent 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(230, 180, 92, 0.08), transparent 62%),
    var(--ink-950);
}

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

.page-about .about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.65);
}

.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.5) 0%, rgba(7, 17, 31, 0.86) 58%, var(--ink-950) 100%);
}

.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 6vw, 88px) clamp(30px, 4.6vw, 62px);
}

.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin-bottom: clamp(20px, 3.4vw, 42px);
}

.page-about .crumbs a {
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .crumbs span[aria-current="page"] {
  color: var(--gold);
}

.page-about .about-hero__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.page-about .about-hero__tag .num {
  color: var(--ink-950);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: var(--radius);
}

.page-about .about-hero__tagline {
  color: var(--paper-dim);
}

.page-about .about-hero h1 {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20em;
  text-wrap: balance;
}

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

.page-about .about-hero__stats {
  list-style: none;
  margin: clamp(26px, 3.6vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--about-soft);
  border: 1px solid var(--about-soft);
}

.page-about .about-hero__stats li {
  background: rgba(12, 27, 44, 0.82);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.page-about .about-hero__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-about .about-hero__unit {
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--paper-dim);
}

.page-about .about-hero__label {
  font-size: 12.5px;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

/* ---------- 章节导航 ---------- */
.page-about .about-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  background: rgba(4, 16, 24, 0.94);
  border-bottom: 1px solid var(--about-soft);
  backdrop-filter: blur(10px);
}

.page-about .about-subnav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.page-about .about-subnav__link {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) ease, border-color var(--dur) ease;
}

.page-about .about-subnav__link:hover,
.page-about .about-subnav__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.page-about .about-subnav__readout {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  white-space: nowrap;
}

.page-about .about-subnav__readout [data-section-readout] {
  color: var(--orange);
}

/* ---------- 章节面板 ---------- */
.page-about .about-block {
  padding-block: var(--about-pad);
  border-bottom: 1px solid var(--about-soft);
  scroll-margin-top: calc(var(--header-h) + 58px);
}

.page-about .about-block__head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 42px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--about-soft);
}

.page-about .chapter-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 80px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: rgba(53, 224, 208, 0.06);
  -webkit-text-stroke: 1px rgba(36, 68, 95, 0.95);
}

.page-about .chapter-num.is-current {
  color: rgba(53, 224, 208, 0.12);
  -webkit-text-stroke-color: var(--cyan);
}

.page-about .about-block__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24em;
}

.page-about .about-block__grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
  min-width: 0;
}

.page-about .about-block__main,
.page-about .about-block__aside {
  min-width: 0;
}

.page-about .about-block__main p {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--paper-dim);
}

.page-about .about-block__main p:last-child {
  margin-bottom: 0;
}

/* ---------- 要点列表 ---------- */
.page-about .about-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-points li {
  position: relative;
  padding: 15px 0 15px 24px;
  border-bottom: 1px solid var(--about-soft);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper-dim);
}

.page-about .about-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 11px;
  height: 2px;
  background: var(--cyan);
}

.page-about .about-points strong {
  display: block;
  color: var(--paper);
  font-weight: 600;
  margin-bottom: 2px;
}

/* ---------- 图表与配图 ---------- */
.page-about .about-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}

.page-about .about-figure {
  margin: 0;
  border: 1px solid var(--about-soft);
  background: var(--ink-800);
  box-shadow: var(--shadow-panel);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.8);
}

.page-about .about-figure__cap {
  padding: 12px 14px;
  border-top: 1px solid var(--about-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--paper-dim);
}

/* ---------- 版本阶段 ---------- */
.page-about .about-phases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .about-phase {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-phase:last-child {
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-phase__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
  align-self: start;
}

.page-about .about-phase__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--paper);
}

.page-about .about-phase__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-dim);
}

/* ---------- 规格摘要 ---------- */
.page-about .about-spec {
  margin: 0;
  border: 1px solid var(--about-soft);
  background: var(--ink-800);
}

.page-about .about-spec__row {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-spec__row:last-child {
  border-bottom: 0;
}

.page-about .about-spec dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-about .about-spec dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--paper);
}

/* ---------- 工序步骤 ---------- */
.page-about .about-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-about .about-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--about-soft);
}

.page-about .about-steps li:last-child {
  border-bottom: 1px solid var(--about-soft);
}

.page-about .about-steps__idx {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--orange);
}

.page-about .about-steps h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--paper);
}

.page-about .about-steps p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--paper-dim);
}

/* ---------- 标签组 ---------- */
.page-about .about-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .about-tags .tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border-radius: var(--radius);
}

/* ---------- 结尾 ---------- */
.page-about .about-next {
  padding-block: clamp(40px, 5.4vw, 84px);
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255, 122, 69, 0.1), transparent 60%),
    var(--ink-950);
}

.page-about .about-next__inner {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.page-about .about-next h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page-about .about-next p {
  margin: 0;
  font-size: clamp(14.5px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--paper-dim);
}

.page-about .about-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- 断点 ---------- */
@media (min-width: 720px) {
  .page-about .about-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-hero__stats li {
    padding: 20px 18px;
  }

  .page-about .about-spec__row {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 15px 18px;
  }

  .page-about .about-phase {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 20px 0;
  }
}

@media (min-width: 960px) {
  .page-about .about-block__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4.5vw, 68px);
    align-items: start;
  }

  .page-about .about-block__grid--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-about .about-block__head {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: end;
    gap: 24px;
  }

  .page-about .about-next__inner {
    max-width: 820px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .crumbs a,
  .page-about .about-subnav__link {
    transition: none;
  }
}