/* ==========================================================
   品牌档案 · page-about 专属样式
   移动端优先 / 展览画册式布局
   ========================================================== */
.page-about{
  --about-paper:#FBFAF7;
  --about-gold-line:rgba(212,175,55,.38);
  --about-green-deep:#072A20;
  --about-grid-line:rgba(11,61,46,.07);
  color:var(--color-ink);
  font-family:var(--font-body);
  background:var(--color-white);
  overflow-x:hidden;
}

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

/* ---------- 面包屑 ---------- */
.page-about__crumbs{
  background:var(--color-off-white);
  border-bottom:1px solid var(--color-line);
  padding:14px 0;
}

/* ============ 01 首屏 ============ */
.page-about .about-hero{
  position:relative;
  background:
    linear-gradient(var(--about-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--about-grid-line) 1px, transparent 1px),
    var(--color-off-white);
  background-size:32px 32px;
  border-bottom:4px solid var(--color-accent);
}

.page-about .about-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  padding:56px 0 72px;
  position:relative;
}

.page-about .about-hero__content{
  position:relative;
  z-index:2;
}

.page-about .about-hero__content h1{
  font-family:var(--font-heading);
  font-size:clamp(36px, 9vw, 68px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:18px 0 22px;
  color:var(--color-primary);
  font-weight:700;
  text-transform:none;
}

.page-about .about-hero__title-sub{
  display:block;
  color:var(--color-accent);
  font-size:.55em;
  font-weight:500;
  letter-spacing:.04em;
  margin-top:10px;
}

.page-about .about-hero__lead{
  font-size:17px;
  line-height:1.75;
  color:var(--color-ink);
  max-width:56ch;
  margin:0 0 32px;
}

.page-about .about-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:32px;
  padding-top:24px;
  border-top:1px solid var(--color-line);
}

.page-about .about-hero__stat{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.page-about .about-hero__stat .stat__value{
  font-family:var(--font-data);
  font-size:clamp(24px,4vw,34px);
  font-weight:700;
  color:var(--color-primary);
  line-height:1;
}

.page-about .about-hero__stat .stat__label{
  font-family:var(--font-heading);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(44,44,44,.7);
}

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

.page-about .about-hero__visual{
  position:relative;
  z-index:1;
}

.page-about .about-hero__frame{
  position:relative;
  max-width:520px;
  margin:0 auto;
}

.page-about .about-hero__frame::before{
  content:"";
  position:absolute;
  inset:8% -32px -32px 32px;
  background:var(--color-primary);
  clip-path:polygon(18% 0, 100% 0, 100% 82%, 0 100%);
  border-radius:var(--radius-md);
}

.page-about .about-hero__frame .media-frame{
  position:relative;
  transform:rotate(1.8deg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.35);
}

.page-about .about-hero__stamp{
  position:absolute;
  top:-36px;
  right:-12px;
  font-family:var(--font-heading);
  font-size:110px;
  font-weight:200;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--about-gold-line);
  pointer-events:none;
  z-index:3;
}

@media (min-width:768px){
  .page-about .about-hero__inner{
    gap:56px;
    padding:72px 0 96px;
  }
}

@media (min-width:992px){
  .page-about .about-hero__inner{
    grid-template-columns:minmax(0,5fr) minmax(0,4fr);
    align-items:center;
    padding:88px 0 112px;
  }
  .page-about .about-hero__stamp{
    font-size:150px;
    right:-24px;
    top:-48px;
  }
}

/* ============ 02 品牌缘起 ============ */
.page-about .about-origin{
  position:relative;
  overflow:hidden;
}

.page-about .about-origin::after{
  content:"";
  position:absolute;
  right:-40px;
  top:20px;
  width:180px;
  height:260px;
  opacity:.04;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, var(--color-primary) 10px 14px, transparent 14px 26px, var(--color-primary) 26px 28px),
    repeating-linear-gradient(0deg, transparent 0 20px, var(--color-primary) 20px 22px, transparent 22px 36px);
}

.page-about .about-origin__chapter{
  position:relative;
  z-index:1;
}

.page-about .about-origin__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-top:40px;
  position:relative;
  z-index:1;
}

.page-about .about-origin__text p{
  font-size:16px;
  line-height:1.8;
  margin:0 0 18px;
  color:var(--color-ink);
}

.page-about .about-origin__text strong{
  color:var(--color-primary);
  font-weight:700;
}

.page-about .about-origin__sheet{
  position:relative;
  background:var(--about-paper);
  border:1px solid rgba(11,61,46,.14);
  padding:34px 30px 26px;
  transform:rotate(-.5deg);
  box-shadow:
    0 1px 3px rgba(7,42,32,.06),
    0 14px 32px rgba(7,42,32,.09);
  border-radius:var(--radius-sm);
}

.page-about .about-origin__sheet::before{
  content:"";
  position:absolute;
  top:8px;
  left:8px;
  right:-8px;
  bottom:-8px;
  background:var(--color-white);
  border:1px solid rgba(11,61,46,.09);
  z-index:-1;
  transform:rotate(1deg);
  border-radius:var(--radius-sm);
}

.page-about .about-origin__sheet::after{
  content:"";
  position:absolute;
  left:26px;
  top:0;
  width:48px;
  height:3px;
  background:var(--color-accent);
}

.page-about .about-origin__quote{
  font-family:var(--font-heading);
  font-size:20px;
  line-height:1.55;
  color:var(--color-primary);
  font-weight:500;
  margin:0;
}

.page-about .about-origin__src{
  margin-top:20px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(44,44,44,.65);
  font-family:var(--font-heading);
}

@media (min-width:768px){
  .page-about .about-origin__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:56px;
    align-items:start;
  }
}

/* ============ 03 发展里程碑 ============ */
.page-about .about-milestone{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212,175,55,.08), transparent 60%),
    var(--color-primary);
}

.page-about .about-milestone__chapter .chapter__body{
  border-bottom:1px solid rgba(212,175,55,.25);
}

.page-about .about-timeline{
  list-style:none;
  margin:52px 0 0;
  padding:0;
  position:relative;
}

.page-about .about-timeline::before{
  content:"";
  position:absolute;
  left:15px;
  top:4px;
  bottom:8px;
  width:2px;
  background:linear-gradient(to bottom, var(--color-accent) 0%, rgba(212,175,55,.15) 100%);
}

.page-about .about-timeline__item{
  position:relative;
  padding-left:52px;
  padding-bottom:40px;
}

.page-about .about-timeline__item:last-child{
  padding-bottom:0;
}

.page-about .about-timeline__marker{
  position:absolute;
  left:9px;
  top:8px;
  width:14px;
  height:14px;
  background:var(--color-accent);
  transform:rotate(45deg);
  border:3px solid rgba(11,61,46,.9);
  box-shadow:0 0 0 1px var(--color-accent);
  border-radius:2px;
}

.page-about .about-timeline__year{
  font-family:var(--font-data);
  font-size:30px;
  font-weight:700;
  color:var(--color-accent);
  letter-spacing:.05em;
  line-height:1.1;
  margin-bottom:10px;
}

.page-about .about-timeline__card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(212,175,55,.24);
  border-left:3px solid var(--color-accent);
  padding:18px 20px;
  border-radius:var(--radius-md);
  transition:var(--transition-base);
}

.page-about .about-timeline__card:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(212,175,55,.45);
}

.page-about .about-timeline__title{
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  color:var(--color-white);
  margin:0 0 8px;
  letter-spacing:.02em;
}

.page-about .about-timeline__desc{
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0;
}

@media (min-width:768px){
  .page-about .about-timeline{
    margin-top:64px;
  }
  .page-about .about-timeline__item{
    padding-left:72px;
    padding-bottom:48px;
  }
  .page-about .about-timeline::before{
    left:22px;
  }
  .page-about .about-timeline__marker{
    left:16px;
    width:15px;
    height:15px;
  }
  .page-about .about-timeline__card{
    max-width:720px;
    padding:22px 28px;
  }
}

/* ============ 04 数据实力 ============ */
.page-about .about-data{
  background:
    linear-gradient(var(--about-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--about-grid-line) 1px, transparent 1px),
    var(--color-bg-light);
  background-size:40px 40px;
}

.page-about .about-data__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin-top:44px;
}

.page-about .about-data__leaders{
  list-style:none;
  margin:0;
  padding:0;
}

.page-about .about-data__leader{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:16px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px dashed var(--color-line);
}

.page-about .about-data__leader:first-child{
  padding-top:0;
}

.page-about .about-data__num{
  font-family:var(--font-data);
  font-size:clamp(26px,5vw,40px);
  font-weight:700;
  color:var(--color-accent);
  line-height:1;
  text-shadow:0 2px 10px rgba(212,175,55,.2);
}

.page-about .about-data__meta{
  font-size:15px;
  line-height:1.65;
  color:var(--color-ink);
}

.page-about .about-data__source{
  margin-top:28px;
  font-size:14px;
  line-height:1.75;
  color:rgba(44,44,44,.72);
  border-left:3px solid var(--color-accent);
  padding:8px 0 8px 16px;
  background:rgba(212,175,55,.06);
}

.page-about .about-data__visual{
  position:relative;
}

.page-about .about-data__visual .media-frame{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  border:6px solid var(--color-white);
  outline:1px solid var(--color-line);
}

.page-about .about-data__flow{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:56px;
  padding-top:40px;
  border-top:2px solid var(--color-accent);
}

.page-about .about-data__step{
  position:relative;
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:28px 24px 24px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-line);
}

.page-about .about-data__step-num{
  position:absolute;
  top:8px;
  right:16px;
  font-family:var(--font-heading);
  font-size:52px;
  font-weight:200;
  color:transparent;
  -webkit-text-stroke:1px rgba(11,61,46,.16);
  line-height:1;
}

.page-about .about-data__step-title{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:700;
  color:var(--color-primary);
  margin:0 0 8px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.page-about .about-data__step-desc{
  font-size:14px;
  line-height:1.7;
  color:rgba(44,44,44,.75);
  margin:0;
}

@media (min-width:768px){
  .page-about .about-data__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:56px;
    align-items:center;
  }
  .page-about .about-data__flow{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
}

/* ============ 05 团队与认证 ============ */
.page-about .about-team__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
  margin-top:44px;
}

.page-about .about-team__roles{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.page-about .about-team__role{
  display:flex;
  gap:20px;
  align-items:flex-start;
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-top:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:26px 24px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition-base);
}

.page-about .about-team__role:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.page-about .about-team__role-count{
  flex:0 0 auto;
  font-family:var(--font-data);
  font-size:clamp(30px,5vw,42px);
  font-weight:700;
  color:var(--color-primary);
  line-height:1;
  min-width:86px;
}

.page-about .about-team__role-body{
  border-left:1px solid var(--color-line);
  padding-left:20px;
}

.page-about .about-team__role-title{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:700;
  color:var(--color-ink);
  margin:0 0 8px;
  letter-spacing:.03em;
}

.page-about .about-team__role-desc{
  font-size:14px;
  line-height:1.7;
  color:rgba(44,44,44,.72);
  margin:0;
}

.page-about .about-team__note{
  font-size:14px;
  line-height:1.75;
  color:rgba(44,44,44,.65);
  margin:4px 0 0;
  padding:12px 16px;
  border-left:3px solid var(--color-cyan);
  background:rgba(0,139,139,.05);
}

.page-about .about-team__badge{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-about .about-team__badge::before{
  content:"";
  position:absolute;
  inset:8% -6% -6% 8%;
  background:var(--color-primary);
  clip-path:polygon(6% 0, 100% 8%, 94% 100%, 0 88%);
  border-radius:var(--radius-lg);
}

.page-about .about-team__badge-inner{
  position:relative;
  width:100%;
  max-width:420px;
  text-align:center;
  padding:56px 32px 48px;
  background:
    radial-gradient(circle at 50% 30%, rgba(212,175,55,.14), transparent 70%),
    var(--color-off-white);
  border:1px solid rgba(212,175,55,.4);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.page-about .about-team__badge-label{
  font-family:var(--font-heading);
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:12px;
}

.page-about .about-team__badge-title{
  font-family:var(--font-heading);
  font-size:clamp(26px,5vw,34px);
  font-weight:700;
  color:var(--color-primary);
  line-height:1.2;
  margin-bottom:18px;
}

.page-about .about-team__badge-note{
  font-size:14px;
  line-height:1.75;
  color:rgba(44,44,44,.7);
  padding:0 16px;
}

@media (min-width:768px){
  .page-about .about-team__grid{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:56px;
    align-items:center;
  }
}

/* ============ 06 合作伙伴 ============ */
.page-about .about-partners{
  background:
    radial-gradient(ellipse at 80% 100%, rgba(212,175,55,.1), transparent 60%),
    var(--color-primary-deep);
}

.page-about .about-partners__chapter .chapter__sub{
  color:rgba(255,255,255,.72);
}

.page-about .about-partners__marquee{
  margin-top:48px;
  overflow:hidden;
  border-top:1px solid rgba(212,175,55,.25);
  border-bottom:1px solid rgba(212,175,55,.25);
  padding:18px 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.page-about .about-partners__ticker{
  display:flex;
  width:max-content;
  animation:about-ticker 36s linear infinite;
}

.page-about .about-partners__ticker-group{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:12px;
  flex-shrink:0;
}

.page-about .about-partners__ticker-group li{
  font-family:var(--font-heading);
  font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--color-warning);
  background:rgba(212,175,55,.1);
  border:1px solid rgba(212,175,55,.3);
  border-radius:var(--radius-pill);
  padding:10px 22px;
  white-space:nowrap;
}

.page-about .about-partners__note{
  margin-top:28px;
  font-size:14px;
  color:rgba(255,255,255,.66);
  text-align:center;
}

.page-about .about-partners__link{
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:4px;
  font-weight:700;
}

.page-about .about-partners__link:hover{
  color:var(--color-accent-light);
}

@keyframes about-ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (prefers-reduced-motion:reduce){
  .page-about .about-partners__ticker{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  .page-about .about-partners__ticker-group[aria-hidden="true"]{
    display:none;
  }
  .page-about .about-partners__ticker-group{
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* ============ 地域横幅 ============ */
.page-about .about-banner{
  position:relative;
  isolation:isolate;
}

.page-about .about-banner__media{
  position:absolute;
  inset:0;
  z-index:-1;
}

.page-about .about-banner__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.65) brightness(.55) contrast(1.05);
}

.page-about .about-banner__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(7,42,32,.88) 30%, rgba(11,61,46,.55) 70%, rgba(11,61,46,.35) 100%);
}

.page-about .about-banner__content{
  padding:64px 0 72px;
  max-width:620px;
  color:var(--color-white);
}

.page-about .about-banner__label{
  font-family:var(--font-heading);
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:12px;
}

.page-about .about-banner__text{
  font-size:20px;
  line-height:1.7;
  margin-bottom:28px;
  color:rgba(255,255,255,.92);
  font-family:var(--font-body);
}

@media (min-width:768px){
  .page-about .about-banner__content{
    padding:88px 0 104px;
  }
  .page-about .about-banner__text{
    font-size:24px;
  }
}