/* =====================
   VARIÁVEIS E BASE
====================== */
:root {
  --brand-cyan: #00e5ff;
  --brand-magenta: #ff2dae;
  --ink: #0a0f1a;
  --text: #e8fbff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(60% 60% at 75% 20%, rgba(255,45,174,.22), transparent 60%),
              radial-gradient(55% 55% at 25% 85%, rgba(0,229,255,.22), transparent 60%),
              linear-gradient(180deg, #0b1220 0%, var(--ink) 100%);
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* =====================
   GRID E WRAP
====================== */
.grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: drift 32s linear infinite;
  mask-image: radial-gradient(70% 60% at 50% 50%, black, transparent);
}
@keyframes drift { to { background-position: 240px 240px; } }
.wrap { text-align: center; padding: 24px; position: relative; z-index: 1; }

/* =====================
   LOGOTIPO E HERO
====================== */
.logo { width: min(520px, 78vw); height: auto; display: block; margin: 0 auto 16px; filter: drop-shadow(0 0 18px rgba(0,229,255,.35)) drop-shadow(0 0 28px rgba(255,45,174,.25)); }

/* =====================
   CONTADOR
====================== */
.contador-dias { margin-top: 18px; }

/* =====================
   FOOTER
====================== */
footer { position: fixed; inset: auto 0 16px; text-align: center; font-size: 12px; color: rgba(232,251,255,.6); }
.footer-btn { display: inline-block; background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-magenta) 100%); color: #0A0F1A; font-weight: 700; padding: 2px 12px; border-radius: 999px; text-decoration: none; transition: filter .18s; filter: brightness(1.15); }
.footer-btn:hover { filter: brightness(1.35); }

/* small responsive tweak */
@media (max-width:420px) {
  .logo { width: min(360px, 90vw); }
  .wrap { padding: 18px; }
}