:root { --verde: #1E9B48; --escuro: #0B5D27; --profundo: #06401A; --destaque: #B9F27C; --branco: #FFFFFF; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--branco);
  background: radial-gradient(circle at 50% 30%, var(--verde), var(--escuro) 60%, var(--profundo));
}
.cartao { width: 100%; max-width: 420px; text-align: center; }
.logo { width: 140px; height: 140px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: var(--branco); border: 4px solid var(--destaque); }
.logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); display: block; }
h1 { font-size: 26px; font-weight: 900; margin: 0 0 12px; }
.aviso { font-size: 15px; margin: 0 0 16px; opacity: .9; }
.botoes { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.botao {
  display: block; padding: 18px 20px; border-radius: 16px; font-size: 19px; font-weight: 800; text-decoration: none;
  color: var(--escuro); background: var(--branco); box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.botao.principal { background: var(--destaque); outline: 3px solid var(--branco); }
.botao:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }
.rodape { margin-top: 28px; font-size: 13px; opacity: .75; }