html {
    scroll-behavior: smooth;
  }

   .nav-link {
    position: relative;
    color: #d1fae5;
    transition: all 0.3s ease;
  }

  /* Hover */
  .nav-link:hover {
    color: #ffffff;
  }

  /* Active Menu */
  .nav-link.active {
    color: #ffffff;
  }

  .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 999px;
  }

    /* ── Underline animated gradient on hero title ── */
    .hero-underline {
      position: relative;
      display: inline-block;
    }
    .hero-underline::after {
      content: '';
      position: absolute;
      left: 0; bottom: -2px;
      width: 100%; height: 3px;
      background: linear-gradient(90deg, #2ea85a, #186bac);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      animation: lineIn 0.7s 0.8s ease forwards;
    }
    @keyframes lineIn { to { transform: scaleX(1); } }

    /* ── Decorative spinning rings ── */
    .ring-1 {
      position: absolute;
      width: 560px; height: 560px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px dashed rgba(46,168,90,0.2);
      pointer-events: none;
      animation: spinRing 30s linear infinite;
    }
    .ring-2 {
      position: absolute;
      width: 440px; height: 440px;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px dashed rgba(24,107,172,0.12);
      pointer-events: none;
      animation: spinRing 20s linear infinite reverse;
    }
    @keyframes spinRing {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* ── Floating stat card positions ── */
    .stat-card-1 {
      position: absolute;
      bottom: 40px; left: -30px;
    }
    .stat-card-2 {
      position: absolute;
      top: 40px; right: -24px;
    }

    /* ── Leaf positions ── */
    .leaf-pos-1 { position: absolute; top: 8%;    left: 3%;  opacity: 0.08; pointer-events: none; }
    .leaf-pos-2 { position: absolute; bottom: 10%; right: 4%; opacity: 0.08; pointer-events: none; }
    .leaf-pos-3 { position: absolute; top: 55%;   left: 46%; opacity: 0.05; pointer-events: none; }

    /* ── Badge dot pulse ── */
    .badge-dot {
      width: 7px; height: 7px;
      background: #186bac;
      border-radius: 50%;
      flex-shrink: 0;
      animation: pulse2 2s ease infinite;
    }
    @keyframes pulse2 {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(1.4); }
    }

    /* ── Primary button hover overlay ── */
    .btn-primary { position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
    .btn-primary::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #2ea85a, #1a7a3f);
      opacity: 0;
      transition: opacity 0.25s;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,122,63,0.4); }
    .btn-primary:hover::before { opacity: 1; }
    .btn-primary .btn-text,
    .btn-primary .btn-arrow { position: relative; z-index: 1; }
    .btn-primary:hover .btn-arrow { transform: translateX(4px); }
    .btn-arrow { transition: transform 0.2s; display: inline-block; }

    /* ── Secondary button hover ── */
    .btn-secondary { transition: background 0.2s, border-color 0.2s, transform 0.2s; }
    .btn-secondary:hover {
      background: rgba(24,107,172,0.08);
      border-color: #186bac;
      transform: translateY(-2px);
    }

    /* ── Image zoom on hover ── */
    .img-wrap { overflow: hidden; }
    .img-wrap img { transition: transform 0.5s ease; }
    .img-wrap:hover img { transform: scale(1.03); }

    /* ── Image overlay gradient ── */
    .img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(13,92,46,0.25) 100%);
      pointer-events: none;
    }

    /* ── Trust icon shadow ── */
    .trust-icon { box-shadow: 0 2px 8px rgba(13,92,46,0.12); }

    /* ── Stat card shadow ── */
    .stat-shadow { box-shadow: 0 8px 32px rgba(13,92,46,0.15); }

    /* ── Responsive: hide rings on small screens ── */
    @media (max-width: 560px) {
      .ring-1, .ring-2 { display: none; }
      .stat-card-1 { left: -8px; }
      .stat-card-2 { right: -8px; }
    }
    @media (max-width: 900px) {
      .ring-1 { width: 420px; height: 420px; }
      .ring-2 { width: 330px; height: 330px; }
      .stat-card-1 { left: 0; bottom: 20px; }
      .stat-card-2 { right: 0; top: 20px; }
    }