/* ============================================
   ABOUT INTRO (STORY)
============================================ */
.about-intro{background:var(--cream);overflow:hidden;position:relative}
.about-intro::before{
  content:'';position:absolute;
  top:-200px;left:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(16,185,129,0.06),transparent 70%);
  border-radius:50%;
}
.ai-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;position:relative;z-index:1;
}
.ai-visual{position:relative;aspect-ratio:1/1.05}
.ai-frame{
  position:absolute;inset:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--grad-dark);
  box-shadow:var(--shadow-hard);
}
.ai-pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(163,230,53,0.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(163,230,53,0.15) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.5;
}
.ai-sun{
  position:absolute;top:20%;left:50%;
  transform:translateX(-50%);
  width:140px;height:140px;border-radius:50%;
  background:var(--grad-sun);
  box-shadow:0 0 100px var(--amber),0 0 150px rgba(251,191,36,0.6);
  animation:pulseSun 4s ease-in-out infinite;
}
.ai-rays{
  position:absolute;top:20%;left:50%;
  transform:translate(-50%, 70px);
  width:280px;height:280px;
  animation:spin 25s linear infinite;
}
.ai-rays span{
  position:absolute;top:50%;left:50%;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,0.5),transparent);
  transform-origin:left center;
}
.ai-panels{
  position:absolute;bottom:0;left:10%;right:10%;height:45%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  transform:perspective(600px) rotateX(45deg);
  transform-origin:bottom;
}
.ai-panels span{
  background:linear-gradient(180deg,rgba(16,185,129,0.4),rgba(4,120,87,0.6));
  border:1px solid rgba(163,230,53,0.3);
  border-radius:6px;
  animation:panelPulse 3s ease-in-out infinite;
}
.ai-panels span:nth-child(2){animation-delay:.3s}
.ai-panels span:nth-child(3){animation-delay:.6s}
.ai-panels span:nth-child(4){animation-delay:.9s}
.ai-panels span:nth-child(5){animation-delay:1.2s}
.ai-panels span:nth-child(6){animation-delay:1.5s}

.ai-badge{
  position:absolute;top:24px;left:24px;
  padding:14px 20px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-radius:16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.3);
  z-index:5;
}
.ai-badge i{
  width:42px;height:42px;border-radius:12px;
  background:var(--grad-sun);
  color:var(--green-900);
  display:grid;place-items:center;
  font-size:1.1rem;
}
.ai-badge strong{
  display:block;
  font-family:'Space Grotesk';
  font-size:.95rem;font-weight:700;
  color:var(--ink);
}
.ai-badge span{
  font-size:.75rem;color:var(--slate);
}

.float-stat{
  position:absolute;
  background:var(--white);
  border-radius:16px;
  padding:14px 20px;
  box-shadow:0 20px 50px -10px rgba(6,78,59,0.25);
  display:flex;align-items:center;gap:12px;
  z-index:10;
  animation:chipFloat 5s ease-in-out infinite;
}
.float-stat.fs-1{bottom:20%;right:-30px;animation-delay:0s}
.float-stat.fs-2{top:15%;left:-30px;animation-delay:2.5s}
.float-stat .fs-ico{
  width:42px;height:42px;border-radius:12px;
  background:var(--grad-primary);color:var(--white);
  display:grid;place-items:center;font-size:1rem;
}
.float-stat .fs-ico.amber{
  background:var(--grad-sun);color:var(--green-900);
}
.float-stat strong{
  display:block;
  font-family:'Space Grotesk';
  font-size:1.05rem;font-weight:700;
  color:var(--ink);line-height:1;
}
.float-stat span{
  font-size:.72rem;color:var(--slate);
  display:block;margin-top:4px;
}

.ai-content h2{
  font-family:'Space Grotesk';
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:700;line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:22px;
}
.ai-content h2 .grad{
  background:var(--grad-primary);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ai-lead{
  font-size:1.08rem;
  color:var(--ink-2);
  font-weight:500;
  line-height:1.75;
  margin-bottom:16px;
}
.ai-content p{
  color:var(--slate);
  line-height:1.85;font-size:1rem;
  margin-bottom:16px;
}
.ai-highlights{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin-top:32px;
}
.ah-item{
  display:flex;gap:14px;align-items:center;
  padding:16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
  transition:all .4s var(--ease);
}
.ah-item:hover{
  transform:translateY(-4px);
  border-color:var(--green-400);
  box-shadow:var(--shadow-soft);
}
.ah-ico{
  width:38px;height:38px;border-radius:10px;
  background:rgba(16,185,129,0.1);
  color:var(--green-700);
  display:grid;place-items:center;
  font-size:.9rem;flex-shrink:0;
}
.ah-item strong{
  display:block;
  font-size:.9rem;font-weight:700;
  color:var(--ink);
}
.ah-item span{
  font-size:.78rem;color:var(--slate);
}

/* ============================================
   MVV (Mission Vision Values)
============================================ */
.mvv{background:var(--white)}
.mvv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.mvv-card{
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:40px 28px;
  text-align:center;
  transition:all .6s var(--ease-smooth);
  border:1px solid transparent;
  position:relative;overflow:hidden;
}
.mvv-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--grad-primary);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.mvv-card:hover::before{transform:scaleX(1)}
.mvv-card:hover{
  background:var(--white);
  border-color:var(--border);
  transform:translateY(-10px);
  box-shadow:var(--shadow-soft);
}
.mvv-ico{
  width:80px;height:80px;border-radius:24px;
  background:var(--grad-primary);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.8rem;
  margin:0 auto 20px;
  transition:all .6s var(--ease);
  box-shadow:0 15px 30px -10px rgba(16,185,129,0.4);
}
.mvv-ico.amber{
  background:var(--grad-sun);
  color:var(--green-900);
  box-shadow:0 15px 30px -10px rgba(251,191,36,0.4);
}
.mvv-card:hover .mvv-ico{transform:rotate(-8deg) scale(1.1)}
.mvv-label{
  font-size:.72rem;
  color:var(--green-700);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.mvv-card h3{
  font-family:'Space Grotesk';
  font-size:1.2rem;font-weight:700;
  color:var(--ink);margin-bottom:12px;
}
.mvv-card p{
  font-size:.9rem;color:var(--slate);
  line-height:1.7;
}

/* ============================================
   STATS STRIP
============================================ */
.stats-strip{background:var(--cream)}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.stat-box{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:40px 28px;
  text-align:center;
  transition:all .6s var(--ease);
  border:1px solid var(--border);
}
.stat-box:hover{
  transform:translateY(-8px);
  border-color:var(--green-400);
  box-shadow:var(--shadow-soft);
}
.stat-ico{
  width:70px;height:70px;border-radius:20px;
  background:var(--grad-primary);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.5rem;
  margin:0 auto 20px;
  transition:all .6s var(--ease);
  box-shadow:0 15px 30px -10px rgba(16,185,129,0.4);
}
.stat-ico.amber{
  background:var(--grad-sun);
  color:var(--green-900);
  box-shadow:0 15px 30px -10px rgba(251,191,36,0.4);
}
.stat-box:hover .stat-ico{transform:rotate(-8deg) scale(1.1)}
.stat-box .num{
  font-family:'Space Grotesk';
  font-size:2.6rem;font-weight:700;
  color:var(--ink);line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.stat-box .num em{font-style:normal;font-size:1.2rem;color:var(--amber)}
.stat-box .lbl{
  font-size:.85rem;color:var(--slate);
  margin-top:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:1px;
}

/* ============================================
   TIMELINE / JOURNEY
============================================ */
.journey{background:var(--white);position:relative;overflow:hidden}
.timeline{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:20px 0;
}
.tl-line{
  position:absolute;left:50%;top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--green-400) 10%,var(--amber) 90%,transparent);
  transform:translateX(-50%);
}
.tl-item{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  margin-bottom:60px;
  position:relative;
}
.tl-item:last-child{margin-bottom:0}
.tl-dot{
  width:70px;height:70px;border-radius:50%;
  background:var(--white);
  border:3px solid var(--green-400);
  display:grid;place-items:center;
  color:var(--green-700);
  font-size:1.3rem;
  z-index:2;
  box-shadow:0 0 0 8px rgba(16,185,129,0.1),0 15px 30px -10px rgba(16,185,129,0.3);
  transition:all .5s var(--ease);
}
.tl-item:hover .tl-dot{
  background:var(--grad-sun);
  border-color:transparent;
  color:var(--green-900);
  transform:scale(1.1) rotate(-10deg);
  box-shadow:0 0 0 12px rgba(251,191,36,0.15),0 20px 40px -10px rgba(251,191,36,0.4);
}
.tl-card{
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:28px 32px;
  border:1px solid var(--border);
  transition:all .5s var(--ease);
  position:relative;
}
.tl-card:hover{
  background:var(--white);
  border-color:var(--green-400);
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
}
.tl-year{
  display:inline-block;
  padding:6px 14px;
  background:var(--grad-primary);
  color:var(--white);
  border-radius:50px;
  font-family:'Space Grotesk';
  font-size:.8rem;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:12px;
}
.tl-card h3{
  font-family:'Space Grotesk';
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
.tl-card p{
  color:var(--slate);
  font-size:.92rem;
  line-height:1.7;
}
.tl-item.tl-right .tl-card{grid-column:3;grid-row:1}
.tl-item.tl-right .tl-dot{grid-column:2;grid-row:1}

/* ============================================
   TEAM
============================================ */
.team{background:var(--cream)}
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.team-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:36px 28px;
  text-align:center;
  transition:all .6s var(--ease-smooth);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.team-card:hover{
  transform:translateY(-10px);
  border-color:var(--green-400);
  box-shadow:var(--shadow-soft);
}
.team-avatar{
  width:90px;height:90px;border-radius:50%;
  background:var(--grad-primary);
  color:var(--white);
  display:grid;place-items:center;
  font-family:'Space Grotesk';
  font-size:1.6rem;
  font-weight:700;
  margin:0 auto 20px;
  transition:all .6s var(--ease);
  box-shadow:0 15px 30px -10px rgba(16,185,129,0.4);
}
.team-avatar.amber{
  background:var(--grad-sun);
  color:var(--green-900);
  box-shadow:0 15px 30px -10px rgba(251,191,36,0.4);
}
.team-card:hover .team-avatar{
  transform:rotate(-10deg) scale(1.08);
}
.team-card h3{
  font-family:'Space Grotesk';
  font-size:1.15rem;font-weight:700;
  color:var(--ink);margin-bottom:10px;
}
.team-card p{
  font-size:.9rem;color:var(--slate);
  line-height:1.7;margin-bottom:16px;
}
.team-tag{
  display:inline-block;
  padding:6px 14px;
  background:rgba(16,185,129,0.1);
  color:var(--green-700);
  border-radius:50px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.5px;
}

/* ============================================
   CERTIFICATIONS
============================================ */
.certs{background:var(--white)}
.certs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.cert-card{
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:36px 24px;
  text-align:center;
  transition:all .6s var(--ease);
  border:2px dashed var(--border);
}
.cert-card:hover{
  background:var(--white);
  border-color:var(--green-400);
  border-style:solid;
  transform:translateY(-8px);
  box-shadow:var(--shadow-soft);
}
.cert-ico{
  width:70px;height:70px;border-radius:50%;
  background:var(--grad-primary);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.5rem;
  margin:0 auto 20px;
  transition:all .6s var(--ease);
}
.cert-ico.amber{
  background:var(--grad-sun);
  color:var(--green-900);
}
.cert-card:hover .cert-ico{
  transform:rotate(360deg);
}
.cert-card h3{
  font-family:'Space Grotesk';
  font-size:1.05rem;font-weight:700;
  color:var(--ink);margin-bottom:6px;
}
.cert-card p{
  font-size:.85rem;color:var(--slate);
}

/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:1024px){
  .ai-grid{grid-template-columns:1fr;gap:60px}
  .ai-visual{max-width:520px;margin:0 auto;width:100%}
  .ai-highlights{grid-template-columns:1fr}
}
@media(max-width:768px){
  .timeline{padding:20px 0}
  .tl-line{left:30px}
  .tl-item{
    grid-template-columns:auto 1fr;
    gap:20px;
  }
  .tl-dot{
    grid-column:1!important;
    grid-row:1!important;
    width:60px;height:60px;
  }
  .tl-card{
    grid-column:2!important;
    grid-row:1!important;
    padding:24px;
  }
  .float-stat{display:none}
  .banner-quick-stats{display:none}
}
@media(max-width:520px){
  .mvv-card,.stat-box,.team-card,.cert-card{padding:28px 20px}
  .stat-box .num{font-size:2rem}
  .mvv-ico{width:64px;height:64px;font-size:1.5rem}
  .team-avatar{width:76px;height:76px;font-size:1.4rem}
}
/* About content visible even if animation JS fails */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
}