/* Landing do Rivus. As cores e fontes são as do painel (`painel/painel.css`),
   copiadas porque o site é servido por outra raiz (/srv/site) e não pode
   depender de um arquivo de fora dela. Se a paleta do painel mudar, mude aqui. */
:root {
  --fundo: #F4F7FA;
  --superficie: #FFFFFF;
  --superficie-2: #EDF2F7;
  --fio: #D7E2ED;
  --tinta: #0E1F38;
  --tinta-2: #3B5674;
  --tinta-3: #6B87A3;
  --marca: #1B5FC1;
  --ok: #0F7B4F;
  --ok-fundo: #E1F4EA;
  --alerta: #B4530A;
  --alerta-fundo: #FDEEDD;
  --critico: #B3261E;
  --critico-fundo: #FBE6E4;
  --caixa: 1100px;
  --recuo: 18px;
  --num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0B1622; --superficie: #142434; --superficie-2: #1D3247;
    --fio: #274056; --tinta: #E4EDF6; --tinta-2: #B0C4D8; --tinta-3: #7E97B0;
    --marca: #6BA5F5; --ok: #4ED08C; --ok-fundo: #103224;
    --alerta: #F0A868; --alerta-fundo: #33240F;
    --critico: #F08B84; --critico-fundo: #3A1512;
  }
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; min-height: 100vh; background: var(--fundo); color: var(--tinta);
  font-family: var(--ui); line-height: 1.5;
}
.capa {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 22px; padding: 28px 20px;
}
.marca { margin: 0; font-size: clamp(38px, 9vw, 64px); letter-spacing: -0.02em; font-weight: 600; }
.marca b { color: var(--marca); font-weight: 700; }
.frase { margin: 0; max-width: 34em; font-size: clamp(16px, 3.4vw, 20px); color: var(--tinta-2); }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.botao {
  display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 16px;
  text-decoration: none; color: var(--marca); border: 1px solid var(--marca);
}
.botao.primario { background: var(--marca); color: var(--fundo); }
.botao:hover { filter: brightness(1.08); }
.botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }