/* Волны вокруг вкладки "Лучше" на hosting.php. Вкладка прямоугольная, поэтому волны расходятся на одинаковое число пикселей со всех сторон */
.section_2.hosting_page .tabs__caption a[data-group="vip"] { position: relative; z-index: 1; }
.section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::before,
.section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::before {
  border: 2px solid rgba(0, 99, 206, .1);
  box-shadow: inset 0 0 8px 5px rgba(0, 99, 206, .8);
  animation: tabwave1 3s linear infinite;
}
.section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::after {
  border: 1px solid rgb(0, 99, 206);
  box-shadow: inset 0 0 6px 3px rgba(0, 99, 206, .8);
  animation: tabwave2 3s linear infinite;
}
@keyframes tabwave1 {
  0%, 50% { inset: 0;     opacity: 0; }
  60%     { inset: -5px;  opacity: .1; }
  70%     { inset: -10px; opacity: .25; }
  80%     { inset: -14px; opacity: .1; }
  100%    { inset: -18px; opacity: 0; }
}
@keyframes tabwave2 {
  0%   { inset: 0;     opacity: 0; }
  40%  { inset: -2px;  opacity: .05; }
  50%  { inset: -5px;  opacity: .1; }
  60%  { inset: -8px;  opacity: .3; }
  80%  { inset: -11px; opacity: .1; }
  100% { inset: -14px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::before,
  .section_2.hosting_page .tabs__caption a[data-group="vip"]:not(.active)::after { animation: none; }
}
/* Волна не должна расширять страницу: на узких экранах она обрезается краем экрана */
.section_2.hosting_page { overflow-x: hidden; overflow-x: clip; }