.page-about{
  --ab-edge:rgba(31,111,120,.42);
  --ab-edge-strong:rgba(31,111,120,.85);
  --ab-ink-soft:rgba(27,21,18,.74);
  --ab-board-line:rgba(27,21,18,.16);
  background:
    radial-gradient(120% 55% at 84% 0%, rgba(53,242,214,.10), transparent 62%),
    linear-gradient(180deg, var(--by-deep) 0%, var(--by-deep) 48%, var(--by-deep-2) 100%);
  color: var(--by-paper);
  overflow-x: clip;
}

.page-about .by-crumbs{margin-bottom:clamp(16px,3vw,26px);}

/* ---------- 首屏框景 ---------- */
.page-about .ab-hero{padding-top:clamp(18px,4vw,40px);}

.page-about .ab-hero__frame{
  position:relative;
  border:1px solid var(--ab-edge-strong);
  padding:clamp(24px,4.4vw,60px);
  background:
    radial-gradient(90% 130% at 88% 4%, rgba(53,242,214,.16), transparent 58%),
    linear-gradient(155deg, rgba(18,60,70,.94), rgba(10,42,48,.98));
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}

.page-about .ab-hero__frame::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:5px;
  background:repeating-linear-gradient(90deg, var(--by-cyan) 0 2px, transparent 2px 14px);
  opacity:.55;
  pointer-events:none;
}

.page-about .ab-hero__frame .by-h1{max-width:16em;}

.page-about .ab-hero__frame .by-lead{max-width:44em;color:rgba(251,250,246,.86);}

.page-about .ab-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  margin:clamp(22px,3.4vw,38px) 0;
  background:var(--ab-edge);
  border:1px solid var(--ab-edge);
}

.page-about .ab-stat{
  background:rgba(10,42,48,.9);
  padding:14px 16px;
}

.page-about .ab-stat dt{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--by-mist);
}

.page-about .ab-stat dd{
  margin:8px 0 0;
  font-size:13px;
  color:rgba(251,250,246,.82);
  line-height:1.4;
}

.page-about .ab-stat dd .by-num{
  display:block;
  font-family:var(--by-mono);
  font-size:clamp(24px,3.6vw,34px);
  line-height:1.04;
  color:var(--by-cyan);
  margin-bottom:4px;
}

.page-about .ab-hero__act{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 奶油画板 ---------- */
.page-about .ab-board{
  background:var(--by-cream);
  color:var(--by-ink);
  border-top:1px solid var(--ab-edge-strong);
  border-bottom:1px solid var(--ab-edge-strong);
}

.page-about .ab-board .by-h2,
.page-about .ab-board .by-h3,
.page-about .ab-board .ab-line__title{color:var(--by-ink);}

.page-about .ab-board .by-label{color:#7C6A52;}

.page-about .ab-board__lead,
.page-about .ab-board .by-lead{color:var(--ab-ink-soft);}

.page-about .ab-board__head .by-h2{max-width:22em;}

/* ---------- 我们做什么 ---------- */
.page-about .ab-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(20px,3vw,32px);
}

.page-about .ab-line{
  position:relative;
  background:var(--by-paper);
  border:1px solid var(--ab-board-line);
  padding:clamp(20px,3vw,32px);
  transition:transform var(--by-t) var(--by-ease), border-color var(--by-t) var(--by-ease);
}

.page-about .ab-line::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:56px;
}

.page-about .ab-line--exec::before{background:var(--by-wire);}
.page-about .ab-line--data::before{background:var(--by-orange);}

.page-about .ab-line:hover{
  transform:translateY(-4px);
  border-color:var(--by-wire);
}

.page-about .ab-line__tag{
  margin:0 0 10px;
  font-family:var(--by-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:#7C6A52;
}

.page-about .ab-line__title{margin:0 0 12px;}

.page-about .ab-line__text{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.75;
  color:var(--ab-ink-soft);
}

.page-about .ab-line__fit{
  margin:0;
  padding-top:12px;
  border-top:1px dashed var(--ab-board-line);
  font-size:13px;
  line-height:1.7;
  color:#6C5B45;
}

/* ---------- 发展历程 ---------- */
.page-about .ab-history{padding-top:clamp(36px,6vw,72px);}

.page-about .ab-history__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3.4vw,44px);
}

.page-about .ab-rail__label{margin:0 0 10px;}

.page-about .ab-rail .by-rail{
  position:static;
  display:flex;
  flex-direction:row;
  gap:4px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}

.page-about .ab-rail .by-rail__link{
  display:flex;
  flex:none;
  align-items:baseline;
  gap:8px;
  padding:10px 14px;
  border-left:2px solid var(--ab-edge);
  color:var(--by-mist);
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--by-t) var(--by-ease), border-color var(--by-t) var(--by-ease), background var(--by-t) var(--by-ease);
}

.page-about .ab-rail .by-rail__num{
  font-family:var(--by-mono);
  font-size:12px;
  color:var(--by-wire-lite);
}

.page-about .ab-rail .by-rail__link:hover,
.page-about .ab-rail .by-rail__link:focus-visible,
.page-about .ab-rail .by-rail__link[aria-current="true"]{
  color:var(--by-cyan);
  border-color:var(--by-cyan);
  background:rgba(53,242,214,.08);
}

.page-about .ab-era{
  border-top:1px solid var(--ab-edge);
  padding:clamp(20px,3vw,30px) 0;
  scroll-margin-top:calc(var(--by-h-header-sm) + 24px);
}

.page-about .ab-era:first-of-type{border-top:0;padding-top:0;}

.page-about .ab-era__tag{
  margin:0 0 8px;
  font-family:var(--by-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--by-wire-lite);
  text-transform:uppercase;
}

.page-about .ab-era__title{
  margin:0 0 12px;
  font-size:clamp(19px,2.4vw,24px);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--by-paper);
}

.page-about .ab-era__text{
  margin:0 0 14px;
  max-width:38em;
  font-size:16px;
  line-height:1.75;
  color:rgba(251,250,246,.82);
}

.page-about .ab-era__facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.page-about .ab-era__facts li{
  border:1px solid var(--ab-edge);
  background:rgba(18,60,70,.6);
  padding:6px 12px;
  font-size:13px;
  color:rgba(251,250,246,.86);
}

.page-about .ab-era__facts .by-num{
  font-family:var(--by-mono);
  color:var(--by-lime);
  font-weight:600;
}

.page-about .ab-figure{
  margin:clamp(28px,4.6vw,56px) 0 0;
  border-top:1px solid var(--ab-edge);
  border-bottom:1px solid var(--ab-edge);
  padding:clamp(12px,2vw,20px) 0;
}

.page-about .ab-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  filter:saturate(.85) contrast(1.05);
}

.page-about .ab-figure .by-media__cap{color:var(--by-mist);}

/* ---------- 团队构成 ---------- */
.page-about .ab-crew-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3.2vw,40px);
  margin-top:clamp(8px,2vw,20px);
}

.page-about .ab-crew__fig{margin:0;}

.page-about .ab-crew__fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--ab-board-line);
  filter:saturate(.85);
}

.page-about .ab-crew__fig .by-media__cap{color:#6C5B45;}

.page-about .ab-crew__lead{
  margin:0 0 clamp(18px,2.6vw,26px);
  max-width:42em;
  font-size:16px;
  line-height:1.8;
  color:var(--ab-ink-soft);
}

.page-about .ab-crew-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
  background:var(--ab-board-line);
  border:1px solid var(--ab-board-line);
}

.page-about .ab-crew-item{
  background:var(--by-paper);
  padding:16px;
}

.page-about .ab-crew-item__num{
  display:block;
  font-family:var(--by-mono);
  font-size:26px;
  line-height:1;
  color:var(--by-wire);
}

.page-about .ab-crew-item__name{
  margin:8px 0 8px;
  font-size:15px;
  font-weight:800;
  color:var(--by-ink);
}

.page-about .ab-crew-item__desc{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--ab-ink-soft);
}

/* ---------- 覆盖与协作网络 ---------- */
.page-about .ab-reach__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3.2vw,40px);
  align-items:start;
}

.page-about .ab-reach__text .by-h2{max-width:18em;}

.page-about .ab-reach__p{
  max-width:38em;
  font-size:16px;
  line-height:1.78;
  color:rgba(251,250,246,.84);
}

.page-about .ab-reach__link{margin:18px 0 0;}

.page-about .ab-inline-link{
  color:var(--by-cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(53,242,214,.5);
  padding-bottom:2px;
  transition:color var(--by-t) var(--by-ease), border-color var(--by-t) var(--by-ease);
}

.page-about .ab-inline-link:hover,
.page-about .ab-inline-link:focus-visible{
  color:var(--by-orange);
  border-color:var(--by-orange);
}

.page-about .ab-reach__fig{margin:0;}

.page-about .ab-reach__fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--ab-edge);
}

.page-about .ab-zones{
  display:flex;
  gap:14px;
  margin-top:clamp(24px,3.6vw,44px);
  padding-bottom:14px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}

.page-about .ab-zone{
  flex:0 0 78%;
  scroll-snap-align:start;
  border:1px solid var(--ab-edge);
  border-top:3px solid var(--by-wire-lite);
  background:linear-gradient(165deg, rgba(18,60,70,.92), rgba(10,42,48,.96));
  padding:18px 20px 20px;
  transition:transform var(--by-t) var(--by-ease), border-color var(--by-t) var(--by-ease);
}

.page-about .ab-zone:hover,
.page-about .ab-zone:focus-visible,
.page-about .ab-zone:focus-within{
  transform:translateY(-4px);
  border-color:var(--by-cyan);
  outline:none;
}

.page-about .ab-zone:focus-visible{box-shadow:0 0 0 2px var(--by-cyan);}

.page-about .ab-zone__name{
  margin:0 0 10px;
  font-size:17px;
  font-weight:800;
  color:var(--by-paper);
}

.page-about .ab-zone__desc{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:rgba(251,250,246,.78);
}

.page-about .ab-zone__more{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--ab-edge);
  font-size:13px;
  line-height:1.7;
  color:var(--by-lime);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height 220ms var(--by-ease), opacity 220ms var(--by-ease);
}

.page-about .ab-zone:hover .ab-zone__more,
.page-about .ab-zone:focus-visible .ab-zone__more,
.page-about .ab-zone:focus-within .ab-zone__more{
  max-height:120px;
  opacity:1;
}

.page-about .ab-track-hint{
  margin:0;
  font-size:13px;
  color:var(--by-mist);
}

/* ---------- 服务范围目录 ---------- */
.page-about .ab-catalog{
  margin:clamp(20px,3vw,32px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--ab-board-line);
}

.page-about .ab-catalog__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
  padding:clamp(16px,2.4vw,24px) 6px;
  border-bottom:1px solid var(--ab-board-line);
  transition:background var(--by-t) var(--by-ease), transform var(--by-t) var(--by-ease);
}

.page-about .ab-catalog__item:hover{
  background:rgba(31,111,120,.07);
  transform:translateX(4px);
}

.page-about .ab-catalog__idx{
  font-family:var(--by-mono);
  font-size:13px;
  color:var(--by-orange);
  padding-top:3px;
}

.page-about .ab-catalog__name{
  margin:0 0 8px;
  font-size:clamp(17px,2.1vw,21px);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--by-ink);
}

.page-about .ab-catalog__desc{
  margin:0 0 8px;
  max-width:40em;
  font-size:15px;
  line-height:1.75;
  color:var(--ab-ink-soft);
}

.page-about .ab-catalog__fit{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#6C5B45;
}

.page-about .ab-catalog__arrow{
  font-size:20px;
  color:var(--by-wire);
  transition:transform var(--by-t) var(--by-ease), color var(--by-t) var(--by-ease);
}

.page-about .ab-catalog__item:hover .ab-catalog__arrow{
  transform:translateX(4px);
  color:var(--by-orange);
}

/* ---------- 服务流程时间轴 ---------- */
.page-about .ab-flow{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  margin:clamp(22px,3.4vw,36px) 0 0;
  padding:0;
  list-style:none;
}

.page-about .ab-flow__step{
  position:relative;
  border:1px solid var(--ab-edge);
  border-left:3px solid var(--by-wire-lite);
  background:rgba(18,60,70,.72);
  padding:18px 18px 16px;
  transition:transform var(--by-t) var(--by-ease), border-color var(--by-t) var(--by-ease), background var(--by-t) var(--by-ease);
}

.page-about .ab-flow__step:hover,
.page-about .ab-flow__step:focus-visible{
  transform:translateY(-4px);
  border-color:var(--by-cyan);
  border-left-color:var(--by-cyan);
  background:rgba(18,60,70,.95);
  outline:none;
}

.page-about .ab-flow__step:focus-visible{box-shadow:0 0 0 2px var(--by-cyan);}

.page-about .ab-flow__num{
  font-family:var(--by-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--by-orange);
}

.page-about .ab-flow__name{
  margin:8px 0 8px;
  font-size:17px;
  font-weight:800;
  color:var(--by-paper);
}

.page-about .ab-flow__brief{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:rgba(251,250,246,.78);
}

.page-about .ab-flow__more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height 220ms var(--by-ease), opacity 220ms var(--by-ease);
}

.page-about .ab-flow__more p{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--ab-edge);
  font-size:13px;
  line-height:1.7;
  color:var(--by-lime);
}

.page-about .ab-flow__step:hover .ab-flow__more,
.page-about .ab-flow__step:focus-visible .ab-flow__more{
  max-height:140px;
  opacity:1;
}

.page-about .ab-flow__foot{
  margin:clamp(18px,2.6vw,26px) 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--by-mist);
}

/* ---------- 资质与备案 ---------- */
.page-about .ab-legal__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,3vw,36px);
  margin-top:clamp(16px,2.6vw,28px);
}

.page-about .ab-legal__list{
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--ab-board-line);
  border:1px solid var(--ab-board-line);
}

.page-about .ab-legal__list > div{
  background:var(--by-paper);
  padding:14px 16px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:baseline;
}

.page-about .ab-legal__list dt{
  font-size:13px;
  color:#7C6A52;
  letter-spacing:.04em;
}

.page-about .ab-legal__list dd{
  margin:0;
  font-family:var(--by-mono);
  font-size:14px;
  color:var(--by-ink);
  word-break:break-word;
}

.page-about .ab-legal__note{
  border-left:3px solid var(--by-orange);
  padding:2px 0 2px 18px;
}

.page-about .ab-legal__note p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.8;
  color:var(--ab-ink-soft);
}

.page-about .ab-legal__note p:last-child{margin-bottom:0;}

/* ---------- 收尾咨询条 ---------- */
.page-about .ab-cta{padding-bottom:clamp(48px,7vw,88px);}

.page-about .ab-cta__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  align-items:center;
  border:1px solid var(--ab-edge-strong);
  border-top:3px solid var(--by-orange);
  background:linear-gradient(150deg, rgba(18,60,70,.94), rgba(10,42,48,.98));
  padding:clamp(22px,3.4vw,40px);
}

.page-about .ab-cta__title{margin:0 0 10px;}

.page-about .ab-cta__text{
  margin:0;
  max-width:36em;
  font-size:15px;
  line-height:1.75;
  color:rgba(251,250,246,.82);
}

.page-about .ab-cta__act{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-about .ab-stats{grid-template-columns:repeat(4, minmax(0,1fr));}
  .page-about .ab-zone{flex-basis:46%;}
  .page-about .ab-legal__list{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (min-width:860px){
  .page-about .ab-split{grid-template-columns:repeat(2, minmax(0,1fr));}
  .page-about .ab-crew-grid{grid-template-columns:minmax(0,7fr) minmax(0,9fr);align-items:start;}
  .page-about .ab-reach__top{grid-template-columns:minmax(0,9fr) minmax(0,5fr);}
  .page-about .ab-cta__inner{grid-template-columns:minmax(0,1fr) auto;}
  .page-about .ab-legal__list{grid-template-columns:repeat(3, minmax(0,1fr));}
}

@media (min-width:960px){
  .page-about .ab-history__grid{grid-template-columns:168px minmax(0,1fr);}

  .page-about .ab-rail{position:sticky;top:calc(var(--by-h-header-sm) + 28px);align-self:start;}

  .page-about .ab-rail .by-rail{
    flex-direction:column;
    overflow:visible;
    padding-bottom:0;
  }

  .page-about .ab-rail .by-rail__link{width:100%;}

  .page-about .ab-flow{
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:14px;
  }

  .page-about .ab-flow::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--by-wire-lite) 0 6px, transparent 6px 14px);
    opacity:.7;
  }

  .page-about .ab-flow__step{border-left:1px solid var(--ab-edge);border-top:3px solid var(--by-wire-lite);}
  .page-about .ab-flow__step:hover,
  .page-about .ab-flow__step:focus-visible{border-left-color:var(--by-cyan);border-top-color:var(--by-cyan);}
}

@media (min-width:1100px){
  .page-about .ab-zone{flex-basis:29%;}
  .page-about .ab-crew-list{grid-template-columns:repeat(2, minmax(0,1fr));}
}
<<<END>>>