/* ==========================================================================
   Е-Кадастр — дизайн-система сайта, 2026
   Источник токенов: Брендбук Е-Кадастр 2026 (раздел «Цвет», «Типографика»)
   Баланс: 70% светлых поверхностей, 20% синей системы, до 10% акцентов
   ========================================================================== */

:root{
  /* --- фирменные цвета --- */
  --deep:      #14206E;   /* Глубокий синий  — стратегия, обложки, доверие   */
  --blue:      #34429A;   /* Фирменный синий — логотип, заголовки, навигация */
  --blue-mid:  #5561AB;   /* Средний синий   — вторичный акцент, схемы       */
  --draft:     #E9ECF8;   /* Светлый чертёжный — фоны, карточки, таблицы     */
  --graphite:  #1F2430;   /* Графит          — основной текст                */
  --white:     #FFFFFF;
  --green:     #197A5A;   /* Зелёный результата — только подтверждённый успех*/
  --gold:      #C38B27;   /* Золотой маркер  — редкий акцент лидерства       */

  /* --- производные --- */
  --night:     #0A1030;   /* «ночная» сцена сканера, темнее глубокого синего */
  --night-2:   #0E1740;
  --ink-60:    rgba(31,36,48,.62);
  --ink-42:    rgba(31,36,48,.42);
  --line:      rgba(52,66,154,.16);
  --line-soft: rgba(52,66,154,.10);
  --glow:      rgba(102,140,255,.55);

  /* --- типографика --- */
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* --- ритм --- */
  --wrap: 1240px;
  --gap: clamp(16px, 2.2vw, 28px);
  --sect: clamp(64px, 8vw, 120px);
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --shadow-s: 0 1px 2px rgba(20,32,110,.06), 0 6px 18px rgba(20,32,110,.06);
  --shadow-m: 0 2px 4px rgba(20,32,110,.06), 0 18px 46px rgba(20,32,110,.10);
  --shadow-l: 0 30px 80px rgba(10,16,48,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ==========================================================================
   База
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.55;
  color:var(--graphite);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--deep)}
button{font:inherit}

h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;letter-spacing:-.015em;color:var(--deep)}
h1{font-size:clamp(32px,5.4vw,56px);line-height:1.05}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.13}
h3{font-size:clamp(18px,1.6vw,22px);line-height:1.25;font-weight:600}
h4{font-size:clamp(16px,1.25vw,18px);line-height:1.3;font-weight:600}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(44px,5vw,72px)}
.section--draft{background:linear-gradient(180deg,#fff 0%,var(--draft) 22%,var(--draft) 78%,#fff 100%)}
.section--night{background:var(--night);color:#D8DEF6}
.section--night h2,.section--night h3{color:#fff}

.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink-60);max-width:64ch}
.section--night .lead{color:rgba(216,222,246,.78)}

/* заголовок секции */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-mid);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.section--night .eyebrow{color:#8FA3E8}

.sect-head{max-width:78ch;margin-bottom:clamp(28px,3.4vw,48px)}
.sect-head--split{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);max-width:none}
@media (min-width:900px){
  .sect-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:var(--r-s);border:1px solid transparent;
  font-weight:600;font-size:15px;line-height:1;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
  text-decoration:none;text-align:center;max-width:100%;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(52,66,154,.28)}
.btn--primary:hover{background:var(--deep);color:#fff;box-shadow:0 10px 28px rgba(20,32,110,.34)}
.btn--ghost{background:transparent;color:var(--deep);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);background:rgba(52,66,154,.05);color:var(--deep)}
.btn--onnight{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn--onnight:hover{background:rgba(255,255,255,.18);color:#fff}
.btn--sm{padding:9px 16px;font-size:14px}
.btn--wide{width:100%}

.arrow{width:16px;height:16px;flex:0 0 16px;transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ==========================================================================
   Шапка
   ========================================================================== */

.header{
  position:sticky;top:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,16,48,.0);
  transition:background .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease);
  border-bottom:1px solid transparent;
}
.header__inner{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.header.is-solid{
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#fff}
.brand svg{height:clamp(38px,3.4vw,46px);width:auto;color:currentColor}
.header.is-solid .brand{color:var(--deep)}

.nav{display:none;margin-inline-start:auto;gap:clamp(10px,1.4vw,22px);align-items:center}
@media (min-width:1024px){.nav{display:flex}}
.nav a{
  color:rgba(255,255,255,.86);font-size:14.5px;font-weight:500;padding:8px 2px;
  position:relative;transition:color .18s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:currentColor;transition:right .24s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.header.is-solid .nav a{color:var(--graphite)}
.header.is-solid .nav a:hover{color:var(--deep)}

.header__act{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
@media (min-width:1024px){.header__act{margin-inline-start:0}}

.link-help{
  display:none;align-items:center;gap:7px;font-size:14px;font-weight:500;
  color:rgba(255,255,255,.8);padding:8px 12px;border-radius:8px;
}
.link-help:hover{background:rgba(255,255,255,.10);color:#fff}
.header.is-solid .link-help{color:var(--ink-60)}
.header.is-solid .link-help:hover{background:var(--draft);color:var(--deep)}
@media (min-width:560px){.link-help{display:inline-flex}}

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:9px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);cursor:pointer;color:#fff;
}
.header.is-solid .burger{border-color:var(--line);background:#fff;color:var(--deep)}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.6px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.6px;background:currentColor;
  transition:transform .2s var(--ease),top .2s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* мобильное меню */
.mobnav{
  position:fixed;inset:var(--header-h) 0 0;z-index:55;
  background:var(--night);color:#fff;padding:28px var(--gap) 40px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  overflow-y:auto;
}
.mobnav.is-open{opacity:1;transform:none;pointer-events:auto}
.mobnav a{display:block;color:#fff;font-size:19px;font-weight:600;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.mobnav .btn{margin-top:22px}

/* ==========================================================================
   Герой + лазерный сканер
   ========================================================================== */

.hero{
  position:relative;margin-top:calc(-1 * var(--header-h));
  min-height:min(100svh,900px);
  display:flex;align-items:center;
  background:radial-gradient(120% 90% at 50% -10%,#1B2A7A 0%,var(--night-2) 45%,var(--night) 100%);
  color:#fff;overflow:hidden;isolation:isolate;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(64% 62% at 14% 56%,rgba(8,13,36,.92) 0%,rgba(8,13,36,.62) 40%,transparent 76%),
    linear-gradient(180deg,rgba(8,13,36,.46) 0%,rgba(8,13,36,.12) 24%,rgba(8,13,36,.20) 60%,rgba(8,13,36,.82) 100%);
}
.hero__inner{position:relative;z-index:2;padding-block:calc(var(--header-h) + 56px) 64px}
.hero__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr);align-items:center}}

.hero h1{color:#fff;max-width:16ch}
.hero h1 em{font-style:normal;color:#9FB4FF}
.hero__sub{font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:rgba(216,222,246,.82);max-width:52ch;margin:18px 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__note{margin-top:22px;font-size:13.5px;color:rgba(216,222,246,.55);max-width:46ch}

.kpi{
  display:grid;gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){.kpi{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi__i{background:rgba(10,16,48,.55);backdrop-filter:blur(10px);padding:18px 18px 16px}
.kpi__v{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.kpi__l{font-size:12.5px;color:rgba(216,222,246,.62);margin-top:6px;line-height:1.35}

.scan-legend{
  position:absolute;left:var(--gap);bottom:20px;z-index:2;
  display:none;gap:18px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(216,222,246,.42);font-family:var(--mono);
}
@media (min-width:1024px){.scan-legend{display:flex}}
.scan-legend b{color:#9FB4FF;font-weight:500}

/* ==========================================================================
   Услуги
   ========================================================================== */

.cards{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.svc{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
  color:inherit;
}
.svc:hover{border-color:rgba(52,66,154,.36);box-shadow:var(--shadow-m);transform:translateY(-3px);color:inherit}
.svc__art{position:relative;aspect-ratio:16/9;background:var(--night);overflow:hidden}
.svc__art svg{width:100%;height:100%}
.svc__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.svc__tag{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--blue-mid);margin-bottom:9px;
}
.svc h3{margin-bottom:8px}
.svc p{font-size:14.5px;color:var(--ink-60);margin-bottom:16px}
.svc__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.svc__meta{font-size:12.5px;color:var(--ink-42)}
.svc__go{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue)}
.svc:hover .svc__go .arrow{transform:translateX(3px)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:100px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;
}
.badge--new{background:rgba(195,139,39,.12);color:#8A6014;border:1px solid rgba(195,139,39,.3)}
.badge--law{background:rgba(52,66,154,.09);color:var(--blue);border:1px solid rgba(52,66,154,.18)}
.badge--ok{background:rgba(25,122,90,.10);color:var(--green);border:1px solid rgba(25,122,90,.22)}

/* ==========================================================================
   Карта
   ========================================================================== */

.map{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(160deg,#0C1438 0%,var(--night) 60%,#0A0F2A 100%);
  border:1px solid rgba(143,163,232,.16);
}
.map__grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.map__grid{grid-template-columns:minmax(0,1fr) 350px}}
.map__stage{position:relative;padding:clamp(14px,2vw,26px);min-height:320px}
.map__svg{width:100%;height:auto;overflow:visible;touch-action:pan-y}
.map__dot{fill:rgba(143,163,232,.30)}
.map__outline{fill:rgba(52,66,154,.10);stroke:rgba(143,163,232,.45);stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.map__beam line{stroke:#9FB4FF;stroke-width:.8;opacity:.5;vector-effect:non-scaling-stroke}

.mk{cursor:pointer}
.mk__halo{fill:rgba(159,180,255,.16)}
.mk__core{fill:#9FB4FF;stroke:#0A1030;stroke-width:1.2}
.mk[data-kind="zu"] .mk__core{fill:#5FD3AC}
.mk[data-kind="oks"] .mk__core{fill:#9FB4FF}
.mk[data-kind="lin"] .mk__core{fill:#F0BE63}
.mk[data-kind="ter"] .mk__core{fill:#C9A2FF}
.mk.is-active .mk__halo{fill:rgba(255,255,255,.24)}
.mk:focus-visible{outline:none}
.mk:focus-visible .mk__halo{fill:rgba(195,139,39,.5)}

.map__panel{
  padding:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(143,163,232,.14);
  display:flex;flex-direction:column;gap:14px;color:#D8DEF6;
}
@media (min-width:1024px){
  .map__panel{border-top:0;border-inline-start:1px solid rgba(143,163,232,.14)}
}
.map__filters{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid rgba(143,163,232,.26);background:transparent;color:rgba(216,222,246,.75);
  border-radius:100px;padding:6px 13px;font-size:12.5px;cursor:pointer;
  transition:all .18s var(--ease);
}
.chip:hover{border-color:rgba(159,180,255,.6);color:#fff}
.chip[aria-pressed="true"]{background:#fff;color:var(--deep);border-color:#fff;font-weight:600}
.chip i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px;vertical-align:1px}

.mapcard__kicker{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FA3E8}
.mapcard h3{font-size:18px;margin:8px 0}
.mapcard p{font-size:14px;color:rgba(216,222,246,.72)}
.mapcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;margin:14px 0 0}
.mapcard dt{color:rgba(216,222,246,.48)}
.mapcard dd{margin:0;color:#fff}
.map__hint{font-size:12.5px;color:rgba(216,222,246,.45);margin-top:auto}

/* ==========================================================================
   Кейсы «Наши успехи»
   ========================================================================== */

.case{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:24px;display:flex;flex-direction:column;gap:16px;
  transition:box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.case:hover{box-shadow:var(--shadow-m);border-color:rgba(52,66,154,.3)}
.case__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.case__cust{font-size:12.5px;color:var(--ink-42);letter-spacing:.02em}
.case h3{font-size:19px;margin:0}
.case__steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.case__step{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.case__step b{
  grid-row:span 2;width:22px;height:22px;border-radius:50%;
  background:var(--draft);color:var(--blue);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.case__step-l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-42);font-weight:600}
.case__step-t{font-size:14.5px;color:var(--graphite);margin-top:2px}
.case__res{
  margin-top:auto;background:rgba(25,122,90,.06);border:1px solid rgba(25,122,90,.18);
  border-radius:var(--r-s);padding:14px 16px;
}
.case__res b{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.case__res span{font-size:14.5px;color:var(--graphite)}
.case__src{font-size:12px;color:var(--ink-42);border-top:1px solid var(--line-soft);padding-top:12px}

/* ==========================================================================
   Процесс
   ========================================================================== */

.flow{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.flow{grid-template-columns:repeat(5,1fr)}}
.flow__i{background:#fff;padding:22px 20px 24px;position:relative}
.flow__n{font-family:var(--mono);font-size:12px;color:var(--blue-mid);letter-spacing:.1em}
.flow__i h4{margin:10px 0 7px}
.flow__i p{font-size:13.5px;color:var(--ink-60)}

/* ==========================================================================
   Статьи / «как было — как стало»
   ========================================================================== */

.art{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;color:inherit;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.art:hover{box-shadow:var(--shadow-m);transform:translateY(-3px);border-color:rgba(52,66,154,.3);color:inherit}
.art__art{aspect-ratio:16/8;background:var(--draft);overflow:hidden}
.art__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;gap:10px}
.art__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--ink-42)}
.art h3{font-size:18px;margin:0}
.art p{font-size:14px;color:var(--ink-60);margin:0}
.art__go{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--blue);display:inline-flex;gap:7px;align-items:center}

.baw{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.baw{grid-template-columns:repeat(2,1fr)}}
.baw__slide{
  border-radius:var(--r-m);padding:26px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;gap:14px;
}
.baw__slide--was{background:var(--draft);border-color:transparent}
.baw__slide--now{background:linear-gradient(150deg,#101A4C,var(--night));border-color:transparent;color:#D8DEF6}
.baw__slide--now h3,.baw__slide--now h4{color:#fff}
.baw__label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-42)}
.baw__slide--now .baw__label{color:#8FA3E8}
.baw ul{margin:0;padding-inline-start:1.1em;font-size:14.5px;display:grid;gap:8px}
.baw__slide--now ul{color:rgba(216,222,246,.82)}

/* ==========================================================================
   Формы
   ========================================================================== */

.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--graphite)}
.field .hint{font-size:12px;color:var(--ink-42)}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-s);
  border:1px solid var(--line);background:#fff;color:var(--graphite);
  font:inherit;font-size:15px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(52,66,154,.12);
}
.textarea{min-height:104px;resize:vertical}
.row2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.row2{grid-template-columns:repeat(2,1fr)}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-60)}
.consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--blue)}
.form__status{font-size:13.5px;padding:11px 14px;border-radius:var(--r-s);display:none}
.form__status.is-ok{display:block;background:rgba(25,122,90,.09);color:var(--green);border:1px solid rgba(25,122,90,.22)}
.form__status.is-err{display:block;background:rgba(195,139,39,.10);color:#8A6014;border:1px solid rgba(195,139,39,.28)}

.cta{
  background:linear-gradient(140deg,var(--deep) 0%,#1B2A7A 55%,#243594 100%);
  border-radius:var(--r-l);padding:clamp(28px,4vw,52px);color:#fff;position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px);
  mask-image:radial-gradient(70% 70% at 80% 20%,#000,transparent);
}
.cta__grid{position:relative;z-index:1;display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cta__grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
.cta h2{color:#fff}
.cta .lead{color:rgba(216,222,246,.82)}
.cta__form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-m);padding:22px;backdrop-filter:blur(10px)}
.cta__form label{color:#fff}
.cta__form .input,.cta__form .select,.cta__form .textarea{
  background:rgba(10,16,48,.5);border-color:rgba(255,255,255,.18);color:#fff}
.cta__form .input::placeholder{color:rgba(216,222,246,.4)}
.cta__form .consent{color:rgba(216,222,246,.66)}
.cta__form .consent a{color:#9FB4FF}

/* ==========================================================================
   Подвал
   ========================================================================== */

.footer{background:var(--night);color:rgba(216,222,246,.66);padding-block:clamp(44px,5vw,68px) 28px;font-size:14px}
.footer a{color:rgba(216,222,246,.78)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer .brand{color:#fff;margin-bottom:14px}
.footer__legal{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:12px 24px;font-size:12.5px;color:rgba(216,222,246,.42)}

/* ==========================================================================
   Внутренние страницы
   ========================================================================== */

.phead{
  position:relative;background:radial-gradient(110% 130% at 76% 0%,#1B2A7A 0%,var(--night-2) 48%,var(--night) 100%);
  color:#fff;margin-top:calc(-1 * var(--header-h));padding-block:calc(var(--header-h) + 56px) 56px;overflow:hidden;
}
.phead__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.phead__inner{position:relative;z-index:2}
.phead h1{color:#fff;max-width:19ch}
.phead .lead{color:rgba(216,222,246,.8);margin-top:16px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(216,222,246,.5);margin-bottom:18px}
.crumbs a{color:rgba(216,222,246,.72)}
.crumbs span{opacity:.45}

.layout{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:16px}

.prose{max-width:74ch;font-size:16px;line-height:1.65}
.prose h2{margin-top:1.7em;font-size:clamp(22px,2.4vw,28px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em;font-size:19px}
.prose ul,.prose ol{padding-inline-start:1.25em;display:grid;gap:9px;margin:0 0 1.1em}
.prose li>strong:first-child{color:var(--deep)}
.prose blockquote{
  margin:1.4em 0;padding:16px 20px;border-inline-start:3px solid var(--blue);
  background:var(--draft);border-radius:0 var(--r-s) var(--r-s) 0;font-size:15px;color:var(--graphite);
}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:1.3em 0;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:start;vertical-align:top}
.prose th{background:var(--draft);color:var(--deep);font-weight:600;white-space:nowrap}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--draft);padding:2px 5px;border-radius:4px}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:12.5px;color:var(--ink-42);margin-top:9px}
.prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-color:rgba(52,66,154,.35)}

.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px}
.box--draft{background:var(--draft);border-color:transparent}
.box h4{margin-bottom:10px}
.box ul{margin:0;padding-inline-start:1.1em;display:grid;gap:7px;font-size:14px;color:var(--ink-60)}

.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts__i{background:#fff;padding:18px}
.facts__v{font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--deep);line-height:1.1}
.facts__l{font-size:12.5px;color:var(--ink-42);margin-top:6px}

.toc{font-size:14px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:t}
.toc a{color:var(--ink-60);display:flex;gap:9px}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;color:var(--blue-mid);padding-top:2px}
.toc a:hover{color:var(--deep)}

.updated{font-size:12.5px;color:var(--ink-42);display:flex;align-items:center;gap:7px}
.updated i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}

/* утилиты */
.stack{display:grid;gap:var(--gap)}
.center{text-align:center;margin-inline:auto}
.mt-l{margin-top:clamp(28px,3.4vw,48px)}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* появление при скролле */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.svc:hover,.art:hover{transform:none}
}

/* якоря не уезжают под липкую шапку */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ==========================================================================
   Сквозной фон-сканер (только главная)

   Сцена закреплена во вьюпорте и продолжает работать, пока читают разделы.
   Поэтому вся главная — тёмная: разделы лежат поверх сцены полупрозрачными
   панелями, а карточки становятся стеклом. Внутренние страницы не трогаем.
   ========================================================================== */

.scanbg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0C1436;
  contain:strict}
.scanbg__cv{position:absolute;inset:0;width:100%;height:100%}
.scanbg__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(72% 58% at 14% 40%,rgba(6,10,26,.78) 0%,rgba(6,10,26,.40) 44%,transparent 80%),
    linear-gradient(180deg,rgba(6,10,26,.42) 0%,rgba(6,10,26,.04) 24%,rgba(6,10,26,.20) 62%,rgba(6,10,26,.72) 100%);
}
.has-scanbg{background:#0C1436}
/* Поднимаем над сценой только то, что действительно в потоке. Мобильное меню
   и ссылка «к содержанию» позиционируются сами — их position трогать нельзя,
   иначе фиксированное меню начинает занимать место в потоке. */
.has-scanbg .header,.has-scanbg main,.has-scanbg .footer{position:relative;z-index:1}

/* --- герой без собственного холста: сцена уже за спиной --- */
.has-scanbg .hero{background:none;min-height:min(94svh,880px)}

/* --- тёмная тема страницы ------------------------------------------------ */
.t-dark{color:#D7DFF4}
.t-dark h1,.t-dark h2,.t-dark h3,.t-dark h4{color:#fff}
.t-dark .lead{color:rgba(215,223,244,.82)}
.t-dark .eyebrow{color:#A8BAFF}
.t-dark a{color:#B3C6FF}
.t-dark a:hover{color:#C6D8FF}

/* Панель раздела: не сплошной фон, а слой, сквозь который видно сцену */
.pane{position:relative;isolation:isolate}
.t-dark .pane::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,20,48,0) 0%,rgba(12,20,48,.58) 12%,
             rgba(12,20,48,.66) 88%,rgba(12,20,48,0) 100%);
}

/* Карточки — стекло, а не белая бумага */
.t-dark .svc,.t-dark .art,.t-dark .case,.t-dark .box,.t-dark .flow__i,
.t-dark .baw__slide,.t-dark .map{
  background:rgba(23,34,74,.62);border-color:rgba(160,184,244,.26);
  color:#D7DFF4;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.t-dark .svc:hover,.t-dark .art:hover{
  border-color:rgba(183,203,255,.52);background:rgba(31,45,94,.72);
  box-shadow:0 24px 60px rgba(4,8,24,.42);color:inherit;
}
.t-dark .case:hover{border-color:rgba(183,203,255,.48);box-shadow:0 24px 60px rgba(4,8,24,.42)}
.t-dark .svc p,.t-dark .art p,.t-dark .flow__i p{color:rgba(215,223,244,.76)}
.t-dark .svc__meta,.t-dark .art__meta,.t-dark .case__cust,.t-dark .case__src,
.t-dark .case__step-l{color:rgba(215,223,244,.58)}
.t-dark .svc__tag{color:#A8BAFF;border-color:rgba(160,184,244,.30)}
.t-dark .svc__foot{border-color:rgba(160,184,244,.20)}
.t-dark .svc__go,.t-dark .art__go{color:#B3C6FF}
.t-dark .art__art{background:#05080F}
.t-dark .case__step b{background:rgba(160,184,244,.20);color:#B3C6FF}
.t-dark .case__step-t{color:#D7DFF4}
.t-dark .case__res{background:rgba(25,122,90,.14);border-color:rgba(64,190,150,.28)}
.t-dark .case__res b{color:#6FD9AE}
.t-dark .case__res span{color:#DCE6FF}
.t-dark .case__src{border-color:rgba(160,184,244,.18)}
.t-dark .flow{background:rgba(160,184,244,.22);border-color:rgba(160,184,244,.26)}
.t-dark .flow__n{color:#A8BAFF}
.t-dark .badge--law{background:rgba(160,184,244,.16);color:#B3C6FF;border-color:rgba(160,184,244,.32)}
.t-dark .badge--new{background:rgba(229,183,106,.12);color:#E5B76A;border-color:rgba(229,183,106,.3)}
.t-dark .badge--ok{background:rgba(64,190,150,.12);color:#6FD9AE;border-color:rgba(64,190,150,.26)}
.t-dark .updated{color:rgba(215,223,244,.60)}
.t-dark .baw__slide--was{background:rgba(23,34,74,.54);border-color:rgba(160,184,244,.22)}
.t-dark .baw__slide--now{background:linear-gradient(150deg,rgba(36,54,140,.74),rgba(16,26,66,.82));
  border-color:rgba(183,203,255,.30)}
.t-dark .baw ul{color:rgba(215,223,244,.84)}
.t-dark .baw__label{color:rgba(215,223,244,.60)}
.t-dark .baw__slide--now .baw__label{color:#B3C6FF}
.t-dark .box{border-color:rgba(160,184,244,.28)}
.t-dark .box ul,.t-dark .box li{color:rgba(215,223,244,.86)}

/* Кнопки на тёмном */
.t-dark .btn--ghost{color:#E6EDFF;border-color:rgba(183,203,255,.42);background:transparent}
.t-dark .btn--ghost:hover{border-color:#B3C6FF;background:rgba(183,203,255,.14);color:#fff}

/* Заголовок страницы над сценой */
.has-scanbg .header.is-solid{background:rgba(12,20,48,.84);border-bottom-color:rgba(160,184,244,.22);
  backdrop-filter:blur(14px)}
.has-scanbg .header.is-solid .brand,.has-scanbg .header.is-solid .nav a,
.has-scanbg .header.is-solid .link-help{color:#DCE6FF}
.has-scanbg .header.is-solid .nav a:hover{color:#fff}
.has-scanbg .header.is-solid .burger{background:transparent;border-color:rgba(159,180,255,.3);color:#DCE6FF}
.has-scanbg .header.is-solid .btn--ghost{color:#DCE6FF;border-color:rgba(159,180,255,.34)}

/* Подвал прозрачный — сцена продолжается до самого низа */
.has-scanbg .footer{background:rgba(9,15,38,.74);backdrop-filter:blur(14px)}

/* Мобильная и «спокойная» подача: статичный кадр вместо бесконечной анимации */
@media (prefers-reduced-motion: reduce){ .scanbg__cv{opacity:.75} }
@media (max-width:640px){
  .scanbg__veil{background:linear-gradient(180deg,rgba(6,10,26,.52) 0%,rgba(6,10,26,.20) 26%,rgba(6,10,26,.72) 100%)}
  .t-dark .svc,.t-dark .art,.t-dark .case,.t-dark .box,.t-dark .flow__i,
  .t-dark .baw__slide,.t-dark .map{backdrop-filter:none;background:rgba(19,29,66,.90)}
}

/* ==========================================================================
   Оживление иллюстраций услуг

   Чертежи не «мультик»: движется только то, что движется на объекте —
   люди работают, лазер меряет, точки снимаются одна за другой, линии
   вычерчиваются. Всё на transform и opacity, без перерисовки макета.
   Анимации стартуют, когда карточка попала в кадр (класс .is-live),
   и полностью отключаются при prefers-reduced-motion.
   ========================================================================== */

.svc__art svg,.art__art svg,.phead__art svg{overflow:visible}

/* пока карточка вне экрана — ничего не крутится */
[data-live] :is(.a-walk,.a-face,.a-leg-f,.a-leg-b,.a-arm,.a-beam,.a-pulse,
  .a-pulse-slow,.a-draw,.a-step,.a-scanv,.a-scanh,.a-rise,.a-swap,.a-blink){
  animation-play-state:paused;
}
[data-live].is-live :is(.a-walk,.a-face,.a-leg-f,.a-leg-b,.a-arm,.a-beam,.a-pulse,
  .a-pulse-slow,.a-draw,.a-step,.a-scanv,.a-scanh,.a-rise,.a-swap,.a-blink){
  animation-play-state:running;
}

/* Ходьба. Раньше разворот делался через scaleX(-1) на той же группе, что и
   перенос: у SVG точка отсчёта преобразования — начало системы координат,
   поэтому фигура не разворачивалась, а телепортировалась влево. Теперь это
   два вложенных слоя: внешний двигает, внутренний зеркалит вокруг СВОЕЙ
   точки. Разворот приходится ровно на паузу в конце пути, поэтому скачка
   нет — человек доходит, останавливается, поворачивается и идёт обратно. */
.a-walk   {animation:aWalk var(--dur,13s) ease-in-out infinite}
.a-face   {animation:aFace var(--dur,13s) steps(1,end) infinite;transform-box:view-box}
.a-leg-f  {animation:aLegF var(--step,1.05s) ease-in-out infinite;transform-box:view-box}
.a-leg-b  {animation:aLegB var(--step,1.05s) ease-in-out infinite;transform-box:view-box}
.a-arm    {animation:aArm var(--step,1.05s) ease-in-out infinite;transform-box:view-box}
.a-beam   {animation:aBeam 6.5s ease-in-out infinite;transform-box:view-box}
.a-pulse  {animation:aPulse 2.4s ease-in-out infinite}
.a-pulse-slow{animation:aPulse 5.2s ease-in-out infinite}
.a-blink  {animation:aBlink 3.6s steps(1,end) infinite}
.a-draw   {animation:aDraw 7s ease-in-out infinite}
.a-step   {animation:aStep 8s ease-in-out infinite}
.a-scanv  {animation:aScanV 7.5s linear infinite}
.a-scanh  {animation:aScanH 9s linear infinite}
.a-rise   {animation:aRise 8s ease-in-out infinite;transform-box:view-box}
.a-swap   {animation:aSwap 8s ease-in-out infinite}

@keyframes aWalk {0%,4%{transform:translateX(0)}
  46%,54%{transform:translateX(var(--dx,90px))}
  96%,100%{transform:translateX(0)}}
@keyframes aFace {0%,49%{transform:scaleX(1)}50%,99%{transform:scaleX(-1)}
  100%{transform:scaleX(1)}}
@keyframes aLegF {0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes aLegB {0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes aArm  {0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes aBeam {0%,100%{transform:rotate(-7deg);opacity:.35}
  18%{transform:rotate(-7deg);opacity:1}
  48%{transform:rotate(9deg);opacity:1}
  66%{transform:rotate(9deg);opacity:.25}}
@keyframes aPulse{0%,100%{opacity:.22}50%{opacity:1}}
@keyframes aBlink{0%,49%{opacity:1}50%,100%{opacity:.18}}
@keyframes aDraw {0%{stroke-dashoffset:var(--len,300)}
  38%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--len,300)}}
@keyframes aStep {0%,8%{opacity:0}18%,88%{opacity:1}100%{opacity:0}}
@keyframes aScanV{0%{transform:translateY(0);opacity:0}
  8%{opacity:.95}92%{opacity:.95}100%{transform:translateY(var(--dy,-140px));opacity:0}}
@keyframes aScanH{0%{transform:translateX(0);opacity:0}
  8%{opacity:.9}92%{opacity:.9}100%{transform:translateX(var(--dx,300px));opacity:0}}
@keyframes aRise {0%,6%{transform:scaleY(0)}26%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes aSwap {0%,44%{opacity:0}54%,94%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  [data-live] *{animation:none !important}
}