/* ==========================================================================
   pp-glass.css — "Transparent Glass" interface layer
   Loaded LAST on the landing page (after pp-theme / pp-rtl / pp-polish).

   Goal: turn the whole landing page into ONE cohesive, genuinely
   TRANSPARENT frosted-glass surface. The trick is that glass only reads as
   glass when there is something colourful behind it — so this layer also
   paints a fixed, slowly drifting aurora behind the entire page and then
   makes every panel translucent over it.

   Brand stays intact: purple #aa56ff / #8756ff, dark base #0d121c.

   Layer order (bottom -> top):
     z -2  body::before  -> drifting aurora (fixed)
     z -1  body::after   -> faint technical grid (fixed)
     z  0+ sections      -> glass panels over the aurora
   ========================================================================== */

:root {
  /* ---- glass fills (translucent white over the aurora) ---- */
  --g-fill-1: linear-gradient(140deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  --g-fill-2: linear-gradient(140deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022));
  --g-fill-3: linear-gradient(140deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
  --g-solid-1: rgba(24, 32, 48, .42);
  --g-solid-2: rgba(20, 27, 41, .30);
  --g-solid-3: rgba(28, 37, 55, .55);

  /* ---- hairlines ---- */
  --g-brd: rgba(255, 255, 255, .16);
  --g-brd-soft: rgba(255, 255, 255, .10);
  --g-brd-hi: rgba(170, 86, 255, .40);

  /* ---- the two shadows that sell the glass ---- */
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .30),
          inset 0 -1px 0 rgba(0, 0, 0, .22);
  --g-shadow: 0 22px 60px rgba(0, 0, 0, .42);
  --g-shadow-lift: 0 30px 76px rgba(0, 0, 0, .5), 0 0 0 1px rgba(170, 86, 255, .12);

  /* ---- blur strength ---- */
  --g-blur: blur(22px) saturate(180%);
  --g-blur-soft: blur(14px) saturate(160%);
  --g-blur-strong: blur(30px) saturate(190%);
}

/* ======================================================================
   1. GLOBAL AMBIENT BACKGROUND
   A fixed aurora so every glass panel has real colour to refract.
   Animated via background-position (cheap, GPU-friendly, no layout cost).
   ====================================================================== */

body#outside {
  background-color: #0d121c !important;
}

body#outside::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 850px at 12% 6%,  rgba(170, 86, 255, .34), transparent 62%),
    radial-gradient(950px 780px at 88% 16%,  rgba(86, 116, 255, .26), transparent 64%),
    radial-gradient(1050px 880px at 78% 88%, rgba(135, 86, 255, .24), transparent 64%),
    radial-gradient(880px 720px at 20% 82%,  rgba(224, 198, 255, .16), transparent 66%),
    linear-gradient(180deg, #0b101a 0%, #101827 50%, #0b101a 100%);
  background-size: 150% 150%;
  animation: ppAmbient 44s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes ppAmbient {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* faint technical grid, faded at the edges */
body#outside::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image:
    linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 38%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 38%, #000 0%, transparent 78%);
}

/* fade the hero photo out at the bottom so it melts into the aurora
   instead of leaving a hard horizontal seam */
.homeHeader .homeBg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}

/* the hero keeps its own photo — let the aurora sit behind everything else */
.homeSection,
#home-diff,
.home-login,
.footer,
.bottom-bar {
  position: relative;
}

/* The hero overlay originally faded to an OPAQUE #151b26, which chopped the
   aurora off right below the hero. Fade to transparent instead so the whole
   page reads as one continuous glass scene. */
.homeHeader::after {
  background:
    radial-gradient(1000px 560px at 50% 0%, rgba(170, 86, 255, .26), transparent 68%),
    radial-gradient(760px 460px at 8% 88%, rgba(135, 86, 255, .18), transparent 70%),
    radial-gradient(700px 420px at 95% 20%, rgba(86, 116, 255, .14), transparent 72%),
    linear-gradient(180deg,
      rgba(13, 18, 28, .08) 0%,
      rgba(13, 18, 28, .42) 52%,
      rgba(13, 18, 28, .58) 82%,
      rgba(13, 18, 28, 0) 100%) !important;
}

/* ======================================================================
   2. SHARED GLASS TREATMENT
   One declaration, applied to every panel on the page, so the whole
   interface feels cut from the same sheet of glass.
   ====================================================================== */

.card,
.home-login .card,
.step-card,
.diff-card .diff-item,
.product-article,
.login-pm,
.country-item,
.recomm-wrapper .item,
.recomm-container,
.tab-content-area .tc-content,
.tab-content-area .tc-menu .nav,
#home-growth .growth-bg,
.hfs-content,
.faq-wrapper .faq-item,
.footer-card,
.pp-lang-menu {
  background: var(--g-fill-2) !important;
  background-color: var(--g-solid-2) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: var(--g-shadow), var(--g-hi) !important;
}

/* raised focal surfaces get a brighter fill */
.home-login .card,
.recomm-container,
#home-growth .growth-bg,
.footer-card {
  background: var(--g-fill-1) !important;
  background-color: var(--g-solid-1) !important;
  box-shadow: var(--g-shadow), var(--g-hi), 0 0 0 1px rgba(170, 86, 255, .10) !important;
}

/* ======================================================================
   3. NAVIGATION — a thin sheet of glass floating over the page
   ====================================================================== */

.header,
.header.is-sticky,
.header.sticky {
  background: rgba(13, 18, 28, .48) !important;
  backdrop-filter: var(--g-blur-strong) !important;
  -webkit-backdrop-filter: var(--g-blur-strong) !important;
  border-bottom: 1px solid var(--g-brd-soft) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
}
.header.is-sticky,
.header.sticky {
  background: rgba(13, 18, 28, .68) !important;
}

.header .mh-menu .menu > li > a {
  border-radius: 10px;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.header .mh-menu .menu > li > a:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}

/* secondary header buttons -> glass pills */
.header .btn-light,
.pp-lang-btn {
  background: var(--g-fill-2) !important;
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.header .btn-light:hover,
.pp-lang-btn:hover {
  background-color: rgba(255, 255, 255, .13) !important;
  border-color: var(--g-brd-hi) !important;
  transform: translateY(-1px);
}

/* language dropdown */
.pp-lang-menu {
  background: rgba(16, 22, 34, .72) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), var(--g-hi) !important;
}
.pp-lang-menu a { border-radius: 8px; }
.pp-lang-menu a:hover { background: rgba(170, 86, 255, .18) !important; color: #fff !important; }

/* ======================================================================
   4. HERO
   ====================================================================== */

/* the badge pill */
.home-rates-item {
  background: var(--g-fill-3) !important;
  background-color: rgba(28, 37, 55, .38) !important;
  border: 1px solid var(--g-brd-hi) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: 0 14px 36px rgba(170, 86, 255, .22), var(--g-hi) !important;
}

/* hero buttons: secondary = clear glass, primary keeps a vivid tint */
.nk-btn-group .header-btn {
  background: var(--g-fill-2) !important;
  background-color: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-shadow), var(--g-hi) !important;
}
.nk-btn-group .header-btn.h-btn-blue {
  background: linear-gradient(135deg, rgba(125, 92, 255, .92), rgba(170, 86, 255, .88)) !important;
  border-color: rgba(255, 255, 255, .26) !important;
  box-shadow: 0 16px 40px rgba(170, 86, 255, .38), var(--g-hi) !important;
}
.nk-btn-group .header-btn:hover {
  background-color: rgba(255, 255, 255, .14) !important;
  border-color: var(--g-brd-hi) !important;
  transform: translateY(-4px);
}

/* ======================================================================
   5. LOGIN CARD + FORM FIELDS
   ====================================================================== */

.home-login .card {
  border: 1px solid var(--g-brd-hi) !important;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(170, 86, 255, .10),
    var(--g-hi) !important;
}

.home-login .card .form-control,
.home-login .card .form-control:focus {
  background: rgba(255, 255, 255, .05) !important;
  background-color: rgba(10, 15, 24, .42) !important;
  border: 1px solid var(--g-brd-soft) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
  color: #fff !important;
  box-shadow: var(--g-hi) !important;
}
.home-login .card .form-control::placeholder { color: rgba(255, 255, 255, .55) !important; }
.home-login .card .form-control:focus {
  background-color: rgba(10, 15, 24, .6) !important;
  border-color: rgba(170, 86, 255, .65) !important;
  box-shadow: 0 0 0 4px rgba(170, 86, 255, .18), var(--g-hi) !important;
}

/* the primary submit button */
.home-login .card .btn-primary {
  background: linear-gradient(135deg, #8756ff, #aa56ff) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 16px 40px rgba(170, 86, 255, .38), var(--g-hi) !important;
}

/* google sign-in pill */
.google-login-wrap {
  background: var(--g-fill-3) !important;
  background-color: rgba(255, 255, 255, .09) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.google-login-wrap:hover {
  background-color: rgba(255, 255, 255, .16) !important;
  border-color: var(--g-brd-hi) !important;
  transform: translateY(-2px);
}

/* ======================================================================
   6. STATS STRIP
   ====================================================================== */

.hfs-content {
  padding: 26px 30px !important;
  border-radius: 24px !important;
}
.hfs-content .hfs-item .hfs-count {
  color: #fff !important;
  text-shadow: 0 6px 26px rgba(170, 86, 255, .4);
}
.hfs-content .btn-outline {
  background: var(--g-fill-2) !important;
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
  color: #fff !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.hfs-content .btn-outline:hover {
  background-color: rgba(170, 86, 255, .22) !important;
  border-color: var(--g-brd-hi) !important;
  transform: translateY(-2px);
}

/* ======================================================================
   7. "HOW IT WORKS" STEP CARDS
   ====================================================================== */

.step-card {
  border-radius: 25px !important;
}
.step-card .btn-primary {
  background: linear-gradient(135deg, rgba(135, 86, 255, .9), rgba(170, 86, 255, .85)) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: 0 12px 30px rgba(170, 86, 255, .32), var(--g-hi) !important;
}

/* ======================================================================
   8. RECOMMENDED SERVICES
   ====================================================================== */

.recomm-container {
  border-radius: 26px !important;
}
.recomm-container::before {
  background: rgba(170, 86, 255, .10) !important;
  filter: blur(2px);
}
.recomm-header {
  background: linear-gradient(135deg, rgba(135, 86, 255, .82), rgba(170, 86, 255, .7)) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
}
.recomm-wrapper .item {
  border-radius: 16px !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.recomm-wrapper .item:hover {
  background-color: rgba(255, 255, 255, .10) !important;
  border-color: var(--g-brd-hi) !important;
  transform: translateY(-3px);
}

/* ======================================================================
   9. FEATURES CAROUSEL — glass cards that keep a hint of their accent
   ====================================================================== */

.step-box-container .step-box {
  background: var(--g-fill-2) !important;
  background-color: var(--g-solid-2) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  box-shadow: var(--g-shadow), var(--g-hi) !important;
  border-radius: 18px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step-box-container .step-box:hover {
  transform: translateY(-6px);
  border-color: var(--g-brd-hi) !important;
  box-shadow: var(--g-shadow-lift), var(--g-hi) !important;
}
/* accent tint per card — placed at the TOP (behind the icon) so it never
   washes out the description text sitting at the bottom of the card. */
.step-box-container .step-box:nth-child(1) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(255, 122, 0, .38), transparent 62%) !important; }
.step-box-container .step-box:nth-child(2) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(198, 88, 255, .38), transparent 62%) !important; }
.step-box-container .step-box:nth-child(3) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(220, 53, 69, .36), transparent 62%) !important; }
.step-box-container .step-box:nth-child(4) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(40, 167, 69, .36), transparent 62%) !important; }
.step-box-container .step-box:nth-child(5) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(0, 123, 255, .36), transparent 62%) !important; }
.step-box-container .step-box:nth-child(6) { background-image: radial-gradient(150% 85% at 50% -25%, rgba(255, 193, 7, .36), transparent 62%) !important; }
/* keep the body copy crisp over any tint */
.step-box-container .step-box .text p {
  color: rgba(255, 255, 255, .88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.step-box-container .btn-step {
  background: var(--g-fill-3) !important;
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
}
.step-box-container .btn-step:not(:disabled):hover {
  background-color: rgba(170, 86, 255, .35) !important;
  border-color: var(--g-brd-hi) !important;
}

/* ======================================================================
   10. COMPARISON
   ====================================================================== */

.diff-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.diff-card .diff-item { border-radius: 22px !important; }
.diff-card .diff-item.diff-our {
  border: 1px solid var(--g-brd-hi) !important;
  box-shadow: var(--g-shadow-lift), var(--g-hi) !important;
}

/* ======================================================================
   11. "WHY US" TABS
   ====================================================================== */

.tab-content-area .tc-menu { border-right-color: var(--g-brd-soft) !important; }
.tab-content-area .tc-menu .nav {
  border-radius: 18px !important;
  gap: 6px !important;
}
.tab-content-area .tc-menu .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.tab-content-area .tc-menu .nav-link:hover {
  background: rgba(255, 255, 255, .07) !important;
  transform: translateX(-3px);
}
.tab-content-area .tc-menu .nav-link.active {
  background: var(--g-fill-3) !important;
  background-color: rgba(170, 86, 255, .26) !important;
  border: 1px solid var(--g-brd-hi) !important;
  box-shadow: 0 12px 30px rgba(170, 86, 255, .32), var(--g-hi) !important;
}
.tab-content-area .tc-content { border-radius: 22px !important; }

/* ======================================================================
   12. GROWTH PANEL
   ====================================================================== */

#home-growth .growth-bg { border-radius: 26px !important; }
#home-growth .growth-tag {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--g-brd-soft) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
#home-growth .growth-tag:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, .1) !important; }
#home-growth .growth-tag.active {
  background-color: rgba(170, 86, 255, .3) !important;
  border-color: var(--g-brd-hi) !important;
  box-shadow: 0 10px 26px rgba(170, 86, 255, .3), var(--g-hi) !important;
}
#home-growth .social-buttons button {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--g-brd-soft) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
}
#home-growth .social-buttons .active button {
  background-color: rgba(170, 86, 255, .32) !important;
  border-color: var(--g-brd-hi) !important;
}

/* ======================================================================
   13. COUNTRIES + PAYMENTS
   ====================================================================== */

.country-item {
  border-radius: 22px !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.country-item:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, .1) !important;
  border-color: var(--g-brd-hi) !important;
}
.country-flag { background: rgba(0, 0, 0, .28) !important; }

.login-pm {
  border-radius: 18px !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.login-pm:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, .1) !important;
  border-color: var(--g-brd-hi) !important;
}

/* ======================================================================
   14. SEO ARTICLE
   ====================================================================== */

.product-article { border-radius: 22px !important; }
.product-article-content h2 { color: #fff !important; }

/* ======================================================================
   15. FAQ
   ====================================================================== */

.faq-wrapper .faq-item {
  border-radius: 16px !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.faq-wrapper .faq-item:hover {
  background-color: rgba(255, 255, 255, .09) !important;
  border-color: var(--g-brd-hi) !important;
}
.faq-wrapper .faq-item.active {
  background: var(--g-fill-2) !important;
  background-color: rgba(255, 255, 255, .09) !important;
  border-color: var(--g-brd-hi) !important;
}
.faq-wrapper .faq-item .faq-content {
  background: transparent !important;
}

/* ======================================================================
   16. FOOTER, BOTTOM BAR, FLOATING BUTTON
   ====================================================================== */

.footer,
.footer.active {
  background: transparent !important;
}
.footer-card {
  border-radius: 18px !important;
  padding: 18px 20px !important;
}
.footer-card:hover { border-color: var(--g-brd-hi) !important; }

.bottom-bar {
  background: rgba(16, 22, 34, .6) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-strong) !important;
  -webkit-backdrop-filter: var(--g-blur-strong) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), var(--g-hi) !important;
}
.bottom-bar .bottom-item a { color: rgba(255, 255, 255, .82) !important; }

#scrollTopBtn {
  background: rgba(16, 22, 34, .55) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), var(--g-hi) !important;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
#scrollTopBtn:hover {
  transform: translateY(-3px);
  border-color: var(--g-brd-hi) !important;
  background-color: rgba(170, 86, 255, .28) !important;
}

/* ======================================================================
   17. SECTION HEADINGS ON GLASS
   Keep the titles crisp and legible over a translucent background.
   ====================================================================== */

.section-title_title,
.nk-section-title {
  text-shadow: 0 4px 26px rgba(0, 0, 0, .6);
}
.label.label-home {
  background: var(--g-fill-2) !important;
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--g-brd) !important;
  backdrop-filter: var(--g-blur-soft) !important;
  -webkit-backdrop-filter: var(--g-blur-soft) !important;
  box-shadow: var(--g-hi) !important;
}

/* ======================================================================
   18. HOVER LIFT — every glass surface responds the same way
   ====================================================================== */

.card,
.step-card,
.diff-card .diff-item,
.product-article,
.country-item,
.login-pm {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}
.card:hover,
.diff-card .diff-item:hover,
.product-article:hover {
  border-color: var(--g-brd-hi) !important;
  box-shadow: var(--g-shadow-lift), var(--g-hi) !important;
}

/* ======================================================================
   19. FALLBACK — no backdrop-filter (older engines)
   Swap the translucent fill for a solid-but-tinted surface so text stays
   perfectly readable. The layout and accents are unchanged.
   ====================================================================== */

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card,
  .home-login .card,
  .step-card,
  .diff-card .diff-item,
  .product-article,
  .login-pm,
  .country-item,
  .recomm-wrapper .item,
  .recomm-container,
  .tab-content-area .tc-content,
  .tab-content-area .tc-menu .nav,
  #home-growth .growth-bg,
  .hfs-content,
  .faq-wrapper .faq-item,
  .footer-card,
  .bottom-bar {
    background-color: rgba(20, 27, 41, .92) !important;
  }
  body#outside::before { background-color: #0d121c; }
}

/* ======================================================================
   20. RESPONSIVE — blur is fill-rate heavy on phones, so soften it
   ====================================================================== */

@media (max-width: 991.98px) {
  :root {
    --g-blur: blur(14px) saturate(160%);
    --g-blur-soft: blur(10px) saturate(150%);
    --g-blur-strong: blur(18px) saturate(170%);
  }
  body#outside::before { animation: none; }
  .country-item,
  .login-pm,
  .recomm-wrapper .item,
  .faq-wrapper .faq-item {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

@media (max-width: 575.98px) {
  body#outside::after { opacity: .035; }
  .step-box-container .step-box,
  .country-item,
  .login-pm { backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; }
}

/* ======================================================================
   21. REDUCED MOTION — keep the glass, drop the movement
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  body#outside::before { animation: none !important; }
  .card, .step-card, .diff-card .diff-item, .product-article,
  .country-item, .login-pm, .recomm-wrapper .item,
  #home-growth .growth-tag, .nk-btn-group .header-btn {
    transition: none !important;
  }
}