/* ============================================================================
 * liquid-glass.css — Apple Liquid Glass (iOS 26 / Vision Pro), база
 *
 * Три слоя реального Liquid Glass:
 *   1) REFRACTION  → backdrop-filter: url(#liquid-glass-distortion)  (Chromium)
 *   2) BLUR + SAT  → классический backdrop blur+saturate              (все браузеры)
 *   3) SPECULAR    → асимметричный inset box-shadow rim-light          (везде)
 *
 * SVG-фильтр определён в index.html (<filter id="liquid-glass-distortion">).
 * Браузерная поддержка SVG-в-backdrop-filter:
 *   ✅ Chromium 76+ — полное преломление  ⚠️ Safari/Firefox — fallback (через @supports)
 *
 * Файлы пакета:
 *   liquid-glass.css            — токены + базовый glass-микс карточек
 *   liquid-glass-refraction.css — refraction через SVG + hover-усиление
 *   liquid-glass-chrome.css     — nav / header / footer / btn / sticky-cta / compare
 *   liquid-glass-effects.css    — featured / glow overlay / mobile / fallback
 * ============================================================================ */

/* ── Tokens — единая палитра стекла ──────────────────────────────────── */
:root {
  --lg-tint:           rgba(255, 255, 255, 0.06);
  --lg-tint-2:         rgba(255, 255, 255, 0.018);
  --lg-tint-hover:     rgba(255, 255, 255, 0.10);
  --lg-tint-hover-2:   rgba(255, 255, 255, 0.028);

  --lg-rim:            rgba(255, 255, 255, 0.10);
  --lg-rim-strong:     rgba(255, 255, 255, 0.18);

  --lg-shadow:         0 8px 32px rgba(0, 0, 0, 0.30);
  --lg-shadow-hover:   0 14px 44px rgba(0, 0, 0, 0.38);

  --lg-blur:           18px;
  --lg-blur-strong:    22px;
  --lg-saturate:       170%;
  --lg-saturate-h:     185%;
}

/* ── Базовый glass-микс — fallback для всех (rim-light как у Apple) ──── */
.feature-cat, .tariff, .sol-card, .step, .pain,
#honest article, .demo-accent, .mockup-hint-banner,
.tg-mockup, .stat, .preset-chip, .marquee-item,
.faq-item, .roi-cell, .glow-card, .card {
  background:
    linear-gradient(135deg, var(--lg-tint), var(--lg-tint-2))
    !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-rim);

  /* Apple-style specular: верхний rim + асимметричный bottom-right блик
     (паттерн kevinbism — даёт характерный "liquid" световой край) */
  box-shadow:
    inset 0  1px 0   rgba(255, 255, 255, 0.22),  /* top rim light */
    inset 1px 0 0    rgba(255, 255, 255, 0.06),  /* left rim light */
    inset -10px -8px 0 -11px rgba(255, 255, 255, 0.55),  /* bottom-right specular */
    inset 0 -9px 0 -8px      rgba(255, 255, 255, 0.45),  /* bottom specular bar  */
    inset 0 -1px 0   rgba(0, 0, 0, 0.18),                /* bottom shade */
    var(--lg-shadow);
}

/* ── Tg-mockup внешняя обёртка (внутренние msg НЕ трогаем) ──────────── */
.tg-mockup {
  background:
    linear-gradient(180deg, rgba(23, 33, 43, 0.78), rgba(14, 22, 33, 0.70))
    !important;
}