.page-about{
  --about-line:rgba(96,120,140,.24);
  --about-line-dark:rgba(169,245,239,.20);
  background:var(--bg-page);
  color:var(--ink);
  font-family:var(--font-body);
}

/* 首屏 */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  padding:calc(var(--header-h) + 2.75rem) 0 3.25rem;
  background:
    radial-gradient(circle at 84% 6%,rgba(46,230,214,.20),transparent 56%),
    linear-gradient(158deg,#0C2439 0%,var(--deep) 70%);
  color:#F2FAFC;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(rgba(169,245,239,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,245,239,.07) 1px,transparent 1px);
  background-size:72px 72px;
}
.page-about .about-hero .container{position:relative;z-index:1;}

.page-about .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  margin-bottom:1.75rem;
  font-size:.8125rem;
  color:var(--mist);
}
.page-about .breadcrumb a{
  color:var(--mist);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--ease);
}
.page-about .breadcrumb a:hover,
.page-about .breadcrumb a:focus-visible{border-color:var(--cyan);}
.page-about .breadcrumb__sep{color:rgba(169,245,239,.5);}
.page-about .breadcrumb [aria-current]{color:#EAF6F8;}

.page-about .about-hero .exhibit-label{
  margin-bottom:1rem;
  color:var(--cyan);
  letter-spacing:.14em;
}
.page-about .about-hero .title-hero{
  margin:0 0 1.25rem;
  font-size:clamp(2.4rem,7vw,5rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:900;
  color:#fff;
}
.page-about .about-hero .lede{
  max-width:44rem;
  color:rgba(234,246,248,.86);
  font-size:1rem;
  line-height:1.85;
}

.page-about .hero-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
  margin:2rem 0 0;
  padding:1.25rem 0 0;
  list-style:none;
  border-top:1px solid var(--about-line-dark);
}
.page-about .hero-facts__item{display:flex;flex-direction:column;gap:.25rem;}
.page-about .hero-facts__num{
  font-size:1.35rem;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:-.01em;
}
.page-about .hero-facts__label{
  font-size:.8125rem;
  line-height:1.6;
  color:rgba(169,245,239,.78);
}

/* 主区域双栏 */
.page-about .about-layout{padding-top:2.75rem;padding-bottom:3.5rem;}

.page-about .about-index{margin-bottom:2rem;}
.page-about .about-index__title{
  margin:0 0 .75rem;
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--slate);
}
.page-about .about-index__list{
  display:flex;
  gap:.5rem;
  margin:0;
  padding:0 0 .5rem;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.page-about .index-link{
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  padding:.45rem .75rem;
  white-space:nowrap;
  border:1px solid var(--about-line);
  border-radius:999px;
  font-size:.8125rem;
  color:var(--slate);
  text-decoration:none;
  transition:color var(--ease),border-color var(--ease),background var(--ease);
}
.page-about .index-link .mono{font-size:.625rem;letter-spacing:.08em;color:var(--teal);}
.page-about .index-link:hover,
.page-about .index-link:focus-visible{
  color:var(--deep);
  border-color:var(--teal);
  background:rgba(169,245,239,.35);
}
.page-about .index-link[data-active]{
  color:var(--deep);
  font-weight:700;
  border-color:var(--cyan);
  background:rgba(46,230,214,.18);
}

/* 章节 */
.page-about .about-chapter + .about-chapter{margin-top:3.5rem;}

.page-about .chapter-head{margin-bottom:1.75rem;}
.page-about .chapter-head .exhibit-label{
  margin-bottom:.6rem;
  color:var(--teal);
  letter-spacing:.14em;
}
.page-about .chapter-head .title-section{
  margin:0 0 .9rem;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:800;
  color:var(--deep);
}
.page-about .chapter-lede{
  max-width:42rem;
  margin:0;
  font-size:1rem;
  line-height:1.85;
  color:#3D4E5C;
}

.page-about .note{
  margin:1.5rem 0 0;
  padding-left:1rem;
  border-left:2px solid var(--cyan);
  font-size:.8125rem;
  line-height:1.75;
  color:var(--slate);
}

/* 图片 */
.page-about .figure{margin:0;}
.page-about .figure--wide{margin-bottom:2rem;}
.page-about .figure__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--about-line);
}
.page-about .figure__caption{
  margin-top:.7rem;
  font-size:.75rem;
  line-height:1.7;
  color:var(--slate);
}

/* 时间线 */
.page-about .timeline{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:8px;
  width:1px;
  background:linear-gradient(180deg,var(--teal),rgba(11,107,102,.12));
}
.page-about .timeline__item{padding:0 0 1.5rem 2rem;}
.page-about .timeline__item:last-child{padding-bottom:0;}
.page-about .timeline__detail{
  background:#fff;
  border:1px solid var(--about-line);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem 1rem;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.page-about .timeline__detail[open]{
  border-color:rgba(46,230,214,.55);
  box-shadow:var(--shadow-soft);
}
.page-about .timeline__head{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  cursor:pointer;
  list-style:none;
}
.page-about .timeline__head::-webkit-details-marker{display:none;}
.page-about .timeline__head::before{
  content:"";
  position:absolute;
  left:-1.95rem;
  top:.3rem;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(46,230,214,.16);
  transition:background var(--ease),box-shadow var(--ease);
}
.page-about .timeline__detail[open] .timeline__head::before{
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(243,182,74,.22);
}
.page-about .timeline__year{
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--teal);
}
.page-about .timeline__title{
  font-size:1rem;
  font-weight:700;
  color:var(--deep);
}
.page-about .timeline__body{
  margin:.65rem 0 0;
  font-size:.875rem;
  line-height:1.8;
  color:#445663;
}

/* 准则 */
.page-about .principles{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--about-line);
}
.page-about .principle{
  display:grid;
  gap:.5rem;
  padding:1.35rem 0;
  border-bottom:1px solid var(--about-line);
}
.page-about .principle__num{
  font-size:.8125rem;
  letter-spacing:.14em;
  color:var(--teal);
}
.page-about .principle__title{
  margin:0 0 .45rem;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--deep);
}
.page-about .principle__desc{
  margin:0;
  font-size:.9375rem;
  line-height:1.8;
  color:#445663;
}
.page-about .principle__metric{
  align-self:start;
  display:inline-block;
  padding:.3rem .6rem;
  border-radius:999px;
  background:rgba(46,230,214,.16);
  color:var(--teal);
  font-size:.6875rem;
  letter-spacing:.06em;
  white-space:nowrap;
}

/* 团队 */
.page-about .chapter-split{display:grid;gap:1.5rem;}
.page-about .team-matrix{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
.page-about .team-cell{
  padding:1.15rem 1.15rem 1.3rem;
  border-radius:var(--radius);
  border:1px solid var(--about-line);
  transition:transform var(--ease),box-shadow var(--ease);
}
.page-about .team-cell:hover,
.page-about .team-cell:focus-within{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}
.page-about .team-cell__num{
  margin:0 0 .35rem;
  font-size:clamp(1.9rem,5vw,2.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
}
.page-about .team-cell__name{
  margin:0 0 .45rem;
  font-size:1rem;
  font-weight:700;
}
.page-about .team-cell__desc{
  margin:0;
  font-size:.875rem;
  line-height:1.8;
}
.page-about .team-cell--content{
  background:linear-gradient(155deg,#123853,var(--blueprint));
  border-color:transparent;
  color:#EAF6F8;
}
.page-about .team-cell--content .team-cell__num{color:var(--cyan);}
.page-about .team-cell--tech{
  background:var(--fog);
  color:var(--ink);
}
.page-about .team-cell--tech .team-cell__num{color:var(--blueprint);}
.page-about .team-cell--service{
  background:var(--paper);
  color:var(--ink);
}
.page-about .team-cell--service .team-cell__num{color:var(--teal);}
.page-about .team-cell--ops{
  background:#fff;
  color:var(--ink);
}
.page-about .team-cell--ops .team-cell__num{color:var(--teal);}

/* 保障 */
.page-about .about-chapter--dark{
  position:relative;
  overflow:hidden;
  padding:clamp(1.5rem,4vw,2.75rem);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 90% 0%,rgba(46,230,214,.18),transparent 58%),
    linear-gradient(155deg,#0C2439,var(--deep) 72%);
  color:#E7F3F6;
}
.page-about .chapter-head--dark .exhibit-label{color:var(--cyan);}
.page-about .chapter-head--dark .title-section{color:#fff;}
.page-about .chapter-head--dark .chapter-lede{color:rgba(231,243,246,.82);}

.page-about .assurance-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--about-line-dark);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.page-about .assurance-item{
  padding:1.1rem 1.1rem 1.25rem;
  background:rgba(15,46,74,.86);
}
.page-about .assurance-item__num{
  margin:0 0 .35rem;
  font-size:clamp(1.5rem,4.5vw,2rem);
  font-weight:700;
  line-height:1.1;
  color:var(--cyan);
  letter-spacing:-.02em;
}
.page-about .assurance-item__label{
  margin:0;
  font-size:.8125rem;
  line-height:1.75;
  color:rgba(231,243,246,.8);
}
.page-about .assurance-note{
  margin:1.5rem 0 0;
  padding-left:1rem;
  border-left:2px solid var(--amber);
  font-size:.8125rem;
  line-height:1.8;
  color:rgba(169,245,239,.86);
}

/* 覆盖与伙伴 */
.page-about .coverage-grid{display:grid;gap:1.75rem;}
.page-about .coverage-facts{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:1rem;
}
.page-about .coverage-fact{
  display:grid;
  gap:.2rem;
  padding-bottom:1rem;
  border-bottom:1px dashed var(--about-line);
}
.page-about .coverage-fact:last-child{border-bottom:0;padding-bottom:0;}
.page-about .coverage-fact__num{
  font-size:clamp(1.4rem,4vw,1.9rem);
  font-weight:700;
  line-height:1.15;
  color:var(--deep);
  letter-spacing:-.02em;
}
.page-about .coverage-fact__label{
  font-size:.875rem;
  line-height:1.75;
  color:#445663;
}

/* 季度摘要 */
.page-about .log-list{
  display:grid;
  gap:.65rem;
}
.page-about .log-detail{
  background:var(--paper);
  border:1px solid rgba(17,26,34,.10);
  border-radius:var(--radius-sm);
  transition:border-color var(--ease),background var(--ease);
}
.page-about .log-detail[open]{
  background:#fff;
  border-color:rgba(11,107,102,.35);
}
.page-about .log-detail__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  padding:.9rem 1rem;
  cursor:pointer;
  list-style:none;
  font-size:.9375rem;
  font-weight:700;
  color:var(--deep);
}
.page-about .log-detail__head::-webkit-details-marker{display:none;}
.page-about .log-detail__value{
  flex:none;
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--teal);
}
.page-about .log-detail__body{
  margin:0;
  padding:0 1rem 1.05rem;
  font-size:.875rem;
  line-height:1.85;
  color:#445663;
}

/* 结尾 */
.page-about .about-cta{
  position:relative;
  margin-top:3rem;
  padding:clamp(1.6rem,4vw,2.5rem);
  border-radius:var(--radius);
  background:linear-gradient(140deg,#0F2E4A,#081826 78%);
  color:#EAF6F8;
}
.page-about .about-cta .exhibit-label{
  color:var(--amber);
  letter-spacing:.14em;
  margin-bottom:.7rem;
}
.page-about .about-cta__title{
  margin:0 0 .75rem;
  font-size:clamp(1.4rem,3.4vw,2.1rem);
  line-height:1.25;
  font-weight:800;
  color:#fff;
}
.page-about .about-cta__desc{
  max-width:40rem;
  margin:0 0 1.5rem;
  font-size:.9375rem;
  line-height:1.85;
  color:rgba(234,246,248,.82);
}
.page-about .cta-links{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

/* 平板及以上 */
@media (min-width:640px){
  .page-about .hero-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
  .page-about .principle{
    grid-template-columns:3rem minmax(0,1fr);
    gap:.4rem 1rem;
    padding:1.5rem 0;
  }
  .page-about .principle__text{grid-column:2;}
  .page-about .principle__metric{
    grid-column:2;
    justify-self:start;
  }
  .page-about .team-matrix{
    grid-template-columns:1.25fr 1fr;
    grid-template-areas:
      "content tech"
      "service ops";
  }
  .page-about .team-cell--content{grid-area:content;}
  .page-about .team-cell--tech{grid-area:tech;}
  .page-about .team-cell--service{grid-area:service;}
  .page-about .team-cell--ops{grid-area:ops;}
  .page-about .assurance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:780px){
  .page-about .timeline{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0 1rem;
  }
  .page-about .timeline::before{
    left:0;
    right:0;
    top:6px;
    bottom:auto;
    width:auto;
    height:1px;
    background:linear-gradient(90deg,var(--teal),var(--cyan),rgba(46,230,214,.15));
  }
  .page-about .timeline__item{padding:2.4rem 0 0;}
  .page-about .timeline__head::before{
    left:0;
    top:-2.05rem;
  }
  .page-about .timeline__detail{
    padding:.8rem .9rem .95rem;
    height:100%;
  }
  .page-about .chapter-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:2rem;}
  .page-about .coverage-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:2.25rem;}
  .page-about .assurance-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* 桌面端索引栏 */
@media (min-width:960px){
  .page-about .about-layout{
    display:grid;
    grid-template-columns:196px minmax(0,1fr);
    gap:clamp(2rem,4vw,3.75rem);
    align-items:start;
    padding-top:3.5rem;
  }
  .page-about .about-index{
    position:sticky;
    top:calc(var(--header-h) + 1.75rem);
    margin-bottom:0;
  }
  .page-about .about-index__list{
    display:block;
    overflow:visible;
    padding-bottom:0;
  }
  .page-about .about-index__list li + li{margin-top:.15rem;}
  .page-about .index-link{
    display:flex;
    width:100%;
    white-space:normal;
    padding:.5rem 0 .5rem .85rem;
    border:0;
    border-left:2px solid var(--about-line);
    border-radius:0;
    background:transparent;
    font-size:.875rem;
    line-height:1.5;
  }
  .page-about .index-link:hover,
  .page-about .index-link:focus-visible{
    background:transparent;
    color:var(--deep);
    border-left-color:var(--teal);
  }
  .page-about .index-link[data-active]{
    background:transparent;
    border-left-color:var(--cyan);
  }
  .page-about .chapter-lede{font-size:1.0625rem;}
}

@media (min-width:1200px){
  .page-about .about-hero{padding:calc(var(--header-h) + 3.5rem) 0 4rem;}
  .page-about .about-chapter + .about-chapter{margin-top:4.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .page-about .team-cell:hover,
  .page-about .team-cell:focus-within{transform:none;}
}
<<<END>>>