:root {
    --primary: #0059d6;
    --primary-700: #003366;
    --muted: #6c757d;
    --bg: #ffffff;
    --text: #111827;
    --card-radius: 12px;
}

[data-theme="dark"] {
    --bg: #0b1220;
    --text: #e6eef8;
    --muted: #98a6bd
}

* {
    box-sizing: border-box
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding-top: 72px
}

/* NAVBAR */
.navbar {
    transition: background .25s, box-shadow .25s
}

.navbar.scrolled {
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(8, 22, 48, .08)
}

.navbar.scrolled .navbar-brand,
.navbar.scrolled .navbar-nav .nav-link,
.navbar.scrolled .theme-toggle {
    color: #000 !important;
}

[data-theme="dark"] .navbar {
    background: rgba(6, 10, 20, .6)
}

.logo svg {
    height: 40px
}

/* HERO */
.hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 70, 140, 0.45), rgba(0, 70, 140, 0.55));
}

.hero .container {
    position: relative;
    z-index: 2
}

/* Cards */
.card {
    border-radius: var(--card-radius)
}

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
    color: #fff;
    padding: 14px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(3, 37, 65, .18);
    text-decoration: none
}

/* Dark mode toggle */
.theme-toggle {
    cursor: pointer
}

/* Footer */
footer {
    padding: 32px 0;
    background: #07102a;
    color: #cbdaf6
}

/* Responsive tweaks */
@media (max-width:768px) {
    .hero {
        min-height: 60vh
    }

    .logo svg {
        height: 34px
    }
}

/* Small utilities */
.badge-soft {
    background: rgba(0, 89, 214, 0.08);
    color: var(--primary);
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 600
}

/* Plan ribbon */
.ribbon {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--primary);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600
}

/* Form styles */
.form-card {
    border-radius: 12px;
    padding: 20px
}