:root {
        --clr-primary: #1B4D8C;
        --clr-accent: #00A3A3;
        --clr-bg: #0E1726;
        --clr-surface: #F7F9FC;
        --clr-text: #0B1220;
        --clr-muted: #6B7280;
        --clr-success: #16A34A;
        --clr-warning: #D97706;
        --radius-xl: 20px;
        --shadow-card: 0 6px 24px rgba(16, 24, 40, 0.06);
        --section-y: 64px;
    }



    html[data-theme="dark"] {
        --clr-surface: #0E1726;
        --clr-text: #E6ECF5;
        --clr-muted: #A3AEC2;
        --clr-bg: #0B1220;
    }

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

    html[data-theme="dark"] body {
        background: #0A0F1A;
    }

    a.skip-link {
        position: absolute;
        inset-inline-start: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    a.skip-link:focus {
        position: fixed;
        inset-inline-start: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
        padding: .5rem .75rem;
        background: var(--clr-accent);
        color: #001515;
        border-radius: 10px;
        z-index: 2000;
    }

    :focus-visible {
        outline: 3px solid var(--clr-accent);
        outline-offset: 2px;
        border-radius: 8px;
    }

    section {
        padding-block: var(--section-y);
    }

    @media (max-width:480px) {
        section {
            padding-block: 32px;
        }
    }

    /* NAV */
    .navbar {
        backdrop-filter: saturate(140%) blur(8px);
    }

    .nav-cta {
        gap: .5rem;
    }

    /* HERO (new design: gradient mesh + svg grid) */
    .hero {
        position: relative;
        color: #fff;
        overflow: hidden;
        background: radial-gradient(1200px 600px at 10% -10%, #1B4D8C 10%, rgba(27, 77, 140, .2) 60%, transparent 70%), linear-gradient(180deg, rgba(27, 77, 140, .75), rgba(14, 23, 38, .95));
        isolation: isolate;
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(500px 200px at 80% 10%, rgba(0, 163, 163, .25), transparent 70%),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 100 100"><g fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.2">%0A%3Cpath d="M0 80 H100"/%3E%3Cpath d="M0 60 H100"/%3E%3Cpath d="M0 40 H100"/%3E%3Cpath d="M0 20 H100"/%3E%3Cpath d="M20 0 V100"/%3E%3Cpath d="M40 0 V100"/%3E%3Cpath d="M60 0 V100"/%3E%3Cpath d="M80 0 V100"/%3E%0A</g></svg>') center/800px repeat;
        mix-blend-mode: overlay;
        transform: translateY(var(--y, 0px));
        will-change: transform;
    }

    @media (prefers-reduced-motion:reduce) {
        .hero::before {
            transform: none !important;
        }
    }

    .hero .container {
        padding-block: 96px;
    }

    .hero__title {
        font-family: Manrope, Inter, sans-serif;
        letter-spacing: -.02em;
        font-weight: 800;
    }

    .hero-badges .badge {
        background: #ffffff1a;
        border: 1px solid #ffffff33;
        color: #fff;
    }

    /* CARDS */
    .card-soft {
        background: var(--clr-surface);
        border: 1px solid #E5E7EB;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
    }

    html[data-theme="dark"] .card-soft {
        background: #0E1726;
        border-color: #1f2d49;
    }

    .icon-24 {
        width: 24px;
        height: 24px;
    }

    .icon-28 {
        width: 28px;
        height: 28px;
    }

    /* GRID helpers to honor 480/768/1024/1280 */
    @media (min-width:480px) {
        .col-xxs-6 {
            width: 50%;
        }
    }

    @media (min-width:768px) {
        .md-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
    }

    @media (min-width:1024px) {
        .lg-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
    }

    @media (min-width:1280px) {
        .xl-max-720 {
            max-width: 720px;
        }
    }

    /* Buttons/CTAs */
    .btn-primary {
        --bs-btn-bg: var(--clr-primary);
        --bs-btn-border-color: var(--clr-primary);
        --bs-btn-hover-bg: #1f5ea9;
        --bs-btn-hover-border-color: #1f5ea9;
        --bs-btn-focus-shadow-rgb: 27, 77, 140;
    }

    .btn-accent {
        color: #001515;
        background: var(--clr-accent);
        border-color: var(--clr-accent);
    }

    .btn-accent:hover {
        filter: brightness(1.04);
    }

    /* Code */
    pre {
        background: #0b1220;
        color: #e6edf3;
        border-radius: 14px;
        border: 1px solid #1f2b44;
        padding: 16px;
        position: relative;
        overflow: auto;
    }

    code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .92rem;
    }

    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    /* Pricing */
    .plan--featured {
        border: 2px solid var(--clr-primary);
        box-shadow: 0 10px 32px rgba(27, 77, 140, .18);
        position: relative;
    }

    .ribbon {
        position: absolute;
        top: 12px;
        right: -36px;
        rotate: 45deg;
        background: var(--clr-accent);
        color: #001515;
        padding: .25rem 2rem;
        font-weight: 700;
    }

    /* FAQ */
    details {
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        background: #fff;
    }

    details+details {
        margin-top: 10px;
    }

    html[data-theme="dark"] details {
        background: #0e1726;
        border-color: #1f2d49;
    }

    /* Footer */
    .footer a {
        text-decoration: none;
    }

    /* Utility */
    .text-muted-700 {
        color: var(--clr-muted);
    }

    .badge-soft {
        background: #EEF3FF;
        color: #163e7a;
        border: 1px solid #d7e3ff;
    }

    html[data-theme="dark"] .badge-soft {
        background: #112142;
        color: #cfe0ff;
        border-color: #22345b;
    }


    #formStatus {
        color: var(--clr-success);
        margin-top: 1rem;
    }

    .form-check {

        padding-left: 2rem;
    }