{"id":4439,"date":"2026-04-30T04:34:55","date_gmt":"2026-04-30T04:34:55","guid":{"rendered":"https:\/\/digitalsme.sits.lk\/?page_id=4439"},"modified":"2026-05-22T09:25:32","modified_gmt":"2026-05-22T09:25:32","slug":"assessment","status":"publish","type":"page","link":"https:\/\/digitalsme.sits.lk\/ta\/assessment\/","title":{"rendered":"\u0bae\u0ba4\u0bbf\u0baa\u0bcd\u0baa\u0bc0\u0b9f\u0bc1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4439\" class=\"elementor elementor-4439\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c6da2f e-con-full e-flex sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"8c6da2f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5265b5 sc_fly_static elementor-widget elementor-widget-html\" data-id=\"e5265b5\" 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  \/* \u2500\u2500\u2500 Assessment shell \u2500\u2500\u2500 *\/\r\n  .assessment-shell {\r\n    min-height: 100vh;\r\n    background: var(--dark);\r\n    padding-top: 80px;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .assessment-container {\r\n    max-width: 760px;\r\n    margin: 0 auto;\r\n    padding: 60px 24px 100px;\r\n    width: 100%;\r\n    flex: 1;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Progress bar \u2500\u2500\u2500 *\/\r\n  .progress-wrap {\r\n    margin-bottom: 48px;\r\n  }\r\n\r\n  .progress-meta {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    color: var(--text-dim);\r\n  }\r\n\r\n  .progress-meta .step-label {\r\n    font-weight: 600;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  .progress-track {\r\n    height: 4px;\r\n    background: rgba(0, 0, 0, 0.07);\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .progress-fill {\r\n    height: 100%;\r\n    background: linear-gradient(90deg, var(--orange), var(--orange-light));\r\n    border-radius: 4px;\r\n    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Step screens \u2500\u2500\u2500 *\/\r\n  .step-screen {\r\n    display: none;\r\n    animation: fadeUp 0.4s ease both;\r\n  }\r\n\r\n  .step-screen.active {\r\n    display: block;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Intro screen \u2500\u2500\u2500 *\/\r\n  .intro-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: var(--orange-dim);\r\n    border: 1px solid rgba(232, 87, 26, 0.2);\r\n    color: var(--orange-light);\r\n    padding: 6px 14px;\r\n    border-radius: 20px;\r\n    font-size: 11px;\r\n    font-weight: 500;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .intro-title {\r\n    font-family: var(--font-display);\r\n    font-size: clamp(36px, 5vw, 56px);\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -2px;\r\n    line-height: 1.05;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .intro-title em {\r\n    font-style: italic;\r\n    font-family: var(--font-body);\r\n    font-weight: 300;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  .intro-sub {\r\n    font-size: 16px;\r\n    color: var(--text-muted);\r\n    line-height: 1.7;\r\n    font-weight: 300;\r\n    margin-bottom: 40px;\r\n    max-width: 560px;\r\n  }\r\n\r\n  .intro-meta-cards {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 14px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .intro-meta-card {\r\n    background: var(--dark2);\r\n    border: 1px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 20px;\r\n    text-align: center;\r\n  }\r\n\r\n  .intro-meta-icon {\r\n    font-size: 24px;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .intro-meta-value {\r\n    font-family: var(--font-display);\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -1px;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .intro-meta-label {\r\n    font-size: 11px;\r\n    color: var(--text-dim);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.07em;\r\n    font-weight: 500;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Question screen \u2500\u2500\u2500 *\/\r\n  .question-area-label {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n    color: var(--orange-light);\r\n    margin-bottom: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .question-area-label::before {\r\n    content: '';\r\n    display: block;\r\n    width: 20px;\r\n    height: 1px;\r\n    background: var(--orange);\r\n  }\r\n\r\n  .question-title {\r\n    font-family: var(--font-display);\r\n    font-size: clamp(24px, 3.5vw, 36px);\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -1.2px;\r\n    line-height: 1.1;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .question-desc {\r\n    font-size: 14px;\r\n    color: var(--text-muted);\r\n    font-weight: 300;\r\n    line-height: 1.65;\r\n    margin-bottom: 36px;\r\n    max-width: 560px;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Radio options \u2500\u2500\u2500 *\/\r\n  .options-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .option-item {\r\n    position: relative;\r\n  }\r\n\r\n  .option-label {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    padding: 16px 20px;\r\n    background: transparent;\r\n    border: 1px solid var(--border);\r\n    border-radius: 12px;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n    user-select: none;\r\n  }\r\n\r\n  .option-label:hover {\r\n    background: var(--dark3);\r\n  }\r\n\r\n  .option-item.selected .option-label {\r\n    background: var(--orange-dim);\r\n    border-color: rgba(232, 87, 26, 0.4);\r\n  }\r\n\r\n  .option-score {\r\n    width: 32px;\r\n    height: 32px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: var(--font-display);\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    color: var(--light);\r\n    border-radius: 8px;\r\n    background: rgba(0, 0, 0, 0.05);\r\n    border: 1px solid var(--border);\r\n    flex-shrink: 0;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .option-item.selected .option-label .option-score {\r\n    background: var(--orange);\r\n    border-color: var(--orange);\r\n    color: white;\r\n  }\r\n\r\n  .option-text {\r\n    font-size: 14px;\r\n    color: var(--light3);\r\n    font-weight: 300;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .option-item.selected .option-label .option-text {\r\n    color: var(--light);\r\n    font-weight: 400;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Navigation buttons \u2500\u2500\u2500 *\/\r\n  .step-nav {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    padding-top: 20px;\r\n    border-top: 1px solid var(--border);\r\n  }\r\n\r\n  .btn-back {\r\n    background: transparent;\r\n    border: 1px solid var(--border);\r\n    color: var(--text-muted);\r\n    padding: 12px 24px;\r\n    border-radius: 8px;\r\n    font-family: var(--font-body);\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .btn-back:hover {\r\n    border-color: rgba(0, 0, 0, 0.2);\r\n    color: var(--light);\r\n  }\r\n\r\n  .btn-next {\r\n    background: var(--orange);\r\n    border: none;\r\n    color: white;\r\n    padding: 14px 32px;\r\n    border-radius: 8px;\r\n    font-family: var(--font-body);\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .btn-next:hover {\r\n    background: var(--orange-light);\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  .btn-next:disabled {\r\n    opacity: 0.4;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Gate screen \u2500\u2500\u2500 *\/\r\n  .gate-title {\r\n    font-family: var(--font-display);\r\n    font-size: clamp(28px, 4vw, 44px);\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -1.5px;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .gate-sub {\r\n    font-size: 15px;\r\n    color: var(--text-muted);\r\n    font-weight: 300;\r\n    line-height: 1.65;\r\n    margin-bottom: 36px;\r\n  }\r\n\r\n  .form-group {\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .form-label {\r\n    display: block;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.07em;\r\n    text-transform: uppercase;\r\n    color: var(--text-muted);\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .form-input {\r\n    width: 100%;\r\n    background: var(--dark2);\r\n    border: 1px solid var(--border);\r\n    color: var(--light);\r\n    font-family: var(--font-body);\r\n    font-size: 15px;\r\n    padding: 14px 16px;\r\n    border-radius: 8px;\r\n    outline: none;\r\n    transition: border-color var(--transition);\r\n  }\r\n\r\n  .form-input:focus {\r\n    border-color: var(--orange);\r\n  }\r\n\r\n  .form-input::placeholder {\r\n    color: var(--text-dim);\r\n  }\r\n\r\n  \/* Backend integration note shown as a styled comment *\/\r\n  .backend-note {\r\n    background: rgba(29, 184, 138, 0.07);\r\n    border: 1px solid rgba(29, 184, 138, 0.15);\r\n    border-radius: 8px;\r\n    padding: 14px 16px;\r\n    font-size: 12px;\r\n    color: var(--teal);\r\n    margin-bottom: 24px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .backend-note strong {\r\n    font-weight: 600;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Results screen \u2500\u2500\u2500 *\/\r\n  .results-header {\r\n    text-align: center;\r\n    margin-bottom: 48px;\r\n  }\r\n\r\n  .score-ring-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .score-circle {\r\n    width: 160px;\r\n    height: 160px;\r\n    border-radius: 50%;\r\n    border: 8px solid var(--dark3);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n    margin-bottom: 20px;\r\n    background: var(--dark2);\r\n  }\r\n\r\n  .score-circle-fill {\r\n    position: absolute;\r\n    inset: -8px;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  .score-num {\r\n    font-family: var(--font-display);\r\n    font-size: 42px;\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -2px;\r\n    line-height: 1;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  .score-denom {\r\n    font-size: 14px;\r\n    color: var(--text-muted);\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  .maturity-band {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 10px 20px;\r\n    border-radius: 8px;\r\n    font-family: var(--font-display);\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    letter-spacing: -0.3px;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .results-title {\r\n    font-family: var(--font-display);\r\n    font-size: clamp(28px, 4vw, 40px);\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -1.5px;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .results-sub {\r\n    font-size: 14px;\r\n    color: var(--text-muted);\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Recommended package badge \u2500\u2500\u2500 *\/\r\n  .rec-package {\r\n    background: var(--dark2);\r\n    border: 1px solid var(--border);\r\n    border-radius: 14px;\r\n    padding: 24px 28px;\r\n    margin-bottom: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n    flex-wrap: wrap;\r\n    text-decoration: none;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  .rec-package:hover {\r\n    border-color: var(--orange);\r\n    background: var(--dark3);\r\n  }\r\n\r\n  .rec-package-icon {\r\n    font-size: 32px;\r\n  }\r\n\r\n  .rec-package-label {\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n    color: var(--text-dim);\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .rec-package-name {\r\n    font-family: var(--font-display);\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: var(--light);\r\n    letter-spacing: -0.8px;\r\n  }\r\n\r\n  .rec-package-desc {\r\n    font-size: 13px;\r\n    color: var(--text-muted);\r\n    font-weight: 300;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Score breakdown bars \u2500\u2500\u2500 *\/\r\n  .breakdown-title {\r\n    font-family: var(--font-display);\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: var(--light);\r\n    letter-spacing: -0.5px;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .breakdown-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .breakdown-row {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n  }\r\n\r\n  .breakdown-label {\r\n    font-size: 12px;\r\n    color: var(--text-muted);\r\n    width: 180px;\r\n    flex-shrink: 0;\r\n    font-weight: 400;\r\n  }\r\n\r\n  .breakdown-track {\r\n    flex: 1;\r\n    height: 8px;\r\n    background: rgba(0, 0, 0, 0.06);\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .breakdown-fill {\r\n    height: 100%;\r\n    border-radius: 4px;\r\n    background: linear-gradient(90deg, var(--orange), var(--orange-light));\r\n    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;\r\n  }\r\n\r\n  .breakdown-score {\r\n    font-family: var(--font-display);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--light);\r\n    width: 30px;\r\n    flex-shrink: 0;\r\n    text-align: right;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 Results CTA \u2500\u2500\u2500 *\/\r\n  .results-cta {\r\n    display: flex;\r\n    gap: 14px;\r\n    flex-wrap: wrap;\r\n    margin-top: 40px;\r\n    padding-top: 32px;\r\n    border-top: 1px solid var(--border);\r\n  }\r\n\r\n  @media (max-width: 700px) {\r\n    .assessment-container {\r\n      padding: 40px 20px 80px;\r\n    }\r\n\r\n    .intro-meta-cards {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .step-nav {\r\n      flex-direction: column-reverse;\r\n    }\r\n\r\n    .btn-next,\r\n    .btn-back {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n\r\n    .breakdown-label {\r\n      width: 120px;\r\n      font-size: 11px;\r\n    }\r\n\r\n    .rec-package {\r\n      flex-direction: column;\r\n      gap: 12px;\r\n    }\r\n  }\r\n\r\n  \/* Override for Elementor *\/\r\n  .reveal {\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n<\/style>\r\n<!-- \u2500\u2500\u2500 Assessment Shell \u2500\u2500\u2500 -->\r\n<div class=\"assessment-shell\">\r\n  <div class=\"assessment-container\">\r\n\r\n    <!-- Progress bar (hidden on intro + results) -->\r\n    <div class=\"progress-wrap\" id=\"progressWrap\" style=\"display:none;\">\r\n      <div class=\"progress-meta\">\r\n        <span class=\"step-label\" id=\"stepLabel\">Step 1 of 10<\/span>\r\n        <span id=\"progressPct\">0%<\/span>\r\n      <\/div>\r\n      <div class=\"progress-track\">\r\n        <div class=\"progress-fill\" id=\"progressFill\" style=\"width:0%\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500\u2500 SCREEN 0: Intro \u2500\u2500\u2500 -->\r\n    <div class=\"step-screen active\" id=\"screen-0\">\r\n      <div class=\"intro-badge\">\r\n        <span style=\"color:var(--orange);\">02 \/<\/span> Digital Maturity Assessment\r\n      <\/div>\r\n      <h1 class=\"intro-title\">How digital is<br><em>your business?<\/em><\/h1>\r\n      <p class=\"intro-sub\">A 10-minute assessment across 10 data-gathering questions. Get your score, your maturity band, and a\r\n        personalised action plan \u2014 free.<\/p>\r\n      <div class=\"intro-meta-cards\">\r\n        <div class=\"intro-meta-card\">\r\n          <div class=\"intro-meta-icon\">\u23f1<\/div>\r\n          <div class=\"intro-meta-value\">10<\/div>\r\n          <div class=\"intro-meta-label\">Minutes<\/div>\r\n        <\/div>\r\n        <div class=\"intro-meta-card\">\r\n          <div class=\"intro-meta-icon\">\ud83d\udcca<\/div>\r\n          <div class=\"intro-meta-value\">10<\/div>\r\n          <div class=\"intro-meta-label\">Questions<\/div>\r\n        <\/div>\r\n        <div class=\"intro-meta-card\">\r\n          <div class=\"intro-meta-icon\">\ud83c\udfaf<\/div>\r\n          <div class=\"intro-meta-value\">Instant<\/div>\r\n          <div class=\"intro-meta-label\">Results<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <button class=\"btn-primary\" onclick=\"startAssessment()\" style=\"font-size:15px;padding:16px 36px;\">\r\n        Start Assessment\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M3 8h10M9 4l4 4-4 4\" \/>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500\u2500 SCREENS 1\u201311: Questions (generated by JS) \u2500\u2500\u2500 -->\r\n\r\n    <!-- \u2500\u2500\u2500 SCREEN 12: Gate (email capture) \u2500\u2500\u2500 -->\r\n    <div class=\"step-screen\" id=\"screen-12\">\r\n      <div class=\"question-area-label\">Almost there<\/div>\r\n      <h2 class=\"gate-title\">Your results are ready.<\/h2>\r\n      <p class=\"gate-sub\">Enter your details to receive your full report \u2014 including your maturity band, recommended\r\n        package, and personalised action plan.<br><br>This phase acts as a gateway to personalize the experience for\r\n        current clients.<\/p>\r\n      <form id=\"gateForm\" onsubmit=\"handleGateSubmit(event)\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateCustomer\">Are you an existing Sampath Bank customer?<\/label>\r\n          <select class=\"form-input\" id=\"gateCustomer\" onchange=\"toggleCustomerFields()\" required\r\n            style=\"appearance:none;background-image:url('data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237A8290' stroke-width='1.5' fill='none' stroke-linecap='round'\/><\/svg>');background-repeat:no-repeat;background-position:right 16px center;\">\r\n            <option value=\"\">Select...<\/option>\r\n            <option value=\"Yes\">Yes<\/option>\r\n            <option value=\"No\">No<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div id=\"customerYesFields\" style=\"display: none;\">\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\" for=\"gateAccount\">Business Account Number<\/label>\r\n            <input class=\"form-input\" type=\"text\" id=\"gateAccount\" placeholder=\"e.g. 123456789\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\" for=\"gateBranch\">Primary Branch Name<\/label>\r\n            <input class=\"form-input\" type=\"text\" id=\"gateBranch\" placeholder=\"e.g. Colombo City\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateCompanyName\">Company Name<\/label>\r\n          <input class=\"form-input\" type=\"text\" id=\"gateCompanyName\" placeholder=\"e.g. Perera Textiles\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\" style=\"display: flex; gap: 16px;\">\r\n          <div style=\"flex: 1;\">\r\n            <label class=\"form-label\" for=\"gateFirstName\">First Name<\/label>\r\n            <input class=\"form-input\" type=\"text\" id=\"gateFirstName\" placeholder=\"e.g. Saman\" required>\r\n          <\/div>\r\n          <div style=\"flex: 1;\">\r\n            <label class=\"form-label\" for=\"gateLastName\">Last Name<\/label>\r\n            <input class=\"form-input\" type=\"text\" id=\"gateLastName\" placeholder=\"e.g. Perera\" required>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateEmail\">Email Address<\/label>\r\n          <input class=\"form-input\" type=\"email\" id=\"gateEmail\" placeholder=\"e.g. saman@pereratextiles.lk\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateContact\">Contact Number<\/label>\r\n          <input class=\"form-input\" type=\"tel\" id=\"gateContact\" placeholder=\"e.g. 0771234567\" required>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateSector\">Business Sector<\/label>\r\n          <select class=\"form-input\" id=\"gateSector\" required\r\n            style=\"appearance:none;background-image:url('data:image\/svg+xml;utf8,<svg xmlns=\\'http:\/\/www.w3.org\/2000\/svg\\' width=\\'10\\' height=\\'6\\' viewBox=\\'0 0 10 6\\'><path d=\\'M1 1l4 4 4-4\\' stroke=\\'%237A8290\\' stroke-width=\\'1.5\\' fill=\\'none\\' stroke-linecap=\\'round\\'\/><\/svg>');background-repeat:no-repeat;background-position:right 16px center;\">\r\n            <option value=\"\">Select one...<\/option>\r\n            <option value=\"Agriculture & Forestry\">Agriculture & Forestry<\/option>\r\n            <option value=\"Apparel & Textiles\">Apparel & Textiles<\/option>\r\n            <option value=\"Automotive & Transportation\">Automotive & Transportation<\/option>\r\n            <option value=\"Banking & Finance\">Banking & Finance<\/option>\r\n            <option value=\"Construction & Real Estate\">Construction & Real Estate<\/option>\r\n            <option value=\"Education & E-Learning\">Education & E-Learning<\/option>\r\n            <option value=\"Energy & Utilities\">Energy & Utilities<\/option>\r\n            <option value=\"Entertainment & Media\">Entertainment & Media<\/option>\r\n            <option value=\"FMCG (Fast Moving Consumer Goods)\">FMCG<\/option>\r\n            <option value=\"Food & Beverage\">Food & Beverage<\/option>\r\n            <option value=\"Healthcare & Pharmaceuticals\">Healthcare & Pharmaceuticals<\/option>\r\n            <option value=\"Hospitality & Tourism\">Hospitality & Tourism<\/option>\r\n            <option value=\"Information Technology (IT) & Software\">Information Technology (IT) & Software<\/option>\r\n            <option value=\"Insurance\">Insurance<\/option>\r\n            <option value=\"Logistics, Transport & Warehousing\">Logistics, Transport & Warehousing<\/option>\r\n            <option value=\"Manufacturing\">Manufacturing<\/option>\r\n            <option value=\"Professional Services (Legal, Consulting)\">Professional Services<\/option>\r\n            <option value=\"Retail & E-commerce\">Retail & E-commerce<\/option>\r\n            <option value=\"Telecommunications\">Telecommunications<\/option>\r\n            <option value=\"Wholesale Trade\">Wholesale Trade<\/option>\r\n            <option value=\"Other\">Other<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\" for=\"gateWomenLed\">Is the business majority-owned or led by a woman?<\/label>\r\n          <select class=\"form-input\" id=\"gateWomenLed\" required\r\n            style=\"appearance:none;background-image:url('data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237A8290' stroke-width='1.5' fill='none' stroke-linecap='round'\/><\/svg>');background-repeat:no-repeat;background-position:right 16px center;\">\r\n            <option value=\"\">Select...<\/option>\r\n            <option value=\"Yes\">Yes<\/option>\r\n            <option value=\"No\">No<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\" style=\"display:flex; align-items:flex-start; gap:12px; margin-top: 24px;\">\r\n          <input type=\"checkbox\" id=\"gateConsent\" required style=\"margin-top: 4px; width: 18px; height: 18px; accent-color: var(--orange);\">\r\n          <label for=\"gateConsent\" style=\"font-size:13px; color:var(--text-muted); line-height: 1.5; font-weight:300;\">\r\n            I consent to Sampath Bank collecting and processing my data to provide me with a personalised report and relevant communications.\r\n          <\/label>\r\n        <\/div>\r\n\r\n        <div style=\"display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;\">\r\n          <button type=\"submit\" class=\"btn-primary\" style=\"font-size:15px;padding:16px 36px;\">\r\n            View My Results \u2192\r\n          <\/button>\r\n          <span style=\"font-size:12px;color:var(--text-dim);\">No spam. Your data is only used to send your\r\n            report.<\/span>\r\n        <\/div>\r\n      <\/form>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500\u2500 SCREEN 13: Results \u2500\u2500\u2500 -->\r\n    <div class=\"step-screen\" id=\"screen-13\">\r\n      <div class=\"results-header\">\r\n        <div class=\"score-ring-wrap\">\r\n          <div class=\"score-circle\">\r\n            <div class=\"score-num\" id=\"scoreNum\">0<\/div>\r\n            <div class=\"score-denom\">out of 100<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"maturity-band\" id=\"maturityBand\">\u2014<\/div>\r\n        <h2 class=\"results-title\" id=\"resultsTitle\">Your Digital Maturity<\/h2>\r\n        <p class=\"results-sub\" id=\"resultsSub\"><\/p>\r\n      <\/div>\r\n\r\n      <div class=\"breakdown-title\">Your Responses Summary<\/div>\r\n      <div class=\"breakdown-list\" id=\"breakdownList\"><\/div>\r\n\r\n      <a href=\"https:\/\/digitalsme.sits.lk\/#packages\" class=\"rec-package\" id=\"recPackage\">\r\n        <div class=\"rec-package-icon\">\ud83d\udce6<\/div>\r\n        <div>\r\n          <div class=\"rec-package-label\">Recommended Package<\/div>\r\n          <div class=\"rec-package-name\" id=\"recPackageName\">\u2014<\/div>\r\n          <div class=\"rec-package-desc\" id=\"recPackageDesc\">\u2014<\/div>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <div class=\"results-cta\">\r\n        <a href=\"https:\/\/digitalsme.sits.lk\/contact\/\" class=\"btn-primary\">\r\n          Book a consultation \u2192\r\n        <\/a>\r\n        <a href=\"https:\/\/digitalsme.sits.lk\/#packages\" class=\"btn-ghost\">View packages<\/a>\r\n        <button onclick=\"retakeAssessment()\" class=\"btn-ghost\" style=\"margin-left:auto;\">Retake assessment<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/assessment-container -->\r\n<\/div><!-- \/assessment-shell -->\r\n\r\n<script src=\"js\/shared.js\"><\/script>\r\n<script>\r\n  \/\/ \u2500\u2500\u2500 Assessment data \u2500\u2500\u2500\r\n  var QUESTIONS = [\r\n    {\r\n      title: \"Do you currently have a website?\",\r\n      desc: \"Select the option that best describes your current online presence.\",\r\n      type: \"radio\",\r\n      options: [\r\n        { label: \"No\", score: 0 },\r\n        { label: \"Yes \u2013 Basic (informational only)\", score: 8 },\r\n        { label: \"Yes \u2013 Advanced (e-commerce \/ integrated systems)\", score: 15 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Which social platforms do you actively use?\",\r\n      desc: \"Select all that apply.\",\r\n      type: \"checkbox\",\r\n      options: [\r\n        { label: \"Facebook\", score: 2 },\r\n        { label: \"Instagram\", score: 2 },\r\n        { label: \"LinkedIn\", score: 2 },\r\n        { label: \"TikTok\", score: 2 },\r\n        { label: \"WhatsApp Business\", score: 2 },\r\n        { label: \"Other\", score: 2, isOther: true },\r\n        { label: \"None\", score: 0, exclusive: true }\r\n      ]\r\n    },\r\n    {\r\n      title: \"How do you manage your business operations?\",\r\n      desc: \"Select your primary method of managing day-to-day operations.\",\r\n      type: \"radio\",\r\n      options: [\r\n        { label: \"Fully manual (paper-based)\", score: 0 },\r\n        { label: \"Basic digital tools (Excel, email)\", score: 8 },\r\n        { label: \"Partially automated systems\", score: 14 },\r\n        { label: \"Fully integrated systems (ERP\/CRM)\", score: 20 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Do you use any of the following systems?\",\r\n      desc: \"Select all that apply.\",\r\n      type: \"checkbox\",\r\n      options: [\r\n        { label: \"Accounting software\", score: 4 },\r\n        { label: \"CRM (Customer Management)\", score: 4 },\r\n        { label: \"Inventory system\", score: 4 },\r\n        { label: \"HR\/Payroll system\", score: 3 },\r\n        { label: \"None\", score: 0, exclusive: true }\r\n      ]\r\n    },\r\n    {\r\n      title: \"How do you currently handle customer communication?\",\r\n      desc: \"Select your primary communication channel.\",\r\n      type: \"radio\",\r\n      options: [\r\n        { label: \"Phone calls\", score: 2 },\r\n        { label: \"WhatsApp \/ Messaging\", score: 5 },\r\n        { label: \"Email\", score: 6 },\r\n        { label: \"CRM \/ Automated systems\", score: 10 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"What are your biggest current challenges?\",\r\n      desc: \"Select up to 3 challenges.\",\r\n      type: \"checkbox\",\r\n      maxSelect: 3,\r\n      maxScore: 5,\r\n      options: [\r\n        { label: \"Low online visibility\", score: 1 },\r\n        { label: \"Lack of leads\/sales\", score: 1 },\r\n        { label: \"Inefficient manual processes\", score: 1 },\r\n        { label: \"Poor customer management\", score: 1 },\r\n        { label: \"Data\/security concerns\", score: 1 },\r\n        { label: \"Lack of digital knowledge\", score: 1 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Which areas do you need the most support in?\",\r\n      desc: \"Select all that apply.\",\r\n      type: \"checkbox\",\r\n      maxScore: 5,\r\n      options: [\r\n        { label: \"Website development\", score: 1 },\r\n        { label: \"Social media management\", score: 1 },\r\n        { label: \"Digital marketing \/ Ads\", score: 1 },\r\n        { label: \"Software\/ERP solutions\", score: 1 },\r\n        { label: \"Cybersecurity\", score: 1 },\r\n        { label: \"Cloud solutions\", score: 1 },\r\n        { label: \"IT support & maintenance\", score: 1 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Are you planning to invest in digital solutions within the next 6 months?\",\r\n      desc: \"Select your investment timeframe.\",\r\n      type: \"radio\",\r\n      options: [\r\n        { label: \"Yes \u2013 Immediately\", score: 10 },\r\n        { label: \"Yes \u2013 Within 3\u20136 months\", score: 8 },\r\n        { label: \"Exploring options\", score: 5 },\r\n        { label: \"Not at the moment\", score: 0 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"Estimated budget for digital transformation\",\r\n      desc: \"Select your planned budget range.\",\r\n      type: \"radio\",\r\n      options: [\r\n        { label: \"Below LKR 100,000\", score: 1 },\r\n        { label: \"LKR 100,000 \u2013 500,000\", score: 3 },\r\n        { label: \"LKR 500,000 \u2013 1,000,000\", score: 4 },\r\n        { label: \"LKR 1,000,000+\", score: 5 }\r\n      ]\r\n    },\r\n    {\r\n      title: \"What services would you like us to contact you about?\",\r\n      desc: \"Select all that apply.\",\r\n      type: \"checkbox\",\r\n      maxScore: 5,\r\n      options: [\r\n        { label: \"Free consultation\", score: 1 },\r\n        { label: \"Website \/ App development\", score: 1 },\r\n        { label: \"Digital marketing services\", score: 1 },\r\n        { label: \"Business automation solutions\", score: 1 },\r\n        { label: \"Cybersecurity solutions\", score: 1 }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  var answers = new Array(10).fill(null); \/\/ stores array of selected option indices for each question\r\n  var currentScreen = 0;\r\n  var TOTAL_QUESTIONS = QUESTIONS.length;\r\n\r\n  function startAssessment() {\r\n    buildQuestions();\r\n    goToScreen(1);\r\n  }\r\n\r\n  function buildQuestions() {\r\n    var container = document.querySelector('.assessment-container');\r\n    \/\/ Remove existing question screens if any (for retake)\r\n    document.querySelectorAll('.step-screen.question-screen').forEach(el => el.remove());\r\n\r\n    QUESTIONS.forEach(function (q, i) {\r\n      var screenNum = i + 1;\r\n      var div = document.createElement('div');\r\n      div.className = 'step-screen question-screen';\r\n      div.id = 'screen-' + screenNum;\r\n\r\n      var optionsHtml = q.options.map(function (opt, optIndex) {\r\n        var extraHtml = '';\r\n        if (opt.isOther) {\r\n           extraHtml = '<input type=\"text\" class=\"other-input form-input\" data-q=\"' + i + '\" placeholder=\"Please specify...\" style=\"display:none; margin-top:8px; width:100%;\" onclick=\"event.stopPropagation()\">';\r\n        }\r\n        return '<div class=\"option-item\" data-q=\"' + i + '\" data-opt=\"' + optIndex + '\" onclick=\"toggleOption(' + i + ', ' + optIndex + ', this)\">' +\r\n          '<div class=\"option-label\" style=\"align-items: center; justify-content: flex-start; gap: 12px; height: auto; padding: 16px 20px;\">' +\r\n          '<div class=\"checkbox-indicator\"><\/div>' +\r\n          '<div class=\"option-text\" style=\"font-size: 15px; font-weight: 500; text-align: left;\">' + opt.label + '<\/div>' +\r\n          '<\/div>' + extraHtml +\r\n          '<\/div>';\r\n      }).join('');\r\n\r\n      div.innerHTML =\r\n        '<div class=\"question-area-label\">Question ' + screenNum + ' of ' + TOTAL_QUESTIONS + '<\/div>' +\r\n        '<h2 class=\"question-title\">' + q.title + '<\/h2>' +\r\n        '<p class=\"question-desc\">' + q.desc + '<\/p>' +\r\n        '<div class=\"options-list\" style=\"display:flex; flex-direction:column; gap:12px; grid-template-columns:1fr;\">' + optionsHtml + '<\/div>' +\r\n        '<div class=\"step-nav\">' +\r\n        '<button class=\"btn-back\" onclick=\"goBack()\">' + (screenNum === 1 ? '\u2190 Back to intro' : '\u2190 Back') + '<\/button>' +\r\n        '<button class=\"btn-next\" id=\"next-' + screenNum + '\" onclick=\"goNext(' + screenNum + ')\" disabled>' +\r\n        (screenNum === TOTAL_QUESTIONS ? 'Continue to Details \u2192' : 'Next \u2192') +\r\n        '<\/button>' +\r\n        '<\/div>';\r\n\r\n      var gate = document.getElementById('screen-12'); \/\/ The form screen is now logically screen 11, but its id is still screen-12 in HTML. Let's insert before it.\r\n      container.insertBefore(div, gate);\r\n    });\r\n    \r\n    \/\/ Add some styles for the new checkboxes dynamically\r\n    var style = document.createElement('style');\r\n    style.innerHTML = `\r\n      .option-item .checkbox-indicator {\r\n        width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 4px; flex-shrink: 0; transition: all 0.2s; position: relative;\r\n      }\r\n      .option-item.selected .checkbox-indicator {\r\n        background: var(--orange); border-color: var(--orange);\r\n      }\r\n      .option-item.selected .checkbox-indicator::after {\r\n        content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);\r\n      }\r\n      .question-screen .option-item { min-height: auto; padding: 0; }\r\n      .option-item.selected .other-input { display: block !important; }\r\n    `;\r\n    document.head.appendChild(style);\r\n  }\r\n\r\n  function toggleOption(qIndex, optIndex, element) {\r\n    var q = QUESTIONS[qIndex];\r\n    if (!answers[qIndex]) answers[qIndex] = [];\r\n    var currentAnswers = answers[qIndex];\r\n    var opt = q.options[optIndex];\r\n\r\n    if (q.type === 'radio') {\r\n      answers[qIndex] = [optIndex];\r\n      var parent = element.parentElement;\r\n      parent.querySelectorAll('.option-item').forEach(function (el) {\r\n        el.classList.remove('selected');\r\n      });\r\n      element.classList.add('selected');\r\n    } else {\r\n      \/\/ Checkbox\r\n      if (opt.exclusive) {\r\n        if (currentAnswers.includes(optIndex)) {\r\n          answers[qIndex] = [];\r\n          element.classList.remove('selected');\r\n        } else {\r\n          answers[qIndex] = [optIndex];\r\n          element.parentElement.querySelectorAll('.option-item').forEach(function (el) { el.classList.remove('selected'); });\r\n          element.classList.add('selected');\r\n        }\r\n      } else {\r\n        \/\/ Deselect exclusive options\r\n        q.options.forEach((o, i) => {\r\n          if (o.exclusive && currentAnswers.includes(i)) {\r\n            answers[qIndex] = currentAnswers.filter(x => x !== i);\r\n            element.parentElement.querySelector('[data-opt=\"'+i+'\"]').classList.remove('selected');\r\n          }\r\n        });\r\n\r\n        if (currentAnswers.includes(optIndex)) {\r\n          answers[qIndex] = currentAnswers.filter(x => x !== optIndex);\r\n          element.classList.remove('selected');\r\n        } else {\r\n          if (q.maxSelect && answers[qIndex].length >= q.maxSelect) {\r\n            \/\/ Unselect the oldest or just block. Let's just block for now.\r\n            alert(\"You can select up to \" + q.maxSelect + \" options.\");\r\n            return;\r\n          }\r\n          answers[qIndex].push(optIndex);\r\n          element.classList.add('selected');\r\n        }\r\n      }\r\n    }\r\n\r\n    var screenNum = qIndex + 1;\r\n    document.getElementById('next-' + screenNum).disabled = answers[qIndex].length === 0;\r\n  }\r\n\r\n  function goToScreen(num) {\r\n    document.querySelectorAll('.step-screen').forEach(function (s) {\r\n      s.classList.remove('active');\r\n    });\r\n    \/\/ Maps num to actual IDs. 1 to 10 are questions. 11 is gate (screen-12). 12 is results (screen-13).\r\n    var targetId = num === 0 ? 'screen-0' : (num <= TOTAL_QUESTIONS ? 'screen-' + num : (num === TOTAL_QUESTIONS + 1 ? 'screen-12' : 'screen-13'));\r\n    var target = document.getElementById(targetId);\r\n    if (target) target.classList.add('active');\r\n    currentScreen = num;\r\n    updateProgress(num);\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n  }\r\n\r\n  function updateProgress(num) {\r\n    var progressWrap = document.getElementById('progressWrap');\r\n    var fill = document.getElementById('progressFill');\r\n    var label = document.getElementById('stepLabel');\r\n    var pct = document.getElementById('progressPct');\r\n\r\n    if (num === 0 || num > TOTAL_QUESTIONS) {\r\n      progressWrap.style.display = 'none';\r\n      return;\r\n    }\r\n    progressWrap.style.display = 'block';\r\n    var progress = Math.round((num \/ TOTAL_QUESTIONS) * 100);\r\n    fill.style.width = progress + '%';\r\n    label.textContent = 'Step ' + num + ' of ' + TOTAL_QUESTIONS;\r\n    pct.textContent = progress + '%';\r\n  }\r\n\r\n  function goNext(screenNum) {\r\n    goToScreen(screenNum + 1);\r\n  }\r\n\r\n  function goBack() {\r\n    if (currentScreen <= 1) {\r\n      goToScreen(0);\r\n    } else {\r\n      goToScreen(currentScreen - 1);\r\n    }\r\n  }\r\n\r\n  function handleGateSubmit(e) {\r\n    e.preventDefault();\r\n\r\n    var btn = e.target.querySelector('button[type=\"submit\"]');\r\n    var originalText = btn.innerHTML;\r\n    btn.innerHTML = 'Processing...';\r\n    btn.disabled = true;\r\n\r\n    var formData = new FormData();\r\n    formData.append('action', 'submit_dsme_assessment');\r\n    var firstName = document.getElementById('gateFirstName').value;\r\n    var lastName = document.getElementById('gateLastName').value;\r\n    formData.append('name', firstName + ' ' + lastName);\r\n    formData.append('email', document.getElementById('gateEmail').value);\r\n    formData.append('is_customer', document.getElementById('gateCustomer').value);\r\n    \r\n    var accountEl = document.getElementById('gateAccount');\r\n    if(accountEl) formData.append('account', accountEl.value);\r\n    var branchEl = document.getElementById('gateBranch');\r\n    if(branchEl) formData.append('branch', branchEl.value);\r\n    var companyEl = document.getElementById('gateCompanyName');\r\n    if(companyEl) formData.append('company_name', companyEl.value);\r\n    var contactEl = document.getElementById('gateContact');\r\n    if(contactEl) formData.append('contact', contactEl.value);\r\n    \r\n    formData.append('sector', document.getElementById('gateSector').value);\r\n    formData.append('women_led', document.getElementById('gateWomenLed').value);\r\n    \r\n    \/\/ Calculate total score\r\n    var totalScore = calculateTotalScore();\r\n    formData.append('total_score', totalScore);\r\n\r\n    QUESTIONS.forEach(function(q, i) {\r\n      var ans = answers[i] || [];\r\n      var qScore = 0;\r\n      var selectedLabels = ans.map(optIndex => {\r\n        if (q.options[optIndex].isOther) {\r\n           var otherInput = document.querySelector('.other-input[data-q=\"' + i + '\"]');\r\n           return \"Other: \" + (otherInput && otherInput.value ? otherInput.value : \"\");\r\n        }\r\n        return q.options[optIndex].label;\r\n      }).join(', ');\r\n      \r\n      ans.forEach(optIndex => { qScore += q.options[optIndex].score; });\r\n      if (q.maxScore && qScore > q.maxScore) qScore = q.maxScore;\r\n      formData.append('scores[]', qScore);\r\n      formData.append('q_titles[]', q.title);\r\n      formData.append('q_answers[]', selectedLabels);\r\n      \r\n      var qMax = q.maxScore || Math.max(...q.options.map(o => o.score));\r\n      if (qMax === 0) qMax = 1;\r\n      formData.append('q_max[]', qMax);\r\n    });\r\n\r\n    fetch('https:\/\/digitalsme.sits.lk\/wp-admin\/admin-ajax.php', {\r\n      method: 'POST',\r\n      body: formData\r\n    })\r\n    .then(function(response) { return response.json(); })\r\n    .then(function(data) {\r\n      showResults();\r\n    })\r\n    .catch(function(error) {\r\n      console.error('Error submitting assessment:', error);\r\n      showResults();\r\n    })\r\n    .finally(function() {\r\n      btn.innerHTML = originalText;\r\n      btn.disabled = false;\r\n    });\r\n  }\r\n\r\n  function toggleCustomerFields() {\r\n    var val = document.getElementById('gateCustomer').value;\r\n    var yesFields = document.getElementById('customerYesFields');\r\n\r\n    if (val === 'Yes') {\r\n      yesFields.style.display = 'block';\r\n    } else {\r\n      yesFields.style.display = 'none';\r\n    }\r\n  }\r\n\r\n  function calculateTotalScore() {\r\n    var total = 0;\r\n    QUESTIONS.forEach((q, qIndex) => {\r\n      var ans = answers[qIndex] || [];\r\n      var qScore = 0;\r\n      ans.forEach(optIndex => {\r\n        qScore += q.options[optIndex].score;\r\n      });\r\n      if (q.maxScore && qScore > q.maxScore) qScore = q.maxScore;\r\n      total += qScore;\r\n    });\r\n    return total;\r\n  }\r\n\r\n  function showResults() {\r\n    var total = calculateTotalScore();\r\n    var pct = Math.round((total \/ 100) * 100);\r\n\r\n    document.getElementById('scoreNum').textContent = total;\r\n    document.querySelector('.score-denom').textContent = 'out of 100';\r\n\r\n    var band, bandBg, bandColor, resultTitle, resultSub, pkgName, pkgDesc;\r\n    if (total <= 30) {\r\n      band = 'Low Digital Maturity';\r\n      bandBg = 'rgba(255,87,87,0.12)'; bandColor = '#FF6B6B';\r\n      resultTitle = \"You're at the starting line.\";\r\n      resultSub = 'Your business relies heavily on manual processes. Establishing an online presence and basic digital setup should be your immediate goal.';\r\n      pkgName = 'E3 Starter \u2014 Foundation';\r\n      pkgDesc = 'Website + basic digital setup.';\r\n    } else if (total <= 60) {\r\n      band = 'Emerging Digital';\r\n      bandBg = 'rgba(232,87,26,0.12)'; bandColor = 'var(--orange-light)';\r\n      resultTitle = \"You're beginning to explore digital.\";\r\n      resultSub = \"You have some presence but systems may be inefficient. It's time to streamline operations and enhance your marketing efforts.\";\r\n      pkgName = 'E3 Growth \u2014 Scale';\r\n      pkgDesc = 'Marketing + process automation.';\r\n    } else if (total <= 80) {\r\n      band = 'Growing Digital';\r\n      bandBg = 'rgba(29,184,138,0.12)'; bandColor = 'var(--teal)';\r\n      resultTitle = \"You're building solid digital systems.\";\r\n      resultSub = 'You are already investing in digital tools. Your next steps should focus on CRM, deep integrations, and scaling your marketing.';\r\n      pkgName = 'E3 Enterprise Lite \u2014 Command';\r\n      pkgDesc = 'CRM, integrations, scaling ads.';\r\n    } else {\r\n      band = 'Advanced \/ High-Value';\r\n      bandBg = 'rgba(130,80,255,0.12)'; bandColor = '#A070FF';\r\n      resultTitle = \"You're a digital leader.\";\r\n      resultSub = 'You have strong systems and budget in place. We can help you leverage enterprise solutions and long-term automation strategies.';\r\n      pkgName = 'E3 Enterprise Custom';\r\n      pkgDesc = 'Enterprise solutions, long-term contracts.';\r\n    }\r\n\r\n    var bandEl = document.getElementById('maturityBand');\r\n    bandEl.textContent = band;\r\n    bandEl.style.background = bandBg;\r\n    bandEl.style.color = bandColor;\r\n    bandEl.style.border = '1px solid ' + bandColor.replace(')', ', 0.2)').replace('var(--', 'rgba(');\r\n\r\n    document.getElementById('resultsTitle').textContent = resultTitle;\r\n    document.getElementById('resultsSub').textContent = resultSub;\r\n\r\n    document.getElementById('recPackageName').textContent = pkgName;\r\n    document.getElementById('recPackageDesc').textContent = pkgDesc;\r\n\r\n    var breakdown = document.getElementById('breakdownList');\r\n    breakdown.innerHTML = '';\r\n    \/\/ Show all 10 questions with selected answers\r\n    QUESTIONS.forEach(function (q, i) {\r\n      var ans = answers[i] || [];\r\n      var qScore = 0;\r\n      var selectedLabels = ans.map(optIndex => {\r\n        if (q.options[optIndex].isOther) {\r\n           var otherInput = document.querySelector('.other-input[data-q=\"' + i + '\"]');\r\n           return \"Other\" + (otherInput && otherInput.value ? \": \" + otherInput.value : \"\");\r\n        }\r\n        return q.options[optIndex].label;\r\n      }).join(', ');\r\n      \r\n      ans.forEach(optIndex => { qScore += q.options[optIndex].score; });\r\n      if (q.maxScore && qScore > q.maxScore) qScore = q.maxScore;\r\n      var qMax = q.maxScore || Math.max(...q.options.map(o => o.score));\r\n      if (qMax === 0) qMax = 1;\r\n\r\n      if(selectedLabels === '') selectedLabels = 'Not answered';\r\n\r\n      var row = document.createElement('div');\r\n      row.className = 'breakdown-row';\r\n      row.style.alignItems = 'flex-start';\r\n      row.style.flexDirection = 'column';\r\n      row.style.gap = '6px';\r\n      row.innerHTML =\r\n        '<div style=\"width:100%; display:flex; justify-content:space-between; align-items:flex-start;\">' +\r\n        '<div class=\"breakdown-label\" style=\"font-weight:600; font-size:13px; color:var(--light); white-space:normal; flex:1;\">Q' + (i+1) + ': ' + q.title + '<\/div>' +\r\n        '<div style=\"font-size:13px; font-weight:700; color:var(--orange); margin-left:12px; white-space:nowrap;\">Score: ' + qScore + ' \/ ' + qMax + '<\/div>' +\r\n        '<\/div>' +\r\n        '<div style=\"font-size:13px; color:var(--orange-light);\">' + selectedLabels + '<\/div>';\r\n      breakdown.appendChild(row);\r\n    });\r\n\r\n    goToScreen(TOTAL_QUESTIONS + 2); \/\/ 12\r\n\r\n    setTimeout(function () {\r\n      document.querySelectorAll('.breakdown-fill').forEach(function (el) {\r\n        el.style.width = el.dataset.width + '%';\r\n      });\r\n    }, 100);\r\n  }\r\n\r\n  function retakeAssessment() {\r\n    answers = new Array(TOTAL_QUESTIONS).fill(null);\r\n    document.querySelectorAll('.option-item.selected').forEach(function (el) { el.classList.remove('selected'); });\r\n    document.querySelectorAll('.btn-next').forEach(function (b) { b.disabled = true; });\r\n    goToScreen(0);\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<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Step 1 of 10 0% 02 \/ Digital Maturity Assessment How digital is&hellip;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-4439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/pages\/4439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/comments?post=4439"}],"version-history":[{"count":1,"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/pages\/4439\/revisions"}],"predecessor-version":[{"id":4890,"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/pages\/4439\/revisions\/4890"}],"wp:attachment":[{"href":"https:\/\/digitalsme.sits.lk\/ta\/wp-json\/wp\/v2\/media?parent=4439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}