/* =====================================================================
   A1Topup "selective glass" design layer (v46, whole website; forms unchanged) - fully optional, in its own file.
   Glass only where it reads well: on the purple gradient (hero, final CTA) and on light-purple
   sections that get soft colour orbs behind the cards. White sections and the CRM are unchanged.
   Remove: delete this file and the one line that loads it in views/common/head_assets.php.
   ===================================================================== */
:root { --gl-w: rgba(255,255,255,.12); --gl-w2: rgba(255,255,255,.18); --gl-line: rgba(255,255,255,.28); --gl-blur: 16px;
        --gl-card: rgba(255,255,255,.62); --gl-card-line: rgba(255,255,255,.85); --gl-shadow: 0 24px 48px -28px rgba(58,22,101,.45); }

/* ---------- 1. On the purple gradient (hero + final CTA) ---------- */
.hm-hero .hm-chip--glass, .hm-hero .hm-btn--ghost, .hm-final .hm-btn--ghost {
  background: var(--gl-w); border: 1px solid var(--gl-line); -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(140%); backdrop-filter: blur(var(--gl-blur)) saturate(140%); }
.hm-hero .hm-btn--ghost:hover, .hm-final .hm-btn--ghost:hover { background: var(--gl-w2); }
.hm-hero .hm-float, .hm-hero .hv-card {
  background: rgba(36,18,63,.52); color: #fff; border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 40px -18px rgba(10,0,30,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.hm-hero .hv-card b { color: #fff; } .hm-hero .hv-card small { color: rgba(255,255,255,.8); }
.hm-hero .hm-float b { color: #fff; } .hm-hero .hm-float small { color: rgba(255,255,255,.78); }
.hm-hero .hm-float .hm-ico { background: rgba(255,255,255,.92); color: #6b2597; }
.hm-hero .hm-mock { box-shadow: 0 40px 80px -30px rgba(10,0,30,.7), 0 0 0 1px rgba(255,255,255,.25); }
.hm-final .pg-trust__item, .hm-final .pg-trust__badge {
  background: var(--gl-w); border: 1px solid var(--gl-line); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- 2. Light-purple sections: soft colour orbs + frosted cards ---------- */
.hm-sec--alt { position: relative; overflow: hidden; isolation: isolate; }
.hm-sec--alt::before, .hm-sec--alt::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.hm-sec--alt::before { width: 520px; height: 520px; right: -140px; top: -160px; background: radial-gradient(closest-side, rgba(155,79,198,.22), transparent); }
.hm-sec--alt::after  { width: 440px; height: 440px; left: -160px; bottom: -180px; background: radial-gradient(closest-side, rgba(255,159,46,.18), transparent); }
.hm-sec--alt :is(.hm-card, .hm-plan, .hm-feat, .hm-aud, .pf-card, .ag-card, .hm-faq details) {
  background: var(--gl-card); border: 1px solid var(--gl-card-line); box-shadow: var(--gl-shadow), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.hm-sec--alt .hm-plan--hot, .hm-sec--alt .hm-plan.is-featured { background: rgba(255,255,255,.8); border: 2px solid #8637af; }

@media (max-width: 600px) {   /* phones: lighter blur keeps scrolling smooth */
  .hm-sec--alt :is(.hm-card, .hm-plan, .hm-feat, .hm-aud, .pf-card, .ag-card, .hm-faq details) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.82); }
}
@media (prefers-reduced-transparency: reduce) {
  .hm-hero .hm-float, .hm-hero .hv-card { background: rgba(58,22,101,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hm-sec--alt :is(.hm-card, .hm-plan, .hm-feat, .hm-aud, .pf-card, .ag-card, .hm-faq details) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}