/* ============================================================================
   syntlex.kg — main.css
   Дизайн-система редизайна. ТЁМНАЯ схема (единая, светлой темы нет).
   Почти-монохром на тёмном + фирменный красный #EE2E30 из логотипа как акцент.
   Сигнатура: «системный узел» — квадратный маркер с коннектором у заголовков
   секций; тот же словарь (узел/линия/сетка) в SVG-иллюстрациях.

   Слои тёмной темы (от глубины к поверхности):
     --ink     — самые глубокие панели-полосы (hero/banner/stats/footer);
     --paper   — фон страницы;
     --surface — приподнятые поверхности (карточки, поля форм, шапка, меню).
   Текст: --text (основной), --body-2 (мягче), --muted (вторичный).
   Токены продублированы из критического CSS для самодостаточности файла.

   ТИПОГРАФИКА — две гарнитуры, обе переменные, обе локальные WOFF2:
     Inter      (--font)         — текст, интерфейс, всё мелкое. Диапазон 400–700.
     Geologica  (--font-display) — только крупные заголовки. Диапазон 500–800.
   Обе покрывают latin + latin-ext + cyrillic + cyrillic-ext, то есть кириллицу
   русского, кыргызского (ң ө ү), казахского (ә ғ қ ң ө ұ ү һ і), узбекского
   (ў қ ғ ҳ) и таджикского (ғ ӣ қ ӯ ҳ ҷ) — раньше эти буквы проваливались
   в системный шрифт, потому что подключалась только подмножество `cyrillic`.
   Ступени кегля, интерлиньяжа и трекинга заданы токенами ниже (§ typography)
   и нигде больше не хардкодятся — правка одной строки меняет всю страницу.
   ========================================================================== */

/* ---------- шрифты (локальные, переменные, font-display:swap) --------------
   Разбиты на подмножества по unicode-range: браузер тянет только те файлы,
   буквы которых реально встретились на странице. Русская страница получает
   cyrillic (+cyrillic-ext, если есть казахские/таджикские буквы), английская —
   только latin. Диапазоны — как у Google Fonts, файлы урезаны по оси wght
   до реально используемых начертаний. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/font/inter-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/font/inter-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/font/inter-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/font/inter-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;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/font/geologica-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/font/geologica-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/font/geologica-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: "Geologica";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/font/geologica-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;
}

:root {
  color-scheme: dark;
  --ink: #090b0f;
  --paper: #0f1319;
  --surface: #191e26;
  --line: #282e37;
  /* Три ступени контраста текста на тёмном. Вторичный тон осознанно поднят
     (--muted 7.3:1 → 8.7:1, --body-2 11.5:1 → 12.6:1 к --paper): подписи и
     мелкие метки на прежних значениях читались как «выключенные». */
  --muted: #a7b0bd;
  --text: #e8ebf0;
  --body-2: #ced5df;
  --chip: #eef1f4;
  --brand: #ee2e30;
  --brand-ink: #ff6567;
  --brand-weak: rgba(238, 46, 48, 0.16);
  --brand-hover: #ff4143;
  --ink-70: rgba(255, 255, 255, 0.8);
  --ink-55: rgba(255, 255, 255, 0.66);
  --ink-line: rgba(255, 255, 255, 0.12);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Geologica", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ===== typography: ступени кегля =========================================
     Значения текучие: clamp(мин, наклон, макс), линия построена на диапазоне
     вьюпорта 360 → 1440 px, дальше размер фиксируется. Ниже 360 работает
     нижняя граница, поэтому мелкий текст никогда не проваливается под 12 px.
     Именование — по роли, а не по «h2/h3»: одна и та же ступень встречается
     в разных тегах (например, .banner h4 крупнее, чем .card h3). */
  --fs-micro: 0.75rem; /* 12px — служебные метки, коды языков */
  --fs-caption: 0.8125rem; /* 13px — подписи, мета, футер-навигация */
  --fs-sm: 0.9375rem; /* 15px — компактный текст карточек и списков */
  --fs-ui: 1rem; /* 16px — кнопки, поля ввода, меню */
  --fs-body: clamp(1rem, 0.979rem + 0.09vw, 1.0625rem); /* 16 → 17px */
  --fs-lead: clamp(1.0625rem, 1.021rem + 0.19vw, 1.1875rem); /* 17 → 19px */
  --fs-title: clamp(1.0625rem, 1.021rem + 0.19vw, 1.1875rem); /* 17 → 19px — заголовок карточки */
  --fs-sub: clamp(1.1875rem, 1.104rem + 0.37vw, 1.4375rem); /* 19 → 23px — подзаголовок секции */
  --fs-sub-hero: clamp(1.1875rem, 1.042rem + 0.65vw, 1.625rem); /* 19 → 26px — подзаголовок геро */
  --fs-h3: clamp(1.25rem, 1.153rem + 0.43vw, 1.5rem); /* 20 → 24px */
  --fs-h2-sm: clamp(1.5rem, 1.333rem + 0.74vw, 2rem); /* 24 → 32px — заголовки правовых полос */
  --fs-h2: clamp(1.75rem, 1.375rem + 1.67vw, 2.875rem); /* 28 → 46px — заголовок секции */
  --fs-h1: clamp(2.125rem, 1.667rem + 2.04vw, 3.5rem); /* 34 → 56px — h1 внутренних страниц, показатели */
  --fs-display: clamp(2.625rem, 1.875rem + 3.33vw, 4.875rem); /* 42 → 78px — крупная выносная ступень */
  /* 34 → 68px — заголовок геро. Отдельная ступень, а не --fs-display: геро
     набирается в собственной колонке (--hero-col-title), и 78px давали там
     четыре строки на длинных русских заголовках. Нижняя граница снижена до
     34px, чтобы «конфиденциальности» помещалось в 360px по ширине. */
  --fs-hero: clamp(2.125rem, 1.4167rem + 3.1481vw, 4.25rem);

  /* ===== typography: интерлиньяж ===========================================
     Чем крупнее кегль, тем плотнее строки: на 78px интерлиньяж 1.6 разорвал бы
     заголовок на несвязанные полосы, на 15px он же необходим для читаемости. */
  --lh-display: 1.02;
  --lh-h1: 1.06;
  --lh-h2: 1.1;
  --lh-h3: 1.24;
  --lh-title: 1.3; /* заголовки карточек */
  --lh-ui: 1.4; /* кнопки, меню, поля */
  --lh-lead: 1.58;
  --lh-body: 1.65;

  /* ===== typography: трекинг ===============================================
     Отрицательный на крупном (иначе заголовок «рассыпается»), нулевой на
     основном тексте, положительный — только на прописных, где межбуквенные
     просветы съедаются формой букв. */
  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-h2: -0.024em;
  --ls-h3: -0.015em;
  --ls-title: -0.011em;
  --ls-ui: -0.005em;
  --ls-caps: 0.08em;
  --ls-caps-wide: 0.13em;

  /* ===== typography: начертания ============================================
     Пять ступеней вместо прежних двух (400/600). Заголовочная гарнитура
     работает от 600, текстовая — от 400. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 69px; /* .header-inner min-height 68px + 1px border-bottom */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --sec: clamp(3rem, 8vw, 6rem);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.75);
  --shadow-sm: 0 8px 22px -12px rgba(0, 0, 0, 0.6);

  /* --- слой глубины: поверхности выше --surface -------------------------
     Прежняя схема имела ровно три тона (ink/paper/surface) с разницей в
     2–6 пунктов яркости — на экране они читались как один плоский фон, из-за
     чего страница выглядела «пустой». Ниже — расширенная лестница тонов и
     градиентные заливки, дающие карточкам и полосам физическую отделённость. */
  --band: #131822; /* чередующаяся полоса секции — чуть светлее --paper */
  --surface-2: #1e242e; /* поднятая поверхность (ховер карточки) */
  --surface-3: #252c38; /* самый верхний слой: чипы, иконочные плашки */
  --line-strong: #39424f; /* видимая граница (для карточек и таблиц) */
  --line-soft: rgba(255, 255, 255, 0.07); /* волосяная разделительная */
  --card-bg: linear-gradient(160deg, #1c222c 0%, #161b23 62%, #141920 100%);
  --card-bg-hover: linear-gradient(160deg, #232a35 0%, #1b212a 62%, #181d25 100%);
  --band-bg: linear-gradient(180deg, #131822 0%, #10141c 100%);

  /* --- свечения и сигнальные подложки --- */
  --glow-brand: 0 0 0 1px rgba(238, 46, 48, 0.28), 0 18px 44px -22px rgba(238, 46, 48, 0.55);
  --shadow-lift: 0 26px 60px -28px rgba(0, 0, 0, 0.9), 0 3px 10px -6px rgba(0, 0, 0, 0.7);

  /* --- инженерная сетка: фоновая текстура всего сайта ---
     Тот же словарь «узел/линия/сетка», что и в иллюстрациях (см. DESIGN.md §4),
     но на уровне фона: даёт технологичную фактуру вместо плоской заливки. */
  --grid-size: 56px;
  --grid-line: rgba(255, 255, 255, 0.028);
  --grid: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);
  --grid-dense: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px;

  /* Мера строки: держит абзацы читаемыми и не даёт тексту растекаться.
     Оптимум для сплошного текста — 60–75 знаков; --measure-narrow нужен там,
     где абзац стоит рядом с крупным заголовком (геро, врезки), иначе глаз
     не успевает вернуться на следующую строку. */
  --measure: 66ch;
  --measure-narrow: 54ch;
  --measure-wide: 74ch;
}

/* ===== мобильная типографика =============================================
   Кегли уже текучие (clamp), поэтому здесь правится только то, что от кегля
   не зависит: трекинг и интерлиньяж. Отрицательный трекинг, который держит
   заголовок собранным на 78px, на 42px склеивает буквы; плотный интерлиньяж
   1.02 на широком экране даёт две-три строки, а на телефоне — пять-шесть,
   и они начинают наезжать друг на друга. Обе величины смягчаются. */
@media (max-width: 640px) {
  :root {
    --ls-display: -0.022em;
    --ls-h1: -0.02em;
    --ls-h2: -0.016em;
    --ls-h3: -0.008em;
    --lh-display: 1.1;
    --lh-h1: 1.12;
    --lh-h2: 1.16;
    --lh-h3: 1.3;
    --lh-body: 1.62;
    --ls-caps-wide: 0.1em;
  }
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* scrollbar-gutter — чтобы блокировка прокрутки при открытом меню не дёргала fixed-шапку */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Фоновая атмосфера страницы: инженерная сетка + два мягких брендовых свечения.
   Лежит под всем контентом (fixed, z-index:-1, pointer-events:none), поэтому
   не влияет ни на поток, ни на клики. Сетка задаёт технологичную фактуру,
   свечения снимают ощущение «плоской чёрной заливки» на длинных страницах. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 46% at 82% 8%, rgba(238, 46, 48, 0.1), transparent 62%),
    radial-gradient(52% 40% at 6% 70%, rgba(90, 120, 190, 0.07), transparent 64%),
    var(--grid);
  background-color: var(--paper);
}
img,
svg {
  max-width: 100%;
  display: block;
}
img {
  height: auto;
}
/* <picture> вокруг <img> — только контейнер выбора формата (AVIF/WebP/PNG),
   собственной геометрии у него быть не должно. .logo-box и .client-logo —
   флекс-контейнеры, и без этого правила флекс-элементом становится picture,
   а не img: max-width/max-height:100% у картинки тогда считаются от обёртки,
   а не от плашки, и логотип вылезает за неё — замерено 142×142 вместо 82×82
   в боксе 176×108. display:contents убирает бокс обёртки, флекс-элементом
   снова становится сам <img>, и размеры совпадают с прежней вёрсткой. */
picture {
  display: contents;
}
/* Базовые заголовки — текстовая гарнитура: она стоит на h3–h6 и на всём, что
   мельче ~24px. Крупные ступени (геро, заголовки секций, полосы, показатели)
   ниже переопределяются на --font-display. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2-sm);
}
h3 {
  font-size: var(--fs-h3);
}
p {
  margin: 0 0 var(--s4);
}
p:last-child {
  margin-bottom: 0;
}
/* Сплошной текст не должен растекаться шире меры строки; сетки, карточки и
   служебные блоки задают свою ширину сами и этим правилом не затронуты. */
p,
li {
  text-wrap: pretty;
}
a {
  color: var(--brand-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
b,
strong {
  font-weight: var(--fw-semibold);
}
small {
  font-size: var(--fs-caption);
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
.container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.16s,
    color 0.16s,
    border-color 0.16s,
    transform 0.16s;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-1 {
  background: var(--brand);
  color: #fff;
}
.btn-1:hover {
  background: var(--brand-hover);
  color: #fff;
}
.btn-border {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-border:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}
.on-ink .btn-border,
.hero .btn-border {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.on-ink .btn-border:hover,
.hero .btn-border:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.button-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin: 0;
}

/* ---------- header ---------- */
/* Шапка fixed: выведена из потока, поэтому высоту компенсирует отступ #site-content. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(15, 19, 25, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
#site-content {
  padding-top: var(--header-h);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
}
.brand {
  flex: none;
  display: inline-flex;
}
.brand img {
  height: 38px;
  width: auto;
}
/* язык + бургер — всегда в потоке шапки, поверх выезжающей панели */
.header-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  position: relative;
  z-index: 46;
}
.site-nav {
  display: flex;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.6rem);
}
/* Меню: 15.5px/500 вместо 15.7px/500 — но с трекингом и высотой строки от
   интерфейсной ступени, чтобы пункты стояли ровной линией и не «плыли». */
.nav-list > li > a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.96875rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  padding: 0.4rem 0;
  position: relative;
}
.nav-list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transition: right 0.2s;
}
.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after {
  right: 0;
}

/* Текущий раздел в навигации: используем уже имеющиеся признаки страницы. */
body.page-service:has(#s-outsourcing) .site-nav a[href$="mobile.php"],
body.page-service:has(#s-support-services) .site-nav a[href$="support.php"],
body.page-service:has(#s-tech):has(#s-analytics) .site-nav a[href$="outsourcing.php"],
body.page-service:has(#s-technologies) .site-nav a[href$="ecosystem.php"],
body:has(#s-contact.section.primary.contact) .site-nav a[href$="contacts.php"] {
  color: var(--brand-ink);
}
body.page-service:has(#s-outsourcing) .site-nav a[href$="mobile.php"]::after,
body.page-service:has(#s-support-services) .site-nav a[href$="support.php"]::after,
body.page-service:has(#s-tech):has(#s-analytics) .site-nav a[href$="outsourcing.php"]::after,
body.page-service:has(#s-technologies) .site-nav a[href$="ecosystem.php"]::after,
body:has(#s-contact.section.primary.contact) .site-nav a[href$="contacts.php"]::after {
  right: 0;
}

/* language switcher — trigger button */
.lang {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.lang-btn__globe {
  flex: none;
  opacity: 0.85;
}
.lang-btn .arrow {
  font-size: 0.7em;
  transition: transform 0.2s;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--text);
}
.lang-btn[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

/* language switcher — modal */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.lang-modal[hidden] {
  display: none;
}
.lang-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 13, 0.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
/* Диалог рассчитан так, чтобы все 13 языков умещались без прокрутки (2 колонки
   × 7 строк). overflow:auto оставлен страховкой для очень низких окон. */
.lang-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  max-height: min(88dvh, 760px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.lang-modal.is-open .lang-modal__backdrop {
  opacity: 1;
}
.lang-modal.is-open .lang-modal__dialog {
  opacity: 1;
  transform: none;
}
.lang-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.lang-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.lang-modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.lang-modal__close:hover {
  border-color: var(--brand);
  color: var(--text);
  background: var(--brand-weak);
}
.lang-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.lang-option:hover,
.lang-option:focus-visible {
  background: var(--brand-weak);
  border-color: var(--brand);
  color: var(--text);
}
.lang-option__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-option__code {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
}
.lang-option.is-current {
  background: var(--brand-weak);
  border-color: var(--brand);
  color: var(--brand-ink);
  cursor: default;
}
.lang-option.is-current .lang-option__code {
  color: var(--brand-ink);
}
@media (prefers-reduced-motion: reduce) {
  .lang-modal__backdrop,
  .lang-modal__dialog {
    transition: none;
  }
  .lang-modal__dialog {
    transform: none;
  }
}

/* mobile menu toggle — бургер только на мобильной версии (см. media ниже) */
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-ui);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.nav-toggle[aria-expanded="true"] {
  border-color: var(--brand);
}
.nav-toggle__label {
  white-space: nowrap;
}
.nav-toggle__bars {
  display: inline-grid;
  gap: 5px;
  width: 20px;
}
.nav-toggle__bars span {
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.nav-overlay:not([hidden]) {
  opacity: 1;
}

/* ≤900px — навигация превращается в выезжающую панель, открываемую бургером.
   Панель позиционируется от .site-header (fixed, во всю ширину) → прижата
   к правому краю окна. Переключатель языка остаётся в .header-actions. */
@media (max-width: 900px) {
  html:has(#site-nav[data-open="true"]),
  body:has(#site-nav[data-open="true"]) {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: absolute;
    inset: 0 0 auto auto;
    width: min(340px, 86vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--surface);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.24s ease;
    z-index: 45;
    box-shadow: var(--shadow);
  }
  .site-nav[data-open="true"] {
    transform: none;
    pointer-events: auto;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    width: 100%;
    height: 100%;
    padding: calc(var(--header-h) + var(--s4) + env(safe-area-inset-top, 0px))
      var(--s5) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-list > li > a {
    display: block;
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-title);
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-list > li > a::after {
    display: none;
  }
  .lang-btn {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }
}
/* На мобильных остаётся центрированной модалкой: две колонки сохраняются,
   карточки становятся компактнее — список целиком виден без скролла. */
@media (max-width: 560px) {
  .lang-modal__list {
    gap: 0.45rem;
  }
  .lang-option {
    min-height: 46px;
    padding: 0.5rem 0.7rem;
    font-size: var(--fs-sm);
    border-radius: 10px;
  }
  .lang-option__code {
    font-size: 0.6875rem;
  }
  .lang-modal__head {
    margin-bottom: var(--s3);
  }
  .lang-modal__title {
    font-size: var(--fs-title);
  }
  .lang-modal__close {
    width: 36px;
    height: 36px;
  }
}

/* ---------- section rhythm & signature node ----------
   Ритм страницы строится на чередовании двух типов секций, а не на одинаковых
   отступах поверх одного фона (из-за чего страница читалась как плоская лента):

     .section            — текст+медиа на фоне страницы; интерес даёт медиа-панель;
     .section.text-center — сетка карточек на приподнятой ПОЛОСЕ (--band-bg);
     .banner / .stats     — акцентные полосы (красная и глубокая чернильная).

   Полоса выходит на всю ширину окна через ::before с margin-inline трюком,
   поэтому разметку менять не нужно. */
.section {
  position: relative;
  padding-block: clamp(2.5rem, 4.6vw, 4rem);
}
/* Полосатая (band) секция: собственный фон + волосяные границы сверху/снизу. */
.section.text-center {
  padding-block: clamp(3rem, 5.4vw, 4.75rem);
  background: var(--band-bg);
  border-block: 1px solid var(--line-soft);
}
/* Плотная сетка внутри полосы — усиливает «инженерность» и отделяет от фона. */
.section.text-center::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grid-dense);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(72% 78% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(72% 78% at 50% 50%, #000 20%, transparent 78%);
}
.section.text-center > .container {
  position: relative;
  z-index: 1;
}
/* Две соседние полосы не должны сливаться в один блок двойной высоты. */
.section.text-center + .section.text-center {
  border-top: 0;
  padding-top: 0;
}

.section-title {
  position: relative;
  margin-bottom: var(--s6);
  padding-left: 2.35rem;
}
/* Сигнатурный узел: квадратный маркер + свечение + соединительная линия вниз.
   Узел увеличен и получил ореол — на тёмном фоне прежние 12px терялись. */
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--brand);
  box-shadow:
    0 0 0 5px var(--brand-weak),
    0 0 18px 0 rgba(238, 46, 48, 0.55);
}
.section-title::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.16em + 17px);
  bottom: -0.9em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--brand) -40%, var(--line) 45%, transparent);
}
.section-title h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}
/* Выделенное слово в заголовке — на ступень тяжелее, не другого цвета:
   акцент остаётся один (красный), а иерархию внутри строки держит вес. */
.section-title h2 b {
  font-weight: var(--fw-display);
}
.section-title h2 i,
.section-title h3 i {
  font-style: normal;
  color: var(--brand-ink);
}
.section-title h3 {
  font-family: var(--font);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--body-2);
  max-width: var(--measure);
  margin-top: 0.6rem;
}
/* Центрированный заголовок полосы: вместо «хребта» — короткая брендовая черта
   над текстом. Тот же сигнал акцента, но симметричный композиции. */
.text-center .section-title {
  padding-left: 0;
  padding-top: 1.9rem;
  margin-bottom: var(--s6);
}
.text-center .section-title::before {
  left: 50%;
  top: 0;
  width: 34px;
  height: 4px;
  border-radius: 3px;
  transform: translateX(-50%);
  box-shadow: 0 0 22px 1px rgba(238, 46, 48, 0.65);
}
.text-center .section-title::after {
  display: none;
}
.text-center {
  text-align: center;
}
.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
  color: var(--body-2);
  max-width: var(--measure);
}
.col-head {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin-bottom: var(--s4);
}
.browsers-row {
  display: flex;
  gap: var(--s5);
  justify-content: center;
  margin-top: var(--s5);
  color: var(--muted);
}
.browsers-row svg {
  width: 34px;
  height: 34px;
}
.text-center .lead {
  margin-inline: auto;
}

/* two-column content rows */
/* Колонки неравные (1.05fr / 1fr): текстовая колонка чуть шире — типографская
   мера читается лучше, а медиа-панель перестаёт выглядеть переразмеренной. */
.row-2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  align-items: center;
}
.row-2 p {
  color: var(--body-2);
}

/* --- медиа-панель ---
   Раньше иллюстрация лежала на плоской заливке --surface: тонкий штрих внутри
   большого пустого прямоугольника — главный источник ощущения «пусто».
   Теперь это собранная панель: градиентная подложка, инженерная сетка,
   брендовое свечение из угла, угловые скобки-«визир» и увеличенный рисунок. */
.row-2 .media {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(78% 62% at 78% 6%, rgba(238, 46, 48, 0.14), transparent 66%),
    var(--card-bg);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}
/* сетка внутри панели — тот же словарь, что и в полосах секций */
.row-2 .media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grid-dense);
  opacity: 0.62;
  -webkit-mask-image: radial-gradient(88% 88% at 50% 50%, #000 30%, transparent 82%);
  mask-image: radial-gradient(88% 88% at 50% 50%, #000 30%, transparent 82%);
}
/* Визирная рамка: рисуется одна рамка по периметру, а маска из четырёх
   квадратов открывает её только в углах — получаются четыре угловые скобки,
   как метки приводки на инженерном чертеже. */
.row-2 .media::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 1.5px solid rgba(238, 46, 48, 0.55);
  border-radius: 10px;
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 34px 34px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 34px 34px no-repeat,
    linear-gradient(#000, #000) 0 100% / 34px 34px no-repeat,
    linear-gradient(#000, #000) 100% 100% / 34px 34px no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / 34px 34px no-repeat,
    linear-gradient(#000, #000) 100% 0 / 34px 34px no-repeat,
    linear-gradient(#000, #000) 0 100% / 34px 34px no-repeat,
    linear-gradient(#000, #000) 100% 100% / 34px 34px no-repeat;
}
.row-2 .media img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: var(--radius);
  background: transparent;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}
@media (max-width: 820px) {
  .row-2 {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .row-2 .media {
    order: -1;
    padding: clamp(1.15rem, 5vw, 1.75rem);
  }
  .row-2 .media img {
    max-width: 340px;
  }
}

/* bullet lists */
.bullet-list {
  display: grid;
  gap: 0.55rem;
  margin: var(--s4) 0;
}
.bullet-list li {
  position: relative;
  padding-left: 1.6rem;
  line-height: var(--lh-body);
  color: var(--body-2);
  max-width: var(--measure);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
  transform: rotate(0);
  transition: transform 0.2s;
}
.bullet-list.two-col {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s6);
}
@media (max-width: 600px) {
  .bullet-list.two-col {
    grid-template-columns: 1fr;
  }
}

/* ---------- правовой документ (политика конфиденциальности) ----------
   Три колонки: «хребет» с узлом раздела | липкий заголовок | текст на
   поверхности. Хребет — прямая реализация сигнатуры дизайн-системы: узел
   секции плюс соединительная линия, непрерывная через весь документ.
   Нумерация 01…05 — CSS-счётчик, а не текст в разметке: порядок разделов
   правится в одном месте и не попадает в выделение/копирование текста. */
.legal-doc {
  counter-reset: legal;
}
.legal-block {
  counter-increment: legal;
  display: grid;
  grid-template-columns: 46px minmax(0, 15rem) minmax(0, 1fr);
  grid-template-areas: "rail head body";
  column-gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.legal-block:last-child {
  padding-bottom: 0;
}

/* хребет: узел сверху, линия добирает оставшуюся высоту блока */
.legal-rail {
  grid-area: rail;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  row-gap: 0.6rem;
}
.legal-rail::after {
  content: "";
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(var(--line), var(--line));
}
.legal-block:last-child .legal-rail::after {
  background: linear-gradient(var(--line), transparent);
}
.legal-node {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-weak);
}
.legal-node .ico {
  width: 22px;
  height: 22px;
}

/* заголовок раздела: липнет под шапкой, пока читается его текст */
.legal-head {
  grid-area: head;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  padding-top: 0.35rem;
}
.legal-num {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps-wide);
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.legal-num::before {
  content: counter(legal, decimal-leading-zero);
}
.legal-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

.legal-body {
  grid-area: body;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.legal-body p {
  color: var(--body-2);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
.legal-body > :first-child {
  margin-top: 0;
}
.legal-body > :last-child {
  margin-bottom: 0;
}
.legal-body .bullet-list:first-child {
  margin-top: 0;
}
.legal-subhead {
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}
.legal-subhead strong {
  color: var(--text);
}
/* вложенный уровень перечисления — тот же маркер, но контурный */
.legal-body .bullet-list .bullet-list {
  margin: 0.6rem 0 0.2rem;
}
.legal-body .bullet-list .bullet-list li::before {
  background: transparent;
  border: 1.5px solid var(--brand);
  width: 6px;
  height: 6px;
  top: 0.6em;
}
/* дата публикации: служебная строка, отделена от самих положений.
   Селектор с .legal-body — иначе цвет перебивает более сильное `.legal-body p`. */
.legal-body .legal-updated {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
/* Текст даты — флекс-элемент с min-width:auto: без обнуления он не переносится
   по ширине карточки и вылезает за её правый край на узких экранах. */
.legal-updated span {
  min-width: 0;
}
.legal-updated .ico-inline {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .legal-block {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "rail head"
      "rail body";
    row-gap: var(--s4);
  }
  .legal-head {
    position: static;
    padding-top: 0.6rem;
  }
}
/* Телефоны: «хребет» съедает ~54px из 390 — на такой ширине это уже пятая часть
   меры строки, текст в карточке рвётся на 3–4 слова. Поэтому узел уходит
   в одну строку с заголовком раздела (маркер секции сохраняется), а карточка
   занимает всю ширину контейнера. Соединительная линия на одну строку смысла
   не имеет — скрываем её. */
@media (max-width: 560px) {
  .legal-block {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "rail head"
      "body body";
    column-gap: var(--s4);
    row-gap: var(--s4);
  }
  .legal-rail {
    grid-template-rows: auto;
    align-content: start;
    row-gap: 0;
  }
  .legal-rail::after {
    display: none;
  }
  .legal-head {
    padding-top: 0;
  }
  .legal-num {
    margin-bottom: 0.25rem;
  }
  .legal-node {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .legal-node .ico {
    width: 19px;
    height: 19px;
  }
  .legal-body {
    padding: var(--s4);
  }
}

/* ---------- hero ---------------------------------------------------------
   Композиция: слева колонка текста в собственной мере, справа — сюжет
   иллюстрации. Раньше это был «текст во всю ширину поверх центрированной
   картинки»: сюжет каждого рендера стоит ровно по центру кадра, то есть
   ровно под заголовком и абзацем. Текст ложился на самое яркое место
   рисунка, а сам рисунок наполовину уходил под шторку — проигрывали оба.

   1. Кадры пересобраны (tools/heroimg.py). Рисунки те же — уникальные для
      каждой страницы, как и было; изменено кадрирование: на десктопе сюжет
      уведён в правые ~60% кадра, на мобильном — вниз. Слева (сверху на
      мобильном) остаётся чистое тёмное поле ровно под текст.
   2. Текст получил меру: заголовок — --hero-col-title, подзаголовок и абзац —
      --hero-col-text. Мера текучая и рассчитана так, чтобы правый край текста
      не доходил до сюжета ни на одной ширине вьюпорта. До этого мера была
      60rem (960px), и строки заезжали на рисунок.
   3. Кегль заголовка — своя ступень --fs-hero (34 → 68px) вместо общей
      --fs-display (42 → 78px). В узкой колонке 78px давали четыре строки на
      длинных русских заголовках, а на 360px «конфиденциальности» просто не
      помещалось в экран.
   4. Форматы: AVIF → WebP → JPEG через image-set(), два кадра (ландшафт для
      десктопа, портрет для мобильного). PNG-исходники (163 КБ … 1.7 МБ) с
      первого экрана ушли; preload нужного кадра ставит inc/head.php.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* Явная колонка вместо неявной auto. Ширину сейчас держит min-width:0 на
     .hero-inner (см. комментарий там), но это работает только потому, что
     ограничение снято ровно на том элементе, который тянет колонку. minmax(0,1fr)
     закрывает вопрос на уровне трека: сколь угодно длинное неразрывное слово
     («конфиденциальности») больше не может раздуть геро шире вьюпорта. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  overflow: hidden;
  color: #fff;
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  /* Мера колонок текста. Верхняя граница подобрана так, чтобы правый край
     абзаца оставался левее сюжета на любой ширине: сюжет пересобранного
     кадра центрирован на 68.5% ширины. */
  --hero-col-title: clamp(30rem, 21rem + 18vw, 44rem);
  --hero-col-text: clamp(27rem, 19.5rem + 12vw, 35rem);

  /* Высота ограничена с двух сторон. Сверху: на 27" «во весь экран» — это
     1300px, из которых 500 — пустота под кнопками. Снизу: телефон в альбомной
     ориентации даёт 100svh ≈ 320px, туда не влезает даже заголовок, поэтому
     геро в этом случае растёт, а не режет текст. svh — чтобы мобильные
     браузеры не считали высоту вместе с убирающейся адресной строкой. */
  min-height: clamp(32rem, calc(100vh - var(--header-h)), 53rem);
  min-height: clamp(32rem, calc(100svh - var(--header-h)), 53rem);
}

/* Кадр страницы. Две декларации background-image на правило — не дубль:
   браузер, не понимающий image-set(), отбрасывает вторую и остаётся на JPEG.
   Подставлять пути через var() здесь нельзя — значение с var() считается
   валидным при разборе, и непонятый image-set() обнулил бы свойство вместо
   отката на первую декларацию. */
body.page-home #hero {
  background-image: url("/assets/images/hero/bg-hero1.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero1.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero1.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero1.jpg") type("image/jpeg")
  );
}
body.page-service:has(#s-outsourcing) #hero {
  background-image: url("/assets/images/hero/bg-hero2.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero2.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero2.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero2.jpg") type("image/jpeg")
  );
}
body.page-service:has(#s-tech):has(#s-analytics) #hero {
  background-image: url("/assets/images/hero/bg-hero3.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero3.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero3.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero3.jpg") type("image/jpeg")
  );
}
body.page-service:has(#s-technologies) #hero {
  background-image: url("/assets/images/hero/bg-hero5.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero5.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero5.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero5.jpg") type("image/jpeg")
  );
}
body.page-service:has(#s-support-services) #hero {
  background-image: url("/assets/images/hero/bg-hero4.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero4.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero4.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero4.jpg") type("image/jpeg")
  );
}
body.page-vacancy #hero {
  background-image: url("/assets/images/hero/bg-hero-vacancy.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero-vacancy.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero-vacancy.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero-vacancy.jpg") type("image/jpeg")
  );
}
body.page-software #hero {
  background-image: url("/assets/images/hero/bg-hero-clients.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero-clients.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero-clients.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero-clients.jpg") type("image/jpeg")
  );
}
body.page-clients #hero {
  background-image: url("/assets/images/hero/bg-hero-client.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero-client.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero-client.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero-client.jpg") type("image/jpeg")
  );
}
.hero-art-privacy {
  background-image: url("/assets/images/hero/bg-hero-privacy.jpg");
  background-image: image-set(
    url("/assets/images/hero/bg-hero-privacy.avif") type("image/avif"),
    url("/assets/images/hero/bg-hero-privacy.webp") type("image/webp"),
    url("/assets/images/hero/bg-hero-privacy.jpg") type("image/jpeg")
  );
}

/* Светотень кадра. Пять слоёв, сверху вниз по стопке:
   1) нижняя кромка растворяется в фоне страницы — геро не «отрезан» линией;
   2) эллиптическая подложка под колонку текста: она гасит ровно ту часть
      кадра, где стоят буквы, и не трогает сюжет (в отличие от прежней
      шторки во всю ширину до 66%, которая съедала половину рисунка);
   3) общий добор плотности слева направо — связывает подложку с кадром;
   4) виньетка: края кадра уходят в тень, центр остаётся светлым — глубина;
   5) свечение бренда за сюжетом. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, var(--paper) 0%, rgba(15, 19, 25, 0.72) 6%, transparent 24%),
    radial-gradient(118% 122% at -10% 50%, rgba(5, 7, 11, 0.97) 0%, rgba(5, 7, 11, 0.88) 32%, rgba(5, 7, 11, 0.44) 56%, transparent 76%),
    linear-gradient(90deg, rgba(5, 7, 11, 0.7) 0%, rgba(5, 7, 11, 0.3) 40%, rgba(5, 7, 11, 0) 66%),
    radial-gradient(124% 100% at 52% 44%, transparent 40%, rgba(0, 0, 0, 0.52) 100%),
    radial-gradient(54% 64% at 74% 28%, rgba(238, 46, 48, 0.24), transparent 68%);
}

/* Инженерная сетка — тот же словарь «узел/линия/сетка», что в иллюстрациях.
   Отдельным слоем поверх шторки: её задача — дать фактуру пустому полю слева,
   поэтому маска гасит сетку там, где начинается сюжет. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(102deg, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
  mask-image: linear-gradient(102deg, #000 0%, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
}
.hero > * {
  position: relative;
  z-index: 1;
}

/* Блок берёт ширину от .container (var(--wrap)), поэтому его левая граница
   совпадает с левой границей контента остальных секций. Тонкости:
   — width:100% обязателен: .container задаёт margin-inline:auto, а грид-элемент
     с auto-полями не растягивается и схлопывается до fit-content, из-за чего
     Hero уезжает правее общей сетки;
   — нижний отступ больше верхнего: центрируется весь блок вместе с паддингами,
     значит видимый контент встаёт выше геометрического центра на (низ−верх)/2.
     Он же держит дистанцию до .hero-scroll и служит запасом на низких экранах,
     где контент выше min-height (тогда Hero растёт, а не обрезает текст). */
.hero-inner {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(4.25rem, 10vw, 7rem);
}

/* «Хребет» — сигнатура дизайн-системы (§4 DESIGN.md): вертикальная линия
   слева от контента с брендовым узлом на высоте заголовка. Стоит в поле
   между краем экрана и текстом, поэтому не сдвигает набор. */
.hero-inner::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * 0.42);
  top: clamp(2.25rem, 6vw, 3.75rem);
  bottom: clamp(4.25rem, 10vw, 7rem);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--brand) 0%,
    var(--brand) 9%,
    rgba(255, 255, 255, 0.26) 11%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.06) 78%,
    transparent 100%
  );
}

.hero .eyebrow {
  color: #fff;
}
.hero h1,
.hero h2 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  max-width: var(--hero-col-title);
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Переносы по слогам выключены: на широком экране Chrome рвал заголовок
     как «Аутсорсинг раз-/работки систем-/ных решений» — для выносного кегля
     это брак. Ниже 600px они включаются обратно (там без них длинное слово
     не влезает), но только для по-настоящему длинных слов: лимит отсекает
     «команды», «разработки», «системных» и оставляет «конфиденциальности». */
  hyphens: manual;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: 14 6 6;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.58);
}
/* Подзаголовок геро — не блёклая приписка, а вторая ступень иерархии:
   белый текст с брендовой чертой слева (тот же «узел/линия», что и в секциях). */
.hero h3 {
  position: relative;
  font-family: var(--font);
  font-size: var(--fs-sub-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: #fff;
  max-width: var(--hero-col-text);
  margin-top: var(--s5);
  padding-left: 1.05rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 3px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 16px 0 rgba(238, 46, 48, 0.8);
}
/* Вторичный текст на фотофоне: 0.8 белого не хватало — на светлых участках
   рисунка строки «пропадали». Плюс мягкая тень, она держит букву на любом
   фоне и стоит дешевле, чем ещё один слой затемнения. */
.hero .blurb {
  color: rgba(255, 255, 255, 0.87);
  max-width: var(--hero-col-text);
  margin: var(--s5) 0 var(--s6);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero .button-set {
  gap: var(--s4);
}
.hero .button-set .btn {
  padding-block: 0.85rem;
}
.hero .button-set .btn-1 {
  box-shadow: 0 14px 34px -14px rgba(238, 46, 48, 0.85);
}
.hero .button-set .btn-1:hover {
  box-shadow: 0 18px 42px -14px rgba(238, 46, 48, 0.95);
}
.hero .button-set .btn-border {
  background: rgba(255, 255, 255, 0.05);
}

/* Индикатор прокрутки выровнен по левому краю контента (а не по центру
   экрана): по центру он попадал ровно на сюжет иллюстрации и читался как
   часть рисунка. Формула повторяет геометрию .container: до 1200px + двух
   отступов работает первый аргумент, дальше — центрирование. */
.hero-scroll {
  position: absolute;
  left: max(var(--gutter), calc(50% - var(--wrap) / 2 + var(--gutter)));
  bottom: clamp(1.25rem, 3vw, 2rem);
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 13px;
  display: grid;
  justify-items: center;
  padding-top: 7px;
  transition:
    border-color 0.18s,
    opacity 0.18s;
}
.hero-scroll:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.hero-scroll::before {
  content: "";
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  animation: scroll 1.6s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  40% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --- геро: планшет и мобильный ------------------------------------------
   Ниже 960px колонка текста и сюжет перестают помещаться рядом, поэтому
   раскладка становится вертикальной: текст сверху, сюжет снизу — и кадр
   меняется на портретный (тот же рисунок, другое кадрирование), где сюжет
   как раз внизу. Прежняя версия оставляла ландшафтный кадр и на 390px
   показывала его середину, то есть сюжет ровно под заголовком. */
@media (max-width: 959.98px) {
  .hero {
    align-content: start;
    background-position: 50% 100%;
    min-height: clamp(30rem, calc(100vh - var(--header-h)), 46rem);
    min-height: clamp(30rem, calc(100svh - var(--header-h)), 46rem);
    --hero-col-title: 100%;
    --hero-col-text: min(100%, 34rem);
  }
  body.page-home #hero {
    background-image: url("/assets/images/hero/bg-hero1-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero1-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero1-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero1-m.jpg") type("image/jpeg")
    );
  }
  body.page-service:has(#s-outsourcing) #hero {
    background-image: url("/assets/images/hero/bg-hero2-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero2-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero2-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero2-m.jpg") type("image/jpeg")
    );
  }
  body.page-service:has(#s-tech):has(#s-analytics) #hero {
    background-image: url("/assets/images/hero/bg-hero3-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero3-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero3-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero3-m.jpg") type("image/jpeg")
    );
  }
  body.page-service:has(#s-technologies) #hero {
    background-image: url("/assets/images/hero/bg-hero5-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero5-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero5-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero5-m.jpg") type("image/jpeg")
    );
  }
  body.page-service:has(#s-support-services) #hero {
    background-image: url("/assets/images/hero/bg-hero4-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero4-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero4-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero4-m.jpg") type("image/jpeg")
    );
  }
  body.page-vacancy #hero {
    background-image: url("/assets/images/hero/bg-hero-vacancy-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero-vacancy-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero-vacancy-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero-vacancy-m.jpg") type("image/jpeg")
    );
  }
  body.page-software #hero {
    background-image: url("/assets/images/hero/bg-hero-clients-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero-clients-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero-clients-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero-clients-m.jpg") type("image/jpeg")
    );
  }
  body.page-clients #hero {
    background-image: url("/assets/images/hero/bg-hero-client-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero-client-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero-client-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero-client-m.jpg") type("image/jpeg")
    );
  }
  .hero-art-privacy {
    background-image: url("/assets/images/hero/bg-hero-privacy-m.jpg");
    background-image: image-set(
      url("/assets/images/hero/bg-hero-privacy-m.avif") type("image/avif"),
      url("/assets/images/hero/bg-hero-privacy-m.webp") type("image/webp"),
      url("/assets/images/hero/bg-hero-privacy-m.jpg") type("image/jpeg")
    );
  }
  /* Шторка разворачивается по вертикали: плотная сверху, под текстом, и
     полностью прозрачная над сюжетом внизу кадра. */
  .hero::before {
    background:
      linear-gradient(0deg, var(--paper) 0%, rgba(15, 19, 25, 0.7) 5%, transparent 19%),
      linear-gradient(
        180deg,
        rgba(5, 7, 11, 0.62) 0%,
        rgba(5, 7, 11, 0.52) 26%,
        rgba(5, 7, 11, 0.26) 46%,
        rgba(5, 7, 11, 0.06) 64%,
        transparent 76%
      ),
      radial-gradient(120% 78% at 50% 24%, transparent 44%, rgba(0, 0, 0, 0.46) 100%),
      radial-gradient(78% 36% at 50% 84%, rgba(238, 46, 48, 0.2), transparent 70%);
  }
  .hero::after {
    background:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 34%, transparent 58%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 34%, transparent 58%);
  }
  .hero-inner {
    padding-block: clamp(1.75rem, 6vw, 3rem) clamp(3.5rem, 12vw, 5.5rem);
  }
  /* Хребет: в узкой колонке он съедает и без того малый боковой отступ */
  .hero-inner::before {
    display: none;
  }
  /* Шторка, привязанная к тексту, а не к кадру. Вертикальный градиент на
     .hero видит только высоту геро и не знает, докуда доходит набор: на
     короткой странице он гасит лишнее, на «Политике конфиденциальности»
     (одиннадцать строк) — наоборот, не дотягивается, и хвост абзаца ложится
     на щит иллюстрации. Этот слой лежит на .hero-inner, то есть ровно по
     высоте текста, и гаснет на последних 5rem — у каждой страницы своя
     длина, отдельных правил не нужно. z-index:-1 держит его под текстом, но
     над кадром: .hero-inner — контекст наложения (z-index:1 от .hero > *). */
  .hero-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(5, 7, 11, 0.62) 0%,
      rgba(5, 7, 11, 0.62) calc(100% - 5rem),
      rgba(5, 7, 11, 0) 100%
    );
  }
  .hero h3 {
    margin-top: var(--s4);
  }
  .hero .blurb {
    margin-block: var(--s4) var(--s5);
  }
}

@media (max-width: 599.98px) {
  /* Страховка на самых узких экранах. Обычно срабатывает hyphens: «Политика
     конфи-/денциальности» с переносом — это и есть желаемый результат.
     anywhere подключается только если и перенос не спасает: он, в отличие от
     break-word, уменьшает min-content, поэтому строка не выйдет за экран. */
  .hero h1,
  .hero h2 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  /* Кнопки на узком экране — равной ширины в одну строку, а не «крупная
     плюс огрызок»; при нехватке места переносятся целиком. */
  .hero .button-set {
    gap: var(--s3);
  }
  .hero .button-set .btn {
    flex: 1 1 10rem;
    justify-content: center;
  }
  .hero-scroll {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Короткое окно на ноутбуке: геро отдаёт высоту содержимому и не пытается
   занять весь экран. Только для широкой раскладки (≥960px) — в вертикальной
   сюжет стоит внизу кадра, и высота ему нужна, иначе его срежет. */
@media (max-height: 640px) and (min-width: 960px) {
  .hero {
    min-height: auto;
    /* Кегля тоже касается: на 1280×620 заголовок в четыре строки по 63px
       вместе с абзацем выталкивал кнопки за сгиб. */
    --fs-hero: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  }
  .hero-inner {
    padding-block: clamp(1.5rem, 4vh, 2.5rem) clamp(3rem, 8vh, 4rem);
  }
  /* Подсказка «листайте вниз» здесь и не нужна (контент и так не помещается
     в экран целиком), и налезает на кнопки — отступа снизу для неё уже нет. */
  .hero-scroll {
    display: none;
  }
  .hero h3 {
    margin-top: var(--s4);
  }
  .hero .blurb {
    margin-block: var(--s4) var(--s5);
  }
}

/* ---------- dark / ink sections (banners, stats) ---------- */
.on-ink {
  background: var(--ink);
  color: #fff;
}
.on-ink .section-title h3 {
  color: var(--ink-70);
}
.on-ink .section-title h2 i {
  color: #ff9d9d;
}

/* Форма-заявка: отступ от верхней границы секции до заголовка. */
:is(#s-contact-form,#clientForm,#contscts).contact .section-title {
  padding-top: 3.375rem;
}
/* --- CTA-полоса ---
   В прежней версии сайта это была сплошная фирменно-красная лента во всю ширину —
   самый сильный визуальный акцент страницы. В тёмном редизайне она стала такой
   же тёмной, как всё остальное, и ритм пропал. Возвращаем ленту как акцент:
   глубокий красный градиент, диагональная штриховка и «узловая» сетка. */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  background:
    radial-gradient(70% 160% at 88% 50%, rgba(255, 122, 90, 0.42), transparent 62%),
    linear-gradient(103deg, #a3161c 0%, #d0242a 44%, #ee2e30 100%);
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* инженерная сетка поверх заливки — фактура вместо плоского цвета */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 34px 34px;
  -webkit-mask-image: linear-gradient(100deg, #000 8%, transparent 62%);
  mask-image: linear-gradient(100deg, #000 8%, transparent 62%);
}
/* тонкая тёмная кромка снизу — «сваривает» ленту со следующей секцией */
.banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08));
}
.banner .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5) var(--s6);
}
.banner h4 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.333rem + 1.3vw, 2.5rem);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(80, 0, 0, 0.4);
}
.banner h4 b {
  color: #fff;
}
.banner h4 i {
  font-style: normal;
  color: #ffe0dc;
}
.banner p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 52ch;
  margin: 0.55rem 0 0;
}
/* На красном белая кнопка контрастнее фирменной — она и становится главной. */
.banner .btn-1 {
  background: #fff;
  color: #b3181e;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
}
.banner .btn-1:hover {
  background: #fff;
  color: #8f1218;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6);
}
.banner .meta {
  flex: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-70);
}
.banner .btn-border {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.banner .btn-border:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.banner .meta a.ask-link {
  color: #fff;
  text-underline-offset: 3px;
}
/* team-size table */
.team-table {
  width: 100%;
  max-width: 560px;
  margin: var(--s5) auto 0;
  border-collapse: collapse;
  text-align: left;
}
.team-table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.team-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  font-weight: var(--fw-semibold);
  width: 3rem;
}
.team-table strong {
  font-weight: var(--fw-semibold);
}
.team-table tr:last-child td {
  border-bottom: none;
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
}
/* technology logo grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
.tech-logo {
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: 92px;
}
.tech-logo img {
  max-height: 44px;
  width: auto;
  opacity: 0.85;
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.tech-logo:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* ---------- ecosystem: technology directions ---------- */
#s-technologies {
  background: var(--paper);
  overflow: hidden;
}
/* Сетка технологий раскладывается по столбцам-направлениям (Frontend, Backend,
   Mobile, DevOps, Databases, Enterprise), поэтому столбцы разной длины — это
   данные, а не ошибка вёрстки. Раньше «ступеньки» внизу читались как дыры в
   макете; теперь между столбцами проведены направляющие на всю высоту блока,
   и раскладка читается как схема стека: у каждого направления свой трек. */
#s-technologies .tech-grid {
  position: relative;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 0 repeat(5, 92px);
  grid-auto-rows: 92px;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s6);
  align-content: start;
}
/* Направляющие столбцов: одна линия на шаг сетки, сдвинутая в середину зазора
   (шаг = (100% + gap)/6, сдвиг = -gap/2). Снизу растворяются. */
#s-technologies .tech-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: calc((100% + 1rem) / 6) 100%;
  background-position: -0.5rem 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent);
  mask-image: linear-gradient(180deg, #000 0 78%, transparent);
}
#s-technologies .tech-logo {
  z-index: 1;
}
#s-technologies .tech-logo {
  position: relative;
  height: auto;
  min-width: 0;
  padding: var(--s4);
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-sm);
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s,
    background 0.18s;
}
#s-technologies .tech-logo:hover {
  background: #202731;
  border-color: #3a424e;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
#s-technologies .tech-logo img {
  max-width: 100%;
  opacity: 1;
}
#s-technologies .tech-logo:hover img {
  opacity: 1;
  transform: none;
}
/* Подпись направления — заголовок трека: выше кегль, брендовый индекс. */
#s-technologies .tech-logo::before {
  position: absolute;
  top: calc(-1 * var(--s6) - 0.15rem);
  left: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  line-height: 1;
  white-space: nowrap;
}
#s-technologies .tech-logo:nth-child(2)::before {
  content: "01  Frontend";
  color: var(--brand-ink);
}
#s-technologies .tech-logo:nth-child(8)::before {
  content: "02  Backend";
}
#s-technologies .tech-logo:nth-child(1)::before {
  content: "03  Mobile";
}
#s-technologies .tech-logo:nth-child(3)::before {
  content: "04  DevOps";
}
#s-technologies .tech-logo:nth-child(4)::before {
  content: "05  Databases";
}
#s-technologies .tech-logo:nth-child(14)::before {
  content: "06  Enterprise";
}

/* Frontend */
#s-technologies .tech-logo:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(10) {
  grid-column: 1;
  grid-row: 3;
}
#s-technologies .tech-logo:nth-child(15) {
  grid-column: 1;
  grid-row: 4;
}
/* Backend */
#s-technologies .tech-logo:nth-child(8) {
  grid-column: 2;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(11) {
  grid-column: 2;
  grid-row: 3;
}
#s-technologies .tech-logo:nth-child(5) {
  grid-column: 2;
  grid-row: 4;
}
/* Mobile */
#s-technologies .tech-logo:nth-child(1) {
  grid-column: 3;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(16) {
  grid-column: 3;
  grid-row: 3;
}
/* DevOps */
#s-technologies .tech-logo:nth-child(3) {
  grid-column: 4;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(6) {
  grid-column: 4;
  grid-row: 3;
}
#s-technologies .tech-logo:nth-child(7) {
  grid-column: 4;
  grid-row: 4;
}
#s-technologies .tech-logo:nth-child(9) {
  grid-column: 4;
  grid-row: 5;
}
#s-technologies .tech-logo:nth-child(13) {
  grid-column: 4;
  grid-row: 6;
}
/* Databases */
#s-technologies .tech-logo:nth-child(4) {
  grid-column: 5;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(12) {
  grid-column: 5;
  grid-row: 3;
}
#s-technologies .tech-logo:nth-child(19) {
  grid-column: 5;
  grid-row: 4;
}
/* Enterprise */
#s-technologies .tech-logo:nth-child(14) {
  grid-column: 6;
  grid-row: 2;
}
#s-technologies .tech-logo:nth-child(17) {
  grid-column: 6;
  grid-row: 3;
}
#s-technologies .tech-logo:nth-child(18) {
  grid-column: 6;
  grid-row: 4;
}
#s-technologies .tech-logo:nth-child(20) {
  grid-column: 6;
  grid-row: 5;
}

@media (max-width: 900px) {
  #s-technologies .tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 0 repeat(6, 92px);
    grid-auto-rows: 92px;
  }
  #s-technologies .tech-logo:nth-child(2),
  #s-technologies .tech-logo:nth-child(10),
  #s-technologies .tech-logo:nth-child(15) {
    grid-column: 1;
  }
  #s-technologies .tech-logo:nth-child(8),
  #s-technologies .tech-logo:nth-child(11),
  #s-technologies .tech-logo:nth-child(5) {
    grid-column: 2;
  }
  #s-technologies .tech-logo:nth-child(1),
  #s-technologies .tech-logo:nth-child(16) {
    grid-column: 3;
  }
  #s-technologies .tech-logo:nth-child(3),
  #s-technologies .tech-logo:nth-child(6),
  #s-technologies .tech-logo:nth-child(7),
  #s-technologies .tech-logo:nth-child(9),
  #s-technologies .tech-logo:nth-child(13) {
    grid-column: 1;
  }
  #s-technologies .tech-logo:nth-child(4),
  #s-technologies .tech-logo:nth-child(12),
  #s-technologies .tech-logo:nth-child(19) {
    grid-column: 2;
  }
  #s-technologies .tech-logo:nth-child(14),
  #s-technologies .tech-logo:nth-child(17),
  #s-technologies .tech-logo:nth-child(18),
  #s-technologies .tech-logo:nth-child(20) {
    grid-column: 3;
  }
  #s-technologies .tech-logo:nth-child(3),
  #s-technologies .tech-logo:nth-child(4),
  #s-technologies .tech-logo:nth-child(14) {
    grid-row: auto;
    margin-top: var(--s6);
  }
}

@media (max-width: 600px) {
  #s-technologies .tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 0 repeat(17, 84px);
    gap: var(--s3);
    grid-auto-rows: 84px;
  }
  #s-technologies .tech-logo {
    padding: var(--s3);
  }
  #s-technologies .tech-logo::before {
    left: 0;
    font-size: var(--fs-micro);
  }
  #s-technologies .tech-logo:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  #s-technologies .tech-logo:nth-child(10) {
    grid-column: 2;
    grid-row: 2;
  }
  #s-technologies .tech-logo:nth-child(15) {
    grid-column: 1;
    grid-row: 3;
  }
  #s-technologies .tech-logo:nth-child(8) {
    grid-column: 1;
    grid-row: 5;
  }
  #s-technologies .tech-logo:nth-child(11) {
    grid-column: 2;
    grid-row: 5;
  }
  #s-technologies .tech-logo:nth-child(5) {
    grid-column: 1;
    grid-row: 6;
  }
  #s-technologies .tech-logo:nth-child(1) {
    grid-column: 1;
    grid-row: 8;
  }
  #s-technologies .tech-logo:nth-child(16) {
    grid-column: 2;
    grid-row: 8;
  }
  #s-technologies .tech-logo:nth-child(3) {
    grid-column: 1;
    grid-row: 10;
    margin-top: 0;
  }
  #s-technologies .tech-logo:nth-child(6) {
    grid-column: 2;
    grid-row: 10;
  }
  #s-technologies .tech-logo:nth-child(7) {
    grid-column: 1;
    grid-row: 11;
  }
  #s-technologies .tech-logo:nth-child(9) {
    grid-column: 2;
    grid-row: 11;
  }
  #s-technologies .tech-logo:nth-child(13) {
    grid-column: 1;
    grid-row: 12;
  }
  #s-technologies .tech-logo:nth-child(4) {
    grid-column: 1;
    grid-row: 14;
    margin-top: 0;
  }
  #s-technologies .tech-logo:nth-child(12) {
    grid-column: 2;
    grid-row: 14;
  }
  #s-technologies .tech-logo:nth-child(19) {
    grid-column: 1;
    grid-row: 15;
  }
  #s-technologies .tech-logo:nth-child(14) {
    grid-column: 1;
    grid-row: 17;
    margin-top: 0;
  }
  #s-technologies .tech-logo:nth-child(17) {
    grid-column: 2;
    grid-row: 17;
  }
  #s-technologies .tech-logo:nth-child(18) {
    grid-column: 1;
    grid-row: 18;
  }
  #s-technologies .tech-logo:nth-child(20) {
    grid-column: 2;
    grid-row: 18;
  }
}

/* stats */
/* --- полоса показателей ---
   Фон был --ink (#090B0F) на --paper (#0F1319): разница в 6 пунктов яркости,
   полоса визуально не существовала. Теперь это отдельная глубокая лента с
   брендовыми кромками, сеткой и разделителями между колонками. */
.stats {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #05070a 0%, #0b0e14 52%, #05070a 100%);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
/* верхняя и нижняя брендовые кромки-«шины» */
.stats::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 22%, var(--brand) 78%, transparent);
  opacity: 0.75;
}
.stats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 120% at 50% 0%, rgba(238, 46, 48, 0.16), transparent 66%),
    var(--grid-dense);
  opacity: 0.9;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5) 0;
}
/* Разделители-волосинки между колонками вместо верхней черты у каждой:
   лента читается как единая шкала приборной панели, а не как четыре обрубка. */
.stat {
  display: grid;
  gap: 0.15rem;
  padding: 0 clamp(0.75rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.stat .ico {
  width: 26px;
  height: 26px;
  color: var(--brand);
  margin-bottom: 0.7rem;
  filter: drop-shadow(0 0 10px rgba(238, 46, 48, 0.6));
}
.stat h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  background: linear-gradient(180deg, #fff 32%, #b9c0cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat p {
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-55);
}
@media (max-width: 620px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6) 0;
  }
  .stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- cards / features / services (numbered where sequential) ---------- */
.cards {
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* --- карточка ---
   Плоская заливка + граница 1px терялись на тёмном фоне. Теперь у карточки есть
   объём: диагональный градиент, внутренняя световая кромка сверху, брендовая
   черта по верхнему краю (загорается на ховере) и подъём с красным свечением. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  position: relative;
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* верхняя акцентная черта: от левого края, раскрывается на всю ширину на ховере */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 70%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), rgba(238, 46, 48, 0));
  transition: right 0.28s ease;
}
.card:hover::after,
.card:focus-within::after {
  right: 0;
}
.ico-inline {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.05em;
  color: var(--brand);
  stroke-width: 2;
}
.card:hover {
  transform: translateY(-4px);
  background: var(--card-bg-hover);
  border-color: rgba(238, 46, 48, 0.42);
  box-shadow:
    var(--shadow-lift),
    0 0 34px -14px rgba(238, 46, 48, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Иконка в собственной плашке-«узле»: даёт карточке точку входа для глаза
   и держит одинаковую оптическую массу при разной длине заголовков. */
.card .ico {
  width: 24px;
  height: 24px;
  color: var(--brand);
  margin: 0;
  stroke-width: 1.7;
}
.card > .ico {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: 0.62rem;
  margin-bottom: var(--s4);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(238, 46, 48, 0.2), rgba(238, 46, 48, 0.06));
  border: 1px solid rgba(238, 46, 48, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.card:hover > .ico {
  background: linear-gradient(150deg, rgba(238, 46, 48, 0.34), rgba(238, 46, 48, 0.1));
  border-color: rgba(238, 46, 48, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px -4px rgba(238, 46, 48, 0.5);
}
/* Заголовки карточек остаются на текстовой гарнитуре: на 18px заголовочная
   уже не даёт выразительности, зато мешает читать плотные сетки. */
.card h3,
.card h4 {
  font-family: var(--font);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.card h3 {
  margin-bottom: 0.5rem;
}
/* Подзаголовок карточки — «капс-метка», а не второй заголовок: убирает
   конкуренцию с h4 и добавляет ту самую инженерную типографскую фактуру. */
.card h5 {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  line-height: 1.4;
  margin: 0.3rem 0 0.7rem;
}
/* Текст карточки светлее заголовка на одну ступень (--body-2), а не на две
   (--muted): при 15px вторичный тон уже читался как выключенный. */
.card p {
  color: var(--body-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}

/* карточка вакансии: фото сверху, требования списком снизу */
.card-vacancy {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* макеты вакансий — квадратные баннеры 1080×1080 с вёрсткой внутри картинки,
   поэтому кадрируем по квадрату (без обрезки содержимого) */
.card-vacancy .card-media {
  aspect-ratio: 1/1;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-vacancy .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-vacancy .card-body {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-vacancy h4 {
  margin-bottom: 0.4rem;
}
.card-vacancy .bullet-list {
  margin: var(--s3) 0 0;
}
.card-vacancy .bullet-list li {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--body-2);
}

/* numbered sequence (real steps) */
/* Крупный «призрачный» индекс в углу — читается как шаг схемы, а не как
   мелкая подпись; заодно заполняет пустоту в правом верхнем углу карточки. */
.steps {
  counter-reset: step;
}
.steps .card {
  counter-increment: step;
}
.steps .card::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.32em;
  right: 0.5rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.6rem + 2.9vw, 5rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  transition: -webkit-text-stroke-color 0.24s ease;
}
.steps .card:hover::before {
  -webkit-text-stroke-color: rgba(238, 46, 48, 0.42);
}
.steps .card .ico {
  color: var(--brand);
}

/* wcu graphic + features layout */
.wcu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}
.wcu-media {
  display: grid;
  place-items: center;
}
.wcu-media img {
  max-width: 340px;
  width: 100%;
}

/* progress bars (skills) */
/* Панель компетенций: раньше — четыре голые полоски на пустом фоне. Теперь это
   собранный блок на поверхности, с процентом справа (значение уже есть в
   разметке — <div class="progress">95%</div> — просто было скрыто font-size:0)
   и с делениями шкалы, рифмующимися с инженерной сеткой сайта. */
.progress-list {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  align-content: center;
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(238, 46, 48, 0.1), transparent 62%),
    var(--card-bg);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.progress-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 var(--s4);
}
.progress-list h5 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin-bottom: 0.5rem;
}
.progress-bar {
  grid-column: 1 / -1;
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
/* деления шкалы — каждые 10% */
.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(10% - 1px),
    rgba(9, 11, 15, 0.55) calc(10% - 1px) 10%
  );
}
.progress-bar .progress {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #b3181e, var(--brand) 60%, #ff7b7d);
  border-radius: inherit;
  box-shadow: 0 0 16px -2px rgba(238, 46, 48, 0.75);
  transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  color: transparent;
  font-size: 0;
}
/* Процент выводим отдельно, из data-атрибута: сам текст в разметке остаётся
   на месте (и скрытым), поэтому содержимое страницы не меняется. */
.progress-list > div::after {
  content: attr(data-pct);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-ui);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .progress-list {
    margin-top: var(--s5);
  }
}

/* ---------- clients carousel (styles existing ui/ourClients.php markup) ---------- */
.partner-logos-carousel {
  position: relative;
  isolation: isolate;
  background: var(--band-bg);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 4.6vw, 3.75rem);
}
.partner-logos-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grid-dense);
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 78%);
}
.partnerContainer {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.partner-logos-carousel .section-title {
  text-align: center;
  padding-left: 0;
  margin-bottom: var(--s6);
}
.partner-logos-carousel .section-title::before,
.partner-logos-carousel .section-title::after {
  display: none;
}
.clients-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.333rem + 1.3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.clients-title i {
  font-style: normal;
  color: var(--brand-ink);
}
.partner-logos-slider {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  padding: var(--s2) var(--s1) var(--s5);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.partner-logos-slider::-webkit-scrollbar {
  display: none;
}
.logo-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
/* логотипы показываем в фирменных цветах. Во всех PNG вшита белая подложка,
   поэтому бокс тоже белый — плашка сливается с карточкой, видно только знак.
   Бокс держит единый ритм ленты (одинаковый размер, логотипы одного масштаба) */
.logo-box {
  width: 176px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  overflow: hidden;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8);
}
.logo-item a:hover .logo-box {
  transform: translateY(-5px);
  border-color: rgba(238, 46, 48, 0.6);
  box-shadow:
    0 18px 34px -16px rgba(0, 0, 0, 0.85),
    0 0 26px -8px rgba(238, 46, 48, 0.6);
}
/* логотип целиком внутри бокса: max-* ограничивают его внутренней областью
   (размер бокса минус padding), contain сохраняет пропорции,
   margin:auto центрирует по горизонтали и вертикали */
.logo-box img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center;
  opacity: 0.92;
  transition: 0.18s;
}
.logo-item a:hover .logo-box img,
.logo-box:hover img {
  opacity: 1;
}
/* бесшовная бесконечная лента: включается скриптом (без JS остаётся прежний список) */
.partner-logos-carousel.has-marquee {
  overflow: hidden;
  overflow: clip;
}
/* Растворение ленты у краёв экрана — логотипы не «обрубаются» о край окна. */
.partner-logos-slider.is-marquee {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner-logos-slider.is-marquee.is-dragging {
  cursor: grabbing;
}
.marquee-track {
  display: flex;
  gap: var(--s4);
  flex: 0 0 auto;
  width: max-content;
  will-change: transform;
  animation: syn-marquee var(--marquee-dur, 60s) linear infinite;
}
/* сдвиг ровно на один набор логотипов → кадр в конце цикла совпадает с первым */
@keyframes syn-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--marquee-shift, 50%) * -1), 0, 0);
  }
}
@media (hover: hover) {
  .partner-logos-slider.is-marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}
.partner-logos-slider.is-marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}
.partner-slider-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}
.partner-logos-carousel .button.round.brand-1 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  transition:
    background 0.16s,
    transform 0.16s;
}
.partner-logos-carousel .button.round.brand-1:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
}

/* ---------- clients page: полная сетка карточек ---------- */
/* ~100 карточек: auto-fill даёт 4 колонки на 1200px и мягко сжимается до одной,
   не требуя отдельных правил на каждый брейкпоинт */
.client-cards {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.card-client {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
/* карточка-ссылка «поднимается» (наследует .card:hover); закрытые проекты —
   статичная плашка, поэтому ховер-эффект у них снимаем */
.card-client:not(a):hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
/* в логотипы клиентов вшита белая подложка — плашка тоже белая (см. .logo-box) */
.client-logo {
  height: 250px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s5);
}
.client-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center;
  opacity: 0.92;
  transition: opacity 0.18s;
}
a.card-client:hover .client-logo img {
  opacity: 1;
}
/* ширина карточки не меняется — растёт только высота плашки логотипа,
   поэтому на узких экранах бокс соразмерно понижаем */
@media (max-width: 900px) {
  .client-logo {
    height: 210px;
  }
}
@media (max-width: 600px) {
  .client-logo {
    height: 180px;
  }
}
.card-client .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s5);
}
.card-client h4 {
  font-size: var(--fs-title);
  margin-bottom: 0.4rem;
}
a.card-client:hover h4 {
  color: var(--brand-ink);
}
.card-client p {
  font-size: var(--fs-sm);
}
/* метаданные всегда прижаты к низу — карточки в ряду выравниваются по сетке */
.client-meta {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.client-meta > li {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
  max-width: 100%;
}
.client-kind {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--body-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}
.client-stack {
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.client-url {
  word-break: break-word;
}
.client-url.is-live {
  color: var(--brand-ink);
  font-weight: var(--fw-semibold);
}
@media (max-width: 420px) {
  .client-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- contact form ----------
   Форма стояла голыми полями на фоне страницы. Теперь это выделенная панель:
   поверхность, брендовое свечение сверху и двухколоночная сетка полей —
   блок стал компактнее по высоте и читается как законченная карточка заявки.
   Разметка, id/name полей и onsubmit не менялись. */
.contact .form-wrap {
  max-width: 780px;
  margin: var(--s6) auto 0;
  padding: clamp(1.4rem, 3.2vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    radial-gradient(88% 58% at 50% 0%, rgba(238, 46, 48, 0.13), transparent 64%),
    var(--card-bg);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4) var(--s5);
  text-align: left;
}
/* Поля «сообщение» и кнопка занимают всю ширину; остальные встают парами. */
.contact form > .field:has(textarea),
.contact form > button[type="submit"] {
  grid-column: 1 / -1;
}
@media (max-width: 620px) {
  .contact form {
    grid-template-columns: 1fr;
  }
}
/* Подпись поля — капс-метка. Кегль поднят с 11.5px до 12px и утяжелён до 700:
   на прежних значениях подписи полей терялись рядом с самими полями. */
.field label {
  display: block;
  color: var(--body-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: var(--lh-ui);
  padding: 0.85rem 1rem;
  background: rgba(9, 11, 15, 0.62);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7d8792;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-weak);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.contact form button[type="submit"] {
  justify-self: start;
  background: var(--brand);
  color: #fff;
  border: none;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  padding: 0.85rem 2.2rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(238, 46, 48, 0.8);
  transition:
    background 0.16s,
    transform 0.16s,
    box-shadow 0.16s;
}
.contact form button[type="submit"]:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(238, 46, 48, 0.9);
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #0b0e14 0%, #06080b 100%);
  color: var(--ink-70);
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
/* Брендовая кромка сверху + сетка: футер читается как «фундамент» страницы,
   а не как ещё одна тёмная плита, слитая с последней секцией. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand) 18%, var(--brand) 82%, transparent);
  opacity: 0.55;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 100% at 14% 0%, rgba(238, 46, 48, 0.09), transparent 66%),
    var(--grid-dense);
  opacity: 0.65;
}
/* brand | блок колонок навигации (авто-подгонка) | контакты */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.1fr;
  gap: var(--s6) var(--s7);
  padding-block: var(--s8) var(--s7);
}
.footer-col h3,
.footer-nav-col h3 {
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
/* Заголовок группы ссылок — капс-метка: 12px/700 с трекингом читается лучше,
   чем прежние 13px/500, и не спорит с h3 колонки. */
.footer-col h4,
.footer-social h4 {
  color: var(--ink-55);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0.15rem 0 var(--s3);
}
.footer-col p {
  color: var(--ink-70);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 42ch;
}
/* Колонки навигации: авто-подгонка — новые колонки/ссылки встают без правок вёрстки */
.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s6) var(--s5);
}
.footer-social {
  margin-top: var(--s5);
}
.footer-logo img {
  height: 40px;
  width: auto;
}
.footer-brand .copyright {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-55);
  margin-top: var(--s4);
}
.footer-contacts {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--s5);
}
.footer-contacts li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-70);
}
.footer-contacts b {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.footer-contacts .fi {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
}
.footer-contacts a.emails {
  color: var(--ink-70);
}
.footer-contacts a.emails:hover {
  color: #fff;
}
.footer-hours {
  display: grid;
  gap: 0.15rem;
  border-left: 2px solid var(--brand);
  padding-left: var(--s3);
}
.footer-hours strong {
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.footer-hours i {
  color: var(--ink-55);
  font-size: var(--fs-caption);
  line-height: 1.5;
  font-style: normal;
}
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s3);
}
.social-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-70);
  border: 1px solid var(--ink-line);
  transition: 0.16s;
}
.social-icon:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.footer-services {
  display: grid;
  gap: 0.5rem;
}
.footer-services .dash {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Колонки услуг ужимаются до 150px (auto-fit), а отдельные названия длиннее
   («конфеденциальности»): без переноса такое слово распирает ссылку шире
   колонки и обрезается краем экрана на телефонах. Именно `anywhere` (а не
   `break-word`) уменьшает min-content ссылки — иначе inline-flex-бокс остаётся
   по ширине слова. Ширину колонок это не меняет: у трека фиксированный
   минимум 150px, а слово, которое влезает, не переносится. */
.footer-services a {
  color: var(--ink-70);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.footer-services a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--brand);
  flex: none;
}
.footer-services a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid var(--ink-line);
}
.footer-bottom .container {
  padding-block: var(--s4);
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--s5);
}
.footer-nav a {
  color: var(--ink-55);
  text-decoration: none;
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.footer-nav a:hover {
  color: #fff;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- floating buttons ---------- */
.float-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 35;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform 0.18s;
}
.float-wa img {
  width: 54px;
  height: 54px;
}
.float-wa:hover {
  transform: scale(1.06);
}
.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 35;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.scroll-top:hover {
  background: var(--brand);
}

/* ---------- illustrations ---------- */
.illus {
  color: var(--body-2);
}
.illus .node {
  fill: var(--brand);
}

/* ---------- лёгкое появление страницы ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site-header {
    animation: syn-page-header 0.32s ease-out both;
  }
  main > .hero .hero-inner,
  main > .hero.sub-header .sh-title-wrapper {
    animation: syn-page-content 0.42s ease-out 0.06s both;
  }
}
@keyframes syn-page-header {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes syn-page-content {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- страница 404 (все локали) ----------
   Раньше 404 жила на покупном светлом шаблоне (app.css): белая шапка, серый
   фон, всегда раскрытый список языков — страница полностью выпадала из
   редизайна. Слой ниже приводит её к общей системе. Он покрывает обе
   существующие разметки: корневую (.e404-*) и локальную «легаси»
   (.app-header / .hero.sub-header / .app-footer), поэтому в самих файлах
   меняются только подключение стилей, класс <body> и иконки — тексты,
   заголовки, ссылки и PHP-логика остаются как были. */
.e404-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.e404-page > #site-content,
.e404-page #site-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

/* --- шапка --- */
.e404-page .app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 19, 25, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.e404-page .app-header .container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.e404-page .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  min-height: 68px;
}
.e404-page .header-wrapper .logo {
  margin: 0;
  flex: none;
}
.e404-page .header-wrapper .logo img {
  height: 36px;
  width: auto;
}
.e404-page .main-nav,
.e404-page .main-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.e404-page .main-nav a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  font-size: 0.96875rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  padding: 0.4rem 0;
}
.e404-page .main-nav > a::after,
.e404-page .main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transition: right 0.2s;
}
.e404-page .main-nav > a:hover::after,
.e404-page .main-nav > a:focus-visible::after,
.e404-page .main-nav > ul > li > a:hover::after,
.e404-page .main-nav > ul > li > a:focus-visible::after {
  right: 0;
}

/* --- переключатель языка: список скрыт, раскрывается по клику/фокусу --- */
.e404-page .lang-dropdown {
  position: relative;
  list-style: none;
}
.e404-page .lang-dropdown > .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.42rem 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.e404-page .lang-dropdown > .lang-btn:hover,
.e404-page .lang-dropdown.is-open > .lang-btn {
  border-color: var(--brand);
}
.e404-page .lang-dropdown .arrow {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s;
}
.e404-page .lang-dropdown.is-open .arrow {
  transform: rotate(180deg);
}
.e404-page .lang-dropdown > ul {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  min-width: 190px;
  max-height: min(70vh, 420px);
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s,
    transform 0.18s,
    visibility 0.18s;
}
.e404-page .lang-dropdown.is-open > ul,
.e404-page .lang-dropdown:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.e404-page .lang-dropdown > ul li {
  padding: 0;
}
.e404-page .lang-dropdown > ul a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
}
.e404-page .lang-dropdown > ul a:hover,
.e404-page .lang-dropdown > ul a:focus-visible {
  background: var(--brand-weak);
  color: var(--text);
}

/* --- центральный блок ---
   Три варианта разметки 404 на сайте:
     1) корневая — #site-content.e404-main > .e404-inner;
     2) «легаси» en/kg/de/fr/it/es/pl/pt — #site-content > .hero.sub-header
        (шапка и футер лежат ВНУТРИ #site-content);
     3) «легаси» uz/uz-cyrl/kk/tg — #site-content без обёртки, сразу h1/p/кнопки.
   Варианты 1 и 3 отличаются от 2 тем, что шапки внутри #site-content нет —
   на этом признаке (:has) их и разделяем, не трогая разметку. */
.e404-page #site-content:not(:has(.app-header)),
.e404-page .hero.sub-header {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: none;
  min-height: 0;
  padding: clamp(3rem, 9vw, 6.5rem) var(--gutter);
}
/* крупная «призрачная» 404 — CSS-фон, а не текст в разметке */
.e404-page #site-content:not(:has(.app-header))::before,
.e404-page .hero.sub-header::before {
  content: "404";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
  background: none;
  inset: auto auto auto 50%;
  top: 50%;
}
.e404-page #site-content:not(:has(.app-header))::after,
.e404-page .hero.sub-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 42%, rgba(238, 46, 48, 0.16), transparent 66%),
    var(--grid-dense);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 10%, transparent 76%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 10%, transparent 76%);
}
/* Вариант 3 (uz/uz-cyrl/kk/tg): обёртки нет — центрируем и ограничиваем меру
   строки прямым детям #site-content. Псевдоэлементы позиционированы абсолютно,
   поэтому в грид-поток не попадают. */
.e404-page #site-content:not(:has(.app-header)) {
  justify-items: center;
  align-content: center;
  text-align: center;
}
.e404-page #site-content:not(:has(.app-header)) > * {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  width: 100%;
}
/* строка кнопок «Вернуться на главную / Связаться с нами» */
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s7);
}
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) > a {
  display: inline-flex;
  align-items: center;
  padding: 0.72rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  text-decoration: none;
  transition:
    background 0.16s,
    color 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) > a:first-child {
  background: var(--brand);
  color: #fff;
}
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) > a:first-child:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
}
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) > a + a {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.e404-page #site-content:not(:has(.app-header)) > div:not([class]) > a + a:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-1px);
}
/* заголовок и абзац этого варианта — те же ступени, что и в остальных */
.e404-page #site-content:not(:has(.app-header)) > h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  color: var(--text);
  margin: 0 0 var(--s5);
}
.e404-page #site-content:not(:has(.app-header)) > p {
  font-size: var(--fs-lead);
  color: var(--body-2);
  line-height: var(--lh-lead);
  margin: 0 auto;
  max-width: 44rem;
}

.e404-page .e404-inner,
.e404-page .sh-title-wrapper {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
/* декоративный сигнатурный узел (без текста) — тот же знак, что у секций */
.e404-node {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 auto var(--s6);
  border-radius: 4px;
  background: var(--brand);
  box-shadow:
    0 0 0 6px var(--brand-weak),
    0 0 26px 0 rgba(238, 46, 48, 0.75);
}
.e404-node::after {
  content: "";
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(var(--brand), transparent);
}
.e404-page .e404-inner h1,
.e404-page .sh-title-wrapper h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  color: var(--text);
  margin: 0 0 var(--s5);
}
.e404-page .e404-inner p,
.e404-page .sh-title-wrapper p {
  font-size: var(--fs-lead);
  color: var(--body-2);
  line-height: var(--lh-lead);
  margin: 0 auto var(--s7);
  max-width: 44rem;
}
.e404-page .e404-actions,
.e404-page .sh-title-wrapper > div {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: 0;
}
/* кнопки локальной разметки (.btn-primary/.btn-secondary) — под общий стиль */
.e404-page .btn-primary {
  background: var(--brand);
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.72rem 1.5rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:
    background 0.16s,
    transform 0.16s;
}
.e404-page .btn-primary:hover {
  background: var(--brand-hover);
  color: #fff;
  transform: translateY(-1px);
}
.e404-page .btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.72rem 1.5rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:
    border-color 0.16s,
    color 0.16s,
    transform 0.16s;
}
.e404-page .btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-1px);
}

/* --- футер --- */
.e404-page .app-footer {
  position: relative;
  margin-top: 0;
  padding: clamp(2.25rem, 5vw, 3.25rem) var(--gutter);
  background: linear-gradient(180deg, #0b0e14, #06080b);
  color: var(--ink-70);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}
.e404-page .app-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  opacity: 0.55;
  background: linear-gradient(90deg, transparent, var(--brand) 18%, var(--brand) 82%, transparent);
}
.e404-page .app-footer > .container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 0;
}
/* обе разметки: прямые колонки в .container либо .footer-content > .row */
.e404-page .app-footer > .container,
.e404-page .app-footer .row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s6) var(--s7);
  align-items: start;
}
.e404-page .app-footer .footer-content {
  display: block;
}
.e404-page .app-footer h3 {
  color: #fff;
  font-family: var(--font);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin: 0 0 var(--s4);
}
.e404-page .app-footer p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-70);
}
.e404-page .app-footer .copyright,
.e404-page .app-footer .e404-copy {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-55);
}
.e404-page .app-footer .logo img {
  height: 40px;
  width: auto;
  margin-bottom: var(--s4);
}
.e404-page .app-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
/* Иконка встроена в строку, а не флекс-элемент: в локальной разметке она лежит
   внутри <b> вместе с подписью (<li><b><svg> Кыргызстан</b>, Бишкек</li>),
   и флекс разрывал бы строку на части. */
.e404-page .app-footer ul li {
  display: block;
  line-height: 1.55;
}
.e404-page .app-footer ul b {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.e404-page .app-footer ul a {
  color: var(--ink-70);
  text-decoration: none;
}
.e404-page .app-footer ul a:hover {
  color: #fff;
}
.e404-page .app-footer .fi {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 0.45rem;
  vertical-align: -0.22em;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e404-page .social-icons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.e404-page .social-icons a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ink-70);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: 0.18s;
}
.e404-page .social-icons a:hover {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.e404-page .social-icons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --- плавающая кнопка WhatsApp ---
   Три написания в разных копиях 404: .e404-wa (корень), .pulse (en-группа)
   и безымянная ссылка с картинкой внутри футера (uz/uz-cyrl/kk/tg). */
.e404-page .e404-wa,
.e404-page .pulse,
.e404-page .app-footer a:has(> img[alt="WhatsApp"]) {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 60;
  display: block;
}
.e404-page .e404-wa img,
.e404-page .pulse img,
.e404-page .app-footer a > img[alt="WhatsApp"] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  padding: 9px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.8);
}

@media (max-width: 900px) {
  .e404-page .main-nav > a,
  .e404-page .main-nav > ul > li:not(.lang-dropdown) {
    display: none;
  }
  .e404-page .app-footer > .container,
  .e404-page .app-footer .row {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
}

/* ---------- страница контактов: карточки-виджеты ----------
   Разметка осталась от покупного шаблона (.row.contact-widgets > .span-4.widget)
   и в main.css не была описана вовсе: два бледных прямоугольника в пустоте —
   самая незаполненная страница сайта. Ниже виджеты приводятся к карточкам
   дизайн-системы и растягиваются на всю ширину контейнера. */
#s-contact.section.primary.contact .contact-widgets {
  display: grid;
  /* min 420px: на 1200px контейнере даёт ровно две колонки, а не три трека,
     из которых один пустой */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
/* .span-4 из сеточной системы шаблона задаёт ширину в процентах и поля —
   в grid-раскладке это ужимало карточку до трети трека. Сбрасываем. */
#s-contact.section.primary.contact .contact-widgets .widget {
  display: flex;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
#s-contact.section.primary.contact .contact-widgets .widget-content {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  justify-content: start;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background:
    radial-gradient(78% 60% at 88% 0%, rgba(238, 46, 48, 0.12), transparent 64%),
    var(--card-bg);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
#s-contact.section.primary.contact .contact-widgets .widget-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grid-dense);
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(84% 84% at 78% 12%, #000 10%, transparent 76%);
  mask-image: radial-gradient(84% 84% at 78% 12%, #000 10%, transparent 76%);
}
#s-contact.section.primary.contact .contact-widgets .widget-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 68%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), rgba(238, 46, 48, 0));
  transition: right 0.28s ease;
}
#s-contact.section.primary.contact .contact-widgets .widget-content:hover {
  transform: translateY(-3px);
  border-color: rgba(238, 46, 48, 0.4);
  box-shadow:
    var(--shadow-lift),
    0 0 30px -14px rgba(238, 46, 48, 0.5);
}
#s-contact.section.primary.contact .contact-widgets .widget-content:hover::after {
  right: 0;
}
/* Иконка шаблона (livicon/Raphaël) — в брендовую плашку-«узел». */
#s-contact.section.primary.contact .contact-widgets .livicon {
  flex: none;
  display: grid !important;
  place-items: center;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(238, 46, 48, 0.2), rgba(238, 46, 48, 0.06));
  border: 1px solid rgba(238, 46, 48, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#s-contact.section.primary.contact .contact-widgets .livicon svg {
  width: 30px;
  height: 30px;
  overflow: visible;
}
#s-contact.section.primary.contact .contact-widgets .livicon svg path {
  fill: var(--brand) !important;
}
#s-contact.section.primary.contact .contact-widgets .widget-content > div {
  min-width: 0;
}
#s-contact.section.primary.contact .contact-widgets header {
  margin-bottom: var(--s4);
}
#s-contact.section.primary.contact .contact-widgets .title {
  padding-left: 0 !important;
}
#s-contact.section.primary.contact .contact-widgets h4 {
  font-family: var(--font);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin: 0;
}
#s-contact.section.primary.contact .contact-widgets h5 {
  margin: 0.3rem 0 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--brand-ink);
}
#s-contact.section.primary.contact .contact-widgets ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#s-contact.section.primary.contact .contact-widgets li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--body-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
#s-contact.section.primary.contact .contact-widgets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--brand);
}
#s-contact.section.primary.contact .contact-widgets li a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition:
    color 0.16s,
    border-color 0.16s;
}
#s-contact.section.primary.contact .contact-widgets li a:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
}

/* Длинные слова в колонках футера («конфеденциальности») на узких экранах
   рвались посередине. Разрешаем перенос по слогам и по границе слова. */
.footer-nav-col a,
.footer-services a,
.footer-nav a {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 420px) {
  .footer-nav-cols {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

/* ============================================================================
   СТРАНИЦА КОНТАКТОВ — доводка до общей стилистики сайта
   ----------------------------------------------------------------------------
   Страница легаси: у неё собственный <head>, и main.css подключается последним,
   поверх app.css / order.css / fontello.css. Поэтому блок ниже правит ТОЛЬКО
   презентационный слой и цепляется за уникальный узел страницы —
   #s-contact.section.primary.contact. Специфичность подобрана под хвостовой
   тёмный оверрайд app.css: его селекторы `body:is(:has(#s-contact…),:has(#s-team…))`
   дают (1,5,x); здесь ровно столько же, а main.css идёт позже — выигрывает
   порядок. Там, где оверрайд помечен !important (фон .section.primary.contact),
   !important продублирован, и спор решает специфичность (1,3,0) против (0,3,0).

   Разметка, тексты, контактные данные, ссылки, <head> и мета не менялись.

   Что решается:
   1. Геро жил на собственных величинах (кегль 600 / 3.5rem, мера 22ch, высота
      500px) и выпадал из ряда геро остальных страниц. Переведён на те же
      токены --fs-hero / --fw-display / --ls-display и ту же меру --hero-col-*.
      Заодно текст встал по левому краю контейнера — раньше .sh-title-wrapper
      сдвигал его на 2rem вправо, и заголовок не совпадал по вертикали ни с
      меню в шапке, ни с карточками ниже.
   2. Секция контактов лежала прямо на фоне страницы: две карточки в пустоте,
      без границ и без фактуры. Стала приподнятой полосой (--band-bg + плотная
      инженерная сетка + волосяные кромки) — тот же приём, что у полос
      .section.text-center на остальных страницах.
   3. Виджеты стояли в двух равных колонках, при том что слева пять строк, а
      справа две: правая карточка пустовала наполовину. Колонки стали разной
      ширины, а длинный список — двухколоночным (по фактическому числу пунктов,
      а не по порядку виджета, — правило работает во всех 13 локалях).
   ========================================================================== */

/* --- 1. Геро -------------------------------------------------------------- */

body:has(#s-contact.section.primary.contact) .hero.sub-header {
  /* Меры колонок — как у современных геро (см. .hero выше в этом файле). */
  --hero-col-title: clamp(30rem, 21rem + 18vw, 44rem);
  --hero-col-text: clamp(27rem, 19.5rem + 12vw, 35rem);
  /* Было clamp(320px,48vh,500px) — геро обрывался сразу под абзацем и читался
     как узкая шапка, а не как первый экран. Верхняя граница ниже «стоэкранной»
     (у .hero — 53rem) осознанно: под заголовком нет ни подзаголовка, ни кнопок,
     и полный экран дал бы ровно ту пустоту, которую этот блок убирает. */
  min-height: clamp(27rem, 68vh, 42rem);
  min-height: clamp(27rem, 68svh, 42rem);
  padding-bottom: clamp(5rem, 8vw, 6.5rem);
}

/* Текст — по левому краю контейнера, в одну линию с карточками секции ниже.
   Сигнатурный «хребет» уходит с обёртки текста на сам контейнер: там он встаёт
   в поле между краем экрана и набором и не сдвигает текст (тот же приём и та же
   геометрия, что у .hero-inner::before). */
body:has(#s-contact.section.primary.contact) .hero.sub-header .sh-title-wrapper {
  max-width: none;
  padding-left: 0;
}
body:has(#s-contact.section.primary.contact) .hero.sub-header .sh-title-wrapper::before,
body:has(#s-contact.section.primary.contact) .hero.sub-header .sh-title-wrapper::after {
  content: none;
}
body:has(#s-contact.section.primary.contact) .hero.sub-header .container::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * 0.42);
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--brand) 0%,
    var(--brand) 9%,
    rgba(255, 255, 255, 0.26) 11%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.06) 78%,
    transparent 100%
  );
}

body:has(#s-contact.section.primary.contact) .hero.sub-header h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  max-width: var(--hero-col-title);
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Как у .hero h1: переносы только по-настоящему длинным словам — «Байланыштар»
     и «Kontaktzentrum» рвать по слогам на выносном кегле нельзя. */
  hyphens: manual;
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: 14 6 6;
}

body:has(#s-contact.section.primary.contact) .hero.sub-header p {
  max-width: var(--hero-col-text);
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
}

/* Индикатор прокрутки — в геометрию .hero-scroll современных страниц. */
body:has(#s-contact.section.primary.contact) .hero.sub-header .hero-down {
  left: max(var(--gutter), calc(50% - var(--wrap) / 2 + var(--gutter)));
  bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Планшет и мобильный. Своя копия брейкпоинта нужна потому, что одноимённое
   правило app.css (@media max-width:959.98px) имеет ту же специфичность, а
   main.css подключён позже: без этого блока базовое правило выше перебило бы
   мобильные величины оверрайда. */
@media (max-width: 959.98px) {
  body:has(#s-contact.section.primary.contact) .hero.sub-header {
    /* Как у .hero на мобильном: набор прижат к верху, а не отцентрован по
       высоте блока. При центрировании над заголовком оставалось ~200px пустого
       поля, а портретный кадр (сюжет внизу) уходил под обрез. */
    align-content: start;
    /* Колонки на всю ширину: 27rem (нижняя граница десктопной меры) шире
       экрана 390px, и абзац упирался бы в край. */
    --hero-col-title: 100%;
    --hero-col-text: min(100%, 34rem);
    min-height: clamp(28rem, 100vh, 44rem);
    min-height: clamp(28rem, 100svh, 44rem);
    padding-bottom: clamp(6rem, 26vw, 9rem);
  }
  /* Хребет: в узкой колонке он съедает и без того малый боковой отступ
     (то же решение, что у .hero-inner::before). */
  body:has(#s-contact.section.primary.contact) .hero.sub-header .container::before {
    display: none;
  }
}

/* --- 2. Секция контактов: приподнятая полоса ------------------------------ */

#s-contact.section.primary.contact {
  position: relative;
  isolation: isolate;
  /* Ритм полос остального сайта (.section.text-center). */
  padding-block: clamp(3rem, 5.4vw, 4.75rem);
  /* !important — тёмный оверрайд app.css ставит background с !important;
     спор важных решается специфичностью, здесь она выше за счёт id. */
  background: var(--band-bg) !important;
  border-block: 1px solid var(--line-soft);
}
/* Плотная сетка — та же фактура, что у полос на остальных страницах. */
#s-contact.section.primary.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grid-dense);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(72% 78% at 50% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(72% 78% at 50% 50%, #000 20%, transparent 78%);
}

/* --- 3. Виджеты ----------------------------------------------------------- */

/* Шаблонный отступ `.section.contact .contact-widgets{margin-bottom:4rem}`
   (app.css) остался от раскладки с формой под карточками. Формы на странице
   нет, поэтому 4rem превращались в пустую полосу между карточками и футером:
   секция стояла на 76px нижнего поля, но выглядела как 140px. */
#s-contact.section.primary.contact .contact-widgets {
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Было repeat(auto-fit, minmax(420px,1fr)) — два равных трека при пяти строках
   слева и двух справа. Рядом карточки встают только с 1200px, где широкой
   хватает места на двухколоночный список; ниже они идут в одну колонку во всю
   ширину — так строка «Электрондук почта: info@syntlex.kg» (кг) не рвётся. */
@media (min-width: 1200px) {
  #s-contact.section.primary.contact .contact-widgets {
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  }
}

/* Список выносится из колонки текста на всю ширину карточки: обёртка
   <div> схлопывается через display:contents, и её дети (header, ul) становятся
   прямыми элементами грида. Иконка с заголовком остаются в первой строке,
   список занимает вторую целиком — раньше он делил ширину с 60px плашкой
   иконки, и на две колонки места не оставалось. */
#s-contact.section.primary.contact .contact-widgets .widget-content > div {
  display: contents;
}
#s-contact.section.primary.contact .contact-widgets header {
  align-self: center;
  margin-bottom: 0;
}
/* Волосяная линия отделяет шапку карточки от данных — тот же словарь «линия»,
   что и в остальной системе. */
#s-contact.section.primary.contact .contact-widgets ul {
  grid-column: 1 / -1;
  padding-top: clamp(0.85rem, 2vw, 1.35rem);
  border-top: 1px solid var(--line-soft);
}

/* Карточка объявлена контейнером: раскладка списка зависит от ширины самой
   карточки, а не окна. На 1024px карточка идёт во всю ширину и места под две
   колонки больше, чем у той же карточки в широком треке на 1200px —
   медиазапросом эти два случая не различить. */
#s-contact.section.primary.contact .contact-widgets .widget-content {
  container-type: inline-size;
}
/* Порог 32rem: длинный список (4+ пунктов, т.е. контакты) делится на две
   колонки, как только каждая получает ~250px. Признак структурный, а не
   порядковый, — во всех 13 локалях слева пять строк, справа две. */
@container (min-width: 32rem) {
  #s-contact.section.primary.contact .contact-widgets ul:has(li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 4cqi, 2rem);
  }
}
/* На широкой карточке (планшет и 1024px, где карточки идут друг под другом во
   всю ширину) две строки графика работы тоже расходятся по колонкам — иначе
   правая половина карточки пустует. */
@container (min-width: 40rem) {
  #s-contact.section.primary.contact .contact-widgets ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 4cqi, 2rem);
  }
}
/* Длинные подписи локалей («Персоналдык бөлүм», «Personalabteilung») не должны
   раздувать колонку и выталкивать почту за край карточки. */
#s-contact.section.primary.contact .contact-widgets li {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Узкий телефон: иконка встаёт над текстом, а не рядом — 60px плашки плюс
   отступ съедали четверть строки, и «+996 (707) 18 88 70» переносился. */
@media (max-width: 420px) {
  #s-contact.section.primary.contact .contact-widgets .widget-content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}

/* --- 4. Иллюстрация полосы ------------------------------------------------
   Единственный сюжетный элемент страницы ниже геро — карточки с адресом и
   графиком. Рядом с ними встаёт /assets/img/syn-contacts.svg из того же набора,
   что syn-ecosystem / syn-mobile / syn-strategy на современных страницах:
   узел «точка на карте» и четыре канала связи — почта, телефон, сообщение,
   часы приёма, то есть ровно то, что перечислено в карточках.

   Картинка декоративная (дублирует текст рядом), поэтому вводится фоном
   псевдоэлемента, а не тегом <img>: разметку страницы этот файл не трогает —
   иначе правку пришлось бы повторить в 13 локальных копиях contacts.php,
   которые различаются отступами и набором классов у .row. */
#s-contact.section.primary.contact .container::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 25rem;
  margin: clamp(1.5rem, 4vw, 2.75rem) auto 0;
  aspect-ratio: 4 / 3;
  background: url("/assets/img/syn-contacts.svg") center / contain no-repeat;
}

/* От 1200px карточки и иллюстрация встают рядом. Порог тот же, что у правила
   раскладки виджетов выше: до него карточки идут в одну колонку во всю ширину,
   и второй колонке места нет. */
@media (min-width: 1200px) {
  #s-contact.section.primary.contact .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  /* Виджеты уходят друг под друга: в левой колонке ~660px, и карточка всё ещё
     шире контейнерного порога 32rem — длинный список остаётся двухколоночным. */
  #s-contact.section.primary.contact .contact-widgets {
    grid-template-columns: minmax(0, 1fr);
  }
  #s-contact.section.primary.contact .container::after {
    max-width: none;
    margin: 0;
  }
}