:root {
  --bg: #1e2a44;
  --card: #22324f;
  --text: #e7ecf7;
  --muted: #a9b4c7;
  --accent: #caa24a;
  --accent2: #d8b866;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent2); }
a.button {
  display:inline-block; padding: .8rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--accent); text-decoration:none; color: var(--text);
}
a.button:hover { background: rgba(202,162,74,.12); }
header { display:flex; align-items:center; gap:1rem; padding: 2rem 1rem; max-width: 980px; margin: 0 auto; }
header img { width: 72px; height:72px; border-radius: 50%; }
header .title small { display:block; color: var(--muted); font-size: .95rem; }
.container { max-width: 980px; padding: 0 1rem 3rem; margin: 0 auto; }
.hero { background: linear-gradient(135deg, rgba(202,162,74,.12), transparent 60%); border:1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 1.2rem; }
.badges { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 0; }
.badge { border:1px solid rgba(255,255,255,.15); color: var(--muted); padding:.2rem .6rem; border-radius:999px; font-size:.85rem; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.card { background: var(--card); border:1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 1rem; }
h1, h2 { margin: .3rem 0 .6rem; }
ul { margin: .4rem 0 .8rem 1.2rem; }
footer { border-top:1px solid rgba(255,255,255,.06); margin-top: 2rem; padding: 1rem 0; color: var(--muted); font-size: .95rem; }
small.disclaimer { color: var(--muted); display:block; margin-top: .6rem; }
@media (max-width: 780px) {
  .grid { grid-template-columns: 1fr; }
  header { flex-direction: column; text-align:center; }
  header img { width: 84px; height:84px; }
}