@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --background: 40 20% 98%;
  --foreground: 30 10% 15%;
  --card: 0 0% 100%;
  --card-foreground: 30 10% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 30 10% 15%;
  --primary: 152 45% 25%;
  --primary-foreground: 40 20% 98%;
  --secondary: 35 40% 92%;
  --secondary-foreground: 30 25% 30%;
  --muted: 35 20% 94%;
  --muted-foreground: 30 10% 45%;
  --accent: 30 45% 85%;
  --accent-foreground: 30 25% 20%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 35 20% 88%;
  --input: 35 20% 88%;
  --ring: 152 45% 25%;
  --radius: 0.5rem;
  --ecoroot-color-bg: hsl(var(--background));
  --ecoroot-color-surface: hsl(var(--card));
  --ecoroot-color-surface-soft: hsl(var(--secondary));
  --ecoroot-color-primary: hsl(var(--primary));
  --ecoroot-color-primary-soft: hsl(152 35% 40%);
  --ecoroot-color-text: hsl(var(--foreground));
  --ecoroot-color-muted: hsl(var(--muted-foreground));
  --ecoroot-color-border: hsl(var(--border));
  --ecoroot-color-accent: hsl(var(--accent));
  --ecoroot-color-accent-strong: hsl(30 35% 72%);
  --ecoroot-color-success: hsl(152 40% 30%);
  --ecoroot-shadow-card: 0 12px 30px rgba(35, 92, 66, 0.08);
  --ecoroot-shadow-hover: 0 18px 44px rgba(35, 92, 66, 0.14);
  --ecoroot-radius-sm: 0.75rem;
  --ecoroot-radius-md: 1rem;
  --ecoroot-radius-lg: 1.5rem;
  --ecoroot-radius-xl: 2rem;
  --ecoroot-content-width: 1280px;
  --ecoroot-transition: 220ms ease;
  --ecoroot-gradient-wood: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--accent) / 0.4) 100%);
  --ecoroot-gradient-forest: linear-gradient(135deg, hsl(152 45% 25%) 0%, hsl(152 40% 18%) 100%);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ecoroot-color-bg);
  color: var(--ecoroot-color-text);
  font-family: 'Outfit', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.elementor-heading-title,
.ecoroot-font-display {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.02em;
}

.font-body,
p,
li,
a,
input,
textarea,
select,
button,
.elementor-widget-text-editor,
.elementor-button-text {
  font-family: 'Outfit', sans-serif;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.h-8 {
  height: 2rem;
}

.w-10 {
  width: 2.5rem;
}

.h-10 {
  height: 2.5rem;
}

.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}

.min-w-0 {
  min-width: 0;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

button {
  border: 0;
  background: transparent;
  border-radius: 0;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--ecoroot-color-primary);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ecoroot-color-surface-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--ecoroot-color-primary);
  border-radius: 999px;
}

.ecoroot-bg-wood {
  background: var(--ecoroot-gradient-wood);
}

.bg-forest-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(152 40% 18%) 100%);
}

.ecoroot-bg-forest {
  background: var(--ecoroot-gradient-forest);
  color: #fff;
}

.text-gradient-forest {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(152 35% 40%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ecoroot-text-gradient {
  background: linear-gradient(135deg, var(--ecoroot-color-primary) 0%, var(--ecoroot-color-primary-soft) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ecoroot-card {
  background: var(--ecoroot-color-surface);
  border: 1px solid var(--ecoroot-color-border);
  border-radius: var(--ecoroot-radius-lg);
  box-shadow: var(--ecoroot-shadow-card);
}

.ecoroot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: var(--ecoroot-color-primary);
}

.ecoroot-max-width {
  width: 100%;
  max-width: var(--ecoroot-content-width);
  margin-inline: auto;
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}

.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/20 {
  background-color: hsl(var(--primary) / 0.2);
}

.bg-white {
  background-color: #fff;
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-\[var\(--ecoroot-color-primary\)\] {
  background-color: var(--ecoroot-color-primary);
}

.bg-\[var\(--ecoroot-color-surface-soft\)\] {
  background-color: var(--ecoroot-color-surface-soft);
}

.bg-\[var\(--ecoroot-color-surface-soft\)\]\/70 {
  background-color: hsl(var(--secondary) / 0.7);
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-secondary\/30 {
  background-color: hsl(var(--secondary) / 0.3);
}

.bg-secondary\/50 {
  background-color: hsl(var(--secondary) / 0.5);
}

.bg-accent\/20 {
  background-color: hsl(var(--accent) / 0.2);
}

.text-primary {
  color: hsl(var(--primary));
}

.fill-primary {
  fill: hsl(var(--primary));
}

.text-primary\/80 {
  color: hsl(var(--primary) / 0.8);
}

.text-white {
  color: #fff;
}

.text-white\/20 {
  color: rgb(255 255 255 / 0.2);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-\[var\(--ecoroot-color-primary\)\] {
  color: var(--ecoroot-color-primary);
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-primary-foreground\/70 {
  color: hsl(var(--primary-foreground) / 0.7);
}

.text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}

.text-primary-foreground\/90 {
  color: hsl(var(--primary-foreground) / 0.9);
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-\[var\(--ecoroot-color-text\)\] {
  color: var(--ecoroot-color-text);
}

.text-\[var\(--ecoroot-color-text\)\]\/80 {
  color: hsl(var(--foreground) / 0.8);
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-\[var\(--ecoroot-color-muted\)\] {
  color: var(--ecoroot-color-muted);
}

a.text-white,
a.text-white:hover,
a.text-white:active,
a.text-white:visited {
  color: #fff;
}

a.text-\[var\(--ecoroot-color-primary\)\],
a.text-\[var\(--ecoroot-color-primary\)\]:hover,
a.text-\[var\(--ecoroot-color-primary\)\]:active,
a.text-\[var\(--ecoroot-color-primary\)\]:visited {
  color: var(--ecoroot-color-primary);
}

a.text-\[var\(--ecoroot-color-text\)\]\/80,
a.text-\[var\(--ecoroot-color-text\)\]\/80:active,
a.text-\[var\(--ecoroot-color-text\)\]\/80:visited {
  color: hsl(var(--foreground) / 0.8);
}

a.text-\[var\(--ecoroot-color-muted\)\],
a.text-\[var\(--ecoroot-color-muted\)\]:active,
a.text-\[var\(--ecoroot-color-muted\)\]:visited {
  color: var(--ecoroot-color-muted);
}

.border-border {
  border-color: hsl(var(--border));
}

.border-\[var\(--ecoroot-color-border\)\] {
  border-color: var(--ecoroot-color-border);
}

.border-\[var\(--ecoroot-color-primary\)\] {
  border-color: var(--ecoroot-color-primary);
}

.border-primary\/20 {
  border-color: hsl(var(--primary) / 0.2);
}

.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}

.border-primary\/40 {
  border-color: hsl(var(--primary) / 0.4);
}

.hover\:bg-primary\/5:hover {
  background-color: hsl(var(--primary) / 0.05);
}

.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-\[var\(--ecoroot-color-primary\)\]\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-white\/98 {
  background-color: rgb(255 255 255 / 0.98);
}

.backdrop-blur-lg {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.hover\:text-primary\/80:hover {
  color: hsl(var(--primary) / 0.8);
}

.hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}

.hover\:text-\[var\(--ecoroot-color-primary\)\]:hover {
  color: var(--ecoroot-color-primary);
}

.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.-translate-y-4 {
  transform: translateY(-1rem);
}

.translate-y-0 {
  transform: translateY(0);
}

.duration-500 {
  transition-duration: 500ms;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hover\:shadow-\[rgba\(35\,92\,66\,0\.2\)\]:hover {
  box-shadow: 0 20px 32px -10px rgba(35, 92, 66, 0.2);
}

.hover\:shadow-primary\/20:hover {
  --tw-shadow-color: hsl(var(--primary) / 0.2);
  box-shadow: 0 20px 32px -10px var(--tw-shadow-color);
}

.hover\:-translate-y-0\.5:hover {
  transform: translateY(-0.125rem);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.hover\:gap-3:hover {
  gap: 0.75rem;
}

.group:hover .group-hover\:bg-primary-foreground {
  background-color: hsl(var(--primary-foreground));
}

.group:hover .group-hover\:text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.group:hover .group-hover\:text-primary-foreground\/70 {
  color: hsl(var(--primary-foreground) / 0.7);
}

.group:hover .group-hover\:text-primary-foreground\/80 {
  color: hsl(var(--primary-foreground) / 0.8);
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:w-full {
  width: 100%;
}