:root {
  --green: #0B3D2E;
  --green-mid: #145C40;
  --green-light: #1A7A52;
  --green-glow: rgba(26,122,82,.18);
  --green-bg: #EFF7F3;
  --gold: #C8911E;
  --gold-light: #F0C060;
  --gold-warm: #FFD97A;
  --gold-bg: #FDF8EE;
  --red: #BB1A1A;
  --red-ke: #BB1A1A;
  --cream: #F9F5EF;
  --off: #F3EDE3;
  --warm-white: #FDFAF6;
  --white: #FFFFFF;
  --slate: #18231A;
  --text: #18231A;
  --muted: #7A7A6E;
  --border: #E3D9C8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', 'DM Sans', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; }

/* ─── PUBLIC NAV (default: sticky green) ─── */
.topnav {
  background: var(--green);
  padding: 0;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
  transition: background .35s, box-shadow .35s;
}
.topnav .navbar-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: #fff !important;
  font-size: 1.05rem;
  letter-spacing: .02em;
  display: flex; align-items: center; gap: 10px;
}
.nav-coat {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(200,145,30,.4);
}
.topnav .nav-link { color: rgba(255,255,255,.72) !important; font-size: .85rem; font-weight: 500; padding: .45rem .85rem !important; border-radius: 7px; transition: all .2s; }
.topnav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.1); }
.topnav .btn-login { background: var(--gold); color: var(--green) !important; font-weight: 700 !important; border-radius: 8px; padding: .48rem 1.1rem !important; font-size: .82rem !important; box-shadow: 0 3px 12px rgba(200,145,30,.35); transition: all .2s !important; }
.topnav .btn-login:hover { background: var(--gold-light) !important; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(200,145,30,.45) !important; }
.topnav .btn-officer-portal { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff !important; border-radius: 8px !important; font-weight: 600 !important; padding: .45rem 1rem !important; font-size: .82rem !important; display: flex; align-items: center; gap: 5px; }
.topnav .btn-officer-portal:hover { background: rgba(255,255,255,.2); }
.lang-toggle { color: rgba(255,255,255,.6) !important; font-size: .75rem !important; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: .3rem .7rem !important; }

/* ─── LANDING PAGE NAV OVERRIDE (floating, transparent) ─── */
.topnav-landing {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  box-shadow: none;
}
.topnav-landing.scrolled {
  background: rgba(11,61,46,.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 32px rgba(0,0,0,.28);
}
.nav-inner-landing {
  max-width: 1320px; margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
}

/* ─── SECTION TYPOGRAPHY ─── */
.section-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.section-title { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--green); margin-bottom: .5rem; }
.section-sub { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.sec-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.sec-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; color: var(--green); line-height: 1.15; }
.sec-sub { font-size: 1rem; color: var(--muted); line-height: 1.75; max-width: 560px; font-weight: 400; margin-top: .6rem; }

/* ─── PUBLIC FOOTER ─── */
footer {
  background: #061813;
  color: rgba(255,255,255,.45);
  padding: 4rem 0 2rem;
  margin-top: 0;
}
footer h5, .footer-col h4 { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
footer a { color: rgba(255,255,255,.4); text-decoration: none; font-size: .82rem; display: block; margin-bottom: .55rem; transition: color .2s; }
footer a:hover { color: var(--gold-light); }
.footer-brand { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: #fff; font-weight: 800; margin-bottom: .35rem; }
.footer-divider { border-color: rgba(255,255,255,.08); margin: 2rem 0 1.5rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; flex-wrap: wrap; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom a { color: rgba(255,255,255,.3); margin-left: 1.25rem; display: inline; transition: color .2s; }
.footer-bottom a:hover { color: rgba(255,255,255,.6); }
.footer-flags, .f-flag { display: flex; gap: 0; height: 4px; border-radius: 2px; overflow: hidden; margin: 1rem 0; }
.f-flag div:nth-child(1) { flex: 1; background: #006600; }
.f-flag div:nth-child(2) { flex: 1; background: #fff; }
.f-flag div:nth-child(3) { flex: 1; background: #000; }
.f-flag div:nth-child(4) { flex: 1; background: #CC0000; }
.flag-stripe { width: 20px; height: 8px; }
.footer-data-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: .25rem .7rem; font-size: .68rem; color: rgba(255,255,255,.4); }

/* ─── COMMON BADGES ─── */
.project-badge, .p-badge { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 20px; display: inline-block; }
.badge-completed { background: #d4edda; color: #155724; }
.badge-ongoing { background: #cce5ff; color: #004085; }
.badge-stalled { background: #f8d7da; color: #721c24; }
.badge-planned { background: #fff3cd; color: #856404; }

/* ─── PROGRESS BARS ─── */
.prog-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-d2 { transition-delay: .1s !important; }
.fade-up-d3 { transition-delay: .2s !important; }
.fade-up-d4 { transition-delay: .3s !important; }
.fade-up-d5 { transition-delay: .4s !important; }

/* ─── RESPONSIVE ─── */
@media(max-width: 992px) {
  .nav-inner-landing { padding: .85rem 1rem; }
}
@media(max-width: 768px) {
  .topnav-landing .navbar-collapse { background: rgba(11,61,46,.96); border-radius: 12px; margin-top: .5rem; padding: .75rem; }
}