.page-about{
  --about-ease: cubic-bezier(0.22,0.61,0.36,1);
  --about-line: rgba(212,175,55,0.34);
  --about-line-soft: rgba(212,175,55,0.16);
  --about-white-soft: rgba(255,255,255,0.72);
}

.page-about img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ========== 首屏品牌叙事区 ========== */
.page-about .about-hero{
  background:
    radial-gradient(ellipse at 82% 22%, rgba(212,175,55,0.14), transparent 46%),
    linear-gradient(118deg, #081832 0%, #0A1F44 52%, #102B58 100%);
  color:#fff;
  padding-top:clamp(2.4rem,6vw,4.5rem);
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.page-about .about-hero .breadcrumb{
  color: rgba(255,255,255,0.6);
  margin-bottom:2.4rem;
}
.page-about .about-hero .breadcrumb a{
  color: rgba(255,255,255,0.75);
  text-decoration:none;
  transition: color 0.25s var(--about-ease);
}
.page-about .about-hero .breadcrumb a:hover{
  color: var(--color-gold);
}
.page-about .about-hero .section-eyebrow{
  color: var(--color-gold);
}
.page-about .about-hero h1{
  font-family: var(--font-heading);
  font-size:clamp(1.85rem,4vw,3rem);
  line-height:1.22;
  letter-spacing:0.01em;
  margin:0.6rem 0 1.2rem;
  max-width:15em;
  color:#fff;
}
.page-about .about-hero .page-lead{
  color: var(--about-white-soft);
  font-size:clamp(0.95rem,1.4vw,1.04rem);
  line-height:1.75;
  max-width:42rem;
}
.page-about .about-hero__grid{
  display:grid;
  gap:2rem;
}
.page-about .about-hero__copy{
  max-width: calc(var(--content-max) * 0.62);
}
.page-about .about-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.4rem;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--about-line-soft);
  font-size:0.82rem;
  color:rgba(255,255,255,0.66);
}
.page-about .about-hero__index{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 0.8rem;
  margin-top:1.6rem;
}
.page-about .about-hero__index a{
  border:1px solid var(--about-line-soft);
  border-radius:999px;
  color:rgba(255,255,255,0.82);
  font-size:0.8rem;
  padding:0.5rem 0.95rem;
  text-decoration:none;
  transition: border-color 0.25s var(--about-ease), color 0.25s, background-color 0.25s;
}
.page-about .about-hero__index a:hover,
.page-about .about-hero__index a:focus-visible{
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212,175,55,0.06);
}
.page-about .about-hero__emblem{
  display:flex;
  justify-content:center;
  align-items:center;
}
.page-about .about-hero__emblem-svg{
  width:clamp(210px,26vw,340px);
  height:auto;
  display:block;
}

/* ========== 品牌叙事 ========== */
.page-about .about-narrative{
  padding-top: calc(var(--section-space) * 1.08);
  padding-bottom: calc(var(--section-space) * 1.08);
}
.page-about .about-narrative h2{
  font-family: var(--font-heading);
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.3;
  margin:0.4rem 0 1.4rem;
}
.page-about .about-narrative__grid{
  align-items:center;
  gap:2.4rem;
}
.page-about .about-narrative__text p{
  color: var(--color-text-soft);
  line-height:1.75;
  margin:0 0 0.9rem;
}
.page-about .about-narrative__points{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:grid;
  gap:1rem;
}
.page-about .about-narrative__points li{
  display:flex;
  align-items:flex-start;
  gap:0.85rem;
  border-bottom:1px solid var(--color-border);
  padding:0.8rem 0 1rem;
}
.page-about .about-point-num{
  font-family: var(--font-heading);
  font-weight:700;
  color: var(--color-gold-deep);
  font-size:0.82rem;
  letter-spacing:0.08em;
  line-height:1.7;
}
.page-about .about-narrative__points h3{
  font-size:0.98rem;
  margin:0 0 0.2rem;
  color: var(--color-primary);
}
.page-about .about-narrative__points p{
  color: var(--color-text-soft);
  font-size:0.9rem;
  line-height:1.6;
  margin:0;
}
.page-about .about-narrative__visual{
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow-lift);
  background: var(--color-surface);
}

/* ========== 发展里程碑 ========== */
.page-about .about-milestones{
  background:
    radial-gradient(circle at 10% 20%, rgba(46,139,87,0.08), transparent 34%),
    linear-gradient(180deg, #081936 0%, #0A1F44 100%);
}
.page-about .about-milestones .section-lead{
  color: rgba(255,255,255,0.68);
}
.page-about .about-milestones .timeline-list{
  position:relative;
  margin-top:3rem;
  padding:0.5rem 0;
}
.page-about .about-milestones .timeline-list::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:8px;
  width:2px;
  background:linear-gradient(to bottom, transparent, rgba(212,175,55,0.55) 12%, rgba(212,175,55,0.55) 88%, transparent);
  opacity:0.8;
}
.page-about .about-milestones .timeline-item{
  position:relative;
  padding-left:3rem;
  margin-bottom:1.8rem;
}
.page-about .about-milestones .timeline-item:last-child{
  margin-bottom:0;
}
.page-about .about-milestones .timeline-marker{
  position:absolute;
  left:-1px;
  top:1.4rem;
  width:18px;
  height:18px;
  border-radius:50%;
  background: var(--color-primary);
  border:3px solid var(--color-gold);
  box-shadow:0 0 0 6px rgba(212,175,55,0.12);
}
.page-about .about-milestones .timeline-card{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--about-line-soft);
  border-radius:12px;
  padding:1.3rem 1.4rem;
  transition: transform 0.4s var(--about-ease), background-color 0.4s, border-color 0.4s;
}
.page-about .about-milestones .timeline-card:hover{
  background:rgba(212,175,55,0.06);
  border-color: var(--about-line);
  transform: translateY(-2px);
}
.page-about .about-milestones .timeline-meta{
  color: var(--color-gold);
  font-size:0.78rem;
  letter-spacing:0.08em;
  margin:0 0 0.35rem;
}
.page-about .about-milestones .timeline-card h3{
  color:#fff;
  font-family: var(--font-heading);
  font-size:1.12rem;
  margin:0 0 0.5rem;
}
.page-about .about-milestones .timeline-card p{
  color: rgba(255,255,255,0.66);
  font-size:0.9rem;
  line-height:1.7;
  margin:0;
}
.page-about .about-milestones__summary{
  align-items:center;
  gap:2.4rem;
  margin-top:3rem;
}
.page-about .about-milestones__summary h3{
  color:#fff;
  font-family: var(--font-heading);
  font-size:1.4rem;
  margin:0 0 0.8rem;
}
.page-about .about-milestones__summary p{
  color: rgba(255,255,255,0.7);
  line-height:1.75;
  margin:0 0 1.4rem;
}
.page-about .about-milestones__summary .btn-outline{
  color: var(--color-gold);
  border-color: rgba(212,175,55,0.6);
}
.page-about .about-milestones__summary .btn-outline:hover{
  color:#fff;
  background: rgba(212,175,55,0.12);
}
.page-about .about-milestones__visual{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,0.28);
  background: var(--color-primary);
}

/* ========== 资质与荣誉 ========== */
.page-about .about-credentials{
  padding-top: calc(var(--section-space) * 1.1);
  padding-bottom: calc(var(--section-space) * 1.1);
}
.page-about .about-credentials__grid{
  --gap:1rem;
  gap:1rem;
  margin-top:2.4rem;
}
.page-about .about-credential-card{
  border:1px solid var(--color-border);
  border-radius:14px;
  overflow:hidden;
  background: var(--color-surface);
  transition: transform 0.35s var(--about-ease), box-shadow 0.35s var(--about-ease), border-color 0.35s;
}
.page-about .about-credential-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(212,175,55,0.5);
}
.page-about .about-credential-card .card-body{
  padding:1.5rem 1.4rem;
}
.page-about .about-credential-icon{
  width:52px;
  height:52px;
  border-radius:13px;
  margin-bottom:1rem;
  display:grid;
  place-items:center;
  color: var(--color-primary);
  background:linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
  border:1px solid rgba(212,175,55,0.36);
}
.page-about .about-credential-icon svg{
  width:30px;
  height:30px;
  display:block;
}
.page-about .about-credential-card .card-title{
  font-family: var(--font-heading);
  font-size:1.2rem;
  margin:0 0 0.25rem;
}
.page-about .about-credential-card .card-meta{
  font-size:0.8rem;
  color: var(--color-gold-deep);
}
.page-about .about-credential-card .card-text{
  color: var(--color-text-soft);
  font-size:0.88rem;
  line-height:1.65;
  margin:0.6rem 0 0;
}
.page-about .about-credential-card--dark{
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.page-about .about-credential-card--dark .card-title,
.page-about .about-credential-card--dark .card-text{
  color:#fff;
}
.page-about .about-credential-card--dark .card-meta{
  color: rgba(255,255,255,0.68);
}
.page-about .about-credential-card--dark .about-credential-icon{
  color: var(--color-gold);
  background:rgba(255,255,255,0.06);
  border-color: rgba(212,175,55,0.55);
}

/* ========== 资质详情折叠 ========== */
.page-about .about-credentials__details{
  max-width:50rem;
  margin:2.6rem auto 0;
}
.page-about .about-credentials__details .accordion-item{
  border:1px solid var(--color-border);
  border-radius:12px;
  margin-bottom:0.8rem;
  background: var(--color-surface);
  transition: border-color 0.25s;
}
.page-about .about-credentials__details .accordion-item[data-open]{
  border-color: rgba(212,175,55,0.5);
}
.page-about .about-credentials__details .accordion-trigger{
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  padding:1.05rem 1.25rem;
  font-family: var(--font-heading);
  font-size:0.94rem;
  font-weight:700;
  color: var(--color-primary);
  cursor:pointer;
}
.page-about .about-credentials__details .accordion-panel-inner{
  padding:0 1.25rem 1.1rem;
  color: var(--color-text-soft);
  font-size:0.94rem;
  line-height:1.7;
}
.page-about .about-credentials__details .accordion-panel-inner p{
  margin:0;
}

/* ========== 团队与文化 ========== */
.page-about .about-team{
  background: linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 100%);
}
.page-about .about-team__grid{
  align-items:center;
  gap:2.4rem;
}
.page-about .about-team h2{
  font-family: var(--font-heading);
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.3;
  margin:0.4rem 0 1rem;
}
.page-about .about-team__lead{
  color: var(--color-text-soft);
  line-height:1.75;
  margin:0 0 0.2rem;
}
.page-about .about-team__values{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin:1.2rem 0 1rem;
}
.page-about .about-team__values .tag{
  border:1px solid var(--color-line);
  background: rgba(212,175,55,0.08);
  color: var(--color-primary);
  font-size:0.82rem;
  padding:0.45rem 1rem;
  border-radius:999px;
}
.page-about .about-team__values .tag--emerald{
  border-color: rgba(46,139,87,0.32);
  background: rgba(46,139,87,0.10);
  color: var(--color-emerald);
}
.page-about .about-team__statement{
  border-left:3px solid var(--color-gold);
  background: rgba(212,175,55,0.06);
  border-radius:0 8px 8px 0;
  color: var(--color-text-soft);
  font-size:0.92rem;
  line-height:1.7;
  margin:1rem 0 1.4rem;
  padding:0.9rem 1.1rem;
}
.page-about .about-team__links{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  align-items:center;
}
.page-about .about-team__visual{
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow-lift);
  background: var(--color-surface);
}

/* ========== 移动优先调整 ========== */
@media (max-width: 879px){
  .page-about .about-credentials__grid{
    grid-template-columns:1fr;
  }
  .page-about .about-milestones__summary{
    grid-template-columns:1fr;
  }
  .page-about .about-team__grid{
    grid-template-columns:1fr;
  }
  .page-about .about-team__grid .offset-visual{
    order:2;
  }
  .page-about .about-team__grid .offset-copy{
    order:1;
  }
}

/* ========== 平板 ========== */
@media (min-width: 768px){
  .page-about .about-hero__grid{
    grid-template-columns:1.12fr 0.88fr;
    align-items:center;
    gap:2.8rem;
  }
}
@media (min-width: 768px) and (max-width: 879px){
  .page-about .about-narrative__points{
    grid-template-columns:repeat(3, 1fr);
    gap:1.2rem;
  }
  .page-about .about-credentials__grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ========== 桌面 ========== */
@media (min-width: 880px){
  .page-about .about-narrative__points{
    grid-template-columns:repeat(3, 1fr);
    gap:1.4rem;
  }
  .page-about .about-narrative__points li{
    display:block;
    border-bottom:none;
    border-left:2px solid var(--about-line);
    padding:0.2rem 0 0.2rem 1rem;
  }
  .page-about .about-narrative__points .about-point-num{
    display:inline-block;
    margin-bottom:0.4rem;
  }
  .page-about .about-credentials__grid.grid-cols-3{
    grid-template-columns:repeat(3, 1fr);
    gap:1.4rem;
  }

  .page-about .about-milestones .timeline-list::before{
    left:50%;
    transform:translateX(-1px);
  }
  .page-about .about-milestones .timeline-item{
    width:50%;
    padding-left:0;
    margin-bottom:2.6rem;
  }
  .page-about .about-milestones .timeline-item:nth-child(odd){
    margin-right:50%;
    padding-right:3.4rem;
  }
  .page-about .about-milestones .timeline-item:nth-child(even){
    margin-left:50%;
    padding-left:3.4rem;
  }
  .page-about .about-milestones .timeline-marker{
    left:auto;
    right:-9px;
    top:1.5rem;
  }
  .page-about .about-milestones .timeline-item:nth-child(even) .timeline-marker{
    left:-9px;
    right:auto;
  }
  .page-about .about-milestones .timeline-card{
    padding:1.5rem 1.7rem;
  }
}

@media (min-width: 1024px){
  .page-about .about-milestones .timeline-item:nth-child(odd){
    padding-right:4rem;
  }
  .page-about .about-milestones .timeline-item:nth-child(even){
    padding-left:4rem;
  }
}

/* ========== 动效偏好 ========== */
@media (prefers-reduced-motion: reduce){
  .page-about .about-milestones .timeline-card,
  .page-about .about-credential-card{
    transition:none;
    transform:none;
  }
  .page-about .about-milestones .timeline-card:hover,
  .page-about .about-credential-card:hover{
    transform:none;
  }
}