:root {
  --bg1: #0f172a;
  --bg2: #1e3a8a;
  --bg3: #4338ca;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, .7);
  --card-bg: rgba(0, 0, 0, .35);
  --card-border: rgba(255, 255, 255, .12);
  --cta1: #00a8ff;
  --cta2: #3b82f6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  font: 15px/1.65 system-ui, Segoe UI, Inter, Roboto, sans-serif;
  color: var(--fg);
  display: flex;
  flex-direction: column;
}

main.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

h1 {
  margin-top: 0;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
}

h2 {
  font-size: 18px;
  margin: 22px 0 8px;
  font-weight: 600;
  color: var(--fg);
}

p, li { color: var(--fg); }
small { color: var(--muted); display: block; margin-bottom: 20px; text-align: center; }

section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 14px 0;
  backdrop-filter: blur(6px) saturate(130%);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

ul { padding-left: 20px; margin: 10px 0; }

a {
  color: var(--cta1);
  text-decoration: none;
}
a:hover {
  color: var(--cta2);
  text-decoration: underline;
}

footer {
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}