/* === Стили для .social-proof === */
.social-proof {
  display: inline-block;
  position: relative;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff7e5f, #feb47b, #ff7e5f);
  background-size: 300% 300%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: default;
  /* пульс + анимация фона */
  animation:
    pulse 2.5s ease-in-out infinite,
    gradientBG 10s ease infinite;
  transition: transform .2s, box-shadow .2s;
}
.social-proof:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
/* glow-эффект фона через псевдоэлемент */
.social-proof::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(8px);
  opacity: .4;
  background: inherit;
  mix-blend-mode: screen;
  z-index: 0;
}

/* === Текст и смена числа каждую минуту === */
.social-proof::before {
  content: "👀 3 человека смотрят этот сайт";
  display: block;
  position: relative;
  z-index: 1;
  /* 5 значений, по 60 с каждый => цикл 300 с */
  animation:
    changeProof 300s steps(5) infinite,
    bounce     300s steps(5) infinite;
}

/* пульс всего блока */
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.03); }
}
/* анимация градиента фона */
@keyframes gradientBG {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
/* смена текста-числа */
@keyframes changeProof {
  0%   { content: "👀 3 человека смотрят этот сайт"; }
  20%  { content: "👀 4 человека смотрят этот сайт"; }
  40%  { content: "👀 5 человек смотрят этот сайт"; }
  60%  { content: "👀 6 человек смотрят этот сайт"; }
  80%  { content: "👀 7 человек смотрят этот сайт"; }
  100% { content: "👀 3 человека смотрят этот сайт"; }
}
/* подпрыгивание цифры при смене */
@keyframes bounce {
  0%,20%   { transform: translateY(0); }
  5%,15%   { transform: translateY(-4px); }
  25%,100% { transform: translateY(0); }
}