:root { --navy: #0B4F80; --ink: #16233A; --muted: #56627A; --red: #FF5A45; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--navy); color: var(--ink); font: 16px/1.5 'Onest', system-ui, -apple-system, sans-serif;
}
.card { width: 420px; max-width: 100%; background: #fff; border-radius: 20px; padding: 36px 28px; text-align: center; }
.logo { font: 28px/1 'Russo One', system-ui, sans-serif; color: var(--navy); }
.logo span { color: var(--red); }
h1 { margin: 24px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 600; }
p { margin: 0; color: var(--muted); }
.btn {
  display: flex; align-items: center; justify-content: center; margin-top: 24px; min-height: 52px; padding: 0 20px;
  border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; text-decoration: none;
}
.btn:hover { background: #094170; }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.hint { margin-top: 12px; font-size: 14px; }
.hint b { color: var(--ink); font-weight: 600; }