.page-about{
  --about-space:#0A1128;
  --about-trench:#122040;
  --about-mint:#00FF87;
  --about-orange:#FF7A00;
  --about-ice:#00D4FF;
  --about-pearl:#E6EDF5;
  --about-slate:#8A9BB5;
  --about-border:#2A3B5A;
  --about-amber:#FFC300;
  --about-gutter:clamp(16px,4vw,48px);
  --about-radius:14px;
  display:block;
  background:
    radial-gradient(circle at 88% 12%, rgba(0,212,255,.10), transparent 26%),
    radial-gradient(circle at 8% 78%, rgba(0,255,135,.08), transparent 30%),
    linear-gradient(180deg, var(--about-space) 0%, #0D1A36 55%, var(--about-space) 100%);
  color:var(--about-pearl);
  overflow-x:hidden;
}
.page-about .container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding-inline:var(--about-gutter);
}
.page-about .section-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-family:var(--font-data);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--about-amber);
}
.page-about .section-label::before{
  content:'';
  width:34px;
  height:2px;
  background:var(--about-amber);
  flex:none;
}
.page-about .section-title{
  margin:0 0 18px;
  font-family:var(--font-headline);
  font-size:clamp(2rem,5.6vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--about-pearl);
  max-width:18ch;
}
.page-about .about-lead{
  margin:0 0 14px;
  font-size:1.06rem;
  line-height:1.8;
  color:var(--about-slate);
}
.page-about .breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  font-family:var(--font-data);
  font-size:.85rem;
  color:var(--about-slate);
}
.page-about .breadcrumb-link{
  color:var(--about-ice);
  text-decoration:none;
  transition:color .2s ease;
}
.page-about .breadcrumb-link:hover{
  color:var(--about-mint);
}
.page-about .breadcrumb-sep{
  color:var(--about-border);
}
.page-about .tag{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--about-border);
  border-radius:999px;
  padding:4px 12px;
  font-family:var(--font-data);
  font-size:.74rem;
  letter-spacing:.05em;
  color:var(--about-slate);
  background:rgba(255,255,255,.02);
}
.page-about .tag[data-tone="green"]{
  color:var(--about-mint);
  border-color:rgba(0,255,135,.4);
}
.page-about .tag[data-tone="orange"]{
  color:var(--about-orange);
  border-color:rgba(255,122,0,.4);
}
.page-about .tag[data-tone="ice"]{
  color:var(--about-ice);
  border-color:rgba(0,212,255,.4);
}
.page-about .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.page-about .btn-primary{
  background:var(--about-orange);
  color:var(--about-space);
  box-shadow:0 8px 24px rgba(255,122,0,.28);
}
.page-about .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(255,122,0,.36);
}
.page-about .btn-secondary{
  background:transparent;
  color:var(--about-mint);
  border-color:var(--about-mint);
}
.page-about .btn-secondary:hover{
  background:rgba(0,255,135,.1);
}
.page-about .image-frame{
  display:block;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--about-border);
  background:var(--about-trench);
  box-shadow:var(--shadow-md);
}
.page-about .image-frame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  margin:0;
}

/* ===== 英雄区 ===== */
.page-about .about-hero{
  position:relative;
  min-height:clamp(560px,88vh,820px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:calc(var(--header-h) + 48px) var(--about-gutter) 56px;
  gap:14px;
}
.page-about .about-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 48%, rgba(0,212,255,.10) 48%, rgba(0,212,255,.02) 70%),
    linear-gradient(70deg, transparent 66%, rgba(0,255,135,.12) 66%);
  clip-path:polygon(0 0, 100% 0, 100% 38%, 0 74%);
  pointer-events:none;
  z-index:0;
}
.page-about .about-hero > *{
  position:relative;
  z-index:1;
}
.page-about .about-hero .breadcrumb{
  margin-bottom:auto;
}
.page-about .about-hero-code{
  position:absolute;
  top:calc(var(--header-h) + 40px);
  right:var(--about-gutter);
  text-align:right;
  font-family:var(--font-data);
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.18em;
  color:rgba(138,155,181,.55);
  z-index:1;
}
.page-about .about-hero-title{
  margin:0;
  font-family:var(--font-headline);
  font-size:clamp(3rem,12vw,6.5rem);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--about-pearl);
  max-width:8ch;
}
.page-about .about-hero-slogan{
  margin:0;
  font-family:var(--font-headline);
  font-size:clamp(1.6rem,5vw,3rem);
  line-height:1.1;
  color:var(--about-mint);
}
.page-about .about-hero-desc{
  max-width:42ch;
  margin:6px 0 0;
  font-size:1rem;
  line-height:1.85;
  color:var(--about-slate);
}
.page-about .about-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.page-about .about-hero-meta span{
  border:1px solid var(--about-border);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--font-data);
  font-size:.78rem;
  color:var(--about-ice);
  background:rgba(18,32,64,.5);
}

/* ===== 品牌理念 ===== */
.page-about .about-mission{
  position:relative;
  padding:72px 0 64px;
}
.page-about .about-mission::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, var(--about-mint) 0%, var(--about-ice) 50%, transparent 100%);
  opacity:.6;
}
.page-about .about-mission-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:center;
}
.page-about .about-mission-text p{
  margin:0 0 14px;
  line-height:1.85;
  color:var(--about-slate);
}
.page-about .about-quote{
  margin:24px 0 0;
  padding:18px 22px;
  border-left:4px solid var(--about-mint);
  background:linear-gradient(135deg, rgba(0,255,135,.08), rgba(18,32,64,.5));
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-body);
  font-size:1.08rem;
  line-height:1.75;
  color:var(--about-pearl);
}

/* ===== 发展历程 ===== */
.page-about .about-timeline-section{
  position:relative;
  padding:72px 0 64px;
  background:linear-gradient(180deg, transparent 0%, rgba(0,212,255,.05) 30%, rgba(0,255,135,.04) 100%);
}
.page-about .about-timeline-section::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--about-orange) 55%, transparent 100%);
  opacity:.5;
}
.page-about .about-timeline-head{
  margin-bottom:48px;
}
.page-about .about-timeline{
  position:relative;
  padding-left:30px;
}
.page-about .about-timeline::before{
  content:'';
  position:absolute;
  left:10px;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--about-mint), var(--about-ice), var(--about-orange));
  opacity:.7;
}
.page-about .timeline-event{
  position:relative;
  padding-bottom:28px;
}
.page-about .timeline-marker{
  position:absolute;
  left:-30px;
  top:20px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--about-space);
  border:4px solid var(--about-mint);
  box-shadow:0 0 0 4px rgba(0,255,135,.16);
  z-index:2;
}
.page-about .timeline-card{
  background:linear-gradient(160deg, rgba(0,212,255,.06), var(--about-trench) 42%);
  border:1px solid var(--about-border);
  border-radius:var(--radius);
  padding:20px 20px 22px;
  box-shadow:var(--shadow-md);
  transition:border-color .25s ease, transform .25s ease;
}
.page-about .timeline-card:hover{
  border-color:rgba(0,255,135,.4);
  transform:translateY(-2px);
}
.page-about .timeline-card h3{
  margin:10px 0 8px;
  font-family:var(--font-body);
  font-size:1.15rem;
  font-weight:700;
  color:var(--about-pearl);
}
.page-about .timeline-card p{
  margin:0;
  line-height:1.8;
  font-size:.94rem;
  color:var(--about-slate);
}
.page-about .about-timeline-chart{
  margin:36px auto 0;
  max-width:680px;
  text-align:center;
}
.page-about .about-timeline-chart figcaption{
  margin-top:12px;
  font-family:var(--font-data);
  font-size:.84rem;
  color:var(--about-slate);
}

/* ===== 服务能力 ===== */
.page-about .about-capabilities{
  position:relative;
  padding:72px 0 64px;
}
.page-about .about-capabilities-head{
  margin-bottom:36px;
}
.page-about .cap-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:24px;
}
.page-about .data-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(0,212,255,.08), var(--about-trench) 46%);
  border:1px solid var(--about-border);
  border-radius:var(--radius);
  padding:22px 18px 20px;
  box-shadow:var(--shadow-md);
}
.page-about .data-card::after{
  content:'';
  position:absolute;
  right:-20px;
  top:-20px;
  width:70px;
  height:70px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  pointer-events:none;
}
.page-about .data-card[data-accent="orange"]{
  border-top:4px solid var(--about-orange);
}
.page-about .data-card[data-accent="ice"]{
  border-top:4px solid var(--about-ice);
}
.page-about .data-value{
  display:block;
  font-family:var(--font-data);
  font-size:clamp(1.9rem,5vw,2.8rem);
  font-weight:700;
  line-height:1;
  color:var(--about-mint);
}
.page-about .data-card[data-accent="orange"] .data-value{
  color:var(--about-orange);
}
.page-about .data-card[data-accent="ice"] .data-value{
  color:var(--about-ice);
}
.page-about .data-label{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:.88rem;
  color:var(--about-slate);
}
.page-about .about-fold{
  background:var(--about-trench);
  border:1px solid var(--about-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  margin-bottom:22px;
}
.page-about .about-fold summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  color:var(--about-mint);
  background:rgba(0,255,135,.06);
  transition:background .2s ease;
}
.page-about .about-fold summary::-webkit-details-marker{
  display:none;
}
.page-about .about-fold[open] summary{
  background:rgba(0,255,135,.12);
}
.page-about .about-fold-hint{
  font-family:var(--font-data);
  font-size:.76rem;
  font-weight:400;
  color:var(--about-slate);
}
.page-about .about-fold-body{
  border-top:1px dashed var(--about-border);
}
.page-about .metric-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border-bottom:1px dashed var(--about-border);
}
.page-about .metric-row:last-child{
  border-bottom:0;
}
.page-about .metric-label{
  min-width:76px;
  font-family:var(--font-data);
  font-size:.84rem;
  font-weight:700;
  color:var(--about-orange);
}
.page-about .about-cap-note{
  margin:0;
  padding:16px 18px;
  border-left:4px solid var(--about-ice);
  border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(0,212,255,.06);
  line-height:1.85;
  color:var(--about-slate);
  font-size:.94rem;
}

/* ===== 资质与认证 ===== */
.page-about .about-credentials{
  position:relative;
  padding:72px 0 64px;
  background:
    linear-gradient(180deg, rgba(18,32,64,.4) 0%, rgba(18,32,64,.1) 50%, transparent 100%);
}
.page-about .about-credentials::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, var(--about-mint) 0%, var(--about-amber) 60%, transparent 100%);
  opacity:.5;
}
.page-about .about-credentials-head{
  margin-bottom:36px;
}
.page-about .cred-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.page-about .cred-card{
  position:relative;
  background:var(--about-trench);
  border:1px solid var(--about-border);
  border-top-width:4px;
  border-radius:var(--radius);
  padding:24px 20px 22px;
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, border-color .25s ease;
}
.page-about .cred-card[data-accent="green"]{
  border-top-color:var(--about-mint);
}
.page-about .cred-card[data-accent="ice"]{
  border-top-color:var(--about-ice);
}
.page-about .cred-card[data-accent="orange"]{
  border-top-color:var(--about-orange);
}
.page-about .cred-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,212,255,.35);
}
.page-about .cred-index{
  position:absolute;
  right:16px;
  top:12px;
  font-family:var(--font-headline);
  font-size:2.4rem;
  line-height:1;
  color:rgba(255,195,0,.24);
  letter-spacing:.02em;
}
.page-about .cred-card h3{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-size:1.12rem;
  font-weight:700;
  color:var(--about-pearl);
  padding-right:44px;
}
.page-about .cred-card p{
  margin:0;
  line-height:1.8;
  font-size:.94rem;
  color:var(--about-slate);
}
.page-about .about-trustline{
  margin:34px auto 0;
  max-width:720px;
  text-align:center;
  padding:18px 20px;
  border:1px solid var(--about-border);
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(0,255,135,.08), rgba(0,212,255,.05));
  font-family:var(--font-data);
  font-size:.9rem;
  line-height:1.9;
  color:var(--about-pearl);
}

/* ===== 品牌陈述 ===== */
.page-about .about-statement{
  position:relative;
  padding:72px 0 64px;
}
.page-about .about-statement::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--about-ice) 50%, transparent 100%);
  opacity:.5;
}
.page-about .about-statement-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:center;
}
.page-about .about-statement-content h2{
  margin:0 0 16px;
  font-family:var(--font-headline);
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.04;
  text-transform:uppercase;
  color:var(--about-mint);
}
.page-about .about-statement-content p{
  margin:0 0 24px;
  line-height:1.85;
  color:var(--about-slate);
}

/* ===== 底部导航 ===== */
.page-about .about-cta{
  position:relative;
  padding:64px 0 76px;
  background:
    linear-gradient(120deg, rgba(255,122,0,.14), rgba(0,212,255,.08)),
    var(--about-trench);
  border-top:1px solid var(--about-border);
}
.page-about .about-cta h2{
  margin:0 0 22px;
  font-family:var(--font-headline);
  font-size:clamp(1.9rem,5vw,3rem);
  line-height:1.08;
  text-transform:uppercase;
  color:var(--about-pearl);
  max-width:20ch;
}
.page-about .about-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ===== 桌面端布局 ===== */
@media (min-width: 900px){
  .page-about .about-mission-grid{
    grid-template-columns:1.1fr .9fr;
    gap:56px;
  }
  .page-about .about-mission-visual{
    justify-self:end;
  }
  .page-about .about-statement-grid{
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
  }
  .page-about .about-statement-content{
    padding-right:6%;
  }
  .page-about .cap-stats{
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  .page-about .cred-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
}

@media (min-width: 1024px){
  .page-about .about-timeline{
    padding-left:0;
  }
  .page-about .about-timeline::before{
    left:50%;
    transform:translateX(-50%);
  }
  .page-about .timeline-event{
    width:50%;
    padding:0 68px 40px 0;
  }
  .page-about .timeline-marker{
    left:auto;
    right:-10px;
    top:20px;
  }
  .page-about .timeline-event:nth-child(even){
    margin-left:50%;
    padding:0 0 40px 68px;
  }
  .page-about .timeline-event:nth-child(even) .timeline-marker{
    left:-10px;
    right:auto;
  }
}