:root {
            --bg: #001020;
            --panel: #001b35;
            --red: #e31824;
            --text: #f6f7fa;
            --muted: #cbd2dc;
            --line: #536071
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.5
        }

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

        button,
        input,
        textarea {
            font: inherit
        }

        a,
        button,
        input,
        textarea {
            outline-offset: 5px
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid white
        }

        button,
        a {
            touch-action: manipulation
        }

        img {
            max-width: 100%;
            display: block
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--red);
            border: 1px solid var(--red);
            padding: 13px 25px;
            border-radius: 4px;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s
        }

        .btn:hover {
            background: #b9111c
        }

        .btn.outline {
            background: transparent;
            border-color: #7c8593
        }

        .btn.outline:hover {
            background: #183049
        }

        header {
            background: #001020ee;
            position: relative;
            z-index: 5
        }

        header .wrap {
            display: flex;
            align-items: center;
            gap: 30px;
            min-height: 118px
        }

        .logo {
            width: 105px;
            flex-shrink: 0
        }

        nav {
            display: flex;
            align-items: center;
            gap: 28px;
            margin: auto
        }

        nav a {
            font-size: 12px;
            font-weight: bold;
            padding: 16px 0;
            position: relative
        }

        nav a:hover:after,
        nav a:first-child:after {
            content: '';
            position: absolute;
            height: 2px;
            background: var(--red);
            bottom: 8px;
            left: 0;
            right: 0
        }

        .menu {
            display: none
        }

        .hero {
            position: relative;
            min-height: 540px;
            overflow: hidden;
            border-bottom: 2px solid var(--red);
            border-bottom-right-radius: 150px
        }

        .hero-photo {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 58%;
            object-fit: cover;
            object-position: center
        }

        .hero:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, #001020 30%, #001020e0 43%, #00102020 73%);
            pointer-events: none
        }

        .hero .wrap {
            position: relative;
            z-index: 1;
            padding-top: 44px;
            padding-bottom: 40px
        }

        .hero h1 {
            font-size: clamp(32px, 4.5vw, 55px);
            line-height: 1.1;
            letter-spacing: -1px;
            margin: 0 0 20px;
            max-width: 650px
        }

        em {
            font-style: normal;
            color: var(--red)
        }

        .hero p {
            color: var(--muted);
            font-size: 17px;
            max-width: 390px
        }

        .actions {
            display: flex;
            gap: 18px;
            margin-top: 30px
        }

        .features {
            display: flex;
            gap: 22px;
            margin-top: 53px;
            max-width: 650px
        }

        .features>div {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1
        }

        .features svg {
            width: 33px;
            height: 40px;
            color: #d4deeb;
            flex-shrink: 0
        }

        .features b {
            font-size: 11px;
            display: block
        }

        .features small {
            font-size: 11px;
            color: var(--muted)
        }

        h2 {
            font-size: 27px;
            line-height: 1.2;
            margin: 0 0 12px
        }

        section {
            scroll-margin-top: 20px
        }

        .section-head {
            text-align: center;
            margin-bottom: 40px
        }

        .section-head p {
            color: var(--muted);
            margin: 0
        }

        .solutions {
            padding: 30px 0 24px
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px
        }

        .card {
            position: relative;
            border: 1px solid #737b87;
            border-radius: 7px;
            margin-top: 16px;
            background: linear-gradient(#132235, #001020);
            overflow: visible
        }

        .card>img {
            width: 100%;
            height: 185px;
            object-fit: cover;
            border-radius: 6px 6px 0 0
        }

        .card>div {
            padding: 16px 12px 20px;
            text-align: center
        }

        .card h3 {
            font-size: 14px;
            line-height: 1.4;
            margin: 0 0 11px
        }

        .card p {
            font-size: 13px;
            color: var(--muted);
            margin: 0;
            line-height: 1.7
        }

        .round {
            position: absolute;
            top: -28px;
            left: 50%;
            transform: translateX(-50%);
            width: 68px;
            height: 68px;
            border: 1px solid #788391;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #001020
        }

        .round svg {
            width: 38px;
            height: 38px
        }

        .center {
            text-align: center;
            margin-top: 24px
        }

        .stats {
            background: var(--panel);
            padding: 28px 0
        }

        .stats .wrap {
            display: grid;
            grid-template-columns: repeat(5, 1fr)
        }

        .stats .wrap>div {
            text-align: center;
            padding: 0 18px;
            position: relative
        }

        .stats .wrap>div+div:before {
            content: '';
            position: absolute;
            left: 0;
            top: 20px;
            bottom: 15px;
            width: 1px;
            background: var(--red)
        }

        .stats svg {
            width: 48px;
            height: 48px;
            margin-bottom: 5px
        }

        .stats strong {
            font-size: 28px;
            display: block
        }

        .stats span {
            font-size: 12px;
            display: block;
            max-width: 160px;
            margin: 3px auto
        }

        .monitor {
            position: relative;
            min-height: 310px;
            overflow: hidden
        }

        .monitor img {
            position: absolute;
            right: 0;
            top: 0;
            width: 66%;
            height: 100%;
            object-fit: cover
        }

        .monitor:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, #001020 25%, #001020e0 38%, transparent 70%)
        }

        .monitor .wrap {
            position: relative;
            z-index: 1;
            padding-top: 32px;
            padding-bottom: 34px
        }

        .monitor h2 {
            max-width: 310px
        }

        .monitor p {
            max-width: 335px;
            font-size: 14px;
            color: var(--muted);
            margin: 20px 0 26px
        }

        .accent:after {
            content: '';
            display: block;
            width: 45px;
            height: 2px;
            background: var(--red);
            margin-top: 14px
        }

        .clients {
            background: var(--panel);
            text-align: center;
            padding: 24px 0
        }

        .clients h2:after {
            margin: 12px auto
        }

        .clients img {
            width: 100%;
            max-width: 1050px;
            margin: 18px auto 26px
        }

        .cta {
            border-bottom: 1px solid #203044;
            border-top: 1px solid #203044;
            padding: 28px 0
        }

        .cta .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px
        }

        .cta-message {
            display: flex;
            gap: 25px;
            align-items: center
        }

        .cta svg {
            width: 90px;
            height: 100px;
            color: #e3e7ef
        }

        .cta h2 {
            font-size: 27px;
            margin: 0
        }

        .cta-contact {
            text-align: center;
            min-width: 290px
        }

        .cta-contact .btn {
            width: 100%
        }

        .cta-contact small {
            display: block;
            margin: 10px 0 0;
            color: var(--muted)
        }

        .phone {
            display: block;
            font-size: 24px;
            margin-top: 3px
        }

        footer {
            padding-top: 30px
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.25fr 1fr 1.1fr;
            gap: 36px
        }

        .about {
            display: flex;
            align-items: flex-start;
            gap: 20px
        }

        .about img {
            width: 105px
        }

        .about p {
            font-size: 12px;
            color: var(--muted);
            margin: 5px 0
        }

        .footer-grid h3 {
            font-size: 14px;
            margin: 0 0 10px
        }

        .offices {
            border-left: 1px solid #203044;
            border-right: 1px solid #203044;
            padding: 0 30px
        }

        .offices p {
            font-size: 12px;
            color: var(--muted);
            margin: 0 0 22px
        }

        .offices strong {
            display: block;
            color: white
        }

        .contact-email {
            font-size: 12px;
            overflow-wrap: anywhere
        }

        .form {
            display: grid;
            gap: 8px;
            margin-top: 12px
        }

        .form label {
            font-size: 12px
        }

        .form input,
        .form textarea {
            width: 100%;
            display: block;
            background: #001020;
            border: 1px solid #39495c;
            color: white;
            border-radius: 3px;
            padding: 9px 10px;
            margin-top: 3px
        }

        .form textarea {
            min-height: 75px;
            resize: vertical
        }

        .form .btn {
            justify-self: end
        }

        .form small {
            font-size: 11px;
            color: var(--muted)
        }

        .copyright {
            text-align: center;
            border-top: 1px solid #203044;
            margin: 28px 0 0;
            padding: 15px;
            color: #9ea9b7;
            font-size: 12px
        }

        dialog {
            max-width: 600px;
            background: #001b35;
            color: white;
            border: 1px solid #65758a;
            border-radius: 10px;
            padding: 30px;
            width: calc(100% - 40px)
        }

        dialog::backdrop {
            background: #000a
        }

        dialog p {
            color: var(--muted)
        }

        dialog .close {
            float: right;
            background: none;
            color: white;
            border: 0;
            font-size: 28px;
            cursor: pointer
        }

        #welcome-dialog {
            position: relative;
            padding: 48px 20px 20px;
            text-align: center;
        }

        #welcome-dialog .close {
            /* position: absolute;
            top: 8px;
            right: 12px; */
            margin-top: 22px;
            float: none;
            background: var(--red);
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 700
        }

        #welcome-dialog img {
            width: 100%;
            max-width: 500px;
            height: auto;
            margin: 0 auto
        }

        @media(min-width:1500px) {
            .hero-photo {
                object-position: center 65%
            }
        }

        @media(max-width:960px) {
            header .wrap {
                gap: 18px;
                padding: 12px 24px;
                min-height: 90px
            }

            .logo {
                width: 75px
            }

            nav {
                gap: 16px
            }

            header .btn {
                padding: 10px 12px;
                font-size: 11px
            }

            .wrap {
                padding: 0 24px
            }

            .hero {
                min-height: 510px
            }

            .hero h1 {
                font-size: 42px
            }

            .cards {
                gap: 12px
            }

            .card>img {
                height: 150px
            }

            .card h3 {
                font-size: 12px
            }

            .card p {
                font-size: 12px
            }

            .card>div {
                padding: 14px 8px
            }

            .features {
                max-width: 570px;
                gap: 12px
            }

            .footer-grid {
                gap: 20px
            }

            .offices {
                padding: 0 18px
            }

            .cta h2 {
                font-size: 23px
            }

            .cta svg {
                width: 65px
            }

            .about {
                display: block
            }
        }

        @media(max-width:700px) {
            .wrap {
                padding: 0 20px
            }

            header .wrap {
                min-height: 90px;
                justify-content: space-between
            }

            .logo {
                width: 70px
            }

            header>.wrap>.btn {
                margin-left: auto
            }

            .menu {
                display: block;
                background: transparent;
                color: white;
                border: 1px solid #718096;
                border-radius: 4px;
                padding: 7px 11px;
                font-size: 20px
            }

            nav {
                display: none;
                position: absolute;
                top: 90px;
                left: 0;
                right: 0;
                background: #001020;
                padding: 20px;
                box-shadow: 0 15px 25px #0005
            }

            nav.open {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0
            }

            nav a {
                font-size: 14px
            }

            .hero {
                min-height: 610px;
                border-bottom-right-radius: 70px
            }

            .hero-photo {
                width: 100%;
                opacity: .64
            }

            .hero:after {
                background: linear-gradient(90deg, #001020f5, #00102085), linear-gradient(0deg, #001020, transparent 65%)
            }

            .hero .wrap {
                padding-top: 45px
            }

            .hero h1 {
                font-size: clamp(34px, 8.6vw, 48px);
                max-width: 520px
            }

            .hero p {
                font-size: 16px;
                max-width: 310px
            }

            .actions {
                gap: 12px;
                flex-wrap: wrap
            }

            .features {
                flex-wrap: wrap;
                margin-top: 45px;
                gap: 18px
            }

            .features>div {
                flex-basis: 40%
            }

            .features b,
            .features small {
                font-size: 11px
            }

            .cards {
                grid-template-columns: repeat(2, 1fr);
                gap: 43px 16px
            }

            .card:last-child {
                grid-column: 1/-1;
                max-width: 320px;
                width: 100%;
                justify-self: center
            }

            .card>img {
                height: 180px
            }

            .card h3 {
                font-size: 14px
            }

            .card p {
                font-size: 13px
            }

            .solutions {
                padding: 35px 0
            }

            .section-head {
                margin-bottom: 35px
            }

            h2 {
                font-size: 25px
            }

            .stats .wrap {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px 0
            }

            .stats .wrap>div:last-child {
                grid-column: 1/-1
            }

            .stats .wrap>div:nth-child(odd):before {
                display: none
            }

            .stats strong {
                font-size: 26px
            }

            .monitor {
                min-height: 430px
            }

            .monitor img {
                width: 100%;
                opacity: .65
            }

            .monitor:after {
                background: linear-gradient(90deg, #001020ee, #00102055)
            }

            .monitor p {
                max-width: 280px
            }

            .clients img {
                min-width: 660px
            }

            .client-scroll {
                overflow-x: auto
            }

            .clients .hint {
                display: block
            }

            .cta .wrap {
                flex-direction: column;
                align-items: stretch
            }

            .cta h2 {
                font-size: 22px
            }

            .cta-message {
                gap: 18px
            }

            .cta-contact {
                min-width: 0
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 25px
            }

            .about {
                display: flex
            }

            .about p {
                font-size: 13px
            }

            .offices {
                border: 0;
                border-top: 1px solid #203044;
                border-bottom: 1px solid #203044;
                padding: 20px 0;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px
            }

            .offices h3 {
                grid-column: 1/-1
            }

            .offices p {
                margin: 0
            }

            .form .btn {
                width: 100%
            }

            .copyright {
                font-size: 11px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            * {
                transition: none !important
            }
        }

        .hint {
            display: none;
            font-size: 12px;
            color: var(--muted)
        }

        .real-photos {
            padding: 45px 0;
            background: #001020
        }

        .photo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            max-width: 850px;
            margin: auto
        }

        .photo-grid figure {
            margin: 0;
            border: 1px solid #3b4b60;
            border-radius: 7px;
            overflow: hidden;
            background: #001b35
        }

        .photo-grid img {
            width: 100%;
            height: auto
        }

        .photo-grid figcaption {
            padding: 14px 18px;
            font-size: 14px;
            color: #cbd2dc
        }

        .photo-grid .wide {
            grid-column: 1/-1
        }

        .guard-app {
            padding: 42px 0;
            background: #001a32
        }

        .app-layout {
            display: grid;
            grid-template-columns: minmax(0, 440px) 1fr;
            align-items: center;
            gap: 64px
        }

        .app-layout>img {
            width: 100%;
            border-radius: 8px
        }

        .app-layout h2 {
            font-size: 32px
        }

        .app-layout p {
            color: #cbd2dc
        }

        .app-layout ul {
            list-style: none;
            padding: 0;
            margin: 24px 0 32px
        }

        .app-layout li {
            padding: 12px 0;
            border-bottom: 1px solid #344558
        }

        .app-layout li:before {
            content: '✓';
            color: #ed2735;
            margin-right: 12px
        }

        @media(max-width:700px) {
            #welcome-dialog {
                width: min(340px, calc(100% - 32px));
                max-width: 340px;
            }

            .photo-grid {
                gap: 16px
            }

            .photo-grid figcaption {
                padding: 10px;
                font-size: 12px
            }

            .app-layout {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .app-layout>img {
                max-width: 440px;
                margin: auto
            }

            .app-layout h2 {
                font-size: 26px
            }

            .real-photos {
                padding: 32px 0
            }

            .hero-photo {
                object-position: center 65%
            }
        }