:root {
            --bg: #07111f;
            --bg-soft: #0d1c30;
            --panel: rgba(255,255,255,0.075);
            --line: rgba(255,255,255,0.14);
            --text: #f4f8ff;
            --muted: #afbed1;
            --blue: #2f8cff;
            --orange: #ff7a1a;
            --steel: #8fa4bd;
            --shadow: 0 22px 70px rgba(0,0,0,0.35);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 10% 10%, rgba(47,140,255,0.25), transparent 32%),
                radial-gradient(circle at 90% 20%, rgba(255,122,26,0.18), transparent 28%),
                linear-gradient(135deg, #050914 0%, var(--bg) 48%, #111827 100%);
            min-height: 100vh;
        }

        a { color: inherit; text-decoration: none; }
        .container { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }

        header {
            position: sticky;
            top: 0;
            z-index: 10;
            backdrop-filter: blur(16px);
            background: rgba(7, 17, 31, 0.72);
            border-bottom: 1px solid var(--line);
        }

        .nav {
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .logo {
            height: 90px;
            width: auto;
            display: block;
            filter: drop-shadow(0 0 10px rgba(47,140,255,0.18));
            transition: 0.2s ease;
            margin-top: 5px;
        }

        .logo:hover { transform: scale(1.02); }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 22px;
            color: var(--muted);
            font-size: 0.94rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 20px;
            border-radius: 999px;
            font-weight: 800;
            border: 1px solid transparent;
            transition: 0.2s ease;
        }

        .btn-primary {
            color: #08111f;
            background: linear-gradient(135deg, #ffffff, #d9e8ff);
            box-shadow: 0 15px 40px rgba(47,140,255,0.25);
        }

        .btn-primary:hover { transform: translateY(-2px); }
        .btn-outline { border-color: var(--line); color: var(--text); background: rgba(255,255,255,0.04); }
        .btn-outline:hover { background: rgba(255,255,255,0.09); }

        .hero {
            position: relative;
            padding: 88px 0 72px;
            overflow: hidden;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.07fr 0.93fr;
            gap: 44px;
            align-items: center;
        }

        .eyebrow {
            display: inline-flex;
            gap: 10px;
            align-items: center;
            color: #d6e7ff;
            background: rgba(47,140,255,0.14);
            border: 1px solid rgba(47,140,255,0.28);
            border-radius: 999px;
            padding: 9px 14px;
            font-size: 0.88rem;
            font-weight: 700;
        }

        .pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--orange);
            box-shadow: 0 0 16px var(--orange);
        }

        h1 {
            font-size: clamp(3rem, 7vw, 6.8rem);
            line-height: 0.9;
            letter-spacing: -0.07em;
            margin: 24px 0 20px;
        }

        h1 span {
            display: block;
            background: linear-gradient(135deg, #f9fbff 0%, #8dbdff 48%, #ff974a 100%);
            -webkit-background-clip: text;
            color: transparent;
        }

        .hero p {
            color: var(--muted);
            font-size: 1.18rem;
            line-height: 1.7;
            max-width: 610px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 32px;
        }

        .hero-card {
            position: relative;
            min-height: 520px;
            border-radius: 32px;
            padding: 28px;
            background:
                linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
                repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .hero-card:before {
            content: "";
            position: absolute;
            inset: -30%;
            background: conic-gradient(from 180deg, transparent, rgba(47,140,255,0.28), transparent, rgba(255,122,26,0.2), transparent);
            animation: spin 10s linear infinite;
            opacity: 0.72;
        }

        .hero-card-inner {
            position: relative;
            height: 100%;
            min-height: 464px;
            border-radius: 24px;
            background: rgba(7, 17, 31, 0.88);
            border: 1px solid var(--line);
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .gauge {
            width: 210px;
            height: 210px;
            border-radius: 50%;
            margin: 18px auto;
            background:
                radial-gradient(circle, #07111f 0 47%, transparent 48%),
                conic-gradient(var(--orange) 0 22%, var(--blue) 22% 76%, rgba(255,255,255,0.12) 76% 100%);
            display: grid;
            place-items: center;
            box-shadow: inset 0 0 50px rgba(255,255,255,0.07), 0 0 50px rgba(47,140,255,0.18);
        }

        .gauge strong { font-size: 3.2rem; letter-spacing: -0.08em; }
        .card-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; }
        .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .metric { border: 1px solid var(--line); background: var(--panel); padding: 16px; border-radius: 18px; }
        .metric strong { display: block; font-size: 1.35rem; }
        .metric span { color: var(--muted); font-size: 0.82rem; }

        section { padding: 76px 0; }
        .section-title { max-width: 760px; margin-bottom: 34px; }
        .section-title h2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; margin: 0 0 14px; letter-spacing: -0.05em; }
        .section-title p { color: var(--muted); line-height: 1.7; font-size: 1.08rem; }

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

        .service-card, .why-card, .contact-card {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 26px;
            padding: 24px;
            box-shadow: 0 16px 46px rgba(0,0,0,0.18);
        }

        .service-card .icon {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(47,140,255,0.14);
            color: #cde4ff;
            font-weight: 900;
            margin-bottom: 18px;
        }

        .service-card h3 { margin: 0 0 10px; }
        .service-card p, .why-card p { color: var(--muted); line-height: 1.6; margin: 0; }

        .why-grid {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 22px;
            align-items: stretch;
        }

        .why-list { display: grid; gap: 12px; }
        .why-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: rgba(255,255,255,0.045);
        }
        .check { color: var(--orange); font-weight: 900; }

        .contact-grid {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 22px;
            align-items: start;
        }

        form { display: grid; gap: 14px; }
        .hidden-field {
            position: absolute;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
        }

        input, textarea {
            width: 100%;
            border: 1px solid var(--line);
            background: rgba(5, 9, 20, 0.68);
            color: var(--text);
            padding: 15px 16px;
            border-radius: 16px;
            font: inherit;
            outline: none;
        }
        textarea { min-height: 132px; resize: vertical; }
        input:focus, textarea:focus { border-color: rgba(47,140,255,0.75); box-shadow: 0 0 0 4px rgba(47,140,255,0.12); }

        .status {
            padding: 14px 16px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: rgba(255,122,26,0.12);
            color: #ffe2cc;
            margin-bottom: 14px;
        }

        footer {
            border-top: 1px solid var(--line);
            padding: 28px 0;
            color: var(--muted);
        }
        .footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

        @media (max-width: 900px) {
            .nav-links { display: none; }
            .hero-grid, .why-grid, .contact-grid { grid-template-columns: 1fr; }
            .services { grid-template-columns: repeat(2, 1fr); }
            .hero { padding-top: 54px; }
        }

        @media (max-width: 600px) {
            .services,
            .metric-row {
                grid-template-columns: 1fr;
            }

            .hero-card {
                min-height: auto;
                padding: 18px;
                border-radius: 24px;
            }

            .hero-card-inner {
                min-height: auto;
                padding: 22px;
            }

            .gauge {
                width: 170px;
                height: 170px;
            }

            .gauge strong {
                font-size: 2.4rem;
            }
        }