.page-about {
  --about-gap: clamp(18px, 3.2vw, 34px);
  --about-plate-bg: var(--ink-2);
  --about-delay-step: 80ms;
  background: var(--ink);
  color: var(--silver);
  overflow-x: hidden;
}

.page-about .about-crumbs {
  padding-top: clamp(18px, 3vw, 30px);
}

.page-about .breadcrumbs {
  font-size: 13px;
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  padding: clamp(24px, 5vw, 56px) 0 clamp(44px, 7vw, 96px);
  position: relative;
}

.page-about .about-cover::before {
  content: "";
  position: absolute;
  inset: auto -10% 8% auto;
  width: min(420px, 60vw);
  height: min(420px, 60vw);
  border-radius: 46% 54% 38% 62% / 58% 42% 58% 42%;
  background: radial-gradient(circle at 32% 30%, rgba(54, 224, 208, 0.16), transparent 68%);
  pointer-events: none;
}

.page-about .about-cover__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
  position: relative;
}

.page-about .about-cover__text .eyebrow {
  margin-bottom: 18px;
}

.page-about .about-cover .display {
  margin: 0 0 22px;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.page-about .about-cover .lede {
  max-width: 34em;
  margin: 0 0 20px;
}

.page-about .about-cover__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--cyan-soft);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}

.page-about .about-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-cover__figure {
  margin: 0;
}

.page-about .about-cover__media {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2) 62%, rgba(54, 224, 208, 0.12));
}

.page-about .about-cover__media img,
.page-about .about-timeline__media img,
.page-about .about-credentials__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 章节头 ---------- */
.page-about .about-chapter-head {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-about .about-chapter-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-about .about-chapter-num::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--line-strong);
}

.page-about .about-chapter-num--dark {
  color: var(--gold-deep);
}

.page-about .about-chapter-num--dark::after {
  background: rgba(11, 18, 32, 0.25);
}

.page-about .section-title {
  margin: 0;
}

.page-about .prose {
  margin: 0;
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  padding-top: clamp(38px, 6vw, 72px);
}

.page-about .about-timeline__band {
  margin-bottom: clamp(30px, 5vw, 56px);
}

.page-about .about-timeline__media {
  aspect-ratio: 12 / 7;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, var(--ink-3), var(--ink-2));
}

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

.page-about .about-timeline__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan), rgba(232, 180, 90, 0.6) 55%, transparent);
}

.page-about .about-timeline__item {
  position: relative;
  padding-left: 34px;
  margin-bottom: 20px;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(54, 224, 208, 0.15);
}

.page-about .about-timeline__item:nth-child(2n)::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232, 180, 90, 0.15);
}

.page-about .about-timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 8px;
}

.page-about .about-timeline__plate {
  background: var(--about-plate-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-about .about-timeline__plate h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--silver);
}

.page-about .about-timeline__plate p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 团队 ---------- */
.page-about .about-team__grid {
  display: grid;
  gap: var(--about-gap);
}

.page-about .about-team__total {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54, 224, 208, 0.32);
  background: linear-gradient(160deg, rgba(54, 224, 208, 0.14), rgba(17, 28, 46, 0.6) 58%);
}

.page-about .about-team__figure {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-about .about-team__figure-label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--cyan-soft);
}

.page-about .about-team__total p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
  max-width: 30ch;
}

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

.page-about .about-role {
  --accent: var(--cyan);
  position: relative;
  padding: 18px 20px 20px;
  border-radius: var(--radius-md);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.page-about .about-role--gold {
  --accent: var(--gold);
}

.page-about .about-role--karst {
  --accent: var(--karst);
}

.page-about .about-role--silver {
  --accent: var(--mist);
}

.page-about .about-role__num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.page-about .about-role h3 {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.page-about .about-role p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--karst);
}

/* ---------- 质量 ---------- */
.page-about .about-review {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .about-review__step {
  position: relative;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 43, 51, 0.92), rgba(17, 28, 46, 0.92));
}

.page-about .about-review__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid rgba(232, 180, 90, 0.4);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  margin-bottom: 12px;
}

.page-about .about-review__step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--silver);
}

.page-about .about-review__step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

.page-about .about-cadence {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: rgba(30, 43, 51, 0.5);
}

.page-about .about-cadence__item {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid rgba(54, 224, 208, 0.45);
}

.page-about .about-cadence__value {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cyan);
}

.page-about .about-cadence__value--gold {
  color: var(--gold);
}

.page-about .about-cadence__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--karst);
}

/* ---------- 覆盖 ---------- */
.page-about .about-reach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-about .about-reach__text .section-title {
  margin: 12px 0 18px;
}

.page-about .about-reach__text .prose + .prose {
  margin-top: 14px;
}

.page-about .about-reach__link {
  margin-top: 24px;
}

.page-about .about-reach__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-about .about-reach__stats li {
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--ink-2);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-about .about-reach__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--silver);
  letter-spacing: -0.01em;
}

.page-about .about-reach__num small {
  font-size: 0.46em;
  margin-left: 4px;
  color: var(--cyan);
}

.page-about .about-reach__num--gold {
  color: var(--gold);
}

.page-about .about-reach__label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--karst);
}

/* ---------- 资质 ---------- */
.page-about .about-credentials {
  color: var(--ink);
}

.page-about .about-credentials .section-title {
  color: var(--ink);
}

.page-about .about-credentials .prose {
  color: #38474d;
}

.page-about .about-credentials__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-about .about-credentials__media {
  margin-top: 24px;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(140deg, var(--mist), var(--karst));
}

.page-about .about-credentials__list {
  display: grid;
  gap: 12px;
}

.page-about .about-cert {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(11, 18, 32, 0.12);
  overflow: hidden;
}

.page-about .about-cert__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
}

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

.page-about .about-cert__summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-about .about-cert__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.page-about .about-cert__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-about .about-cert__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #3c4a50;
  white-space: nowrap;
}

.page-about .about-cert__toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(11, 18, 32, 0.28);
  position: relative;
  flex: none;
}

.page-about .about-cert__toggle::before,
.page-about .about-cert__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.page-about .about-cert__toggle::before {
  width: 9px;
  height: 1px;
}

.page-about .about-cert__toggle::after {
  width: 1px;
  height: 9px;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}

.page-about .about-cert[open] .about-cert__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.page-about .about-cert[open] .about-cert__toggle {
  border-color: var(--gold-deep);
}

.page-about .about-cert__body {
  padding: 0 18px 18px;
}

.page-about .about-cert__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: #38474d;
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  padding-bottom: clamp(48px, 7vw, 96px);
}

.page-about .about-cta__inner {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54, 224, 208, 0.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(232, 180, 90, 0.16), transparent 58%),
    linear-gradient(150deg, var(--ink-2), var(--ink-3));
}

.page-about .about-cta__text .section-title {
  margin-bottom: 14px;
}

.page-about .about-cta__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-team__roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-about .about-cover__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 64px);
  }

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

  .page-about .about-timeline__list::before {
    left: 50%;
    transform: translateX(-0.5px);
  }

  .page-about .about-timeline__item {
    width: calc(50% - 38px);
    padding-left: 0;
    margin-bottom: 30px;
  }

  .page-about .about-timeline__item:nth-child(odd) {
    margin-right: auto;
  }

  .page-about .about-timeline__item:nth-child(even) {
    margin-left: auto;
  }

  .page-about .about-timeline__item::before {
    left: auto;
    right: -44px;
    top: 30px;
  }

  .page-about .about-timeline__item:nth-child(even)::before {
    right: auto;
    left: -44px;
  }

  .page-about .about-team__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: clamp(24px, 3vw, 44px);
  }

  .page-about .about-team__total {
    position: sticky;
    top: 120px;
  }

  .page-about .about-reach__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

  .page-about .about-credentials__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-about .about-cta__actions {
    justify-content: flex-end;
  }
}

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

  .page-about .about-timeline__band .media__caption {
    text-align: right;
  }
}

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

<main id="main-content" class="page-about">
  <div class="container about-crumbs">
    <ol class="breadcrumbs">
      <li><a href="/">首页</a></li>
      <li aria-current="page">关于竞博</li>
    </ol>
  </div>

  <section class="about-cover" aria-labelledby="about-title">
    <div class="container about-cover__grid">
      <div class="about-cover__text" data-reveal>
        <p class="eyebrow">品牌特刊 · 自 2016 年起</p>
        <h1 id="about-title" class="display">竞博CN：<br>把会员服务与设备适配讲清楚</h1>
        <p class="lede">从最初的品牌内容栏目走到今天，竞博CN 始终在做同一件事——在您上手、换机、查权益之前，先把该看懂的内容摆到眼前。三百六十余篇帮助文档与按月维护的版本说明，让这条从查阅到确认的路径走得通、也走得稳。</p>
        <p class="about-cover__quote">内容讲得清，用户才敢往下走。</p>
        <div class="about-cover__actions">
          <a class="btn btn--primary" href="/experience/">进入体验中心</a>
          <a class="btn btn--line" href="/information/">浏览资讯中心</a>
        </div>
      </div>
      <figure class="about-cover__figure" data-reveal style="--reveal-delay:140ms">
        <div class="media media--wide about-cover__media">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="山地等高线与数据流交织的抽象品牌主视觉">
        </div>
        <figcaption class="media__caption">山地数字枢纽 · 品牌主视觉</figcaption>
      </figure>
    </div>
  </section>

  <section class="about-timeline section" aria-labelledby="timeline-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">01 · 品牌沿革</span>
        <h2 id="timeline-title" class="section-title">六次推进，把查阅变成一条走得通的路</h2>
        <p class="prose">每个阶段解决的其实都是一个具体处境：资料零散时先建栏目，权益说不清时先理范围，换机没把握时先给核对入口。时间线并不长，但每一步都留在了今天还能用的功能里。</p>
      </header>

      <div class="about-timeline__band" data-reveal>
        <div class="media media--panorama about-timeline__media">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="纵向时间线与有机色块组合的抽象叙事图" loading="lazy" decoding="async">
        </div>
        <p class="media__caption">从栏目建设到换机确认路径的六个阶段</p>
      </div>

      <ol class="about-timeline__list">
        <li class="about-timeline__item" data-reveal>
          <span class="about-timeline__year">2016</span>
          <div class="about-timeline__plate plate">
            <h3>品牌内容站上线</h3>
            <p>第一批品牌与服务说明以静态栏目形式发布，用户第一次可以在同一处读完会员服务范围的基础介绍，不必再靠零散问询拼凑答案。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:90ms">
          <span class="about-timeline__year">2018</span>
          <div class="about-timeline__plate plate">
            <h3>会员服务体系建立</h3>
            <p>围绕权益查询、有效期与适用范围整理出第一套服务说明。会员在续用与换机之前有了可依赖的参照，问题问得少了，确认得快了。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:120ms">
          <span class="about-timeline__year">2020</span>
          <div class="about-timeline__plate plate">
            <h3>四类栏目落地成库</h3>
            <p>使用指南、会员权益、版本适配、品牌资料四类栏目成形，配套 28 个分类标签。上手的人找指南，查权益的人找说明，各走各的入口，互不打扰。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:150ms">
          <span class="about-timeline__year">2022</span>
          <div class="about-timeline__plate plate">
            <h3>帮助中心开门</h3>
            <p>42 篇权益类帮助文档覆盖设备更换、权益查询、有效期、范围说明、资料库权限与常见问题 6 类场景，摘要卡先给结论，展开再看细节。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:180ms">
          <span class="about-timeline__year">2024</span>
          <div class="about-timeline__plate plate">
            <h3>手机版本记录上线</h3>
            <p>6 条版本线开始按月维护，当前 v3.8 适配 42 款主流机型，首页加载比旧版快约 1.2 秒。设备跑不跑得动，翻一页就有答案。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:210ms">
          <span class="about-timeline__year">2025</span>
          <div class="about-timeline__plate plate">
            <h3>换机前双重确认成形</h3>
            <p>先看权益还覆盖不覆盖，再核设备适配不适配，两件事都确认完才进入下一步。原本最容易出岔子的环节，如今变得可预期。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-team section section--ink2" aria-labelledby="team-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">02 · 团队与分工</span>
        <h2 id="team-title" class="section-title">68 个人，四条职能线，对着同一件事负责</h2>
        <p class="prose">文档写得准、版本跟得上、页面看得懂，靠的不是一个人盯到底，而是四条职能线各自守住一段，衔接处再彼此接住。</p>
      </header>

      <div class="about-team__grid">
        <div class="about-team__total" data-reveal>
          <span class="about-team__figure">68</span>
          <span class="about-team__figure-label">人团队规模</span>
          <p>内容、技术、设计与运营并行推进，日常节奏像一座按班次运转的山地枢纽。</p>
        </div>
        <ul class="about-team__roles">
          <li class="about-role about-role--cyan" data-reveal style="--reveal-delay:60ms">
            <span class="about-role__num">24</span>
            <h3>内容与支持</h3>
            <p>撰写与整理帮助文档，接住会员咨询的第一棒，也负责把反复被问到的问题改写成条目。</p>
          </li>
          <li class="about-role about-role--gold" data-reveal style="--reveal-delay:110ms">
            <span class="about-role__num">18</span>
            <h3>技术</h3>
            <p>维护版本记录与适配数据，验证页面加载表现，让机型信息按时更新到位。</p>
          </li>
          <li class="about-role about-role--karst" data-reveal style="--reveal-delay:160ms">
            <span class="about-role__num">9</span>
            <h3>设计与品牌</h3>
            <p>把长文档拆成摘要卡与折叠详情，让信息在小屏上也读得下去，不用靠猜。</p>
          </li>
          <li class="about-role about-role--silver" data-reveal style="--reveal-delay:210ms">
            <span class="about-role__num">17</span>
            <h3>运营</h3>
            <p>跟进专题系列与栏目节奏，收集使用反馈，决定下一个周期先补哪一块内容。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-quality section" aria-labelledby="quality-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">03 · 质量与服务</span>
        <h2 id="quality-title" class="section-title">一篇文档发出前，要过三道手</h2>
        <p class="prose">对用户而言，最怕的是照着说明做完却发现对不上。三道审核的存在，就是为了让打开文档的那一刻，看到的内容和实际能做的事对得上。</p>
      </header>

      <ol class="about-review">
        <li class="about-review__step" data-reveal>
          <span class="about-review__index">第一道</span>
          <h3>编辑把关</h3>
          <p>统一表述与结构，把长段落拆成能扫读的短句，摘要卡先给出结论，细节留在展开里。</p>
        </li>
        <li class="about-review__step" data-reveal style="--reveal-delay:90ms">
          <span class="about-review__index">第二道</span>
          <h3>业务确认</h3>
          <p>逐条比照会员服务的实际范围，确认权益覆盖、有效期与适用场景写得没有偏差。</p>
        </li>
        <li class="about-review__step" data-reveal style="--reveal-delay:150ms">
          <span class="about-review__index">第三道</span>
          <h3>合规检查</h3>
          <p>复核对外措辞与引用信息，避免出现让人误解的说法，也避免给出做不到的预期。</p>
        </li>
      </ol>

      <div class="about-cadence" data-reveal>
        <div class="about-cadence__item">
          <span class="about-cadence__value">18–25</span>
          <span class="about-cadence__label">篇文档 · 每月更新</span>
        </div>
        <div class="about-cadence__item">
          <span class="about-cadence__value about-cadence__value--gold">1–2</span>
          <span class="about-cadence__label">次版本记录维护 · 每月</span>
        </div>
        <div class="about-cadence__item">
          <span class="about-cadence__value">4</span>
          <span class="about-cadence__label">小时 · 工作日邮件平均首次回复</span>
        </div>
      </div>
    </div>
  </section>

  <section class="about-reach section section--ink2" aria-labelledby="reach-title">
    <div class="container about-reach__grid">
      <div class="about-reach__text" data-reveal>
        <span class="about-chapter-num">04 · 覆盖与伙伴</span>
        <h2 id="reach-title" class="section-title">线上能查，线下有人接</h2>
        <p class="prose">服务覆盖 31 个省级行政区，无论用户在哪个方向，遇到拿不准的地方都能找到同一条求助路径。设备检测与内容分发由 12 家合作服务商支撑，适配数据因此能跟得上机型的变化。</p>
        <p class="prose">这些伙伴负责把机型验证做扎实、把内容送到该到的地方。您看到的每一条适配结论背后，都有一次真机核对。</p>
        <a class="btn btn--line about-reach__link" href="/inquiry/">联系客服咨询</a>
      </div>
      <ul class="about-reach__stats" data-reveal style="--reveal-delay:120ms">
        <li>
          <span class="about-reach__num">31</span>
          <span class="about-reach__label">个省级行政区服务覆盖</span>
        </li>
        <li>
          <span class="about-reach__num">18<small>万</small></span>
          <span class="about-reach__label">累计注册会员</span>
        </li>
        <li>
          <span class="about-reach__num">4.6<small>万</small></span>
          <span class="about-reach__label">月活跃用户</span>
        </li>
        <li>
          <span class="about-reach__num about-reach__num--gold">12</span>
          <span class="about-reach__label">家设备检测与内容分发服务商</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="about-credentials section section--silver" aria-labelledby="cred-title">
    <div class="container about-credentials__grid">
      <div class="about-credentials__head" data-reveal>
        <span class="about-chapter-num about-chapter-num--dark">05 · 资质与登记</span>
        <h2 id="cred-title" class="section-title">做内容这件事，也有它的凭据</h2>
        <p class="prose">长期维护一套文档与版本记录，需要有自己趁手的工具与方法。团队累计取得 6 项软件著作权与 2 项界面设计登记，登记信息与站点备案一并向您公开。</p>
        <div class="media media--tall about-credentials__media">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="软件著作权与界面设计登记的抽象纹理图示，不含真实证书文字" loading="lazy" decoding="async">
        </div>
      </div>

      <div class="about-credentials__list" data-reveal style="--reveal-delay:100ms">
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">01</span>
            <span class="about-cert__name">软件著作权</span>
            <span class="about-cert__count">6 项</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>登记范围覆盖资料库检索、标签归类与版本记录管理等自研工具，支撑文档从撰写、审核到发布的完整流转。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">02</span>
            <span class="about-cert__name">界面设计登记</span>
            <span class="about-cert__count">2 项</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>针对文档阅读界面与标签导航的设计登记。作用很直接：让长文档在手机上也能被快速扫读，关键结论不用翻到底才看见。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">03</span>
            <span class="about-cert__name">站点备案</span>
            <span class="about-cert__count">已公开</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>站点备案号为 贵ICP备83638202号-5，指定地区为贵州。域名 jingbo-now.com.cn 为竞博CN 中国官网入口。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">04</span>
            <span class="about-cert__name">审核与维护机制</span>
            <span class="about-cert__count">长期运行</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>文档从初稿到上线经过编辑、业务、合规三级审核，版本记录按月复核。机制本身也在被复盘，遇到新的使用问题就补进条目里。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="about-cta section" aria-labelledby="cta-title">
    <div class="container about-cta__inner" data-reveal>
      <div class="about-cta__text">
        <h2 id="cta-title" class="section-title">先看看资料库，再决定下一步</h2>
        <p>四类栏目、28 个分类标签、三百六十余篇文档，从上手到换机核对都能找到对应说明。想了解最近的更新节奏，也可以直接翻资讯中心的版本观察。</p>
      </div>
      <div class="about-cta__actions">
        <a class="btn btn--primary" href="/experience/">进入体验中心</a>
        <a class="btn btn--line" href="/information/">查看资讯中心</a>
        <a class="btn btn--ghost" href="/faqs/">翻帮助中心</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-gap: clamp(18px, 3.2vw, 34px);
  --about-plate-bg: var(--ink-2);
  background: var(--ink);
  color: var(--silver);
  overflow-x: hidden;
}

.page-about .about-crumbs {
  padding-top: clamp(18px, 3vw, 30px);
}

.page-about .breadcrumbs {
  font-size: 13px;
}

/* ---------- 封面 ---------- */
.page-about .about-cover {
  padding: clamp(24px, 5vw, 56px) 0 clamp(44px, 7vw, 96px);
  position: relative;
}

.page-about .about-cover::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: 6%;
  width: min(420px, 62vw);
  height: min(420px, 62vw);
  border-radius: 46% 54% 38% 62% / 58% 42% 58% 42%;
  background: radial-gradient(circle at 32% 30%, rgba(54, 224, 208, 0.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.page-about .about-cover__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
  position: relative;
  z-index: 1;
}

.page-about .about-cover__text .eyebrow {
  margin-bottom: 18px;
}

.page-about .about-cover .display {
  margin: 0 0 22px;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.page-about .about-cover .lede {
  max-width: 34em;
  margin: 0 0 20px;
}

.page-about .about-cover__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--cyan-soft);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}

.page-about .about-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-about .about-cover__figure {
  margin: 0;
}

.page-about .about-cover__media {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2) 62%, rgba(54, 224, 208, 0.12));
}

.page-about .about-cover__media img,
.page-about .about-timeline__media img,
.page-about .about-credentials__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 章节头 ---------- */
.page-about .about-chapter-head {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-about .about-chapter-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

.page-about .about-chapter-num::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--line-strong);
}

.page-about .about-chapter-num--dark {
  color: var(--gold-deep);
}

.page-about .about-chapter-num--dark::after {
  background: rgba(11, 18, 32, 0.25);
}

.page-about .section-title {
  margin: 0;
}

.page-about .prose {
  margin: 0;
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  padding-top: clamp(38px, 6vw, 72px);
}

.page-about .about-timeline__band {
  margin-bottom: clamp(30px, 5vw, 56px);
}

.page-about .about-timeline__media {
  aspect-ratio: 12 / 7;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, var(--ink-3), var(--ink-2));
}

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

.page-about .about-timeline__list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan), rgba(232, 180, 90, 0.6) 55%, transparent);
}

.page-about .about-timeline__item {
  position: relative;
  padding-left: 34px;
  margin-bottom: 20px;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(54, 224, 208, 0.15);
}

.page-about .about-timeline__item:nth-child(2n)::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232, 180, 90, 0.15);
}

.page-about .about-timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 8px;
}

.page-about .about-timeline__plate {
  background: var(--about-plate-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.4vw, 24px);
}

.page-about .about-timeline__plate h3 {
  margin: 0 0 8px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--silver);
}

.page-about .about-timeline__plate p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 团队 ---------- */
.page-about .about-team__grid {
  display: grid;
  gap: var(--about-gap);
}

.page-about .about-team__total {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54, 224, 208, 0.32);
  background: linear-gradient(160deg, rgba(54, 224, 208, 0.14), rgba(17, 28, 46, 0.6) 58%);
}

.page-about .about-team__figure {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-about .about-team__figure-label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--cyan-soft);
}

.page-about .about-team__total p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
  max-width: 30ch;
}

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

.page-about .about-role {
  --accent: var(--cyan);
  position: relative;
  padding: 18px 20px 20px;
  border-radius: var(--radius-md);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.page-about .about-role--gold {
  --accent: var(--gold);
}

.page-about .about-role--karst {
  --accent: var(--karst);
}

.page-about .about-role--silver {
  --accent: var(--mist);
}

.page-about .about-role__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.page-about .about-role h3 {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.page-about .about-role p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--karst);
}

/* ---------- 质量 ---------- */
.page-about .about-review {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .about-review__step {
  position: relative;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 43, 51, 0.92), rgba(17, 28, 46, 0.92));
}

.page-about .about-review__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid rgba(232, 180, 90, 0.4);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  margin-bottom: 12px;
}

.page-about .about-review__step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--silver);
}

.page-about .about-review__step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
}

.page-about .about-cadence {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: rgba(30, 43, 51, 0.5);
}

.page-about .about-cadence__item {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid rgba(54, 224, 208, 0.45);
}

.page-about .about-cadence__value {
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cyan);
}

.page-about .about-cadence__value--gold {
  color: var(--gold);
}

.page-about .about-cadence__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--karst);
}

/* ---------- 覆盖 ---------- */
.page-about .about-reach__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-about .about-reach__text .section-title {
  margin: 12px 0 18px;
}

.page-about .about-reach__text .prose + .prose {
  margin-top: 14px;
}

.page-about .about-reach__link {
  margin-top: 24px;
}

.page-about .about-reach__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-about .about-reach__stats li {
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--ink-2);
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-about .about-reach__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--silver);
  letter-spacing: -0.01em;
}

.page-about .about-reach__num small {
  font-size: 0.46em;
  margin-left: 4px;
  color: var(--cyan);
}

.page-about .about-reach__num--gold {
  color: var(--gold);
}

.page-about .about-reach__label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--karst);
}

/* ---------- 资质 ---------- */
.page-about .about-credentials {
  color: var(--ink);
}

.page-about .about-credentials .section-title {
  color: var(--ink);
}

.page-about .about-credentials .prose {
  color: #38474d;
}

.page-about .about-credentials__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-about .about-credentials__media {
  margin-top: 24px;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(140deg, var(--mist), var(--karst));
}

.page-about .about-credentials__list {
  display: grid;
  gap: 12px;
}

.page-about .about-cert {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(11, 18, 32, 0.12);
  overflow: hidden;
}

.page-about .about-cert__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
}

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

.page-about .about-cert__summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-about .about-cert__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.page-about .about-cert__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-about .about-cert__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #3c4a50;
  white-space: nowrap;
}

.page-about .about-cert__toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(11, 18, 32, 0.28);
  position: relative;
  flex: none;
}

.page-about .about-cert__toggle::before,
.page-about .about-cert__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.page-about .about-cert__toggle::before {
  width: 9px;
  height: 1px;
}

.page-about .about-cert__toggle::after {
  width: 1px;
  height: 9px;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}

.page-about .about-cert[open] .about-cert__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.page-about .about-cert[open] .about-cert__toggle {
  border-color: var(--gold-deep);
}

.page-about .about-cert__body {
  padding: 0 18px 18px;
}

.page-about .about-cert__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: #38474d;
}

/* ---------- 收束 ---------- */
.page-about .about-cta {
  padding-bottom: clamp(48px, 7vw, 96px);
}

.page-about .about-cta__inner {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54, 224, 208, 0.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(232, 180, 90, 0.16), transparent 58%),
    linear-gradient(150deg, var(--ink-2), var(--ink-3));
}

.page-about .about-cta__text .section-title {
  margin-bottom: 14px;
}

.page-about .about-cta__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
  max-width: 46ch;
}

.page-about .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-team__roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-about .about-cover__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 64px);
  }

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

  .page-about .about-timeline__list::before {
    left: 50%;
    transform: translateX(-0.5px);
  }

  .page-about .about-timeline__item {
    width: calc(50% - 38px);
    padding-left: 0;
    margin-bottom: 30px;
  }

  .page-about .about-timeline__item:nth-child(odd) {
    margin-right: auto;
  }

  .page-about .about-timeline__item:nth-child(even) {
    margin-left: auto;
  }

  .page-about .about-timeline__item::before {
    left: auto;
    right: -44px;
    top: 30px;
  }

  .page-about .about-timeline__item:nth-child(even)::before {
    right: auto;
    left: -44px;
  }

  .page-about .about-team__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: clamp(24px, 3vw, 44px);
  }

  .page-about .about-team__total {
    position: sticky;
    top: 120px;
  }

  .page-about .about-reach__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

  .page-about .about-credentials__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-about .about-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }

  .page-about .about-cta__actions {
    justify-content: flex-end;
  }
}

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

<main id="main-content" class="page-about">
  <div class="container about-crumbs">
    <ol class="breadcrumbs">
      <li><a href="/">首页</a></li>
      <li aria-current="page">关于竞博</li>
    </ol>
  </div>

  <section class="about-cover" aria-labelledby="about-title">
    <div class="container about-cover__grid">
      <div class="about-cover__text" data-reveal>
        <p class="eyebrow">品牌特刊 · 自 2016 年起</p>
        <h1 id="about-title" class="display">竞博CN：<br>把会员服务与设备适配讲清楚</h1>
        <p class="lede">从最初的品牌内容栏目走到今天，竞博CN 始终在做同一件事——在您上手、换机、查权益之前，先把该看懂的内容摆到眼前。三百六十余篇帮助文档与按月维护的版本说明，让这条从查阅到确认的路径走得通、也走得稳。</p>
        <p class="about-cover__quote">内容讲得清，用户才敢往下走。</p>
        <div class="about-cover__actions">
          <a class="btn btn--primary" href="/experience/">进入体验中心</a>
          <a class="btn btn--line" href="/information/">浏览资讯中心</a>
        </div>
      </div>
      <figure class="about-cover__figure" data-reveal style="--reveal-delay:140ms">
        <div class="media media--wide about-cover__media">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="山地等高线与数据流交织的抽象品牌主视觉">
        </div>
        <figcaption class="media__caption">山地数字枢纽 · 品牌主视觉</figcaption>
      </figure>
    </div>
  </section>

  <section class="about-timeline section" aria-labelledby="timeline-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">01 · 品牌沿革</span>
        <h2 id="timeline-title" class="section-title">六次推进，把查阅变成一条走得通的路</h2>
        <p class="prose">每个阶段解决的其实都是一个具体处境：资料零散时先建栏目，权益说不清时先理范围，换机没把握时先给核对入口。时间线并不长，但每一步都留在了今天还能用的功能里。</p>
      </header>

      <div class="about-timeline__band" data-reveal>
        <div class="media media--panorama about-timeline__media">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="纵向时间线与有机色块组合的抽象叙事图" loading="lazy" decoding="async">
        </div>
        <p class="media__caption">从栏目建设到换机确认路径的六个阶段</p>
      </div>

      <ol class="about-timeline__list">
        <li class="about-timeline__item" data-reveal>
          <span class="about-timeline__year">2016</span>
          <div class="about-timeline__plate plate">
            <h3>品牌内容站上线</h3>
            <p>第一批品牌与服务说明以静态栏目形式发布，用户第一次可以在同一处读完会员服务范围的基础介绍，不必再靠零散问询拼凑答案。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:90ms">
          <span class="about-timeline__year">2018</span>
          <div class="about-timeline__plate plate">
            <h3>会员服务体系建立</h3>
            <p>围绕权益查询、有效期与适用范围整理出第一套服务说明。会员在续用与换机之前有了可依赖的参照，问题问得少了，确认得快了。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:120ms">
          <span class="about-timeline__year">2020</span>
          <div class="about-timeline__plate plate">
            <h3>四类栏目落地成库</h3>
            <p>使用指南、会员权益、版本适配、品牌资料四类栏目成形，配套 28 个分类标签。上手的人找指南，查权益的人找说明，各走各的入口，互不打扰。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:150ms">
          <span class="about-timeline__year">2022</span>
          <div class="about-timeline__plate plate">
            <h3>帮助中心开门</h3>
            <p>42 篇权益类帮助文档覆盖设备更换、权益查询、有效期、范围说明、资料库权限与常见问题 6 类场景，摘要卡先给结论，展开再看细节。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:180ms">
          <span class="about-timeline__year">2024</span>
          <div class="about-timeline__plate plate">
            <h3>手机版本记录上线</h3>
            <p>6 条版本线开始按月维护，当前 v3.8 适配 42 款主流机型，首页加载比旧版快约 1.2 秒。设备跑不跑得动，翻一页就有答案。</p>
          </div>
        </li>
        <li class="about-timeline__item" data-reveal style="--reveal-delay:210ms">
          <span class="about-timeline__year">2025</span>
          <div class="about-timeline__plate plate">
            <h3>换机前双重确认成形</h3>
            <p>先看权益还覆盖不覆盖，再核设备适配不适配，两件事都确认完才进入下一步。原本最容易出岔子的环节，如今变得可预期。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-team section section--ink2" aria-labelledby="team-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">02 · 团队与分工</span>
        <h2 id="team-title" class="section-title">68 个人，四条职能线，对着同一件事负责</h2>
        <p class="prose">文档写得准、版本跟得上、页面看得懂，靠的不是一个人盯到底，而是四条职能线各自守住一段，衔接处再彼此接住。</p>
      </header>

      <div class="about-team__grid">
        <div class="about-team__total" data-reveal>
          <span class="about-team__figure">68</span>
          <span class="about-team__figure-label">人团队规模</span>
          <p>内容、技术、设计与运营并行推进，日常节奏像一座按班次运转的山地枢纽。</p>
        </div>
        <ul class="about-team__roles">
          <li class="about-role about-role--cyan" data-reveal style="--reveal-delay:60ms">
            <span class="about-role__num">24</span>
            <h3>内容与支持</h3>
            <p>撰写与整理帮助文档，接住会员咨询的第一棒，也负责把反复被问到的问题改写成条目。</p>
          </li>
          <li class="about-role about-role--gold" data-reveal style="--reveal-delay:110ms">
            <span class="about-role__num">18</span>
            <h3>技术</h3>
            <p>维护版本记录与适配数据，验证页面加载表现，让机型信息按时更新到位。</p>
          </li>
          <li class="about-role about-role--karst" data-reveal style="--reveal-delay:160ms">
            <span class="about-role__num">9</span>
            <h3>设计与品牌</h3>
            <p>把长文档拆成摘要卡与折叠详情，让信息在小屏上也读得下去，不用靠猜。</p>
          </li>
          <li class="about-role about-role--silver" data-reveal style="--reveal-delay:210ms">
            <span class="about-role__num">17</span>
            <h3>运营</h3>
            <p>跟进专题系列与栏目节奏，收集使用反馈，决定下一个周期先补哪一块内容。</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-quality section" aria-labelledby="quality-title">
    <div class="container">
      <header class="about-chapter-head" data-reveal>
        <span class="about-chapter-num">03 · 质量与服务</span>
        <h2 id="quality-title" class="section-title">一篇文档发出前，要过三道手</h2>
        <p class="prose">对用户而言，最怕的是照着说明做完却发现对不上。三道审核的存在，就是为了让打开文档的那一刻，看到的内容和实际能做的事对得上。</p>
      </header>

      <ol class="about-review">
        <li class="about-review__step" data-reveal>
          <span class="about-review__index">第一道</span>
          <h3>编辑把关</h3>
          <p>统一表述与结构，把长段落拆成能扫读的短句，摘要卡先给出结论，细节留在展开里。</p>
        </li>
        <li class="about-review__step" data-reveal style="--reveal-delay:90ms">
          <span class="about-review__index">第二道</span>
          <h3>业务确认</h3>
          <p>逐条比照会员服务的实际范围，确认权益覆盖、有效期与适用场景写得没有偏差。</p>
        </li>
        <li class="about-review__step" data-reveal style="--reveal-delay:150ms">
          <span class="about-review__index">第三道</span>
          <h3>合规检查</h3>
          <p>复核对外措辞与引用信息，避免出现让人误解的说法，也避免给出做不到的预期。</p>
        </li>
      </ol>

      <div class="about-cadence" data-reveal>
        <div class="about-cadence__item">
          <span class="about-cadence__value">18–25</span>
          <span class="about-cadence__label">篇文档 · 每月更新</span>
        </div>
        <div class="about-cadence__item">
          <span class="about-cadence__value about-cadence__value--gold">1–2</span>
          <span class="about-cadence__label">次版本记录维护 · 每月</span>
        </div>
        <div class="about-cadence__item">
          <span class="about-cadence__value">4</span>
          <span class="about-cadence__label">小时 · 工作日邮件平均首次回复</span>
        </div>
      </div>
    </div>
  </section>

  <section class="about-reach section section--ink2" aria-labelledby="reach-title">
    <div class="container about-reach__grid">
      <div class="about-reach__text" data-reveal>
        <span class="about-chapter-num">04 · 覆盖与伙伴</span>
        <h2 id="reach-title" class="section-title">线上能查，线下有人接</h2>
        <p class="prose">服务覆盖 31 个省级行政区，无论用户在哪个方向，遇到拿不准的地方都能找到同一条求助路径。设备检测与内容分发由 12 家合作服务商支撑，适配数据因此能跟得上机型的变化。</p>
        <p class="prose">这些伙伴负责把机型验证做扎实、把内容送到该到的地方。您看到的每一条适配结论背后，都有一次真机核对。</p>
        <a class="btn btn--line about-reach__link" href="/inquiry/">联系客服咨询</a>
      </div>
      <ul class="about-reach__stats" data-reveal style="--reveal-delay:120ms">
        <li>
          <span class="about-reach__num">31</span>
          <span class="about-reach__label">个省级行政区服务覆盖</span>
        </li>
        <li>
          <span class="about-reach__num">18<small>万</small></span>
          <span class="about-reach__label">累计注册会员</span>
        </li>
        <li>
          <span class="about-reach__num">4.6<small>万</small></span>
          <span class="about-reach__label">月活跃用户</span>
        </li>
        <li>
          <span class="about-reach__num about-reach__num--gold">12</span>
          <span class="about-reach__label">家设备检测与内容分发服务商</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="about-credentials section section--silver" aria-labelledby="cred-title">
    <div class="container about-credentials__grid">
      <div class="about-credentials__head" data-reveal>
        <span class="about-chapter-num about-chapter-num--dark">05 · 资质与登记</span>
        <h2 id="cred-title" class="section-title">做内容这件事，也有它的凭据</h2>
        <p class="prose">长期维护一套文档与版本记录，需要有自己趁手的工具与方法。团队累计取得 6 项软件著作权与 2 项界面设计登记，登记信息与站点备案一并向您公开。</p>
        <div class="media media--tall about-credentials__media">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="软件著作权与界面设计登记的抽象纹理图示，不含真实证书文字" loading="lazy" decoding="async">
        </div>
      </div>

      <div class="about-credentials__list" data-reveal style="--reveal-delay:100ms">
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">01</span>
            <span class="about-cert__name">软件著作权</span>
            <span class="about-cert__count">6 项</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>登记范围覆盖资料库检索、标签归类与版本记录管理等自研工具，支撑文档从撰写、审核到发布的完整流转。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">02</span>
            <span class="about-cert__name">界面设计登记</span>
            <span class="about-cert__count">2 项</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>针对文档阅读界面与标签导航的设计登记。作用很直接：让长文档在手机上也能被快速扫读，关键结论不用翻到底才看见。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">03</span>
            <span class="about-cert__name">站点备案</span>
            <span class="about-cert__count">已公开</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>站点备案号为 贵ICP备83638202号-5，指定地区为贵州。域名 jingbo-now.com.cn 为竞博CN 中国官网入口。</p>
          </div>
        </details>
        <details class="about-cert">
          <summary class="about-cert__summary">
            <span class="about-cert__index">04</span>
            <span class="about-cert__name">审核与维护机制</span>
            <span class="about-cert__count">长期运行</span>
            <span class="about-cert__toggle" aria-hidden="true"></span>
          </summary>
          <div class="about-cert__body">
            <p>文档从初稿到上线经过编辑、业务、合规三级审核，版本记录按月复核。机制本身也在被复盘，遇到新的使用问题就补进条目里。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="about-cta section" aria-labelledby="cta-title">
    <div class="container about-cta__inner" data-reveal>
      <div class="about-cta__text">
        <h2 id="cta-title" class="section-title">先看看资料库，再决定下一步</h2>
        <p>四类栏目、28 个分类标签、三百六十余篇文档，从上手到换机核对都能找到对应说明。想了解最近的更新节奏，也可以直接翻资讯中心的版本观察。</p>
      </div>
      <div class="about-cta__actions">
        <a class="btn btn--primary" href="/experience/">进入体验中心</a>
        <a class="btn btn--line" href="/information/">查看资讯中心</a>
        <a class="btn btn--ghost" href="/faqs/">翻帮助中心</a>
      </div>
    </div>
  </section>
</main>