:root {
  --font-display: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --navy: #0a1628;
  --blue: #0f2549;
  --mid: #1a3a6b;
  --light-blue: #2563eb;
  --accent: #f97316;
  --gold: #f59e0b;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: #1e293b;
  background: #ffffff;
  overflow-x: hidden;
  margin: 0;
}

h1, h2, h3 { font-family: var(--font-display); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1a3a6b; border-radius: 3px; }

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-dark {
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section transition */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.text-balance { text-wrap: balance; }

/* Animações de entrada (equivalente ao "mounted" do React) */
.reveal { opacity: 0; transform: translateY(2rem); transition: all 1s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.delay-300 { transition-delay: .3s; }
.reveal.delay-500 { transition-delay: .5s; }

/* Acordeão de FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 24rem; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open { border-color: #1a3a6b; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.faq-item.open button > span { color: #0a1628; }
.faq-item.open .faq-chevron { color: #fff; }
.faq-item.open button > div { background-color: #0a1628; color: #fff; }

/* Float do WhatsApp */
.wa-float { opacity: 0; transform: translateY(1rem); transition: all .5s ease; }
.wa-float.is-visible { opacity: 1; transform: translateY(0); }
.wa-float .wa-tooltip { opacity: 0; transition: opacity .2s ease; }
.wa-float:hover .wa-tooltip { opacity: 1; }