/* ============================================================
   Liquid Glass — RipplEffekt extensions
   Maps liquid-glass.css glass effects onto rippleffekt's re-*
   component classes. Load after liquid-glass.css.
   ============================================================ */

/* ── Light cards ─────────────────────────────────────────── */
.re-card,
.re-capab-item,
.re-audience-card,
.re-feat-item,
.re-roi-panel,
.re-sidebar-card,
.re-usecase {
    background: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-lg) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
    transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}

.re-card:hover,
.re-capab-item:hover,
.re-audience-card:hover,
.re-feat-item:hover,
.re-usecase:hover {
    box-shadow: var(--lg-shadow-medium), var(--lg-shadow-inset) !important;
    transform: translateY(-2px);
}

/* ── Dark glass cards (sidebar-dark variant) ─────────────── */
.re-sidebar-card--dark {
    background: rgba(15, 23, 42, 0.62) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: var(--lg-shadow-medium), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── Tinted / alternate sections ────────────────────────── */
.re-section--alt,
.re-section--tinted {
    background: rgba(238, 242, 248, 0.60) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

/* ── CTA banner — retain dark but add glass depth ───────── */
.re-cta-banner {
    position: relative;
    overflow: hidden;
}
.re-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
    z-index: 0;
}
.re-cta-banner > * { position: relative; z-index: 1; }

/* ── Prevent horizontal overflow from body::before orb animation ─ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ── Hero canvas visual wrapper ──────────────────── */
.re-hero__visual--canvas {
    position: relative;
}
#reHeroCanvas {
    display: block;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(29,133,200,0.25),
                0 28px 64px rgba(0,0,0,0.55),
                0 0 80px rgba(29,133,200,0.06);
    will-change: transform;
}

/* ── Nav / sticky header ─────────────────────────────────── */
.re-nav,
nav.re-nav,
header.re-nav {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--lg-glass-border-soft) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px -16px rgba(15,23,42,0.18) !important;
}

/* ── ROI / compare surfaces ─────────────────────────────── */
.re-roi-result,
.re-compare-table-wrap {
    background: var(--lg-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
            backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-saturate));
    border: 1px solid var(--lg-glass-border-soft) !important;
    border-radius: var(--lg-radius-lg) !important;
    box-shadow: var(--lg-shadow-soft), var(--lg-shadow-inset) !important;
}

/* ── Pricing / billing cards ─────────────────────────────── */
.re-billing-badge {
    -webkit-backdrop-filter: blur(8px) saturate(160%);
            backdrop-filter: blur(8px) saturate(160%);
}

/* ── Print: collapse glass ───────────────────────────────── */
@media print {
    .re-card, .re-capab-item, .re-audience-card, .re-feat-item,
    .re-roi-panel, .re-sidebar-card, .re-usecase, .re-roi-result,
    .re-compare-table-wrap {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* ── Reduced transparency ────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
    .re-card, .re-capab-item, .re-audience-card, .re-feat-item,
    .re-roi-panel, .re-sidebar-card, .re-usecase, .re-roi-result,
    .re-compare-table-wrap, .re-nav, nav.re-nav, header.re-nav {
        background-color: #ffffff !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
    }
}