.page-about {
  background: var(--ink-night);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about__hero {
  position: relative;
  padding-block: clamp(16px, 3vw, 28px) clamp(44px, 7vw, 92px);
  background:
    radial-gradient(120% 100% at 88% 0%, rgba(7, 26, 43, 0.95) 0%, rgba(6, 21, 18, 0) 62%),
    linear-gradient(168deg, var(--ink-night) 0%, var(--night-blue) 100%);
  overflow: hidden;
}

.page-about__hero::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: min(62vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(43, 227, 242, 0.16);
  transform: rotate(16deg);
  pointer-events: none;
}

.page-about__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  margin-top: clamp(24px, 4vw, 44px);
}

.page-about__kicker {
  margin: 0 0 clamp(14px, 2.5vw, 22px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about__title {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 8.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-about__lead {
  margin: 0 0 clamp(22px, 3.5vw, 34px);
  max-width: 40ch;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  color: rgba(244, 237, 224, 0.8);
}

.page-about__factline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}

.page-about__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.page-about__fact-k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--signal-orange);
  min-width: 72px;
}

.page-about__fact-v {
  color: var(--mist-cyan);
}

.page-about__hero-media {
  margin: 0;
}

.page-about__hero-frame {
  aspect-ratio: 14 / 9;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%);
  background: var(--moss-panel);
}

.page-about__hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about__cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--mist-cyan);
}

/* ---------- 章节骨架 ---------- */
.page-about__section {
  padding-block: clamp(48px, 8vw, 104px);
  border-top: 1px solid var(--line);
}

.page-about__section--ink {
  background: var(--ink-night);
}

.page-about__section--moss {
  background: linear-gradient(180deg, rgba(18, 54, 44, 0.85) 0%, rgba(6, 21, 18, 0.98) 100%);
}

.page-about__section--deep {
  background:
    linear-gradient(200deg, rgba(7, 26, 43, 0.95) 0%, rgba(6, 21, 18, 0.98) 68%);
}

.page-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
}

.page-about__aside {
  align-self: start;
}

.page-about__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about__h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--paper);
}

.page-about__body {
  min-width: 0;
}

.page-about__p {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.85;
  color: rgba(244, 237, 224, 0.78);
}

.page-about__p:last-child {
  margin-bottom: 0;
}

.page-about__prose-block {
  margin-bottom: clamp(26px, 4vw, 40px);
}

/* ---------- 时间线 ---------- */
.page-about__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about__tl-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line-strong);
}

.page-about__tl-item:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.page-about__tl-year {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--electric-cyan);
}

.page-about__tl-body {
  min-width: 0;
}

.page-about__tl-body h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--paper);
}

.page-about__tl-figure {
  list-style: none;
  padding-block: clamp(22px, 3.4vw, 36px);
  border-top: 1px solid var(--line-strong);
}

/* ---------- 图片 ---------- */
.page-about__figure {
  margin: 0;
}

.page-about__figure-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--rock-gray);
}

.page-about__figure-frame--3x2 {
  aspect-ratio: 3 / 2;
}

.page-about__figure-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about__figure--wide {
  margin-top: clamp(24px, 3.5vw, 36px);
}

.page-about__figure--wide .page-about__figure-frame {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 100%, 0 100%);
}

/* ---------- 团队 ---------- */
.page-about__team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-about__team-cell {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(18, 54, 44, 0.5);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-about__team-cell h3 {
  margin: 6px 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__team-cell .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
}

.page-about__team-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--electric-cyan);
}

.page-about__team-cell:hover,
.page-about__team-cell:focus-within {
  transform: translateY(-3px);
  border-left-color: var(--signal-orange);
  background: rgba(18, 54, 44, 0.82);
}

/* ---------- 数据 ---------- */
.page-about__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(22px, 3.4vw, 38px);
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about__stat {
  padding: 20px 18px;
  background: #0b241d;
}

.page-about__stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--signal-orange);
}

.page-about__stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mist-cyan);
}

/* ---------- 接入步骤 ---------- */
.page-about__steps {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-about__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.page-about__step:first-child {
  border-top: 1px solid var(--line);
}

.page-about__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--electric-cyan);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--electric-cyan);
}

.page-about__step h3 {
  margin: 2px 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__step .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- 路线图 ---------- */
.page-about__roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-about__road-item {
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease);
}

.page-about__road-item:hover {
  border-left-color: var(--signal-orange);
}

.page-about__road-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--electric-cyan);
}

.page-about__road-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__road-item .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- 行动区 ---------- */
.page-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-about__actions--cta {
  margin-top: clamp(20px, 3vw, 28px);
}

/* ---------- 结尾 ---------- */
.page-about__cta {
  padding-block: clamp(44px, 7vw, 88px);
  border-top: 1px solid var(--line-strong);
  background:
    linear-gradient(128deg, rgba(255, 90, 42, 0.16) 0%, rgba(6, 21, 18, 0) 58%),
    var(--night-blue);
}

.page-about__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

.page-about__cta-title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-about__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .page-about__roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }
}

@media (min-width: 900px) {
  .page-about__hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-about__split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-about__aside {
    position: sticky;
    top: 96px;
  }

  .page-about__tl-item {
    grid-template-columns: clamp(104px, 13vw, 168px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }

  .page-about__cta-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-about__actions--cta {
    margin-top: 0;
    justify-content: flex-end;
  }
}

@media (min-width: 1180px) {
  .page-about__title {
    letter-spacing: -0.02em;
  }

  .page-about__lead {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about__team-cell,
  .page-about__road-item {
    transition: none;
  }

  .page-about__team-cell:hover,
  .page-about__team-cell:focus-within {
    transform: none;
  }
}

<<<END>>>

等等，我重复了 PAGE_CSS 标记。让我更正——每个标记只出现一次。

正确顺序：MAIN_HTML 块，然后是 PAGE_CSS 块。上面我在第一个 CSS 后面不小心加了结束标记，现在修正。

让我输出修正后的版本。实际上我早先的回复里已经有了标记结构；我必须确保 PAGE_CSS 只出现一次，并且 END 标记（如果有的话）……指令说标记只能是那三个尖括号包围的，而且每个只出现一次。所以应该是：


...

...
<<<END>>>

等等，“<<<END>>>”是必要的标记吗？指令说“严格按照以下标记顺序输出，每个标记只能出现一次”，只提到了两个标记。可能不需要 END。但我不确定。最好只使用两个指定的标记，不加 END，或者加上它？指令只说了  和 。我就只用那两个。

但在我上面的草稿里，我写了 <<<END>>>，以及重复的 。让我干净地重新输出。
<main id="main-content" class="page-about">
  <section class="page-about__hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑导航">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">赛场总览</a></li>
          <li class="breadcrumb__item"><span class="breadcrumb__current">品牌档案</span></li>
        </ol>
      </nav>
      <div class="page-about__hero-inner">
        <div class="page-about__hero-copy">
          <p class="page-about__kicker">品牌档案 / PROFILE 001</p>
          <h1 class="page-about__title">从索引框架<br>到观赛大屏</h1>
          <p class="page-about__lead">
            FB赛场自 2019 年起整理赛事、球队与历史交锋资料，为场馆观赛空间、球迷社群和企业展厅提供可以按竞赛项目与时间安排取用的中文目录。六年里，我们从一套索引框架做到了多画幅大屏展示和电脑端版本查询。
          </p>
          <ul class="page-about__factline">
            <li class="page-about__fact"><span class="page-about__fact-k">2019</span><span class="page-about__fact-v">赛事索引框架落地</span></li>
            <li class="page-about__fact"><span class="page-about__fact-k">28 人</span><span class="page-about__fact-v">编辑、校对、技术与支持</span></li>
            <li class="page-about__fact"><span class="page-about__fact-k">5 个项目</span><span class="page-about__fact-v">足球 · 篮球 · 网球 · 赛车 · 排球</span></li>
          </ul>
        </div>
        <figure class="page-about__hero-media">
          <div class="page-about__hero-frame">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间屏幕墙、索引标签与档案编号叠成品牌档案墙，呈现赛事内容整理历程">
          </div>
          <figcaption class="page-about__cap">FIG. 01 — 赛事索引档案墙 / 项目、赛事、球队三级标签成列排布</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--ink" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">01</span>
          <h2 class="page-about__h2">我们为什么<br>做赛事索引</h2>
        </header>
        <div class="page-about__body">
          <p class="page-about__p">
            开赛前的几个小时，场馆的屏幕要摆出对阵双方和近期战绩，球迷社群的群公告要写清交手记录，内容编辑要给稿件配一份看得懂的赛程表。这些信息过去散在好几个渠道里，队名写法不统一、简称互相混用，光分辨哪一条更准确就要耗掉不少时间。
          </p>
          <p class="page-about__p">
            我们把赛事、球队、历史交锋三类资料编进同一套索引：每项赛事有固定名称与编号，每支球队有唯一写法，常见对阵保留近 10 次历史交锋的展示位。取用的一方只要说出赛事或球队，就能拿到配套的条目和可直接上屏的排布。
          </p>
          <p class="page-about__p">
            这套索引服务的是具体场景——场馆观赛区的大屏、球迷社群的活动预告、企业展厅的接待动线，而不是一份躺在文件夹里的赛程表。资料能取用、能上屏、能跟着赛季往前走，才算真正解决问题。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--moss" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">02</span>
          <h2 class="page-about__h2">一路走来的<br>四个节点</h2>
        </header>
        <div class="page-about__body">
          <ol class="page-about__timeline">
            <li class="page-about__tl-item">
              <div class="page-about__tl-year">2019</div>
              <div class="page-about__tl-body">
                <h3>建立赛事索引框架</h3>
                <p class="page-about__p">
                  起步只做一件事：把中文赛事名称和球队名称定出统一写法。框架落地后，目录收录 120 余项赛事与杯赛，6800 余支球队条目按足球、篮球、网球、赛车、排球五个项目归类。
                </p>
              </div>
            </li>
            <li class="page-about__tl-item">
              <div class="page-about__tl-year">2021</div>
              <div class="page-about__tl-body">
                <h3>大屏版上线</h3>
                <p class="page-about__p">
                  场馆在观赛区要的是能直接投上屏幕的画幅，不是一张网页。大屏版面向场馆观赛区、球迷活动空间和企业展厅，支持多画面赛事信息轮播，优先适配 1920×1080 与 3840×2160 两种屏幕。
                </p>
              </div>
            </li>
            <li class="page-about__tl-figure">
              <figure class="page-about__figure">
                <div class="page-about__figure-frame">
                  <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="低角度看台剪影与转播大屏，表现大屏版上线后的场馆观赛空间">
                </div>
                <figcaption class="page-about__cap">FIG. 02 — 观赛区大屏 / 多画面轮播与看台灯光同步</figcaption>
              </figure>
            </li>
            <li class="page-about__tl-item">
              <div class="page-about__tl-year">2023</div>
              <div class="page-about__tl-body">
                <h3>电脑端版本号查询</h3>
                <p class="page-about__p">
                  接入方开始关心自己用的是哪一版。我们把终端类型、版本批次和更新说明放到同一个查询入口，版本号按主版本号、功能版本号、修订号三段式呈现，站内保留最近 8 个版本记录。
                </p>
              </div>
            </li>
            <li class="page-about__tl-item">
              <div class="page-about__tl-year">2025</div>
              <div class="page-about__tl-body">
                <h3>统一反馈入口</h3>
                <p class="page-about__p">
                  场馆、社群和展厅遇到的问题各不一样。四类入口上线后，目录纠错、球队资料补充、版本问题和使用建议都从同一处进入，工作日内按提交顺序处理，通常在 2 个工作日内完成分类。
                </p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--ink" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">03</span>
          <h2 class="page-about__h2">一条条目<br>怎么走到屏幕前</h2>
        </header>
        <div class="page-about__body">
          <div class="page-about__prose-block">
            <p class="page-about__p">
              一条赛事条目从进入目录到对外展示，要过三道编辑和三道校对。赛事名称、球队名称与版本号各有独立的校对节点，前一位编辑确认过的字段，下一位会重新比对一遍再放行。120 余项赛事与 6800 余支球队条目的名称规范，就是靠这套流程一年年跑下来没有走样。
            </p>
            <p class="page-about__p">
              排版之前还有一层工作：把赛事、球队和历史交锋按展示位置重新编排。大屏上一屏能放几组对阵、社群公告里先写哪一段、展厅循环到第几屏切换，这些决定了资料的排列顺序，也决定了观众在几秒之内能不能看懂。
            </p>
            <p class="page-about__p">
              围绕赛季阶段，我们每年整理 12 期专题索引，把赛程、球队状态与交手记录按轮次编排，场馆可以按周更换上屏内容，社群也能直接拿去排活动预告。
            </p>
          </div>
          <figure class="page-about__figure page-about__figure--wide">
            <div class="page-about__figure-frame page-about__figure-frame--3x2">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="暗光控制室中的索引卡片、等宽版本标签与校对清单特写，呈现内容团队的工作氛围">
            </div>
            <figcaption class="page-about__cap">FIG. 03 — 校对桌面 / 索引卡片、版本标签与条目清单</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--deep" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">04</span>
          <h2 class="page-about__h2">28 人<br>四条工作线</h2>
        </header>
        <div class="page-about__body">
          <ul class="page-about__team">
            <li class="page-about__team-cell">
              <span class="page-about__team-idx">A</span>
              <h3>编辑</h3>
              <p class="page-about__p">按赛季阶段组织专题索引，把赛事、球队与历史交锋串成完整的展示条目，也负责新收录赛事的基础资料整理。</p>
            </li>
            <li class="page-about__team-cell">
              <span class="page-about__team-idx">B</span>
              <h3>数据校对</h3>
              <p class="page-about__p">守着赛事名称、球队名称与版本号三个独立校对节点，逐项比对后再交付发布，赛季高峰期加派人手跟批。</p>
            </li>
            <li class="page-about__team-cell">
              <span class="page-about__team-idx">C</span>
              <h3>产品技术</h3>
              <p class="page-about__p">负责大屏画幅适配、多画面轮播与版本号查询入口的开发。两条版本线按季度发布功能版本，平均每年完成 4 次版本更新。</p>
            </li>
            <li class="page-about__team-cell">
              <span class="page-about__team-idx">D</span>
              <h3>客户支持</h3>
              <p class="page-about__p">对接场馆、社群与展厅的日常使用问题，给反馈排处理顺序，并把高频问题带回编辑与产品那边。</p>
            </li>
          </ul>
          <div class="page-about__stats">
            <div class="page-about__stat">
              <span class="page-about__stat-num">28</span>
              <span class="page-about__stat-label">人内容团队</span>
            </div>
            <div class="page-about__stat">
              <span class="page-about__stat-num">40+</span>
              <span class="page-about__stat-label">家场馆观赛空间在用</span>
            </div>
            <div class="page-about__stat">
              <span class="page-about__stat-num">20+</span>
              <span class="page-about__stat-label">个球迷社群取用目录</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--ink" id="onboarding" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">05</span>
          <h2 class="page-about__h2">接入之前<br>先定三件事</h2>
        </header>
        <div class="page-about__body">
          <p class="page-about__p">
            场馆、球迷社群和企业展厅找到我们时，需求通常很清楚：什么时候要、放在哪块屏、循环多久。把下面三项定下来，方案就能落地。
          </p>
          <ol class="page-about__steps">
            <li class="page-about__step">
              <span class="page-about__step-num">A</span>
              <div>
                <h3>画幅</h3>
                <p class="page-about__p">大屏是按 1920×1080 还是 3840×2160 布置，电脑端是否在 1366px 及以上分辨率使用。画幅定了，多画面怎么切、字号怎么给就有依据。</p>
              </div>
            </li>
            <li class="page-about__step">
              <span class="page-about__step-num">B</span>
              <div>
                <h3>目录范围</h3>
                <p class="page-about__p">需要哪几个竞赛项目、覆盖哪类赛事、是否要带历史交锋栏位。范围越小，首屏越聚焦；范围越广，轮播节奏要重新排。</p>
              </div>
            </li>
            <li class="page-about__step">
              <span class="page-about__step-num">C</span>
              <div>
                <h3>日常对接</h3>
                <p class="page-about__p">定一位联系人，目录增补、画幅调整和版本问题都从这里走，处理结果也能直接回到同一个人手上。</p>
              </div>
            </li>
          </ol>
          <div class="page-about__actions">
            <a class="btn btn--signal" href="/offerings/">查看栏目与大屏</a>
            <a class="btn btn--ghost" href="/feedback/">提交合作咨询</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__section page-about__section--moss" data-reveal>
    <div class="shell">
      <div class="page-about__split">
        <header class="page-about__aside">
          <span class="page-about__num">06</span>
          <h2 class="page-about__h2">接下来<br>往哪投入</h2>
        </header>
        <div class="page-about__body">
          <ul class="page-about__roadmap">
            <li class="page-about__road-item">
              <span class="page-about__road-num">01</span>
              <h3>赛季专题再往前排</h3>
              <p class="page-about__p">专题索引按轮次细化到每周，场馆换内容时少改几处，社群也能直接拿去排预告。</p>
            </li>
            <li class="page-about__road-item">
              <span class="page-about__road-num">02</span>
              <h3>画幅覆盖到超宽与 4K</h3>
              <p class="page-about__p">在现有两种大屏画幅之外，把超宽屏与 4K 场景补齐，场地改造时不用二次调整版面。</p>
            </li>
            <li class="page-about__road-item">
              <span class="page-about__road-num">03</span>
              <h3>版本说明写得更细</h3>
              <p class="page-about__p">每条版本记录标明改了什么、影响哪块屏，接入方自己就能判断手上这一版是不是最新的。</p>
            </li>
            <li class="page-about__road-item">
              <span class="page-about__road-num">04</span>
              <h3>反馈走完整个来回</h3>
              <p class="page-about__p">从提交、分类到处理结果回告，每段都有明确的时间预期，提交人能知道自己的问题走到了哪一步。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="page-about__cta">
    <div class="shell page-about__cta-inner">
      <div>
        <span class="page-about__num">下一步</span>
        <h2 class="page-about__cta-title">把您的场地和赛程需求<br>发给我们</h2>
        <p class="page-about__p">
          您可以从栏目与大屏页先看现有结构，也可以把画幅、项目范围和期望的上屏时间写清楚，通过反馈通道发过来。工作日内我们会按提交顺序回复，客服邮箱 kefu@arena-e-fb.com.cn 同步接收。
        </p>
      </div>
      <div class="page-about__actions page-about__actions--cta">
        <a class="btn btn--signal" href="/feedback/">去反馈通道</a>
        <a class="btn btn--ghost" href="/blog/">看赛场日志</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  background: var(--ink-night);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-about__hero {
  position: relative;
  padding-block: clamp(16px, 3vw, 28px) clamp(44px, 7vw, 92px);
  background:
    radial-gradient(120% 100% at 88% 0%, rgba(7, 26, 43, 0.95) 0%, rgba(6, 21, 18, 0) 62%),
    linear-gradient(168deg, var(--ink-night) 0%, var(--night-blue) 100%);
  overflow: hidden;
}

.page-about__hero::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: min(62vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(43, 227, 242, 0.16);
  transform: rotate(16deg);
  pointer-events: none;
}

.page-about__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  margin-top: clamp(24px, 4vw, 44px);
}

.page-about__kicker {
  margin: 0 0 clamp(14px, 2.5vw, 22px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about__title {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 8.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-about__lead {
  margin: 0 0 clamp(22px, 3.5vw, 34px);
  max-width: 40ch;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  color: rgba(244, 237, 224, 0.8);
}

.page-about__factline {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-strong);
}

.page-about__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

.page-about__fact-k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--signal-orange);
  min-width: 72px;
}

.page-about__fact-v {
  color: var(--mist-cyan);
}

.page-about__hero-media {
  margin: 0;
}

.page-about__hero-frame {
  aspect-ratio: 14 / 9;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%);
  background: var(--moss-panel);
}

.page-about__hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about__cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--mist-cyan);
}

/* ---------- 章节骨架 ---------- */
.page-about__section {
  padding-block: clamp(48px, 8vw, 104px);
  border-top: 1px solid var(--line);
}

.page-about__section--ink {
  background: var(--ink-night);
}

.page-about__section--moss {
  background: linear-gradient(180deg, rgba(18, 54, 44, 0.85) 0%, rgba(6, 21, 18, 0.98) 100%);
}

.page-about__section--deep {
  background: linear-gradient(200deg, rgba(7, 26, 43, 0.95) 0%, rgba(6, 21, 18, 0.98) 68%);
}

.page-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
}

.page-about__aside {
  align-self: start;
}

.page-about__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about__h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  line-height: 1.18;
  color: var(--paper);
}

.page-about__body {
  min-width: 0;
}

.page-about__p {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.85;
  color: rgba(244, 237, 224, 0.78);
}

.page-about__p:last-child {
  margin-bottom: 0;
}

.page-about__prose-block {
  margin-bottom: clamp(26px, 4vw, 40px);
}

/* ---------- 时间线 ---------- */
.page-about__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about__tl-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line-strong);
}

.page-about__tl-item:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.page-about__tl-year {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--electric-cyan);
}

.page-about__tl-body {
  min-width: 0;
}

.page-about__tl-body h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--paper);
}

.page-about__tl-figure {
  list-style: none;
  padding-block: clamp(22px, 3.4vw, 36px);
  border-top: 1px solid var(--line-strong);
}

/* ---------- 图片 ---------- */
.page-about__figure {
  margin: 0;
}

.page-about__figure-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--rock-gray);
}

.page-about__figure-frame--3x2 {
  aspect-ratio: 3 / 2;
}

.page-about__figure-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about__figure--wide {
  margin-top: clamp(24px, 3.5vw, 36px);
}

.page-about__figure--wide .page-about__figure-frame {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 100%, 0 100%);
}

/* ---------- 团队 ---------- */
.page-about__team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-about__team-cell {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(18, 54, 44, 0.5);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-about__team-cell h3 {
  margin: 6px 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__team-cell .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.78;
}

.page-about__team-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--electric-cyan);
}

.page-about__team-cell:hover,
.page-about__team-cell:focus-within {
  transform: translateY(-3px);
  border-left-color: var(--signal-orange);
  background: rgba(18, 54, 44, 0.82);
}

/* ---------- 数据 ---------- */
.page-about__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(22px, 3.4vw, 38px);
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about__stat {
  padding: 20px 18px;
  background: #0b241d;
}

.page-about__stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--signal-orange);
}

.page-about__stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mist-cyan);
}

/* ---------- 接入步骤 ---------- */
.page-about__steps {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
}

.page-about__step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.page-about__step:first-child {
  border-top: 1px solid var(--line);
}

.page-about__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--electric-cyan);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--electric-cyan);
}

.page-about__step h3 {
  margin: 2px 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__step .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- 路线图 ---------- */
.page-about__roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-about__road-item {
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease);
}

.page-about__road-item:hover {
  border-left-color: var(--signal-orange);
}

.page-about__road-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--electric-cyan);
}

.page-about__road-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-about__road-item .page-about__p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- 行动区 ---------- */
.page-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-about__actions--cta {
  margin-top: clamp(20px, 3vw, 28px);
}

/* ---------- 结尾 ---------- */
.page-about__cta {
  padding-block: clamp(44px, 7vw, 88px);
  border-top: 1px solid var(--line-strong);
  background:
    linear-gradient(128deg, rgba(255, 90, 42, 0.16) 0%, rgba(6, 21, 18, 0) 58%),
    var(--night-blue);
}

.page-about__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

.page-about__cta-title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-about__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .page-about__roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }
}

@media (min-width: 900px) {
  .page-about__hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .page-about__split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
  }

  .page-about__aside {
    position: sticky;
    top: 96px;
  }

  .page-about__tl-item {
    grid-template-columns: clamp(104px, 13vw, 168px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }

  .page-about__cta-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .page-about__actions--cta {
    margin-top: 0;
    justify-content: flex-end;
  }
}

@media (min-width: 1180px) {
  .page-about__title {
    letter-spacing: -0.02em;
  }

  .page-about__lead {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about__team-cell,
  .page-about__road-item {
    transition: none;
  }

  .page-about__team-cell:hover,
  .page-about__team-cell:focus-within {
    transform: none;
  }
}