@font-face {
  font-family: 'Soyuz Grotesk';
  src: url('../fonts/SoyuzGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  
  --u:             1px;
  --orange:        #e96a27;
  --orange-light:  #f0854a;
  --pink:          #ff1550;
  --ink:           #111111;
  --white:         #ffffff;
  --muted:         rgba(255, 255, 255, .72);
  --muted-2:       rgba(255, 255, 255, .62);
  --glass:         rgba(20, 18, 17, .55);
  --stroke:        rgba(255, 255, 255, .28);
  --ease:          cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0a0605;
  color: var(--white);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.accent { color: var(--orange); }

.hero, .videos, .usecases, .details, .story, .reviews, .who, .order, .faq, .cta { --u: calc(min(100vw, 1920px) / 1920); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(979 * var(--u));
  padding-bottom: calc(40 * var(--u));
  overflow: hidden;
}

@supports (container-type: inline-size) {
  body { container-type: inline-size; }
  .hero, .videos, .usecases, .details, .story, .reviews, .who, .order, .faq, .cta { --u: calc(min(100cqw, 1920px) / 1920); }
}

.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -1;
}
.hero__bg { pointer-events: none; }

.container {
  width: 100%;
  max-width: calc(1920 * var(--u));
  margin: 0 auto;
  padding: 0 calc(200 * var(--u));
}

.header {
  position: relative;
  z-index: 5;
  padding-top: calc(57 * var(--u));
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  height: calc(62 * var(--u));
  position: relative;
}

.nav__list {
  display: flex;
  align-items: stretch;
  gap: calc(28 * var(--u));
  height: calc(62 * var(--u));
  padding: 0 calc(28 * var(--u));
  border-radius: 999px;
  background: rgba(24, 22, 21, .62);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav__list > li { display: flex; }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  font-size: max(13px, calc(14 * var(--u)));
  font-weight: 500;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link:hover { color: var(--white); }

.nav__link.is-active { color: var(--white); }
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(9 * var(--u));
  height: calc(3 * var(--u));
  min-height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(106 * var(--u));
  height: 100%;
}
.logo img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
}

.header__side {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
}

.phone {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}

.phone__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  color: var(--white);
}
.phone__icon svg { width: 100%; height: 100%; }

.phone__text { display: block; }

.phone__label {
  display: block;
  font-size: max(11px, calc(13 * var(--u)));
  line-height: 1.2;
  color: var(--muted-2);
}

.phone__number {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: max(17px, calc(24 * var(--u)));
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease);
}
.btn:active { transform: translateY(1px) !important; }

.btn--white {
  height: calc(62 * var(--u));
  min-height: 44px;
  /* Высота и кегль подстрахованы min-height и max(), а padding — нет:
     на узких экранах он схлопывался до ~5px и текст упирался в скругления.
     Нижняя граница подобрана под кегль 14px, до которого зажат шрифт. */
  padding: 0 max(22px, calc(26 * var(--u)));
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: max(14px, calc(16 * var(--u)));
  font-weight: 600;
  white-space: nowrap;
}
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 255, 255, .22); }

.btn--primary {
  width: 100%;
  height: calc(113 * var(--u));
  min-height: 56px;
  border-radius: calc(50 * var(--u));
  background: radial-gradient(120% 110% at 44% 0%, #f4b189 0%, var(--orange) 62%);
  color: var(--white);
  font-size: max(16px, calc(22 * var(--u)));
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 22px 54px rgba(233, 106, 39, .42);
}
.btn--primary:hover {
  background: radial-gradient(120% 110% at 44% 0%, #f7c0a0 0%, #ee7433 62%);
  box-shadow: 0 26px 64px rgba(233, 106, 39, .52);
  transform: translateY(-2px);
}

.hero__body { position: relative; }

.hero__col {
  position: relative;
  z-index: 3;
  width: calc(760 * var(--u));
  padding-top: calc(97 * var(--u));
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(38 * var(--u));
  min-height: 32px;
  padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(20, 18, 17, .6);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: max(12px, calc(13 * var(--u)));
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}
.pill-tag__dot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.hero__title {
  margin: calc(23 * var(--u)) 0 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: calc(118 * var(--u));
  line-height: calc(115 * var(--u));
  letter-spacing: 0;
}
.hero__title-row { display: block; }
.hero__title .accent { margin-right: calc(7 * var(--u)); }

.hero__lead {
  position: relative;
  margin: calc(24 * var(--u)) 0 0;
  padding-left: calc(53 * var(--u));
  max-width: calc(590 * var(--u));
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.45;
  color: var(--muted);
}
.hero__lead::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(14 * var(--u));
  width: calc(38 * var(--u));
  height: 1px;
  background: rgba(255, 255, 255, .45);
}

.hero__cta {
  position: relative;
  width: calc(580 * var(--u));
  margin-top: calc(37 * var(--u));
}

.price-badge {
  position: absolute;
  top: calc(-3 * var(--u));
  right: calc(168 * var(--u));
  display: flex;
  align-items: stretch;
  height: calc(32 * var(--u));
  min-height: 26px;
  border-radius: 999px;
  overflow: hidden;
  transform: rotate(-3.5deg);
  transform-origin: 100% 50%;
  font-size: max(12px, calc(14 * var(--u)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.price-badge__old,
.price-badge__sale {
  display: flex;
  align-items: center;
  padding: 0 calc(14 * var(--u));
}

.price-badge__old {
  background: #0d0705;
  color: rgba(255, 255, 255, .9);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.price-badge__sale {
  background: var(--pink);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: calc(-119 * var(--u)) 0 0 0;   
  z-index: 2;
  pointer-events: none;
}
.hero__media > *,
.axe-box > * { pointer-events: auto; }

.axe-box { position: absolute; inset: 0; }

.hero__axe {
  position: absolute;
  left: calc(429.5 * var(--u));
  top: 0;
  width: calc(1396 * var(--u));
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .35));
}

.marker { position: absolute; }

.marker--hand {
  left: calc(937 * var(--u));
  top: calc(300 * var(--u));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  width: calc(232 * var(--u));
  height: calc(73 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: calc(26 * var(--u));
  background: linear-gradient(90deg, #0a0a0a 0%, #1f1f1f 55%, #363636 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.marker__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  border-radius: 50%;
}
.marker__icon svg { width: 100%; height: 100%; }
.marker__text {
  font-size: max(14px, calc(19 * var(--u)));
  font-weight: 700;
  line-height: 1.08;
}

.marker--handle {
  left: calc(1347 * var(--u));
  top: calc(285 * var(--u));
  z-index: 4;
  width: max(212px, calc(249 * var(--u)));
  padding: calc(20 * var(--u)) calc(15 * var(--u)) calc(18 * var(--u));
  border-radius: calc(18 * var(--u));
  background: radial-gradient(120% 110% at 44% 0%, #f4b189 0%, var(--orange) 62%);
}
.marker__plus {
  position: absolute;
  left: calc(-10 * var(--u));
  top: calc(-6 * var(--u));
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .16);
}
.marker__plus svg { width: 48%; height: 48%; }
.marker__title {
  display: block;
  font-size: max(14px, calc(18 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
}
.marker__sub {
  display: block;
  margin-top: 0;
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.thumbs {
  position: absolute;
  left: calc(1344 * var(--u));
  top: calc(442 * var(--u));
  z-index: 1;
  display: flex;
  gap: calc(11.5 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 94%, rgba(0, 0, 0, .4) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 94%, rgba(0, 0, 0, .4) 100%);
}
.thumbs li {
  position: relative;
  width: calc(59 * var(--u));
  height: calc(65 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.tags {
  position: absolute;
  left: calc(1347 * var(--u));
  top: calc(590 * var(--u));
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: calc(7 * var(--u)) calc(5 * var(--u));
  width: max(272px, calc(326 * var(--u)));
}

.tags li:nth-child(5) { margin-left: calc(73 * var(--u)); }

.tags li.tags__spark {
  width: calc(37 * var(--u));
  padding: 0;
  justify-content: center;
  color: var(--orange);
}
.tags__spark svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.tags li {
  display: flex;
  align-items: center;
  height: calc(30 * var(--u));
  min-height: 28px;
  padding: 0 calc(13 * var(--u));
  border-radius: 999px;
  border: 1px solid var(--stroke);
  font-size: max(12px, calc(15 * var(--u)));
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}

.callout {
  position: absolute;
  left: calc(1176 * var(--u));
  top: calc(737 * var(--u));
  z-index: 3;
  width: calc(170 * var(--u));
  height: calc(10 * var(--u));
}
.callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, .95);
}
.callout::after {
  content: '';
  position: absolute;
  left: calc(13 * var(--u));
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35));
}

.marker--size {
  left: calc(1346 * var(--u));
  top: calc(739 * var(--u));
  z-index: 4;
}
.size {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(51 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u));
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
}
.size__icon {
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  min-width: 22px;
  min-height: 22px;
  border-radius: calc(7 * var(--u));
  background: var(--orange);
  color: var(--white);
}
.size__icon svg { width: 76%; height: 76%; }
.size__value {
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: max(18px, calc(24 * var(--u)));
  line-height: 1;
  white-space: nowrap;
}
.marker__caption {
  margin: calc(9 * var(--u)) 0 0 calc(21 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.45;
  color: var(--muted-2);
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(20, 18, 17, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--white);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(40 * var(--u));
}

.section-heading { position: relative; }

.doodle {
  position: absolute;
  left: calc(-50 * var(--u));
  top: calc(-50 * var(--u));
  width: calc(68 * var(--u));
  height: calc(59 * var(--u));
  color: #ddd;
}
.reviews .doodle,
.cta .doodle {
  color: #3A3A3A;
}
.doodle svg { width: 100%; height: 100%; }

.videos .doodle { left: calc(-30 * var(--u)); top: calc(-46 * var(--u)); }

.section-title {
  margin: 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: calc(72 * var(--u));
  line-height: calc(70 * var(--u));
  color: var(--ink);
}
.section-title > span { display: block; }

.round-btn {
  display: grid;
  place-items: center;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.round-btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 16px; }
.round-btn:hover { color: var(--orange); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 17, 17, .12); }
.round-btn:active { transform: scale(.94) !important; }
.round-btn[disabled] { opacity: .35; cursor: default; box-shadow: none; }

/* Отключённая кнопка не реагирует на наведение: гасим подъём и тень,
   каждый вариант сохраняет свой цвет. Иначе стрелка --ghost красилась
   в --ink и пропадала на чёрном фоне секции отзывов. */
.round-btn[disabled]:hover { color: var(--ink); transform: none; box-shadow: none; }
.round-btn--ghost[disabled]:hover {
  border-color: rgba(255, 255, 255, .25);
  color: var(--white);
}
.round-btn--solid[disabled]:hover {
  background: radial-gradient(120% 110% at 44% 0%, #f4b189 0%, var(--orange) 62%);
  color: var(--white);
}

.videos {
  position: relative;
  padding: calc(120 * var(--u)) 0 calc(121 * var(--u));
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
}

.videos .container { padding: 0 calc(220 * var(--u)); }

.videos__stage {
  position: relative;
  height: calc(848 * var(--u));
  margin-top: calc(47.5 * var(--u));
}

.videos__track {
  position: relative;
  height: 100%;
  perspective: calc(2218 * var(--u));
  cursor: grab;
  touch-action: pan-y;          
  user-select: none;
  -webkit-user-select: none;
}
.videos__track.is-dragging { cursor: grabbing; }
.videos__track:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 8px; }
.vcard__media { pointer-events: none; }   

.vcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(381 * var(--u));
  height: calc(651 * var(--u));
  margin: calc(-325.5 * var(--u)) 0 0 calc(-190.5 * var(--u));
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .18);
  will-change: transform;
}

.vcard[data-pos='0']  { transform: none; z-index: 5; }

.vcard[data-pos='1'],
.vcard[data-pos='2']  { transform-origin: left center; }
.vcard[data-pos='-1'],
.vcard[data-pos='-2'] { transform-origin: right center; }

.vcard[data-pos='1']  { transform: translateX(calc(398 * var(--u))) rotateY(-25deg); z-index: 4; }
.vcard[data-pos='-1'] { transform: translateX(calc(-398 * var(--u))) rotateY(25deg); z-index: 4; }
.vcard[data-pos='2']  { transform: translateX(calc(754 * var(--u))) translateZ(calc(174 * var(--u))) rotateY(-50deg); z-index: 3; }
.vcard[data-pos='-2'] { transform: translateX(calc(-754 * var(--u))) translateZ(calc(174 * var(--u))) rotateY(50deg); z-index: 3; }

.vcard__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1a1a;
}

.vcard__title {
  position: absolute;
  left: calc(20 * var(--u));
  right: calc(20 * var(--u));
  top: calc(21 * var(--u));
  margin: 0;
  font-size: max(13px, calc(17 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.vcard__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.vcard__play:hover { background: rgba(255, 255, 255, .34); }
.vcard__play:active { transform: translate(-50%, -50%) scale(.94); }
.vcard__ico { width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 20px; }
.vcard__ico--pause { display: none; }
.vcard.is-playing .vcard__ico--play { display: none; }
.vcard.is-playing .vcard__ico--pause { display: block; }

.vcard.is-playing .vcard__play { opacity: 0; transition: opacity .3s var(--ease); }
.vcard.is-playing:hover .vcard__play { opacity: 1; }

.vcard__time {
  position: absolute;
  left: calc(13 * var(--u));
  bottom: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(35 * var(--u));
  min-height: 26px;
  padding: 0 calc(9 * var(--u));
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 600;
  line-height: 1;
  color: var(--white);
}
.vcard__time svg { width: calc(14 * var(--u)); height: calc(13 * var(--u)); min-width: 12px; }

.videos__foot {
  display: flex;
  justify-content: center;
  margin-top: calc(7.5 * var(--u));
}

.btn--compact {
  width: auto;
  height: calc(84 * var(--u));
  min-height: 52px;
  padding: 0 calc(88 * var(--u));
  border-radius: 999px;
  font-size: max(15px, calc(18 * var(--u)));
}

.usecases {
  padding: calc(120 * var(--u)) 0 calc(111 * var(--u));
  background: #f6f6f6;
  color: var(--ink);
  overflow: hidden;
}

.usecases .container { padding: 0 calc(200 * var(--u)); }

.usecases__nav {
  display: flex;
  gap: calc(8 * var(--u));
}

.usecases__list {
  display: flex;
  gap: calc(10 * var(--u));
  margin-top: calc(40 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}
.usecases__list::-webkit-scrollbar { display: none; }
.usecases__list { scroll-behavior: auto; }
.usecases__list.is-dragging { scroll-snap-type: none; }

.usecases__list.is-scrollable { cursor: grab; }
.usecases__list.is-dragging { cursor: grabbing; }
.usecases__list:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; border-radius: 8px; }

.ucard {
  flex: 0 0 calc(296 * var(--u));
  scroll-snap-align: start;
}

.ucard__img {
  width: 100%;
  height: calc(318 * var(--u));
  object-fit: cover;
  border-radius: calc(16 * var(--u));
  background: #e9e9e9;
  pointer-events: none;      
}

.ucard__title {
  margin: calc(19 * var(--u)) 0 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: max(15px, calc(19 * var(--u)));
  line-height: calc(18 * var(--u));
  color: var(--ink);
}

.ucard__text {
  margin: calc(11 * var(--u)) 0 0;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: calc(19 * var(--u));
  color: #666;
}

.details {
  position: relative;
  height: calc(1188 * var(--u));
  background: #000;
  color: var(--white);
  overflow: hidden;
}

.details__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.details__head {
  position: relative;
  z-index: 2;
  padding-top: calc(120 * var(--u));
  text-align: center;
}

.doodle--center {
  left: 50%;
  top: calc(-49 * var(--u));
  transform: translateX(-50%);
  color: #4a4a4a;
}

.section-title--center { text-align: center; }
.details .section-title { color: var(--white); }

.details__lead {
  max-width: calc(800 * var(--u));
  margin: calc(11 * var(--u)) auto 0;
  font-size: max(14px, calc(19 * var(--u)));
  line-height: calc(29 * var(--u));
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .72);
}
.details__lead b { font-weight: 700; color: var(--white); }

.details__specs {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.spec {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

.spec--left {
  display: flex;
  gap: calc(15 * var(--u));
  width: calc(370 * var(--u));
}
.spec__icon {
  flex: none;
  align-self: flex-start;
  width: calc(52 * var(--u));
  margin-top: calc(4 * var(--u));
  color: var(--orange);
}
.spec__icon svg { width: 100%; height: auto; display: block; }

.spec__title {
  margin: 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: max(15px, calc(19 * var(--u)));
  line-height: calc(18 * var(--u));
  letter-spacing: -.01em;
  color: var(--white);
}

.spec__text {
  margin: calc(11 * var(--u)) 0 0;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(19 * var(--u));
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .72);
}

.spec--num {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(16 * var(--u));
  width: calc(300 * var(--u));
}
.spec--num .spec__title { grid-column: 2; align-self: center; font-size: max(16px, calc(22 * var(--u))); }

.spec--num .spec__text  { grid-column: 1 / -1; margin-top: calc(-3 * var(--u)); }

.spec__value {
  position: relative;
  grid-column: 1;
  margin: 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1;
}
.spec__digits {
  display: block;
  font-size: calc(64 * var(--u));
  letter-spacing: -.08em;
}

.spec__unit {
  position: absolute;
  right: calc(-2 * var(--u));
  bottom: calc(6 * var(--u));
  font-size: calc(28 * var(--u));
  letter-spacing: -.02em;
  text-shadow:
    calc(-3 * var(--u)) 0 0 #000, calc(3 * var(--u)) 0 0 #000,
    0 calc(-3 * var(--u)) 0 #000, 0 calc(3 * var(--u)) 0 #000,
    calc(-3 * var(--u)) calc(-3 * var(--u)) 0 #000, calc(3 * var(--u)) calc(-3 * var(--u)) 0 #000,
    calc(-3 * var(--u)) calc(3 * var(--u)) 0 #000, calc(3 * var(--u)) calc(3 * var(--u)) 0 #000;
}

.details__leads { position: absolute; inset: 0; z-index: 1; }

.lead-line {
  position: absolute;
  top: calc(var(--y) * var(--u));
  height: 1px;
  background: linear-gradient(90deg, rgba(233, 106, 39, .15), rgba(233, 106, 39, .65));
}
.lead-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  margin-top: calc(-3.5 * var(--u));
  border-radius: 50%;
  border: 1px solid var(--orange);
  background: #120a06;
}

.lead-line--l { left: calc(671 * var(--u)); width: calc(172 * var(--u)); }
.lead-line--l::after { right: calc(-3.5 * var(--u)); }

.lead-line--r {
  left: calc(1139 * var(--u));
  width: calc(173 * var(--u));
  background: linear-gradient(90deg, rgba(233, 106, 39, .65), rgba(233, 106, 39, .15));
}
.lead-line--r::after { left: calc(-3.5 * var(--u)); }

.story {
  position: relative;
  padding-top: calc(198 * var(--u));
  padding-bottom: calc(198 * var(--u));
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
}

.story__col {
  position: relative;
  z-index: 2;
  max-width: calc(610 * var(--u));
}

.story__lead {
  margin: calc(32 * var(--u)) 0 0;
  font-size: max(15px, calc(19 * var(--u)));
  font-weight: 600;
  line-height: calc(24 * var(--u));
  letter-spacing: -.01em;
  color: #000;
}

.story__text {
  margin: calc(11 * var(--u)) 0 0;
  font-size: max(13px, calc(14 * var(--u)));
  line-height: calc(22 * var(--u));
  color: #4c4c4c;
}

.story__cta {
  margin-top: calc(31 * var(--u));
  padding: 0 calc(77.5 * var(--u));
}

.story__collage {
  position: absolute;
  left: calc(838 * var(--u));
  top: calc(96 * var(--u));
  width: calc(1062 * var(--u));
  height: auto;
  z-index: 1;
}

.reviews {
  position: relative;
  height: calc(764 * var(--u));
  padding-top: calc(120 * var(--u));
  background: #000;
  color: var(--white);
  overflow: hidden;
}

.reviews__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.reviews .section-head,
.reviews .container { position: relative; z-index: 2; }

.reviews .section-title { color: var(--white); }

.reviews__nav {
  display: flex;
  gap: calc(10 * var(--u));
}

.round-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
}
.round-btn--ghost:hover { border-color: var(--white); color: var(--white); transform: translateY(-2px); box-shadow: none; }

.round-btn--solid {
  background: radial-gradient(120% 110% at 44% 0%, #f4b189 0%, var(--orange) 62%);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(233, 106, 39, .4);
}
.round-btn--solid:hover { background: radial-gradient(120% 110% at 44% 0%, #f7c0a0 0%, #ee7433 62%); color: var(--white); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(233, 106, 39, .5); }

.reviews__list {
  display: flex;
  gap: calc(21 * var(--u));
  margin-top: calc(40 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}
.reviews__list::-webkit-scrollbar { display: none; }
.reviews__list { scroll-behavior: auto; }
.reviews__list.is-dragging { scroll-snap-type: none; }
.reviews__list.is-scrollable { cursor: grab; }
.reviews__list.is-dragging { cursor: grabbing; }
.reviews__list:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; border-radius: 8px; }

.review {
  flex: 0 0 calc(492.7 * var(--u));
  min-height: calc(219 * var(--u));
  padding: calc(22 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--white);
  color: var(--ink);
  scroll-snap-align: start;
}

.review__head {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
}

.review__avatar {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  background: #e6e6e6;
  pointer-events: none;
}

.review__name {
  margin: 0;
  font-size: max(15px, calc(19 * var(--u)));
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.review__date {
  margin: calc(5 * var(--u)) 0 0;
  font-size: max(11px, calc(13 * var(--u)));
  line-height: 1.2;
  color: #8a8a8a;
}

.review__text {
  margin: calc(16 * var(--u)) 0 0;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: calc(23 * var(--u));
  letter-spacing: -.01em;
  color: #393939;
}

.reviews__foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: calc(39 * var(--u));
}
.reviews__foot .btn { padding: 0 calc(63 * var(--u)); }

.who {
  padding: calc(120 * var(--u)) 0 calc(120 * var(--u));
  background: #f6f6f6;
  color: var(--ink);
  overflow: hidden;
}

.who .container { padding: 0 calc(200 * var(--u)); }

.who__list {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(40 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}
.who__list::-webkit-scrollbar { display: none; }
.who__list { scroll-behavior: auto; }
.who__list.is-dragging { scroll-snap-type: none; }
.who__list.is-scrollable { cursor: grab; }
.who__list.is-dragging { cursor: grabbing; }
.who__list:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; border-radius: 8px; }

.acard {
  position: relative;
  flex: 0 0 calc(365 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  background: #1a1a1a;
  scroll-snap-align: start;
}

.acard__img {
  width: 100%;
  height: calc(479 * var(--u));
  object-fit: cover;
  pointer-events: none;
}

.acard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .45) 100%);
  pointer-events: none;
}

.acard__body {
  position: absolute;
  z-index: 1;
  left: calc(25 * var(--u));
  right: calc(25 * var(--u));
  top: calc(364 * var(--u));
}

.acard__title {
  margin: 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: max(16px, calc(24 * var(--u)));
  line-height: calc(23 * var(--u));
  color: var(--white);
}

.acard__text {
  margin: calc(5 * var(--u)) 0 0;
  font-size: max(12px, calc(13 * var(--u)));
  line-height: calc(21 * var(--u));
  color: #c1c1c1;
}

.order {
  position: relative;
  height: calc(941 * var(--u));
  padding-top: calc(120 * var(--u));
  background: #0b0b0b;
  color: var(--white);
  overflow: hidden;
}

.order__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.order .container { position: relative; z-index: 2; padding: 0 calc(220 * var(--u)); }
.order .section-title { color: var(--white); }

.order__col { width: calc(683 * var(--u)); }

.order__specs {
  margin-top: calc(22 * var(--u));
  padding-left: calc(16 * var(--u));
}

.order__label {
  margin: 0;
  font-size: max(13px, calc(15 * var(--u)));
  font-weight: 600;
  line-height: calc(23 * var(--u));
  color: var(--white);
}
.order__label--gap { margin-top: calc(16 * var(--u)); }

.order__line {
  margin: calc(7 * var(--u)) 0 0;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(23 * var(--u));
  color: rgba(255, 255, 255, .82);
}

.order__list {
  margin: 0;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(23 * var(--u));
  color: rgba(255, 255, 255, .82);
}
.order__list li {
  position: relative;
  padding-left: calc(20 * var(--u));
}
.order__list li::before {
  content: '';
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(10 * var(--u));
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  min-width: 3px;
  min-height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
}
.order__list b { color: var(--orange); font-weight: 600; }

.acc { margin-top: calc(19 * var(--u)); }

.acc__item + .acc__item { margin-top: calc(5 * var(--u)); }

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  min-height: calc(50 * var(--u));
  padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(14 * var(--u));
  font-size: max(13px, calc(15 * var(--u)));
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover { border-color: rgba(255, 255, 255, .34); }

.acc__sign {
  position: relative;
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  min-width: 12px;
  min-height: 12px;
}
.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: var(--white);
  transition: transform .25s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item[open] .acc__sign::after { transform: rotate(0deg); }
.acc__item[open] .acc__head { border-color: rgba(255, 255, 255, .34); }

.acc__body {
  padding: calc(12 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(22 * var(--u));
  color: rgba(255, 255, 255, .72);
}
.acc__body { overflow: hidden; }
.acc__body p { margin: 0; }

.order__buy {
  display: flex;
  align-items: center;
  gap: calc(145 * var(--u));
  margin-top: calc(19 * var(--u));
  padding-left: calc(15 * var(--u));
}

.price {
  position: relative;
  flex: none;
  width: calc(176 * var(--u));
  /* Высота видимой полосы над блоком с ценой: на неё заходит плашка со скидкой,
     по ней же центрируется подпись .price__label. Значение одно на оба правила,
     в медиазапросах переопределяется только эта переменная. */
  --price-tab: calc(21 * var(--u));
  padding-top: var(--price-tab);
}

.price__tab {
  position: absolute;
  left: calc(2 * var(--u));
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.price__badge {
  display: grid;
  place-items: center;
  width: calc(63 * var(--u));
  height: calc(29 * var(--u));
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  background: var(--pink);
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 600;
  color: var(--white);
}

.price__label {
  /* Плашка со скидкой нижним краем уходит за .price__box, поэтому центрировать
     подпись по всей высоте .price__tab нельзя — она садится на рамку блока
     с ценой. Центрируем по видимой полосе. */
  align-self: flex-start;
  line-height: var(--price-tab);
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 600;
  color: var(--white);
}

.price__box {
  position: relative;
  z-index: 1;                 
  padding: calc(17 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
  border: 2px solid var(--pink);
  border-radius: calc(16 * var(--u));
  background: #0b0b0b;
}

.price__now {
  display: block;
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: #ffb38b;
  white-space: nowrap;
}

.price__old {
  display: block;
  margin-top: calc(5 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1;
  color: rgba(255, 255, 255, .85);
  text-decoration-thickness: 1px;
}

.order__cta {
  width: auto;
  height: calc(84 * var(--u));
  min-height: 52px;
  flex: none;
  white-space: nowrap;
  padding: 0 calc(47.5 * var(--u));
  border-radius: 999px;
  font-size: max(15px, calc(19 * var(--u)));
  position: relative;
  top: calc(4 * var(--u));
}

.faq {
  padding: calc(120 * var(--u)) 0 calc(121 * var(--u));
  background: #f6f6f6;
  color: var(--ink);
}

.faq__cta {
  width: auto;
  flex: none;
  white-space: nowrap;
  height: calc(84 * var(--u));
  min-height: 52px;
  padding: 0 calc(62 * var(--u));
  border-radius: 999px;
  font-size: max(15px, calc(19 * var(--u)));
}

.faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(22 * var(--u));
  align-items: start;
  margin-top: calc(40 * var(--u));
}

.faq__col > .acc__item + .acc__item { margin-top: calc(9 * var(--u)); }

.acc__item--light .acc__head {
  min-height: calc(49 * var(--u));
  border: 1px solid #e6e6e6;
  border-radius: calc(12 * var(--u));
  background: #f1f1f1;
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  font-size: max(14px, calc(16 * var(--u)));
  color: var(--ink);
}
.acc__item--light .acc__head:hover { border-color: #d5d5d5; }
.acc__item--light[open] .acc__head {
  border-color: #e6e6e6;
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  border-bottom-color: transparent;
}
.acc__item--light .acc__sign::before,
.acc__item--light .acc__sign::after { background: var(--ink); }

.acc__item--light .acc__body {
  padding: 0 calc(18 * var(--u)) calc(9 * var(--u));
  border: 1px solid #e6e6e6;
  border-top: 0;
  border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u));
  background: #f1f1f1;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(21 * var(--u));
  color: #6b6b6b;
}

.cta {
  position: relative;
  height: calc(941 * var(--u));
  padding-top: calc(120 * var(--u));
  background: #100d12;
  color: var(--white);
  overflow: hidden;
}

.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cta .container { position: relative; z-index: 2; padding: 0 calc(220 * var(--u)); }
.cta .section-title { color: var(--white); }

.cta__col { width: calc(940 * var(--u)); }

.cta__lead {
  max-width: calc(660 * var(--u));
  margin: calc(40 * var(--u)) 0 0;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: calc(28 * var(--u));
  color: rgba(255, 255, 255, .85);
}
.cta__lead b { font-weight: 600; color: var(--white); }

.cta__points {
  display: grid;
  grid-template-columns: repeat(2, calc(423 * var(--u)));
  gap: calc(43 * var(--u)) calc(24 * var(--u));
  margin-top: calc(39 * var(--u));
}

.cta__points li {
  position: relative;
  padding-left: calc(57 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  line-height: calc(27 * var(--u));
  color: rgba(255, 255, 255, .9);
}

.cta__ico {
  position: absolute;
  left: 0;
  top: calc(1 * var(--u));
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #f79a5c 0%, var(--orange) 70%);
  /* Свечение вокруг значка, снято с макета Frame 1618872511. */
  box-shadow: 0 calc(2 * var(--u)) calc(22 * var(--u)) rgba(233, 106, 39, .55),
              0 calc(2 * var(--u)) calc(40 * var(--u)) rgba(233, 106, 39, .35);
  color: var(--white);
}
.cta__ico svg { width: 46%; height: 46%; }

.cta__buy {
  position: relative;
  width: calc(462 * var(--u));
  margin-top: calc(61 * var(--u));
}

.cta__btn {
  width: 100%;
  height: calc(90 * var(--u));
  min-height: 56px;
  border-radius: calc(45 * var(--u));
  font-size: max(15px, calc(22 * var(--u)));
}

.cta__badge {
  top: calc(-25 * var(--u));
  right: calc(44 * var(--u));
  height: calc(35 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
}

.footer {
  --u: calc(min(100vw, 1920px) / 1920);
  background: #000;
  color: var(--white);
}
@supports (container-type: inline-size) {
  .footer { --u: calc(min(100cqw, 1920px) / 1920); }
}

.footer .container { padding-left: calc(220 * var(--u)); padding-right: calc(220 * var(--u)); }

.footer__top {
  display: flex;
  align-items: center;
  padding-top: calc(40 * var(--u));
}

.footer__logo { flex: none; }
.footer__logo img { width: calc(106 * var(--u)); height: auto; }

.footer__nav {
  margin-left: calc(177 * var(--u));
  margin-right: auto;
}
.footer__nav ul {
  display: flex;
  align-items: center;
  gap: calc(42 * var(--u));
}
.footer__nav a {
  font-size: max(12px, calc(14 * var(--u)));
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.footer__nav a:hover,
.footer__nav a.is-active { color: var(--white); }

.footer__side {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.phone--dark .phone__label { color: rgba(255, 255, 255, .6); }
.phone--dark .phone__number { font-size: max(16px, calc(23 * var(--u))); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  margin-top: calc(21 * var(--u));
  padding-top: calc(23 * var(--u));
  padding-bottom: calc(13 * var(--u));
  border-top: 1px solid #242424;
  font-size: max(12px, calc(14 * var(--u)));
  color: rgba(255, 255, 255, .6);
}
.footer__bottom p { margin: 0; }
.footer__bottom a { transition: color .2s var(--ease); }
.footer__bottom a:hover { color: var(--white); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 3, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade .25s var(--ease);
}
.modal__box {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 40px;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(233, 106, 39, .28) 0%, rgba(233, 106, 39, 0) 60%),
    #131010;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  animation: rise .3s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(16px) } }

.modal__close {
  position: absolute;
  right: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.modal__close:hover { background: rgba(255, 255, 255, .16); }
.modal__close svg { width: 20px; height: 20px; }

.modal .pill-tag { height: 34px; font-size: 13px; }

.modal__title {
  margin: 18px 0 0;
  font-family: 'Soyuz Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
}
.modal__lead {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.form { margin-top: 26px; }

.field { display: block; }
.field + .field { margin-top: 12px; }
.field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--muted-2);
}
.field__input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field__input--area {
  height: auto;
  min-height: 104px;
  padding: 14px 18px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.field__input::placeholder { color: rgba(255, 255, 255, .3); }
.field__input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 255, 255, .08);
}
.field__input.is-error { border-color: var(--pink); }

.form__submit {
  height: 60px;
  min-height: 60px;
  margin-top: 20px;
  border-radius: 999px;
  font-size: 17px;
}

.consent {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-2);
  cursor: pointer;
}
.consent a { color: rgba(255, 255, 255, .8); text-decoration: underline; }
.consent__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.consent__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25);
  color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.consent__mark svg { width: 13px; height: 13px; }
.consent__box:checked + .consent__mark {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.form__done {
  margin: 16px 0 0;
  font-size: 14px;
  color: #7fd68b;
}

html.is-locked,
body.is-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.is-locked { padding-right: var(--scrollbar, 0px); }

@media (max-width: 1279px) {
  .hero {
    --u: 1px;
    min-height: 0;
    padding-bottom: 56px;
  }
  @supports (container-type: inline-size) {
    .hero { --u: 1px; }
  }

  .container { padding: 0 40px; }

  .header { z-index: 60; padding-top: 24px; }
  .header__inner { gap: 16px; }
  .logo, .header__side { position: relative; z-index: 55; }

  .logo {
    position: static;
    order: -1;
    transform: none;
    width: auto;
    height: auto;
  }
  .logo img { position: static; transform: none; width: 62px; }

  .header__side { gap: 20px; }
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(8, 5, 4, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), visibility .28s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__link {
    height: auto;
    padding: 12px 0;
    font-size: 26px;
    font-weight: 600;
  }
  .nav__link.is-active::after { bottom: 4px; height: 3px; }

  .hero__body {
    display: flex;
    flex-direction: column;
    padding-top: 44px;
  }

  .hero__col {
    width: 100%;
    max-width: 720px;
    padding-top: 0;
  }

  .hero__title { font-size: 76px; line-height: .96; margin-top: 22px; }
  .hero__title .accent { margin-right: 10px; }

  .hero__lead { margin-top: 26px; max-width: 560px; }
  .hero__lead::before { top: 12px; }

  .hero__cta { width: min(520px, 100%); margin-top: 32px; }
  .btn--primary { height: 84px; border-radius: 42px; font-size: 20px; }
  .price-badge { right: 120px; }

  .hero__media {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    margin-top: 28px;
  }

  .callout { display: none; }

  .axe-box {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: hidden;
  }
  .hero__axe {
    position: static;
    width: 166.3%;
    max-width: none;
    margin: -10.8% 0 -6.6% -33.8%;
  }

  .marker--hand {
    left: 0;
    top: 4%;
    width: 200px;
    height: 64px;
    border-radius: 22px;
  }
  .marker__icon { width: 46px; height: 46px; }
  .marker__text { font-size: 18px; }

  .marker--size {
    left: auto;
    right: 0;
    top: auto;
    bottom: 6%;
    text-align: right;
  }
  .size { height: 48px; }
  .marker__caption { margin: 10px 0 0; }

  .marker--handle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 320px;
    margin-top: 22px;
  }

  .thumbs {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 26px;
    gap: 10px;
  }
  .thumbs li { width: 64px; height: 72px; border-radius: 16px; }

  .tags {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 18px;
    gap: 8px;
  }
  .tags li { height: 34px; font-size: 14px; }
  .tags li:nth-child(5) { margin-left: 0; }

  .videos { padding: 56px 0 72px; }
  .videos .container { padding: 0 40px; }

  .section-head { align-items: center; }
  .section-title { font-size: 46px; line-height: .96; }
  .round-btn { width: 56px; height: 56px; }
  .round-btn svg { width: 18px; height: 18px; min-width: 0; }
  .section-heading .doodle { left: -26px; top: -30px; width: 50px; height: 43px; }
  .doodle--center { width: 50px; height: 43px; top: -30px; }
  .videos__stage {
    height: auto;
    margin-top: 34px;
  }
  .videos__track {
    perspective: none;
    cursor: auto;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
    display: flex;
    gap: 16px;
    height: auto;
    padding: 4px 40px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .videos__track::-webkit-scrollbar { display: none; }
  .videos__track { scroll-behavior: auto; }

  .vcard {
    position: static;
    flex: 0 0 auto;
    width: 300px;
    height: 512px;
    margin: 0;
    border-radius: 18px;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
  }
  .vcard[data-clone] { display: none; }
  .vcard__title { left: 16px; right: 16px; top: 16px; }
  .vcard__play { width: 62px; height: 62px; }
  .vcard__ico { width: 24px; height: 24px; }
  .vcard__time { left: 11px; bottom: 11px; height: 30px; padding: 0 8px; }
  .vcard__time svg { width: 13px; height: 12px; }

  .videos__foot { margin-top: 32px; }
  .btn--compact { height: 64px; padding: 0 40px; font-size: 17px; }

  .usecases { padding: 56px 0 64px; }
  .usecases .container { padding: 0 40px; }
  .usecases__list { gap: 16px; margin-top: 34px; }
  .ucard { flex: 0 0 262px; }
  .ucard__img { height: 282px; border-radius: 16px; }
  .ucard__title { margin-top: 18px; font-size: 18px; line-height: 1.05; }
  .ucard__text { margin-top: 10px; font-size: 14px; line-height: 1.45; }

  .details { height: auto; padding: 56px 0 64px; }
  .details__head { padding-top: 0; }
  .doodle--center { top: -30px; }
  .details__lead { max-width: 620px; margin-top: 14px; font-size: 15px; line-height: 1.55; }

  .details__shot {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    /* Родные пропорции файла 1920×1188: кадр во всю ширину, без обреза.
       Чёрный фон самого снимка сливается с фоном секции, поэтому он снова
       читается как подложка, а не как квадратная картинка на чёрном. */
    aspect-ratio: 2 / 1;
    margin: 0;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .details__specs {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 40px;
    max-width: 1000px;
    margin: 34px auto 0;
    padding: 0 40px;
  }
  .spec { position: static; width: auto !important; }
  .spec--left { gap: 20px; }
  .spec--num { column-gap: 14px; }
  .spec__icon { width: 44px; margin-top: 2px; }
  .spec__title { font-size: 18px; line-height: 1.05; }
  .spec--num .spec__title { font-size: 19px; }
  .spec__text { margin-top: 10px; font-size: 14px; line-height: 1.45; letter-spacing: 0; }
  .spec--num .spec__text { margin-top: 10px; }
  .spec__digits { font-size: 52px; }
  .spec__unit { font-size: 23px; bottom: 5px; }
  .details__leads { display: none; }

  .story { height: auto; padding: 56px 0 64px; }
  .story__col { max-width: 720px; }
  .story__lead { margin-top: 24px; font-size: 17px; line-height: 1.4; }
  .story__text { margin-top: 12px; font-size: 15px; line-height: 1.55; }
  .story__cta { margin-top: 26px; padding: 0 40px; }
  .story__collage {
    position: static;
    width: calc(100% - 80px);
    max-width: 780px;
    margin: 36px auto 0;
  }

  .reviews { height: auto; padding: 56px 0 64px; }
  .reviews__bg { object-position: 50% 100%; }
  .reviews__list { gap: 16px; margin-top: 34px; }
  .review { flex: 0 0 340px; min-height: 0; padding: 20px; border-radius: 18px; }
  .review__avatar { width: 56px; height: 56px; }
  .review__name { font-size: 17px; }
  .review__text { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .reviews__foot { margin-top: 32px; }
  .reviews__foot .btn { height: 64px; padding: 0 40px; font-size: 17px; }

  .who { padding: 56px 0 64px; }
  .who .container { padding: 0 40px; }
  .who__list { gap: 16px; margin-top: 34px; }
  .acard { flex: 0 0 300px; border-radius: 16px; }
  .acard__img { height: 394px; }
  .acard__body { left: 20px; right: 20px; top: auto; bottom: 22px; }
  .acard__title { font-size: 20px; line-height: 1.05; }
  .acard__text { margin-top: 8px; font-size: 13px; line-height: 1.5; }

  .order { height: auto; padding: 56px 0 64px; }
  .order .container { padding: 0 40px; }
  
  .order::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.86) 55%, rgba(11,11,11,.5) 100%);
  }
  .order__bg { object-position: 78% 50%; }
  .order__col { width: 100%; max-width: 720px; }
  .order__specs { margin-top: 22px; padding-left: 0; }
  .order__label { font-size: 15px; line-height: 1.5; }
  .order__line, .order__list { font-size: 14px; line-height: 1.55; }
  .order__list li { padding-left: 18px; }
  .order__list li::before { left: 6px; top: 9px; }
  .acc { margin-top: 26px; }
  .acc__item + .acc__item { margin-top: 10px; }
  .acc__head {
    min-height: 52px;
    gap: 16px;
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 15px;
  }
  .acc__sign { width: 14px; height: 14px; }
  .acc__body { padding: 10px 16px 14px; font-size: 14px; line-height: 1.5; }
  .order__buy {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 28px;
    padding-left: 0;
  }
  .order__cta { top: 0; height: 64px; padding: 0 36px; font-size: 17px; }

  .order__label--gap { margin-top: 22px; }
  .order__line { margin-top: 6px; }
  .price { width: auto; min-width: 210px; --price-tab: 22px; }
  .price__tab { left: 2px; gap: 12px; }
  .price__badge { width: 58px; height: 28px; border-radius: 10px 10px 0 0; font-size: 12px; }
  .price__label { font-size: 12px; }
  .price__box { padding: 14px 16px 10px; border-radius: 16px; }
  .price__now { font-size: 32px; }
  .price__old { margin-top: 6px; font-size: 14px; }

  .faq { padding: 56px 0 64px; }
  .faq .container { padding: 0 40px; }
  .faq__cta { height: 64px; padding: 0 40px; font-size: 17px; }
  .faq__grid { gap: 16px; margin-top: 32px; }
  .faq__col > .acc__item + .acc__item { margin-top: 8px; }
  .acc__item--light .acc__head { min-height: 52px; padding: 10px 16px; border-radius: 12px; font-size: 14px; }
  .acc__item--light[open] .acc__head { border-radius: 12px 12px 0 0; }
  .acc__item--light .acc__body { padding: 0 16px 12px; border-radius: 0 0 12px 12px; font-size: 14px; line-height: 1.5; }

  .cta { height: auto; padding: 56px 0 64px; }
  .cta .container { padding: 0 40px; }
  .cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16,13,18,.92) 0%, rgba(16,13,18,.84) 55%, rgba(16,13,18,.45) 100%);
  }
  .cta__bg { object-position: 72% 50%; }
  .cta__col { width: 100%; max-width: 760px; }
  .cta__lead { max-width: none; margin-top: 26px; font-size: 15px; line-height: 1.6; }
  .cta__points { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; margin-top: 30px; }
  .cta__points li { padding-left: 50px; font-size: 15px; line-height: 1.5; }
  .cta__ico { width: 36px; height: 36px; }
  .cta__buy { width: 100%; max-width: 420px; margin-top: 36px; }
  .cta__btn { height: 68px; border-radius: 34px; font-size: 17px; }
  .cta__badge { right: 28px; top: -18px; height: 30px; font-size: 13px; }

  .footer .container { padding-left: 40px; padding-right: 40px; }
  .footer__top {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    padding-top: 32px;
  }
  .footer__logo img { width: 76px; }
  .footer__nav { margin: 0; }
  .footer__nav ul { flex-wrap: wrap; gap: 12px 26px; }
  .footer__side { margin-left: auto; gap: 16px; }
  .footer__bottom { margin-top: 26px; padding: 20px 0; font-size: 13px; }
}

@media (max-width: 767px) {
  .container { padding: 0 16px; }

  .header { padding-top: 16px; }
  .header__side { gap: 12px; }
  .header__call { display: none; }
  .phone__text { display: none; }
  .phone__icon { width: 46px; height: 46px; border-radius: 14px; }
  .logo img { width: 54px; }

  .hero__body { padding-top: 30px; }

  .pill-tag { height: 32px; padding: 0 14px; font-size: 12px; }

  .hero__title { font-size: 44px; line-height: .98; margin-top: 16px; }
  .hero__title .accent { margin-right: 6px; }

  .hero__lead {
    margin-top: 18px;
    padding-left: 0;
    font-size: 15px;
  }
  .hero__lead::before { display: none; }

  .hero__cta { width: 100%; margin-top: 26px; }
  .btn--primary {
    height: 66px;
    border-radius: 33px;
    font-size: 16px;
    padding: 0 12px;
  }
  .price-badge {
    top: -12px;
    right: 12px;
    height: 26px;
    font-size: 12px;
  }
  .price-badge__old { padding: 0 16px 0 10px; }
  .price-badge__sale { padding: 0 10px; }

  .hero__media { margin-top: 30px; }

  .marker--hand {
    top: 2%;
    width: 150px;
    height: 52px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 18px;
  }
  .marker__icon { width: 34px; height: 34px; }
  .marker__text { font-size: 14px; }

  .marker--handle {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 18px;
    padding: 12px 16px 14px;
  }
  .marker__plus { left: auto; right: 14px; top: -12px; }
  .marker__title { font-size: 16px; }
  .marker__sub { font-size: 14px; }

  .thumbs { margin-top: 14px; gap: 8px; }
  .thumbs li { flex: 1 1 0; width: auto; height: 76px; }

  .tags { margin-top: 14px; gap: 6px; }
  .tags li { height: 32px; padding: 0 14px; font-size: 13px; }

  .marker--size { bottom: 2%; }
  .size { height: 42px; padding: 0 16px 0 6px; gap: 8px; }
  .size__icon { width: 30px; height: 30px; border-radius: 9px; }
  .size__value { font-size: 18px; }
  .marker__caption { margin: 8px 0 0; font-size: 12px; }

  .videos { padding: 44px 0 56px; }
  .videos .container { padding: 0 16px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 22px; }
  .section-title { font-size: 34px; }
  .round-btn { width: 50px; height: 50px; }
  .round-btn svg { width: 16px; height: 16px; min-width: 0; }
  .section-heading .doodle { left: -8px; top: -26px; width: 40px; height: 35px; }
  .doodle--center { width: 40px; height: 35px; top: -24px; }
  .videos__stage { margin-top: 22px; }
  .videos__track { gap: 12px; padding: 4px 16px 8px; }
  .vcard { width: 252px; height: 430px; border-radius: 16px; }
  .vcard__title { left: 14px; right: 14px; top: 14px; font-size: 14px; }
  .vcard__play { width: 56px; height: 56px; }
  .videos__foot { margin-top: 26px; }
  .btn--compact { height: 58px; padding: 0 34px; font-size: 16px; }

  .usecases { padding: 44px 0 52px; }
  .usecases .container { padding: 0 16px; }
  .usecases__list { gap: 12px; margin-top: 22px; }
  .ucard { flex: 0 0 230px; }
  .ucard__img { height: 248px; border-radius: 14px; }
  .ucard__title { margin-top: 14px; font-size: 17px; }
  .ucard__text { margin-top: 8px; font-size: 13px; }

  .details {
    padding: 44px 0 52px;
    /* Левая группа характеристик идёт над фото, числовая — под ним.
       Порядок задаём через flex, разметку не трогаем. */
    display: flex;
    flex-direction: column;
  }
  .details__lead { font-size: 14px; }

  /* display: contents убирает бокс списка, и карточки становятся прямыми
     детьми .details — иначе фото, лежащее вне .details__specs, нельзя
     поставить между группами. Отступы и padding переезжают на сами карточки. */
  .details__specs { display: contents; }
  .spec {
    margin-top: 26px;
    padding: 0 16px;
  }
  .spec--left { order: 0; }
  .details__shot {
    max-width: 100%;
    aspect-ratio: 4 / 5;
    order: 1;
    margin-top: 26px;
  }
  .spec--num { order: 2; }
  .spec__digits { font-size: 44px; }
  .spec__unit { font-size: 20px; bottom: 4px; }
  .spec--left { gap: 16px; }
  .spec__icon { width: 40px; }
  .spec__title { font-size: 17px; }
  .spec--num .spec__title { font-size: 18px; }

  .story { padding: 44px 0 0; }
  .story__lead { margin-top: 18px; font-size: 16px; }
  .story__text { margin-top: 10px; font-size: 14px; }
  .story__cta { margin-top: 22px; padding: 0 34px; }
  .story__collage { width: calc(100% + 57px); height: 73vw; object-fit: cover; object-position: top left; margin-top: 28px; }

  .reviews { padding: 44px 0 52px; }
  .reviews__list { gap: 12px; margin-top: 22px; }
  .review { flex: 0 0 282px; padding: 18px; border-radius: 16px; }
  .review__avatar { width: 50px; height: 50px; }
  .review__name { font-size: 16px; }
  .review__text { margin-top: 12px; font-size: 13px; }
  .reviews__foot { margin-top: 26px; }
  .reviews__foot .btn { height: 58px; padding: 0 34px; font-size: 16px; }

  .who { padding: 44px 0 52px; }
  .who .container { padding: 0 16px; }
  .who__list { gap: 12px; margin-top: 22px; }
  .acard { flex: 0 0 264px; border-radius: 14px; }
  .acard__img { height: 346px; }
  .acard__body { left: 16px; right: 16px; bottom: 18px; }
  .acard__title { font-size: 18px; }
  .acard__text { font-size: 12.5px; }

  .order { padding: 44px 0 52px; }
  .order .container { padding: 0 16px; }
  .order__line, .order__list { font-size: 13px; }
  .acc { margin-top: 22px; }
  .acc__item + .acc__item { margin-top: 8px; }
  .acc__head { min-height: 48px; padding: 10px 14px; font-size: 14px; }
  .acc__body { padding: 8px 14px 12px; font-size: 13px; }
  .acc__item--light .acc__body { padding: 0 14px 12px; }
  .order__buy { gap: 20px; margin-top: 24px; }
  .order__cta { height: 58px; padding: 0 26px; font-size: 15px; white-space: normal; }
  .price { min-width: 190px; }
  .price__now { font-size: 28px; }

  .faq { padding: 44px 0 52px; }
  .faq .container { padding: 0 16px; }
  .faq__cta { height: 58px; padding: 0 30px; font-size: 15px; }
  .faq__grid { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .faq__col > .acc__item + .acc__item { margin-top: 8px; }
  .faq__col:last-child { margin-top: 8px; }
  .acc__item--light .acc__head { font-size: 14px; }

  .cta { padding: 44px 0 52px; }
  .cta .container { padding: 0 16px; }
  .cta__lead { font-size: 14px; }
  .cta__points { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .cta__points li { padding-left: 46px; font-size: 14px; }
  .cta__ico { width: 34px; height: 34px; }
  .cta__buy { max-width: none; margin-top: 30px; }
  .cta__btn { height: 62px; border-radius: 31px; font-size: 15px; }
  .cta__badge { right: 18px; top: -15px; height: 26px; font-size: 12px; }

  .footer .container { padding-left: 16px; padding-right: 16px; }
  .footer__top { gap: 20px; padding-top: 28px; }
  .footer__logo img { width: 64px; }
  .footer__nav { order: 3; width: 100%; }
  .footer__nav ul { gap: 10px 20px; }
  
  .footer .phone__text { display: block; }
  .footer__side {
    order: 4;
    width: 100%;
    margin-left: 0;
    /* Телефон слева, кнопка прижата к правому краю. flex-wrap оставлен на
       случай совсем узких экранов: там кнопка переносится под телефон,
       как было раньше, вместо того чтобы вылезать за край. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 22px;
    padding: 18px 0;
    font-size: 12px;
  }

  .modal { padding: 12px; }
  .modal__box { padding: 28px 20px 24px; border-radius: 22px; }
  .modal__title { font-size: 34px; }
  .modal__close { right: 12px; top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}