/* Built from Figma file DeUmFKtbv7UlpRCodeqTnt, frame 1:2 (capture of armcloud.ru, 1440 wide). */
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: block; src: url("fonts/lato-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 600; font-style: normal; font-display: block; src: url("fonts/lato-semibold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: block; src: url("fonts/lato-bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: block; src: url("fonts/lato-black.woff2") format("woff2"); }

:root {
  --blue: #009fe6;
  --blue-deep: #008ac7;
  --red: #ff4f47;
  --ink: #333e49;
  --ink-50: rgba(51, 62, 73, 0.5);
  --white: #fff;
  --shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--blue);
  color: var(--white);
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.28px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font: inherit; letter-spacing: inherit; }

.page { min-width: 1440px; overflow: hidden; }
.wrap { position: relative; width: 1026px; height: 3786px; margin: 0 auto; }
.wrap > *:not(.blob) { position: relative; }

.blob { position: absolute; border-radius: 999px; background: var(--blue-deep); opacity: 0.5; }
.blob--1 { left: -362px; top: 1291px; width: 825px; height: 825px; }
.blob--2 { left: 795px; top: 2066px; width: 825px; height: 825px; }
.blob--3 { left: -362px; top: 3161px; width: 865px; height: 865px; }

/* Header */
.header { display: flex; align-items: center; height: 90px; }
.header__logo { display: block; width: 238px; padding-right: 141px; }
.header__logo img { display: block; }
.nav { display: block; height: 44px; padding: 13.5px 0; font-size: 14px; line-height: 17px; }
.nav--specs { width: 158px; }
.nav--tariffs { width: 196px; }
.mail { display: flex; align-items: center; width: 196px; height: 44px; font-size: 14px; line-height: 17px; }
.mail__icon { position: relative; width: 20px; height: 16px; margin-right: 10px; overflow: hidden; flex: none; }
.mail__icon img { position: absolute; left: -10%; top: -25%; width: 120%; height: 150%; }

.btn { display: block; border-radius: 30px; text-align: center; cursor: pointer; }
.btn--outline { width: 238px; padding: 13.5px 27px; border: 1px solid var(--white); font-size: 14px; line-height: 17px; }
.btn--red { width: 238px; padding: 13.5px 27px; background: var(--red); font-size: 16px; line-height: 24px; }
.btn:hover { filter: brightness(1.05); }

/* Hero */
.hero { width: 1126px; height: 793px; padding: 185px 100px 185px 0; }
.hero__art { position: absolute; left: 466px; top: 35px; width: 674px; height: 723px; }
.hero__title { position: relative; font-weight: 900; font-size: 64px; line-height: 70px; }
.hero__lead { position: relative; padding-top: 29px; height: 83px; font-size: 18px; line-height: 27px; }
.hero__cta { position: relative; display: flex; align-items: center; height: 130px; padding-top: 79px; }
.hero__cta .btn { margin-right: 16px; }
.hero__trial { font-size: 12px; line-height: 17px; }

/* Shared */
.h2 { font-weight: 900; font-size: 36px; line-height: 43px; letter-spacing: 0.1px; }
.lead { padding-top: 26px; height: 80px; font-size: 18px; line-height: 27px; }
.card { background: var(--white); color: var(--ink); border-radius: 20px; box-shadow: var(--shadow); }

/* Advantages */
.advantages { margin-top: 12px; }
.advantages__row { display: flex; justify-content: space-between; height: 309px; padding-top: 95px; }
.adv { position: relative; width: 326px; padding: 83px 28px 53px; text-align: center; }
.adv p { width: 270px; font-weight: 600; font-size: 20px; line-height: 26px; }
.adv__num {
  position: absolute; left: 118px; top: -45px; width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid rgba(255, 79, 71, 0.5); border-radius: 999px; background: var(--red);
  box-shadow: var(--shadow);
  color: var(--white); font-family: Arial, sans-serif; font-weight: 600; font-size: 36px; line-height: 46px;
}

/* Usage */
.usage { margin-top: 150px; }
.usage__row { display: flex; justify-content: space-between; height: 377px; padding-top: 36px; }
.usage__list { width: 501px; height: 341px; padding: 45px 0 0 68px; }
.usage__list li {
  position: relative; width: 285px; height: 56px; padding: 14px 0;
  border-bottom: 1px solid var(--blue);
  font-size: 18px; line-height: 27px; letter-spacing: 0.36px;
}
.usage__list li.two-line { height: 83px; }
.usage__list li:last-child { height: 55px; border-bottom: 0; }
.usage__list li::before { content: "•"; position: absolute; left: -28.09px; top: 14px; color: var(--blue); }

/* Tariffs */
.tariffs { margin-top: 150px; }
.h2--tariffs { line-height: 50px; }
.tabs { display: flex; height: 43px; margin-top: 50px; }
.tab {
  height: 43px; padding: 8px 0; border: 0; border-radius: 30px 30px 0 0;
  font-size: 18px; line-height: 27px; text-align: center; cursor: default;
}
.tab--lite { width: 159px; margin-right: 16px; background: var(--red); color: var(--white); }
.tab--medium { width: 202px; background: #f5f5f5; color: rgba(0, 159, 230, 0.5); }
.tariff { background: var(--white); color: var(--ink); border-radius: 0 20px 20px 20px; box-shadow: var(--shadow); }
.tariff__joins { display: flex; height: 44px; }
.join { display: block; height: 44px; }
.join--lite { width: 159px; margin-right: 16px; background: var(--red); border-bottom-right-radius: 30px; }
.join--medium { width: 202px; background: var(--white); border-radius: 0 0 30px 30px; }
.tariff__body { display: flex; align-items: center; justify-content: space-between; height: 201px; padding: 40px 87px 54px 38px; }
.tariff__body > div:first-child { width: 465px; }
.tariff__title { font-weight: 700; font-size: 30px; line-height: 45px; }
.tariff__text { height: 62px; padding-top: 8px; font-size: 18px; line-height: 27px; }
.price { width: 175px; }
.price__value {
  padding: 12px 30px; border-radius: 20px; background: rgba(0, 159, 230, 0.2);
  font-family: Arial, sans-serif; font-size: 30px; line-height: 45px; text-align: center;
}
.price__note { height: 28px; padding-top: 11px; font-size: 14px; line-height: 17px; text-align: center; }

/* Specs */
.specs { margin-top: 164px; }
.specs__table { margin-top: 50px; padding: 24px; }
.spec { display: flex; align-items: center; padding: 35px 14px; border-bottom: 1px solid rgba(0, 159, 230, 0.3); }
.spec--last { border-bottom: 0; }
.spec__name { width: 225px; padding-right: 10px; flex: none; font-family: Arial, sans-serif; font-size: 20px; line-height: 26px; letter-spacing: 0.2px; }
.spec__name--wrap { padding-right: 10px; }
.spec__name--wrap { max-width: 225px; }
.spec__value { font-size: 18px; line-height: 23.4px; letter-spacing: 0.18px; }

/* Consult */
.consult { display: flex; justify-content: space-between; height: 424px; margin-top: 150px; }
.consult__text { width: 473px; padding-right: 76px; }
.consult__title { font-weight: 700; font-size: 34px; line-height: 49px; }
.consult__lead { padding-top: 36px; font-size: 16px; line-height: 24px; }
.consult__lead a { color: #ffd638; text-decoration: underline; }
.consult__side { display: flex; width: 553px; }
.tail { position: relative; width: 105px; height: 80px; margin-top: 39px; overflow: hidden; flex: none; }
.tail span {
  position: absolute; left: 7px; top: -26px; width: 121px; height: 60px;
  background: var(--white); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); transform: rotate(30deg);
}
.form { width: 460px; margin-top: 24px; padding: 45px 40px 40px; border-radius: 16px; align-self: flex-start; }
.input {
  display: block; width: 380px; height: 45px; padding: 11px;
  border: 1px solid var(--ink-50); border-radius: 10px; background: var(--white);
  color: var(--ink); font-size: 14px; letter-spacing: normal; outline: none;
}
.input + .input { margin-top: 23px; }
.input::placeholder { color: var(--ink-50); }
.input:focus { border-color: var(--blue); }
.form__consent { margin-top: -1px; padding: 24px 0; height: 84px; font-size: 12px; line-height: 18px; white-space: pre; }
.btn--submit {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 51px; border: 0; background: var(--red); color: var(--white);
  font-size: 16px; line-height: 24px; padding-left: 6px;
}

/* Up button */
.up {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin: 70px 0 0 966px; border-radius: 999px; background: var(--white);
}

/* Footer */
.footer { position: relative; margin-top: 48px; height: 200px; background: var(--blue); }
.footer__inner { display: flex; width: 1026px; height: 155px; margin: 0 auto; padding-top: 48px; }
.footer__brand { width: 236px; height: 107px; padding-right: 118px; }
.footer__brand img { display: block; }
.footer__brand p { padding-top: 12px; font-size: 10px; line-height: 15px; white-space: pre; }
.footer__nav { height: 107px; }
.footer__nav.nav--specs { width: 158px; }
.footer__nav.nav--tariffs { width: 196px; }
.footer__right { display: flex; flex-direction: column; width: 234px; margin-left: auto; }
.mail--footer { width: 234px; height: 43px; padding: 13px 0; }
.mail--footer .mail__icon { margin-right: 8px; }
.footer__policy { height: 24px; padding-top: 12px; font-size: 10px; line-height: 12px; text-decoration: underline; }
.footer__note { height: 40px; padding-top: 16px; font-size: 10px; line-height: 12px; white-space: pre; }