.page-about{
  --about-swatch-blue: #4C8DFF;
  --about-swatch-lavender: #A78BFA;
  background: var(--bg-deep);
  color: var(--text-main);
}

.page-about .container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.page-about h1,
.page-about h2,
.page-about h3,
.page-about h4{
  margin-top: 0;
}

.page-about p{
  margin-top: 0;
}

.page-about .breadcrumb{
  padding: 18px 0 0;
}

.page-about .breadcrumb-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-sub);
}

.page-about .breadcrumb-list li + li::before{
  content: "→";
  margin-right: 8px;
  color: var(--purple);
}

.page-about .breadcrumb-list a{
  color: var(--text-sub);
  text-decoration: none;
  transition: color .2s ease;
}

.page-about .breadcrumb-list a:hover{
  color: var(--orange);
}

.page-about .breadcrumb-list [aria-current="page"]{
  color: var(--text-main);
}

.page-about .section-head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}

.page-about .section-head .section-index{
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .08em;
}

.page-about .section-head .section-title{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -.02em;
  margin: 0;
}

.page-about .section-head .section-note{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--text-sub);
}

.page-about .about-hero{
  position: relative;
  overflow: hidden;
  padding: 44px 0 72px;
  background:
    radial-gradient(circle at 84% 12%, rgba(123,45,223,.34) 0%, transparent 52%),
    radial-gradient(circle at 8% 88%, rgba(30,58,138,.42) 0%, transparent 48%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-hero-inner{
  display: grid;
  gap: 40px;
  align-items: center;
}

.page-about .about-hero-kicker{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.page-about .about-hero-kicker .section-index{
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .08em;
}

.page-about .hero-cert-meta{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-sub);
}

.page-about .about-hero h1{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(2.125rem, 5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 24px;
}

.page-about .about-hero-lead{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-sub);
  max-width: 58ch;
}

.page-about .about-hero-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.page-about .hero-stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.page-about .hero-stat-num{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--text-main);
}

.page-about .hero-stat-label{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-sub);
}

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

.page-about .about-hero-figure{
  margin: 0;
}

.page-about .about-hero-figure img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
}

.page-about .about-hero-figure figcaption,
.page-about .about-timeline-figure figcaption,
.page-about .about-team-figure figcaption{
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-sub);
}

.page-about .about-origin{
  padding: 80px 0;
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-origin-grid{
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.page-about .about-origin-copy > p{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 2;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.page-about .about-origin-list{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .about-origin-list li{
  padding: 18px 20px 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--purple);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--text-sub);
}

.page-about .about-origin-list strong{
  margin-right: 6px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1rem;
  color: var(--orange);
}

.page-about .about-origin-aside{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.page-about .origin-symbols{
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
}

.page-about .origin-ring--outer{
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(123,45,223,.55);
  border-radius: 50%;
}

.page-about .origin-ring--inner{
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
}

.page-about .origin-core{
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--gradient-main);
  border-radius: 50%;
  box-shadow: var(--shadow-glow);
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--text-main);
}

.page-about .origin-quote{
  margin: 0;
  padding: 22px 24px;
  background: rgba(17,26,58,.6);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 420px;
}

.page-about .origin-quote p{
  margin: 0 0 8px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-main);
}

.page-about .origin-quote cite{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .78rem;
  color: var(--orange);
}

.page-about .about-milestone{
  position: relative;
  padding: 84px 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(123,45,223,.3) 0%, transparent 52%),
    linear-gradient(135deg, rgba(30,58,138,.82) 0%, rgba(123,45,223,.72) 100%);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-milestone .section-note,
.page-about .about-milestone .section-title,
.page-about .about-milestone .section-index{
  color: var(--text-main);
}

.page-about .about-milestone-grid{
  display: grid;
  gap: 44px;
  margin-top: 48px;
}

.page-about .about-timeline{
  position: relative;
  display: grid;
  gap: 22px;
  padding-left: 34px;
}

.page-about .about-timeline::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,107,53,.9) 0%, rgba(248,250,252,.5) 50%, rgba(123,45,223,.9) 100%);
}

.page-about .timeline-item{
  position: relative;
}

.page-about .timeline-node{
  position: absolute;
  left: -29px;
  top: 24px;
  width: 12px;
  height: 12px;
  background: var(--orange);
  border: 3px solid var(--bg-deep);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--orange);
  transition: box-shadow .2s ease, transform .2s ease;
}

.page-about .timeline-item:hover .timeline-node{
  box-shadow: 0 0 0 6px rgba(255,107,53,.35), 0 0 22px rgba(255,107,53,.3);
  transform: scale(1.12);
}

.page-about .timeline-card{
  padding: 18px 22px;
  background: rgba(8,11,26,.55);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.page-about .timeline-item:hover .timeline-card{
  border-color: var(--purple);
  box-shadow: var(--shadow-glow);
}

.page-about .timeline-year{
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  background: var(--purple);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--text-main);
}

.page-about .timeline-card h3{
  margin-bottom: 8px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--text-main);
}

.page-about .timeline-card p{
  margin-bottom: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.85;
  color: rgba(248,250,252,.78);
}

.page-about .about-timeline-figure{
  margin: 0;
}

.page-about .about-timeline-figure img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
}

.page-about .about-honor{
  padding: 80px 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,107,53,.12) 0%, transparent 44%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-honor-lead{
  max-width: 62ch;
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-sub);
}

.page-about .about-cert-grid{
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.page-about .cert-card{
  position: relative;
  min-height: 320px;
  perspective: 1200px;
  outline: none;
}

.page-about .cert-inner{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.page-about .cert-card:hover .cert-inner,
.page-about .cert-card:focus-visible .cert-inner{
  transform: rotateY(180deg);
}

.page-about .cert-face{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 24px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
}

.page-about .cert-front h3{
  margin: 8px 0 0;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--text-main);
}

.page-about .cert-front p{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-sub);
}

.page-about .cert-back{
  transform: rotateY(180deg);
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(30,58,138,.4), rgba(123,45,223,.24)),
    var(--bg-card);
}

.page-about .cert-back h4{
  margin-bottom: 8px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-main);
}

.page-about .cert-back p{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--text-sub);
}

.page-about .cert-icon{
  width: 64px;
  height: 64px;
}

.page-about .about-honor-footnote{
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: .77rem;
  line-height: 1.7;
  color: var(--text-sub);
}

.page-about .about-ecosystem{
  padding: 80px 0;
  background: rgba(17,26,58,.42);
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-eco-grid{
  display: grid;
  gap: 44px;
  margin-top: 44px;
}

.page-about .about-eco-ring{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

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

.page-about .ring-text-main{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: 42px;
  fill: var(--text-main);
}

.page-about .ring-text-sub{
  font-family: var(--font-mono);
  font-size: 15px;
  fill: var(--text-sub);
  letter-spacing: .08em;
}

.page-about .about-ring-legend{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-sub);
}

.page-about .legend-swatch{
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 2px;
}

.page-about .legend-swatch--manufacturing{ background: var(--purple); }
.page-about .legend-swatch--technology{ background: var(--orange); }
.page-about .legend-swatch--finance{ background: var(--about-swatch-blue); }
.page-about .legend-swatch--retail{ background: var(--about-swatch-lavender); }
.page-about .legend-swatch--others{ background: var(--border-color); }

.page-about .about-ring-caption{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-sub);
  line-height: 1.7;
  text-align: center;
}

.page-about .about-eco-list > p{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 2;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.page-about .about-eco-industries{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-about .about-eco-industries li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(17,26,58,.5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--text-main);
}

.page-about .about-eco-industries b{
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--orange);
}

.page-about .about-eco-note{
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(17,26,58,.4);
  border-left: 4px solid var(--purple);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--text-sub);
}

.page-about .about-team{
  padding: 80px 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(123,45,223,.24) 0%, transparent 56%),
    var(--bg-black);
  border-bottom: 1px solid var(--border-color);
}

.page-about .about-team-grid{
  display: grid;
  gap: 40px;
  margin-top: 44px;
}

.page-about .about-team-copy > p{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 2;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.page-about .about-values{
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .about-values li{
  padding: 12px 16px 12px 20px;
  background: rgba(17,26,58,.35);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.8;
  color: var(--text-sub);
}

.page-about .about-values strong{
  margin-right: 8px;
  font-family: var(--font-headline);
  font-weight: 800;
  color: var(--orange);
}

.page-about .about-team-figure{
  margin: 0;
}

.page-about .about-team-figure img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
}

.page-about .about-cta{
  padding: 72px 0;
  text-align: center;
  background: var(--gradient-main);
}

.page-about .about-cta h2{
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 12px;
  color: var(--text-main);
}

.page-about .about-cta p{
  margin-bottom: 28px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: rgba(248,250,252,.85);
}

.page-about .about-cta-links{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (min-width: 768px){
  .page-about .section-head .section-note{
    margin-left: 8px;
    writing-mode: vertical-rl;
    letter-spacing: .18em;
  }

  .page-about .about-hero-inner{
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
  }

  .page-about .about-origin-grid{
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 48px;
  }

  .page-about .about-cert-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .page-about .about-eco-grid{
    grid-template-columns: .95fr 1.05fr;
    gap: 48px;
    align-items: center;
  }
}

@media (min-width: 992px){
  .page-about .about-milestone-grid{
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
  }

  .page-about .about-cert-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  .page-about .about-team-grid{
    grid-template-columns: 1fr .9fr;
    gap: 52px;
    align-items: center;
  }
}