:root {
  --primary: #006e2a;
  --primary-container: #00c853;
  --surface: #f3fcee;
  --surface-container: #e7f1e3;
  --on-surface: #151e15;
  --on-surface-variant: #3c4a3c;
  --outline-variant: #bbcbb8;
  --leaf-tint: #e8f5e9;
  --white: #ffffff;
  --black: #121212;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("fonts/material-symbols-outlined.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active,
.r.on {
  opacity: 1;
  transform: translateY(0);
}

.leaf-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(0, 110, 42, 0.06) 1px, transparent 0);
  background-size: 32px 32px;
}

.soft-green-gradient {
  background: linear-gradient(135deg, #f3fcee 0%, #e7f1e3 100%);
}

.nature-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 110, 42, 0.1);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 200, 83, 0.1);
}

.glass-dark {
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(10px);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.leaf-mask {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z' /%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: currentColor;
}

#particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.shimmer-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-slow {
  animation: spin-slow 8s linear infinite;
}

.stat-counter {
  font-variant-numeric: tabular-nums;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.accordion-item.active .accordion-content {
  max-height: 600px;
  padding-bottom: 24px;
}

.accordion-item.active .chevron-icon {
  transform: rotate(180deg);
}

.no-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scroll::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
a {
  max-width: 100%;
}

@media (max-width: 767px) {
  header {
    flex-wrap: wrap;
  }

  header > nav,
  body > nav.fixed > div.hidden {
    display: flex !important;
    flex: 0 0 100%;
    order: 3;
    min-width: 0;
    overflow-x: auto;
    gap: 1.25rem;
    padding: 0.5rem 0 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  header > nav::-webkit-scrollbar,
  body > nav.fixed > div.hidden::-webkit-scrollbar {
    display: none;
  }

  header > nav a,
  body > nav.fixed > div.hidden a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body > nav.fixed {
    flex-wrap: wrap;
  }

  h1,
  h2,
  h3,
  p {
    overflow-wrap: anywhere;
  }

  .grid {
    min-width: 0;
  }

  table {
    min-width: 620px;
  }

  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
  }

  .fixed.bottom-0 {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}