/* ============================================================
   SusuFlex — Liquid Glass button system
   Apple-style layered glass: blur + turbulence distortion
   (::before), specular inner edge (::after), springy scale.
   Requires the #glass-distortion SVG filter in the page DOM.
   Loaded LAST so it wins over light-theme-patch / flat-pages
   shadow kills (hence the !importants on shadows/background).
   ============================================================ */

.btn,
.hero-v2__cta-primary,
.hero-v2__cta-secondary,
.mobile-cta-btn,
.newsletter-form button,
.category-btn {
    position: relative;
    isolation: isolate;
    border-radius: 9999px !important;
    border: 1px solid transparent;
    background: transparent;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    text-decoration: none !important;
}

/* Glass pseudo-layers removed — clean solid/outline buttons (no blur/distortion blob) */
.btn::before, .hero-v2__cta-primary::before, .hero-v2__cta-secondary::before,
.mobile-cta-btn::before, .newsletter-form button::before, .category-btn::before,
.btn::after, .hero-v2__cta-primary::after, .hero-v2__cta-secondary::after,
.mobile-cta-btn::after, .newsletter-form button::after, .category-btn::after {
    content: none !important;
    display: none !important;
}

/* Clean hover: a whisper of lift, no scale/blob/glow */
.btn:hover,
.hero-v2__cta-primary:hover,
.hero-v2__cta-secondary:hover,
.mobile-cta-btn:hover,
.newsletter-form button:hover,
.category-btn:hover {
    transform: translateY(-1px);
}
.btn:active,
.hero-v2__cta-primary:active,
.hero-v2__cta-secondary:active,
.mobile-cta-btn:active,
.newsletter-form button:active,
.category-btn:active {
    transform: translateY(0);
}
.btn:focus-visible,
.hero-v2__cta-primary:focus-visible,
.hero-v2__cta-secondary:focus-visible,
.mobile-cta-btn:focus-visible,
.newsletter-form button:focus-visible,
.category-btn:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 3px;
}

/* ── Clean premium fills ── */
/* Primary: brand-blue gradient, white text */
.btn-primary,
.mobile-cta-btn,
.newsletter-form button {
    background: #2563EB !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.mobile-cta-btn:hover,
.newsletter-form button:hover {
    background: #1D4ED8 !important;
    box-shadow: none !important;
}
/* Hero primary: flat teal */
.hero-v2__cta-primary {
    background: #14B8A6 !important;
    color: #04221F !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.hero-v2__cta-primary:hover { background: #0D9488 !important; }
/* Solid white (on dark CTA bands) */
.btn-white {
    background: #ffffff !important;
    color: #1D4ED8 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.btn-white:hover { background: #EFF4FF !important; }
/* Outline (light bg): brand-blue ghost */
.btn-outline {
    background: transparent !important;
    color: #2563EB !important;
    border-color: #2563EB !important;
}
.btn-outline:hover { background: rgba(37, 99, 235, 0.08) !important; }
/* Outline on dark sections / hero secondary: white ghost */
.btn-outline-white,
.hero-v2__cta-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.btn-outline-white:hover,
.hero-v2__cta-secondary:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: #ffffff !important; }
.btn-outline-amber {
    background: transparent !important;
    color: #B45309 !important;
    border-color: #F59E0B !important;
}
.btn-outline-amber:hover { background: rgba(245, 158, 11, 0.10) !important; }
/* Category pills (coming-soon cards) */
.category-btn {
    background: rgba(37, 99, 235, 0.06) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}
.category-btn:hover { background: rgba(37, 99, 235, 0.12) !important; }
.category-btn.active { background: #2563EB !important; color: #ffffff !important; border-color: #2563EB !important; }
/* Homepage hero CTA: clean white ghost on the dark aurora */
.hero-weave__cta {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.hero-weave__cta:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: #ffffff !important; }
/* White / ghost buttons inside dark sections keep correct text colour */
.cta-section .btn-white { color: #1D4ED8 !important; }
.cta-section .btn-outline-white,
.footer .btn-outline-white { color: rgba(255, 255, 255, 0.95) !important; }

/* ── Fallbacks & accessibility ── */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
    .btn-primary, .mobile-cta-btn, .newsletter-form button { --lg-tint: rgba(37, 99, 235, 0.92); }
    .hero-v2__cta-primary { --lg-tint: rgba(45, 212, 191, 0.92); color: #04221F !important; }
    .btn-outline, .btn-white, .btn-outline-white, .hero-v2__cta-secondary, .category-btn { --lg-tint: rgba(255, 255, 255, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .hero-v2__cta-primary, .hero-v2__cta-secondary,
    .mobile-cta-btn, .newsletter-form button, .category-btn {
        transition: none !important;
    }
    .btn:hover, .hero-v2__cta-primary:hover, .hero-v2__cta-secondary:hover,
    .mobile-cta-btn:hover, .newsletter-form button:hover, .category-btn:hover {
        transform: none;
    }
}

/* ============================================================
   Fluid Glass cursor lens (js/fluid-lens.js)
   ============================================================ */
.fluid-lens {
    position: fixed;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* frosted fallback for non-Chromium engines */
    -webkit-backdrop-filter: blur(2.5px) saturate(1.25) brightness(1.04);
    backdrop-filter: blur(2.5px) saturate(1.25) brightness(1.04);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        inset 2px 2px 2px 0 rgba(255, 255, 255, 0.4),
        inset -1px -1px 2px 1px rgba(255, 255, 255, 0.28),
        0 14px 34px rgba(0, 0, 0, 0.18) !important;
}
.fluid-lens--refract {
    /* Chromium: true DOM refraction with chromatic rim */
    -webkit-backdrop-filter: url(#fluid-lens-filter) saturate(1.18);
    backdrop-filter: url(#fluid-lens-filter) saturate(1.18);
}
.fluid-lens--on {
    opacity: 1;
}
@media (pointer: coarse), (max-width: 1023px) {
    .fluid-lens { display: none !important; }
}

/* ============================================================
   GlassSurface (vanilla port of React Bits) — js/glass-surface.js
   ============================================================ */
.glass-surface {
    position: relative;
    overflow: hidden;
}
.glass-surface--svg {
    box-shadow:
        0 0 2px 1px rgba(0, 0, 0, 0.12) inset,
        0 0 10px 4px rgba(0, 0, 0, 0.08) inset,
        0 4px 16px rgba(17, 17, 26, 0.05),
        0 8px 24px rgba(17, 17, 26, 0.05),
        0 16px 56px rgba(17, 17, 26, 0.05) !important;
}
.glass-surface--fallback {
    background: rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Calculator scroll capsule: sticky glass pill gliding over the section */
.glass-scroll-pill {
    position: sticky;
    top: 16vh;
    z-index: 6;
    width: min(780px, 92vw);
    height: 150px;
    margin: 0 auto -150px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    pointer-events: none;
    color: #0F172A;
}
@media (max-width: 767px) {
    .glass-scroll-pill { display: none; }
}

/* ── Exit popup as glass panel (dark frost over the dimmed page) ── */
.exit-popup.glass-surface {
    background: rgba(2, 6, 23, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.exit-popup h3,
.exit-popup .exit-popup-icon {
    color: #F8FAFC !important;
}
.exit-popup p {
    color: rgba(255, 255, 255, 0.82) !important;
}
.exit-popup-close {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* the CTA keeps its blue glass — pinned at popup specificity so legacy
   popup button styles can't wash the words out */
.exit-popup .btn-primary {
    --lg-tint: rgba(37, 99, 235, 0.8);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}