/* ==========================================================================
   CAPPS PURE LIGHT MODE — EXCLUSIVE BODY & MAIN CONTENT
   Palette: Base (#f8fafc), Surface (#ffffff), Border (#e2e8f0), Primary (#0284c7)
   Targeting: .capps-root, Hero, Feature Cards, Showcase, Forms, CTA & Footer
   Preserves: Header & Sidebar completely untouched (ZERO regression)
   ========================================================================== */

/* --- 1. Global Tokens & Light Base --- */
.capps-root {
    --capps-light-bg: #f8fafc;
    --capps-light-surface: #ffffff;
    --capps-light-card: #ffffff;
    --capps-light-border: #e2e8f0;
    --capps-light-border-soft: rgba(56, 189, 248, 0.3);
    --capps-text-primary: #0f172a;
    --capps-text-secondary: #475569;
    --capps-text-muted: #64748b;
    --capps-accent-cyan: #0284c7;
    --capps-accent-soft: rgba(2, 132, 199, 0.06);
    --capps-accent-blue: #0284c7;
    background-color: var(--capps-light-bg) !important;
    color: var(--capps-text-primary) !important;
}

    /* --- 2. Background Orbs --- */
    .capps-root .glow-backdrop {
        opacity: 0.4;
    }

    .capps-root .glow-orb--primary {
        background: radial-gradient(circle, rgba(125, 211, 252, 0.25) 0%, transparent 70%) !important;
    }

    .capps-root .glow-orb--cyan {
        background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%) !important;
    }

    /* --- 3. Hero Section & Interactive Tabs --- */
    .capps-root .hero {
        background: radial-gradient(ellipse at top, rgba(186, 230, 253, 0.25) 0%, transparent 70%) !important;
    }

    .capps-root .hero-content h1 {
        color: var(--capps-text-primary) !important;
        font-weight: 800 !important;
    }

    .capps-root .hero-subtitle {
        color: var(--capps-text-secondary) !important;
    }

    .capps-root .capps-badge--glass {
        background: #ffffff !important;
        border: 1px solid var(--capps-light-border) !important;
        color: var(--capps-accent-cyan) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    .capps-root .eyebrow--pulse {
        color: var(--capps-accent-cyan) !important;
    }

    /* Hero Tabs Pill Navigation */
    .capps-root .hero-tab {
        background: #ffffff !important;
        color: var(--capps-text-secondary) !important;
        border: 1px solid var(--capps-light-border) !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
    }

        .capps-root .hero-tab:hover {
            background: #f1f5f9 !important;
            color: var(--capps-text-primary) !important;
            border-color: var(--capps-light-border-soft) !important;
        }

        .capps-root .hero-tab.is-active {
            background: var(--capps-accent-soft) !important;
            color: var(--capps-accent-cyan) !important;
            border-color: var(--capps-accent-cyan) !important;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
        }

    /* Demo Credentials Box & Floating Info Card */
    .capps-root .hero-demo-account,
    .capps-root .glass-panel,
    .capps-root .hero-info-card {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid var(--capps-light-border) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
        border-radius: 16px !important;
    }

        .capps-root .hero-demo-account dd {
            color: var(--capps-accent-cyan) !important;
        }

    .capps-root .hero-info-card__title {
        color: var(--capps-text-primary) !important;
    }

    .capps-root .hero-info-card__desc {
        color: var(--capps-text-secondary) !important;
    }

    .capps-root .hero-info-card__badge {
        background: var(--capps-accent-soft) !important;
        color: var(--capps-accent-cyan) !important;
        border: 1px solid var(--capps-light-border-soft) !important;
    }

    /* --- 4. Browser Mockup Frames --- */
    .capps-root .browser-frame {
        background: #ffffff !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
        border-radius: 14px !important;
    }

    .capps-root .browser-top {
        background: #f1f5f9 !important;
        border-bottom: 1px solid var(--capps-light-border) !important;
    }

        .capps-root .browser-top span {
            background: #cbd5e1 !important;
        }

    /* --- 5. Feature & Performance Stat Cards --- */
    .capps-root .feature-card,
    .capps-root .stat-card {
        background: #ffffff !important;
        border: 1px solid var(--capps-light-border) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(8px) !important;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

        .capps-root .feature-card:hover,
        .capps-root .stat-card:hover {
            border-color: var(--capps-accent-cyan) !important;
            box-shadow: 0 8px 24px rgba(2, 132, 199, 0.1) !important;
            transform: translateY(-2px) !important;
        }

        .capps-root .feature-card h3,
        .capps-root .stat-card h3 {
            color: var(--capps-text-primary) !important;
            font-weight: 700 !important;
        }

        .capps-root .feature-card p,
        .capps-root .stat-card p {
            color: var(--capps-text-secondary) !important;
        }

    .capps-root .feature-icon {
        background: var(--capps-accent-soft) !important;
        color: var(--capps-accent-cyan) !important;
        border: 1px solid var(--capps-light-border-soft) !important;
        border-radius: 12px !important;
    }

    /* Featured Card Highlight */
    .capps-root .feature-card.featured {
        background: #ffffff !important;
        border: 1px solid var(--capps-accent-cyan) !important;
        box-shadow: 0 4px 20px rgba(2, 132, 199, 0.08) !important;
    }

    /* --- 6. Showcase & Trust Bar --- */
    .capps-root .trust-bar {
        background: #f1f5f9 !important;
        border-top: 1px solid var(--capps-light-border) !important;
        border-bottom: 1px solid var(--capps-light-border) !important;
    }

    .capps-root .trust-grid p,
    .capps-root .trust-item span {
        color: var(--capps-text-secondary) !important;
        font-weight: 500 !important;
    }

    .capps-root .showcase-text h3 {
      
    }

    .capps-root .showcase-text p {
        color: var(--capps-text-secondary) !important;
    }

    /* --- 7. Buttons & Form UI Elements --- */
    .capps-root .btn-primary,
    .capps-root .btn-shine {
        background: var(--capps-accent-blue) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2) !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }

        .capps-root .btn-primary:hover,
        .capps-root .btn-shine:hover {
            background: #0369a1 !important;
            color: #ffffff !important;
            transform: translateY(-1px) !important;
        }

    .capps-root .btn-secondary {
        background: #ffffff !important;
        color: var(--capps-text-primary) !important;
        border: 1px solid var(--capps-light-border) !important;
        border-radius: 999px !important;
        font-weight: 600 !important;
    }

        .capps-root .btn-secondary:hover {
            background: #f8fafc !important;
            border-color: var(--capps-accent-cyan) !important;
            color: var(--capps-accent-cyan) !important;
        }

    /* Lead Form Section */
    .capps-root .demo-section {
        background: var(--capps-light-bg) !important;
    }

    .capps-root .demo-form input {
        background: #ffffff !important;
        border: 1px solid var(--capps-light-border) !important;
        color: var(--capps-text-primary) !important;
        border-radius: 10px !important;
    }

        .capps-root .demo-form input:focus {
            border-color: var(--capps-accent-cyan) !important;
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
            outline: none !important;
        }

    .capps-root .demo-form label {
        color: var(--capps-text-primary) !important;
        font-weight: 600 !important;
    }

    /* Call to Action Container */
    .capps-root .cta-container {
        background: #ffffff !important;
        border: 1px solid var(--capps-light-border) !important;
        border-radius: 24px !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06) !important;
    }

    .capps-root .cta-content h2 {
        color: var(--capps-text-primary) !important;
    }

    .capps-root .cta-content p {
        color: var(--capps-text-secondary) !important;
    }

    .capps-root .cta-primary {
        background: var(--capps-accent-blue) !important;
        color: #ffffff !important;
    }

        .capps-root .cta-primary:hover {
            background: #0369a1 !important;
            color: #ffffff !important;
        }

/* --- 8. Footer Section Alignment --- */
#footer_div {
    background: #f1f5f9 !important;
    border-top: 1px solid var(--capps-light-border) !important;
}

    #footer_div .portages_footer_bloc_20 {
        color: var(--capps-text-primary) !important;
        font-weight: 700 !important;
    }

    #footer_div .portages_footer_bloc_14,
    #footer_div .portages_footer_bloc_5 a,
    #footer_div .portages_footer_bloc_16 a,
    #footer_div .portages_footer_bloc_16 span,
    #footer_div .portages_footer_bloc_2 p,
    #footer_div .portages_footer_bloc_13 a {
        color: var(--capps-text-secondary) !important;
    }

        #footer_div .portages_footer_bloc_14:hover,
        #footer_div .portages_footer_bloc_13 a:hover {
            color: var(--capps-accent-cyan) !important;
        }