/* =========================================================================
   Evreeka! — main.css
   Единый файл стилей: TOKENS | BASE | LAYOUT | COMPONENTS.
   Mobile-first: медиазапросы только возрастающие (min-width).
   Логические свойства (RTL-совместимо): margin-inline-*, padding-inline-*,
   inset-inline-*, text-align: start/end, border-inline-*. Физические
   left/right не используются нигде в этом файле.
   ========================================================================= */

/* === TOKENS ============================================================= */

/* Начертания 400/700 — раздельные статичные файлы (не один файл вариативного
   шрифта на оба начертания): для латиницы и кириллицы статичная инстанция
   заметно легче вариативной (кегль таблиц интерполяции гораздо больше веса,
   который экономит отказ от них), а раздельные файлы позволяют браузеру
   догружать по фактическому начертанию текста на конкретной странице. */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-400.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;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-700.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;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-ext-400.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: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-ext-700.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: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Noto Sans Arabic объявляется во всех версиях main.css, но её файл
   запрашивается браузером только на странице, где реально есть текст этого
   unicode-range (html[lang="ar"]) — на en/az/ru страницах файл не грузится. */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  /* --- цвета --- */
  --color-primary: #FD68AE;
  --color-primary-hover: #FF8CC1;
  --color-primary-active: #F5589F;
  --color-surface-base: #252222;
  --color-surface-elevated: #7E023C;
  --color-surface-floating: rgba(37, 34, 34, 0.92);
  --color-surface-sunken: #1C1919;
  --color-callout-caution: #4B3F02;
  --color-callout-positive: #183A13;
  --color-text-primary: #FFFFFF;
  --color-text-body: #E5E0DF;
  --color-text-muted: #B5AFAE;
  --color-text-inverse: #252222;
  --color-border: #3A3535;
  --color-border-plane: #971B55;
  --color-focus: #FD68AE;
  --color-overlay-scrim: rgba(37, 34, 34, 0.8);

  /* --- типографика: шрифты --- */
  --font-body: "Overpass", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- типографика: уровни (мобильные значения — база) --- */
  --text-h1-size: 32px;      --text-h1-weight: 700; --text-h1-line: 1.12; --text-h1-tracking: -0.015em;
  --text-h1d-size: 48px;     --text-h1d-line: 1.12; --text-h1d-tracking: -0.015em;
  --text-h2-size: 28px;      --text-h2-weight: 700; --text-h2-line: 1.15; --text-h2-tracking: -0.01em;
  --text-h2d-size: 40px;     --text-h2d-line: 1.15; --text-h2d-tracking: -0.01em;
  --text-h3-size: 20px;      --text-h3-weight: 700; --text-h3-line: 1.3;  --text-h3-tracking: 0em;
  --text-h3d-size: 24px;     --text-h3d-line: 1.3;  --text-h3d-tracking: 0em;
  --text-h4-size: 18px;      --text-h4-weight: 700; --text-h4-line: 1.3;  --text-h4-tracking: 0em;
  --text-h4d-size: 20px;     --text-h4d-line: 1.3;  --text-h4d-tracking: 0em;
  --text-h5-size: 16px;      --text-h5-weight: 700; --text-h5-line: 1.4;  --text-h5-tracking: 0em;
  --text-h5d-size: 18px;     --text-h5d-line: 1.4;  --text-h5d-tracking: 0em;
  --text-h6-size: 14px;      --text-h6-weight: 700; --text-h6-line: 1.4;  --text-h6-tracking: 0.02em;
  --text-h6d-size: 15px;     --text-h6d-line: 1.4;  --text-h6d-tracking: 0.02em;
  --text-body-size: 16px;    --text-body-weight: 400; --text-body-line: 1.55; --text-body-tracking: 0em;
  --text-bodyd-size: 18px;   --text-bodyd-line: 1.55; --text-bodyd-tracking: 0em;
  --text-body-sm-size: 15px; --text-body-sm-weight: 400; --text-body-sm-line: 1.5; --text-body-sm-tracking: 0em;
  --text-body-smd-size: 16px; --text-body-smd-line: 1.5; --text-body-smd-tracking: 0em;
  --text-caption-size: 14px; --text-caption-weight: 400; --text-caption-line: 1.45; --text-caption-tracking: 0.01em;
  --text-cta-size: 16px;     --text-cta-weight: 700; --text-cta-line: 1.2; --text-cta-tracking: 0.01em;
  --text-ctad-size: 17px;    --text-ctad-line: 1.2;  --text-ctad-tracking: 0.01em;

  /* --- отступы --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --section-y: 56px;
  --section-y-tablet: 72px;
  --section-y-desktop: 96px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --container-max-desktop: 1200px;
  --gutter-desktop: 24px;
  --card-width-desktop: 368px;
  --card-pad: 20px;
  --callout-pad-desktop: 20px;
  --nav-height: 64px;
  --nav-height-desktop: 72px;
  --cta-bar-height: 80px;
  --tap-size: 44px;
  --marker-size: 40px;
  --step-inset: 20px;
  --icon-step: 20px;
  --illustration-max-width: 420px;
  --text-max-desktop: 640px;
  --steps-col-width-desktop: 564px;
  --logo-width: 131px;
  --logo-width-desktop: 174px;
  --logo-final-width: 261px;
  --logo-final-width-desktop: 392px;
  --portrait-size: 96px;
  --portrait-size-desktop: 120px;
  --lang-menu-width: 160px;

  /* --- скругления --- */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-image: 16px;
  --radius-circle: 9999px;

  /* --- границы --- */
  --border-hairline: 1px solid var(--color-border);
  --border-plane: 1px solid var(--color-border-plane);
  --border-step: 2px dashed var(--color-primary);

  /* --- тень (единственная в системе) --- */
  --shadow-floating: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* --- движение --- */
  --motion-hover-duration: 160ms;
  --motion-hover-easing: ease-out;
  --motion-active-duration: 80ms;
  --motion-active-easing: ease-out;
  --motion-cta-duration: 240ms;
  --motion-cta-easing: ease-out;
  --motion-menu-duration: 120ms;
  --motion-menu-easing: ease-out;

  /* --- слои --- */
  --z-bar: 100;
  --z-menu: 110;
  --z-scrim: 1;
  --blur-overlay: 12px;

  color-scheme: dark;
}

/* === BASE ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-surface-base);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  letter-spacing: var(--text-body-tracking);
}
@media (min-width: 1024px) {
  body { font-size: var(--text-bodyd-size); line-height: var(--text-bodyd-line); }
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-text-primary); font-family: var(--font-body); }

h1 {
  font-size: var(--text-h1-size); font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking);
  margin-block-start: var(--space-1);
}
@media (min-width: 1024px) {
  h1 { font-size: var(--text-h1d-size); line-height: var(--text-h1d-line); letter-spacing: var(--text-h1d-tracking); }
}
h2 {
  font-size: var(--text-h2-size); font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking);
}
@media (min-width: 1024px) {
  h2 { font-size: var(--text-h2d-size); line-height: var(--text-h2d-line); letter-spacing: var(--text-h2d-tracking); }
}
h3 {
  font-size: var(--text-h3-size); font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line); letter-spacing: var(--text-h3-tracking);
}
@media (min-width: 1024px) {
  h3 { font-size: var(--text-h3d-size); line-height: var(--text-h3d-line); letter-spacing: var(--text-h3d-tracking); }
}
h4 {
  font-size: var(--text-h4-size); font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line); letter-spacing: var(--text-h4-tracking);
}
@media (min-width: 1024px) {
  h4 { font-size: var(--text-h4d-size); line-height: var(--text-h4d-line); letter-spacing: var(--text-h4d-tracking); }
}
h5 {
  font-size: var(--text-h5-size); font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line); letter-spacing: var(--text-h5-tracking);
}
@media (min-width: 1024px) {
  h5 { font-size: var(--text-h5d-size); line-height: var(--text-h5d-line); letter-spacing: var(--text-h5d-tracking); }
}
h6 {
  font-size: var(--text-h6-size); font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-line); letter-spacing: var(--text-h6-tracking);
}
@media (min-width: 1024px) {
  h6 { font-size: var(--text-h6d-size); line-height: var(--text-h6d-line); letter-spacing: var(--text-h6d-tracking); }
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

table { border-collapse: collapse; width: 100%; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

button { font: inherit; }

/* фокус — единая система на весь документ (webclean.a11y.focusRing) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* уважение prefers-reduced-motion: переходы состояний и эффекты отключаются */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* контент, ожидающий появления через .js-ready .reveal — в этой системе не
   используется (нет содержимого, скрываемого в расчёте на JS), но правило
   объявлено на случай будущего использования, ничего не скрывает по умолчанию. */
.reveal { opacity: 1; }

/* === LAYOUT =============================================================== */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-2);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-3); }
}
@media (min-width: 1024px) {
  .container { max-width: var(--container-max-desktop); padding-inline: var(--space-3); }
}

.section { padding-block: var(--section-y); }
@media (min-width: 768px) { .section { padding-block: var(--section-y-tablet); } }
@media (min-width: 1024px) { .section { padding-block: var(--section-y-desktop); } }

/* split: развороты «текст | иллюстрация» (S1, S3, S6, S9, S10) */
.split-grid { display: block; }
@media (min-width: 1024px) {
  .split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--gutter-desktop);
    align-items: start;
  }
}
.split-grid .illustration { margin-block-start: var(--space-4); }
@media (min-width: 1024px) {
  .split-grid .illustration { margin-block-start: 0; }
}

/* cards: S2, S8, S11, S12.2 — 1 → 2 → 3 колонки */
.grid { display: grid; }
.grid-cards { grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 768px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (min-width: 1024px) {
  .grid-cards {
    grid-template-columns: repeat(3, minmax(0, var(--card-width-desktop)));
    gap: var(--gutter-desktop);
    justify-content: flex-start;
  }
}

/* steps: колонки «Потерявший» / «Нашедший» в S7 */
.grid-steps { grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) {
  .grid-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (min-width: 1024px) {
  .grid-steps {
    grid-template-columns: repeat(2, minmax(0, var(--steps-col-width-desktop)));
    gap: var(--gutter-desktop);
    justify-content: flex-start;
  }
}

/* trio: бенчмарки S12.3, команда S12.5, подвал S14 */
.grid-trio { grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) {
  .grid-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}
@media (min-width: 1024px) {
  .grid-trio {
    grid-template-columns: repeat(3, minmax(0, var(--card-width-desktop)));
    gap: var(--gutter-desktop);
    justify-content: flex-start;
  }
}

/* plates: пластины слоёв сопоставления S7 и фаз роста S12.1 — 1 колонка до
   desktop (без промежуточной планшетной раскладки), 3 — на desktop */
.grid-plates { grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 1024px) {
  .grid-plates {
    grid-template-columns: repeat(3, minmax(0, var(--card-width-desktop)));
    gap: var(--gutter-desktop);
    justify-content: flex-start;
  }
}

/* === COMPONENTS =========================================================== */

/* --- кнопка --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-cta-size);
  font-weight: var(--text-cta-weight);
  line-height: var(--text-cta-line);
  letter-spacing: var(--text-cta-tracking);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .btn { font-size: var(--text-ctad-size); line-height: var(--text-ctad-line); letter-spacing: var(--text-ctad-tracking); }
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-button);
  min-height: var(--space-6);
  padding-inline: var(--space-3);
}
@media (min-width: 1024px) {
  .btn-primary { padding-inline: var(--space-4); }
}
.btn-block { width: 100%; }
@media (min-width: 1024px) {
  .btn-block { width: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--color-primary-hover); }
}
.btn-primary:focus-visible { outline-color: var(--color-text-primary); }
.btn-primary:active { background: var(--color-primary-active); transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active { transform: none; }
}

/* --- ссылка --- */
.link { min-height: var(--tap-size); display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; color: var(--color-text-primary); }
}

/* --- шапка (S0) --- */
.site-header {
  position: static;
  background: var(--color-surface-floating);
  backdrop-filter: blur(var(--blur-overlay));
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  border-block-end: var(--border-hairline);
  z-index: var(--z-bar);
}
@media (min-width: 1024px) {
  .site-header { position: sticky; inset-block-start: 0; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  min-height: var(--nav-height);
}
@media (min-width: 1024px) {
  .site-header__inner { min-height: var(--nav-height-desktop); }
}
.logo { display: inline-flex; align-items: center; }
.logo__img { width: var(--logo-width); height: auto; }
@media (min-width: 1024px) {
  .logo__img { width: var(--logo-width-desktop); }
}
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; margin-inline-start: auto; }
  .site-nav ul { display: flex; gap: var(--space-3); }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding-inline: var(--space-1);
  color: var(--color-text-body);
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--color-text-primary); }
}
.site-header__cta { display: none; }
@media (min-width: 1024px) {
  .site-header__cta { display: inline-flex; }
}

/* --- переключатель языка --- */
.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--tap-size);
  min-height: var(--tap-size);
  justify-content: center;
  color: var(--color-text-primary);
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-line);
  letter-spacing: var(--text-h6-tracking);
}
@media (min-width: 1024px) {
  .lang-switch summary { font-size: var(--text-h6d-size); line-height: var(--text-h6d-line); letter-spacing: var(--text-h6d-tracking); }
}
.lang-switch summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lang-switch summary:hover { color: var(--color-primary); }
}
.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  width: var(--lang-menu-width);
  background: var(--color-surface-floating);
  backdrop-filter: blur(var(--blur-overlay));
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-1);
  z-index: var(--z-menu);
  opacity: 0;
}
.lang-switch[open] .lang-menu {
  animation: lang-menu-open var(--motion-menu-duration) var(--motion-menu-easing) forwards;
}
@keyframes lang-menu-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch[open] .lang-menu { animation: none; opacity: 1; }
}
.lang-menu li a {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  padding-inline: var(--space-2);
  color: var(--color-text-body);
  text-decoration: none;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}
@media (hover: hover) and (pointer: fine) {
  .lang-menu li a:hover { color: var(--color-text-primary); }
}
.lang-menu li a.lang-current {
  color: var(--color-text-primary);
  text-decoration: underline;
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line);
}

/* --- нижняя панель (cta-bar) --- */
.cta-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--color-surface-floating);
  backdrop-filter: blur(var(--blur-overlay));
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  border-block-start: var(--border-hairline);
  box-shadow: var(--shadow-floating);
  z-index: var(--z-bar);
}
.cta-bar .container { padding-block: var(--space-2); min-height: var(--cta-bar-height); display: flex; align-items: center; }
@media (min-width: 1024px) {
  .cta-bar { display: none; }
}
/* скрытие/появление панели — только когда JS реально создал наблюдатель
   (класс добавляет main.js, не bootstrap): без него панель остаётся видимой */
html.cta-bar-js .cta-bar {
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--motion-cta-duration) var(--motion-cta-easing),
              opacity var(--motion-cta-duration) var(--motion-cta-easing);
}
html.cta-bar-js .cta-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.cta-bar-js .cta-bar { transition: none; }
}

/* --- карточка --- */
.card {
  background: var(--color-surface-elevated);
  color: var(--color-text-body);
  border: var(--border-plane);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
@media (min-width: 1024px) {
  .card { padding: var(--space-3); }
}
/* .card-title сидит то на h3, то на h4 в зависимости от глубины вложения
   секции (без пропуска уровня в структуре документа) — визуальный размер
   уровня h4 задаётся явно классом, а не тегом-носителем (раздел 4.3: "уровни
   — визуальные ступени, а не HTML-теги"). */
.card-title {
  margin-block-end: var(--space-1);
  font-size: var(--text-h4-size); font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line); letter-spacing: var(--text-h4-tracking);
}
@media (min-width: 1024px) {
  .card-title { font-size: var(--text-h4d-size); line-height: var(--text-h4d-line); letter-spacing: var(--text-h4d-tracking); }
}

/* --- вынос-тезис --- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border-radius: var(--radius-card);
  padding: var(--space-2);
  margin-block-start: var(--space-3);
}
@media (min-width: 1024px) {
  .callout { padding: var(--callout-pad-desktop); }
}
.callout-icon { flex-shrink: 0; width: var(--space-3); height: auto; margin-block-start: 0.2em; }
.callout p { margin: 0; }
.callout-caution { background: var(--color-callout-caution); }
.callout-positive { background: var(--color-callout-positive); }

/* --- заголовки-ступени без семантики heading (визуальная роль, не тег) --- */
.eyebrow {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-h3-size); font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line); letter-spacing: var(--text-h3-tracking);
}
@media (min-width: 1024px) {
  .eyebrow { font-size: var(--text-h3d-size); line-height: var(--text-h3d-line); letter-spacing: var(--text-h3d-tracking); }
}
.subtitle {
  margin-block-start: var(--space-1);
  color: var(--color-text-primary);
  font-size: var(--text-h3-size); font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line); letter-spacing: var(--text-h3-tracking);
}
@media (min-width: 1024px) {
  .subtitle { font-size: var(--text-h3d-size); line-height: var(--text-h3d-line); letter-spacing: var(--text-h3d-tracking); }
}
h2 + * { margin-block-start: var(--space-3); }

.caption {
  font-size: var(--text-caption-size); font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-line); letter-spacing: var(--text-caption-tracking);
  margin-block-start: var(--space-3);
}
.caption.muted { color: var(--color-text-muted); }

.body-sm {
  font-size: var(--text-body-sm-size); font-weight: var(--text-body-sm-weight);
  line-height: var(--text-body-sm-line); letter-spacing: var(--text-body-sm-tracking);
}
@media (min-width: 1024px) {
  .body-sm { font-size: var(--text-body-smd-size); line-height: var(--text-body-smd-line); letter-spacing: var(--text-body-smd-tracking); }
}

.bullet-list { margin-block-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bullet-list li { padding-inline-start: var(--space-3); position: relative; }
.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
}

.muted { color: var(--color-text-muted); }

/* --- иллюстрация --- */
.illustration { border-radius: var(--radius-image); overflow: hidden; aspect-ratio: 3 / 4; }
.illustration__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius-image); }
@media (min-width: 768px) {
  .illustration { max-width: var(--illustration-max-width); margin-inline-start: auto; }
}
@media (min-width: 1024px) {
  .illustration { margin-inline-start: 0; margin-inline-end: 0; }
}

/* --- таблица сравнения (S4) --- */
.compare-table { margin-block-start: var(--space-3); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); }
@media (min-width: 1024px) {
  .compare-table { max-width: var(--text-max-desktop); font-size: var(--text-bodyd-size); line-height: var(--text-bodyd-line); }
}
.compare-table th, .compare-table td {
  text-align: start;
  padding-block: var(--space-2);
  border-block-end: var(--border-hairline);
}
.table-head-cell {
  color: var(--color-text-primary);
  font-size: var(--text-h5-size); font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line);
}
.compare-table td.muted { color: var(--color-text-muted); }

/* --- шаги (S7) --- */
.steps-col .step-list {
  margin-block-start: var(--space-3);
  margin-inline-start: var(--step-inset);
  border-inline-start: var(--border-step);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.step { display: flex; align-items: flex-start; column-gap: var(--space-2); padding-block: var(--space-2); }
.step-marker {
  flex: 0 0 var(--marker-size);
  width: var(--marker-size);
  height: var(--marker-size);
  margin-inline-start: calc(var(--marker-size) / -2);
  border-radius: var(--radius-circle);
  background: var(--color-surface-elevated);
  border: var(--border-plane);
  display: grid;
  place-items: center;
  color: var(--color-text-primary);
}
.step-icon { width: var(--icon-step); height: var(--icon-step); }
.step-body { min-width: 0; }
/* .step-title сидит на h4 (без пропуска уровня под h3 колонки), визуальный
   размер уровня h5 задаётся явно классом — см. комментарий у .card-title. */
.step-title {
  margin-block-end: 4px;
  font-size: var(--text-h5-size); font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line); letter-spacing: var(--text-h5-tracking);
}
@media (min-width: 1024px) {
  .step-title { font-size: var(--text-h5d-size); line-height: var(--text-h5d-line); letter-spacing: var(--text-h5d-tracking); }
}
.step-text { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); }
@media (min-width: 1024px) {
  .step-text { font-size: var(--text-body-smd-size); line-height: var(--text-body-smd-line); }
}

.matching-block { margin-block-start: var(--space-6); }

/* --- пластины (плита-слой / плита-фаза) --- */
.plate img { border-radius: 0; width: 100%; height: auto; }
html[dir="rtl"] .plate img { transform: scaleX(-1); }
.plate figcaption { margin-block-start: var(--space-2); }
.plate-title { margin-block-end: 4px; }

/* --- бенчмарки (S12.3) --- */
.benchmark-icon { display: inline-flex; color: var(--color-primary); margin-block-end: var(--space-1); }
.benchmark-icon-svg { width: var(--space-6); height: var(--space-6); }
.benchmark-title { margin-block-end: 4px; }

/* --- команда (S12.5) --- */
.member { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.member-header { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); }
.member-info { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.portrait {
  width: var(--portrait-size);
  height: var(--portrait-size);
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .portrait { width: var(--portrait-size-desktop); height: var(--portrait-size-desktop); }
}
.member-name { margin-block-end: 2px; }
.member-role {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--text-h6-size); font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-line); letter-spacing: var(--text-h6-tracking);
}
@media (min-width: 1024px) {
  .member-role { font-size: var(--text-h6d-size); line-height: var(--text-h6d-line); letter-spacing: var(--text-h6d-tracking); }
}

/* --- блок партнёрам (S12) --- */
.band { background: var(--color-surface-sunken); color: var(--color-text-body); }
.intro { margin-block-start: var(--space-1); max-width: var(--text-max-desktop); }
.sub-block { margin-block-start: var(--space-6); }
@media (min-width: 1024px) {
  .sub-block { margin-block-start: var(--space-8); }
}
.contact-links { margin-block-start: var(--space-1); display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .contact-links { flex-direction: row; gap: var(--space-4); }
}

/* --- финальный экран (S13) --- */
.final { position: relative; color: var(--color-text-primary); overflow: hidden; padding: 0; }
.final-media { position: relative; aspect-ratio: 16 / 9; }
.final-backdrop { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.final-scrim { position: absolute; inset: 0; background: var(--color-overlay-scrim); z-index: var(--z-scrim); }
.final-content {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--color-surface-base);
}
@media (min-width: 768px) { .final-content { padding-block: var(--section-y-tablet); } }
@media (min-width: 1024px) { .final-content { padding-block: var(--section-y-desktop); } }
/* .logo-final живёт во встроенных стилях <head> каждой страницы (не здесь): правило
   должно примениться раньше, чем парсер дойдёт до разметки S13, — это гейт старта
   анимации логотипа через content-visibility. Асинхронно подключаемый main.css
   приходит позже прохода парсера по S13, поэтому дублировать правило здесь нельзя. */

/* --- подвал (S14) --- */
.site-footer {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border-block-start: var(--border-hairline);
  padding-block: var(--space-4);
  padding-block-end: calc(var(--space-4) + var(--cta-bar-height));
}
@media (min-width: 768px) {
  .site-footer { padding-block: var(--space-5); padding-block-end: calc(var(--space-5) + var(--cta-bar-height)); }
}
@media (min-width: 1024px) {
  .site-footer { padding-block: var(--space-5); }
}
.footer-group { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-lang-links { display: flex; flex-direction: column; gap: var(--space-1); }

/* На en/az/ru страницах слово «العربية» в меню и подвале не должно тянуть
   файл Noto Sans Arabic (166 КБ) ради одного пункта списка — стек шрифта
   для этих двух списков сужается до Overpass и системных фоллбэков, само
   слово рисуется фоллбэком (п. 6.5 задачи, ожидаемое поведение, не дефект). */
html:not([lang="ar"]) .lang-menu,
html:not([lang="ar"]) .footer-lang-links {
  font-family: "Overpass", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.site-footer .link { color: var(--color-text-muted); }
.site-footer .lang-current { color: var(--color-text-primary); font-weight: 700; }
.site-footer .caption { margin-block-start: 0; }

/* --- Arabic: интерлиньяж/трекинг по п. 4.3.5 --- */
html[lang="ar"] body,
html[lang="ar"] .body-sm,
html[lang="ar"] .caption { line-height: 1.7; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .eyebrow, html[lang="ar"] .subtitle,
html[lang="ar"] .table-head-cell, html[lang="ar"] .member-role,
html[lang="ar"] .lang-menu li a.lang-current, html[lang="ar"] .lang-switch summary { line-height: 1.35; }
html[lang="ar"] * { letter-spacing: 0 !important; }

/* --- якорная прокрутка (desktop) --- */
#how, #pets, #partners { scroll-margin-block-start: var(--nav-height-desktop); }
@media (min-width: 1024px) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}