/* ===== RB HERO (CLEAN + COMMENTS RU) ===== */

.rbt-hero{ width:100%; }

/* ФОН ВСЕГО БЛОКА (теперь управляется через CSS-переменные из head.php) */
.rbt-hero__bg{
  width:100%;
  color:#fff;                 /* Цвет текста слева (заголовок/описание) */
  border-radius:22px;
  padding:30px;
  overflow:hidden;

  /* Фон блока (градиенты) — можно менять из config.php через переменные:
     --rbt-hero-grad-1, --rbt-hero-grad-2, --rbt-hero-grad-a/b/c
     Фолбэки оставлены, так что ничего не сломается */
  background:
    radial-gradient(1200px 500px at 10% 0%, var(--rbt-hero-grad-1, rgba(255,255,255,.16)), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, var(--rbt-hero-grad-2, rgba(255,255,255,.10)), transparent 55%),
    linear-gradient(135deg,
      var(--rbt-hero-grad-a, #4a68bb) 0%,
      var(--rbt-hero-grad-b, #3a58a6) 55%,
      var(--rbt-hero-grad-c, #2c3c86) 100%
    );
}

/* СЕТКА */
.rbt-hero__grid{
  width:100%;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.rbt-hero__text{ min-width:0; }
.rbt-hero__card-col{ min-width:0; }

/* ТЕКСТ СЛЕВА */
.rbt-hero__title{
  margin:0 0 10px;
  font-size:36px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:#fff; /* Цвет заголовка */
}

.rbt-hero__desc{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#fff; /* Цвет описания */
  opacity:.9;
}

/* ===== ДЕСКТОП: 65/35 ===== */
@media (min-width: 769px){
  .rbt-hero__text{ flex: 0 0 65%; }
  .rbt-hero__card-col{
    flex: 0 0 35%;
    display:flex;
    justify-content:flex-end;
  }

  /* Ограничение максимальной ширины карточки на больших экранах */
  .rbt-card{ max-width: 420px; }
}

/* ===== КАРТОЧКА (справа) ===== */
.rbt-card{
  width:100%;
  position:relative;
  padding:18px 16px 16px;
  text-align:center;
  border-radius:20px;
  transform: translateZ(0);
  transition: transform .35s ease; /* Скорость подъёма карточки */
}

.rbt-card:hover{ transform: translateY(-3px); }

/* ФОН КАРТОЧКИ (glass) — управляется через:
   --rbt-card-bg, --rbt-card-border */
.rbt-card__bg{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:calc(100% - 24px);
  z-index:0;

  background: var(--rbt-card-bg, rgba(255,255,255,.78));     /* Цвет фона карточки */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius:18px;
  border: 1px solid var(--rbt-card-border, rgb(113,65,234)); /* Цвет рамки карточки */
  box-shadow: 0 18px 55px rgba(9,25,42,.30);
}

/* БЕЙДЖ — управляется через:
   --rbt-badge-bg, --rbt-badge-text */
.rbt-card__badge{
  position:relative;
  z-index:2;
  display:inline-block;

  margin-bottom:12px;
  padding:12px 20px;          /* было примерно 6/10 — стало x2 */
  border-radius:999px;

  background: var(--rbt-badge-bg, rgba(89,61,144,.95)); /* Цвет бейджа */
  color: var(--rbt-badge-text, #f7f5f9);                /* Цвет текста бейджа */

  font-weight:900;
  font-size:17px;             /* было 12 — стало 24 */
  line-height:1;

  box-shadow: 0 10px 22px rgba(89,61,144,.25);
}

/* КРУГ ПОД ИКОНКУ (оставил как было, если надо — тоже вынесем в переменные) */
.rbt-card__icon{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  margin:0 auto;

  background: rgba(240,240,240,.95); /* Цвет круга */
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(19,26,38,.10);
  box-shadow: 0 10px 24px rgba(9,25,42,.14);
}

/* АНИМАЦИЯ ТОЛЬКО КАРТИНКИ */
@keyframes rbtGift{
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-4px) scale(1.10); }
  100% { transform: translateY(0) scale(1); }
}

.rbt-card__icon img{
  max-width:100%;
  height:auto;
  display:block;

  animation: rbtGift 3.6s ease-in-out infinite; /* Скорость анимации подарка */
  will-change: transform;
}

/* ТЕКСТ В КАРТОЧКЕ — управляется через:
   --rbt-card-text */
.rbt-card__text{
  position:relative;
  z-index:2;
  margin-top:12px;

  font-weight:800;
  color: var(--rbt-card-text, #101726);   /* Цвет текста в карточке */
  font-size:15px;
  line-height:1.25;
}

/* КНОПКА — управляется через:
   --rbt-btn-text, --rbt-btn-grad-a, --rbt-btn-grad-b */
.rbt-card__btn{
  position:relative;
  z-index:2;
  margin-top:12px;

  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:12px;

  color: var(--rbt-btn-text, #f7f5f9); /* Цвет текста кнопки */
  text-decoration:none;
  font-weight:800;

  overflow:hidden;

  background: linear-gradient(135deg,
    var(--rbt-btn-grad-a, #593d90) 0%,
    var(--rbt-btn-grad-b, #6d4bb3) 100%
  );
  box-shadow: 0 14px 26px rgba(89,61,144,.25);

  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease; /* Скорость hover */
}

.rbt-card__btn:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(89,61,144,.32);
}

.rbt-card__btn:active{ transform: translateY(0); }

/* Блик на кнопке (оставил как было) */
.rbt-card__btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  transform: rotate(18deg);

  background: rgba(255,255,255,.22); /* Цвет блика */
  transition: left .75s ease;        /* Скорость блика */
}

.rbt-card__btn:hover::after{ left:130%; }

/* Подпись под кнопкой — управляется через:
   --rbt-note-text */
.rbt-card__note{
  position:relative;
  z-index:2;
  margin-top:8px;

  font-size:12px;
  opacity:.65;
  color: var(--rbt-note-text, #131a26); /* Цвет подписи */
}

/* ===== МОБИЛКА: текст сверху, карточка снизу, карточка НЕ узкая ===== */
@media (max-width:768px){
  .rbt-hero__bg{ padding:18px; border-radius:18px; }

  .rbt-hero__grid{
    flex-direction:column;
    text-align:center;
  }

  .rbt-hero__title{ font-size:28px; }

  .rbt-hero__card-col{
    width:100%;
    display:block;
  }

  .rbt-card{
    max-width:none;  /* важно: убрали стягивание */
    width:100%;
    margin:0;
  }
}

/* Уважение к настройке "уменьшить анимацию" */
@media (prefers-reduced-motion: reduce){
  .rbt-card, .rbt-card__btn{ transition:none; }
  .rbt-card__icon img{ animation:none; }
}

.rbt-card__btn:hover{
  color: var(--rbt-btn-text, #f7f5f9); /* фиксируем цвет текста */
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(89,61,144,.32);
}