/* ===== 品牌文化页 · page-about ===== */
.page-about{
  --about-rail:230px;
  --about-gap:clamp(22px,3.4vw,44px);
  --about-shadow:6px 6px 0 rgba(4,9,20,.5);
  --about-shadow-lift:8px 10px 0 rgba(4,9,20,.55);
}

.page-about .breadcrumb-wrap{
  padding-top:clamp(14px,2.4vw,24px);
  padding-bottom:clamp(6px,1.4vw,14px);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  padding:clamp(18px,3vw,40px) 0 clamp(34px,5vw,70px);
  border-bottom:1px solid var(--line);
  background-color:var(--ink-900);
  background-image:
    linear-gradient(180deg, rgba(18,36,69,.62), rgba(8,18,38,0) 74%),
    repeating-linear-gradient(90deg, rgba(27,51,88,.4) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(27,51,88,.3) 0 1px, transparent 1px 96px);
}

.page-about .about-hero__grid{
  display:grid;
  gap:var(--about-gap);
  align-items:center;
}

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

.page-about .about-hero h1{
  margin:14px 0 18px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(30px,5.4vw,56px);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--paper);
}

.page-about .about-hero__lede{
  margin:0 0 24px;
  max-width:38em;
  font-family:var(--font-body);
  font-size:clamp(16px,1.6vw,17.5px);
  line-height:1.9;
  color:var(--mist);
}

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

.page-about .about-hero__facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  margin:28px 0 0;
  padding:20px 0 0;
  border-top:1px dashed var(--line);
}

.page-about .about-hero__facts li{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:70px;
}

.page-about .about-hero__facts b{
  font-family:var(--font-mono);
  font-size:clamp(19px,2.4vw,23px);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--cyan);
}

.page-about .about-hero__facts span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mist);
}

.page-about .about-hero__visual{margin:0;min-width:0;}

.page-about .about-hero__visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow:var(--about-shadow);
}

.page-about .about-figure__cap{
  margin-top:12px;
  padding-left:10px;
  border-left:2px solid var(--cyan-dim);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.75;
  letter-spacing:.04em;
  color:var(--mist);
}

/* ---------- 主栅格 ---------- */
.page-about .about-layout{
  display:grid;
  gap:var(--about-gap);
  padding:clamp(32px,5vw,64px) 0 clamp(46px,7vw,88px);
}

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

.page-about .about-section{
  padding-bottom:clamp(30px,4.6vw,54px);
  margin-bottom:clamp(30px,4.6vw,54px);
  border-bottom:1px solid var(--line-soft);
}

.page-about .about-section h2{
  margin:10px 0 16px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(23px,3.2vw,34px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--paper);
}

.page-about .about-section p{
  margin:0 0 15px;
  max-width:42em;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.9;
  color:var(--mist);
}

.page-about .about-section p a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid var(--cyan-dim);
  transition:color .18s ease, border-color .18s ease;
}

.page-about .about-section p a:hover,
.page-about .about-section p a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--paper);
}

.page-about .about-section p a:focus-visible,
.page-about .principle:focus-visible,
.page-about .eco-node:focus-visible,
.page-about .rail-list a:focus-visible,
.page-about .rail-years a:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- 服务原则卡片 ---------- */
.page-about .principle-list{
  display:grid;
  gap:16px;
  margin:24px 0 0;
}

.page-about .principle{
  position:relative;
  padding:20px 18px 22px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--ink-700),var(--ink-850));
  box-shadow:var(--about-shadow);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.page-about .principle:hover{
  border-color:var(--cyan-dim);
  transform:translateY(-3px);
  box-shadow:var(--about-shadow-lift);
}

.page-about .principle__no{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--cyan);
}

.page-about .principle h3{
  margin:0 0 10px;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  color:var(--paper);
}

.page-about .principle p{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.85;
  color:var(--mist);
}

/* ---------- 发展轨迹 ---------- */
.page-about .team-figure{
  margin:22px 0 26px;
}

.page-about .team-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow:var(--about-shadow);
}

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

.page-about .phase{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 18px;
  padding:18px 0 18px 22px;
  border-left:1px solid var(--line);
}

.page-about .phase::before{
  content:"";
  position:absolute;
  left:-5px;
  top:24px;
  width:9px;
  height:9px;
  background:var(--ink-900);
  border:1px solid var(--cyan);
  transform:rotate(45deg);
}

.page-about .phase__year{
  grid-column:1;
  grid-row:1;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-about .phase h3{
  grid-column:2;
  grid-row:1;
  margin:0;
  font-family:var(--font-head);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--paper);
}

.page-about .phase p{
  grid-column:2;
  grid-row:2;
  margin:2px 0 0;
  max-width:40em;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.85;
  color:var(--mist);
}

.page-about .phase--now{border-left-color:var(--coral);}
.page-about .phase--now::before{background:var(--coral);border-color:var(--coral);}
.page-about .phase--now .phase__year{color:var(--coral-soft);}

/* ---------- 团队构成 ---------- */
.page-about .team-bars{
  list-style:none;
  display:grid;
  gap:16px;
  margin:0 0 22px;
  padding:20px 18px;
  border:1px solid var(--line);
  background:var(--ink-850);
}

.page-about .team-bar__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
}

.page-about .team-bar__head b{
  font-weight:700;
  color:var(--paper);
}

.page-about .team-bar__track{
  display:block;
  height:8px;
  margin-top:8px;
  background:var(--ink-700);
  border:1px solid var(--line-soft);
}

.page-about .team-bar__fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));
}

.page-about .team-bar__fill--content{width:26%;}
.page-about .team-bar__fill--tech{width:39%;}
.page-about .team-bar__fill--service{width:35%;}

/* ---------- 合作生态 ---------- */
.page-about .eco{
  display:grid;
  gap:26px;
  margin-top:22px;
}

.page-about .eco-copy{min-width:0;}

.page-about .eco-ring{
  position:relative;
  width:100%;
  max-width:340px;
  margin:0 auto;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line);
  background-color:var(--ink-850);
  background-image:
    radial-gradient(circle at center, rgba(56,232,210,.12), transparent 64%),
    repeating-radial-gradient(circle at center, rgba(27,51,88,.9) 0 1px, transparent 1px 68px);
}

.page-about .eco-ring__core{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  font-family:var(--font-mono);
}

.page-about .eco-ring__core b{
  display:block;
  font-size:32px;
  line-height:1;
  font-weight:700;
  color:var(--cyan);
}

.page-about .eco-ring__core span{
  display:block;
  margin-top:8px;
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--mist);
}

.page-about .eco-node{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--ink-700);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}

.page-about .eco-node:hover,
.page-about .eco-node:focus-visible{
  border-color:var(--coral);
  color:var(--coral-soft);
  background:var(--ink-800);
}

.page-about .n1{left:50%;top:8%;}
.page-about .n2{left:86%;top:36%;}
.page-about .n3{left:74%;top:82%;}
.page-about .n4{left:26%;top:82%;}
.page-about .n5{left:14%;top:36%;}

/* ---------- 合作行动 ---------- */
.page-about .about-cta{
  position:relative;
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--line);
  background-color:var(--ink-850);
  background-image:
    radial-gradient(circle at 86% 10%, rgba(255,106,69,.18), transparent 44%),
    linear-gradient(150deg,var(--ink-700),var(--ink-850));
  box-shadow:var(--about-shadow);
}

.page-about .about-cta h2{
  margin:10px 0 12px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(22px,3vw,30px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--paper);
}

.page-about .about-cta p{
  margin:0 0 20px;
  max-width:40em;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.85;
  color:var(--mist);
}

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

/* ---------- 右侧年表索引 ---------- */
.page-about .about-rail{
  min-width:0;
  padding:18px 16px 16px;
  border:1px solid var(--line);
  background:var(--ink-850);
  box-shadow:var(--about-shadow);
}

.page-about .rail-title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.22em;
  color:var(--cyan);
}

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

.page-about .rail-list a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 8px;
  border-left:2px solid transparent;
  color:var(--mist);
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}

.page-about .rail-list a:hover,
.page-about .rail-list a:focus-visible{
  color:var(--paper);
  border-left-color:var(--cyan);
  background:rgba(56,232,210,.07);
}

.page-about .rail-num{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--cyan-dim);
}

.page-about .rail-label{min-width:0;}

.page-about .rail-years{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}

.page-about .rail-years a{
  padding:4px 8px;
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist);
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}

.page-about .rail-years a:hover,
.page-about .rail-years a:focus-visible{
  border-color:var(--coral);
  color:var(--coral-soft);
}

/* ---------- 响应式 ---------- */
@media (min-width:760px){
  .page-about .principle-list{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:900px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
}

@media (min-width:820px){
  .page-about .eco{
    grid-template-columns:minmax(0,1fr) 340px;
    align-items:center;
    gap:34px;
  }
}

@media (min-width:1000px){
  .page-about .about-layout{
    grid-template-columns:minmax(0,1fr) var(--about-rail);
    align-items:start;
  }
  .page-about .about-rail{
    position:sticky;
    top:24px;
  }
}

@media (max-width:599px){
  .page-about .eco-ring{
    aspect-ratio:auto;
    max-width:none;
    border-radius:2px;
    padding:18px 16px;
    display:grid;
    gap:8px;
    background-image:radial-gradient(circle at 50% 0, rgba(56,232,210,.12), transparent 70%);
  }
  .page-about .eco-ring__core{
    position:static;
    display:flex;
    align-items:baseline;
    gap:10px;
    text-align:left;
    padding-bottom:10px;
    border-bottom:1px dashed var(--line);
  }
  .page-about .eco-ring__core span{margin-top:0;}
  .page-about .eco-node{
    position:static;
    transform:none;
    white-space:normal;
  }
  .page-about .phase{
    padding-left:18px;
  }
  .page-about .about-hero__facts{gap:12px 20px;}
}