/* About page — extends base theme */

/* HERO */
.about-hero{
  position:relative; overflow:hidden;
  padding:64px 0 28px;
  border-bottom:1px solid var(--outline);
}
.about-hero .hero-inner{ position:relative; z-index:1 }
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.orb{ position:absolute; width:380px; height:380px; border-radius:999px; filter:blur(32px); opacity:.55;
      background: radial-gradient(closest-side, var(--brand), transparent 70%) }
.orb.o1{ left:-100px; top:-60px; animation:float 12s ease-in-out infinite }
.orb.o2{ right:-120px; top:20%; animation:float 14s ease-in-out infinite reverse }
.orb.o3{ left:40%; bottom:-120px; animation:float 18s ease-in-out infinite }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.about-intro{
  margin-top:10px;
  border:1px solid var(--outline);
  background:var(--card-gradient);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--surface-elev);
}
.about-intro p{ margin:.2em 0 }

/* COUNTERS */
.about-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:14px;
}
@media (max-width: 800px){ .about-stats{ grid-template-columns:1fr } }
.stat{
  border:1px solid var(--outline); border-radius:16px;
  background:var(--card-gradient);
  padding:16px; text-align:center; box-shadow:var(--surface-elev);
  transform:translateY(10px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease), border-color .35s var(--ease)
}
.stat.revealed{ transform:none; opacity:1 }
.num{
  font-size:clamp(28px,6vw,48px); font-weight:800; line-height:1;
  filter:drop-shadow(0 10px 30px var(--brand-glow));
}
.label{ opacity:.85; margin-top:6px }

/* FRANCHISES (titles only) */
.franchises{ margin:28px auto 10px }

.franchise-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width: 1000px){ .franchise-list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 680px){ .franchise-list{ grid-template-columns:1fr } }

.fr-item{
  border:1px solid var(--outline); border-radius:16px;
  background:var(--card-gradient);
  box-shadow:var(--surface-elev);
  min-height:120px; padding:24px;
  display:grid; place-items:center;
  transform-origin:50% 80%;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.fr-item:hover{
  transform:translateY(-4px) rotateX(2deg) scale(1.01);
  border-color:var(--brand-soft-x);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.fr-item h3{ margin:0; text-align:center }

/* FOUNDERS */
.founders{ margin:28px auto 10px }
.founder-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width: 900px){ .founder-grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 600px){ .founder-grid{ grid-template-columns:1fr } }

.person-card{
  display:flex; gap:12px; align-items:center;
  border:1px solid var(--outline); border-radius:16px; background:var(--card-gradient);
  padding:12px; box-shadow:var(--surface-elev);
  transform:translateY(10px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease), border-color .35s var(--ease)
}
.person-card.revealed{ transform:none; opacity:1 }
.avatar{
  width:46px; height:46px; border-radius:999px; display:grid; place-items:center; font-weight:900;
  background:linear-gradient(180deg,var(--brand),var(--accent)); color:#111; border:1px solid transparent;
  filter:drop-shadow(0 10px 30px var(--brand-glow));
}

/* VALUES */
.values{ margin:28px auto 10px }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width: 1000px){ .values-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 600px){ .values-grid{ grid-template-columns:1fr } }

.val-card{
  border:1px solid var(--outline); border-radius:16px; background:var(--card-gradient);
  padding:16px; box-shadow:var(--surface-elev);
  transform:translateY(10px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease), border-color .35s var(--ease)
}
.val-card.revealed{ transform:none; opacity:1 }
.val-card:hover{ border-color:var(--brand-soft-x) }

/* RIBBON */
.ribbon{ margin:36px 0; border-block:1px solid var(--outline);
  background:linear-gradient(90deg, rgba(255,255,255,.04) 0, transparent 35%, transparent 65%, rgba(255,255,255,.04) 100%) }
.strip-wrap{ overflow:hidden; padding-block:10px }
.marquee{ display:flex; gap:40px; white-space:nowrap; animation:marquee 24s linear infinite }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee span{ opacity:.7; font-weight:800; letter-spacing:.2em }

/* LINKS */
.about-links{ margin:10px auto 70px }
.links-grid{ display:flex; gap:12px; flex-wrap:wrap }

/* Reveal helpers */
.reveal{ transform:translateY(12px); opacity:0; transition:transform .8s var(--ease), opacity .8s var(--ease) }
.revealed{ transform:none !important; opacity:1 !important }

@media (max-width: 600px){
  .about-hero{padding:48px 0 22px;}
  .about-intro{padding:14px;}
  .about-stats{gap:12px;}
  .franchise-list{gap:14px;}
  .values-grid{gap:14px;}
  .links-grid{gap:10px;}
}

@media (max-width: 480px){
  .franchise-list{grid-template-columns:1fr;}
  .fr-item{padding:20px;}
  .links-grid{flex-direction:column;}
  .links-grid .btn{width:100%;justify-content:center;}
}