.page-about{
  --about-rail:210px;
  --about-measure:46rem;
  --about-grade-a:#E8B04B;
  --about-grade-b:#C4A96A;
  --about-grade-c:#A6B6A8;
  --about-grade-d:#8FA79B;
  background:var(--bg);
  color:var(--bone-50);
  padding-block:clamp(18px,3vw,32px) clamp(56px,9vw,104px);
}
.page-about .about-top{padding-top:4px}

/* ---------- 首屏 ---------- */
.page-about .about-masthead{
  position:relative;
  padding-block:clamp(22px,4vw,44px) clamp(20px,3vw,32px);
  overflow:hidden;
}
.page-about .about-masthead::after{
  content:"";
  position:absolute;
  top:-150px;
  right:-130px;
  width:340px;
  height:340px;
  background:radial-gradient(circle,rgba(232,176,75,.18),rgba(232,176,75,0) 68%);
  pointer-events:none;
}
.page-about .about-masthead>*{position:relative;z-index:1}
.page-about .about-masthead .eyebrow{color:var(--gold-400)}
.page-about .about-title{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2rem,6.6vw,3.8rem);
  line-height:1.1;
  letter-spacing:-.01em;
}
.page-about .about-lede{
  margin:20px 0 0;
  max-width:42rem;
}
.page-about .about-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px;
  margin:30px 0 0;
  padding:18px 0 0;
  border-top:3px solid var(--gold-400);
  list-style:none;
}
.page-about .about-stats li{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.page-about .about-stats__num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  line-height:1.1;
  color:var(--gold-100);
}
.page-about .about-stats__label{
  font-size:.76rem;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--sage-400);
}

/* ---------- 外壳：窄栏刻度 + 主叙述 ---------- */
.page-about .about-shell{padding-top:clamp(24px,4vw,44px)}

.page-about .about-rail{
  border-top:2px solid var(--line-700);
  padding:14px 0 18px;
}
.page-about .about-rail .eyebrow{color:var(--sage-400)}
.page-about .about-rail__list{
  display:flex;
  gap:18px;
  margin:10px 0 0;
  padding:0 0 6px;
  list-style:none;
  overflow-x:auto;
}
.page-about .about-rail__list li{position:relative;flex:0 0 auto}
.page-about .about-rail__list a{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:6px 0;
  white-space:nowrap;
  font-size:.82rem;
  color:var(--sage-400);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-about .about-rail__list a .num{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--gold-400);
}
.page-about .about-rail__list a:hover,
.page-about .about-rail__list a:focus-visible{
  color:var(--bone-50);
  border-bottom-color:var(--gold-400);
}

/* ---------- 正文节奏 ---------- */
.page-about .about-section{
  padding-block:clamp(30px,5vw,52px);
  border-top:2px solid var(--line-700);
}
.page-about .about-section>.section__head{margin-bottom:18px}
.page-about .about-section .section__num{color:var(--gold-400)}
.page-about .about-p{
  max-width:40rem;
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.85;
  color:var(--bone-50);
}
.page-about .about-note{
  display:block;
  max-width:36rem;
  margin-top:18px;
  padding-left:14px;
  border-left:3px solid var(--cyan-400);
  color:var(--sage-400);
}
.page-about .about-figure{margin:22px 0 26px}
.page-about .about-figure img{display:block;width:100%;height:auto}

/* ---------- 团队条 ---------- */
.page-about .team-bar{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:22px 0 26px;
  border:2px solid var(--line-700);
  box-shadow:var(--hard-shadow-sm);
  background:var(--midnight-900);
}
.page-about .team-bar__seg{
  position:relative;
  display:grid;
  gap:2px;
  padding:12px 14px;
  border-left:6px solid var(--seg-ink,var(--sage-400));
  transition:background var(--dur) var(--ease);
}
.page-about .team-bar__seg--eval{--seg:18;--seg-ink:var(--gold-400)}
.page-about .team-bar__seg--data{--seg:9;--seg-ink:var(--cyan-400)}
.page-about .team-bar__seg--care{--seg:11;--seg-ink:var(--coral-500)}
.page-about .team-bar__seg--tech{--seg:4;--seg-ink:var(--sage-400)}
.page-about .team-bar__seg:hover{background:rgba(244,241,232,.07)}
.page-about .team-bar__seg:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:2px;
}
.page-about .team-bar__num{
  font-family:var(--font-mono);
  font-size:1.35rem;
  line-height:1.1;
  color:var(--seg-ink,var(--bone-50));
}
.page-about .team-bar__name{
  font-size:.86rem;
  letter-spacing:.04em;
}
.page-about .team-bar__tip{
  font-size:.76rem;
  line-height:1.6;
  color:var(--sage-400);
}

/* ---------- 六项指标 ---------- */
.page-about .metric-board{
  position:relative;
  margin-top:24px;
  padding:clamp(16px,3vw,26px);
  border:2px solid var(--line-700);
  box-shadow:var(--hard-shadow);
  background:linear-gradient(160deg,var(--midnight-900),var(--ink-green-950));
  overflow:hidden;
}
.page-about .metric-board__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.16;
  pointer-events:none;
}
.page-about .metric-board__inner{position:relative;z-index:1}
.page-about .metric-board__legend{display:none}
.page-about .metric-list{
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .metric{
  padding:16px 12px 16px 14px;
  border-top:1px solid var(--line-700);
  border-left:3px solid transparent;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-about .metric:first-child{border-top:0}
.page-about .metric:hover,
.page-about .metric:focus-visible{
  border-left-color:var(--cyan-400);
  background:rgba(53,224,208,.07);
  outline:none;
}
.page-about .metric__name{
  margin:0;
  font-size:1.02rem;
  letter-spacing:.03em;
}
.page-about .metric__what,
.page-about .metric__how{
  margin:8px 0 0;
  font-size:.9rem;
  line-height:1.8;
  color:var(--bone-50);
}
.page-about .metric__tag{
  display:inline-block;
  margin-right:8px;
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--cyan-400);
}
.page-about .metric__use{
  margin:10px 0 0;
  font-size:.82rem;
  line-height:1.7;
  color:var(--sage-400);
}

/* ---------- 服务评级 ---------- */
.page-about .grade-bar{
  display:grid;
  gap:0;
  margin:24px 0 0;
  padding:0;
  list-style:none;
  border:2px solid var(--line-700);
  box-shadow:var(--hard-shadow-sm);
  background:var(--midnight-900);
}
.page-about .grade{
  display:grid;
  grid-template-columns:3rem minmax(0,1fr);
  gap:4px 14px;
  padding:14px 16px;
  border-top:2px solid var(--line-700);
  border-left:6px solid var(--sage-400);
  transition:background var(--dur) var(--ease);
}
.page-about .grade:first-child{border-top:0}
.page-about .grade:hover,
.page-about .grade:focus-visible{
  background:rgba(244,241,232,.06);
  outline:none;
}
.page-about .grade--a{border-left-color:var(--about-grade-a)}
.page-about .grade--b{border-left-color:var(--about-grade-b)}
.page-about .grade--c{border-left-color:var(--about-grade-c)}
.page-about .grade--d{border-left-color:var(--about-grade-d)}
.page-about .grade__key{
  grid-row:1 / span 3;
  align-self:center;
  font-family:var(--font-mono);
  font-size:1.5rem;
  line-height:1;
}
.page-about .grade--a .grade__key{color:var(--about-grade-a)}
.page-about .grade--b .grade__key{color:var(--about-grade-b)}
.page-about .grade--c .grade__key{color:var(--about-grade-c)}
.page-about .grade--d .grade__key{color:var(--about-grade-d)}
.page-about .grade__name{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
}
.page-about .grade__detail{
  font-size:.86rem;
  line-height:1.7;
  color:var(--bone-50);
}
.page-about .grade__meta{
  font-size:.78rem;
  line-height:1.7;
  color:var(--sage-400);
}

/* ---------- 版本演进 ---------- */
.page-about .about-figure--slant{margin-bottom:8px}
.page-about .stages{
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.page-about .stage{
  padding:22px 0;
  border-top:2px solid var(--line-700);
}
.page-about .stage:first-child{border-top:0;padding-top:12px}
.page-about .stage__ver{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(1.8rem,5.4vw,2.8rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--gold-400);
}
.page-about .stage__title{
  margin:8px 0 0;
  font-size:1.04rem;
  letter-spacing:.04em;
}
.page-about .stage__body{
  max-width:38rem;
  margin:10px 0 0;
  font-size:.94rem;
  line-height:1.85;
  color:var(--bone-50);
}

/* ---------- 合作互认 ---------- */
.page-about .eco-list{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.page-about .eco-list li{
  display:grid;
  grid-template-columns:4.2rem minmax(0,1fr);
  gap:14px;
  align-items:baseline;
  padding-top:12px;
  border-top:1px solid var(--line-700);
  font-size:.9rem;
  line-height:1.75;
  color:var(--bone-50);
}
.page-about .eco-list__key{
  font-family:var(--font-mono);
  font-size:1.1rem;
  color:var(--coral-500);
}

/* ---------- 下一步 ---------- */
.page-about .about-next{border-bottom:2px solid var(--line-700)}
.page-about .next-links{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:14px;
}
.page-about .next-links li{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.page-about .next-links__hint{
  font-size:.82rem;
  line-height:1.7;
  color:var(--sage-400);
}

@media (min-width:640px){
  .page-about .about-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-about .next-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
}

@media (min-width:720px){
  .page-about .about-figure--slant{width:66%;max-width:34rem;margin-right:auto}
  .page-about .about-figure--slant img{
    clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);
  }
  .page-about .team-bar{
    flex-direction:row;
    gap:0;
    margin-bottom:74px;
  }
  .page-about .team-bar__seg{
    flex:var(--seg,1) 1 0;
    min-width:0;
    padding:16px 14px;
    border-left:0;
    border-top:6px solid var(--seg-ink,var(--sage-400));
  }
  .page-about .team-bar__tip{
    position:absolute;
    left:-2px;
    right:-2px;
    top:calc(100% + 8px);
    padding:8px 12px;
    background:var(--midnight-900);
    border:2px solid var(--line-700);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur) var(--ease);
    z-index:3;
  }
  .page-about .team-bar__seg:hover .team-bar__tip,
  .page-about .team-bar__seg:focus .team-bar__tip{
    opacity:1;
    visibility:visible;
  }
  .page-about .metric-board__legend{
    display:grid;
    grid-template-columns:8.5rem minmax(0,1fr) minmax(0,1fr);
    gap:0 20px;
    padding:0 14px 10px;
    font-size:.68rem;
    letter-spacing:.12em;
    color:var(--cyan-400);
  }
  .page-about .metric{
    display:grid;
    grid-template-columns:8.5rem minmax(0,1fr) minmax(0,1fr);
    gap:0 20px;
    align-items:start;
  }
  .page-about .metric__name{
    font-size:.98rem;
    padding-top:2px;
  }
  .page-about .metric__what,
  .page-about .metric__how{margin-top:0}
  .page-about .metric__tag{display:none}
  .page-about .metric__use{grid-column:2 / -1}
  .page-about .grade{
    grid-template-columns:3.4rem minmax(0,1.1fr) minmax(0,1fr);
    align-items:baseline;
  }
  .page-about .grade__key{grid-row:1 / span 2}
  .page-about .grade__meta{grid-column:3}
}

@media (min-width:960px){
  .page-about .about-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .page-about .about-shell{
    display:grid;
    grid-template-columns:var(--about-rail) minmax(0,1fr);
    gap:clamp(32px,5vw,64px);
    align-items:start;
  }
  .page-about .about-rail{
    position:sticky;
    top:calc(var(--bar-h) + 24px);
    border-top:0;
    border-left:2px solid var(--line-700);
    padding:6px 0 6px 22px;
  }
  .page-about .about-rail__list{
    flex-direction:column;
    gap:2px;
    overflow:visible;
    padding:0;
  }
  .page-about .about-rail__list li::before{
    content:"";
    position:absolute;
    left:-27px;
    top:50%;
    width:9px;
    height:9px;
    margin-top:-4.5px;
    border-radius:50%;
    background:var(--line-700);
    transition:background var(--dur) var(--ease);
  }
  .page-about .about-rail__list li:hover::before,
  .page-about .about-rail__list li:focus-within::before{background:var(--gold-400)}
  .page-about .about-rail__list a{
    white-space:normal;
    padding:9px 0;
    border-bottom:0;
  }
  .page-about .about-flow{
    max-width:var(--about-measure);
    min-width:0;
  }
  .page-about .about-section:first-child{border-top:0;padding-top:6px}
  .page-about .stages{position:relative}
}