/* =====================================================================
   KrishiXmart — "Living Farm" design layer
   Loads AFTER css/styles.css and re-skins every public page.
   Only presentation lives here: markup, ids, forms and JS hooks are
   untouched, so cart, product loader, quote forms etc. keep working.

   Palette  Canopy  #0F3D2E  deep leaf shade (ink, headings, footer)
            Sprout  #5FA02B  new growth (primary actions)
            Marigold#F0A21B  sun + harvest (single warm accent)
            Loam    #3B2A1E  soil (tractor, trunks, small details)
            Meadow  #F7FAEF  page paper, tinted toward green
   Type     Bricolage Grotesque (display) · Figtree (body)
   Signature  an animated farm: sunrise, tractor, drone, trees, polyhouse,
            solar rows and a wind turbine, repeated in miniature on
            every page header and ending in an evening field in the footer.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");

/* ---------- Tokens ---------- */
:root {
  --green-50:  #f4f9ec;
  --green-100: #e6f1d6;
  --green-200: #cfe5ab;
  --green-300: #addb74;
  --green-400: #88c244;
  --green-500: #5fa02b;
  --green-600: #3f8221;
  --green-700: #2d6420;
  --green-800: #1d4a1e;
  --green-900: #0f3d2e;

  --gold-50:  #fff8e6;
  --gold-100: #fdeec2;
  --gold-200: #fbdf8f;
  --gold-300: #f8cb5c;
  --gold-400: #f5b73a;
  --gold-500: #f0a21b;
  --gold-600: #d98309;
  --gold-700: #b06406;
  --gold-800: #8a4d06;
  --gold-900: #5e3404;

  --primary:       #3f8221;
  --primary-dark:  #0f3d2e;
  --primary-light: #6db33f;
  --accent:        #d98309;
  --accent-light:  #f0a21b;

  --bg-primary:   #f7faef;
  --bg-secondary: #eaf3db;
  --bg-card:      #ffffff;

  --text-primary:   #12261a;
  --text-secondary: #2f4636;
  --text-muted:     #5b6f60;

  --border:     #d5e5be;
  --shadow-sm:  0 2px 8px rgba(15, 61, 46, .06);
  --shadow-md:  0 10px 28px -10px rgba(15, 61, 46, .22);
  --shadow-lg:  0 18px 40px -14px rgba(15, 61, 46, .28);
  --shadow-xl:  0 30px 60px -20px rgba(15, 61, 46, .35);
  --shadow-glow: 0 0 40px rgba(240, 162, 27, .25);

  --font-sans:    'Figtree', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;

  --radius-lg:  1.1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;

  --soil: #3b2a1e;
  --blob: 58% 42% 55% 45% / 48% 55% 45% 52%;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  /* scattered seeds, very quiet */
  background-image:
    radial-gradient(ellipse 3px 5px at 18px 22px, rgba(63, 130, 33, .07) 98%, transparent),
    radial-gradient(ellipse 3px 5px at 74px 64px, rgba(217, 131, 9, .07) 98%, transparent);
  background-size: 96px 96px;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; }

::selection { background: var(--gold-300); color: var(--green-900); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Scroll progress: a vine with a seed on the tip ---------- */
.scroll-progress {
  height: 5px !important;
  background: linear-gradient(90deg, var(--green-600), var(--green-400) 70%, var(--gold-500)) !important;
  border-radius: 0 6px 6px 0;
  overflow: visible !important;
}
.scroll-progress::after {
  content: "";
  position: absolute;
  right: -7px;
  top: -4px;
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 35% 35%, #ffe08a, var(--gold-500));
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}

/* ---------- Header ---------- */
.top-bar {
  background: linear-gradient(90deg, #0b2f23, var(--green-900) 60%, #14513a) !important;
  color: rgba(255, 255, 255, .88) !important;
}
.top-bar .top-link, .top-bar a { color: var(--gold-300) !important; }
.top-bar .top-icon { color: var(--gold-400) !important; }
.top-wa-btn {
  background: var(--gold-500) !important;
  color: var(--green-900) !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.top-wa-btn svg { color: var(--green-900) !important; }

.navbar {
  background: rgba(247, 250, 239, .9) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 61, 46, .1), 0 10px 30px -18px rgba(15, 61, 46, .35) !important;
}
.site-header.is-scrolled .navbar { background: rgba(247, 250, 239, .97) !important; }

.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--green-900);
}
.nav-logo-accent { color: var(--gold-600) !important; }

.nav-link {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--green-900);
  border-radius: 999px;
}
.nav-link:hover,
.nav-item-dropdown:hover > .nav-link {
  background: rgba(95, 160, 43, .14);
  color: var(--green-800);
}
.nav-link.active,
.nav-link.active-page {
  background: var(--green-900);
  color: #fff !important;
}
.nav-link.active-page::after { display: none; }

.nav-pill-badge-gold {
  background: var(--gold-500) !important;
  color: var(--green-900) !important;
}

.nav-dropdown-menu {
  border-radius: 22px !important;
  border: 1px solid rgba(15, 61, 46, .1) !important;
  box-shadow: var(--shadow-xl) !important;
  background: #fffef9 !important;
}
.dropdown-icon-box, .drawer-link-icon {
  border-radius: var(--blob) !important;
  background: linear-gradient(145deg, var(--green-100), var(--green-200)) !important;
  color: var(--green-800) !important;
}
.dropdown-link:hover .dropdown-icon-box { animation: fx-blob 2.4s ease-in-out infinite; }
.dropdown-quick-pill { border-radius: 999px !important; }

.btn-nav-quote {
  background: var(--gold-500) !important;
  color: var(--green-900) !important;
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--gold-700) !important;
}
.btn-nav-login {
  border-radius: 999px !important;
  border: 2px solid var(--green-900) !important;
  color: var(--green-900) !important;
  background: transparent !important;
}
.btn-nav-login:hover { background: var(--green-900) !important; color: #fff !important; }

/* ---------- Buttons: tactile, like a stamped seed packet ---------- */
.btn { border-radius: 999px; font-family: var(--font-sans); font-weight: 700; letter-spacing: .005em; }
.btn::before, .btn::after { display: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--green-500), var(--green-700));
  box-shadow: 0 4px 0 var(--green-800), 0 14px 22px -10px rgba(29, 74, 30, .55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--green-800), 0 20px 28px -12px rgba(29, 74, 30, .6);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-800); }

.btn-accent {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--green-900);
  box-shadow: 0 4px 0 var(--gold-700), 0 14px 22px -10px rgba(176, 100, 6, .55);
}
.btn-accent:hover { box-shadow: 0 6px 0 var(--gold-700), 0 20px 28px -12px rgba(176, 100, 6, .6); }
.btn-accent:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-700); }

.btn-secondary {
  background: #fff;
  color: var(--green-800);
  border: 2px solid var(--green-900);
  box-shadow: 0 4px 0 var(--green-900);
}
.btn-secondary:hover {
  background: var(--green-50);
  border-color: var(--green-900);
  box-shadow: 0 6px 0 var(--green-900);
}
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-900); }
.btn-outline { border-radius: 999px; }

/* ---------- Section language ---------- */
.section-label {
  font-family: var(--font-sans);
  font-size: .72rem !important;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  gap: .55rem !important;
}
.section-label::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  border-radius: 0 100% 0 100% !important;
  background: linear-gradient(135deg, var(--green-400), var(--green-600)) !important;
  box-shadow: none !important;
  transform-origin: 0 100%;
  animation: fx-leaf 4s ease-in-out infinite;
}
.section-label svg { display: none; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--green-900);
}
.section-subtitle { color: var(--text-secondary); font-size: 1.08rem; }

/* ---------- Cards: soft, rounded, lift like a seedling ---------- */
.glass-card, .feature-card, .testimonial-card, .certificate-card, .download-card,
.blog-card, .step-card, .symptom-card, .solution-card, .problem-card,
.product-card, .kx-card, .crop-content-box {
  border-radius: 26px !important;
  background: #fff;
  border: 1.5px solid rgba(15, 61, 46, .09);
  box-shadow: 0 1px 0 #fff inset, 0 14px 32px -16px rgba(15, 61, 46, .3);
  transition: transform .45s var(--ease-spring), box-shadow .35s ease, border-color .3s ease;
}
.glass-card:hover, .feature-card:hover, .testimonial-card:hover, .certificate-card:hover,
.download-card:hover, .blog-card:hover, .step-card:hover, .symptom-card:hover,
.product-card:hover, .kx-card:hover {
  transform: translateY(-7px);
  border-color: rgba(95, 160, 43, .45);
  box-shadow: 0 1px 0 #fff inset, 0 28px 44px -18px rgba(15, 61, 46, .38);
}
.glass-card { backdrop-filter: none; }

.feature-card { position: relative; overflow: hidden; }
.feature-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--green-500), var(--gold-500));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.feature-card:hover::after { transform: scaleX(1); }

.feature-icon {
  width: 68px !important;
  height: 68px !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--blob) !important;
  background: linear-gradient(145deg, var(--green-100), var(--gold-100)) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 8px 16px -8px rgba(15, 61, 46, .3);
  transition: transform .5s var(--ease-spring);
}
.feature-card:hover .feature-icon { animation: fx-blob 2.6s ease-in-out infinite; transform: scale(1.08) rotate(-6deg); }
.feature-title { font-family: var(--font-display); color: var(--green-900); letter-spacing: -.02em; }

.symptom-card { cursor: pointer; }
.symptom-card.active, .symptom-card.selected { border-color: var(--green-500); background: var(--green-50); }
.solution-result-box { border-radius: 22px; background: var(--green-50); border: 2px dashed rgba(63, 130, 33, .4); }

.stat-number-large, .stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--green-800);
}
.stat-label-large, .stat-label { font-weight: 600; color: var(--text-muted); }

.testimonial-card { position: relative; }
.quote-icon {
  font-family: var(--font-display);
  font-size: 5rem !important;
  line-height: .6;
  color: var(--gold-400) !important;
  opacity: .9;
}
.testimonial-avatar { border-radius: var(--blob) !important; font-family: var(--font-display); font-weight: 800; }

.category-card { border-radius: 26px !important; }
.cat-slider-btn { border-radius: 50% !important; }

/* FAQ */
.faq-item {
  border-radius: 22px !important;
  background: #fff;
  border: 1.5px solid rgba(15, 61, 46, .1) !important;
  box-shadow: 0 10px 24px -16px rgba(15, 61, 46, .3);
  overflow: hidden;
  margin-bottom: .9rem;
}
.faq-question { font-family: var(--font-display); font-weight: 700; color: var(--green-900); }
.faq-icon {
  border-radius: 50% !important;
  background: var(--gold-400) !important;
  color: var(--green-900) !important;
  transition: transform .4s var(--ease-spring);
}
.faq-item.active .faq-icon, .faq-item.open .faq-icon { transform: rotate(135deg); }

/* Forms */
.form-control, .form-input, .form-textarea {
  border-radius: 14px !important;
  border: 2px solid rgba(15, 61, 46, .14) !important;
  background: #fffffa;
}
.form-control:focus, .form-input:focus, .form-textarea:focus {
  border-color: var(--green-500) !important;
  box-shadow: 0 0 0 4px rgba(95, 160, 43, .2) !important;
  outline: none;
}
.custom-modal-box, .product-modal-content { border-radius: 28px !important; }

/* Badges / pills on shop cards */
.kx-cat-badge, .product-card-badge, .filter-btn, .filter-tab, .crop-tab-btn, .blog-filter-btn { border-radius: 999px !important; }
.filter-btn.active, .crop-tab-btn.active, .blog-filter-btn.active { background: var(--green-900) !important; color: #fff !important; border-color: var(--green-900) !important; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  background: linear-gradient(180deg, #ffe9ae 0%, #fff4d3 30%, #e9f5cf 62%, #cfe8ab 100%) !important;
  min-height: 100vh;
  padding-bottom: clamp(110px, 16.5vw, 240px);
}
.hero::before, .hero::after { display: none !important; }

.hero-badge {
  background: #fff !important;
  color: var(--green-900) !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--green-900);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.9rem) !important;
  margin-bottom: 1rem !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  color: var(--green-900) !important;
  text-shadow: none !important;
}
.hero-title .highlight,
.hero-title .highlight-gold {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}
.hero-title .highlight { color: var(--green-600) !important; }
.hero-title .highlight-gold { color: var(--gold-600) !important; }
.hero-title .highlight::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: .16em;
  background: var(--gold-400);
  border-radius: 99px;
  opacity: .75;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: fx-underline .9s var(--ease-out) 1s forwards;
}
.hero-description { color: var(--text-secondary) !important; font-size: 1.05rem !important; line-height: 1.65 !important; margin-bottom: 1.4rem !important; max-width: 36rem; }
.hero-buttons { margin-bottom: 1.4rem !important; }
.hero-stat { border-left: 3px solid var(--gold-500); padding-left: .9rem; }
.hero-stat-value { font-family: var(--font-display); font-weight: 800; color: var(--green-900) !important; }
.hero-stat-label { color: var(--text-muted) !important; font-weight: 600; }

/* The banner photo sits in a greenhouse-window arch */
.hero .container { grid-template-columns: 1.12fr .88fr !important; gap: var(--space-2xl) !important; }
.hero-visual { max-width: 500px; margin-left: auto; }
.hero-image-wrapper {
  aspect-ratio: 4 / 3 !important;
  border-radius: 42px 42px 42px 160px !important;
  border: 8px solid #fff;
  box-shadow: 0 0 0 3px var(--green-900), 0 40px 70px -28px rgba(15, 61, 46, .55) !important;
  background: linear-gradient(160deg, var(--green-100), var(--gold-100)) !important;
}
.hero-floating-card {
  background: #fff !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 20px !important;
  box-shadow: 4px 4px 0 var(--green-900) !important;
}
.hero-floating-card .card-text { font-family: var(--font-display); color: var(--green-900); }

/* ---------- Inner-page headers: dawn field in miniature ---------- */
.page-header {
  background: linear-gradient(180deg, #0c3427 0%, #14472f 55%, #1d5c37 100%) !important;
  padding-bottom: calc(var(--space-3xl) + 90px) !important;
}
.page-header::before { display: none !important; }
.page-header::after {
  background: radial-gradient(circle at 86% 38%, rgba(255, 196, 61, .42), transparent 38%) !important;
}
.page-title { line-height: 1.05 !important; font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(2.2rem, 5.4vw, 3.8rem) !important; }
.page-description { color: rgba(255, 255, 255, .88) !important; }

/* Products page has its own hero block */
.products-hero {
  background: linear-gradient(180deg, #ffeeb8 0%, #eef6d6 70%, #dcefbd 100%) !important;
  padding-bottom: clamp(110px, 11vw, 150px) !important;
}
.products-hero .fx-scene--mini { height: clamp(80px, 9vw, 124px); }
.products-hero::before, .products-hero::after { display: none !important; }
.products-hero h1 { font-family: var(--font-display) !important; letter-spacing: -.04em; color: var(--green-900) !important; }

/* ---------- CTA: evening field ---------- */
.cta-section {
  background: linear-gradient(180deg, #0f3d2e 0%, #14513a 55%, #1b6a3f 100%) !important;
  padding-bottom: clamp(190px, 25vw, 340px) !important;
}
.cta-section::before {
  background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255, 187, 51, .5), transparent 70%) !important;
}
.cta-section::after { display: none !important; }
.cta-title { line-height: 1.05 !important; font-family: var(--font-display); letter-spacing: -.04em; font-size: clamp(2.1rem, 5vw, 3.6rem) !important; }
.cta-subtitle { color: rgba(255, 255, 255, .85) !important; }

/* ---------- Footer: soil, roots and a quiet field ---------- */
.footer {
  background: linear-gradient(180deg, #0a1f16 0%, #0d2a1d 100%) !important;
  padding-top: calc(var(--space-4xl) + 40px) !important;
}
.footer::before { display: none !important; }
.footer-heading {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem !important;
  color: var(--gold-400) !important;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--gold-300) !important; }
.footer-socials a { border-radius: var(--blob) !important; }
.footer-socials a:hover { background: var(--gold-500) !important; color: var(--green-900) !important; }
.footer-bottom { color: rgba(255, 255, 255, .55); }

.floating-whatsapp { border-radius: var(--blob) !important; }
.sticky-quote-ribbon { background: var(--gold-500) !important; color: var(--green-900) !important; font-weight: 800; }
.back-to-top { border-radius: var(--blob) !important; background: var(--green-900) !important; color: var(--gold-300) !important; }

/* =====================================================================
   FARM SCENES  (markup injected by js/farm-fx.js)
   ===================================================================== */
.fx-sky, .fx-scene { position: absolute; pointer-events: none; }
.fx-sky { inset: 0; z-index: 0; overflow: hidden; }
.fx-scene { left: 0; right: 0; bottom: 0; z-index: 1; line-height: 0; }
.fx-scene svg { width: 100%; height: 100%; display: block; overflow: visible; }

.fx-scene--hero  { height: clamp(210px, 33vw, 440px); }
.fx-scene--mini  { height: clamp(90px, 13vw, 170px); }
.fx-scene--dusk  { height: clamp(150px, 22vw, 290px); }

/* Make sure real content stays above the scenery */
.hero .container, .page-header .container, .cta-section .container,
.products-hero > :not(.fx-sky):not(.fx-scene) { position: relative; z-index: 3; }
.fx-has-scene { position: relative; isolation: isolate; }

/* Scene colour themes */
.fx-scene--hero { --far:#cbe6a8; --mid:#a5d06e; --near:#7db243; --band:#69a036; --soil:#5b3f28; --soil2:#4a3220; --leaf1:#3f8221; --leaf2:#5fa02b; --tree1:#2f7a2b; --tree2:#4c9a33; --trunk:#6b4a2d; --glass:rgba(255,255,255,.55); }
.fx-scene--mini { --far:#1f5c37; --mid:#256f3d; --near:#2f8446; --band:#3a9553; --soil:#1c3626; --soil2:#16291d; --leaf1:#5fa02b; --leaf2:#88c244; --tree1:#14452a; --tree2:#1c6038; --trunk:#3a2a1c; --glass:rgba(255,255,255,.25); }
.fx-scene--light{ --far:#d4ebb0; --mid:#bbdd8b; --near:#a0ce6c; --band:#8fc25a; --soil:#6d4c30; --soil2:#5a3e27; --leaf1:#3f8221; --leaf2:#5fa02b; --tree1:#3f8f31; --tree2:#62ae3f; --trunk:#6b4a2d; --glass:rgba(255,255,255,.6); }
.fx-scene--dusk { --far:#1e5c3b; --mid:#17482f; --near:#113a26; --band:#1c5a39; --soil:#0b2a1b; --soil2:#08200f; --leaf1:#2d6e32; --leaf2:#3f8f3a; --tree1:#0d3322; --tree2:#124129; --trunk:#07170f; --glass:rgba(255,255,255,.18); }

.fx-far  { fill: var(--far); }
.fx-mid  { fill: var(--mid); }
.fx-near { fill: var(--near); }
.fx-band { fill: none; stroke: var(--band); stroke-width: 3; opacity: .75; }
.fx-soil { fill: var(--soil); }
.fx-soil2{ fill: var(--soil2); }
.fx-t1 { fill: var(--tree1); }
.fx-t2 { fill: var(--tree2); }
.fx-trunk { fill: var(--trunk); }
.fx-trunk-line { stroke: var(--trunk); fill: none; stroke-linecap: round; }
.fx-lf1 { fill: var(--leaf1); }
.fx-lf2 { fill: var(--leaf2); }
.fx-stem { stroke: var(--leaf1); stroke-width: 2; stroke-linecap: round; fill: none; }
.fx-glass { fill: var(--glass); stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; }

/* ---- sky layer ---- */
.fx-sun-wrap { position: absolute; left: 47%; top: 15%; width: clamp(110px, 15vw, 210px); aspect-ratio: 1; }
.fx-sun { width: 100%; height: 100%; animation: fx-sunrise 2.6s var(--ease-out) .2s both; }
.fx-sun svg { width: 100%; height: 100%; overflow: visible; }
.fx-sun .rays { transform-origin: 50% 50%; animation: fx-rotate 70s linear infinite; }
.fx-sun .halo { animation: fx-breathe 5s ease-in-out infinite; transform-origin: 50% 50%; }
.fx-scene--mini-sun { position: absolute; right: 9%; top: 18%; width: clamp(70px, 9vw, 130px); }

.fx-cloud { position: absolute; left: 0; width: var(--w, 200px); opacity: .92; animation: fx-drift var(--t, 120s) linear infinite; animation-delay: var(--dl, 0s); will-change: transform; }
.fx-cloud svg { width: 100%; display: block; }
.fx-cloud--dim { opacity: .18; }

.fx-bird { position: absolute; left: 0; top: var(--y, 20%); width: var(--s, 30px); animation: fx-fly var(--t, 40s) linear infinite; animation-delay: var(--dl, 0s); }
.fx-bird svg { width: 100%; overflow: visible; display: block; }
.fx-bird path { fill: none; stroke: #1d3b2b; stroke-width: 2.8; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: fx-flap .55s ease-in-out infinite alternate; }
.fx-sky--dark .fx-bird path { stroke: #fff6d6; opacity: .85; }

.fx-leaf { position: absolute; top: -40px; width: 18px; height: 18px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, var(--green-300), var(--green-600)); opacity: .0; animation: fx-leaf-fall var(--t, 16s) linear infinite; animation-delay: var(--dl, 0s); }
.fx-leaf:nth-child(3n) { background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); }

.fx-firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffd75e; box-shadow: 0 0 10px 3px rgba(255, 215, 94, .8); animation: fx-glow var(--t, 4s) ease-in-out infinite, fx-wander calc(var(--t, 4s) * 3) ease-in-out infinite; animation-delay: var(--dl, 0s); }

/* ---- scene SVG motion ---- */
.fx-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-sway var(--sd, 5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fx-sway-lg { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-sway-lg var(--sd, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fx-turbine-blades { animation: fx-rotate var(--rt, 9s) linear infinite; }
.fx-drive { animation: fx-drive var(--dur, 40s) linear infinite; animation-delay: var(--dl, -8s); }
.fx-bob { animation: fx-bob .42s ease-in-out infinite alternate; }
.fx-wheel { animation: fx-rotate 3s linear infinite; }
.fx-wheel-s { animation: fx-rotate 1.6s linear infinite; }
.fx-puff { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: fx-puff 1.9s ease-out infinite; animation-delay: var(--dl, 0s); fill: rgba(80, 80, 80, .55); }
.fx-dust { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: fx-dust 1.4s ease-out infinite; animation-delay: var(--dl, 0s); fill: rgba(122, 90, 56, .6); }
.fx-tine { transform-box: fill-box; transform-origin: 50% 0; animation: fx-tine .5s ease-in-out infinite alternate; }

.fx-drone-path { animation: fx-patrol 18s ease-in-out infinite alternate; }
.fx-drone-hover { animation: fx-hover 2.4s ease-in-out infinite alternate; }
.fx-prop { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-prop .09s linear infinite alternate; }
.fx-drop { opacity: 0; stroke: #7fd0ff; stroke-width: 2.4; stroke-linecap: round; animation: fx-drop 1.2s ease-in infinite; animation-delay: var(--dl, 0s); }

.fx-sprinkler-arc { fill: none; stroke: rgba(130, 206, 255, .9); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 9; animation: fx-spray 1.1s linear infinite; }
.fx-solar-shine { animation: fx-shine 5s ease-in-out infinite; }

/* Pause everything that scrolled off-screen (set by farm-fx.js) */
.fx-paused *, .fx-paused { animation-play-state: paused !important; }

/* ---- grass edge dividers between sections ---- */
.fx-edge-host { position: relative; }
.fx-edge { position: absolute; left: 0; right: 0; top: 1px; height: 34px; transform: translateY(-100%); z-index: 2; pointer-events: none; line-height: 0; }
.fx-edge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-edge .blades { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.05); transition: transform 1.3s var(--ease-spring); }
.fx-edge.in .blades { transform: scaleY(1); }
.fx-edge.in .blades-a { animation: fx-grass 5.5s ease-in-out 1.4s infinite; }
.fx-edge.in .blades-b { animation: fx-grass 6.7s ease-in-out 1.9s infinite reverse; }

/* ---- footer evening field ---- */
.fx-foot { position: absolute; left: 0; right: 0; top: 0; height: 110px; overflow: hidden; z-index: 0; pointer-events: none; line-height: 0; }
.fx-foot svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes fx-rotate { to { transform: rotate(360deg); } }
@keyframes fx-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.6deg); } }
@keyframes fx-sway-lg { 0%, 100% { transform: rotate(-1deg) skewX(-1deg); } 50% { transform: rotate(1.2deg) skewX(1.4deg); } }
@keyframes fx-grass { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3.5deg); } }
@keyframes fx-drive { from { transform: translateX(-320px); } to { transform: translateX(1900px); } }
@keyframes fx-bob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes fx-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .75; } 100% { opacity: 0; transform: translate(-26px, -34px) scale(1.7); } }
@keyframes fx-dust { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 25% { opacity: .7; } 100% { opacity: 0; transform: translate(-34px, -14px) scale(1.8); } }
@keyframes fx-tine { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes fx-patrol { from { transform: translateX(0); } to { transform: translateX(380px); } }
@keyframes fx-hover { from { transform: translateY(-4px) rotate(-1.5deg); } to { transform: translateY(5px) rotate(1.5deg); } }
@keyframes fx-prop { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
@keyframes fx-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translateY(84px); } }
@keyframes fx-spray { to { stroke-dashoffset: -28; } }
@keyframes fx-shine { 0%, 55%, 100% { opacity: 0; } 70% { opacity: .75; } }
@keyframes fx-sunrise { from { transform: translateY(160px) scale(.8); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes fx-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes fx-drift { from { transform: translateX(-30vw); } to { transform: translateX(115vw); } }
@keyframes fx-fly { from { transform: translate(-10vw, 0); } 50% { transform: translate(50vw, -26px); } to { transform: translate(110vw, 10px); } }
@keyframes fx-flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }
@keyframes fx-leaf-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: .85; } 50% { transform: translate(60px, 45vh) rotate(180deg); } 100% { opacity: 0; transform: translate(-40px, 100vh) rotate(420deg); } }
@keyframes fx-glow { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes fx-wander { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(18px, -14px); } 66% { transform: translate(-12px, 10px); } }
@keyframes fx-blob { 0%, 100% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; } 50% { border-radius: 42% 58% 40% 60% / 58% 42% 58% 42%; } }
@keyframes fx-leaf { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
@keyframes fx-underline { to { transform: scaleX(1); } }

/* ---------- Staggered reveal for grids ---------- */
.animate-on-scroll { transition-delay: calc(var(--i, 0) * 70ms) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr !important; }
  .hero-visual { max-width: 380px; margin: 0 auto; }
  .fx-sun-wrap { left: auto; right: 6%; top: 10%; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; padding-bottom: 200px; }
  .hero-visual { display: none; }
  .fx-hide-sm { display: none; }
  .fx-scene--hero { height: 200px; }
  .page-header { padding-bottom: calc(var(--space-2xl) + 70px) !important; }
}

/* ---------- Reduced motion: keep the scenery, freeze it ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-sky *, .fx-scene *, .fx-edge *, .fx-foot *, .fx-leaf, .fx-bird, .fx-cloud, .fx-firefly,
  .section-label::before, .hero-title .highlight::after { animation: none !important; }
  .hero-title .highlight::after { transform: scaleX(1); }
  .fx-edge .blades { transform: none; transition: none; }
  .fx-drive { transform: translateX(520px); }
  .fx-leaf, .fx-firefly { display: none; }
}

/* rotating parts spin around their own centre */
.fx-wheel, .fx-wheel-s, .fx-turbine-blades, .fx-sun .rays { transform-box: fill-box; transform-origin: 50% 50%; }
.fx-scene--hero { height: clamp(200px, 22vw, 400px); }
.fx-foot .fx-drive { filter: brightness(.55) saturate(.8); }

/* keep hero content inside narrow screens */
.hero .container > * { min-width: 0; }
.hero-buttons { flex-wrap: wrap; }
@media (max-width: 1024px) {
  .hero-content { text-align: center; }
  .hero-buttons, .hero-stats { justify-content: center; }
  .hero-description { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.2rem, 11vw, 2.8rem) !important; }
  .hero-stats { gap: 1rem; flex-wrap: wrap; }
}
@media (max-width: 1024px) {
  .hero-stats { display: flex !important; flex-wrap: nowrap; gap: .9rem; }
  .hero-stat { text-align: left; }
}

/* ---- Hero fits the screen height (desktop & laptop) ---- */
.hero {
  --scene-h: clamp(170px, min(22vw, 33vh), 400px);
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  max-height: 1100px;
  padding-bottom: calc(var(--scene-h) * .6) !important;
}
.fx-scene--hero { height: var(--scene-h); }
.hero-title { font-size: clamp(2.2rem, min(4.5vw, 7.4vh), 3.9rem) !important; }
.hero-description { font-size: clamp(.95rem, 1.9vh, 1.05rem) !important; margin-bottom: clamp(.8rem, 2vh, 1.4rem) !important; }
.hero-buttons { margin-bottom: clamp(.8rem, 2vh, 1.4rem) !important; }
.hero-badge { margin-bottom: clamp(.6rem, 1.6vh, 1.2rem) !important; }
.hero-visual { max-width: min(500px, 58vh); }
@media (max-width: 1024px) {
  .hero { height: auto; max-height: none; min-height: 100svh; padding-bottom: calc(var(--scene-h) * .75) !important; }
}

/* =====================================================================
   COMPANY OVERVIEW — aerial map of the farm's fields
   Each statistic is a plot seen from above: furrows, crop colour, and a
   dirt path between plots.
   ===================================================================== */
.fx-fieldmap {
  gap: 12px !important;
  padding: 14px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .22), transparent 40%),
    repeating-linear-gradient(115deg, rgba(120, 84, 48, .10) 0 3px, transparent 3px 11px),
    #d9c5a0;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 30px 50px -28px rgba(59, 42, 30, .55);
  align-content: stretch;
}
.fx-plot {
  --ang: 90deg;
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 1.4rem 1rem !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0 !important;
  border-radius: 24px !important;
  background: repeating-linear-gradient(var(--ang), var(--c1) 0 16px, var(--c2) 16px 32px) !important;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), inset 0 -18px 30px -14px rgba(0, 0, 0, .22) !important;
  transition: transform .45s var(--ease-spring), border-radius .6s ease;
}
.fx-plot:hover { transform: translateY(-4px) rotate(-.6deg) scale(1.02); border-radius: 38px 18px 38px 18px !important; }
.fx-plot:hover { animation: fx-furrow 1.2s linear infinite; }
@keyframes fx-furrow { to { background-position: 0 32px; } }

.fx-plot-0 { --c1:#6db33f; --c2:#5fa02b; --ang: 90deg; }
.fx-plot-1 { --c1:#e8b94a; --c2:#dca836; --ang: 0deg; }
.fx-plot-2 { --c1:#4c9a33; --c2:#3f8221; --ang: 65deg; }
.fx-plot-3 { --c1:#9a6a41; --c2:#8a5a35; --ang: 90deg; }
.fx-plot-4 { --c1:#94cf55; --c2:#85c244; --ang: 25deg; }
.fx-plot-5 { --c1:#2f7a2b; --c2:#27691f; --ang: 0deg; }
.fx-plot-3::after, .fx-plot-1::after {
  /* little seedlings on the ploughed / wheat plots */
  content: ""; position: absolute; inset: auto 0 0 0; height: 36px; opacity: .55;
  background: radial-gradient(ellipse 5px 8px at 10px 30px, #8fd14f 98%, transparent) 0 0 / 28px 36px repeat-x;
}

.fx-plot-icon {
  position: absolute; top: 12px; left: 12px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--blob);
  background: #fff;
  color: var(--green-800);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4);
}
.fx-plot-icon svg { width: 20px; height: 20px; }
.fx-plot:hover .fx-plot-icon { animation: fx-blob 2s ease-in-out infinite; }

/* numbers sit on a paper tag so they read on any crop colour */
.fx-plot .stat-number-large {
  display: inline-block;
  background: #fffef6 !important;
  -webkit-text-fill-color: var(--green-900) !important;
  background-clip: border-box !important;
  color: var(--green-900);
  padding: .02em .38em;
  border-radius: 16px;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .45);
  transform: rotate(-1.5deg);
}
.fx-plot .stat-label-large {
  margin-top: .65rem;
  padding: .18rem .7rem;
  border-radius: 999px;
  background: rgba(15, 61, 46, .88);
  color: #fff !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .fx-plot { min-height: 150px; }
  .fx-fieldmap { padding: 10px; gap: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { .fx-plot:hover { animation: none; } }

/* =====================================================================
   FEATURE CARDS — seed packets
   Crimped top edge, tear line, round "window" icon, hard ink shadow.
   ===================================================================== */
.feature-card {
  --band: var(--green-500);
  border: 2px solid var(--green-900) !important;
  border-radius: 8px 8px 26px 26px !important;
  background: #fffdf4 !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
  padding-top: 2.7rem !important;
  rotate: -.7deg;
  transition: rotate .45s var(--ease-spring), transform .45s var(--ease-spring), box-shadow .3s ease;
}
.feature-card:nth-child(even) { rotate: .7deg; }
.feature-card:nth-child(4n+1) { --band: var(--green-500); }
.feature-card:nth-child(4n+2) { --band: var(--gold-500); }
.feature-card:nth-child(4n+3) { --band: var(--green-800); }
.feature-card:nth-child(4n+4) { --band: var(--gold-700); }

/* crimped top + tear line */
.feature-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 16px;
  background:
    linear-gradient(135deg, var(--band) 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(225deg, var(--band) 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(var(--band), var(--band)) 0 0 / 100% 6px no-repeat;
  opacity: .95;
}
.feature-card .feature-icon::before { display: none; }
.feature-card:hover {
  rotate: 0deg;
  transform: translateY(-9px);
  box-shadow: 8px 14px 0 var(--green-900) !important;
  border-color: var(--green-900) !important;
}
.feature-card:active { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--green-900) !important; }
.feature-card::after { display: none; }

.feature-icon {
  border-radius: 50% !important;
  border: 2px solid var(--green-900);
  background: #fff !important;
  box-shadow: inset 0 0 0 4px var(--band), 0 0 0 0 transparent !important;
  font-size: 1.6rem;
}
.feature-card:hover .feature-icon { animation: none; transform: scale(1.1) rotate(-8deg); }
.feature-title { font-size: 1.12rem; line-height: 1.2 !important; margin-bottom: .5rem; }
.feature-text { border-top: 2px dashed rgba(15, 61, 46, .22); padding-top: .7rem; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .feature-card { rotate: 0deg; } }

/* =====================================================================
   CROP DOCTOR — symptoms as plant labels staked in the soil
   ===================================================================== */
.problem-solution-container {
  position: relative;
  border-radius: 30px !important;
  border: 2px solid var(--green-900) !important;
  box-shadow: 8px 9px 0 var(--green-900) !important;
  background:
    linear-gradient(rgba(63, 130, 33, .08) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(63, 130, 33, .08) 1px, transparent 1px) 0 0 / 28px 100%,
    #fffef7 !important;
  padding: clamp(1.2rem, 3vw, 2.2rem) !important;
}
.symptom-grid { gap: 1.6rem 1.2rem !important; padding-bottom: .5rem; }

.symptom-card {
  position: relative;
  margin-bottom: 44px;
  padding: 1.2rem .8rem !important;
  background: #fff !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 14px 14px 6px 6px !important;
  box-shadow: 4px 4px 0 var(--green-900) !important;
  transform-origin: 50% 100%;
  transition: transform .4s var(--ease-spring), background .25s ease, box-shadow .25s ease !important;
}
.symptom-card::after {            /* wooden stake */
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 10px; height: 38px;
  margin-left: -5px;
  background: linear-gradient(90deg, #b98a57, #9c6e3f);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.symptom-card::before {           /* soil mound */
  content: "";
  position: absolute;
  left: 50%; top: calc(100% + 26px);
  width: 76px; height: 16px;
  margin-left: -38px;
  background: radial-gradient(ellipse at 50% 100%, #6b4a2d 60%, transparent 62%);
}
.symptom-card:hover { background: var(--gold-100) !important; transform: rotate(-2.2deg) translateY(-4px) !important; box-shadow: 6px 8px 0 var(--green-900) !important; }
.symptom-card:nth-child(even):hover { transform: rotate(2.2deg) translateY(-4px) !important; }
.symptom-card.active { background: var(--gold-400) !important; transform: translateY(-8px) !important; box-shadow: 6px 12px 0 var(--green-900) !important; }
.symptom-card.active .symptom-title::after { content: " \2713"; color: var(--green-900); }
.symptom-icon { font-size: 2.1rem !important; transition: transform .4s var(--ease-spring); }
.symptom-card:hover .symptom-icon, .symptom-card.active .symptom-icon { transform: scale(1.18) rotate(-6deg); }
.symptom-title { font-family: var(--font-display); font-weight: 700 !important; color: var(--green-900) !important; }

.solution-result-box {
  position: relative;
  border-radius: 22px !important;
  border: 2px dashed var(--green-700) !important;
  border-left: 8px solid var(--gold-500) !important;
  background: #f3fae6 !important;
  padding-right: clamp(5rem, 14vw, 9rem) !important;
  overflow: hidden;
}
.solution-result-box.active { animation: fx-rx .5s var(--ease-out); }
.solution-result-box.active::after {
  content: "";
  position: absolute; right: 1.4rem; bottom: 0;
  width: 70px; height: 96px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 96'%3E%3Cpath d='M35 96V40' stroke='%233f8221' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M35 62C14 62 6 46 6 30c20 0 29 14 29 32z' fill='%235fa02b'/%3E%3Cpath d='M35 46C54 46 64 32 64 14c-20 0-29 14-29 32z' fill='%2388c244'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  transform-origin: 50% 100%;
  animation: fx-grow 1s var(--ease-spring) .15s both;
}
@keyframes fx-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fx-rx { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#solutionResultTitle { font-family: var(--font-display); letter-spacing: -.02em; color: var(--green-900) !important; }

/* =====================================================================
   TESTIMONIALS — notes from the field on deep-canopy cards
   ===================================================================== */
.testimonial-card {
  background: linear-gradient(165deg, #17543a 0%, #0f3d2e 100%) !important;
  border: 2px solid var(--green-900) !important;
  box-shadow: 6px 8px 0 var(--gold-500) !important;
  color: #fff;
  overflow: hidden;
  padding-bottom: 3.2rem !important;
}
.testimonial-card:hover { box-shadow: 8px 14px 0 var(--gold-500) !important; border-color: var(--green-900) !important; }
.quote-icon { font-size: 0 !important; height: 3.2rem; line-height: 1; }
.quote-icon::before { content: "\201C"; font-family: var(--font-display); font-weight: 800; font-size: 6rem; line-height: .9; color: var(--gold-400); display: block; }
.testimonial-text { color: rgba(255, 255, 255, .92) !important; font-size: 1.04rem; font-style: normal !important; line-height: 1.7; }
.testimonial-text .fx-mark { color: var(--green-900); background: var(--gold-400); padding: .05em .4em; border-radius: 8px; font-weight: 800; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.testimonial-name { color: #fff !important; font-family: var(--font-display); font-weight: 700; }
.testimonial-role { color: var(--gold-200) !important; }
.testimonial-avatar { box-shadow: 0 0 0 3px var(--gold-400) !important; }
.testimonial-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background:
    radial-gradient(ellipse 6px 12px at 12px 34px, #5fa02b 98%, transparent) 0 0 / 24px 34px repeat-x,
    radial-gradient(ellipse 5px 9px at 24px 34px, #88c244 98%, transparent) 0 6px / 24px 34px repeat-x;
  opacity: .75;
  transform-origin: 50% 100%;
  animation: fx-grass 6s ease-in-out infinite;
}

/* =====================================================================
   HOW IT WORKS — seed to harvest (a real sequence, so numbered)
   ===================================================================== */
.fx-journey { position: relative; }
.fx-journey::before {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 118px;
  border-top: 5px dotted #9c6e3f;
  opacity: .55; z-index: 0;
}
.fx-journey .step-card {
  z-index: 1;
  border: 2px solid var(--green-900) !important;
  border-radius: 24px !important;
  background: #fffdf4 !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
  padding-top: 1.2rem !important;
}
.fx-journey .step-card:hover { box-shadow: 8px 14px 0 var(--green-900) !important; }
.fx-stage { display: block; width: 130px; height: 100px; margin: 0 auto .2rem; overflow: visible; }
.fx-stage .fx-g { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); }
.step-card.visible .fx-g { animation: fx-grow 1.1s var(--ease-spring) calc(var(--i, 0) * .22s + .35s) both; }
.fx-journey .step-number {
  position: absolute; top: -16px; left: -12px;
  width: 44px !important; height: 44px !important;
  margin: 0 !important;
  background: var(--gold-500) !important;
  color: var(--green-900) !important;
  border: 2px solid var(--green-900);
  box-shadow: 3px 3px 0 var(--green-900);
  font-size: 1.15rem !important;
}
.fx-mini-tractor { position: absolute; top: 56px; left: 2%; width: 78px; z-index: 2; pointer-events: none; animation: fx-march 16s linear infinite; }
.fx-mini-tractor svg { width: 100%; display: block; overflow: visible; }
@keyframes fx-march { from { left: 2%; } to { left: 90%; } }
@media (max-width: 1024px) { .fx-journey::before, .fx-mini-tractor { display: none; } }

/* =====================================================================
   FACTORY ILLUSTRATION (about page) + R&D lab notebook cards
   ===================================================================== */
.fx-factory {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 34px;
  border: 3px solid var(--green-900);
  box-shadow: 8px 10px 0 var(--green-900);
  background: #fdeeb9;
  line-height: 0;
}
.fx-factory svg { width: 100%; height: 100%; display: block; }
.fx-win { fill: #ffe9a8; animation: fx-twinkle 4.5s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fx-sun-s { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-breathe 5s ease-in-out infinite; }
.fx-cloud-s { animation: fx-cloud-s 26s linear infinite; }
.fx-belt { animation: fx-belt 1s linear infinite; }
.fx-bag { animation: fx-bag 9s linear infinite; animation-delay: var(--dl, 0s); }
.fx-truck { animation: fx-truck 18s linear infinite; animation-delay: -6s; }
.fx-still { }
.fx-bubble { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-bubble 2.8s ease-in infinite; animation-delay: var(--dl, 0s); opacity: 0; }
@keyframes fx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes fx-cloud-s { from { transform: translateX(-160px); } to { transform: translateX(700px); } }
@keyframes fx-belt { to { stroke-dashoffset: -22; } }
@keyframes fx-bag { from { transform: translateX(0); } to { transform: translateX(420px); } }
@keyframes fx-truck { from { transform: translateX(-200px); } to { transform: translateX(720px); } }
@keyframes fx-bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translateY(-34px) scale(1.2); } }

.fx-lab {
  position: relative;
  padding: 1.1rem 1.3rem 1.6rem !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 12px 12px 26px 12px !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
  background:
    linear-gradient(rgba(63, 130, 33, .09) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(63, 130, 33, .09) 1px, transparent 1px) 0 0 / 24px 100%,
    #fffef7 !important;
  rotate: -.6deg;
  margin-top: 14px;
}
.fx-lab:nth-child(2) { rotate: .7deg; }
.fx-lab:hover { rotate: 0deg; }
.fx-lab::before {                 /* strip of tape */
  content: "";
  position: absolute; top: -14px; left: 50%;
  width: 90px; height: 26px; margin-left: -45px;
  background: rgba(240, 162, 27, .55);
  border-left: 3px dotted rgba(255, 255, 255, .7); border-right: 3px dotted rgba(255, 255, 255, .7);
  transform: rotate(-3deg);
}
.fx-lab h4 { color: var(--green-900); letter-spacing: -.02em; }
.fx-lab-art {
  display: block; width: 100%; height: auto; margin: .6rem 0 .8rem;
  background: linear-gradient(180deg, #e4f3ff 0%, #f1f8e1 100%);
  border: 2px solid var(--green-900);
  border-radius: 16px;
  overflow: hidden;
}
.fx-lab-art .bubble { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-bubble 2.4s ease-in infinite; animation-delay: var(--dl, 0s); opacity: 0; }
.fx-lab-art .fx-drop2 { animation: fx-drop2 2.2s ease-in infinite; opacity: 0; }
.fx-lab-art .fx-scan { animation: fx-scan 5s ease-in-out infinite alternate; }
.fx-lab-art .fx-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-bar var(--t, 3s) ease-in-out infinite alternate; }
.fx-lab-art .fx-draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: fx-draw 5s ease-in-out infinite; }
.fx-lab-art .fx-grow-p { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-sway 4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes fx-drop2 { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes fx-scan { from { transform: translateX(-62px); } to { transform: translateX(0); } }
@keyframes fx-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes fx-draw { 0% { stroke-dashoffset: 220; } 60%, 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .testimonial-card::after, .solution-result-box.active::after, .fx-mini-tractor, .fx-factory *, .fx-lab-art * { animation: none !important; }
  .fx-lab-art .fx-draw { stroke-dashoffset: 0; }
  .fx-stage .fx-g { transform: scale(1); }
  .fx-lab, .fx-lab:nth-child(2) { rotate: 0deg; }
}

/* =====================================================================
   PARTNER BENEFITS — bento board (one hero tile + five supporting tiles)
   ===================================================================== */
.fx-bento {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 1.1rem !important;
}
.fx-bento .feature-card {
  --tile: #fffdf4; --ink: var(--green-900);
  rotate: 0deg !important;
  text-align: left !important;
  padding: 1.5rem 1.5rem 1.4rem !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 28px !important;
  background: var(--tile) !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 190px;
}
.fx-bento .feature-card::before { display: none; }
.fx-bento .feature-card:hover { transform: translateY(-6px); box-shadow: 8px 12px 0 var(--green-900) !important; }
.fx-bento .feature-title { color: var(--ink) !important; font-size: 1.25rem; margin-bottom: .35rem; }
.fx-bento .feature-text { color: var(--ink) !important; opacity: .86; border: 0; padding-top: 0; font-size: .95rem; }
.fx-bento .feature-icon {
  position: absolute; top: 1.1rem; left: 1.1rem;
  margin: 0 !important;
  background: #fff !important;
  border: 2px solid var(--green-900) !important;
  box-shadow: 3px 3px 0 var(--green-900) !important;
  rotate: -6deg;
  z-index: 2;
}

/* tile colours and sizes */
.fx-bento .fx-b0 { --tile: #0f3d2e; --ink: #fff; grid-column: span 3; grid-row: span 2; min-height: 400px; }
.fx-bento .fx-b0 .feature-title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: #fff !important; }
.fx-bento .fx-b0 .feature-text { font-size: 1.02rem; max-width: 26rem; }
.fx-bento .fx-b1 { --tile: #f6b83a; grid-column: span 3; }
.fx-bento .fx-b2 { --tile: #dff0c4; grid-column: span 3; }
.fx-bento .fx-b3 { --tile: #fffdf4; grid-column: span 2; }
.fx-bento .fx-b4 { --tile: #2d6420; --ink: #fff; grid-column: span 2; }
.fx-bento .fx-b5 { --tile: #fdeec2; grid-column: span 2; }
.fx-bento .fx-b4 .feature-icon, .fx-bento .fx-b0 .feature-icon { color: var(--green-900); }

/* tile art */
.fx-b-art { position: absolute; pointer-events: none; }
.fx-b0 .fx-b-art { left: 0; right: 0; top: 3.2rem; width: 100%; height: 56%; }
.fx-b-art--sm { right: 1rem; top: 1rem; width: 52%; height: 56%; }
.fx-border { animation: fx-dashmove 2.2s linear infinite; }
.fx-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-ring 2.4s ease-out infinite; }
.fx-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-pin 2.4s var(--ease-spring) infinite; }
.fx-bento .fx-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-bar var(--t, 3s) ease-in-out infinite alternate; }
.fx-draw2 { stroke-dasharray: 230; stroke-dashoffset: 230; animation: fx-draw 5s ease-in-out infinite; }
@keyframes fx-dashmove { to { stroke-dashoffset: -32; } }
@keyframes fx-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes fx-pin { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(0); } }
@media (max-width: 900px) {
  .fx-bento { grid-template-columns: repeat(2, 1fr); }
  .fx-bento .feature-card { grid-column: span 1 !important; grid-row: auto !important; }
  .fx-bento .fx-b0 { grid-column: span 2 !important; min-height: 340px; }
  .fx-b-art--sm { display: none; }
}
@media (max-width: 560px) {
  .fx-bento { grid-template-columns: 1fr; }
  .fx-bento .feature-card, .fx-bento .fx-b0 { grid-column: span 1 !important; }
}
@media (prefers-reduced-motion: reduce) { .fx-b-art *, .fx-border { animation: none !important; } .fx-draw2 { stroke-dashoffset: 0; } }

/* bento spacing fixes: reserve room for the sticker icon, give art its own band */
.fx-bento { grid-auto-rows: minmax(230px, auto); }
.fx-bento .feature-card { padding-top: 5.4rem !important; min-height: 230px; }
.fx-bento .fx-b0 { min-height: 470px; padding-top: 1.5rem !important; }
.fx-bento .fx-b0 .feature-icon { z-index: 3; }
.fx-b0 .fx-b-art { top: 1rem; height: 56%; }
.fx-bento .fx-b4 { min-height: 270px; }
.fx-b-art--sm { top: .9rem; right: 1rem; width: 48%; height: 38%; }

/* =====================================================================
   CONTACT — airmail letter, signposts, ringing phone, fenced map
   ===================================================================== */
.fx-contact .section-title { letter-spacing: -.03em; }

/* the message form is a letter */
.fx-letter {
  position: relative;
  padding: 2.2rem 1.8rem 1.8rem;
  background: #fffef7;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(135deg, #3f8221 0 14px, #fffdf4 14px 28px, #f0a21b 28px 42px, #fffdf4 42px 56px) 12;
  box-shadow: 8px 9px 0 var(--green-900);
}
.fx-letter .form-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-800);
}
.fx-letter .form-control { background: #fff; border-radius: 10px !important; border: 2px solid rgba(15, 61, 46, .55) !important; }
.fx-stamp {
  position: absolute; top: -2px; right: 6px;
  width: 54px; height: 64px;
  background: #f6b83a;
  border: 3px dotted var(--green-900);
  border-radius: 4px;
  rotate: 5deg;
  box-shadow: 2px 3px 0 rgba(15, 61, 46, .35);
}
.fx-stamp::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #88c244, #2d6420);
  rotate: -12deg;
  animation: fx-leaf 4s ease-in-out infinite;
}
.fx-postmark {
  position: absolute; top: 4px; right: 58px;
  width: 62px; height: 62px;
  border: 3px solid rgba(15, 61, 46, .4);
  border-radius: 50%;
  rotate: -12deg;
}
.fx-postmark::before, .fx-postmark::after {
  content: ""; position: absolute; left: 6px; right: -34px; height: 3px; background: rgba(15, 61, 46, .4);
}
.fx-postmark::before { top: 22px; }
.fx-postmark::after { top: 32px; }

/* info cards become signposts */
.fx-contact .glass-card {
  background: #fffdf4 !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 22px !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
}
.fx-contact .glass-card:hover { box-shadow: 7px 11px 0 var(--green-900) !important; }
.fx-contact .glass-card > div[style*="width:56px"] {
  background: var(--gold-400) !important;
  border: 2px solid var(--green-900);
  border-radius: var(--blob) !important;
  box-shadow: 3px 3px 0 var(--green-900);
  transition: transform .4s var(--ease-spring);
}
.fx-contact .glass-card:hover > div[style*="width:56px"] { transform: rotate(-8deg) scale(1.08); }
.fx-contact .glass-card a[href^="tel"], .fx-contact .glass-card a[href^="mailto"] { color: var(--green-700) !important; text-decoration: underline; text-decoration-color: var(--gold-500); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* callback: a phone that rings */
.fx-callback { background: #fdeec2 !important; position: relative; }
.fx-callback h3 { display: flex; align-items: center; gap: .6rem; color: var(--green-900); }
.fx-callback h3::before {
  content: "\260E";
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--green-900); color: var(--gold-300);
  border-radius: var(--blob);
  font-size: 1.4rem;
  transform-origin: 50% 60%;
  animation: fx-phone 2.6s ease-in-out infinite;
}
@keyframes fx-phone {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(-16deg); } 72% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); }
  84% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); }
}

/* map: framed, with a wooden fence along the top */
.fx-mapband { position: relative; padding-top: calc(var(--space-3xl) + 24px) !important; }
.fx-mapband::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46'%3E%3Crect x='0' y='16' width='60' height='6' fill='%23b98a57' stroke='%236b4a2d' stroke-width='1.5'/%3E%3Crect x='0' y='30' width='60' height='6' fill='%23b98a57' stroke='%236b4a2d' stroke-width='1.5'/%3E%3Cpath d='M22 46V10l5-8 5 8v36z' fill='%23d6a86a' stroke='%236b4a2d' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x left bottom / 60px 46px;
}
.fx-mapband .map-container {
  border: 3px solid var(--green-900);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 8px 10px 0 var(--green-900);
}

@media (prefers-reduced-motion: reduce) { .fx-callback h3::before, .fx-stamp::after { animation: none; } }
.fx-contact .fx-callback { background: #fdeec2 !important; }
.fx-letter { padding-top: 3.4rem; }

/* =====================================================================
   CROP SOLUTIONS — crop badges, deficiency chips, growth timeline
   ===================================================================== */
.crop-content-box, .crop-content-box:hover {
  background: none !important; border: 0 !important; box-shadow: none !important;
  transform: none !important; border-radius: 0 !important;
}

/* crop selector — seed-packet tiles: emoji disc on top, name below */
.crop-tabs {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem !important; margin-bottom: var(--space-2xl) !important;
}
.crop-tab-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1rem .5rem .9rem !important;
  font-family: var(--font-display); font-weight: 700 !important; font-size: .98rem;
  background: #fffdf4 !important; color: var(--green-900) !important;
  border: 2px solid var(--green-900) !important;
  border-radius: 22px 22px 22px 6px !important;
  box-shadow: 0 0 0 var(--green-900);
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .25s ease, background .25s ease, color .25s ease !important;
}
.crop-tab-btn .ct-ico {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  font-size: 1.7rem; line-height: 1;
  background: var(--gold-100); border: 2px dashed rgba(0,0,0,.18);
  transition: transform .45s var(--ease-spring), background .25s ease;
}
.crop-tab-btn:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--green-900); }
.crop-tab-btn:hover .ct-ico { transform: rotate(-12deg) scale(1.1); }
.crop-tab-btn.active {
  background: var(--green-900) !important; color: #fff !important;
  transform: translateY(-4px); box-shadow: 0 6px 0 var(--gold-400);
}
.crop-tab-btn.active .ct-ico { background: var(--gold-400); border-style: solid; border-color: rgba(0,0,0,.12); }
.crop-tab-btn.active::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px;
  background: var(--gold-400); border: 2px solid var(--green-900); border-top: 0; border-left: 0;
  transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0;
}
.crop-tab-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--green-900); }
@media (max-width: 900px) {
  .crop-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .crop-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem !important; }
  .crop-tab-btn { font-size: .88rem; padding: .8rem .3rem .75rem !important; }
  .crop-tab-btn .ct-ico { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
}

.crop-content-box.active { animation: fx-rx .55s var(--ease-out); }
.crop-content-box h2 { color: var(--green-900) !important; font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important; line-height: 1.05; letter-spacing: -.035em; }
.crop-content-box h3 { color: var(--green-900); font-size: 1.4rem; letter-spacing: -.02em; }

/* photo as a taped print */
.crop-content-box .grid-2 > div:last-child {
  position: relative;
  border: 3px solid var(--green-900);
  border-radius: 34px 34px 34px 110px !important;
  box-shadow: 8px 10px 0 var(--green-900) !important;
  rotate: 1.2deg;
  background: #fff;
}
.crop-content-box .grid-2 > div:last-child::before {
  content: ""; position: absolute; z-index: 2; top: 12px; left: 50%;
  width: 86px; height: 24px; margin-left: -43px;
  background: rgba(240, 162, 27, .6);
  border-left: 3px dotted rgba(255, 255, 255, .7); border-right: 3px dotted rgba(255, 255, 255, .7);
  rotate: -3deg;
}

/* deficiency chips */
.fx-watch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.fx-watch-label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); margin-right: .2rem; }
.fx-chip {
  display: inline-flex; flex-direction: column;
  padding: .35rem .8rem .4rem;
  background: var(--gold-100); color: var(--green-900);
  border: 2px solid var(--green-900); border-radius: 14px;
  font-weight: 800; font-size: .95rem; line-height: 1.15;
  box-shadow: 2px 3px 0 var(--green-900);
}
.fx-chip em { font-style: normal; font-weight: 500; font-size: .76rem; color: var(--text-secondary); }

/* the schedule becomes a growth timeline: the leaf grows with the crop */
.table-responsive { overflow: visible !important; box-shadow: none !important; background: none; margin-top: 1rem !important; }
.crop-schedule-table { display: block; background: none !important; }
.crop-schedule-table thead { position: absolute; left: -9999px; }
.crop-schedule-table tbody { display: block; position: relative; padding-left: 66px; }
.crop-schedule-table tbody::before {
  content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 6px; border-radius: 9px;
  background: linear-gradient(var(--green-300), var(--green-600) 60%, var(--gold-500));
}
.crop-schedule-table tr {
  display: grid; grid-template-columns: 1.1fr 1.2fr .9fr; gap: .5rem 1.4rem;
  position: relative;
  margin-bottom: 1.2rem; padding: 1.1rem 1.4rem;
  background: #fffdf4 !important;
  border: 2px solid var(--green-900); border-radius: 20px;
  box-shadow: 4px 5px 0 var(--green-900);
  transition: transform .35s var(--ease-spring), box-shadow .25s ease;
}
.crop-schedule-table tr:hover { transform: translateX(6px); box-shadow: 6px 7px 0 var(--green-900); background: #fffdf4; }
.crop-schedule-table td { display: block; padding: 0 !important; border: 0 !important; }
.crop-schedule-table td:first-child {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; color: var(--green-900);
}
.crop-schedule-table td:not(:first-child)::before {
  content: attr(data-label); display: block; margin-bottom: .15rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-700);
}
.crop-schedule-table td:nth-child(3) { font-weight: 700; color: var(--green-800); }
.crop-schedule-table td:nth-child(4) { grid-column: 1 / -1; }
.crop-schedule-table td:nth-child(4)::before { display: inline-block; margin-right: .5rem; }
.crop-schedule-table td:nth-child(4) { display: inline-flex; align-items: baseline; flex-wrap: wrap; width: fit-content; background: var(--gold-100); border: 2px dashed var(--gold-600); border-radius: 12px; padding: .3rem .8rem !important; font-weight: 700; color: var(--green-900); }
/* the node on the vine */
.crop-schedule-table tr::before {
  --sz: calc(20px + 18px * var(--k, 0));
  content: ""; position: absolute; top: 1rem; left: calc(-40px - var(--sz) / 2);
  width: var(--sz); height: var(--sz);
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, var(--green-400), var(--green-700));
  border: 2px solid var(--green-900);
  rotate: -20deg;
  transition: rotate .5s var(--ease-spring), scale .4s ease;
}
.crop-schedule-table tr:hover::before { rotate: 10deg; scale: 1.15; }
.crop-schedule-table tr:last-child::before { background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); }

@media (max-width: 760px) {
  .crop-schedule-table tr { grid-template-columns: 1fr; }
  .crop-schedule-table tbody { padding-left: 54px; }
  .crop-schedule-table tr::before { left: calc(-34px - var(--sz) / 2); }
  .crop-schedule-table tbody::before { left: 17px; }
}
@media (prefers-reduced-motion: reduce) { .crop-content-box.active { animation: none; } }

/* =====================================================================
   KNOWLEDGE CENTER — field-journal pages with illustrated covers
   ===================================================================== */
.blog-filters { gap: .8rem !important; margin-bottom: var(--space-2xl) !important; }
.blog-filter-btn {
  padding: .55rem 1.3rem !important;
  font-family: var(--font-display); font-weight: 700 !important;
  background: #fffdf4 !important; color: var(--green-900) !important;
  border: 2px solid var(--green-900) !important;
  box-shadow: 3px 4px 0 var(--green-900);
  transition: transform .35s var(--ease-spring), box-shadow .25s ease, background .25s ease !important;
}
.blog-filter-btn:hover { transform: translateY(-3px) rotate(-1.5deg); background: var(--gold-100) !important; box-shadow: 4px 7px 0 var(--green-900); }
.blog-filter-btn.active { background: var(--gold-400) !important; color: var(--green-900) !important; transform: translateY(-3px); box-shadow: 4px 8px 0 var(--green-900); }

.blog-card {
  border: 2px solid var(--green-900) !important;
  border-radius: 24px !important;
  background: #fffdf4 !important;
  box-shadow: 5px 6px 0 var(--green-900) !important;
  rotate: -.5deg;
}
.blog-card:nth-child(even) { rotate: .5deg; }
.blog-card:hover { rotate: 0deg; transform: translateY(-8px) !important; box-shadow: 8px 14px 0 var(--green-900) !important; }
.fx-cover { position: relative; height: 200px; border-bottom: 2px solid var(--green-900); overflow: hidden; line-height: 0; }
.fx-cover svg { width: 100%; height: 100%; display: block; }
.fx-tag {
  position: absolute; top: 12px; left: 12px; line-height: 1;
  padding: .38rem .8rem;
  background: var(--green-900); color: var(--gold-300);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .25);
}
.blog-meta { gap: .5rem !important; flex-wrap: wrap; }
.blog-meta span {
  padding: .22rem .7rem;
  background: var(--gold-100); color: var(--green-900);
  border: 1.5px solid rgba(15, 61, 46, .35); border-radius: 999px;
  font-weight: 700; font-size: .75rem;
}
.blog-title { color: var(--green-900) !important; letter-spacing: -.025em; line-height: 1.2; }

.fx-needle { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-swing 2.6s ease-in-out infinite alternate; }
.fx-bagbob { animation: fx-bagbob 2.8s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.fx-lens { animation: fx-lens 5s ease-in-out infinite alternate; }
.fx-twinkle { animation: fx-twinkle 2.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fx-steam { fill: none; opacity: 0; animation: fx-steam 3.4s ease-out infinite; animation-delay: var(--dl, 0s); }
.fx-worm { animation: fx-worm 3s ease-in-out infinite alternate; }
@keyframes fx-swing { from { transform: rotate(-38deg); } to { transform: rotate(42deg); } }
@keyframes fx-bagbob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes fx-lens { from { transform: translateX(-70px) rotate(-3deg); } to { transform: translateX(96px) rotate(3deg); } }
@keyframes fx-steam { 0% { opacity: 0; transform: translateY(14px); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes fx-worm { from { transform: translateX(-10px); } to { transform: translateX(26px); } }
@media (prefers-reduced-motion: reduce) { .fx-cover * { animation: none !important; } .blog-card, .blog-card:nth-child(even) { rotate: 0deg; } }