/* ============================================================
   ACTS For Change — Main Stylesheet
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --forest:       #2d1a5c;   /* Deep Purple */
  --green:        #8B5CF6;   /* Vibrant Violet (was Lime Green) */
  --green-mid:    #7C3AED;
  --green-light:  #C4B5FD;
  --green-pale:   #DDD6FE;
  --green-faint:  #F3F0FF;
  --earth:        #FBB040;   /* Amber/Gold */
  --earth-mid:    #e09b2a;
  --earth-light:  #fcc870;
  --sky:          #00ADEF;   /* Vibrant Blue */
  --sky-light:    #33c0f2;
  --sand:         #f5f0ff;   /* Purple-tinted light bg */
  --cream:        #f8f6ff;
  --warm-white:   #ffffff;
  --dark:         #1A1B26;   /* Dark Navy */
  --gray:         #7c7a9a;
  --light-gray:   #e8e5f5;
  --purple:       #4B2D83;
  --purple-mid:   #6344a8;
  --purple-light: #9b85d4;
  --red-acts:     #c0392b;
  --gold-acts:    #FBB040;
  --blue-acts:    #00ADEF;
  --wave-blue:    #3b1f72;
  --wave-blue-2:  #5a3898;
  --wave-blue-3:  #2d1a5c;
  --flow-mint:    #f7f2ff;
  --flow-green:   #f6f2ff;
  --flow-lilac:   #f4eefc;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --radius:       14px;
  --shadow:       0 4px 24px rgba(45,26,92,0.12);
  --shadow-hover: 0 8px 36px rgba(45,26,92,0.22);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: #fff;
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { cursor: pointer; text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; border: none; outline: none; }
textarea, input, select { font-family: var(--font-body); }

/* ---------- Page System ---------- */
.page { display: none; }
.page.active { display: block; }

/* ---------- Container ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- Navigation ---------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(45,26,92,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 68px;
  box-shadow: 0 4px 24px rgba(45,26,92,0.06);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--forest);
  transition: opacity 0.2s;
}

.nav-logo:hover { opacity: 0.85; }

.nav-logo-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green-light);
  box-shadow: 0 0 0 4px var(--green-faint);
  transition: box-shadow 0.25s;
}

.nav-logo:hover .nav-logo-img {
  box-shadow: 0 0 0 5px var(--green-pale);
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nav-logo-text span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gray);
  font-style: normal;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(243, 240, 255, 0.6);
  border: 1px solid rgba(124, 58, 237, 0.08);
}

.nav-links a {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--dark);
  transition: all 0.25s ease;
}

.nav-links a:hover {
  color: var(--green-mid);
  background: rgba(255,255,255,0.9);
}

.nav-links a.active {
  background: linear-gradient(135deg, var(--green-mid), var(--forest));
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.nav-links .u-1 {
  width: 1px;
  height: 20px;
  background: rgba(124, 58, 237, 0.15);
  margin: 0 6px;
}

.nav-cta {
  background: linear-gradient(135deg, #22C55E, #16A34A) !important;
  color: white !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  box-shadow: 0 4px 16px rgba(22,163,74,0.35);
  transition: all 0.25s !important;
  margin-left: 6px;
}

.nav-cta:hover {
  background: linear-gradient(135deg, #16A34A, #15803D) !important;
  box-shadow: 0 8px 22px rgba(22,163,74,0.45) !important;
  transform: translateY(-2px);
}

/* Hamburger */
.hamburger {
  display: none;
  font-size: 1.3rem;
  color: var(--forest);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.2s;
}

.hamburger:hover { background: var(--green-faint); }

/* Mobile Nav Drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  background: white;
  z-index: 999;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid var(--light-gray);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  padding: 13px 24px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark);
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

.mobile-nav a:hover { background: var(--green-faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.22s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: #16A34A;
  color: white;
  box-shadow: 0 4px 16px rgba(22,163,74,0.3);
}
.btn-primary:hover { background: #15803D; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.4); }

.btn-outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-outline:hover { background: var(--green-faint); transform: translateY(-2px); }

.btn-blue {
  background: var(--sky);
  color: white;
  box-shadow: 0 4px 16px rgba(0,173,239,0.28);
}
.btn-blue:hover { background: #1f5f8f; transform: translateY(-2px); }

.btn-earth {
  background: var(--earth);
  color: white;
  box-shadow: 0 4px 16px rgba(251,176,64,0.35);
}
.btn-earth:hover { background: var(--earth-mid); transform: translateY(-2px); }

.btn-sm { padding: 8px 16px; font-size: 0.82rem; border-radius: 8px; }
.btn-full { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #EDE7FB 0%, #E4E0F8 32%, #DCEBFC 68%, #FFFFFF 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 68px;
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  bottom: -20px;
  background: rgba(75,45,131,0.07);
  border-radius: 50%;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
}

.hero-leaves {
  display: none;
}

.hero-deco-bg {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 100px;
  max-width: 700px;
}

.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.75);
  color: var(--purple-mid);
  border: 1px solid rgba(75,45,131,0.15);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 28px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(75,45,131,0.08);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 24px;
}

.hero h1 em {
  color: var(--purple-mid);
  font-style: italic;
}

.hero p {
  color: #4b4a5e;
  font-size: 1.05rem;
  margin-bottom: 36px;
  max-width: 580px;
  line-height: 1.7;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero-btns .btn-primary {
  background: var(--purple-mid);
  color: white;
  box-shadow: 0 4px 16px rgba(75,45,131,0.32);
}
.hero-btns .btn-primary:hover { background: var(--purple); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(75,45,131,0.4); }

.hero-btns .btn-outline {
  background: #16A34A;
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(22,163,74,0.3);
}
.hero-btns .btn-outline:hover { background: #15803D; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.4); }

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.78rem;
  color: var(--gray);
  font-weight: 500;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hero orbit logo */
.hero-logo-circle {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.9);
  box-shadow: 0 20px 60px rgba(75,45,131,0.22);
  z-index: 2;
}

.hero-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-logo-orbit {
  position: absolute;
  right: calc(8% - 30px);
  top: calc(50% - 160px);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(75,45,131,0.18);
  animation: orbit 20s linear infinite;
  z-index: 1;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Wave Divider ---------- */
.wave-divider { line-height: 0; }

/* ---------- Sections ---------- */
.section {
  padding: 80px 0;
}

.section-label {
  display: inline-block;
  background: var(--green-faint);
  color: var(--green);
  border: 1px solid rgba(45,26,92,0.12);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--dark);
}

.section-title em { font-style: italic; color: var(--green); }

.section-sub {
  color: var(--gray);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.text-center { text-align: center; }

/* ---------- How It Works ---------- */
.how-bg { background: var(--warm-white); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.step-card {
  background: white;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(45,26,92,0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}

.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.step-card-leaf {
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--green-faint);
}

.step-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--green-pale);
  line-height: 1;
  margin-bottom: 10px;
}

.step-icon { font-size: 1.8rem; margin-bottom: 12px; }

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 8px;
  color: var(--dark);
}

.step-card p { color: var(--gray); font-size: 0.88rem; line-height: 1.6; }

/* ---------- Programs ---------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.program-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.program-card-header {
  padding: 28px 24px 20px;
  position: relative;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.prog-food .program-card-header   { background: linear-gradient(135deg, #ece4f9, #f3eefc); }
.prog-school .program-card-header { background: linear-gradient(135deg, #dbeeff, #eaf4ff); }
.prog-fortune .program-card-header{ background: linear-gradient(135deg, #f5ede0, #faf4ec); }

.prog-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 24px;
}

.program-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 6px;
  color: var(--dark);
  min-height: 30px;
  display: flex;
  align-items: flex-end;
}

.program-card-header p {
  color: var(--gray);
  font-size: 0.87rem;
  min-height: 48px;
}

.program-card-body {
  background: white;
  padding: 20px 24px 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.program-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--green-faint);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.program-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.87rem;
  color: var(--dark);
}

.program-detail i { color: var(--green); margin-top: 2px; flex-shrink: 0; }

.program-card-body .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Impact Section ---------- */
.impact-bg {
  background: linear-gradient(160deg, var(--forest) 0%, var(--purple) 60%, var(--sky) 100%);
  position: relative;
  overflow: hidden;
}

.impact-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.impact-counter {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: transform 0.2s;
}

.impact-counter:hover { transform: translateY(-3px); }

.impact-counter-icon { font-size: 2rem; margin-bottom: 10px; }

.impact-counter-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 4px;
}

.impact-counter-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Partners Grid ---------- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.partner-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: white;
  border: 1px solid rgba(45,26,92,0.1);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  transition: transform 0.22s, box-shadow 0.22s;
}

.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.partner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-faint);
  border-radius: 12px;
}

.partner-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 5px;
  color: var(--dark);
}

.partner-card p { color: var(--gray); font-size: 0.84rem; line-height: 1.6; }

/* ---------- Cards ---------- */
.card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.07);
  padding: 28px;
  box-shadow: var(--shadow);
}

.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.badge-green { background: #E7DFF7; color: var(--green); }
.badge-blue  { background: #dbeeff; color: var(--sky); }
.badge-earth { background: #f5ede0; color: var(--earth); }

/* ---------- Page Hero ---------- */
.page-hero {
  padding: 100px 2rem 72px;
  text-align: center;
  margin-top: 68px;
  position: relative;
  overflow: hidden;
}

/* About — Purple + warm gold glow */
.page-hero-about {
  background: linear-gradient(135deg, #1a0838 0%, #3b1f72 40%, #7b4fa6 75%, #c8822a 100%);
}
.page-hero-about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(251,176,64,0.35) 0%, transparent 50%),
              radial-gradient(ellipse at 15% 30%, rgba(155,100,220,0.4) 0%, transparent 45%);
  pointer-events: none;
}

/* Programs — Purple + lime green glow */
.page-hero-programs {
  background: linear-gradient(135deg, #0f0828 0%, #2d1a5c 35%, #5a3898 65%, #4C1D95 100%);
}
.page-hero-programs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 55%, rgba(139,92,246,0.38) 0%, transparent 50%),
              radial-gradient(ellipse at 20% 35%, rgba(130,80,210,0.35) 0%, transparent 45%);
  pointer-events: none;
}

/* For Brand — Purple + sky blue glow */
.page-hero-brand {
  background: linear-gradient(135deg, #0d0620 0%, #2d1a5c 35%, #4b2d83 65%, #0a5a8a 100%);
}
.page-hero-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 82% 45%, rgba(0,173,239,0.38) 0%, transparent 50%),
              radial-gradient(ellipse at 18% 60%, rgba(120,70,200,0.35) 0%, transparent 45%);
  pointer-events: none;
}

/* For Partners — Purple + rose/pink glow */
.page-hero-partners {
  background: linear-gradient(135deg, #140530 0%, #3b1f72 38%, #6b3a9e 65%, #9e2060 100%);
}
.page-hero-partners::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 40%, rgba(220,60,130,0.38) 0%, transparent 50%),
              radial-gradient(ellipse at 18% 65%, rgba(140,80,210,0.35) 0%, transparent 45%);
  pointer-events: none;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: white;
  margin-bottom: 16px;
  font-style: italic;
}

.page-hero p {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- About ---------- */
.logo-showcase {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--green-faint);
  border: 1px solid rgba(45,26,92,0.12);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}

.logo-showcase img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.logo-showcase-text h3 {
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 3px;
  color: var(--dark);
}

.logo-showcase-text p { color: var(--gray); font-size: 0.84rem; }

.about-values { display: flex; flex-direction: column; gap: 16px; }

.about-val {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: white;
  border: 1px solid rgba(45,26,92,0.1);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.about-val-icon {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-faint);
  border-radius: 10px;
  flex-shrink: 0;
}

.about-val h3 { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; margin-bottom: 4px; }
.about-val p  { color: var(--gray); font-size: 0.84rem; line-height: 1.55; }

/* ---------- Flow ---------- */
.nature-section { background: var(--green-faint); }

.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0;
}

.flow-step {
  text-align: center;
  min-width: 90px;
}

.flow-step-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(45,26,92,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 8px;
  box-shadow: 0 4px 14px rgba(45,26,92,0.1);
}

.flow-step p { font-size: 0.78rem; font-weight: 600; color: var(--dark); }

.flow-arrow { color: var(--green-mid); font-size: 1.2rem; }

/* ---------- Expansion Grid ---------- */
.expansion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.expansion-card {
  background: white;
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.07);
  position: relative;
  transition: transform 0.22s;
}

.expansion-card:hover { transform: translateY(-4px); }

.expansion-label {
  position: absolute;
  top: -1px; left: -1px;
  border-radius: var(--radius) 0 var(--radius) 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  letter-spacing: 0.06em;
}

.expansion-label-now   { background: var(--green); color: white; }
.expansion-label-next  { background: var(--sky);   color: white; }
.expansion-label-soon  { background: var(--earth); color: white; }
.expansion-label-future{ background: var(--purple);color: white; }

.expansion-icon  { font-size: 2.2rem; margin: 18px 0 10px; }
.expansion-title { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; margin-bottom: 8px; }
.expansion-desc  { color: var(--gray); font-size: 0.85rem; line-height: 1.6; margin-bottom: 14px; }

.expansion-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
}

.expansion-badge-active    { background: #E7DFF7; color: var(--green); }
.expansion-badge-expanding { background: #dbeeff; color: var(--sky); }
.expansion-badge-planned   { background: #f0f0f0; color: var(--gray); }

/* ---------- Brand Benefits ---------- */
.brand-benefit {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: var(--shadow);
  transition: transform 0.22s;
}

.brand-benefit:hover { transform: translateY(-3px); }

.brand-benefit-purple { border-top: 3px solid var(--purple); }

.brand-benefit-icon { font-size: 1.8rem; margin-bottom: 12px; }

.brand-benefit h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--dark);
}

.brand-benefit p { color: var(--gray); font-size: 0.86rem; line-height: 1.6; }

/* ---------- KPI Grid ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.kpi {
  background: white;
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(45,26,92,0.05);
}

.kpi-label { font-size: 0.78rem; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.kpi-val   { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--dark); line-height: 1; margin-bottom: 4px; }
.kpi-sub   { font-size: 0.78rem; color: var(--green); font-weight: 500; }

/* ---------- Charts ---------- */
.chart-box {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}

.chart-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 16px;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

th {
  text-align: left;
  padding: 10px 14px;
  background: var(--cream);
  color: var(--gray);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--light-gray);
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: var(--dark);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--cream); }

/* ---------- Progress Bar ---------- */
.progress-wrap { margin-bottom: 8px; }

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label { font-size: 0.85rem; color: var(--dark); font-weight: 500; }
.progress-val   { font-size: 0.82rem; color: var(--gray); }

.progress-bar {
  background: var(--light-gray);
  border-radius: 100px;
  overflow: hidden;
  height: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  border-radius: 100px;
  transition: width 1s ease;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--light-gray);
  border-radius: 9px;
  font-size: 0.9rem;
  color: var(--dark);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45,26,92,0.12);
}

textarea.form-control { min-height: 110px; resize: vertical; }

.success-msg {
  display: none;
  align-items: center;
  gap: 8px;
  background: #E7DFF7;
  color: var(--green);
  border: 1px solid rgba(45,26,92,0.2);
  border-radius: 9px;
  padding: 12px 16px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 500;
}

.success-msg.show { display: flex; }

/* ---------- Dashboard Shell ---------- */
.dash-shell {
  display: flex;
  min-height: 100vh;
  padding-top: 68px;
}

.dash-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--forest);
  padding: 28px 16px;
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow-y: auto;
}

.dash-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: white;
  padding: 0 8px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 16px;
}

.dash-sidebar-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 9px;
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.2s;
}

.dash-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,0.15); color: white; }

.dash-main {
  flex: 1;
  background: var(--cream);
  padding: 36px;
  overflow-x: auto;
}

.dash-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--light-gray);
}

.dash-header h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--dark);
}

/* ---------- Footer ---------- */
footer {
  background: var(--dark);
  padding: 64px 2rem 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 14px;
}

.footer-brand-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

.footer-desc {
  color: rgba(255,255,255,0.55);
  font-size: 0.86rem;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 280px;
}

.footer-social { display: flex; gap: 12px; }

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  transition: all 0.2s;
}

.footer-social a:hover { background: var(--green); color: white; }

.footer-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.footer-links a {
  color: rgba(255,255,255,0.6);
  font-size: 0.86rem;
  cursor: pointer;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--green-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  font-size: 0.82rem;
}

/* ---------- Utilities ---------- */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.divider { height: 1px; background: var(--light-gray); margin: 16px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .expansion-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-logo-circle, .hero-logo-orbit { display: none; }
  .impact-counters { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .programs-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-2 { grid-template-columns: 1fr; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-main { padding: 24px 16px; }
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .expansion-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: 1fr; }
  .impact-counters { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero-btns { flex-direction: column; }
  .hero-stats { gap: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .flow { gap: 4px; }
  .flow-arrow { font-size: 0.85rem; }
  .program-card-header { min-height: auto; }
  .program-card-header p { min-height: auto; }
}


/* ============================================================
   UTILITY CLASSES (moved from inline styles)
   ============================================================ */

.u-1 { width:6px; }
.u-2 { background:var(--forest); }
.u-3 { height:60px;width:100%; }
.u-4 { background:var(--warm-white); }
.u-5 { background:var(--sand); }
.u-6 { background:#dbeeff;color:var(--sky); }
.u-7 { color:var(--sky); }
.u-8 { background:#f5ede0;color:var(--earth); }
.u-9 { color:var(--earth); }
.u-10 { padding-bottom:80px; }
.u-11 { margin-bottom:48px;position:relative;z-index:1; }
.u-12 { background:rgba(167,139,250,0.15);color:var(--green-pale);border-color:rgba(167,139,250,0.25); }
.u-13 { color:white;font-style:italic; }
.u-14 { color:var(--green-light); }
.u-15 { color:rgba(255,255,255,0.72); }
.u-16 { position:relative;z-index:1; }
.u-17 { background:linear-gradient(160deg, var(--forest) 0%, var(--sky) 100%); }
.u-18 { background:white; }
.u-19 { background:linear-gradient(135deg, var(--green-faint) 0%, var(--sand) 100%);padding:72px 2rem;text-align:center;border-top:1px solid rgba(76,29,149,0.1); }
.u-20 { max-width:700px; }
.u-21 { font-size:3rem;margin-bottom:20px; }
.u-22 { font-family:var(--font-display);font-size:2.4rem;margin-bottom:16px;color:var(--dark);font-style:italic; }
.u-23 { color:var(--green); }
.u-24 { color:var(--gray);margin-bottom:32px;font-size:1.05rem; }
.u-25 { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }
.u-26 { opacity:0.45; }
.u-27 { color:var(--gray);margin-bottom:20px; }
.u-28 { color:var(--gray); }
.u-29 { margin-bottom:14px;font-family:var(--font-display);font-style:italic; }
.u-30 { color:var(--gray);margin-bottom:12px; }
.u-31 { background:var(--dark);color:rgba(255,255,255,0.7);padding:28px 2rem;text-align:center; }
.u-32 { font-size:2.5rem;margin-bottom:16px; }
.u-33 { font-family:var(--font-display);font-size:1.4rem;margin-bottom:8px;font-style:italic; }
.u-34 { margin-bottom:16px;display:inline-block; }
.u-35 { color:var(--gray);font-size:0.88rem; }
.u-36 { max-width:680px;margin:0 auto;background:var(--green-faint);border-color:rgba(76,29,149,0.2); }
.u-37 { font-size:2rem;margin-bottom:12px; }
.u-38 { font-family:var(--font-display);font-style:italic;margin-bottom:8px; }
.u-39 { color:var(--gray);margin-bottom:16px; }
.u-40 { background:#f0ebff;color:var(--purple);border-color:rgba(75,45,131,0.2); }
.u-41 { background:linear-gradient(135deg,#f0ebff,#F3F0FF);border-color:rgba(75,45,131,0.18);max-width:780px;margin:40px auto 0; }
.u-42 { text-align:center;margin-bottom:16px;font-size:2rem; }
.u-43 { font-family:var(--font-display);font-style:italic;text-align:center;margin-bottom:12px;color:var(--purple); }
.u-44 { color:var(--gray);text-align:center;margin-bottom:20px; }
.u-45 { text-align:center; }
.u-46 { background:var(--purple);color:white;box-shadow:0 4px 20px rgba(75,45,131,0.35); }
.u-47 { display:none!important; }
.u-48 { background:var(--cream); }
.u-49 { height:260px;position:relative; }
.u-50 { height:14px; }
.u-51 { width:42%; }
.u-52 { color:var(--gray);font-size:0.86rem;margin-top:12px; }
.u-53 { font-family:var(--font-display);margin-bottom:6px;font-style:italic; }
.u-54 { color:var(--gray);margin-bottom:28px;font-size:0.9rem; }
.u-55 { font-size:0.85rem;color:var(--gray); }
.u-56 { overflow-x:auto; }
.u-57 { height:240px;position:relative; }
.u-58 { grid-template-columns:repeat(3,1fr); }
.u-59 { color:var(--gray);font-size:0.85rem;margin-top:12px; }
.u-60 { margin-left:12px; }
.u-61 { background:linear-gradient(160deg, var(--forest), var(--earth)); }
.u-62 { align-items:start;max-width:960px;margin:0 auto; }
.u-63 { color:var(--gray);margin-bottom:24px;font-size:0.9rem; }
.u-64 { margin-bottom:16px;font-family:var(--font-display);font-style:italic; }
.u-65 { display:flex;flex-direction:column;gap:10px; }
.u-66 { background:var(--green-faint);border-color:rgba(76,29,149,0.15); }
.u-67 { margin-bottom:8px;font-family:var(--font-display);font-style:italic; }

/* ============================================================
   PARALLAX SYSTEM
   ============================================================ */

/* --- Hero Parallax --- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-parallax-bg {
  position: absolute;
  inset: -20% 0;
  background: linear-gradient(135deg, #EDE7FB 0%, #E4E0F8 32%, #DCEBFC 68%, #FFFFFF 100%);
  will-change: transform;
  z-index: 0;
}
.hero-parallax-bg .hero-leaves,
.hero-parallax-bg .hero-particles {
  position: absolute;
  inset: 0;
}

/* --- Page Hero Parallax --- */
.page-hero {
  position: relative;
  overflow: hidden;
}
.parallax-layer {
  position: absolute;
  inset: -30% 0;
  width: 100%;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}
.page-hero-about    .parallax-layer { background: linear-gradient(135deg, #1a0838 0%, #3b1f72 40%, #7b4fa6 75%, #c8822a 100%); }
.page-hero-programs .parallax-layer { background: linear-gradient(135deg, #0f0828 0%, #2d1a5c 35%, #5a3898 65%, #4C1D95 100%); }
.page-hero-brand    .parallax-layer { background: linear-gradient(135deg, #0d0620 0%, #2d1a5c 35%, #4b2d83 65%, #0a5a8a 100%); }
.page-hero-partners .parallax-layer { background: linear-gradient(135deg, #140530 0%, #3b1f72 38%, #6b3a9e 65%, #9e2060 100%); }

.parallax-glow {
  position: absolute;
  inset: 0;
  will-change: transform;
  z-index: 1;
  pointer-events: none;
}
.page-hero-about    .parallax-glow { background: radial-gradient(ellipse at 85% 50%, rgba(251,176,64,0.38) 0%, transparent 50%), radial-gradient(ellipse at 15% 30%, rgba(155,100,220,0.4) 0%, transparent 45%); }
.page-hero-programs .parallax-glow { background: radial-gradient(ellipse at 80% 55%, rgba(139,92,246,0.38) 0%, transparent 50%), radial-gradient(ellipse at 20% 35%, rgba(130,80,210,0.35) 0%, transparent 45%); }
.page-hero-brand    .parallax-glow { background: radial-gradient(ellipse at 82% 45%, rgba(0,173,239,0.42) 0%, transparent 50%), radial-gradient(ellipse at 18% 60%, rgba(120,70,200,0.35) 0%, transparent 45%); }
.page-hero-partners .parallax-glow { background: radial-gradient(ellipse at 80% 40%, rgba(220,60,130,0.42) 0%, transparent 50%), radial-gradient(ellipse at 18% 65%, rgba(140,80,210,0.35) 0%, transparent 45%); }

/* Floating orb decorations inside page heroes */
.parallax-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
  opacity: 0.18;
  filter: blur(40px);
}
.page-hero-about    .parallax-orb-1 { width: 320px; height: 320px; background: #FBB040; top: -60px; right: 10%; }
.page-hero-about    .parallax-orb-2 { width: 200px; height: 200px; background: #9b85d4; bottom: -40px; left: 8%; }
.page-hero-programs .parallax-orb-1 { width: 300px; height: 300px; background: #8B5CF6; top: -50px; right: 12%; }
.page-hero-programs .parallax-orb-2 { width: 180px; height: 180px; background: #DDD6FE; bottom: -30px; left: 10%; }
.page-hero-brand    .parallax-orb-1 { width: 340px; height: 340px; background: #00ADEF; top: -70px; right: 8%; }
.page-hero-brand    .parallax-orb-2 { width: 200px; height: 200px; background: #33c0f2; bottom: -50px; left: 6%; }
.page-hero-partners .parallax-orb-1 { width: 300px; height: 300px; background: #dc3c82; top: -60px; right: 10%; }
.page-hero-partners .parallax-orb-2 { width: 220px; height: 220px; background: #9b85d4; bottom: -40px; left: 8%; }

.page-hero-content {
  position: relative;
  z-index: 2;
}

/* --- Impact Section Parallax --- */
.impact-bg {
  position: relative;
  overflow: hidden;
}
.impact-parallax-bg {
  position: absolute;
  inset: -25% 0;
  background: linear-gradient(160deg, var(--forest) 0%, var(--purple) 60%, var(--sky) 100%);
  will-change: transform;
  z-index: 0;
}
.impact-bg > * { position: relative; z-index: 1; }

/* --- Scroll reveal animation --- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer, .hero-parallax-bg, .impact-parallax-bg,
  .parallax-glow, .parallax-orb { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   FULL PARALLAX SYSTEM v2
   ============================================================ */

/* ── Base parallax section ───────────────────────────────── */
.px-section {
  position: relative;
  overflow: hidden;
}

/* ── Floating dot grids ──────────────────────────────────── */
.px-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  opacity: 0.07;
}
.px-dots-light  { color: #2d1a5c; }
.px-dots-green  { color: #4C1D95; }
.px-dots-sand   { color: #a07850; }

/* ── Blob shapes ─────────────────────────────────────────── */
.px-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}
.px-blobs::before,
.px-blobs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.13;
}
.px-blobs-white::before  { width: 520px; height: 520px; background: #8B5CF6; top: -120px; left: -80px; }
.px-blobs-white::after   { width: 400px; height: 400px; background: #00ADEF; bottom: -100px; right: -60px; }
.px-blobs-purple::before { width: 500px; height: 500px; background: #6344a8; top: -100px; right: -60px; opacity: 0.18; }
.px-blobs-purple::after  { width: 360px; height: 360px; background: #FBB040; bottom: -80px; left: -40px; opacity: 0.12; }
.px-blobs-teal::before   { width: 440px; height: 440px; background: #A78BFA; top: -80px; left: -60px; opacity: 0.15; }
.px-blobs-teal::after    { width: 320px; height: 320px; background: #2d1a5c; bottom: -60px; right: -40px; opacity: 0.1; }
.px-blobs-subtle::before { width: 480px; height: 480px; background: #9b85d4; top: -100px; right: -80px; opacity: 0.08; }
.px-blobs-subtle::after  { width: 360px; height: 360px; background: #8B5CF6; bottom: -80px; left: -60px; opacity: 0.07; }

/* ── Sand shapes ─────────────────────────────────────────── */
.px-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}
.px-shapes::before,
.px-shapes::after {
  content: '';
  position: absolute;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  filter: blur(48px);
  opacity: 0.1;
}
.px-shapes-sand::before  { width: 480px; height: 360px; background: #FBB040; top: -60px; right: 5%; }
.px-shapes-sand::after   { width: 360px; height: 280px; background: #8B5CF6; bottom: -40px; left: 8%; }
.px-shapes-teal::before  { width: 460px; height: 340px; background: #6D4AA8; top: -50px; left: 5%; }
.px-shapes-teal::after   { width: 340px; height: 260px; background: #00ADEF; bottom: -40px; right: 8%; }

/* ── CTA leaf decorations ────────────────────────────────── */
.px-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}
.px-leaves::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 0 80% 0 80%;
  background: rgba(76, 29, 149, 0.12);
  top: -40px; left: -40px;
  transform: rotate(-20deg);
}
.px-leaves::after {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 80% 0 80% 0;
  background: rgba(76, 29, 149, 0.1);
  bottom: -30px; right: -30px;
  transform: rotate(-20deg);
}

/* ── Contact page-hero ───────────────────────────────────── */
.page-hero-contact {
  background: linear-gradient(135deg, #1a0838 0%, #3b1f72 38%, #5a3898 70%, #1f5f8f 100%);
}
.page-hero-contact .parallax-layer { background: linear-gradient(135deg, #1a0838 0%, #3b1f72 38%, #5a3898 70%, #1f5f8f 100%); }
.page-hero-contact .parallax-glow  { background: radial-gradient(ellipse at 78% 45%, rgba(0,173,239,0.3) 0%, transparent 52%), radial-gradient(ellipse at 22% 60%, rgba(251,176,64,0.22) 0%, transparent 48%); }
.page-hero-contact .parallax-orb-1 { width: 280px; height: 280px; background: #00ADEF; top: -50px; right: 10%; }
.page-hero-contact .parallax-orb-2 { width: 200px; height: 200px; background: #FBB040; bottom: -40px; left: 8%; }

/* ── Staggered reveal delays ─────────────────────────────── */
.reveal[data-delay="0"]   { transition-delay: 0ms; }
.reveal[data-delay="80"]  { transition-delay: 80ms; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="160"] { transition-delay: 160ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="240"] { transition-delay: 240ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="320"] { transition-delay: 320ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="480"] { transition-delay: 480ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .px-dots, .px-blobs, .px-shapes, .px-leaves { transform: none !important; }
}


/* ============================================================
   FLOATING TRASH ITEMS
   ============================================================ */

.trash-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.trash-item {
  position: absolute;
  opacity: 1;
  will-change: transform;
}

/* Three distinct drift paths */
@keyframes float-drift-a {
  0%   { transform: translateY(0px)   rotate(var(--r, 0deg)) scale(1); }
  25%  { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 12deg)) scale(1.04); }
  50%  { transform: translateY(-8px)  rotate(calc(var(--r, 0deg) + 5deg))  scale(0.97); }
  75%  { transform: translateY(-28px) rotate(calc(var(--r, 0deg) - 8deg))  scale(1.02); }
  100% { transform: translateY(0px)   rotate(var(--r, 0deg)) scale(1); }
}

@keyframes float-drift-b {
  0%   { transform: translateY(0px)   translateX(0px)   rotate(var(--r,0deg)); }
  33%  { transform: translateY(-18px) translateX(10px)  rotate(calc(var(--r,0deg) + 15deg)); }
  66%  { transform: translateY(-30px) translateX(-8px)  rotate(calc(var(--r,0deg) - 10deg)); }
  100% { transform: translateY(0px)   translateX(0px)   rotate(var(--r,0deg)); }
}

@keyframes float-drift-c {
  0%   { transform: translateY(0px)   rotate(var(--r,0deg)) scale(1); }
  20%  { transform: translateY(-14px) rotate(calc(var(--r,0deg) + 20deg)) scale(1.06); }
  60%  { transform: translateY(-34px) rotate(calc(var(--r,0deg) - 5deg))  scale(0.95); }
  80%  { transform: translateY(-18px) rotate(calc(var(--r,0deg) + 8deg))  scale(1.03); }
  100% { transform: translateY(0px)   rotate(var(--r,0deg)) scale(1); }
}

.float-drift-a { animation: float-drift-a ease-in-out infinite; }
.float-drift-b { animation: float-drift-b ease-in-out infinite; }
.float-drift-c { animation: float-drift-c ease-in-out infinite; }

/* Parallax depth on scroll via JS */
.trash-item[data-depth="1"] { --parallax-speed: 0.06; }
.trash-item[data-depth="2"] { --parallax-speed: 0.12; }
.trash-item[data-depth="3"] { --parallax-speed: 0.18; }

@media (prefers-reduced-motion: reduce) {
  .trash-item { animation: none !important; }
}

/* ============================================================
   HOME LANDING FLOW BACKGROUNDS
   ============================================================ */

.home-wave {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  margin-bottom: -2px;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.home-wave svg {
  display: block;
  width: 100%;
  height: clamp(82px, 8vw, 130px);
}

.wave-to-how svg,
.wave-how-programs svg {
  height: clamp(68px, 7vw, 100px);
}

.wave-to-how {
  background: linear-gradient(160deg, var(--forest) 0%, var(--purple) 55%, var(--sky) 100%);
}

.wave-how-programs {
  background:
    radial-gradient(ellipse at 16% 18%, rgba(139,92,246,0.34) 0%, transparent 46%),
    radial-gradient(ellipse at 86% 72%, rgba(0,173,239,0.24) 0%, transparent 44%),
    linear-gradient(145deg, #f5f1ff 0%, #efe9fa 46%, #f3fbff 100%);
}

.wave-programs-impact {
  background:
    radial-gradient(ellipse at 12% 78%, rgba(0,173,239,0.22) 0%, transparent 46%),
    radial-gradient(ellipse at 82% 16%, rgba(139,92,246,0.34) 0%, transparent 50%),
    linear-gradient(150deg, #f9f6e9 0%, #efe6fb 48%, #f0ebfb 100%);
  margin-top: -72px;
}

.wave-impact-partners {
  background:
    radial-gradient(ellipse at 82% 18%, rgba(0,173,239,0.18) 0%, transparent 44%),
    radial-gradient(ellipse at 54% 46%, rgba(155,133,212,0.28) 0%, transparent 48%),
    linear-gradient(160deg, var(--wave-blue-3) 0%, var(--wave-blue) 58%, var(--wave-blue-2) 100%);
  margin-top: -72px;
}

.wave-partners-cta {
  background:
    radial-gradient(ellipse at 10% 12%, rgba(155,133,212,0.16) 0%, transparent 36%),
    radial-gradient(ellipse at 22% 82%, rgba(139,92,246,0.13) 0%, transparent 36%),
    linear-gradient(145deg, #f7f1ff 0%, #fbf8ff 48%, #edf8ff 100%);
  margin-top: -72px;
}

.wave-cta-footer {
  background:
    radial-gradient(ellipse at 52% 18%, rgba(155,133,212,0.28) 0%, transparent 44%),
    linear-gradient(160deg, var(--wave-blue-3) 0%, var(--wave-blue) 58%, var(--wave-blue-2) 100%);
  margin-top: -60px;
}

.home-flow-section {
  position: relative;
  isolation: isolate;
}

.home-flow-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.78;
  background:
    linear-gradient(rgba(255,255,255,0.46) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.42) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

.home-how-bg {
  background:
    radial-gradient(ellipse at 16% 18%, rgba(139,92,246,0.34) 0%, transparent 46%),
    radial-gradient(ellipse at 86% 72%, rgba(0,173,239,0.24) 0%, transparent 44%),
    radial-gradient(ellipse at 48% 112%, rgba(167,139,250,0.22) 0%, transparent 38%),
    linear-gradient(145deg, #f5f1ff 0%, #efe9fa 46%, #f3fbff 100%);
}

.home-programs-bg {
  background:
    radial-gradient(ellipse at 12% 78%, rgba(0,173,239,0.22) 0%, transparent 46%),
    radial-gradient(ellipse at 82% 16%, rgba(139,92,246,0.34) 0%, transparent 50%),
    radial-gradient(ellipse at 54% 108%, rgba(251,176,64,0.24) 0%, transparent 42%),
    linear-gradient(150deg, #f8fff0 0%, #efe6fb 48%, #f0ebfb 100%);
}

.organic-field {
  position: absolute;
  inset: -12% 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.organic-field::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: radial-gradient(circle, rgba(45,26,92,0.28) 0.8px, transparent 0.9px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
}

.organic-blob {
  position: absolute;
  display: block;
  filter: blur(16px);
  opacity: 0.58;
  transform: rotate(var(--blob-rotate, 0deg));
  will-change: transform;
}

.blob-leaf-a,
.blob-leaf-b {
  border-radius: 64% 36% 68% 32% / 42% 58% 42% 58%;
  background: linear-gradient(135deg, rgba(139,92,246,0.62), rgba(221,214,254,0.28));
}

.blob-blue-a,
.blob-blue-b {
  border-radius: 44% 56% 34% 66% / 60% 38% 62% 40%;
  background: linear-gradient(135deg, rgba(0,173,239,0.46), rgba(51,192,242,0.20));
}

.blob-green-a {
  border-radius: 34% 66% 58% 42% / 52% 48% 52% 48%;
  background: linear-gradient(135deg, rgba(167,139,250,0.52), rgba(232,245,204,0.24));
}

.blob-gold-a {
  border-radius: 62% 38% 40% 60% / 44% 62% 38% 56%;
  background: linear-gradient(135deg, rgba(251,176,64,0.40), rgba(252,200,112,0.18));
}

.blob-leaf-a {
  width: min(42vw, 520px);
  height: min(30vw, 340px);
  top: -8%;
  left: -8%;
  --blob-rotate: -12deg;
}

.blob-blue-a {
  width: min(32vw, 390px);
  height: min(28vw, 310px);
  right: -6%;
  top: 42%;
  --blob-rotate: 16deg;
}

.blob-green-a {
  width: min(26vw, 320px);
  height: min(20vw, 240px);
  left: 42%;
  bottom: -10%;
  --blob-rotate: 28deg;
}

.blob-leaf-b {
  width: min(38vw, 500px);
  height: min(28vw, 330px);
  right: -8%;
  top: -12%;
  --blob-rotate: 14deg;
}

.blob-blue-b {
  width: min(34vw, 420px);
  height: min(24vw, 280px);
  left: -7%;
  bottom: 4%;
  --blob-rotate: -18deg;
}

.blob-gold-a {
  width: min(28vw, 330px);
  height: min(22vw, 250px);
  right: 18%;
  bottom: -9%;
  --blob-rotate: 24deg;
}

.home-flow-section > .container,
.home-flow-section > .px-dots,
.home-flow-section > .px-shapes {
  position: relative;
  z-index: 1;
}

.home-flow-section .section-label {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  border-color: rgba(139,92,246,0.20);
}

.home-flow-section .step-card,
.home-flow-section .program-card {
  background: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 16px 48px rgba(45,26,92,0.10);
  backdrop-filter: blur(10px) saturate(1.25);
}

.home-flow-section .program-card-body {
  background: rgba(255,255,255,0.90);
}

.home-impact-flow {
  margin-top: -1px;
  padding-top: clamp(92px, 9vw, 136px);
  background: linear-gradient(160deg, var(--wave-blue-3) 0%, var(--wave-blue) 58%, var(--wave-blue-2) 100%);
}

.home-impact-flow .impact-parallax-bg {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 46%, transparent 72%),
    radial-gradient(ellipse at 82% 18%, rgba(0,173,239,0.18) 0%, transparent 44%),
    radial-gradient(ellipse at 14% 72%, rgba(139,92,246,0.17) 0%, transparent 38%),
    radial-gradient(ellipse at 54% 46%, rgba(155,133,212,0.28) 0%, transparent 48%),
    linear-gradient(160deg, var(--wave-blue-3) 0%, var(--wave-blue) 58%, var(--wave-blue-2) 100%);
}

.home-partners-bg {
  background:
    radial-gradient(ellipse at 10% 12%, rgba(155,133,212,0.16) 0%, transparent 36%),
    radial-gradient(ellipse at 88% 78%, rgba(0,173,239,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 22% 82%, rgba(139,92,246,0.13) 0%, transparent 36%),
    linear-gradient(145deg, var(--flow-lilac) 0%, #fbf8ff 48%, #edf8ff 100%) !important;
  position: relative;
  isolation: isolate;
}

.home-partners-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(circle, rgba(45,26,92,0.32) 0.8px, transparent 0.9px);
  background-size: 20px 20px;
}

.home-partners-bg > .container,
.home-partners-bg > .px-blobs {
  position: relative;
  z-index: 1;
}

.px-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.14) 0%, transparent 34%),
    linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.08) 42%, transparent 72%),
    radial-gradient(ellipse at 16% 28%, rgba(139,92,246,0.18) 0%, transparent 34%),
    radial-gradient(ellipse at 86% 68%, rgba(0,173,239,0.18) 0%, transparent 42%),
    radial-gradient(ellipse at 52% 18%, rgba(155,133,212,0.28) 0%, transparent 44%),
    linear-gradient(160deg, var(--wave-blue-3) 0%, var(--wave-blue) 58%, var(--wave-blue-2) 100%) !important;
  color: white;
}

.px-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.52) 0.8px, transparent 0.9px),
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px, 72px 72px, 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
}

.px-cta::after {
  content: none;
}

.px-cta > .container {
  position: relative;
  z-index: 2;
}

.px-cta .u-22,
.px-cta .u-24 {
  color: white;
}

.px-cta .u-23 {
  color: var(--green-light);
}

.px-cta .btn-outline {
  color: white;
  border-color: rgba(255,255,255,0.72);
}

.px-cta .btn-outline:hover {
  background: rgba(255,255,255,0.14);
}

.home-blue-band {
  padding-top: 72px;
  padding-bottom: 96px;
}

.px-cta .px-leaves {
  inset: 0;
  z-index: 1;
  opacity: 1;
}

.px-cta .px-leaves::before,
.px-cta .px-leaves::after {
  filter: drop-shadow(0 18px 32px rgba(18, 9, 48, 0.22));
  opacity: 0.44;
}

.px-cta .px-leaves::before {
  width: 420px;
  height: 420px;
  top: 2%;
  left: -122px;
  border-radius: 0;
  background:
    radial-gradient(ellipse 34px 74px at 42% 19%, rgba(221,214,254,0.48) 0 56%, transparent 58%),
    radial-gradient(ellipse 30px 68px at 56% 29%, rgba(196,181,253,0.42) 0 56%, transparent 58%),
    radial-gradient(ellipse 40px 84px at 38% 44%, rgba(139,92,246,0.38) 0 56%, transparent 58%),
    radial-gradient(ellipse 32px 72px at 60% 58%, rgba(221,214,254,0.34) 0 56%, transparent 58%),
    radial-gradient(ellipse 26px 58px at 46% 72%, rgba(196,181,253,0.28) 0 56%, transparent 58%),
    linear-gradient(70deg, transparent 0 48%, rgba(232,245,204,0.56) 48.6% 51.4%, transparent 52% 100%);
  transform: rotate(-33deg);
}

.px-cta .px-leaves::after {
  width: 390px;
  height: 390px;
  right: -118px;
  bottom: -54px;
  border-radius: 0;
  background:
    radial-gradient(ellipse 30px 66px at 40% 22%, rgba(251,176,64,0.24) 0 56%, transparent 58%),
    radial-gradient(ellipse 38px 78px at 56% 34%, rgba(221,214,254,0.42) 0 56%, transparent 58%),
    radial-gradient(ellipse 32px 72px at 42% 54%, rgba(196,181,253,0.34) 0 56%, transparent 58%),
    radial-gradient(ellipse 28px 62px at 64% 68%, rgba(139,92,246,0.30) 0 56%, transparent 58%),
    radial-gradient(ellipse 24px 54px at 50% 80%, rgba(221,214,254,0.25) 0 56%, transparent 58%),
    linear-gradient(112deg, transparent 0 48%, rgba(232,245,204,0.48) 48.6% 51.4%, transparent 52% 100%);
  transform: rotate(29deg);
}

@media (max-width: 640px) {
  .home-flow-section::before {
    background-size: 34px 34px;
  }

  .organic-blob {
    opacity: 0.26;
    filter: blur(18px);
  }

  .blob-leaf-a,
  .blob-leaf-b,
  .blob-blue-a,
  .blob-blue-b {
    width: 72vw;
    height: 38vw;
  }
}

/* ========================================================
   OUR IMPACT — Infinity Ribbon Redesign
   ======================================================== */
.impact-bg-v2{
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(139,92,246,0.10), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(0,173,239,0.10), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(251,176,64,0.06), transparent 50%),
    linear-gradient(180deg, #150a30 0%, #0d0620 55%, #0a0518 100%);
  padding: 90px 0 110px;
  overflow: hidden;
}
.impact-header-v2 .section-label{
  display:inline-block;
  color:#C4B5FD;
  font-family: var(--font-body);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:14px;
  opacity:.85;
}
.impact-header-v2 .section-title{
  font-family: var(--font-display);
  color:#fff;
  font-size:clamp(1.8rem, 3.4vw, 2.7rem);
  margin:0 0 14px;
}
.impact-header-v2 .section-title em{
  font-style:italic;
  background:linear-gradient(90deg,#8B5CF6,#00ADEF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.impact-header-v2 .section-sub{
  color:#c8c2e0;
  font-family: var(--font-body);
  max-width:520px;
  margin:0 auto;
  font-size:.98rem;
}

.impact-flow{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:60px auto 0;
  aspect-ratio: 1200 / 460;
}
.infinity-track{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.track-glow{ opacity:.55; }
.track-dash{
  opacity:.9;
  animation: dashFlow 6s linear infinite;
}
@keyframes dashFlow{
  to{ stroke-dashoffset: -320; }
}

.impact-pod{
  position:absolute;
  width: 230px;
  padding: 26px 20px 22px;
  border-radius: 20px;
  text-align:center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 8px 30px rgba(0,0,0,0.35),
    0 0 24px color-mix(in srgb, var(--pod-color) 35%, transparent);
  transform: translate(-50%, -50%);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  animation: podFloat 6s ease-in-out infinite;
}
.impact-pod:hover{
  transform: translate(-50%, -50%) scale(1.07);
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 10px 34px rgba(0,0,0,0.4),
    0 0 46px color-mix(in srgb, var(--pod-color) 60%, transparent);
  animation-play-state: paused;
}
.pod-1{ left:23%; top:22%; animation-delay:0s; }
.pod-2{ left:23%; top:78%; animation-delay:1.4s; }
.pod-3{ left:77%; top:22%; animation-delay:.7s; }
.pod-4{ left:77%; top:78%; animation-delay:2.1s; }

@keyframes podFloat{
  0%, 100%{ transform: translate(-50%, -50%) translateY(0); }
  50%{ transform: translate(-50%, -50%) translateY(-10px); }
}

.pod-glow{
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pod-color) 45%, transparent) 0%, transparent 70%);
  filter: blur(18px);
  z-index:0;
  pointer-events:none;
}
.pod-icon-frame{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:70px;
  height:64px;
  margin:0 auto 14px;
  color: var(--pod-color);
  background: rgba(255,255,255,0.04);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  border: 1px solid color-mix(in srgb, var(--pod-color) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pod-color) 45%, transparent) inset;
}
.pod-icon{
  width:42px;
  height:42px;
  filter: drop-shadow(0 0 6px currentColor);
}
.pod-number{
  position:relative;
  z-index:1;
  font-family: var(--font-display);
  font-weight:600;
  font-size:2.1rem;
  color:#fff;
  text-shadow: 0 0 14px var(--pod-color), 0 0 30px color-mix(in srgb, var(--pod-color) 60%, transparent);
  line-height:1;
}
.pod-unit{
  font-size:1rem;
  font-weight:500;
  margin-left:4px;
  opacity:.85;
}
.pod-label{
  position:relative;
  z-index:1;
  margin-top:8px;
  font-family: var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#d8d4ec;
}

@media (prefers-reduced-motion: reduce){
  .impact-pod, .track-dash{ animation:none; }
}

/* ---- Mobile: vertical flow ---- */
@media (max-width: 860px){
  .impact-flow{
    aspect-ratio:auto;
    max-width:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:36px;
    padding:20px 0;
  }
  .infinity-track{ display:none; }
  .impact-flow::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,#8B5CF6,#00ADEF,#FBB040,#9b85d4);
    opacity:.5;
    filter: blur(0.3px);
  }
  .impact-pod{
    position:relative;
    left:auto !important; top:auto !important;
    transform:none !important;
    width:100%;
    max-width:280px;
    animation: podFloatMobile 6s ease-in-out infinite;
  }
  .impact-pod:hover{ transform: scale(1.04) !important; }
  @keyframes podFloatMobile{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
}

/* ========================================================
   WHO CAN PARTNER WITH US — Circular Ecosystem Redesign
   ======================================================== */
.partners-bg-v2{
  position:relative;
  background:
    radial-gradient(circle at 12% 15%, rgba(139,92,246,0.10), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(0,173,239,0.10), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(155,133,212,0.10), transparent 50%),
    linear-gradient(160deg, #0e2e24 0%, #0d1a33 45%, #170a30 100%);
  padding: 100px 0 90px;
  overflow: hidden;
}
.partners-header-v2 .section-label{
  display:inline-block;
  color:#C4B5FD;
  font-family: var(--font-body);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:14px;
  opacity:.85;
}
.partners-header-v2 .section-title{
  font-family: var(--font-display);
  color:#fff;
  font-size:clamp(1.8rem, 3.4vw, 2.7rem);
  margin:0 0 14px;
}
.partners-header-v2 .section-title em{
  font-style:italic;
  background:linear-gradient(90deg,#8B5CF6,#00ADEF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.partners-header-v2 .section-sub{
  color:#c8c2e0;
  font-family: var(--font-body);
  max-width:560px;
  margin:0 auto;
  font-size:.98rem;
}

.partners-ecosystem{
  position:relative;
  width:100%;
  max-width:1180px;
  margin:70px auto 0;
  aspect-ratio: 1000 / 700;
}
.ecosystem-track{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.track-glow{ opacity:.5; }
.track-dash{
  opacity:.9;
  animation: ecoDashFlow 8s linear infinite;
}
@keyframes ecoDashFlow{
  to{ stroke-dashoffset: -360; }
}

.eco-core{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:130px; height:130px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:2;
  animation: ecoPulse 4.5s ease-in-out infinite;
}
.eco-core-glow{
  position:absolute;
  inset:-30%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, rgba(0,173,239,0.18) 45%, transparent 72%);
  filter: blur(20px);
  z-index:0;
}
.eco-core-icon{
  position:relative;
  z-index:1;
  width:76px; height:76px;
  filter: drop-shadow(0 0 10px rgba(139,92,246,0.65));
}
.eco-core-label{
  position:relative;
  z-index:1;
  margin-top:6px;
  font-family: var(--font-body);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:#dfe8f5;
  opacity:.8;
  line-height:1.3;
}
@keyframes ecoPulse{
  0%, 100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.06); }
}

.partner-pod{
  position:absolute;
  width: 230px;
  padding: 22px 18px 20px;
  border-radius: 18px;
  text-align:center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 8px 30px rgba(0,0,0,0.35),
    0 0 22px color-mix(in srgb, var(--pod-color) 32%, transparent);
  transform: translate(-50%, -50%);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  animation: podBreathe 5.5s ease-in-out infinite;
  z-index:1;
}
.partner-pod:hover{
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 10px 34px rgba(0,0,0,0.4),
    0 0 42px color-mix(in srgb, var(--pod-color) 58%, transparent);
  animation-play-state: paused;
  z-index:3;
}
.ppos-1{ left:50%;   top:12%; animation-delay:0s; }
.ppos-2{ left:86.4%; top:31%; animation-delay:.8s; }
.ppos-3{ left:86.4%; top:69%; animation-delay:1.6s; }
.ppos-4{ left:50%;   top:88%; animation-delay:2.4s; }
.ppos-5{ left:13.6%; top:69%; animation-delay:3.2s; }
.ppos-6{ left:13.6%; top:31%; animation-delay:4s; }

@keyframes podBreathe{
  0%, 100%{ transform: translate(-50%, -50%) translateY(0) scale(1); }
  50%{ transform: translate(-50%, -50%) translateY(-8px) scale(1.015); }
}

.pod-glow{
  position:absolute;
  inset:-20%;
  border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pod-color) 42%, transparent) 0%, transparent 70%);
  filter: blur(18px);
  z-index:0;
  pointer-events:none;
}
.partner-pod .pod-icon-frame{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:74px;
  margin:0 auto 12px;
  color: var(--pod-color);
  background: rgba(255,255,255,0.04);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  border: 1px solid color-mix(in srgb, var(--pod-color) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pod-color) 45%, transparent) inset;
}
.partner-pod .pod-icon{
  width:48px;
  height:48px;
  filter: drop-shadow(0 0 6px currentColor);
}
.pod-title{
  position:relative;
  z-index:1;
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.02rem;
  color:#fff;
  margin:0 0 6px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--pod-color) 55%, transparent);
}
.pod-desc{
  position:relative;
  z-index:1;
  font-family: var(--font-body);
  font-size:.8rem;
  line-height:1.45;
  color:#d8d4ec;
  margin:0;
}

.eco-cta-wrap{ margin-top:56px; }
.eco-cta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-weight:600;
  font-size:1rem;
  color:#0d1a10;
  background: linear-gradient(90deg, #8B5CF6, #33c0f2);
  padding:16px 34px;
  border-radius:999px;
  box-shadow: 0 0 24px rgba(139,92,246,0.45), 0 0 24px rgba(0,173,239,0.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.eco-cta-pill:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 36px rgba(139,92,246,0.65), 0 0 40px rgba(0,173,239,0.4);
}
.eco-cta-arrow{
  transition: transform .3s ease;
}
.eco-cta-pill:hover .eco-cta-arrow{
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce){
  .partner-pod, .track-dash, .eco-core{ animation:none; }
}

/* ---- Mobile: vertical timeline ---- */
@media (max-width: 900px){
  .partners-ecosystem{
    aspect-ratio:auto;
    max-width:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    padding:10px 0 20px;
  }
  .ecosystem-track{ display:none; }
  .eco-core{
    position:relative;
    left:auto; top:auto;
    transform:none;
    margin-bottom:6px;
    animation: ecoPulseMobile 4.5s ease-in-out infinite;
  }
  @keyframes ecoPulseMobile{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
  }
  .partners-ecosystem::before{
    content:"";
    position:absolute;
    top:150px; bottom:0; left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,#00ADEF,#FBB040,#9b85d4,#8B5CF6,#33c0f2,#C4B5FD);
    opacity:.45;
  }
  .partner-pod{
    position:relative;
    left:auto !important; top:auto !important;
    transform:none !important;
    width:100%;
    max-width:290px;
    animation: podBreatheMobile 5.5s ease-in-out infinite;
  }
  .partner-pod:hover{ transform: scale(1.03) !important; }
  @keyframes podBreatheMobile{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
}

/* ============================================================
   ACTS FOR CHANGE — "About Us" Redesign
   Scoped under .afc2 so it never collides with the rest of the site.
   Design system:
     Primary   → Rich Emerald Green  #3B1D6B
     Secondary → Deep Ocean Teal     #0A58CA
     Accent    → Warm Orange / Gold  #FD7E14
   ============================================================ */

.afc2 {
  --afc2-emerald:        #3B1D6B;
  --afc2-emerald-dark:   #2A1550;
  --afc2-emerald-light:  #F0EBFB;
  --afc2-teal:           #0A58CA;
  --afc2-teal-light:     #E8F1FC;
  --afc2-gold:           #FD7E14;
  --afc2-gold-light:     #FFF1E4;
  --afc2-ink:            #12211A;
  --afc2-gray:           #5C5566;
  --afc2-gray-light:     #F6F8F7;
  --afc2-border:         #ECE6F5;
  --afc2-radius:         20px;
  --afc2-shadow:         0 8px 30px rgba(59, 29, 107, 0.08);
  --afc2-shadow-hover:   0 14px 40px rgba(59, 29, 107, 0.14);
  --afc2-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--afc2-font);
  color: var(--afc2-ink);
  background: #ffffff;
  overflow: hidden;
}

.afc2 * { box-sizing: border-box; }
.afc2 img { max-width: 100%; display: block; }
.afc2 p { line-height: 1.7; }

.afc2-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* ---------- Shared numbered section heading ---------- */
.afc2-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--afc2-emerald);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.afc2-h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--afc2-ink);
  margin-bottom: 0.35rem;
}

/* ============================================================
   1. HERO
   ============================================================ */
.afc2-hero {
  margin-top: 68px;
  padding: 3.5rem 0 0;
  background: linear-gradient(180deg, #FBFDFC 0%, #ffffff 100%);
}

.afc2-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 3.5rem;
}

.afc2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--afc2-emerald-light);
  color: var(--afc2-emerald);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
}

.afc2-hero-title {
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--afc2-ink);
  margin-bottom: 1.25rem;
}

.afc2-hero-title span {
  color: var(--afc2-emerald);
}

.afc2-hero-sub {
  font-size: 1.05rem;
  color: var(--afc2-gray);
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.afc2-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.afc2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.afc2-btn-primary {
  background: #16A34A;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.28);
}
.afc2-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22, 163, 74, 0.36); }

.afc2-btn-ghost {
  background: #fff;
  color: var(--afc2-emerald);
  border: 1.5px solid var(--afc2-border);
}
.afc2-btn-ghost:hover { border-color: var(--afc2-emerald); transform: translateY(-2px); }

.afc2-hero-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--afc2-shadow-hover);
  aspect-ratio: 4 / 3.1;
}

.afc2-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afc2-hero-media-tag {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--afc2-emerald-dark);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- Mission banner ---------- */
.afc2-mission-banner {
  background: linear-gradient(90deg, var(--afc2-emerald-dark) 0%, var(--afc2-emerald) 100%);
  color: #fff;
  padding: 1.15rem 0;
}

.afc2-mission-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
  text-align: center;
}

.afc2-mission-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.afc2-mission-sub {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.afc2-mission-sub b { color: #fff; }

/* ============================================================
   2. WHAT IS ACTS FOR CHANGE
   ============================================================ */
.afc2-what {
  background: var(--afc2-gray-light);
  padding: 4.5rem 0;
}

.afc2-what-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: start;
}

.afc2-what-text {
  color: var(--afc2-gray);
  margin: 1rem 0;
}

.afc2-infographic {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--afc2-border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-top: 1.5rem;
}

.afc2-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  text-align: center;
}

.afc2-info-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--afc2-teal-light);
}

.afc2-info-icon.gold { background: var(--afc2-gold-light); }

.afc2-info-item span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--afc2-ink);
}

.afc2-info-arrow {
  color: var(--afc2-gold);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* Pilot card (right column) */
.afc2-pilot-card {
  background: #fff;
  border-radius: var(--afc2-radius);
  box-shadow: var(--afc2-shadow);
  padding: 1.75rem;
  border: 1px solid var(--afc2-border);
}

.afc2-pilot-block + .afc2-pilot-block {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--afc2-border);
}

.afc2-pilot-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--afc2-emerald);
  margin-bottom: 0.7rem;
}

.afc2-pilot-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.afc2-pilot-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--afc2-gray);
}

.afc2-pilot-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--afc2-gold);
  flex-shrink: 0;
}

.afc2-ph-map {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* ============================================================
   3. KEY PILLARS
   ============================================================ */
.afc2-pillars {
  padding: 4.5rem 0;
}

.afc2-section-head {
  margin-bottom: 2.25rem;
}

.afc2-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.afc2-pillar-card {
  background: #fff;
  border: 1px solid var(--afc2-border);
  border-radius: 18px;
  box-shadow: var(--afc2-shadow);
  padding: 1.9rem 1.5rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.afc2-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--afc2-shadow-hover);
}

.afc2-pillar-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 1.1rem;
  color: #fff;
}

.afc2-pillar-card:nth-child(1) .afc2-pillar-icon { background: var(--afc2-emerald); }
.afc2-pillar-card:nth-child(2) .afc2-pillar-icon { background: var(--afc2-teal); }
.afc2-pillar-card:nth-child(3) .afc2-pillar-icon { background: var(--afc2-gold); }
.afc2-pillar-card:nth-child(4) .afc2-pillar-icon { background: var(--afc2-emerald-dark); }

.afc2-pillar-card h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.afc2-pillar-card p {
  font-size: 0.88rem;
  color: var(--afc2-gray);
  line-height: 1.6;
}

/* ============================================================
   4. THE CIRCULAR FLOW
   ============================================================ */
.afc2-flow-section {
  background: var(--afc2-emerald-light);
  padding: 4.5rem 0;
}

.afc2-flow-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3rem;
}

.afc2-flow-head .afc2-h2 { justify-content: center; }

.afc2-flow-sub {
  color: var(--afc2-gray);
  font-size: 0.98rem;
  margin-top: 0.5rem;
}

.afc2-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.afc2-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 130px;
  text-align: center;
}

.afc2-flow-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--afc2-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: var(--afc2-shadow);
}

.afc2-flow-step:nth-child(odd) .afc2-flow-circle { border-color: var(--afc2-teal); }
.afc2-flow-step:last-child .afc2-flow-circle { border-color: var(--afc2-gold); background: var(--afc2-gold); }

.afc2-flow-step p {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--afc2-ink);
}

.afc2-flow-arrow {
  color: var(--afc2-gold);
  font-size: 1.2rem;
  align-self: center;
  margin-top: 30px;
  flex-shrink: 0;
}

/* ============================================================
   5. WHY IT MATTERS
   ============================================================ */
.afc2-why {
  padding: 4.5rem 0 5.5rem;
}

.afc2-why-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.75rem;
  align-items: stretch;
}

.afc2-epr-box {
  background: linear-gradient(160deg, var(--afc2-emerald) 0%, var(--afc2-emerald-dark) 100%);
  color: #fff;
  border-radius: var(--afc2-radius);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.afc2-epr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  width: fit-content;
  margin-bottom: 1.1rem;
}

.afc2-epr-box h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  line-height: 1.35;
}

.afc2-epr-box p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.94rem;
}

.afc2-why-card {
  background: #fff;
  border: 1px solid var(--afc2-border);
  border-radius: var(--afc2-radius);
  box-shadow: var(--afc2-shadow);
  padding: 2.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
}

.afc2-why-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.afc2-why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.afc2-why-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--afc2-gray);
  align-items: flex-start;
}

.afc2-why-list li i {
  color: var(--afc2-emerald);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.afc2-why-img {
  width: 118px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--afc2-shadow);
}

.afc2-why-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .afc2-hero-grid { grid-template-columns: 1fr; }
  .afc2-hero-media { order: -1; aspect-ratio: 16/9; }
  .afc2-what-grid { grid-template-columns: 1fr; }
  .afc2-pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .afc2-flow { flex-wrap: wrap; }
  .afc2-flow-arrow { display: none; }
  .afc2-flow-step { width: 90px; }
  .afc2-why-grid { grid-template-columns: 1fr; }
  .afc2-why-card { grid-template-columns: 1fr; }
  .afc2-why-img { width: 100%; height: 160px; }
}

@media (max-width: 640px) {
  .afc2-hero { padding-top: 3.5rem; }
  .afc2-hero-grid { gap: 2rem; padding-bottom: 2.5rem; }
  .afc2-pillar-grid { grid-template-columns: 1fr; }
  .afc2-infographic { flex-direction: column; }
  .afc2-info-arrow { transform: rotate(90deg); }
  .afc2-mission-title { font-size: 0.9rem; }
  .afc2-mission-sub { font-size: 0.8rem; }
  .afc2-flow-step { width: 45%; }
}


/* ============================================================
   ACTS FOR CHANGE — "Our Programs" + "Our Expansion" Redesign
   Scoped under .afc3 so it never collides with the rest of the site.
   Design system:
     Header text → Dark Green #3B1D6B + Accent Orange #FD7E14
     CTA colors  → Blue / Gold / Orange (per program), Emerald (main CTA)
   ============================================================ */

.afc3 {
  --afc3-emerald:        #3B1D6B;
  --afc3-emerald-dark:   #2A1550;
  --afc3-emerald-light:  #F0EBFB;
  --afc3-orange:         #16A34A;
  --afc3-orange-light:   #DCFCE7;
  --afc3-blue:           #0A58CA;
  --afc3-blue-light:     #E8F1FC;
  --afc3-gold:           #F4B400;
  --afc3-gold-light:     #FFF7E0;
  --afc3-ink:            #1B2A22;
  --afc3-gray:           #5C5566;
  --afc3-gray-light:     #F6F8F7;
  --afc3-border:         #ECE6F5;
  --afc3-radius:         20px;
  --afc3-shadow:         0 8px 30px rgba(59, 29, 107, 0.08);
  --afc3-shadow-hover:   0 14px 40px rgba(59, 29, 107, 0.16);
  --afc3-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--afc3-font);
  color: var(--afc3-ink);
  background: #ffffff;
}

.afc3 * { box-sizing: border-box; }
.afc3 img { max-width: 100%; display: block; }
.afc3 p { line-height: 1.7; }

.afc3-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.afc3-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2.75rem;
}

.afc3-title {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--afc3-emerald);
  margin-bottom: 0.5rem;
}

.afc3-title span { color: var(--afc3-orange); }

.afc3-title-sub {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--afc3-ink);
  margin-bottom: 0.6rem;
}

.afc3-sub {
  color: var(--afc3-gray);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ============================================================
   SECTION 1: OUR PROGRAMS
   ============================================================ */
.afc3-programs {
  margin-top: 68px;
  padding: 3.5rem 0 4.5rem;
}

.afc3-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.afc3-program-card {
  background: #fff;
  border: 1px solid var(--afc3-border);
  border-radius: var(--afc3-radius);
  box-shadow: var(--afc3-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.afc3-program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--afc3-shadow-hover);
}

.afc3-program-media {
  height: 170px;
  overflow: hidden;
}

.afc3-program-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afc3-program-body {
  padding: 1.6rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.afc3-program-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--afc3-ink);
  margin-bottom: 0.6rem;
}

.afc3-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  margin-bottom: 0.85rem;
}

.afc3-tag-blue   { background: var(--afc3-blue-light);   color: var(--afc3-blue); }
.afc3-tag-gold   { background: var(--afc3-gold-light);   color: #9c7300; }
.afc3-tag-orange { background: var(--afc3-orange-light); color: var(--afc3-orange); }

.afc3-program-lead {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--afc3-ink);
  margin-bottom: 0.9rem;
}

.afc3-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.afc3-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.87rem;
  color: var(--afc3-gray);
}

.afc3-check-list li i {
  color: var(--afc3-emerald);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.afc3-program-desc {
  font-size: 0.87rem;
  color: var(--afc3-gray);
  padding-top: 0.9rem;
  margin-top: auto;
  margin-bottom: 1.3rem;
  border-top: 1px dashed var(--afc3-border);
}

.afc3-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.afc3-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.afc3-btn-blue    { background: var(--afc3-blue);    box-shadow: 0 8px 20px rgba(10, 88, 202, 0.28); }
.afc3-btn-gold    { background: var(--afc3-gold);    color: #3a2a00; box-shadow: 0 8px 20px rgba(244, 180, 0, 0.3); }
.afc3-btn-orange  { background: var(--afc3-orange);  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3); }
.afc3-btn-emerald { background: var(--afc3-emerald); box-shadow: 0 8px 20px rgba(59, 29, 107, 0.28); }

/* ============================================================
   SECTION 2: OUR EXPANSION & ROADMAP
   ============================================================ */
.afc3-expansion {
  background: linear-gradient(135deg, #150a30 0%, #241249 45%, #1b1440 100%);
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.afc3-expansion .afc3-section-head {
  text-align: left;
  max-width: 900px;
  margin: 0 0 0.25rem;
}

.afc3-expansion .afc3-title {
  color: #ffffff;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.afc3-expansion .afc3-title span { color: #34D399; }
.afc3-expansion .afc3-title-sub,
.afc3-expansion .afc3-sub { color: rgba(255,255,255,0.65); font-weight: 500; }

.afc3-expansion-grid-v2 {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  gap: 1.75rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* Left: vertical timeline */
.afc3-timeline-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 30px;
}

.afc3-timeline-v2::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(139,92,246,0.6), rgba(139,92,246,0.15));
}

.afc3-tl-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(10,4,30,0.4);
  padding: 1.1rem 1.3rem 1.3rem;
}

.afc3-tl-card::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 1.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8B5CF6;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.25);
}

.afc3-tl-card h3 {
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--afc3-ink);
}

.afc3-tl-card p {
  font-size: 0.78rem;
  color: var(--afc3-gray);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

/* Right: glowing map */
.afc3-map-v2 {
  position: relative;
  min-height: 620px;
  max-height: 780px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(120% 100% at 30% 20%, rgba(124,179,5,0.10) 0%, rgba(124,179,5,0) 55%),
              linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 1.5rem;
}

.afc3-map-glow {
  position: absolute;
  top: 46%;
  left: 62%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(124,179,5,0.24) 0%, rgba(124,179,5,0.06) 45%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: afc3GlowBreathe 4s ease-in-out infinite;
}

@keyframes afc3GlowBreathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.afc3-map-img-v2 {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-height: 680px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(124,179,5,0.22)) drop-shadow(0 0 46px rgba(139,92,246,0.28)) brightness(0) invert(1);
  opacity: 0.96;
}

.afc3-map-lines {
  position: absolute;
  inset: 1.5rem;
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
  z-index: 1;
  pointer-events: none;
}

.afc3-route {
  fill: none;
  stroke: rgba(124,179,5,0.55);
  stroke-width: 0.35;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
  animation: afc3RouteFlow 1.6s linear infinite;
}

@keyframes afc3RouteFlow {
  to { stroke-dashoffset: -4; }
}

.afc3-map-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.afc3-pin {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.85);
}

.afc3-pin i {
  transform: rotate(45deg);
  font-size: 0.62rem;
  color: #fff;
}

.afc3-pin-active {
  background: var(--afc3-orange);
  box-shadow: 0 0 0 5px rgba(124,179,5,0.22), 0 0 20px 6px rgba(124,179,5,0.45), 0 4px 10px rgba(0,0,0,0.35);
  animation: afc3PulseGlow 2.2s ease-in-out infinite;
}

.afc3-pin-next {
  background: var(--afc3-gold);
  box-shadow: 0 0 0 4px rgba(244,180,0,0.2), 0 0 16px 4px rgba(244,180,0,0.35), 0 4px 10px rgba(0,0,0,0.35);
}

.afc3-pin-soon,
.afc3-pin-future {
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.85);
  border: 2px solid rgba(124,179,5,0.5);
}

.afc3-pin-future { opacity: 0.75; }

.afc3-pin-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1B0F35;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.28);
}

.afc3-pin-label em {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--afc3-gray);
  margin-top: 1px;
}

.is-active .afc3-pin-label em { color: var(--afc3-orange); }
.is-next   .afc3-pin-label em { color: #B8860B; }

@keyframes afc3PulseGlow {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50%      { transform: rotate(-45deg) scale(1.12); }
}

.afc3-map-legend {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  z-index: 3;
  display: flex;
  gap: 1rem;
  background: rgba(21,10,48,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.85rem;
  border-radius: 100px;
}

.afc3-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.02em;
}

.afc3-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.afc3-legend-active  { background: var(--afc3-orange); box-shadow: 0 0 8px 2px rgba(124,179,5,0.5); }
.afc3-legend-next    { background: var(--afc3-gold); box-shadow: 0 0 8px 2px rgba(244,180,0,0.4); }
.afc3-legend-planned { background: rgba(255,255,255,0.6); }

@media (max-width: 992px) {
  .afc3-expansion-grid-v2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .afc3-map-v2 { min-height: 380px; max-height: 440px; order: -1; justify-content: center; }
  .afc3-map-img-v2 { max-height: 380px; }
  .afc3-map-legend { left: 50%; transform: translateX(-50%); }
}

.afc3-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
}

.afc3-status-active    { background: #EDE7FE; color: #6D28D9; }
.afc3-status-expanding { background: var(--afc3-blue-light); color: var(--afc3-blue); }
.afc3-status-planned   { background: #EEF2F1; color: var(--afc3-gray); }

.afc3-phase {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--afc3-gray);
  opacity: 0.55;
}

/* ============================================================
   SECTION 3: CTA BANNER
   ============================================================ */
.afc3-cta-section {
  padding: 4.5rem 0 5.5rem;
}

.afc3-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: #fff;
  border: 1px solid var(--afc3-border);
  border-radius: var(--afc3-radius);
  box-shadow: var(--afc3-shadow);
  padding: 2.2rem 2.5rem;
}

.afc3-cta-text h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--afc3-ink);
}

.afc3-cta-text p {
  font-size: 0.9rem;
  color: var(--afc3-gray);
  max-width: 62ch;
}

.afc3-cta-banner .afc3-btn {
  width: auto;
  white-space: nowrap;
  padding: 0.9rem 1.8rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .afc3-program-grid { grid-template-columns: 1fr; }
  .afc3-cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .afc3-cta-banner .afc3-btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .afc3-programs { padding: 3.5rem 0 3rem; }
  .afc3-expansion { padding: 3.5rem 0 4rem; }
  .afc3-cta-banner { padding: 1.75rem; }
}


/* ============================================================
   ACTS FOR CHANGE — "For Brand Partners" Redesign
   Scoped under .afc4 so it never collides with the rest of the site.
   Design system: Deep Emerald #3B1D6B, Slate Grays, Orange accent.
   ============================================================ */

.afc4 {
  --afc4-emerald:        #3B1D6B;
  --afc4-emerald-dark:   #0A3D26;
  --afc4-emerald-light:  #F0EBFB;
  --afc4-orange:         #FD7E14;
  --afc4-orange-light:   #FFF1E4;
  --afc4-slate:          #475569;
  --afc4-slate-light:    #F1F5F4;
  --afc4-ink:            #16241D;
  --afc4-gray:           #5C5566;
  --afc4-border:         #ECE6F5;
  --afc4-radius:         18px;
  --afc4-shadow:         0 8px 26px rgba(59, 29, 107, 0.08);
  --afc4-shadow-hover:   0 14px 36px rgba(59, 29, 107, 0.14);
  --afc4-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--afc4-font);
  color: var(--afc4-ink);
  background: #ffffff;
}

.afc4 * { box-sizing: border-box; }
.afc4 img { max-width: 100%; display: block; }
.afc4 p { line-height: 1.65; }

.afc4-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.afc4-brands { margin-top: 68px; padding: 3.5rem 0 5rem; }

/* ---------- Top grid: hero (left) + cards (right) ---------- */
.afc4-top-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 2.75rem;
  align-items: start;
}

.afc4-logo-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.afc4-logo-row img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.afc4-logo-row span {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--afc4-emerald);
}

.afc4-hero-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--afc4-ink);
  margin-bottom: 0.9rem;
}

.afc4-hero-sub {
  color: var(--afc4-gray);
  font-size: 0.98rem;
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

/* Feature media with overlay card */
.afc4-media {
  position: relative;
  border-radius: var(--afc4-radius);
  overflow: hidden;
  box-shadow: var(--afc4-shadow);
  aspect-ratio: 16 / 11;
}

.afc4-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afc4-media-overlay {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 0.95rem 1.1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.afc4-overlay-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--afc4-ink);
  margin-bottom: 0.7rem;
}

.afc4-overlay-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.afc4-overlay-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  flex: 1;
}

.afc4-overlay-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--afc4-emerald-light);
  color: var(--afc4-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.afc4-overlay-step span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--afc4-gray);
  line-height: 1.25;
}

.afc4-overlay-arrow {
  color: var(--afc4-orange);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: -14px;
}

/* ---------- Right: 6-card grid ---------- */
.afc4-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.afc4-card {
  background: #fff;
  border: 1px solid var(--afc4-border);
  border-radius: 16px;
  box-shadow: var(--afc4-shadow);
  padding: 1.5rem 1.35rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.afc4-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--afc4-shadow-hover);
}

.afc4-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--afc4-emerald-light);
  color: var(--afc4-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.afc4-card h3 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--afc4-ink);
  margin-bottom: 0.5rem;
}

.afc4-card p {
  font-size: 0.83rem;
  color: var(--afc4-gray);
  line-height: 1.6;
}

/* ---------- CTA banner ---------- */
.afc4-cta-banner {
  margin-top: 3rem;
  background: linear-gradient(120deg, var(--afc4-emerald) 0%, var(--afc4-emerald-dark) 100%);
  border-radius: var(--afc4-radius);
  padding: 2.3rem 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: #fff;
  box-shadow: var(--afc4-shadow-hover);
}

.afc4-cta-text h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.afc4-cta-text p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.86);
  max-width: 68ch;
}

.afc4-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: var(--afc4-emerald);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.9rem 1.7rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.afc4-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .afc4-top-grid { grid-template-columns: 1fr; }
  .afc4-card-grid { grid-template-columns: repeat(2, 1fr); }
  .afc4-cta-banner { flex-direction: column; align-items: flex-start; }
  .afc4-cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .afc4-card-grid { grid-template-columns: 1fr; }
  .afc4-overlay-step span { display: none; }
  .afc4-media-overlay { padding: 0.75rem 0.85rem 0.9rem; }
  .afc4-brands { padding: 2.5rem 0 3.5rem; }
  .afc4-cta-banner { padding: 1.75rem; }
}


/* ============================================================
   ACTS FOR CHANGE — "For Community Partners / Hub Partners" Redesign
   Scoped under .afc5 so it never collides with the rest of the site.
   Design system: Deep Emerald #3B1D6B, Slate Grays, white cards.
   ============================================================ */

.afc5 {
  --afc5-emerald:        #3B1D6B;
  --afc5-emerald-dark:   #0A3D26;
  --afc5-emerald-light:  #F0EBFB;
  --afc5-ink:            #1B2A22;
  --afc5-gray:           #5C5566;
  --afc5-border:         #ECE6F5;
  --afc5-radius:         18px;
  --afc5-shadow:         0 8px 26px rgba(59, 29, 107, 0.08);
  --afc5-shadow-hover:   0 14px 36px rgba(59, 29, 107, 0.14);
  --afc5-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--afc5-font);
  color: var(--afc5-ink);
  background: #ffffff;
}

.afc5 * { box-sizing: border-box; }
.afc5 img { max-width: 100%; display: block; }
.afc5 p { line-height: 1.65; }

.afc5-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.afc5-hub {
  margin-top: 68px;
  padding: 3.5rem 0 5rem;
}

/* ---------- Top grid: header (left) + media (right) ---------- */
.afc5-top-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2.75rem;
  align-items: center;
  margin-bottom: 3rem;
}

.afc5-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.afc5-badge-row img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.afc5-badge-row span {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--afc5-ink);
}

.afc5-title {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--afc5-ink);
  margin-bottom: 0.9rem;
}

.afc5-sub {
  color: var(--afc5-gray);
  font-size: 0.98rem;
  max-width: 48ch;
}

/* Context media */
.afc5-media {
  position: relative;
  border-radius: var(--afc5-radius);
  overflow: hidden;
  box-shadow: var(--afc5-shadow);
  aspect-ratio: 16 / 10;
}

.afc5-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afc5-media-overlay {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 0.95rem 1.1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.afc5-overlay-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--afc5-ink);
  margin-bottom: 0.7rem;
}

.afc5-overlay-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.afc5-overlay-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  flex: 1;
}

.afc5-overlay-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--afc5-emerald-light);
  color: var(--afc5-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.afc5-overlay-step span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--afc5-gray);
  line-height: 1.25;
}

.afc5-overlay-arrow {
  color: var(--afc5-emerald);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: -14px;
}

/* ---------- 6-card ecosystem grid ---------- */
.afc5-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.75rem;
}

.afc5-card {
  background: #fff;
  border: 1px solid var(--afc5-border);
  border-radius: 16px;
  box-shadow: var(--afc5-shadow);
  padding: 1.75rem 1.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.afc5-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--afc5-shadow-hover);
}

.afc5-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--afc5-emerald-light);
  color: var(--afc5-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.afc5-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--afc5-ink);
  margin-bottom: 0.55rem;
}

.afc5-card p {
  font-size: 0.87rem;
  color: var(--afc5-gray);
  line-height: 1.6;
}

/* ---------- CTA button ---------- */
.afc5-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(120deg, var(--afc5-emerald) 0%, var(--afc5-emerald-dark) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  padding: 1.15rem 1.5rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: var(--afc5-shadow-hover);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.afc5-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(59, 29, 107, 0.24);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .afc5-top-grid { grid-template-columns: 1fr; }
  .afc5-media { order: -1; }
  .afc5-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .afc5-card-grid { grid-template-columns: 1fr; }
  .afc5-overlay-step span { display: none; }
  .afc5-media-overlay { padding: 0.75rem 0.85rem 0.9rem; }
  .afc5-hub { padding: 2.5rem 0 3.5rem; }
  .afc5-cta-btn { font-size: 0.92rem; padding: 1rem 1.2rem; }
}