:root {
            --jl-blue: #2979FF;
            /* Primary */
            --jl-aqua: #00CFFF;
            /* Accent */
            --jl-dark: #0B1030;
            /* Deep navy text */
            --jl-body: #0f141f;
            /* Page bg */
            --jl-ink: #0b1a33;
            /* Card ink */
            --jl-muted: #5a6a86;
            --jl-surface: #ffffff;
            --jl-soft: #edf4ff;
            /* soft blue surface */
            --jl-soft-2: #f4f8ff;
            /* page section */
            --shadow: 0 10px 30px rgba(16, 42, 112, .08);
            --radius: 18px;
        }

        body {
            background: #fff;
            color: var(--jl-dark);
            font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif
        }

        .nav-link {
            color: #1b2a4a
        }

        .btn-primary {
            --bs-btn-bg: var(--jl-blue);
            --bs-btn-border-color: var(--jl-blue);
            --bs-btn-hover-bg: #1f66db;
            --bs-btn-hover-border-color: #1f66db
        }

        .btn-outline-primary {
            --bs-btn-color: var(--jl-blue);
            --bs-btn-border-color: var(--jl-blue);
            --bs-btn-hover-bg: var(--jl-blue);
            --bs-btn-hover-border-color: var(--jl-blue);
            --bs-btn-hover-color: #fff
        }

        .hero {
            padding-block: 72px
        }

        .hero h1 {
            font-weight: 900;
            letter-spacing: -0.8px;
            line-height: 1.03
        }

        .lead {
            color: #304161
        }

        .step {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: .75rem;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: #304161
        }

        .step .num {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: #e6f0ff;
            color: #2b4bb8;
            display: grid;
            place-items: center;
            font-weight: 700
        }

        /* Right column app-panel */
        .app-panel {
            background: #eaf2ff;
            border-radius: 28px;
            padding: 20px;
            -webkit-box-shadow: var(--shadow);
                    box-shadow: var(--shadow)
        }

        .app-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
        }

        .app-card {
            background: #fff;
            border: 1px solid #e8eefc;
            border-radius: 16px;
            padding: 14px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 12px;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            -webkit-box-shadow: 0 4px 14px rgba(21, 61, 138, .06);
                    box-shadow: 0 4px 14px rgba(21, 61, 138, .06)
        }

        .thumb {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            background: #f0f6ff;
            display: grid;
            place-items: center;
            font-weight: 700;
            color: #567af7
        }

        .title {
            font-weight: 700;
            color: #10224d;
            margin: 0
        }

        .kicker {
            font-size: .85rem;
            color: #6b7da2;
            margin-top: 2px
        }

        /* Minimal top bar */
        .topbar {
            border-bottom: 1px solid #eef2fb;
            background: #fff
        }

        .brand {
            font-weight: 900;
            letter-spacing: .2px;
            color: #071a46;
            text-decoration: none
        }

        .brand-dot {
            color: var(--jl-aqua)
        }

        .trusted {
            color: #586a91
        }

        .learn-link {
            color: #0c1f5c;
            text-decoration: none;
            font-weight: 700
        }

        .learn-link svg {
            -webkit-transition: -webkit-transform .15s ease;
            transition: -webkit-transform .15s ease;
            transition: transform .15s ease;
            transition: transform .15s ease, -webkit-transform .15s ease
        }

        .learn-link:hover svg {
            -webkit-transform: translateX(2px);
                    transform: translateX(2px)
        }

        @media (max-width: 991.98px) {
            .hero {
                padding-block: 48px
            }

            .app-grid {
                grid-template-columns: 1fr
            }
        }

        .jl-bg {
min-height: 100vh;
background:
radial-gradient(900px 500px at -10% -10%, rgba(41,121,255,.18), transparent 60%),
radial-gradient(900px 500px at 110% -10%, rgba(0,207,255,.18), transparent 60%),
linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}
.jl-card { border-radius: 20px; -webkit-box-shadow: 0 24px 60px rgba(16,42,112,.12); box-shadow: 0 24px 60px rgba(16,42,112,.12); border: 1px solid #E8EEFC; }
.jl-brand { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; gap:.5rem; }
.jl-brand img{ width:150px; height:auto; }
.jl-muted { color:#6b7da2 !important; }
.jl-pill { border-radius: 14px; }
.jl-role-toggle { display:-webkit-box; display:-ms-flexbox; display:flex; gap:.75rem; }
.jl-role-input { position: absolute; opacity: 0; pointer-events:none; }
.jl-role-chip { -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; padding:.85rem 1rem; border:1px solid #E8EEFC; border-radius:12px; cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:.6rem; -webkit-transition:.15s; transition:.15s; }
.jl-role-chip:hover { border-color:#cfd8ff; }
.jl-role-input:checked + .jl-role-chip { border-color:#2979FF; -webkit-box-shadow:0 0 0 .2rem rgba(41,121,255,.15); box-shadow:0 0 0 .2rem rgba(41,121,255,.15); }
.jl-btn-primary { background:#2979FF; border-color:#2979FF; }
.jl-btn-primary:hover { background:#1f66db; border-color:#1f66db; }
.jl-link { color:#00CFFF; text-decoration:none; }
.jl-link:hover { opacity:.9; }

.jl-card-narrow { max-width: 460px; }


/* Palette tokens */
:root { --jl-blue:#2979FF; --jl-aqua:#00CFFF; --jl-ink:#0b1a33; --jl-muted:#6b7da2; --jl-border:#E8EEFC; --jl-bg-soft:#F7FAFF; }
/* Utilities */
.jl-wrap { padding-block: 28px; }
.jl-h1 { font-weight: 800; letter-spacing: -0.3px; }
.jl-muted { color: var(--jl-muted)!important; }
.jl-link { color: var(--jl-aqua); text-decoration: none; }
.jl-link:hover { opacity:.9; }
.jl-card { border:1px solid var(--jl-border); border-radius:18px; -webkit-box-shadow:0 18px 40px rgba(16,42,112,.06); box-shadow:0 18px 40px rgba(16,42,112,.06); background:#fff; }
.jl-card-soft { background: -webkit-gradient(linear,left top, left bottom,from(#ffffff), color-stop(70%, #f9fbff)); background: linear-gradient(180deg,#ffffff 0%, #f9fbff 70%); }
.jl-chip { display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:.5rem; padding:.35rem .7rem; border:1px solid var(--jl-border); border-radius:999px; font-size:.85rem; background:#fff; }
.jl-pill { border-radius: 999px; }
.jl-btn-primary { background: var(--jl-blue); border-color: var(--jl-blue); color:#fff; }
.jl-btn-primary:hover { background:#1f66db; border-color:#1f66db; }
.jl-btn-outline { color: var(--jl-blue); border-color: var(--jl-blue); }
.jl-btn-outline:hover { background:var(--jl-blue); color:#fff; }
.jl-legend { font-weight:700; font-size:1.05rem; margin-bottom:.25rem; }
.jl-sub { font-size:.9rem; color:var(--jl-muted); }
.jl-divider { height:1px; background:#edf2ff; margin: 18px 0; }
.jl-grid-compact .row > [class^="col"] { margin-bottom: 12px; }
.jl-sticky { position: sticky; top: 24px; }
.jl-progress { height:8px; background:#edf2ff; border-radius:999px; overflow:hidden; }
.jl-progress > span { display:block; height:100%; background:-webkit-gradient(linear,left top, right top,from(var(--jl-blue)),to(var(--jl-aqua))); background:linear-gradient(90deg,var(--jl-blue),var(--jl-aqua)); width: 0%; }
.jl-help { font-size:.85rem; color:#607099; }
.jl-badge { background:-webkit-gradient(linear,left top, right top,from(var(--jl-blue)),to(var(--jl-aqua))); background:linear-gradient(90deg,var(--jl-blue),var(--jl-aqua)); color:#0b1420; border:0; }
/* Inputs remain Bootstrap; we only tint focus */
.form-control:focus, .form-select:focus { border-color: var(--jl-aqua); -webkit-box-shadow:0 0 0 .2rem rgba(0,207,255,.15); box-shadow:0 0 0 .2rem rgba(0,207,255,.15); }
.su-card { border: 1px solid rgba(0,0,0,.06); border-radius: 1rem; -webkit-box-shadow: 0 6px 24px rgba(0,0,0,.06); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.su-cta { border-radius: .875rem; padding: .75rem 1rem; font-weight: 600; }
.su-badge { font-size: .75rem; border-radius: .5rem; }
.su-step { width: 36px; height: 36px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 700; }
.su-step.active { background: #0d6efd; color: #fff; }
.su-step.done { background: #e7f1ff; color: #0d6efd; }
.su-muted { color: #6c757d; }
.su-divider { height:1px; background: rgba(0,0,0,.08); margin: 1rem 0; }
.su-list-check li { margin-bottom:.5rem; }

 .su-card {
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 1rem;
        -webkit-box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
                box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    }

    .su-cta {
        border-radius: .875rem;
        padding: .75rem 1rem;
        font-weight: 600;
    }

    .su-badge {
        font-size: .75rem;
        border-radius: .5rem;
    }

    .su-step {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font-weight: 700;
        border: 1px solid rgba(13, 110, 253, .2);
        color: #0d6efd;
        background: #e7f1ff;
    }

    .su-step.active {
        background: #0d6efd;
        color: #fff;
    }

    .su-muted {
        color: #6c757d;
    }

    .su-divider {
        height: 1px;
        background: rgba(0, 0, 0, .08);
        margin: 1rem 0;
    }

    .su-list-check li {
        margin-bottom: .5rem;
    }