/* Координаты главной из Zero Block Тильды: компьютер (сетка 1200) и ниже телефон (сетка 320). */

/* Первый экран */
.hero {
  --h: 806;
  z-index: 1;
  background: #c1deff;
}
.hero__logo {
  --l: 120; --t: 21; --w: 67;
}
.hero__contact {
  --l: 920; --t: 20; --w: 160; --bh: 40; --fs: 10; --ls: 2.4;
}
.hero__line {
  --l: 120; --t: 79; --w: 960;
  height: max(1px, var(--u));
  background: #08090d;
}
.hero__title {
  --l: 100; --t: 141; --w: 1000;
  --o-w: 0.862em; --o-h: 0.54em; --o-stroke: 0.115em;
  font-size: calc(87 * var(--u));
  font-weight: 500;
  line-height: calc(81 / 87);
  letter-spacing: calc(1 * var(--u));
  text-align: center;
  color: #08090d;
}
.hero__note {
  --l: 728; --t: 641; --w: 352;
  font-size: calc(20 * var(--u));
  line-height: 1.55;
  text-align: right;
  color: #08090d;
}
.hero__join {
  --l: 127; --t: 636; --w: 305; --bh: 68; --fs: 12; --ls: 6.5;
}
.hero__down {
  --l: 569; --t: 774; --w: 62;
}

/* Company */
.company {
  --h: 902;
  background: #fff;
}
.company__label {
  --l: 124; --t: 95; --w: 200;
}
.company__title {
  --l: 448; --t: 94.5; --w: 740;
  --o-w: 0.9em; --o-h: 0.54em; --o-stroke: 0.086em;
  font-size: calc(50 * var(--u));
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: calc(0.5 * var(--u));
  color: #08090d;
}
.company__hatch {
  --l: 126; --t: 367; --w: 399;
}
.company__line {
  --w: 391;
  height: max(1px, var(--u));
  background: #08090d;
}
.company__line--b {
  --l: 693; --t: 469;
}
.company__line--c {
  --l: 285; --t: 689;
}
.feature__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(32 * var(--u));
}
.feature__text {
  margin: 0;
  padding: calc(2 * var(--u)) 0 0 calc(var(--pad) * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.48;
  letter-spacing: calc(0.1 * var(--u));
  color: #08090d;
}
.feature--a {
  --l: 124; --t: 411; --w: 422; --pad: 51;
}
.feature--b {
  --l: 687; --t: 498; --w: 392; --pad: 50;
}
.feature--c {
  --l: 284; --t: 718; --w: 393; --pad: 51;
}

/* Our Apps */
.apps {
  --h: 978;
  background: #d9c1ff;
}
.apps__label {
  --l: 285; --t: 95; --w: 200;
}
.apps__title {
  --l: 285; --t: 151.5; --w: 900;
  --o-w: 0.973em; --o-h: 0.528em; --o-stroke: 0.107em;
  font-size: calc(75 * var(--u));
  font-weight: 500;
  line-height: calc(66 / 75);
  letter-spacing: calc(0.7 * var(--u));
  color: #08090d;
}
.app__icon {
  width: 100%;
  border-radius: calc(var(--r) * var(--u));
}
.app--1 {
  --l: 280; --t: 413; --w: 457; --r: 75;
}
.app--2 {
  --l: 797; --t: 642; --w: 228; --r: 37;
}
.app__name--1 {
  --l: 280; --t: 880; --w: 300;
}
.app__name--2 {
  --l: 797; --t: 880; --w: 300;
}

/* Подвал */
.footer {
  --h: 775;
  background: #08090d;
  color: #fff;
}
.footer__join {
  --l: 127; --t: 100; --w: 305; --bh: 68; --fs: 12; --ls: 6.5;
}
.contact {
  --l: 125; --t: 271; --w: 420;
}
.contact__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(30 * var(--u));
}
.contact__label {
  margin: 0;
  padding: calc(1 * var(--u)) 0 0 calc(50 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.48;
  letter-spacing: calc(0.1 * var(--u));
  color: #848486;
}
.contact__email {
  display: inline-block;
  margin: calc(10 * var(--u)) 0 0 calc(50 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.48;
  letter-spacing: calc(0.1 * var(--u));
  color: #fff;
  text-decoration: none;
}
.footer__title {
  --l: 607; --t: 95; --w: 560;
  --o-w: 1em; --o-h: 0.534em; --o-stroke: 0.11em;
  font-size: calc(75 * var(--u));
  font-weight: 500;
  line-height: calc(63 / 75);
  letter-spacing: calc(0.7 * var(--u));
}
.footer__hatch {
  --l: 124; --t: 441; --w: 952;
}
.footer__logo {
  --l: 125; --t: 554; --w: 226;
}
.footer__nav,
.footer__copy {
  font-size: calc(10 * var(--u));
  letter-spacing: calc(1.7 * var(--u));
  text-transform: uppercase;
  text-align: right;
  color: #848486;
}
.footer__nav {
  --l: 906; --t: 534; --w: 171;
}
.footer__nav a {
  display: block;
  height: calc(16 * var(--u));
  line-height: 1.55;
  color: inherit;
  text-decoration: none;
}
.footer__copy {
  --l: 700; --t: 667; --w: 377;
  line-height: 1.55;
}

@media (max-width: 479px) {
  .hero { --h: 624; }
  .hero__logo { --l: 14; --t: 13; --w: 60; }
  .hero__contact { --l: 162; --t: 13; --w: 145; --bh: 35; }
  .hero__line { --l: -40; --t: 60; --w: 400; }
  .hero__title { --l: 0; --t: 96; --w: 320; font-size: 41px; line-height: calc(43 / 41); }
  .hero__note { --l: 29; --t: 416; --w: 263; font-size: 15px; text-align: center; }
  .hero__join { --l: 15; --t: 501; --w: 291; --bh: 54; --ls: 2.5; }
  .hero__down { --l: 139; --t: 602; --w: 42; }

  .company { --h: 841; }
  .company__label { --l: 15; --t: 50; }
  .company__title { --l: 13; --t: 91.5; --w: 307; font-size: 30px; line-height: 1.1; }
  .company__hatch--m { --l: 12; --t: 342; --w: 293; }
  .company__line { --w: 290; }
  .company__line--b { --l: 15; --t: 525; }
  .company__line--c { --l: 15; --t: 694; }
  .feature__text { font-size: 16px; }
  .feature--a { --l: 14; --t: 383; --w: 289; --pad: 38; }
  .feature--a .feature__icon { width: 26px; }
  .feature--b { --l: 13; --t: 552; --w: 295; --pad: 39; }
  .feature--b .feature__icon { width: 29px; }
  .feature--c { --l: 13; --t: 721; --w: 277; --pad: 39; }
  .feature--c .feature__icon { width: 28px; }

  .apps { --h: 786; }
  .apps__label { --l: 15; --t: 51; }
  .apps__title { --l: 14; --t: 95; --w: 300; font-size: 34px; line-height: calc(34.5 / 34); }
  .app--1 { --l: 15; --t: 230; --w: 290; --r: 47; }
  .app--2 { --l: 15; --t: 575; --w: 145; --r: 24; }
  .app__name--1 { --l: 15; --t: 530; --w: 290; font-size: 11px; }
  .app__name--2 { --l: 15; --t: 730; --w: 290; font-size: 11px; }

  .footer { --h: 753; }
  .footer__join { --l: 15; --t: 195; --w: 290; --bh: 55; --ls: 2.5; border-width: 3px; }
  .contact { --l: 14; --t: 297; --w: 300; }
  .contact__icon--m { width: 27px; }
  .contact__label { padding: 3px 0 0 39px; font-size: 16px; }
  .contact__email { margin: 1px 0 0 41px; font-size: 16px; }
  .footer__title { --l: 15; --t: 42.5; --w: 300; font-size: 34px; line-height: calc(37 / 34); }
  .footer__hatch--m { --l: 14; --t: 409; --w: 293; }
  .footer__logo { --l: 12; --t: 474; --w: 203; }
  .footer__nav,
  .footer__copy { text-align: left; }
  .footer__nav { --l: 13; --t: 604; --w: 293; }
  .footer__copy { --l: 13; --t: 694; --w: 293; }
}