/* Шрифт лежит на своём домене: ничего не уходит на серверы Google,
   и у русской версии наконец есть фирменная гарнитура. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/golos-cyrillic-400.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/golos-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/golos-cyrillic-500.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/golos-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/golos-cyrillic-600.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/golos-latin-600.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{--wa:#0B7A5E;
  --navy:#0C1B2A; --gold:#C2A35A; --goldink:#A8873D; --goldtext:#866A2A; --ink:#0C1B2A; --body:#56657A;
  --line:#E3E8EE; --bg:#FFFFFF; --tint:#F5F7FA; --bodylight:#AEB8C4;
  --maxw:1240px;
  /* ШКАЛА ШРИФТА (решение владельца, вариант А). Опоры 390 и 1440, между ними
     линейный рост. Размеры больше не подбираются по месту: у роли есть имя. */
  --t-display:clamp(34px, 24.34px + 2.48vw, 60px);
  --t-h1:clamp(28px, 23.54px + 1.14vw, 40px);
  --t-h2:clamp(24px, 20.66px + 0.86vw, 33px);
  --t-h3:18px;
  --t-lead:clamp(17px, 15.89px + 0.29vw, 20px);
  --t-body:clamp(15.5px, 15.13px + 0.095vw, 16.5px);
  --t-ui:clamp(14px, 13.81px + 0.048vw, 14.5px);
  --t-small:clamp(12.5px, 12.31px + 0.048vw, 13px);
  /* ШИРИНА ТЕКСТА в единицах знака, а не в пикселях: одно и то же число
     пикселей даёт разную меру для разных размеров шрифта (720 пикселей это
     65 знаков прозы и 81 знак оговорки). Узкая для лидов и вводных абзацев,
     средняя для прозы. Колонки сетки (описание в подвале 300, левая колонка
     услуг 420, абзац призыва 520) сюда не входят: это ширина колонки. */
  --w-text:62ch;
  --w-prose:68ch;
  /* ДВИЖЕНИЕ. Три длительности вместо тринадцати и две кривые вместо
     браузерной по умолчанию. Быстрый шаг для наведения и мелких состояний,
     обычный для карточек и раскрытий, медленный для появления блоков. */
  --m-fast:150ms;
  --m-base:250ms;
  --m-slow:400ms;
  --m-out:cubic-bezier(.22,.61,.36,1);
  --m-inout:cubic-bezier(.4,0,.2,1);
  /* ШАГ. Одна шкала с основанием 8 вместо двадцати девяти значений отступа.
     Плотность секции: плотная, обычная, просторная. На телефоне своя тройка. */
  --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;
  /* Шапка раздела: под ней стоит закреплённая шапка сайта, поэтому сверху
     нужен шаг больше обычного. Это тот же шаг, а не число по месту. */
  --s-hero:calc(var(--s-16) + var(--s-4));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Golos Text',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 50px}
/* Ярлык секции всегда по центру, независимо от того, как выровнено содержимое
   секции (решение владельца по снимкам вариантов). Центр задан один раз здесь,
   чтобы страницы не расходились по одной забытой секции. */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.eyebrow .ln{width:28px;height:1px;background:var(--gold);display:inline-block;opacity:.85}
.eyebrow span.tx{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goldtext)}
.eyebrow.light span.tx{color:var(--gold)}
.h-sec{font-weight:500;line-height:1.2;letter-spacing:-.02em}
.sub-sec{line-height:1.6;color:var(--body);max-width:var(--w-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:15px;border-radius:50px;padding:14px 28px;cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--gold);color:var(--navy)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline:hover{border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--gold);color:var(--navy)}
.btn-goutline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-goutline:hover{border-color:var(--gold)}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .3s,box-shadow .3s}
header.scrolled{background:rgba(12,27,42,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(12,27,42,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:14px 18px 14px 28px}
header.scrolled .hbar{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
header.solid{background:rgba(12,27,42,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.solid .hbar{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.hbar .logo{flex:0 0 auto}
.logo img{height:34px;width:auto;display:block;flex:0 0 auto}
nav.main{display:flex;align-items:center;gap:28px}
nav.main a{color:rgba(255,255,255,.82);font-size:15px;transition:.2s;white-space:nowrap}
/* Шестой пункт «Контакты» не помещается в узкой части десктопа: от 1025
   до 1200 шаг между пунктами и кегль меньше, иначе кнопка уезжает за край. */
@media(min-width:1025px) and (max-width:1200px){
  nav.main{gap:16px}
  nav.main a{font-size:14px}
  .hbar{padding-left:20px}
}
/* Самая тесная точка: сразу за порогом гамбургера ряд ещё вылезал на 17
   пикселей, поэтому здесь шаг и поля сжаты сильнее. */
@media(min-width:1025px) and (max-width:1080px){
  nav.main{gap:12px}
  nav.main a{font-size:13px}
  .hright{gap:10px}
  .hbar{padding-left:16px;padding-right:12px}
}
nav.main a:hover,nav.main a.active{color:#fff}
.hright{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:2px;font-size:13px;color:rgba(255,255,255,.6)}
.lang .lang-item{background:none;border:none;color:rgba(255,255,255,.55);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px;text-decoration:none;transition:color .2s}
.lang a.lang-item:hover{color:#fff}
.lang .lang-sep{color:rgba(255,255,255,.55)}
.lang .lang-item.active{color:var(--gold)}
.hamb{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.hamb span{width:22px;height:2px;background:#fff;display:block;transition:.25s}
.mobnav{display:none}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;padding:var(--s-16) 0 0}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:#0C1B2A}
#heroSilk{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero .wrap{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%}
.hero h1{font-weight:500;line-height:1.07;letter-spacing:-.02em;max-width:920px;width:100%;text-wrap:balance}
.hero p.lead{color:rgba(255,255,255,.82);max-width:680px;margin-top:24px;line-height:1.6}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.ticker{position:relative;z-index:2;overflow:hidden;padding:24px 0;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;align-items:center;gap:40px;width:max-content;animation:tick 42s linear infinite}
.ticker-track span{white-space:nowrap;font-size:16px;font-weight:500;color:#fff}
.ticker-track i.dot{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;flex:0 0 auto}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
section.block{padding:96px 0}
/* Отступы блоков, которые раньше стояли прямо в разметке. В разметке их
   нельзя было уменьшить для телефона: инлайновый стиль сильнее медиазапроса. */
/* Классы задают только верх и низ. Запись padding:104px 0 обнуляла боковой
   отступ контейнера, и на любой ширине уже 1340px контент упирался в края. */
.wrap.pad-xl{padding-top:var(--s-16);padding-bottom:var(--s-16)}
.wrap.pad-lg{padding-top:var(--s-12);padding-bottom:var(--s-12)}
.wrap.pad-md{padding-top:var(--s-12);padding-bottom:var(--s-12)}
.wrap.pad-sm{padding-top:var(--s-8);padding-bottom:var(--s-8)}

.center-head{max-width:680px;margin:0 auto var(--s-6);text-align:center}

/* SECTOR GATEWAYS */
.sg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sg-card{display:flex;flex-direction:column;justify-content:space-between;min-height:172px;padding:24px;border:1px solid var(--line);border-radius:14px;transition:.25s}
.sg-card .tag{color:var(--body)}
.sg-card .row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:24px}
.sg-card .row b{font-weight:500;letter-spacing:-.01em}
.sg-card .arr{color:var(--goldtext);font-size:20px;transition:transform .25s}
.sg-card:hover .arr{transform:translateX(4px)}

/* PROBLEM (navy) */
.problem{background:var(--navy);color:#fff}
.problem .center-head .h-sec{color:#fff}
.problem .center-head .sub-sec{color:var(--bodylight)}
/* Р100: при общей ширине шапки 680 подзаголовок блока проблем шёл в три строки,
   и «рост.» висел один. С 760 он идёт в две строки по 60 знаков, заголовок
   остаётся в двух. */
.problem .center-head{max-width:760px}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pr-card{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:32px;transition:.25s}
.pr-card .acc{width:36px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:18px}
.pr-card h3{font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.pr-card p{color:var(--bodylight)}

/* CORE CAPABILITIES (accordion split) */
.cc-wrap{display:flex;gap:72px;align-items:flex-start}
.cc-left{flex:0 0 40%;position:sticky;top:120px;align-self:flex-start}
.cc-left .h-sec{color:var(--ink)}
.cc-left .sub-sec{margin-top:18px;max-width:420px}
.cc-right{flex:1 1 0}
.cc-item{border-top:1px solid var(--line)}
.cc-item:last-child{border-bottom:1px solid var(--line)}
.cc-head{display:flex;align-items:center;gap:18px;padding:26px 0;cursor:pointer}
/* Кнопка «Все услуги» под списком категорий на главной. */
.cc-all{margin-top:var(--s-4)}
.cc-head .num{font-size:15px;font-weight:600;color:var(--ink);min-width:30px;transition:.2s}
.cc-head .ttl{flex:1;font-weight:500;letter-spacing:-.01em}
.cc-head .pm{font-size:24px;line-height:1;transition:color .25s ease,transform .3s ease}
.cc-item.open .pm{transform:rotate(45deg)}
.cc-item.open .num,.cc-item.open .pm{color:var(--goldtext)}
/* Раскрытие через строку сетки, а не через max-height: высота не
   ограничена числом, браузер не пересчитывает раскладку каждый кадр. */
.cc-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.cc-item.open .cc-body{grid-template-rows:1fr;opacity:1;padding-bottom:28px}
.cc-body .inner{overflow:hidden;min-height:0;padding-left:0}
.cc-body p{line-height:1.7;color:var(--body)}
.cc-link{display:inline-block;margin-top:16px;color:var(--goldtext);font-size:14px;font-weight:500}

/* TIMELINE (navy) */
.tl{background:var(--navy);color:#fff}
.tl .center-head .h-sec{color:#fff}
.tl .center-head .sub-sec{color:var(--bodylight)}
.tl-grid{display:flex;align-items:flex-start;gap:8px}
.tl-col{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
.tl-col .num{font-size:40px;font-weight:600;line-height:1;color:var(--gold);letter-spacing:-.01em}
.tl-col h3{font-weight:500;margin-top:18px;letter-spacing:-.01em}
.tl-col p{color:var(--bodylight);margin-top:10px}
.tl-arr{flex:0 0 auto;color:rgba(194,163,90,.45);font-size:22px;margin-top:10px}

/* STANDARD (3 cols) */
.st-grid{display:flex;gap:48px;align-items:stretch}
.st-col{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.st-col .ico{width:50px;height:50px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.st-col .lbl{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goldtext);margin-bottom:12px}
.st-col .lead{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:10px}
.st-col p{font-size:14.5px;color:var(--body)}
.st-div{width:1px;background:rgba(12,27,42,.08)}

/* FINAL CTA */
/* Блок призыва один на весь сайт: светло-серая полоса между белым текстом
   сверху и тёмным подвалом снизу. Тёмный вариант сливался с подвалом. */
.finalcta{background:var(--tint);color:var(--ink);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.finalcta .h-sec{color:var(--navy);margin-bottom:14px}
/* Р103: подпись призыва на компьютере в одну строку (решение владельца от
   18 сентября). Самая длинная короткая подпись около 840 пикселей; длинная
   подпись матрицы идёт в две ровные строки. Строка до 80 знаков длиннее меры
   Р70, для одной фразы под заголовком это принято. */
.finalcta p{color:var(--body);max-width:880px;margin:0 auto 32px;text-wrap:balance}
.finalcta .btn-light{background:var(--navy);color:#fff;box-shadow:none}
.finalcta .btn-light:hover{background:var(--gold);color:var(--navy);box-shadow:none}

/* PAGE HEADERS (services/leadership/contact) */
.page-hero{background:var(--navy);color:#fff;padding:var(--s-hero) 0 var(--s-8);text-align:center}
.page-hero .h-sec{color:#fff}
.page-hero p{color:var(--bodylight);max-width:620px;margin:18px auto 0}

/* SERVICES PAGE: sticky two-column */
.srv-page{padding:150px 0 48px}
.srv-layout{display:grid;grid-template-columns:30% 1fr;gap:64px;align-items:start}
.srv-left{position:sticky;top:124px;align-self:start}
.srv-left .eyebrow{margin-bottom:20px}
.srv-left .h-sec{color:var(--navy);line-height:1.15;margin-bottom:18px}
.srv-left p{color:var(--body);line-height:1.7;margin-bottom:28px}
.srv-right{display:flex;flex-direction:column;gap:20px}
.srv-card2{display:block;position:relative;border:1px solid var(--line);border-radius:18px;padding:40px;background:#fff;transition:.25s;scroll-margin-top:110px}
.sc-head{display:flex;align-items:baseline;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.sc-num{font-size:18px;font-weight:600;color:var(--goldtext)}
.sc-sep{color:var(--goldtext);opacity:.45}
.sc-title{font-weight:600;color:var(--navy);letter-spacing:-.01em}
.sc-desc{color:var(--body);line-height:1.7;margin-bottom:24px;max-width:640px}
.sc-mods{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 28px}
.sc-mods li{position:relative;padding-left:20px;color:var(--navy);line-height:1.5}
.sc-mods li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.sc-arrow{position:absolute;top:36px;right:38px;color:var(--goldtext);font-size:20px;transition:transform .25s,opacity .25s;opacity:0}
.srv-card2:hover .sc-arrow{opacity:1;transform:translateX(4px)}

/* LEADERSHIP PAGE */
/* Имя и должность над обеими колонками, ниже фото и текст одной высоты:
   ячейка фото растягивается по высоте текста, снимок заполняет её. */
.ld-founder{display:grid;grid-template-columns:260px minmax(0,600px);column-gap:56px;align-items:stretch}
.ld-head{grid-column:1/-1;margin-bottom:28px}
.ld-photo{position:relative;min-height:260px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(62% 44% at 50% 24%,rgba(194,163,90,.13),transparent 70%),radial-gradient(120% 90% at 50% 0%,#132638 0%,#04080d 68%);border:1px solid rgba(194,163,90,.28);box-shadow:0 18px 44px rgba(12,27,42,.16)}
.ld-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:64px;font-weight:600;letter-spacing:.04em}
.ld-photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.ld-team{background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%);color:#fff}
.ld-team .h-sec{color:#fff;margin:6px 0 20px}
.ld-team p{color:var(--bodylight);max-width:var(--w-prose);margin-bottom:16px;line-height:1.75}
.ld-regions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ld-regions span{font-size:13px;font-weight:600;letter-spacing:.06em;color:#fff;border:1px solid rgba(194,163,90,.45);border-radius:999px;padding:8px 18px}
.ld-info{min-width:0}
.ld-head h2{font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.ld-role{color:var(--goldtext);font-weight:500;margin-top:6px}
.ld-info p{color:var(--body);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-size:13px;font-weight:500;color:var(--navy);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.ld-social{margin-top:24px}
.ld-soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;color:var(--navy);transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.ld-soc:hover{border-color:var(--goldtext);color:var(--goldtext);background:var(--tint);transform:translateY(-1px)}
.ld-soc svg{width:20px;height:20px;fill:currentColor}
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eng-card{border:1px solid var(--line);border-radius:14px;padding:32px}
.eng-card .acc{width:36px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:16px}
.eng-card h3{font-weight:600;color:var(--navy);margin-bottom:8px}
.eng-card p{color:var(--body)}

/* CONTACT */
.ct-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
/* Левая колонка короче формы на 349 пикселей: это разница содержания, а не
   раскладки. Колонка закрепляется и едет вместе с прокруткой, пока человек
   заполняет форму. Только там, где она помещается в экран по высоте, и только
   при двух колонках: страница складывается в одну колонку до 900, и с порогом
   681 закреплённая колонка между 681 и 900 ехала поверх формы. */
@media(min-width:901px) and (min-height:700px){
  .ct-info{position:sticky;top:110px;align-self:start}
}
.ct-info h2,.ct-form h2{color:var(--navy);margin-bottom:14px}
/* Между шагами и формой нужен воздух: два заголовка подряд иначе
   читаются как один блок. */
/* Шаги стоят под контактами: между ними нужен воздух, иначе заголовок
   «Если оставить заявку» липнет к строке про WhatsApp. */
.ct-info .ct-steps{margin-bottom:0}
.ct-info .wa-note + h2{margin-top:var(--s-4)}
.ct-info p{color:var(--body);margin-bottom:18px}
.ct-info .meta{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:500;margin-bottom:10px}
/* Что будет после отправки. Номер рисуется счётчиком, а не списком по
   умолчанию: так он держит золотой цвет и не спорит с отступами колонки. */
.ct-steps{list-style:none;counter-reset:ctstep;margin:0 0 26px}
.ct-steps li{counter-increment:ctstep;position:relative;padding-left:34px;margin-bottom:14px;color:var(--body)}
.ct-steps li::before{content:counter(ctstep);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--goldtext);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.mico{display:inline-flex;color:var(--goldtext);flex:0 0 auto}
.mico svg{width:16px;height:16px}
.wa-meta a{color:var(--wa)}
.wa-meta a:hover{text-decoration:underline}
.wa-meta .mico{color:var(--wa)}
.wa-note{line-height:1.4;color:var(--body);margin:4px 0 0 26px}

form .frow{margin-bottom:16px}
form label{display:block;font-size:13px;font-weight:500;color:var(--navy);margin-bottom:6px}
form input,form select,form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--goldtext)}
form textarea{min-height:120px;resize:vertical}
.formnote{color:var(--body);margin-top:10px}
.freq{color:var(--body);margin-bottom:16px}
.req{color:var(--goldtext);font-weight:600}
.ferr{display:block;color:#A3303D;margin-top:6px}
.fcheck{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.fcheck input[type=checkbox]{width:18px;height:18px;margin:3px 0 0;padding:0;accent-color:var(--navy)}
.fcheck label{margin:0;font-size:13px;font-weight:400;color:var(--body);line-height:1.5}
.fcheck .ferr{grid-column:1 / -1;margin-top:0}
.frow.is-error input,.frow.is-error select,.frow.is-error textarea{border-color:#A3303D}
.fcheck.is-error input[type=checkbox]{outline:2px solid #A3303D;outline-offset:2px}
.formerr{font-size:14px;color:#A3303D;margin-bottom:12px}
.formerr[hidden]{display:none}
/* Подпись под блоком «пока ждёте» на странице благодарности. */
.thx-note{max-width:620px;margin:36px auto 0;text-align:center;font-size:14px;color:var(--body)}

/* LEGAL / PRIVACY */
.legal{max-width:720px;margin:0 auto}
.legal h2{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--body);line-height:1.75;margin-bottom:12px}
.legal ul{margin:0 0 12px 20px}
.legal li{color:var(--body);line-height:1.7;margin-bottom:6px}
.legal .upd{color:var(--body);margin-bottom:28px}

/* FOOTER */
footer{background:var(--navy);color:#fff;padding:var(--s-8) 0 var(--s-4)}
/* Решение владельца от 18 сентября: навигация, направления, контакты, бренд
   последним на всех ширинах. */
.ft-top{display:grid;grid-template-columns:.9fr 1.2fr 1.1fr 1.6fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.10)}
.ft-brand{order:4}
.ft-brand .logo{margin-bottom:14px}
.ft-brand p{color:var(--bodylight);max-width:300px}
.ft-col .ft-h{margin-top:0;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:16px;font-weight:600}
.ft-col a,.ft-col p{display:block;color:var(--bodylight);margin-bottom:10px;transition:.2s;cursor:pointer}
.ft-col a:hover{color:#fff}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;flex-wrap:wrap}
.ft-bottom p{color:rgba(255,255,255,.5)}
/* Ссылка на политику: наведение задаётся стилем, а не обработчиком в
   разметке, иначе она зависит от разрешения на встроенные скрипты. */
.ft-privacy{color:rgba(255,255,255,.5);transition:color .2s}
.ft-privacy:hover{color:#fff}
.ft-req{color:rgba(255,255,255,.6);line-height:1.55;margin-top:18px}
/* Дисклеймер идёт во всю ширину линии над ним (решение владельца): так подвал
   ниже. Цена известна: на широком экране строка около 150 знаков, для
   служебного мелкого текста это принято сознательно. */
.ft-disc{color:rgba(255,255,255,.6);line-height:1.55;margin-top:18px;max-width:none}

/* ===== VISUAL POLISH ===== */
.btn{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn-light{box-shadow:0 6px 18px rgba(0,0,0,.16)}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn-navy:hover,.btn-goutline:hover,.btn-outline:hover{transform:translateY(-1px)}
nav.main a{position:relative}
nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold);transition:width .25s ease}
nav.main a:hover::after,nav.main a.active::after{width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* В тёмных секциях тёмный контур не виден, там фокус золотой. */
header a:focus-visible,header button:focus-visible,.hero a:focus-visible,.hero button:focus-visible,.problem a:focus-visible,.tl a:focus-visible,.jur a:focus-visible,.jur button:focus-visible,footer a:focus-visible,footer button:focus-visible,.mobnav a:focus-visible,.mobnav button:focus-visible,.finalcta.dark a:focus-visible{outline-color:var(--gold)}
.problem,.tl{background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%)}
.page-hero{background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%)}
/* Обычно между тёмным героем и тёмной секцией стоит светлая, поэтому каждая
   ведёт свой градиент сверху вниз. Когда две тёмные идут встык, на границе
   видна ступенька: верхняя закончилась цветом #091420, а нижняя начинает
   заново с #0C1B2A. Нижняя в этом случае продолжает цвет верхней, и тёмная
   часть страницы читается как один кусок. */
.page-hero + .tl,.page-hero + .problem{background:#091420}
footer{border-top:1px solid rgba(194,163,90,.30)}
.eng-card{transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.st-col .ico{box-shadow:0 10px 24px rgba(12,27,42,.20)}
/* hero load-in (uniform across all page heroes; retriggers on page switch) */
.hero h1,.hero p.lead,.hero .cta,
.page-hero h1,.page-hero p,
.sec-hero h1,.sec-hero .lead,.sec-hero .btn,
.srv-hero h1,.srv-hero .lead,.srv-hero .btn,
.svc-hero h1,.svc-hero .lead,.svc-hero .btn{animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both}
.hero p.lead,.page-hero p,.sec-hero .lead,.srv-hero .lead,.svc-hero .lead{animation-delay:.08s}
.hero .cta,.sec-hero .btn,.srv-hero .btn,.svc-hero .btn{animation-delay:.16s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* scroll reveal: uses CSS `translate` so it never conflicts with hover `transform` */
.js .center-head,.js .sg-card,.js .pr-card,.js .cc-item,.js .tl-col,.js .st-col,.js .srv-card2,.js .eng-card,.js .ld-founder,.js .cc-left,.js .finalcta .wrap,.js .page-hero .wrap{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .55s cubic-bezier(.22,.61,.36,1),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .center-head.in,.js .sg-card.in,.js .pr-card.in,.js .cc-item.in,.js .tl-col.in,.js .st-col.in,.js .srv-card2.in,.js .eng-card.in,.js .ld-founder.in,.js .cc-left.in,.js .finalcta .wrap.in,.js .page-hero .wrap.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .ticker-track{animation:none!important}
  .hero h1,.hero p.lead,.hero .cta,.page-hero h1,.page-hero p,.sec-hero h1,.sec-hero .lead,.sec-hero .btn,.srv-hero h1,.srv-hero .lead,.srv-hero .btn,.svc-hero h1,.svc-hero .lead,.svc-hero .btn{animation:none!important}
  .js .center-head,.js .sg-card,.js .pr-card,.js .cc-item,.js .tl-col,.js .st-col,.js .srv-card2,.js .eng-card,.js .ld-founder,.js .cc-left,.js .finalcta .wrap,.js .page-hero .wrap{opacity:1!important;translate:none!important;transition:none!important}
}

/* ===== SECTOR PAGES ===== */
.sec-hero{position:relative;overflow:hidden;color:#fff;padding:var(--s-hero) 0 var(--s-12);text-align:center;background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%)}
.sec-hero .wrap{position:relative;z-index:2}
.sec-back{display:inline-flex;align-items:center;gap:6px;color:var(--bodylight);font-size:14px;font-weight:500;margin-bottom:14px;transition:color .2s}
.sec-back:hover{color:#fff}
.sec-hero .sec-eyebrow{margin-bottom:18px}
.sec-hero h1{font-weight:500;line-height:1.12;letter-spacing:-.02em;max-width:800px;margin:0 auto}
.sec-hero .lead{color:rgba(255,255,255,.82);max-width:660px;margin:22px auto 0;line-height:1.6}
.sec-hero .btn{margin-top:36px}
.sec-hero .btn:hover{transform:translateY(-1px)!important}
.sec-pains{background:var(--tint)}
.spain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* Р105: у отрасли может быть три риска (крипто). Парами третья карточка
   висела бы одна, поэтому на компьютере три в ряд, а на средней ширине третья
   во всю строку. */
@media(min-width:1024px){
  .spain-grid:has(> .spain-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
@media(min-width:800px) and (max-width:1023px){
  .spain-grid > .spain-card:nth-child(3):last-child{grid-column:1 / -1}
}
.spain-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.spain-card .acc{width:36px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:18px}
.spain-card h3{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:10px}
.spain-card p{color:var(--body);line-height:1.6}
.sec-sol{max-width:880px;margin:0 auto}
.sec-sol-item{border-top:1px solid var(--line)}
.sec-sol-item:last-child{border-bottom:1px solid var(--line)}
.ss-head{display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer}
.ss-code{font-size:14px;font-weight:600;color:var(--ink);min-width:34px;transition:color .2s}
.ss-name{flex:1;font-weight:500;color:var(--navy);letter-spacing:-.01em}
.ss-pm{font-size:24px;line-height:1;color:var(--ink);transition:color .25s ease,transform .3s ease}
.sec-sol-item.open .ss-pm{transform:rotate(45deg)}
.sec-sol-item.open .ss-code,.sec-sol-item.open .ss-pm{color:var(--goldtext)}
.ss-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.sec-sol-item.open .ss-body{grid-template-rows:1fr;opacity:1;padding-bottom:26px}
.ss-body .inner{overflow:hidden;min-height:0;padding-left:0}
.ss-body p{color:var(--body);line-height:1.7}
.ss-link{display:inline-block;margin-top:14px;color:var(--goldtext);font-size:14px;font-weight:500}
.ss-link:hover{text-decoration:underline}
.js .spain-card,.js .sec-sol-item{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .55s cubic-bezier(.22,.61,.36,1),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .spain-card.in,.js .sec-sol-item.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .spain-card,.js .sec-sol-item{opacity:1!important;translate:none!important;transition:none!important}}

/* ===== SECTORS HUB ===== */
.hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.hub-card{flex:0 1 calc(33.333% - 16px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:32px;background:#fff;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.hub-card .ico{width:48px;height:48px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 10px 24px rgba(12,27,42,.18)}
.hub-card h2{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:12px;line-height:1.3}
.hub-card p{color:var(--body);line-height:1.65;flex:1}
.hub-card .hub-cta{margin-top:22px;color:var(--goldtext);font-size:14px;font-weight:500}
.hub-card:hover .hub-cta{text-decoration:underline}
.js .hub-card{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .55s cubic-bezier(.22,.61,.36,1),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .hub-card.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .hub-card{opacity:1!important;translate:none!important;transition:none!important}}

/* ===== SERVICES PAGE (hero + category tiles) ===== */
.srv-hero{position:relative;overflow:hidden;color:#fff;padding:var(--s-hero) 0 var(--s-8);text-align:center;background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%)}
.srv-hero .wrap{position:relative;z-index:2}
.srv-hero h1{font-weight:500;line-height:1.1;letter-spacing:-.02em;max-width:720px;margin:0 auto}
.srv-hero .lead{color:rgba(255,255,255,.82);max-width:620px;margin:20px auto 0;line-height:1.6}
.srv-hero .btn{margin-top:34px}
.srv-hero .btn:hover{transform:translateY(-1px)!important}
.srv-cats{display:flex;flex-direction:column;gap:20px}
/* Заголовок группы услуг. Вид берётся от ярлыка секции, но это настоящий h2:
   плоский список из десяти услуг превращается в четыре смысловых раздела. */
.srv-group{margin:var(--s-8) 0 var(--s-3)}
/* Описание группы: тот же текст, что в аккордеоне на главной. Без него
   страница услуг была списком из тринадцати одинаковых карточек. */
.srv-group:first-child{margin-top:0}
.srv-cat{border:1px solid var(--line);border-radius:18px;padding:40px;background:#fff;scroll-margin-top:110px}
.srv-cat-head{display:flex;gap:22px;align-items:flex-start;margin-bottom:22px}
.srv-cat-num{font-size:30px;font-weight:600;color:var(--goldtext);line-height:1;letter-spacing:-.01em;min-width:46px}
.srv-cat-head h3{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:8px}
.srv-cat-head p{color:var(--body);line-height:1.6;max-width:var(--w-text)}
.srv-sublist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;border-top:1px solid var(--line);margin-top:26px;padding-top:26px}
.srv-sublist a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;margin:0 -14px;border-radius:10px;transition:background .2s ease}
.srv-sublist .nm{font-size:15px;font-weight:500;color:var(--navy);transition:color .2s ease}
.srv-sublist .arr{color:var(--goldtext);font-size:16px;flex:0 0 auto;transition:transform .2s ease}
.srv-sublist a:hover{background:var(--tint)}
.srv-sublist a:hover .nm{color:var(--goldtext)}
.srv-sublist a:hover .arr{transform:translateX(4px)}

/* ===== SERVICE DETAIL PAGE ===== */
.svc-hero{position:relative;overflow:hidden;color:#fff;padding:var(--s-hero) 0 var(--s-8);text-align:center;background:linear-gradient(180deg,#0C1B2A 0%,#091420 100%)}
.svc-hero .wrap{position:relative;z-index:2}
.crumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:var(--bodylight);margin-bottom:22px}
.crumb a{color:var(--bodylight);transition:color .2s}
.crumb a:hover{color:#fff}
.crumb i{color:rgba(194,163,90,.65);font-style:normal}
.crumb span{color:#fff}
.svc-hero h1{font-weight:500;line-height:1.12;letter-spacing:-.02em;max-width:760px;margin:0 auto}
.svc-hero .lead{color:rgba(255,255,255,.82);max-width:780px;margin:20px auto 0;line-height:1.6}
.svc-hero .btn{margin-top:32px}
.svc-hero .btn:hover{transform:translateY(-1px)!important}
.svc-scope p{line-height:1.7;color:var(--navy);max-width:var(--w-prose)}
.deliv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin-left:auto;margin-right:auto}
/* Три результата: на компьютере три в ряд, на средней ширине третий во всю
   строку, чтобы не висел один (как Р105 у рисков отрасли). */
@media(min-width:1024px){
  .deliv-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr);max-width:none}
}
@media(max-width:1023px) and (min-width:681px){
  .deliv-grid > :nth-child(3):last-child{grid-column:1 / -1}
}
.deliv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.deliv-card .acc{width:36px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:18px}
.deliv-card h3{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:10px}
.deliv-card p{color:var(--body);line-height:1.65}
.svc-sec-intro{color:var(--body);max-width:620px;margin-bottom:24px}
.svc-tags{display:flex;flex-wrap:wrap;gap:12px}
.svc-tag{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--navy);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:12px 22px;transition:border-color .2s ease,background .2s ease}
.svc-tag .arr{color:var(--goldtext);transition:transform .2s ease}
.svc-tag:hover{border-color:var(--gold);background:#fff}
.svc-tag:hover .arr{transform:translateX(3px)}
.js .srv-cat,.js .deliv-card{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .55s cubic-bezier(.22,.61,.36,1),transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.js .srv-cat.in,.js .deliv-card.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .srv-cat,.js .deliv-card{opacity:1!important;translate:none!important;transition:none!important}}

/* ===== PREMIUM INTERACTIONS ===== */
/* Services accordion (smooth height via grid-rows) */
.srv-cat-head{margin-bottom:0;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.srv-cat-meta{flex:1}
.srv-cat-pm{font-size:24px;line-height:1;color:var(--ink);transition:color .2s ease;margin-left:18px;flex:0 0 auto}
.srv-cat.open .srv-cat-num,.srv-cat.open .srv-cat-pm{color:var(--goldtext)}
.srv-cat-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.srv-cat.open .srv-cat-body{grid-template-rows:1fr}
.srv-cat-bodyInner{overflow:hidden;min-height:0}
/* Flow diagram (logic chain) */
.srv-flow{display:flex;flex-wrap:wrap;align-items:center;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.flow-node{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff;position:relative;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.fn-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s ease,box-shadow .3s ease;flex:0 0 auto}
.fn-nm{font-size:14px;font-weight:500;color:var(--navy);transition:color .3s ease;white-space:nowrap}
.flow-link{width:34px;height:1px;background:var(--line);position:relative;flex:0 0 auto;transition:background .3s ease}
.flow-link::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);transition:border-color .3s ease}
.flow-node.on{border-color:var(--gold);box-shadow:0 6px 18px rgba(194,163,90,.16)}
.flow-node.on .fn-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(194,163,90,.14)}
.flow-link.on{background:var(--gold)}
.flow-link.on::after{border-color:var(--gold)}
.srv-flow.lit .flow-node:not(.on){opacity:.55}
.flow-node,.flow-link{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,opacity .3s ease}
/* Spotlight glow on bento cards */
.hub-card,.sg-card{position:relative}
.hub-card::before,.sg-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(194,163,90,.13),transparent 65%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.hub-card:hover::before,.sg-card:hover::before{opacity:1}
.hub-card>*,.sg-card>*{position:relative;z-index:1}
/* Deep micro-contrast hover */
.hub-card,.sg-card,.spain-card,.eng-card,.deliv-card,.srv-cat{transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease,background .3s ease}
/* Tilt icons */
.hub-card .ico,.st-col .ico{transition:transform .25s cubic-bezier(.22,.61,.36,1);will-change:transform}
/* Presence map */
.ld-map{position:relative;margin:42px auto 0;max-width:540px}
/* Подпись под глобусом: точки это юрисдикции проектов, а не офисы. */
/* Факты стоят внутри тёмного блока команды: цифра и подпись там белые,
   расшифровка приглушена так же, как абзацы блока. Шапка блока по центру,
   как у остальных секций, поэтому и факты на широком экране центрируются:
   слева они спорили с центрованным заголовком над ними. */
.ld-team .center-head p{max-width:none;margin:0 auto}
.ld-team .facts-grid{margin-top:var(--s-8)}
.ld-team .fact{text-align:center}
.ld-team .fact::before{margin-left:auto;margin-right:auto}
/* Подпись под ярлыком «Избранные проекты». */
.eng-note{max-width:680px;margin:0 auto var(--s-6);text-align:center;color:var(--body)}
.ld-team .fact-n,.ld-team .fact-t{color:#fff}
.ld-team .fact-d{color:var(--bodylight)}
/* На ширине ноутбука глобус занимал отдельный экран: секция 1077 пикселей, из
   них 540 холст. Размер холста скрипт берёт из ширины контейнера, поэтому
   уменьшаем контейнер, а не холст: шар остаётся круглым, секция 863. */
@media(min-width:900px) and (max-width:1200px){
  .ld-map{max-width:340px;margin-top:var(--s-4)}
}
#globe{display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
.globe-hint{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);pointer-events:none}
.map-pins{position:absolute;inset:0;pointer-events:none}
.map-pin{position:absolute;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s ease}
.map-pin.on{opacity:1}
.map-pin.on .map-hit{pointer-events:auto}
.map-hit{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;cursor:default}
.map-tip{position:absolute;bottom:16px;left:0;transform:translate(-50%,6px);width:max-content;max-width:240px;background:rgba(12,27,42,.55);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:11px 15px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;box-shadow:0 18px 44px rgba(0,0,0,.45);pointer-events:none;z-index:5;text-align:left}
.map-tip .tcity{display:block;font-weight:600;color:#fff;letter-spacing:-.01em;margin-bottom:3px}
.map-tip .ts{display:block;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;white-space:nowrap}
.map-tip .tt{font-weight:500;color:rgba(255,255,255,.9);letter-spacing:-.01em;line-height:1.35;white-space:normal}
.map-pin.on:hover .map-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
  .map-pulse{animation:none!important}
  .map-spark{display:none}
  .hub-card .ico,.st-col .ico{transform:none!important}
}

/* ===== LOCALE TYPOGRAPHY (RU headlines a touch smaller + long-word safety) ===== */
.hero h1,.h-sec,.sec-hero h1,.svc-hero h1,.srv-hero h1,.page-hero h1,.srv-cat-head h3,.spain-card h3,.pr-card h3{overflow-wrap:break-word;word-break:normal}

.hero h1,.h-sec,.sec-hero h1,.srv-hero h1,.svc-hero h1,.page-hero h1{text-wrap:balance}
.tl-col h3,.tl-col p,.st-col .lead{text-wrap:balance}

/* service category page: cascade accordion */
.svc-acc{border-top:1px solid var(--line)}
.svc-item{border-bottom:1px solid var(--line)}
.svc-h{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.svc-head{display:flex;align-items:center;gap:20px;padding:26px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svc-num{font-size:15px;font-weight:600;color:var(--goldtext);min-width:34px}
.svc-name{flex:1;font-weight:500;color:var(--navy);letter-spacing:-.01em}
.svc-pm{font-size:26px;line-height:1;color:var(--ink);transition:color .25s ease,transform .3s ease}
.svc-item.open .svc-pm{color:var(--goldtext);transform:rotate(45deg)}
.svc-item.open .svc-num,.svc-item.open .svc-name{color:var(--goldtext)}
.svc-item.open .svc-name{color:var(--navy)}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.svc-item.open .svc-body{grid-template-rows:1fr}
.svc-bodyInner{overflow:hidden;min-height:0}
.svc-pad{padding:10px 4px 38px 54px}
.svc-desc2{line-height:1.6;color:var(--navy);max-width:var(--w-prose)}
.svc-lbl{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin:28px 0 12px}
.svc-lbl .ln{width:22px;height:1px;background:var(--gold);opacity:.85;display:inline-block}
.svc-scope-p{line-height:1.75;color:var(--body);max-width:var(--w-prose)}
.svc-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px}
.svc-dcard{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:24px;transition:border-color .25s ease}
.svc-dcard .acc{display:block;width:32px;height:3px;border-radius:2px;background:var(--gold);margin:0 0 14px 0}
.svc-dcard h3{font-weight:600;color:var(--navy);letter-spacing:-.01em;margin-bottom:8px}
.svc-dcard p{color:var(--body);line-height:1.6}
.svc-page-link{margin:22px 0 0}
.svc-page-link a{color:var(--goldtext);font-weight:500;font-size:14px}
.svc-cta-row{margin-top:42px}
.srv-cat-link{display:block;cursor:pointer}
.srv-cat-link .srv-cat-head{cursor:pointer}
.srv-cat-arrow{color:var(--goldtext);font-size:22px;margin-left:18px;flex:0 0 auto;transition:transform .25s ease}
.srv-cat-link:hover .srv-cat-arrow{transform:translateX(4px)}

/* RESPONSIVE */
@media(max-width:1024px){
  .wrap{padding:0 32px}
  nav.main{display:none}
  .hamb{display:flex}
  .sg-grid{grid-template-columns:repeat(2,1fr)}
  .cc-wrap{flex-direction:column;gap:40px}
  .cc-left{width:100%;text-align:center;position:static}
  .cc-left .sub-sec{margin-left:auto;margin-right:auto}
  .cc-all{text-align:center}
  .srv-page{padding:128px 0 16px}
  .srv-layout{grid-template-columns:1fr;gap:36px}
  .srv-left{position:static}
  .srv-hero{padding:128px 0 56px}
  /* Шаги процесса: четыре колонки по 40 процентов давали 252 пикселя и строку
     в 14 до 22 знаков. С 17 сентября колонки идут парами, строка около 40
     знаков. С 18 сентября по решению владельца шаги по центру, как на телефоне
     и на десктопе: в широкой колонке центр читается, узкие строки не вернулись. */
  .tl-grid{flex-wrap:wrap;justify-content:center;gap:40px 32px;max-width:620px;margin-left:auto;margin-right:auto}
  .tl-col{flex:0 0 calc(50% - 16px);text-align:center;align-items:center;padding:0}
  .tl-col h3,.tl-col p{text-align:center}
  .tl-arr{display:none}
  .svc-hero{padding:128px 0 60px}
  .hub-card{flex-basis:calc(50% - 12px)}
  .eng-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .mobnav.open{display:block}
  .mobnav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--navy);z-index:120;padding:90px 32px 32px;flex-direction:column;gap:6px;overflow-y:auto}
  .mobnav a{display:block;color:#fff;font-size:22px;font-weight:500;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobnav .mlang{display:flex;gap:8px;margin-top:24px}
  .mobnav .mlang button{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:none;color:#fff;font:inherit;font-weight:600;cursor:pointer}
  .mobnav .mlang button.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
  .mobnav .btn{margin-top:18px;width:100%}
  .mobnav a.btn-light{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--navy);border-bottom:none;padding:15px 28px;font-size:16px}
  .mobclose{position:absolute;top:28px;right:32px;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1}
}
@media(max-width:680px){
  section.block{padding:56px 0}
  .wrap.pad-xl,.wrap.pad-lg{padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .wrap.pad-md,.wrap.pad-sm{padding-top:var(--s-6);padding-bottom:var(--s-6)}

  .wrap{padding:0 22px}
  section.block{padding:72px 0}
  .sg-grid{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:1fr}
  .tl-grid{flex-direction:column;gap:40px}
  .tl-arr{display:none}
  .tl-col{max-width:480px;margin:0 auto;align-items:center;text-align:center}
  .tl-col h3,.tl-col p{text-align:center}
  .st-grid{flex-direction:column;gap:40px}
  .st-div{display:none}
  .st-col{max-width:460px;margin:0 auto}
  .srv-page{padding:112px 0 8px}
  .srv-card2{padding:24px}
  .sc-mods{grid-template-columns:1fr}
  .sc-arrow{display:none}
  .sec-hero{padding:128px 0 64px}
  .spain-grid{grid-template-columns:1fr}
  .ss-head{gap:12px}
  .ss-body .inner{padding-left:0}
  .hub-card{flex-basis:100%}
  .srv-cat{padding:24px}
  .srv-cat-head{gap:16px}
  .srv-cat-num{font-size:24px;min-width:36px}
  .srv-sublist{grid-template-columns:1fr}
  .svc-pad{padding:6px 0 30px 0}
  .svc-dgrid{grid-template-columns:1fr}
  .svc-h{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.svc-head{gap:14px}
  .deliv-grid{grid-template-columns:1fr}
  form input,form select,form textarea{font-size:16px}
  .eng-grid{grid-template-columns:1fr}

  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-brand p{max-width:none}
  .hbar{padding:12px 14px 12px 16px;gap:10px}
  .logo{font-size:16px;gap:8px}
  .logo img{height:30px}
  .lang{font-size:var(--t-small)}
  .lang .lang-item{padding:4px 4px}
}
/* Ниже 410 пикселей название рядом с переключателем языка не помещается:
   на ширине 375 тексту нужно 186 пикселей, а свободных остаётся 161, и он
   заезжал на «EN». Граница взята с запасом: на 400 текст ещё влезает, но
   до переключателя остаётся 10 пикселей, и шапка выглядит забитой. На
   таких экранах остаётся знак, а название читается в подвале и в заголовке
   вкладки. Подвала правило не касается: там строка стоит одна. */
@media(max-width:409px){
  .hbar .logo-name{display:none}
  .hbar{gap:6px}
}
@media(max-width:374px){
  .logo img{height:26px}
}

footer a[href^="mailto"],footer a[href^="tel"]{color:inherit;transition:color .2s}
footer a[href^="mailto"]:hover,footer a[href^="tel"]:hover{color:var(--gold)}

/* ХЛЕБНЫЕ КРОШКИ */
/* Живут внутри героя и занимают место прежней ссылки «назад»,
   поэтому наследуют её отступ и не спорят с плавающей шапкой. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:18px;font-size:14px;font-weight:500;color:var(--bodylight)}
.crumbs a{color:var(--bodylight);transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs .crumb-sep{color:rgba(255,255,255,.55)}
.crumbs [aria-current="page"]{color:rgba(255,255,255,.9)}
@media(max-width:900px){
  /* Две колонки на планшете давали поля формы по 320px и пустую половину
     экрана слева, потому что левая колонка короче формы. */
  .ct-wrap{grid-template-columns:1fr;gap:36px}

  /* Пальцем труднее попасть, чем курсором, поэтому отдельно стоящие ссылки
     получают высоту около 44px. Ссылки внутри абзацев не трогаем: разрывать
     строку ради зоны нажатия хуже, чем оставить её как есть. */
  .ft-col a{padding:11px 0;margin-bottom:0}
  .ft-bottom a{display:inline-block;padding:10px 0}
  .lang .lang-item{padding:10px 8px}
  /* Ссылка на главную была высотой со знак, от 26 до 34px. На узком экране
     от неё остаётся только знак (Р46), поэтому минимум задан и по ширине. */
  .hbar .logo{min-height:44px;min-width:44px}
  .crumbs a,.crumbs span[aria-current]{display:inline-block;padding:11px 0}
  .eyebrow-link{padding:10px 0}
  .ss-link,.pub-related-link,.pub-card-link{display:inline-block;padding:10px 0}
  .ct-info .meta{min-height:44px}
  .ct-info .meta a{display:inline-block;padding:10px 0}
  .fcheck input[type=checkbox]{width:24px;height:24px}
  /* Кнопка меню и переключатель языка были меньше 44 пикселей: пальцем в них
     попадали не с первого раза. */
  .hamb{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .lang .lang-item{min-width:44px;text-align:center;padding:10px 8px}
}


@media(max-width:760px){
  .hright .btn{display:none}

  .crumbs{margin-bottom:12px}
}

/* ПУБЛИКАЦИИ */
.pub-layout{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.pub-body h2{font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:34px 0 12px}
.pub-body h2:first-child{margin-top:0}
.pub-body p{line-height:1.7;color:var(--body);margin-bottom:14px}
.pub-terms{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.pub-terms p{line-height:1.6;color:var(--body);margin-bottom:10px}
.pub-terms p:last-child{margin-bottom:0}

.pub-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.pub-dl{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--tint)}
.pub-dl-head{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goldtext);margin-bottom:18px}
.pub-file{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s ease,transform .2s ease}
.pub-file:hover{border-color:var(--gold);transform:translateY(-1px)}
.pub-file-ext{flex:0 0 auto;min-width:52px;padding:6px 8px;border-radius:8px;background:var(--navy);color:#fff;font-weight:600;letter-spacing:.08em;text-align:center}
.pub-file-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pub-file-name{font-weight:500;color:var(--ink)}
.pub-file-size{color:var(--body)}
.pub-dl-note{line-height:1.5;color:var(--body);margin-top:14px}

.pub-related{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.pub-related-head{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goldtext);margin-bottom:10px}
.pub-related-link{font-weight:500;color:var(--ink);transition:color .2s}
.pub-related-link:hover{color:var(--goldtext)}

.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,820px));justify-content:center;gap:28px}
.pub-card{position:relative;display:grid;grid-template-columns:minmax(180px,26%) 1fr;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.pub-card-cover{position:relative;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--tint);border-right:1px solid var(--line)}
.pub-card-cover img{width:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:3px;
  box-shadow:0 16px 36px rgba(12,27,42,.20),0 3px 8px rgba(12,27,42,.10);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease}
.pub-card:hover .pub-card-cover img{transform:translateY(-4px);box-shadow:0 26px 54px rgba(12,27,42,.26),0 4px 10px rgba(12,27,42,.12)}
.pub-card-panel{display:flex;flex-direction:column;gap:12px;padding:40px}
.pub-card-rubric{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goldtext)}
.pub-card h2{font-weight:600;line-height:1.28;color:var(--ink);letter-spacing:-.01em}
.pub-card-link{color:inherit;transition:color .2s}
.pub-card-link::after{content:"";position:absolute;inset:0}
.pub-card:hover .pub-card-link{color:var(--goldtext)}
.pub-card p{line-height:1.65;color:var(--body)}
.pub-card-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.pub-card-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;border:1px solid var(--line);border-radius:50px;font-size:14px;font-weight:500;color:var(--navy);white-space:nowrap;transition:background .2s ease,border-color .2s ease,color .2s ease}
.pub-card:hover .pub-card-btn{background:var(--navy);border-color:var(--navy);color:#fff}
.pub-card-formats{font-weight:600;letter-spacing:.12em;color:var(--body)}

/* Лента разделов над публикациями. Без скрипта переключать нечем, поэтому
   без класса js полоса не рисуется вовсе: читатель видит всю ленту сразу. */
.pub-filter-wrap{display:none}
.js .pub-filter-wrap{display:block;position:sticky;top:74px;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
/* Полоса уже задаёт воздух над лентой, поэтому у секции он убавлен. */
.pub-filter-wrap + section.block{padding-top:56px}
/* Новость показывает фотографию во всю карточку, материал обложку файла. */
.pub-card[data-pub-rubric="novosti"] .pub-card-cover{padding:0}
.pub-card[data-pub-rubric="novosti"] .pub-card-cover img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;box-shadow:none}
.pub-card[data-pub-rubric="novosti"]:hover .pub-card-cover img{transform:none;box-shadow:none}
.pub-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:14px 0}
.pub-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 22px;border:1px solid var(--line);border-radius:50px;background:#fff;color:var(--navy);font-weight:500;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.pub-tab:hover{border-color:var(--gold)}
.pub-tab[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pub-tab-n{font-weight:600;letter-spacing:.08em;opacity:.55}
.pub-card[hidden]{display:none}

/* Снимки внутри публикации: первый во всю ширину, остальные по два в ряд. */
.pub-shot{margin:0 0 26px}
.pub-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.pub-shot figcaption{margin-top:10px;line-height:1.5;color:var(--body)}
.pub-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px}
.pub-shots .pub-shot{margin-bottom:0}
.pub-shots .pub-shot:first-child{grid-column:1 / -1}
.pub-people{margin:0 0 16px;padding-left:22px}
.pub-people li{list-style:disc;line-height:1.7;color:var(--body);margin-bottom:8px}
.pub-ext{margin-left:6px;color:var(--goldtext)}

@media(max-width:900px){
  .pub-grid{grid-template-columns:1fr;gap:22px}
  .pub-shots{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* На телефоне полоса не переносится на второй ряд: она отнимала бы треть
     экрана при прокрутке. Вместо переноса ряд прокручивается вбок. */
  .pub-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .pub-filter::-webkit-scrollbar{display:none}
  .pub-tab{flex:0 0 auto}
  .pub-card{grid-template-columns:1fr}
  /* Высота панели здесь задаётся пропорцией, и Safari в таком случае не
     применял к картинке max-height: обложка уходила за край карточки.
     Поэтому картинка растягивается по панели, а вписывает её object-fit. */
  .pub-card-cover{position:relative;aspect-ratio:4/3;padding:0;border-right:none;border-bottom:1px solid var(--line)}
  .pub-card-cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:24px;box-sizing:border-box}
  .pub-card[data-pub-rubric="novosti"] .pub-card-cover img{padding:0}
  .pub-card-actions{flex-direction:column;align-items:center;gap:14px}
  .pub-card-btn{width:100%;max-width:280px}
  .pub-card-panel{padding:24px}
}

@media(max-width:960px){
  .pub-layout{grid-template-columns:1fr;gap:36px}
  .pub-aside{position:static;order:-1}
}

/* РУССКАЯ СТРАНИЦА УСЛУГИ */
.svc-sec .wrap{max-width:860px}
.svc-sec .h-sec{max-width:var(--w-prose)}
.svc-sec .h-sec{margin-bottom:20px}
.svc-prose p{line-height:1.75;color:var(--body);margin-bottom:16px}
.svc-prose p:last-child{margin-bottom:0}
.svc-prose strong{color:var(--ink);font-weight:600}
.svc-prose ul{list-style:none;margin:0 0 18px;padding:0}
.svc-prose li{position:relative;padding-left:22px;line-height:1.7;color:var(--body);margin-bottom:10px}
.svc-prose li:last-child{margin-bottom:0}
.svc-prose li::before{content:'';position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
/* Нумерованный список статьи: номер золотом вместо точки. */
.svc-prose ol{list-style:none;margin:0 0 18px;padding:0;counter-reset:svc-ol}
.svc-prose ol > li{counter-increment:svc-ol;padding-left:28px}
.svc-prose ol > li::before{content:counter(svc-ol) ".";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--goldtext);font-weight:600}


.svc-timeline{max-width:760px;margin:44px auto 0;padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--tint)}
.svc-timeline h3{font-weight:600;color:var(--ink);margin-bottom:8px}
.svc-timeline p{line-height:1.7;color:var(--body)}

.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{flex:1 1 auto;min-width:0}
.faq-item summary::after{content:"+";flex:0 0 auto;font-size:22px;font-weight:400;color:var(--goldtext);transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--goldtext)}
.faq-answer{padding:0 0 22px}
.faq-answer p{line-height:1.7;color:var(--body);max-width:65ch}

.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:980px;margin:0 auto}
.rel-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .25s ease,transform .25s ease}
.rel-name{font-weight:500;color:var(--ink);line-height:1.4}
.rel-arrow{flex:0 0 auto;color:var(--goldtext);font-size:18px}


/* Ритм фона страницы услуги: статья белая, «что вы получите» и материалы
   серые, вопросы и смежные услуги белые, оговорка и призыв одной серой
   зоной внизу. Два соседних блока нигде не совпадают. */
.svc-deliv,.svc-materials{background:var(--tint)}
.svc-faq{background:#fff}
/* Смежные услуги белые (Р112). После того как оговорка ушла в полосу
   призыва, серые смежные услуги встали вплотную к серому призыву. Белые они
   отличаются от призыва, а за белыми вопросами продолжают ту же белую зону
   без второго верхнего отступа, как одна секция. После серых материалов
   белые и так отличаются. */
.svc-related{background:#fff}
section.block.svc-faq + section.block.svc-related{padding-top:0}
/* Р112: оговорка о независимости стоит мелкой строкой под кнопкой призыва,
   а не отдельной полосой: низ страницы услуги из двух блоков, а не из
   четырёх коротких. */
.finalcta .finalcta-note{max-width:var(--w-prose);margin:32px auto 0;color:var(--body);text-wrap:balance}

@media(max-width:760px){
  .faq-item summary{padding:18px 0}
}

/* Соседние тёмные секции разделяются линией, иначе сливаются */
.problem + .tl{border-top:1px solid rgba(255,255,255,.08)}

.eyebrow-link{transition:opacity .2s ease}
.eyebrow-link:hover{opacity:.72}
.eyebrow-link .tx{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(194,163,90,.45)}

/* КАРТА ЮРИСДИКЦИЙ */
.jur{background:var(--navy)}
.jur .h-sec{color:#fff}
.jur .sub-sec{color:rgba(255,255,255,.68)}
.jur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18px,1fr));gap:5px;margin:44px 0 30px}
.jt{aspect-ratio:1;border-radius:3px;background:var(--jt);transition:transform .15s ease,box-shadow .15s ease;cursor:default}
.jt-outline{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.jt:hover{transform:scale(1.45);box-shadow:0 0 0 2px rgba(255,255,255,.9);z-index:2;position:relative}
/* ЦЕПОЧКА КОНТРОЛЯ на странице отрасли (шаг 5.4). Узлы стоят на общей сетке
   строк: подписи разной длины иначе разносят разделители по высоте. */
.sec-chain .ank-rail{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto;margin-top:var(--s-6);position:relative}
.sec-chain .ank-rail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:6px;height:1px;background:var(--line)}
.sec-chain .ank-node{padding:0 20px;text-align:center;position:relative;
  display:grid;grid-row:span 3;grid-template-rows:subgrid}
.sec-chain .ank-dot{display:block;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--goldink);background:#fff;margin:0 auto 22px;position:relative;z-index:1}
.sec-chain .ank-node:nth-child(2) .ank-dot{background:rgba(168,135,61,.35)}
.sec-chain .ank-node:nth-child(3) .ank-dot{background:rgba(168,135,61,.65)}
.sec-chain .ank-node:nth-child(4) .ank-dot{background:var(--goldink)}
.sec-chain .ank-ttl{font-weight:600}
.sec-chain .ank-ctl{color:var(--body);margin:10px 0 0}
@media(max-width:760px){
  .sec-chain .ank-rail{grid-template-columns:1fr;grid-template-rows:none;gap:26px}
  .sec-chain .ank-rail::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .sec-chain .ank-node{grid-row:auto;grid-template-rows:none;display:block;text-align:left;padding:0 0 0 32px}
  .sec-chain .ank-dot{position:absolute;left:0;top:5px;margin:0}
}
.jt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;transform:scale(1.45);z-index:2;position:relative}
.jur-readout{text-align:center;color:var(--bodylight);font-size:var(--t-ui);min-height:1.6em;margin:0 0 18px}
.jur-readout.on{color:#fff;font-weight:500}
.jur-legend{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center}
.jur-key{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.82)}
.jur-key i{width:13px;height:13px;border-radius:3px;background:var(--jt);flex:0 0 auto}
.jur-key b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.jur-cta{display:flex;justify-content:center;margin-top:34px}
.jur .btn-goutline{color:#fff;border-color:rgba(255,255,255,.4)}
.jur .btn-goutline:hover{border-color:var(--gold);color:var(--gold)}
#jtTip{position:fixed;z-index:200;pointer-events:none;padding:7px 12px;border-radius:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transition:opacity .12s ease}
#jtTip.on{opacity:1}
@media(max-width:760px){
  .jur-grid{grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:4px;margin:32px 0 24px}
  .jur-legend{gap:10px 18px}
}

/* С ЧЕМ ВЫ ПРИШЛИ */
.situ{background:var(--tint);border-bottom:1px solid var(--line)}
.situ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;max-width:1080px;margin:36px auto 0}
.situ-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.situ-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.situ-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.situ-label{font-weight:600;line-height:1.35;color:var(--ink)}
.situ-hint{line-height:1.5;color:var(--body);max-width:var(--w-text)}
.situ-arrow{flex:0 0 auto;font-size:18px;color:var(--goldtext);transition:transform .2s ease}
.situ-card:hover .situ-arrow{transform:translateX(3px)}
@media(max-width:760px){
  .situ-grid{grid-template-columns:1fr;margin-top:26px}
  .situ-card{padding:18px 20px;min-height:44px}
}

/* термины с косой чертой не переносятся посередине */
.nw{white-space:nowrap}

/* ПРОВЕРЯЕМЫЕ ФАКТЫ */
/* Число без расшифровки читается как реклама, поэтому расшифровка часть
   блока, а не украшение: она всегда рядом и в том же наборе данных. */
/* Факты: цифры тёмные и крупные, золото только чертой сверху. Фон белый на
   главной (сосед сверху тёмный, снизу серый) и серый на «О компании», где
   соседи белые: два соседних блока не должны совпадать по фону. */
.factsbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.factsbar > .wrap{padding-top:var(--s-8);padding-bottom:var(--s-8)}
/* На «О компании» блок стоит такой же полосой, как на главной: свой фон и
   линии отделяют его от белого блока основателя, с которым он сливался.
   Отступ задаёт контейнер, как у полосы на главной, секция своего не даёт. */
.factsbar.block{padding:0;background:var(--tint)}
/* Отступ больше обычного: у каждого факта своя золотая черта сверху, и рядом
   с чертами ярлыка они читались как одна сбившаяся пара штрихов. */
.factsbar .eyebrow{margin-bottom:var(--s-6)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}

/* Меморандум с ассоциацией: та же карточка, что в публикациях, но без
   кнопок. Логотип чужой и яркий, поэтому он заперт в своей панели. */
.memo{display:grid;grid-template-columns:minmax(150px,20%) 1fr;margin-top:var(--s-8);overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff}
.memo-logo{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--tint);border-right:1px solid var(--line)}
.memo-logo img{display:block;width:100%;max-width:120px;height:auto;border-radius:10px}
.memo-body{display:flex;flex-direction:column;gap:10px;padding:28px 32px}
.memo-lbl{font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--goldtext)}
.memo-name{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.memo-body p:last-child{line-height:1.65;color:var(--body)}
@media(max-width:700px){
  /* На телефоне колонка текста становилась в двадцать знаков, поэтому
     логотип уходит наверх, а текст занимает всю ширину карточки. */
  .memo{grid-template-columns:1fr}
  .memo-logo{padding:20px;border-right:none;border-bottom:1px solid var(--line)}
  .memo-logo img{max-width:96px}
  .memo-body{padding:22px 24px}
}
.fact{text-align:left;padding:0}
.fact::before{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-bottom:24px}
.fact-n{font-size:56px;font-weight:500;line-height:1;color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fact-t{margin-top:12px;color:var(--navy)}
.fact-d{margin-top:8px;color:var(--body);max-width:none}
/* Р99: на главной факты по центру своей колонки, черта над цифрой тоже.
   Только главная: на «О компании» блок остаётся как был, пока до неё не дошла
   очередь. Ширина от 680 до 799 не трогается: там строки по Р96. */
@media(min-width:800px),(max-width:679px){
  .factsbar:not(.block) .fact{text-align:center}
  .factsbar:not(.block) .fact::before{margin-left:auto;margin-right:auto}
}
/* ПАНЕЛЬ ВНИЗУ ЭКРАНА НА ТЕЛЕФОНЕ (макет на решение) */
/* На широком экране её нет совсем: там кнопка видна в шапке и внизу страницы,
   а панель отняла бы место у текста ни за что. */
.stickycta{display:none}
@media(max-width:680px){
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(12,27,42,.08);
    transition:transform .25s ease,opacity .25s ease}
  /* Панель уезжает вниз, когда виден блок призыва: иначе кнопка дублирует
     сама себя, и внизу страницы их оказывается две. */
  .stickycta.hide{transform:translateY(120%);opacity:0;pointer-events:none}
  .stickycta .btn{flex:1 1 auto;padding-left:16px;padding-right:16px;text-align:center}
  .sticky-wa{flex:0 0 auto;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--wa);background:#fff}
  .sticky-wa svg{width:22px;height:22px}
  /* Места под панель внизу страницы нет: панель прячется, как только
     достигнут блок призыва, и подвал она не закрывает (А57). */
}

@media(max-width:799px){
  .facts-grid{grid-template-columns:1fr;gap:36px}
  .fact{padding:0}
  .fact-n{font-size:44px}
}


/* ИСПРАВЛЕНИЯ ВИЗУАЛЬНОГО АУДИТА 15 СЕНТЯБРЯ 2026 ГОДА
   Номера находок по docs/audit/2026-09-15-vizualnyj-audit.md. Значения цвета
   записаны числами временно: фундамент дизайна переведёт их в токены. */

/* А29: подсказки полей и пустой список одного цвета, контраст 4.6 к 1. */
form input::placeholder,form textarea::placeholder{color:#6E7489;opacity:1}
form select:has(option[value=""]:checked){color:#6E7489}

/* А42: кнопка под текстом первого экрана не прилипает к нему. */
.page-hero p + .btn{margin-top:28px}

/* С2: поле с ошибкой не прячется под фиксированной шапкой. */
form input,form select,form textarea{scroll-margin-top:120px}

/* С3: ссылка к содержанию, видна только с клавиатуры. */
.skip-link{position:absolute;left:16px;top:-80px;z-index:300;background:#fff;color:var(--navy);padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;transition:top .2s}
.skip-link:focus{top:16px}

/* Промежуточная ширина от 680 до 1024, решение владельца 16 сентября 2026
   года (Р54). Здесь блоки ломались: «Три вещи» шли тремя колонками по 150
   пикселей (А2), пятая карточка отрасли висела одна (А31), три цифры стояли
   столбиком высотой 560 пикселей (А43), фото основателя занимало весь экран
   (А45). */
@media(min-width:681px) and (max-width:1023px){
  .st-grid{flex-direction:column;gap:0;max-width:640px;margin-left:auto;margin-right:auto}
  .st-div{display:none}
  .st-col{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:24px;align-items:start;text-align:left;padding:28px 0;border-top:1px solid var(--line);max-width:none;margin:0}
  .st-col:last-child{border-bottom:1px solid var(--line)}
  .st-col .ico{grid-column:1;grid-row:1/4;margin:0}
  .st-col .lbl,.st-col .lead,.st-col p{grid-column:2;text-wrap:pretty}
  .st-col .lbl{margin-bottom:8px}
}
@media(min-width:681px) and (max-width:1024px){
  .hub-grid{flex-direction:column;flex-wrap:nowrap;gap:12px;max-width:720px;margin-left:auto;margin-right:auto}
  .hub-card{flex-basis:auto;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:24px;align-items:start;padding:24px}
  .hub-card .ico{grid-column:1;grid-row:1/4;margin:0}
  .hub-card h2,.hub-card p,.hub-card .hub-cta{grid-column:2}
  .hub-card h2{margin-bottom:8px}
  .hub-card .hub-cta{margin-top:12px}
}
/* Ширина 693: три колонки фактов (прежнее решение Р54) давали строку по 17 до
   22 знаков, карточки проблем парами по 22 до 23. По решению владельца от
   17 сентября факты идут строками, карточки одной колонкой: строка вырастает
   примерно до 55 и 60 знаков ценой высоты блока. */
@media(min-width:680px) and (max-width:799px){
  .facts-grid{grid-template-columns:1fr;gap:28px}
  /* Цифры разной ширины стояли прижатыми влево кривым столбиком и выше своего
     текста. По решению владельца от 18 сентября цифра и черта по центру своей
     колонки, цифра по высоте на середине подписи и расшифровки. */
  .fact{display:grid;grid-template-columns:120px 1fr;column-gap:24px;align-items:center}
  /* Черта стоит над подписью, а не над цифрой: тремя отрезками у левого
     края они читались как штрихи, не связанные ни с чем (20.09). */
  .fact::before{grid-column:2;grid-row:1;justify-self:start;margin-bottom:12px}
  .fact-n{grid-column:1;grid-row:2 / 4;align-self:center;text-align:center}
  .fact-t{grid-column:2;grid-row:2;align-self:end}
  .fact-d{grid-column:2;grid-row:3}
  .pr-grid,.spain-grid{grid-template-columns:1fr}
}
@media(min-width:600px) and (max-width:1024px){
  .ld-founder{grid-template-columns:240px minmax(0,560px);column-gap:32px}
}
/* Телефон: имя, под ним фото, под ним текст. Фото не шире 340 пикселей,
   иначе оно занимает весь экран. */
@media(max-width:599px){
  .ld-founder{grid-template-columns:1fr}
  .ld-head{margin-bottom:24px}
  .ld-photo{width:100%;max-width:240px;min-height:0;aspect-ratio:4/5;margin:0 auto 24px}
}

/* ПРОХОД QA1 16 СЕНТЯБРЯ 2026 ГОДА, дефекты текущего состояния.
   Номера по docs/audit/2026-09-15-vizualnyj-audit.md. */

/* А46: шапка после прокрутки была полосой около 106 пикселей на телефоне и
   120 на компьютере, заметная доля каждого экрана. Когда шапка становится
   сплошной, отступы сжимаются. */
header{transition:background .3s,box-shadow .3s,padding .3s}
header.scrolled,header.solid{padding-top:8px;padding-bottom:8px}
header.scrolled .hbar,header.solid .hbar{padding-top:6px;padding-bottom:6px}

/* А48: отрасли списком строк на всех ширинах, продолжение Р54. На телефоне
   описание стояло над названием с пустотой между ними, на компьютере пять
   колонок по 215 пикселей рвали названия на две строки. */
.sg-grid{grid-template-columns:1fr;gap:12px;max-width:720px;margin-left:auto;margin-right:auto}
.sg-card{min-height:0;flex-direction:column-reverse;justify-content:flex-start;padding:24px}
.sg-card .row{margin:0 0 6px;align-items:center}

/* А49: подзаголовок прилипал к заголовку секции (карта юрисдикций, «С чем вы
   пришли?»). */
.h-sec + .sub-sec,.center-head .h-sec + p{margin-top:16px}

/* А50: карточки услуг на телефоне. Номер слева и стрелка справа сжимали
   текст до 190 пикселей, названия шли в четыре строки. Номер и стрелка
   встают строкой над текстом. */
@media(max-width:680px){
  /* Раскладка с номером сверху: она нужна английским категориям, где номер
     есть. У русских услуг номера нет, и пустая область оставляла стрелку
     висеть отдельной строкой над заголовком. */
  .srv-cat-link .srv-cat-head{display:grid;grid-template-columns:1fr auto;grid-template-areas:"num arr" "meta meta";align-items:center;gap:10px 16px}
  .srv-cat-link .srv-cat-head:not(:has(.srv-cat-num)){grid-template-areas:"meta arr";align-items:start}
  .srv-cat-link .srv-cat-num{grid-area:num;font-size:20px;min-width:0}
  .srv-cat-link .srv-cat-meta{grid-area:meta}
  .srv-cat-link .srv-cat-arrow{grid-area:arr;margin-left:0}
}

/* А51: разделы одной статьи на странице услуги стояли секциями с полными
   отступами, между абзацем и следующим заголовком около 190 пикселей, как
   между разными блоками страницы. Внутри статьи шаг меньше. */
section.block.svc-sec:has(+ section.svc-sec){padding-bottom:0}
section.block.svc-sec + section.svc-sec{padding-top:64px}
@media(max-width:680px){section.block.svc-sec + section.svc-sec{padding-top:48px}}
/* Р110: здесь стояло правило, снимавшее верхний отступ у блока после
   разделов статьи, «что вы получите», вопросов и материалов: 96 снизу плюс 96
   сверху давали 192. Оно писалось для соседей одного фона, а потом фон блоков
   страницы услуги стал чередоваться, и заголовок прилипал к краю новой
   полосы. У соседей разного фона у каждого свой отступ, правило снято. */

/* А53: у страницы без перевода второй язык выглядел выбранным. */
.lang .lang-item.off{color:rgba(255,255,255,.3);cursor:default}

/* А54: смежные услуги на планшете вставали рядом по две, третья одна. */
@media(max-width:900px){.rel-grid{grid-template-columns:1fr;max-width:640px}}

/* А55: аккордеон услуг на ширине 1024 шёл во всю ширину, строка описания
   около 130 знаков. */
@media(max-width:1024px){.cc-right{width:100%;max-width:760px;margin-left:auto;margin-right:auto}}

/* А56: три шага на странице благодарности на ширине 681 до 1024 шли по два
   в ряд, третий один. От 901 три шага одной строкой; от 681 до 900 в ряд
   они не помещаются (колонки по 190 пикселей, восемь строк в первом шаге),
   поэтому встают столбиком, как на телефоне. */
@media(min-width:681px) and (max-width:900px){
  .tl-grid:not(:has(> .tl-col ~ .tl-col ~ .tl-col ~ .tl-col)){flex-direction:column;align-items:center;gap:40px}
  .tl-grid:not(:has(> .tl-col ~ .tl-col ~ .tl-col ~ .tl-col)) > .tl-col{flex:none;width:100%;max-width:480px}
}
@media(min-width:901px) and (max-width:1024px){
  .tl-grid:not(:has(> .tl-col ~ .tl-col ~ .tl-col ~ .tl-col)) > .tl-col{flex:1 1 0}
}

/* Секция, которой фон задан по правилу соседства. */
.block.tinted{background:var(--tint)}


/* ===== ШКАЛА ШРИФТА =====
   Блок стоит в конце файла намеренно: он задаёт размер для каждой роли и
   перекрывает всё, что осталось выше. Размеры сняты с компонентов, чтобы
   источник был один. Межстрочное: заголовки плотнее, проза свободнее.
   Трекинг отрицательный только на крупном, на теле его нет. */

.hero h1{font-size:var(--t-display);line-height:1.08;letter-spacing:-.03em}

.page-hero .h-sec,.sec-hero h1,.srv-hero h1,.svc-hero h1{
  font-size:var(--t-h1);line-height:1.12;letter-spacing:-.025em}

.h-sec,.srv-left .h-sec{font-size:var(--t-h2);line-height:1.18;letter-spacing:-.02em}
.ld-head h2{font-size:var(--t-h2);line-height:1.18;letter-spacing:-.02em;font-weight:500}

.pr-card h3,.tl-col h3,.spain-card h3,.deliv-card h3,.hub-card h2,.eng-card h3,
.sc-title,.srv-cat-head h3,.sec-chain .ank-ttl,.pub-body h2,.svc-timeline h3,.situ-label,.rel-name,
.faq-item summary,.cc-head .ttl,.st-col .lead,.ss-name,.sg-card .row b,
.ct-info h2,.legal h2,.pub-card h2,.memo-name,.svc-dcard h3,.svc-name{
  font-size:var(--t-h3);line-height:1.35;letter-spacing:-.01em;font-weight:500}

.hero p.lead,.sec-hero .lead,.srv-hero .lead,.svc-hero .lead,.sub-sec,
.svc-desc2,.svc-scope p,.page-hero p,.finalcta p{
  font-size:var(--t-lead);line-height:1.55;letter-spacing:0}

.svc-prose p,.svc-prose li,.faq-answer p,.pub-body p,.pub-card p,.legal p,.legal li,
.srv-left p,.cc-body p,.ss-body p,.svc-scope-p,.svc-timeline p{
  font-size:var(--t-body);line-height:1.75;letter-spacing:0}

.pr-card p,.tl-col p,.spain-card p,.deliv-card p,.hub-card p,.sc-desc,
.srv-cat-head p,.situ-hint,.sec-chain .ank-ctl,.fact-d,.eng-card p,.svc-dcard p,.sg-card .tag,
.ct-info .meta,.pub-file-name,.pub-related-link,.jur-key,.sc-mods li,
.svc-sec-intro,.st-col p,.ct-steps li,.cc-link,.ss-link,.hub-card .hub-cta,
.svc-page-link a,.pub-card-btn,.pub-tab,.fn-nm,.sec-back,.formerr,.thx-note{
  font-size:var(--t-ui);line-height:1.6;letter-spacing:0}

.ft-disc,.ft-req,.ft-bottom p,.globe-hint,.map-tip .ts,.pub-file-ext,.pub-file-size,
.pub-shot figcaption,.pub-tab-n,
.pub-dl-note,.pub-terms p,.finalcta .finalcta-note,.formnote,.freq,.ferr,.wa-note,
.legal .upd,.crumb,.crumbs,.ft-brand p,.ft-col a,.ft-col p,.map-tip .tt,
.map-tip .tcity{font-size:var(--t-small);line-height:1.55}

/* Капс ярлыков и рубрик: та же ступень, что у мелкого, но своим весом. */
.eyebrow span.tx,.pub-card-rubric,.memo-lbl,.pub-dl-head,.pub-related-head,.ft-col .ft-h,
.st-col .lbl,.svc-lbl,.pub-card-formats{font-size:var(--t-small);font-weight:600}

/* Подпись под числом в блоке фактов: не заголовок, поэтому своя ступень.
   В шкале она была отнесена к заголовкам карточек и стала 19 весом 600, из-за
   чего «выполненных проектов» переносилось на две строки. */
.fact-t{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--navy)}
/* Подпись читается как самостоятельный заголовок факта (решение владельца). */
.fact-t::first-letter{text-transform:uppercase}

/* Проза статьи меры не имела вовсе: строка шла во всю ширину колонки и давала
   до 84 знаков. Лид по центру сужается вместе с шапкой секции. */
.svc-prose p,.svc-prose li{max-width:var(--w-prose)}
.center-head .sub-sec{max-width:none}

/* ОДНА КАРТОЧКА. Пятнадцать правил наведения отличались подъёмом (2 или 3),
   тенью (четыре разных) и фоном. Теперь одно правило: золотая рамка, подъём на
   два пикселя и одна тень. Тёмная карточка светлеет вместо тени. */
.sg-card:hover,.eng-card:hover,.spain-card:hover,.deliv-card:hover,.svc-dcard:hover,
.rel-card:hover,.situ-card:hover,.hub-card:hover,.pub-card:hover,.srv-card2:hover,
.srv-cat-link:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(12,27,42,.09);background:#fff}
.pr-card:hover{border-color:var(--gold);transform:translateY(-2px);
  background:rgba(255,255,255,.04)}
@media(prefers-reduced-motion:reduce){
  .sg-card:hover,.eng-card:hover,.spain-card:hover,.deliv-card:hover,.svc-dcard:hover,
  .rel-card:hover,.situ-card:hover,.hub-card:hover,.pub-card:hover,.srv-card2:hover,
  .srv-cat-link:hover,.pr-card:hover{transform:none}
}

/* ===== ДВИЖЕНИЕ =====
   Блок стоит в конце намеренно: он задаёт длительность и кривую по ролям и
   перекрывает точечные значения выше. Что именно движется, решают правила
   выше, здесь только как быстро и с каким характером. */

.btn,nav.main a,.lang .lang-item,.crumb a,.ld-soc,.svc-tag .arr,.srv-sublist .nm,
.srv-sublist .arr,.sg-card .arr,.sc-arrow,.situ-arrow,.rel-arrow,.hub-cta,
.pub-card-btn,.pub-card-link,.ss-link,.cc-link{
  transition-duration:var(--m-fast);transition-timing-function:var(--m-out)}

.sg-card,.pr-card,.eng-card,.spain-card,.deliv-card,.svc-dcard,.rel-card,
.situ-card,.hub-card,.pub-card,.srv-card2,.srv-cat-link,.svc-tag,.flow-node,
.flow-link{transition-duration:var(--m-base);transition-timing-function:var(--m-out)}

.cc-body,.ss-body,.srv-cat-body{transition-timing-function:var(--m-inout)}

.js .center-head,.js .sg-card,.js .pr-card,.js .cc-item,.js .tl-col,.js .st-col,
.js .srv-card2,.js .eng-card,.js .ld-founder,.js .cc-left,.js .finalcta .wrap,
.js .page-hero .wrap,.js .spain-card,.js .sec-sol-item,.js .hub-card,
.js .srv-cat,.js .deliv-card{
  transition-duration:var(--m-slow);transition-timing-function:var(--m-out)}

/* Каскад: ряд входит волной, а не разом. Номер карточки проставляет скрипт,
   потолок четыре шага, дальше ждать уже долго. */
.js [style*="--i"]{transition-delay:calc(var(--i) * 60ms)}
@media(prefers-reduced-motion:reduce){
  .js [style*="--i"]{transition-delay:0s!important}
}

/* СТРАНИЦА УСЛУГИ, КАРКАС ПО ДИЗАЙН-АУДИТУ 18 СЕНТЯБРЯ 2026 ГОДА (Р111)
   docs/audit/2026-09-18-dizajn-uslug.md. Паспорт услуги в первом экране и
   оглавление слева на широком экране: посетитель сразу видит срок, формат и
   результат, а на длинной странице находит нужный раздел. */
.svc-pass{display:flex;justify-content:center;max-width:780px;margin:32px auto 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.svc-pass-i{flex:1 1 0;padding:16px 20px}
.svc-pass-i + .svc-pass-i{border-left:1px solid rgba(255,255,255,.14)}
.svc-pass dt{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.svc-pass dd{margin:6px 0 0;color:#fff;font-size:var(--t-ui);font-weight:500;line-height:1.4}
@media(max-width:680px){
  .svc-pass{flex-direction:column;text-align:left}
  .svc-pass-i{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0}
  .svc-pass-i + .svc-pass-i{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .svc-pass dd{margin:0;text-align:right}
}

.svc-toc{display:none}
.svc-article-main{min-width:0}
/* Порог 1024, а не 1200: на ноутбуке 13 дюймов и планшете горизонтально
   страница на 700 и больше слов оставалась без навигации по разделам. */
@media(min-width:1024px){
  .svc-article:has(.svc-toc){display:grid;grid-template-columns:190px minmax(0,720px);column-gap:48px;justify-content:center;max-width:var(--maxw);margin:0 auto;padding:0 50px}
  .svc-article:has(.svc-toc) .svc-sec .wrap{max-width:none;padding:0}
  .svc-toc{display:block;position:sticky;top:120px;align-self:start;margin-top:96px}
}
@media(min-width:1200px){
  .svc-article:has(.svc-toc){grid-template-columns:210px minmax(0,760px);column-gap:72px}
}
.svc-toc-h{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin-bottom:16px}
.svc-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.svc-toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:var(--t-ui);line-height:1.4;color:var(--body);transition:color .2s ease,border-color .2s ease}
.svc-toc a:hover{color:var(--ink)}
.svc-toc a[aria-current="true"]{color:var(--ink);font-weight:500;border-left-color:var(--gold)}
.svc-sec,.svc-deliv,.svc-faq{scroll-margin-top:96px}

/* Тезис раздела: одна главная мысль крупнее текста, с золотой чертой. */
.svc-prose .svc-thesis,.pub-body .svc-thesis{font-size:var(--t-lead);line-height:1.5;font-weight:500;color:var(--ink);border-left:2px solid var(--gold);padding-left:20px;margin:32px 0 20px}

/* Слоистая схема: четыре слоя проверки одной стопкой, номера на общей оси. */
.svc-prose ol.svc-layers{counter-reset:none;margin:24px 0 8px;position:relative}
.svc-prose ol.svc-layers::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:1px;background:var(--line)}
.svc-prose ol.svc-layers > li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px;padding:0;margin:0 0 12px}
.svc-prose ol.svc-layers > li::before{content:none}
.svc-layer-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--gold);color:var(--goldtext);font-weight:600;margin-top:14px}
.svc-layers > li > div{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.svc-layers h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin-bottom:4px}
.svc-prose .svc-layers p{margin:0;line-height:1.6}

/* Расхождения между слоями: знак «не равно» вместо точки. */
.svc-prose ul.svc-gaps > li{padding-left:28px}
.svc-prose ul.svc-gaps > li::before{content:"\2260";left:0;top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--goldtext);font-weight:600}

/* Чек-лист самопроверки. Без скрипта это обычный список; скрипт превращает
   пункты в отметки и считает их. */
.svc-prose ul.svc-check.on > li{padding:0;margin:0 0 8px}
.svc-prose ul.svc-check.on > li::before{content:none}
.svc-check-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.svc-check-row:hover{border-color:var(--gold)}
.svc-check-row input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:2px 0 0;border:1.5px solid var(--goldtext);border-radius:6px;background:#fff;display:grid;place-content:center;cursor:pointer}
.svc-check-row input::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.svc-check-row input:checked{background:var(--navy);border-color:var(--navy)}
.svc-check-row input:checked::after{opacity:1}
.svc-check-row input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.svc-check-row:has(input:checked){background:var(--tint);border-color:var(--navy)}
.svc-check-count{font-size:var(--t-ui);font-weight:600;color:var(--goldtext);margin:12px 0 0}
.svc-prose .svc-check-result{margin-top:8px;padding:14px 18px;border-radius:12px;border:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.svc-prose .svc-check-result.hit{background:var(--tint);border-color:var(--gold);color:var(--ink)}

/* Развилка ситуаций (Р112): две ситуации одной услуги переключателем. Без
   скрипта обе видны подряд со своими заголовками. */
.svc-tabs.on > .svc-tab > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.svc-tabs > .svc-tab > h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin:24px 0 8px}
.svc-tablist{display:inline-flex;gap:4px;padding:4px;margin:8px 0 28px;border:1px solid var(--line);border-radius:999px;background:var(--tint);max-width:100%}
.svc-tablist button{appearance:none;border:0;background:none;padding:10px 20px;border-radius:999px;font:inherit;font-size:var(--t-ui);font-weight:500;color:var(--body);cursor:pointer;transition:background .2s ease,color .2s ease}
.svc-tablist button:hover{color:var(--ink)}
.svc-tablist button[aria-selected="true"]{background:var(--navy);color:#fff}
.svc-tablist button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.svc-tabs.on > .svc-tab[hidden]{display:none}
@media(max-width:520px){.svc-tablist{display:flex}.svc-tablist button{flex:1 1 0;padding:10px 12px}}

/* Граница ответственности (Р112): «ведёте вы» и «делаем мы» рядом. */
.svc-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 24px}
.svc-split > div{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:#fff}
.svc-split > div:first-child{background:var(--tint)}
.svc-split h3{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin-bottom:10px}
.svc-prose .svc-split p{margin:0;line-height:1.6}
@media(max-width:680px){.svc-split{grid-template-columns:1fr}}

/* Последовательность (Р113): те же две карточки, что у границы, но между
   ними стрелка «сначала это, потом то». Оценка рисков организации идёт
   первой, клиентская строится на ней. */
.svc-split.svc-seq{grid-template-columns:1fr 40px 1fr;gap:0;align-items:stretch}
.svc-split.svc-seq > div:first-child{grid-column:1}
.svc-split.svc-seq > div:last-child{grid-column:3}
.svc-split.svc-seq::after{content:"\2192";grid-column:2;grid-row:1;align-self:center;justify-self:center;color:var(--goldtext);font-size:22px;font-weight:600}
.svc-split.svc-seq h3{text-transform:none;letter-spacing:0;font-size:var(--t-body);color:var(--ink)}
@media(max-width:680px){
  .svc-split.svc-seq{grid-template-columns:1fr;grid-template-rows:auto 36px auto}
  .svc-split.svc-seq > div:first-child{grid-column:1;grid-row:1}
  .svc-split.svc-seq > div:last-child{grid-column:1;grid-row:3}
  .svc-split.svc-seq::after{content:"\2193";grid-column:1;grid-row:2}
}

/* Карта рисков (Р113): пять факторов с условным уровнем, так выглядит
   результат оценки. Цвета уровней из шкалы риска матрицы юрисдикций на
   главной, чтобы уровень читался одинаково по всему сайту. Уровень
   подписан словом, цвет его только дублирует. */
.svc-riskmap{margin:20px 0 24px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.svc-prose .svc-riskmap ul{margin:0}
.svc-prose .svc-riskmap li{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;padding:16px 22px;margin:0;border-top:1px solid var(--line)}
.svc-prose .svc-riskmap li:first-child{border-top:0}
.svc-prose .svc-riskmap li::before{content:none}
.rm-f b{display:block;color:var(--ink);font-weight:600}
.rm-f span{display:block;font-size:var(--t-ui);line-height:1.5;color:var(--body)}
.rm-lvl{display:flex;align-items:center;gap:4px}
.rm-lvl i{display:block;width:22px;height:8px;border-radius:2px;background:var(--line)}
.rm-lvl em{font-style:normal;font-size:var(--t-small);font-weight:600;color:var(--ink);min-width:64px;margin-left:8px}
.rm-1 i:nth-child(-n+1){background:#5FA88F}
.rm-2 i:nth-child(-n+2){background:#D4B25E}
.rm-3 i:nth-child(-n+3){background:#C25A32}
.svc-riskmap figcaption{padding:12px 22px;background:var(--tint);border-top:1px solid var(--line);font-size:var(--t-small);color:var(--body)}
@media(max-width:520px){
  .svc-prose .svc-riskmap li{grid-template-columns:1fr;row-gap:10px;padding:14px 16px}
}

/* Шкала срочности (Р114): три повода в ряд, насыщенность верхней черты
   растёт от спокойного к срочному. Под ними ось времени на ответ. */
.svc-prose ol.svc-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0}
.svc-prose ol.svc-scale > li{max-width:none;padding:20px 20px 20px;margin:0;border:1px solid var(--line);border-radius:12px;background:#fff}
.svc-prose ol.svc-scale > li::before{content:"";position:static;display:block;width:36px;height:3px;border-radius:2px;margin-bottom:14px;background:#C9D1DB}
.svc-prose ol.svc-scale > li.sc-1::before{background:#C9D1DB}
.svc-prose ol.svc-scale > li.sc-2::before{background:var(--gold)}
.svc-prose ol.svc-scale > li.sc-3{background:var(--tint)}
.svc-prose ol.svc-scale > li.sc-3::before{background:var(--navy)}
.sc-k{display:block;font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin-bottom:8px}
.svc-scale h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin-bottom:6px;line-height:1.35}
.svc-prose .svc-scale p{margin:0;font-size:var(--t-ui);line-height:1.55}
.svc-prose .svc-scale-axis{max-width:none;display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;padding-top:10px;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--line),var(--navy)) 1;font-size:var(--t-small);color:var(--body)}
@media(max-width:680px){
  .svc-prose ol.svc-scale{grid-template-columns:1fr}
  .svc-prose .svc-scale-axis{display:none}
}

/* Плитки содержимого запроса (Р114): что входит в типовой запрос банка. */
.svc-prose ul.svc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 20px}
.svc-prose ul.svc-tiles > li{max-width:none;margin:0;padding:14px 18px 14px 44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:400;font-size:var(--t-ui);line-height:1.5}
.svc-prose ul.svc-tiles > li::before{content:"";left:20px;top:16px;bottom:16px;width:3px;height:auto;border-radius:2px;background:var(--gold)}
@media(max-width:680px){.svc-prose ul.svc-tiles{grid-template-columns:1fr}}

/* Шкала готовности (Р117, выбрана владельцем из шести вариантов): этапы
   отрезками одной полосы, золото насыщается к концу, итог тёмной плашкой со
   стрелкой. На планшете два на два, на телефоне столбиком. */
.svc-prose ol.svc-road{display:grid;grid-template-columns:repeat(4,1fr);gap:0 10px;margin:8px 0 0;padding-top:26px}
.svc-prose ol.svc-road > li{max-width:none;margin:0;padding:0 8px 0 0;position:relative}
.svc-prose ol.svc-road > li::before{content:"";position:absolute;left:0;right:0;top:-26px;width:auto;height:8px;border-radius:4px;background:rgba(194,163,90,.35)}
.svc-prose ol.svc-road > li:nth-child(2)::before{background:rgba(194,163,90,.6)}
.svc-prose ol.svc-road > li:nth-child(3)::before{background:rgba(194,163,90,.85)}
.svc-prose ol.svc-road > li:nth-child(4)::before{background:var(--goldink)}
.svc-road b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px;line-height:1.35}
.svc-road span{display:block;font-size:var(--t-ui);line-height:1.55;color:var(--body)}
.svc-prose ol.svc-road + p{margin-top:28px}
.svc-prose .svc-road-end{max-width:none;margin:28px 0 32px;padding:14px 20px;border-radius:12px;background:var(--navy);color:#fff;font-weight:500;display:flex;align-items:center;gap:12px}
.svc-prose .svc-road-end::before{content:"\2192";color:var(--gold);font-weight:600}
@media(max-width:760px){.svc-prose ol.svc-road{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:480px){.svc-prose ol.svc-road{grid-template-columns:1fr}}

/* Проекты карточками (Р115): страна и тип над заголовком, что сделано
   списком, оговорка мелко внизу. */
.svc-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 0}
.svc-case{border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px;background:#fff;display:flex;flex-direction:column}
.svc-prose .svc-case-meta{font-size:var(--t-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--goldtext);margin:0 0 10px}
.svc-case h3{font-size:var(--t-body);font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:12px}
.svc-prose .svc-case ul{margin:0}
.svc-prose .svc-case li{max-width:none;font-size:var(--t-ui);line-height:1.5;padding-left:18px;margin-bottom:6px}
.svc-prose .svc-case li::before{left:2px;top:9px;width:5px;height:5px}
.svc-prose .svc-case-note{margin:auto 0 0;padding-top:12px;font-size:var(--t-small);line-height:1.5;color:var(--body)}
@media(max-width:1023px){.svc-cases{grid-template-columns:1fr}}

/* Плавающая кнопка WhatsApp (Р117) на экранах шире телефона: на телефоне её
   роль играет значок в нижней панели. Круг со значком в цвете WhatsApp, без
   зелёной заливки (Р86). Появляется и прячется по тем же правилам, что панель:
   нет её, пока виден первый экран или блок призыва, и ниже призыва. */
.wa-float{display:none}
@media(min-width:681px){
  .wa-float{display:flex;align-items:center;justify-content:center;position:fixed;right:28px;bottom:28px;z-index:40;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(12,27,42,.14);color:var(--wa);transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}
  .wa-float svg{width:24px;height:24px}
  .wa-float:hover{box-shadow:0 10px 28px rgba(12,27,42,.2);transform:translateY(-2px)}
  .wa-float:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .wa-float.hide{opacity:0;transform:translateY(16px);pointer-events:none}
}

/* Два листа (Р118): скачанный шаблон против правил под вас. Шаблон бледный,
   пункты зачёркнуты крестом; правила под вас белым листом с золотой чертой
   и отметками. У листа загнутый угол, чтобы читался документ, а не карточка. */
.svc-docs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 24px}
.svc-doc{position:relative;border:1px solid var(--line);border-radius:4px 22px 4px 4px;padding:22px 24px 20px;background:#fff}
.svc-doc::after{content:"";position:absolute;top:-1px;right:-1px;width:22px;height:22px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 6px;background:var(--tint)}
.svc-doc-x{background:var(--tint)}
.svc-doc-x::after{background:#fff}
.svc-doc-ok{border-top:3px solid var(--gold)}
.svc-doc-ok::after{top:-3px;height:24px}
.svc-prose .svc-doc-h{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin:0 0 12px}
.svc-prose .svc-doc ul{margin:0}
.svc-prose .svc-doc li{max-width:none;padding-left:26px;margin-bottom:8px;line-height:1.5;color:var(--ink)}
.svc-prose .svc-doc-x li{color:var(--body);text-decoration:line-through;text-decoration-color:rgba(86,101,122,.45)}
.svc-prose .svc-doc li::before{left:0;top:0;width:auto;height:auto;border-radius:0;background:none;font-weight:600}
.svc-prose .svc-doc-x li::before{content:"\2715";color:var(--body)}
.svc-prose .svc-doc-ok li::before{content:"\2713";color:var(--goldtext)}
@media(max-width:600px){.svc-docs{grid-template-columns:1fr}}

/* Пример расчёта (Р119): факторы клиента, баллы, итог на шкале уровней и
   что из уровня следует. Цвета зон из шкалы риска матрицы юрисдикций. */
.svc-score{margin:20px 0 24px;border:1px solid var(--line);border-radius:14px;padding:22px 24px 18px;background:#fff}
.svc-prose .svc-score-h{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin:0 0 12px}
.svc-score table{width:100%;border-collapse:collapse;font-size:var(--t-ui)}
.svc-score th{text-align:left;font-weight:600;color:var(--body);font-size:var(--t-small);padding:0 0 8px;border-bottom:1px solid var(--line)}
.svc-score td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.svc-score td:first-child{color:var(--body);width:34%;padding-right:12px}
.svc-score th:last-child,.svc-score td:last-child{text-align:right;width:64px;font-variant-numeric:tabular-nums;font-weight:600}
.svc-score tfoot td{border-bottom:0;padding-top:12px;font-weight:600;color:var(--ink)}
.svc-score tfoot td:last-child{font-size:20px}
.svc-score-scale{position:relative;margin:18px 0 0;padding-bottom:22px}
.ss-zones{display:grid;grid-template-columns:30fr 30fr 40fr;gap:3px;height:28px;border-radius:6px;overflow:hidden}
.ss-zones span{display:flex;align-items:center;justify-content:center;font-size:var(--t-small);font-weight:600;color:#fff}
.ss-zones .z1{background:#5FA88F}
.ss-zones .z2{background:#D4B25E;color:var(--ink)}
.ss-zones .z3{background:#C25A32}
.ss-mark{position:absolute;top:-6px;width:3px;height:40px;margin-left:-1.5px;background:var(--navy);border-radius:2px}
.ss-mark::after{content:"68";position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:var(--t-small);font-weight:700;color:var(--navy)}
.ss-ticks{position:relative;height:16px;margin-top:4px}
.ss-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:var(--t-small);color:var(--body)}
.ss-ticks span:first-child{transform:none;left:0}
.ss-ticks span:last-child{transform:translateX(-100%)}
.svc-prose .svc-score-out{max-width:none;margin:4px 0 12px;padding:12px 16px;border-radius:10px;background:var(--tint);color:var(--ink)}
.svc-score figcaption{font-size:var(--t-small);color:var(--body)}

/* Шкала с рабочей зоной (Р120): мониторинг между двумя крайностями. Полоса
   от «мало правил» к «много правил», золотая зона посередине, под краями
   две крайности карточками. */
.svc-spectrum{margin:16px 0 24px}
.sp-track{position:relative;height:40px;border-radius:20px;background:linear-gradient(90deg,var(--tint) 0%,#D5DCE5 50%,#5E6B7E 100%);border:1px solid var(--line)}
.sp-zone{position:absolute;left:36%;width:28%;top:-5px;bottom:-5px;border-radius:24px;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:var(--t-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 3px #fff}
.sp-axis{display:flex;justify-content:space-between;gap:16px;margin:10px 0 0;font-size:var(--t-small);color:var(--body)}
.sp-axis span:last-child{text-align:right}
.sp-ends{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 0}
.sp-ends > div{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.sp-ends > div:last-child{background:var(--tint)}
.sp-ends h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin-bottom:6px}
.svc-prose .sp-ends p{margin:0;font-size:var(--t-ui);line-height:1.6}
@media(max-width:600px){
  .sp-zone{left:28%;width:44%}
  .sp-ends{grid-template-columns:1fr}
}

/* Опись комплекта (Р121): документы строками с номером, как опись папки,
   ключевой документ отдельной строкой с золотой рамкой. */
.svc-prose ol.svc-dossier{counter-reset:dz;margin:16px 0 8px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.svc-prose ol.svc-dossier > li{counter-increment:dz;max-width:none;margin:0;padding:14px 20px 14px 64px;border-top:1px solid var(--line);color:var(--ink);line-height:1.5;background:#fff}
.svc-prose ol.svc-dossier > li:first-child{border-top:0}
.svc-prose ol.svc-dossier > li::before{content:counter(dz,decimal-leading-zero);left:20px;top:50%;transform:translateY(-50%);width:auto;height:auto;border-radius:0;background:none;color:var(--goldtext);font-weight:600;font-size:var(--t-ui);font-variant-numeric:tabular-nums}
.svc-prose ol.svc-dossier > li.dz-key{background:var(--tint);box-shadow:inset 3px 0 0 var(--gold);color:var(--body)}
.svc-prose ol.svc-dossier > li.dz-key b{color:var(--ink);font-weight:600}

/* Фазы заявки (Р121): до подачи, подача, рассмотрение, и кто делает каждую.
   Подача выделена тёмным: это шаг заявителя, граница нашей работы. */
.svc-phases{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;margin:16px 0 20px}
/* Равные колонки и высота по содержанию: там, где длинная середина,
   пропорция под первую колонку оставляла пустые поля по краям. */
.svc-phases.ph-even{grid-template-columns:repeat(3,1fr);align-items:start}
.svc-phases > div{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.svc-phases > .ph-2{background:var(--navy);border-color:var(--navy);color:#fff}
.svc-prose .ph-who{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);margin:0 0 6px}
.svc-prose .ph-2 .ph-who{color:var(--gold)}
.svc-phases h3{font-size:var(--t-body);font-weight:600;color:var(--ink);margin-bottom:10px}
.svc-phases .ph-2 h3{color:#fff}
.svc-prose .svc-phases ul{margin:0}
.svc-prose .svc-phases li{max-width:none;font-size:var(--t-ui);line-height:1.55;padding-left:16px;margin-bottom:8px}
.svc-prose .svc-phases li::before{left:1px;top:9px;width:5px;height:5px}
.svc-prose .svc-phases .ph-2 li{color:rgba(255,255,255,.82)}
@media(max-width:760px){.svc-phases,.svc-phases.ph-even{grid-template-columns:1fr}}

/* Сравнение таблицей (Р122, выбрано владельцем вместо столбцов «слои поверх
   базы»): общая с банком строка на `--tint`, дальше то, чего у банка нет;
   прочерк в колонке «Банк» и отметка в «Крипто». Отметки подписаны для
   чтения с экрана словами «есть» и «нет». */
.svc-cmp{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:var(--t-ui)}
.svc-cmp thead th{font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);padding:12px 16px;text-align:center;background:var(--tint)}
.svc-cmp tbody th{text-align:left;font-weight:400;padding:14px 16px;border-top:1px solid var(--line);color:var(--body);line-height:1.5}
.svc-cmp td{text-align:center;width:84px;padding:14px 8px;border-top:1px solid var(--line);vertical-align:middle}
.svc-cmp tbody th b{display:block;color:var(--ink);font-weight:600}
.svc-cmp tbody th span{display:block}
.svc-cmp tr.cmp-common th,.svc-cmp tr.cmp-common td{background:var(--tint)}
.svc-cmp tr.cmp-common th{color:var(--ink)}
.cmp-y,.cmp-n{font-weight:700;font-size:16px}
.cmp-y{color:var(--goldtext)}
.cmp-n{display:inline-block;width:14px;height:2px;border-radius:1px;background:#C9D1DB;vertical-align:middle}
.cmp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){
  .svc-cmp thead th,.svc-cmp tbody th{padding-left:12px;padding-right:8px}
  .svc-cmp td{width:52px;padding:12px 4px}
  .svc-cmp thead th{letter-spacing:.06em}
}

/* Списки капсулами (Р123): короткие названия, которые не нужно читать
   предложением. */
.svc-prose ul.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.svc-prose ul.svc-chips > li{max-width:none;margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:var(--t-ui);font-weight:500;line-height:1.4}
.svc-prose ul.svc-chips > li::before{content:none}

/* Поток решения (Р123): совпадение, разбор, развилка на два исхода. */
.svc-flow{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px;align-items:stretch;margin:16px 0 8px}
.fl-step,.fl-out{position:relative;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.fl-step::after{content:"\2192";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);color:var(--goldtext);font-weight:600;z-index:1}
.fl-fork{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.fl-out.fl-hit{background:var(--tint);box-shadow:inset 3px 0 0 var(--navy)}
.fl-out:not(.fl-hit){box-shadow:inset 3px 0 0 var(--gold)}
.svc-flow.fl-even{grid-template-columns:repeat(3,1fr)}
.svc-flow > :last-child::after{content:none}
.svc-flow b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.svc-flow span{display:block;font-size:var(--t-ui);line-height:1.5;color:var(--body)}
@media(max-width:760px){
  /* Класс равных колонок сильнее .svc-flow, поэтому он снимается здесь же:
     иначе три колонки остаются на телефоне и растягивают страницу вбок. */
  .svc-flow,.svc-flow.fl-even{grid-template-columns:1fr}
  .fl-step::after{content:"\2193";right:50%;top:auto;bottom:-12px;transform:translate(50%,50%)}
}

/* Форматы работы (Р124): карточки выбора в ряд; формат, недоступный в
   Казахстане, приглушён и помечен, чтобы его не приняли за предложение. */
.svc-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 8px}
.svc-formats > div{border:1px solid var(--line);border-radius:14px;padding:22px 20px 20px;background:#fff}
.svc-formats > div:not(.fm-off)::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:16px}
.svc-formats h3{font-size:var(--t-body);font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:8px}
.svc-prose .svc-formats p{margin:0;font-size:var(--t-ui);line-height:1.55}
.svc-formats > .fm-off{background:var(--tint)}
.svc-formats > .fm-off h3{color:var(--body)}
.svc-prose .svc-formats .fm-tag{display:block;margin:0 0 10px;font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
@media(max-width:1023px){.svc-formats{grid-template-columns:1fr}}

/* Уровни обучения таблицей (Р125, выбор владельца из четырёх вариантов):
   три уровня строками, длительность отдельной колонкой; способы подачи
   отдельным блоком под таблицей, у них нет своей аудитории и длительности. */
.svc-lvl{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:var(--t-ui)}
.svc-lvl thead th{text-align:left;font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);padding:12px 16px;background:var(--tint)}
.svc-lvl tbody th{text-align:left;font-weight:400;padding:16px;border-top:1px solid var(--line);color:var(--body);line-height:1.5;width:58%}
.svc-lvl tbody th b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.svc-lvl td{padding:16px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink);line-height:1.5}
.svc-lvl td.lvl-dur{font-weight:600;color:var(--navy);white-space:nowrap}
.svc-prose .svc-adds-h{margin:22px 0 10px;font-size:var(--t-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext)}
.svc-adds{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.svc-adds > div{border:1px dashed #C9D1DB;border-radius:14px;padding:16px 20px;background:var(--tint)}
.svc-adds b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.svc-adds span{display:block;font-size:var(--t-ui);line-height:1.55;color:var(--body)}
@media(max-width:600px){
  .svc-lvl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .svc-lvl tbody th,.svc-lvl td{display:block;width:auto;border-top:0;padding:2px 16px}
  .svc-lvl tbody tr{display:block;border-top:1px solid var(--line)}
  .svc-lvl tbody tr:first-child{border-top:0}
  .svc-lvl tbody th{padding-top:16px}
  .svc-lvl td:last-child{padding-bottom:16px}
  .svc-adds{grid-template-columns:1fr}
}

/* Якорь группы услуг: строка групп отменена владельцем 20 сентября,
   отступ прокрутки оставлен для ссылок на группу из других мест. */
.srv-group{scroll-margin-top:110px}

/* Распределение юрисдикций и фрагмент матрицы на странице материала (Р128).
   Цвет строк повторяет шкалу риска с главной: RISK_SCALE в viewmodel.py. */
.jm-tab{width:100%;border-collapse:collapse;margin:18px 0 12px}
.jm-tab th{text-align:left;font-weight:500;color:var(--ink);font-size:var(--t-ui);padding:10px 16px 10px 0;white-space:nowrap;width:1%;border-top:1px solid var(--line)}
.jm-tab td{padding:10px 0;vertical-align:middle;border-top:1px solid var(--line)}
.jm-tab td:nth-child(2){width:100%;padding-right:28px}
.jm-tab tr:first-child th,.jm-tab tr:first-child td{border-top:0}
.jm-l{display:block;height:10px;min-width:10px;border-radius:5px;background:var(--jm)}
.jm-l.jm-open{background:repeating-linear-gradient(135deg,var(--jm) 0 4px,rgba(255,255,255,.72) 4px 9px);opacity:.75}
.jm-n{width:1%;padding-left:16px;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.jm-sheet{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:18px 0 12px;background:#fff}
.jm-sheet-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 18px;background:var(--tint);border-bottom:1px solid var(--line);font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--goldtext)}
.jm-sheet-dim{font-weight:500;letter-spacing:0;text-transform:none;color:var(--body)}
.jm-rows{width:100%;border-collapse:collapse;font-size:var(--t-ui)}
.jm-rows th{text-align:left;font-weight:600;color:var(--ink);padding:10px 18px;border-bottom:1px solid var(--line)}
.jm-rows td{padding:12px 18px;border-bottom:1px solid var(--line);color:var(--body)}
.jm-rows tr:last-child td{border-bottom:0}
.jm-rows b{font-weight:600}
.jm-r-bl{color:#93233A}
.jm-r-hi{color:#A8471F}
.jm-r-md{color:#8a6f28}
.jm-r-lo{color:#3f7e69}
.jm-r-mr{color:#68728A}
@media(max-width:560px){
  .jm-sheet{border-radius:12px}
  .jm-rows th,.jm-rows td{padding:10px 12px}
  /* На телефоне колонки сжимают и подпись, и шкалу: строка разворачивается,
     подпись с числом идут вверху, шкала занимает всю ширину под ними. */
  .jm-tab,.jm-tab tbody,.jm-tab tr,.jm-tab th,.jm-tab td{display:block;width:auto}
  .jm-tab tr{position:relative;padding:12px 0;border-top:1px solid var(--line)}
  .jm-tab tr:first-child{border-top:0}
  .jm-tab th{padding:0 48px 0 0;border-top:0;white-space:normal}
  .jm-tab td{padding:0;border-top:0}
  .jm-tab td:nth-child(2){padding:10px 0 0}
  .jm-n{position:absolute;right:0;top:12px;padding:0}
  /* Три колонки фрагмента на телефоне рвут каждую ячейку на четыре строки,
     поэтому строка читается сверху вниз: юрисдикция, рейтинг, основание. */
  .jm-rows thead{display:none}
  .jm-rows,.jm-rows tbody,.jm-rows tr,.jm-rows td{display:block;width:auto}
  .jm-rows tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .jm-rows tr:last-child{border-bottom:0}
  .jm-rows td{padding:0;border-bottom:0}
  .jm-rows td:first-child{color:var(--ink);font-weight:600}
  .jm-rows td:nth-child(2){margin:2px 0 4px}
}

/* ===== ПРИВАТНОЕ КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ =====================================
   Страница живёт по адресу, который знает только получатель, и читается как
   документ, а не как витрина. Отсюда три отличия от остального сайта:
   у страницы своя узкая полоса вместо меню, свой короткий подвал и свой ритм,
   в котором тёмные экраны размечают документ на части. Токены те же.
   Классы kp- и kpc-, kpa-, kpf-, kpbar-, kpfoot- нигде больше не используются. */

.kp{display:block;--kpbar:56px}

/* ПОЛОСА ДОКУМЕНТА. Тонкая, тёмная, с полосой прочтения внизу: она заменяет
   меню сайта, потому что уводить читателя с предложения незачем. */
.kpbar{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
.kpbar-in{max-width:var(--maxw);margin:0 auto;padding:0 50px;height:60px;display:flex;align-items:center;gap:24px}
.kpbar-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:var(--t-ui);letter-spacing:.01em}
.kpbar-brand img{width:24px;height:24px}
.kpbar-doc{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:var(--t-small);color:var(--bodylight)}
.kpbar-kind{letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.kpbar-valid{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
/* Ссылка на PDF стоит рядом с кнопкой, но тише её: человеку из письма
   сначала предлагается прочитать страницу, а файл нужен тем, кто пересылает
   предложение внутри компании. */
.kpbar-pdf{display:inline-flex;align-items:center;gap:7px;color:var(--bodylight);font-size:var(--t-small);white-space:nowrap;transition:color var(--m-fast) var(--m-out)}
.kpbar-pdf:hover{color:var(--gold)}
.kpbar-cta{display:inline-flex;align-items:center;min-height:36px;padding:8px 20px;border:1px solid rgba(255,255,255,.35);border-radius:50px;color:#fff;font-size:var(--t-ui);font-weight:500;transition:background var(--m-fast) var(--m-out),border-color var(--m-fast) var(--m-out),color var(--m-fast) var(--m-out)}
.kpbar-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
/* Линия прочтения стоит по нижней кромке и не сдвигает содержимое полосы:
   иначе текст в полосе оказывался ниже её середины. */
.kpbar-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.07)}
.kpbar-run{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--goldink),var(--gold))}

/* ОБЛОЖКА. Светлая и спокойная: это первое, что видит человек из письма,
   и тёмный экран здесь читался как реклама. Тон задаёт тёплая подсветка и
   золотая черта, а не заливка. */
.kpc{position:relative;background:var(--bg);color:var(--ink);padding:calc(60px + var(--s-16)) 0 var(--s-12);overflow:hidden}
.kpc::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 45% at 88% 4%,rgba(194,163,90,.16),transparent 62%),radial-gradient(50% 40% at 0% 100%,rgba(12,27,42,.05),transparent 65%)}
.kpc-in{position:relative;z-index:1}
.kpc-kind{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px;font-size:var(--t-small);letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.kpc-kind::before{content:"";width:34px;height:1px;background:var(--gold)}
.kpc-kind-w{color:var(--ink)}
.kpc-kind-y{color:var(--goldtext);padding-left:14px;border-left:1px solid var(--line)}
.kpc-h1{font-size:var(--t-display);line-height:1.04;letter-spacing:-.025em;font-weight:600;margin:0 0 26px;max-width:24ch;color:var(--ink)}
.kpc-lead{font-size:var(--t-lead);line-height:1.6;color:var(--body);max-width:80ch;margin:0 0 var(--s-6)}
.kpc-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 22px 50px rgba(12,27,42,.06);max-width:900px}
.kpc-key{padding:24px 28px;border-left:1px solid var(--line)}
.kpc-key:first-child{border-left:none}
.kpc-key dt{font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--goldtext);margin-bottom:10px}
.kpc-key dd{font-size:clamp(20px,1vw + 13px,25px);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;text-wrap:balance}
.kpc-key p{font-size:var(--t-small);line-height:1.5;color:var(--body)}
.kpc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:var(--s-6)}
.kpc-link{color:var(--ink);font-size:var(--t-ui);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color var(--m-fast) var(--m-out),color var(--m-fast) var(--m-out)}
.kpc-link:hover{border-color:var(--goldink);color:var(--goldtext)}
.btn-gold{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
/* На тёмной плите и в полосе набора та же кнопка золотая: тёмная на
   тёмном не видна. */
.kpf .btn-gold,.kpsum .btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.kpf .btn-gold:hover,.kpsum .btn-gold:hover{background:#fff;border-color:#fff}

/* СОДЕРЖАНИЕ. Короткий список сразу под обложкой: документ длинный, и
   читатель должен уметь прыгнуть в нужное место с первого экрана. */
.kptoc{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kptoc-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;padding-top:18px;padding-bottom:18px}
.kptoc-lbl{margin:0;color:var(--body)}
.kptoc-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.kptoc-list a{display:inline-block;font-size:var(--t-ui);color:var(--ink);border-bottom:1px solid transparent;padding:4px 0;transition:color var(--m-fast) var(--m-out),border-color var(--m-fast) var(--m-out)}
.kptoc-list a:hover{color:var(--goldtext);border-color:var(--goldink)}

/* КАРКАС РАЗДЕЛА */
.kp-sec{background:var(--bg);scroll-margin-top:72px}
.kp-tinted{background:var(--tint)}
.kp-dark{background:var(--navy);color:#fff}
/* Заголовок раздела идёт во всю колонку: ограничение по ширине
   переносило его на вторую строку при пустой половине экрана. */
.kp-head{max-width:none;margin-bottom:var(--s-6)}
.kp-label{display:block;font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--goldtext);margin-bottom:12px}
.kp-label.light{color:var(--gold)}
.kp-dark .h-sec{color:#fff}
.kp-sub{font-size:var(--t-lead);line-height:1.6;color:var(--body);margin:16px 0 0;max-width:1000px}
.kp-dark .kp-sub{color:#E6EAF0}
.kp-note{font-size:var(--t-ui);line-height:1.6;color:var(--body);margin-top:var(--s-4);max-width:1040px}
/* Оговорка мелким кеглем идёт шире прозы: на 68 знаках она ломалась на три
   строки посреди пустой половины экрана. */
.kp-fine{font-size:var(--t-small);line-height:1.6;color:var(--body);margin-top:var(--s-4);max-width:1040px}
.kp-fine-c{max-width:840px;margin-left:auto;margin-right:auto;text-align:center}

/* ЦЕНА. Одна пара на весь документ: крупно стартовая, рядом прайс зачёркнут. */
.kp-price-now{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.kp-price-usd{font-size:var(--t-small);color:var(--body)}
.kp-price-was{font-size:var(--t-small);color:var(--body);text-decoration:line-through}
.kp-dark .kp-price-now{color:#fff}
.kp-dark .kp-price-usd,.kp-dark .kp-price-was{color:var(--bodylight)}

/* ТРИ ВХОДА */
.kp-starts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kp-start{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px;transition:transform var(--m-base) var(--m-out),box-shadow var(--m-base) var(--m-out),border-color var(--m-base) var(--m-out)}
.kp-start:hover{transform:translateY(-3px);border-color:var(--goldink);box-shadow:0 22px 48px rgba(12,27,42,.10)}
/* Первый вход выделен: с него начинают чаще всего, и он единственный,
   стоимость которого засчитывается в следующий проект. */
.kp-start-main{position:relative;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),0 24px 50px rgba(12,27,42,.10)}
.kp-start-flag{position:absolute;top:-11px;left:24px;padding:4px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:var(--t-small);font-weight:600}
.kp-start-main .kp-start-name{margin-top:6px}
.kp-start-name{font-size:var(--t-h3);font-weight:600;margin:0 0 10px;color:var(--ink)}
.kp-start-komu{font-size:var(--t-ui);line-height:1.6;color:var(--body);margin:0 0 18px}
.kp-start-itog{font-size:var(--t-ui);line-height:1.6;color:var(--ink);margin:0 0 22px}
.kp-start-itog .kp-label{margin-bottom:6px}
.kp-start-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px}
.kp-start-srok{font-size:var(--t-small);color:var(--body)}
.kp-start-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.kp-start-price .kp-price-now{font-size:20px}
/* Пометка под ценой входа: правило из условий, поставленное туда, где
   человек решает, платить ли за диагностику. */
.kp-start-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--tint);font-size:var(--t-small);line-height:1.5;color:var(--goldtext)}

/* СЕГМЕНТЫ. Переключение на переключателях формы: без скрипта и без потери
   выбора, если скрипт отключён. */
.kp-seg{margin-top:var(--s-3)}
.kp-seg-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kp-seg-name{display:none;font-size:var(--t-h3);font-weight:600;color:var(--ink);margin-bottom:var(--s-4)}
.kp-seg-tab{display:inline-block;margin:0 8px 10px 0;padding:11px 20px;border:1px solid var(--line);border-radius:999px;font-size:var(--t-ui);color:var(--body);cursor:pointer;background:var(--bg);transition:border-color var(--m-fast) var(--m-out),color var(--m-fast) var(--m-out),background var(--m-fast) var(--m-out)}
.kp-seg-tab:hover{border-color:var(--goldink);color:var(--ink)}
.kp-seg-in:checked+.kp-seg-tab{background:var(--navy);border-color:var(--navy);color:#fff}
.kp-seg-in:focus-visible+.kp-seg-tab{outline:2px solid var(--goldink);outline-offset:3px}
.kp-seg-panels{margin-top:var(--s-4)}
.kp-seg-panel{display:none}
.kp-seg-in:nth-of-type(1):checked~.kp-seg-panels .kp-seg-panel:nth-child(1),
.kp-seg-in:nth-of-type(2):checked~.kp-seg-panels .kp-seg-panel:nth-child(2),
.kp-seg-in:nth-of-type(3):checked~.kp-seg-panels .kp-seg-panel:nth-child(3),
.kp-seg-in:nth-of-type(4):checked~.kp-seg-panels .kp-seg-panel:nth-child(4){display:block;animation:kp-fade var(--m-base) var(--m-out) both}
@keyframes kp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kp-seg-lead{font-size:var(--t-ui);line-height:1.6;color:var(--body);margin:0 0 var(--s-3);max-width:1040px}
.kp-sits{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.kp-sit{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px;transition:border-color var(--m-base) var(--m-out),box-shadow var(--m-base) var(--m-out)}
.kp-sit:hover{border-color:var(--goldink);box-shadow:0 18px 40px rgba(12,27,42,.08)}
.kp-num{display:block;font-size:var(--t-small);font-weight:600;letter-spacing:.14em;color:var(--goldtext);margin-bottom:12px}
.kp-sit-title{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin:0 0 10px}
.kp-sit-text{font-size:var(--t-ui);line-height:1.65;color:var(--body);margin:0 0 20px}
.kp-sit-sol{padding-top:18px;border-top:1px solid var(--line)}
.kp-sit-name{display:inline-block;font-size:var(--t-ui);font-weight:600;color:var(--goldtext);border-bottom:1px solid currentColor;padding-bottom:1px}
a.kp-sit-name:hover{color:var(--ink)}
.kp-sit-srok{display:block;font-size:var(--t-small);color:var(--body);margin-top:6px}
.kp-sit-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:8px}
.kp-sit-price .kp-price-now{font-size:18px}

/* АУДИТ. Переключатель пакетов: три карточки сверху, подробности выбранного
   снизу, матрица показывает колонку выбранного. Всё на :checked. */
.kpa-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kpa-tab{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--bg);transition:border-color var(--m-base) var(--m-out),box-shadow var(--m-base) var(--m-out),transform var(--m-base) var(--m-out)}
.kpa-tab:hover{border-color:var(--goldink);transform:translateY(-2px)}
.kpa-tab-name{font-size:var(--t-h3);font-weight:600;color:var(--ink)}
.kpa-tab-price{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.kpa-tab-srok{font-size:var(--t-small);color:var(--body)}
.kpa-flag{position:absolute;top:-11px;right:20px;padding:4px 12px;border-radius:999px;background:var(--goldink);color:#fff;font-size:var(--t-small);font-weight:600}
.kpa-in:checked+.kpa-tab{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),0 22px 44px rgba(12,27,42,.10)}
.kpa-in:checked+.kpa-tab .kpa-tab-price{color:var(--goldtext)}
.kpa-in:focus-visible+.kpa-tab{outline:2px solid var(--goldink);outline-offset:3px}
.kpa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--s-3)}
.kpa-panels,.kpa-mlabel,.kpa-matrix{grid-column:1 / -1}
.kpa-panels{margin-top:var(--s-4)}
.kpa-panel{display:none}
.kpa-in:nth-of-type(1):checked~.kpa-panels .kpa-panel:nth-child(1),
.kpa-in:nth-of-type(2):checked~.kpa-panels .kpa-panel:nth-child(2),
.kpa-in:nth-of-type(3):checked~.kpa-panels .kpa-panel:nth-child(3){display:block;animation:kp-fade var(--m-base) var(--m-out) both}
.kpa-panel-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.kpa-panel-name{font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.kpa-panel-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.kpa-panel-price .kp-price-now{font-size:30px}
.kpa-panel-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-6);padding-top:24px}
.kpa-panel-res{font-size:var(--t-ui);line-height:1.7;color:var(--body)}
.kpa-panel-cover{margin-top:14px;font-size:var(--t-small);color:var(--body)}
.kpa-panel-cover b{color:var(--goldtext);font-weight:600}
.kpa-mlabel{margin:var(--s-8) 0 16px}

/* Матрица: имя работы и три колонки. Выбранный пакет подсвечен. */
.kp-matrix{border-top:1px solid var(--line)}
.kp-mrow{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.kp-mhead{font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--body)}
.kp-mname{font-size:var(--t-ui);line-height:1.5;color:var(--ink)}
.kp-mhead .kp-mname{color:var(--body)}
.kp-cell{text-align:center;font-size:var(--t-ui);color:var(--body)}
.kp-mcol{font-weight:600;color:var(--ink)}
.kp-yes{color:var(--goldink);font-weight:600;font-size:18px}
.kp-no{font-size:var(--t-small);opacity:.7}
.kp-cell-text{font-size:var(--t-small);color:var(--body)}
.kpa-in:nth-of-type(1):checked~.kpa-matrix .kp-cell:nth-child(2),
.kpa-in:nth-of-type(2):checked~.kpa-matrix .kp-cell:nth-child(3),
.kpa-in:nth-of-type(3):checked~.kpa-matrix .kp-cell:nth-child(4){background:rgba(194,163,90,.12);border-radius:8px;color:var(--ink)}

/* КАТАЛОГ. Группы стопкой: закрытые лежат плотно, открытая поднимается. */
.kp-group{border:1px solid var(--line);border-radius:16px;background:var(--bg);margin-bottom:12px;overflow:hidden;transition:border-color var(--m-base) var(--m-out),box-shadow var(--m-base) var(--m-out)}
.kp-group[open]{border-color:var(--goldink);box-shadow:0 22px 50px rgba(12,27,42,.09)}
.kp-group-head{cursor:pointer;list-style:none;padding:28px 60px 28px 28px;position:relative}
.kp-group-head::-webkit-details-marker{display:none}
.kp-group-head::after{content:"";position:absolute;right:30px;top:36px;width:10px;height:10px;border-right:1.5px solid var(--goldtext);border-bottom:1.5px solid var(--goldtext);transform:rotate(45deg);transition:transform var(--m-base) var(--m-out)}
.kp-group[open] .kp-group-head::after{transform:rotate(-135deg)}
.kp-group-head:focus-visible{outline:2px solid var(--goldink);outline-offset:-3px}
.kp-group-name{font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.kp-group-lead{font-size:var(--t-ui);line-height:1.6;color:var(--body);max-width:1000px;margin:0 0 14px}
.kp-group-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:var(--t-small);color:var(--body)}
.kp-group-pay .kp-label{margin:0}
.kp-group-more{color:var(--goldtext);border-bottom:1px solid currentColor}
.kp-group[open] .kp-group-more{display:none}
.kp-rows{padding:0 28px 12px}
.kp-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 210px;gap:20px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.kp-row-main{min-width:0}
.kp-row-name{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin:0 0 6px}
.kp-row-name a{border-bottom:1px solid var(--line);transition:border-color var(--m-fast) var(--m-out)}
.kp-row-name a:hover{border-color:var(--goldink)}
.kp-row-what{font-size:var(--t-ui);line-height:1.6;color:var(--body)}
.kp-row-srok{font-size:var(--t-ui);color:var(--body)}
.kp-row-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}

/* Сопровождение */
.kp-tarify{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 28px 8px}
.kp-tarif{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--tint)}
.kp-tarif-h{font-size:34px;font-weight:600;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.kp-tarif-u{font-size:var(--t-small);font-weight:400;color:var(--body)}
.kp-tarif-price{display:flex;flex-direction:column;gap:2px;margin:12px 0;font-size:20px;font-weight:600;color:var(--ink)}
.kp-tarif-price .kp-price-usd{font-weight:400}
.kp-tarif-text{font-size:var(--t-ui);line-height:1.6;color:var(--body)}
.kp-list-two{columns:2;column-gap:32px;padding:0 28px}

/* УСЛОВИЯ */
.kp-starter{display:flex;flex-wrap:wrap;align-items:center;gap:32px;padding:32px;border:1px solid var(--goldink);border-radius:18px;background:linear-gradient(120deg,rgba(194,163,90,.10),rgba(194,163,90,.02));margin-bottom:var(--s-6)}
.kp-starter-big{display:flex;flex-direction:column;align-items:flex-start;min-width:150px}
.kp-starter-p{font-size:64px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.kp-starter-w{font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;color:var(--goldtext);font-weight:600;margin-top:6px}
.kp-starter-txt{flex:1 1 320px}
.kp-starter-name{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin-bottom:8px}
.kp-starter-txt p{font-size:var(--t-ui);line-height:1.65;color:var(--body)}
.kp-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:var(--s-6)}
.kp-rule{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:24px}
.kp-rule-name{font-size:var(--t-ui);font-weight:600;color:var(--ink);margin-bottom:8px}
.kp-rule-text{font-size:var(--t-ui);line-height:1.6;color:var(--body)}
.kp-pays{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kp-pay{padding:20px 24px;border-left:2px solid var(--goldink);background:var(--bg)}
.kp-pay-v{font-size:var(--t-ui);color:var(--ink)}

/* КАК МЫ РАБОТАЕМ. Шаги стопкой: карточка прилипает под полосой документа,
   следующая наезжает сверху. Процесс читается как последовательность. */
.kp-steps{list-style:none;margin:0 0 var(--s-8)}
.kp-step{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px}
.kp-step-name{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin:0 0 8px}
.kp-step-text{font-size:var(--t-ui);line-height:1.65;color:var(--body)}
.kp-stack .kp-step{position:sticky;top:calc(var(--kpbar) + 24px);box-shadow:0 -2px 0 var(--bg),0 18px 44px rgba(12,27,42,.07)}
.kp-stack .kp-step:nth-child(1){top:calc(var(--kpbar) + 24px)}
.kp-stack .kp-step:nth-child(2){top:calc(var(--kpbar) + 40px)}
.kp-stack .kp-step:nth-child(3){top:calc(var(--kpbar) + 56px)}
.kp-stack .kp-step:nth-child(4){top:calc(var(--kpbar) + 72px)}
.kp-stack .kp-step+.kp-step{margin-top:20px}
.kp-two{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.kp-col{min-width:0}
.kp-col-name{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin-bottom:16px}
.kp-list{list-style:none}
.kp-list li{position:relative;padding-left:22px;font-size:var(--t-ui);line-height:1.65;color:var(--body);margin-bottom:12px}
.kp-list li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--goldink)}
.kp-list-no li::before{background:var(--line)}
.kp-dark .kp-list li{color:#E6EAF0}

/* О НАС */
.kp-about{font-size:var(--t-ui);line-height:1.7;color:var(--body);max-width:1040px;margin-bottom:var(--s-6)}
.kp-advs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:var(--s-6)}
.kp-adv{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:24px}
.kp-adv-name{font-size:var(--t-ui);font-weight:600;color:var(--ink);margin-bottom:8px}
.kp-adv-text{font-size:var(--t-ui);line-height:1.6;color:var(--body)}
.kp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kp-fact{padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.kp-fact-v{display:block;font-size:clamp(24px,1vw + 16px,30px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:8px 0 10px}
.kp-fact-t{font-size:var(--t-small);line-height:1.55;color:var(--body)}
/* Избранные проекты: те же три кейса, что на сайте. Для холодного читателя
   это единственное доказательство, которое не является словами о себе. */
.kp-eng{margin-top:var(--s-8)}
.kp-eng-note{margin:0 0 var(--s-4);font-size:var(--t-small);color:var(--body)}
.kp-engs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kp-eng-card{position:relative;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.kp-eng-card::before{content:"";position:absolute;left:24px;top:0;width:34px;height:2px;background:var(--goldink)}
.kp-eng-card h3{font-size:var(--t-ui);font-weight:600;color:var(--ink);margin-bottom:10px}
.kp-eng-card p{font-size:var(--t-ui);line-height:1.6;color:var(--body)}
.kp-memo{margin-top:var(--s-6)}

/* ВОПРОСЫ */
.kp-qs{border-top:1px solid var(--line)}
/* Вопросы стоят колонкой по центру страницы: справа от них ничего нет. */
.kp-mid{max-width:820px;margin:0 auto}
.kp-q{border-bottom:1px solid var(--line)}
.kp-q-head{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative}
.kp-q-head::-webkit-details-marker{display:none}
.kp-q-head::after{content:"";position:absolute;right:10px;top:26px;width:9px;height:9px;border-right:1.5px solid var(--goldtext);border-bottom:1.5px solid var(--goldtext);transform:rotate(45deg);transition:transform var(--m-base) var(--m-out)}
.kp-q[open] .kp-q-head::after{transform:rotate(-135deg)}
.kp-q-head:hover .kp-q-name{color:var(--goldtext)}
.kp-q-head:focus-visible{outline:2px solid var(--goldink);outline-offset:-2px}
.kp-q-name{display:inline;font-size:var(--t-h3);font-weight:500;color:var(--ink)}
.kp-q-text{font-size:var(--t-ui);line-height:1.7;color:var(--body);margin:0 0 20px}

/* ФИНАЛЬНАЯ ПЛИТА. Одна тяжёлая вещь вместо обычного подвала: стеклянная
   поверхность, металлическая кромка и блик, который идёт за курсором. */
.kp-final{background:var(--navy);color:#fff;padding-bottom:var(--s-8);scroll-margin-top:72px}
.kpf{position:relative;overflow:hidden;border-radius:26px;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(194,163,90,.55) 38%,rgba(255,255,255,.08) 60%,rgba(194,163,90,.35));box-shadow:0 40px 90px rgba(0,0,0,.45)}
.kpf-in{position:relative;z-index:1;border-radius:25px;padding:clamp(28px,4vw,64px);background:linear-gradient(160deg,rgba(24,44,66,.92),rgba(9,19,30,.96));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kpf-glare{position:absolute;inset:0;z-index:0;border-radius:26px;pointer-events:none;background:radial-gradient(420px circle at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.14),transparent 60%);opacity:.9;transition:background var(--m-fast) linear}
.kpf-h{font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 var(--s-6)}
.kpf-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s-6)}
.kp-step-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 22px}
.kp-step-row .kp-num{margin:0}
.kp-step-row .kp-step-name{margin-bottom:4px}
.kpf-steps .kp-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:22px}
.kpf-steps .kp-step-name{color:#fff}
.kpf-steps .kp-step-text{color:var(--bodylight)}
.kpf-steps .kp-num{color:var(--gold)}
.kpf-act{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.14)}
.kpf-link{font-size:var(--t-ui);color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:border-color var(--m-fast) var(--m-out),color var(--m-fast) var(--m-out)}
.kpf-link:hover{border-color:var(--gold);color:var(--gold)}
.kpf-valid{margin-top:22px;font-size:var(--t-small);color:var(--gold)}
/* Форма стоит рядом с шагами: «мне интересно» и «я написал» больше не
   разделены переходом на другую страницу. */
.kpf-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:var(--s-8);align-items:start}
.kpform{padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.04)}
.kpform-h{font-size:var(--t-ui);font-weight:600;color:#fff;margin-bottom:18px}
.kpform .frow{margin-bottom:14px}
.kpform label{display:block;margin-bottom:6px;font-size:var(--t-small);color:var(--bodylight)}
.kpform input[type=text],.kpform input[type=email],.kpform input[type=tel],.kpform textarea{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(12,27,42,.5);color:#fff;font:inherit;font-size:var(--t-ui)}
.kpform input:focus-visible,.kpform textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.kpform textarea{resize:vertical;min-height:72px}
.kpform .fcheck{display:flex;align-items:flex-start;gap:10px}
.kpform .fcheck input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}
.kpform .fcheck label{margin:0;line-height:1.5}
.kpform .req{color:var(--gold)}
.kpform .formerr{margin-bottom:12px;font-size:var(--t-small);color:#F2B8A8}
.kpform-btn{width:100%;margin-top:4px}
.kpform .ferr{display:block;margin-top:6px;font-size:var(--t-small);color:#F2B8A8}
.kpform .is-error input,.kpform .is-error textarea{border-color:#F2B8A8}

/* ПОДВАЛ ДОКУМЕНТА */
.kpfoot{background:var(--navy);color:var(--bodylight);padding:var(--s-6) 0 var(--s-8);border-top:1px solid rgba(255,255,255,.08)}
.kpfoot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.kpfoot-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--t-ui)}
.kpfoot-links a{border-bottom:1px solid transparent;transition:color var(--m-fast) var(--m-out),border-color var(--m-fast) var(--m-out)}
.kpfoot-links a:hover{color:var(--gold);border-color:var(--gold)}
.kpfoot-req{margin-top:20px;font-size:var(--t-small)}
.kpfoot-fine{margin-top:8px;font-size:var(--t-small);line-height:1.6;max-width:var(--w-prose)}

/* ДВИЖЕНИЕ. Один приём на весь документ: блок приходит снизу и проявляется,
   пока входит в экран. Держится на прокрутке самим браузером, без скрипта.
   Там, где прокруточных анимаций нет, всё просто видно сразу. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .kp-rise,.kp-start,.kp-sit,.kp-rule,.kp-adv,.kp-fact,.kp-group,.kpa-tab{animation:kp-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .kpbar-run{animation:kp-run linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes kp-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Страховка: если расписание прокрутки не двигается, скрипт ставит этот
   класс и документ читается без появления. Пустых блоков не бывает. */
.kp-nomotion .kp-rise,.kp-nomotion .kp-start,.kp-nomotion .kp-sit,.kp-nomotion .kp-rule,
.kp-nomotion .kp-adv,.kp-nomotion .kp-fact,.kp-nomotion .kp-group,.kp-nomotion .kpa-tab{animation:none;opacity:1;transform:none}
@keyframes kp-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .kpc-wall-row i,.kpc-scroll i{animation:none}
  .kpc-scroll{display:none}
}

@media(max-width:1100px){
  .kpbar-in{padding:0 32px}
  .kpa{grid-template-columns:1fr}
  .kpa-panel-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .kp-starts,.kp-rules,.kp-advs,.kp-facts,.kp-pays,.kp-tarify,.kp-engs{grid-template-columns:repeat(2,1fr)}
  .kpf-grid{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:900px){
  .kpc-keys{grid-template-columns:1fr}
  .kpc-key{border-left:none;border-top:1px solid var(--line)}
  .kpc-key:first-child{border-top:none}
  .kp-sits{grid-template-columns:1fr}
  .kp-row{grid-template-columns:1fr;gap:10px}
  .kp-row-price{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:baseline}
  .kp-two{grid-template-columns:1fr;gap:var(--s-4)}
  .kp-list-two{columns:1}
  /* Стопка шагов на узком экране мешает: карточки перекрывают текст под собой. */
  .kp-stack .kp-step{position:static}
}
@media(max-width:760px){
  .kpbar-in{padding:0 20px;gap:12px}
  .kpbar-name,.kpbar-kind{display:none}
  .kpbar-valid{border-left:none;padding-left:0;margin-left:auto;white-space:nowrap}
  .kpbar-pdf-full{display:none}
  .kpbar-cta{white-space:nowrap;padding:8px 16px}
  .kpc{padding-top:calc(var(--kpbar) + var(--s-12))}
  .kp-starts,.kp-rules,.kp-advs,.kp-facts,.kp-pays,.kp-tarify,.kp-engs{grid-template-columns:1fr}
  .kp-group-head{padding:22px 48px 22px 20px}
  .kp-group-head::after{right:22px;top:30px}
  .kp-rows,.kp-tarify,.kp-list-two{padding-left:20px;padding-right:20px}
  .kp-starter{gap:20px;padding:24px}
  .kp-starter-p{font-size:52px}
  /* Матрица аудита: строка разворачивается, показывается колонка выбранного
     пакета, остальные скрыты. Три колонки по 100 пикселей нечитаемы. */
  .kp-mrow{grid-template-columns:1fr auto;gap:8px;padding:12px 0}
  .kp-mhead{display:none}
  .kp-cell{text-align:right;padding:4px 10px}
  .kpa-in:nth-of-type(1):checked~.kpa-matrix .kp-cell:not(:nth-child(2)),
  .kpa-in:nth-of-type(2):checked~.kpa-matrix .kp-cell:not(:nth-child(3)),
  .kpa-in:nth-of-type(3):checked~.kpa-matrix .kp-cell:not(:nth-child(4)){display:none}
}

/* УКАЗАТЕЛЬ РАЗДЕЛОВ. Документ длинный, и серьёзный читатель возвращается к
   ценам и условиям. Колонка ставится скриптом и только на широком экране:
   на планшете и телефоне она отнимала бы поле без пользы. */
.kpnav{display:none}
@media(min-width:1240px) and (pointer:fine){
  .kpnav{display:flex;flex-direction:column;align-items:flex-end;gap:14px;position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:90}
  .kpnav-item{display:flex;align-items:center;gap:10px;color:var(--body)}
  .kpnav-dot{width:18px;height:1px;background:currentColor;opacity:.45;transition:width var(--m-base) var(--m-out),opacity var(--m-base) var(--m-out)}
  .kpnav-label{font-size:var(--t-small);opacity:0;transform:translateX(6px);transition:opacity var(--m-base) var(--m-out),transform var(--m-base) var(--m-out)}
  /* Подпись активного раздела показывается только там, где рядом с
     колонкой есть поле: на 1440 она наезжала на карточки. */
  .kpnav-item:hover .kpnav-label{opacity:1;transform:none}
  .kpnav-item:hover .kpnav-dot{opacity:1;width:26px}
  .kpnav-item.on{color:var(--goldtext)}
  .kpnav-item.on .kpnav-dot{opacity:1;width:32px}
  /* На тёмных экранах колонка светлеет: иначе она пропадает на синем.
     Класс ставит скрипт по текущему разделу. */
  .kpnav.light .kpnav-item{color:var(--bodylight)}
  .kpnav.light .kpnav-item.on{color:var(--gold)}
}
@media(min-width:1600px) and (pointer:fine){
  .kpnav{right:40px}
  .kpnav-item.on .kpnav-label{opacity:1;transform:none}
}

@media(max-width:480px){
  /* Срок действия здесь не помещается, и полоса документа остаётся пустой.
     Прячем её целиком, иначе ссылка на файл повисает посреди полосы, а не
     стоит рядом с кнопкой. */
  .kpbar-doc{display:none}
  .kpbar-pdf{margin-left:auto}
}

/* НАБОР УСЛУГ. Отметка стоит рядом с ценой, сумма собирается внизу экрана.
   Смысл: клиент уходит в разговор со своим списком, а не с вопросом «сколько
   это всё вместе». Скидки здесь не пересчитываются: в ценах уже стоят
   стартовые условия, а по правилам скидки не суммируются. */
.kp-pick{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin-top:10px}
.kp-pick-in{position:absolute;opacity:0;width:1px;height:1px}
.kp-pick-box{width:18px;height:18px;border:1px solid var(--line);border-radius:5px;background:var(--bg);transition:border-color var(--m-fast) var(--m-out),background var(--m-fast) var(--m-out)}
.kp-pick-t{font-size:var(--t-small);color:var(--body);transition:color var(--m-fast) var(--m-out)}
.kp-pick:hover .kp-pick-box{border-color:var(--goldink)}
.kp-pick-in:checked+.kp-pick-box{background:var(--goldink);border-color:var(--goldink);box-shadow:inset 0 0 0 3px var(--bg)}
.kp-pick-in:checked~.kp-pick-t{color:var(--goldtext)}
.kp-pick-in:focus-visible+.kp-pick-box{outline:2px solid var(--goldink);outline-offset:2px}
.kp-pick-card{margin-top:16px}
.kp-pick-row{margin-top:8px}
.kpsum{position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);z-index:95;background:rgba(12,27,42,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(194,163,90,.35);animation:kpsum-up var(--m-base) var(--m-out) both}
@keyframes kpsum-up{from{transform:translateY(100%)}to{transform:none}}
.kpsum-in{max-width:var(--maxw);margin:0 auto;padding:14px 50px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.kpsum-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;color:#fff}
.kpsum-n{font-size:var(--t-ui);color:var(--bodylight)}
.kpsum-total{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--gold)}
.kpsum-note{font-size:var(--t-small);color:var(--bodylight)}
.kpsum-act{display:flex;align-items:center;gap:18px}
.kpsum-clear{background:none;border:none;color:var(--bodylight);font-size:var(--t-ui);cursor:pointer;border-bottom:1px solid transparent;transition:color var(--m-fast) var(--m-out),border-color var(--m-fast) var(--m-out)}
.kpsum-clear:hover{color:#fff;border-color:rgba(255,255,255,.5)}
@media(max-width:760px){
  .kpsum-in{padding:10px 20px;gap:8px}
  .kpsum .btn{padding:12px 20px}
  .kpsum-note{display:none}
  .kpsum-act{width:100%;justify-content:space-between}
  .kpsum-act .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.kpsum{animation:none}}

/* ПЕЧАТЬ. Предложение распечатывают и сохраняют в PDF: на согласование,
   юристам, в закупку. Поэтому в печати снимается всё, что держится на
   прокрутке и на выборе, а тёмные экраны становятся светлыми: браузер по
   умолчанию не печатает фоны, и белый текст на белом исчез бы. */
@media print{
  /* Размер страницы задан здесь, а не в настройках печати: из этого же
     правила печатается файл assets/kp-2026.pdf скриптом tools/kp-pdf.py,
     и поля должны быть одинаковыми у файла и у печати из браузера. */
  @page{size:A4;margin:14mm 13mm}
  .kpbar,.kpnav,.kpsum,.kpc-scroll,.kpc-wall,.kpf-glare,.kp-pick,.kpc-cta{display:none}
  .kpc::after{display:none}
  .kp-rise,.kp-start,.kp-sit,.kp-rule,.kp-adv,.kp-fact,.kp-group,.kpa-tab{animation:none;opacity:1;transform:none}
  /* Свёрнутые группы и скрытые панели раскрываются: в бумаге нет нажатий. */
  details>*{display:block}
  .kpa-panel,.kp-seg-panel{display:block}
  .kp-stack .kp-step{position:static}
  .kpc,.kp-dark,.kp-final,.kpfoot,.kpf-in{background:#fff;color:#000}
  .kpc-h1,.kpf-h,.kpa-panel-name,.kp-dark .h-sec,.kpa-tab-name,.kp-mcol,.kpc-kind-w,.kpf-link,.kpfoot .logo{color:#000}
  .kpc-lead,.kp-dark .kp-sub,.kp-mname,.kpa-panel-res,.kp-dark .kp-list li,.kpf-valid,.kpsum-note{color:#333}
  .kpc-key,.kpa-tab,.kpf-steps .kp-step,.kpf{background:none;border-color:#ccc;box-shadow:none}
  .kpc-key dd,.kpa-tab-price,.kpa-panel-price .kp-price-now,.kp-dark .kp-price-now{color:#000}
  .kp-label.light,.kpc-kind-y,.kp-yes{color:#866A2A}
  .kp-sec,.kp-group,.kp-sit,.kp-start,.kpa-panel,.kpf{break-inside:avoid}
  .kp-sec{padding:0}
  /* Обложка стояла ниже на высоту полосы документа, которой в бумаге нет. */
  .kpc{padding-top:var(--s-6)}
  /* Содержание это ссылки: на бумаге они никуда не ведут. */
  .kptoc{display:none}
  /* Вкладки сегментов заменяются именем внутри каждой панели: в бумаге
     открыты все четыре, и ряд вкладок вверху ничего не объясняет. */
  .kp-seg-tab{display:none}
  .kp-seg-name{display:block;margin-top:var(--s-8);padding-top:var(--s-4);
    border-top:1px solid var(--line);margin-bottom:var(--s-3)}
  /* Стрелки раскрытия: в бумаге всё и так раскрыто. */
  .kp-q-head::after,.kp-group-head::after{display:none}
  .kpc-keys{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ЗОНЫ НАЖАТИЯ. Раньше они задавались шириной экрана, и на планшете 768
   пикселей ссылки снова становились по 32 пикселя, хотя палец тот же.
   Правило привязано к типу указателя, поэтому действует на любом сенсорном
   экране и не трогает мышь. */
@media(pointer:coarse){
  .kpbar-cta,.kpbar-pdf,.kp-pick{min-height:44px;align-items:center}
  .kpc-link,.kpf-link,.kpfoot-links a{display:inline-flex;align-items:center;min-height:44px}
  /* Ссылка содержания не делается flex-контейнером: внутри неё лежит
     неразрывный кусок «ПОД/ФТ», и flex съедал пробел перед ним. */
  .kptoc-list a{display:inline-block;padding-top:11px;padding-bottom:11px}
  .kpbar-brand{min-height:44px;align-items:center}
  .kp-seg-tab{padding-top:13px;padding-bottom:13px}
  /* Ссылка на услугу внутри карточки ситуации: тот же приём, что у
     ссылок публикаций, отступ сверху и снизу вместо высоты. */
  .kp-sit-name,.kp-row-name a{display:inline-block;padding:10px 0}
  .kp-row-name{margin-bottom:0}
}