.page-about{
  --ab-line:rgba(201,196,232,.22);
  --ab-line-soft:rgba(201,196,232,.12);
  --ab-card:rgba(255,253,248,.045);
  --ab-measure:36ch;
}

/* ---------- 首屏 ---------- */
.page-about .ab-hero{
  position:relative;
  overflow:hidden;
  padding-block:calc(var(--header-h) + 40px) clamp(52px,7vw,88px);
  background:
    radial-gradient(120% 82% at 88% -12%, rgba(255,106,43,.24), rgba(255,106,43,0) 58%),
    linear-gradient(180deg,var(--arena) 0%, var(--arena) 66%, var(--teal) 100%);
  color:var(--sand);
}
.page-about .ab-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,52px);
  align-items:start;
}
.page-about .ab-hero-copy{min-width:0;}
.page-about .ab-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(18px,2.4vw,26px);
  font-size:14px;
}
.page-about .ab-crumb .breadcrumb-item{color:var(--haze);text-decoration:none;}
.page-about .ab-crumb a.breadcrumb-item:hover{color:var(--gold);}
.page-about .ab-crumb .breadcrumb-current{color:var(--sand);}
.page-about .ab-crumb-sep{color:rgba(201,196,232,.5);}
.page-about .ab-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  padding:6px 14px;
  border:1px solid rgba(43,224,138,.32);
  border-radius:var(--radius-pill);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--signal);
  background:rgba(43,224,138,.08);
}
.page-about .ab-kicker-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(43,224,138,.18);
  animation:ab-pulse 2.6s ease-in-out infinite;
}
@keyframes ab-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.55;transform:scale(.82);}
}
.page-about .ab-h1{
  margin:0 0 20px;
  font-size:clamp(32px,5.2vw,58px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.02em;
  max-width:20ch;
}
.page-about .ab-lede{
  margin:0 0 30px;
  max-width:44ch;
  color:rgba(245,239,230,.86);
}
.page-about .ab-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-about .ab-stats{
  padding:clamp(20px,3vw,28px);
  display:grid;
  gap:18px;
  border-radius:var(--radius);
}
.page-about .ab-stats-title{
  margin:0;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--haze);
}
.page-about .ab-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 16px;
}
.page-about .ab-stat{display:grid;gap:5px;min-width:0;}
.page-about .ab-stat .stat-num{
  font-family:var(--font-mono);
  font-size:clamp(24px,3.2vw,34px);
  font-weight:600;
  line-height:1.05;
  color:var(--gold);
}
.page-about .ab-stat .stat-label{font-size:14px;color:var(--haze);}

/* ---------- 章节锚点条 ---------- */
.page-about .ab-jump{
  background:var(--teal);
  border-bottom:1px solid rgba(43,224,138,.18);
  padding-block:14px;
  position:relative;
  z-index:2;
}
.page-about .ab-jump-list{
  display:flex;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0 0 2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.page-about .ab-jump-list::-webkit-scrollbar{display:none;}
.page-about .ab-jump-link{
  display:inline-block;
  white-space:nowrap;
  padding:7px 15px;
  border:1px solid rgba(201,196,232,.3);
  border-radius:var(--radius-pill);
  font-size:14px;
  color:var(--sand);
  text-decoration:none;
  transition:border-color .12s ease,color .12s ease,background-color .12s ease;
}
.page-about .ab-jump-link:hover,
.page-about .ab-jump-link:focus-visible{
  border-color:var(--sunset);
  color:#fff;
  background:rgba(255,106,43,.16);
}

/* ---------- 通用章节底座 ---------- */
.page-about .ab-band{
  padding-block:clamp(56px,8vw,104px);
  color:var(--sand);
}
.page-about .ab-chapter{margin-bottom:clamp(26px,3.6vw,42px);}
.page-about .ab-chapter .chapter-title{
  max-width:22ch;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.2;
}
.page-about .ab-chapter-light .chapter-title,
.page-about .ab-chapter-light .chapter-num{color:var(--ink);}
.page-about .ab-lede-dark{
  max-width:52ch;
  margin:0 0 clamp(26px,3.4vw,40px);
  color:rgba(245,239,230,.82);
}
.page-about .ab-lede-ink{
  max-width:48ch;
  margin:0 0 clamp(28px,3.6vw,44px);
  color:rgba(10,12,18,.74);
}
.page-about .ab-figure{
  margin:0 0 clamp(28px,4vw,48px);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-about .ab-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-about .ab-figure.media-frame--band img{aspect-ratio:16/7;}
.page-about .ab-figure.media-frame--wide img{aspect-ratio:7/4;}
.page-about .ab-figure.media-frame--tall img{aspect-ratio:4/3;}

/* ---------- 01 品牌自述 ---------- */
.page-about .ab-narrative{
  background:linear-gradient(180deg,var(--teal) 0%, var(--arena) 100%);
}
.page-about .ab-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,44px);
}
.page-about .ab-prose{
  max-width:56ch;
  font-size:17px;
  line-height:1.85;
}
.page-about .ab-prose p{margin:0 0 18px;}
.page-about .ab-prose p:last-child{margin-bottom:0;}
.page-about .ab-note-panel{
  align-self:start;
  padding:clamp(20px,2.8vw,26px);
  border-radius:var(--radius);
}
.page-about .ab-note-title{
  margin:0 0 14px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}
.page-about .ab-note-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:11px;
}
.page-about .ab-note-list li{
  position:relative;
  padding-left:18px;
  font-size:15px;
  line-height:1.6;
  color:rgba(245,239,230,.88);
}
.page-about .ab-note-list li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--sunset);
}

/* ---------- 02 资料规模 ---------- */
.page-about .ab-scale{
  background:var(--indigo);
}
.page-about .ab-field-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin-bottom:clamp(28px,3.6vw,42px);
}
.page-about .ab-field{
  padding:20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ab-line-soft);
  background:var(--ab-card);
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.page-about .ab-field:hover{
  border-color:var(--sunset);
  background:rgba(255,106,43,.08);
  transform:translateY(-3px);
}
.page-about .ab-field-key{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--signal);
}
.page-about .ab-field-name{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  color:var(--sand);
}
.page-about .ab-field-desc{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:rgba(245,239,230,.76);
}
.page-about .ab-scale-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  padding:clamp(20px,3vw,30px);
  border-radius:var(--radius);
  border-left:3px solid var(--gold);
  background:rgba(255,253,248,.05);
}
.page-about .ab-scale-item{min-width:0;}
.page-about .ab-scale-num{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:clamp(19px,2.4vw,23px);
  font-weight:600;
  color:var(--gold);
}
.page-about .ab-scale-text{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:rgba(245,239,230,.78);
}
.page-about .ab-inline-link{
  margin:26px 0 0;
  font-size:16px;
  color:rgba(245,239,230,.82);
}
.page-about .ab-inline-link a{
  color:var(--sunset);
  text-decoration:none;
  border-bottom:1px solid rgba(255,106,43,.5);
  padding-bottom:2px;
  transition:border-color .16s ease,color .16s ease;
}
.page-about .ab-inline-link a:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* ---------- 03 入档流程 ---------- */
.page-about .ab-process{
  background:linear-gradient(180deg,var(--indigo) 0%, var(--arena) 100%);
}
.page-about .ab-process-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,3.6vw,48px);
}
.page-about .ab-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
  position:relative;
}
.page-about .ab-step{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  padding:20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ab-line-soft);
  background:var(--ab-card);
  transition:border-color .15s ease,background-color .15s ease;
}
.page-about .ab-step:hover{
  border-color:var(--sunset);
  background:rgba(255,106,43,.07);
}
.page-about .ab-step-num{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sunset);
  color:#fff;
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:600;
}
.page-about .ab-step-body{min-width:0;}
.page-about .ab-step-title{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  color:var(--sand);
}
.page-about .ab-step-body p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:rgba(245,239,230,.78);
}
.page-about .ab-figure-side{margin:0;}

/* ---------- 04 版本演进 ---------- */
.page-about .ab-timeline-band{
  background:
    radial-gradient(100% 60% at 12% 0%, rgba(43,224,138,.1), rgba(43,224,138,0) 60%),
    linear-gradient(180deg,var(--arena) 0%, var(--arena) 100%);
}
.page-about .ab-timeline{
  list-style:none;
  margin:0;
  padding:6px 0 6px 30px;
  position:relative;
  display:grid;
  gap:clamp(18px,2.6vw,28px);
}
.page-about .ab-timeline::before{
  content:"";
  position:absolute;
  left:7px;top:14px;bottom:14px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--signal) 0%, var(--gold) 58%, rgba(255,179,71,.16) 100%);
}
.page-about .ab-tl-item{position:relative;min-width:0;}
.page-about .ab-tl-dot{
  position:absolute;
  left:-30px;top:22px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(43,224,138,.16);
  transition:transform .18s ease,box-shadow .18s ease;
}
.page-about .ab-tl-card{
  padding:18px 20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ab-line-soft);
  background:var(--ab-card);
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.page-about .ab-tl-item:hover .ab-tl-card{
  border-color:var(--sunset);
  background:rgba(255,106,43,.07);
  transform:translateX(4px);
}
.page-about .ab-tl-item:hover .ab-tl-dot{
  transform:scale(1.22);
  box-shadow:0 0 0 7px rgba(43,224,138,.2);
}
.page-about .ab-tl-year{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:clamp(21px,2.8vw,26px);
  font-weight:600;
  color:var(--gold);
}
.page-about .ab-tl-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  color:var(--sand);
}
.page-about .ab-tl-text{
  margin:0;
  font-size:15px;
  line-height:1.72;
  color:rgba(245,239,230,.74);
  transition:color .18s ease;
}
.page-about .ab-tl-item:hover .ab-tl-text{color:rgba(245,239,230,.95);}

/* ---------- 05 团队分工 ---------- */
.page-about .ab-team{
  background:var(--sand);
  color:var(--ink);
}
.page-about .ab-team-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.6vw,26px);
}
.page-about .ab-team-col{
  padding:clamp(24px,3.4vw,36px) clamp(20px,2.8vw,30px);
  border-radius:var(--radius);
  background:var(--paper);
  border:1px solid rgba(10,12,18,.07);
  border-top:3px solid rgba(10,12,18,.12);
  transition:border-top-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.page-about .ab-team-col:hover{
  border-top-color:var(--sunset);
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
}
.page-about .ab-team-num{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:clamp(42px,6vw,62px);
  font-weight:600;
  line-height:1;
  color:var(--wine);
}
.page-about .ab-team-role{
  margin:0 0 12px;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
}
.page-about .ab-team-desc{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:rgba(10,12,18,.72);
  max-width:40ch;
}

/* ---------- 06 服务范围 ---------- */
.page-about .ab-service{
  background:linear-gradient(180deg,var(--teal) 0%, var(--arena) 100%);
}
.page-about .ab-service-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,44px);
}
.page-about .ab-service-main{min-width:0;}
.page-about .ab-service-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.page-about .ab-service-list li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.8;
  color:rgba(245,239,230,.85);
  max-width:56ch;
}
.page-about .ab-service-list li::before{
  content:"";
  position:absolute;
  left:0;top:.7em;
  width:9px;height:9px;
  border-radius:50%;
  border:2px solid var(--signal);
}
.page-about .ab-inline-link-light{margin-top:26px;}
.page-about .ab-service-side{
  align-self:start;
  padding:clamp(20px,2.8vw,28px);
  border-radius:var(--radius);
}

/* ---------- 07 收尾 ---------- */
.page-about .ab-close{
  background:linear-gradient(180deg,var(--arena) 0%, var(--indigo) 100%);
}
.page-about .ab-close-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.6vw,26px);
}
.page-about .ab-close-card{
  padding:clamp(22px,3vw,32px);
  border-radius:var(--radius);
  border:1px solid var(--ab-line-soft);
  background:var(--ab-card);
  transition:border-color .16s ease,background-color .16s ease;
}
.page-about .ab-close-card:hover{
  border-color:rgba(255,106,43,.6);
  background:rgba(255,106,43,.06);
}
.page-about .ab-tag{
  display:inline-block;
  margin:0 0 14px;
}
.page-about .ab-close-title{
  margin:0 0 12px;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  color:var(--sand);
}
.page-about .ab-close-card p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.78;
  color:rgba(245,239,230,.76);
}
.page-about .ab-close-link{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:var(--sunset);
  text-decoration:none;
  border-bottom:1px solid rgba(255,106,43,.5);
  padding-bottom:2px;
  transition:color .16s ease,border-color .16s ease;
}
.page-about .ab-close-link:hover{
  color:var(--gold);
  border-color:var(--gold);
}

/* ---------- 焦点可见性 ---------- */
.page-about a:focus-visible,
.page-about .btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- 窄屏保护 ---------- */
@media (max-width:420px){
  .page-about .ab-step{grid-template-columns:36px minmax(0,1fr);gap:13px;padding:16px;}
  .page-about .ab-step-num{width:36px;height:36px;font-size:16px;}
  .page-about .ab-timeline{padding-left:24px;}
  .page-about .ab-tl-dot{left:-24px;}
}

/* ---------- 平板及以上 ---------- */
@media (min-width:720px){
  .page-about .ab-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-about .ab-scale-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
  .page-about .ab-team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-about .ab-close-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- 桌面 ---------- */
@media (min-width:960px){
  .page-about .ab-hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(36px,4.6vw,64px);
  }
  .page-about .ab-stats{margin-top:clamp(16px,3vw,46px);}
  .page-about .ab-story-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
    gap:clamp(28px,3.6vw,52px);
  }
  .page-about .ab-process-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:start;
  }
  .page-about .ab-figure-side{
    margin-top:24px;
  }
  .page-about .ab-field-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .page-about .ab-field:nth-child(2n){transform:translateY(10px);}
  .page-about .ab-field:nth-child(2n):hover{transform:translateY(6px);}
  .page-about .ab-field:nth-child(3){transform:translateY(-4px);}
  .page-about .ab-field:nth-child(3):hover{transform:translateY(-8px);}
  .page-about .ab-service-grid{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);
    gap:clamp(32px,4vw,60px);
  }
  .page-about .ab-close-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:1180px){
  .page-about .ab-timeline{padding-left:38px;}
  .page-about .ab-tl-dot{left:-38px;top:24px;}
  .page-about .ab-tl-card{padding:22px 26px;}
}
<<<END>>>
