.page-about {
  --ab-line-dark: rgba(249, 251, 247, 0.14);
  --ab-line-light: rgba(7, 20, 38, 0.14);
  --ab-line-strong: rgba(7, 20, 38, 0.26);
  background: var(--ink);
  color: var(--chalk);
}

/* ---------- shared blocks ---------- */
.page-about .ab-paper {
  background: var(--paper);
  color: var(--ink);
}
.page-about .ab-paper-2 {
  background: var(--paper-2);
  color: var(--ink);
}
.page-about .ab-ink {
  background: var(--ink);
  color: var(--chalk);
}

.page-about .ab-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-about .ab-kicker--ink {
  color: var(--pitch);
}
.page-about .ab-kicker--chalk {
  color: rgba(249, 251, 247, 0.72);
}

.page-about .ab-h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.65rem, 5.2vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.page-about .ab-h2--chalk {
  color: var(--chalk);
}

.page-about .ab-lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.76);
}
.page-about .ab-lede--ink {
  color: var(--slate);
}

.page-about .ab-prose {
  margin: 0 0 18px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--slate);
}
.page-about .ab-prose--chalk {
  color: rgba(249, 251, 247, 0.86);
}

.page-about .ab-section__head {
  margin-bottom: clamp(28px, 5vw, 48px);
}

/* ---------- hero ---------- */
.page-about .ab-hero {
  position: relative;
  padding: 88px 0 56px;
  background:
    radial-gradient(circle at 78% 18%, rgba(92, 242, 214, 0.16), transparent 58%),
    radial-gradient(circle at 12% 88%, rgba(22, 122, 74, 0.34), transparent 62%),
    var(--ink);
  color: var(--chalk);
  overflow: hidden;
}

.page-about .ab-hero__grid {
  display: grid;
  gap: 36px;
  margin-top: 24px;
}

.page-about .ab-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--chalk);
}
.page-about .ab-hero__title br {
  display: none;
}

.page-about .ab-hero__lede {
  margin: 0;
  max-width: 32em;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(249, 251, 247, 0.78);
}

.page-about .ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .ab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ab-line-dark);
}
.page-about .ab-stat {
  min-width: 96px;
}
.page-about .ab-stat__label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(249, 251, 247, 0.54);
}
.page-about .ab-stat__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 4.6vw, 1.95rem);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}
.page-about .ab-stat__num span {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(249, 251, 247, 0.6);
}

.page-about .ab-hero__visual {
  display: flex;
  justify-content: center;
}
.page-about .ab-visual {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* ---------- origin ---------- */
.page-about .ab-origin {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-origin__grid {
  display: grid;
  gap: 36px;
}

.page-about .ab-plate-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--ab-line-light);
  border-top: 1px solid var(--ab-line-light);
  border-bottom: 1px solid var(--ab-line-light);
}
.page-about .ab-plate {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 4px;
  background: var(--paper);
}
.page-about .ab-plate__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--pitch);
}
.page-about .ab-plate__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.page-about .ab-plate__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .ab-figure {
  margin: 0;
}
.page-about .ab-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--ab-line-strong);
}
.page-about .ab-figure__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
  border-left: 2px solid var(--pitch);
  padding-left: 12px;
}
.page-about .ab-ink .ab-figure img {
  border-color: var(--ab-line-dark);
}
.page-about .ab-ink .ab-figure__cap {
  color: rgba(249, 251, 247, 0.62);
  border-left-color: var(--cyan);
}

/* ---------- timeline ---------- */
.page-about .ab-arc {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-timeline {
  display: grid;
  gap: 28px;
}

.page-about .ab-timeline__rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.page-about .ab-year {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--ab-line-light);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.page-about .ab-year:hover,
.page-about .ab-year:focus-visible {
  border-color: var(--pitch);
  background: var(--moss);
}
.page-about .ab-year__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.page-about .ab-year__label {
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
}

.page-about .ab-node {
  position: relative;
  padding: 0 0 32px 24px;
  border-left: 1px solid var(--ab-line-light);
  scroll-margin-top: 96px;
}
.page-about .ab-node:last-child {
  padding-bottom: 8px;
}
.page-about .ab-node::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pitch);
  box-shadow: 0 0 0 3px var(--paper-2);
}
.page-about .ab-node--now::before {
  background: var(--orange);
}
.page-about .ab-node__idx {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
}
.page-about .ab-node__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  line-height: 1.28;
  color: var(--ink);
}
.page-about .ab-node__text {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--slate);
}
.page-about .ab-node__tag {
  display: inline-block;
  margin: 14px 0 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--pitch-deep);
  border: 1px solid var(--ab-line-strong);
  background: var(--paper);
}
.page-about .ab-node__tag--hot {
  color: var(--ink);
  border-color: var(--orange);
  background: rgba(255, 138, 61, 0.22);
}

/* ---------- team ---------- */
.page-about .ab-team {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-table {
  border-top: 1px solid var(--ab-line-dark);
  margin-bottom: clamp(32px, 5vw, 52px);
}
.page-about .ab-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--ab-line-dark);
}
.page-about .ab-table__role {
  font-size: 15px;
  font-weight: 700;
  color: var(--chalk);
}
.page-about .ab-table__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 700;
  color: var(--cyan);
  text-align: right;
  line-height: 1;
}
.page-about .ab-table__desc {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(249, 251, 247, 0.62);
}
.page-about .ab-table__row--total .ab-table__num {
  color: var(--orange);
}
.page-about .ab-table__row--total .ab-table__role {
  color: rgba(249, 251, 247, 0.8);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- band ---------- */
.page-about .ab-band {
  background: var(--ink);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.page-about .ab-band__panel {
  background: linear-gradient(158deg, var(--pitch) 0%, var(--pitch-deep) 100%);
  clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
  padding: clamp(72px, 10vw, 108px) 0 clamp(48px, 7vw, 80px);
  color: var(--chalk);
}
.page-about .ab-anchors {
  display: grid;
  gap: 36px;
}
.page-about .ab-anchors__list {
  display: grid;
  gap: 1px;
  background: rgba(249, 251, 247, 0.22);
  border-top: 1px solid rgba(249, 251, 247, 0.22);
  border-bottom: 1px solid rgba(249, 251, 247, 0.22);
}
.page-about .ab-anchor-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px 2px;
  background: var(--pitch-deep);
}
.page-about .ab-anchor-item__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}
.page-about .ab-anchor-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.4;
  color: var(--chalk);
}
.page-about .ab-anchor-item__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(249, 251, 247, 0.78);
}

/* ---------- eco ---------- */
.page-about .ab-eco {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-eco__grid {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.page-about .ab-eco-card {
  padding: 20px 18px;
  border: 1px solid var(--ab-line-strong);
  background: var(--paper);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.page-about .ab-eco-card:hover {
  transform: translateY(-4px);
  border-color: var(--pitch);
  box-shadow: 0 12px 26px -18px rgba(7, 20, 38, 0.6);
}
.page-about .ab-eco-card__num {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--pitch);
}
.page-about .ab-eco-card__num span {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
}
.page-about .ab-eco-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.page-about .ab-eco-card__more {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
  transition: color 0.3s var(--ease);
}
.page-about .ab-eco-card:hover .ab-eco-card__more {
  color: var(--ink);
}

/* ---------- next ---------- */
.page-about .ab-next {
  padding: clamp(48px, 8vw, 92px) 0 clamp(56px, 9vw, 104px);
}
.page-about .ab-next__list {
  display: grid;
  gap: 20px;
}
.page-about .ab-next-item {
  padding-top: 20px;
  border-top: 1px solid var(--ab-line-dark);
}
.page-about .ab-next-item__idx {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.page-about .ab-next-item__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.32;
  color: var(--chalk);
}
.page-about .ab-next-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.7);
}

.page-about .ab-cta {
  margin-top: clamp(36px, 6vw, 56px);
  padding: 26px 22px;
  border: 1px solid rgba(92, 242, 214, 0.34);
  background: linear-gradient(140deg, rgba(22, 122, 74, 0.34), rgba(11, 30, 52, 0.2));
}
.page-about .ab-cta__text {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.86);
}
.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- breadcrumbs tuning ---------- */
.page-about .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(249, 251, 247, 0.5);
}
.page-about .breadcrumbs a {
  color: rgba(249, 251, 247, 0.72);
  text-decoration: none;
}
.page-about .breadcrumbs a:hover {
  color: var(--cyan);
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-about .ab-eco__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .page-about .ab-next__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 900px) {
  .page-about .ab-hero {
    padding: 64px 0 96px;
  }
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: center;
  }
  .page-about .ab-hero__title br {
    display: inline;
  }
  .page-about .ab-hero__lede {
    font-size: 17px;
  }
  .page-about .ab-visual {
    max-width: 100%;
  }
  .page-about .ab-origin__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
  }
  .page-about .ab-figure--wide {
    margin-top: 8px;
  }
  .page-about .ab-anchors {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .page-about .ab-table__row {
    grid-template-columns: 200px 110px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
  .page-about .ab-table__desc {
    grid-column: auto;
  }
  .page-about .ab-table__num {
    text-align: left;
  }
}

@media (min-width: 1000px) {
  .page-about .ab-timeline {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .page-about .ab-timeline__rail {
    position: sticky;
    top: 96px;
    flex-direction: column;
    overflow: visible;
    gap: 6px;
    padding-bottom: 0;
    align-self: start;
  }
  .page-about .ab-year {
    flex: 0 0 auto;
    padding: 10px 14px;
  }
  .page-about .ab-eco__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .page-about .ab-band__panel {
    clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
    padding-top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-eco-card,
  .page-about .ab-year,
  .page-about .ab-eco-card__more {
    transition: none;
  }
  .page-about .ab-eco-card:hover {
    transform: none;
  }
}
<<<END>>>

等等，不要输出 `<<<END>>>`，只按两个标记输出。修正。
<main id="main-content" class="page-about">

  <section class="ab-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="当前位置">
        <ol class="breadcrumbs__list">
          <li class="breadcrumbs__item"><a href="/">首页</a></li>
          <li class="breadcrumbs__item" aria-current="page">品牌历程</li>
        </ol>
      </nav>

      <div class="ab-hero__grid">
        <div class="ab-hero__copy">
          <p class="ab-kicker">SINCE 2019 &nbsp;/&nbsp; EDITION 6.0</p>
          <h1 class="ab-hero__title">从球场边的手机屏幕，<br>走过六年多端赛场</h1>
          <p class="ab-hero__lede">2019 年，聊球APP 上线第一个公开版本，起点是球场边最常见的一幕：一群人围着手机，确认今晚哪块场地还有空、比分打到几比几、谁还没到。六年之后，这个入口每天接住数十万球迷的赛程、数据和讨论。</p>
          <div class="ab-hero__actions">
            <a class="btn btn--primary" href="/projects/">看产品与入口</a>
            <a class="btn btn--ghost" href="/updates/">读更新日志</a>
          </div>
          <dl class="ab-stats">
            <div class="ab-stat">
              <dt class="ab-stat__label">注册用户</dt>
              <dd class="ab-stat__num">420<span>万</span></dd>
            </div>
            <div class="ab-stat">
              <dt class="ab-stat__label">月活跃用户</dt>
              <dd class="ab-stat__num">96<span>万</span></dd>
            </div>
            <div class="ab-stat">
              <dt class="ab-stat__label">赛事与运动项目</dt>
              <dd class="ab-stat__num">26<span>类</span></dd>
            </div>
          </dl>
        </div>

        <div class="ab-hero__visual">
          <svg class="ab-visual" viewBox="0 0 440 520" role="img" aria-label="夜间球场示意：草皮绿透视场地线、聚光灯晕与从 2019 到 2026 的年份刻度">
            <defs>
              <radialGradient id="abGlow" cx="50%" cy="28%" r="62%">
                <stop offset="0%" stop-color="#5CF2D6" stop-opacity="0.3"/>
                <stop offset="100%" stop-color="#5CF2D6" stop-opacity="0"/>
              </radialGradient>
              <linearGradient id="abField" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#167A4A" stop-opacity="0.5"/>
                <stop offset="100%" stop-color="#0d5233" stop-opacity="0.12"/>
              </linearGradient>
            </defs>
            <rect width="440" height="520" fill="#0b1e34"/>
            <circle cx="220" cy="150" r="210" fill="url(#abGlow)"/>
            <path d="M62 392 L378 392 L326 156 L114 156 Z" fill="url(#abField)"/>
            <g fill="none" stroke="#5CF2D6" stroke-opacity="0.48" stroke-width="1.4">
              <path d="M62 392 L378 392 L326 156 L114 156 Z"/>
              <ellipse cx="220" cy="274" rx="62" ry="27"/>
              <path d="M152 392 L152 342 L288 342 L288 392" stroke-opacity="0.3"/>
            </g>
            <line x1="220" y1="392" x2="220" y2="156" stroke="#5CF2D6" stroke-opacity="0.2" stroke-width="1.2"/>
            <circle cx="220" cy="274" r="4" fill="#FF8A3D"/>
            <g fill="#5CF2D6" fill-opacity="0.85">
              <circle cx="98" cy="392" r="3"/>
              <circle cx="220" cy="392" r="3"/>
              <circle cx="342" cy="392" r="3"/>
            </g>
            <line x1="98" y1="462" x2="342" y2="462" stroke="#5CF2D6" stroke-opacity="0.32" stroke-width="1"/>
            <g fill="#5CF2D6" fill-opacity="0.9" font-family="monospace" font-size="12" letter-spacing="1.4">
              <text x="72" y="486">2019</text>
              <text x="322" y="486">2026</text>
            </g>
            <circle cx="98" cy="462" r="3.5" fill="#5CF2D6"/>
            <circle cx="159" cy="462" r="3" fill="#5CF2D6" fill-opacity="0.7"/>
            <circle cx="220" cy="462" r="3" fill="#5CF2D6" fill-opacity="0.7"/>
            <circle cx="281" cy="462" r="3" fill="#5CF2D6" fill-opacity="0.7"/>
            <circle cx="342" cy="462" r="3.5" fill="#FF8A3D"/>
          </svg>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-paper ab-origin">
    <div class="container">
      <div class="ab-section__head" data-reveal>
        <p class="ab-kicker ab-kicker--ink">01 &nbsp;/&nbsp; 起点</p>
        <h2 class="ab-h2">先解决球场边那几个急问题</h2>
      </div>

      <div class="ab-origin__grid">
        <div class="ab-origin__text" data-reveal>
          <p class="ab-prose">球队临时约不到人、赛程散在好几个群里、比分要等别人转述——这是 2019 年前后大部分业余球场上的常态。聊球APP 的第一个公开版本就围着这三件事做：把赛程和比分放进手机，把同城看球的人放进一个可以说话的社区。</p>
          <p class="ab-prose">先做移动端入口，是因为看球和打球大多发生在路上、场地边和夜里；先做社区内容，是因为一场球的记忆不只在比分，还在赛后的争论、复盘和下一场约战。这条路径后来一直没变过：入口要短，内容要有人味。</p>

          <ul class="ab-plate-list">
            <li class="ab-plate">
              <span class="ab-plate__idx">01</span>
              <span class="ab-plate__title">赛程与比分先到位</span>
              <span class="ab-plate__desc">打开就知道今晚有什么球、打到第几节</span>
            </li>
            <li class="ab-plate">
              <span class="ab-plate__idx">02</span>
              <span class="ab-plate__title">赛后有人接住观点</span>
              <span class="ab-plate__desc">社区讨论让一场球的余温延续到第二天</span>
            </li>
            <li class="ab-plate">
              <span class="ab-plate__idx">03</span>
              <span class="ab-plate__title">栏目长期更新</span>
              <span class="ab-plate__desc">赛前速递、战术板、球员观察构成日常内容</span>
            </li>
          </ul>
        </div>

        <figure class="ab-figure" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="旧款手机靠在球场边的折叠桌上，屏幕亮着赛程草稿，夜色里有草皮反光" loading="lazy" decoding="async">
          <figcaption class="ab-figure__cap">起步那年最常见的画面：一部手机，几个人，一场还没定下来的球。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="ab-paper-2 ab-arc">
    <div class="container">
      <div class="ab-section__head" data-reveal>
        <p class="ab-kicker ab-kicker--ink">02 &nbsp;/&nbsp; 历程</p>
        <h2 class="ab-h2">五道刻度，走完六年</h2>
        <p class="ab-lede ab-lede--ink">从第一版到 6.0，功能在加，团队在长，做入口的思路没换过：让新来的人三步之内找到想看的比赛。</p>
      </div>

      <div class="ab-timeline">
        <nav class="ab-timeline__rail" aria-label="年份索引">
          <a class="ab-year" href="#year-2019"><span class="ab-year__num">2019</span><span class="ab-year__label">首版上线</span></a>
          <a class="ab-year" href="#year-2021"><span class="ab-year__num">2021</span><span class="ab-year__label">栏目成型</span></a>
          <a class="ab-year" href="#year-2023"><span class="ab-year__num">2023</span><span class="ab-year__label">创作者中心</span></a>
          <a class="ab-year" href="#year-2025"><span class="ab-year__num">2025</span><span class="ab-year__label">多端就绪</span></a>
          <a class="ab-year" href="#year-2026"><span class="ab-year__num">2026</span><span class="ab-year__label">6.0 新版</span></a>
        </nav>

        <div class="ab-timeline__body">
          <article class="ab-node" id="year-2019" data-reveal>
            <p class="ab-node__idx">2019 / 首版</p>
            <h3 class="ab-node__title">第一个公开版本上线</h3>
            <p class="ab-node__text">赛程与比分是第一批功能，社区是第二个。目标很朴素：让球场边那部手机不用再打开五个群。</p>
            <p class="ab-node__tag">移动端入口</p>
          </article>

          <article class="ab-node" id="year-2021" data-reveal>
            <p class="ab-node__idx">2021 / 内容</p>
            <h3 class="ab-node__title">栏目成型，社区有了秩序</h3>
            <p class="ab-node__text">赛前速递、战术板、球员观察这些栏目开始固定更新，内容从 26 类赛事与运动项目一路铺开。同一年，内容审核把平均响应压到 30 分钟以内，社区举报在 48 小时内处理。</p>
            <p class="ab-node__tag">18 个内容栏目</p>
          </article>

          <article class="ab-node" id="year-2023" data-reveal>
            <p class="ab-node__idx">2023 / 创作者</p>
            <h3 class="ab-node__title">创作者中心开门</h3>
            <p class="ab-node__text">选题日历、数据卡片、剪辑模板和分成结算四类工具一起上线，把解说、剪辑和数据分析的人请进同一个工作台。如今已有 3,600 位创作者入驻，其中 120 位是认证解说与数据分析师。</p>
            <p class="ab-node__tag">3,600 位创作者</p>
          </article>

          <article class="ab-node" id="year-2025" data-reveal>
            <p class="ab-node__idx">2025 / 多端</p>
            <h3 class="ab-node__title">手机、平板、网页连成一片</h3>
            <p class="ab-node__text">多端适配在这一年完成，收藏、历史和关注在不同屏幕之间跟着账号走。场馆通则把场地查询、夜场预订、组局报名和赛事报名接到 1,200 家合作场馆上。同一年，聊球入选体育数字化应用案例，并获多家行业媒体专题报道。</p>
            <p class="ab-node__tag">多端同步</p>
          </article>

          <article class="ab-node ab-node--now" id="year-2026" data-reveal>
            <p class="ab-node__idx">2026 / 6.0</p>
            <h3 class="ab-node__title">入口更短，看球更快</h3>
            <p class="ab-node__text">入口层级从三层压到两层，导航栏支持横滑，赛事卡片加了开赛倒计时，数据页支持双指缩放，个人中心把收藏和历史合成一处。老用户熟悉的视觉位置全部保留，换版本不用重新学一遍。</p>
            <p class="ab-node__tag ab-node__tag--hot">当前版本</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-ink ab-team">
    <div class="container">
      <div class="ab-section__head" data-reveal>
        <p class="ab-kicker">03 &nbsp;/&nbsp; 团队</p>
        <h2 class="ab-h2">128 个人，四种节奏</h2>
        <p class="ab-lede">一支队伍在深夜盯着比分刷新，一支在赛后整理复盘，一支在接住你的入口问题。四支队伍，同一个作息之外的时间表。</p>
      </div>

      <div class="ab-table" data-reveal>
        <div class="ab-table__row">
          <span class="ab-table__role">产品与研发</span>
          <span class="ab-table__num">72</span>
          <span class="ab-table__desc">负责入口结构、数据可视化与多端适配的日常迭代，是版本节奏的主要推动者。</span>
        </div>
        <div class="ab-table__row">
          <span class="ab-table__role">内容与社区运营</span>
          <span class="ab-table__num">34</span>
          <span class="ab-table__desc">排选题、盯栏目、维护社区秩序，同时对接入驻创作者的日常需求。</span>
        </div>
        <div class="ab-table__row">
          <span class="ab-table__role">赛事数据</span>
          <span class="ab-table__num">12</span>
          <span class="ab-table__desc">负责赛程录入、比分刷新、阵容与热区数据的现场维护，平均刷新延迟低于 3 秒。</span>
        </div>
        <div class="ab-table__row">
          <span class="ab-table__role">客户服务</span>
          <span class="ab-table__num">10</span>
          <span class="ab-table__desc">处理入口定位、版本迁移与账号使用的具体问题，也承接合作的第一封邮件。</span>
        </div>
        <div class="ab-table__row ab-table__row--total">
          <span class="ab-table__role">合计</span>
          <span class="ab-table__num">128</span>
          <span class="ab-table__desc">每季度发布一次功能版本，每月更新内容与数据，重要赛事日发布热更新。</span>
        </div>
      </div>

      <figure class="ab-figure ab-figure--wide" data-reveal>
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="夜间办公区多块屏幕同时显示赛事数据与手机界面，屏幕冷光映在桌面上" loading="lazy" decoding="async">
        <figcaption class="ab-figure__cap">比赛日夜里，数据屏和手机预览会同时亮着，直到最后一场结束。</figcaption>
      </figure>
    </div>
  </section>

  <section class="ab-band">
    <div class="ab-band__panel">
      <div class="container">
        <div class="ab-anchors">
          <div class="ab-anchors__intro" data-reveal>
            <p class="ab-kicker ab-kicker--chalk">04 &nbsp;/&nbsp; 产品理念</p>
            <h2 class="ab-h2 ab-h2--chalk">改版的时候，先把你熟悉的位置留住</h2>
            <p class="ab-prose ab-prose--chalk">新版确实动了结构：入口层级少了一层，导航可以横滑，卡片上多了倒计时，数据页能双指缩放，个人中心把收藏和历史合成一处。但底部五栏的位置、赛事卡片的主色、数据表头的样子，一个都没挪。老用户靠肌肉记忆就能直接切到比分，不必重新学一遍操作。</p>
          </div>

          <div class="ab-anchors__list" data-reveal>
            <div class="ab-anchor-item">
              <span class="ab-anchor-item__idx">A</span>
              <h3 class="ab-anchor-item__title">底部五栏位置不变</h3>
              <p class="ab-anchor-item__text">从旧版迁过来的手指路径保持原样，第一条就是赛程。</p>
            </div>
            <div class="ab-anchor-item">
              <span class="ab-anchor-item__idx">B</span>
              <h3 class="ab-anchor-item__title">赛事卡片主色不变</h3>
              <p class="ab-anchor-item__text">一眼扫过去仍能分清进行中、未开赛和已结束。</p>
            </div>
            <div class="ab-anchor-item">
              <span class="ab-anchor-item__idx">C</span>
              <h3 class="ab-anchor-item__title">数据表头排列不变</h3>
              <p class="ab-anchor-item__text">换版本后看技术统计，不用重新找哪一列是射门。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="ab-paper ab-eco">
    <div class="container">
      <div class="ab-section__head" data-reveal>
        <p class="ab-kicker ab-kicker--ink">05 &nbsp;/&nbsp; 生态</p>
        <h2 class="ab-h2">球场、赛事方和 320 家伙伴，一起把内容撑起来</h2>
        <p class="ab-lede ab-lede--ink">赛事社区靠的不是一两个爆款栏目，而是长期能约到场地、能看到比赛、能听到不同声音。</p>
      </div>

      <div class="ab-eco__grid">
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">1,200<span>家</span></p>
          <h3 class="ab-eco-card__title">合作场馆</h3>
          <p class="ab-eco-card__more">覆盖 31 个省级区域，场地查询、夜场预订、组局报名和赛事报名都在场馆通里完成。</p>
        </article>
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">86<span>家</span></p>
          <h3 class="ab-eco-card__title">赛事运营方</h3>
          <p class="ab-eco-card__more">赛程订阅、开赛提醒和比分推送与运营方的赛程安排同步，赛事数据覆盖 1,800 项赛事。</p>
        </article>
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">12<span>城</span></p>
          <h3 class="ab-eco-card__title">夜场聊球</h3>
          <p class="ab-eco-card__more">年度线下观赛活动已在 12 个城市举办，累计参与 2.6 万人次，把线上讨论搬到球场边。</p>
        </article>
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">320<span>家</span></p>
          <h3 class="ab-eco-card__title">长期伙伴</h3>
          <p class="ab-eco-card__more">与赛事版权方、城市球场、运动品牌和高校社团保持合作，共同产出内容与线下活动。</p>
        </article>
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">2025</p>
          <h3 class="ab-eco-card__title">行业认可</h3>
          <p class="ab-eco-card__more">入选体育数字化应用案例，并获多家行业媒体专题报道，赛事社区的运营方式被反复讨论。</p>
        </article>
        <article class="ab-eco-card" data-reveal>
          <p class="ab-eco-card__num">18<span>个</span></p>
          <h3 class="ab-eco-card__title">内容栏目</h3>
          <p class="ab-eco-card__more">从赛前速递、战术板到球迷看台、场馆指南与装备实验室，栏目各有稳定的更新节奏。</p>
        </article>
      </div>

      <figure class="ab-figure ab-figure--wide" data-reveal>
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="城市夜间球场灯光下的看台观众剪影，暖橙灯带与草皮绿光斑交织" loading="lazy" decoding="async">
        <figcaption class="ab-figure__cap">夜场聊球的现场：灯亮着，屏幕开着，争论一直持续到散场。</figcaption>
      </figure>
    </div>
  </section>

  <section class="ab-ink ab-next">
    <div class="container">
      <div class="ab-section__head" data-reveal>
        <p class="ab-kicker">06 &nbsp;/&nbsp; 下一步</p>
        <h2 class="ab-h2">未来十二个月，往前推三件事</h2>
        <p class="ab-lede">对准备长期合作的场馆、赛事运营方和创作者来说，节奏是可以预期的：季度发版，月度更新内容，重要赛事日随时补。</p>
      </div>

      <div class="ab-next__list">
        <article class="ab-next-item" data-reveal>
          <span class="ab-next-item__idx">01</span>
          <h3 class="ab-next-item__title">多端体验再顺一点</h3>
          <p class="ab-next-item__text">让手机、平板和网页之间的切换更连贯，收藏、历史和关注在换屏之后原位出现，减少重复操作。</p>
        </article>
        <article class="ab-next-item" data-reveal>
          <span class="ab-next-item__idx">02</span>
          <h3 class="ab-next-item__title">创作者工具继续补强</h3>
          <p class="ab-next-item__text">选题日历、数据卡片、剪辑模板与分成结算会继续打磨，让 3,600 位入驻创作者把时间花在内容本身。</p>
        </article>
        <article class="ab-next-item" data-reveal>
          <span class="ab-next-item__idx">03</span>
          <h3 class="ab-next-item__title">场馆服务往更多城市铺</h3>
          <p class="ab-next-item__text">在现有 1,200 家合作场馆基础上继续加密夜场供给，把组局与赛事报名的流程做得更短。</p>
        </article>
      </div>

      <div class="ab-cta" data-reveal>
        <p class="ab-cta__text">想现在就用上这些能力，去产品与入口看六个一级入口怎么排；如果手里有场馆、赛事或内容合作的计划，直接写信给我们。</p>
        <div class="ab-cta__actions">
          <a class="btn btn--primary" href="/projects/">看产品与入口</a>
          <a class="btn btn--ghost" href="/connect/">联系合作</a>
          <a class="btn btn--ghost" href="/answers/">去答疑中心</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --ab-line-dark: rgba(249, 251, 247, 0.14);
  --ab-line-light: rgba(7, 20, 38, 0.14);
  --ab-line-strong: rgba(7, 20, 38, 0.26);
  background: var(--ink);
  color: var(--chalk);
}

.page-about .ab-paper {
  background: var(--paper);
  color: var(--ink);
}
.page-about .ab-paper-2 {
  background: var(--paper-2);
  color: var(--ink);
}
.page-about .ab-ink {
  background: var(--ink);
  color: var(--chalk);
}

.page-about .ab-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-about .ab-kicker--ink {
  color: var(--pitch);
}
.page-about .ab-kicker--chalk {
  color: rgba(249, 251, 247, 0.72);
}

.page-about .ab-h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.65rem, 5.2vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.page-about .ab-h2--chalk {
  color: var(--chalk);
}

.page-about .ab-lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.76);
}
.page-about .ab-lede--ink {
  color: var(--slate);
}

.page-about .ab-prose {
  margin: 0 0 18px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--slate);
}
.page-about .ab-prose--chalk {
  color: rgba(249, 251, 247, 0.86);
}

.page-about .ab-section__head {
  margin-bottom: clamp(28px, 5vw, 48px);
}

.page-about .ab-hero {
  position: relative;
  padding: 88px 0 56px;
  background:
    radial-gradient(circle at 78% 18%, rgba(92, 242, 214, 0.16), transparent 58%),
    radial-gradient(circle at 12% 88%, rgba(22, 122, 74, 0.34), transparent 62%),
    var(--ink);
  color: var(--chalk);
  overflow: hidden;
}

.page-about .ab-hero__grid {
  display: grid;
  gap: 36px;
  margin-top: 24px;
}

.page-about .ab-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--chalk);
}
.page-about .ab-hero__title br {
  display: none;
}

.page-about .ab-hero__lede {
  margin: 0;
  max-width: 32em;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(249, 251, 247, 0.78);
}

.page-about .ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-about .ab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ab-line-dark);
}
.page-about .ab-stat {
  min-width: 96px;
}
.page-about .ab-stat__label {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(249, 251, 247, 0.54);
}
.page-about .ab-stat__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 4.6vw, 1.95rem);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}
.page-about .ab-stat__num span {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(249, 251, 247, 0.6);
}

.page-about .ab-hero__visual {
  display: flex;
  justify-content: center;
}
.page-about .ab-visual {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}

.page-about .ab-origin {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-origin__grid {
  display: grid;
  gap: 36px;
}

.page-about .ab-plate-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--ab-line-light);
  border-top: 1px solid var(--ab-line-light);
  border-bottom: 1px solid var(--ab-line-light);
}
.page-about .ab-plate {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 4px;
  background: var(--paper);
}
.page-about .ab-plate__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--pitch);
}
.page-about .ab-plate__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.page-about .ab-plate__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-about .ab-figure {
  margin: 0;
}
.page-about .ab-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--ab-line-strong);
}
.page-about .ab-figure__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate);
  border-left: 2px solid var(--pitch);
  padding-left: 12px;
}
.page-about .ab-ink .ab-figure img {
  border-color: var(--ab-line-dark);
}
.page-about .ab-ink .ab-figure__cap {
  color: rgba(249, 251, 247, 0.62);
  border-left-color: var(--cyan);
}

.page-about .ab-arc {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-timeline {
  display: grid;
  gap: 28px;
}

.page-about .ab-timeline__rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.page-about .ab-year {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--ab-line-light);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.page-about .ab-year:hover,
.page-about .ab-year:focus-visible {
  border-color: var(--pitch);
  background: var(--moss);
}
.page-about .ab-year__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.page-about .ab-year__label {
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
}

.page-about .ab-node {
  position: relative;
  padding: 0 0 32px 24px;
  border-left: 1px solid var(--ab-line-light);
  scroll-margin-top: 96px;
}
.page-about .ab-node:last-child {
  padding-bottom: 8px;
}
.page-about .ab-node::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pitch);
  box-shadow: 0 0 0 3px var(--paper-2);
}
.page-about .ab-node--now::before {
  background: var(--orange);
}
.page-about .ab-node__idx {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
}
.page-about .ab-node__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  line-height: 1.28;
  color: var(--ink);
}
.page-about .ab-node__text {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--slate);
}
.page-about .ab-node__tag {
  display: inline-block;
  margin: 14px 0 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--pitch-deep);
  border: 1px solid var(--ab-line-strong);
  background: var(--paper);
}
.page-about .ab-node__tag--hot {
  color: var(--ink);
  border-color: var(--orange);
  background: rgba(255, 138, 61, 0.22);
}

.page-about .ab-team {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-table {
  border-top: 1px solid var(--ab-line-dark);
  margin-bottom: clamp(32px, 5vw, 52px);
}
.page-about .ab-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--ab-line-dark);
}
.page-about .ab-table__role {
  font-size: 15px;
  font-weight: 700;
  color: var(--chalk);
}
.page-about .ab-table__num {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 700;
  color: var(--cyan);
  text-align: right;
  line-height: 1;
}
.page-about .ab-table__desc {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(249, 251, 247, 0.62);
}
.page-about .ab-table__row--total .ab-table__num {
  color: var(--orange);
}
.page-about .ab-table__row--total .ab-table__role {
  color: rgba(249, 251, 247, 0.8);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.page-about .ab-band {
  background: var(--ink);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.page-about .ab-band__panel {
  background: linear-gradient(158deg, var(--pitch) 0%, var(--pitch-deep) 100%);
  clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
  padding: clamp(72px, 10vw, 108px) 0 clamp(48px, 7vw, 80px);
  color: var(--chalk);
}
.page-about .ab-anchors {
  display: grid;
  gap: 36px;
}
.page-about .ab-anchors__list {
  display: grid;
  gap: 1px;
  background: rgba(249, 251, 247, 0.22);
  border-top: 1px solid rgba(249, 251, 247, 0.22);
  border-bottom: 1px solid rgba(249, 251, 247, 0.22);
}
.page-about .ab-anchor-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px 2px;
  background: var(--pitch-deep);
}
.page-about .ab-anchor-item__idx {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}
.page-about .ab-anchor-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.4;
  color: var(--chalk);
}
.page-about .ab-anchor-item__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(249, 251, 247, 0.78);
}

.page-about .ab-eco {
  padding: clamp(48px, 8vw, 92px) 0;
}
.page-about .ab-eco__grid {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.page-about .ab-eco-card {
  padding: 20px 18px;
  border: 1px solid var(--ab-line-strong);
  background: var(--paper);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.page-about .ab-eco-card:hover {
  transform: translateY(-4px);
  border-color: var(--pitch);
  box-shadow: 0 12px 26px -18px rgba(7, 20, 38, 0.6);
}
.page-about .ab-eco-card__num {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--pitch);
}
.page-about .ab-eco-card__num span {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
}
.page-about .ab-eco-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.page-about .ab-eco-card__more {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
  transition: color 0.3s var(--ease);
}
.page-about .ab-eco-card:hover .ab-eco-card__more {
  color: var(--ink);
}

.page-about .ab-next {
  padding: clamp(48px, 8vw, 92px) 0 clamp(56px, 9vw, 104px);
}
.page-about .ab-next__list {
  display: grid;
  gap: 20px;
}
.page-about .ab-next-item {
  padding-top: 20px;
  border-top: 1px solid var(--ab-line-dark);
}
.page-about .ab-next-item__idx {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.page-about .ab-next-item__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.32;
  color: var(--chalk);
}
.page-about .ab-next-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.7);
}

.page-about .ab-cta {
  margin-top: clamp(36px, 6vw, 56px);
  padding: 26px 22px;
  border: 1px solid rgba(92, 242, 214, 0.34);
  background: linear-gradient(140deg, rgba(22, 122, 74, 0.34), rgba(11, 30, 52, 0.2));
}
.page-about .ab-cta__text {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(249, 251, 247, 0.86);
}
.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-about .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(249, 251, 247, 0.5);
}
.page-about .breadcrumbs a {
  color: rgba(249, 251, 247, 0.72);
  text-decoration: none;
}
.page-about .breadcrumbs a:hover {
  color: var(--cyan);
}

@media (min-width: 640px) {
  .page-about .ab-eco__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .page-about .ab-next__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 900px) {
  .page-about .ab-hero {
    padding: 64px 0 96px;
  }
  .page-about .ab-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: center;
  }
  .page-about .ab-hero__title br {
    display: inline;
  }
  .page-about .ab-hero__lede {
    font-size: 17px;
  }
  .page-about .ab-visual {
    max-width: 100%;
  }
  .page-about .ab-origin__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
  }
  .page-about .ab-anchors {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .page-about .ab-table__row {
    grid-template-columns: 200px 110px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
  .page-about .ab-table__desc {
    grid-column: auto;
  }
  .page-about .ab-table__num {
    text-align: left;
  }
}

@media (min-width: 1000px) {
  .page-about .ab-timeline {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .page-about .ab-timeline__rail {
    position: sticky;
    top: 96px;
    flex-direction: column;
    overflow: visible;
    gap: 6px;
    padding-bottom: 0;
    align-self: start;
  }
  .page-about .ab-year {
    padding: 10px 14px;
  }
  .page-about .ab-eco__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .page-about .ab-band__panel {
    clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
    padding-top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-eco-card,
  .page-about .ab-year,
  .page-about .ab-eco-card__more {
    transition: none;
  }
  .page-about .ab-eco-card:hover {
    transform: none;
  }
}