.vv-card{
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
  cursor: pointer;
}

.vv-card:hover{
  background: linear-gradient(135deg, #09B88F 0%, #079271 50%, #056B53 100%) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
  transform: translateY(-2px);
}

.vv-card:hover,
.vv-card:hover *{
  color: #ffffff !important;
}


/* Анимация градиента при наведении */


#rec1934612501 .tn-elem[data-elem-id="1771427171640"] .tn-atom{
  --accent: #056B53;   /* зелёный */
  --r: 140px;          /* радиус пятна */
  --soft: 100;          /* мягкость края 0–100 */

  position: relative;  /* нужно для overlay */
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}

/* Дубликат текста сверху */
#rec1934612501 .tn-elem[data-elem-id="1771427171640"] .tn-atom .spot-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  /* зелёный текст */
  color: transparent;
  -webkit-text-fill-color: transparent;

  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;

  /* маска-пятно */
  -webkit-mask-image: radial-gradient(
    circle var(--r) at var(--mx, -999px) var(--my, -999px),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(var(--soft) * 1%),
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    circle var(--r) at var(--mx, -999px) var(--my, -999px),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) calc(var(--soft) * 1%),
    rgba(0,0,0,0) 100%
  );

  opacity: 0;
  transition: opacity .18s cubic-bezier(.2,.8,.2,1);
}

/* включаем overlay только при наведении (JS добавляет класс) */
#rec1934612501 .tn-elem[data-elem-id="1771427171640"] .tn-atom.is-on .spot-overlay{
  opacity: 1;
}
#rec1934612501 .tn-elem[data-elem-id="1771427171640"] .tn-atom{
  cursor: default;
}
</style>

/* Анимация растущих чисел */

/* чтобы цифры не “прыгали” по ширине */
#rec1940239621 .tn-atom { font-variant-numeric: tabular-nums; }
</style>