/* Hero: replace channel cards with a floating branded door tag */
.hero .hero-info-two {
  display: none !important;
}

.hero .hero-info-one {
  display: flex !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 20% !important;
  right: 4.5% !important;
  left: auto !important;
  width: clamp(150px, 15vw, 220px) !important;
  height: clamp(280px, 29vw, 420px) !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 98, 74, .8) !important;
  border-radius: 76px 76px 30px 30px !important;
  background:
    radial-gradient(circle at 50% 12%, transparent 0 37px, #111820 38px 58px, transparent 59px),
    linear-gradient(145deg, rgba(255,104,77,.96) 0 17%, #111820 17% 34%, #ff654b 34% 46%, #111820 46% 100%) !important;
  box-shadow: 0 26px 50px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.06), 0 0 34px rgba(255,92,66,.24) !important;
  transform: rotate(7deg) translate3d(0,0,0) !important;
  filter: blur(.25px) saturate(.92) !important;
  opacity: .82 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  animation: heroTagFloat 5.8s ease-in-out infinite !important;
}

.hero .hero-info-one > * {
  display: none !important;
}

.hero .hero-info-one::before {
  content: "ЗАЯВКИ\A ЗДЕСЬ" !important;
  white-space: pre !important;
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  top: 49% !important;
  color: #fff !important;
  font: 800 clamp(23px, 2.2vw, 34px)/.95 Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  text-align: left !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.38) !important;
}

.hero .hero-info-one::after {
  content: "PRO\A marketing" !important;
  white-space: pre !important;
  position: absolute !important;
  left: 12% !important;
  bottom: 10% !important;
  color: #fff !important;
  font: 700 clamp(14px, 1.35vw, 20px)/.82 Arial, sans-serif !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.42) !important;
}

@keyframes heroTagFloat {
  0%, 100% { transform: rotate(7deg) translate3d(0, 0, 0); }
  50% { transform: rotate(4deg) translate3d(-5px, -16px, 0); }
}

@media (max-width: 900px) {
  .hero .hero-info-one {
    top: auto !important;
    right: -24px !important;
    bottom: 8% !important;
    width: 132px !important;
    height: 244px !important;
    border-radius: 58px 58px 22px 22px !important;
    opacity: .48 !important;
    filter: blur(.55px) saturate(.8) !important;
  }

  .hero .hero-info-one::before {
    top: 50% !important;
    font-size: 20px !important;
  }

  .hero .hero-info-one::after {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-info-one { animation: none !important; }
}