.page-about{
  --about-gold-border:rgba(212,175,55,.28);
  --about-kpi-bg:rgba(255,255,255,.03);
  --about-tech-line:rgba(212,175,55,.4);
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--text);
  background:var(--bg)
}
.page-about img{
  max-width:100%;
  height:auto
}
.page-about .container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:20px
}
.page-about .section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px
}
.page-about .about-breadcrumb{
  padding:20px 0 0
}
.page-about .about-breadcrumb .breadcrumb{
  margin:0
}
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  padding:44px 0 72px;
  background:radial-gradient(ellipse at 85% 15%,rgba(230,57,70,.16),transparent 52%),linear-gradient(135deg,var(--bg) 0%,var(--bg-2) 58%)
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  right:-12%;
  top:0;
  bottom:0;
  width:58%;
  background:var(--red);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  opacity:.07;
  pointer-events:none
}
.page-about .about-hero-copy,
.page-about .about-hero-media{
  position:relative;
  z-index:1
}
.page-about .about-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center
}
.page-about .about-hero h1{
  font-family:var(--font-head);
  font-size:clamp(2rem,5.8vw,3.4rem);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.02em;
  margin:14px 0 18px
}
.page-about .about-hero-lead{
  color:var(--text-2);
  font-size:1.0625rem;
  max-width:560px;
  margin-bottom:26px
}
.page-about .about-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.page-about .about-hero-media img{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  object-fit:cover;
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px var(--about-gold-border)
}
.page-about .about-story{
  padding:64px 0 72px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)
}
.page-about .about-story-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px
}
.page-about .about-story h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  line-height:1.2;
  margin:0 0 16px
}
.page-about .about-story-desc{
  font-size:1.0625rem;
  color:var(--text-2)
}
.page-about .about-story p{
  margin:0 0 16px
}
.page-about .about-story-note{
  margin-top:20px
}
.page-about .about-story-panel{
  padding:24px
}
.page-about .about-story-panel h3{
  font-family:var(--font-head);
  font-size:1.0625rem;
  margin:0 0 12px
}
.page-about .about-story-panel .data-stat{
  padding:14px 0;
  border-bottom:1px solid var(--glass-border)
}
.page-about .about-story-panel .data-stat:last-child{
  border-bottom:0
}
.page-about .about-story-footnote{
  margin-top:12px;
  font-size:.8125rem;
  color:var(--text-2);
  line-height:1.5
}
.page-about .about-tech{
  padding:72px 0;
  background:radial-gradient(ellipse at 10% 40%,rgba(230,57,70,.08),transparent 50%),var(--bg)
}
.page-about .about-tech-head{
  margin-bottom:36px;
  max-width:760px
}
.page-about .about-tech-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  margin:0 0 12px
}
.page-about .about-tech-head p:last-child{
  color:var(--text-2);
  margin:0
}
.page-about .about-tech-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px
}
.page-about .about-tech-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  object-fit:cover;
  box-shadow:0 18px 50px rgba(0,0,0,.4)
}
.page-about .about-tech-board,
.page-about .about-tech-card{
  padding:22px 24px;
  height:100%
}
.page-about .about-tech-board .board-summary{
  font-size:.9375rem;
  margin-bottom:12px
}
.page-about .about-kpi-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px
}
.page-about .about-kpi-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:var(--about-kpi-bg);
  border-left:3px solid var(--red);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0
}
.page-about .about-kpi-num{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.01em;
  color:var(--text)
}
.page-about .about-kpi-label{
  font-size:.875rem;
  color:var(--text-2);
  text-align:right
}
.page-about .about-tech-card h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  margin:0 0 8px
}
.page-about .about-tech-card p{
  color:var(--text-2);
  font-size:.9375rem;
  margin:0 0 12px
}
.page-about .about-tech-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px
}
.page-about .about-tech-list li{
  position:relative;
  padding-left:20px;
  font-size:.90625rem;
  color:var(--text-2)
}
.page-about .about-tech-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold)
}
.page-about .about-milestones{
  padding:72px 0
}
.page-about .about-milestones-head{
  max-width:760px
}
.page-about .about-milestones-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  margin:0 0 12px
}
.page-about .about-milestones-head p:last-child{
  color:var(--text-2);
  margin:0
}
.page-about .about-timeline-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-top:40px
}
.page-about .about-timeline{
  list-style:none;
  margin:0;
  padding:0
}
.page-about .about-timeline-item{
  position:relative;
  padding-left:32px;
  margin-bottom:20px
}
.page-about .about-timeline-item::before{
  content:"";
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:2px;
  background:repeating-linear-gradient(to bottom,var(--about-tech-line) 0 4px,transparent 4px 10px)
}
.page-about .about-timeline-item:last-child::before{
  bottom:auto;
  height:16px
}
.page-about .about-timeline-dot{
  position:absolute;
  left:5px;
  top:14px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(230,57,70,.18),0 0 10px rgba(230,57,70,.45)
}
.page-about .about-timeline-card{
  padding:18px 20px
}
.page-about .about-timeline-year{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:.8125rem;
  color:var(--gold);
  letter-spacing:.06em;
  padding:2px 12px;
  border-radius:999px;
  background:rgba(212,175,55,.12);
  border:1px solid var(--about-gold-border);
  margin-bottom:8px
}
.page-about .about-timeline-card h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  margin:0 0 6px
}
.page-about .about-timeline-card p{
  font-size:.9375rem;
  color:var(--text-2);
  margin:0
}
.page-about .about-tl-more{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--glass-border)
}
.page-about .about-tl-more summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gold-light);
  font-weight:600;
  font-size:.875rem;
  transition:color .2s var(--ease)
}
.page-about .about-tl-more summary::-webkit-details-marker{
  display:none
}
.page-about .about-tl-more summary::before{
  content:"+";
  display:inline-block;
  font-weight:700;
  color:var(--red);
  margin-right:4px;
  transition:transform .2s var(--ease)
}
.page-about .about-tl-more[open] summary::before{
  transform:rotate(45deg)
}
.page-about .about-tl-more p{
  margin:10px 0 0;
  font-size:.875rem
}
.page-about .about-milestone-media img{
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  object-fit:cover
}
.page-about .about-services{
  padding:72px 0;
  background:var(--bg-2)
}
.page-about .about-services-head{
  margin-bottom:32px
}
.page-about .about-services-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  margin:0
}
.page-about .about-services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px
}
.page-about .about-services-grid .board-card{
  padding:22px 24px;
  height:100%
}
.page-about .about-services-grid h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  margin:0 0 10px
}
.page-about .about-services-grid p{
  color:var(--text-2);
  font-size:.9375rem;
  margin:0 0 14px
}
.page-about .about-ecosystem{
  padding:72px 0
}
.page-about .about-ecosystem-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px
}
.page-about .about-ecosystem h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  margin:0 0 14px
}
.page-about .about-ecosystem p{
  color:var(--text-2)
}
.page-about .about-honor-card,
.page-about .about-partner-panel{
  margin-top:24px;
  padding:22px 24px
}
.page-about .about-honor-card h3,
.page-about .about-partner-panel h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  margin:0 0 10px
}
.page-about .about-honor-list,
.page-about .about-partner-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px
}
.page-about .about-honor-list li,
.page-about .about-partner-list li{
  position:relative;
  padding-left:20px;
  font-size:.90625rem;
  color:var(--text-2)
}
.page-about .about-honor-list li::before,
.page-about .about-partner-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red)
}
.page-about .about-partner-panel .board-summary{
  margin-top:16px
}
.page-about .about-cta{
  margin-top:80px;
  padding:72px 0;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 70% 40%,rgba(230,57,70,.22),transparent 60%),var(--bg-2)
}
.page-about .about-cta::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:140px;
  background:var(--red);
  clip-path:polygon(0 0,100% 0,0 100%);
  opacity:.7
}
.page-about .about-cta-inner{
  position:relative;
  z-index:1;
  padding-left:52px
}
.page-about .about-cta-inner h2{
  font-family:var(--font-head);
  font-size:clamp(1.5rem,2.6vw,2.125rem);
  font-weight:800;
  margin:0 0 10px
}
.page-about .about-cta-inner p{
  color:var(--text-2);
  margin:0 0 20px;
  max-width:600px
}
.page-about .about-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
@media (min-width:820px){
  .page-about .about-hero-grid{
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    min-height:480px
  }
  .page-about .about-story-grid{
    grid-template-columns:1.4fr .6fr;
    gap:40px
  }
  .page-about .about-tech-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px
  }
  .page-about .about-services-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px
  }
  .page-about .about-timeline-layout{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:40px
  }
  .page-about .about-ecosystem-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start
  }
}