.page-about{
  --ab-edge: rgba(43,227,224,.18);
  --ab-soft: rgba(138,152,181,.16);
  --ab-tl-gap: clamp(18px,4vw,34px);
  display: block;
  color: var(--chalk);
  background: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(20px,3.5vw,36px) clamp(42px,7vw,96px);
  background:
    radial-gradient(115% 85% at 86% -8%, rgba(43,227,224,.17), transparent 56%),
    radial-gradient(85% 70% at 2% 104%, rgba(255,122,47,.13), transparent 60%),
    linear-gradient(172deg, var(--indigo) 0%, var(--ink) 76%);
}
.page-about .ab-hero::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--lime) 44%, var(--orange));
  opacity: .85;
}
.page-about .ab-hero::after{
  content: "";
  position: absolute;
  right: -8%;
  bottom: 14%;
  width: clamp(220px,38vw,520px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 16px, transparent 16px 34px);
  transform: rotate(-22deg);
  opacity: .6;
  pointer-events: none;
}

.page-about .ab-kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(18px,3vw,34px) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--cyan);
}
.page-about .ab-kicker::before{
  content: "";
  flex: none;
  width: 30px;
  height: 2px;
  background: var(--orange);
}

.page-about .ab-hero__title{
  max-width: 15em;
  margin: clamp(14px,2.4vw,22px) 0 clamp(14px,2.4vw,22px);
  font-family: var(--font-narrow);
  font-weight: 800;
  font-size: clamp(36px,8.6vw,92px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--chalk);
  text-wrap: balance;
}

.page-about .ab-hero__lead{
  max-width: 62ch;
  margin: 0;
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.8;
  color: var(--muted);
}

.page-about .ab-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(30px,5vw,56px);
  background: var(--ab-soft);
  border: 1px solid var(--ab-soft);
}
.page-about .ab-fact{
  display: grid;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--indigo);
}
.page-about .ab-fact__value{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px,3vw,34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--lime);
}
.page-about .ab-fact__label{
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--steel);
}

/* ---------- 章节骨架 ---------- */
.page-about .ab-part{
  position: relative;
  padding-block: clamp(46px,8vw,104px);
  border-top: 1px solid var(--ab-soft);
}
.page-about .section-head{
  margin-bottom: clamp(24px,4vw,44px);
}
.page-about .section-num{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--cyan);
}
.page-about .section-num::after{
  content: "";
  width: clamp(40px,10vw,90px);
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}
.page-about .section-title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px,3.6vw,44px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--chalk);
}
.page-about .section-lead{
  max-width: 58ch;
  margin: 0;
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.8;
  color: var(--muted);
}

.page-about .ab-split{
  display: grid;
  gap: clamp(22px,3.6vw,44px);
  align-items: start;
}
.page-about .ab-split--tl{
  grid-template-columns: minmax(0,1fr);
}

.page-about .ab-figure{
  margin: 0;
}
.page-about .ab-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-about .ab-figure .media-frame__caption{
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--steel);
}

/* ---------- 01 版本时间轴 ---------- */
.page-about .ab-timeline{
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--ab-tl-gap);
  display: grid;
  gap: clamp(12px,2.2vw,20px);
}
.page-about .ab-timeline::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--orange) 72%, transparent);
  opacity: .5;
}
.page-about .ab-tl-item{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  padding: 14px 16px;
  background: rgba(14,23,48,.55);
  border: 1px solid rgba(58,74,107,.75);
  border-left: 2px solid var(--lane);
  border-radius: var(--radius);
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.page-about .ab-tl-item::before{
  content: "";
  position: absolute;
  top: 22px;
  left: calc(-1 * var(--ab-tl-gap) - 5px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--indigo);
  border: 2px solid var(--cyan);
}
.page-about .ab-tl-item:hover,
.page-about .ab-tl-item:focus-visible{
  background: rgba(27,37,64,.85);
  border-left-color: var(--orange);
  transform: translateX(3px);
}
.page-about .ab-tl-item:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.page-about .ab-tl-badge{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lime);
  border: 1px solid rgba(198,242,78,.4);
  border-radius: var(--radius);
}
.page-about .ab-tl-title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--chalk);
}
.page-about .ab-tl-text{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 02 团队 ---------- */
.page-about .ab-team-list{
  display: grid;
  gap: 12px;
}
.page-about .ab-team-card{
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius);
  transition: border-color 120ms ease, transform 120ms ease;
}
.page-about .ab-team-card:hover{
  transform: translateY(-2px);
}
.page-about .ab-team-card__num{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--lime);
}
.page-about .ab-team-card__title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 17px;
  font-weight: 700;
  color: var(--chalk);
}
.page-about .ab-team-card__body{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}
.page-about .ab-team-list .callout{
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
}

/* ---------- 03 栏目滑轨 ---------- */
.page-about .ab-rail-hint{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--steel);
}
.page-about .ab-rail{
  list-style: none;
  margin: 0;
  padding: 6px 0 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px,78vw);
  gap: clamp(14px,2vw,20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--lane) transparent;
}
.page-about .ab-rail:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.page-about .ab-rail::-webkit-scrollbar{
  height: 6px;
}
.page-about .ab-rail::-webkit-scrollbar-thumb{
  background: var(--lane);
}
.page-about .ab-rail-card{
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 22px 24px;
  background: linear-gradient(155deg, rgba(27,37,64,.95), rgba(14,23,48,.85));
  border: 1px solid rgba(58,74,107,.9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: border-color 120ms ease, transform 120ms ease;
}
.page-about .ab-rail-card:hover{
  border-color: var(--orange);
  transform: translateY(-3px);
}
.page-about .ab-rail-card__num{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--cyan);
}
.page-about .ab-rail-card__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--chalk);
}
.page-about .ab-rail-card__text{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}
.page-about .ab-rail-card__foot{
  margin: 4px 0 0;
}
.page-about .ab-split--project{
  grid-template-columns: minmax(0,1fr);
  margin-top: clamp(20px,3.4vw,36px);
  align-items: center;
}

/* ---------- 04 覆盖 ---------- */
.page-about .ab-cover-map{
  padding: clamp(14px,2.4vw,26px);
  border: 1px solid rgba(58,74,107,.85);
  background: linear-gradient(160deg, var(--indigo), var(--ink));
  border-radius: var(--radius);
}
.page-about .ab-cover-map svg{
  display: block;
  width: 100%;
  height: auto;
}
.page-about .ab-legend{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
}
.page-about .ab-legend__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--steel);
}
.page-about .ab-legend__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.page-about .ab-legend__dot--steel{
  background: #2A3757;
}
.page-about .ab-legend__dot--cyan{
  background: var(--cyan);
}
.page-about .ab-legend__dot--orange{
  background: var(--orange);
}

/* ---------- 05 更新节奏 ---------- */
.page-about .ab-pace{
  display: grid;
  gap: clamp(14px,2vw,20px);
  grid-template-columns: minmax(0,1fr);
}
.page-about .ab-pace__item{
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 20px 24px;
  background: linear-gradient(150deg, rgba(27,37,64,.92), rgba(14,23,48,.78));
  border: 1px solid rgba(58,74,107,.85);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius);
  transition: border-top-color 120ms ease, transform 120ms ease;
}
.page-about .ab-pace__item:hover{
  border-top-color: var(--orange);
  transform: translateY(-3px);
}
.page-about .ab-pace__value{
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px,4.4vw,48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--lime);
}
.page-about .ab-pace__value small{
  margin-left: 8px;
  font-size: .34em;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--steel);
}
.page-about .ab-pace__title{
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--chalk);
}
.page-about .ab-pace__text{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}
.page-about .ab-pace__note{
  max-width: 66ch;
  margin: clamp(20px,3.4vw,32px) 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 06 合作 ---------- */
.page-about .ab-partner-list{
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.page-about .ab-partner-item{
  display: grid;
  grid-template-columns: 8px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px 18px;
  border: 1px dashed rgba(58,74,107,.95);
  background: rgba(14,23,48,.5);
  border-radius: var(--radius);
}
.page-about .ab-partner-item__mark{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  background: linear-gradient(180deg, var(--cyan), transparent);
}
.page-about .ab-partner-item__title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-narrow);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--chalk);
}
.page-about .ab-partner-item__text{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-about .ab-cta{
  padding-block: clamp(46px,7vw,88px);
  border-top: 1px solid var(--ab-soft);
}
.page-about .ab-cta__panel{
  position: relative;
  overflow: hidden;
  padding: clamp(26px,4.4vw,54px);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(43,227,224,.16), transparent 62%),
    linear-gradient(150deg, var(--slate), var(--indigo));
  border: 1px solid rgba(43,227,224,.28);
  border-radius: var(--radius);
}
.page-about .ab-cta__panel::after{
  content: "";
  position: absolute;
  top: -48px;
  right: -48px;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(255,122,47,.32);
  transform: rotate(45deg);
  pointer-events: none;
}
.page-about .ab-cta__title{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px,3.2vw,38px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--chalk);
}
.page-about .ab-cta__text{
  max-width: 58ch;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}
.page-about .ab-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ---------- 正文链接 ---------- */
.page-about .prose a,
.page-about .ab-pace__note a,
.page-about .ab-team-list .callout a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(43,227,224,.45);
  transition: border-color 120ms ease, color 120ms ease;
}
.page-about .prose a:hover,
.page-about .ab-pace__note a:hover,
.page-about .ab-team-list .callout a:hover{
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.page-about .prose a:focus-visible,
.page-about .ab-pace__note a:focus-visible,
.page-about .ab-team-list .callout a:focus-visible,
.page-about .ab-cta__actions .btn:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px){
  .page-about .ab-rail{
    grid-auto-columns: minmax(272px,46vw);
  }
  .page-about .ab-pace{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

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

@media (min-width: 920px){
  .page-about .ab-split--tl{
    grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  }
  .page-about .ab-split--team{
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  }
  .page-about .ab-split--cover{
    grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  }
  .page-about .ab-split--project{
    grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  }
  .page-about .ab-split--partner{
    grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  }
}

@media (min-width: 1024px){
  .page-about .ab-rail{
    grid-auto-columns: minmax(300px,336px);
  }
  .page-about .ab-pace{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .page-about .ab-split{
    gap: clamp(28px,4vw,56px);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-about *,
  .page-about *::before,
  .page-about *::after{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
