:root {
            --bg: #03070c;
            --bg2: #07101a;
            --panel: #07101b;
            --panel2: #0a1320;
            --line: rgba(79, 164, 255, .23);
            --cyan: #08c7ff;
            --blue: #277cff;
            --violet: #8d4dff;
            --purple: #c251ff;
            --red: #ff475f;
            --green: #20e6b2;
            --text: #eef5ff;
            --muted: #9dadbf;
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background:
                radial-gradient(circle at 76% 8%, rgba(0, 123, 255, .11), transparent 26%),
                radial-gradient(circle at 35% 36%, rgba(115, 57, 255, .07), transparent 30%),
                var(--bg);
            color: var(--text);
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            overflow-x: hidden;
        }

        .section {
            padding: 5rem 0;
            border-top: 1px solid rgba(255, 255, 255, .06);
            position: relative;
        }

        .navbar {
            padding: 1.25rem 0;
            background: rgba(2, 7, 12, .76);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(255, 255, 255, .04);
        }

        .navbar-brand {
            letter-spacing: .14em;
            font-weight: 700;
            font-size: 1.55rem;
            color: #eaf5ff !important;
            line-height: 1;
        }

        .brand-sub {
            display: block;
            color: #a8b7c9;
            font-size: .48rem;
            letter-spacing: .28em;
            margin-top: .35rem;
            font-weight: 500;
        }

        .nav-link {
            color: #edf5ff !important;
            font-size: .78rem;
            letter-spacing: .05em;
            margin: 0 .8rem;
            position: relative;
        }

        .nav-link.active::after {
            content: "";
            position: absolute;
            left: .5rem;
            right: .5rem;
            bottom: -.5rem;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        .btn-neon {
            border: 1px solid var(--cyan);
            color: #7bdfff;
            border-radius: 5px;
            background: rgba(0, 128, 255, .05);
            box-shadow: 0 0 16px rgba(0, 186, 255, .25), inset 0 0 16px rgba(0, 152, 255, .05);
            font-weight: 700;
            font-size: .8rem;
            letter-spacing: .02em;
            padding: .8rem 1.2rem;
            transition: .2s ease;
        }

        .btn-neon:hover {
            color: white;
            border-color: #73e7ff;
            background: rgba(0, 180, 255, .12);
            box-shadow: 0 0 26px rgba(0, 203, 255, .36);
            transform: translateY(-1px);
        }

        .hero {
            min-height: 720px;
            padding-top: 10rem;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, #02070b 0%, rgba(2, 7, 11, .94) 24%, rgba(2, 7, 11, .35) 56%, rgba(2, 7, 11, .08) 100%),
                radial-gradient(circle at 72% 48%, rgba(0, 145, 255, .18), transparent 24%),
                radial-gradient(circle at 83% 40%, rgba(188, 64, 255, .12), transparent 20%);
            z-index: 0;
        }

        .city {
            position: absolute;
            inset: 0 0 0 35%;
            opacity: .9;
            background:
                linear-gradient(180deg, transparent 0%, rgba(2, 7, 12, .2) 55%, #03070c 100%),
                repeating-linear-gradient(90deg, rgba(18, 40, 65, .6) 0 4px, transparent 4px 44px),
                repeating-linear-gradient(0deg, rgba(18, 70, 110, .25) 0 2px, transparent 2px 30px);
            clip-path: polygon(0 20%, 8% 15%, 10% 70%, 17% 70%, 17% 35%, 25% 30%, 27% 76%, 34% 76%, 34% 20%, 44% 14%, 48% 80%, 57% 80%, 57% 32%, 66% 25%, 68% 82%, 78% 82%, 78% 18%, 86% 14%, 90% 84%, 100% 84%, 100% 100%, 0 100%);
            filter: drop-shadow(0 0 25px rgba(0, 133, 255, .25));
        }

        .hero-content {
            position: relative;
            z-index: 2
        }

        .hero h1 {
            font-size: clamp(3.2rem, 6vw, 5.7rem);
            line-height: .94;
            letter-spacing: .01em;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 1.7rem;
        }

        .gradient-text {
            background: linear-gradient(90deg, var(--cyan), #3890ff 42%, var(--violet) 72%, #d75cff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 28px rgba(75, 119, 255, .15);
        }

        .hero-copy {
            font-size: 1.25rem;
            color: #f5f8fb;
            line-height: 1.55;
            margin-bottom: 2rem;
        }

        .orb-wrap {
            position: absolute;
            width: 470px;
            height: 470px;
            right: 12%;
            top: 20%;
            z-index: 1;
        }

        .orb {
            position: absolute;
            inset: 75px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 46% 40%, rgba(255, 255, 255, .16), transparent 7%),
                radial-gradient(circle, rgba(0, 111, 255, .15) 0 32%, rgba(0, 193, 255, .25) 33%, rgba(2, 11, 22, .3) 52%, rgba(0, 0, 0, .2) 70%),
                conic-gradient(from 20deg, #04c8ff, #2569ff, #824cff, #e04dff, #0bd5ff);
            box-shadow: 0 0 60px rgba(0, 148, 255, .45), inset 0 0 70px rgba(52, 204, 255, .2);
            border: 1px solid rgba(93, 210, 255, .55);
        }

        .orb::before,
        .orb::after {
            content: "";
            position: absolute;
            inset: -55px;
            border: 1px solid rgba(30, 167, 255, .18);
            border-radius: 50%;
            box-shadow: 0 0 25px rgba(21, 157, 255, .1);
        }

        .orb::after {
            inset: -105px;
            border-color: rgba(137, 75, 255, .18)
        }

        .brand-core {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-size: 2rem;
            letter-spacing: .12em;
            color: #e9fbff;
            text-shadow: 0 0 14px #0dbfff;
            z-index: 5;
        }

        .beam {
            position: absolute;
            height: 1px;
            width: 280px;
            background: linear-gradient(90deg, transparent, rgba(19, 188, 255, .9), rgba(181, 71, 255, .7), transparent);
            left: 50%;
            top: 50%;
            transform-origin: left center;
            opacity: .7;
            box-shadow: 0 0 7px currentColor;
        }

        .node {
            position: absolute;
            width: 72px;
            height: 52px;
            border: 1px solid rgba(0, 191, 255, .55);
            background: rgba(5, 15, 29, .84);
            border-radius: 4px;
            box-shadow: 0 0 18px rgba(0, 150, 255, .25);
            display: grid;
            place-items: center;
            color: #57d6ff;
            font-size: 1.45rem;
        }

        .node.danger {
            border-color: rgba(255, 57, 83, .8);
            color: #ff5065;
            box-shadow: 0 0 18px rgba(255, 47, 77, .22)
        }

        .n1 {
            left: -10px;
            top: 110px
        }

        .n2 {
            right: -18px;
            top: 85px
        }

        .n3 {
            right: 0;
            bottom: 95px
        }

        .n4 {
            left: 10px;
            bottom: 55px
        }

        .n5 {
            left: 90px;
            top: 0
        }

        .n6 {
            right: 70px;
            bottom: -15px
        }

        .section-title {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 2rem;
            line-height: 1.07;
            letter-spacing: .01em;
            margin-bottom: 2rem;
        }

        .process {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            align-items: center;
            gap: .8rem;
        }

        .process-step {
            min-height: 180px;
            border: 1px solid rgba(69, 162, 255, .18);
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(11, 22, 37, .9), rgba(3, 8, 14, .95));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 1rem;
            box-shadow: inset 0 0 30px rgba(0, 112, 255, .04);
        }

        .process-step i {
            font-size: 3rem;
            color: #4bd7ff;
            text-shadow: 0 0 18px rgba(48, 193, 255, .5)
        }

        .process-arrow {
            font-size: 1.6rem;
            color: #82b8ff;
            text-align: center
        }

        .step-label {
            margin-top: 1rem;
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #dbe7f5
        }

        .feature-card {
            height: 100%;
            min-height: 195px;
            border-radius: 8px;
            border: 1px solid rgba(47, 142, 255, .24);
            background: linear-gradient(180deg, rgba(9, 16, 28, .96), rgba(3, 7, 12, .96));
            padding: 1.45rem 1rem;
            text-align: center;
            box-shadow: inset 0 0 34px rgba(37, 122, 255, .035);
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin: 0 auto 1rem;
            font-size: 1.9rem;
            color: #50d9ff;
            border: 1px solid rgba(50, 193, 255, .35);
            box-shadow: 0 0 25px rgba(0, 185, 255, .22), inset 0 0 22px rgba(0, 145, 255, .14);
        }

        .feature-card.red .feature-icon {
            color: #ff6479;
            border-color: rgba(255, 71, 95, .4);
            box-shadow: 0 0 25px rgba(255, 50, 90, .18)
        }

        .feature-card.violet .feature-icon {
            color: #9d72ff;
            border-color: rgba(148, 80, 255, .4);
            box-shadow: 0 0 25px rgba(142, 67, 255, .18)
        }

        .feature-card.orange .feature-icon {
            color: #ff765c;
            border-color: rgba(255, 103, 73, .35);
            box-shadow: 0 0 25px rgba(255, 91, 57, .16)
        }

        .feature-card h3 {
            font-size: .95rem;
            text-transform: uppercase;
            font-weight: 700
        }

        .feature-card p {
            font-size: .72rem;
            color: #aeb9c8;
            margin-bottom: 0
        }

        .check-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem
        }

        .check-list li {
            margin: .8rem 0;
            color: #d7e0eb
        }

        .check-list i {
            color: #3bcfff;
            margin-right: .6rem
        }

        .dashboard {
            background: #060d16;
            border: 1px solid rgba(95, 105, 255, .28);
            border-radius: 10px;
            padding: 1rem;
            min-height: 365px;
            box-shadow: 0 0 30px rgba(45, 75, 255, .07);
        }

        .dash-top {
            display: flex;
            justify-content: space-between;
            color: #8290a2;
            font-size: .72rem;
            margin-bottom: .9rem
        }

        .dash-grid {
            display: grid;
            grid-template-columns: 1.8fr .8fr .8fr;
            gap: .7rem
        }

        .camera-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .45rem
        }

        .cam {
            aspect-ratio: 16/9;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            background:
                linear-gradient(180deg, rgba(20, 43, 68, .1), rgba(0, 0, 0, .7)),
                radial-gradient(circle at 75% 35%, rgba(25, 129, 213, .35), transparent 25%),
                linear-gradient(135deg, #0b1724, #152838 45%, #060b12);
            border: 1px solid rgba(102, 164, 255, .08);
        }

        .cam::after {
            content: "CAM 0" attr(data-cam);
            position: absolute;
            left: .45rem;
            bottom: .35rem;
            font-size: .55rem;
            color: #a8bed3;
        }

        .dash-card {
            background: #0a111d;
            border: 1px solid rgba(80, 122, 175, .1);
            border-radius: 6px;
            padding: .8rem;
        }

        .threat-num {
            font-size: 1.7rem;
            color: #f05d6f
        }

        .mini-chart {
            height: 110px;
            margin-top: .8rem;
            background:
                linear-gradient(170deg, transparent 0 35%, rgba(255, 71, 95, .6) 36% 37%, transparent 38% 46%, rgba(255, 71, 95, .5) 47% 48%, transparent 49% 63%, rgba(255, 71, 95, .5) 64% 65%, transparent 66%),
                repeating-linear-gradient(0deg, transparent 0 24px, rgba(255, 255, 255, .04) 25px),
                repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .04) 32px);
        }

        .map {
            height: 100%;
            min-height: 300px;
            background:
                radial-gradient(circle at 64% 44%, #ff5065 0 3px, transparent 4px),
                radial-gradient(circle at 40% 60%, #3f9cff 0 3px, transparent 4px),
                radial-gradient(circle at 74% 70%, #ff5065 0 3px, transparent 4px),
                linear-gradient(135deg, #08111c, #0c1726);
            position: relative;
            overflow: hidden;
        }

        .map::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(30deg, transparent 0 20px, rgba(87, 129, 169, .08) 21px),
                repeating-linear-gradient(120deg, transparent 0 24px, rgba(87, 129, 169, .06) 25px);
        }

        .metric {
            border: 1px solid rgba(58, 145, 255, .25);
            border-radius: 7px;
            background: linear-gradient(180deg, rgba(9, 18, 31, .98), rgba(4, 9, 16, .98));
            padding: 1.4rem;
            height: 100%;
            box-shadow: inset 0 0 25px rgba(29, 93, 255, .03);
        }

        .metric .icon {
            font-size: 2.2rem;
            color: #3ed4ff
        }

        .metric .value {
            font-size: 2.1rem;
            font-weight: 800;
            background: linear-gradient(90deg, #26cfff, #5d76ff, #b257ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .metric small {
            font-size: .68rem;
            color: #a9b4c2
        }

        .metric .delta {
            font-size: .72rem;
            color: var(--green)
        }

        .ai-banner {
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 55%, rgba(17, 100, 255, .23), transparent 24%),
                linear-gradient(180deg, #040913, #02060b);
        }

        .ai-head {
            width: 270px;
            height: 270px;
            border-radius: 50%;
            margin: auto;
            position: relative;
            background:
                radial-gradient(circle at 50% 50%, rgba(0, 212, 255, .35), transparent 4%),
                radial-gradient(circle at 50% 50%, rgba(0, 113, 255, .15), transparent 40%),
                conic-gradient(from 180deg, rgba(0, 204, 255, .8), rgba(83, 93, 255, .75), rgba(184, 67, 255, .65), rgba(0, 196, 255, .8));
            box-shadow: 0 0 65px rgba(0, 131, 255, .28);
            filter: saturate(1.15);
        }

        .ai-head::before {
            content: "";
            position: absolute;
            inset: 44px;
            border: 1px solid rgba(68, 197, 255, .62);
            border-radius: 48% 52% 46% 54%;
            box-shadow: inset 0 0 35px rgba(0, 183, 255, .18), 0 0 35px rgba(49, 114, 255, .25);
        }

        .footer {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 1.5rem 0;
            color: #7c8999;
            font-size: .72rem;
        }

        @media (max-width: 991.98px) {
            .hero {
                padding-top: 8rem;
                min-height: auto;
                padding-bottom: 5rem
            }

            .orb-wrap {
                position: relative;
                right: auto;
                top: auto;
                margin: 3rem auto 0;
                width: 320px;
                height: 320px
            }

            .orb {
                inset: 55px
            }

            .city {
                left: 20%;
                opacity: .45
            }

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

            .process-arrow {
                transform: rotate(90deg)
            }

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

            .map {
                min-height: 220px
            }
        }