.page-about {
  --about-radius-organic: 26px 96px 26px 26px;
  --about-hairline: 1px solid var(--line-light);
  --about-hairline-dark: 1px solid var(--line-dark);
}

/* ---------- hero ---------- */
.page-about .about-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 58%),
    radial-gradient(90% 80% at 4% 100%, rgba(124, 92, 255, 0.16) 0%, transparent 62%),
    var(--ink);
  color: var(--mist);
  padding: clamp(26px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
}

.page-about .about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 48px);
  margin-top: clamp(20px, 4vw, 36px);
}

.page-about .about-hero-copy .mono-label {
  display: inline-block;
  color: var(--cyan);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.page-about .about-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 8.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--mist);
}

.page-about .about-hero-title br {
  display: none;
}

.page-about .about-hero-lead {
  max-width: 54ch;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.8);
  margin: 0 0 26px;
}

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

.page-about .about-hero-index {
  border: var(--about-hairline-dark);
  border-radius: var(--radius-m);
  background: rgba(14, 42, 71, 0.66);
  padding: 20px 20px 16px;
  align-self: start;
}

.page-about .about-index-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin: 0 0 14px;
}

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

.page-about .about-index-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-s);
  color: rgba(244, 247, 250, 0.86);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.page-about .about-index-list a:hover,
.page-about .about-index-list a:focus-visible {
  background: rgba(34, 211, 238, 0.12);
  color: var(--mist);
}

.page-about .about-index-num {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--orange);
  letter-spacing: 0.06em;
}

.page-about .about-index-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: var(--about-hairline-dark);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 247, 250, 0.55);
}

.page-about .about-hero-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: clamp(28px, 5vw, 46px);
  padding-top: 16px;
  border-top: var(--about-hairline-dark);
}

.page-about .about-strip-cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(244, 247, 250, 0.62);
  padding: 4px 10px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 999px;
}

.page-about .about-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(124, 255, 178, 0.16);
  animation: about-pulse 2.4s var(--ease) infinite;
}

.page-about .about-strip-note {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 247, 250, 0.55);
}

@keyframes about-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

/* ---------- shared heading bits ---------- */
.page-about .section-head .mono-label {
  display: inline-block;
  color: var(--cyan-ink);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.page-about .section--dark .section-head .mono-label,
.page-about .section--panel .section-head .mono-label {
  color: var(--cyan);
}

.page-about .section-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 5.2vw, 48px);
  line-height: 1.12;
  margin: 0 0 14px;
}

.page-about .section-lead {
  max-width: 56ch;
  margin: 0;
  line-height: 1.75;
  font-size: clamp(15px, 2.2vw, 17px);
}

.page-about .section--dark .section-lead,
.page-about .section--panel .section-lead {
  color: rgba(244, 247, 250, 0.76);
}

/* ---------- timeline ---------- */
.page-about .about-timeline-figure {
  margin: clamp(24px, 4vw, 40px) 0 clamp(28px, 4vw, 44px);
  aspect-ratio: 14 / 9;
  border-radius: var(--about-radius-organic);
  overflow: hidden;
  background: var(--panel);
}

.page-about .about-timeline-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(34, 211, 238, 0.28) 55%, rgba(255, 138, 61, 0.4) 100%);
}

.page-about .timeline-node {
  position: relative;
  padding-left: 36px;
}

.page-about .timeline-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mist);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

.page-about .timeline-node:last-child::before {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.16);
}

.page-about .timeline-year {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan-ink);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  margin-bottom: 10px;
}

.page-about .timeline-node:last-child .timeline-year {
  color: #a85b18;
  background: rgba(255, 138, 61, 0.16);
}

.page-about .timeline-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.8vw, 21px);
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ink);
}

.page-about .timeline-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--slate);
  max-width: 62ch;
}

/* ---------- stats ---------- */
.page-about .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(24px, 4vw, 38px);
}

.page-about .stat-cell {
  position: relative;
  padding: 20px 18px 22px;
  border-radius: var(--radius-m);
  border: var(--about-hairline-dark);
  background: rgba(18, 57, 94, 0.42);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.page-about .stat-cell--accent {
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.18) 0%, rgba(14, 42, 71, 0.5) 62%);
  border-color: rgba(34, 211, 238, 0.42);
}

.page-about .stat-cell--wide {
  grid-column: 1 / -1;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 138, 61, 0.2) 0%, transparent 60%),
    rgba(18, 57, 94, 0.42);
}

.page-about .stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: clamp(34px, 8vw, 62px);
  line-height: 1;
  color: var(--mist);
  display: block;
}

.page-about .stat-cell--accent .stat-num {
  color: var(--cyan);
}

.page-about .stat-cell--wide .stat-num {
  color: var(--orange);
}

.page-about .stat-unit {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 4px;
  color: rgba(244, 247, 250, 0.72);
}

.page-about .stat-cell--accent .stat-unit,
.page-about .stat-cell--wide .stat-unit {
  color: inherit;
  opacity: 0.7;
}

.page-about .stat-label {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 250, 0.86);
  margin-top: 6px;
}

.page-about .stat-note {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(244, 247, 250, 0.6);
  max-width: 46ch;
}

/* ---------- hub ---------- */
.page-about .hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
}

.page-about .hub-lead {
  max-width: 54ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.78;
  color: var(--slate);
  margin: 0 0 26px;
}

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

.page-about .hub-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 4px;
  border-top: var(--about-hairline);
}

.page-about .hub-item:last-child {
  border-bottom: var(--about-hairline);
}

.page-about .hub-item-num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cyan-ink);
  padding-top: 4px;
}

.page-about .hub-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 6px;
  color: var(--ink);
}

.page-about .hub-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--slate);
  max-width: 56ch;
}

.page-about .hub-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-about .about-hub-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--panel);
}

.page-about .about-hub-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .hub-anchor {
  padding: 18px 18px 20px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(34, 211, 238, 0.34);
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.1) 0%, rgba(244, 247, 250, 0.6) 70%);
}

.page-about .hub-anchor .mono-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan-ink);
  margin-bottom: 8px;
}

.page-about .hub-anchor-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}

.page-about .hub-anchor-note {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--slate);
}

/* ---------- team ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 36px);
  align-items: start;
  margin-top: clamp(22px, 4vw, 34px);
}

.page-about .about-team-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--about-radius-organic);
  overflow: hidden;
  background: var(--ink);
}

.page-about .about-team-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-about .team-item {
  border-top: var(--about-hairline-dark);
}

.page-about .team-item:last-child {
  border-bottom: var(--about-hairline-dark);
}

.page-about .team-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 2px;
  cursor: pointer;
  color: var(--mist);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 19px);
  position: relative;
  transition: color 0.25s var(--ease);
}

.page-about .team-trigger::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan);
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease);
}

.page-about .team-trigger[aria-expanded="true"]::after {
  content: "–";
  transform: rotate(180deg);
}

.page-about .team-trigger:hover,
.page-about .team-trigger:focus-visible {
  color: var(--cyan);
}

.page-about .team-count {
  margin-left: auto;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--orange);
  font-weight: 500;
}

.page-about .team-panel {
  padding: 0 2px 18px;
}

.page-about .team-panel p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.74);
  max-width: 60ch;
}

.page-about .team-footnote {
  margin: 18px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: rgba(244, 247, 250, 0.5);
}

/* ---------- enterprise ---------- */
.page-about .enterprise-rail {
  list-style: none;
  margin: clamp(24px, 4vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  counter-reset: about-step;
}

.page-about .enterprise-rail .step-node {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-m);
  background: var(--mist);
  border: var(--about-hairline);
  box-shadow: 0 1px 0 rgba(7, 26, 47, 0.04);
}

.page-about .enterprise-rail .step-node[data-state="done"] {
  border-left: 3px solid var(--cyan);
}

.page-about .enterprise-rail .step-node[aria-selected="true"] {
  background: linear-gradient(150deg, rgba(255, 138, 61, 0.16) 0%, var(--mist) 62%);
  border-color: rgba(255, 138, 61, 0.5);
  border-left: 3px solid var(--orange);
}

.page-about .enterprise-rail .step-num {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--cyan-ink);
}

.page-about .enterprise-rail .step-node[aria-selected="true"] .step-num {
  color: #b2591a;
}

.page-about .enterprise-rail .step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
}

.page-about .enterprise-rail .step-desc {
  font-size: 14px;
  line-height: 1.72;
  color: var(--slate);
  max-width: 42ch;
}

.page-about .enterprise-note {
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-l);
  background: var(--panel);
  color: var(--mist);
  display: grid;
  gap: 12px;
  justify-items: start;
}

.page-about .enterprise-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.82);
  max-width: 62ch;
}

/* ---------- principles ---------- */
.page-about .principle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(24px, 4vw, 38px);
}

.page-about .principle-card {
  padding: 24px 22px 26px;
  border-radius: var(--radius-m);
  border: var(--about-hairline-dark);
  background: linear-gradient(165deg, rgba(124, 92, 255, 0.14) 0%, rgba(14, 42, 71, 0.34) 56%);
}

.page-about .principle-card:nth-child(2) {
  background: linear-gradient(165deg, rgba(34, 211, 238, 0.14) 0%, rgba(14, 42, 71, 0.34) 56%);
}

.page-about .principle-card:nth-child(3) {
  background: linear-gradient(165deg, rgba(255, 200, 87, 0.14) 0%, rgba(14, 42, 71, 0.34) 56%);
}

.page-about .principle-card:nth-child(4) {
  background: linear-gradient(165deg, rgba(124, 255, 178, 0.12) 0%, rgba(14, 42, 71, 0.34) 56%);
}

.page-about .principle-num {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 12px;
}

.page-about .principle-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--mist);
}

.page-about .principle-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.72);
  max-width: 44ch;
}

/* ---------- closing cta ---------- */
.page-about .about-cta {
  margin-top: clamp(30px, 5vw, 52px);
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius-l);
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.16) 0%, rgba(255, 138, 61, 0.14) 100%);
  border: var(--about-hairline-dark);
  display: grid;
  gap: 20px;
}

.page-about .about-cta-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 4.4vw, 36px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--mist);
}

.page-about .about-cta-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 247, 250, 0.78);
  max-width: 52ch;
}

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

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .page-about .stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }

  .page-about .stat-cell {
    grid-column: span 2;
    padding: 24px 22px 26px;
  }

  .page-about .stat-cell--accent {
    grid-column: span 4;
  }

  .page-about .stat-cell--wide {
    grid-column: span 6;
  }

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

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

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
  }

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

@media (min-width: 960px) {
  .page-about .about-hero-title br {
    display: inline;
  }

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

  .page-about .about-hero-index {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding: 24px 22px 18px;
  }

  .page-about .timeline {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 22px;
  }

  .page-about .timeline::before {
    left: 21px;
  }

  .page-about .timeline-node {
    padding-left: 52px;
  }

  .page-about .timeline-node::before {
    left: 14px;
    width: 16px;
    height: 16px;
  }

  .page-about .hub-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
  }

  .page-about .hub-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .team-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
  }

  .page-about .about-team-figure {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-strip-dot {
    animation: none;
  }

  .page-about .team-trigger::after,
  .page-about .about-index-list a {
    transition: none;
  }
}
<<<END>>>
<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="container">
      <nav class="breadcrumbs breadcrumbs--dark" aria-label="面包屑">
        <ol>
          <li class="crumb"><a href="/">首页</a></li>
          <li class="crumb-sep" aria-hidden="true">/</li>
          <li class="crumb" aria-current="page">品牌总览</li>
        </ol>
      </nav>

      <div class="about-hero-grid">
        <div class="about-hero-copy" data-reveal>
          <span class="mono-label">品牌档案 · 自2016年起步</span>
          <h1 class="about-hero-title">把会员服务<br>做成一件长期可靠的事</h1>
          <p class="about-hero-lead">MANBET 从网页端会员入口起步，九年里把小屏操作、权益查看、企业查页和版本说明一件件理顺。同一套账户可以在手机、平板和网页之间接着用，企业客户也能在会员中心切换身份，完成临时查页后顺着原路返回。</p>
          <div class="about-hero-actions">
            <a class="btn btn-primary" href="/app-download/">看多端与会员服务</a>
            <a class="btn btn-ghost" href="#record">跳到运营数据</a>
          </div>
        </div>

        <aside class="about-hero-index" data-reveal aria-label="阅读索引">
          <p class="about-index-title mono">INDEX / 六个切面</p>
          <ol class="about-index-list">
            <li><a href="#history"><span class="about-index-num mono">01</span><span>九年之间的六次推进</span></a></li>
            <li><a href="#record"><span class="about-index-num mono">02</span><span>服务规模与服务半径</span></a></li>
            <li><a href="#hub"><span class="about-index-num mono">03</span><span>会员中心里的四条主线</span></a></li>
            <li><a href="#team"><span class="about-index-num mono">04</span><span>八十人怎么分工</span></a></li>
            <li><a href="#enterprise"><span class="about-index-num mono">05</span><span>企业身份切换的路径</span></a></li>
            <li><a href="#principles"><span class="about-index-num mono">06</span><span>长期服务准则</span></a></li>
          </ol>
          <p class="about-index-foot mono">版本说明 · 今年3月</p>
        </aside>
      </div>

      <div class="about-hero-strip" aria-hidden="true">
        <span class="about-strip-cell">账户安全</span>
        <span class="about-strip-cell">跨端体验</span>
        <span class="about-strip-cell">企业协作</span>
        <span class="about-strip-cell">服务支持</span>
        <span class="about-strip-dot status-dot"></span>
        <span class="about-strip-note mono">4 类 18 项会员服务清单</span>
      </div>
    </div>
  </section>

  <section class="section section--mist" id="history">
    <div class="container">
      <div class="section-head">
        <span class="mono-label">01 / 发展历程</span>
        <h2 class="section-title">从2016年到今天</h2>
        <p class="section-lead">每隔一段时间，平台会把一个原本零散的动作收进同一条路径：先收拢登录入口，再统一小屏流程，后来把企业身份切换也接了进来。下面六个节点记录的就是这条路径被逐步理顺的过程。</p>
      </div>

      <figure class="about-timeline-figure media-frame media-frame--wide">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="抽象时间轴与刻度线，青色与橙色节点依次标记服务演进的六个阶段">
      </figure>

      <ol class="timeline">
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2016</span>
          <div class="timeline-body">
            <h3 class="timeline-title">中文服务启动，网页端先开门</h3>
            <p>最早的会员入口建在网页上。打开浏览器进入会员中心，确认身份后就能看到自己的服务内容，不必再到别处找入口。</p>
          </div>
        </li>
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2018</span>
          <div class="timeline-body">
            <h3 class="timeline-title">会员中心统一入口上线</h3>
            <p>个人与企业两种身份收进同一套账户体系。从哪个入口进、往哪里退，从此有了固定位置，不用在两个页面之间来回确认。</p>
          </div>
        </li>
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2020</span>
          <div class="timeline-body">
            <h3 class="timeline-title">三端小屏流程统一</h3>
            <p>手机、平板与网页端按同一套操作顺序重做，横屏竖屏都能走完核心动作。换一台设备，手指记住的先后次序仍然作数。</p>
          </div>
        </li>
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2022</span>
          <div class="timeline-body">
            <h3 class="timeline-title">企业身份切换入口开放</h3>
            <p>需要在现场临时查页的客户，可以直接在会员中心切到企业身份，办完事情再顺着同一条路回到个人中心。</p>
          </div>
        </li>
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2024</span>
          <div class="timeline-body">
            <h3 class="timeline-title">帮助中心扩展到260篇</h3>
            <p>登录、跨端使用、权益确认与企业查页的说明按场景重写。遇到卡点先自己找答案，找不到再联系客服，两边都不耽误。</p>
          </div>
        </li>
        <li class="timeline-node" data-reveal>
          <span class="timeline-year mono">2025</span>
          <div class="timeline-body">
            <h3 class="timeline-title">4大类18项服务清单发布</h3>
            <p>把权益按账户安全、跨端体验、企业协作与服务支持四组归位。会员逐项对照，就能看出自己所处的身份对应哪些内容。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--dark" id="record">
    <div class="container">
      <div class="section-head surface-dark">
        <span class="mono-label">02 / 服务规模</span>
        <h2 class="section-title">可对得上的运营数字</h2>
        <p class="section-lead">规模不是一句形容词。会员数量、企业客户分布、访问节奏和首次登录的完成情况，决定了团队要把力气花在哪一段流程上。</p>
      </div>

      <div class="stat-grid">
        <article class="stat-cell stat-cell--accent" data-reveal>
          <span class="stat-num">约160万</span>
          <span class="stat-label">个人会员</span>
          <p class="stat-note">从网页端一路用到平板和手机，账户里的服务内容始终跟着人走。</p>
        </article>
        <article class="stat-cell" data-reveal>
          <span class="stat-num">4200<span class="stat-unit">多家</span></span>
          <span class="stat-label">企业客户</span>
          <p class="stat-note">分布在制造、零售、物流、专业服务与教育等行业。</p>
        </article>
        <article class="stat-cell" data-reveal>
          <span class="stat-num">31<span class="stat-unit">个</span></span>
          <span class="stat-label">省级区域</span>
          <p class="stat-note">服务范围覆盖内地各省级区域。</p>
        </article>
        <article class="stat-cell" data-reveal>
          <span class="stat-num">22<span class="stat-unit">万次</span></span>
          <span class="stat-label">会员中心日均访问</span>
          <p class="stat-note">工作日上午和晚间是最集中的两个时段。</p>
        </article>
        <article class="stat-cell" data-reveal>
          <span class="stat-num">68<span class="stat-unit">%</span></span>
          <span class="stat-label">移动与平板会话占比</span>
          <p class="stat-note">小屏已是多数会员的主要入口，流程优化也围绕它展开。</p>
        </article>
        <article class="stat-cell stat-cell--wide" data-reveal>
          <span class="stat-num">92<span class="stat-unit">%</span></span>
          <span class="stat-label">首次登录完成率</span>
          <p class="stat-note">把准备信息、打开会员中心、选择身份拆成三步之后，新用户走到最后一步的比例明显更高，客服接到“从哪进”的询问也随之减少。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--mist" id="hub">
    <div class="container">
      <div class="hub-grid">
        <div class="hub-copy">
          <span class="mono-label">03 / 会员中心</span>
          <h2 class="section-title">把复杂收进一个入口</h2>
          <p class="hub-lead">会员中心不是一块跳转牌，而是四件事汇合的地方。登录、看权益、查版本、找说明，都可以在同一条路径上完成。</p>

          <ul class="hub-list">
            <li class="hub-item">
              <span class="hub-item-num mono">A</span>
              <div>
                <h3>统一登录入口</h3>
                <p>个人与企业共用一套账户体系，先在同一个位置确认身份，再进入对应的服务区。</p>
              </div>
            </li>
            <li class="hub-item">
              <span class="hub-item-num mono">B</span>
              <div>
                <h3>服务清单</h3>
                <p>4 大类 18 项权益逐条列出，标注适用身份与最近变更，长期会员可以核对自己的内容有没有调整。</p>
              </div>
            </li>
            <li class="hub-item">
              <span class="hub-item-num mono">C</span>
              <div>
                <h3>版本说明</h3>
                <p>按月发布，固定展示在内容区第 2 栏，当前已更新到今年 3 月。改动落在哪几项，一眼就能看出来。</p>
              </div>
            </li>
            <li class="hub-item">
              <span class="hub-item-num mono">D</span>
              <div>
                <h3>帮助中心</h3>
                <p>260 篇说明按场景归类，从第一次登录到企业查页，遇到卡点先在这里找答案。</p>
              </div>
            </li>
          </ul>
        </div>

        <aside class="hub-aside">
          <figure class="about-hub-figure media-frame media-frame--cut">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="技能树式模块关系图，连接线与状态点串起会员中心的四个核心模块" loading="lazy" decoding="async">
          </figure>
          <div class="aside-anchor hub-anchor">
            <span class="mono-label">版本说明</span>
            <p class="hub-anchor-title">当前更新到今年3月</p>
            <p class="hub-anchor-note">每月发布一次，说清变更落在哪些权益类别与使用环节。</p>
            <a class="btn btn-line" href="/news/">看动态与版本</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--panel" id="team">
    <div class="container">
      <div class="section-head surface-dark">
        <span class="mono-label">04 / 团队构成</span>
        <h2 class="section-title">八十人怎么分工</h2>
        <p class="section-lead">约 80 人的跨职能团队按职能拆成四组。每组对会员体验的一段负责，出了问题能找到具体的人，流程改了也知道该先通知谁。</p>
      </div>

      <div class="team-grid">
        <figure class="about-team-figure media-frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="无人物正脸的桌面设备与便签，屏幕光影映出团队协作的工作台一角" loading="lazy" decoding="async">
        </figure>

        <div class="team-list">
          <div class="accordion">
            <div class="accordion-item team-item">
              <button class="accordion-trigger team-trigger" type="button" aria-expanded="false" aria-controls="team-panel-1">
                <span class="team-name">体验与内容</span>
                <span class="team-count mono">22 人</span>
              </button>
              <div class="accordion-panel team-panel" id="team-panel-1" hidden>
                <p>负责登录流程、页面结构与使用说明的措辞。小屏上的按钮放在哪、一句话能不能说清一个动作，都从这一组过。</p>
              </div>
            </div>

            <div class="accordion-item team-item">
              <button class="accordion-trigger team-trigger" type="button" aria-expanded="false" aria-controls="team-panel-2">
                <span class="team-name">客户成功</span>
                <span class="team-count mono">18 人</span>
              </button>
              <div class="accordion-panel team-panel" id="team-panel-2" hidden>
                <p>跟着企业客户走完整段使用周期。多人协作核对、跨设备访问、权益确认这类场景，通常由这一组先接住再往下分派。</p>
              </div>
            </div>

            <div class="accordion-item team-item">
              <button class="accordion-trigger team-trigger" type="button" aria-expanded="false" aria-controls="team-panel-3">
                <span class="team-name">技术支持</span>
                <span class="team-count mono">26 人</span>
              </button>
              <div class="accordion-panel team-panel" id="team-panel-3" hidden>
                <p>负责多端兼容性测试与可用性巡检，处理系统环境引起的访问异常，也把反复出现的问题回传给体验组。</p>
              </div>
            </div>

            <div class="accordion-item team-item">
              <button class="accordion-trigger team-trigger" type="button" aria-expanded="false" aria-controls="team-panel-4">
                <span class="team-name">平台运营</span>
                <span class="team-count mono">14 人</span>
              </button>
              <div class="accordion-panel team-panel" id="team-panel-4" hidden>
                <p>维护服务清单与版本说明的发布节奏，每季度汇总高频问题，把需要置顶的说明推到帮助中心前排。</p>
              </div>
            </div>
          </div>
          <p class="team-footnote mono">合计约 80 人 · 体验与内容 22 / 客户成功 18 / 技术支持 26 / 平台运营 14</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--mist" id="enterprise">
    <div class="container">
      <div class="section-head">
        <span class="mono-label">05 / 企业客户支持</span>
        <h2 class="section-title">企业身份，切得进去也回得来</h2>
        <p class="section-lead">企业客户经常在同一台设备上处理个人与企业两件事。会员中心把身份切换做成一条三步路径，用完临时查页，还能顺着原路回到自己的个人中心。</p>
      </div>

      <ol class="step-rail enterprise-rail">
        <li class="step-node" data-state="done" data-reveal>
          <span class="step-num mono">01</span>
          <span class="step-title">进入会员中心</span>
          <span class="step-desc">用企业账户登录，停在身份选择的位置，不急着往下点。</span>
        </li>
        <li class="step-node" aria-selected="true" data-reveal>
          <span class="step-num mono">02</span>
          <span class="step-title">切到企业身份</span>
          <span class="step-desc">选择企业身份后进入临时查页，核对手头任务需要的信息。</span>
        </li>
        <li class="step-node" data-reveal>
          <span class="step-num mono">03</span>
          <span class="step-title">返回个人中心</span>
          <span class="step-desc">查完随手切回，个人身份下的服务内容不受影响。</span>
        </li>
      </ol>

      <div class="enterprise-note" data-reveal>
        <span class="tag tag--action">企业查页</span>
        <p>多人协作核对或临时需要现场查页时，把需求发到客服邮箱，并在邮件标题注明“企业查页”，会有专人优先处理。行政、运营和信息化负责人不必各自摸索，一次说清使用场景即可。</p>
        <a class="btn btn-primary" href="/consult/">联系企业咨询</a>
      </div>
    </div>
  </section>

  <section class="section section--dark" id="principles">
    <div class="container">
      <div class="section-head surface-dark">
        <span class="mono-label">06 / 服务准则</span>
        <h2 class="section-title">长期做稳的四件事</h2>
        <p class="section-lead">会员服务没有一次性完工的节点。下面四条，是团队判断一次改动该不该做、做到什么程度的依据。</p>
      </div>

      <div class="principle-grid">
        <article class="principle-card" data-reveal>
          <span class="principle-num mono">01</span>
          <h3>说得清楚</h3>
          <p>说明用短句和编号写，一个动作占一行。术语出现时紧接着用日常说法解释一遍，不留猜的空间。</p>
        </article>
        <article class="principle-card" data-reveal>
          <span class="principle-num mono">02</span>
          <h3>来得及时</h3>
          <p>帮助中心每周更新 2 到 3 篇使用指南，每月发布一次版本简报。问题集中出现时，说明会先一步补位。</p>
        </article>
        <article class="principle-card" data-reveal>
          <span class="principle-num mono">03</span>
          <h3>可查可回</h3>
          <p>版本说明固定在内容区第 2 栏，改了什么、什么时候改的都能翻回去看。身份切换同样保留返回路径。</p>
        </article>
        <article class="principle-card" data-reveal>
          <span class="principle-num mono">04</span>
          <h3>三端一致</h3>
          <p>手机、平板与网页按同一套操作顺序维护，兼容 iOS、Android、鸿蒙、Windows 和 macOS 的主流浏览器。</p>
        </article>
      </div>

      <div class="about-cta">
        <div class="about-cta-copy">
          <h2 class="about-cta-title">想先看看自己能用到哪些内容？</h2>
          <p>从 2025 年会员服务清单开始对照，或者直接联系我们确认企业查页的接入方式。</p>
        </div>
        <div class="about-cta-actions">
          <a class="btn btn-primary" href="/app-download/">查看会员服务</a>
          <a class="btn btn-ghost" href="/consult/">咨询服务</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-hairline-light: 1px solid var(--line-light);
  --about-hairline-dark: 1px solid var(--line-dark);
  --about-organic: 26px 92px 26px 26px;
  --about-gap: clamp(22px, 4vw, 44px);
}

/* ---------- hero ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 4vw, 46px);
  color: var(--mist);
  background:
    radial-gradient(120% 92% at 88% 2%, rgba(34, 211, 238, 0.18) 0%, transparent 58%),
    radial-gradient(92% 84% at 2% 100%, rgba(124, 92, 255, 0.17) 0%, transparent 62%),
    var(--ink);
}

.page-about .about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 5vw, 48px);
  margin-top: clamp(18px, 3.5vw, 32px);
}

.page-about .about-hero-copy .mono-label {
  display: inline-block;
  color: var(--cyan);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.page-about .about-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 8.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--mist);
}

.page-about .about-hero-title br {
  display: none;
}

.page-about .about-hero-lead {
  max-width: 56ch;
  margin: 0 0 26px;
  font-size: clamp(15px, 2.3vw, 18px);
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.8);
}

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

.page-about .about-hero-index {
  align-self: start;
  padding: 20px 18px 16px;
  border: var(--about-hairline-dark);
  border-radius: var(--radius-m);
  background: rgba(14, 42, 71, 0.66);
}

.page-about .about-index-title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

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

.page-about .about-index-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-s);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(244, 247, 250, 0.86);
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.page-about .about-index-list a:hover,
.page-about .about-index-list a:focus-visible {
  background: rgba(34, 211, 238, 0.12);
  color: var(--mist);
}

.page-about .about-index-num {
  flex: 0 0 auto;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange);
}

.page-about .about-index-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: var(--about-hairline-dark);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 247, 250, 0.55);
}

.page-about .about-hero-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: clamp(26px, 5vw, 44px);
  padding-top: 16px;
  border-top: var(--about-hairline-dark);
}

.page-about .about-strip-cell {
  padding: 4px 10px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(244, 247, 250, 0.62);
}

.page-about .about-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(124, 255, 178, 0.16);
  animation: about-pulse 2.4s var(--ease) infinite;
}

.page-about .about-strip-note {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 247, 250, 0.55);
}

@keyframes about-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

/* ---------- shared section heading ---------- */
.page-about .section-head .mono-label {
  display: inline-block;
  color: var(--cyan-ink);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.page-about .section--dark .section-head .mono-label,
.page-about .section--panel .section-head .mono-label {
  color: var(--cyan);
}

.page-about .section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.2vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.page-about .section-lead {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.75;
}

.page-about .section--dark .section-lead,
.page-about .section--panel .section-lead {
  color: rgba(244, 247, 250, 0.76);
}

/* ---------- timeline ---------- */
.page-about .about-timeline-figure {
  margin: clamp(22px, 4vw, 40px) 0 clamp(26px, 4vw, 42px);
  aspect-ratio: 14 / 9;
  border-radius: var(--about-organic);
  overflow: hidden;
  background: var(--panel);
}

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

.page-about .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

.page-about .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(34, 211, 238, 0.26) 60%, rgba(255, 138, 61, 0.44) 100%);
}

.page-about .timeline-node {
  position: relative;
  padding-left: 36px;
}

.page-about .timeline-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mist);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

.page-about .timeline-node:last-child::before {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.18);
}

.page-about .timeline-year {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan-ink);
  background: rgba(34, 211, 238, 0.13);
}

.page-about .timeline-node:last-child .timeline-year {
  color: #a8571a;
  background: rgba(255, 138, 61, 0.17);
}

.page-about .timeline-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.8vw, 21px);
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--ink);
}

.page-about .timeline-body p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--slate);
}

/* ---------- stats ---------- */
.page-about .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(22px, 4vw, 38px);
}

.page-about .stat-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px 22px;
  border: var(--about-hairline-dark);
  border-radius: var(--radius-m);
  background: rgba(18, 57, 94, 0.42);
  overflow: hidden;
}

.page-about .stat-cell--accent {
  background: linear-gradient(140deg, rgba(34, 211, 238, 0.2) 0%, rgba(14, 42, 71, 0.5) 64%);
  border-color: rgba(34, 211, 238, 0.42);
}

.page-about .stat-cell--wide {
  grid-column: 1 / -1;
  background:
    radial-gradient(82% 120% at 100% 0%, rgba(255, 138, 61, 0.22) 0%, transparent 60%),
    rgba(18, 57, 94, 0.42);
}

.page-about .stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 7.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mist);
}

.page-about .stat-cell--accent .stat-num {
  color: var(--cyan);
}

.page-about .stat-cell--wide .stat-num {
  color: var(--orange);
}

.page-about .stat-unit {
  margin-left: 4px;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.7;
}

.page-about .stat-label {
  margin-top: 6px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 250, 0.88);
}

.page-about .stat-note {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(244, 247, 250, 0.6);
}

/* ---------- hub ---------- */
.page-about .hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

.page-about .hub-lead {
  max-width: 54ch;
  margin: 0 0 26px;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.78;
  color: var(--slate);
}

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

.page-about .hub-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 4px;
  border-top: var(--about-hairline-light);
}

.page-about .hub-item:last-child {
  border-bottom: var(--about-hairline-light);
}

.page-about .hub-item-num {
  padding-top: 4px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cyan-ink);
}

.page-about .hub-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.page-about .hub-item p {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--slate);
}

.page-about .hub-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-about .about-hub-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--panel);
}

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

.page-about .hub-anchor {
  padding: 18px 18px 20px;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: var(--radius-m);
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.12) 0%, rgba(244, 247, 250, 0.62) 72%);
}

.page-about .hub-anchor .mono-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan-ink);
}

.page-about .hub-anchor-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
}

.page-about .hub-anchor-note {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--slate);
}

/* ---------- team ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 36px);
  align-items: start;
  margin-top: clamp(22px, 4vw, 34px);
}

.page-about .about-team-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--about-organic);
  overflow: hidden;
  background: var(--ink);
}

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

.page-about .team-list .accordion {
  display: block;
}

.page-about .team-item {
  border-top: var(--about-hairline-dark);
}

.page-about .team-item:last-child {
  border-bottom: var(--about-hairline-dark);
}

.page-about .team-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 19px);
  color: var(--mist);
  transition: color 0.25s var(--ease);
}

.page-about .team-trigger::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan);
  transition: transform 0.25s var(--ease);
}

.page-about .team-trigger[aria-expanded="true"]::after {
  content: "–";
}

.page-about .team-trigger:hover,
.page-about .team-trigger:focus-visible {
  color: var(--cyan);
}

.page-about .team-count {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.page-about .team-panel {
  padding: 0 2px 18px;
}

.page-about .team-panel p {
  margin: 0;
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.74);
}

.page-about .team-footnote {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: rgba(244, 247, 250, 0.5);
}

/* ---------- enterprise ---------- */
.page-about .enterprise-rail {
  list-style: none;
  margin: clamp(22px, 4vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.page-about .enterprise-rail .step-node {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 20px 20px 22px;
  border: var(--about-hairline-light);
  border-radius: var(--radius-m);
  background: var(--mist);
}

.page-about .enterprise-rail .step-node[data-state="done"] {
  border-left: 3px solid var(--cyan);
}

.page-about .enterprise-rail .step-node[aria-selected="true"] {
  border-color: rgba(255, 138, 61, 0.5);
  border-left: 3px solid var(--orange);
  background: linear-gradient(150deg, rgba(255, 138, 61, 0.18) 0%, var(--mist) 64%);
}

.page-about .enterprise-rail .step-num {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--cyan-ink);
}

.page-about .enterprise-rail .step-node[aria-selected="true"] .step-num {
  color: #b2591a;
}

.page-about .enterprise-rail .step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
}

.page-about .enterprise-rail .step-desc {
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--slate);
}

.page-about .enterprise-note {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-l);
  background: var(--panel);
  color: var(--mist);
}

.page-about .enterprise-note p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.82);
}

/* ---------- principles ---------- */
.page-about .principle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(22px, 4vw, 38px);
}

.page-about .principle-card {
  padding: 24px 22px 26px;
  border: var(--about-hairline-dark);
  border-radius: var(--radius-m);
  background: linear-gradient(165deg, rgba(124, 92, 255, 0.16) 0%, rgba(14, 42, 71, 0.34) 58%);
}

.page-about .principle-card:nth-child(2) {
  background: linear-gradient(165deg, rgba(34, 211, 238, 0.15) 0%, rgba(14, 42, 71, 0.34) 58%);
}

.page-about .principle-card:nth-child(3) {
  background: linear-gradient(165deg, rgba(255, 200, 87, 0.15) 0%, rgba(14, 42, 71, 0.34) 58%);
}

.page-about .principle-card:nth-child(4) {
  background: linear-gradient(165deg, rgba(124, 255, 178, 0.13) 0%, rgba(14, 42, 71, 0.34) 58%);
}

.page-about .principle-num {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-about .principle-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: var(--mist);
}

.page-about .principle-card p {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 247, 250, 0.72);
}

/* ---------- closing ---------- */
.page-about .about-cta {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 5vw, 52px);
  padding: clamp(24px, 4vw, 38px);
  border: var(--about-hairline-dark);
  border-radius: var(--radius-l);
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.18) 0%, rgba(255, 138, 61, 0.15) 100%);
}

.page-about .about-cta-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 4.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mist);
}

.page-about .about-cta-copy p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(244, 247, 250, 0.78);
}

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

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .page-about .stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }

  .page-about .stat-cell {
    grid-column: span 2;
    padding: 24px 22px 26px;
  }

  .page-about .stat-cell--accent {
    grid-column: span 4;
  }

  .page-about .stat-cell--wide {
    grid-column: span 6;
  }

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

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

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
  }

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

@media (min-width: 960px) {
  .page-about .about-hero-title br {
    display: inline;
  }

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

  .page-about .about-hero-index {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding: 24px 22px 18px;
  }

  .page-about .timeline {
    padding-left: 22px;
  }

  .page-about .timeline::before {
    left: 21px;
  }

  .page-about .timeline-node {
    padding-left: 52px;
  }

  .page-about .timeline-node::before {
    left: 14px;
  }

  .page-about .hub-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
  }

  .page-about .hub-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-about .team-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .page-about .about-team-figure {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-about .about-strip-dot {
    animation: none;
  }

  .page-about .team-trigger::after,
  .page-about .about-index-list a {
    transition: none;
  }
}
<<<END>>>