/* =============================================================================
   LANDING-BUILDER — BULLETPROOF DESIGN SYSTEM
   Единое ядро вёрстки. Цель файла: сделать так, чтобы вёрстка НЕ ЛОМАЛАСЬ —
   контейнеры не растягиваются, строки не съезжают, картинки не вылезают,
   ничего не даёт горизонтальный скролл. Тема меняется только через переменные
   в :root (см. блок THEME). Структуру трогать не нужно.

   Организация (слои, без спагетти):
     1. TOKENS      — дизайн-токены (цвет, шрифт, ритм, тени)
     2. RESET       — модерн-reset + анти-overflow правила (ядро прочности)
     3. LAYOUT      — контейнер, секции, грид, стек
     4. TYPOGRAPHY  — заголовки/текст с fluid-размерами
     5. COMPONENTS  — кнопки, карточки, шапка, формы, футер и т.д.
     6. UTILITIES   — точечные хелперы
     7. A11Y/MOTION — фокус, prefers-reduced-motion
   ========================================================================== */

/* ============================ 1. TOKENS =================================== */
:root {
  /* --- THEME: переопределяется на каждом лендинге (акцент/фон) --- */
  --accent:            #4f46e5;   /* основной акцент */
  --accent-strong:     #4338ca;   /* ховер/нажатие */
  --accent-contrast:   #ffffff;   /* текст на акценте */
  --accent-soft:       #eef2ff;   /* мягкая подложка акцента */

  /* --- Поверхности и текст --- */
  --bg:                #ffffff;
  --surface:           #ffffff;
  --surface-2:         #f7f8fb;   /* чередующиеся секции */
  --surface-3:         #eef0f6;
  --ink:               #0f172a;   /* основной текст */
  --ink-muted:         #55607a;   /* вторичный текст */
  --ink-faint:         #8a93a8;
  --border:            #e6e8f0;
  --border-strong:     #d3d7e3;

  /* --- Радиусы --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* --- Тени (мягкие, «дорогие») --- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow:    0 4px 12px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, .14), 0 8px 16px rgba(16, 24, 40, .08);
  --ring:      0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);

  /* --- Ритм: единая 4px-шкала отступов --- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;

  /* --- Контейнер и «воздух» по краям (адаптивный, без медиазапросов) --- */
  --container: 1120px;
  --container-narrow: 780px;
  --gutter: clamp(0.6rem, 1.6vw, 1rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Шрифты --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-head: var(--font-sans);

  /* --- Fluid-типографика: размеры сами тянутся между мобилкой и десктопом --- */
  --fs-hero:   clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --fs-h2:     clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  --fs-h3:     clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 1rem + .45vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  .9375rem;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;
}

/* ============================ 2. RESET (ЯДРО ПРОЧНОСТИ) ==================== */
/* box-sizing на всё: padding/border НИКОГДА не расширяют элемент за пределы. */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip на корне — убивает любой случайный горизонтальный скролл,
   но, в отличие от hidden, не ломает position: sticky. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
html.is-section-scrolling { scroll-behavior: auto; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* Медиа никогда не вылезает из контейнера — типовая причина «поехавшей» вёрстки. */
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }

/* Длинные слова/URL переносятся, а не растягивают блок. */
h1, h2, h3, h4, p, a, li, span, blockquote, dd, dt, label { overflow-wrap: break-word; }

/* Формы наследуют шрифт, поля не выходят за контейнер. */
input, button, textarea, select { font: inherit; color: inherit; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* КЛЮЧ анти-растяжения: элементы флекс/грида по умолчанию имеют min-width:auto,
   из-за чего длинный контент «распирает» строку. Обнуляем это глобально. */
:where(.grid, .row, .stack, .cluster) > * { min-width: 0; }

/* ============================ 3. LAYOUT ================================== */
.container {
  width: 100%;
  /* Меньше «воздуха» по бокам: контент тянется почти во всю ширину (макс. 1560px),
     боковое поле — 2.5vw (на 1440px это ~36px против прежних ~64px — заметно уже). */
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 3rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
/* Якорные переходы не прячут заголовок под липкой шапкой. */
[id] { scroll-margin-top: 84px; }
.section--tint { background: var(--surface-2); }
.section--ink  { background: var(--ink); color: #fff; }
.section--ink .lead, .section--ink .eyebrow { color: rgba(255,255,255,.72); }

/* Вертикальный стек с равномерным ритмом (owl-подобно, но предсказуемо). */
.stack   { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }

/* Горизонтальная группа, которая САМА переносится — кнопки/чипы не съезжают. */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--center { justify-content: center; }

/* Универсальный грид: колонки сами набираются и переносятся.
   min(100%, N) гарантирует, что на узком экране колонка = 100% и НЕ даёт скролл. */
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--2  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Двухколоночный сплит (текст + визуал), схлопывается в один столбец. */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* ============================ 4. TYPOGRAPHY ============================== */
h1, .h1 { font-family: var(--font-head); font-size: var(--fs-hero); line-height: var(--lh-tight);
          font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2, .h2 { font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-snug);
          font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
h3, .h3 { font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-snug);
          font-weight: 700; letter-spacing: -.01em; }

.lead { font-size: var(--fs-lead); color: var(--ink-muted); line-height: var(--lh-body);
        max-width: 60ch; text-wrap: pretty; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-small); }
p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

/* Надзаголовок секции. */
.eyebrow { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
           text-transform: uppercase; color: var(--accent); }

/* Шапка секции — заголовок + подзаголовок по центру. */
.section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .lead { margin-inline: auto; margin-top: var(--space-3); }

/* ============================ 5. COMPONENTS ============================= */

/* --- Кнопки: всегда ≥44px (правило доступности), контент центрирован --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--accent-strong); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--surface-2); }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.0625rem; }

/* --- Бейджи/чипы --- */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
         font-size: .8125rem; font-weight: 600; border-radius: var(--radius-pill);
         background: var(--accent-soft); color: var(--accent-strong); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-muted); }

/* --- Карточка: базовый строительный блок --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        height: 100%; /* карточки в ряду ровные по высоте, без «прыжков» */ }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius);
              background: var(--accent-soft); color: var(--accent-strong); margin-bottom: var(--space-4); font-size: 1.5rem; }
.card__title { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-2); letter-spacing: -.01em; }

/* --- Шапка сайта (sticky) --- */
.site-header { position: sticky; top: 0; z-index: 50;
               background: color-mix(in srgb, var(--bg) 82%, transparent);
               -webkit-backdrop-filter: saturate(180%) blur(12px);
               backdrop-filter: saturate(180%) blur(12px);
               border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
       min-height: 68px; }
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem;
              letter-spacing: -.02em; }
.nav__logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
             background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); }
.nav__links a { color: var(--ink-muted); font-weight: 500; font-size: .95rem; transition: color .15s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
               border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.nav__toggle svg { width: 22px; height: 22px; }

/* Мобильное меню: до брейкпоинта прячем ссылки в выпадашку. */
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links, .nav__actions { display: none; }
  .nav[data-open="true"] .nav__links,
  .nav[data-open="true"] .nav__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--space-5) var(--gutter) var(--space-6);
    background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  .nav { position: relative; }
  .nav[data-open="true"] .nav__links a { font-size: 1.05rem; padding: .35rem 0; }
  .nav[data-open="true"] .btn { width: 100%; }
}

/* --- Hero --- */
.hero { position: relative; padding-block: clamp(3rem, 8vw, 6.5rem) var(--section-y); overflow: hidden; }
.hero__inner { max-width: 46rem; }
.hero--center .hero__inner { margin-inline: auto; text-align: center; }
.hero--center .cluster { justify-content: center; }
.hero .lead { margin-top: var(--space-5); }
.hero__cta { margin-top: var(--space-6); }
.hero__note { margin-top: var(--space-4); color: var(--ink-faint); font-size: var(--fs-small); }
/* Мягкое свечение на фоне hero — чисто декоративное, не влияет на поток. */
.hero__glow { position: absolute; inset: -20% -10% auto; height: 60%; z-index: -1; pointer-events: none;
              background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }

/* Визуальная «панель» рядом с hero-текстом (заглушка продукта/скрин). */
.showcase { border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface);
            box-shadow: var(--shadow-lg); padding: clamp(1rem, 2.5vw, 1.75rem); }
.showcase__bar { display: flex; gap: .4rem; margin-bottom: var(--space-4); }
.showcase__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.showcase__body { border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--accent-soft), var(--surface-2));
                  min-height: 260px; display: grid; place-items: center; padding: var(--space-6); }

/* --- Полоса логотипов / доверие --- */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem);
         opacity: .7; }
.trust span { font-weight: 700; font-size: 1.05rem; color: var(--ink-muted); letter-spacing: -.01em; }

/* --- Статистика --- */
.stat { text-align: center; }
.stat__num { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1; }
.stat__label { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--fs-small); }

/* --- Список с галочками ---
   ВАЖНО: пункт остаётся обычным блоком, а галочка позиционируется абсолютно в
   левом «жёлобе» (padding-left). Так любой инлайн-контент (<strong> + текст, ссылки)
   течёт единым абзацем и переносится нормально. Grid на 2 колонки здесь НЕЛЬЗЯ:
   он раскидывает <strong> и текст по разным ячейкам, и текст переносится по буквам. */
.checks { display: grid; gap: var(--space-3); }
.checks li { position: relative; padding-left: 2.1rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: .1rem;
                     display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
                     border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
                     font-size: .8rem; font-weight: 800; }

/* --- Тарифы --- */
.price { display: flex; align-items: baseline; gap: .35rem; margin-block: var(--space-4); }
.price__num { font-size: clamp(2.2rem, 1.5rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; }
.price__per { color: var(--ink-muted); font-size: var(--fs-small); }
.card--featured { border-color: var(--accent); box-shadow: var(--shadow-lg); position: relative; }
.card--featured::after { content: "Популярный"; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
                         background: var(--accent); color: var(--accent-contrast); font-size: .75rem; font-weight: 700;
                         padding: .3rem .8rem; border-radius: var(--radius-pill); white-space: nowrap; }

/* --- Отзывы --- */
.quote { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.quote__text { font-size: 1.05rem; line-height: 1.6; }
.quote__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
          display: grid; place-items: center; font-weight: 700; flex: none; }
.avatar__name { font-weight: 700; font-size: .95rem; }
.avatar__role { color: var(--ink-muted); font-size: .85rem; }
.stars { color: #f5a623; letter-spacing: .1em; }

/* --- FAQ на нативных <details> — доступно и без JS --- */
.faq { display: grid; gap: var(--space-3); max-width: 46rem; margin-inline: auto; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
               padding: 1.15rem 1.35rem; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); transition: transform .2s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.35rem 1.25rem; color: var(--ink-muted); }

/* --- CTA-панель --- */
.cta-panel { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-contrast);
             border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 4rem); text-align: center; }
.cta-panel h2 { color: #fff; }
.cta-panel .lead { color: rgba(255,255,255,.85); margin-inline: auto; }

/* --- Формы --- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.field textarea { min-height: 120px; resize: vertical; }
.field__error { color: #d92d20; font-size: .85rem; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #d92d20; }
.field[data-invalid="true"] .field__error { display: block; }
/* Тот же принцип, что и у .checks: чекбокс в жёлобе слева (absolute), текст с ссылкой
   течёт единым абзацем. Grid на 2 колонки раскидывал бы ссылку на отдельную строку. */
.consent { position: relative; padding-left: 1.9rem; font-size: .85rem; color: var(--ink-muted); }
.consent input { position: absolute; left: 0; top: .15rem; width: 20px; height: 20px; accent-color: var(--accent); }
.consent a { color: var(--accent-strong); text-decoration: underline; }
.form__ok { display: none; padding: 1rem 1.25rem; border-radius: var(--radius); background: #ecfdf3; color: #027a48;
            border: 1px solid #a6f4c5; font-weight: 600; }
.form__ok[data-show="true"] { display: block; }
.form__error { display: none; padding: 1rem 1.25rem; border-radius: var(--radius); background: #fff1f0; color: #9b1c1c;
               border: 1px solid #f2a8a2; font-weight: 600; }
.form__error[data-show="true"] { display: block; }
.form button[type="submit"]:disabled { cursor: wait; opacity: .72; }
.form button[data-release-disabled="true"] { cursor: not-allowed; }

/* Публичные ссылки на кабинет скрыты до появления серверной авторизации. */
.nav__login,
.nav__account { display: none !important; }

/* --- Футер --- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-6); }
.site-footer a { color: rgba(255,255,255,.72); transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer__brand { font-weight: 800; font-size: 1.15rem; color: #fff; display: inline-flex; align-items: center; gap: .6rem; }
.footer__col h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.footer__col a { display: block; padding: .25rem 0; font-size: .95rem; }
.footer__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.12);
                 display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); justify-content: space-between;
                 font-size: .85rem; color: rgba(255,255,255,.55); }
.footer__req { max-width: 60ch; line-height: 1.6; }

/* --- Cookie-баннер (152-ФЗ / доверие) --- */
.cookie { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
          bottom: clamp(.75rem, 3vw, 1.5rem); width: min(680px, calc(100% - 2rem));
          background: var(--ink); color: rgba(255,255,255,.85); border-radius: var(--radius-lg);
          box-shadow: var(--shadow-lg); padding: 1.1rem 1.35rem;
          display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cookie[hidden] { display: none; }
.cookie p { font-size: .875rem; flex: 1 1 320px; margin: 0; }
.cookie a { color: #fff; text-decoration: underline; }

/* --- Отдельная контентная страница (политика) --- */
.doc { max-width: 46rem; margin-inline: auto; }
.doc h1 { margin-bottom: var(--space-5); }
.doc h2 { font-size: var(--fs-h3); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.doc p, .doc li { color: var(--ink-muted); }
.doc ul { padding-left: 1.25rem; display: grid; gap: .4rem; list-style: disc; }
.doc a { color: var(--accent-strong); text-decoration: underline; }

/* ============================ 6. UTILITIES ============================== */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Honeypot: антиспам-ловушка. НЕ display:none — бот должен «увидеть» поле и заполнить его,
   человек его не видит. Заполненное поле = бот (проверяется в app.js и на бэкенде). */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.full-bleed-safe { max-width: 100%; }

/* ============================ 7. A11Y / MOTION ========================= */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px;
}
.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--accent); color: #fff;
             padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: .5rem; }

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