/* ============================================================
   TOKENS
   Mesma escala do arquivo Figma. Razão de contraste medida
   contra --surface-base, anotada em cada token de tinta.
   ============================================================ */
:root {
  /* superfície */
  --surface-base: #0B0B0A;
  --mesh-line:    #121110;
  --hairline:     #1F1E1C;

  /* tinta */
  --ink-000: #FAF8F4;  /* 18.7:1 — display */
  --ink-400: #8E8981;  /*  6.4:1 — corpo, links, eyebrow */
  --ink-500: #7F7A72;  /*  4.6:1 — meta, rodapé (piso AA) */

  /* espaço — base 8 */
  --space-2:  8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --margin: clamp(24px, 4.4vw, 112px);
  --mesh-step: 40px;

  /* tipografia
     Ancorada no frame do Figma e fluida daí em diante.
     5.6vw: 1440 → 80px · 1920 → 107px · 2560 → 143px */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:   clamp(2.25rem, 5.6vw, 10rem);
  --corpo:     clamp(1rem, 1.25vw, 1.5rem);
  --mono-m:    clamp(0.75rem, 0.86vw, 1.0625rem);
  --mono-s:    clamp(0.6875rem, 0.78vw, 0.9375rem);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-base);
  color: var(--ink-400);
  font-family: var(--font-sans);
  font-size: var(--corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A malha. Duas gradientes repetidas em vez de 98 retângulos —
   dois nós no DOM, escala infinita, custo de render zero. */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--mesh-line) 0 1px, transparent 1px var(--mesh-step)),
    repeating-linear-gradient(to bottom, var(--mesh-line) 0 1px, transparent 1px var(--mesh-step));
}

.page {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: var(--space-12) var(--margin);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-12);
}

/* ============================================================
   ASSINATURA + RODAPÉ
   ============================================================ */
.assinatura,
.rodape {
  font-family: var(--font-mono);
  font-size: var(--mono-s);
  line-height: 1.3;
  letter-spacing: 0.13em;
  color: var(--ink-500);
}

.assinatura { font-weight: 500; letter-spacing: 0.08em; }

.rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ============================================================
   BLOCO CENTRAL
   ============================================================ */
.bloco {
  align-self: center;
  max-width: none;
}

.eyebrow {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--mono-s);
  line-height: 1.3;
  letter-spacing: 0.18em;
  color: var(--ink-400);
}

.declaracao {
  margin: 0;
  font-weight: 600;
  font-size: var(--display);
  line-height: 1.033;
  letter-spacing: -0.033em;
  color: var(--ink-000);
  text-wrap: balance;
}

/* A segunda linha recua um degrau — mesma relação da home. */
.declaracao .continua {
  display: block;
  color: var(--ink-400);
}

/* Uma linha só. A medida de 46ch quebrava a frase ao meio —
   ela é curta o bastante para não precisar de limite. */
.corpo {
  margin: var(--space-8) 0 0;
  max-width: none;
  text-wrap: nowrap;
  color: var(--ink-400);
}

@media (max-width: 760px) {
  .corpo { text-wrap: pretty; }
}

/* ============================================================
   SAÍDAS
   ============================================================ */
.saidas {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.saidas a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--mono-m);
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: var(--ink-400);
  text-decoration: none;
  padding-block: var(--space-2);          /* alvo de toque ≥ 32px */
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.saidas a:hover,
.saidas a:focus-visible {
  color: var(--ink-000);
  border-bottom-color: var(--hairline);
}

.saidas a .seta {
  display: inline-block;
  margin-left: 4px;
  transition: transform 180ms ease;
}

.saidas a:hover .seta { transform: translate(2px, -2px); }

:focus-visible {
  outline: 1px solid var(--ink-000);
  outline-offset: 6px;
  border-radius: 1px;
}

/* ============================================================
   ENTRADA
   Uma sequência só, escalonada. Nada depois do carregamento.
   ============================================================ */
@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.anima {
  opacity: 0;
  animation: sobe 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anima:nth-child(1) { animation-delay:  40ms; }
.anima:nth-child(2) { animation-delay: 120ms; }
.anima:nth-child(3) { animation-delay: 220ms; }
.anima:nth-child(4) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .anima { opacity: 1; animation: none; }
  .saidas a, .saidas a .seta { transition: none; }
}

/* ============================================================
   TELAS GRANDES
   A malha de 40px vira ruído acima de 1800 — o passo abre junto.
   ============================================================ */
@media (min-width: 1800px) {
  :root {
    --mesh-step: 56px;
    --space-12: 64px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
  :root { --mesh-step: 24px; }
  .page { gap: var(--space-8); }
  .saidas { flex-direction: column; gap: var(--space-4); }
  .rodape { flex-direction: column; gap: var(--space-2); }
}