/* slb.red — dark by default (same palette as slbenfica.org), light when the device prefers it */
:root {
  --bg: #141416; --card: #1c1c1f; --text: #d4d4d4; --muted: #8f8f8f; --bright: #fff;
  --red: #e2001a; --red-text: #ff4d5e; --border: rgba(255,255,255,.12);
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f0f0f0; --card: #fff; --text: #333; --muted: #6b6b6b; --bright: #111; --red-text: #c40015; --border: rgba(0,0,0,.15); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.6;
  display: flex; flex-direction: column; min-height: 100vh; padding: 1.5rem;
}
.wrap { flex: 1; width: 100%; max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.wordmark { font-size: clamp(2.6rem, 11vw, 4rem); font-weight: 800; letter-spacing: -.02em; color: var(--bright); line-height: 1; margin-bottom: 1.75rem; display: flex; align-items: center; gap: .6rem; }
.dot { width: .55em; height: .55em; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.red { color: var(--red-text); }
h1 { font-size: 1.35rem; color: var(--bright); margin-bottom: .6rem; }
p { margin-bottom: .75rem; }
.lead { font-size: 1.08rem; }
a { color: var(--red-text); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.cta { margin: 1.25rem 0 1.75rem; }
.btn { display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-weight: 700; padding: .7rem 1.4rem; border-radius: 50px; }
.btn:hover { background: #b5001a; }
.en { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 1rem; }
.foot { max-width: 34rem; margin: 0 auto; width: 100%; font-size: .75rem; color: var(--muted); }
.foot p { margin-bottom: .2rem; }