/* ══════════════════════════════════════════════════
   ABOUT HERO — New Design
   ══════════════════════════════════════════════════ */

.ab-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h,70px) + 40px) 0 56px;
  position: relative;
  overflow: hidden;
}

/* Background */
.ab-hero-bg { position:absolute;inset:0;pointer-events:none;z-index:0; }
.ab-hero-grid {
  display: none;
}
.ab-glow-1 {
  position:absolute;width:800px;height:600px;top:-150px;right:0%;
  background:radial-gradient(ellipse,rgba(245,158,11,0.16) 0%,transparent 65%);
  filter:blur(80px);animation:abPulse 7s ease-in-out infinite;
}
.ab-glow-2 {
  position:absolute;width:500px;height:400px;bottom:-80px;left:5%;
  background:radial-gradient(ellipse,rgba(245,158,11,0.08) 0%,transparent 70%);
  filter:blur(100px);animation:abPulse 10s ease-in-out infinite 3s;
}
@keyframes abPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* Layout */
.ab-hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  position:relative;z-index:2;
}

/* ── Content (right) ── */
.ab-hero-content { display:flex;flex-direction:column; }

.ab-eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:800;color:var(--or);
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:20px;
  animation:fadeInUp .5s ease both;
}
.ab-eyebrow-line {
  width:28px;height:2.5px;background:var(--or);
  border-radius:2px;flex-shrink:0;
}

.ab-hero-h1 {
  font-size:clamp(2.6rem,5vw,4.2rem);
  font-weight:900;line-height:1.15;letter-spacing:-.03em;
  color:var(--tx);margin-bottom:20px;
  animation:fadeInUp .6s ease .08s both;
}
.ab-hero-h1-grad {
  display:block;
  margin-top:0.1em;
  padding-bottom:0.12em;
  background:linear-gradient(135deg,#FFD080 0%,#F59E0B 50%,#D97706 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.ab-hero-desc {
  font-size:1rem;color:var(--tx-2);line-height:1.82;
  max-width:440px;margin-bottom:28px;
  animation:fadeInUp .6s ease .16s both;
}

/* Feature tags */
.ab-hero-tags {
  display:flex;gap:10px;flex-wrap:wrap;
  margin-bottom:32px;
  animation:fadeInUp .6s ease .22s both;
}
.ab-tag {
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;
  background:var(--or-glow-2);border:1px solid var(--or-bdr);
  font-size:.8rem;font-weight:700;color:var(--or);
  transition:all .2s;
}
.ab-tag svg { width:14px;height:14px;flex-shrink:0; }
.ab-tag:hover { background:var(--or-glow);transform:translateY(-1px); }

/* Stats grid */
.ab-hero-stats {
  display:flex;align-items:center;gap:0;
  background:var(--surface-1);border:1px solid var(--bdr);
  border-radius:16px;overflow:hidden;
  animation:fadeInUp .6s ease .28s both;
}
.ab-hstat {
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:16px 10px;text-align:center;
}
.ab-hstat-icon {
  width:32px;height:32px;border-radius:8px;
  background:var(--or-glow-2);border:1px solid var(--or-bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--or);margin-bottom:4px;flex-shrink:0;
}
.ab-hstat-icon svg { width:16px;height:16px; }
.ab-hstat-n { font-size:1.2rem;font-weight:900;color:var(--or);line-height:1;letter-spacing:-.02em; }
.ab-hstat-l { font-size:.65rem;color:var(--tx-3);white-space:nowrap; }
.ab-hstat-sep { width:1px;height:48px;background:var(--bdr);flex-shrink:0; }

/* ── Visual (left) ── */
.ab-hero-visual {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:500px;animation:fadeIn .9s ease .15s both;
}
.ab-visual-glow {
  position:absolute;width:460px;height:460px;
  background:radial-gradient(circle,rgba(245,158,11,0.22) 0%,transparent 65%);
  border-radius:50%;filter:blur(60px);pointer-events:none;
  animation:abPulse 4s ease-in-out infinite;
}

/* Rings */
.ab-rings { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.ab-ring { position:absolute;border-radius:50%;border:1px solid; }
.ab-ring-1 { width:280px;height:280px;border-color:rgba(245,158,11,0.25);animation:abRing 18s linear infinite; }
.ab-ring-2 { width:400px;height:400px;border-color:rgba(245,158,11,0.12);animation:abRing 28s linear infinite reverse; }
.ab-ring-3 { width:520px;height:520px;border-color:rgba(245,158,11,0.06);animation:abRing 40s linear infinite; }
@keyframes abRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.ab-ring::before {
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;
  background:var(--or);box-shadow:0 0 16px var(--or);
}

/* Logo wrap */
.ab-logo-wrap {
  position: relative;
  z-index: 3;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: abFloat 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes abFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }

.ab-logo-img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 40px rgba(245,158,11,0.80))
    drop-shadow(0 0 80px rgba(245,158,11,0.40))
    drop-shadow(0 24px 60px rgba(0,0,0,0.50));
}

/* Inner glow behind logo */
.ab-logo-inner-glow {
  position: absolute;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245,158,11,0.30) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(28px);
  z-index: 1;
  animation: abPulse 3s ease-in-out infinite;
}

/* Sparks */
.ab-spark {
  position: absolute;
  border-radius: 50%;
  background: var(--or);
  z-index: 4;
  pointer-events: none;
}
.ab-spark-1 { width:8px;height:8px;top:12%;left:10%;  opacity:.9; animation:abSpark 1.8s ease-in-out infinite; }
.ab-spark-2 { width:6px;height:6px;top:18%;right:8%;  opacity:.7; animation:abSpark 2.3s ease-in-out infinite .5s; }
.ab-spark-3 { width:5px;height:5px;bottom:22%;left:6%;opacity:.8; animation:abSpark 2.0s ease-in-out infinite 1s; }
.ab-spark-4 { width:7px;height:7px;bottom:18%;right:5%;opacity:.6;animation:abSpark 3.0s ease-in-out infinite .3s; }
.ab-spark-5 { width:4px;height:4px;top:48%;left:3%;  opacity:.7; animation:abSpark 1.5s ease-in-out infinite .8s; }

@keyframes abSpark {
  0%,100% { opacity:.9; transform:scale(1); box-shadow:0 0 8px var(--or); }
  50%      { opacity:.2; transform:scale(.4); box-shadow:0 0 2px var(--or); }
}

.ab-platform-glow {
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  width:220px;height:20px;
  background:radial-gradient(ellipse,rgba(245,158,11,0.55) 0%,transparent 70%);
  border-radius:50%;filter:blur(14px);pointer-events:none;
}

@keyframes fadeInUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }

/* ── Responsive ── */
@media(max-width:1024px) {
  .ab-hero-layout { gap:32px; }
  .ab-hero-h1 { font-size:clamp(2.2rem,5vw,3.4rem); }
  .ab-hero-visual { min-height:400px; }
  .ab-logo-wrap { width:210px;height:210px; }
}
@media(max-width:768px) {
  .ab-hero { padding:calc(var(--header-h,60px) + 24px) 0 48px;min-height:auto; }
  .ab-hero-layout { grid-template-columns:1fr;gap:0; }
  .ab-hero-visual { order:-1;min-height:280px;margin-bottom:24px; }
  .ab-logo-wrap { width:170px;height:170px; }
  .ab-ring-2,.ab-ring-3 { display:none; }
  .ab-hero-h1 { font-size:clamp(2rem,8vw,2.8rem);text-align:center; }
  .ab-hero-desc { text-align:center;max-width:100%; }
  .ab-hero-tags { justify-content:center; }
  .ab-eyebrow { margin-inline:auto; }
  .ab-hero-stats { flex-wrap:wrap; }
  .ab-hstat { flex:1 1 30%; }
  .ab-hstat-sep { display:none; }
}
@media(max-width:480px) {
  .ab-hstat { flex:1 1 45%; }
  .ab-hstat-n { font-size:1.05rem; }
}

/* ABOUT PAGE */
.about-hero { padding: calc(var(--header-h) + 80px) 0 60px; position:relative; overflow:hidden; }
.about-hero::before { content:''; position:absolute; width:800px; height:600px; background:radial-gradient(ellipse,rgba(245,158,11,0.12),transparent 65%); top:-200px; left:40%; transform:translateX(-50%); filter:blur(70px); pointer-events:none; }
.about-hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.about-tag { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--bdr); font-size:0.84rem; font-weight:700; color:var(--tx-3); transition:all .2s; }
.about-tag svg { width:16px; height:16px; color:var(--or); }
.about-tag:hover { border-color:var(--or-bdr); color:var(--or); background:var(--or-glow-2); }
/* Stats 5-col */
.about-stats-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--bdr); border:1px solid var(--bdr); border-radius:var(--r-xl); overflow:hidden; margin:48px 0 80px; }
.about-stat { background:var(--surface-1); padding:24px 18px; display:flex; align-items:center; gap:12px; }
.about-stat-icon { width:46px; height:46px; border-radius:var(--r); background:var(--or-glow-2); border:1px solid var(--or-bdr); display:flex; align-items:center; justify-content:center; color:var(--or); flex-shrink:0; }
.about-stat-icon svg { width:22px; height:22px; }
.about-stat-val { font-size:1.5rem; font-weight:900; color:var(--tx); line-height:1; }
.about-stat-lbl { font-size:0.78rem; color:var(--tx-3); margin-top:2px; }
/* Timeline */
.timeline-section { padding:0 0 80px; }
.timeline-desktop { position:relative; }
.timeline-line { position:absolute; top:20px; right:20px; left:20px; height:2px; background:linear-gradient(to left,var(--bdr-2) 0%,var(--or) 70%); }
.timeline-nodes { display:flex; justify-content:space-between; position:relative; margin-bottom:28px; }
.t-node { display:flex; flex-direction:column; align-items:center; gap:8px; }
.t-node-dot { width:40px; height:40px; border-radius:50%; border:2px solid var(--bdr-2); background:var(--surface-1); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; color:var(--tx-4); cursor:pointer; transition:all .3s; position:relative; z-index:1; }
.t-node.active .t-node-dot { border-color:var(--or); background:var(--or-glow-2); color:var(--or); box-shadow:0 0 20px var(--or-glow); }
.timeline-cards-row { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.t-card { background:var(--surface-1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:20px 16px; cursor:pointer; transition:all .3s; }
.t-card:hover,.t-card.active { border-color:var(--or-bdr); box-shadow:0 8px 32px rgba(245,158,11,0.1); }
.t-year { font-size:1.5rem; font-weight:900; color:var(--or); margin-bottom:4px; }
.t-title { font-size:0.9rem; font-weight:800; color:var(--tx); margin-bottom:6px; }
.t-desc { font-size:0.78rem; color:var(--tx-3); line-height:1.6; }
/* Timeline mobile */
.timeline-mobile { display:none; flex-direction:column; }
.tm-item { display:flex; gap:16px; position:relative; padding-bottom:24px; }
.tm-item::before { content:''; position:absolute; top:26px; right:17px; width:2px; height:calc(100%); background:var(--bdr-2); }
.tm-item:last-child::before { display:none; }
.tm-dot { width:20px; height:20px; border-radius:50%; background:var(--or); flex-shrink:0; margin-top:4px; box-shadow:0 0 14px var(--or-glow); }
.tm-body { flex:1; }
.tm-year { font-size:1.2rem; font-weight:900; color:var(--or); }
.tm-title { font-size:0.95rem; font-weight:800; color:var(--tx); margin-bottom:4px; }
.tm-desc { font-size:0.82rem; color:var(--tx-3); line-height:1.6; }
/* Values */
.values-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.value-card { padding:28px 20px; text-align:center; }
.value-icon { margin:0 auto 16px; }
.value-name { font-size:1rem; font-weight:800; color:var(--tx); margin-bottom:8px; }
.value-desc { font-size:0.8rem; color:var(--tx-3); line-height:1.7; }
/* Team */
.team-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.team-card { padding:28px 16px; text-align:center; }
.team-avatar { width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); border:2px solid var(--bdr-2); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.9rem; font-weight:800; color:var(--tx-3); }
.team-name { font-size:0.95rem; font-weight:800; color:var(--tx); margin-bottom:4px; }
.team-role { font-size:0.78rem; color:var(--tx-3); margin-bottom:12px; }
.team-socials { display:flex; gap:6px; justify-content:center; }
.team-soc { width:30px; height:30px; border-radius:7px; background:var(--surface-2); border:1px solid var(--bdr); display:flex; align-items:center; justify-content:center; color:var(--tx-4); font-size:0.7rem; font-weight:700; transition:all .2s; text-decoration:none; }
.team-soc:hover { background:var(--or-glow-2); border-color:var(--or-bdr); color:var(--or); }
.team-join { padding:28px 16px; text-align:center; background:var(--surface-1); border:1.5px dashed var(--bdr-2); border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; gap:10px; }
.team-join:hover { border-color:var(--or-bdr); }
/* Responsive */
@media(max-width:1100px){ .about-stats-grid{grid-template-columns:repeat(3,1fr);} .values-grid{grid-template-columns:repeat(3,1fr);} .team-grid{grid-template-columns:repeat(3,1fr);} .timeline-cards-row{grid-template-columns:repeat(3,1fr);} }
@media(max-width:768px){ .about-hero-layout{grid-template-columns:1fr;} .about-stats-grid{grid-template-columns:1fr 1fr;} .values-grid{grid-template-columns:1fr 1fr;} .team-grid{grid-template-columns:1fr 1fr;} .timeline-desktop{display:none;} .timeline-mobile{display:flex;} }
@media(max-width:480px){ .about-stats-grid{grid-template-columns:1fr;} .values-grid{grid-template-columns:1fr;} .team-grid{grid-template-columns:1fr 1fr;} }