/* Analytics preferences share the site's typography and color tokens. */
[hidden] { display: none !important; }
.footer-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.footer-link:hover { text-decoration: underline; }
.analytics-consent { position: fixed; z-index: 200; bottom: 20px; left: 20px; width: min(460px, calc(100% - 40px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); }
.analytics-consent h2 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
.analytics-consent p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.analytics-consent a { text-decoration: underline; }
.analytics-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
#analytics-status:empty { display: none; }
.analytics-debug { position: fixed; z-index: 190; top: 90px; right: 12px; max-width: calc(100% - 24px); padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 11px; }
.analytics-debug ol { max-height: 220px; overflow: auto; padding-left: 24px; overflow-wrap: anywhere; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 50px 24px 90px; }
.legal-page h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.2; }
.legal-page h2 { margin-top: 34px; font-size: 22px; line-height: 1.4; }
.legal-page a { text-decoration: underline; }
@media (max-width: 480px) { .analytics-consent { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px; } }

/* Montserrat, SIL Open Font License. Files served locally. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Scilex — сайт приложения
   Один файл, без сборки и внешних зависимостей.
   Порядок: токены → база → элементы → шапка → секции → макеты
            телефонов → подвал → адаптив.
   ============================================================ */

/* ─── Токены ─────────────────────────────────────────────── */
:root {
  --brand:      #4B39EF;
  --brand-600:  #3D2BD6;
  --brand-300:  #8257FF;
  --cyan:       #17BEDC;
  --teal:       #39D2C0;

  --bg:         #FAF9F6;
  --bg-alt:     #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F1EFF8;
  --ink:        #222139;
  --ink-2:      #333C55;
  --muted:      #626176;
  --line:       #E6E3ED;
  --line-2:     #EDF0FA;

  --ring:       rgba(75, 57, 239, .28);
  --shadow-sm:  0 1px 2px rgba(14, 18, 32, .05), 0 6px 18px rgba(14, 18, 32, .05);
  --shadow-md:  0 2px 6px rgba(14, 18, 32, .06), 0 20px 48px rgba(14, 18, 32, .09);
  --shadow-lg:  0 30px 80px rgba(20, 24, 60, .22);

  /* Тёмная панель героя/скачивания — одинакова в обеих темах */
  --ink-panel:  #0B1024;
  --on-panel:   #EEF1FF;
  --on-panel-2: #A9B2D6;

  --wrap:  74rem;
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --hdr-h: 80px;
}

:root[data-theme="dark"] {
  --bg:        #080B18;
  --bg-alt:    #0D1124;
  --surface:   #121733;
  --surface-2: #171D3C;
  --ink:       #EFF2FF;
  --ink-2:     #C6CDEA;
  --muted:     #97A0C4;
  --line:      rgba(255, 255, 255, .10);
  --line-2:    rgba(255, 255, 255, .07);
  --brand-600: #B6AAFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
  --ink-panel: #0A0E1F;
}

/* ─── База ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}

img, svg { max-width: 100%; }
/* Длинные английские термины не должны распирать колонку. */
h1, h2, h3, p, li, dd { overflow-wrap: break-word; }
a { color: var(--brand-600); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--brand); }

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Якорные ссылки не должны уезжать под липкую шапку. */
:where(section, [id]) { scroll-margin-top: calc(var(--hdr-h) + 1rem); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ─── Типографика ────────────────────────────────────────── */
.h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.033em;
  font-weight: 750;
}
.h2 {
  margin: 0 0 .85rem;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.026em;
  font-weight: 750;
}
.h3 { margin: 0 0 .55rem; font-size: 1.22rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }
.h2--onDark { color: var(--on-panel); }

.lead { margin: 0 0 1.6rem; font-size: 1.08rem; line-height: 1.7; color: var(--on-panel-2); max-width: 36rem; }

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .36rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand-600);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow--onDark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #BFC7F0;
}

/* ─── Кнопки ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 14px;
  min-height: 50px;
  font-size: .98rem; font-weight: 650; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn--sm { padding: .62rem 1.15rem; font-size: .9rem; }
.btn__i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px -8px var(--ring);
}
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--ring); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: var(--on-panel);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); color: var(--on-panel); }

/* ─── Шапка ──────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.hdr.is-stuck { border-bottom-color: var(--line); }

.hdr__in { display: flex; align-items: center; gap: 1.2rem; height: var(--hdr-h); }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand__mark { border-radius: 10px; display: block; }
.brand__name { font-size: 1.18rem; font-weight: 750; letter-spacing: -.02em; }

.nav { display: flex; gap: .35rem; margin-left: auto; }
.nav a {
  padding: .5rem .72rem; border-radius: 999px;
  color: var(--muted); font-size: .93rem; font-weight: 550; text-decoration: none;
  transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav__dl { display: none; }

.hdr__act { display: flex; align-items: center; gap: .55rem; }

.iconbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.iconbtn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }
.iconbtn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .i-sun { display: none; }
:root[data-theme="dark"] .iconbtn .i-sun { display: block; }
:root[data-theme="dark"] .iconbtn .i-moon { display: none; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer;
}
.burger span { height: 1.8px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* ─── Герой ──────────────────────────────────────────────── */
/* A soft, readable introduction, using the existing violet brand. */
.hero {
  position: relative;
  margin: 0 auto;
  width: min(100% - 2rem, 90rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: radial-gradient(ellipse at 85% 35%, #DED9FC 0, transparent 55%), #F0EDF8;
  color: var(--ink);
}
:root[data-theme="dark"] .hero {
  background: radial-gradient(ellipse at 85% 35%, #30264F 0, transparent 58%), #151429;
}
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(3rem, 5vw, 5rem) 1.5rem;
}
.hero__in > * { min-width: 0; }
.hero__copy { width: 100%; max-width: 38rem; }
.hero .h1 { font-size: clamp(2.6rem, 4.4vw, 4.1rem); line-height: 1.08; letter-spacing: -.055em; }
.hero .h1 span { color: var(--brand-600); }
.hero .lead { color: var(--muted); font-size: 1.075rem; max-width: 30rem; margin-block: 1.4rem 1.8rem; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; background: var(--surface); border-color: var(--line); letter-spacing: .065em; color: var(--ink-2); }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: none; background: #299181; border-radius: 50%; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.5rem; }
.hero .btn--ghost { color: var(--ink); background: transparent; border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.hero .btn--ghost:hover { background: var(--surface); }
.hero .btn { padding-inline: 1.15rem; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .75rem; }
.chips li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-600); }
.hero__shot { min-width: 0; width: 100%; margin-inline: auto; }
.demo { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 65px -28px #35257255; overflow: hidden; }
.demo__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); font-size: .72rem; }
.demo__brand { display: flex; align-items: center; gap: .55rem; font-weight: 650; }
.demo__ready { color: #277364; background: #E7F5EE; padding: .25rem .5rem; border-radius: 6px; font-size: .63rem; }
.demo__body { padding: 1.5rem; }
.demo__meta { margin: 0 0 .75rem; font-size: .69rem; color: var(--muted); }
.demo__meta span { padding-inline: .3rem; }
.demo h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.3; margin: 0 0 1.3rem; font-weight: 650; letter-spacing: -.025em; }
.demo__tabs { display: flex; gap: .3rem; padding: .25rem; border-radius: 10px; background: var(--surface-2); }
.demo__tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 7px; font-size: .75rem; font-weight: 600; line-height: 1.4; font-family: inherit; color: var(--muted); background: transparent; cursor: pointer; }
.demo__tabs button[aria-pressed="true"] { background: var(--surface); color: var(--brand-600); box-shadow: 0 2px 6px #15142C0D; }
.demo__excerpt { margin: 1.25rem 0; min-height: 140px; }
.demo__label { color: var(--muted); font-size: .64rem; letter-spacing: .065em; text-transform: uppercase; }
.demo__excerpt p:not(.demo__label) { font-size: .95rem; line-height: 1.85; margin: .5rem 0 0; }
.demo mark { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--brand-600); padding: .1rem .15rem; border-radius: 3px; }
.demo__word { display: inline; font: inherit; line-height: inherit; color: var(--brand-600); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 0; border-radius: 3px; padding: .1rem .15rem; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }
.demo__word[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); text-decoration-style: solid; }
.demo__word:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.demo__word:disabled { opacity: 1; cursor: text; }
.demo__term { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; }
.demo__term h3 { margin: .15rem 0; color: var(--brand-600); font-size: 1rem; }
.demo__term p { margin: 0; font-size: .8rem; color: var(--muted); }
.demo__save { width: 44px; height: 44px; flex: none; background: var(--surface); color: var(--brand-600); border: 1px solid var(--line); border-radius: 10px; font-size: 1.5rem; cursor: pointer; }
.demo__save:hover, .demo__save[aria-pressed="true"] { background: var(--brand); color: #fff; }
.demo__feedback { margin: .6rem 0 1rem; font-size: .64rem; min-height: 2em; color: var(--muted); }
.demo__footer { display: flex; justify-content: space-between; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .68rem; color: var(--muted); }
.demo__caption { display: flex; justify-content: center; align-items: center; gap: .5rem; color: var(--muted); font-size: .69rem; margin: 1.1rem 0 0; text-align: center; }
[hidden] { display: none !important; }

/* ─── Полоса с цифрами ───────────────────────────────────── */
.band { padding: clamp(2.6rem, 5vw, 4rem) 0 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  padding: 1.5rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.stat b {
  display: block; margin-bottom: .3rem;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.35rem); font-weight: 780; letter-spacing: -.03em;
  background: linear-gradient(120deg, #3B6BFF, var(--brand) 45%, var(--brand-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ─── Секции ─────────────────────────────────────────────── */
.sec { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.sec--alt { background: var(--bg-alt); border-block: 1px solid var(--line-2); }

.sec__head { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); text-align: center; }
.sec__head--left { margin-inline: 0; text-align: left; }
.sec__sub { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.72; }

/* Шаги */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin: 0; padding: 0; list-style: none; counter-reset: s;
}
.step {
  position: relative;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.step__n {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 1rem;
  border-radius: 11px;
  background: linear-gradient(135deg, #3B6BFF, var(--brand-300));
  color: #fff; font-size: .95rem; font-weight: 700;
  box-shadow: 0 6px 16px -6px var(--ring);
}
.step h3 { margin: 0 0 .45rem; font-size: 1.06rem; font-weight: 690; letter-spacing: -.012em; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
/* Соединительная линия между шагами */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 2.55rem; right: -.5rem; width: 1rem; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* Блок «текст + макет» */
.split > * { min-width: 0; }
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split--rev .split__copy { order: 2; }
.split--rev .split__shot { order: 1; }
.split__copy { max-width: 34rem; }
.split__shot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.screen-caption { max-width: 360px; margin: 14px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; text-align: center; }
.acc p + p { margin-top: 1em; }

.ticks { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: .72rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .28rem;
  width: 19px; height: 19px; border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(135deg, #3B6BFF, var(--brand-300));
}

/* Карточки «ответственный подход» */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.card {
  padding: 1.6rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__i {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.card__i svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 0 0 .45rem; font-size: 1.04rem; font-weight: 690; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.6; }

/* Каталог */
.topics { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.6rem; }
.topics span {
  padding: .5rem .95rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: .88rem;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.topics span:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand-600); transform: translateY(-2px); }
.topics__more { color: var(--muted) !important; border-style: dashed !important; }

.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mod {
  padding: 1.5rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--brand);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mod__meta { margin: 0 0 .5rem; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mod h3 { margin: 0 0 .5rem; font-size: 1.03rem; font-weight: 690; line-height: 1.32; }
.mod p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.6; }
.mods__note { margin: 1.2rem 0 0; color: var(--muted); font-size: .84rem; text-align: center; }

/* Вопросы */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.acc { display: grid; gap: .6rem; }
.acc details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease;
}
.acc details[open] { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-size: 1rem; font-weight: 640; letter-spacing: -.008em;
  cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.acc details > div { padding: 0 1.3rem 1.2rem; }
.acc p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.68; }

/* Скачать */
.dl {
  margin: 0 auto; width: min(100% - 1.5rem, 90rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(130, 87, 255, .38), transparent 60%),
    radial-gradient(48rem 26rem at 0% 100%, rgba(23, 190, 220, .2), transparent 62%),
    linear-gradient(160deg, #141B42, var(--ink-panel) 65%);
  color: var(--on-panel);
  overflow: hidden;
}
.dl__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2.8rem, 5vw, 4.4rem) 0;
}
.dl__icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: var(--shadow-lg); }
.dl__copy { max-width: 42rem; }
.dl__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }

.dl__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.2rem; }
.dl__meta div { padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.dl__meta dt { color: var(--on-panel-2); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.dl__meta dd { margin: .25rem 0 0; font-size: .95rem; font-weight: 640; }
.dl__note { margin: 0; color: var(--on-panel-2); font-size: .85rem; max-width: 38rem; }

/* Поддержка */
.sup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sup__box {
  padding: 1.8rem 1.7rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.sup__box p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.66; }

/* Грант */
.grant { padding: 0 0 clamp(2.4rem, 5vw, 3.4rem); }
.grant__in {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.4rem;
  border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--surface-2);
}
.grant__tag {
  flex: none;
  padding: .28rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand-600);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.grant p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }

/* ─── Подвал ─────────────────────────────────────────────── */
.ftr { background: var(--bg-alt); border-top: 1px solid var(--line); padding-top: clamp(2.6rem, 5vw, 3.6rem); }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.4rem; }
.ftr__brand p { margin: .9rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 22rem; }
.ftr__col { display: flex; flex-direction: column; gap: .55rem; }
.ftr__col h2 { margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.ftr__col a { color: var(--muted); font-size: .91rem; text-decoration: none; }
.ftr__col a:hover { color: var(--brand-600); text-decoration: underline; }

.ftr__bot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  padding: 1.1rem 0 1.6rem; border-top: 1px solid var(--line);
}
.ftr__bot p { margin: 0; color: var(--muted); font-size: .8rem; }

/* ─── Макет телефона ─────────────────────────────────────── */
.phone {
  position: relative; z-index: 2;
  width: min(100%, 390px);
  padding: 1px;
  border-radius: 20px;
  background: linear-gradient(160deg, #2B3160, #12162E);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.phone__scr {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  border-radius: 19px;
  background: #FAFAFF; color: #14181B;
  font-size: 11px; line-height: 1.45;
}

.app-top {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: 18px 20px;
  border-bottom: 1px solid #ECEEF8;
  background: #fff;
}
.app-back { color: #8A93A8; font-size: 15px; line-height: 1; }
.app-title { font-weight: 700; font-size: 12px; }
.app-badge {
  margin-left: auto; padding: 3px 8px; border-radius: 999px;
  background: #EEEBFF; color: #4B39EF; font-size: 9px; font-weight: 700;
}

.app-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.app-body--center { justify-content: flex-start; }
.app-kicker { margin: 0; color: #8A93A8; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.app-h { margin: 0; font-size: 13.5px; line-height: 1.28; font-weight: 700; letter-spacing: -.01em; }
.app-h--sm { font-size: 12px; }

.seg-row { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: #EFF1FA; }
.seg { flex: 1; padding: 5px 0; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 600; color: #6B7488; }
.seg--on { background: #fff; color: #4B39EF; box-shadow: 0 1px 3px rgba(20, 24, 60, .12); }

.app-card { padding: 10px 11px; border-radius: 13px; background: #fff; border: 1px solid #ECEEF8; box-shadow: 0 1px 3px rgba(20, 24, 60, .05); }
.app-sect { margin: 0 0 5px; color: #8A93A8; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-txt { margin: 0; font-size: 13px; line-height: 1.55; color: #2A3247; }
.app-txt--ru { color: #4C5670; }
.term { color: #4B39EF; font-weight: 600; border-bottom: 1.5px dotted #A79AFF; }
.app-div { display: flex; align-items: center; gap: 6px; margin: 8px 0; color: #A6AEC4; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.app-div::before, .app-div::after { content: ""; flex: 1; height: 1px; background: #ECEEF8; }

.app-term { padding: 10px 11px; border-radius: 13px; background: linear-gradient(135deg, #EFEBFF, #E6F6FA); border: 1px solid #DED8FF; }
.app-term__h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: #3D2BD6; }
.app-star { color: #FFB020; font-size: 11px; }
.app-term__t { margin: 3px 0 0; font-size: 13px; font-weight: 600; }
.app-term__d { margin: 3px 0 0; font-size: 11px; color: #5C6785; line-height: 1.45; }

.app-btn {
  margin-top: auto; padding: 11px 0; border-radius: 13px; text-align: center;
  background: linear-gradient(135deg, #3B6BFF, #4B39EF 55%, #8257FF);
  color: #fff; font-size: 11px; font-weight: 650;
  box-shadow: 0 8px 18px -8px rgba(75, 57, 239, .6);
}

.app-tabs {
  flex: none; display: flex; justify-content: space-around;
  padding: 9px 4px 13px; border-top: 1px solid #ECEEF8; background: #fff;
  font-size: 10px; color: #98A0B4;
}
.app-tabs .on { color: #4B39EF; font-weight: 700; }

.outline { display: flex; flex-wrap: wrap; gap: 4px; }
.outline__i { padding: 4px 8px; border-radius: 999px; background: #F1F3FB; color: #6B7488; font-size: 9px; }
.outline__i.on { background: #EEEBFF; color: #4B39EF; font-weight: 650; }

.app-card--pair { border-left: 2.5px solid #4B39EF; }

.gloss { padding: 10px 11px; border-radius: 13px; background: #fff; border: 1px solid #ECEEF8; }
.gloss__row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #F3F5FC; font-size: 11px; }
.gloss__row:first-of-type { border-top: 0; }
.gloss__row span { font-weight: 650; color: #2A3247; }
.gloss__row em { font-style: normal; color: #7C8698; text-align: right; }

.flash { padding: 14px 12px; border-radius: 15px; background: #fff; border: 1px solid #ECEEF8; box-shadow: 0 2px 8px rgba(20, 24, 60, .06); text-align: center; }
.flash__k { margin: 0 0 8px; color: #98A0B4; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.flash__t { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.flash__h { margin: 3px 0 9px; color: #98A0B4; font-size: 9px; }
.flash__a { padding: 7px 0; border-radius: 10px; background: #EEEBFF; color: #3D2BD6; font-size: 11px; font-weight: 700; }
.flash__d { margin: 7px 0 0; color: #5C6785; font-size: 11px; line-height: 1.45; }
.flash__btns { display: flex; gap: 7px; }
.fb { flex: 1; padding: 9px 0; border-radius: 11px; text-align: center; font-size: 10px; font-weight: 650; }
.fb--no { background: #FFF0F1; color: #D8434F; }
.fb--yes { background: #E6F7F3; color: #1F8474; }

.deck { padding: 10px 11px; border-radius: 13px; background: #fff; border: 1px solid #ECEEF8; }
.deck__row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #F3F5FC; font-size: 11px; }
.deck__row:first-of-type { border-top: 0; }
.deck__row span { font-weight: 650; }
.deck__row em { font-style: normal; color: #98A0B4; }

.prog { height: 4px; border-radius: 999px; background: #EDEFF8; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3B6BFF, #8257FF); }

.opt { padding: 9px 10px; border-radius: 11px; border: 1px solid #ECEEF8; background: #fff; font-size: 10px; color: #2A3247; }
.opt--ok { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-color: #9FE0CF; background: #EAF9F5; color: #1F8474; font-weight: 650; }

.expl { padding: 10px 11px; border-radius: 13px; background: #F4F6FD; border: 1px solid #E6EAF7; }
.expl b { font-size: 10px; }
.expl p { margin: 4px 0 0; font-size: 11px; color: #5C6785; line-height: 1.5; }
.expl__t { color: #4B39EF !important; }

/* ─── Появление при скролле ──────────────────────────────── */
.reveal { opacity: 1; }
.reveal.is-pending { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ─── Адаптив ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .stats, .steps, .cards { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .mods { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: var(--hdr-h) 0 auto;
    flex-direction: column; gap: .2rem;
    margin: 0; padding: .8rem 1.25rem 1.2rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    visibility: hidden; transform: translateY(-10px); opacity: 0; pointer-events: none;
    max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto;
    transition: transform .28s ease, opacity .22s ease;
  }
  .nav.is-open { visibility: visible; transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .75rem .6rem; font-size: 1rem; border-radius: 10px; }
  .nav__dl {
    display: block; margin-top: .5rem; text-align: center;
    background: linear-gradient(135deg, #3B6BFF, var(--brand) 52%, var(--brand-300));
    color: #fff !important; font-weight: 650;
  }
  .burger { display: flex; }
  .hdr__act { margin-left: auto; }
  .hdr__cta { display: none; }

  .hero__in { grid-template-columns: 1fr; text-align: left; }
  .hero__copy { max-width: none; }
  .hero__shot { max-width: 520px; margin-top: .5rem; }

  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .split__copy, .split--rev .split__shot { order: initial; }
  .split__copy { max-width: none; }

  .faq { grid-template-columns: 1fr; }
  .sup { grid-template-columns: 1fr; }
  .dl__in { grid-template-columns: 1fr; }
  .dl__icon { width: 88px; height: 88px; border-radius: 22px; }
  .dl__meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .eyebrow { font-size: .66rem; letter-spacing: .07em; padding-inline: .7rem; }
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .hero { width: calc(100% - 1rem); border-radius: 22px; margin-top: 0; }
  .dl { width: calc(100% - 1rem); border-radius: 22px; }
  .stats, .steps, .cards { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr; gap: 1.6rem; }
  .grant__in { flex-direction: column; gap: .7rem; }
  .btn { width: 100%; justify-content: center; }
  .btn--sm, .hdr .btn { width: auto; }
  .topics { justify-content: flex-start; }
  .ftr__bot { flex-direction: column; }
}

/* ─── Layout refinement ──────────────────────────────────── */
button { font-family: inherit; }
.hdr { border-bottom-color: var(--line); }
.brand__name { font-size: 1.4rem; letter-spacing: -.045em; }
.nav a { font-size: .8rem; padding-inline: .65rem; }
.hdr .btn { min-height: 42px; font-size: .78rem; }
.eyebrow:not(.hero__eyebrow):not(.eyebrow--onDark) { border: 0; background: none; border-radius: 0; padding: 0; letter-spacing: .13em; }
.band { padding-top: 0; }
.stats { padding-block: 2.4rem; border-bottom: 1px solid var(--line); gap: 0; }
.stat { padding: .4rem 2rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { color: var(--ink); background: none; font-size: 2.1rem; font-weight: 600; }
.stat span { display: block; max-width: 14rem; font-size: .8rem; }
.h2 { font-weight: 650; letter-spacing: -.045em; font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.sec__sub { font-size: .97rem; }
.step { box-shadow: none; padding: 1.6rem; }
.step__n { color: var(--brand-600); background: var(--surface-2); box-shadow: none; width: 42px; height: 42px; font-size: .9rem; }
.feature { padding-block: clamp(3.5rem, 6vw, 5rem); }
.split__shot { padding: 2.5rem; border-radius: 24px; background: #EBE7F8; }
.feature--vocabulary .split__shot { background: #E5F0ED; }
.feature--quiz .split__shot { background: #F3EDE5; }
:root[data-theme="dark"] .split__shot { background: #23203B; }
:root[data-theme="dark"] .feature--vocabulary .split__shot { background: #152D2C; }
:root[data-theme="dark"] .feature--quiz .split__shot { background: #2B272B; }
.phone { box-shadow: 0 16px 32px -20px #29223B66; background: #DAD7E8; }
.phone__scr { color-scheme: light; }
.app-tabs { font-size: 10px; padding-block: 13px; }
.app-kicker, .app-sect, .app-div, .flash__k, .flash__h, .deck__row em { color: #69748A; }
.gloss__row em { color: #626E84; }
.app-tabs { color: #69748A; }
.ticks li { font-size: .91rem; }
.mod { border-left: 1px solid var(--line); border-top: 3px solid #9684DF; box-shadow: none; padding: 1.8rem; }
.mod:nth-child(2) { border-top-color: #69A697; }
.mod:nth-child(3) { border-top-color: #C8A577; }
.mod h3 { font-size: 1.18rem; margin: 1rem 0 .8rem; }
.mod .mod__meta { font-size: .65rem; }
.topics-disclosure { margin-top: 1.5rem; text-align: center; }
.topics-disclosure summary { width: fit-content; margin: 0 auto; padding: .7rem 1rem; color: var(--brand-600); font-size: .87rem; cursor: pointer; }
.topics-disclosure .topics { margin: 1.2rem 0 0; }
.cards { grid-template-columns: repeat(2, 1fr); }
.card { box-shadow: none; }
.card__i { color: var(--brand-600); }
#safety .sec__head { max-width: 49rem; }
.text-link { display: inline-block; margin-top: 1.3rem; font-size: .9rem; }
.acc details { box-shadow: none; border-radius: 12px; }
.acc summary { min-height: 66px; font-size: .94rem; }
.dl { background: radial-gradient(ellipse at 95% 0, #44306C 0, transparent 60%), #1C1836; }
.dl__in { padding-inline: 2rem; gap: 2.5rem; }
.dl__icon { width: 100px; height: 100px; }
.dl__copy { max-width: none; }
.dl__meta { max-width: 45rem; }
.dl__availability { color: #D5CEED; font-size: .87rem; max-width: 42rem; margin: 0 0 1rem; }
.sup__box { box-shadow: none; }
.grant__in { border-style: solid; }
.ftr__col a { padding-block: .15rem; }
@media (min-width: 901px) and (max-width: 1100px) {
  .nav a { padding-inline: .35rem; font-size: .74rem; }
  .hdr__in { gap: .7rem; }
  .hdr .btn { padding-inline: .8rem; }
  .hero__in { gap: 1.8rem; padding-inline: .6rem; }
  .hero .h1 { font-size: 3.1rem; }
}
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding-inline: 1rem; }
  .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod { padding: 1.25rem; }
  .split__shot { padding: 1.5rem; }
}
@media (max-width: 900px) {
  .hero__in { padding: 3rem 1rem; gap: 2.5rem; }
  .hero__copy { max-width: 550px; margin-inline: auto; }
  .hero .h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
  .hero .lead { max-width: 34rem; }
  .hero__shot { max-width: 550px; }
  .split { gap: 2rem; }
  .split__copy { max-width: 40rem; }
  .split__shot { padding: 2rem; }
  .phone { width: min(100%, 460px); }
  .mods { grid-template-columns: 1fr; }
  .mod { padding: 1.5rem; }
  .nav a { font-size: .95rem; }
  .dl__in { padding-inline: 1rem; }
}
@media (max-width: 620px) {
  :root { --hdr-h: 68px; }
  .hero__in { width: 100%; padding: 2.2rem 1.25rem 1.5rem; gap: 1.8rem; }
  .hero .h1 { font-size: clamp(2.2rem, 8.3vw, 3.1rem); }
  .hero .lead { font-size: 1rem; line-height: 1.7; margin-block: 1.2rem 1.5rem; }
  .hero__eyebrow { font-size: .57rem; letter-spacing: .035em; }
  .hero__cta { margin-bottom: 1.1rem; gap: .6rem; }
  .chips { gap: .4rem .85rem; }
  .chips li { font-size: .67rem; }
  .demo__bar { padding: .85rem 1rem; }
  .demo__ready { font-size: .57rem; }
  .demo__body { padding: 1rem; }
  .demo h2 { font-size: 1.3rem; }
  .demo__excerpt p:not(.demo__label) { font-size: .86rem; }
  .demo__excerpt { min-height: 155px; }
  .demo__caption { font-size: .62rem; }
  .demo__term { padding: .7rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; padding-block: 2rem; }
  .stat { padding: 0 1rem; }
  .stat:nth-child(3) { border-left: 0; }
  .stat b { font-size: 1.7rem; }
  .stat span { font-size: .73rem; }
  .sec { padding-block: 3.5rem; }
  .sec__head { text-align: left; margin-bottom: 1.8rem; }
  .h2 { font-size: 2rem; }
  .steps, .cards { grid-template-columns: 1fr; }
  .step { padding: 1.4rem; }
  .split__shot { padding: 1rem; border-radius: 18px; }
  .app-body { padding: 15px; }
  .app-top { padding: 15px; }
  .gloss__row { flex-wrap: wrap; gap: 3px 8px; }
  .gloss__row em { text-align: left; }
  .dl__in { width: 100%; padding: 2rem 1.25rem; gap: 1.5rem; }
  .dl .h2 { font-size: 1.9rem; }
  .dl__icon { width: 64px; height: 64px; border-radius: 17px; }
  .dl__meta { gap: 1rem .5rem; }
  .dl__meta dd { font-size: .85rem; }
  .dl .btn { white-space: normal; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal.is-pending { opacity: 1; transform: none; }
}

/* Usable navigation and static examples if scripts are blocked. */
:root:not(.has-js) #theme, :root:not(.menu-ready) .burger { display: none; }
button:disabled { cursor: default; }
:root:not(.has-js) .demo__save, :root:not(.has-js) .demo__feedback, :root:not(.has-js) .demo__caption { display: none; }
@media (max-width: 900px) {
  :root:not(.menu-ready) .hdr { position: relative; }
  :root:not(.menu-ready) .hdr__in { height: auto; flex-wrap: wrap; padding-block: 1rem; }
  :root:not(.menu-ready) .nav { position: static; order: 3; width: 100%; visibility: visible; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; padding: 0; max-height: none; }
}
@media print {
  .hdr, .hero__cta, .dl__cta, .demo__save { display: none; }
  .reveal.is-pending { opacity: 1; transform: none; }
}

/* Grant artwork retained from the RuStore revision. */
.grant__in { display: block; padding: 2rem; }
.grant__copy { max-width: 48rem; }
.grant p { font-size: .88rem; }
.grant__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 3rem; margin-top: 1.8rem; padding: 1.5rem 2rem; background: #fff; border: 1px solid #E9E8E5; border-radius: 10px; }
.grant__logos img { width: min(100%, 240px); height: 160px; object-fit: contain; }
@media (max-width: 620px) {
  .grant__in { padding: 1.25rem; }
  .grant__logos { padding: 1rem; gap: 1.8rem; justify-content: center; }
  .grant__logos img { max-width: 240px; height: 140px; }
}

/* 2026-09: a real lesson replaces decorative product screens. */
:root { --lesson-blue:#3B60F9; --lesson-soft:#F2F4FF; }
[data-theme="dark"] { --lesson-blue:#AAB9FF; --lesson-soft:#202945; }
.hero { background: var(--bg); border: 0; border-radius: 0; margin: 0 auto; width: 100%; }
.hero__in { gap: 5rem; padding-block: 4.5rem 4rem; grid-template-columns: 1.08fr 1fr; align-items: center; }
.hero__copy { max-width: 36rem; }
.hero .h1 { font-size: clamp(3rem,4.8vw,4.5rem); line-height:1.06; letter-spacing:-.065em; font-weight:700; }
.hero .h1 span { color:var(--brand); }
.hero .lead { font-size:1.05rem; line-height:1.85; max-width:31rem; margin:1.6rem 0 1.8rem; }
.hero__eyebrow { background:transparent; padding:0; border:0; margin-bottom:1.5rem; font-size:.67rem; }
.hero__shot { width:100%; max-width:500px; position:relative; }
.module-preview { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 65px -24px #34268035; overflow:hidden; transform:rotate(1deg); transition:transform .3s; }
.module-preview:hover { transform:rotate(0deg); }
.preview-top { display:flex; align-items:center; gap:.6rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line); font-size:.86rem; font-weight:600; }
.preview-tag { margin-left:auto; color:var(--muted); font-weight:400; font-size:.64rem; }
.preview-body { padding:1.6rem 1.7rem; }
.preview-source { color:var(--lesson-blue); font-size:.63rem; margin:0 0 .7rem; }
.preview-body h2 { font-size:1.5rem; line-height:1.35; font-weight:650; letter-spacing:-.035em; margin:0 0 .8rem; }
.preview-meta { font-size:.64rem; color:var(--muted); margin:0; }
.preview-meta span { margin-inline:.35rem; }
.preview-intro { background:var(--lesson-soft); border-radius:14px; padding:1rem 1.1rem; margin:1.2rem 0; }
.preview-intro strong { font-size:.85rem; }
.preview-intro p { font-size:.73rem; line-height:1.7; color:var(--muted); margin:.45rem 0 .85rem; }
.preview-intro .btn { background:#3B60F9; min-height:42px; padding:.7rem 1rem; width:100%; font-size:.75rem; box-shadow:none; }
.preview-label { font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
.preview-row { display:flex; align-items:center; gap:.8rem; padding:.7rem .1rem; border-bottom:1px solid var(--line); text-decoration:none; }
.preview-row:last-child { border-bottom:0; }
.preview-row>span:first-child { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--lesson-soft); color:var(--lesson-blue); font-size:.7rem; }
.preview-row>span:last-child { margin-left:auto; color:var(--muted); }
.preview-row b { display:block; font-size:.77rem; font-weight:600; }
.preview-row small { display:block; font-size:.63rem; color:var(--muted); margin-top:.12rem; }
.preview-row:hover { color:var(--lesson-blue); }
.preview-caption { text-align:center; color:var(--muted); font-size:.67rem; margin:1.1rem 0 0; }
.band { background:var(--surface); border-block:1px solid var(--line); }
.stat b { font-size:1.9rem; }
.lesson-section { padding-block:6rem; }
.lesson-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:2.5rem; }
.lesson-heading>p { max-width:23rem; font-size:.93rem; color:var(--muted); line-height:1.8; margin:0 0 .4rem; }
.lesson-heading .h2 { margin-bottom:0; }
.lesson { border:1px solid var(--line); background:var(--surface); border-radius:24px; overflow:hidden; box-shadow:0 18px 55px -35px #33268B40; scroll-margin-top:110px; }
.lesson-top { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.7rem 2rem; border-bottom:1px solid var(--line); }
.lesson-top .eyebrow { margin:0 0 .5rem; font-size:.58rem; color:var(--lesson-blue); }
.lesson-top h3 { margin:0; font-size:1.35rem; line-height:1.3; letter-spacing:-.03em; font-weight:650; }
.lesson-top p:last-child { font-size:.68rem; color:var(--muted); margin:.5rem 0 0; }
.source-link { font-size:.7rem; color:var(--lesson-blue); white-space:nowrap; text-underline-offset:4px; }
.lesson-layout { display:grid; grid-template-columns:205px minmax(0,1fr); }
.lesson-sidebar { padding:1.8rem 1.1rem; background:color-mix(in srgb, var(--lesson-soft) 50%, var(--surface)); border-right:1px solid var(--line); }
.lesson-sidebar .preview-label { padding-inline:.6rem; margin-bottom:1rem; }
.section-nav { display:grid; gap:.4rem; }
.section-nav button { display:flex; align-items:center; gap:.5rem; padding:.8rem .65rem; min-height:46px; width:100%; font:inherit; font-size:.74rem; color:var(--muted); border:1px solid transparent; border-radius:9px; background:transparent; text-align:left; cursor:pointer; }
.section-nav button span { font-size:.65rem; opacity:.8; }
.section-nav button i { margin-left:auto; font-style:normal; color:#278168; }
.section-nav button:hover { background:var(--lesson-soft); }
.section-nav button[aria-pressed="true"] { color:var(--lesson-blue); background:var(--surface); border-color:var(--line); font-weight:600; box-shadow:0 3px 8px #00000004; }
.lesson-progress { padding:1.4rem .6rem; }
.lesson-progress label { display:block; font-size:.6rem; color:var(--muted); line-height:1.7; }
.lesson-progress progress { display:block; width:100%; height:5px; margin-top:.7rem; border:0; border-radius:4px; overflow:hidden; background:var(--line); accent-color:var(--lesson-blue); }
progress::-webkit-progress-bar { background:var(--line); } progress::-webkit-progress-value { background:var(--lesson-blue); border-radius:4px; }
.vocab-nav { width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; gap:.5rem; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; font:inherit; font-size:.69rem; padding:.8rem; cursor:pointer; min-height:44px; }
.vocab-nav span { color:var(--lesson-blue); }
.session-note { font-size:.62rem; color:var(--muted); line-height:1.75; padding-inline:.5rem; margin:1rem 0 0; }
.lesson-content { padding:1.8rem 2rem 2rem; min-height:560px; min-width:0; }
.reader-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; margin-bottom:1.5rem; }
.reader-toolbar>p { font-size:.64rem; color:var(--muted); margin:0; }
.language-switch { display:flex; padding:3px; gap:3px; background:var(--lesson-soft); border-radius:9px; }
.language-switch button { border:0; border-radius:7px; background:transparent; color:var(--muted); font:inherit; font-size:.65rem; cursor:pointer; min-height:36px; padding:.4rem .8rem; }
.language-switch button[aria-pressed="true"] { color:var(--lesson-blue); background:var(--surface); box-shadow:0 1px 5px #0000000A; }
.lesson-content h3 { font-size:1.55rem; line-height:1.35; letter-spacing:-.03em; margin:0 0 1.5rem; font-weight:600; outline-offset:6px; }
.reader-grid { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:1.6rem; align-items:start; }
.reading-text { font-size:.86rem; line-height:1.95; }
.reading-text p { margin:0 0 1.15rem; }
.term-word { display:inline; font:inherit; line-height:inherit; padding:0 .13rem; border:0; border-radius:3px; cursor:pointer; background:var(--lesson-soft); color:var(--lesson-blue); text-decoration:underline dotted; text-underline-offset:4px; }
.term-word:hover,.term-word[aria-pressed="true"] { background:color-mix(in srgb,var(--lesson-blue) 16%,var(--surface)); text-decoration-style:solid; }
.reader-hint { font-size:.64rem; color:var(--muted); line-height:1.7; margin:1rem 0 0; }
.term-panel { border:1px solid var(--line); background:var(--lesson-soft); padding:1rem; border-radius:12px; }
.term-panel .eyebrow { font-size:.51rem; margin:0 0 .8rem; color:var(--muted); }
.term-panel h4 { color:var(--lesson-blue); font-size:1rem; line-height:1.35; margin:0 0 .45rem; overflow-wrap:anywhere; }
#term-ru { font-size:.76rem; font-weight:500; line-height:1.6; margin:0 0 1rem; }
#term-definition { font-size:.7rem; color:var(--muted); line-height:1.8; margin:0 0 1rem; }
#term-example { border-left:2px solid var(--lesson-blue); margin:0 0 1rem; padding-left:.7rem; font-size:.68rem; line-height:1.7; color:var(--muted); }
.term-save.demo__save { width:100%; height:auto; min-height:40px; font:inherit; font-size:.65rem; font-weight:600; border-color:transparent; padding:.6rem; border-radius:8px; color:var(--lesson-blue); background:var(--surface); }
.term-save.demo__save[aria-pressed="true"] { color:#fff; background:#3B60F9; }
#term-feedback { font-size:.58rem; line-height:1.6; color:var(--muted); margin:.6rem 0 0; }
#term-feedback:empty { display:none; }
.reader-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.4rem; margin-top:1.6rem; border-top:1px solid var(--line); }
.reader-actions p { font-size:.72rem; margin:0; line-height:1.6; }.reader-actions p span { color:var(--muted); font-size:.64rem; }
.lesson .btn { font-size:.73rem; min-height:44px; box-shadow:none; }
.lesson .btn--primary { background:#3B60F9; color:white; }
.lesson-note { font-size:.61rem; color:var(--muted); line-height:1.7; padding:1rem 2rem; background:color-mix(in srgb,var(--lesson-soft) 35%,var(--surface)); border-top:1px solid var(--line); }
.source-details { font-size:.69rem; color:var(--muted); line-height:1.8; margin-top:1.2rem; max-width:900px; }
.source-details summary { cursor:pointer; min-height:38px; padding:.5rem 0; }
.source-details a { color:var(--brand-600); text-decoration:underline; text-underline-offset:3px; }
.quiet-btn { border:0; background:transparent; font:inherit; font-size:.7rem; color:var(--lesson-blue); cursor:pointer; padding:.5rem; min-height:40px; }
.answer-options { display:grid; gap:.75rem; margin:1.5rem 0; }
.answer-option { padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-align:left; font:inherit; font-size:.85rem; line-height:1.65; cursor:pointer; min-height:56px; }
.answer-option:hover:not(:disabled) { border-color:var(--lesson-blue); background:var(--lesson-soft); }
.answer-option.is-correct { border-color:#3C9276; background:color-mix(in srgb,#56B491 10%,var(--surface)); }
.answer-option.is-incorrect { border-color:#BD5367; background:color-mix(in srgb,#D55576 8%,var(--surface)); }
.answer-option:disabled { cursor:default; opacity:1; }
.answer-feedback { background:var(--lesson-soft); font-size:.82rem; line-height:1.8; padding:1.2rem; margin:1.5rem 0; border-radius:12px; }
#complete-view { padding-block:4rem; max-width:560px; }
#complete-result,#vocab-intro { font-size:.88rem; line-height:1.8; color:var(--muted); }
.completion-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.saved-word { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); font-size:.84rem; }
.saved-word p { font-size:.74rem; color:var(--muted); margin:.35rem 0 0; }
#start-review { margin-top:1.5rem; }
#flashcard { background:var(--lesson-soft); border-radius:18px; padding:2rem; text-align:center; margin-top:1rem; }
#flash-word { font-size:1.8rem; color:var(--lesson-blue); margin:1.5rem 0; }
#flash-answer { font-size:.85rem; line-height:1.8; margin-bottom:1.5rem; }
#flash-rating { display:flex; justify-content:center; gap:1.5rem; }
.no-js-note { margin:1.5rem; font-size:.85rem; }
.skills-section { background:var(--surface); padding-block:4.5rem; border-block:1px solid var(--line); }
.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; margin-top:3rem; }
.skill-grid article+article { border-left:1px solid var(--line); padding-left:2.5rem; }
.skill-number { color:var(--brand); font-size:.63rem; letter-spacing:.07em; }
.skill-grid h3 { font-size:1.2rem; line-height:1.45; letter-spacing:-.035em; margin:1.1rem 0 .7rem; }
.skill-grid p { font-size:.86rem; line-height:1.85; color:var(--muted); margin:0 0 1.2rem; }
.skill-grid .text-link { font-size:.72rem; }
:focus-visible { outline:2px solid var(--lesson-blue); outline-offset:4px; }
@media (max-width:1100px) {
  .hero__in { gap:2.5rem; }.hero .h1 { font-size:3.5rem; }
  .lesson-layout { grid-template-columns:180px minmax(0,1fr); }.lesson-content { padding:1.5rem; }
  .reader-grid { grid-template-columns:minmax(0,1fr) 185px; gap:1.1rem; }
}
@media (max-width:900px) {
  .hero__in { grid-template-columns:1fr; gap:2.5rem; padding-block:3rem; }
  .hero__copy { margin:0; max-width:650px; }.hero__shot { max-width:650px; margin:0; }
  .hero .h1 { font-size:clamp(2.8rem,7vw,4.5rem); }.hero .h1 br:last-child { display:none; }
  .preview-body { padding:1.5rem; }.module-preview { transform:none; }
  .lesson-heading { align-items:start; flex-direction:column; gap:1.2rem; }.lesson-heading>p { max-width:600px; }
  .lesson-layout { grid-template-columns:1fr; }.lesson-sidebar { padding:1rem 1.5rem; border:0; border-bottom:1px solid var(--line); }
  .section-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.25rem; }
  .section-nav button { padding:.7rem .4rem; font-size:.7rem; justify-content:center; }.section-nav button span { display:none; }
  .lesson-sidebar .preview-label,.lesson-sidebar .session-note { display:none; }
  .lesson-progress { display:inline-block; width:calc(100% - 210px); padding:.9rem .4rem .1rem; vertical-align:middle; }
  .vocab-nav { display:inline-flex; width:185px; margin-left:20px; vertical-align:middle; }
  .reader-grid { grid-template-columns:minmax(0,1fr) 215px; gap:1.6rem; }
  .skill-grid { gap:1.5rem; }.skill-grid article+article { padding-left:1.5rem; }
}
@media (max-width:700px) {
  .hero__in { padding:2.5rem 1.25rem; gap:2rem; }.hero .h1 { font-size:clamp(2.6rem,8.5vw,3.6rem); }.hero .h1 br:last-child { display:initial; }
  .hero .lead { font-size:.97rem; line-height:1.8; }.hero__eyebrow { font-size:.58rem; }
  .hero__cta { flex-wrap:wrap; }.hero__cta .btn { padding:.85rem 1rem; font-size:.73rem; }
  .hero .chips { font-size:.58rem; gap:.7rem; }.preview-body h2 { font-size:1.4rem; }
  .preview-top { padding:1rem 1.25rem; }.preview-body { padding:1.25rem; }
  .lesson-section { padding-block:3.5rem; }.lesson-heading { margin-bottom:1.75rem; }.lesson-heading>p { font-size:.85rem; }
  .lesson { border-radius:17px; }.lesson-top { padding:1.25rem; align-items:start; flex-direction:column; gap:.7rem; }
  .lesson-top h3 { font-size:1.25rem; }.lesson-top .eyebrow { font-size:.52rem; }
  .lesson-sidebar { padding:.75rem; }.section-nav button { font-size:.61rem; gap:.25rem; min-height:44px; }
  .section-nav button i { margin-left:0; }.lesson-progress { width:calc(100% - 180px); }.vocab-nav { width:162px; margin-left:12px; padding:.7rem; font-size:.61rem; }
  .lesson-content { padding:1.25rem; min-height:0; }.reader-toolbar { margin-bottom:1.3rem; gap:.7rem; }.reader-toolbar>p { font-size:.6rem; }
  .lesson-content h3 { font-size:1.3rem; margin-bottom:1.3rem; }.reader-grid { grid-template-columns:1fr; gap:1.2rem; }
  .reading-text { font-size:.9rem; line-height:1.95; }.term-panel { padding:1.1rem; }
  .term-panel h4 { font-size:1.2rem; }#term-definition,#term-example { font-size:.78rem; }#term-ru { font-size:.85rem; }
  .term-save.demo__save { font-size:.75rem; min-height:44px; }#term-feedback { font-size:.65rem; }
  .reader-actions { gap:.75rem; }.reader-actions p { font-size:.64rem; }.reader-actions .btn { padding:.8rem; font-size:.68rem; }
  .lesson-note { padding:1rem 1.25rem; font-size:.6rem; }.source-details { font-size:.66rem; }
  .skill-grid { grid-template-columns:1fr; margin-top:2rem; gap:1.5rem; }.skill-grid article+article { border-left:0; border-top:1px solid var(--line); padding:1.5rem 0 0; }
  .skill-grid h3 { margin-top:.6rem; }.skill-grid p { margin-bottom:.7rem; }
  #complete-view { padding-block:1.5rem; }.completion-actions .btn { width:100%; }#flashcard { padding:1.25rem; }#flash-word { font-size:1.5rem; }
}
@media (prefers-reduced-motion:reduce) { .module-preview { transform:none; transition:none; } }
@media print { .lesson-sidebar,.reader-actions,.language-switch,.term-save { display:none; }.lesson-layout,.reader-grid { display:block; }.lesson-content { min-height:0; } }
/* Keep the primary actions in the first desktop viewport. */
@media (min-width:901px) {
  .hero__in { padding-block:2.6rem 3rem; }
  .hero .h1 { font-size:clamp(3rem,4.6vw,4.15rem); }
  .hero .lead { margin:1.3rem 0 1.5rem; }
  .preview-body { padding:1.25rem 1.6rem; }
  .preview-intro { margin:1rem 0; padding:.85rem 1rem; }
  .preview-row { padding:.5rem .1rem; }
}
.reading-text { font-size:.93rem; }
.lesson-content h3 { scroll-margin-top:110px; }
.term-panel { scroll-margin-top:100px; }
:root[data-theme="dark"] .hero { background:var(--bg); }
:root[data-theme="dark"] .hero .h1 span,
:root[data-theme="dark"] .brand__name,
:root[data-theme="dark"] .skill-number { color:var(--brand-600); }
/* Keep the section toolbar above a focused question visible below the header. */
.lesson-content h3 { scroll-margin-top:170px; }