:root {
            --navy: #102a43;
            --blue: #1463d8;
            --blue-dark: #0b3f93;
            --sky: #eaf4ff;
            --muted: #62748a;
            --line: #dce8f5;
        }
        * { box-sizing: border-box; }
        body {
            color: var(--navy);
            background: #f7fbff;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .page-shell { overflow: hidden; }
        .navbar { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); }
        .brand-logo { width: 42px; height: 42px; object-fit: contain; }
        .brand-name { line-height: 1.1; letter-spacing: -.02em; }
        .brand-name small { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
        .hero {
            position: relative;
            background: linear-gradient(135deg, #fff 0%, #eef7ff 100%);
            border-bottom: 1px solid var(--line);
        }
        .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
        .hero::before { width: 360px; height: 360px; right: -130px; top: -160px; background: rgba(78, 166, 255, .13); }
        .hero::after { width: 210px; height: 210px; left: -120px; bottom: -120px; background: rgba(20, 99, 216, .08); }
        .hero-content { position: relative; z-index: 1; }
        .eyebrow { color: var(--blue); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
        .hero h1 { max-width: 680px; font-size: clamp(2.25rem, 5vw, 4.35rem); line-height: 1.05; letter-spacing: -.055em; }
        .hero h1 span { color: var(--blue); }
        .hero-copy { max-width: 570px; color: var(--muted); font-size: 1.08rem; }
        .btn-main { background: var(--blue); border: 0; border-radius: 12px; box-shadow: 0 10px 24px rgba(20, 99, 216, .22); font-weight: 700; }
        .btn-main:hover { background: var(--blue-dark); }
        .hero-card { border: 1px solid rgba(20, 99, 216, .12); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 25px 60px rgba(27, 77, 125, .12); }
        .hero-card .icon-box, .feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--sky); color: var(--blue); font-size: 1.25rem; }
        .section-label { color: var(--muted); font-size: .95rem; }
        .feature-card, .step-card { height: 100%; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
        .feature-card { transition: transform .2s ease, box-shadow .2s ease; }
        .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(27, 77, 125, .1); }
        .feature-card p, .step-card p { color: var(--muted); font-size: .93rem; }
        .step-number { color: var(--blue); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
        .cta { border-radius: 24px; background: linear-gradient(120deg, var(--navy), #1c5ca5); color: #fff; }
        .cta p { color: rgba(255,255,255,.72); }
        .btn-light { color: var(--blue-dark); font-weight: 700; border-radius: 11px; }
        footer { color: var(--muted); font-size: .86rem; }
        @media (max-width: 767.98px) {
            .hero h1 { font-size: 2.55rem; }
            .hero-card { margin-top: 1rem; }
        }