:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f4ff;
  color: #252238;
}

body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.card { width: min(720px, 100%); box-sizing: border-box; background: #fff; border-radius: 28px; padding: clamp(28px, 6vw, 56px); box-shadow: 0 20px 60px rgba(54, 45, 104, .13); line-height: 1.75; }
.mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, #7457dc, #e2689f); color: #fff; font-size: 38px; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 18px 0 4px; line-height: 1.2; }
h2 { margin-top: 28px; line-height: 1.35; }
.tagline { color: #685f85; font-size: 1.2rem; margin-top: 0; }
.button { display: inline-block; margin-top: 14px; padding: 11px 18px; border-radius: 14px; background: #6548cf; color: #fff; text-decoration: none; font-weight: 700; }
.contact, .updated { color: #716b82; font-size: .94rem; }
a { color: #5d43c2; }

@media (prefers-color-scheme: dark) {
  :root { background: #17151f; color: #f1edf9; }
  .card { background: #24212d; box-shadow: none; }
  .tagline, .contact, .updated { color: #bbb2cc; }
  a { color: #c3b2ff; }
  .button { color: #fff; }
}