:root {
  color-scheme: light dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f3f6fc;
  color: #17243c;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.page { min-height: 100vh; max-width: 1120px; margin: 0 auto; padding: 32px clamp(22px, 5vw, 68px); display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.35rem; font-weight: 760; letter-spacing: -.035em; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.language-switcher { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dce4f1; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.language-switcher button { min-width: 42px; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: #536179; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.language-switcher button[aria-pressed="true"] { background: #2056d8; color: #fff; }
.language-switcher button:focus-visible { outline: 3px solid #91b1ff; outline-offset: 2px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #2056d8; font-size: 1rem; letter-spacing: -.05em; }
.landing { background: radial-gradient(circle at 84% 16%, #dce7ff 0, transparent 40%), #f3f6fc; }
.hero { margin: auto 0; max-width: 760px; padding: 90px 0; }
.eyebrow { color: #2056d8; font-size: .79rem; font-weight: 760; letter-spacing: .1em; }
h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -.055em; line-height: 1.07; margin: 20px 0 24px; }
.lead { max-width: 640px; font-size: clamp(1.15rem, 2.1vw, 1.45rem); line-height: 1.55; }
.translation { color: #536179; line-height: 1.6; }
footer { margin-top: auto; padding-top: 38px; color: #6a768c; font-size: .82rem; }
.bridge { max-width: 720px; }
.action-card { margin: auto 0; padding: clamp(28px, 6vw, 54px); background: #fff; border: 1px solid #dce4f1; border-radius: 28px; box-shadow: 0 22px 65px rgba(25, 54, 108, .07); }
.action-card h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.action-card > p:not(.eyebrow) { line-height: 1.6; }
.primary-button { width: 100%; min-height: 54px; margin-top: 24px; padding: 13px 20px; border: 0; border-radius: 12px; background: #2056d8; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #1746b5; }
.primary-button:focus-visible { outline: 3px solid #91b1ff; outline-offset: 3px; }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.notice { color: #a52e3f; }
.fine-print { color: #647189; font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  :root { background: #101725; color: #f3f6fc; }
  .landing { background: radial-gradient(circle at 84% 16%, #1b2c50 0, transparent 40%), #101725; }
  .action-card { background: #1a2538; border-color: #34425b; box-shadow: none; }
  .translation, .fine-print, footer { color: #b2bed1; }
  .eyebrow { color: #8aabff; }
  .notice { color: #ffabb4; }
  .language-switcher { background: rgba(255, 255, 255, .05); border-color: #34425b; }
  .language-switcher button { color: #b2bed1; }
}

@media (max-width: 420px) {
  .page { padding: 22px 18px; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 38px; height: 38px; }
  .language-switcher button { min-width: 36px; }
}