{"id":1238,"date":"2026-03-10T20:32:34","date_gmt":"2026-03-10T17:32:34","guid":{"rendered":"https:\/\/bantv.ru\/?page_id=1238"},"modified":"2026-08-31T16:57:07","modified_gmt":"2026-08-31T13:57:07","slug":"%d0%bf%d1%80%d0%be%d0%b5%d0%ba%d1%82%d1%8b","status":"publish","type":"page","link":"https:\/\/bantv.ru\/?page_id=1238","title":{"rendered":"\u041f\u0440\u043e\u0435\u043a\u0442\u044b"},"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\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n BanTV Production \u2014 \u0421\u0442\u0430\u043d\u044c \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n inter: ['Inter', 'system-ui', 'sans-serif'],\r\n space: ['Space Grotesk', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n background: #05060a;\r\n color: #e9f1ff;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n color-scheme: dark;\r\n }\r\n\r\n \/* === COLOR FORCING \u2014 prevent system overrides === *\/\r\n h1, h2, h3, h4, h5, h6, p, span, a, div, button, label, li {\r\n -webkit-text-fill-color: unset;\r\n text-fill-color: unset;\r\n }\r\n\r\n .text-fixed { color: #e9f1ff !important; }\r\n .text-muted { color: rgba(233, 241, 255, 0.7) !important; }\r\n .text-dim { color: rgba(233, 241, 255, 0.45) !important; }\r\n\r\n \/* === FLUID TYPOGRAPHY === *\/\r\n .hero-title {\r\n font-size: clamp(2.8rem, 8vw, 6.5rem);\r\n line-height: 1.02;\r\n letter-spacing: clamp(-1.5px, -0.4vw, -4.5px);\r\n }\r\n\r\n .section-title {\r\n font-size: clamp(1.8rem, 4.5vw, 3.75rem);\r\n }\r\n\r\n .card-title {\r\n font-size: clamp(1.3rem, 3vw, 2.25rem);\r\n }\r\n\r\n .stat-number {\r\n font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n }\r\n\r\n .body-large {\r\n font-size: clamp(0.95rem, 2vw, 1.25rem);\r\n }\r\n\r\n \/* === GLASS MORPHISM === *\/\r\n .glass {\r\n background: rgba(255, 255, 255, 0.045);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 8px 32px -12px rgba(98, 60, 255, 0.25);\r\n }\r\n\r\n .glass-strong {\r\n background: rgba(255, 255, 255, 0.065);\r\n backdrop-filter: blur(32px);\r\n -webkit-backdrop-filter: blur(32px);\r\n border: 1px solid rgba(255, 255, 255, 0.13);\r\n box-shadow: 0 12px 48px -16px rgba(98, 60, 255, 0.35);\r\n }\r\n\r\n \/* === AMBIENT BACKGROUND === *\/\r\n .ambient-bg {\r\n position: fixed;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n overflow: hidden;\r\n }\r\n\r\n .ambient-bg::before {\r\n content: '';\r\n position: absolute;\r\n width: 600px;\r\n height: 600px;\r\n top: -10%;\r\n left: -10%;\r\n background: radial-gradient(circle, rgba(98, 60, 255, 0.15) 0%, transparent 70%);\r\n animation: ambientFloat1 30s ease-in-out infinite;\r\n }\r\n\r\n .ambient-bg::after {\r\n content: '';\r\n position: absolute;\r\n width: 500px;\r\n height: 500px;\r\n bottom: -5%;\r\n right: -10%;\r\n background: radial-gradient(circle, rgba(120, 200, 255, 0.12) 0%, transparent 70%);\r\n animation: ambientFloat2 25s ease-in-out infinite;\r\n }\r\n\r\n @keyframes ambientFloat1 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(80px, 60px) scale(1.15); }\r\n 66% { transform: translate(-40px, 100px) scale(0.9); }\r\n }\r\n\r\n @keyframes ambientFloat2 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(-70px, -50px) scale(1.1); }\r\n 66% { transform: translate(50px, -80px) scale(0.95); }\r\n }\r\n\r\n \/* === GRID OVERLAY === *\/\r\n .grid-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: -1;\r\n pointer-events: none;\r\n background-image:\r\n radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);\r\n background-size: 50px 50px;\r\n opacity: 0.5;\r\n }\r\n\r\n \/* === HEADER === *\/\r\n .header-glass {\r\n background: rgba(5, 6, 10, 0.75);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .header-glass.scrolled {\r\n background: rgba(5, 6, 10, 0.92);\r\n border-bottom-color: rgba(255, 255, 255, 0.12);\r\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .nav-link {\r\n position: relative;\r\n color: rgba(233, 241, 255, 0.75) !important;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, #623cff, #78c8ff);\r\n border-radius: 2px;\r\n transition: width 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .nav-link:hover {\r\n color: #e9f1ff !important;\r\n }\r\n\r\n .nav-link:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* === HAMBURGER === *\/\r\n .hamburger-line {\r\n width: 24px;\r\n height: 2px;\r\n background: #e9f1ff;\r\n border-radius: 2px;\r\n transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .hamburger-active .hamburger-line:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n }\r\n\r\n .hamburger-active .hamburger-line:nth-child(2) {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n\r\n .hamburger-active .hamburger-line:nth-child(3) {\r\n transform: rotate(-45deg) translate(6px, -6px);\r\n }\r\n\r\n \/* === MOBILE MENU === *\/\r\n .mobile-menu {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 100;\r\n background: rgba(5, 6, 10, 0.97);\r\n backdrop-filter: blur(30px);\r\n -webkit-backdrop-filter: blur(30px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 2rem;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .mobile-menu.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .mobile-menu a {\r\n font-size: clamp(1.5rem, 5vw, 2rem);\r\n color: rgba(233, 241, 255, 0.8) !important;\r\n text-decoration: none;\r\n font-weight: 500;\r\n transition: all 0.3s ease;\r\n transform: translateY(20px);\r\n opacity: 0;\r\n }\r\n\r\n .mobile-menu.active a {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n .mobile-menu.active a:nth-child(1) { transition-delay: 0.1s; }\r\n .mobile-menu.active a:nth-child(2) { transition-delay: 0.15s; }\r\n .mobile-menu.active a:nth-child(3) { transition-delay: 0.2s; }\r\n .mobile-menu.active a:nth-child(4) { transition-delay: 0.25s; }\r\n .mobile-menu.active a:nth-child(5) { transition-delay: 0.3s; }\r\n\r\n .mobile-menu a:hover {\r\n color: #78c8ff !important;\r\n }\r\n\r\n \/* === HERO SECTION === *\/\r\n .hero-section {\r\n position: relative;\r\n min-height: 100svh;\r\n display: flex;\r\n align-items: center;\r\n padding-top: 5rem;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-section::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg,\r\n rgba(98, 60, 255, 0.18) 0%,\r\n rgba(120, 200, 255, 0.12) 50%,\r\n transparent 100%);\r\n pointer-events: none;\r\n }\r\n\r\n .hero-section::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, transparent 80%, #05060a 100%);\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n \/* === SHINE EFFECT === *\/\r\n .shine-effect {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .shine-effect::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -120%;\r\n width: 60%;\r\n height: 100%;\r\n background: linear-gradient(120deg,\r\n transparent 20%,\r\n rgba(255, 255, 255, 0.06) 45%,\r\n rgba(255, 255, 255, 0.12) 50%,\r\n rgba(255, 255, 255, 0.06) 55%,\r\n transparent 80%);\r\n animation: shineSweep 8s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes shineSweep {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(300%); }\r\n }\r\n\r\n \/* === BADGE PULSE === *\/\r\n .badge-pulse {\r\n animation: badgeGlow 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes badgeGlow {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }\r\n 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }\r\n }\r\n\r\n \/* === CARD HOVER === *\/\r\n .project-card {\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .project-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg,\r\n rgba(98, 60, 255, 0.08) 0%,\r\n transparent 60%);\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-12px) scale(1.02);\r\n box-shadow: 0 30px 60px -20px rgba(98, 60, 255, 0.4);\r\n border-color: rgba(98, 60, 255, 0.3);\r\n }\r\n\r\n .project-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .project-card:hover {\r\n transform: none;\r\n box-shadow: 0 8px 32px -12px rgba(98, 60, 255, 0.25);\r\n }\r\n }\r\n\r\n \/* === SCROLL REVEAL === *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .reveal.from-left {\r\n transform: translateX(-40px);\r\n }\r\n\r\n .reveal.from-right {\r\n transform: translateX(40px);\r\n }\r\n\r\n .reveal.scale-in {\r\n transform: scale(0.92);\r\n }\r\n\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0) translateX(0) scale(1);\r\n }\r\n\r\n .reveal-delay-1 { transition-delay: 0.1s; }\r\n .reveal-delay-2 { transition-delay: 0.2s; }\r\n .reveal-delay-3 { transition-delay: 0.3s; }\r\n .reveal-delay-4 { transition-delay: 0.4s; }\r\n .reveal-delay-5 { transition-delay: 0.5s; }\r\n\r\n \/* === NAVIGATION PORTAL === *\/\r\n .nav-portal {\r\n position: fixed;\r\n z-index: 500;\r\n background: rgba(5, 6, 10, 0.85);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n \/* Desktop sidebar *\/\r\n @media (min-width: 1024px) {\r\n .nav-portal {\r\n right: 2rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n flex-direction: column;\r\n padding: 0.75rem;\r\n border-radius: 1.5rem;\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n }\r\n\r\n \/* Mobile bottom bar *\/\r\n @media (max-width: 1023px) {\r\n .nav-portal {\r\n bottom: 1rem;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n flex-direction: row;\r\n padding: 0.5rem;\r\n border-radius: 2rem;\r\n display: flex;\r\n gap: 0.25rem;\r\n }\r\n }\r\n\r\n .portal-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.75rem;\r\n border-radius: 1rem;\r\n transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n color: rgba(233, 241, 255, 0.5) !important;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .portal-item {\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n padding: 0.85rem 1rem;\r\n min-width: 4.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 1023px) {\r\n .portal-item {\r\n padding: 0.65rem;\r\n min-width: 3rem;\r\n }\r\n .portal-item span {\r\n display: none;\r\n }\r\n }\r\n\r\n .portal-item:hover {\r\n color: rgba(233, 241, 255, 0.85) !important;\r\n background: rgba(255, 255, 255, 0.06);\r\n }\r\n\r\n .portal-item.active {\r\n background: linear-gradient(135deg, rgba(98, 60, 255, 0.3), rgba(120, 200, 255, 0.2));\r\n color: #e9f1ff !important;\r\n box-shadow: 0 0 25px -5px rgba(98, 60, 255, 0.5);\r\n }\r\n\r\n .portal-item i {\r\n font-size: 1.1rem;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .portal-item:hover i {\r\n transform: scale(1.15);\r\n }\r\n\r\n .portal-item span {\r\n font-size: 0.55rem;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n }\r\n\r\n \/* === BUTTONS === *\/\r\n .btn-primary {\r\n background: linear-gradient(135deg, #623cff, #5044e8, #78c8ff);\r\n background-size: 200% 200%;\r\n animation: gradientShift 4s ease infinite;\r\n transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n color: #ffffff !important;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px) scale(1.03);\r\n box-shadow: 0 16px 40px -10px rgba(98, 60, 255, 0.55);\r\n }\r\n\r\n .btn-primary:active {\r\n transform: translateY(0) scale(0.98);\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 .btn-outline {\r\n border: 1.5px solid rgba(255, 255, 255, 0.25);\r\n color: #e9f1ff !important;\r\n transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: rgba(255, 255, 255, 0.6);\r\n background: rgba(255, 255, 255, 0.05);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .btn-telegram {\r\n transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .btn-telegram:hover {\r\n background: rgba(255, 255, 255, 0.95) !important;\r\n transform: translateY(-3px) scale(1.03);\r\n box-shadow: 0 16px 40px -10px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* === TESTIMONIAL CARD === *\/\r\n .testimonial-card {\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .testimonial-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px -15px rgba(98, 60, 255, 0.3);\r\n }\r\n\r\n \/* === AVATAR PLACEHOLDER === *\/\r\n .avatar-placeholder {\r\n background: linear-gradient(135deg, #1a1b2e, #252840);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .avatar-placeholder::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(98, 60, 255, 0.15), rgba(120, 200, 255, 0.1));\r\n }\r\n\r\n \/* === RANDOMIZER MODAL === *\/\r\n .randomizer-modal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n background: rgba(5, 6, 10, 0.93);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .randomizer-modal.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .randomizer-modal .modal-content {\r\n transform: scale(0.85) translateY(30px);\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n\r\n .randomizer-modal.active .modal-content {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n \/* === FLOATING ELEMENTS === *\/\r\n .float-element {\r\n animation: floatBounce 6s ease-in-out infinite;\r\n }\r\n\r\n .float-element-delay {\r\n animation: floatBounce 6s ease-in-out infinite;\r\n animation-delay: -2s;\r\n }\r\n\r\n .float-element-delay2 {\r\n animation: floatBounce 6s ease-in-out infinite;\r\n animation-delay: -4s;\r\n }\r\n\r\n @keyframes floatBounce {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 25% { transform: translateY(-15px) rotate(1deg); }\r\n 75% { transform: translateY(10px) rotate(-1deg); }\r\n }\r\n\r\n \/* === CTA SECTION === *\/\r\n .cta-glow {\r\n position: relative;\r\n }\r\n\r\n .cta-glow::before {\r\n content: '';\r\n position: absolute;\r\n inset: -1px;\r\n background: linear-gradient(135deg, rgba(98, 60, 255, 0.4), rgba(120, 200, 255, 0.3), rgba(98, 60, 255, 0.4));\r\n border-radius: inherit;\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n .cta-glow:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* === SECTION DIVIDER === *\/\r\n .section-divider {\r\n width: 80px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #623cff, #78c8ff);\r\n border-radius: 3px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* === IMAGE STYLES === *\/\r\n .partner-image {\r\n aspect-ratio: 4\/5;\r\n object-fit: cover;\r\n }\r\n\r\n @media (max-width: 1023px) {\r\n .partner-image {\r\n aspect-ratio: 16\/9;\r\n width: 100%;\r\n max-height: 350px;\r\n }\r\n }\r\n\r\n \/* === PROGRESS BAR (scroll indicator) === *\/\r\n .scroll-progress {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #623cff, #78c8ff);\r\n z-index: 999;\r\n transition: width 0.1s linear;\r\n border-radius: 0 2px 2px 0;\r\n }\r\n\r\n \/* === SMOOTH SCROLLBAR === *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #05060a;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(98, 60, 255, 0.3);\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(98, 60, 255, 0.5);\r\n }\r\n\r\n \/* === TYPING ANIMATION FOR HERO === *\/\r\n .typing-cursor {\r\n display: inline-block;\r\n width: 3px;\r\n height: 0.85em;\r\n background: #78c8ff;\r\n margin-left: 4px;\r\n animation: blink 1s step-end infinite;\r\n vertical-align: text-bottom;\r\n }\r\n\r\n @keyframes blink {\r\n 50% { opacity: 0; }\r\n }\r\n\r\n \/* === RIPPLE EFFECT ON BUTTONS === *\/\r\n .ripple {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ripple-effect {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.25);\r\n transform: scale(0);\r\n animation: rippleAnim 0.6s linear;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes rippleAnim {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n \/* === MARQUEE === *\/\r\n .marquee-track {\r\n display: flex;\r\n animation: marquee 40s linear infinite;\r\n gap: 2rem;\r\n }\r\n\r\n @keyframes marquee {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n .marquee-item {\r\n flex-shrink: 0;\r\n padding: 0.5rem 1.5rem;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 2rem;\r\n white-space: nowrap;\r\n color: rgba(233, 241, 255, 0.5) !important;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n }\r\n\r\n \/* === SAFE AREAS FOR MOBILE === *\/\r\n @supports (padding: max(0px)) {\r\n .header-glass {\r\n padding-left: max(1.5rem, env(safe-area-inset-left));\r\n padding-right: max(1.5rem, env(safe-area-inset-right));\r\n }\r\n }\r\n\r\n \/* === RESPONSIVE UTILITIES === *\/\r\n @media (max-width: 640px) {\r\n .hero-section {\r\n padding-top: 4rem;\r\n padding-bottom: 6rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .glass, .glass-strong {\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n }\r\n }\r\n\r\n \/* === TILT EFFECT ON DESKTOP === *\/\r\n @media (hover: hover) and (pointer: fine) {\r\n .tilt-card {\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n }\r\n }\r\n\r\n \/* === NOISE TEXTURE === *\/\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.025;\r\n background-image: url(\"data: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 <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Scroll Progress -->\r\n <div class=\"scroll-progress\" id=\"scrollProgress\" style=\"width: 0%\"><\/div>\r\n\r\n <!-- Noise Overlay -->\r\n <div class=\"noise-overlay\"><\/div>\r\n\r\n <!-- Ambient Background -->\r\n <div class=\"ambient-bg\"><\/div>\r\n <div class=\"grid-overlay\"><\/div>\r\n\r\n <!-- Mobile Menu -->\r\n <div class=\"mobile-menu\" id=\"mobileMenu\">\r\n <a href=\"https:\/\/bantv.ru\/?page_id=119\" target=\"_blank\" onclick=\"closeMobileMenu()\">\u0412\u044b\u043f\u0443\u0441\u043a\u0438<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1123\" target=\"_blank\" onclick=\"closeMobileMenu()\">\u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=924\" target=\"_blank\" onclick=\"closeMobileMenu()\">BanTV Forge<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\" onclick=\"closeMobileMenu()\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f<\/a>\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\" onclick=\"closeMobileMenu()\" class=\"flex items-center gap-3 px-8 py-4 bg-white\/10 rounded-2xl border border-white\/15 text-xl !text-white\">\r\n <i class=\"fa-brands fa-telegram\"><\/i> Telegram\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- HEADER -->\r\n <header class=\"header-glass fixed top-0 left-0 right-0 z-50\" id=\"mainHeader\">\r\n <div class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between\">\r\n <!-- Logo -->\r\n <a href=\"#\" class=\"flex items-center gap-x-3 sm:gap-x-4 flex-shrink-0\">\r\n <div class=\"w-9 h-9 sm:w-11 sm:h-11 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#623cff] via-[#7a4fff] to-[#78c8ff] flex items-center justify-center text-white font-black text-2xl sm:text-4xl font-space shadow-lg sm:shadow-2xl\">B<\/div>\r\n <div class=\"leading-tight\">\r\n <span class=\"font-space text-2xl sm:text-3xl font-semibold tracking-[-2px] text-white\">BanTV<\/span>\r\n <span class=\"text-[0.55rem] sm:text-xs tracking-[2px] sm:tracking-[3px] text-white\/40 block -mt-0.5 sm:-mt-1\">PRODUCTION<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Desktop Nav -->\r\n <nav class=\"hidden lg:flex items-center gap-x-8 text-sm font-medium\">\r\n <a href=\"https:\/\/bantv.ru\/?page_id=119\" target=\"_blank\" class=\"nav-link\">\u0412\u044b\u043f\u0443\u0441\u043a\u0438<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1123\" target=\"_blank\" class=\"nav-link\">\u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=924\" target=\"_blank\" class=\"nav-link\">BanTV Forge<\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\" class=\"nav-link\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f<\/a>\r\n <\/nav>\r\n\r\n <!-- Right side -->\r\n <div class=\"flex items-center gap-x-2 sm:gap-x-4\">\r\n <!-- Telegram icon (visible on all sizes) -->\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\"\r\n class=\"w-9 h-9 sm:w-10 sm:h-10 lg:w-11 lg:h-11 flex items-center justify-center rounded-2xl sm:rounded-3xl bg-white\/5 border border-white\/10 hover:border-[#78c8ff]\/50 hover:bg-white\/10 transition-all duration-300 flex-shrink-0\">\r\n <i class=\"fa-brands fa-telegram text-lg sm:text-xl lg:text-2xl text-white\/70\"><\/i>\r\n <\/a>\r\n\r\n <!-- Hamburger (mobile\/tablet) -->\r\n <button onclick=\"toggleMobileMenu()\" class=\"lg:hidden flex flex-col items-center justify-center gap-1.5 w-9 h-9 sm:w-10 sm:h-10 flex-shrink-0\" id=\"hamburgerBtn\" aria-label=\"\u041c\u0435\u043d\u044e\">\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <\/button>\r\n\r\n <!-- CTA (desktop only) -->\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\"\r\n class=\"hidden lg:flex px-6 xl:px-8 py-3 bg-gradient-to-r from-[#623cff] to-[#78c8ff] rounded-2xl font-semibold text-sm items-center gap-x-2 shadow-lg hover:shadow-xl hover:scale-[1.03] transition-all duration-300\">\r\n <i class=\"fa-solid fa-rocket\"><\/i>\r\n \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- HERO -->\r\n <section id=\"hero\" class=\"hero-section shine-effect\">\r\n <div class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 w-full\" style=\"position: relative; z-index: 2;\">\r\n <div class=\"grid lg:grid-cols-12 gap-10 lg:gap-16 items-center\">\r\n <!-- Left content -->\r\n <div class=\"lg:col-span-7 order-2 lg:order-1\">\r\n <div class=\"reveal\">\r\n <div class=\"inline-flex items-center gap-x-2 sm:gap-x-3 bg-white\/5 border border-white\/10 rounded-full px-4 sm:px-6 py-2 sm:py-2.5 text-xs sm:text-sm badge-pulse\">\r\n <div class=\"w-2 h-2 sm:w-2.5 sm:h-2.5 bg-emerald-400 rounded-full animate-pulse flex-shrink-0\"><\/div>\r\n <span class=\"text-white\/80\">120 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0443\u0436\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <h1 class=\"hero-title font-space font-semibold mt-5 sm:mt-7 mb-5 sm:mb-8 reveal reveal-delay-1 text-white\">\r\n \u0421\u0442\u0430\u043d\u044c \u0447\u0430\u0441\u0442\u044c\u044e<br class=\"hidden sm:block\">\r\n BanTV \u2014 \u0443\u0447\u0438\u0441\u044c,<br class=\"sm:hidden\">\r\n <span class=\"bg-gradient-to-r from-[#a0a8ff] via-[#88b8ff] to-[#78d8ff] bg-clip-text\" style=\"-webkit-text-fill-color: transparent;\">\u0441\u043d\u0438\u043c\u0430\u0439, \u0442\u0432\u043e\u0440\u0438<\/span>\r\n <\/h1>\r\n\r\n <p class=\"max-w-lg body-large text-white\/75 leading-relaxed reveal reveal-delay-2\">\r\n \u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430, \u0436\u0438\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0441\u0442\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u0431\u043b\u043e\u0433\u0435\u0440\u043e\u0432.\r\n <\/p>\r\n\r\n <div class=\"flex flex-col sm:flex-row gap-4 mt-8 sm:mt-12 reveal reveal-delay-3\">\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\"\r\n class=\"btn-telegram px-8 sm:px-10 py-5 sm:py-6 rounded-2xl sm:rounded-3xl bg-white text-[#05060a] font-semibold text-base sm:text-lg flex items-center justify-center gap-3 shadow-2xl ripple\">\r\n <i class=\"fa-brands fa-telegram text-2xl sm:text-3xl\"><\/i>\r\n \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f\r\n <\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1233\" target=\"_blank\"\r\n class=\"btn-outline px-8 sm:px-10 py-5 sm:py-6 rounded-2xl sm:rounded-3xl flex items-center justify-center gap-3 text-base sm:text-lg font-medium ripple\">\r\n \u041e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c\u0441\u044f\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Stats -->\r\n <div class=\"mt-12 sm:mt-16 grid grid-cols-3 gap-4 sm:gap-8 lg:gap-10 reveal reveal-delay-4\">\r\n <div class=\"text-center lg:text-left\">\r\n <div id=\"stat-projects\" class=\"stat-number font-space font-bold text-white tabular-nums\">0<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs tracking-[0.15em] text-white\/50 mt-1 sm:mt-2\">\u041f\u0420\u041e\u0415\u041a\u0422\u041e\u0412<\/div>\r\n <\/div>\r\n <div class=\"text-center lg:text-left\">\r\n <div id=\"stat-members\" class=\"stat-number font-space font-bold text-white tabular-nums\">0<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs tracking-[0.15em] text-white\/50 mt-1 sm:mt-2\">\u0423\u0427\u0410\u0421\u0422\u041d\u0418\u041a\u041e\u0412<\/div>\r\n <\/div>\r\n <div class=\"text-center lg:text-left\">\r\n <div id=\"stat-mentors\" class=\"stat-number font-space font-bold text-white tabular-nums\">0<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs tracking-[0.15em] text-white\/50 mt-1 sm:mt-2\">\u041d\u0410\u0421\u0422\u0410\u0412\u041d\u0418\u041a\u041e\u0412<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right visual -->\r\n <div class=\"lg:col-span-5 order-1 lg:order-2 relative\">\r\n <div class=\"glass-strong rounded-2xl sm:rounded-3xl p-4 sm:p-6 lg:p-8 reveal scale-in reveal-delay-2 float-element\">\r\n <div class=\"aspect-video bg-[#0f1324] rounded-xl sm:rounded-2xl relative overflow-hidden flex items-center justify-center\">\r\n <i class=\"fa-solid fa-play-circle text-[60px] sm:text-[90px] lg:text-[140px] text-white\/[0.08]\"><\/i>\r\n <div class=\"absolute inset-0\" style=\"background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 6px 6px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Floating badges -->\r\n <div class=\"absolute -top-3 sm:-top-8 -left-2 sm:-left-8 glass rounded-2xl sm:rounded-3xl px-4 sm:px-7 py-3 sm:py-5 shadow-xl flex items-center gap-3 sm:gap-5 float-element-delay reveal reveal-delay-3 z-10\">\r\n <div class=\"text-3xl sm:text-4xl lg:text-5xl\">\u26cf\ufe0f<\/div>\r\n <div>\r\n <div class=\"font-semibold text-sm sm:text-base lg:text-xl text-white\">BanTV Forge<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs text-white\/50\">Minecraft \u0441\u0435\u0440\u0432\u0435\u0440 24\/7<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"absolute -bottom-4 sm:-bottom-6 -right-2 sm:-right-4 lg:-right-6 glass rounded-2xl sm:rounded-3xl px-5 sm:px-7 py-3 sm:py-4 shadow-xl text-center float-element-delay2 reveal reveal-delay-4 z-10\">\r\n <div class=\"text-xl sm:text-2xl lg:text-4xl font-bold font-space bg-gradient-to-b from-white to-[#78c8ff] bg-clip-text\" style=\"-webkit-text-fill-color: transparent;\">\u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- MARQUEE -->\r\n <div class=\"py-6 sm:py-10 border-y border-white\/5 overflow-hidden bg-black\/20\">\r\n <div class=\"marquee-track\">\r\n <span class=\"marquee-item\">\ud83d\udce1 \u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfac \u0412\u0438\u0434\u0435\u043e\u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d<\/span>\r\n <span class=\"marquee-item\">\u26cf\ufe0f Minecraft<\/span>\r\n <span class=\"marquee-item\">\ud83c\udf93 \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435<\/span>\r\n <span class=\"marquee-item\">\ud83d\udcf1 \u0411\u043b\u043e\u0433\u0438\u043d\u0433<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfa8 \u0414\u0438\u0437\u0430\u0439\u043d<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfae \u0418\u0432\u0435\u043d\u0442\u044b<\/span>\r\n <span class=\"marquee-item\">\ud83d\udcbb \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfb5 \u041c\u0443\u0437\u044b\u043a\u0430<\/span>\r\n <span class=\"marquee-item\">\ud83e\udd1d \u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438<\/span>\r\n <!-- Duplicate for seamless loop -->\r\n <span class=\"marquee-item\">\ud83d\udce1 \u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfac \u0412\u0438\u0434\u0435\u043e\u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d<\/span>\r\n <span class=\"marquee-item\">\u26cf\ufe0f Minecraft<\/span>\r\n <span class=\"marquee-item\">\ud83c\udf93 \u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435<\/span>\r\n <span class=\"marquee-item\">\ud83d\udcf1 \u0411\u043b\u043e\u0433\u0438\u043d\u0433<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfa8 \u0414\u0438\u0437\u0430\u0439\u043d<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfae \u0418\u0432\u0435\u043d\u0442\u044b<\/span>\r\n <span class=\"marquee-item\">\ud83d\udcbb \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/span>\r\n <span class=\"marquee-item\">\ud83c\udfb5 \u041c\u0443\u0437\u044b\u043a\u0430<\/span>\r\n <span class=\"marquee-item\">\ud83e\udd1d \u041a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u041d\u0410\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u042f -->\r\n <section id=\"directions\" class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-28\">\r\n <div class=\"text-center mb-10 sm:mb-16 reveal\">\r\n <span class=\"px-5 sm:px-8 py-2 sm:py-3 bg-white\/5 border border-white\/10 text-[0.6rem] sm:text-xs font-medium tracking-[0.15em] sm:tracking-[0.2em] rounded-full uppercase text-white\/60\">\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u043c\u044b<\/span>\r\n <h2 class=\"section-title font-space font-semibold mt-5 sm:mt-6 text-white\">\u0412\u044b\u0431\u0435\u0440\u0438 \u0441\u0432\u043e\u0451 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\r\n <div class=\"section-divider mt-5\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-8\">\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-1\">\r\n <div class=\"text-5xl sm:text-6xl lg:text-7xl mb-5 sm:mb-8\">\ud83d\udce1<\/div>\r\n <h3 class=\"card-title font-semibold mb-3 sm:mb-4 text-white\">\u0421\u0442\u0440\u0438\u043c\u0435\u0440\u044b<\/h3>\r\n <p class=\"flex-1 text-sm sm:text-base text-white\/70 leading-relaxed\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0440\u0430\u043d\u0441\u043b\u044f\u0446\u0438\u0439, \u0431\u043e\u043d\u0443\u0441\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445, \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0435\u0436\u0435\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0432\u0435\u043d\u0442\u044b.<\/p>\r\n <div class=\"mt-6 sm:mt-10 sm:mt-12 text-[#78c8ff] flex items-center gap-2 text-sm font-medium group\">\r\n <span>\u0412 \u0447\u0430\u0442<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1233\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-2\">\r\n <div class=\"text-5xl sm:text-6xl lg:text-7xl mb-5 sm:mb-8\">\ud83c\udfa5<\/div>\r\n <h3 class=\"card-title font-semibold mb-3 sm:mb-4 text-white\">\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \/ \u0410\u043a\u0442\u0451\u0440\u044b<\/h3>\r\n <p class=\"flex-1 text-sm sm:text-base text-white\/70 leading-relaxed\">\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u0430 \u043f\u043b\u043e\u0449\u0430\u0434\u043a\u0435, \u0441\u044a\u0451\u043c\u043a\u0438 \u043c\u0438\u043d\u0438-\u0444\u0438\u043b\u044c\u043c\u043e\u0432, \u043a\u0430\u0441\u0442\u0438\u043d\u0433 \u0438 \u043c\u043e\u043d\u0442\u0430\u0436.<\/p>\r\n <div class=\"mt-6 sm:mt-10 sm:mt-12 text-[#78c8ff] flex items-center gap-2 text-sm font-medium group\">\r\n <span>\u041e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c\u0441\u044f<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/bantv.ru\/?page_id=119\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-3 sm:col-span-2 lg:col-span-1\">\r\n <div class=\"text-5xl sm:text-6xl lg:text-7xl mb-5 sm:mb-8\">\ud83d\udcf1<\/div>\r\n <h3 class=\"card-title font-semibold mb-3 sm:mb-4 text-white\">\u0411\u043b\u043e\u0433\u0435\u0440\u044b<\/h3>\r\n <p class=\"flex-1 text-sm sm:text-base text-white\/70 leading-relaxed\">\u041a\u043e\u043d\u0442\u0435\u043d\u0442-\u043f\u043b\u0430\u043d, \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430, \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430\u043c\u0438.<\/p>\r\n <div class=\"mt-6 sm:mt-10 sm:mt-12 text-[#78c8ff] flex items-center gap-2 text-sm font-medium group\">\r\n <span>\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u044b\u043f\u0443\u0441\u043a\u0438<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u041f\u0420\u041e\u0415\u041a\u0422\u042b -->\r\n <section id=\"projects-list\" class=\"bg-[#0a0c14] py-16 sm:py-20 lg:py-28\">\r\n <div class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col sm:flex-row justify-between mb-10 sm:mb-16 items-start sm:items-end gap-6 sm:gap-8\">\r\n <div class=\"reveal\">\r\n <span class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.15em] sm:tracking-[0.2em] text-white\/35\">\u041d\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/span>\r\n <h2 class=\"section-title font-space font-semibold mt-2 sm:mt-3 text-white\">\u0422\u0432\u043e\u0440\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0430\u043c\u0438<\/h2>\r\n <\/div>\r\n <div onclick=\"runRandomizer()\"\r\n class=\"glass cursor-pointer px-6 sm:px-8 lg:px-10 py-4 sm:py-5 lg:py-6 rounded-2xl sm:rounded-3xl flex items-center gap-4 sm:gap-6 hover:scale-[1.03] active:scale-[0.97] transition-all duration-300 reveal reveal-delay-1 w-full sm:w-auto justify-center\">\r\n <div class=\"text-right flex-1 sm:flex-none\">\r\n <div class=\"font-medium text-sm sm:text-base lg:text-lg text-white\">\u0420\u0430\u043d\u0434\u043e\u043c\u0430\u0439\u0437\u0435\u0440 BanTV<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs text-white\/40 mt-0.5\">\u041d\u0430\u0436\u043c\u0438 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/div>\r\n <\/div>\r\n <div class=\"w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 bg-gradient-to-br from-[#623cff] to-[#78c8ff] rounded-2xl flex items-center justify-center text-3xl sm:text-4xl lg:text-5xl flex-shrink-0 shadow-lg\">\ud83c\udfb2<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-8\">\r\n <!-- \u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1123\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-1\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-[#623cff] font-semibold\">\u0421\u0435\u0440\u0438\u0430\u043b<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">\u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u0424\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0438\u0430\u043b \u043f\u0440\u043e \u0441\u0442\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432 \u043c\u0438\u0440\u0435 \u043a\u0438\u0431\u0435\u0440-\u043c\u0430\u0433\u0438\u0438. 12 \u0441\u0435\u0440\u0438\u0439 \u0432 2025 \u0433\u043e\u0434\u0443.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 flex flex-col sm:flex-row sm:justify-between gap-2 text-xs sm:text-sm\">\r\n <span class=\"text-white\/40\">2025 \u2022 12 \u0441\u0435\u0440\u0438\u0439<\/span>\r\n <span class=\"text-[#78c8ff] font-medium\">\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- BanTV Forge -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=924\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-2\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-[#78c8ff] font-semibold\">Minecraft<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">BanTV Forge<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u041e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0432\u044b\u0436\u0438\u0432\u0430\u043d\u0438\u0435-\u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u0438\u0432\u0435\u043d\u0442\u0430\u043c\u0438, \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u043e\u0439 \u0438 \u0442\u0443\u0440\u043d\u0438\u0440\u0430\u043c\u0438.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 flex flex-col sm:flex-row sm:justify-between gap-2 text-xs sm:text-sm\">\r\n <span class=\"text-white\/40\">\u041e\u043d\u043b\u0430\u0439\u043d 24\/7<\/span>\r\n <span class=\"text-[#78c8ff] font-medium\">\u0417\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-3\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-emerald-400 font-semibold\">\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f BanTV<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b: Blender, \u043c\u043e\u043d\u0442\u0430\u0436, \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0440\u0435\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 flex flex-col sm:flex-row sm:justify-between gap-2 text-xs sm:text-sm\">\r\n <span class=\"text-white\/40\">12 \u043a\u0443\u0440\u0441\u043e\u0432<\/span>\r\n <span class=\"text-[#78c8ff] font-medium\">\u041d\u0430\u0447\u0430\u0442\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- GBank -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=979\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-1\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-amber-400 font-semibold\">\u0424\u0438\u043d\u0430\u043d\u0441\u044b<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">BanTV GBank<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u043d\u043a \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438. \u0417\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439, \u0442\u0440\u0430\u0442\u044c \u0438 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u0443\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 BanTV.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 text-xs sm:text-sm\">\r\n <span class=\"text-[#78c8ff] font-medium\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0430\u043d\u043a \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- \u0420\u0430\u043d\u0434\u043e\u043c\u0430\u0439\u0437\u0435\u0440 -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=883\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-2\"\r\n onclick=\"event.preventDefault(); runRandomizer();\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-rose-400 font-semibold\">\u0423\u0442\u0438\u043b\u0438\u0442\u0430<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">\u0420\u0430\u043d\u0434\u043e\u043c\u0430\u0439\u0437\u0435\u0440<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0434\u0435\u0439, \u0442\u0438\u043c\u043c\u0435\u0439\u0442\u043e\u0432, \u0447\u0435\u043b\u043b\u0435\u043d\u0434\u0436\u0435\u0439 \u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u043d\u0438\u0439 \u0434\u043b\u044f \u0441\u0442\u0440\u0438\u043c\u043e\u0432.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 text-xs sm:text-sm\">\r\n <span class=\"text-[#78c8ff] font-medium cursor-pointer\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441 \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- \u0421\u043e\u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0438\u043a\u0438 -->\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1087\" target=\"_blank\"\r\n class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 flex flex-col reveal reveal-delay-3\">\r\n <div class=\"flex-1\">\r\n <div class=\"uppercase text-[0.6rem] sm:text-xs tracking-[0.12em] text-sky-400 font-semibold\">\u041f\u0430\u0440\u0442\u043d\u0451\u0440\u044b<\/div>\r\n <h3 class=\"card-title font-semibold mt-3 sm:mt-4 mb-4 sm:mb-6 text-white\">\u0421\u043e\u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0438\u043a\u0438<\/h3>\r\n <p class=\"text-sm sm:text-base text-white\/70 leading-relaxed\">\u0412\u0441\u0435 \u043d\u0430\u0448\u0438 \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u044b, \u043a\u043e\u043b\u043b\u0430\u0431\u043e\u0440\u0430\u0446\u0438\u0438 \u0438 \u0434\u0440\u0443\u0437\u044c\u044f \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 BanTV.<\/p>\r\n <\/div>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-10 pt-6 sm:pt-8 lg:pt-10 border-t border-white\/10 text-xs sm:text-sm\">\r\n <span class=\"text-[#78c8ff] font-medium\">\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u043e\u0432 \u2192<\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u041e\u0422\u0417\u042b\u0412\u042b -->\r\n <section class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-28\">\r\n <div class=\"text-center mb-10 sm:mb-16 reveal\">\r\n <h2 class=\"section-title font-space font-semibold text-white\">\u0427\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043d\u0430\u0448\u0438 \u0440\u0435\u0431\u044f\u0442\u0430<\/h2>\r\n <div class=\"section-divider mt-5\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-8\">\r\n <div class=\"testimonial-card glass rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 reveal reveal-delay-1\">\r\n <div class=\"flex items-center gap-1 mb-4 sm:mb-6\">\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm sm:text-base lg:text-lg italic text-white\/80 leading-relaxed\">\"\u041d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a \u0437\u0430 \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0430\u0443\u0447\u0438\u043b \u0446\u0432\u0435\u0442\u043e\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u0438 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0437\u0430 \u0433\u043e\u0434 \u0441\u0430\u043c\u043e\u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u2014 \u043e\u0433\u043e\u043d\u044c!\"<\/p>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-12 flex items-center gap-3 sm:gap-4\">\r\n <div class=\"w-10 h-10 sm:w-12 sm:h-12 avatar-placeholder rounded-xl sm:rounded-2xl flex items-center justify-center text-lg sm:text-xl\">\ud83c\udfac<\/div>\r\n <div>\r\n <div class=\"font-semibold text-sm sm:text-base text-white\">\u0418\u0432\u0430\u043d<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs text-white\/35\">\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u2022 2 \u043c\u0435\u0441\u044f\u0446\u0430 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card glass rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 reveal reveal-delay-2\">\r\n <div class=\"flex items-center gap-1 mb-4 sm:mb-6\">\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm sm:text-base lg:text-lg italic text-white\/80 leading-relaxed\">\"\u041a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 15\u043a \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432. \u041a\u043e\u043d\u0442\u0435\u043d\u0442-\u043f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e!\"<\/p>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-12 flex items-center gap-3 sm:gap-4\">\r\n <div class=\"w-10 h-10 sm:w-12 sm:h-12 avatar-placeholder rounded-xl sm:rounded-2xl flex items-center justify-center text-lg sm:text-xl\">\ud83d\udcf1<\/div>\r\n <div>\r\n <div class=\"font-semibold text-sm sm:text-base text-white\">\u041b\u0435\u0440\u0430<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs text-white\/35\">\u0411\u043b\u043e\u0433\u0435\u0440 \u2022 1 \u043c\u0435\u0441\u044f\u0446<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card glass rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 reveal reveal-delay-3 sm:col-span-2 lg:col-span-1\">\r\n <div class=\"flex items-center gap-1 mb-4 sm:mb-6\">\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <i class=\"fa-solid fa-star text-amber-400 text-xs sm:text-sm\"><\/i>\r\n <\/div>\r\n <p class=\"text-sm sm:text-base lg:text-lg italic text-white\/80 leading-relaxed\">\"\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043a \u0438\u0432\u0435\u043d\u0442\u0430\u043c \u043d\u0430 Forge \u0438 \u0434\u0430\u043b\u0438 \u0431\u043e\u043d\u0443\u0441\u044b. \u0422\u0435\u043f\u0435\u0440\u044c 400+ \u0437\u0440\u0438\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0441\u0442\u0440\u0438\u043c\u0435!\"<\/p>\r\n <div class=\"mt-6 sm:mt-8 lg:mt-12 flex items-center gap-3 sm:gap-4\">\r\n <div class=\"w-10 h-10 sm:w-12 sm:h-12 avatar-placeholder rounded-xl sm:rounded-2xl flex items-center justify-center text-lg sm:text-xl\">\ud83c\udfae<\/div>\r\n <div>\r\n <div class=\"font-semibold text-sm sm:text-base text-white\">\u0410\u0440\u0442\u0451\u043c<\/div>\r\n <div class=\"text-[0.6rem] sm:text-xs text-white\/35\">\u0421\u0442\u0440\u0438\u043c\u0435\u0440 \u2022 3 \u043c\u0435\u0441\u044f\u0446\u0430<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n\r\n <!-- \u0410\u041a\u0410\u0414\u0415\u041c\u0418\u042f -->\r\n <section id=\"academy\" class=\"bg-[#0a0c14] py-16 sm:py-20 lg:py-28\">\r\n <div class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"max-w-2xl mx-auto text-center mb-10 sm:mb-16 lg:mb-20 reveal\">\r\n <span class=\"px-5 sm:px-8 py-2 sm:py-3 bg-white\/5 border border-white\/10 text-[0.6rem] sm:text-xs font-medium tracking-[0.15em] sm:tracking-[0.2em] rounded-full uppercase text-white\/60\">\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435<\/span>\r\n <h2 class=\"section-title font-space font-semibold mt-5 sm:mt-6 text-white\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f BanTV<\/h2>\r\n <p class=\"mt-3 sm:mt-4 body-large text-white\/60\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-8 max-w-5xl mx-auto\">\r\n <div class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 text-center reveal reveal-delay-1\">\r\n <div class=\"w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-blue-500\/20 to-blue-600\/10 rounded-2xl sm:rounded-3xl flex items-center justify-center mx-auto mb-5 sm:mb-8\">\r\n <span class=\"text-4xl sm:text-5xl lg:text-6xl\">\ud83d\udfe6<\/span>\r\n <\/div>\r\n <div class=\"text-lg sm:text-xl lg:text-2xl font-semibold mb-2 sm:mb-3 text-white\">\u041e\u0441\u043d\u043e\u0432\u044b Blender<\/div>\r\n <div class=\"text-sm sm:text-base text-white\/60 mb-6 sm:mb-8 lg:mb-12\">3D-\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440<\/div>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\" class=\"inline-flex items-center gap-2 text-[#78c8ff] text-sm font-medium group\">\r\n <span>\u041d\u0430\u0447\u0430\u0442\u044c \u043a\u0443\u0440\u0441<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 text-center reveal reveal-delay-2\">\r\n <div class=\"w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-purple-500\/20 to-purple-600\/10 rounded-2xl sm:rounded-3xl flex items-center justify-center mx-auto mb-5 sm:mb-8\">\r\n <span class=\"text-4xl sm:text-5xl lg:text-6xl\">\ud83c\udf9e\ufe0f<\/span>\r\n <\/div>\r\n <div class=\"text-lg sm:text-xl lg:text-2xl font-semibold mb-2 sm:mb-3 text-white\">\u041c\u043e\u043d\u0442\u0430\u0436 \u0438 \u0446\u0432\u0435\u0442\u043e\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u044f<\/div>\r\n <div class=\"text-sm sm:text-base text-white\/60 mb-6 sm:mb-8 lg:mb-12\">DaVinci Resolve \u0438 Premiere Pro<\/div>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\" class=\"inline-flex items-center gap-2 text-[#78c8ff] text-sm font-medium group\">\r\n <span>\u041d\u0430\u0447\u0430\u0442\u044c \u043a\u0443\u0440\u0441<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"glass project-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 text-center reveal reveal-delay-3 sm:col-span-2 lg:col-span-1\">\r\n <div class=\"w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-green-500\/20 to-green-600\/10 rounded-2xl sm:rounded-3xl flex items-center justify-center mx-auto mb-5 sm:mb-8\">\r\n <span class=\"text-4xl sm:text-5xl lg:text-6xl\">\ud83d\udcbb<\/span>\r\n <\/div>\r\n <div class=\"text-lg sm:text-xl lg:text-2xl font-semibold mb-2 sm:mb-3 text-white\">\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0440\u0435\u0430\u0442\u043e\u0440\u043e\u0432<\/div>\r\n <div class=\"text-sm sm:text-base text-white\/60 mb-6 sm:mb-8 lg:mb-12\">Python, OBS-\u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/div>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=900\" target=\"_blank\" class=\"inline-flex items-center gap-2 text-[#78c8ff] text-sm font-medium group\">\r\n <span>\u041d\u0430\u0447\u0430\u0442\u044c \u043a\u0443\u0440\u0441<\/span>\r\n <span class=\"transition-transform duration-300 group-hover:translate-x-1\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FINAL CTA -->\r\n <section class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-28\">\r\n <div class=\"glass-strong rounded-2xl sm:rounded-3xl lg:rounded-[2rem] p-8 sm:p-12 lg:p-16 xl:p-20 text-center max-w-3xl mx-auto reveal scale-in cta-glow\">\r\n <div class=\"text-5xl sm:text-6xl lg:text-7xl mb-5 sm:mb-8\">\ud83d\ude80<\/div>\r\n <h2 class=\"text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-space font-semibold mb-4 sm:mb-6 lg:mb-8 text-white leading-tight\">\u0413\u043e\u0442\u043e\u0432 \u0441\u0442\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b?<\/h2>\r\n <p class=\"text-base sm:text-lg lg:text-xl xl:text-2xl text-white\/60 mb-8 sm:mb-10 lg:mb-12\">\u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0441\u044f \u0432 Telegram \u0438 \u043d\u0430\u0447\u043d\u0438 \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f<\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center\">\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\"\r\n class=\"btn-telegram px-10 sm:px-12 lg:px-16 py-5 sm:py-6 lg:py-8 bg-white text-[#05060a] rounded-2xl sm:rounded-3xl text-lg sm:text-xl lg:text-2xl font-semibold flex items-center justify-center gap-3 sm:gap-4 shadow-2xl ripple\">\r\n <i class=\"fa-brands fa-telegram text-3xl sm:text-4xl lg:text-5xl\"><\/i>\r\n Telegram \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438\r\n <\/a>\r\n <a href=\"https:\/\/bantv.ru\/?page_id=1233\" target=\"_blank\"\r\n class=\"btn-outline px-10 sm:px-12 lg:px-16 py-5 sm:py-6 lg:py-8 rounded-2xl sm:rounded-3xl text-base sm:text-lg lg:text-xl font-medium flex items-center justify-center\">\r\n \u041e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u0438\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer class=\"bg-black\/60 border-t border-white\/5 py-10 sm:py-12 lg:py-16\">\r\n <div class=\"max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-6 sm:gap-8\">\r\n <div class=\"flex items-center gap-x-3 sm:gap-x-4\">\r\n <div class=\"w-8 h-8 sm:w-10 sm:h-10 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#623cff] to-[#78c8ff] flex items-center justify-center text-xl sm:text-3xl lg:text-4xl font-space font-black text-white\">B<\/div>\r\n <span class=\"font-space text-xl sm:text-2xl lg:text-3xl font-semibold text-white\">BanTV Production<\/span>\r\n <\/div>\r\n <div class=\"text-xs sm:text-sm text-white\/35 text-center\">\u00a9 2026 BanTV Production \u2014 \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b<\/div>\r\n <a href=\"https:\/\/t.me\/BanTV_production\" target=\"_blank\" class=\"flex items-center gap-x-2 sm:gap-x-3 text-white\/40 hover:text-white transition-colors duration-300 text-xs sm:text-sm\">\r\n <i class=\"fa-brands fa-telegram text-base sm:text-lg\"><\/i>\r\n t.me\/BanTV_production\r\n <\/a>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- NAVIGATION PORTAL -->\r\n <div class=\"nav-portal\" id=\"navPortal\">\r\n <a href=\"#hero\" onclick=\"activatePortal(this)\" class=\"portal-item active\" data-section=\"hero\">\r\n <i class=\"fa-solid fa-house\"><\/i>\r\n <span>\u0412\u0432\u0435\u0440\u0445<\/span>\r\n <\/a>\r\n <a href=\"#directions\" onclick=\"activatePortal(this)\" class=\"portal-item\" data-section=\"directions\">\r\n <i class=\"fa-solid fa-compass\"><\/i>\r\n <span>\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/span>\r\n <\/a>\r\n <a href=\"#projects-list\" onclick=\"activatePortal(this)\" class=\"portal-item\" data-section=\"projects-list\">\r\n <i class=\"fa-solid fa-folder-tree\"><\/i>\r\n <span>\u041f\u0440\u043e\u0435\u043a\u0442\u044b<\/span>\r\n <\/a>\r\n <a href=\"#academy\" onclick=\"activatePortal(this)\" class=\"portal-item\" data-section=\"academy\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\r\n <span>\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f<\/span>\r\n <\/a>\r\n <a href=\"#partner\" onclick=\"activatePortal(this)\" class=\"portal-item\" data-section=\"partner\">\r\n <i class=\"fa-solid fa-handshake\"><\/i>\r\n <span>\u041f\u0430\u0440\u0442\u043d\u0451\u0440<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- RANDOMIZER MODAL -->\r\n <div class=\"randomizer-modal\" id=\"randomizerModal\" onclick=\"if(event.target.id==='randomizerModal')closeRandomizer()\">\r\n <div class=\"modal-content glass-strong max-w-sm sm:max-w-md w-full mx-4 sm:mx-6 rounded-2xl sm:rounded-3xl p-8 sm:p-10 lg:p-12 text-center\">\r\n <div id=\"randomEmoji\" class=\"text-6xl sm:text-7xl lg:text-8xl mb-5 sm:mb-8 transition-all duration-500\"><\/div>\r\n <div id=\"randomTitle\" class=\"text-2xl sm:text-3xl lg:text-4xl font-space font-semibold mb-3 sm:mb-4 text-white\"><\/div>\r\n <div id=\"randomDesc\" class=\"text-sm sm:text-base lg:text-lg text-white\/70\"><\/div>\r\n <button onclick=\"runRandomizer()\" class=\"mt-8 sm:mt-10 lg:mt-12 w-full py-5 sm:py-6 lg:py-7 bg-gradient-to-r from-[#623cff] to-[#78c8ff] rounded-2xl text-xl sm:text-2xl font-semibold text-white hover:scale-[1.03] active:scale-[0.97] transition-all duration-300\">\r\n \ud83c\udfb2 \u0415\u0449\u0451 \u0440\u0430\u0437!\r\n <\/button>\r\n <button onclick=\"closeRandomizer()\" class=\"mt-4 sm:mt-6 text-white\/35 hover:text-white\/60 transition-colors text-sm sm:text-base\">\r\n \u0417\u0430\u043a\u0440\u044b\u0442\u044c\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ === MOBILE MENU ===\r\n let mobileMenuOpen = false;\r\n\r\n function toggleMobileMenu() {\r\n mobileMenuOpen = !mobileMenuOpen;\r\n const menu = document.getElementById('mobileMenu');\r\n const btn = document.getElementById('hamburgerBtn');\r\n\r\n if (mobileMenuOpen) {\r\n menu.classList.add('active');\r\n btn.classList.add('hamburger-active');\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n closeMobileMenu();\r\n }\r\n }\r\n\r\n function closeMobileMenu() {\r\n mobileMenuOpen = false;\r\n document.getElementById('mobileMenu').classList.remove('active');\r\n document.getElementById('hamburgerBtn').classList.remove('hamburger-active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ === HEADER SCROLL EFFECT ===\r\n let lastScroll = 0;\r\n const header = document.getElementById('mainHeader');\r\n const scrollProgress = document.getElementById('scrollProgress');\r\n\r\n function onScroll() {\r\n const currentScroll = window.pageYOffset;\r\n\r\n \/\/ Header shrink\r\n if (currentScroll > 50) {\r\n header.classList.add('scrolled');\r\n } else {\r\n header.classList.remove('scrolled');\r\n }\r\n\r\n \/\/ Scroll progress bar\r\n const docHeight = document.documentElement.scrollHeight - window.innerHeight;\r\n const scrollPercent = docHeight > 0 ? (currentScroll \/ docHeight) * 100 : 0;\r\n scrollProgress.style.width = scrollPercent + '%';\r\n\r\n lastScroll = currentScroll;\r\n }\r\n\r\n window.addEventListener('scroll', onScroll, { passive: true });\r\n\r\n \/\/ === PORTAL NAVIGATION ===\r\n let currentPortalActive = null;\r\n\r\n function activatePortal(el) {\r\n if (currentPortalActive) currentPortalActive.classList.remove('active');\r\n el.classList.add('active');\r\n currentPortalActive = el;\r\n }\r\n\r\n \/\/ === SCROLL REVEAL ===\r\n function initReveal() {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -40px 0px'\r\n });\r\n\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n }\r\n\r\n \/\/ === STATS COUNTER ===\r\n function animateStats() {\r\n const counters = [\r\n { el: document.getElementById('stat-projects'), target: 120, suffix: '' },\r\n { el: document.getElementById('stat-members'), target: 50, suffix: '+' },\r\n { el: document.getElementById('stat-mentors'), target: 5, suffix: '' }\r\n ];\r\n\r\n counters.forEach(({ el, target, suffix }) => {\r\n let current = 0;\r\n const totalSteps = 40;\r\n const increment = target \/ totalSteps;\r\n const stepTime = 30;\r\n\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n current = target;\r\n clearInterval(timer);\r\n }\r\n el.textContent = Math.round(current) + suffix;\r\n }, stepTime);\r\n });\r\n }\r\n\r\n \/\/ === AUTO PORTAL ACTIVATION ===\r\n function initPortalScrollSpy() {\r\n const sectionIds = ['hero', 'directions', 'projects-list', 'academy', 'partner'];\r\n\r\n const observer = new IntersectionObserver(entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const link = document.querySelector(`.portal-item[data-section=\"${entry.target.id}\"]`);\r\n if (link && link !== currentPortalActive) {\r\n if (currentPortalActive) currentPortalActive.classList.remove('active');\r\n link.classList.add('active');\r\n currentPortalActive = link;\r\n }\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n\r\n sectionIds.forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) observer.observe(el);\r\n });\r\n }\r\n\r\n \/\/ === RANDOMIZER ===\r\n const randomProjects = [\r\n { emoji: '\ud83c\udf0c', title: '\u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b', desc: '\u0421\u0435\u0440\u0438\u044f 8 \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435! \u0425\u043e\u0447\u0435\u0448\u044c \u0441\u043d\u044f\u0442\u044c\u0441\u044f?' },\r\n { emoji: '\u26cf\ufe0f', title: 'BanTV Forge', desc: '\u041d\u043e\u0432\u044b\u0439 \u0441\u0435\u0437\u043e\u043d \u0438\u0432\u0435\u043d\u0442\u043e\u0432 \u2014 \u0437\u0430\u0445\u043e\u0434\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440!' },\r\n { emoji: '\ud83c\udfac', title: '\u041c\u0438\u043d\u0438-\u0444\u0438\u043b\u044c\u043c', desc: '\u0422\u044b \u2014 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440! \u041f\u0438\u0448\u0438 \u0432 Telegram' },\r\n { emoji: '\ud83d\udcc8', title: '\u041a\u043e\u043d\u0442\u0435\u043d\u0442-\u043f\u043b\u0430\u043d', desc: '\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u0432\u043e\u0435\u0433\u043e \u043a\u0430\u043d\u0430\u043b\u0430' },\r\n { emoji: '\ud83c\udfa8', title: '\u0414\u0438\u0437\u0430\u0439\u043d \u0441\u0442\u0440\u0438\u043c\u0430', desc: '\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043e\u0432\u0435\u0440\u043b\u0435\u0438 \u0438 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e!' },\r\n { emoji: '\ud83c\udfb5', title: '\u041c\u0443\u0437\u044b\u043a\u0430 \u0434\u043b\u044f \u0441\u0442\u0440\u0438\u043c\u0430', desc: '\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0440\u0435\u043a\u043e\u0432 \u0431\u0435\u0437 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u043f\u0440\u0430\u0432' }\r\n ];\r\n\r\n function runRandomizer() {\r\n const modal = document.getElementById('randomizerModal');\r\n const r = randomProjects[Math.floor(Math.random() * randomProjects.length)];\r\n\r\n const emojiEl = document.getElementById('randomEmoji');\r\n const titleEl = document.getElementById('randomTitle');\r\n const descEl = document.getElementById('randomDesc');\r\n\r\n \/\/ Quick fade out\r\n emojiEl.style.opacity = '0';\r\n emojiEl.style.transform = 'scale(0.5)';\r\n titleEl.style.opacity = '0';\r\n titleEl.style.transform = 'translateY(10px)';\r\n descEl.style.opacity = '0';\r\n\r\n setTimeout(() => {\r\n emojiEl.textContent = r.emoji;\r\n titleEl.textContent = r.title;\r\n descEl.textContent = r.desc;\r\n\r\n \/\/ Fade in\r\n emojiEl.style.opacity = '1';\r\n emojiEl.style.transform = 'scale(1)';\r\n titleEl.style.opacity = '1';\r\n titleEl.style.transform = 'translateY(0)';\r\n descEl.style.opacity = '1';\r\n }, 150);\r\n\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeRandomizer() {\r\n const modal = document.getElementById('randomizerModal');\r\n modal.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Close modal on Escape\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n closeRandomizer();\r\n if (mobileMenuOpen) closeMobileMenu();\r\n }\r\n });\r\n\r\n \/\/ === RIPPLE EFFECT ===\r\n document.querySelectorAll('.ripple').forEach(btn => {\r\n btn.addEventListener('click', function(e) {\r\n const rect = this.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n\r\n const ripple = document.createElement('span');\r\n ripple.className = 'ripple-effect';\r\n ripple.style.left = x + 'px';\r\n ripple.style.top = y + 'px';\r\n ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';\r\n\r\n this.appendChild(ripple);\r\n setTimeout(() => ripple.remove(), 600);\r\n });\r\n });\r\n\r\n \/\/ === PARALLAX ON MOUSE (desktop only) ===\r\n if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {\r\n document.addEventListener('mousemove', (e) => {\r\n const moveX = (e.clientX - window.innerWidth \/ 2) * 0.01;\r\n const moveY = (e.clientY - window.innerHeight \/ 2) * 0.01;\r\n\r\n document.querySelectorAll('.float-element, .float-element-delay, .float-element-delay2').forEach(el => {\r\n el.style.transform = `translate(${moveX}px, ${moveY}px)`;\r\n });\r\n });\r\n }\r\n\r\n \/\/ === SMOOTH ANCHOR SCROLL ===\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const targetId = this.getAttribute('href');\r\n if (targetId === '#') return;\r\n\r\n const target = document.querySelector(targetId);\r\n if (target) {\r\n e.preventDefault();\r\n const headerHeight = header.offsetHeight;\r\n const targetPos = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;\r\n\r\n window.scrollTo({\r\n top: targetPos,\r\n behavior: 'smooth'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ === INIT ===\r\n window.addEventListener('load', () => {\r\n initReveal();\r\n animateStats();\r\n initPortalScrollSpy();\r\n onScroll(); \/\/ Set initial state\r\n });\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>BanTV Production \u2014 \u0421\u0442\u0430\u043d\u044c \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0412\u044b\u043f\u0443\u0441\u043a\u0438 \u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b BanTV Forge \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f Telegram B BanTV PRODUCTION \u0412\u044b\u043f\u0443\u0441\u043a\u0438 \u0422\u0435\u043d\u0438 \u0418\u0441\u043a\u0440\u044b BanTV Forge \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f 120 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0443\u0436\u0435 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u0421\u0442\u0430\u043d\u044c \u0447\u0430\u0441\u0442\u044c\u044e BanTV \u2014 \u0443\u0447\u0438\u0441\u044c, \u0441\u043d\u0438\u043c\u0430\u0439, \u0442\u0432\u043e\u0440\u0438 \u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430, \u0436\u0438\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0441\u0442\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u0431\u043b\u043e\u0433\u0435\u0440\u043e\u0432. \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u041e\u0442\u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c\u0441\u044f 0 \u041f\u0420\u041e\u0415\u041a\u0422\u041e\u0412 0 \u0423\u0427\u0410\u0421\u0422\u041d\u0418\u041a\u041e\u0412 0 \u041d\u0410\u0421\u0422\u0410\u0412\u041d\u0418\u041a\u041e\u0412 \u26cf\ufe0f … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/bantv.ru\/?page_id=1238\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<span class=\"screen-reader-text\"> «\u041f\u0440\u043e\u0435\u043a\u0442\u044b»<\/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-1238","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1238","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=1238"}],"version-history":[{"count":10,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1238\/revisions"}],"predecessor-version":[{"id":1644,"href":"https:\/\/bantv.ru\/index.php?rest_route=\/wp\/v2\/pages\/1238\/revisions\/1644"}],"wp:attachment":[{"href":"https:\/\/bantv.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}