/* ============================================================
   BestComKZ — «Объект под контролем»
   Палитра построена на фирменном логотипе: синий градиентный щит.
   фон #060F1C · акцент #3FA9F5 → #0B63E5 · свечение #7FD4FF · белый
   Заголовки: Cambria (+PT Serif) · Текст: Calibri (+PT Sans)
   ============================================================ */

:root{
  /* СВЕТЛАЯ ТЕМА — основной фон сайта.
     Тёмные «островки» (hero, манифест, FREEDO, финальный CTA, подвал)
     переопределяют те же переменные через .on-dark — компоненты не меняются. */
  --navy:#E6EFFA;         /* фон страницы — светло-синий */
  --navy-2:#F2F7FD;       /* светлые панели */
  --navy-3:#FFFFFF;       /* карточки */
  --line:#C7DAEF;
  --acc:#0B7BE8;
  --acc-2:#0B63E5;
  --acc-hi:#0A57C9;
  --acc-soft:rgba(11,99,229,.07);
  --grad:linear-gradient(135deg,#1478DF 0%,#0B63E5 50%,#0A4EBE 100%);
  --grad-soft:linear-gradient(135deg,rgba(11,99,229,.08),rgba(20,120,223,.08));
  --grad-text:linear-gradient(100deg,#0B63E5 0%,#1478DF 55%,#0A4EBE 100%);
  --ink:#0B1B2E;
  --sky:#0B63E5;
  --sky-soft:rgba(11,99,229,.09);
  --white:#0B1B2E;        /* основной текст */
  --mut:#56708A;
  --on-acc:#FFFFFF;       /* текст на заливке акцентом */
  --card-sh:0 1px 2px rgba(11,40,80,.07),0 10px 28px -16px rgba(11,40,80,.28);
  --card-bg:#FFFFFF;
  --surf-2:#D9E7F7;      /* приглушённая панель */
  --tint:rgba(11,99,229,.06);
  --card-hover-sh:0 3px 6px rgba(11,27,46,.07),0 22px 48px -20px rgba(11,27,46,.32);
  --card-hover-line:rgba(11,99,229,.45);
  --font-d:Cambria,"PT Serif",Georgia,"Times New Roman",serif;
  --font-t:Calibri,"PT Sans","Segoe UI",Tahoma,Arial,sans-serif;
  --wrap:1180px;
  --r:14px;
}

/* тёмные островки — те же переменные, исходные «пультовые» значения */
.on-dark{
  --navy:#14304F;         /* было #060F1C — почти чёрный */
  --navy-2:#0E2540;
  --navy-3:#1B3D63;
  --line:#2E5A85;
  --acc:#3FA9F5;
  --acc-2:#0B63E5;
  --acc-hi:#7FD4FF;
  --acc-soft:rgba(63,169,245,.14);
  --grad:linear-gradient(135deg,#5BC0FF 0%,#2E9BF2 48%,#0B63E5 100%);
  --grad-soft:linear-gradient(135deg,rgba(91,192,255,.16),rgba(11,99,229,.16));
  --grad-text:linear-gradient(100deg,#A9E6FF 0%,#5BC0FF 42%,#2E9BF2 100%);
  --ink:#04162B;
  --sky:#7FD4FF;
  --sky-soft:rgba(127,212,255,.12);
  --white:#F2F7FC;
  --mut:#AFC5DA;
  --on-acc:#04162B;
  --card-sh:0 18px 40px -22px rgba(0,0,0,.7);
  --card-bg:linear-gradient(170deg,rgba(41,78,120,.7),rgba(18,42,70,.6));
  --surf-2:rgba(12,32,56,.5);
  --tint:rgba(63,169,245,.12);
  --card-hover-sh:0 24px 60px rgba(0,0,0,.45),0 0 42px rgba(11,99,229,.2);
  --card-hover-line:rgba(63,169,245,.55);
  background:var(--navy);
  color:var(--white);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-t);
  background:var(--navy);
  color:var(--white);
  line-height:1.55;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--sky);text-decoration:none}
ul,ol{list-style:none}
[id]{scroll-margin-top:92px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

::selection{background:var(--acc);color:#fff}

/* мягкое синее свечение фона — снимает плоскость тёмной заливки */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(11,99,229,.07), transparent 62%),
    radial-gradient(680px 480px at 92% 22%, rgba(11,99,229,.05), transparent 64%);
}
.hdr,main,.foot{position:relative;z-index:1}

/* тонкое зерно поверх всей страницы */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}

/* ---------- переход между страницами ----------
   Главная и /bitrix24/ — два отдельных документа, и обычный переход между ними
   даёт белую вспышку. Кросс-документные view transitions заменяют её
   перекрёстным затуханием. Работает только внутри одного origin и только там,
   где браузер это умеет (Chrome/Edge/Opera); Safari и Firefox просто переходят
   как раньше — ломаться нечему, правило им неизвестно и игнорируется.
   ⚠️ Оба документа обязаны объявить @view-transition, иначе перехода не будет.
   Здесь это выполняется само: styles.css один на обе страницы. */
@view-transition{navigation:auto}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.22,.7,.3,1);
}

/* Шапка на обеих страницах одна и та же. Своё имя выносит её из общего снимка
   в отдельный слой: при переходе она остаётся на месте, а не мигает вместе
   с контентом. Если уходим из середины страницы (шапка светлая, .scrolled)
   на верх новой (тёмная) — это тоже плавное перетекание, а не скачок. */
.hdr{view-transition-name:hdr}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-t);font-weight:700;font-size:15px;
  padding:.72em 1.35em;border-radius:8px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
  white-space:nowrap;
}
.btn--lg{font-size:17px;padding:.85em 1.6em}
.btn--acc,.btn--accfill{
  position:relative;overflow:hidden;
  background:var(--grad);color:var(--on-acc);
  box-shadow:0 6px 22px rgba(11,99,229,.32);
}
.btn--accfill{letter-spacing:.02em}
/* блик, пробегающий по кнопке при наведении */
.btn--acc::after,.btn--accfill::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.3,.7,.3,1);
}
.btn--acc:hover,.btn--accfill:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(63,169,245,.45),0 0 0 1px rgba(127,212,255,.35);
}
.btn--acc:hover::after,.btn--accfill:hover::after{left:115%}
.btn--acc>*,.btn--accfill>*{position:relative;z-index:1}
.btn--ghost{border-color:var(--line);color:var(--white);background:var(--navy-2);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--acc);color:var(--acc-hi);transform:translateY(-2px);box-shadow:0 0 24px rgba(63,169,245,.18)}
.ic{width:1.1em;height:1.1em;flex:none}

/* ---------- шапка ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(16,40,68,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.hdr.scrolled{background:rgba(238,245,253,.96);box-shadow:0 8px 28px rgba(11,40,80,.16)}
.hdr__in{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;height:68px;
  display:flex;align-items:center;gap:18px;flex-wrap:nowrap;min-width:0;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--white)}
.brand__mark{
  width:32px;height:auto;flex:none;
  filter:drop-shadow(0 3px 10px rgba(63,169,245,.45));
  transition:transform .3s cubic-bezier(.3,.8,.3,1),filter .3s ease;
}
.brand:hover .brand__mark{transform:translateY(-1px) scale(1.05);filter:drop-shadow(0 5px 16px rgba(63,169,245,.7))}
.brand__text{font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:.04em}
.brand__text b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__text i{font-style:normal;color:var(--acc-hi);font-size:.72em;vertical-align:super;margin-left:2px}
.nav{display:none;gap:18px;margin-left:auto;min-width:0}
.nav a{color:var(--mut);font-size:14.5px;font-weight:700;letter-spacing:.02em;transition:color .2s;white-space:nowrap}
.nav a:hover{color:var(--white)}
.nav__freedo{color:var(--acc) !important;font-family:var(--font-d);letter-spacing:.14em !important}
.hdr__cta{display:none;margin-left:8px}
.burger{
  margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;
  background:none;display:grid;place-content:center;gap:5px;cursor:pointer;
}
.burger span{width:20px;height:2px;background:var(--white);transition:transform .3s ease,opacity .3s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr__beam{height:2px;background:transparent}
.hdr__beam i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc-2),var(--acc),var(--acc-hi));box-shadow:0 0 12px rgba(63,169,245,.65)}

/* переключатель языка */
.lang{
  display:inline-flex;margin-left:auto;flex:none;gap:0;
  border:1px solid var(--line);border-radius:10px;padding:3px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
}
.hdr.scrolled .lang{background:rgba(11,40,80,.09)}
.lang__btn{
  font-family:var(--font-t);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:none;border:0;border-radius:7px;
  padding:6px 13px;min-height:34px;cursor:pointer;transition:color .2s ease,background .2s ease;
}
.hdr.scrolled .lang__btn{color:var(--ink)}
.lang__btn:hover{background:rgba(255,255,255,.14)}
.hdr.scrolled .lang__btn:hover{background:rgba(11,40,80,.08)}
/* активный сегмент — белая плашка с тёмным текстом (стандарт студии) */
.lang__btn.is-active,
.hdr.scrolled .lang__btn.is-active{background:#fff;color:#0B1B2E;box-shadow:0 1px 3px rgba(11,27,46,.25)}
.lang__btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
@media(min-width:960px){.lang{margin-left:14px}}
@media(max-width:959px){.burger{margin-left:10px}}

/* мобильное меню */
.nav.mopen{
  display:flex;flex-direction:column;gap:4px;
  position:fixed;inset:68px 0 auto;padding:14px 20px 22px;
  background:rgba(6,15,28,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav.mopen a{padding:12px 4px;font-size:18px;border-bottom:1px solid rgba(23,52,83,.4)}

@media(min-width:1180px){
  .nav{display:flex}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
}
/* на казахском пункты меню длиннее — даём им чуть меньше воздуха */
html[lang="kk"] .nav{gap:14px}
html[lang="kk"] .nav a{font-size:14px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,42,72,.42) 0%,rgba(18,46,78,.66) 55%,var(--navy) 100%),
    linear-gradient(100deg,rgba(14,36,62,.86) 0%,rgba(14,36,62,.16) 68%),
    radial-gradient(1000px 620px at 78% 34%,rgba(11,99,229,.32),transparent 62%);
}
.hero__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(63,169,245,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,169,245,.09) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 45%,#000 30%,transparent 75%);
}
.hero__in{
  max-width:var(--wrap);margin:0 auto;width:100%;
  padding:124px 20px 56px;
  display:grid;gap:36px;
}
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-hi);border:1px solid rgba(63,169,245,.45);border-radius:99px;
  padding:.5em 1.1em;background:rgba(6,15,28,.55);width:fit-content;
  box-shadow:0 0 26px rgba(63,169,245,.14) inset;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#41e08c;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(65,224,140,.6)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(65,224,140,0)}}
.hero__h{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(34px,6.4vw,64px);
  line-height:1.06;letter-spacing:-.01em;margin-top:22px;max-width:16ch;
}
.hero__h span{display:block}
.hero__h-l2 em{
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{max-width:600px;margin-top:20px;font-size:clamp(16px,2.2vw,19px);color:#C2D4E6}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__note{margin-top:14px;font-size:14px;color:var(--mut)}
.hero__note::before{content:"◆ ";color:var(--acc-hi);font-size:.75em}

/* HUD */
.hero__hud{display:none}
.hud{
  width:340px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(6,15,28,.8);backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(63,169,245,.12);
  overflow:hidden;
}
.hud__bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;font-size:10.5px;letter-spacing:.16em;color:var(--mut);
  border-bottom:1px solid var(--line);font-weight:700;
}
.hud__rec{display:flex;align-items:center;gap:6px;color:#ff5d5d;letter-spacing:.2em}
.hud__rec i{width:7px;height:7px;border-radius:50%;background:#ff5d5d;animation:blink 1.2s infinite}
.hud__svg{display:block;width:100%;background:radial-gradient(circle at 50% 50%,rgba(11,99,229,.22),transparent 70%)}
.hud__perimeter{stroke-dashoffset:720;animation:draw 4s ease forwards .6s}
@keyframes draw{to{stroke-dashoffset:0}}
.hud__sweepwrap{transform-origin:160px 120px;animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.hud__sensors circle{animation:blink 2s infinite}
.hud__sensors circle:nth-child(2n){animation-delay:.7s}
.hud__sensors circle:nth-child(3n){animation-delay:1.3s}
.hud__foot{
  display:flex;gap:16px;justify-content:space-between;
  padding:10px 14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--acc-hi);font-family:Consolas,monospace;
}
@media(min-width:960px){
  .hero__in{grid-template-columns:1.25fr .75fr;align-items:end}
  .hero__hud{display:flex;justify-content:flex-end}
}

/* ticker */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(10,26,46,.72);overflow:hidden;padding:13px 0;margin-top:0;
}
.ticker__track{
  display:flex;gap:28px;align-items:center;width:max-content;
  animation:tick 36s linear infinite;
  font-family:var(--font-d);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  white-space:nowrap;
}
.ticker__track i{color:var(--acc);font-style:normal;font-size:9px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{padding:70px 0 10px}
.stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  background:var(--card-bg);
  position:relative;overflow:hidden;
}
.stat::before{content:"+";position:absolute;top:8px;right:14px;color:var(--acc);opacity:.3;font-size:22px;font-family:Consolas,monospace}
.stat__n{font-family:var(--font-d);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;color:var(--white)}
.stat__n b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__t{margin-top:10px;font-size:14.5px;color:var(--mut);max-width:24ch}
.stat--link{display:block;transition:border-color .25s ease,transform .25s ease}
.stat--link:hover{border-color:var(--card-hover-line);transform:translateY(-3px);box-shadow:var(--card-hover-sh)}
.stat--link .stat__t{color:var(--acc-hi)}
@media(min-width:960px){.stats__grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- manifesto ---------- */
.manifesto{padding:110px 0 90px;position:relative}
.manifesto::before{
  content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:
    linear-gradient(rgba(63,169,245,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,169,245,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000,transparent 80%);
}
.manifesto__t{
  font-family:var(--font-d);font-weight:700;text-align:center;
  font-size:clamp(28px,5.4vw,54px);line-height:1.18;
}
.manifesto__t em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.manifesto__s{max-width:640px;margin:26px auto 0;text-align:center;color:var(--mut);font-size:clamp(15px,2vw,17.5px)}

/* ---------- section head ---------- */
.sechead{margin-bottom:44px;position:relative}
/* кикер: ромб + номер секции + подпись. Номер лежит ВНЕ элемента с data-i,
   иначе applyLang затрёт его вместе с текстом при переключении языка. */
.sechead__k{
  font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  display:flex;align-items:flex-start;line-height:1.5;
}
.sechead__n{
  font-style:normal;color:var(--acc);letter-spacing:.08em;margin-right:10px;
  display:inline-flex;align-items:center;flex:none;line-height:inherit;
}
.sechead__n::before{
  content:"";width:7px;height:7px;background:var(--acc);transform:rotate(45deg);margin-right:9px;flex:none;
}
.sechead__h{
  font-family:var(--font-d);font-weight:700;margin-top:14px;
  font-size:clamp(27px,4.4vw,44px);line-height:1.15;
}
/* акцентная часть заголовка — курсивом цветом акцента */
.sechead__h em{font-style:italic;font-weight:600;color:var(--acc)}
.sechead__s{margin-top:16px;color:var(--mut);font-size:clamp(15px,2vw,17px)}

/* ---------- services bento ---------- */
.svc{padding:30px 0 60px}
.svc__grid{display:grid;gap:16px;grid-template-columns:1fr}
.card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card-bg);
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-5px);border-color:var(--card-hover-line);box-shadow:var(--card-hover-sh)}
/* уголки-прицелы */
.card::before,.card::after{
  content:"";position:absolute;width:16px;height:16px;z-index:2;
  border:2px solid var(--acc);opacity:0;transition:opacity .3s ease;
}
.card::before{top:10px;left:10px;border-right:none;border-bottom:none}
.card::after{bottom:10px;right:10px;border-left:none;border-top:none}
.card:hover::before,.card:hover::after{opacity:.9}
.card__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05);transition:transform .6s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,28,.05),rgba(6,15,28,.6) 90%)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__num{
  font-family:Consolas,monospace;font-size:12px;color:var(--acc-hi);letter-spacing:.3em;
}
.card__num::after{content:" /";color:var(--line)}
.card__h{font-family:var(--font-d);font-size:clamp(21px,2.6vw,26px);line-height:1.2}
.card__t{color:var(--mut);font-size:15.5px}
.card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.card__tags span{
  font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--acc-hi);
  border:1px solid rgba(63,169,245,.35);border-radius:99px;padding:.28em .8em;background:rgba(63,169,245,.07);
}
.card__cta{
  margin-top:auto;padding-top:12px;font-weight:700;font-size:14.5px;color:var(--acc-hi);
  display:inline-flex;align-items:center;gap:.5em;width:fit-content;
}
.card__cta::after{content:"→";transition:transform .25s ease}
.card__cta:hover::after{transform:translateX(5px)}

/* карточки с SVG-приборами: тот же медиа-блок 16/9, что и у фото,
   иначе плитки услуг разъезжаются по высоте и читаются как «разнобой» */
.card__media--dev{display:grid;place-items:center;background:
    radial-gradient(circle at 50% 40%,rgba(11,99,229,.10),transparent 62%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(11,99,229,.05) 27px 28px);
}
.card__media--dev .device{width:100%;height:100%;display:grid;place-items:center}
.card__media--dev svg{width:auto;height:82%;max-width:88%}
.device__scan{animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(56px)}}
.device__wave{animation:blink 2s infinite}
.device__pulse{transform-origin:80px 76px;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(1.9);opacity:.15}100%{transform:scale(1);opacity:1}}

/* подпись поверх фото */
.card__badge{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:Consolas,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#DBE7F2;background:rgba(4,10,20,.75);border:1px solid rgba(63,169,245,.35);
  border-radius:99px;padding:.35em .85em;backdrop-filter:blur(4px);
}
/* «что закрывает / что получаете» — то, ради чего карточка вообще существует */
.card__spec{display:grid;gap:9px;margin-top:4px;padding-left:14px;border-left:1px solid rgba(63,169,245,.35)}
.card__spec li{font-size:14.5px;color:var(--mut);line-height:1.5}
.card__spec b{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc-hi);margin-bottom:2px;
}
.svc__foot{margin-top:26px;color:var(--mut);font-size:15.5px}
.svc__foot::before{content:"◆ ";color:var(--acc-hi);font-size:.75em}
.svc__foot a{border-bottom:1px solid rgba(127,212,255,.45)}

/* Плитки услуг одного размера: сетка на 12 колонок, все карточки одной ширины,
   grid-auto-rows:1fr держит одну высоту. Неполный последний ряд центрируется
   смещением по колонкам — без дыры справа и без карточек-переростков. */
@media(min-width:700px){
  .svc__grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr}
  .svc__grid > .card{grid-column:span 6}
  .svc__grid > .card:nth-child(5){grid-column:4/span 6}
}
@media(min-width:1000px){
  .svc__grid > .card{grid-column:span 4}
  .svc__grid > .card:nth-child(4){grid-column:3/span 4}
  .svc__grid > .card:nth-child(5){grid-column:7/span 4}
}

/* ---------- cases ---------- */
.cases{padding:80px 0}
.cases__grid{display:grid;gap:34px}
.cases__list li{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 4px;border-bottom:1px solid rgba(23,52,83,.55);
  transition:padding .25s ease,border-color .25s ease;
}
.cases__list li:hover{border-color:var(--acc);padding-left:12px}
.cases__list i{
  font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);min-width:74px;
}
.cases__list span{font-family:var(--font-d);font-size:clamp(20px,3vw,27px);font-weight:700}
.cases__photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.cases__photos figure{border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;aspect-ratio:16/10}
.cases__photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04)}
.cases__photos figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,28,.12),rgba(6,15,28,.45))}
.cases__photos figure:nth-child(1){grid-row:span 3;aspect-ratio:auto;min-height:100%}
.cases__note{margin-top:30px;color:var(--mut);font-size:15.5px;max-width:640px}


/* ---------- certs ----------
   Карточка = настоящий скан документа + подпись. Клик открывает лайтбокс,
   поэтому это <button>, а не <article>: нужны фокус и Enter с клавиатуры. */
.certs{padding:70px 0 90px}
.certs__group{margin-top:30px}
.certs__gk{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:14px;
}
.certs__grid{display:grid;gap:14px;grid-template-columns:1fr}
.cert{
  min-width:0;position:relative;display:block;width:100%;
  text-align:left;font:inherit;color:inherit;cursor:zoom-in;-webkit-appearance:none;appearance:none;
  border:1px solid rgba(63,169,245,.28);border-radius:12px;
  padding:14px 14px 18px;
  background:
    radial-gradient(circle at 50% -20%,rgba(63,169,245,.1),transparent 62%),
    var(--card-bg);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cert:hover{border-color:var(--card-hover-line);transform:translateY(-4px);box-shadow:var(--card-hover-sh)}
.cert:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* превью документа: contain, чтобы скан не обрезался по краям */
.cert__shot{
  position:relative;display:block;overflow:hidden;border-radius:9px;
  aspect-ratio:4/3;background:var(--surf-2);border:1px solid var(--line);
}
.cert__shot img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .35s ease}
.cert:hover .cert__shot img{transform:scale(1.03)}
.cert__zoom{
  position:absolute;right:8px;bottom:8px;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;color:#fff;
  background:rgba(9,26,45,.74);
  opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;
}
.cert:hover .cert__zoom,.cert:focus-visible .cert__zoom{opacity:1;transform:none}
@media(hover:none){.cert__zoom{opacity:1;transform:none}}
.cert__brand{
  display:block;font-family:var(--font-d);font-weight:700;font-size:clamp(19px,2.2vw,23px);
  letter-spacing:.06em;text-transform:uppercase;margin-top:16px;
}
.cert__grade{
  display:block;margin-top:5px;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);overflow-wrap:break-word;hyphens:auto;
}
.cert__t{display:block;margin-top:11px;font-size:14.5px;color:var(--mut);line-height:1.5}
.cert__meta{
  display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mut);line-height:1.45;
}
.cert--person{border-color:rgba(63,169,245,.32)}
.cert--person .cert__grade{color:var(--sky)}

/* вращение кольца — используется аватаром в блоке «Команда» */
@keyframes sealturn{to{transform:rotate(360deg)}}

/* строка брендов */
.brands{
  margin-top:34px;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;background:var(--card-bg);
}
.brands__k{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
.brands__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px}
.brands__list li{
  font-family:var(--font-d);font-weight:700;font-size:clamp(16px,2.2vw,20px);letter-spacing:.06em;
  color:var(--white);border:1px solid var(--line);border-radius:8px;padding:.35em .9em;
  background:var(--surf-2);transition:border-color .25s ease,color .25s ease;
}
.brands__list li:hover{border-color:rgba(63,169,245,.5);color:var(--white)}
.brands__more{
  font-family:var(--font-t) !important;font-size:14px !important;font-weight:700;
  letter-spacing:.02em !important;color:var(--acc) !important;border-style:dashed !important;
}
.brands__note{margin-top:18px;color:var(--mut);font-size:15px;max-width:64ch}
@media(min-width:640px){
  /* в группе статусов пять карточек, поэтому не сетка, а центрированный флекс:
     неполный последний ряд встаёт по центру, а не оставляет дыру справа */
  .certs__grid{display:flex;flex-wrap:wrap;justify-content:center}
  .certs__grid .cert{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px)}
}
@media(min-width:1000px){
  .certs__grid .cert{flex-basis:calc(33.333% - 9.34px);max-width:calc(33.333% - 9.34px)}
}

/* ---------- о компании ---------- */
.about{
  padding:90px 0 80px;position:relative;
  background:var(--surf-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.about__grid{display:grid;gap:40px}
.about__lead p{font-size:clamp(16px,2.1vw,18px);color:var(--mut);line-height:1.65}
.about__lead p + p{margin-top:16px}
.about__lead b{color:var(--white)}
.quote{
  margin-top:30px;padding:24px 24px 22px 28px;border-radius:12px;
  border:1px solid rgba(63,169,245,.28);position:relative;
  background:var(--tint);
}
.quote::before{
  content:"«";position:absolute;top:-6px;left:14px;
  font-family:var(--font-d);font-size:64px;color:rgba(63,169,245,.35);line-height:1;
}
.quote blockquote{
  font-family:var(--font-d);font-style:italic;font-size:clamp(17px,2.3vw,21px);
  line-height:1.5;color:var(--white);
}
.quote figcaption{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.quote__name{font-family:var(--font-d);font-weight:700;font-size:17px;color:var(--acc)}
.quote__role{font-size:13px;letter-spacing:.04em;color:var(--mut)}

.about__facts{display:grid;gap:2px;counter-reset:af}
.about__facts li{
  counter-increment:af;position:relative;
  padding:20px 4px 20px 56px;border-bottom:1px solid rgba(23,52,83,.6);
  transition:padding .25s ease,border-color .25s ease;
}
.about__facts li:first-child{border-top:1px solid rgba(23,52,83,.6)}
.about__facts li::before{
  content:"0" counter(af);position:absolute;left:0;top:22px;
  font-family:Consolas,monospace;font-size:12.5px;letter-spacing:.18em;color:var(--acc);
}
.about__facts li:hover{border-color:rgba(63,169,245,.45);padding-left:64px}
.about__facts h3{font-family:var(--font-d);font-size:clamp(18px,2.4vw,21px);font-weight:700}
.about__facts p{margin-top:6px;font-size:15px;color:var(--mut);line-height:1.55}

.about__strip{
  margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.astat{
  border:1px solid var(--line);border-radius:12px;padding:22px 20px;
  background:var(--card-bg);
  transition:border-color .25s ease,transform .25s ease;
}
.astat:hover{border-color:var(--card-hover-line);transform:translateY(-3px);box-shadow:var(--card-hover-sh)}
.astat__n{font-family:var(--font-d);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1;color:var(--white)}
.astat__n b{color:var(--acc);font-size:.45em;letter-spacing:.02em}
.astat__t{margin-top:10px;font-size:14px;color:var(--mut);line-height:1.45}
@media(min-width:960px){
  .about__grid{grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
  .about__strip{grid-template-columns:repeat(4,1fr)}
}

/* ---------- команда ---------- */
.team{padding:20px 0 100px}
.team__grid{display:grid;gap:14px;grid-template-columns:1fr}
.member{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r);padding:22px 22px;
  background:var(--card-bg);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.member:hover{border-color:var(--card-hover-line);transform:translateY(-4px);box-shadow:var(--card-hover-sh)}
.member__ph{
  width:66px;height:66px;flex:none;border-radius:50%;position:relative;overflow:hidden;
  display:grid;place-items:center;
  border:1px solid rgba(63,169,245,.45);
  background:var(--tint);
}
.member__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.member:hover .member__ph img{filter:saturate(1) contrast(1.05)}
.member__ph::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px dashed rgba(63,169,245,.28);
}
.member:hover .member__ph::after{animation:sealturn 9s linear infinite}
.member__body{min-width:0;flex:1;display:flex;flex-direction:column}
.member__role{font-size:11.5px;font-weight:700;letter-spacing:.16em;line-height:1.35;text-transform:uppercase;color:var(--sky)}
.member__name{font-family:var(--font-d);font-size:clamp(19px,2.4vw,22px);font-weight:700;margin-top:6px;color:var(--white)}
.member__t{margin-top:8px;font-size:14.5px;color:var(--mut);line-height:1.55}
.member__link{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:700;color:var(--acc)}
.member__link::after{content:" →"}
.member--lead{
  border-color:rgba(63,169,245,.45);position:relative;overflow:hidden;
  background:var(--tint);
}
.member--lead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.member--lead .member__ph{border-color:var(--acc)}
.member--wa:hover{border-color:var(--sky)}
.member--ice:hover{border-color:var(--acc)}
.member--ice .member__role{color:var(--acc)}
/* сотрудников семеро. Карточки одного размера, директор выделен гранью, а не площадью.
   Сетка на 6 колонок делит 7 карточек как 3 + 2 + 2 — рядов без «хвоста» не бывает
   при нечётном числе, поэтому широкими делаем не последнюю, а весь второй и третий ряд. */
@media(min-width:720px){
  .team__grid{grid-template-columns:1fr 1fr}
  /* на планшете 7 карточек в две колонки дают одиночку в конце — растягиваем её */
  .team__grid > *:last-child{grid-column:1/-1}
  /* «Руководитель технического отдела» в узкой карточке уходит на две строки,
     а «Руководитель отдела продаж» рядом — в одну: без резерва под вторую строку
     имена в ряду встают на разной высоте. Резервируем две строки всем. */
  .member__role{min-height:2.7em}
}
@media(min-width:1080px){
  /* семь карточек: три сверху, дальше по две пошире — без пустого места */
  .team__grid{grid-template-columns:repeat(6,1fr)}
  .team__grid > *{grid-column:span 2}
  .team__grid > *:nth-child(n+4){grid-column:span 3}
}

/* ---------- FREEDO — остров ----------
   FREEDO — отдельный продукт, поэтому внутри секции палитра смещена
   в холодный ледяной конец того же синего: остров видно, но он не выпадает
   из фирменного цвета. Те же переменные переопределены и у «фридовских»
   карточек команды и контактов, которые физически лежат в других секциях. */
.freedo,.member--ice,.cbox--freedo,.nav__freedo{
  --acc:#7FD4FF;
  --acc-2:#2E9BF2;
  --acc-hi:#B9ECFF;
  --acc-soft:rgba(127,212,255,.16);
  --grad:linear-gradient(135deg,#C3F0FF 0%,#7FD4FF 45%,#2E9BF2 100%);
}
.freedo{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%,rgba(63,169,245,.09),transparent 60%),
    linear-gradient(180deg,#123152 0%,#1A4066 50%,#123152 100%);
  border-top:1px solid rgba(63,169,245,.25);
  border-bottom:1px solid rgba(63,169,245,.25);
  padding:110px 0 120px;position:relative;overflow:hidden;
}
.freedo::before{
  content:"FREEDO";position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-d);font-weight:700;font-size:clamp(120px,26vw,380px);
  color:transparent;-webkit-text-stroke:1px rgba(63,169,245,.07);
  letter-spacing:.1em;pointer-events:none;white-space:nowrap;
}
.freedo__in{max-width:1080px;margin:0 auto;padding:0 20px;position:relative}
.freedo__head{text-align:center}
.freedo__over{
  font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--acc-hi);
}
.freedo__over::before,.freedo__over::after{content:"— ";color:rgba(63,169,245,.5)}
.freedo__over::after{content:" —"}
.freedo__logo{
  font-family:var(--font-d);font-weight:700;color:var(--acc);
  font-size:clamp(54px,11vw,120px);letter-spacing:.16em;line-height:1;margin-top:22px;
  text-shadow:0 0 60px rgba(63,169,245,.25);
}
.freedo__slogan{
  font-family:var(--font-d);font-size:clamp(19px,3vw,27px);margin-top:16px;color:#e9eef5;
}
.freedo__slogan em{color:var(--acc);font-style:italic}
.freedo__grid{display:grid;gap:22px;margin-top:64px}
.freedo__ph{border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(63,169,245,.3)}
.freedo__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.92)}
.freedo__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,16,29,.15),rgba(5,16,29,.6));pointer-events:none}
.freedo__ph figcaption{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:var(--font-d);font-style:italic;font-size:15px;color:#D8ECFB;
}
.freedo__copy{display:flex;flex-direction:column;gap:22px;justify-content:center}
.freedo__lead{font-size:clamp(17px,2.3vw,20px);color:#dfe7f0;line-height:1.6}
.freedo__feats li{
  padding:13px 0 13px 34px;border-bottom:1px solid rgba(63,169,245,.18);
  position:relative;color:var(--mut);font-size:16px;
}
.freedo__feats li::before{
  content:"";position:absolute;left:4px;top:19px;width:14px;height:14px;
  border:1.5px solid var(--acc);border-radius:50%;
  background:radial-gradient(circle,var(--acc) 3px,transparent 4px);
}
.freedo__cta{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:6px}
.freedo__ig{
  font-family:var(--font-d);font-style:italic;font-size:17px;color:var(--acc);
  border-bottom:1px solid rgba(63,169,245,.5);padding-bottom:2px;
}
.freedo__ig:hover{border-color:var(--acc)}
@media(min-width:960px){
  .freedo__grid{grid-template-columns:.9fr 1.1fr;align-items:stretch}
  .freedo__ph--a{aspect-ratio:4/3}
  .freedo__ph--b{grid-column:1/-1;aspect-ratio:21/8}
}

/* ---------- digital ---------- */
.digital{padding:100px 0 40px}
.digital__grid{display:grid;gap:16px}
@media(min-width:860px){.digital__grid{grid-template-columns:1fr 1fr}}

/* ---------- 1С + видеонаблюдение ---------- */
.combo{
  margin-top:16px;display:grid;gap:26px;
  border:1px solid rgba(63,169,245,.34);border-radius:var(--r);
  padding:30px 26px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(63,169,245,.13),rgba(11,99,229,.07) 60%,transparent),
    var(--card-bg);
}
.combo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
}
.combo__body{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.combo__k{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.combo__h{font-family:var(--font-d);font-size:clamp(22px,3.2vw,30px);line-height:1.2;color:var(--white)}
.combo__t{color:var(--mut);font-size:16px;line-height:1.6}
.combo__gift{
  font-family:var(--font-d);font-style:italic;font-size:16px;color:var(--white);
  border-left:2px solid var(--acc);padding:2px 0 2px 14px;
}
.combo__nums{display:grid;gap:14px}
.combo__nums li{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;border-radius:12px;
  background:var(--surf-2);border:1px solid var(--line);
}
.combo__n{font-family:var(--font-d);font-size:30px;font-weight:700;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.combo__n b{font-size:.55em;font-weight:700}
.combo__l{font-size:13.5px;color:var(--mut);line-height:1.45}
@media(min-width:900px){
  .combo{grid-template-columns:1.35fr .65fr;align-items:center;padding:36px 34px}
  .combo__nums{align-self:stretch;justify-content:center}
}

/* ---------- гарантии ---------- */
.guar{
  margin-top:16px;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;background:var(--surf-2);
}
.guar__k{font-family:var(--font-d);font-size:18px;color:var(--white)}
.guar__list{display:grid;gap:2px;margin-top:16px}
.guar__list li{
  padding:14px 4px 14px 30px;border-bottom:1px solid rgba(23,52,83,.55);
  display:flex;flex-direction:column;gap:3px;position:relative;
}
.guar__list li::before{
  content:"";position:absolute;left:2px;top:20px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--acc);background:radial-gradient(circle,var(--acc) 3px,transparent 4px);
}
.guar__list li:last-child{border-bottom:none}
.guar__list b{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--white)}
.guar__list span{font-size:14px;color:var(--mut);line-height:1.5}
@media(min-width:760px){
  .guar__list{grid-template-columns:1fr 1fr;gap:2px 32px}
  .guar__list li:nth-last-child(2){border-bottom:none}
}

/* ---------- смежные компетенции ---------- */
.extra{
  margin-top:22px;border:1px dashed rgba(63,169,245,.35);border-radius:var(--r);
  padding:26px 24px;background:var(--tint);
}
.extra__k{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.extra__list{display:grid;gap:2px;margin-top:16px}
.extra__list li{
  padding:13px 4px;border-bottom:1px solid rgba(23,52,83,.55);
  display:flex;flex-direction:column;gap:3px;
}
.extra__list li:last-child{border-bottom:none}
.extra__list b{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--white)}
.extra__list span{font-size:14px;color:var(--mut)}
@media(min-width:760px){
  .extra__list{grid-template-columns:1fr 1fr;gap:2px 32px}
}
@media(min-width:1080px){
  .extra__list{grid-template-columns:repeat(3,1fr)}
}

/* ---------- FAQ ---------- */
.faq{padding:20px 0 90px}
.faq__grid{display:grid;gap:12px}
.faq__i{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card-bg);
  transition:border-color .25s ease,background .25s ease;
}
.faq__i:hover{border-color:rgba(63,169,245,.45)}
.faq__i[open]{border-color:rgba(63,169,245,.45)}
.faq__i summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 58px 20px 22px;
  font-family:var(--font-d);font-weight:700;font-size:clamp(17px,2.3vw,20px);
  color:var(--white);line-height:1.35;
  /* флекс + min-height держат ВСЕ закрытые плашки одного размера: без этого
     вопрос в две строки делает свою плашку выше соседней по ряду, и колонки
     идут ступеньками. 94px = две строки + паддинги; замерено в обеих языковых
     версиях на 1000 и 1440px — длиннее двух строк вопросов нет. */
  display:flex;align-items:center;min-height:94px;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:22px;top:50%;width:14px;height:14px;
  margin-top:-7px;
  background:
    linear-gradient(var(--acc),var(--acc)) center/14px 2px no-repeat,
    linear-gradient(var(--acc),var(--acc)) center/2px 14px no-repeat;
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
.faq__i[open] summary::after{transform:rotate(135deg)}
.faq__i summary:focus-visible{outline:2px solid var(--sky);outline-offset:-3px}
.faq__a{padding:0 22px 22px;color:var(--mut);font-size:15.5px;line-height:1.62;max-width:78ch}
.faq__a a{border-bottom:1px solid rgba(63,169,245,.45)}
.faq__i[open] .faq__a{animation:faqopen .35s ease}
@keyframes faqopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(min-width:1000px){
  .faq__grid{grid-template-columns:1fr 1fr;align-items:start}
}
/* на узком экране колонка одна, выравнивать не с чем — лишняя высота там ни к чему */
@media(max-width:999px){
  .faq__i summary{min-height:0}
}

/* ---------- process ---------- */
.proc{padding:70px 0 80px}
.proc__steps{display:grid;gap:14px;counter-reset:step}
.proc__steps li{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  background:var(--card-bg);box-shadow:var(--card-sh);
  position:relative;
}
.proc__n{font-family:Consolas,monospace;color:var(--acc);letter-spacing:.3em;font-size:13px}
.proc__steps h3{font-family:var(--font-d);font-size:22px;margin:10px 0 8px}
.proc__steps p{color:var(--mut);font-size:15px}
.proc__steps li:not(:last-child)::after{
  content:"↓";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  color:var(--acc);font-size:16px;z-index:2;
}
@media(min-width:860px){
  .proc__steps{grid-template-columns:repeat(3,1fr)}
  .proc__steps--4{grid-template-columns:repeat(4,1fr)}
  .proc__steps li:not(:last-child)::after{content:"→";left:auto;right:-19px;top:38px;bottom:auto;transform:none}
}

/* ---------- contact ---------- */
.contact{
  padding:90px 0 100px;position:relative;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%,rgba(63,169,245,.08),transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,#102842 100%);
  border-top:1px solid var(--line);
}
.contact__grid{display:grid;gap:44px}
.contact__h{font-family:var(--font-d);font-size:clamp(27px,4vw,40px);line-height:1.18;max-width:18ch}
.contact__s{margin-top:14px;color:var(--mut);font-size:16.5px}
.contact__people{display:grid;gap:12px;margin-top:30px}

/* раскрывающиеся контакты — каждое раскрытие пишется в аналитику */
.cbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:rgba(19,42,70,.35);
  transition:border-color .25s ease,background .25s ease;
}
.cbox:hover{border-color:var(--sky)}
.cbox[open]{border-color:rgba(63,169,245,.6);background:rgba(19,42,70,.5)}
.cbox--freedo:hover,.cbox--freedo[open]{border-color:var(--acc)}
.cbox summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;flex-direction:column;gap:3px;
  padding:18px 130px 18px 20px;
}
.cbox summary::-webkit-details-marker{display:none}
.cbox summary:focus-visible{outline:2px solid var(--sky);outline-offset:-3px}
.cbox__role{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cbox__name{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--white);margin-top:4px}
.cbox--freedo .cbox__name{color:var(--acc)}
/* «Показать контакты» — видимая цель клика, она же событие конверсии */
.cbox__hint{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.45em;
  font-size:13.5px;font-weight:700;color:var(--sky);
  border:1px solid rgba(63,169,245,.4);border-radius:99px;padding:.4em .85em;
  white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.cbox__hint::after{content:"+";font-size:15px;line-height:1;transition:transform .3s ease}
.cbox summary:hover .cbox__hint{background:rgba(63,169,245,.12);color:var(--white)}
.cbox--freedo .cbox__hint{color:var(--acc);border-color:rgba(63,169,245,.45)}
.cbox--freedo summary:hover .cbox__hint{background:rgba(63,169,245,.12)}
.cbox[open] .cbox__hint::after{transform:rotate(45deg)}
.cbox__hint--hide{display:none}
.cbox[open] .cbox__hint{display:none}
.cbox[open] .cbox__hint--hide{display:inline-flex}
.cbox__body{
  padding:0 20px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  animation:cboxIn .3s ease;
}
@keyframes cboxIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cbox__tel{
  font-family:var(--font-d);font-size:23px;font-weight:700;color:var(--sky);
  letter-spacing:.01em;border-bottom:1px solid rgba(63,169,245,.35);
}
.cbox__tel:hover{color:var(--white);border-color:var(--white)}
.cbox--freedo .cbox__tel{color:var(--acc);border-color:rgba(63,169,245,.4)}
.cbox__wa{flex:none}
.cbox__body--links{gap:10px 22px}
.cbox__body--links a{font-size:16.5px;font-weight:700;border-bottom:1px solid rgba(63,169,245,.3)}
.cbox__body--links a:hover{color:var(--white);border-color:var(--white)}
@media(max-width:560px){
  .cbox summary{padding:16px 18px 14px}
  .cbox__hint{position:static;transform:none;margin-top:10px;width:fit-content}
  .cbox__body{padding:0 18px 18px}
  .cbox__tel{font-size:21px}
  .cbox__wa{width:100%;justify-content:center}
}

.contact__meta{margin-top:26px;display:grid;gap:9px;font-size:15.5px;color:#c3d2e0}
.contact__meta b{color:var(--white)}

.contact__next{margin-top:8px;display:grid;gap:12px;counter-reset:cn}
.contact__next li{
  counter-increment:cn;position:relative;padding:20px 20px 20px 22px;
  border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(160deg,rgba(19,42,70,.42),rgba(6,15,28,.28));
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .25s ease,transform .25s ease;
}
.contact__next li:hover{border-color:rgba(63,169,245,.45);transform:translateY(-3px)}
.contact__next li::after{
  content:"0" counter(cn);position:absolute;right:16px;top:14px;
  font-family:Consolas,monospace;font-size:11.5px;letter-spacing:.18em;color:rgba(63,169,245,.55);
}
.contact__next b{font-family:var(--font-d);font-size:17.5px;font-weight:700;color:var(--white)}
.contact__next span{font-size:14.5px;color:var(--mut);line-height:1.5}

.contact__form{
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(6,15,28,.65);backdrop-filter:blur(8px);
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;
  align-self:start;position:relative;
}
.form__k{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:13.5px;font-weight:700;color:var(--mut)}
.field input,.field textarea{
  font-family:var(--font-t);font-size:16px;color:var(--white);
  background:rgba(19,42,70,.4);border:1px solid var(--line);border-radius:9px;
  padding:.75em .95em;outline:none;transition:border-color .2s ease;resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--sky)}
.field input::placeholder,.field textarea::placeholder{color:#5f7a92}
.form__submit{justify-content:center}
.form__note{font-size:12.5px;color:#6d879e;line-height:1.45}
.form__done{
  border:1px solid rgba(65,224,140,.4);background:rgba(65,224,140,.08);
  border-radius:10px;padding:14px 16px;font-size:14.5px;color:#c8f2dc;
}
@media(min-width:760px){.contact__next{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){
  /* колонки одной ширины и одной высоты: форма тянется до низа,
     слабину забирает поле «Объект и задача» */
  .contact__grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .contact__form{align-self:stretch;justify-content:space-between}
  /* поле «Объект и задача» забирает часть слабины, остальное уходит в отступы —
     так форма дотягивается до низа левой колонки, не превращаясь в одно окно */
  .contact__form .field--grow{flex:0 1 auto}
  .contact__form .field--grow textarea{min-height:96px;max-height:150px}
  .contact__next{grid-column:1/-1;margin-top:14px}
}

/* ---------- видеоотзывы по Bitrix24 ----------
   Ролики вертикальные (снимали на телефон), поэтому плитка портретная 9:16
   и ограничена по ширине — иначе карточка вырастает на два экрана.
   До клика в DOM нет ни одного iframe: только кнопка-фасад. */
.vrev{padding:20px 0 100px;position:relative}
.vrev__grid{display:grid;gap:26px;grid-template-columns:1fr}
.vrev__c{display:flex;flex-direction:column;gap:12px}
.vrev__media{
  position:relative;width:100%;max-width:300px;margin:0 auto;
  aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  border:1px solid rgba(63,169,245,.32);
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(63,169,245,.28),transparent 62%),
    linear-gradient(165deg,#123055 0%,#0A1B2E 55%,#060F1C 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
/* фирменный щит водяным знаком за кнопкой play */
.vrev__media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/logo-mark.webp") center 34%/58% no-repeat;
  opacity:.13;filter:grayscale(.2);
}
.vrev__play{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  border:0;background:none;cursor:pointer;color:var(--white);
  font-family:var(--font-t);
}
.vrev__ico{
  position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:var(--ink);
  box-shadow:0 10px 34px rgba(11,99,229,.5);
  transition:transform .3s cubic-bezier(.3,.8,.3,1),box-shadow .3s ease;
}
.vrev__ico svg{width:34px;height:34px;margin-left:4px}
/* пульсирующее кольцо — показывает, что плитка кликабельна */
.vrev__ico::after{
  content:"";position:absolute;width:74px;height:74px;border-radius:50%;
  border:2px solid rgba(127,212,255,.55);animation:vpulse 2.4s ease-out infinite;
}
@keyframes vpulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.vrev__dur{
  font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc-hi);
}
.vrev__shine{
  position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(60% 40% at 50% 42%,rgba(63,169,245,.28),transparent 70%);
}
.vrev__play:hover .vrev__ico,.vrev__play:focus-visible .vrev__ico{
  transform:scale(1.08);box-shadow:0 14px 44px rgba(63,169,245,.65);
}
.vrev__play:hover .vrev__shine,.vrev__play:focus-visible .vrev__shine{opacity:1}
.vrev__play:focus-visible{outline:2px solid var(--acc-hi);outline-offset:-4px;border-radius:18px}
/* состояние после клика — на месте фасада живой плеер */
.vrev__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vrev__media.is-live::before{display:none}

.vrev__k{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-hi);text-align:center;
}
.vrev__h{
  font-family:var(--font-d);font-weight:700;font-size:clamp(18px,2.4vw,21px);
  line-height:1.3;text-align:center;
}
.vrev__link{
  margin-top:auto;font-size:14px;font-weight:700;color:var(--mut);text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  transition:color .2s ease;
}
.vrev__link::after{content:"↗";transition:transform .25s ease}
.vrev__link:hover{color:var(--acc-hi)}
.vrev__link:hover::after{transform:translate(3px,-3px)}

.vrev__foot{
  margin-top:44px;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;display:grid;gap:18px;
  background:var(--card-bg);
}
.vrev__foot p{color:var(--mut);font-size:15.5px;max-width:60ch}
.vrev__acts{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:760px){
  .vrev__grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .vrev__media{max-width:none}
}
@media(min-width:960px){
  .vrev__foot{grid-template-columns:1fr auto;align-items:center;padding:28px 30px}
  .vrev__acts{justify-content:flex-end}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:34px 0;background:var(--navy)}
.foot__in{display:flex;flex-direction:column;gap:18px}
.foot__brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* полный лок-ап логотипа: щит + шрифтовой знак, перекрашенный в белый под тёмный фон */
.foot__logo{width:auto;height:56px;filter:drop-shadow(0 4px 16px rgba(63,169,245,.28))}
.foot__brand span{font-family:var(--font-t);font-weight:400;color:var(--mut);font-size:14px;letter-spacing:0}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot__nav a{color:var(--mut);font-size:13.5px}
.foot__nav a:hover{color:var(--white)}
.foot__copy{color:#5b7288;font-size:13px}
@media(min-width:960px){
  .foot__in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 32px}
  .foot__nav{grid-column:1/-1;order:-1;justify-content:flex-start;gap:10px 24px;
    padding-bottom:18px;border-bottom:1px solid rgba(23,52,83,.5);max-width:none}
  .foot__copy{text-align:right;white-space:nowrap}
}


/* ============================================================
   Светлая тема: доводка компонентов + стили новых блоков
   ============================================================ */

/* шапка: тёмная над hero, светлая после скролла */
.hdr.scrolled{
  --navy:#E6EFFA; --navy-2:#F2F7FD; --navy-3:#FFFFFF; --line:#C7DAEF;
  --acc:#0B7BE8; --acc-hi:#0A57C9; --ink:#0B1B2E; --sky:#0B63E5;
  --white:#0B1B2E; --mut:#56708A; --on-acc:#FFFFFF;
  --grad:linear-gradient(135deg,#1478DF 0%,#0B63E5 50%,#0A4EBE 100%);
  color:var(--white);
}
.hdr.scrolled .brand__text{color:var(--white)}

/* карточки на светлом фоне: тень вместо свечения */
.card,.cert,.member,.stat,.loss__i,.ind__i,.case,.faq__i{box-shadow:var(--card-sh)}

/* ---------- ПРОБЛЕМА: точки потерь ---------- */
.loss{padding:70px 0 40px}
.loss__grid{
  display:grid;gap:16px;margin-top:34px;
  grid-template-columns:repeat(6,1fr);
}
/* пять карточек: три сверху, две пошире снизу — без пустого места */
.loss__i{grid-column:span 2}
.loss__i:nth-child(4),.loss__i:nth-child(5){grid-column:span 3}
@media(max-width:900px){
  .loss__grid{grid-template-columns:repeat(2,1fr)}
  .loss__i,.loss__i:nth-child(4),.loss__i:nth-child(5){grid-column:auto}
}
@media(max-width:560px){.loss__grid{grid-template-columns:1fr}}
.loss__i{
  background:var(--navy-3);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px 20px;
}
.loss__ic{
  display:flex;width:40px;height:40px;border-radius:10px;margin-bottom:14px;
  align-items:center;justify-content:center;background:var(--acc-soft);color:var(--acc-2);
}
.loss__ic svg{width:22px;height:22px}
.loss__i h3{font-family:var(--font-d);font-size:18px;margin-bottom:8px;color:var(--white)}
.loss__i p{font-size:15px;color:var(--mut);line-height:1.5}
.loss__cta{margin-top:26px;font-size:15.5px;color:var(--mut)}
.loss__cta a{font-weight:700}

/* ---------- КЕЙСЫ ---------- */
/* колонки заданы явно (а не auto-fit), чтобы ширина одиночной карточки
   считалась той же формулой; grid-auto-rows:1fr держит ВСЕ карточки одной высоты,
   а не только соседей по ряду. */
.cases__grid{
  display:grid;gap:20px;margin-top:34px;
  grid-template-columns:1fr;grid-auto-rows:1fr;align-items:stretch;
}
@media(min-width:660px){.cases__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cases__grid{grid-template-columns:repeat(3,1fr)}}
.case{
  background:var(--navy-3);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.case:hover{transform:translateY(-3px)}
.case__ph{aspect-ratio:3/2;overflow:hidden;background:var(--acc-soft)}
.case__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case:hover .case__ph img{transform:scale(1.04)}
.case__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:4px;flex:1}
.case__kind{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-2);
}
.case__name{font-family:var(--font-d);font-size:21px;color:var(--white);margin-bottom:12px}
.case__dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
.case__dl dt{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);padding-top:3px;white-space:nowrap;
}
.case__dl dd{color:var(--white);line-height:1.45}

/* единственный кейс на странице автоматизации: во всю полосу и горизонтально —
   фото слева, разбор справа. В сетке из нескольких кейсов такой вариант не нужен. */
.case--feature{grid-column:1/-1}
@media(min-width:900px){
  .case--feature{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch}
  .case--feature .case__ph{aspect-ratio:auto;height:100%}
  .case--feature .case__body{justify-content:center;padding:26px 30px}
  .case--feature .case__name{font-size:24px}
}

/* седьмой объект остаётся один в ряду: растягивается на всю полосу,
   но ограничен шириной одной колонки и центрируется — размер как у остальных. */
.case--solo{grid-column:1/-1;width:100%;margin-inline:auto}
@media(min-width:660px){.case--solo{max-width:calc((100% - 20px)/2)}}
@media(min-width:1000px){.case--solo{max-width:calc((100% - 40px)/3)}}

.cases__more{margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.cases__more-k{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-bottom:16px;
}
/* объектов семь — при сетке auto-fit последний ряд оставлял дыру справа (4+3).
   Центрированный флекс: неполный ряд встаёт по центру. */
.cases__list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cases__list li{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 1 100%;
  background:var(--card-bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-sh);padding:18px 20px;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cases__list li:hover{border-color:var(--card-hover-line);transform:translateY(-2px);box-shadow:var(--card-hover-sh)}
.cases__list i{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-2);background:var(--acc-soft);padding:3px 8px;border-radius:5px;flex:none;
}
.cases__list span{
  font-family:var(--font-d);font-weight:700;font-size:20px;line-height:1.2;
  color:var(--white);
}
/* без margin-top:auto — иначе в ряду с двухстрочным названием («Французский квартал»)
   у карточки с коротким именем («YA») вид работ улетал вниз и в середине зияла дыра.
   Текст идёт подряд, а лишняя высота уходит в нижний отступ карточки. */
.cases__list em{font-style:normal;font-size:14.5px;color:var(--mut);line-height:1.45}
.cases__note{margin-top:22px;font-size:15px;color:var(--mut)}
@media(min-width:640px){
  .cases__list li{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px)}
}
@media(min-width:1000px){
  .cases__list li{flex-basis:calc(25% - 10.5px);max-width:calc(25% - 10.5px)}
}


/* ---------- ОТРАСЛИ ---------- */
.ind{padding:60px 0 80px}
.ind__grid{
  display:grid;gap:16px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
}
.ind__i{
  background:var(--navy-3);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;border-top:3px solid var(--acc-2);
}
.ind__i h3{font-family:var(--font-d);font-size:19px;margin-bottom:7px;color:var(--white)}
.ind__i p{font-size:15px;color:var(--mut);line-height:1.5}
.ind__cta{margin-top:30px;text-align:center}

/* ---------- ПРОЦЕСС: четыре шага ---------- */


/* ---------- FREEDO: компактная полоса ---------- */
.freedo__band{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  padding:54px 0;
}
.freedo__band .freedo__ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--card-sh)}
.freedo__band .freedo__ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.freedo__band .freedo__logo{margin:6px 0 4px}
.freedo__band .freedo__lead{margin:12px 0 20px;color:var(--mut);max-width:46ch}
.freedo__band .freedo__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ---------- ФОРМА: тип объекта ---------- */
.field--radio{border:0;padding:0;margin:0}
.field--radio legend{
  font-size:13px;font-weight:700;color:var(--mut);margin-bottom:9px;padding:0;
  letter-spacing:.02em;
}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{
  display:inline-flex;align-items:center;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:14px;color:var(--white);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
  min-height:40px;
}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios label:hover{border-color:var(--acc)}
.radios label:has(input:checked){background:var(--acc-2);border-color:var(--acc-2);color:#fff}
.radios label:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.field__opt{font-style:normal;font-weight:400;color:var(--mut);font-size:12.5px}

@media (max-width:860px){
  .freedo__band{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .case__dl{grid-template-columns:1fr;gap:2px 0}
  .case__dl dt{padding-top:8px}
}

/* тени панелей в светлой теме */
.cert,.astat,.brands,.combo,.guar,.vrev__foot,.faq__i,.proc__steps li{box-shadow:var(--card-sh)}

/* FREEDO: полоса выравнивается по левому краю колонки */
.freedo__band .freedo__over,
.freedo__band .freedo__logo,
.freedo__band .freedo__slogan{text-align:left}
.freedo__band .freedo__logo{font-size:clamp(44px,7vw,84px);line-height:.95}
.freedo__band .freedo__slogan{font-size:clamp(19px,2.4vw,24px);margin-top:2px}

/* итог блока Digital */
.digital__sum{
  margin-top:26px;padding:20px 22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--tint);
  font-size:16.5px;color:var(--white);
}

/* ---------- липкая панель заявки (только мобильный) ---------- */
.sticky-cta{display:none}
@media(max-width:900px){
  .sticky-cta{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
    padding:10px;border-radius:14px;
    background:rgba(240,246,253,.95);backdrop-filter:blur(12px);
    border:1px solid var(--line);box-shadow:0 10px 34px rgba(11,27,46,.22);
  }
  .sticky-cta .btn{flex:1;justify-content:center;min-height:48px;font-size:15.5px}
  .sticky-cta__wa{
    flex:none;width:48px;height:48px;border-radius:11px;
    display:grid;place-items:center;color:#fff;background:#25D366;
  }
  .sticky-cta__wa svg{width:26px;height:26px}
  body{padding-bottom:82px}
}



/* ============================================================
   ЛАЙТБОКС ДОКУМЕНТОВ
   Сканы сертификатов мелкие в карточке — по клику открываем целиком.
   Одна разметка на всю страницу, картинка подставляется из data-cert.
   ============================================================ */
.lbx{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:26px 16px 20px;
  background:rgba(6,18,32,.92);
  animation:lbxin .18s ease both;
}
.lbx[hidden]{display:none}
@keyframes lbxin{from{opacity:0}to{opacity:1}}
.lbx__fig{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1080px,100%);max-height:100%;
}
.lbx__img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:calc(100dvh - 132px);
  border-radius:10px;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.lbx__cap{
  color:#DCE8F5;font-size:14px;line-height:1.45;text-align:center;max-width:62ch;
}
.lbx__x,.lbx__nav{
  position:absolute;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.lbx__x:hover,.lbx__nav:hover{background:rgba(255,255,255,.24)}
.lbx__x:focus-visible,.lbx__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbx__x{top:14px;right:14px}
.lbx__nav{top:50%;transform:translateY(-50%)}
.lbx__nav--prev{left:12px}
.lbx__nav--next{right:12px}
.lbx__nav:hover{transform:translateY(-50%) scale(1.06)}
body.lbx-open{overflow:hidden}
@media(max-width:720px){
  .lbx{padding:16px 10px 14px}
  .lbx__img{max-height:calc(100dvh - 168px)}
  .lbx__nav{top:auto;bottom:14px;transform:none;width:42px;height:42px}
  .lbx__nav:hover{transform:scale(1.06)}
  .lbx__nav--prev{left:calc(50% - 54px)}
  .lbx__nav--next{right:calc(50% - 54px)}
  .lbx__fig{gap:10px;padding-bottom:56px}
  .lbx__cap{font-size:13px}
}


/* ============================================================
   Страница автоматизации (/bitrix24/): собственный первый экран
   и полоса-переход с главной. Отдельная страница нужна, чтобы выбор
   охранной системы не перемешивался с CRM и AI-ассистентами.
   ============================================================ */
.pagehero{padding:118px 0 64px;position:relative;overflow:hidden}
.pagehero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 12%,rgba(63,169,245,.20),transparent 58%);
}
.pagehero > .wrap{position:relative;z-index:1}
.pagehero__k{
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
}
.pagehero__h{
  font-family:var(--font-d);font-weight:700;margin-top:16px;
  font-size:clamp(30px,5.4vw,54px);line-height:1.1;
}
.pagehero__h em{font-style:italic;font-weight:600;color:var(--acc)}
.pagehero__t{margin-top:18px;color:var(--mut);font-size:clamp(15.5px,2vw,18px);line-height:1.6}
.pagehero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* вторая дверь в первом экране: тем, кто пришёл не за камерами */
.hero__alt{margin-top:16px;font-size:14.5px;color:var(--mut);line-height:1.5}
.hero__alt a{
  color:var(--acc-hi);font-weight:700;
  border-bottom:1px solid rgba(127,212,255,.45);white-space:nowrap;
}
.hero__alt a:hover{border-bottom-color:currentColor}
@media(max-width:520px){.hero__alt a{white-space:normal}}

.bridge{padding:16px 0 70px}
.bridge__in{
  display:grid;gap:22px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card-bg);box-shadow:var(--card-sh);
  padding:28px 26px;
}
.bridge__k{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.bridge__h{font-family:var(--font-d);font-size:clamp(22px,3vw,30px);margin-top:8px;line-height:1.2}
.bridge__t{margin-top:10px;color:var(--mut);font-size:15.5px;line-height:1.55}
.bridge__cta{justify-self:start;white-space:nowrap}
@media(min-width:860px){
  .bridge__in{grid-template-columns:minmax(0,1fr) auto;gap:34px;padding:32px 34px}
  .bridge__cta{justify-self:end}
}