/* Adaptive / media queries moved from style.css */

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* Hide horizontal scrollbars but keep scrolling (mobile carousels) */
#pricing .plans,
#how .stages-list,
#solutions .benefits-list,
.plans{
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}
#pricing .plans::-webkit-scrollbar,
#how .stages-list::-webkit-scrollbar,
#solutions .benefits-list::-webkit-scrollbar,
.plans::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* Calculator wrapp2: always 2 columns */
.cost .wrapp2{
  display:flex !important;
  flex-direction:row !important;
  gap:16px !important;
}
.cost .left3,
.cost .left4{flex:1 1 0 !important; min-width:0 !important;}

/* <1450: featured plan must be +20px vs neighbors */
@media (max-width: 1450px){
  .plan-item.plan-featured{min-height:577px !important;}
}

/* Бургер без кружка во всех разрешениях */
.burger{
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Ниже 1024 отключаем вспомогательную прокрутку/привязку к секциям */
@media (max-width: 1023px){
  html{scroll-snap-type:none !important; scroll-padding-top:0 !important}
  .section{scroll-snap-align:none !important; scroll-snap-stop:normal !important; scroll-margin-top:0 !important}
  .hero{scroll-snap-align:none !important}
}

@media (max-width: 1040px){
  .wrap{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .chooser{grid-template-columns: 1fr; height:auto}
  .chooser-left{order:0}
  .chooser-right{order:1}
  .projects{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .faqblog{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
  .kpis{grid-template-columns: repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .nav-right{position:static; transform:none; right:auto; top:auto; margin-left:auto}
  .nav{padding-right:0}
}

/* Header visibility rules:
  - >1450px: phone + region + channel + socials (как сейчас)
  - 1450–861px: phone + region + channel (без соцсетей)
  - 860–481px: phone + region (без канала и соцсетей)
  - <=480px: region (адрес) (без телефона/канала/соцсетей)
*/
@media (max-width: 1450px){
  header .socials{display:none !important;}
}

/* 1450–769: lead компактнее (768px попадает в следующий диапазон) */
@media (min-width: 769px) and (max-width: 1450px){
  .lead{font-size:22px !important; line-height:28px !important;}
}

/* Section padding by breakpoints */
@media (max-width: 449px){
  .section{padding-bottom:40px !important;}
}
@media (min-width: 450px) and (max-width: 768px){
  .section{padding-bottom:80px !important;}
}
@media (min-width: 768px) and (max-width: 1450px){
  .section{padding-bottom:95px !important;}
}
    min-height:56px !important;
    padding:0 20px !important;
    min-width:282px !important;

/* Планшет (ландшафт): до 1199px включительно. 1200px и выше — десктоп. */
@media (min-width: 768px) and (max-width: 1199px){
  /* Общая типографика для планшета */
  h2{font-size:32px !important; line-height:38px !important}
  .subtext{font-size:18px !important; line-height:22px !important}
  .seg button,
  .segbtn-plans{font-size:18px !important; line-height:22px !important}

  /* Контейнер: 1024 - 40*2 = 944 */
  .wrap{
@media (min-width: 768px) and (max-width: 1200px){
  #included .feature-img{min-height:170px; max-height:230px;}
}
    width:944px !important;
    max-width:calc(100% - 80px) !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Шапка: меню уходит в бургер, как в макете */
  .nav > nav{display:none}
  nav ul{display:none}
  .burger{display:flex}

    /* Burger слева рядом с логотипом (как на <1024)
      Делаем элементы nav-right прямыми детьми .nav, чтобы можно было управлять порядком. */
    .nav{justify-content:flex-start; flex-wrap:nowrap}
    .nav-right{display:contents; margin-left:0}
    .burger{order:-1}
    .brand{order:0; margin-left:0}
    .phone{order:1; margin-left:auto}
    .region{order:2}
    .channel{order:3}

  /* Выравниваем расстояния между элементами справа (перебиваем inline margin-left) */
  .nav{gap:16px}
  .region{margin-left:0 !important}
  .channel{margin-left:0 !important}

  /* Мобильное/планшетное меню: выезжает слева, ссылки всегда видимы */
  .mnav{
    display:block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    padding:calc(99px + 16px) 16px 16px;
    z-index:1000;
    background:rgba(10,11,15,.90);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transform:translateX(-110%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease, visibility .22s ease;
  }
  .mnav.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mnav .mnav-content{
    height:100%;
    overflow:auto;
    width:100%;
    padding:12px;
    color:#eef0f6 !important;
  }
  .mnav .mnav-content a{color:rgba(238, 240, 246, 0.86) !important}
  .mnav .mnav-content a:hover{color:#eef0f6 !important}
  .mnav a{color:#eef0f6; white-space:nowrap}
  .mnav a:hover{background:rgba(255,255,255,.06)}
  .mnav-meta{display:none}
  .socials{display:none}

  .logo{height:27px}
  .phone, .region, .channel{font-size:16px; line-height:20px; white-space:nowrap}

  /* HERO */
  .hero-card{width:100%; max-width:944px}
  .hero-actions .btn{font-size:18px !important}

  /* Hero buttons sizing: target 768–1200 (fluid up to макета) */
  .hero-actions .btn.hero-primary,
  .hero-actions .btn.hero-outline{
    min-height:56px !important;
    padding:0 20px !important;
    min-width:282px !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:start;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Benefits */
  .benefits-list{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:0;
    flex-wrap:nowrap;
  }
  .benefit{
    gap:10px;
    align-items:flex-start;
    flex:0 1 auto;
    min-width:0;
  }
  .benefits h5{
    font-size:16px;
    line-height:20px;
    font-weight:500;
    white-space:normal;
    overflow-wrap:anywhere;
    min-height:40px;
  }
  .benefit-icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
  }
  .benefit-icon img{
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    object-fit:contain;
    flex:0 0 auto;
  }
  .benefit-icon--wide{width:28px}
  .benefit-icon--wide img{width:28px; height:18px; min-width:28px; min-height:18px; object-fit: contain;}
  .benefit-text,
  .benefits .h5{
    white-space:normal;
    min-width:0;
  }

  /* Chooser: компоновка переопределяется ниже отдельным правилом (768–1450) */

  /* Projects: на 1024 картинка сверху, список снизу */
  .projects{
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "list";
  }
  .proj-preview{grid-area:preview}
  .proj-list{grid-area:list}
  .preview-box{min-height:420px}
  #projects .proj-header{margin-bottom:16px !important;}
  #projects .proj-header .btn.primary.block{padding:clamp(12px, 1.6vw, 16px) clamp(41px, 6vw, 84px) !important}

  /* Projects: на 1024 показываем только один item, переключение точками под списком */
  .proj-items{gap:0}
  .proj-item{display:none}
  .proj-item[aria-selected="true"]{display:block}
  .proj-list .bot{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:16px;
  }
  .proj-list .bot .dot,
  .proj-list .bot .dot2{
    appearance:none;
    padding:0;
    cursor:pointer;
    height:14px;
    width:14px;
    position:relative;
    border-radius:50%;
    background:transparent;
  }
  .proj-list .bot .dot{background-color:#a99aff; border:0}
  .proj-list .bot .dot2{border:1px solid #555559; box-sizing:border-box}
  .proj-preview .divider-dots{display:none}

  /* Comparison slider: немного компактнее */
  .comparison-slider-wrapper{min-height:560px}
  .comparison-slider{height:560px}

  /* How system works: seg под слайдером и по центру (как в макете 1024) */
  #how-system .wrap{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "slider"
      "seg";
  }
  #how-system .how-system-header{display:contents}
  #how-system .how-system-header h2{grid-area:title; margin-bottom:40px}
  #how-system .comparison-slider-wrapper{grid-area:slider}
  #how-system .how-system-header .seg{
    grid-area:seg;
    justify-self:center;
    margin-top:20px;
  }

  /* Work stages (how): сверху 2 колонки этапов, снизу схема */
  .stages-wrapper{
    grid-template-columns:1fr;
    gap:24px;
    align-items:stretch;
  }
  .stages-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:16px;
    padding:0;
    background:transparent;
    border:0;
    backdrop-filter:none;
  }
  .stage-item{
    padding:22px;
    border-radius:24px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.24);
  }
  .stages-diagram{min-height:auto}
  .stages-image{max-height:520px}

  /* Included: 2 колонки, уменьшаем картинку */
  .incl{grid-template-columns:1fr 1fr}
  .feature{padding:24px; gap:24px; align-items:stretch}
  .feature-content{padding:0; align-content:center}
  /* Буллеты как в макете: точка 6x6 и отступ 6px до текста */
  .feature-list{list-style:none; padding-left:0}
  .feature-list li{font-size:14px; line-height:16px; font-weight:400; position:relative; padding-left:12px}
  .feature-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#C8C8D2;
  }
  .feature-content{flex:0 0 42%; max-width:42%}
  .feature-img{
    flex:0 0 58%;
    width:58%;
    height:auto;
    min-height:260px;
    max-height:360px;
    max-width:100%;
    object-fit:cover;
    border-radius:12px;
    position:relative;
    overflow:hidden;
  }

  /* Plans (pricing): горизонтальный слайдер как в макете 1024 */
  .plans-head{
    flex-wrap:nowrap;
    align-items:flex-start;
  }
  .plans-head > div:first-child{flex:1; min-width:0}
  .seg-plans{margin-left:auto}

  .plans{
    --plan-card-w: 520px;
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
    align-items:stretch;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow-x:auto;
    overflow-y:hidden !important;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    -webkit-overflow-scrolling: touch;
  }
  .plans::-webkit-scrollbar{height:0}
  .plan-item{
    flex:0 0 var(--plan-card-w);
    width:var(--plan-card-w);
    height:auto;
    min-height:557px;
    scroll-snap-align:center;
  }
  .plan-item.plan-featured{
    width:var(--plan-card-w);
    min-height:577px;
    justify-self:auto;
  }

  .plans-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:16px;
  }
  .plans-dot{
    appearance:none;
    padding:0;
    cursor:pointer;
    height:16px;
    width:16px;
    border-radius:50%;
    background:transparent;
    border:1px solid #555559;
    box-sizing:border-box;
  }
  .plans-dot[aria-current="true"]{
    background-color:#a99aff;
    border:0;
  }

  /* Calculator: шаги на всю ширину (как на скриншоте 1024) */
  .cost{flex-direction:column; flex-wrap:nowrap}
  .cost .left,
  .cost .right11{
    width:100%;
    max-width:none;
    flex:none;
  }
  .cost .left{padding:32px; gap:40px}
  .cost .right11{padding:32px; gap:40px}

  /* Calculator: left3 слева, left4 справа (шаг 3) */
  .cost .wrapp2{display:flex !important; flex-direction:row !important; gap:16px !important}
  .cost .left3,
  .cost .left4{flex:1 1 0; min-width:0}

  /* KPI: заголовок и показатели в одну строку + размеры как в макете */
  .metrics{padding:56px 24px}
  .metrics .wrapp{flex-direction:row; align-items:center; gap:40px}
  .metrics .left{justify-content:flex-start}
  .metrics .left h2{margin:0}
  .metrics .right{width:auto; gap:40px; font-size:40px}
  .metrics .kpi-value{font-size:40px; line-height:48px}
  .metrics .kpi-label{font-size:16px; line-height:20px; max-width:180px}

  /* Reviews: как десктоп (без переноса) + шрифт отзыва 14 */
  .review-top{flex-wrap:nowrap !important; align-items:center !important}
  .review-left{flex:1; min-width:0; max-width:none}
  .btn-review-leave{margin-left:auto}

    /* Убираем «правую контентную зону» только у контента слайдера,
      а controls оставляем центрированными в рамках wrap. */
    .review-bot{align-items:center}

  .review-content{
    width:100%;
    max-width:none;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    min-width:0;
  }
  .review-rating-card{width:250px; height:220px}
  .review-carousel{
    flex:1;
    min-width:0;
    flex-direction:row !important;
    align-items:stretch;
    height:220px !important;
    overflow:hidden;
    /* Клиппинг по правому краю viewport (как на 1200+) */
    margin-right:calc(50% - 50vw);
    padding-right:calc(50vw - 50%);
  }
  .review-item{flex:0 0 520px; width:520px !important; height:220px !important}
  .review-text{font-size:14px; line-height:18px}
  .btn-review-leave{padding:clamp(12px, 1.6vw, 16px) clamp(41px, 6vw, 84px) !important}

  /* FAQ + Blog: FAQ сверху, блог снизу (как в макете 1024) */
  .faqblog{flex-direction:column !important; align-items:stretch}
  .blog-column{width:100% !important; max-width:none !important}
  .faq-cta-wrapp{flex-wrap:wrap}
  .btn-faq-cta{width:auto; min-width:280px}

  /* CONTACTS (768–1199): убираем calc-ширины из style.css (1/3 + 2/3)
     и делаем 2 fluid колонки без раздувания страницы на ~1020px (субпиксельные округления). */
  #contacts.contact .data{
    flex-direction:row !important;
    align-items:stretch;
    gap:16px !important;
  }
  #contacts .wrapp-left,
  #contacts .bot2{
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }
  #contacts .data,
  #contacts .contact-info-item,
  #contacts .contact-info-content{min-width:0}
  #contacts .contact-info-text,
  #contacts .infomaybesmartru,
  #contacts .div14{overflow-wrap:anywhere; word-break:break-word}
  #contacts .contact-info-note{padding-top:38px;font-size: 16px;}

  /* Footer: раскладка как на макете 1024 (две колонки) */
  .footer{
    width:944px;
    max-width:calc(100% - 80px);
    margin:0 auto;
    min-height:auto;
    display:grid;
    grid-template-columns:385px minmax(0, 1fr);
    grid-template-areas:
      "start cols"
      "caption caption";
    gap:40px;
    padding:32px 0;
    overflow:hidden;
  }
  .footer-start{position:static !important; width:auto; grid-area:start; margin:0}
  .footer-columns{
    position:static !important;
    grid-area:cols;
    margin:0;
    min-width:0;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:clamp(12px, 2.5vw, 24px) !important;
    align-items:start;
    justify-self:stretch;
    max-width:100% !important;
  }
  .footer-col,
  .footer-col:nth-child(1),
  .footer-col:nth-child(2),
  .footer-col-wide{width:auto !important; min-width:0}
  .footer-caption{position:static !important; transform:none !important; grid-area:caption; justify-self:center; margin-top:20px; text-align:center; left:auto; bottom:auto}
}

/* Hero buttons sizing: 1200px тоже должен попадать в диапазон 768–1200 */
@media (min-width: 768px) and (max-width: 1200px){
  .hero-actions .btn.hero-primary,
  .hero-actions .btn.hero-outline{
    min-height:56px !important;
    padding:0 20px !important;
    min-width:282px !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:start;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Footer: mobile — footer-start сверху, затем columns (3 колонки), затем caption */
@media (max-width: 767px){
  .footer{min-height:auto !important; display:flex !important; flex-direction:column !important}
  .footer-start,
  .footer-columns,
  .footer-caption{position:static !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important}

  .footer-start{order:1; width:100% !important; margin:0 0 24px 0 !important}
  .footer-columns{
    order:2;
    width:100% !important;
    margin:0 0 20px 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:clamp(8px, 3vw, 16px) !important;
    align-items:start;
    max-width:100% !important;
  }
  .footer-col,
  .footer-col:nth-child(1),
  .footer-col:nth-child(2),
  .footer-col-wide{width:auto !important; min-width:0}

  .footer-caption{order:3; width:100% !important; text-align:center !important; margin:0 !important}

  /* Prevent any footer content from widening the page */
  .footer{overflow-x:hidden !important;}
  .footer-link,
  .footer-contact-text{min-width:0; overflow-wrap:anywhere; word-break:break-word;}
}

/* Footer: <520px — columns ratio 70/90/136 (Figma proportions) */
@media (max-width: 520px){
  .footer-columns{
    grid-template-columns:minmax(0, 70fr) minmax(0, 90fr) minmax(0, 136fr) !important;
  }
}

/* 768–450: h1/lead и размеры hero-кнопок (включая 768px) */
@media (min-width: 450px) and (max-width: 768px){
  h1{font-size:40px !important; line-height:48px !important; font-weight:600 !important;}
  .lead{font-size:20px !important; line-height:24px !important;}

  .hero{height:700px !important;}

  .hero-actions .btn,
  .btn.hero-primary,
  .btn.hero-outline{font-size:16px !important; line-height:100% !important; font-weight:500 !important;}

  .hero-actions .btn.hero-primary,
  .hero-actions .btn.hero-outline{
    min-height:48px !important;
    padding:0 18px !important;
    min-width:258px !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:start;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Solutions (Chooser) typography: 768–450 */
  #solutions .system-card .system-title{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  #solutions .system-card .system-section h4{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #solutions .system-card .system-list{font-size:12px !important; line-height:12px !important;}
  #solutions .chooser .chooser-title{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  #solutions .system-card .btn.primary.block{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  #solutions .system-card .btn.primary.block b{font-weight:inherit;}

  /* Projects typography: 768–450 */
  #projects .proj-header{margin-bottom:32px !important;}
  #projects h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  #projects .subtext{font-size:16px !important; line-height:20px !important;}
  #projects .btn.primary.block{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  #projects .btn.primary.block b{font-weight:inherit;}

  #projects .proj-item h5{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #projects .proj-item .textmuted{font-size:14px !important; line-height:16px !important;}
  #projects .proj-item .tag{font-size:12px !important; line-height:12px !important;}
  #projects .proj-item .tags-link{font-size:14px !important; line-height:100% !important; font-weight:500 !important;}

  /* How-system typography: 768–450 */
  #how-system h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  #how-system .seg button{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #how-system .label-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  #how-system .label-list div{font-size:12px !important; line-height:12px !important;}

  /* Work stages (how) typography: 768–450 */
  #how h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  #how .subtext{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #how .seg button{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #how .stage-number{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #how .stage-content h5{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #how .stage-item .sub-text{font-size:14px !important; line-height:16px !important;}

  /* Calculator (cost) typography: 768–450 */
  .calculator-section h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  .calculator-section .subtext,
  .calculator-section .cost .sub-text{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  .calculator-section .cost .text-parent .text h3{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .choice-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  .calculator-section .choice-subtitle{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .segment,
  .calculator-section .cost .segment .label{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  .calculator-section .cost .item2{font-size:16px !important; line-height:20px !important; font-weight:400 !important;}
  .calculator-section .cost .wrapp2{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .headline{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  .calculator-section .cost .headline2{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .cost .wrapp12{font-size:16px !important; line-height:20px !important; font-weight:400 !important;}
  .calculator-section .cost .headline19{font-size:24px !important; line-height:28px !important; font-weight:600 !important;}

  /* Calculator CTA (component-2) */
  .calculator-section .cost .component-2{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  .calculator-section .cost .button{font-size:inherit !important;}

  /* Metrics typography + layout: 450–768 */
  .metrics .wrapp{flex-direction:column !important; align-items:stretch !important; gap:24px !important;}
  .metrics .left{justify-content:flex-start !important; width:100% !important;}
  .metrics .left h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important; margin:0 !important;}
  .metrics .right{width:100% !important; gap:16px !important; justify-content:space-between !important; flex-wrap:nowrap !important; overflow:hidden !important;}
  .metrics .item{flex:1 1 0 !important; min-width:0 !important;}
  .metrics .kpi-label{max-width:none !important;}
  .metrics .kpi-value{font-size:32px !important; line-height:40px !important; font-weight:500 !important;}
  .metrics .kpi-label{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
}

/* <450: h1/lead ещё компактнее */
@media (max-width: 449px){
  h1{font-size:28px !important; line-height:32px !important; font-weight:600 !important;}
  .lead{font-size:14px !important; line-height:16px !important;}

  .hero{height:530px !important;}

  .hero-actions .btn,
  .btn.hero-primary,
  .btn.hero-outline{font-size:16px !important; line-height:100% !important; font-weight:500 !important;}

  .hero-actions .btn.hero-primary,
  .hero-actions .btn.hero-outline{
    min-height:44px !important;
    padding:0 16px !important;
    min-width:200px !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:start;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Benefits: <450px (по макету) */
  #solutions .benefits{margin:30px 0 20px !important;}
  #solutions .benefits-list.is-marquee{padding-bottom:0 !important;}
  #solutions .benefit{min-width:0 !important; margin-right:12px !important;}
  #solutions .benefits h5{min-height:0 !important;}
  #solutions .benefits .h5{margin-bottom:0 !important;}

  /* Solutions (Chooser) typography: <450 */
  #solutions .system-card .system-title{font-size:20px !important; line-height:24px !important; font-weight:500 !important;}
  #solutions .system-card .system-section h4{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #solutions .system-card .system-list{font-size:12px !important; line-height:12px !important;}
  #solutions .chooser .chooser-title{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  #solutions .system-card .btn.primary.block{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  #solutions .system-card .btn.primary.block b{font-weight:inherit;}

  /* Projects typography: <450 */
  #projects h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  #projects .subtext{font-size:14px !important; line-height:16px !important;}
  #projects .btn.primary.block{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  #projects .btn.primary.block b{font-weight:inherit;}

  #projects .proj-header .btn.primary.block{padding:11px 41px !important;}

  #projects .proj-item h5{font-size:14px !important; line-height:16px !important; font-weight:500 !important; padding-bottom:8px !important;}
  #projects .proj-item .textmuted{font-size:12px !important; line-height:12px !important; padding-bottom:8px !important;}
  #projects .proj-item h5{padding-bottom:8px !important;}
  #projects .proj-item .textmuted{padding-bottom:8px !important;}
  #projects .proj-item .tag{font-size:12px !important; line-height:12px !important;}
  #projects .proj-item .tags-link{font-size:14px !important; line-height:100% !important; font-weight:500 !important;}

  /* Projects layout tweaks: header spacing */
  #projects .proj-header{gap:20px !important; margin-bottom:20px !important;}
  #projects .proj-header h2{margin-bottom:8px !important;}
  #projects .proj-header .btn.primary.block{margin:0 !important;}

  #projects .proj-item-inner{padding:20px !important;}

  /* Projects tags-list: list with bullets, tags-link below */
  #projects .proj-item .tags{flex-direction:column !important; align-items:flex-start !important; gap:18px !important;}
  #projects .proj-item .tags-list{display:grid !important; gap:12px !important;}
  #projects .proj-item .tags-link{display:block; white-space:normal !important;}

  #projects .proj-item .tags-list .tag{
    position:relative;
    display:block;
    padding:0 0 0 14px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
  }
  #projects .proj-item .tags-list .tag::before{
    content:"";
    position:absolute;
    left:0;
    top:3px;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#a99aff;
  }

  /* How-system typography: <450 */
  #how-system h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  #how-system .seg button{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  #how-system .label-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  #how-system .label-list div{font-size:12px !important; line-height:12px !important;}
  #how-system .how-system-header{gap:20px !important; margin-bottom:20px !important;}
  #how-system .how-system-header{gap:20px !important; margin-bottom:20px !important;}

  /* Work stages (how) typography: <450 */
  #how h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  #how .subtext{font-size:14px !important; line-height:16px !important;}
  #how h2{margin-bottom:8px !important;}
  #how .stages-header{gap:20px !important; margin-bottom:20px !important;}
  #how .stages-wrapper{margin-top:0 !important;}
  #how h2{margin-bottom:8px !important;}
  #how .stages-header{gap:20px !important; margin-bottom:20px !important;}
  #how .stages-wrapper{margin-top:0 !important;}
  #how .seg button{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  #how .stage-number{font-size:14px !important; line-height:16px !important;}
  #how .stage-content h5{font-size:14px !important; line-height:16px !important;}
  #how .stage-item .sub-text{font-size:12px !important; line-height:12px !important;}

  /* Calculator (cost) typography: <450 */
  .calculator-section h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .subtext,
  .calculator-section .cost .sub-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .text-parent .text h3{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  .calculator-section .choice-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  .calculator-section .choice-subtitle{font-size:12px !important; line-height:12px !important; font-weight:400 !important;}
  .calculator-section .cost .segment,
  .calculator-section .cost .segment .label{font-size:12px !important; line-height:12px !important; font-weight:500 !important;}
  .calculator-section .cost .item2{font-size:16px !important; line-height:20px !important; font-weight:400 !important;}
  .calculator-section .cost .wrapp2{font-size:12px !important; line-height:12px !important; font-weight:400 !important;}
  .calculator-section .cost .headline{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .cost .headline2{font-size:20px !important; line-height:24px !important; font-weight:500 !important;}
  .calculator-section .cost .wrapp12{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .headline19{font-size:20px !important; line-height:24px !important; font-weight:600 !important;}

  /* Calculator CTA (component-2) */
  .calculator-section .cost .component-2{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  .calculator-section .cost .button{font-size:inherit !important;}

  /* Metrics typography + layout: <450 */
  .metrics .wrapp{flex-direction:column !important; align-items:stretch !important; gap:20px !important;}
  .metrics .left{justify-content:flex-start !important; width:100% !important;}
  .metrics .left h2{font-size:22px !important; line-height:28px !important; font-weight:500 !important; margin:0 !important;}
  .metrics .right{width:100% !important; gap:12px !important; justify-content:space-between !important; flex-wrap:nowrap !important; overflow:hidden !important;}
  .metrics .item{flex:1 1 0 !important; min-width:0 !important;}
  .metrics .kpi-label{max-width:none !important;}
  .metrics .kpi-value{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  .metrics .kpi-label{font-size:12px !important; line-height:12px !important; font-weight:400 !important;}
}

/* How-system labels: всегда прижаты к краям блока */
#how-system .label-left{left:0 !important;}
#how-system .label-right{right:0 !important;}

/* How-system typography: 1400–768 */
@media (min-width: 768px) and (max-width: 1400px){
  #how-system h2{font-size:32px !important; line-height:40px !important; font-weight:500 !important;}
  #how-system .seg button{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #how-system .label-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  #how-system .label-list div{font-size:14px !important; line-height:16px !important;}

  /* Work stages (how) typography: 1400–768 */
  #how h2{font-size:32px !important; line-height:40px !important; font-weight:500 !important;}
  #how .subtext{font-size:18px !important; line-height:24px !important;}
  #how .seg button{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #how .stage-number{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  #how .stage-content h5{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  #how .stage-item .sub-text{font-size:14px !important; line-height:16px !important;}

  /* Calculator (cost) typography: 1400–768 */
  .calculator-section h2{font-size:32px !important; line-height:40px !important; font-weight:500 !important;}
  .calculator-section .subtext,
  .calculator-section .cost .sub-text{font-size:18px !important; line-height:24px !important; font-weight:400 !important;}
  .calculator-section .cost .text-parent .text h3{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .choice-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important;}
  .calculator-section .choice-subtitle{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .segment,
  .calculator-section .cost .segment .label{font-size:14px !important; line-height:16px !important; font-weight:500 !important;}
  .calculator-section .cost .item2{font-size:16px !important; line-height:20px !important; font-weight:400 !important;}
  .calculator-section .cost .wrapp2{font-size:14px !important; line-height:16px !important; font-weight:400 !important;}
  .calculator-section .cost .headline{font-size:32px !important; line-height:40px !important; font-weight:500 !important;}
  .calculator-section .cost .headline2{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  .calculator-section .cost .wrapp12{font-size:18px !important; line-height:24px !important; font-weight:400 !important;}
  .calculator-section .cost .headline19{font-size:28px !important; line-height:32px !important; font-weight:600 !important;}

  /* Calculator CTA (component-2) */
  .calculator-section .cost .component-2{font-size:16px !important; line-height:100% !important; font-weight:500 !important;}
  .calculator-section .cost .button{font-size:inherit !important;}
}

/* Metrics typography: 768–1200 */
@media (min-width: 768px) and (max-width: 1200px){
  .metrics .left h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  .metrics .kpi-value{font-size:40px !important; line-height:48px !important; font-weight:500 !important;}
  .metrics .kpi-label{font-size:16px !important; line-height:20px !important; font-weight:400 !important;}
}

/* How-system: <400 — tighter seg buttons */
@media (max-width: 399px){
  #how-system .seg button{padding:8px 4px !important;}
}

/* Work stages header: >768 без переноса */
@media (min-width: 769px){
  .stages-header{flex-wrap:nowrap !important;}
}

/* How-system: <520px — фиксируем высоту и поднимаем левый лейбл */
@media (max-width: 520px){
  #how-system .comparison-slider-wrapper{min-height:500px !important;}
  #how-system .comparison-slider{height:500px !important;}
  #how-system .comparison-slider{touch-action:none;}

  /* How-system comparison: вертикальный режим (сверху-вниз) на <520 */
  #how-system .image-before{clip-path:inset(0 0 50% 0);}
  #how-system .slider-divider{left:0 !important; top:50%; width:100% !important; height:2px !important;}
  /* Делаем range квадратным (500x500), чтобы после rotate ход thumb совпадал с высотой слайдера */
  #how-system .comparison-slider .slider-handle{
    cursor:ns-resize !important;
    width:500px !important;
    height:100% !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) rotate(-90deg) !important;
    transform-origin:center !important;
  }
  #how-system .comparison-slider .slider-handle::-webkit-slider-thumb{cursor:ns-resize !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23A99AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='20' y2='12'/><polyline points='9,7 4,12 9,17'/><polyline points='15,7 20,12 15,17'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:18px 18px;}
  #how-system .comparison-slider .slider-handle::-moz-range-thumb{cursor:ns-resize !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23A99AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='20' y2='12'/><polyline points='9,7 4,12 9,17'/><polyline points='15,7 20,12 15,17'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:18px 18px;}

  #how-system .label-left{top:24px !important; bottom:auto !important;}
  #how-system .label-right{bottom:24px !important; top:auto !important;}

  /* Projects: spacing on <520 */
  #projects .proj-item h5{padding-bottom:8px !important;}
  #projects .proj-item .textmuted{padding-bottom:8px !important;}

  /* How-system header spacing on <520 */
  #how-system .how-system-header{gap:20px !important; margin-bottom:20px !important;}

  /* Work stages (how): <520 — карусель как benefits (<480) */
  #how .stages-wrapper{display:block !important;}
  #how .stages-diagram{display:none !important;}
  #how .stages-image{display:none !important;}
  #how .stages-mobile-hero{display:block !important; margin:0 0 20px 0}
  #how .stages-mobile-hero-img{width:100%; height:auto; display:block}
  #how .stages-list{
    display:flex !important;
    flex-direction:row !important;
    gap:16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    backdrop-filter:none !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  #how .stages-list::-webkit-scrollbar{height:0}
  #how .stage-item{
    flex:0 0 auto !important;
    width:60.666vw !important;
    flex-basis:60.666vw !important;
    min-width:0 !important;
    padding:16px !important;
    border-radius:24px !important;
    background:rgba(255,255,255,0.04) !important;
    border:1px solid rgba(255,255,255,0.24) !important;
    scroll-snap-align:start;
  }

  /* Work stages spacing on <520 */
  #how h2{margin-bottom:8px !important;}
  #how .stages-header{gap:20px !important; margin-bottom:20px !important;}

  /* Included: spacing on <520 */
  #included h2{margin-bottom:10px !important;}
  #included .inclheader{margin-bottom:20px !important;}
  #included .incl{gap:10px !important;}
  #included .card.white.feature{padding:16px !important; gap:10px !important;}

  /* Pricing: <520 spacing */
  #pricing .plans-head h2{margin-bottom:8px !important;}
  #pricing .plans-head{margin-bottom:20px !important;}
  #pricing .plan-top-header{margin-bottom:16px !important;}
  #pricing .plan-price{margin-bottom:10px !important;}
  #pricing .plan-wrapp{gap:20px !important;}
  #pricing .plan-data{margin-bottom:20px !important;}
  #pricing .plan-bot{margin-top:20px !important;}
  #pricing .btn.primary.block.pick-plan{margin:0 20px 20px 20px !important;}
  #pricing .plan-list.plan-list-scroll{gap:12px !important;}

  /* Calculator: <520 spacing */
  .cost .left{padding:16px !important; gap:20px !important;}
  .cost .top{gap:8px !important;}
  .cost .text h3{margin:0 !important;}
  .cost .text-parent{gap:16px !important;}
  .choicebox,
  .choicebox2{padding:16px !important;}
  .choice{gap:10px !important;}
  .cost .frame-parent{gap:20px !important;}
  .control.active,
  .control2{border-radius:9999px !important;}
  .right11{padding:16px !important; gap:20px !important;}
  .top-parent{gap:20px !important;}
  .frame-group{gap:20px !important;}

  /* Metrics: <520 spacing */
  .metrics{padding:16px !important;}
  .metrics .wrapp{gap:16px !important;}
  .metrics .item{gap:12px !important;}
}

@media (max-width: 767px){
  #pricing .plans-nav{display:flex !important;}
  #pricing .plans-dot{background:transparent !important; border:1px solid #555559 !important; box-sizing:border-box; border-radius:50% !important;}
  #pricing .plans-dot[aria-current="true"]{background-color:#a99aff !important; border:0 !important;}
}

/* Work stages (how): 520–1199 — wireless items should be 1-2 left, 3-4 right */
@media (min-width: 520px) and (max-width: 1199px){
  #how .stage-item[data-stage="wireless"][data-stage-num="1"]{grid-column:1; grid-row:1;}
  #how .stage-item[data-stage="wireless"][data-stage-num="2"]{grid-column:1; grid-row:2;}
  #how .stage-item[data-stage="wireless"][data-stage-num="3"]{grid-column:2; grid-row:1;}
  #how .stage-item[data-stage="wireless"][data-stage-num="4"]{grid-column:2; grid-row:2;}
}

/* Work stages (how): 768–520 — схема снизу (как на планшете) */
@media (min-width: 520px) and (max-width: 767px){
  .stages-wrapper{
    grid-template-columns:1fr;
    gap:24px;
    align-items:stretch;
  }
  .stages-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:16px;
    padding:0;
    background:transparent;
    border:0;
    backdrop-filter:none;
  }
  .stage-item{
    padding:22px;
    border-radius:24px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.24);
  }
  .stages-diagram{min-height:auto}
}

/* Reviews: сохраняем горизонтальный слайдер и клиппинг до мобильного (перебиваем style.css @max-width:1200) */
@media (min-width: 769px) and (max-width: 960px){
  .review-content{flex-direction:row !important; flex-wrap:nowrap !important; align-items:stretch; min-width:0}
  .review-rating-card{flex:0 0 250px; width:250px; height:auto !important}
  .review-carousel{
    flex:1;
    min-width:0;
    flex-direction:row !important;
    align-items:stretch;
    height:auto !important;
    overflow:hidden;
    /* Клиппинг по правому краю viewport (как на 1200+) */
    margin-right:calc(50% - 50vw);
    padding-right:calc(50vw - 50%);
  }
  .review-item{flex:0 0 520px; width:520px; height:auto !important}
}

/* FAQ: 1024–1450 — faq-left на всю ширину контентной зоны */
@media (min-width: 1024px) and (max-width: 1450px){
  #faq .faqblog{flex-direction:column !important; align-items:stretch !important}
  #faq .faq-left{width:100% !important; max-width:none !important}
  #faq .blog-column{width:100% !important; max-width:none !important}
}

/* Projects: переключатель (dots/tablist) не показываем на ширине >1450 */
@media (min-width: 1451px){
  #projects .proj-list .bot{display:none !important}
  #pricing .plans-nav{display:none !important;}
}

/* 1200–1450: выбранные секции должны выглядеть как «планшет» */
@media (min-width: 1200px) and (max-width: 1450px){
  /* Ограничиваем ширину контента только в нужных секциях */
  #solutions > .wrap,
  #projects > .wrap,
  #how-system > .wrap,
  #included > .wrap,
  #pricing > .wrap,
  .metrics-section > .wrap,
  #faq > .wrap,
  #contacts > .wrap{
    width:1600px !important;
    max-width:85% !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Типографика внутри этих секций */
  #solutions h2,
  #projects h2,
  #how-system h2,
  #included h2,
  #pricing h2,
  .metrics-section h2,
  #faq h2{font-size:32px !important; line-height:38px !important}

  #solutions .subtext,
  #projects .subtext,
  #how-system .subtext,
  #included .subtext,
  #pricing .subtext,
  #faq .subtext{font-size:18px !important; line-height:22px !important}

  #pricing .seg button,
  #pricing .segbtn-plans{font-size:18px !important; line-height:22px !important}

  /* Benefits + Chooser */
  #solutions .benefits-list{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:0;
    flex-wrap:nowrap;
  }
  #solutions .benefit{
    gap:10px;
    align-items:flex-start;
    flex:0 1 auto;
    min-width:0;
  }
  #solutions .benefits h5{
    font-size:16px;
    line-height:20px;
    font-weight:500;
    white-space:normal;
    overflow-wrap:anywhere;
    min-height:40px;
  }
  #solutions .benefit-icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
  }
  #solutions .benefit-icon img{
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    object-fit:contain;
    flex:0 0 auto;
  }
  #solutions .benefit-icon--wide{width:28px}
  #solutions .benefit-icon--wide img{width:28px; height:18px; min-width:28px; min-height:18px; object-fit:contain}
  #solutions .benefit-text,
  #solutions .benefits .h5{
    white-space:normal;
    min-width:0;
  }

  /* Chooser: компоновка переопределяется ниже отдельным правилом (768–1450) */

  /* Projects */
  #projects .projects{
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "list";
  }
  #projects .proj-preview{grid-area:preview}
  #projects .proj-list{grid-area:list}
  #projects .preview-box{min-height:420px}
  #projects .proj-header{margin-bottom:16px !important; flex-wrap:nowrap !important;}
  #projects .proj-header .btn.primary.block{padding:15px 84px !important}
  #projects .proj-items{gap:0}
  #projects .proj-item{display:none}
  #projects .proj-item[aria-selected="true"]{display:block}
  #projects .proj-list .bot{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:16px;
  }
  #projects .proj-list .bot .dot,
  #projects .proj-list .bot .dot2{
    appearance:none;
    padding:0;
    cursor:pointer;
    height:14px;
    width:14px;
    position:relative;
    border-radius:50%;
    background:transparent;
  }
  #projects .proj-list .bot .dot{background-color:#a99aff; border:0}
  #projects .proj-list .bot .dot2{border:1px solid #555559; box-sizing:border-box}
  #projects .proj-preview .divider-dots{display:none}

  /* How-system */
  #how-system .wrap{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "slider"
      "seg";
  }
  #how-system .how-system-header{display:contents}
  #how-system .how-system-header h2{grid-area:title; margin-bottom:40px}
  #how-system .comparison-slider-wrapper{grid-area:slider}
  #how-system .how-system-header .seg{grid-area:seg; justify-self:center; margin-top:20px}

  /* INCLUDED */
  #included .incl{grid-template-columns:1fr 1fr}
  #included .feature{padding:24px; gap:24px}
  #included .feature-content{padding:0}
  #included .feature-list{list-style:none; padding-left:0}
  #included .feature-list li{font-size:14px; line-height:16px; font-weight:400; position:relative; padding-left:12px}
  #included .feature-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:6px;
    height:6px;
    border-radius:999px;
    background:#C8C8D2;
  }
  #included .feature-img{width:200px; height:200px; max-width:100%; object-fit:cover; border-radius:12px; position:relative; overflow:hidden}

  /* PRICING */
  #pricing .plans-head{flex-wrap:nowrap; align-items:flex-start}
  #pricing .plans-head > div:first-child{flex:1; min-width:0}
  #pricing .seg-plans{margin-left:auto}

  #pricing .plans{
    --plan-card-w: 520px;
    display:flex;
    flex-wrap:nowrap;
    gap:20px;
    align-items:stretch;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow-x:auto;
    overflow-y:hidden !important;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    -webkit-overflow-scrolling: touch;
  }
  #pricing .plans::-webkit-scrollbar{height:0}
  #pricing .plan-item{flex:0 0 var(--plan-card-w); width:var(--plan-card-w); height:auto; min-height:557px; scroll-snap-align:center}
  #pricing .plan-item.plan-featured{width:var(--plan-card-w); min-height:577px; justify-self:auto}

  #pricing .plans-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px}
  #pricing .plans-dot{appearance:none; padding:0; cursor:pointer; height:16px; width:16px; border-radius:50%; background:transparent; border:1px solid #555559; box-sizing:border-box}
  #pricing .plans-dot[aria-current="true"]{background-color:#a99aff; border:0}

  /* KPI */
  .metrics-section .metrics{padding:56px 24px}
  .metrics-section .metrics .wrapp{flex-direction:row; align-items:center; gap:40px}
  .metrics-section .metrics .left{justify-content:flex-start}
  .metrics-section .metrics .left h2{margin:0}
  .metrics-section .metrics .right{width:auto; gap:40px; font-size:40px}
  .metrics-section .metrics .kpi-value{font-size:40px; line-height:48px}
  .metrics-section .metrics .kpi-label{font-size:16px; line-height:20px; max-width:180px}

  /* FAQ */
  #faq .faqblog{flex-direction:column !important; align-items:stretch}
  #faq .blog-column{width:100% !important; max-width:none !important}
  #faq .faq-cta-wrapp{flex-wrap:wrap}
  #faq .btn-faq-cta{width:auto; min-width:280px}

  /* CONTACTS */
  #contacts.contact .data{flex-direction:row !important; align-items:stretch; justify-content:space-between; gap:16px !important}
  #contacts .wrapp-left,
  #contacts .bot2{flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important}
  #contacts .contact-info-note{padding-top:20px;}

  /* Контакты: типографика как в макете для 768–1199 */
  #contacts .wrapp-left .headline2{font-size:22px !important; line-height:26px !important}
  #contacts .contact-info-title{font-size:16px !important; line-height:20px !important}
  #contacts .contact-info-text{font-size:14px !important; line-height:18px !important}
  #contacts .schedule-row{font-size:14px !important; line-height:18px !important}

  /* Чтобы блок не вылезал за контентную зону из-за длинных строк (email/телефон) */
  #contacts .data,
  #contacts .wrapp-left,
  #contacts .bot2,
  #contacts .contact-info-item,
  #contacts .contact-info-content{min-width:0}

  #contacts .contact-info-text,
  #contacts .infomaybesmartru,
  #contacts .div14{overflow-wrap:anywhere; word-break:break-word}
}

/* Chooser: 1450–768 — один общий фон, logo/title сверху, две карточки рядом (как в макете) */
@media (min-width: 768px) and (max-width: 1450px){
  #solutions .chooser{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    height:auto;
    padding:32px;

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "logo logo"
      "title title"
      "wireless wired";
    gap:16px;
    align-items:stretch;

    /* Градиенты на самом блоке; картинку делаем через ::before, чтобы управлять прозрачностью */
    background-image:
      radial-gradient(circle at right bottom, rgba(255,255,255,0.04) 0%, transparent 40%),
      radial-gradient(circle at left bottom, rgba(255,255,255,0.40) 0%, rgba(192,182,255,0.40) 5%, rgba(127,107,255,0.40) 10%, rgba(97,81,194,0.53) 14%, rgba(64,54,128,0.68) 19%, rgba(56,47,113,0.71) 24%, rgba(48,40,96,0.76) 29%, rgba(40,33,80,0.80) 33%, rgba(32,27,64,0.84) 38%, rgba(28,23,56,0.86) 43%, rgba(24,20,48,0.88) 48%, rgba(21,18,43,0.89) 52%, rgba(20,17,40,0.90) 57%, rgba(18,15,35,0.91) 62%, rgba(16,13,32,0.92) 67%, rgba(16,14,31,0.93) 71%, rgba(16,14,30,0.94) 76%, rgba(17,15,29,0.95) 81%, rgba(17,16,28,0.96) 86%, rgba(17,16,27,0.97) 90%, rgba(17,17,26,0.98) 95%, rgba(18,18,24,1.00) 100%);
    background-repeat:no-repeat, no-repeat;
    background-size:cover, cover;
    background-position:right bottom, left bottom;
  }

  /* chooser-back.png: делаем полупрозрачной (десктоп/планшет) */
  #solutions .chooser::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url('images/chooser-back.png');
    background-size:68% 110%;
    background-position:-120% 0%;
    background-repeat:no-repeat;
    opacity:.35;
    pointer-events:none;
    z-index:0;
  }

  /* Разворачиваем внутреннюю разметку в сетку .chooser, не меняя HTML */
  #solutions .chooser-left,
  #solutions .chooser-right{display:contents}

  /* Убираем «фон» с chooser-left (фон теперь на .chooser) */
  #solutions .chooser-left{background:transparent !important; border-radius:0 !important; overflow:visible !important; justify-content:stretch !important}
  #solutions .chooser-left::before,
  #solutions .chooser-left::after{content:none !important}

  /* Элементы поверх фоновых псевдоэлементов */
  #solutions .chooser-logo,
  #solutions .chooser-title,
  #solutions .system-card{position:relative; z-index:1}

  #solutions .chooser-logo{
    grid-area:logo;
    position:static !important;
    top:auto !important;
    left:auto !important;
    height:30px;
  }
  #solutions .chooser-title{
    grid-area:title;
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 0 8px;
    max-width:560px;
    font-size:32px !important;
    line-height:40px !important;
    font-weight:500 !important;
  }

  #solutions .system-title{font-size:24px !important; line-height:28px !important; font-weight:500 !important;}
  #solutions .system-card .btn.primary.block{font-weight:700 !important;}
  #solutions .system-card .btn.primary.block b{font-weight:inherit;}

  #solutions .wired-system{grid-area:wired}
  #solutions .wireless-system{grid-area:wireless}
  #solutions .system-card{width:100% !important; max-width:none !important}

  /* Projects: <1450 склеиваем preview + list и делаем небольшой нахлёст */
  #projects .projects{gap:0 !important}
  #projects .proj-preview{
    position:relative;
    z-index:1;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  #projects .preview-box{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  #projects .proj-list{
    margin-top:-24px;
    position:relative;
    z-index:2;
  }

  /* Projects typography: 1450–768 */
  #projects .proj-header{flex-wrap:nowrap !important;}
  #projects .subtext{font-size:18px !important; line-height:24px !important;}
  #projects .btn.primary.block{font-size:16px !important; line-height:100% !important; font-weight:500 !important;}
  #projects .btn.primary.block b{font-weight:inherit;}

  #projects .proj-item h5{font-size:22px !important; line-height:28px !important; font-weight:500 !important;}
  #projects .proj-item .textmuted{font-size:14px !important; line-height:16px !important;}
  #projects .proj-item .tag{font-size:12px !important; line-height:12px !important;}
  #projects .proj-item .tags-link{font-size:16px !important; line-height:100% !important; font-weight:500 !important;}
}

/* Projects: на ширине ровно 768px применяем типографику диапазона 768–450 */
@media (width: 768px){
  #projects .proj-header{margin-bottom:32px !important;}
  #projects h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important;}
  #projects .subtext{font-size:16px !important; line-height:20px !important;}
  #projects .btn.primary.block{font-size:12px !important; line-height:100% !important; font-weight:500 !important;}
  #projects .btn.primary.block b{font-weight:inherit;}

  #projects .proj-item h5{font-size:18px !important; line-height:20px !important; font-weight:500 !important;}
  #projects .proj-item .textmuted{font-size:14px !important; line-height:16px !important;}
  #projects .proj-item .tag{font-size:12px !important; line-height:12px !important;}
  #projects .proj-item .tags-link{font-size:14px !important; line-height:100% !important; font-weight:500 !important;}
}

/* Contacts: 1024–1199 (2 резиновые колонки без фиксированной ширины) */
@media (min-width: 1024px) and (max-width: 1199px){
  #contacts.contact{gap:32px}
  #contacts .top{gap:10px; margin-bottom:50px}
  #contacts .headline{font-size:32px; line-height:40px}
  #contacts .sub-text{font-size:18px; line-height:24px}

  #contacts .data{gap:16px}
  #contacts .wrapp-left{padding:32px; gap:30px}
}

/* Контакты: в 768–1199 запрещаем любые фиксированные ширины колонок
   (на случай, если в другом месте появится `flex-basis/width: 464px !important`). */
@media (min-width: 768px) and (max-width: 1199px){
  #contacts.contact .wrapp-left,
  #contacts.contact .bot2{
    flex:1 1 0 !important;
    flex-basis:0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }
}

/* Contacts: макет 768 (2 колонки 336px в зоне 688px) */
@media (min-width: 768px) and (max-width: 1023px){
  #contacts.contact{gap:32px}
  #contacts .headline{font-size:28px; line-height:32px}
  #contacts .sub-text{font-size:16px; line-height:20px; font-weight:500}

  #contacts .data{gap:16px}
  #contacts .wrapp-left{padding:32px; gap:24px}
}

/* Desktop: карусель отзывов не должна раздувать страницу (кол-во карточек не влияет на ширину) */
@media (min-width: 1200px){
  .review-content{flex-direction:row !important; align-items:center; min-width:0; width:100%; align-self:stretch}
  .mnav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100vh !important;
    padding: calc(99px + 16px) 16px 16px !important;
    z-index: 1000;
    background: rgb(10 11 15 / 94%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
  }
  .mnav.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mnav .mnav-content {
    height: 100%;
    overflow: auto;
    width: 100%;
    padding: 12px;
    color: #eef0f6 !important;
  }
  .mnav .mnav-content a {
    color: rgba(238, 240, 246, 0.86) !important;
  }
  .mnav .mnav-content a:hover {
    color: #eef0f6 !important;
  }
  .mnav a {
    color: #eef0f6;
    white-space: nowrap;
  }
  .mnav a:hover {
    background: rgba(255, 255, 255, .06);
  }
}

@media (max-width: 860px){
  nav ul{display:none}
  .burger{display:flex}
  .mnav{
    display:block;
    position:fixed;
    top:99px;
    left:0;
    width:min(420px, 92vw);
    height:calc(100vh - 99px);
    padding:16px;
    z-index:1000;
    background:rgba(10,11,15,.55);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transform:translateX(-110%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease, visibility .22s ease;
  }
  .mnav.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .brand{min-width:auto}
  /* До 480px телефон должен оставаться видимым (перебиваем style.css) */
  .phone{display:flex !important;}
  /* До 860px убираем канал */
  .channel{display:none !important;}
  .hero-card{padding:22px}
  .hero-actions .btn{width:100%; padding:12px 18px}
}

/* 603–480: чтобы не было переноса контактов — убираем телефон */
@media (max-width: 602px){
  .phone{display:none !important;}
  header .region{margin-left:auto !important; white-space:nowrap;}
}

/* Ниже 385px: уменьшаем адрес и разрешаем переносы */
@media (max-width: 384px){
  header .region{
    font-size:12px;
    line-height:14px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media (max-width: 767px){
  /* Header: burger всегда слева, контакты справа */
  .nav{justify-content:flex-start; flex-wrap:nowrap}
  .nav-right{display:contents; margin-left:0}
  .burger{order:-1}
  .brand{order:0}
  .phone{order:1; margin-left:auto}
  .region{order:2}
  .channel{order:3}

  /* Hero: чтобы кнопки не ужимались — одна колонка */
  .hero-actions{grid-template-columns:1fr}

  /* Projects: <768 структура как на планшете + склейка и нахлёст */
  #projects .projects{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "preview"
      "list";
    gap:0 !important;
  }
  #projects .proj-preview{grid-area:preview}
  #projects .proj-list{grid-area:list}
  #projects .proj-preview{
    position:relative;
    z-index:1;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  #projects .preview-box{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  #projects .proj-list{
    margin-top:-24px;
    position:relative;
    z-index:2;
  }

  /* Projects: <768 показываем один item + точки переключения снизу (bot) */
  #projects .proj-items{gap:0}
  #projects .proj-item{display:none}
  #projects .proj-item[aria-selected="true"]{display:block}
  #projects .proj-list .bot{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:16px;
  }
  #projects .proj-list .bot .dot,
  #projects .proj-list .bot .dot2{
    appearance:none;
    padding:0;
    cursor:pointer;
    height:14px;
    width:14px;
    position:relative;
    border-radius:50%;
    background:transparent;
  }
  #projects .proj-list .bot .dot{background-color:#a99aff; border:0}
  #projects .proj-list .bot .dot2{border:1px solid #555559; box-sizing:border-box}

  /* Chooser: <768 — тот же общий фон/лого/тайтл, карточки друг под другом */
  #solutions .chooser{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    height:auto;
    padding:16px;

    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "logo"
      "title"
      "wireless"
      "wired";
    gap:16px;

      /* Градиенты на самом блоке; картинка будет в ::before и займёт 50% высоты блока */
      background-image:
        radial-gradient(circle at right bottom, rgba(255,255,255,0.04) 0%, transparent 40%),
        radial-gradient(circle at left bottom, rgba(255,255,255,0.40) 0%, rgba(192,182,255,0.40) 5%, rgba(127,107,255,0.40) 10%, rgba(97,81,194,0.53) 14%, rgba(64,54,128,0.68) 19%, rgba(56,47,113,0.71) 24%, rgba(48,40,96,0.76) 29%, rgba(40,33,80,0.80) 33%, rgba(32,27,64,0.84) 38%, rgba(28,23,56,0.86) 43%, rgba(24,20,48,0.88) 48%, rgba(21,18,43,0.89) 52%, rgba(20,17,40,0.90) 57%, rgba(18,15,35,0.91) 62%, rgba(16,13,32,0.92) 67%, rgba(16,14,31,0.93) 71%, rgba(16,14,30,0.94) 76%, rgba(17,15,29,0.95) 81%, rgba(17,16,28,0.96) 86%, rgba(17,16,27,0.97) 90%, rgba(17,17,26,0.98) 95%, rgba(18,18,24,1.00) 100%);
      background-repeat:no-repeat, no-repeat;
      background-size:cover, cover;
      background-position:right bottom, left bottom;
  }

  /* chooser-back.png: на мобилке 50% высоты блока и более прозрачная */
  #solutions .chooser::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:50%;
    background-image:url('images/chooser-back.png');
    background-size:68% 100%;
    background-position:-120% 0%;
    background-repeat:no-repeat;
    opacity:.25;
    pointer-events:none;
    z-index:0;
  }

  #solutions .chooser-left,
  #solutions .chooser-right{display:contents}

  #solutions .chooser-left{background:transparent !important; border-radius:0 !important; overflow:visible !important; justify-content:stretch !important}
  #solutions .chooser-left::before,
  #solutions .chooser-left::after{content:none !important}

  #solutions .chooser-logo,
  #solutions .chooser-title,
  #solutions .system-card{position:relative; z-index:1}

  #solutions .chooser-logo{grid-area:logo; position:static !important; height:24px; margin-bottom:20px;}
  #solutions .chooser-title{
    grid-area:title;
    position:static !important;
    margin:0 0 27px 0;
    max-width:100%;
  }
  #solutions .wired-system{grid-area:wired}
  #solutions .wireless-system{grid-area:wireless}
  #solutions .system-card{width:100% !important; max-width:none !important}

  /* Chooser button spacing */
  #solutions .system-card .btn.primary.block{margin:8px 20px 20px 20px !important;}
}

/* Tablet 768–480: правки для узких планшетов */
@media (min-width: 480px) and (max-width: 767px){
  /* How-system: seg под слайдером, в контентной зоне */
  #how-system .wrap{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "slider"
      "seg";
  }
  #how-system .how-system-header{display:contents}
  #how-system .how-system-header h2{grid-area:title; margin-bottom:24px}
  #how-system .comparison-slider-wrapper{grid-area:slider}
  #how-system .how-system-header .seg{
    grid-area:seg;
    justify-self:center;
    margin-top:16px;
    width:100%;
    max-width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
  }
  #how-system .seg button{
    height:24px !important;
    min-width:24px !important;
    padding:0 8px !important;
    border-radius:12px !important;
    background:transparent !important;
    border:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:24px !important;
    transition:transform 0.15s ease, color 0.2s ease !important;
  }

  /* Benefits: <768 — горизонтальный скролл как на <450 */
  #solutions .benefits{overflow:hidden; margin:24px 0}
  #solutions .benefits-list{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:none;
    gap:14px;
    padding-bottom:6px;
    touch-action:pan-x pan-y;
  }
  #solutions .benefits-list::-webkit-scrollbar{height:0}
  #solutions .benefits-list.is-marquee{scroll-snap-type:none;}
  #solutions .benefits-list.is-marquee .benefit{scroll-snap-align:none;}
  #solutions .benefit{flex:0 0 auto; scroll-snap-align:none; font-size:14px; gap:10px; align-items:flex-start; min-width:220px}
  #solutions .benefits h5{font-size:14px; line-height:18px; min-height:0}
  #solutions .benefit-icon{width:18px; height:18px}
  #solutions .benefit-icon img{width:18px; height:18px; min-width:18px; min-height:18px}

  /* Projects typography: 768–480 */
  #projects .proj-item h5{font-size:18px !important; line-height:22px !important}
  #projects .proj-item .textmuted{font-size:14px !important; line-height:18px !important}

  /* Pricing plans: карусель (featured по центру) */
  #pricing .plans{
    --plan-card-w: min(420px, calc(100vw - 40px));
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    align-items:stretch;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow-x:auto;
    overflow-y:hidden !important;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    -webkit-overflow-scrolling: touch;
  }
  #pricing .plans::-webkit-scrollbar{height:0}
  #pricing .plan-item{
    flex:0 0 var(--plan-card-w);
    width:var(--plan-card-w);
    height:auto;
    min-height:557px;
    scroll-snap-align:center;
  }
  #pricing .plan-item.plan-featured{width:var(--plan-card-w); min-height:577px}
  #pricing .plans-nav{display:flex !important;}
}

/* Mobile начинается ниже 480px */
@media (max-width: 479px){
  /* Pricing plans: на мобилке показываем featured по центру как карусель */
  #pricing .plans{
    --plan-card-w: min(360px, calc(100vw - 28px));
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    align-items:stretch;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow-x:auto;
    overflow-y:hidden !important;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    padding-inline: calc((100vw - var(--plan-card-w)) / 2);
    -webkit-overflow-scrolling: touch;
  }
  #pricing .plans::-webkit-scrollbar{height:0}
  #pricing .plan-item{
    flex:0 0 var(--plan-card-w);
    width:var(--plan-card-w);
    height:auto;
    min-height:557px;
    scroll-snap-align:center;
  }
  #pricing .plan-item.plan-featured{width:var(--plan-card-w); min-height:577px}
  #pricing .plans-nav{display:flex !important;}

  /* Benefits: горизонтальный скролл только на мобилке */
  #solutions .benefits{overflow:hidden}
  #solutions .benefits-list{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:none;
    gap:14px;
    padding-bottom:6px;
    touch-action:pan-x pan-y;
  }
  #solutions .benefits-list::-webkit-scrollbar{height:0}
  /* When JS marquee is enabled, disable snap to avoid jerks */
  #solutions .benefits-list.is-marquee{scroll-snap-type:none;}
  #solutions .benefits-list.is-marquee .benefit{scroll-snap-align:none;}
  #solutions .benefit{flex:0 0 auto; min-width:220px; scroll-snap-align:none; align-items:flex-start; font-size:14px}
  #solutions .benefits h5{font-size:14px; line-height:18px; min-height:36px}
  #solutions .benefit-icon{width:18px; height:18px}
  #solutions .benefit-icon img{width:18px; height:18px; min-width:18px; min-height:18px}
  #solutions .benefit-icon--wide{width:28px}
  #solutions .benefit-icon--wide img{width:28px; height:18px; min-width:28px; min-height:18px; object-fit:contain}

  /* How-system seg: <480 — 14px и по центру; до 360 стараемся держать в одну строку */
  #how-system .how-system-header .seg{
    justify-content:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    gap:6px;
  }
  #how-system .seg button{
    height:24px !important;
    min-width:24px !important;
    padding:0 8px !important;
    border-radius:12px !important;
    background:transparent !important;
    border:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:24px !important;
    transition:transform 0.15s ease, color 0.2s ease !important;
    white-space:nowrap;
  }
  @media (min-width: 360px) and (max-width: 479px){
    #how-system .how-system-header .seg{flex-wrap:nowrap; gap:4px}
  }
  @media (max-width: 359px){
    #how-system .how-system-header .seg{flex-wrap:wrap; gap:6px}
  }
}

/* Pricing plans: <400px — tighter gap + hint that it's scrollable */
@media (max-width: 399px){
  #pricing .plans{
    gap:5px !important;
    --plan-card-w: min(340px, calc(100vw - 40px));
    scroll-padding-inline:12px !important;
    padding-inline:12px !important;
  }
}

/* Ниже 480 показываем только адрес (регион) */
@media (max-width: 479px){
  .phone{display:none !important;}
  .channel{display:none !important;}
  header .region{margin-left:auto !important;}

  /* Projects typography: <480 */
  #projects .proj-item h5{font-size:14px !important; line-height:18px !important}
  #projects .proj-item .textmuted{font-size:12px !important; line-height:16px !important}
}

@media (max-width: 520px){
  .wrap{padding-left:14px !important; padding-right:14px !important}
  .hero{padding:22px 0 18px}
  .hero-card{border-radius:18px}
  .card{border-radius:18px}
  .kpis{grid-template-columns:1fr 1fr}
  .calc .cols{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .mnav{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    background:rgb(10 11 15 / 94%) !important;
  }
  .mnav .mnav-content{height:auto !important; overflow:visible !important;}
  .mnav-meta{
    display:grid;
    gap: 50px !important;
    margin-bottom:16px;
  }
  .mnav-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .mnav-socials{display:flex; align-items:center; gap:8px;}
  .mnav-phone{font-size:14px; line-height:18px; color:rgba(238, 240, 246, 0.86)}
  .mnav-content .btn{display:none !important;}
}

/* Benefits: <450 overrides after the <480 block (cascade win) */
@media (max-width: 449px){
  #solutions .benefits{margin:30px 0 30px !important;}
  #solutions .benefits-list{padding-bottom:0 !important;}
  #solutions .benefit{flex:0 0 auto !important; min-width:170px !important; margin-right:12px !important;}
  #solutions .benefits h5{min-height:0 !important;}
  #solutions .benefits-list .benefit-text{margin-bottom:0 !important;}
}

/* Work stages: seg labels shorter below 900px */
.segbtn-stages .segtext-full{display:inline !important}
.segbtn-stages .segtext-short{display:none !important}

@media (max-width: 899px){
  .segbtn-stages .segtext-full{display:none !important}
  .segbtn-stages .segtext-short{display:inline !important}
}

/* Work stages diagram padding rules */
@media (min-width: 769px){
  .stages-diagram{padding:32px !important;}
}

@media (max-width: 767px){
  .stages-diagram{padding:45px !important;}
}

/* Mobile-only image above stages list */
.stages-mobile-hero{display:none}

/* =========================
   INCLUDED (Что входит)
   Требования:
   - <450: h2 24/28, subtext 14/16, h3 14/16/500, list 14/16
   - 450–768: h2 28/32, subtext 16/20/500, h3 14/16/500, list 14/16
   - 768–1400: h2 40/48/500, subtext 18/24, h3 14/16/500, list 14/16
   - <1200: карточки (feature) в 1 колонку
   - <720: картинка под списком и по центру
   ========================= */

/* <1200: 4 карточки вертикально (1 в строке) */
@media (max-width: 1199px){
  #included .incl{grid-template-columns:1fr !important}
}

/* <720: картинка под списком и по центру */
@media (max-width: 719px){
  #included .card.white.feature{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #included .feature-content{width:100%}
  #included .feature-img{
    width:100% !important;
    height:auto !important;
    margin:0 !important;
  }
}

/* <450 */
@media (max-width: 449px){
  #included h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important}
  #included .subtext{font-size:14px !important; line-height:16px !important}
  #included .feature-content h3{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  #included .feature-list li{font-size:14px !important; line-height:16px !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  #included h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important}
  #included .subtext{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #included .feature-content h3{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  #included .feature-list li{font-size:14px !important; line-height:16px !important}
}

/* =========================
   REVIEWS (Отзывы клиентов)
   ========================= */

/* <450 */
@media (max-width: 449px){
  #reviews .review-left h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important}
  #reviews .review-left .subtext{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .btn-review-leave{font-size:12px !important; line-height:100% !important; font-weight:500 !important; padding:11px 41px !important;}

  #reviews .review-rating-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .rating-value{font-size:22px !important; line-height:28px !important; font-weight:400 !important}
  #reviews .review-details-btn{font-size:14px !important; line-height:100% !important; font-weight:500 !important}

  #reviews .review-name{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .review-object{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #reviews .review-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}

  /* <450: свайп по всей ленте, включая rating-card */
  #reviews .review-content{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:12px !important;
    min-width:0;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin-right:calc(50% - 50vw);
    padding-right:calc(50vw - 50%);
  }
  #reviews .review-content::-webkit-scrollbar{height:0}
  #reviews .review-rating-card{flex:0 0 200px !important; width:200px !important; height:auto !important; padding:20px !important; scroll-snap-align:start}
  #reviews .review-carousel{
    flex:0 0 auto !important;
    min-width:0;
    height:auto !important;
    display:flex;
    flex-direction:row !important;
    align-items:stretch;
    gap:12px;
    overflow:visible !important;
  }
  #reviews .review-item{flex:0 0 240px; width:240px; height:auto !important; scroll-snap-align:start}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  #reviews .review-left h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important}
  #reviews .review-left .subtext{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #reviews .btn-review-leave{font-size:12px !important; line-height:100% !important; font-weight:500 !important; padding:11px 102px !important;}

  #reviews .review-rating-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .rating-value{font-size:22px !important; line-height:28px !important; font-weight:400 !important}
  #reviews .review-details-btn{font-size:14px !important; line-height:100% !important; font-weight:500 !important}

  #reviews .review-name{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #reviews .review-object{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .review-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  /* 450–768: свайп по всей ленте, включая rating-card */
  #reviews .review-content{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:16px !important;
    min-width:0;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin-right:calc(50% - 50vw);
    padding-right:calc(50vw - 50%);
  }
  #reviews .review-content::-webkit-scrollbar{height:0}
  #reviews .review-rating-card{flex:0 0 250px !important; width:250px !important; height:auto !important; scroll-snap-align:start}
  #reviews .review-carousel{
    flex:0 0 auto !important;
    min-width:0;
    height:auto !important;
    display:flex;
    flex-direction:row !important;
    align-items:stretch;
    gap:16px;
    overflow:visible !important;
  }
  #reviews .review-item{flex:0 0 300px; width:300px; height:auto !important; scroll-snap-align:start}
}

/* 768–1450 */
@media (min-width: 768px) and (max-width: 1450px){
  #reviews .review-left h2{font-size:32px !important; line-height:40px !important; font-weight:500 !important}
  #reviews .review-left .subtext{font-size:18px !important; line-height:24px !important; font-weight:400 !important}
  #reviews .btn-review-leave{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  #reviews .review-rating-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .rating-value{font-size:28px !important; line-height:32px !important; font-weight:400 !important}
  #reviews .review-details-btn{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  #reviews .review-name{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #reviews .review-object{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #reviews .review-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
}

/* =========================
   FAQ + BLOG (Вопросы и блог)
   ========================= */

/* <450 */
@media (max-width: 449px){
  #faq .faq-number{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .faq-headline{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .faq-answer,
  #faq .faq-answer p{font-size:12px !important; line-height:12px !important; font-weight:400 !important}

  #faq .faq-cta-headline{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  #faq .faq-cta-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #faq .btn-faq-cta{font-size:12px !important; line-height:100% !important; font-weight:500 !important}

  #faq .blog-headline{font-size:24px !important; line-height:28px !important; font-weight:500 !important}
  #faq .blog-subtext{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .blog-article-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #faq .blog-article-desc{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #faq .blog-details-btn{font-size:14px !important; line-height:100% !important; font-weight:500 !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  #faq .faq-number{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .faq-headline{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .faq-answer,
  #faq .faq-answer p{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  #faq .faq-cta-headline{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #faq .faq-cta-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .btn-faq-cta{font-size:12px !important; line-height:100% !important; font-weight:500 !important}

  #faq .blog-headline{font-size:28px !important; line-height:32px !important; font-weight:500 !important}
  #faq .blog-subtext{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .blog-article-title{font-size:22px !important; line-height:28px !important; font-weight:500 !important}
  #faq .blog-article-desc{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .blog-details-btn{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
}

/* 768–1450 */
@media (min-width: 768px) and (max-width: 1450px){
  #faq .faq-number{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .faq-headline{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  #faq .faq-answer,
  #faq .faq-answer p{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  #faq .faq-cta-headline{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #faq .faq-cta-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .btn-faq-cta{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  #faq .blog-headline{font-size:32px !important; line-height:40px !important; font-weight:500 !important}
  #faq .blog-subtext{font-size:18px !important; line-height:24px !important; font-weight:400 !important}
  #faq .blog-article-title{font-size:22px !important; line-height:28px !important; font-weight:500 !important}
  #faq .blog-article-desc{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #faq .blog-details-btn{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
}

/* =========================
   CONTACTS + CONSULTATION POPUP
   ========================= */

/* <450 */
@media (max-width: 449px){
  #contacts .headline{font-size:24px !important; line-height:28px !important; font-weight:500 !important}
  #contacts .sub-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  #contacts .wrapp-left .headline2{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #contacts .div,
  .consultation-popup .div{font-size:12px !important; line-height:12px !important; font-weight:500 !important}

  #contacts .title,
  #contacts .infomaybesmartru{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  #contacts .button{font-size:14px !important; line-height:100% !important; font-weight:500 !important}

  #contacts .contact-info-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  #contacts .contact-info-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #contacts .schedule-row{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #contacts .contact-info-note{font-size:12px !important; line-height:12px !important; font-weight:400 !important}

  .consultation-popup .consultation-popup-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  .consultation-popup .consultation-checkbox-label{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .consultation-popup .consultation-submit-text{font-size:14px !important; line-height:100% !important; font-weight:500 !important}
  .consultation-popup .consultation-socials-title{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  #contacts .headline{font-size:28px !important; line-height:32px !important; font-weight:500 !important}
  #contacts .sub-text{font-size:16px !important; line-height:20px !important; font-weight:400 !important}

  #contacts .wrapp-left .headline2{font-size:20px !important; line-height:24px !important; font-weight:500 !important}
  #contacts .div,
  .consultation-popup .div{font-size:14px !important; line-height:16px !important; font-weight:500 !important}

  #contacts .title,
  #contacts .infomaybesmartru{font-size:16px !important; line-height:20px !important; font-weight:400 !important}

  #contacts .button{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  #contacts .contact-info-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #contacts .contact-info-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #contacts .schedule-row{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #contacts .contact-info-note{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  .consultation-popup .consultation-popup-title{font-size:20px !important; line-height:24px !important; font-weight:500 !important}
  .consultation-popup .consultation-checkbox-label{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  .consultation-popup .consultation-submit-text{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
  .consultation-popup .consultation-socials-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
}

/* 768–1450 */
@media (min-width: 768px) and (max-width: 1450px){
  #contacts .headline{font-size:32px !important; line-height:40px !important; font-weight:500 !important}
  #contacts .sub-text{font-size:18px !important; line-height:24px !important; font-weight:400 !important}

  #contacts .wrapp-left .headline2{font-size:22px !important; line-height:28px !important; font-weight:500 !important}
  #contacts .div,
  .consultation-popup .div{font-size:14px !important; line-height:16px !important; font-weight:500 !important}

  #contacts .title,
  #contacts .infomaybesmartru{font-size:16px !important; line-height:20px !important; font-weight:400 !important}

  #contacts .button{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  #contacts .contact-info-title{font-size:16px !important; line-height:20px !important; font-weight:500 !important}
  #contacts .contact-info-text{font-size:14px !important; line-height:18px !important; font-weight:400 !important}
  #contacts .schedule-row{font-size:14px !important; line-height:18px !important; font-weight:400 !important}
  #contacts .contact-info-note{font-size:16px !important; line-height:20px !important; font-weight:400 !important}

  .consultation-popup .consultation-popup-title{font-size:22px !important; line-height:28px !important; font-weight:500 !important}
  .consultation-popup .consultation-checkbox-label{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  .consultation-popup .consultation-submit-text{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
  .consultation-popup .consultation-socials-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
}

/* <520: reviews + FAQ/blog + contacts spacing */
@media (max-width: 520px){
  /* Reviews */
  #reviews .btn-review-leave{margin:0 !important;}
  #reviews .review-top{margin-bottom:20px !important;}
  #reviews .review-bot{gap:16px !important;}
  #reviews .review-content{gap:10px !important;}
  #reviews .review-rating-wrapp{gap:15px !important;}
  #reviews .review-item{flex:0 0 auto !important; width:336px !important; height:auto !important;}
  #reviews .review-rating-card{width:190px !important; height:auto !important;}

  /* Pricing dots */
  #pricing .plans-nav{display:flex !important; align-items:center; justify-content:center; gap:12px; margin-top:12px; width:100%;}
  #pricing .plans-dot{height:16px !important; width:16px !important; flex:0 0 auto; background:transparent !important; border:1px solid #555559 !important; box-sizing:border-box; border-radius:50% !important;}
  #pricing .plans-dot[aria-current="true"]{background-color:#a99aff !important; border:0 !important;}

  #projects .proj-header .btn.primary.block,
  #reviews .btn-review-leave{
    width:215px !important;
    min-width:215px !important;
  }

  #how .stages-header{
    padding:0 !important;
    margin-bottom:0 !important;
  }

  /* FAQ */
  #faq .faq-accordion{gap:10px !important;}
  #faq .faq-wrapp{gap:8px !important;}
  #faq .faq-row.faq-active .faq-answer{padding-top:16px !important;}
  #faq .faq-left{gap:16px !important;}
  #faq .faq-cta-content{gap:8px !important;}
  #faq .faq-cta-wrapp{gap:20px !important;}

  /* Blog */
  #faq .blog-wrapp{gap:20px !important;}
  #faq .blog-article{gap:16px !important;}
  #faq .blog-article-content{gap:16px !important;}
  #faq .blog-article-text{gap:8px !important;}
  #faq .blog-content{justify-content:flex-start !important; gap:16px !important;}

  /* Contacts */
  #contacts.contact{gap:20px !important;}
  #contacts.contact .top{margin-bottom:20px !important;}
  #contacts.contact .data{gap:20px !important;}
  #contacts .wrapp-left .top3{gap:16px !important;}
  #contacts .wrapp-left .data2{gap:16px !important;}
  #contacts .contact-info-item{padding:24px !important;}
  #contacts .contact-info-list{gap:10px !important;}
  #contacts .contact-info-note{padding-top:20px !important;}
}

@media (max-width: 767px){
  /* Blog nav buttons: mobile size */
  .blog-nav-btn{
    width:24px !important;
    height:24px !important;
    border-radius:12px !important;
    background:transparent !important;
  }
  .blog-nav-btn svg{
    width:24px !important;
    height:24px !important;
  }
}

/* =========================
   NEWS SUBSCRIPTION (Подписка на новости)
   ========================= */

/* <450 */
@media (max-width: 449px){
  .news-section .news-headline{font-size:20px !important; line-height:24px !important; font-weight:500 !important}
  .news-section .news-subtext{font-size:12px !important; line-height:12px !important; font-weight:500 !important}
  .news-section .news-input-label-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  .news-section .news-checkbox-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .news-section .news-submit-text{font-size:12px !important; line-height:100% !important; font-weight:500 !important}
  .news-section .news-social-title{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  .news-section .news-headline{font-size:20px !important; line-height:24px !important; font-weight:500 !important}
  .news-section .news-subtext{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .news-section .news-input-label-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  .news-section .news-checkbox-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .news-section .news-submit-text{font-size:12px !important; line-height:100% !important; font-weight:500 !important}
  .news-section .news-social-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
}

/* 768–1450 */
@media (min-width: 768px) and (max-width: 1450px){
  .news-section .news-headline{font-size:22px !important; line-height:28px !important; font-weight:500 !important}
  .news-section .news-subtext{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .news-section .news-input-label-title{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  .news-section .news-checkbox-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .news-section .news-submit-text{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
  .news-section .news-social-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
}

/* =========================
   FOOTER (Подвал)
   ========================= */

/* <450 */
@media (max-width: 449px){
  .footer-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .footer-col-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .footer-start-subtitle{font-size:12px !important; line-height:12px !important; font-weight:400 !important}

  .btn.footer-btn,
  .btn.hero-outline.footer-btn{font-size:12px !important; line-height:100% !important; font-weight:500 !important}

  .footer-link{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .footer-contact-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .footer-caption{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  .footer-title{font-size:16px !important; line-height:20px !important; font-weight:400 !important}
  .footer-col-title{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .footer-start-subtitle{font-size:12px !important; line-height:12px !important; font-weight:400 !important}

  .btn.footer-btn,
  .btn.hero-outline.footer-btn{font-size:14px !important; line-height:100% !important; font-weight:500 !important}

  .footer-link{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .footer-contact-text{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  .footer-caption{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
}

/* 768–1450 */
@media (min-width: 768px) and (max-width: 1450px){
  .footer-title{font-size:18px !important; line-height:24px !important; font-weight:400 !important}
  .footer-col-title{font-size:18px !important; line-height:24px !important; font-weight:400 !important}
  .footer-start-subtitle{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  .btn.footer-btn,
  .btn.hero-outline.footer-btn{font-size:16px !important; line-height:100% !important; font-weight:500 !important}

  .footer-link{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .footer-contact-text{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  .footer-caption{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
}

/* 768–1400 */
@media (min-width: 769px) and (max-width: 1400px){
  #included h2{font-size:40px !important; line-height:48px !important; font-weight:500 !important}
  #included .subtext{font-size:18px !important; line-height:24px !important}
  #included .feature-content h3{font-size:14px !important; line-height:16px !important; font-weight:500 !important}
  #included .feature-list li{font-size:14px !important; line-height:16px !important}
}

/* Included: на 768–1200 картинка должна занимать большую часть карточки */
@media (min-width: 768px) and (max-width: 1200px){
  #included .card.white.feature{align-items:stretch}
  #included .feature-content{flex:0 0 42%; max-width:42%}
  #included .feature-img{
    flex:0 0 58%;
    width:58%;
    height:auto;
    min-height:260px;
    max-height:360px;
  }
}

/* =========================
   PRICING (Готовые решения)
   ========================= */

/* Seg buttons short text on <900px */
#pricing .segbtn-plans .segtext-full{display:inline}
#pricing .segbtn-plans .segtext-short{display:none}
@media (max-width: 899px){
  #pricing .segbtn-plans .segtext-full{display:none}
  #pricing .segbtn-plans .segtext-short{display:inline}
}

/* <450 */
@media (max-width: 449px){
  #pricing h2{font-size:24px !important; line-height:28px !important; font-weight:500 !important}
  #pricing .subtext{font-size:14px !important; line-height:16px !important; font-weight:400 !important}

  #pricing .segbtn-plans{font-size:14px !important; line-height:16px !important; font-weight:500 !important}

  #pricing .plan-name{font-size:14px !important; line-height:16px !important}
  #pricing .plan-badge{font-size:11px !important; line-height:12px !important}
  #pricing .plan-price{font-size:20px !important; line-height:24px !important; font-weight:600 !important}
  #pricing .plan-desc{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #pricing .plan-list-item{font-size:12px !important; line-height:12px !important; font-weight:500 !important}

  #pricing .btn.primary.block.pick-plan{font-size:12px !important; line-height:100% !important; font-weight:500 !important}
}

/* 450–768 */
@media (min-width: 450px) and (max-width: 768px){
  #pricing h2{font-size:28px !important; line-height:32px !important; font-weight:500 !important}
  #pricing .subtext{font-size:16px !important; line-height:20px !important; font-weight:400 !important}

  #pricing .segbtn-plans{font-size:16px !important; line-height:20px !important; font-weight:500 !important}

  #pricing .plan-name{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #pricing .plan-badge{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #pricing .plan-price{font-size:24px !important; line-height:28px !important; font-weight:600 !important}
  #pricing .plan-desc{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #pricing .plan-list-item{font-size:14px !important; line-height:16px !important; font-weight:500 !important}

  #pricing .btn.primary.block.pick-plan{font-size:12px !important; line-height:100% !important; font-weight:500 !important}
}

/* 768–1400 */
@media (min-width: 768px) and (max-width: 1400px){
  #pricing h2{font-size:32px !important; line-height:40px !important; font-weight:500 !important}
  #pricing .subtext{font-size:18px !important; line-height:24px !important; font-weight:400 !important}

  #pricing .segbtn-plans{font-size:18px !important; line-height:20px !important; font-weight:500 !important}

  #pricing .plan-name{font-size:14px !important; line-height:16px !important; font-weight:400 !important}
  #pricing .plan-badge{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #pricing .plan-price{font-size:28px !important; line-height:32px !important; font-weight:600 !important}
  #pricing .plan-desc{font-size:12px !important; line-height:12px !important; font-weight:400 !important}
  #pricing .plan-list-item{font-size:14px !important; line-height:16px !important; font-weight:500 !important}

  #pricing .btn.primary.block.pick-plan{font-size:16px !important; line-height:100% !important; font-weight:500 !important}
}

@media (max-width: 767px){
  .review-nav-btn{
    width:24px;
    height:24px;
    border-radius:12px;
  }
  .review-nav-btn img{
    width:24px;
    height:24px;
  }
}

/* Desktop: stages-diagram равен по высоте stages-list + wireless align start */
@media (min-width: 1200px){
  #how .stages-wrapper{align-items:stretch;}
  #how .stages-list{height:auto;}
  #how .stages-diagram{height:100%;}
  #how .stages-diagram.is-wireless{
    align-content:center;
    justify-content:center;
    align-items:center;
  }
  #how .stages-diagram .stages-image{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  #how .stages-diagram:not(.is-wireless) .stages-image{
    height:100%;
  }
  #how .stages-diagram.is-wireless .stages-image[data-diagram="wireless"]{
    height:100%;
    max-height:95%;
  }
}