/* ═══════════════════════════════════════════════════════════════
   PROFIT SIM — тема «как в Telegram-магазине» (2026-08-13)

   Лендинг перекрашен под палитру Mini App: светлый фон, белые
   карточки, сине-фиолетовые градиентные кнопки, синие цены.
   Файл подключается ПОСЛЕ основных inline-стилей и переопределяет
   старую чёрно-жёлтую тему. Жёлтый остаётся только в логотипе,
   картинках и золотых звёздах отзывов.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tg-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --tg-violet: #667eea;
  --tg-violet-ink: #5563d6;
  --tg-blue: #1f7cf0;
  --tg-bg: #f1f3fa;
  --tg-border: #e6e9f4;
  --tg-ink: #111827;
  --shadow: 0 4px 24px rgba(90, 100, 180, 0.12);
  --shadow-lg: 0 8px 40px rgba(90, 100, 180, 0.18);
}

/* ─── HEADER ─── */
.header { background: #fff; border-bottom: 1px solid var(--tg-border); }
.logo-text { color: var(--tg-ink); }
.logo-text span {
  background: var(--tg-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.header-nav a { color: #4b5563; }
.header-nav a:hover { color: var(--tg-violet); background: rgba(102, 126, 234, 0.08); }
.lang-switch a { color: #9aa1b5; }
.lang-switch a:hover { color: var(--tg-ink); }
.lang-switch a.active { color: var(--tg-ink); border-bottom-color: var(--tg-violet); font-weight: 700; }
.header-cta { background: var(--tg-grad); color: #fff; }
.header-cta:hover { box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45); }

/* ─── MOBILE NAV ─── */
.mobile-nav { background: #fff; border-bottom: 1px solid var(--tg-border); }
.mobile-nav a { color: #6b7280; border: 1px solid var(--tg-border); background: #f6f7fc; }
.mobile-nav a:hover, .mobile-nav a:active {
  color: var(--tg-violet-ink);
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(102, 126, 234, 0.08);
}

/* ─── HERO ─── */
.hero { background: linear-gradient(180deg, #eef1fb 0%, #f7f8fd 70%, #ffffff 100%); }
.hero::before { background: radial-gradient(circle, rgba(102, 126, 234, 0.14) 0%, transparent 70%); }
.hero-badge { background: #fff; border: 1px solid rgba(102, 126, 234, 0.35); color: var(--tg-violet-ink); }
.hero-title { color: var(--tg-ink); }
.hero-title .accent {
  background: var(--tg-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle { color: #5b6472; }
.btn-primary { background: var(--tg-grad); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(102, 126, 234, 0.45); }
.btn-secondary { color: var(--tg-ink); border-color: #c9cfe6; background: #fff; }
.btn-secondary:hover { border-color: var(--tg-violet); background: #fff; }
.hero-stat-num { color: var(--tg-blue); }
.hero-stat-label { color: #8a90a5; }

/* Тигр-маскот в hero: прозрачный PNG над фиолетовым свечением,
   рядом плавают бейджи-плашки (вместо старого виджета стран) */
.hero-tiger-wrap {
  position: relative;
  width: min(380px, 100%);
  margin: 0 auto;
}
.hero-tiger-wrap::before {
  content: '';
  position: absolute;
  inset: 10% -6% 2%;
  background: radial-gradient(closest-side, rgba(102, 126, 234, 0.32), rgba(118, 75, 162, 0.14) 60%, transparent 78%);
  border-radius: 50%;
  filter: blur(4px);
}
.hero-tiger {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 40px rgba(90, 100, 180, 0.35));
}
@media (max-width: 900px) {
  /* Гибридный первый экран: тигр меньше и живёт в правом нижнем углу hero,
     кнопки и статистика слоем выше могут наезжать на него */
  .hero { position: relative; }
  .hero-inner > div:first-child { position: relative; z-index: 1; }
  .hero-visual {
    display: block !important;
    position: absolute;
    right: -26px;
    bottom: -4px;
    width: 205px;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .hero-tiger-wrap { width: 100%; }
  .hero-tiger-wrap::before { inset: 22% 4% 0; filter: blur(3px); }
  .hero-tiger { filter: drop-shadow(0 10px 22px rgba(90, 100, 180, 0.30)); }
  /* статистика уступает место тигру справа */
  .hero-stats { position: relative; z-index: 1; max-width: calc(100% - 130px); }
}
@media (max-width: 480px) {
  .hero-visual { width: 176px; right: -28px; }
  .hero-stats { max-width: calc(100% - 112px); gap: 14px 22px; }
}
@media (max-width: 340px) {
  .hero-visual { width: 158px; right: -30px; }
}
/* длинные тексты «… в Telegram-магазине» на узких экранах */
@media (max-width: 380px) {
  .hero-actions .btn-primary,
  .catalog-cta-row .btn-primary { font-size: 14px; padding: 14px 20px; }
}
@media (max-width: 340px) {
  .hero-actions .btn-primary,
  .catalog-cta-row .btn-primary { font-size: 13px; padding: 13px 15px; gap: 7px; }
}

/* Мини-тигры: аватар в плавающей кнопке и над финальным CTA */
.final-cta-tiger {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ─── TRUST BAR ─── */
.trust-bar { background: var(--tg-grad); }
.trust-item { color: #fff; }

/* ─── SECTIONS ─── */
.section-alt { background: var(--tg-bg); }
.section-tag { background: rgba(102, 126, 234, 0.12); color: var(--tg-violet-ink); }
.section-title { color: var(--tg-ink); }

/* ─── CATALOG ─── */
.country-card:hover { border-color: var(--tg-violet); }
.country-card-badge { background: var(--tg-grad); color: #fff; }
.pfs-chip { border-color: var(--tg-border); }
.pfs-chip.on { background: var(--tg-grad); border-color: transparent; color: #fff; }
.pfs-card { border-color: var(--tg-border); }
.pfs-card:hover { border-color: var(--tg-violet); }
.pfs-price { color: var(--tg-blue); }

/* ─── PRICE TABLE ─── */
.price-table thead th { background: #5f6ee0; color: #fff; }
.price-table tbody tr:hover { background: #f6f7fe; }
.price-table-wrap { border-color: var(--tg-border); }

/* ─── STEPS ─── */
.step { border-color: var(--tg-border); }
.step-num { background: var(--tg-grad); color: #fff; }

/* ─── WHY TELEGRAM (тёмная → белая) ─── */
.why-telegram { background: #fff; color: var(--tg-ink); }
.why-telegram .section-tag { background: rgba(102, 126, 234, 0.12); color: var(--tg-violet-ink); }
.why-telegram .section-title { color: var(--tg-ink); }
.why-telegram .section-subtitle { color: var(--gray); }
.why-card { background: var(--tg-bg); border: 1px solid var(--tg-border); }
.why-card:hover { border-color: rgba(102, 126, 234, 0.45); }
.why-title { color: var(--tg-ink); }
.why-text { color: var(--gray); }

/* ─── CASHBACK (чёрная → фиолетовый градиент) ─── */
.cashback-section { background: linear-gradient(135deg, #5d6fe0 0%, #7c5bc0 100%); }
.cashback-section .section-tag { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cashback-section .section-title { color: #fff; }
.cashback-section .section-subtitle { color: rgba(255, 255, 255, 0.78); }
.medal-card { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.16); }
.medal-card:hover { border-color: rgba(255, 255, 255, 0.4); }
.medal-card.active { border-color: #FFD600; background: rgba(255, 255, 255, 0.16); }
.medal-name { color: #fff; }
.medal-range { color: rgba(255, 255, 255, 0.65); }
.medal-cashback { color: #fff; }
.medal-cashback-label { color: rgba(255, 255, 255, 0.6); }
.cashback-note { color: rgba(255, 255, 255, 0.72); }
.cashback-note strong { color: #fff; }

/* ─── PAYMENT ─── */
.payment-card { border-color: var(--tg-border); }
.payment-card:hover { border-color: var(--tg-violet); }

/* ─── REVIEWS ─── */
.review-card { border-color: var(--tg-border); }
.review-stars { color: #f6b21b; } /* золотые звёзды — универсальный язык рейтинга */
.video-thumb { background: #dfe3f2; }
.video-thumb:hover { border-color: var(--tg-violet); }

/* ─── GUARANTEE ─── */
.guarantee-card { border-color: var(--tg-border); }

/* ─── FAQ ─── */
.faq-item { border-color: var(--tg-border); }
.faq-item.open { border-color: var(--tg-violet); }
.faq-item.open .faq-arrow { background: var(--tg-grad); color: #fff; }

/* ─── FINAL CTA (жёлтая → фиолетовый градиент) ─── */
.final-cta { background: var(--tg-grad); }
.final-cta-title { color: #fff; }
.final-cta-sub { color: rgba(255, 255, 255, 0.82); }
.btn-dark { background: #fff; color: var(--tg-violet-ink); }
.btn-dark:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
.final-cta-note { color: rgba(255, 255, 255, 0.72); }

/* ─── FOOTER (тёмный → светлый) ─── */
.footer { background: #eef0f8; color: #6b7280; }
.footer-brand-name { color: var(--tg-ink); }
.footer-brand-name span {
  background: var(--tg-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-col-title { color: var(--tg-ink); }
.footer-links a { color: #6b7280; }
.footer-links a:hover { color: var(--tg-violet-ink); }
.footer-bottom { border-top: 1px solid #d9dded; }
.footer-legal a { color: #9aa1b5; }
.footer-legal a:hover { color: var(--tg-ink); }

/* ─── FLOATING CTA ─── */
.float-cta .float-dot { background: #4ade80; }

/* ленты с горизонтальным скроллом (pfs-slider.js) */
@media (hover: hover) and (pointer: fine) {
  .mobile-nav { cursor: grab; }
}
.mobile-nav.pfs-dragging { cursor: grabbing; user-select: none; }
.float-cta {
  background: var(--tg-grad);
  color: #fff;
  box-shadow: 0 4px 28px rgba(102, 126, 234, 0.45);
  animation: pfs-cta-glow 2.8s ease-in-out infinite;
}
/* мягкое «дыхание» свечения — деликатный акцент на главные кнопки */
@keyframes pfs-cta-glow {
  0%, 100% { box-shadow: 0 4px 22px rgba(102, 126, 234, 0.35); }
  50% { box-shadow: 0 6px 36px rgba(118, 75, 162, 0.60); }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { animation: none; }
}

/* ─── SUPPORT BLOCK (жёлтый → светло-фиолетовый) ─── */
.support-block { background: linear-gradient(135deg, #f7f8ff 0%, #eef0fd 100%); border-color: #dfe3fa; }