* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Unbounded", sans-serif;
  font-size: 32px;
  background: linear-gradient(180deg, #262626 0%, #141414 100%);
  color: #F0F0F0;
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

.banner, .about, .premium, .download, .footer {
  scroll-margin-top: 80px;
}

.hidden {
  display: none;
}

.order {
  order: -1;
}

.animationIn {
  animation: barIn ease-in-out 0.75s;
}

.animationOut {
  animation: barOut ease-in-out 0.75s;
}

.order-sec {
  order: 1;
}

.section-title {
  font-weight: 700;
  font-size: 64px;

  .section-title-highlighted {
    background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

a {
  text-decoration: none;
}

.container {
  max-width: 1705px;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  padding-top: 48px;
  display: flex;
  justify-content: space-between;

  & > .header-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .header-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 160px;

    .header-list {
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 40px;

      .header-item {
        .header-link {
          color: #F0F0F0;
          font-weight: 400;
          font-size: 20px;
          text-align: center;
        }
      }
    }

    .header-langs {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-top: 12px;

      .header-btn {
        font-weight: 400;
        font-size: 22px;
        text-align: center;
        color: #F0F0F0;
        background-color: transparent;
        border: none;
        cursor: pointer;
      }

      .header-btn-active {
        background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}

.banner {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 802px;
    height: 802px;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: rgba(192, 49, 183, 0.2);
    filter: blur(373px);
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    width: 802px;
    height: 802px;
    top: 40%;
    left: 100%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: rgba(90, 201, 139, 0.5);
    filter: blur(373px);
    z-index: -1;
  }

  max-width: 92%;
  margin-top: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .banner-wrapper {
    margin-bottom: 100px;
  }

  .banner-title {
    font-weight: 700;
    font-size: 96px;
    background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .banner-subtitle {
    font-weight: 400;
    font-size: 32px;
    line-height: 125%;
    margin-top: 40px;
    margin-bottom: 80px;
  }

  .banner-link {
    max-width: 452px;
    display: inline-block;
    position: relative;
    margin: 14px auto 0 auto;
    border: none;
    background-color: unset;

    img {
      width: 400px;
    }

    span {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-65%);
      font-weight: 500;
      font-size: 24px;
      text-align: center;
      color: #fff;
    }
  }
}

.about {
  position: relative;
  padding-top: 200px;

  &::before {
    content: '';
    position: absolute;
    width: 802px;
    height: 802px;
    top: 25%;

    border-radius: 100%;
    background: rgba(192, 49, 183, 0.2);
    filter: blur(373.6px);
  }

  &::after {
    content: '';
    position: absolute;

    width: 338px; /* (r="169") * 2 = 338px */
    height: 338px; /* (r="169") * 2 = 338px */

    bottom: 10%;
    left: -20%;

    border-radius: 100%;
    background: #5ac98b;
    filter: blur(373px);
  }

  .section-title {
    margin-bottom: 60px;
  }

  .about-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;

    .about-item {
      display: flex;
      flex-direction: column;
      padding: 60px 58px;
      border: 1px solid rgba(255, 255, 255, 0.51);
      border-radius: 100px;
      backdrop-filter: blur(17px);
      background: rgba(255, 255, 255, 0.13);
      min-height: 600px;
      margin-bottom: 10px;

      .about-item-title {
        text-align: center;
        font-weight: 700;
        font-size: 36px;
        background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        max-width: 284px;
      }

      .about-item-accord-btn {
        display: none;
      }

      .about-wrapper {
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 60px;
        align-items: center;

        .about-btn {
          background: none;
          border: none;
          fill: url('#paint0_linear_767_1531');
        }

        .about-desc {
          font-weight: 500;
          font-size: 20px;
          text-align: center;
          max-width: 285px;
        }
      }


      .about-inlist {
        display: none;
        margin-top: 55px;
        padding-left: 46px;
        list-style-type: initial;
        font-weight: 400;
        font-size: 32px;
        line-height: 125%;
      }
    }

    .about-item-opened {
      flex: 0 1 calc(75% + 6px);

      .about-item-title {
        text-align: start;
        max-width: unset;
      }

      .about-inlist {
        display: block;
      }

      .about-wrapper {
        display: none;
      }
    }
  }
}

.premium {
  margin-top: 190px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    width: 464px;
    height: 464px;
    top: 90%;
    right: -20%;
    border-radius: 50%;
    background: rgba(140, 56, 122, 0.7);
    filter: blur(273px);
    transform: translate(-50%, -50%);
  }

  .section-title {
    text-align: end;
    margin-bottom: 60px;
  }

  .premium-wrapper {
    display: flex;
    justify-content: space-between;

    .premium-wrapper-title {
      max-width: 972px;
      margin-bottom: 56px;

      .section-title-highlighted {
        background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .premium-inner-wrapper {
      max-width: 979px;

      .premium-list {
        padding-left: 50px;
      }
    }

    .premium-image {
      position: relative;
      padding-right: 60px;
    }
  }
}

.download {
  position: relative;
  margin-top: 186px;

  &::before {
    position: absolute;
    content: '';
    width: 1063px; /* 531.5 * 2 */
    height: 1063px;
    right: -60%;
    border-radius: 50%;
    background: rgba(90, 201, 139, 0.5);
    filter: blur(197px);
    transform: translate(-531.5px, -157px); /* позиционирование */
  }

  &::after {
    content: '';
    position: absolute;
    width: 802px;
    height: 802px;
    border-radius: 50%;
    top: 50%;
    left: -25%;
    background: rgba(192, 49, 183, 0.2);
    filter: blur(187px);
    z-index: -1;
  }

  .download-list {
    margin-top: 56px;
    gap: 30px;
    display: flex;
    justify-content: space-between;
    list-style: none;

    .download-item {
      position: relative;
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 30px;
      z-index: 2;

      .download-title {
        text-align: center;

        span {
          background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .download-btn {
        position: relative;
        margin: 14px auto 0 auto;
        border: none;
        transform: scale(1.3);

        background-color: unset;

        .download-btn-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          font-weight: 500;
          font-size: 14px;
          text-align: center;
          color: #fff;
        }
      }

      .download-btn-hidden {
        opacity: 0;
      }

      .download-img {
        width: 40%;
        border-radius: 14px;
        display: block;
        margin: 0 auto;
      }

      video {
        width: 40%;
        border-radius: 14px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.footer {
  margin-top: 112px;
  box-shadow: 0 -18px 59px 13px rgba(52, 209, 123, 0.1);
  background: #141414;
  border-radius: 100px 100px 0 0;
  padding: 100px 0;

  .container {
    .footer-socials-list {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      max-width: 816px;


      .footer-socials-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        .footer-socials-p {
          margin-top: 30px;
          font-weight: 300;
          font-size: 24px;
          color: #F0F0F0;
        }
      }
    }

    .footer-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      margin-top: 128px;

      .footer-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        text-align: left;

        .footer-item {
          width: 50%;

          .footer-link {
            font-weight: 300;
            font-size: 20px;
            text-align: center;
            color: #F0F0F0;
          }
        }
      }

      .footer-list-polit {
        display: flex;
        flex-direction: column;
        text-align: end;
        align-items: flex-end;

        .footer-item {
          width: fit-content;
        }
      }

      .footer-center {
        text-align: center;

        .footer-center-text {
          font-weight: 300;
          font-size: 20px;
          text-align: center;
          padding: 8px 0;
        }
      }
    }
  }
}

@media (max-width: 1700px) {
  .about {
    .about-list {
      .about-item-opened {
        flex: 0 1 calc(64vw + 6px);
      }
    }
  }
}

@media (max-width: 1280px) {
  .about {
    .about-list {
      .about-item-opened {
        flex: 0 1 calc(55vw + 6px);
      }

      .about-item {
        .about-inlist {
          padding: 24px;
          font-size: 24px;
        }
      }
    }
  }
}

@media (min-width: 1450px) and (max-width: 1700px) {
  .about {
    & .about-list {
      .about-item-opened {
        flex: 0 1 calc(68vw + 6px);
      }
    }
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {
  .about {
    & .about-list {
      .about-item-opened {
        flex: 0 1 calc(59vw + 6px);
      }
    }
  }
}

@media (max-width: 1200px) {
  .banner {
    .banner-link {
      span {
        font-size: calc(1vw + 2px);
      }
    }
  }

  .footer {
    margin-top: 20px;
    padding: 30px 0;

    .container {
      .footer-socials-list {
        gap: 30px;
        justify-content: center;

        .footer-socials-link {
          img {
            width: 70%;
          }

          .footer-socials-p {
            margin-top: 10px;
            font-size: 1.5vw;
          }
        }

        .footer-socials-link[href="mailto:dayf1t@mail.ru"] {
          img {
            width: 45%;
          }
        }
      }

      .footer-wrapper {
        grid-template-columns: 1fr;
        margin-top: 10px;

        .footer-list:nth-child(1) {
          display: none;
        }

        .footer-list {
          text-align: center;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .footer-item {
            line-height: 4vw;

            .footer-link {
              font-size: 2vw;
              text-decoration: underline;
              text-align: center;
            }
          }
        }

        .footer-list-polit {
          justify-content: center;
          text-align: center;
        }

        .footer-center {
          order: 1;

          p:nth-child(1) {
            display: none;
          }

          .footer-center-text {
            margin-top: 10px;
            font-size: 1.5vw;
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .header {
    .header-wrapper {
      gap: 40px;
    }
  }

  .banner {
    .banner-link {
      img {
        border-radius: 66px;
        object-fit: cover;
        width: 35vw;
        height: 6vw;
      }

      span {
        font-size: calc(1vw + 5px);
      }
    }
  }

  .about {
    padding-top: 50px;

    .about-list {
      flex-direction: column;

      .about-item {
        position: relative;
        width: 100%;
        min-height: unset;

        .about-wrapper {
          display: none;
        }

        .about-title-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .about-item-accord-btn {
            display: block;
            background: unset;
            border: none;

            img {
              width: 32px;
            }
          }
        }

        .about-item-title {
          max-width: unset;
          text-align: start;
        }

        .about-inlist {
          display: none;
        }
      }

      .about-item-opened {
        .about-inlist {
          display: block;
        }
      }
    }
  }

  .premium {
    position: relative;

    .premium-wrapper {
      .premium-image {
        position: absolute;
        top: -10%;
        left: 0;
        z-index: -1;
      }
    }
  }

  .download {
    & .download-list {
      & .download-item {
        .download-img {
          /*width: 100%;*/
        }
      }
    }
  }

}

@media (max-width: 920px) {
  .header {
    position: relative;
    flex-direction: column;
    align-items: start;

    .header-wrapper {
      .header-langs {
        flex-direction: row;
        position: absolute;
        right: 0;
        top: 48px;
      }
    }
  }

  .banner {
    img {
      width: 50%;
    }
  }

  .download {
    margin-top: 140px;

    .download-list {
      flex-direction: column;
      align-items: center;
    }

    .download-btn-hidden {
      display: none;
    }

    .download-btn {
      margin-top: 10px;
    }
  }

  .footer {
    margin-top: 20px;
    padding: 30px 0;

    .container {
      .footer-socials-list {
        gap: 30px;
        justify-content: center;

        .footer-socials-link {
          img {
            width: 70%;
          }

          .footer-socials-p {
            margin-top: 10px;
            font-size: 2.5vw;
          }
        }

        .footer-socials-link[href="mailto:dayf1t@mail.ru"] {
          img {
            width: 45%;
          }
        }
      }

      .footer-wrapper {
        grid-template-columns: 1fr;
        margin-top: 10px;

        .footer-list:nth-child(1) {
          display: none;
        }

        .footer-list {
          text-align: center;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .footer-item {
            line-height: 5vw;

            .footer-link {
              font-size: 3vw;
              text-decoration: underline;
              text-align: center;
            }
          }
        }

        .footer-list-polit {
          justify-content: center;
          text-align: center;
        }

        .footer-center {
          order: 1;

          p:nth-child(1) {
            display: none;
          }

          .footer-center-text {
            margin-top: 10px;
            font-size: 2.5vw;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .header {
    .header-wrapper {
      .header-nav {
        .header-list {
          gap: 5.7vw;

          .header-item {
            .header-link {
              font-size: 3vw;
            }
          }
        }
      }

      .header-langs {
        font-size: 3vw;
      }
    }
  }

  .banner {
    .banner-wrapper {
      margin-bottom: 20px;

      .banner-title {
        font-size: 8vw;
      }

      .banner-subtitle {
        font-size: 3vw;
        margin: 20px 0;
      }

      .banner-link {
        font-size: 2.5vw;
        margin: 0;
        /*padding: 1vw 1.1vw;*/

        img {
          width: 40vw;
        }
      }
    }
  }

  .about {
    padding-top: 20px;

    .about-title {
      font-size: 8vw;
      margin-bottom: 20px;
    }

    .about-list {
      .about-item {
        min-height: unset;
        padding: 5.7vw 7vw;
        border-radius: 40px;

        .about-title-wrapper {
          .about-item-title {
            font-size: 5vw;
          }
        }

        .about-inlist {
          display: none;
          font-size: 4vw;
          margin-top: 0;
        }
      }

      .about-item-opened {
        .about-inlist {
          display: block;
        }
      }
    }

    &::after {
      z-index: -1;
    }
  }

  .premium {
    margin-top: 60px;

    .premium-title {
      margin-bottom: 20px;
      font-size: 8vw;
    }

    .premium-wrapper {
      .premium-inner-wrapper {
        .premium-wrapper-title {
          font-size: 4vw;
          margin-bottom: 10px;
        }

        .premium-list {
          font-size: 4vw;
          padding: 20px;
        }
      }

      .premium-image {
        width: 284px;
        left: -10%;
      }
    }
  }

  .download {
    margin-top: 40px;

    .section-title {
      font-size: 8vw;
    }

    .download-list {
      margin-top: 10px;

      .download-item {
        width: 80%;

        .download-title {
          font-size: 4vw;
        }

        .download-btn {
          img {
            width: 100%;
          }
        }

        .download-img {
          width: 100%;
        }

        video {
          width: 100%;
        }
      }

    }

    &::after {
      top: 35%;
    }
  }
}

.scroll-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(137deg, #6df27d 0%, #15b980 100%);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
  text-decoration: none;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

.about .about-wrapper,
.about .about-inlist {
  will-change: opacity;
}

.about .about-btn img {
  transition: transform 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .about .about-wrapper,
  .about .about-inlist {
    transition: none !important;
  }

  .about .about-item {
    transition: none !important;
  }

  .about .about-btn img {
    transition: none !important;
  }
}


#installAndroidBtn.is-disabled,
#installAndroidBtn:disabled {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(0.2);
}

.hidden {
  display: none;
}