:root { --fundo: #0e0e0e; --cartao: #181818; --borda: #2a2a2a; --texto: #f4f4f4; --suave: #a8a8a8; --destaque: #f5b942; --terra: #58544a; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(ellipse at top, #2a2822 0%, var(--fundo) 60%); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 520px; margin: 0 auto; padding: 48px 18px 32px; text-align: center; }
.avatar { width: 112px; height: 112px; border-radius: 50%; background: var(--terra); display: grid; place-items: center; margin: 0 auto 16px;
  box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--destaque); }
.avatar img { width: 62%; height: auto; }
h1 { font-size: 1.5rem; margin: 0 0 8px; }
.descricao { color: #d4d4d4; line-height: 1.55; margin: 0 auto 26px; max-width: 42ch; font-size: .98rem; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.links a { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--borda);
  color: var(--texto); text-decoration: none; font-weight: 600; transition: transform .12s, border-color .12s, background .12s; text-align: left; }
.links a:hover, .links a:focus-visible { transform: translateY(-2px); border-color: #4a4a4a; background: #1f1f1f; }
.links a.destaque { background: var(--destaque); color: #111; border-color: transparent; }
.links a.destaque:hover { background: #ffc65a; }
.links svg { width: 22px; height: 22px; flex: none; }
.links span { flex: 1; }
.links .seta { opacity: .5; font-size: 1.1rem; }
.rodape { color: #8a8a8a; font-size: .82rem; margin-top: 30px; line-height: 1.6; }
.rodape a { color: #a9a9a9; }
.carregando { color: var(--suave); }