/* ============ 品牌价值页 · page-about ============ */

.page-about{
  --about-paper-ink:#14152F;
  --about-paper-mut:#4B4F73;
  --about-paper-line:rgba(20,21,47,.16);
  --about-paper-line-strong:rgba(20,21,47,.7);
  --about-card-shadow:rgba(43,47,122,.5);
  padding-bottom:calc(var(--xc-rule-h) + 32px);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:calc(var(--xc-head-h) + 40px) 0 58px;
  background:
    radial-gradient(880px 520px at 84% 4%,rgba(139,124,246,.30),transparent 62%),
    radial-gradient(720px 440px at 4% 96%,rgba(53,224,208,.14),transparent 68%),
    linear-gradient(178deg,#0A0B2E 0%,#171A4A 58%,#0A0B2E 100%);
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,185,59,.55),transparent);
}
.page-about .about-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:center;
}
.page-about .about-hero__eyebrow{
  margin:18px 0 14px;
  font-family:var(--xc-font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--xc-gold);
}
.page-about .about-hero__title{
  margin:0 0 20px;
  font-size:clamp(30px,6.2vw,60px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--xc-star);
}
.page-about .about-hero__lead{
  margin:0 0 26px;
  max-width:36em;
  font-size:17px;
  line-height:1.95;
  color:var(--xc-mist);
}
.page-about .about-hero__facts{
  list-style:none;
  margin:0 0 28px;
  padding:18px 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  border-top:1px solid var(--xc-line);
  border-bottom:1px solid var(--xc-line);
}
.page-about .about-hero__fact b{
  display:block;
  font-family:var(--xc-font-mono);
  font-size:clamp(20px,3.4vw,28px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--xc-star);
}
.page-about .about-hero__fact span{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--xc-mist);
}
.page-about .about-hero__acts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-about .about-hero__figure{
  margin:0;
  border-radius:var(--xc-r-lg);
  overflow:hidden;
  border:1px solid rgba(154,161,206,.28);
  background:linear-gradient(150deg,rgba(43,47,122,.75),rgba(10,11,46,.92));
  box-shadow:0 30px 70px rgba(4,5,22,.6);
}
.page-about .about-hero__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
@media (min-width:600px){
  .page-about .about-hero__facts{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:900px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:54px;
  }
  .page-about .about-hero{padding:calc(var(--xc-head-h) + 56px) 0 72px;}
}

/* ---------- 手册外壳：左索引 + 右章节 ---------- */
.page-about .about-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  padding-top:52px;
  padding-bottom:60px;
}
.page-about .about-index{align-self:start;}
.page-about .about-index__title{
  margin:0 0 12px;
  font-family:var(--xc-font-mono);
  font-size:11.5px;
  letter-spacing:.18em;
  color:var(--xc-gold);
}
.page-about .about-index__list{
  list-style:none;
  margin:0;
  padding:0 0 8px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.page-about .about-index__list::-webkit-scrollbar{display:none;}
.page-about .about-index__link{
  display:block;
  padding:9px 12px;
  border-left:2px solid transparent;
  border-radius:var(--xc-r-sm);
  font-family:var(--xc-font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--xc-mist);
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible{
  color:var(--xc-star);
  background:rgba(75,79,224,.24);
  border-left-color:var(--xc-gold);
  outline:none;
}
@media (min-width:1000px){
  .page-about .about-shell{
    grid-template-columns:208px minmax(0,1fr);
    gap:48px;
    padding-top:70px;
    padding-bottom:76px;
  }
  .page-about .about-index{
    position:sticky;
    top:calc(var(--xc-head-h) + 12px);
  }
  .page-about .about-index__list{
    flex-direction:column;
    gap:2px;
    overflow:visible;
    padding-bottom:0;
  }
}

/* ---------- 纸面章节卡 ---------- */
.page-about .about-chapter{
  position:relative;
  margin:0 0 28px;
  padding:30px 20px 28px;
  background:var(--xc-paper);
  color:var(--about-paper-ink);
  border:1px solid var(--about-paper-line-strong);
  border-radius:6px;
  box-shadow:10px 10px 0 var(--about-card-shadow);
}
.page-about .about-chapter:last-child{margin-bottom:0;}
.page-about .about-chapter__tag{
  position:absolute;
  top:-1px;
  right:-1px;
  min-width:46px;
  padding:7px 12px;
  font-family:var(--xc-font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-align:center;
  font-weight:700;
  color:var(--xc-ink);
  background:var(--xc-gold);
  border-radius:0 6px 0 12px;
}
.page-about .about-chapter__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
  padding-right:52px;
}
.page-about .about-chapter__vertical{
  flex:none;
  margin:2px 0 0;
  writing-mode:vertical-rl;
  font-family:var(--xc-font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--xc-nebula);
}
.page-about .about-chapter__title{
  margin:0;
  font-size:clamp(23px,3.4vw,34px);
  line-height:1.28;
  letter-spacing:-.01em;
  font-weight:800;
  color:var(--about-paper-ink);
}
@media (min-width:700px){
  .page-about .about-chapter{padding:38px 34px 34px;}
  .page-about .about-chapter__head{margin-bottom:22px;}
}

/* ---------- 正文 ---------- */
.page-about .about-copy p{
  margin:0 0 15px;
  max-width:40em;
  font-size:16.5px;
  line-height:1.95;
  color:var(--about-paper-mut);
}
.page-about .about-copy p:last-child{margin-bottom:0;}
.page-about .about-mark{
  font-family:var(--xc-font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--xc-nebula);
}
.page-about .about-note{
  margin:0;
  max-width:44em;
  font-size:15.5px;
  line-height:1.9;
  color:var(--about-paper-mut);
}
.page-about .about-aside{
  margin:22px 0 0;
  padding-left:14px;
  border-left:3px solid var(--xc-gold);
  font-size:14.5px;
  line-height:1.85;
  color:var(--about-paper-mut);
}
.page-about .about-figure{margin:0 0 22px;}
.page-about .about-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--xc-r-md);
  border:1px solid var(--about-paper-line-strong);
}

/* ---------- 三条原则：分段切换 ---------- */
.page-about .about-tabs{margin-top:22px;}
.page-about .about-tabs .xc-tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:20px;
  padding-bottom:2px;
  border-bottom:1px solid var(--about-paper-line);
}
.page-about .about-tabs .xc-tabs__tab{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px 999px 0 0;
  background:transparent;
  font-family:var(--xc-font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--about-paper-mut);
  transition:color .18s ease,background-color .18s ease;
}
.page-about .about-tabs .xc-tabs__tab:hover{color:var(--xc-nebula);}
.page-about .about-tabs .xc-tabs__tab[aria-selected="true"]{
  background:var(--xc-nebula);
  color:#FFFFFF;
}
.page-about .about-tabs .xc-tabs__tab:focus-visible{
  outline:2px solid var(--xc-nebula);
  outline-offset:2px;
}
.page-about .about-tabs .xc-tabs__panel{outline:none;}
.page-about .about-tabs .xc-tabs__panel[hidden]{display:none;}
.page-about .about-tabs__title{
  margin:0 0 10px;
  font-size:19px;
  font-weight:700;
  color:var(--about-paper-ink);
}
.page-about .about-tabs .xc-tabs__panel > p{
  margin:0 0 12px;
  max-width:40em;
  font-size:16px;
  line-height:1.9;
  color:var(--about-paper-mut);
}
.page-about .about-tabs .xc-tabs__panel > p.about-tabs__result{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  padding:12px 14px;
  margin:0;
  border-left:3px solid var(--xc-gold);
  border-radius:0 8px 8px 0;
  background:rgba(75,79,224,.08);
  font-size:15px;
  line-height:1.8;
  color:var(--about-paper-ink);
}
.page-about .about-tabs__result span{
  font-family:var(--xc-font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--xc-nebula);
}

/* ---------- 版本演进轨道 ---------- */
.page-about .about-trackwrap{
  margin-bottom:20px;
  padding:24px 18px 22px;
  border-radius:var(--xc-r-md);
  background:linear-gradient(155deg,#14152F 0%,#1E2158 58%,#14152F 100%);
}
.page-about .about-track{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
}
.page-about .about-track::before{
  content:"";
  position:absolute;
  left:8px;
  top:30px;
  bottom:34px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(53,224,208,.8),rgba(139,124,246,.6),rgba(245,185,59,.85));
}
.page-about .about-stage{
  --dot:18px;
  position:relative;
  padding:16px 0 18px 32px;
  outline:none;
}
.page-about .about-stage__dot{
  position:absolute;
  left:0;
  top:22px;
  width:var(--dot);
  height:var(--dot);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFFFFF,var(--xc-data) 58%,#1B6D68 100%);
  box-shadow:0 0 0 4px rgba(53,224,208,.16);
}
.page-about .about-stage__ver{
  margin:0 0 6px;
  font-family:var(--xc-font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--xc-gold);
  font-variant-numeric:tabular-nums;
}
.page-about .about-stage__name{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.42;
  font-weight:700;
  color:var(--xc-star);
}
.page-about .about-stage__panel{
  margin:10px 0 0;
  max-height:none;
  opacity:1;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.82;
  color:var(--xc-mist);
  transition:max-height .3s ease,opacity .22s ease,margin-top .3s ease;
}
.page-about .about-stage:focus-visible{
  border-radius:8px;
  box-shadow:0 0 0 2px rgba(245,185,59,.6);
}
@media (min-width:760px){
  .page-about .about-trackwrap{padding:30px 26px 26px;}
  .page-about .about-track{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 20px;
  }
  .page-about .about-track::before{
    left:0;
    right:0;
    top:26px;
    bottom:auto;
    width:auto;
    height:2px;
    background:linear-gradient(90deg,rgba(53,224,208,.8),rgba(139,124,246,.65),rgba(245,185,59,.9));
  }
  .page-about .about-stage{padding:56px 0 8px;}
  .page-about .about-stage:nth-child(1){--dot:20px;}
  .page-about .about-stage:nth-child(2){--dot:28px;}
  .page-about .about-stage:nth-child(3){--dot:36px;}
  .page-about .about-stage:nth-child(4){--dot:46px;}
  .page-about .about-stage__dot{
    left:0;
    top:calc(26px - var(--dot) / 2);
  }
  .page-about .about-stage__panel{
    max-height:0;
    opacity:0;
    margin-top:0;
  }
  .page-about .about-stage:hover .about-stage__panel,
  .page-about .about-stage:focus .about-stage__panel,
  .page-about .about-stage:focus-within .about-stage__panel{
    max-height:320px;
    opacity:1;
    margin-top:10px;
  }
}

/* ---------- 团队 ---------- */
.page-about .about-team{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:24px;
}
.page-about .about-roster{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.page-about .about-roster__item{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-top:2px solid var(--about-paper-ink);
  background:rgba(75,79,224,.07);
}
.page-about .about-roster__num{
  font-family:var(--xc-font-mono);
  font-size:22px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--xc-nebula);
}
.page-about .about-roster__name{
  font-size:13.5px;
  line-height:1.5;
  color:var(--about-paper-mut);
}
.page-about .about-figure--team{margin:0;}
.page-about .about-rhythm{
  padding:18px 16px 16px;
  border:1px solid var(--about-paper-line-strong);
  border-radius:var(--xc-r-sm);
  background:rgba(20,21,47,.045);
}
.page-about .about-rhythm__title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--about-paper-ink);
}
.page-about .about-rhythm__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-about .about-rhythm__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--about-paper-line);
  font-size:15px;
  line-height:1.7;
  color:var(--about-paper-mut);
}
.page-about .about-rhythm__list li:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.page-about .about-rhythm__list b{
  font-family:var(--xc-font-mono);
  font-size:13.5px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--about-paper-ink);
}
@media (min-width:820px){
  .page-about .about-team{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
    align-items:start;
  }
}

/* ---------- 三类人 ---------- */
.page-about .about-people{
  margin:22px 0 0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.page-about .about-person{
  padding:18px 16px 16px;
  border-left:3px solid var(--xc-gold);
  border-radius:0 10px 10px 0;
  background:rgba(20,21,47,.05);
}
.page-about .about-person__label{
  margin:0 0 8px;
  font-family:var(--xc-font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--xc-nebula);
}
.page-about .about-person h3{
  margin:0 0 10px;
  font-size:17px;
  line-height:1.45;
  font-weight:700;
  color:var(--about-paper-ink);
}
.page-about .about-person__text{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--about-paper-mut);
}
@media (min-width:820px){
  .page-about .about-people{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
}

/* ---------- 合作生态 ---------- */
.page-about .about-eco{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.page-about .about-eco li{
  padding:14px 12px;
  border-top:2px solid var(--about-paper-ink);
  background:rgba(75,79,224,.07);
}
.page-about .about-eco__num{
  display:block;
  font-family:var(--xc-font-mono);
  font-size:24px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--xc-nebula);
}
.page-about .about-eco__txt{
  display:block;
  margin-top:6px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--about-paper-mut);
}
@media (min-width:760px){
  .page-about .about-eco{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------- 下一步与收束 ---------- */
.page-about .about-next{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-about .about-next li{
  padding:16px 14px;
  border:1px dashed var(--about-paper-line-strong);
  border-radius:var(--xc-r-sm);
}
.page-about .about-next__no{
  margin:0 0 8px;
  font-family:var(--xc-font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--xc-nebula);
}
.page-about .about-next h3{
  margin:0 0 8px;
  font-size:16.5px;
  line-height:1.45;
  font-weight:700;
  color:var(--about-paper-ink);
}
.page-about .about-next__text{
  margin:0;
  font-size:14.5px;
  line-height:1.82;
  color:var(--about-paper-mut);
}
.page-about .about-close{
  margin-top:24px;
  padding-top:20px;
  border-top:2px solid var(--about-paper-ink);
  display:grid;
  gap:16px;
}
.page-about .about-close p{
  margin:0;
  max-width:40em;
  font-size:16px;
  line-height:1.9;
  color:var(--about-paper-mut);
}
.page-about .about-close__acts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-about .about-close .xc-btn--ghost{
  background:transparent;
  color:var(--about-paper-ink);
  border:1px solid var(--about-paper-line-strong);
}
.page-about .about-close .xc-btn--ghost:hover{
  background:rgba(20,21,47,.07);
}
@media (min-width:820px){
  .page-about .about-next{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
}
<<<END>>>
