/* ============================================================
   AURA STUDIO — corp.aura-studio.tech
   Дизайн-система снята ЗАМЕРОМ с образца itech-group.ru
   (замер палитры — kits/design-dna/scripts/measure-colors.mjs,
    метрики — computed styles живой страницы):
      акцент     rgb(250,1,1)      кнопки без радиуса, высота 64
      текст      rgb(25,25,25)
      тёмная     rgb(22,26,29)
      контейнер  1240 при поле 100
      H1         60/62 w600 · H2 56/48 w600 ls -1.5% · тело 18/28
   Наш акцент на ступень глубже (#E10A12): у образца белый текст
   на чистом красном даёт 4.15:1 и не проходит AA, у нас 4.95:1.
   ============================================================ */

:root{
  --red:#e10a12;
  --red-dk:#a80009;
  --ink:#191919;
  --ink-2:#5b5d5d;
  --line:rgba(0,0,0,.13);
  --gray:#f1f1f1;
  --dark:#161a1d;
  --dark-2:#0f1316;
  --navy:#00275b;
  --w:#fff;

  --wrap:1240px;
  --gut:clamp(16px,6.9vw,100px);
  --sec:clamp(56px,8.3vw,120px);
  --hdr:60px;

  --f-h1:clamp(34px,5.6vw,72px);
  --f-h2:clamp(28px,4.4vw,56px);
  --f-h3:clamp(21px,2.3vw,30px);
  --f-b:clamp(16px,1.15vw,18px);

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;background:var(--w);color:var(--ink);
  font-family:'Onest',system-ui,'Segoe UI',sans-serif;
  font-size:var(--f-b);line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,dl,dd,figure{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.proof :focus-visible,.case :focus-visible,.foot :focus-visible{outline-color:#fff}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--red);color:#fff;padding:14px 20px;font-weight:600}
.skip:focus{left:0}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}

/* ---------------------------------------------------- шапка
   Как у образца: красная плашка вплотную к левому краю, бургер рядом,
   телефон справа. Текстового меню в строке НЕТ — оно выпадает панелью
   на любой ширине, поэтому шапка не разваливается ни при каком окне. */
.hdr{position:sticky;top:0;z-index:60;background:var(--w);border-bottom:1px solid var(--line)}
/* Шторка лежит ВНУТРИ шапки, поэтому её z-index считается в контексте шапки.
   Строку с логотипом и крестиком поднимаем над шторкой и красим — иначе меню
   закрывает собственную кнопку закрытия. */
.hdr__in{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  height:var(--hdr);display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  position:relative;z-index:2;background:var(--w);
}
.logo{display:flex;align-items:center;flex:none}
/* flex, а НЕ grid: в grid-контейнере текстовый узел и <i> становятся
   разными элементами сетки и точка уезжает на вторую строку */
.logo__plate{
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--red);color:#fff;
  height:var(--hdr);min-width:118px;padding:0 18px;
  font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1;
}
.logo__plate i{font-style:normal}

.burger{
  width:44px;height:44px;flex:none;position:relative;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;
}
.burger span{
  display:block;height:2px;background:var(--red);
  transition:transform .3s var(--ease),opacity .2s var(--ease),width .3s var(--ease);
}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:17px}
.burger span:nth-child(3){width:24px}
.burger:hover span:nth-child(2){width:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){width:24px;transform:translateY(-7px) rotate(-45deg)}

.hdr__tel{
  margin-left:auto;font-size:15px;font-weight:600;letter-spacing:.01em;
  flex:none;white-space:nowrap;padding:12px 0;
}
.hdr__tel:hover{color:var(--red)}

/* Меню — полноэкранная шторка, выезжает СЛЕВА (как у образца).
   Пункты влетают по очереди: задержка берётся из --i, выставленного
   в разметке, поэтому в JS считать ничего не надо. */
.menu{
  position:fixed;inset:0;z-index:1;background:var(--w);
  display:flex;align-items:center;overflow-y:auto;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .62s cubic-bezier(.76,0,.24,1),visibility .62s;
}
.menu.open{transform:none;visibility:visible}
.menu__in{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  padding:calc(var(--hdr) + 40px) 0 48px;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.menu__nav{display:flex;flex-direction:column;align-items:flex-start}
.menu a{
  font-size:clamp(30px,4.6vw,62px);font-weight:600;line-height:1.14;
  letter-spacing:-.03em;padding:6px 0;position:relative;
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s var(--ease);
}
.menu.open a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .055s)}
.menu a:hover{color:var(--red)}
.menu a::after{
  content:'';position:absolute;left:0;right:100%;bottom:4px;height:3px;
  background:var(--red);transition:right .35s var(--ease);
}
.menu a:hover::after,.menu a:focus-visible::after{right:0}

.menu__side{
  border-left:1px solid var(--line);padding-left:clamp(20px,3vw,44px);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease) .42s,transform .5s var(--ease) .42s;
}
.menu.open .menu__side{opacity:1;transform:none}
.menu__city{font-size:20px;font-weight:600;margin-bottom:12px}
.menu__note{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:34ch;margin-bottom:26px}
.cc--menu{margin-bottom:24px}
.menu__req{font-size:13px;color:var(--ink-2);line-height:1.6}

/* ---------------------------------------------------- герой */
.hero{
  position:relative;isolation:isolate;background:#7d0206;color:#fff;
  min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;
  justify-content:center;padding:clamp(48px,7vw,96px) 0 0;overflow:hidden;
}
/* Рисованная сцена — мгновенный первый кадр и запасной вариант для телефона.
   🔴 Она лежит НАД видео (-1 против -2), поэтому когда видео догрузилось,
   сцену надо ПОГАСИТЬ. Один раз уже поймали: увёл видео на слой ниже ради
   плёнки — и вместо ролика весь вечер показывался canvas. */
.silk{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;
  transition:opacity .9s var(--ease);
}
.hero.hasvid .silk{opacity:0}
.silkv{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  transition:opacity .9s var(--ease);
}
.silkv.on{opacity:1}
.hero__hint{
  position:absolute;left:var(--gut);bottom:14px;z-index:1;pointer-events:none;
  font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.18);
  padding:7px 13px;border-radius:999px;transition:opacity .35s var(--ease);
}
.hero__hint.off{opacity:0}

/* фоновый холст секции: кадр листается мышью по всей её ширине */
.bgv{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;opacity:.42}
.bgv__hint{
  position:absolute;right:var(--gut);bottom:20px;z-index:1;pointer-events:none;
  font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:7px 13px;border-radius:999px;transition:opacity .35s var(--ease);
}
.bgv__hint.off{opacity:0}
/* Плёнка поверх видео. Кадр всё время меняется, и без неё контраст белого
   текста плавал бы вместе с бликами ткани — замер показывал провал справа. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(103deg, rgba(38,1,5,.70) 0%, rgba(38,1,5,.42) 46%, rgba(38,1,5,.26) 100%),
    linear-gradient(to top, rgba(26,1,4,.55) 0%, rgba(26,1,4,0) 34%);
}
.hero__in{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,64px);align-items:center;flex:1 0 auto;
  padding-block:clamp(32px,5vw,64px);
}
.hero__kick{font-size:clamp(17px,1.7vw,24px);color:rgba(255,255,255,.86);margin-bottom:14px}
.hero__h{
  font-size:var(--f-h1);font-weight:600;line-height:1.02;letter-spacing:-.025em;
  margin-bottom:clamp(24px,3vw,40px);
}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills li{
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  padding:12px 26px;font-size:clamp(15px,1.4vw,20px);
}
.hero__lead{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.92);margin-bottom:clamp(24px,3vw,36px)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:64px;padding:0 clamp(24px,3vw,38px);
  font-size:16px;font-weight:600;border-radius:0;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn--ghost{border:1px solid #fff;color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dk)}
.hero__nums{
  width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:clamp(20px,2.4vw,30px) 0 clamp(28px,3vw,40px);gap:20px;
}
.hero__nums dt{font-size:clamp(24px,2.6vw,36px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero__nums dd{font-size:14px;color:rgba(255,255,255,.94);margin-top:4px;max-width:24ch}

/* ------------------------------------------------ о компании */
.about{padding:var(--sec) 0}
.about__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px)}
.big{font-size:clamp(48px,7.4vw,96px);font-weight:600;line-height:.92;letter-spacing:-.035em}
.big span{display:block;font-size:clamp(16px,1.4vw,19px);font-weight:400;letter-spacing:0;line-height:1.5;color:var(--ink-2);margin-top:18px;max-width:22ch}
.about__t p{font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:var(--ink)}
.about__t p + p{margin-top:20px}
.lnk{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 0;font-weight:600;color:var(--red)}
.lnk i{transition:transform .25s var(--ease)}
.lnk:hover i{transform:translateX(6px)}

/* ---------------------------------------------------- услуги */
.h2{font-size:var(--f-h2);font-weight:600;line-height:1.04;letter-spacing:-.015em}
.h2 em{font-style:normal;color:var(--red)}
.h2--w{color:#fff}
.h2--w em{color:#ff5a5f}

.serv{padding:0 0 var(--sec)}
.serv__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px)}
.serv__l{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}
.serv__l .btn{margin-top:clamp(24px,3vw,36px)}
.serv__r details{border-top:1px solid var(--line)}
.serv__r details:last-child{border-bottom:1px solid var(--line)}
.serv__r summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.2vw,28px) 0;cursor:pointer;list-style:none;
  font-size:var(--f-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em;
}
.serv__r summary::-webkit-details-marker{display:none}
.serv__r summary::after{
  content:'';flex:none;width:16px;height:16px;margin-right:4px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease);
}
.serv__r details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.serv__r summary:hover span{color:var(--red)}
.lst{padding:0 0 clamp(20px,2.4vw,30px)}
.lst li{font-size:clamp(16px,1.25vw,18px);color:var(--ink-2);padding:7px 0 7px 22px;position:relative}
.lst li::before{content:'';position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--red)}
.lst a{color:var(--red);font-weight:600}

/* --------------------------------------------- подтверждения */
.proof{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:#fff;padding:var(--sec) 0}
/* фон тёмной полосы — холст: кадр листается мышью по всей ширине секции */
.proof__v{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  opacity:.5;
}
.proof__hint{
  position:absolute;right:var(--gut);bottom:22px;z-index:1;
  font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:7px 13px;border-radius:999px;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.proof__hint.off{opacity:0}
/* плёнка поверх видео: контраст белого текста не должен зависеть от кадра */
.proof::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(22,26,29,.62)}
.proof__row{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:clamp(32px,4vw,56px);
}
.proof__c{padding:4px 20px 4px clamp(16px,2vw,32px);border-left:1px solid rgba(255,255,255,.2)}
.proof__n{font-size:clamp(22px,2.3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.proof__s{font-size:14px;color:rgba(255,255,255,.5);margin-top:8px}
.proof__d{font-size:15px;color:rgba(255,255,255,.86);margin-top:14px;max-width:26ch}

/* ---------------------------------------------------- работы */
.works{padding:var(--sec) 0 0}
.works__hd{padding-bottom:clamp(32px,4vw,56px)}
.sub{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:56ch;margin-top:18px}

.case{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(78vh,640px);display:flex;align-items:center;
  padding:clamp(48px,7vw,96px) 0;color:#fff;
  --ov:0,39,91;
  /* браузер не рисует панель, пока она за экраном: на слабом ноуте шесть
     полноэкранных картинок с градиентом клали прокрутку */
  content-visibility:auto;
  contain-intrinsic-size:auto 640px;
}
.case--b{--ov:22,26,29}
.case--c{--ov:16,31,74}
.case--d{--ov:44,10,12}
.case--e{--ov:18,18,20}
.case--f{--ov:12,28,44}
.case__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.case::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(var(--ov),.96) 0%,rgba(var(--ov),.92) 42%,rgba(var(--ov),.82) 100%);
}
.case__in{max-width:100%}
.tag{
  display:inline-block;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:rgba(0,0,0,.42);
  padding:9px 18px;font-size:14px;color:#fff;margin-bottom:clamp(18px,2vw,26px);
}
.tag--d{border-color:var(--line);background:none;color:var(--ink-2)}
.case__h{font-size:clamp(26px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.02em;max-width:19ch}
.case__p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.88);max-width:58ch;margin-top:clamp(16px,2vw,24px)}
.arw{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);margin-top:clamp(24px,3vw,40px);font-size:20px;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.arw:hover{background:#fff;color:var(--ink);transform:translateX(6px)}

/* закрытые контуры: скриншота нет, поэтому рисуем суть кодом */
/* закрытые контуры: две широкие строки, визуал и текст рядом */
.closed{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);padding:var(--sec) 0;
  content-visibility:auto;contain-intrinsic-size:auto 760px}
.cl{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.cl--rev .cl__v{order:2}
.cl__v{min-width:0}
.cl__v--pipe{background:var(--gray);padding:clamp(18px,2vw,26px)}
.pipe{display:block;width:100%;height:clamp(190px,20vw,250px)}
.cl__b h3{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.018em;margin-bottom:14px}
.cl__b p{font-size:clamp(16px,1.25vw,18px);line-height:1.58;color:var(--ink-2)}
.mini__t{margin-top:16px;font-size:14px;color:var(--ink);font-weight:500}
.mini__x{margin-top:8px;font-size:14px;color:var(--ink-2)}
.mini__x a{color:var(--red);font-weight:600}

/* терминал Гермеса */
.term{background:var(--dark);margin-bottom:clamp(18px,2vw,26px);overflow:hidden}
.term__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.term__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.term__bar i:first-child{background:var(--red)}
.term__bar span{margin-left:8px;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.term__body{
  margin:0;padding:16px 14px;font-family:Consolas,'Cascadia Mono',monospace;
  font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.86);
  white-space:pre-wrap;overflow-x:auto;min-height:clamp(190px,20vw,250px);
}
.term__body b{color:#fff;font-weight:600}
.term__body u{color:rgba(255,255,255,.62);text-decoration:none}
.term__body i{display:block;height:.5em}
.term__cur{display:inline-block;width:7px;height:1em;background:var(--red);
  vertical-align:-2px;animation:cur 1.05s steps(2) infinite}
@keyframes cur{50%{opacity:0}}

/* ---------------------------------------------------- боты */
.bots{background:var(--dark);color:#fff;padding:var(--sec) 0;content-visibility:auto;contain-intrinsic-size:auto 760px}
.sub--w{color:rgba(255,255,255,.72)}
/* AuraFit: ролик показываем целиком, квадрат не режем */
.botbig{
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center;
  border:1px solid rgba(255,255,255,.16);padding:clamp(18px,2.2vw,28px);
  margin-top:clamp(32px,4vw,56px);
}
.botbig__v{position:relative;width:100%}
.scrub{display:block;width:100%;aspect-ratio:1/1;background:#0b0d0f;cursor:ew-resize}
.scrub__hint{
  position:absolute;left:12px;bottom:12px;font-size:12px;letter-spacing:.02em;
  background:rgba(0,0,0,.55);color:#fff;padding:7px 12px;border-radius:999px;
  transition:opacity .3s var(--ease);pointer-events:none;
}
.scrub__hint.off{opacity:0}
.botbig__b h3{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.015em}
.botbig__b p{font-size:clamp(15px,1.2vw,17px);line-height:1.58;color:rgba(255,255,255,.76)}
.botbig__b p + p{margin-top:12px}
.botbig__b .bot__a{width:56px;height:56px;border-radius:50%;margin-bottom:14px}

.bots__g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);margin-top:clamp(32px,4vw,56px)}
.bot{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid rgba(255,255,255,.16);padding:clamp(18px,2vw,26px);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.bot:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.bot__a{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover}
.bot__b h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.bot__u{font-size:13px;color:var(--red);font-weight:600;margin:2px 0 10px;letter-spacing:.01em}
.bot__b p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.76)}
.bot__l{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#fff;padding:11px 0}
.bot__l:hover{color:var(--red)}
/* промо-ролик к боту: квадрат 1:1, поэтому кладём в две колонки */
.promo{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:center;margin-top:clamp(32px,4vw,52px);
  border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(28px,3vw,44px);
}
.promo__v{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b0d0f;display:block}
.promo__t h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.015em;margin-bottom:14px}
.promo__t p{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:rgba(255,255,255,.74)}
.promo__t p + p{margin-top:14px}

/* ------------------------------------------------- почему мы
   Красная черта короткая и растёт во всю ширину при наведении: она же
   делит карточки, поэтому рамка не нужна и блок дышит. */
.why{padding:var(--sec) 0;border-top:1px solid var(--line)}
.why__g{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(40px,4.6vw,72px) clamp(28px,3.4vw,56px);
  margin-top:clamp(40px,5vw,68px);
}
.why__c{position:relative;padding-top:28px}
.why__c::before{
  content:'';position:absolute;left:0;top:0;width:44px;height:2px;
  background:var(--red);transition:width .45s var(--ease);
}
.why__c:hover::before{width:100%}
.why__c h3{
  font-size:clamp(19px,1.75vw,24px);font-weight:600;line-height:1.24;
  letter-spacing:-.015em;margin-bottom:16px;max-width:19ch;
}
.why__c p{font-size:16px;line-height:1.68;color:var(--ink-2);max-width:38ch}

/* ------------------------------------------------ технологии */
/* стек ушёл в тёмное: под ним живой фон, который листается мышью */
.stack{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);color:#fff;padding:var(--sec) 0;
  content-visibility:auto;contain-intrinsic-size:auto 700px;
}
.stack::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(22,26,29,.66)}
.stack__g{display:grid;align-content:start;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(32px,4vw,56px)}
.stack__c h3{font-size:19px;font-weight:600;margin-bottom:18px;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 15px;font-size:14px;color:rgba(255,255,255,.92)}
.stack__n{margin-top:clamp(24px,2.6vw,36px);font-size:clamp(16px,1.3vw,18px);color:rgba(255,255,255,.7);max-width:64ch}

/* -------------------------------------------------- контакты */
/* контакты ушли в тёмное: под ними дым, который листается мышью */
.talk{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);color:#fff;padding:var(--sec) 0;
  content-visibility:auto;contain-intrinsic-size:auto 520px;
}
.talk::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(22,26,29,.62)}
.talk__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.talk__p{font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.78);margin-top:22px;max-width:44ch}
/* контакты: закрыты значками, значение появляется по нажатию */
.cc{display:flex;flex-wrap:wrap;gap:10px}
.cc__b{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  min-height:56px;padding:0 18px;border:1px solid var(--line);background:var(--w);
  color:var(--ink);font-size:17px;font-weight:600;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.cc__b svg{width:22px;height:22px;flex:none}
.cc__b:hover{border-color:var(--red);color:var(--red)}
.cc__b--open{background:var(--red);border-color:var(--red);color:#fff}
.cc__b--open:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
/* тёмный вариант значков контактов — на дымном фоне */
.cc--dark .cc__b{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);color:#fff}
.cc--dark .cc__b:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cc--dark .cc__b--open{background:var(--red);border-color:var(--red);color:#fff}
.cc__note{margin-top:18px;font-size:15px;color:rgba(255,255,255,.68);max-width:44ch}

.cc--hdr{margin-left:auto;gap:6px}
.cc--hdr .cc__b{min-height:44px;padding:0 12px;border-color:transparent;font-size:15px}
.cc--hdr .cc__b svg{width:19px;height:19px}
.cc--hdr .cc__b:hover{border-color:var(--line)}

.cc--foot{margin-top:14px}
.cc--foot .cc__b{
  min-height:44px;padding:0 14px;font-size:15px;
  background:transparent;border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.86);
}
.cc--foot .cc__b:hover{border-color:#fff;color:#fff}
.cc--foot .cc__b--open{background:var(--red);border-color:var(--red);color:#fff}

/* ---------------------------------------------------- подвал */
.foot{background:var(--dark);color:#fff;padding-top:clamp(48px,6vw,80px)}
.foot__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-bottom:clamp(40px,5vw,64px)}
.foot__city{font-size:20px;font-weight:600;margin-bottom:16px}
.foot__l p{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:6px}
.foot__l p a{display:inline-block;padding:6px 0}
.foot__l a:hover{color:#fff}
.foot__req{margin-top:22px !important;line-height:1.75;color:rgba(255,255,255,.55) !important}
.foot__n{display:flex;flex-wrap:wrap;gap:16px clamp(20px,3vw,40px);justify-content:flex-end;align-content:start}
.foot__n a{font-size:clamp(18px,1.7vw,22px);font-weight:600;padding:9px 0;display:inline-block}
.foot__n a:hover{color:var(--red)}
.foot__b{
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:22px 0;font-size:13px;color:rgba(255,255,255,.5);
}
.foot__made{flex:1 1 260px}
.logo--f .logo__plate{height:44px;min-width:88px;font-size:20px}

/* -------------------------------------------------- движение */
/* Прячем ТОЛЬКО если JS жив (класс js ставится инлайном в <head>).
   Иначе при отключённом или упавшем JS половина страницы — пустое место. */
.js [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-rise].on{opacity:1;transform:none}

/* ------------------------------------------------- адаптивность */
@media (max-width:1100px){
  .proof__row{grid-template-columns:repeat(3,1fr);gap:28px 0}
  .why__g{grid-template-columns:repeat(2,1fr)}
  .cl,.cl--rev{grid-template-columns:1fr}
  .cl--rev .cl__v{order:0}
  .botbig{grid-template-columns:1fr}
  .bots__g{grid-template-columns:1fr}
  .promo{grid-template-columns:1fr}
}
@media (max-width:920px){
  .menu__in{grid-template-columns:1fr;gap:32px;padding-top:calc(var(--hdr) + 24px);align-items:start}
  .menu a{font-size:clamp(26px,7.4vw,34px)}
  .menu__side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px;justify-content:flex-start}
  .cc--hdr .cc__b{padding:0 9px}
  .cc--hdr .cc__b span{display:none}
  .hero__in,.about__in,.serv__in,.talk__in,.foot__in{grid-template-columns:1fr}
  .serv__l{position:static}
  /* герой на телефоне не должен распирать экран: раньше 897 px при экране 844,
     и ряд цифр резался ровно посередине — читается как поломка */
  .hero{min-height:0;padding-top:clamp(20px,4vw,48px)}
  .hero__in{padding-block:18px}
  .hero__h{margin-bottom:20px}
  .hero__lead{margin-bottom:20px}
  .hero__nums{grid-template-columns:1fr;gap:10px;padding:14px 0 16px}
  .lst a{display:inline-block;padding:6px 0}
  .hero__nums div{display:flex;align-items:baseline;gap:12px}
  .hero__nums dd{margin-top:0;max-width:none}
  .foot__n{justify-content:flex-start}
  .case__h{max-width:none}
}
@media (max-width:600px){
  .proof__row{grid-template-columns:1fr;gap:24px}
  .why__g{grid-template-columns:1fr}
  .proof__c{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:18px 0 0}
  .stack__g{grid-template-columns:1fr}
  .logo__plate{min-width:96px;font-size:23px;padding:0 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js [data-rise]{opacity:1;transform:none}
}