/* ==========================================================================
   ABOUT US PAGE — mandiri (about-*)
   ========================================================================== */

/* ---------- Hero ---------- */
.about-hero-title{ font-size:var(--fs-h2); margin:0 0 1.1rem; }
.about-hero-desc{ margin-bottom:1.8rem; max-width:46ch; font-size:clamp(.95rem, .4vw + .85rem, 1.05rem); }

.about-hero-media{ position:relative; }
.about-hero-badge{
  position:absolute;
  bottom:-20px; left:-20px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:1rem 1.3rem;
  box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:.8rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.about-hero-badge:hover{ transform:translateY(-3px); box-shadow:var(--sh-md), 0 0 0 1px var(--c-primary-light); }
.about-hero-badge-icon{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:var(--r-sm);
  background:var(--c-primary-light);
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
}
.about-hero-badge-icon svg{ width:20px; height:20px; }
.about-hero-badge-text{ line-height:1.3; }
.about-hero-badge-text b{ display:block; font-family:'Manrope',sans-serif; font-size:1.3rem; color:var(--c-ink); }
.about-hero-badge-text span{ font-size:var(--fs-small); color:var(--c-muted); }

@media (max-width:575.98px){
  .about-hero-badge{ left:12px; bottom:-16px; padding:.8rem 1rem; }
  .about-hero-badge-text b{ font-size:1.1rem; }
}

/* ---------- Quick stats ---------- */
.about-stats{
  padding:clamp(24px, 4vw, 32px) 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.about-stat-item{ text-align:center; transition:transform .3s ease; }
.about-stat-item:hover{ transform:translateY(-3px); }
.about-stat-number{
  display:block;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(1.3rem, 1rem + 1vw, 1.7rem);
  color:var(--c-ink);
}
.about-stat-number .n-accent{ color:var(--c-primary); }
.about-stat-label{ font-size:var(--fs-small); color:var(--c-muted); }

/* ---------- Story / horizontal timeline ---------- */
.about-story{ background:var(--c-surface); padding:clamp(56px, 8vw, 88px) 0; }
.about-story .sect-head{ margin-bottom:clamp(40px, 6vw, 64px); }

.about-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-bottom:3.5rem;
}
.about-timeline::before{
  content:"";
  position:absolute;
  top:23px; left:calc(12.5% - 1px); right:calc(12.5% - 1px);
  height:2px;
  background:var(--c-border);
  z-index:0;
}
.about-timeline-progress{
  position:absolute;
  top:23px; left:calc(12.5% - 1px);
  height:2px;
  background:var(--c-primary);
  width:0;
  z-index:1;
  transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.about-timeline-progress.is-active{ width:calc(75% + 2px); }

.about-timeline-item{
  position:relative;
  z-index:2;
  padding:0 1.1rem;
  text-align:center;
}
.about-timeline-num{
  width:46px; height:46px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  background:var(--c-surface);
  border:2px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:.9rem;
  color:var(--c-muted);
  transition:background-color .4s ease, border-color .4s ease, color .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.about-timeline-item.is-active .about-timeline-num{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
  transform:scale(1.1);
}
.about-timeline-body h3{ font-size:1rem; font-weight:800; color:var(--c-ink); margin-bottom:.5rem; }
.about-timeline-body p{ font-size:.88rem; color:var(--c-body); line-height:1.6; }

@media (max-width:991.98px){
  .about-timeline{ grid-template-columns:repeat(2, 1fr); row-gap:2.5rem; }
  .about-timeline::before, .about-timeline-progress{ display:none; }
}
@media (max-width:575.98px){
  .about-timeline{ grid-template-columns:1fr; }
}

/* ---------- Cert card (dipakai di akhir story) ---------- */
.about-cert-card{
  background:var(--stage-bezel);
  border-radius:var(--r-lg);
  padding:2rem 2.25rem;
}
.about-cert-card h3{ color:#fff; font-size:1.05rem; font-weight:800; margin-bottom:1.2rem; text-align:center; }
.about-cert-badges{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.7rem;
}
.about-cert-badge{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.8rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);
  padding:.75rem .5rem;
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.about-cert-badge:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-2px);
}
@media (max-width:575.98px){
  .about-cert-badges{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Culture / office ---------- */
.about-culture{ background:var(--c-surface-alt); }
.about-culture h2{ font-size:var(--fs-h2); margin:.9rem 0 1rem; }
.about-culture p{ max-width:48ch; }

/* ---------- Vision & mission ---------- */
.about-vision{ background:var(--c-surface); }
.about-vision-card{
  position:relative;
  height:100%;
  padding:clamp(1.6rem, 3vw, 2.2rem);
  border-radius:var(--r-lg);
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.about-vision-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--c-primary), var(--stage-accent-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.about-vision-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
  border-color:transparent;
}
.about-vision-card:hover::before{ transform:scaleX(1); }

.about-vision-icon{
  width:52px; height:52px;
  border-radius:var(--r-sm);
  background:var(--c-primary-light);
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
  transition:background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.about-vision-icon svg{ width:26px; height:26px; }
.about-vision-card:hover .about-vision-icon{
  background:var(--c-primary); color:#fff; transform:scale(1.08) rotate(-4deg);
}

.about-vision-card h3{ font-size:var(--fs-h3); margin-bottom:.9rem; }

.about-mission-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.9rem;
}
.about-mission-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:var(--fs-small);
  opacity:0; transform:translateX(-8px);
  transition:opacity .45s ease, transform .45s ease;
}
.about-mission-list li.is-visible{ opacity:1; transform:translateX(0); }
.about-mission-list li i{ color:var(--c-primary); margin-top:.2rem; flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  .about-timeline-progress, .about-timeline-num, .about-hero-badge,
  .about-vision-card, .about-vision-icon, .about-mission-list li{ transition:none; }
  .about-mission-list li{ opacity:1; transform:none; }
}