.page-about{
  --about-orange-glow: linear-gradient(135deg, rgba(255,107,53,0.2) 0%, rgba(255,107,53,0) 58%);
  --about-tea-wash: radial-gradient(circle at 18% 22%, rgba(196,168,130,0.16) 0%, transparent 46%);
  --about-line-soft: 1px solid rgba(10,31,68,0.14);
  --about-shadow-crisp: 8px 8px 0 rgba(10,31,68,0.14);
  width:100%;
  overflow-x:hidden;
}

/* ===== 首屏 Hero ===== */
.page-about .about-hero{
  background: var(--color-primary);
  padding: 132px 0 68px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.page-about .about-hero::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background: var(--color-accent);
  z-index:2;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  top:-40px; left:-40px;
  width:260px; height:260px;
  background: var(--about-orange-glow);
  pointer-events:none;
}
.page-about .about-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:44px;
}
.page-about .about-hero-copy{
  max-width:640px;
}
.page-about .about-hero .breadcrumbs{
  color: rgba(255,255,255,0.66);
  font-family: var(--font-body);
  font-size:0.875rem;
  margin-bottom:22px;
}
.page-about .about-hero .breadcrumbs a{
  color: rgba(255,255,255,0.88);
  text-decoration:none;
  border-bottom:1px solid rgba(255,107,53,0.6);
  transition:color 0.2s;
}
.page-about .about-hero .breadcrumbs a:hover{
  color: var(--color-accent);
}
.page-about .about-hero-kicker{
  font-family: var(--font-body);
  font-size:0.875rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--color-accent);
  margin:0 0 18px;
  font-weight:600;
}
.page-about .about-hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height:1.06;
  margin:0 0 24px;
  color:#fff;
  text-transform:uppercase;
}
.page-about .about-h1-sub{
  display:block;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight:600;
  letter-spacing:0.06em;
  color: var(--color-tea);
  margin-top:12px;
  text-transform:none;
  line-height:1.4;
}
.page-about .about-hero-lead{
  font-family: var(--font-body);
  font-size:1.0625rem;
  line-height:1.75;
  color: rgba(255,255,255,0.84);
  margin:0 0 26px;
  max-width:580px;
}
.page-about .about-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}
.page-about .about-hero-tags span{
  font-family: var(--font-fallback);
  font-size:0.8125rem;
  font-weight:500;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(196,168,130,0.4);
  border-radius:999px;
  padding:6px 14px;
  letter-spacing:0.02em;
}
.page-about .about-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.page-about .about-hero .btn-outline{
  border-color: rgba(255,255,255,0.6);
  color:#fff;
}
.page-about .about-hero .btn-outline:hover{
  border-color: var(--color-accent);
  background: rgba(255,107,53,0.14);
  color:#fff;
}
.page-about .about-hero-visual{
  position:relative;
  max-width:640px;
  margin:0 auto;
}
.page-about .about-hero-visual-frame{
  border:6px solid #fff;
  box-shadow: 12px 12px 0 rgba(255,107,53,0.28);
  transform:rotate(1.2deg);
  transition: transform 0.35s ease;
}
.page-about .about-hero-visual-frame:hover{
  transform:rotate(0deg);
}
.page-about .about-hero-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-about .about-hero-stamp{
  position:absolute;
  top:-14px; right:-8px;
  font-family: var(--font-display);
  font-size:1.05rem;
  letter-spacing:0.06em;
  color: #fff;
  background: var(--color-accent);
  padding:10px 16px;
  transform:rotate(4deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.22);
  z-index:2;
}

/* ===== 品牌叙事 ===== */
.page-about .about-narrative{
  background: var(--color-bg);
  position:relative;
}
.page-about .about-narrative::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, var(--color-tea), transparent 70%);
}
.page-about .about-narrative-head,
.page-about .about-milestones-head,
.page-about .about-stats-head,
.page-about .about-partners-head{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:40px;
}
.page-about .about-section-num{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height:1;
  color: var(--color-tea);
  display:block;
  min-width:0.72em;
  opacity:0.85;
  letter-spacing:0.02em;
}
.page-about .about-narrative .section-title,
.page-about .about-milestones .section-title,
.page-about .about-stats .section-title,
.page-about .about-partners .section-title{
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height:1.15;
  margin:0;
}
.page-about .about-narrative .section-kicker,
.page-about .about-milestones .section-kicker,
.page-about .about-stats .section-kicker,
.page-about .about-partners .section-kicker{
  color: var(--color-accent-dark);
  font-size:0.8125rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 6px;
}
.page-about .about-narrative-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.page-about .about-narrative-main p{
  font-family: var(--font-body);
  font-size:1.0625rem;
  line-height:1.8;
  color: var(--color-text);
  margin:0 0 20px;
}
.page-about .about-narrative-quote{
  background: var(--color-tea-light);
  border-left:6px solid var(--color-accent);
  padding:30px 26px;
  position:relative;
  box-shadow: var(--about-shadow-crisp);
}
.page-about .about-narrative-quote blockquote{
  margin:0 0 16px;
  font-family: var(--font-display);
  font-size:1.35rem;
  line-height:1.4;
  color: var(--color-primary);
  letter-spacing:0.02em;
}
.page-about .about-narrative-quote-source{
  font-family: var(--font-body);
  font-size:0.875rem;
  color: var(--color-text-muted);
}

/* ===== 发展里程碑 ===== */
.page-about .about-milestones{
  background: var(--color-primary);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.page-about .about-milestones::before{
  content:"";
  position:absolute;
  width:320px; height:320px;
  top:10%; right:-90px;
  background: var(--about-orange-glow);
  border-radius:50%;
  pointer-events:none;
}
.page-about .about-milestones-head{
  position:relative;
  z-index:1;
}
.page-about .about-milestones .section-kicker{
  color: var(--color-accent);
}
.page-about .about-milestones .section-title{
  color:#fff;
}
.page-about .about-milestones .about-section-num{
  color: var(--color-tea);
}
.page-about .about-timeline-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}
.page-about .about-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:20px;
}
.page-about .about-timeline::before{
  content:"";
  position:absolute;
  left:20px;
  top:6px;
  bottom:6px;
  width:2px;
  background: repeating-linear-gradient(to bottom, var(--color-accent) 0 8px, transparent 8px 16px);
  opacity:0.55;
}
.page-about .about-timeline-item{
  position:relative;
  padding:0 0 38px 22px;
}
.page-about .about-timeline-item:last-child{
  padding-bottom:0;
}
.page-about .about-timeline-marker{
  position:absolute;
  left:-20px;
  top:0;
  width:42px;
  height:42px;
  border-radius:50%;
  background: var(--color-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 6px rgba(255,107,53,0.45);
  z-index:2;
}
.page-about .about-timeline-marker span{
  font-family: var(--font-display);
  font-size:0.8125rem;
  color:#fff;
  letter-spacing:0.04em;
  white-space:nowrap;
}
.page-about .about-timeline-card{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-left:4px solid var(--color-accent);
  padding:20px 20px 18px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.page-about .about-timeline-card:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,107,53,0.6);
  transform: translateX(4px);
}
.page-about .about-timeline-card h3{
  font-family: var(--font-display);
  font-size:1.15rem;
  color: #fff;
  margin:0 0 10px;
  letter-spacing:0.03em;
}
.page-about .about-timeline-card p{
  font-family: var(--font-body);
  font-size:0.9375rem;
  line-height:1.65;
  color: rgba(255,255,255,0.78);
  margin:0;
}
.page-about .about-timeline-visual{
  margin-top:10px;
}
.page-about .about-timeline-visual img{
  display:block;
  width:100%;
  height:auto;
  border:4px solid rgba(255,255,255,0.9);
  box-shadow: 10px 10px 0 rgba(255,107,53,0.24);
  object-fit:cover;
  transition: transform 0.3s;
}
.page-about .about-timeline-visual img:hover{
  transform: scale(1.01);
}
.page-about .about-timeline-caption{
  font-family: var(--font-body);
  font-size:0.875rem;
  color: var(--color-tea);
  margin:14px 0 0;
  padding-left:4px;
  letter-spacing:0.04em;
}

/* ===== 数据与规模 ===== */
.page-about .about-stats{
  background: var(--color-bg);
  position:relative;
}
.page-about .about-stats::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--color-tea), transparent);
}
.page-about .about-stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:44px;
}
.page-about .about-stat-item{
  background: var(--color-surface);
  border:2px solid var(--color-text);
  box-shadow: var(--about-shadow-crisp);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  overflow:hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.page-about .about-stat-item:hover{
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 rgba(10,31,68,0.16);
}
.page-about .about-stat-primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.page-about .about-stat-primary .about-stat-num,
.page-about .about-stat-primary .about-stat-label,
.page-about .about-stat-primary .about-stat-desc{
  color:#fff;
}
.page-about .about-stat-primary .about-stat-plus{
  color: var(--color-accent);
}
.page-about .about-stat-num{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height:1;
  color: var(--color-primary);
  letter-spacing:0.02em;
  white-space:nowrap;
  animation: about-num-in 0.6s ease-out both;
}
.page-about .about-stat-plus{
  color: var(--color-accent);
  font-size:0.6em;
  vertical-align:top;
  margin-left:2px;
}
.page-about .about-stat-unit{
  font-size:0.45em;
  color: var(--color-text-muted);
  margin-left:4px;
  font-family: var(--font-body);
}
.page-about .about-stat-label{
  font-family: var(--font-fallback);
  font-size:0.9375rem;
  font-weight:700;
  color: var(--color-text);
}
.page-about .about-stat-desc{
  font-family: var(--font-body);
  font-size:0.8125rem;
  color: var(--color-text-muted);
  margin:0;
  line-height:1.5;
}
.page-about .about-stats-visual{
  margin-top:8px;
}
.page-about .about-stats-visual img{
  display:block;
  width:100%;
  height:auto;
  border:4px solid #fff;
  box-shadow: var(--about-shadow-crisp);
  object-fit:cover;
}

/* ===== 合作与认证 ===== */
.page-about .about-partners{
  background: var(--color-surface);
}
.page-about .about-partners-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.page-about .about-partner-card{
  background: var(--color-bg);
  border:2px solid var(--color-primary);
  padding:26px 22px;
  position:relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.page-about .about-partner-card:hover{
  box-shadow: 10px 10px 0 rgba(10,31,68,0.12);
  transform: translate(-2px, -2px);
}
.page-about .about-partner-num{
  position:absolute;
  top:-14px; left:18px;
  width:34px; height:34px;
  background: var(--color-accent);
  color:#fff;
  font-family: var(--font-display);
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--color-surface);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
}
.page-about .about-partner-card h3{
  font-family: var(--font-display);
  font-size:1.15rem;
  color: var(--color-primary);
  margin:4px 0 12px;
  letter-spacing:0.02em;
}
.page-about .about-partner-card > p{
  font-family: var(--font-body);
  font-size:0.9375rem;
  line-height:1.7;
  color: var(--color-text);
  margin:0 0 16px;
}
.page-about .about-partner-details{
  border-top:1px dashed var(--color-border);
  padding-top:12px;
  margin-top:4px;
}
.page-about .about-partner-details summary{
  font-family: var(--font-fallback);
  font-size:0.875rem;
  font-weight:700;
  color: var(--color-accent-dark);
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.page-about .about-partner-details summary::-webkit-details-marker{
  display:none;
}
.page-about .about-partner-details summary::before{
  content:"＋";
  display:inline-block;
  width:18px; height:18px;
  text-align:center;
  line-height:16px;
  font-size:0.875rem;
  background: var(--color-accent);
  color:#fff;
  border-radius:50%;
  transition: transform 0.25s ease;
}
.page-about .about-partner-details[open] summary::before{
  content:"－";
  transform: rotate(180deg);
}
.page-about .about-partner-details p{
  font-family: var(--font-body);
  font-size:0.875rem;
  line-height:1.7;
  color: var(--color-text-muted);
  margin:14px 0 4px;
  padding-left:26px;
}

/* ===== 茶色收尾 ===== */
.page-about .about-closing{
  background: var(--color-tea-light);
  position:relative;
  padding:76px 0;
  overflow:hidden;
}
.page-about .about-closing::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--about-tea-wash);
  pointer-events:none;
}
.page-about .about-closing::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:8px;
  background: repeating-linear-gradient(90deg, var(--color-accent) 0 28px, var(--color-primary) 28px 56px);
}
.page-about .about-closing-inner{
  position:relative;
  z-index:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.page-about .about-closing-kicker{
  font-family: var(--font-body);
  font-size:0.875rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--color-accent-dark);
  margin:0;
  font-weight:600;
}
.page-about .about-closing-text{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  line-height:1.4;
  color: var(--color-primary);
  margin:0 0 24px;
  max-width:640px;
}
.page-about .about-closing-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* ===== 动画 ===== */
@keyframes about-num-in{
  from{
    opacity:0;
    transform: translateY(12px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* ===== 桌面端增强 ===== */
@media (min-width: 768px){
  .page-about .about-hero{
    padding: 170px 0 90px;
  }
  .page-about .about-hero-inner{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items:center;
    gap:56px;
  }
  .page-about .about-hero-visual{
    margin:0;
  }
  .page-about .about-hero-visual-frame{
    margin-left:auto;
    max-width:100%;
  }
  .page-about .about-narrative-grid{
    grid-template-columns: 1.4fr 0.6fr;
    gap:48px;
  }
  .page-about .about-timeline-grid{
    grid-template-columns: 1.2fr 0.8fr;
    gap:56px;
    align-items:start;
  }
  .page-about .about-stats-grid{
    grid-template-columns: repeat(3, 1fr);
    gap:22px;
  }
  .page-about .about-partners-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:28px;
  }
  .page-about .about-closing{
    padding: 96px 0;
  }
}

@media (min-width: 1200px){
  .page-about .about-hero-inner{
    grid-template-columns: 1.2fr 0.8fr;
    gap:72px;
  }
  .page-about .about-stats-grid{
    grid-template-columns: repeat(6, 1fr);
  }
  .page-about .about-stat-item{
    padding:28px 22px;
  }
  .page-about .about-narrative-main p{
    font-size:1.125rem;
  }
}