:root {
  --background: 44 42% 96%;
  --foreground: 142 29% 13%;
  --primary: 139 48% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 39 78% 55%;
  --secondary-foreground: 142 29% 13%;
  --muted: 78 21% 88%;
  --muted-foreground: 142 12% 38%;
  --destructive: 4 70% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 75 20% 78%;
  --card: 48 55% 98%;
  --shadow-sm: 0 8px 24px hsl(139 48% 18% / 0.08);
  --shadow-md: 0 18px 48px hsl(139 48% 18% / 0.14);
  --shadow-lg: 0 28px 80px hsl(139 48% 18% / 0.2);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}
.dark {
  --background: 142 28% 8%;
  --foreground: 48 45% 92%;
  --primary: 132 47% 54%;
  --primary-foreground: 142 29% 9%;
  --secondary: 38 86% 62%;
  --secondary-foreground: 142 29% 9%;
  --muted: 142 18% 16%;
  --muted-foreground: 78 18% 70%;
  --destructive: 5 73% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 142 18% 24%;
  --card: 142 22% 11%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, hsl(var(--primary) / .18), transparent 30%),
    radial-gradient(circle at 88% 18%, hsl(var(--secondary) / .18), transparent 28%),
    linear-gradient(120deg, hsl(var(--background)), hsl(var(--muted) / .36));
  z-index: -2;
}
body::after {
  content: "🌿  🍃  🌱";
  position: fixed;
  left: 2rem;
  bottom: 5rem;
  opacity: .18;
  letter-spacing: 2rem;
  font-size: 2rem;
  animation: floatLeaves 9s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes floatLeaves {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}
.bg-1 { background: hsl(var(--background)); }
.bg-2 { background: hsl(var(--card)); }
.bg-3 { background: hsl(var(--muted)); }
.bg-4 { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); }
.text-primary { color: hsl(var(--foreground)); }
.text-secondary { color: hsl(var(--muted-foreground)); }
.text-tertiary { color: hsl(var(--primary)); }
.accent { color: hsl(var(--secondary)); }
.glass {
  background: hsl(var(--card) / .72);
  border: 1px solid hsl(var(--border) / .72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.card-hover { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: hsl(var(--primary) / .45); }
button, a, input, select, textarea { transition: all var(--transition-fast); }
input, select, textarea { font-size: max(16px, 1rem); }
.animate-in { animation: riseIn .62s ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.safe-bottom { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.hero-art {
  background:
    linear-gradient(135deg, hsl(139 48% 22% / .88), hsl(38 86% 42% / .48)),
    radial-gradient(circle at 76% 28%, hsl(48 90% 78% / .65), transparent 22%),
    linear-gradient(45deg, hsl(126 40% 38%), hsl(78 45% 66%));
}
.hero-art::after {
  content: "🚜 🌾 🥥 🍯 🥬";
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  font-size: clamp(2rem, 7vw, 5rem);
  opacity: .88;
}
@media (max-width: 767px) {
  :root { --radius-lg: 22px; --radius-md: 16px; }
  main { padding-bottom: 6.25rem; }
  body::after { left: .75rem; bottom: 5.75rem; font-size: 1.25rem; letter-spacing: 1rem; opacity: .12; }
  .card-hover:hover { transform: none; box-shadow: var(--shadow-sm); }
  .hero-art::after { right: .75rem; bottom: .75rem; font-size: clamp(1.75rem, 12vw, 3.25rem); opacity: .58; }
  .mobile-full-bleed { margin-left: -.75rem; margin-right: -.75rem; border-radius: 0; }
}
@media (max-width: 380px) {
  .brand-full { display: none; }
}