:root {
  --noite: #140c3f;
  --noite-2: #1d1456;
  --superficie: rgba(38, 28, 104, 0.55);
  --linha: rgba(190, 180, 255, 0.18);
  --texto: #f6f3ff;
  --texto-2: #c9c2f2;
  --coral: #ff5e7e;
  --ciano: #22d3ee;
  --ambar: #ffc247;
  --violeta: #8b7bff;
  --menta: #34e0a1;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --corpo: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }

/* camadas de fundo: aurora de cor (CSS) + rede neural (canvas) */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: deriva 28s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: #7a3cff; top: -22vmax; left: -14vmax; }
.aurora span:nth-child(2) { background: #ff3d7f; top: 30vh; right: -26vmax; animation-duration: 34s; animation-delay: -8s; opacity: 0.3; }
.aurora span:nth-child(3) { background: #0fb5d6; bottom: -30vmax; left: 12vw; animation-duration: 40s; animation-delay: -16s; opacity: 0.3; }
.aurora span:nth-child(4) { background: #ffb020; top: 55vh; left: -30vmax; width: 40vmax; height: 40vmax; animation-duration: 46s; opacity: 0.16; }
@keyframes deriva {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12vw, 8vh) scale(1.18); }
  100% { transform: translate(-6vw, 14vh) scale(0.92); }
}
#rede { position: fixed; inset: 0; z-index: -1; display: block; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.marca svg { width: 34px; height: 34px; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 0;
  font: 600 1rem/1 var(--corpo);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.botao-cheio {
  background: linear-gradient(100deg, var(--coral), #ff8a5c 45%, var(--ambar));
  color: #2a0a1a;
  box-shadow: 0 10px 30px -10px rgba(255, 94, 126, 0.8);
}
.botao-cheio:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(255, 94, 126, 0.95); }
.botao-vazio { background: rgba(255, 255, 255, 0.06); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); backdrop-filter: blur(8px); }
.botao-vazio:hover { background: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}