/* ==========================
   TEMA CLEAN – SÓ CORES
   NÃO ALTERA LAYOUT
========================== */

/* 1️⃣ Variáveis */
:root {
  --primary: #2563eb;
  --primary-dark: #1e40af;

  --bg: #ffffff;
  --card-bg: #ffffff;

  --text: #0f172a;
  --muted: #475569;

  --accent: #2563eb;
}

/* 2️⃣ Fundo geral */
body {
  background: #ffffff;
  color: var(--text);
}

/* 3️⃣ Header clean (mesma altura, mesma posição) */
header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

/* 4️⃣ Hero – faixa azul CLARA (sem mexer no grid) */
.hero {
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.08) 0%,
      rgba(37, 99, 235, 0.04) 45%,
      #ffffff 70%
    );
}

/* 5️⃣ Cards continuam IGUAIS, só mudam cores */
.hero-card,
.feature-card,
.step-card,
.contact-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* 6️⃣ Textos secundários */
.hero-subtitle,
.section-subtitle,
.feature-text,
.step-text,
.faq-item p,
.contact-card p {
  color: var(--muted);
}

/* 7️⃣ Botões */
.btn-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-ghost {
  background: transparent;
  border-color: #e2e8f0;
  color: var(--text);
}

/* 8️⃣ Modal (mantém comportamento original) */
.modal-card {
  background: #ffffff;
  color: var(--text);
}

.modal-overlay {
  background: rgba(15, 23, 42, 0.45);
}


.logo img {
  height: 96px;
  width: auto;
}


/* animação *
.logo-animate {
  opacity: 0;
  transform: translateY(-6px);
  animation: logoFade 30.8s ease forwards;
}*/


/* animação 2 */

.logo-animate {
  opacity: 0;
  transform: translateY(-6px);
  animation: logoFade 5.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* fim 2 */

@keyframes logoFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}