:root {
            --navy: #07192f;
            --navy2: #0b2341;
            --blue: #18a7ff;
            --blue2: #2f78ff;
            --text: #f4f8ff;
            --muted: #b9c7d8;
            --light: #f4f8fc;
            --darkcard: #0e2a4c;
            --line: rgba(255, 255, 255, .14)
        }

        * {
            box-sizing: border-box
        }
#main{padding-left:0!important;padding-right:0!important;padding-bottom:0;font-family:Inter,'Segoe UI',Arial,sans-serif!important}
        body {
            margin: 0;
            font-family: Inter, Arial, sans-serif;
            background: var(--navy);
            color: var(--text);
            line-height: 1.45
        }

        .top {
            background: #fff;
            color: #0b2341;
            padding: 18px 6%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px
        }

        .brand {
            font-weight: 800;
            font-size: 26px;
            letter-spacing: -.5px
        }

        .brand span {
            color: #0798df
        }

        .nav {
            font-size: 14px;
            color: #41546b
        }

        .hero {
            padding: 78px 6% 68px;
            background: radial-gradient(circle at 80% 20%, rgba(24, 167, 255, .25), transparent 35%), linear-gradient(135deg, #07192f 0%, #0b2341 60%, #061324 100%)
        }

        .hero-inner {
            max-width: 1180px;
            margin: auto;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 42px;
            align-items: center
        }

        .eyebrow {
            color: var(--blue);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: 13px
        }

        h1 {
            font-size: 58px;
            line-height: 1.02;
            margin: 14px 0 18px;
            letter-spacing: -2px;
            color: #d5eaff !important;
        }

        .lead {
            font-size: 20px;
            color: #d6e4f4;
            max-width: 700px
        }

        .cta {
            display: flex;
            gap: 14px;
            margin-top: 28px;
            flex-wrap: wrap
        }

        .btn {
            display: inline-block;
            padding: 14px 20px;
            border-radius: 999px;
            font-weight: 800;
            text-decoration: none
        }

        .primary {
            background: var(--blue);
            color: #001b33
        }

        .secondary {
            border: 1px solid rgba(255, 255, 255, .35);
            color: #fff
        }

        .visual {
            background: rgba(255, 255, 255, .06);
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 28px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .35)
        }

        .network-card {
            background: linear-gradient(180deg, #102f54, #091b31);
            border-radius: 22px;
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, .12)
        }

        .flow {
            display: grid;
            gap: 14px
        }

        .pill {
            background: rgba(24, 167, 255, .12);
            border: 1px solid rgba(24, 167, 255, .35);
            border-radius: 16px;
            padding: 15px 18px
        }

        .pill strong {
            color: #fff
        }

        .arrow {
            text-align: center;
            color: var(--blue);
            font-size: 24px
        }

        .section {
            padding: 70px 6%
        }

        .wrap {
            max-width: 1180px;
            margin: auto
        }

        .light {
            background: var(--light);
            color: #0a1c31
        }

        .light h2,
        .light h3 {
            color: #07192f
        }

        .light p {
            color: #4e6075
        }

        .dark2 {
            background: #0b2341
        }
		.dark2 h2 {
            color: #d5eaff !important;
        }
        .center {
            text-align: center
        }

        h2 {
            font-size: 40px;
            line-height: 1.1;
            margin: 0 0 14px;
            letter-spacing: -1px;
        }
.network-card h3{
color: #d5eaff !important;
}
        p.sub {
            font-size: 18px;
            max-width: 760px;
            margin: 0 auto 36px;
            color: #c3d4e6
        }

        .light p.sub {
            color: #4e6075
        }

        .grid3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .grid2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px
        }

        .card {
            background: #fff;
            border-radius: 22px;
            padding: 26px;
            border: 1px solid #dfe8f2;
            box-shadow: 0 14px 34px rgba(15, 35, 65, .08)
        }

        .darkcard {
            background: rgba(255, 255, 255, .06);
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: 26px
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--blue), var(--blue2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            color: #061324;
            margin: 16px auto;
        }

        .card h3,
        .darkcard h3 {
            margin: 0 0 8px;
            font-size: 22px
        }
		.darkcard h3 {
        color: #d5eaff !important;
        }
        .card ul,
        .darkcard ul {
            margin: 14px 0 0;
            padding-left: 18px
        }

        .card li,
        .darkcard li {
            margin: 8px 0;
            color: inherit
        }

        .darkcard li, .darkcard p{
            color: #d9e6f4
        }

        .compare {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .compare .col {
            border-radius: 24px;
            padding: 28px
        }

        .old {
            background: #fff;
            color: #0a1c31;
            border: 1px solid #dfe8f2
        }

        .new {
            background: linear-gradient(180deg, #0c315a, #082039);
            border: 1px solid rgba(24, 167, 255, .45)
        }

        .new h3, .new li{
            color: #fff
        }

        .old h3 {
            color: #07192f
        }

        .statbar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 28px
        }

        .stat {
            background: rgba(255, 255, 255, .08);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 18px;
            text-align: center
        }

        .stat b {
            font-size: 30px;
            color: #fff;
            display: block
        }

        .journey {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            text-align: left
        }

        .journey-card {
            background: linear-gradient(180deg, #102f54, #091b31);
            border: 1px solid rgba(24, 167, 255, .28);
            border-radius: 22px;
            padding: 24px;
            min-height: 170px
        }

        .journey-card h3 {
            margin: 0 0 10px;
            color: #fff;
            font-size: 22px
        }

        .journey-card p {
            color: #d6e4f4;
            margin: 0
        }

        .cta-band {
            background: linear-gradient(135deg, #07192f, #0d3159);
            border-radius: 30px;
            padding: 42px;
            border: 1px solid rgba(255, 255, 255, .12);
            text-align: center
        }

        .footer {
            padding: 28px 6%;
            background: #061324;
            color: #92a6bc;
            text-align: center;
            font-size: 14px
        }

        @media(max-width:850px) {

            .hero-inner,
            .grid2,
            .grid3,
            .compare,
            .journey,
            .statbar {
                grid-template-columns: 1fr
            }

            h1 {
                font-size: 42px
            }

            .top {
                align-items: flex-start;
                flex-direction: column
            }

            .section {
                padding: 52px 6%
            }

            .card,
            .darkcard,
            .journey-card {
                padding: 22px
            }

            .visual {
                padding: 20px
            }

            h2 {
                font-size: 34px
            }
        }