:root {
  --brand-green: #1f7a4d;
  --brand-green-dark: #145c39;
  --brand-amber: #f2a63b;
  --brand-cream: #fbf7ee;
  --brand-charcoal: #22262b;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--brand-charcoal);
  background-color: #fff;
}

h1, h2, h3, h4, h5, .display-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* ---------- Navbar ---------- */
.navbar-brand {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--brand-green-dark) !important;
}
.navbar-brand span.accent { color: var(--brand-amber); }

.navbar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.nav-link {
  font-weight: 500;
}

.btn-brand {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover {
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}
.btn-outline-brand {
  border-color: var(--brand-green);
  color: var(--brand-green);
  font-weight: 600;
}
.btn-outline-brand:hover {
  background-color: var(--brand-green);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(120deg, var(--brand-green-dark) 0%, var(--brand-green) 55%, #2c9e66 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 20%, rgba(242,166,59,0.35), transparent 40%),
                     radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08), transparent 35%);
}
.hero .container { position: relative; z-index: 1; }
.hero-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  display: inline-block;
}
.hero-stat {
  border-left: 3px solid var(--brand-amber);
  padding-left: 1rem;
}

/* ---------- Sections ---------- */
.section-eyebrow {
  color: var(--brand-amber);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.bg-cream { background-color: var(--brand-cream); }

.icon-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(31,122,77,0.1);
  color: var(--brand-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}

.card-program {
  border: none;
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  height: 100%;
}
.card-program:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.team-photo {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-amber));
}

.avatar-fallback {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-amber));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}

.cta-band {
  background: var(--brand-charcoal);
  color: #fff;
  border-radius: 24px;
}

footer.site-footer {
  background: var(--brand-charcoal);
  color: rgba(255,255,255,0.75);
}
footer.site-footer a { color: #fff; text-decoration: none; }
footer.site-footer a:hover { color: var(--brand-amber); }

.status-timeline .step {
  border-left: 3px solid #e2e2e2;
  padding-left: 1rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.status-timeline .step::before {
  content: "";
  position: absolute;
  left: -8px; top: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #e2e2e2;
}
.status-timeline .step.done { border-color: var(--brand-green); }
.status-timeline .step.done::before { background: var(--brand-green); }

/* ---------- Admin ---------- */
.admin-sidebar {
  min-height: 100vh;
  background: var(--brand-charcoal);
  color: rgba(255,255,255,0.85);
}
.admin-sidebar a {
  color: rgba(255,255,255,0.7);
  padding: .55rem 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-size: .93rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.admin-sidebar .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.admin-sidebar .section-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  padding: 0.75rem 1rem 0.25rem;
}
.stat-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.stat-card .stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}