:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: #f6f7fb;
  color: #222737;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

.shell { max-width: 800px; margin: 0 auto; padding: 28px 20px 64px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { font-size: 20px; font-weight: 750; letter-spacing: -.04em; color: inherit; text-decoration: none; }

nav { display: flex; gap: 16px; font-size: 14px; }

a { color: #5c45dc; }

nav a { color: inherit; text-underline-offset: 5px; }

.hero { margin: 64px 0 32px; }

.eyebrow { margin: 0 0 8px; color: #6650e7; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

h1 { margin: 0 0 14px; font-size: clamp(36px, 6vw, 52px); letter-spacing: -.055em; line-height: 1.08; }

.lead { max-width: 640px; margin: 0; color: #626a78; font-size: 17px; line-height: 1.65; }

.card { margin: 20px 0; padding: 24px; background: #fff; border: 1px solid #e7e8ef; border-radius: 24px; box-shadow: 0 12px 36px #23294a08; }

h2 { margin: 0 0 14px; font-size: 21px; letter-spacing: -.025em; }

h3 { margin: 20px 0 8px; font-size: 16px; }

p, li { line-height: 1.65; }

p:last-child { margin-bottom: 0; }

ul { padding-left: 22px; }

.language { margin-top: 44px; padding-top: 24px; border-top: 1px solid #dfe1e9; }

.contact { display: inline-block; margin-top: 4px; padding: 12px 18px; border-radius: 14px; background: #6552e8; color: #fff; font-weight: 650; text-decoration: none; }

.contact:hover { background: #513ccf; }

footer { margin-top: 40px; color: #7a808d; font-size: 13px; }

@media (prefers-color-scheme: dark) {
  :root { background: #151721; color: #f1f2f7; }
  .lead, footer { color: #a6acbc; }
  .card { background: #202330; border-color: #343849; box-shadow: none; }
  .language { border-color: #343849; }
  a { color: #b3a5ff; }
  .eyebrow { color: #ad9cff; }
  .contact { color: #fff; }
}