:root {
  color-scheme: light;
  --dark: #182238;
  --accent: #4269A6;
  --accent-hover: #557FBD;
  --accent-light: #EAF0F8;
  --background: #F6F7F9;
  --surface: #FFFFFF;
  --muted: #64748B;
  --border: #E2E8F0;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--background); color: var(--dark); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; display: grid; place-items: center; padding: 48px 24px; }
main { width: min(100%, 440px); }
.logo { display: block; width: 180px; height: auto; margin: 0 auto 32px; }
h1 { margin: 0 0 32px; text-align: center; font-size: clamp(25px, 5vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
nav { display: grid; gap: 12px; }
a { position: relative; display: block; padding: 18px 48px 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--dark); text-decoration: none; font-size: 18px; font-weight: 600; transition: background .15s, border-color .15s; }
a span:not(.arrow) { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 400; }
a .arrow { position: absolute; right: 20px; top: 24px; font-weight: 400; }
a.primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
a.primary span:not(.arrow) { color: var(--surface); }
a:hover { background: var(--accent-light); border-color: var(--accent); }
a.primary:hover { background: var(--accent-hover); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }