<section class="diferenciais-modern py-5" id="diferenciais">
  <div class="container" data-anime="top">
    <div class="row text-center mb-5">
      <div class="col">
        <h2 class="fw-bold text-uppercase">Nossos <strong class="text-danger">Diferenciais</strong></h2>
        <p class="text-muted">
          Experiência consolidada, precisão em cada detalhe e soluções totalmente personalizadas <br>
          para atender às necessidades específicas de cada cliente.
        </p>
      </div>
    </div>

    <div class="row g-4" data-anime="left">
      <div class="col-md-4">
        <div class="card diferencial-glass h-100 text-center">
          <div class="card-body">
            <span class="numero" data-numero="40">0+</span>
            <h3 class="titulo">Expertise</h3>
            <p class="descricao">Anos de atuação sólida no mercado</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card diferencial-glass h-100 text-center">
          <div class="card-body">
            <span class="numero" data-numero="2500">0+</span>
            <h3 class="titulo">Maestria</h3>
            <p class="descricao">Equipamentos fabricados com excelência</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card diferencial-glass h-100 text-center">
          <div class="card-body">
            <span class="numero" data-numero="1300">0+</span>
            <h3 class="titulo">Know-how</h3>
            <p class="descricao">Projetos e soluções personalizadas</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



<script>
document.addEventListener("DOMContentLoaded", () => {
  const numeros = document.querySelectorAll(".numero");
  let animado = false;

  const animarNumeros = () => {
    if (animado) return;
    animado = true;

    numeros.forEach(numero => {
      const valorFinal = +numero.getAttribute("data-numero");
      let contador = 0;
      const incremento = Math.ceil(valorFinal / 80);

      const interval = setInterval(() => {
        contador += incremento;
        if (contador >= valorFinal) {
          contador = valorFinal;
          clearInterval(interval);
        }
        numero.textContent = contador.toLocaleString("pt-BR") + "+";
      }, 30);
    });
  };

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        animarNumeros();
      }
    });
  }, { threshold: 0.4 });

  observer.observe(document.querySelector("#diferenciais"));
});
</script>


