:root {
    --bp-primary: #4f46e5;
    --bp-secondary: #0284c7;
    --bp-teal: #0d9488;
    --bp-hero-grad:
        radial-gradient(circle at 12% 18%, rgba(56, 189, 248, 0.42) 0%, transparent 42%),
        radial-gradient(circle at 86% 20%, rgba(244, 114, 182, 0.30) 0%, transparent 40%),
        radial-gradient(circle at 72% 88%, rgba(52, 211, 153, 0.32) 0%, transparent 45%),
        linear-gradient(135deg, #312e81 0%, #4f46e5 38%, #0284c7 75%, #0d9488 100%);
    --bp-banner-grad:
        radial-gradient(circle at 15% 25%, rgba(56, 189, 248, 0.38) 0%, transparent 45%),
        radial-gradient(circle at 88% 75%, rgba(52, 211, 153, 0.32) 0%, transparent 45%),
        linear-gradient(135deg, #3730a3 0%, #2563eb 52%, #0d9488 100%);
    --bp-footer-grad:
        radial-gradient(circle at 90% 15%, rgba(20, 184, 166, 0.25) 0%, transparent 45%),
        linear-gradient(135deg, #1e3a8a 0%, #3730a3 48%, #0f766e 100%);
    --bp-page-bg-color: #eef2ff;
    --bp-page-bg-image:
        radial-gradient(at 0% 0%, rgba(129, 140, 248, 0.22) 0px, transparent 50%),
        radial-gradient(at 100% 10%, rgba(56, 189, 248, 0.22) 0px, transparent 50%),
        radial-gradient(at 88% 85%, rgba(52, 211, 153, 0.20) 0px, transparent 50%),
        radial-gradient(at 12% 90%, rgba(244, 114, 182, 0.14) 0px, transparent 50%),
        linear-gradient(135deg, #eef2ff 0%, #e0f2fe 48%, #ecfdf5 100%);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bp-page-bg-color);
    background-image: var(--bp-page-bg-image);
    background-attachment: fixed;
    color: #0f172a;
}

/* Public Navbar */
.bp-web-navbar {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(79, 70, 229, 0.14) !important;
    box-shadow: 0 4px 20px -8px rgba(37, 99, 235, 0.14);
}

.bp-brand-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #0284c7 60%, #0d9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bp-web-navbar .nav-link {
    color: #334155;
    border-radius: 0.5rem;
    padding: 0.45rem 0.9rem !important;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.bp-web-navbar .nav-link:hover,
.bp-web-navbar .nav-link.active {
    color: #4f46e5;
    background-color: rgba(79, 70, 229, 0.08);
}

/* Hero & Subpage Banner */
.web-hero {
    background: var(--bp-hero-grad);
    color: #fff;
    padding: 5.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.bp-page-banner {
    background: var(--bp-banner-grad);
    color: #fff;
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}

.bp-hero-card {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25) !important;
}

/* Colorful Section Surfaces (replacing plain white & light gray) */
.bp-section-indigo {
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.72) 0%, rgba(224, 242, 254, 0.78) 100%);
}

.bp-section-aqua {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.85) 0%, rgba(209, 250, 229, 0.72) 55%, rgba(238, 242, 255, 0.85) 100%);
}

.bp-section-lavender {
    background: linear-gradient(135deg, rgba(245, 243, 255, 0.88) 0%, rgba(252, 231, 243, 0.56) 50%, rgba(224, 242, 254, 0.82) 100%);
}

.bp-section-mint {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.86) 0%, rgba(224, 242, 254, 0.82) 55%, rgba(238, 242, 255, 0.86) 100%);
}

/* Glass Cards */
.bp-glass-card {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.16) !important;
    box-shadow: 0 12px 30px -12px rgba(79, 70, 229, 0.16);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.bp-glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px -12px rgba(14, 165, 233, 0.24);
    border-color: rgba(79, 70, 229, 0.34) !important;
}

.feature-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.pricing-card {
    border-radius: 1rem;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.25rem rgba(79, 70, 229, 0.18) !important;
}

.pricing-popular {
    border: 2px solid #4f46e5 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.96) 100%) !important;
    box-shadow: 0 18px 40px -14px rgba(79, 70, 229, 0.28) !important;
}

/* FAQ Accordion */
.bp-faq-accordion .accordion-item {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 0.85rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: 0 6px 18px -10px rgba(37, 99, 235, 0.15);
}

.bp-faq-accordion .accordion-button {
    background: transparent;
    color: #1e293b;
}

.bp-faq-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.08));
    color: #3730a3;
    box-shadow: none;
}

/* Colorful Footer (replacing plain dark/black footer) */
.bp-web-footer {
    background: var(--bp-footer-grad);
    color: #f8fafc;
}

.bp-web-footer .bp-footer-muted {
    color: rgba(226, 232, 240, 0.82);
}

.bp-web-footer .bp-footer-link {
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    transition: color 0.15s ease;
}

.bp-web-footer .bp-footer-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Auth Split Layout */
.bp-auth-showcase {
    background: var(--bp-hero-grad);
    color: #fff;
}

.bp-auth-panel {
    background-color: var(--bp-page-bg-color);
    background-image: var(--bp-page-bg-image);
}

.bp-auth-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px -15px rgba(79, 70, 229, 0.22);
    padding: 2rem;
}

/* User / Customer Portal */
.bp-user-navbar {
    background: linear-gradient(135deg, #4338ca 0%, #0284c7 62%, #0d9488 100%) !important;
}

.bp-user-body .card {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(99, 102, 241, 0.14);
    box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.16);
}

/* Standalone Error / Installer Pages */
.bp-standalone-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px -15px rgba(79, 70, 229, 0.2);
}