:root {
  --bg:#0b0b10;
  --fg:#e9e1ff;
  --accent:#7b5cff;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display:flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { font-weight: 700; }
nav a { color: #e9e1ff; text-decoration: none; margin: 0 8px; font-size: 14px; }
.hero { padding: 40px 20px; }
.hero-title { font-family: Georgia, serif; font-size: 48px; margin: 0; }
.hero-sub { color: #ddd; margin: 8px 0 12px; }
.cta { display:inline-block; padding: 10px 14px; background: #7b5cff; color: white; text-decoration: none; border-radius: 999px; margin-top: 8px; }
.section { padding: 40px 20px; max-width: 900px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.card { background: rgba(255,255,255,.04); padding: 12px; border-radius: 8px; margin: 8px 0; }