.page-about {
  --about-rule: rgba(198, 255, 61, 0.22);
  --about-hair: rgba(233, 239, 232, 0.1);
  --about-soft: rgba(233, 239, 232, 0.045);
  --about-expand: 300ms;
}

.page-about .section {
  padding: 52px 0;
}

.page-about .about-slash {
  display: inline-block;
  margin: 0 8px;
  color: var(--volt);
}

.page-about .about-link {
  color: var(--volt);
  border-bottom: 1px solid var(--about-rule);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .about-link:hover {
  border-color: var(--volt);
}

.page-about .about-head {
  max-width: 760px;
  margin-bottom: 36px;
}

.page-about .about-head .lead {
  margin-top: 16px;
}

.page-about .about-media {
  margin: 0;
  max-width: 100%;
}

.page-about .about-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-media figcaption {
  margin-top: 10px;
}

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

.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(28, 87, 56, 0.6), transparent 64%);
  pointer-events: none;
}

.page-about .about-hero__inner {
  position: relative;
}

.page-about .about-hero__title {
  margin: 18px 0 0;
  font-size: clamp(32px, 7.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--lime-white);
  max-width: 17em;
}

.page-about .about-hero__title em {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--volt);
}

.page-about .about-hero__lead {
  margin-top: 22px;
  max-width: 60ch;
  color: var(--mist);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--about-hair);
  border-left: 1px solid var(--about-hair);
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
  border-right: 1px solid var(--about-hair);
  border-bottom: 1px solid var(--about-hair);
}

.page-about .about-hero__facts .num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
}

.page-about .about-hero__facts .annotation {
  color: var(--mist);
}

/* ---------- 时间轴 ---------- */

.page-about .about-media--wide {
  margin-bottom: 44px;
}

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

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, var(--volt) 0%, rgba(198, 255, 61, 0.35) 22%, var(--hairline) 68%, rgba(36, 49, 42, 0) 100%);
}

.page-about .timeline-item {
  position: relative;
  padding: 0 0 38px 30px;
}

.page-about .timeline-item:last-child {
  padding-bottom: 0;
}

.page-about .timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  background: var(--black);
  border: 1px solid var(--volt);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .timeline-item:hover::before,
.page-about .timeline-item:focus-within::before {
  background: var(--volt);
  transform: rotate(45deg) scale(1.35);
}

.page-about .timeline-item__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.page-about .timeline-item__stage {
  color: var(--mist);
}

.page-about .timeline-item__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
  transition: transform var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
  transform-origin: left center;
}

.page-about .timeline-item:hover .timeline-item__num,
.page-about .timeline-item:focus-within .timeline-item__num {
  transform: scale(1.12);
  text-shadow: 0 0 20px rgba(198, 255, 61, 0.45);
}

.page-about .timeline-item__unit {
  font-size: 13px;
  color: var(--mist);
}

.page-about .timeline-item__main h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--lime-white);
}

.page-about .timeline-item__main p {
  margin: 0;
  max-width: 58ch;
  color: var(--mist);
  line-height: 1.75;
}

/* ---------- 团队分工 ---------- */

.page-about .crew {
  display: grid;
  gap: 1px;
  background: var(--about-hair);
  border: 1px solid var(--about-hair);
}

.page-about .crew-card {
  --crew-accent: var(--volt);
  position: relative;
  background: var(--black);
  padding: 26px 20px 28px;
  outline: none;
  transition: background var(--dur) var(--ease);
}

.page-about .crew-card--verify {
  --crew-accent: var(--cool-violet);
}

.page-about .crew-card--visual {
  --crew-accent: var(--stand-red);
}

.page-about .crew-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--about-hair);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .crew-card:hover,
.page-about .crew-card:focus-visible {
  background: var(--night);
}

.page-about .crew-card:hover::before,
.page-about .crew-card:focus-visible::before {
  width: 100%;
  background: var(--crew-accent);
}

.page-about .crew-card__idx {
  margin: 0;
  color: var(--mist);
}

.page-about .crew-card__name {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--lime-white);
}

.page-about .crew-card__count {
  margin: 12px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.page-about .crew-card__count .num {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  color: var(--crew-accent);
}

.page-about .crew-card__unit {
  font-size: 14px;
  color: var(--mist);
}

.page-about .crew-card__role {
  margin: 14px 0 0;
  color: var(--lime-white);
  line-height: 1.7;
}

.page-about .crew-card__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-hair);
}

.page-about .crew-card__list li {
  position: relative;
  padding: 9px 0 9px 16px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .crew-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 1px;
  background: var(--crew-accent);
}

.page-about .crew-card__check {
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-about .crew-card__check .num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--lime-white);
  transition: color var(--dur) var(--ease);
}

.page-about .crew-card__check .annotation {
  color: var(--mist);
}

.page-about .crew-card:hover .crew-card__check .num,
.page-about .crew-card:focus-visible .crew-card__check .num {
  color: var(--crew-accent);
}

/* ---------- 指标 ---------- */

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

.page-about .metric-def {
  background: var(--night);
  padding: 24px 20px 26px;
  transition: background var(--dur) var(--ease);
}

.page-about .metric-def:hover {
  background: var(--grass-deep);
}

.page-about .metric-def__term {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--lime-white);
}

.page-about .metric-def__idx {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--volt);
  letter-spacing: 0.08em;
}

.page-about .metric-def__desc {
  margin: 12px 0 0;
  padding-left: 0;
  color: var(--mist);
  line-height: 1.75;
  max-width: 46ch;
}

/* ---------- 球场覆盖 ---------- */

.page-about .about-media--band {
  margin-bottom: 36px;
}

.page-about .venue-zones {
  display: grid;
  gap: 1px;
  background: var(--about-hair);
  border-top: 1px solid var(--about-hair);
  border-bottom: 1px solid var(--about-hair);
}

.page-about .venue-zone {
  padding: 20px 4px 22px;
}

.page-about .venue-zone .annotation {
  margin: 0;
  color: var(--cool-violet);
}

.page-about .venue-zone__count {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--mist);
}

.page-about .venue-zone__count .num {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
  margin-right: 4px;
}

.page-about .venue-zone__text {
  margin: 12px 0 0;
  color: var(--lime-white);
  line-height: 1.7;
  font-size: 15px;
}

.page-about .venue-note {
  margin: 26px 0 0;
  max-width: 62ch;
  color: var(--mist);
  line-height: 1.8;
}

/* ---------- 合作生态 ---------- */

.page-about .partners-grid {
  display: grid;
  gap: 34px;
}

.page-about .partners__body .lead {
  margin-top: 16px;
}

.page-about .partner-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-hair);
}

.page-about .partner-item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .partner-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--lime-white);
}

.page-about .partner-item h3::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--volt);
}

.page-about .partner-item p {
  margin: 0;
  color: var(--mist);
  line-height: 1.7;
  max-width: 52ch;
}

.page-about .partners__note {
  margin: 22px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-about .partners__media {
  margin: 0;
}

/* ---------- 收尾 ---------- */

.page-about .about-cta__inner {
  position: relative;
  overflow: hidden;
  padding: 32px 22px 36px;
  border: 1px solid var(--about-hair);
  background:
    linear-gradient(135deg, rgba(18, 58, 38, 0.9) 0%, rgba(11, 15, 13, 0.96) 60%),
    var(--black);
}

.page-about .about-cta__inner::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 210px;
  height: 210px;
  border: 1px solid var(--about-rule);
  transform: rotate(45deg);
  pointer-events: none;
}

.page-about .about-cta__inner .section-title {
  position: relative;
  margin: 0;
  max-width: 20em;
}

.page-about .about-cta__inner .lead {
  position: relative;
  margin: 16px 0 0;
  max-width: 58ch;
  color: var(--mist);
}

.page-about .about-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 600px) {
  .page-about .section {
    padding: 64px 0;
  }

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

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

  .page-about .venue-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--about-hair);
  }

  .page-about .venue-zone {
    padding: 22px 20px 24px;
    border-right: 1px solid var(--about-hair);
    border-bottom: 1px solid var(--about-hair);
  }

  .page-about .venue-zones {
    border-bottom: 0;
  }

  .page-about .venue-zone:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 860px) {
  .page-about .section {
    padding: 84px 0;
  }

  .page-about .about-hero {
    padding-top: 26px;
    padding-bottom: 60px;
  }

  .page-about .about-head {
    margin-bottom: 48px;
  }

  .page-about .about-hero__facts .num {
    font-size: 34px;
  }

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

  .page-about .crew-card {
    padding: 34px 28px 36px;
  }

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

  .page-about .metric-def {
    padding: 28px 22px 30px;
  }

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

  .page-about .venue-zone:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--about-hair);
  }

  .page-about .venue-zone:nth-last-child(-n + 4) {
    border-bottom: 0;
  }

  .page-about .timeline {
    margin-top: 8px;
  }

  .page-about .timeline-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 30px;
    align-items: start;
    padding-bottom: 46px;
  }

  .page-about .timeline-item__aside {
    display: block;
    text-align: right;
    margin-bottom: 0;
    padding-top: 2px;
  }

  .page-about .timeline-item__stage {
    display: block;
  }

  .page-about .timeline-item__num {
    display: block;
    margin-top: 6px;
    transform-origin: right center;
  }

  .page-about .timeline-item__unit {
    display: block;
    margin-top: 4px;
  }

  .page-about .timeline-item__main h3 {
    font-size: 22px;
  }

  .page-about .partners-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 44px;
    align-items: start;
  }

  .page-about .partners__media {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .about-cta__inner {
    padding: 48px 44px 52px;
  }
}

@media (min-width: 1180px) {
  .page-about .about-hero__lead {
    font-size: 19px;
  }

  .page-about .about-cta__inner {
    padding: 56px 56px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about *,
  .page-about *::before,
  .page-about *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
<<<END>>>

等等——我输出的标记格式有问题。要求是用 ``、`` 来分段，不能额外加别的东西。我上面在 `PAGE_CSS` 末尾多写了 `<<<END>>>`，这不对。重新整理一下……

其实我把内容重新整体输出一遍也不现实——但格式必须对。修正如下：去掉末尾多余的 `<<<END>>>`。下面是最终正确的输出（内容不变，仅移除多余标记）。

（重写输出……）

实际上我没有别的办法，必须重新输出一遍完整内容。直接重发：

（后面接完整 MAIN_HTML、PAGE_CSS）
<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
        <li class="breadcrumb-item breadcrumb-current" aria-current="page">品牌与团队</li>
      </ol>
    </nav>
  </div>

  <section class="section about-hero">
    <div class="container about-hero__inner">
      <p class="section-kicker">WHO WE ARE<span class="about-slash">/</span>品牌与团队</p>
      <h1 class="about-hero__title">
        两个赛季 <em>380</em> 场，<br>
        乐宝体育把每一场的角球与补时都留了底
      </h1>
      <p class="lead about-hero__lead">
        你要复盘一场球是怎么被角球拖垮的，要写稿时找一个能查、能引用、能逐场展开的数据源，
        要拿主队在自己球场上的控球习惯做对比——这些都能在这里翻到。
        哨响之后我们开始记录，比分、角球、控球率、补时时长四类数据逐场落到具体轮次上。
      </p>
      <ul class="about-hero__facts">
        <li>
          <span class="num">380</span>
          <span class="annotation">两赛季场次</span>
        </li>
        <li>
          <span class="num">18</span>
          <span class="annotation">覆盖球场</span>
        </li>
        <li>
          <span class="num">26</span>
          <span class="annotation">数据团队成员</span>
        </li>
        <li>
          <span class="num">4</span>
          <span class="annotation">核心指标</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section about-timeline">
    <div class="container">
      <div class="about-head">
        <p class="section-kicker">01<span class="about-slash">/</span>成长线</p>
        <h2 class="section-title">从一场比赛的一张表，走到两个赛季的完整档案</h2>
        <p class="lead">
          最早只是赛后把比分和角球数记下来。后来发现光有比分讲不清一场球，于是补上控球与补时，
          再把每座球场各自的特点单独归档。这条路走得不算快，但每一步都留下了可以回看的痕迹。
        </p>
      </div>

      <figure class="about-media about-media--wide media-frame media-frame--board">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深夜室内工作台，多块屏幕同时显示球场示意图与逐场比赛数据表格" decoding="async">
        <figcaption class="annotation">赛后录入与可视化处理的工作台</figcaption>
      </figure>

      <ol class="timeline">
        <li class="timeline-item">
          <div class="timeline-item__aside">
            <span class="timeline-item__stage annotation">阶段 01</span>
            <span class="timeline-item__num num">190</span>
            <span class="timeline-item__unit">场 · 单赛季</span>
          </div>
          <div class="timeline-item__main">
            <h3>第一个完整赛季，每一轮都录了下来</h3>
            <p>
              赛季开始时定了一条规矩：当轮比赛当天录完，不留到第二天。一个赛季下来攒了约 190 场，
              比分和角球数第一次有了连贯的整季视图，哪支球队靠角球吃饭一眼能看出来。
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item__aside">
            <span class="timeline-item__stage annotation">阶段 02</span>
            <span class="timeline-item__num num">380</span>
            <span class="timeline-item__unit">场 · 累计</span>
          </div>
          <div class="timeline-item__main">
            <h3>第二个赛季叠加进来，开始能跨季对比</h3>
            <p>
              新赛季的数据并进原有结构后，两季累计到 380 场。同一支球队去年和今年在主场的角球产出、
              控球走向放在一起看，变化比单赛季清晰得多，做赛季复盘时有了参照。
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item__aside">
            <span class="timeline-item__stage annotation">阶段 03</span>
            <span class="timeline-item__num num">4</span>
            <span class="timeline-item__unit">项核心指标</span>
          </div>
          <div class="timeline-item__main">
            <h3>四类指标固定下来，逐场都对齐</h3>
            <p>
              比分、角球、控球率、补时时长这四项成为每场比赛都记录的固定内容。它们互相解释：
              控球低的一方往往角球也少，补时越长，最后阶段被追平的机会就越多。
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item__aside">
            <span class="timeline-item__stage annotation">阶段 04</span>
            <span class="timeline-item__num num">18</span>
            <span class="timeline-item__unit">座主场档案</span>
          </div>
          <div class="timeline-item__main">
            <h3>把镜头拉近到每一座球场</h3>
            <p>
              只按球队看还不够。18 座球场按城市分区各建一份长期档案，记下这块草皮上常见的控球倾向、
              补时长度和角球的主客场分布，主队在自己地盘上的习惯慢慢就显形了。
            </p>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-item__aside">
            <span class="timeline-item__stage annotation">阶段 05</span>
            <span class="timeline-item__num num">26</span>
            <span class="timeline-item__unit">人 · 三个组</span>
          </div>
          <div class="timeline-item__main">
            <h3>三个小组，把这条线稳定接下去</h3>
            <p>
              采集、核对、可视化三个小组共 26 人，分别负责把比赛变成数据、把数据变准确、把准确的数据
              变成你看得懂的图表和列表。赛季一轮接一轮，班底不再变动。
            </p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section about-crew">
    <div class="container">
      <div class="about-head">
        <p class="section-kicker">02<span class="about-slash">/</span>团队分工</p>
        <h2 class="section-title">谁在整理这些数字</h2>
        <p class="lead">
          一份战报从比赛结束到你眼前，中间经过三个人群的手。分工不是为了让流程好看，
          而是让每场比赛的角球数、控球率、补时都经得起被翻回去查。
        </p>
      </div>

      <div class="crew">
        <article class="crew-card crew-card--collect" tabindex="0">
          <p class="crew-card__idx annotation">GROUP 01</p>
          <h3 class="crew-card__name">采集组</h3>
          <p class="crew-card__count"><span class="num">11</span><span class="crew-card__unit">人</span></p>
          <p class="crew-card__role">比赛结束后，第一时间把这场球的四类数据录进对应轮次。</p>
          <ul class="crew-card__list">
            <li>按轮次分工，每人固定盯几条数据线</li>
            <li>当轮当天完成首次录入</li>
            <li>遇到异常值先标记，原记录不动</li>
          </ul>
          <p class="crew-card__check"><span class="num">2</span><span class="annotation">道确认环节</span></p>
        </article>

        <article class="crew-card crew-card--verify" tabindex="0">
          <p class="crew-card__idx annotation">GROUP 02</p>
          <h3 class="crew-card__name">核对组</h3>
          <p class="crew-card__count"><span class="num">9</span><span class="crew-card__unit">人</span></p>
          <p class="crew-card__role">负责把采集回来的数字再走一遍，确认它和比赛过程对得上。</p>
          <ul class="crew-card__list">
            <li>主客场两组数据交叉比对</li>
            <li>角球与控球的关系做合理性判断</li>
            <li>补时分钟数与比赛记录逐场回看</li>
          </ul>
          <p class="crew-card__check"><span class="num">3</span><span class="annotation">道确认环节</span></p>
        </article>

        <article class="crew-card crew-card--visual" tabindex="0">
          <p class="crew-card__idx annotation">GROUP 03</p>
          <h3 class="crew-card__name">可视化组</h3>
          <p class="crew-card__count"><span class="num">6</span><span class="crew-card__unit">人</span></p>
          <p class="crew-card__role">把确认过的数据排成列表、图表与球场档案，让你扫一眼就能读懂。</p>
          <ul class="crew-card__list">
            <li>逐场列表支持展开到单场明细</li>
            <li>球场档案配控球与补时的图形表达</li>
            <li>发布前再做一次呈现确认</li>
          </ul>
          <p class="crew-card__check"><span class="num">2</span><span class="annotation">道确认环节</span></p>
        </article>
      </div>
    </div>
  </section>

  <section class="section about-metrics">
    <div class="container">
      <div class="about-head">
        <p class="section-kicker">03<span class="about-slash">/</span>四类指标</p>
        <h2 class="section-title">每场比赛，我们都盯住这四件事</h2>
        <p class="lead">
          一场球讲得清讲不清，往往就看你手里有没有这四样东西。它们同时出现在一场比赛里，
          互相解释，也各自说明问题。
        </p>
      </div>

      <dl class="metrics">
        <div class="metric-def">
          <dt class="metric-def__term"><span class="metric-def__idx num">01</span><span class="metric-def__name">比分</span></dt>
          <dd class="metric-def__desc">
            终场比分与半场比分分开记。翻回来看时能认出比赛是在哪一段被拉开的，
            也能看出哪些球是补时阶段才定下来的。
          </dd>
        </div>
        <div class="metric-def">
          <dt class="metric-def__term"><span class="metric-def__idx num">02</span><span class="metric-def__name">角球</span></dt>
          <dd class="metric-def__desc">
            主客场的角球数分开统计，一场比赛两侧各拿几个角球清清楚楚。
            想判断谁在压着打、谁只能靠定位球找机会，这一栏最直接。
          </dd>
        </div>
        <div class="metric-def">
          <dt class="metric-def__term"><span class="metric-def__idx num">03</span><span class="metric-def__name">控球率</span></dt>
          <dd class="metric-def__desc">
            全场控球占比跟主客场状态挂在一起。同一支球队在自己球场和客场拿到不同的控球数字，
            往往就是它整个赛季打法的注脚。
          </dd>
        </div>
        <div class="metric-def">
          <dt class="metric-def__term"><span class="metric-def__idx num">04</span><span class="metric-def__name">补时时长</span></dt>
          <dd class="metric-def__desc">
            上下半场的补时分钟数分别记录。补时偏长的比赛，最后阶段往往还有故事，
            配合比分一起看，能还原出那几分钟的紧张。
          </dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="section about-venues">
    <div class="container">
      <div class="about-head">
        <p class="section-kicker">04<span class="about-slash">/</span>球场覆盖</p>
        <h2 class="section-title">18 座球场，按城市分区各留一份档案</h2>
        <p class="lead">
          同一支球队换了球场，踢法常常跟着变。所以我们把主场资料按城市分区整理，每座球场维护一份
          长期档案，控球率走向和补时长度都能单独翻出来。
        </p>
      </div>
    </div>

    <figure class="about-media about-media--band media-frame media-frame--pitch">
      <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="从看台俯瞰夜间球场，边线灯光在草皮上形成明亮条纹" loading="lazy" decoding="async">
      <figcaption class="annotation">夜间球场 · 边线灯光与草皮纹理</figcaption>
    </figure>

    <div class="container">
      <div class="venue-zones">
        <article class="venue-zone">
          <p class="annotation">北区</p>
          <p class="venue-zone__count"><span class="num">5</span> 座</p>
          <p class="venue-zone__text">这几座球场冬季风大，长传冲吊多，角球产出普遍高于平均值。</p>
        </article>
        <article class="venue-zone">
          <p class="annotation">东区</p>
          <p class="venue-zone__count"><span class="num">4</span> 座</p>
          <p class="venue-zone__text">草皮偏软，地面传导多，控球率的两队差距往往拉得比较开。</p>
        </article>
        <article class="venue-zone">
          <p class="annotation">南区</p>
          <p class="venue-zone__count"><span class="num">4</span> 座</p>
          <p class="venue-zone__text">湿度高，比赛后段节奏下滑明显，补时时长常年偏长。</p>
        </article>
        <article class="venue-zone">
          <p class="annotation">西区</p>
          <p class="venue-zone__count"><span class="num">5</span> 座</p>
          <p class="venue-zone__text">看台贴得近，主队前二十分钟压上的比例高，角球早期集中。</p>
        </article>
      </div>
      <p class="venue-note">
        每份球场档案里，长期控球倾向、补时长度、角球的主客场分布都留着记录。用久了你会发现，
        主队在自己草皮上有些习惯，年年都在重复。
        <a class="about-link" href="/download/">在主场地图里按城市翻看</a>
      </p>
    </div>
  </section>

  <section class="section about-partners">
    <div class="container">
      <div class="partners-grid">
        <div class="partners__body">
          <p class="section-kicker">05<span class="about-slash">/</span>协作</p>
          <h2 class="section-title">一起把战报做下去的人</h2>
          <p class="lead">
            战报不只被我们自己看。媒体拿它做赛后稿的底稿，球迷社群拿它聊球，数据伙伴拿它做更细的
            加工。这些协作让数据被用起来，也让我们知道下一轮该补什么。
          </p>
          <ul class="partner-list">
            <li class="partner-item">
              <h3>体育媒体</h3>
              <p>赛后稿件里引用角球与控球数据，按轮次取用，写稿时不必再自己统计。</p>
            </li>
            <li class="partner-item">
              <h3>球迷社群</h3>
              <p>赛后讨论里贴出逐场对比，用数据支撑观点，而不只是凭印象说谁踢得好。</p>
            </li>
            <li class="partner-item">
              <h3>数据服务伙伴</h3>
              <p>在四类核心指标之上做延伸整理，反过来帮我们把细节填得更满。</p>
            </li>
          </ul>
          <p class="partners__note">
            引用站内数据时注明来源为乐宝体育即可。需要批量取用或长期协作，
            <a class="about-link" href="/connect/">在联系通道说明用途和取用范围</a>，我们会安排对应的人对接。
          </p>
        </div>

        <figure class="partners__media media-frame media-frame--map">
          <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="深色底图上荧光路径连接散点，表现城市与球场之间的分布关系" loading="lazy" decoding="async">
          <figcaption class="annotation">城市分区与球场分布示意</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--tight about-cta">
    <div class="container">
      <div class="about-cta__inner">
        <h2 class="section-title">先翻一轮战报，再决定要不要长期用</h2>
        <p class="lead">
          最近一轮的角球、控球与补时都摆在战报中心里，按赛事阶段或主客场筛一筛，看看这些数字
          是不是你复盘时需要的那种。想先搞清楚怎么上手，注册指引会按你的目标联赛给出步骤。
        </p>
        <div class="about-cta__actions">
          <a class="btn btn--volt" href="/press/">进入赛后战报</a>
          <a class="btn btn--ghost" href="/download/">查看注册指引</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-rule: rgba(198, 255, 61, 0.22);
  --about-hair: rgba(233, 239, 232, 0.1);
}

.page-about .section {
  padding: 52px 0;
}

.page-about .about-slash {
  display: inline-block;
  margin: 0 8px;
  color: var(--volt);
}

.page-about .about-link {
  color: var(--volt);
  border-bottom: 1px solid var(--about-rule);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-about .about-link:hover {
  border-color: var(--volt);
}

.page-about .about-head {
  max-width: 760px;
  margin-bottom: 36px;
}

.page-about .about-head .lead {
  margin-top: 16px;
}

.page-about .about-media {
  margin: 0;
  max-width: 100%;
}

.page-about .about-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-media figcaption {
  margin-top: 10px;
}

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

.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding-top: 16px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(28, 87, 56, 0.6), transparent 64%);
  pointer-events: none;
}

.page-about .about-hero__inner {
  position: relative;
}

.page-about .about-hero__title {
  margin: 18px 0 0;
  font-size: clamp(32px, 7.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--lime-white);
  max-width: 17em;
}

.page-about .about-hero__title em {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--volt);
}

.page-about .about-hero__lead {
  margin-top: 22px;
  max-width: 60ch;
  color: var(--mist);
}

.page-about .about-hero__facts {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--about-hair);
  border-left: 1px solid var(--about-hair);
}

.page-about .about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
  border-right: 1px solid var(--about-hair);
  border-bottom: 1px solid var(--about-hair);
}

.page-about .about-hero__facts .num {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
}

.page-about .about-hero__facts .annotation {
  color: var(--mist);
}

/* ---------- 时间轴 ---------- */

.page-about .about-media--wide {
  margin-bottom: 44px;
}

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

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, var(--volt) 0%, rgba(198, 255, 61, 0.35) 22%, var(--hairline) 68%, rgba(36, 49, 42, 0) 100%);
}

.page-about .timeline-item {
  position: relative;
  padding: 0 0 38px 30px;
}

.page-about .timeline-item:last-child {
  padding-bottom: 0;
}

.page-about .timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  background: var(--black);
  border: 1px solid var(--volt);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .timeline-item:hover::before,
.page-about .timeline-item:focus-within::before {
  background: var(--volt);
  transform: rotate(45deg) scale(1.35);
}

.page-about .timeline-item__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.page-about .timeline-item__stage {
  color: var(--mist);
}

.page-about .timeline-item__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}

.page-about .timeline-item:hover .timeline-item__num,
.page-about .timeline-item:focus-within .timeline-item__num {
  transform: scale(1.12);
  text-shadow: 0 0 20px rgba(198, 255, 61, 0.45);
}

.page-about .timeline-item__unit {
  font-size: 13px;
  color: var(--mist);
}

.page-about .timeline-item__main h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--lime-white);
}

.page-about .timeline-item__main p {
  margin: 0;
  max-width: 58ch;
  color: var(--mist);
  line-height: 1.75;
}

/* ---------- 团队分工 ---------- */

.page-about .crew {
  display: grid;
  gap: 1px;
  background: var(--about-hair);
  border: 1px solid var(--about-hair);
}

.page-about .crew-card {
  --crew-accent: var(--volt);
  position: relative;
  background: var(--black);
  padding: 26px 20px 28px;
  outline: none;
  transition: background var(--dur) var(--ease);
}

.page-about .crew-card--verify {
  --crew-accent: var(--cool-violet);
}

.page-about .crew-card--visual {
  --crew-accent: var(--stand-red);
}

.page-about .crew-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--about-hair);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .crew-card:hover,
.page-about .crew-card:focus-visible {
  background: var(--night);
}

.page-about .crew-card:hover::before,
.page-about .crew-card:focus-visible::before {
  width: 100%;
  background: var(--crew-accent);
}

.page-about .crew-card__idx {
  margin: 0;
  color: var(--mist);
}

.page-about .crew-card__name {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--lime-white);
}

.page-about .crew-card__count {
  margin: 12px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.page-about .crew-card__count .num {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  color: var(--crew-accent);
}

.page-about .crew-card__unit {
  font-size: 14px;
  color: var(--mist);
}

.page-about .crew-card__role {
  margin: 14px 0 0;
  color: var(--lime-white);
  line-height: 1.7;
}

.page-about .crew-card__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-hair);
}

.page-about .crew-card__list li {
  position: relative;
  padding: 9px 0 9px 16px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .crew-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 1px;
  background: var(--crew-accent);
}

.page-about .crew-card__check {
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-about .crew-card__check .num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--lime-white);
  transition: color var(--dur) var(--ease);
}

.page-about .crew-card__check .annotation {
  color: var(--mist);
}

.page-about .crew-card:hover .crew-card__check .num,
.page-about .crew-card:focus-visible .crew-card__check .num {
  color: var(--crew-accent);
}

/* ---------- 指标 ---------- */

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

.page-about .metric-def {
  background: var(--night);
  padding: 24px 20px 26px;
  transition: background var(--dur) var(--ease);
}

.page-about .metric-def:hover {
  background: var(--grass-deep);
}

.page-about .metric-def__term {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--lime-white);
}

.page-about .metric-def__idx {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--volt);
}

.page-about .metric-def__desc {
  margin: 12px 0 0;
  max-width: 46ch;
  color: var(--mist);
  line-height: 1.75;
}

/* ---------- 球场覆盖 ---------- */

.page-about .about-media--band {
  margin-bottom: 36px;
}

.page-about .venue-zones {
  display: grid;
  gap: 1px;
  background: var(--about-hair);
  border-top: 1px solid var(--about-hair);
  border-bottom: 1px solid var(--about-hair);
}

.page-about .venue-zone {
  padding: 20px 4px 22px;
}

.page-about .venue-zone .annotation {
  margin: 0;
  color: var(--cool-violet);
}

.page-about .venue-zone__count {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--mist);
}

.page-about .venue-zone__count .num {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  color: var(--volt);
  margin-right: 4px;
}

.page-about .venue-zone__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lime-white);
}

.page-about .venue-note {
  margin: 26px 0 0;
  max-width: 62ch;
  color: var(--mist);
  line-height: 1.8;
}

/* ---------- 合作生态 ---------- */

.page-about .partners-grid {
  display: grid;
  gap: 34px;
}

.page-about .partners__body .lead {
  margin-top: 16px;
}

.page-about .partner-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--about-hair);
}

.page-about .partner-item {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--about-hair);
}

.page-about .partner-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--lime-white);
}

.page-about .partner-item h3::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--volt);
}

.page-about .partner-item p {
  margin: 0;
  max-width: 52ch;
  color: var(--mist);
  line-height: 1.7;
}

.page-about .partners__note {
  margin: 22px 0 0;
  color: var(--mist);
  line-height: 1.8;
}

.page-about .partners__media {
  margin: 0;
}

/* ---------- 收尾 ---------- */

.page-about .about-cta__inner {
  position: relative;
  overflow: hidden;
  padding: 32px 22px 36px;
  border: 1px solid var(--about-hair);
  background:
    linear-gradient(135deg, rgba(18, 58, 38, 0.9) 0%, rgba(11, 15, 13, 0.96) 60%),
    var(--black);
}

.page-about .about-cta__inner::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 210px;
  height: 210px;
  border: 1px solid var(--about-rule);
  transform: rotate(45deg);
  pointer-events: none;
}

.page-about .about-cta__inner .section-title {
  position: relative;
  margin: 0;
  max-width: 20em;
}

.page-about .about-cta__inner .lead {
  position: relative;
  margin: 16px 0 0;
  max-width: 58ch;
  color: var(--mist);
}

.page-about .about-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 600px) {
  .page-about .section {
    padding: 64px 0;
  }

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

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

  .page-about .venue-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--about-hair);
  }

  .page-about .venue-zone {
    padding: 22px 20px 24px;
    border-right: 1px solid var(--about-hair);
    border-bottom: 1px solid var(--about-hair);
  }

  .page-about .venue-zones {
    border-bottom: 0;
  }

  .page-about .venue-zone:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 860px) {
  .page-about .section {
    padding: 84px 0;
  }

  .page-about .about-hero {
    padding-top: 26px;
    padding-bottom: 60px;
  }

  .page-about .about-head {
    margin-bottom: 48px;
  }

  .page-about .about-hero__facts .num {
    font-size: 34px;
  }

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

  .page-about .crew-card {
    padding: 34px 28px 36px;
  }

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

  .page-about .metric-def {
    padding: 28px 22px 30px;
  }

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

  .page-about .venue-zone:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--about-hair);
  }

  .page-about .venue-zone:nth-last-child(-n + 4) {
    border-bottom: 0;
  }

  .page-about .timeline-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 30px;
    align-items: start;
    padding-bottom: 46px;
  }

  .page-about .timeline-item__aside {
    display: block;
    text-align: right;
    margin-bottom: 0;
    padding-top: 2px;
  }

  .page-about .timeline-item__stage {
    display: block;
  }

  .page-about .timeline-item__num {
    display: block;
    margin-top: 6px;
    transform-origin: right center;
  }

  .page-about .timeline-item__unit {
    display: block;
    margin-top: 4px;
  }

  .page-about .timeline-item__main h3 {
    font-size: 22px;
  }

  .page-about .partners-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 44px;
    align-items: start;
  }

  .page-about .partners__media {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .about-cta__inner {
    padding: 48px 44px 52px;
  }
}

@media (min-width: 1180px) {
  .page-about .about-hero__lead {
    font-size: 19px;
  }

  .page-about .about-cta__inner {
    padding: 56px 56px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about *,
  .page-about *::before,
  .page-about *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}