/*
 * Главная страница BlackCoat (дизайн 0.87). Тёмная «обложка» в цветах знака — обсидиан и янтарь, как окантовка щита;
 * дальше светлые тёплые разделы («бумага») чередуются с тёмными полосами. Настоящие экраны приложений — в рамке телефона.
 * Без скриптов. Ширина содержимого — до 1160 px; на телефоне — одна колонка, поля 20 px.
 */
body {
  --ink: #0B0E19; --ink2: #11152A; --ink3: #181E36;
  --paper: #F5F2EC; --paper2: #EEE9E0; --card: #FFFFFF;
  --text: #14172A; --muted: #5C6074; --faint: #8A8D9C;
  --on-dark: #F4F2EE; --muted-dark: #A6ACBF; --faint-dark: #737A92;
  --line: rgba(20, 23, 42, .1); --line-dark: rgba(255, 255, 255, .09);
  --amber: #E3A469; --amber2: #F0BE8A; --amber-deep: #93531C; --on-amber: #1A120A;
  --shadow: 0 1px 2px rgba(20, 23, 42, .04), 0 10px 30px rgba(20, 23, 42, .06);
  color-scheme: light; background: var(--paper); color: var(--text); font-size: 16px; overflow-x: clip;
}
a { color: inherit; }
a:hover { text-decoration: none; }
.in { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
h1, h2, h3, summary { text-wrap: balance; }
p, li, span { text-wrap: pretty; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
img { max-width: 100%; }

/* Кнопки: янтарная — на тёмном, чёрная — на светлом, контурная — второе действие */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  background: var(--amber); color: var(--on-amber); font-weight: 650; font-size: 16px; text-align: center; white-space: normal; line-height: 1.2;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn svg { width: 18px; height: 18px; stroke-width: 2.1; transition: transform .18s ease; }
.btn:hover { background: var(--amber2); text-decoration: none; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.btn.ghost:hover { background: rgba(255, 255, 255, .07); }
.btn.ink { background: var(--ink); color: var(--on-dark); }
.btn.ink:hover { background: #222844; }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Шапка — тёмная, поверх «обложки» и светлых разделов */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(11, 14, 25, .82); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
.nav .in { display: flex; align-items: center; gap: 32px; height: 70px; }
.home { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 19px; letter-spacing: -.015em; white-space: nowrap; }
.home img { width: 36px; height: 36px; border-radius: 10px; }
.nav .links { display: flex; gap: 26px; }
.nav .links a { color: var(--muted-dark); font-size: 15px; transition: color .15s ease; }
.nav .links a:hover { color: var(--on-dark); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav .enter { color: var(--muted-dark); font-size: 15px; }
.nav .enter:hover { color: var(--on-dark); }

/* «Обложка» */
.hero {
  position: relative; color: var(--on-dark); overflow: hidden;
  background:
    radial-gradient(820px 620px at 78% 42%, rgba(227, 164, 105, .2), transparent 62%),
    radial-gradient(760px 520px at 8% -10%, rgba(78, 98, 180, .2), transparent 66%),
    linear-gradient(180deg, #0B0E19 0%, #0D1120 100%);
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-dark); }
.hero > .in:first-child { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; padding-top: 76px; padding-bottom: 72px; }
.kick { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 550; color: var(--amber2); letter-spacing: .01em; }
.kick .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(227, 164, 105, .16); }
.hero h1 { font-size: clamp(40px, 5.3vw, 68px); line-height: 1.03; font-weight: 750; letter-spacing: -.035em; margin: 24px 0 0; }
.hero h1 span { color: var(--amber); }
.lead { font-size: 19px; line-height: 1.6; color: var(--muted-dark); margin-top: 24px; max-width: 540px; }
.hero .cta { margin-top: 36px; }
.note { margin-top: 16px; font-size: 14px; color: var(--faint-dark); }

/* Телефон с настоящим экраном */
.device { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.phone {
  position: relative; width: 300px; padding: 9px; border-radius: 48px;
  background: linear-gradient(160deg, #2C3149 0%, #12162A 45%, #080A13 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .6), 0 50px 100px -20px rgba(0, 0, 0, .65), 0 30px 60px -30px rgba(227, 164, 105, .25);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 40px; background: #fff; }
.device figcaption { margin-top: 18px; font-size: 13px; color: var(--faint-dark); }
.float {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px;
  background: rgba(22, 27, 48, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .55); color: var(--on-dark);
}
.float b { display: block; font-size: 14px; font-weight: 650; }
.float i { display: block; font-style: normal; font-size: 13px; color: var(--muted-dark); margin-top: 1px; white-space: nowrap; }
.float .fi { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(227, 164, 105, .16); color: var(--amber); }
.float .fi.ok { background: rgba(61, 210, 122, .16); color: #4ADE8C; }
.float .fi svg { width: 19px; height: 19px; }
.f1 { top: 36%; left: max(-8%, calc(50% - 310px)); }
.f2 { bottom: 14%; right: max(-8%, calc(50% - 310px)); }

/* «Янтарный радар» за телефоном (с 0.97): ночная карта города (неподвижная картинка), волны от заказа и агентства вокруг.
   Волна — прозрачность и масштаб слоя (видеокарта); проходят несколько раз и замирают. Агентства стоят по бокам телефона —
   там, где их видно и на телефоне (полосы 14–25 % и 75–86 % ширины), и не заходят под текст на компьютере */
.phone { z-index: 1; }
.float { z-index: 2; }
.radar { position: absolute; left: 50%; top: 50%; width: 760px; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: 0; }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 56%, transparent); mask-image: radial-gradient(closest-side, #000 56%, transparent); }
.radar .map path { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1.2; }
.radar .map .av { stroke: rgba(255, 255, 255, .1); stroke-width: 2.4; }
.radar .map .rv { stroke: rgba(98, 122, 214, .17); stroke-width: 16; }
.radar .map .sc { fill: none; stroke: rgba(227, 164, 105, .14); stroke-width: 1; stroke-dasharray: 2 7; }
.radar .ring { position: absolute; left: 2.5%; top: 2.5%; width: 95%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(227, 164, 105, .6); opacity: 0; }
.radar .ag {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(227, 164, 105, .14), 0 0 16px rgba(227, 164, 105, .55);
}
.radar .ag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); opacity: 0; }
.a1 { left: 18%; top: 22%; } .a2 { left: 82%; top: 14%; } .a3 { left: 84%; top: 46%; }
.a4 { left: 16%; top: 58%; } .a5 { left: 79%; top: 78%; } .a6 { left: 22%; top: 86%; }

/* Факты — под «обложкой» */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.facts > div { display: flex; flex-direction: column; gap: 6px; padding: 30px 28px 34px 0; }
.facts > div + div { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.facts b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted-dark); font-size: 14px; line-height: 1.45; max-width: 230px; }

/* Разделы */
.paper { padding: 112px 0 0; }
.paper.alt { padding-top: 104px; }
.dark { margin-top: 112px; padding: 104px 0; background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.dark + .paper { padding-top: 104px; }
.head { max-width: 640px; }
.eyebrow { font-size: 13px; font-weight: 650; color: var(--amber-deep); text-transform: uppercase; letter-spacing: .16em; }
/* Янтарная чёрточка перед подписью раздела — как у страниц знакомства в приложении (с 0.97) */
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; vertical-align: .3em; margin-right: 10px; }
.dark .eyebrow { color: var(--amber); }
h2 { font-size: clamp(30px, 3.7vw, 46px); line-height: 1.08; font-weight: 720; letter-spacing: -.03em; margin-top: 14px; }
.sub { font-size: 18px; line-height: 1.6; color: var(--muted); margin-top: 16px; }
.dark .sub { color: var(--muted-dark); }
.fine { font-size: 14px; color: var(--faint); margin-top: 22px; max-width: 760px; }

/* Услуги */
.services { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.services li {
  display: flex; flex-direction: column; gap: 8px; padding: 28px 26px 24px; border-radius: 24px; background: var(--card);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line); transition: transform .2s ease, box-shadow .2s ease;
}
.services li:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 23, 42, .04), 0 22px 44px rgba(20, 23, 42, .1), inset 0 0 0 1px var(--line); }
.ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--amber); margin-bottom: 12px; }
.ic svg { width: 23px; height: 23px; }
.services h3 { font-size: 20px; font-weight: 680; letter-spacing: -.01em; }
.services p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.services b { margin-top: auto; padding-top: 16px; font-weight: 680; font-size: 16px; border-top: 1px solid var(--line); }

/* Три шага — с экранами приложения */
.steps { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.steps li { display: flex; flex-direction: column; }
.shot { margin: 0 0 26px; border-radius: 26px; overflow: hidden; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); aspect-ratio: 720 / 827; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.steps .n { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .14em; color: var(--amber-deep); }
.steps h3 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-top: 8px; }
.steps p { color: var(--muted); margin-top: 10px; font-size: 16px; line-height: 1.55; }

/* Карточка услуги — ссылка целиком (с 0.98: на страницу услуги для Москвы) */
.services li { position: relative; }
.services h3 a { color: inherit; text-decoration: none; }
.services h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.services h3 a:focus-visible { outline: none; }
.services li:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--amber), var(--shadow); }

/* Страницы для поиска (с 0.98): «хлебные крошки» над заголовком и соседние услуги */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 20px; font-size: 14px; color: var(--muted-dark); }
.crumbs a { color: var(--muted-dark); text-decoration: none; transition: color .15s ease; }
.crumbs a:hover { color: var(--on-dark); }
.crumbs > span { color: var(--faint-dark); }
.crumbs > span[aria-current] { color: var(--amber2); }
.also { margin-top: 28px; font-size: 15px; line-height: 2; color: var(--muted); }
.also a { margin-right: 16px; color: var(--text); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(20, 23, 42, .25); text-underline-offset: 3px; }
.also a:hover { text-decoration-color: currentColor; }

/* Безопасность */
.trust { background:
  radial-gradient(700px 420px at 0% 0%, rgba(227, 164, 105, .12), transparent 70%),
  radial-gradient(640px 420px at 100% 100%, rgba(78, 98, 180, .14), transparent 70%), var(--ink); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line-dark); }
.grid4 > div { padding: 32px 28px 0 0; }
.grid4 > div + div { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.ti { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--amber); box-shadow: inset 0 0 0 1.5px rgba(227, 164, 105, .45); }
.ti svg { width: 21px; height: 21px; }
.grid4 h3 { font-size: 19px; font-weight: 680; margin-top: 22px; letter-spacing: -.01em; }
.grid4 p { color: var(--muted-dark); font-size: 15px; line-height: 1.55; margin-top: 10px; }

/* Две колонки: компании, агентства, вопросы */
.split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.split.top { align-items: start; }
.split .head .btn, .split .head .cta { margin-top: 32px; }
.feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feats li { padding: 26px 24px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.feats .ic { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px; }
.feats .ic svg { width: 21px; height: 21px; }
.feats h3 { font-size: 18px; font-weight: 680; }
.feats p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 6px; }

.agencies { background:
  radial-gradient(760px 560px at 22% 55%, rgba(227, 164, 105, .2), transparent 64%),
  radial-gradient(600px 420px at 100% 0%, rgba(78, 98, 180, .16), transparent 70%), var(--ink); }
.agencies .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.device.sm .phone { width: 280px; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--muted-dark); }
.ticks svg { color: var(--amber); margin-top: 2px; stroke-width: 2.2; }

/* Вопросы — без рамок, разделителями */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 19px; font-weight: 640; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line);
  background: linear-gradient(var(--text), var(--text)) center / 12px 1.8px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.8px 12px no-repeat;
  transition: transform .2s ease, background-color .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--paper2); }
.faq summary:hover::after { background-color: var(--paper2); }
.faq p { color: var(--muted); font-size: 16px; line-height: 1.65; padding: 0 48px 26px 0; margin-top: -6px; }

/* Последний призыв */
.final {
  margin: 112px 0 0; padding: 72px 32px; border-radius: 36px; text-align: center; color: var(--on-dark);
  background: radial-gradient(640px 300px at 50% 0%, rgba(227, 164, 105, .26), transparent 72%), linear-gradient(180deg, var(--ink3), var(--ink));
  box-shadow: 0 40px 80px -30px rgba(11, 14, 25, .45);
}
/* Отзвук радара за последним призывом (с 0.97): неподвижные кольца, гаснущие к краям */
.final { position: relative; overflow: hidden; isolation: isolate; }
.final::before {
  content: ""; position: absolute; left: 50%; top: 0; z-index: -1; width: 1000px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(227, 164, 105, .09) 0 1px, transparent 1.5px 60px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.final h2 { margin: 0 auto; }
.final p { color: var(--muted-dark); margin: 16px auto 32px; font-size: 18px; max-width: 520px; }
.final .cta { justify-content: center; }

/* Подвал */
.foot { margin-top: 112px; background: var(--ink); color: var(--on-dark); padding: 64px 0 40px; }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 48px; }
.foot .about p { color: var(--faint-dark); font-size: 14px; line-height: 1.6; margin-top: 18px; max-width: 420px; }
.foot nav { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.foot nav b { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .14em; color: var(--faint-dark); margin-bottom: 4px; }
.foot nav a { color: var(--muted-dark); }
.foot nav a:hover { color: var(--on-dark); }
.foot .req { margin-top: 40px; font-size: 13px; line-height: 1.6; color: var(--faint-dark); max-width: 860px; }
.foot .req .nb { white-space: nowrap; }
.foot .req + .copy { margin-top: 16px; }
.foot .copy { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--faint-dark); }

@media (prefers-reduced-motion: reduce) { .btn, .btn svg, .services li, .faq summary::after { transition: none; } }

/* Планшет */
@media (max-width: 1040px) {
  .nav .links { display: none; }
  .hero > .in:first-child { grid-template-columns: 1fr; gap: 56px; padding-top: 56px; text-align: left; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .facts > div:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .grid4 > div:nth-child(n+3) { padding-top: 40px; }
  .split, .agencies .split { grid-template-columns: 1fr; gap: 44px; }
  .agencies .device { order: 2; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .about { grid-column: 1 / -1; }
}

/* Телефон */
@media (max-width: 680px) {
  body { font-size: 15px; }
  .in { padding-left: 20px; padding-right: 20px; }
  .nav .in { height: 62px; gap: 12px; }
  .home { font-size: 18px; gap: 10px; }
  .home img { width: 32px; height: 32px; border-radius: 9px; }
  .nav .right { gap: 14px; }
  .btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .hero > .in:first-child { padding-top: 40px; padding-bottom: 56px; gap: 48px; }
  .hero h1 { font-size: clamp(34px, 9.4vw, 44px); margin-top: 20px; }
  .lead { font-size: 17px; margin-top: 20px; }
  .hero .cta { margin-top: 28px; }
  .cta .btn { width: 100%; }
  .phone { width: 252px; border-radius: 42px; padding: 8px; }
  .phone img { border-radius: 35px; }
  .float { padding: 9px 12px 9px 9px; gap: 9px; border-radius: 15px; }
  .float .fi { width: 30px; height: 30px; border-radius: 9px; }
  .float .fi svg { width: 16px; height: 16px; }
  .float b { font-size: 13px; }
  .float i { font-size: 12px; }
  .f1 { top: 12%; left: 0; }
  .f2 { bottom: 16%; right: 0; }
  .facts > div { padding: 22px 14px 24px 0; }
  .facts > div + div { padding-left: 16px; }
  .facts > div:nth-child(3) { padding-left: 0; }
  .facts b { font-size: 26px; }
  .facts span { font-size: 13px; }
  .paper, .paper.alt, .dark + .paper { padding-top: 80px; }
  .dark { margin-top: 80px; padding: 80px 0; }
  .sub { font-size: 17px; }
  .btn.sm { white-space: nowrap; }
  .services { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .services li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 18px 18px 18px 16px; border-radius: 20px; }
  .services .ic { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 13px; margin: 2px 0 0; }
  .services h3 { font-size: 17px; }
  .services p { margin: 0; font-size: 14px; }
  .services b { margin-top: 4px; padding-top: 0; border-top: 0; font-size: 15px; }
  .steps { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .shot { margin-bottom: 22px; border-radius: 22px; }
  .grid4 { grid-template-columns: 1fr; margin-top: 40px; }
  .grid4 > div, .grid4 > div + div, .grid4 > div:nth-child(n+3) { padding: 28px 0; border-left: 0; }
  .grid4 > div + div { border-top: 1px solid var(--line-dark); }
  .grid4 h3 { margin-top: 18px; }
  .feats { grid-template-columns: 1fr; gap: 10px; }
  .feats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 18px 18px 18px 16px; border-radius: 20px; }
  .feats .ic { grid-row: 1 / span 2; margin: 2px 0 0; }
  .feats h3 { font-size: 17px; }
  .feats p { font-size: 14px; margin-top: 4px; }
  .split .head > .btn { width: 100%; }
  .device.sm .phone { width: 252px; }
  .faq summary { font-size: 17px; padding: 20px 0; }
  .faq p { padding-right: 0; font-size: 15px; }
  .final { margin-top: 80px; padding: 56px 22px; border-radius: 28px; }
  .final p { font-size: 17px; }
  .foot { margin-top: 80px; padding: 48px 0 32px; }
  .foot .cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 430px) { .nav .enter { display: none; } }

/* Радар на телефоне — меньше (телефон в рамке 252 px) */
@media (max-width: 680px) { .radar { width: 520px; } }

/*
 * Разделы на весь экран (с 0.98; только там, где в шапке есть ссылки на разделы — компьютер): переход из шапки
 * показывает раздел целиком, без края следующего снизу. Содержимое — по центру; сверху поле больше — после перехода
 * его закрывает шапка. Раздел длиннее экрана — обычной высоты. «Как это работает» — отдельной полосой.
 */
@media (min-width: 1041px) and (min-height: 640px) {
  main > section:not(.hero) {
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    margin-top: 0; padding: 120px 0 96px;
  }
  main > section:not(.hero) > .in { width: 100%; }
  .paper.alt { background: var(--paper2); }
  .paper.alt .shot { box-shadow: 0 1px 2px rgba(20, 23, 42, .05), 0 14px 36px rgba(20, 23, 42, .08), inset 0 0 0 1px var(--line); }
  .final { margin-top: 96px; }
  .foot { margin-top: 0; }
}

/* Пока картинка грузится, рамка экрана — цвета приложения, а не белый провал */
.shot, .phone img { background: linear-gradient(180deg, #F2EEE7, #FBF9F6 38%, #F5F2EC); }

/*
 * Движение (с 0.97, заметнее — с 0.98). Только прозрачность и сдвиг/масштаб слоя — их рисует видеокарта, страница
 * не пересчитывается. Первый экран мягко «включает свет» и собирается за ~3 с, потом замирает: бесконечных анимаций нет.
 * «Уменьшить движение» в настройках системы — без анимаций вовсе.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Переход по ссылкам шапки — плавной прокруткой, а не прыжком */
  html { scroll-behavior: smooth; }
  /* «Свет включается»: тёмный слой над свечением «обложки» гаснет — без вспышки при загрузке */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #0B0E19; animation: lights 1.8s cubic-bezier(.3, .2, .2, 1) both; }
  .hero > .in { position: relative; z-index: 1; }
  .hero .copy > * { animation: rise 1.1s cubic-bezier(.16, .84, .24, 1) both; }
  .hero .copy > :nth-child(1) { animation-delay: .15s; }
  .hero .copy > :nth-child(2) { animation-delay: .25s; }
  .hero .copy > :nth-child(3) { animation-delay: .4s; }
  .hero .copy > :nth-child(4) { animation-delay: .52s; }
  .hero .copy > :nth-child(5) { animation-delay: .62s; }
  .hero .phone { animation: lift 1.4s cubic-bezier(.16, .84, .24, 1) .3s both; }
  .facts > div { animation: rise 1s cubic-bezier(.16, .84, .24, 1) both; }
  .facts > div:nth-child(1) { animation-delay: .7s; } .facts > div:nth-child(2) { animation-delay: .8s; }
  .facts > div:nth-child(3) { animation-delay: .9s; } .facts > div:nth-child(4) { animation-delay: 1s; }
  /* Карта проявляется вместе с первым экраном, а не раньше него */
  .radar svg { animation: mapin 1.8s ease .4s both; }
  /* Волны от заказа: каждая — дважды, потом радар замирает; наведение мыши на телефон запускает их снова */
  .radar .ring { animation: ping 2.6s cubic-bezier(.25, .6, .3, 1) .5s 2 both; }
  .radar .r2 { animation-delay: 1.3s; } .radar .r3 { animation-delay: 2.1s; }
  .device:hover .radar .ring { animation-name: ping2; }
  /* Агентство загорается, когда до него дошла волна, и отвечает своей вспышкой */
  .radar .ag { opacity: .22; scale: .6; animation: lit .5s ease-out both; }
  .radar .ag::after { animation: agping .9s ease-out both; animation-delay: inherit; }
  .radar .a4 { animation-delay: 1.4s; } .radar .a3 { animation-delay: 1.45s; } .radar .a5 { animation-delay: 1.7s; }
  .radar .a1 { animation-delay: 2s; } .radar .a6 { animation-delay: 2.45s; } .radar .a2 { animation-delay: 2.9s; }
  .f1 { animation: pop .7s cubic-bezier(.2, .8, .25, 1.12) 2.2s both; }
  .f2 { animation: pop2 .7s cubic-bezier(.2, .8, .25, 1.12) 3.2s both; }
  .kick .dot { position: relative; }
  .kick .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); animation: agping 2.2s cubic-bezier(0, 0, .2, 1) .8s 3 both; }
  .faq details[open] p { animation: faqin .35s cubic-bezier(.2, .7, .2, 1) both; }
  /* Янтарная кнопка: на наведении по ней пробегает блик */
  .btn:not(.ghost) { position: relative; overflow: hidden; isolation: isolate; }
  .btn:not(.ghost)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -110% 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
  }
  .btn:not(.ghost):hover::after { translate: 110% 0; transition: translate .8s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes lights { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes mapin { from { opacity: 0; scale: .96; } }
@keyframes lift { from { opacity: 0; translate: 0 56px; scale: .94; } }
@keyframes ping { 0% { opacity: 0; scale: .42; } 10% { opacity: .9; } 100% { opacity: 0; scale: 1; } }
@keyframes ping2 { 0% { opacity: 0; scale: .42; } 10% { opacity: .9; } 100% { opacity: 0; scale: 1; } }
@keyframes lit { to { opacity: 1; scale: 1; } }
@keyframes agping { from { opacity: .6; scale: 1; } to { opacity: 0; scale: 3.4; } }
@keyframes pop { from { opacity: 0; translate: -18px 10px; scale: .94; } }
@keyframes pop2 { from { opacity: 0; translate: 18px 10px; scale: .94; } }
@keyframes faqin { from { opacity: 0; translate: 0 -6px; } }

/*
 * Проявление при прокрутке (с 0.98): блоки выплывают снизу (в двух колонках — навстречу друг другу), когда до них
 * долистали, — по времени, а не по положению прокрутки, поэтому заметно при любой скорости и во всех браузерах,
 * включая iPhone; соседние — по очереди, картинки — когда готовы (land.js). Скрываем, только если скрипт главной
 * работает (класс js ставится в <head> до показа страницы); скрипт не загрузился — через 2,5 с всё проявится само.
 */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-rv] {
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0s), translate 1.1s cubic-bezier(.16, .84, .24, 1) var(--rv-delay, 0s),
      scale 1.1s cubic-bezier(.16, .84, .24, 1) var(--rv-delay, 0s), transform .2s ease, box-shadow .2s ease;
  }
  html.js [data-rv]:not(.on) { opacity: 0; translate: 0 64px; }
  html.js [data-rv="left"]:not(.on) { translate: -80px 0; }
  html.js [data-rv="right"]:not(.on) { translate: 80px 0; }
  html.js [data-rv="zoom"]:not(.on) { translate: 0 48px; scale: .9; }
  html.js:not(.rv-ok) [data-rv]:not(.on) { animation: rvsafe .8s ease 2.5s forwards; }
}
@keyframes rvsafe { to { opacity: 1; translate: none; scale: none; } }

/*
 * Глубина при прокрутке (с 0.98; браузеры с анимацией по прокрутке): экраны в шагах чуть плывут внутри рамок, телефон
 * «BC ЧОО» покачивается, свечение тёмных полос медленно смещается. Один слой на блок, его двигает видеокарта; двигаем
 * не те же элементы, что проявляются (иначе анимация по прокрутке перебила бы проявление).
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps .shot img { scale: 1.06; animation: shotdrift linear both; animation-timeline: view(); animation-range: cover; }
    .agencies .phone { animation: tilt linear both; animation-timeline: view(); animation-range: cover; }
    .dark::before {
      content: ""; position: absolute; inset: -25% -15%; z-index: 0; pointer-events: none;
      background: radial-gradient(38% 42% at 32% 50%, rgba(227, 164, 105, .13), transparent 70%);
      animation: drift linear both; animation-timeline: view(); animation-range: cover;
    }
    .dark > .in { position: relative; z-index: 1; }
  }
}
@keyframes shotdrift { from { translate: 0 3%; } to { translate: 0 -3%; } }
@keyframes tilt { from { translate: 0 7%; rotate: -2.5deg; } to { translate: 0 -7%; rotate: 2.5deg; } }
@keyframes drift { from { translate: -14% 22%; } to { translate: 14% -22%; } }

/*
 * Шапка (с 0.97): наверху прозрачная — продолжение «обложки», при прокрутке становится тёмным стеклом. Её кнопка
 * «Заказать охрану» появляется, когда большая кнопка первого экрана ушла вверх, — на экране всегда одна. По нижней
 * кромке шапки тянется янтарная линия — сколько страницы прочитано. Всё — по прокрутке (видеокарта); браузер такого
 * не умеет — шапка как раньше.
 */
@supports (animation-timeline: scroll()) {
  .nav { margin-bottom: -70px; animation: navglass linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  .hero > .in:first-child { padding-top: 146px; }
  .nav .right .btn.sm { animation: navcta linear both; animation-timeline: scroll(root); animation-range: 260px 380px; }
  .nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(227, 164, 105, 0), rgba(227, 164, 105, .85) 82%, var(--amber2));
    animation: navprogress linear both; animation-timeline: scroll(root);
  }
  @media (max-width: 1040px) { .hero > .in:first-child { padding-top: 126px; } }
  @media (max-width: 680px) { .nav { margin-bottom: -62px; } .hero > .in:first-child { padding-top: 102px; } }
}
@keyframes navglass {
  from { background-color: rgba(11, 14, 25, 0); border-bottom-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@keyframes navcta { from { opacity: 0; translate: 0 -6px; visibility: hidden; } }
@keyframes navprogress { from { scale: 0 1; } to { scale: 1 1; } }