{"id":22950,"date":"2025-08-06T09:24:11","date_gmt":"2025-08-06T09:24:11","guid":{"rendered":"https:\/\/kansoft.ch\/?page_id=22950"},"modified":"2026-04-07T06:33:35","modified_gmt":"2026-04-07T06:33:35","slug":"hybrid-engineering-roi-calculator","status":"publish","type":"page","link":"https:\/\/kansoft.ch\/de\/hybrid-engineering-roi-calculator\/","title":{"rendered":"Hybrid-Engineering-ROI-Rechner"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22950\" class=\"elementor elementor-22950\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e310b7c e-con-full e-flex e-con e-parent\" data-id=\"e310b7c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c6a881 elementor-widget elementor-widget-html\" data-id=\"3c6a881\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"team-roi-calculator-section\">\r\n    <div class=\"roi-header-container\">\r\n        <h1 class=\"main-heading\">Build Your Hybrid Engineering Team<br> <span class=\"highlight\">Faster, Smarter, and\r\n                Cost-Efficient<\/span><\/h1>\r\n        <p class=\"sub-heading\">\r\n            Use this Hybrid Engineering ROI Calculator to benchmark the optimal team structure for faster delivery and reduced spend, based on real GCC models and Swiss project benchmarks.\r\n            <button class=\"info-icon\" aria-label=\"Show data sources\">i\r\n                <span class=\"info-tooltip\">\r\n                    <strong>Data Sources:<\/strong> Salary benchmarks are blended averages updated for 2025.<br>\r\n                    - <strong>Swiss Data:<\/strong> Derived from the Swiss Federal Statistical Office (FSO), major job\r\n                    portals (jobs.ch), and industry recruitment reports.<br>\r\n                    - <strong>GCC Data:<\/strong> Based on our proprietary placement data in India and market analysis\r\n                    from leading global advisory firms.\r\n                <\/span>\r\n            <\/button>\r\n        <\/p>\r\n    <\/div>\r\n    <div class=\"calculator-layout\">\r\n        <div class=\"calculator-wrapper\">\r\n            <form id=\"team-roi-form\" onsubmit=\"return false;\">\r\n\r\n                <div id=\"role-profiles-container\"><\/div>\r\n\r\n                <div class=\"add-role-container\">\r\n                    <button type=\"button\" id=\"add-role-btn\" class=\"add-role-button\">\r\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"><\/line>\r\n                            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\r\n                        <\/svg>\r\n                        <span>Build Your Team<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <hr class=\"form-divider\">\r\n\r\n                <div class=\"form-subsection form-subsection-two-col\">\r\n                    <div class=\"calculator-field\">\r\n                        <label for=\"durationView\">View Totals As<\/label>\r\n                        <select id=\"durationView\" class=\"input-field\">\r\n                            <option value=\"monthly\" selected>Monthly<\/option>\r\n                            <option value=\"yearly\">Yearly<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"calculator-field\">\r\n                        <label for=\"hiringDuration\">Project Duration (Months)<\/label>\r\n                        <input id=\"hiringDuration\" class=\"input-field\" type=\"number\" value=\"0\" min=\"0\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-subsection form-subsection-one-col\">\r\n                    <div class=\"calculator-field\">\r\n                        <label for=\"currency\">Currency<\/label>\r\n                        <select id=\"currency\" class=\"input-field\">\r\n                            <option value=\"CHF\" selected>CHF<\/option>\r\n                            <option value=\"USD\">USD<\/option>\r\n                            <option value=\"EUR\">EUR<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n        <div class=\"result-wrapper\">\r\n            <h2 class=\"results-title\">Your Real-Time Cost Analysis<\/h2>\r\n            <div id=\"results-content-wrapper\">\r\n                <div class=\"output-summary\">\r\n                    <div class=\"summary-item\">\r\n                        <div class=\"label\" id=\"total-cost-label\">Total Monthly Cost<\/div>\r\n                        <div class=\"value\" id=\"output-hybrid-cost\">CHF 0<\/div>\r\n                    <\/div>\r\n                    <div class=\"summary-item\">\r\n                        <div class=\"label\" id=\"savings-label\">Monthly Savings<\/div>\r\n                        <div class=\"value\" id=\"output-savings\">CHF 0<\/div>\r\n                    <\/div>\r\n                    <div class=\"summary-item\">\r\n                        <div class=\"label\">Equivalent All-Swiss Cost<\/div>\r\n                        <div class=\"value\" id=\"output-swiss-only-cost\">CHF 0<\/div>\r\n                    <\/div>\r\n                    <div class=\"summary-item\">\r\n                        <div class=\"label\">Team Size<\/div>\r\n                        <div class=\"value\" id=\"output-team-size\">0<\/div>\r\n                    <\/div>\r\n                    <div class=\"summary-item summary-item-full-width\">\r\n                        <div class=\"label\">Total Project Cost<\/div>\r\n                        <div class=\"value\" id=\"output-project-cost\">CHF 0<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"detailed-report\">\r\n                    <div class=\"chart-container\"><canvas id=\"costBreakdownChart\"><\/canvas><\/div>\r\n                    <div class=\"report-breakdown\" id=\"report-container\"><\/div>\r\n                <\/div>\r\n                <button id=\"download-report-btn\" class=\"download-button\">Download Detailed Report<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"report-modal\" class=\"modal-overlay modal-hidden\">\r\n        <div class=\"modal-content\">\r\n            <button id=\"modal-close-btn\" class=\"modal-close\" aria-label=\"Close modal\">&times;<\/button>\r\n            <h2 class=\"modal-title\">Get Your Detailed Report<\/h2>\r\n            <div id=\"form-wrapper\">\r\n                <div id=\"hubspot-form-container\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<template id=\"role-profile-template\">\r\n    <div class=\"role-profile\" data-id=\"0\">\r\n        <div class=\"role-header\">\r\n            <h3 class=\"role-title\">Team Member<\/h3>\r\n            <button type=\"button\" class=\"remove-role-btn\" title=\"Remove Role\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <polyline points=\"3 6 5 6 21 6\"><\/polyline>\r\n                    <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"><\/path>\r\n                    <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"><\/line>\r\n                    <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"><\/line>\r\n                <\/svg>\r\n            <\/button>\r\n        <\/div>\r\n        <div class=\"form-subsection\">\r\n            <div class=\"calculator-field\">\r\n                <label for=\"role-select-0\">Job Role<\/label>\r\n                <select id=\"role-select-0\" class=\"input-field role-select\" data-value-type=\"role\"><\/select>\r\n            <\/div>\r\n            <div class=\"calculator-field\">\r\n                <label for=\"seniority-select-0\">Seniority Level<\/label>\r\n                <select id=\"seniority-select-0\" class=\"input-field seniority-select\"\r\n                    data-value-type=\"seniority\"><\/select>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"form-subsection\">\r\n            <div class=\"calculator-field\">\r\n                <label for=\"swiss-qty-0\">No. of Swiss Hires<\/label>\r\n                <input id=\"swiss-qty-0\" class=\"input-field swiss-qty\" type=\"number\" value=\"0\" min=\"0\"\r\n                    data-value-type=\"swissQty\">\r\n            <\/div>\r\n            <div class=\"calculator-field\">\r\n                <label for=\"gcc-qty-0\">No. of GCC Hires<\/label>\r\n                <input id=\"gcc-qty-0\" class=\"input-field gcc-qty\" type=\"number\" value=\"0\" min=\"0\"\r\n                    data-value-type=\"gccQty\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"calculator-field\">\r\n            <label for=\"swiss-cost-slider-0\"><span>Monthly Cost \/ Swiss<\/span><strong class=\"swiss-cost-label\">CHF\r\n                    0<\/strong><\/label>\r\n            <input id=\"swiss-cost-slider-0\" class=\"range-slider swiss-cost-slider\" type=\"range\" min=\"0\" max=\"1\"\r\n                step=\"100\" value=\"0\" data-value-type=\"swissCost\">\r\n        <\/div>\r\n        <div class=\"calculator-field\">\r\n            <label for=\"gcc-cost-slider-0\"><span>Monthly Cost \/ GCC<\/span><strong class=\"gcc-cost-label\">CHF\r\n                    0<\/strong><\/label>\r\n            <input id=\"gcc-cost-slider-0\" class=\"range-slider gcc-cost-slider\" type=\"range\" min=\"0\" max=\"1\" step=\"50\"\r\n                value=\"0\" data-value-type=\"gccCost\">\r\n        <\/div>\r\n    <\/div>\r\n<\/template>\r\n\r\n<style>\r\n    \/* --- Base Styles (with visual enhancements) --- *\/\r\n    :root {\r\n        --c-primary: #0A004F;\r\n        --c-primary-dark: #060033;\r\n        --c-primary-gradient: linear-gradient(145deg, var(--c-primary-dark), var(--c-primary));\r\n        --c-accent: #029e84;\r\n        --c-accent-light: #51c9b6;\r\n        --c-accent-hover: #028a73;\r\n        --c-white: #ffffff;\r\n        --c-bg: #f7f9fa;\r\n        --c-bg-light: #ffffff;\r\n        --c-text-dark: #1d2433;\r\n        --c-text-muted: #5a6271;\r\n        --c-border: #e1e4e6;\r\n        --font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    html {\r\n        scroll-behavior: smooth;\r\n    }\r\n\r\n    .form-loader-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        min-height: 250px;\r\n        \/* Gives the modal consistent height *\/\r\n    }\r\n\r\n    .spinner {\r\n        width: 56px;\r\n        height: 56px;\r\n        border: 6px solid var(--c-border);\r\n        border-top-color: var(--c-accent);\r\n        border-radius: 50%;\r\n        animation: spin 1s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n        to {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    .team-roi-calculator-section {\r\n        font-family: var(--font-family), sans-serif;\r\n        background-color: var(--c-bg);\r\n        padding: 120px 0;\r\n    }\r\n\r\n    .team-roi-calculator-section *,\r\n    .team-roi-calculator-section *::before,\r\n    .team-roi-calculator-section *::after {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .roi-header-container {\r\n        text-align: center;\r\n        margin-bottom: 4rem;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .roi-header-container .main-heading {\r\n        font-size: clamp(2rem, 4vw, 2.8rem);\r\n        font-weight: 800;\r\n        color: var(--c-text-dark);\r\n        margin: 0 0 1rem 0;\r\n        letter-spacing: -0.5px;\r\n    }\r\n\r\n    .roi-header-container .main-heading .highlight {\r\n        color: var(--c-accent);\r\n    }\r\n\r\n    .roi-header-container .sub-heading {\r\n        position: relative;\r\n        font-size: clamp(1rem, 2.5vw, 1.1rem);\r\n        color: var(--c-text-muted);\r\n        line-height: 1.7;\r\n        max-width: 700px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .calculator-layout {\r\n        display: grid;\r\n        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);\r\n        gap: 3rem;\r\n        align-items: flex-start;\r\n        max-width: 1360px;\r\n        margin: 0 auto;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .calculator-wrapper {\r\n        padding: 2.5rem;\r\n        border-radius: 24px;\r\n        background-color: var(--c-bg-light);\r\n        box-shadow: 0 16px 40px -12px rgba(0, 20, 50, 0.1);\r\n    }\r\n\r\n    .result-wrapper {\r\n        position: sticky;\r\n        top: 24px;\r\n        border-radius: 24px;\r\n        color: var(--c-white);\r\n        background: linear-gradient(145deg, rgba(10, 0, 79, 0.85), rgba(6, 0, 51, 0.9));\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        padding: 2.5rem;\r\n        box-shadow: 0 20px 35px -10px rgba(10, 0, 79, 0.3), 0 10px 15px -5px rgba(10, 0, 79, 0.15);\r\n    }\r\n\r\n    #team-roi-form {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 1.5rem;\r\n    }\r\n\r\n    .form-subsection {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 1.5rem;\r\n    }\r\n\r\n    .form-subsection-three-col {\r\n        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n    }\r\n\r\n    .calculator-field label {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        font-weight: 500;\r\n        margin-bottom: 0.75rem;\r\n        font-size: 0.9rem;\r\n        color: var(--c-text-muted);\r\n    }\r\n\r\n    \/* NEW: Added rule to prevent the duration label from wrapping *\/\r\n    label[for=\"hiringDuration\"] {\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .calculator-field label strong {\r\n        color: var(--c-primary);\r\n        font-weight: 700;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .calculator-wrapper .input-field {\r\n        width: 100%;\r\n        padding: 14px 18px;\r\n        border: 1px solid var(--c-border);\r\n        border-radius: 12px;\r\n        font-size: 1rem;\r\n        font-family: var(--font-family), sans-serif;\r\n        background-color: #f7f9fa;\r\n        color: var(--c-text-dark);\r\n        transition: border-color 0.2s, box-shadow 0.2s;\r\n    }\r\n\r\n    .calculator-wrapper .input-field:focus {\r\n        outline: none;\r\n        border-color: var(--c-accent);\r\n        background-color: var(--c-white);\r\n        box-shadow: 0 0 0 3px rgba(2, 158, 132, 0.2);\r\n    }\r\n\r\n    .range-slider {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        width: 100%;\r\n        height: 8px;\r\n        background: var(--c-border);\r\n        border-radius: 8px;\r\n        outline: none;\r\n        padding: 0;\r\n        margin: 8px 0;\r\n        background-image: linear-gradient(var(--c-accent), var(--c-accent));\r\n        background-repeat: no-repeat;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .range-slider::-webkit-slider-thumb {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        width: 22px;\r\n        height: 22px;\r\n        background: var(--c-accent);\r\n        cursor: pointer;\r\n        border-radius: 50%;\r\n        border: 4px solid var(--c-white);\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n        margin-top: -7px;\r\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n    }\r\n\r\n    .range-slider:active::-webkit-slider-thumb,\r\n    .range-slider:hover::-webkit-slider-thumb {\r\n        transform: scale(1.15);\r\n        box-shadow: 0 2px 8px rgba(2, 158, 132, 0.4);\r\n    }\r\n\r\n    .range-slider::-moz-range-thumb {\r\n        width: 14px;\r\n        height: 14px;\r\n        background: var(--c-accent);\r\n        cursor: pointer;\r\n        border-radius: 50%;\r\n        border: 4px solid var(--c-white);\r\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .range-slider:active::-moz-range-thumb,\r\n    .range-slider:hover::-moz-range-thumb {\r\n        transform: scale(1.15);\r\n        box-shadow: 0 2px 8px rgba(2, 158, 132, 0.4);\r\n    }\r\n\r\n    .results-title {\r\n        font-size: 1.8rem;\r\n        font-weight: 700;\r\n        margin: 0 0 2rem 0;\r\n        color: white !important;\r\n        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .output-summary {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 1.25rem 1.75rem;\r\n        padding-bottom: 2rem;\r\n        margin-bottom: 1.5rem;\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.15);\r\n    }\r\n\r\n    .summary-item .label {\r\n        font-size: 0.9rem;\r\n        opacity: 0.8;\r\n        margin-bottom: 6px;\r\n    }\r\n\r\n    .summary-item .value {\r\n        font-size: 1.75rem;\r\n        font-weight: 700;\r\n        color: var(--c-accent-light);\r\n        display: flex;\r\n        align-items: baseline;\r\n        gap: 0.25em;\r\n        transition: text-shadow 0.3s ease;\r\n    }\r\n\r\n    .summary-item:hover .value {\r\n        text-shadow: 0 0 12px var(--c-accent-light);\r\n    }\r\n\r\n    .summary-item-full-width {\r\n        grid-column: 1 \/ -1;\r\n        text-align: center;\r\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding-top: 1.25rem;\r\n    }\r\n\r\n    .summary-item-full-width .value {\r\n        font-size: 2rem;\r\n        justify-content: center;\r\n    }\r\n\r\n    .download-button {\r\n        width: 100%;\r\n        padding: 16px;\r\n        margin-top: 2rem;\r\n        font-family: var(--font-family), sans-serif;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: var(--c-white);\r\n        background-color: var(--c-accent);\r\n        border: none;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease-in-out;\r\n    }\r\n\r\n    .download-button:hover,\r\n    .download-button:focus {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 6px 20px rgba(2, 158, 132, 0.3);\r\n        background-color: var(--c-accent-hover);\r\n    }\r\n\r\n    .detailed-report {\r\n        display: grid;\r\n        grid-template-columns: 180px 1fr;\r\n        gap: 2rem;\r\n        align-items: center;\r\n    }\r\n\r\n    .chart-container {\r\n        position: relative;\r\n        max-width: 180px;\r\n        aspect-ratio: 1 \/ 1;\r\n    }\r\n\r\n    .report-breakdown .report-title {\r\n        font-size: 1.2rem;\r\n        font-weight: 600;\r\n        margin-bottom: 1rem;\r\n        opacity: 0.9;\r\n    }\r\n\r\n    .report-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 1rem;\r\n        padding: 0.75rem 0.25rem;\r\n        font-size: 0.95rem;\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 8px;\r\n        transition: background-color 0.2s ease;\r\n    }\r\n\r\n    .report-item:hover {\r\n        background-color: rgba(255, 255, 255, 0.05);\r\n    }\r\n\r\n    .report-item:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .report-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n        flex-shrink: 0;\r\n        box-shadow: 0 0 6px currentColor;\r\n    }\r\n\r\n    .report-item .label {\r\n        opacity: 0.8;\r\n        flex-grow: 1;\r\n    }\r\n\r\n    .report-item .value {\r\n        font-weight: 600;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .modal-overlay {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(10, 0, 79, 0.6);\r\n        backdrop-filter: blur(8px);\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 1000;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: opacity 0.3s ease, visibility 0s 0.3s;\r\n    }\r\n\r\n    .modal-overlay:not(.modal-hidden) {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .modal-content {\r\n        background-color: var(--c-white);\r\n        padding: 2.5rem 3rem;\r\n        border-radius: 24px;\r\n        width: 100%;\r\n        max-width: 500px;\r\n        position: relative;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n        transform: scale(0.95);\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .modal-overlay:not(.modal-hidden) .modal-content {\r\n        transform: scale(1);\r\n    }\r\n\r\n    .modal-title {\r\n        color: var(--c-primary);\r\n        font-size: 1.8rem;\r\n        font-weight: 700;\r\n        margin: 0 0 1.5rem 0;\r\n        text-align: center;\r\n    }\r\n\r\n    .modal-close {\r\n        position: absolute;\r\n        top: 0.5rem;\r\n        right: 0.5rem;\r\n        background: none !important;\r\n        border: none;\r\n        font-size: 2rem;\r\n        color: var(--c-text-muted);\r\n        cursor: pointer;\r\n        line-height: 1;\r\n        padding: 0.5rem;\r\n        border-radius: 50%;\r\n        transition: color 0.2s, background-color 0.2s;\r\n    }\r\n\r\n    .modal-close:hover {\r\n        color: var(--c-primary);\r\n        background-color: var(--c-border);\r\n    }\r\n\r\n    @keyframes fadeIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(-10px);\r\n        }\r\n\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    .info-icon {\r\n        display: inline-flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: var(--c-text-muted);\r\n        color: var(--c-white);\r\n        border-radius: 50%;\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        position: relative;\r\n        top: -1px;\r\n        margin-left: 8px;\r\n        border: none;\r\n        padding: 0;\r\n        transition: transform 0.2s, box-shadow 0.2s;\r\n    }\r\n\r\n    .info-icon:hover {\r\n        transform: scale(1.1);\r\n        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .info-tooltip {\r\n        visibility: hidden;\r\n        opacity: 0;\r\n        position: absolute;\r\n        bottom: 125%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 320px;\r\n        background-color: var(--c-text-dark);\r\n        color: var(--c-white);\r\n        text-align: left;\r\n        border-radius: 8px;\r\n        padding: 1rem;\r\n        z-index: 1;\r\n        font-size: 0.85rem;\r\n        line-height: 1.6;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\r\n        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .info-tooltip strong {\r\n        color: var(--c-accent-light);\r\n    }\r\n\r\n    .info-icon:hover .info-tooltip,\r\n    .info-icon:focus .info-tooltip {\r\n        visibility: visible;\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(-5px);\r\n    }\r\n\r\n    .role-profile {\r\n        background-color: var(--c-bg-light);\r\n        border: 1px solid var(--c-border);\r\n        border-radius: 16px;\r\n        padding: 1.5rem;\r\n        margin-bottom: 1.5rem;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\r\n        transition: box-shadow 0.3s ease, transform 0.3s ease;\r\n        animation: fadeIn 0.4s ease-out;\r\n    }\r\n\r\n    .role-profile:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 10px 15px -3px rgba(0, 20, 50, 0.1), 0 4px 6px -2px rgba(0, 20, 50, 0.05);\r\n    }\r\n\r\n    .role-profile:focus-within {\r\n        box-shadow: 0 0 0 3px rgba(2, 158, 132, 0.2);\r\n        border-color: var(--c-accent);\r\n    }\r\n\r\n    .role-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 1rem;\r\n    }\r\n\r\n    .role-title {\r\n        font-size: 1.2rem;\r\n        font-weight: 700;\r\n        color: var(--c-primary);\r\n        margin: 0;\r\n    }\r\n\r\n    .remove-role-btn {\r\n        background: transparent;\r\n        border: none;\r\n        cursor: pointer;\r\n        padding: 5px;\r\n        border-radius: 50%;\r\n        color: var(--c-text-muted);\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .remove-role-btn:hover,\r\n    .remove-role-btn:focus {\r\n        background-color: #fde2e2;\r\n        color: #c53030;\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .remove-role-btn svg {\r\n        pointer-events: none;\r\n    }\r\n\r\n    .add-role-container {\r\n        border-top: 1px dashed var(--c-border);\r\n        padding-top: 1.5rem;\r\n    }\r\n\r\n    .add-role-button {\r\n        width: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 0.75rem;\r\n        padding: 1rem;\r\n        font-family: var(--font-family), sans-serif;\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        color: var(--c-accent-hover);\r\n        background-color: #f0fafa;\r\n        border: 2px dashed #b3e4dc;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .add-role-button svg {\r\n        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n    }\r\n\r\n    .add-role-button:hover,\r\n    .add-role-button:focus {\r\n        background-color: #e6f6f4;\r\n        border-color: var(--c-accent);\r\n        color: var(--c-primary);\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 4px 10px rgba(2, 158, 132, 0.1);\r\n    }\r\n\r\n    .add-role-button:hover svg {\r\n        transform: rotate(90deg) scale(1.1);\r\n    }\r\n\r\n    .form-divider {\r\n        border: none;\r\n        border-top: 1px solid var(--c-border);\r\n        margin: 2rem 0 1.5rem 0;\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n        .calculator-layout {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .result-wrapper {\r\n            position: static;\r\n            margin-top: 2rem;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n\r\n        .form-subsection,\r\n        .output-summary,\r\n        .form-subsection-three-col {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .detailed-report {\r\n            grid-template-columns: 1fr;\r\n            text-align: center;\r\n        }\r\n\r\n        .chart-container {\r\n            margin: 0 auto 1.5rem auto;\r\n        }\r\n\r\n        .modal-content {\r\n            width: 100%;\r\n            padding: 2rem 1.5rem;\r\n        }\r\n\r\n        \/* 1. Make the tooltip responsive to prevent overflow *\/\r\n        .info-icon {\r\n        display: none;\r\n    }\r\n\r\n        \/* 2. Improve heading text scaling and wrapping *\/\r\n        .roi-header-container .main-heading {\r\n            font-size: clamp(1.75rem, 6vw, 2.2rem);\r\n            \/* Allows font to get a bit smaller *\/\r\n            line-height: 1.3;\r\n            \/* Improves line spacing *\/\r\n        }\r\n\r\n        \/* 3. Improve sub-heading readability *\/\r\n        .roi-header-container .sub-heading {\r\n            max-width: 95%;\r\n            \/* Ensure it doesn't touch the screen edges *\/\r\n        }\r\n\r\n    }\r\n    \r\n    \/* Ultra-reduced spacing for mobile view *\/\r\n@media (max-width: 767px) {\r\n\r\n    \/* Shrink chart wrapper even more *\/\r\n    .chart-container {\r\n        margin-top: 0 !important;\r\n        margin-bottom: 0 !important;\r\n        height: 110px !important;\r\n    }\r\n\r\n    \/* Reduce actual canvas size *\/\r\n    #costBreakdownChart {\r\n        height: 110px !important;\r\n        width: 110px !important;\r\n    }\r\n\r\n    \/* Reduce spacing between chart and breakdown *\/\r\n    .detailed-report {\r\n        row-gap: 4px !important;   \/* almost no gap *\/\r\n        margin-top: 0 !important;\r\n        margin-bottom: 0 !important;\r\n    }\r\n\r\n    \/* Remove inner spacing of breakdown container *\/\r\n    .report-breakdown {\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    \/* Shrink each breakdown item spacing *\/\r\n    .report-item {\r\n        padding: 4px 0 !important;\r\n    }\r\n\r\n    \/* Reduce spacing before the download button *\/\r\n    .download-button {\r\n        margin-top: 10px !important;\r\n    }\r\n    #costBreakdownChart {\r\n        transform: scaleX(1.35);   \/* widen text *\/\r\n        transform-origin: center;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.9.1\/dist\/chart.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.23\/jspdf.plugin.autotable.min.js\"><\/script>\r\n<script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n\r\n        class TeamROICalculator {\r\n            \/\/ --- 1. CONFIGURATION ---\r\n            BENCHMARKS = {\r\n                roles: {\r\n                    \"Backend Engineer\": { \"Junior\": { swiss: { min: 8000, max: 10000, default: 9000 }, gcc: { min: 2500, max: 4000, default: 3200 } }, \"Mid-Level\": { swiss: { min: 10000, max: 13000, default: 11500 }, gcc: { min: 4000, max: 6000, default: 4800 } }, \"Senior\": { swiss: { min: 12500, max: 16000, default: 14000 }, gcc: { min: 5500, max: 8000, default: 6500 } } },\r\n                    \"Frontend Engineer\": { \"Junior\": { swiss: { min: 7500, max: 9500, default: 8500 }, gcc: { min: 2200, max: 3800, default: 3000 } }, \"Mid-Level\": { swiss: { min: 9500, max: 12500, default: 11000 }, gcc: { min: 3800, max: 5800, default: 4500 } }, \"Senior\": { swiss: { min: 12000, max: 15000, default: 13500 }, gcc: { min: 5000, max: 7500, default: 6000 } } },\r\n                    \"QA\/Test Engineer\": { \"Junior\": { swiss: { min: 7000, max: 8500, default: 7500 }, gcc: { min: 2000, max: 3500, default: 2800 } }, \"Mid-Level\": { swiss: { min: 8500, max: 11000, default: 9800 }, gcc: { min: 3500, max: 5000, default: 4200 } }, \"Senior\": { swiss: { min: 10500, max: 13000, default: 11500 }, gcc: { min: 4500, max: 6500, default: 5500 } } },\r\n                    \"DevOps Engineer\": { \"Junior\": { swiss: { min: 8500, max: 10500, default: 9500 }, gcc: { min: 3000, max: 4500, default: 3800 } }, \"Mid-Level\": { swiss: { min: 11000, max: 14000, default: 12500 }, gcc: { min: 4800, max: 6500, default: 5800 } }, \"Senior\": { swiss: { min: 13500, max: 17000, default: 15000 }, gcc: { min: 6500, max: 9000, default: 7500 } } },\r\n                    \"Product Manager\": { \"Junior\": { swiss: { min: 9000, max: 11000, default: 10000 }, gcc: { min: 3500, max: 5000, default: 4200 } }, \"Mid-Level\": { swiss: { min: 11000, max: 14500, default: 12800 }, gcc: { min: 5000, max: 7500, default: 6000 } }, \"Senior\": { swiss: { min: 14000, max: 18000, default: 16000 }, gcc: { min: 7000, max: 10000, default: 8500 } } },\r\n                    \"UI\/UX Designer\": { \"Junior\": { swiss: { min: 7000, max: 9000, default: 8000 }, gcc: { min: 2000, max: 3500, default: 2700 } }, \"Mid-Level\": { swiss: { min: 9000, max: 12000, default: 10500 }, gcc: { min: 3500, max: 5500, default: 4500 } }, \"Senior\": { swiss: { min: 11500, max: 14000, default: 13000 }, gcc: { min: 5000, max: 7000, default: 6000 } } },\r\n                    \"Engineering Manager\": { \"Junior\": { swiss: { min: 12000, max: 15000, default: 13500 }, gcc: { min: 5000, max: 7000, default: 6000 } }, \"Mid-Level\": { swiss: { min: 14000, max: 18000, default: 16000 }, gcc: { min: 6500, max: 9000, default: 7500 } }, \"Senior\": { swiss: { min: 17000, max: 22000, default: 19000 }, gcc: { min: 8500, max: 12000, default: 10000 } } }\r\n                }\r\n            };\r\n            CHART_COLORS = ['#029e84', '#5c54a2', '#f37b6c', '#3498db', '#f1c40f', '#9b59b6', '#1abc9c', '#e74c3c', '#34495e', '#a29de0', '#e67e22', '#2ecc71'];\r\n\r\n            constructor() {\r\n                this.state = { team: [], app: { currency: 'CHF', durationView: 'monthly', hiringDuration: 0, rates: { CHF: 1, USD: 1.10, EUR: 1.05 } } };\r\n                this.nextProfileId = 0;\r\n                this.chart = null;\r\n\r\n                \/\/ *** MODIFICATION 1: Add hubspotData property to the class ***\r\n                this.hubspotData = { email: '', firstname: '' };\r\n\r\n                this.dom = {\r\n                    form: document.getElementById('team-roi-form'),\r\n                    profilesContainer: document.getElementById('role-profiles-container'),\r\n                    addRoleBtn: document.getElementById('add-role-btn'),\r\n                    roleTemplate: document.getElementById('role-profile-template'),\r\n                    results: { hybridCost: document.getElementById('output-hybrid-cost'), swissOnlyCost: document.getElementById('output-swiss-only-cost'), savings: document.getElementById('output-savings'), teamSize: document.getElementById('output-team-size'), projectCost: document.getElementById('output-project-cost'), totalCostLabel: document.getElementById('total-cost-label'), savingsLabel: document.getElementById('savings-label'), reportContainer: document.getElementById('report-container'), },\r\n                    modal: { overlay: document.getElementById('report-modal'), downloadBtn: document.getElementById('download-report-btn'), closeBtn: document.getElementById('modal-close-btn'), formContainer: document.getElementById('hubspot-form-container'), formWrapper: document.getElementById('form-wrapper') }\r\n                };\r\n                this.initialize();\r\n            }\r\n\r\n            \/\/ ... (no changes to other methods until _openModal) ...\r\n\r\n            async initialize() {\r\n                this._setupChart();\r\n                this._bindEvents();\r\n                await this._fetchCurrencyRates();\r\n                const initialDuration = document.getElementById('hiringDuration').value;\r\n                this.state.app.hiringDuration = isNaN(parseInt(initialDuration, 10)) ? 0 : parseInt(initialDuration, 10);\r\n                const defaultTeam = [];\r\n                if (defaultTeam.length > 0) {\r\n                    defaultTeam.forEach(profileData => this.addRoleProfile(profileData));\r\n                }\r\n                this._render();\r\n            }\r\n\r\n            _bindEvents() {\r\n                this.dom.form.addEventListener('input', this._handleFormInput.bind(this));\r\n                this.dom.form.addEventListener('click', this._handleFormClick.bind(this));\r\n                this.dom.addRoleBtn.addEventListener('click', () => this.addRoleProfile());\r\n                this.dom.modal.downloadBtn.addEventListener('click', this._openModal.bind(this));\r\n                this.dom.modal.closeBtn.addEventListener('click', this._closeModal.bind(this));\r\n                this.dom.modal.overlay.addEventListener('click', e => { if (e.target === this.dom.modal.overlay) this._closeModal(); });\r\n            }\r\n\r\n            _handleFormInput(e) {\r\n                const profileElement = e.target.closest('.role-profile');\r\n                if (profileElement) {\r\n                    this._updateProfileState(e.target, profileElement);\r\n                } else if (e.target.matches('#currency, #durationView, #hiringDuration')) {\r\n                    this._updateAppState(e.target);\r\n                }\r\n                this._render();\r\n            }\r\n\r\n            _handleFormClick(e) {\r\n                const removeBtn = e.target.closest('.remove-role-btn');\r\n                if (removeBtn) {\r\n                    const profileElement = removeBtn.closest('.role-profile');\r\n                    const profileId = parseInt(profileElement.dataset.id, 10);\r\n                    this.state.team = this.state.team.filter(p => p.id !== profileId);\r\n                    profileElement.remove();\r\n                    this._render();\r\n                }\r\n            }\r\n\r\n            _updateProfileState(input, profileElement) {\r\n                const profileId = parseInt(profileElement.dataset.id, 10);\r\n                const stateEntry = this.state.team.find(p => p.id === profileId);\r\n                if (!stateEntry) return;\r\n                const valueType = input.dataset.valueType;\r\n                if (valueType) {\r\n                    stateEntry[valueType] = input.type === 'number' ? (parseInt(input.value, 10) || 0) : input.value;\r\n                }\r\n                if (valueType === 'role' || valueType === 'seniority') {\r\n                    const benchmark = this.BENCHMARKS.roles[stateEntry.role]?.[stateEntry.seniority];\r\n                    if (benchmark) {\r\n                        stateEntry.swissCost = benchmark.swiss.default;\r\n                        stateEntry.gccCost = benchmark.gcc.default;\r\n                        this._updateSlidersForRole(profileElement, stateEntry);\r\n                    }\r\n                }\r\n                if (input.matches('.range-slider')) {\r\n                    this._updateSliderLabel(input, input.value);\r\n                }\r\n            }\r\n\r\n            _updateAppState(input) {\r\n                this.state.app[input.id] = input.type === 'number' ? (parseInt(input.value, 10) || 0) : input.value;\r\n            }\r\n\r\n            _calculateTotals() {\r\n                return this.state.team.reduce((totals, p) => {\r\n                    const benchmark = this.BENCHMARKS.roles[p.role]?.[p.seniority];\r\n                    totals.teamSize += p.swissQty + p.gccQty;\r\n                    if (benchmark) {\r\n                        totals.hybridCost += (p.swissQty * p.swissCost) + (p.gccQty * p.gccCost);\r\n                        totals.swissOnlyCost += (p.swissQty + p.gccQty) * benchmark.swiss.default;\r\n                    }\r\n                    return totals;\r\n                }, { teamSize: 0, hybridCost: 0, swissOnlyCost: 0 });\r\n            }\r\n\r\n            _formatCurrency(value, currency, rate, multiplier = 1) {\r\n                return new Intl.NumberFormat('de-CH', { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(Math.round(value * rate * multiplier));\r\n            }\r\n\r\n            _render() {\r\n                const results = this._calculateTotals();\r\n                const { currency, durationView, hiringDuration, rates } = this.state.app;\r\n                const rate = rates[currency];\r\n                const displayMultiplier = durationView === 'yearly' ? 12 : 1;\r\n                this.dom.results.hybridCost.textContent = this._formatCurrency(results.hybridCost, currency, rate, displayMultiplier);\r\n                this.dom.results.swissOnlyCost.textContent = this._formatCurrency(results.swissOnlyCost, currency, rate, displayMultiplier);\r\n                this.dom.results.savings.textContent = this._formatCurrency(results.swissOnlyCost - results.hybridCost, currency, rate, displayMultiplier);\r\n                this.dom.results.teamSize.textContent = results.teamSize;\r\n                const totalProjectCost = results.hybridCost * hiringDuration;\r\n                this.dom.results.projectCost.textContent = this._formatCurrency(totalProjectCost, currency, rate);\r\n                this.dom.results.projectCost.previousElementSibling.textContent = `Total Project Cost (${hiringDuration} Months)`;\r\n                const durationLabel = durationView.charAt(0).toUpperCase() + durationView.slice(1);\r\n                this.dom.results.totalCostLabel.textContent = `Total ${durationLabel} Cost`;\r\n                this.dom.results.savingsLabel.textContent = `${durationLabel} Savings`;\r\n                this._renderChartAndBreakdown(results);\r\n            }\r\n\r\n            _renderChartAndBreakdown(totals) {\r\n                const savingsPercentage = totals.swissOnlyCost > 0 ? ((totals.swissOnlyCost - totals.hybridCost) \/ totals.swissOnlyCost) * 100 : 0;\r\n                this.chart.options.plugins.centerText.text = `${Math.round(savingsPercentage)}%`;\r\n                const chartLabels = [], chartData = [];\r\n                let breakdownHTML = `<div class=\"report-title\">Monthly Cost Breakdown<\/div>`;\r\n                const { currency, rates } = this.state.app;\r\n                this.state.team.forEach((profile, index) => {\r\n                    if (profile.role && profile.seniority) {\r\n                        const addComponent = (location, totalCost) => {\r\n                            const label = `${profile.role.split(' ')[0]} #${index + 1} (${location})`;\r\n                            chartLabels.push(label);\r\n                            chartData.push(totalCost);\r\n                            breakdownHTML += `<div class=\"report-item\"><span class=\"report-dot\" style=\"background-color:${this.CHART_COLORS[(chartLabels.length - 1) % this.CHART_COLORS.length]};\"><\/span><span class=\"label\">${label}<\/span><span class=\"value\">${this._formatCurrency(totalCost, currency, rates[currency])}<\/span><\/div>`;\r\n                        };\r\n                        if (profile.swissQty > 0) addComponent('Swiss', profile.swissQty * profile.swissCost);\r\n                        if (profile.gccQty > 0) addComponent('GCC', profile.gccQty * profile.gccCost);\r\n                    }\r\n                });\r\n                this.dom.results.reportContainer.innerHTML = totals.teamSize > 0 && chartData.length > 0 ? breakdownHTML : `<div class=\"report-item\"><span class=\"label\">Add roles to see breakdown.<\/span><\/div>`;\r\n                this.chart.data.labels = chartLabels;\r\n                this.chart.data.datasets[0].data = chartData;\r\n                this.chart.update();\r\n            }\r\n\r\n            addRoleProfile(initialData = {}) {\r\n                const profileId = this.nextProfileId++;\r\n                const role = initialData.role || '';\r\n                const seniority = initialData.seniority || '';\r\n                const benchmark = this.BENCHMARKS.roles[role]?.[seniority];\r\n                const profileData = { id: profileId, role, seniority, swissQty: initialData.swissQty ?? 0, gccQty: initialData.gccQty ?? 0, swissCost: benchmark?.swiss.default || 0, gccCost: benchmark?.gcc.default || 0 };\r\n                this.state.team.push(profileData);\r\n                const profileElement = this.dom.roleTemplate.content.cloneNode(true).firstElementChild;\r\n                profileElement.dataset.id = profileId;\r\n                this._populateAndConfigureProfile(profileElement, profileData);\r\n                this.dom.profilesContainer.appendChild(profileElement);\r\n            }\r\n\r\n            _populateAndConfigureProfile(element, data) {\r\n                element.querySelectorAll('[id]').forEach(el => {\r\n                    const baseId = el.id;\r\n                    const newId = `${baseId}-${data.id}`;\r\n                    el.id = newId;\r\n                    const label = element.querySelector(`label[for=\"${baseId}\"]`);\r\n                    if (label) label.htmlFor = newId;\r\n                });\r\n                const roleSelect = element.querySelector('.role-select');\r\n                const senioritySelect = element.querySelector('.seniority-select');\r\n                const rolePlaceholder = new Option(\"Select Role...\", \"\", true, true);\r\n                rolePlaceholder.disabled = true;\r\n                roleSelect.add(rolePlaceholder);\r\n                const seniorityPlaceholder = new Option(\"Select Seniority...\", \"\", true, true);\r\n                seniorityPlaceholder.disabled = true;\r\n                senioritySelect.add(seniorityPlaceholder);\r\n                Object.keys(this.BENCHMARKS.roles).forEach(role => roleSelect.add(new Option(role, role)));\r\n                Object.keys(this.BENCHMARKS.roles['Backend Engineer']).forEach(level => senioritySelect.add(new Option(level, level)));\r\n                roleSelect.value = data.role;\r\n                senioritySelect.value = data.seniority;\r\n                element.querySelector('.swiss-qty').value = data.swissQty;\r\n                element.querySelector('.gcc-qty').value = data.gccQty;\r\n                this._updateSlidersForRole(element, data);\r\n            }\r\n\r\n            _updateSlidersForRole(element, data) {\r\n                const benchmarkData = this.BENCHMARKS.roles[data.role]?.[data.seniority];\r\n                if (!benchmarkData) {\r\n                    this._updateSliderLabel(element.querySelector('.swiss-cost-slider'), 0);\r\n                    this._updateSliderLabel(element.querySelector('.gcc-cost-slider'), 0);\r\n                    return;\r\n                };\r\n                const swissSlider = element.querySelector('.swiss-cost-slider');\r\n                const gccSlider = element.querySelector('.gcc-cost-slider');\r\n                Object.assign(swissSlider, { min: benchmarkData.swiss.min, max: benchmarkData.swiss.max });\r\n                Object.assign(gccSlider, { min: benchmarkData.gcc.min, max: benchmarkData.gcc.max });\r\n                this._updateSliderLabel(swissSlider, data.swissCost);\r\n                this._updateSliderLabel(gccSlider, data.gccCost);\r\n            }\r\n\r\n            _updateSliderLabel(slider, value) {\r\n                slider.value = value;\r\n                const label = slider.previousElementSibling.querySelector('strong');\r\n                label.textContent = `CHF ${parseInt(value).toLocaleString('de-CH')}`;\r\n                const percentage = (slider.max - slider.min) > 0 ? (value - slider.min) \/ (slider.max - slider.min) * 100 : 0;\r\n                slider.style.backgroundSize = `${percentage}% 100%`;\r\n            }\r\n\r\n            _setupChart() {\r\n                const centerTextPlugin = {\r\n                    id: 'centerText',\r\n                    afterDraw: (chart) => {\r\n                        const { ctx } = chart;\r\n                        const centerConfig = chart.options.plugins.centerText;\r\n                        if (!centerConfig || !centerConfig.display) return;\r\n                        ctx.save();\r\n                        const chartArea = chart.chartArea;\r\n                        const centerX = (chartArea.left + chartArea.right) \/ 2;\r\n                        const centerY = (chartArea.top + chartArea.bottom) \/ 2;\r\n                        ctx.textAlign = 'center';\r\n                        ctx.textBaseline = 'middle';\r\n                        const mainTextY = centerY - (chartArea.height * 0.08);\r\n                        const subTextY = centerY + (chartArea.height * 0.1);\r\n                        ctx.font = `800 ${chartArea.width * 0.25}px ${getComputedStyle(document.body).getPropertyValue('--font-family')}`;\r\n                        ctx.fillStyle = centerConfig.fontColor || '#FFF';\r\n                        ctx.fillText(centerConfig.text, centerX, mainTextY);\r\n                        ctx.font = `500 ${chartArea.width * 0.1}px ${getComputedStyle(document.body).getPropertyValue('--font-family')}`;\r\n                        ctx.fillStyle = centerConfig.subFontColor || 'rgba(255, 255, 255, 0.7)';\r\n                        ctx.fillText(centerConfig.subText, centerX, subTextY);\r\n                        ctx.restore();\r\n                    }\r\n                };\r\n                this.chart = new Chart(document.getElementById('costBreakdownChart').getContext('2d'), {\r\n                    type: 'doughnut',\r\n                    data: { labels: [], datasets: [{ data: [], borderWidth: 0, backgroundColor: this.CHART_COLORS }] },\r\n                    options: {\r\n                        responsive: true, maintainAspectRatio: false, cutout: '80%',\r\n                        plugins: {\r\n                            legend: { display: false },\r\n                            tooltip: { enabled: true },\r\n                            centerText: { display: true, text: '0%', subText: 'Savings', fontColor: '#FFF', subFontColor: 'rgba(255, 255, 255, 0.7)' }\r\n                        }\r\n                    },\r\n                    plugins: [centerTextPlugin]\r\n                });\r\n            }\r\n\r\n            async _fetchCurrencyRates() {\r\n                try {\r\n                    const response = await fetch('https:\/\/api.frankfurter.app\/latest?from=CHF&to=USD,EUR');\r\n                    if (!response.ok) throw new Error(`API request failed`);\r\n                    const data = await response.json();\r\n                    this.state.app.rates.USD = data.rates.USD;\r\n                    this.state.app.rates.EUR = data.rates.EUR;\r\n                } catch (error) { console.error(\"Currency fetch failed; using default rates.\", error); }\r\n            }\r\n\r\n            _closeModal() {\r\n                this.dom.modal.overlay.classList.add('modal-hidden');\r\n            }\r\n\r\n            \/\/ *** MODIFICATION 2: Replace the old _openModal method with this new one ***\r\n            _openModal() {\r\n                if (this._calculateTotals().teamSize === 0) {\r\n                    alert(\"Please add at least one role profile to generate a report.\");\r\n                    return;\r\n                }\r\n\r\n                this.dom.modal.overlay.classList.remove('modal-hidden');\r\n\r\n                if (!this.dom.modal.formContainer.hasChildNodes() && window.hbspt) {\r\n                    hbspt.forms.create({\r\n                        region: \"na1\",\r\n                        portalId: \"47003847\",\r\n                        formId: \"c8329aa1-f4d7-45a7-992c-d7c0e028c9b1\",\r\n                        target: '#hubspot-form-container',\r\n\r\n                        \/\/ Add this onFormReady function for translations\r\n                        onFormReady: ($form) => {\r\n                            const isGerman = window.location.pathname.includes('\/de');\r\n                            if (!isGerman) return;\r\n\r\n                            const formElement = $form[0];\r\n\r\n                            \/\/ Define German translations\r\n                            const translations = {\r\n                                firstname: 'Vorname',\r\n                                lastname: 'Nachname',\r\n                                email: 'E-Mail',\r\n                                button: 'Detaillierten Bericht herunterladen'\r\n                            };\r\n\r\n                            \/\/ Translate button\r\n                            const submitButton = formElement.querySelector('input.hs-button');\r\n                            if (submitButton) {\r\n                                submitButton.value = translations.button;\r\n                            }\r\n\r\n                            \/\/ Translate labels\r\n                            for (const fieldName in translations) {\r\n                                if (fieldName === 'button') continue;\r\n                                const input = formElement.querySelector(`input[name=\"${fieldName}\"]`);\r\n                                if (input) {\r\n                                    const label = formElement.querySelector(`label[for=\"${input.id}\"]`);\r\n                                    if (label && label.querySelector('span')) {\r\n                                        \/\/ Target the first span to avoid affecting the \"*\" required indicator\r\n                                        label.querySelector('span').textContent = translations[fieldName];\r\n                                    }\r\n                                }\r\n                            }\r\n                        },\r\n\r\n                        \/\/ Your existing onFormSubmit and onFormSubmitted functions remain unchanged\r\n                        onFormSubmit: ($form) => {\r\n                            this.hubspotData.email = $form.find('input[name=\"email\"]').val();\r\n                            this.hubspotData.firstname = $form.find('input[name=\"firstname\"]').val();\r\n                        },\r\n                        onFormSubmitted: async () => {\r\n                            const { formWrapper } = this.dom.modal;\r\n\r\n                            formWrapper.innerHTML = `<div class=\"form-loader-container\"><div class=\"spinner\"><\/div><\/div>`;\r\n\r\n                            try {\r\n                                if (!this.hubspotData.email) {\r\n                                    throw new Error(\"Could not retrieve email from form.\");\r\n                                }\r\n\r\n                                const pdfBlob = await this._generateAndDownloadPDF();\r\n\r\n                                const formData = new FormData();\r\n                                formData.append('report_pdf', pdfBlob, 'Team-ROI-Report.pdf');\r\n                                formData.append('email', this.hubspotData.email);\r\n                                formData.append('firstname', this.hubspotData.firstname);\r\n                                formData.append('calculator_id', 'team_roi');\r\n\r\n                                const response = await fetch('\/wp-json\/calculator\/v1\/upload-and-email-report', {\r\n                                    method: 'POST',\r\n                                    body: formData\r\n                                });\r\n\r\n                                if (!response.ok) {\r\n                                    const errorData = await response.json();\r\n                                    throw new Error(errorData.message || 'Server responded with an error.');\r\n                                }\r\n\r\n                                formWrapper.innerHTML = `<p style=\"text-align:center; color: var(--c-text-muted); min-height: 250px; display: flex; align-items: center; justify-content: center;\"><br>Success! Your report has been sent to your email.<\/p>`;\r\n\r\n                                setTimeout(() => {\r\n                                    this._closeModal();\r\n                                    setTimeout(() => {\r\n                                        formWrapper.innerHTML = '<div id=\"hubspot-form-container\"><\/div>';\r\n                                    }, 500);\r\n                                }, 4000);\r\n\r\n                            } catch (error) {\r\n                                console.error(\"Report Submission Error:\", error);\r\n                                formWrapper.innerHTML = `<p style=\"text-align:center; color: #d9534f; min-height: 250px; display: flex; align-items: center; justify-content: center;\"><br>Sorry, there was an error processing your report.<br>Please try again or contact us directly.<\/p>`;\r\n                            }\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n\r\n            async _generateAndDownloadPDF() {\r\n                return new Promise(async (resolve, reject) => {\r\n                    try {\r\n                        const { jsPDF } = window.jspdf;\r\n                        if (!jsPDF) return reject(new Error(\"jsPDF library not found.\"));\r\n\r\n                        const doc = new jsPDF('p', 'pt');\r\n                        const results = this._calculateTotals();\r\n                        const { currency, rates, hiringDuration } = this.state.app;\r\n                        if (results.teamSize === 0) return reject(new Error(\"Cannot generate a report for an empty team.\"));\r\n\r\n                        const formatPdfCurrency = (value) => `${currency} ${Math.round(value * rates[currency]).toLocaleString('de-CH')}`;\r\n\r\n                        const THEME = { PRIMARY: '#002060', ACCENT: '#029E84', TEXT_DARK: '#1F1F1F', TEXT_LIGHT: '#FFFFFF', TEXT_MUTED: '#595959', BORDER: '#D9D9D9' };\r\n                        const FONT = 'helvetica';\r\n                        const logoUrl = 'https:\/\/kansoft.ch\/wp-content\/uploads\/2024\/11\/Vector-4.png';\r\n                        const MARGIN = 40;\r\n                        const W = doc.internal.pageSize.getWidth();\r\n                        const H = doc.internal.pageSize.getHeight();\r\n                        const CONTENT_WIDTH = W - MARGIN * 2;\r\n\r\n                        const drawHeader = (docInstance) => {\r\n                            try { docInstance.addImage(logoUrl, 'PNG', MARGIN, 35, 120, 20); } catch (e) {\r\n                                console.error(\"PDF Logo Error:\", e);\r\n                                docInstance.setFont(FONT, 'bold').setFontSize(14).setTextColor(THEME.PRIMARY).text(\"Kansoft\", MARGIN, 45);\r\n                            }\r\n                            docInstance.setFont(FONT, 'normal').setFontSize(10).setTextColor(THEME.TEXT_MUTED);\r\n                            docInstance.text('Hybrid Team ROI & Cost Analysis', W - MARGIN, 45, { align: 'right' });\r\n                            docInstance.setDrawColor(THEME.BORDER).setLineWidth(0.5).line(MARGIN, 60, W - MARGIN, 60);\r\n                        };\r\n                        const drawFooter = (docInstance, pageNum, totalPages) => {\r\n                            docInstance.setFont(FONT, 'normal').setFontSize(9).setTextColor(THEME.TEXT_MUTED);\r\n                            docInstance.text(`\\u00A9 ${new Date().getFullYear()} Kansoft Schweiz GmbH`, MARGIN, H - 30);\r\n                            docInstance.text(`Page ${pageNum} of ${totalPages}`, W - MARGIN, H - 30, { align: 'right' });\r\n                        };\r\n                        const drawKPICard = (docInstance, x, y, width, height, title, value) => {\r\n                            docInstance.setFillColor('#F8F9FA').setDrawColor(THEME.BORDER).roundedRect(x, y, width, height, 5, 5, 'FD');\r\n                            docInstance.setFont(FONT, 'bold').setFontSize(9).setTextColor(THEME.PRIMARY).text(title.toUpperCase(), x + 15, y + 20);\r\n                            docInstance.setFont(FONT, 'bold').setFontSize(22).setTextColor(THEME.TEXT_DARK).text(value, x + 15, y + 50);\r\n                        };\r\n\r\n                        let yPos = H \/ 2 - 80;\r\n                        doc.setFont(FONT, 'bold').setFontSize(36).setTextColor(THEME.PRIMARY).text(\"Hybrid Engineering Team\", W \/ 2, yPos, { align: 'center' });\r\n                        doc.text(\"Cost Analysis Report\", W \/ 2, yPos + 45, { align: 'center' });\r\n                        doc.setDrawColor(THEME.ACCENT).setLineWidth(2).line(W \/ 2 - 100, yPos + 70, W \/ 2 + 100, yPos + 70);\r\n                        doc.setFont(FONT, 'normal').setFontSize(12).setTextColor(THEME.TEXT_MUTED);\r\n                        doc.text(`Analysis for a ${results.teamSize}-Person Team | Generated: ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}`, W \/ 2, yPos + 100, { align: 'center' });\r\n                        doc.addPage();\r\n\r\n                        yPos = 100;\r\n                        doc.setFont(FONT, 'bold').setFontSize(18).setTextColor(THEME.PRIMARY).text(\"1. Executive Summary\", MARGIN, yPos);\r\n                        yPos += 30;\r\n                        doc.setFont(FONT, 'normal').setFontSize(11).setTextColor(THEME.TEXT_DARK).text(`This analysis is for your configured hybrid team of ${results.teamSize} members. It benchmarks your team's cost against a fully Swiss-based team, revealing significant opportunities for cost optimization over a ${hiringDuration}-month project duration.`, MARGIN, yPos, { maxWidth: CONTENT_WIDTH, lineHeightFactor: 1.5 });\r\n                        yPos += doc.getTextDimensions(`This analysis...`, { maxWidth: CONTENT_WIDTH, lineHeightFactor: 1.5, fontSize: 11 }).h + 45;\r\n\r\n                        const cardWidth = (CONTENT_WIDTH - 20) \/ 2, cardHeight = 70;\r\n                        const totalProjectCost = results.hybridCost * hiringDuration;\r\n                        const projectSavings = (results.swissOnlyCost - results.hybridCost) * hiringDuration;\r\n                        drawKPICard(doc, MARGIN, yPos, cardWidth, cardHeight, \"Your Team's Monthly Cost\", formatPdfCurrency(results.hybridCost));\r\n                        drawKPICard(doc, MARGIN + cardWidth + 20, yPos, cardWidth, cardHeight, \"Total Project Cost\", formatPdfCurrency(totalProjectCost));\r\n                        yPos += cardHeight + 20;\r\n                        drawKPICard(doc, MARGIN, yPos, cardWidth, cardHeight, \"Monthly Savings vs. All-Swiss Engineer\", formatPdfCurrency(results.swissOnlyCost - results.hybridCost));\r\n                        drawKPICard(doc, MARGIN + cardWidth + 20, yPos, cardWidth, cardHeight, \"Total Project Savings\", formatPdfCurrency(projectSavings));\r\n                        yPos += cardHeight + 40;\r\n\r\n                        doc.setFont(FONT, 'bold').setFontSize(14).setTextColor(THEME.PRIMARY).text(\"1.1 Monthly Cost Breakdown\", MARGIN, yPos);\r\n                        yPos += 20;\r\n\r\n                        const chartLabelsForPdf = [], chartDataForPdf = [], chartColorsForPdf = [];\r\n                        this.state.team.forEach((profile, index) => {\r\n                            const addComponent = (location, totalCost) => {\r\n                                chartLabelsForPdf.push(`${profile.role.split(' ')[0]} #${index + 1} (${location})`);\r\n                                chartDataForPdf.push(totalCost);\r\n                                chartColorsForPdf.push(this.CHART_COLORS[(chartLabelsForPdf.length - 1) % this.CHART_COLORS.length]);\r\n                            };\r\n                            if (profile.swissQty > 0) addComponent('Swiss', profile.swissQty * profile.swissCost);\r\n                            if (profile.gccQty > 0) addComponent('GCC', profile.gccQty * profile.gccCost);\r\n                        });\r\n\r\n                        const savingsPercentage = results.swissOnlyCost > 0 ? Math.round(((results.swissOnlyCost - results.hybridCost) \/ results.swissOnlyCost) * 100) : 0;\r\n                        const chartImage = await this.createChartImage(chartLabelsForPdf, chartDataForPdf, chartColorsForPdf, `${savingsPercentage}%`);\r\n                        doc.addImage(chartImage, 'PNG', MARGIN, yPos, 180, 180);\r\n\r\n                        const legendX = MARGIN + 180 + 40;\r\n                        const legendItemHeight = 22;\r\n                        let legendY = yPos + (180 - (chartLabelsForPdf.length * legendItemHeight)) \/ 2;\r\n                        if (legendY < yPos) legendY = yPos;\r\n                        doc.setFontSize(10);\r\n                        chartLabelsForPdf.forEach((label, i) => {\r\n                            if (legendY > H - MARGIN) { doc.addPage(); legendY = MARGIN + 40; }\r\n                            doc.setFillColor(chartColorsForPdf[i]).rect(legendX, legendY, 10, 10, 'F');\r\n                            doc.setFont(FONT, 'normal').setTextColor(THEME.TEXT_MUTED).text(label, legendX + 20, legendY + 9);\r\n                            doc.setFont(FONT, 'bold').setTextColor(THEME.TEXT_DARK).text(formatPdfCurrency(chartDataForPdf[i]), W - MARGIN, legendY + 9, { align: 'right' });\r\n                            legendY += legendItemHeight;\r\n                        });\r\n\r\n                        doc.addPage();\r\n                        yPos = 100;\r\n                        doc.setFont(FONT, 'bold').setFontSize(18).setTextColor(THEME.PRIMARY).text(\"2. Detailed Analysis\", MARGIN, yPos);\r\n                        yPos += 25;\r\n\r\n                        doc.setFillColor('#F8F9FA').setDrawColor(THEME.BORDER);\r\n                        const sourceText = \"Salary benchmarks are blended averages updated for 2025.\\n\\n\\u2022 Swiss Data: Derived from the Swiss Federal Statistical Office (FSO), major job portals (jobs.ch), and industry recruitment reports.\\n\\n\\u2022 GCC Data: Based on our proprietary placement data in India and market analysis from leading global advisory firms.\";\r\n                        const textBlockHeight = doc.getTextDimensions(sourceText, { maxWidth: CONTENT_WIDTH - 20, font: doc.getFont(), fontSize: 9, lineHeightFactor: 1.5 }).h;\r\n                        doc.roundedRect(MARGIN, yPos, CONTENT_WIDTH, textBlockHeight + 20, 5, 5, 'FD');\r\n                        doc.setFont(FONT, 'bold').setFontSize(9).setTextColor(THEME.PRIMARY).text(\"Data Sources:\", MARGIN + 10, yPos + 15);\r\n                        doc.setFont(FONT, 'normal').setFontSize(9).setTextColor(THEME.TEXT_MUTED);\r\n                        doc.text(sourceText, MARGIN + 10, yPos + 30, { maxWidth: CONTENT_WIDTH - 20, lineHeightFactor: 1.5 });\r\n                        yPos += textBlockHeight + 50;\r\n\r\n                        const autoTableStyles = { headStyles: { fillColor: THEME.PRIMARY, textColor: THEME.TEXT_LIGHT, fontStyle: 'bold' }, styles: { font: FONT, fontSize: 10 }, alternateRowStyles: { fillColor: '#F8F9FA' } };\r\n                        doc.setFontSize(14).setTextColor(THEME.PRIMARY).text(\"2.1 Your Input Parameters\", MARGIN, yPos);\r\n                        const inputTableBody = [];\r\n                        this.state.team.forEach(p => {\r\n                            if (p.swissQty > 0) inputTableBody.push([`${p.role} (${p.seniority})`, 'Swiss', p.swissQty, formatPdfCurrency(p.swissCost), formatPdfCurrency(p.swissQty * p.swissCost)]);\r\n                            if (p.gccQty > 0) inputTableBody.push([`${p.role} (${p.seniority})`, 'GCC', p.gccQty, formatPdfCurrency(p.gccCost), formatPdfCurrency(p.gccQty * p.gccCost)]);\r\n                        });\r\n                        doc.autoTable({ startY: yPos + 15, head: [['Role Profile', 'Location', 'Qty', 'Cost \/ Hire', 'Subtotal']], body: inputTableBody, theme: 'grid', ...autoTableStyles });\r\n                        yPos = doc.autoTable.previous.finalY + 30;\r\n\r\n                        doc.setFontSize(14).setTextColor(THEME.PRIMARY).text(\"2.2 Comparative Analysis\", MARGIN, yPos);\r\n                        const comparisonBody = [\r\n                            ['Total Team Size', results.teamSize.toString(), results.teamSize.toString()],\r\n                            ['Total Monthly Cost', formatPdfCurrency(results.hybridCost), formatPdfCurrency(results.swissOnlyCost)],\r\n                            [`Total Project Cost (${hiringDuration} mos)`, formatPdfCurrency(totalProjectCost), formatPdfCurrency(results.swissOnlyCost * hiringDuration)],\r\n                            ['Total Project Savings', formatPdfCurrency(projectSavings), '\u2014'],\r\n                        ];\r\n                        doc.autoTable({ startY: yPos + 15, head: [['Metric', 'Your Hybrid Team', 'Equivalent All-Swiss Team']], body: comparisonBody, theme: 'striped', ...autoTableStyles });\r\n                        yPos = doc.autoTable.previous.finalY;\r\n\r\n                        if (yPos > H - 250) { doc.addPage(); yPos = 100; } else { yPos += 40; }\r\n                        doc.setFont(FONT, 'bold').setFontSize(18).setTextColor(THEME.PRIMARY).text(\"3. Strategic Insights & Recommendations\", MARGIN, yPos);\r\n                        yPos += 25;\r\n                        const drawInsightPoint = (title, text) => {\r\n                            const textLines = doc.splitTextToSize(text, CONTENT_WIDTH);\r\n                            if (yPos + 20 + textLines.length * 12 + 25 > H - MARGIN) { doc.addPage(); yPos = 100; }\r\n                            doc.setFillColor(THEME.ACCENT).circle(MARGIN, yPos + 6, 5, 'F');\r\n                            doc.setFont(FONT, 'bold').setFontSize(12).setTextColor(THEME.PRIMARY).text(title, MARGIN + 15, yPos + 10);\r\n                            yPos += 30;\r\n                            doc.setFont(FONT, 'normal').setFontSize(10).setTextColor(THEME.TEXT_DARK).text(textLines, MARGIN, yPos);\r\n                            yPos += textLines.length * 12 + 15;\r\n                        };\r\n                        drawInsightPoint('Cost Efficiency & Capital Reallocation', `The primary advantage is a projected saving of ${formatPdfCurrency(projectSavings)} over ${hiringDuration} months. This represents capital that can be reallocated to accelerate product development, expand marketing, or extend your operational runway.`);\r\n                        drawInsightPoint('Global Talent Arbitrage & Competitive Edge', \"Your hybrid model leverages 'talent arbitrage'\u2014accessing world-class skills from a Global Capability Center (GCC) at a competitive cost. This allows you to build a larger, more powerful team than competitors with the same budget.\");\r\n                        drawInsightPoint('Enhanced Operational Agility', \"Beyond cost savings, the hybrid model unlocks critical strategic benefits:\\n \u2022  Wider Talent Pool: Overcome local skill shortages.\\n \u2022  Increased Velocity: A larger team can accelerate delivery.\\n \u2022  Risk Diversification: A distributed team enhances resilience.\");\r\n                        drawInsightPoint('Final Recommendation', \"The data strongly supports adopting the hybrid team structure to maximize budget efficiency while accessing a global pool of vetted engineering talent. The next step is to define precise role requirements to begin talent acquisition.\");\r\n                        doc.addPage();\r\n\r\n                        let currentY = H \/ 2 - 100;\r\n                        doc.setFont(FONT, 'bold').setFontSize(22).setTextColor(THEME.PRIMARY).text(\"See how Swiss product companies succeed with GCC.\", W \/ 2, currentY, { align: 'center', maxWidth: CONTENT_WIDTH - 40 });\r\n                        currentY += doc.getTextDimensions(\"...\", { maxWidth: CONTENT_WIDTH - 40, fontSize: 22 }).h + 20;\r\n                        doc.setFont(FONT, 'normal').setFontSize(12).setTextColor(THEME.TEXT_DARK).text(\"Want to see how companies like Palisis shifted 40% of their tech team to a Global Capability Center without disruption? Download our playbook for a step-by-step guide.\", W \/ 2, currentY, { align: 'center', maxWidth: CONTENT_WIDTH - 40, lineHeightFactor: 1.5 });\r\n                        currentY += doc.getTextDimensions(\"...\", { maxWidth: CONTENT_WIDTH - 40, fontSize: 12, lineHeightFactor: 1.5 }).h + 30;\r\n                        doc.setFillColor(THEME.ACCENT).roundedRect(W \/ 2 - 125, currentY, 250, 45, 22.5, 22.5, 'F');\r\n                        doc.setFontSize(14).setFont(FONT, 'bold').setTextColor(THEME.TEXT_LIGHT).textWithLink(\"Book a strategy call\", W \/ 2, currentY + 28, { align: 'center', url: 'https:\/\/meetings-na2.hubspot.com\/amol-dhakne\/30-min-discovery-call?uuid=533e40fc-f883-4251-bde5-e678893b6a18' });\r\n\r\n                        const pageCount = doc.internal.getNumberOfPages();\r\n                        for (let i = 1; i <= pageCount; i++) {\r\n                            doc.setPage(i);\r\n                            drawHeader(doc);\r\n                            drawFooter(doc, i, pageCount);\r\n                            doc.setDrawColor(THEME.ACCENT).setLineWidth(12).line(0, 0, 0, H);\r\n                        }\r\n\r\n                        resolve(doc.output('blob'));\r\n                    } catch (error) {\r\n                        console.error(\"Error during PDF generation:\", error);\r\n                        alert(\"An error occurred while generating the PDF. Please check the console for details.\");\r\n                        reject(error);\r\n                    }\r\n                });\r\n            }\r\n\r\n            createChartImage(labels, data, colors, centerText) {\r\n                return new Promise(resolve => {\r\n                    const offscreenCanvas = document.createElement('canvas');\r\n                    offscreenCanvas.width = 500;\r\n                    offscreenCanvas.height = 500;\r\n                    const centerTextPlugin = {\r\n                        id: 'centerText',\r\n                        afterDraw: (chart) => {\r\n                            const { ctx } = chart;\r\n                            const centerConfig = chart.options.plugins.centerText;\r\n                            if (!centerConfig.display) return;\r\n                            ctx.save();\r\n                            const centerX = chart.width \/ 2;\r\n                            const centerY = chart.height \/ 2;\r\n                            ctx.textAlign = 'center';\r\n                            ctx.textBaseline = 'middle';\r\n                            const mainTextY = centerY - (chart.height * 0.08);\r\n                            const subTextY = centerY + (chart.height * 0.1);\r\n                            ctx.font = `800 ${chart.width * 0.22}px 'Montserrat', sans-serif`;\r\n                            ctx.fillStyle = centerConfig.fontColor;\r\n                            ctx.fillText(centerConfig.text, centerX, mainTextY);\r\n                            ctx.font = `500 ${chart.width * 0.09}px 'Montserrat', sans-serif`;\r\n                            ctx.fillStyle = centerConfig.subFontColor;\r\n                            ctx.fillText(centerConfig.subText, centerX, subTextY);\r\n                            ctx.restore();\r\n                        }\r\n                    };\r\n                    new Chart(offscreenCanvas.getContext('2d'), {\r\n                        type: 'doughnut',\r\n                        data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderWidth: 0 }] },\r\n                        options: {\r\n                            responsive: false,\r\n                            animation: { duration: 0 },\r\n                            plugins: {\r\n                                legend: { display: false },\r\n                                centerText: {\r\n                                    display: true,\r\n                                    text: centerText,\r\n                                    subText: 'Savings',\r\n                                    fontColor: '#1F1F1F',\r\n                                    subFontColor: '#595959'\r\n                                }\r\n                            },\r\n                            cutout: '80%'\r\n                        },\r\n                        plugins: [centerTextPlugin]\r\n                    });\r\n                    setTimeout(() => {\r\n                        resolve(offscreenCanvas.toDataURL('image\/png', 1.0));\r\n                    }, 50);\r\n                });\r\n            }\r\n        }\r\n\r\n        new TeamROICalculator();\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7914a1e e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"7914a1e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-de0fd23 e-con-full e-flex e-con e-child\" data-id=\"de0fd23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-523a0de elementor-widget elementor-widget-heading\" data-id=\"523a0de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Thinking of Setting Up Your Own<span style=\"color:#0A004F\"> Engineering Team? \n<\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3edd376 elementor-widget elementor-widget-text-editor\" data-id=\"3edd376\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"w-node-_9cc94f97-0655-9df9-5e57-37fe6078d487-778f3204\" class=\"w-layout-cell cell-9\"><article class=\"text-token-text-primary w-full\" dir=\"auto\" data-testid=\"conversation-turn-2\" data-scroll-anchor=\"true\"><div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] @[37rem]:[--thread-content-margin:--spacing(6)] @[72rem]:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\"><div class=\"[--thread-content-max-width:32rem] @[34rem]:[--thread-content-max-width:40rem] @[64rem]:[--thread-content-max-width:48rem] mx-auto flex max-w-(--thread-content-max-width) flex-1 text-base gap-4 md:gap-5 lg:gap-6 group\/turn-messages focus-visible:outline-hidden\" tabindex=\"-1\"><div class=\"group\/conversation-turn relative flex w-full min-w-0 flex-col agent-turn\"><div class=\"relative flex-col gap-1 md:gap-3\"><div class=\"flex max-w-full flex-col grow\"><div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"8a58c766-330d-41b2-a0b8-55d6df58cf2b\" data-message-model-slug=\"gpt-4o\"><div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\"><div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\"><div id=\"w-node-_9cc94f97-0655-9df9-5e57-37fe6078d487-778f3204\" class=\"w-layout-cell cell-9\"><article class=\"text-token-text-primary w-full\" dir=\"auto\" data-testid=\"conversation-turn-2\" data-scroll-anchor=\"true\"><div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] @[37rem]:[--thread-content-margin:--spacing(6)] @[72rem]:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\"><div class=\"[--thread-content-max-width:32rem] @[34rem]:[--thread-content-max-width:40rem] @[64rem]:[--thread-content-max-width:48rem] mx-auto flex max-w-(--thread-content-max-width) flex-1 text-base gap-4 md:gap-5 lg:gap-6 group\/turn-messages focus-visible:outline-hidden\" tabindex=\"-1\"><div class=\"group\/conversation-turn relative flex w-full min-w-0 flex-col agent-turn\"><div class=\"relative flex-col gap-1 md:gap-3\"><div class=\"flex max-w-full flex-col grow\"><div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"8a58c766-330d-41b2-a0b8-55d6df58cf2b\" data-message-model-slug=\"gpt-4o\"><div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\"><div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\"><p data-start=\"0\" data-end=\"124\" data-is-last-node=\"\" data-is-only-node=\"\"><span data-teams=\"true\">Your practical guide to building a lean, scalable Global Capability Center, Trusted by Swiss product and platform companies.<\/span><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8e2515c e-con-full e-flex e-con e-child\" data-id=\"8e2515c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a967503 elementor-widget__width-initial elementor-align-right elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"a967503\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kansoft.ch\/gcc-setup-playbook\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download the GCC Playbook<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f7a3db e-flex e-con-boxed e-con e-parent\" data-id=\"2f7a3db\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e80b7d2 e-con-full e-flex e-con e-child\" data-id=\"e80b7d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b92879 elementor-widget elementor-widget-text-editor\" data-id=\"2b92879\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a9 2025 Kansoft Schweiz GmbH. All Rights Reserved<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f4582c e-con-full e-flex e-con e-child\" data-id=\"0f4582c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div data-ep-wrapper-link=\"{&quot;url&quot;:&quot;https:\\\/\\\/www.linkedin.com\\\/showcase\\\/kansoft-solutions-europe\\\/&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;}\" style=\"cursor: pointer\" class=\"bdt-element-link elementor-element elementor-element-27b4569 elementor-widget elementor-widget-image\" data-id=\"27b4569\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.linkedin.com\/company\/kansoft-schweiz-gmbh\/\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"96\" height=\"96\" src=\"https:\/\/i0.wp.com\/kansoft.ch\/wp-content\/uploads\/2025\/09\/in-2-1-1.png?fit=96%2C96&amp;ssl=1\" class=\"attachment-large size-large wp-image-25731\" alt=\"Linkedin Logo\" srcset=\"https:\/\/i0.wp.com\/kansoft.ch\/wp-content\/uploads\/2025\/09\/in-2-1-1.png?w=96&amp;ssl=1 96w, https:\/\/i0.wp.com\/kansoft.ch\/wp-content\/uploads\/2025\/09\/in-2-1-1.png?resize=12%2C12&amp;ssl=1 12w\" sizes=\"(max-width: 96px) 100vw, 96px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0acce5a e-flex e-con-boxed e-con e-parent\" data-id=\"0acce5a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-edc8ae0 elementor-widget elementor-widget-html\" data-id=\"edc8ae0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    footer#colophon {\r\n    display: none;\r\n}\r\n.ast-primary-header-bar{\r\n        background-color: #f2f5fe00;\r\n}\r\nbutton.btn.btn-sm.btn-success {\r\n    background: #0A004F;\r\n    border-color: #0A004F;\r\n}\r\n.form-control {\r\n    border-radius: 8px !important;\r\n    padding: 5px !important;\r\n    margin-bottom: 14px;\r\n}\r\n.bdt-ep-static-carousel-readmore-wrap{\r\n    display: none;\r\n}\r\n.edge-benefits-col h2 {\r\n    font-weight: 600;\r\n}\r\n\/*div#landingherosection {*\/\r\n\/*    background-color: transparent;*\/\r\n\/*    background-image: url(https:\/\/kansoft.ch\/wp-content\/uploads\/2025\/07\/output-onlinepngtools-13-1.webp);*\/\r\n\/*    background-size: cover;*\/\r\n\/*    background-position: center;*\/\r\n\/*    background-repeat: no-repeat;*\/\r\n\/*    margin-top: 0px;*\/\r\n\/*}*\/\r\nul#ast-hf-menu-1 {\r\n    display: none;\r\n}\r\nbutton#floatingbutton{\r\n    display: none;\r\n}\r\ndiv#landingflag {\r\n    text-align: end;\r\n}\r\n@media only screen and (max-width: 600px) {\r\n    .ast-primary-header-bar {\r\n        background: white!important;\r\n    }\r\nul#ast-hf-menu-1 {\r\n    display: block;\r\n}\r\nli.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-10974 {\r\n    display: block;\r\n}\r\nli.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2084{\r\n    display: block;\r\n}\r\nli.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-2085{\r\n    display: block;\r\n}\r\nli.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2199{\r\n    display: none;\r\n}\r\nli.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-15505{\r\n    display: block;\r\n}\r\n}\r\n<\/style>\r\n<script>\r\n    const button = document.querySelector('.scheduleCallBtn3');\r\n    if (button) {\r\n        if (window.location.pathname.includes('\/de')) {\r\n            button.textContent = 'Kostenlose Beratung erhalten';\r\n        } else {\r\n            button.textContent = 'Get A Free Consultation';\r\n        }\r\n    }\r\n<\/script>\r\n\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n  const logoLink = document.querySelector(\".site-logo-img a.custom-logo-link\");\r\n  if (logoLink) {\r\n    logoLink.setAttribute(\"href\", \"\/\");\r\n  }\r\n});\r\n\r\n<\/script>\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n  const headerButtonLink = document.querySelector(\r\n    '.ast-header-html .ast-builder-html-element a[href=\"https:\/\/kansoft.ch\/contact-us\/\"]'\r\n  );\r\n  if (headerButtonLink) {\r\n    headerButtonLink.setAttribute(\"href\", \"#\");\r\n  }\r\n});\r\n\r\n<\/script>\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n  const menuLink = document.querySelector('.menu-item-15505 a.menu-link[href=\"#\"]');\r\n  if (menuLink) {\r\n    menuLink.setAttribute(\"href\", \"#landingpageform\");\r\n  }\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ca09d1 e-flex e-con-boxed e-con e-parent\" data-id=\"7ca09d1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a68c238 elementor-widget elementor-widget-html\" data-id=\"a68c238\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Popup Modal -->\r\n<div id=\"consultationPopup\" class=\"popup-overlay\" style=\"display:none;\">\r\n  <div class=\"popup-content\">\r\n    <span class=\"close-popup\">&times;<\/span>\r\n    <iframe \r\n      src=\"https:\/\/meetings-na2.hubspot.com\/amol-dhakne\/30-min-discovery-call\" \r\n      width=\"100%\" \r\n      height=\"100%\" \r\n      style=\"border: none;\"\r\n      allowtransparency=\"true\">\r\n    <\/iframe>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\ndiv#consultationPopup {\r\n\r\n    position: fixed;\r\n    z-index: 999999999;\r\n    padding-top: 5px;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: auto;\r\n    background-color: rgba(0, 0, 0, 0.4);\r\n}\r\n.popup-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0,0,0,0.7);\r\n  z-index: 9999;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.popup-content {\r\nbackground: white;\r\n    padding: 0;\r\n    border-radius: 8px;\r\n    max-width: 90%;\r\n    width: 80%;\r\n    height: 100%;\r\n    position: relative;\r\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.close-popup {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 15px;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n  z-index: 1;\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.querySelector('.scheduleCallBtn3').addEventListener('click', function(e) {\r\n  e.preventDefault();\r\n  document.getElementById('consultationPopup').style.display = 'flex';\r\n});\r\n\r\ndocument.querySelector('.close-popup').addEventListener('click', function() {\r\n  document.getElementById('consultationPopup').style.display = 'none';\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d737d97 e-flex e-con-boxed e-con e-parent\" data-id=\"d737d97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a96fcf elementor-widget elementor-widget-html\" data-id=\"5a96fcf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Simple Popup Modal -->\r\n<div id=\"consultationModal\" class=\"consultation-overlay\">\r\n  <div class=\"consultation-box\">\r\n    <span id=\"closeConsultation\" class=\"consultation-close\">&times;<\/span>\r\n    <iframe \r\n      src=\"https:\/\/meetings-na2.hubspot.com\/amol-dhakne\/30-min-discovery-call\" \r\n      width=\"100%\" \r\n      height=\"100%\" \r\n      style=\"border: none;\"\r\n      allowtransparency=\"true\">\r\n    <\/iframe>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<style>\r\n    \/* Overlay for the consultation modal *\/\r\n.consultation-overlay {\r\n  display: none;\r\n  position: fixed;\r\n  top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n  background: rgba(0, 0, 0, 0.6);\r\n  z-index: 9999999999;\r\n  justify-content: center;\r\n  align-items: center;\r\n  \r\n}\r\n\r\n\/* Modal content box *\/\r\n.consultation-box {\r\n  background: #f5f8fa;\r\n  padding: 0;\r\n  border-radius: 8px;\r\n  max-width: 800px;\r\n  width: 90%;\r\n  height: 90%;\r\n  position: relative;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n  padding-top: 30px;\r\n}\r\n\r\n\/* Close button *\/\r\n.consultation-close {\r\n     position: absolute;\r\n    top: -3%;\r\n    right: 8px;\r\n    font-size: 51px;\r\n    cursor: pointer;\r\n    z-index: 1;\r\n    color: black;\r\n}\r\n\r\n<\/style>\r\n\r\n      \r\n<script>\r\njQuery(document).ready(function ($) {\r\n  const $menuLink = $('.menu-item-15505 > a');\r\n\r\n  if ($menuLink.length) {\r\n    $menuLink.attr('href', '#');\r\n\r\n    $menuLink.on('click', function (e) {\r\n      e.preventDefault();\r\n      $('#consultationModal').css('display', 'flex');\r\n    });\r\n\r\n    $('#closeConsultation').on('click', function () {\r\n      $('#consultationModal').hide();\r\n    });\r\n\r\n    $('#consultationModal').on('click', function (e) {\r\n      if ($(e.target).is('#consultationModal')) {\r\n        $(this).hide();\r\n      }\r\n    });\r\n  } else {\r\n    console.warn('Consultation menu link not found.');\r\n  }\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d47c0a e-flex e-con-boxed e-con e-parent\" data-id=\"5d47c0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f68394 elementor-widget elementor-widget-html\" data-id=\"2f68394\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    .slider-value {\r\n      font-weight: bold;\r\n      color: #0d6efd;\r\n    }\r\n    button.btn.btn-primary {\r\n    background: #0A004F;\r\n    border-color: #0A004F;\r\n}\r\n    .card-result {\r\n      background: #f8f9fa;\r\n      padding: 1rem;\r\n      border-radius: 8px;\r\n      text-align: center;\r\n    }\r\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Build Your Hybrid Engineering Team Faster, Smarter, and Cost-Efficient Use this Hybrid Engineering ROI Calculator to benchmark the optimal team [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":25061,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22950","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PguXna-5Ya","_links":{"self":[{"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/pages\/22950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/comments?post=22950"}],"version-history":[{"count":100,"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/pages\/22950\/revisions"}],"predecessor-version":[{"id":29335,"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/pages\/22950\/revisions\/29335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/media\/25061"}],"wp:attachment":[{"href":"https:\/\/kansoft.ch\/de\/wp-json\/wp\/v2\/media?parent=22950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}