:root {
            --bg: #030914;
            --bg-2: #06111f;
            --card: rgba(8, 19, 35, .78);
            --card-2: rgba(12, 26, 47, .86);
            --line: rgba(118, 171, 255, .22);
            --line-strong: rgba(33, 150, 255, .52);
            --text: #f4f8ff;
            --muted: #a8b4c7;
            --muted-2: #718198;
            --blue: #1777ff;
            --blue-2: #0d51d9;
            --cyan: #14d7e8;
            --teal: #10b7bd;
            --shadow: 0 30px 90px rgba(0, 0, 0, .38);
            --glow-blue: 0 0 34px rgba(23, 119, 255, .42);
            --glow-cyan: 0 0 34px rgba(20, 215, 232, .28);
            --radius-xl: 30px;
            --radius-lg: 22px;
            --radius-md: 16px;
            --container: 1180px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:
                    radial-gradient(circle at 76% 12%, rgba(23, 119, 255, .22), transparent 32%),
                    radial-gradient(circle at 18% 32%, rgba(20, 215, 232, .10), transparent 28%),
                    radial-gradient(circle at 50% 96%, rgba(23, 119, 255, .12), transparent 34%),
                    linear-gradient(180deg, #020711 0%, var(--bg) 42%, #020711 100%);
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                    linear-gradient(rgba(118, 171, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(118, 171, 255, .045) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 82%);
        }

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

        .container {
            width: min(var(--container), calc(100% - 40px));
            margin: 0 auto;
        }

        .header {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid rgba(118, 171, 255, .12);
            background: rgba(3, 9, 20, .72);
            backdrop-filter: blur(18px);
        }

        .header__inner {
            min-height: 82px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 26px;
            font-weight: 850;
            letter-spacing: -.045em;
            white-space: nowrap;
        }

        .brand svg {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            filter: drop-shadow(0 0 18px rgba(20, 215, 232, .22));
        }

        .brand__avt {
            color: #ffffff;
        }

        .brand__core {
            color: #ffffff;
            opacity: .92;
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 32px;
            font-size: 15px;
            font-weight: 650;
            color: rgba(244, 248, 255, .82);
        }

        .nav a {
            transition: color .2s ease, opacity .2s ease;
        }

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

        .button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 0 24px;
            border-radius: 12px;
            border: 1px solid transparent;
            font-size: 15px;
            line-height: 1;
            font-weight: 750;
            cursor: pointer;
            white-space: nowrap;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
        }

        .button:hover {
            transform: translateY(-1px);
        }

        .button--primary {
            color: #ffffff;
            background: linear-gradient(135deg, var(--blue), var(--blue-2));
            box-shadow: 0 18px 45px rgba(23, 119, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
        }

        .button--primary:hover {
            box-shadow: 0 22px 56px rgba(23, 119, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .2);
        }

        .button--ghost {
            color: #ffffff;
            background: rgba(3, 9, 20, .36);
            border-color: rgba(33, 150, 255, .52);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
        }

        .button--ghost:hover {
            border-color: rgba(20, 215, 232, .72);
            background: rgba(20, 215, 232, .06);
        }

        .button svg {
            width: 18px;
            height: 18px;
        }

        .hero {
            padding: 46px 0 16px;
            position: relative;
        }

        .hero__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .hero__content {
            position: relative;
            z-index: 2;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            padding: 9px 13px;
            border-radius: 999px;
            color: #bdefff;
            background: rgba(20, 215, 232, .08);
            border: 1px solid rgba(20, 215, 232, .18);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 99px;
            background: var(--cyan);
            box-shadow: 0 0 16px rgba(20, 215, 232, .85);
        }

        h1 {
            margin: 0;
            max-width: 680px;
            font-size: clamp(44px, 5.5vw, 50px);
            line-height: .98;
            letter-spacing: -.07em;
            text-wrap: balance;
        }

        .accent {
            display: inline-block;
            color: transparent;
            background: linear-gradient(90deg, #1777ff 0%, #14d7e8 64%, #10b7bd 100%);
            -webkit-background-clip: text;
            background-clip: text;
            filter: drop-shadow(0 0 18px rgba(20, 215, 232, .12));
        }

        .hero__lead {
            margin: 26px 0 0;
            max-width: 590px;
            color: var(--muted);
            font-size: 19px;
            line-height: 1.72;
        }

        .hero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 34px;
        }

        .hero__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            color: #c5d2e8;
            background: rgba(255, 255, 255, .035);
            border: 1px solid rgba(118, 171, 255, .16);
            font-size: 13px;
            font-weight: 650;
        }

        .tag::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 99px;
            background: var(--cyan);
            box-shadow: 0 0 12px rgba(20, 215, 232, .8);
        }

        .visual {
            min-height: 540px;
            position: relative;
            border-radius: var(--radius-xl);
            background:
                    radial-gradient(circle at 50% 42%, rgba(23, 119, 255, .22), transparent 34%),
                    radial-gradient(circle at 52% 52%, rgba(20, 215, 232, .16), transparent 24%),
                    linear-gradient(135deg, rgba(9, 22, 40, .72), rgba(5, 13, 26, .72));
            border: 1px solid rgba(118, 171, 255, .14);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .visual::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                    linear-gradient(rgba(118, 171, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(118, 171, 255, .07) 1px, transparent 1px);
            background-size: 34px 34px;
            transform: perspective(700px) rotateX(58deg) translateY(-74px) scale(1.32);
            transform-origin: top center;
            opacity: .42;
            mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
        }

        .visual::after {
            content: "";
            position: absolute;
            inset: auto 15% 7% 15%;
            height: 120px;
            background: radial-gradient(ellipse, rgba(23, 119, 255, .32), transparent 68%);
            filter: blur(10px);
        }

        .core {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 210px;
            height: 210px;
            transform: translate(-50%, -50%);
            display: grid;
            place-items: center;
            border-radius: 36px;
            background:
                    linear-gradient(180deg, rgba(16, 36, 65, .98), rgba(5, 15, 29, .96));
            border: 1px solid rgba(20, 215, 232, .32);
            box-shadow:
                    0 0 0 1px rgba(23, 119, 255, .12),
                    0 36px 90px rgba(0, 0, 0, .45),
                    0 0 46px rgba(23, 119, 255, .28);
            z-index: 2;
        }

        .core::before,
        .core::after {
            content: "";
            position: absolute;
            border-radius: 34px;
            border: 1px solid rgba(20, 215, 232, .24);
            background: rgba(23, 119, 255, .035);
            z-index: -1;
        }

        .core::before {
            width: 260px;
            height: 70px;
            bottom: -30px;
            transform: perspective(240px) rotateX(58deg);
            box-shadow: 0 0 34px rgba(23, 119, 255, .25);
        }

        .core::after {
            width: 310px;
            height: 78px;
            bottom: -64px;
            transform: perspective(240px) rotateX(58deg);
            opacity: .72;
        }

        .core svg {
            width: 126px;
            height: 126px;
            filter: drop-shadow(0 0 24px rgba(20, 215, 232, .28));
        }

        .ui-card {
            position: absolute;
            z-index: 3;
            width: 160px;
            min-height: 88px;
            border-radius: 18px;
            padding: 16px;
            background: rgba(7, 17, 32, .72);
            border: 1px solid rgba(118, 171, 255, .20);
            box-shadow: 0 20px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
            backdrop-filter: blur(10px);
        }

        .ui-card--left-top {
            left: 44px;
            top: 62px;
        }

        .ui-card--left-mid {
            left: 40px;
            top: 216px;
        }

        .ui-card--left-bottom {
            left: 70px;
            bottom: 64px;
        }

        .ui-card--right-top {
            right: 30px;
            top: 76px;
            width: 180px;
        }

        .ui-card--right-mid {
            right: 54px;
            top: 236px;
            width: 172px;
        }

        .ui-card--right-bottom {
            right: 36px;
            bottom: 74px;
            width: 190px;
        }

        .mini-line {
            height: 7px;
            border-radius: 999px;
            background: rgba(168, 180, 199, .26);
            margin-top: 10px;
        }

        .mini-line:nth-child(2) {
            width: 72%;
        }

        .mini-line:nth-child(3) {
            width: 52%;
        }

        .mini-line--blue {
            background: linear-gradient(90deg, var(--blue), rgba(23, 119, 255, .16));
        }

        .mini-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: var(--cyan);
            border-radius: 13px;
            background: rgba(20, 215, 232, .08);
            border: 1px solid rgba(20, 215, 232, .16);
            margin-bottom: 4px;
        }

        .mini-icon svg {
            width: 24px;
            height: 24px;
        }

        .connector {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(20, 215, 232, .78), transparent);
            box-shadow: 0 0 18px rgba(20, 215, 232, .48);
            z-index: 1;
        }

        .connector::after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 8px;
            height: 8px;
            border-radius: 99px;
            background: var(--cyan);
            box-shadow: 0 0 16px rgba(20, 215, 232, .9);
        }

        .connector--1 { width: 105px; left: 184px; top: 134px; transform: rotate(18deg); }
        .connector--2 { width: 92px; left: 184px; top: 262px; }
        .connector--3 { width: 106px; left: 222px; bottom: 138px; transform: rotate(-20deg); }
        .connector--4 { width: 112px; right: 190px; top: 144px; transform: rotate(-17deg); }
        .connector--5 { width: 96px; right: 210px; top: 284px; }
        .connector--6 { width: 114px; right: 210px; bottom: 138px; transform: rotate(17deg); }

        .section {
            padding: 56px 0;
            position: relative;
        }

        .section__head {
            max-width: 760px;
            margin: 0 auto 34px;
            text-align: center;
        }

        h2 {
            margin: 0;
            font-size: clamp(30px, 3.4vw, 36px);
            line-height: 1.08;
            letter-spacing: -.05em;
        }

        .section__head::after {
            content: "";
            display: block;
            width: 46px;
            height: 3px;
            margin: 16px auto 0;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--blue), var(--cyan));
            box-shadow: 0 0 18px rgba(20, 215, 232, .42);
        }

        .section__text {
            margin: 14px auto 0;
            max-width: 660px;
            color: var(--muted);
            font-size: 17px;
            line-height: 1.65;
        }

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

        .card {
            position: relative;
            min-height: 184px;
            padding: 28px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background:
                    linear-gradient(135deg, rgba(10, 25, 46, .9), rgba(5, 13, 26, .86));
            border: 1px solid rgba(118, 171, 255, .20);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .045);
        }

        .card::before {
            content: "";
            position: absolute;
            inset: -40% auto auto -20%;
            width: 190px;
            height: 190px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(20, 215, 232, .14), transparent 66%);
        }

        .card__icon {
            position: relative;
            width: 68px;
            height: 68px;
            display: grid;
            place-items: center;
            margin-bottom: 20px;
            border-radius: 22px;
            color: var(--cyan);
            background: rgba(20, 215, 232, .08);
            border: 1px solid rgba(20, 215, 232, .20);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 28px rgba(20, 215, 232, .12);
        }

        .card__icon svg {
            width: 34px;
            height: 34px;
        }

        .card h3 {
            position: relative;
            margin: 0 0 10px;
            font-size: 21px;
            letter-spacing: -.025em;
        }

        .card p {
            position: relative;
            margin: 0;
            color: var(--muted);
            font-size: 15.5px;
            line-height: 1.64;
        }

        .projects {
            padding-top: 20px;
        }

        .app-list {
            display: grid;
            gap: 22px;
        }

        .app-card {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 26px;
            align-items: center;
            padding: 30px;
            border-radius: var(--radius-xl);
            background:
                    radial-gradient(circle at 10% 18%, rgba(23, 119, 255, .18), transparent 24%),
                    linear-gradient(135deg, rgba(10, 25, 46, .92), rgba(5, 13, 26, .88));
            border: 1px solid rgba(118, 171, 255, .22);
            box-shadow: 0 28px 78px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
        }

        .lumi-icon {
            width: 92px;
            height: 92px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 25px;
            color: #ffffff;
            background:
                    radial-gradient(circle at 74% 78%, rgba(20, 215, 232, .58), transparent 22%),
                    linear-gradient(135deg, #0b3c8b, #156fff);
            border: 1px solid rgba(132, 184, 255, .34);
            box-shadow: 0 18px 45px rgba(23, 119, 255, .28), 0 0 36px rgba(20, 215, 232, .14);
        }

        .lumi-icon svg {
            width: 56px;
            height: 56px;
        }

        .challenger-icon {
            width: 92px;
            height: 92px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 25px;
            color: #ffffff;
            background:
                    radial-gradient(circle at 72% 24%, rgba(20, 215, 232, .54), transparent 24%),
                    linear-gradient(135deg, #10366e, #0fa3b8);
            border: 1px solid rgba(132, 231, 255, .34);
            box-shadow: 0 18px 45px rgba(20, 215, 232, .20), 0 0 36px rgba(23, 119, 255, .14);
        }

        .challenger-icon svg {
            width: 56px;
            height: 56px;
        }

        .app-card h3 {
            margin: 0 0 8px;
            font-size: 31px;
            letter-spacing: -.04em;
        }

        .app-card p {
            margin: 0;
            max-width: 650px;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.62;
        }

        .contact {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 28px;
            align-items: center;
            padding: 38px;
            border-radius: var(--radius-xl);
            background:
                    radial-gradient(circle at 90% 30%, rgba(20, 215, 232, .18), transparent 26%),
                    linear-gradient(135deg, rgba(14, 70, 155, .92), rgba(6, 24, 43, .95));
            border: 1px solid rgba(20, 215, 232, .24);
            box-shadow: 0 30px 86px rgba(0, 0, 0, .34), 0 0 48px rgba(23, 119, 255, .13);
        }

        .contact h2 {
            max-width: 760px;
        }

        .contact p {
            margin: 14px 0 0;
            max-width: 700px;
            color: rgba(244, 248, 255, .74);
            font-size: 17px;
            line-height: 1.62;
        }

        .footer {
            padding: 34px 0;
            border-top: 1px solid rgba(118, 171, 255, .14);
            background: rgba(2, 7, 17, .78);
        }

        .footer__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            color: var(--muted-2);
            font-size: 14px;
        }

        .footer__left {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .footer .brand {
            font-size: 24px;
        }

        .footer .brand svg {
            width: 38px;
            height: 38px;
        }

        .divider {
            width: 1px;
            height: 30px;
            background: rgba(118, 171, 255, .20);
        }

        @media (max-width: 1040px) {
            .nav {
                display: none;
            }

            .hero__grid {
                grid-template-columns: 1fr;
            }

            .visual {
                min-height: 500px;
            }

            .cards {
                grid-template-columns: 1fr;
            }

            .app-card,
            .contact {
                grid-template-columns: 1fr;
            }

            .app-card .button,
            .contact .button {
                width: max-content;
            }
        }

        @media (max-width: 720px) {
            .container {
                width: min(100% - 28px, var(--container));
            }

            .header__inner {
                min-height: 72px;
            }

            .header .button {
                display: none;
            }

            .brand {
                font-size: 23px;
            }

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

            .hero {
                padding: 50px 0 36px;
            }

            .hero__lead {
                font-size: 17px;
            }

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

            .visual {
                min-height: 440px;
            }

            .core {
                width: 172px;
                height: 172px;
            }

            .core svg {
                width: 104px;
                height: 104px;
            }

            .core::before {
                width: 210px;
            }

            .core::after {
                width: 250px;
            }

            .ui-card {
                width: 130px;
                min-height: 72px;
                padding: 12px;
            }

            .ui-card--left-top { left: 12px; top: 36px; }
            .ui-card--left-mid { left: 12px; top: 172px; }
            .ui-card--left-bottom { left: 24px; bottom: 42px; }
            .ui-card--right-top { right: 12px; top: 52px; width: 134px; }
            .ui-card--right-mid { right: 12px; top: 190px; width: 134px; }
            .ui-card--right-bottom { right: 22px; bottom: 50px; width: 136px; }

            .connector {
                display: none;
            }

            .app-card {
                padding: 24px;
            }

            .footer__inner,
            .footer__left {
                flex-direction: column;
                align-items: flex-start;
            }

            .divider {
                display: none;
            }
        }

        .visual--image {
            min-height: 520px;
            border: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .visual--image::before,
        .visual--image::after {
            display: none;
        }

        .visual--image img {
            width: min(100%, 755px);
            height: auto;
            display: block;
            object-fit: contain;
            filter: drop-shadow(0 28px 72px rgba(0, 0, 0, .28));
        }

        @media (max-width: 1040px) {
            .visual--image {
                min-height: auto;
            }

            .visual--image img {
                width: min(100%, 760px);
            }
        }

        @media (max-width: 720px) {
            .visual--image {
                margin-top: 12px;
            }
        }