.page-about{
  --about-scroll-offset: calc(var(--header-height) + 1rem);
}

.page-about #origin,
.page-about #milestones,
.page-about #philosophy,
.page-about #team{
  scroll-margin-top: var(--about-scroll-offset);
}

.page-about .breadcrumb{
  max-width: var(--container-max);
  margin: 1rem auto 0;
  padding: 0 clamp(1rem,4vw,2rem);
}

/* ===== Hero 首屏 ===== */
.page-about .about-hero{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  max-width: calc(var(--container-max) + 2rem);
  margin: 1rem auto 0;
  border: 3px solid var(--color-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  background: var(--color-cream);
}

.page-about .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem,4vw,3.5rem);
  background:
    linear-gradient(135deg, rgba(255,215,0,.08) 0%, transparent 55%),
    var(--color-cream);
}

.page-about .hero-emblem{
  width: clamp(84px,6rem,120px);
  height: clamp(84px,6rem,120px);
  object-fit: cover;
  border-radius: 24px;
  border: 3px solid var(--color-dark);
  box-shadow: var(--shadow-hard);
  margin-bottom: 2rem;
}

.page-about .about-hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.25rem,5vw,4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--color-dark);
}

.page-about .hero-dot{
  color: var(--color-orange);
}

.page-about .hero-lead{
  max-width: 29em;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-brown);
}

.page-about .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.page-about .hero-panel{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,107,53,.28) 0%, transparent 42%),
    var(--color-dark);
  color: var(--color-cream);
}

.page-about .hero-panel::before{
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  background: var(--color-gold);
  transform: rotate(14deg);
  opacity: .85;
  z-index: 1;
}

.page-about .hero-panel::after{
  content: "";
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 160px;
  height: 160px;
  background: var(--color-orange);
  transform: rotate(18deg);
  opacity: .9;
  z-index: 1;
}

.page-about .hero-year{
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5rem,13vw,11rem);
  line-height: 1;
  color: var(--color-cream);
  transition: transform .3s ease,color .3s ease;
}

.page-about .hero-panel:hover .hero-year{
  transform: scale(1.03) rotate(-1deg);
  color: var(--color-orange);
}

.page-about .hero-panel-note{
  position: relative;
  z-index: 2;
  margin: .85rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.page-about .hero-panel-edge{
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  color: rgba(245,240,232,.55);
}

/* ===== 章节锚点导航 ===== */
.page-about .about-section-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: var(--container-max);
  margin: 1.75rem auto 0;
  padding: 0 clamp(1rem,4vw,2rem);
}

.page-about .about-section-nav a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-dark);
  background: var(--color-white);
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  transition: background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.page-about .about-section-nav a:hover{
  background: var(--color-dark);
  color: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 rgba(10,25,47,.25);
}

.page-about .about-section-nav a span{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--color-orange);
}

.page-about .about-section-nav a:hover span{
  color: var(--color-gold);
}

/* ===== 章节通用 ===== */
.page-about .section{
  max-width: var(--container-max);
  margin: 2.5rem auto;
  padding: 0 clamp(1rem,4vw,2rem);
}

.page-about .section-header{
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 2rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--color-dark);
}

.page-about .section-number{
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-orange);
}

.page-about .section-title{
  font-family: var(--font-display);
  font-size: clamp(1.5rem,3vw,2.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--color-dark);
}

/* ===== 01 从2016年说起 ===== */
.page-about .origin-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.page-about .origin-story p{
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-brown);
}

.page-about .origin-story p:last-child{
  margin-bottom: 0;
}

.page-about .origin-stats{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: clamp(1.5rem,3vw,2.25rem);
  background: var(--color-white);
  border: 3px solid var(--color-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
}

.page-about .stat-num{
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem,6vw,4rem);
  line-height: 1;
  color: var(--color-dark);
}

.page-about .stat-num em{
  font-style: normal;
  font-size: .55em;
  color: var(--color-orange);
  margin-left: .05em;
}

.page-about .stat-label{
  display: block;
  margin-top: .5rem;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--color-gray);
}

/* ===== 02 发展里程碑 ===== */
.page-about .about-milestones{
  position: relative;
  overflow: hidden;
  max-width: calc(var(--container-max) + 4rem);
  margin: 3rem auto;
  padding: clamp(1.5rem,4vw,3rem);
  background: var(--color-dark);
  color: var(--color-cream);
  border-radius: var(--radius-card);
}

.page-about .about-milestones .section-header{
  border-bottom-color: rgba(245,240,232,.45);
}

.page-about .about-milestones .section-title{
  color: var(--color-cream);
}

.page-about .milestones-visual{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-about .milestone-bg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}

.page-about .milestone-mask{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,25,47,.92) 0%, rgba(10,25,47,.72) 100%);
}

.page-about .milestone-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-about .milestone-item{
  padding: 1.25rem;
  background: rgba(245,240,232,.96);
  border: 2px solid var(--color-white);
  border-radius: calc(var(--radius-card) - 6px);
  box-shadow: 4px 4px 0 rgba(0,0,0,.3);
  transition: transform .25s ease,box-shadow .25s ease,background .25s ease;
}

.page-about .milestone-item:hover{
  transform: translateY(-5px);
  box-shadow: 7px 9px 0 rgba(255,107,53,.55);
  background: var(--color-white);
}

.page-about .milestone-year{
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  margin-bottom: .65rem;
  color: var(--color-dark);
  transition: color .25s ease;
}

.page-about .milestone-item:hover .milestone-year{
  color: var(--color-orange);
}

.page-about .milestone-item h3{
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
}

.page-about .milestone-brief{
  margin: 0;
  font-size: .925rem;
  line-height: 1.6;
  color: var(--color-brown);
}

.page-about .milestone-more{
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--color-brown);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease,opacity .3s ease,margin .3s ease;
}

.page-about .milestone-item:hover .milestone-more,
.page-about .milestone-item:focus-visible .milestone-more{
  max-height: 200px;
  opacity: 1;
  margin-top: .55rem;
}

/* ===== 03 主角感如何落地 ===== */
.page-about .philosophy-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.page-about .philosophy-card{
  position: relative;
  padding: 1.75rem;
  border: 3px solid var(--color-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .25s ease,box-shadow .25s ease;
}

.page-about .philosophy-card:nth-child(1){
  background: var(--color-dark);
  color: var(--color-cream);
}

.page-about .philosophy-card:nth-child(2){
  background: var(--color-orange);
  color: var(--color-dark);
}

.page-about .philosophy-card:nth-child(3){
  background: var(--color-white);
  color: var(--color-dark);
}

.page-about .philosophy-card:nth-child(4){
  background: var(--color-dark);
  color: var(--color-cream);
}

.page-about .philosophy-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard);
}

.page-about .philosophy-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(255,215,0,.18);
  color: var(--color-gold);
  border: 2px solid rgba(255,215,0,.35);
}

.page-about .philosophy-card:nth-child(2) .philosophy-icon{
  color: var(--color-dark);
  background: rgba(10,25,47,.14);
  border-color: rgba(10,25,47,.3);
}

.page-about .philosophy-card:nth-child(3) .philosophy-icon{
  color: var(--color-orange);
  background: rgba(255,107,53,.12);
  border-color: rgba(255,107,53,.35);
}

.page-about .philosophy-card h3{
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-about .philosophy-card p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  opacity: .86;
}

.page-about .philosophy-card a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* ===== 04 团队与文化 ===== */
.page-about .team-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.page-about .team-copy p{
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-brown);
}

.page-about .team-role-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.page-about .role-tag{
  display: inline-block;
  padding: .4rem .8rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
}

.page-about .team-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 3px solid var(--color-dark);
  box-shadow: var(--shadow-hard);
}

/* ===== 响应式 ===== */
@media (hover:none){
  .page-about .milestone-more{
    max-height: none;
    opacity: 1;
    margin-top: .55rem;
  }
}

@media (min-width:720px){
  .page-about .milestone-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 1.1rem;
  }
}

@media (min-width:768px){
  .page-about .about-hero{
    grid-template-columns: 5fr 7fr;
    margin-top: 2rem;
  }

  .page-about .hero-panel{
    min-height: 360px;
  }

  .page-about .section{
    margin: 4rem auto;
  }

  .page-about .about-milestones{
    margin: 4rem auto;
  }
}

@media (min-width:860px){
  .page-about .origin-grid{
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem,5vw,4rem);
  }

  .page-about .team-grid{
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem,5vw,4rem);
  }
}

@media (min-width:1024px){
  .page-about .milestone-grid{
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem;
  }

  .page-about .philosophy-grid{
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .page-about .philosophy-card:nth-child(2){
    margin-top: 2.5rem;
  }

  .page-about .philosophy-card:nth-child(4){
    margin-top: 2.5rem;
  }

  .page-about .philosophy-card:nth-child(3){
    margin-top: -1rem;
  }
}