@font-face{
  font-family:'Ultima';
  src:url("../fonts/ultima.a6a28911930f.woff2") format('woff2');
  font-weight:700 950;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roboto Flex';
  src:url("../fonts/roboto-flex-cyrillic.60f4eaa90576.woff2") format('woff2');
  font-weight:300 1000;font-stretch:100%;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Roboto Flex';
  src:url("../fonts/roboto-flex-latin.29c5829e6a5b.woff2") format('woff2');
  font-weight:300 1000;font-stretch:100%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.robo{
  --paper:#FBFBF9;
  --white:#FFFFFF;
  --sky:#E5F6FF;
  --sky-2:#F2FAFF;

  --blue:#61B8F2;          /* фирменный синий robo.ooo: заливка кнопок и полей, текст на нём — белый */
  --blue-hover:#42AAF0;    /* ховер кнопок на robo.ooo */
  --blue-deep:#1186D4;
  --blue-field:#61B8F2;    /* поле = фирменный синий robo.ooo */
  --blue-field-2:#0D1520;  /* чернильный якорь robo.ooo: футер */
  --blue-text:#0E6BAA;     /* мелкий синий текст на белом, AA 5,68:1 */
  --yellow:#FFF705;

  --ink:#0D1520;
  --text:#1D2228;
  --muted:#4E677D;
  --dim:#5A7183;

  --line:rgba(13,21,32,.11);
  --line-2:rgba(13,21,32,.20);
  --line-w:rgba(255,255,255,.34);
  --glass:rgba(255,255,255,.72);
  --shadow-c:rgba(13,45,72,.13);

  --r-stage:34px;
  --r-card:20px;
  --r-chip:14px;
  --r-pill:999px;

  --container:1520px;
  --gutter:clamp(20px,4.2vw,64px);
  /* polish: стык двух секций 126px на десктопе и 96px на телефоне вместо 207/194 */
  --section:clamp(56px,7vh,96px);

  --ease:cubic-bezier(.22,.61,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ровно два стека robo.ooo, фолбэк Arial */
  --f-display:Ultima,Arial,sans-serif;
  --f-text:'Roboto Flex',Arial,sans-serif;
}

/* страница живёт в одном светлом мире: фон хоста красим явно */
html,body{margin:0;padding:0;background:#FBFBF9;color:#1D2228;color-scheme:light}
/* луч подиума и подрез видео выходят за правый край; clip (не hidden) не ломает sticky-шапку */
html{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.robo :where(*,*::before,*::after){box-sizing:border-box}
.robo :where(h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd,blockquote){margin:0;padding:0}
.robo :where(ul,ol){list-style:none}
.robo :where(a){color:inherit;text-decoration:none}
.robo :where(button,input,textarea,select){font:inherit;color:inherit;background:none;border:0}
.robo :where(img,svg,video){display:block;max-width:100%}
.robo :where(img){height:auto}
.robo :where(code,kbd,samp){font-family:var(--f-text);font-variant-numeric:tabular-nums;font-size:.94em}
.robo :where(table){border-collapse:collapse;width:100%}

.robo{
  font-family:var(--f-text);
  font-variation-settings:'wght' 420;
  font-size:18.5px;
  line-height:1.62;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  position:relative;
}
.robo ::selection{background:var(--blue);color:#fff}
.robo{scrollbar-color:#BFD6E6 var(--paper);accent-color:var(--blue);caret-color:var(--blue-deep)}
.robo *::-webkit-scrollbar{width:11px;height:11px}
.robo *::-webkit-scrollbar-track{background:var(--paper)}
.robo *::-webkit-scrollbar-thumb{background:#C4D9E8;border-radius:99px;border:3px solid var(--paper)}
.robo *::-webkit-scrollbar-thumb:hover{background:#9FC1D8}
.robo :where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--blue-deep);outline-offset:3px;border-radius:6px;
}
.on-blue :where(a,button,input,textarea,summary,[tabindex]):focus-visible{outline-color:#fff}
/* липкой остаётся только шапка: topbar в отступ якоря не входит, иначе над секцией пустая полоса */
.robo{--head:76px}
/* без JS меню переносится второй строкой и шапка выше: точное значение потом уточнит скрипт */
@media (max-width:1180px){.robo:not(.js){--head:132px}}
.robo section[id],.robo .shots__slide[id]{scroll-margin-top:var(--head,76px)}

.wrap{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.section{padding-block:var(--section);position:relative}
@media (max-width:640px){.section{--section:48px}}
.section--tight{padding-block:clamp(40px,5vh,64px)}
/* блок без заголовка продолжает предыдущий раздел: без :has() он просто отобьётся дальше */
.section--cont{padding-block-start:0}
.section:has(+ .section--cont){padding-block-end:clamp(22px,2.6vh,34px)}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}
.section--sky{background:var(--sky-2)}

.d1,.d2,.d3{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.d1{font-size:clamp(31px,min(3.75vw,5.7vh),60px);line-height:1.05;letter-spacing:-.028em}
.d2{font-size:clamp(34px,4.4vw,66px);line-height:1.0;letter-spacing:-.028em}
.d3{font-size:clamp(23px,2.1vw,33px);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.45vw,23px);line-height:1.58;color:var(--muted);max-width:56ch;font-variation-settings:'wght' 400}
.body{max-width:68ch;color:var(--muted)}
.mono{font-family:var(--f-text);font-variant-numeric:tabular-nums;font-variation-settings:'wght' 620}

.cue{
  font-family:var(--f-text);font-size:11.5px;font-variation-settings:'wght' 600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  line-height:1.3;   /* капслочная подпись наследовала 1.62 от текста и в две строки зияла */
}

.on-blue{color:#fff}
.on-blue .d1,.on-blue .d2,.on-blue .d3{color:#fff}
.on-blue .lead{color:#fff;opacity:.92}
.on-blue .cue{color:#fff;opacity:.85}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:15.5px;letter-spacing:-.005em;
  padding:16px 28px;min-height:56px;line-height:1.25;border-radius:var(--r-pill);
  transition:transform .28s var(--ease),background-color .28s var(--ease),
             border-color .28s var(--ease),box-shadow .28s var(--ease),color .28s var(--ease);
  cursor:pointer;white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{
  background:var(--blue);color:#fff;
  box-shadow:0 14px 30px -14px rgba(17,134,212,.68);
}
.btn--primary:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(17,134,212,.85)}
.btn--primary:active{transform:translateY(0)}
.btn--primary[disabled]{opacity:.6;pointer-events:none}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue-deep);color:var(--blue-text);transform:translateY(-2px)}
.btn--sm{padding:12px 22px;min-height:44px;font-size:14px}
.on-blue .btn--primary{background:#fff;color:var(--blue-field);box-shadow:0 14px 30px -14px rgba(4,40,68,.55)}
.on-blue .btn--primary:hover{background:var(--sky)}
/* кнопка в форме — самая яркая точка страницы */
.form .btn--primary{background:var(--blue);color:#fff;box-shadow:0 16px 34px -14px rgba(97,184,242,.85)}
.form .btn--primary:hover{background:var(--blue-hover);box-shadow:0 22px 44px -16px rgba(97,184,242,.95)}
.on-blue .btn--ghost{border-color:var(--line-w);color:#fff}
.on-blue .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

.link{
  display:inline-flex;align-items:center;gap:8px;color:var(--blue-text);
  font-family:var(--f-display);font-weight:700;font-size:15px;
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.link svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.link:hover{color:var(--blue-deep);gap:12px}
.link:hover svg{transform:translate(2px,-2px)}
.on-blue .link{color:#fff}
.on-blue .link:hover{color:var(--sky)}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-text);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--r-pill);
}
.badge--yellow{background:var(--yellow);color:#101300}
.badge--glass{background:var(--glass);border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(10px)}
.badge--ink{background:var(--ink);color:#fff}

.stage{position:relative;isolation:isolate;background:var(--sky-2)}
/* кадр под видео: сцена не пустеет, если автозапуск заблокирован или включён режим экономии */
.stage__media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url("../img/stage-poster.5ec45062926f.webp") center/cover no-repeat}
.stage__video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.28) brightness(1.05) contrast(1.04);
  transform:scale(1.06);
  transition:opacity 1.5s var(--ease-out);
}
.robo.js .stage__video:not(.is-lit){opacity:0}
.stage__tint{position:absolute;inset:0;background:#61B8F2;mix-blend-mode:color;opacity:.62}
.stage__grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,transparent 46%);mix-blend-mode:screen;opacity:.9}
.stage__horizon{
  position:absolute;inset:0;
  background:
    radial-gradient(64% 54% at 71% 72%, rgba(97,184,242,.44) 0%, rgba(97,184,242,.13) 44%, transparent 72%),
    radial-gradient(120% 66% at 50% 116%, rgba(17,134,212,.20) 0%, transparent 60%);
}
.stage__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(251,251,249,.97) 0%, rgba(251,251,249,.90) 30%, rgba(251,251,249,.36) 58%, rgba(251,251,249,.16) 78%, rgba(251,251,249,.46) 100%),
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.10) 22%, rgba(255,255,255,0) 52%, rgba(251,251,249,.72) 90%, var(--paper) 100%);
}
.stage__grain{
  position:absolute;inset:0;opacity:.035;pointer-events:none;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage__inner{position:relative;z-index:2}
.stage--deep .stage__video{filter:saturate(.22) brightness(.86) contrast(1.1)}
.stage--deep .stage__tint{background:var(--blue);opacity:.92}
.stage--deep .stage__grade{background:linear-gradient(180deg,rgba(66,170,240,.42),transparent 58%);mix-blend-mode:multiply;opacity:1}
.stage--deep .stage__horizon{background:radial-gradient(62% 54% at 24% 60%, rgba(255,255,255,.30) 0%, transparent 68%)}
.stage--deep .stage__scrim{
  background:
    linear-gradient(90deg, rgba(97,184,242,.92) 0%, rgba(97,184,242,.78) 40%, rgba(97,184,242,.58) 100%),
    linear-gradient(180deg, rgba(66,170,240,.55) 0%, rgba(97,184,242,.16) 26%, rgba(66,170,240,.40) 100%);
}

.plot{
  position:fixed;left:12px;top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:2px;
  padding:13px 9px;border-radius:16px;
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);contain:layout style;
  box-shadow:0 18px 44px -22px var(--shadow-c);
}

.plot__row{
  display:flex;align-items:center;padding:6px 6px;border-radius:9px;
  cursor:pointer;transition:background-color .3s var(--ease);
}
.plot__row:hover{background:rgba(97,184,242,.10)}
.plot__lamp{width:5px;height:16px;border-radius:3px;background:rgba(13,21,32,.14);flex:none;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.plot__n{display:none}
.plot__name{
  font-family:var(--f-text);font-size:11px;font-variation-settings:'wght' 600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  text-align:left;width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:width .3s var(--ease),margin-left .3s var(--ease),opacity .22s var(--ease),color .22s var(--ease);
}
.plot:hover .plot__name{width:104px;margin-left:11px;opacity:1}
@media (min-width:1240px){.plot{display:flex}}
.plot__row.is-on .plot__lamp{background:var(--blue);box-shadow:0 0 12px 1px rgba(97,184,242,.85)}
.plot__row.is-on .plot__name{color:var(--ink)}

.topbar{border-bottom:1px solid var(--line);background:var(--white);position:relative;z-index:40}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:38px}
.topbar__sep{color:var(--line-2)}
.topbar__in > .cue{min-width:0}
.topbar__phone{color:var(--blue-text);white-space:nowrap;flex:none}
@media (max-width:860px){.topbar__hide{display:none}}
.tick{display:inline-flex;align-items:center;gap:9px;flex:none}
.tick__label{white-space:nowrap}
.tick__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.tick__dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:.7;animation:tick-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes tick-ping{75%,100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.tick__dot::after{animation:none}}
.tick__value{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tick__note{white-space:nowrap}
/* пояснение к счётчику — самое длинное в строке, ниже 1240px оно налезает на телефон */
@media (max-width:1240px){.tick__note{display:none}}
@media (max-width:600px){.tick__label{display:none}}
/* на узком экране подпись занимает две строки и ломает номер — уступаем место счётчику и телефону */
@media (max-width:860px){
  .topbar__in > .cue:first-child{display:none}
  .topbar__in{justify-content:flex-end}
}

.head{
  position:sticky;top:0;z-index:50;padding-top:14px;padding-bottom:14px;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* класс is-stuck ставит скрипт: без него шапка держит фон постоянно, иначе контент просвечивает */
.head.is-stuck,.robo:not(.js) .head{background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(1.4);border-bottom-color:var(--line)}
.head.is-stuck{box-shadow:0 14px 34px -28px var(--shadow-c)}
.head__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand__word{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin-left:auto}
.nav a{font-size:16px;color:var(--muted);position:relative;padding-block:6px;transition:color .28s var(--ease)}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue-deep);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1)}
.head__cta{margin-left:auto}
@media (min-width:1181px){.head__cta{margin-left:0}}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;align-items:center;justify-content:center;cursor:pointer}
.burger svg{stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}
/* без JS бургер ничего не открывает: меню просто переносится строкой под шапку */
/* семь пунктов меню с кнопкой не помещаются в строку уже ниже 1180px */
@media (max-width:1180px){
  .robo.js .nav{display:none}
  .robo.js .burger{display:flex}
  .nav{order:3;flex-basis:100%;margin-left:0;flex-wrap:wrap;gap:8px 18px;padding-top:4px}
}
@media (max-width:620px){.head__cta{padding:10px 15px;font-size:12.5px}}
@media (max-width:480px){.brand__word{display:none}.head__in{gap:12px}}

.hero{min-height:calc(100svh - var(--chrome,100px));display:flex;flex-direction:column;padding-bottom:0;position:relative;z-index:2}
.hero__grid{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  align-items:center;gap:clamp(24px,3vw,56px);
  padding-top:clamp(24px,2.4vh,40px);padding-bottom:clamp(18px,2.6vh,36px);
}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:clamp(10px,2vh,22px);align-content:center}}

.hero__l{max-width:720px;align-self:center}

.hero__lead{margin-top:clamp(16px,3.2vh,44px);font-size:clamp(18px,min(1.45vw,2.1vh),24px)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,4.2vh,58px)}

.rise{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.robo.js .rise{opacity:0;transform:translateY(18px)}
.robo.is-lit .rise{opacity:1;transform:none}
.robo.is-lit .rise--1{transition-delay:.34s}
.robo.is-lit .rise--2{transition-delay:.46s}
.robo.is-lit .rise--3{transition-delay:.58s}

/* авто-строка тянулась под картинку, и max-height:100% терял точку отсчёта — робот лез на .proof */
.podium{position:relative;height:clamp(340px,58vh,640px);display:grid;place-items:center;
  grid-template-rows:minmax(0,1fr);isolation:isolate;align-self:center;margin-bottom:-18px}
.podium .podium__robot,.podium .podium__refl{width:auto;max-width:min(100%,660px);max-height:100%}
/* в одну колонку подиум брал высоту от ширины колонки и раздувался до ~850px */
@media (max-width:1000px){
  .podium{aspect-ratio:auto;height:clamp(210px,34vh,430px);min-height:0;margin-top:4px;margin-bottom:0;
    align-self:auto;width:100%}
  .podium .podium__robot,.podium .podium__refl{width:auto;max-width:min(100%,400px);max-height:100%}
}
.podium__beam{
  position:absolute;left:50%;top:-6%;width:132%;height:118%;transform:translateX(-50%);
  background:radial-gradient(50% 46% at 50% 46%, rgba(255,255,255,.72) 0%, rgba(214,239,255,.42) 38%, transparent 70%);
  filter:blur(6px);transition:opacity 1.4s var(--ease-out) .3s;
}
.robo.js .podium__beam{opacity:0}
.robo.is-lit .podium__beam{opacity:1}
.podium__disc{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  width:78%;aspect-ratio:1/.3;border-radius:50%;
  background:radial-gradient(closest-side, rgba(97,184,242,.55), rgba(97,184,242,.16) 58%, transparent 100%);
  filter:blur(11px);
  transition:opacity 1.2s var(--ease-out) .5s;
}
.robo.js .podium__disc{opacity:0}
.robo.is-lit .podium__disc{opacity:1}

.podium__robot{
  position:relative;z-index:3;width:min(100%,760px);
  filter:drop-shadow(0 40px 44px rgba(13,45,72,.30)) drop-shadow(0 0 40px rgba(255,255,255,.5));
  transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out);
}
.robo.js .podium__robot{opacity:0;transform:translateY(26px) scale(.985)}
.robo.is-lit .podium__robot{opacity:1;transform:none}
.podium__refl{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%) scaleY(-1);
  width:min(100%,760px);z-index:1;opacity:.20;
  -webkit-mask-image:linear-gradient(to top,transparent 6%,rgba(0,0,0,.45) 46%,#000 100%);
  mask-image:linear-gradient(to top,transparent 6%,rgba(0,0,0,.45) 46%,#000 100%);
  filter:blur(2.5px) saturate(.55) brightness(1.18);
  transition:opacity 1.2s var(--ease-out) .6s;
}
.robo.js .podium__refl{opacity:0}
.robo.is-lit .podium__refl{opacity:.20}

.chip{
  position:absolute;z-index:4;display:flex;flex-direction:column;gap:3px;
  padding:12px 16px;border-radius:var(--r-chip);
  background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 20px 40px -20px var(--shadow-c),0 0 0 1px rgba(13,45,72,.05);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.robo.js .chip{opacity:0;transform:translateY(10px)}
.robo.is-lit .chip{opacity:1;transform:none}
.robo.is-lit .chip--a{transition-delay:.9s;animation:float 8s var(--ease) 2s infinite}
.robo.is-lit .chip--b{transition-delay:1.02s;animation:float 9.5s var(--ease) 2.4s infinite}
.robo.is-lit .chip--c{transition-delay:1.14s;animation:float 7.4s var(--ease) 2.8s infinite}
.chip__v{font-family:var(--f-text);font-variation-settings:'wght' 700;font-variant-numeric:tabular-nums;font-size:19px;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.chip__k{font-family:var(--f-text);font-size:11px;line-height:1.3;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.chip--a{left:-2%;top:20%}
.chip--b{right:-1%;top:44%}
.chip--c{left:6%;bottom:16%}
@media (max-width:1000px){.chip--a{left:0;top:12%}.chip--b{right:0;top:40%}.chip--c{left:2%;bottom:10%}}
@media (max-width:520px){.chip{padding:9px 12px}.chip__v{font-size:14px}.chip__k{font-size:10px;letter-spacing:.08em}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);position:relative;z-index:1}
.proof__in{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.proof__in{grid-template-columns:repeat(2,1fr)}}
.proof__c{padding:26px 24px 28px 0;position:relative}
.proof__c+.proof__c{padding-left:24px}
.proof__c+.proof__c::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line)}
@media (max-width:820px){
  .proof__c:nth-child(2n+1)::before{display:none}
  .proof__c:nth-child(2n+1){padding-left:0}
  .proof__c:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (min-width:1001px){.proof__c{padding-top:42px;padding-bottom:34px}.proof__c+.proof__c::before{top:36px;bottom:28px}}
.proof__t{font-family:var(--f-display);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.proof__d{font-size:15.5px;color:var(--muted);margin-top:4px;line-height:1.45}

/* последние строки заголовка и лида стоят на одной линии шрифта, а не на краю своих рамок */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,72px);align-items:last baseline;margin-bottom:clamp(40px,5vh,68px)}
@media (max-width:900px){.shead{grid-template-columns:1fr;gap:18px;align-items:start}}

.prods{display:grid;grid-template-columns:1fr 1.24fr 1fr;gap:20px;align-items:stretch}
@media (max-width:1080px){.prods{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}
/* столбиком линейка уходила на несколько экранов: тот же ряд, но с прокруткой от края до края */
@media (max-width:745px){
  .prods{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80vw,380px);max-width:none;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scroll-padding-inline:var(--gutter);
    /* overflow-x режет и по вертикали: запас сверху под подъём карточки, снизу под её свечение */
    padding:8px var(--gutter) 56px;margin:-8px calc(var(--gutter) * -1) -56px;
  }
  .prods > .prod{scroll-snap-align:start}
  .robo.js .prods{scrollbar-width:none}
  .robo.js .prods::-webkit-scrollbar{display:none;width:0;height:0}
}
.prod{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-stage);padding:28px 28px 26px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 16px 44px -28px var(--shadow-c);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
  overflow:hidden;
}
.prod:hover{transform:translateY(-6px);box-shadow:0 34px 64px -34px var(--shadow-c)}
.prod__pic{position:relative;aspect-ratio:1/.82;display:grid;place-items:center;margin:-4px -8px 14px}
.prod__pic img{width:min(100%,300px);filter:drop-shadow(0 22px 24px rgba(13,45,72,.22))}
.prod__glow{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:74%;aspect-ratio:1/.28;border-radius:50%;background:radial-gradient(closest-side,rgba(97,184,242,.34),transparent);filter:blur(10px)}
.prod__name{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,2.6vw,40px);color:var(--ink);letter-spacing:-.03em;line-height:1}
.prod__for{font-size:16px;color:var(--muted);margin-top:9px;min-height:2.9em}
.prod__specs{margin-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column}
.prod__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.prod__rk{font-family:var(--f-text);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.prod__rv{font-family:var(--f-text);font-variation-settings:'wght' 650;font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.prod__foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}

.prod--lit{
  background:var(--blue);
  border-color:transparent;
  box-shadow:0 44px 84px -40px rgba(97,184,242,.75);
  margin-block:-18px;padding-top:40px;
}
@media (max-width:1080px){.prod--lit{margin-block:0;padding-top:28px}}
.prod--lit .prod__name{color:#fff}
.prod--lit .prod__for{color:#fff;font-variation-settings:'wght' 450}
.prod--lit .prod__rk{color:#fff;font-variation-settings:'wght' 650}
.prod--lit .prod__rv{color:#fff}
.prod--lit .prod__specs,.prod--lit .prod__row{border-color:rgba(255,255,255,.32)}
.prod--lit .prod__glow{background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent)}
.prod--lit .prod__pic img{width:min(100%,340px);filter:drop-shadow(0 26px 30px rgba(6,45,75,.36))}
.prod--lit .link{color:#fff}
.prod--lit .link:hover{color:var(--sky)}
.prod--lit .badge--glass{background:rgba(255,255,255,.92);border-color:#fff;color:var(--blue-field)}

.prod--ghost{background:transparent;border:1px dashed var(--line-2);box-shadow:none}
.prod--ghost .prod__pic img{filter:grayscale(1) contrast(.92) drop-shadow(0 18px 20px rgba(13,45,72,.14));opacity:.55}
.prod--ghost .prod__glow{opacity:.2}
.prod--ghost:hover{transform:none;box-shadow:none}
.prod--ghost .prod__name{color:var(--muted)}

.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(20px,3.4vw,56px);align-items:center}
.case+.case{margin-top:clamp(48px,6vh,88px);padding-top:clamp(48px,6vh,88px);border-top:1px solid var(--line)}
.case--flip .case__media{order:2}
@media (max-width:900px){.case{grid-template-columns:1fr;gap:22px}.case--flip .case__media{order:0}}
.case__media{position:relative;border-radius:var(--r-stage);overflow:hidden;aspect-ratio:16/11;background:var(--sky);box-shadow:0 30px 60px -34px var(--shadow-c)}
.case__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.case:hover .case__media img{transform:scale(1.04)}
.case__tag{position:absolute;left:16px;top:16px;z-index:2}
.case__title,.case__heading{margin-top:10px}
.case__desc{margin-top:12px;color:var(--muted);max-width:46ch}
.case__metrics{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.metric__v{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.2vw,48px);line-height:1;color:var(--ink);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.metric__k{font-family:var(--f-text);font-size:11px;line-height:1.3;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.case__more{margin-top:24px}

.caseline{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:clamp(40px,5vh,64px);border-top:1px solid var(--line)}
@media (max-width:760px){.caseline{grid-template-columns:1fr}}
.caseline a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);transition:background-color .35s var(--ease)}
.caseline a>*{transition:transform .35s var(--ease)}
.caseline a:hover{background:linear-gradient(90deg,rgba(97,184,242,.12),transparent)}
.caseline a:hover>b{transform:translateX(12px)}
.caseline b{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.caseline span{font-family:var(--f-text);font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}

.fms{background:var(--blue);position:relative;overflow:hidden}
.fms::before{content:'';position:absolute;inset:0;background:radial-gradient(62% 66% at 84% 6%,rgba(255,255,255,.24),transparent 68%);pointer-events:none}
.fms__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,3.6vw,64px);align-items:center;position:relative}
@media (max-width:1040px){.fms__grid{grid-template-columns:1fr;gap:32px}}
.caps{margin-top:30px;border-top:1px solid var(--line-w)}
.caps li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-w);align-items:flex-start}
.caps svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:#fff;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.caps p{font-size:17.5px;color:#fff;text-wrap:pretty}
.fms__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.winshot{
  position:relative;border-radius:24px;overflow:hidden;background:#F2F5F6;
  box-shadow:0 54px 96px -44px rgba(3,32,55,.55);
}
.winshot img{display:block;width:100%;height:auto}

.ledger{border-top:1px solid var(--line)}
.ledger a{
  display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1.05fr) 30px;
  gap:clamp(14px,2.4vw,36px);align-items:center;
  padding:clamp(18px,2.2vh,26px) 0;border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease);
}
.ledger a>*{transition:transform .4s var(--ease)}
.ledger a:hover>.ico,.ledger a:hover>.ledger__n,.ledger a:hover>.ledger__d{transform:translateX(14px)}
@media (max-width:800px){.ledger a{grid-template-columns:28px minmax(0,1fr) 24px}.ledger__d{display:none}}
.ledger a:hover{background:linear-gradient(90deg,var(--sky),rgba(229,246,255,0) 74%)}
.ledger svg.ico{width:24px;height:24px;stroke:var(--blue-deep);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ledger__n{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,2vw,28px);color:var(--ink);letter-spacing:-.025em}
.ledger__d{font-size:16px;color:var(--muted)}
.ledger__a{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;justify-self:end;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.ledger__a svg{width:12px;height:12px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ledger a:hover .ledger__a{background:var(--blue);border-color:var(--blue);transform:translate(2px,-2px)}
.ledger a:hover .ledger__a svg{stroke:#fff}

.proc{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px)}
@media (max-width:980px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proc{grid-template-columns:1fr}}
.proc::before{content:'';position:absolute;left:0;right:0;top:22px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 15px)}
@media (max-width:980px){.proc::before{display:none}}
.step{position:relative;padding-top:52px}
.step__n{
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--white);border:1px solid var(--line-2);
  font-family:var(--f-text);font-variation-settings:'wght' 700;font-size:13.5px;color:var(--ink);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
}
.step:hover .step__n{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 12px 26px -10px rgba(17,134,212,.7)}
/* .step p ниже добавляет отступ сверху, заголовку шага он не нужен */
.step .step__t{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,1.8vw,26px);color:var(--ink);letter-spacing:-.025em;margin-top:0}
.step p{font-size:16px;color:var(--muted);margin-top:9px}
.step__k{margin-bottom:8px}

.trust{position:relative;overflow:hidden}
.trust__in{position:relative}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4vh,52px)}
@media (max-width:980px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tgrid{grid-template-columns:1fr}}
.tcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;display:flex;flex-direction:column;gap:10px;min-height:150px;
  box-shadow:0 16px 40px -30px var(--shadow-c);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.tcard:hover{transform:translateY(-4px);box-shadow:0 28px 54px -30px var(--shadow-c)}
.tcard svg{width:24px;height:24px;stroke:var(--blue-deep);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tcard b{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.tcard span{font-size:15px;color:var(--muted);line-height:1.45}
.tstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:640px){.tstats{grid-template-columns:1fr}}
.tstat{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--r-card);padding:24px 22px}
.tstat--link{display:block;position:relative;cursor:pointer;
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
.tstat--link:hover{transform:translateY(-4px);background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.64)}
.tstat__ext{position:absolute;right:18px;top:18px;width:15px;height:15px;stroke:#fff;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.72;
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.tstat--link:hover .tstat__ext{opacity:1;transform:translate(2px,-2px)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* скип-линк — единственный .vh, который должен проявляться по фокусу */
.vh:focus,.vh:focus-visible{
  position:fixed;left:16px;top:16px;z-index:100;width:auto;height:auto;margin:0;
  padding:12px 18px;overflow:visible;clip:auto;clip-path:none;
  background:var(--white);color:var(--ink);border-radius:var(--r-chip);
  box-shadow:0 18px 44px -22px var(--shadow-c);
}
.tstat b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.2vw,46px);line-height:1;color:#fff;letter-spacing:.03em}
.tstat span{display:block;font-family:var(--f-text);font-size:11.5px;font-variation-settings:'wght' 600;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.9;margin-top:9px}

.know{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.know{grid-template-columns:1fr}}
.kcard{
  border:1px solid var(--line);border-radius:var(--r-card);padding:24px;background:var(--white);
  display:flex;flex-direction:column;gap:8px;min-height:170px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease);
}
.kcard:hover{transform:translateY(-5px);background:var(--sky-2);box-shadow:0 26px 50px -30px var(--shadow-c)}
.kcard b{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.025em}
.kcard p{font-size:16px;color:var(--muted)}
.kcard .link{margin-top:auto}

.lead-stage{display:flex;align-items:center;overflow:hidden}
.lead__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,4vw,72px);align-items:center;padding-block:clamp(56px,7vh,96px)}
@media (max-width:980px){.lead__grid{grid-template-columns:1fr;gap:32px}}
.direct{margin-top:32px;padding-top:24px;border-top:1px solid var(--line-w);display:flex;flex-wrap:wrap;gap:10px 40px}
.direct a{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,1.9vw,27px);color:#fff;letter-spacing:-.02em;transition:color .3s var(--ease)}
.direct a:hover{color:var(--sky)}
.form{
  background:var(--white);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-stage);padding:clamp(24px,3vw,40px);
  box-shadow:0 70px 120px -50px rgba(3,32,55,.7);
}
/* .on-blue .d3 красил заголовок в белый, а карточка формы белая — он пропадал */
.form .d3{color:var(--ink);margin-bottom:20px}
.agree__link{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(14,107,170,.45);transition:text-decoration-color .2s var(--ease)}
.agree__link:hover{text-decoration-color:var(--blue-text)}
.field{position:relative;margin-bottom:14px}
.field input,.field textarea{
  width:100%;padding:16px 18px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font-size:17px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
/* чем уже экран, тем больше строк занимает подсказка: 88px хватало только на две */
.field textarea{min-height:max(88px,200px - 12vw);resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8296A6}
.field input:focus,.field textarea:focus{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px rgba(97,184,242,.16);outline:none}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:520px){.field--2{grid-template-columns:1fr}}
.field--2 .field{margin-bottom:0}
.agree{display:flex;gap:11px;align-items:flex-start;margin:18px 0 20px;font-size:14.5px;color:var(--muted);line-height:1.5;cursor:pointer}
.agree--under{margin:16px 0 0}
.agree input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--blue-deep)}
.agree.is-bad,.agree-wrap.is-bad .agree{color:#B91C1C}
.agree-wrap.is-bad .field__err{display:block}
.form .btn--primary{width:100%;justify-content:center}
.form__note{font-family:var(--f-text);font-size:10.5px;color:var(--dim);margin-top:14px;line-height:1.6;letter-spacing:.03em}
.form__ok{display:none;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:#15803D}
.form__ok.is-on{display:flex}
.form__err{display:none;font-size:13px;color:#B91C1C;margin-top:14px;font-family:var(--f-text);letter-spacing:.03em;line-height:1.5}
.form__err.is-on{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:#DC2626;background:#FEF2F2}
.field__err{display:none;font-size:12px;color:#B91C1C;margin-top:6px;font-family:var(--f-text);letter-spacing:.03em}
.field.is-bad .field__err{display:block}
/* ловушка для ботов: поле есть в DOM и в потоке фокуса не участвует */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fset{border:0;padding:0;margin:0;min-width:0}
.fset+.fset{margin-top:10px}
.fset__t{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);padding:0;margin-bottom:12px}
.field__l{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.stepper{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border-radius:14px;background:var(--paper);border:1px solid var(--line);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.stepper:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(97,184,242,.16)}
.field .stepper input{border:0;background:none;text-align:center;padding:16px 4px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.field .stepper input:focus{box-shadow:none;background:none}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper__b{width:40px;height:40px;margin:5px;border:0;border-radius:50%;background:var(--sky-2);color:var(--blue-text);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background-color .2s var(--ease),color .2s var(--ease)}
.stepper__b:hover{background:var(--blue);color:#fff}
.field.is-bad .stepper{border-color:#DC2626;background:#FEF2F2}

/* ниже мобильного меню (60): открытое меню перекрывает плашку, а не наоборот */
.cookie{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:55;
  width:min(calc(100% - 32px),880px);display:flex;align-items:center;gap:20px;
  padding:16px 20px;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  box-shadow:0 22px 44px -22px var(--shadow-c);font-size:14.5px;line-height:1.5;color:var(--text);
}
.cookie[hidden]{display:none}
.cookie__text p{margin:0}
.cookie__text a{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}
.cookie__ok{flex:none;min-height:46px;padding:12px 26px}
@media (max-width:640px){
  .cookie{bottom:8px;width:calc(100% - 16px);flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px;font-size:13.5px}
  .cookie__ok{justify-content:center}
}

.foot{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(104deg,#FBFDFE 0%,#F1F7FC 42%,#E4EFF8 100%);
  border-top:1px solid var(--line);
  padding-top:clamp(48px,6vh,72px);padding-bottom:36px;color:var(--text);
}
.foot::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 130% at 74% 40%, rgba(97,184,242,.20) 0%, transparent 68%),
    radial-gradient(38% 120% at 92% 76%, rgba(148,178,203,.26) 0%, transparent 70%),
    radial-gradient(30% 90% at 60% 10%, rgba(255,255,255,.9) 0%, transparent 72%);
  filter:blur(2px);
}
.foot>*{position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,38px)}
@media (max-width:1180px){.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot__about{font-size:16px;color:var(--muted);max-width:30ch}
.foot .brand{margin-bottom:14px}
.foot__h{
  font-family:var(--f-text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);opacity:1;margin-bottom:16px;font-variation-settings:'wght' 700;
}
.foot li+li{margin-top:10px}
.foot li a{font-size:16px;color:var(--text);opacity:.8;transition:opacity .2s var(--ease),color .2s var(--ease)}
.foot li a:hover{opacity:1;color:var(--blue-text)}
.foot__bar{
  margin-top:clamp(40px,5vh,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
}
.foot__bar{color:var(--muted);font-size:14.5px}
.foot__bar b{font-family:var(--f-display);font-weight:700;color:var(--blue-text);font-size:16px;letter-spacing:-.01em}
.foot__bar a{color:var(--blue-text);font-size:14.5px;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(14,107,170,.4);opacity:.85;
  transition:opacity .2s var(--ease),text-decoration-color .2s var(--ease)}
.foot__bar a:hover{opacity:1;text-decoration-color:var(--blue-text)}
.foot .foot__contacts a{color:var(--blue-text);opacity:.9}
.foot .foot__contacts a:hover{opacity:1;color:var(--blue-deep)}

/* у карточек своя transition той же специфичности, поэтому reveal объявлен через .robo */
.robo .rv{transition:opacity .7s cubic-bezier(.215,.61,.355,1),transform .7s cubic-bezier(.215,.61,.355,1)}
.robo.js .rv{opacity:0;transform:translateY(26px)}
.robo .rv.is-in{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 80ms)}

@media (prefers-reduced-motion:reduce){
  .robo *,.robo *::before,.robo *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rise,.rv,.chip,.podium__robot,.podium__beam,.podium__disc{opacity:1;transform:none}
  .podium__refl{opacity:.20}
  .stage__video{opacity:1}
}

.head__in{position:relative}
@media (max-width:1180px){
  .head .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:60;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
    padding:8px;box-shadow:0 28px 56px -26px var(--shadow-c);
  }
  .head .nav.is-open a{padding:13px 14px;border-radius:10px;font-size:16px;color:var(--text)}
  .head .nav.is-open a::after{display:none}
  .head .nav.is-open a:hover,.head .nav.is-open a[aria-current]{background:var(--sky-2);color:var(--ink)}
}
.plot[hidden]{display:none !important}

/* дорожка листается нативным скроллом: без JS слайдер остаётся рабочим */
.shots{position:relative;isolation:isolate;min-width:0}

.shots__frame{
  position:relative;border-radius:20px;overflow:hidden;background:var(--white);
  aspect-ratio:1400/1273;   /* высота кадра не зависит от того, декодировалась ли картинка */
  box-shadow:0 46px 84px -40px rgba(3,32,55,.55), 0 0 0 1px rgba(255,255,255,.42);
}
.shots__track{
  display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.robo.js .shots__track{scrollbar-width:none}
.robo.js .shots__track::-webkit-scrollbar{display:none;width:0;height:0}
.shots__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.shots__slide img{display:block;width:100%;height:100%;object-fit:cover}

/* стрелки — стекло поверх кадра; без JS они ничего не делают, поэтому их нет */
.shots__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:none;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.86);border:1px solid rgba(13,21,32,.10);
  box-shadow:0 12px 28px -12px rgba(3,32,55,.55);
  backdrop-filter:blur(12px) saturate(1.3);
  transition:background-color .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease);
}
.robo.js .shots:not([data-single="1"]) .shots__nav{display:grid}
.shots__nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.shots__nav:active{transform:translateY(-50%) scale(.96)}
.shots__nav[disabled]{opacity:.32;cursor:default;pointer-events:none}
.shots__nav svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shots__nav--prev{left:14px}
.shots__nav--next{right:14px}
@media (max-width:600px){.shots__nav{width:38px;height:38px}.shots__nav--prev{left:8px}.shots__nav--next{right:8px}}

.shots__bar{display:flex;align-items:center;gap:16px;margin-top:16px}
.shots__cap{
  flex:1;min-width:0;font-family:var(--f-text);font-size:14.5px;color:#fff;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s var(--ease);
}
/* обновлять их без скрипта нечем, а дорожка листается нативным скроллом */
.robo:not(.js) .shots__cap,.robo:not(.js) .shots__count{visibility:hidden}
.shots__dots{display:flex;gap:8px;flex:none;align-items:center}
.shots__dot{
  width:8px;height:8px;border-radius:50%;cursor:pointer;padding:0;flex:none;
  background:rgba(255,255,255,.45);transition:background-color .3s var(--ease),width .3s var(--ease);
}
.shots__dot[aria-current="true"]{background:#fff;width:24px;border-radius:99px}
.shots__count{
  flex:none;font-family:var(--f-text);font-size:12.5px;font-variation-settings:'wght' 600;
  letter-spacing:.08em;color:#fff;opacity:.75;font-variant-numeric:tabular-nums;
}

.shots[data-single="1"] .shots__nav,
.shots[data-single="1"] .shots__dots,
.shots[data-single="1"] .shots__count{display:none}

@media (max-width:640px){
  .shots__bar{flex-wrap:wrap;gap:10px 12px;margin-top:14px}
  .shots__cap{flex:1 0 100%;order:2;white-space:normal;text-overflow:clip;
    font-size:13.5px;line-height:1.45}
  .shots__dots{order:1}
  .shots__count{order:1;margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .shots__track{scroll-behavior:auto}
}

/* сцены лежат друг на друге в одной ячейке грида: высота блока равна самой высокой, при смене ничего не прыгает */
.scnstack{display:grid;min-width:0;gap:clamp(28px,5vh,64px)}
.scn{
  min-width:0;
  opacity:1;visibility:visible;transform:none;
  transition:opacity .46s var(--ease-out),transform .52s var(--ease-out),visibility 0s;
}
/* без скрипта переключать сцены нечем: они идут в поток и все читаемы */
.robo.js .scnstack{gap:0}
.robo.js .scn{grid-area:1/1}
.robo.js .scn:not(.is-on){
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .40s var(--ease-out),transform .40s var(--ease-out),visibility 0s linear .40s;
}
.robo.js .scn > *{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.robo.js .scn:not(.is-on) > *{opacity:0;transform:translateY(10px)}
.robo.js .scn.is-on > *{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 70ms + 80ms)}

.scn__eye{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-text);font-size:11.5px;font-variation-settings:'wght' 600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-text);
  margin-bottom:clamp(10px,1.7vh,20px);
}
.scn__eye::before{content:'';width:24px;height:1px;background:currentColor;opacity:.55;flex:none}

/* переключать сцены умеет только скрипт: без него рельс — мёртвые кнопки */
.rail{display:none}
.robo.js .rail{
  margin-top:clamp(16px,3.2vh,40px);display:grid;max-width:560px;
  --rail-dur:7s;
}
.rail__i{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 15px;padding:clamp(9px,1.4vh,14px) 0 clamp(9px,1.4vh,14px) 18px;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* дорожка слева: серая — фон, синяя — сколько осталось до автосмены */
.rail__i::before{
  content:'';position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:rgba(13,45,72,.11);
}
.rail__i i{
  position:absolute;left:0;top:5px;width:2px;height:calc(100% - 10px);
  border-radius:2px;background:var(--blue);transform:scaleY(0);transform-origin:top;
}
.rail__i.is-on i{animation:railfill var(--rail-dur) linear forwards}
.rail.is-paused .rail__i.is-on i{animation-play-state:paused}
/* после клика человек ведёт сам: полоса просто заполняется и стоит */
.rail.is-manual .rail__i i{animation:none}
.rail.is-manual .rail__i.is-on i{transform:none;transition:transform .34s var(--ease-out)}
@keyframes railfill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.rail__n{
  grid-column:1;grid-row:1/span 2;align-self:center;
  font-family:var(--f-text);font-size:11px;letter-spacing:.16em;color:var(--dim);
  font-variant-numeric:tabular-nums;transition:color .3s var(--ease);
}
.rail__t{
  grid-column:2;font-family:var(--f-display);font-size:clamp(15px,1.15vw,17.5px);
  line-height:1.25;color:var(--muted);transition:color .3s var(--ease);
}
.rail__s{
  grid-column:2;font-family:var(--f-text);font-size:12.5px;line-height:1.35;
  color:var(--dim);opacity:.7;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.rail__i:hover .rail__t,.rail__i:focus-visible .rail__t{color:var(--ink)}
.rail__i:hover::before,.rail__i:focus-visible::before{background:rgba(97,184,242,.5)}
.rail__i.is-on .rail__t{color:var(--ink)}
.rail__i.is-on .rail__n{color:var(--blue-text)}
.rail__i.is-on .rail__s{opacity:1;color:var(--muted)}
.rail__i:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.scnvis{display:grid;align-self:center;min-width:0;gap:clamp(28px,5vh,64px)}
.vis{
  display:grid;place-items:center;min-width:0;
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility 0s;
}
.robo.js .scnvis{gap:0}
.robo.js .vis{grid-area:1/1}
.robo.js .vis:not(.is-on){
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),visibility 0s linear .55s;
}
.vfig{position:relative;width:min(100%,660px)}
.vcard{
  position:relative;border-radius:22px;overflow:hidden;background:var(--white);
  box-shadow:0 54px 90px -44px rgba(3,32,55,.55),0 0 0 1px rgba(255,255,255,.5);
}
.vcard img{display:block;width:100%;height:auto}

.vis .chip{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.robo.js .vis:not(.is-on) .chip{opacity:0;transform:translateY(10px)}
.robo.js .vis.is-on .chip{transition-delay:calc(var(--i,0) * 90ms + 180ms)}
.chip--d{left:-4%;top:11%}
.chip--e{right:-3%;bottom:13%}
.chip--f{left:-4%;bottom:12%}
.robo.is-lit .chip--d{animation:float 8.6s var(--ease) 2.2s infinite}
.robo.is-lit .chip--e{animation:float 9.2s var(--ease) 2.6s infinite}
.robo.is-lit .chip--f{animation:float 7.8s var(--ease) 2.4s infinite}

@media (max-width:1000px){
  .robo.js .rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
        gap:0 clamp(10px,2vw,20px);max-width:none}
  .rail__i{grid-template-columns:minmax(0,1fr);gap:4px;padding:11px 0 0;align-content:start}
  .rail__i::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px}
  .rail__i i{left:0;top:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left}
  .rail__i.is-on i{animation-name:railfillx}
  .rail__n{grid-area:auto;align-self:auto}
  .rail__t,.rail__s{grid-column:1}
  .rail__t{font-size:14.5px}
  .rail__s{display:none}
  .vfig{width:min(100%,clamp(230px,38vh,470px))}
  .chip--d{left:0;top:8%}
  .chip--e{right:0;bottom:10%}
  .chip--f{left:0;bottom:10%}
}
@keyframes railfillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:560px){
  .rail__t{font-size:13.5px;line-height:1.2}
  .rail__n{font-size:11px}
  .vcard{border-radius:16px}
}

@media (prefers-reduced-motion:reduce){
  .scn,.scn > *,.vis{transition-duration:.01ms}
  .rail__i.is-on i{animation:none;transform:none}
}

/* ТЗ, раздел 12 (P0): на сенсорном экране цель нажатия не меньше 44px.
   Площадь растёт невидимым слоем, размеры и вид элементов остаются прототипными. */
@media (pointer:coarse){
  .topbar__in{height:44px}
  .brand,.head__cta{min-height:44px}
  .brand{min-width:44px}
  .topbar__phone,.link,.direct a,.agree__link,.foot li a,.foot__bar a,.shots__dot,
  .crumbs a,.cmp th a{position:relative}
  .topbar__phone::before,.link::before,.direct a::before,.agree__link::before,
  .foot li a::before,.foot__bar a::before,.shots__dot::before,.crumbs a::before,.cmp th a::before{
    content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:max(100%,44px);height:44px;
  }
  /* соседний .phero__in лежит на z-index:1 и срезал бы нижнюю треть зоны крошек */
  .crumbs a{z-index:2}
  .shots__dots{gap:36px}
  .shots__dot::before{width:44px}
  .shots__nav{width:44px;height:44px}
  .nav.is-open a{display:flex;align-items:center;min-height:44px}
  .agree input{width:24px;height:24px}
  .rail__i{min-height:44px}
  a.specs__v{display:inline-block;padding-block:9px;margin-block:-9px}
  .stepper__b{width:44px;height:44px;margin:3px}
}