.page-about{
  --about-rule:rgba(30,78,126,.22);
  --about-rule-strong:rgba(30,78,126,.38);
  --about-body:rgba(26,36,50,.8);
  --about-body-soft:rgba(26,36,50,.62);
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--font-body);
  padding-block:0 clamp(24px,4vw,48px);
}

.page-about .about-frame{
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
}

.page-about .about-flow{
  min-width:0;
}

.page-about .breadcrumbs{
  padding-block:18px 0;
}

/* 左侧年份刻度 */
.page-about .about-scale{
  display:none;
}

.page-about .scale-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:52px;
}

.page-about .scale-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.page-about .scale-year{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--about-body-soft);
}

.page-about .scale-tick{
  flex:1 1 auto;
  height:1px;
  background:var(--port-line);
  opacity:.4;
}

/* 首屏框景 */
.page-about .about-hero{
  padding-block:clamp(20px,3vw,32px) clamp(18px,3vw,28px);
}

.page-about .hero-window{
  position:relative;
  border:1px solid var(--about-rule-strong);
  padding:clamp(18px,3.4vw,38px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(58,125,124,.1) 0%, rgba(58,125,124,0) 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(233,180,76,.12) 0%, rgba(233,180,76,0) 60%);
}

.page-about .hero-window::before,
.page-about .hero-window::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:2px solid var(--amber);
}

.page-about .hero-window::before{
  top:-1px;
  left:-1px;
  border-right:0;
  border-bottom:0;
}

.page-about .hero-window::after{
  right:-1px;
  bottom:-1px;
  border-top:0;
  border-left:0;
}

.page-about .hero-ruler{
  height:9px;
  margin-bottom:clamp(16px,2.6vw,26px);
  background:repeating-linear-gradient(90deg, rgba(30,78,126,.5) 0 1px, transparent 1px 12px);
  border-bottom:1px solid var(--about-rule);
  opacity:.85;
}

.page-about .hero-title{
  margin:12px 0 20px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2rem,5.4vw,4rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--ink-800);
  max-width:15em;
}

.page-about .hero-lead{
  margin:0;
  font-size:clamp(15.5px,1.3vw,17px);
  line-height:1.95;
  color:var(--about-body);
  max-width:38em;
}

.page-about .hero-stats{
  list-style:none;
  margin:clamp(20px,3.4vw,34px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:var(--about-rule);
  border:1px solid var(--about-rule);
}

.page-about .stat{
  background:var(--paper);
  padding:14px 12px;
  min-width:0;
}

.page-about .stat-num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(1.3rem,4.6vw,2rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink-800);
  line-height:1.1;
}

.page-about .stat-label{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--about-body-soft);
}

/* 章节通用 */
.page-about .chapter{
  position:relative;
  padding-block:clamp(38px,6vw,78px);
  border-top:1px solid var(--about-rule);
}

.page-about .chapter-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:20px;
}

.page-about .chapter-num{
  font-family:var(--font-mono);
  font-size:clamp(1.7rem,4vw,3rem);
  line-height:1;
  font-weight:700;
  color:rgba(58,125,124,.5);
}

.page-about .chapter-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.35rem,3.1vw,2.1rem);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--ink-800);
}

.page-about .chapter p{
  color:var(--about-body);
  font-size:16px;
  line-height:1.9;
}

.page-about .chapter-lead{
  margin:0 0 22px;
}

.page-about .chapter-note{
  margin:22px 0 0;
  font-size:14px;
  color:var(--about-body-soft);
}

.page-about .chapter-note a{
  color:var(--ink-700);
  text-decoration:none;
  border-bottom:1px solid var(--amber);
  padding-bottom:1px;
}

.page-about .chapter-note a:hover{
  color:var(--celadon);
}

.page-about .chapter-action{
  margin:24px 0 0;
}

/* 01 */
.page-about .split{
  display:grid;
  gap:24px;
}

.page-about .split-main p{
  margin:0 0 1.1em;
}

.page-about .split-main p:last-child{
  margin-bottom:0;
}

.page-about .issue-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--about-rule);
  border:1px solid var(--about-rule);
}

.page-about .issue{
  background:var(--paper);
  padding:18px 16px;
}

.page-about .issue-key{
  display:inline-block;
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--celadon);
  margin-bottom:8px;
}

.page-about .issue-title{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
  color:var(--ink-800);
}

.page-about .issue-text{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--about-body);
}

/* 02 时间轴 */
.page-about .timeline-figure{
  aspect-ratio:2 / 1;
  margin:0 0 18px;
}

.page-about .ver-index{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}

.page-about .ver-link{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  padding:7px 11px;
  border:1px solid var(--about-rule-strong);
  color:var(--ink-700);
  text-decoration:none;
  background:transparent;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}

.page-about .ver-link:hover,
.page-about .ver-link:focus-visible{
  border-color:var(--amber);
  background:rgba(233,180,76,.14);
  color:var(--ink-800);
}

.page-about .track{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.page-about .node{
  position:relative;
  background:var(--ink-800);
  border:1px solid var(--port-line);
  padding:20px 18px 22px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}

.page-about .node::after{
  content:"";
  position:absolute;
  top:-1px;
  right:-1px;
  width:13px;
  height:13px;
  background:var(--paper);
  border-left:1px solid var(--port-line);
  clip-path:polygon(0 0, 100% 100%, 0 100%);
  transition:border-color .25s var(--ease);
}

.page-about .node:hover{
  border-color:var(--amber);
  transform:translateY(-2px);
}

.page-about .node:hover::after{
  border-left-color:var(--amber);
}

.page-about .node-ver{
  display:inline-block;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--amber);
  line-height:1;
}

.page-about .node-stage{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--celadon-mist);
}

.page-about .node-title{
  margin:12px 0 10px;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.45;
  color:var(--paper);
}

.page-about .node p{
  color:var(--text);
  font-size:14.5px;
  line-height:1.85;
  margin:0;
}

/* 03 每日四件事 */
.page-about .duty-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--about-rule-strong);
}

.page-about .duty{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  padding:16px 0;
  border-bottom:1px solid var(--about-rule);
  transition:background-color .2s var(--ease);
}

.page-about .duty:hover{
  background:rgba(58,125,124,.06);
}

.page-about .duty-num{
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--celadon);
  padding-top:5px;
}

.page-about .duty-title{
  margin:0 0 6px;
  font-size:1.02rem;
  font-weight:800;
  color:var(--ink-800);
}

.page-about .duty-text{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--about-body);
}

.page-about .closing-line{
  margin:26px 0 0;
  padding-left:16px;
  border-left:3px solid var(--amber);
  font-size:clamp(1rem,2.3vw,1.25rem);
  font-weight:800;
  line-height:1.65;
  color:var(--ink-800);
}

/* 04 团队 */
.page-about .team-grid{
  display:grid;
  gap:26px;
}

.page-about .team-copy p{
  margin:0 0 1.1em;
}

.page-about .figure-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--about-rule);
  border:1px solid var(--about-rule);
}

.page-about .figure-item{
  background:var(--paper);
  padding:14px 14px 16px;
}

.page-about .figure-num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,4.4vw,2.2rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink-800);
}

.page-about .figure-unit{
  font-size:.48em;
  margin-left:2px;
  color:var(--celadon);
}

.page-about .figure-label{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--about-body-soft);
}

.page-about .team-figure{
  aspect-ratio:1 / 1;
  margin:0;
}

/* 05 服务网络 */
.page-about .network-grid{
  display:grid;
  gap:24px;
}

.page-about .network-figure{
  aspect-ratio:10 / 7;
  margin:0;
}

.page-about .network-copy p{
  margin:0 0 1.1em;
}

.page-about .deliver-steps{
  list-style:none;
  counter-reset:step;
  margin:22px 0 0;
  padding:0;
}

.page-about .deliver-steps li{
  counter-increment:step;
  position:relative;
  margin-left:8px;
  padding:0 0 16px 28px;
  border-left:1px solid var(--about-rule-strong);
  font-size:15px;
  line-height:1.75;
  color:var(--about-body);
}

.page-about .deliver-steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:-9px;
  top:0;
  padding:3px 4px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--celadon);
  background:var(--paper);
}

.page-about .deliver-steps li:last-child{
  border-left-color:transparent;
  padding-bottom:0;
}

/* 06 安全与生态 */
.page-about .badge-wall{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--about-rule);
  border:1px solid var(--about-rule);
}

.page-about .badge{
  position:relative;
  background:var(--paper);
  padding:22px 18px 20px;
  transition:background-color .25s var(--ease);
}

.page-about .badge::before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  width:26px;
  height:2px;
  background:var(--celadon);
  transition:width .25s var(--ease), background-color .25s var(--ease);
}

.page-about .badge:hover{
  background:#fff;
}

.page-about .badge:hover::before{
  width:58px;
  background:var(--amber);
}

.page-about .badge-title{
  margin:0 0 8px;
  font-size:.98rem;
  font-weight:800;
  line-height:1.5;
  color:var(--ink-800);
}

.page-about .badge-text{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--about-body);
}

/* 收尾 */
.page-about .cta-block{
  margin-block:clamp(34px,5vw,64px) 0;
  padding:clamp(26px,4.6vw,52px) clamp(20px,4vw,46px);
  border-top:0;
  background:var(--ink-800);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.page-about .cta-title{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.4rem,3.2vw,2.15rem);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--paper);
}

.page-about .cta-text{
  margin:0;
  max-width:44em;
  font-size:15.5px;
  line-height:1.9;
  color:var(--text);
}

.page-about .cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-about .btn--ghost{
  border-color:rgba(214,226,238,.45);
  color:var(--paper);
}

.page-about .btn--ghost:hover,
.page-about .btn--ghost:focus-visible{
  border-color:var(--amber);
  color:var(--amber-soft);
}

.page-about .media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (min-width:520px){
  .page-about .figure-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width:720px){
  .page-about .hero-stats{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .page-about .badge-wall{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .page-about .issue-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-about .about-frame{
    grid-template-columns:88px minmax(0,1fr);
    column-gap:clamp(20px,3.4vw,48px);
  }

  .page-about .about-scale{
    display:block;
    align-self:start;
    position:sticky;
    top:32px;
    padding-top:150px;
  }

  .page-about .breadcrumbs{
    padding-block:26px 0;
  }

  .page-about .split{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(24px,3.4vw,44px);
    align-items:start;
  }

  .page-about .team-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(24px,3.4vw,44px);
    align-items:start;
  }

  .page-about .network-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,3.4vw,44px);
    align-items:start;
  }

  .page-about .track{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
    position:relative;
    padding-top:26px;
  }

  .page-about .track::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--port-line) 0 1px, transparent 1px 14px);
    opacity:.55;
  }

  .page-about .node::before{
    content:"";
    position:absolute;
    top:-26px;
    left:22px;
    width:1px;
    height:26px;
    background:var(--port-line);
    opacity:.6;
  }
}

@media (min-width:1040px){
  .page-about .badge-wall{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .node,
  .page-about .badge,
  .page-about .duty,
  .page-about .ver-link{
    transition:none;
  }

  .page-about .node:hover{
    transform:none;
  }
}
<<<PAGE_CSS_END>>>