/* ============================================================================
 * liquid-glass-chrome.css — стеклянный chrome сайта:
 * header / nav / footer / sticky-cta / .btn / .compare / .tg-mockup-wrap.
 * ============================================================================ */

/* ── Кнопки .btn — стеклянная подложка с акцентом ───────────────────── */
.btn {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.20),
    inset 0 -1px 0  rgba(0, 0, 0, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.22);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0   rgba(255, 255, 255, 0.30),
    inset 0 -1px 0  rgba(0, 0, 0, 0.20),
    0 10px 26px rgba(0, 0, 0, 0.28);
}

/* ── Header / nav: matte glass top bar ──────────────────────────────── */
header, nav.main-nav, .site-nav, .top-nav {
  background: rgba(14, 22, 33, 0.55) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.10));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Compare table ──────────────────────────────────────────────────── */
.compare {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 28px rgba(0, 0, 0, 0.24);
}

/* ── Sticky CTA ─────────────────────────────────────────────────────── */
.sticky-cta {
  background: rgba(14, 22, 33, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    inset 0  1px 0  rgba(255, 255, 255, 0.18),
    inset 0 -1px 0  rgba(0, 0, 0, 0.20),
    0 -4px 24px rgba(0, 0, 0, 0.30);
}