.page-about {
  --about-rail: 196px;
  --about-node: 9px;
  --about-tl-pad: clamp(20px, 3vw, 32px);
  display: block;
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(24px, 4.4vw, 48px) clamp(44px, 6.4vw, 80px);
  background:
    radial-gradient(120% 95% at 6% -12%, rgba(51, 220, 198, 0.13), transparent 58%),
    radial-gradient(95% 85% at 104% 4%, rgba(226, 112, 58, 0.15), transparent 62%),
    var(--void-navy);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 70%;
  height: 180%;
  background: linear-gradient(102deg, transparent 44%, rgba(51, 220, 198, 0.1) 50%, rgba(226, 112, 58, 0.1) 57%, transparent 64%);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: -1;
}

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

.page-about .about-hero__eyebrow {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-about .about-hero__title {
  margin: 14px 0 0;
  font-family: var(--f-sans);
  font-size: var(--h-display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--bone-white);
  max-width: 17em;
}

.page-about .about-hero__lede {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  max-width: 50ch;
  color: var(--ash-gray);
}

.page-about .about-kpi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  margin-top: clamp(32px, 4.6vw, 52px);
  padding-top: clamp(24px, 3.2vw, 34px);
  border-top: 1px solid var(--line);
}

.page-about .about-kpi__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.page-about .about-kpi__value {
  font-family: var(--f-mono);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone-white);
}

.page-about .about-kpi__value em {
  font-style: normal;
  font-size: 0.46em;
  margin-left: 3px;
  color: var(--jbo-terracotta);
}

.page-about .about-kpi__label {
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  color: var(--ash-gray);
}

/* ---------- 主体双列 ---------- */

.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(44px, 6.4vw, 88px) clamp(64px, 9vw, 128px);
}

.page-about .about-stream {
  min-width: 0;
}

/* ---------- 章节 ---------- */

.page-about .about-section {
  scroll-margin-top: 104px;
}

.page-about .about-section + .about-section {
  margin-top: clamp(56px, 8vw, 112px);
}

.page-about .about-section__index {
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.18em;
  color: var(--moss-green);
}

.page-about .about-section__title {
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  font-family: var(--f-sans);
  font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--bone-white);
  max-width: 20em;
}

.page-about .about-text {
  margin: 0 0 1.35em;
  font-size: var(--t-18);
  line-height: 1.78;
  color: var(--bone-white);
  max-width: 68ch;
}

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

.page-about .about-section__lead {
  color: #e6e1d4;
  font-weight: 500;
}

.page-about .about-inline-link {
  color: var(--electric-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 220, 198, 0.42);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-about .about-inline-link:hover,
.page-about .about-inline-link:focus-visible {
  color: var(--bone-white);
  border-bottom-color: var(--jbo-terracotta);
}

.page-about .about-copy {
  color: var(--electric-cyan);
  cursor: pointer;
}

/* ---------- 图 ---------- */

.page-about .about-figure {
  margin: clamp(26px, 3.8vw, 42px) 0 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.page-about .about-figure__cap {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.05em;
  color: var(--ash-gray);
}

/* ---------- 团队列表 ---------- */

.page-about .about-list {
  list-style: none;
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3.2vw, 34px);
}

.page-about .about-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 22px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  transition: border-color 0.24s var(--ease);
}

.page-about .about-list__row:hover,
.page-about .about-list__row:focus-within {
  border-left-color: var(--electric-cyan);
}

.page-about .about-list__num {
  font-family: var(--f-mono);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jbo-terracotta);
}

.page-about .about-list__num span {
  font-size: 0.44em;
  margin-left: 3px;
  letter-spacing: 0;
  color: var(--ash-gray);
}

.page-about .about-list__body {
  min-width: 0;
}

.page-about .about-list__name {
  margin: 0 0 8px;
  font-size: var(--t-18);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bone-white);
}

.page-about .about-list__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ash-gray);
  max-width: 62ch;
}

/* ---------- 时间轴 ---------- */

.page-about .about-timeline {
  list-style: none;
  position: relative;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 4px 0 4px var(--about-tl-pad);
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--electric-cyan) 0%, var(--moss-green) 46%, var(--line) 100%);
  opacity: 0.6;
}

.page-about .about-timeline__item {
  position: relative;
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 0;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--about-tl-pad) - 4.5px);
  top: 7px;
  width: var(--about-node);
  height: var(--about-node);
  border-radius: 50%;
  background: var(--electric-cyan);
  box-shadow: 0 0 0 4px rgba(51, 220, 198, 0.14);
}

.page-about .about-timeline__item:nth-child(-n + 3)::before {
  background: var(--moss-green);
  box-shadow: 0 0 0 4px rgba(110, 139, 106, 0.18);
}

.page-about .about-timeline__item:last-child::before {
  background: var(--signal-magenta);
  box-shadow: 0 0 0 4px rgba(255, 61, 139, 0.16);
}

.page-about .about-timeline__stamp {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about .about-timeline__title {
  margin: 0 0 8px;
  font-size: var(--t-18);
  font-weight: 700;
  line-height: 1.4;
  color: var(--bone-white);
}

.page-about .about-timeline__meta {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ash-gray);
  max-width: 62ch;
}

/* ---------- 备案信息 ---------- */

.page-about .about-registry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(26px, 3.6vw, 40px);
}

.page-about .about-registry__item {
  min-width: 0;
}

.page-about .about-registry__key {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash-gray);
}

.page-about .about-registry__val {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bone-white);
  overflow-wrap: anywhere;
}

.page-about .about-registry__note {
  margin-top: clamp(26px, 3.6vw, 38px);
  font-size: 16px;
  color: var(--ash-gray);
}

/* ---------- 侧栏刻度导航 ---------- */

.page-about .about-rail {
  min-width: 0;
}

.page-about .about-rail__inner {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.page-about .about-rail__label {
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.2em;
  color: var(--ash-gray);
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-rail__list::-webkit-scrollbar {
  display: none;
}

.page-about .about-rail__item {
  flex: none;
}

.page-about .about-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--t-14);
  color: var(--ash-gray);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s var(--ease);
}

.page-about .about-rail__link:hover,
.page-about .about-rail__link:focus-visible {
  color: var(--bone-white);
}

.page-about .about-rail__tick {
  flex: none;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 0.22s var(--ease), background 0.22s var(--ease);
}

.page-about .about-rail__link:hover .about-rail__tick,
.page-about .about-rail__link:focus-visible .about-rail__tick {
  width: 30px;
  background: var(--electric-cyan);
}

/* ---------- 平板 ---------- */

@media (min-width: 640px) {
  .page-about .about-list__row {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    padding-left: 20px;
  }

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

@media (min-width: 760px) {
  .page-about .about-kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- 桌面 ---------- */

@media (min-width: 1024px) {
  .page-about .about-body {
    grid-template-columns: minmax(0, 1fr) var(--about-rail);
    gap: clamp(44px, 6vw, 88px);
    align-items: start;
  }

  .page-about .about-rail__inner {
    position: sticky;
    top: 96px;
    padding-left: 20px;
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__item + .about-rail__item {
    margin-top: 2px;
  }

  .page-about .about-hero__title {
    max-width: 15em;
  }
}

/* ---------- 动效收敛 ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-about .about-rail__link,
  .page-about .about-rail__tick,
  .page-about .about-list__row,
  .page-about .about-inline-link {
    transition: none;
  }
}
<<<END>>>

等等——我标记结束的时候出了点问题。输出格式要求是：先给 ``，再给 ``，然后就是内容。我又不能加 `<<<END>>>`，那个标记不在允许的集合里。

我得把它去掉。另外让我再检查一下 CSS 里面有没有用到没定义的变量：`--about-rail` 和 `--about-node` 还有 `--about-tl-pad`，这些都在 `.page-about` 里面声明了。其他像 `--void-navy`、`--line`、`--bone-white`、`--ash-gray`、`--electric-cyan`、`--jbo-terracotta`、`--moss-green`、`--signal-magenta`、`--f-sans`、`--f-mono`、`--t-12`、`--t-14`、`--t-18`、`--h-display`、`--radius`、`--shadow-soft`、`--ease` 这些都是站点里本来就有的全局变量，没问题。

再看一下别的地方有没有写出 `:root`、`html`、`body` 或者 `.site-header` 这种全局选择器——我确认这些都没有，所有选择器都老老实实地挂在了 `.page-about` 下面。

嗯，那我现在重新输出一版干净的内容。
<main id="main-content" class="page-about">

  <header class="about-hero">
    <div class="wrap about-hero__inner">
      <nav class="crumbs" aria-label="面包屑导航">
        <a class="crumbs__item" href="/">首页</a>
        <span class="crumbs__item" aria-current="page">品牌概况</span>
      </nav>

      <p class="eyebrow about-hero__eyebrow">JBO BRANDHUB · 中文品牌站</p>

      <h1 class="about-hero__title">把大屏指南、手机收藏与版本说明，收进同一个品牌入口</h1>

      <p class="lede about-hero__lede">2019 年上线至今，竞博网页把大屏测试版的操作步骤、家庭端常用栏目和品牌站的版本说明放在同一条检索路径上。你在客厅大屏试功能、在手机上存栏目、替新同事确认版本号，都能在 jbo-brandhub.com.cn 上直接走完。</p>

      <div class="about-kpi">
        <div class="about-kpi__cell">
          <span class="about-kpi__value">2019</span>
          <span class="about-kpi__label">站点上线</span>
        </div>
        <div class="about-kpi__cell">
          <span class="about-kpi__value">42<em>万</em></span>
          <span class="about-kpi__label">累计注册访客</span>
        </div>
        <div class="about-kpi__cell">
          <span class="about-kpi__value">3,200</span>
          <span class="about-kpi__label">企业账号</span>
        </div>
        <div class="about-kpi__cell">
          <span class="about-kpi__value">128<em>款</em></span>
          <span class="about-kpi__label">覆盖适配环境</span>
        </div>
      </div>
    </div>
  </header>

  <div class="wrap about-body">

    <div class="about-stream">

      <section class="about-section" id="about-doing" data-spy>
        <p class="about-section__index">01 / WHAT WE DO</p>
        <h2 class="about-section__title">竞博网页在解决什么问题</h2>

        <p class="about-text about-section__lead">你手上可能不止一台设备。客厅的大屏要试测试版功能，手机里存着几十个天天要看的栏目，办公室的电脑还得替新同事确认现在究竟是哪个版本。过去这三件事分散在三个地方，现在它们共用一套栏目编号和检索方式，找东西不用先想“该去哪一页”。</p>

        <p class="about-text">栏目库现有 1,860 个可收藏栏目，按 12 个主题分类组织，从设备调试、网络配置到栏目权限都有对应的说明页。站内检索入口全站常驻，输入栏目名、版本号或者一台机型的名字都能直接命中，静态索引响应稳定在 300 毫秒以内。内容覆盖 26 个省级区域的实际使用场景，高峰期单日检索请求约 14 万次。</p>

        <p class="about-text">想了解每条使用路径具体能做什么，可以到<a class="about-inline-link" href="/services/">服务与功能</a>看完整拆解；版本层面的变化，都记在<a class="about-inline-link" href="/press/">更新动态</a>里。</p>
      </section>

      <section class="about-section" id="about-origin" data-spy>
        <p class="about-section__index">02 / HOW IT GREW</p>
        <h2 class="about-section__title">栏目体系是怎么一步步拆开的</h2>

        <p class="about-text about-section__lead">竞博网页最早只有一列按时间往下排的栏目页，所有内容混在一起。用得久了，问题开始分叉：有人在大屏上翻不到测试版的操作顺序，有人换了手机发现收藏全部消失，还有人连自己装的是哪个版本都说不清。</p>

        <p class="about-text">三种抱怨对应三种改法。大屏与测试版相关的内容被固定到首页第二条位置，点开就是按步骤写的操作指南，不需要先去找目录。手机端改成以家庭本地收藏为主，单个账号最多保存 200 个栏目，本地缓存保留 30 天，换设备登录后收藏跟着走。电脑端补上入门、进阶、排障三层版本说明，覆盖 v4.0 至 <span class="mono about-copy" data-copy="v6.3">v6.3</span> 共 10 个主要版本，对品牌站还不熟的人默认从“先认版本”开始。</p>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="分段点亮的时间轴光带与节点标记，表现栏目体系逐年演进" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap">栏目体系演进：从单列排序到三条并行路径</figcaption>
        </figure>

        <p class="about-text">三条路径能同时站住，靠的是全站统一的检索入口。它不挑输入方式，栏目名、版本号、适配机型随便哪一种都能作为起点，这也是后来家庭收藏和企业取数能接上来的前提。</p>
      </section>

      <section class="about-section" id="about-team" data-spy>
        <p class="about-section__index">03 / TEAM</p>
        <h2 class="about-section__title">68 人的维护团队怎么分工</h2>

        <p class="about-text about-section__lead">指南要跟着版本改，清单要跟着机型动，收藏同步和导出申请也得有人当天接住。竞博网页的内容与技术支持团队共 68 人，分四类岗位常年运转。</p>

        <ul class="about-list">
          <li class="about-list__row" data-search-item="内容编辑团队" data-search-terms="内容编辑 栏目描述 版本说明 知识条目 24 人" data-search-href="/press/" data-search-kind="团队">
            <span class="about-list__num">24<span>人</span></span>
            <div class="about-list__body">
              <h3 class="about-list__name">内容编辑</h3>
              <p class="about-list__desc">写栏目描述、维护版本说明、整理知识条目，每 6 周一个迭代周期同步一次改动。</p>
            </div>
          </li>
          <li class="about-list__row" data-search-item="适配测试团队" data-search-terms="适配测试 大屏 手机 桌面端 走查 季度复核 19 人" data-search-href="/services/" data-search-kind="团队">
            <span class="about-list__num">19<span>人</span></span>
            <div class="about-list__body">
              <h3 class="about-list__name">适配测试</h3>
              <p class="about-list__desc">在大屏、手机和桌面端逐项走查栏目路径，按季度复核适配清单里的每一批机型。</p>
            </div>
          </li>
          <li class="about-list__row" data-search-item="用户支持团队" data-search-terms="用户支持 收藏同步 版本识别 导出申请 15 人" data-search-href="/find-us/" data-search-kind="团队">
            <span class="about-list__num">15<span>人</span></span>
            <div class="about-list__body">
              <h3 class="about-list__name">用户支持</h3>
              <p class="about-list__desc">处理跨设备同步失败、版本识别和批量导出申请，工作日 9:00 至 18:00 有人值守。</p>
            </div>
          </li>
          <li class="about-list__row" data-search-item="产品与工程团队" data-search-terms="产品与工程 检索索引 同步机制 自查条目 10 人" data-search-href="/knowledge/" data-search-kind="团队">
            <span class="about-list__num">10<span>人</span></span>
            <div class="about-list__body">
              <h3 class="about-list__name">产品与工程</h3>
              <p class="about-list__desc">维护检索索引与收藏同步机制，把反复出现的支持问题沉淀成可自助查阅的条目。</p>
            </div>
          </li>
        </ul>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="资料墙与屏幕阵列的抽象几何构成，示意内容团队的日常维护工作" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap">每个迭代周期，四类岗位按同一份清单交接</figcaption>
        </figure>
      </section>

      <section class="about-section" id="about-ecosystem" data-spy>
        <p class="about-section__index">04 / ECOSYSTEM</p>
        <h2 class="about-section__title">适配不是一次性动作</h2>

        <p class="about-text about-section__lead">系统更新、分辨率调整、遥控交互改版，任何一个环节变动都会让指南里的某一步失效。竞博网页与 15 家终端与显示方案商保持适配协作，机型和系统版本的变化通过协作渠道同步过来，适配环境按季度复核一次，最新一批清单更新至 6 月。</p>

        <p class="about-text">对使用者来说，这件事的好处很直接：设备只要在清单里，对应的栏目路径、操作步骤和常见故障处理就能查到现成的；暂时不在清单里的机型，也可以通过<a class="about-inline-link" href="/find-us/">找到我们</a>提交给适配团队评估。</p>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="多设备节点相连的抽象网络图，苔绿与电光青描边，表现适配协作生态" loading="lazy" decoding="async">
          <figcaption class="about-figure__cap">15 家方案商、128 款环境，按季度同步一轮</figcaption>
        </figure>
      </section>

      <section class="about-section" id="about-rhythm" data-spy>
        <p class="about-section__index">05 / RHYTHM</p>
        <h2 class="about-section__title">六个迭代年度做了什么</h2>

        <p class="about-text about-section__lead">站点按 6 周一个迭代周期发布版本说明，当前处于第六个迭代年度。下面这些节点，是每一年留下的一件实事。</p>

        <ol class="about-timeline">
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 01</span>
            <h3 class="about-timeline__title">站点上线，内容按时间排列</h3>
            <p class="about-timeline__meta">第一版把所有栏目页集中到一处，解决早期内容分散、找不到入口的问题。</p>
          </li>
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 02</span>
            <h3 class="about-timeline__title">版本说明成型，分出入门、进阶、排障</h3>
            <p class="about-timeline__meta">新手路径默认从版本识别开始，看不懂版本号的人也能顺着往下走。</p>
          </li>
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 03</span>
            <h3 class="about-timeline__title">站内检索入口全站常驻</h3>
            <p class="about-timeline__meta">支持栏目名、版本号、适配机型三类输入，找内容不再依赖目录记忆。</p>
          </li>
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 04</span>
            <h3 class="about-timeline__title">家庭本地收藏与跨设备同步上线</h3>
            <p class="about-timeline__meta">单个账号最多保存 200 个栏目，本地缓存保留 30 天，换设备后收藏不丢。</p>
          </li>
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 05</span>
            <h3 class="about-timeline__title">企业导出开放</h3>
            <p class="about-timeline__meta">支持 CSV、XLSX、JSON 三种格式，单次最多导出 5 万条记录，常规处理在三个工作日内完成。</p>
          </li>
          <li class="about-timeline__item" data-reveal>
            <span class="about-timeline__stamp">YEAR 06</span>
            <h3 class="about-timeline__title">适配清单进入季度复核</h3>
            <p class="about-timeline__meta">检索与收藏的可用性从 2023 年起连续三个迭代年度完成复核，协作方案商稳定在 15 家。</p>
          </li>
        </ol>
      </section>

      <section class="about-section" id="about-registry" data-spy>
        <p class="about-section__index">06 / REGISTRY</p>
        <h2 class="about-section__title">运营主体与备案信息</h2>

        <p class="about-text about-section__lead">下面这些信息对外公开，方便你在商务沟通前先做一次基本确认。品牌的运营主体设在河南，品牌中心位于郑州市金水区，来访需要提前预约。</p>

        <div class="about-registry">
          <div class="about-registry__item">
            <span class="about-registry__key">运营主体所在地</span>
            <p class="about-registry__val">河南省</p>
          </div>
          <div class="about-registry__item">
            <span class="about-registry__key">备案号</span>
            <p class="about-registry__val mono">豫ICP备84898049号-4</p>
          </div>
          <div class="about-registry__item">
            <span class="about-registry__key">品牌中心地址</span>
            <p class="about-registry__val">河南省郑州市金水区中州大道1188号竞博品牌中心A座12层</p>
          </div>
          <div class="about-registry__item">
            <span class="about-registry__key">客服邮箱</span>
            <p class="about-registry__val mono">info@jbo-brandhub.com.cn</p>
          </div>
          <div class="about-registry__item">
            <span class="about-registry__key">业务咨询电话</span>
            <p class="about-registry__val mono">18934883135</p>
          </div>
          <div class="about-registry__item">
            <span class="about-registry__key">回复时段</span>
            <p class="about-registry__val">邮箱与电话在工作日 9:00 至 18:00 有人处理，来访需提前预约。</p>
          </div>
        </div>

        <p class="about-text about-registry__note">企业客户需要批量取数，请在邮件里附上栏目路径与版本号，交付流程和材料清单一并写在<a class="about-inline-link" href="/find-us/">找到我们</a>。</p>
      </section>

    </div>

    <aside class="about-rail" aria-label="本页章节导航">
      <div class="about-rail__inner">
        <p class="about-rail__label">CONTENTS</p>
        <ol class="about-rail__list">
          <li class="about-rail__item"><a class="about-rail__link" href="#about-doing"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">在做的事</span></a></li>
          <li class="about-rail__item"><a class="about-rail__link" href="#about-origin"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">体系演进</span></a></li>
          <li class="about-rail__item"><a class="about-rail__link" href="#about-team"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">团队分工</span></a></li>
          <li class="about-rail__item"><a class="about-rail__link" href="#about-ecosystem"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">适配协作</span></a></li>
          <li class="about-rail__item"><a class="about-rail__link" href="#about-rhythm"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">迭代节奏</span></a></li>
          <li class="about-rail__item"><a class="about-rail__link" href="#about-registry"><span class="about-rail__tick" aria-hidden="true"></span><span class="about-rail__name">备案信息</span></a></li>
        </ol>
      </div>
    </aside>

  </div>

</main>

.page-about {
  --about-rail: 196px;
  --about-node: 9px;
  --about-tl-pad: clamp(20px, 3vw, 32px);
  display: block;
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(24px, 4.4vw, 48px) clamp(44px, 6.4vw, 80px);
  background:
    radial-gradient(120% 95% at 6% -12%, rgba(51, 220, 198, 0.13), transparent 58%),
    radial-gradient(95% 85% at 104% 4%, rgba(226, 112, 58, 0.15), transparent 62%),
    var(--void-navy);
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 70%;
  height: 180%;
  background: linear-gradient(102deg, transparent 44%, rgba(51, 220, 198, 0.1) 50%, rgba(226, 112, 58, 0.1) 57%, transparent 64%);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: -1;
}

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

.page-about .about-hero__eyebrow {
  margin: clamp(20px, 3vw, 32px) 0 0;
}

.page-about .about-hero__title {
  margin: 14px 0 0;
  font-family: var(--f-sans);
  font-size: var(--h-display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--bone-white);
  max-width: 17em;
}

.page-about .about-hero__lede {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  max-width: 50ch;
  color: var(--ash-gray);
}

.page-about .about-kpi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  margin-top: clamp(32px, 4.6vw, 52px);
  padding-top: clamp(24px, 3.2vw, 34px);
  border-top: 1px solid var(--line);
}

.page-about .about-kpi__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.page-about .about-kpi__value {
  font-family: var(--f-mono);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone-white);
}

.page-about .about-kpi__value em {
  font-style: normal;
  font-size: 0.46em;
  margin-left: 3px;
  color: var(--jbo-terracotta);
}

.page-about .about-kpi__label {
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  color: var(--ash-gray);
}

/* ---------- 主体双列 ---------- */

.page-about .about-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(44px, 6.4vw, 88px) clamp(64px, 9vw, 128px);
}

.page-about .about-stream {
  min-width: 0;
}

/* ---------- 章节 ---------- */

.page-about .about-section {
  scroll-margin-top: 104px;
}

.page-about .about-section + .about-section {
  margin-top: clamp(56px, 8vw, 112px);
}

.page-about .about-section__index {
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.18em;
  color: var(--moss-green);
}

.page-about .about-section__title {
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  font-family: var(--f-sans);
  font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--bone-white);
  max-width: 20em;
}

.page-about .about-text {
  margin: 0 0 1.35em;
  font-size: var(--t-18);
  line-height: 1.78;
  color: var(--bone-white);
  max-width: 68ch;
}

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

.page-about .about-section__lead {
  color: #e6e1d4;
  font-weight: 500;
}

.page-about .about-inline-link {
  color: var(--electric-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 220, 198, 0.42);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.page-about .about-inline-link:hover,
.page-about .about-inline-link:focus-visible {
  color: var(--bone-white);
  border-bottom-color: var(--jbo-terracotta);
}

.page-about .about-copy {
  color: var(--electric-cyan);
  cursor: pointer;
}

/* ---------- 图 ---------- */

.page-about .about-figure {
  margin: clamp(26px, 3.8vw, 42px) 0 0;
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.page-about .about-figure__cap {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.05em;
  color: var(--ash-gray);
}

/* ---------- 团队列表 ---------- */

.page-about .about-list {
  list-style: none;
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3.2vw, 34px);
}

.page-about .about-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 22px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  transition: border-color 0.24s var(--ease);
}

.page-about .about-list__row:hover,
.page-about .about-list__row:focus-within {
  border-left-color: var(--electric-cyan);
}

.page-about .about-list__num {
  font-family: var(--f-mono);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jbo-terracotta);
}

.page-about .about-list__num span {
  font-size: 0.44em;
  margin-left: 3px;
  letter-spacing: 0;
  color: var(--ash-gray);
}

.page-about .about-list__body {
  min-width: 0;
}

.page-about .about-list__name {
  margin: 0 0 8px;
  font-size: var(--t-18);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bone-white);
}

.page-about .about-list__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ash-gray);
  max-width: 62ch;
}

/* ---------- 时间轴 ---------- */

.page-about .about-timeline {
  list-style: none;
  position: relative;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 4px 0 4px var(--about-tl-pad);
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--electric-cyan) 0%, var(--moss-green) 46%, var(--line) 100%);
  opacity: 0.6;
}

.page-about .about-timeline__item {
  position: relative;
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 0;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--about-tl-pad) - 4.5px);
  top: 7px;
  width: var(--about-node);
  height: var(--about-node);
  border-radius: 50%;
  background: var(--electric-cyan);
  box-shadow: 0 0 0 4px rgba(51, 220, 198, 0.14);
}

.page-about .about-timeline__item:nth-child(-n + 3)::before {
  background: var(--moss-green);
  box-shadow: 0 0 0 4px rgba(110, 139, 106, 0.18);
}

.page-about .about-timeline__item:last-child::before {
  background: var(--signal-magenta);
  box-shadow: 0 0 0 4px rgba(255, 61, 139, 0.16);
}

.page-about .about-timeline__stamp {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.page-about .about-timeline__title {
  margin: 0 0 8px;
  font-size: var(--t-18);
  font-weight: 700;
  line-height: 1.4;
  color: var(--bone-white);
}

.page-about .about-timeline__meta {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ash-gray);
  max-width: 62ch;
}

/* ---------- 备案信息 ---------- */

.page-about .about-registry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(26px, 3.6vw, 40px);
}

.page-about .about-registry__item {
  min-width: 0;
}

.page-about .about-registry__key {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash-gray);
}

.page-about .about-registry__val {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bone-white);
  overflow-wrap: anywhere;
}

.page-about .about-registry__note {
  margin-top: clamp(26px, 3.6vw, 38px);
  font-size: 16px;
  color: var(--ash-gray);
}

/* ---------- 侧栏刻度导航 ---------- */

.page-about .about-rail {
  min-width: 0;
}

.page-about .about-rail__inner {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.page-about .about-rail__label {
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: var(--t-12);
  letter-spacing: 0.2em;
  color: var(--ash-gray);
}

.page-about .about-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.page-about .about-rail__list::-webkit-scrollbar {
  display: none;
}

.page-about .about-rail__item {
  flex: none;
}

.page-about .about-rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--t-14);
  color: var(--ash-gray);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s var(--ease);
}

.page-about .about-rail__link:hover,
.page-about .about-rail__link:focus-visible {
  color: var(--bone-white);
}

.page-about .about-rail__tick {
  flex: none;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 0.22s var(--ease), background 0.22s var(--ease);
}

.page-about .about-rail__link:hover .about-rail__tick,
.page-about .about-rail__link:focus-visible .about-rail__tick {
  width: 30px;
  background: var(--electric-cyan);
}

/* ---------- 平板 ---------- */

@media (min-width: 640px) {
  .page-about .about-list__row {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    padding-left: 20px;
  }

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

@media (min-width: 760px) {
  .page-about .about-kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- 桌面 ---------- */

@media (min-width: 1024px) {
  .page-about .about-body {
    grid-template-columns: minmax(0, 1fr) var(--about-rail);
    gap: clamp(44px, 6vw, 88px);
    align-items: start;
  }

  .page-about .about-rail__inner {
    position: sticky;
    top: 96px;
    padding-left: 20px;
  }

  .page-about .about-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-about .about-rail__item + .about-rail__item {
    margin-top: 2px;
  }

  .page-about .about-hero__title {
    max-width: 15em;
  }
}

/* ---------- 动效收敛 ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-about .about-rail__link,
  .page-about .about-rail__tick,
  .page-about .about-list__row,
  .page-about .about-inline-link {
    transition: none;
  }
}