/* ═══════════════════════════════════════════════════════════
   FARMELIO — GLASSMORPHISM LAYER
   Frosted-glass treatment: dark-section rhythm with ambient
   orbs so backdrop-filter has chromatic depth to blur against.
   Layers cleanly on top of style.css.
═══════════════════════════════════════════════════════════ */

/* ── GLASS TOKEN ─────────────────────────────────────────── */
:root {
  --glass-white:      rgba(255,255,255,0.06);
  --glass-white-mid:  rgba(255,255,255,0.10);
  --glass-white-hi:   rgba(255,255,255,0.55);
  --glass-green:      rgba(22,163,74,0.12);
  --glass-border:     rgba(255,255,255,0.10);
  --glass-border-hi:  rgba(255,255,255,0.75);
  --glass-green-border: rgba(74,222,128,0.22);
  --glass-blur:       blur(24px) saturate(1.3);
  --glass-blur-nav:   blur(32px) saturate(1.6);
  --glass-blur-lg:    blur(28px) saturate(1.35);
  --glass-shadow:     0 4px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-shadow-hover: 0 14px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.12);
  --orb-green:        radial-gradient(circle, rgba(34,197,94,.13) 0%, transparent 70%);
  --orb-amber:        radial-gradient(circle, rgba(245,158,11,.09) 0%, transparent 70%);
}

/* ── ENHANCED NAV GLASS ──────────────────────────────────── */
.nav.scrolled {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: var(--glass-blur-nav) !important;
  -webkit-backdrop-filter: var(--glass-blur-nav) !important;
  border-bottom: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,.06), 0 0 0 0.5px rgba(0,0,0,.04) !important;
}

.hero__badge {
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* ── MARQUEE GLASS STRIP ─────────────────────────────────── */
.marquee-strip {
  background: rgba(20,83,45,0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(74,222,128,.18) !important;
  border-bottom: 1px solid rgba(74,222,128,.18) !important;
}

/* ══════════════════════════════════════════════════════════
   ABOUT — light glass cards over subtle green/amber orbs
══════════════════════════════════════════════════════════ */
.about {
  position: relative;
  overflow: hidden;
}

.about::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: var(--orb-green);
  top: -160px; right: -160px;
  pointer-events: none;
  filter: blur(64px);
  z-index: 0;
}

.about::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--orb-amber);
  bottom: -80px; left: -80px;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}

.about .container { position: relative; z-index: 1; }

.about__img {
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.82) !important;
  box-shadow: 0 4px 24px rgba(34,197,94,.07), inset 0 1px 0 rgba(255,255,255,0.95);
}

.about__img:hover {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.95) !important;
  box-shadow: 0 16px 48px rgba(34,197,94,.14), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCTS — dark section, glass cards
══════════════════════════════════════════════════════════ */
.products {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #071c0f 0%, #0e1f14 40%, var(--stone-950) 100%) !important;
}

.products::before {
  content: '';
  position: absolute;
  width: 860px; height: 860px;
  border-radius: 50%;
  background: var(--orb-green);
  top: -240px; left: -240px;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}

.products::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--orb-amber);
  bottom: -60px; right: -120px;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}

.products .container,
.products .section-header,
.products .categories,
.products .product-grid,
.products .products__cta {
  position: relative;
  z-index: 1;
}

.products .section-eyebrow { color: var(--green-400) !important; }
.products .section-title   { color: var(--white) !important; }
.products .section-sub     { color: rgba(255,255,255,.52) !important; }

/* Glass category buttons */
.category-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.category-btn:hover {
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(74,222,128,.35) !important;
  color: var(--green-400) !important;
}

.category-btn.active {
  background: rgba(22,163,74,.30) !important;
  border-color: rgba(74,222,128,.50) !important;
  color: var(--white) !important;
  box-shadow: 0 0 22px rgba(34,197,94,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.category-btn.active::after { background: rgba(255,255,255,.4); }

/* Glass product cards */
.product-card {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

.product-card:hover {
  background: var(--glass-white-mid) !important;
  border-color: var(--glass-green-border) !important;
  box-shadow: var(--glass-shadow-hover), 0 0 24px rgba(34,197,94,.07) !important;
}

.product-card__img {
  background: rgba(34,197,94,.09) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.product-card__cat   { color: var(--green-400) !important; }
.product-card__name  { color: var(--white) !important; }
.product-card__desc  { color: rgba(255,255,255,.50) !important; }
.product-card__price { color: var(--white) !important; }
.product-card__unit  { color: rgba(255,255,255,.38) !important; }

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS — glass step cards over existing dark bg
══════════════════════════════════════════════════════════ */
.step {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2xl);
  box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background var(--t-slow) var(--ease-out),
              border-color var(--t-slow) var(--ease-out),
              box-shadow var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.step:hover {
  background: rgba(34,197,94,.07);
  border-color: rgba(74,222,128,.20);
  box-shadow: 0 12px 48px rgba(0,0,0,.35), 0 0 28px rgba(34,197,94,.07),
              inset 0 1px 0 rgba(255,255,255,0.10);
  transform: translateY(-4px);
}

/* ══════════════════════════════════════════════════════════
   FARMERS — dark section, glass cards
══════════════════════════════════════════════════════════ */
.farmers {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #080f09 0%, #0d1a0f 50%, var(--stone-950) 100%) !important;
}

.farmers::before {
  content: '';
  position: absolute;
  width: 750px; height: 750px;
  border-radius: 50%;
  background: var(--orb-green);
  top: -180px; right: -200px;
  pointer-events: none;
  filter: blur(88px);
  z-index: 0;
}

.farmers::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--orb-amber);
  bottom: 0; left: -80px;
  pointer-events: none;
  filter: blur(70px);
  z-index: 0;
}

.farmers .container { position: relative; z-index: 1; }

.farmers .section-eyebrow { color: var(--green-400) !important; }
.farmers .section-title   { color: var(--white) !important; }

/* Glass farmer cards */
.farmer-card {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: var(--glass-shadow) !important;
}

.farmer-card:hover {
  background: rgba(34,197,94,.07) !important;
  border-color: rgba(74,222,128,.20) !important;
  box-shadow: var(--glass-shadow-hover), 0 0 32px rgba(34,197,94,.07) !important;
}

.farmer-card__avatar {
  background: rgba(34,197,94,.13) !important;
  border-color: rgba(74,222,128,.20) !important;
}

.farmer-card h3              { color: var(--white) !important; }
.farmer-card__location       { color: rgba(255,255,255,.44) !important; }
.farmer-card__body p         { color: rgba(255,255,255,.50) !important; }
.farmer-card__tags span {
  background: rgba(34,197,94,.12) !important;
  color: var(--green-400) !important;
  border-color: rgba(74,222,128,.20) !important;
}

/* Impact bar — deeper glass within dark section */
.farmers__impact {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.impact-card h4 { color: rgba(255,255,255,.88) !important; }

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS — dark section, glass cards
══════════════════════════════════════════════════════════ */
.testimonials {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--green-950) 0%, #090e09 50%, var(--stone-950) 100%) !important;
}

.testimonials::before {
  content: '';
  position: absolute;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: var(--orb-green);
  bottom: -100px; left: -80px;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}

.testimonials::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--orb-amber);
  top: -60px; right: -40px;
  pointer-events: none;
  filter: blur(70px);
  z-index: 0;
}

.testimonials .container { position: relative; z-index: 1; }

.testimonials .section-eyebrow { color: var(--green-400) !important; }
.testimonials .section-title   { color: var(--white) !important; }

.testimonial {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: var(--glass-shadow) !important;
}

.testimonial:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}

.testimonial--large {
  background: rgba(22,101,52,.18) !important;
  border-color: rgba(74,222,128,.22) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.42),
              0 0 36px rgba(34,197,94,.06),
              inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.testimonial__quote                     { color: rgba(255,255,255,.62) !important; }
.testimonial--large .testimonial__quote { color: rgba(255,255,255,.84) !important; }
.testimonial__stars                     { color: var(--amber-400) !important; }
.testimonial__author strong             { color: var(--white) !important; }
.testimonial__author span               { color: rgba(255,255,255,.40) !important; }

/* ══════════════════════════════════════════════════════════
   SUSTAINABILITY — glass badges & circle, orb accents
══════════════════════════════════════════════════════════ */
.sustain {
  position: relative;
  overflow: hidden;
}

.sustain::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: var(--orb-green);
  top: -80px; right: -120px;
  pointer-events: none;
  filter: blur(72px);
  z-index: 0;
}

.sustain .container { position: relative; z-index: 1; }

.sustain__badge {
  background: rgba(34,197,94,.08) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(74,222,128,.20) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.07),
              inset 0 1px 0 rgba(255,255,255,0.45);
  transition: all var(--t-slow) var(--ease-out);
}

.sustain__badge:hover {
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(74,222,128,.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34,197,94,.12),
              inset 0 1px 0 rgba(255,255,255,0.55);
}

.sustain__circle-inner {
  box-shadow: 0 0 0 6px rgba(34,197,94,.08);
}

/* ══════════════════════════════════════════════════════════
   CONTACT — dark section, glass form
══════════════════════════════════════════════════════════ */
.contact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #07150b 0%, #0c1a10 35%, var(--stone-950) 100%) !important;
}

.contact::before {
  content: '';
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: var(--orb-green);
  top: -200px; right: -200px;
  pointer-events: none;
  filter: blur(88px);
  z-index: 0;
}

.contact::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--orb-amber);
  bottom: -100px; left: -80px;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}

.contact .container { position: relative; z-index: 1; }

.contact .section-eyebrow  { color: var(--green-400) !important; }
.contact .section-title     { color: var(--white) !important; }
.contact .contact__body     { color: rgba(255,255,255,.54) !important; }
.contact .contact__detail   { color: rgba(255,255,255,.54) !important; }
.contact .contact__detail svg { color: var(--green-400); }

/* Glass form panel */
.contact__form {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.42),
              inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

.contact .form-group label { color: rgba(255,255,255,.80) !important; }

.contact .form-group input,
.contact .form-group select,
.contact .form-group textarea {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
}

.contact .form-group input::placeholder,
.contact .form-group textarea::placeholder { color: rgba(255,255,255,.28) !important; }

.contact .form-group input:focus,
.contact .form-group select:focus,
.contact .form-group textarea:focus {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(74,222,128,.50) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.14) !important;
}

.contact .form-note { color: rgba(255,255,255,.30) !important; }

.form-success {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(74,222,128,.22) !important;
}

.form-success h3 { color: var(--green-400) !important; }
.form-success p  { color: rgba(255,255,255,.55) !important; }

/* ── DARK MODE RECALIBRATIONS ────────────────────────────── */
/* Sections that are already dark need no change in dark mode.
   Only the light sections (About, Sustain) need recalibration. */

:root[data-theme="dark"] .about::before,
:root[data-theme="dark"] .about::after { opacity: 0.7; }

:root[data-theme="dark"] .about__img {
  background: rgba(0,0,0,0.32) !important;
  border: 1px solid rgba(74,222,128,.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

:root[data-theme="dark"] .about__img:hover {
  background: rgba(34,197,94,.06) !important;
  border-color: rgba(74,222,128,.22) !important;
}

:root[data-theme="dark"] .nav.scrolled {
  background: rgba(4,8,5,0.84) !important;
  backdrop-filter: var(--glass-blur-nav) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,.30) !important;
}

:root[data-theme="dark"] .sustain__badge {
  background: rgba(34,197,94,.06) !important;
  border-color: rgba(74,222,128,.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

:root[data-theme="dark"] .sustain__circle-inner {
  background: var(--stone-900) !important;
}

:root[data-theme="dark"] .sustain::after { opacity: 0.6; }

/* ── GLASS SCROLL ANIMATION ──────────────────────────────── */
/* Cards entering viewport get a brief bloom of the blur */
.product-card.is-entering,
.farmer-card.is-entering,
.testimonial.is-entering {
  animation: glassBloom 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes glassBloom {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .farmer-card,
  .testimonial {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}