{"id":32649,"date":"2025-11-26T08:50:22","date_gmt":"2025-11-26T08:50:22","guid":{"rendered":"https:\/\/darksn.de\/?page_id=32649"},"modified":"2025-11-26T09:34:06","modified_gmt":"2025-11-26T09:34:06","slug":"work-iq","status":"publish","type":"page","link":"https:\/\/darksn.de\/en\/work-iq\/","title":{"rendered":"Work IQ"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"32649\" class=\"elementor elementor-32649\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28022d3 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"28022d3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7aaf8e elementor-widget elementor-widget-html\" data-id=\"a7aaf8e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #222; background: #f8f9fa; }\n\n        \/* Hero Section *\/\n        .hero {\n            background-image: url(https:\/\/images.unsplash.com\/photo-1758626099012-2904337e9c60?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGFpJTIwd29ya3xlbnwwfHwwfHx8Mg%3D%3D);\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n            color: white;\n            padding: 80px 0;\n            text-align: center;\n            position: relative;\n        }\n\n        .hero::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            z-index: 1;\n        }\n\n        .hero-content {\n            max-width: 1200px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n            min-height: 400px;\n        }\n\n        .hero-card {\n            background: rgba(0, 0, 0, 0.7);\n            padding: 3rem;\n            max-width: 750px;\n            color: white;\n            position: relative;\n            top: 75px;\n        }\n\n        .hero-card h1 {\n            font-size: 1.2rem;\n            margin-bottom: 1rem;\n            color: white;\n        }\n\n        .hero-card p {\n            font-size: 1.1rem;\n            margin-bottom: 2rem;\n            color: rgba(255, 255, 255, 0.9);\n            opacity: 1;\n        }\n\n        .cta-button {\n            background: #F93825;\n            color: white;\n            padding: 15px 30px;\n            border: none;\n            font-size: 1.1rem;\n            font-weight: bold;\n            cursor: pointer;\n            transition: background-color 0.3s;\n        }\n\n        .cta-button:hover {\n            background: white;\n            color: #F93825;\n        }\n\n        @media (max-width: 768px) {\n            .hero h1 {\n                font-size: 1.8rem;\n            }\n\n            .hero-card {\n                padding: 2rem;\n                max-width: 100%;\n            }\n\n            .hero-card p {\n                font-size: 1rem;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .hero h1 {\n                font-size: 1.5rem;\n            }\n\n            .hero-card {\n                padding: 1.5rem;\n            }\n\n            .hero-card p {\n                font-size: 0.9rem;\n            }\n        }\n\n        \/* Problems Section *\/\n        .problems {\n            background: #f8f9fa;\n            padding: 80px 0;\n        }\n\n        .problems-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .problems-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 4rem;\n            align-items: center;\n        }\n\n        .problems-left {\n            position: relative;\n            overflow: visible;\n            display: flex;\n            flex-direction: column;\n            gap: 2rem;\n        }\n\n        .problem-image-card {\n            position: relative;\n            overflow: hidden;\n            border-radius: 15px;\n            width: 100%;\n            height: 200px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            transition: all 0.4s ease;\n        }\n\n        .problem-image-card:nth-child(1) {\n            margin-right: 20%;\n            height: 250px;\n        }\n\n        .problem-image-card:nth-child(2) {\n            margin-left: 5%;\n            height: 250px;\n        }\n\n        .problem-image-card:nth-child(3) {\n            margin-right: 10%;\n            height: 250px;\n        }\n\n        .problem-image-card img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.5s ease;\n        }\n\n        .problem-image-card:hover img {\n            transform: scale(1.08);\n        }\n\n        .problem-image-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(135deg, rgba(249, 56, 37, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);\n            opacity: 0;\n            transition: opacity 0.4s ease;\n            z-index: 1;\n        }\n\n        .problem-image-card:hover::before {\n            opacity: 1;\n        }\n\n        .problem-image-overlay {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);\n            padding: 1.5rem;\n            color: white !important;\n            opacity: 0;\n            transition: opacity 0.4s ease;\n            z-index: 2;\n        }\n\n        .problem-image-card:hover .problem-image-overlay {\n            opacity: 1;\n        }\n\n        .problem-image-overlay h4 {\n            font-size: 1.1rem;\n            margin-bottom: 0.3rem;\n            font-weight: 600;\n            color: white !important;\n        }\n\n        .problem-image-overlay p {\n            font-size: 0.9rem;\n            opacity: 0.9;\n        }\n\n        .problems-right h2 {\n            font-size: 2.5rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n        }\n\n        .problems-subtitle {\n            font-size: 1.3rem;\n            color: #F93825;\n            font-weight: 600;\n            margin-bottom: 1.5rem;\n        }\n\n        .problems-description {\n            font-size: 1.1rem;\n            line-height: 1.8;\n            color: #666;\n            margin-bottom: 2rem;\n        }\n\n        .problems-list {\n            list-style: none;\n            display: flex;\n            flex-direction: column;\n            gap: 1.5rem;\n        }\n\n        .problem-item {\n            background: white;\n            padding: 1.5rem;\n            border-radius: 15px;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n            border-left: 4px solid #F93825;\n            display: flex;\n            align-items: flex-start;\n            gap: 1rem;\n            transition: all 0.3s ease;\n        }\n\n        .problem-item:hover {\n            transform: translateX(10px);\n            box-shadow: 0 8px 25px rgba(249, 56, 37, 0.2);\n        }\n\n        .problem-icon {\n            font-size: 2rem;\n            color: #F93825;\n            min-width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .problem-content h3 {\n            font-size: 1.1rem;\n            color: #222222;\n            margin-bottom: 0.5rem;\n            font-weight: 600;\n        }\n\n        .problem-content p {\n            font-size: 0.95rem;\n            color: #666;\n            line-height: 1.6;\n        }\n\n        @media (max-width: 768px) {\n            .problems-grid {\n                grid-template-columns: 1fr;\n                gap: 2rem;\n            }\n\n            .problem-image-card {\n                height: 180px !important;\n                margin-left: 0 !important;\n                margin-right: 0 !important;\n            }\n\n            .problems-right h2 {\n                font-size: 2rem;\n            }\n\n            .problems-subtitle {\n                font-size: 1.1rem;\n            }\n        }\n\n        \/* Solution Overview Section *\/\n        .solution-overview {\n            padding: 100px 0;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n        }\n\n        .solution-overview-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .solution-overview-title {\n            text-align: center;\n            font-size: 2.5rem;\n            margin-bottom: 1rem;\n            color: #222222;\n            font-weight: 700;\n        }\n\n        .solution-overview-subtitle {\n            text-align: center;\n            font-size: 1.2rem;\n            margin-bottom: 4rem;\n            color: #666;\n        }\n\n        .solution-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 2.5rem;\n        }\n\n        .solution-card {\n            background: white;\n            padding: 3rem 2.5rem;\n            border-radius: 20px;\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n            transition: all 0.4s ease;\n            position: relative;\n            overflow: hidden;\n            border: 2px solid transparent;\n        }\n\n        .solution-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, #F93825, #ff6b6b);\n            transform: scaleX(0);\n            transition: transform 0.4s ease;\n        }\n\n        .solution-card:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);\n            border-color: #F93825;\n        }\n\n        .solution-card:hover::before {\n            transform: scaleX(1);\n        }\n\n        .solution-number {\n            position: absolute;\n            top: 2rem;\n            right: 2rem;\n            font-size: 4rem;\n            font-weight: 700;\n            color: rgba(249, 56, 37, 0.1);\n            line-height: 1;\n        }\n\n        .solution-icon {\n            font-size: 4rem;\n            color: #F93825;\n            margin-bottom: 2rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .solution-card h3 {\n            font-size: 1.8rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n            position: relative;\n            z-index: 2;\n        }\n\n        .solution-card .solution-subtitle {\n            font-size: 1.1rem;\n            color: #F93825;\n            font-weight: 600;\n            margin-bottom: 1.5rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .solution-card p {\n            color: #666;\n            line-height: 1.8;\n            font-size: 1.05rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        @media (max-width: 1024px) {\n            .solution-grid {\n                grid-template-columns: 1fr;\n                gap: 2rem;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .solution-overview-title {\n                font-size: 2rem;\n            }\n\n            .solution-overview-subtitle {\n                font-size: 1rem;\n            }\n\n            .solution-card {\n                padding: 2rem 1.5rem;\n            }\n\n            .solution-icon {\n                font-size: 3rem;\n            }\n\n            .solution-card h3 {\n                font-size: 1.5rem;\n            }\n        }\n\n        \/* How It Works Section *\/\n        .how-it-works {\n            padding: 100px 0;\n            background: white;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .how-it-works::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"30\" height=\"30\" patternUnits=\"userSpaceOnUse\"><circle cx=\"15\" cy=\"15\" r=\"1.5\" fill=\"%23f0f0f0\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23dots)\"\/><\/svg>');\n            opacity: 0.4;\n            z-index: 1;\n        }\n\n        @keyframes pulse {\n            0%, 100% {\n                transform: scale(1);\n                opacity: 1;\n            }\n            50% {\n                transform: scale(1.05);\n                opacity: 0.8;\n            }\n        }\n\n        @keyframes flow {\n            0% {\n                transform: translateY(-100%);\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                transform: translateY(100%);\n                opacity: 0;\n            }\n        }\n\n        @keyframes rotate {\n            from {\n                transform: rotate(0deg);\n            }\n            to {\n                transform: rotate(360deg);\n            }\n        }\n\n        @keyframes dataFlow {\n            0% {\n                left: -20px;\n                opacity: 0;\n            }\n            50% {\n                opacity: 1;\n            }\n            100% {\n                left: calc(100% + 20px);\n                opacity: 0;\n            }\n        }\n\n        .how-it-works-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .how-it-works-title {\n            text-align: center;\n            font-size: 2.5rem;\n            margin-bottom: 1rem;\n            color: #222222;\n            font-weight: 700;\n        }\n\n        .how-it-works-subtitle {\n            text-align: center;\n            font-size: 1.2rem;\n            margin-bottom: 4rem;\n            color: #666;\n        }\n\n        .process-timeline {\n            position: relative;\n            padding: 2rem 0;\n        }\n\n        .timeline-line {\n            position: absolute;\n            left: 50%;\n            top: 0;\n            bottom: 0;\n            width: 4px;\n            background: linear-gradient(to bottom, transparent, #F93825, #F93825, transparent);\n            transform: translateX(-50%);\n            z-index: 1;\n        }\n\n        .timeline-line::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 30px;\n            background: linear-gradient(to bottom, #F93825, transparent);\n            animation: flow 3s ease-in-out infinite;\n        }\n\n        .timeline-line::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -2px;\n            width: 8px;\n            height: 8px;\n            background: #F93825;\n            border-radius: 50%;\n            box-shadow: 0 0 20px rgba(249, 56, 37, 0.6);\n            animation: pulse 2s ease-in-out infinite;\n        }\n\n        .process-steps {\n            display: flex;\n            flex-direction: column;\n            gap: 3rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .process-step {\n            display: flex;\n            align-items: center;\n            gap: 4rem;\n            position: relative;\n            opacity: 0;\n            transform: translateY(30px);\n            transition: all 0.8s ease;\n        }\n\n        .process-step.animate {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .process-step:nth-child(odd) {\n            flex-direction: row;\n        }\n\n        .process-step:nth-child(even) {\n            flex-direction: row-reverse;\n        }\n\n        .step-content {\n            flex: 1;\n            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n            padding: 3rem;\n            border-radius: 20px;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n            border: 2px solid transparent;\n            transition: all 0.4s ease;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .step-content::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, #F93825, #ff6b6b);\n            transform: scaleX(0);\n            transition: transform 0.4s ease;\n        }\n\n        .step-content:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 30px 60px rgba(249, 56, 37, 0.2);\n            border-color: #F93825;\n        }\n\n        .step-content:hover::before {\n            transform: scaleX(1);\n        }\n\n        .step-number {\n            position: absolute;\n            top: 2rem;\n            right: 2rem;\n            font-size: 5rem;\n            font-weight: 700;\n            color: rgba(249, 56, 37, 0.1);\n            line-height: 1;\n        }\n\n        .step-icon-wrapper {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, #F93825 0%, #ff6b6b 100%);\n            border-radius: 50%;\n            margin-bottom: 1.5rem;\n            box-shadow: 0 10px 30px rgba(249, 56, 37, 0.3);\n            position: relative;\n            z-index: 2;\n            transition: all 0.4s ease;\n            animation: pulse 3s ease-in-out infinite;\n        }\n\n        .step-icon-wrapper::before {\n            content: '';\n            position: absolute;\n            inset: -10px;\n            border: 3px solid #F93825;\n            border-radius: 50%;\n            opacity: 0.3;\n            animation: pulse 2s ease-in-out infinite;\n        }\n\n        .step-icon-wrapper::after {\n            content: '';\n            position: absolute;\n            inset: -20px;\n            border: 2px solid #F93825;\n            border-radius: 50%;\n            opacity: 0.1;\n            animation: pulse 2.5s ease-in-out infinite;\n        }\n\n        .step-content:hover .step-icon-wrapper {\n            transform: scale(1.15) rotate(360deg);\n            box-shadow: 0 15px 40px rgba(249, 56, 37, 0.5);\n            animation: none;\n        }\n\n        .step-icon {\n            font-size: 2.5rem;\n            color: white;\n        }\n\n        .step-content h3 {\n            font-size: 1.8rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n            position: relative;\n            z-index: 2;\n        }\n\n        .step-content p {\n            color: #666;\n            line-height: 1.8;\n            font-size: 1.1rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .step-visual {\n            flex: 0 0 200px;\n            text-align: center;\n            position: relative;\n        }\n\n        .step-visual-circle {\n            width: 120px;\n            height: 120px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto;\n            position: relative;\n            z-index: 2;\n            transition: all 0.4s ease;\n            animation: pulse 4s ease-in-out infinite;\n        }\n\n        .step-visual-circle::before {\n            content: '';\n            position: absolute;\n            inset: -15px;\n            border: 2px solid rgba(249, 56, 37, 0.2);\n            border-radius: 50%;\n            animation: pulse 3s ease-in-out infinite;\n        }\n\n        .process-step:hover .step-visual-circle {\n            transform: scale(1.15);\n            animation: rotate 3s linear infinite;\n        }\n\n        .step-visual-icon {\n            font-size: 3.5rem;\n            color: #F93825;\n            opacity: 0.8;\n            transition: all 0.4s ease;\n        }\n\n        .process-step:hover .step-visual-icon {\n            transform: scale(1.2);\n            opacity: 1;\n        }\n\n        .step-arrow {\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 50px;\n            height: 50px;\n            background: linear-gradient(135deg, #F93825 0%, #ff6b6b 100%);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-size: 1.3rem;\n            box-shadow: 0 8px 20px rgba(249, 56, 37, 0.4);\n            z-index: 3;\n            opacity: 0;\n            transition: all 0.4s ease;\n            animation: pulse 2s ease-in-out infinite;\n        }\n\n        .step-arrow::before {\n            content: '';\n            position: absolute;\n            inset: -5px;\n            border: 2px solid #F93825;\n            border-radius: 50%;\n            opacity: 0.5;\n            animation: pulse 1.5s ease-in-out infinite;\n        }\n\n        .process-step:hover .step-arrow {\n            opacity: 1;\n            transform: translateX(-50%) translateY(-5px) scale(1.1);\n            box-shadow: 0 12px 30px rgba(249, 56, 37, 0.6);\n        }\n\n        .data-flow-particles {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            pointer-events: none;\n            overflow: hidden;\n            z-index: 1;\n        }\n\n        .data-particle {\n            position: absolute;\n            width: 8px;\n            height: 8px;\n            background: #F93825;\n            border-radius: 50%;\n            opacity: 0.6;\n            animation: dataFlow 4s linear infinite;\n        }\n\n        .data-particle:nth-child(1) {\n            top: 20%;\n            animation-delay: 0s;\n            width: 6px;\n            height: 6px;\n        }\n\n        .data-particle:nth-child(2) {\n            top: 40%;\n            animation-delay: 1s;\n            width: 10px;\n            height: 10px;\n        }\n\n        .data-particle:nth-child(3) {\n            top: 60%;\n            animation-delay: 2s;\n            width: 7px;\n            height: 7px;\n        }\n\n        .data-particle:nth-child(4) {\n            top: 80%;\n            animation-delay: 3s;\n            width: 9px;\n            height: 9px;\n        }\n\n        .step-content::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            right: -20px;\n            width: 40px;\n            height: 2px;\n            background: linear-gradient(90deg, #F93825, transparent);\n            opacity: 0;\n            transition: all 0.4s ease;\n            z-index: 3;\n        }\n\n        .process-step:nth-child(odd) .step-content::after {\n            display: block;\n        }\n\n        .process-step:nth-child(even) .step-content::after {\n            left: -20px;\n            right: auto;\n            background: linear-gradient(90deg, transparent, #F93825);\n        }\n\n        .process-step:hover .step-content::after {\n            opacity: 1;\n            width: 60px;\n        }\n\n        .process-step:nth-child(1) .step-arrow {\n            bottom: -60px;\n        }\n\n        .process-step:nth-child(2) .step-arrow {\n            bottom: -60px;\n        }\n\n        .process-step:nth-child(3) .step-arrow {\n            bottom: -60px;\n        }\n\n        .process-step:nth-child(4) .step-arrow {\n            bottom: -60px;\n        }\n\n        @media (max-width: 1024px) {\n            .timeline-line {\n                left: 30px;\n            }\n\n            .process-step {\n                flex-direction: column !important;\n                gap: 2rem;\n                padding-left: 60px;\n            }\n\n            .step-visual {\n                flex: none;\n                order: -1;\n            }\n\n            .step-arrow {\n                display: none;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .how-it-works-title {\n                font-size: 2rem;\n            }\n\n            .how-it-works-subtitle {\n                font-size: 1rem;\n            }\n\n            .process-step {\n                padding-left: 40px;\n            }\n\n            .step-content {\n                padding: 2rem 1.5rem;\n            }\n\n            .step-content h3 {\n                font-size: 1.5rem;\n            }\n        }\n\n        \/* Use Cases Section *\/\n        .use-cases {\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            padding: 100px 0;\n            position: relative;\n        }\n\n        .use-cases-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .use-cases-title {\n            text-align: center;\n            font-size: 2.5rem;\n            margin-bottom: 1rem;\n            color: #222222;\n            font-weight: 700;\n        }\n\n        .use-cases-subtitle {\n            text-align: center;\n            font-size: 1.2rem;\n            margin-bottom: 4rem;\n            color: #666;\n        }\n\n        .use-cases-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 1.5rem;\n            grid-auto-rows: minmax(200px, auto);\n        }\n\n        .use-case-card:nth-child(1) {\n            grid-column: span 2;\n        }\n\n        .use-case-card:nth-child(3) {\n            grid-row: span 2;\n        }\n\n        .use-case-card:nth-child(6) {\n            grid-column: span 2;\n        }\n\n        .use-case-card:nth-child(7) {\n            grid-row: span 2;\n        }\n\n        .use-case-card {\n            background: white;\n            padding: 2rem;\n            border-radius: 16px;\n            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n            transition: all 0.3s ease;\n            border: 1px solid rgba(0, 0, 0, 0.06);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .use-case-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 4px;\n            height: 100%;\n            background: #F93825;\n            transform: scaleY(0);\n            transition: transform 0.3s ease;\n        }\n\n        .use-case-card:hover::before {\n            transform: scaleY(1);\n        }\n\n        .use-case-card:hover {\n            transform: translateY(-6px);\n            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);\n            border-color: rgba(0, 0, 0, 0.1);\n        }\n\n        .use-case-icon {\n            width: 64px;\n            height: 64px;\n            background: rgba(249, 56, 37, 0.08);\n            border-radius: 14px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 2rem;\n            color: #F93825;\n            margin-bottom: 1.5rem;\n            transition: all 0.3s ease;\n        }\n\n        .use-case-card:hover .use-case-icon {\n            background: rgba(249, 56, 37, 0.12);\n            transform: translateY(-2px);\n        }\n\n        .use-case-card h3 {\n            color: #222222;\n            margin-bottom: 1rem;\n            font-size: 1.4rem;\n            font-weight: 600;\n            line-height: 1.3;\n        }\n\n        .use-case-card p {\n            color: #666;\n            line-height: 1.7;\n            font-size: 1rem;\n        }\n\n        @media (max-width: 1024px) {\n            .use-cases-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n\n            .use-case-card:nth-child(n) {\n                grid-column: span 1;\n                grid-row: span 1;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .use-cases-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .use-cases-title {\n                font-size: 2rem;\n            }\n\n            .use-cases-subtitle {\n                font-size: 1rem;\n            }\n\n            .use-case-card {\n                padding: 2rem 1.5rem;\n            }\n\n            .use-case-icon {\n                font-size: 2.5rem;\n            }\n\n            .use-case-card h3 {\n                font-size: 1.3rem;\n            }\n        }\n\n        \/* Benefits Story Section *\/\n        .benefits-story {\n            padding: 100px 0;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            position: relative;\n        }\n\n        .benefits-story-container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .benefits-story-title {\n            text-align: center;\n            font-size: 2.5rem;\n            margin-bottom: 1rem;\n            color: #222222;\n            font-weight: 700;\n        }\n\n        .benefits-story-subtitle {\n            text-align: center;\n            font-size: 1.2rem;\n            color: #666;\n        }\n\n        .daily-story {\n            padding: 4rem;\n            margin-bottom: 4rem;\n        }\n\n        .story-intro {\n            text-align: center;\n            margin-bottom: 3rem;\n        }\n\n        .story-intro h3 {\n            font-size: 2rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n        }\n\n        .story-intro p {\n            font-size: 1.2rem;\n            color: #666;\n            line-height: 1.8;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .day-timeline {\n            position: relative;\n            padding: 2rem 0;\n        }\n\n        .day-timeline::before {\n            content: '';\n            position: absolute;\n            left: 120px;\n            top: 0;\n            bottom: 0;\n            width: 3px;\n            background: linear-gradient(to bottom, #F93825, #ff6b6b, #F93825);\n        }\n\n        .timeline-item {\n            display: flex;\n            gap: 3rem;\n            margin-bottom: 3rem;\n            position: relative;\n            opacity: 0;\n            transform: translateX(-30px);\n            transition: all 0.6s ease;\n        }\n\n        .timeline-item.animate {\n            opacity: 1;\n            transform: translateX(0);\n        }\n\n        .timeline-time {\n            flex: 0 0 100px;\n            text-align: right;\n            padding-top: 0.5rem;\n        }\n\n        .timeline-time span {\n            display: inline-block;\n            width: 40px;\n            height: 40px;\n            background: #F93825;\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: 700;\n            font-size: 0.9rem;\n            box-shadow: 0 5px 15px rgba(249, 56, 37, 0.3);\n            position: relative;\n            z-index: 2;\n        }\n\n        .timeline-content {\n            flex: 1;\n            padding: 2rem;\n            transition: all 0.3s ease;\n        }\n\n        .timeline-content h4 {\n            font-size: 1.4rem;\n            color: #222222;\n            margin-bottom: 0.5rem;\n            font-weight: 600;\n        }\n\n        .timeline-content .before-after {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 2rem;\n            margin-top: 1.5rem;\n        }\n\n        .before, .after {\n            padding: 1.5rem;\n            border-radius: 12px;\n        }\n\n        .before {\n            background: rgba(255, 0, 0, 0.05);\n            border-left: 3px solid #dc3545;\n        }\n\n        .after {\n            background: rgba(249, 56, 37, 0.05);\n            border-left: 3px solid #F93825;\n        }\n\n        .before h5, .after h5 {\n            font-size: 0.9rem;\n            font-weight: 600;\n            margin-bottom: 0.5rem;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n\n        .before h5 {\n            color: #dc3545;\n        }\n\n        .after h5 {\n            color: #F93825;\n        }\n\n        .before p, .after p {\n            font-size: 0.95rem;\n            line-height: 1.6;\n            color: #666;\n        }\n\n        .benefits-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 2rem;\n            margin-top: 4rem;\n        }\n\n        .benefit-card {\n            background: white;\n            padding: 2.5rem;\n            border-radius: 16px;\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\n            text-align: center;\n            transition: all 0.3s ease;\n            border: 1px solid rgba(0, 0, 0, 0.06);\n        }\n\n        .benefit-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 15px 40px rgba(249, 56, 37, 0.15);\n        }\n\n        .benefit-icon {\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, rgba(249, 56, 37, 0.1) 0%, rgba(249, 56, 37, 0.05) 100%);\n            border-radius: 20px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 2.5rem;\n            color: #F93825;\n            margin-bottom: 1.5rem;\n            transition: all 0.3s ease;\n        }\n\n        .benefit-card:hover .benefit-icon {\n            background: linear-gradient(135deg, #F93825 0%, #ff6b6b 100%);\n            color: white;\n            transform: scale(1.1);\n        }\n\n        .benefit-card h4 {\n            font-size: 1.3rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 600;\n        }\n\n        .benefit-card p {\n            color: #666;\n            line-height: 1.7;\n            font-size: 1rem;\n        }\n\n        @media (max-width: 1024px) {\n            .daily-story {\n                padding: 3rem 2rem;\n            }\n\n            .day-timeline::before {\n                left: 60px;\n            }\n\n            .timeline-time {\n                flex: 0 0 60px;\n            }\n\n            .timeline-item {\n                gap: 2rem;\n            }\n\n            .timeline-content .before-after {\n                grid-template-columns: 1fr;\n            }\n\n            .benefits-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 768px) {\n            .benefits-story-title {\n                font-size: 2rem;\n            }\n\n            .benefits-story-subtitle {\n                font-size: 1rem;\n            }\n\n            .daily-story {\n                padding: 2rem 1.5rem;\n            }\n\n            .day-timeline::before {\n                left: 30px;\n            }\n\n            .timeline-time {\n                flex: 0 0 40px;\n            }\n\n            .timeline-item {\n                flex-direction: column;\n                gap: 1rem;\n            }\n\n            .timeline-time {\n                text-align: left;\n            }\n\n            .benefits-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \/* Testimonials Section *\/\n        .testimonials-section {\n            padding: 100px 0;\n            background: white;\n            position: relative;\n        }\n\n        .testimonials-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .testimonials-header {\n            text-align: center;\n        }\n\n        .testimonials-header h2 {\n            font-size: 2.5rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n        }\n\n        .testimonials-header p {\n            font-size: 1.2rem;\n            color: #666;\n        }\n\n        .testimonials-carousel {\n            position: relative;\n            overflow: hidden;\n            padding: 2rem 0;\n        }\n\n        .testimonials-track {\n            display: flex;\n            transition: transform 0.5s ease;\n            width: 100%;\n        }\n\n        .testimonial-card {\n            width: 100%;\n            min-width: 100%;\n            flex-shrink: 0;\n            padding: 3rem;\n            border-radius: 20px;\n            position: relative;\n            box-sizing: border-box;\n        }\n\n        .testimonial-quote {\n            font-size: 3rem;\n            color: #F93825;\n            opacity: 0.2;\n            position: absolute;\n            top: 1.5rem;\n            left: 2rem;\n        }\n\n        .testimonial-rating {\n            display: flex;\n            gap: 0.3rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .testimonial-rating i {\n            color: #FFD700;\n            font-size: 1.2rem;\n        }\n\n        .testimonial-text {\n            font-size: 1.1rem;\n            line-height: 1.8;\n            color: #333;\n            margin-bottom: 2rem;\n            position: relative;\n            z-index: 2;\n        }\n\n        .testimonial-author {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n            padding-top: 1.5rem;\n            border-top: 1px solid rgba(0, 0, 0, 0.1);\n        }\n\n        .author-initials {\n            width: 50px;\n            height: 50px;\n            background: linear-gradient(135deg, #F93825 0%, #ff6b6b 100%);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-weight: 700;\n            font-size: 1.2rem;\n        }\n\n        .author-info h4 {\n            font-size: 1.1rem;\n            color: #222222;\n            margin-bottom: 0.3rem;\n            font-weight: 600;\n        }\n\n        .author-info p {\n            font-size: 0.9rem;\n            color: #666;\n        }\n\n        .carousel-controls {\n            display: flex;\n            justify-content: center;\n            gap: 1rem;\n            margin-top: 2rem;\n        }\n\n        .carousel-btn {\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            background: white;\n            border: 2px solid #F93825;\n            color: #F93825;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            font-size: 1.2rem;\n        }\n\n        .carousel-btn:hover {\n            background: #F93825;\n            color: white;\n            transform: scale(1.1);\n        }\n\n        .carousel-dots {\n            display: flex;\n            justify-content: center;\n            gap: 0.5rem;\n            margin-top: 2rem;\n        }\n\n        .carousel-dot {\n            width: 12px;\n            height: 12px;\n            border-radius: 50%;\n            background: rgba(249, 56, 37, 0.3);\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n\n        .carousel-dot.active {\n            background: #F93825;\n            transform: scale(1.2);\n        }\n\n        @media (max-width: 768px) {\n            .testimonials-header h2 {\n                font-size: 2rem;\n            }\n\n            .testimonials-header p {\n                font-size: 1rem;\n            }\n\n            .testimonial-card {\n                padding: 2rem 1.5rem;\n            }\n\n            .testimonial-quote {\n                font-size: 2rem;\n                top: 1rem;\n                left: 1.5rem;\n            }\n        }\n\n        \/* Contact Section *\/\n        .contact-section {\n            padding-bottom: 100px;\n            background: white;\n        }\n\n        .contact-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 2rem;\n            text-align: center;\n        }\n\n        .contact-header {\n            margin-bottom: 3rem;\n        }\n\n        .contact-header h2 {\n            font-size: 2.5rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n        }\n\n        .contact-header p {\n            font-size: 1.2rem;\n            color: #666;\n        }\n\n        .contact-buttons {\n            display: flex;\n            gap: 2rem;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n\n        .contact-button {\n            display: inline-flex;\n            align-items: center;\n            gap: 1rem;\n            padding: 1.5rem 3rem;\n            border-radius: 16px;\n            font-size: 1.1rem;\n            font-weight: 600;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            border: none;\n            cursor: pointer;\n            font-family: inherit;\n        }\n\n        .contact-button-contact {\n            background: linear-gradient(135deg, #F93825 0%, #ff6b6b 100%);\n            color: white !important;\n            box-shadow: 0 10px 30px rgba(249, 56, 37, 0.3);\n        }\n\n        .contact-button-contact:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(249, 56, 37, 0.4);\n            background: linear-gradient(135deg, #ff6b6b 0%, #F93825 100%);\n        }\n\n        .contact-button-whatsapp {\n            background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);\n            color: white !important;\n            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);\n        }\n\n        .contact-button-whatsapp:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);\n            background: linear-gradient(135deg, #20BA5A 0%, #25D366 100%);\n        }\n\n        .contact-button i {\n            font-size: 1.5rem;\n        }\n\n        @media (max-width: 768px) {\n            .contact-header h2 {\n                font-size: 2rem;\n            }\n\n            .contact-header p {\n                font-size: 1rem;\n            }\n\n            .contact-buttons {\n                flex-direction: column;\n                gap: 1.5rem;\n            }\n\n            .contact-button {\n                width: 100%;\n                justify-content: center;\n            }\n        }\n\n        \/* FAQ Section *\/\n        .faq-section {\n            padding: 100px 0;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n        }\n\n        .faq-container {\n            max-width: 900px;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        .faq-header {\n            text-align: center;\n            margin-bottom: 4rem;\n        }\n\n        .faq-header h2 {\n            font-size: 2.5rem;\n            color: #222222;\n            margin-bottom: 1rem;\n            font-weight: 700;\n        }\n\n        .faq-header p {\n            font-size: 1.2rem;\n            color: #666;\n        }\n\n        .faq-list {\n            display: flex;\n            flex-direction: column;\n            gap: 1.5rem;\n        }\n\n        .faq-item {\n            background: white;\n            border-radius: 16px;\n            overflow: hidden;\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\n            transition: all 0.3s ease;\n            border: 1px solid rgba(0, 0, 0, 0.06);\n        }\n\n        .faq-item:hover {\n            box-shadow: 0 10px 30px rgba(249, 56, 37, 0.15);\n            border-color: rgba(249, 56, 37, 0.2);\n        }\n\n        .faq-item.active {\n            border-color: #F93825;\n            box-shadow: 0 15px 40px rgba(249, 56, 37, 0.2);\n        }\n\n        .faq-question {\n            padding: 2rem;\n            cursor: pointer;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 2rem;\n            transition: all 0.3s ease;\n        }\n\n        .faq-question:hover {\n            background: rgba(249, 56, 37, 0.02);\n        }\n\n        .faq-item.active .faq-question {\n            background: rgba(249, 56, 37, 0.05);\n        }\n\n        .faq-question-text {\n            flex: 1;\n            font-size: 1.2rem;\n            font-weight: 600;\n            color: #222222;\n            line-height: 1.4;\n        }\n\n        .faq-item.active .faq-question-text {\n            color: #F93825;\n        }\n\n        .faq-icon {\n            width: 40px;\n            height: 40px;\n            background: rgba(249, 56, 37, 0.1);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #F93825;\n            font-size: 1.2rem;\n            transition: all 0.3s ease;\n            flex-shrink: 0;\n        }\n\n        .faq-item.active .faq-icon {\n            background: #F93825;\n            color: white;\n            transform: rotate(180deg);\n        }\n\n        .faq-answer {\n            max-height: 0;\n            overflow: hidden;\n            transition: max-height 0.4s ease, padding 0.4s ease;\n            padding: 0 2rem;\n        }\n\n        .faq-item.active .faq-answer {\n            max-height: 1000px;\n            padding: 0 2rem 2rem;\n        }\n\n        .faq-answer-content {\n            color: #666;\n            line-height: 1.8;\n            font-size: 1.05rem;\n        }\n\n        .faq-answer-content p {\n            margin-bottom: 1rem;\n        }\n\n        .faq-answer-content p:last-child {\n            margin-bottom: 0;\n        }\n\n        @media (max-width: 768px) {\n            .faq-header h2 {\n                font-size: 2rem;\n            }\n\n            .faq-header p {\n                font-size: 1rem;\n            }\n\n            .faq-question {\n                padding: 1.5rem;\n            }\n\n            .faq-question-text {\n                font-size: 1.1rem;\n            }\n\n            .faq-answer {\n                padding: 0 1.5rem;\n            }\n\n            .faq-item.active .faq-answer {\n                padding: 0 1.5rem 1.5rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Hero Section -->\n    <section class=\"hero\">\n        <div class=\"hero-content\">\n            <div class=\"hero-card\">\n                <h1>Work IQ + Power Platform + Copilot = AI-Powered Business System<\/h1>\n                <p>Transform your organization with the ultimate combination of intelligent analytics, low-code development, and AI assistance. Create a comprehensive, AI-powered business system that drives efficiency, innovation, and growth.<\/p>\n                <a href=\"https:\/\/darksn.de\/contact\/\"><button class=\"cta-button\">Get a custom quote<\/button><\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Problems Section -->\n    <section class=\"problems\">\n        <div class=\"problems-container\">\n            <div class=\"problems-grid\">\n                <div class=\"problems-left\">\n                    <div class=\"problem-image-card\">\n                        <img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2025\/11\/still-life-documents-stack-scaled.jpg\" alt=\"Scattered Data\">\n                        <div class=\"problem-image-overlay\">\n                            <h4>Scattered Data<\/h4>\n                            <p>Information everywhere<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"problem-image-card\">\n                        <img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2025\/11\/designer-work-office-scaled.jpg\" alt=\"Manual Processes\">\n                        <div class=\"problem-image-overlay\">\n                            <h4>Manual Work<\/h4>\n                            <p>Time consuming tasks<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"problem-image-card\">\n                        <img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2025\/11\/intellectual-banknote-student-sand-computer-graphic-scaled.jpg\" alt=\"Reports\">\n                        <div class=\"problem-image-overlay\">\n                            <h4>Late Reports<\/h4>\n                            <p>Delayed insights<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"problems-right\">\n                    <h2>Common Business Challenges<\/h2>\n                    <p class=\"problems-subtitle\">Do You Recognize These Problems?<\/p>\n                    <p class=\"problems-description\">Many organizations struggle with disconnected systems, manual processes, and missed opportunities for AI-driven efficiency. Here are the most common challenges we help solve:<\/p>\n                    <ul class=\"problems-list\">\n                        <li class=\"problem-item\">\n                            <div class=\"problem-icon\">\n                                <i class=\"fas fa-file-invoice\"><\/i>\n                            <\/div>\n                            <div class=\"problem-content\">\n                                <h3>Scattered Data<\/h3>\n                                <p>Data is everywhere - emails, files, Teams, separate systems. Finding information takes too much time and important details get lost in the chaos.<\/p>\n                            <\/div>\n                        <\/li>\n                        <li class=\"problem-item\">\n                            <div class=\"problem-icon\">\n                                <i class=\"fas fa-hand-paper\"><\/i>\n                            <\/div>\n                            <div class=\"problem-content\">\n                                <h3>Manual Processes<\/h3>\n                                <p>Workflows progress manually, consuming valuable time and resources. Repetitive tasks slow down operations and increase the risk of errors.<\/p>\n                            <\/div>\n                        <\/li>\n                        <li class=\"problem-item\">\n                            <div class=\"problem-icon\">\n                                <i class=\"fas fa-search\"><\/i>\n                            <\/div>\n                            <div class=\"problem-content\">\n                                <h3>Lost Work Tracking<\/h3>\n                                <p>Task tracking disappears between different tools and systems. It's unclear what's in progress, what's completed, and what needs attention.<\/p>\n                            <\/div>\n                        <\/li>\n                        <li class=\"problem-item\">\n                            <div class=\"problem-icon\">\n                                <i class=\"fas fa-chart-line\"><\/i>\n                            <\/div>\n                            <div class=\"problem-content\">\n                                <h3>Delayed Reports<\/h3>\n                                <p>Reports arrive late, making it difficult to make timely decisions. Data compilation takes too long and insights come when it's too late to act.<\/p>\n                            <\/div>\n                        <\/li>\n                        <li class=\"problem-item\">\n                            <div class=\"problem-icon\">\n                                <i class=\"fas fa-brain\"><\/i>\n                            <\/div>\n                            <div class=\"problem-content\">\n                                <h3>Untapped AI Potential<\/h3>\n                                <p>Artificial intelligence capabilities remain unused. Organizations miss opportunities to automate, optimize, and gain intelligent insights that could transform operations.<\/p>\n                            <\/div>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Solution Overview Section -->\n    <section class=\"solution-overview\">\n        <div class=\"solution-overview-container\">\n            <h2 class=\"solution-overview-title\">Solution Overview<\/h2>\n            <p class=\"solution-overview-subtitle\">Three-Layer Structure for Complete Business Intelligence<\/p>\n            <div class=\"solution-grid\">\n                <div class=\"solution-card\">\n                    <div class=\"solution-number\">1<\/div>\n                    <div class=\"solution-icon\">\n                        <i class=\"fas fa-brain\"><\/i>\n                    <\/div>\n                    <h3>Work IQ<\/h3>\n                    <p class=\"solution-subtitle\">Business Intelligence Layer<\/p>\n                    <p>Analyzes all workflows, understands context, and provides intelligent insights into your business operations. Work IQ monitors how work flows through your organization, identifies patterns, and delivers actionable recommendations.<\/p>\n                <\/div>\n                <div class=\"solution-card\">\n                    <div class=\"solution-number\">2<\/div>\n                    <div class=\"solution-icon\">\n                        <i class=\"fas fa-cogs\"><\/i>\n                    <\/div>\n                    <h3>Power Platform<\/h3>\n                    <p class=\"solution-subtitle\">Automation and Applications<\/p>\n                    <p>Provides automation, applications, reports, and chatbots. Power Platform enables rapid development of custom business solutions through low-code and no-code tools, connecting all your business processes seamlessly.<\/p>\n                <\/div>\n                <div class=\"solution-card\">\n                    <div class=\"solution-number\">3<\/div>\n                    <div class=\"solution-icon\">\n                        <i class=\"fas fa-robot\"><\/i>\n                    <\/div>\n                    <h3>Copilot<\/h3>\n                    <p class=\"solution-subtitle\">AI That Works for You<\/p>\n                    <p>Gathers, understands, summarizes, works, and reports. Microsoft Copilot integrates AI assistance directly into your workflows, providing intelligent suggestions and automating tasks throughout your organization.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- How It Works Section -->\n    <section class=\"how-it-works\">\n        <div class=\"how-it-works-container\">\n            <h2 class=\"how-it-works-title\">How It Works<\/h2>\n            <p class=\"how-it-works-subtitle\">Step-by-Step Process<\/p>\n            <div class=\"process-timeline\">\n                <div class=\"timeline-line\"><\/div>\n                <div class=\"data-flow-particles\">\n                    <div class=\"data-particle\"><\/div>\n                    <div class=\"data-particle\"><\/div>\n                    <div class=\"data-particle\"><\/div>\n                    <div class=\"data-particle\"><\/div>\n                <\/div>\n                <div class=\"process-steps\">\n                    <div class=\"process-step\">\n                        <div class=\"step-content\">\n                            <div class=\"step-number\">1<\/div>\n                            <div class=\"step-icon-wrapper\">\n                                <i class=\"fas fa-database step-icon\"><\/i>\n                            <\/div>\n                            <h3>Data Collection<\/h3>\n                            <p>Email, chat, files, tasks \u2192 Work IQ. All your business data flows into Work IQ, creating a comprehensive view of your organization's information landscape.<\/p>\n                            <div class=\"step-arrow\">\n                                <i class=\"fas fa-arrow-down\"><\/i>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-visual\">\n                            <div class=\"step-visual-circle\">\n                                <i class=\"fas fa-database step-visual-icon\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"process-step\">\n                        <div class=\"step-content\">\n                            <div class=\"step-number\">2<\/div>\n                            <div class=\"step-icon-wrapper\">\n                                <i class=\"fas fa-project-diagram step-icon\"><\/i>\n                            <\/div>\n                            <h3>Context Creation<\/h3>\n                            <p>Project relationships, people, documents, timeline. Work IQ analyzes connections and creates meaningful context from all collected data, understanding how everything relates.<\/p>\n                            <div class=\"step-arrow\">\n                                <i class=\"fas fa-arrow-down\"><\/i>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-visual\">\n                            <div class=\"step-visual-circle\">\n                                <i class=\"fas fa-project-diagram step-visual-icon\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"process-step\">\n                        <div class=\"step-content\">\n                            <div class=\"step-number\">3<\/div>\n                            <div class=\"step-icon-wrapper\">\n                                <i class=\"fas fa-brain step-icon\"><\/i>\n                            <\/div>\n                            <h3>Copilot Analysis<\/h3>\n                            <p>Summary, task extraction, relationship mapping. Microsoft Copilot processes the contextualized data, creating summaries, identifying tasks, and mapping relationships automatically.<\/p>\n                            <div class=\"step-arrow\">\n                                <i class=\"fas fa-arrow-down\"><\/i>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-visual\">\n                            <div class=\"step-visual-circle\">\n                                <i class=\"fas fa-brain step-visual-icon\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"process-step\">\n                        <div class=\"step-content\">\n                            <div class=\"step-number\">4<\/div>\n                            <div class=\"step-icon-wrapper\">\n                                <i class=\"fas fa-cogs step-icon\"><\/i>\n                            <\/div>\n                            <h3>Power Platform Implementation<\/h3>\n                            <p>Automations, applications, reports are created. Power Platform takes the analyzed insights and transforms them into automated workflows, custom applications, and actionable reports.<\/p>\n                            <div class=\"step-arrow\">\n                                <i class=\"fas fa-arrow-down\"><\/i>\n                            <\/div>\n                        <\/div>\n                        <div class=\"step-visual\">\n                            <div class=\"step-visual-circle\">\n                                <i class=\"fas fa-cogs step-visual-icon\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"process-step\">\n                        <div class=\"step-content\">\n                            <div class=\"step-number\">5<\/div>\n                            <div class=\"step-icon-wrapper\">\n                                <i class=\"fas fa-sync-alt step-icon\"><\/i>\n                            <\/div>\n                            <h3>Self-Running Workflows<\/h3>\n                            <p>Triggered intelligent processes. Your business workflows run automatically, responding to events, making decisions, and executing tasks without manual intervention.<\/p>\n                        <\/div>\n                        <div class=\"step-visual\">\n                            <div class=\"step-visual-circle\">\n                                <i class=\"fas fa-sync-alt step-visual-icon\"><\/i>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ Intersection Observer for animations\n        const observerOptions = {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        };\n\n        const stepObserver = new IntersectionObserver((entries) => {\n            entries.forEach((entry, index) => {\n                if (entry.isIntersecting) {\n                    setTimeout(() => {\n                        entry.target.classList.add('animate');\n                    }, index * 200);\n                }\n            });\n        }, observerOptions);\n\n        document.addEventListener('DOMContentLoaded', () => {\n            const steps = document.querySelectorAll('.process-step');\n            steps.forEach(step => {\n                stepObserver.observe(step);\n            });\n        });\n    <\/script>\n\n    <!-- Benefits Story Section -->\n    <section class=\"benefits-story\">\n        <div class=\"benefits-story-container\">\n            <h2 class=\"benefits-story-title\">Benefits<\/h2>\n            <p class=\"benefits-story-subtitle\">How AI Transforms a Company's Daily Life<\/p>\n            \n            <div class=\"daily-story\">\n                <div class=\"story-intro\">\n                    <h3>A Day in the Life: Before and After AI<\/h3>\n                    <p>Imagine your company's daily operations transformed by Work IQ, Power Platform, and Copilot. Here's how a typical day changes when AI becomes your business partner:<\/p>\n                <\/div>\n\n                <div class=\"day-timeline\">\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-time\">\n                            <span>09:00<\/span>\n                        <\/div>\n                        <div class=\"timeline-content\">\n                            <h4>Morning: Email and Task Management<\/h4>\n                            <div class=\"before-after\">\n                                <div class=\"before\">\n                                    <h5>Before<\/h5>\n                                    <p>Your team spends the first hour manually sorting through hundreds of emails, trying to prioritize urgent messages, and creating tasks from scattered information across different platforms.<\/p>\n                                <\/div>\n                                <div class=\"after\">\n                                    <h5>After<\/h5>\n                                    <p>Copilot automatically reads, categorizes, and routes all emails. Work IQ extracts actionable tasks, and Power Platform creates organized task lists assigned to the right team members\u2014all before you finish your first coffee.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-time\">\n                            <span>11:00<\/span>\n                        <\/div>\n                        <div class=\"timeline-content\">\n                            <h4>Mid-Morning: Customer Interactions<\/h4>\n                            <div class=\"before-after\">\n                                <div class=\"before\">\n                                    <h5>Before<\/h5>\n                                    <p>Customer complaints arrive in various channels\u2014email, chat, social media. Your team manually reviews each one, tries to identify patterns, and responds reactively when problems escalate.<\/p>\n                                <\/div>\n                                <div class=\"after\">\n                                    <h5>After<\/h5>\n                                    <p>Work IQ collects all customer interactions. Copilot analyzes sentiment, identifies recurring issues, and suggests solutions. Power Platform automatically routes urgent cases and generates response drafts, allowing your team to be proactive rather than reactive.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-time\">\n                            <span>14:00<\/span>\n                        <\/div>\n                        <div class=\"timeline-content\">\n                            <h4>Afternoon: Project Status and Reporting<\/h4>\n                            <div class=\"before-after\">\n                                <div class=\"before\">\n                                    <h5>Before<\/h5>\n                                    <p>Project managers spend hours compiling status reports from multiple tools, Excel sheets, and team updates. By the time reports are ready, the information is already outdated.<\/p>\n                                <\/div>\n                                <div class=\"after\">\n                                    <h5>After<\/h5>\n                                    <p>Work IQ continuously tracks project data across all systems. Copilot generates real-time summaries, identifies risks, and highlights achievements. Power Platform delivers automated reports directly to stakeholders, ensuring everyone stays informed instantly.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-time\">\n                            <span>16:00<\/span>\n                        <\/div>\n                        <div class=\"timeline-content\">\n                            <h4>Late Afternoon: Meeting Outcomes<\/h4>\n                            <div class=\"before-after\">\n                                <div class=\"before\">\n                                    <h5>Before<\/h5>\n                                    <p>After important meetings, team members manually transcribe notes, try to remember action items, and create tasks. Important decisions and follow-ups often get lost in the shuffle.<\/p>\n                                <\/div>\n                                <div class=\"after\">\n                                    <h5>After<\/h5>\n                                    <p>Copilot listens to meeting recordings, extracts decisions, identifies action items, and maps them to responsible team members. Power Platform automatically creates tasks, sets deadlines, and sends reminders\u2014ensuring nothing falls through the cracks.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"timeline-item\">\n                        <div class=\"timeline-time\">\n                            <span>18:00<\/span>\n                        <\/div>\n                        <div class=\"timeline-content\">\n                            <h4>End of Day: Reflection and Planning<\/h4>\n                            <div class=\"before-after\">\n                                <div class=\"before\">\n                                    <h5>Before<\/h5>\n                                    <p>The day ends with unanswered emails, incomplete tasks, and unclear priorities for tomorrow. Team members leave feeling overwhelmed and behind schedule.<\/p>\n                                <\/div>\n                                <div class=\"after\">\n                                    <h5>After<\/h5>\n                                    <p>Work IQ provides a comprehensive daily summary. Copilot highlights achievements, flags items needing attention, and suggests priorities for tomorrow. Your team leaves with clarity, confidence, and a clear plan for the next day.<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"benefits-grid\">\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-clock\"><\/i>\n                    <\/div>\n                    <h4>Save 10+ Hours Weekly<\/h4>\n                    <p>Automation handles repetitive tasks, freeing your team to focus on strategic work that drives business growth.<\/p>\n                <\/div>\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-chart-line\"><\/i>\n                    <\/div>\n                    <h4>Increase Productivity by 80%<\/h4>\n                    <p>Work flows seamlessly through your organization, with AI handling coordination, analysis, and decision support.<\/p>\n                <\/div>\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-shield-alt\"><\/i>\n                    <\/div>\n                    <h4>Reduce Errors to Zero<\/h4>\n                    <p>Automated workflows eliminate human error, ensuring consistency and accuracy across all business processes.<\/p>\n                <\/div>\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-lightbulb\"><\/i>\n                    <\/div>\n                    <h4>Make Data-Driven Decisions<\/h4>\n                    <p>Real-time insights from Work IQ and Copilot enable faster, smarter decisions based on complete information.<\/p>\n                <\/div>\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-users\"><\/i>\n                    <\/div>\n                    <h4>Improve Team Satisfaction<\/h4>\n                    <p>Eliminate tedious manual work and empower your team to focus on meaningful, creative tasks.<\/p>\n                <\/div>\n                <div class=\"benefit-card\">\n                    <div class=\"benefit-icon\">\n                        <i class=\"fas fa-rocket\"><\/i>\n                    <\/div>\n                    <h4>Scale Without Limits<\/h4>\n                    <p>As your business grows, AI-powered systems scale automatically, maintaining efficiency at any size.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ Animate timeline items on scroll\n        const timelineObserver = new IntersectionObserver((entries) => {\n            entries.forEach((entry, index) => {\n                if (entry.isIntersecting) {\n                    setTimeout(() => {\n                        entry.target.classList.add('animate');\n                    }, index * 200);\n                }\n            });\n        }, {\n            threshold: 0.1,\n            rootMargin: '0px 0px -50px 0px'\n        });\n\n        document.addEventListener('DOMContentLoaded', () => {\n            const timelineItems = document.querySelectorAll('.timeline-item');\n            timelineItems.forEach(item => {\n                timelineObserver.observe(item);\n            });\n        });\n    <\/script>\n\n    <!-- Use Cases Section -->\n    <section class=\"use-cases\">\n        <div class=\"use-cases-container\">\n            <h2 class=\"use-cases-title\">Use Cases<\/h2>\n            <p class=\"use-cases-subtitle\">Real-World Applications of Our AI-Powered Business System<\/p>\n            <div class=\"use-cases-grid\">\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-chart-line\"><\/i>\n                    <\/div>\n                    <h3>Sales Process Automation<\/h3>\n                    <p>Automate your entire sales pipeline from lead generation to deal closure. Work IQ analyzes customer interactions, Copilot extracts opportunities, and Power Platform creates automated workflows that nurture leads and close deals faster.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-comment-dots\"><\/i>\n                    <\/div>\n                    <h3>Customer Complaint Analysis<\/h3>\n                    <p>Automatically analyze customer complaints from emails, chats, and support tickets. Copilot identifies patterns, categorizes issues, and generates insights that help improve customer satisfaction and resolve problems proactively.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-users\"><\/i>\n                    <\/div>\n                    <h3>HR Onboarding Flow<\/h3>\n                    <p>Streamline employee onboarding with automated workflows. Work IQ tracks onboarding progress, Copilot generates personalized welcome materials, and Power Platform creates custom apps that guide new employees through every step seamlessly.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-project-diagram\"><\/i>\n                    <\/div>\n                    <h3>Project Management Summaries<\/h3>\n                    <p>Generate comprehensive project summaries automatically. Work IQ collects project data from multiple sources, Copilot creates executive summaries and status reports, delivering real-time insights into project health and progress.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-file-invoice-dollar\"><\/i>\n                    <\/div>\n                    <h3>Financial Reports<\/h3>\n                    <p>Create accurate financial reports without manual data entry. Data flows from accounting systems into Work IQ, Copilot analyzes trends and anomalies, and Power Platform generates detailed financial reports automatically.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-envelope\"><\/i>\n                    <\/div>\n                    <h3>Email Classification<\/h3>\n                    <p>Automatically categorize and route emails intelligently. Copilot reads email content, understands intent and urgency, then routes messages to appropriate teams or creates tasks in Power Platform workflows.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-file-alt\"><\/i>\n                    <\/div>\n                    <h3>Document Workflow<\/h3>\n                    <p>Streamline document processing and approval workflows. Work IQ tracks document status across systems, Copilot extracts key information, and Power Platform automates routing, approvals, and notifications.<\/p>\n                <\/div>\n                <div class=\"use-case-card\">\n                    <div class=\"use-case-icon\">\n                        <i class=\"fas fa-tasks\"><\/i>\n                    <\/div>\n                    <h3>Task Generation from Meeting Outcomes<\/h3>\n                    <p>Automatically extract action items from meeting transcripts and notes. Copilot analyzes meeting content, identifies decisions and assignments, then Power Platform creates tasks and assigns them to team members automatically.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Testimonials Section -->\n    <section class=\"testimonials-section\">\n        <div class=\"testimonials-container\">\n            <div class=\"testimonials-header\">\n                <h2>What Our Clients Say<\/h2>\n                <p>Real feedback from businesses that transformed their operations<\/p>\n            <\/div>\n\n            <div class=\"testimonials-carousel\">\n                <div class=\"testimonials-track\" id=\"testimonialsTrack\">\n                    <div class=\"testimonial-card\">\n                        <div class=\"testimonial-quote\">\n                            <i class=\"fas fa-quote-left\"><\/i>\n                        <\/div>\n                        <div class=\"testimonial-rating\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                        <\/div>\n                        <p class=\"testimonial-text\">\"Work IQ and Copilot have completely transformed how we handle daily operations. What used to take hours now happens automatically. Our team can finally focus on strategic work instead of manual data entry.\"<\/p>\n                        <div class=\"testimonial-author\">\n                            <div class=\"author-initials\">MR<\/div>\n                            <div class=\"author-info\">\n                                <h4>Michael R.<\/h4>\n                                <p>Operations Director<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"testimonial-quote\">\n                            <i class=\"fas fa-quote-left\"><\/i>\n                        <\/div>\n                        <div class=\"testimonial-rating\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                        <\/div>\n                        <p class=\"testimonial-text\">\"The automation capabilities are incredible. Our sales process is now fully automated from lead to close. We've seen a 40% increase in conversion rates and our team saves over 15 hours per week.\"<\/p>\n                        <div class=\"testimonial-author\">\n                            <div class=\"author-initials\">SL<\/div>\n                            <div class=\"author-info\">\n                                <h4>Sarah L.<\/h4>\n                                <p>Sales Manager<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"testimonial-quote\">\n                            <i class=\"fas fa-quote-left\"><\/i>\n                        <\/div>\n                        <div class=\"testimonial-rating\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                        <\/div>\n                        <p class=\"testimonial-text\">\"Customer complaint analysis is now instant. Copilot identifies patterns we never noticed before, and we can proactively address issues before they escalate. Customer satisfaction has improved significantly.\"<\/p>\n                        <div class=\"testimonial-author\">\n                            <div class=\"author-initials\">JK<\/div>\n                            <div class=\"author-info\">\n                                <h4>Jennifer K.<\/h4>\n                                <p>Customer Success Lead<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"testimonial-quote\">\n                            <i class=\"fas fa-quote-left\"><\/i>\n                        <\/div>\n                        <div class=\"testimonial-rating\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                        <\/div>\n                        <p class=\"testimonial-text\">\"Project management has never been easier. Real-time summaries, automated reports, and intelligent task assignment - everything we needed. Our project delivery time has decreased by 30%.\"<\/p>\n                        <div class=\"testimonial-author\">\n                            <div class=\"author-initials\">DT<\/div>\n                            <div class=\"author-info\">\n                                <h4>David T.<\/h4>\n                                <p>Project Manager<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"testimonial-card\">\n                        <div class=\"testimonial-quote\">\n                            <i class=\"fas fa-quote-left\"><\/i>\n                        <\/div>\n                        <div class=\"testimonial-rating\">\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                            <i class=\"fas fa-star\"><\/i>\n                        <\/div>\n                        <p class=\"testimonial-text\">\"Financial reporting used to be a nightmare. Now it's completely automated and accurate. We get instant insights and can make data-driven decisions faster than ever before.\"<\/p>\n                        <div class=\"testimonial-author\">\n                            <div class=\"author-initials\">AW<\/div>\n                            <div class=\"author-info\">\n                                <h4>Anna W.<\/h4>\n                                <p>CFO<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"carousel-controls\">\n                    <button class=\"carousel-btn\" id=\"prevBtn\">\n                        <i class=\"fas fa-chevron-left\"><\/i>\n                    <\/button>\n                    <button class=\"carousel-btn\" id=\"nextBtn\">\n                        <i class=\"fas fa-chevron-right\"><\/i>\n                    <\/button>\n                <\/div>\n\n                <div class=\"carousel-dots\" id=\"carouselDots\"><\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ Testimonials Carousel\n        let currentTestimonial = 0;\n        const track = document.getElementById('testimonialsTrack');\n        const cards = document.querySelectorAll('.testimonial-card');\n        const totalCards = cards.length;\n\n        \/\/ Create dots\n        const dotsContainer = document.getElementById('carouselDots');\n        for (let i = 0; i < totalCards; i++) {\n            const dot = document.createElement('div');\n            dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\n            dot.addEventListener('click', () => goToTestimonial(i));\n            dotsContainer.appendChild(dot);\n        }\n\n        function updateCarousel() {\n            track.style.transform = `translateX(-${currentTestimonial * 100}%)`;\n            \n            \/\/ Update dots\n            document.querySelectorAll('.carousel-dot').forEach((dot, index) => {\n                dot.classList.toggle('active', index === currentTestimonial);\n            });\n        }\n\n        function nextTestimonial() {\n            currentTestimonial = (currentTestimonial + 1) % totalCards;\n            updateCarousel();\n        }\n\n        function prevTestimonial() {\n            currentTestimonial = (currentTestimonial - 1 + totalCards) % totalCards;\n            updateCarousel();\n        }\n\n        function goToTestimonial(index) {\n            currentTestimonial = index;\n            updateCarousel();\n        }\n\n        document.getElementById('nextBtn').addEventListener('click', nextTestimonial);\n        document.getElementById('prevBtn').addEventListener('click', prevTestimonial);\n\n        \/\/ Auto-play carousel\n        let autoPlayInterval = setInterval(nextTestimonial, 5000);\n\n        \/\/ Pause on hover\n        const carousel = document.querySelector('.testimonials-carousel');\n        carousel.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));\n        carousel.addEventListener('mouseleave', () => {\n            autoPlayInterval = setInterval(nextTestimonial, 5000);\n        });\n    <\/script>\n\n    <!-- Contact Section -->\n    <section class=\"contact-section\">\n        <div class=\"contact-container\">\n            <div class=\"contact-header\">\n                <h2>Get in Touch<\/h2>\n                <p>Ready to transform your business with AI-powered solutions? Let's discuss your needs.<\/p>\n            <\/div>\n\n            <div class=\"contact-buttons\">\n                <a href=\"https:\/\/darksn.de\/contact\/\" class=\"contact-button contact-button-contact\">\n                    <i class=\"fas fa-paper-plane\"><\/i>\n                    <span>Get Started<\/span>\n                <\/a>\n                <a href=\"https:\/\/wa.me\/4971412587291\" target=\"_blank\" class=\"contact-button contact-button-whatsapp\">\n                    <i class=\"fab fa-whatsapp\"><\/i>\n                    <span>Chat on WhatsApp<\/span>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- FAQ Section -->\n    <section class=\"faq-section\">\n        <div class=\"faq-container\">\n            <div class=\"faq-header\">\n                <h2>Frequently Asked Questions<\/h2>\n                <p>Everything you need to know about our AI-powered business system<\/p>\n            <\/div>\n\n            <div class=\"faq-list\">\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">How long does it take to implement Work IQ + Power Platform + Copilot?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Implementation time varies based on your organization's size and complexity. We start with a comprehensive assessment of your current systems and workflows, then create a phased implementation plan that delivers value quickly while ensuring thorough integration.<\/p>\n                            <p>Our approach prioritizes quick wins in the initial phase, allowing you to see benefits early in the process. The full integration is completed systematically, ensuring all systems work together seamlessly. Our team works closely with yours to ensure minimal disruption to daily operations while maximizing the benefits of AI-powered automation.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">Do we need technical expertise to use this system?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>No technical expertise is required for day-to-day use. The system is designed for business users with intuitive interfaces and natural language interactions through Copilot. Your team can create workflows, generate reports, and manage tasks without coding knowledge.<\/p>\n                            <p>However, for initial setup and complex customizations, our team provides full support and training to ensure your organization gets maximum value from the platform.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">How does Work IQ integrate with our existing systems?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Work IQ connects to over 500+ business applications including Microsoft 365, Salesforce, SAP, email systems, file storage, and more. It uses secure APIs and connectors to pull data from your existing systems without requiring data migration.<\/p>\n                            <p>The platform acts as an intelligent layer that understands context across all your tools, creating a unified view of your business operations without disrupting your current workflows.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">What kind of ROI can we expect?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Most organizations see ROI within 3-6 months. Typical benefits include 60-80% reduction in manual data entry time, 40-50% faster decision-making through real-time insights, and 30-40% improvement in process efficiency.<\/p>\n                            <p>Additionally, teams report saving 10-15 hours per week per employee, which translates to significant cost savings and allows staff to focus on high-value strategic work rather than repetitive tasks.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">Is our data secure with this system?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Absolutely. The system is built on Microsoft's enterprise-grade security infrastructure, which includes encryption at rest and in transit, multi-factor authentication, role-based access controls, and compliance with GDPR, ISO 27001, and other international standards.<\/p>\n                            <p>Your data remains in your control, and we implement strict access policies. Work IQ only accesses data you explicitly authorize, and all AI processing happens within Microsoft's secure cloud environment.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">Can we customize the system for our specific industry needs?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Yes, the platform is highly customizable. Power Platform's low-code environment allows us to build industry-specific workflows, custom applications, and automated processes tailored to your business requirements.<\/p>\n                            <p>We've implemented solutions for manufacturing, healthcare, finance, retail, and many other industries. Each implementation is customized to address your unique challenges and leverage your existing business processes.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">What kind of support do you provide after implementation?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>We provide comprehensive ongoing support including 24\/7 technical assistance, regular system updates, user training sessions, and continuous optimization of your workflows. Our team monitors your system's performance and proactively suggests improvements.<\/p>\n                            <p>Additionally, we offer quarterly business reviews to ensure you're maximizing the platform's value and help you scale your automation as your business grows.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"faq-item\">\n                    <div class=\"faq-question\">\n                        <div class=\"faq-question-text\">How does Copilot learn and improve over time?<\/div>\n                        <div class=\"faq-icon\">\n                            <i class=\"fas fa-chevron-down\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <div class=\"faq-answer\">\n                        <div class=\"faq-answer-content\">\n                            <p>Copilot continuously learns from your organization's data patterns, user interactions, and business context. It improves its understanding of your workflows, terminology, and preferences over time, becoming more accurate and helpful.<\/p>\n                            <p>The AI model is trained on your specific business data (with your permission) and adapts to your industry, company culture, and operational style. This means the longer you use it, the better it becomes at understanding and assisting with your unique business needs.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ FAQ Accordion\n        document.addEventListener('DOMContentLoaded', () => {\n            const faqItems = document.querySelectorAll('.faq-item');\n            \n            faqItems.forEach(item => {\n                const question = item.querySelector('.faq-question');\n                \n                question.addEventListener('click', () => {\n                    const isActive = item.classList.contains('active');\n                    \n                    \/\/ Close all items\n                    faqItems.forEach(otherItem => {\n                        otherItem.classList.remove('active');\n                    });\n                    \n                    \/\/ Open clicked item if it wasn't active\n                    if (!isActive) {\n                        item.classList.add('active');\n                    }\n                });\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\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>Work IQ + Power Platform + Copilot = AI-Powered Business System Transform your organization with the ultimate combination of intelligent analytics, low-code development, and AI assistance. Create a comprehensive, AI-powered business system that drives efficiency, innovation, and growth. Get a custom quote Scattered Data Information everywhere Manual Work Time consuming tasks Late Reports Delayed insights Common Business Challenges Do You Recognize These Problems? Many organizations struggle with disconnected systems, manual processes, and missed opportunities for AI-driven efficiency. Here are the most common challenges we help solve: Scattered Data Data is everywhere &#8211; emails, files, Teams, separate systems. Finding information takes too much time and important details get lost in the chaos. Manual Processes Workflows progress manually, consuming valuable time and resources. Repetitive tasks slow down operations and increase the risk of errors. Lost Work Tracking Task tracking disappears between different tools and systems. It&#8217;s unclear what&#8217;s in progress, what&#8217;s completed, and what needs attention. Delayed Reports Reports arrive late, making it difficult to make timely decisions. Data compilation takes too long and insights come when it&#8217;s too late to act. Untapped AI Potential Artificial intelligence capabilities remain unused. Organizations miss opportunities to automate, optimize, and gain intelligent insights that could transform operations. Solution Overview Three-Layer Structure for Complete Business Intelligence 1 Work IQ Business Intelligence Layer Analyzes all workflows, understands context, and provides intelligent insights into your business operations. Work IQ monitors how work flows through your organization, identifies patterns, and delivers actionable recommendations. 2 Power Platform Automation and Applications Provides automation, applications, reports, and chatbots. Power Platform enables rapid development of custom business solutions through low-code and no-code tools, connecting all your business processes seamlessly. 3 Copilot AI That Works for You Gathers, understands, summarizes, works, and reports. Microsoft Copilot integrates AI assistance directly into your workflows, providing intelligent suggestions and automating tasks throughout your organization. How It Works Step-by-Step Process 1 Data Collection Email, chat, files, tasks \u2192 Work IQ. All your business data flows into Work IQ, creating a comprehensive view of your organization&#8217;s information landscape. 2 Context Creation Project relationships, people, documents, timeline. Work IQ analyzes connections and creates meaningful context from all collected data, understanding how everything relates. 3 Copilot Analysis Summary, task extraction, relationship mapping. Microsoft Copilot processes the contextualized data, creating summaries, identifying tasks, and mapping relationships automatically. 4 Power Platform Implementation Automations, applications, reports are created. Power Platform takes the analyzed insights and transforms them into automated workflows, custom applications, and actionable reports. 5 Self-Running Workflows Triggered intelligent processes. Your business workflows run automatically, responding to events, making decisions, and executing tasks without manual intervention. Benefits How AI Transforms a Company&#8217;s Daily Life A Day in the Life: Before and After AI Imagine your company&#8217;s daily operations transformed by Work IQ, Power Platform, and Copilot. Here&#8217;s how a typical day changes when AI becomes your business partner: 09:00 Morning: Email and Task Management Before Your team spends the first hour manually sorting through hundreds of emails, trying to prioritize urgent messages, and creating tasks from scattered information across different platforms. After Copilot automatically reads, categorizes, and routes all emails. Work IQ extracts actionable tasks, and Power Platform creates organized task lists assigned to the right team members\u2014all before you finish your first coffee. 11:00 Mid-Morning: Customer Interactions Before Customer complaints arrive in various channels\u2014email, chat, social media. Your team manually reviews each one, tries to identify patterns, and responds reactively when problems escalate. After Work IQ collects all customer interactions. Copilot analyzes sentiment, identifies recurring issues, and suggests solutions. Power Platform automatically routes urgent cases and generates response drafts, allowing your team to be proactive rather than reactive. 14:00 Afternoon: Project Status and Reporting Before Project managers spend hours compiling status reports from multiple tools, Excel sheets, and team updates. By the time reports are ready, the information is already outdated. After Work IQ continuously tracks project data across all systems. Copilot generates real-time summaries, identifies risks, and highlights achievements. Power Platform delivers automated reports directly to stakeholders, ensuring everyone stays informed instantly. 16:00 Late Afternoon: Meeting Outcomes Before After important meetings, team members manually transcribe notes, try to remember action items, and create tasks. Important decisions and follow-ups often get lost in the shuffle. After Copilot listens to meeting recordings, extracts decisions, identifies action items, and maps them to responsible team members. Power Platform automatically creates tasks, sets deadlines, and sends reminders\u2014ensuring nothing falls through the cracks. 18:00 End of Day: Reflection and Planning Before The day ends with unanswered emails, incomplete tasks, and unclear priorities for tomorrow. Team members leave feeling overwhelmed and behind schedule. After Work IQ provides a comprehensive daily summary. Copilot highlights achievements, flags items needing attention, and suggests priorities for tomorrow. Your team leaves with clarity, confidence, and a clear plan for the next day. Save 10+ Hours Weekly Automation handles repetitive tasks, freeing your team to focus on strategic work that drives business growth. Increase Productivity by 80% Work flows seamlessly through your organization, with AI handling coordination, analysis, and decision support. Reduce Errors to Zero Automated workflows eliminate human error, ensuring consistency and accuracy across all business processes. Make Data-Driven Decisions Real-time insights from Work IQ and Copilot enable faster, smarter decisions based on complete information. Improve Team Satisfaction Eliminate tedious manual work and empower your team to focus on meaningful, creative tasks. Scale Without Limits As your business grows, AI-powered systems scale automatically, maintaining efficiency at any size. Use Cases Real-World Applications of Our AI-Powered Business System Sales Process Automation Automate your entire sales pipeline from lead generation to deal closure. Work IQ analyzes customer interactions, Copilot extracts opportunities, and Power Platform creates automated workflows that nurture leads and close deals faster. Customer Complaint Analysis Automatically analyze customer complaints from emails, chats, and support tickets. Copilot identifies patterns, categorizes issues, and generates insights that help improve customer satisfaction and resolve problems proactively. HR Onboarding Flow Streamline employee onboarding with automated workflows. Work IQ tracks onboarding progress, Copilot generates personalized welcome materials, and<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"coauthors":[35],"class_list":["post-32649","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/32649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/comments?post=32649"}],"version-history":[{"count":16,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/32649\/revisions"}],"predecessor-version":[{"id":32670,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/pages\/32649\/revisions\/32670"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/media?parent=32649"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/en\/wp-json\/wp\/v2\/coauthors?post=32649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}