Загрузка данных


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GTASHE4KA RP — Твоя новая реальность в GTA 5 RolePlay</title>
    <!-- Подключение шрифтов в стиле Majestic RP -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Unbounded:wght@700;800;900&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --bg-main: #090a0f;
            --bg-secondary: #11131c;
            --bg-card: rgba(20, 23, 34, 0.75);
            --bg-card-hover: rgba(28, 32, 48, 0.95);
            --accent: #ffcc00;
            --accent-hover: #ffe047;
            --accent-dark: #cc9900;
            --accent-glow: rgba(255, 204, 0, 0.35);
            --accent-soft: rgba(255, 204, 0, 0.1);
            --text-main: #ffffff;
            --text-muted: #8b92a5;
            --border-color: rgba(255, 255, 255, 0.07);
            --border-accent: rgba(255, 204, 0, 0.4);
            --success: #00e676;
            --radius-md: 14px;
            --radius-lg: 22px;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.5;
            background-image: 
                radial-gradient(circle at 85% 10%, rgba(255, 204, 0, 0.12) 0%, transparent 45%),
                radial-gradient(circle at 10% 45%, rgba(255, 170, 0, 0.07) 0%, transparent 40%),
                radial-gradient(circle at 80% 85%, rgba(255, 204, 0, 0.08) 0%, transparent 40%);
        }

        /* Кастомный скроллбар */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-main);
        }
        ::-webkit-scrollbar-thumb {
            background: #25293a;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        .container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* Утилиты */
        .text-accent {
            color: var(--accent);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--accent-soft);
            border: 1px solid var(--border-accent);
            border-radius: 100px;
            color: var(--accent);
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 20px;
        }

        .section-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 900;
            text-transform: uppercase;
            line-height: 1.15;
            margin-bottom: 16px;
            letter-spacing: -0.5px;
        }

        .section-subtitle {
            color: var(--text-muted);
            font-size: 16px;
            max-width: 600px;
            font-weight: 500;
        }

        /* Кнопки */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 32px;
            border-radius: var(--radius-md);
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg, #ffd900 0%, #ffae00 100%);
            color: #090a0f;
            box-shadow: 0 10px 30px var(--accent-glow);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 40px rgba(255, 204, 0, 0.55);
            background: linear-gradient(135deg, #ffe347 0%, #ffc400 100%);
        }

        .btn-outline {
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            border: 1px solid rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
        }

        .btn-outline:hover {
            background: rgba(255, 204, 0, 0.1);
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-3px);
        }

        /* НАВИГАЦИЯ */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(9, 10, 15, 0.82);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 88px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            color: var(--text-main);
        }

        .logo-icon {
            width: 46px;
            height: 46px;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Unbounded', sans-serif;
            font-weight: 900;
            font-size: 24px;
            color: #090a0f;
            box-shadow: 0 0 25px var(--accent-glow);
            transform: skewX(-6deg);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-brand {
            font-family: 'Unbounded', sans-serif;
            font-weight: 900;
            font-size: 20px;
            letter-spacing: 0.5px;
            line-height: 1;
        }

        .logo-sub {
            font-size: 10px;
            font-weight: 800;
            color: var(--accent);
            letter-spacing: 3.5px;
            text-transform: uppercase;
            margin-top: 4px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 34px;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            transition: var(--transition);
            position: relative;
            padding: 8px 0;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text-main);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 2px;
            background: var(--accent);
            box-shadow: 0 0 10px var(--accent);
            transition: var(--transition);
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .x2-pill {
            background: rgba(255, 204, 0, 0.15);
            color: var(--accent);
            border: 1px solid var(--accent);
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 900;
            animation: pulseGlow 2s infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.4); }
            50% { box-shadow: 0 0 12px 2px rgba(255, 204, 0, 0.6); }
        }

        /* HERO SECTION */
        .hero {
            position: relative;
            min-height: 100vh;
            padding-top: 140px;
            padding-bottom: 80px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .hero-bg-grid {
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
            z-index: -1;
        }

        .hero-wrapper {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 48px;
            align-items: center;
        }

        .online-badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(20, 23, 34, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 10px 20px;
            border-radius: 100px;
            margin-bottom: 28px;
            backdrop-filter: blur(10px);
        }

        .online-dot {
            width: 10px;
            height: 10px;
            background: var(--success);
            border-radius: 50%;
            box-shadow: 0 0 12px var(--success);
            position: relative;
        }

        .online-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid var(--success);
            animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        @keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        .online-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
        }

        .online-count {
            color: var(--text-main);
            font-weight: 800;
            font-size: 15px;
        }

        .hero-title {
            font-family: 'Unbounded', sans-serif;
            font-size: clamp(36px, 5.2vw, 66px);
            font-weight: 900;
            line-height: 1.06;
            text-transform: uppercase;
            margin-bottom: 24px;
            letter-spacing: -1.5px;
        }

        .hero-title .highlight {
            background: linear-gradient(90deg, #ffcc00 0%, #fff099 50%, #ffae00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 10px 35px rgba(255, 204, 0, 0.25);
        }

        .hero-desc {
            font-size: 17px;
            color: var(--text-muted);
            max-width: 560px;
            margin-bottom: 40px;
            font-weight: 500;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 48px;
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            padding-top: 32px;
            border-top: 1px solid var(--border-color);
            max-width: 540px;
        }

        .stat-item h4 {
            font-family: 'Unbounded', sans-serif;
            font-size: 26px;
            font-weight: 800;
            color: var(--text-main);
        }

        .stat-item p {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }

        /* Правая часть Hero с карточкой персонажа/арта */
        .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-glow-circle {
            position: absolute;
            width: 440px;
            height: 440px;
            background: radial-gradient(circle, rgba(255, 204, 0, 0.28) 0%, transparent 70%);
            filter: blur(45px);
            z-index: 0;
        }

        .hero-showcase-card {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 480px;
            height: 550px;
            border-radius: 28px;
            background: linear-gradient(165deg, rgba(32, 36, 52, 0.85) 0%, rgba(13, 15, 23, 0.95) 100%);
            border: 1px solid rgba(255, 204, 0, 0.3);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 204, 0, 0.12);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 32px;
            background-image: 
                linear-gradient(to top, #090a0f 12%, rgba(9, 10, 15, 0.3) 55%, transparent 100%),
                url('https://images.unsplash.com/photo-1617788138017-80ad40651399?auto=format&fit=crop&w=1000&q=80');
            background-size: cover;
            background-position: center;
        }

        .showcase-tag {
            position: absolute;
            top: 24px;
            right: 24px;
            background: rgba(9, 10, 15, 0.8);
            border: 1px solid var(--border-accent);
            backdrop-filter: blur(8px);
            padding: 8px 16px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 12px;
            color: var(--accent);
            text-transform: uppercase;
        }

        .promo-box {
            background: rgba(15, 17, 25, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(14px);
            border-radius: 18px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .promo-info span {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            font-weight: 700;
            display: block;
        }

        .promo-info strong {
            font-family: 'Unbounded', sans-serif;
            font-size: 20px;
            color: var(--accent);
            letter-spacing: 1px;
        }

        .promo-info p {
            font-size: 12px;
            color: #d0d5e0;
            margin-top: 2px;
        }

        .copy-promo-btn {
            background: var(--accent);
            color: #090a0f;
            border: none;
            border-radius: 12px;
            padding: 12px 18px;
            font-weight: 800;
            font-size: 12px;
            cursor: pointer;
            text-transform: uppercase;
            transition: var(--transition);
        }

        .copy-promo-btn:hover {
            background: var(--accent-hover);
            transform: scale(1.05);
        }

        /* МОНИТОРИНГ СЕРВЕРОВ */
        .servers-section {
            padding: 100px 0;
            position: relative;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 48px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .servers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
            gap: 24px;
        }

        .server-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 26px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(12px);
        }

        .server-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--accent);
            opacity: 0.4;
            transition: var(--transition);
        }

        .server-card:hover {
            transform: translateY(-6px);
            background: var(--bg-card-hover);
            border-color: var(--border-accent);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 204, 0, 0.08);
        }

        .server-card:hover::before {
            opacity: 1;
            box-shadow: 0 0 15px var(--accent);
        }

        .server-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .server-name {
            font-family: 'Unbounded', sans-serif;
            font-size: 18px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .server-num {
            font-size: 12px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 8px;
            background: var(--accent-soft);
            color: var(--accent);
            border: 1px solid rgba(255, 204, 0, 0.25);
        }

        .server-online-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .server-online-row span:first-child {
            color: var(--text-muted);
        }

        .progress-track {
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff9900, #ffcc00);
            border-radius: 10px;
            box-shadow: 0 0 12px var(--accent);
            transition: width 0.8s ease;
        }

        .server-ip-btn {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px dashed rgba(255, 255, 255, 0.15);
            color: var(--text-muted);
            font-family: 'Montserrat', sans-serif;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--transition);
        }

        .server-ip-btn:hover {
            background: var(--accent-soft);
            border-color: var(--accent);
            color: var(--accent);
        }

        /* КАК НАЧАТЬ ИГРАТЬ (3 ШАГА) */
        .steps-section {
            padding: 100px 0;
            background: linear-gradient(180deg, transparent 0%, rgba(17, 19, 28, 0.6) 50%, transparent 100%);
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin-top: 48px;
        }

        .step-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 40px 32px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 360px;
            transition: var(--transition);
        }

        .step-card:hover {
            border-color: var(--border-accent);
            transform: translateY(-6px);
        }

        .step-bg-num {
            position: absolute;
            right: -10px;
            top: -25px;
            font-family: 'Unbounded', sans-serif;
            font-size: 140px;
            font-weight: 900;
            color: rgba(255, 204, 0, 0.05);
            line-height: 1;
            pointer-events: none;
            user-select: none;
            transition: var(--transition);
        }

        .step-card:hover .step-bg-num {
            color: rgba(255, 204, 0, 0.12);
            transform: scale(1.05);
        }

        .step-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: var(--accent-soft);
            border: 1px solid var(--border-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            margin-bottom: 28px;
        }

        .step-title {
            font-family: 'Unbounded', sans-serif;
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 14px;
            text-transform: uppercase;
        }

        .step-desc {
            color: var(--text-muted);
            font-size: 14px;
            margin-bottom: 32px;
            font-weight: 500;
        }

        /* О ПРОЕКТЕ / ОСОБЕННОСТИ ( ТАБЫ В СТИЛЕ MAJESTIC ) */
        .features-section {
            padding: 100px 0;
        }

        .features-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 36px;
            overflow-x: auto;
            padding-bottom: 8px;
        }

        .tab-btn {
            padding: 16px 26px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-muted);
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 13px;
            text-transform: uppercase;
            cursor: pointer;
            white-space: nowrap;
            transition: var(--transition);
        }

        .tab-btn.active,
        .tab-btn:hover {
            background: var(--accent);
            color: #090a0f;
            border-color: var(--accent);
            box-shadow: 0 8px 25px var(--accent-glow);
        }

        .feature-showcase {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 28px;
            padding: 48px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .feature-content h3 {
            font-family: 'Unbounded', sans-serif;
            font-size: 32px;
            margin-bottom: 18px;
            text-transform: uppercase;
        }

        .feature-content p {
            color: var(--text-muted);
            font-size: 16px;
            margin-bottom: 28px;
        }

        .feature-list {
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 14px;
        }

        .feature-list li span {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            background: var(--accent-soft);
            color: var(--accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .feature-image-box {
            width: 100%;
            height: 360px;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            border: 1px solid var(--border-accent);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            transition: var(--transition);
        }

        /* МЕДИА И СОЦСЕТИ */
        .social-section {
            padding: 80px 0 120px;
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 40px;
        }

        .social-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 30px;
            text-decoration: none;
            color: var(--text-main);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;
        }

        .social-card:hover {
            border-color: var(--accent);
            transform: translateY(-6px);
            box-shadow: 0 16px 35px rgba(255, 204, 0, 0.12);
        }

        .social-card h4 {
            font-family: 'Unbounded', sans-serif;
            font-size: 20px;
            margin-bottom: 6px;
        }

        .social-card p {
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 600;
        }

        .social-sub-count {
            color: var(--accent);
            font-weight: 800;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* ФУТЕР */
        footer {
            background: #06070a;
            border-top: 1px solid var(--border-color);
            padding: 70px 0 40px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-col h5 {
            font-family: 'Unbounded', sans-serif;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 20px;
            color: var(--text-main);
        }

        .footer-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-col a {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition);
        }

        .footer-col a:hover {
            color: var(--accent);
        }

        .footer-bottom {
            padding-top: 30px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* МОДАЛЬНЫЕ ОКНА (МАГАЗИН / АВТОРИЗАЦИЯ) */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(5, 6, 10, 0.85);
            backdrop-filter: blur(12px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-box {
            background: #121520;
            border: 1px solid var(--border-accent);
            border-radius: 24px;
            width: 100%;
            max-width: 480px;
            padding: 36px;
            position: relative;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 204, 0, 0.15);
            transform: translateY(20px);
            transition: var(--transition);
        }

        .modal-overlay.active .modal-box {
            transform: translateY(0);
        }

        .modal-close {
            position: absolute;
            top: 24px;
            right: 24px;
            background: rgba(255, 255, 255, 0.06);
            border: none;
            color: var(--text-muted);
            width: 36px;
            height: 36px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 18px;
            transition: var(--transition);
        }

        .modal-close:hover {
            background: var(--accent);
            color: #090a0f;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .form-control {
            width: 100%;
            padding: 15px 18px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--text-main);
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 600;
            outline: none;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--accent);
            background: rgba(255, 204, 0, 0.04);
        }

        .form-control option {
            background: #121520;
            color: #fff;
        }

        .calc-summary {
            background: var(--accent-soft);
            border: 1px solid var(--border-accent);
            padding: 16px;
            border-radius: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        /* УВЕДОМЛЕНИЯ (TOAST) */
        .toast {
            position: fixed;
            bottom: 28px;
            right: 28px;
            background: #161926;
            border: 1px solid var(--accent);
            color: var(--text-main);
            padding: 16px 24px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 14px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 20px var(--accent-glow);
            z-index: 3000;
            transform: translateY(120%);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 12px;
        }

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

        /* АДАПТИВНОСТЬ */
        @media (max-width: 1024px) {
            .hero-wrapper,
            .feature-showcase {
                grid-template-columns: 1fr;
            }
            .steps-grid {
                grid-template-columns: 1fr;
            }
            .social-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            .nav-links {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .social-grid,
            .footer-grid,
            .feature-list {
                grid-template-columns: 1fr;
            }
            .feature-showcase {
                padding: 28px 20px;
            }
            .hero-stats {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }
    </style>
</head>
<body>

    <!-- ШАПКА САЙТА -->
    <header>
        <div class="container navbar">
            <a href="#" class="logo">
                <div class="logo-icon">G</div>
                <div class="logo-text">
                    <span class="logo-brand">GTASHE4KA</span>
                    <span class="logo-sub">ROLE PLAY</span>
                </div>
            </a>

            <ul class="nav-links">
                <li><a href="#hero" class="active">Главная</a></li>
                <li><a href="#servers">Серверы</a></li>
                <li><a href="#start">Как начать</a></li>
                <li><a href="#about">О проекте</a></li>
                <li><a href="#media">Сообщество</a></li>
            </ul>

            <div class="nav-actions">
                <button class="btn btn-outline" onclick="openModal('donateModal')" style="padding: 12px 20px;">
                    Магазин <span class="x2-pill">X2</span>
                </button>
                <button class="btn btn-primary" onclick="openModal('authModal')" style="padding: 12px 22px;">
                    Кабинет
                </button>
            </div>
        </div>
    </header>

    <!-- HERO SECTION -->
    <section class="hero" id="hero">
        <div class="hero-bg-grid"></div>
        <div class="container hero-wrapper">
            <div class="hero-content">
                <div class="online-badge">
                    <span class="online-dot"></span>
                    <span class="online-text">Сейчас в штате:</span>
                    <span class="online-count" id="totalOnlineCounter">14 820 игроков</span>
                </div>

                <h1 class="hero-title">
                    СОЗДАЙ СВОЮ <br>
                    ИМПЕРИЮ НА <br>
                    <span class="highlight">GTASHE4KA RP</span>
                </h1>

                <p class="hero-desc">
                    Масштабный RolePlay проект в GTA V. Сотни эксклюзивных автомобилей, продуманная экономика, криминальные войны семей и полная свобода отыгрыша.
                </p>

                <div class="hero-buttons">
                    <a href="#start" class="btn btn-primary">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        Начать играть
                    </a>
                    <button class="btn btn-outline" onclick="openModal('donateModal')">
                        Пополнить счёт (X2)
                    </button>
                </div>

                <div class="hero-stats">
                    <div class="stat-item">
                        <h4>8 СЕРВЕРОВ</h4>
                        <p>Стабильный пинг</p>
                    </div>
                    <div class="stat-item">
                        <h4>450+ АВТО</h4>
                        <p>Реальный тюнинг</p>
                    </div>
                    <div class="stat-item">
                        <h4>120 FPS</h4>
                        <p>Оптимизация</p>
                    </div>
                </div>
            </div>

            <div class="hero-visual">
                <div class="hero-glow-circle"></div>
                <div class="hero-showcase-card">
                    <div class="showcase-tag">SEASON PASS 2026</div>
                    <div class="promo-box">
                        <div class="promo-info">
                            <span>Бонус новичкам по промокоду:</span>
                            <strong>GTASHE4KA</strong>
                            <p>+50,000$ и Platinum VIP на 7 дней</p>
                        </div>
                        <button class="copy-promo-btn" onclick="copyText('GTASHE4KA', 'Промокод GTASHE4KA скопирован! Введите его в чате /promo')">
                            Копировать
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- СЕРВЕРЫ -->
    <section class="servers-section" id="servers">
        <div class="container">
            <div class="section-header">
                <div>
                    <div class="badge">Мониторинг в реальном времени</div>
                    <h2 class="section-title">ВЫБЕРИ СВОЙ <span class="text-accent">СЕРВЕР</span></h2>
                    <p class="section-subtitle">Нажмите на IP-адрес любого сервера, чтобы мгновенно скопировать его для быстрого подключения через F1.</p>
                </div>
            </div>

            <div class="servers-grid" id="serversContainer">
                <!-- Генерируется через JS -->
            </div>
        </div>
    </section>

    <!-- КАК НАЧАТЬ ИГРАТЬ -->
    <section class="steps-section" id="start">
        <div class="container">
            <div class="badge">Быстрый старт за 5 минут</div>
            <h2 class="section-title">КАК НАЧАТЬ <span class="text-accent">ИГРАТЬ?</span></h2>
            <p class="section-subtitle">Три простых шага отделяют тебя от погружения в атмосферу GTASHE4KA RolePlay.</p>

            <div class="steps-grid">
                <!-- Шаг 1 -->
                <div class="step-card">
                    <div class="step-bg-num">01</div>
                    <div>
                        <div class="step-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                        </div>
                        <h3 class="step-title">Установите GTA V</h3>
                        <p class="step-desc">Для игры потребуется любая лицензионная версия Grand Theft Auto V (Steam, Epic Games или Rockstar Games Launcher). Прохождение сюжета не требуется.</p>
                    </div>
                    <a href="https://store.steampowered.com/app/271590/Grand_theft_Auto_V/" target="_blank" class="btn btn-outline" style="width: 100%;">Купить GTA V в Steam</a>
                </div>

                <!-- Шаг 2 -->
                <div class="step-card" style="border-color: var(--border-accent); background: linear-gradient(180deg, rgba(255,204,0,0.08) 0%, var(--bg-card) 100%);">
                    <div class="step-bg-num">02</div>
                    <div>
                        <div class="step-icon" style="background: var(--accent); color: #090a0f;">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        </div>
                        <h3 class="step-title">Скачайте Лаунчер</h3>
                        <p class="step-desc">Фирменный лаунчер GTASHE4KA сам установит все необходимые файлы мультиплеера, проверит целостность модов и настроит графику.</p>
                    </div>
                    <button class="btn btn-primary" style="width: 100%;" onclick="downloadLauncher()">
                        Скачать Лаунчер (Windows)
                    </button>
                </div>

                <!-- Шаг 3 -->
                <div class="step-card">
                    <div class="step-bg-num">03</div>
                    <div>
                        <div class="step-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                        </div>
                        <h3 class="step-title">Врывайтесь в игру</h3>
                        <p class="step-desc">Запустите лаунчер, выберите понравившийся сервер, создайте уникального персонажа и не забудьте ввести промокод <strong>GTASHE4KA</strong>.</p>
                    </div>
                    <a href="#servers" class="btn btn-outline" style="width: 100%;">Выбрать сервер</a>
                </div>
            </div>
        </div>
    </section>

    <!-- О ПРОЕКТЕ / ТАБЫ -->
    <section class="features-section" id="about">
        <div class="container">
            <div class="badge">Уникальный игровой мод</div>
            <h2 class="section-title">ПОЧЕМУ ВЫБИРАЮТ <span class="text-accent">GTASHE4KA?</span></h2>

            <div class="features-tabs" style="margin-top: 32px;">
                <button class="tab-btn active" onclick="switchTab(0, this)">Криминал и Семьи</button>
                <button class="tab-btn" onclick="switchTab(1, this)">Автопарк и Тюнинг</button>
                <button class="tab-btn" onclick="switchTab(2, this)">Гос. Структуры</button>
                <button class="tab-btn" onclick="switchTab(3, this)">Бизнес и Работы</button>
            </div>

            <div class="feature-showcase" id="featureDisplay">
                <div class="feature-content">
                    <h3 id="featTitle">Создай собственную семью или синдикат</h3>
                    <p id="featDesc">Объединяйтесь с друзьями в могущественные организации, покупайте особняки, участвуйте в войнах за территории (Captures / Bizwar), грабьте банки и перехватывайте поставки оружия.</p>
                    <ul class="feature-list" id="featList">
                        <li><span>✓</span> Война за квадраты и бизнесы</li>
                        <li><span>✓</span> Контракты и ограбления банков</li>
                        <li><span>✓</span> Кастомные особняки и склады</li>
                        <li><span>✓</span> Гибкая система рангов и доступа</li>
                    </ul>
                </div>
                <div class="feature-image-box" id="featImg" style="background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1000&q=80');"></div>
            </div>
        </div>
    </section>

    <!-- СОЦИАЛЬНЫЕ СЕТИ -->
    <section class="social-section" id="media">
        <div class="container">
            <div class="badge">Всегда на связи</div>
            <h2 class="section-title">НАШЕ <span class="text-accent">СООБЩЕСТВО</span></h2>
            <p class="section-subtitle">Следите за обновлениями, участвуйте в еженедельных розыгрышах G-Coins и общайтесь с игроками.</p>

            <div class="social-grid">
                <a href="#media" onclick="showToast('Переход в официальный Discord канал GTASHE4KA')" class="social-card">
                    <div>
                        <h4>DISCORD</h4>
                        <p>Торговая площадка, общение и техподдержка 24/7</p>
                    </div>
                    <div class="social-sub-count">
                        <span>195 000+ участников</span>
                        <span>→</span>
                    </div>
                </a>

                <a href="#media" onclick="showToast('Переход в Telegram-канал GTASHE4KA')" class="social-card">
                    <div>
                        <h4>TELEGRAM</h4>
                        <p>Инсайды разработки, промокоды и быстрые новости</p>
                    </div>
                    <div class="social-sub-count">
                        <span>140 000+ подписчиков</span>
                        <span>→</span>
                    </div>
                </a>

                <a href="#media" onclick="showToast('Переход в группу ВКонтакте GTASHE4KA')" class="social-card">
                    <div>
                        <h4>ВКОНТАКТЕ</h4>
                        <p>Конкурсы, мемы и отчёты об обновлениях</p>
                    </div>
                    <div class="social-sub-count">
                        <span>210 000+ подписчиков</span>
                        <span>→</span>
                    </div>
                </a>

                <a href="#media" onclick="showToast('Переход на YouTube канал GTASHE4KA')" class="social-card">
                    <div>
                        <h4>YOUTUBE</h4>
                        <p>Обзоры патчей, трейлеры сезонов и гайды</p>
                    </div>
                    <div class="social-sub-count">
                        <span>98 000+ подписчиков</span>
                        <span>→</span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- ФУТЕР -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <a href="#" class="logo" style="margin-bottom: 18px;">
                        <div class="logo-icon">G</div>
                        <div class="logo-text">
                            <span class="logo-brand">GTASHE4KA</span>
                            <span class="logo-sub">ROLE PLAY</span>
                        </div>
                    </a>
                    <p style="color: var(--text-muted); font-size: 13px; max-width: 300px;">
                        GTASHE4KA RP не аффилирован и не связан с Take-Two Interactive или Rockstar North Interactive. Все права на торговые марки принадлежат их правообладателям.
                    </p>
                </div>

                <div class="footer-col">
                    <h5>Навигация</h5>
                    <ul>
                        <li><a href="#hero">Главная</a></li>
                        <li><a href="#servers">Мониторинг серверов</a></li>
                        <li><a href="#start">Скачать лаунчер</a></li>
                        <li><a href="#" onclick="openModal('donateModal'); return false;">Пополнить счёт</a></li>
                    </ul>
                </div>

                <div class="footer-col">
                    <h5>Ресурсы</h5>
                    <ul>
                        <li><a href="#" onclick="showToast('Раздел Форума скоро откроется!'); return false;">Форум проекта</a></li>
                        <li><a href="#" onclick="showToast('База знаний Wiki открыта!'); return false;">База знаний (Wiki)</a></li>
                        <li><a href="#" onclick="openModal('authModal'); return false;">Личный кабинет</a></li>
                        <li><a href="#" onclick="showToast('Служба поддержки в Discord'); return false;">Центр поддержки</a></li>
                    </ul>
                </div>

                <div class="footer-col">
                    <h5>Правовая информация</h5>
                    <ul>
                        <li><a href="#">Пользовательское соглашение</a></li>
                        <li><a href="#">Политика конфиденциальности</a></li>
                        <li><a href="#">Правила возврата средств</a></li>
                        <li><a href="#">Контакты: support@gtashe4ka.rp</a></li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                <span>© 2026 GTASHE4KA ROLEPLAY. Все права защищены.</span>
                <span>Принимаем к оплате: МИР • СБП • Visa • MasterCard • Crypto</span>
            </div>
        </div>
    </footer>

    <!-- МОДАЛЬНОЕ ОКНО: ДОНАТ / МАГАЗИН -->
    <div class="modal-overlay" id="donateModal">
        <div class="modal-box">
            <button class="modal-close" onclick="closeModal('donateModal')">✕</button>
            <div class="badge" style="margin-bottom: 10px;">Акция X2 активна</div>
            <h3 style="font-family: 'Unbounded', sans-serif; font-size: 24px; margin-bottom: 22px;">ПОПОЛНЕНИЕ СЧЁТА</h3>

            <form onsubmit="handleDonate(event)">
                <div class="form-group">
                    <label>Выберите сервер</label>
                    <select class="form-control" required>
                        <option value="1">#1 | Los Santos</option>
                        <option value="2">#2 | Vice City</option>
                        <option value="3">#3 | Liberty City</option>
                        <option value="4">#4 | San Fierro</option>
                        <option value="5">#5 | Las Venturas</option>
                        <option value="6">#6 | Miami</option>
                        <option value="7">#7 | Detroit</option>
                        <option value="8">#8 | Atlanta</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Ваш игровой логин или Static ID</label>
                    <input type="text" class="form-control" placeholder="Например: Player_One или #45120" required>
                </div>

                <div class="form-group">
                    <label>Сумма пополнения (₽)</label>
                    <input type="number" id="donateInput" class="form-control" value="500" min="50" max="500000" oninput="updateCoins()" required>
                </div>

                <div class="calc-summary">
                    <span style="font-size: 13px; font-weight: 700; color: var(--text-muted);">К зачислению с учётом X2:</span>
                    <strong id="coinsOutput" style="font-family: 'Unbounded', sans-serif; font-size: 20px; color: var(--accent);">1 000 GC</strong>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%;">Перейти к оплате</button>
            </form>
        </div>
    </div>

    <!-- МОДАЛЬНОЕ ОКНО: ЛИЧНЫЙ КАБИНЕТ -->
    <div class="modal-overlay" id="authModal">
        <div class="modal-box">
            <button class="modal-close" onclick="closeModal('authModal')">✕</button>
            <div class="badge" style="margin-bottom: 10px;">Авторизация</div>
            <h3 style="font-family: 'Unbounded', sans-serif; font-size: 24px; margin-bottom: 22px;">ЛИЧНЫЙ КАБИНЕТ</h3>

            <form onsubmit="handleAuth(event)">
                <div class="form-group">
                    <label>Сервер</label>
                    <select class="form-control" required>
                        <option value="1">#1 | Los Santos</option>
                        <option value="2">#2 | Vice City</option>
                        <option value="3">#3 | Liberty City</option>
                        <option value="4">#4 | San Fierro</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Логин</label>
                    <input type="text" class="form-control" placeholder="Введите ваш логин" required>
                </div>

                <div class="form-group">
                    <label>Пароль</label>
                    <input type="password" class="form-control" placeholder="••••••••" required>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%;">Войти в аккаунт</button>
            </form>
        </div>
    </div>

    <!-- ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ -->
    <div class="toast" id="toastBox">
        <span style="color: var(--accent);">⚡</span>
        <span id="toastMsg">Скопировано в буфер обмена!</span>
    </div>

    <script>
        // Данные серверов в стиле Majestic RP
        const serversData = [
            { id: 1, name: "Los Santos", online: 1945, max: 2000, ip: "s1.gtashe4ka.rp:22005" },
            { id: 2, name: "Vice City", online: 1890, max: 2000, ip: "s2.gtashe4ka.rp:22005" },
            { id: 3, name: "Liberty City", online: 1810, max: 2000, ip: "s3.gtashe4ka.rp:22005" },
            { id: 4, name: "San Fierro", online: 1765, max: 2000, ip: "s4.gtashe4ka.rp:22005" },
            { id: 5, name: "Las Venturas", online: 1980, max: 2000, ip: "s5.gtashe4ka.rp:22005" },
            { id: 6, name: "Miami", online: 1720, max: 2000, ip: "s6.gtashe4ka.rp:22005" },
            { id: 7, name: "Detroit", online: 1840, max: 2000, ip: "s7.gtashe4ka.rp:22005" },
            { id: 8, name: "Atlanta", online: 1992, max: 2000, ip: "s8.gtashe4ka.rp:22005" }
        ];

        // Рендер карточек серверов
        function renderServers() {
            const container = document.getElementById('serversContainer');
            let totalOnline = 0;

            container.innerHTML = serversData.map(srv => {
                totalOnline += srv.online;
                const percent = Math.min(100, Math.round((srv.online / srv.max) * 100));
                return `
                    <div class="server-card">
                        <div class="server-top">
                            <span class="server-name">${srv.name}</span>
                            <span class="server-num">SERVER #${srv.id}</span>
                        </div>
                        <div class="server-online-row">
                            <span>Игроков онлайн</span>
                            <span><strong class="text-accent">${srv.online}</strong> / ${srv.max}</span>
                        </div>
                        <div class="progress-track">
                            <div class="progress-fill" style="width: ${percent}%"></div>
                        </div>
                        <button class="server-ip-btn" onclick="copyText('${srv.ip}', 'IP сервера ${srv.name} (${srv.ip}) скопирован!')">
                            <span>${srv.ip}</span>
                            <span style="color: var(--accent);">КОПИРОВАТЬ IP</span>
                        </button>
                    </div>
                `;
            }).join('');

            document.getElementById('totalOnlineCounter').textContent = 
                totalOnline.toLocaleString('ru-RU') + ' игроков';
        }

        // Данные для вкладок "О проекте"
        const featuresData = [
            {
                title: "Создай собственную семью или синдикат",
                desc: "Объединяйтесь с друзьями в могущественные организации, покупайте особняки, участвуйте в войнах за территории (Captures / Bizwar), грабьте банки и перехватывайте поставки оружия.",
                list: [
                    "Война за квадраты и бизнесы",
                    "Контракты и ограбления банков",
                    "Кастомные особняки и склады",
                    "Гибкая система рангов и доступа"
                ],
                img: "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1000&q=80"
            },
            {
                title: "Более 450 детализированных автомобилей",
                desc: "От классических японских спорткаров до эксклюзивных гиперкаров. Настраивайте выхлоп, подвеску, обвесы, винилы и чип-тюнинг в собственных автомастерских.",
                list: [
                    "Реалистичная физика управления",
                    "Детальный визуальный стайлинг",
                    "Эксклюзивные обвесы и диски",
                    "Авторынок и аукционы контейнеров"
                ],
                img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1000&q=80"
            },
            {
                title: "Закон, порядок и политика штата",
                desc: "Вступайте в ряды LSPD, FIB, Шерифов или Армии, используйте современную спецтехнику, дроны и базу данных граждан, либо станьте Губернатором и меняйте законы штата.",
                list: [
                    "Бортовой компьютер и база розыска",
                    "Судебная система и адвокатура",
                    "Спецоперации и рейды на картели",
                    "Выборы Губернатора и Конгресс"
                ],
                img: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1000&q=80"
            },
            {
                title: "Продвинутая экономика и бизнесы",
                desc: "Начните карьеру с дальнобойщика или инкассатора и вырастите до владельца сети АЗС, автосалонов или казино. Полный контроль над наценками, закупками и персоналом.",
                list: [
                    "Свыше 15 уникальных работ",
                    "Маркетплейс прямо в планшете",
                    "Пассивный доход от недвижимости",
                    "Фермы, шахты и логистика"
                ],
                img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1000&q=80"
            }
        ];

        function switchTab(index, btnElement) {
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            btnElement.classList.add('active');

            const item = featuresData[index];
            document.getElementById('featTitle').textContent = item.title;
            document.getElementById('featDesc').textContent = item.desc;
            document.getElementById('featImg').style.backgroundImage = `url('${item.img}')`;
            document.getElementById('featList').innerHTML = item.list
                .map(point => `<li><span>✓</span> ${point}</li>`)
                .join('');
        }

        // Калькулятор G-Coins
        function updateCoins() {
            const val = parseInt(document.getElementById('donateInput').value) || 0;
            const total = val * 2;
            document.getElementById('coinsOutput').textContent = total.toLocaleString('ru-RU') + ' GC';
        }

        // Модальные окна
        function openModal(id) {
            document.getElementById(id).classList.add('active');
        }

        function closeModal(id) {
            document.getElementById(id).classList.remove('active');
        }

        window.addEventListener('click', (e) => {
            if (e.target.classList.contains('modal-overlay')) {
                e.target.classList.remove('active');
            }
        });

        // Уведомления (Toast) и копирование
        let toastTimeout;
        function showToast(message) {
            const toast = document.getElementById('toastBox');
            document.getElementById('toastMsg').textContent = message;
            toast.classList.add('show');
            clearTimeout(toastTimeout);
            toastTimeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 3200);
        }

        function copyText(text, customMsg) {
            navigator.clipboard.writeText(text).catch(() => {});
            showToast(customMsg || `Скопировано: ${text}`);
        }

        function downloadLauncher() {
            showToast('Загрузка GTASHE4KA_Launcher_Setup.exe началась...');
        }

        function handleDonate(e) {
            e.preventDefault();
            closeModal('donateModal');
            showToast('Перенаправление на защищённый шлюз оплаты...');
        }

        function handleAuth(e) {
            e.preventDefault();
            closeModal('authModal');
            showToast('Проверка данных аккаунта GTASHE4KA...');
        }

        // Живое обновление онлайна каждые 4 секунды
        setInterval(() => {
            serversData.forEach(srv => {
                const delta = Math.floor(Math.random() * 11) - 5;
                srv.online = Math.max(1200, Math.min(srv.max, srv.online + delta));
            });
            renderServers();
        }, 4000);

        // Инициализация
        renderServers();
    </script>
</body>
</html>