:root {
            --fmb-primary: #0b6efd;
            /* brand blue */
            --fmb-navy: #0b1b2b;
            /* deep navy */
            --fmb-sky: #e8f1ff;
            /* light bg */
            --fmb-gold: #f4c542;
            /* accent */
            --fmb-success: #27ae60;
            --fmb-danger: #e74c3c;
        }

        body {
            font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
            background: #fff
        }

        .brand-gradient {
            background: linear-gradient(135deg, var(--fmb-navy) 0%, #0f3357 50%, #154a81 100%);
        }

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

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

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

        .shadow-xl {
            box-shadow: 0 20px 60px rgba(13, 30, 54, .18)
        }

        .kpi-card {
            border: 0;
            box-shadow: 0 10px 30px rgba(13, 30, 54, .08)
        }

        .section-pad {
            padding: 4.5rem 0
        }

        .section-muted {
            background: #f7f9fc
        }

        .logo-badge {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: radial-gradient(100% 100% at 10% 0%, var(--fmb-gold), #deaa00);
            display: grid;
            place-items: center;
            color: #102a43
        }

        .hero-rail {
            backdrop-filter: blur(6px);
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .2);
        }

        .integrations img {
            height: 34px;
            opacity: .8;
            filter: grayscale(1);
            transition: opacity .15s ease
        }

        .integrations img:hover {
            opacity: 1
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #eef4ff;
            color: var(--fmb-primary)
        }

        .timeline .dot {
            width: 14px;
            height: 14px;
            background: var(--fmb-primary);
            border-radius: 50%;
            position: relative;
            z-index: 2
        }

        .timeline .line {
            position: absolute;
            left: 6.5px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #d9e3f4
        }

        .ticket {
            border: 1px dashed #d7e3f7;
            border-radius: 16px
        }

        .footer a {
            color: inherit;
            text-decoration: none
        }

        .footer a:hover {
            text-decoration: underline
        }