@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&family=Orbitron:wght@500;600;700;800&display=swap');

        :root {
            --bg: #070910;
            --bg-deep: #03050a;
            --surface: rgba(16, 21, 34, 0.72);
            --surface-solid: #101622;
            --line: rgba(178, 215, 255, 0.14);
            --line-light: rgba(206, 231, 255, 0.23);
            --text: #f5f8ff;
            --muted: #92a0b7;
            --cyan: #23e6ff;
            --cyan-light: #9ff7ff;
            --blue: #3978ff;
            --violet: #9c5cff;
            --green: #21e59a;
            --danger: #ff5d73;
            --shadow: 0 25px 80px rgba(0, 0, 0, 0.48);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            color: var(--text);
            overflow-x: hidden;
            background:
                radial-gradient(circle at 75% 8%, rgba(51, 105, 255, 0.20), transparent 27rem),
                radial-gradient(circle at 15% 70%, rgba(141, 55, 255, 0.16), transparent 32rem),
                radial-gradient(circle at 48% 115%, rgba(0, 213, 255, 0.12), transparent 30rem),
                var(--bg);
            font-family: "Vazirmatn", Tahoma, sans-serif;
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            pointer-events: none;
            z-index: -1;
            border-radius: 50%;
            filter: blur(2px);
        }

        body::before {
            width: 420px;
            height: 420px;
            top: 15%;
            right: -160px;
            background: rgba(0, 220, 255, 0.10);
            box-shadow: 0 0 160px 80px rgba(0, 220, 255, 0.08);
            animation: floatGlow 9s ease-in-out infinite alternate;
        }

        body::after {
            width: 360px;
            height: 360px;
            bottom: -110px;
            left: -80px;
            background: rgba(129, 65, 255, 0.12);
            box-shadow: 0 0 150px 70px rgba(129, 65, 255, 0.08);
            animation: floatGlow 11s ease-in-out infinite alternate-reverse;
        }

        .grid-overlay {
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            opacity: 0.34;
            background-image:
                linear-gradient(rgba(104, 143, 190, .07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(104, 143, 190, .07) 1px, transparent 1px);
            background-size: 54px 54px;
            mask-image: linear-gradient(to bottom, black, transparent 82%);
        }

        .noise {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 30;
            opacity: .035;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
        }

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

        button {
            font: inherit;
            border: 0;
            cursor: pointer;
        }

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

        /* Header */
        .header {
            height: 86px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 10;
            border-bottom: 1px solid rgba(190, 225, 255, .09);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .brand-mark {
            width: 45px;
            height: 45px;
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(105, 237, 255, .53);
            border-radius: 13px;
            color: #061019;
            font-family: Orbitron, sans-serif;
            font-size: 17px;
            font-weight: 800;
            background: linear-gradient(135deg, #a9faff, #20cff4 48%, #496eff);
            box-shadow: 0 0 28px rgba(29, 222, 255, .25);
        }

        .brand-mark::before {
            content: "";
            width: 80px;
            height: 15px;
            position: absolute;
            transform: rotate(-45deg);
            background: rgba(255, 255, 255, .55);
        }

        .brand-name {
            line-height: 1.1;
        }

        .brand-name b {
            display: block;
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 16px;
            letter-spacing: .8px;
        }

        .brand-name span {
            font-size: 10px;
            color: var(--cyan);
            letter-spacing: 2.5px;
            font-family: Orbitron, sans-serif;
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px;
            border: 1px solid rgba(193, 220, 255, .08);
            background: rgba(6, 10, 18, .32);
            backdrop-filter: blur(14px);
            border-radius: 14px;
        }

        .nav a {
            padding: 10px 15px;
            color: #aab6c9;
            font-size: 13px;
            border-radius: 9px;
            transition: .22s ease;
        }

        .nav a:hover,
        .nav a.active {
            color: #fff;
            background: rgba(98, 148, 255, .14);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .discord-button {
            min-height: 42px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 15px;
            color: #dfe6ff;
            font-size: 12px;
            font-weight: 700;
            border: 1px solid rgba(137, 116, 255, .32);
            border-radius: 10px;
            background: rgba(105, 85, 196, .13);
            transition: .25s;
        }

        .discord-button:hover {
            transform: translateY(-2px);
            color: #fff;
            border-color: rgba(166, 150, 255, .75);
            box-shadow: 0 10px 25px rgba(102, 80, 224, .16);
        }

        .menu-button {
            display: none;
            width: 42px;
            height: 42px;
            color: #dce9ff;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--surface);
        }

        /* Hero */
        .hero {
            min-height: 680px;
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            align-items: center;
            gap: 56px;
            padding: 74px 0 56px;
        }

        .hero-copy {
            position: relative;
            z-index: 1;
        }

        .eyebrow {
            width: fit-content;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 12px;
            margin-bottom: 22px;
            color: #baf8ff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .7px;
            border: 1px solid rgba(39, 222, 255, .23);
            border-radius: 99px;
            background: rgba(16, 168, 221, .08);
        }

        .pulse-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 0 0 rgba(33, 229, 154, .65);
            animation: pulse 1.7s infinite;
        }

        h1 {
            max-width: 720px;
            font-size: clamp(42px, 5vw, 78px);
            line-height: 1.16;
            font-weight: 900;
            letter-spacing: -2.4px;
        }

        h1 .accent {
            background: linear-gradient(100deg, #c7fbff 5%, #2ee7ff 42%, #7b8dff 90%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-description {
            max-width: 620px;
            margin-top: 25px;
            color: #9ba9bc;
            font-size: 16px;
            font-weight: 500;
            line-height: 2.1;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 35px;
        }

        .btn {
            min-height: 54px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 22px;
            border-radius: 11px;
            transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
            font-size: 14px;
            font-weight: 800;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

        .btn-primary {
            position: relative;
            color: #041017;
            overflow: hidden;
            background: linear-gradient(105deg, #a4fbff, #27d7f7 48%, #5188ff);
            box-shadow: 0 13px 34px rgba(22, 184, 242, .25);
        }

        .btn-primary::before {
            content: "";
            position: absolute;
            inset: 0;
            transform: translateX(-110%) skewX(-20deg);
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .68), transparent);
            transition: .65s;
        }

        .btn-primary:hover::before {
            transform: translateX(130%) skewX(-20deg);
        }

        .btn-primary:hover {
            box-shadow: 0 15px 43px rgba(22, 184, 242, .43);
        }

        .btn-secondary {
            color: #dae6f7;
            border: 1px solid rgba(189, 218, 255, .20);
            background: rgba(255, 255, 255, .035);
        }

        .btn-secondary:hover {
            color: #fff;
            background: rgba(114, 177, 255, .11);
            border-color: rgba(106, 221, 255, .48);
        }

        .platform-info {
            display: flex;
            gap: 25px;
            margin-top: 29px;
            color: #718198;
            font-size: 11px;
        }

        .platform-info span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .platform-info svg {
            color: var(--cyan);
        }

        /* Launcher visual */
        .launcher-showcase {
            position: relative;
            display: flex;
            justify-content: center;
            perspective: 1200px;
        }

        .orbital-ring {
            position: absolute;
            width: 560px;
            aspect-ratio: 1;
            border: 1px solid rgba(75, 166, 255, .13);
            border-radius: 50%;
            transform: rotateX(67deg) rotateZ(-16deg);
        }

        .orbital-ring::before,
        .orbital-ring::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(98, 96, 255, .13);
        }

        .orbital-ring::before {
            inset: 44px;
        }

        .orbital-ring::after {
            inset: 98px;
        }

        .launcher-window {
            width: min(100%, 520px);
            min-height: 492px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(171, 221, 255, .28);
            border-radius: 18px;
            background:
                linear-gradient(130deg, rgba(23, 45, 78, .82), rgba(9, 14, 26, .94) 45%, rgba(32, 18, 64, .80)),
                #0c1220;
            box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(53, 217, 255, .05) inset;
            transform: rotateY(-8deg) rotateX(3deg);
            animation: windowFloat 5.5s ease-in-out infinite;
        }

        .launcher-window::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .5;
            background:
                radial-gradient(circle at 78% 32%, rgba(36, 238, 255, .27), transparent 25%),
                radial-gradient(circle at 20% 90%, rgba(113, 53, 255, .28), transparent 35%);
        }

        .window-topbar {
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            position: relative;
            border-bottom: 1px solid rgba(199, 229, 255, .10);
            background: rgba(2, 7, 14, .48);
        }

        .mini-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: Orbitron, sans-serif;
            font-size: 10px;
            letter-spacing: 1px;
            color: #d4efff;
        }

        .mini-logo {
            width: 19px;
            height: 19px;
            display: grid;
            place-items: center;
            color: #031017;
            font-size: 9px;
            font-weight: 900;
            border-radius: 5px;
            background: #38e5fb;
        }

        .window-controls {
            display: flex;
            direction: ltr;
            gap: 6px;
        }

        .window-controls i {
            width: 8px;
            height: 8px;
            display: block;
            border-radius: 50%;
            background: #536176;
        }

        .window-controls i:last-child {
            background: #ff687d;
        }

        .launcher-content {
            padding: 26px 29px;
            position: relative;
        }

        .launcher-content small {
            color: #85a0bb;
            font-size: 10px;
        }

        .launcher-content h3 {
            margin-top: 5px;
            font-size: 24px;
            font-weight: 800;
        }

        .server-state {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 14px;
            margin-top: 22px;
            border: 1px solid rgba(79, 231, 183, .17);
            border-radius: 10px;
            background: rgba(21, 205, 137, .07);
        }

        .state-label {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #bfffe6;
            font-size: 11px;
            font-weight: 700;
        }

        .state-label b {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #28e697;
            box-shadow: 0 0 11px #28e697;
        }

        .online-count {
            color: #d6e0ec;
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 11px;
        }

        .online-count strong {
            color: #46f0ae;
            font-size: 15px;
        }

        .fake-news {
            margin-top: 18px;
            padding: 15px;
            border: 1px solid rgba(174, 210, 255, .09);
            border-radius: 10px;
            background: rgba(255, 255, 255, .035);
        }

        .fake-news-head {
            display: flex;
            justify-content: space-between;
            color: #dceaff;
            font-size: 11px;
            font-weight: 700;
        }

        .fake-news-head span {
            color: var(--cyan);
            font-size: 9px;
        }

        .fake-news p {
            margin-top: 10px;
            color: #8293aa;
            font-size: 10px;
            line-height: 1.9;
        }

        .fake-connect {
            width: 100%;
            min-height: 47px;
            margin-top: 19px;
            color: #061219;
            font-size: 12px;
            font-weight: 900;
            border-radius: 9px;
            background: linear-gradient(100deg, #3cedef, #467aff);
            box-shadow: 0 8px 20px rgba(37, 194, 247, .18);
        }

        .launcher-version {
            margin-top: 12px;
            text-align: center;
            color: #65758a;
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 8px;
            letter-spacing: 1px;
        }

        /* Stats */
        .stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            margin: 15px 0 92px;
            border: 1px solid var(--line);
            border-radius: 17px;
            overflow: hidden;
            background: rgba(10, 15, 25, .48);
            backdrop-filter: blur(15px);
            box-shadow: var(--shadow);
        }

        .stat {
            min-height: 112px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px 28px;
            border-left: 1px solid var(--line);
        }

        .stat:last-child {
            border-left: 0;
        }

        .stat-value {
            display: flex;
            align-items: baseline;
            gap: 6px;
            color: #f3f9ff;
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 27px;
            font-weight: 700;
        }

        .stat-value em {
            color: var(--cyan);
            font-size: 11px;
            font-style: normal;
        }

        .stat-label {
            margin-top: 7px;
            color: #718197;
            font-size: 11px;
        }

        /* Features */
        .section-heading {
            max-width: 670px;
            margin: 0 auto 38px;
            text-align: center;
        }

        .section-heading>span {
            color: var(--cyan);
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 10px;
            letter-spacing: 2.5px;
        }

        .section-heading h2 {
            margin-top: 12px;
            font-size: clamp(29px, 3vw, 43px);
            font-weight: 900;
            letter-spacing: -1px;
        }

        .section-heading p {
            margin-top: 13px;
            color: #8898ac;
            font-size: 14px;
            line-height: 2;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 17px;
            padding-bottom: 105px;
        }

        .feature-card {
            min-height: 252px;
            padding: 26px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(23, 30, 48, .78), rgba(10, 14, 24, .66));
            transition: transform .28s ease, border .28s ease, box-shadow .28s ease;
        }

        .feature-card::after {
            content: "";
            width: 160px;
            height: 160px;
            position: absolute;
            top: -80px;
            left: -75px;
            border-radius: 50%;
            background: rgba(37, 219, 255, .11);
            filter: blur(16px);
            transition: .3s;
        }

        .feature-card:hover {
            transform: translateY(-7px);
            border-color: rgba(75, 221, 255, .42);
            box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
        }

        .feature-card:hover::after {
            background: rgba(91, 114, 255, .20);
        }

        .feature-icon {
            width: 49px;
            height: 49px;
            display: grid;
            place-items: center;
            position: relative;
            z-index: 1;
            color: var(--cyan-light);
            border: 1px solid rgba(76, 226, 255, .26);
            border-radius: 13px;
            background: rgba(27, 183, 213, .10);
        }

        .feature-card:nth-child(2) .feature-icon {
            color: #d3b8ff;
            border-color: rgba(169, 108, 255, .28);
            background: rgba(144, 82, 255, .10);
        }

        .feature-card:nth-child(3) .feature-icon {
            color: #b9ffdc;
            border-color: rgba(65, 255, 167, .25);
            background: rgba(34, 211, 132, .09);
        }

        .feature-card h3 {
            margin-top: 21px;
            position: relative;
            z-index: 1;
            font-size: 18px;
        }

        .feature-card p {
            margin-top: 10px;
            position: relative;
            z-index: 1;
            color: #8595aa;
            font-size: 12px;
            line-height: 2.05;
        }

        .feature-number {
            position: absolute;
            left: 22px;
            bottom: 16px;
            color: rgba(179, 211, 248, .16);
            font-family: Orbitron, sans-serif;
            font-size: 28px;
            font-weight: 700;
        }

        /* Download */
        .download-section {
            margin-bottom: 68px;
            padding: 1px;
            overflow: hidden;
            border-radius: 20px;
            background: linear-gradient(120deg, rgba(42, 229, 255, .52), rgba(112, 74, 255, .32), rgba(255, 255, 255, .05));
        }

        .download-inner {
            min-height: 285px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            position: relative;
            overflow: hidden;
            padding: 48px 58px;
            border-radius: 19px;
            background:
                radial-gradient(circle at 12% 0%, rgba(0, 222, 255, .17), transparent 27%),
                radial-gradient(circle at 88% 95%, rgba(125, 66, 255, .20), transparent 31%),
                #0d1320;
        }

        .download-inner::after {
            content: "VELO";
            position: absolute;
            left: -12px;
            bottom: -58px;
            color: rgba(177, 219, 255, .035);
            font-family: Orbitron, sans-serif;
            font-size: 175px;
            font-weight: 800;
            letter-spacing: -16px;
            pointer-events: none;
        }

        .download-copy {
            position: relative;
            z-index: 1;
        }

        .download-copy small {
            color: var(--cyan);
            font-family: Orbitron, Vazirmatn, sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
        }

        .download-copy h2 {
            margin-top: 10px;
            font-size: clamp(26px, 3vw, 39px);
            font-weight: 900;
        }

        .download-copy p {
            margin-top: 11px;
            color: #91a0b4;
            font-size: 13px;
        }

        .download-area {
            min-width: 240px;
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .download-area .btn {
            width: 100%;
        }

        .download-meta {
            margin-top: 12px;
            color: #718197;
            font-size: 10px;
        }

        /* Footer */
        footer {
            padding: 25px 0 36px;
            border-top: 1px solid rgba(189, 219, 255, .09);
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            color: #66758a;
            font-size: 11px;
        }

        .footer-links {
            display: flex;
            gap: 18px;
        }

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

        /* Notification */
        .toast {
            min-width: 290px;
            display: flex;
            align-items: center;
            gap: 11px;
            position: fixed;
            left: 25px;
            bottom: 25px;
            z-index: 50;
            padding: 14px;
            color: #eafff6;
            font-size: 12px;
            border: 1px solid rgba(64, 241, 171, .28);
            border-radius: 12px;
            background: rgba(12, 31, 31, .93);
            box-shadow: 0 15px 45px rgba(0, 0, 0, .42);
            transform: translateY(140px);
            opacity: 0;
            transition: .35s ease;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast-icon {
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            color: #052316;
            border-radius: 8px;
            background: var(--green);
        }

        @keyframes pulse {
            70% {
                box-shadow: 0 0 0 8px rgba(33, 229, 154, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(33, 229, 154, 0);
            }
        }

        @keyframes floatGlow {
            to {
                transform: translate(35px, -35px) scale(1.12);
            }
        }

        @keyframes windowFloat {

            0%,
            100% {
                transform: rotateY(-8deg) rotateX(3deg) translateY(0);
            }

            50% {
                transform: rotateY(-8deg) rotateX(3deg) translateY(-13px);
            }
        }

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

            .hero {
                grid-template-columns: 1fr;
                padding-top: 62px;
            }

            .hero-copy {
                text-align: center;
            }

            .eyebrow,
            .hero-buttons {
                margin-right: auto;
                margin-left: auto;
            }

            .hero-description {
                margin-right: auto;
                margin-left: auto;
            }

            .platform-info {
                justify-content: center;
            }

            .launcher-showcase {
                margin-top: -15px;
            }

            .stats {
                margin-top: 45px;
            }
        }

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

            .header {
                height: 72px;
            }

            .brand-name {
                display: none;
            }

            .discord-button {
                display: none;
            }

            .menu-button {
                display: grid;
                place-items: center;
            }

            .hero {
                min-height: auto;
                gap: 30px;
                padding: 53px 0 38px;
            }

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

            .hero-description {
                font-size: 13px;
            }

            .hero-buttons {
                width: 100%;
            }

            .hero-buttons .btn {
                flex: 1;
                padding: 0 13px;
            }

            .platform-info {
                gap: 10px;
                font-size: 9px;
                flex-wrap: wrap;
            }

            .orbital-ring {
                width: 390px;
            }

            .launcher-window {
                min-height: 460px;
                transform: none;
            }

            @keyframes windowFloat {

                0%,
                100% {
                    transform: translateY(0);
                }

                50% {
                    transform: translateY(-8px);
                }
            }

            .launcher-content {
                padding: 21px;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
                margin-bottom: 68px;
            }

            .stat {
                min-height: 96px;
                padding: 16px;
                border-bottom: 1px solid var(--line);
            }

            .stat:nth-child(2) {
                border-left: 0;
            }

            .stat:nth-child(3),
            .stat:nth-child(4) {
                border-bottom: 0;
            }

            .features {
                grid-template-columns: 1fr;
                padding-bottom: 70px;
            }

            .download-inner {
                flex-direction: column;
                align-items: stretch;
                padding: 37px 25px;
                text-align: center;
            }

            .download-area {
                min-width: 0;
            }

            .footer-inner {
                flex-direction: column;
                text-align: center;
            }

            .footer-links {
                flex-wrap: wrap;
                justify-content: center;
            }
        }