/* =====================================================================
   Тема сайта (с 24.09.2026) — в дизайне референса sitronics.com.
   Самостоятельный файл, ui.css больше не подключается. Страницы переведены
   на эту разметку генератором tools/sitronics/apply.js; здесь — только оформление.

   Что взято с референса замером (снято 24.09.2026, viewport 1920/1440):
   · палитра: тёмный #111318 (шапка, hero, футер), текст #20222D, серый #848D9E,
     светлые секции #F0F4F7, карточки #20232C / #4C79D6 / #262B65;
   · типографика: тонкий гротеск 200–300 на всё, заголовок страницы —
     огромный uppercase 500. Их гарнитуры платные (Navigo, TT Firs Neue) —
     заменены бесплатными Manrope и Montserrat, подобраны сравнением строк;
   · сетка: поля 112px при 1920 (5.83vw), контент до 1696px;
   · кнопка: «таблетка» с градиентной обводкой #8F2CFF → #00B6FF;
   · заголовок секции — подпись uppercase над линией на всю ширину;
   · карточки: радиус 5px, внутренние поля 45/32, без теней.
   Размеры масштабируются от ширины окна так же, как у референса
   (при 1440 всё ровно в 0.75 от 1920).
   ===================================================================== */

:root{
  --dark:#111318; --dark-2:#191a21; --steel:#24272e;
  --ink:#20222d; --ink-2:#464958; --grey:#848d9e; --grey-2:#677389; --mist:#bfc4d8;
  --paper:#f0f4f7; --white:#fff;
  --c-dark:#20232c; --c-blue:#4c79d6; --c-indigo:#262b65;
  --accent:#5267ff;
  --grad:linear-gradient(90deg,#8f2cff,#00b6ff);
  --line-d:rgba(103,115,137,.25);      /* линии на тёмном */
  --line-l:rgba(32,34,45,.14);         /* линии на светлом */
  --edge:clamp(16px,5.83vw,112px);
  --maxw:1920px;
  --radius:5px;
  --font:'Manrope',system-ui,sans-serif;
  --display:'Montserrat',system-ui,sans-serif;
  /* переменные, на которые опирается инлайн-разметка форм боевых страниц */
  --border:rgba(32,34,45,.18); --bg:#fff; --text:#20222d; --text-dim:#677389;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:300;font-size:clamp(15px,.84vw,16px);
  line-height:1.5;color:var(--ink);background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
strong,b{font-weight:500}
h1,h2,h3,h4{margin:0;font-weight:300;color:inherit}
:focus-visible{outline:2px solid #00b6ff;outline-offset:3px}

.container,.sx-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}

/* ---------- кнопка-таблетка с градиентной обводкой ----------
   Обводка — псевдоэлемент с градиентом, у которого маской вырезана середина:
   так у кнопки остаётся прозрачный фон и она одинаково работает на тёмном
   и на светлом. */
.sx-pill,.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:100px;padding:clamp(11px,.73vw,14px) clamp(20px,1.25vw,26px);
  font-family:var(--font);font-weight:500;font-size:clamp(13px,.73vw,14px);line-height:1.2;
  color:inherit;background:transparent;border:0;cursor:pointer;text-decoration:none;
  text-transform:none;letter-spacing:0;white-space:nowrap;transition:background .2s ease,color .2s ease}
.sx-pill::before,.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad);pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.sx-pill:hover,.btn:hover{text-decoration:none;background:var(--grad);color:#fff}
.sx-pill--solid{background:#fff;color:var(--ink)}
.sx-pill--solid::before{display:none}
.sx-pill--solid:hover{background:var(--grad);color:#fff}
.btn .arw{display:none}
.btn>span:first-child{padding:0}

/* ---------- подпись раздела: uppercase над линией ---------- */
.sx-label,main section h2,section>.container>h2,.faq>h2{display:flex;align-items:center;gap:12px;
  font-family:var(--font);font-weight:400;font-size:clamp(13px,.83vw,16px);line-height:1.3;
  text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
  padding-bottom:clamp(12px,.9vw,16px);border-bottom:1px solid var(--ink);margin:0 0 clamp(26px,2.2vw,40px)}
.sx-label--light{color:#fff;border-color:var(--line-d)}
.sx-label a{color:inherit}
.sx-arrow{display:inline-block;width:18px;height:10px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23848d9e' stroke-width='1.2'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat}

/* ================= ШАПКА ================= */
/* Каркас снят с референса (замер при 1440 — там все размеры ровно 0.75 от 1920,
   поэтому они заданы в vw): логотип · основные пункты капсом, у каждого своя
   панель · второстепенные строчными · таблетка · круглые кнопки. Под активным
   пунктом — градиентная черта по нижней кромке шапки, под открытой панелью
   страница затемняется. Разметку собирает tools/sitronics/build-header.js. */
.ic{width:1em;height:1em;flex:none;display:block}
.hd{position:sticky;top:0;z-index:40;color:#fff;font-family:var(--font)}
.hd__bar{position:relative;z-index:2;display:flex;align-items:stretch;height:clamp(64px,5.83vw,112px);
  padding:0 1.51vw 0 1.67vw;background:var(--dark);border-bottom:1px solid var(--line-d)}
.hd__logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;flex:none;text-decoration:none}
.hd__logo:hover{text-decoration:none}
.hd__logo img{height:clamp(18px,1.53vw,29px);width:auto;filter:brightness(0) invert(1)}
.hd__nav{display:flex;align-items:stretch;margin-left:2.45vw}
.hd__nav--sec{margin-left:auto}
.hd__item{position:static;display:flex}
.hd__btn{position:relative;display:flex;align-items:flex-start;padding:clamp(18px,1.67vw,32px) 1.48vw 0;
  font:inherit;font-size:clamp(10px,.677vw,13px);line-height:1.5;font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:none;border:0;cursor:pointer;text-decoration:none;max-width:12em;text-align:left;transition:color .35s,opacity .35s}
.hd__btn:hover{text-decoration:none}
.hd__nav--sec .hd__btn{text-transform:none;letter-spacing:-.01em;padding-left:.83vw;padding-right:.83vw;max-width:none;white-space:nowrap}
/* пока открыта одна панель, остальные пункты приглушены — как у референса */
.hd--menu .hd__item:not(.is-open) .hd__btn{color:#a3a8b8}
.hd__btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);opacity:0;transition:opacity .25s}
.hd__item.is-open .hd__btn::after,.hd__item.is-current .hd__btn::after,.hd__btn.is-current::after{opacity:1}
.hd__cta{align-self:center;margin-left:1.15vw;color:#fff;font-size:clamp(11px,.73vw,14px);padding:.57vw 1.04vw}
.hd__round{align-self:center;display:grid;place-items:center;width:clamp(32px,2.5vw,48px);height:clamp(32px,2.5vw,48px);
  border-radius:50%;background:rgba(191,196,216,.2);color:#fff;margin-left:1.46vw;flex:none;transition:background .25s}
.hd__round .ic{width:40%;height:40%}
.hd__round:hover{background:rgba(191,196,216,.34)}
.hd__burger{display:none}

/* ---- выпадающие панели ---- */
.hd__panel{position:absolute;left:0;right:0;top:100%;background:var(--dark);color:#fff;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.hd__item.is-open .hd__panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.hd__panel a{color:inherit;text-decoration:none}
.hd__shade{position:fixed;inset:0;z-index:1;background:rgba(6,7,10,.62);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.hd--menu .hd__shade,.hd--drawer .hd__shade{opacity:1;visibility:visible;transition:opacity .3s}

/* «Компания»: строка крупных ссылок с вертикальными разделителями */
.mn-row{display:flex;list-style:none;margin:0;padding:1.6vw 7.5vw 2.55vw}
.mn-row li{padding:2.4vw 3.39vw 1.77vw;border-left:1px solid #22262f}
.mn-row li:first-child{padding-left:0;border-left:0}
.mn-row a{font-size:clamp(15px,1.2vw,23px);font-weight:300}
.mn-row a:hover,.mn-row a.is-current{color:#9fb0ff}

/* «Услуги»: колонки групп — крупный заголовок, под ним мелкие ссылки */
.mn-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:1.67vw 5vw 2.2vw}
.mn-cols__col{display:flex;flex-direction:column;gap:.55vw;padding:1.9vw 2vw 1.6vw;border-left:1px solid #22262f}
.mn-cols__col:first-child{border-left:0;padding-left:0}
.mn-cols__head{margin:0 0 .6vw;font-size:clamp(15px,1.2vw,23px);font-weight:300;line-height:1.25}
.mn-cols__col a{font-size:clamp(11px,.73vw,14px);font-weight:300;color:var(--mist);line-height:1.4}
.mn-cols__col a:hover,.mn-cols__col a.is-current{color:#fff}

/* «Продукты»: колонки с названием, описанием и большой иллюстрацией */
.mn-prod{display:flex;padding:1.67vw 5vw}
.mn-prod__item{width:30vw;max-width:33%;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2.34vw 1.3vw 0;border-right:1px solid #22262f}
.mn-prod__item:last-child{border-right:0}
.mn-prod__title{font-size:clamp(15px,1.2vw,23px);font-weight:300}
.mn-prod__text{font-size:clamp(11px,.73vw,14px);color:var(--mist);margin-top:.6vw;max-width:22em;min-height:2.8em}
.mn-prod__item img{width:21vw;max-width:100%;margin-top:.4vw;transition:transform .5s ease}
.mn-prod__item:hover img{transform:translateY(-6px)}
.mn-prod__item:hover .mn-prod__title{color:#9fb0ff}

/* «Импортозамещение»: сетка ячеек «иконка + название» */
.mn-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:1.67vw 5vw}
.mn-cells__item{display:flex;flex-direction:column;gap:.9vw;padding:2.6vw 1.3vw 2.4vw;
  border-right:1px solid #22262f;border-bottom:1px solid #22262f;transition:background .25s}
.mn-cells__item:nth-child(3n){border-right:0}
.mn-cells__item:nth-last-child(-n+3){border-bottom:0}
.mn-cells__item .ic{width:clamp(18px,1.4vw,27px);height:clamp(18px,1.4vw,27px);color:var(--mist)}
.mn-cells__title{font-size:clamp(15px,1.2vw,23px);font-weight:300;line-height:1.3}
.mn-cells__text{font-size:clamp(11px,.73vw,14px);color:var(--grey)}
.mn-cells__item:hover{background:rgba(255,255,255,.025)}
.mn-cells__item:hover .ic{color:#9fb0ff}

/* «Решения»: слева список с иконками, справа три плитки с иллюстрациями */
.mn-sol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.7vw;padding:2.34vw 2.3vw 2.4vw 2.45vw}
.mn-sol__list,.mn-sol__tile{background:#191a21;border-radius:7.5px}
.mn-sol__list{display:flex;flex-direction:column;padding:2.34vw 1.5vw 1.56vw 1.3vw}
.mn-sol__all{display:flex;align-items:center;gap:1.7vw;font-size:clamp(15px,1.25vw,24px);font-weight:300;
  padding:0 0 1vw .8vw;border-bottom:1px solid #20222d;margin-bottom:1.2vw}
.mn-sol__all .ic{width:1.95vw;min-width:22px;height:auto;aspect-ratio:28/20;color:#8a5cff}
.mn-sol__all:hover{color:#9fb0ff}
.mn-sol__row{display:flex;align-items:center;gap:1.3vw;padding:.45vw 0;font-size:clamp(11px,.83vw,16px);font-weight:300;color:var(--mist);line-height:1.3}
.mn-sol__ic{display:grid;place-items:center;width:3.33vw;height:3.33vw;min-width:38px;min-height:38px;border-radius:4px;background:#24272e;flex:none}
.mn-sol__ic .ic{width:42%;height:42%;color:#bfc4d8}
.mn-sol__row:hover,.mn-sol__row.is-current{color:#fff}
.mn-sol__row:hover .mn-sol__ic{background:#2c3040}
.mn-sol__tile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.34vw 1.3vw 0;overflow:hidden}
.mn-sol__title{font-size:clamp(15px,1.25vw,24px);font-weight:300}
.mn-sol__text{font-size:clamp(11px,.83vw,16px);color:var(--mist);margin-top:.6vw;max-width:20em;min-height:2.6em;line-height:1.5}
.mn-sol__tile img{width:108%;max-width:none;margin:.4vw -4% auto;transition:transform .5s ease}
.mn-sol__tile:hover img{transform:scale(1.04)}
.mn-sol__tile:hover .mn-sol__title{color:#9fb0ff}

/* ---- выдвижное меню на узких ---- */
.dr{display:none}
html.no-scroll{overflow:hidden}
@media(max-width:1260px){
  .hd__bar{height:60px;padding:0 16px;align-items:center}
  .hd__nav,.hd__cta,.hd__bar>.hd__round{display:none}
  .hd__logo img{height:20px}
  .hd__burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-left:auto;
    width:34px;height:34px;padding:0;border:0;border-radius:4px;background:#474b5c;cursor:pointer}
  .hd__burger span{display:block;width:14px;height:1.5px;background:#fff}
  .dr{display:flex;flex-direction:column;position:fixed;z-index:3;top:0;right:0;bottom:0;width:min(calc(100% - 68px),420px);
    background:#20222d;padding:64px 26px 32px;overflow-y:auto;transform:translateX(100%);visibility:hidden;
    transition:transform .35s ease,visibility 0s .35s}
  .hd--drawer .dr{transform:none;visibility:visible;transition:transform .35s ease}
  .dr__close{position:absolute;top:13px;right:16px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;
    border-radius:4px;background:#474b5c;color:#fff;cursor:pointer}
  .dr__close .ic{width:16px;height:16px}
  .dr__item{border-bottom:1px solid rgba(255,255,255,.12)}
  .dr__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 0;background:none;border:0;
    color:#fff;font:inherit;font-size:18px;font-weight:300;text-align:left;cursor:pointer}
  .dr__btn .ic{width:18px;height:18px;color:var(--grey);transition:transform .25s}
  .dr__item.is-open .dr__btn .ic{transform:rotate(180deg)}
  .dr__sub{display:none;flex-direction:column;padding:0 0 16px}
  .dr__item.is-open .dr__sub{display:flex}
  .dr__sub a{color:var(--mist);font-size:15px;padding:7px 0;text-decoration:none}
  .dr__sub a.is-current{color:#fff}
  .dr__group{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
  .dr__sec{display:flex;flex-direction:column;gap:16px;margin-top:28px}
  .dr__sec a{color:#fff;font-size:15px;font-weight:400;text-decoration:none}
  .dr__cta{align-self:flex-start;margin-top:26px;color:#fff}
  .dr__round{display:flex;gap:14px;margin-top:22px}
  .dr__round .hd__round{margin:0;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.hd__panel,.dr,.hd__shade{transition:none!important}}

/* ================= HERO ================= */
.sx-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
/* живой фон — canvas из js/ui.js; пока скрипт не отработал, лежит та же картинка статично */
.sx-hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sx-hero>.sx-wrap{position:relative;z-index:2}
.sx-hero--live{background-image:none!important}
.sx-h1{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.005em;
  line-height:1.0;font-size:clamp(34px,5vw,96px);padding-top:.08em;hyphens:none;overflow-wrap:break-word}
.sx-h1--m{font-size:clamp(30px,3.9vw,74px)}
.sx-h1--s{font-size:clamp(26px,3.1vw,60px);line-height:1.04}

/* главная: только типографика на тёмном и тонкая линия-индикатор прокрутки */
.sx-hero--home .sx-wrap{padding-top:clamp(64px,9.1vw,175px);padding-bottom:clamp(56px,7vw,130px);position:relative}
.sx-hero--home .sx-h1{max-width:14.5em;margin-left:clamp(0px,7.6vw,146px)}
.sx-hero__scroll{position:absolute;left:var(--edge);bottom:0;width:1px;height:clamp(50px,5vw,96px);
  background:linear-gradient(var(--line-d),var(--line-d))}
.sx-hero__scroll::after{content:"";position:absolute;left:0;top:0;width:1px;height:35%;background:#fff;
  animation:sx-scroll 2.4s ease-in-out infinite}
@keyframes sx-scroll{0%{top:0;height:0}50%{top:0;height:100%}100%{top:100%;height:0}}

/* внутренние: фон со световыми линиями, H1 внизу блока */
.sx-hero--page,.sx-hero--home{background:var(--dark) url(/img/sx/hero-lines.webp) left top/cover no-repeat}
.sx-hero--page .sx-wrap{min-height:clamp(260px,23.3vw,448px);display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:clamp(40px,4vw,80px);padding-bottom:clamp(36px,3.4vw,64px)}
.sx-kicker{font-size:clamp(12px,.73vw,14px);text-transform:uppercase;letter-spacing:.06em;color:var(--mist);margin:0 0 clamp(14px,1.2vw,22px)}
.sx-hero--page .sx-h1{max-width:18em}
/* портрет на страницах про человека: снизу справа, режется нижней кромкой */
.sx-hero__photo{position:absolute;right:var(--edge);bottom:0;width:clamp(200px,27vw,520px);z-index:1;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 14%);mask-image:linear-gradient(to top,transparent 0,#000 14%)}
.sx-hero--portrait .sx-wrap{position:relative;z-index:2}
.sx-hero--portrait .sx-h1{max-width:min(18em,62%)}

/* полоса под hero: крупный тонкий лид слева, факты и кнопки справа */
.sx-leadband{background:var(--paper);padding:clamp(40px,4.2vw,80px) 0}
.sx-leadband__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start}
.sx-leadband__lead{font-size:clamp(20px,2.08vw,40px);line-height:1.2;font-weight:300;letter-spacing:-.02em;margin:0;color:var(--ink)}
.sx-facts{list-style:none;margin:0 0 clamp(20px,1.7vw,32px);padding:0}
.sx-facts li{padding:clamp(12px,.9vw,16px) 0;border-bottom:1px solid var(--line-l)}
.sx-facts li:first-child{border-top:1px solid var(--line-l)}
.sx-facts b{display:block;font-weight:500;font-size:clamp(15px,.94vw,18px);color:var(--ink)}
.sx-facts span{color:var(--grey-2);font-size:clamp(13px,.78vw,15px)}
.sx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,1.7vw,32px);padding:0;list-style:none}
.sx-chips li{border:1px solid var(--mist);border-radius:100px;padding:6px 14px;font-size:clamp(12px,.68vw,13px);color:var(--grey-2)}
.sx-acts{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.sx-acts .linkarw,.sx-more{color:var(--ink);font-weight:400;display:inline-flex;align-items:center;gap:10px}
.sx-leadband .sx-pill{color:var(--ink)}
.sx-leadband .sx-pill:hover{color:#fff}

/* главная: вводный блок на тёмном — «кого заменить» + три варианта */
.sx-intro{background:var(--dark);color:#fff;padding:0 0 clamp(40px,4vw,76px)}
.sx-intro__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line-d)}
.sx-intro__grid>*{padding:clamp(28px,3vw,56px) 0 clamp(36px,4vw,76px)}
.sx-intro__grid>*+*{border-left:1px solid var(--line-d);padding-left:clamp(28px,5vw,96px)}
.sx-intro__lead{font-size:clamp(20px,2.08vw,40px);line-height:1.2;letter-spacing:-.02em;font-weight:300;margin:0 0 clamp(26px,2.2vw,40px);max-width:17em}
.sx-intro .sx-pill{color:#fff}
.opts-tabs__row{display:flex;flex-direction:column}
.opts-tab{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line-d);color:var(--mist);font:inherit;font-size:clamp(15px,1.04vw,20px);
  font-weight:300;padding:clamp(14px,1vw,18px) 0;cursor:pointer;transition:color .2s ease}
.opts-tab i{font-style:normal;font-size:12px;color:var(--grey);min-width:22px}
.opts-tab:hover{color:#fff}
.opts-tab[aria-selected="true"]{color:#fff}
.opts-tab[aria-selected="true"] i{color:#9fb0ff}
.opts-tab[aria-selected="true"]{box-shadow:inset 0 -1px 0 #9fb0ff}
.opts-panel{padding-top:clamp(20px,1.7vw,32px)}
.opts-panel[hidden]{display:none}
.opts-panel h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(18px,1.37vw,26px);margin-bottom:10px}
.opts-panel p{color:var(--mist);margin:0;max-width:34em}

/* клиенты — полоса имён на тёмном, как лента логотипов референса */
.trust-bar{background:var(--dark);color:var(--grey);padding:clamp(28px,2.6vw,50px) 0}
.trust-bar .container{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(24px,4vw,76px)}
.trust-bar span{font-size:clamp(12px,.73vw,14px);text-transform:uppercase;letter-spacing:.04em}
.trust-bar strong{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.15vw,22px);color:#8c93a4;letter-spacing:-.01em}

/* ================= ВИДЕОБЛОК =================
   Полоса во всю ширину: кадр (позже — зацикленное видео без звука),
   крупный заголовок и круглая кнопка play. Сейчас стоит первый кадр будущего
   ролика — он же основа для его генерации. */
.sx-video{position:relative;color:#fff;background:#0b0d18;overflow:hidden}
.sx-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,20,.75) 0,rgba(8,10,20,.15) 55%,rgba(8,10,20,0) 100%)}
.sx-video .sx-wrap{position:relative;z-index:1;min-height:clamp(420px,49.7vw,954px);display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:clamp(40px,3.6vw,70px)}
.sx-video__title{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(28px,3.3vw,64px);
  line-height:1;max-width:11em;margin:0 0 clamp(20px,1.8vw,34px)}
.sx-play{display:inline-flex;align-items:center;gap:16px;color:#fff;background:none;border:0;padding:0;
  font:inherit;font-size:clamp(15px,.94vw,18px);cursor:pointer}
.sx-play__ic{width:clamp(48px,3.75vw,72px);height:clamp(48px,3.75vw,72px);border-radius:50%;border:1px solid rgba(255,255,255,.8);
  display:grid;place-items:center;transition:background .2s ease}
.sx-play__ic::before{content:"";border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:4px}
.sx-play:hover .sx-play__ic{background:rgba(255,255,255,.12)}

/* ================= СЕКЦИИ ================= */
main section,body>section{padding:clamp(56px,5.2vw,100px) 0}
body>section.sx-grey{background:var(--paper)}
body>section.sx-white{background:var(--white)}
body>section+section.sx-tight-top{padding-top:0}
/* прямой ответ под hero — крупным тонким текстом, как вводный абзац референса */
.direct-answer{font-size:clamp(18px,1.46vw,28px);line-height:1.35;letter-spacing:-.015em;font-weight:300;
  max-width:44em;margin:0;color:var(--ink)}
.direct-answer a{color:var(--accent)}
.lede{font-size:clamp(16px,1.04vw,20px);color:var(--ink-2);max-width:48em}
section .container>p{max-width:62em}

/* карточки: белые на сером, серые на белом; заголовок в два веса */
.grid{display:grid;gap:clamp(16px,1.56vw,30px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid>*{min-width:0}
.card{background:var(--white);border-radius:var(--radius);padding:clamp(26px,2.34vw,45px) clamp(22px,1.67vw,32px);
  border:0;box-shadow:none}
.sx-white .card{background:var(--paper)}
.card h3{font-size:clamp(20px,1.46vw,28px);line-height:1.15;font-weight:200;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.card h3 b{font-weight:500}
.card h3 a{color:inherit}
.card h3 a:hover{text-decoration:none;color:var(--accent)}
.card p{color:var(--ink-2);font-size:clamp(14px,.83vw,16px);margin:0}
.card p+p{margin-top:.8em}
.sx-note{text-align:left!important;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--dark)!important;color:#fff;border-radius:var(--radius)}
.sx-note p{color:#fff!important;font-size:clamp(16px,1.15vw,22px)!important;font-weight:300}
.sx-note a{color:#9fb0ff}

/* цветные карточки услуг с изометрической иллюстрацией — главная и «Все услуги» */
.sx-svc{display:grid;gap:clamp(16px,1.56vw,30px);grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-svc .card{position:relative;display:flex;flex-direction:column;color:#fff;min-height:clamp(420px,31.7vw,609px);
  overflow:hidden;padding-bottom:0}
.sx-svc .sx-tone-dark{background:var(--c-dark)}
.sx-svc .sx-tone-blue{background:var(--c-blue)}
.sx-svc .sx-tone-indigo{background:var(--c-indigo)}
.sx-svc .card h3,.sx-svc .card h3 a{color:#fff}
.sx-svc .card p{color:rgba(255,255,255,.72)}
.sx-svc .card img{margin:auto -10% -2% ;width:120%;max-width:none;aspect-ratio:1;object-fit:cover;pointer-events:none}
.sx-svc .card:hover img{transform:scale(1.03)}
.sx-svc .card img{transition:transform .5s ease}

/* таблицы — строками с тонкими линиями, без клеток */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:clamp(14px,.83vw,16px)}
th,td{text-align:left;padding:clamp(14px,1vw,20px) 20px clamp(14px,1vw,20px) 0;border-bottom:1px solid var(--line-l);vertical-align:top}
th{font-weight:400;text-transform:uppercase;font-size:clamp(11px,.68vw,13px);letter-spacing:.03em;color:var(--grey-2);border-bottom-color:var(--ink)}
td:first-child{font-weight:500;color:var(--ink);min-width:160px}
td{color:var(--ink-2)}

/* FAQ — аккордеон строками с «+», как боковое меню референса */
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(18px,1.3vw,26px) 0;font-size:clamp(17px,1.25vw,24px);font-weight:300;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--grey),var(--grey)) center/100% 1px no-repeat,linear-gradient(var(--grey),var(--grey)) center/1px 100% no-repeat;
  transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);max-width:56em;margin:0 0 clamp(18px,1.3vw,26px)}

/* контакты: три колонки «подпись над линией → значение», как у референса */
.sx-contacts{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-contacts .card{background:none!important;padding:0;border-radius:0}
.sx-contacts .card>div{text-transform:uppercase;font-size:clamp(12px,.73vw,14px)!important;color:var(--ink)!important;
  letter-spacing:.02em;padding-bottom:12px;border-bottom:1px solid var(--line-l);margin-bottom:14px!important}
.sx-contacts .card a{font-weight:300!important;font-size:clamp(18px,1.25vw,24px)!important;color:var(--ink)}
.sx-formwrap form{max-width:760px;background:var(--paper);padding:clamp(28px,2.5vw,48px)}
.sx-formwrap label{font-size:clamp(12px,.73vw,14px);text-transform:uppercase;letter-spacing:.02em;color:var(--grey-2)}
.sx-formwrap input,.sx-formwrap textarea{border-radius:var(--radius)!important;border:1px solid transparent!important;
  font:inherit;font-size:16px}
.sx-formwrap input:focus,.sx-formwrap textarea:focus{outline:0;border-color:var(--accent)!important}
.sx-formwrap .btn{color:var(--ink)}
.sx-formwrap .btn:hover{color:#fff}

/* ================= CTA ================= */
.cta-block{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--radius);
  padding:clamp(36px,4.2vw,80px) clamp(24px,3.3vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;
  align-items:end;gap:28px 60px}
.cta-block::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 120% at 100% 100%,rgba(143,44,255,.35),transparent 60%),
  radial-gradient(50% 90% at 85% 0,rgba(0,182,255,.18),transparent 60%);pointer-events:none}
.cta-block>*{position:relative}
.cta-block h2{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(24px,2.5vw,48px);
  line-height:1.02;border:0;padding:0;margin:0 0 14px;display:block;color:#fff}
.cta-block p{color:var(--mist);margin:0;font-size:clamp(15px,.94vw,18px);max-width:36em}
.cta-block .btn{color:#fff;grid-row:1 / span 2;grid-column:2;align-self:end}

/* ================= ФУТЕР ================= */
.site-footer{background:var(--dark);color:var(--grey);padding:clamp(56px,6vw,110px) 0 clamp(28px,2.4vw,44px);font-size:clamp(13px,.78vw,15px)}
.site-footer a{color:var(--mist)}
.site-footer a:hover{color:#fff;text-decoration:none}
.sx-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(32px,4vw,80px);margin-bottom:clamp(40px,4vw,76px)}
.sx-foot__brand .logo{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;margin-bottom:18px;text-decoration:none}
.logo__word{height:clamp(18px,1.3vw,25px);width:auto;filter:brightness(0) invert(1)}
.logo__sub{font-size:clamp(7px,.42vw,8px);text-transform:uppercase;letter-spacing:.14em;color:var(--mist);white-space:nowrap}
.sx-foot__brand p{max-width:18em;margin:0 0 24px;font-size:clamp(12px,.68vw,13px)}
.sx-foot__brand .sx-pill{color:#fff;display:flex;width:max-content;margin-bottom:12px}
.sx-foot__phone{display:block;font-size:clamp(18px,1.15vw,22px);color:#fff!important;margin-bottom:22px}
.footer-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px clamp(20px,2vw,40px)}
.footer-nav>div{display:flex;flex-direction:column;gap:9px;min-width:0}
.footer-nav strong{color:#fff;font-weight:500;font-size:clamp(11px,.68vw,13px);text-transform:uppercase;letter-spacing:.02em;
  padding-bottom:12px;border-bottom:1px solid var(--line-d);margin-bottom:6px}
.footer-nav a{overflow-wrap:break-word;font-weight:300}
.footer-bottom{border-top:1px solid var(--line-d);padding-top:22px;font-size:12px;color:var(--grey-2)}

/* ================= АДАПТИВ ================= */
@media(max-width:1200px){
  .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-svc .card img{width:90%;margin:auto auto -2%}
}
@media(max-width:900px){
  .sx-contacts{grid-template-columns:minmax(0,1fr)}
  .sx-leadband__grid,.sx-intro__grid,.sx-foot{grid-template-columns:minmax(0,1fr)}
  .sx-intro__grid>*+*{border-left:0;border-top:1px solid var(--line-d);padding-left:0}
  .sx-hero--home .sx-h1{margin-left:0}
  .cta-block{grid-template-columns:minmax(0,1fr)}
  .cta-block .btn{grid-row:auto;grid-column:auto;justify-self:start}
  .sx-hero__photo{opacity:.35;width:clamp(180px,48vw,360px)}
  .sx-hero--portrait .sx-h1{max-width:none}
}
@media(max-width:560px){
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .sx-svc{grid-template-columns:minmax(0,1fr)}
  .sx-svc .card{min-height:0}
  .sx-svc .card img{width:78%;margin:18px auto -2%}
  .sx-note{flex-direction:column;align-items:flex-start}
  th,td{padding-right:14px}
  td:first-child{min-width:120px}
  .sx-video .sx-wrap{min-height:clamp(420px,120vw,560px)}
  .sx-video__media{object-position:72% center}
}
@media(prefers-reduced-motion:reduce){.sx-hero__scroll::after{animation:none}.sx-svc .card img{transition:none}}