.page-about {
  --about-gutter: 30px;
  --about-gap: 18px;
}

.page-about .breadcrumb {
  padding-top: 20px;
  font-size: 13px;
}

/* ===== 首屏封面 ===== */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 44px;
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(56, 240, 208, 0.18), transparent 62%),
    radial-gradient(90% 70% at 2% 108%, rgba(242, 167, 59, 0.12), transparent 66%);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(43, 79, 70, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 79, 70, 0.35) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(82% 72% at 50% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(82% 72% at 50% 0%, #000 0%, transparent 76%);
}

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

.page-about .about-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(32px, 7.4vw, 74px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--mist);
  text-wrap: balance;
}

.page-about .about-hero__lede {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-figure {
  padding: 16px 16px 18px;
  background: rgba(14, 42, 36, 0.94);
}

.page-about .about-figure b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(21px, 5vw, 30px);
  letter-spacing: 0.02em;
  color: var(--amber);
  line-height: 1.2;
}

.page-about .about-figure span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gray-cyan);
}

/* ===== 通用小节标题 ===== */
.page-about .section-head {
  margin-bottom: 22px;
}

.page-about .section-title {
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-about .about-lead {
  margin: 12px 0 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

/* ===== 由来与定位 ===== */
.page-about .about-origin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-about .about-origin__side {
  padding: 22px 20px;
  background: linear-gradient(155deg, rgba(23, 69, 59, 0.9), rgba(14, 42, 36, 0.96));
}

.page-about .about-side__title {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cyan);
}

.page-about .about-side__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .about-side__list li {
  padding-left: 14px;
  border-left: 2px solid rgba(56, 240, 208, 0.35);
}

.page-about .about-side__list p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-about .about-side__list + .link-arrow {
  display: inline-block;
  margin-top: 20px;
}

/* ===== 历程时间轴 ===== */
.page-about .about-banner {
  margin: 0 0 30px;
}

.page-about .about-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
}

.page-about .about-banner__cap {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-cyan);
}

.page-about .about-track {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 var(--about-gutter);
  position: relative;
}

.page-about .about-track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(56, 240, 208, 0.28) 62%, rgba(242, 167, 59, 0.4));
}

.page-about .about-node {
  position: relative;
  padding-bottom: 20px;
}

.page-about .about-node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--about-gutter) + 1px);
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(56, 240, 208, 0.13);
}

.page-about .about-node__card {
  padding: 18px 18px 20px;
  background: linear-gradient(150deg, rgba(23, 69, 59, 0.72), rgba(14, 42, 36, 0.94));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .about-node:hover .about-node__card,
.page-about .about-node:focus-within .about-node__card {
  border-color: rgba(56, 240, 208, 0.65);
  transform: translateY(-2px);
}

.page-about .about-node__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.page-about .about-node__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gray-cyan);
}

.page-about .about-node__card h3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-node__card p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--gray-cyan);
}

.page-about .about-node--figure {
  padding-bottom: 26px;
}

.page-about .about-orbit {
  margin: 0;
  max-width: 420px;
}

.page-about .about-orbit .media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .about-orbit figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-cyan);
}

/* ===== 团队横带 ===== */
.page-about .about-team__band {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(95% 110% at 100% 0%, rgba(56, 240, 208, 0.16), transparent 58%),
    linear-gradient(160deg, var(--ink-700), var(--ink-800) 58%, var(--ink-900));
  box-shadow: var(--shadow-panel);
}

.page-about .about-team__band::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 167, 59, 0.18), transparent 68%);
  pointer-events: none;
}

.page-about .about-team__intro p {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

.page-about .about-matrix {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-about .about-cell {
  padding: 14px 14px 16px;
  background: rgba(7, 18, 15, 0.5);
  border: 1px solid rgba(43, 79, 70, 0.9);
  border-radius: 10px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .about-cell:hover {
  border-color: rgba(56, 240, 208, 0.6);
  background: rgba(23, 69, 59, 0.62);
}

.page-about .about-cell__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-about .about-cell h3 {
  margin-top: 6px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--mist);
}

.page-about .about-cell p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--gray-cyan);
}

.page-about .about-team__aside {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-about .about-team__aside .media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .about-team__note {
  padding: 16px 16px 18px;
  border-left: 3px solid var(--amber);
  background: rgba(7, 18, 15, 0.42);
  border-radius: 0 10px 10px 0;
}

.page-about .about-team__note h3 {
  font-size: 15px;
  color: var(--mist);
}

.page-about .about-team__note p {
  margin: 8px 0 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--gray-cyan);
}

/* ===== 生产流程 ===== */
.page-about .about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-gap);
}

.page-about .about-step {
  position: relative;
  padding: 18px 16px 20px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(23, 69, 59, 0.62), rgba(7, 18, 15, 0.72));
}

.page-about .about-step__num {
  position: absolute;
  left: 15px;
  top: 17px;
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-about .about-step h3 {
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.page-about .about-step p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--gray-cyan);
}

/* ===== 数据来源 ===== */
.page-about .about-source__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-about .about-source__text .link-arrow {
  display: inline-block;
  margin-top: 18px;
}

.page-about .about-source__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .about-source__list li {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(14, 42, 36, 0.72);
}

.page-about .about-source__list li:nth-child(2) {
  border-left-color: rgba(56, 240, 208, 0.5);
}

.page-about .about-source__list li:nth-child(3) {
  border-left-color: rgba(242, 167, 59, 0.55);
}

.page-about .about-source__list h3 {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--mist);
}

.page-about .about-source__list p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--gray-cyan);
}

/* ===== 阶段成果瀑布流 ===== */
.page-about .about-honors__stream {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .about-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(23, 69, 59, 0.56), rgba(14, 42, 36, 0.9) 62%);
}

.page-about .about-card:nth-child(even) {
  background:
    linear-gradient(135deg, rgba(14, 42, 36, 0.92), rgba(7, 18, 15, 0.9) 70%);
}

.page-about .about-card__figure {
  font-family: var(--font-mono);
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--amber);
}

.page-about .about-card h3 {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--mist);
}

.page-about .about-card p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--gray-cyan);
}

.page-about .about-card .disclosure {
  margin-top: 12px;
}

.page-about .about-card .disclosure__trigger {
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.page-about .about-card .disclosure__inner p {
  margin: 0;
  padding-top: 8px;
  font-size: 13px;
  color: var(--gray-cyan);
}

/* ===== 收尾入口 ===== */
.page-about .about-next__bar {
  padding: 24px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(56, 240, 208, 0.14), transparent 60%),
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
}

.page-about .about-next__bar p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--gray-cyan);
}

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

/* ===== 响应式 ===== */
@media (min-width: 620px) {
  .page-about .about-hero {
    padding: 36px 0 56px;
  }

  .page-about .about-figures {
    margin-top: 38px;
  }

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

  .page-about .about-team__band {
    padding: 30px 26px 32px;
  }

  .page-about .about-next__bar {
    padding: 28px 26px;
  }
}

@media (min-width: 900px) {
  .page-about {
    --about-gutter: 46px;
  }

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

  .page-about .about-origin__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start;
  }

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

  .page-about .about-banner {
    margin-bottom: 40px;
  }

  .page-about .about-track {
    padding-left: var(--about-gutter);
    padding-right: 8%;
  }

  .page-about .about-node:nth-child(odd) .about-node__card {
    margin-right: 14%;
  }

  .page-about .about-node:nth-child(even) .about-node__card {
    margin-left: 12%;
  }

  .page-about .about-node--figure {
    padding-left: 34%;
  }

  .page-about .about-orbit {
    max-width: 380px;
    margin-left: auto;
  }

  .page-about .about-team__band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "intro intro"
      "matrix aside";
    gap: 28px 34px;
    padding: 34px 32px 36px;
  }

  .page-about .about-team__intro {
    grid-area: intro;
    max-width: 62ch;
  }

  .page-about .about-matrix {
    grid-area: matrix;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-about .about-team__aside {
    grid-area: aside;
    margin-top: 0;
    align-content: start;
  }

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

  .page-about .about-step:nth-child(even) {
    transform: translateY(20px);
  }

  .page-about .about-source__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-honors__stream {
    columns: 2;
    column-gap: 16px;
    display: block;
  }

  .page-about .about-card {
    break-inside: avoid;
    margin-bottom: 16px;
  }

  .page-about .about-card:nth-child(odd) {
    margin-right: 10px;
  }

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

  .page-about .about-next__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 34px;
  }

  .page-about .about-next__links {
    margin-top: 0;
    flex: 0 0 auto;
    max-width: 46%;
    justify-content: flex-end;
  }
}

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

  .page-about .about-cell {
    padding: 16px 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-node__card,
  .page-about .about-cell {
    transition: none;
  }

  .page-about .about-step:nth-child(even) {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌与文化</span>
    </nav>
  </div>

  <section class="about-hero" aria-labelledby="about-title">
    <div class="wrap about-hero__inner">
      <p class="eyebrow">安博体育 · 中文专区</p>
      <h1 id="about-title">把每一场比赛<br>整理成随时可查的资料</h1>
      <p class="about-hero__lede">
        安博体育中文专区自 2019 年起持续整理赛事资料，累计超过 12000 条。我们按联赛分成七个编辑小组做校对，客服在工作日 9:00 至 21:00 在线接住你提出的每一个问题。
      </p>
      <div class="about-figures" data-reveal>
        <div class="about-figure">
          <b>12000+</b>
          <span>条已归档赛事资料</span>
        </div>
        <div class="about-figure">
          <b>7</b>
          <span>个联赛编辑小组</span>
        </div>
        <div class="about-figure">
          <b>2400+</b>
          <span>场历史对阵记录</span>
        </div>
        <div class="about-figure">
          <b>36 万</b>
          <span>位活跃读者</span>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-origin" aria-labelledby="origin-title">
    <div class="wrap about-origin__grid">
      <div class="about-origin__main">
        <div class="section-head">
          <p class="eyebrow">起点</p>
          <h2 class="section-title" id="origin-title">从一场翻不到的旧比赛说起</h2>
        </div>
        <div class="prose">
          <p>专区刚起步的时候，中文读者想查一场两三个赛季前的对阵，往往要在几个页面之间来回跳。我们把散落的赛程、比分和交手记录收拢到一处，先做成能翻、能按联赛和球队定位的归档。</p>
          <p>今天多数找资料的动作可以两三步完成：赛前读一段战报掌握对阵背景，长期跟踪一支球队就按联赛检索历史交手，看重头的比赛就提前把提醒设好。三种用法最后都落到同一件事上——想查的时候查得到。</p>
          <p>选材也照着这个方向走。我们优先收齐能支撑判断的东西：完整的对阵记录、可比的比分走势、能说清轮次背景的赛前信息。热闹但不解决问题的内容排在后面。</p>
        </div>
      </div>

      <aside class="about-origin__side panel panel--cut" data-reveal style="--reveal-delay:120ms">
        <h3 class="about-side__title">三种常见用法</h3>
        <ul class="about-side__list">
          <li>
            <span class="tag tag--cyan">碎片时间</span>
            <p>读一条战报，约 90 秒就能摸清两队近况与轮次背景。</p>
          </li>
          <li>
            <span class="tag tag--cyan">长期跟踪</span>
            <p>按联赛查六个赛季的交手记录，比分走势连成一条线。</p>
          </li>
          <li>
            <span class="tag tag--amber">提前准备</span>
            <p>关心哪场就订阅哪场，开赛前 30 分钟收到一次提醒。</p>
          </li>
        </ul>
        <a class="link-arrow" href="/faq/">看看订阅怎么设置</a>
      </aside>
    </div>
  </section>

  <section class="section about-timeline" aria-labelledby="timeline-title">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">历程</p>
        <h2 class="section-title" id="timeline-title">专区这些年走过的路</h2>
        <p class="about-lead">从第一份赛程归档到今天的 V428HT，几个节点改变了你能查到什么。</p>
      </div>

      <figure class="about-banner" data-reveal>
        <img src="{zhanqunpic:h:810w:1440}" width="1440" height="810" loading="lazy" decoding="async" alt="夜间办公桌前的屏幕与摊开的笔记本，屏幕冷光照在手上">
        <figcaption class="about-banner__cap">深夜的校对台：一场比赛的比分、轮次与红黄牌要在这里对齐之后才进库。</figcaption>
      </figure>

      <ol class="about-track">
        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">起步</span>
              <span class="about-node__meta">赛事回看框架成形</span>
            </div>
            <h3>先把散落的赛程归拢</h3>
            <p>赛事回看按联赛立起框架，读者第一次能在同一个入口里翻到上一个赛季的比赛。</p>
          </div>
        </li>

        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">三个维度</span>
              <span class="about-node__meta">回看条目 1800 余条</span>
            </div>
            <h3>回看集锦扩到 1800 余条</h3>
            <p>按联赛、球队、轮次三种方式归档，同一场比赛顺着任何一条线索都能找回去。</p>
          </div>
        </li>

        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">六个赛季</span>
              <span class="about-node__meta">对阵记录 2400 余场</span>
            </div>
            <h3>交锋库长到 2400 余场</h3>
            <p>记录覆盖 2018 至 2023 赛季，两队的全部交手与比分走势汇到同一页里。</p>
          </div>
        </li>

        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">iOS 端</span>
              <span class="about-node__meta">离线可查 200 场</span>
            </div>
            <h3>把 2023 赛季补进移动端</h3>
            <p>iOS 端的交锋模块补齐了最新赛季，最近 200 场对阵可以缓存，地铁里没信号也能翻。</p>
          </div>
        </li>

        <li class="about-node about-node--figure" data-reveal>
          <figure class="about-orbit">
            <div class="media media--1x1">
              <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" loading="lazy" decoding="async" alt="版本演进环形图，外圈是赛季区间，内圈标注着各代版本号">
              <span class="media__label">版本演进 · 赛季区间</span>
            </div>
            <figcaption>外圈是赛季区间，内圈是各阶段的主线版本号，越靠外表示覆盖面越宽。</figcaption>
          </figure>
        </li>

        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">V428HT</span>
              <span class="about-node__meta">已过 6 轮维护</span>
            </div>
            <h3>主线版本走到今天</h3>
            <p>上线以来完成 6 轮维护更新，赛前前瞻与更新记录合并成首页第二栏的一条横向信息带，每次维护同步刷新。</p>
          </div>
        </li>

        <li class="about-node" data-reveal>
          <div class="about-node__card panel panel--raised">
            <div class="about-node__head">
              <span class="tag tag--mono">订阅与反馈</span>
              <span class="about-node__meta">开赛前 30 分钟送达</span>
            </div>
            <h3>提醒准时，问题有人接</h3>
            <p>订阅可按联赛、球队、开赛时间自由组合，提醒统一在开赛前 30 分钟送达；反馈入口收拢到页脚，由客服集中处理。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section about-team" aria-labelledby="team-title">
    <div class="wrap">
      <div class="about-team__band">
        <div class="about-team__intro">
          <p class="eyebrow">团队</p>
          <h2 class="section-title" id="team-title">七个小组合起来，才是一条完整的资料</h2>
          <p>内容团队按联赛划分成七个编辑小组，组内按赛季周期轮转。客服团队共 12 人，工作日 9:00 至 21:00 在线，节假日保留值班。</p>
        </div>

        <ul class="about-matrix">
          <li class="about-cell">
            <span class="about-cell__num">01</span>
            <h3>回看归档</h3>
            <p>按联赛、球队、轮次整理回看条目，确认每场的轮次与赛季归属。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">02</span>
            <h3>交锋校对</h3>
            <p>对齐两队全部交手的日期、场地与最终比分，补成可连起来看的走势。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">03</span>
            <h3>比分与轮次</h3>
            <p>逐场核对比分与所属轮次，避免同一个赛季里出现前后冲突。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">04</span>
            <h3>红黄牌记录</h3>
            <p>补齐缺漏的判罚记录，让一场比赛的背景信息能对得上。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">05</span>
            <h3>旧版本资料</h3>
            <p>近三个赛季的历史条目统一归到内容目录的固定位置，方便回查。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">06</span>
            <h3>订阅与推送</h3>
            <p>盯着提醒的送达时点，赛前 30 分钟送达这条线由专人复核。</p>
          </li>
          <li class="about-cell">
            <span class="about-cell__num">07</span>
            <h3>反馈归集</h3>
            <p>把读者指出的错漏分到对应小组，改完再回一次消息。</p>
          </li>
        </ul>

        <div class="about-team__aside">
          <div class="media media--4x3">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="俯拍视角下几个人围看一张数据表格，画面偏暗，局部有荧光色标记">
            <span class="media__label">小组校对现场</span>
          </div>
          <div class="about-team__note">
            <h3>值班与响应</h3>
            <p>工作日 9:00 至 21:00 有客服在岗，节假日保留值班人员。反馈提交后按批次分派到小组，改动能落地的当天回复。</p>
            <a class="link-arrow" href="/inquiry/">提交赛事问题</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-flow" aria-labelledby="flow-title">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">流程</p>
        <h2 class="section-title" id="flow-title">一条资料要过四道手</h2>
        <p class="about-lead">从选题到进库，每一步都有人签字，出错时也退得回去。</p>
      </div>

      <ol class="about-steps">
        <li class="about-step" data-reveal>
          <span class="about-step__num">01</span>
          <h3>选材</h3>
          <p>先看这条资料能不能回答一个具体问题：这场什么时候打的、谁赢的、此前几次交手什么结果。答不上就先不收。</p>
        </li>
        <li class="about-step" data-reveal style="--reveal-delay:80ms">
          <span class="about-step__num">02</span>
          <h3>校对</h3>
          <p>对照公开赛事公告与技术统计，把比分、轮次和红黄牌逐项落定，两个版本对不上就回到公告再核一遍。</p>
        </li>
        <li class="about-step" data-reveal style="--reveal-delay:160ms">
          <span class="about-step__num">03</span>
          <h3>发布</h3>
          <p>按联赛归到对应的回看条目或交锋记录里，标上赛季与版本，读者顺着联赛或球队就能落到这一条。</p>
        </li>
        <li class="about-step" data-reveal style="--reveal-delay:240ms">
          <span class="about-step__num">04</span>
          <h3>复盘</h3>
          <p>每月最后一个完整周集中补齐缺失的比分与红黄牌记录；每季度把在架条目整体复核一遍，旧版本资料一并翻检。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section about-source" aria-labelledby="source-title">
    <div class="wrap about-source__grid">
      <div class="about-source__text">
        <div class="section-head">
          <p class="eyebrow">数据来源</p>
          <h2 class="section-title" id="source-title">数字从哪来，能追到哪</h2>
        </div>
        <div class="prose">
          <p>合作媒体与技术统计来源共 14 家。取数一律以公开赛事公告和官方技术统计为准，同一场比赛出现不同版本时，收敛到公告口径的那个结果。</p>
          <p>比分走势只根据已确认的场次绘制，缺失的部分先空着，等下一个校对周补。这样你看到的曲线不会因为一条来源错误而整段偏移。</p>
        </div>
        <a class="link-arrow" href="/topics/">翻翻近期的资料补录专题</a>
      </div>

      <ul class="about-source__list">
        <li data-reveal>
          <span class="tag tag--amber">第一顺位</span>
          <h3>公开赛事公告</h3>
          <p>轮次、比分、判罚结果以公告为准，其他来源与它冲突时让位。</p>
        </li>
        <li data-reveal style="--reveal-delay:80ms">
          <span class="tag tag--cyan">技术统计</span>
          <h3>官方技术统计</h3>
          <p>用于补齐场次细节与对阵走势，与公告互为印证。</p>
        </li>
        <li data-reveal style="--reveal-delay:160ms">
          <span class="tag tag--cyan">交叉验证</span>
          <h3>合作媒体来源</h3>
          <p>14 家来源提供不同角度的补充，出现分歧时回到上两级核对。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="section about-honors" aria-labelledby="honors-title">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">阶段成果</p>
        <h2 class="section-title" id="honors-title">这些年攒下的东西</h2>
        <p class="about-lead">点开任意一条，能看到它背后更细的一层。</p>
      </div>

      <div class="about-honors__stream">
        <article class="about-card">
          <div class="about-card__figure">12000+</div>
          <h3>条赛事资料已归档</h3>
          <p>涵盖回看条目、交锋记录与旧版本说明，从专区上线起持续累积。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-1">看细节</button>
            <div class="disclosure__panel" id="honor-panel-1" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>编辑团队每季度做一次整体复核，复核范围覆盖全部在架条目，旧版本资料与战报速览也在其中。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="about-card">
          <div class="about-card__figure">6</div>
          <h3>个赛季的交锋记录</h3>
          <p>2018 至 2023，收录对阵 2400 余场，两队的全部交手可以一页看完。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-2">看细节</button>
            <div class="disclosure__panel" id="honor-panel-2" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>每条记录带比分、轮次与红黄牌信息；iOS 端可离线缓存最近 200 场，没网络时也能翻。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="about-card">
          <div class="about-card__figure">1800+</div>
          <h3>条赛事回看条目</h3>
          <p>按联赛、球队、轮次三种维度归档，同一个联赛的赛季脉络清楚可循。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-3">看细节</button>
            <div class="disclosure__panel" id="honor-panel-3" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>旧版本资料与战报速览固定排在内容目录第三项，收录近三个赛季的历史条目，适合回查早期比赛。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="about-card">
          <div class="about-card__figure">36 万</div>
          <h3>位活跃读者</h3>
          <p>其中订阅用户约占三成，读者分布在全国 30 个省级行政区，华南与华东访问量最高。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-4">看细节</button>
            <div class="disclosure__panel" id="honor-panel-4" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>订阅按联赛、球队、开赛时间三类条件自由组合，提醒默认进入站内消息中心，可在订阅管理页逐条调整或关闭。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="about-card">
          <div class="about-card__figure">12 人</div>
          <h3>客服团队在线值守</h3>
          <p>工作日 9:00 至 21:00 在线，节假日保留值班，每条反馈都会得到答复。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-5">看细节</button>
            <div class="disclosure__panel" id="honor-panel-5" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>反馈入口设在页脚，提交后按批次分派到对应的联赛小组，涉及比分与记录的改动会在处理完成后回复结果。</p>
              </div>
            </div>
          </div>
        </article>

        <article class="about-card">
          <div class="about-card__figure">三端</div>
          <h3>自适应阅读与年度自查</h3>
          <p>电脑、平板与手机都能读，正文不依赖外部脚本加载；页面不投放第三方广告脚本。</p>
          <div class="disclosure" data-disclosure>
            <button class="disclosure__trigger" type="button" data-disclosure-trigger aria-expanded="false" aria-controls="honor-panel-6">看细节</button>
            <div class="disclosure__panel" id="honor-panel-6" data-disclosure-panel>
              <div class="disclosure__inner">
                <p>站点已完成年度信息安全自查，阅读过程中不会被打断，也不会跳出与赛事无关的推荐。</p>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section about-next" aria-labelledby="next-title">
    <div class="wrap">
      <div class="about-next__bar">
        <div>
          <h2 class="section-title" id="next-title">接下来你想查什么</h2>
          <p>四个入口，对应四种最常见的需求。</p>
        </div>
        <div class="about-next__links">
          <a class="btn btn--primary" href="/catalog/">进入内容目录</a>
          <a class="btn btn--ghost" href="/topics/">查看专题中心</a>
          <a class="btn btn--ghost" href="/faq/">阅读常见问题</a>
          <a class="btn btn--ghost" href="/inquiry/">提交赛事问题</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-gutter: 30px;
  --about-gap: 18px;
}

.page-about .breadcrumb {
  padding-top: 20px;
  font-size: 13px;
}

/* ===== 首屏封面 ===== */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 44px;
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(56, 240, 208, 0.18), transparent 62%),
    radial-gradient(90% 70% at 2% 108%, rgba(242, 167, 59, 0.12), transparent 66%);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(43, 79, 70, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43, 79, 70, 0.35) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(82% 72% at 50% 0%, #000 0%, transparent 76%);
  mask-image: radial-gradient(82% 72% at 50% 0%, #000 0%, transparent 76%);
}

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

.page-about .about-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(32px, 7.4vw, 74px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--mist);
  text-wrap: balance;
}

.page-about .about-hero__lede {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

.page-about .about-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-about .about-figure {
  padding: 16px 16px 18px;
  background: rgba(14, 42, 36, 0.94);
}

.page-about .about-figure b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(21px, 5vw, 30px);
  letter-spacing: 0.02em;
  color: var(--amber);
  line-height: 1.2;
}

.page-about .about-figure span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gray-cyan);
}

/* ===== 通用小节标题 ===== */
.page-about .section-head {
  margin-bottom: 22px;
}

.page-about .section-title {
  font-size: clamp(24px, 4.4vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.page-about .about-lead {
  margin: 12px 0 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

/* ===== 由来与定位 ===== */
.page-about .about-origin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-about .about-origin__side {
  padding: 22px 20px;
  background: linear-gradient(155deg, rgba(23, 69, 59, 0.9), rgba(14, 42, 36, 0.96));
}

.page-about .about-side__title {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cyan);
}

.page-about .about-side__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.page-about .about-side__list li {
  padding-left: 14px;
  border-left: 2px solid rgba(56, 240, 208, 0.35);
}

.page-about .about-side__list p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-about .about-side__list + .link-arrow {
  display: inline-block;
  margin-top: 20px;
}

/* ===== 历程时间轴 ===== */
.page-about .about-banner {
  margin: 0 0 30px;
}

.page-about .about-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
}

.page-about .about-banner__cap {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-cyan);
}

.page-about .about-track {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 var(--about-gutter);
  position: relative;
}

.page-about .about-track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(56, 240, 208, 0.28) 62%, rgba(242, 167, 59, 0.4));
}

.page-about .about-node {
  position: relative;
  padding-bottom: 20px;
}

.page-about .about-node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--about-gutter) + 1px);
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(56, 240, 208, 0.13);
}

.page-about .about-node__card {
  padding: 18px 18px 20px;
  background: linear-gradient(150deg, rgba(23, 69, 59, 0.72), rgba(14, 42, 36, 0.94));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-about .about-node:hover .about-node__card,
.page-about .about-node:focus-within .about-node__card {
  border-color: rgba(56, 240, 208, 0.65);
  transform: translateY(-2px);
}

.page-about .about-node__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.page-about .about-node__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gray-cyan);
}

.page-about .about-node__card h3 {
  font-size: 18px;
  line-height: 1.4;
  color: var(--mist);
}

.page-about .about-node__card p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--gray-cyan);
}

.page-about .about-node--figure {
  padding-bottom: 26px;
}

.page-about .about-orbit {
  margin: 0;
  max-width: 420px;
}

.page-about .about-orbit .media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .about-orbit figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray-cyan);
}

/* ===== 团队横带 ===== */
.page-about .about-team__band {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(95% 110% at 100% 0%, rgba(56, 240, 208, 0.16), transparent 58%),
    linear-gradient(160deg, var(--ink-700), var(--ink-800) 58%, var(--ink-900));
  box-shadow: var(--shadow-panel);
}

.page-about .about-team__band::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 167, 59, 0.18), transparent 68%);
  pointer-events: none;
}

.page-about .about-team__intro p {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gray-cyan);
}

.page-about .about-matrix {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-about .about-cell {
  padding: 14px 14px 16px;
  background: rgba(7, 18, 15, 0.5);
  border: 1px solid rgba(43, 79, 70, 0.9);
  border-radius: 10px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-about .about-cell:hover {
  border-color: rgba(56, 240, 208, 0.6);
  background: rgba(23, 69, 59, 0.62);
}

.page-about .about-cell__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-about .about-cell h3 {
  margin-top: 6px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--mist);
}

.page-about .about-cell p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--gray-cyan);
}

.page-about .about-team__aside {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.page-about .about-team__aside .media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-about .about-team__note {
  padding: 16px 16px 18px;
  border-left: 3px solid var(--amber);
  background: rgba(7, 18, 15, 0.42);
  border-radius: 0 10px 10px 0;
}

.page-about .about-team__note h3 {
  font-size: 15px;
  color: var(--mist);
}

.page-about .about-team__note p {
  margin: 8px 0 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--gray-cyan);
}

/* ===== 生产流程 ===== */
.page-about .about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-gap);
}

.page-about .about-step {
  position: relative;
  padding: 18px 16px 20px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(23, 69, 59, 0.62), rgba(7, 18, 15, 0.72));
}

.page-about .about-step__num {
  position: absolute;
  left: 15px;
  top: 17px;
  font-family: var(--font-mono);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-about .about-step h3 {
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.page-about .about-step p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--gray-cyan);
}

/* ===== 数据来源 ===== */
.page-about .about-source__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-about .about-source__text .link-arrow {
  display: inline-block;
  margin-top: 18px;
}

.page-about .about-source__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .about-source__list li {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(14, 42, 36, 0.72);
}

.page-about .about-source__list li:nth-child(2) {
  border-left-color: rgba(56, 240, 208, 0.5);
}

.page-about .about-source__list li:nth-child(3) {
  border-left-color: rgba(242, 167, 59, 0.55);
}

.page-about .about-source__list h3 {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--mist);
}

.page-about .about-source__list p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--gray-cyan);
}

/* ===== 阶段成果瀑布流 ===== */
.page-about .about-honors__stream {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-about .about-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(23, 69, 59, 0.56), rgba(14, 42, 36, 0.9) 62%);
}

.page-about .about-card:nth-child(even) {
  background:
    linear-gradient(135deg, rgba(14, 42, 36, 0.92), rgba(7, 18, 15, 0.9) 70%);
}

.page-about .about-card__figure {
  font-family: var(--font-mono);
  font-size: clamp(26px, 6vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--amber);
}

.page-about .about-card h3 {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--mist);
}

.page-about .about-card p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.76;
  color: var(--gray-cyan);
}

.page-about .about-card .disclosure {
  margin-top: 12px;
}

.page-about .about-card .disclosure__trigger {
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.page-about .about-card .disclosure__inner p {
  margin: 0;
  padding-top: 8px;
  font-size: 13px;
  color: var(--gray-cyan);
}

/* ===== 收尾入口 ===== */
.page-about .about-next__bar {
  padding: 24px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(56, 240, 208, 0.14), transparent 60%),
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
}

.page-about .about-next__bar p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--gray-cyan);
}

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

/* ===== 响应式 ===== */
@media (min-width: 620px) {
  .page-about .about-hero {
    padding: 36px 0 56px;
  }

  .page-about .about-figures {
    margin-top: 38px;
  }

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

  .page-about .about-team__band {
    padding: 30px 26px 32px;
  }

  .page-about .about-next__bar {
    padding: 28px 26px;
  }
}

@media (min-width: 900px) {
  .page-about {
    --about-gutter: 46px;
  }

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

  .page-about .about-origin__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start;
  }

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

  .page-about .about-banner {
    margin-bottom: 40px;
  }

  .page-about .about-track {
    padding-left: var(--about-gutter);
    padding-right: 8%;
  }

  .page-about .about-node:nth-child(odd) .about-node__card {
    margin-right: 14%;
  }

  .page-about .about-node:nth-child(even) .about-node__card {
    margin-left: 12%;
  }

  .page-about .about-node--figure {
    padding-left: 34%;
  }

  .page-about .about-orbit {
    max-width: 380px;
    margin-left: auto;
  }

  .page-about .about-team__band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "intro intro"
      "matrix aside";
    gap: 28px 34px;
    padding: 34px 32px 36px;
  }

  .page-about .about-team__intro {
    grid-area: intro;
    max-width: 62ch;
  }

  .page-about .about-matrix {
    grid-area: matrix;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-about .about-team__aside {
    grid-area: aside;
    margin-top: 0;
    align-content: start;
  }

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

  .page-about .about-step:nth-child(even) {
    transform: translateY(20px);
  }

  .page-about .about-source__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-honors__stream {
    columns: 2;
    column-gap: 16px;
    display: block;
  }

  .page-about .about-card {
    break-inside: avoid;
    margin-bottom: 16px;
  }

  .page-about .about-card:nth-child(odd) {
    margin-right: 10px;
  }

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

  .page-about .about-next__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 34px;
  }

  .page-about .about-next__links {
    margin-top: 0;
    flex: 0 0 auto;
    max-width: 46%;
    justify-content: flex-end;
  }
}

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

  .page-about .about-cell {
    padding: 16px 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-node__card,
  .page-about .about-cell {
    transition: none;
  }

  .page-about .about-step:nth-child(even) {
    transform: none;
  }
}