/* ============================================================
   FarmOpt — Public Pages Stylesheet
   Mobile-first, Bootstrap 5.3 compatible
   ============================================================ */

:root {
  --fo-primary:       #1a5c38;
  --fo-primary-dark:  #0d3320;
  --fo-primary-light: #2d8653;
  --fo-accent:        #e76f51;
  --fo-gold:          #f4a261;
  --fo-gold-dark:     #d4813c;
  --fo-green-soft:    #d8f3dc;
  --fo-bg:            #f8fdf6;
  --fo-text:          #1e2d1e;
  --fo-text-muted:    #5a705a;
  --fo-border:        #d0e8d0;
  --fo-white:         #ffffff;
  --fo-card-shadow:   0 2px 20px rgba(26,92,56,.10);
  --fo-radius:        14px;
  --fo-radius-sm:     8px;
  --fo-transition:    .25s ease;
}

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

body.public-page {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fo-bg);
  color: var(--fo-text);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.pub-navbar {
  background: rgba(13, 51, 32, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .75rem 0;
  transition: background var(--fo-transition), box-shadow var(--fo-transition);
  z-index: 1050;
}

.pub-navbar.scrolled {
  background: rgba(13, 51, 32, 1);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.pub-navbar .navbar-brand {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pub-navbar .navbar-brand .logo-leaf {
  font-size: 1.6rem;
  color: #5ede8a;
}

.pub-navbar .navbar-brand .logo-text-accent {
  color: #5ede8a;
}

.pub-navbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: .45rem .75rem !important;
  border-radius: 6px;
  transition: color var(--fo-transition), background var(--fo-transition);
  white-space: nowrap;
}

.pub-navbar .nav-link:hover,
.pub-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.1);
}

/* Support Farmers highlight */
.pub-navbar .nav-link.nav-support {
  background: var(--fo-gold);
  color: #1a1a1a !important;
  font-weight: 700;
  padding: .4rem 1rem !important;
  border-radius: 20px;
}

.pub-navbar .nav-link.nav-support:hover {
  background: var(--fo-gold-dark);
  color: #fff !important;
}

.pub-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.3);
  padding: .3rem .6rem;
}

.pub-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Language Switcher */
.lang-switcher .dropdown-toggle {
  font-size: .82rem;
  padding: .35rem .7rem !important;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: rgba(255,255,255,.9) !important;
}

.lang-switcher .dropdown-menu {
  min-width: 8rem;
  border-radius: var(--fo-radius-sm);
  border: 1px solid var(--fo-border);
  box-shadow: var(--fo-card-shadow);
}

.lang-switcher .dropdown-item.active,
.lang-switcher .dropdown-item:active {
  background: var(--fo-primary);
  color: #fff;
}

/* Auth buttons */
.btn-nav-login {
  border: 1px solid rgba(255,255,255,.4);
  color: #fff !important;
  border-radius: 20px;
  padding: .4rem 1.1rem !important;
  font-size: .88rem;
  transition: all var(--fo-transition);
}

.btn-nav-login:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.8);
}

.btn-nav-register {
  background: var(--fo-primary-light);
  color: #fff !important;
  border-radius: 20px;
  padding: .4rem 1.1rem !important;
  font-size: .88rem;
  font-weight: 600;
  transition: all var(--fo-transition);
}

.btn-nav-register:hover {
  background: var(--fo-primary);
  transform: translateY(-1px);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  min-height: 100svh;
  background:
    linear-gradient(160deg, rgba(13,51,32,.92) 0%, rgba(26,92,56,.80) 50%, rgba(45,134,83,.65) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="%231a5c38"/><circle cx="30" cy="30" r="25" fill="none" stroke="%232d8653" stroke-width="1" opacity=".3"/><path d="M15 45 Q30 10 45 45" fill="none" stroke="%235ede8a" stroke-width="1.5" opacity=".2"/></svg>');
  background-size: cover, 60px 60px;
  background-position: center, center;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 6rem 0 4rem;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(94,222,138,.12) 0%, transparent 60%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(94,222,138,.15);
  border: 1px solid rgba(94,222,138,.3);
  color: #5ede8a;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
  letter-spacing: .3px;
}

.hero-title {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.2rem;
  letter-spacing: -.5px;
}

.hero-title .highlight {
  color: #5ede8a;
}

.hero-desc {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-bottom: 2rem;
}

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

.btn-hero-primary {
  background: var(--fo-primary-light);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  transition: all var(--fo-transition);
  box-shadow: 0 4px 20px rgba(45,134,83,.4);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-hero-primary:hover {
  background: var(--fo-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(45,134,83,.5);
  color: #fff;
}

.btn-hero-secondary {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 600;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  backdrop-filter: blur(4px);
}

.btn-hero-secondary:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-2px);
  color: #fff;
}

.btn-hero-gold {
  background: var(--fo-gold);
  border: none;
  color: #1a1a1a;
  font-weight: 800;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  font-size: 1rem;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 4px 15px rgba(244,162,97,.4);
}

.btn-hero-gold:hover {
  background: var(--fo-gold-dark);
  transform: translateY(-2px);
  color: #fff;
}

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  animation: bounceDown 2s infinite;
}

.hero-scroll i { font-size: 1.3rem; }

@keyframes bounceDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%        { transform: translateX(-50%) translateY(6px); }
}

/* Hero stats bar */
.hero-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
}

.hero-stat-item .stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #5ede8a;
  line-height: 1;
}

.hero-stat-item .stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section-pad {
  padding: 5rem 0;
}

.section-pad-sm {
  padding: 3.5rem 0;
}

.section-badge {
  display: inline-block;
  background: var(--fo-green-soft);
  color: var(--fo-primary);
  font-size: .78rem;
  font-weight: 700;
  padding: .3rem .9rem;
  border-radius: 20px;
  margin-bottom: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--fo-text);
  line-height: 1.2;
  margin-bottom: .75rem;
}

.section-subtitle {
  font-size: 1.02rem;
  color: var(--fo-text-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* ============================================================
   USER PATH CARDS
   ============================================================ */
.path-section {
  background: #fff;
}

.path-card {
  background: var(--fo-bg);
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all var(--fo-transition);
  cursor: pointer;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.path-card:hover {
  border-color: var(--fo-primary-light);
  box-shadow: 0 8px 30px rgba(26,92,56,.15);
  transform: translateY(-4px);
  background: #fff;
  color: inherit;
}

.path-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.2rem;
}

.path-icon-green  { background: var(--fo-green-soft);  color: var(--fo-primary); }
.path-icon-gold   { background: #fef3e2;               color: #c8661a; }
.path-icon-blue   { background: #e3f2fd;               color: #1565c0; }
.path-icon-purple { background: #f3e5f5;               color: #7b1fa2; }

.path-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--fo-text);
}

.path-card p {
  font-size: .9rem;
  color: var(--fo-text-muted);
  margin-bottom: 1.2rem;
  flex: 1;
}

.btn-path {
  border: 2px solid var(--fo-primary);
  color: var(--fo-primary);
  border-radius: 50px;
  padding: .5rem 1.4rem;
  font-size: .88rem;
  font-weight: 700;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-block;
}

.btn-path:hover,
.path-card:hover .btn-path {
  background: var(--fo-primary);
  color: #fff;
}

.btn-path-gold {
  border-color: var(--fo-gold-dark);
  color: var(--fo-gold-dark);
}

.btn-path-gold:hover,
.path-card:hover .btn-path-gold {
  background: var(--fo-gold-dark);
  color: #fff;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
  background: linear-gradient(135deg, var(--fo-primary-dark) 0%, var(--fo-primary) 100%);
}

.features-section .section-title,
.features-section .section-subtitle,
.features-section .section-badge {
  color: #fff;
}

.features-section .section-badge {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
}

.features-section .section-subtitle {
  color: rgba(255,255,255,.75);
}

.feature-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--fo-radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: all var(--fo-transition);
  height: 100%;
}

.feature-card:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-3px);
}

.feature-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: block;
}

.feature-card h5 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
}

.feature-card p {
  font-size: .87rem;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* ============================================================
   IMPACT SECTION
   ============================================================ */
.impact-section {
  background: var(--fo-bg);
  position: relative;
  overflow: hidden;
}

.impact-section::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: var(--fo-green-soft);
  border-radius: 50%;
  opacity: .5;
  pointer-events: none;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .impact-grid { grid-template-columns: repeat(4, 1fr); }
}

.impact-card {
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--fo-card-shadow);
}

.impact-number {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 900;
  color: var(--fo-primary);
  line-height: 1;
  display: block;
}

.impact-plus {
  color: var(--fo-gold-dark);
  font-weight: 900;
}

.impact-label {
  font-size: .85rem;
  color: var(--fo-text-muted);
  margin-top: .4rem;
  font-weight: 500;
}

/* ============================================================
   SUPPORT FARMERS SECTION
   ============================================================ */
.support-section {
  background: linear-gradient(135deg, #2c1a0e 0%, #6b3a1f 50%, #8b4513 100%);
  position: relative;
  overflow: hidden;
}

.support-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><circle cx="40" cy="40" r="35" fill="none" stroke="rgba(244,162,97,.12)" stroke-width="1"/></svg>') repeat;
  background-size: 80px 80px;
  pointer-events: none;
}

.support-section .section-badge {
  background: rgba(244,162,97,.2);
  color: var(--fo-gold);
}

.support-section .section-title { color: #fff; }

.support-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 1.5rem;
}

.support-points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.support-points li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
  color: rgba(255,255,255,.88);
  font-size: .97rem;
}

.support-points li .point-icon {
  width: 28px;
  height: 28px;
  background: rgba(244,162,97,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fo-gold);
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.btn-support-cta {
  background: var(--fo-gold);
  border: none;
  color: #1a1a1a;
  font-weight: 800;
  padding: 1rem 2.2rem;
  border-radius: 50px;
  font-size: 1.05rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--fo-transition);
  box-shadow: 0 4px 20px rgba(244,162,97,.4);
}

.btn-support-cta:hover {
  background: var(--fo-gold-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(244,162,97,.5);
}

.support-image-box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--fo-radius);
  padding: 2rem;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.support-image-placeholder {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.support-impact-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.support-impact-stat {
  text-align: center;
}

.support-impact-stat .num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--fo-gold);
}

.support-impact-stat .lbl {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ============================================================
   MARKETPLACE PREVIEW
   ============================================================ */
.marketplace-section {
  background: #fff;
}

.product-card {
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  overflow: hidden;
  transition: all var(--fo-transition);
  height: 100%;
  background: #fff;
}

.product-card:hover {
  box-shadow: 0 8px 30px rgba(26,92,56,.15);
  transform: translateY(-4px);
  border-color: var(--fo-primary-light);
}

.product-img {
  height: 180px;
  background: var(--fo-green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
}

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

.product-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--fo-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 20px;
}

.product-body {
  padding: 1.1rem 1.2rem;
}

.product-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
  color: var(--fo-text);
}

.product-location {
  font-size: .8rem;
  color: var(--fo-text-muted);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.product-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fo-primary);
}

.product-price .per {
  font-size: .78rem;
  font-weight: 500;
  color: var(--fo-text-muted);
}

.product-farmer {
  font-size: .8rem;
  color: var(--fo-text-muted);
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ============================================================
   KNOWLEDGE SECTION
   ============================================================ */
.knowledge-section {
  background: var(--fo-bg);
}

.knowledge-card {
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 1.5rem;
  transition: all var(--fo-transition);
  height: 100%;
}

.knowledge-card:hover {
  box-shadow: var(--fo-card-shadow);
  border-color: var(--fo-primary-light);
  transform: translateY(-3px);
}

.knowledge-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--fo-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.ki-green  { background: var(--fo-green-soft); color: var(--fo-primary); }
.ki-yellow { background: #fff9e6;              color: #c8961a; }
.ki-blue   { background: #e3f2fd;              color: #1565c0; }
.ki-red    { background: #fce4ec;              color: #c62828; }
.ki-orange { background: #fff3e0;              color: #e65100; }
.ki-teal   { background: #e0f2f1;              color: #00695c; }

.knowledge-card h5 {
  font-size: .98rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--fo-text);
}

.knowledge-card p {
  font-size: .87rem;
  color: var(--fo-text-muted);
  margin-bottom: .75rem;
}

.knowledge-card a.read-link {
  font-size: .85rem;
  color: var(--fo-primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.knowledge-card a.read-link:hover {
  text-decoration: underline;
}

/* ============================================================
   MOBILE SECTION
   ============================================================ */
.mobile-section {
  background: linear-gradient(135deg, var(--fo-primary) 0%, #1e7a45 100%);
}

.mobile-section .section-title { color: #fff; }

.mobile-feature-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.1rem;
}

.mobile-feature-item .mf-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5ede8a;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mobile-feature-item .mf-text {
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  font-weight: 500;
}

.phone-mockup {
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.phone-mockup .phone-icon {
  font-size: 5rem;
  color: rgba(255,255,255,.6);
}

.phone-mockup p {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  margin-top: 1rem;
}

/* ============================================================
   FINAL CTA SECTION
   ============================================================ */
.final-cta-section {
  background: var(--fo-bg);
  text-align: center;
  padding: 6rem 0;
}

.final-cta-section .section-title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.btn-cta-main {
  background: var(--fo-primary);
  color: #fff;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--fo-transition);
  box-shadow: 0 4px 20px rgba(26,92,56,.3);
}

.btn-cta-main:hover {
  background: var(--fo-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(26,92,56,.4);
  color: #fff;
}

.btn-cta-gold {
  background: var(--fo-gold);
  color: #1a1a1a;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--fo-transition);
  box-shadow: 0 4px 15px rgba(244,162,97,.35);
}

.btn-cta-gold:hover {
  background: var(--fo-gold-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pub-footer {
  background: #0d2015;
  color: rgba(255,255,255,.75);
}

.pub-footer-top {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-brand {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .9rem;
}

.footer-brand .logo-leaf { color: #5ede8a; font-size: 1.5rem; }

.footer-desc {
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.2rem;
}

.footer-social {
  display: flex;
  gap: .7rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  transition: all var(--fo-transition);
  text-decoration: none;
}

.footer-social a:hover {
  background: var(--fo-primary-light);
  color: #fff;
  transform: translateY(-2px);
}

.footer-col-title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: .5rem;
}

.footer-links a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .88rem;
  transition: color var(--fo-transition);
}

.footer-links a:hover {
  color: #5ede8a;
}

.footer-links a.highlight-link {
  color: var(--fo-gold);
  font-weight: 600;
}

.footer-links a.highlight-link:hover {
  color: var(--fo-gold-dark);
}

.pub-footer-bottom {
  padding: 1.25rem 0;
  font-size: .82rem;
  color: rgba(255,255,255,.35);
}

.pub-footer-bottom a {
  color: rgba(255,255,255,.45);
  text-decoration: none;
}

.pub-footer-bottom a:hover {
  color: rgba(255,255,255,.75);
}

/* Footer language switcher */
.footer-lang {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.footer-lang a {
  padding: .25rem .7rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  text-decoration: none;
  transition: all var(--fo-transition);
}

.footer-lang a:hover,
.footer-lang a.active {
  border-color: #5ede8a;
  color: #5ede8a;
}

/* ============================================================
   GENERAL PAGE HERO (sub-pages)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--fo-primary-dark) 0%, var(--fo-primary) 100%);
  padding: 6rem 0 4rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(94,222,138,.12) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900;
  margin-bottom: .75rem;
}

.page-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  max-width: 580px;
  margin: 0 auto;
}

.page-hero .breadcrumb {
  justify-content: center;
  margin-bottom: 1.2rem;
}

.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a {
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  text-decoration: none;
}

.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* ============================================================
   CARDS & UTILITIES (sub-pages)
   ============================================================ */
.fo-card {
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  box-shadow: var(--fo-card-shadow);
  overflow: hidden;
  transition: all var(--fo-transition);
}

.fo-card:hover {
  box-shadow: 0 10px 35px rgba(26,92,56,.14);
  transform: translateY(-3px);
}

.btn-fo-primary {
  background: var(--fo-primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .6rem 1.5rem;
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.btn-fo-primary:hover {
  background: var(--fo-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-fo-outline {
  background: transparent;
  color: var(--fo-primary);
  border: 2px solid var(--fo-primary);
  border-radius: 50px;
  padding: .55rem 1.5rem;
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.btn-fo-outline:hover {
  background: var(--fo-primary);
  color: #fff;
  transform: translateY(-1px);
}

.btn-fo-gold {
  background: var(--fo-gold);
  color: #1a1a1a;
  border: none;
  border-radius: 50px;
  padding: .6rem 1.5rem;
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--fo-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.btn-fo-gold:hover {
  background: var(--fo-gold-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* Step cards */
.step-card {
  text-align: center;
  padding: 2rem 1.5rem;
}

.step-num {
  width: 52px;
  height: 52px;
  background: var(--fo-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 auto 1.1rem;
}

/* Benefit items */
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--fo-border);
}

.benefit-item:last-child { border-bottom: none; }

.benefit-icon {
  width: 44px;
  height: 44px;
  background: var(--fo-green-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fo-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.benefit-item h6 {
  font-weight: 700;
  margin-bottom: .2rem;
  font-size: .95rem;
}

.benefit-item p {
  font-size: .87rem;
  color: var(--fo-text-muted);
  margin: 0;
}

/* Job card */
.job-card {
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 1.4rem 1.5rem;
  transition: all var(--fo-transition);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.job-card:hover {
  border-color: var(--fo-primary-light);
  box-shadow: var(--fo-card-shadow);
  transform: translateY(-2px);
}

.job-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fo-text);
  margin: 0;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .82rem;
  color: var(--fo-text-muted);
}

.job-meta span {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.job-tag {
  background: var(--fo-green-soft);
  color: var(--fo-primary);
  font-size: .76rem;
  font-weight: 600;
  padding: .15rem .65rem;
  border-radius: 20px;
}

/* ============================================================
   SEARCH & FILTER
   ============================================================ */
.search-bar {
  background: #fff;
  border: 2px solid var(--fo-border);
  border-radius: 50px;
  padding: .6rem 1.2rem .6rem .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: border-color var(--fo-transition);
}

.search-bar:focus-within {
  border-color: var(--fo-primary-light);
}

.search-bar input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: .95rem;
  color: var(--fo-text);
}

.search-bar i {
  color: var(--fo-text-muted);
  font-size: 1.1rem;
  padding: 0 .5rem;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-form-wrap {
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  padding: 2.5rem;
  box-shadow: var(--fo-card-shadow);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-info-item .ci-icon {
  width: 48px;
  height: 48px;
  background: var(--fo-green-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fo-primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info-item h6 {
  font-weight: 700;
  margin-bottom: .15rem;
  font-size: .92rem;
}

.contact-info-item p {
  font-size: .88rem;
  color: var(--fo-text-muted);
  margin: 0;
}

/* ============================================================
   FORM STYLES
   ============================================================ */
.fo-form .form-control,
.fo-form .form-select {
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius-sm);
  padding: .7rem 1rem;
  font-size: .93rem;
  transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}

.fo-form .form-control:focus,
.fo-form .form-select:focus {
  border-color: var(--fo-primary-light);
  box-shadow: 0 0 0 3px rgba(26,92,56,.1);
  outline: none;
}

.fo-form .form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--fo-text);
  margin-bottom: .35rem;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.team-card {
  text-align: center;
  padding: 1.5rem;
  background: #fff;
  border: 1.5px solid var(--fo-border);
  border-radius: var(--fo-radius);
  transition: all var(--fo-transition);
}

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

.team-avatar {
  width: 80px;
  height: 80px;
  background: var(--fo-green-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
  color: var(--fo-primary);
}

.team-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.team-card .role { font-size: .82rem; color: var(--fo-text-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .section-pad { padding: 3.5rem 0; }
  .hero-section { padding: 5rem 0 3rem; }
  .hero-ctas .btn-hero-primary,
  .hero-ctas .btn-hero-secondary,
  .hero-ctas .btn-hero-gold {
    padding: .75rem 1.4rem;
    font-size: .93rem;
    width: 100%;
    justify-content: center;
  }
  .hero-ctas { flex-direction: column; }
  .path-card { padding: 1.5rem 1rem; }
  .support-section { padding: 4rem 0; }
  .pub-footer-top { padding: 3rem 0 2rem; }
  .contact-form-wrap { padding: 1.5rem; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp .6s ease forwards;
}

.fade-up-delay-1 { animation-delay: .1s; opacity: 0; }
.fade-up-delay-2 { animation-delay: .2s; opacity: 0; }
.fade-up-delay-3 { animation-delay: .3s; opacity: 0; }
.fade-up-delay-4 { animation-delay: .4s; opacity: 0; }

/* Counter animation  */
.counter-num {
  display: inline-block;
  transition: all .3s;
}