:root {
    --sw-primary: #605DBA;
    --sw-primary-dark: #4d4aa2;
    --sw-primary-soft: #efeffb;
    --sw-ink: #1f2330;
    --sw-muted: #5f6678;
    --sw-border: #e8eaf2;
    --sw-bg: #f8f9fc;
}

body {
    color: var(--sw-ink);
    background: #fff;
    font-family: "Manrope", "Segoe UI", sans-serif;
    font-weight: 400;
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--sw-primary-dark);
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--sw-primary), #7b79d0);
}

.nav-link {
    font-weight: 500;
    color: #2c3243;
}

.nav-link.active,
.nav-link:hover {
    color: var(--sw-primary);
}

.btn-primary {
    background: var(--sw-primary);
    border-color: var(--sw-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--sw-primary-dark);
    border-color: var(--sw-primary-dark);
}

.btn-outline-primary {
    color: var(--sw-primary);
    border-color: var(--sw-primary);
}

.btn-outline-primary:hover {
    background: var(--sw-primary);
    border-color: var(--sw-primary);
}

.hero {
    background: radial-gradient(1200px 500px at 90% -10%, #e8e7fb 0, transparent 60%),
                radial-gradient(1000px 450px at -20% 10%, #f1f0fd 0, transparent 55%),
                linear-gradient(180deg, #ffffff, #fbfbff);
    padding: 4.5rem 0 3rem;
    border-bottom: 1px solid var(--sw-border);
}

.hero-badge {
    background: var(--sw-primary-soft);
    color: var(--sw-primary-dark);
    border: 1px solid #d8d8f8;
    font-weight: 600;
    letter-spacing: .2px;
}

.hero-card,
.feature-card,
.step-card,
.pricing-card,
.content-card {
    border: 1px solid var(--sw-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(31, 35, 48, .05);
}

.hero-list li {
    margin-bottom: .5rem;
    color: var(--sw-muted);
}

.section {
    padding: 4rem 0;
}

.section.alt {
    background: var(--sw-bg);
}

.kicker {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    color: var(--sw-primary);
    font-weight: 700;
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--sw-primary-soft);
    color: var(--sw-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
}

.feature-card,
.step-card,
.pricing-card {
    padding: 1.3rem;
    height: 100%;
}

.step-index {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sw-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.pricing-card.featured {
    border-color: var(--sw-primary);
    box-shadow: 0 18px 30px rgba(96, 93, 186, .17);
}

.pricing-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sw-primary-dark);
}

.muted {
    color: var(--sw-muted);
}

.page-hero {
    padding: 3.1rem 0 2.4rem;
    border-bottom: 1px solid var(--sw-border);
    background: #fff;
}

.site-footer {
    background: #fbfbfe;
    border-top: 1px solid var(--sw-border);
}

.site-footer a {
    color: #3b4254;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--sw-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: #b6b4ec;
    box-shadow: 0 0 0 .25rem rgba(96, 93, 186, .15);
}

.alert-success {
    border: 1px solid #bde8cc;
    background: #effcf3;
    color: #16512c;
}

@media (max-width: 991px) {
    .hero {
        padding-top: 3.5rem;
    }
}