/* ═══════════════════════════════════════════════════════════════════════
   BASE.CSS — общая система сайта Job Huntly.
   Подключается ПЕРВЫМ на каждой странице. Здесь и только здесь живут:
   шрифты, токены, сброс, типографика, кнопки, ссылки, шапка, подвал.

   Правило одно: если элемент встречается больше чем на одной странице —
   он описан здесь. Страничные файлы (landing.css, docs.css) описывают
   только то, что бывает на одной странице, и НИКОГДА не переопределяют
   кнопку, ссылку или заголовок. Раньше всё это лежало тремя копиями в
   трёх файлах, и три копии успели разойтись: у документов подключался
   IBM Plex, а шрифт в стилях стоял Inter, которого нет нигде, — весь
   сайт много месяцев набирался системным Arial.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── ШРИФТЫ ───────────────────────────
   Свои файлы, не Google Fonts. Ссылка на fonts.googleapis.com отправляет IP
   каждого посетителя в Google, а политика конфиденциальности обещает, что
   сторонних трекеров на сайте нет.

   ═══ ПОЧЕМУ ИМЕННО ЭТИ ШРИФТЫ ═══
   Дизайн сайта был сделан на Inter и JetBrains Mono — они стояли в стилях с
   самого начала. Но ни один из них никуда не подключался, поэтому браузер
   молча рисовал системным Arial. Теперь они подключены по-настоящему,
   включая начертание 800, ради которого и писались крупные заголовки.

   Мокап расширения набран IBM Plex — тем же шрифтом, что и само расширение.
   Это не разнобой, а разделение: сайт — сайт, мокап — продукт.

   IBM Plex стоит вторым в стеке как запас на случай, если основной файл не
   доехал. Стрелки ← → ↗ и галочку ✓, которых в подмножествах Inter и
   JetBrains Mono нет, отдаёт отдельный кусок symbols.woff2 — см. ниже.
   Покрытие всей стопки проверяется прогоном (ужать-шрифты --проверить).

   ═══ ПОЧЕМУ ФАЙЛЫ *-rub-*, А НЕ *-latin-ext-* ═══
   Знак ₽ (U+20BD) лежит в расширенной латинице. Fontsource отдаёт её целым
   куском на 35 КБ, и браузер тянул этот кусок КАЖДОГО начертания ради
   одного рубля в ценах — 162 КБ на семь начертаний. Вырезали из тех же
   файлов ровно ₽: семь файлов по 800 байт, 5 КБ вместо 162. Диапазон в
   unicode-range сужен до U+20BD честно, под содержимое файла: если в текст
   попадёт другой знак расширенной латиницы, он не станет пустым квадратом,
   а уйдёт в запасную гарнитуру, и прогон покрытия про него скажет. */
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:400;
             src:url('../fonts/inter-latin-400-normal.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:'Inter'; font-style:normal; font-display:swap; font-weight:400;
             src:url('../fonts/inter-rub-400-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:400;
             src:url('../fonts/inter-cyrillic-400-normal.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-display:swap; font-weight:400;
             src:url('../fonts/inter-cyrillic-ext-400-normal.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-display:swap; font-weight:600;
             src:url('../fonts/inter-latin-600-normal.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:'Inter'; font-style:normal; font-display:swap; font-weight:600;
             src:url('../fonts/inter-rub-600-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:600;
             src:url('../fonts/inter-cyrillic-600-normal.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-display:swap; font-weight:600;
             src:url('../fonts/inter-cyrillic-ext-600-normal.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-display:swap; font-weight:700;
             src:url('../fonts/inter-latin-700-normal.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:'Inter'; font-style:normal; font-display:swap; font-weight:700;
             src:url('../fonts/inter-rub-700-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:700;
             src:url('../fonts/inter-cyrillic-700-normal.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-display:swap; font-weight:700;
             src:url('../fonts/inter-cyrillic-ext-700-normal.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-display:swap; font-weight:800;
             src:url('../fonts/inter-latin-800-normal.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:'Inter'; font-style:normal; font-display:swap; font-weight:800;
             src:url('../fonts/inter-rub-800-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:800;
             src:url('../fonts/inter-cyrillic-800-normal.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-display:swap; font-weight:800;
             src:url('../fonts/inter-cyrillic-ext-800-normal.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:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:400;
             src:url('../fonts/jetbrains-mono-latin-400-normal.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-display:swap; font-weight:400;
             src:url('../fonts/jetbrains-mono-rub-400-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:400;
             src:url('../fonts/jetbrains-mono-cyrillic-400-normal.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-display:swap; font-weight:400;
             src:url('../fonts/jetbrains-mono-cyrillic-ext-400-normal.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:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:500;
             src:url('../fonts/jetbrains-mono-latin-500-normal.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-display:swap; font-weight:500;
             src:url('../fonts/jetbrains-mono-rub-500-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:500;
             src:url('../fonts/jetbrains-mono-cyrillic-500-normal.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-display:swap; font-weight:500;
             src:url('../fonts/jetbrains-mono-cyrillic-ext-500-normal.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:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:700;
             src:url('../fonts/jetbrains-mono-latin-700-normal.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-display:swap; font-weight:700;
             src:url('../fonts/jetbrains-mono-rub-700-normal.woff2') format('woff2');
             unicode-range:U+20BD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-display:swap; font-weight:700;
             src:url('../fonts/jetbrains-mono-cyrillic-700-normal.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-display:swap; font-weight:700;
             src:url('../fonts/jetbrains-mono-cyrillic-ext-700-normal.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:'IBM Plex Sans'; src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
/* Начертания 600 (Sans) и 700 (Mono) нужны мокапу: ровно их использует само
   расширение — «Job Huntly» в шапке и названия этапов в гайде. Без файлов
   браузер утолщал бы имеющиеся, и в мокапе стояли бы поддельные жирные. */
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }

/* Стрелки ← → ↗ и галочка ✓ (стрелка ↑ есть в самих Inter и JetBrains
   Mono, её в диапазон не берём — иначе она сменила бы рисунок). В подмножествах Inter и JetBrains Mono их
   нет: fontsource режет по латинице и кириллице, символьного куска там не
   бывает. Раньше их рисовал запасной IBM Plex — то есть ради одной стрелки
   «← На главную» каждая страница тянула целый файл гарнитуры. Теперь тот
   же глиф выделен в кусок на 1,4 КБ и подключён ПОД ИМЕНАМИ обеих основных
   гарнитур: по unicode-range браузер берёт его и не меняет шрифт посреди
   строки. Файл собран из IBM Plex — рисунок стрелки тот же, что был. */
@font-face { font-family:'Inter'; font-weight:100 900; font-style:normal; font-display:swap;
             src:url('../fonts/symbols.woff2') format('woff2');
             unicode-range:U+2190,U+2192,U+2197,U+2713; }
@font-face { font-family:'JetBrains Mono'; font-weight:100 900; font-style:normal; font-display:swap;
             src:url('../fonts/symbols.woff2') format('woff2');
             unicode-range:U+2190,U+2192,U+2197,U+2713; }

:root {
  /* ─── ЦВЕТ ───
     Шесть значений на весь сайт. Было четырнадцать имён на эти же шесть
     цветов (--bg и --bg-alt, --screen, --screen-2 и --paper, --text,
     --text-body, --screen-text и --screen-body — попарно одинаковые),
     и по именам нельзя было понять, чем они должны отличаться. */
  --bg:            #232D39;   /* фон страницы */
  --bg-raised:     #2D3743;   /* карточка, панель, «экран» поверх фона */
  --bg-lift:       #3A4654;   /* верх градиента у приподнятых плиток */
  --line:          rgba(255,255,255,.12);
  --line-strong:   rgba(255,255,255,.18);
  --ink:           #FFFFFF;
  --ink-dim:       rgba(255,255,255,.62);
  /* --ink-faint только для НЕтекстовых мелочей: точек, маркеров, рамок.
     Текстом его ставить нельзя — 3,3:1 при норме 4,5:1, обход это ловит. */
  --ink-faint:     rgba(255,255,255,.42);
  --accent:        #E1FF4D;
  --accent-ink:    #232D39;   /* текст НА акценте */
  --accent-soft:   rgba(225,255,77,.14);
  --accent-line:   rgba(225,255,77,.30);

  /* ─── ТИПОГРАФИКА ───
     Шкала кеглей закрытая: всё, что не из этого ряда, — ошибка.
     Проверяется прогоном (проверка-лендинга.js). */
  --sans: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  /* Шрифт продукта — только внутри мокапа. */
  --sans-app: 'IBM Plex Sans', system-ui, Arial, sans-serif;
  --mono-app: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-micro: 10px;   /* мелкий моно-капс: подписи в мокапе */
  --fs-xs:    11px;   /* надзаголовок, метки */
  --fs-sm:    12px;   /* мелкий текст, подвал */
  --fs-md:    13px;   /* текст интерфейса, кнопки, пункты списков */
  --fs-base:  15px;   /* основной текст карточек и документов */
  --fs-body:  16px;   /* абзац под заголовком раздела */
  --fs-lead:  17px;   /* подзаголовок героя */
  --fs-h4:    20px;   /* заголовок карточки */
  --fs-h3:    24px;   /* заголовок блока */
  --fs-num:   34px;   /* крупная цифра: цена, счётчик */
  /* Крупные кегли — те же, что были в исходном лендинге, вместе с их
     переносами по ширинам ниже. Я однажды свела их к одной формуле
     clamp(40px,7vw,88px) — и на планшете заголовок с 76px упал до 54px,
     а на телефоне подзаголовок раздела с 47px до 32px. Числа были «из
     шкалы», а страница стала бледной. */
  --fs-display: clamp(54px, 7.4vw, 96px);
  --fs-h2: clamp(38px, 4.8vw, 60px);

  /* ─── РИТМ ───
     Один ряд отступов на весь сайт. Всё вертикальное расстояние берётся
     отсюда: раньше в трёх файлах встречалось 27 разных значений, включая
     5px, 7px, 9px, 11px и 13px — ни одно из них ничем не отличалось от
     соседнего, но вместе они и давали ощущение, что всё вразнобой. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 112px;

  /* ─── ГЕОМЕТРИЯ ─── */
  --r-xs: 9px; --r-sm: 12px; --r-md: 18px; --r-lg: 22px; --r-pill: 999px;
  --control-h: 46px;      /* кнопка с текстом */
  --control-h-sm: 34px;   /* плотный ряд: кнопки внутри мокапа */

  --shadow:      0 18px 44px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.12);
  --shadow-deep: 0 30px 70px rgba(0,0,0,.28);
  --shadow-pill: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.16);
  /* ═══ ПРИПОДНЯТАЯ ПЛАШКА ═══
     Тень из двух слоёв плюс светлая линия по верхней кромке внутри. Одна
     большая размытая тень (--shadow-deep) кладёт блок в туман; две — узкая
     контактная и широкая мягкая — ставят его НАД фоном, а внутренняя
     светлая кромка дорисовывает ребро, на которое падает свет. Ровно так
     плашки были сделаны в первой версии лендинга. */
  --shadow-card:  inset 0 1px 0 rgba(255,255,255,.06), 0 12px 22px rgba(0,0,0,.22), 0 3px 6px rgba(0,0,0,.12);
  --shadow-lift:  inset 0 1px 0 rgba(255,255,255,.08), 0 16px 28px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.14);
  /* Наклонная заливка: слева сверху светлее фона, справа снизу темнее.
     Плоская заливка на тёмной теме читается как дырка в фоне. */
  --card-surface: linear-gradient(145deg, #3A4654 0%, #313B47 58%, #2B3541 100%);
  --glow:        0 10px 26px rgba(225,255,77,.28);
  --glow-hover:  0 14px 32px rgba(225,255,77,.36);

  --container: 1200px;
  --container-narrow: 920px;
  --gutter: clamp(16px, 4vw, 28px);   /* боковое поле, одно на весь сайт */
  --nav-h: 64px;
}

/* ─────────────────────────── СБРОС ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* ═══ ПОЧЕМУ НА body НЕТ overflow-x: hidden ═══
   Он там стоял и прятал настоящую беду: на 360px кнопка в шапке вылезала
   за край экрана, а проверка «страница не шире окна» этого не видела —
   спрятанное переполнение не увеличивает scrollWidth. То есть строка,
   поставленная «чтобы не было полосы прокрутки», заодно выключала
   единственную проверку, которая такие случаи и ловит.
   Ничего не прячем: если что-то вылезет, это будет видно и глазами, и
   обходом (см. проверка-лендинга.js, пункт 3). */

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Якорь не должен уезжать под шапку. Одно значение на все страницы. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s7)); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ─────────────────────── КОНТЕЙНЕР ───────────────────────
   Боковое поле задаётся ОДИН раз и только здесь. Раньше оно жило в шести
   местах тремя разными формулами (100%-56px, 100%-40px, 100%-32px), и на
   узком экране блоки стояли с разным отступом от края — именно это видно
   как «всё разъезжается». */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--container-narrow); }

/* ─────────────────────── ТИПОГРАФИКА ─────────────────────── */
/* Крупные заголовки — начертание 800. Оно и было задумано; раньше его
   просто не существовало в подключённых файлах, и браузер брал 700. */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--fs-h2); letter-spacing: -.065em; line-height: .95; }
h2 { font-size: var(--fs-h2); letter-spacing: -.065em; line-height: .95; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.02em; }

p { text-wrap: pretty; }
b, strong { font-weight: 700; }

/* Надзаголовок: моно-капс с лаймовой точкой. Один вид на весь сайт —
   и на главной, и в документах, и в мокапе. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 700 var(--fs-xs)/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--accent);
}

.mono { font-family: var(--mono); font-size: .95em; }

/* ─────────────────────── КНОПКИ ───────────────────────
   Три вида и два роста. Больше не бывает. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding-inline: var(--s5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--bg-raised); color: var(--ink);
  font-size: var(--fs-md); font-weight: 700; white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }

.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.btn--accent:hover { box-shadow: var(--glow-hover); }
.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { background: rgba(255,255,255,.05); }
.btn--sm { min-height: var(--control-h-sm); padding-inline: var(--s3); border-radius: var(--r-xs); font-size: var(--fs-xs); }
/* Кнопка в шапке — свой вариант, а не «такая же, но поменьше на телефоне».
   Пока она называлась так же, как кнопки на странице, обход честно
   ругался: один и тот же класс выглядит по-разному. */
.btn--nav { }
.btn__short { display: none; }   /* стрелка вместо подписи — только на телефоне */
.btn--wide { width: 100%; }

/* ─────────────────────── ПОВЕРХНОСТИ ───────────────────────
   Карточка одна на весь сайт: приподнятый фон, тонкая рамка, скругление,
   глубокая тень. Отличаются карточки только содержимым и отступами. */
.card {
  background: var(--card-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Плашка отзывается на курсор: приподнимается и тень уходит глубже. Это не
   украшение — так видно, что блок отдельный и живой, а не нарисованный
   кусок фона. Мокап исключён: он не плашка, а экран продукта, и внутри
   него свои панели со своими тенями. */
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card.mock, .card.mock:hover { background: var(--bg-raised); box-shadow: var(--shadow-deep); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transition: none; transform: none; }
}

/* «Пилюля» — вытянутая плашка шапки и подвала: градиент, рамка, большое
   скругление. Их два на странице, и выглядеть они обязаны одинаково. */
.pill {
  background: linear-gradient(145deg, rgba(45,55,67,.98), rgba(35,45,57,.96));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pill);
}

/* Пунктирная сетка на фоне секции. Один рисунок, одна маска. */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='110' viewBox='0 0 118 110'%3E%3Cg stroke='%23F4F8FB' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M0 .5H118' stroke-dasharray='8 12'/%3E%3Cpath d='M.5 0V110' stroke-dasharray='8 12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 118px 110px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.section { position: relative; overflow: hidden; padding-block: var(--s10); }
.section > .wrap { position: relative; z-index: 1; }

/* ─────────────────────── ШАПКА ─────────────────────── */
/* Шапка и подвал стоят в ТОЙ ЖЕ колонке, что мокап, карточки цен и блок
   вопросов: --container минус два боковых поля. Раньше шапка была 920, а
   подвал 864 при мокапе в 1144 — три разных вертикали на одной странице,
   и страница от этого выглядит несобранной, даже если каждый блок сам по
   себе аккуратный. Теперь левый край у всего один. */
.nav {
  position: fixed; inset-inline: 0; top: var(--s4); z-index: 60;
  width: min(100% - var(--gutter) * 2, var(--container) - var(--gutter) * 2);
  margin-inline: auto;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nav__inner { display: flex; align-items: center; gap: var(--s5); width: 100%; height: var(--nav-h); padding-inline: var(--s5) var(--s3); }
.logo { display: flex; align-items: center; gap: var(--s2); font: 700 var(--fs-sm) var(--mono); letter-spacing: .1em; white-space: nowrap; }
.logo__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--accent); }
.nav__links { display: flex; gap: var(--s5); }
.nav__links a { font-size: var(--fs-md); font-weight: 600; color: var(--ink-dim); transition: color .18s ease; }
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); }
.nav__cta { margin-inline-start: auto; }
.nav__burger { display: none; }

.nav__mobile {
  display: none; position: absolute; top: calc(100% + var(--s2)); inset-inline: var(--s3);
  max-height: calc(100dvh - var(--nav-h) - var(--s7)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s2);
  background: linear-gradient(145deg, var(--bg-lift), var(--bg-raised));
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-pill);
}
.nav__mobile[data-open="1"] { display: grid; }
.nav__mobile a { padding: var(--s3); border-radius: var(--r-xs); font-size: 14px; }
.nav__mobile a:hover { background: rgba(255,255,255,.05); }

/* ─────────────────────── ПОДВАЛ ─────────────────────── */
.footer { position: relative; padding-block: var(--s7) var(--s6); }
.footer__pill { display: grid; gap: var(--s4); padding: var(--s5) var(--s5) var(--s4); }
.footer__row { display: flex; align-items: flex-start; gap: var(--s5); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-dim); }
/* Вес 700 на 10–12px, как было до переделки: на тёмном фоне мелкий текст
   весом 500–600 выглядит бледной серой строкой, а не подписью. */
.footer__row > span:first-child { min-width: 86px; font: 700 var(--fs-micro)/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.footer__row nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer__row a { font-weight: 700; color: var(--ink-dim); transition: color .18s ease; }
.footer__row a:hover { color: var(--ink); }
.footer__row p a { font-weight: 400; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer__row + .footer__row { padding-top: var(--s4); border-top: 1px solid var(--line); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--line);
  font: 500 var(--fs-micro)/1.5 var(--mono); color: var(--ink-dim);
}
.footer__bottom a { transition: color .18s ease; }
.footer__bottom a:hover { color: var(--ink-dim); }

/* ─────────────────────── ПЕРЕНОСЫ ───────────────────────
   Проблема, из-за которой правились вручную три текста подряд: длинные
   ссылки и адреса почты рвут сетку на узком экране. Одно правило на весь
   сайт вместо трёх заплаток. */
a, li, td, th, p, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ─────────────────────── АДАПТИВ ───────────────────────
   Две точки на весь сайт: 980 (пропадает горизонтальная навигация и
   двухколоночные блоки) и 640 (телефон). Больше точек — больше мест,
   где что-то разъедется незамеченным. */
@media (max-width: 980px) {
  :root { --s10: 64px; --s9: 56px;
          --fs-display: clamp(48px, 12vw, 76px); }
  .nav__links { display: none; }
  .nav__inner { gap: var(--s3); }
  .nav__burger { display: inline-flex; }
  .nav__cta { margin-inline-start: var(--s2); }
  .btn--nav { min-height: 38px; padding-inline: var(--s4); font-size: var(--fs-sm); }
}

@media (max-width: 640px) {
  :root { --s10: 48px; --s9: 40px;
          --fs-display: clamp(36px, 10vw, 68px);
          --fs-h2: clamp(38px, 12vw, 54px); }
  /* На телефоне в строку шапки не влезают логотип, «Меню» и кнопка со
     словами. Кнопка сжимается до стрелки.
     Но подпись при этом не выбрасывается, а прячется «по-зрячему»: текст
     остаётся в разметке, просто занимает один пиксель. Кнопка со стрелкой
     и без подписи для скринридера называлась бы «стрелка вправо», а так
     она по-прежнему «Оформить подписку». Приём с font-size: 0 этого не
     даёт: там подпись действительно исчезает. */
  .btn--nav.js-buy { width: 42px; padding: 0; }
  .btn--nav.js-buy .btn__label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .btn--nav.js-buy .btn__short { display: inline; font-size: var(--fs-h4); }
  .footer__row { display: grid; gap: var(--s2); }
  .footer__bottom { justify-content: flex-start; }
}