/* ═══════════════════════════════════════════════════════════════════════
   ЛЕНДИНГ «ПАТРУЛЬ» — стили. Значения взяты из ТЗ, разделы 4, 5, 12.
   Правило: цвет никогда не единственный носитель смысла — у каждого статуса
   есть текст или знак (ТЗ 4.2 и 12.4).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шрифт: локальный Manrope с кириллицей, переменные начертания 400–800 ── */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/manrope-cyr.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-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Цвета — таблица ТЗ 4.2 */
  --page-bg:#FFFFFF;
  --surface-soft:#F5F7FB;
  --text-main:#111827;
  --text-muted:#526078;
  --accent:#075BFA;
  --accent-hover:#0047D6;
  --accent-soft:#EAF1FF;
  --dark-bg:#242B31;
  --dark-surface:#303840;
  --border:#DDE3EB;
  --success:#117B50;
  --warning:#946200;
  --danger:#BA2D38;
  /* Светлые подложки статусов на белом */
  --success-soft:#E4F4EC;
  --warning-soft:#FDF1DA;
  --danger-soft:#FBE7E9;
  /* Светлые варианты меток для тёмных панелей (ТЗ 4.2) */
  --on-dark-text:#F2F5F9;
  --on-dark-muted:#A8B3C2;
  --on-dark-line:#3C444D;
  --on-dark-success:#5FD3A3;
  --on-dark-warning:#F0C070;
  --on-dark-danger:#FF8A94;
  --on-dark-accent:#7FA8FF;

  --pad:32px;            /* боковые поля контейнера, ТЗ 4.3 */
  --sec-y:72px;          /* вертикальные отступы секций (64–80) */
  --head-gap:32px;       /* заголовок → содержимое */
  --row-gap:40px;        /* между строками возможностей */
  --radius-btn:6px;
  --radius-screen:8px;
  --radius-panel:10px;
}

*,*::before,*::after{box-sizing:border-box}
/* hidden обязан скрывать: у кнопок и ссылок свой display, и он перебивает правило браузера */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page-bg); color:var(--text-main);
  font-family:'Manrope','Segoe UI',Arial,sans-serif;
  font-size:18px; line-height:28px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0; letter-spacing:-0.035em; font-weight:800}
h1{font-size:64px; line-height:68px}
h2{font-size:42px; line-height:48px}
p{margin:0}
a{color:inherit}
ul{margin:0; padding:0; list-style:none}

/* Контейнер: ширина 1320 на большом экране, поля по краям — по ТЗ 4.3 */
.wrap{width:min(1320px, 100% - var(--pad) * 2); margin-inline:auto}

/* Якоря не должны прятаться под закреплённой шапкой: её высота + 16 px (ТЗ 3) */
[id]{scroll-margin-top:96px}

/* Фокус виден всегда — его нельзя убирать (ТЗ 12.4) */
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
.on-dark :focus-visible,.sec-request :focus-visible{outline-color:#fff}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Кнопки (ТЗ 4.5) ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:var(--radius-btn);
  font-family:inherit; font-weight:600; font-size:15px; line-height:22px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; background:none; color:inherit;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-secondary{background:#fff; color:var(--text-main); border-color:var(--border)}
.btn-secondary:hover{border-color:var(--text-muted)}
.btn-on-dark{background:var(--accent); color:#fff}
.btn-on-dark:hover{background:var(--accent-hover)}
.btn-sm{min-height:44px; padding:0 18px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn .arr{font-size:16px; line-height:1}

/* Мелкая текстовая кнопка «Посмотреть пример» внутри мини-экранов */
.screen-link{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 4px;
  font-family:inherit; font-weight:600; font-size:13px; line-height:19px; color:var(--accent); cursor:pointer; border-radius:4px;
}
.screen-link:hover{color:var(--accent-hover); text-decoration:underline}

/* ── Мини-экраны продукта ──────────────────────────────────────────────── */
.screen{
  background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-screen);
  padding:14px 16px; font-size:14px; line-height:19px;
}
.screen-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.screen-title{font-weight:700; font-size:14px; line-height:19px}
.screen-note{margin-top:10px; font-size:12px; line-height:18px; color:var(--text-muted)}
.screen table{width:100%; border-collapse:collapse; font-size:13px; line-height:19px}
.screen th{
  text-align:left; font-weight:600; font-size:12px; line-height:18px; color:var(--text-muted);
  padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.screen td{padding:8px; border-bottom:1px solid var(--border); vertical-align:middle}
.screen tr:last-child td{border-bottom:0}
.screen .num{text-align:right; font-variant-numeric:tabular-nums}

/* Метки статусов: цвет + обязательный текст */
.tag{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; line-height:18px; font-weight:600; white-space:nowrap}
.tag-success{background:var(--success-soft); color:var(--success)}
.tag-warning{background:var(--warning-soft); color:var(--warning)}
.tag-accent{background:var(--accent-soft); color:var(--accent)}
.tag-neutral{background:#E7EAF0; color:var(--text-muted)}

/* ── Шапка (ТЗ 5.1) ────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex; align-items:center; gap:28px; height:80px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand svg{width:32px; height:32px; display:block}
.brand-name{font-weight:800; font-size:20px; line-height:24px; letter-spacing:.06em}
.main-nav{display:flex; gap:26px; margin-inline:auto}
.main-nav a{
  font-weight:600; font-size:15px; line-height:22px; color:var(--text-main); text-decoration:none; padding:6px 2px; border-radius:4px;
}
.main-nav a:hover{color:var(--accent)}
.header-actions{display:flex; align-items:center; gap:10px; flex:none}
/* «Войти» — вторичная кнопка: вход на виду, но главное действие лендинга остаётся демо */
.btn-login{white-space:nowrap}
.cta-short{display:none}   /* на широком экране кнопка демо подписана полностью */
.header-phone{font-weight:600; font-size:15px; line-height:22px; color:var(--text-main); text-decoration:none; white-space:nowrap}
.header-phone:hover{color:var(--accent)}
.header-tagline{
  font-size:12px; line-height:16px; color:var(--text-muted); max-width:112px; flex:none;
}
.burger{display:none; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--border); border-radius:var(--radius-btn); background:#fff; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--text-main); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text-main)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* Мобильное меню */
.mobile-menu{display:none; position:fixed; inset:0; z-index:60; background:rgba(17,24,39,.45)}
.mobile-menu[open]{display:block}
.mobile-menu .sheet{
  position:absolute; inset:0 0 auto 0; background:#fff; padding:16px 20px 24px;
  border-bottom:1px solid var(--border); max-height:100dvh; overflow:auto;
}
.mobile-menu .sheet-head{display:flex; align-items:center; justify-content:space-between; height:64px}
.mobile-menu nav{display:grid; gap:4px; margin:8px 0 16px}
.mobile-menu nav a{padding:12px 4px; font-weight:600; font-size:16px; line-height:22px; text-decoration:none; border-radius:4px}
.mobile-menu .contacts{display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--border)}
.close-x{width:44px; height:44px; border:1px solid var(--border); border-radius:var(--radius-btn);
  background:#fff; cursor:pointer; font-size:20px; line-height:1; color:var(--text-main)}

/* ── Первый экран (ТЗ 5.2, 5.3) ────────────────────────────────────────── */
.sec-hero{padding:var(--sec-y) 0}
.hero-grid{display:grid; grid-template-columns:minmax(0,620fr) minmax(0,660fr); gap:40px; align-items:start}
.hero-copy{padding-top:8px}         /* оптическое выравнивание с панелью, не более 8 px */
.overline{
  font-size:12px; line-height:18px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:20px;
}
.hero h1{margin-bottom:24px}
.hero h1 .line{display:block}
/* Ниже 1280 переносы подчиняются доступной ширине, а не жёсткой разбивке (ТЗ 5.2) */
@media (max-width:1279px){.hero h1 .line{display:inline}}
.hero h1 .accent{color:var(--accent)}
.hero-lead{font-size:18px; line-height:28px; color:var(--text-muted); margin-bottom:28px; max-width:560px}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.hero-caption{font-size:12px; line-height:18px; color:var(--text-muted)}

/* Панель директора */
.owner-panel{
  background:var(--dark-bg); color:var(--on-dark-text); border-radius:var(--radius-panel);
  padding:28px; box-shadow:0 18px 40px rgba(17,24,39,.16); min-height:430px;
}
.owner-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px}
.owner-head h2{font-size:20px; line-height:26px; letter-spacing:-0.01em}
.concept-note{font-size:12px; line-height:18px; color:var(--on-dark-muted)}
.owner-list{display:grid; gap:10px}
.owner-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--dark-surface); border:1px solid var(--on-dark-line); border-radius:8px;
  padding:14px 16px; color:inherit; font:inherit; cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.owner-item:hover{border-color:var(--on-dark-accent)}
.owner-item .ico{flex:none; width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.06)}
.owner-item .ico svg{width:18px; height:18px}
.owner-item .txt{flex:1; min-width:0; display:block}
.owner-item .t1{display:block; font-size:15px; line-height:21px; font-weight:700}
.owner-item .t2{display:block; font-size:13px; line-height:19px; color:var(--on-dark-muted)}
.owner-item .val{font-size:15px; line-height:21px; font-weight:700; white-space:nowrap}
.owner-item .val.bad{color:var(--on-dark-danger)}
.owner-item .val.act{color:var(--on-dark-accent)}
.owner-sep{height:1px; background:var(--on-dark-line); margin:20px 0 16px}
.owner-sub{font-size:14px; line-height:20px; font-weight:700; margin-bottom:12px}
.bar-row{display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:13px; line-height:19px}
.bar-row .lbl{flex:none; width:148px; color:var(--on-dark-muted)}
.bar-track{flex:1; height:8px; border-radius:4px; background:#3C444B; overflow:hidden}
.bar-fill{display:block; height:8px; border-radius:4px}   /* строчный span не имел бы ни ширины, ни высоты */
.bar-fill.ok{background:#075BFA}
.bar-fill.bad{background:#F16D78}
.bar-row .pct{flex:none; width:42px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums}

/* ── Полоса фактов (ТЗ 5.4) ────────────────────────────────────────────── */
.sec-facts{border-block:1px solid var(--border)}
.facts{display:grid; grid-template-columns:repeat(4,1fr); min-height:84px}
.fact{display:flex; align-items:center; gap:12px; padding:16px 24px; font-size:15px; line-height:21px; font-weight:600}
.fact + .fact{border-left:1px solid var(--border)}
.fact:first-child{padding-left:0}
.fact:last-child{padding-right:0}
.fact svg{width:22px; height:22px; flex:none; color:var(--accent)}

/* ── Семь направлений (ТЗ 6) ───────────────────────────────────────────── */
.sec-capabilities{padding:var(--sec-y) 0}
.cap-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:var(--head-gap)}
.cap-head .lead{font-size:18px; line-height:28px; color:var(--text-muted); margin-top:14px; max-width:640px}
.cap-head .aside{
  font-size:15px; line-height:22px; color:var(--text-muted); text-align:right; flex:none;
  border-left:1px solid var(--border); padding-left:24px;
}
.cap-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--row-gap) 24px}
.cap{grid-column:span 4; border-top:1px solid var(--border); padding-top:24px; display:flex; flex-direction:column}
.cap-head-row{display:flex; align-items:flex-start; gap:14px; margin-bottom:8px}
.cap-num{flex:none; width:42px; font-size:31px; line-height:29px; font-weight:800; color:var(--accent); margin:0}
.cap h3,.paycal-block h3{font-size:23px; line-height:29px; margin:0}
/* описание — в текстовой колонке под заголовком; мини-экран ниже, во всю ширину области */
.cap-text{font-size:16px; line-height:24px; color:var(--text-muted); margin:0 0 22px; padding-left:56px}
.cap-screen{margin-top:0}
/* Верхние края примеров в одной строке совпадают: описание занимает высоту самого длинного в строке */
.cap-r1 .cap-text{min-height:72px}
.cap-r2 .cap-text,.cap-06 .cap-text,.cap-07 .cap-text{min-height:48px}
.cap-r2{grid-column:span 6}
.cap-06{grid-column:span 5}
.cap-07{grid-column:span 7}

/* 02 — выбор региона */
.region-list{display:grid; gap:6px}
.region-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:6px; padding:9px 12px;
  font:inherit; font-size:13px; line-height:19px; color:var(--text-main);
}
.region-item:hover{border-color:var(--accent)}
.region-item[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); font-weight:700}
.region-item .cnt{margin-left:auto; color:var(--text-muted); font-weight:400}
.region-item[aria-pressed="true"] .cnt{color:var(--accent)}
.region-item svg{width:15px; height:15px; flex:none; color:var(--text-muted)}
.region-item[aria-pressed="true"] svg{color:var(--accent)}
.region-out{margin-top:10px; font-size:12px; line-height:18px; color:var(--text-muted)}

/* 03 — чат */
.chat-msg{display:flex; gap:10px; margin-bottom:10px}
.chat-ava{flex:none; width:30px; height:30px; border-radius:50%; background:#DCE2EC; display:grid; place-items:center;
  color:var(--text-muted)}
.chat-ava svg{width:16px; height:16px}
.chat-body{flex:1; min-width:0; display:block}
.chat-role{display:block; font-size:12px; line-height:18px; font-weight:700; color:var(--text-muted)}
.chat-bubble{display:block; background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 11px;
  font-size:13px; line-height:19px; margin-top:3px}
.chat-time{display:block; font-size:11px; line-height:16px; color:var(--text-muted); margin-top:3px}

/* 04 — табель */
.ts-table td.h{font-weight:400}
.ts-table tbody tr:first-child{background:var(--accent-soft)}
.ts-table .total{font-weight:700}

/* 05 — воронка */
.funnel{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.funnel-col{background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px}
.funnel-col h4{margin:0 0 8px; font-size:12px; line-height:18px; font-weight:700; color:var(--text-muted);
  display:flex; justify-content:space-between; gap:8px}
.funnel-col .cnt{color:var(--accent)}
.deal{border:1px solid var(--border); border-radius:6px; padding:8px 9px; margin-bottom:6px; background:#fff;
  width:100%; text-align:left; font:inherit; cursor:pointer; color:inherit}
.deal:last-child{margin-bottom:0}
.deal:hover{border-color:var(--accent)}
.deal .d1{display:block; font-size:13px; line-height:19px; font-weight:700}
.deal .d2{display:block; font-size:12px; line-height:18px; color:var(--text-muted)}

/* 07 — календарь */
.cal{display:grid; grid-template-columns:1.15fr 1fr; gap:16px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.cal-grid .wd{font-size:11px; line-height:16px; color:var(--text-muted); text-align:center; padding-bottom:2px}
.cal-day{
  aspect-ratio:1/1; min-height:26px; display:grid; place-items:center; border-radius:5px;
  font-size:12px; line-height:16px; background:#fff; border:1px solid transparent; color:var(--text-main);
  font-variant-numeric:tabular-nums;
}
.cal-day.empty{background:none}
button.cal-day{cursor:pointer; font-family:inherit; border-color:var(--border)}
button.cal-day:hover{border-color:var(--accent)}
.cal-day[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); font-weight:700}
.cal-day .dot{position:absolute; width:5px; height:5px; border-radius:50%; transform:translateY(11px)}
.cal-day{position:relative}
.dot-accent{background:var(--accent)} .dot-dark{background:var(--dark-bg)} .dot-warning{background:#C98A00}
.cal-legend{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px; font-size:12px; line-height:18px; color:var(--text-muted)}
.cal-legend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px}
.cal-side{border-left:1px solid var(--border); padding-left:16px}
.cal-side .d{font-size:13px; line-height:19px; font-weight:700; margin-bottom:8px}
.cal-rec{display:flex; gap:9px; margin-bottom:10px}
.cal-rec i{flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px}
.cal-rec .r1{font-size:13px; line-height:19px; font-weight:600}
.cal-rec .r2{font-size:12px; line-height:18px; color:var(--text-muted)}

.paycal-block{
  display:grid; grid-template-columns:35% 1fr; gap:32px; align-items:start;
  border-top:1px solid var(--border); padding-top:24px; margin-top:var(--row-gap);
}
.paycal-h{font-size:23px; line-height:29px; font-weight:800; letter-spacing:-0.02em; margin:12px 0 8px; padding-left:56px}
.paycal-block .cap-text{margin-bottom:16px; min-height:0}
.paycal-points{display:grid; gap:9px; padding-left:56px}
.paycal-points li{display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:22px}
.paycal-points svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent)}
.pc-table th:first-child,.pc-table td:first-child{white-space:nowrap}
.pc-bad td{background:var(--danger-soft)}
.pc-bad .rest{color:var(--danger); font-weight:700}
.pc-risk{display:block; font-size:11px; line-height:16px; font-weight:700; color:var(--danger)}
.pc-note{margin-top:10px; font-size:13px; line-height:19px; font-weight:600; color:var(--danger)}
/* компактные карточки для телефона: пятиколоночная таблица там не читается */
.pc-cards{display:none}
.pc-card{background:#fff; border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-bottom:8px}
.pc-card.bad{background:var(--danger-soft); border-color:#F0BEC3}
.pc-card .c1{display:flex; justify-content:space-between; gap:10px; font-size:13px; line-height:19px; font-weight:700}
.pc-card .c2{font-size:12.5px; line-height:18px; color:var(--text-muted); margin-top:2px}
.pc-card .c3{display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-size:13px; line-height:19px}
.pc-card .c3 b{font-variant-numeric:tabular-nums}

/* ── Демонстрация (ТЗ 7) ───────────────────────────────────────────────── */
.sec-demo{background:var(--dark-bg); color:var(--on-dark-text); padding:var(--sec-y) 0}
.demo-grid{display:grid; grid-template-columns:42% 1fr; gap:40px; align-items:center}
.sec-demo h2{margin-bottom:20px}
.demo-lead{font-size:18px; line-height:28px; color:var(--on-dark-muted); margin-bottom:24px}
.demo-points{display:grid; gap:12px; margin-bottom:28px}
.demo-points li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:24px}
.demo-points svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--on-dark-accent)}
.demo-selfserve{margin-top:14px; font-size:14px; line-height:21px; color:var(--on-dark-muted)}
.demo-selfserve[hidden]{display:none}
.devices{display:flex; align-items:flex-end; justify-content:flex-end; max-width:100%}
.laptop{flex:0 1 552px; min-width:0; max-width:100%; background:var(--dark-surface); border:1px solid var(--on-dark-line);
  border-radius:10px; padding:10px}
.phone{flex:none; width:178px; margin-left:-30px; background:var(--dark-surface); border:1px solid var(--on-dark-line);
  border-radius:20px; padding:10px; position:relative; z-index:1}
.dev-screen{background:#fff; border-radius:6px; color:var(--text-main); padding:0; overflow:hidden;
  font-size:12px; line-height:18px}
.laptop .dev-screen{height:336px}
.phone .dev-screen{height:332px; padding-bottom:8px}
/* окно кабинета: узкая навигация слева, рабочая область справа */
.dev-app{display:grid; grid-template-columns:132px 1fr; height:100%}
.dev-side{background:#F2F5F9; border-right:1px solid var(--border); padding:12px 10px; display:grid;
  align-content:start; gap:3px}
.dev-brand{font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--text-main); padding:0 6px 8px}
.dev-side span:not(.dev-brand){display:flex; align-items:center; gap:8px; padding:6px; border-radius:5px;
  font-size:11.5px; line-height:16px; color:var(--text-muted)}
.dev-side span.on{background:var(--accent-soft); color:var(--accent); font-weight:700}
.dev-side svg{width:14px; height:14px; flex:none}
.dev-main{padding:12px 14px; display:flex; flex-direction:column; min-width:0}
.dev-bar{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.dev-h{font-size:15px; line-height:21px; font-weight:800; letter-spacing:-0.01em}
.dev-chip{font-size:11px; line-height:16px; color:var(--text-muted); border:1px solid var(--border);
  border-radius:999px; padding:2px 9px; white-space:nowrap}
.dev-screen table{width:100%; border-collapse:collapse; font-size:12px; line-height:18px}
.dev-screen th{font-size:10.5px; line-height:15px; color:var(--text-muted); text-align:left; font-weight:600;
  padding:5px 6px; border-bottom:1px solid var(--border); white-space:nowrap}
.dev-screen td{padding:9px 6px; border-bottom:1px solid var(--border)}
.dev-screen .num{text-align:right; font-variant-numeric:tabular-nums}
.dev-screen .ok{color:var(--success); font-weight:700}
.dev-screen .bad{color:var(--danger); font-weight:700}
.dev-foot{margin-top:auto; padding-top:10px; display:flex; justify-content:space-between; gap:10px;
  font-size:12px; line-height:18px; font-weight:700; border-top:1px solid var(--border)}
/* телефон показывает рабочий раздел, а не только пункты меню */
.phone .dev-bar{padding:12px 12px 0; margin-bottom:8px}
.ph-row{display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--border)}
.ph-row i{flex:none; width:8px; height:8px; border-radius:50%}
.ph-row div{flex:1; min-width:0}
.ph-row .p1{display:block; font-size:12px; line-height:17px; font-weight:700}
.ph-row .p2{display:block; font-size:11px; line-height:16px; color:var(--text-muted)}
.ph-row .tag{font-size:10px; padding:2px 7px}
.dev-screen table{width:100%; border-collapse:collapse; font-size:12px; line-height:18px}
.dev-screen th{font-size:11px; line-height:16px; color:var(--text-muted); text-align:left; font-weight:600;
  padding:4px 6px; border-bottom:1px solid var(--border)}
.dev-screen td{padding:6px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums}
.dev-screen tr:last-child td{border-bottom:0}
.dev-nav{display:grid; gap:8px}
.dev-nav div{display:flex; align-items:center; gap:9px; font-size:13px; line-height:19px}
.dev-nav svg{width:16px; height:16px; color:var(--text-muted)}
.dev-title{font-weight:700; font-size:13px; line-height:19px; margin-bottom:8px}
.devices-note{margin-top:14px; font-size:12px; line-height:18px; color:var(--on-dark-muted); text-align:right}

/* ── Патруль на телефоне: галерея образцов мобильных экранов ─────────────
   Рамки телефонов одинаковые и спокойные: тонкий графит, умеренное скругление,
   без наклона, перспективы и бликов. Логотипов производителей нет. */
.sec-mobile{padding:var(--sec-y) 0; background:var(--page-bg)}
.sec-mobile h2{margin-bottom:14px}
.mob-lead{font-size:18px; line-height:28px; color:var(--text-muted); max-width:820px}
.mob-note{margin-top:10px; font-size:14px; line-height:21px; color:var(--text-main); font-weight:600}
.gallery{display:flex; align-items:center; gap:16px; margin-top:32px}
.gal-arrow{
  flex:none; width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:50%; color:var(--text-main);
  font-size:18px; line-height:1; font-family:inherit;
}
.gal-arrow:hover:not([disabled]){border-color:var(--accent); color:var(--accent)}
.gal-arrow[disabled]{opacity:.4; cursor:default}
.gal-view{flex:1; min-width:0; overflow:hidden}
.gal-track{display:flex; gap:28px; list-style:none; margin:0; padding:0; transition:transform .22s ease}
.gal-item{flex:0 0 auto}
.mob-phone{
  width:240px; max-width:100%; margin:0 auto; background:var(--dark-bg); border-radius:26px; padding:6px;
  cursor:pointer;
}
.mob-screen{
  background:#fff; border-radius:20px; height:466px; overflow:hidden;
  display:flex; flex-direction:column; font-size:12.5px; line-height:18px; color:var(--text-main);
}
.mob-cardtext{margin-top:14px; text-align:left}
.mob-title{font-size:19px; line-height:26px; font-weight:800; letter-spacing:-0.01em}
.mob-role{margin-top:2px; font-size:13.5px; line-height:20px; color:var(--accent); font-weight:600}
.mob-cap{margin-top:6px; font-size:15.5px; line-height:23px; color:var(--text-muted)}
.mob-zoom{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:6px 4px;
  font-family:inherit; font-weight:600; font-size:14px; line-height:21px; color:var(--accent); cursor:pointer; border-radius:4px;
}
.mob-zoom:hover{color:var(--accent-hover); text-decoration:underline}
.mob-concept{margin-top:8px; font-size:12px; line-height:18px; color:var(--text-muted)}
.gal-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px}
.gal-dots{display:flex; gap:8px}
.gal-dot{
  width:32px; height:8px; border-radius:4px; border:0; background:var(--border); cursor:pointer; padding:0;
}
.gal-dot[aria-selected="true"]{background:var(--accent)}
.gal-count{font-size:14px; line-height:21px; color:var(--text-muted); font-variant-numeric:tabular-nums}
.mob-cta{margin-top:28px; padding-top:24px; border-top:1px solid var(--border)}
.mob-cta-text{font-size:18px; line-height:28px; font-weight:700; margin-bottom:16px}
.mob-cta-row{display:flex; gap:16px; flex-wrap:wrap}
.demo-link{color:var(--on-dark-accent); text-decoration:none; font-weight:600}
.demo-link:hover{text-decoration:underline}

/* ── Внутренности концептуальных мобильных экранов ── */
.ms-bar{padding:12px 13px 10px; border-bottom:1px solid var(--border)}
.ms-h{font-size:14px; line-height:20px; font-weight:800; letter-spacing:-0.01em}
.ms-sub{font-size:11.5px; line-height:17px; color:var(--text-muted); margin-top:2px}
.ms-body{flex:1; min-height:0; overflow:hidden; padding:10px 13px}
.ms-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.ms-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border)}
.ms-row:last-child{border-bottom:0}
.ms-row .t{flex:1; min-width:0}
.ms-row .t b{display:block; font-size:12.5px; line-height:18px; font-weight:700}
.ms-row .t span{display:block; font-size:11px; line-height:16px; color:var(--text-muted)}
.ms-mark{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700}
.ms-mark.ok{background:var(--success-soft); color:var(--success)}
.ms-mark.bad{background:var(--danger-soft); color:var(--danger)}
.ms-note{margin-top:10px; background:var(--surface-soft); border-radius:8px; padding:8px 10px;
  font-size:11.5px; line-height:17px; color:var(--text-muted)}
.ms-foot{padding:10px 13px; border-top:1px solid var(--border); font-size:11px; line-height:16px; color:var(--text-muted)}
.ms-table{width:100%; border-collapse:collapse; font-size:11.5px; line-height:17px}
.ms-table th{font-size:10px; line-height:15px; color:var(--text-muted); font-weight:600; text-align:left;
  padding:5px 4px; border-bottom:1px solid var(--border)}
.ms-table td{padding:7px 4px; border-bottom:1px solid var(--border)}
.ms-table tr:last-child td{border-bottom:0}
.ms-table .num{text-align:right; font-variant-numeric:tabular-nums}
.ms-table .total{font-weight:700}
.ms-table .on{background:var(--accent-soft)}
.ms-money{display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--border)}
.ms-money:last-child{border-bottom:0}
.ms-money .d{font-size:11.5px; line-height:17px; font-weight:700}
.ms-money .w{font-size:10.5px; line-height:15px; color:var(--text-muted)}
.ms-money .v{text-align:right; font-variant-numeric:tabular-nums}
.ms-money .v b{display:block; font-size:12px; line-height:17px}
.ms-money .v span{display:block; font-size:10.5px; line-height:15px; color:var(--text-muted)}
.ms-money.bad{background:var(--danger-soft); border-radius:6px; padding:8px; margin:2px 0}
.ms-money.bad .v b{color:var(--danger)}
.ms-risk{display:block; font-size:10px; line-height:14px; font-weight:700; color:var(--danger)}
.ms-msg{margin-bottom:9px}
.ms-msg .who{font-size:10.5px; line-height:15px; font-weight:700; color:var(--text-muted)}
.ms-msg .txt{background:var(--surface-soft); border-radius:8px; padding:7px 9px; font-size:11.5px; line-height:17px; margin-top:3px}
.ms-msg .tm{font-size:10px; line-height:14px; color:var(--text-muted); margin-top:2px}
.ms-ok-circle{width:52px; height:52px; border-radius:50%; background:var(--success-soft); color:var(--success);
  display:grid; place-items:center; margin:6px auto 8px}
.ms-ok-circle svg{width:26px; height:26px}
.ms-center{text-align:center}
.ms-big{font-size:14px; line-height:20px; font-weight:800}
.ms-small{font-size:11.5px; line-height:17px; color:var(--text-muted)}
.ms-miss{padding:20px 14px; text-align:center; color:var(--text-muted); font-size:12px; line-height:18px}

/* ── Обходы (ТЗ 8) ─────────────────────────────────────────────────────── */
.sec-patrol{padding:var(--sec-y) 0; background:var(--page-bg)}
.patrol-grid{display:grid; grid-template-columns:1fr 300px 1fr; gap:40px; align-items:center}
.patrol-lead{font-size:18px; line-height:28px; color:var(--text-muted); margin-top:20px}
.patrol-phone{background:var(--dark-bg); border-radius:20px; padding:14px; justify-self:center; width:280px}
.patrol-screen{background:#fff; border-radius:12px; padding:16px; text-align:center}
.patrol-screen .top{display:flex; align-items:center; gap:8px; font-size:13px; line-height:19px; font-weight:700;
  text-align:left; margin-bottom:14px}
.patrol-ok{width:54px; height:54px; border-radius:50%; background:var(--success-soft); color:var(--success);
  display:grid; place-items:center; margin:0 auto 10px}
.patrol-ok svg{width:28px; height:28px}
.patrol-screen .s1{font-size:15px; line-height:21px; font-weight:700}
.patrol-screen .s2{font-size:13px; line-height:19px; color:var(--text-muted); margin-top:2px}
.patrol-screen .s3{margin-top:12px; font-size:12px; line-height:18px; color:var(--text-muted);
  border-top:1px solid var(--border); padding-top:10px}
.patrol-notes{display:grid; gap:22px}
.patrol-note{display:flex; gap:14px}
.patrol-note svg{width:24px; height:24px; flex:none; color:var(--accent)}
.patrol-note .n1{font-size:16px; line-height:24px; font-weight:700}
.patrol-note .n2{font-size:15px; line-height:22px; color:var(--text-muted)}

/* ── Заявка (ТЗ 9) ─────────────────────────────────────────────────────── */
.sec-request{background:var(--accent); color:#fff; padding:var(--sec-y) 0}
.request-grid{display:grid; grid-template-columns:1fr 610px; gap:40px; align-items:center}
.request-lead{font-size:18px; line-height:28px; margin-top:20px; color:rgba(255,255,255,.88)}
.lead-form{background:#fff; color:var(--text-main); border-radius:8px; padding:24px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
.field label{display:block; font-size:13px; line-height:19px; font-weight:600; margin-bottom:6px}
.field input{
  width:100%; height:50px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-btn);
  font-family:inherit; font-weight:400; font-size:15px; line-height:22px; color:var(--text-main); background:#fff;
}
.field input:focus{border-color:var(--accent)}
.field input[aria-invalid="true"]{border-color:var(--danger); background:var(--danger-soft)}
.field .err{display:none; margin-top:5px; font-size:12px; line-height:18px; color:var(--danger)}
.field.invalid .err{display:block}
.consent{display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; font-size:13px; line-height:19px}
.consent input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--accent)}
.consent a{color:var(--accent)}
.consent.invalid{color:var(--danger)}
.form-status{margin-top:14px; font-size:14px; line-height:21px; border-radius:6px; padding:11px 13px}
.form-status[hidden]{display:none}
.form-status.ok{background:var(--success-soft); color:var(--success)}
.form-status.bad{background:var(--danger-soft); color:var(--danger)}
.form-status.info{background:var(--surface-soft); color:var(--text-muted)}
.form-docs{margin-top:12px; font-size:12px; line-height:18px; color:var(--text-muted)}
.form-docs a{color:var(--accent)}

/* ── Подвал ────────────────────────────────────────────────────────────── */
.site-footer{background:#fff; border-top:1px solid var(--border); padding:32px 0}
.footer-grid{display:flex; align-items:center; gap:32px; flex-wrap:wrap}
.footer-tag{font-size:13px; line-height:19px; color:var(--text-muted); border-left:1px solid var(--border);
  padding-left:20px; max-width:260px}
.footer-nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.footer-nav a{font-size:14px; line-height:21px; color:var(--text-muted); text-decoration:none}
.footer-nav a:hover{color:var(--accent)}
.footer-legal{width:100%; margin-top:20px; padding-top:16px; border-top:1px solid var(--border);
  font-size:12px; line-height:18px; color:var(--text-muted); display:flex; gap:18px; flex-wrap:wrap}

/* ── Увеличенный пример (ТЗ 12.2) ──────────────────────────────────────── */
.preview-dialog{
  width:min(1040px, calc(100vw - 48px)); max-height:calc(100dvh - 48px);
  padding:0; border:0; border-radius:12px; background:#fff; color:var(--text-main);
  overflow:hidden;
}
.preview-dialog::backdrop{background:rgba(17,24,39,.55)}
.preview-inner{display:flex; flex-direction:column; max-height:calc(100dvh - 48px)}
.preview-head{display:flex; align-items:flex-start; gap:16px; padding:20px 24px; border-bottom:1px solid var(--border)}
.preview-head h2{font-size:22px; line-height:28px; letter-spacing:-0.01em}
.preview-head .concept-note{color:var(--text-muted); margin-top:4px}
.preview-head .close-x{margin-left:auto; flex:none}
.preview-body{padding:24px; overflow:auto}
.preview-body .screen{font-size:15px; line-height:22px}
.preview-body .screen table{font-size:14px; line-height:21px}
.preview-body .screen th{font-size:13px; line-height:19px}
.preview-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.preview-kv{display:grid; gap:8px; font-size:14px; line-height:21px}
.preview-kv div{display:flex; gap:12px; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:7px}
.preview-kv dt{color:var(--text-muted)} .preview-kv dd{margin:0; font-weight:600; text-align:right}
.scroll-hint{font-size:12px; line-height:18px; color:var(--text-muted); margin-bottom:8px}
.table-scroll{overflow-x:auto}
.table-scroll table{min-width:520px}
.table-scroll th:first-child,.table-scroll td:first-child{position:sticky; left:0; background:var(--surface-soft)}

/* ═══════════════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ. Рамки заданы ТЗ 12.3 и соблюдаются буквально:
   наведение 160–200 мс, открытие диалога до 180 мс, появление при прокрутке —
   смещение не больше 8 px и не дольше 240 мс, первый экран виден сразу.
   Ничего бесконечного, ничего самодвижущегося: постоянных анимаций у интерфейсов нет.
   Всё выключается настройкой «уменьшить движение» — блок в конце файла.
   ═══════════════════════════════════════════════════════════════════════ */

/* Появление блоков при прокрутке. Класс js-reveal ставит скрипт — и только если
   движение разрешено и браузер умеет IntersectionObserver. Без скрипта и в режиме
   «меньше движения» всё видно сразу: содержимое никогда не зависит от анимации. */
html.js-reveal .rv{opacity:0; transform:translateY(8px)}
html.js-reveal .rv.on{opacity:1; transform:none;
  transition:opacity .24s ease-out, transform .24s ease-out}

/* Шапка: при прокрутке появляется мягкая тень — размер и положение не меняются,
   поэтому контент не прыгает. */
.site-header{transition:box-shadow .18s ease}
.site-header.scrolled{box-shadow:0 6px 20px rgba(17,24,39,.07)}

/* Наведение: короткое и без сдвигов вёрстки */
.main-nav a{position:relative}
.main-nav a::after{
  content:""; position:absolute; left:2px; right:2px; bottom:0; height:2px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.main-nav a:hover::after{transform:scaleX(1)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
.screen-link .arr{transition:transform .18s ease}
.screen-link:hover .arr{transform:translateX(3px)}
.cap .screen,.paycal-screen .screen{transition:border-color .18s ease, box-shadow .18s ease}
.cap:hover .screen,.paycal-block:hover .screen{border-color:#CBD5E3; box-shadow:0 6px 18px rgba(17,24,39,.05)}
.cap-num{transition:color .18s ease}
.owner-item,.region-item,.deal,.cal-day,.gal-arrow,.gal-dot,.mob-phone,.pc-card{
  transition:background-color .18s ease, border-color .18s ease, color .18s ease,
             transform .18s ease, box-shadow .18s ease, width .18s ease;
}
.mob-phone:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(17,24,39,.14)}
.gal-arrow:hover:not([disabled]){transform:scale(1.06)}
.deal:hover,.region-item:hover{background:var(--accent-soft)}

/* Диалог: короткое появление, не дольше 180 мс */
@keyframes всплыть{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}
@keyframes проявить{from{opacity:0} to{opacity:1}}
.preview-dialog[open]{animation:всплыть .17s ease-out}
.preview-dialog[open]::backdrop{animation:проявить .17s ease-out}

/* Мобильное меню: короткий выезд сверху */
@keyframes выехать{from{transform:translateY(-12px); opacity:.6} to{transform:none; opacity:1}}
.mobile-menu[open] .sheet{animation:выехать .18s ease-out}
.mobile-menu[open]{animation:проявить .18s ease-out}

/* Ответ формы виден спокойно, без прыжка */
.form-status{animation:проявить .2s ease-out}

/* ═════════ 1025–1279: две колонки первого экрана, уменьшенный H1 ═════════ */
@media (max-width:1279px){
  :root{--pad:24px; --sec-y:64px}
  h1{font-size:48px; line-height:53px}
  h2{font-size:36px; line-height:42px}
  body{font-size:17px; line-height:26px}
  .hero-lead,.demo-lead,.patrol-lead,.request-lead,.cap-head .lead{font-size:17px; line-height:26px}
  .hero-grid{grid-template-columns:1fr 1fr; gap:32px}
  .owner-panel{min-height:0}
  .main-nav{gap:14px}   /* на 1024 шапка помещается с запасом, бургер по-прежнему с 1023 */
  .header-tagline{display:none}
  .cap{grid-column:span 6}
  .cap-06,.cap-07{grid-column:span 6}
  .cap-r1 .cap-text,.cap-r2 .cap-text,.cap-06 .cap-text,.cap-07 .cap-text{min-height:48px}
  .cap-r1 .screen,.cap-r2 .screen,.cap-06 .screen,.cap-07 .screen{min-height:0}
  .cap-head{flex-direction:column; align-items:flex-start; gap:18px}
  .cap-head .aside{text-align:left; border-left:0; border-top:1px solid var(--border); padding:14px 0 0}
  .demo-grid,.request-grid{grid-template-columns:1fr; gap:32px}
  .paycal-block{grid-template-columns:1fr; gap:24px}
  .laptop{width:100%}
  .phone{margin-left:-24px}
  .request-grid .lead-form{max-width:610px}
  .patrol-grid{grid-template-columns:1fr 260px; gap:28px}
  .mob-phone{width:230px}
  .gal-track{gap:24px}
  .patrol-notes{grid-column:1 / -1}
}

/* ═════════ 1024 и ниже: первый экран складывается вертикально ═════════ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-top:0}
}

/* ═════════ Планшет и ниже: 07 на всю ширину ═════════ */
@media (min-width:768px) and (max-width:1279px){
  .cap-07{grid-column:span 12}
}

/* ═════════ Планшет: навигация уходит в меню, иначе шапка не помещается ═════════ */
@media (max-width:1023px){
  .main-nav,.header-phone{display:none}
  .burger{display:inline-flex}
}

/* ═════════ Телефон ═════════ */
@media (max-width:767px){
  :root{--pad:20px; --sec-y:44px; --head-gap:24px; --row-gap:32px}
  body{font-size:16px; line-height:24px}
  h1{font-size:38px; line-height:42px}
  h2{font-size:30px; line-height:35px}
  .hero-lead,.demo-lead,.patrol-lead,.request-lead,.cap-head .lead{font-size:16px; line-height:24px}
  .site-header .wrap{height:64px; gap:8px}
  /* компактная шапка телефона: логотип, «Войти», «Демо», меню — иначе не помещается */
  .btn-sm{padding:0 12px}
  .header-actions{gap:8px}
  .cta-full,.btn-sm .arr{display:none}
  .cta-short{display:inline}
  .main-nav,.header-phone{display:none}
  .burger{display:inline-flex}
  .brand-name{font-size:18px}
  [id]{scroll-margin-top:80px}
  .btn{font-size:16px; line-height:22px}
  .hero-cta{flex-direction:column; gap:12px}
  .hero-cta .btn{width:100%}
  .owner-panel{padding:20px}
  .owner-item .val{font-size:14px}
  .bar-row .lbl{width:120px; font-size:12px}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:14px 12px; font-size:14px; line-height:20px}
  .fact + .fact{border-left:0}
  .fact:nth-child(odd){padding-left:0}
  .fact:nth-child(even){border-left:1px solid var(--border)}
  .fact:nth-child(n+3){border-top:1px solid var(--border)}
  .cap{grid-column:span 12}
  .cap-r1 .cap-text,.cap-r2 .cap-text,.cap-06 .cap-text,.cap-07 .cap-text{min-height:0}
  .cap h3{font-size:21px; line-height:27px}
  .cap-num{font-size:30px}
  .screen{font-size:14px; line-height:20px}
  .screen table,.screen td{font-size:13px}
  .screen th{font-size:11px; padding:5px 5px}
  .screen td{padding:7px 5px}
  .funnel{grid-template-columns:1fr; gap:8px}
  .cal{grid-template-columns:1fr; gap:14px}
  .cal-side{border-left:0; border-top:1px solid var(--border); padding:14px 0 0}
  .devices{flex-direction:column; align-items:stretch}
  .laptop{width:100%; padding:8px}
  .laptop .dev-screen{height:auto}
  .dev-app{grid-template-columns:1fr}
  .dev-side{display:none}                /* на телефоне узкая навигация только съедает ширину */
  .devices .phone{display:none}          /* два миниатюрных устройства рядом на телефоне не ставим */
  /* календарь платежей на телефоне — карточками, а не пятиколоночной таблицей */
  .pc-table{display:none}
  .pc-cards{display:block}
  .cap-head-row{gap:10px}
  .cap-num{width:34px; font-size:30px}
  .cap-text,.paycal-h,.paycal-points{padding-left:0}
  .devices-note{text-align:left}
  .patrol-grid{grid-template-columns:1fr; gap:26px}
  .gallery{flex-wrap:wrap; gap:12px}
  .gal-view{order:-1; flex:1 0 100%}
  .gallery .gal-arrow{order:1}
  .mob-lead{font-size:16px; line-height:24px}
  .gal-foot{flex-direction:column; align-items:flex-start; gap:10px; margin-top:14px}
  .mob-cta-row{flex-direction:column}
  .mob-cta-row .btn{width:100%}
  .patrol-phone{width:260px}
  .request-grid{grid-template-columns:1fr}
  .lead-form{padding:18px}
  .form-row{grid-template-columns:1fr; gap:14px}
  .preview-dialog{width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:10px}
  .preview-inner{max-height:calc(100dvh - 24px)}
  .preview-head,.preview-body{padding:16px}
  .preview-cols{grid-template-columns:1fr}
  .footer-nav{margin-left:0; width:100%}
  .footer-tag{border-left:0; padding-left:0}
}

@media (max-width:389px){
  :root{--pad:16px}
  .brand-name{display:none}   /* на самых узких оставляем только знак — он тоже ведёт в начало */
  h1{font-size:36px; line-height:40px}
  .facts{grid-template-columns:1fr}
  .fact{border-left:0!important; padding-left:0!important}
  .fact + .fact{border-top:1px solid var(--border)}
}

/* ═════════ Уважаем настройку «меньше движения» ═════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important;
    animation-iteration-count:1!important; scroll-behavior:auto!important}
  /* содержимое не должно зависеть от движения: показываем всё сразу */
  html.js-reveal .rv{opacity:1!important; transform:none!important}
}

/* ═════════ Печать ═════════ */
@media print{
  html.js-reveal .rv{opacity:1!important; transform:none!important}
  .site-header,.mobile-menu,.preview-dialog{display:none!important}
  .sec-demo,.sec-request{background:#fff!important; color:#000!important}
}