/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%
}

body {
   margin: 0
}

main {
   display: block
}

h1 {
   font-size: 2em;
   margin: .67em 0
}

hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible
}

pre {
   font-family: monospace, monospace;
   font-size: 1em
}

.go_cloud
{
   font-size: 1.2rem;
   display: inline-block;
   width: 100%;
   margin: 1rem 0 0rem 0;
   background-color: white;
   color: #012A80;
   padding: 1rem 2rem;
   border-radius: 1rem;
   text-align: center;
   max-width: 25rem;
}

a {
   background-color: transparent
}

abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted
}

b,
strong {
   font-weight: bolder
}

code,
kbd,
samp {
   font-family: monospace, monospace;
   font-size: 1em
}

small {
   font-size: 80%
}

sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline
}

sub {
   bottom: -.25em
}

sup {
   top: -.5em
}

img {
   border-style: none
}

button,
input,
optgroup,
select,
textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0
}

button,
input {
   overflow: visible
}

button,
select {
   text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
   -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
   border-style: none;
   padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
   outline: 1px dotted ButtonText
}

fieldset {
   padding: .35em .75em .625em
}

legend {
   box-sizing: border-box;
   color: inherit;
   display: table;
   max-width: 100%;
   padding: 0;
   white-space: normal
}

progress {
   vertical-align: baseline
}

textarea {
   overflow: auto
}

[type=checkbox],
[type=radio] {
   box-sizing: border-box;
   padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
   height: auto
}

[type=search] {
   -webkit-appearance: textfield;
   outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
   -webkit-appearance: none
}

::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit
}

details {
   display: block
}

summary {
   display: list-item
}

template {
   display: none
}

[hidden] {
   display: none
}

@font-face {
   font-family: Inter;
   font-display: swap;
   src: url(../fonts/Inter-Regular.woff2) format("woff2"), url(../fonts/Inter-Regular.woff) format("woff");
   font-style: normal;
   font-weight: 400
}

@font-face {
   font-family: Inter;
   font-display: swap;
   src: url(../fonts/Inter-SemiBold.woff2) format("woff2"), url(../fonts/Inter-SemiBold.woff) format("woff");
   font-style: normal;
   font-weight: 600
}

@font-face {
   font-family: PressStart2P;
   font-display: swap;
   src: url(../fonts/PressStart2P-Regular.woff2) format("woff2"), url(../fonts/PressStart2P-Regular.woff) format("woff");
   font-style: normal;
   font-weight: 400
}

@font-face {
   font-family: Inter;
   font-display: swap;
   src: url(../fonts/Inter-Medium.woff2) format("woff2"), url(../fonts/Inter-Medium.woff) format("woff");
   font-style: normal;
   font-weight: 500
}

:focus {
   outline: 0
}

:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 3px
}

@media (any-hover:hover) {

   a,
   button {
      transition: opacity .3s ease
   }

   a:hover,
   button:hover {
      opacity: .7
   }
}

a:active {
   opacity: .5
}

.container {
   margin-inline: auto;
   padding: 0 clamp(.9375rem, .875rem + .3125vw, 1.25rem);
   max-width: 93.75rem
}

.subtitle {
   margin: 0;
   font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
   line-height: normal;
   font-weight: 600;
   color: #0b58f4;
   text-transform: uppercase
}

.text {
   max-width: 45.25rem;
   font-size: 16px;
   line-height: 130%;
   font-weight: 400;
   text-align: justify
}

@media (width <=43.81125rem) {
   .text {
      text-align: left
   }
}

.digits {
   animation: swiming 5s linear infinite
}

@media (width <=43.81125rem) {
   .digits {
      animation: none
   }
}

@keyframes swiming {
   0% {
      transform: translateY(0px);
      opacity: 1
   }

   50% {
      transform: translateY(10px);
      opacity: .5
   }

   100% {
      transform: translateY(0px);
      opacity: 1
   }
}

.visually-hidden {
   position: fixed;
   transform: scale(0)
}

.is-hidden {
   display: none !important
}

@media (width <=31.31125rem) {
   .mobile-hidden {
      display: none !important
   }
}

@media (width > 31.31125rem) {
   .desktop-hidden {
      display: none !important
   }
}

.scroll-stop {
   overflow: hidden
}

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

.html {
   height: 100%;
   min-height: -moz-max-content;
   min-height: max-content;
   min-width: 18.75rem;
   min-width: -moz-fit-content;
   color: #000;
   background-color: #fff;
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent
}

.body {
   display: flex;
   flex-direction: column;
   margin: 0;
   min-height: 100%;
   font-family: Inter, sans-serif;
   font-size: clamp(.875rem, .85rem + .125vw, 1rem);
   font-weight: 500
}

.main {
   flex-grow: 1
}

.btn-reset {
   padding: 0;
   border: none;
   font: inherit;
   color: inherit;
   letter-spacing: inherit;
   background: 0 0;
   cursor: pointer
}

.list-reset {
   margin: 0;
   padding: 0;
   list-style: none
}

.input-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   border-radius: 0;
   background-color: #fff;
   font: inherit
}

.input-reset::-webkit-search-cancel-button,
.input-reset::-webkit-search-decoration,
.input-reset::-webkit-search-results-button,
.input-reset::-webkit-search-results-decoration {
   display: none
}

a {
   display: inline-flex;
   color: inherit;
   text-decoration: none
}

img,
video {
   display: block;
   height: auto;
   max-width: 100%;
   -o-object-fit: cover;
   object-fit: cover
}

svg {
   display: block;
   height: 100%;
   width: 100%
}

.nav {
   position: fixed;
   bottom: 50px;
   right: clamp(-6.25rem, -10rem + 18.75vw, 12.5rem);
   z-index: 50;
   width: 100%;
   max-width: clamp(8.125rem, 5.25rem + 14.375vw, 22.5rem);
   border-radius: clamp(.625rem, .5rem + .625vw, 1.25rem);
   overflow: auto
}

@media (width <=77.56125rem) {
   .nav {
      right: 20px
   }
}

@media (width <=64.06125rem) {
   .nav {
      bottom: 20px;
      max-width: clamp(13.125rem, 11.25rem + 9.375vw, 22.5rem)
   }

   .nav.small {
      height: 3.125rem;
      width: 3.125rem;
      overflow: hidden
   }
}

.nav__btn {
   display: none
}

.nav .burger {
   height: 3.125rem;
   width: 3.125rem;
   border-radius: clamp(.625rem, .5rem + .625vw, 1.25rem);
   background-color: #0b58f4;
   position: relative;
   border: 1px solid #fff
}

.nav .burger::after,
.nav .burger::before,
.nav .burger__line {
   content: "";
   position: absolute;
   left: 10%;
   right: 10%;
   height: 2px;
   background-color: #fff;
   transition: all .3s ease
}

.nav .burger__line {
   top: 50%;
   transform: translateY(-50%) rotate(0deg)
}

.nav .burger::before {
   top: 20%
}

.nav .burger::after {
   bottom: 20%
}

.nav .burger.active .burger__line {
   display: none
}

.nav .burger.active::after,
.nav .burger.active::before {
   top: 50%;
   bottom: auto
}

.nav .burger.active::before {
   transform: translateY(-50%) rotate(45deg)
}

.nav .burger.active::after {
   transform: translateY(-50%) rotate(-45deg)
}

@media (width <=64.06125rem) {
   .nav .burger {
      display: block
   }
}

.nav__list {
   display: flex;
   flex-direction: column;
   gap: clamp(.625rem, .5625rem + .3125vw, .9375rem)
}

.nav__link {
   display: flex;
   align-items: center;
   gap: clamp(.625rem, .5rem + .625vw, 1.25rem);
   padding-block: .625rem;
   padding-inline: clamp(.625rem, .5rem + .625vw, 1.25rem);
   height: 3.75rem;
   border-radius: clamp(.625rem, .5rem + .625vw, 1.25rem);
   background-color: #0b58f4;
   font-size: clamp(.875rem, .85rem + .125vw, 1rem);
   line-height: 100%;
   color: #fff
}

.nav__link.is-active {
   background-color: #ff1950
}

.nav__link.is-active .nav__link-icon::after,
.nav__link.is-active .nav__link-icon::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 2px;
   background-color: #fff;
   transform: translate(-50%, -50%) rotate(45deg);
   transform-origin: center
}

.nav__link.is-active .nav__link-icon::after {
   transform: translate(-50%, -50%) rotate(-45deg)
}

.nav__link-icon {
   position: relative;
   min-width: clamp(1.875rem, 1.75rem + .625vw, 2.5rem);
   height: clamp(1.875rem, 1.75rem + .625vw, 2.5rem);
   width: clamp(1.875rem, 1.75rem + .625vw, 2.5rem);
   border: 1px solid #fff
}

.nav__link-icon::after,
.nav__link-icon::before {
   content: "";
   position: absolute;
   top: 65%;
   left: 50%;
   width: 50%;
   height: 2px;
   background-color: #fff;
   transform-origin: 0 50%
}

.nav__link-icon::before {
   transform: rotate(-135deg)
}

.nav__link-icon::after {
   transform: rotate(-45deg)
}

.hero__container {
   position: relative;
   margin-bottom: clamp(1.25rem, 1.0625rem + .9375vw, 2.1875rem);
   padding-top: clamp(.625rem, -.025rem + 3.25vw, 3.875rem);
   padding-right: 0;
   padding-bottom: clamp(.625rem, -.075rem + 3.5vw, 4.125rem);
   padding-left: clamp(.625rem, -1.125rem + 8.75vw, 9.375rem)
}

@media (width <=77.56125rem) {
   .hero__container {
      padding-top: 45px;
      padding-inline: clamp(.625rem, .125rem + 2.5vw, 3.125rem)
   }
}

@media (width <=43.81125rem) {
   .hero__container {
      padding-top: 100px;
      padding-inline: 30px
   }
}

@media (width <=31.31125rem) {
   .hero__container {
      padding-top: 20px;
      padding-inline: clamp(.625rem, -.4375rem + 5.3125vw, 5.9375rem)
   }
}

@media (width <=18.81125rem) {
   .hero__container {
      padding-top: 206px;
      padding-inline: 30px
   }
}

.no-webp .hero__container::before {
   background-image: url(../images/hero/hero-decor.png)
}

.hero__container::before {
   content: "";
   position: absolute;
   left: -128px;
   bottom: -61px;
   z-index: -2;
   width: 37%;
   aspect-ratio: 16/15;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover
}

@media (width <=77.56125rem) {
   .hero__container::before {
      content: none
   }
}

.hero__container::after {
   content: "";
   position: absolute;
   left: 0rem;
   bottom: 0;
   z-index: -1;
   height: 44.375rem;
   width: 58.375rem;
   border: .25rem solid #0b58f4;
   border-radius: clamp(1.25rem, .875rem + 1.875vw, 3.125rem)
}

@media (width <=77.56125rem) {
   .hero__container::after {
      left: 5px;
      right: 5px;
      width: auto
   }
}

.hero__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: clamp(.625rem, .0625rem + 2.8125vw, 3.4375rem);
   padding-left: 1.9375rem;
   padding-right: 7rem
}

@media (width <=77.56125rem) {
   .hero__header {
      margin-bottom: 1.5625rem;
      padding-inline: 18px
   }
}

@media (width <=43.81125rem) {
   .hero__header {
      padding-inline: 40px
   }
}

@media (width <=31.31125rem) {
   .hero__header {
      margin-bottom: 5px;
      padding-inline: 0;
      padding-left: clamp(.3125rem, -.875rem + 5.9375vw, 6.25rem)
   }
}

@media (width <=18.81125rem) {
   .hero__header {
      margin-bottom: 33px;
      padding-left: 20px
   }
}

@media (width <=77.56125rem) {
   .hero__header .logo {
      position: relative;
      z-index: 2;
      width: clamp(6.25rem, 5.25rem + 5vw, 11.25rem)
   }
}

@media (width <=77.56125rem) and (width <=43.81125rem) {
   .hero__header .logo {
      width: 145px;
      z-index: 3
   }
}

@media (width <=77.56125rem) and (width <=31.31125rem) {
   .hero__header .logo {
      width: 57px
   }
}

@media (width <=77.56125rem) and (width <=18.81125rem) {
   .hero__header .logo {
      width: 110px
   }
}

@media (width <=77.56125rem) {
   .hero__header .logo svg path {
      fill: #fff
   }
}

@media (width <=77.56125rem) {
   .hero__header .logo-td {
      display: none
   }
}

.hero__content {
   position: relative;
   padding-right: 770px;
   padding-left: 1.875rem;
   background-color: #fff
}

@media (width <=77.56125rem) {
   .hero__content {
      position: static;
      padding-left: 18px;
      padding-right: 0
   }
}

@media (width <=43.81125rem) {
   .hero__content {
      padding-right: 20px;
      padding-left: 40px
   }

   .no-webp .hero__content::before {
      background-image: url(../images/hero/hero-cloud.png)
   }

   .hero__content::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      height: 400px;
      width: 500px
   }
}

@media (width <=31.31125rem) {
   .hero__content {
      padding-right: 0;
      padding-left: clamp(.3125rem, -.875rem + 5.9375vw, 6.25rem)
   }

   .hero__content::before {
      content: none
   }
}

@media (width <=18.81125rem) {
   .hero__content {
      padding: 0
   }
}

@media (width <=77.56125rem) {
   .hero__content-header {
      display: flex;
      align-items: center;
      margin-bottom: 50px
   }
}

@media (width <=43.81125rem) {
   .hero__content-header {
      flex-wrap: wrap
   }
}

@media (width <=31.31125rem) {
   .hero__content-header {
      flex-wrap: nowrap
   }
}

@media (width <=18.81125rem) {
   .hero__content-header {
      flex-direction: column;
      align-items: flex-start
   }
}

.hero__decor {
   position: absolute;
   top: -2.8125rem;
   right: 6.5rem;
   max-width: 680px
}

@media (width <= 1280px) {
   .hero__decor {right: 6rem;}

}

@media (width <=77.56125rem) {
   .hero__decor {
      display: none
   }
}

.hero__decor-frame {
   position: absolute;
   top: -.375rem;
   right: 0;
   z-index: 1;
   -webkit-mask-image: url(../images/hero/hero-frame2.svg);
   mask-image: url(../images/hero/hero-frame2.svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: 95%;
   mask-size: 95%
}

.hero__decor-frame path {
   stroke: #0b58f4;
   fill: #0b58f4
}

@media (width <=77.56125rem) {
   .hero__decor-frame {
      top: 5px;
      right: auto;
      left: clamp(.625rem, .125rem + 2.5vw, 3.125rem);
      z-index: 1;
      height: 195px;
      width: clamp(15.625rem, 13.25rem + 11.875vw, 27.5rem);
      -webkit-mask-image: none;
      mask-image: none;
      overflow: hidden
   }

   .hero__decor-frame svg {
      height: 293px
   }
}

@media (width <=43.81125rem) {
   .hero__decor-frame {
      z-index: 2;
      top: 66px;
      left: 32px;
      height: 333px;
      width: clamp(25rem, 20.25rem + 23.75vw, 48.75rem)
   }

   .hero__decor-frame svg {
      height: 370px
   }
}

@media (width <=31.31125rem) {
   .hero__decor-frame {
      top: 0px;
      left: clamp(.3125rem, -.8125rem + 5.625vw, 5.9375rem);
      height: 100px;
      width: clamp(8.75rem, 3.25rem + 27.5vw, 36.25rem)
   }

   .hero__decor-frame svg {
      height: clamp(8.4375rem, 4.5rem + 19.6875vw, 28.125rem)
   }
}

@media (width <=18.81125rem) {
   .hero__decor-frame {
      top: 17%;
      left: 30px;
      height: 270px;
      width: 270px
   }

   .hero__decor-frame svg {
      height: auto;
      width: 357px
   }
}

.hero__title {
   position: relative;
   z-index: 1;
   margin: 0;
   margin-bottom: clamp(.625rem, .375rem + 1.25vw, 1.875rem);
   max-width: 35rem;
   font-size: clamp(2rem, 1.625rem + 1.875vw, 3.875rem);
   line-height: normal;
   font-weight: 600;
   color: #0b58f4;
   text-transform: uppercase
}

@media (width <=77.56125rem) {
   .hero__title {
      font-size: clamp(1.25rem, .875rem + 1.875vw, 3.125rem);
      color: #fff;
      max-width: -moz-min-content;
      max-width: min-content;
      margin-right: clamp(3.75rem, 3.3125rem + 2.1875vw, 5.9375rem);
      margin-bottom: 0
   }
}

@media (width <=43.81125rem) {
   .hero__title {
      z-index: 3;
      margin-right: 0;
      margin-bottom: 20px;
      width: 100%;
      max-width: none;
      font-size: clamp(2.375rem, 1.6625rem + 3.5625vw, 5.9375rem)
   }
}

@media (width <=31.31125rem) {
   .hero__title {
      margin-right: clamp(.625rem, -1.625rem + 11.25vw, 11.875rem);
      margin-bottom: 0;
      width: auto;
      font-size: clamp(1rem, .575rem + 2.125vw, 3.125rem)
   }
}

@media (width <=18.81125rem) {
   .hero__title {
      margin-right: 0;
      margin-bottom: 14px;
      padding-left: 20px;
      font-size: 28px
   }
}

.hero__descr {
   display: none
}

@media (width <=77.56125rem) {
   .hero__descr {
      position: relative;
      z-index: 1;
      display: block;
      margin: 0;
      margin-right: clamp(0rem, -.425rem + 2.125vw, 2.125rem);
      max-width: 290px;
      font-size: clamp(.625rem, .3875rem + 1.1875vw, 1.8125rem);
      line-height: 120%;
      color: #fff
   }
}

@media (width <=43.81125rem) {
   .hero__descr {
      z-index: 3;
      margin-right: 0;
      max-width: calc(61% - 10px);
      font-size: clamp(1rem, .6875rem + 1.5625vw, 2.5625rem);
      line-height: 120%
   }
}

@media (width <=31.31125rem) {
   .hero__descr {
      max-width: 130px;
      font-size: clamp(.625rem, .4rem + 1.125vw, 1.75rem)
   }
}

@media (width <=18.81125rem) {
   .hero__descr {
      margin-bottom: 72px;
      padding-left: 20px;
      max-width: none;
      font-size: 17px
   }
}

.hero__digits {
   display: none
}

@media (width <=77.56125rem) {
   .hero__digits {
      position: absolute;
      top: -10px;
      left: 70%;
      z-index: 1;
      display: block;
      margin: 0;
      max-width: 115px;
      font-family: PressStart2P, sans-serif;
      font-size: 8px;
      line-height: 203%;
      letter-spacing: .33em;
      color: #fff;
      opacity: .6;
      transform: translateX(-50%)
   }
}

@media (width <=43.81125rem) {
   .hero__digits {
      top: 70px;
      left: 73%;
      width: clamp(12.5rem, 3.375rem + 45.625vw, 58.125rem);
      max-width: none
   }
}

@media (width <=31.31125rem) {
   .hero__digits {
      display: none
   }
}

.hero__btn {
   display: none
}

@media (width <=77.56125rem) {
   .hero__btn {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: clamp(0rem, -.425rem + 2.125vw, 2.125rem);
      padding-block: 10px;
      padding-inline: 10px;
      height: 54px;
      width: 100%;
      max-width: 200px;
      border-radius: 20px;
      text-align: center;
      font-size: 18px;
      line-height: 140%;
      font-weight: 500;
      color: #fff;
      background-color: #ff1950
   }
}

@media (width <=43.81125rem) {
   .hero__btn {
      z-index: 3;
      margin-right: 0;
      width: calc(39% - 10px)
   }
}

@media (width <=31.31125rem) {
   .hero__btn {
      height: -moz-max-content;
      height: max-content;
      min-height: 30px;
      font-size: clamp(.625rem, .4rem + 1.125vw, 1.75rem)
   }
}

@media (width <=18.81125rem) {
   .hero__btn {
      margin-inline: auto;
      margin-bottom: 18px;
      width: 100%;
      font-size: 18px
   }
}

.hero__bage {
   display: none
}

@media (width <=77.56125rem) {
   .hero__bage {
      position: relative;
      z-index: 1;
      display: block;
      max-width: -moz-min-content;
      max-width: min-content;
      font-size: 10px;
      line-height: 140%;
      color: #fff;
      text-transform: uppercase
   }
}

@media (width <=43.81125rem) {
   .hero__bage {
      position: absolute;
      top: 16px;
      left: 36px;
      max-width: none;
      font-size: 12px
   }
}

@media (width <=31.31125rem) {
   .hero__bage {
      top: 15px;
      left: clamp(5.625rem, 1.125rem + 22.5vw, 28.125rem);
      font-size: 6px
   }
}

@media (width <=18.81125rem) {
   .hero__bage {
      position: static;
      z-index: 2;
      margin-inline: auto;
      font-size: 10px
   }
}

.hero__text {
   margin: 0;
   max-width: 31.25rem;
   text-align: justify;
   font-size: clamp(.875rem, .825rem + .25vw, 1.125rem);
   font-weight: 500;
   line-height: 140%
}

.hero__text:not(:last-child) {
   margin-bottom: 1.5rem
}

.hero__text-list {
   margin-bottom: clamp(0rem, -.4375rem + 2.1875vw, 2.1875rem);
   position: relative;
   z-index: 1000;
}

@media (width <=77.56125rem) {
   .hero__text {
      max-width: 97%
   }
}

@media (width <=43.81125rem) {
   .hero__text {
      text-align: left
   }
}

.no-webp .hero__img {
   background: linear-gradient(to right, transparent 0% 60%, transparent 60% 100%), url(../images/hero/hero-bg.png) no-repeat center/cover
}

.hero__img {
   position: relative;
   height: 25.6875rem;
   width: 101.5rem;
   border-radius: 3.125rem;
   transform: translateX(-34%)
}

@media (width <=77.56125rem) {
   .no-webp .hero__img {
      background: linear-gradient(to right, rgba(0, 72, 255, .5) 0% 70%, transparent 70% 100%), url(../images/hero/hero-bg.png) no-repeat center/cover
   }

   .hero__img {
      position: absolute;
      top: 0;
      left: 0;
      height: 200px;
      width: 100%;
      border-radius: 0;
      transform: translateX(0)
   }
}

@media (width <=43.81125rem) {
   .no-webp .hero__img {
      background: linear-gradient(to right, transparent 0% 70%, transparent 70% 100%), url(../images/hero/hero-bg.png) no-repeat center/cover
   }

   .hero__img {
      height: 400px
   }
}

@media (width <=31.31125rem) {
   .no-webp .hero__img {
      background: linear-gradient(to right, transparent 0% 23%, rgba(0, 72, 255, .5) 23% 75%, transparent 75% 100%), url(../images/hero/hero-bg.png) no-repeat center/cover
   }

   .hero__img {
      height: 100px
   }
}

@media (width <=18.81125rem) {
   .no-webp .hero__img {
      background: linear-gradient(to bottom, transparent 0% 50%, rgba(0, 72, 255, .5) 50% 83%, transparent 83% 100%), url(../images/hero/hero-bg.png)
   }

   .hero__img {
      height: 600px;
      background-size: 230% 100%;
      background-position: 100%
   }
}

.perforation {
   position: relative;
   padding-bottom: clamp(1.25rem, 1.025rem + 1.125vw, 2.375rem)
}

.perforation__ahchor {
   position: absolute;
   top: -100px
}

.perforation__digits {
   position: absolute;
   top: 160px;
   right: 5%;
   z-index: 1;
   margin: 0;
   max-width: -moz-min-content;
   max-width: min-content;
   font-family: PressStart2P, sans-serif;
   font-size: 10px;
   line-height: 203%;
   letter-spacing: .33em;
   color: #0b58f4;
   opacity: .45
}

@media (width <=64.06125rem) {
   .perforation__digits {
      display: none
   }
}

.perforation__wrapper {
   overflow: hidden
}

.perforation__container {
   display: flex;
   flex-wrap: wrap;
   gap: clamp(1.25rem, 1.0625rem + .9375vw, 2.1875rem) clamp(.625rem, -.2rem + 4.125vw, 4.75rem);
   padding-left: clamp(0rem, -2.25rem + 11.25vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .perforation__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.perforation__title {
   width: 100%
}

.perforation__list {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(.9375rem, .75rem + .9375vw, 1.875rem);
   flex: 1 1 calc(40% - 38px);
   max-width: 724px
}

.perforation__img {
   position: relative;
   flex: 1 1 auto
}

.perforation__img img {
   position: absolute;
   max-width: none;
   height: 100%;
   width: 1000px;
   border-radius: 50px
}

@media (width <=43.81125rem) {
   .perforation__img {
      display: none
   }
}

.evolution {
   position: relative;
   z-index: -1;
   margin-bottom: 60px
}

@media (width <=77.56125rem) {
   .evolution {
      margin-bottom: clamp(.625rem, 0rem + 3.125vw, 3.75rem)
   }
}

.evolution__container {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(1.25rem, .875rem + 1.875vw, 3.125rem);
   padding-block: clamp(2.1875rem, 2rem + .9375vw, 3.125rem);
   padding-left: clamp(11.25rem, 11.25rem + 0vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .evolution__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.no-webp .evolution__container::after {
   background: url(../images/evolution/evolution-mask.png) no-repeat center/100% 100%
}

.evolution__container::after {
   content: "";
   position: absolute;
   top: 70px;
   left: clamp(0rem, -.75rem + 3.75vw, 3.75rem);
   height: clamp(48.125rem, 46.925rem + 6vw, 54.125rem);
   width: 956px;
   border: 4px solid transparent
}

@media (width <=77.56125rem) {
   .no-webp .evolution__container::after {
      background: url(../images/evolution/transparent.png) no-repeat center
   }

   .evolution__container::after {
      position: absolute;
      top: 5px;
      left: 5px;
      height: 98.5%;
      width: calc(100% - 10px);
      max-width: calc(45.25rem + clamp(.625rem, -.25rem + 4.375vw, 5rem) * 2 - .3125rem);
      border: 4px solid #0b58f4;
      border-radius: clamp(1.25rem, .875rem + 1.875vw, 3.125rem)
   }
}

.evolution__bg {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   overflow: hidden
}

.no-webp .evolution__bg::before {
   background: url(../images/evolution/evolution-bg.png) no-repeat center/cover
}

.evolution__bg::before {
   content: "";
   position: absolute;
   top: 0;
   left: calc((100vw - 1500px)/ 2 + 100px);
   z-index: -1;
   height: 100%;
   width: 1650px;
   border-radius: clamp(1.25rem, .875rem + 1.875vw, 3.125rem)
}

@media (width <=77.56125rem) {
   .evolution__bg::before {
      right: 0;
      left: 0;
      width: 100%
   }
}

@media (width <=31.31125rem) {
   .evolution__bg::before {
      height: 99.5%
   }
}

.evolution__list {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(.9375rem, .8125rem + .625vw, 1.5625rem)
}

.cloud {
   position: relative;
   margin-bottom: clamp(.625rem, 0rem + 3.125vw, 3.75rem);
   overflow: hidden
}

.cloud__ahchor {
   position: absolute;
   top: -100px
}

.cloud__container {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(1.25rem, .875rem + 1.875vw, 3.125rem);
   padding-bottom: clamp(.625rem, .1875rem + 2.1875vw, 2.8125rem);
   padding-left: clamp(11.25rem, 11.25rem + 0vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .cloud__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.no-webp .cloud__container::before {
   background-image: url(../images/cloud/cloud-decor.png)
}

.cloud__container::before {
   content: "";
   position: absolute;
   top: -80px;
   left: -280px;
   z-index: -2;
   height: 540px;
   width: 570px;
   background-position: center
}

@media (width <=43.81125rem) {
   .cloud__container::before {
      content: none
   }
}

.cloud__container::after {
   content: url(../images/cloud/cloud-decor-mini.png);
   position: absolute;
   top: 72px;
   left: 20px
}

@media (width <=77.56125rem) {
   .cloud__container::after {
      content: none
   }
}

.cloud__list {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(.9375rem, .8125rem + .625vw, 1.5625rem);
   max-width: 45.25rem
}

.cloud__list::after,
.cloud__list::before {
   content: "";
   position: absolute;
   top: 0;
   height: 100%;
   width: 150%;
   border-radius: 50px;
   background-repeat: no-repeat;
   background-size: cover
}

@media (width <=43.81125rem) {

   .cloud__list::after,
   .cloud__list::before {
      content: none
   }
}

.no-webp .cloud__list::before {
   background-image: url(../images/cloud/cloud-bg-left.png)
}

.cloud__list::before {
   left: -76px;
   transform: translateX(-100%)
}

.no-webp .cloud__list::after {
   background-image: url(../images/cloud/cloud-bg-right.png)
}

.cloud__list::after {
   right: -76px;
   transform: translateX(100%)
}

.where {
   position: relative;
   background-color: #e7eefb;
   overflow: hidden
}

.where::before {
   content: url(../images/where/where-cube.png);
   position: absolute;
   top: 35px;
   right: 0px
}

@media (width <=43.81125rem) {
   .where::before {
      right: 50%;
      transform: translateX(50%);
      opacity: 0.3;
   }
}

.where__container {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(1.25rem, .875rem + 1.875vw, 3.125rem);
   padding-block: clamp(2.1875rem, 1.75rem + 2.1875vw, 4.375rem);
   padding-left: clamp(11.25rem, 11.25rem + 0vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .where__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.no-webp .where__container::after {
   background: url(../images/evolution/evolution-mask.png) no-repeat center/100% 100%
}

.where__container::after {
   content: "";
   position: absolute;
   top: 70px;
   left: clamp(0rem, -.75rem + 3.75vw, 3.75rem);
   z-index: -1;
   height: clamp(48.125rem, 46.925rem + 6vw, 54.125rem);
   width: 956px;
   border: 4px solid transparent
}

@media (width <=77.56125rem) {
   .no-webp .where__container::after {
      background: url(../images/evolution/transparent.png) no-repeat center/100% 100%
   }

   .where__container::after {
      position: absolute;
      top: 5px;
      left: 5px;
      height: 98.5%;
      width: calc(100% - 10px);
      max-width: calc(45.25rem + clamp(.625rem, -.25rem + 4.375vw, 5rem) * 2 - .3125rem);
      border: 4px solid #0b58f4;
      border-radius: clamp(1.25rem, .875rem + 1.875vw, 3.125rem)
   }
}

.where__list {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(.9375rem, .8125rem + .625vw, 1.5625rem)
}

.where__digits {
   position: absolute;
   left: 75%;
   bottom: 110px;
   height: 105px;
   width: 820px;
   font-family: PressStart2P, sans-serif;
   font-size: 10px;
   line-height: 203%;
   font-weight: 400;
   letter-spacing: .33em;
   color: #fff;
   text-align: justify
}

@media (width <=77.56125rem) {
   .where__digits {
      display: none
   }
}

.upgrade {
   background: linear-gradient(180deg, #0b58f4 0%, #012a7f 100%);
   overflow: hidden
}

.upgrade__container {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(1.25rem, .875rem + 1.875vw, 3.125rem);
   padding-block: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);
   padding-left: clamp(11.25rem, 11.25rem + 0vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .upgrade__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.upgrade__digits {
   position: absolute;
   top: 120px;
   left: -100px;
   z-index: 3;
   width: 100px;
   font-family: PressStart2P, sans-serif;
   font-weight: 400;
   font-size: 44px;
   line-height: 203%;
   letter-spacing: .33em;
   text-align: justify;
   color: #3aacfb;
   filter: blur(6px)
}

@media (width <=77.56125rem) {
   .upgrade__digits {
      display: none
   }
}

.upgrade__digits--cube {
   top: 44px;
   left: auto;
   right: 0;
   z-index: 0;
   height: 525px;
   width: 413px;
   font-size: 10px;
   color: rgba(235, 235, 240, .16);
   filter: blur(0)
}

@media (width <=77.56125rem) {
   .upgrade__digits--cube {
      display: block;
      opacity: 0.2;
   }
}

.upgrade__title {
   color: #fff
}

.upgrade__list {
   position: relative;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: clamp(.9375rem, .8125rem + .625vw, 1.5625rem);
   color: #fff
}

.upgrade__list::after {
   content: "";
   position: absolute;
   top: 30px;
   bottom: 40px;
   left: 804px;
   width: 100%;
   border-top: 4px solid #fff;
   border-bottom: 4px solid #fff;
   border-left: 4px solid #fff;
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px
}

@media (width <=43.81125rem) {
   .upgrade__list::after {
      content: none
   }
}

.upgrade__list::before {
   content: url(../images/upgrade/upgrade-bg.png);
   position: absolute;
   right: -250px;
   top: -250px;
   z-index: 1
}

@media (width <=77.56125rem) {
   .upgrade__list::before {
      z-index: 0
   }

   .upgrade__list::before {
      content: url(../images/upgrade/upgrade-bg.png);
      opacity: 0.2;
      position: absolute;
      right: -50px;
      top: -250px;
      z-index: 1
   }
}

.upgrade__item {
   position: relative;
   z-index: 2
}

.upgrade__item--img {
   height: clamp(12.5rem, 9.7rem + 14vw, 26.5rem)
}

.upgrade__img {
   position: absolute;
   z-index: 2;
   width: 100%;
   transform: translateX(calc(((100vw - (100% + 180px + 20px))/ 2 + 180px) * -1))
}

@media (width <=77.56125rem) {
   .upgrade__img {
      transform: translateX(calc((100vw - 100%)/ 2 * -1))
   }
}

.upgrade__img img {
   height: clamp(12.5rem, 9.7rem + 14vw, 26.5rem);
   max-width: none;
   width: 100vw
}

.footer__container {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding-block: clamp(.625rem, .25rem + 1.875vw, 2.5rem);
   padding-left: clamp(11.25rem, 11.25rem + 0vw, 11.25rem)
}

@media (width <=77.56125rem) {
   .footer__container {
      padding-inline: clamp(.9375rem, .125rem + 4.0625vw, 5rem)
   }
}

.footer__logo {
   margin-right: 20px;
   width: clamp(6.875rem, 5.8rem + 5.375vw, 12.25rem)
}

.footer .social {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: clamp(.625rem, .4375rem + .9375vw, 1.5625rem)
}

.footer .social:not(:last-child) {
   margin-right: clamp(.625rem, .25rem + 1.875vw, 2.5rem)
}

.footer .social__item {
   font-size: 0
}

.footer__info {
   font-size: clamp(.625rem, .6rem + .125vw, .75rem);
   font-weight: 400;
   line-height: 140%
}

.webp .hero__container::before {
   background-image: url(../images/hero/hero-decor.webp)
}

@media (width <=43.81125rem) {
   .webp .hero__content::before {
      background-image: url(../images/hero/hero-cloud.webp)
   }
}

.webp .hero__img {
   background: linear-gradient(to right, transparent 0% 60%, transparent 60% 100%), url(../images/hero/hero-bg.webp) no-repeat center/cover
}

@media (width <=77.56125rem) {
   .webp .hero__img {
      background: linear-gradient(to right, rgba(0, 72, 255, .5) 0% 70%, transparent 70% 100%), url(../images/hero/hero-bg.webp) no-repeat center/cover
   }
}

@media (width <=43.81125rem) {
   .webp .hero__img {
      background: linear-gradient(to right, transparent 0% 70%, transparent 70% 100%), url(../images/hero/hero-bg.webp) no-repeat center/cover
   }
}

@media (width <=31.31125rem) {
   .webp .hero__img {
      background: linear-gradient(to right, transparent 0% 23%, rgba(0, 72, 255, .5) 23% 75%, transparent 75% 100%), url(../images/hero/hero-bg.webp) no-repeat center/cover
   }
}

@media (width <=18.81125rem) {
   .webp .hero__img {
      background: linear-gradient(to bottom, transparent 0% 50%, rgba(0, 72, 255, .5) 50% 83%, transparent 83% 100%), url(../images/hero/hero-bg.webp)
   }
}

.webp .evolution__container::after {
   background: url(../images/evolution/evolution-mask.webp) no-repeat center/100% 100%
}

@media (width <=77.56125rem) {
   .webp .evolution__container::after {
      background: url(../images/evolution/transparent.webp) no-repeat center
   }
}

.webp .evolution__bg::before {
   background: url(../images/evolution/evolution-bg.webp) no-repeat center/cover;
   opacity: 0.5;
}

.webp .cloud__container::before {
   background-image: url(../images/cloud/cloud-decor.webp)
}

.webp .cloud__list::before {
   background-image: url(../images/cloud/cloud-bg-left.webp)
}

.webp .cloud__list::after {
   background-image: url(../images/cloud/cloud-bg-right.webp)
}

.webp .where__container::after {
   background: url(../images/evolution/evolution-mask.webp) no-repeat center/100% 100%
}

@media (width <=77.56125rem) {
   .webp .where__container::after {
      background: url(../images/evolution/transparent.webp) no-repeat center/100% 100%
   }
}