html {
  scroll-behavior: smooth;
}

body {
  background-color: #F6F6F6;
  overflow-x: hidden;
}

section, footer {
  width: 100%;
  margin: 0 auto;
}

h1, h2, h3 {
  font-family: Inter;
  font-variation-settings: 'wght' 700;
  color: #252525;
}

h1 {
  font-size: 38px;
  line-height: 120%;
  text-wrap: balance;
}

h2 {
  font-size: 32px;
  line-height: 120%;
  text-wrap: balance;
}

h3 {
  font-size: 24px;
  line-height: 140%;
}

.action-button {
  font-family: Open Sans;
  font-variation-settings: 'wght' 700;
  font-size: 16px;
  background-color: #252525;
  color: #FFFFFF;
  text-align: center;
  padding: 16px;
  border-radius: 16px;
  text-decoration: none;
  width: 100%;
  border: 0;
}

.card {
  background-color: #FFFFFF;
  padding: 24px;
  border-radius: 16px;
}

section.title {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  margin-top: 21px;
  position: relative;

  & .logo {
    min-height: 34px;
    background: no-repeat url('/images/logo.svg') center / contain;
  }

  & h1 {
    margin-top: 59px;
    text-align: center;
  }

  & p {
    margin-top: 32px;
    font-family: Inter;
    font-variation-settings: 'wght' 600;
    font-size: 24px;
    line-height: 140%;
    text-align: center;
    color: #252525;
  }

  & .action-button {
    margin-top: 61px;
  }

  & .video {
    margin-top: 38px;
    width: 100%;
    aspect-ratio: 2.15 / 1;
    border-radius: 16px;

    & video {
      border-radius: 16px;
    }
  }

  & .background {
    position: absolute;
    z-index: -1;
    background: no-repeat url('/images/backgrounds/mobile1.webp') top right / contain;
    width: 100vw;
    height: 100vh;
    top: -20px;
    right: 0;
  }
}

.open-contacts {
  position: fixed;
  bottom: 25px;
  right: 40px;

  & input {
    opacity: 0;
  }

  & input:checked ~ .content {
    display: flex;
  }

  & input:checked ~ label .contact-menu {
    background: #252525 no-repeat url('/images/icons/close1.svg') center / 45%;
  }

  & .contact-menu {
    border-radius: 50%;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
    width: 60px;
    height: 60px;
    cursor: pointer;
    background: #252525 no-repeat url('/images/icons/phone.svg') center / 40%;
  }

  & .content {
    display: none;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    bottom: 80px;
    left: 5px;

    & .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    & .icon-whatsapp {
      background: #25d366 no-repeat url('/images/icons/whatsapp.svg') center / 50%;
    }

    & .icon-telegram {
      background: #24A1DE no-repeat url('/images/icons/telegram1.svg') center / 100%;
    }
  }
}

section.benefits {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  margin-top: 40px;
  position: relative;

  & h2 {
    text-align: center;
  }

  & .action-button {
    margin-top: 48px;
  }

  & .cards {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    position: relative;

    & .card {
      display: flex;
      flex-direction: column;
    }

    & .card .icon {
      width: 56px;
      height: 56px;
    }

    & h3 {
      margin-top: 25px;
    }

    & .card p {
      margin-top: 16px;
      font-family: Inter;
      font-variation-settings: 'wght' 500;
      font-size: 20px;
      line-height: 140%;
      color: #686868;
    }

    & .card .icon-radar {
      background: no-repeat url('/images/icons/radar.svg') center / contain;
    }

    & .card .icon-customer-review {
      background: no-repeat url('/images/icons/customer-review.svg') center / contain;
    }

    & .card .icon-filter {
      background: no-repeat url('/images/icons/filter.svg') center / contain;
    }

    & .card .icon-pie-chart {
      background: no-repeat url('/images/icons/pie-chart.svg') center / contain;
    }

    & .background {
      z-index: -1;
      position: absolute;
      background: no-repeat url('/images/backgrounds/mobile3.webp') center right / contain;
      height: 100%;
      width: 100%;
      right: -16px;
    }
  }

  & .background {
    z-index: -1;
    position: absolute;
    background: no-repeat url('/images/backgrounds/mobile2.webp') top right / contain;
    width: 100vw;
    height: 100vh;
    top: -12.5%;
    right: 0;
  }
}

section.why-us {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  margin-top: 40px;
  position: relative;

  & .cards {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;

    & .card {
      display: flex;
      flex-direction: column;
    }

    & .card .icon {
      width: 48px;
      height: 48px;
      background: no-repeat url('/images/icons/check.svg') center / contain;
    }

    & .card h3 {
      margin-top: 25px;
    }
    
    & .card p {
      margin-top: 16px;
      font-family: Inter;
      font-variation-settings: 'wght' 500;
      font-size: 20px;
      line-height: 140%;
      color: #686868;
    }

    & .card .icons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;

      & img {
        aspect-ratio: 1;
        object-fit: contain;
      }
    }

    & .action-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 39px 24px 24px 24px;
      background: no-repeat url('/images/backgrounds/background.webp') center / cover;
      border-radius: 16px;
      gap: 25px;

      & h3 {
        color: #FFFFFF;
      }

      & .action-button {
        padding: 24px;
        font-size: 18px;
        font-variation-settings: 'wght' 600;
      }
    }
  }

  & .background {
    z-index: -1;
    position: absolute;
    background: no-repeat url('/images/backgrounds/mobile4.webp') top left / contain;
    width: 100%;
    height: 100%;
    left: -16px;
    top: -20%;
  }
}

section.certs {
  margin-top: 40px;
  display: flex;
  flex-direction: column;

  & h2 {
    padding: 0 16px;
  }

  & .cards {
    padding: 0 16px;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    & img {
      background-color: white;
      object-fit: contain;
      padding: 24px;
      aspect-ratio: 1 / 1;
      border-radius: 16px;
    }
  }
}

section.clients {
  margin-top: 40px;
  display: flex;
  flex-direction: column;

  & h2 {
    padding: 0 16px;
  } 

  & .cards {
    margin-top: 42px;
    display: flex;
    gap: 18px;
    overflow: auto;
    padding: 0 16px;

    & .logo {
      min-width: 180px;
      aspect-ratio: 1.65 / 1;
      border-radius: 16px;
    }

    & .logo-1 {
      background: rgb(237, 237, 237) no-repeat url('/images/icons/client1.webp') center / 100%;
    }

    & .logo-2 {
      background: #FFFFFF no-repeat url('/images/icons/client2.webp') center / 100%;
    }

    & .logo-3 {
      background: rgb(40, 74, 122) no-repeat url('/images/icons/client3.webp') center 80% / 90%;
    }

    & .logo-4 {
      background: #FFFFFF no-repeat url('/images/icons/client4.webp') center / cover;
    }

    & .logo-5 {
      background: rgb(51, 55, 31) no-repeat url('/images/icons/client5.webp') center / 100%;
    }

    & .logo-6 {
      background: #FFFFFF no-repeat url('/images/icons/client6.webp') center / cover;
    }
  }
}

section.reviews {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  width: unset;
  position: relative;

  & h2 {
    padding: 0 16px;
  }

  & .cards {
    margin-top: 25px;
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow: auto;
    scroll-snap-type: x mandatory;

    & article {
      scroll-snap-align: center;
      display: flex;
      flex-direction: column;
      gap: 25px;
      min-width: calc(100vw - 32px);

      & header {
        display: flex;
        align-items: center;
        gap: 24px;

        & img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }

        & address {
          font-family: Inter;
          font-variation-settings: 'wght' 700;
          font-size: 24px;
          font-style: normal;
        }
      }

      & p {
        font-family: Inter;
        font-size: 16px;
        font-variation-settings: 'wght' 500;
        line-height: 140%;
        color: #686868;
      }
    }
  }

  & .background {
    z-index: -1;
    position: absolute;
    background: no-repeat url('/images/backgrounds/mobile5.webp') top center / cover;
    width: 100%;
    height: 150vh;
    top: -70vh;
  }
}

section.workflow {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  position: relative;

  & .action-button {
    margin-top: 24px;
  }

  & .cards {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;

    & p {
      font-family: Inter;
      font-variation-settings: 'wght' 500;
      font-size: 20px;
      color: #686868;
    }

    & h3 {
      margin-top: 16px;
      line-height: 40px;
    }

    & .action-button {
      padding: 25px;
      font-variation-settings: 'wght' 600;
      font-size: 18px;
    }
  }

  & .background {
    position: absolute;
    z-index: -1;
    background: no-repeat url('/images/backgrounds/mobile6.webp') center / cover;
    width: 100vw;
    height: 100%;
    left: 0;
    top: 20%;
  }
}

.faq-wrapper {
  background: #FFFFFF;
}

section.faq {
  margin-top: 40px;
  padding: 16px;

  & .tabs {
    margin-top: 24px;

    & .tab:last-child {
      border-bottom: 1px solid black;
    }

    & .tab {
      position: relative;
      padding: 24px;
      border-top: 1px solid black;

      & label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Inter;
        font-variation-settings: 'wght' 700;
        font-size: 24px;

        & .icon {
          margin-left: 35px;
          min-width: 32px;
          min-height: 32px;
          background: no-repeat url('/images/icons/close.svg') center / contain;
          transform: rotate(-45deg);
          transition: all 0.15s ease;
          border-radius: 50%;
        }
      }

      & input {
        position: absolute;
        opacity: 0;
        z-index: -1;
      }

      & .content {
        max-height: 0;
        overflow: hidden;
        font-family: Inter;
        font-variation-settings: 'wght' 500;
        font-size: 18px;
        transition: all 0.2s ease;
      }

      & input:checked ~ .content {
        margin-top: 24px;
        max-height: 300px;
      }

      & input:checked ~ .label .icon {
        transform: rotate(0);
      }
    }
  }
}

.contacts-wrapper {
  background: no-repeat url('/images/backgrounds/background.webp') center / cover;
}

section.contacts {
  padding: 32px 16px;

  & h2 {
    color: #FFFFFF;
    font-size: 20px;
  }

  & form {
    margin-top: 16px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 16px;

    & .fields {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 24px;

      & input:not([type="submit"]) {
        font-family: Open Sans;
        font-variation-settings: 'wght' 400;
        font-size: 16px;
        padding: 16px;
        background: #F6F6F6;
        border: 1px solid #E5E5E5;
        border-radius: 16px;
        width: 100%;
        color: #000000;
      }

      & input::placeholder {
        color: #000000;
      }
    }

    & .action-button {
      margin-top: 32px;
    }

    & p {
      margin-top: 16px;
      font-family: Inter;
      font-variation-settings: 'wght' 400;
      font-size: 14px;
    }
  }

  & .title {
    margin-top: 16px;
    color: #FFFFFF;
    font-family: Inter;
    font-variation-settings: 'wght' 700;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    & .social {
      display: flex;
      gap: 16px;

      & .icon {
        width: 48px;
        height: 48px;
      }

      & .icon-vk {
        background: no-repeat url('/images/icons/vk.svg') center / contain;
      }

      & .icon-whatsapp {
        background: no-repeat url('/images/icons/whatsapp.svg') center / contain;
      }

      & .icon-telegram {
        background: no-repeat url('/images/icons/telegram.svg') center / contain;
      }
    }
  }
}

.footer-wrapper {
  background: #262626;
}

footer {
  padding: 32px 16px;
  color: #FFFFFF;

  & p.company {
    font-family: Open Sans;
    font-variation-settings: 'wght' 600;
    font-size: 18px;
  }

  & .blocks {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    & p, & address {
      font-family: Open Sans;
      font-variation-settings: 'wght' 400;
      font-size: 14px;
      font-style: normal;
    }
  }
}

@media screen and (min-width: 768px) {
  section, footer {
    max-width: 768px;
  }

  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 38px;
  }

  section.title {
    & .logo {
      min-height: 38px;
      margin-top: 26px;
    }

    & p {
      margin-top: 30px;
    }

    & .action-button {
      max-width: 380px;
      margin-left: auto;
      margin-right: auto;
      padding: 24px;
      font-size: 18px;
    }

    & .video {
      margin-top: 50px;
    }

    & .background {
      background: no-repeat url('/images/backgrounds/desktop1.webp') top right / contain;
      width: 50vw;
      right: calc(100% - 100vw);
    }

    & .background-2 {
      z-index: -1;
      position: absolute;
      background: no-repeat url('/images/backgrounds/desktop2.webp') top left / contain;
      width: 50vw;
      height: 100%;
      left: calc(100% - 100vw);
      top: 40%;
    }

    & .background-3 {
      z-index: -1;
      position: absolute;
      background: no-repeat url('/images/backgrounds/desktop3.webp') top right / contain;
      width: 50vw;
      height: 100%;
      right: calc(100% - 100vw - 5%);
      top: 62.5%;
    }
  }

  section.certs {
    & h2 {
      text-align: center;
    }
  }

  section.benefits {
    margin-top: 49px;

    & .cards {
      margin-top: 49px;
    }

    & .background {
      display: none;
    }
  }

  section.why-us {
    margin-top: 72px;

    & h2 {
      text-align: center;
    }

    & .cards {
      margin-top: 42px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      gap: 16px;

      & .card {
        display: flex;
        flex-direction: column;
        gap: 25px;

        & h3 {
          padding-top: 12px;
          margin-top: auto;
        }
      }
    }

    & .background {
      background: no-repeat url('/images/backgrounds/desktop4.webp') top left / contain;
      left: calc(100% - 100vw);
      top: 50%;
    }
  }

  section.clients {
    margin-top: 48px;

    & h2 {
      text-align: center;
    }

    & .cards {
      margin-top: 47px;
    }
  }
  
  section.reviews {
    max-width: unset;
    margin-top: 70px;

    h2 {
      padding: 0 calc((100vw - 768px) / 2 + 16px);
    }

    & .cards {
      margin-top: 32px;
      padding: 0 calc((100vw - 768px) / 2 + 16px);
      gap: 16px;

      & article {
        min-width: 512px;
      }
    }
  }

  section.workflow {
    margin-top: 45px;

    & .background {
      display: none;
    }
  }

  section.faq {
    padding: 36px 0;

    & h2 {
      text-align: center;
    }

    & .tabs {
      margin-top: 34px;
    }
  }

  section.contacts {
    padding: 46px 16px;
  }
}

@media screen and (min-width: 1024px) {
  .open-contacts {
    right: 50px;
    bottom: 65px;
  }

  section, footer {
    max-width: 1024px;
  }

  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 44px;
  }

  section.title {
    & .logo {
      min-height: 42px;
      margin-top: 32px;
    }

    & p {
      margin-top: 28px;
    }

    & .video {
      margin-top: 62px;
    }
  }

  section.benefits {
    margin-top: 58px;

    & .action-button {
      width: calc(100% / 3 - 8px);
      margin: 58px auto 0 auto;
      padding: 24px;
    }

    & .cards {
      margin-top: 58px;
      gap: 16px;
      grid-template-columns: repeat(3, 1fr);

      & .card {
        gap: 16px;

        & h3 {
          margin-top: auto;
        }

        & p {
          margin: 0;
        }
      }
    }
  }

  section.certs {
    margin-top: 56px;

    & .cards {
      width: 65%;
      margin: 62px auto 0 auto;
    }
  }

  section.why-us {
    margin-top: 82px;

    & .cards {
      margin-top: 52px;
    }
  }

  section.clients {
    margin-top: 56px;

    & .cards {
      margin-top: 62px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);

      & .logo {
        min-width: unset;
      }
    }
  }

  section.reviews {
    margin-top: 95px;

    h2 {
      padding: 0 calc((100vw - 1024px) / 2 + 16px);
    }

    & .cards {
      margin-top: 45px;
      padding: 0 calc((100vw - 1024px) / 2 + 16px);

      & article {
        min-width: 682px;

        & p {
          font-size: 18px;
        }
      }
    }
  }

  section.workflow {
    flex-direction: column;
    justify-content: space-between;
    margin-top: 50px;

    & .cards {
      margin-top: 50px;
      width: 100%;
    }
  }

  section.faq {
    padding: 60px 0;

    & .tabs {
      margin: 44px auto 0 auto;
      width: 80%;
    }
  }

  section.contacts {
    padding: 60px 16px 72px 16px;
    display: flex;
    justify-content: space-between;

    & h2 {
      font-size: 32px;
    }

    & form {
      margin: 0;
      max-width: 50%;
      padding: 24px;

      & h3 {
        font-size: 36px;
      }

      & .action-button {
        font-size: 18px;
        padding: 20px;
      }

      & .fields input:not([type="submit"]) {
        padding: 20px;
      }
    }

    & .title {
      margin-top: 46px;
      gap: 20px;

      & .social {
        margin-top: 20px;
      }
    }
  }

  footer {
    padding: 24px 16px;

    & .blocks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
  }
}

@media screen and (min-width: 1280px) {
  section, footer {
    max-width: 1280px;
  }

  h1 {
    font-size: 56px;
  }

  h2 {
    font-size: 48px;
  }

  section.title {
    & .logo {
      min-height: 46px;
      margin-top: 37px;
    }

    & p {
      margin-top: 26px;
    }

    & .video {
      margin-top: 74px;
    }
  }

  section.benefits {
    margin-top: 68px;

    & .cards {
      margin-top: 68px;
      grid-template-columns: repeat(3, 1fr);
      
    }
  }

  section.why-us {
    margin-top: 92px;

    & .cards {
      max-width: 80%;
      margin: 62px auto 0 auto;
      grid-template-columns: repeat(2, 1fr);
    }
  }

  section.clients {
    margin-top: 64px;

    & .cards {
      margin-top: 77px;
    }
  }

  section.reviews {
    margin-top: 115px;

    h2 {
      padding: 0 calc((100vw - 1280px) / 2 + 16px);
    }

    & .cards {
      margin-top: 62px;
      padding: 0 calc((100vw - 1280px) / 2 + 16px);
    }
  }

  section.workflow {
    margin-top: 60px;

    & .action-button {
      margin-top: 32px;
      max-width: 28%;
      padding: 24px;
    }

    & .cards {
      max-width: 100%;
      flex-direction: row;

      & .card h3 {
        font-size: 20px;
        line-height: 32px;
      }
    }
  }

  section.faq {
    padding: 86px 0;

    & .tabs {
      margin-top: 54px;
    }
  }

  section.contacts {
    padding: 74px 16px 97px 16px;

    & h2 {
      font-size: 40px;
    }

    & .title {
      margin-top: 54px;
      gap: 22px;

      & .social {
        margin-top: 22px;
      }
    }

    & form {
      padding: 40px;
      max-width: 45%;

      & h3 {
        font-size: 40px;
      }

      & .fields input:not([type="submit"]) {
        padding: 24px;
      }

      & .action-button {
        padding: 24px;
      }
    }
  }
}