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 \/* \u041a\u043d\u043e\u043f\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u0441\u0442\u0435\u043a \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\r\n .flex-col.sm\\\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\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 \/* \u0412\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u044b *\/\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\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b *\/\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\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn active\">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\">Hjem<\/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\">Migrantens reise<\/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\">\u00d8kosystem<\/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\">Etater<\/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\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn active\">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\">Hjem<\/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\">Migrantens reise<\/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\">\u00d8kosystem<\/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\">Etater<\/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 Konsept for en helhetlig digital integreringsreise i Norge\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=\"Se presentasjonen\" 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>Se presentasjonen med 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> Video med tale \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 Et prosjekt f\u00f8dt av personlig erfaring. Ett \u00f8kosystem best\u00e5ende av <span class=\"text-white font-semibold underline decoration-emerald-500 decoration-2\">5 moduler<\/span>, som kontinuerlig utvikler seg med hvert reelle trinn i tilpasningsprosessen.\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 (Hverdag)<\/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 (Kommune)<\/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-syn)<\/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 (Oversettelse)<\/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 (Spr\u00e5k)<\/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>Klikk p\u00e5 hvilken som helst modul<\/span> for mer informasjon (LINK Hverdag & Mottak, COMMUNE NAV osv.)\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\">Skapt ut fra den reelle integreringsprosessen og livet i Norge<\/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\">Uendelig LTV<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">S\u00f8ml\u00f8s kontekstutvikling og veiledning i 2+ \u00e5r<\/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\">Personvern f\u00f8rst (GDPR)<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Sikker arkitektur standardisert for kommuner<\/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\">TALE FRA 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 \u00abDet du ser p\u00e5 skjermen er VEI...\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\">\u00abHei! Mitt navn er ALEX.<\/p>\r\n <p>Det du ser p\u00e5 skjermen er <strong>VEI<\/strong>. Dette er et konsept for et nasjonalt digitalt integrerings\u00f8kosystem.<\/p>\r\n <p>Dette prosjektet er ikke en abstrakt id\u00e9 fra et utviklingskontor. Jeg utviklet dette konseptet personlig mens jeg gikk gjennom tilpasningsprosessen i Norge steg for steg. Hver dag, ved \u00e5 m\u00f8te reelle barrierer \u2014 i leiren, med dokumenter, i butikken, i kommunikasjon med etater \u2014 styrker og forbedrer jeg denne arkitekturen.<\/p>\r\n <p>Dette er et blikk fra innsiden p\u00e5 hvordan integrering kan gj\u00f8res effektivt. <strong>VEI tar personen i h\u00e5nden fra de f\u00f8rste minuttene i mottakssenteret<\/strong> og f\u00f8lger dem gjennom hele reisen: hjelper med \u00e5 finne seg til rette i den nye kommunen, forst\u00e5 norske dokumenter, oversette tekster og dokumenter, l\u00e6re spr\u00e5ket og komme i arbeid.<\/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 Etter \u00e5 ha gjennomf\u00f8rt en analyse, kan jeg trygt si: <strong>det finnes ingen tilsvarende integreringssystem eller app i noe annet land i verden.<\/strong>\r\n <\/div>\r\n <p>Norge kan bli det f\u00f8rste landet til \u00e5 skape et helt nytt produkt for millioner av flyktninger, innvandrere og migranter. Vi kan utvikle en ny tiln\u00e6rming til integrering som vil forenkle en persons reise i et nytt land. Dette er en stabel med nye teknologier, kunstig intelligens og grunnleggende menneskelige behov.<\/p>\r\n <p class=\"text-white font-medium italic pt-3 border-t border-white\/10 mt-2\">\r\n La oss se hvordan min personlige erfaring ble til en systeml\u00f8sning for hele staten\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>G\u00e5 videre<\/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\">VEIs verdi for offentlige etater<\/h3>\r\n <p class=\"text-xs text-slate-500 font-mono\">GDPR, Data-Driven Analyse, Sikkerhet<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeTextModal4()\" title=\"Lukk\" 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 La oss n\u00e5 snakke om den enorme direkte verdien VEI gir statlige strukturer og etater.\r\n <\/p>\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n N\u00e5r vi snakker med tjenestemenn og ledere, er det f\u00f8rste sp\u00f8rsm\u00e5let alltid sikkerhet og kontroll. Og VEI er designet for \u00e5 l\u00f8se disse sp\u00f8rsm\u00e5lene 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 Absolutt GDPR-sikkerhet og beskyttet milj\u00f8\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I stedet for at folk lekker offisielle brev fra UDI eller NAV til eksterne amerikanske nevrale nettverk, skaper VEI et lokalt, lukket milj\u00f8 for databehandling. Brevskanneren og produktgjenkjenningen fungerer internt i systemet. Personopplysninger, saksnummer og ansikter til forbipasserende forlater ikke den beskyttede infrastrukturen. Vi eliminerer risikoen for datalekkasje fullstendig!\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 Verifisert kommunikasjonskanal og beskyttelse mot informasjonskaos\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I dag drukner migranter i en str\u00f8m av falske nyheter og rykter fra uoffisielle chatter i sosiale medier. N\u00e5r VEI f\u00e5r offisiell status, f\u00e5r etatene \u2014 UDI, NAV, IMDi og kommunale administrasjoner \u2014 en direkte kommunikasjonskanal med innbyggerne. Etaten sender et offisielt PUSH-varsel. Personen ser at dette er 100% p\u00e5litelig informasjon fra staten, og kan med ett klikk g\u00e5 til deres offisielle nettside. Kaos og desinformasjon forsvinner umiddelbart.\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 \u00c6rlig Data-Driven analyse i stedet for gjetting\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n N\u00e5 \u00abgjetter\u00bb etater ofte bare p\u00e5 hvilke problemer flyktninger st\u00e5r overfor. VEI gir et anonymisert kontrollpanel og analyse av reelle klikk. Du ser i sanntid hvilke temaer som opptar innbyggerne akkurat n\u00e5 \u2014 helse, transport, kommunale regler eller utfylling av dokumenter.\r\n <\/p>\r\n <p class=\"text-slate-700 leading-relaxed mt-3\">\r\n Videre ser du dynamikken! Hvis analysen viser at en gruppe mennesker etter 6 m\u00e5neder bruker TRANSLATE-oversetteren 60% mindre, f\u00e5r du ikke en t\u00f8rr rapport, men en matematisk bekreftelse p\u00e5 at spr\u00e5kprogrammet i kommunen faktisk fungerer!\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 Fleksibel arkitektur (Co-Development)\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n VEI er ikke et statisk program. Vi er klare til \u00e5 jobbe tett med etatene. Hvis UDI, NAV eller en bestemt kommune trenger en spesifikk modul eller integrasjon med sine databaser \u2014 vil vi sette oss ned sammen, utarbeide logikken og lage den for etatens spesifikke oppgaver.\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>Lukk tekst<\/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 Presentasjon \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 av avslutning]\r\n <\/button>\r\n <a id=\"unifiedYoutubeLink\" href=\"https:\/\/youtu.be\/1MWesK1CrkM\" 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=\"\u00c5pne direkte p\u00e5 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=\"Lukk 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\">Videoen er ferdig<\/span>\r\n <h4 id=\"unifiedEndTitle\" class=\"xl sm:text-2xl font-heading font-black text-white\">Gjennomgangen er fullf\u00f8rt!<\/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 Du har sett videoen. Klikk p\u00e5 knappen nedenfor for \u00e5 g\u00e5 til neste seksjon.\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\">G\u00c5 TIL NESTE SEKSJON<\/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\">Se presentasjonen<\/h4>\r\n <p id=\"unifiedActionPanelDesc\" class=\"text-xs text-slate-400 max-w-md transition-colors\">\r\n L\u00e6r om VEI-konseptet. G\u00e5 til neste seksjon etter \u00e5 ha sett videoen.\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\">G\u00c5 VIDERE<\/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\">Navigasjon<\/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 sett\r\n <\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Bytt mellom presentasjonsseksjoner<\/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\">Fremgang for visning<\/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>Skjerm 2: Menneskets reise og utfordringer<\/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 Den reelle reisen til et menneske: fra ankomst til landet til integrering\r\n <\/h2>\r\n \r\n <p class=\"text-slate-600 text-sm max-w-2xl mx-auto\">\r\n Hvilke kritiske barrierer m\u00f8ter en migrant i Norge, og hvordan l\u00f8ser VEI-systemet disse utfordringene p\u00e5 hvert trinn?\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 Hovedvideokommentar\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 avsl\u00f8rer detaljene\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 Se videogjennomgang av utfordringene fra ALEX\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-sm\">\r\n Klikk for \u00e5 \u00e5pne fullskjermavspiller med navigasjon\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> \u00c5pne avspiller\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>Klikk p\u00e5 videoen for \u00e5 \u00e5pne avspilleren<\/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 Tale fra ALEX\r\n <\/h4>\r\n <p class=\"text-xs text-emerald-400 font-mono\">\r\n Grunnlegger av VEI \u2022 Personlig erfaring i Norge\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 SKJERM 2: Migrantens reise og kritiske utfordringer\r\n <\/p>\r\n <p>\r\n \u00abLa oss se i detalj p\u00e5 den reelle reisen til en person som ankommer Norge, og se \u00e6rlig p\u00e5 de kritiske problemene som oppst\u00e5r hver dag.\r\n <\/p>\r\n <p>\r\n Hele tilpasningsprosessen best\u00e5r av 4 globale etapper: men egentlig 5, siden leiren R\u00e5de og mottak er to forskjellige liv, men la oss ikke spore av.\r\n <\/p>\r\n <p>\r\n Det f\u00f8rste trinnet er det prim\u00e6re mottakssenteret R\u00c5DE og p\u00e5f\u00f8lgende bosetting i Mottak.\r\n <\/p>\r\n <p>\r\n Det andre er \u00e5 skaffe dokumenter og flytte til en kommune.\r\n <\/p>\r\n <p>\r\n Det tredje er hverdagsintegrering i den nye byen.\r\n <\/p>\r\n <p>\r\n Og det fjerde er studier, jobbs\u00f8king, vel, et helt selvstendig liv.\r\n <\/p>\r\n <p>\r\n La oss n\u00e5 se hva som skjer i praksis. Og her oppst\u00e5r et massivt, farlig problem som mange pr\u00f8ver \u00e5 tie om!\r\n <\/p>\r\n <p>\r\n Forst\u00e5 dette, folk i dag har rett og slett ikke et lovlig og trygt verkt\u00f8y. Hva gj\u00f8r de i desperasjon? De tar telefonen, tar bilde av et offisielt brev med personlig informasjon \u2014 DUF-nummer, adresser, diagnoser \u2014 og laster opp disse bildene til offentlige nevrale nettverk som ChatGPT eller Gemini! Dette er et direkte og alvorlig brudd p\u00e5 personvernsikkerheten. Personlig informasjon om innbyggere flyr av sted til eksterne tredjepartsservere.\r\n <\/p>\r\n <p>\r\n N\u00e5r en person ankommer R\u00c5DE eller Mottak, befinner de seg i en tilstand av alvorlig stress. Men alt dette snakket vi om for noen m\u00e5neder siden da jeg introduserte deg for den f\u00f8rste modulen LINK. N\u00e5 vil jeg snakke om VEI-appen som et modul\u00e6rt system, siden hver modul er en egen organisme i et helt system som jeg foresl\u00e5r \u00e5 skape.\r\n <\/p>\r\n <p>\r\n Men det mest interessante begynner senere, n\u00e5r en person flytter til en kommune. Papirpost fra UDI, NAV, Skatteetaten, kommunen eller sykehuset begynner \u00e5 komme i postkassen. Selv om vi allerede opplever dette i mottak. Dette er offisielle brev med juridiske termer og norsk kontekst. Personen forst\u00e5r ikke teksten, begynner \u00e5 f\u00e5 panikk, er redd for \u00e5 g\u00e5 glipp av en kritisk frist eller en avtale.\r\n <\/p>\r\n <p>\r\n Det samme skjer i supermarkeder og i byen: en person forst\u00e5r ikke innholdsfortegnelsen p\u00e5 et \u043f\u0440\u043e\u0434\u0443\u043a\u0442, tar bilde av emballasjen i butikken eller et skilt p\u00e5 gaten, tilfeldige mennesker og forbipasserende havner i bildet, og disse bildene flyr ut p\u00e5 internett bare for \u00e5 finne ut om det er et allergen der eller hva som st\u00e5r p\u00e5 skiltet. Jeg har observert dette mer enn \u00e9n gang, og har selv gjort det.\r\n <\/p>\r\n <p>\r\n Men dette kan ikke fortsette for alltid! Dette er utrolig farlig for borgernes og statens sikkerhet. Og n\u00e5r folk rundt ser dette, unng\u00e5r de med forsiktighet personen med kameraet, det er tydelig. Men folk har ikke noe alternativ!\r\n <\/p>\r\n <p>\r\n Jeg vil ikke g\u00e5 inn p\u00e5 alle detaljene jeg ser hver dag, men jeg vil bare si at det er mye \u00e5 jobbe med n\u00e5r det gjelder migranter og verden rundt oss. Tenk bare p\u00e5 det faktum at det er uklart hvor man kan f\u00e5 p\u00e5litelig informasjon i dag... Sosiale nettverk, falske videoer og enorm informasjonsst\u00f8y desorienterer en person. For eksempel, det vedtas en ny lov. Hvor f\u00e5r personen vite om den?? P\u00e5 sosiale medier gjennom \u00abhviskeleken\u00bb eller fra noen som fortalte dem det... og n\u00e5r en person begynner \u00e5 unders\u00f8ke saken, blir de forvirret. Hvorfor ikke informere folk via den samme appen som VEI om nyheter og nye lover fra ulike etater? Folk ville f\u00e5 et offisielt varsel rett i appen.\r\n <\/p>\r\n <p>\r\n Som et resultat bruker migranten timer p\u00e5 \u00e5 lete etter informasjon p\u00e5 internett, leser tvilsomme grupper p\u00e5 sosiale medier og h\u00f8rer p\u00e5 rykter i chatter. Og etater \u2014 UDI, NAV, IMDi og kommuner \u2014 bruker enorme menneskelige ressurser p\u00e5 \u00e5 rette feil i dokumenter og gjentatte henvendelser.\r\n <\/p>\r\n <p>\r\n P\u00e5 de neste skjermene vil jeg pr\u00f8ve \u00e5 vise deg hvordan VEI l\u00f8ser dette problemet systematisk og radikalt endrer logikken i samspillet mellom personen og staten. Jeg vil ogs\u00e5 vise 2. del av videoen der en familie flytter fra mottak, og der vil jeg avslutte dagens monolog med deg. G\u00e5 videre til neste seksjon.\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 Utforsk detaljene om utfordringene nedenfor\r\n <\/span>\r\n <button onclick=\"scrollToAccordionB2()\" class=\"text-emerald-400 font-bold hover:underline\">\r\n Til trinnene <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\">Trinn 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\">Trinn 2<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-rose-600\">Kommune<\/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\">Trinn 3<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-purple-600\">Hverdag & 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\">Trinn 4<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-amber-600\">Jobb<\/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 TRINN 1 \/\/ Mottak<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Prim\u00e6rt mottakssenter (R\u00c5DE) og bosetting i 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\">Barrierer og personlige utfordringer:<\/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\">Innledende sjokk:<\/strong> hverdagskaos, stress, spr\u00e5kbarriere med resepsjonen i leiren.<\/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\">Informasjonsblindhet:<\/strong> uvitenhet om leirens interne regler, timeplaner for vaskeri, lager og innlevering av s\u00f8knader.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>LINK-modulen<\/strong> fungerer som en autonom leirguide som svarer p\u00e5 90% av hverdagssp\u00f8rsm\u00e5l 24\/7 og avlaster resepsjonspersonalet.\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 TRINN 2 \/\/ Kommune<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Bosetting og flytting til en 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\">Barrierer og personlige utfordringer:<\/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\">Kultursjokk:<\/strong> ny by, ukjent milj\u00f8, mangel p\u00e5 forbindelser.<\/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\">Byr\u00e5kratisk kaos:<\/strong> registrering i kommunen, skoler, NAV \u2014 forskjellige systemer, ingen sammenheng.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulen <strong>COMMUNE<\/strong> \u2014 en felles database for kommunen med navigasjon for alle tjenester og automatiske p\u00e5minnelser.\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 TRINN 3 \/\/ GDPR<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Hverdagsintegrering og fare for datalekkasjer\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\">Barrierer og personlige utfordringer:<\/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\">Brev fra NAV:<\/strong> offisielle brev p\u00e5 norsk som skremmer og er uforst\u00e5elige.<\/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-risiko:<\/strong> folk bruker usikre apper for \u00e5 oversette dokumenter.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulene <strong>SCAN<\/strong> og <strong>TRANSLATE<\/strong> \u2014 sikker skanning og kontekstuell oversettelse innenfor det beskyttede VEI-\u00f8kosystemet.\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 TRINN 4 \/\/ Jobb<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Sysselsetting og integrering i samfunnet\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\">Barrierer og personlige utfordringer:<\/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\">Spr\u00e5kbarriere:<\/strong> utilstrekkelig norskniv\u00e5 for arbeid.<\/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\">Mangel p\u00e5 kunnskap om standarder:<\/strong> hvordan skrive en CV etter norske standarder.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulen <strong>SPR\u00c5K<\/strong> \u2014 en AI-tutor for \u00e5 praktisere spr\u00e5ket, og en CV-generator i henhold til norske standarder.\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>Skjerm 3: VEI \u00d8kosystem og LTV-strategi<\/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 \u00d8kosystem: Fra lokal guide til nasjonal veiviser\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 \u00d8ker applikasjonens livssyklus fra <strong>0\u20136 m\u00e5neder<\/strong> til <strong>2+ \u00e5r<\/strong>, ved \u00e5 opprettholde kontinuerlig digital kontakt med innbyggeren\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\">Videohilsen fra ALEX (Blokk 3)<\/span>\r\n <span class=\"block text-sm sm:text-base font-black text-slate-950\">\u25b6 SE VIDEOGJENNOMGANG AV \u00d8KOSYSTEMET OG LTV<\/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 Dynamisk interaktivt kart over VEIs 5 moduler\r\n <\/h3>\r\n <\/div>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">\r\n Klikk p\u00e5 hvilken som helst modul p\u00e5 tidslinjen for \u00e5 se detaljert beskrivelse\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>Utviklingsvektor: <strong>0\u20136 mnd $\\rightarrow$ 2+ \u00e5r<\/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 mnd<\/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\">Prim\u00e6r hverdagsassistent fra f\u00f8rste minutt i leiren.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Kommune & NAV<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Kommune, skole, barnehage, lege og integrering.<\/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+ mnd<\/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\">Trygg assistent for lesing av brev og dokumenter.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Kontekstuell AI<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Taleoversetter for myndigheter og hverdagsliv.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Spr\u00e5k & Jobb<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">AI-tutor for norsk og forberedelse til CV.<\/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 Prim\u00e6r- & mottaksassistent (0 \u2013 6 m\u00e5neder)\r\n <\/h4>\r\n <p id=\"b3-mod-desc\" class=\"text-xs text-slate-300 leading-relaxed mt-0.5\">\r\n Avlaster opptil 90% av hverdagssp\u00f8rsm\u00e5l for resepsjonen i R\u00c5DE og Mottak de f\u00f8rste m\u00e5nedene av oppholdet. Svarer autonomt p\u00e5 sp\u00f8rsm\u00e5l om innkvartering, timeplaner, regler og helsetjenester.\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 Leirmilj\u00f8\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 Risiko for LTV\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n Problemet med \u00abengangsapper\u00bb (Kort LTV)\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Den f\u00f8rste modulen LINK, som for tiden utvikles for leiren, trengs av en person i leiren i de f\u00f8rste <strong>0\u20136 m\u00e5nedene<\/strong>, hvis den forblir bare en kunnskapsbase.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n S\u00e5 snart hverdagsproblemer er l\u00f8st eller personen flytter til kommunen, blir den statiske applikasjonen uunng\u00e5elig slettet.\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> Tap av kontakt med etater:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Statistikken stopper opp, og etater slutter \u00e5 se hva som bekymrer personen videre og hvilke brennende problemer som oppst\u00e5r.\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 L\u00f8sning\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n S\u00f8ml\u00f8s kontekstutvikling\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n I stedet for \u00e5 slette applikasjonen, <strong>utvikler VEI seg sammen med brukeren<\/strong>. Kontekst og funksjonalitet endres avhengig av stadiet i tilpasningen.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Leir \u2192 Kommune \u2192 Hverdagsliv \u2192 Arbeid. \u00c9n app for <strong>2+ \u00e5r<\/strong> med kontinuerlig digital kommunikasjon.\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> Kontinuerlig analyse:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Offentlige etater mottar en kontinuerlig str\u00f8m av data om innbyggerens behov og kan forutse problemer.\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 Strategi\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n 10x \u00f8kning i livssyklus\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Standard integreringsapper lever i <strong>3\u20136 m\u00e5neder<\/strong>. VEI er laget for <strong>2+ \u00e5r<\/strong> med kontinuerlig bruk.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Dette er en <strong>10x \u00f8kning i LTV<\/strong> og en mulighet til \u00e5 bygge langsiktige relasjoner med innbyggeren.\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> Suksessmetrikk:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Retention rate 60%+ etter 12 m\u00e5neders bruk mot bransjegjennomsnittet p\u00e5 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>Skjerm 4: VEIs verdi for etater<\/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 staten: Datasikkerhet, transparent analyse og optimalisering av kaos\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 Fra ukontrollerte informasjonslekkasjer \u2014 til en verifisert 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\">Hele seksjonsteksten<\/span>\r\n <span class=\"block text-base font-bold\">Les: VEIs verdi for etater<\/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 Absolutt sikkerhet for personopplysninger\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> Problem med kaotiske lekkasjer:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I dag er migranter tvunget til \u00e5 skanne offisielle brev med personopplysninger og laste dem opp til eksterne nevrale nettverk. Dette er et massivt brudd p\u00e5 personvernet.\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> VEIs l\u00f8sning:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Et sikkert lukket milj\u00f8. Personen f\u00e5r den n\u00f8yaktige konteksten av dokumenter uten fare for \u00e5 lekke personlig informasjon.\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 Offisiell kommunikasjonskanal og beskyttelse mot desinformasjon\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> H\u00e5ndtering av informasjonskaos:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I stedet for timevis med s\u00f8k etter informasjon p\u00e5 internett \u2014 direkte verifiserte varsler fra <strong>UDI, NAV, IMDi og kommuner<\/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% tillit fra innbyggerne:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Personen mottar en offisiell nyhet, forst\u00e5r den sanne betydningen og kan med ett klikk g\u00e5 til etatens offisielle kilde.\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 Reell analyse fra bruk\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 planlegging:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Etater f\u00e5r verifiserte data om de reelle behovene til innbyggerne for effektiv ressursfordeling.\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> Prediktiv analyse:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Systemet forutsier potensielle problemer og lar etater handle proaktivt, ikke reaktivt.\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 Nasjonal standard for digital integrering\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> Felles \u00f8kosystem:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Norge kan bli det f\u00f8rste landet med en nasjonal standard for digital integrering av migranter.\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> Globalt potensial:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Den utviklede l\u00f8sningen kan skaleres til andre land, og skape en ny standard for integrering i Europa.\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 Siste modul \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 Siste videodemonstrasjon av systemet i reelle omgivelser.\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>Klikk for \u00e5 se demo<\/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\">Klar for avspilling<\/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>Se 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>Siste etappe<\/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 Veikart og Partnerskap\r\n <\/h1>\r\n <p class=\"text-slate-600 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n Fra konsept og prototype \u2014 til Norges nasjonale digitale integrasjonsstandard.\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\">Grunnleggerens visjon<\/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 er ikke bare et IT-produkt. Det er reisen til hver nykommer, omsatt til teknologi.<br><br>\r\n Jeg har personlig sett hvordan folk bukker under for hverdagens og byr\u00e5kratiets stress, og forlater Norge. M\u00e5let mitt er \u00e5 stoppe dette frafallet ved \u00e5 kombinere teknologi med ekspertisen til det norske statlige systemet\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\">Takk for tiden du har viet til VEI-prosjektet.<\/p>\r\n <p class=\"text-xs text-slate-400\">Presentasjonen er avsluttet. Vennligst se implementeringsveikartet nedenfor.<\/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\">Implementeringsplan (4 trinn)<\/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\">N\u00e5v\u00e6rende<\/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\">Utvikling & Test (Mottak)<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Oppretting av grunnleggende arkitektur for LINK-modulen. Intern testing av AI-assistenten for R\u00c5DE-leirscenarier.<\/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 i R\u00c5DE<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Lansering av pilotversjon i en ekte leir. Innhenting av tilbakemeldinger fra migranter og personell.<\/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\">Utvidelse i hele Norge<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Skalering til andre kommuner. Integrasjon med statlige systemer.<\/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\">Nasjonal standard<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Status som offisiell nasjonal standard for digital integrering av migranter.<\/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>Tilbake til starten<\/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>Kontakt meg<\/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 Presentasjon \u2014 ALEX\",\r\n videoId: \"1MWesK1CrkM\",\r\n youtubeUrl: \"https:\/\/youtu.be\/1MWesK1CrkM\",\r\n duration: 219, \/\/ 3min 39sec in seconds\r\n actionTitle: \"Se presentasjonen\",\r\n actionDesc: \"L\u00e6r om VEI-konseptet. G\u00e5 til neste seksjon etter \u00e5 ha sett videoen.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 2\",\r\n endTitle: \"VEI-konseptet er gjennomg\u00e5tt!\",\r\n endDesc: \"Du har l\u00e6rt om VEI-konseptet. Klikk p\u00e5 knappen nedenfor for \u00e5 se migrantens reise.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 2: MIGRANTENS REISE\",\r\n navTitle: \"Hjem\",\r\n navDesc: \"VEI-konsept\"\r\n },\r\n 2: {\r\n title: \"Skjerm 2: Menneskets reise og utfordringer\",\r\n videoId: \"RUTgtXmAePg\",\r\n youtubeUrl: \"https:\/\/youtu.be\/RUTgtXmAePg\",\r\n duration: 281, \/\/ 4min 41sec in seconds\r\n actionTitle: \"Skjerm 2: Migrantens reise\",\r\n actionDesc: \"Den reelle reisen til et menneske: fra ankomst til landet til integrering. G\u00e5 til neste seksjon for \u00e5 se den strategiske l\u00f8sningen.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 3\",\r\n endTitle: \"Gjennomgangen er fullf\u00f8rt!\",\r\n endDesc: \"Alle tilpasningstrinn er gjennomg\u00e5tt. Klikk p\u00e5 knappen nedenfor for \u00e5 se den strategiske l\u00f8sningen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 3: STRATEGI OG LTV\",\r\n navTitle: \"Migrantens reise\",\r\n navDesc: \"Utfordringer og l\u00f8sninger\"\r\n },\r\n 3: {\r\n title: \"Skjerm 3: VEI \u00d8kosystem og LTV-strategi\",\r\n videoId: \"NOJIk5Elpjw\",\r\n youtubeUrl: \"https:\/\/youtu.be\/NOJIk5Elpjw\",\r\n duration: 220, \/\/ 3min 40sec in seconds\r\n actionTitle: \"Skjerm 3: \u00d8kosystem\",\r\n actionDesc: \"VEIs 5 moduler og strategi for \u00e5 \u00f8ke livssyklusen fra 6 m\u00e5neder til 2+ \u00e5r.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 5\",\r\n endTitle: \"\u00d8kosystemet er gjennomg\u00e5tt!\",\r\n endDesc: \"Du har l\u00e6rt om VEIs 5 moduler og LTV-strategi. G\u00e5 videre til prototypedemonstrasjonen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 5: PROTOTYPE\",\r\n navTitle: \"\u00d8kosystem\",\r\n navDesc: \"LTV Strategi\"\r\n },\r\n 5: {\r\n title: \"VEI SHOWROOM\",\r\n videoId: \"I2ITyjmwBvc\",\r\n youtubeUrl: \"https:\/\/youtu.be\/I2ITyjmwBvc\",\r\n duration: 184, \/\/ 3min 04sec in seconds\r\n actionTitle: \"VEI SHOWROOM\",\r\n actionDesc: \"Se videodemonstrasjonen av systemet i reelle omgivelser.\",\r\n nextBtnText: \"G\u00c5 TIL SISTE SEKSJON\",\r\n endTitle: \"Presentasjonen er ferdig!\",\r\n endDesc: \"Takk for din tid. Presentasjonen er avsluttet.\",\r\n endBtnText: \"G\u00c5 TIL SISTE SKJERM\",\r\n navTitle: \"VEI SHOWROOM\",\r\n navDesc: \"SHOWROOM\"\r\n },\r\n 4: {\r\n title: \"Skjerm 4: VEIs verdi for etater\",\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: \"Skjerm 4: Etater\",\r\n actionDesc: \"Datasikkerhet, transparent analyse og optimalisering av kaos for statlige strukturer.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 5\",\r\n endTitle: \"Seksjonen er lest!\",\r\n endDesc: \"Du har l\u00e6rt om VEIs verdi for staten. G\u00e5 videre til prototypedemonstrasjonen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 5: PROTOTYPE\",\r\n navTitle: \"Etater\",\r\n navDesc: \"Tekstseksjon\"\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 sett`;\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 = '1MWesK1CrkM';\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 (Hverdag & Mottak)',\r\n text: 'Prim\u00e6r assistent fra de f\u00f8rste minuttene i mottakssenteret. Leirregler, tidsplaner, hverdagslig tilpasning og avlastning for resepsjonen.'\r\n },\r\n commune: {\r\n title: '\ud83d\udd34 VEI COMMUNE (Kommune & NAV)',\r\n text: 'Samhandling med kommunen, NAV og skoler. Jobbs\u00f8king, assistanse med CV og integrering i bylivet.'\r\n },\r\n scan: {\r\n title: '\ud83d\udfe3 VEI SCAN (AI-syn \/ Computer Vision)',\r\n text: 'Skanning av brev fra NAV, regninger, parkeringsb\u00f8ter, prislapper med \u00f8yeblikkelig forklaring av betydningen med enkle ord.'\r\n },\r\n translate: {\r\n title: '\ud83d\udd35 VEI TRANSLATE (Kontekstuell oversetter)',\r\n text: 'Smart kontekstuell tale- og tekstoversetter for kommunikasjon med leger (Fastlege) og offentlige etater.'\r\n },\r\n sprak: {\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K (Forsterket norskoppl\u00e6ring)',\r\n text: 'Interaktiv AI-tutor for praktisering av norsk i reelle situasjoner og forberedelse til 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 = \"Klikk for \u00e5 g\u00e5 videre\";\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 = \"Klar til \u00e5 g\u00e5 videre?\";\r\n actionTitle.classList.add('text-emerald-400');\r\n }\r\n if (actionDesc) {\r\n actionDesc.innerText = \"Du har sett introduksjonsvideoen. G\u00e5 videre til neste seksjon (migrantens reise).\";\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 Prim\u00e6r- & mottaksassistent (0 \u2013 6 m\u00e5neder)',\r\n desc: 'Avlaster opptil 90% av hverdagssp\u00f8rsm\u00e5l for resepsjonen i R\u00c5DE og Mottak de f\u00f8rste m\u00e5nedene av oppholdet. Svarer autonomt p\u00e5 sp\u00f8rsm\u00e5l om innkvartering, timeplaner, regler og helsetjenester.',\r\n badge: 'Leirmilj\u00f8'\r\n },\r\n commune: {\r\n icon: '\ud83d\udd34',\r\n title: '\ud83d\udd34 VEI COMMUNE \u2014 Kommunal navigator (1 \u2013 24+ m\u00e5neder)',\r\n desc: 'En felles database for kommunen med navigasjon for alle tjenester: skole, barnehage, lege, NAV, idrett og kulturintegrering.',\r\n badge: 'Kommunalt milj\u00f8'\r\n },\r\n scan: {\r\n icon: '\ud83d\udfe3',\r\n title: '\ud83d\udfe3 VEI SCAN \u2014 Datasyn og GDPR (0 \u2013 24+ m\u00e5neder)',\r\n desc: 'En trygg assistent for lesing av brev fra NAV, regninger, parkeringsb\u00f8ter og offisielle dokumenter, som forklarer innholdet umiddelbart med enkle ord.',\r\n badge: 'GDPR & Vision'\r\n },\r\n translate: {\r\n icon: '\ud83d\udd35',\r\n title: '\ud83d\udd35 TRANSLATE \u2014 Kontekstuell AI-oversetter (0 \u2013 24+ m\u00e5neder)',\r\n desc: 'Smart tale- og tekstoversetter for kommunikasjon med leger (Fastlege), offentlige etater og i hverdagssituasjoner med tanke p\u00e5 konteksten.',\r\n badge: 'Kontekstuell AI'\r\n },\r\n sprak: {\r\n icon: '\ud83d\udfe0',\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K \u2014 AI-tutor for norsk (2 \u2013 24+ m\u00e5neder)',\r\n desc: 'Interaktiv og persontilpasset simulator for \u00e5 praktisere norsk i reelle situasjoner og forberede til Norskpr\u00f8ve og utarbeidelse av CV.',\r\n badge: 'Spr\u00e5k & Jobb'\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: 'OSRz6vZ_JBY',\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 = 'Spiller av...';\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 = 'Pause';\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 fullf\u00f8rt';\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 Hjem Migrantens reise \u00d8kosystem Etater VEI SHOWROOM VEI RU EN NO scrollToSection(2), 100); «> Migrantens reise scrollToSection(4), 100); «> Etater<\/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-816","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816","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=816"}],"version-history":[{"count":22,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816\/revisions"}],"predecessor-version":[{"id":845,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816\/revisions\/845"}],"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=816"}],"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 \/* \u041a\u043d\u043e\u043f\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u0441\u0442\u0435\u043a \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\r\n .flex-col.sm\\\\:flex-row {\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\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 \/* \u0412\u0438\u0434\u0435\u043e\u043f\u043b\u0435\u0435\u0440\u044b *\/\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\/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b *\/\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\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn active\">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\">Hjem<\/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\">Migrantens reise<\/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\">\u00d8kosystem<\/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\">Etater<\/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\">EN<\/a>\r\n <a href=\"https:\/\/link.axi.so\/?page_id=816\" class=\"lang-btn active\">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\">Hjem<\/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\">Migrantens reise<\/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\">\u00d8kosystem<\/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\">Etater<\/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 Konsept for en helhetlig digital integreringsreise i Norge\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=\"Se presentasjonen\" 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>Se presentasjonen med 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> Video med tale \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 Et prosjekt f\u00f8dt av personlig erfaring. Ett \u00f8kosystem best\u00e5ende av <span class=\"text-white font-semibold underline decoration-emerald-500 decoration-2\">5 moduler<\/span>, som kontinuerlig utvikler seg med hvert reelle trinn i tilpasningsprosessen.\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 (Hverdag)<\/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 (Kommune)<\/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-syn)<\/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 (Oversettelse)<\/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 (Spr\u00e5k)<\/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>Klikk p\u00e5 hvilken som helst modul<\/span> for mer informasjon (LINK Hverdag & Mottak, COMMUNE NAV osv.)\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\">Skapt ut fra den reelle integreringsprosessen og livet i Norge<\/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\">Uendelig LTV<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">S\u00f8ml\u00f8s kontekstutvikling og veiledning i 2+ \u00e5r<\/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\">Personvern f\u00f8rst (GDPR)<\/h4>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\">Sikker arkitektur standardisert for kommuner<\/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\">TALE FRA 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 \u00abDet du ser p\u00e5 skjermen er VEI...\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\">\u00abHei! Mitt navn er ALEX.<\/p>\r\n <p>Det du ser p\u00e5 skjermen er <strong>VEI<\/strong>. Dette er et konsept for et nasjonalt digitalt integrerings\u00f8kosystem.<\/p>\r\n <p>Dette prosjektet er ikke en abstrakt id\u00e9 fra et utviklingskontor. Jeg utviklet dette konseptet personlig mens jeg gikk gjennom tilpasningsprosessen i Norge steg for steg. Hver dag, ved \u00e5 m\u00f8te reelle barrierer \u2014 i leiren, med dokumenter, i butikken, i kommunikasjon med etater \u2014 styrker og forbedrer jeg denne arkitekturen.<\/p>\r\n <p>Dette er et blikk fra innsiden p\u00e5 hvordan integrering kan gj\u00f8res effektivt. <strong>VEI tar personen i h\u00e5nden fra de f\u00f8rste minuttene i mottakssenteret<\/strong> og f\u00f8lger dem gjennom hele reisen: hjelper med \u00e5 finne seg til rette i den nye kommunen, forst\u00e5 norske dokumenter, oversette tekster og dokumenter, l\u00e6re spr\u00e5ket og komme i arbeid.<\/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 Etter \u00e5 ha gjennomf\u00f8rt en analyse, kan jeg trygt si: <strong>det finnes ingen tilsvarende integreringssystem eller app i noe annet land i verden.<\/strong>\r\n <\/div>\r\n <p>Norge kan bli det f\u00f8rste landet til \u00e5 skape et helt nytt produkt for millioner av flyktninger, innvandrere og migranter. Vi kan utvikle en ny tiln\u00e6rming til integrering som vil forenkle en persons reise i et nytt land. Dette er en stabel med nye teknologier, kunstig intelligens og grunnleggende menneskelige behov.<\/p>\r\n <p class=\"text-white font-medium italic pt-3 border-t border-white\/10 mt-2\">\r\n La oss se hvordan min personlige erfaring ble til en systeml\u00f8sning for hele staten\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>G\u00e5 videre<\/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\">VEIs verdi for offentlige etater<\/h3>\r\n <p class=\"text-xs text-slate-500 font-mono\">GDPR, Data-Driven Analyse, Sikkerhet<\/p>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeTextModal4()\" title=\"Lukk\" 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 La oss n\u00e5 snakke om den enorme direkte verdien VEI gir statlige strukturer og etater.\r\n <\/p>\r\n <p class=\"text-base sm:text-lg text-slate-700 leading-relaxed\">\r\n N\u00e5r vi snakker med tjenestemenn og ledere, er det f\u00f8rste sp\u00f8rsm\u00e5let alltid sikkerhet og kontroll. Og VEI er designet for \u00e5 l\u00f8se disse sp\u00f8rsm\u00e5lene 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 Absolutt GDPR-sikkerhet og beskyttet milj\u00f8\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I stedet for at folk lekker offisielle brev fra UDI eller NAV til eksterne amerikanske nevrale nettverk, skaper VEI et lokalt, lukket milj\u00f8 for databehandling. Brevskanneren og produktgjenkjenningen fungerer internt i systemet. Personopplysninger, saksnummer og ansikter til forbipasserende forlater ikke den beskyttede infrastrukturen. Vi eliminerer risikoen for datalekkasje fullstendig!\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 Verifisert kommunikasjonskanal og beskyttelse mot informasjonskaos\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I dag drukner migranter i en str\u00f8m av falske nyheter og rykter fra uoffisielle chatter i sosiale medier. N\u00e5r VEI f\u00e5r offisiell status, f\u00e5r etatene \u2014 UDI, NAV, IMDi og kommunale administrasjoner \u2014 en direkte kommunikasjonskanal med innbyggerne. Etaten sender et offisielt PUSH-varsel. Personen ser at dette er 100% p\u00e5litelig informasjon fra staten, og kan med ett klikk g\u00e5 til deres offisielle nettside. Kaos og desinformasjon forsvinner umiddelbart.\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 \u00c6rlig Data-Driven analyse i stedet for gjetting\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n N\u00e5 \u00abgjetter\u00bb etater ofte bare p\u00e5 hvilke problemer flyktninger st\u00e5r overfor. VEI gir et anonymisert kontrollpanel og analyse av reelle klikk. Du ser i sanntid hvilke temaer som opptar innbyggerne akkurat n\u00e5 \u2014 helse, transport, kommunale regler eller utfylling av dokumenter.\r\n <\/p>\r\n <p class=\"text-slate-700 leading-relaxed mt-3\">\r\n Videre ser du dynamikken! Hvis analysen viser at en gruppe mennesker etter 6 m\u00e5neder bruker TRANSLATE-oversetteren 60% mindre, f\u00e5r du ikke en t\u00f8rr rapport, men en matematisk bekreftelse p\u00e5 at spr\u00e5kprogrammet i kommunen faktisk fungerer!\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 Fleksibel arkitektur (Co-Development)\r\n <\/h4>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n VEI er ikke et statisk program. Vi er klare til \u00e5 jobbe tett med etatene. Hvis UDI, NAV eller en bestemt kommune trenger en spesifikk modul eller integrasjon med sine databaser \u2014 vil vi sette oss ned sammen, utarbeide logikken og lage den for etatens spesifikke oppgaver.\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>Lukk tekst<\/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 Presentasjon \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 av avslutning]\r\n <\/button>\r\n <a id=\"unifiedYoutubeLink\" href=\"https:\/\/youtu.be\/1MWesK1CrkM\" 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=\"\u00c5pne direkte p\u00e5 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=\"Lukk 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\">Videoen er ferdig<\/span>\r\n <h4 id=\"unifiedEndTitle\" class=\"xl sm:text-2xl font-heading font-black text-white\">Gjennomgangen er fullf\u00f8rt!<\/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 Du har sett videoen. Klikk p\u00e5 knappen nedenfor for \u00e5 g\u00e5 til neste seksjon.\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\">G\u00c5 TIL NESTE SEKSJON<\/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\">Se presentasjonen<\/h4>\r\n <p id=\"unifiedActionPanelDesc\" class=\"text-xs text-slate-400 max-w-md transition-colors\">\r\n L\u00e6r om VEI-konseptet. G\u00e5 til neste seksjon etter \u00e5 ha sett videoen.\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\">G\u00c5 VIDERE<\/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\">Navigasjon<\/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 sett\r\n <\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-400\">Bytt mellom presentasjonsseksjoner<\/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\">Fremgang for visning<\/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>Skjerm 2: Menneskets reise og utfordringer<\/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 Den reelle reisen til et menneske: fra ankomst til landet til integrering\r\n <\/h2>\r\n \r\n <p class=\"text-slate-600 text-sm max-w-2xl mx-auto\">\r\n Hvilke kritiske barrierer m\u00f8ter en migrant i Norge, og hvordan l\u00f8ser VEI-systemet disse utfordringene p\u00e5 hvert trinn?\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 Hovedvideokommentar\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 avsl\u00f8rer detaljene\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 Se videogjennomgang av utfordringene fra ALEX\r\n <\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 max-w-sm\">\r\n Klikk for \u00e5 \u00e5pne fullskjermavspiller med navigasjon\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> \u00c5pne avspiller\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>Klikk p\u00e5 videoen for \u00e5 \u00e5pne avspilleren<\/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 Tale fra ALEX\r\n <\/h4>\r\n <p class=\"text-xs text-emerald-400 font-mono\">\r\n Grunnlegger av VEI \u2022 Personlig erfaring i Norge\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 SKJERM 2: Migrantens reise og kritiske utfordringer\r\n <\/p>\r\n <p>\r\n \u00abLa oss se i detalj p\u00e5 den reelle reisen til en person som ankommer Norge, og se \u00e6rlig p\u00e5 de kritiske problemene som oppst\u00e5r hver dag.\r\n <\/p>\r\n <p>\r\n Hele tilpasningsprosessen best\u00e5r av 4 globale etapper: men egentlig 5, siden leiren R\u00e5de og mottak er to forskjellige liv, men la oss ikke spore av.\r\n <\/p>\r\n <p>\r\n Det f\u00f8rste trinnet er det prim\u00e6re mottakssenteret R\u00c5DE og p\u00e5f\u00f8lgende bosetting i Mottak.\r\n <\/p>\r\n <p>\r\n Det andre er \u00e5 skaffe dokumenter og flytte til en kommune.\r\n <\/p>\r\n <p>\r\n Det tredje er hverdagsintegrering i den nye byen.\r\n <\/p>\r\n <p>\r\n Og det fjerde er studier, jobbs\u00f8king, vel, et helt selvstendig liv.\r\n <\/p>\r\n <p>\r\n La oss n\u00e5 se hva som skjer i praksis. Og her oppst\u00e5r et massivt, farlig problem som mange pr\u00f8ver \u00e5 tie om!\r\n <\/p>\r\n <p>\r\n Forst\u00e5 dette, folk i dag har rett og slett ikke et lovlig og trygt verkt\u00f8y. Hva gj\u00f8r de i desperasjon? De tar telefonen, tar bilde av et offisielt brev med personlig informasjon \u2014 DUF-nummer, adresser, diagnoser \u2014 og laster opp disse bildene til offentlige nevrale nettverk som ChatGPT eller Gemini! Dette er et direkte og alvorlig brudd p\u00e5 personvernsikkerheten. Personlig informasjon om innbyggere flyr av sted til eksterne tredjepartsservere.\r\n <\/p>\r\n <p>\r\n N\u00e5r en person ankommer R\u00c5DE eller Mottak, befinner de seg i en tilstand av alvorlig stress. Men alt dette snakket vi om for noen m\u00e5neder siden da jeg introduserte deg for den f\u00f8rste modulen LINK. N\u00e5 vil jeg snakke om VEI-appen som et modul\u00e6rt system, siden hver modul er en egen organisme i et helt system som jeg foresl\u00e5r \u00e5 skape.\r\n <\/p>\r\n <p>\r\n Men det mest interessante begynner senere, n\u00e5r en person flytter til en kommune. Papirpost fra UDI, NAV, Skatteetaten, kommunen eller sykehuset begynner \u00e5 komme i postkassen. Selv om vi allerede opplever dette i mottak. Dette er offisielle brev med juridiske termer og norsk kontekst. Personen forst\u00e5r ikke teksten, begynner \u00e5 f\u00e5 panikk, er redd for \u00e5 g\u00e5 glipp av en kritisk frist eller en avtale.\r\n <\/p>\r\n <p>\r\n Det samme skjer i supermarkeder og i byen: en person forst\u00e5r ikke innholdsfortegnelsen p\u00e5 et \u043f\u0440\u043e\u0434\u0443\u043a\u0442, tar bilde av emballasjen i butikken eller et skilt p\u00e5 gaten, tilfeldige mennesker og forbipasserende havner i bildet, og disse bildene flyr ut p\u00e5 internett bare for \u00e5 finne ut om det er et allergen der eller hva som st\u00e5r p\u00e5 skiltet. Jeg har observert dette mer enn \u00e9n gang, og har selv gjort det.\r\n <\/p>\r\n <p>\r\n Men dette kan ikke fortsette for alltid! Dette er utrolig farlig for borgernes og statens sikkerhet. Og n\u00e5r folk rundt ser dette, unng\u00e5r de med forsiktighet personen med kameraet, det er tydelig. Men folk har ikke noe alternativ!\r\n <\/p>\r\n <p>\r\n Jeg vil ikke g\u00e5 inn p\u00e5 alle detaljene jeg ser hver dag, men jeg vil bare si at det er mye \u00e5 jobbe med n\u00e5r det gjelder migranter og verden rundt oss. Tenk bare p\u00e5 det faktum at det er uklart hvor man kan f\u00e5 p\u00e5litelig informasjon i dag... Sosiale nettverk, falske videoer og enorm informasjonsst\u00f8y desorienterer en person. For eksempel, det vedtas en ny lov. Hvor f\u00e5r personen vite om den?? P\u00e5 sosiale medier gjennom \u00abhviskeleken\u00bb eller fra noen som fortalte dem det... og n\u00e5r en person begynner \u00e5 unders\u00f8ke saken, blir de forvirret. Hvorfor ikke informere folk via den samme appen som VEI om nyheter og nye lover fra ulike etater? Folk ville f\u00e5 et offisielt varsel rett i appen.\r\n <\/p>\r\n <p>\r\n Som et resultat bruker migranten timer p\u00e5 \u00e5 lete etter informasjon p\u00e5 internett, leser tvilsomme grupper p\u00e5 sosiale medier og h\u00f8rer p\u00e5 rykter i chatter. Og etater \u2014 UDI, NAV, IMDi og kommuner \u2014 bruker enorme menneskelige ressurser p\u00e5 \u00e5 rette feil i dokumenter og gjentatte henvendelser.\r\n <\/p>\r\n <p>\r\n P\u00e5 de neste skjermene vil jeg pr\u00f8ve \u00e5 vise deg hvordan VEI l\u00f8ser dette problemet systematisk og radikalt endrer logikken i samspillet mellom personen og staten. Jeg vil ogs\u00e5 vise 2. del av videoen der en familie flytter fra mottak, og der vil jeg avslutte dagens monolog med deg. G\u00e5 videre til neste seksjon.\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 Utforsk detaljene om utfordringene nedenfor\r\n <\/span>\r\n <button onclick=\"scrollToAccordionB2()\" class=\"text-emerald-400 font-bold hover:underline\">\r\n Til trinnene <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\">Trinn 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\">Trinn 2<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-rose-600\">Kommune<\/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\">Trinn 3<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-purple-600\">Hverdag & 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\">Trinn 4<\/span>\r\n <span class=\"text-xs font-medium text-slate-700 group-hover:text-amber-600\">Jobb<\/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 TRINN 1 \/\/ Mottak<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Prim\u00e6rt mottakssenter (R\u00c5DE) og bosetting i 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\">Barrierer og personlige utfordringer:<\/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\">Innledende sjokk:<\/strong> hverdagskaos, stress, spr\u00e5kbarriere med resepsjonen i leiren.<\/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\">Informasjonsblindhet:<\/strong> uvitenhet om leirens interne regler, timeplaner for vaskeri, lager og innlevering av s\u00f8knader.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n <strong>LINK-modulen<\/strong> fungerer som en autonom leirguide som svarer p\u00e5 90% av hverdagssp\u00f8rsm\u00e5l 24\/7 og avlaster resepsjonspersonalet.\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 TRINN 2 \/\/ Kommune<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Bosetting og flytting til en 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\">Barrierer og personlige utfordringer:<\/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\">Kultursjokk:<\/strong> ny by, ukjent milj\u00f8, mangel p\u00e5 forbindelser.<\/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\">Byr\u00e5kratisk kaos:<\/strong> registrering i kommunen, skoler, NAV \u2014 forskjellige systemer, ingen sammenheng.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulen <strong>COMMUNE<\/strong> \u2014 en felles database for kommunen med navigasjon for alle tjenester og automatiske p\u00e5minnelser.\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 TRINN 3 \/\/ GDPR<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Hverdagsintegrering og fare for datalekkasjer\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\">Barrierer og personlige utfordringer:<\/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\">Brev fra NAV:<\/strong> offisielle brev p\u00e5 norsk som skremmer og er uforst\u00e5elige.<\/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-risiko:<\/strong> folk bruker usikre apper for \u00e5 oversette dokumenter.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulene <strong>SCAN<\/strong> og <strong>TRANSLATE<\/strong> \u2014 sikker skanning og kontekstuell oversettelse innenfor det beskyttede VEI-\u00f8kosystemet.\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 TRINN 4 \/\/ Jobb<\/span>\r\n <h3 class=\"text-sm font-heading font-semibold text-slate-900\">\r\n Sysselsetting og integrering i samfunnet\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\">Barrierer og personlige utfordringer:<\/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\">Spr\u00e5kbarriere:<\/strong> utilstrekkelig norskniv\u00e5 for arbeid.<\/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\">Mangel p\u00e5 kunnskap om standarder:<\/strong> hvordan skrive en CV etter norske standarder.<\/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> VEIs systeml\u00f8sning:\r\n <\/div>\r\n <p class=\"text-xs sm:text-sm font-semibold leading-relaxed\">\r\n Modulen <strong>SPR\u00c5K<\/strong> \u2014 en AI-tutor for \u00e5 praktisere spr\u00e5ket, og en CV-generator i henhold til norske standarder.\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>Skjerm 3: VEI \u00d8kosystem og LTV-strategi<\/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 \u00d8kosystem: Fra lokal guide til nasjonal veiviser\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 \u00d8ker applikasjonens livssyklus fra <strong>0\u20136 m\u00e5neder<\/strong> til <strong>2+ \u00e5r<\/strong>, ved \u00e5 opprettholde kontinuerlig digital kontakt med innbyggeren\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\">Videohilsen fra ALEX (Blokk 3)<\/span>\r\n <span class=\"block text-sm sm:text-base font-black text-slate-950\">\u25b6 SE VIDEOGJENNOMGANG AV \u00d8KOSYSTEMET OG LTV<\/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 Dynamisk interaktivt kart over VEIs 5 moduler\r\n <\/h3>\r\n <\/div>\r\n <p class=\"text-xs text-slate-300 mt-0.5\">\r\n Klikk p\u00e5 hvilken som helst modul p\u00e5 tidslinjen for \u00e5 se detaljert beskrivelse\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>Utviklingsvektor: <strong>0\u20136 mnd $\\rightarrow$ 2+ \u00e5r<\/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 mnd<\/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\">Prim\u00e6r hverdagsassistent fra f\u00f8rste minutt i leiren.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Kommune & NAV<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Kommune, skole, barnehage, lege og integrering.<\/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+ mnd<\/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\">Trygg assistent for lesing av brev og dokumenter.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Kontekstuell AI<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">Taleoversetter for myndigheter og hverdagsliv.<\/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+ mnd<\/span>\r\n <\/div>\r\n <span class=\"block text-xs font-bold text-white mt-1\">Spr\u00e5k & Jobb<\/span>\r\n <p class=\"text-[11px] text-slate-300 mt-0.5 line-clamp-2\">AI-tutor for norsk og forberedelse til CV.<\/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 Prim\u00e6r- & mottaksassistent (0 \u2013 6 m\u00e5neder)\r\n <\/h4>\r\n <p id=\"b3-mod-desc\" class=\"text-xs text-slate-300 leading-relaxed mt-0.5\">\r\n Avlaster opptil 90% av hverdagssp\u00f8rsm\u00e5l for resepsjonen i R\u00c5DE og Mottak de f\u00f8rste m\u00e5nedene av oppholdet. Svarer autonomt p\u00e5 sp\u00f8rsm\u00e5l om innkvartering, timeplaner, regler og helsetjenester.\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 Leirmilj\u00f8\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 Risiko for LTV\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n Problemet med \u00abengangsapper\u00bb (Kort LTV)\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Den f\u00f8rste modulen LINK, som for tiden utvikles for leiren, trengs av en person i leiren i de f\u00f8rste <strong>0\u20136 m\u00e5nedene<\/strong>, hvis den forblir bare en kunnskapsbase.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n S\u00e5 snart hverdagsproblemer er l\u00f8st eller personen flytter til kommunen, blir den statiske applikasjonen uunng\u00e5elig slettet.\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> Tap av kontakt med etater:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Statistikken stopper opp, og etater slutter \u00e5 se hva som bekymrer personen videre og hvilke brennende problemer som oppst\u00e5r.\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 L\u00f8sning\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n S\u00f8ml\u00f8s kontekstutvikling\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n I stedet for \u00e5 slette applikasjonen, <strong>utvikler VEI seg sammen med brukeren<\/strong>. Kontekst og funksjonalitet endres avhengig av stadiet i tilpasningen.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Leir \u2192 Kommune \u2192 Hverdagsliv \u2192 Arbeid. \u00c9n app for <strong>2+ \u00e5r<\/strong> med kontinuerlig digital kommunikasjon.\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> Kontinuerlig analyse:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Offentlige etater mottar en kontinuerlig str\u00f8m av data om innbyggerens behov og kan forutse problemer.\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 Strategi\r\n <\/span>\r\n <\/div>\r\n\r\n <h3 class=\"text-lg font-heading font-extrabold text-white\">\r\n 10x \u00f8kning i livssyklus\r\n <\/h3>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Standard integreringsapper lever i <strong>3\u20136 m\u00e5neder<\/strong>. VEI er laget for <strong>2+ \u00e5r<\/strong> med kontinuerlig bruk.\r\n <\/p>\r\n\r\n <p class=\"text-xs sm:text-sm text-slate-300 leading-relaxed\">\r\n Dette er en <strong>10x \u00f8kning i LTV<\/strong> og en mulighet til \u00e5 bygge langsiktige relasjoner med innbyggeren.\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> Suksessmetrikk:<\/strong>\r\n <p class=\"text-[11px] leading-relaxed\">\r\n Retention rate 60%+ etter 12 m\u00e5neders bruk mot bransjegjennomsnittet p\u00e5 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>Skjerm 4: VEIs verdi for etater<\/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 staten: Datasikkerhet, transparent analyse og optimalisering av kaos\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 Fra ukontrollerte informasjonslekkasjer \u2014 til en verifisert 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\">Hele seksjonsteksten<\/span>\r\n <span class=\"block text-base font-bold\">Les: VEIs verdi for etater<\/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 Absolutt sikkerhet for personopplysninger\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> Problem med kaotiske lekkasjer:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I dag er migranter tvunget til \u00e5 skanne offisielle brev med personopplysninger og laste dem opp til eksterne nevrale nettverk. Dette er et massivt brudd p\u00e5 personvernet.\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> VEIs l\u00f8sning:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Et sikkert lukket milj\u00f8. Personen f\u00e5r den n\u00f8yaktige konteksten av dokumenter uten fare for \u00e5 lekke personlig informasjon.\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 Offisiell kommunikasjonskanal og beskyttelse mot desinformasjon\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> H\u00e5ndtering av informasjonskaos:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n I stedet for timevis med s\u00f8k etter informasjon p\u00e5 internett \u2014 direkte verifiserte varsler fra <strong>UDI, NAV, IMDi og kommuner<\/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% tillit fra innbyggerne:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Personen mottar en offisiell nyhet, forst\u00e5r den sanne betydningen og kan med ett klikk g\u00e5 til etatens offisielle kilde.\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 Reell analyse fra bruk\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 planlegging:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Etater f\u00e5r verifiserte data om de reelle behovene til innbyggerne for effektiv ressursfordeling.\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> Prediktiv analyse:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Systemet forutsier potensielle problemer og lar etater handle proaktivt, ikke reaktivt.\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 Nasjonal standard for digital integrering\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> Felles \u00f8kosystem:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Norge kan bli det f\u00f8rste landet med en nasjonal standard for digital integrering av migranter.\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> Globalt potensial:\r\n <\/strong>\r\n <p class=\"text-slate-700 leading-relaxed\">\r\n Den utviklede l\u00f8sningen kan skaleres til andre land, og skape en ny standard for integrering i Europa.\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 Siste modul \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 Siste videodemonstrasjon av systemet i reelle omgivelser.\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>Klikk for \u00e5 se demo<\/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\">Klar for avspilling<\/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>Se 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>Siste etappe<\/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 Veikart og Partnerskap\r\n <\/h1>\r\n <p class=\"text-slate-600 text-sm sm:text-base font-medium max-w-2xl mx-auto\">\r\n Fra konsept og prototype \u2014 til Norges nasjonale digitale integrasjonsstandard.\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\">Grunnleggerens visjon<\/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 er ikke bare et IT-produkt. Det er reisen til hver nykommer, omsatt til teknologi.<br><br>\r\n Jeg har personlig sett hvordan folk bukker under for hverdagens og byr\u00e5kratiets stress, og forlater Norge. M\u00e5let mitt er \u00e5 stoppe dette frafallet ved \u00e5 kombinere teknologi med ekspertisen til det norske statlige systemet\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\">Takk for tiden du har viet til VEI-prosjektet.<\/p>\r\n <p class=\"text-xs text-slate-400\">Presentasjonen er avsluttet. Vennligst se implementeringsveikartet nedenfor.<\/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\">Implementeringsplan (4 trinn)<\/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\">N\u00e5v\u00e6rende<\/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\">Utvikling & Test (Mottak)<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Oppretting av grunnleggende arkitektur for LINK-modulen. Intern testing av AI-assistenten for R\u00c5DE-leirscenarier.<\/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 i R\u00c5DE<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Lansering av pilotversjon i en ekte leir. Innhenting av tilbakemeldinger fra migranter og personell.<\/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\">Utvidelse i hele Norge<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Skalering til andre kommuner. Integrasjon med statlige systemer.<\/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\">Nasjonal standard<\/h3>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">Status som offisiell nasjonal standard for digital integrering av migranter.<\/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>Tilbake til starten<\/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>Kontakt meg<\/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 Presentasjon \u2014 ALEX\",\r\n videoId: \"1MWesK1CrkM\",\r\n youtubeUrl: \"https:\/\/youtu.be\/1MWesK1CrkM\",\r\n duration: 219, \/\/ 3min 39sec in seconds\r\n actionTitle: \"Se presentasjonen\",\r\n actionDesc: \"L\u00e6r om VEI-konseptet. G\u00e5 til neste seksjon etter \u00e5 ha sett videoen.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 2\",\r\n endTitle: \"VEI-konseptet er gjennomg\u00e5tt!\",\r\n endDesc: \"Du har l\u00e6rt om VEI-konseptet. Klikk p\u00e5 knappen nedenfor for \u00e5 se migrantens reise.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 2: MIGRANTENS REISE\",\r\n navTitle: \"Hjem\",\r\n navDesc: \"VEI-konsept\"\r\n },\r\n 2: {\r\n title: \"Skjerm 2: Menneskets reise og utfordringer\",\r\n videoId: \"RUTgtXmAePg\",\r\n youtubeUrl: \"https:\/\/youtu.be\/RUTgtXmAePg\",\r\n duration: 281, \/\/ 4min 41sec in seconds\r\n actionTitle: \"Skjerm 2: Migrantens reise\",\r\n actionDesc: \"Den reelle reisen til et menneske: fra ankomst til landet til integrering. G\u00e5 til neste seksjon for \u00e5 se den strategiske l\u00f8sningen.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 3\",\r\n endTitle: \"Gjennomgangen er fullf\u00f8rt!\",\r\n endDesc: \"Alle tilpasningstrinn er gjennomg\u00e5tt. Klikk p\u00e5 knappen nedenfor for \u00e5 se den strategiske l\u00f8sningen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 3: STRATEGI OG LTV\",\r\n navTitle: \"Migrantens reise\",\r\n navDesc: \"Utfordringer og l\u00f8sninger\"\r\n },\r\n 3: {\r\n title: \"Skjerm 3: VEI \u00d8kosystem og LTV-strategi\",\r\n videoId: \"NOJIk5Elpjw\",\r\n youtubeUrl: \"https:\/\/youtu.be\/NOJIk5Elpjw\",\r\n duration: 220, \/\/ 3min 40sec in seconds\r\n actionTitle: \"Skjerm 3: \u00d8kosystem\",\r\n actionDesc: \"VEIs 5 moduler og strategi for \u00e5 \u00f8ke livssyklusen fra 6 m\u00e5neder til 2+ \u00e5r.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 5\",\r\n endTitle: \"\u00d8kosystemet er gjennomg\u00e5tt!\",\r\n endDesc: \"Du har l\u00e6rt om VEIs 5 moduler og LTV-strategi. G\u00e5 videre til prototypedemonstrasjonen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 5: PROTOTYPE\",\r\n navTitle: \"\u00d8kosystem\",\r\n navDesc: \"LTV Strategi\"\r\n },\r\n 5: {\r\n title: \"VEI SHOWROOM\",\r\n videoId: \"I2ITyjmwBvc\",\r\n youtubeUrl: \"https:\/\/youtu.be\/I2ITyjmwBvc\",\r\n duration: 184, \/\/ 3min 04sec in seconds\r\n actionTitle: \"VEI SHOWROOM\",\r\n actionDesc: \"Se videodemonstrasjonen av systemet i reelle omgivelser.\",\r\n nextBtnText: \"G\u00c5 TIL SISTE SEKSJON\",\r\n endTitle: \"Presentasjonen er ferdig!\",\r\n endDesc: \"Takk for din tid. Presentasjonen er avsluttet.\",\r\n endBtnText: \"G\u00c5 TIL SISTE SKJERM\",\r\n navTitle: \"VEI SHOWROOM\",\r\n navDesc: \"SHOWROOM\"\r\n },\r\n 4: {\r\n title: \"Skjerm 4: VEIs verdi for etater\",\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: \"Skjerm 4: Etater\",\r\n actionDesc: \"Datasikkerhet, transparent analyse og optimalisering av kaos for statlige strukturer.\",\r\n nextBtnText: \"G\u00c5 TIL BLOKK 5\",\r\n endTitle: \"Seksjonen er lest!\",\r\n endDesc: \"Du har l\u00e6rt om VEIs verdi for staten. G\u00e5 videre til prototypedemonstrasjonen.\",\r\n endBtnText: \"G\u00c5 TIL BLOKK 5: PROTOTYPE\",\r\n navTitle: \"Etater\",\r\n navDesc: \"Tekstseksjon\"\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 sett`;\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 = '1MWesK1CrkM';\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 (Hverdag & Mottak)',\r\n text: 'Prim\u00e6r assistent fra de f\u00f8rste minuttene i mottakssenteret. Leirregler, tidsplaner, hverdagslig tilpasning og avlastning for resepsjonen.'\r\n },\r\n commune: {\r\n title: '\ud83d\udd34 VEI COMMUNE (Kommune & NAV)',\r\n text: 'Samhandling med kommunen, NAV og skoler. Jobbs\u00f8king, assistanse med CV og integrering i bylivet.'\r\n },\r\n scan: {\r\n title: '\ud83d\udfe3 VEI SCAN (AI-syn \/ Computer Vision)',\r\n text: 'Skanning av brev fra NAV, regninger, parkeringsb\u00f8ter, prislapper med \u00f8yeblikkelig forklaring av betydningen med enkle ord.'\r\n },\r\n translate: {\r\n title: '\ud83d\udd35 VEI TRANSLATE (Kontekstuell oversetter)',\r\n text: 'Smart kontekstuell tale- og tekstoversetter for kommunikasjon med leger (Fastlege) og offentlige etater.'\r\n },\r\n sprak: {\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K (Forsterket norskoppl\u00e6ring)',\r\n text: 'Interaktiv AI-tutor for praktisering av norsk i reelle situasjoner og forberedelse til 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 = \"Klikk for \u00e5 g\u00e5 videre\";\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 = \"Klar til \u00e5 g\u00e5 videre?\";\r\n actionTitle.classList.add('text-emerald-400');\r\n }\r\n if (actionDesc) {\r\n actionDesc.innerText = \"Du har sett introduksjonsvideoen. G\u00e5 videre til neste seksjon (migrantens reise).\";\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 Prim\u00e6r- & mottaksassistent (0 \u2013 6 m\u00e5neder)',\r\n desc: 'Avlaster opptil 90% av hverdagssp\u00f8rsm\u00e5l for resepsjonen i R\u00c5DE og Mottak de f\u00f8rste m\u00e5nedene av oppholdet. Svarer autonomt p\u00e5 sp\u00f8rsm\u00e5l om innkvartering, timeplaner, regler og helsetjenester.',\r\n badge: 'Leirmilj\u00f8'\r\n },\r\n commune: {\r\n icon: '\ud83d\udd34',\r\n title: '\ud83d\udd34 VEI COMMUNE \u2014 Kommunal navigator (1 \u2013 24+ m\u00e5neder)',\r\n desc: 'En felles database for kommunen med navigasjon for alle tjenester: skole, barnehage, lege, NAV, idrett og kulturintegrering.',\r\n badge: 'Kommunalt milj\u00f8'\r\n },\r\n scan: {\r\n icon: '\ud83d\udfe3',\r\n title: '\ud83d\udfe3 VEI SCAN \u2014 Datasyn og GDPR (0 \u2013 24+ m\u00e5neder)',\r\n desc: 'En trygg assistent for lesing av brev fra NAV, regninger, parkeringsb\u00f8ter og offisielle dokumenter, som forklarer innholdet umiddelbart med enkle ord.',\r\n badge: 'GDPR & Vision'\r\n },\r\n translate: {\r\n icon: '\ud83d\udd35',\r\n title: '\ud83d\udd35 TRANSLATE \u2014 Kontekstuell AI-oversetter (0 \u2013 24+ m\u00e5neder)',\r\n desc: 'Smart tale- og tekstoversetter for kommunikasjon med leger (Fastlege), offentlige etater og i hverdagssituasjoner med tanke p\u00e5 konteksten.',\r\n badge: 'Kontekstuell AI'\r\n },\r\n sprak: {\r\n icon: '\ud83d\udfe0',\r\n title: '\ud83d\udfe0 VEI SPR\u00c5K \u2014 AI-tutor for norsk (2 \u2013 24+ m\u00e5neder)',\r\n desc: 'Interaktiv og persontilpasset simulator for \u00e5 praktisere norsk i reelle situasjoner og forberede til Norskpr\u00f8ve og utarbeidelse av CV.',\r\n badge: 'Spr\u00e5k & Jobb'\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: 'OSRz6vZ_JBY',\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 = 'Spiller av...';\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 = 'Pause';\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 fullf\u00f8rt';\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 Hjem Migrantens reise \u00d8kosystem Etater VEI SHOWROOM VEI RU EN NO scrollToSection(2), 100); «> Migrantens reise scrollToSection(4), 100); «> Etater<\/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-816","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816","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=816"}],"version-history":[{"count":22,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816\/revisions"}],"predecessor-version":[{"id":845,"href":"https:\/\/link.axi.so\/index.php?rest_route=\/wp\/v2\/pages\/816\/revisions\/845"}],"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=816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}