:root {
  --brand-1: #6C63F5;
  --brand-2: #a855f7;
  --brand-3: #EC4899;
  --ink: #191824;
  --muted: #5a5a6b;
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e7e9f2;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px 80px; }
header.hero {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 52%, var(--brand-3));
  color: #fff; padding: 56px 22px 64px; text-align: center;
}
.logo {
  width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 18px;
  background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.logo .ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; }
.logo .dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; }
header.hero h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
header.hero p { margin: 8px 0 0; opacity: .92; font-size: 17px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 26px 26px; margin-top: -34px; box-shadow: 0 18px 44px -22px rgba(20,20,50,.28);
}
h2 { font-size: 22px; margin: 28px 0 8px; letter-spacing: -0.01em; }
h2:first-child { margin-top: 4px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--brand-1); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn {
  display: inline-block; padding: 12px 20px; border-radius: 999px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
}
.btn.secondary { background: #eef0f7; color: var(--ink); }
.back { display: inline-block; margin-top: 26px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 22px; }