:root {
  --font-family: 'Space Grotesk', sans-serif;
  --second-family: 'Inter', sans-serif;
  --third-family: 'Poppins', sans-serif;
}

:root {
  --background-3: #fff;
  --color-green-blue-500: #26d755;
  --color-base-black: #202020;
  --color-base-white: #fff;
  --color-borders-stroke-1: rgba(255, 255, 255, 0.15);
  --color-borders-stroke-2: #59ffc8;
  --color-borders-stroke-3: #ff4e6b;
  --color-borders-stroke-4: #344fff;
  --color-text-heading-white: var(--color-base-white);
  --color-text-heading-default: var(--color-base-black);
  --color-text-heading-green-500: var(--color-green-blue-500);
  --color-text-body-white: var(--color-base-white);
  --color-text-body-default: var(--color-base-black);
  --color-text-body-green-500: var(--color-green-blue-500);
  --color-surface-buttons-button-inv: var(--color-base-white);
  --color-surface-buttons-button-default: var(--color-green-blue-500);
  --color-surface-background-default: var(--color-base-white);
  --color-surface-background-primary: var(--color-green-blue-500);
  --color-text-heading-secondary: var(--color-additional-gray);
  --color-additional-gray: #a0a5b8;
  --color-icons-default-icon-inv: var(--color-base-white);
  --color-icons-default-icon-default: var(--color-base-black);
  --color-icons-error-default: var(--color-additional-red);
  --color-additional-red: #ff002b;
  --color-additional-green-600: rgba(38, 215, 85, 0.6);
  --color-additional-green-300: rgba(57, 91, 80, 0.3);
  --color-additional-black-250: rgba(0, 0, 0, 0.25);
  --color-additional-green: #00b67a;
  --color-additional-white-50: rgba(255, 255, 255, 0.05);
  --color-surface-background-white-50: var(--color-additional-white-50);
  --color-surface-background-black-250: var(--color-additional-black-250);
  --color-surface-background-green-300: var(--color-additional-green-300);
  --color-surface-buttons-button-600: var(--color-additional-green-600);
  --color-additional-dark-green: #191c1e;
  --white: #fff;
  --light-blue: #344fff;
  --red: #ff002b;
  --main-bg: #010118;
  --white-button: rgba(255, 255, 255, 0.05);
  --buttons-outline: #344fff;
  --blue: #0d35c5;
  --blue: #0d35c5;
  --banner-outline: rgba(255, 255, 255, 0.15);
  --dark-blue: #0c2ea8;
  --background: #010118;
  --green-outline: #59ffc8;
  --white-outline: rgba(255, 255, 255, 0.15);
  --buttons-blue: #0d35c5;
  --primary-text: #fff;
  --banner: rgba(255, 255, 255, 0.05);
  --secondary-text: rgba(255, 255, 255, 0.8);
  --green: #00b67a;
  --red-outline: #ff4e6b;
  --white: #fff;
  --black: #010118;
  --text-bleu: #344fff;
}

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

html {
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
}

img {
  width: 100%;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrapper {
  position: relative;
  z-index: 1;
  max-width: 390px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 36px 16px 40px;
}

.btn {
  border-radius: 16px;
  padding-block: 16px;
  padding-inline: 24px;
  width: 100%;
  height: 48px;
  background: #2559f6;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 89%;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.btn:hover {
  background: #1e49d3;
}

.header__top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 64px;
}
.header__top h2 {
  font-family: var(--third-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  background: linear-gradient(164.48deg, #4576b8 5.24%, #fff 49.6%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h3 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  color: #729bf8;
  text-align: center;
  margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 48px;
  line-height: 90%;
  letter-spacing: -0.02em;
  text-align: center;
  background-image: linear-gradient(90deg, rgba(118, 94, 251, 0.74) 0%, rgba(157, 225, 252, 0.74) 100%), linear-gradient(#fff, #fff);
  background-clip: text, text;
  -webkit-background-clip: text, text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.hero p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: #f0f2f4;
  margin-bottom: 24px;
}
.hero__img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero__img img {
  max-width: 270px;
  transform: translateY(-50px);
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__img.is-visible img {
  transform: translateY(0);
}
.hero__img .btn {
  position: absolute;
  bottom: 102px;
}

.desc {
  border-radius: 24px;
  padding: 20px;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
  margin-top: -50px;
  margin-bottom: 64px;
}
.desc h2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 28px;
  line-height: 110%;
  color: #f0f2f4;
  margin-bottom: 12px;
}
.desc h2 + p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #9aa2b1;
}
.desc img {
  margin: -18px 0;
  width: calc(100% + 8px);
}
.desc p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #f0f2f4;
}

.plans {
  margin-bottom: 64px;
}
.plans h2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: var(--color-text-heading-white);
  margin-bottom: 20px;
}
.plans__switcher {
  background: #1b2233;
  border-radius: 200px;
  padding: 4px;
  max-width: 299px;
  width: 100%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.plans__switcher-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: 48px;
  width: 92px;
  border-radius: 200px;
  background: #0c215a;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.plans__btn {
  background: transparent;
  border-radius: 200px;
  padding-block: 12px;
  padding-inline: 20px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #9aa2b1;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.plans__btn svg path {
  transition: fill 0.3s ease;
}
.plans__btn:hover {
  color: var(--color-text-heading-white);
}
.plans__btn.active {
  color: var(--color-text-heading-white);
}
.plans__btn.active svg path {
  fill: #a0bcfa;
}
.plans__list {
  position: relative;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.plans__item {
  border-radius: 20px;
  padding-block: 28px;
  padding-inline: 20px;
  background: #1b2233;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}
.plans__item.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 1;
}
.plans__item--stater img {
  width: 101px;
}
.plans__item--optimal img {
  width: 97px;
}
.plans__item--max::before {
  content: "";
  position: absolute;
  top: -89px;
  left: -83px;
  width: 305px;
  height: 305px;
  background: #6466e9;
  border-radius: 100%;
  filter: blur(90px);
  opacity: 0.6;
}
.plans__item--max::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: -156px;
  width: 305px;
  height: 305px;
  background: #133593;
  border-radius: 100%;
  filter: blur(60px);
  opacity: 0.3;
}
.plans__item--max img {
  width: 159px;
}
.plans__item--max .plans__item-number {
  background: #ff6701;
}
.plans__item--max .plans__item-advantages::after {
  content: "";
  position: absolute;
  top: 0;
  right: -60px;
  width: 305px;
  height: 305px;
  background: var(--color-surface-background-green-300);
  border-radius: 100%;
  filter: blur(30px);
}
.plans__item img {
  position: absolute;
  top: 0;
  right: 0;
  filter: contrast(1.1) brightness(0.7);
}
.plans__item-header {
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.plans__item h3 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 28px;
  line-height: 110%;
  color: var(--color-text-heading-white);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.plans__item h3 span {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-text-body-green-500);
  border-radius: 200px;
  padding-block: 4px;
  padding-inline: 8px;
  width: 60px;
  height: 21px;
  background: var(--color-surface-background-green-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plans__item-subtitle {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  color: var(--color-text-body-white);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.plans__item-subtitle:first-of-type {
  margin-bottom: 8px;
}
.plans__item-number {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  color: #f0f2f4;
  border-radius: 50px;
  padding-block: 2px;
  padding-inline: 8px;
  background: rgba(110, 219, 169, 0.5);
  height: 24px;
}
.plans__item-period {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-heading-secondary);
}
.plans__item p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--color-text-heading-secondary);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.plans__item-hidden {
  overflow: hidden;
  height: auto;
  position: relative;
  z-index: 1;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.plans__item-hidden-inner {
  padding-top: 24px;
  border-top: 1px solid var(--color-borders-stroke-1);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.plans__item-hidden p {
  margin-bottom: 12px;
}
.plans__item-hidden ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plans__item-hidden ul li {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--color-text-body-white);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plans__item-hidden ul li svg {
  flex-shrink: 0;
}
.plans__item.is-collapsed .plans__item-hidden {
  height: 0;
}
.plans__item.is-collapsed .plans__item-hidden .plans__item-hidden-inner {
  opacity: 0;
  transform: translateY(-8px);
}
.plans__item-advantages {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 24px;
}
.plans__item-advantages p {
  margin-bottom: 0;
}
.plans__item-adv {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding-block: 12px;
  padding-inline: 16px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #58c087;
}
.plans__item-adv svg {
  flex-shrink: 0;
}
.plans__item-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.plans__item-btn {
  background: transparent;
  padding-block: 6px;
  padding-inline: 0;
  height: 29px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-heading-secondary);
  border: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s ease;
  width: 100%;
  text-align: center;
}
.plans__item-btn:hover {
  color: var(--color-text-heading-white);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__img img,
  .configure .configure__img-item,
  .configure .configure__img-item:last-of-type {
    transform: none;
    transition: none;
  }
  .plans__switcher-pill,
  .plans__btn,
  .plans__list,
  .plans__item,
  .plans__item-hidden,
  .plans__item-hidden-inner,
  .plans__item-btn {
    transition: none;
  }
}
.compare {
  margin-bottom: 64px;
}
.compare h2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 117%;
  text-align: center;
  color: var(--color-text-heading-white);
  margin-bottom: 4px;
}
.compare h2 + p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 114%;
  text-align: center;
  color: var(--color-text-heading-secondary);
  margin-bottom: 12px;
}
.compare__table {
  border-radius: 20px;
  background: #1b2233;
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr;
  margin-bottom: 12px;
}
.compare__col:first-of-type div {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 140%;
  color: var(--color-text-heading-secondary);
  justify-content: flex-start;
  padding-left: 16px;
}
.compare__col:first-of-type div:first-child {
  color: var(--color-text-heading-secondary);
  font-size: 12px;
}
.compare__col:first-of-type div:last-child {
  color: #ff8533;
}
.compare__col.is-active {
  background: rgba(37, 89, 246, 0.05);
  position: relative;
}
.compare__col.is-active[data-plan="optimal"]::after {
  content: "Popular";
  position: absolute;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 9px;
  color: #fff;
  border-radius: 50px;
  padding-block: 2px;
  padding-inline: 8px;
  width: 50px;
  height: 15px;
  background: #2559f6;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.compare__col.is-active div {
  color: #a0bcfa;
}
.compare__col.is-active div:first-child {
  color: #a0bcfa;
  background: rgba(37, 89, 246, 0.1);
}
.compare__col.is-active div:last-child {
  background: rgba(37, 89, 246, 0.05);
}
.compare__col div {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  text-align: center;
  color: var(--color-text-heading-white);
  padding-block: 12px;
  padding-inline: 4px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compare__col div:first-child {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-heading-white);
  padding-block: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compare__col div:nth-child(4) {
  border-bottom: none;
}
.compare__col div:last-child {
  border-bottom: none;
  background: rgba(255, 255, 255, 0.05);
}
.compare__check {
  color: var(--color-text-body-green-500) !important;
  font-size: 16px;
}
.compare__tire {
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.19) !important;
}
.compare p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  text-align: center;
  color: var(--color-text-heading-secondary);
}

.mode {
  margin-bottom: 20px;
}
.mode h2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  color: var(--color-text-heading-white);
  margin-bottom: 8px;
}
.mode__badge {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-body-green-500);
  border-radius: 200px;
  padding-block: 4px;
  padding-inline: 8px;
  height: 26px;
  background: var(--color-surface-background-green-300);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 222px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 8px;
}
.mode__badge + p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: var(--color-text-heading-secondary);
  margin-bottom: 20px;
}
.mode__content {
  background: #1b2233;
  border-radius: 20px;
  padding-block: 32px;
  padding-inline: 20px;
}
.mode__content h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 67%;
  color: #fff;
  margin-bottom: 24px;
}
.mode__content p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #666e80;
  margin-bottom: 24px;
}
.mode__content p.mode__another-text {
  color: var(--color-text-heading-secondary);
}
.mode__content p.mode__another-text span {
  color: #cfddfc;
}
.mode__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode__item {
  position: relative;
}
.mode__item:first-child svg {
  left: 5px;
}
.mode__item:last-child p::after {
  display: none;
}
.mode__item svg {
  position: absolute;
  top: 0;
  left: 1px;
}
.mode__item h4 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--color-text-body-white);
  margin-bottom: 4px;
  padding-left: 22px;
  margin-left: 10px;
}
.mode__item p {
  color: var(--color-text-heading-secondary);
  margin-bottom: 0;
  padding-bottom: 6px;
  position: relative;
  padding-left: 22px;
  margin-left: 10px;
}
.mode__item p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #61d395;
}

.configure {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding-block: 32px 0;
  padding-inline: 20px;
  margin-bottom: 64px;
  overflow: hidden;
}
.configure + .btn {
  margin-bottom: 64px;
}
.configure h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 67%;
  color: #fff;
  margin-bottom: 8px;
}
.configure h2 + p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #666e80;
  margin-bottom: 24px;
}
.configure__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 20px;
}
.configure__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.configure__item h3 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 133%;
  color: var(--color-text-body-white);
}
.configure__item p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--color-text-heading-secondary);
}
.configure__img-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(348.05deg, rgba(255, 255, 255, 0.13) 5.73%, rgba(153, 153, 153, 0) 91.9%);
  margin: 0 -20px;
  padding: 0 60px;
}
.configure__img-block img {
  position: relative;
  z-index: 1;
}
.configure__img-block.is-visible .configure__img-item {
  transform: translate(0, 0);
}
.configure__img-block.is-visible .configure__img-item:last-of-type {
  transform: translate(0, 0);
}
.configure__img-block::before {
  content: "";
  position: absolute;
  bottom: -82px;
  left: 0;
  width: 305px;
  height: 305px;
  border-radius: 50%;
  background: #6466e9;
  filter: blur(90px);
  opacity: 0.8;
}
.configure .configure__img-item {
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.26);
  background: #353c4b;
  rotate: 7deg;
  position: absolute;
  right: 9px;
  bottom: 120px;
  z-index: 2;
  width: 100%;
  max-width: 202px;
  transform: translate(-50px, -20px);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.configure .configure__img-item h4 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 10px;
  line-height: 75%;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}
.configure .configure__img-item:last-of-type {
  max-width: 193px;
  bottom: 21px;
  left: 36px;
  rotate: -6deg;
  transform: translate(50px, 20px);
}
.configure .configure__img-item:last-of-type .configure__img-list div {
  width: 39px;
  height: 29px;
}
.configure__img-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
}
.configure__img-list div {
  border-radius: 31px;
  padding-block: 7px;
  padding-inline: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 10px;
  line-height: 150%;
  color: #9aa2b1;
  width: 32px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.configure__img-list div.active {
  background: rgba(37, 89, 246, 0.2);
  color: #e8effd;
  font-weight: 700;
}

.footer {
  padding-block: 48px;
  padding-inline: 16px;
}
.footer h2 {
  font-family: var(--third-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  background: linear-gradient(164.48deg, #4576b8 5.24%, #fff 49.6%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.footer__top {
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 32px;
}
.footer__top ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer__top ul li a {
  padding: 10px;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--background-3);
  opacity: 0.8;
  text-align: center;
  width: 100%;
  display: block;
}
.footer__bottom p {
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: var(--background-3);
  opacity: 0.6;
  text-align: center;
  margin-bottom: 32px;
}
.footer__bottom ul {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}
.footer__bottom ul li a {
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: var(--background-3);
  opacity: 0.6;
}