/* =========================================================
   BASE — variáveis, reset, tipografia, utilitários e animações
   ========================================================= */

:root {
  /* cores do tema (escuro) */
  --bg: #070d1a;
  --ink: #eef2ff;
  --mut: #a5b4cc;
  --soft: #cbd5e1;
  --line: #ffffff1a;

  /* marcas */
  --bitsafira: #32519f;
  --hapi: #16a34a;

  /* degradê azul → verde */
  --g1: #2563eb;
  --g2: #0891b2;
  --g3: #16a34a;
  --grad: linear-gradient(90deg, #2563eb, #16a34a);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- tipografia ---------- */
p { line-height: 1.7; color: var(--mut); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.lead { color: var(--soft); }

/* rótulo pequeno acima dos títulos */
.lbl { font-weight: 700; letter-spacing: .14em; font-size: .78rem; color: #4ade80; }

/* texto em degradê animado */
.grad {
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
}

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: auto; padding: 0 16px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 480px) { .wrap { padding-left: 22px; padding-right: 22px; } }

/* ---------- fundo com manchas de cor ---------- */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.mesh i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; mix-blend-mode: screen; }
.mesh i:nth-child(1) { width: 55vw; height: 55vw; background: #1d4ed8; top: -15vw; left: -10vw; animation: m1 18s ease-in-out infinite alternate; }
.mesh i:nth-child(2) { width: 45vw; height: 45vw; background: #15803d; top: 10vw; right: -12vw; animation: m2 22s ease-in-out infinite alternate; }
.mesh i:nth-child(3) { width: 35vw; height: 35vw; background: #0e7490; bottom: -10vw; left: 30vw; animation: m1 26s ease-in-out infinite alternate-reverse; }

/* ---------- revelar ao rolar ---------- */
.rv {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(6px);
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1.2s;
}
.rv.in { opacity: 1; transform: none; filter: none; }
.d1 { transition-delay: .15s; }
.d2 { transition-delay: .3s; }
.d3 { transition-delay: .45s; }

/* ---------- animações ---------- */
@keyframes flow   { to { background-position: 300% 0; } }
@keyframes up     { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise   { to { transform: none; } }
@keyframes float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes liIn   { to { opacity: 1; transform: none; } }
@keyframes shine  { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes bgmove { to { background-position: 100% 100%; } }
@keyframes m1     { to { transform: translate(10vw, 8vw) scale(1.2); } }
@keyframes m2     { to { transform: translate(-12vw, 6vw) scale(.85); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
  .rv { opacity: 1; transform: none; filter: none; }
}