/* Figtree auto-hospedada (subconjunto latin do Google Fonts): um arquivo variável
   para o normal (pesos 400 a 700) e um para o itálico. Nada sai para terceiros. */
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Figtree;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/figtree-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Página branca do mock do cliente: preto sobre branco, Figtree, logo no meio.
   As medidas vêm do mock em 1350 px de largura: bloco começando a 14,5 vh do
   topo, título de 40 px numa linha, logo com 35,2 vw de largura. */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --green: #53fd42;
  --ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--paper);
  color: var(--ink);
  font-family: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
::selection { color: var(--ink); background: var(--green); }

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(56px, 14.5vh, 150px) clamp(20px, 5vw, 64px) 48px;
}
.eyebrow {
  margin: 0 0 10px;
  font-size: clamp(.875rem, 1.2vw, 1.0625rem);
  letter-spacing: .02em;
  line-height: 1.3;
  animation: rise 1s var(--ease) .1s both;
}
h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.96vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
  animation: rise 1.1s var(--ease) .3s both;
}
.logo {
  position: relative;
  width: clamp(240px, 35.2vw, 520px);
  margin: 16px auto 0;
  animation: rise 1.2s var(--ease) .55s both, float 6s ease-in-out 1.8s infinite;
}
.logo img { display: block; width: 100%; height: auto; }
/* Halo do ponto verde da onda: centrado no ponto (medido na imagem), invisível
   em repouso — o desenho em repouso é o mock, sem nada a mais. */
.glow {
  position: absolute;
  left: 96.08%;
  top: 53.45%;
  width: 12%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 253, 66, .8) 0%, rgba(83, 253, 66, .35) 35%, rgba(83, 253, 66, 0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: dot-pulse 4.2s ease-in-out 2.2s infinite;
}
.slogan {
  margin: 38px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.3;
  animation: rise 1.2s var(--ease) .8s both;
}
.slogan em { font-style: italic; font-weight: 700; }

/* Entrada em sequência (só "from": o destino é o estilo do elemento); depois a
   logo flutua 5 px e o ponto verde pulsa. `translate`/`scale` separados do
   `transform` da entrada para nada brigar. A entrada parte de opacidade .3,
   não 0: com 0 o Chrome não registra a primeira pintura com conteúdo (a
   opacidade anima no compositor) e FCP/LCP — Core Web Vitals — nunca chegam. */
@keyframes rise { from { opacity: .3; transform: translateY(14px); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes dot-pulse { 0%, 100% { opacity: 0; scale: .8; } 50% { opacity: 1; scale: 1; } }

@media (max-width: 640px) {
  .page { padding: 12vh 22px 40px; }
  .eyebrow { font-size: .875rem; }
  .logo { width: min(66vw, 300px); margin-top: 14px; }
  .slogan { margin-top: 30px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow, h1, .logo, .glow, .slogan { animation: none; }
}