/* ===== RESET BÁSICO ===== */
/* Remove margens padrão e define fonte */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* ===== ESTILO GERAL ===== */
body {
  background-color: #0f172a; /* Fundo escuro moderno */
  color: #e5e7eb;           /* Texto claro */
}

/* ===== HERO ===== */
.hero {
  /* Gradiente escuro sobre a imagem */
  background: linear-gradient(rgba(2,6,23,.8), rgba(2,6,23,.8)),
              url("../img/Banner.png") center/cover;

  height: 80vh; /* 80% da altura da tela */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Título principal */
.hero h1 {
  font-size: 3rem;
  color: #38bdf8; /* Azul tecnológico */
}

/* Texto do hero */
.hero p {
  margin: 15px 0;
  font-size: 1.2rem;
}

/* Botão principal */
.btn {
  background: #22c55e; /* Verde WhatsApp */
  padding: 15px 30px;
  border-radius: 8px;
  color: #020617;
  text-decoration: none;
  font-weight: bold;
}

/* ===== SEÇÕES ===== */
section {
  padding: 60px 20px;
  max-width: 1100px;
  margin: auto;
}

/* Títulos das seções */
h2 {
  text-align: center;
  color: #38bdf8;
  margin-bottom: 30px;
}

/* ===== CARDS ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

/* Card individual */
.card {
  background: #020617;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  transition: 0.3s; /* Animação suave */
}

/* Efeito hover */
.card:hover {
  transform: translateY(-8px);
}

/* Ícones dos cards */
.card img {
  width: 70px;
  margin-bottom: 15px;
}

/* ===== RODAPÉ ===== */
footer {
  background: #020617;
  text-align: center;
  padding: 20px;
}

/* ===== ANIMAÇÃO DE SCROLL ===== */
.reveal {
  opacity: 0; /* Invisível no início */
  transform: translateY(40px);
  transition: 0.6s;
}

/* Quando o JS ativa */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}