.page-about{
  --about-panel:#FBF7EE;
  --about-soft:rgba(7,16,19,.68);
  --about-hair:rgba(220,229,229,.22);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
  overflow-x:hidden;
}
.page-about h1,
.page-about h2,
.page-about h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.01em;
  margin:0;
}
.page-about h1{font-size:clamp(2.1rem,7.2vw,4.1rem);}
.page-about h2{font-size:clamp(1.55rem,4.4vw,2.4rem);}
.page-about h3{font-size:clamp(1.02rem,2.2vw,1.2rem);letter-spacing:.02em;}
.page-about p{margin:0;line-height:1.85;font-size:1rem;}
.page-about .mono{font-family:var(--font-mono);letter-spacing:.06em;}
.page-about .eyebrow{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 .8rem;
}
.page-about .breadcrumb{margin-block:1.15rem 0;}

/* 首屏 */
.page-about .about-hero{padding-block:clamp(1.5rem,3.5vw,2.5rem) clamp(2rem,5vw,3.5rem);}
.page-about .about-hero__grid{
  display:grid;
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.page-about .about-hero__lead{
  margin-top:1.1rem;
  max-width:34rem;
  font-size:clamp(1rem,1.7vw,1.1rem);
  color:var(--about-soft);
}
.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.6rem;
}
.page-about .about-facts{
  list-style:none;
  margin:1.7rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--about-hair);
  border:1px solid var(--about-hair);
}
.page-about .about-facts li{
  background:var(--paper);
  padding:.85rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.page-about .about-facts .num{
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,3.4vw,1.9rem);
  font-weight:600;
  line-height:1;
  color:var(--teal);
}
.page-about .about-facts li span:last-child{
  font-size:.82rem;
  line-height:1.5;
  color:var(--about-soft);
}
.page-about .media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--edge);
  background:var(--rail);
}
.page-about .media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.page-about .about-hero__media{aspect-ratio:16/10;}
.page-about .about-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(165deg,rgba(11,43,51,.06) 0%,rgba(11,43,51,.62) 100%);
  pointer-events:none;
}
.page-about .about-hero__caption{
  position:absolute;
  left:1rem;
  bottom:.85rem;
  z-index:1;
  font-size:.7rem;
  letter-spacing:.1em;
  color:rgba(247,243,234,.9);
}

/* 视觉母题 */
.page-about .about-motive{
  background:var(--rail);
  color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem);
  margin-top:clamp(.75rem,2vw,1.5rem);
}
.page-about .about-motive__grid{
  display:grid;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.page-about .about-motive h2{color:var(--paper);}
.page-about .about-motive .eyebrow{color:var(--green);}
.page-about .about-motive__copy p{
  margin-top:1rem;
  max-width:40rem;
  color:rgba(247,243,234,.76);
}
.page-about .about-legend{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:rgba(220,229,229,.16);
  border:1px solid rgba(220,229,229,.16);
}
.page-about .about-legend li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.95rem 1rem;
  background:var(--rail-soft);
}
.page-about .about-legend__chip{
  width:.85rem;
  height:.85rem;
  flex:none;
  margin-top:.4rem;
  border:1px solid rgba(247,243,234,.45);
}
.page-about .about-legend__chip--rail{background:var(--rail);}
.page-about .about-legend__chip--orange{background:var(--orange);}
.page-about .about-legend__chip--green{background:var(--green);}
.page-about .about-legend__chip--amber{background:var(--amber);}
.page-about .about-legend__body{display:block;}
.page-about .about-legend__body strong{
  display:block;
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.05em;
}
.page-about .about-legend__desc{
  display:block;
  margin-top:.2rem;
  font-size:.82rem;
  line-height:1.65;
  color:rgba(247,243,234,.7);
}

/* 工作原则 */
.page-about .about-principles-block{padding-block:clamp(2.5rem,6vw,4.5rem);}
.page-about .about-principles{
  display:grid;
  gap:1rem;
  margin-top:1.75rem;
}
.page-about .about-panel{
  border:1px solid var(--edge);
  background:var(--about-panel);
  padding:clamp(1.15rem,2.6vw,1.75rem);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.page-about .about-panel:hover,
.page-about .about-panel:focus-within{
  border-color:var(--orange);
  transform:translateY(-3px);
  box-shadow:0 16px 34px -28px rgba(7,16,19,.85);
}
.page-about .about-panel__index{
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--orange);
}
.page-about .about-panel p{font-size:.95rem;color:var(--about-soft);}
.page-about .about-panel__result{
  margin-top:auto;
  padding-top:.85rem;
  border-top:1px dashed var(--mist);
  font-family:var(--font-mono);
  font-size:.84rem !important;
  line-height:1.7;
  color:var(--teal) !important;
}
.page-about .about-panel--lead{
  background:var(--rail);
  border-color:transparent;
  color:var(--paper);
}
.page-about .about-panel--lead h3{color:var(--paper);}
.page-about .about-panel--lead p{color:rgba(247,243,234,.78);}
.page-about .about-panel--lead .about-panel__index{color:var(--green);}
.page-about .about-panel--lead .about-panel__result{
  border-top-color:rgba(220,229,229,.25);
  color:var(--amber) !important;
}

/* 版本演进 */
.page-about .about-timeline-block{
  padding-block:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(220,229,229,.34),rgba(247,243,234,0) 55%);
}
.page-about .about-timeline__grid{
  display:grid;
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
.page-about .about-timeline__intro > p{margin-top:.9rem;max-width:32rem;color:var(--about-soft);}
.page-about .about-scale{
  display:block;
  width:100%;
  max-width:21rem;
  height:auto;
  margin-top:1.25rem;
  color:var(--teal);
}
.page-about .about-timeline__fig{
  margin:1.35rem 0 0;
  aspect-ratio:3/2;
}
.page-about .about-timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 1.6rem;
  position:relative;
}
.page-about .about-timeline::before{
  content:"";
  position:absolute;
  left:.5rem;
  top:.45rem;
  bottom:.9rem;
  width:1px;
  background:linear-gradient(var(--teal),rgba(47,125,122,.12));
}
.page-about .about-timeline__item{
  position:relative;
  padding-bottom:1.55rem;
}
.page-about .about-timeline__item:last-child{padding-bottom:0;}
.page-about .about-timeline__item::before{
  content:"";
  position:absolute;
  left:-1.35rem;
  top:.42rem;
  width:.5rem;
  height:.5rem;
  background:var(--paper);
  border:1px solid var(--teal);
}
.page-about .about-timeline__item:first-child::before{
  background:var(--orange);
  border-color:var(--orange);
}
.page-about .about-timeline__phase{
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--teal);
}
.page-about .about-timeline__item h3{margin:.3rem 0 .35rem;}
.page-about .about-timeline__item p:last-child{font-size:.94rem;color:var(--about-soft);}

/* 团队 */
.page-about .about-team{padding-block:clamp(2.5rem,6vw,4.5rem);}
.page-about .about-team__head > p:last-child{
  margin-top:.9rem;
  max-width:44rem;
  color:var(--about-soft);
}
.page-about .about-team__grid{
  display:grid;
  gap:clamp(1.5rem,3.5vw,2.5rem);
  margin-top:1.9rem;
  align-items:center;
}
.page-about .about-bar + .about-bar{margin-top:1.15rem;}
.page-about .about-bar__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  font-size:.84rem;
  color:var(--about-soft);
}
.page-about .about-bar__top .num{
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.page-about .about-bar__track{
  margin-top:.5rem;
  height:.55rem;
  background:var(--mist);
  overflow:hidden;
}
.page-about .about-bar__fill{display:block;height:100%;background:var(--teal);}
.page-about .about-bar__fill--a{width:58%;}
.page-about .about-bar__fill--b{width:25%;background:var(--orange);}
.page-about .about-bar__fill--c{width:17%;background:var(--amber);}
.page-about .about-team__fig{
  margin:0;
  aspect-ratio:4/3;
}
.page-about .about-team__sources{
  display:grid;
  gap:1.25rem;
  margin-top:1.9rem;
  padding-top:1.5rem;
  border-top:1px solid var(--edge);
}
.page-about .about-team__sources p{
  margin-top:.45rem;
  font-size:.93rem;
  color:var(--about-soft);
}

/* 合作生态 */
.page-about .about-partners{
  background:var(--mist);
  padding-block:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
}
.page-about .about-partners__lead{
  margin-top:.9rem;
  max-width:46rem;
  color:rgba(7,16,19,.78);
}
.page-about .about-tree{
  display:grid;
  gap:.9rem;
  margin-top:1.8rem;
}
.page-about .about-tree__root{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:1rem 1.15rem;
  background:var(--white);
  border:1px solid var(--teal);
  font-size:.9rem;
}
.page-about .about-tree__root .mono{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.06em;
}
.page-about .about-tree__root span:last-child{
  font-size:.82rem;
  color:var(--about-soft);
}
.page-about .about-tree__branches{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.9rem;
}
.page-about .about-tree__branches li{
  position:relative;
  background:var(--paper);
  border:1px solid var(--edge);
  border-top:3px solid var(--teal);
  padding:1rem 1.15rem;
}
.page-about .about-tree__branches li > .mono{
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--teal);
}
.page-about .about-tree__branches h3{margin:.35rem 0 .4rem;}
.page-about .about-tree__branches p:last-child{
  font-size:.9rem;
  color:var(--about-soft);
}
.page-about .about-partners__note{
  margin-top:1.5rem;
  max-width:48rem;
  font-size:.92rem;
  color:rgba(7,16,19,.78);
}

/* 服务与联系 */
.page-about .about-service{padding-block:clamp(2.5rem,6vw,4.5rem);}
.page-about .about-service__panel{
  display:grid;
  gap:clamp(1.5rem,3.5vw,3rem);
  padding:clamp(1.25rem,3.2vw,2.5rem);
  background:var(--rail);
  color:var(--paper);
}
.page-about .about-service__panel h2{color:var(--paper);}
.page-about .about-service__panel .eyebrow{color:var(--amber);}
.page-about .about-service__text{
  margin-top:1rem;
  max-width:38rem;
  color:rgba(247,243,234,.78);
  font-size:.96rem;
}
.page-about .about-service__meta{
  list-style:none;
  margin:1.35rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
  font-size:.88rem;
}
.page-about .about-service__meta li{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:.75rem;
  padding-top:.55rem;
  border-top:1px solid rgba(220,229,229,.16);
}
.page-about .about-service__meta .mono{
  font-size:.72rem;
  letter-spacing:.12em;
  color:rgba(247,243,234,.62);
}
.page-about .about-service__meta li > span:last-child{
  color:rgba(247,243,234,.92);
  word-break:break-word;
}
.page-about .about-service__links{
  align-self:start;
  display:grid;
  gap:1px;
  background:rgba(220,229,229,.18);
  border:1px solid rgba(220,229,229,.18);
}
.page-about .about-service__links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.15rem;
  background:var(--rail-soft);
  color:var(--paper);
  text-decoration:none;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.04em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.page-about .about-service__links a:hover,
.page-about .about-service__links a:focus-visible{
  background:var(--orange);
  color:var(--ink);
}

/* 断点 */
@media (max-width:26rem){
  .page-about .about-service__meta li{
    grid-template-columns:1fr;
    gap:.15rem;
  }
}
@media (min-width:48rem){
  .page-about .about-facts{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-about .about-team__sources{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;}
}
@media (min-width:52rem){
  .page-about .about-principles{grid-template-columns:1.3fr 1fr .82fr;}
  .page-about .about-team__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
  .page-about .about-tree__branches{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-about .about-tree__branches li::before{
    content:"";
    position:absolute;
    top:-.9rem;
    left:1.4rem;
    width:1px;
    height:.9rem;
    background:var(--teal);
  }
  .page-about .about-service__panel{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);}
}
@media (min-width:58rem){
  .page-about .about-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);}
  .page-about .about-motive__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
  .page-about .about-timeline__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
  .page-about .about-hero__media{aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){
  .page-about .about-panel,
  .page-about .about-service__links a{transition:none;}
  .page-about .about-panel:hover,
  .page-about .about-panel:focus-within{transform:none;}
}