.page-about {
  --ab-radius: 6px;
  background: var(--c-ink);
  color: var(--c-white);
  overflow-x: clip;
}

.page-about .shell {
  width: min(var(--shell), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 5vw, 44px) 0 clamp(48px, 9vw, 96px);
  background:
    radial-gradient(circle at 84% 8%, rgba(30, 107, 255, 0.32), transparent 58%),
    radial-gradient(circle at 8% 92%, rgba(255, 90, 31, 0.16), transparent 52%),
    linear-gradient(180deg, var(--c-ink-2) 0%, var(--c-ink) 78%);
  border-bottom: 1px solid var(--line);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(143, 163, 200, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143, 163, 200, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.page-about .ab-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -14%;
  width: 46%;
  height: 180%;
  background: linear-gradient(100deg, transparent 38%, rgba(57, 215, 255, 0.16) 50%, transparent 62%);
  transform: skewX(-12deg);
  pointer-events: none;
}

.page-about .ab-hero__inner {
  position: relative;
  z-index: 1;
}

.page-about .ab-hero__crumb {
  margin-bottom: clamp(20px, 4vw, 36px);
}

.page-about .ab-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.page-about .ab-hero__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--c-mist);
}

.page-about .ab-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
}

.page-about .ab-hero__meta-item {
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px dashed var(--line-strong);
}

.page-about .ab-hero__meta-item:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.page-about .ab-hero__meta-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.page-about .ab-hero__meta-item dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-cyan);
}

.page-about .ab-hero__tag {
  position: absolute;
  right: 8px;
  bottom: 24px;
  z-index: 1;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-mist);
  writing-mode: vertical-rl;
  opacity: 0.72;
}

/* ---------- 区块骨架 ---------- */
.page-about .ab-sec {
  padding: clamp(48px, 9vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-sec__head {
  max-width: 68ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.page-about .ab-sec__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .ab-sec__lede {
  margin: 14px 0 0;
  color: var(--c-mist);
  line-height: 1.8;
  font-size: 16px;
}

.page-about .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.page-about .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c-orange);
  flex: none;
}

.page-about .index-num {
  color: var(--c-orange);
  font-weight: 700;
}

/* ---------- 01 品牌起点 ---------- */
.page-about .ab-origin__grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
}

.page-about .ab-origin__p {
  margin: 16px 0 0;
  line-height: 1.85;
  color: var(--c-mist);
  max-width: 60ch;
}

.page-about .ab-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.page-about .ab-points__item {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-white);
}

.page-about .ab-points__dot {
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--c-lime);
  transform: rotate(45deg);
}

.page-about .ab-origin__figure {
  margin: 0;
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

.page-about .ab-origin__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: saturate(1.05) contrast(1.02);
}

.page-about .ab-origin__figure figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

/* ---------- 02 内容运营账目 ---------- */
.page-about .ab-ledger {
  border-top: 1px solid var(--line-strong);
}

.page-about .ab-ledger__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .ab-ledger__num {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-about .ab-ledger__label {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.page-about .ab-ledger__value {
  grid-column: 2;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-orange);
  line-height: 1.3;
}

.page-about .ab-ledger__desc {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 58ch;
}

/* ---------- 03 时间轴 ---------- */
.page-about .ab-road__figure {
  margin: 0 0 clamp(24px, 5vw, 46px);
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  position: relative;
  overflow: hidden;
}

.page-about .ab-road__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

.page-about .ab-road__figure figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

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

.page-about .ab-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-blue), var(--c-cyan) 55%, var(--c-orange));
  opacity: 0.7;
}

.page-about .ab-timeline__item {
  position: relative;
  margin-bottom: 12px;
}

.page-about .ab-timeline__item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--c-ink);
  border: 2px solid var(--c-cyan);
  transform: rotate(45deg);
}

.page-about .ab-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--c-blue);
  border-radius: var(--ab-radius);
}

.page-about .ab-stage[open] {
  border-left-color: var(--c-orange);
  background: var(--surface-deep);
}

.page-about .ab-stage__summary {
  display: grid;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.page-about .ab-stage__summary::-webkit-details-marker {
  display: none;
}

.page-about .ab-stage__idx {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
}

.page-about .ab-stage__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.page-about .ab-stage__plus {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--c-orange);
  text-align: right;
  transition: transform 0.25s var(--ease);
}

.page-about .ab-stage[open] .ab-stage__plus {
  transform: rotate(45deg);
}

.page-about .ab-stage__body {
  padding: 0 16px 16px 68px;
}

.page-about .ab-stage__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-mist);
}

/* ---------- 04 团队 ---------- */
.page-about .ab-team__grid {
  display: grid;
  gap: clamp(24px, 5vw, 52px);
}

.page-about .ab-team__media {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%);
}

.page-about .ab-team__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-about .ab-team__media figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

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

.page-about .ab-role {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--c-cyan);
  border-radius: var(--ab-radius);
}

.page-about .ab-role__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-lime);
}

.page-about .ab-role__title {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
}

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

.page-about .ab-team__note {
  margin: 20px 0 0;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
  background: rgba(30, 107, 255, 0.12);
  border-left: 2px solid var(--c-blue);
}

/* ---------- 05 生态矩阵 ---------- */
.page-about .ab-matrix {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .ab-matrix__cell {
  padding: 20px 18px;
  background: var(--c-ink-2);
}

.page-about .ab-matrix__cell:nth-child(2) {
  background: rgba(13, 23, 48, 0.9);
}

.page-about .ab-matrix__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-magenta);
}

.page-about .ab-matrix__title {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 700;
}

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

.page-about .ab-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .ab-figures__item {
  padding: 16px;
  background: var(--c-graphite);
}

.page-about .ab-figures__item dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
}

.page-about .ab-figures__item dd {
  margin: 8px 0 0;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 700;
  color: var(--c-cyan);
  line-height: 1.2;
}

/* ---------- 06 承诺与 CTA ---------- */
.page-about .ab-promise__grid {
  display: grid;
  gap: 12px;
}

.page-about .ab-promise__card {
  position: relative;
  padding: 20px 18px 22px;
  background: linear-gradient(160deg, rgba(30, 107, 255, 0.16), rgba(26, 34, 51, 0.9) 62%);
  border: 1px solid var(--line-strong);
  border-radius: var(--ab-radius);
}

.page-about .ab-promise__card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 42px;
  height: 2px;
  background: var(--c-orange);
}

.page-about .ab-promise__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-orange);
}

.page-about .ab-promise__title {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
}

.page-about .ab-promise__card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-mist);
}

.page-about .ab-cta {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--c-orange);
  background: var(--surface-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 100%);
}

.page-about .ab-cta__text {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-white);
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-about .ab-cta__actions .btn {
  flex: 0 1 auto;
}

.page-about .ab-footnote {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-mist);
}

.page-about .ab-footnote__link {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about a:focus-visible,
.page-about summary:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-about .ab-origin__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }

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

  .page-about .ab-ledger__row {
    grid-template-columns: 48px minmax(120px, 0.7fr) 0.9fr 1.6fr;
    align-items: baseline;
    gap: 0 18px;
  }

  .page-about .ab-ledger__value,
  .page-about .ab-ledger__desc {
    grid-column: auto;
  }

  .page-about .ab-ledger__desc {
    margin: 0;
  }

  .page-about .ab-team__grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .page-about .ab-team__media {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

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

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

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

  .page-about .ab-figures__item dd {
    font-size: clamp(20px, 2.2vw, 26px);
  }

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

  .page-about .ab-timeline__item:nth-child(even) {
    margin-left: clamp(24px, 6vw, 72px);
  }

  .page-about .ab-timeline__item:nth-child(odd) {
    margin-right: clamp(24px, 6vw, 72px);
  }

  .page-about .ab-stage__body {
    padding-left: 68px;
    padding-right: 26px;
  }
}

@media (min-width: 1080px) {
  .page-about .ab-hero__tag {
    right: 24px;
    bottom: 40px;
    font-size: 11px;
  }

  .page-about .ab-origin__grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 56px;
  }

  .page-about .ab-road__figure {
    margin-bottom: 52px;
  }

  .page-about .ab-stage__title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-stage__plus {
    transition: none;
  }
}


<main id="main-content" class="page-about">
  <section class="ab-hero" aria-labelledby="ab-hero-title">
    <div class="shell ab-hero__inner">
      <nav class="breadcrumb ab-hero__crumb" aria-label="页面路径">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">主页导航</a></li>
          <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">品牌文化</span></li>
        </ol>
      </nav>

      <p class="eyebrow mono">BRAND FILE / SINCE 2018</p>
      <h1 id="ab-hero-title" class="ab-hero__title">八年时间，<br>把内容走成一条到得了底的路径</h1>
      <p class="ab-hero__lede">从 2018 年到现在，极速彩中心只围绕一件事打磨：需要产品线入口、榜单公告或操作说明的人，不管手里是哪台设备，都能沿着同一套导航找到要看的内容。</p>

      <dl class="ab-hero__meta mono">
        <div class="ab-hero__meta-item">
          <dt>运营起始</dt>
          <dd>2018 年</dd>
        </div>
        <div class="ab-hero__meta-item">
          <dt>常设栏目</dt>
          <dd>12 个</dd>
        </div>
        <div class="ab-hero__meta-item">
          <dt>内容团队</dt>
          <dd>28 人</dd>
        </div>
      </dl>
    </div>
    <p class="ab-hero__tag mono" aria-hidden="true">品牌档案 · ARCHIVE</p>
  </section>

  <!-- 01 品牌起点 -->
  <section class="ab-sec ab-origin" aria-labelledby="ab-origin-title">
    <div class="shell ab-origin__grid">
      <div class="ab-origin__text" data-reveal>
        <p class="eyebrow mono"><span class="index-num">01</span> 起点</p>
        <h2 id="ab-origin-title" class="ab-sec__title">一个名字，一套入口，一直用下去</h2>
        <p class="ab-origin__p">2018 年，极速彩中心开始持续运营中文品牌内容站。名字定下来之后就没有换过写法，导航的位置、栏目编号的规则、检索框落在顶部的习惯，也都跟着固定下来——第一次从哪里进去，第三次还会从那里进去。</p>
        <p class="ab-origin__p">对刚接触的人来说，这意味着不用先猜这个站是做什么的；对已经用过一段时间的人来说，换手机、换电脑、退出后重新登录，抬眼看到的还是熟悉的顺序。品牌称谓和站内路径绑在一起，是极速彩中心最朴素也最长久的设计。</p>
        <ul class="ab-points">
          <li class="ab-points__item"><span class="ab-points__dot" aria-hidden="true"></span>统一使用“极速彩中心”作为对外称谓，公告、说明、榜单落款一致</li>
          <li class="ab-points__item"><span class="ab-points__dot" aria-hidden="true"></span>检索入口固定在顶部导航，任何时候都能发起一次查找</li>
          <li class="ab-points__item"><span class="ab-points__dot" aria-hidden="true"></span>栏目编号与批次标签成套出现，便于口头转述和截图分享</li>
        </ul>
      </div>
      <figure class="ab-origin__figure" data-reveal>
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="电光蓝与午夜黑交叠的几何切面，像一块正在建立坐标的内容底板">
        <figcaption class="mono">坐标系建立 · 2018</figcaption>
      </figure>
    </div>
  </section>

  <!-- 02 内容运营 -->
  <section class="ab-sec ab-manage" aria-labelledby="ab-manage-title">
    <div class="shell">
      <div class="ab-sec__head">
        <p class="eyebrow mono"><span class="index-num">02</span> 内容运营</p>
        <h2 id="ab-manage-title" class="ab-sec__title">内容排得整齐，你翻起来才不费劲</h2>
        <p class="lede ab-sec__lede">12 个常设栏目把产品线、榜单、说明、公告和专题分开摆；每期榜单、每次导览更新、每一轮批次整理都按固定节奏推进，找东西的人不用重新适应。</p>
      </div>

      <div class="ab-ledger">
        <div class="ab-ledger__row">
          <span class="ab-ledger__num mono">A1</span>
          <span class="ab-ledger__label">常设栏目</span>
          <span class="ab-ledger__value mono">12 个</span>
          <p class="ab-ledger__desc">产品线、资讯榜单、常见说明、服务公告与专题观察各有归属，一次滚动就能看清哪一栏对应哪类问题。</p>
        </div>
        <div class="ab-ledger__row">
          <span class="ab-ledger__num mono">A2</span>
          <span class="ab-ledger__label">榜单发布</span>
          <span class="ab-ledger__value mono">每月 2 期</span>
          <p class="ab-ledger__desc">月初与月中各一期，关注排名变化和产品线动态的读者按固定时间去查即可，不必反复刷新等更新。</p>
        </div>
        <div class="ab-ledger__row">
          <span class="ab-ledger__num mono">A3</span>
          <span class="ab-ledger__label">服务导览</span>
          <span class="ab-ledger__value mono">每季度一次</span>
          <p class="ab-ledger__desc">安卓端的账户登录、榜单检索、产品线入口、下载更新等功能分区随版本节奏同步调整，入口位置不会悄悄变。</p>
        </div>
        <div class="ab-ledger__row">
          <span class="ab-ledger__num mono">A4</span>
          <span class="ab-ledger__label">批次整理</span>
          <span class="ab-ledger__value mono">第 18 次 · 2025.06</span>
          <p class="ab-ledger__desc">2025 年 6 月批次把常见说明与产品线入口重新归位，旧说明按批次留档，仍能顺着编号回查。</p>
        </div>
        <div class="ab-ledger__row">
          <span class="ab-ledger__num mono">A5</span>
          <span class="ab-ledger__label">内容存量</span>
          <span class="ab-ledger__value mono">360+ 篇</span>
          <p class="ab-ledger__desc">说明、公告与专题累积下来的量，靠栏目结构和批次标签支撑，翻找时不必一页页硬翻。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 03 发展历程 -->
  <section class="ab-sec ab-road" aria-labelledby="ab-road-title">
    <div class="shell">
      <figure class="ab-road__figure" data-reveal>
        <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="横向延展的蓝图时间轴，节点以橙色与青柠色标记，表达阶段推进" loading="lazy" decoding="async">
        <figcaption class="mono">阶段推进 · 2018 → 2025</figcaption>
      </figure>

      <div class="ab-sec__head ab-road__head">
        <p class="eyebrow mono"><span class="index-num">03</span> 发展历程</p>
        <h2 id="ab-road-title" class="ab-sec__title">一步一步，把顺手这件事做成常态</h2>
        <p class="lede ab-sec__lede">从搭起栏目骨架，到窄屏上也能稳住导航，再到批次标签和专题归档补齐，每个阶段解决的问题都来自用户真实遇到的卡点。</p>
      </div>

      <ol class="ab-timeline">
        <li class="ab-timeline__item">
          <details class="ab-stage" open>
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P1</span>
              <span class="ab-stage__title">2018 · 站内称谓与栏目骨架落定</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>运营之初先把名字和栏目结构定死：对外只叫极速彩中心，栏目按用途划分而不按时间堆叠。用户第一次进来就能判断哪一栏在讲产品、哪一栏在讲说明。</p>
            </div>
          </details>
        </li>
        <li class="ab-timeline__item">
          <details class="ab-stage">
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P2</span>
              <span class="ab-stage__title">索引统一 · 编号与检索对得上</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>栏目编号、批次标签和顶部检索入口统一到同一套规则里。看到一条公告的编号，就能顺着检索找回它所在的栏目与批次，不必从头翻页。</p>
            </div>
          </details>
        </li>
        <li class="ab-timeline__item">
          <details class="ab-stage">
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P3</span>
              <span class="ab-stage__title">移动端稳定 · 窄屏也有固定层级</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>顶部导航与栏目轨道在小屏上保持固定层级，适配覆盖 98% 主流机型。手机上打开不再是缩小的电脑版，栏目顺序与桌面端一致。</p>
            </div>
          </details>
        </li>
        <li class="ab-timeline__item">
          <details class="ab-stage">
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P4</span>
              <span class="ab-stage__title">批次标签完善 · 旧内容也追得回</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>每轮整理都带批次标签，2025 年 6 月完成第 18 次批次整理。用户拿几个月前的截图来问，运营同学可以按批次定位到当时的说明。</p>
            </div>
          </details>
        </li>
        <li class="ab-timeline__item">
          <details class="ab-stage">
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P5</span>
              <span class="ab-stage__title">专题归档 · 长内容也能串成线</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>专题观察按主题归入固定位置，配合同批次的说明一起阅读。想搞清一件事的来龙去脉，不必在多篇内容之间来回跳转。</p>
            </div>
          </details>
        </li>
        <li class="ab-timeline__item">
          <details class="ab-stage">
            <summary class="ab-stage__summary">
              <span class="ab-stage__idx mono">P6</span>
              <span class="ab-stage__title">2024 · 内容体验获得行业关注</span>
              <span class="ab-stage__plus" aria-hidden="true">+</span>
            </summary>
            <div class="ab-stage__body">
              <p>2024 年，极速彩中心的站内内容体验获评企业数字化内容体验优秀案例。这份认可来自长期把路径、检索与批次三件事做扎实。</p>
            </div>
          </details>
        </li>
      </ol>
    </div>
  </section>

  <!-- 04 团队 -->
  <section class="ab-sec ab-team" aria-labelledby="ab-team-title">
    <div class="shell ab-team__grid">
      <figure class="ab-team__media" data-reveal>
        <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="抽象节点与连线组成的协作关系图，对应编辑、运营与技术支持的分工" loading="lazy" decoding="async">
        <figcaption class="mono">协作关系 · 28 人</figcaption>
      </figure>

      <div class="ab-team__text">
        <p class="eyebrow mono"><span class="index-num">04</span> 团队</p>
        <h2 id="ab-team-title" class="ab-sec__title">28 个人，三条线，围着同一份内容转</h2>
        <p class="ab-origin__p">内容编辑负责选题、撰写与归档，产品运营盯着栏目结构和入口位置，技术支持处理移动端适配与检索表现。三条线在每一期榜单和每一次导览更新上交汇，谁也离不开谁。</p>

        <ul class="ab-roles">
          <li class="ab-role">
            <span class="ab-role__idx mono">R1</span>
            <h3 class="ab-role__title">内容编辑</h3>
            <p class="ab-role__desc">负责榜单、说明与专题的撰写和归档，关键栏目落笔前由另一位编辑复核。</p>
          </li>
          <li class="ab-role">
            <span class="ab-role__idx mono">R2</span>
            <h3 class="ab-role__title">产品运营</h3>
            <p class="ab-role__desc">维护 12 个常设栏目的位置与命名，跟踪用户常用入口，把走不通的地方改顺。</p>
          </li>
          <li class="ab-role">
            <span class="ab-role__idx mono">R3</span>
            <h3 class="ab-role__title">技术支持</h3>
            <p class="ab-role__desc">负责窄屏适配、检索响应与版本归档，让入口在换设备之后依然落在原处。</p>
          </li>
        </ul>

        <p class="ab-team__note mono">双人复核 · 版本归档 · 随季度导览同步检查</p>
      </div>
    </div>
  </section>

  <!-- 05 生态与认可 -->
  <section class="ab-sec ab-eco" aria-labelledby="ab-eco-title">
    <div class="shell">
      <div class="ab-sec__head">
        <p class="eyebrow mono"><span class="index-num">05</span> 合作与认可</p>
        <h2 id="ab-eco-title" class="ab-sec__title">内容要跑得稳，靠伙伴把链路补齐</h2>
        <p class="lede ab-sec__lede">与 40+ 应用分发、数据服务、内容审核和移动适配伙伴保持内容对接，榜单能按时上线，说明能准确抵达，窄屏体验也有人一起盯。</p>
      </div>

      <div class="ab-matrix">
        <div class="ab-matrix__cell">
          <span class="ab-matrix__idx mono">M1</span>
          <h3 class="ab-matrix__title">应用分发伙伴</h3>
          <p class="ab-matrix__desc">版本更新与入口位置同步，让安卓用户在分发渠道看到的信息和站内说的一致。</p>
        </div>
        <div class="ab-matrix__cell">
          <span class="ab-matrix__idx mono">M2</span>
          <h3 class="ab-matrix__title">数据服务伙伴</h3>
          <p class="ab-matrix__desc">支撑榜单数据的整理与呈现，每月 2 期榜单的排名变化有稳定的数据来源。</p>
        </div>
        <div class="ab-matrix__cell">
          <span class="ab-matrix__idx mono">M3</span>
          <h3 class="ab-matrix__title">内容审核伙伴</h3>
          <p class="ab-matrix__desc">公告与常见说明上线前多一道把关，减少表述歧义，降低理解成本。</p>
        </div>
        <div class="ab-matrix__cell">
          <span class="ab-matrix__idx mono">M4</span>
          <h3 class="ab-matrix__title">移动适配伙伴</h3>
          <p class="ab-matrix__desc">共同打磨窄屏下的导航与栏目轨道。移动端访问占比已达 72%，这部分体验直接决定口碑。</p>
        </div>
      </div>

      <dl class="ab-figures">
        <div class="ab-figures__item">
          <dt>合作生态</dt>
          <dd class="mono">40+</dd>
        </div>
        <div class="ab-figures__item">
          <dt>月均访问</dt>
          <dd class="mono">46 万人次</dd>
        </div>
        <div class="ab-figures__item">
          <dt>检索日均使用</dt>
          <dd class="mono">1.8 万次</dd>
        </div>
        <div class="ab-figures__item">
          <dt>机型适配覆盖</dt>
          <dd class="mono">98%</dd>
        </div>
      </dl>
    </div>
  </section>

  <!-- 06 承诺与下一步 -->
  <section class="ab-sec ab-promise" aria-labelledby="ab-promise-title">
    <div class="shell">
      <div class="ab-sec__head">
        <p class="eyebrow mono"><span class="index-num">06</span> 我们的承诺</p>
        <h2 id="ab-promise-title" class="ab-sec__title">把话说清楚，把路留到底</h2>
        <p class="lede ab-sec__lede">合作和使用的第一步，通常是先确认对方靠不靠得住。极速彩中心把承诺写在你看得见、试得到的地方：入口在哪、内容怎么找、有疑问找谁。</p>
      </div>

      <div class="ab-promise__grid">
        <article class="ab-promise__card">
          <span class="ab-promise__idx mono">C1</span>
          <h3 class="ab-promise__title">路径一致</h3>
          <p>换设备、重新登录之后，顶部检索和第二屏栏目轨道仍在原位，找回榜单公告不用重新摸索。</p>
        </article>
        <article class="ab-promise__card">
          <span class="ab-promise__idx mono">C2</span>
          <h3 class="ab-promise__title">信息可检索</h3>
          <p>栏目、批次标签、关键词三种找法并行，手上只有一条编号或一个模糊印象，也能定位到内容。</p>
        </article>
        <article class="ab-promise__card">
          <span class="ab-promise__idx mono">C3</span>
          <h3 class="ab-promise__title">沟通有回应</h3>
          <p>工作日 9:00–18:00 内回复邮件咨询，合作意向与使用中的问题都能沿同一条通道提出。</p>
        </article>
      </div>

      <div class="ab-cta">
        <p class="ab-cta__text">想先看看具体能用到什么？服务导览讲清了六个功能分区和下载更新的走法；想了解近期动态，资讯榜单已经按批次和标签排好目录。</p>
        <div class="ab-cta__actions">
          <a class="btn btn--primary" href="/download/">查看服务导览</a>
          <a class="btn btn--line" href="/notes/">浏览资讯榜单</a>
          <a class="btn btn--ghost" href="/connect/">联系沟通</a>
        </div>
      </div>
      <p class="ab-footnote mono">操作上卡住了？<a class="ab-footnote__link" href="/tutorial/">使用教程</a>里有分步说明。</p>
    </div>
  </section>
</main>

.page-about {
  --ab-radius: 6px;
  --ab-grid-line: rgba(143, 163, 200, 0.09);
  background: var(--c-ink);
  color: var(--c-white);
  overflow-x: clip;
}

/* 首屏 */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 5vw, 44px) 0 clamp(48px, 9vw, 96px);
  background:
    radial-gradient(circle at 84% 6%, rgba(30, 107, 255, 0.34), transparent 58%),
    radial-gradient(circle at 6% 96%, rgba(255, 90, 31, 0.16), transparent 54%),
    linear-gradient(180deg, var(--c-ink-2) 0%, var(--c-ink) 76%);
  border-bottom: 1px solid var(--line);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--ab-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ab-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.page-about .ab-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -16%;
  width: 44%;
  height: 180%;
  background: linear-gradient(100deg, transparent 38%, rgba(57, 215, 255, 0.16) 50%, transparent 62%);
  transform: skewX(-12deg);
  pointer-events: none;
}

.page-about .ab-hero__inner {
  position: relative;
  z-index: 1;
}

.page-about .ab-hero__crumb {
  margin-bottom: clamp(18px, 4vw, 34px);
}

.page-about .ab-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 8vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-about .ab-hero__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.8;
  color: var(--c-mist);
}

.page-about .ab-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
}

.page-about .ab-hero__meta-item {
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px dashed var(--line-strong);
}

.page-about .ab-hero__meta-item:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.page-about .ab-hero__meta-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
}

.page-about .ab-hero__meta-item dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-cyan);
}

.page-about .ab-hero__tag {
  position: absolute;
  right: 6px;
  bottom: 20px;
  z-index: 1;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--c-mist);
  writing-mode: vertical-rl;
  opacity: 0.7;
}

/* 区块骨架 */
.page-about .ab-sec {
  padding: clamp(46px, 9vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}

.page-about .ab-sec__head {
  max-width: 68ch;
  margin-bottom: clamp(22px, 4vw, 42px);
}

.page-about .ab-sec__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-about .ab-sec__lede {
  margin: 14px 0 0;
  color: var(--c-mist);
  line-height: 1.8;
  font-size: 16px;
}

.page-about .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.page-about .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c-orange);
  flex: none;
}

.page-about .index-num {
  color: var(--c-orange);
  font-weight: 700;
}

/* 01 品牌起点 */
.page-about .ab-origin__grid {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
}

.page-about .ab-origin__p {
  margin: 16px 0 0;
  line-height: 1.85;
  color: var(--c-mist);
  max-width: 62ch;
}

.page-about .ab-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.page-about .ab-points__item {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
}

.page-about .ab-points__dot {
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--c-lime);
  transform: rotate(45deg);
}

.page-about .ab-origin__figure {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

.page-about .ab-origin__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-about .ab-origin__figure figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

/* 02 内容账目 */
.page-about .ab-ledger {
  border-top: 1px solid var(--line-strong);
}

.page-about .ab-ledger__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
}

.page-about .ab-ledger__num {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-about .ab-ledger__label {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.page-about .ab-ledger__value {
  grid-column: 2;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-orange);
  line-height: 1.3;
}

.page-about .ab-ledger__desc {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 58ch;
}

/* 03 时间轴 */
.page-about .ab-road__figure {
  margin: 0 0 clamp(24px, 5vw, 46px);
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  overflow: hidden;
}

.page-about .ab-road__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

.page-about .ab-road__figure figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

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

.page-about .ab-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-blue), var(--c-cyan) 55%, var(--c-orange));
  opacity: 0.72;
}

.page-about .ab-timeline__item {
  position: relative;
  margin-bottom: 12px;
}

.page-about .ab-timeline__item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--c-ink);
  border: 2px solid var(--c-cyan);
  transform: rotate(45deg);
}

.page-about .ab-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--c-blue);
  border-radius: var(--ab-radius);
}

.page-about .ab-stage[open] {
  border-left-color: var(--c-orange);
  background: var(--surface-deep);
}

.page-about .ab-stage__summary {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.page-about .ab-stage__summary::-webkit-details-marker {
  display: none;
}

.page-about .ab-stage__idx {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
}

.page-about .ab-stage__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.page-about .ab-stage__plus {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--c-orange);
  text-align: right;
  transition: transform 0.25s var(--ease);
}

.page-about .ab-stage[open] .ab-stage__plus {
  transform: rotate(45deg);
}

.page-about .ab-stage__body {
  padding: 0 16px 16px 66px;
}

.page-about .ab-stage__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-mist);
}

/* 04 团队 */
.page-about .ab-team__grid {
  display: grid;
  gap: clamp(24px, 5vw, 52px);
}

.page-about .ab-team__media {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--c-ink-2);
  clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%);
}

.page-about .ab-team__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-about .ab-team__media figcaption {
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-mist);
  border-top: 1px dashed var(--line);
}

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

.page-about .ab-role {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--c-cyan);
  border-radius: var(--ab-radius);
}

.page-about .ab-role__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-lime);
}

.page-about .ab-role__title {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
}

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

.page-about .ab-team__note {
  margin: 20px 0 0;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
  background: rgba(30, 107, 255, 0.12);
  border-left: 2px solid var(--c-blue);
}

/* 05 生态矩阵 */
.page-about .ab-matrix {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .ab-matrix__cell {
  padding: 20px 18px;
  background: var(--c-ink-2);
}

.page-about .ab-matrix__cell:nth-child(2),
.page-about .ab-matrix__cell:nth-child(3) {
  background: var(--surface-deep);
}

.page-about .ab-matrix__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-magenta);
}

.page-about .ab-matrix__title {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 700;
}

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

.page-about .ab-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.page-about .ab-figures__item {
  padding: 16px;
  background: var(--c-graphite);
}

.page-about .ab-figures__item dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-mist);
}

.page-about .ab-figures__item dd {
  margin: 8px 0 0;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  color: var(--c-cyan);
  line-height: 1.2;
}

/* 06 承诺与下一步 */
.page-about .ab-promise__grid {
  display: grid;
  gap: 12px;
}

.page-about .ab-promise__card {
  position: relative;
  padding: 22px 18px 22px;
  background: linear-gradient(160deg, rgba(30, 107, 255, 0.18), rgba(26, 34, 51, 0.92) 62%);
  border: 1px solid var(--line-strong);
  border-radius: var(--ab-radius);
}

.page-about .ab-promise__card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 42px;
  height: 2px;
  background: var(--c-orange);
}

.page-about .ab-promise__idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-orange);
}

.page-about .ab-promise__title {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
}

.page-about .ab-promise__card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-mist);
}

.page-about .ab-cta {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--c-orange);
  background: var(--surface-deep);
}

.page-about .ab-cta__text {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.85;
}

.page-about .ab-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-about .ab-footnote {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-mist);
}

.page-about .ab-footnote__link {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about a:focus-visible,
.page-about summary:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

.page-about .ab-ledger__row:hover {
  background: rgba(30, 107, 255, 0.06);
}

/* 响应式 */
@media (min-width: 760px) {
  .page-about .ab-origin__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }

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

  .page-about .ab-ledger__row {
    grid-template-columns: 48px minmax(110px, 0.7fr) 0.9fr 1.6fr;
    align-items: baseline;
    gap: 0 18px;
  }

  .page-about .ab-ledger__value,
  .page-about .ab-ledger__desc {
    grid-column: auto;
  }

  .page-about .ab-ledger__desc {
    margin: 0;
  }

  .page-about .ab-team__grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }

  .page-about .ab-team__media {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

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

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

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

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

  .page-about .ab-timeline__item:nth-child(even) {
    margin-left: clamp(24px, 6vw, 72px);
  }

  .page-about .ab-timeline__item:nth-child(odd) {
    margin-right: clamp(24px, 6vw, 72px);
  }

  .page-about .ab-stage__body {
    padding: 0 26px 18px 66px;
  }
}

@media (min-width: 1080px) {
  .page-about .ab-hero__tag {
    right: 22px;
    bottom: 38px;
    font-size: 11px;
  }

  .page-about .ab-origin__grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 56px;
  }

  .page-about .ab-road__figure {
    margin-bottom: 52px;
  }

  .page-about .ab-stage__title {
    font-size: 16px;
  }

  .page-about .ab-hero__title {
    max-width: 22ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .ab-stage__plus {
    transition: none;
  }
}