/* ============================================
   Reset & Base Styles (Mobile First)
   ============================================ */

   html,
   body {
     height: 100%;
   }
   
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   * {
     margin: 0;
   }
   
   @media (prefers-reduced-motion: no-preference) {
     html {
       interpolate-size: allow-keywords;
     }
   }
   
   body {
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
   }
   
   img,
   picture,
   video,
   canvas,
   svg {
     display: block;
     max-width: 100%;
   }
   
   input,
   button,
   textarea,
   select {
     font: inherit;
   }
   
   p,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     overflow-wrap: break-word;
   }
   
   p {
     text-wrap: pretty;
   }
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     text-wrap: balance;
   }
   
   /* ============================================
         Animations
         ============================================ */
   
   @keyframes fadeIn {
     from {
       opacity: 0;
     }
   }
   
   @keyframes slideIn {
     from {
       transform: translateY(-16px);
     }
   
     to {
       transform: translateY(0);
     }
   }
   
   @keyframes slideUp {
     from {
       transform: translateY(60px);
     }
   
     to {
       transform: translateY(0);
     }
   }
   
   @keyframes rotate {
     from {
       transform: rotate(0deg);
     }
   
     to {
       transform: rotate(360deg);
     }
   }
   
   @keyframes scale {
     0% {
       transform: scale(1);
     }
   
     50% {
       transform: scale(0.8);
     }
   
     100% {
       transform: scale(1);
     }
   }
   
   .visually-hidden {
     position: absolute;
   
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     border: 0;
   
     overflow: hidden;
   }
   
   :root {
     --gradient-point: 0.34;
   }
   
   /* ============================================
         Container
         ============================================ */
   
   .container {
     width: 100%;
     max-width: 1260px;
     margin-right: auto;
     margin-left: auto;
   }
   
   .image-gradient-container {
     isolation: isolate;
   }
   
   .image-gradient {
     position: absolute;
     inset: 0;
     z-index: -1;
   
     width: 295px;
     height: 295px;
     margin: auto;
   
     filter: blur(120px);
     transform-origin: center center;
     transition: transform 1s ease;
     animation: scale 24s linear infinite running;
   
     overflow: hidden;
   }
   
   .image-gradient__item {
     position: absolute;
   
     width: 75%;
     height: 75%;
     border-radius: 9999px;
   
     animation: rotate 12s linear infinite running;
   }
   
   .image-gradient__item--violet {
     top: 25%;
     left: 0;
   
     background-color: #aa4cff;
     transform-origin: right;
   }
   
   .image-gradient__item--deep-blue {
     top: 50%;
     left: 25%;
   
     background-color: #0026ff;
     transform-origin: top;
   }
   
   .image-gradient__item--techno-mint {
     top: 25%;
     left: 50%;
   
     background-color: #00ccff;
     transform-origin: left;
   }
   
   .image-gradient__item--purple {
     top: 0;
     left: 25%;
   
     background-color: #630eff;
     transform-origin: bottom;
   }
   
   /* ============================================
         Page
         ============================================ */
   
   .page {
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 320px;
     min-height: 100%;
   
     font-family: "Max Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       sans-serif;
     color: #ffffff;
   
     background-color: #0d0d0d;
   }
   
   [data-animation-uprise] {
     transition: transform 0.6s ease, opacity 0.6s ease;
   }
   
   /* ============================================
         Header
         ============================================ */
   
   body.menu-open {
     position: fixed;
   
     width: 100%;
   
     overflow: hidden;
   }
   
   .header {
     position: fixed;
     top: 16px;
     right: 16px;
     left: 16px;
     z-index: 1;
   }
   
   .header--open {
     height: calc(100% - 32px);
   }
   
   .header__container {
     position: relative;
   
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     max-width: 1260px;
     border-radius: 24px;
   
     background-color: hsla(264, 33%, 17%, 0.8);
     box-shadow: 0 40px 25px 0 rgba(0, 0, 0, 0.05), 0 5px 10px 0 rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(15px);
   }
   
   .header__logo-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     min-height: 64px;
   }
   
   .header__container--toggled-menu {
     justify-content: start;
     height: 100%;
     border-bottom-right-radius: 16px;
     border-bottom-left-radius: 16px;
   }
   
   .header__logo {
     font-size: 28px;
     color: #ffffff;
   }
   
   .header__logo-img {
     width: 147px;
     height: 32px;
   }
   
   .header__nav {
     display: none;
   }
   
   .header__nav--open {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding-bottom: 16px;
     flex-grow: 1;
   }
   
   .header__menu-toggle {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 4px;
     width: 40px;
     height: 40px;
     padding: 8px 10px;
     border: none;
   
     background-color: transparent;
   
     cursor: pointer;
   }
   
   .menu-toggle::before,
   .menu-toggle::after,
   .menu-toggle__line {
     position: relative;
   
     display: block;
     width: 100%;
     height: 2px;
     border-radius: 9999px;
   
     background-color: #ffffff;
     transition: opacity 0.3s ease;
   
     content: "";
   }
   
   .menu-toggle::before {
     top: 0px;
   
     transform: rotate(0deg);
     transition: top 0.3s ease 0.3s, transform 0.3s ease;
   }
   
   .menu-toggle::after {
     bottom: 0px;
   
     transform: rotate(0deg);
     transition: bottom 0.3s ease 0.3s, transform 0.3s ease;
   }
   
   .menu-toggle--active::before {
     top: 6px;
   
     transform: scaleX(1.1) rotate(45deg);
     transition: top 0.3s ease, transform 0.3s ease 0.3s;
   }
   
   .menu-toggle--active::after {
     bottom: 6px;
   
     transform: scaleX(1.1) rotate(-45deg);
     transition: bottom 0.3s ease, transform 0.3s ease 0.3s;
   }
   
   .menu-toggle--active .menu-toggle__line {
     opacity: 0;
   }
   
   .nav__list {
     display: flex;
     flex-direction: column;
     height: 100%;
     margin: 0;
     margin-top: 32px;
     padding: 0;
   
     font-weight: 500;
     font-size: 28px;
   
     animation: slideIn 0.3s ease forwards, fadeIn 0.3s linear forwards;
   
     list-style: none;
   }
   
   .nav__list--desktop {
     display: none;
   }
   
   .nav__item--copyright {
     margin-top: auto;
   
     font-weight: 400;
     line-height: 1;
   }
   
   .nav__link {
     display: block;
     padding: 8px 0;
   
     line-height: 1;
     text-decoration: none;
     color: #ffffff;
   
     transition: color 0.3s ease;
   }
   
   .nav__link--hidden {
     display: none;
   }
   
   .nav__link--disabled {
     cursor: default;
   }
   
   .header__login-container {
     display: none;
   }
   
   .gradient-text {
     color: transparent;
   
     background: linear-gradient(
       154deg,
       #0026ff -20%,
       #0cf calc(var(--gradient-point) * 100%),
       #a500c6 105.81%
     );
     -webkit-background-clip: text;
     background-clip: text;
   }
   
   .header__copyright {
     font-size: 16px;
     line-height: 1.4;
     text-transform: uppercase;
     color: #ffffff;
   }
   
   .overlay-button {
     position: fixed;
     top: 0;
     left: 0;
   
     display: none;
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     border: none;
   
     background-color: #0d0d0d;
     opacity: 0.8;
   }
   
   .header--open ~ .overlay-button {
     display: block;
   }
   
   /* ============================================
         Main
         ============================================ */
   
   .main {
     display: flex;
     flex-direction: column;
     width: 100%;
     margin: 0 auto;
   
     isolation: isolate;
   }
   
   /* ============================================
         Hero Section
         ============================================ */
   
   .hero.section {
     margin-top: 80px;
     padding-top: 40px;
   
     isolation: auto;
   }
   
   .hero__content {
     z-index: 0;
   
     display: flex;
     flex-direction: column;
     gap: 24px;
     padding: 0 16px;
     max-width: 400px;
     margin: 0 auto;
   
     text-align: center;
   }
   
   .hero__title {
     font-weight: 500;
     font-size: 40px;
     line-height: 1;
   }
   
   .hero__text {
     font-weight: 400;
     font-size: 20px;
     line-height: 1.25;
     text-align: center;
     color: #c3c3c3;
   }
   
   .hero__image {
     position: relative;
   
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 77%;
     max-width: 400px;
     margin: 0 auto;
   
     isolation: isolate;
   }
   
   .img {
     width: 100%;
     max-width: 400px;
     height: auto;
     margin: 0 auto;
   }

   .img--hero {
    transform: translateY(15px);
   }
   
   /* ============================================
         Section (Chatbots, Miniapps, Channels)
         ============================================ */
   
   .section {
     position: relative;
   
     width: 100%;
     padding-top: 120px;
   
     isolation: isolate;
   }
   
   .section--business-support {
     padding-top: 49px;
   }
   
   .section::before {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     z-index: -1;
   
     width: 100%;
     height: 100%;
   
     backdrop-filter: blur(15px);
   
     content: "";
     background-blend-mode: overlay, normal;
   }
   
   .section--miniapps {
     padding-top: 116px;
   }
   
   .header__container {
     padding: 0 16px;
   }
   
   .section__container {
     display: flex;
     flex-direction: column;
     gap: 40px;
     width: 100%;
     /* max-width: 400px; */
   }

   .section__buttons-container--business-messenger {
    width: 100%;
   }
   
   .section__content {
     z-index: 1;
   
     display: flex;
     flex-direction: column;
     gap: 16px;
     width: 100%;
     max-width: 400px;
     margin: 0 auto;
     padding: 0 16px;
   }
   
   .section__content--business-messenger {
     gap: 32px;
   }
   
   .section__title {
     margin: 0;
   
     font-weight: 500;
     font-size: 32px;
     line-height: 1;
     text-align: center;
     color: #ffffff;
   }
   
   .section__title--download {
     font-size: 32px;
   }
   
   .section__title--business-support {
     margin: 0;
   
     font-weight: 500;
     font-size: 24px;
     line-height: 1;
     text-align: left;
   }
   
   .section__link {
     font-weight: 400;
     font-size: 16px;
     line-height: 1.4;
     text-align: left;
     text-decoration: none;
     color: #ffffff;
   }
   
   .section__text {
     margin-bottom: 12px;
       
     font-weight: 400;
     font-size: 16px;
     line-height: 1.25;
     text-align: center;
     color: #c3c3c3;
   }
   
   .section__buttons {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     width: 100%;
   }
   
   .section__buttons--hero {
     display: none;
   }

   .section__buttons--business-messenger .button {
    width: 100%;
    align-items: start;;
   }
   
   .section__buttons--fixed {
     position: fixed;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
   
     padding-top: 8px;
     padding-right: 16px;
     padding-bottom: 8px;
     padding-left: 16px;
   
     background-color: #000000;
     box-shadow: 0 40px 25px 0 rgba(0, 0, 0, 0.05), 0 5px 10px 0 rgba(0, 0, 0, 0.1);
     animation: slideUp 0.3s ease forwards;
   }
   
   .section__buttons--fixed .button {
     width: 100%;
   }
   
   .section__buttons--fixed .button--primary {    
     background-image: linear-gradient(
       97deg,
       #01c5c8 0.32%,
       #046ef4 44.6%,
       #572dff 62.16%
     );
   }
   
   .section--cover.section--chatbots {
     margin-top: -230px;
     padding-top: 80px;
   }
   
   .section--cover.section--channels {
     margin-top: -73px;
   }
   
   .section--cover.section--business-messenger {
     margin-top: -88px;
     padding-top: 80px;
   }
   
   .section__image {
     max-width: 400px;
     width: 90%;
     padding: 0 16px;
     margin: 0 auto;
   }
   
   .section--cover.section--digital-id {
     margin-top: -53px;
   }
   
   .section--chatbots .section__image {
     padding-top: 15px;
   }
   
   .section--miniapps .section__image {
     padding: 16px;
     width: 77%;
   }
   
   .section--channels .section__image {
     padding: 16px 11px;
   }
   
   .section--digital-id .section__image {
     padding: 16px 11px;
   }
   
   .section--download {
     padding-top: 32px;
   }
   
   .section__container--line-decoration::before {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
   
     display: block;
     width: 70%;
     height: 1px;
     margin-right: auto;
     margin-left: auto;
   
     background-image: linear-gradient(
       90deg,
       rgba(255, 255, 255, 0) 0%,
       rgba(255, 255, 255, 0.2) 50%,
       rgba(255, 255, 255, 0) 100%
     );
   
     content: "";
   }
   
   .section--business-support .section__content {
     padding-right: 16px;
     padding-left: 16px;
   }
   
   .section--business-messenger .section__container {
     margin-bottom: 32px;
   }
   
   .section--download .section__container {
     gap: 32px;
   }
   
   /* ============================================
         Button
         ============================================ */
   
   .button {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     width: fit-content;
     padding: 12px 24px;
     border: none;
     border-radius: 16px;
   
     font-weight: 500;
     font-size: 20px;
     line-height: 1.4;
     text-align: center;
     text-decoration: none;
     color: #ffffff;
   
     background-color: #630eff;
   
     cursor: pointer;
   }

   .button:hover,
   .button:focus {
    background: linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
   }
   
   .button--primary {
     background-image: linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
   }
   
   .button--secondary {
     background-color: transparent;
     background-image: linear-gradient(
       135deg,
       rgba(67, 67, 67, 0.8) 0%,
       rgba(67, 67, 67, 0.2) 100%
     );
   }
   
   .section__buttons--download {
     align-items: center;
   }
   
   .download__button {
     width: auto;
   }
   
   .section__buttons-container {
     min-height: 112px;
     margin: 0 auto;
     padding: 0 14px;
   }
   
   .download__button {
     padding-left: 64px;
   }
   
   .button_qr {
     display: none;
     width: 52px;
     height: 52px;
     padding: 12px;
     border: none;
   
     background-image: url("static/image/qr_logo.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: center center, center center;
     background-size: 40px 40px, 100% 100%;
     transform: scale(1);
     transform-origin: left bottom;
     transition: transform 0.3s ease;
   }
   
   .ios {
     display: none;
   }
   
   .android {
     display: none;
   }
   
   .desktop {
     display: none;
   }
   
   .button_appstore {
     background-image: url("static/image/appstore.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_appstore:hover,
   .button_appstore:focus {
    background-image: url("static/image/appstore.svg"),
    linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
      background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
    }
   
   .button_googleplay {
     background-image: url("static/image/googleplay.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_googleplay:hover,
   .button_googleplay:focus {
    background-image: url("static/image/googleplay.svg"),
    linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
      background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
    }
       
   .button_qr:hover,
   .button_qr:focus {
     border-radius: calc(16px / 3.75);
   
     background-image: url("static/image/qr.svg"),
       linear-gradient(97deg, #01c5c8 0.32%, #046ef4 44.6%, #572dff 62.16%);
     background-repeat: no-repeat, no-repeat;
     background-position: center center, center center;
     background-size: 56px 56px, 100% 100%;
     transform: scale(3.75);
     outline: calc(1px / 3.75) solid #ffffff;
   }

   .button_rustore {
     background-image: url("static/image/rustore.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_rustore:hover,
   .button_rustore:focus {
    background-image: url("static/image/rustore.svg"),
    linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
      background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }
   
   .button_appgallery {
     background-image: url("static/image/appgallery.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_appgallery:hover,
   .button_appgallery:focus {
    background-image: url("static/image/appgallery.svg"),
    linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
      background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_desktop {
     background-image: url("static/image/desktop.svg"),
       linear-gradient(135deg, #161f8a 0%, #2d085f 100%);
     background-repeat: no-repeat, no-repeat;
     background-position: left 24px center, center center;
     background-size: 32px 32px, 100% 100%;
   }

   .button_desktop:hover,
   .button_desktop:focus {
    background-image: url("static/image/desktop.svg"),
    linear-gradient(
        97deg,
        #01c5c8 0.32%,
        #046ef4 44.6%,
        #572dff 62.16%
      );
      background-repeat: no-repeat, no-repeat;
      background-position: left 24px center, center center;
      background-size: 32px 32px, 100% 100%;
   }
   
   /* ============================================
         Footer
         ============================================ */
   
   .footer {
     padding: 96px 16px 130px;
   }
   
   .footer__container {
     display: flex;
     flex-direction: column-reverse;
     gap: 48px;
   }
   
   .footer__copyright {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin: 0;
     padding: 0;
   }
   
   .footer__logo-img {
     width: 96px;
     height: 30px;
   }
   
   .footer__nav {
     display: flex;
     flex-direction: column;
     gap: 48px;
   }
   
   .footer__nav-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin: 0;
     padding: 0;
   }
   
   .footer__nav-item {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .footer__nav-link {
     font-weight: 400;
     font-size: 16px;
     line-height: 1.25;
     text-decoration: none;
     color: #9a9a9a;
   
     transition: color 0.3s ease;
   }
   
   .footer__nav-link:hover {
     color: #ffffff;
   }
   
   .footer__nav-link:active {
     color: #ffffff;
   }
   
   /* ============================================
         Media Queries (Mobile First)
         ============================================ */
   
   /* Small Mobile: 320px - 392px */
   /* Base styles already cover this range */

   @media (min-width: 340px) {
    .nav__list {
       gap: 16px;
       margin-top: 40px;
       padding: 16px 0 0;
   
       font-size: 32px;
     }
   }
   
   @media (min-width: 350px) {
     .section__container {
       margin: 0 auto;
     }
   }
   
   @media (min-width: 420px) {
     .section {
       padding-right: 16px;
       padding-left: 16px;
     }
   
     .section.hero {
       padding-right: 0;
       padding-left: 0;
     }
   
     .hero__title {
       font-size: 48px;
     }
   
     .img {
       max-width: 100%;
     }
   
     .hero__image,
     .section__image {
       position: relative;
   
       align-items: stretch;
       align-self: stretch;
       width: 100%;
     }
   
     .section--miniapps .section__image {
       padding: 0 40px;
     }
   }
   
   @media (min-width: 790px) {
     .header {
       top: 32px;
       right: 16px;
       left: 16px;
     }
   
     .header--open {
       height: calc(100% - 64px);
       max-height: 672px;
     }
   
     .section {
       max-width: 100%;
       padding-top: 80px;
       padding-bottom: 80px;
     }
   
     .section--download {
       padding-bottom: 24px;
     }
   
     .hero__content {
       padding: 0;
       max-width: 100%;
       gap: 32px;
     }
   
     .hero.section {
       margin-top: 96px;
       padding-top: 80px;
     }
   
     .section__container {
       display: grid;
       gap: 16px;
       max-width: 1260px;
       height: 100%;
       padding-right: 48px;
       padding-left: 48px;
       grid-template-columns: 1fr 1fr;
       grid-template-areas: "content image";
     }
   
     .section__image {
       grid-area: image;
     }
   
     .section__content {
       margin: auto 0;
       padding: 0;
       grid-area: content;
       max-width: 100%;
     }
   
     .section--miniapps .section__content {
       padding-bottom: 145px;
     }
   
     .section--channels .section__content {
       padding-bottom: 145px;
     }
   
     .section--digital-id .section__content {
       padding-bottom: 145px;
     }
   
     .section__container--reverse {
       grid-template-areas: "image content";
     }
   
     .section__container--reverse .section__content {
       grid-column: 2;
     }
   
     .hero .section__container {
       min-height: 630px;
       grid-template-columns: auto 36%;
       justify-content: space-between;
     }
   
     .section--cover.section--business-messenger {
       margin-top: -145px;
     }
   
     .hero__title {
       text-align: left;
     }
   
     .hero__text {
       margin-bottom: 32px;
   
       text-align: left;
     }
   
     .hero__image,
     .section__image {
       align-self: flex-start;
       padding: 0;
     }
   
     .section--chatbots {
       padding-bottom: 90px;
     }
   
     .section--chatbots .section__image {
       padding-right: 40px;
     }
   
     .section__buttons {
       align-items: flex-start;
     }
   
     .section__buttons--hero {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       gap: 16px;
       width: fit-content;
     }
   
     .section__title {
       font-size: 40px;
       text-align: left;
     }
   
     .section--chatbots .section__title {
       text-wrap: initial;
     }
   
     .section--cover.section--miniapps {
       margin-top: -124px;
     }
   
     .section--miniapps .section__image {
       padding: 5px 52px;
     }
   
     .section--channels .section__image {
       padding: 8px 32px;
     }

     .section--digital-id .section__image {
       padding: 16px 32px;
    }
   
     .section--cover.section--channels {
       margin-top: -145px;
     }
   
     .section--cover.section--digital-id {
       margin-top: -145px;
     }
   
     .section--business-support .section__content {
       padding-right: 0;
       padding-left: 0;
     }
   
     .section__text {
       font-size: 16px;
       text-align: left;

       margin-bottom: 32px;
     }
   
     .section--business-messenger .section__container,
     .section--download .section__container {
       display: flex;
       flex-direction: column;
       align-items: stretch;
     }
   
     .section--business-messenger .section__buttons,
     .section--download .section__buttons {
       flex-direction: row;
       flex-wrap: wrap;
       gap: 16px;
       width: auto;
       justify-self: start;
     }

     .section--business-messenger .section__buttons--fixed {
      width: 100%;
      justify-content: center;
      padding: 16px;
     }
   
     .section__title--business-messenger,
     .section__title--download {
       font-size: 56px;
     }
   
     .section__buttons-container {
       max-width: 100%;
       margin: 0;
       padding: 0;
     }
   
     .section__title.section__title--business-support {
       font-size: 24px;
     }
   
     .section--business-support {
       padding-top: 24px;
     }
   
     .section__buttons--business-messenger .button {
       width: auto;
       display: flex;
       align-items: center;
     }
   
     .button_qr {
       display: flex;
     }
   
     .ios {
       display: flex;
     }
     
     .android {
       display: flex;
     }
     
     .desktop {
       display: flex;
     }
   
     .footer {
       padding: 96px 64px 96px;
     }
   
     .footer__container {
       display: grid;
       grid-template-columns: 1fr 3fr;
       gap: 10px;
     }
   
     .footer__copyright {
       justify-content: space-between;
       flex-grow: 1;
     }
   
     .footer__nav {
       display: grid;
       gap: 48px;
       grid-template-columns: repeat(2, minmax(auto, max-content));
     }
   
     .footer__nav-list--privacy {
       grid-column: 2;
     }
   }
   
   @media (min-width: 1060px) {
     .section__container {
       padding-right: 64px;
       padding-left: 64px;
     }
   
     .hero__title {
       font-size: 72px;
     }
   
     .hero__text {
       font-size: 28px;
     }
   
     .button {
       min-height: 64px;
       padding: 12px 24px;
   
       font-size: 24px;
     }
   
     .download__button {
       padding-left: 64px;
     }
   
     .button_qr {
       width: 64px;
       height: 64px;
       padding: 0;
     }
   
     .button_qr:focus {
       background-size: 56px 56px, 100% 100%;
     }
   
     .section__title {
       font-size: 56px;
     }
   
     .section__text {
       font-size: 24px;
     }
   
     .footer {
       padding: 96px 76px 40px;
     }
   
     .footer__container {
       grid-template-columns: 1fr 3fr;
       gap: 10px;
     }
   
     .footer__nav {
       max-width: 1200px;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 10px
     }
   
     .footer__nav-list--privacy {
       grid-column: 3;
     }
   }
   
   @media (min-width: 1160px) {
     .header {
       right: 40px;
       left: 40px;
     }
   
     .header--open {
       height: auto;
     }
   
     .header__container {
       display: grid;
       align-items: center;
       min-height: 88px;
       padding: 0 40px;
       border-radius: 32px;
       grid-template-columns: 1fr auto 1fr;
     }
   
     .header__logo-img {
       width: 192px;
       height: 42px;
     }
   
     .header__menu-toggle {
       display: none;
     }
   
     .header__nav {
       display: flex;
     }
   
     .nav__list--mobile {
       display: none;
     }
   
     .nav__list--desktop {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
       gap: 32px;
       margin: 0;
       padding: 0;
   
       font-size: 20px;
       line-height: 1.4;
   
       animation: none;
     }
   
     .nav__link {
       color: #b5b5b5;
     }
   
     @media (hover: hover) {
       .nav__link:not(.nav__link--disabled):hover {
         color: #ffffff;
       }
     }
   
     .header__login-container {
       display: flex;
     }
   
     .header__login-link {
       margin-left: auto;
   
       font-weight: 500;
       font-size: 20px;
       text-decoration: none;
     }
   
     .header__copyright {
       display: none;
     }
   
     .overlay-button {
       display: none;
     }
   
     .section__container {
       padding-right: 76px;
       padding-left: 76px;
     }
   
     .hero.section {
       margin-top: 120px;
     }
   }