.page-about{
  --about-dot:44px;
  --about-dot-color:rgba(245,182,66,.55);
  --about-line-width:3px;
  --about-card-shadow:0 14px 40px rgba(10,16,53,.20);
  --about-grad-panel:linear-gradient(135deg,rgba(123,44,191,.16),rgba(255,77,109,.10));
  overflow-x:clip;
}

/* ===== Hero 首屏 ===== */
.page-about .page-about-hero{
  position:relative;
  background:linear-gradient(135deg,#0a1035 0%,#123a6b 62%,#1e3a8a 100%);
  padding:48px 0 92px;
  overflow:hidden;
  color:#f8f9fa;
}
.page-about .page-about-hero::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:52%;
  height:100%;
  background:linear-gradient(120deg,rgba(123,44,191,.42),rgba(255,77,109,.26));
  clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);
  z-index:0;
  pointer-events:none;
}
.page-about .page-about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 84% 28%,rgba(245,182,66,.14),transparent 42%);
  z-index:0;
  pointer-events:none;
}
.page-about .page-about-hero-inner{
  position:relative;
  z-index:1;
}
.page-about .page-about-hero-breadcrumbs{
  margin-bottom:44px;
}
.page-about .page-about-breadcrumb-sep{
  margin:0 10px;
  color:rgba(248,249,250,.48);
}
.page-about .page-about-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.page-about .page-about-hero-copy h1{
  margin:0 0 20px;
  font-family:var(--jb-font-display);
  font-size:clamp(32px,6vw,52px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:.01em;
  color:#f8f9fa;
}
.page-about .page-about-hero-title-sub{
  display:block;
  margin-top:8px;
  font-size:clamp(20px,3vw,30px);
  font-weight:700;
  color:var(--jb-gold-light);
  letter-spacing:.04em;
}
.page-about .page-about-hero-lead{
  font-family:var(--jb-font-body);
  font-size:16px;
  line-height:1.85;
  color:rgba(248,249,250,.82);
  max-width:32em;
  margin:0 0 34px;
  text-wrap:pretty;
}
.page-about .page-about-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.page-about .page-about-hero-actions .btn-ghost{
  border-color:rgba(248,249,250,.42);
  color:#f8f9fa;
}
.page-about .page-about-hero-year{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  padding-left:4px;
}
.page-about .page-about-hero-year-label{
  font-family:var(--jb-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.5em;
  color:var(--jb-gold);
  text-transform:uppercase;
  margin-bottom:4px;
}
.page-about .page-about-hero-year-number{
  font-family:var(--jb-font-num);
  font-size:clamp(96px,22vw,220px);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,#f5b642 15%,#ff8c42 45%,#ff4d6d 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.page-about .page-about-hero-year-note{
  font-family:var(--jb-font-display);
  font-size:14px;
  font-weight:500;
  color:rgba(248,249,250,.72);
  letter-spacing:.12em;
  margin-top:8px;
  padding-left:8px;
  border-left:3px solid var(--jb-gold);
}
.page-about .page-about-hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  width:100%;
  height:80px;
  z-index:1;
  pointer-events:none;
}
.page-about .page-about-hero-wave path{
  opacity:.85;
}

/* ===== 品牌起源 ===== */
.page-about .page-about-origin{
  background:var(--jb-pearl);
  padding:72px 0 84px;
}
.page-about .page-about-origin-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
.page-about .page-about-origin-copy h2,
.page-about .page-about-milestones h2,
.page-about .page-about-philosophy h2,
.page-about .page-about-future h2{
  font-family:var(--jb-font-display);
  font-weight:900;
  font-size:clamp(26px,4.4vw,38px);
  line-height:1.25;
  color:var(--jb-ink);
  margin:10px 0 22px;
}
.page-about .page-about-origin-prose{
  font-family:var(--jb-font-body);
  font-size:16px;
  line-height:1.9;
  color:var(--jb-sub);
}
.page-about .page-about-origin-prose p{
  margin:0 0 1.2em;
}
.page-about .page-about-origin-figure-frame{
  position:relative;
  margin:0;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--about-card-shadow);
  transform:rotate(1.2deg) translateY(6px);
}
.page-about .page-about-origin-img{
  display:block;
  width:100%;
  height:auto;
  min-height:220px;
  object-fit:cover;
}
.page-about .page-about-origin-figure-frame .figcaption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  margin:0;
  padding:10px 14px;
  background:rgba(10,16,53,.72);
  color:#f8f9fa;
  font-family:var(--jb-font-display);
  font-size:12px;
  letter-spacing:.06em;
  border-radius:12px;
  backdrop-filter:blur(4px);
}
.page-about .page-about-origin-figure::before{
  content:"";
  position:absolute;
  inset:-10px -10px auto auto;
  width:120px;
  height:120px;
  background:linear-gradient(135deg,#7b2cbf,#ff4d6d);
  border-radius:20px;
  z-index:-1;
  opacity:.35;
  transform:rotate(8deg);
}

/* ===== 发展里程碑 ===== */
.page-about .page-about-milestones{
  background:linear-gradient(180deg,#f8f9fa 0%,#eef2f7 100%);
  padding:72px 0 80px;
}
.page-about .page-about-section-head{
  max-width:640px;
  margin-bottom:52px;
}
.page-about .page-about-section-desc{
  font-family:var(--jb-font-body);
  font-size:16px;
  line-height:1.8;
  color:var(--jb-sub);
  margin-top:8px;
}
.page-about .page-about-timeline{
  position:relative;
  padding-left:56px;
}
.page-about .page-about-timeline-line{
  position:absolute;
  left:19px;
  top:0;
  bottom:0;
  width:var(--about-line-width);
  border-radius:4px;
  background:linear-gradient(180deg,#f5b642 0%,#7b2cbf 55%,#ff4d6d 100%);
  opacity:.7;
}
.page-about .page-about-timeline-item{
  position:relative;
  margin-bottom:36px;
}
.page-about .page-about-timeline-item:last-child{
  margin-bottom:0;
}
.page-about .page-about-timeline-dot{
  position:absolute;
  left:-1px;
  top:30px;
  width:var(--about-dot);
  height:var(--about-dot);
  border-radius:50%;
  background:linear-gradient(135deg,#0a1035,#123a6b);
  border:3px solid var(--about-dot-color);
  box-shadow:0 0 0 5px rgba(245,182,66,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.page-about .page-about-timeline-dot span{
  font-family:var(--jb-font-num);
  font-size:13px;
  font-weight:700;
  color:var(--jb-gold);
  letter-spacing:.04em;
}
.page-about .page-about-timeline-dot--has-img{
  width:54px;
  height:54px;
  padding:0;
  overflow:hidden;
  border-radius:50%;
  border:3px solid var(--jb-gold);
  box-shadow:0 0 0 6px rgba(245,182,66,.16);
  background:var(--jb-deepest);
}
.page-about .page-about-timeline-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-about .page-about-timeline-card{
  background:#ffffff;
  transition:transform .45s var(--jb-ease-out),box-shadow .45s var(--jb-ease-out);
}
.page-about .page-about-timeline-card:hover,
.page-about .page-about-timeline-card:focus-within{
  transform:translateY(-5px);
  box-shadow:var(--about-card-shadow);
}
.page-about .page-about-timeline-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.page-about .page-about-timeline-year{
  font-family:var(--jb-font-num);
  font-size:28px;
  font-weight:700;
  color:var(--jb-deep);
  line-height:1;
}
.page-about .page-about-timeline-card h3{
  font-family:var(--jb-font-display);
  font-size:20px;
  font-weight:800;
  color:var(--jb-ink);
  margin:0 0 10px;
}
.page-about .page-about-timeline-card .prose{
  font-family:var(--jb-font-body);
  font-size:15px;
  line-height:1.8;
  color:var(--jb-sub);
  margin:0;
}
.page-about .page-about-timeline-footer{
  margin-top:56px;
  text-align:center;
  font-family:var(--jb-font-body);
  font-size:15px;
  color:var(--jb-sub);
}
.page-about .page-about-timeline-footer .page-link{
  color:var(--jb-deep);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid rgba(245,182,66,.65);
  padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.page-about .page-about-timeline-footer .page-link:hover{
  color:var(--jb-gold);
  border-color:var(--jb-gold);
}

/* ===== 品牌理念 ===== */
.page-about .page-about-philosophy{
  position:relative;
  padding:88px 0 96px;
  overflow:hidden;
}
.page-about .page-about-philosophy-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-about .page-about-philosophy-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-about .page-about-philosophy-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,rgba(10,16,53,.88) 0%,rgba(18,58,107,.78) 55%,rgba(123,44,191,.55) 100%);
}
.page-about .page-about-philosophy-inner{
  position:relative;
  z-index:1;
}
.page-about .page-about-philosophy-head{
  margin-bottom:48px;
}
.page-about .page-about-philosophy-head .eyebrow,
.page-about .page-about-future .eyebrow{
  color:var(--jb-gold);
}
.page-about .page-about-philosophy-head h2{
  color:#f8f9fa;
}
.page-about .page-about-philosophy-head .page-about-section-desc{
  color:rgba(248,249,250,.72);
}
.page-about .page-about-philosophy-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.page-about .page-about-philosophy-item{
  background:rgba(248,249,250,.07);
  border:1px solid rgba(248,249,250,.14);
  border-left:4px solid var(--jb-gold);
  border-radius:18px;
  padding:30px 28px;
  backdrop-filter:blur(6px);
  transition:transform .4s var(--jb-ease-out),background .4s;
}
.page-about .page-about-philosophy-item:hover{
  transform:translateY(-4px);
  background:rgba(248,249,250,.12);
}
.page-about .page-about-philosophy-num{
  font-family:var(--jb-font-num);
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--jb-gold);
  display:block;
  margin-bottom:10px;
}
.page-about .page-about-philosophy-item h3{
  font-family:var(--jb-font-display);
  font-size:20px;
  font-weight:800;
  color:#f8f9fa;
  margin:0 0 10px;
}
.page-about .page-about-philosophy-item p{
  font-family:var(--jb-font-body);
  font-size:15px;
  line-height:1.75;
  color:rgba(248,249,250,.78);
  margin:0;
}

/* ===== 未来展望 ===== */
.page-about .page-about-future{
  background:var(--jb-pearl);
  padding:72px 0 88px;
}
.page-about .page-about-future .page-about-section-head{
  margin-bottom:44px;
}
.page-about .page-about-future .page-about-section-desc{
  color:var(--jb-sub);
}
.page-about .page-about-future-points{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.page-about .page-about-future-point{
  background:#ffffff;
  border:1px solid var(--jb-mist);
  border-radius:16px;
  padding:26px 24px;
  position:relative;
  overflow:hidden;
  transition:border-color .35s,box-shadow .35s;
}
.page-about .page-about-future-point::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg,#f5b642,#ff4d6d);
  opacity:.75;
}
.page-about .page-about-future-point:hover{
  border-color:rgba(245,182,66,.55);
  box-shadow:0 10px 30px rgba(10,16,53,.08);
}
.page-about .page-about-future-point h3{
  font-family:var(--jb-font-display);
  font-size:18px;
  font-weight:800;
  color:var(--jb-ink);
  margin:0 0 8px;
}
.page-about .page-about-future-point p{
  font-family:var(--jb-font-body);
  font-size:15px;
  line-height:1.75;
  color:var(--jb-sub);
  margin:0;
}
.page-about .page-about-future-cta{
  margin-top:56px;
  text-align:center;
  background:var(--about-grad-panel);
  border:1px solid rgba(123,44,191,.18);
  border-radius:24px;
  padding:38px 24px 34px;
}
.page-about .page-about-future-cta-lead{
  font-family:var(--jb-font-display);
  font-size:20px;
  font-weight:700;
  color:var(--jb-ink);
  margin:0 0 18px;
}
.page-about .page-about-future-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.page-about .page-about-future-actions .btn-ghost{
  border-color:rgba(123,44,191,.35);
  color:var(--jb-deep);
}

/* ===== 桌面端增强 ===== */
@media (min-width:768px){
  .page-about .page-about-hero{
    padding:64px 0 110px;
  }
  .page-about .page-about-hero-grid{
    grid-template-columns:1.08fr .92fr;
    gap:52px;
  }
  .page-about .page-about-hero-year{
    align-items:center;
    padding-left:0;
  }
  .page-about .page-about-hero-wave{
    height:130px;
  }

  .page-about .page-about-origin{
    padding:96px 0 112px;
  }
  .page-about .page-about-origin-grid{
    grid-template-columns:1fr .95fr;
    gap:70px;
  }
  .page-about .page-about-origin-figure-frame{
    transform:rotate(1.2deg) translateY(8px);
  }

  .page-about .page-about-milestones{
    padding:96px 0 104px;
  }
  .page-about .page-about-timeline{
    padding-left:0;
  }
  .page-about .page-about-timeline-line{
    left:50%;
    transform:translateX(-50%);
  }
  .page-about .page-about-timeline-item{
    width:50%;
    margin-bottom:48px;
  }
  .page-about .page-about-timeline-item--left{
    margin-right:auto;
    padding-right:64px;
  }
  .page-about .page-about-timeline-item--left .page-about-timeline-dot{
    left:auto;
    right:-16px;
  }
  .page-about .page-about-timeline-item--right{
    margin-left:50%;
    padding-left:64px;
  }
  .page-about .page-about-timeline-item--right .page-about-timeline-dot{
    left:-16px;
    right:auto;
  }
  .page-about .page-about-timeline-dot--has-img{
    width:60px;
    height:60px;
  }

  .page-about .page-about-philosophy{
    padding:112px 0 120px;
  }
  .page-about .page-about-philosophy-grid{
    grid-template-columns:repeat(3,1fr);
    gap:26px;
  }
  .page-about .page-about-philosophy-item{
    padding:36px 30px;
  }

  .page-about .page-about-future{
    padding:96px 0 108px;
  }
  .page-about .page-about-future-points{
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .page-about .page-about-future-cta{
    padding:48px 40px 44px;
  }
}

@media (min-width:1200px){
  .page-about .page-about-hero-year-number{
    font-size:220px;
  }
  .page-about .page-about-hero-copy h1{
    font-size:56px;
  }
  .page-about .page-about-timeline-card h3{
    font-size:22px;
  }
  .page-about .page-about-timeline-card .prose{
    font-size:16px;
  }
  .page-about .page-about-philosophy-item h3{
    font-size:22px;
  }
  .page-about .page-about-philosophy-item p{
    font-size:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .page-about-hero-year,
  .page-about .page-about-origin-copy,
  .page-about .page-about-origin-figure,
  .page-about .page-about-timeline-item,
  .page-about .page-about-timeline-footer,
  .page-about .page-about-philosophy-head,
  .page-about .page-about-philosophy-item,
  .page-about .page-about-future .page-about-section-head,
  .page-about .page-about-future-point,
  .page-about .page-about-future-cta{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}