/* ============================================================
   Sugar Rush KG — page-home.css (главная страница)
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 64px;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 340px; height: 340px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(255, 180, 94, .35) 0%, transparent 70%);
}
.hero::after {
  width: 420px; height: 420px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(63, 217, 182, .3) 0%, transparent 70%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--mint-soft);
  border: 2px solid var(--mint);
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
  color: #0f8a6d;
  margin-bottom: 18px;
}

.hero h1 {
  margin-bottom: 18px;
  background: linear-gradient(120deg, var(--pink-dark) 20%, var(--lilac) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  font-size: 1.12rem;
  color: var(--plum-light);
  font-weight: 700;
  margin-bottom: 26px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-stat {
  background: var(--surface);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  padding: 10px 18px;
  text-align: center;
  min-width: 96px;
}
.hero-stat b {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--pink-dark);
}
.hero-stat span {
  font-size: .8rem;
  font-weight: 700;
  color: var(--plum-light);
}

.hero-img {
  position: relative;
}
.hero-img img {
  border-radius: var(--radius-l);
  border: 6px solid #fff;
  box-shadow: 0 24px 50px rgba(163, 74, 140, .28);
  transform: rotate(1.5deg);
  transition: transform .35s ease;
}
.hero-img:hover img { transform: rotate(0deg) scale(1.02); }

/* Плавающие конфеты-декор */
.candy-float {
  position: absolute;
  font-size: 2rem;
  filter: drop-shadow(0 6px 10px rgba(163, 74, 140, .25));
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.candy-1 { top: 8%; right: 6%; animation-delay: 0s; }
.candy-2 { bottom: 12%; left: 4%; animation-delay: 1.4s; }
.candy-3 { top: 46%; right: 44%; font-size: 1.5rem; animation-delay: 2.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

/* ---------- Статья ---------- */
.article-short {
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 3.2vw, 38px);
  margin: 20px 0;
}

/* Плашка-выделение RTP и пр. */
.hl {
  background: linear-gradient(120deg, var(--caramel-soft), var(--pink-soft));
  border-radius: 6px;
  padding: 0 .3em;
  font-weight: 800;
}

/* Нумерованные шаги */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.4em 0 1.8em;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 18px 16px 66px;
  margin-bottom: 12px;
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pink), var(--lilac));
  color: #fff;
  font-weight: 900;
  border-radius: 50%;
}

/* Заключение */
.final-box {
  background: linear-gradient(135deg, var(--lilac-soft) 0%, var(--mint-soft) 100%);
  border-radius: var(--radius-l);
  padding: clamp(22px, 3.2vw, 38px);
  margin-top: 24px;
  border: 2px solid var(--lilac);
}
.final-box h2 {
  border-left-color: var(--lilac);
  margin-top: 0;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding: 36px 0 48px; }
  .hero-img { max-width: 560px; margin: 0 auto; }
  .candy-3 { display: none; }
}

@media (max-width: 560px) {
  .hero-buttons .btn { width: 100%; max-width: 340px; }
  .hero-stat { flex: 1 1 28%; }
}

/* ---------- Несложные тематические анимации ---------- */

/* Дополнительные конфеты в hero */
.candy-4 { top: 18%; left: 38%; animation: float 6s ease-in-out infinite; animation-delay: 1s; }
.candy-5 { bottom: 8%; right: 8%; animation: drift 7s ease-in-out infinite; }
.candy-6 { top: 60%; left: 3%; animation: spin-float 9s linear infinite; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-14px, -10px) rotate(-12deg); }
  50% { transform: translate(8px, -20px) rotate(10deg); }
  75% { transform: translate(-6px, -8px) rotate(-6deg); }
}

@keyframes spin-float {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg) translateY(-12px); }
}

/* Мягкая «пульсация» рамки фото в hero */
.hero-img img {
  animation: hero-glow 4s ease-in-out infinite;
}
@keyframes hero-glow {
  0%, 100% { box-shadow: 0 24px 50px rgba(163, 74, 140, .28); }
  50% { box-shadow: 0 24px 60px rgba(255, 95, 162, .45); }
}

/* Твирляющий заголовок: моргающая метка-звезда */
h2 { position: relative; }
h2::after {
  content: "✦";
  position: absolute;
  left: .25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pink);
  font-size: .6em;
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes twinkle {
  0%, 100% { opacity: .35; transform: translateY(-50%) scale(.8); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
}

/* Живые пункты cta-box: пульс рамки */
.cta-box {
  animation: cta-pulse 3.2s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { border-color: var(--pink); }
  50% { border-color: var(--lilac); }
}

/* Лёгкое покачивание у изображений галереи при наведении */
.gallery img:hover { animation: wiggle .6s ease; }
@keyframes wiggle {
  0%, 100% { transform: translateY(-6px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}

/* Иконки эмодзи в cta-блоках — мягкий bounce */
.faq-item h3, .cta-box p { display: flex; align-items: center; gap: .4em; }

/* Уважение к users без анимаций */
@media (prefers-reduced-motion: reduce) {
  .candy-float,
  .hero-img img,
  .cta-box,
  h2::after { animation: none !important; }
}

/* ---------- Блок спонсор/провайдер в тексте ---------- */
.brand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 1.6em 0 1.8em;
  padding: 24px 24px 28px;
  background: linear-gradient(135deg, var(--mint-soft) 0%, var(--lilac-soft) 50%, var(--pink-soft) 100%);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}
.brand-logo {
  height: 60px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 6px 12px rgba(163, 74, 140, .25));
  animation: brand-float 4s ease-in-out infinite;
  transition: transform .3s ease, filter .3s ease;
}
.brand-logo:hover {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 10px 18px rgba(163, 74, 140, .4));
}
.brand-logo-2 { animation-delay: .6s; }
.brand-logo-3 { animation-delay: 1.2s; }
@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.brand-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 640px) {
  .brand-logo { height: 46px; }
  .brand-buttons .btn { width: 100%; max-width: 340px; }
}

/* ---------- Ещё больше тематических конфет в hero ---------- */
.candy-7 { top: 4%; left: 10%; font-size: 1.8rem; animation: drift 6.5s ease-in-out infinite; }
.candy-8 { top: 12%; right: 24%; font-size: 1.6rem; animation: float 5.5s ease-in-out infinite; animation-delay: .8s; }
.candy-9 { bottom: 20%; right: 30%; font-size: 1.5rem; animation: spin-float 8s linear infinite; }
.candy-10 { top: 34%; left: 26%; font-size: 1.5rem; animation: drift 7.5s ease-in-out infinite; animation-delay: 2s; }
.candy-11 { bottom: 4%; left: 46%; font-size: 1.7rem; animation: float 6s ease-in-out infinite; animation-delay: 1.6s; }
.candy-12 { top: 70%; right: 4%; font-size: 1.6rem; animation: spin-float 10s linear infinite; animation-delay: 1.2s; }

@media (max-width: 900px) {
  .candy-7, .candy-9, .candy-11 { display: none; }
}

/* ---------- Ненавязчивая символика Кыргызстана ---------- */
.cta-box--kg {
  position: relative;
  overflow: hidden;
}
.kg-map {
  position: absolute;
  right: 10px;
  bottom: 8px;
  height: 90%;
  width: auto;
  max-height: 120px;
  color: var(--lilac);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}
.cta-box--kg p,
.cta-box--kg .btn {
  position: relative;
  z-index: 1;
}
.kg-flag {
  font-size: 1.05em;
}
@media (max-width: 560px) {
  .kg-map { right: -20px; opacity: .12; }
}

/* Гео-заметка для кыргызских игроков */
.geo-note {
  padding: 10px 16px;
  border-left: 4px solid var(--mint);
  border-radius: 8px;
  background: linear-gradient(120deg, var(--mint-soft), transparent 70%);
  font-size: .98rem;
  color: var(--plum-light);
}