/* ── Reset & base ── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      background-color: #f9faf4;
      color: #1a1c19;
      font-family: "Manrope", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Glassmorphism ── */
    .glass-panel {
      background: rgba(249, 250, 244, 0.75);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    /* ── Gradients ── */
    .hero-gradient {
      background: linear-gradient(135deg, #1b4d08 0%, #296317 100%);
    }

    .text-gradient {
      background: linear-gradient(135deg, #1b4d08 0%, #357a21 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Scroll-reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    .reveal-delay-1 {
      transition-delay: 0.1s;
    }

    .reveal-delay-2 {
      transition-delay: 0.2s;
    }

    .reveal-delay-3 {
      transition-delay: 0.3s;
    }

    /* ── Card hover lift ── */
    .card-lift {
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .card-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -8px rgba(27, 77, 8, 0.08);
    }

    /* ── Stat badge ── */
    .stat-item {
      position: relative;
    }

    .stat-item+.stat-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background: #c1c9b8;
    }

    /* ── Tag chip ── */
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #aff594;
      color: #135203;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 5px 14px;
      border-radius: 9999px;
    }

    /* ── Decorative leaf ── */
    .leaf-deco {
      position: absolute;
      border-radius: 50% 0;
      background: linear-gradient(135deg, rgba(175, 245, 148, 0.18), rgba(47, 109, 30, 0.10));
      pointer-events: none;
    }

    /* ── Footer link hover ── */
    .footer-link {
      position: relative;
      display: inline-block;
      transition: color 0.2s;
    }

    .footer-link::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: #2f6d1e;
      transition: width 0.25s ease;
    }

    .footer-link:hover::after {
      width: 100%;
    }

    /* ── Number counter ── */
    .counter {
      font-variant-numeric: tabular-nums;
    }

    /* ── Image tint overlay on cards ── */
    .card-img-wrap {
      position: relative;
    }

    .card-img-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(27, 77, 8, 0.2) 100%);
      pointer-events: none;
    }

    /* ── Marquee Animation ── */
    .marquee-container {
      overflow: hidden;
      width: 100%;
      position: relative;
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      padding: 10px 0;
    }
    
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 45s linear infinite;
    }
    
    .marquee-track:hover {
      animation-play-state: paused;
    }
    
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .marquee-item {
      width: 380px;
      flex-shrink: 0;
      margin: 0 14px;
      display: flex;
      height: auto;
    }
    
    @media (max-width: 768px) {
      .marquee-item {
        width: 300px;
      }
    }