/* =====================================================================
   1. HERO — первый экран: заголовок + коллаж (телефон, видео, карточки)
   ===================================================================== */

.hero { height: 793px; overflow: hidden; background: linear-gradient(180deg, #cbd5de 0, #fff 98%); }

.hero__glow  { position: absolute; left: 0; top: 0; width: 1440px; height: 788px; object-fit: cover; }
.hero__bump  { position: absolute; left: calc(50% - 50.2vw); top: 620px; width: 100.4vw; height: 173px; object-fit: cover; --dist: 50%; --dur: 1s; --ease: cubic-bezier(.85, 0, .15, 1); }

.hero__title { position: absolute; left: 443.6px; top: 184px; width: 549.3px; font: 500 64px/64px var(--head); }
.hero__title span { display: block; white-space: nowrap; }   /* строки не переносятся (ширина впритык) */
.hero__title span + span { margin-top: 14px; }   /* две строки — с промежутком, как в дизайне */
.hero__lead  { position: absolute; left: 467.9px; top: 342px; width: 506px; font-size: 18px; line-height: 21.6px; text-align: center; --delay: .3s; }
.hero__tagline { position: absolute; left: 523.1px; top: 691.5px; width: 393px; line-height: 19.2px; text-align: center; }

.hero__video { position: absolute; left: 713.5px; top: 409px; width: 666px; height: 254px; object-fit: cover; }
.hero__phone { position: absolute; left: -40.5px; top: 79px; width: 472px; height: 655px; object-fit: cover; }
.hero__chat  { position: absolute; left: 1058px; top: 148px; width: 248px; height: 393px; object-fit: cover; }
.hero__transactions { position: absolute; left: 1158.2px; top: 476px; width: 208px; height: 187px; object-fit: cover; }
.hero__chat, .hero__transactions { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .hero { height: 775px; }
  .hero__glow { width: 1250px; height: 770px; }
  .hero__bump { top: 602px; left: calc(50% - 51.3vw); width: 102.6vw; }
  .hero__title { left: 348.8px; }
  .hero__lead { left: 372.8px; }
  .hero__tagline { left: 427.9px; top: 690px; }
  .hero__video { left: 523.5px; }
  .hero__chat { left: 927.8px; top: 148.2px; width: 237px; height: 374.7px; }
  .hero__transactions { left: 991.5px; top: 439.5px; width: 232px; height: 193px; }
}
/* tablet 740–1249 */
@media (max-width: 1249px) {
  .hero { height: 776px; }
  .hero__glow { width: 740px; height: 776px; }
  .hero__bump { top: 650px; left: calc(50% - 50vw); width: 100vw; height: 126px; }
  .hero__title { left: 154.4px; top: 127px; width: 429.2px; font-size: 50px; line-height: 50px; }
  .hero__lead { left: 108.5px; top: 262px; width: 523px; font-size: 16px; line-height: 19.2px; }
  .hero__tagline { left: 316.9px; top: 682px; font-size: 12px; line-height: 14.4px; }
  .hero__video { left: 104.2px; top: 450.6px; width: 520px; height: 198.8px; }
  .hero__phone { left: 77.5px; top: 294.9px; width: 348px; height: 481.1px; }
  .hero__chat { left: 513px; top: 346px; width: 172px; height: 272px; }
  .hero__transactions { left: 391.2px; top: 335.5px; width: 186px; height: 154.7px; }
}
/* mobile <740 */
@media (max-width: 739px) {
  .hero { height: 707px; }
  .hero__glow { left: 50%; top: 194px; width: 100vw; height: 507px; translate: -50% 0; }
  .hero__bump { top: 625px; height: 82px; }
  .hero__title { left: 31.5px; top: 71px; width: 258px; font-size: 30px; line-height: 40px; text-align: center; }
  .hero__title span + span { margin-top: 0; }
  .hero__lead { left: 8.5px; top: 156px; width: 303px; font-size: 14px; line-height: 16.8px; }
  .hero__tagline { left: 10.5px; top: 653px; width: 300px; }
  .hero__video { left: 9.5px; top: 529px; width: 300px; height: 117.5px; }
  .hero__phone { left: 51px; top: 214.1px; width: 246px; height: 357px; }
  .hero__chat { left: 212px; top: 299px; width: 97px; height: 148px; }
  .hero__transactions { left: 18.4px; top: 385.7px; width: 116px; height: 97px; }
}