/* Form block/section */

.form-section .form-section__title-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  margin-bottom: 72px;
  gap: 32px;
}

.form-section .form-section__img {
  height: 56px;
}

.form-section .form-section__img img,
.form-section .form-section__img svg {
  display: block;
  height: 100%;
  width: auto;
}

.form-section .form-section__subtitle {
  max-width: 720px;
}

.form-section .form-section__subtitle *,
.form-section .form-section__subtitle {
  color: var(--shades-400);
}

.form-block {
  width: 100%;

  background-color: var(--white);
  box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.form-block .form__title-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding: 32px 30px;

  background-color: var(--shades-150);
  text-align: center;
}

.form-block .form__subtitle {
  margin-top: 8px;
}

.form-block .form {
  width: 100%;
  max-width: 330px;
  margin: 48px auto 64px;
}

.form-block .form form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}

.form-block .form__grid {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-gap: 28px 20px;
}

.form-block .form .input {
  width: 100%;
}

.form-block .checkbox {
  margin-top: 28px;
}

.form-block .form__button {
  margin-top: 32px;
}

/* Form sending */

.--sending-form-container {
  position: relative;
}

.--sending-form-container .--sending-block {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;

  overflow: hidden;
  background-color: var(--white);
  text-align: center;

  opacity: 0;
  pointer-events: none;

  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.--sending-form-container .--sending-block.-active {
  opacity: 1;
  pointer-events: unset;
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.form-block .form-sending__img {
  width: 66px;
  aspect-ratio: 1 / 1;

  animation: loading 4s linear infinite;
  animation-play-state: paused;
}

.--sending-form-container .--sending-loading.-active .form-sending__img {
  animation-play-state: running;
}

.form-block .--sending-loading .form-sending__img {
  background: var(--default-gradient);
}

.form-block .--sending-success .form-sending__img {
  background-color: var(--success-500);
}

.form-block .--sending-error .form-sending__img {
  background-color: var(--danger-500);
}

.form-block .form-sending__subtitle {
  opacity: 0.8;
  max-width: 675px;
}

.form-block .form-sending__subtitle *,
.form-block .form-sending__subtitle {
  color: var(--shades-400);
}

.form-block .form-sending__button {
  margin-top: 24px;
}

.form-block .form-sending__button .default-button__icon {
  width: 16px;
  min-width: 16px;
  aspect-ratio: 1 / 1;
}

/* Connect form */

.form-block.-connect .form__title-box {
  background: url("data:image/svg+xml,%3Csvg width='914' height='142' viewBox='0 0 914 142' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_121_3087)'%3E%3Crect width='914' height='142' fill='%230268CE'/%3E%3Cg filter='url(%23filter0_f_121_3087)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M807.03 -300.22C854.066 -353.904 854.385 -447.686 916.673 -475.92C981.182 -505.161 1046.49 -468.025 1102.11 -433.974C1156.14 -400.895 1187.6 -347.395 1219.62 -290.446C1275.99 -190.218 1420.17 -92.9722 1355.34 16.3468C1290.22 126.156 1136.53 29.2304 1020.44 45.4229C942.754 56.2585 870.727 111.848 797.165 94.2014C699.145 70.6873 554.501 44.4031 557.255 -65.6912C560.162 -181.941 728.262 -210.317 807.03 -300.22Z' fill='%239680FF'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_121_3087)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-127.145 490.901C-67.818 530.583 -43.237 621.086 24.2363 632.237C94.1155 643.785 147.585 591.012 192.495 543.726C236.124 497.79 252.667 437.97 268.861 374.673C297.361 263.273 411.463 132.023 320.547 43.2084C229.224 -46.0046 105.86 87.3954 -10.4658 101.801C-88.3091 111.441 -172.27 76.3878 -238.758 112.473C-327.353 160.555 -460.265 223.38 -429.11 329.01C-396.214 440.547 -226.498 424.448 -127.145 490.901Z' fill='%239680FF'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_121_3087' x='397.216' y='-646.493' width='1134.55' height='904.127' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='80' result='effect1_foregroundBlur_121_3087'/%3E%3C/filter%3E%3Cfilter id='filter1_f_121_3087' x='-593.744' y='-147.302' width='1108.83' height='941.149' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='80' result='effect1_foregroundBlur_121_3087'/%3E%3C/filter%3E%3CclipPath id='clip0_121_3087'%3E%3Crect width='914' height='142' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
    no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.form-block.-connect .form__subtitle {
  opacity: 0.8;
}

.form-block.-connect .form {
  max-width: 680px;
}

.form-block.-connect .form__grid {
  grid-template-columns: repeat(2, 1fr);
}

.form-block.-connect .form__grid .form__textarea {
  grid-column: span 2;
}

/* Connect cards block/section */

.connect-card-section .connect-card-section__title {
  margin-bottom: 80px;
}

.connect-card__block {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.connect-card__block .connect-card__left,
.connect-card__block .connect-card__right {
  width: 100%;
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.connect-card__block .connect-card__left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  min-height: 620px;
  padding: 48px;

  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}

.connect-card__block .connect-card__editor > *:not(:first-child) {
  margin-top: 32px;
}

.connect-card__block .connect-card__editor *,
.connect-card__block .connect-card__editor {
  font-family: "Onest", sans-serif;
  font-style: normal;
}

.connect-card__block .connect-card__editor h1,
.connect-card__block .connect-card__editor h2,
.connect-card__block .connect-card__editor h3 {
  font-weight: 700;
  font-size: 33px;
  line-height: 125%;
  letter-spacing: -0.02em;
}

.connect-card__block .connect-card__editor h4,
.connect-card__block .connect-card__editor h5,
.connect-card__block .connect-card__editor h6 {
  font-weight: 700;
  font-size: 19px;
  line-height: 150%;
}

.connect-card__block .connect-card__editor p {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  opacity: 0.8;
}

.connect-card__block .connect-card__button {
  margin-top: 32px;
}

.connect-card__block .connect-card__right {
  background-color: var(--shades-150);
}

.connect-card__block .connect-card__right img,
.connect-card__block .connect-card__right svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Main title section */

.main-title-section {
  text-align: center;
}

.main-title-section .main-title__title {
  margin-bottom: 40px;
}

.main-title-section .main-title__image video,
.main-title-section .main-title__image img,
.main-title-section .main-title__image svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;

  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.main-title-section .main-title__text {
  margin-top: 40px;
  color: var(--shades-400);
}

/* Info card */

.default-info-card {
  padding: 31px 31px 55px;

  border: 1px solid var(--shades-150);
  background-color: var(--shades-50);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.default-info-card .info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;

  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.default-info-card .info-card__icon .--mask-item {
  width: 32px;
  aspect-ratio: 1 / 1;
}

.default-info-card .info-card__text {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.default-info-card .info-card__text > * {
  margin-top: 16px;
}

.default-info-card .info-card__text,
.default-info-card .info-card__text p {
  color: var(--shades-400);
}

/* Info card grid */

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 18px 21px;
}

.info-card-grid.-two-col {
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}

.info-card-grid.-two-col .default-info-card {
  padding-bottom: 40px;
}

/* Quote card */

.quote-card {
  position: relative;
}

.quote-card:before {
  content: "";
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  bottom: -24px;
  z-index: -1;
  display: block;

  background: linear-gradient(
    45.9deg,
    rgba(2, 104, 206, 0.5) 0%,
    #9681ff 85.18%
  );
  filter: blur(34px);
  -webkit-border-radius: 16px;
  border-radius: 16px;

  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.quote-card .quote-card-container {
  padding: 40px 30px;
  background-color: var(--white);
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.quote-card .quote-card__text-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
}

.quote-card .quote-card__user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px;
}

.quote-card .quote-card__user-photo {
  display: block;
  width: 48px;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  margin-right: 16px;
  -webkit-border-radius: 18px;
  border-radius: 18px;
}

.quote-card .quote-card__user-position {
  margin-top: 4px;
  line-height: 1;
}

/* CTA card */

.cta-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 345px;
  padding: 56px 56px 72px;

  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

.cta-card .cta-card__text-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32px;
}

.cta-card .cta-card__text {
  opacity: 0.8;
}

.cta-card .cta-card__button-box {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.cta-card .cta-card__illustration {
  position: absolute;
}

.cta-card .cta-card__illustration img,
.cta-card .cta-card__illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.cta-card .default-button.--white-text .default-button__arrow:after,
.cta-card .default-button.--white-text p:before {
  display: none;
}

/* CTA card | Version 1 */

.cta-card.-version-1 {
  background-image: url(../images/cta-card/background-img-1.svg);
}

.cta-card.-version-1 .cta-card__text-box {
  width: calc(100% - 371px);
}

.cta-card.-version-1 .cta-card__illustration {
  right: 64px;
  width: 332px;
}

/* CTA card | Version 1 */

.cta-card.-version-2 {
  background-image: url(../images/cta-card/background-img-2.svg);
}

.cta-card.-version-2 .cta-card__text-box {
  width: calc(100% - 294px);
}

.cta-card.-version-2 .cta-card__illustration {
  right: 22px;
  width: 364px;
}

/* CTA card | Banner */

.cta-card.-banner {
  min-height: 405px;
  padding-bottom: 64px;
  background-color: var(--shades-150);
}

.cta-card.-banner .cta-card__text-box {
  width: calc(100% - 446px);
}

.cta-card.-banner .cta-card__custom-image-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 96px;
  width: 292px;
  height: 326px;
}

.cta-card.-banner .cta-card__custom-image-text,
.cta-card.-banner .cta-card__custom-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46.5753%;
  aspect-ratio: 1 / 1;

  background-color: var(--white);
  box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
  -webkit-border-radius: 38%;
  border-radius: 38%;
}

.cta-card.-banner .cta-card__custom-image {
  position: absolute;
  left: 0;
  top: 0;
}

.cta-card.-banner .cta-card__custom-image img {
  display: block;
  height: 13.9706%;
  width: auto;
  max-width: 100%;
  margin-bottom: -1%;
}

.cta-card.-banner .cta-card__custom-image-text {
  position: absolute;
  bottom: 0;
  right: 0;
}

.cta-card.-banner .cta-card__custom-image-text img {
  display: block;
  height: 18.3823%;
  width: auto;
  max-width: 100%;
}

.cta-card.-banner .cta-card__custom-x {
  width: 6.8493%;
}

.cta-card.-banner .cta-card__custom-x img {
  display: block;
  width: 100%;
  height: auto;
}

/* Info block */

.info-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

.info-block.-reverse {
  flex-direction: row-reverse;
}

.info-block .info-block__text-box {
  width: 100%;
  max-width: 446px;
}

.info-block .info-block__editor {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32px;
}

.info-block .info-block__editor *,
.info-block .info-block__editor {
  font-family: "Onest", sans-serif;
  font-style: normal;
}

.info-block .info-block__editor h1,
.info-block .info-block__editor h2,
.info-block .info-block__editor h3,
.info-block .info-block__editor h4,
.info-block .info-block__editor h5,
.info-block .info-block__editor h6 {
  font-weight: 700;
  font-size: 57px;
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--shades-600);
}

.info-block .info-block__editor p *,
.info-block .info-block__editor p {
  font-weight: 400;
  font-size: 19px;
  line-height: 150%;
  color: var(--shades-400);
}

.info-block .info-block__editor blockquote *,
.info-block .info-block__editor blockquote {
  font-weight: 700;
  font-size: 19px;
  line-height: 150%;
  color: var(--white);
}

.info-block .info-block__editor blockquote {
  padding: 20px 24px;

  background: url(../images/info-block/blockquote-background.svg) no-repeat
    center;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

.info-block .info-block__button-box {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}

.info-block .info-block__image {
  width: 100%;
  max-width: 563px;
  overflow: hidden;
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.info-block .info-block__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Info block | Image background */

.info-block .info-block__image.-gray-bg {
  background-color: var(--shades-150);
}

.info-block .info-block__image.-white-bg {
  background-color: var(--white);
  box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
}

/* Info block | Image size */

.info-block .info-block__image.-landscape {
  height: 400px;
}

.info-block .info-block__image.-square {
  aspect-ratio: 1 / 1;
}

.info-block .info-block__image.-landscape img,
.info-block .info-block__image.-square img {
  height: 100%;
  object-fit: cover;
}

.info-block .info-block__image.-contain img {
  object-fit: contain;
}

/* Info block | Checkout */

.info-block.-checkout .info-block__text-box {
  max-width: 466px;
}

/* Info block | Connect */

.info-block.-connect .info-block__text-box {
  width: min-content;
  min-width: 446px;
  max-width: none;
}

/* Info block | Analytics */

.info-block.-analytics .info-block__text-box {
  max-width: 563px;
}

.info-block.-analytics .info-block__image {
  position: relative;
  z-index: 1;
  max-width: 488px;
  height: 354px;
  overflow: visible;
}

.info-block.-analytics .info-block__image-box {
  position: absolute;
  width: 359px;
  height: 226px;

  background: var(--white);
  box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
  -webkit-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
}

.info-block.-analytics .info-block__image-box img,
.info-block.-analytics .info-block__image-box video {
  height: 100%;
  object-fit: cover;
}

.info-block.-analytics .info-block__image-box:nth-child(1) {
  left: 0;
  top: 0;
}

.info-block.-analytics .info-block__image-box:nth-child(2) {
  right: 0;
  bottom: 0;
}

/* Info block | Secure */

.info-block.-secure .info-block__text-box {
  max-width: 540px;
}

.info-block.-secure .info-block__image {
  display: flex;
  gap: 20px;
  width: fit-content;
  max-width: none;
  overflow: visible;
}

.info-block.-secure .info-block__image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 213px;
  aspect-ratio: 1 / 1;

  background-color: var(--white);
  box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
  -webkit-border-radius: 24px;
  border-radius: 24px;
}

.info-block.-secure .info-block__image-box:nth-child(1) img {
  width: 67.6056%;
}

.info-block.-secure .info-block__image-box:nth-child(2) img {
  width: 67.6056%;
}

/* Info block | System */

.info-block.-system .info-block__image {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20px;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.info-block.-system .info-block__image-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.info-block.-system .info-block__image img {
  height: 213px;

  object-fit: cover;
  -webkit-border-radius: var(--default-border-radius);
  border-radius: var(--default-border-radius);
}

.info-block.-system .info-block__image-box:nth-child(2n + 1) img:nth-child(1),
.info-block.-system .info-block__image-box:nth-child(2n + 2) img:nth-child(2) {
  width: 100%;
  flex-shrink: 1;
}

.info-block.-system .info-block__image-box:nth-child(2n + 1) img:nth-child(2),
.info-block.-system .info-block__image-box:nth-child(2n + 2) img:nth-child(1) {
  width: auto;
  aspect-ratio: 1 / 1;
}

/* Info block | Payment */

.info-block.-payment .info-block__image {
  position: relative;
  max-width: 600px;
  height: 577px;
  overflow: visible;
}

.info-block.-payment .info-block__logo {
  position: absolute;
  right: 32.5%;
  bottom: 41.2478%;
  width: 29%;
}

.info-block.-integration .info-block__image-box,
.info-block.-payment .info-block__image-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--white);
  box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
  -webkit-border-radius: 38%;
  border-radius: 38%;
}

.info-block.-payment .info-block__image-box:nth-child(2) {
  top: 1.7331%;
  right: 23.3333%;
  width: 22.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(2) img {
  width: 57.3529%;
}

.info-block.-payment .info-block__image-box:nth-child(3) {
  top: 22.357%;
  right: 0;
  width: 14.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(3) img {
  width: 65.9091%;
}

.info-block.-payment .info-block__image-box:nth-child(4) {
  bottom: 21.1439%;
  right: 6%;
  width: 18.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(4) img {
  width: 59.8214%;
}

.info-block.-payment .info-block__image-box:nth-child(5) {
  bottom: 0;
  right: 34.6667%;
  width: 14.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(5) img {
  width: 54.5455%;
}

.info-block.-payment .info-block__image-box:nth-child(6) {
  bottom: 7.4523%;
  left: 18%;
  width: 14.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(6) img {
  width: 54.5455%;
}

.info-block.-payment .info-block__image-box:nth-child(7) {
  bottom: 38.1282%;
  left: 0;
  width: 22.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(7) img {
  width: 59.5588%;
}

.info-block.-payment .info-block__image-box:nth-child(8) {
  top: 0;
  left: 17.3333%;
  width: 18.6667%;
}

.info-block.-payment .info-block__image-box:nth-child(8) img {
  width: 66.0714%;
}

@keyframes levitation {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
}

.info-block.-integration .info-block__image-box,
.info-block.-payment .info-block__image-box {
  animation: levitation 3s ease-in-out infinite;
  animation-play-state: running;
}

.info-block.-integration .info-block__image.-not-in-viewport *,
.info-block.-payment .info-block__image.-not-in-viewport * {
  animation-play-state: paused;
}

/* Info block | Integration */

.info-block.-integration .info-block__image {
  position: relative;
  max-width: 511px;
  height: 452px;
  overflow: visible;
}

.info-block.-integration .info-block__image-box:nth-child(1) {
  right: 39.726%;
  bottom: 39.726%;
  width: 17.2211%;
}

.info-block.-integration .info-block__image-box:nth-child(1) img {
  width: 59.0909%;
}

.info-block.-integration .info-block__image-box:nth-child(2) {
  top: 0;
  right: 20.9393%;
  width: 26.6145%;
}

.info-block.-integration .info-block__image-box:nth-child(2) img {
  width: 70.5882%;
}

.info-block.-integration .info-block__image-box:nth-child(3) {
  top: 35.3982%;
  right: 0;
  width: 17.2211%;
}

.info-block.-integration .info-block__image-box:nth-child(3) img {
  width: 39.7727%;
}

.info-block.-integration .info-block__image-box:nth-child(4) {
  right: 11.546%;
  bottom: 9.7345%;
  width: 21.9178%;
}

.info-block.-integration .info-block__image-box:nth-child(4) img {
  width: 64.2857%;
}

.info-block.-integration .info-block__image-box:nth-child(5) {
  left: 35.225%;
  bottom: 0;
  width: 17.2211%;
}

.info-block.-integration .info-block__image-box:nth-child(5) img {
  width: 61.3636%;
}

.info-block.-integration .info-block__image-box:nth-child(6) {
  left: 0;
  bottom: 21.0177%;
  width: 26.6145%;
}

.info-block.-integration .info-block__image-box:nth-child(6) img {
  width: 44.8529%;
}

.info-block.-integration .info-block__image-box:nth-child(7) {
  top: 11.5044%;
  left: 13.3072%;
  width: 21.9178%;
}

.info-block.-integration .info-block__image-box:nth-child(7) img {
  width: 64.7059%;
}

/* Interactive image | Currency */

.info-block__image.-currency {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 98px;
  padding-bottom: 97px;
}

.currency-ani-block {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12px;

  width: 330px;
  height: auto;
}

.currency-ani-block .currency-ani-block__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;

  background: var(--white);
  box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
  -webkit-border-radius: 12px;
  border-radius: 12px;
}

.currency-ani-block .currency-ani-block__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.currency-ani-block .currency-ani-block__currency {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  aspect-ratio: 1 / 1;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.currency-ani-block .currency-ani-block__currency .--mask-item {
  width: 16px;
  height: 16px;
  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.currency-ani-block .currency-ani-block__name {
  margin-left: 12px;
}

.currency-ani-block .currency-ani-block__button {
  width: 42px;
  min-width: 42px;
  height: 24px;
  padding: 3px;
  background-color: var(--shades-250);
  -webkit-border-radius: 80px;
  border-radius: 80px;

  cursor: pointer;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.currency-ani-block .currency-ani-block__button span {
  display: block;
  width: 18px;
  min-width: 18px;
  aspect-ratio: 1 / 1;
  background-color: var(--white);
  -webkit-border-radius: 50%;
  border-radius: 50%;

  -webkit-transform: translateX(0);
  transform: translateX(0);

  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

.currency-ani-block__item:not(.-active) .currency-ani-block__currency {
  background-color: var(--shades-150) !important;
}

.currency-ani-block__item:not(.-active)
  .currency-ani-block__currency
  .--mask-item {
  background-color: var(--shades-250) !important;
}

.currency-ani-block__item.-active .currency-ani-block__button {
  background-color: #0268ce;
}

.currency-ani-block__item.-active .currency-ani-block__button span {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

/* Interactive image | Graph */

.info-block__image.-graph {
  padding: 24px;
  background-color: var(--white);
}

.graph-ani-block .graph-ani-block__title {
  margin-bottom: 20px;
}

.graph-ani-block .graph-ani-block__title *,
.graph-ani-block .graph-ani-block__title {
  font-size: 14px;
  line-height: 100%;
}

.graph-ani-block .graph-ani-block__graphs {
  height: 290px;
  border: 1px solid var(--shades-150);
  -webkit-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.graph-ani-block .graph-ani-block__graphs-container,
.graph-ani-block__months {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}

.graph-ani-block .graph-ani-block__graphs-container {
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #0469cf 0%,
    rgba(2, 104, 206, 0.05) 93.65%
  );
  -webkit-mask: url(../images/product-page/graph-mask.svg) no-repeat center
    bottom;
  mask: url(../images/product-page/graph-mask.svg) no-repeat center bottom;
  -webkit-mask-size: 515px 266px;
  mask-size: 515px 266px;
}

.graph-ani-block .graph-ani-block__graph {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;

  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.graph-ani-block .graph-ani-block__graph:not(:first-child):before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);

  display: block;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);

  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.graph-ani-block .graph-ani-block__graph p {
  writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;

  opacity: 0;

  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.graph-ani-block__months {
  justify-items: center;
  margin-top: 16px;
}

.graph-ani-block__months *,
.graph-ani-block__months {
  font-size: 12px;
  line-height: 100%;
}

.graph-ani-block__month {
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.graph-ani-block .graph-ani-block__graph.-active {
  background-color: #9680ff;
}

.graph-ani-block .graph-ani-block__graph.-active p {
  opacity: 1;
}

.graph-ani-block .graph-ani-block__graph.-active:before {
  opacity: 0;
}

.graph-ani-block
  .graph-ani-block__graph.-active
  + .graph-ani-block__graph:before {
  opacity: 0;
}

.graph-ani-block .graph-ani-block__month.-active {
  color: #9680ff;
}

@media screen and (max-width: 1200px) {
  /* CTA card */
  /* CTA card | Version 1 */

  .cta-card.-version-1 .cta-card__text-box {
    width: calc(100% - 280px);
  }

  .cta-card.-version-1 .cta-card__illustration {
    width: 250px;
  }

  /* CTA card | Version 1 */

  .cta-card.-version-2 .cta-card__text-box {
    width: calc(100% - 250px);
  }

  .cta-card.-version-2 .cta-card__illustration {
    width: 300px;
  }

  /* CTA card | Banner */

  .cta-card.-banner .cta-card__text-box {
    width: calc(100% - 320px);
  }

  .cta-card.-banner .cta-card__custom-image-box {
    right: 40px;
  }

  /* Info block */

  .info-block {
    gap: 40px;
  }

  .info-block .info-block__editor {
    gap: 16px;
  }

  .info-block .info-block__editor h1,
  .info-block .info-block__editor h2,
  .info-block .info-block__editor h3,
  .info-block .info-block__editor h4,
  .info-block .info-block__editor h5,
  .info-block .info-block__editor h6 {
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.03em;
  }

  .info-block .info-block__editor p *,
  .info-block .info-block__editor p {
    font-size: 17px;
    line-height: 150%;
  }

  .info-block .info-block__editor blockquote *,
  .info-block .info-block__editor blockquote {
    font-size: 17px;
    line-height: 150%;
  }

  .info-block .info-block__editor blockquote {
    padding: 16px;
  }

  .info-block .info-block__button-box {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 16px;
  }

  .info-block
    .info-block__button-box
    .default-button:not(.-white):not(.-black) {
    padding: 0;
  }

  .info-block .info-block__image {
    max-width: 400px;
  }

  /* Info block | Image size */

  .info-block .info-block__image.-landscape {
    height: 292px;
  }

  /* Info block | Analytics */

  .info-block.-analytics .info-block__image {
    max-width: 430px;
    height: 300px;
  }

  .info-block.-analytics .info-block__image-box {
    width: 300px;
    height: 187px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
  }

  /* Info block | Secure */

  .info-block.-secure .info-block__image {
    gap: 12px;
  }

  .info-block.-secure .info-block__image-box {
    width: 180px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
  }

  /* Info block | System */

  .info-block.-system .info-block__image-box,
  .info-block.-system .info-block__image {
    gap: 12px;
  }

  .info-block.-system .info-block__image img {
    height: 140px;
  }

  /* Info block | Payment */

  .info-block.-payment .info-block__image {
    max-width: 400px;
    height: 350px;
  }

  /* Info block | Integration */

  .info-block.-integration .info-block__image {
    max-width: 400px;
    height: 350px;
  }

  /* Interactive image | Currency */

  .info-block__image.-currency {
    padding-top: 35px;
    padding-bottom: 35px;
  }

  /* Interactive image | Graph */

  .graph-ani-block .graph-ani-block__graphs {
    height: 215px;
  }

  .graph-ani-block .graph-ani-block__graphs-container {
    -webkit-mask-size: 515px 190px;
    mask-size: 515px 190px;
  }
}

@media screen and (max-width: 1024px) {
  /* Form block/section */

  .form-section .form-section__title-box {
    gap: 16px;
    margin-bottom: 40px;
  }

  .form-section .form-section__img {
    height: 40px;
  }

  .form-block {
    -webkit-border-radius: 14px;
    border-radius: 14px;
  }

  .form-block .form__title-box {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .form-block .form {
    margin: 24px auto 40px;
  }

  .form-block .form__grid {
    grid-gap: 12px;
  }

  .form-block .form__grid .input.-file {
    margin-top: 4px;
  }

  .form-block .checkbox {
    margin-top: 24px;
  }

  .form-block .form__button {
    margin-top: 24px;
  }

  /* Connect form */

  .form-block.-connect .form {
    width: auto;
    max-width: none;
    margin-left: 30px;
    margin-right: 30px;
  }

  /* Connect cards block/section */

  .connect-card-section .connect-card-section__title {
    margin-bottom: 40px;
  }

  .connect-card__block {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .connect-card__block .connect-card__left,
  .connect-card__block .connect-card__right {
    -webkit-border-radius: 14px;
    border-radius: 14px;
  }

  .connect-card__block .connect-card__right {
    height: 450px;
  }

  .connect-card__block .connect-card__left {
    min-height: auto;
    padding: 24px 16px;
  }

  .connect-card__block .connect-card__editor > *:not(:first-child) {
    margin-top: 16px;
  }

  .connect-card__block .connect-card__editor h1,
  .connect-card__block .connect-card__editor h2,
  .connect-card__block .connect-card__editor h3 {
    font-size: 26px;
    line-height: 110%;
    letter-spacing: -0.03em;
  }

  .connect-card__block .connect-card__editor h4,
  .connect-card__block .connect-card__editor h5,
  .connect-card__block .connect-card__editor h6 {
    font-size: 17px;
    line-height: 150%;
    letter-spacing: 0;
  }

  .connect-card__block .connect-card__editor p {
    font-size: 14px;
    line-height: 150%;
  }

  .connect-card__block .connect-card__button {
    margin-top: 16px;
  }

  /* Main title section */

  .main-title-section .main-title__title {
    margin-bottom: 24px;
  }

  .main-title-section .main-title__text {
    margin-top: 24px;
  }

  /* Info card */

  .default-info-card {
    padding: 23px 15px;
  }

  .default-info-card .info-card__icon {
    margin-bottom: 16px;
  }

  /* Info card grid */

  .info-card-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
  }

  .info-card-grid.-two-col {
    grid-column-gap: 12px;
  }

  .info-card-grid.-two-col .default-info-card {
    padding-bottom: 23px;
  }

  /* Quote card */

  .quote-card .quote-card-container {
    padding: 24px 16px;
  }

  .quote-card:before {
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: -12px;
    filter: blur(20px);
    -webkit-border-radius: 9px;
    border-radius: 9px;
  }

  .quote-card .quote-card__user {
    margin-top: 24px;
  }

  /* CTA card */

  .cta-card {
    flex-direction: column;
    min-height: auto;
    padding: 298px 16px 24px;
  }

  .cta-card .cta-card__text-box {
    gap: 16px;
  }

  .cta-card .cta-card__button-box {
    flex-direction: column;
    gap: 8px;
  }

  .cta-card .cta-card__button-box .default-button:not(.-white):not(.-black) {
    padding: 0;
  }

  /* CTA card | Version 1 */

  .cta-card.-version-1 .cta-card__text-box {
    width: 100%;
  }

  .cta-card.-version-1 .cta-card__illustration {
    top: 24px;
    right: auto;
    width: 304px;
    max-width: 100%;
  }

  /* CTA card | Version 1 */

  .cta-card.-version-2 .cta-card__text-box {
    width: 100%;
  }

  .cta-card.-version-2 .cta-card__illustration {
    top: 0;
    right: auto;
    width: 304px;
    max-width: 100%;
  }

  /* CTA card | Banner */

  .cta-card.-banner {
    min-height: auto;
    padding-top: 316px;
    padding-bottom: 24px;
  }

  .cta-card.-banner .cta-card__text-box {
    width: 100%;
  }

  .cta-card.-banner .cta-card__custom-image-box {
    top: 24px;
    right: auto;
    width: 240px;
    max-width: 100%;
    height: 268px;
  }

  /* Info block */

  .info-block.-reverse,
  .info-block {
    flex-direction: column-reverse;
  }

  .info-block.-connect .info-block__text-box,
  .info-block.-checkout .info-block__text-box,
  .info-block.-secure .info-block__text-box,
  .info-block.-analytics .info-block__text-box,
  .info-block .info-block__text-box {
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .info-block.-payment .info-block__image {
    max-width: 336px;
    height: 324px;
  }

  .info-block.-payment .info-block__logo {
    bottom: 37.6543%;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    width: 35.7143%;
  }

  .info-block.-integration .info-block__image {
    max-width: 336px;
    height: 298px;
  }
}

@media screen and (max-width: 759px) {
  /* Form block/section */

  .form-block .form {
    width: auto;
    max-width: none;
    margin-right: 16px;
    margin-left: 16px;
  }

  .form-block .form__title-box {
    padding-left: 16px;
    padding-right: 16px;
  }

  .form-block .form__button {
    width: 100%;
  }

  /* Connect form */

  .form-block.-connect .form {
    margin-left: 16px;
    margin-right: 16px;
  }

  .form-block.-connect .form__grid {
    grid-template-columns: 1fr;
  }

  .form-block.-connect .form__grid .form__textarea {
    grid-column: span 1;
  }

  /* Connect cards block/section */

  .connect-card__block .connect-card__right {
    height: 370px;
  }

  /* Info card grid */

  .info-card-grid.-two-col,
  .info-card-grid {
    grid-template-columns: 1fr;
  }

  /* CTA card */
  /* CTA card | Version 1 */

  .cta-card.-version-1 {
    background-image: url(../images/cta-card/background-img-1-mob.svg);
  }

  /* CTA card | Version 2 */

  .cta-card.-version-2 {
    background-image: url(../images/cta-card/background-img-2-mob.svg);
  }

  /* Info block */

  .info-block .info-block__image.-landscape {
    height: 239px;
  }

  .info-block.-secure .info-block__image {
    justify-content: center;
  }

  .info-block.-secure .info-block__image-box {
    width: 100%;
    maw-width: 162px;
  }

  .info-block.-system .info-block__image img {
    height: 125px;
  }

  /* Interactive image | Currency */

  .info-block__image.-currency {
    padding: 24px 16px;
  }

  .currency-ani-block {
    gap: 11px;
    width: 100%;
  }

  .currency-ani-block .currency-ani-block__item {
    padding: 11px 22px;

    -webkit-border-radius: 11px;
    border-radius: 11px;
  }

  .currency-ani-block .currency-ani-block__currency {
    width: 37px;
    min-width: 37px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
  }

  .currency-ani-block .currency-ani-block__currency .--mask-item {
    width: 14px;
    height: 14px;
  }

  .currency-ani-block .currency-ani-block__name {
    margin-left: 11px;
  }

  .currency-ani-block .currency-ani-block__name *,
  .currency-ani-block .currency-ani-block__name {
    font-size: 15px;
  }

  .currency-ani-block .currency-ani-block__button {
    width: 38px;
    min-width: 38px;
    height: 22px;
    padding: 3px;
    -webkit-border-radius: 74px;
    border-radius: 74px;
  }

  .currency-ani-block .currency-ani-block__button span {
    width: 16px;
    min-width: 16px;
  }

  /* Interactive image | Graph */

  .info-block__image.-graph {
    padding: 15px;
    background-color: var(--white);
  }

  .graph-ani-block .graph-ani-block__title {
    margin-bottom: 13px;
  }

  .graph-ani-block .graph-ani-block__title *,
  .graph-ani-block .graph-ani-block__title {
    font-size: 8px;
  }

  .graph-ani-block .graph-ani-block__graphs {
    height: 174px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  .graph-ani-block .graph-ani-block__graphs-container {
    -webkit-mask-size: 408px 158px;
    mask-size: 307px 158px;
  }

  .graph-ani-block .graph-ani-block__graph {
    padding-bottom: 20px;
  }

  .graph-ani-block__months {
    margin-top: 10px;
  }

  .graph-ani-block__months *,
  .graph-ani-block__months {
    font-size: 8px;
  }
}

• [D] lib
• [F] accordions.css
  Delete
• [F] adaptive.css
  Delete
• [F] buttons.css
  Delete
• [F] compose.css
  Delete
• [F] cookie.css
  Delete
• [F] dropdown.css
  Delete
• [F] fonts.css
  Delete
• [F] footer.css
  Delete
• [F] forms-elements.css
  Delete
• [F] general.css
  Delete
• [F] header.css
  Delete
• [F] hovers.css
  Delete
• [F] links.css
  Delete
• [F] scroll-animations.css
  Delete
• [F] styles.css
  Delete
• [F] typography.css
  Delete
• [F] ui-blocks.css
  Delete
• [F] ui-kit.css
  Delete