:root {
  --agro-dark: #0a1f12;
  --agro-deep: #0f5132;
  --agro-mid: #16a34a;
  --agro-lime: #a3e635;
  --agro-cream: #fefce8;
  --agro-gold: #facc15;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #07140c;
  color: #e7f5ea;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ========== NOISE / GRAIN ========== */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ========== REVEAL ON SCROLL ========== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal-left { transform: translate3d(-48px, 0, 0); }
.reveal-right { transform: translate3d(48px, 0, 0); }
.reveal-scale { transform: scale(.92); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { transform: translate3d(0,0,0) scale(1); }

.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }

/* ========== KEYFRAMES ========== */
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}
@keyframes floatLg {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -18px, 0) rotate(2deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 20px 60px -10px rgba(34,197,94,.45); }
  50% { box-shadow: 0 0 0 18px rgba(34,197,94,0), 0 28px 80px -10px rgba(34,197,94,.65); }
}
@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes waFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.7); }
  70% { box-shadow: 0 0 0 22px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes ticker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.anim-float { animation: float 6s ease-in-out infinite; }
.anim-float-lg { animation: floatLg 8s ease-in-out infinite; }
.anim-spin-slow { animation: spinSlow 28s linear infinite; }

/* ========== HERO ========== */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(34,197,94,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 80%, rgba(163,230,53,.18), transparent 60%),
    linear-gradient(180deg, #0a1f12 0%, #07140c 60%, #060f08 100%);
}

.hero-photo {
  background-image:
    linear-gradient(180deg, rgba(6,15,8,.55) 0%, rgba(6,15,8,.82) 70%, #060f08 100%),
    url("https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=1920&q=85&fm=webp&auto=format");
  background-size: cover;
  background-position: center;
}

.headline-gradient {
  background: linear-gradient(120deg, #fefce8 0%, #a3e635 35%, #22c55e 65%, #fefce8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease infinite;
}

/* ========== CTA BUTTON ========== */
.cta-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .01em;
  color: #062d12;
  background: linear-gradient(135deg, #bef264 0%, #22c55e 50%, #a3e635 100%);
  background-size: 200% 200%;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  animation: pulseGlow 2.6s ease-in-out infinite, gradientShift 5s ease infinite;
  overflow: hidden;
  isolation: isolate;
}
.cta-main::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 300% 100%;
  animation: shine 3s linear infinite;
  mix-blend-mode: overlay;
}
.cta-main:hover { transform: translate3d(0, -3px, 0) scale(1.02); }
.cta-main:active { transform: translate3d(0, 0, 0) scale(.98); }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid rgba(163,230,53,.45);
  color: #e7f5ea;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s;
}
.cta-ghost:hover {
  border-color: #a3e635;
  background: rgba(34,197,94,.12);
  transform: translate3d(0, -2px, 0);
}

/* ========== CARDS ========== */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(15,81,50,.35) 0%, rgba(10,31,18,.6) 100%);
  border: 1px solid rgba(163,230,53,.18);
  border-radius: 20px;
  padding: 28px 24px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, box-shadow .5s;
  overflow: hidden;
  isolation: isolate;
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(163,230,53,.18), transparent 40%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(163,230,53,.6);
  box-shadow: 0 30px 60px -20px rgba(34,197,94,.35);
}
.card:hover::after { opacity: 1; }

/* ========== MARQUEE ========== */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
  gap: 48px;
}
.marquee:hover { animation-play-state: paused; }

/* ========== VALUE STACK ========== */
.value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(163,230,53,.25);
  gap: 16px;
}
.value-row:last-child { border-bottom: none; }
.value-old {
  text-decoration: line-through;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* ========== GUARANTEE BADGE ========== */
.seal {
  position: relative;
  width: 220px; height: 220px;
  background: radial-gradient(circle, #facc15 0%, #f59e0b 70%, #b45309 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 25px 80px -20px rgba(250,204,21,.6), inset 0 -20px 40px rgba(120,53,15,.3);
  overflow: hidden;
}
.seal::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  background-size: 300% 100%;
  animation: shine 4s linear infinite;
}
.seal-ring {
  position: absolute; inset: -14px;
  border: 2px dashed rgba(250,204,21,.5);
  border-radius: 50%;
  animation: spinSlow 22s linear infinite;
}

/* ========== FAQ ========== */
details.faq {
  background: linear-gradient(180deg, rgba(15,81,50,.35), rgba(10,31,18,.5));
  border: 1px solid rgba(163,230,53,.2);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 14px;
  transition: border-color .3s, box-shadow .3s;
}
details.faq[open] {
  border-color: rgba(163,230,53,.55);
  box-shadow: 0 20px 50px -20px rgba(34,197,94,.3);
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #f0fdf4;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 28px;
  font-weight: 300;
  color: #a3e635;
  transition: transform .35s;
  line-height: 1;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p {
  margin-top: 14px;
  color: #cbd5e1;
  line-height: 1.65;
  animation: rise .5s ease both;
}

/* ========== FLOATING WHATSAPP ========== */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  text-decoration: none;
  animation: waFloat 3s ease-in-out infinite, waPulse 2.2s ease-out infinite;
  box-shadow: 0 18px 40px -10px rgba(37,211,102,.7);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 34px; height: 34px; }
.wa-tooltip {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #0a1f12;
  color: #e7f5ea;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(163,230,53,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ========== NUMBERS / COUNTERS ========== */
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  background: linear-gradient(135deg, #a3e635, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ========== TIMELINE ========== */
.timeline-line {
  background: linear-gradient(180deg, transparent, #22c55e 20%, #a3e635 50%, #22c55e 80%, transparent);
}

/* ========== NAV ========== */
.nav-blur {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  background: rgba(7,20,12,.72);
  border-bottom: 1px solid rgba(163,230,53,.12);
}

/* ========== URGENCY BAR ========== */
.urgency-bar {
  background: linear-gradient(90deg, #b91c1c, #dc2626, #b91c1c);
  background-size: 200% 100%;
  animation: gradientShift 4s ease infinite;
}
.ticker-dot {
  width: 10px; height: 10px;
  background: #fecaca;
  border-radius: 50%;
  animation: ticker 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px #fee2e2;
}

/* ========== LIGHT SECTIONS ========== */
.light-section {
  position: relative;
  color: #0a1f12;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(22,163,74,.14), transparent 60%),
    radial-gradient(1000px 640px at 88% 100%, rgba(163,230,53,.22), transparent 60%),
    linear-gradient(180deg, #f3faea 0%, #e8f6d8 45%, #f1faea 100%);
  isolation: isolate;
}
.light-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15,81,50,.13) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.light-section > * { position: relative; z-index: 1; }

.light-section [class*="text-white"] { color: rgba(10,31,18,.72) !important; }
.light-section h1, .light-section h2, .light-section h3, .light-section h4 { color: #0a1f12; }
.light-section .text-agro-lime { color: #15803d !important; }
.light-section [class*="border-agro-lime"] { border-color: rgba(22,163,74,.45) !important; }
.light-section [class*="bg-agro-lime"] { background-color: rgba(22,163,74,.14) !important; }

.light-section .headline-gradient {
  background: linear-gradient(120deg, #0f5132 0%, #16a34a 35%, #65a30d 65%, #0f5132 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.light-section .card {
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(240,251,220,.86) 100%);
  border: 1px solid rgba(15,81,50,.18);
  box-shadow: 0 14px 34px -18px rgba(15,81,50,.28);
}
.light-section .card:hover {
  border-color: rgba(22,163,74,.55);
  box-shadow: 0 30px 60px -22px rgba(22,163,74,.32);
}
.light-section .card::after {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(22,163,74,.18), transparent 40%);
}

.light-section .value-row {
  border-bottom-color: rgba(15,81,50,.18);
}
.light-section .value-old { color: #64748b; }

.light-section details.faq {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(236,251,221,.84));
  border: 1px solid rgba(15,81,50,.18);
  box-shadow: 0 10px 30px -18px rgba(15,81,50,.25);
}
.light-section details.faq[open] {
  border-color: rgba(22,163,74,.55);
  box-shadow: 0 22px 50px -22px rgba(22,163,74,.28);
}
.light-section details.faq summary { color: #0a1f12; }
.light-section details.faq summary::after { color: #16a34a; }
.light-section details.faq p { color: rgba(10,31,18,.72); }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ========== MOBILE TWEAKS ========== */
@media (max-width: 640px) {
  .cta-main { padding: 18px 26px; font-size: 16px; width: 100%; justify-content: center; }
  .seal { width: 180px; height: 180px; }
  .wa-float { width: 58px; height: 58px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 30px; height: 30px; }
}