:root {
    --brand: #007ec7; /* CRMTop orange */
    --primary-ink: #0f2b46; /* deep navy */
    --muted: #6b7a8c;
    --accent: #2a72ff; /* blue for charts */
}

body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color: var(--primary-ink)
}

.brand {
    color: var(--brand)
}

.hero {
    padding-top: 3rem;
    padding-bottom: 16px;
}

.lead {
    color: var(--muted)
}

.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.badge-dot .dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--brand)
}

.cta-bar {
    background: var(--brand);
    color: #fff
}

.cta-bar .btn {
    background: #fff;
    color: var(--brand);
    border: none
}

.device-illustration {
    max-width: 520px
}

.feature i {
    color: var(--brand)
}

.shadow-soft {
    box-shadow: 0 10px 30px rgba(15,43,70,.08)
}

.nav-link {
    color: var(--primary-ink)
}

.nav-link:hover {
    color: var(--brand)
}

.logo-text {
    font-weight: 800;
    font-size: 1.5rem;
}

.section {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.row > * {
    margin-top: 20px;
}

.btn {
    /*line-height: 1.2;*/
}

#alert,
#alert-failure,
#alert-success {
    position: fixed;
    top: 50px;
    left: calc((100vw - 680px) /2);
    width: 680px;
    z-index: 9999;
    text-align: center;
}

@media (max-width: 768px) {
    #alert,
    #alert-failure,
    #alert-success {
        left: calc((100vw - 480px) /2);
        width: 580px;
    }
}

@media (max-width: 576px) {
    #alert,
    #alert-failure,
    #alert-success {
        left: calc((100vw - 380px) /2);
        width: 380px;
    }
}

.notfound-container {
    max-width: 600px;
    margin: 80px auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 50px 30px;
    text-align: center;
}

.notfound-title {
    font-size: 100px;
    font-weight: 800;
    color: #007ec7;
    line-height: 1;
}

.btn-primary {
    background-color: #007ec7;
    border-color: #007ec7;
    height: 38px;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: #0068a4;
    border-color: #0068a4;
}

.error-container {
    max-width: 650px;
    margin: 80px auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 50px 30px;
    text-align: center;
}