.page-about {
  --about-line: rgba(168, 247, 214, 0.15);
  --about-line-soft: rgba(168, 247, 214, 0.07);
  --about-body-text: rgba(233, 245, 239, 0.8);
  --about-aside-w: 150px;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 52px) 0 68px;
  background:
    radial-gradient(120% 90% at 82% 0%, #14382d 0%, #071C16 52%, #030D09 100%);
}

.page-about .about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.32;
  z-index: 0;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(53, 240, 166, 0.05) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, rgba(7, 28, 22, 0.3) 0%, rgba(7, 28, 22, 0.82) 58%, var(--ink) 100%);
}

.page-about .about-hero-inner {
  position: relative;
  z-index: 2;
}

.page-about .about-kicker {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-about .about-hero-title {
  margin: 16px 0 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8.6vw, 110px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--mist);
}

.page-about .about-hero-lede {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--about-line);
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--amber);
  min-width: 132px;
}

.page-about .about-fact-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  color: var(--amber);
  line-height: 1.1;
}

.page-about .about-fact-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}

.page-about .about-hero-annotation {
  display: none;
  position: absolute;
  right: 18px;
  bottom: 96px;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(168, 247, 214, 0.45);
}

/* ---------- 导读 + 目录 ---------- */
.page-about .about-intro {
  padding: 52px 0 8px;
  border-bottom: 1px solid var(--about-line-soft);
}

.page-about .about-intro-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding-bottom: 48px;
}

.page-about .about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .about-toc-title {
  width: 100%;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.page-about .about-toc-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--about-line);
  font-size: 13px;
  color: var(--mint);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.page-about .about-toc-link .data-num {
  font-size: 11px;
  color: var(--amber);
}

.page-about .about-toc-link:hover,
.page-about .about-toc-link:focus-visible {
  border-color: var(--hairline-strong);
  background: rgba(53, 240, 166, 0.08);
  color: var(--mist);
  outline: none;
}

.page-about .about-intro-body h2 {
  margin-bottom: 20px;
}

.page-about .about-intro-body .prose {
  margin: 0 0 16px;
  max-width: 68ch;
  color: var(--about-body-text);
  font-size: 16px;
  line-height: 1.85;
}

/* ---------- 通用章节骨架 ---------- */
.page-about .about-section {
  position: relative;
  overflow: hidden;
}

.page-about .about-section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 56px;
}

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

.page-about .about-aside-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-about .about-aside-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.page-about .about-body .display-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.page-about .about-body .lede {
  margin: 0 0 34px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-body .text-link {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 240, 166, 0.35);
  transition: border-color 180ms ease;
}

.page-about .about-body .text-link:hover,
.page-about .about-body .text-link:focus-visible {
  border-color: var(--neon);
  outline: none;
}

/* ---------- 01 服务人群 ---------- */
.page-about .about-crowd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .about-crowd-card {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--forest);
  border: 1px solid var(--about-line);
  border-left: 3px solid rgba(53, 240, 166, 0.5);
}

.page-about .about-crowd-tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--neon);
}

.page-about .about-crowd-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-crowd-card p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-crowd-card--b {
  border-left-color: rgba(242, 181, 68, 0.6);
}

.page-about .about-crowd-card--d {
  border-left-color: rgba(168, 247, 214, 0.4);
}

/* ---------- 02 时间线 ---------- */
.page-about .about-section--timeline {
  background: linear-gradient(180deg, var(--ink) 0%, #0A231C 24%, #0A231C 76%, var(--ink) 100%);
}

.page-about .about-timeline-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  z-index: 0;
}

.page-about .about-section--timeline .about-section-inner {
  position: relative;
  z-index: 1;
}

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

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(53, 240, 166, 0) 0%, var(--neon) 10%, rgba(53, 240, 166, 0.5) 55%, var(--amber) 92%, rgba(242, 181, 68, 0) 100%);
  opacity: 0.55;
}

.page-about .about-stop {
  position: relative;
  margin-bottom: 20px;
  cursor: default;
}

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

.page-about .about-stop::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 20px;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(242, 181, 68, 0.13);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.page-about .about-stop-year {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-about .about-stop-card {
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: rgba(12, 42, 34, 0.82);
  border: 1px solid var(--about-line);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.page-about .about-stop-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mist);
}

.page-about .about-stop-card p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-stop-sum {
  margin: 10px 0 0 !important;
  padding-top: 10px;
  border-top: 1px dashed var(--about-line);
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--slate) !important;
  transition: color 200ms ease;
}

.page-about .about-stop:hover::before,
.page-about .about-stop:focus-within::before,
.page-about .about-stop:focus::before {
  box-shadow: 0 0 0 9px rgba(242, 181, 68, 0.2);
  transform: scale(1.08);
}

.page-about .about-stop:hover .about-stop-card,
.page-about .about-stop:focus .about-stop-card,
.page-about .about-stop:focus-within .about-stop-card {
  border-color: rgba(53, 240, 166, 0.42);
  background: rgba(13, 48, 39, 0.94);
}

.page-about .about-stop:hover .about-stop-sum,
.page-about .about-stop:focus .about-stop-sum {
  color: var(--mint) !important;
}

.page-about .about-stop:focus {
  outline: none;
}

.page-about .about-timeline-foot {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

/* ---------- 03 内容与数据 ---------- */
.page-about .about-method {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .about-method-item {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(12, 42, 34, 0.55);
  border: 1px solid var(--about-line-soft);
}

.page-about .about-method-idx {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(53, 240, 166, 0.12);
  border: 1px solid rgba(53, 240, 166, 0.32);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neon);
}

.page-about .about-method-item h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-method-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--about-line);
}

.page-about .about-metric {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  background: var(--forest);
}

.page-about .about-metric-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  color: var(--amber);
  min-width: 84px;
}

.page-about .about-metric-label {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- 04 团队与协作（靛紫分区） ---------- */
.page-about .about-section--band {
  background:
    radial-gradient(90% 120% at 100% 0%, #3B2F6E 0%, #221B45 46%, #071C16 100%);
}

.page-about .about-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.page-about .about-team-block {
  padding: 20px 0;
  border-top: 1px solid rgba(168, 247, 214, 0.16);
}

.page-about .about-team-block:first-child {
  border-top: none;
  padding-top: 0;
}

.page-about .about-team-block h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mist);
}

.page-about .about-team-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-team-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(168, 247, 214, 0.2);
  background: rgba(3, 13, 9, 0.35);
}

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

/* ---------- 05 品牌承诺（酒红分区） ---------- */
.page-about .about-section--commit {
  background:
    linear-gradient(180deg, var(--ink) 0%, #4A1E29 14%, #7B2E3E 46%, #3B1A24 88%, var(--ink) 100%);
}

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

.page-about .about-commit-card {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(7, 28, 22, 0.45);
  border: 1px solid rgba(233, 245, 239, 0.16);
  backdrop-filter: blur(2px);
}

.page-about .about-commit-tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mint);
}

.page-about .about-commit-card p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(233, 245, 239, 0.84);
}

.page-about .about-cta {
  margin-top: 34px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(53, 240, 166, 0.5);
  background: rgba(3, 13, 9, 0.42);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 200ms ease;
}

.page-about .about-cta:hover {
  border-color: rgba(53, 240, 166, 0.85);
}

.page-about .about-cta p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(233, 245, 239, 0.86);
}

.page-about .about-cta-btn {
  flex-shrink: 0;
}

/* ---------- 桌面增强 ---------- */
@media (min-width: 760px) {
  .page-about .about-crowd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-about .about-crowd-card:nth-child(2),
  .page-about .about-crowd-card:nth-child(4) {
    margin-top: 30px;
  }

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

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

  .page-about .about-metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

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

  .page-about .about-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px 34px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero {
    padding: calc(var(--header-h) + 84px) 0 96px;
  }

  .page-about .about-hero-annotation {
    display: block;
  }

  .page-about .about-hero-facts {
    gap: 22px 56px;
    margin-top: 52px;
    padding-top: 30px;
  }

  .page-about .about-intro {
    padding-top: 68px;
  }

  .page-about .about-intro-inner {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 56px;
    padding-bottom: 60px;
  }

  .page-about .about-toc {
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    padding-right: 12px;
    border-right: 1px solid var(--about-line-soft);
  }

  .page-about .about-toc-link {
    border-radius: 10px;
    border-color: transparent;
    padding: 8px 12px;
    justify-content: flex-start;
  }

  .page-about .about-section-inner {
    grid-template-columns: var(--about-aside-w) minmax(0, 1fr);
    gap: 52px;
    padding-block: 88px;
  }

  .page-about .about-aside {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: start;
    padding-top: 10px;
    border-right: 1px solid var(--about-line-soft);
    padding-right: 18px;
    min-height: 160px;
  }

  .page-about .about-aside-label {
    writing-mode: vertical-rl;
    letter-spacing: 0.32em;
    color: rgba(168, 247, 214, 0.5);
  }

  .page-about .about-timeline {
    padding-left: 46px;
    column-gap: 0;
  }

  .page-about .about-stop::before {
    left: -46px;
  }

  .page-about .about-stop {
    margin-bottom: 26px;
  }

  .page-about .about-stop:nth-child(even) {
    margin-left: 42px;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 44px;
  }
}
<<<PAGE_CSS_END>>>

修正上一条：不要输出 `<<<PAGE_CSS_END>>>`，标记只有 MAIN_HTML 与 PAGE_CSS 两个。以下为正确最终输出：


<main id="main-content" class="page-about">

  <section class="about-hero">
    <img class="about-hero-bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深墨绿与靛紫交叠的抽象长卷色带，叠加战术板线条与球场俯视几何切片">
    <div class="container about-hero-inner">
      <nav class="breadcrumb" aria-label="当前位置">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">品牌使命</li>
        </ol>
      </nav>
      <p class="about-kicker">品牌使命 · MISSION</p>
      <h1 class="about-hero-title">先让你看懂比赛，<br>再谈其他</h1>
      <p class="about-hero-lede">爱游戏赛场从 2018 年的一份赛程索引起步。要解决的问题一直很具体：你追的联赛散落在十几个站点，主力缺阵的消息写在长文第三段，失球集中在哪一侧得自己一场场数。这些年我们把入口、出场名单、比分走向摆到同一块战术板上，让你打开的那一刻就能做出判断。</p>
      <div class="about-hero-facts">
        <div class="about-fact">
          <span class="about-fact-num data-num">18</span>
          <span class="about-fact-label">个联赛与杯赛，分 6 个层级</span>
        </div>
        <div class="about-fact">
          <span class="about-fact-num data-num">26,000</span>
          <span class="about-fact-label">余场赛事的赛程与战报索引</span>
        </div>
        <div class="about-fact">
          <span class="about-fact-num data-num">48万</span>
          <span class="about-fact-label">位注册会员在这里看球</span>
        </div>
      </div>
    </div>
    <span class="about-hero-annotation" aria-hidden="true">AIYOUXI ARENA · EST. 2018</span>
  </section>

  <section class="about-intro" id="preface">
    <div class="container about-intro-inner">
      <nav class="about-toc" aria-label="本页导读">
        <p class="about-toc-title">编辑部目录</p>
        <a class="about-toc-link" href="#crowd"><span class="data-num">01</span>谁在读这块赛场</a>
        <a class="about-toc-link" href="#timeline"><span class="data-num">02</span>七年里挪了哪些位置</a>
        <a class="about-toc-link" href="#method"><span class="data-num">03</span>比分是怎么来的</a>
        <a class="about-toc-link" href="#team"><span class="data-num">04</span>背后有人</a>
        <a class="about-toc-link" href="#commit"><span class="data-num">05</span>接下来往哪走</a>
      </nav>
      <div class="about-intro-body">
        <h2 class="display-title">起点是球迷的一句抱怨</h2>
        <p class="prose">“三个 App 来回切，就为了搞清楚我支持的队这轮缺谁。”这句话后来成了爱游戏赛场所有改版的出发点。我们不打算再做一份更长的资讯流，而是把每轮比赛最有判断价值的几件事——谁不能上、最近五轮丢了几个球、这轮是主场还是客场——放到切换联赛就能看见的位置。</p>
        <p class="prose">到今天，平台的日常由三件事撑起来：把 18 个联赛与杯赛的赛程编成可回溯的索引，用等宽数字把比分和轮次排得能一眼对照，以及让 22 人的客服团队在你问出问题时接得住。</p>
      </div>
    </div>
  </section>

  <section class="about-section" id="crowd">
    <div class="container about-section-inner">
      <aside class="about-aside">
        <span class="about-aside-num data-num">01</span>
        <span class="about-aside-label">服务人群</span>
      </aside>
      <div class="about-body">
        <h2 class="display-title">四种人，四种读法</h2>
        <p class="lede">同一份赛程，被需要的角度并不一样。我们按使用场景排布内容，而不是按数据表的结构排布。</p>

        <div class="about-crowd">
          <article class="about-crowd-card about-crowd-card--a">
            <p class="about-crowd-tag">通勤路上</p>
            <h3>两站地的工夫，看完一轮的走向</h3>
            <p>移动端默认速览密度，单页战报平均约 1.4 秒打开。谁进了球、谁被停赛、下轮碰谁，扫三屏就能接着去上班。</p>
          </article>
          <article class="about-crowd-card about-crowd-card--b">
            <p class="about-crowd-tag">多联赛深度球迷</p>
            <h3>切换联赛，前两栏原地不动</h3>
            <p>桌面端赛程中心把阵容变动和进失球分布固定在联赛导航的最前面。你在五大联赛之间横跳时，对照表不会跟着重置，省掉来回记数字的力气。</p>
          </article>
          <article class="about-crowd-card about-crowd-card--c">
            <p class="about-crowd-tag">移动端随手看</p>
            <h3>不装包，也能收到开赛提醒</h3>
            <p>轻量网页和 PWA 两条路，关注球队之后，订阅中心会按联赛、球队推送提醒，常规消息延迟在 30 秒内，赛前不会错过。</p>
          </article>
          <article class="about-crowd-card about-crowd-card--d">
            <p class="about-crowd-tag">媒体与俱乐部</p>
            <h3>需要一个能引用的赛程底本</h3>
            <p>14 家体育媒体和 5 家电竞俱乐部在选题与排期时会查我们的轮次索引。近 5 轮数据区间、球队与球场维度都能直接对照。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-section--timeline" id="timeline">
    <img class="about-timeline-bg" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="连续曲线串联多个琥珀金节点的抽象时间线，节点旁环绕等宽数字纹理" loading="lazy" decoding="async">
    <div class="container about-section-inner">
      <aside class="about-aside">
        <span class="about-aside-num data-num">02</span>
        <span class="about-aside-label">发展历程</span>
      </aside>
      <div class="about-body">
        <h2 class="display-title">七年，从一张表到一套入口</h2>
        <p class="lede">每一次版本推进都对应一类具体的麻烦。下面是几个真正改变了使用方式的节点。</p>

        <ol class="about-timeline">
          <li class="about-stop" tabindex="0">
            <span class="about-stop-year data-num">2018</span>
            <div class="about-stop-card">
              <h3>赛程索引第一次上线</h3>
              <p>我们把赛季、轮次、球队、球场四个维度编成索引，最早可以回溯到 2018 赛季。找一场旧比赛，不用再去论坛里翻帖子。</p>
              <p class="about-stop-sum">阶段摘要：从零搭起可回溯的比赛目录</p>
            </div>
          </li>
          <li class="about-stop" tabindex="0">
            <span class="about-stop-year data-num">2020</span>
            <div class="about-stop-card">
              <h3>联赛订阅开出来</h3>
              <p>上班族不再需要每天手动刷。订阅中心支持按联赛、球队和开赛提醒三类通知，赛程一变，手机上先震动。</p>
              <p class="about-stop-sum">阶段摘要：从「你自己来看」变成「我们提醒你」</p>
            </div>
          </li>
          <li class="about-stop" tabindex="0">
            <span class="about-stop-year data-num">2022</span>
            <div class="about-stop-card">
              <h3>会员中心接管关注关系</h3>
              <p>关注的球队只设一次，会员中心和订阅中心共用同一份设置。过去 12 个月的赛程查询记录也在里面，想回看随时翻。</p>
              <p class="about-stop-sum">阶段摘要：关注一次，两处同步生效</p>
            </div>
          </li>
          <li class="about-stop" tabindex="0">
            <span class="about-stop-year data-num">2024</span>
            <div class="about-stop-card">
              <h3>新版桌面端把战术板摊开</h3>
              <p>联赛轨道改成横向，阵容变动与进失球分布落在最前两栏。切换联赛时不用跳页，左右对照就行。</p>
              <p class="about-stop-sum">阶段摘要：把「看数据」变成「比数据」</p>
            </div>
          </li>
          <li class="about-stop" tabindex="0">
            <span class="about-stop-year data-num">2025</span>
            <div class="about-stop-card">
              <h3>5.2 版本：安装包压到 86MB</h3>
              <p>Windows 10/11 与 macOS 12 以上都能直接装。过去一年完成 36 项体验优化，赛季高峰期日均更新赛程与战报条目约 1,200 条。</p>
              <p class="about-stop-sum">阶段摘要：轻一点，稳一点，高峰也扛得住</p>
            </div>
          </li>
        </ol>

        <p class="about-timeline-foot">想直接试试当前版本，可以到 <a class="text-link" href="/download/">版本下载</a> 取桌面端 5.2 安装包。</p>
      </div>
    </div>
  </section>

  <section class="about-section" id="method">
    <div class="container about-section-inner">
      <aside class="about-aside">
        <span class="about-aside-num data-num">03</span>
        <span class="about-aside-label">内容与数据</span>
      </aside>
      <div class="about-body">
        <h2 class="display-title">比分为什么值得你信</h2>
        <p class="lede">赛场上最怕的不是没数据，是数据对不上。我们把这件事拆成三条线来做。</p>

        <div class="about-method">
          <div class="about-method-item">
            <span class="about-method-idx data-num">A</span>
            <h3>七家数据服务商，双源比对</h3>
            <p>平台与 7 家数据服务商合作，赛程与比分走双源校验流程。两条来源不一致时，会先挂起再确认，不会让一个可疑数字直接出现在页面上。</p>
          </div>
          <div class="about-method-item">
            <span class="about-method-idx data-num">B</span>
            <h3>九个人的内容组，每周 40 篇</h3>
            <p>战术板内容团队固定 9 人，每周产出约 40 篇赛前摘要与战报速览。写的是「这轮为什么值得看」，不是把通稿换个说法。</p>
          </div>
          <div class="about-method-item">
            <span class="about-method-idx data-num">C</span>
            <h3>近 5 轮，按联赛分层摆出来</h3>
            <p>每个联赛都维护最近五轮的进球、失球、阵容变动与轮次节点。你可以在赛事订阅里按联赛、轮次、球队三种方式筛选，找你关心的那一段。</p>
          </div>
        </div>

        <div class="about-metrics">
          <div class="about-metric">
            <span class="about-metric-num data-num">6.2万</span>
            <span class="about-metric-label">日均访问人次</span>
          </div>
          <div class="about-metric">
            <span class="about-metric-num data-num">63%</span>
            <span class="about-metric-label">来自移动端</span>
          </div>
          <div class="about-metric">
            <span class="about-metric-num data-num">4次</span>
            <span class="about-metric-label">每年版本更新节奏</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-section--band" id="team">
    <div class="container about-section-inner">
      <aside class="about-aside">
        <span class="about-aside-num data-num">04</span>
        <span class="about-aside-label">团队与协作</span>
      </aside>
      <div class="about-body">
        <h2 class="display-title">数字背后站着一屋子人</h2>
        <p class="lede">赛程可以自动同步，但「这轮到底怎么回事」还是得有人回答。</p>

        <div class="about-team">
          <div class="about-team-copy">
            <div class="about-team-block">
              <h3>22 人客服，工作日在线上</h3>
              <p>工作日 9:00 至 18:00 在线，平均首次响应约 18 分钟。碰到比分不对、轮次错位这类问题，把联赛和轮次一起发过来，核对会快得多。</p>
            </div>
            <div class="about-team-block">
              <h3>19 家内容伙伴，双向供稿</h3>
              <p>与 14 家体育媒体、5 家电竞俱乐部保持内容合作。他们提供赛场视角，我们把这些观察整理成你能快速扫读的段落。</p>
            </div>
            <div class="about-team-block">
              <h3>想聊合作，直接找我们</h3>
              <p>媒体选题、俱乐部排期、内容联署都可以走 <a class="text-link" href="/consult/">咨询服务</a>，工作日会有人接。</p>
            </div>
          </div>
          <div class="about-team-media">
            <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="多个半透明圆角卡片交叠成协作网格，青绿细线在卡片之间彼此连接" loading="lazy" decoding="async">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="about-section about-section--commit" id="commit">
    <div class="container about-section-inner">
      <aside class="about-aside">
        <span class="about-aside-num data-num">05</span>
        <span class="about-aside-label">品牌承诺</span>
      </aside>
      <div class="about-body">
        <h2 class="display-title">入口找得到，数字对得上，问题有人接</h2>
        <p class="lede">这三句话是我们对「安心之选、快速访问」的全部解释，也是接下来继续投力气的地方。</p>

        <div class="about-commit-grid">
          <div class="about-commit-card">
            <p class="about-commit-tag">联赛分类继续细化</p>
            <p>18 个联赛与杯赛已经按顶级联赛、杯赛、洲际赛事、青年赛事、女子赛事、电竞联赛分成 6 层。下一步是把女子赛事与青年赛事的赛季纵深补齐，让冷门联赛也能查到完整轮次。</p>
          </div>
          <div class="about-commit-card">
            <p class="about-commit-tag">移动端速览再压一压</p>
            <p>速览密度已经默认开启，接下来会把战报首屏的信息层级再收一层，让你在信号不稳的地铁里也能两三屏看完一轮。</p>
          </div>
          <div class="about-commit-card">
            <p class="about-commit-tag">会员服务往前提一步</p>
            <p>会员中心与订阅中心共享关注设置，未来会让赛程变更、阵容变动和提醒设置在同一处调整完，不用再跳两次。</p>
          </div>
        </div>

        <div class="about-cta">
          <p>从一份赛程表出发走了七年，路还长。你要是刚来，可以先看 <a class="text-link" href="/guide/">使用指南</a> 把会员中心配好，也可以去 <a class="text-link" href="/journal/">品牌日志</a> 看看我们平时怎么写一场球。</p>
          <a class="btn btn--primary about-cta-btn" href="/download/">获取桌面端 5.2</a>
        </div>
      </div>
    </div>
  </section>

</main>


.page-about {
  --about-line: rgba(168, 247, 214, 0.15);
  --about-line-soft: rgba(168, 247, 214, 0.07);
  --about-body-text: rgba(233, 245, 239, 0.8);
  --about-aside-w: 150px;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 52px) 0 68px;
  background: radial-gradient(120% 90% at 82% 0%, #14382d 0%, #071C16 52%, #030D09 100%);
}

.page-about .about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.32;
  z-index: 0;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(53, 240, 166, 0.05) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, rgba(7, 28, 22, 0.3) 0%, rgba(7, 28, 22, 0.82) 58%, var(--ink) 100%);
}

.page-about .about-hero-inner {
  position: relative;
  z-index: 2;
}

.page-about .about-kicker {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-about .about-hero-title {
  margin: 16px 0 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8.6vw, 110px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--mist);
}

.page-about .about-hero-lede {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--about-line);
}

.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--amber);
  min-width: 132px;
}

.page-about .about-fact-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  color: var(--amber);
  line-height: 1.1;
}

.page-about .about-fact-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}

.page-about .about-hero-annotation {
  display: none;
  position: absolute;
  right: 18px;
  bottom: 96px;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(168, 247, 214, 0.45);
}

/* ---------- 导读 + 目录 ---------- */
.page-about .about-intro {
  padding: 52px 0 8px;
  border-bottom: 1px solid var(--about-line-soft);
}

.page-about .about-intro-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding-bottom: 48px;
}

.page-about .about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-about .about-toc-title {
  width: 100%;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.page-about .about-toc-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--about-line);
  font-size: 13px;
  color: var(--mint);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.page-about .about-toc-link .data-num {
  font-size: 11px;
  color: var(--amber);
}

.page-about .about-toc-link:hover,
.page-about .about-toc-link:focus-visible {
  border-color: var(--hairline-strong);
  background: rgba(53, 240, 166, 0.08);
  color: var(--mist);
  outline: none;
}

.page-about .about-intro-body h2 {
  margin-bottom: 20px;
}

.page-about .about-intro-body .prose {
  margin: 0 0 16px;
  max-width: 68ch;
  color: var(--about-body-text);
  font-size: 16px;
  line-height: 1.85;
}

/* ---------- 通用章节骨架 ---------- */
.page-about .about-section {
  position: relative;
  overflow: hidden;
}

.page-about .about-section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 56px;
}

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

.page-about .about-aside-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-about .about-aside-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.page-about .about-body .display-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.page-about .about-body .lede {
  margin: 0 0 34px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-body .text-link {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 240, 166, 0.35);
  transition: border-color 180ms ease;
}

.page-about .about-body .text-link:hover,
.page-about .about-body .text-link:focus-visible {
  border-color: var(--neon);
  outline: none;
}

/* ---------- 01 服务人群 ---------- */
.page-about .about-crowd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .about-crowd-card {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--forest);
  border: 1px solid var(--about-line);
  border-left: 3px solid rgba(53, 240, 166, 0.5);
}

.page-about .about-crowd-tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--neon);
}

.page-about .about-crowd-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-crowd-card p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-crowd-card--b {
  border-left-color: rgba(242, 181, 68, 0.6);
}

.page-about .about-crowd-card--d {
  border-left-color: rgba(168, 247, 214, 0.4);
}

/* ---------- 02 时间线 ---------- */
.page-about .about-section--timeline {
  background: linear-gradient(180deg, var(--ink) 0%, #0A231C 24%, #0A231C 76%, var(--ink) 100%);
}

.page-about .about-timeline-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  z-index: 0;
}

.page-about .about-section--timeline .about-section-inner {
  position: relative;
  z-index: 1;
}

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

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(53, 240, 166, 0) 0%, var(--neon) 10%, rgba(53, 240, 166, 0.5) 55%, var(--amber) 92%, rgba(242, 181, 68, 0) 100%);
  opacity: 0.55;
}

.page-about .about-stop {
  position: relative;
  margin-bottom: 20px;
  cursor: default;
}

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

.page-about .about-stop::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 20px;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(242, 181, 68, 0.13);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.page-about .about-stop-year {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-about .about-stop-card {
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: rgba(12, 42, 34, 0.82);
  border: 1px solid var(--about-line);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.page-about .about-stop-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mist);
}

.page-about .about-stop-card p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-stop-sum {
  margin: 10px 0 0 !important;
  padding-top: 10px;
  border-top: 1px dashed var(--about-line);
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--slate) !important;
  transition: color 200ms ease;
}

.page-about .about-stop:hover::before,
.page-about .about-stop:focus::before,
.page-about .about-stop:focus-within::before {
  box-shadow: 0 0 0 9px rgba(242, 181, 68, 0.2);
  transform: scale(1.08);
}

.page-about .about-stop:hover .about-stop-card,
.page-about .about-stop:focus .about-stop-card,
.page-about .about-stop:focus-within .about-stop-card {
  border-color: rgba(53, 240, 166, 0.42);
  background: rgba(13, 48, 39, 0.94);
}

.page-about .about-stop:hover .about-stop-sum,
.page-about .about-stop:focus .about-stop-sum {
  color: var(--mint) !important;
}

.page-about .about-stop:focus {
  outline: none;
}

.page-about .about-timeline-foot {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate);
}

/* ---------- 03 内容与数据 ---------- */
.page-about .about-method {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .about-method-item {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(12, 42, 34, 0.55);
  border: 1px solid var(--about-line-soft);
}

.page-about .about-method-idx {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(53, 240, 166, 0.12);
  border: 1px solid rgba(53, 240, 166, 0.32);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neon);
}

.page-about .about-method-item h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--mist);
}

.page-about .about-method-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--about-line);
}

.page-about .about-metric {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  background: var(--forest);
}

.page-about .about-metric-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  color: var(--amber);
  min-width: 84px;
}

.page-about .about-metric-label {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
}

/* ---------- 04 团队与协作（靛紫分区） ---------- */
.page-about .about-section--band {
  background: radial-gradient(90% 120% at 100% 0%, #3B2F6E 0%, #221B45 46%, #071C16 100%);
}

.page-about .about-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.page-about .about-team-block {
  padding: 20px 0;
  border-top: 1px solid rgba(168, 247, 214, 0.16);
}

.page-about .about-team-block:first-child {
  border-top: none;
  padding-top: 0;
}

.page-about .about-team-block h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mist);
}

.page-about .about-team-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--about-body-text);
}

.page-about .about-team-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(168, 247, 214, 0.2);
  background: rgba(3, 13, 9, 0.35);
}

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

/* ---------- 05 品牌承诺（酒红分区） ---------- */
.page-about .about-section--commit {
  background: linear-gradient(180deg, var(--ink) 0%, #4A1E29 14%, #7B2E3E 46%, #3B1A24 88%, var(--ink) 100%);
}

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

.page-about .about-commit-card {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(7, 28, 22, 0.45);
  border: 1px solid rgba(233, 245, 239, 0.16);
  backdrop-filter: blur(2px);
}

.page-about .about-commit-tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mint);
}

.page-about .about-commit-card p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(233, 245, 239, 0.84);
}

.page-about .about-cta {
  margin-top: 34px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(53, 240, 166, 0.5);
  background: rgba(3, 13, 9, 0.42);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  transition: border-color 200ms ease;
}

.page-about .about-cta:hover {
  border-color: rgba(53, 240, 166, 0.85);
}

.page-about .about-cta p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(233, 245, 239, 0.86);
}

.page-about .about-cta-btn {
  flex-shrink: 0;
}

/* ---------- 桌面增强 ---------- */
@media (min-width: 760px) {
  .page-about .about-crowd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-about .about-crowd-card:nth-child(2),
  .page-about .about-crowd-card:nth-child(4) {
    margin-top: 30px;
  }

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

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

  .page-about .about-metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

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

  .page-about .about-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px 34px;
  }
}

@media (min-width: 900px) {
  .page-about .about-hero {
    padding: calc(var(--header-h) + 84px) 0 96px;
  }

  .page-about .about-hero-annotation {
    display: block;
  }

  .page-about .about-hero-facts {
    gap: 22px 56px;
    margin-top: 52px;
    padding-top: 30px;
  }

  .page-about .about-intro {
    padding-top: 68px;
  }

  .page-about .about-intro-inner {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 56px;
    padding-bottom: 60px;
  }

  .page-about .about-toc {
    flex-direction: column;
    flex-wrap: nowrap;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    padding-right: 12px;
    border-right: 1px solid var(--about-line-soft);
  }

  .page-about .about-toc-link {
    border-radius: 10px;
    border-color: transparent;
    padding: 8px 12px;
    justify-content: flex-start;
  }

  .page-about .about-section-inner {
    grid-template-columns: var(--about-aside-w) minmax(0, 1fr);
    gap: 52px;
    padding-block: 88px;
  }

  .page-about .about-aside {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: start;
    padding-top: 10px;
    border-right: 1px solid var(--about-line-soft);
    padding-right: 18px;
    min-height: 160px;
  }

  .page-about .about-aside-label {
    writing-mode: vertical-rl;
    letter-spacing: 0.32em;
    color: rgba(168, 247, 214, 0.5);
  }

  .page-about .about-timeline {
    padding-left: 46px;
  }

  .page-about .about-stop::before {
    left: -46px;
  }

  .page-about .about-stop {
    margin-bottom: 26px;
  }

  .page-about .about-stop:nth-child(even) {
    margin-left: 42px;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 44px;
  }
}