:root {
    --bf-primary: #3b5bfd;
    --bf-primary-dark: #2a45c7;
    --bf-secondary: #6b7280;
    --bf-dark: #0f172a;
    --bf-bg: #f5f7fb;
    --bf-surface: #ffffff;
    --bf-radius: 1.2rem;
    --bf-shadow-soft: 0 4px 16px rgba(0,0,0,0.06);
    --bf-gradient-hero: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 45%, #ffffff 100%);
}

body {
    font-family: "Inter", sans-serif;
    background: var(--bf-bg);
    color: var(--bf-dark);
    overflow-x: hidden;
    transition: background 0.3s;
}

    /* Dark Mode */
    body[data-theme="dark"] {
        background: #020617;
        color: #e5e7eb;
    }

        body[data-theme="dark"] .navbar, body[data-theme="dark"] .card, body[data-theme="dark"] footer {
            background: #020617 !important;
            border-color: #1e293b;
        }

        body[data-theme="dark"] .nav-link, body[data-theme="dark"] .navbar-brand {
            color: #f8f9fa !important;
        }

/* Component Styles */
.navbar {
    background: #fff !important;
    box-shadow: var(--bf-shadow-soft);
    padding: 0.9rem 0;
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--bf-dark) !important;
}

    .navbar-brand i {
        color: var(--bf-primary);
    }

.header-hero {
    background: var(--bf-gradient-hero);
    padding: 6rem 0 5rem;
    border-radius: 0 0 60px 60px;
}

.section-heading {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-title {
    font-size: 2.1rem;
    font-weight: 800;
}

.section-subtitle {
    color: var(--bf-secondary);
    max-width: 550px;
    margin: 0 auto;
}

.card {
    border-radius: var(--bf-radius);
    box-shadow: var(--bf-shadow-soft);
    border: none;
    background: var(--bf-surface);
    overflow: hidden;
}

.theme-toggle {
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    padding: 0.3rem 0.8rem;
    background: transparent;
}

.sticky-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
}

footer {
    background: #0b1220;
    color: #cbd5e1;
    padding: 4rem 0 2rem;
}

.footer-link {
    color: #cbd5e1;
    text-decoration: none;
    transition: 0.2s;
}

    .footer-link:hover {
        color: #fff;
    }