VEI Presentation - Professional Landing<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800;900&family=Orbitron:wght@600;800&family=JetBrains+Mono:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n heading: ['Plus Jakarta Sans', 'sans-serif'],\r\n orbitron: ['Orbitron', 'sans-serif'],\r\n mono: ['JetBrains Mono', 'monospace'],\r\n },\r\n colors: {\r\n nordicDark: '#0B132B',\r\n nordicCard: '#111D3A',\r\n nordicSlate: '#0F172A',\r\n nordicLightBg: '#F8FAFC',\r\n nordicBorder: '#CBD5E1',\r\n nordicWhite: '#FFFFFF',\r\n nordicBg: '#F8FAFC',\r\n nordicNavy: '#111D3A',\r\n nordicTextDark: '#0F172A',\r\n nordicBlue: '#0284C7',\r\n nordicEmerald: '#059669',\r\n nordicRose: '#E11D48',\r\n nordicPurple: '#7C3AED',\r\n veiLink: '#10B981',\r\n veiCommune: '#F43F5E',\r\n veiScan: '#A855F7',\r\n veiTranslate: '#06B6D4',\r\n veiSprak: '#F59E0B',\r\n veiEmerald: '#059669',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Global Styles *\/\r\n html, body {\r\n font-family: 'Inter', sans-serif;\r\n max-width: 100vw;\r\n overflow-x: hidden;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* Navigation Styles *\/\r\n .nav-sidebar {\r\n position: fixed;\r\n right: 0;\r\n top: 0;\r\n height: 100vh;\r\n width: 80px;\r\n background: rgba(11, 19, 43, 0.95);\r\n backdrop-filter: blur(4px);\r\n border-left: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 1000;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px 0;\r\n transition: transform 0.15s ease;\r\n }\r\n\r\n .nav-item {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 12px;\r\n cursor: pointer;\r\n transition: all 0.15s ease;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n color: rgba(255, 255, 255, 0.6);\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .nav-item:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.5);\r\n color: #10B981;\r\n transform: scale(1.1);\r\n }\r\n\r\n .nav-item:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .nav-item.active {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n \/* Viewed\/Unviewed State Indicators *\/\r\n .nav-section-item {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-section-item.viewed {\r\n opacity: 1;\r\n }\r\n\r\n .nav-section-item.viewed .section-number {\r\n background: linear-gradient(135deg, #10B981 0%, #059669 100%);\r\n color: white;\r\n border-color: #10B981;\r\n }\r\n\r\n .nav-section-item.viewed .section-title {\r\n color: #10B981;\r\n }\r\n\r\n .nav-section-item.viewed::after {\r\n content: '\u2713';\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n color: #10B981;\r\n font-size: 12px;\r\n font-weight: bold;\r\n }\r\n\r\n .nav-section-item.current {\r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);\r\n border-color: rgba(16, 185, 129, 0.5);\r\n transform: scale(1.02);\r\n }\r\n\r\n .nav-section-item.current .section-number {\r\n background: #10B981;\r\n color: #0B132B;\r\n box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);\r\n animation: pulseSection 2s infinite;\r\n }\r\n\r\n .nav-section-item.current .section-title {\r\n color: white;\r\n }\r\n\r\n .nav-section-item.unviewed {\r\n opacity: 0.5;\r\n }\r\n\r\n .nav-section-item.unviewed .section-number {\r\n background: #1e293b;\r\n color: #64748b;\r\n border-color: #334155;\r\n }\r\n\r\n .nav-section-item.unviewed .section-title {\r\n color: #64748b;\r\n }\r\n\r\n @keyframes pulseSection {\r\n 0%, 100% {\r\n box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);\r\n }\r\n 50% {\r\n box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);\r\n }\r\n }\r\n\r\n \/* Main navigation viewed indicators *\/\r\n .main-nav-item.viewed-indicator::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 4px;\r\n transform: translateY(-50%);\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #10B981;\r\n box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n .main-nav-item.current-indicator {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item .tooltip {\r\n position: absolute;\r\n left: 60px;\r\n background: rgba(11, 19, 43, 0.95);\r\n color: white;\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n white-space: nowrap;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.15s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 3;\r\n pointer-events: none;\r\n }\r\n\r\n .nav-item:hover .tooltip {\r\n opacity: 1;\r\n visibility: visible;\r\n left: 65px;\r\n }\r\n\r\n \/* Language Switcher Styles *\/\r\n .language-switcher {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 16px;\r\n padding: 8px;\r\n background: rgba(11, 19, 43, 0.8);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 12px;\r\n width: fit-content;\r\n }\r\n\r\n .lang-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 32px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n transition: all 0.2s ease;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n color: rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n .lang-btn:hover {\r\n background: rgba(59, 130, 246, 0.2);\r\n border-color: rgba(59, 130, 246, 0.4);\r\n color: #3B82F6;\r\n transform: scale(1.05);\r\n }\r\n\r\n .lang-btn.active {\r\n background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);\r\n }\r\n\r\n .lang-btn.active:hover {\r\n background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);\r\n color: white;\r\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\r\n }\r\n\r\n \/* Section Styles *\/\r\n .presentation-section {\r\n min-height: 100vh;\r\n padding-right: 80px;\r\n position: relative;\r\n display: block;\r\n visibility: visible;\r\n }\r\n\r\n \/* Section Animations - Optimized *\/\r\n .section-animate {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .section-animate.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Block 1 Styles *\/\r\n #section-1 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glow-bg {\r\n position: absolute;\r\n width: 400px;\r\n height: 400px;\r\n background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, rgba(11, 19, 43, 0) 70%);\r\n top: -100px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glass-panel {\r\n background: rgba(17, 29, 58, 0.95);\r\n backdrop-filter: blur(2px);\r\n -webkit-backdrop-filter: blur(2px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n @keyframes heroPlayPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { transform: scale(1.02); box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.2); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n .hero-play-btn {\r\n animation: heroPlayPulse 3s infinite;\r\n }\r\n\r\n @keyframes soundWave {\r\n 0%, 100% { height: 4px; }\r\n 50% { height: 12px; }\r\n }\r\n .sound-bar {\r\n width: 3px;\r\n background-color: #10B981;\r\n border-radius: 2px;\r\n display: inline-block;\r\n animation: soundWave 1.5s infinite ease-in-out;\r\n }\r\n .sound-bar:nth-child(2) { animation-delay: 0.3s; }\r\n .sound-bar:nth-child(3) { animation-delay: 0.6s; }\r\n .sound-bar:nth-child(4) { animation-delay: 0.15s; }\r\n .sound-bar:nth-child(5) { animation-delay: 0.45s; }\r\n\r\n @keyframes modalFadeIn {\r\n from { opacity: 0; transform: scale(0.95); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n .modal-animate {\r\n animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n @keyframes textModalFadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .text-modal-animate {\r\n animation: textModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n .custom-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5); \r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb {\r\n background: rgba(16, 185, 129, 0.5); \r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: rgba(16, 185, 129, 0.8); \r\n }\r\n\r\n \/* Text modal scrollbar *\/\r\n #textModal4 .prose::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-track {\r\n background: #f1f5f9;\r\n border-radius: 4px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-thumb {\r\n background: #94a3b8;\r\n border-radius: 4px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-thumb:hover {\r\n background: #64748b;\r\n }\r\n\r\n @keyframes pulseNextStep {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.3); }\r\n 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, 0.6); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, 0.3); }\r\n }\r\n .animate-next-step {\r\n animation: pulseNextStep 3s infinite;\r\n background-color: rgba(16, 185, 129, 0.15) !important;\r\n opacity: 1 !important;\r\n }\r\n .animate-next-step .step-icon {\r\n background-color: #10B981 !important;\r\n color: #020617 !important;\r\n border-color: #10B981 !important;\r\n box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);\r\n transform: scale(1.05);\r\n }\r\n .animate-next-step .step-title {\r\n color: #fff !important;\r\n }\r\n\r\n \/* Block 2 Styles *\/\r\n #section-2 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n .card-shadow-stiff {\r\n box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);\r\n }\r\n\r\n .card-shadow-stiff:hover {\r\n box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\r\n }\r\n\r\n .timeline-line {\r\n background: linear-gradient(90deg, #10B981 0%, #F43F5E 33%, #A855F7 66%, #F59E0B 100%);\r\n }\r\n\r\n @keyframes playPulseContrast {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n\r\n .play-btn-glow {\r\n animation: playPulseContrast 3s infinite ease-in-out;\r\n }\r\n\r\n @keyframes endOverlayShow {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-pop-in {\r\n animation: endOverlayShow 0.25s ease-out forwards;\r\n }\r\n\r\n \/* Block 3 Styles *\/\r\n #section-3 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glow-emerald-spot {\r\n position: absolute;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(11, 19, 43, 0) 70%);\r\n top: 2%;\r\n left: -8%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glow-cyan-spot {\r\n position: absolute;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(11, 19, 43, 0) 70%);\r\n bottom: 2%;\r\n right: -8%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glass-card-rich {\r\n background: rgba(22, 36, 71, 0.7);\r\n backdrop-filter: blur(4px);\r\n -webkit-backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .glass-card-rich:hover {\r\n border-color: rgba(16, 185, 129, 0.45);\r\n }\r\n\r\n @keyframes playGlowPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n\r\n .btn-video-glow {\r\n animation: playGlowPulse 3s infinite ease-in-out;\r\n }\r\n\r\n .time-vector-gradient {\r\n background: linear-gradient(90deg, #10B981 0%, #F43F5E 30%, #A855F7 55%, #06B6D4 78%, #F59E0B 100%);\r\n }\r\n\r\n @keyframes modalOverlayPop {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-modal-anim {\r\n animation: modalOverlayPop 0.25s ease-out forwards;\r\n }\r\n\r\n .custom-dark-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 4px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-thumb {\r\n background: #10B981;\r\n border-radius: 4px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: #34D399;\r\n }\r\n\r\n \/* Block 4 Styles *\/\r\n #section-4 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n .card-nordic-light {\r\n background: #FFFFFF;\r\n border: 1px solid #E2E8F0;\r\n box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05);\r\n transition: all 0.15s ease;\r\n }\r\n\r\n .card-nordic-light:hover {\r\n border-color: #0284C7;\r\n box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.12);\r\n transform: translateY(-2px);\r\n }\r\n\r\n @keyframes playPulseLight {\r\n 0% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.3); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); transform: scale(1); }\r\n }\r\n\r\n .btn-play-pulse {\r\n animation: playPulseLight 3s infinite ease-in-out;\r\n }\r\n\r\n @keyframes inlineOverlayPop {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-anim-pop {\r\n animation: inlineOverlayPop 0.25s ease-out forwards;\r\n }\r\n\r\n @keyframes soundWaveLight {\r\n 0%, 100% { height: 4px; }\r\n 50% { height: 18px; }\r\n }\r\n .sound-bar-light {\r\n width: 3px;\r\n background-color: #0284C7;\r\n border-radius: 2px;\r\n display: inline-block;\r\n animation: soundWaveLight 1.5s infinite ease-in-out;\r\n }\r\n .sound-bar-light:nth-child(2) { animation-delay: 0.3s; }\r\n .sound-bar-light:nth-child(3) { animation-delay: 0.6s; }\r\n .sound-bar-light:nth-child(4) { animation-delay: 0.15s; }\r\n .sound-bar-light:nth-child(5) { animation-delay: 0.45s; }\r\n\r\n .custom-light-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-light-scrollbar::-webkit-scrollbar-track {\r\n background: #F1F5F9;\r\n border-radius: 4px;\r\n }\r\n .custom-light-scrollbar::-webkit-scrollbar-thumb {\r\n background: #0284C7;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* Block 5 Styles *\/\r\n #section-5 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glass-panel-b5 {\r\n background: rgba(17, 29, 58, 0.5);\r\n backdrop-filter: blur(4px);\r\n -webkit-backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .glass-panel-b5:hover {\r\n border-color: rgba(16, 185, 129, 0.3);\r\n }\r\n\r\n .neon-border {\r\n border: 1px solid #10B981;\r\n box-shadow: 0 0 15px rgba(16, 185, 129, 0.35), inset 0 0 15px rgba(16, 185, 129, 0.15);\r\n }\r\n\r\n .nordic-glow-btn {\r\n background: linear-gradient(135deg, #10B981 0%, #059669 100%);\r\n color: #020617;\r\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);\r\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .nordic-glow-btn:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n @keyframes badgePulse {\r\n 0%, 100% {\r\n box-shadow: 0 0 25px rgba(16, 185, 129, 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);\r\n }\r\n 50% {\r\n box-shadow: 0 0 45px rgba(16, 185, 129, 0.7), 0 10px 40px rgba(0, 0, 0, 0.9);\r\n }\r\n }\r\n\r\n .badge-animation {\r\n animation: badgePulse 2.5s infinite ease-in-out;\r\n }\r\n\r\n .pop-up-enter {\r\n animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n @keyframes slideUpFade {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.95);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n input[type=range] {\r\n accent-color: #00F5D4;\r\n }\r\n\r\n \/* Block 6 Styles *\/\r\n #section-6 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n \/* Circular Progress Indicator Styles *\/\r\n #circularProgress {\r\n transition: stroke-dashoffset 0.5s ease-out;\r\n }\r\n\r\n #circularProgressText {\r\n transition: all 0.3s ease;\r\n font-size: 0.875rem;\r\n }\r\n\r\n #circularProgressTime {\r\n transition: all 0.3s ease;\r\n font-size: 0.75rem;\r\n }\r\n\r\n .nordic-card {\r\n background: #FFFFFF;\r\n border: 1px solid #E2E8F0;\r\n box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);\r\n transition: all 0.15s ease;\r\n }\r\n\r\n .nordic-card:hover {\r\n border-color: #059669;\r\n box-shadow: 0 10px 30px -5px rgba(5, 150, 105, 0.1);\r\n transform: translateY(-2px);\r\n }\r\n\r\n @keyframes pulseGlowEmerald {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }\r\n 50% { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }\r\n }\r\n\r\n .active-stage-pulse {\r\n animation: pulseGlowEmerald 2s infinite ease-in-out;\r\n }\r\n\r\n .founder-gradient {\r\n background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);\r\n }\r\n\r\n .modal-fade {\r\n transition: opacity 0.15s ease, visibility 0.15s ease;\r\n }\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n \/* Hide hamburger on desktop *\/\r\n .hamburger-btn {\r\n display: none;\r\n }\r\n\r\n \/* Mobile navigation styles *\/\r\n .nav-sidebar {\r\n width: 100%;\r\n height: 60px;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0;\r\n border-left: none;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 999;\r\n }\r\n\r\n .nav-items-container {\r\n position: fixed;\r\n top: 60px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n background: rgba(11, 19, 43, 0.98);\r\n backdrop-filter: blur(4px);\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n flex-direction: column;\r\n padding: 24px 20px;\r\n gap: 12px;\r\n z-index: 998;\r\n max-height: calc(100vh - 60px);\r\n overflow-y: auto;\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n visibility: hidden;\r\n transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;\r\n }\r\n\r\n .nav-items-container.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n visibility: visible;\r\n }\r\n\r\n .nav-item {\r\n margin-bottom: 0;\r\n margin-right: 0;\r\n width: 100%;\r\n height: auto;\r\n padding: 16px 20px;\r\n border-radius: 12px;\r\n justify-content: flex-start;\r\n gap: 16px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .nav-item:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.4);\r\n transform: translateX(4px);\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .nav-item:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n .nav-item.active {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item.active .tooltip {\r\n color: #0B132B;\r\n font-weight: 600;\r\n }\r\n\r\n .nav-item.active i {\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item .tooltip {\r\n display: block;\r\n font-size: 16px;\r\n color: white;\r\n font-weight: 500;\r\n pointer-events: none;\r\n }\r\n\r\n .nav-item i {\r\n font-size: 20px;\r\n color: #10B981;\r\n width: 24px;\r\n text-align: center;\r\n pointer-events: none;\r\n }\r\n\r\n .hamburger-btn {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n width: 36px;\r\n height: 36px;\r\n cursor: pointer;\r\n z-index: 1002;\r\n padding: 8px;\r\n border-radius: 8px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hamburger-btn:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n .hamburger-btn.active {\r\n background: rgba(16, 185, 129, 0.3);\r\n border-color: rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n \/* Show hamburger button on mobile *\/\r\n @media (max-width: 768px) {\r\n .hamburger-btn {\r\n display: flex;\r\n }\r\n }\r\n\r\n .hamburger-line {\r\n width: 100%;\r\n height: 3px;\r\n background: white;\r\n border-radius: 3px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* Show hamburger button on mobile *\/\r\n @media (max-width: 768px) {\r\n .hamburger-btn {\r\n display: flex;\r\n }\r\n\r\n \/* Language switcher mobile styles *\/\r\n .language-switcher {\r\n flex-direction: row;\r\n width: 100%;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .lang-btn {\r\n flex: 1;\r\n height: 36px;\r\n font-size: 14px;\r\n }\r\n\r\n \/* Additional mobile fixes *\/\r\n .presentation-section {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n \/* Force 100% width for all containers *\/\r\n [class*=\"max-w-\"] {\r\n max-width: 100% !important;\r\n }\r\n\r\n \/* Module buttons full width *\/\r\n .module-btn {\r\n width: 100% !important;\r\n justify-content: center;\r\n }\r\n\r\n \/* Stack buttons on mobile *\/\r\n .flex-col.sm\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* Fix grids to single column *\/\r\n [class*=\"grid-cols-\"] {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n \/* Ensure no horizontal overflow *\/\r\n * {\r\n overflow-x: hidden;\r\n }\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(1) {\r\n transform: rotate(45deg) translate(4px, 4px);\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(3) {\r\n transform: rotate(-45deg) translate(4px, -4px);\r\n }\r\n\r\n .mobile-menu-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n backdrop-filter: blur(4px);\r\n z-index: 997;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .mobile-menu-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n \/* Mobile header auto-hide classes *\/\r\n .nav-sidebar.header-hidden {\r\n transform: translateY(-100%);\r\n }\r\n\r\n .nav-sidebar.header-visible {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Progress indicator styles *\/\r\n .progress-badge {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .progress-badge.updated {\r\n animation: progressPulse 0.5s ease;\r\n }\r\n\r\n @keyframes progressPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n \/* Seamless transition styles *\/\r\n .seamless-transition {\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n\r\n .video-transition-out {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n\r\n .video-transition-in {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n \/* Loading state for video transitions *\/\r\n .video-loading {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(15, 23, 42, 0.9);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n }\r\n\r\n .video-loading-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid rgba(16, 185, 129, 0.3);\r\n border-top-color: #10B981;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .presentation-section {\r\n padding-right: 0;\r\n padding-left: 0;\r\n padding-top: 70px;\r\n min-height: auto;\r\n }\r\n\r\n \/* Fix max-width containers for mobile *\/\r\n .max-w-4xl,\r\n .max-w-3xl,\r\n .max-w-5xl,\r\n .max-w-xl,\r\n .max-w-2xl,\r\n .max-w-lg,\r\n .max-w-md,\r\n .max-w-sm {\r\n max-width: 100% !important;\r\n }\r\n\r\n \/* Module buttons mobile fix *\/\r\n .module-btn {\r\n width: 100% !important;\r\n justify-content: center;\r\n }\r\n\r\n \/* Video modal mobile fixes *\/\r\n #unifiedVideoModal > div {\r\n max-width: 95vw !important;\r\n width: 100%;\r\n }\r\n\r\n \/* Stack action buttons on mobile *\/\r\n .flex-col.sm\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* Reduce headings on mobile *\/\r\n h1 {\r\n font-size: 2rem !important;\r\n line-height: 1.1;\r\n }\r\n \r\n h2 {\r\n font-size: 1.5rem !important;\r\n line-height: 1.2;\r\n }\r\n\r\n h3 {\r\n font-size: 1.25rem !important;\r\n }\r\n\r\n \/* Video players *\/\r\n .aspect-video {\r\n min-height: 200px;\r\n }\r\n\r\n \/* Grid fixes for mobile *\/\r\n .grid-cols-1.md\\:grid-cols-3 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.sm\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-2.sm\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.lg\\:grid-cols-5 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.md\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.lg\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n}\r\n\r\n\/* Additional adaptive breakpoints *\/\r\n@media (max-width: 480px) {\r\n .presentation-section {\r\n padding: 60px 12px 20px;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem !important;\r\n }\r\n \r\n h2 {\r\n font-size: 1.5rem !important;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .presentation-section {\r\n padding: 60px 10px 20px;\r\n }\r\n \r\n h1 {\r\n font-size: 1.75rem !important;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav class=\"nav-sidebar\">\r\n \r\n <div class=\"hidden md:flex flex-col items-center space-y-3 w-full\">\r\n \r\n <div class=\"language-switcher\">\r\n <a href=\"https:\/\/link.axi.so\/?page_id=708&lang=ru\" class=\"lang-btn\">RU<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=807&lang=en\" class=\"lang-btn active\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn\">NO<\/a>\r\n <\/div>\r\n <div class=\"nav-item active\" data-section=\"1\" onclick=\"scrollToSection(1)\">\r\n <i class=\"fa-solid fa-home text-lg\"><\/i>\r\n <span class=\"tooltip\">Home<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"2\" onclick=\"scrollToSection(2)\">\r\n <i class=\"fa-solid fa-person-walking-luggage text-lg\"><\/i>\r\n <span class=\"tooltip\">Migrant's Journey<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"3\" onclick=\"scrollToSection(3)\">\r\n <i class=\"fa-solid fa-layer-group text-lg\"><\/i>\r\n <span class=\"tooltip\">Ecosystem<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"4\" onclick=\"scrollToSection(4)\">\r\n <i class=\"fa-solid fa-building-columns text-lg\"><\/i>\r\n <span class=\"tooltip\">Agencies<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"5\" onclick=\"scrollToSection(5)\">\r\n <i class=\"fa-solid fa-video text-lg\"><\/i>\r\n <span class=\"tooltip\">VEI SHOWROOM<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center justify-between w-full px-4\">\r\n \r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"text-xl font-bold font-heading text-white\">VEI<\/span>\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"hamburger-btn md:hidden\" onclick=\"\r\n const btn = this;\r\n const menu = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n const navSidebar = document.querySelector('.nav-sidebar');\r\n\r\n const isOpening = !menu.classList.contains('active');\r\n\r\n btn.classList.toggle('active');\r\n menu.classList.toggle('active');\r\n overlay.classList.toggle('active');\r\n\r\n if (isOpening) {\r\n document.body.style.overflow = 'hidden';\r\n \/\/ Show header when menu opens\r\n navSidebar.classList.remove('header-hidden');\r\n navSidebar.classList.add('header-visible');\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n \">\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"nav-items-container md:hidden\">\r\n \r\n <div class=\"language-switcher\">\r\n <a href=\"https:\/\/link.axi.so\/?page_id=708&lang=ru\" class=\"lang-btn\">RU<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=807&lang=en\" class=\"lang-btn active\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn\">NO<\/a>\r\n <\/div>\r\n <a href=\"#section-1\" class=\"nav-item active\" data-section=\"1\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(1), 100);\r\n \">\r\n <i class=\"fa-solid fa-home\"><\/i>\r\n <span class=\"tooltip\">Home<\/span>\r\n <\/a>\r\n <a href=\"#section-2\" class=\"nav-item\" data-section=\"2\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(2), 100);\r\n \">\r\n <i class=\"fa-solid fa-person-walking-luggage\"><\/i>\r\n <span class=\"tooltip\">Migrant's Journey<\/span>\r\n <\/a>\r\n <a href=\"#section-3\" class=\"nav-item\" data-section=\"3\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(3), 100);\r\n \">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span class=\"tooltip\">Ecosystem<\/span>\r\n <\/a>\r\n <a href=\"#section-4\" class=\"nav-item\" data-section=\"4\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(4), 100);\r\n \">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <span class=\"tooltip\">Agencies<\/span>\r\n <\/a>\r\n <a href=\"#section-5\" class=\"nav-item\" data-section=\"5\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(5), 100);\r\n \">\r\n <i class=\"fa-solid fa-video\"><\/i>\r\n <span class=\"tooltip\">VEI SHOWROOM<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-menu-overlay\" onclick=\"\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n \"><\/div>\r\n\r\n \r\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\r\n\r\n \r\n <section id=\"section-1\" class=\"presentation-section w-full pt-[70px] py-10 px-4 sm:px-6 lg:px-12 flex flex-col items-center justify-between relative section-animate\">\r\n <div class=\"glow-bg\"><\/div>\r\n \r\n <div class=\"w-full max-w-4xl mx-auto flex flex-col items-center relative z-10\">\r\n \r\n <div class=\"w-full flex items-center justify-between border-b border-white\/10 pb-4 mb-8\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono tracking-widest text-emerald-400 uppercase font-semibold\">VEI Ecosystem \/\/ Screen 01<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"px-2.5 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/20 text-emerald-300 text-xs font-mono\">\r\n <i class=\"fa-solid fa-signal mr-1.5 text-emerald-400\"><\/i>Live Demo Mode\r\n <\/span>\r\n <span class=\"text-xs text-slate-400 font-mono hidden sm:inline-block\">Nordic Integration Platform<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"text-center space-y-4 mb-10\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-white\/5 border border-white\/10 text-slate-300 text-xs font-mono mb-2\">\r\n <i class=\"fa-solid fa-flag text-emerald-400\"><\/i>\r\n <span>Norway Integration Innovation<\/span>\r\n <\/div>\r\n <h1 class=\"font-heading text-6xl sm:text-7xl lg:text-8xl font-extrabold tracking-tight text-white leading-tight drop-shadow-lg\">\r\n VEI\r\n <\/h1>\r\n <p class=\"text-xl sm:text-2xl font-medium text-emerald-400 font-heading max-w-2xl mx-auto leading-relaxed\">\r\n Concept of a Unified Digital Integration Path in Norway\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center justify-center mb-12 relative group cursor-pointer\" onclick=\"openUnifiedVideoModal(1)\">\r\n <div class=\"absolute inset-0 bg-emerald-500\/25 rounded-full blur-xl group-hover:bg-emerald-500\/45 transition-all duration-300\"><\/div>\r\n <button type=\"button\" aria-label=\"Watch the presentation\" class=\"hero-play-btn relative z-10 w-28 h-28 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-emerald-500\/30 border-4 border-slate-900 group-hover:scale-105 transition-transform duration-300\">\r\n <i class=\"fa-solid fa-play text-4xl sm:text-5xl text-slate-950 ml-2 group-hover:scale-110 transition-transform\"><\/i>\r\n <\/button>\r\n <span class=\"relative z-10 mt-6 text-lg sm:text-xl font-bold text-white tracking-wide group-hover:text-emerald-300 transition-colors flex items-center space-x-2\">\r\n <span>Watch the presentation with ALEX<\/span>\r\n <i class=\"fa-solid fa-arrow-right text-sm text-emerald-400 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/span>\r\n <span class=\"relative z-10 mt-1.5 text-xs text-slate-400 font-mono tracking-widest uppercase bg-slate-900\/80 px-3 py-1 rounded-full border border-white\/5\">\r\n <i class=\"fa-solid fa-circle-play mr-1 text-emerald-400\"><\/i> Voiced Video \u2022 16:9 HD\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <p class=\"text-slate-300 text-sm sm:text-base leading-relaxed text-center max-w-3xl mb-10\">\r\n A project born from personal experience. A single ecosystem of <span class=\"text-white font-semibold underline decoration-emerald-500 decoration-2\">5 modules<\/span> that evolves daily with every real step of adaptation.\r\n <\/p>\r\n\r\n \r\n <div class=\"w-full flex flex-col items-center mb-10\">\r\n <div class=\"flex flex-wrap justify-center gap-2 sm:gap-3 mb-4\">\r\n <button id=\"b1-btn-link\" onclick=\"highlightModuleB1('link')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs sm:text-sm hover:bg-emerald-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\r\n <span class=\"font-medium\">LINK (Daily Life)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-commune\" onclick=\"highlightModuleB1('commune')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-red-500\/10 border border-red-500\/30 text-red-300 text-xs sm:text-sm hover:bg-red-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-red-500\"><\/span>\r\n <span class=\"font-medium\">COMMUNE (City)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-scan\" onclick=\"highlightModuleB1('scan')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-purple-500\/10 border border-purple-500\/30 text-purple-300 text-xs sm:text-sm hover:bg-purple-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-purple-500\"><\/span>\r\n <span class=\"font-medium\">SCAN (AI Vision)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-translate\" onclick=\"highlightModuleB1('translate')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs sm:text-sm hover:bg-cyan-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-cyan-500\"><\/span>\r\n <span class=\"font-medium\">TRANSLATE (Translation)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-sprak\" onclick=\"highlightModuleB1('sprak')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-orange-500\/10 border border-orange-500\/30 text-orange-300 text-xs sm:text-sm hover:bg-orange-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-orange-500\"><\/span>\r\n <span class=\"font-medium\">SPR\u00c5K (Language)<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"b1-moduleTooltip\" class=\"w-full max-w-xl p-4 sm:p-5 rounded-2xl bg-white\/5 border border-white\/10 text-center text-sm text-slate-300 transition-all duration-300 shadow-lg\">\r\n <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-arrow-pointer mr-2\"><\/i>Click on any module<\/span> for details (LINK Daily Life & Mottak, COMMUNE NAV, etc.)\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 pt-8 border-t border-white\/10\">\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-amber-400\/10 border border-amber-400\/20 flex items-center justify-center text-amber-400 text-xl\">\r\n <i class=\"fa-solid fa-lightbulb\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Real-Experience Design<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Created from within the real process of integration and life in Norway<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-emerald-400\/10 border border-emerald-400\/20 flex items-center justify-center text-emerald-400 text-xl\">\r\n <i class=\"fa-solid fa-arrows-spin\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Infinite LTV<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Seamless context evolution and support for 2+ years<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-cyan-400\/10 border border-cyan-400\/20 flex items-center justify-center text-cyan-400 text-xl\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Privacy-First (GDPR)<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Secure architecture standardized for municipalities<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b1-speakerSection\" class=\"w-full max-w-3xl glass-panel rounded-2xl overflow-hidden mb-10 shadow-lg border border-white\/10\">\r\n <button onclick=\"toggleSpeechB1()\" class=\"w-full p-5 flex items-center justify-between text-left hover:bg-white\/5 transition-all group cursor-pointer\">\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-500\/15 border border-emerald-400\/30 flex items-center justify-center text-emerald-400 shrink-0 group-hover:scale-105 transition-transform\">\r\n <i class=\"fa-solid fa-microphone-lines text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"text-xs font-mono font-bold text-emerald-400 uppercase tracking-wider\">SPEAKER'S SPEECH (ALEX)<\/span>\r\n <div class=\"flex items-center space-x-1 ml-2\">\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <h3 class=\"text-sm sm:text-base font-semibold text-white font-heading mt-1\">\r\n \u00abWhat you see on the screen is VEI (Norwegian for \"Path\")...\u00bb\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div id=\"b1-speechChevron\" class=\"w-9 h-9 rounded-full bg-white\/5 border border-white\/10 flex items-center justify-center text-slate-300 transition-transform duration-300 -rotate-90 ml-4 shrink-0 group-hover:bg-white\/10\">\r\n <i class=\"fa-solid fa-chevron-down text-sm\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n \r\n <div id=\"b1-speechContent\" class=\"p-6 text-slate-300 text-sm leading-relaxed space-y-4 border-t border-white\/10 bg-slate-950\/60 hidden\">\r\n <p class=\"text-emerald-300 font-semibold text-base\">\u00abHello! My name is ALEX.<\/p>\r\n <p>What you see on the screen is <strong>VEI<\/strong> (Norwegian for \"Path\"). It is the concept of a national digital integration ecosystem.<\/p>\r\n <p>This project is not an abstract idea from a development office. I developed this concept personally, going through the adaptation path in Norway step by step. Every day, facing real barriers \u2014 in the camp, with documents, in the store, in communication with agencies \u2014 I strengthen and refine this architecture.<\/p>\r\n <p>This is an inside look at how to make integration effective. <strong>VEI takes a person by the hand from the first minutes in the reception center<\/strong> and guides them along the entire path: helping them settle into a new municipality, understand Norwegian documents, translate texts, learn the language, and find a job.<\/p>\r\n <div class=\"p-4 rounded-xl bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-200\">\r\n <i class=\"fa-solid fa-quote-left mr-2 text-emerald-400 text-lg\"><\/i>\r\n Having conducted the analysis, I can confidently say: <strong>there is no analog of such an integration system and application in any country in the world.<\/strong>\r\n <\/div>\r\n <p>Norway can be the first to create an entirely new product for millions of refugees, displaced persons, and migrants. We can develop a new approach to integration that simplifies a person's journey in a new country. It is a stack of new technologies, artificial intelligence, and basic human needs.<\/p>\r\n <p class=\"text-white font-medium italic pt-3 border-t border-white\/10 mt-2\">\r\n Let's see how my personal experience turned into a systemic solution for the entire state.\u00bb\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b1-nextSlideBanner\" class=\"w-full max-w-3xl mb-8\">\r\n <button onclick=\"scrollToSection(2)\" class=\"w-full py-4 px-6 rounded-2xl bg-gradient-to-r from-emerald-500 via-teal-400 to-cyan-500 text-slate-950 font-bold text-base hover:brightness-110 transition-all flex items-center justify-center space-x-3 shadow-lg shadow-emerald-500\/20 cursor-pointer\">\r\n <span>Proceed to the next block<\/span>\r\n <i class=\"fa-solid fa-arrow-down animate-bounce\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div id=\"textModal4\" class=\"fixed inset-0 z-50 bg-slate-950\/95 backdrop-blur-md hidden flex items-center justify-center p-4 transition-all duration-300\">\r\n <div class=\"relative w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col my-auto text-modal-animate\">\r\n \r\n \r\n <div class=\"w-full p-4 sm:p-6 flex items-center justify-between border-b border-slate-200 bg-slate-50 shrink-0\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-sky-100 text-sky-600 flex items-center justify-center text-lg\">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-sm sm:text-base font-black text-slate-900\">VEI Value for Agencies<\/h3>\r\n <p class=\"text-xs text-slate-500 font-mono\">GDPR, Data-Driven Analytics, Security<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeTextModal4()\" title=\"Close\" class=\"w-10 h-10 rounded-full bg-slate-200 hover:bg-red-500 hover:text-white text-slate-600 flex items-center justify-center transition-colors cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 overflow-y-auto p-6 sm:p-8 space-y-6\">\r\n <div class=\"prose prose-slate max-w-none\">\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n Now let's talk about the colossal direct value VEI provides to government structures and agencies themselves.\r\n <\/p>\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n When we communicate with officials and service executives, the first question is always safety and control. And VEI is designed to close these questions 100%.\r\n <\/p>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-rose-50 border-2 border-rose-200\">\r\n <h4 class=\"text-lg font-black text-rose-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-rose-500 text-white flex items-center justify-center text-sm mr-3\">1<\/span>\r\n Absolute GDPR Security and Protected Contour\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Instead of people leaking official UDI or NAV letters into third-party American neural networks, VEI creates a local closed loop for data processing. The letter scanner and product recognizer work inside the system. Citizens' personal data, case numbers, and faces of passers-by do not leave the secure infrastructure. We completely eliminate the risk of personal data leaks!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-sky-50 border-2 border-sky-200\">\r\n <h4 class=\"text-lg font-black text-sky-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-sky-500 text-white flex items-center justify-center text-sm mr-3\">2<\/span>\r\n Verified Communication Channel and Protection from Information Chaos\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Today, migrants are drowning in a flow of fakes and speculation from unofficial chats in social networks. When VEI receives official status, agencies \u2014 UDI, NAV, IMDi, and Municipality Administrations \u2014 get a direct channel of communication with residents. The agency sends an official PUSH notification. A person sees that it is 100% reliable information from the state, and goes to your official website in one click. Chaos and misinformation instantly disappear.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-indigo-50 border-2 border-indigo-200\">\r\n <h4 class=\"text-lg font-black text-indigo-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-indigo-500 text-white flex items-center justify-center text-sm mr-3\">3<\/span>\r\n Honest Data-Driven Analytics Instead of Guesswork\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Currently, agencies often only \"guess\" what problems refugees face. VEI provides an anonymized dashboard and real click analytics. You can see in real time what topics concern residents right now \u2014 medicine, transport, municipality rules, or document filling.\r\n <\/p>\r\n <p class=\"text-slate-700 leading-relaxed mt-3\">\r\n Moreover, you see the dynamics! If analytics show that a group of people started using the TRANSLATE module 60% less after 6 months, you receive not a dry report, but mathematical confirmation that the language program in the municipality really works!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-emerald-50 border-2 border-emerald-200\">\r\n <h4 class=\"text-lg font-black text-emerald-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500 text-white flex items-center justify-center text-sm mr-3\">4<\/span>\r\n Flexible Architecture (Co-Development)\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n VEI is not a static program. We are ready to work in close contact with agencies. If UDI, NAV, or a specific municipality needs a specific module or integration with their databases \u2014 we will sit down together, work out the logic, and create it for the tasks of a specific agency.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full p-4 sm:p-6 border-t border-slate-200 bg-slate-50 shrink-0\">\r\n <button onclick=\"closeTextModal4()\" class=\"w-full py-3.5 rounded-xl bg-gradient-to-r from-sky-500 via-teal-400 to-emerald-400 text-slate-950 font-black text-sm hover:scale-105 transition-all shadow-lg flex items-center justify-center space-x-2 cursor-pointer\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span>Close Text<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"unifiedVideoModal\" class=\"fixed inset-0 z-50 bg-slate-950\/95 backdrop-blur-md hidden flex items-center justify-center p-2 sm:p-4 transition-all duration-300\">\r\n \r\n <div class=\"relative w-full max-w-[90rem] max-h-[96vh] bg-slate-900 rounded-2xl sm:rounded-3xl border border-emerald-500\/40 shadow-xl overflow-hidden flex flex-col lg:flex-row modal-animate my-auto\">\r\n \r\n \r\n <div class=\"flex-1 flex flex-col min-w-0\">\r\n \r\n <div class=\"w-full p-3 sm:p-5 flex items-center justify-between border-b border-white\/10 bg-slate-950 shrink-0\">\r\n <div class=\"flex items-center space-x-2 sm:space-x-3\">\r\n <span class=\"w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-emerald-400 animate-pulse\"><\/span>\r\n <span id=\"unifiedModalTitle\" class=\"text-[11px] sm:text-sm font-mono font-bold text-emerald-400 tracking-wider uppercase\">\r\n VEI Presentation \u2014 ALEX\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <button onclick=\"triggerEndVideoTest()\" class=\"text-[10px] font-mono text-slate-400 hover:text-emerald-400 underline cursor-pointer mr-2 hidden sm:block\">\r\n [Test Final]\r\n <\/button>\r\n <a id=\"unifiedYoutubeLink\" href=\"https:\/\/youtu.be\/dfwJdYi3z0U\" target=\"_blank\" class=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-lg bg-red-600\/20 border border-red-500\/30 text-red-300 hover:bg-red-600 hover:text-white text-xs font-semibold transition-all flex items-center space-x-1.5\" title=\"Open directly on YouTube\">\r\n <i class=\"fa-brands fa-youtube text-sm\"><\/i>\r\n <span class=\"hidden sm:inline\">YouTube<\/span>\r\n <\/a>\r\n <button onclick=\"closeUnifiedVideoModal()\" title=\"Close video\" class=\"w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white\/5 hover:bg-red-500\/80 text-slate-300 hover:text-white flex items-center justify-center transition-colors cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg sm:text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-video bg-black flex items-center justify-center overflow-hidden shrink min-h-0\">\r\n \r\n <div id=\"unifiedVideoIframeWrapper\" class=\"w-full h-full border-0\"><\/div>\r\n\r\n \r\n <div id=\"unifiedEndSlideOverlay\" class=\"absolute inset-0 z-40 bg-slate-950\/95 backdrop-blur-md hidden flex flex-col items-center justify-center p-6 text-center space-y-4 overlay-pop-in\">\r\n \r\n <button onclick=\"event.stopPropagation(); closeUnifiedEndOverlay();\" class=\"absolute top-4 right-4 w-8 h-8 rounded-full bg-white\/10 hover:bg-red-500\/80 text-slate-300 hover:text-white flex items-center justify-center transition-colors cursor-pointer z-50\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"w-14 h-14 rounded-full bg-emerald-500\/20 border-2 border-emerald-400 flex items-center justify-center text-emerald-400 text-2xl shadow-lg animate-bounce\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <\/div>\r\n <div class=\"space-y-1\">\r\n <span class=\"text-xs font-mono text-emerald-400 uppercase tracking-widest font-extrabold\">Video completed<\/span>\r\n <h4 id=\"unifiedEndTitle\" class=\"xl sm:text-2xl font-heading font-black text-white\">Analysis completed!<\/h4>\r\n <\/div>\r\n <p id=\"unifiedEndDesc\" class=\"text-xs sm:text-sm text-slate-300 max-w-sm leading-relaxed\">\r\n You have watched the video. Click the button below to proceed to the next block.\r\n <\/p>\r\n <button id=\"unifiedNextBtn\" onclick=\"event.stopPropagation(); closeUnifiedEndOverlay(); currentSection === 5 ? handleSection5Completion() : goToNextSection();\" class=\"px-8 py-4 rounded-xl bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 text-slate-950 font-black text-sm sm:text-base hover:scale-105 transition-all shadow-xl flex items-center space-x-3 cursor-pointer ring-4 ring-emerald-500\/40\">\r\n <span id=\"unifiedNextBtnText\">PROCEED TO THE NEXT BLOCK<\/span>\r\n <i class=\"fa-solid fa-arrow-down text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full p-4 sm:p-6 bg-slate-950 border-t-2 border-emerald-500\/30 flex flex-col sm:flex-row items-center justify-between gap-4 shrink-0 relative overflow-hidden transition-colors duration-500\">\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-emerald-500\/5 to-cyan-500\/5 pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center sm:items-start text-center sm:text-left space-y-1\">\r\n <h4 id=\"unifiedActionPanelTitle\" class=\"text-white font-bold text-sm sm:text-base font-heading transition-colors\">Watch the presentation<\/h4>\r\n <p id=\"unifiedActionPanelDesc\" class=\"text-xs text-slate-400 max-w-md transition-colors\">\r\n Learn about the VEI concept. After watching, proceed to the next block.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <button id=\"unifiedMainNextBtn\" onclick=\"goToNextSection();\" class=\"relative z-10 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-3.5 rounded-xl sm:rounded-2xl bg-white\/5 border border-white\/10 hover:bg-white\/10 text-slate-300 font-extrabold text-sm sm:text-base transition-all flex items-center justify-center space-x-2 shrink-0 cursor-pointer\">\r\n <span id=\"unifiedMainNextBtnText\">PROCEED FURTHER<\/span>\r\n <i class=\"fa-solid fa-arrow-down\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full lg:w-[22rem] bg-slate-950 border-t lg:border-t-0 lg:border-l border-white\/10 shrink-0 flex flex-col overflow-y-auto hidden md:flex custom-scrollbar relative z-10\">\r\n <div class=\"p-5 border-b border-white\/10 sticky top-0 bg-slate-950 z-20 shadow-md\">\r\n <div class=\"flex items-center justify-between mb-1\">\r\n <h3 class=\"text-sm font-heading font-black text-white\">Navigation<\/h3>\r\n <span id=\"unifiedProgressIndicator\" class=\"text-xs font-mono text-emerald-400 bg-emerald-950\/50 px-2 py-0.5 rounded-full border border-emerald-500\/30\">\r\n 0\/4 viewed\r\n <\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Switching between presentation blocks<\/p>\r\n <\/div>\r\n <div class=\"p-4 space-y-2\" id=\"unifiedNavContainer\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 flex flex-col items-center justify-center border-t border-white\/10\">\r\n <div class=\"relative w-24 h-24\">\r\n <svg class=\"w-full h-full transform -rotate-90\" viewBox=\"0 0 100 100\">\r\n \r\n <circle\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"45\"\r\n fill=\"none\"\r\n stroke=\"#FBBF24\"\r\n stroke-width=\"8\"\r\n \/>\r\n \r\n <circle\r\n id=\"circularProgress\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"45\"\r\n fill=\"none\"\r\n stroke=\"#3B82F6\"\r\n stroke-width=\"8\"\r\n stroke-dasharray=\"283 283\"\r\n stroke-dashoffset=\"283\"\r\n stroke-linecap=\"round\"\r\n \/>\r\n <\/svg>\r\n <div class=\"absolute inset-0 flex flex-col items-center justify-center\">\r\n <span id=\"circularProgressText\" class=\"text-sm font-bold text-white leading-tight\">0%<\/span>\r\n <span id=\"circularProgressTime\" class=\"text-xs text-slate-300 leading-tight mt-1\">15 min<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400 mt-2 text-center\">Viewing progress<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"section-2\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-slate-200 pb-3 mb-6\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500\"><\/span>\r\n <span class=\"text-xs font-mono font-semibold tracking-wider text-emerald-700 uppercase\">VEI Ecosystem \/\/ Screen 02<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-500 font-mono\">Nordic Integration Platform \u2014 Human Path<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto space-y-2\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-mono font-semibold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-person-walking-luggage text-emerald-600\"><\/i>\r\n <span>Second Screen: User Journey & Pain Points<\/span>\r\n <\/div>\r\n \r\n <h2 class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-tight\">\r\n The real human journey: from entering the country to integration\r\n <\/h2>\r\n \r\n <p class=\"text-slate-600 text-sm max-w-2xl mx-auto\">\r\n What critical barriers does a migrant face in Norway and how does the VEI system solve these pain points at every stage?\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 text-white rounded-2xl p-4 sm:p-6 border border-slate-800 shadow-md relative overflow-hidden\">\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 items-center relative z-10\">\r\n \r\n \r\n <div class=\"lg:col-span-7 flex flex-col space-y-2\">\r\n \r\n <div class=\"flex items-center justify-between px-1\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400\"><\/span>\r\n <span class=\"text-xs font-mono font-semibold text-emerald-400 uppercase tracking-wider\">\r\n Main Video Commentary\r\n <\/span>\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-slate-300 bg-slate-800\/80 px-2.5 py-0.5 rounded border border-slate-700\">\r\n <i class=\"fa-solid fa-play text-emerald-400 mr-1\"><\/i> ALEX reveals the details\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-video rounded-2xl bg-black border-2 border-emerald-500\/60 overflow-hidden shadow-lg group cursor-pointer\" onclick=\"openUnifiedVideoModal(2)\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-900\/90 to-slate-900\/40 flex flex-col items-center justify-center p-4 text-center group-hover:scale-[1.01] transition-transform\">\r\n \r\n <div class=\"w-16 h-16 sm:w-18 sm:h-18 rounded-full bg-emerald-500 text-slate-950 flex items-center justify-center text-xl sm:text-2xl shadow-md mb-3 group-hover:scale-105 transition-transform\">\r\n <i class=\"fa-solid fa-play ml-1\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"space-y-1\">\r\n <h3 class=\"text-lg sm:text-xl font-heading font-black text-white\">\r\n Watch the pain points analysis by ALEX\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-sm\">\r\n Click to open full-screen player with navigation\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mt-3 px-3.5 py-1 rounded-full bg-emerald-500\/20 border border-emerald-400\/50 text-emerald-300 text-xs font-bold\">\r\n <i class=\"fa-solid fa-circle-play mr-1\"><\/i> Open player\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center justify-between text-xs text-slate-400 px-1 pt-1\">\r\n <span class=\"flex items-center space-x-2 text-slate-300 font-medium\">\r\n <i class=\"fa-solid fa-circle-info text-emerald-400\"><\/i>\r\n <span>Click on the video to open the player<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:col-span-5 flex flex-col justify-between space-y-4\">\r\n \r\n <div class=\"flex items-center space-x-3 pb-3 border-b border-slate-800\">\r\n <div class=\"w-11 h-11 rounded-full bg-gradient-to-tr from-emerald-500 to-cyan-400 text-slate-950 flex items-center justify-center font-heading font-black text-xs shrink-0 shadow-md\">\r\n ALEX\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-base font-bold text-white font-heading\">\r\n \ud83c\udf99\ufe0f Speaker's Speech (ALEX)\r\n <\/h4>\r\n <p class=\"text-xs text-emerald-400 font-mono\">\r\n VEI Founder \u2022 Personal experience in Norway\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-950\/80 p-4 rounded-2xl border border-slate-800 max-h-[230px] overflow-y-auto custom-scrollbar space-y-3 text-xs sm:text-sm text-slate-300 leading-relaxed shadow-inner\">\r\n <p class=\"text-emerald-300 font-bold\">\r\n \u26aa SCREEN 2: Migrant's Journey and Critical Pain Points\r\n <\/p>\r\n <p>\r\n \u00abLet's analyze in detail the real journey of a person arriving in Norway, and honestly look at the critical problems they face every day.\r\n <\/p>\r\n <p>\r\n The entire adaptation process consists of 4 global stages: well, actually 5, since the reception center and Mottak are two different lives, but that's beside the point.\r\n <\/p>\r\n <p>\r\n The first stage is the primary reception center R\u00c5DE and subsequent placement in a Mottak.\r\n <\/p>\r\n <p>\r\n The second is receiving documents and moving to a municipality (Kommune).\r\n <\/p>\r\n <p>\r\n The third is everyday integration in the new city.\r\n <\/p>\r\n <p>\r\n And the fourth is studying, job hunting, well, a completely independent life.\r\n <\/p>\r\n <p>\r\n Now let's see what happens in practice. And here arises a colossal, dangerous problem that many try to keep quiet about!\r\n <\/p>\r\n <p>\r\n You see, today people simply don't have a legal and safe tool. What do they do out of desperation? They take their phone, take pictures of an official letter with personal data \u2014 DUF numbers, personal addresses, diagnoses \u2014 and upload these pictures to public neural networks like ChatGPT or Gemini! This is the most direct, severe violation of personal data security. Personal information of residents flies off to external third-party servers.\r\n <\/p>\r\n <p>\r\n When a person gets to R\u00c5DE or Mottak, they find themselves under severe stress. We talked about all this a few months ago when I introduced you to the first LINK module. Now I will speak about the VEI application as a modular system because each module is a separate organism of a whole system that I am proposing to create.\r\n <\/p>\r\n <p>\r\n But the most interesting part begins later, when a person moves to a municipality. Paper correspondence from UDI, NAV, the Tax Administration, the municipality or the hospital starts arriving in their mailbox. Although we face this already in Mottak. These are official letters with legal terms and Norwegian context. The person doesn't understand the text, starts to panic, and is afraid of missing a critical deadline or appointment.\r\n <\/p>\r\n <p>\r\n The same thing happens in supermarkets and in the city: a person doesn't understand the product ingredients, takes a picture of the packaging in the store or a sign on the city street, random people and passers-by get into the frame, and these photos fly onto the Internet again just to find out if there's an allergen there or what the sign says. I have observed this more than once and have done it myself.\r\n <\/p>\r\n <p>\r\n But this cannot continue forever! It is incredibly dangerous for the security of citizens and the state. And when surrounding people see this, they cautiously bypass a person with a camera, it's noticeable. But people have no alternative!\r\n <\/p>\r\n <p>\r\n I won't even talk here about all the little things I see every day, I just want to say that there is a lot of work to be done regarding displaced persons and the world around us. Well, even just taking into account that it's unclear where to get reliable information today... social networks, fake videos and huge information noise disorient a person, for example, a new law comes out, it turns out that a person learns about it only where?? in social networks through broken telephone or someone told them... and when a person starts to figure it out, they get lost, why not inform people in the same application as VEI about news and new laws from different agencies so people will receive official notifications directly in the application.\r\n <\/p>\r\n <p>\r\n As a result, the migrant spends hours independently searching for information on the Internet, reads dubious groups on social networks and listens to rumors in chats. And agencies \u2014 UDI, NAV, IMDi and Municipalities \u2014 spend gigantic human resources on correcting errors in documents and repeated appeals.\r\n <\/p>\r\n <p>\r\n On the following screens I will try to show you how VEI solves this problem systematically and radically changes the logic of interaction between the individual and the state\u00bb. I will also show the 2nd part of the video where a family moves from a Mottak and I will end my monologue with you today on this. Move on to the next block.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 rounded-xl bg-slate-800\/80 border border-slate-700 flex items-center justify-between text-xs\">\r\n <span class=\"text-slate-300\">\r\n Explore the details of the pain points below\r\n <\/span>\r\n <button onclick=\"scrollToAccordionB2()\" class=\"text-emerald-400 font-bold hover:underline\">\r\n To the stages <i class=\"fa-solid fa-arrow-down ml-1\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-timeline-section\" class=\"relative pt-4\">\r\n <div class=\"relative max-w-4xl mx-auto\">\r\n \r\n <div class=\"absolute top-5 left-0 w-full h-1 bg-slate-200 -translate-y-1\/2 rounded-full z-0\"><\/div>\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3 relative z-10\">\r\n \r\n \r\n <button onclick=\"activateStageB2(1)\" id=\"b2-tb-step-1\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-emerald-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 1\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-emerald-700\">Stage 1<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-emerald-600\">R\u00c5DE & Mottak<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(2)\" id=\"b2-tb-step-2\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-rose-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 2\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-rose-700\">Stage 2<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-rose-600\">Municipality<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(3)\" id=\"b2-tb-step-3\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 3\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-purple-700\">Stage 3<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-purple-600\">Daily Life & GDPR<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(4)\" id=\"b2-tb-step-4\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 4\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-amber-700\">Stage 4<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-amber-600\">Work<\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4 max-w-4xl mx-auto pt-2\">\r\n \r\n \r\n <div id=\"b2-card-stage-1\" class=\"stage-accordion-box bg-white border border-emerald-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(1)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-emerald-50\/40 hover:bg-emerald-50 transition-colors cursor-pointer border-b border-emerald-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 1\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-emerald-700 uppercase tracking-wider\">\ud83d\udccd STAGE 1 \/\/ Mottak<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Primary reception center (R\u00c5DE) and moving to a Mottak\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe2 VEI LINK\r\n <\/span>\r\n <i id=\"b2-chevron-stage-1\" class=\"fa-solid fa-chevron-down text-emerald-600 text-sm transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-1\" class=\"p-5 sm:p-6 bg-white space-y-4\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-emerald-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Initial shock:<\/strong> daily chaos, stress, language barrier with the camp reception.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-emerald-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Information blindness:<\/strong> ignorance of internal camp rules, laundry schedules, warehouse, and submitting applications.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-emerald-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-emerald-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n The <strong>LINK module<\/strong> works \u2014 an autonomous camp guide answering 90% of household questions 24\/7 and relieving the workload of reception staff.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-2\" class=\"stage-accordion-box bg-white border border-rose-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(2)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-rose-50\/40 hover:bg-rose-50 transition-colors cursor-pointer border-b border-rose-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-rose-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 2\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-rose-700 uppercase tracking-wider\">\ud83d\udccd STAGE 2 \/\/ Kommune<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Settlement and Moving to a Municipality (Kommune)\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-rose-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udd34 VEI COMMUNE\r\n <\/span>\r\n <i id=\"b2-chevron-stage-2\" class=\"fa-solid fa-chevron-down text-rose-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-2\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-rose-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Culture shock:<\/strong> new city, unfamiliar environment, lack of connections.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-rose-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Bureaucratic chaos:<\/strong> registration in the municipality, schools, NAV \u2014 different systems, no connection.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-rose-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-rose-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>COMMUNE<\/strong> module \u2014 a unified municipality database with navigation for all services and automated reminders.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-3\" class=\"stage-accordion-box bg-white border border-purple-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(3)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-purple-50\/40 hover:bg-purple-50 transition-colors cursor-pointer border-b border-purple-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-purple-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 3\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-purple-700 uppercase tracking-wider\">\ud83d\udccd STAGE 3 \/\/ GDPR<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Everyday adaptation and the Danger of data leaks\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-purple-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe3 SCAN + TRANSLATE\r\n <\/span>\r\n <i id=\"b2-chevron-stage-3\" class=\"fa-solid fa-chevron-down text-purple-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-3\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-purple-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Letters from NAV:<\/strong> official letters in Norwegian that are frightening and incomprehensible.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-purple-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">GDPR risk:<\/strong> people use unsecure apps to translate documents.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-purple-700 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-purple-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>SCAN<\/strong> and <strong>TRANSLATE<\/strong> modules \u2014 secure scanning and context-aware translation within the protected VEI ecosystem.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-4\" class=\"stage-accordion-box bg-white border border-amber-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(4)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-amber-50\/40 hover:bg-amber-50 transition-colors cursor-pointer border-b border-amber-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-amber-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 4\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-amber-700 uppercase tracking-wider\">\ud83d\udccd STAGE 4 \/\/ Jobb<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Employment and Integration into society\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe0 SPR\u00c5K + CV\r\n <\/span>\r\n <i id=\"b2-chevron-stage-4\" class=\"fa-solid fa-chevron-down text-amber-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-4\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-amber-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Language barrier:<\/strong> insufficient level of Norwegian for work.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-amber-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Ignorance of standards:<\/strong> how to write a CV according to Norwegian standards.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-amber-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-amber-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-white text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>SPR\u00c5K<\/strong> module \u2014 AI tutor for language practice, and CV generator following Norwegian standards.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-3\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-[#0B132B] section-animate\">\r\n \r\n \r\n <div class=\"glow-emerald-spot\"><\/div>\r\n <div class=\"glow-cyan-spot\"><\/div>\r\n\r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-white\/10 pb-3 mb-6\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-cyan-400 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono font-bold tracking-widest text-cyan-400 uppercase\">VEI Ecosystem \/\/ Screen 03<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400 font-mono hidden sm:inline-block\">The Solution & Lifecycle (LTV 0\u20136m $\\rightarrow$ 2+ yrs)<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-8\">\r\n \r\n \r\n <div class=\"text-center max-w-4xl mx-auto space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-layer-group text-cyan-400\"><\/i>\r\n <span>Third Screen: VEI Ecosystem and LTV Strategy<\/span>\r\n <\/div>\r\n \r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight leading-tight\">\r\n VEI Ecosystem: From a local guide to a national conductor\r\n <\/h2>\r\n \r\n <p class=\"text-slate-300 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n Increasing the app's lifecycle from <strong>0\u20136 months<\/strong> to <strong>2+ years<\/strong>, maintaining continuous digital connection with the resident\r\n <\/p>\r\n\r\n \r\n <div class=\"pt-2\">\r\n <button onclick=\"openUnifiedVideoModal(3)\" class=\"btn-video-glow inline-flex items-center space-x-3.5 px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 text-slate-950 font-black text-sm sm:text-base hover:scale-105 transition-all shadow-xl cursor-pointer ring-4 ring-emerald-500\/30\">\r\n <div class=\"w-9 h-9 rounded-full bg-slate-950 text-emerald-400 flex items-center justify-center text-sm shadow-inner\">\r\n <i class=\"fa-solid fa-play ml-0.5\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <span class=\"block text-xs font-mono uppercase tracking-wider text-slate-900 font-extrabold\">ALEX's Video Message (Block 3)<\/span>\r\n <span class=\"block text-sm sm:text-base font-black text-slate-950\">\u25b6 WATCH THE ECOSYSTEM AND LTV ANALYSIS<\/span>\r\n <\/div>\r\n <span class=\"hidden sm:inline-block text-[10px] bg-slate-950\/20 text-slate-950 px-2.5 py-1 rounded-md font-mono uppercase font-bold\">Pop-Up Video 3<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-5 sm:p-7 border border-cyan-500\/30 relative overflow-hidden space-y-5\">\r\n \r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-white\/10 gap-3\">\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-timeline text-emerald-400 text-base\"><\/i>\r\n <h3 class=\"text-base sm:text-lg font-heading font-extrabold text-white\">\r\n Dynamic Interactive Map of 5 VEI Modules\r\n <\/h3>\r\n <\/div>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">\r\n Click on any module on the timeline to bring up a detailed description\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-2 text-xs font-mono text-emerald-300 bg-emerald-950\/80 px-3.5 py-1.5 rounded-full border border-emerald-500\/40 shrink-0\">\r\n <i class=\"fa-solid fa-clock mr-1\"><\/i>\r\n <span>Development vector: <strong>0\u20136 mo $\\rightarrow$ 2+ years<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative my-4\">\r\n \r\n <div class=\"absolute top-1\/2 left-0 w-full h-2 time-vector-gradient -translate-y-1\/2 rounded-full opacity-80 z-0 hidden md:block\"><\/div>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 relative z-10\">\r\n \r\n \r\n <button onclick=\"switchModuleB3('link')\" id=\"b3-mod-btn-link\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border-2 border-emerald-500 hover:border-emerald-300 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-emerald-400\">\ud83d\udfe2 VEI LINK<\/span>\r\n <span class=\"text-[10px] font-mono bg-emerald-500\/20 text-emerald-300 px-2 py-0.5 rounded font-bold\">0\u20136 mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">R\u00c5DE & Mottak<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Primary daily guide from the first minutes in the camp.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('commune')\" id=\"b3-mod-btn-commune\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-rose-500\/40 hover:border-rose-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-rose-400\">\ud83d\udd34 VEI COMMUNE<\/span>\r\n <span class=\"text-[10px] font-mono bg-rose-500\/20 text-rose-300 px-2 py-0.5 rounded font-bold\">1\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">City & NAV<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Municipality, school, kindergartens, doctor, and integration.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('scan')\" id=\"b3-mod-btn-scan\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-purple-500\/40 hover:border-purple-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-purple-400\">\ud83d\udfe3 VEI SCAN<\/span>\r\n <span class=\"text-[10px] font-mono bg-purple-500\/20 text-purple-300 px-2 py-0.5 rounded font-bold\">0\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Vision & GDPR<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Secure assistant for reading letters and documents.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('translate')\" id=\"b3-mod-btn-translate\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-cyan-500\/40 hover:border-cyan-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-cyan-400\">\ud83d\udd35 TRANSLATE<\/span>\r\n <span class=\"text-[10px] font-mono bg-cyan-500\/20 text-cyan-300 px-2 py-0.5 rounded font-bold\">0\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Contextual AI<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Voice translator for authorities and daily life.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('sprak')\" id=\"b3-mod-btn-sprak\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-amber-500\/40 hover:border-amber-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-amber-400\">\ud83d\udfe0 VEI SPR\u00c5K<\/span>\r\n <span class=\"text-[10px] font-mono bg-amber-500\/20 text-amber-300 px-2 py-0.5 rounded font-bold\">2\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Language & Work<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Norwegian AI tutor and CV preparation.<\/p>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b3-module-info-display\" class=\"p-4 rounded-2xl bg-slate-950\/90 border border-emerald-500\/60 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-inner\">\r\n <div class=\"flex items-center space-x-3.5\">\r\n <span id=\"b3-mod-icon\" class=\"text-3xl shrink-0\">\ud83d\udfe2<\/span>\r\n <div>\r\n <h4 id=\"b3-mod-title\" class=\"text-sm sm:text-base font-extrabold text-white font-heading\">\r\n \ud83d\udfe2 VEI LINK \u2014 Primary & camp assistant (0 \u2013 6 months)\r\n <\/h4>\r\n <p id=\"b3-mod-desc\" class=\"text-xs text-slate-300 leading-relaxed mt-0.5\">\r\n Relieves up to 90% of the household burden from the R\u00c5DE and Mottak camp reception during the first months of stay. Autonomously answers questions about the hostel, schedules, rules, and medical care.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <span id=\"b3-mod-badge\" class=\"text-xs font-mono font-bold text-emerald-300 bg-emerald-950 px-3 py-1.5 rounded-lg border border-emerald-500\/40 shrink-0\">\r\n Camp Contour\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n \r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-rose-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-rose-500\/20 border border-rose-500\/40 text-rose-400 flex items-center justify-center text-lg font-bold\">\r\n \u26a0\ufe0f\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-rose-400 bg-rose-950\/80 px-2.5 py-0.5 rounded border border-rose-500\/30 font-bold uppercase\">\r\n LTV Risk\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n The Problem of \"Disposable Apps\" (Short LTV)\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n The first LINK module, currently being developed for the camp, is needed by a person in the camp in the first <strong>0\u20136 months<\/strong> if it is left simply as a knowledge base.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n As soon as everyday issues are resolved or a person moves to a municipality, a static application is inevitably deleted.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-rose-950\/70 border border-rose-500\/50 text-xs text-rose-200 space-y-1\">\r\n <strong class=\"text-rose-300 font-bold block\"><i class=\"fa-solid fa-triangle-exclamation mr-1\"><\/i> Loss of connection with authorities:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Statistics are cut off, and agencies stop seeing what concerns the person next and what hot problems they have.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-cyan-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-cyan-500\/20 border border-cyan-500\/40 text-cyan-400 flex items-center justify-center text-lg font-bold\">\r\n \ud83d\udd04\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-cyan-400 bg-cyan-950\/80 px-2.5 py-0.5 rounded border border-cyan-500\/30 font-bold uppercase\">\r\n VEI Solution\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n Seamless Context Evolution\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Instead of deleting the app, VEI <strong>evolves along with the user<\/strong>. The context and functionality change depending on the adaptation stage.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Camp \u2192 Municipality \u2192 Daily Life \u2192 Work. One application for <strong>2+ years<\/strong> of continuous digital connection.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-cyan-950\/70 border border-cyan-500\/50 text-xs text-cyan-200 space-y-1\">\r\n <strong class=\"text-cyan-300 font-bold block\"><i class=\"fa-solid fa-check-circle mr-1\"><\/i> Continuous analytics:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Authorities receive a continuous flow of data about the resident's needs and can anticipate problems.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-emerald-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-emerald-500\/20 border border-emerald-500\/40 text-emerald-400 flex items-center justify-center text-lg font-bold\">\r\n \ud83d\ude80\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-emerald-400 bg-emerald-950\/80 px-2.5 py-0.5 rounded border border-emerald-500\/30 font-bold uppercase\">\r\n LTV Strategy\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n 10x increase in lifecycle\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Standard integration apps live for <strong>3\u20136 months<\/strong>. VEI is designed for <strong>2+ years<\/strong> of continuous use.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n This is a <strong>10x increase in LTV<\/strong> and the ability to build long-term relationships with the resident.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-emerald-950\/70 border border-emerald-500\/50 text-xs text-emerald-200 space-y-1\">\r\n <strong class=\"text-emerald-300 font-bold block\"><i class=\"fa-solid fa-chart-line mr-1\"><\/i> Success Metric:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Retention rate 60%+ after 12 months of use versus the industry average of 5-10%.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-4\" class=\"presentation-section w-full min-h-screen py-10 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-slate-200 pb-4 mb-8\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-sky-600 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono font-bold tracking-widest text-sky-700 uppercase\">VEI Governance \/\/ Screen 04<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-500 font-mono hidden sm:inline-block\">Data & Governance: GDPR, Safety & Verified Analytics<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-12\">\r\n \r\n \r\n <div class=\"text-center max-w-4xl mx-auto space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-sky-50 border border-sky-200 text-sky-700 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-building-columns text-sky-600\"><\/i>\r\n <span>Fourth Screen: Value for Agencies<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 tracking-tight leading-tight\">\r\n VEI for the State: Data Security, Transparent Analytics, and Chaos Optimization\r\n <\/h1>\r\n\r\n <p class=\"text-slate-600 text-base sm:text-lg font-semibold max-w-3xl mx-auto\">\r\n From uncontrolled information leaks to a verified digital standard\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"max-w-4xl mx-auto w-full\">\r\n <button onclick=\"openTextModal4()\" class=\"w-full py-6 rounded-2xl bg-gradient-to-r from-sky-500 via-teal-400 to-emerald-400 text-slate-950 font-black text-lg hover:scale-105 transition-all shadow-xl flex items-center justify-center space-x-3 cursor-pointer ring-4 ring-sky-500\/30\">\r\n <div class=\"w-12 h-12 rounded-full bg-slate-950 text-emerald-400 flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-book-open\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <span class=\"block text-xs font-mono uppercase tracking-widest text-slate-900 font-extrabold\">Full text of the section<\/span>\r\n <span class=\"block text-base font-bold\">Read: Value of VEI for Agencies<\/span>\r\n <\/div>\r\n <i class=\"fa-solid fa-arrow-right text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 pt-4\">\r\n \r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-rose-50 text-rose-600 border border-rose-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udee1\ufe0f\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-rose-700 bg-rose-50 px-3 py-1 rounded-full border border-rose-200\">\r\n GDPR & Privacy\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Absolute Security of Personal Data\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-rose-50\/70 border border-rose-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-rose-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-triangle-exclamation mr-1.5\"><\/i> The problem of chaotic leaks:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Today, migrants are forced to scan official letters with personal data and upload them to third-party neural networks. This is a colossal violation of privacy.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-emerald-50\/70 border border-emerald-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-emerald-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-shield-halved mr-1.5\"><\/i> VEI Solution:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Secure closed loop. The person gets the exact context of the documents without the risk of leaking personal data.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-sky-50 text-sky-600 border border-sky-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udce1\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-sky-700 bg-sky-50 px-3 py-1 rounded-full border border-sky-200\">\r\n Anti-Fake Channel\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Official Communication Channel and Protection from Disinformation\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-comments text-sky-600 mr-1.5\"><\/i> Information Chaos Management:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Instead of hours of searching for information on the Internet \u2014 direct verified notifications from <strong>UDI, NAV, IMDi, and Municipalities<\/strong>.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-sky-50\/70 border border-sky-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-sky-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-circle-check mr-1.5\"><\/i> 100% Resident Trust:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n A person receives an official news update, understands its correct meaning, and in one click goes to the agency's official source.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 border border-indigo-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udcca\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-indigo-700 bg-indigo-50 px-3 py-1 rounded-full border border-indigo-200\">\r\n Verified Analytics\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Real Analytics from Usage\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-chart-line text-indigo-600 mr-1.5\"><\/i> Data for planning:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Agencies receive verified data on the real needs of residents for effective resource allocation.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-indigo-50\/70 border border-indigo-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-indigo-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-bullseye mr-1.5\"><\/i> Predictive Analytics:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n The system predicts potential problems and allows agencies to act proactively, not reactively.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83c\udfdb\ufe0f\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200\">\r\n National Standard\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n National Digital Integration Standard\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-flag text-emerald-600 mr-1.5\"><\/i> Unified Ecosystem:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Norway can become the first country with a national standard for the digital integration of migrants.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-emerald-50\/70 border border-emerald-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-emerald-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-globe mr-1.5\"><\/i> Global Potential:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n The developed solution can be scaled to other countries, creating a new standard for integration in Europe.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-5\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-[#0B132B] section-animate\">\r\n <div class=\"glow-bg\"><\/div>\r\n\r\n <div class=\"w-full max-w-5xl mx-auto flex flex-col items-center z-10 my-auto\">\r\n <header class=\"text-center mb-6\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950\/60 border border-emerald-500\/30 text-emerald-400 text-xs font-mono uppercase tracking-widest mb-3\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400 animate-ping\"><\/span>\r\n Final Module \u2022 VEI SHOWROOM\r\n <\/div>\r\n <h1 class=\"text-2xl md:text-4xl font-extrabold text-white tracking-tight font-heading\">\r\n VEI <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-500\">SHOWROOM<\/span>\r\n <\/h1>\r\n <p class=\"text-slate-400 text-sm md:text-base mt-1 max-w-xl mx-auto\">\r\n Final video demonstration of the system's operation in real conditions.\r\n <\/p>\r\n <\/header>\r\n\r\n <div class=\"w-full glass-panel rounded-2xl overflow-hidden relative shadow-xl border border-slate-700\/50\">\r\n <div class=\"flex items-center justify-between px-4 py-3 bg-slate-900\/80 border-b border-slate-800 text-xs font-mono text-slate-400\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-red-500 inline-block\"><\/span>\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-500 inline-block\"><\/span>\r\n <span class=\"w-3 h-3 rounded-full bg-green-500 inline-block\"><\/span>\r\n <span class=\"ml-2 text-slate-300 font-semibold\">VEI_VIDEO_DEMO.MP4<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]\">1080P HD<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative bg-black aspect-video flex items-center justify-center group overflow-hidden cursor-pointer\" onclick=\"openUnifiedVideoModal(5)\">\r\n \r\n <div class=\"absolute inset-0 bg-slate-950\/40 backdrop-blur-[2px] flex items-center justify-center transition-opacity duration-300 group-hover:bg-slate-950\/60\">\r\n <div class=\"w-20 h-20 rounded-full bg-emerald-500\/20 border-2 border-emerald-400 flex items-center justify-center text-emerald-400 text-3xl pl-1 shadow-[0_0_30px_rgba(16,185,129,0.4)] group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-play\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"absolute top-4 left-4 bg-slate-900\/80 backdrop-blur-md border border-slate-700\/60 text-slate-300 px-3 py-1.5 rounded-lg text-xs flex items-center gap-2 opacity-90\">\r\n <i class=\"fa-solid fa-magic text-emerald-400\"><\/i>\r\n <span>Click to view the demonstration<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-4 bg-slate-900\/90 border-t border-slate-800\/80\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-xs text-slate-400 font-mono\">Status: <span class=\"text-emerald-400\">Ready to play<\/span><\/span>\r\n <\/div>\r\n <button onclick=\"openUnifiedVideoModal(5)\" class=\"px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition-all flex items-center gap-2\">\r\n <i class=\"fa-solid fa-play\"><\/i>\r\n <span>Watch Demo<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-6\" class=\"presentation-section w-full min-h-screen py-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n <div class=\"relative z-10 w-full max-w-5xl mx-auto space-y-12\">\r\n \r\n \r\n <div class=\"text-center space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-flag-checkered text-emerald-600\"><\/i>\r\n <span>Final Stage<\/span>\r\n <\/div>\r\n <h1 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 tracking-tight leading-tight\">\r\n Roadmap and Partnership\r\n <\/h1>\r\n <p class=\"text-slate-600 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n From concept and prototype \u2014 to a national digital integration standard in Norway.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"founder-gradient rounded-3xl p-6 sm:p-8 text-white shadow-xl relative overflow-hidden border border-slate-800\">\r\n \r\n <div class=\"absolute -top-24 -right-24 w-64 h-64 bg-emerald-500\/20 rounded-full blur-xl pointer-events-none\"><\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative z-10\">\r\n \r\n <div class=\"space-y-5\">\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-tr from-emerald-400 to-teal-300 text-slate-900 flex items-center justify-center font-heading font-black text-sm shadow-md\">\r\n ALEX\r\n <\/div>\r\n <div>\r\n <h2 class=\"text-xl font-heading font-black text-white\">Founder's Vision<\/h2>\r\n <p class=\"text-xs text-emerald-400 font-mono\">Authentic Founder Story<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <blockquote class=\"text-sm sm:text-base text-slate-300 leading-relaxed italic border-l-2 border-emerald-500 pl-4\">\r\n \u00abVEI is not just an IT product. It is the journey of every newcomer translated into technology.<br><br>\r\n I have personally seen how people cannot withstand the everyday and bureaucratic stress and leave Norway. My goal is to stop this outflow by combining technology with the expertise of the Norwegian state system\u00bb.\r\n <\/blockquote>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col items-center md:items-end justify-center space-y-4\">\r\n <div class=\"w-full max-w-sm rounded-2xl bg-slate-800\/50 border border-slate-700 p-4 text-center space-y-4 backdrop-blur-sm\">\r\n <p class=\"text-xs text-slate-300 font-medium\">Thank you for taking the time to review the VEI project.<\/p>\r\n <p class=\"text-xs text-slate-400\">The presentation is complete. Please review the implementation roadmap below.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-center space-x-3 border-b border-slate-200 pb-3\">\r\n <i class=\"fa-solid fa-route text-emerald-600 text-xl\"><\/i>\r\n <h2 class=\"text-xl font-heading font-extrabold text-slate-900\">Implementation Plan (4 Stages)<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n \r\n \r\n <div class=\"nordic-card rounded-2xl p-5 border-2 border-emerald-500 bg-emerald-50\/10 active-stage-pulse relative\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded\">Current<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-emerald-600 text-white font-black text-xs flex items-center justify-center mb-3\">01<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Development & Test (Mottak)<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Creation of the basic architecture of the LINK module. Internal testing of the AI assistant for R\u00c5DE camp scenarios.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">Q3-Q4 2026<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">02<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Pilot in R\u00c5DE<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Launch of the pilot version in a real camp. Gathering feedback from migrants and staff.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">2027<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">03<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Expansion across Norway<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Scaling to other municipalities. Integration with state systems.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">2028+<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">04<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">National Standard<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Status of the official national standard for digital integration of migrants.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"text-center pt-8 flex flex-col sm:flex-row items-center justify-center gap-4\">\r\n <button onclick=\"scrollToSection(1)\" class=\"inline-flex items-center space-x-2 px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold transition-all shadow-md\">\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <span>Back to the beginning<\/span>\r\n <\/button>\r\n <a href=\"mailto:oleksiipatrykieiev@gmail.com\" class=\"inline-flex items-center space-x-2 px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white font-bold transition-all shadow-md\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n <span>Contact me<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ ==================== UNIFIED VIDEO SYSTEM ====================\r\n \r\n \/\/ Section data configuration\r\n const sectionData = {\r\n 1: {\r\n title: \"VEI Presentation \u2014 ALEX\",\r\n videoId: \"dfwJdYi3z0U\",\r\n youtubeUrl: \"https:\/\/youtu.be\/dfwJdYi3z0U\",\r\n duration: 219, \/\/ 3min 39sec in seconds\r\n actionTitle: \"Watch the presentation\",\r\n actionDesc: \"Learn about the VEI concept. After watching, proceed to the second block to see the user's journey.\",\r\n nextBtnText: \"PROCEED TO BLOCK 2\",\r\n endTitle: \"VEI Concept Explored!\",\r\n endDesc: \"You've been introduced to the VEI concept. Click the button below to proceed to the user's journey.\",\r\n endBtnText: \"PROCEED TO BLOCK 2: MIGRANT'S JOURNEY\",\r\n navTitle: \"Home\",\r\n navDesc: \"VEI Concept\"\r\n },\r\n 2: {\r\n title: \"Second Screen: User Journey & Pain Points\",\r\n videoId: \"heDhl3woohA\",\r\n youtubeUrl: \"https:\/\/youtu.be\/heDhl3woohA\",\r\n duration: 281, \/\/ 4min 41sec in seconds\r\n actionTitle: \"Second screen: Migrant's journey\",\r\n actionDesc: \"The real human journey: from entering the country to integration. After watching, proceed to the strategic solution.\",\r\n nextBtnText: \"PROCEED TO BLOCK 3\",\r\n endTitle: \"Pain Points Analysis Viewed!\",\r\n endDesc: \"All adaptation stages by the user have been explored. Click the button below to proceed to the strategic solution.\",\r\n endBtnText: \"PROCEED TO BLOCK 3: STRATEGY AND LTV\",\r\n navTitle: \"Migrant's Journey\",\r\n navDesc: \"Pains and Solutions\"\r\n },\r\n 3: {\r\n title: \"Third Screen: VEI Ecosystem and LTV Strategy\",\r\n videoId: \"eiKhNn8VpTA\",\r\n youtubeUrl: \"https:\/\/youtu.be\/eiKhNn8VpTA\",\r\n duration: 220, \/\/ 3min 40sec in seconds\r\n actionTitle: \"Third screen: Ecosystem\",\r\n actionDesc: \"5 VEI modules and the strategy to increase the lifecycle from 6 months to 2+ years.\",\r\n nextBtnText: \"PROCEED TO BLOCK 5\",\r\n endTitle: \"Ecosystem Explored!\",\r\n endDesc: \"You have learned about the 5 VEI modules and the LTV strategy. Proceed to the prototype demonstration.\",\r\n endBtnText: \"PROCEED TO BLOCK 5: PROTOTYPE\",\r\n navTitle: \"Ecosystem\",\r\n navDesc: \"LTV Strategy\"\r\n },\r\n\r\n 5: {\r\n title: \"VEI SHOWROOM\",\r\n videoId: \"6hsHdvgYS6U\",\r\n youtubeUrl: \"https:\/\/youtu.be\/6hsHdvgYS6U\",\r\n duration: 184, \/\/ 3min 04sec in seconds\r\n actionTitle: \"VEI SHOWROOM\",\r\n actionDesc: \"Watch the video demonstration of the system in real conditions.\",\r\n nextBtnText: \"PROCEED TO THE FINAL BLOCK\",\r\n endTitle: \"Presentation completed!\",\r\n endDesc: \"Thank you for your time. The presentation is over.\",\r\n endBtnText: \"PROCEED TO THE FINAL SCREEN\",\r\n navTitle: \"VEI SHOWROOM\",\r\n navDesc: \"SHOWROOM\"\r\n },\r\n 4: {\r\n title: \"Fourth Screen: Value for Agencies\",\r\n videoId: null, \/\/ Text-only section\r\n youtubeUrl: null,\r\n duration: 0, \/\/ Text-only section has no duration\r\n isTextOnly: true,\r\n actionTitle: \"Fourth screen: Agencies\",\r\n actionDesc: \"Data security, transparent analytics, and chaos optimization for government structures.\",\r\n nextBtnText: \"PROCEED TO BLOCK 5\",\r\n endTitle: \"Section read!\",\r\n endDesc: \"You have read about VEI's value to the state. Proceed to the prototype demonstration.\",\r\n endBtnText: \"PROCEED TO BLOCK 5: PROTOTYPE\",\r\n navTitle: \"Agencies\",\r\n navDesc: \"Text Section\"\r\n }\r\n };\r\n\r\n \/\/ State management\r\n let viewedState = {\r\n 1: false,\r\n 2: false,\r\n 3: false,\r\n 4: false, \/\/ Text-only section, still tracked for reading\r\n 5: false\r\n };\r\n\r\n let currentSection = 1;\r\n let unifiedYtPlayer = null;\r\n let isUnifiedVideoFinished = false;\r\n\r\n \/\/ Real-time progress tracking\r\n const TOTAL_DURATION = 904; \/\/ Total duration in seconds (~15 minutes)\r\n let progressUpdateInterval = null;\r\n let accumulatedTime = 0; \/\/ Time from previously watched videos\r\n\r\n \/\/ Load viewed state from sessionStorage\r\n function loadViewedState() {\r\n const saved = sessionStorage.getItem('veiViewedState');\r\n if (saved) {\r\n try {\r\n viewedState = JSON.parse(saved);\r\n } catch (e) {\r\n console.error('Error loading viewed state:', e);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Save viewed state to sessionStorage\r\n function saveViewedState() {\r\n sessionStorage.setItem('veiViewedState', JSON.stringify(viewedState));\r\n }\r\n\r\n \/\/ Mark section as viewed\r\n function markSectionAsViewed(sectionNumber) {\r\n if (!viewedState[sectionNumber]) {\r\n viewedState[sectionNumber] = true;\r\n saveViewedState();\r\n updateViewedIndicators();\r\n }\r\n }\r\n\r\n \/\/ Update viewed indicators in navigation\r\n function updateViewedIndicators() {\r\n \/\/ Update progress indicator (count only video sections: 1,2,3,5 = 4 total)\r\n const videoSections = [1, 2, 3, 5];\r\n const viewedCount = videoSections.filter(s => viewedState[s]).length;\r\n const progressEl = document.getElementById('unifiedProgressIndicator');\r\n if (progressEl) {\r\n progressEl.textContent = `${viewedCount}\/4 viewed`;\r\n progressEl.classList.add('updated');\r\n setTimeout(() => progressEl.classList.remove('updated'), 500);\r\n }\r\n\r\n \/\/ Update circular progress indicator based on accumulated time\r\n accumulatedTime = calculateAccumulatedTime();\r\n const percentage = (accumulatedTime \/ TOTAL_DURATION) * 100;\r\n const remainingSeconds = TOTAL_DURATION - accumulatedTime;\r\n const remainingMinutes = Math.max(0, Math.ceil(remainingSeconds \/ 60));\r\n\r\n const circularProgress = document.getElementById('circularProgress');\r\n const circularProgressText = document.getElementById('circularProgressText');\r\n const circularProgressTime = document.getElementById('circularProgressTime');\r\n\r\n if (circularProgress && circularProgressText && circularProgressTime) {\r\n \/\/ SVG circumference is 283 (2 * PI * 45)\r\n const circumference = 283;\r\n const dashOffset = circumference - (circumference * percentage \/ 100);\r\n circularProgress.style.strokeDashoffset = dashOffset;\r\n circularProgressText.textContent = `${Math.round(percentage)}%`;\r\n circularProgressTime.textContent = `${remainingMinutes} min`;\r\n }\r\n\r\n \/\/ Update navigation items\r\n updateNavigationItems();\r\n\r\n \/\/ Update main navigation\r\n updateMainNavigation();\r\n }\r\n\r\n \/\/ Generate navigation items dynamically\r\n function generateNavigationItems() {\r\n const container = document.getElementById('unifiedNavContainer');\r\n if (!container) return;\r\n\r\n container.innerHTML = '';\r\n\r\n \/\/ Skip section 4 (text-only section) and section 6 (final screen)\r\n const videoSections = [1, 2, 3, 5];\r\n\r\n videoSections.forEach(i => {\r\n const data = sectionData[i];\r\n const isViewed = viewedState[i];\r\n const isCurrent = i === currentSection;\r\n\r\n const button = document.createElement('button');\r\n button.className = `nav-section-item relative w-full flex items-start text-left p-3 rounded-xl cursor-pointer transition-all ${\r\n isCurrent ? 'current' : (isViewed ? 'viewed' : 'unviewed')\r\n }`;\r\n button.onclick = () => switchToSection(i);\r\n\r\n button.innerHTML = `\r\n <div class=\"w-8 h-8 shrink-0\"><\/div>\r\n <div class=\"ml-3\">\r\n <h4 class=\"section-title text-sm font-bold mt-0.5\">${data.navTitle}<\/h4>\r\n <p class=\"text-xs opacity-70\">${data.navDesc}<\/p>\r\n <\/div>\r\n `;\r\n\r\n container.appendChild(button);\r\n });\r\n }\r\n\r\n \/\/ Update navigation items styling\r\n function updateNavigationItems() {\r\n const container = document.getElementById('unifiedNavContainer');\r\n if (!container) return;\r\n\r\n const items = container.querySelectorAll('.nav-section-item');\r\n const videoSections = [1, 2, 3, 5, 6];\r\n \r\n items.forEach((item, index) => {\r\n const sectionNum = videoSections[index];\r\n const isViewed = viewedState[sectionNum];\r\n const isCurrent = sectionNum === currentSection;\r\n\r\n item.classList.remove('current', 'viewed', 'unviewed');\r\n if (isCurrent) {\r\n item.classList.add('current');\r\n } else if (isViewed) {\r\n item.classList.add('viewed');\r\n } else {\r\n item.classList.add('unviewed');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Update main navigation indicators\r\n function updateMainNavigation() {\r\n const navItems = document.querySelectorAll('.nav-item');\r\n navItems.forEach(item => {\r\n const section = parseInt(item.dataset.section);\r\n if (section && viewedState[section]) {\r\n item.classList.add('viewed-indicator');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize unified YouTube player\r\n function initUnifiedPlayer() {\r\n if (unifiedYtPlayer) return;\r\n\r\n unifiedYtPlayer = new YT.Player('unifiedVideoIframeWrapper', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: sectionData[currentSection].videoId,\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'autoplay': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onStateChange': onUnifiedPlayerStateChange\r\n }\r\n });\r\n }\r\n\r\n \/\/ Handle unified player state changes\r\n function onUnifiedPlayerStateChange(event) {\r\n if (event.data === YT.PlayerState.ENDED) {\r\n isUnifiedVideoFinished = true;\r\n showUnifiedEndOverlay();\r\n markSectionAsViewed(currentSection);\r\n stopProgressTracking();\r\n \/\/ Update progress to reflect completed video\r\n updateViewedIndicators();\r\n } else if (event.data === YT.PlayerState.PLAYING) {\r\n startProgressTracking();\r\n } else if (event.data === YT.PlayerState.PAUSED) {\r\n stopProgressTracking();\r\n }\r\n }\r\n\r\n \/\/ Calculate accumulated time from previously watched videos\r\n function calculateAccumulatedTime() {\r\n let time = 0;\r\n const videoSections = [1, 2, 3, 5];\r\n videoSections.forEach(section => {\r\n if (viewedState[section]) {\r\n time += sectionData[section].duration || 0;\r\n }\r\n });\r\n return time;\r\n }\r\n\r\n \/\/ Update circular progress based on current playback time\r\n function updateCircularProgress() {\r\n if (!unifiedYtPlayer) return;\r\n\r\n try {\r\n const currentTime = unifiedYtPlayer.getCurrentTime() || 0;\r\n const currentDuration = sectionData[currentSection]?.duration || 0;\r\n accumulatedTime = calculateAccumulatedTime();\r\n\r\n const totalProgressTime = accumulatedTime + currentTime;\r\n const percentage = (totalProgressTime \/ TOTAL_DURATION) * 100;\r\n const remainingSeconds = TOTAL_DURATION - totalProgressTime;\r\n const remainingMinutes = Math.max(0, Math.ceil(remainingSeconds \/ 60));\r\n\r\n const circularProgress = document.getElementById('circularProgress');\r\n const circularProgressText = document.getElementById('circularProgressText');\r\n const circularProgressTime = document.getElementById('circularProgressTime');\r\n\r\n if (circularProgress && circularProgressText && circularProgressTime) {\r\n \/\/ SVG circumference is 283 (2 * PI * 45)\r\n const circumference = 283;\r\n const dashOffset = circumference - (circumference * percentage \/ 100);\r\n circularProgress.style.strokeDashoffset = dashOffset;\r\n circularProgressText.textContent = `${Math.round(percentage)}%`;\r\n circularProgressTime.textContent = `${remainingMinutes} min`;\r\n }\r\n } catch (error) {\r\n console.error('Error updating progress:', error);\r\n }\r\n }\r\n\r\n \/\/ Start real-time progress tracking\r\n function startProgressTracking() {\r\n stopProgressTracking(); \/\/ Clear any existing interval\r\n progressUpdateInterval = setInterval(updateCircularProgress, 1000); \/\/ Update every second\r\n }\r\n\r\n \/\/ Stop real-time progress tracking\r\n function stopProgressTracking() {\r\n if (progressUpdateInterval) {\r\n clearInterval(progressUpdateInterval);\r\n progressUpdateInterval = null;\r\n }\r\n }\r\n\r\n \/\/ Open unified video modal\r\n function openUnifiedVideoModal(sectionNumber) {\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (!modal) return;\r\n\r\n currentSection = sectionNumber;\r\n isUnifiedVideoFinished = false;\r\n\r\n \/\/ Update modal content\r\n updateModalContent(sectionNumber);\r\n\r\n \/\/ Show modal\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n\r\n \/\/ Initialize\/load video\r\n if (unifiedYtPlayer) {\r\n unifiedYtPlayer.loadVideoById(sectionData[sectionNumber].videoId);\r\n } else {\r\n initUnifiedPlayer();\r\n }\r\n\r\n \/\/ Update navigation\r\n generateNavigationItems();\r\n\r\n \/\/ Initialize circular progress\r\n updateViewedIndicators();\r\n\r\n \/\/ Start progress tracking if video is already playing\r\n if (unifiedYtPlayer && unifiedYtPlayer.getPlayerState() === YT.PlayerState.PLAYING) {\r\n startProgressTracking();\r\n }\r\n }\r\n\r\n \/\/ Close unified video modal\r\n function closeUnifiedVideoModal() {\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (!modal) return;\r\n\r\n modal.classList.add('hidden');\r\n document.body.style.overflow = '';\r\n document.documentElement.style.overflow = '';\r\n\r\n if (unifiedYtPlayer && typeof unifiedYtPlayer.pauseVideo === 'function') {\r\n unifiedYtPlayer.pauseVideo();\r\n }\r\n\r\n \/\/ Stop progress tracking when modal is closed\r\n stopProgressTracking();\r\n\r\n closeUnifiedEndOverlay();\r\n }\r\n\r\n \/\/ Update modal content for specific section\r\n function updateModalContent(sectionNumber) {\r\n const data = sectionData[sectionNumber];\r\n if (!data) return;\r\n\r\n \/\/ Update title\r\n const titleEl = document.getElementById('unifiedModalTitle');\r\n if (titleEl) titleEl.textContent = data.title;\r\n\r\n \/\/ Update YouTube link\r\n const youtubeLinkEl = document.getElementById('unifiedYoutubeLink');\r\n if (youtubeLinkEl) youtubeLinkEl.href = data.youtubeUrl;\r\n\r\n \/\/ Update action panel\r\n const actionTitleEl = document.getElementById('unifiedActionPanelTitle');\r\n if (actionTitleEl) actionTitleEl.textContent = data.actionTitle;\r\n\r\n const actionDescEl = document.getElementById('unifiedActionPanelDesc');\r\n if (actionDescEl) actionDescEl.textContent = data.actionDesc;\r\n\r\n \/\/ Update main next button\r\n const mainNextBtnTextEl = document.getElementById('unifiedMainNextBtnText');\r\n if (mainNextBtnTextEl) mainNextBtnTextEl.textContent = data.nextBtnText;\r\n\r\n \/\/ Update end overlay\r\n const endTitleEl = document.getElementById('unifiedEndTitle');\r\n if (endTitleEl) endTitleEl.textContent = data.endTitle;\r\n\r\n const endDescEl = document.getElementById('unifiedEndDesc');\r\n if (endDescEl) endDescEl.textContent = data.endDesc;\r\n\r\n const endBtnTextEl = document.getElementById('unifiedNextBtnText');\r\n if (endBtnTextEl) endBtnTextEl.textContent = data.endBtnText;\r\n }\r\n\r\n \/\/ Show unified end overlay\r\n function showUnifiedEndOverlay() {\r\n const overlay = document.getElementById('unifiedEndSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n \/\/ Close unified end overlay\r\n function closeUnifiedEndOverlay() {\r\n const overlay = document.getElementById('unifiedEndSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Switch to different section within modal\r\n function switchToSection(sectionNumber) {\r\n if (sectionNumber === currentSection) return;\r\n\r\n \/\/ Add loading state\r\n const videoContainer = document.getElementById('unifiedVideoIframeWrapper');\r\n if (videoContainer) {\r\n videoContainer.classList.add('video-transition-out');\r\n }\r\n\r\n setTimeout(() => {\r\n currentSection = sectionNumber;\r\n isUnifiedVideoFinished = false;\r\n\r\n \/\/ Update content\r\n updateModalContent(sectionNumber);\r\n\r\n \/\/ Load new video\r\n if (unifiedYtPlayer) {\r\n unifiedYtPlayer.loadVideoById(sectionData[sectionNumber].videoId);\r\n }\r\n\r\n \/\/ Update navigation\r\n updateNavigationItems();\r\n\r\n \/\/ Remove loading state\r\n if (videoContainer) {\r\n videoContainer.classList.remove('video-transition-out');\r\n videoContainer.classList.add('video-transition-in');\r\n setTimeout(() => {\r\n videoContainer.classList.remove('video-transition-in');\r\n }, 500);\r\n }\r\n\r\n \/\/ Scroll to section with smooth behavior\r\n const section = document.getElementById(`section-${sectionNumber}`);\r\n if (section) {\r\n const headerOffset = window.innerWidth < 768 ? 60 : 0;\r\n const elementPosition = section.getBoundingClientRect().top;\r\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\r\n \r\n \/\/ Use smooth scroll for seamless background transition\r\n window.scrollTo({\r\n top: offsetPosition,\r\n behavior: 'smooth'\r\n });\r\n }\r\n }, 300);\r\n }\r\n\r\n \/\/ Go to next section with seamless transition\r\n function goToNextSection() {\r\n let nextSection = currentSection + 1;\r\n\r\n \/\/ Skip section 4 (text-only section)\r\n if (nextSection === 4) {\r\n nextSection = 5;\r\n }\r\n\r\n \/\/ Wrap around to section 1 if at the end\r\n if (nextSection > 5) {\r\n nextSection = 1;\r\n }\r\n\r\n \/\/ Mark current as viewed\r\n markSectionAsViewed(currentSection);\r\n\r\n \/\/ Close overlay\r\n closeUnifiedEndOverlay();\r\n\r\n \/\/ Switch to next section\r\n switchToSection(nextSection);\r\n }\r\n\r\n \/\/ Handle section 5 completion - close modal and scroll to section 6\r\n function handleSection5Completion() {\r\n \/\/ Mark section 5 as viewed\r\n markSectionAsViewed(5);\r\n\r\n \/\/ Close the video modal completely\r\n closeUnifiedVideoModal();\r\n\r\n \/\/ Scroll to section 6 (final screen)\r\n setTimeout(() => {\r\n scrollToSection(6);\r\n }, 300);\r\n }\r\n\r\n \/\/ Trigger end video test\r\n function triggerEndVideoTest() {\r\n isUnifiedVideoFinished = true;\r\n showUnifiedEndOverlay();\r\n markSectionAsViewed(currentSection);\r\n \/\/ Update progress to reflect completed video\r\n updateViewedIndicators();\r\n }\r\n\r\n \/\/ ==================== TEXT MODAL FUNCTIONS ====================\r\n\r\n \/\/ Open text modal for section 4\r\n function openTextModal4() {\r\n const modal = document.getElementById('textModal4');\r\n if (modal) {\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n document.documentElement.style.overflow = 'hidden';\r\n \r\n \/\/ Mark section 4 as viewed when text is opened\r\n markSectionAsViewed(4);\r\n }\r\n }\r\n\r\n \/\/ Close text modal for section 4\r\n function closeTextModal4() {\r\n const modal = document.getElementById('textModal4');\r\n if (modal) {\r\n modal.classList.add('hidden');\r\n document.body.style.overflow = '';\r\n document.documentElement.style.overflow = '';\r\n }\r\n }\r\n\r\n \/\/ Initialize the unified system\r\n function initUnifiedSystem() {\r\n loadViewedState();\r\n generateNavigationItems();\r\n updateViewedIndicators();\r\n\r\n \/\/ Add click handler for modal background\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (modal) {\r\n modal.addEventListener('click', (e) => {\r\n if (e.target.id === 'unifiedVideoModal') {\r\n closeUnifiedVideoModal();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Add click handler for text modal background\r\n const textModal = document.getElementById('textModal4');\r\n if (textModal) {\r\n textModal.addEventListener('click', (e) => {\r\n if (e.target.id === 'textModal4') {\r\n closeTextModal4();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Add keyboard handler\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n closeUnifiedVideoModal();\r\n closeTextModal4();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize on DOM ready\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initUnifiedSystem);\r\n } else {\r\n initUnifiedSystem();\r\n }\r\n\r\n \/\/ ==================== END UNIFIED VIDEO SYSTEM ====================\r\n\r\n \/\/ Global YouTube API setup (legacy - keeping for compatibility)\r\n const VIDEO_ID_B1 = 'dfwJdYi3z0U';\r\n let mainYtPlayerB1 = null;\r\n let isVideoFinishedB1 = false;\r\n\r\n window.ytPlayersInitCallbacks = window.ytPlayersInitCallbacks || [];\r\n window.ytPlayersInitCallbacks.push(function initYtPlayerB1() {\r\n if (mainYtPlayerB1) return;\r\n mainYtPlayerB1 = new YT.Player('b1-videoIframeWrapper', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: VIDEO_ID_B1,\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'autoplay': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onStateChange': onPlayerStateChangeB1\r\n }\r\n });\r\n });\r\n\r\n if (!window.__veiYtApiQueueInstalled) {\r\n window.__veiYtApiQueueInstalled = true;\r\n var _veiPrevYtReadyB1 = window.onYouTubeIframeAPIReady;\r\n window.onYouTubeIframeAPIReady = function() {\r\n if (typeof _veiPrevYtReadyB1 === 'function') _veiPrevYtReadyB1();\r\n (window.ytPlayersInitCallbacks || []).forEach(function(fn) { fn(); });\r\n };\r\n }\r\n\r\n if (window.YT && window.YT.Player) {\r\n (window.ytPlayersInitCallbacks || []).forEach(function(fn) { fn(); });\r\n }\r\n\r\n \/\/ Block 1 Functions\r\n let speechOpenB1 = false;\r\n function toggleSpeechB1() {\r\n const content = document.getElementById('b1-speechContent');\r\n const chevron = document.getElementById('b1-speechChevron');\r\n speechOpenB1 = !speechOpenB1;\r\n if (speechOpenB1) {\r\n content.classList.remove('hidden');\r\n chevron.style.transform = 'rotate(0deg)';\r\n } else {\r\n content.classList.add('hidden');\r\n chevron.style.transform = 'rotate(-90deg)';\r\n }\r\n }\r\n\r\n const modulesDataB1 = {\r\n link: {\r\n title: '\ud83d\udfe2 VEI LINK (Daily Life & Mottak)',\r\n text: 'Primary assistant from the first minutes in the reception center. Camp rules, schedules, everyday adaptation, and reducing the workload on the reception.'\r\n },\r\n commune: {\r\n title: '\ud83d\udd34 VEI COMMUNE (City & NAV)',\r\n text: 'Interaction with the municipality (Kommune), NAV, schools. Job search, assistance with CV, and integration into city life.'\r\n },\r\n scan: {\r\n title: '\ud83d\udfe3 VEI SCAN (AI Vision \/ Computer Vision)',\r\n text: 'Scanning letters from NAV, bills, parking lots, price tags, and instantly explaining the meaning in simple words.'\r\n },\r\n translate: {\r\n title: '\ud83d\udd35 VEI TRANSLATE (Contextual Translator)',\r\n text: 'Smart contextual voice and text translator for communication with doctors (Fastlege) and government agencies.'\r\n },\r\n sprak: {\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K (Intensive Norwegian Learning)',\r\n text: 'Interactive AI tutor for practicing the Norwegian language in real situations and preparing for Norskpr\u00f8ve.'\r\n }\r\n };\r\n\r\n function highlightModuleB1(key) {\r\n const data = modulesDataB1[key];\r\n if (!data) return;\r\n\r\n const blockRoot = document.getElementById('section-1');\r\n const tooltip = document.getElementById('b1-moduleTooltip');\r\n tooltip.style.opacity = '0';\r\n\r\n if (blockRoot) {\r\n blockRoot.querySelectorAll('.module-btn').forEach(btn => {\r\n btn.classList.remove('ring-2', 'ring-white\/40', 'scale-105');\r\n });\r\n }\r\n const activeBtn = document.getElementById(`b1-btn-${key}`);\r\n if (activeBtn) {\r\n activeBtn.classList.add('ring-2', 'ring-white\/40', 'scale-105');\r\n }\r\n\r\n setTimeout(() => {\r\n tooltip.innerHTML = `<strong class=\"text-white block text-sm sm:text-base mb-1\">${data.title}<\/strong><span class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">${data.text}<\/span>`;\r\n tooltip.style.opacity = '1';\r\n }, 150);\r\n }\r\n\r\n function onPlayerStateChangeB1(event) {\r\n if (event.data === 0) {\r\n markVideoAsFinishedB1();\r\n showEndOverlayB1();\r\n }\r\n }\r\n\r\n function showEndOverlayB1() {\r\n const overlay = document.getElementById('b1-endSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n function closeEndOverlayB1() {\r\n const overlay = document.getElementById('b1-endSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.add('hidden');\r\n }\r\n }\r\n\r\n function markVideoAsFinishedB1() {\r\n if (isVideoFinishedB1) return;\r\n isVideoFinishedB1 = true;\r\n\r\n const nextBlockBtn = document.getElementById('b1-nav-block-2');\r\n const nextBlockLabel = document.getElementById('b1-nav-block-2-label');\r\n if (nextBlockBtn) {\r\n nextBlockBtn.classList.add('animate-next-step');\r\n }\r\n if (nextBlockLabel) {\r\n nextBlockLabel.classList.remove('text-slate-500');\r\n nextBlockLabel.classList.add('text-emerald-400');\r\n nextBlockLabel.innerText = \"Click to proceed\";\r\n }\r\n\r\n const actionTitle = document.getElementById('b1-actionPanelTitle');\r\n const actionDesc = document.getElementById('b1-actionPanelDesc');\r\n const mainNextBtn = document.getElementById('b1-mainNextBtn');\r\n\r\n if (actionTitle) {\r\n actionTitle.innerText = \"Ready to move on?\";\r\n actionTitle.classList.add('text-emerald-400');\r\n }\r\n if (actionDesc) {\r\n actionDesc.innerText = \"You have watched the intro video. Proceed to the second block (user's journey).\";\r\n }\r\n if (mainNextBtn) {\r\n mainNextBtn.className = \"relative z-10 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-3.5 rounded-xl sm:rounded-2xl bg-gradient-to-r from-emerald-500 to-cyan-500 hover:brightness-110 hover:scale-[1.02] active:scale-95 text-slate-950 font-extrabold text-sm sm:text-base transition-all flex items-center justify-center space-x-2 shrink-0 cursor-pointer shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:shadow-[0_0_25px_rgba(16,185,129,0.5)]\";\r\n mainNextBtn.querySelector('i').classList.add('animate-bounce');\r\n }\r\n }\r\n\r\n function triggerEndVideoTestB1() {\r\n markVideoAsFinishedB1();\r\n }\r\n\r\n \/\/ Navigation Functions\r\n function scrollToSection(sectionNumber, smooth = false) {\r\n const section = document.getElementById(`section-${sectionNumber}`);\r\n if (section) {\r\n const headerOffset = window.innerWidth < 768 ? 60 : 0; \/\/ 60px for mobile header\r\n const elementPosition = section.getBoundingClientRect().top;\r\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\r\n\r\n \/\/ Ensure section is visible\r\n section.style.display = 'block';\r\n section.style.visibility = 'visible';\r\n\r\n \/\/ Mark section as viewed when navigated to\r\n markSectionAsViewed(sectionNumber);\r\n\r\n \/\/ Use smooth or instant scroll based on parameter\r\n if (smooth) {\r\n window.scrollTo({\r\n top: offsetPosition,\r\n behavior: 'smooth'\r\n });\r\n } else {\r\n window.scrollTo(0, offsetPosition);\r\n }\r\n } else {\r\n console.error(`Section ${sectionNumber} not found`);\r\n }\r\n }\r\n\r\n \/\/ Update active nav item on scroll\r\n const sections = document.querySelectorAll('.presentation-section');\r\n const navItems = document.querySelectorAll('.nav-item');\r\n\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.3\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const sectionId = entry.target.id;\r\n const sectionNumber = sectionId.replace('section-', '');\r\n \r\n navItems.forEach(item => {\r\n item.classList.remove('active');\r\n if (parseInt(item.dataset.section) === parseInt(sectionNumber)) {\r\n item.classList.add('active');\r\n }\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n sections.forEach(section => {\r\n observer.observe(section);\r\n });\r\n\r\n \/\/ Keyboard events\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n closeUnifiedVideoModal();\r\n \/\/ Close mobile menu if open\r\n const menu = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n const hamburger = document.querySelector('.hamburger-btn');\r\n if (menu && menu.classList.contains('active')) {\r\n menu.classList.remove('active');\r\n overlay.classList.remove('active');\r\n hamburger.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n });\r\n\r\n \/\/ Smart mobile header auto-hide on scroll\r\n let lastScrollTop = 0;\r\n let scrollTimeout;\r\n\r\n window.addEventListener('scroll', function() {\r\n \/\/ Only apply on mobile\r\n if (window.innerWidth >= 768) return;\r\n\r\n const navSidebar = document.querySelector('.nav-sidebar');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n if (!navSidebar) return;\r\n\r\n \/\/ Don't hide header if menu is open\r\n if (menuContainer && menuContainer.classList.contains('active')) return;\r\n\r\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n \/\/ Clear previous timeout\r\n clearTimeout(scrollTimeout);\r\n\r\n \/\/ Throttle scroll events\r\n scrollTimeout = setTimeout(function() {\r\n if (scrollTop > lastScrollTop && scrollTop > 60) {\r\n \/\/ Scrolling down - hide header\r\n navSidebar.classList.add('header-hidden');\r\n navSidebar.classList.remove('header-visible');\r\n } else {\r\n \/\/ Scrolling up - show header\r\n navSidebar.classList.remove('header-hidden');\r\n navSidebar.classList.add('header-visible');\r\n }\r\n lastScrollTop = scrollTop;\r\n }, 15);\r\n }, { passive: true });\r\n\r\n \/\/ Block 2 Functions\r\n let activeStageB2 = 1;\r\n\r\n function activateStageB2(stageNumber) {\r\n activeStageB2 = stageNumber;\r\n\r\n \/\/ Update timeline buttons\r\n for (let i = 1; i <= 4; i++) {\r\n const btn = document.getElementById(`b2-tb-step-${i}`);\r\n if (btn) {\r\n const circle = btn.querySelector('div');\r\n if (i === stageNumber) {\r\n circle.classList.add('ring-4', 'ring-white', 'scale-110');\r\n } else {\r\n circle.classList.remove('ring-4', 'ring-white', 'scale-110');\r\n }\r\n }\r\n }\r\n\r\n \/\/ Update accordion cards\r\n for (let i = 1; i <= 4; i++) {\r\n const card = document.getElementById(`b2-card-stage-${i}`);\r\n const content = document.getElementById(`b2-content-stage-${i}`);\r\n const chevron = document.getElementById(`b2-chevron-stage-${i}`);\r\n\r\n if (card && content && chevron) {\r\n if (i === stageNumber) {\r\n content.classList.remove('hidden');\r\n chevron.style.transform = 'rotate(0deg)';\r\n card.classList.add('ring-2', 'ring-emerald-500\/30');\r\n } else {\r\n content.classList.add('hidden');\r\n chevron.style.transform = 'rotate(-90deg)';\r\n card.classList.remove('ring-2', 'ring-emerald-500\/30');\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize first stage\r\n activateStageB2(1);\r\n\r\n \/\/ Block 3 Functions\r\n const modulesDataB3 = {\r\n link: {\r\n icon: '\ud83d\udfe2',\r\n title: '\ud83d\udfe2 VEI LINK \u2014 Primary & camp assistant (0 \u2013 6 months)',\r\n desc: 'Relieves up to 90% of the household burden from the R\u00c5DE and Mottak camp reception during the first months of stay. Autonomously answers questions about the hostel, schedules, rules, and medical care.',\r\n badge: 'Camp Contour'\r\n },\r\n commune: {\r\n icon: '\ud83d\udd34',\r\n title: '\ud83d\udd34 VEI COMMUNE \u2014 Municipal navigator (1 \u2013 24+ months)',\r\n desc: 'A unified municipality database with navigation for all services: school, kindergartens, doctor, NAV, sports, and cultural integration.',\r\n badge: 'Municipal Contour'\r\n },\r\n scan: {\r\n icon: '\ud83d\udfe3',\r\n title: '\ud83d\udfe3 VEI SCAN \u2014 Computer vision and GDPR (0 \u2013 24+ months)',\r\n desc: 'Secure assistant for reading letters from NAV, bills, parking lots, and official documents with instant simple explanations.',\r\n badge: 'GDPR & Vision'\r\n },\r\n translate: {\r\n icon: '\ud83d\udd35',\r\n title: '\ud83d\udd35 TRANSLATE \u2014 Contextual AI translator (0 \u2013 24+ months)',\r\n desc: 'Smart voice and text translator for communication with doctors (Fastlege), authorities, and in everyday situations considering the context.',\r\n badge: 'Contextual AI'\r\n },\r\n sprak: {\r\n icon: '\ud83d\udfe0',\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K \u2014 Norwegian AI tutor (2 \u2013 24+ months)',\r\n desc: 'Interactive personalized simulator for practicing Norwegian in real situations and preparing for Norskpr\u00f8ve and CV creation.',\r\n badge: 'Language & Work'\r\n }\r\n };\r\n\r\n function switchModuleB3(key) {\r\n const data = modulesDataB3[key];\r\n if (!data) return;\r\n\r\n \/\/ Update module info display\r\n const icon = document.getElementById('b3-mod-icon');\r\n const title = document.getElementById('b3-mod-title');\r\n const desc = document.getElementById('b3-mod-desc');\r\n const badge = document.getElementById('b3-mod-badge');\r\n\r\n if (icon) icon.textContent = data.icon;\r\n if (title) title.textContent = data.title;\r\n if (desc) desc.textContent = data.desc;\r\n if (badge) badge.textContent = data.badge;\r\n\r\n \/\/ Update button states\r\n for (const modKey in modulesDataB3) {\r\n const btn = document.getElementById(`b3-mod-btn-${modKey}`);\r\n if (btn) {\r\n if (modKey === key) {\r\n btn.classList.add('ring-2', 'ring-white\/50', 'scale-105');\r\n } else {\r\n btn.classList.remove('ring-2', 'ring-white\/50', 'scale-105');\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n let b5Player;\r\n let b5PlayerReady = false;\r\n\r\n window.ytPlayersInitCallbacks.push(function initYtPlayerB5() {\r\n if (b5Player) return;\r\n b5Player = new YT.Player('b5-youtubePlayer', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: '6hsHdvgYS6U',\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onReady': onB5PlayerReady,\r\n 'onStateChange': onB5PlayerStateChange\r\n }\r\n });\r\n });\r\n\r\n function onB5PlayerReady(event) {\r\n b5PlayerReady = true;\r\n const b5PlayOverlay = document.getElementById('b5-playOverlay');\r\n const b5PlayPauseBtn = document.getElementById('b5-playPauseBtn');\r\n const b5MuteBtn = document.getElementById('b5-muteBtn');\r\n const b5FullscreenBtn = document.getElementById('b5-fullscreenBtn');\r\n const b5ProgressBar = document.getElementById('b5-progressBar');\r\n const b5CurrentTimeDisplay = document.getElementById('b5-currentTimeDisplay');\r\n const b5DurationDisplay = document.getElementById('b5-durationDisplay');\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n const b5StatusText = document.getElementById('b5-statusText');\r\n\r\n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435\r\n b5PlayOverlay.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n b5Player.playVideo();\r\n }\r\n });\r\n\r\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 Play\/Pause\r\n b5PlayPauseBtn.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n const playerState = b5Player.getPlayerState();\r\n if (playerState === YT.PlayerState.PLAYING) {\r\n b5Player.pauseVideo();\r\n } else {\r\n b5Player.playVideo();\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u043e\u043c\r\n b5MuteBtn.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n if (b5Player.isMuted()) {\r\n b5Player.unMute();\r\n b5MuteBtn.innerHTML = '<i class=\"fa-solid fa-volume-high\"><\/i>';\r\n } else {\r\n b5Player.mute();\r\n b5MuteBtn.innerHTML = '<i class=\"fa-solid fa-volume-xmark text-red-400\"><\/i>';\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u041f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c\r\n b5FullscreenBtn.addEventListener('click', () => {\r\n const iframe = document.getElementById('b5-youtubePlayer');\r\n if (document.fullscreenElement) {\r\n document.exitFullscreen();\r\n } else if (iframe.requestFullscreen) {\r\n iframe.requestFullscreen();\r\n } else if (iframe.webkitRequestFullscreen) {\r\n iframe.webkitRequestFullscreen();\r\n }\r\n });\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430\r\n setInterval(() => {\r\n if (b5PlayerReady && b5Player.getCurrentTime) {\r\n const currentTime = b5Player.getCurrentTime();\r\n const duration = b5Player.getDuration();\r\n if (duration > 0) {\r\n const progress = (currentTime \/ duration) * 100;\r\n b5ProgressBar.value = progress;\r\n b5CurrentTimeDisplay.textContent = formatTime(currentTime);\r\n b5DurationDisplay.textContent = formatTime(duration);\r\n }\r\n }\r\n }, 1000);\r\n }\r\n\r\n function onB5PlayerStateChange(event) {\r\n const b5PlayPauseBtn = document.getElementById('b5-playPauseBtn');\r\n const b5PlayOverlay = document.getElementById('b5-playOverlay');\r\n const b5StatusText = document.getElementById('b5-statusText');\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n\r\n if (event.data === YT.PlayerState.PLAYING) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-pause\"><\/i>';\r\n b5PlayOverlay.classList.add('opacity-0');\r\n b5StatusText.textContent = 'Playing...';\r\n } else if (event.data === YT.PlayerState.PAUSED) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-play\"><\/i>';\r\n b5PlayOverlay.classList.remove('opacity-0');\r\n b5StatusText.textContent = 'Paused';\r\n } else if (event.data === YT.PlayerState.ENDED) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-play\"><\/i>';\r\n b5PlayOverlay.classList.remove('opacity-0');\r\n b5StatusText.textContent = 'Video completed';\r\n showB5FinalBadge();\r\n }\r\n }\r\n\r\n function formatTime(seconds) {\r\n if (isNaN(seconds)) return \"00:00\";\r\n const mins = Math.floor(seconds \/ 60);\r\n const secs = Math.floor(seconds % 60);\r\n return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n }\r\n\r\n let b5BadgeShown = false;\r\n function showB5FinalBadge() {\r\n if (b5BadgeShown) return;\r\n b5BadgeShown = true;\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n b5FinalBadge.classList.remove('hidden');\r\n }\r\n\r\n function closeB5FinalBadge() {\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n b5FinalBadge.classList.add('hidden');\r\n b5BadgeShown = false;\r\n }\r\n\r\n \/\/ Mobile Menu Functions\r\n function toggleMobileMenu() {\r\n const hamburgerBtn = document.querySelector('.hamburger-btn');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n \r\n hamburgerBtn.classList.toggle('active');\r\n menuContainer.classList.toggle('active');\r\n overlay.classList.toggle('active');\r\n \r\n \/\/ Prevent body scroll when menu is open\r\n if (menuContainer.classList.contains('active')) {\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n\r\n function closeMobileMenu() {\r\n const hamburgerBtn = document.querySelector('.hamburger-btn');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n \r\n hamburgerBtn.classList.remove('active');\r\n menuContainer.classList.remove('active');\r\n overlay.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Close mobile menu on escape key\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeMobileMenu();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VEI Presentation — Professional Landing RU EN NO Home Migrant’s Journey Ecosystem Agencies VEI SHOWROOM VEI RU EN NO scrollToSection(2), 100); «> Migrant’s Journey scrollToSection(4), 100); «> Agencies<\/p>\n","protected":false},"author":1,"featured_media":676,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-807","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=807"}],"version-history":[{"count":11,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807\/revisions"}],"predecessor-version":[{"id":842,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807\/revisions\/842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/media\/676"}],"wp:attachment":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n VEI Presentation - Professional Landing<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800;900&family=Orbitron:wght@600;800&family=JetBrains+Mono:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n heading: ['Plus Jakarta Sans', 'sans-serif'],\r\n orbitron: ['Orbitron', 'sans-serif'],\r\n mono: ['JetBrains Mono', 'monospace'],\r\n },\r\n colors: {\r\n nordicDark: '#0B132B',\r\n nordicCard: '#111D3A',\r\n nordicSlate: '#0F172A',\r\n nordicLightBg: '#F8FAFC',\r\n nordicBorder: '#CBD5E1',\r\n nordicWhite: '#FFFFFF',\r\n nordicBg: '#F8FAFC',\r\n nordicNavy: '#111D3A',\r\n nordicTextDark: '#0F172A',\r\n nordicBlue: '#0284C7',\r\n nordicEmerald: '#059669',\r\n nordicRose: '#E11D48',\r\n nordicPurple: '#7C3AED',\r\n veiLink: '#10B981',\r\n veiCommune: '#F43F5E',\r\n veiScan: '#A855F7',\r\n veiTranslate: '#06B6D4',\r\n veiSprak: '#F59E0B',\r\n veiEmerald: '#059669',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Global Styles *\/\r\n html, body {\r\n font-family: 'Inter', sans-serif;\r\n max-width: 100vw;\r\n overflow-x: hidden;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* Navigation Styles *\/\r\n .nav-sidebar {\r\n position: fixed;\r\n right: 0;\r\n top: 0;\r\n height: 100vh;\r\n width: 80px;\r\n background: rgba(11, 19, 43, 0.95);\r\n backdrop-filter: blur(4px);\r\n border-left: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 1000;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px 0;\r\n transition: transform 0.15s ease;\r\n }\r\n\r\n .nav-item {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 12px;\r\n cursor: pointer;\r\n transition: all 0.15s ease;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n color: rgba(255, 255, 255, 0.6);\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .nav-item:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.5);\r\n color: #10B981;\r\n transform: scale(1.1);\r\n }\r\n\r\n .nav-item:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n .nav-item.active {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n \/* Viewed\/Unviewed State Indicators *\/\r\n .nav-section-item {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-section-item.viewed {\r\n opacity: 1;\r\n }\r\n\r\n .nav-section-item.viewed .section-number {\r\n background: linear-gradient(135deg, #10B981 0%, #059669 100%);\r\n color: white;\r\n border-color: #10B981;\r\n }\r\n\r\n .nav-section-item.viewed .section-title {\r\n color: #10B981;\r\n }\r\n\r\n .nav-section-item.viewed::after {\r\n content: '\u2713';\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n color: #10B981;\r\n font-size: 12px;\r\n font-weight: bold;\r\n }\r\n\r\n .nav-section-item.current {\r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);\r\n border-color: rgba(16, 185, 129, 0.5);\r\n transform: scale(1.02);\r\n }\r\n\r\n .nav-section-item.current .section-number {\r\n background: #10B981;\r\n color: #0B132B;\r\n box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);\r\n animation: pulseSection 2s infinite;\r\n }\r\n\r\n .nav-section-item.current .section-title {\r\n color: white;\r\n }\r\n\r\n .nav-section-item.unviewed {\r\n opacity: 0.5;\r\n }\r\n\r\n .nav-section-item.unviewed .section-number {\r\n background: #1e293b;\r\n color: #64748b;\r\n border-color: #334155;\r\n }\r\n\r\n .nav-section-item.unviewed .section-title {\r\n color: #64748b;\r\n }\r\n\r\n @keyframes pulseSection {\r\n 0%, 100% {\r\n box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);\r\n }\r\n 50% {\r\n box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);\r\n }\r\n }\r\n\r\n \/* Main navigation viewed indicators *\/\r\n .main-nav-item.viewed-indicator::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 4px;\r\n transform: translateY(-50%);\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #10B981;\r\n box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n .main-nav-item.current-indicator {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item .tooltip {\r\n position: absolute;\r\n left: 60px;\r\n background: rgba(11, 19, 43, 0.95);\r\n color: white;\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n white-space: nowrap;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.15s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 3;\r\n pointer-events: none;\r\n }\r\n\r\n .nav-item:hover .tooltip {\r\n opacity: 1;\r\n visibility: visible;\r\n left: 65px;\r\n }\r\n\r\n \/* Language Switcher Styles *\/\r\n .language-switcher {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 16px;\r\n padding: 8px;\r\n background: rgba(11, 19, 43, 0.8);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 12px;\r\n width: fit-content;\r\n }\r\n\r\n .lang-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 32px;\r\n border-radius: 8px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n transition: all 0.2s ease;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n color: rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n .lang-btn:hover {\r\n background: rgba(59, 130, 246, 0.2);\r\n border-color: rgba(59, 130, 246, 0.4);\r\n color: #3B82F6;\r\n transform: scale(1.05);\r\n }\r\n\r\n .lang-btn.active {\r\n background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);\r\n }\r\n\r\n .lang-btn.active:hover {\r\n background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);\r\n color: white;\r\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\r\n }\r\n\r\n \/* Section Styles *\/\r\n .presentation-section {\r\n min-height: 100vh;\r\n padding-right: 80px;\r\n position: relative;\r\n display: block;\r\n visibility: visible;\r\n }\r\n\r\n \/* Section Animations - Optimized *\/\r\n .section-animate {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .section-animate.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Block 1 Styles *\/\r\n #section-1 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glow-bg {\r\n position: absolute;\r\n width: 400px;\r\n height: 400px;\r\n background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, rgba(11, 19, 43, 0) 70%);\r\n top: -100px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glass-panel {\r\n background: rgba(17, 29, 58, 0.95);\r\n backdrop-filter: blur(2px);\r\n -webkit-backdrop-filter: blur(2px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n }\r\n\r\n @keyframes heroPlayPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { transform: scale(1.02); box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.2); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n .hero-play-btn {\r\n animation: heroPlayPulse 3s infinite;\r\n }\r\n\r\n @keyframes soundWave {\r\n 0%, 100% { height: 4px; }\r\n 50% { height: 12px; }\r\n }\r\n .sound-bar {\r\n width: 3px;\r\n background-color: #10B981;\r\n border-radius: 2px;\r\n display: inline-block;\r\n animation: soundWave 1.5s infinite ease-in-out;\r\n }\r\n .sound-bar:nth-child(2) { animation-delay: 0.3s; }\r\n .sound-bar:nth-child(3) { animation-delay: 0.6s; }\r\n .sound-bar:nth-child(4) { animation-delay: 0.15s; }\r\n .sound-bar:nth-child(5) { animation-delay: 0.45s; }\r\n\r\n @keyframes modalFadeIn {\r\n from { opacity: 0; transform: scale(0.95); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n .modal-animate {\r\n animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n @keyframes textModalFadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .text-modal-animate {\r\n animation: textModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n .custom-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5); \r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb {\r\n background: rgba(16, 185, 129, 0.5); \r\n border-radius: 4px;\r\n }\r\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: rgba(16, 185, 129, 0.8); \r\n }\r\n\r\n \/* Text modal scrollbar *\/\r\n #textModal4 .prose::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-track {\r\n background: #f1f5f9;\r\n border-radius: 4px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-thumb {\r\n background: #94a3b8;\r\n border-radius: 4px;\r\n }\r\n\r\n #textModal4 .prose::-webkit-scrollbar-thumb:hover {\r\n background: #64748b;\r\n }\r\n\r\n @keyframes pulseNextStep {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.3); }\r\n 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, 0.6); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, 0.3); }\r\n }\r\n .animate-next-step {\r\n animation: pulseNextStep 3s infinite;\r\n background-color: rgba(16, 185, 129, 0.15) !important;\r\n opacity: 1 !important;\r\n }\r\n .animate-next-step .step-icon {\r\n background-color: #10B981 !important;\r\n color: #020617 !important;\r\n border-color: #10B981 !important;\r\n box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);\r\n transform: scale(1.05);\r\n }\r\n .animate-next-step .step-title {\r\n color: #fff !important;\r\n }\r\n\r\n \/* Block 2 Styles *\/\r\n #section-2 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n .card-shadow-stiff {\r\n box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);\r\n }\r\n\r\n .card-shadow-stiff:hover {\r\n box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\r\n }\r\n\r\n .timeline-line {\r\n background: linear-gradient(90deg, #10B981 0%, #F43F5E 33%, #A855F7 66%, #F59E0B 100%);\r\n }\r\n\r\n @keyframes playPulseContrast {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n\r\n .play-btn-glow {\r\n animation: playPulseContrast 3s infinite ease-in-out;\r\n }\r\n\r\n @keyframes endOverlayShow {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-pop-in {\r\n animation: endOverlayShow 0.25s ease-out forwards;\r\n }\r\n\r\n \/* Block 3 Styles *\/\r\n #section-3 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glow-emerald-spot {\r\n position: absolute;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(11, 19, 43, 0) 70%);\r\n top: 2%;\r\n left: -8%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glow-cyan-spot {\r\n position: absolute;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(11, 19, 43, 0) 70%);\r\n bottom: 2%;\r\n right: -8%;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glass-card-rich {\r\n background: rgba(22, 36, 71, 0.7);\r\n backdrop-filter: blur(4px);\r\n -webkit-backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .glass-card-rich:hover {\r\n border-color: rgba(16, 185, 129, 0.45);\r\n }\r\n\r\n @keyframes playGlowPulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); transform: scale(1); }\r\n }\r\n\r\n .btn-video-glow {\r\n animation: playGlowPulse 3s infinite ease-in-out;\r\n }\r\n\r\n .time-vector-gradient {\r\n background: linear-gradient(90deg, #10B981 0%, #F43F5E 30%, #A855F7 55%, #06B6D4 78%, #F59E0B 100%);\r\n }\r\n\r\n @keyframes modalOverlayPop {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-modal-anim {\r\n animation: modalOverlayPop 0.25s ease-out forwards;\r\n }\r\n\r\n .custom-dark-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-track {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 4px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-thumb {\r\n background: #10B981;\r\n border-radius: 4px;\r\n }\r\n .custom-dark-scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: #34D399;\r\n }\r\n\r\n \/* Block 4 Styles *\/\r\n #section-4 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n .card-nordic-light {\r\n background: #FFFFFF;\r\n border: 1px solid #E2E8F0;\r\n box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05);\r\n transition: all 0.15s ease;\r\n }\r\n\r\n .card-nordic-light:hover {\r\n border-color: #0284C7;\r\n box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.12);\r\n transform: translateY(-2px);\r\n }\r\n\r\n @keyframes playPulseLight {\r\n 0% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.3); transform: scale(1); }\r\n 50% { box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); transform: scale(1.02); }\r\n 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); transform: scale(1); }\r\n }\r\n\r\n .btn-play-pulse {\r\n animation: playPulseLight 3s infinite ease-in-out;\r\n }\r\n\r\n @keyframes inlineOverlayPop {\r\n from { opacity: 0; transform: scale(0.96); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n .overlay-anim-pop {\r\n animation: inlineOverlayPop 0.25s ease-out forwards;\r\n }\r\n\r\n @keyframes soundWaveLight {\r\n 0%, 100% { height: 4px; }\r\n 50% { height: 18px; }\r\n }\r\n .sound-bar-light {\r\n width: 3px;\r\n background-color: #0284C7;\r\n border-radius: 2px;\r\n display: inline-block;\r\n animation: soundWaveLight 1.5s infinite ease-in-out;\r\n }\r\n .sound-bar-light:nth-child(2) { animation-delay: 0.3s; }\r\n .sound-bar-light:nth-child(3) { animation-delay: 0.6s; }\r\n .sound-bar-light:nth-child(4) { animation-delay: 0.15s; }\r\n .sound-bar-light:nth-child(5) { animation-delay: 0.45s; }\r\n\r\n .custom-light-scrollbar::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .custom-light-scrollbar::-webkit-scrollbar-track {\r\n background: #F1F5F9;\r\n border-radius: 4px;\r\n }\r\n .custom-light-scrollbar::-webkit-scrollbar-thumb {\r\n background: #0284C7;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* Block 5 Styles *\/\r\n #section-5 {\r\n background-color: #0B132B;\r\n color: #E2E8F0;\r\n }\r\n\r\n .glass-panel-b5 {\r\n background: rgba(17, 29, 58, 0.5);\r\n backdrop-filter: blur(4px);\r\n -webkit-backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .glass-panel-b5:hover {\r\n border-color: rgba(16, 185, 129, 0.3);\r\n }\r\n\r\n .neon-border {\r\n border: 1px solid #10B981;\r\n box-shadow: 0 0 15px rgba(16, 185, 129, 0.35), inset 0 0 15px rgba(16, 185, 129, 0.15);\r\n }\r\n\r\n .nordic-glow-btn {\r\n background: linear-gradient(135deg, #10B981 0%, #059669 100%);\r\n color: #020617;\r\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);\r\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .nordic-glow-btn:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n @keyframes badgePulse {\r\n 0%, 100% {\r\n box-shadow: 0 0 25px rgba(16, 185, 129, 0.4), 0 10px 30px rgba(0, 0, 0, 0.8);\r\n }\r\n 50% {\r\n box-shadow: 0 0 45px rgba(16, 185, 129, 0.7), 0 10px 40px rgba(0, 0, 0, 0.9);\r\n }\r\n }\r\n\r\n .badge-animation {\r\n animation: badgePulse 2.5s infinite ease-in-out;\r\n }\r\n\r\n .pop-up-enter {\r\n animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n @keyframes slideUpFade {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(40px) scale(0.95);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n\r\n input[type=range] {\r\n accent-color: #00F5D4;\r\n }\r\n\r\n \/* Block 6 Styles *\/\r\n #section-6 {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n\r\n \/* Circular Progress Indicator Styles *\/\r\n #circularProgress {\r\n transition: stroke-dashoffset 0.5s ease-out;\r\n }\r\n\r\n #circularProgressText {\r\n transition: all 0.3s ease;\r\n font-size: 0.875rem;\r\n }\r\n\r\n #circularProgressTime {\r\n transition: all 0.3s ease;\r\n font-size: 0.75rem;\r\n }\r\n\r\n .nordic-card {\r\n background: #FFFFFF;\r\n border: 1px solid #E2E8F0;\r\n box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);\r\n transition: all 0.15s ease;\r\n }\r\n\r\n .nordic-card:hover {\r\n border-color: #059669;\r\n box-shadow: 0 10px 30px -5px rgba(5, 150, 105, 0.1);\r\n transform: translateY(-2px);\r\n }\r\n\r\n @keyframes pulseGlowEmerald {\r\n 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.3); }\r\n 50% { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }\r\n }\r\n\r\n .active-stage-pulse {\r\n animation: pulseGlowEmerald 2s infinite ease-in-out;\r\n }\r\n\r\n .founder-gradient {\r\n background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);\r\n }\r\n\r\n .modal-fade {\r\n transition: opacity 0.15s ease, visibility 0.15s ease;\r\n }\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n \/* Hide hamburger on desktop *\/\r\n .hamburger-btn {\r\n display: none;\r\n }\r\n\r\n \/* Mobile navigation styles *\/\r\n .nav-sidebar {\r\n width: 100%;\r\n height: 60px;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0;\r\n border-left: none;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n z-index: 999;\r\n }\r\n\r\n .nav-items-container {\r\n position: fixed;\r\n top: 60px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n background: rgba(11, 19, 43, 0.98);\r\n backdrop-filter: blur(4px);\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n flex-direction: column;\r\n padding: 24px 20px;\r\n gap: 12px;\r\n z-index: 998;\r\n max-height: calc(100vh - 60px);\r\n overflow-y: auto;\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n visibility: hidden;\r\n transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;\r\n }\r\n\r\n .nav-items-container.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n visibility: visible;\r\n }\r\n\r\n .nav-item {\r\n margin-bottom: 0;\r\n margin-right: 0;\r\n width: 100%;\r\n height: auto;\r\n padding: 16px 20px;\r\n border-radius: 12px;\r\n justify-content: flex-start;\r\n gap: 16px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .nav-item:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.4);\r\n transform: translateX(4px);\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .nav-item:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n .nav-item.active {\r\n background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);\r\n border-color: transparent;\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item.active .tooltip {\r\n color: #0B132B;\r\n font-weight: 600;\r\n }\r\n\r\n .nav-item.active i {\r\n color: #0B132B;\r\n }\r\n\r\n .nav-item .tooltip {\r\n display: block;\r\n font-size: 16px;\r\n color: white;\r\n font-weight: 500;\r\n pointer-events: none;\r\n }\r\n\r\n .nav-item i {\r\n font-size: 20px;\r\n color: #10B981;\r\n width: 24px;\r\n text-align: center;\r\n pointer-events: none;\r\n }\r\n\r\n .hamburger-btn {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n width: 36px;\r\n height: 36px;\r\n cursor: pointer;\r\n z-index: 1002;\r\n padding: 8px;\r\n border-radius: 8px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hamburger-btn:hover {\r\n background: rgba(16, 185, 129, 0.2);\r\n border-color: rgba(16, 185, 129, 0.4);\r\n }\r\n\r\n .hamburger-btn.active {\r\n background: rgba(16, 185, 129, 0.3);\r\n border-color: rgba(16, 185, 129, 0.6);\r\n }\r\n\r\n \/* Show hamburger button on mobile *\/\r\n @media (max-width: 768px) {\r\n .hamburger-btn {\r\n display: flex;\r\n }\r\n }\r\n\r\n .hamburger-line {\r\n width: 100%;\r\n height: 3px;\r\n background: white;\r\n border-radius: 3px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* Show hamburger button on mobile *\/\r\n @media (max-width: 768px) {\r\n .hamburger-btn {\r\n display: flex;\r\n }\r\n\r\n \/* Language switcher mobile styles *\/\r\n .language-switcher {\r\n flex-direction: row;\r\n width: 100%;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .lang-btn {\r\n flex: 1;\r\n height: 36px;\r\n font-size: 14px;\r\n }\r\n\r\n \/* Additional mobile fixes *\/\r\n .presentation-section {\r\n padding-left: 12px;\r\n padding-right: 12px;\r\n }\r\n\r\n \/* Force 100% width for all containers *\/\r\n [class*=\"max-w-\"] {\r\n max-width: 100% !important;\r\n }\r\n\r\n \/* Module buttons full width *\/\r\n .module-btn {\r\n width: 100% !important;\r\n justify-content: center;\r\n }\r\n\r\n \/* Stack buttons on mobile *\/\r\n .flex-col.sm\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* Fix grids to single column *\/\r\n [class*=\"grid-cols-\"] {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n \/* Ensure no horizontal overflow *\/\r\n * {\r\n overflow-x: hidden;\r\n }\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(1) {\r\n transform: rotate(45deg) translate(4px, 4px);\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(2) {\r\n opacity: 0;\r\n }\r\n\r\n .hamburger-btn.active .hamburger-line:nth-child(3) {\r\n transform: rotate(-45deg) translate(4px, -4px);\r\n }\r\n\r\n .mobile-menu-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n backdrop-filter: blur(4px);\r\n z-index: 997;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .mobile-menu-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n \/* Mobile header auto-hide classes *\/\r\n .nav-sidebar.header-hidden {\r\n transform: translateY(-100%);\r\n }\r\n\r\n .nav-sidebar.header-visible {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Progress indicator styles *\/\r\n .progress-badge {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .progress-badge.updated {\r\n animation: progressPulse 0.5s ease;\r\n }\r\n\r\n @keyframes progressPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n \/* Seamless transition styles *\/\r\n .seamless-transition {\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n\r\n .video-transition-out {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n\r\n .video-transition-in {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n \/* Loading state for video transitions *\/\r\n .video-loading {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(15, 23, 42, 0.9);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n }\r\n\r\n .video-loading-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid rgba(16, 185, 129, 0.3);\r\n border-top-color: #10B981;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .presentation-section {\r\n padding-right: 0;\r\n padding-left: 0;\r\n padding-top: 70px;\r\n min-height: auto;\r\n }\r\n\r\n \/* Fix max-width containers for mobile *\/\r\n .max-w-4xl,\r\n .max-w-3xl,\r\n .max-w-5xl,\r\n .max-w-xl,\r\n .max-w-2xl,\r\n .max-w-lg,\r\n .max-w-md,\r\n .max-w-sm {\r\n max-width: 100% !important;\r\n }\r\n\r\n \/* Module buttons mobile fix *\/\r\n .module-btn {\r\n width: 100% !important;\r\n justify-content: center;\r\n }\r\n\r\n \/* Video modal mobile fixes *\/\r\n #unifiedVideoModal > div {\r\n max-width: 95vw !important;\r\n width: 100%;\r\n }\r\n\r\n \/* Stack action buttons on mobile *\/\r\n .flex-col.sm\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* Reduce headings on mobile *\/\r\n h1 {\r\n font-size: 2rem !important;\r\n line-height: 1.1;\r\n }\r\n \r\n h2 {\r\n font-size: 1.5rem !important;\r\n line-height: 1.2;\r\n }\r\n\r\n h3 {\r\n font-size: 1.25rem !important;\r\n }\r\n\r\n \/* Video players *\/\r\n .aspect-video {\r\n min-height: 200px;\r\n }\r\n\r\n \/* Grid fixes for mobile *\/\r\n .grid-cols-1.md\\:grid-cols-3 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.sm\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-2.sm\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.lg\\:grid-cols-5 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.md\\:grid-cols-2 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n\r\n .grid-cols-1.lg\\:grid-cols-4 {\r\n grid-template-columns: 1fr !important;\r\n }\r\n}\r\n\r\n\/* Additional adaptive breakpoints *\/\r\n@media (max-width: 480px) {\r\n .presentation-section {\r\n padding: 60px 12px 20px;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem !important;\r\n }\r\n \r\n h2 {\r\n font-size: 1.5rem !important;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .presentation-section {\r\n padding: 60px 10px 20px;\r\n }\r\n \r\n h1 {\r\n font-size: 1.75rem !important;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav class=\"nav-sidebar\">\r\n \r\n <div class=\"hidden md:flex flex-col items-center space-y-3 w-full\">\r\n \r\n <div class=\"language-switcher\">\r\n <a href=\"https:\/\/link.axi.so\/?page_id=708&lang=ru\" class=\"lang-btn\">RU<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=807&lang=en\" class=\"lang-btn active\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn\">NO<\/a>\r\n <\/div>\r\n <div class=\"nav-item active\" data-section=\"1\" onclick=\"scrollToSection(1)\">\r\n <i class=\"fa-solid fa-home text-lg\"><\/i>\r\n <span class=\"tooltip\">Home<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"2\" onclick=\"scrollToSection(2)\">\r\n <i class=\"fa-solid fa-person-walking-luggage text-lg\"><\/i>\r\n <span class=\"tooltip\">Migrant's Journey<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"3\" onclick=\"scrollToSection(3)\">\r\n <i class=\"fa-solid fa-layer-group text-lg\"><\/i>\r\n <span class=\"tooltip\">Ecosystem<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"4\" onclick=\"scrollToSection(4)\">\r\n <i class=\"fa-solid fa-building-columns text-lg\"><\/i>\r\n <span class=\"tooltip\">Agencies<\/span>\r\n <\/div>\r\n <div class=\"nav-item\" data-section=\"5\" onclick=\"scrollToSection(5)\">\r\n <i class=\"fa-solid fa-video text-lg\"><\/i>\r\n <span class=\"tooltip\">VEI SHOWROOM<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center justify-between w-full px-4\">\r\n \r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"text-xl font-bold font-heading text-white\">VEI<\/span>\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400 animate-pulse\"><\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"hamburger-btn md:hidden\" onclick=\"\r\n const btn = this;\r\n const menu = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n const navSidebar = document.querySelector('.nav-sidebar');\r\n\r\n const isOpening = !menu.classList.contains('active');\r\n\r\n btn.classList.toggle('active');\r\n menu.classList.toggle('active');\r\n overlay.classList.toggle('active');\r\n\r\n if (isOpening) {\r\n document.body.style.overflow = 'hidden';\r\n \/\/ Show header when menu opens\r\n navSidebar.classList.remove('header-hidden');\r\n navSidebar.classList.add('header-visible');\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n \">\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <div class=\"hamburger-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"nav-items-container md:hidden\">\r\n \r\n <div class=\"language-switcher\">\r\n <a href=\"https:\/\/link.axi.so\/?page_id=708&lang=ru\" class=\"lang-btn\">RU<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=807&lang=en\" class=\"lang-btn active\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn\">NO<\/a>\r\n <\/div>\r\n <a href=\"#section-1\" class=\"nav-item active\" data-section=\"1\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(1), 100);\r\n \">\r\n <i class=\"fa-solid fa-home\"><\/i>\r\n <span class=\"tooltip\">Home<\/span>\r\n <\/a>\r\n <a href=\"#section-2\" class=\"nav-item\" data-section=\"2\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(2), 100);\r\n \">\r\n <i class=\"fa-solid fa-person-walking-luggage\"><\/i>\r\n <span class=\"tooltip\">Migrant's Journey<\/span>\r\n <\/a>\r\n <a href=\"#section-3\" class=\"nav-item\" data-section=\"3\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(3), 100);\r\n \">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span class=\"tooltip\">Ecosystem<\/span>\r\n <\/a>\r\n <a href=\"#section-4\" class=\"nav-item\" data-section=\"4\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(4), 100);\r\n \">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <span class=\"tooltip\">Agencies<\/span>\r\n <\/a>\r\n <a href=\"#section-5\" class=\"nav-item\" data-section=\"5\" onclick=\"\r\n event.preventDefault();\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n setTimeout(() => scrollToSection(5), 100);\r\n \">\r\n <i class=\"fa-solid fa-video\"><\/i>\r\n <span class=\"tooltip\">VEI SHOWROOM<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"mobile-menu-overlay\" onclick=\"\r\n document.querySelector('.nav-items-container').classList.remove('active');\r\n document.querySelector('.mobile-menu-overlay').classList.remove('active');\r\n document.querySelector('.hamburger-btn').classList.remove('active');\r\n document.body.style.overflow = '';\r\n \"><\/div>\r\n\r\n \r\n <script src=\"https:\/\/www.youtube.com\/iframe_api\"><\/script>\r\n\r\n \r\n <section id=\"section-1\" class=\"presentation-section w-full pt-[70px] py-10 px-4 sm:px-6 lg:px-12 flex flex-col items-center justify-between relative section-animate\">\r\n <div class=\"glow-bg\"><\/div>\r\n \r\n <div class=\"w-full max-w-4xl mx-auto flex flex-col items-center relative z-10\">\r\n \r\n <div class=\"w-full flex items-center justify-between border-b border-white\/10 pb-4 mb-8\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono tracking-widest text-emerald-400 uppercase font-semibold\">VEI Ecosystem \/\/ Screen 01<\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"px-2.5 py-1 rounded-full bg-emerald-500\/10 border border-emerald-500\/20 text-emerald-300 text-xs font-mono\">\r\n <i class=\"fa-solid fa-signal mr-1.5 text-emerald-400\"><\/i>Live Demo Mode\r\n <\/span>\r\n <span class=\"text-xs text-slate-400 font-mono hidden sm:inline-block\">Nordic Integration Platform<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"text-center space-y-4 mb-10\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-white\/5 border border-white\/10 text-slate-300 text-xs font-mono mb-2\">\r\n <i class=\"fa-solid fa-flag text-emerald-400\"><\/i>\r\n <span>Norway Integration Innovation<\/span>\r\n <\/div>\r\n <h1 class=\"font-heading text-6xl sm:text-7xl lg:text-8xl font-extrabold tracking-tight text-white leading-tight drop-shadow-lg\">\r\n VEI\r\n <\/h1>\r\n <p class=\"text-xl sm:text-2xl font-medium text-emerald-400 font-heading max-w-2xl mx-auto leading-relaxed\">\r\n Concept of a Unified Digital Integration Path in Norway\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center justify-center mb-12 relative group cursor-pointer\" onclick=\"openUnifiedVideoModal(1)\">\r\n <div class=\"absolute inset-0 bg-emerald-500\/25 rounded-full blur-xl group-hover:bg-emerald-500\/45 transition-all duration-300\"><\/div>\r\n <button type=\"button\" aria-label=\"Watch the presentation\" class=\"hero-play-btn relative z-10 w-28 h-28 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-emerald-500\/30 border-4 border-slate-900 group-hover:scale-105 transition-transform duration-300\">\r\n <i class=\"fa-solid fa-play text-4xl sm:text-5xl text-slate-950 ml-2 group-hover:scale-110 transition-transform\"><\/i>\r\n <\/button>\r\n <span class=\"relative z-10 mt-6 text-lg sm:text-xl font-bold text-white tracking-wide group-hover:text-emerald-300 transition-colors flex items-center space-x-2\">\r\n <span>Watch the presentation with ALEX<\/span>\r\n <i class=\"fa-solid fa-arrow-right text-sm text-emerald-400 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/span>\r\n <span class=\"relative z-10 mt-1.5 text-xs text-slate-400 font-mono tracking-widest uppercase bg-slate-900\/80 px-3 py-1 rounded-full border border-white\/5\">\r\n <i class=\"fa-solid fa-circle-play mr-1 text-emerald-400\"><\/i> Voiced Video \u2022 16:9 HD\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <p class=\"text-slate-300 text-sm sm:text-base leading-relaxed text-center max-w-3xl mb-10\">\r\n A project born from personal experience. A single ecosystem of <span class=\"text-white font-semibold underline decoration-emerald-500 decoration-2\">5 modules<\/span> that evolves daily with every real step of adaptation.\r\n <\/p>\r\n\r\n \r\n <div class=\"w-full flex flex-col items-center mb-10\">\r\n <div class=\"flex flex-wrap justify-center gap-2 sm:gap-3 mb-4\">\r\n <button id=\"b1-btn-link\" onclick=\"highlightModuleB1('link')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-300 text-xs sm:text-sm hover:bg-emerald-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\r\n <span class=\"font-medium\">LINK (Daily Life)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-commune\" onclick=\"highlightModuleB1('commune')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-red-500\/10 border border-red-500\/30 text-red-300 text-xs sm:text-sm hover:bg-red-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-red-500\"><\/span>\r\n <span class=\"font-medium\">COMMUNE (City)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-scan\" onclick=\"highlightModuleB1('scan')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-purple-500\/10 border border-purple-500\/30 text-purple-300 text-xs sm:text-sm hover:bg-purple-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-purple-500\"><\/span>\r\n <span class=\"font-medium\">SCAN (AI Vision)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-translate\" onclick=\"highlightModuleB1('translate')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs sm:text-sm hover:bg-cyan-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-cyan-500\"><\/span>\r\n <span class=\"font-medium\">TRANSLATE (Translation)<\/span>\r\n <\/button>\r\n <button id=\"b1-btn-sprak\" onclick=\"highlightModuleB1('sprak')\" class=\"module-btn flex items-center space-x-2 px-4 py-2.5 rounded-full bg-orange-500\/10 border border-orange-500\/30 text-orange-300 text-xs sm:text-sm hover:bg-orange-500\/20 transition-all shadow-md active:scale-95\">\r\n <span class=\"w-2 h-2 rounded-full bg-orange-500\"><\/span>\r\n <span class=\"font-medium\">SPR\u00c5K (Language)<\/span>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n <div id=\"b1-moduleTooltip\" class=\"w-full max-w-xl p-4 sm:p-5 rounded-2xl bg-white\/5 border border-white\/10 text-center text-sm text-slate-300 transition-all duration-300 shadow-lg\">\r\n <span class=\"text-emerald-400 font-semibold\"><i class=\"fa-solid fa-arrow-pointer mr-2\"><\/i>Click on any module<\/span> for details (LINK Daily Life & Mottak, COMMUNE NAV, etc.)\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 pt-8 border-t border-white\/10\">\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-amber-400\/10 border border-amber-400\/20 flex items-center justify-center text-amber-400 text-xl\">\r\n <i class=\"fa-solid fa-lightbulb\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Real-Experience Design<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Created from within the real process of integration and life in Norway<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-emerald-400\/10 border border-emerald-400\/20 flex items-center justify-center text-emerald-400 text-xl\">\r\n <i class=\"fa-solid fa-arrows-spin\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Infinite LTV<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Seamless context evolution and support for 2+ years<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-5 rounded-2xl flex flex-col items-center text-center space-y-2.5 hover:-translate-y-1 transition-transform\">\r\n <div class=\"w-12 h-12 rounded-xl bg-cyan-400\/10 border border-cyan-400\/20 flex items-center justify-center text-cyan-400 text-xl\">\r\n <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n <\/div>\r\n <h4 class=\"text-sm font-semibold text-white font-heading\">Privacy-First (GDPR)<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Secure architecture standardized for municipalities<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b1-speakerSection\" class=\"w-full max-w-3xl glass-panel rounded-2xl overflow-hidden mb-10 shadow-lg border border-white\/10\">\r\n <button onclick=\"toggleSpeechB1()\" class=\"w-full p-5 flex items-center justify-between text-left hover:bg-white\/5 transition-all group cursor-pointer\">\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"w-12 h-12 rounded-full bg-emerald-500\/15 border border-emerald-400\/30 flex items-center justify-center text-emerald-400 shrink-0 group-hover:scale-105 transition-transform\">\r\n <i class=\"fa-solid fa-microphone-lines text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"text-xs font-mono font-bold text-emerald-400 uppercase tracking-wider\">SPEAKER'S SPEECH (ALEX)<\/span>\r\n <div class=\"flex items-center space-x-1 ml-2\">\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <span class=\"sound-bar\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <h3 class=\"text-sm sm:text-base font-semibold text-white font-heading mt-1\">\r\n \u00abWhat you see on the screen is VEI (Norwegian for \"Path\")...\u00bb\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div id=\"b1-speechChevron\" class=\"w-9 h-9 rounded-full bg-white\/5 border border-white\/10 flex items-center justify-center text-slate-300 transition-transform duration-300 -rotate-90 ml-4 shrink-0 group-hover:bg-white\/10\">\r\n <i class=\"fa-solid fa-chevron-down text-sm\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n \r\n <div id=\"b1-speechContent\" class=\"p-6 text-slate-300 text-sm leading-relaxed space-y-4 border-t border-white\/10 bg-slate-950\/60 hidden\">\r\n <p class=\"text-emerald-300 font-semibold text-base\">\u00abHello! My name is ALEX.<\/p>\r\n <p>What you see on the screen is <strong>VEI<\/strong> (Norwegian for \"Path\"). It is the concept of a national digital integration ecosystem.<\/p>\r\n <p>This project is not an abstract idea from a development office. I developed this concept personally, going through the adaptation path in Norway step by step. Every day, facing real barriers \u2014 in the camp, with documents, in the store, in communication with agencies \u2014 I strengthen and refine this architecture.<\/p>\r\n <p>This is an inside look at how to make integration effective. <strong>VEI takes a person by the hand from the first minutes in the reception center<\/strong> and guides them along the entire path: helping them settle into a new municipality, understand Norwegian documents, translate texts, learn the language, and find a job.<\/p>\r\n <div class=\"p-4 rounded-xl bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-200\">\r\n <i class=\"fa-solid fa-quote-left mr-2 text-emerald-400 text-lg\"><\/i>\r\n Having conducted the analysis, I can confidently say: <strong>there is no analog of such an integration system and application in any country in the world.<\/strong>\r\n <\/div>\r\n <p>Norway can be the first to create an entirely new product for millions of refugees, displaced persons, and migrants. We can develop a new approach to integration that simplifies a person's journey in a new country. It is a stack of new technologies, artificial intelligence, and basic human needs.<\/p>\r\n <p class=\"text-white font-medium italic pt-3 border-t border-white\/10 mt-2\">\r\n Let's see how my personal experience turned into a systemic solution for the entire state.\u00bb\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b1-nextSlideBanner\" class=\"w-full max-w-3xl mb-8\">\r\n <button onclick=\"scrollToSection(2)\" class=\"w-full py-4 px-6 rounded-2xl bg-gradient-to-r from-emerald-500 via-teal-400 to-cyan-500 text-slate-950 font-bold text-base hover:brightness-110 transition-all flex items-center justify-center space-x-3 shadow-lg shadow-emerald-500\/20 cursor-pointer\">\r\n <span>Proceed to the next block<\/span>\r\n <i class=\"fa-solid fa-arrow-down animate-bounce\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div id=\"textModal4\" class=\"fixed inset-0 z-50 bg-slate-950\/95 backdrop-blur-md hidden flex items-center justify-center p-4 transition-all duration-300\">\r\n <div class=\"relative w-full max-w-4xl max-h-[90vh] bg-white rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col my-auto text-modal-animate\">\r\n \r\n \r\n <div class=\"w-full p-4 sm:p-6 flex items-center justify-between border-b border-slate-200 bg-slate-50 shrink-0\">\r\n <div class=\"flex items-center space-x-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-sky-100 text-sky-600 flex items-center justify-center text-lg\">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-sm sm:text-base font-black text-slate-900\">VEI Value for Agencies<\/h3>\r\n <p class=\"text-xs text-slate-500 font-mono\">GDPR, Data-Driven Analytics, Security<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeTextModal4()\" title=\"Close\" class=\"w-10 h-10 rounded-full bg-slate-200 hover:bg-red-500 hover:text-white text-slate-600 flex items-center justify-center transition-colors cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 overflow-y-auto p-6 sm:p-8 space-y-6\">\r\n <div class=\"prose prose-slate max-w-none\">\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n Now let's talk about the colossal direct value VEI provides to government structures and agencies themselves.\r\n <\/p>\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n When we communicate with officials and service executives, the first question is always safety and control. And VEI is designed to close these questions 100%.\r\n <\/p>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-rose-50 border-2 border-rose-200\">\r\n <h4 class=\"text-lg font-black text-rose-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-rose-500 text-white flex items-center justify-center text-sm mr-3\">1<\/span>\r\n Absolute GDPR Security and Protected Contour\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Instead of people leaking official UDI or NAV letters into third-party American neural networks, VEI creates a local closed loop for data processing. The letter scanner and product recognizer work inside the system. Citizens' personal data, case numbers, and faces of passers-by do not leave the secure infrastructure. We completely eliminate the risk of personal data leaks!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-sky-50 border-2 border-sky-200\">\r\n <h4 class=\"text-lg font-black text-sky-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-sky-500 text-white flex items-center justify-center text-sm mr-3\">2<\/span>\r\n Verified Communication Channel and Protection from Information Chaos\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Today, migrants are drowning in a flow of fakes and speculation from unofficial chats in social networks. When VEI receives official status, agencies \u2014 UDI, NAV, IMDi, and Municipality Administrations \u2014 get a direct channel of communication with residents. The agency sends an official PUSH notification. A person sees that it is 100% reliable information from the state, and goes to your official website in one click. Chaos and misinformation instantly disappear.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-indigo-50 border-2 border-indigo-200\">\r\n <h4 class=\"text-lg font-black text-indigo-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-indigo-500 text-white flex items-center justify-center text-sm mr-3\">3<\/span>\r\n Honest Data-Driven Analytics Instead of Guesswork\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Currently, agencies often only \"guess\" what problems refugees face. VEI provides an anonymized dashboard and real click analytics. You can see in real time what topics concern residents right now \u2014 medicine, transport, municipality rules, or document filling.\r\n <\/p>\r\n <p class=\"text-slate-700 leading-relaxed mt-3\">\r\n Moreover, you see the dynamics! If analytics show that a group of people started using the TRANSLATE module 60% less after 6 months, you receive not a dry report, but mathematical confirmation that the language program in the municipality really works!\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"my-6 p-5 rounded-2xl bg-emerald-50 border-2 border-emerald-200\">\r\n <h4 class=\"text-lg font-black text-emerald-800 mb-3 flex items-center\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500 text-white flex items-center justify-center text-sm mr-3\">4<\/span>\r\n Flexible Architecture (Co-Development)\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n VEI is not a static program. We are ready to work in close contact with agencies. If UDI, NAV, or a specific municipality needs a specific module or integration with their databases \u2014 we will sit down together, work out the logic, and create it for the tasks of a specific agency.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full p-4 sm:p-6 border-t border-slate-200 bg-slate-50 shrink-0\">\r\n <button onclick=\"closeTextModal4()\" class=\"w-full py-3.5 rounded-xl bg-gradient-to-r from-sky-500 via-teal-400 to-emerald-400 text-slate-950 font-black text-sm hover:scale-105 transition-all shadow-lg flex items-center justify-center space-x-2 cursor-pointer\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span>Close Text<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"unifiedVideoModal\" class=\"fixed inset-0 z-50 bg-slate-950\/95 backdrop-blur-md hidden flex items-center justify-center p-2 sm:p-4 transition-all duration-300\">\r\n \r\n <div class=\"relative w-full max-w-[90rem] max-h-[96vh] bg-slate-900 rounded-2xl sm:rounded-3xl border border-emerald-500\/40 shadow-xl overflow-hidden flex flex-col lg:flex-row modal-animate my-auto\">\r\n \r\n \r\n <div class=\"flex-1 flex flex-col min-w-0\">\r\n \r\n <div class=\"w-full p-3 sm:p-5 flex items-center justify-between border-b border-white\/10 bg-slate-950 shrink-0\">\r\n <div class=\"flex items-center space-x-2 sm:space-x-3\">\r\n <span class=\"w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-full bg-emerald-400 animate-pulse\"><\/span>\r\n <span id=\"unifiedModalTitle\" class=\"text-[11px] sm:text-sm font-mono font-bold text-emerald-400 tracking-wider uppercase\">\r\n VEI Presentation \u2014 ALEX\r\n <\/span>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <button onclick=\"triggerEndVideoTest()\" class=\"text-[10px] font-mono text-slate-400 hover:text-emerald-400 underline cursor-pointer mr-2 hidden sm:block\">\r\n [Test Final]\r\n <\/button>\r\n <a id=\"unifiedYoutubeLink\" href=\"https:\/\/youtu.be\/dfwJdYi3z0U\" target=\"_blank\" class=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-lg bg-red-600\/20 border border-red-500\/30 text-red-300 hover:bg-red-600 hover:text-white text-xs font-semibold transition-all flex items-center space-x-1.5\" title=\"Open directly on YouTube\">\r\n <i class=\"fa-brands fa-youtube text-sm\"><\/i>\r\n <span class=\"hidden sm:inline\">YouTube<\/span>\r\n <\/a>\r\n <button onclick=\"closeUnifiedVideoModal()\" title=\"Close video\" class=\"w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-white\/5 hover:bg-red-500\/80 text-slate-300 hover:text-white flex items-center justify-center transition-colors cursor-pointer\">\r\n <i class=\"fa-solid fa-xmark text-lg sm:text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-video bg-black flex items-center justify-center overflow-hidden shrink min-h-0\">\r\n \r\n <div id=\"unifiedVideoIframeWrapper\" class=\"w-full h-full border-0\"><\/div>\r\n\r\n \r\n <div id=\"unifiedEndSlideOverlay\" class=\"absolute inset-0 z-40 bg-slate-950\/95 backdrop-blur-md hidden flex flex-col items-center justify-center p-6 text-center space-y-4 overlay-pop-in\">\r\n \r\n <button onclick=\"event.stopPropagation(); closeUnifiedEndOverlay();\" class=\"absolute top-4 right-4 w-8 h-8 rounded-full bg-white\/10 hover:bg-red-500\/80 text-slate-300 hover:text-white flex items-center justify-center transition-colors cursor-pointer z-50\">\r\n <i class=\"fa-solid fa-xmark text-lg\"><\/i>\r\n <\/button>\r\n \r\n <div class=\"w-14 h-14 rounded-full bg-emerald-500\/20 border-2 border-emerald-400 flex items-center justify-center text-emerald-400 text-2xl shadow-lg animate-bounce\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <\/div>\r\n <div class=\"space-y-1\">\r\n <span class=\"text-xs font-mono text-emerald-400 uppercase tracking-widest font-extrabold\">Video completed<\/span>\r\n <h4 id=\"unifiedEndTitle\" class=\"xl sm:text-2xl font-heading font-black text-white\">Analysis completed!<\/h4>\r\n <\/div>\r\n <p id=\"unifiedEndDesc\" class=\"text-xs sm:text-sm text-slate-300 max-w-sm leading-relaxed\">\r\n You have watched the video. Click the button below to proceed to the next block.\r\n <\/p>\r\n <button id=\"unifiedNextBtn\" onclick=\"event.stopPropagation(); closeUnifiedEndOverlay(); currentSection === 5 ? handleSection5Completion() : goToNextSection();\" class=\"px-8 py-4 rounded-xl bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 text-slate-950 font-black text-sm sm:text-base hover:scale-105 transition-all shadow-xl flex items-center space-x-3 cursor-pointer ring-4 ring-emerald-500\/40\">\r\n <span id=\"unifiedNextBtnText\">PROCEED TO THE NEXT BLOCK<\/span>\r\n <i class=\"fa-solid fa-arrow-down text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full p-4 sm:p-6 bg-slate-950 border-t-2 border-emerald-500\/30 flex flex-col sm:flex-row items-center justify-between gap-4 shrink-0 relative overflow-hidden transition-colors duration-500\">\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-emerald-500\/5 to-cyan-500\/5 pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center sm:items-start text-center sm:text-left space-y-1\">\r\n <h4 id=\"unifiedActionPanelTitle\" class=\"text-white font-bold text-sm sm:text-base font-heading transition-colors\">Watch the presentation<\/h4>\r\n <p id=\"unifiedActionPanelDesc\" class=\"text-xs text-slate-400 max-w-md transition-colors\">\r\n Learn about the VEI concept. After watching, proceed to the next block.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <button id=\"unifiedMainNextBtn\" onclick=\"goToNextSection();\" class=\"relative z-10 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-3.5 rounded-xl sm:rounded-2xl bg-white\/5 border border-white\/10 hover:bg-white\/10 text-slate-300 font-extrabold text-sm sm:text-base transition-all flex items-center justify-center space-x-2 shrink-0 cursor-pointer\">\r\n <span id=\"unifiedMainNextBtnText\">PROCEED FURTHER<\/span>\r\n <i class=\"fa-solid fa-arrow-down\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full lg:w-[22rem] bg-slate-950 border-t lg:border-t-0 lg:border-l border-white\/10 shrink-0 flex flex-col overflow-y-auto hidden md:flex custom-scrollbar relative z-10\">\r\n <div class=\"p-5 border-b border-white\/10 sticky top-0 bg-slate-950 z-20 shadow-md\">\r\n <div class=\"flex items-center justify-between mb-1\">\r\n <h3 class=\"text-sm font-heading font-black text-white\">Navigation<\/h3>\r\n <span id=\"unifiedProgressIndicator\" class=\"text-xs font-mono text-emerald-400 bg-emerald-950\/50 px-2 py-0.5 rounded-full border border-emerald-500\/30\">\r\n 0\/4 viewed\r\n <\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Switching between presentation blocks<\/p>\r\n <\/div>\r\n <div class=\"p-4 space-y-2\" id=\"unifiedNavContainer\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 flex flex-col items-center justify-center border-t border-white\/10\">\r\n <div class=\"relative w-24 h-24\">\r\n <svg class=\"w-full h-full transform -rotate-90\" viewBox=\"0 0 100 100\">\r\n \r\n <circle\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"45\"\r\n fill=\"none\"\r\n stroke=\"#FBBF24\"\r\n stroke-width=\"8\"\r\n \/>\r\n \r\n <circle\r\n id=\"circularProgress\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"45\"\r\n fill=\"none\"\r\n stroke=\"#3B82F6\"\r\n stroke-width=\"8\"\r\n stroke-dasharray=\"283 283\"\r\n stroke-dashoffset=\"283\"\r\n stroke-linecap=\"round\"\r\n \/>\r\n <\/svg>\r\n <div class=\"absolute inset-0 flex flex-col items-center justify-center\">\r\n <span id=\"circularProgressText\" class=\"text-sm font-bold text-white leading-tight\">0%<\/span>\r\n <span id=\"circularProgressTime\" class=\"text-xs text-slate-300 leading-tight mt-1\">15 min<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400 mt-2 text-center\">Viewing progress<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"section-2\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-slate-200 pb-3 mb-6\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500\"><\/span>\r\n <span class=\"text-xs font-mono font-semibold tracking-wider text-emerald-700 uppercase\">VEI Ecosystem \/\/ Screen 02<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-500 font-mono\">Nordic Integration Platform \u2014 Human Path<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto space-y-2\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-mono font-semibold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-person-walking-luggage text-emerald-600\"><\/i>\r\n <span>Second Screen: User Journey & Pain Points<\/span>\r\n <\/div>\r\n \r\n <h2 class=\"font-heading text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-tight\">\r\n The real human journey: from entering the country to integration\r\n <\/h2>\r\n \r\n <p class=\"text-slate-600 text-sm max-w-2xl mx-auto\">\r\n What critical barriers does a migrant face in Norway and how does the VEI system solve these pain points at every stage?\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 text-white rounded-2xl p-4 sm:p-6 border border-slate-800 shadow-md relative overflow-hidden\">\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 items-center relative z-10\">\r\n \r\n \r\n <div class=\"lg:col-span-7 flex flex-col space-y-2\">\r\n \r\n <div class=\"flex items-center justify-between px-1\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400\"><\/span>\r\n <span class=\"text-xs font-mono font-semibold text-emerald-400 uppercase tracking-wider\">\r\n Main Video Commentary\r\n <\/span>\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-slate-300 bg-slate-800\/80 px-2.5 py-0.5 rounded border border-slate-700\">\r\n <i class=\"fa-solid fa-play text-emerald-400 mr-1\"><\/i> ALEX reveals the details\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full aspect-video rounded-2xl bg-black border-2 border-emerald-500\/60 overflow-hidden shadow-lg group cursor-pointer\" onclick=\"openUnifiedVideoModal(2)\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-900\/90 to-slate-900\/40 flex flex-col items-center justify-center p-4 text-center group-hover:scale-[1.01] transition-transform\">\r\n \r\n <div class=\"w-16 h-16 sm:w-18 sm:h-18 rounded-full bg-emerald-500 text-slate-950 flex items-center justify-center text-xl sm:text-2xl shadow-md mb-3 group-hover:scale-105 transition-transform\">\r\n <i class=\"fa-solid fa-play ml-1\"><\/i>\r\n <\/div>\r\n\r\n <div class=\"space-y-1\">\r\n <h3 class=\"text-lg sm:text-xl font-heading font-black text-white\">\r\n Watch the pain points analysis by ALEX\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-sm\">\r\n Click to open full-screen player with navigation\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mt-3 px-3.5 py-1 rounded-full bg-emerald-500\/20 border border-emerald-400\/50 text-emerald-300 text-xs font-bold\">\r\n <i class=\"fa-solid fa-circle-play mr-1\"><\/i> Open player\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center justify-between text-xs text-slate-400 px-1 pt-1\">\r\n <span class=\"flex items-center space-x-2 text-slate-300 font-medium\">\r\n <i class=\"fa-solid fa-circle-info text-emerald-400\"><\/i>\r\n <span>Click on the video to open the player<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"lg:col-span-5 flex flex-col justify-between space-y-4\">\r\n \r\n <div class=\"flex items-center space-x-3 pb-3 border-b border-slate-800\">\r\n <div class=\"w-11 h-11 rounded-full bg-gradient-to-tr from-emerald-500 to-cyan-400 text-slate-950 flex items-center justify-center font-heading font-black text-xs shrink-0 shadow-md\">\r\n ALEX\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-base font-bold text-white font-heading\">\r\n \ud83c\udf99\ufe0f Speaker's Speech (ALEX)\r\n <\/h4>\r\n <p class=\"text-xs text-emerald-400 font-mono\">\r\n VEI Founder \u2022 Personal experience in Norway\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-950\/80 p-4 rounded-2xl border border-slate-800 max-h-[230px] overflow-y-auto custom-scrollbar space-y-3 text-xs sm:text-sm text-slate-300 leading-relaxed shadow-inner\">\r\n <p class=\"text-emerald-300 font-bold\">\r\n \u26aa SCREEN 2: Migrant's Journey and Critical Pain Points\r\n <\/p>\r\n <p>\r\n \u00abLet's analyze in detail the real journey of a person arriving in Norway, and honestly look at the critical problems they face every day.\r\n <\/p>\r\n <p>\r\n The entire adaptation process consists of 4 global stages: well, actually 5, since the reception center and Mottak are two different lives, but that's beside the point.\r\n <\/p>\r\n <p>\r\n The first stage is the primary reception center R\u00c5DE and subsequent placement in a Mottak.\r\n <\/p>\r\n <p>\r\n The second is receiving documents and moving to a municipality (Kommune).\r\n <\/p>\r\n <p>\r\n The third is everyday integration in the new city.\r\n <\/p>\r\n <p>\r\n And the fourth is studying, job hunting, well, a completely independent life.\r\n <\/p>\r\n <p>\r\n Now let's see what happens in practice. And here arises a colossal, dangerous problem that many try to keep quiet about!\r\n <\/p>\r\n <p>\r\n You see, today people simply don't have a legal and safe tool. What do they do out of desperation? They take their phone, take pictures of an official letter with personal data \u2014 DUF numbers, personal addresses, diagnoses \u2014 and upload these pictures to public neural networks like ChatGPT or Gemini! This is the most direct, severe violation of personal data security. Personal information of residents flies off to external third-party servers.\r\n <\/p>\r\n <p>\r\n When a person gets to R\u00c5DE or Mottak, they find themselves under severe stress. We talked about all this a few months ago when I introduced you to the first LINK module. Now I will speak about the VEI application as a modular system because each module is a separate organism of a whole system that I am proposing to create.\r\n <\/p>\r\n <p>\r\n But the most interesting part begins later, when a person moves to a municipality. Paper correspondence from UDI, NAV, the Tax Administration, the municipality or the hospital starts arriving in their mailbox. Although we face this already in Mottak. These are official letters with legal terms and Norwegian context. The person doesn't understand the text, starts to panic, and is afraid of missing a critical deadline or appointment.\r\n <\/p>\r\n <p>\r\n The same thing happens in supermarkets and in the city: a person doesn't understand the product ingredients, takes a picture of the packaging in the store or a sign on the city street, random people and passers-by get into the frame, and these photos fly onto the Internet again just to find out if there's an allergen there or what the sign says. I have observed this more than once and have done it myself.\r\n <\/p>\r\n <p>\r\n But this cannot continue forever! It is incredibly dangerous for the security of citizens and the state. And when surrounding people see this, they cautiously bypass a person with a camera, it's noticeable. But people have no alternative!\r\n <\/p>\r\n <p>\r\n I won't even talk here about all the little things I see every day, I just want to say that there is a lot of work to be done regarding displaced persons and the world around us. Well, even just taking into account that it's unclear where to get reliable information today... social networks, fake videos and huge information noise disorient a person, for example, a new law comes out, it turns out that a person learns about it only where?? in social networks through broken telephone or someone told them... and when a person starts to figure it out, they get lost, why not inform people in the same application as VEI about news and new laws from different agencies so people will receive official notifications directly in the application.\r\n <\/p>\r\n <p>\r\n As a result, the migrant spends hours independently searching for information on the Internet, reads dubious groups on social networks and listens to rumors in chats. And agencies \u2014 UDI, NAV, IMDi and Municipalities \u2014 spend gigantic human resources on correcting errors in documents and repeated appeals.\r\n <\/p>\r\n <p>\r\n On the following screens I will try to show you how VEI solves this problem systematically and radically changes the logic of interaction between the individual and the state\u00bb. I will also show the 2nd part of the video where a family moves from a Mottak and I will end my monologue with you today on this. Move on to the next block.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3 rounded-xl bg-slate-800\/80 border border-slate-700 flex items-center justify-between text-xs\">\r\n <span class=\"text-slate-300\">\r\n Explore the details of the pain points below\r\n <\/span>\r\n <button onclick=\"scrollToAccordionB2()\" class=\"text-emerald-400 font-bold hover:underline\">\r\n To the stages <i class=\"fa-solid fa-arrow-down ml-1\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-timeline-section\" class=\"relative pt-4\">\r\n <div class=\"relative max-w-4xl mx-auto\">\r\n \r\n <div class=\"absolute top-5 left-0 w-full h-1 bg-slate-200 -translate-y-1\/2 rounded-full z-0\"><\/div>\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3 relative z-10\">\r\n \r\n \r\n <button onclick=\"activateStageB2(1)\" id=\"b2-tb-step-1\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-emerald-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 1\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-emerald-700\">Stage 1<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-emerald-600\">R\u00c5DE & Mottak<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(2)\" id=\"b2-tb-step-2\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-rose-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 2\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-rose-700\">Stage 2<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-rose-600\">Municipality<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(3)\" id=\"b2-tb-step-3\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 3\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-purple-700\">Stage 3<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-purple-600\">Daily Life & GDPR<\/span>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"activateStageB2(4)\" id=\"b2-tb-step-4\" class=\"stage-nav-btn group flex flex-col items-center text-center cursor-pointer transition-all\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-heading font-bold text-sm shadow-md group-hover:scale-105 transition-transform ring-2 ring-white\">\r\n 4\r\n <\/div>\r\n <span class=\"mt-1.5 text-[10px] font-mono font-semibold uppercase tracking-wider text-amber-700\">Stage 4<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-amber-600\">Work<\/span>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-4 max-w-4xl mx-auto pt-2\">\r\n \r\n \r\n <div id=\"b2-card-stage-1\" class=\"stage-accordion-box bg-white border border-emerald-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(1)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-emerald-50\/40 hover:bg-emerald-50 transition-colors cursor-pointer border-b border-emerald-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 1\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-emerald-700 uppercase tracking-wider\">\ud83d\udccd STAGE 1 \/\/ Mottak<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Primary reception center (R\u00c5DE) and moving to a Mottak\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe2 VEI LINK\r\n <\/span>\r\n <i id=\"b2-chevron-stage-1\" class=\"fa-solid fa-chevron-down text-emerald-600 text-sm transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-1\" class=\"p-5 sm:p-6 bg-white space-y-4\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-emerald-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Initial shock:<\/strong> daily chaos, stress, language barrier with the camp reception.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-emerald-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Information blindness:<\/strong> ignorance of internal camp rules, laundry schedules, warehouse, and submitting applications.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-emerald-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-emerald-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n The <strong>LINK module<\/strong> works \u2014 an autonomous camp guide answering 90% of household questions 24\/7 and relieving the workload of reception staff.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-2\" class=\"stage-accordion-box bg-white border border-rose-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(2)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-rose-50\/40 hover:bg-rose-50 transition-colors cursor-pointer border-b border-rose-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-rose-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 2\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-rose-700 uppercase tracking-wider\">\ud83d\udccd STAGE 2 \/\/ Kommune<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Settlement and Moving to a Municipality (Kommune)\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-rose-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udd34 VEI COMMUNE\r\n <\/span>\r\n <i id=\"b2-chevron-stage-2\" class=\"fa-solid fa-chevron-down text-rose-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-2\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-rose-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Culture shock:<\/strong> new city, unfamiliar environment, lack of connections.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-rose-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Bureaucratic chaos:<\/strong> registration in the municipality, schools, NAV \u2014 different systems, no connection.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-rose-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-rose-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>COMMUNE<\/strong> module \u2014 a unified municipality database with navigation for all services and automated reminders.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-3\" class=\"stage-accordion-box bg-white border border-purple-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(3)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-purple-50\/40 hover:bg-purple-50 transition-colors cursor-pointer border-b border-purple-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-purple-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 3\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-purple-700 uppercase tracking-wider\">\ud83d\udccd STAGE 3 \/\/ GDPR<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Everyday adaptation and the Danger of data leaks\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-purple-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe3 SCAN + TRANSLATE\r\n <\/span>\r\n <i id=\"b2-chevron-stage-3\" class=\"fa-solid fa-chevron-down text-purple-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-3\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-purple-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Letters from NAV:<\/strong> official letters in Norwegian that are frightening and incomprehensible.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-purple-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">GDPR risk:<\/strong> people use unsecure apps to translate documents.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-purple-700 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-purple-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-amber-300 text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>SCAN<\/strong> and <strong>TRANSLATE<\/strong> modules \u2014 secure scanning and context-aware translation within the protected VEI ecosystem.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b2-card-stage-4\" class=\"stage-accordion-box bg-white border border-amber-400 rounded-xl overflow-hidden card-shadow-stiff transition-all duration-300\">\r\n <button onclick=\"activateStageB2(4)\" class=\"w-full p-3 sm:p-4 flex items-center justify-between text-left bg-amber-50\/40 hover:bg-amber-50 transition-colors cursor-pointer border-b border-amber-100\">\r\n <div class=\"flex items-center space-x-3\">\r\n <span class=\"w-8 h-8 rounded-lg bg-amber-600 text-white flex items-center justify-center font-bold text-sm shrink-0\">\r\n 4\r\n <\/span>\r\n <div>\r\n <span class=\"text-[10px] font-mono font-semibold text-amber-700 uppercase tracking-wider\">\ud83d\udccd STAGE 4 \/\/ Jobb<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Employment and Integration into society\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-600 text-white text-[10px] font-semibold\">\r\n \ud83d\udfe0 SPR\u00c5K + CV\r\n <\/span>\r\n <i id=\"b2-chevron-stage-4\" class=\"fa-solid fa-chevron-down text-amber-600 text-sm transition-transform duration-300 -rotate-90\"><\/i>\r\n <\/div>\r\n <\/button>\r\n\r\n <div id=\"b2-content-stage-4\" class=\"p-5 sm:p-6 bg-white space-y-4 hidden\">\r\n <div class=\"space-y-3\">\r\n <h4 class=\"text-xs font-mono font-bold text-slate-500 uppercase tracking-wider\">Barriers and human pain points:<\/h4>\r\n <ul class=\"space-y-2.5 text-slate-800 text-sm font-medium\">\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-amber-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Language barrier:<\/strong> insufficient level of Norwegian for work.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-3 p-2.5 rounded-lg bg-slate-50 border border-slate-200\">\r\n <i class=\"fa-solid fa-circle-exclamation text-amber-600 text-base mt-0.5 shrink-0\"><\/i>\r\n <span><strong class=\"text-slate-950 font-extrabold\">Ignorance of standards:<\/strong> how to write a CV according to Norwegian standards.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-xl bg-amber-600 text-white shadow-md space-y-1\">\r\n <div class=\"text-xs font-mono font-black uppercase tracking-wider text-amber-200 flex items-center gap-1.5\">\r\n <i class=\"fa-solid fa-lightbulb text-white text-sm\"><\/i> VEI System Solution:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>SPR\u00c5K<\/strong> module \u2014 AI tutor for language practice, and CV generator following Norwegian standards.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-3\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-[#0B132B] section-animate\">\r\n \r\n \r\n <div class=\"glow-emerald-spot\"><\/div>\r\n <div class=\"glow-cyan-spot\"><\/div>\r\n\r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-white\/10 pb-3 mb-6\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-cyan-400 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono font-bold tracking-widest text-cyan-400 uppercase\">VEI Ecosystem \/\/ Screen 03<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-400 font-mono hidden sm:inline-block\">The Solution & Lifecycle (LTV 0\u20136m $\\rightarrow$ 2+ yrs)<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-8\">\r\n \r\n \r\n <div class=\"text-center max-w-4xl mx-auto space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-cyan-500\/10 border border-cyan-500\/30 text-cyan-300 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-layer-group text-cyan-400\"><\/i>\r\n <span>Third Screen: VEI Ecosystem and LTV Strategy<\/span>\r\n <\/div>\r\n \r\n <h2 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight leading-tight\">\r\n VEI Ecosystem: From a local guide to a national conductor\r\n <\/h2>\r\n \r\n <p class=\"text-slate-300 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n Increasing the app's lifecycle from <strong>0\u20136 months<\/strong> to <strong>2+ years<\/strong>, maintaining continuous digital connection with the resident\r\n <\/p>\r\n\r\n \r\n <div class=\"pt-2\">\r\n <button onclick=\"openUnifiedVideoModal(3)\" class=\"btn-video-glow inline-flex items-center space-x-3.5 px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400 text-slate-950 font-black text-sm sm:text-base hover:scale-105 transition-all shadow-xl cursor-pointer ring-4 ring-emerald-500\/30\">\r\n <div class=\"w-9 h-9 rounded-full bg-slate-950 text-emerald-400 flex items-center justify-center text-sm shadow-inner\">\r\n <i class=\"fa-solid fa-play ml-0.5\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <span class=\"block text-xs font-mono uppercase tracking-wider text-slate-900 font-extrabold\">ALEX's Video Message (Block 3)<\/span>\r\n <span class=\"block text-sm sm:text-base font-black text-slate-950\">\u25b6 WATCH THE ECOSYSTEM AND LTV ANALYSIS<\/span>\r\n <\/div>\r\n <span class=\"hidden sm:inline-block text-[10px] bg-slate-950\/20 text-slate-950 px-2.5 py-1 rounded-md font-mono uppercase font-bold\">Pop-Up Video 3<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-5 sm:p-7 border border-cyan-500\/30 relative overflow-hidden space-y-5\">\r\n \r\n <div class=\"flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-white\/10 gap-3\">\r\n <div>\r\n <div class=\"flex items-center space-x-2\">\r\n <i class=\"fa-solid fa-timeline text-emerald-400 text-base\"><\/i>\r\n <h3 class=\"text-base sm:text-lg font-heading font-extrabold text-white\">\r\n Dynamic Interactive Map of 5 VEI Modules\r\n <\/h3>\r\n <\/div>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">\r\n Click on any module on the timeline to bring up a detailed description\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"flex items-center space-x-2 text-xs font-mono text-emerald-300 bg-emerald-950\/80 px-3.5 py-1.5 rounded-full border border-emerald-500\/40 shrink-0\">\r\n <i class=\"fa-solid fa-clock mr-1\"><\/i>\r\n <span>Development vector: <strong>0\u20136 mo $\\rightarrow$ 2+ years<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative my-4\">\r\n \r\n <div class=\"absolute top-1\/2 left-0 w-full h-2 time-vector-gradient -translate-y-1\/2 rounded-full opacity-80 z-0 hidden md:block\"><\/div>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 relative z-10\">\r\n \r\n \r\n <button onclick=\"switchModuleB3('link')\" id=\"b3-mod-btn-link\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border-2 border-emerald-500 hover:border-emerald-300 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-emerald-400\">\ud83d\udfe2 VEI LINK<\/span>\r\n <span class=\"text-[10px] font-mono bg-emerald-500\/20 text-emerald-300 px-2 py-0.5 rounded font-bold\">0\u20136 mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">R\u00c5DE & Mottak<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Primary daily guide from the first minutes in the camp.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('commune')\" id=\"b3-mod-btn-commune\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-rose-500\/40 hover:border-rose-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-rose-400\">\ud83d\udd34 VEI COMMUNE<\/span>\r\n <span class=\"text-[10px] font-mono bg-rose-500\/20 text-rose-300 px-2 py-0.5 rounded font-bold\">1\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">City & NAV<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Municipality, school, kindergartens, doctor, and integration.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('scan')\" id=\"b3-mod-btn-scan\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-purple-500\/40 hover:border-purple-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-purple-400\">\ud83d\udfe3 VEI SCAN<\/span>\r\n <span class=\"text-[10px] font-mono bg-purple-500\/20 text-purple-300 px-2 py-0.5 rounded font-bold\">0\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Vision & GDPR<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Secure assistant for reading letters and documents.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('translate')\" id=\"b3-mod-btn-translate\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-cyan-500\/40 hover:border-cyan-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-cyan-400\">\ud83d\udd35 TRANSLATE<\/span>\r\n <span class=\"text-[10px] font-mono bg-cyan-500\/20 text-cyan-300 px-2 py-0.5 rounded font-bold\">0\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Contextual AI<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Voice translator for authorities and daily life.<\/p>\r\n <\/button>\r\n\r\n \r\n <button onclick=\"switchModuleB3('sprak')\" id=\"b3-mod-btn-sprak\" class=\"group p-3.5 rounded-2xl bg-slate-900\/95 border border-amber-500\/40 hover:border-amber-400 transition-all text-left cursor-pointer shadow-md\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-sm font-black text-amber-400\">\ud83d\udfe0 VEI SPR\u00c5K<\/span>\r\n <span class=\"text-[10px] font-mono bg-amber-500\/20 text-amber-300 px-2 py-0.5 rounded font-bold\">2\u201324+ mo<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Language & Work<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Norwegian AI tutor and CV preparation.<\/p>\r\n <\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"b3-module-info-display\" class=\"p-4 rounded-2xl bg-slate-950\/90 border border-emerald-500\/60 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-inner\">\r\n <div class=\"flex items-center space-x-3.5\">\r\n <span id=\"b3-mod-icon\" class=\"text-3xl shrink-0\">\ud83d\udfe2<\/span>\r\n <div>\r\n <h4 id=\"b3-mod-title\" class=\"text-sm sm:text-base font-extrabold text-white font-heading\">\r\n \ud83d\udfe2 VEI LINK \u2014 Primary & camp assistant (0 \u2013 6 months)\r\n <\/h4>\r\n <p id=\"b3-mod-desc\" class=\"text-xs text-slate-300 leading-relaxed mt-0.5\">\r\n Relieves up to 90% of the household burden from the R\u00c5DE and Mottak camp reception during the first months of stay. Autonomously answers questions about the hostel, schedules, rules, and medical care.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <span id=\"b3-mod-badge\" class=\"text-xs font-mono font-bold text-emerald-300 bg-emerald-950 px-3 py-1.5 rounded-lg border border-emerald-500\/40 shrink-0\">\r\n Camp Contour\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n \r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-rose-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-rose-500\/20 border border-rose-500\/40 text-rose-400 flex items-center justify-center text-lg font-bold\">\r\n \u26a0\ufe0f\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-rose-400 bg-rose-950\/80 px-2.5 py-0.5 rounded border border-rose-500\/30 font-bold uppercase\">\r\n LTV Risk\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n The Problem of \"Disposable Apps\" (Short LTV)\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n The first LINK module, currently being developed for the camp, is needed by a person in the camp in the first <strong>0\u20136 months<\/strong> if it is left simply as a knowledge base.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n As soon as everyday issues are resolved or a person moves to a municipality, a static application is inevitably deleted.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-rose-950\/70 border border-rose-500\/50 text-xs text-rose-200 space-y-1\">\r\n <strong class=\"text-rose-300 font-bold block\"><i class=\"fa-solid fa-triangle-exclamation mr-1\"><\/i> Loss of connection with authorities:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Statistics are cut off, and agencies stop seeing what concerns the person next and what hot problems they have.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-cyan-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-cyan-500\/20 border border-cyan-500\/40 text-cyan-400 flex items-center justify-center text-lg font-bold\">\r\n \ud83d\udd04\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-cyan-400 bg-cyan-950\/80 px-2.5 py-0.5 rounded border border-cyan-500\/30 font-bold uppercase\">\r\n VEI Solution\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n Seamless Context Evolution\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Instead of deleting the app, VEI <strong>evolves along with the user<\/strong>. The context and functionality change depending on the adaptation stage.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Camp \u2192 Municipality \u2192 Daily Life \u2192 Work. One application for <strong>2+ years<\/strong> of continuous digital connection.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-cyan-950\/70 border border-cyan-500\/50 text-xs text-cyan-200 space-y-1\">\r\n <strong class=\"text-cyan-300 font-bold block\"><i class=\"fa-solid fa-check-circle mr-1\"><\/i> Continuous analytics:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Authorities receive a continuous flow of data about the resident's needs and can anticipate problems.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card-rich rounded-3xl p-6 border border-emerald-500\/40 flex flex-col justify-between space-y-4\">\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-10 h-10 rounded-2xl bg-emerald-500\/20 border border-emerald-500\/40 text-emerald-400 flex items-center justify-center text-lg font-bold\">\r\n \ud83d\ude80\r\n <\/div>\r\n <span class=\"text-[11px] font-mono text-emerald-400 bg-emerald-950\/80 px-2.5 py-0.5 rounded border border-emerald-500\/30 font-bold uppercase\">\r\n LTV Strategy\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n 10x increase in lifecycle\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Standard integration apps live for <strong>3\u20136 months<\/strong>. VEI is designed for <strong>2+ years<\/strong> of continuous use.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n This is a <strong>10x increase in LTV<\/strong> and the ability to build long-term relationships with the resident.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-3.5 rounded-2xl bg-emerald-950\/70 border border-emerald-500\/50 text-xs text-emerald-200 space-y-1\">\r\n <strong class=\"text-emerald-300 font-bold block\"><i class=\"fa-solid fa-chart-line mr-1\"><\/i> Success Metric:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Retention rate 60%+ after 12 months of use versus the industry average of 5-10%.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-4\" class=\"presentation-section w-full min-h-screen py-10 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n \r\n <div class=\"relative z-10 w-full max-w-7xl flex items-center justify-between border-b border-slate-200 pb-4 mb-8\">\r\n <div class=\"flex items-center space-x-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-sky-600 animate-ping\"><\/span>\r\n <span class=\"text-xs font-mono font-bold tracking-widest text-sky-700 uppercase\">VEI Governance \/\/ Screen 04<\/span>\r\n <\/div>\r\n <span class=\"text-xs text-slate-500 font-mono hidden sm:inline-block\">Data & Governance: GDPR, Safety & Verified Analytics<\/span>\r\n <\/div>\r\n\r\n <div class=\"relative z-10 w-full max-w-7xl mx-auto space-y-12\">\r\n \r\n \r\n <div class=\"text-center max-w-4xl mx-auto space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-sky-50 border border-sky-200 text-sky-700 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-building-columns text-sky-600\"><\/i>\r\n <span>Fourth Screen: Value for Agencies<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 tracking-tight leading-tight\">\r\n VEI for the State: Data Security, Transparent Analytics, and Chaos Optimization\r\n <\/h1>\r\n\r\n <p class=\"text-slate-600 text-base sm:text-lg font-semibold max-w-3xl mx-auto\">\r\n From uncontrolled information leaks to a verified digital standard\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"max-w-4xl mx-auto w-full\">\r\n <button onclick=\"openTextModal4()\" class=\"w-full py-6 rounded-2xl bg-gradient-to-r from-sky-500 via-teal-400 to-emerald-400 text-slate-950 font-black text-lg hover:scale-105 transition-all shadow-xl flex items-center justify-center space-x-3 cursor-pointer ring-4 ring-sky-500\/30\">\r\n <div class=\"w-12 h-12 rounded-full bg-slate-950 text-emerald-400 flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-book-open\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <span class=\"block text-xs font-mono uppercase tracking-widest text-slate-900 font-extrabold\">Full text of the section<\/span>\r\n <span class=\"block text-base font-bold\">Read: Value of VEI for Agencies<\/span>\r\n <\/div>\r\n <i class=\"fa-solid fa-arrow-right text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 pt-4\">\r\n \r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-rose-50 text-rose-600 border border-rose-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udee1\ufe0f\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-rose-700 bg-rose-50 px-3 py-1 rounded-full border border-rose-200\">\r\n GDPR & Privacy\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Absolute Security of Personal Data\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-rose-50\/70 border border-rose-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-rose-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-triangle-exclamation mr-1.5\"><\/i> The problem of chaotic leaks:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Today, migrants are forced to scan official letters with personal data and upload them to third-party neural networks. This is a colossal violation of privacy.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-emerald-50\/70 border border-emerald-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-emerald-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-shield-halved mr-1.5\"><\/i> VEI Solution:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Secure closed loop. The person gets the exact context of the documents without the risk of leaking personal data.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-sky-50 text-sky-600 border border-sky-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udce1\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-sky-700 bg-sky-50 px-3 py-1 rounded-full border border-sky-200\">\r\n Anti-Fake Channel\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Official Communication Channel and Protection from Disinformation\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-comments text-sky-600 mr-1.5\"><\/i> Information Chaos Management:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Instead of hours of searching for information on the Internet \u2014 direct verified notifications from <strong>UDI, NAV, IMDi, and Municipalities<\/strong>.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-sky-50\/70 border border-sky-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-sky-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-circle-check mr-1.5\"><\/i> 100% Resident Trust:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n A person receives an official news update, understands its correct meaning, and in one click goes to the agency's official source.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 border border-indigo-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83d\udcca\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-indigo-700 bg-indigo-50 px-3 py-1 rounded-full border border-indigo-200\">\r\n Verified Analytics\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n Real Analytics from Usage\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-chart-line text-indigo-600 mr-1.5\"><\/i> Data for planning:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Agencies receive verified data on the real needs of residents for effective resource allocation.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-indigo-50\/70 border border-indigo-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-indigo-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-bullseye mr-1.5\"><\/i> Predictive Analytics:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n The system predicts potential problems and allows agencies to act proactively, not reactively.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"card-nordic-light rounded-3xl p-7 flex flex-col justify-between space-y-6\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center text-xl font-bold shadow-sm\">\r\n \ud83c\udfdb\ufe0f\r\n <\/div>\r\n <span class=\"text-xs font-mono font-bold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200\">\r\n National Standard\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl font-heading font-black text-slate-900\">\r\n National Digital Integration Standard\r\n <\/h3>\r\n\r\n <div class=\"space-y-3 pt-2\">\r\n <div class=\"p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-slate-900 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-flag text-emerald-600 mr-1.5\"><\/i> Unified Ecosystem:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Norway can become the first country with a national standard for the digital integration of migrants.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"p-4 rounded-2xl bg-emerald-50\/70 border border-emerald-200 text-xs sm:text-sm text-slate-800 space-y-1\">\r\n <strong class=\"text-emerald-700 font-extrabold flex items-center\">\r\n <i class=\"fa-solid fa-globe mr-1.5\"><\/i> Global Potential:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n The developed solution can be scaled to other countries, creating a new standard for integration in Europe.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-5\" class=\"presentation-section w-full min-h-screen py-8 px-4 sm:px-6 lg:px-12 flex flex-col justify-between items-center relative overflow-hidden bg-[#0B132B] section-animate\">\r\n <div class=\"glow-bg\"><\/div>\r\n\r\n <div class=\"w-full max-w-5xl mx-auto flex flex-col items-center z-10 my-auto\">\r\n <header class=\"text-center mb-6\">\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950\/60 border border-emerald-500\/30 text-emerald-400 text-xs font-mono uppercase tracking-widest mb-3\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-400 animate-ping\"><\/span>\r\n Final Module \u2022 VEI SHOWROOM\r\n <\/div>\r\n <h1 class=\"text-2xl md:text-4xl font-extrabold text-white tracking-tight font-heading\">\r\n VEI <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-500\">SHOWROOM<\/span>\r\n <\/h1>\r\n <p class=\"text-slate-400 text-sm md:text-base mt-1 max-w-xl mx-auto\">\r\n Final video demonstration of the system's operation in real conditions.\r\n <\/p>\r\n <\/header>\r\n\r\n <div class=\"w-full glass-panel rounded-2xl overflow-hidden relative shadow-xl border border-slate-700\/50\">\r\n <div class=\"flex items-center justify-between px-4 py-3 bg-slate-900\/80 border-b border-slate-800 text-xs font-mono text-slate-400\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-red-500 inline-block\"><\/span>\r\n <span class=\"w-3 h-3 rounded-full bg-yellow-500 inline-block\"><\/span>\r\n <span class=\"w-3 h-3 rounded-full bg-green-500 inline-block\"><\/span>\r\n <span class=\"ml-2 text-slate-300 font-semibold\">VEI_VIDEO_DEMO.MP4<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-3\">\r\n <span class=\"bg-slate-800 text-slate-300 px-2 py-0.5 rounded text-[10px]\">1080P HD<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative bg-black aspect-video flex items-center justify-center group overflow-hidden cursor-pointer\" onclick=\"openUnifiedVideoModal(5)\">\r\n \r\n <div class=\"absolute inset-0 bg-slate-950\/40 backdrop-blur-[2px] flex items-center justify-center transition-opacity duration-300 group-hover:bg-slate-950\/60\">\r\n <div class=\"w-20 h-20 rounded-full bg-emerald-500\/20 border-2 border-emerald-400 flex items-center justify-center text-emerald-400 text-3xl pl-1 shadow-[0_0_30px_rgba(16,185,129,0.4)] group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-play\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"absolute top-4 left-4 bg-slate-900\/80 backdrop-blur-md border border-slate-700\/60 text-slate-300 px-3 py-1.5 rounded-lg text-xs flex items-center gap-2 opacity-90\">\r\n <i class=\"fa-solid fa-magic text-emerald-400\"><\/i>\r\n <span>Click to view the demonstration<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-4 bg-slate-900\/90 border-t border-slate-800\/80\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-xs text-slate-400 font-mono\">Status: <span class=\"text-emerald-400\">Ready to play<\/span><\/span>\r\n <\/div>\r\n <button onclick=\"openUnifiedVideoModal(5)\" class=\"px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition-all flex items-center gap-2\">\r\n <i class=\"fa-solid fa-play\"><\/i>\r\n <span>Watch Demo<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"section-6\" class=\"presentation-section w-full min-h-screen py-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center relative overflow-hidden bg-white section-animate\">\r\n \r\n <div class=\"relative z-10 w-full max-w-5xl mx-auto space-y-12\">\r\n \r\n \r\n <div class=\"text-center space-y-4\">\r\n <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-mono font-bold uppercase tracking-wider\">\r\n <i class=\"fa-solid fa-flag-checkered text-emerald-600\"><\/i>\r\n <span>Final Stage<\/span>\r\n <\/div>\r\n <h1 class=\"font-heading text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 tracking-tight leading-tight\">\r\n Roadmap and Partnership\r\n <\/h1>\r\n <p class=\"text-slate-600 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n From concept and prototype \u2014 to a national digital integration standard in Norway.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"founder-gradient rounded-3xl p-6 sm:p-8 text-white shadow-xl relative overflow-hidden border border-slate-800\">\r\n \r\n <div class=\"absolute -top-24 -right-24 w-64 h-64 bg-emerald-500\/20 rounded-full blur-xl pointer-events-none\"><\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative z-10\">\r\n \r\n <div class=\"space-y-5\">\r\n <div class=\"flex items-center space-x-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-gradient-to-tr from-emerald-400 to-teal-300 text-slate-900 flex items-center justify-center font-heading font-black text-sm shadow-md\">\r\n ALEX\r\n <\/div>\r\n <div>\r\n <h2 class=\"text-xl font-heading font-black text-white\">Founder's Vision<\/h2>\r\n <p class=\"text-xs text-emerald-400 font-mono\">Authentic Founder Story<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <blockquote class=\"text-sm sm:text-base text-slate-300 leading-relaxed italic border-l-2 border-emerald-500 pl-4\">\r\n \u00abVEI is not just an IT product. It is the journey of every newcomer translated into technology.<br><br>\r\n I have personally seen how people cannot withstand the everyday and bureaucratic stress and leave Norway. My goal is to stop this outflow by combining technology with the expertise of the Norwegian state system\u00bb.\r\n <\/blockquote>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col items-center md:items-end justify-center space-y-4\">\r\n <div class=\"w-full max-w-sm rounded-2xl bg-slate-800\/50 border border-slate-700 p-4 text-center space-y-4 backdrop-blur-sm\">\r\n <p class=\"text-xs text-slate-300 font-medium\">Thank you for taking the time to review the VEI project.<\/p>\r\n <p class=\"text-xs text-slate-400\">The presentation is complete. Please review the implementation roadmap below.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-center space-x-3 border-b border-slate-200 pb-3\">\r\n <i class=\"fa-solid fa-route text-emerald-600 text-xl\"><\/i>\r\n <h2 class=\"text-xl font-heading font-extrabold text-slate-900\">Implementation Plan (4 Stages)<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n \r\n \r\n <div class=\"nordic-card rounded-2xl p-5 border-2 border-emerald-500 bg-emerald-50\/10 active-stage-pulse relative\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded\">Current<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-emerald-600 text-white font-black text-xs flex items-center justify-center mb-3\">01<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Development & Test (Mottak)<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Creation of the basic architecture of the LINK module. Internal testing of the AI assistant for R\u00c5DE camp scenarios.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">Q3-Q4 2026<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">02<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Pilot in R\u00c5DE<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Launch of the pilot version in a real camp. Gathering feedback from migrants and staff.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">2027<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">03<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">Expansion across Norway<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Scaling to other municipalities. Integration with state systems.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"nordic-card rounded-2xl p-5\">\r\n <span class=\"absolute top-4 right-4 text-[10px] font-mono font-bold bg-slate-100 text-slate-500 px-2 py-0.5 rounded\">2028+<\/span>\r\n <div class=\"w-8 h-8 rounded-lg bg-slate-900 text-white font-black text-xs flex items-center justify-center mb-3\">04<\/div>\r\n <h3 class=\"text-sm font-bold text-slate-900 mb-2\">National Standard<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Status of the official national standard for digital integration of migrants.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"text-center pt-8 flex flex-col sm:flex-row items-center justify-center gap-4\">\r\n <button onclick=\"scrollToSection(1)\" class=\"inline-flex items-center space-x-2 px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold transition-all shadow-md\">\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <span>Back to the beginning<\/span>\r\n <\/button>\r\n <a href=\"mailto:oleksiipatrykieiev@gmail.com\" class=\"inline-flex items-center space-x-2 px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white font-bold transition-all shadow-md\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n <span>Contact me<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ ==================== UNIFIED VIDEO SYSTEM ====================\r\n \r\n \/\/ Section data configuration\r\n const sectionData = {\r\n 1: {\r\n title: \"VEI Presentation \u2014 ALEX\",\r\n videoId: \"dfwJdYi3z0U\",\r\n youtubeUrl: \"https:\/\/youtu.be\/dfwJdYi3z0U\",\r\n duration: 219, \/\/ 3min 39sec in seconds\r\n actionTitle: \"Watch the presentation\",\r\n actionDesc: \"Learn about the VEI concept. After watching, proceed to the second block to see the user's journey.\",\r\n nextBtnText: \"PROCEED TO BLOCK 2\",\r\n endTitle: \"VEI Concept Explored!\",\r\n endDesc: \"You've been introduced to the VEI concept. Click the button below to proceed to the user's journey.\",\r\n endBtnText: \"PROCEED TO BLOCK 2: MIGRANT'S JOURNEY\",\r\n navTitle: \"Home\",\r\n navDesc: \"VEI Concept\"\r\n },\r\n 2: {\r\n title: \"Second Screen: User Journey & Pain Points\",\r\n videoId: \"heDhl3woohA\",\r\n youtubeUrl: \"https:\/\/youtu.be\/heDhl3woohA\",\r\n duration: 281, \/\/ 4min 41sec in seconds\r\n actionTitle: \"Second screen: Migrant's journey\",\r\n actionDesc: \"The real human journey: from entering the country to integration. After watching, proceed to the strategic solution.\",\r\n nextBtnText: \"PROCEED TO BLOCK 3\",\r\n endTitle: \"Pain Points Analysis Viewed!\",\r\n endDesc: \"All adaptation stages by the user have been explored. Click the button below to proceed to the strategic solution.\",\r\n endBtnText: \"PROCEED TO BLOCK 3: STRATEGY AND LTV\",\r\n navTitle: \"Migrant's Journey\",\r\n navDesc: \"Pains and Solutions\"\r\n },\r\n 3: {\r\n title: \"Third Screen: VEI Ecosystem and LTV Strategy\",\r\n videoId: \"eiKhNn8VpTA\",\r\n youtubeUrl: \"https:\/\/youtu.be\/eiKhNn8VpTA\",\r\n duration: 220, \/\/ 3min 40sec in seconds\r\n actionTitle: \"Third screen: Ecosystem\",\r\n actionDesc: \"5 VEI modules and the strategy to increase the lifecycle from 6 months to 2+ years.\",\r\n nextBtnText: \"PROCEED TO BLOCK 5\",\r\n endTitle: \"Ecosystem Explored!\",\r\n endDesc: \"You have learned about the 5 VEI modules and the LTV strategy. Proceed to the prototype demonstration.\",\r\n endBtnText: \"PROCEED TO BLOCK 5: PROTOTYPE\",\r\n navTitle: \"Ecosystem\",\r\n navDesc: \"LTV Strategy\"\r\n },\r\n\r\n 5: {\r\n title: \"VEI SHOWROOM\",\r\n videoId: \"6hsHdvgYS6U\",\r\n youtubeUrl: \"https:\/\/youtu.be\/6hsHdvgYS6U\",\r\n duration: 184, \/\/ 3min 04sec in seconds\r\n actionTitle: \"VEI SHOWROOM\",\r\n actionDesc: \"Watch the video demonstration of the system in real conditions.\",\r\n nextBtnText: \"PROCEED TO THE FINAL BLOCK\",\r\n endTitle: \"Presentation completed!\",\r\n endDesc: \"Thank you for your time. The presentation is over.\",\r\n endBtnText: \"PROCEED TO THE FINAL SCREEN\",\r\n navTitle: \"VEI SHOWROOM\",\r\n navDesc: \"SHOWROOM\"\r\n },\r\n 4: {\r\n title: \"Fourth Screen: Value for Agencies\",\r\n videoId: null, \/\/ Text-only section\r\n youtubeUrl: null,\r\n duration: 0, \/\/ Text-only section has no duration\r\n isTextOnly: true,\r\n actionTitle: \"Fourth screen: Agencies\",\r\n actionDesc: \"Data security, transparent analytics, and chaos optimization for government structures.\",\r\n nextBtnText: \"PROCEED TO BLOCK 5\",\r\n endTitle: \"Section read!\",\r\n endDesc: \"You have read about VEI's value to the state. Proceed to the prototype demonstration.\",\r\n endBtnText: \"PROCEED TO BLOCK 5: PROTOTYPE\",\r\n navTitle: \"Agencies\",\r\n navDesc: \"Text Section\"\r\n }\r\n };\r\n\r\n \/\/ State management\r\n let viewedState = {\r\n 1: false,\r\n 2: false,\r\n 3: false,\r\n 4: false, \/\/ Text-only section, still tracked for reading\r\n 5: false\r\n };\r\n\r\n let currentSection = 1;\r\n let unifiedYtPlayer = null;\r\n let isUnifiedVideoFinished = false;\r\n\r\n \/\/ Real-time progress tracking\r\n const TOTAL_DURATION = 904; \/\/ Total duration in seconds (~15 minutes)\r\n let progressUpdateInterval = null;\r\n let accumulatedTime = 0; \/\/ Time from previously watched videos\r\n\r\n \/\/ Load viewed state from sessionStorage\r\n function loadViewedState() {\r\n const saved = sessionStorage.getItem('veiViewedState');\r\n if (saved) {\r\n try {\r\n viewedState = JSON.parse(saved);\r\n } catch (e) {\r\n console.error('Error loading viewed state:', e);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Save viewed state to sessionStorage\r\n function saveViewedState() {\r\n sessionStorage.setItem('veiViewedState', JSON.stringify(viewedState));\r\n }\r\n\r\n \/\/ Mark section as viewed\r\n function markSectionAsViewed(sectionNumber) {\r\n if (!viewedState[sectionNumber]) {\r\n viewedState[sectionNumber] = true;\r\n saveViewedState();\r\n updateViewedIndicators();\r\n }\r\n }\r\n\r\n \/\/ Update viewed indicators in navigation\r\n function updateViewedIndicators() {\r\n \/\/ Update progress indicator (count only video sections: 1,2,3,5 = 4 total)\r\n const videoSections = [1, 2, 3, 5];\r\n const viewedCount = videoSections.filter(s => viewedState[s]).length;\r\n const progressEl = document.getElementById('unifiedProgressIndicator');\r\n if (progressEl) {\r\n progressEl.textContent = `${viewedCount}\/4 viewed`;\r\n progressEl.classList.add('updated');\r\n setTimeout(() => progressEl.classList.remove('updated'), 500);\r\n }\r\n\r\n \/\/ Update circular progress indicator based on accumulated time\r\n accumulatedTime = calculateAccumulatedTime();\r\n const percentage = (accumulatedTime \/ TOTAL_DURATION) * 100;\r\n const remainingSeconds = TOTAL_DURATION - accumulatedTime;\r\n const remainingMinutes = Math.max(0, Math.ceil(remainingSeconds \/ 60));\r\n\r\n const circularProgress = document.getElementById('circularProgress');\r\n const circularProgressText = document.getElementById('circularProgressText');\r\n const circularProgressTime = document.getElementById('circularProgressTime');\r\n\r\n if (circularProgress && circularProgressText && circularProgressTime) {\r\n \/\/ SVG circumference is 283 (2 * PI * 45)\r\n const circumference = 283;\r\n const dashOffset = circumference - (circumference * percentage \/ 100);\r\n circularProgress.style.strokeDashoffset = dashOffset;\r\n circularProgressText.textContent = `${Math.round(percentage)}%`;\r\n circularProgressTime.textContent = `${remainingMinutes} min`;\r\n }\r\n\r\n \/\/ Update navigation items\r\n updateNavigationItems();\r\n\r\n \/\/ Update main navigation\r\n updateMainNavigation();\r\n }\r\n\r\n \/\/ Generate navigation items dynamically\r\n function generateNavigationItems() {\r\n const container = document.getElementById('unifiedNavContainer');\r\n if (!container) return;\r\n\r\n container.innerHTML = '';\r\n\r\n \/\/ Skip section 4 (text-only section) and section 6 (final screen)\r\n const videoSections = [1, 2, 3, 5];\r\n\r\n videoSections.forEach(i => {\r\n const data = sectionData[i];\r\n const isViewed = viewedState[i];\r\n const isCurrent = i === currentSection;\r\n\r\n const button = document.createElement('button');\r\n button.className = `nav-section-item relative w-full flex items-start text-left p-3 rounded-xl cursor-pointer transition-all ${\r\n isCurrent ? 'current' : (isViewed ? 'viewed' : 'unviewed')\r\n }`;\r\n button.onclick = () => switchToSection(i);\r\n\r\n button.innerHTML = `\r\n <div class=\"w-8 h-8 shrink-0\"><\/div>\r\n <div class=\"ml-3\">\r\n <h4 class=\"section-title text-sm font-bold mt-0.5\">${data.navTitle}<\/h4>\r\n <p class=\"text-xs opacity-70\">${data.navDesc}<\/p>\r\n <\/div>\r\n `;\r\n\r\n container.appendChild(button);\r\n });\r\n }\r\n\r\n \/\/ Update navigation items styling\r\n function updateNavigationItems() {\r\n const container = document.getElementById('unifiedNavContainer');\r\n if (!container) return;\r\n\r\n const items = container.querySelectorAll('.nav-section-item');\r\n const videoSections = [1, 2, 3, 5, 6];\r\n \r\n items.forEach((item, index) => {\r\n const sectionNum = videoSections[index];\r\n const isViewed = viewedState[sectionNum];\r\n const isCurrent = sectionNum === currentSection;\r\n\r\n item.classList.remove('current', 'viewed', 'unviewed');\r\n if (isCurrent) {\r\n item.classList.add('current');\r\n } else if (isViewed) {\r\n item.classList.add('viewed');\r\n } else {\r\n item.classList.add('unviewed');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Update main navigation indicators\r\n function updateMainNavigation() {\r\n const navItems = document.querySelectorAll('.nav-item');\r\n navItems.forEach(item => {\r\n const section = parseInt(item.dataset.section);\r\n if (section && viewedState[section]) {\r\n item.classList.add('viewed-indicator');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize unified YouTube player\r\n function initUnifiedPlayer() {\r\n if (unifiedYtPlayer) return;\r\n\r\n unifiedYtPlayer = new YT.Player('unifiedVideoIframeWrapper', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: sectionData[currentSection].videoId,\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'autoplay': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onStateChange': onUnifiedPlayerStateChange\r\n }\r\n });\r\n }\r\n\r\n \/\/ Handle unified player state changes\r\n function onUnifiedPlayerStateChange(event) {\r\n if (event.data === YT.PlayerState.ENDED) {\r\n isUnifiedVideoFinished = true;\r\n showUnifiedEndOverlay();\r\n markSectionAsViewed(currentSection);\r\n stopProgressTracking();\r\n \/\/ Update progress to reflect completed video\r\n updateViewedIndicators();\r\n } else if (event.data === YT.PlayerState.PLAYING) {\r\n startProgressTracking();\r\n } else if (event.data === YT.PlayerState.PAUSED) {\r\n stopProgressTracking();\r\n }\r\n }\r\n\r\n \/\/ Calculate accumulated time from previously watched videos\r\n function calculateAccumulatedTime() {\r\n let time = 0;\r\n const videoSections = [1, 2, 3, 5];\r\n videoSections.forEach(section => {\r\n if (viewedState[section]) {\r\n time += sectionData[section].duration || 0;\r\n }\r\n });\r\n return time;\r\n }\r\n\r\n \/\/ Update circular progress based on current playback time\r\n function updateCircularProgress() {\r\n if (!unifiedYtPlayer) return;\r\n\r\n try {\r\n const currentTime = unifiedYtPlayer.getCurrentTime() || 0;\r\n const currentDuration = sectionData[currentSection]?.duration || 0;\r\n accumulatedTime = calculateAccumulatedTime();\r\n\r\n const totalProgressTime = accumulatedTime + currentTime;\r\n const percentage = (totalProgressTime \/ TOTAL_DURATION) * 100;\r\n const remainingSeconds = TOTAL_DURATION - totalProgressTime;\r\n const remainingMinutes = Math.max(0, Math.ceil(remainingSeconds \/ 60));\r\n\r\n const circularProgress = document.getElementById('circularProgress');\r\n const circularProgressText = document.getElementById('circularProgressText');\r\n const circularProgressTime = document.getElementById('circularProgressTime');\r\n\r\n if (circularProgress && circularProgressText && circularProgressTime) {\r\n \/\/ SVG circumference is 283 (2 * PI * 45)\r\n const circumference = 283;\r\n const dashOffset = circumference - (circumference * percentage \/ 100);\r\n circularProgress.style.strokeDashoffset = dashOffset;\r\n circularProgressText.textContent = `${Math.round(percentage)}%`;\r\n circularProgressTime.textContent = `${remainingMinutes} min`;\r\n }\r\n } catch (error) {\r\n console.error('Error updating progress:', error);\r\n }\r\n }\r\n\r\n \/\/ Start real-time progress tracking\r\n function startProgressTracking() {\r\n stopProgressTracking(); \/\/ Clear any existing interval\r\n progressUpdateInterval = setInterval(updateCircularProgress, 1000); \/\/ Update every second\r\n }\r\n\r\n \/\/ Stop real-time progress tracking\r\n function stopProgressTracking() {\r\n if (progressUpdateInterval) {\r\n clearInterval(progressUpdateInterval);\r\n progressUpdateInterval = null;\r\n }\r\n }\r\n\r\n \/\/ Open unified video modal\r\n function openUnifiedVideoModal(sectionNumber) {\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (!modal) return;\r\n\r\n currentSection = sectionNumber;\r\n isUnifiedVideoFinished = false;\r\n\r\n \/\/ Update modal content\r\n updateModalContent(sectionNumber);\r\n\r\n \/\/ Show modal\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n\r\n \/\/ Initialize\/load video\r\n if (unifiedYtPlayer) {\r\n unifiedYtPlayer.loadVideoById(sectionData[sectionNumber].videoId);\r\n } else {\r\n initUnifiedPlayer();\r\n }\r\n\r\n \/\/ Update navigation\r\n generateNavigationItems();\r\n\r\n \/\/ Initialize circular progress\r\n updateViewedIndicators();\r\n\r\n \/\/ Start progress tracking if video is already playing\r\n if (unifiedYtPlayer && unifiedYtPlayer.getPlayerState() === YT.PlayerState.PLAYING) {\r\n startProgressTracking();\r\n }\r\n }\r\n\r\n \/\/ Close unified video modal\r\n function closeUnifiedVideoModal() {\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (!modal) return;\r\n\r\n modal.classList.add('hidden');\r\n document.body.style.overflow = '';\r\n document.documentElement.style.overflow = '';\r\n\r\n if (unifiedYtPlayer && typeof unifiedYtPlayer.pauseVideo === 'function') {\r\n unifiedYtPlayer.pauseVideo();\r\n }\r\n\r\n \/\/ Stop progress tracking when modal is closed\r\n stopProgressTracking();\r\n\r\n closeUnifiedEndOverlay();\r\n }\r\n\r\n \/\/ Update modal content for specific section\r\n function updateModalContent(sectionNumber) {\r\n const data = sectionData[sectionNumber];\r\n if (!data) return;\r\n\r\n \/\/ Update title\r\n const titleEl = document.getElementById('unifiedModalTitle');\r\n if (titleEl) titleEl.textContent = data.title;\r\n\r\n \/\/ Update YouTube link\r\n const youtubeLinkEl = document.getElementById('unifiedYoutubeLink');\r\n if (youtubeLinkEl) youtubeLinkEl.href = data.youtubeUrl;\r\n\r\n \/\/ Update action panel\r\n const actionTitleEl = document.getElementById('unifiedActionPanelTitle');\r\n if (actionTitleEl) actionTitleEl.textContent = data.actionTitle;\r\n\r\n const actionDescEl = document.getElementById('unifiedActionPanelDesc');\r\n if (actionDescEl) actionDescEl.textContent = data.actionDesc;\r\n\r\n \/\/ Update main next button\r\n const mainNextBtnTextEl = document.getElementById('unifiedMainNextBtnText');\r\n if (mainNextBtnTextEl) mainNextBtnTextEl.textContent = data.nextBtnText;\r\n\r\n \/\/ Update end overlay\r\n const endTitleEl = document.getElementById('unifiedEndTitle');\r\n if (endTitleEl) endTitleEl.textContent = data.endTitle;\r\n\r\n const endDescEl = document.getElementById('unifiedEndDesc');\r\n if (endDescEl) endDescEl.textContent = data.endDesc;\r\n\r\n const endBtnTextEl = document.getElementById('unifiedNextBtnText');\r\n if (endBtnTextEl) endBtnTextEl.textContent = data.endBtnText;\r\n }\r\n\r\n \/\/ Show unified end overlay\r\n function showUnifiedEndOverlay() {\r\n const overlay = document.getElementById('unifiedEndSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n \/\/ Close unified end overlay\r\n function closeUnifiedEndOverlay() {\r\n const overlay = document.getElementById('unifiedEndSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.add('hidden');\r\n }\r\n }\r\n\r\n \/\/ Switch to different section within modal\r\n function switchToSection(sectionNumber) {\r\n if (sectionNumber === currentSection) return;\r\n\r\n \/\/ Add loading state\r\n const videoContainer = document.getElementById('unifiedVideoIframeWrapper');\r\n if (videoContainer) {\r\n videoContainer.classList.add('video-transition-out');\r\n }\r\n\r\n setTimeout(() => {\r\n currentSection = sectionNumber;\r\n isUnifiedVideoFinished = false;\r\n\r\n \/\/ Update content\r\n updateModalContent(sectionNumber);\r\n\r\n \/\/ Load new video\r\n if (unifiedYtPlayer) {\r\n unifiedYtPlayer.loadVideoById(sectionData[sectionNumber].videoId);\r\n }\r\n\r\n \/\/ Update navigation\r\n updateNavigationItems();\r\n\r\n \/\/ Remove loading state\r\n if (videoContainer) {\r\n videoContainer.classList.remove('video-transition-out');\r\n videoContainer.classList.add('video-transition-in');\r\n setTimeout(() => {\r\n videoContainer.classList.remove('video-transition-in');\r\n }, 500);\r\n }\r\n\r\n \/\/ Scroll to section with smooth behavior\r\n const section = document.getElementById(`section-${sectionNumber}`);\r\n if (section) {\r\n const headerOffset = window.innerWidth < 768 ? 60 : 0;\r\n const elementPosition = section.getBoundingClientRect().top;\r\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\r\n \r\n \/\/ Use smooth scroll for seamless background transition\r\n window.scrollTo({\r\n top: offsetPosition,\r\n behavior: 'smooth'\r\n });\r\n }\r\n }, 300);\r\n }\r\n\r\n \/\/ Go to next section with seamless transition\r\n function goToNextSection() {\r\n let nextSection = currentSection + 1;\r\n\r\n \/\/ Skip section 4 (text-only section)\r\n if (nextSection === 4) {\r\n nextSection = 5;\r\n }\r\n\r\n \/\/ Wrap around to section 1 if at the end\r\n if (nextSection > 5) {\r\n nextSection = 1;\r\n }\r\n\r\n \/\/ Mark current as viewed\r\n markSectionAsViewed(currentSection);\r\n\r\n \/\/ Close overlay\r\n closeUnifiedEndOverlay();\r\n\r\n \/\/ Switch to next section\r\n switchToSection(nextSection);\r\n }\r\n\r\n \/\/ Handle section 5 completion - close modal and scroll to section 6\r\n function handleSection5Completion() {\r\n \/\/ Mark section 5 as viewed\r\n markSectionAsViewed(5);\r\n\r\n \/\/ Close the video modal completely\r\n closeUnifiedVideoModal();\r\n\r\n \/\/ Scroll to section 6 (final screen)\r\n setTimeout(() => {\r\n scrollToSection(6);\r\n }, 300);\r\n }\r\n\r\n \/\/ Trigger end video test\r\n function triggerEndVideoTest() {\r\n isUnifiedVideoFinished = true;\r\n showUnifiedEndOverlay();\r\n markSectionAsViewed(currentSection);\r\n \/\/ Update progress to reflect completed video\r\n updateViewedIndicators();\r\n }\r\n\r\n \/\/ ==================== TEXT MODAL FUNCTIONS ====================\r\n\r\n \/\/ Open text modal for section 4\r\n function openTextModal4() {\r\n const modal = document.getElementById('textModal4');\r\n if (modal) {\r\n modal.classList.remove('hidden');\r\n document.body.style.overflow = 'hidden';\r\n document.documentElement.style.overflow = 'hidden';\r\n \r\n \/\/ Mark section 4 as viewed when text is opened\r\n markSectionAsViewed(4);\r\n }\r\n }\r\n\r\n \/\/ Close text modal for section 4\r\n function closeTextModal4() {\r\n const modal = document.getElementById('textModal4');\r\n if (modal) {\r\n modal.classList.add('hidden');\r\n document.body.style.overflow = '';\r\n document.documentElement.style.overflow = '';\r\n }\r\n }\r\n\r\n \/\/ Initialize the unified system\r\n function initUnifiedSystem() {\r\n loadViewedState();\r\n generateNavigationItems();\r\n updateViewedIndicators();\r\n\r\n \/\/ Add click handler for modal background\r\n const modal = document.getElementById('unifiedVideoModal');\r\n if (modal) {\r\n modal.addEventListener('click', (e) => {\r\n if (e.target.id === 'unifiedVideoModal') {\r\n closeUnifiedVideoModal();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Add click handler for text modal background\r\n const textModal = document.getElementById('textModal4');\r\n if (textModal) {\r\n textModal.addEventListener('click', (e) => {\r\n if (e.target.id === 'textModal4') {\r\n closeTextModal4();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Add keyboard handler\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n closeUnifiedVideoModal();\r\n closeTextModal4();\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize on DOM ready\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initUnifiedSystem);\r\n } else {\r\n initUnifiedSystem();\r\n }\r\n\r\n \/\/ ==================== END UNIFIED VIDEO SYSTEM ====================\r\n\r\n \/\/ Global YouTube API setup (legacy - keeping for compatibility)\r\n const VIDEO_ID_B1 = 'dfwJdYi3z0U';\r\n let mainYtPlayerB1 = null;\r\n let isVideoFinishedB1 = false;\r\n\r\n window.ytPlayersInitCallbacks = window.ytPlayersInitCallbacks || [];\r\n window.ytPlayersInitCallbacks.push(function initYtPlayerB1() {\r\n if (mainYtPlayerB1) return;\r\n mainYtPlayerB1 = new YT.Player('b1-videoIframeWrapper', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: VIDEO_ID_B1,\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'autoplay': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onStateChange': onPlayerStateChangeB1\r\n }\r\n });\r\n });\r\n\r\n if (!window.__veiYtApiQueueInstalled) {\r\n window.__veiYtApiQueueInstalled = true;\r\n var _veiPrevYtReadyB1 = window.onYouTubeIframeAPIReady;\r\n window.onYouTubeIframeAPIReady = function() {\r\n if (typeof _veiPrevYtReadyB1 === 'function') _veiPrevYtReadyB1();\r\n (window.ytPlayersInitCallbacks || []).forEach(function(fn) { fn(); });\r\n };\r\n }\r\n\r\n if (window.YT && window.YT.Player) {\r\n (window.ytPlayersInitCallbacks || []).forEach(function(fn) { fn(); });\r\n }\r\n\r\n \/\/ Block 1 Functions\r\n let speechOpenB1 = false;\r\n function toggleSpeechB1() {\r\n const content = document.getElementById('b1-speechContent');\r\n const chevron = document.getElementById('b1-speechChevron');\r\n speechOpenB1 = !speechOpenB1;\r\n if (speechOpenB1) {\r\n content.classList.remove('hidden');\r\n chevron.style.transform = 'rotate(0deg)';\r\n } else {\r\n content.classList.add('hidden');\r\n chevron.style.transform = 'rotate(-90deg)';\r\n }\r\n }\r\n\r\n const modulesDataB1 = {\r\n link: {\r\n title: '\ud83d\udfe2 VEI LINK (Daily Life & Mottak)',\r\n text: 'Primary assistant from the first minutes in the reception center. Camp rules, schedules, everyday adaptation, and reducing the workload on the reception.'\r\n },\r\n commune: {\r\n title: '\ud83d\udd34 VEI COMMUNE (City & NAV)',\r\n text: 'Interaction with the municipality (Kommune), NAV, schools. Job search, assistance with CV, and integration into city life.'\r\n },\r\n scan: {\r\n title: '\ud83d\udfe3 VEI SCAN (AI Vision \/ Computer Vision)',\r\n text: 'Scanning letters from NAV, bills, parking lots, price tags, and instantly explaining the meaning in simple words.'\r\n },\r\n translate: {\r\n title: '\ud83d\udd35 VEI TRANSLATE (Contextual Translator)',\r\n text: 'Smart contextual voice and text translator for communication with doctors (Fastlege) and government agencies.'\r\n },\r\n sprak: {\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K (Intensive Norwegian Learning)',\r\n text: 'Interactive AI tutor for practicing the Norwegian language in real situations and preparing for Norskpr\u00f8ve.'\r\n }\r\n };\r\n\r\n function highlightModuleB1(key) {\r\n const data = modulesDataB1[key];\r\n if (!data) return;\r\n\r\n const blockRoot = document.getElementById('section-1');\r\n const tooltip = document.getElementById('b1-moduleTooltip');\r\n tooltip.style.opacity = '0';\r\n\r\n if (blockRoot) {\r\n blockRoot.querySelectorAll('.module-btn').forEach(btn => {\r\n btn.classList.remove('ring-2', 'ring-white\/40', 'scale-105');\r\n });\r\n }\r\n const activeBtn = document.getElementById(`b1-btn-${key}`);\r\n if (activeBtn) {\r\n activeBtn.classList.add('ring-2', 'ring-white\/40', 'scale-105');\r\n }\r\n\r\n setTimeout(() => {\r\n tooltip.innerHTML = `<strong class=\"text-white block text-sm sm:text-base mb-1\">${data.title}<\/strong><span class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">${data.text}<\/span>`;\r\n tooltip.style.opacity = '1';\r\n }, 150);\r\n }\r\n\r\n function onPlayerStateChangeB1(event) {\r\n if (event.data === 0) {\r\n markVideoAsFinishedB1();\r\n showEndOverlayB1();\r\n }\r\n }\r\n\r\n function showEndOverlayB1() {\r\n const overlay = document.getElementById('b1-endSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.remove('hidden');\r\n }\r\n }\r\n\r\n function closeEndOverlayB1() {\r\n const overlay = document.getElementById('b1-endSlideOverlay');\r\n if (overlay) {\r\n overlay.classList.add('hidden');\r\n }\r\n }\r\n\r\n function markVideoAsFinishedB1() {\r\n if (isVideoFinishedB1) return;\r\n isVideoFinishedB1 = true;\r\n\r\n const nextBlockBtn = document.getElementById('b1-nav-block-2');\r\n const nextBlockLabel = document.getElementById('b1-nav-block-2-label');\r\n if (nextBlockBtn) {\r\n nextBlockBtn.classList.add('animate-next-step');\r\n }\r\n if (nextBlockLabel) {\r\n nextBlockLabel.classList.remove('text-slate-500');\r\n nextBlockLabel.classList.add('text-emerald-400');\r\n nextBlockLabel.innerText = \"Click to proceed\";\r\n }\r\n\r\n const actionTitle = document.getElementById('b1-actionPanelTitle');\r\n const actionDesc = document.getElementById('b1-actionPanelDesc');\r\n const mainNextBtn = document.getElementById('b1-mainNextBtn');\r\n\r\n if (actionTitle) {\r\n actionTitle.innerText = \"Ready to move on?\";\r\n actionTitle.classList.add('text-emerald-400');\r\n }\r\n if (actionDesc) {\r\n actionDesc.innerText = \"You have watched the intro video. Proceed to the second block (user's journey).\";\r\n }\r\n if (mainNextBtn) {\r\n mainNextBtn.className = \"relative z-10 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-3.5 rounded-xl sm:rounded-2xl bg-gradient-to-r from-emerald-500 to-cyan-500 hover:brightness-110 hover:scale-[1.02] active:scale-95 text-slate-950 font-extrabold text-sm sm:text-base transition-all flex items-center justify-center space-x-2 shrink-0 cursor-pointer shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:shadow-[0_0_25px_rgba(16,185,129,0.5)]\";\r\n mainNextBtn.querySelector('i').classList.add('animate-bounce');\r\n }\r\n }\r\n\r\n function triggerEndVideoTestB1() {\r\n markVideoAsFinishedB1();\r\n }\r\n\r\n \/\/ Navigation Functions\r\n function scrollToSection(sectionNumber, smooth = false) {\r\n const section = document.getElementById(`section-${sectionNumber}`);\r\n if (section) {\r\n const headerOffset = window.innerWidth < 768 ? 60 : 0; \/\/ 60px for mobile header\r\n const elementPosition = section.getBoundingClientRect().top;\r\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\r\n\r\n \/\/ Ensure section is visible\r\n section.style.display = 'block';\r\n section.style.visibility = 'visible';\r\n\r\n \/\/ Mark section as viewed when navigated to\r\n markSectionAsViewed(sectionNumber);\r\n\r\n \/\/ Use smooth or instant scroll based on parameter\r\n if (smooth) {\r\n window.scrollTo({\r\n top: offsetPosition,\r\n behavior: 'smooth'\r\n });\r\n } else {\r\n window.scrollTo(0, offsetPosition);\r\n }\r\n } else {\r\n console.error(`Section ${sectionNumber} not found`);\r\n }\r\n }\r\n\r\n \/\/ Update active nav item on scroll\r\n const sections = document.querySelectorAll('.presentation-section');\r\n const navItems = document.querySelectorAll('.nav-item');\r\n\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.3\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const sectionId = entry.target.id;\r\n const sectionNumber = sectionId.replace('section-', '');\r\n \r\n navItems.forEach(item => {\r\n item.classList.remove('active');\r\n if (parseInt(item.dataset.section) === parseInt(sectionNumber)) {\r\n item.classList.add('active');\r\n }\r\n });\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n sections.forEach(section => {\r\n observer.observe(section);\r\n });\r\n\r\n \/\/ Keyboard events\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n closeUnifiedVideoModal();\r\n \/\/ Close mobile menu if open\r\n const menu = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n const hamburger = document.querySelector('.hamburger-btn');\r\n if (menu && menu.classList.contains('active')) {\r\n menu.classList.remove('active');\r\n overlay.classList.remove('active');\r\n hamburger.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n });\r\n\r\n \/\/ Smart mobile header auto-hide on scroll\r\n let lastScrollTop = 0;\r\n let scrollTimeout;\r\n\r\n window.addEventListener('scroll', function() {\r\n \/\/ Only apply on mobile\r\n if (window.innerWidth >= 768) return;\r\n\r\n const navSidebar = document.querySelector('.nav-sidebar');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n if (!navSidebar) return;\r\n\r\n \/\/ Don't hide header if menu is open\r\n if (menuContainer && menuContainer.classList.contains('active')) return;\r\n\r\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n \/\/ Clear previous timeout\r\n clearTimeout(scrollTimeout);\r\n\r\n \/\/ Throttle scroll events\r\n scrollTimeout = setTimeout(function() {\r\n if (scrollTop > lastScrollTop && scrollTop > 60) {\r\n \/\/ Scrolling down - hide header\r\n navSidebar.classList.add('header-hidden');\r\n navSidebar.classList.remove('header-visible');\r\n } else {\r\n \/\/ Scrolling up - show header\r\n navSidebar.classList.remove('header-hidden');\r\n navSidebar.classList.add('header-visible');\r\n }\r\n lastScrollTop = scrollTop;\r\n }, 15);\r\n }, { passive: true });\r\n\r\n \/\/ Block 2 Functions\r\n let activeStageB2 = 1;\r\n\r\n function activateStageB2(stageNumber) {\r\n activeStageB2 = stageNumber;\r\n\r\n \/\/ Update timeline buttons\r\n for (let i = 1; i <= 4; i++) {\r\n const btn = document.getElementById(`b2-tb-step-${i}`);\r\n if (btn) {\r\n const circle = btn.querySelector('div');\r\n if (i === stageNumber) {\r\n circle.classList.add('ring-4', 'ring-white', 'scale-110');\r\n } else {\r\n circle.classList.remove('ring-4', 'ring-white', 'scale-110');\r\n }\r\n }\r\n }\r\n\r\n \/\/ Update accordion cards\r\n for (let i = 1; i <= 4; i++) {\r\n const card = document.getElementById(`b2-card-stage-${i}`);\r\n const content = document.getElementById(`b2-content-stage-${i}`);\r\n const chevron = document.getElementById(`b2-chevron-stage-${i}`);\r\n\r\n if (card && content && chevron) {\r\n if (i === stageNumber) {\r\n content.classList.remove('hidden');\r\n chevron.style.transform = 'rotate(0deg)';\r\n card.classList.add('ring-2', 'ring-emerald-500\/30');\r\n } else {\r\n content.classList.add('hidden');\r\n chevron.style.transform = 'rotate(-90deg)';\r\n card.classList.remove('ring-2', 'ring-emerald-500\/30');\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize first stage\r\n activateStageB2(1);\r\n\r\n \/\/ Block 3 Functions\r\n const modulesDataB3 = {\r\n link: {\r\n icon: '\ud83d\udfe2',\r\n title: '\ud83d\udfe2 VEI LINK \u2014 Primary & camp assistant (0 \u2013 6 months)',\r\n desc: 'Relieves up to 90% of the household burden from the R\u00c5DE and Mottak camp reception during the first months of stay. Autonomously answers questions about the hostel, schedules, rules, and medical care.',\r\n badge: 'Camp Contour'\r\n },\r\n commune: {\r\n icon: '\ud83d\udd34',\r\n title: '\ud83d\udd34 VEI COMMUNE \u2014 Municipal navigator (1 \u2013 24+ months)',\r\n desc: 'A unified municipality database with navigation for all services: school, kindergartens, doctor, NAV, sports, and cultural integration.',\r\n badge: 'Municipal Contour'\r\n },\r\n scan: {\r\n icon: '\ud83d\udfe3',\r\n title: '\ud83d\udfe3 VEI SCAN \u2014 Computer vision and GDPR (0 \u2013 24+ months)',\r\n desc: 'Secure assistant for reading letters from NAV, bills, parking lots, and official documents with instant simple explanations.',\r\n badge: 'GDPR & Vision'\r\n },\r\n translate: {\r\n icon: '\ud83d\udd35',\r\n title: '\ud83d\udd35 TRANSLATE \u2014 Contextual AI translator (0 \u2013 24+ months)',\r\n desc: 'Smart voice and text translator for communication with doctors (Fastlege), authorities, and in everyday situations considering the context.',\r\n badge: 'Contextual AI'\r\n },\r\n sprak: {\r\n icon: '\ud83d\udfe0',\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K \u2014 Norwegian AI tutor (2 \u2013 24+ months)',\r\n desc: 'Interactive personalized simulator for practicing Norwegian in real situations and preparing for Norskpr\u00f8ve and CV creation.',\r\n badge: 'Language & Work'\r\n }\r\n };\r\n\r\n function switchModuleB3(key) {\r\n const data = modulesDataB3[key];\r\n if (!data) return;\r\n\r\n \/\/ Update module info display\r\n const icon = document.getElementById('b3-mod-icon');\r\n const title = document.getElementById('b3-mod-title');\r\n const desc = document.getElementById('b3-mod-desc');\r\n const badge = document.getElementById('b3-mod-badge');\r\n\r\n if (icon) icon.textContent = data.icon;\r\n if (title) title.textContent = data.title;\r\n if (desc) desc.textContent = data.desc;\r\n if (badge) badge.textContent = data.badge;\r\n\r\n \/\/ Update button states\r\n for (const modKey in modulesDataB3) {\r\n const btn = document.getElementById(`b3-mod-btn-${modKey}`);\r\n if (btn) {\r\n if (modKey === key) {\r\n btn.classList.add('ring-2', 'ring-white\/50', 'scale-105');\r\n } else {\r\n btn.classList.remove('ring-2', 'ring-white\/50', 'scale-105');\r\n }\r\n }\r\n }\r\n }\r\n\r\n\r\n let b5Player;\r\n let b5PlayerReady = false;\r\n\r\n window.ytPlayersInitCallbacks.push(function initYtPlayerB5() {\r\n if (b5Player) return;\r\n b5Player = new YT.Player('b5-youtubePlayer', {\r\n height: '100%',\r\n width: '100%',\r\n videoId: '6hsHdvgYS6U',\r\n playerVars: {\r\n 'playsinline': 1,\r\n 'rel': 0,\r\n 'modestbranding': 1\r\n },\r\n events: {\r\n 'onReady': onB5PlayerReady,\r\n 'onStateChange': onB5PlayerStateChange\r\n }\r\n });\r\n });\r\n\r\n function onB5PlayerReady(event) {\r\n b5PlayerReady = true;\r\n const b5PlayOverlay = document.getElementById('b5-playOverlay');\r\n const b5PlayPauseBtn = document.getElementById('b5-playPauseBtn');\r\n const b5MuteBtn = document.getElementById('b5-muteBtn');\r\n const b5FullscreenBtn = document.getElementById('b5-fullscreenBtn');\r\n const b5ProgressBar = document.getElementById('b5-progressBar');\r\n const b5CurrentTimeDisplay = document.getElementById('b5-currentTimeDisplay');\r\n const b5DurationDisplay = document.getElementById('b5-durationDisplay');\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n const b5StatusText = document.getElementById('b5-statusText');\r\n\r\n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435\r\n b5PlayOverlay.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n b5Player.playVideo();\r\n }\r\n });\r\n\r\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 Play\/Pause\r\n b5PlayPauseBtn.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n const playerState = b5Player.getPlayerState();\r\n if (playerState === YT.PlayerState.PLAYING) {\r\n b5Player.pauseVideo();\r\n } else {\r\n b5Player.playVideo();\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u043e\u043c\r\n b5MuteBtn.addEventListener('click', () => {\r\n if (b5PlayerReady) {\r\n if (b5Player.isMuted()) {\r\n b5Player.unMute();\r\n b5MuteBtn.innerHTML = '<i class=\"fa-solid fa-volume-high\"><\/i>';\r\n } else {\r\n b5Player.mute();\r\n b5MuteBtn.innerHTML = '<i class=\"fa-solid fa-volume-xmark text-red-400\"><\/i>';\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u041f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c\r\n b5FullscreenBtn.addEventListener('click', () => {\r\n const iframe = document.getElementById('b5-youtubePlayer');\r\n if (document.fullscreenElement) {\r\n document.exitFullscreen();\r\n } else if (iframe.requestFullscreen) {\r\n iframe.requestFullscreen();\r\n } else if (iframe.webkitRequestFullscreen) {\r\n iframe.webkitRequestFullscreen();\r\n }\r\n });\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430\r\n setInterval(() => {\r\n if (b5PlayerReady && b5Player.getCurrentTime) {\r\n const currentTime = b5Player.getCurrentTime();\r\n const duration = b5Player.getDuration();\r\n if (duration > 0) {\r\n const progress = (currentTime \/ duration) * 100;\r\n b5ProgressBar.value = progress;\r\n b5CurrentTimeDisplay.textContent = formatTime(currentTime);\r\n b5DurationDisplay.textContent = formatTime(duration);\r\n }\r\n }\r\n }, 1000);\r\n }\r\n\r\n function onB5PlayerStateChange(event) {\r\n const b5PlayPauseBtn = document.getElementById('b5-playPauseBtn');\r\n const b5PlayOverlay = document.getElementById('b5-playOverlay');\r\n const b5StatusText = document.getElementById('b5-statusText');\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n\r\n if (event.data === YT.PlayerState.PLAYING) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-pause\"><\/i>';\r\n b5PlayOverlay.classList.add('opacity-0');\r\n b5StatusText.textContent = 'Playing...';\r\n } else if (event.data === YT.PlayerState.PAUSED) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-play\"><\/i>';\r\n b5PlayOverlay.classList.remove('opacity-0');\r\n b5StatusText.textContent = 'Paused';\r\n } else if (event.data === YT.PlayerState.ENDED) {\r\n b5PlayPauseBtn.innerHTML = '<i class=\"fa-solid fa-play\"><\/i>';\r\n b5PlayOverlay.classList.remove('opacity-0');\r\n b5StatusText.textContent = 'Video completed';\r\n showB5FinalBadge();\r\n }\r\n }\r\n\r\n function formatTime(seconds) {\r\n if (isNaN(seconds)) return \"00:00\";\r\n const mins = Math.floor(seconds \/ 60);\r\n const secs = Math.floor(seconds % 60);\r\n return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\r\n }\r\n\r\n let b5BadgeShown = false;\r\n function showB5FinalBadge() {\r\n if (b5BadgeShown) return;\r\n b5BadgeShown = true;\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n b5FinalBadge.classList.remove('hidden');\r\n }\r\n\r\n function closeB5FinalBadge() {\r\n const b5FinalBadge = document.getElementById('b5-finalBadge');\r\n b5FinalBadge.classList.add('hidden');\r\n b5BadgeShown = false;\r\n }\r\n\r\n \/\/ Mobile Menu Functions\r\n function toggleMobileMenu() {\r\n const hamburgerBtn = document.querySelector('.hamburger-btn');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n \r\n hamburgerBtn.classList.toggle('active');\r\n menuContainer.classList.toggle('active');\r\n overlay.classList.toggle('active');\r\n \r\n \/\/ Prevent body scroll when menu is open\r\n if (menuContainer.classList.contains('active')) {\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n\r\n function closeMobileMenu() {\r\n const hamburgerBtn = document.querySelector('.hamburger-btn');\r\n const menuContainer = document.querySelector('.nav-items-container');\r\n const overlay = document.querySelector('.mobile-menu-overlay');\r\n \r\n hamburgerBtn.classList.remove('active');\r\n menuContainer.classList.remove('active');\r\n overlay.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Close mobile menu on escape key\r\n window.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeMobileMenu();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VEI Presentation — Professional Landing RU EN NO Home Migrant’s Journey Ecosystem Agencies VEI SHOWROOM VEI RU EN NO scrollToSection(2), 100); «> Migrant’s Journey scrollToSection(4), 100); «> Agencies<\/p>\n","protected":false},"author":1,"featured_media":676,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-807","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=807"}],"version-history":[{"count":11,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807\/revisions"}],"predecessor-version":[{"id":842,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/807\/revisions\/842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/media\/676"}],"wp:attachment":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}