body { margin: 0; padding: 0; }

footer.footer { display: none; }

.container { padding: 0 15px; margin: 0 auto; }

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1160px; } }
.out-of-header { background: #797EFF; color: #fff; font-family: 'Inter', sans-serif; margin-top: -50px; overflow-x: hidden; padding: 96px 0 58px; }

@media (max-width: 1024px) { #announceActive0 { background: transparent; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
  .header__lang-switch { color: #fff; }
  .header__main-link { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); color: #fff; }
  .header__mobile-button path { stroke: #fff; } }
main * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
main a { text-decoration: none; position: relative; }
main h1, main h2 { font-size: 26px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.134px; }
main h2 { margin: 24px 0; }
main h3 { font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.44px; position: relative; }
main h3::after { background: url(../img/call.svg) no-repeat; background-size: contain; content: ''; height: 18px; left: 4em; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 18px; }
main h4 { font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; margin: 0 auto; max-width: 70%; }
main ul { margin: 24px 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; }
main ul li { list-style-type: none; margin: 0; padding: 0; font-size: 16px; font-style: normal; font-weight: 600; line-height: 152%; padding-left: 20px; letter-spacing: -0.134px; padding-left: 20px; position: relative; }
main ul li::before { background: #fff; border-radius: 50%; content: ''; height: 6px; left: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 5px; }
main .landing-btn { background: #FFCC00; border-radius: 12px; color: #013; display: block; font-size: 14px; font-weight: 700; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; line-height: normal; letter-spacing: 0.28px; margin-top: 40px; padding: 16px 24px; text-align: center; text-transform: uppercase; }
main .landing-btn:hover { background: #fbd53c; }
main .landing-btn:active { background: #cfa600; }
main .yellowText { color: #FFCC00; }
main .welcome { position: relative; }
main .welcome-text { position: relative; z-index: 2; }
main .welcome-text p { font-size: 16px; font-style: normal; font-weight: 500; line-height: 152%; letter-spacing: -0.134px; }
main .welcome .logo { max-width: 100%; margin-bottom: 30px; }
main .welcome .visual { text-align: center; position: relative; z-index: 1; }
main .welcome .landing-btn { position: absolute; width: 100%; bottom: -180%; z-index: 2; }
main .terms { position: relative; }
main .rules { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin: 24px 0; text-decoration: underline; }
main .rules p { font-size: 20px; font-style: normal; font-weight: 500; line-height: 130%; }
main .faq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; }
main .accordion__text { background: rgba(88, 69, 255, 0.62); border-radius: 6px; color: #fff; font-size: 12px; font-weight: 600; padding: 10px 32px 10px 16px; position: relative; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
main .accordion__text::after { background: url(../img/accordion-after.svg) no-repeat; background-size: contain; content: ''; height: 5px; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 10px; }
main .accordion__text-opened { border-radius: 6px 6px 0 0; }
main .accordion__text-opened::after { -webkit-transform: translateY(-50%) rotateX(180deg); transform: translateY(-50%) rotateX(180deg); }
main .accordion__body { border-radius: 0 0 6px 6px; background: rgba(163, 153, 254, 0.72); -webkit-backdrop-filter: blur(5.6993927956px); backdrop-filter: blur(5.6993927956px); display: none; padding: 10px; position: relative; -webkit-transform: translateY(0); transform: translateY(0); z-index: 1; }
main .accordion__body * { font-size: 10px; font-weight: 500; }
main .accordion__body a { color: inherit; cursor: pointer; text-decoration: underline; }
main .last-block { margin: 60px 0 0; }
main .social-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; text-align: center; }
main .social-text p { font-family: 'Montserrat', sans-serif; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; }
main .social-text p b { font-weight: 600; }
main .circles { background: url(../img/cirle.svg) no-repeat; background-size: contain; position: absolute; z-index: 0; }
main .circles:not(.c-1) { -webkit-animation: pulse 1s linear infinite alternate, circling 8s linear infinite; animation: pulse 1s linear infinite alternate, circling 8s linear infinite; }
main .circles.c-2 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
main .circles.c-3 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
main .circles.c-4 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
main .circles.c-5 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
main .circles.c-6 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
main .circles.c-7 { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
main .circles.c-8 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
main .circles.c-9 { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; }
main .circles.c-10 { -webkit-animation-delay: 3s; animation-delay: 3s; }
main .circles.c-11 { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; }
main .c-1 { background: rgba(74, 80, 253, 0.86); border-radius: 478.549px; -webkit-filter: blur(39.5888786316px); filter: blur(39.5888786316px); height: 478.549px; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 433.445px; }
main .c-2 { height: 140px; left: -14%; top: -4%; width: 140px; }
main .c-3 { height: 140px; right: 0; top: -4%; width: 140px; }
main .c-4 { height: 145px; left: -15%; top: 20%; width: 145px; }
main .c-5 { height: 114px; right: -10%; top: 18%; width: 114px; }
main .c-6 { height: 174px; right: -40%; top: 45%; width: 174px; }
main .c-7 { height: 138px; left: -24%; top: 62%; width: 138px; }
main .c-8 { height: 114px; right: -18%; top: 105%; width: 114px; }
main .cloudText2 { -webkit-animation: pulse 4s linear infinite alternate 0.8s; animation: pulse 4s linear infinite alternate 0.8s; background: url(../img/visual-sum.png) no-repeat; background-size: contain; position: absolute; height: 53px; right: 3%; top: 18%; width: 150px; }
main .leaf { -webkit-animation: movement 5s linear infinite alternate; animation: movement 5s linear infinite alternate; background: url(../img/leaf.png) no-repeat; background-size: contain; position: absolute; height: 64px; top: 25%; width: 67px; }
main .coin { -webkit-animation: movement 5s linear infinite alternate-reverse 0.3s; animation: movement 5s linear infinite alternate-reverse 0.3s; background: url(../img/tenge.png) no-repeat; background-size: contain; height: 63px; right: 5%; top: 60%; position: absolute; width: 57px; }

@media (max-width: 1024px) { .page { margin-top: 0; }
  main .visual { margin: 0 auto; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
  main .cloudText1 { -webkit-animation: pulse 4s linear infinite alternate; animation: pulse 4s linear infinite alternate; background: url(../img/visual-text.png) no-repeat; background-size: contain; position: absolute; height: 43px; left: 4%; top: 7%; width: 171px; }
  main .desc { display: none; } }
@media (min-width: 1024px) { .out-of-header { margin-top: 0; padding: 150px 0 50px; }
  main h1 { font-size: 58px; letter-spacing: -0.3px; }
  main h2 { font-size: 30px; font-style: normal; font-weight: 600; line-height: 41.29px; }
  main h3 { font-size: 50px; letter-spacing: 1px; }
  main h3::after { height: 38px; width: 38px; }
  main h4 { font-size: 32px; max-width: none; }
  main ul { gap: 18px; margin: 38px 0; }
  main ul li { font-size: 20px; line-height: 130%; padding-left: 36px; }
  main ul li::before { height: 12px; width: 12px; }
  main .landing-btn { font-weight: 800; letter-spacing: 0.32px; padding: 20px 90px; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
  main .welcome { -webkit-box-align: start; -ms-flex-align: start; align-items: start; display: grid; grid-template-areas: "text visual"; grid-template-columns: 45% 55%; margin-bottom: 100px; }
  main .welcome-text { grid-area: text; gap: 14px; }
  main .welcome .landing-btn { bottom: -20%; margin-top: 40px; position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
  main .welcome .visual { grid-area: visual; }
  main .welcome .visual-img { position: relative; z-index: 1; }
  main .welcome .visual-img img { width: 100%; }
  main .terms { display: grid; grid-template-columns: 45% 55%; }
  main .phone { position: relative; width: 100%; }
  main .phone-block { position: relative; }
  main .phone-block::after { -webkit-animation: wobble 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate; animation: wobble 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; background: url(../img/phoneNumber.png) no-repeat; background-size: contain; content: ''; height: 135px; left: 10%; position: absolute; top: 43%; -webkit-transform-origin: 24em bottom; transform-origin: 24em bottom; width: 240px; z-index: 1; }
  main .phone-text { -webkit-animation: wobble 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate; animation: wobble 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate; bottom: 16%; height: 100%; left: 50%; max-height: 105px; max-width: 340px; position: absolute; -webkit-transform-origin: -1em bottom; transform-origin: -1em bottom; width: 100%; }
  main .rules p { font-size: 24px; }
  main .faq { gap: 14px; }
  main .accordion__text { border-radius: 20px; font-size: 30px; padding: 35px 70px 35px 56px; }
  main .accordion__text::after { height: 16px; right: 40px; width: 31px; }
  main .accordion__text-opened { border-radius: 20px 20px 0 0; }
  main .accordion__body { border-radius: 0 0 20px 20px; padding: 35px 56px; }
  main .accordion__body * { font-size: 28px; }
  main .last-block { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: grid; grid-template-columns: 55% 45%; }
  main .social-text { gap: 142px; }
  main .social-text p { font-size: 19px; }
  main .c-1 { background: rgba(74, 80, 253, 0.39); -webkit-filter: blur(98px); filter: blur(98px); border-radius: 889.767px; height: 890px; left: 0; width: 882px; }
  main .c-2 { height: 278px; left: -7%; top: -7%; width: 278px; }
  main .c-3 { height: 199px; right: 48%; top: 33%; width: 199px; }
  main .c-4 { height: 240px; left: auto; top: -27%; right: -12%; width: 240px; }
  main .c-5 { height: 204px; right: -6%; top: 37%; width: 204px; }
  main .c-9 { height: 278px; left: 4%; top: -39%; width: 278px; }
  main .c-10 { height: 196px; left: -10%; top: 38%; width: 196px; }
  main .c-11 { height: 278px; right: 0; top: -20%; width: 278px; }
  main .cloudText2 { background: url(../img/visual-sumDesc.png) no-repeat; background-size: contain; height: 100px; left: 12%; right: auto; top: 62%; width: 260px; z-index: 2; }
  main .leaf { height: 95px; left: 24%; top: 34%; width: 96px; }
  main .coin { height: 93px; right: 15%; top: 10%; width: 93px; z-index: 2; }
  main .coin2 { -webkit-animation: movement 5s linear infinite alternate-reverse; animation: movement 5s linear infinite alternate-reverse; background: url(../img/coin2.png) no-repeat; background-size: contain; content: ''; height: 100px; left: 23%; position: absolute; top: 3%; width: 100px; } }
@-webkit-keyframes pulse { from { -webkit-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1.3); transform: scale(1.3); } }
@keyframes pulse { from { -webkit-transform: scale(1); transform: scale(1); }
  to { -webkit-transform: scale(1.3); transform: scale(1.3); } }
@-webkit-keyframes movement { from { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
  to { -webkit-transform: translateY(12px); transform: translateY(12px); } }
@keyframes movement { from { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
  to { -webkit-transform: translateY(12px); transform: translateY(12px); } }
@-webkit-keyframes circling { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes circling { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes wobble { 0% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
  100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } }
@keyframes wobble { 0% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
  100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } }
@-webkit-keyframes wobble-flipped { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
  100% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } }
@keyframes wobble-flipped { 0% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
  100% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } }
