:root {
    color-scheme: light dark;
    --accent: #2F6DA8;
    --ink: #0F1720;
    --ink-soft: #4A5765;
    --bg: #F2F5F8;
    --surface: #FFFFFF;
    --line: #D8E0E8;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent: #63A6E0;
      --ink: #EDF1F5;
      --ink-soft: #A3B0BD;
      --bg: #0F1318;
      --surface: #171C23;
      --line: #2A323C;
    }
  }
  * { box-sizing: border-box; }
  body {
    font-family: -apple-system, system-ui, Roboto, "Segoe UI", sans-serif;
    margin: 0; padding: 0; line-height: 1.6;
    color: var(--ink); background: var(--bg);
  }
  .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
  header { padding: 56px 0 40px; text-align: center; }
  h1 { font-size: 2em; line-height: 1.25; margin: 0 0 12px; }
  .baseline { font-size: 1.15em; color: var(--ink-soft); margin: 0 auto 28px; max-width: 34ch; }
  .cta {
    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
    font-weight: 600; padding: 14px 26px; border-radius: 12px;
  }
  .cta:hover { filter: brightness(1.08); }
  .cta-note { display: block; margin-top: 12px; font-size: .9em; color: var(--ink-soft); }
  h2 { font-size: 1.3em; margin: 2.4em 0 .6em; }
  h3 { font-size: 1.05em; margin: 1.6em 0 .3em; }
  section { border-top: 1px solid var(--line); padding-top: 8px; }
  ul { padding-left: 1.2em; }
  li { margin: .4em 0; }
  .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 18px 20px; margin: 20px 0;
  }
  footer {
    margin-top: 56px; border-top: 1px solid var(--line);
    padding: 24px 0 60px; font-size: .9em; color: var(--ink-soft);
  }
  footer a { color: var(--accent); }
  a { color: var(--accent); }