/* ==========================================================================
   МЕДГОРРЕСУРС — светлый корпоративный лендинг
   Семейство «Светлый корпоратив»: белое поле, #0B5FFF владеет целыми
   регионами, тёмно-синий закрывает низ страницы.
   ========================================================================== */

:root{
  --white:#fff;
  --ice:#F3F7FB;
  --ice-2:#E9F0F8;
  --blue:#0B5FFF;
  --blue-600:#0A54E0;
  --blue-700:#0947BE;
  --blue-tint:#E7EFFF;
  --navy:#0A1F44;
  --navy-deep:#071634;
  --ink:#0A1F44;
  --body:#47566F;
  --muted:#5C6B84;
  --line:#E2EAF3;
  --line-2:#D5E0EE;

  --r-s:10px;
  --r:16px;
  --r-l:24px;
  --pill:999px;

  --sh-1:0 2px 6px rgba(10,31,68,.05), 0 10px 24px rgba(10,31,68,.06);
  --sh-2:0 4px 12px rgba(10,31,68,.06), 0 20px 44px rgba(10,31,68,.10);
  --sh-3:0 8px 20px rgba(10,31,68,.08), 0 32px 64px rgba(10,31,68,.14);
  --sh-blue:0 6px 16px rgba(11,95,255,.20), 0 20px 44px rgba(11,95,255,.22);

  --wrap:1280px;
  --pad:32px;
  /* Запасной вариант: 100vw включает ширину скроллбара, поэтому на десктопе
     фото героя вылезает на его ширину. Точное значение проставляет JS
     (setGutter в app.js) из documentElement.clientWidth — скроллбар туда
     не входит. Без JS эта формула даёт рабочий, но чуть широкий вылет. */
  --gutter:max(var(--pad), (100vw - (var(--wrap) - var(--pad) * 2)) / 2);

  --sec:clamp(76px, 8.5vw, 132px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* — сброс и база ————————————————————————————————————————————————— */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font:400 16px/1.65 "Golos Text","Segoe UI",system-ui,sans-serif;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Русские слова длиннее английских: «Специализированный» на 320px не влезает
     в строку и распирал .wrap шире вьюпорта. Срабатывает только когда слово
     иначе не помещается. */
  overflow-wrap:break-word;
}

h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:800; line-height:1.1; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img{display:block; max-width:100%; height:auto}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}

/* поверхности браузера, которые мы не рисовали, но которые тоже наши */
::selection{background:var(--blue); color:#fff}
:root{scrollbar-color:#B4C6DD var(--ice); scrollbar-width:thin; caret-color:var(--blue)}
::-webkit-scrollbar{width:13px; height:13px}
::-webkit-scrollbar-track{background:var(--ice)}
::-webkit-scrollbar-thumb{background:#B4C6DD; border-radius:var(--pill); border:3px solid var(--ice)}
::-webkit-scrollbar-thumb:hover{background:#8CA5C6}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(11,95,255,.5); outline-offset:2px; border-radius:4px;
}

.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ico{width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor;
     stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* Дорожка grid по умолчанию не ýже своего min-content, поэтому одно длинное
   слово или неразрывная лента распирает всю колонку шире вьюпорта.
   min-width:0 снимает это у всех наших гридов разом. */
.hero__grid > *, .about__grid > *, .seg-grid > *, .contact__grid > *,
.foot__top > *, .steps > li, .perks > *, .field-row > *, .row > *{min-width:0}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue);
      color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) 0; font-weight:600}
.skip:focus{left:0}

/* — типографика секций ——————————————————————————————————————————— */

.h2{font-size:clamp(1.9rem,3.3vw,3rem); letter-spacing:-.03em; line-height:1.05; text-wrap:balance}
.h2--light{color:#fff}
.lead{font-size:1.0625rem; line-height:1.6; color:var(--body)}

.sec-head{max-width:64ch; margin-bottom:clamp(36px,4vw,56px)}
.sec-head__note{margin-top:16px; font-size:1.0625rem; color:var(--muted); max-width:62ch}
.sec-head__note--light{color:rgba(255,255,255,.95)}
.sec-head--split{display:flex; justify-content:space-between; align-items:flex-end;
                 gap:32px; max-width:none; flex-wrap:wrap}

/* — кнопки ——————————————————————————————————————————————————————— */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 24px; border:1px solid transparent; border-radius:var(--pill);
  font-size:.9375rem; font-weight:700; letter-spacing:-.01em; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.btn .ico{width:1.05em; height:1.05em; transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--primary{background:var(--blue); color:#fff; box-shadow:var(--sh-blue)}
.btn--primary:hover{background:var(--blue-600); transform:translateY(-1px);
                    box-shadow:0 8px 20px rgba(11,95,255,.26), 0 26px 52px rgba(11,95,255,.26)}
.btn--primary:active{transform:translateY(0); background:var(--blue-700)}

.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint)}

.btn--sm{padding:11px 20px; font-size:.875rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55; pointer-events:none}

.linkbtn{background:none; border:0; padding:0; color:var(--blue); font-weight:600;
         font-size:inherit; cursor:pointer; text-decoration:underline;
         text-underline-offset:3px; text-decoration-thickness:1px}
.linkbtn:hover{color:var(--blue-700)}
.linkbtn--light{color:rgba(255,255,255,.75)}
.linkbtn--light:hover{color:#fff}

/* — верхняя служебная полоса ——————————————————————————————————————— */

.utility{background:var(--navy); color:rgba(255,255,255,.72); font-size:.8125rem}
.utility__inner{display:flex; align-items:center; justify-content:space-between;
                gap:24px; min-height:42px; padding-block:8px}
.utility__note{display:flex; align-items:center; gap:9px; line-height:1.4}
.utility__note .ico{width:16px; height:16px; color:#7FA9FF}
.utility__contact{display:flex; align-items:center; gap:14px; white-space:nowrap}
.utility__contact a{color:rgba(255,255,255,.86); text-decoration:none; font-weight:500}
.utility__contact a:hover{color:#fff; text-decoration:underline}
.utility__sep{width:1px; height:13px; background:rgba(255,255,255,.24)}

/* — шапка ————————————————————————————————————————————————————————— */

.head{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
      backdrop-filter:blur(14px) saturate(1.5); border-bottom:1px solid var(--line);
      transition:box-shadow .3s var(--ease)}
.head--stuck{box-shadow:var(--sh-1)}
.head__inner{display:flex; align-items:center; gap:24px; min-height:78px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand__mark{width:38px; height:38px; flex:none}
.brand__mark svg{width:100%; height:100%; display:block}
.brand__word{display:flex; flex-direction:column; line-height:1.1}
.brand__word b{font-size:1.0625rem; font-weight:800; letter-spacing:.01em; color:var(--ink)}
.brand__word i{font-style:normal; font-size:.6875rem; font-weight:500; letter-spacing:.02em;
               color:var(--muted); margin-top:3px}
.brand--light .brand__word b{color:#fff}
.brand--light .brand__word i{color:rgba(255,255,255,.6)}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{position:relative; padding:9px 12px; border-radius:var(--pill); white-space:nowrap;
       color:var(--ink); font-size:.9375rem; font-weight:600; text-decoration:none;
       transition:background .2s var(--ease), color .2s var(--ease)}
.nav a:hover{background:var(--ice); color:var(--blue)}
.nav a.is-active{color:var(--blue); background:var(--blue-tint)}

.head__cta{flex:none}

/* переключатель языка */
.lang{display:flex; gap:2px; flex:none; padding:3px; background:var(--ice);
      border:1px solid var(--line); border-radius:var(--pill)}
.lang__btn{padding:6px 12px; border:0; border-radius:var(--pill); background:none;
           color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.05em;
           cursor:pointer; line-height:1;
           transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)}
.lang__btn:hover{color:var(--ink)}
.lang__btn.is-active{background:#fff; color:var(--blue);
                     box-shadow:0 1px 2px rgba(10,31,68,.10), 0 3px 8px rgba(10,31,68,.08)}

.burger{display:none; flex:none; width:44px; height:44px; padding:0; background:none;
        border:1px solid var(--line-2); border-radius:12px; cursor:pointer;
        flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{width:18px; height:2px; background:var(--ink); border-radius:2px;
             transition:transform .3s var(--ease), opacity .2s var(--ease)}
.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){transform:translateY(-7px) rotate(-45deg)}

/* — первый экран ————————————————————————————————————————————————— */

.hero{position:relative; padding-top:clamp(40px,4.5vw,64px); background:var(--white)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
            gap:clamp(32px,4vw,64px); align-items:start}

.hero__text{padding-top:clamp(8px,2vw,36px); padding-bottom:24px}
.hero__title{
  font-size:clamp(2.375rem,5.15vw,5.25rem);
  font-weight:800; line-height:.99; letter-spacing:-.038em;
  text-wrap:balance; max-width:15ch;
}
.hero__title em{font-style:normal; color:var(--blue)}
.hero__lead{margin-top:clamp(20px,2.4vw,30px); max-width:52ch;
            font-size:clamp(1rem,1.15vw,1.1875rem); line-height:1.58; color:var(--body)}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3vw,38px)}
.hero__trust{margin-top:24px; font-size:.875rem; font-weight:500; color:var(--muted)}

.hero__media{position:relative; margin-right:calc(var(--gutter) * -1)}
.hero__figure{margin:0; border-radius:var(--r-l) 0 0 var(--r-l); overflow:hidden;
              box-shadow:var(--sh-2); background:var(--ice)}
.hero__figure img{width:100%; height:clamp(500px,74vh,740px); object-fit:cover; object-position:58% 50%}

.hero__panel{
  position:absolute; z-index:3; left:-64px; bottom:112px; width:min(336px,86%);
  display:flex; gap:18px; align-items:flex-start;
  padding:24px 26px; border-radius:var(--r); background:var(--blue); color:#fff;
  box-shadow:0 10px 24px rgba(11,95,255,.20), 0 30px 64px rgba(10,31,68,.26);
}
.hero__panel-num{font-size:.6875rem; font-weight:600; line-height:1.3;
                 letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.95)}
.hero__panel-num b{display:block; margin-top:2px; font-size:1.75rem; font-weight:800;
                   letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums}
.hero__panel-num span{font-size:.75rem; font-weight:600; letter-spacing:0; color:rgba(255,255,255,.95)}
.hero__panel-txt{font-size:.875rem; line-height:1.5; color:#fff}

/* лента преимуществ — наезжает на фотографию снизу */
.perks{
  position:relative; z-index:4; margin-top:-72px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-3); overflow:hidden;
}
.perk{padding:28px 26px 30px; border-right:1px solid var(--line)}
.perk:last-child{border-right:0}
.perk__ico{display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
           border-radius:14px; background:var(--blue-tint); color:var(--blue)}
.perk__ico .ico{width:23px; height:23px}
.perk h3{font-size:1rem; font-weight:700; letter-spacing:-.015em}
.perk p{margin-top:8px; font-size:.875rem; line-height:1.55; color:var(--muted)}

/* — о компании ——————————————————————————————————————————————————— */

.about{background:var(--ice); padding-block:var(--sec)}
.about__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
             gap:clamp(36px,5vw,80px); align-items:start}
.about__media{position:sticky; top:112px; border-radius:var(--r-l); overflow:hidden;
              box-shadow:var(--sh-2)}
.about__media img{width:100%; aspect-ratio:4/3.4; object-fit:cover}
.about__text .lead{margin-top:22px; font-size:1.125rem; color:var(--ink); font-weight:500}
.about__text > p:not(.lead){margin-top:18px; max-width:66ch}

.reasons{margin-top:32px; display:grid; gap:2px; border-radius:var(--r); overflow:hidden;
         border:1px solid var(--line-2); background:var(--line-2)}
.reasons li{position:relative; background:#fff; padding:18px 22px 18px 56px;
            font-size:.9375rem; line-height:1.55; color:var(--muted)}
.reasons li b{color:var(--ink); font-weight:700}
.reasons li::before{
  content:""; position:absolute; left:22px; top:21px; width:19px; height:19px;
  border-radius:50%; background:var(--blue-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5FFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E");
  background-size:12px; background-repeat:no-repeat; background-position:center;
}
.about__gost{margin-top:26px; padding:18px 22px; border-radius:var(--r);
             background:var(--blue-tint); color:var(--ink); font-size:.9375rem; line-height:1.55}
.about__gost b{font-weight:700}

/* — отраслевые решения ————————————————————————————————————————————— */

.segments{background:var(--white); padding-block:var(--sec)}
.seg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.seg{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
     border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-1);
     transition:box-shadow .35s var(--ease), transform .35s var(--ease),
                border-color .35s var(--ease)}
.seg:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.seg__media{overflow:hidden; background:var(--ice)}
.seg__media img{width:100%; aspect-ratio:4/3.15; object-fit:cover;
                transition:transform .7s var(--ease)}
.seg:hover .seg__media img{transform:scale(1.035)}
.seg__body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.seg__body h3{font-size:1.3125rem; letter-spacing:-.025em; line-height:1.2}
.seg__body p{margin-top:12px; font-size:.9375rem; line-height:1.6; color:var(--muted)}
.seg__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:22px}
.seg__tags li{padding:6px 13px; border-radius:var(--pill); background:var(--ice);
              color:var(--ink); font-size:.8125rem; font-weight:600}

/* — каталог ——————————————————————————————————————————————————————— */

/* — прямой ответ под заголовком —————————————————————————————————————
   Первое, что извлекают AI-краулеры и блоки быстрых ответов: что это,
   для кого, ключевые характеристики. Живёт до маркетингового текста. */
.answer{
  max-width:74ch; margin:clamp(40px,4.5vw,64px) 0 0;
  padding-top:26px; border-top:1px solid var(--line-2);
  font-size:1.0625rem; line-height:1.7; color:var(--ink);
}
.answer:last-child{margin-bottom:0}

/* — частые вопросы ————————————————————————————————————————————————
   <details> вместо JS-аккордеона: ответы лежат в HTML и индексируются
   даже в свёрнутом виде, и работает без скриптов. */
.faq{background:var(--white); padding-block:var(--sec)}
.faq__list{display:grid; gap:12px; max-width:88ch}
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.faq__item[open]{border-color:var(--line-2); box-shadow:var(--sh-2)}
.faq__item summary{
  display:flex; align-items:center; gap:18px; justify-content:space-between;
  padding:20px 24px; cursor:pointer; list-style:none;
  color:var(--ink); font-weight:700; font-size:1.0625rem; line-height:1.45;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--blue)}
.faq__item summary:focus-visible{outline:3px solid var(--blue); outline-offset:-3px}
.faq__item summary .ico{
  flex:none; width:22px; height:22px; color:var(--blue);
  transition:transform .25s var(--ease);
}
.faq__item[open] summary .ico{transform:rotate(180deg)}
.faq__a{padding:0 24px 22px; max-width:70ch}
.faq__a p{margin:0; color:var(--body)}

.catalog{background:var(--ice); padding-block:var(--sec)}
.catalog__layout{display:grid; grid-template-columns:274px minmax(0,1fr);
                 gap:clamp(28px,3.2vw,48px); align-items:start}
.catalog__layout > *{min-width:0}

.search{position:relative; display:flex; align-items:center; gap:10px; width:min(400px,100%);
        padding:0 16px; background:#fff; border:1px solid var(--line-2);
        border-radius:var(--pill); transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.search:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px rgba(11,95,255,.12)}
.search > .ico{color:var(--muted); width:19px; height:19px}
.search input{flex:1; min-width:0; padding:14px 0; border:0; background:none; outline:none;
              font-size:.9375rem}
.search input::placeholder{color:#65738C}
.search input::-webkit-search-cancel-button{display:none}
.search__clear{display:grid; place-items:center; width:26px; height:26px; padding:0;
               border:0; border-radius:50%; background:var(--ice-2); color:var(--muted); cursor:pointer}
.search__clear:hover{background:var(--blue-tint); color:var(--blue)}
.search__clear .ico{width:13px; height:13px}

.filters{position:sticky; top:104px}
.filters__scroll{display:flex; flex-direction:column; gap:3px; padding:8px;
                 background:#fff; border:1px solid var(--line); border-radius:var(--r);
                 box-shadow:var(--sh-1)}
.fbtn{display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px;
      background:none; border:0; border-radius:11px; cursor:pointer; text-align:left;
      color:var(--ink); font-size:.875rem; font-weight:600; line-height:1.3;
      transition:background .18s var(--ease), color .18s var(--ease)}
.fbtn .ico{width:19px; height:19px; color:var(--blue); transition:color .18s var(--ease)}
.fbtn__label{flex:1; min-width:0}
.fbtn__n{font-size:.75rem; font-weight:700; color:var(--muted);
         font-variant-numeric:tabular-nums; transition:color .18s var(--ease)}
.fbtn:hover{background:var(--ice)}
.fbtn.is-active{background:var(--blue); color:#fff}
.fbtn.is-active .ico{color:#fff}
.fbtn.is-active .fbtn__n{color:rgba(255,255,255,.72)}

.group{margin-bottom:34px}
.group:last-child{margin-bottom:0}
.group__head{display:flex; align-items:center; gap:13px; padding-bottom:14px;
             margin-bottom:14px; border-bottom:2px solid var(--line-2)}
.group__ico{display:grid; place-items:center; width:38px; height:38px; flex:none;
            border-radius:11px; background:var(--blue-tint); color:var(--blue)}
.group__ico .ico{width:20px; height:20px}
.group__title{font-size:1.0625rem; font-weight:800; letter-spacing:-.02em; line-height:1.25}
.group__n{margin-left:auto; font-size:.8125rem; font-weight:600; color:var(--muted);
          font-variant-numeric:tabular-nums; white-space:nowrap}

.rows{display:flex; flex-direction:column; gap:3px}
/* 136px — замерено по самой длинной подписи кнопки из двух языков
   («Add to quote» требует 128px); меньше — и английский переносится в две строки */
.row{display:grid; grid-template-columns:38px minmax(0,1.05fr) minmax(0,1.15fr) 136px;
     gap:16px; align-items:center; padding:13px 16px; border-radius:12px;
     background:#fff; border:1px solid transparent;
     transition:border-color .18s var(--ease), background .18s var(--ease),
                box-shadow .18s var(--ease)}
.row:hover{border-color:var(--line-2); box-shadow:var(--sh-1)}
.row.is-picked{background:var(--blue-tint); border-color:#B9D0FF}
.row__no{font-size:.8125rem; font-weight:700; color:#65738C; font-variant-numeric:tabular-nums}
.row.is-picked .row__no{color:var(--blue)}
.row__name{font-size:.9375rem; font-weight:600; color:var(--ink); line-height:1.4}
.row__name mark{background:#FFE9A8; color:inherit; border-radius:3px; padding:0 2px}
.row__use{font-size:.875rem; color:var(--muted); line-height:1.45}
.row__add{display:inline-flex; align-items:center; justify-content:center; gap:7px;
          width:100%; padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--pill);
          background:#fff; color:var(--ink); font-size:.8125rem; font-weight:700; cursor:pointer;
          transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease)}
.row__add .ico{width:14px; height:14px}
.row__add:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint)}
.row.is-picked .row__add{background:var(--blue); border-color:var(--blue); color:#fff}
.row.is-picked .row__add:hover{background:var(--blue-700); border-color:var(--blue-700)}

.catalog__empty{padding:44px 24px; text-align:center; color:var(--muted);
                background:#fff; border:1px solid var(--line); border-radius:var(--r)}

/* — как работаем (синее поле) ————————————————————————————————————— */

.process{background:var(--blue); color:#fff; padding-block:var(--sec)}
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.steps li{position:relative; padding:30px 24px 0 0; border-top:2px solid rgba(255,255,255,.28)}
.steps li + li{padding-left:24px}
.steps li::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px;
                  border-radius:50%; background:#fff}
.steps li + li::before{left:24px}
.steps__n{display:block; font-size:.8125rem; font-weight:800; letter-spacing:.1em;
          color:rgba(255,255,255,.95); font-variant-numeric:tabular-nums}
.steps h3{margin-top:12px; font-size:1.0625rem; font-weight:700; color:#fff; letter-spacing:-.02em}
.steps p{margin-top:9px; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.95)}

/* — контакты —————————————————————————————————————————————————————— */

.contact{background:var(--navy); padding-block:var(--sec)}
.contact__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
               gap:clamp(36px,4.5vw,72px); align-items:start}
.contact__lead{margin-top:20px; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.78);
               max-width:44ch}

.contact__list{margin-top:38px; display:flex; flex-direction:column; gap:2px;
               border-radius:var(--r); overflow:hidden; background:rgba(255,255,255,.1)}
.contact__list li{display:flex; align-items:center; gap:14px; padding:16px 20px;
                  background:var(--navy); flex-wrap:wrap}
.contact__ico{display:grid; place-items:center; width:38px; height:38px; flex:none;
              border-radius:11px; background:rgba(11,95,255,.24); color:#7FA9FF}
.contact__ico .ico{width:19px; height:19px}
.contact__list a,.contact__list > li > span:not(.contact__ico){color:#fff; font-weight:600;
              font-size:.9375rem; text-decoration:none}
.contact__list a:hover{color:#9CBEFF; text-decoration:underline}
.contact__list i{width:100%; padding-left:52px; font-style:normal; font-size:.75rem;
                 color:rgba(255,255,255,.66); letter-spacing:.02em}

.contact__after{margin-top:32px; padding:22px 24px; border-radius:var(--r);
                background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12)}
.contact__after h3{font-size:.9375rem; color:#fff}
.contact__after p{margin-top:8px; font-size:.875rem; line-height:1.6; color:rgba(255,255,255,.72)}

.formcard{background:#fff; border-radius:var(--r-l); padding:clamp(26px,3vw,40px);
          box-shadow:var(--sh-3)}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{font-size:.8125rem; font-weight:700; color:var(--ink); letter-spacing:.01em}
.field label span{color:var(--blue)}
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:#fff; font-size:.9375rem; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.field textarea{resize:vertical; min-height:86px; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#65738C}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(11,95,255,.12)}
.field.is-bad input,.field.is-bad textarea{border-color:#D93B3B; background:#FEF6F6}
.field__err{min-height:0; font-size:.75rem; font-weight:600; color:#C62F2F}
.field__err:empty{display:none}

.selectwrap{position:relative}
.selectwrap select{appearance:none; padding-right:42px; cursor:pointer}
.selectwrap .ico{position:absolute; right:14px; top:50%; transform:translateY(-50%);
                 width:18px; height:18px; color:var(--muted); pointer-events:none}

.picked{margin:4px 0 18px; padding:16px 18px; border-radius:var(--r);
        background:var(--ice); border:1px solid var(--line)}
.picked__head{display:flex; justify-content:space-between; align-items:center; gap:16px;
              font-size:.8125rem; font-weight:600; color:var(--muted)}
.picked__head b{color:var(--blue); font-variant-numeric:tabular-nums}
.picked__list{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;
              max-height:158px; overflow-y:auto}
.picked__list li{display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 12px;
                 background:#fff; border:1px solid var(--line-2); border-radius:var(--pill);
                 font-size:.8125rem; font-weight:600; color:var(--ink)}
.picked__list button{display:grid; place-items:center; width:19px; height:19px; padding:0;
                     border:0; border-radius:50%; background:var(--ice-2); color:var(--muted); cursor:pointer}
.picked__list button:hover{background:#FFE0E0; color:#C62F2F}
.picked__list button .ico{width:10px; height:10px}

/* Ловушка для ботов: уводим за край экрана. Не display:none и не
   visibility:hidden — эти два признака спам-боты распознают и поле пропустят. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.consent{display:flex; gap:11px; align-items:flex-start; margin:6px 0 4px;
         font-size:.8125rem; line-height:1.5; color:var(--muted); cursor:pointer}
.consent input{width:18px; height:18px; flex:none; margin:1px 0 0; accent-color:var(--blue); cursor:pointer}
.formnote{margin-top:14px; font-size:.75rem; color:var(--muted); text-align:center}

.formdone{text-align:center; padding:22px 8px}
.formdone__ico{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 20px;
               border-radius:50%; background:var(--blue-tint); color:var(--blue)}
.formdone__ico .ico{width:27px; height:27px; stroke-width:2.4}
.formdone h3{font-size:1.375rem; letter-spacing:-.025em}
.formdone p{margin:12px auto 24px; max-width:44ch; font-size:.9375rem;
            line-height:1.6; color:var(--muted)}

/* — подвал ————————————————————————————————————————————————————————— */

.foot{background:var(--navy-deep); color:rgba(255,255,255,.66); padding-top:clamp(56px,6vw,84px)}
.foot__top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
           gap:clamp(28px,3.5vw,56px); padding-bottom:clamp(40px,4.5vw,64px)}
.foot__brand p{margin-top:20px; font-size:.875rem; line-height:1.65; max-width:38ch}
.foot__col h4{font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
              color:rgba(255,255,255,.6); margin-bottom:16px}
.foot__col ul{display:flex; flex-direction:column; gap:9px; font-size:.875rem}
.foot__col a{color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s var(--ease)}
.foot__col a:hover{color:#fff; text-decoration:underline}
.foot__contacts{margin-bottom:22px}
.foot__bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
              padding-block:22px; border-top:1px solid rgba(255,255,255,.12);
              font-size:.75rem; color:rgba(255,255,255,.6)}
.foot__legal{max-width:60ch}

/* — плавающая корзина запроса ————————————————————————————————————— */

.tray{position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--navy);
      border-top:1px solid rgba(255,255,255,.14); box-shadow:0 -6px 20px rgba(10,31,68,.22);
      transform:translateY(100%); transition:transform .42s var(--ease)}
.tray.is-open{transform:translateY(0)}
body.has-tray{padding-bottom:70px}
.tray__inner{display:flex; align-items:center; justify-content:space-between; gap:20px;
             padding-block:14px}
.tray__text{color:#fff; font-size:.9375rem; font-weight:600}
.tray__text b{color:#7FA9FF; font-variant-numeric:tabular-nums}
.tray__actions{display:flex; align-items:center; gap:18px}

/* — один авторский момент: появление секций при скролле ——————————— */

@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(20px); filter:blur(5px)}
  .js .reveal.is-in{opacity:1; transform:none; filter:none;
    transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
    transition-delay:var(--d,0ms)}
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width:1240px){
  /* уступаем место навигации: в русской версии подписи длиннее */
  .head__cta{display:none}
}

@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .hero__panel{left:-40px; width:min(300px,90%); padding:20px 22px}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perk:nth-child(2){border-right:0}
  .perk:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .catalog__layout{grid-template-columns:236px minmax(0,1fr)}
  .row{grid-template-columns:32px minmax(0,1fr) 136px; gap:12px}
  .row__use{grid-column:2/3; font-size:.8125rem; margin-top:2px}
  .row{row-gap:2px}
}

@media (max-width:1024px){
  .nav{position:fixed; inset:120px 16px auto; flex-direction:column; align-items:stretch;
       gap:4px; padding:12px; background:#fff; border:1px solid var(--line);
       border-radius:var(--r-l); box-shadow:var(--sh-3); margin-left:0;
       opacity:0; visibility:hidden; transform:translateY(-10px);
       transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s}
  .nav.is-open{opacity:1; visibility:visible; transform:none}
  .nav a{padding:13px 16px; border-radius:12px; font-size:1rem}
  .burger{display:flex; order:3}
  .head__cta{display:none}
  .head__inner{gap:14px}
  .lang{margin-left:auto; order:2}

  .seg-grid{grid-template-columns:1fr; gap:20px}
  .seg{flex-direction:row}
  .seg__media{flex:0 0 40%}
  .seg__media img{height:100%; aspect-ratio:auto; min-height:230px}
  .seg__body{padding:26px 28px}

  .about__grid{grid-template-columns:1fr; gap:36px}
  .about__media{position:static}
  .about__media img{aspect-ratio:16/9}

  .contact__grid{grid-template-columns:1fr; gap:36px}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px}

  .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px}
  .steps li{padding:26px 0 26px 0}
  .steps li + li{padding-left:0}
  .steps li + li::before{left:0}
  .steps li:nth-child(even){padding-left:24px}
  .steps li:nth-child(even)::before{left:24px}
}

@media (max-width:860px){
  :root{--pad:20px}
  .utility__note{display:none}
  .utility__inner{justify-content:center}

  .hero{padding-top:28px}
  .hero__grid{grid-template-columns:1fr; gap:0}
  .hero__text{padding-bottom:32px}
  .hero__title{max-width:none}
  .hero__media{margin-right:calc(var(--pad) * -1); margin-left:calc(var(--pad) * -1)}
  .hero__figure{border-radius:0}
  .hero__figure img{height:min(66vh,460px); object-position:60% 45%}
  .hero__panel{position:static; width:auto; margin-top:-1px; border-radius:0;
               box-shadow:none; padding:22px var(--pad)}
  .perks{margin-top:0; grid-template-columns:1fr; border-radius:0;
         border-left:0; border-right:0; box-shadow:none}
  .perk{border-right:0; border-bottom:1px solid var(--line); padding:22px var(--pad)}
  .perk:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .perk:last-child{border-bottom:0}
  .perk__ico{width:40px; height:40px; margin-bottom:12px}

  /* пальцем целятся хуже, чем курсором: поднимаем мелкие цели */
  .lang__btn{padding:13px 13px}
  .search__clear{width:32px; height:32px}
  .contact__list a{padding-block:8px}

  .catalog__layout{grid-template-columns:minmax(0,1fr); gap:20px}
  .filters{position:sticky; top:78px; z-index:20; margin-inline:calc(var(--pad) * -1);
           padding-inline:var(--pad); padding-block:10px; background:var(--ice)}
  .filters__scroll{flex-direction:row; overflow-x:auto; scrollbar-width:none;
                   padding:6px; gap:5px; border-radius:var(--pill)}
  .filters__scroll::-webkit-scrollbar{display:none}
  .fbtn{width:auto; white-space:nowrap; border-radius:var(--pill); padding:9px 15px}
  .fbtn .ico{display:none}
  .sec-head--split{align-items:stretch}
  .search{width:100%}

  .seg{flex-direction:column}
  .seg__media{flex:none}
  .seg__media img{aspect-ratio:16/10; min-height:0}

  .field-row{grid-template-columns:1fr; gap:0}
  .formcard{padding:24px 20px}

  .foot__top{grid-template-columns:1fr; gap:32px}
  .foot__bottom{flex-direction:column; gap:10px}

  .tray__inner{padding-block:11px; gap:12px}
  .tray__actions{gap:14px}
}

@media (max-width:560px){
  /* шапке нужно место на логотип, переключатель языка и бургер разом */
  .head__inner{gap:12px}
  .head .brand__word i{display:none}
  .head .brand__word b{font-size:1rem}
  .lang__btn{padding:13px 10px}   /* по вертикали — палец, по горизонтали — теснота шапки */

  /* длинная подпись кнопки не должна распирать макет шире вьюпорта */
  .btn{white-space:normal; line-height:1.3; text-align:center}
  .hero__actions .btn{width:100%}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li:nth-child(even){padding-left:0}
  .steps li:nth-child(even)::before{left:0}
  .row{grid-template-columns:30px minmax(0,1fr); gap:4px 10px; padding:14px}
  .row__add{grid-column:1/-1; width:auto; justify-self:start; margin-top:10px; padding:8px 16px}
  .group__n{display:none}
  .tray__text{font-size:.875rem}
  .linkbtn--light{display:none}
}

/* 360px — iPhone SE и старые Android. Идёт последним: при равной
   специфичности побеждает поздний блок, иначе правила 560px его перебьют. */
@media (max-width:400px){
  .head__inner{gap:9px}
  .head .brand__mark{width:34px; height:34px}
  .head .brand__word b{font-size:.9375rem; letter-spacing:0}
  .lang__btn{padding:13px 8px; font-size:.6875rem}
}

/* 320px — нижняя граница WCAG 1.4.10 (Reflow) */
@media (max-width:360px){
  :root{--pad:16px}
  /* «спасает первым» связано неразрывным пробелом ради Firefox; на 320px эта
     связка не влезала и рвалась посреди слова — уменьшаем кегль, а не связку */
  .hero__title{font-size:2rem}
  .head__inner{gap:8px}
  .head .brand__mark{width:30px; height:30px}
  .head .brand__word b{font-size:.8125rem}
  .lang__btn{padding:13px 7px; font-size:.625rem}
}