@media(max-width:1080px){
    .navigation{display:none}
    .menu-toggle{display:flex}
    .header__contact{margin-left:auto}
    .about__container,.advantages__container,.contacts__container{grid-template-columns:1fr}
    .section-heading{grid-template-columns:1fr;gap:24px}
    .cooperation__steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
    :root{--header-height:78px}
    .container{width:min(100% - 28px,var(--container))}
    .section{padding:85px 0}
    .header__contact{display:none}
    .logo__symbol{width:46px;height:46px}
    .logo__name{font-size:16px}
    .logo__description{font-size:10px}
    .hero{min-height:900px}
    .hero__background{background-position:62% top}
    .hero__overlay{background:linear-gradient(to bottom,rgba(0,0,0,.56),rgba(0,0,0,.78) 42%,rgba(0,0,0,.95) 76%,var(--bg))}
    .hero__container{padding-top:145px;padding-bottom:80px}
    .hero__title{font-size:clamp(42px,13vw,62px);letter-spacing:-2px}
    .hero__description{font-size:17px}
    .hero__buttons{flex-direction:column}
    .hero__buttons .button{width:100%}
    .hero__features,.about__stats,.services__grid,.advantages__metrics,.contacts__list{grid-template-columns:1fr}
    .cooperation__steps{grid-template-columns:1fr}
    .advantages__panel,.contact-form{padding:28px}
    .footer__top{grid-template-columns:1fr;gap:36px}
    .footer__bottom{padding:20px 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
}
@media(max-width:420px){
    .hero__title{font-size:40px}
    .section-title{font-size:38px}
}

/* ===== BUSINESS SOLUTION V26: approved mobile first screen ===== */
@media (max-width:760px){
  .approved-screen{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#000;
  }
  .approved-screen__picture,
  .approved-screen__picture img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
  }

  /* Desktop navigation zones are baked for the 1536×1024 screen and must not interfere on mobile. */
  .screen-hotspot--home,
  .screen-hotspot--about,
  .screen-hotspot--services,
  .screen-hotspot--advantages,
  .screen-hotspot--contacts{
    display:none!important;
  }

  /* The mobile artwork already contains the button appearance. Keep only transparent hit areas. */
  .approved-screen::before,
  .approved-screen::after{
    display:none!important;
  }
  .screen-hotspot--services-cta,
  .screen-hotspot--contact-cta{
    display:block!important;
    position:absolute!important;
    z-index:25!important;
    top:34.0%!important;
    height:5.9%!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
  }
  .screen-hotspot--services-cta{left:6.1%!important;width:27.4%!important}
  .screen-hotspot--contact-cta{left:37.2%!important;width:31.2%!important}
  .screen-hotspot--services-cta::before,
  .screen-hotspot--contact-cta::before,
  .screen-hotspot--services-cta::after,
  .screen-hotspot--contact-cta::after{display:none!important;content:none!important}
  .screen-hotspot--scroll{
    left:46.2%!important;
    top:41.2%!important;
    width:9%!important;
    height:4.2%!important;
    z-index:25!important;
  }

  /* Hamburger is part of the approved artwork; this transparent control makes it functional. */
  .mobile-screen-menu-toggle{
    display:block;
    position:absolute;
    z-index:40;
    right:3.2%;
    top:1.5%;
    width:10.2%;
    aspect-ratio:1;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .mobile-screen-menu{
    display:none;
    position:absolute;
    z-index:39;
    top:7.4%;
    right:3.2%;
    width:min(72%,300px);
    padding:10px;
    border:1px solid rgba(255,133,0,.55);
    border-radius:16px;
    background:rgba(3,3,3,.96);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 38px rgba(0,0,0,.55);
    line-height:1.2;
  }
  .mobile-screen-menu.is-open{display:grid}
  .mobile-screen-menu a{
    display:block;
    padding:13px 14px;
    color:#d6d6d6;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    font-style:italic;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-screen-menu a:last-child{border-bottom:0}
  .mobile-screen-menu a:active{color:#ff8500}

  /* Floating desktop messengers cover content on a narrow viewport. Contact buttons remain in the page sections. */
  .floating-messengers{display:none!important}

  /* Keep the next section readable and separate from the image-based first screen. */
  #about{scroll-margin-top:12px}
}

@media (min-width:761px){
  .mobile-screen-menu-toggle,
  .mobile-screen-menu{display:none!important}
}

/* ===== BUSINESS SOLUTION V27: strict mobile viewport fit ===== */
@media (max-width:760px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  .approved-screen{
    display:block!important;
    position:relative!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .approved-screen__picture{
    display:block!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    line-height:0!important;
  }

  .approved-screen__picture > img,
  .approved-screen img{
    display:block!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
  }

  main,
  section,
  .section,
  .container{
    min-width:0!important;
    max-width:100%!important;
  }

  .container{
    width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .section-heading,
  .section-title,
  .about__container,
  .about__content,
  .services__grid,
  .advantages__container,
  .contacts__container,
  .footer__top,
  .footer__bottom{
    min-width:0!important;
    max-width:100%!important;
  }

  .section-title,
  .about__content,
  .about__content p{
    overflow-wrap:anywhere;
  }

  .screen-hotspot--services-cta,
  .screen-hotspot--contact-cta{
    max-width:none!important;
    min-width:0!important;
  }
}

/* ===== BUSINESS SOLUTION: mobile About tuning =====
   Only the "О компании" section. First screen and desktop are unchanged. */
@media (max-width:760px){
  #about .section-heading .section-title{
    font-size:30px;
    line-height:1.10;
  }

  #about .about__content{
    line-height:1.65;
  }

  #about .about__content p{
    line-height:1.65;
  }
}

/* ===== BUSINESS SOLUTION V29: unified mobile section headings + services cards =====
   Mobile only. Desktop and approved first screen remain unchanged. */
@media (max-width:760px){
  /* All section labels use one rhythm on mobile. */
  .section-heading .section-label,
  .contacts .section-label{
    margin-bottom:8px!important;
    font-size:12px!important;
    line-height:1.2!important;
    letter-spacing:3px!important;
  }

  /* One visual system for all section headings below the first screen. */
  .section-heading .section-title,
  .contacts .section-title{
    max-width:100%!important;
    font-size:30px!important;
    line-height:1.10!important;
    letter-spacing:-.5px!important;
  }

  /* Services: slightly denser cards for narrow screens. */
  .services .service-card{
    min-height:0!important;
    padding:30px 28px!important;
  }
  .services .service-card h3{
    max-width:calc(100% - 34px)!important;
    margin-bottom:14px!important;
    font-size:24px!important;
    line-height:1.16!important;
  }
  .services .service-card__number{
    top:26px!important;
    right:26px!important;
    font-size:34px!important;
  }
}