.page-about{
  --pa-max:1560px;
  --pa-index:228px;
  --pa-soft:#C3D2DD;
  display:block;
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  padding:calc(var(--header-h) + 32px) 0 64px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(92% 120% at 88% -20%, rgba(41,240,190,.16), transparent 62%),
    radial-gradient(64% 84% at 4% 112%, rgba(110,140,255,.10), transparent 58%),
    linear-gradient(180deg,var(--panel) 0%,var(--ink) 82%);
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(34,64,92,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,64,92,.55) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:.26;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 80%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 80%);
}
.page-about .about-hero__inner{
  position:relative;
  z-index:1;
  max-width:var(--pa-max);
  margin:0 auto;
  padding:0 var(--frame);
}

.page-about .about-crumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--mute);
  margin-bottom:clamp(28px,5vw,52px);
}
.page-about .about-crumb__link{
  color:var(--mute);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.page-about .about-crumb__link:hover,
.page-about .about-crumb__link:focus-visible{ color:var(--mint); }
.page-about .about-crumb__sep{ color:var(--line); }
.page-about .about-crumb__now{ color:var(--paper); }

.page-about .about-hero__grid{
  display:grid;
  gap:clamp(32px,5vw,56px);
}
.page-about .about-hero__title{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(36px,7.4vw,84px);
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--paper);
}
.page-about .about-hero__lede{
  margin:22px 0 0;
  max-width:56ch;
  color:var(--mute);
  font-size:clamp(15.5px,1.7vw,18px);
  line-height:1.75;
}
.page-about .about-hero__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.page-about .about-hero__stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--line);
  overflow:hidden;
}
.page-about .about-stat{
  padding:16px 14px;
  background:rgba(20,38,58,.74);
}
.page-about .about-stat dt{
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--mute);
  margin-bottom:8px;
}
.page-about .about-stat dd{
  margin:0;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1;
  color:var(--mint);
  letter-spacing:-.02em;
}
.page-about .about-stat__unit{
  font-size:.42em;
  margin-left:3px;
  color:var(--mute);
  letter-spacing:0;
}

/* ---------- 主体骨架 ---------- */
.page-about .about-body{
  max-width:var(--pa-max);
  margin:0 auto;
  padding:48px var(--frame) 80px;
  display:grid;
  gap:36px;
}

.page-about .about-index__title{ margin:0 0 12px; color:var(--mute); }
.page-about .about-index__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.page-about .about-index__list a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:13.5px;
  line-height:1.3;
  color:var(--mute);
  text-decoration:none;
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.page-about .about-index__list .num{
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--mint);
  opacity:.75;
}
.page-about .about-index__list a:hover,
.page-about .about-index__list a:focus-visible{
  color:var(--paper);
  border-color:var(--line);
  background:rgba(20,38,58,.7);
}
.page-about .about-index__list a:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
}

.page-about .about-chapters{
  display:grid;
  gap:clamp(46px,6.5vw,84px);
  min-width:0;
}

.page-about .about-chapter{
  min-width:0;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-about .about-chapter__no{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(48px,8vw,96px);
  line-height:.78;
  letter-spacing:-.04em;
  color:rgba(41,240,190,.2);
  margin-bottom:6px;
}
.page-about .about-chapter__title{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4vw,44px);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--paper);
}
.page-about .about-chapter__sublaed{
  margin:0 0 6px;
  max-width:62ch;
  font-size:15px;
  line-height:1.75;
  color:var(--mute);
}

.page-about .about-prose p{
  margin:0 0 14px;
  max-width:66ch;
  font-size:16px;
  line-height:1.78;
  color:var(--pa-soft);
}
.page-about .about-prose p:last-child{ margin-bottom:0; }
.page-about .about-prose a{
  color:var(--mint);
  text-decoration:none;
  border-bottom:1px solid rgba(41,240,190,.4);
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.page-about .about-prose a:hover{ color:var(--volt); border-color:var(--volt); }

/* ---------- 图片容器 ---------- */
.page-about .about-media{
  margin:28px 0 0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:
    linear-gradient(rgba(34,64,92,.35) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(34,64,92,.35) 1px,transparent 1px) 0 0/24px 24px,
    var(--raise);
}
.page-about .about-media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-about .about-media__cap{
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:rgba(12,23,38,.82);
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--mute);
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline{
  position:relative;
  list-style:none;
  margin:32px 0 0;
  padding:6px 0 6px 24px;
}
.page-about .about-timeline::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:1px;
  background:linear-gradient(180deg,var(--mint) 0%,rgba(34,64,92,.9) 46%,rgba(34,64,92,.5) 100%);
}
.page-about .tl-node{
  position:relative;
  padding-bottom:20px;
}
.page-about .tl-node:last-child{ padding-bottom:0; }
.page-about .tl-node::before{
  content:"";
  position:absolute;
  left:-28px;
  top:20px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(41,240,190,.14),0 0 14px rgba(41,240,190,.6);
}
.page-about .tl-node__body{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 16px 16px;
  background:linear-gradient(180deg,rgba(20,38,58,.72),rgba(12,23,38,.72));
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.page-about .tl-node__body:hover{
  border-color:var(--mint);
  transform:translateY(-2px);
}
.page-about .tl-node__head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.page-about .tl-node__year{
  font-size:13.5px;
  letter-spacing:.1em;
  color:var(--archive);
}
.page-about .tl-node__title{
  margin:12px 0 8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(19px,2.6vw,27px);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-about .tl-node__body > p{
  margin:0;
  font-size:14.5px;
  line-height:1.74;
  color:var(--mute);
}

.page-about .tl-more{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(34,64,92,.9);
}
.page-about .tl-more summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--mint);
}
.page-about .tl-more summary::-webkit-details-marker{ display:none; }
.page-about .tl-more summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1;
  color:var(--mint);
}
.page-about .tl-more[open] summary::after{ content:"−"; }
.page-about .tl-more summary:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
}
.page-about .tl-more ul{
  margin:10px 0 0;
  padding-left:18px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--pa-soft);
}
.page-about .tl-more li{ margin-bottom:4px; }

/* ---------- 人群卡片 ---------- */
.page-about .about-aud{
  display:grid;
  gap:14px;
  margin-top:26px;
}
.page-about .aud-card{
  position:relative;
  overflow:hidden;
  padding:24px 18px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(12,23,38,.74);
  transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease);
}
.page-about .aud-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,var(--mint),rgba(41,240,190,0));
}
.page-about .aud-card:hover{
  border-color:var(--mint);
  transform:translateY(-2px);
  background:rgba(20,38,58,.78);
}
.page-about .aud-card h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  line-height:1.2;
  color:var(--paper);
}
.page-about .aud-card > p{
  margin:0 0 14px;
  font-size:14.5px;
  line-height:1.74;
  color:var(--mute);
}
.page-about .aud-card__path{
  margin:0;
  padding-top:12px;
  border-top:1px solid rgba(34,64,92,.85);
  font-size:13px;
  line-height:1.6;
  color:#8FA6B7;
  transition:color .16s var(--ease);
}
.page-about .aud-card__path b{
  color:var(--mint);
  font-weight:600;
  letter-spacing:.04em;
}
.page-about .aud-card:hover .aud-card__path{ color:var(--paper); }

/* ---------- 团队分工 ---------- */
.page-about .team-bars{
  display:grid;
  gap:20px;
  margin-top:26px;
}
.page-about .team-bar{
  padding-left:16px;
  border-left:2px solid rgba(34,64,92,.95);
  transition:border-color .16s var(--ease);
}
.page-about .team-bar:hover{ border-left-color:var(--mint); }
.page-about .team-bar__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  color:var(--paper);
}
.page-about .team-bar__head .num{
  font-size:26px;
  line-height:1;
  color:var(--mint);
}
.page-about .team-bar__track{
  height:5px;
  margin:10px 0 10px;
  border-radius:var(--pill);
  background:rgba(34,64,92,.6);
  overflow:hidden;
}
.page-about .team-bar__track i{
  display:block;
  height:100%;
  border-radius:var(--pill);
  background:linear-gradient(90deg,var(--mint),var(--mint-deep));
}
.page-about .team-bar:nth-child(1) .team-bar__track i{ width:43%; }
.page-about .team-bar:nth-child(2) .team-bar__track i{ width:36%; }
.page-about .team-bar:nth-child(3) .team-bar__track i{ width:21%; }
.page-about .team-bar p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--mute);
}

/* ---------- 联赛网格 ---------- */
.page-about .league-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
.page-about .league-grid li{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(20,38,58,.62);
  font-size:13px;
  color:var(--pa-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-about .league-grid li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px rgba(41,240,190,.8);
}

/* ---------- 原则 ---------- */
.page-about .about-principles{
  list-style:none;
  margin:26px 0 0;
  padding:0;
}
.page-about .about-principles li{
  position:relative;
  padding:24px 0 24px 44px;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.page-about .about-principles li:last-child{ border-bottom:1px solid var(--line); }
.page-about .pr-num{
  position:absolute;
  left:0;
  top:28px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--mint);
}
.page-about .pr-text{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(21px,3.3vw,38px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--paper);
}
.page-about .pr-note{
  margin:0;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.76;
  color:var(--mute);
}

/* ---------- 收尾 ---------- */
.page-about .about-cta{
  display:grid;
  gap:20px;
  padding:26px 20px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(80% 140% at 6% -20%, rgba(41,240,190,.14), transparent 62%),
    linear-gradient(150deg,rgba(20,38,58,.92),rgba(6,9,15,.92));
}
.page-about .about-cta h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--paper);
}
.page-about .about-cta p{
  margin:10px 0 0;
  max-width:64ch;
  font-size:14.5px;
  line-height:1.78;
  color:var(--mute);
}
.page-about .about-cta__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-content:start;
}

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

@media (min-width:880px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
    align-items:end;
  }
  .page-about .about-hero__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-about .about-aud{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
  .page-about .aud-card:nth-child(2){ margin-top:26px; }
  .page-about .aud-card:nth-child(3){ margin-top:52px; }
  .page-about .about-cta{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:32px 28px;
  }
  .page-about .about-cta__acts{ justify-content:flex-end; max-width:320px; }
  .page-about .team-bars{ gap:24px; }
}

@media (min-width:1024px){
  .page-about .about-body{
    grid-template-columns:var(--pa-index) minmax(0,1fr);
    gap:56px;
    padding-top:72px;
    padding-bottom:96px;
  }
  .page-about .about-index{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    align-self:start;
  }
  .page-about .about-index__list{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:2px;
  }
  .page-about .about-index__list a{
    padding:9px 12px;
    font-size:13.5px;
  }
  .page-about .about-timeline{
    padding-left:32px;
  }
  .page-about .tl-node::before{ left:-36px; }
  .page-about .tl-node:nth-child(1) .tl-node__body{ margin-right:14%; }
  .page-about .tl-node:nth-child(2) .tl-node__body{ margin-right:9%; }
  .page-about .tl-node:nth-child(3) .tl-node__body{ margin-right:4.5%; }
  .page-about .tl-node:nth-child(4) .tl-node__body{ margin-right:0; }
  .page-about .tl-node__body{ padding:22px 22px 18px; }
}

@media (min-width:1280px){
  .page-about .about-hero{ padding-top:calc(var(--header-h) + 48px); padding-bottom:84px; }
  .page-about .about-prose p{ font-size:16.5px; }
  .page-about .about-principles li{ padding-left:72px; padding-top:28px; padding-bottom:28px; }
  .page-about .pr-num{ top:34px; }
}

@media (prefers-reduced-motion:reduce){
  .page-about .tl-node__body,
  .page-about .aud-card,
  .page-about .team-bar,
  .page-about .about-media img{
    transition:none;
  }
  .page-about .tl-node__body:hover,
  .page-about .aud-card:hover{ transform:none; }
}
<<<END>>>