/* АИС МИДИО — лендинг. Макет 1440 px; страница масштабируется на ширину окна переменной --k. */
:root{
  --k:1;            /* ширина окна / 1440 — масштаб всех секций */
  --s:1;            /* масштаб первых двух экранов: ещё и по высоте окна */
  --ox:0;           /* отступ слева у масштабированной сцены */
  --hy:91.15;       /* вертикальное положение шапки (дизайн-пиксели) */
  --red:#C1132B;--red-d:#A70017;--ink:#14171C;--ink-2:#0B0D10;
  --g-400:#979797;--g-500:#8A909B;--g-600:#646464;--g-700:#5A606B;
}
*{box-sizing:border-box}
html{background:#F6F6F6;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:#F6F6F6;color:var(--ink);font-family:Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- секции: фон на всю ширину, макет 1440 внутри ---------- */
.sec{position:relative;width:100%;height:calc(var(--h) * var(--k) * 1px);overflow:hidden}
.sec-in{position:absolute;left:50%;top:0;width:1440px;height:calc(var(--h) * 1px);margin-left:-720px;transform:scale(var(--k));transform-origin:50% 0}
.n{position:absolute;box-sizing:border-box}
.n .tl{position:absolute;left:0;margin:0}
.n .im{position:absolute;display:block;pointer-events:none;max-width:none}
.n .sv{position:absolute;left:0;top:0;pointer-events:none}
.sec a.n,.sec button.n,.hdr a.n{display:block;cursor:pointer}
.sec button.n{padding:0;border:0;background-clip:padding-box}

/* ---------- шапка ---------- */
/* шапка едет через top, а не transform: анимированный translate3d со scale выносит её в отдельный слой,
   и логотип с иконкой телефона на «стеклянных» подложках мылятся при прокрутке */
.hdr{position:fixed;left:calc(var(--ox) * 1px);top:calc(var(--hy) * var(--s) * 1px);width:1440px;height:42px;z-index:100;transform-origin:0 0;
  transform:scale(var(--s));transition:top .55s cubic-bezier(.2,.7,.2,1)}
.hdr-in{position:absolute;left:89px;top:0;width:1265px;height:42px}
.hdr-in>:not(.logo){transform:translateX(calc((var(--k) - var(--s)) / var(--s) * 1263.64px))}
.hdr .glass{background:rgba(210,210,210,.2)!important;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:none!important;border-radius:46px}
.hdr .logo-pl{background:rgba(193,19,43,.12)!important}
.hdr a.nav .tl{color:#979797!important;transition:color .2s;white-space:nowrap}
.hdr a.nav.on .tl,.hdr a.nav:hover .tl{color:#C1132B!important}

/* ---------- первый и второй экран ---------- */
#stage-sec{position:relative;width:100%;height:calc(1896.764px * var(--s));overflow:hidden;
  background:linear-gradient(180deg,#F6F6F6 0,#F6F6F6 536px,#E2E2E2 1174.364px,#E0E0E0 1506.364px,#FFFFFF 1774.364px,#FFFFFF 1896.764px)}
#stage{position:absolute;left:calc(var(--ox) * 1px);top:0;width:1440px;height:1896.764px;transform-origin:0 0;transform:scale(var(--s))}
#stage>*{position:absolute}
#stage .bg{left:0;top:0;width:1440px;height:1896.764px}
#stage .bg i{position:absolute}
#stage .t{position:absolute;display:flex;flex-direction:column;justify-content:center;margin:0;word-wrap:break-word}
#scene{left:0;top:0;width:1440px;height:1896.764px;pointer-events:none;z-index:10}
#scene .pc{position:absolute;left:0;top:0;transform-origin:0 0;background-repeat:no-repeat;background-size:100% 100%;will-change:transform,opacity}
#stage h1,#stage h2{font-weight:400}
#stage p.t,#stage h2.t,#stage .hd{z-index:30}
#stage .hd{left:0;top:0;margin:0}
#stage .eyebrow{left:0;top:0;z-index:30}
#stage .eyebrow b{position:absolute;display:block;width:24px;height:1px;background:#979797}
.btn{display:flex;align-items:center;justify-content:center;border-radius:3000px;background:var(--red);color:#fff;z-index:40;transition:background-color .25s}
.btn:hover{background:var(--red-d)}
.card{z-index:50;border-radius:12.35px;box-shadow:0 4px 17.2px rgba(0,0,0,.32);-webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15);background:rgba(246,244,244,.18);opacity:0;will-change:opacity,transform}
.card>*{position:absolute}
.card .qimg{background-repeat:no-repeat;background-size:100% 100%}
.a0{background-image:url(../assets/hero/a0.webp)}.a1{background-image:url(../assets/hero/a1.webp)}.a2{background-image:url(../assets/hero/a2.webp)}
.a3{background-image:url(../assets/hero/a3.webp)}.a4{background-image:url(../assets/hero/a4.webp)}.a5{background-image:url(../assets/hero/a5.webp)}
.a6{background-image:url(../assets/hero/a6.webp)}.a7{background-image:url(../assets/hero/a7.webp)}.a8{background-image:url(../assets/hero/a8.webp)}
.a9{background-image:url(../assets/hero/a9.webp)}.a10{background-image:url(../assets/hero/a10.webp)}.a11{background-image:url(../assets/hero/a11.webp)}
.a12{background-image:url(../assets/hero/a12.webp)}.a13{background-image:url(../assets/hero/a13.webp)}.a14{background-image:url(../assets/hero/a14.webp)}
.a15{background-image:url(../assets/hero/a15.webp)}.a16{background-image:url(../assets/hero/a16.webp)}.a17{background-image:url(../assets/hero/a17.webp)}
.a18{background-image:url(../assets/hero/a18.webp)}.a19{background-image:url(../assets/hero/a19.webp)}
/* сетка первых экранов — линии внутри масштабируемой сцены, чтобы квадраты и линии не расходились на дробных масштабах */
#stage .sgrid{left:-2500px;top:0;width:6440px;height:1896.764px;pointer-events:none;overflow:visible}

/* сетка макета продолжается за пределы 1440 px: на широких экранах по краям секции она тоже есть.
   Слой рисуется только вне колонки макета — внутри остаётся нарисованная в макете сетка. Клетка 90,36 px макета масштабируется вместе со страницей */
.sec:has(> .sec-in > .grid)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(151,151,151,.2) calc(1px * var(--k)),transparent 0),linear-gradient(rgba(151,151,151,.2) calc(1px * var(--k)),transparent 0);
  background-size:calc(90.36px * var(--k)) calc(90.36px * var(--k));
  background-position:calc(50% - 720px * var(--k) - .5px * var(--k)) calc(-.5px * var(--k));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(50% - 720px * var(--k)),transparent 0,transparent calc(50% + 720px * var(--k)),#000 0);
  mask-image:linear-gradient(90deg,#000 calc(50% - 720px * var(--k)),transparent 0,transparent calc(50% + 720px * var(--k)),#000 0)}

/* карточка фигуры: подпись «12 систем» — ровно по центру плашки (в макете строка 10 px в блоке 15 px, текст уезжал вверх) */
.card>span.t:last-child{top:99.63px!important;height:15px!important;line-height:15px!important}