:root {
    --primary: #223A64; /* bleu profond */
    --primary-600: #1C3158; /* bleu foncé */
    --text: #0f172a;
    --muted: #475569;
    --border: #e2e8f0;
    --radius: 16px
}

body {
    background: #f8fafc;
    color: var(--text)
}

.navbar {
    /*background: linear-gradient(90deg,var(--primary),var(--primary-600))*/
}

.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(2,6,23,.06)
}

.role-card {
    cursor: pointer;
    transition: .2s
}

    .role-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(2,6,23,.1)
    }

.role-badge {
    border-radius: 999px
}

.navbar-brand {
    font-weight: 700
}

.hero {
    background: linear-gradient(180deg,rgba(30,136,229,.08),transparent)
}

    .hero .card {
        border: none;
        box-shadow: none;
        background: transparent
    }

.btn-soft {
    background: #e3f2fd;
    border-color: #cfe4fb
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e3f2fd;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.phone-mock {
    border: 12px solid #000;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(2,6,23,.15)
}

.section {
    padding: 64px 0
}


.testi img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover
}

.badge-pill {
    border-radius: 999px
}