/* Сайт gaz-safety.kz. Эталон вёрстки — макет «Главная v2», анимации — «Гайд по
   анимациям». Инлайн-стилей и инлайн-скриптов нет: их запрещает CSP сервера. */

/* ─── Шрифты: свои копии, без внешних запросов (лицензия OFL — fonts/OFL-*.txt) ─── */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-0491, U+0494-0499, U+049C-04A1, U+04A4-04AF, U+04B2-04D7, U+04DA-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-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-20B7, U+20B9-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-0491, U+0494-0499, U+049C-04A1, U+04A4-04AF, U+04B2-04B9, U+04BC-04D7, U+04DA-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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-20B7, U+20B9-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-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;
}
/* В Manrope и JetBrains Mono нет казахских ә ғ қ ң ұ (в моноширинном ещё һ)
   и знака тенге ₸. Эти знаки берём из похожих шрифтов — Inter и Noto Sans Mono,
   в файлах только они. Эти же знаки убраны из диапазонов cyrillic-ext и
   latin-ext выше: иначе ради них браузер качал бы файлы, где их всё равно нет
   (проверено по файлам шрифтов; Ү Ө и в Manrope Һ там есть и остаются). */
@font-face {
  font-family: 'GS Sans Fill';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-kk.woff2') format('woff2');
  unicode-range: U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+20B8, U+2190, U+2192, U+2197;
}
@font-face {
  font-family: 'GS Mono Fill';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/noto-sans-mono-kk.woff2') format('woff2');
  unicode-range: U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+20B8, U+2190, U+2192, U+2197;
}

/* ─── Токены ─── */
:root {
  color-scheme: light;

  --ink: #14120C;
  --ink-2: #17150F;
  --paper: #E9E4D8;
  --cream: #FAF7F0;
  --line: #D5CCB8;
  --line-2: #CFC6B2;
  --line-3: #E3DBC9;
  --muted: #6B6558;
  --text-2: #4A4539;
  --dark-card: #1D1B13;
  --dark-line: #33301F;
  --dark-line-2: #4A4534;
  --dark-muted: #B5AE9C;
  --dark-muted-2: #8E887A;
  --light: #F5F1E6;
  --yellow: #F0C000;
  --green: #1F7A4D;
  --green-hover: #18613C;
  --red: #B3261E;

  --sans: 'Manrope', 'GS Sans Fill', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'GS Mono Fill', ui-monospace, Menlo, Consolas, monospace;

  /* Движение — токены из гайда */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover: 250ms;
  --dur-ui: 450ms;
  --dur-reveal: 900ms;
  --dur-hero: 1100ms;
  --rise: 28px;
  --stagger: 80ms;

  /* Отступы макета: container-query единицы переведены в vw */
  --gut: clamp(16px, 3vw, 44px);
  --gut-panel: clamp(8px, 1.2vw, 16px);
  --pad-panel-y: clamp(56px, 7vw, 112px);
  --pad-panel-x: clamp(20px, 4vw, 64px);
  --sec-gap: clamp(72px, 9vw, 136px);
  --r-panel: clamp(24px, 2.8vw, 40px);
  --grid-gap: clamp(12px, 1.4vw, 20px);
  --grid-top: clamp(36px, 4.4vw, 64px);
}
@media (max-width: 759px) {
  :root { --rise: 18px; }
}

/* ─── Основа ─── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
/* Текст только для экранного диктора */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: var(--green); text-decoration: none; transition: color var(--dur-hover); }
a:hover { color: var(--green-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: 0 0 auto; }
.i--sm { width: 13px; height: 13px; }
.wrap { max-width: 1320px; margin: 0 auto; }

/* Пока скрипт переводит страницу на казахский, русский текст не показываем.
   Класс ставит js/head.js и снимает сам через 2,5 с, если основной скрипт не загрузился. */
.i18n-wait body { visibility: hidden; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink-2); color: var(--light); font-weight: 700;
}
.skip:focus { top: 12px; color: var(--light); }

/* ─── Кнопки ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; text-align: center;
  transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover), transform 200ms ease;
}
.btn:active { transform: scale(.98); }
.btn--green { background: var(--green); color: #FFFFFF; }
.btn--green:hover { background: var(--green-hover); color: #FFFFFF; }
.btn--dark { background: var(--ink-2); color: var(--light); }
.btn--dark:hover { background: #2E2A1F; color: var(--light); }
.btn--yellow { background: var(--yellow); color: var(--ink-2); }
.btn--yellow:hover { background: #FFD21F; color: var(--ink-2); }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--light); }
.btn--ghost-light { background: transparent; color: var(--light); box-shadow: inset 0 0 0 1.5px var(--dark-line-2); }
.btn--ghost-light:hover { background: var(--light); color: var(--ink-2); }
.btn .i { width: 18px; height: 18px; }
.btn--lg { min-height: 58px; padding: 0 24px; font-size: 16px; }
.btn--lg:has(.btn__ico) { padding: 8px 8px 8px 24px; gap: 14px; }
.btn__ico {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #FFFFFF; color: var(--green);
  transition: transform var(--dur-ui) var(--ease-out);
}
.btn__ico .i { width: 19px; height: 19px; }
.btn__ico--yellow { background: var(--yellow); color: var(--ink-2); }
.btn--hdr { min-height: 42px; padding: 5px 5px 5px 18px; font-size: 14px; }
.btn--hdr .btn__ico { width: 32px; height: 32px; }
.btn--hdr .btn__ico .i { width: 16px; height: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__ico { transform: translateX(3px) rotate(-45deg); }
  .btn--hdr:hover .btn__ico { transform: translateX(2px) rotate(-45deg); }
}

/* ─── Верхняя строка ─── */
.util {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gut) 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted);
}
.util__right { display: flex; align-items: center; gap: 18px; }
.util__link, .util__tel {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink); font-weight: 500; white-space: nowrap;
}
.util__link:hover, .util__tel:hover { color: var(--green); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.lang {
  display: flex; padding: 2px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono);
}
.lang button {
  padding: 4px 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  transition: background-color var(--dur-hover), color var(--dur-hover);
}
.lang button[aria-pressed="true"] { background: var(--ink-2); color: var(--light); }
.lang--hdr { display: none; }
.lang--hdr button { padding: 6px 8px; }

/* ─── Шапка ─── */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background-color: rgba(250, 247, 240, 0);
  border-bottom: 1px solid transparent;
  transition: background-color 350ms, box-shadow 350ms, border-color 350ms;
}
.hdr.is-stuck {
  background-color: rgba(250, 247, 240, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 32px -24px rgba(23, 21, 15, .45);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px var(--gut);
}
/* На телефоне логотип может чуть ужаться, чтобы кнопки поместились; с 1040 px
   рядом стоит навигация — там логотип не сжимается, место уступают пункты меню. */
.logo { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.logo img { height: 46px; width: auto; max-width: 100%; }
.logo__mark { display: none; }
.nav { display: none; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 11px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background-color var(--dur-hover);
}
.nav a:hover { background-color: rgba(23, 21, 15, .06); color: var(--ink); }
.hdr__right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.menu-btn {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px;
  background: var(--ink-2); color: var(--light);
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
}
.bars { display: flex; flex-direction: column; gap: 4px; width: 16px; }
.bars i { display: block; height: 2px; background: var(--light); transition: transform 300ms var(--ease-out), opacity 200ms; }
.bars i:first-child { background: var(--yellow); }
.menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink-2); color: var(--light);
  padding: 18px var(--gut) 26px;
}
.menu__nav {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); column-gap: 24px;
}
.menu__nav a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid #33301F;
  color: var(--light); font-size: 22px; font-weight: 800; letter-spacing: -.02em;
}
.menu__nav a:hover { color: var(--yellow); }
.menu__n { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--dark-muted-2); }
.menu__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.menu__book, .menu__tel {
  display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px;
  font-weight: 700;
}
.menu__book { flex: 1 1 220px; background: var(--green); color: #FFFFFF; font-size: 16px; }
.menu__book:hover { background: var(--green-hover); color: #FFFFFF; }
.menu__tel { flex: 1 1 180px; font-family: var(--mono); font-size: 15px; color: var(--light); box-shadow: inset 0 0 0 1.5px var(--dark-line-2); }
.menu__tel:hover { color: var(--yellow); }

@media (min-width: 1040px) {
  .logo { flex: 0 0 auto; }
  .logo img { max-width: none; }
  .nav { display: flex; }
  .menu-btn { display: none; }
  .menu { display: none !important; }
  .logo__full { display: none; }
  .logo__mark { display: block; height: 44px; }
}
@media (min-width: 1240px) {
  .logo__full { display: block; }
  .logo__mark { display: none; }
}
/* 1040–1279: навигация плотнее, чтобы пункты и кнопка помещались в строку */
@media (min-width: 1040px) and (max-width: 1279px) {
  .hdr__in { gap: 12px; }
  .nav a { padding: 9px 8px; font-size: 13px; }
  /* Казахские подписи длиннее: «Байланыс» есть в меню подвала и в разделе заявки */
  html[lang="kk"] .nav a[href="#kontakty"] { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  html[lang="kk"] .hdr__in { gap: 12px; }
  html[lang="kk"] .nav a { padding: 9px 8px; font-size: 13px; }
}
@media (max-width: 759px) {
  .util { display: none; }
  .btn--hdr { display: none; }
  .lang--hdr { display: flex; }
  .logo img { height: 38px; }
  .menu-btn { width: 44px; height: 44px; padding: 0 13px; border-radius: 14px; }
  .menu-btn .bars { width: 100%; }
  .menu-btn__label { display: none; }
  /* снизу — место под мобильную панель «Записаться», чтобы фокус не прятался под ней */
  html { scroll-padding-top: 72px; scroll-padding-bottom: 96px; }
}

/* ─── Общие блоки секций ─── */
.sec { padding: var(--sec-gap) var(--gut) 0; }
.panel { margin: var(--sec-gap) var(--gut-panel) 0; border-radius: var(--r-panel); overflow: hidden; }
.panel__in { padding: var(--pad-panel-y) var(--pad-panel-x); }
.panel--dark { background: var(--ink-2); color: var(--light); }
.panel--cream { background: var(--cream); border: 1px solid var(--line); overflow: visible; }
.panel--yellow { background: var(--yellow); color: var(--ink-2); }
.hero + .panel { margin-top: clamp(12px, 1.4vw, 20px); }
.panel--form { margin-top: clamp(12px, 1.4vw, 20px); }
.sec + .panel--form { margin-top: var(--sec-gap); }

.stripes {
  height: 14px;
  background-image: linear-gradient(135deg, #F0C000 25%, #17150F 25%, #17150F 50%, #F0C000 50%, #F0C000 75%, #17150F 75%);
  background-size: 40px 40px;
}

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow__n { color: var(--ink); }
.eyebrow__line { width: 36px; height: 1px; background: var(--line-2); }
.eyebrow--dark { color: var(--dark-muted); }
.eyebrow--dark .eyebrow__n { color: var(--yellow); }
.eyebrow--dark .eyebrow__line { background: var(--dark-line-2); }
.eyebrow--yellow { color: #5A4A00; }
.eyebrow--yellow .eyebrow__n { color: var(--ink-2); }
.eyebrow--yellow .eyebrow__line { background: #A88A00; }

.h2 {
  margin: 18px 0 0;
  font-size: clamp(30px, 4.6vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em;
  text-wrap: balance; overflow-wrap: break-word;
}
.h2--18 { max-width: 18ch; }
.h2--20 { max-width: 20ch; }
.grid { display: grid; gap: var(--grid-gap); margin-top: var(--grid-top); }
.note { margin: 20px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* Прожектор на карточках: радиальный блик за курсором */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 192, 0, .16), transparent 62%);
  transition: opacity 400ms;
}
.spot > * { position: relative; }

/* ─── Hero ─── */
.hero { padding: clamp(28px, 4.4vw, 72px) var(--gut) 0; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.badge__stripe {
  width: 22px; height: 22px; border-radius: 50%;
  background-image: linear-gradient(135deg, #F0C000 25%, #17150F 25%, #17150F 50%, #F0C000 50%, #F0C000 75%, #17150F 75%);
  background-size: 10px 10px;
}
.h1 {
  margin: 22px 0 0;
  font-size: clamp(31px, 6.4vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.04em;
  hyphens: auto; overflow-wrap: break-word;
}
/* Каждая строка H1 лежит в своей маске; отступ снизу — чтобы не резались хвосты букв */
.h1__mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h1__line { display: block; }
.mark { position: relative; display: inline-block; isolation: isolate; }
.mark__bg {
  position: absolute; left: -.04em; right: -.06em; bottom: .1em; height: .3em;
  background: var(--yellow); z-index: -1; transform-origin: 0 50%; border-radius: .05em;
}
.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-top: clamp(26px, 3.4vw, 48px);
}
.hero__lead { margin: 0; max-width: 50ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.facts {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
}
.facts__item { flex: 1 1 150px; padding: 18px 20px; background: var(--cream); }
.facts__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts__v { margin-top: 6px; font-size: 16px; font-weight: 700; }
.facts__v--mono { font-family: var(--mono); }

.hero__photo {
  position: relative;
  margin-top: clamp(28px, 3.6vw, 56px);
  height: clamp(240px, 42vw, 600px);
  border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden;
  background: #DED7C6; border: 1px solid var(--line);
}
.hero__par { position: absolute; left: 0; right: 0; top: -60px; bottom: -60px; }
.hero__zoom {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 80px clamp(16px, 5vw, 80px);
  background: repeating-linear-gradient(135deg, #DED7C6 0 10px, #E4DDCC 10px 20px);
}
.hero__cap {
  position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px);
  padding: 8px 11px; border-radius: 12px;
  background: rgba(250, 247, 240, .9); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: #5B554A;
}

/* Иллюстрация вместо фото: баллон на испытании (без госномеров и людей) */
.art { width: 100%; height: 100%; max-width: 1100px; overflow: visible; }
.art__body { fill: var(--cream); stroke: var(--ink-2); stroke-width: 3; }
.art__seam { fill: none; stroke: var(--line-2); stroke-width: 2; }
.art__plate { fill: var(--ink-2); }
.art__pt { fill: var(--yellow); font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.art__ps { fill: var(--dark-muted); font-family: var(--mono); font-size: 16px; letter-spacing: .06em; }
.art__valve { fill: var(--ink-2); }
.art__pipe { fill: none; stroke: var(--ink-2); stroke-width: 8; stroke-linejoin: round; }
.art__gauge { fill: var(--cream); stroke: var(--ink-2); stroke-width: 3; }
.art__ticks path { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.art__needle { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; }
.art__hub { fill: var(--ink-2); }
.art__gt { fill: var(--muted); font-family: var(--mono); font-size: 16px; letter-spacing: .08em; }
.art__dim path { fill: none; stroke: var(--muted); stroke-width: 2; }
.art__dim .art__fill-ink { fill: var(--muted); stroke: none; }
.art__t { fill: var(--muted); font-family: var(--mono); font-size: 20px; letter-spacing: .04em; }
.art__call path { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.art__call circle { fill: var(--yellow); stroke: var(--ink-2); stroke-width: 2; }
.art__lbl { fill: var(--ink); font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 759px) {
  .hero__zoom { padding: 64px 8px 80px; }
  .art__t, .art__dim, .art__lbl, .art__call { display: none; }
}

/* ─── Зачем это нужно ─── */
.grid--why { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.tcard {
  display: flex; flex-direction: column;
  min-height: clamp(200px, 20vw, 280px); padding: clamp(22px, 2.2vw, 30px);
  background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 24px;
  transition: border-color 400ms, transform 600ms var(--ease-out);
}
.tcard__n { font-family: var(--mono); font-size: 13px; color: var(--yellow); }
.tcard__t { margin-top: auto; padding-top: 28px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.tcard__p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--dark-muted); text-wrap: pretty; }

/* ─── Услуги ─── */
.grid--svc { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.scard {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--cream); border: 1px solid var(--line); border-radius: 28px; color: var(--ink);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out), border-color 400ms;
}
.scard:hover { color: var(--ink); }
.scard::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 192, 0, .18), transparent 62%); }
.scard__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.scard__kind { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.circle-arr {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.circle-arr .i { width: 20px; height: 20px; }
.scard__t { margin: clamp(28px, 4vw, 56px) 0 0; font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.scard__p { margin: 12px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.scard__list { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-3); }
.scard__list li {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line-3);
  font-size: 15px; line-height: 1.4;
}
.scard__list li::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.scard__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 28px; }
.scard__pk { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.scard__pv { margin-top: 6px; white-space: nowrap; font-family: var(--mono); font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.scard__pv span { font-size: .62em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.scard__more { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }

/* ─── Как это проходит ─── */
.how__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.term { display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; background: var(--yellow); border-radius: 999px; }
.term__n {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink-2); color: var(--yellow);
  font-family: var(--mono); font-size: 24px; font-weight: 700;
}
.term__t { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.step { position: relative; display: flex; flex-direction: row; gap: 16px; }
.step__node {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background-color: var(--cream); border: 1.5px solid var(--line-2);
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--muted);
  transition: background-color var(--dur-ui), border-color var(--dur-ui), color var(--dur-ui);
}
.step__node.is-on { background-color: var(--ink-2); border-color: var(--ink-2); color: var(--yellow); }
.step__seg { position: absolute; background: var(--line-3); border-radius: 2px; overflow: hidden; }
.step__seg i { display: block; width: 100%; height: 100%; background: var(--ink-2); }
.step__seg--x { display: none; top: 23px; left: 60px; right: -12px; height: 2px; }
.step__seg--x i { transform-origin: 0 50%; transform: scaleX(0); }
.step__seg--y { left: 23px; top: 60px; bottom: -12px; width: 2px; }
.step__seg--y i { transform-origin: 50% 0; transform: scaleY(0); }
.step__body { padding-top: 11px; min-width: 0; }
.step__t { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.step__p { margin: 8px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { flex-direction: column; gap: 22px; }
  .step__seg--x { display: block; }
  .step__seg--y { display: none; }
  .step__body { padding-top: 0; }
}

/* ─── Документы ─── */
.grid--docs { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.dcard {
  display: flex; flex-direction: column; padding: 10px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 28px;
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.dcard__pic {
  position: relative; height: clamp(200px, 18vw, 250px); border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #DED7C6 0 10px, #E4DDCC 10px 20px);
}
.sheet {
  height: 78%; aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px 10px; background: #FFFFFF; border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(23, 21, 15, .45);
  transition: transform var(--dur-ui) var(--ease-out);
}
.sheet--r1 { transform: rotate(-3deg); }
.sheet--r2 { transform: rotate(2deg); }
.sheet--r3 { transform: rotate(-2deg); }
.sheet__lines { display: flex; flex-direction: column; gap: 5px; }
.sheet__lines i { display: block; height: 3px; border-radius: 2px; background: #EFEAE0; }
.sheet__lines i:first-child { height: 5px; width: 60%; background: var(--line-3); }
.sheet__lines i:nth-child(2) { width: 90%; }
.sheet__lines i:nth-child(3) { width: 80%; }
.sheet__lines i:nth-child(4) { width: 70%; }
.sheet__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.sheet__qr {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1.5px solid var(--ink-2); border-radius: 4px;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
}
.sheet__code { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.sheet__code--wide { width: 100%; text-align: center; }
.dcard__body { padding: 22px 16px 16px; }
.dcard__form { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--green); }
.dcard__t { margin: 10px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.dcard__p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ─── Проверить документы ─── */
.check {
  margin-top: var(--grid-gap);
  padding: clamp(24px, 3.4vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 3vw, 48px); align-items: center;
  background: var(--ink-2); color: var(--light); border-radius: 28px;
}
.check__t { margin: 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.check__p { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--dark-muted); }
.plate {
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: var(--cream); border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(240, 192, 0, 0); transition: box-shadow 200ms;
}
.plate:focus-within { box-shadow: 0 0 0 4px rgba(240, 192, 0, .5); }
.plate__in {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  padding: 12px 14px; color: var(--ink); outline: none;
  font-family: var(--mono); font-size: clamp(16px, 1.4vw, 18px); letter-spacing: .1em; text-transform: uppercase;
}
.plate__in::placeholder { color: #77705F; }
.plate__btn {
  flex: 0 0 auto; display: flex; align-items: center; min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--ink-2); color: var(--light);
  font-family: var(--sans); font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: background-color var(--dur-hover), transform 200ms;
}
.plate__btn:hover { background: #2E2A1F; }
.plate__btn:active { transform: scale(.98); }
.plate.is-shaking { animation: shake 420ms ease-out; }
@media (max-width: 400px) {
  .plate__btn { padding: 0 16px; font-size: 14px; }
  .plate__in { padding: 12px 10px; letter-spacing: .06em; }
}

/* ─── Где пройти ─── */
.where__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 20px 48px; align-items: end;
}
.where__p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--dark-muted); }
.chips {
  position: relative; display: flex; gap: 2px;
  margin-top: 36px; padding: 5px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 999px;
}
.chips::-webkit-scrollbar { display: none; }
.chips__ind {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: 999px; background: var(--yellow);
  transition: transform 550ms var(--ease-out), width 550ms var(--ease-out);
}
.chip {
  position: relative; z-index: 1; flex: 0 0 auto;
  padding: 11px 16px; border: 0; border-radius: 999px; background: transparent;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--light);
  transition: color 350ms;
}
.chip[aria-pressed="true"] { color: var(--ink-2); }
/* Без скрипта индикатора нет — активный чип подсвечиваем фоном */
.chips:not(.is-ready) .chip[aria-pressed="true"] { background: var(--yellow); }
@media (max-width: 759px) {
  .chips { flex-wrap: wrap; gap: 4px; width: auto; overflow: visible; border-radius: 22px; }
  .chips__ind { display: none; }
  .chip { transition: color 350ms, background-color 350ms; }
  .chips .chip[aria-pressed="true"] { background: var(--yellow); }
}
.city {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px 40px; align-items: end;
  margin-top: 16px; min-height: 190px; padding: clamp(24px, 2.6vw, 36px);
  background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 22px;
}
.city--other { border-style: dashed; border-color: var(--dark-line-2); background: transparent; }
.city__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.city__name { margin-top: 10px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.city__name--sm { font-size: clamp(24px, 2.4vw, 34px); }
.city__p { margin: 12px 0 0; max-width: 48ch; font-size: 15px; line-height: 1.6; color: var(--dark-muted); }
.city__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.city__act .btn { flex: 1 1 auto; }
@media (min-width: 1040px) {
  .city__act .btn { flex: 0 0 auto; }
}

/* ─── Доверие ─── */
.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--grid-gap); margin-top: var(--grid-top);
}
.trust__col { display: flex; flex-direction: column; gap: var(--grid-gap); min-width: 0; }
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
}
.stats__item { padding: clamp(22px, 2.4vw, 34px); background: var(--cream); }
.stats__v {
  font-family: var(--mono); font-size: clamp(34px, 4.2vw, 60px); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__l { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
@media (max-width: 380px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}
.norms {
  padding: clamp(22px, 2.4vw, 34px) 0;
  background: var(--cream); border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
}
.norms__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 clamp(22px, 2.4vw, 34px); }
.norms__t { margin: 0; font-size: 20px; font-weight: 800; }
.mq-toggle {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  transition: background-color var(--dur-hover), color var(--dur-hover);
}
.mq-toggle:hover { background: var(--ink-2); color: var(--yellow); }
.mq-toggle .i { width: 16px; height: 16px; }
.mq-toggle__play, .mq-toggle[aria-pressed="true"] .mq-toggle__pause { display: none; }
.mq-toggle[aria-pressed="true"] .mq-toggle__play { display: block; }
.norms__p { margin: 18px clamp(22px, 2.4vw, 34px) 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* Бегущая строка нормативов: две одинаковые половины, трек сдвигается на −50% */
.mq {
  --mq-dur: 60s;
  margin-top: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq-track { display: flex; width: max-content; animation: mq var(--mq-dur) linear infinite; }
.mq-half { display: flex; gap: 8px; padding-right: 8px; }
.mq-half span {
  flex: 0 0 auto; padding: 9px 13px; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
}
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }

.cert {
  flex: 1 1 auto; min-height: 320px; padding: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #DED7C6 0 10px, #E4DDCC 10px 20px);
}
.cert__sheet {
  width: min(78%, 330px); padding: 24px 22px 20px;
  background: #FFFFFF; border-radius: 8px;
  box-shadow: 0 22px 50px -22px rgba(23, 21, 15, .5);
  transform: rotate(-2deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.cert__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cert__no { margin-top: 6px; font-family: var(--mono); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.cert__dl { margin: 16px 0 0; border-top: 1px solid var(--line-3); }
.cert__dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 13px; }
.cert__dl dt { color: var(--muted); }
.cert__dl dd { margin: 0; font-weight: 700; text-align: right; }
.cert__by { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 400px) {
  .cert { padding: 16px; min-height: 0; }
  .cert__sheet { width: 100%; padding: 20px 16px 16px; }
  .cert__dl div { flex-direction: column; gap: 2px; }
  .cert__dl dd { text-align: left; }
}
.indep {
  display: flex; gap: 16px; align-items: center; padding: 16px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 24px;
}
.indep__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 18px;
  background: var(--ink-2); color: var(--yellow);
  font-size: 36px; font-weight: 800;
}
.indep__t { font-size: 17px; font-weight: 800; }
.indep__p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* ─── Партнёрам и приложение ─── */
.panel__in--partners { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(16px, 2vw, 24px); padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); }
.partners__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.partners__intro { flex: 1 1 420px; }
.h2--partners { margin-top: 16px; max-width: 22ch; font-size: clamp(28px, 4vw, 56px); line-height: 1.04; }
.partners__p { margin: 14px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: #3A3204; }

.app {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin: clamp(32px, 4vw, 56px) calc(-1 * clamp(4px, 2.6vw, 44px)) 0;
  padding: clamp(24px, 3.6vw, 56px);
  background: var(--ink-2); color: var(--light); border-radius: clamp(20px, 2.4vw, 32px);
}
@media (min-width: 1040px) {
  .app { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}
/* В одну колонку телефон-иллюстрация идёт сразу после вступления, а не
   после восьми карточек: текстовая колонка «раскрывается» в сетку. */
@media (max-width: 1039px) {
  .app { row-gap: 0; }
  .app__text { display: contents; }
  .app__k { justify-self: start; }
  .app__visual { order: 1; margin-top: 8px; }
  .feats, .app__note { order: 2; }
}
@media (min-width: 760px) and (max-width: 1039px) {
  .app .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.app__k {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border: 1px solid var(--dark-line-2); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow);
}
.app__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(240, 192, 0, .18); }
.app__h { margin: 18px 0 0; max-width: 22ch; font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.app__lead { margin: 14px 0 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--dark-muted); text-wrap: pretty; }
.feats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 10px; margin: 28px 0 0; padding: 0; list-style: none;
}
.feat {
  display: flex; gap: 14px; padding: 16px 16px 16px 14px;
  background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 18px;
  transition: border-color 400ms, transform 500ms var(--ease-out);
}
.feat__n { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--yellow); padding-top: 2px; }
.feat__t { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.feat__p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--dark-muted); }
.app__note {
  margin: 20px 0 0; padding: 14px 16px; border-left: 3px solid var(--yellow);
  background: rgba(240, 192, 0, .06); border-radius: 0 12px 12px 0;
  font-size: 14px; line-height: 1.6; color: var(--dark-muted);
}

/* Телефон — иллюстрация на HTML/CSS, данные вымышленные */
.app__visual {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 24px 0 8px;
}
.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 612;
  padding: 10px; border-radius: 46px;
  background: #0B0A06; box-shadow: 0 0 0 1.5px #3A362B, 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.phone::before {
  content: ''; position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  border-radius: 999px; background: #0B0A06; z-index: 2;
}
.phone__screen {
  height: 100%; overflow: hidden; border-radius: 36px;
  background: var(--cream); color: var(--ink);
  display: flex; flex-direction: column;
  font-size: 11px; line-height: 1.35;
}
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 0; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.ph-status__r { display: flex; gap: 3px; align-items: flex-end; }
.ph-status__r i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.ph-status__r i:nth-child(1) { height: 5px; }
.ph-status__r i:nth-child(2) { height: 7px; }
.ph-status__r i:nth-child(3) { height: 9px; }
.ph-top { padding: 22px 16px 10px; }
.ph-top__k { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ph-top__t { margin-top: 4px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ph-prog { margin-top: 10px; height: 4px; border-radius: 4px; background: var(--line-3); overflow: hidden; }
.ph-prog i { display: block; height: 100%; width: 47%; background: var(--green); border-radius: 4px; }
.ph-doc {
  display: flex; gap: 10px; align-items: center; margin: 4px 12px 8px; padding: 10px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px;
}
.ph-doc__card {
  position: relative; flex: 0 0 auto; display: flex; gap: 5px; align-items: center;
  width: 64px; height: 42px; padding: 5px; border-radius: 6px;
  background: linear-gradient(135deg, #DCE9E2, #C9DDD2); overflow: hidden;
}
.ph-doc__card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--yellow); box-shadow: 0 0 8px 1px rgba(240, 192, 0, .9);
}
.ph-doc__face { flex: 0 0 auto; width: 16px; height: 22px; border-radius: 3px; background: #9DB8AA; }
.ph-doc__lines { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.ph-doc__lines i { display: block; height: 2px; background: #9DB8AA; border-radius: 1px; }
.ph-doc__lines i:nth-child(2) { width: 80%; }
.ph-doc__lines i:nth-child(3) { width: 60%; }
.ph-doc__t { font-size: 12px; font-weight: 800; }
.ph-doc__s { margin-top: 2px; font-family: var(--mono); font-size: 9px; color: var(--green); }
.ph-fields { margin: 0 12px; padding: 0; list-style: none; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; }
.ph-fields li {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 14px; gap: 6px; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid var(--line-3);
}
.ph-fields li:last-child { border-bottom: 0; }
.ph-f__k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ph-f__v { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-f__ok { width: 14px; height: 14px; color: var(--green); }
.ph-photos { margin: 8px 12px 0; padding: 8px 10px 10px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; }
.ph-photos__k { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ph-photos__k b { color: var(--green); font-weight: 700; }
.ph-photos__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.ph-photos__row span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 7px; background: #E6EFEA; color: #7FA592; }
.ph-photos__row .i { width: 70%; height: 70%; }
.ph-btn {
  margin: auto 12px 18px; padding: 11px; border-radius: 999px;
  background: var(--green); color: #FFFFFF; text-align: center; font-size: 12px; font-weight: 700;
}
.float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  background: var(--cream); color: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  font-size: 12px; line-height: 1.3; white-space: nowrap;
}
.float b { display: block; font-size: 12.5px; }
.float small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.float__ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #FFFFFF; }
.float__ico .i { width: 16px; height: 16px; }
.float--a { bottom: 104px; right: calc(50% + 150px - 90px); }
.float--b { bottom: 25%; left: calc(50% + 150px - 24px); flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 14px; min-width: 150px; background: var(--yellow); color: var(--ink-2); }
.float__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.float__row { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }
.float__row b { font-family: var(--mono); font-size: 12.5px; }
.float--c { top: 0; left: calc(50% + 150px - 90px); padding: 9px 14px; background: var(--dark-card); color: var(--light); box-shadow: 0 0 0 1px var(--dark-line), 0 18px 40px -18px rgba(0, 0, 0, .6); }
.float--c .i { width: 16px; height: 16px; color: var(--yellow); }
.app__demo { margin: 18px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted-2); }
/* Плашки вокруг телефона — только когда рядом есть место: в одну колонку
   (760–1039) и на широком экране. На телефоне и в двух узких колонках
   (1040–1439) они стоят под иллюстрацией и не закрывают ни её, ни текст. */
@media (max-width: 759px), (min-width: 1040px) and (max-width: 1439px) {
  .float { position: static; margin-top: 10px; font-size: 11px; }
  .float--b { min-width: 0; width: min(300px, 78vw); }
  .float--c { display: none; }
}

/* ─── Вопросы и ответы ─── */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
@media (min-width: 1040px) {
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .faq__head { position: sticky; top: 110px; }
}
.faq__p { margin: 16px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.faq__tel { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.qa { background: var(--cream); border: 1px solid var(--line); border-radius: 22px; transition: border-color var(--dur-hover); }
.qa[open] { border-color: var(--line-2); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 20px 20px 24px; list-style: none; cursor: pointer;
  font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--paper);
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-hover), color var(--dur-hover);
}
.qa__ico .i { width: 18px; height: 18px; }
.qa[open] .qa__ico { transform: rotate(45deg); background: var(--ink-2); color: var(--yellow); }
.qa__a { padding: 0 24px 22px; }
.qa__a p { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.qa[open] .qa__a { animation: qa-in 450ms var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* ─── Заявка ─── */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px);
}
.form-lead { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.contacts { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--line); }
.contacts__row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink);
}
a.contacts__row:hover { color: var(--ink); }
.contacts__k { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contacts__v { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; text-align: right; }
.contacts__v--mono { font-family: var(--mono); }
.contacts__arr { width: 18px; height: 18px; color: var(--green); transition: transform var(--dur-ui) var(--ease-out); }

.fcard {
  padding: clamp(20px, 2.6vw, 36px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px;
  min-width: 0;
}
.fmode {
  display: flex; gap: 2px; padding: 4px; margin-bottom: 20px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
}
.fmode button {
  flex: 1 1 0; min-height: 42px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  transition: background-color var(--dur-hover), color var(--dur-hover);
}
.fmode button[aria-pressed="true"] { background: var(--ink-2); color: var(--light); }
.fstate { display: flex; flex-direction: column; gap: 16px; }
.fstate--center { align-items: center; justify-content: center; min-height: 420px; text-align: center; }
.fstate--end { gap: 18px; min-height: 420px; justify-content: center; outline: none; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__l { font-size: 13px; font-weight: 700; }
.field__opt { font-weight: 500; color: var(--muted); }
.field__in {
  width: 100%; min-width: 0; padding: 15px 16px;
  background: #FFFFFF; border: 1px solid #A89F8A; border-radius: 14px;
  color: var(--ink); font-family: var(--sans); font-size: 16px; outline: none;
  transition: border-color 200ms, box-shadow 200ms;
  -webkit-appearance: none; appearance: none;
}
.field__in:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(31, 122, 77, .16); }
.field__in::placeholder { color: #77705F; }
.field__in--mono { font-family: var(--mono); }
.field__in--plate { letter-spacing: .06em; text-transform: uppercase; }
.field__in--area { resize: vertical; min-height: 96px; line-height: 1.5; }
.field__in.is-bad { border-color: var(--red); }
select.field__in {
  padding-right: 38px; padding-left: 12px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.agree { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); flex: 0 0 auto; }
.agree span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ferr {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  background: #FDECEC; border: 1px solid #E7B4B0; border-radius: 14px;
}
.ferr__ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #FFFFFF;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.ferr__t { font-size: 14px; line-height: 1.5; color: #7A1C16; }
.ferr__t a { color: #7A1C16; font-weight: 700; text-decoration: underline; }
.ferr.is-shaking { animation: shake 420ms ease-out; }
@keyframes shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.btn--submit { justify-content: space-between; min-height: 60px; padding: 8px 8px 8px 24px; font-size: 16px; gap: 14px; white-space: normal; text-align: left; }
.btn--submit .btn__ico { width: 44px; height: 44px; }
.btn--submit:active { transform: scale(.985); }
.fhint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fhint a { font-weight: 700; }

.spinner { width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fstate__t { font-size: 20px; font-weight: 800; }
.fstate__h { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.fstate__p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.fstate--center .fstate__p { max-width: 34ch; font-size: 14px; }
.fstate__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fstate__btns .btn { min-height: 54px; padding: 0 24px; }
.okcircle, .badcircle {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; color: #FFFFFF;
}
.okcircle { background: var(--green); }
.okcircle__mark { width: 30px; height: 30px; }
.badcircle { background: var(--red); font-size: 28px; font-weight: 800; }
.ticket { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ticket__row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--cream); font-size: 14px; }
.ticket__k { color: var(--muted); }
.ticket__v { font-weight: 700; text-align: right; }
.ticket__v--mono { font-family: var(--mono); }
#f-again { min-height: 54px; }

/* ─── Подвал ─── */
.foot {
  margin: clamp(12px, 1.4vw, 20px) var(--gut-panel) var(--gut-panel);
  background: var(--ink-2); color: var(--dark-muted);
  border-radius: var(--r-panel); overflow: hidden;
}
.foot__in { padding: clamp(40px, 5vw, 72px) var(--pad-panel-x) 28px; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.foot__logo { height: 52px; width: auto; margin-left: -7px; }
.foot__name { margin-top: 14px; font-size: 14px; font-weight: 800; color: var(--light); }
.foot__req { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--dark-muted-2); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted-2); }
.foot__col a { font-size: 14px; color: var(--dark-muted); }
.foot__col a:hover { color: var(--yellow); }
.foot__col a.foot__tel { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--light); }
.foot__col a.foot__tel:hover { color: var(--yellow); }
/* С колонкой «Документы» в подвале пять блоков: на широком экране первая
   колонка шире — в ней логотип шириной 285 px. */
@media (min-width: 1240px) {
  .foot__grid { grid-template-columns: minmax(290px, 1.2fr) repeat(4, minmax(0, 1fr)); }
}
.foot__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--dark-line); font-family: var(--mono); font-size: 11px; color: var(--dark-muted-2); }

/* ─── Мобильная панель «Записаться» ─── */
.mbar { display: none; }
@media (max-width: 759px) {
  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(120%); visibility: hidden; pointer-events: none;
    transition: transform 500ms var(--ease-out), visibility 0s linear 500ms;
  }
  .mbar.is-shown { transform: translateY(0); visibility: visible; transition: transform 500ms var(--ease-out), visibility 0s; }
  /* Открыто меню — панель прячем: в меню те же кнопки, а панель закрывала бы телефон внизу меню */
  .menu-open .mbar, .menu-open .mbar.is-shown { transform: translateY(120%); visibility: hidden; transition: transform 300ms var(--ease-out), visibility 0s linear 300ms; }
  .mbar__in {
    display: flex; gap: 8px; padding: 8px;
    background: rgba(250, 247, 240, .88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 14px 40px -14px rgba(23, 21, 15, .4);
    pointer-events: auto;
  }
  .mbar__call {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 14px; color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .mbar__call .i { width: 20px; height: 20px; }
  .mbar__book {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    height: 52px; border-radius: 14px; background: var(--green); color: #FFFFFF;
    font-size: 16px; font-weight: 700; text-align: center;
  }
  .mbar__book:hover { color: #FFFFFF; }
  .foot { margin-bottom: 88px; }
}

/* ─── Hover карточек — только мышь ─── */
@media (hover: hover) and (pointer: fine) {
  .spot:hover::before { opacity: 1; }
  .tcard:hover { border-color: #5C5438; transform: translateY(-4px); }
  .scard:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -34px rgba(23, 21, 15, .4); border-color: #C9BFA8; }
  .scard:hover .circle-arr { transform: rotate(-45deg); background: var(--green); color: #FFFFFF; }
  .dcard:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -34px rgba(23, 21, 15, .4); }
  .dcard:hover .sheet { transform: rotate(0deg) translateY(-8px); }
  .cert:hover .cert__sheet { transform: rotate(0deg) translateY(-8px); }
  .feat:hover { border-color: #5C5438; transform: translateY(-4px); }
  a.contacts__row:hover .contacts__arr { transform: translateX(4px); }
  .qa summary:hover .qa__ico { background: var(--line-3); }
  .qa[open] summary:hover .qa__ico { background: var(--ink-2); }
}

/* ─── Появление (прогрессивное улучшение: класс .motion ставит js/head.js) ───
   Скрыто только то, что ещё не показано (:not(.is-in)). Переход висит на классе
   .rv-run, который скрипт снимает после появления, — иначе он перебивал бы
   собственные hover-переходы карточек. */
.motion [data-reveal]:not(.is-in),
.motion [data-stagger] > :not(.is-in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }
.motion [data-reveal="line"]:not(.is-in) { opacity: 1; transform: translate3d(0, 105%, 0); }
.motion .rv-run {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal="line"].rv-run { transition-duration: var(--dur-hero); }
/* Фото hero: маска и зум, маркер «на руках» — отдельные keyframes */
.motion [data-reveal="photo"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(10% 5% 0 5% round 32px); }
.motion [data-reveal="photo"].is-in { animation: gs-photo 1300ms var(--ease-out) var(--d, 0ms) backwards; }
.motion [data-reveal="zoom"]:not(.is-in) { opacity: 1; transform: scale(1.14); }
.motion [data-reveal="zoom"].is-in { animation: gs-zoom 1800ms var(--ease-out) var(--d, 0ms) backwards; }
.motion [data-reveal="mark"]:not(.is-in) { opacity: 1; transform: scaleX(0); }
.motion [data-reveal="mark"].is-in { animation: gs-mark 800ms var(--ease-out) var(--d, 0ms) backwards; }
.motion [data-reveal="photo"].rv-run, .motion [data-reveal="zoom"].rv-run, .motion [data-reveal="mark"].rv-run { transition: none; }
@keyframes gs-photo { from { clip-path: inset(10% 5% 0 5% round 32px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes gs-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes gs-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── Меньше движения ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion [data-reveal], .motion [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; clip-path: none !important; }
  .mq-track { animation: none; width: auto; }
  .mq-half { flex-wrap: wrap; padding: 0 clamp(22px, 2.4vw, 34px); }
  .mq-half + .mq-half { display: none; }
  .mq { -webkit-mask-image: none; mask-image: none; }
  .chips__ind { transition: none; }
  .qa[open] .qa__a { animation: none; }
  .spinner { animation-duration: 2.4s; }
  .tcard, .scard, .dcard, .feat, .sheet, .cert__sheet, .circle-arr, .btn__ico, .contacts__arr, .qa__ico, .bars i, .mbar, .mbar.is-shown { transition-property: background-color, border-color, color, box-shadow, opacity; }
}

/* ─── Внутренние страницы: политика и 404 ─── */
.hdr--simple .hdr__right .lang { display: flex; }
.doc-page { padding: clamp(28px, 4.4vw, 72px) var(--gut) 0; }
.doc-page__in { max-width: 860px; margin: 0 auto; }
.doc-page__h1 { margin: 18px 0 0; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.doc-page__meta { margin: 14px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.doc-card {
  margin-top: clamp(28px, 3.6vw, 48px); padding: clamp(22px, 3.4vw, 52px);
  background: var(--cream); border: 1px solid var(--line); border-radius: 28px;
}
.doc-card h2 { margin: 32px 0 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.doc-card h2:first-child { margin-top: 0; }
.doc-card p, .doc-card li { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.doc-card p { margin: 10px 0 0; }
.doc-card ul { margin: 10px 0 0; padding-left: 20px; }
.doc-card li + li { margin-top: 4px; }
.doc-card a { font-weight: 700; }
.nf { padding: clamp(40px, 8vw, 120px) var(--gut) 0; }
.nf__in { max-width: 1320px; margin: 0 auto; }
.nf__code { font-family: var(--mono); font-size: clamp(72px, 16vw, 220px); font-weight: 700; line-height: .9; letter-spacing: -.06em; }
.nf__h { margin: 18px 0 0; font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.nf__p { margin: 14px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.nf__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-simple .foot { margin-top: var(--sec-gap); }
@media (max-width: 759px) {
  .page-simple .foot { margin-bottom: var(--gut-panel); }
  .hdr--simple .btn--hdr { display: none; }
}
.hdr--simple .logo__full { display: block; }
.hdr--simple .logo__mark { display: none; }

/* ─── Правовые документы (privacy, consent, offer, terms, complaints,
   impartiality, app-privacy) ───
   В странице две статьи — на русском и на казахском. Видна статья на языке
   сайта: язык ставят js/head.js и js/site.js в html[lang]. Без скрипта — русская. */
.legal[lang="kk"] { display: none; }
html[lang="kk"] .legal[lang="kk"] { display: block; }
html[lang="kk"] .legal[lang="ru"] { display: none; }
.legal__h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.08; hyphens: manual; }

/* Содержание */
.toc {
  margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.6vw, 32px) clamp(22px, 3.4vw, 52px);
  border: 1px solid var(--line); border-radius: 28px;
}
.toc__h { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc__list, .toc__sub { list-style: none; margin: 0; padding: 0; }
.toc__list { margin-top: 14px; }
.toc__list > li { break-inside: avoid; }
.toc__list > li + li { margin-top: 8px; }
.toc__sub { margin: 8px 0 0 16px; }
.toc__sub li + li { margin-top: 6px; }
.toc a { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: break-word; }
.toc__sub a { font-size: 14px; font-weight: 500; color: var(--text-2); }
.toc a:hover { color: var(--green); }
@media (min-width: 760px) {
  .toc__list:not(.toc__list--deep) { columns: 2; column-gap: 40px; }
}

/* Текст документа */
.legal__body { overflow-wrap: break-word; }
.legal__body h2, .legal__body h3 { scroll-margin-top: 16px; }
.legal__body h2 { margin-top: 40px; }
.legal__body > h2:first-child, .legal__body > :first-child { margin-top: 0; }
.legal__body h3 { margin: 26px 0 0; font-size: 17px; font-weight: 800; line-height: 1.35; }
/* Строки для заполнения («____») без пробелов — переносим, чтобы не было прокрутки вбок */
.legal__body p, .legal__body li, .legal__body td { overflow-wrap: anywhere; }
.legal__num { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.legal__note { font-size: 15px; }
.legal__gap { height: 12px; }
.legal__body strong { color: var(--ink); font-weight: 700; }
.legal__body .nowrap { white-space: nowrap; }
.legal__ul { margin: 10px 0 0; padding-left: 22px; }
.legal__ul li + li, .legal__ol li + li { margin-top: 6px; }
.legal__ol { list-style: none; margin: 10px 0 0; padding: 0; }
.legal__ol li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 4px; }
.legal__n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Таблицы; на телефоне строка превращается в карточку с подписями полей */
.legal__table { margin-top: 16px; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal__table th, .legal__table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal__table th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-2); }
.legal__table td { color: var(--text-2); }
.legal__table td:first-child { font-weight: 700; color: var(--ink); }
@media screen and (max-width: 759px) {
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal__table table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal__table td { padding: 2px 0; border: 0; }
  .legal__table td + td::before {
    content: attr(data-label); display: block; margin-top: 6px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .legal__ol li { grid-template-columns: 2.2em minmax(0, 1fr); }
  .legal__body p, .legal__body li { font-size: 15.5px; }
}

/* Печать: только текст документа на выбранном языке */
@media print {
  @page { margin: 16mm 16mm 18mm; }
  html { scroll-behavior: auto; }
  body.page-legal { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .page-legal .hdr, .page-legal .foot, .page-legal .skip, .page-legal .toc { display: none !important; }
  .page-legal .doc-page { padding: 0; }
  .page-legal .doc-page__in { max-width: none; }
  .page-legal .eyebrow { color: #555555; }
  .page-legal .legal__h1 { font-size: 20pt; letter-spacing: -.01em; }
  .page-legal .doc-page__meta { color: #333333; }
  .page-legal .legal__body { margin-top: 14pt; padding: 0; background: none; border: 0; border-radius: 0; }
  .page-legal .legal__body p, .page-legal .legal__body li, .page-legal .legal__body td { font-size: 10.5pt; line-height: 1.5; color: #000000; orphans: 3; widows: 3; }
  .page-legal .legal__body h2 { font-size: 13pt; margin-top: 18pt; break-after: avoid; page-break-after: avoid; }
  .page-legal .legal__body h3 { font-size: 11pt; break-after: avoid; page-break-after: avoid; }
  .page-legal .legal__body a { color: #000000; font-weight: inherit; }
  .page-legal .legal__table tr { break-inside: avoid; page-break-inside: avoid; }
  .page-legal .legal__table th, .page-legal .legal__table td { border-color: #999999; }
}