@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans10pt-Bold.woff2") format("woff2"), url("fonts/NunitoSans10pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/NunitoSans10pt-Regular.woff2") format("woff2"), url("fonts/NunitoSans10pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Bold.woff2") format("woff2"), url("fonts/PlayfairDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-base: "Nunito Sans", sans-serif;
  --font-heading: "Playfair Display", sans-serif;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-h4: 1.5rem;
  --font-size-small: 0.875rem;
  --font-weight-base: 400;
  --font-weight-bold: 700;

  /* Primary Brand Colors */
  --color-primary: #6b8e23; /* Olive green */
  --color-secondary: #b3a175; /* Earthy beige */
  --color-accent: #ffcb77; /* Warm yellow accent */
  --color-deep-green: #3e5f2e; /* Deep natural green */

  /* Neutrals & Backgrounds */
  --color-background: #ffffff; /* Soft light cream */
  --color-surface: #e8f8c7; /* Card / section backgrounds */
  --color-border: #ccc7b9; /* Light natural border */
  --color-shadow: rgba(0, 0, 0, 0.05); /* Light shadow */

  /* Supporting Accents */
  --color-accent-green: #a3c586; /* Light leaf green */
  --color-accent-brown: #a47149; /* Wood brown */
  --color-accent-orange: #f4a261; /* Sunset orange */
  --color-accent-blue: #8ecae6; /* Sky blue */
  --color-accent-rose: #ddb6a1; /* Muted rose pink */

  /* Text */
  --text-main: #2f2f2f; /* Main body text */
  --text-heading: #3e5f2e; /* For headings (deep green) */
  --text-muted: #3e5f2e; /* Less emphasis */
  --text-inverse: #ffffff; /* On dark backgrounds */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

* {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--text-heading);
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: 1.5;
  color: var(--text-main);
  background: var(--color-background);
}

button {
  border: 0;
  cursor: pointer;
}

figure {
  margin: 0;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

blockquote {
  margin: 0;
}

.aspect-3-4 {
  aspect-ratio: 3/4;
}

.aspect-4-3 {
  aspect-ratio: 4/3;
}

.aspect-16-9 {
  aspect-ratio: 16/9;
}

.aspect-1-1 {
  aspect-ratio: 1/1;
}

.facile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.btn-primary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--color-deep-green);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--text-main);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
}

.btn-secondary:hover {
  background: var(--color-accent-orange);
  transform: translateY(-2px);
}

/* Header */
.facile-header {
  background: var(--color-background);
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px var(--color-shadow);
}

.facile-header .facile-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.facile-logo img {
  width: 50px;
}

.facile-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-sm);
}

.nav-link {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  color: var(--text-main);
  text-decoration: none;
  padding: 5px var(--space-sm);
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links li:not(:last-child) .nav-link::after {
  content: "/";
  color: var(--color-primary);
  font-size: var(--font-size-large);
  position: absolute;
  right: -0.5rem;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
  background: none;
  padding: var(--space-sm);
}

.toggle-icon,
.toggle-close {
  width: 32px;
  height: 32px;
}

.toggle-close {
  display: none;
}

/* Hero Section */
.hero-section {
  position: relative;
  background: var(--color-deep-green);
  padding: var(--space-xl) 0;
}

.hero-bg {
  position: relative;
}

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-overlay {
  position: relative;
  padding: var(--space-lg);
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(107, 142, 35, 0.8);
  transform: skewY(-3deg);
}

.hero-overlay .inner {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: var(--font-size-h1);
  color: var(--text-inverse);
  margin-bottom: var(--space-md);
}

.hero-subtitle {
  font-size: var(--font-size-h3);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.hero-text {
  font-size: var(--font-size-large);
  color: var(--text-inverse);
  margin-bottom: var(--space-lg);
}

/* Why Grow */
.why-grow {
  padding: var(--space-xl) 0;
  background: var(--color-surface);
}

.section-title {
  font-size: var(--font-size-h2);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  font-size: var(--font-size-h3);
  color: var(--color-accent-brown);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.section-desc {
  font-size: var(--font-size-base);
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.why-grow-grid {
  display: flex;
  gap: var(--space-lg);
}

.why-grow-img {
  width: 50%;
}

.why-grow-content {
  width: 50%;
}

.content-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-md);
}

.why-grow-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.why-grow-list li {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

.why-grow-list li::before {
  content: "🌱";
  position: absolute;
  left: 0;
  top: 0;
}

/* Natural Methods */
.natural-methods {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.methods-grid {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.method-card {
  flex: 1;
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.method-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.method-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.method-card .inner {
  position: relative;
  z-index: 2;
}

.method-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.method-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.method-text {
  font-size: var(--font-size-base);
}

/* Easy Crops */
.easy-crops {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.crops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.crop-card {
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.crop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.crop-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.crop-card .inner {
  position: relative;
  z-index: 2;
}

.crop-img {
  margin-bottom: var(--space-md);
}

.crop-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.crop-text {
  font-size: var(--font-size-base);
}

/* Testimonials */
.testimonials {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.testimonial-card {
  padding: var(--space-md);
  position: relative;
}

.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.testimonial-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.testimonial-card .inner {
  position: relative;
  z-index: 2;
}

.testimonial-img {
  width: 100px;
  margin: 0 auto var(--space-md);
}

.testimonial-quote {
  font-size: var(--font-size-large);
  font-style: italic;
  color: var(--text-main);
  margin-bottom: var(--space-md);
}

.testimonial-author {
  font-size: var(--font-size-base);
  color: var(--color-accent-brown);
  text-align: center;
}

/* Tip of the Month */
.tip-month {
  position: relative;
  padding: var(--space-xl) 0;
  background: var(--color-deep-green);
}

.tip-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tip-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip-overlay {
  position: relative;
  padding: var(--space-lg);
  max-width: 500px;
  margin: 0 auto;
}

.tip-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(107, 142, 35, 0.8);
  transform: skewY(-3deg);
}

.tip-overlay .section-title {
  color: var(--color-background);
}

.tip-overlay .section-subtitle {
  color: var(--color-accent-blue);
}

.tip-overlay .inner {
  position: relative;
  z-index: 2;
}

.tip-content {
  background: var(--color-surface);
  padding: var(--space-md);
}

.tip-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.tip-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

/* No Garden */
.no-garden {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.no-garden-content {
  max-width: 600px;
  margin: 0 auto;
}

.no-garden-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-md);
}

.no-garden-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.no-garden-list li {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

.no-garden-list li::before {
  content: "🌿";
  position: absolute;
  left: 0;
  top: 0;
}

/* Guides & Tips */
.guides-tips {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.guide-card {
  text-align: center;
  padding: var(--space-md);
  position: relative;
  text-decoration: none;
  color: var(--text-main);
}

.guide-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.guide-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.guide-card .inner {
  position: relative;
  z-index: 2;
}

.guide-img {
  margin-bottom: var(--space-md);
}

.guide-title {
  font-size: var(--font-size-h4);
}

/* CTA Section */
.cta-section {
  padding: var(--space-xl) 0;
  background: var(--color-accent);
  text-align: center;
}

/* Footer */
.facile-footer {
  padding: var(--space-xl) 0;
  background: var(--color-deep-green);
  color: var(--text-inverse);
}

.footer-nav {
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.footer-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--font-size-base);
}

.footer-link:hover {
  color: var(--color-accent-orange);
}

.footer-bottom {
  text-align: center;
}

.footer-copy {
  font-size: var(--font-size-small);
  color: var(--text-inverse);
}

@media (max-width: 1023px) {
  .facile-nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .facile-nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-background);
    padding: var(--space-md);
  }

  .nav-links {
    flex-direction: column;
    align-items: center;
  }

  .nav-link::after {
    display: none;
  }

  .testimonials-grid,
  .guides-grid {
    grid-template-columns: 1fr;
  }

  .why-grow-grid,
  .methods-grid {
    flex-direction: column;
  }

  .why-grow-img,
  .why-grow-content {
    width: 100%;
  }

  .methods-grid,
  .crops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-h1: 2.6rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-small: 0.9375rem;
  }
  .hero-title {
    font-size: var(--font-size-h2);
  }

  .hero-subtitle {
    font-size: var(--font-size-h4);
  }

  .methods-grid,
  .crops-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-direction: column;
  }
}

/* Choose Spot */
.choose-spot {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.spot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.spot-card {
  position: relative;
  padding: var(--space-md);
}

.spot-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.spot-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.spot-card .inner {
  position: relative;
  z-index: 2;
}

.spot-img {
  margin-bottom: var(--space-md);
}

.spot-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.spot-text {
  font-size: var(--font-size-base);
}

/* Soil Preparation */
.soil-prep {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.soil-grid {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.soil-card {
  flex: 1;
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.soil-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.soil-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.soil-card .inner {
  position: relative;
  z-index: 2;
}

.soil-img {
  margin-bottom: var(--space-md);
}

.soil-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.soil-text {
  font-size: var(--font-size-base);
}

/* Seasonality */
.seasonality {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.seasonality-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.season-slide {
  flex: 0 0 100%;
  display: flex;
  gap: var(--space-md);
  padding: 0 0 50px;
}

.season-img {
  width: 50%;
}

.season-content {
  width: 50%;
  padding: var(--space-md);
}

.season-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.season-text {
  font-size: var(--font-size-base);
}

.slider-prev,
.slider-next {
  position: absolute;
  bottom: 0;
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-large);
  padding: var(--space-sm);
  border-radius: 50%;
  cursor: pointer;
}

.slider-prev {
  left: 50%;
  transform: translateX(-100%);
}

.slider-next {
  left: 50%;
  transform: translateX(100%);
}

.slider-prev:hover,
.slider-next:hover {
  background: var(--color-deep-green);
}

/* Companion Plants */
.companion-plants {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.companion-grid {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.companion-card {
  flex: 1;
  text-align: center;
  padding: var(--space-md);
  position: relative;
  cursor: pointer;
}

.companion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.companion-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.companion-card .inner {
  position: relative;
  z-index: 2;
}

.companion-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.companion-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.companion-info-box {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  text-align: center;
}

.info-text {
  font-size: var(--font-size-base);
  margin: 0;
}

/* Maintenance */
.maintenance {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.maintenance-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.maintenance-list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border);
}

.maintenance-icon {
  width: 64px;
}

.maintenance-item {
  flex: 1;
}

.maintenance-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.maintenance-text {
  font-size: var(--font-size-base);
}

/* Mistakes */
.mistakes {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.mistakes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.mistake-column {
  padding: var(--space-md);
}

.mistake-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-md);
}

.mistake-list {
  list-style: none;
  padding: 0;
}

.mistake-list li {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

.mistake-list li::before {
  content: "🌱";
  position: absolute;
  left: 0;
  top: 0;
}

/* Plant Guide */
.plant-guide {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.plant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.plant-card {
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.plant-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.plant-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.plant-card .inner {
  position: relative;
  z-index: 2;
}

.plant-img {
  margin-bottom: var(--space-md);
}

.plant-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.plant-text {
  font-size: var(--font-size-base);
}

/* CTA Tips */
.cta-tips {
  padding: var(--space-xl) 0;
  background: var(--color-accent);
  text-align: center;
}

@media (max-width: 1023px) {
  .spot-grid,
  .soil-grid,
  .plant-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .season-slide {
    flex-direction: column;
  }

  .season-img,
  .season-content {
    width: 100%;
  }

  .mistakes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .spot-grid,
  .soil-grid,
  .plant-grid,
  .companion-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}

/* Watering */
.watering {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.watering-steps {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.step-item {
  flex: 1;
  text-align: center;
}

.step-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.step-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.step-text {
  font-size: var(--font-size-base);
}

/* Compost */
.compost {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.compost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.compost-card {
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.compost-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.compost-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.compost-card .inner {
  position: relative;
  z-index: 2;
}

.compost-img {
  margin-bottom: var(--space-md);
}

.compost-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.compost-text {
  font-size: var(--font-size-base);
}

/* Pest Protection */
.pest-protection {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.pest-grid {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.pest-img {
  width: 50%;
}

.pest-cards {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pest-card {
  padding: var(--space-md);
  position: relative;
}

.pest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.pest-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.pest-card .inner {
  position: relative;
  z-index: 2;
}

.pest-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.pest-text {
  font-size: var(--font-size-base);
}

/* Recycling */
.recycling {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.recycling-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-lg) auto 0;
}

.scroll {
  overflow: auto;
}

.recycling-item {
  text-align: center;
}

.recycling-img {
  margin-bottom: var(--space-md);
}

.recycling-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.recycling-text {
  font-size: var(--font-size-base);
}

/* Moon Calendar */
.moon-calendar {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.calendar-item {
  text-align: center;
}

.calendar-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.calendar-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.calendar-text {
  font-size: var(--font-size-base);
}

/* Less Water */
.less-water {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.water-infographic {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.infographic-img {
  width: 50%;
}

.water-stats {
  width: 50%;
  list-style: none;
  padding: 0;
}

.water-stats li {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

.water-stats li::before {
  content: "💧";
  position: absolute;
  left: 0;
  top: 0;
}

/* Tools Comparison */
.tools-comparison {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.tools-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-lg);
}

.tools-table th,
.tools-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: left;
}

.tools-table th {
  background: var(--color-surface);
  font-size: var(--font-size-h4);
}

.tools-table td {
  font-size: var(--font-size-base);
}

/* CTA DIY */
.cta-diy {
  padding: var(--space-xl) 0;
  background: var(--color-accent);
  text-align: center;
}

@media (max-width: 1023px) {
  .watering-steps,
  .compost-grid,
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pest-grid,
  .water-infographic {
    flex-direction: column;
  }

  .pest-img,
  .pest-cards,
  .infographic-img,
  .water-stats {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .watering-steps,
  .compost-grid,
  .calendar-grid,
  .recycling-gallery {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .tools-table {
    font-size: var(--font-size-small);
  }
}

/* Wooden Planter */
.wooden-planter {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.planter-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.step-card {
  position: relative;
  padding: var(--space-md);
}

.step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.step-card:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.step-card .inner {
  position: relative;
  z-index: 2;
}

.step-img {
  margin-bottom: var(--space-md);
}

.step-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.step-text {
  font-size: var(--font-size-base);
}

/* Pallet Composter */
.pallet-composter {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.composter-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 600px;
  margin: var(--space-lg) auto 0;
}

.stage-item {
  text-align: center;
}

.stage-img {
  margin-bottom: var(--space-md);
}

.stage-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.stage-text {
  font-size: var(--font-size-base);
}

/* Drip Irrigation */
.drip-irrigation {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.irrigation-layout {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.irrigation-img {
  width: 50%;
}

.irrigation-tips {
  width: 50%;
  list-style: none;
  padding: 0;
}

.irrigation-tips li {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: var(--space-md);
}

.irrigation-tips li::before {
  content: "💧";
  position: absolute;
  left: 0;
  top: 0;
}

/* Mini Greenhouse */
.mini-greenhouse {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.greenhouse-tabs {
  margin-top: var(--space-lg);
}

.tab-nav {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  overflow: auto;
}

.tab-button {
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
}

.tab-button.active {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.tab-content {
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: 8px;
  display: none;
}

.tab-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.tab-text {
  font-size: var(--font-size-base);
}

/* Solar Lighting */
.solar-lighting {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.lighting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.lighting-item {
  position: relative;
}

.lighting-img {
  margin-bottom: var(--space-sm);
}

.lighting-caption {
  font-size: var(--font-size-small);
  text-align: center;
  color: var(--text-muted);
}

/* Repurpose Furniture */
.repurpose-furniture {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.furniture-split {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.furniture-item {
  width: 50%;
}

.furniture-img {
  margin-bottom: var(--space-sm);
}

.furniture-caption {
  font-size: var(--font-size-small);
  text-align: center;
  color: var(--text-muted);
}

/* Natural Decor */
.natural-decor {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.decor-tiles {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.decor-tile {
  flex: 1;
  text-align: center;
  padding: var(--space-md);
  position: relative;
}

.decor-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: skewX(-5deg);
  transition: transform 0.3s;
}

.decor-tile:hover::before {
  transform: skewX(-5deg) translateY(-5px);
}

.decor-tile .inner {
  position: relative;
  z-index: 2;
}

.decor-img {
  margin-bottom: var(--space-md);
}

.decor-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.decor-text {
  font-size: var(--font-size-base);
}

/* Safety Tip */
.safety-tip {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.safety-box {
  display: flex;
  gap: var(--space-md);
  max-width: 600px;
  margin: var(--space-lg) auto 0;
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: 8px;
  align-items: flex-start;
}

.safety-icon {
  width: 64px;
  flex: 0 0 auto;
}

.safety-content {
  flex: 1;
}

.safety-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.safety-text {
  font-size: var(--font-size-base);
}

/* Download Plans */
.download-plans {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.plans-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}

@media (max-width: 1023px) {
  .planter-steps,
  .lighting-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .irrigation-layout,
  .furniture-split {
    flex-direction: column;
  }

  .irrigation-img,
  .irrigation-tips,
  .furniture-item {
    width: 100%;
  }

  .decor-tiles {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .planter-steps,
  .lighting-grid {
    grid-template-columns: 1fr;
  }
}

main {
  overflow: hidden;
}

/* Featured Article */
.featured-article {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.featured-content {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.featured-img {
  width: 50%;
}

.featured-text {
  width: 50%;
}

.preview-text,
.full-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

.full-text {
  display: none;
}

.read-toggle {
  background: var(--color-primary);
  color: var(--text-inverse);
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-size-base);
}

.read-toggle:hover {
  background: var(--color-deep-green);
}

/* Article Grid */
.article-grid {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.filter-tags {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.filter-button {
  background: var(--color-surface);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
}

.filter-button.active {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.grid-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-card {
  display: flex;
  gap: var(--space-md);
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: 8px;
}

.article-img {
  width: 40%;
  flex-shrink: 0;
}

.article-content {
  flex: 1;
}

.article-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.article-preview,
.article-full {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

.article-full {
  display: none;
}

/* Subscribe Blog */
.subscribe-blog {
  padding: var(--space-xl) 0;
  position: relative;
}

.subscribe-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.subscribe-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.subscribe-overlay {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  padding: var(--space-lg);
  border-radius: 8px;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 400px;
  margin: var(--space-lg) auto 0;
}

.subscribe-form input[type="email"] {
  padding: var(--space-sm);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.privacy-checkbox {
  flex-direction: row;
  font-size: var(--font-size-small);
}

.privacy-checkbox a {
  color: var(--color-deep-green);
  text-decoration: underline;
}

.form-group .privacy-checkbox input {
  width: auto;
}

@media (max-width: 1023px) {
  .featured-content {
    flex-direction: column;
  }

  .featured-img,
  .featured-text {
    width: 100%;
  }
  .article-card {
    flex-direction: column;
  }
  .article-img {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .filter-tags {
    flex-wrap: wrap;
  }
}

/* Philosophy */
.philosophy {
  padding: var(--space-xl) 0;
  position: relative;
}

.philosophy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.philosophy-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.philosophy-overlay {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  padding: var(--space-lg);
  border-radius: 8px;
  text-align: center;
}

.philosophy-quote {
  font-size: var(--font-size-h3);
  font-style: italic;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.philosophy-text {
  font-size: var(--font-size-base);
  max-width: 800px;
  margin: 0 auto;
}

/* Team */
.team {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.team-card {
  text-align: center;
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: 8px;
}

.team-avatar {
  width: 120px;
  margin: 0 auto var(--space-md);
}

.team-name {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.team-role {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.team-bio {
  font-size: var(--font-size-base);
}

/* Commitments */
.commitments {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.commitments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.commitment-item {
  text-align: center;
}

.commitment-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.commitment-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.commitment-text {
  font-size: var(--font-size-base);
}

/* Impact */
.impact {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.stat-item {
  text-align: center;
}

.stat-icon {
  width: 64px;
  margin: 0 auto var(--space-md);
}

.stat-title {
  font-size: var(--font-size-h3);
  color: var(--color-background);
  margin-bottom: var(--space-sm);
}

.stat-text {
  font-size: var(--font-size-base);
}

/* FAQ */
.faq {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.faq-accordion {
  max-width: 800px;
  margin: var(--space-lg) auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  background: var(--color-surface);
  padding: var(--space-md);
  font-size: var(--font-size-base);
  text-align: left;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "▼";
  position: absolute;
  right: var(--space-md);
  transition: transform 0.3s;
}

.faq-question.active::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: var(--space-md);
  font-size: var(--font-size-base);
  background: var(--color-surface);
  display: none;
}

/* CTA Contact */
.cta-contact {
  padding: var(--space-xl) 0;
  background: var(--color-accent);
  text-align: center;
}

@media (max-width: 1023px) {
  .team-grid,
  .commitments-grid,
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .team-grid,
  .commitments-grid,
  .impact-stats {
    grid-template-columns: 1fr;
  }
}

/* Contact Info */
.contact-info {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.contact-layout {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.contact-map {
  width: 50%;
}

iframe {
  border: 0;
}

.contact-details {
  width: 50%;
}

.details-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-md);
}

.details-text {
  font-size: var(--font-size-base);
}

.details-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Contact Form */
.contact-form {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.form-content {
  max-width: 600px;
  margin: var(--space-lg) auto 0;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-sm);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.form-group textarea {
  resize: vertical;
}

.privacy-checkbox {
  font-size: var(--font-size-small);
}

/* Contact FAQ */
.contact-faq {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

/* Find Us */
.find-us {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
}

.map-embed {
  margin-top: var(--space-lg);
}

/* Opening Hours */
.opening-hours {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.hours-item {
  text-align: center;
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: 8px;
}

.hours-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.hours-text {
  font-size: var(--font-size-base);
}

/* Contribute */
.contribute {
  padding: var(--space-xl) 0;
  background: var(--color-accent-green);
  text-align: center;
}

/* Express FAQ */
.express-faq {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

@media (max-width: 1023px) {
  .contact-layout {
    flex-direction: column;
  }

  .contact-map,
  .contact-details {
    width: 100%;
  }

  .hours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .hours-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero Gradient */
.hero-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
}

/* Privacy Content */
.privacy-content {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.privacy-details {
  margin-top: var(--space-lg);
}

.details-title {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-sm);
}

.details-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

.details-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Terms Content */
.terms-content {
  padding: var(--space-xl) 0;
  background: var(--color-background);
}

.terms-details {
  margin-top: var(--space-lg);
}

/* Thank You Content */
.thank-you-content {
  padding: var(--space-xl) 0;
  background: var(--color-background);
  text-align: center;
}

.thank-you-actions {
  margin-top: var(--space-lg);
}

.action-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

a {
  color: inherit;
}