:root {
                --b: #1a4275;
                --a: #1f5595;
                --g: #518840;
                --ink: #18304e;
                --mute: #61728a;
                --line: #dfe7f1;
                --bg: #f5f7fa
            }

            * {
                box-sizing: border-box
            }

            html {
                scroll-behavior: smooth
            }

            body {
                margin: 0;
                background: var(--bg);
                color: var(--ink);
                font: 15px/1.6 Montserrat,Arial,sans-serif
            }

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

            .head {
                height: 78px;
                padding: 14px clamp(22px,8vw,120px);
                display: flex;
                gap: 28px;
                align-items: center;
                position: sticky;
                top: 0;
                z-index: 5;
                background: #fffffff0;
                border-bottom: 1px solid var(--line);
                backdrop-filter: blur(12px)
            }

                .head img {
                    width: 155px;
                    display: block
                }

            .nav {
                margin-left: auto;
                display: flex;
                gap: 24px;
                font-size: 12px;
                font-weight: 700;
                color: #445b76
            }

                .nav a:hover {
                    color: var(--a)
                }

            .access, .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 9px;
                border-radius: 10px;
                font-size: 12px;
                font-weight: 800;
                transition: .2s
            }

            .access {
                padding: 10px 15px;
                border: 1px solid #ccd8e7;
                color: var(--a)
            }

            .btn {
                min-height: 50px;
                padding: 0 21px
            }

            .primary {
                background: var(--a);
                color: #fff;
                box-shadow: 0 8px 20px #1f55953d
            }

                .primary:hover {
                    background: var(--g);
                    transform: translateY(-2px)
                }

            .ghost {
                border: 1px solid #cfddeb;
                background: #fff;
                color: var(--a)
            }

            .menu {
                display: none;
                border: 0;
                background: transparent;
                color: var(--b);
                font-size: 20px
            }

            .hero {
                display: grid;
                grid-template-columns: 1.15fr .85fr;
                align-items: center;
                gap: 60px;
                min-height: 610px;
                padding: 78px clamp(24px,10vw,160px);
                background: radial-gradient(circle at 88% 27%,#dcecfb 0,transparent 28%),linear-gradient(140deg,#fff,#eff5fa)
            }

            .eyebrow, .label {
                margin: 0 0 15px;
                color: var(--a);
                font-size: 11px;
                font-weight: 800;
                letter-spacing: 1.3px
            }

            h1 {
                max-width: 730px;
                margin: 0 0 23px;
                color: var(--b);
                font-size: clamp(39px,5vw,67px);
                line-height: 1.08;
                letter-spacing: -2.4px
            }

            h2 {
                line-height: 1.16;
                letter-spacing: -1.3px
            }

            .hero p {
                max-width: 620px;
                margin: 0 0 30px;
                color: var(--mute);
                font-size: 16px
            }

            .actions {
                display: flex;
                gap: 13px;
                flex-wrap: wrap
            }

            .notes {
                display: flex;
                gap: 18px;
                flex-wrap: wrap;
                margin-top: 34px;
                font-size: 11px;
                font-weight: 600;
                color: #5e7089
            }

                .notes i {
                    color: var(--g);
                    margin-right: 5px
                }

            .visual {
                min-height: 380px;
                position: relative;
                border-radius: 24px;
                background: linear-gradient(145deg,var(--b),var(--a));
                box-shadow: 0 22px 55px #173f6d42
            }

                .visual:before {
                    content: '';
                    position: absolute;
                    inset: 45px;
                    border: 1px solid #ffffff2e;
                    border-radius: 50%
                }

            .card-float {
                position: absolute;
                border: 1px solid #ffffff70;
                border-radius: 16px;
                color: #fff;
                background: #ffffff20;
                box-shadow: 0 12px 25px #0002;
                backdrop-filter: blur(8px)
            }

            .card-main {
                width: 230px;
                top: 105px;
                left: calc(50% - 115px);
                padding: 22px
            }

                .card-main i {
                    font-size: 28px;
                    margin-bottom: 14px
                }

                .card-main span {
                    display: block;
                    opacity: .8;
                    font-size: 12px
                }

                .card-main strong {
                    font-size: 18px
                }

            .card-small {
                right: -15px;
                bottom: 40px;
                padding: 11px 15px;
                font-size: 11px;
                font-weight: 700
            }

            .dot {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #a9e797;
                margin-right: 5px
            }

            .intro, .steps, .trust {
                max-width: 1180px;
                margin: auto;
                padding: 90px 24px
            }

            .intro {
                text-align: center
            }

                .intro h2 {
                    font-size: clamp(30px,4vw,45px);
                    margin: 0 0 17px;
                    color: var(--b)
                }

                .intro > p:last-child {
                    max-width: 720px;
                    margin: auto;
                    color: var(--mute)
                }

            .services {
                max-width: 1180px;
                margin: auto;
                padding: 0 24px 90px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 22px
            }

            .service {
                padding: 39px;
                border-radius: 20px;
                min-height: 540px
            }

            .tele {
                background: linear-gradient(145deg,var(--b),var(--a));
                color: #fff
            }

            .sso {
                background: #eaf2e5
            }

            .service .brand {
                height: 43px;
                margin-bottom: 52px
            }

                .service .brand img {
                    max-width: 180px;
                    max-height: 42px
                }

            .service-icon {
                display: grid;
                place-items: center;
                width: 52px;
                height: 52px;
                border-radius: 14px;
                margin-bottom: 22px;
                font-size: 22px
            }

            .tele .service-icon {
                background: #ffffff26
            }

            .sso .service-icon {
                background: var(--g);
                color: #fff
            }

            .service h2 {
                font-size: clamp(26px,3vw,37px);
                margin: 0 0 14px
            }

            .service p {
                opacity: .85
            }

            .service ul {
                padding: 8px 0;
                list-style: none;
                font-size: 13px
            }

            .service li {
                margin: 9px 0
            }

                .service li i {
                    color: #a9e797;
                    margin-right: 7px
                }

            .sso li i {
                color: var(--g)
            }

            .link {
                margin-top: 20px;
                display: inline-flex;
                gap: 8px;
                font-size: 13px;
                font-weight: 800
            }

            .impact {
                padding: 80px max(24px,calc((100vw - 1132px)/2));
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 70px;
                align-items: center;
                color: #fff;
                background: var(--b)
            }

                .impact h2 {
                    font-size: clamp(30px,4vw,45px);
                    margin: 0
                }

                .impact > p {
                    color: #d8e7f7;
                    font-size: 16px
                }

            .steps h2 {
                font-size: clamp(30px,4vw,43px);
                margin: 0;
                color: var(--b)
            }

            .stepgrid {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 22px;
                margin-top: 38px
            }

                .stepgrid article {
                    padding: 27px;
                    border: 1px solid var(--line);
                    border-radius: 16px;
                    background: #fff;
                    box-shadow: 0 8px 24px #1a42750d
                }

                .stepgrid span {
                    color: var(--g);
                    font-weight: 800;
                    font-size: 13px
                }

                .stepgrid h3 {
                    color: var(--b);
                    font-size: 18px
                }

                .stepgrid p {
                    color: var(--mute);
                    font-size: 13px
                }

            .trust {
                text-align: center;
                padding-top: 45px
            }

            .logos {
                display: grid;
                grid-template-columns: repeat(5,1fr);
                gap: 14px;
                margin-top: 25px
            }

                .logos div {
                    height: 98px;
                    padding: 20px;
                    display: grid;
                    place-items: center;
                    border: 1px solid var(--line);
                    border-radius: 12px;
                    background: #fff
                }

                .logos img {
                    max-width: 125px;
                    max-height: 50px;
                    filter: grayscale(1);
                    opacity: .75
                }

            .contact {
                max-width: 1132px;
                margin: 30px auto 82px;
                padding: 50px;
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 40px;
                border-radius: 20px;
                color: #fff;
                background: linear-gradient(130deg,var(--g),#426d32)
            }

                .contact .label {
                    color: #d8edcf
                }

                .contact h2 {
                    margin: 0 0 8px;
                    font-size: clamp(28px,3vw,40px)
                }

                .contact p:not(.label) {
                    margin: 0;
                    opacity: .85
                }

            .contact-actions {
                display: grid;
                gap: 11px
            }

            .light {
                background: #fff;
                color: var(--g)
            }

            .outline {
                border: 1px solid #ffffff85;
                color: #fff
            }

            .foot {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 18px;
                padding: 28px clamp(24px,8vw,130px);
                background: #12345e;
                color: #ced9e8;
                font-size: 11px
            }

                .foot img {
                    width: 145px
                }

                .foot p {
                    margin: 0
                }

            .cookiesms {
                position: fixed;
                z-index: 8;
                right: 16px;
                bottom: 16px;
                max-width: 360px;
                padding: 12px 14px;
                border-radius: 10px;
                background: #18304e;
                color: #fff;
                box-shadow: 0 10px 24px #0003;
                font-size: 11px
            }

                .cookiesms a {
                    text-decoration: underline
                }

                .cookiesms button {
                    margin-left: 7px;
                    border: 0;
                    border-radius: 6px;
                    padding: 5px 9px;
                    color: #18304e;
                    background: #fff;
                    font-weight: 700
                }

            @@media(max-width:900px) {
                .hero, .services, .impact, .contact {
                    grid-template-columns: 1fr
                }

                .impact {
                    gap: 20px
                }

                .logos {
                    grid-template-columns: repeat(3,1fr)
                }
            }

            @@media(max-width:680px) {
                .head {
                    height: 68px;
                    padding: 12px 20px
                }

                    .head img {
                        width: 132px
                    }

                .menu {
                    display: block;
                    margin-left: auto
                }

                .access {
                    display: none
                }

                .nav {
                    display: none;
                    position: absolute;
                    top: 67px;
                    left: 0;
                    right: 0;
                    margin: 0;
                    padding: 10px 20px 17px;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 0;
                    background: #fff;
                    border-bottom: 1px solid var(--line)
                }

                    .nav.open {
                        display: flex
                    }

                    .nav a {
                        padding: 10px 0
                    }

                .hero {
                    padding: 56px 24px;
                    gap: 40px;
                    min-height: auto
                }

                h1 {
                    font-size: 39px;
                    letter-spacing: -1.4px
                }

                .visual {
                    min-height: 330px
                }

                .intro, .steps, .trust {
                    padding: 66px 24px
                }

                .services {
                    padding-bottom: 65px
                }

                .service {
                    padding: 30px;
                    min-height: auto
                }

                    .service .brand {
                        margin-bottom: 40px
                    }

                .impact {
                    padding: 62px 24px
                }

                .stepgrid {
                    grid-template-columns: 1fr
                }

                .logos {
                    grid-template-columns: repeat(2,1fr)
                }

                .contact {
                    margin: 0 16px 62px;
                    padding: 34px 27px
                }

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

                .cookiesms {
                    left: 12px;
                    right: 12px;
                    max-width: none
                }
            }