/* =============================================================================
   FIDELIZOW — PÁGINA "EM DESENVOLVIMENTO" (app.fidelizow.com)
   CSS próprio e isolado. Não tem relação com o styles.css do site institucional.
   Sem JavaScript: toda a animação é feita em CSS puro.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  --primary:  #00aee5;   /* azul de marca               */
  --accent:   #00e5aa;   /* verde-água secundário        */
  --bg:       #0a0e14;   /* fundo quase preto            */
  --bg-2:     #0d1117;   /* fundo de apoio               */
  --text:     #ffffff;
  --text-mut: rgba(255, 255, 255, .64);
  --wa:       #128c3e;   /* verde WhatsApp acessível (texto branco passa WCAG) */
  --wa-hover: #0f7a36;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---- Página ---- */
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 1.6;
}

/* ---- Brilho/aurora animado (camada de fundo, atrás do conteúdo) ---- */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(38% 40% at 22% 28%, rgba(0, 174, 229, .38), transparent 60%),
    radial-gradient(34% 44% at 80% 72%, rgba(0, 174, 229, .22), transparent 60%),
    radial-gradient(30% 30% at 62% 18%, rgba(0, 229, 170, .20), transparent 60%);
  filter: blur(48px);
  animation: drift 20s var(--ease) infinite alternate;
}
/* Vinheta sutil para dar profundidade nas bordas */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.18); }
}

/* ---- Conteúdo ---- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.logo { height: clamp(2rem, 6vw, 2.75rem); width: auto; }

/* Selo "em desenvolvimento" com ponto pulsante */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent);
  background: rgba(0, 229, 170, .08);
  border: 1px solid rgba(0, 229, 170, .28);
  border-radius: 999px;
}
.badge .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 170, .55); }
  70%  { box-shadow: 0 0 0 .6rem rgba(0, 229, 170, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 170, 0); }
}

/* Título: branco com palavra de destaque em gradiente de marca */
h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}
h1 .hl {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary); /* fallback */
}

.subtitle {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--text-mut);
  max-width: 34rem;
}

/* ---- Botão do WhatsApp (único CTA) ---- */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
  padding: 1rem 1.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  background: var(--wa);
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(18, 140, 62, .38);
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-wa:hover { transform: translateY(-2px); background: var(--wa-hover); box-shadow: 0 18px 40px rgba(18, 140, 62, .46); }
.btn-wa:active { transform: translateY(0); }
.btn-wa svg { width: 1.35em; height: 1.35em; fill: currentColor; }

/* Foco visível (acessibilidade — sem depender de JS) */
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 999px;
}

/* ---- Rodapé ---- */
.foot {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  font-size: .8125rem;
  color: var(--text-mut);
}
.foot a { color: #fff; font-weight: 600; }
.foot a:hover { color: var(--primary); }
.foot .copy { display: block; margin-top: .4rem; color: rgba(255, 255, 255, .4); }

/* ---- Respeita a preferência por menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .badge .dot { animation: none; }
}