/* ===== Reset & Base ===== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }

  /* ===== Scroll Reveal (progressive enhancement) ===== */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }

  /* ===== Navbar ===== */
  #nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(253, 252, 250, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(26, 92, 58, 0.08);
    transition: box-shadow 0.3s ease;
  }
  #nav.scrolled {
    box-shadow: 0 4px 24px rgba(10, 39, 24, 0.08);
  }
  .menu-link {
    display: block;
    padding: 10px 16px;
    color: #4a3428;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s;
  }
  .menu-link:hover {
    background: #eaf3ec;
    color: #1a5c3a;
  }

  /* ===== Hero ===== */
  .hero-gradient {
    background: linear-gradient(135deg, #0f3822 0%, #1a5c3a 35%, #2d703a 60%, #4d8f58 85%, #74ad7c 100%);
    position: relative;
  }
  .hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 20% 80%, rgba(245, 240, 232, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(26, 92, 58, 0.3) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Decorative blobs */
  .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    pointer-events: none;
  }
  .blob-1 {
    width: 400px; height: 400px;
    background: #74ad7c;
    top: -100px; right: -80px;
    animation: float 8s ease-in-out infinite;
  }
  .blob-2 {
    width: 300px; height: 300px;
    background: #a8ccad;
    bottom: -60px; left: -40px;
    animation: float 10s ease-in-out infinite reverse;
  }
  .blob-3 {
    width: 200px; height: 200px;
    background: #d1e5d5;
    top: 40%; left: 60%;
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
  }

  /* ===== Buttons ===== */
  .btn-primary {
    box-shadow: 0 8px 32px rgba(26, 92, 58, 0.35);
  }
  .btn-primary:hover {
    box-shadow: 0 12px 40px rgba(26, 92, 58, 0.45);
  }

  /* ===== Mobile Menu ===== */
  #mobile-menu.open {
    display: flex;
    animation: slideDown 0.3s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== Section transitions ===== */
  #menu {
    background: linear-gradient(160deg, #144a2e 0%, #1a5c3a 50%, #0f3822 100%);
  }

  /* ===== Focus styles ===== */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #74ad7c;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ===== Custom scrollbar ===== */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #f9f5ee; }
  ::-webkit-scrollbar-thumb { background: #a8ccad; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #74ad7c; }

  /* ===== Mobile responsive ===== */
  @media (max-width: 767px) {
    #mobile-menu {
      display: none;
    }
    #mobile-menu.open {
      display: flex;
    }
  }