/* Final hero accent: the original PNG stays untouched. */
.hero,
.hero-image {
  position: relative;
}

html body main .hero .hero-info-one {
  position: absolute !important;
  z-index: 20 !important;
  right: clamp(34px, 4.6vw, 76px) !important;
  bottom: clamp(70px, 8vh, 104px) !important;
  left: auto !important;
  top: auto !important;
  width: clamp(210px, 18vw, 278px) !important;
  height: clamp(315px, 27vw, 417px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url('/assets/hero-leads-tag-original.png?v=1') center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  mask: none !important;
  -webkit-mask: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  isolation: isolate;
  transform-origin: 62% 55%;
  will-change: transform;
  animation: heroTagFloat 5.4s ease-in-out infinite !important;
}

/* Explicit layer order: background -> overlay -> content -> original PNG. */
html body main .hero > .hero-image {
  z-index: 0 !important;
}

html body main .hero::after {
  z-index: 1 !important;
  pointer-events: none !important;
}

html body main .hero > .hero-copy {
  position: relative !important;
  z-index: 10 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body main .hero > .hero-info-one,
html body main .hero > .hero-info-one * {
  opacity: 1;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Existing inner nodes become lightweight infographic callouts. */
html body main .hero .hero-info-one > small,
html body main .hero .hero-info-one > b,
html body main .hero .hero-info-one > span {
  position: absolute !important;
  display: flex !important;
  align-items: center;
  width: max-content !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid rgba(255, 104, 73, .52) !important;
  border-radius: 999px !important;
  background: rgba(7, 15, 22, .78) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22) !important;
  opacity: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: heroLeadLabel 6s ease-in-out infinite !important;
}

html body main .hero .hero-info-one > small::before,
html body main .hero .hero-info-one > b::before,
html body main .hero .hero-info-one > span::before {
  color: #fff;
  font: 700 10px/1 Arial, sans-serif;
}

html body main .hero .hero-info-one > small::after,
html body main .hero .hero-info-one > b::after,
html body main .hero .hero-info-one > span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 62px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 101, 73, .12), rgba(255, 101, 73, .92));
  transform: translateY(-50%);
}

html body main .hero .hero-info-one > small {
  left: -104px !important;
  top: 17% !important;
  animation-delay: 0s !important;
}
html body main .hero .hero-info-one > small::before { content: 'Заявка'; }
html body main .hero .hero-info-one > small::after { left: 100%; }

html body main .hero .hero-info-one > span {
  left: -126px !important;
  top: 49% !important;
  animation-delay: 1.35s !important;
}
html body main .hero .hero-info-one > span::before { content: 'Новый лид · Клиент'; }
html body main .hero .hero-info-one > span::after { left: 100%; width: 82px; }

html body main .hero .hero-info-one > b {
  right: -24px !important;
  bottom: -20px !important;
  height: 36px !important;
  padding: 0 15px !important;
  border-color: rgba(255, 101, 73, .85) !important;
  background: #ff6549 !important;
  animation-delay: 2.7s !important;
}
html body main .hero .hero-info-one > b::before {
  content: 'ЗАЯВКИ ЗДЕСЬ';
  font-size: 11px;
}
html body main .hero .hero-info-one > b::after {
  display: none;
}

/* Moving luminous points travel toward the tag along the thin lines. */
html body main .hero .hero-info-one::before,
html body main .hero .hero-info-one::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: -42px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff795f;
  box-shadow: 0 0 0 3px rgba(255, 101, 73, .13), 0 0 14px rgba(255, 101, 73, .9);
  animation: heroLeadDot 3s ease-in-out infinite;
}
html body main .hero .hero-info-one::before { top: calc(17% + 12px); }
html body main .hero .hero-info-one::after {
  top: calc(49% + 12px);
  animation-delay: 1.35s;
}

@keyframes heroTagFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.45deg); }
  50% { transform: translate3d(3px, -10px, 0) rotate(.65deg); }
}

@keyframes heroLeadLabel {
  0%, 10%, 82%, 100% { opacity: .48; transform: translate3d(-4px, 0, 0); }
  22%, 68% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroLeadDot {
  0% { opacity: 0; transform: translate3d(-54px, -50%, 0) scale(.7); }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(76px, -50%, 0) scale(1); }
}

/* Tablet */
@media (max-width: 1100px) {
  html body main .hero .hero-info-one {
    right: 26px !important;
    bottom: 78px !important;
    width: 205px !important;
    height: 308px !important;
  }
  html body main .hero .hero-info-one > span { display: none !important; }
  html body main .hero .hero-info-one::after { display: none; }
}

/* Mobile: compact infographic below the content/statistics and above the curve. */
@media (max-width: 768px) {
  html body main .hero .hero-info-one {
    right: clamp(15px, 5vw, 24px) !important;
    bottom: clamp(58px, 8vw, 76px) !important;
    left: auto !important;
    width: clamp(142px, 39vw, 174px) !important;
    height: clamp(213px, 58.5vw, 261px) !important;
    transform-origin: 62% 55%;
    animation-name: heroTagFloatMobile !important;
  }

  html body main .hero .hero-info-one > small {
    left: -88px !important;
    top: 28% !important;
    height: 26px !important;
    padding: 0 9px !important;
  }
  html body main .hero .hero-info-one > small::after { width: 50px; }
  html body main .hero .hero-info-one > small::before { font-size: 9px; }

  html body main .hero .hero-info-one > span,
  html body main .hero .hero-info-one::after {
    display: none !important;
  }

  html body main .hero .hero-info-one > b {
    right: 0 !important;
    bottom: -10px !important;
    height: 30px !important;
    padding: 0 11px !important;
  }
  html body main .hero .hero-info-one > b::before { font-size: 9px; }

  html body main .hero .hero-info-one::before {
    left: -34px;
    top: calc(28% + 10px);
  }
}

@keyframes heroTagFloatMobile {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg); }
  50% { transform: translate3d(2px, -8px, 0) rotate(.55deg); }
}

/* Narrow phones */
@media (max-width: 390px) {
  html body main .hero .hero-info-one {
    right: 12px !important;
    bottom: 58px !important;
    width: 134px !important;
    height: 201px !important;
  }
  html body main .hero .hero-info-one > small {
    left: -78px !important;
    padding: 0 8px !important;
  }
  html body main .hero .hero-info-one > small::after { width: 42px; }
  html body main .hero .hero-info-one > b { right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body main .hero .hero-info-one,
  html body main .hero .hero-info-one > small,
  html body main .hero .hero-info-one > b,
  html body main .hero .hero-info-one > span,
  html body main .hero .hero-info-one::before,
  html body main .hero .hero-info-one::after {
    animation: none !important;
  }
  html body main .hero .hero-info-one > small,
  html body main .hero .hero-info-one > b,
  html body main .hero .hero-info-one > span {
    opacity: 1 !important;
  }
}