{"id":1373,"date":"2026-04-08T18:43:42","date_gmt":"2026-04-08T15:43:42","guid":{"rendered":"https:\/\/bantv.ru\/?page_id=1373"},"modified":"2026-04-09T15:19:35","modified_gmt":"2026-04-09T12:19:35","slug":"signalrp-x-bantv","status":"publish","type":"page","link":"https:\/\/bantv.ru\/?page_id=1373","title":{"rendered":"S.Studio BanTV"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

<\/p>\n\n\n\n

<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Signal RP \u2014 \u041d\u043e\u0432\u043e\u0435 \u041f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary: #6366f1;\r\n --primary-light: #818cf8;\r\n --accent: #06b6d4;\r\n --accent2: #8b5cf6;\r\n --dark: #050510;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n background: var(--dark);\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n ::-webkit-scrollbar {\r\n width: 3px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: transparent;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: linear-gradient(var(--primary), var(--accent));\r\n border-radius: 2px;\r\n }\r\n\r\n \/* ===== SECTIONS ===== *\/\r\n .section {\r\n width: 100%;\r\n min-height: 100vh;\r\n min-height: 100dvh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n will-change: opacity, transform, filter;\r\n transition: opacity 0.1s ease, transform 0.1s ease, filter 0.1s ease;\r\n }\r\n\r\n \/* ===== NAVIGATION ===== *\/\r\n .nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n padding: 20px 28px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .nav.scrolled {\r\n padding: 14px 28px;\r\n background: rgba(5, 5, 16, 0.85);\r\n backdrop-filter: blur(30px) saturate(1.5);\r\n border-bottom: 1px solid rgba(255,255,255,0.04);\r\n }\r\n\r\n .nav-logo {\r\n font-size: 1.3rem;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #6366f1, #06b6d4);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 40px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n color: rgba(255,255,255,0.55);\r\n text-decoration: none;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n transition: color 0.3s;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: #fff;\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-menu-btn {\r\n display: none;\r\n background: none;\r\n border: none;\r\n color: #fff;\r\n cursor: pointer;\r\n width: 44px;\r\n height: 44px;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 12px;\r\n }\r\n\r\n \/* ===== MYSTERY SECTION ===== *\/\r\n .mystery-section {\r\n flex-direction: column;\r\n text-align: center;\r\n background: var(--dark);\r\n }\r\n\r\n .mystery-content {\r\n position: relative;\r\n z-index: 3;\r\n padding: 0 24px;\r\n max-width: 1100px;\r\n width: 100%;\r\n }\r\n\r\n .mystery-label {\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 8px;\r\n color: rgba(99, 102, 241, 0.6);\r\n margin-bottom: 32px;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: fadeUp 1s ease 0.5s forwards;\r\n }\r\n\r\n .mystery-title {\r\n font-size: clamp(5rem, 18vw, 14rem);\r\n font-weight: 900;\r\n line-height: 0.85;\r\n letter-spacing: -6px;\r\n margin-bottom: 28px;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n animation: fadeUp 1.2s ease 0.8s forwards;\r\n color: #fff;\r\n }\r\n\r\n .mystery-title .gradient-text {\r\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #06b6d4 70%, #6366f1 100%);\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: gradientShift 4s ease infinite;\r\n }\r\n\r\n .mystery-subtitle {\r\n font-size: clamp(1rem, 2.8vw, 1.25rem);\r\n font-weight: 300;\r\n color: rgba(255,255,255,0.4);\r\n max-width: 600px;\r\n margin: 0 auto 60px;\r\n line-height: 1.8;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: fadeUp 1s ease 1.2s forwards;\r\n }\r\n\r\n .scroll-indicator {\r\n opacity: 0;\r\n animation: fadeUp 1s ease 1.8s forwards;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .scroll-indicator span {\r\n font-size: 0.65rem;\r\n text-transform: uppercase;\r\n letter-spacing: 5px;\r\n color: rgba(255,255,255,0.3);\r\n }\r\n\r\n .scroll-line {\r\n width: 1px;\r\n height: 50px;\r\n background: linear-gradient(to bottom, rgba(99,102,241,0.6), transparent);\r\n animation: scrollPulse 2s ease infinite;\r\n }\r\n\r\n \/* ===== BACKGROUND BLOBS ===== *\/\r\n .bg-gradient-mesh {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .blob {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(150px);\r\n opacity: 0.13;\r\n will-change: transform;\r\n }\r\n\r\n .blob-1 {\r\n width: 900px;\r\n height: 900px;\r\n background: #6366f1;\r\n top: -35%;\r\n left: -20%;\r\n animation: blobMove1 20s ease-in-out infinite;\r\n }\r\n\r\n .blob-2 {\r\n width: 800px;\r\n height: 800px;\r\n background: #06b6d4;\r\n top: 0%;\r\n right: -25%;\r\n animation: blobMove2 24s ease-in-out infinite;\r\n }\r\n\r\n .blob-3 {\r\n width: 700px;\r\n height: 700px;\r\n background: #8b5cf6;\r\n bottom: -25%;\r\n left: 15%;\r\n animation: blobMove3 28s ease-in-out infinite;\r\n }\r\n\r\n @keyframes blobMove1 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(120px, 100px) scale(1.15); }\r\n 66% { transform: translate(-80px, 80px) scale(0.9); }\r\n }\r\n\r\n @keyframes blobMove2 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(-100px, -80px) scale(1.1); }\r\n 66% { transform: translate(80px, 100px) scale(0.85); }\r\n }\r\n\r\n @keyframes blobMove3 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(90px, -50px) scale(1.12); }\r\n 66% { transform: translate(-70px, -90px) scale(0.88); }\r\n }\r\n\r\n \/* ===== PARTICLES ===== *\/\r\n .particles-container {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n overflow: hidden;\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n border-radius: 50%;\r\n animation: floatParticle linear infinite;\r\n }\r\n\r\n \/* ===== DIVIDERS ===== *\/\r\n .section-divider {\r\n width: 100%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(99,102,241,0.2), rgba(6,182,212,0.2), transparent);\r\n position: relative;\r\n }\r\n\r\n .section-divider::after {\r\n content: '';\r\n position: absolute;\r\n top: -1px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--primary), transparent);\r\n border-radius: 2px;\r\n }\r\n\r\n \/* ===== REVEAL SECTION ===== *\/\r\n .reveal-section {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 0;\r\n background: var(--dark);\r\n }\r\n\r\n .reveal-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.07) 0%, transparent 65%);\r\n }\r\n\r\n .reveal-inner {\r\n position: relative;\r\n z-index: 2;\r\n padding: 140px 24px 140px;\r\n }\r\n\r\n .reveal-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 24px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n border-radius: 50px;\r\n font-size: 0.72rem;\r\n text-transform: uppercase;\r\n letter-spacing: 4px;\r\n color: var(--primary-light);\r\n margin-bottom: 48px;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n background: rgba(99, 102, 241, 0.04);\r\n }\r\n\r\n .reveal-badge.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .badge-dot {\r\n width: 6px;\r\n height: 6px;\r\n background: var(--primary);\r\n border-radius: 50%;\r\n animation: pulse 2s ease infinite;\r\n }\r\n\r\n .reveal-heading {\r\n font-size: clamp(3.5rem, 12vw, 9rem);\r\n font-weight: 800;\r\n line-height: 0.95;\r\n letter-spacing: -4px;\r\n margin-bottom: 32px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;\r\n color: #fff;\r\n }\r\n\r\n .reveal-heading.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .reveal-heading .line {\r\n display: block;\r\n }\r\n\r\n .reveal-heading .highlight {\r\n background: linear-gradient(90deg, #6366f1, #06b6d4);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .reveal-desc {\r\n font-size: clamp(1.05rem, 2.5vw, 1.2rem);\r\n color: rgba(255,255,255,0.45);\r\n max-width: 640px;\r\n margin: 0 auto;\r\n line-height: 1.9;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;\r\n }\r\n\r\n .reveal-desc.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* ===== EXISTING SECTION ===== *\/\r\n .existing-section {\r\n flex-direction: column;\r\n padding: 0;\r\n background: var(--dark);\r\n }\r\n\r\n .existing-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 25% 50%, rgba(6,182,212,0.06) 0%, transparent 60%);\r\n }\r\n\r\n .existing-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n width: 100%;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .existing-left {\r\n padding: 100px 70px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n opacity: 0;\r\n transform: translateX(-60px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .existing-left.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .existing-tag {\r\n font-size: 0.68rem;\r\n text-transform: uppercase;\r\n letter-spacing: 5px;\r\n color: var(--accent);\r\n margin-bottom: 24px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .existing-tag::before {\r\n content: '';\r\n width: 40px;\r\n height: 1px;\r\n background: var(--accent);\r\n }\r\n\r\n .existing-title {\r\n font-size: clamp(2rem, 4vw, 3.2rem);\r\n font-weight: 800;\r\n line-height: 1.15;\r\n letter-spacing: -1.5px;\r\n margin-bottom: 28px;\r\n color: #fff;\r\n }\r\n\r\n .existing-title .em {\r\n background: linear-gradient(90deg, #06b6d4, #8b5cf6);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .existing-text {\r\n font-size: 1rem;\r\n color: rgba(255,255,255,0.45);\r\n line-height: 1.9;\r\n font-weight: 300;\r\n }\r\n\r\n .existing-right {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n width: 100%;\r\n opacity: 0;\r\n transform: translateX(60px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n }\r\n\r\n .existing-right.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .stat-card {\r\n background: rgba(255,255,255,0.012);\r\n border: 1px solid rgba(255,255,255,0.03);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 50px 24px;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stat-card:hover {\r\n background: rgba(255,255,255,0.03);\r\n }\r\n\r\n .stat-number {\r\n font-size: clamp(2rem, 3.5vw, 3rem);\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #6366f1, #06b6d4);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.72rem;\r\n color: rgba(255,255,255,0.4);\r\n text-transform: uppercase;\r\n letter-spacing: 2.5px;\r\n }\r\n\r\n \/* ===== FEATURES SECTION ===== *\/\r\n .features-section {\r\n flex-direction: column;\r\n padding: 0;\r\n background: var(--dark);\r\n }\r\n\r\n .features-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 70% 30%, rgba(139,92,246,0.06) 0%, transparent 55%);\r\n }\r\n\r\n .features-header {\r\n text-align: center;\r\n padding: 140px 24px 80px;\r\n width: 100%;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .features-heading {\r\n font-size: clamp(3.5rem, 12vw, 8rem);\r\n font-weight: 900;\r\n line-height: 0.95;\r\n letter-spacing: -3px;\r\n margin-bottom: 20px;\r\n opacity: 0;\r\n transform: scale(0.92);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n color: #fff;\r\n }\r\n\r\n .features-heading.visible {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n .features-heading .shimmer {\r\n background: linear-gradient(90deg, #fff 0%, #6366f1 20%, #06b6d4 40%, #8b5cf6 60%, #fff 80%, #fff 100%);\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: shimmer 3s linear infinite;\r\n }\r\n\r\n .features-sub {\r\n font-size: clamp(1.05rem, 2.5vw, 1.2rem);\r\n color: rgba(255,255,255,0.4);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n }\r\n\r\n .features-sub.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n width: 100%;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .feature-card {\r\n background: rgba(255,255,255,0.012);\r\n border: 1px solid rgba(255,255,255,0.03);\r\n padding: 70px 44px;\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .feature-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .feature-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .feature-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .feature-card:hover {\r\n background: rgba(255,255,255,0.03);\r\n }\r\n\r\n .feature-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .feature-icon.purple {\r\n background: rgba(99, 102, 241, 0.1);\r\n border: 1px solid rgba(99, 102, 241, 0.15);\r\n }\r\n\r\n .feature-icon.cyan {\r\n background: rgba(6, 182, 212, 0.1);\r\n border: 1px solid rgba(6, 182, 212, 0.15);\r\n }\r\n\r\n .feature-icon.violet {\r\n background: rgba(139, 92, 246, 0.1);\r\n border: 1px solid rgba(139, 92, 246, 0.15);\r\n }\r\n\r\n .feature-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 14px;\r\n letter-spacing: -0.3px;\r\n color: #fff;\r\n }\r\n\r\n .feature-desc {\r\n font-size: 0.92rem;\r\n color: rgba(255,255,255,0.4);\r\n line-height: 1.8;\r\n font-weight: 300;\r\n }\r\n\r\n \/* ===== ADVENTURE SECTION ===== *\/\r\n .adventure-section {\r\n flex-direction: column;\r\n padding: 0;\r\n text-align: center;\r\n background: var(--dark);\r\n }\r\n\r\n .adventure-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.07) 0%, transparent 55%);\r\n }\r\n\r\n .adventure-visual {\r\n position: relative;\r\n width: 100%;\r\n height: 500px;\r\n opacity: 0;\r\n transform: translateY(60px);\r\n transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n z-index: 2;\r\n }\r\n\r\n .adventure-visual.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .visual-ring {\r\n position: absolute;\r\n border-radius: 50%;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n animation: ringPulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;\r\n }\r\n\r\n .visual-ring:nth-child(1) {\r\n width: 180px; height: 180px;\r\n border: 2px solid rgba(99, 102, 241, 0.35);\r\n animation-delay: 0s;\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.1), inset 0 0 20px rgba(99, 102, 241, 0.05);\r\n }\r\n .visual-ring:nth-child(2) {\r\n width: 280px; height: 280px;\r\n border: 2px solid rgba(6, 182, 212, 0.25);\r\n animation-delay: 0.5s;\r\n box-shadow: 0 0 20px rgba(6, 182, 212, 0.08), inset 0 0 20px rgba(6, 182, 212, 0.03);\r\n }\r\n .visual-ring:nth-child(3) {\r\n width: 380px; height: 380px;\r\n border: 2px solid rgba(139, 92, 246, 0.18);\r\n animation-delay: 1s;\r\n box-shadow: 0 0 20px rgba(139, 92, 246, 0.06), inset 0 0 20px rgba(139, 92, 246, 0.03);\r\n }\r\n .visual-ring:nth-child(4) {\r\n width: 480px; height: 480px;\r\n border: 2px solid rgba(99, 102, 241, 0.12);\r\n animation-delay: 1.5s;\r\n box-shadow: 0 0 20px rgba(99, 102, 241, 0.04), inset 0 0 20px rgba(99, 102, 241, 0.02);\r\n }\r\n .visual-ring:nth-child(5) {\r\n width: 580px; height: 580px;\r\n border: 2px solid rgba(6, 182, 212, 0.08);\r\n animation-delay: 2s;\r\n box-shadow: 0 0 20px rgba(6, 182, 212, 0.03), inset 0 0 20px rgba(6, 182, 212, 0.01);\r\n }\r\n .visual-ring:nth-child(6) {\r\n width: 680px; height: 680px;\r\n border: 1px solid rgba(139, 92, 246, 0.06);\r\n animation-delay: 2.5s;\r\n }\r\n\r\n .visual-center {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 120px;\r\n height: 120px;\r\n background: linear-gradient(135deg, var(--primary), var(--accent));\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow:\r\n 0 0 60px rgba(99, 102, 241, 0.4),\r\n 0 0 120px rgba(99, 102, 241, 0.2),\r\n 0 0 200px rgba(6, 182, 212, 0.15);\r\n animation: centerPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\r\n }\r\n\r\n .adventure-text {\r\n padding: 100px 24px 140px;\r\n position: relative;\r\n z-index: 2;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;\r\n }\r\n\r\n .adventure-text.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .adventure-text h2 {\r\n font-size: clamp(2.8rem, 8vw, 5rem);\r\n font-weight: 800;\r\n letter-spacing: -2px;\r\n margin-bottom: 20px;\r\n color: #fff;\r\n }\r\n\r\n .adventure-text p {\r\n font-size: clamp(1.05rem, 2.5vw, 1.15rem);\r\n color: rgba(255,255,255,0.4);\r\n max-width: 620px;\r\n margin: 0 auto;\r\n line-height: 1.9;\r\n font-weight: 300;\r\n }\r\n\r\n \/* ===== JOIN SECTION ===== *\/\r\n .join-section {\r\n flex-direction: column;\r\n padding: 0;\r\n text-align: center;\r\n background: var(--dark);\r\n }\r\n\r\n .join-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 50% 20%, rgba(99,102,241,0.07) 0%, transparent 50%);\r\n }\r\n\r\n .join-header {\r\n padding: 140px 24px 80px;\r\n width: 100%;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .horizontal-line-deco {\r\n width: 100px;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n margin: 0 auto 48px;\r\n border-radius: 1px;\r\n opacity: 0;\r\n transform: scaleX(0);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n }\r\n\r\n .horizontal-line-deco.visible {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n\r\n .join-heading {\r\n font-size: clamp(3.5rem, 12vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -3px;\r\n line-height: 0.95;\r\n margin-bottom: 20px;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n color: #fff;\r\n }\r\n\r\n .join-heading.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .join-heading .cta-gradient {\r\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #06b6d4 70%, #22d3ee 100%);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: gradientShift 4s ease infinite;\r\n }\r\n\r\n .join-desc {\r\n font-size: clamp(1.05rem, 2.5vw, 1.2rem);\r\n color: rgba(255,255,255,0.4);\r\n max-width: 540px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;\r\n }\r\n\r\n .join-desc.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .join-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n width: 100%;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .join-card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 18px;\r\n padding: 60px 24px;\r\n background: rgba(255,255,255,0.012);\r\n border: 1px solid rgba(255,255,255,0.03);\r\n text-decoration: none;\r\n color: #fff;\r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n\r\n .join-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .join-card:hover {\r\n background: rgba(255,255,255,0.03);\r\n transform: translateY(-10px);\r\n box-shadow: 0 30px 80px rgba(0,0,0,0.4);\r\n }\r\n\r\n .join-card-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n transition: transform 0.4s, box-shadow 0.4s;\r\n }\r\n\r\n .join-card:hover .join-card-icon {\r\n transform: scale(1.1);\r\n box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);\r\n }\r\n\r\n .join-card-icon.steam {\r\n background: rgba(102, 192, 244, 0.12);\r\n border: 1px solid rgba(102, 192, 244, 0.2);\r\n }\r\n\r\n .join-card-icon.tg {\r\n background: rgba(38, 165, 227, 0.12);\r\n border: 1px solid rgba(38, 165, 227, 0.2);\r\n }\r\n\r\n .join-card-icon.bantv {\r\n background: rgba(139, 92, 246, 0.12);\r\n border: 1px solid rgba(139, 92, 246, 0.2);\r\n }\r\n\r\n .join-card-icon.signal {\r\n background: rgba(6, 182, 212, 0.12);\r\n border: 1px solid rgba(6, 182, 212, 0.2);\r\n }\r\n\r\n .join-card-info {\r\n text-align: center;\r\n }\r\n\r\n .join-card-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n margin-bottom: 6px;\r\n letter-spacing: -0.2px;\r\n color: #fff;\r\n }\r\n\r\n .join-card-subtitle {\r\n font-size: 0.82rem;\r\n color: rgba(255,255,255,0.4);\r\n font-weight: 300;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ===== FINAL SECTION ===== *\/\r\n .final-section {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 0;\r\n background: var(--dark);\r\n }\r\n\r\n .final-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.09) 0%, transparent 45%);\r\n }\r\n\r\n .final-content {\r\n position: relative;\r\n z-index: 2;\r\n padding: 160px 24px 160px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .final-content.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .final-heading {\r\n font-size: clamp(3.5rem, 12vw, 8rem);\r\n font-weight: 900;\r\n letter-spacing: -3px;\r\n line-height: 0.95;\r\n margin-bottom: 24px;\r\n color: #fff;\r\n }\r\n\r\n .final-heading .final-gradient {\r\n background: linear-gradient(135deg, #6366f1, #06b6d4);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .final-desc {\r\n font-size: clamp(1.05rem, 2.5vw, 1.15rem);\r\n color: rgba(255,255,255,0.4);\r\n max-width: 520px;\r\n margin: 0 auto 50px;\r\n line-height: 1.8;\r\n font-weight: 300;\r\n }\r\n\r\n .final-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 20px 56px;\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n color: #fff;\r\n border: none;\r\n border-radius: 60px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n overflow: hidden;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .final-btn::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #818cf8, #06b6d4);\r\n opacity: 0;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n .final-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 25px 60px rgba(99, 102, 241, 0.35);\r\n }\r\n\r\n .final-btn:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .final-btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .final-btn .arrow {\r\n position: relative;\r\n z-index: 1;\r\n transition: transform 0.3s;\r\n }\r\n\r\n .final-btn:hover .arrow {\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* ===== FOOTER ===== *\/\r\n .footer {\r\n padding: 40px 24px;\r\n text-align: center;\r\n border-top: 1px solid rgba(255,255,255,0.04);\r\n background: var(--dark);\r\n }\r\n\r\n .footer p {\r\n font-size: 0.78rem;\r\n color: rgba(255,255,255,0.25);\r\n }\r\n\r\n \/* ===== ANIMATIONS ===== *\/\r\n @keyframes fadeUp {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @keyframes gradientShift {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { background-position: -200% center; }\r\n 100% { background-position: 200% center; }\r\n }\r\n\r\n @keyframes scrollPulse {\r\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\r\n 50% { opacity: 1; transform: scaleY(1.3); }\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.4; transform: scale(1.8); }\r\n }\r\n\r\n @keyframes ringPulse {\r\n 0%, 100% {\r\n transform: translate(-50%, -50%) scale(1);\r\n opacity: 1;\r\n border-width: 2px;\r\n }\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.12);\r\n opacity: 0.3;\r\n border-width: 1px;\r\n }\r\n }\r\n\r\n @keyframes centerPulse {\r\n 0%, 100% {\r\n box-shadow:\r\n 0 0 60px rgba(99, 102, 241, 0.4),\r\n 0 0 120px rgba(99, 102, 241, 0.2),\r\n 0 0 200px rgba(6, 182, 212, 0.15);\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n 50% {\r\n box-shadow:\r\n 0 0 80px rgba(99, 102, 241, 0.6),\r\n 0 0 160px rgba(99, 102, 241, 0.35),\r\n 0 0 280px rgba(6, 182, 212, 0.25);\r\n transform: translate(-50%, -50%) scale(1.05);\r\n }\r\n }\r\n\r\n @keyframes floatParticle {\r\n 0% { transform: translateY(100vh) scale(0); opacity: 0; }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 1; }\r\n 100% { transform: translateY(-10vh) scale(1); opacity: 0; }\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* ===== PAGE LOADER ===== *\/\r\n .page-loader {\r\n position: fixed;\r\n inset: 0;\r\n background: var(--dark);\r\n z-index: 10000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: opacity 0.8s ease, visibility 0.8s ease;\r\n }\r\n\r\n .page-loader.hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n }\r\n\r\n .loader-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 2px solid rgba(99, 102, 241, 0.15);\r\n border-top-color: var(--primary);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n }\r\n\r\n \/* ===== NOISE OVERLAY ===== *\/\r\n .noise-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9998;\r\n pointer-events: none;\r\n opacity: 0.03;\r\n background-image: url(\"image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\r\n background-repeat: repeat;\r\n background-size: 256px 256px;\r\n }\r\n\r\n \/* ===== MOBILE RESPONSIVE ===== *\/\r\n @media (max-width: 1024px) {\r\n .features-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .join-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav {\r\n padding: 16px 20px;\r\n }\r\n .nav.scrolled {\r\n padding: 14px 20px;\r\n }\r\n\r\n .nav-links {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(5, 5, 16, 0.98);\r\n backdrop-filter: blur(30px);\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 32px;\r\n z-index: 999;\r\n }\r\n\r\n .nav-links.active {\r\n display: flex;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 1.2rem;\r\n letter-spacing: 3px;\r\n color: rgba(255,255,255,0.6) !important;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: #fff !important;\r\n }\r\n\r\n .nav-menu-btn {\r\n display: flex;\r\n z-index: 1001;\r\n }\r\n\r\n \/* Mystery *\/\r\n .mystery-title {\r\n letter-spacing: -3px;\r\n }\r\n .mystery-subtitle {\r\n margin-bottom: 50px;\r\n }\r\n\r\n \/* Reveal *\/\r\n .reveal-inner {\r\n padding: 100px 20px 100px;\r\n }\r\n .reveal-heading {\r\n letter-spacing: -2px;\r\n }\r\n .reveal-badge {\r\n margin-bottom: 36px;\r\n }\r\n\r\n \/* Existing *\/\r\n .existing-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .existing-left {\r\n padding: 80px 24px;\r\n }\r\n .existing-right {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .stat-card {\r\n padding: 36px 16px;\r\n }\r\n\r\n \/* Features *\/\r\n .features-header {\r\n padding: 100px 20px 60px;\r\n }\r\n .features-heading {\r\n letter-spacing: -2px;\r\n }\r\n .feature-card {\r\n padding: 50px 28px;\r\n }\r\n\r\n \/* Adventure *\/\r\n .adventure-visual {\r\n height: 380px;\r\n }\r\n .visual-ring:nth-child(5),\r\n .visual-ring:nth-child(6) {\r\n display: none;\r\n }\r\n .visual-center {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n .adventure-text {\r\n padding: 60px 20px 100px;\r\n }\r\n .adventure-text h2 {\r\n letter-spacing: -1px;\r\n }\r\n\r\n \/* Join *\/\r\n .join-header {\r\n padding: 100px 20px 60px;\r\n }\r\n .join-heading {\r\n letter-spacing: -2px;\r\n }\r\n .join-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .join-card {\r\n padding: 44px 20px;\r\n }\r\n .join-card-icon {\r\n width: 52px;\r\n height: 52px;\r\n }\r\n\r\n \/* Final *\/\r\n .final-heading {\r\n letter-spacing: -2px;\r\n }\r\n .final-content {\r\n padding: 100px 20px 120px;\r\n }\r\n .final-btn {\r\n padding: 18px 44px;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .join-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .existing-right {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .stat-number {\r\n font-size: 1.6rem;\r\n }\r\n .stat-card {\r\n padding: 28px 12px;\r\n }\r\n .stat-label {\r\n letter-spacing: 1.5px;\r\n }\r\n .adventure-visual {\r\n height: 300px;\r\n }\r\n .visual-ring:nth-child(4) {\r\n display: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Page Loader -->\r\n <div class=\"page-loader\" id=\"pageLoader\">\r\n <div class=\"loader-spinner\"><\/div>\r\n <\/div>\r\n\r\n <!-- Noise Texture -->\r\n <div class=\"noise-overlay\"><\/div>\r\n\r\n <!-- Navigation -->\r\n <nav class=\"nav\" id=\"mainNav\">\r\n <div class=\"nav-logo\">SIGNAL RP<\/div>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#mystery\" onclick=\"closeMenu()\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/a><\/li>\r\n <li><a href=\"#about\" onclick=\"closeMenu()\">\u041e \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/a><\/li>\r\n <li><a href=\"#features\" onclick=\"closeMenu()\">\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/a><\/li>\r\n <li><a href=\"#adventure\" onclick=\"closeMenu()\">\u041f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li>\r\n <li><a href=\"#join\" onclick=\"closeMenu()\">\u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f<\/a><\/li>\r\n <\/ul>\r\n <button class=\"nav-menu-btn\" id=\"menuBtn\" aria-label=\"\u041c\u0435\u043d\u044e\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" id=\"line1\"><\/line>\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" id=\"line2\"><\/line>\r\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" id=\"line3\"><\/line>\r\n <\/svg>\r\n <\/button>\r\n <\/nav>\r\n\r\n <!-- Section 1: Mystery -->\r\n <section class=\"section mystery-section\" id=\"mystery\">\r\n <div class=\"bg-gradient-mesh\">\r\n <div class=\"blob blob-1\"><\/div>\r\n <div class=\"blob blob-2\"><\/div>\r\n <div class=\"blob blob-3\"><\/div>\r\n <\/div>\r\n <div class=\"particles-container\" id=\"particles\"><\/div>\r\n <div class=\"mystery-content\">\r\n <p class=\"mystery-label\">\u041d\u0435\u0447\u0442\u043e \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0441\u044f<\/p>\r\n <h1 class=\"mystery-title\"><span class=\"gradient-text\">\u0421\u043a\u043e\u0440\u043e<\/span><\/h1>\r\n <p class=\"mystery-subtitle\">\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043c\u0438\u0440\u044b. \u0411\u0443\u0434\u044c\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435.<\/p>\r\n <div class=\"scroll-indicator\">\r\n <span>\u041b\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u0437<\/span>\r\n <div class=\"scroll-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 2: Reveal -->\r\n <section class=\"section reveal-section\" id=\"about\">\r\n <div class=\"reveal-bg\"><\/div>\r\n <div class=\"reveal-inner\">\r\n <div class=\"reveal-badge\" data-animate>\r\n <div class=\"badge-dot\"><\/div>\r\n <span>\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/span>\r\n <\/div>\r\n <h2 class=\"reveal-heading\" data-animate>\r\n <span class=\"line\">\u0418\u0433\u0440\u0430 \u043d\u043e\u0432\u043e\u0433\u043e<\/span>\r\n <span class=\"line\"><span class=\"highlight\">\u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f<\/span><\/span>\r\n <\/h2>\r\n <p class=\"reveal-desc\" data-animate>\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0430\u043c\u0438 \u0438\u0437 SignalRP \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u044b, \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0433\u0435\u0439\u043c\u043f\u043b\u0435\u0439 \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0436\u0434\u0451\u0442 \u0432\u0430\u0441 \u0441\u043e\u0432\u0441\u0435\u043c \u0441\u043a\u043e\u0440\u043e.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 3: Existing -->\r\n <section class=\"section existing-section\" id=\"existing\">\r\n <div class=\"existing-bg\"><\/div>\r\n <div class=\"existing-grid\">\r\n <div class=\"existing-left\" data-animate>\r\n <p class=\"existing-tag\">\u0423\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\r\n <h3 class=\"existing-title\">\u041f\u043e\u0434 \u0431\u0440\u0435\u043d\u0434\u043e\u043c <span class=\"em\">Signal RP<\/span> \u0443\u0436\u0435 \u0436\u0438\u0432\u0443\u0442 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h3>\r\n <p class=\"existing-text\">\u0412 \u0438\u0433\u0440\u0435 Flashing Lights \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 Signal RP \u2014 \u0442\u044b\u0441\u044f\u0447\u0438 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0432 \u043c\u0438\u0440 \u044d\u043a\u0448\u0435\u043d\u0430, \u0440\u043e\u043b\u0435\u0432\u043e\u0439 \u0438\u0433\u0440\u044b \u0438 \u043d\u0435\u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043b\u0438\u0448\u044c \u043d\u0430\u0447\u0430\u043b\u043e \u043d\u0430\u0448\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438.<\/p>\r\n <\/div>\r\n <div class=\"existing-right\" data-animate>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">FL<\/div>\r\n <div class=\"stat-label\">Flashing Lights<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">24\/7<\/div>\r\n <div class=\"stat-label\">\u041e\u043d\u043b\u0430\u0439\u043d<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">30+<\/div>\r\n <div class=\"stat-label\">\u0418\u0433\u0440\u043e\u043a\u043e\u0432<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">\u221e<\/div>\r\n <div class=\"stat-label\">\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 4: Features -->\r\n <section class=\"section features-section\" id=\"features\">\r\n <div class=\"features-bg\"><\/div>\r\n <div class=\"features-header\">\r\n <h2 class=\"features-heading\" data-animate><span class=\"shimmer\">\u0427\u0442\u043e \u0432\u0430\u0441 \u0436\u0434\u0451\u0442<\/span><\/h2>\r\n <p class=\"features-sub\" data-animate>\u041c\u044b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0433\u0440\u0443 \u2014 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0446\u0435\u043b\u0443\u044e \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0441 \u0431\u0435\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430.<\/p>\r\n <\/div>\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\" data-animate data-delay=\"0\">\r\n <div class=\"feature-icon purple\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#818cf8\" stroke-width=\"1.5\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\r\n <\/div>\r\n <h4 class=\"feature-title\">\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u044b<\/h4>\r\n <p class=\"feature-desc\">\u041c\u043e\u0449\u043d\u0430\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0438\u043d\u0433. \u0412\u0430\u0448\u0438 \u043f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\" data-animate data-delay=\"150\">\r\n <div class=\"feature-icon cyan\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22d3ee\" stroke-width=\"1.5\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"\/><path d=\"M6 12h.01M18 12h.01M12 12h.01\"\/><\/svg>\r\n <\/div>\r\n <h4 class=\"feature-title\">\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0435\u0439\u043c\u043f\u043b\u0435\u0439<\/h4>\r\n <p class=\"feature-desc\">\u041f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438, \u0433\u043b\u0443\u0431\u043e\u043a\u0430\u044f \u0440\u043e\u043b\u0435\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u2014 \u0438\u0433\u0440\u0430\u0439\u0442\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\" data-animate data-delay=\"300\">\r\n <div class=\"feature-icon violet\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\/><\/svg>\r\n <\/div>\r\n <h4 class=\"feature-title\">\u0412\u044b\u0441\u043e\u043a\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e<\/h4>\r\n <p class=\"feature-desc\">\u0414\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0438\u0440, \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 5: Adventure -->\r\n <section class=\"section adventure-section\" id=\"adventure\">\r\n <div class=\"adventure-bg\"><\/div>\r\n <div class=\"adventure-visual\" data-animate>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-ring\"><\/div>\r\n <div class=\"visual-center\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n <path d=\"M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20M2 12h20\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"adventure-text\" data-animate>\r\n <h2>\u0426\u0435\u043b\u043e\u0435 <span style=\"background: linear-gradient(90deg, #6366f1, #06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\">\u043f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/span><\/h2>\r\n <p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u043c\u0438\u0440\u0435 \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u041d\u043e\u0432\u044b\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0438, \u043d\u043e\u0432\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b, \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u0431\u0435\u0434\u044b. \u0412\u044b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0433\u0440\u0430\u0435\u0442\u0435 \u2014 \u0432\u044b \u0436\u0438\u0432\u0451\u0442\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 6: Join -->\r\n <section class=\"section join-section\" id=\"join\">\r\n <div class=\"join-bg\"><\/div>\r\n <div class=\"join-header\">\r\n <div class=\"horizontal-line-deco\" data-animate><\/div>\r\n <h2 class=\"join-heading\" data-animate><span class=\"cta-gradient\">\u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c<\/span><\/h2>\r\n <p class=\"join-desc\" data-animate>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0438 \u0441\u0442\u0430\u043d\u044c\u0442\u0435 \u0447\u0430\u0441\u0442\u044c\u044e Signal RP \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f<\/p>\r\n <\/div>\r\n <div class=\"join-grid\">\r\n <a href=\"https:\/\/steamcommunity.com\/sharedfiles\/filedetails\/?id=3699670705\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"join-card\" data-animate data-delay=\"0\">\r\n <div class=\"join-card-icon steam\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#66c0f4\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"9\" cy=\"13\" r=\"2.5\"\/><path d=\"M12 7a5 5 0 0 1 5 5\"\/><circle cx=\"14\" cy=\"10\" r=\"1.5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"join-card-info\">\r\n <div class=\"join-card-title\">Steam<\/div>\r\n <div class=\"join-card-subtitle\">\u041d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 Flashing Lights<\/div>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/t.me\/+t_BkMnenOQdkY2Ji\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"join-card\" data-animate data-delay=\"100\">\r\n <div class=\"join-card-icon tg\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#26a5e4\" stroke-width=\"1.5\">\r\n <path d=\"M21 3L1 11l7 2.5M21 3l-9 19-3-8M21 3L8 13.5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"join-card-info\">\r\n <div class=\"join-card-title\">Telegram \u0433\u0440\u0443\u043f\u043f\u0430<\/div>\r\n <div class=\"join-card-subtitle\">\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e Signal RP<\/div>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"join-card\" data-animate data-delay=\"200\">\r\n <div class=\"join-card-icon bantv\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a78bfa\" stroke-width=\"1.5\">\r\n <rect x=\"2\" y=\"4\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M10 20h4M12 18v2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"join-card-info\">\r\n <div class=\"join-card-title\">BanTV<\/div>\r\n <div class=\"join-card-subtitle\">\u041a\u0430\u043d\u0430\u043b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0430<\/div>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/t.me\/SignalRp_112\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"join-card\" data-animate data-delay=\"300\">\r\n <div class=\"join-card-icon signal\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22d3ee\" stroke-width=\"1.5\">\r\n <path d=\"M22 12h-4l3-9-9 9-3-9\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"join-card-info\">\r\n <div class=\"join-card-title\">Signal RP \u043a\u0430\u043d\u0430\u043b<\/div>\r\n <div class=\"join-card-subtitle\">\u041d\u043e\u0432\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n <!-- Section 7: Final CTA -->\r\n <section class=\"section final-section\">\r\n <div class=\"final-bg\"><\/div>\r\n <div class=\"final-content\" data-animate>\r\n <h2 class=\"final-heading\"><span class=\"final-gradient\">\u0413\u043e\u0442\u043e\u0432\u044b \u043d\u0430\u0447\u0430\u0442\u044c?<\/span><\/h2>\r\n <p class=\"final-desc\">\u0411\u0443\u0434\u0443\u0449\u0435\u0435 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c. \u0421\u0442\u0430\u043d\u044c\u0442\u0435 \u0447\u0430\u0441\u0442\u044c\u044e Signal RP \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u044d\u043f\u043e\u0445\u0443.<\/p>\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"final-btn\">\r\n <span>\u041d\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/span>\r\n <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer class=\"footer\">\r\n <p>\u00a9 2025 Signal RP. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b. \u0421\u043e\u0437\u0434\u0430\u043d\u043e \u0441 \u2764\ufe0f<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Page Loader\r\n window.addEventListener('load', () => {\r\n setTimeout(() => document.getElementById('pageLoader').classList.add('hidden'), 500);\r\n });\r\n\r\n \/\/ Mobile Menu\r\n const menuBtn = document.getElementById('menuBtn');\r\n const navLinks = document.getElementById('navLinks');\r\n let menuOpen = false;\r\n\r\n menuBtn.addEventListener('click', () => {\r\n menuOpen = !menuOpen;\r\n navLinks.classList.toggle('active');\r\n const l1 = document.getElementById('line1');\r\n const l2 = document.getElementById('line2');\r\n const l3 = document.getElementById('line3');\r\n if (menuOpen) {\r\n l1.setAttribute('y1','6'); l1.setAttribute('y2','18'); l1.setAttribute('x1','6'); l1.setAttribute('x2','18');\r\n l2.style.opacity = '0';\r\n l3.setAttribute('y1','18'); l3.setAttribute('y2','6'); l3.setAttribute('x1','6'); l3.setAttribute('x2','18');\r\n } else {\r\n l1.setAttribute('y1','6'); l1.setAttribute('y2','6'); l1.setAttribute('x1','3'); l1.setAttribute('x2','21');\r\n l2.style.opacity = '1';\r\n l3.setAttribute('y1','18'); l3.setAttribute('y2','18'); l3.setAttribute('x1','3'); l3.setAttribute('x2','21');\r\n }\r\n });\r\n\r\n function closeMenu() {\r\n if (menuOpen) {\r\n menuOpen = false;\r\n navLinks.classList.remove('active');\r\n const l1 = document.getElementById('line1');\r\n const l2 = document.getElementById('line2');\r\n const l3 = document.getElementById('line3');\r\n l1.setAttribute('y1','6'); l1.setAttribute('y2','6'); l1.setAttribute('x1','3'); l1.setAttribute('x2','21');\r\n l2.style.opacity = '1';\r\n l3.setAttribute('y1','18'); l3.setAttribute('y2','18'); l3.setAttribute('x1','3'); l3.setAttribute('x2','21');\r\n }\r\n }\r\n\r\n \/\/ Particles\r\n const particlesContainer = document.getElementById('particles');\r\n for (let i = 0; i < 60; i++) {\r\n const p = document.createElement('div');\r\n p.classList.add('particle');\r\n p.style.left = Math.random() * 100 + '%';\r\n p.style.animationDuration = (Math.random() * 12 + 8) + 's';\r\n p.style.animationDelay = (Math.random() * 12) + 's';\r\n const size = Math.random() * 3 + 1;\r\n p.style.width = size + 'px';\r\n p.style.height = size + 'px';\r\n p.style.opacity = Math.random() * 0.4 + 0.1;\r\n particlesContainer.appendChild(p);\r\n }\r\n\r\n \/\/ Nav scroll\r\n const nav = document.getElementById('mainNav');\r\n window.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 80);\r\n });\r\n\r\n \/\/ Intersection Observer\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const delay = entry.target.dataset.delay || 0;\r\n setTimeout(() => entry.target.classList.add('visible'), parseInt(delay));\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12, rootMargin: '0px 0px -20px 0px' });\r\n\r\n document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));\r\n\r\n \/\/ Smooth scroll\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n });\r\n });\r\n\r\n \/\/ Parallax blobs\r\n window.addEventListener('scroll', () => {\r\n const scrollY = window.scrollY;\r\n document.querySelectorAll('.blob').forEach((blob, index) => {\r\n blob.style.transform = `translateY(${scrollY * (0.01 + index * 0.008)}px)`;\r\n });\r\n });\r\n\r\n \/\/ Tilt effect for cards\r\n document.querySelectorAll('.feature-card, .join-card').forEach(card => {\r\n card.addEventListener('mousemove', (e) => {\r\n const rect = card.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const rotateX = (y - rect.height \/ 2) \/ 25;\r\n const rotateY = (rect.width \/ 2 - x) \/ 25;\r\n card.style.transform = `translateY(-8px) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n card.addEventListener('mouseleave', () => {\r\n card.style.transform = '';\r\n });\r\n });\r\n\r\n \/\/ Section fade on scroll \u2014 ONLY after the section has completely scrolled past\r\n const sections = document.querySelectorAll('.section');\r\n\r\n function handleScrollFade() {\r\n const windowHeight = window.innerHeight;\r\n const isMobile = window.innerWidth <= 768;\r\n\r\n \/\/ Mobile: add extra delay \u2014 blur starts only when bottom of section\r\n \/\/ has scrolled past the top by a generous margin\r\n const mobileExtraMargin = isMobile ? windowHeight * 0.15 : 0;\r\n\r\n sections.forEach((section) => {\r\n const rect = section.getBoundingClientRect();\r\n const sectionBottom = rect.bottom;\r\n\r\n \/\/ Only blur when the section's bottom edge has passed above the viewport top\r\n \/\/ (meaning the section is fully scrolled past)\r\n const distancePastTop = -sectionBottom;\r\n\r\n if (distancePastTop > mobileExtraMargin) {\r\n \/\/ Section is fully past \u2014 apply blur\/fade\r\n const fadeDistance = windowHeight;\r\n const progress = Math.min(distancePastTop \/ fadeDistance, 1);\r\n const eased = progress * progress; \/\/ ease-in\r\n\r\n section.style.opacity = 1 - eased * 0.7;\r\n section.style.transform = `scale(${1 - eased * 0.02})`;\r\n section.style.filter = `blur(${eased * 8}px)`;\r\n } else {\r\n \/\/ Section is still at least partially visible \u2014 no blur\r\n section.style.opacity = '1';\r\n section.style.transform = 'scale(1)';\r\n section.style.filter = 'none';\r\n }\r\n });\r\n }\r\n\r\n \/\/ Throttled scroll handler\r\n let ticking = false;\r\n window.addEventListener('scroll', () => {\r\n if (!ticking) {\r\n window.requestAnimationFrame(() => {\r\n handleScrollFade();\r\n ticking = false;\r\n });\r\n ticking = true;\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ Dynamic viewport height\r\n function setVH() {\r\n document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');\r\n }\r\n setVH();\r\n window.addEventListener('resize', setVH);\r\n\r\n \/\/ Initial call\r\n handleScrollFade();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Signal RP \u2014 \u041d\u043e\u0432\u043e\u0435 \u041f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435 SIGNAL RP \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u041e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u041f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u041d\u0435\u0447\u0442\u043e \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0441\u044f \u0421\u043a\u043e\u0440\u043e \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043c\u0438\u0440\u044b. \u0411\u0443\u0434\u044c\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435. \u041b\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u0437 \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0418\u0433\u0440\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0430\u043c\u0438 \u0438\u0437 SignalRP \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u044b, \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0435 … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/bantv.ru\/?page_id=1373\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<span class=\"screen-reader-text\"> «S.Studio BanTV»<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"footnotes":""},"class_list":["post-1373","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bantv.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1373"}],"version-history":[{"count":21,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1373\/revisions"}],"predecessor-version":[{"id":1403,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1373\/revisions\/1403"}],"wp:attachment":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}