.hero {
  position: relative;
  overflow: hidden;
  padding-top: 45px;
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  container-type: inline-size; 
}

.hero__body {
  /* ≥1200px */
  --u: 1px;
  --ab-w: 1200;
  --ab-h: 730;
  --pt: 141;
  --lift: 20;
  --x-lead: 0;
  --x-btn: 0;
  --x-asi: -7;
  --eb-fs: 25;  --eb-lh: 30;
  --ti-fs: 200; --ti-lh: 120; --ti-w: 716; --ti-mt: -2;
  --le-fs: 16;  --le-lh: 19;  --le-w: 343; --le-mt: 30;

  --bt-w: 240; --bt-h: 41; --bt-fs: 18; --bt-mt: 30;

  --asi-w: 121; --veb-w: 113; --veb-gap: 8; --veb-dy: 31; --pa-mt: 79;

  --c-x: 550;   --c-y: 56;   --c-w: 1029;  
  --fb-x: 839;  --fb-y: 225; --fb-w: 474;  
  --ff-x: 814;  --ff-y: 234; --ff-w: 474;  
  --i1-x: 502;  --i1-y: 588; --i1-w: 103;  
  --i2-x: 655;  --i2-y: 152; --i2-w: 100;  
  --i3-x: 920;  --i3-y: 12;  --i3-w: 105;  
  --i2-rot: 0deg;

  position: relative;
  min-height: calc(var(--ab-h) * var(--u));
}

@media (max-width: 1199px) {
  .hero__body {
    --ab-w: 960; --ab-h: 520;
    --pt: 86; --x-lead: 0; --x-btn: 0; --x-asi: -7;
    --eb-fs: 20;  --eb-lh: 24;
    --ti-fs: 160; --ti-lh: 88;   --ti-w: 716; --ti-mt: -2;
    --le-fs: 14;  --le-lh: 16.1; --le-w: 296; --le-mt: 19; --le-lines: 2;
    --bt-w: 194; --bt-h: 36; --bt-fs: 16; --bt-mt: 17.8;
    --asi-w: 96; --veb-w: 90; --veb-gap: 8; --veb-dy: 25; --pa-mt: 47;
    --c-x: 550;  --c-y: 56;  --c-w: 676;
    --fb-x: 748; --fb-y: 184; --fb-w: 291;
    --ff-x: 733; --ff-y: 189; --ff-w: 291;
    --i1-x: 512; --i1-y: 405; --i1-w: 80;
    --i2-x: 584; --i2-y: 141; --i2-w: 78;
    --i3-x: 827; --i3-y: 12;  --i3-w: 82;
  }
}

@media (max-width: 959px) {
  .hero__body {
    --ab-w: 640; --ab-h: 420;
    --pt: 46; --lift: 0; --x-lead: 0; --x-btn: 0; --x-asi: -10;
    --eb-fs: 18; --eb-lh: 22;
    --ti-fs: 96; --ti-lh: 53;   --ti-w: 359; --ti-mt: 11;
    --le-fs: 12; --le-lh: 13.8; --le-w: 248; --le-mt: 24; --le-lines: 2;
    --bt-w: 189; --bt-h: 32; --bt-fs: 14; --bt-mt: 25.4;
    --asi-w: 96; --veb-w: 90; --veb-gap: 13; --veb-dy: 25; --pa-mt: 67;
    --c-x: 284;  --c-y: 57;  --c-w: 496;
    --fb-x: 421; --fb-y: 131; --fb-w: 235;
    --ff-x: 409; --ff-y: 135; --ff-w: 235;
    --i1-x: 250; --i1-y: 296; --i1-w: 57;
    --i2-x: 353; --i2-y: 79;  --i2-w: 56;
    --i3-x: 490; --i3-y: 26;  --i3-w: 59;
    --i2-rot: -18deg; 
  }
}

@media (max-width: 639px) {
  .hero__body {
    --ab-w: 480; --ab-h: 385;
    --pt: 26; --x-lead: 0; --x-btn: 0; --x-asi: -10;
    --eb-fs: 14; --eb-lh: 17;
    --ti-fs: 72; --ti-lh: 40;   --ti-w: 359; --ti-mt: 5;
    --le-fs: 12; --le-lh: 13.8; --le-w: 174; --le-mt: 29; --le-lines: 3;
    --bt-w: 174; --bt-h: 32; --bt-fs: 14; --bt-mt: 34.1;
    --asi-w: 76; --veb-w: 72; --veb-gap: 21; --veb-dy: 20; --pa-mt: 46.5;
    --c-x: 200;  --c-y: 70;  --c-w: 390;
    --fb-x: 305; --fb-y: 124; --fb-w: 183;
    --ff-x: 297; --ff-y: 128; --ff-w: 183;
    --i1-x: 186; --i1-y: 273; --i1-w: 44;
    --i2-x: 201; --i2-y: 159; --i2-w: 42;
    --i3-x: 330; --i3-y: 55;  --i3-w: 45;
  }
}

@media (max-width: 479px) {
  .hero__body {
    --u: calc(100cqw / 320);
    --ab-w: 320; --ab-h: 435;
    --pt: 25; --x-lead: 2; --x-btn: 0; --x-asi: -7;
    --eb-fs: 18; --eb-lh: 22;
    --ti-fs: 72; --ti-lh: 40; --ti-w: 254; --ti-mt: 5;
    --le-fs: 12; --le-lh: 15; --le-w: 136; --le-mt: 35.5; --le-lines: 4;
    --bt-w: 137; --bt-h: 29; --bt-fs: 12; --bt-mt: 34.5;
    --asi-w: 76; --veb-w: 72; --veb-gap: 11; --veb-dy: 20; --pa-mt: 66;
    --c-x: 180;  --c-y: 140; --c-w: 270;
    --fb-x: 245; --fb-y: 197; --fb-w: 116;
    --ff-x: 254; --ff-y: 194; --ff-w: 116;
    --i1-x: 200; --i1-y: 349; --i1-w: 35;
    --i2-x: 176; --i2-y: 197; --i2-w: 35;
    --i3-x: 264; --i3-y: 129; --i3-w: 36;
  }
}

/* ── текст ── */

.hero__content {
  position: relative;
  z-index: 2; 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc((var(--pt) - var(--lift)) * var(--u));
}

.hero__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: calc(var(--eb-fs) * var(--u));
  line-height: calc(var(--eb-lh) * var(--u));
}

.hero__title {
  max-width: calc(var(--ti-w) * var(--u));
  margin: calc(var(--ti-mt) * var(--u)) 0 0;
  font-size: calc(var(--ti-fs) * var(--u));
  line-height: calc(var(--ti-lh) * var(--u));
}

.hero__lead {
  width: calc(var(--le-w) * var(--u));
  margin: calc(var(--le-mt) * var(--u)) 0 0 calc(var(--x-lead) * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(var(--le-fs) * var(--u));
  line-height: calc(var(--le-lh) * var(--u));
}

@media (max-width: 1199px) {
  .hero__lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--le-lines) * var(--le-lh) * var(--u));
  }
}

.btn.hero__cta {
  width: calc(var(--bt-w) * var(--u));
  height: calc(var(--bt-h) * var(--u));
  margin: calc(var(--bt-mt) * var(--u)) 0 0 calc(var(--x-btn) * var(--u));
  padding: 0;
  border: 0; /* в оригинале у этой кнопки нет рамки (в отличие от кнопок ниже) */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(var(--bt-fs) * var(--u));
  line-height: 1.4;
}

.hero__partner {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--veb-gap) * var(--u));
  margin: calc((var(--pa-mt) + var(--lift)) * var(--u)) 0 0 calc(var(--x-asi) * var(--u));
}

.hero__partner img {
  display: block;
  height: auto;
}

.hero__partner-asi {
  width: calc(var(--asi-w) * var(--u));
}

.hero__partner-veb {
  width: calc(var(--veb-w) * var(--u));
  margin-top: calc(var(--veb-dy) * var(--u));
}

.hero__visual {
  position: absolute;
  top: 0;
  left: calc(50% - var(--ab-w) * var(--u) / 2);
  z-index: 1;
  width: calc(var(--ab-w) * var(--u));
  height: calc(var(--ab-h) * var(--u));
  pointer-events: none;
}

.hero__visual > * {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.hero__figure--back {
  left: calc(var(--fb-x) * var(--u));
  top: calc(var(--fb-y) * var(--u));
  width: calc(var(--fb-w) * var(--u));
}

.hero__figure--front {
  left: calc(var(--ff-x) * var(--u));
  top: calc(var(--ff-y) * var(--u));
  width: calc(var(--ff-w) * var(--u));
}

.hero__circle {
  left: calc(var(--c-x) * var(--u));
  top: calc(var(--c-y) * var(--u));
  width: calc(var(--c-w) * var(--u));
  height: calc(var(--c-w) * var(--u));
}

.hero__badge--factory {
  left: calc(var(--i1-x) * var(--u));
  top: calc(var(--i1-y) * var(--u));
  width: calc(var(--i1-w) * var(--u));
}

.hero__badge--gears {
  left: calc(var(--i2-x) * var(--u));
  top: calc(var(--i2-y) * var(--u));
  width: calc(var(--i2-w) * var(--u));
  transform: rotate(var(--i2-rot));
}

.hero__badge--chat {
  left: calc(var(--i3-x) * var(--u));
  top: calc(var(--i3-y) * var(--u));
  width: calc(var(--i3-w) * var(--u));
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .hero__circle {
    animation: hero-rotate 40s linear infinite; 
  }
}

@keyframes hero-rotate {
  to {
    transform: rotate(-360deg);
  }
}