:root {
    --navy: #2b3077;
    --navy-700: #222659;
    --navy-50: #eef0fb;
    --green: #86c440;
    --green-600: #6da933;
    --green-50: #f1f9e6;
    --ink: #1a1d3a;
    --muted: #5b6080;
    --bg: #ffffff;
    --soft: #f6f7fb;
}

html, body {
    background: var(--bg);
    overflow-x: hidden;
}

body {
    font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .display-5, .navbar-brand, .btn {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

h1, .display-3 {
    font-weight: 800;
    line-height: 1.1;
}

h2 {
    font-weight: 700;
    font-size: clamp(1.9rem,3.2vw,2.6rem);
    line-height: 1.15;
}

h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

p {
    font-size: 1.15rem;
}

.lead {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--muted);
}

.text-navy {
    color: var(--navy) !important;
}

.text-green {
    color: var(--green) !important;
}

.bg-navy {
    background: var(--navy) !important;
    color: #fff;
}

.bg-soft {
    background: var(--soft) !important;
}

.bg-navy-50 {
    background: var(--navy-50) !important;
}

.bg-green-50 {
    background: var(--green-50) !important;
}

/* Navbar */
.navbar {
    backdrop-filter: saturate(180%) blur(12px);
    background: rgba(255,255,255,.85);
    border-bottom: 1px solid rgba(43,48,119,.08);
    transition: box-shadow .2s ease;
}

    .navbar.scrolled {
        box-shadow: 0 8px 30px rgba(43,48,119,.08);
    }

    .navbar .nav-link {
        color: var(--ink);
        font-weight: 500;
        font-family: 'Plus Jakarta Sans';
        padding: .6rem 1rem !important;
        border-radius: .6rem;
        transition: .2s;
    }

        .navbar .nav-link:hover {
            background: var(--navy-50);
            color: var(--navy);
        }

.brand-logo {
    height: 34px;
    width: auto;
}

/* Buttons */
.btn {
    font-weight: 600;
    border-radius: .7rem;
    padding: .85rem 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease, background .2s;
}

    .btn:hover {
        transform: translateY(-2px);
    }

.btn-navy {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
}

    .btn-navy:hover {
        background: var(--navy-700);
        color: #fff;
        box-shadow: 0 12px 30px rgba(43,48,119,.25);
    }

.btn-green {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
}

    .btn-green:hover {
        background: var(--green-600);
        color: #fff;
        box-shadow: 0 12px 30px rgba(134,196,64,.35);
    }

.btn-outline-navy {
    color: var(--navy);
    border: 1.5px solid var(--navy);
    background: transparent;
}

    .btn-outline-navy:hover {
        background: var(--navy);
        color: #fff;
    }

.btn-lg {
    padding: 1rem 1.8rem;
    font-size: 1.1rem;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 6rem;
    background: radial-gradient(1200px 500px at 110% -20%, rgba(134,196,64,.18), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(43,48,119,.12), transparent 60%), linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}

    .hero h1 {
        font-size: clamp(2.4rem, 5vw, 4rem);
    }

    .hero .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: var(--green-50);
        color: var(--green-600);
        border: 1px solid rgba(134,196,64,.35);
        padding: .5rem 1rem;
        border-radius: 999px;
        font-weight: 600;
        font-size: 1rem;
    }

.hero-img-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(43,48,119,.18);
}

    .hero-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.hero-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    display: flex;
    gap: .9rem;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

    .hero-badge .dot {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--green);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
    }

/* Sections */
section {
    padding: 5.5rem 0;
}

.section-title-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .9rem;
    font-weight: 700;
    color: var(--green-600);
}

/* Cards */
.feature-card {
    background: #fff;
    border: 1px solid rgba(43,48,119,.08);
    border-radius: 18px;
    padding: 2rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 50px rgba(43,48,119,.12);
        border-color: rgba(134,196,64,.35);
    }

    .feature-card .icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 1.5rem;
        margin-bottom: 1.1rem;
        background: var(--navy-50);
        color: var(--navy);
        transition: transform .25s ease;
    }

    .feature-card:hover .icon {
        transform: scale(1.08);
    }

    .feature-card.green .icon {
        background: var(--green-50);
        color: var(--green-600);
    }

/* Bullet list */
ul.check {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    ul.check li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: .7rem;
        font-size: 1.15rem;
    }

        ul.check li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .55rem;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            background: var(--green-50);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2386c440'><path d='M13.485 1.929a1 1 0 0 1 .086 1.41l-7 8a1 1 0 0 1-1.49.02l-3-3a1 1 0 1 1 1.414-1.415l2.236 2.236 6.343-7.247a1 1 0 0 1 1.41-.004z'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 14px;
        }

    ul.check.on-dark li::before {
        background-color: rgba(134,196,64,.18);
    }

    ul.check.on-dark li {
        color: rgba(255,255,255,.92);
    }

ul.warn {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    ul.warn li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: .7rem;
        font-size: 1.15rem;
    }

        ul.warn li::before {
            content: "\F66A";
            font-family: 'bootstrap-icons';
            color: #e07b4a;
            position: absolute;
            left: .1rem;
            top: 0;
            font-size: 1.1rem;
        }

/* Image cards */
.img-card {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(43,48,119,.12);
}

    .img-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .6s ease;
    }

    .img-card:hover img {
        transform: scale(1.05);
    }

/* Revenue highlight */
.revenue-card {
    background: linear-gradient(135deg, var(--navy) 0%, #3a4099 60%, #455bbd 100%);
    color: #fff;
    border-radius: 28px;
    padding: 3rem;
    overflow: hidden;
    position: relative;
}

    .revenue-card::after {
        content: "";
        position: absolute;
        right: -100px;
        top: -100px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(134,196,64,.35), transparent 70%);
        border-radius: 50%;
    }

.big-stat {
    font-family: 'Plus Jakarta Sans';
    font-weight: 800;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, var(--green) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Future band (dark) */
.future {
    background: radial-gradient(900px 500px at 20% 20%, rgba(134,196,64,.18), transparent 60%), var(--navy);
    color: #fff;
}

    .future h2 {
        color: #fff;
    }

    .future .pill {
        display: flex;
        align-items: center;
        gap: .75rem;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        padding: 1rem 1.2rem;
        border-radius: 14px;
        height: 100%;
        transition: .25s;
        font-weight: 500;
    }

        .future .pill:hover {
            background: rgba(134,196,64,.12);
            border-color: rgba(134,196,64,.5);
            transform: translateY(-4px);
        }

        .future .pill i {
            color: var(--green);
            font-size: 1.3rem;
        }

/* CTA band */
.cta-band {
    background: linear-gradient(120deg, var(--green) 0%, #9ad657 100%);
    color: #fff;
    border-radius: 32px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

    .cta-band h2 {
        color: #fff;
    }

    .cta-band::before {
        content: "";
        position: absolute;
        left: -80px;
        bottom: -120px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(43,48,119,.35), transparent 70%);
        border-radius: 50%;
    }

/* Footer */
footer {
    background: #0f1230;
    color: #cfd2eb;
    padding: 3.5rem 0 2rem;
}

    footer a {
        color: #cfd2eb;
        text-decoration: none;
    }

        footer a:hover {
            color: var(--green);
        }

.footer-logo {
    height: 38px;
    filter: brightness(0) invert(1);
}

/* Misc */
.divider {
    width: 60px;
    height: 4px;
    background: var(--green);
    border-radius: 4px;
    margin-bottom: 1.2rem;
}

.anchor {
    scroll-margin-top: 90px;
}

h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    body {
        font-size: 1.08rem;
    }

    p, ul.check li, ul.warn li {
        font-size: 1.05rem;
    }

    .lead {
        font-size: 1.15rem;
    }

    .hero {
        padding: 6rem 0 4rem;
    }

        .hero h1 {
            font-size: 1.9rem;
            line-height: 1.15;
        }

    h2 {
        font-size: 1.55rem;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.2rem;
    }

    section {
        padding: 4rem 0;
    }

    .revenue-card, .cta-band {
        padding: 1.8rem;
    }

    .big-stat {
        font-size: 4.5rem;
    }

    .btn-lg {
        padding: .85rem 1.3rem;
        font-size: 1rem;
    }
}