{"id":2557,"date":"2026-09-13T06:13:05","date_gmt":"2026-09-13T06:13:05","guid":{"rendered":"https:\/\/zenithtechmatrix.com\/?page_id=2557"},"modified":"2026-10-15T03:36:53","modified_gmt":"2026-10-15T03:36:53","slug":"web-app-solutions","status":"publish","type":"page","link":"https:\/\/zenithtechmatrix.com\/?page_id=2557","title":{"rendered":"Web &amp; App Solutions"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2557\" class=\"elementor elementor-2557\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3333adc e-con e-atomic-element e-flexbox-base e-default-div e-c7ea428 \" data-id=\"3333adc\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3333adc\">\n    \t\t<div class=\"elementor-element elementor-element-1dbf979 elementor-widget elementor-widget-html\" data-id=\"1dbf979\" 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    \/* =========================================\r\n       GLOBAL VARIABLES & RESET\r\n       ========================================= *\/\r\n    :root {\r\n        --ztm-blue: #05BFF9;\r\n        --ztm-green: #8EF012;\r\n        --ztm-dark: #0f172a;\r\n        --ztm-gray: #64748b;\r\n        --ztm-light: #f8fafc;\r\n        --ztm-border: #e2e8f0;\r\n    }\r\n    * { margin: 0; padding: 0; box-sizing: border-box; }\r\n    body {\r\n        font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n        color: var(--ztm-dark);\r\n        background-color: #ffffff;\r\n        line-height: 1.6;\r\n        overflow-x: hidden;\r\n    }\r\n    body.modal-open { overflow: hidden; }\r\n    a { text-decoration: none; color: inherit; }\r\n    button { font-family: inherit; cursor: pointer; border: none; }\r\n\r\n    \/* =========================================\r\n       UTILITY & LAYOUT\r\n       ========================================= *\/\r\n    .ztm-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }\r\n    .ztm-section { padding: 80px 0; }\r\n    .ztm-section-alt { background-color: var(--ztm-light); }\r\n    .ztm-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; letter-spacing: -0.01em; }\r\n    .ztm-subtitle { text-align: center; color: var(--ztm-gray); font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n    \r\n    .ztm-btn {\r\n        display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n        padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 1rem;\r\n        transition: all 0.3s ease;\r\n    }\r\n    .ztm-btn-primary {\r\n        background: linear-gradient(135deg, var(--ztm-blue), #0284c7);\r\n        color: #ffffff; box-shadow: 0 10px 20px rgba(5, 191, 249, 0.3);\r\n    }\r\n    .ztm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(5, 191, 249, 0.4); }\r\n    .ztm-btn-secondary {\r\n        background: #ffffff; color: var(--ztm-dark); border: 2px solid var(--ztm-border);\r\n    }\r\n    .ztm-btn-secondary:hover { border-color: var(--ztm-blue); color: var(--ztm-blue); transform: translateY(-2px); }\r\n\r\n    \/* =========================================\r\n       SECTION 01: HERO\r\n       ========================================= *\/\r\n    .ztm-hero {\r\n        padding: 100px 0 80px;\r\n        background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 50%, #f8fafc 100%);\r\n        position: relative; overflow: hidden; min-height: 90vh; display: flex; align-items: center;\r\n    }\r\n    .ztm-hero-grid {\r\n        display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2;\r\n    }\r\n    .ztm-hero-label {\r\n        font-size: 0.875rem; font-weight: 600; color: var(--ztm-blue); text-transform: uppercase;\r\n        letter-spacing: 2px; margin-bottom: 16px; display: block;\r\n    }\r\n    .ztm-hero-title {\r\n        font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1;\r\n        color: var(--ztm-dark); margin-bottom: 24px; letter-spacing: -0.02em;\r\n    }\r\n    .ztm-hero-title .highlight {\r\n        background: linear-gradient(135deg, var(--ztm-blue), var(--ztm-green));\r\n        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n    }\r\n    .ztm-hero-desc { font-size: 1.125rem; color: var(--ztm-gray); line-height: 1.7; margin-bottom: 40px; max-width: 540px; }\r\n    .ztm-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }\r\n    .ztm-hero-tags {\r\n        display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.75rem; font-weight: 600;\r\n        color: #94a3b8; text-transform: uppercase; letter-spacing: 1.5px;\r\n    }\r\n    .ztm-hero-tags span:not(:last-child)::after { content: '\u2022'; margin-left: 24px; color: #cbd5e1; }\r\n\r\n    \/* Hero Visual & 7 Floating Elements *\/\r\n    .ztm-hero-visual { position: relative; display: flex; justify-content: center; }\r\n    .ztm-hero-main-img {\r\n        width: 100%; max-width: 500px; height: auto; border-radius: 16px;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); position: relative; z-index: 1;\r\n    }\r\n    .hero-float {\r\n        position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);\r\n        padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08);\r\n        display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600;\r\n        color: var(--ztm-dark); z-index: 3; animation: float 4s ease-in-out infinite;\r\n        border: 1px solid rgba(255,255,255,0.5); white-space: nowrap;\r\n    }\r\n    .hero-float svg { width: 20px; height: 20px; color: var(--ztm-blue); }\r\n    \r\n    .float-1 { top: 5%; left: -5%; animation-delay: 0s; }\r\n    .float-2 { top: 10%; right: -5%; animation-delay: 0.5s; }\r\n    .float-3 { top: 35%; left: -8%; animation-delay: 1s; }\r\n    .float-4 { top: 35%; right: -8%; animation-delay: 1.5s; }\r\n    .float-5 { bottom: 25%; left: -5%; animation-delay: 2s; }\r\n    .float-6 { bottom: 15%; right: -5%; animation-delay: 2.5s; }\r\n    .float-7 { bottom: -5%; left: 50%; transform: translateX(-50%); animation-delay: 3s; }\r\n\r\n    @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }\r\n    .float-7 { animation: float7 4s ease-in-out infinite; }\r\n    @keyframes float7 { 0%, 100% { transform: translateX(-50%) translateY(0px); } 50% { transform: translateX(-50%) translateY(-10px); } }\r\n\r\n    \/* =========================================\r\n       MODAL & MULTI-STEP FORM CSS\r\n       ========================================= *\/\r\n    .ztm-modal-overlay {\r\n        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;\r\n        background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px);\r\n        z-index: 9999; align-items: center; justify-content: center; padding: 20px;\r\n    }\r\n    .ztm-modal-overlay.active { display: flex; }\r\n    .ztm-modal-content {\r\n        background: #0f172a; border-radius: 24px; max-width: 650px; width: 100%;\r\n        max-height: 90vh; overflow-y: auto; position: relative;\r\n        border: 1px solid #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n        animation: modalSlide 0.3s ease;\r\n    }\r\n    @keyframes modalSlide { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }\r\n    \r\n    .ztm-modal-close {\r\n        position: absolute; top: 20px; right: 20px; background: #334155; border: none;\r\n        width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #94a3b8;\r\n        font-size: 1.25rem; display: flex; align-items: center; justify-content: center;\r\n        transition: all 0.3s; z-index: 10;\r\n    }\r\n    .ztm-modal-close:hover { background: #475569; color: #ffffff; }\r\n\r\n    .ztm-form-header {\r\n        padding: 32px 32px 24px; border-bottom: 1px solid #1e293b;\r\n        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);\r\n    }\r\n    .ztm-form-header h2 { color: #ffffff; font-size: 1.5rem; margin-bottom: 8px; }\r\n    .ztm-form-header p { color: #94a3b8; font-size: 0.95rem; margin: 0; }\r\n\r\n    .ztm-form-body { padding: 32px; }\r\n    .ztm-form-step { display: none; animation: fadeIn 0.3s ease; }\r\n    .ztm-form-step.active { display: block; }\r\n    @keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }\r\n\r\n    .ztm-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }\r\n    .ztm-progress-dot {\r\n        width: 32px; height: 4px; border-radius: 2px; background: #334155; transition: all 0.3s;\r\n    }\r\n    .ztm-progress-dot.active { background: var(--ztm-blue); width: 48px; }\r\n    .ztm-progress-dot.completed { background: var(--ztm-green); }\r\n\r\n    .ztm-form-group { margin-bottom: 20px; }\r\n    .ztm-form-label { display: block; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; }\r\n    .ztm-form-label .req { color: #ef4444; }\r\n    .ztm-form-input, .ztm-form-select, .ztm-form-textarea {\r\n        width: 100%; padding: 12px 16px; border: 1px solid #334155; border-radius: 10px;\r\n        font-size: 0.95rem; color: #f8fafc; background: #1e293b; transition: all 0.3s; font-family: inherit;\r\n    }\r\n    .ztm-form-input:focus, .ztm-form-select:focus, .ztm-form-textarea:focus {\r\n        outline: none; border-color: var(--ztm-blue); box-shadow: 0 0 0 3px rgba(5, 191, 249, 0.15);\r\n    }\r\n    .ztm-form-textarea { min-height: 100px; resize: vertical; }\r\n    .ztm-form-hint { font-size: 0.8rem; color: #64748b; margin-top: 6px; }\r\n    .ztm-form-error { font-size: 0.8rem; color: #ef4444; margin-top: 6px; display: none; }\r\n    .ztm-form-group.error .ztm-form-input, .ztm-form-group.error .ztm-form-select, .ztm-form-group.error .ztm-form-textarea { border-color: #ef4444; }\r\n    .ztm-form-group.error .ztm-form-error { display: block; }\r\n\r\n    .ztm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\r\n    \r\n    .ztm-form-nav { display: flex; justify-content: space-between; margin-top: 32px; gap: 16px; }\r\n    .ztm-btn-form {\r\n        padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;\r\n        transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px;\r\n    }\r\n    .ztm-btn-back { background: #334155; color: #f8fafc; }\r\n    .ztm-btn-back:hover { background: #475569; }\r\n    .ztm-btn-next { background: var(--ztm-blue); color: #0f172a; margin-left: auto; }\r\n    .ztm-btn-next:hover { background: #0ea5e9; transform: translateY(-1px); }\r\n    .ztm-btn-submit { background: var(--ztm-green); color: #0f172a; width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px; }\r\n    .ztm-btn-submit:hover { background: #7dd30e; transform: translateY(-1px); }\r\n\r\n    .ztm-review-box {\r\n        background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 20px; margin-bottom: 24px;\r\n    }\r\n    .ztm-review-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #334155; font-size: 0.9rem; }\r\n    .ztm-review-item:last-child { border-bottom: none; }\r\n    .ztm-review-label { color: #94a3b8; }\r\n    .ztm-review-value { color: #f8fafc; font-weight: 500; text-align: right; max-width: 60%; }\r\n\r\n    .ztm-success-state { text-align: center; padding: 40px 20px; display: none; }\r\n    .ztm-success-state.active { display: block; }\r\n    .ztm-success-icon {\r\n        width: 64px; height: 64px; background: rgba(142, 240, 18, 0.1); color: var(--ztm-green);\r\n        border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n        margin: 0 auto 24px; font-size: 2rem;\r\n    }\r\n    .ztm-success-state h3 { color: #ffffff; font-size: 1.5rem; margin-bottom: 12px; }\r\n    .ztm-success-state p { color: #94a3b8; margin-bottom: 32px; line-height: 1.6; }\r\n    .ztm-success-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\r\n    .ztm-btn-whatsapp {\r\n        background: #25D366; color: #ffffff; padding: 14px 28px; border-radius: 10px;\r\n        font-weight: 600; display: inline-flex; align-items: center; gap: 8px;\r\n        transition: all 0.3s; text-decoration: none;\r\n    }\r\n    .ztm-btn-whatsapp:hover { background: #20ba5a; transform: translateY(-1px); }\r\n    .ztm-btn-whatsapp svg { width: 20px; height: 20px; }\r\n    .ztm-btn-close-success {\r\n        background: #334155; color: #f8fafc; padding: 14px 28px; border-radius: 10px;\r\n        font-weight: 600; transition: all 0.3s;\r\n    }\r\n    .ztm-btn-close-success:hover { background: #475569; }\r\n\r\n    \/* =========================================\r\n       SECTION 09: CTA CSS\r\n       ========================================= *\/\r\n    .ztm-faq-item {\r\n        background: #ffffff; border: 1px solid var(--ztm-border); border-radius: 12px;\r\n        margin-bottom: 16px; overflow: hidden; transition: all 0.3s;\r\n    }\r\n    .ztm-faq-q {\r\n        padding: 20px 24px; font-weight: 600; cursor: pointer; display: flex;\r\n        justify-content: space-between; align-items: center; color: var(--ztm-dark);\r\n    }\r\n    .ztm-faq-a { padding: 0 24px 20px; color: var(--ztm-gray); display: none; line-height: 1.6; }\r\n    .ztm-faq-item.active .ztm-faq-a { display: block; }\r\n    .ztm-faq-item.active .ztm-faq-icon { transform: rotate(45deg); }\r\n    .ztm-faq-icon { transition: transform 0.3s ease; color: var(--ztm-blue); font-size: 1.5rem; line-height: 1; }\r\n\r\n    .ztm-cta-box {\r\n        background: linear-gradient(135deg, var(--ztm-dark) 0%, #1e293b 100%);\r\n        border-radius: 24px; padding: 60px 40px; text-align: center; color: #ffffff;\r\n        position: relative; overflow: hidden; margin-top: 60px;\r\n    }\r\n    .ztm-cta-box::before {\r\n        content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px;\r\n        background: radial-gradient(circle, rgba(5,191,249,0.15) 0%, transparent 70%); border-radius: 50%;\r\n    }\r\n    .ztm-cta-box h2 { color: #ffffff; position: relative; z-index: 2; font-size: 2rem; margin-bottom: 16px; }\r\n    .ztm-cta-box p { color: #94a3b8; position: relative; z-index: 2; font-size: 1.125rem; margin-bottom: 32px; }\r\n    .ztm-cta-btn {\r\n        background: var(--ztm-green); color: var(--ztm-dark); padding: 16px 40px; border-radius: 50px;\r\n        font-weight: 700; text-decoration: none; display: inline-block; transition: all 0.3s;\r\n        position: relative; z-index: 2; font-size: 1.1rem; border: none; cursor: pointer;\r\n    }\r\n    .ztm-cta-btn:hover { background: #7dd30e; transform: translateY(-2px); }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE DESIGN\r\n       ========================================= *\/\r\n    @media (max-width: 1024px) {\r\n        .ztm-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }\r\n        .ztm-hero-desc { margin: 0 auto 40px; }\r\n        .ztm-hero-btns { justify-content: center; }\r\n        .ztm-hero-tags { justify-content: center; }\r\n        .hero-float { transform: scale(0.85); }\r\n        .float-7 { animation: float7-tablet 4s ease-in-out infinite; }\r\n        @keyframes float7-tablet { 0%, 100% { transform: translateX(-50%) scale(0.85) translateY(0px); } 50% { transform: translateX(-50%) scale(0.85) translateY(-10px); } }\r\n    }\r\n    @media (max-width: 768px) {\r\n        .ztm-section { padding: 60px 0; }\r\n        .ztm-hero { padding: 60px 0; min-height: auto; }\r\n        .hero-float { transform: scale(0.7); padding: 8px 12px; font-size: 0.75rem; }\r\n        .float-1 { top: 2%; left: 0%; }\r\n        .float-2 { top: 2%; right: 0%; }\r\n        .float-3 { top: 30%; left: -2%; }\r\n        .float-4 { top: 30%; right: -2%; }\r\n        .float-5 { bottom: 20%; left: 0%; }\r\n        .float-6 { bottom: 20%; right: 0%; }\r\n        .float-7 { bottom: -2%; }\r\n        .float-7 { animation: float7-mobile 4s ease-in-out infinite; }\r\n        @keyframes float7-mobile { 0%, 100% { transform: translateX(-50%) scale(0.7) translateY(0px); } 50% { transform: translateX(-50%) scale(0.7) translateY(-10px); } }\r\n        \r\n        .ztm-form-row { grid-template-columns: 1fr; }\r\n        .ztm-modal-content { max-height: 95vh; border-radius: 16px; }\r\n        .ztm-form-body { padding: 24px; }\r\n        .ztm-cta-box { padding: 40px 24px; }\r\n    }\r\n    @media (max-width: 480px) {\r\n        .hero-float { transform: scale(0.6); padding: 6px 10px; font-size: 0.7rem; gap: 6px; }\r\n        .hero-float svg { width: 16px; height: 16px; }\r\n        .float-1 { top: 0%; left: 2%; }\r\n        .float-2 { top: 0%; right: 2%; }\r\n        .float-3 { top: 25%; left: 0%; }\r\n        .float-4 { top: 25%; right: 0%; }\r\n        .float-5 { bottom: 15%; left: 2%; }\r\n        .float-6 { bottom: 15%; right: 2%; }\r\n        .float-7 { bottom: 0%; }\r\n        .float-7 { animation: float7-small 4s ease-in-out infinite; }\r\n        @keyframes float7-small { 0%, 100% { transform: translateX(-50%) scale(0.6) translateY(0px); } 50% { transform: translateX(-50%) scale(0.6) translateY(-10px); } }\r\n    }\r\n<\/style>\r\n\r\n<!-- SECTION 01: HERO -->\r\n<section class=\"ztm-hero\">\r\n    <div class=\"ztm-container\">\r\n        <div class=\"ztm-hero-grid\">\r\n            <div class=\"ztm-hero-content\">\r\n                <span class=\"ztm-hero-label\">Web & App Solutions<\/span>\r\n                <h1 class=\"ztm-hero-title\">Websites & Web Apps Built Around Your <span class=\"highlight\">Business<\/span><\/h1>\r\n                <p class=\"ztm-hero-desc\">From professional business websites to custom web applications, ZTM builds modern digital solutions designed around your goals, customers, and workflow.<\/p>\r\n                <div class=\"ztm-hero-btns\">\r\n                    <button class=\"ztm-btn ztm-btn-primary ztm-open-modal\">Start Your Project <span>\u2192<\/span><\/button>\r\n                    <a href=\"#work\" class=\"ztm-btn ztm-btn-secondary\">View Our Work <span>\u25c9<\/span><\/a>\r\n                <\/div>\r\n                <div class=\"ztm-hero-tags\">\r\n                    <span>Web Development<\/span><span>E-Commerce<\/span><span>Web Apps<\/span><span>Custom Solutions<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ztm-hero-visual\">\r\n                <img decoding=\"async\" src=\"https:\/\/zenithtechmatrix.com\/wp-content\/uploads\/2026\/09\/13b11770-9544-47ff-bf9a-dc62b20321a7.png\" alt=\"ZTM Development Solutions\" class=\"ztm-hero-main-img\" title=\"Web &amp; App Solutions\">\r\n                \r\n                <div class=\"hero-float float-1\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"><\/line><\/svg>\r\n                    <span>Laptop<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-2\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg>\r\n                    <span>Coding<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-3\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>\r\n                    <span>Plant\/Growth<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-4\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path><path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path><\/svg>\r\n                    <span>Book<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-5\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"><\/path><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"><\/path><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"><\/line><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"><\/line><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"><\/line><\/svg>\r\n                    <span>Mug<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-6\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line><\/svg>\r\n                    <span>Chart<\/span>\r\n                <\/div>\r\n                <div class=\"hero-float float-7\">\r\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path><\/svg>\r\n                    <span>Security<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- PROJECT INQUIRY MODAL -->\r\n<div class=\"ztm-modal-overlay\" id=\"projectModal\">\r\n    <div class=\"ztm-modal-content\">\r\n        <button class=\"ztm-modal-close\" id=\"modalClose\">\u00d7<\/button>\r\n        \r\n        <div class=\"ztm-form-header\">\r\n            <h2>Start Your Project<\/h2>\r\n            <p>Tell us about your project and we'll get back to you within 24 hours<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-form-body\">\r\n            <div class=\"ztm-progress\">\r\n                <div class=\"ztm-progress-dot active\" data-step=\"1\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"2\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"3\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"4\"><\/div>\r\n            <\/div>\r\n\r\n            <form id=\"projectForm\">\r\n                <!-- Step 1: Contact Information -->\r\n                <div class=\"ztm-form-step active\" data-step=\"1\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Full Name <span class=\"req\">*<\/span><\/label>\r\n                        <input type=\"text\" class=\"ztm-form-input\" name=\"fullName\" required>\r\n                        <div class=\"ztm-form-error\">Please enter your full name<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-row\">\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">WhatsApp Number <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"tel\" class=\"ztm-form-input\" name=\"whatsapp\" placeholder=\"03XX XXXXXXX\" required>\r\n                            <div class=\"ztm-form-error\">Please enter a valid WhatsApp number<\/div>\r\n                        <\/div>\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Email<\/label>\r\n                            <input type=\"email\" class=\"ztm-form-input\" name=\"email\">\r\n                            <div class=\"ztm-form-error\">Please enter a valid email<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Business Category<\/label>\r\n                        <select class=\"ztm-form-select\" name=\"businessCategory\">\r\n                            <option value=\"\">Select category<\/option>\r\n                            <option>E-Commerce \/ Retail<\/option>\r\n                            <option>Healthcare \/ Medical<\/option>\r\n                            <option>Education \/ Training<\/option>\r\n                            <option>Real Estate<\/option>\r\n                            <option>Restaurant \/ Food<\/option>\r\n                            <option>Finance \/ Banking<\/option>\r\n                            <option>Technology \/ SaaS<\/option>\r\n                            <option>Professional Services<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 2: Project Details -->\r\n                <div class=\"ztm-form-step\" data-step=\"2\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Type <span class=\"req\">*<\/span><\/label>\r\n                        <select class=\"ztm-form-select\" name=\"projectType\" required>\r\n                            <option value=\"\">Select project type<\/option>\r\n                            <option>Business Website<\/option>\r\n                            <option>E-Commerce Store<\/option>\r\n                            <option>Web Application<\/option>\r\n                            <option>Mobile App<\/option>\r\n                            <option>Landing Page<\/option>\r\n                            <option>Portfolio Website<\/option>\r\n                            <option>Blog \/ News Site<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                        <div class=\"ztm-form-error\">Please select a project type<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Goal <span class=\"req\">*<\/span><\/label>\r\n                        <select class=\"ztm-form-select\" name=\"projectGoal\" required>\r\n                            <option value=\"\">Select your goal<\/option>\r\n                            <option>Launch new business online<\/option>\r\n                            <option>Improve existing website<\/option>\r\n                            <option>Automate business processes<\/option>\r\n                            <option>Increase sales \/ conversions<\/option>\r\n                            <option>Build custom software<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                        <div class=\"ztm-form-error\">Please select your project goal<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Description <span class=\"req\">*<\/span><\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"projectDescription\" placeholder=\"Briefly describe what you want to build...\" required><\/textarea>\r\n                        <div class=\"ztm-form-error\">Please describe your project<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 3: Requirements -->\r\n                <div class=\"ztm-form-step\" data-step=\"3\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Required Pages (if website)<\/label>\r\n                        <input type=\"text\" class=\"ztm-form-input\" name=\"requiredPages\" placeholder=\"e.g., Home, About, Services, Contact\">\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Required Features<\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"requiredFeatures\" placeholder=\"List any specific features you need (payment gateway, booking system, etc.)\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-row\">\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Budget Range<\/label>\r\n                            <select class=\"ztm-form-select\" name=\"budget\">\r\n                                <option value=\"\">Select budget<\/option>\r\n                                <option>Under PKR 50,000<\/option>\r\n                                <option>PKR 50,000 - 100,000<\/option>\r\n                                <option>PKR 100,000 - 250,000<\/option>\r\n                                <option>PKR 250,000 - 500,000<\/option>\r\n                                <option>PKR 500,000+<\/option>\r\n                                <option>Not decided yet<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Timeline<\/label>\r\n                            <select class=\"ztm-form-select\" name=\"timeline\">\r\n                                <option value=\"\">Select timeline<\/option>\r\n                                <option>ASAP (1-2 weeks)<\/option>\r\n                                <option>1 month<\/option>\r\n                                <option>2-3 months<\/option>\r\n                                <option>Flexible<\/option>\r\n                                <option>Not decided yet<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Reference Website<\/label>\r\n                        <input type=\"url\" class=\"ztm-form-input\" name=\"referenceWebsite\" placeholder=\"https:\/\/example.com\">\r\n                        <div class=\"ztm-form-hint\">Any website you like for design inspiration<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 4: Review & Submit -->\r\n                <div class=\"ztm-form-step\" data-step=\"4\">\r\n                    <div class=\"ztm-review-box\">\r\n                        <h3 style=\"color: #ffffff; margin-bottom: 16px; font-size: 1.1rem;\">Review Your Information<\/h3>\r\n                        <div id=\"reviewContent\"><\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Additional Requirements<\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"additionalRequirements\" placeholder=\"Any other details or special requirements...\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-submit\" id=\"submitForm\">Send to WhatsApp \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/form>\r\n\r\n            <!-- Success State -->\r\n            <div class=\"ztm-success-state\" id=\"successState\">\r\n                <div class=\"ztm-success-icon\">\u2713<\/div>\r\n                <h3>Your project brief is ready!<\/h3>\r\n                <p>Click the button below to open WhatsApp with your project details. Just press Send to contact us.<\/p>\r\n                <div class=\"ztm-success-btns\">\r\n                    <a href=\"#\" class=\"ztm-btn-whatsapp\" id=\"whatsappLink\" target=\"_blank\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n                        Open WhatsApp\r\n                    <\/a>\r\n                    <button type=\"button\" class=\"ztm-btn-close-success\" id=\"closeSuccess\">Close<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    \/\/ Modal Elements\r\n    const modal = document.getElementById('projectModal');\r\n    const modalClose = document.getElementById('modalClose');\r\n    const form = document.getElementById('projectForm');\r\n    const successState = document.getElementById('successState');\r\n    const submitBtn = document.getElementById('submitForm');\r\n    const whatsappLink = document.getElementById('whatsappLink');\r\n    const closeSuccess = document.getElementById('closeSuccess');\r\n\r\n    let currentStep = 1;\r\n    const totalSteps = 4;\r\n    let whatsappURL = '';\r\n\r\n    \/\/ Open Modal\r\n    document.querySelectorAll('.ztm-open-modal').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            openModal();\r\n        });\r\n    });\r\n\r\n    function openModal() {\r\n        modal.classList.add('active');\r\n        document.body.classList.add('modal-open');\r\n        resetForm();\r\n    }\r\n\r\n    function closeModal() {\r\n        modal.classList.remove('active');\r\n        document.body.classList.remove('modal-open');\r\n    }\r\n\r\n    \/\/ Close Modal\r\n    modalClose.addEventListener('click', closeModal);\r\n    modal.addEventListener('click', (e) => {\r\n        if (e.target === modal) closeModal();\r\n    });\r\n    document.addEventListener('keydown', (e) => {\r\n        if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();\r\n    });\r\n\r\n    \/\/ Form Navigation\r\n    document.addEventListener('click', (e) => {\r\n        if (e.target.classList.contains('ztm-btn-next')) {\r\n            if (validateStep(currentStep)) {\r\n                currentStep++;\r\n                showStep(currentStep);\r\n            }\r\n        }\r\n        if (e.target.classList.contains('ztm-btn-back')) {\r\n            currentStep--;\r\n            showStep(currentStep);\r\n        }\r\n    });\r\n\r\n    function showStep(step) {\r\n        document.querySelectorAll('.ztm-form-step').forEach(s => s.classList.remove('active'));\r\n        document.querySelector(`.ztm-form-step[data-step=\"${step}\"]`).classList.add('active');\r\n        \r\n        document.querySelectorAll('.ztm-progress-dot').forEach((dot, i) => {\r\n            dot.classList.remove('active', 'completed');\r\n            if (i + 1 < step) dot.classList.add('completed');\r\n            if (i + 1 === step) dot.classList.add('active');\r\n        });\r\n\r\n        if (step === 4) buildReview();\r\n    }\r\n\r\n    \/\/ Validation\r\n    function validateStep(step) {\r\n        const stepEl = document.querySelector(`.ztm-form-step[data-step=\"${step}\"]`);\r\n        const requiredFields = stepEl.querySelectorAll('[required]');\r\n        let valid = true;\r\n\r\n        requiredFields.forEach(field => {\r\n            const group = field.closest('.ztm-form-group');\r\n            if (!field.value.trim()) {\r\n                group.classList.add('error');\r\n                valid = false;\r\n            } else {\r\n                group.classList.remove('error');\r\n            }\r\n\r\n            if (field.type === 'email' && field.value && !isValidEmail(field.value)) {\r\n                group.classList.add('error');\r\n                valid = false;\r\n            }\r\n\r\n            if (field.name === 'whatsapp' && field.value) {\r\n                const phone = field.value.replace(\/\\D\/g, '');\r\n                if (phone.length < 10) {\r\n                    group.classList.add('error');\r\n                    valid = false;\r\n                }\r\n            }\r\n        });\r\n\r\n        return valid;\r\n    }\r\n\r\n    function isValidEmail(email) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n    }\r\n\r\n    \/\/ Clear errors on input\r\n    form.addEventListener('input', (e) => {\r\n        const group = e.target.closest('.ztm-form-group');\r\n        if (group) group.classList.remove('error');\r\n    });\r\n\r\n    \/\/ Build Review\r\n    function buildReview() {\r\n        const data = new FormData(form);\r\n        const reviewContent = document.getElementById('reviewContent');\r\n        \r\n        const fields = [\r\n            { label: 'Name', value: data.get('fullName') },\r\n            { label: 'WhatsApp', value: data.get('whatsapp') },\r\n            { label: 'Email', value: data.get('email') || 'Not provided' },\r\n            { label: 'Business Category', value: data.get('businessCategory') || 'Not provided' },\r\n            { label: 'Project Type', value: data.get('projectType') },\r\n            { label: 'Project Goal', value: data.get('projectGoal') },\r\n            { label: 'Description', value: data.get('projectDescription') },\r\n            { label: 'Required Pages', value: data.get('requiredPages') || 'Not provided' },\r\n            { label: 'Required Features', value: data.get('requiredFeatures') || 'Not provided' },\r\n            { label: 'Reference Website', value: data.get('referenceWebsite') || 'Not provided' },\r\n            { label: 'Budget', value: data.get('budget') || 'Not decided' },\r\n            { label: 'Timeline', value: data.get('timeline') || 'Not decided' }\r\n        ];\r\n\r\n        reviewContent.innerHTML = fields\r\n            .filter(f => f.value && f.value !== 'Not provided')\r\n            .map(f => `\r\n                <div class=\"ztm-review-item\">\r\n                    <span class=\"ztm-review-label\">${f.label}<\/span>\r\n                    <span class=\"ztm-review-value\">${f.value}<\/span>\r\n                <\/div>\r\n            `).join('');\r\n    }\r\n\r\n    \/\/ ===== ZTM Supabase order intake (added) =====\r\n    function ztmRef(){try{var u=new URLSearchParams(location.search).get('ref');if(u){localStorage.setItem('ztm_ref',u.replace(\/[^A-Za-z0-9]\/g,'').slice(0,12));}return localStorage.getItem('ztm_ref')||'';}catch(e){return '';}}\r\n    const ZTM_SB_URL = 'https:\/\/otbsvumischupdvorusq.supabase.co';\r\n    const ZTM_SB_KEY = 'sb_publishable_yrsEFtts8UVebfRx_Chi_w_spjcYCT-';\r\n    function ztmSaveOrder(payload) {\r\n        return fetch(ZTM_SB_URL + '\/rest\/v1\/rpc\/submit_order', {\r\n            method: 'POST',\r\n            headers: { 'apikey': ZTM_SB_KEY, 'Content-Type': 'application\/json' },\r\n            body: JSON.stringify({ p: payload }),\r\n            keepalive: true\r\n        }).then(r => r.ok ? r.json() : null).catch(() => null);\r\n    }\r\n\r\n    \/\/ Submit Form\r\n    submitBtn.addEventListener('click', () => {\r\n        const data = new FormData(form);\r\n        const additionalReq = data.get('additionalRequirements');\r\n        \r\n        const message = `ZTM \u2014 NEW PROJECT REQUEST\r\n\r\n*Contact Information:*\r\nName: ${data.get('fullName')}\r\nWhatsApp: ${data.get('whatsapp')}\r\nEmail: ${data.get('email') || 'Not provided'}\r\nBusiness Category: ${data.get('businessCategory') || 'Not provided'}\r\n\r\n*Project Details:*\r\nProject Type: ${data.get('projectType')}\r\nProject Goal: ${data.get('projectGoal')}\r\nDescription: ${data.get('projectDescription')}\r\n\r\n*Requirements:*\r\nRequired Pages: ${data.get('requiredPages') || 'Not specified'}\r\nRequired Features: ${data.get('requiredFeatures') || 'Not specified'}\r\nReference Website: ${data.get('referenceWebsite') || 'Not provided'}\r\nBudget: ${data.get('budget') || 'Not decided'}\r\nTimeline: ${data.get('timeline') || 'Not decided'}\r\n${additionalReq ? `\\nAdditional Requirements: ${additionalReq}` : ''}\r\n\r\nPlease review my project and contact me on WhatsApp.`;\r\n\r\n        whatsappURL = `https:\/\/wa.me\/923274893933?text=${encodeURIComponent(message)}`;\r\n        whatsappLink.href = whatsappURL;\r\n\r\n        \/\/ Save to Supabase (WhatsApp flow above works even if this fails)\r\n        ztmSaveOrder({\r\n            service: 'web',\r\n            name: data.get('fullName'),\r\n            whatsapp: data.get('whatsapp'),\r\n            email: data.get('email') || null,\r\n            business: null,\r\n            source: location.href,\r\n            ref: ztmRef(),\r\n            website: '',\r\n            details: {\r\n                businessCategory: data.get('businessCategory'),\r\n                projectType: data.get('projectType'),\r\n                projectGoal: data.get('projectGoal'),\r\n                description: data.get('projectDescription'),\r\n                requiredPages: data.get('requiredPages'),\r\n                requiredFeatures: data.get('requiredFeatures'),\r\n                referenceWebsite: data.get('referenceWebsite'),\r\n                budget: data.get('budget'),\r\n                timeline: data.get('timeline'),\r\n                additionalRequirements: additionalReq\r\n            }\r\n        }).then(res => {\r\n            if (res && res.order_code) {\r\n                const m2 = message + '\\n\\nOrder ID: ' + res.order_code;\r\n                whatsappLink.href = `https:\/\/wa.me\/923274893933?text=${encodeURIComponent(m2)}`;\r\n            }\r\n        });\r\n\r\n        form.style.display = 'none';\r\n        successState.classList.add('active');\r\n    });\r\n\r\n    \/\/ Close Success State\r\n    closeSuccess.addEventListener('click', () => {\r\n        closeModal();\r\n    });\r\n\r\n    \/\/ Reset Form\r\n    function resetForm() {\r\n        form.reset();\r\n        form.style.display = 'block';\r\n        successState.classList.remove('active');\r\n        currentStep = 1;\r\n        showStep(1);\r\n        document.querySelectorAll('.ztm-form-group.error').forEach(g => g.classList.remove('error'));\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d2a21a2 e-con e-atomic-element e-flexbox-base e-default-div e-a67c9fb \" data-id=\"d2a21a2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d2a21a2\">\n    \t\t<div class=\"elementor-element elementor-element-8200f07 elementor-widget elementor-widget-html\" data-id=\"8200f07\" 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  .ztm-s2 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #ffffff; }\r\n  .ztm-s2-container { max-width: 1200px; margin: 0 auto; }\r\n  .ztm-s2-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; letter-spacing: -0.01em; }\r\n  .ztm-s2-sub { text-align: center; color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }\r\n  .ztm-s2-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px 24px; transition: all 0.3s ease; height: 100%; }\r\n  .ztm-s2-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08); border-color: #05BFF9; }\r\n  .ztm-s2-icon { width: 48px; height: 48px; background: #f0f9ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #05BFF9; }\r\n  .ztm-s2-icon svg { width: 24px; height: 24px; }\r\n  .ztm-s2-num { font-size: 0.8rem; font-weight: 700; color: #8EF012; margin-bottom: 8px; display: block; }\r\n  .ztm-s2-h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; color: #0f172a; }\r\n  .ztm-s2-p { font-size: 0.95rem; color: #64748b; line-height: 1.5; margin: 0; }\r\n<\/style>\r\n\r\n<div class=\"ztm-s2\">\r\n  <div class=\"ztm-s2-container\">\r\n    <h2 class=\"ztm-s2-h2\">What We Build<\/h2>\r\n    <p class=\"ztm-s2-sub\">End-to-end digital development services tailored to scale your business.<\/p>\r\n    <div class=\"ztm-s2-grid\">\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">01<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Business Websites<\/h3>\r\n        <p class=\"ztm-s2-p\">Professional, responsive websites that establish your brand authority.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">02<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"><\/path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><path d=\"M16 10a4 4 0 0 1-8 0\"><\/path><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">E-Commerce Stores<\/h3>\r\n        <p class=\"ztm-s2-p\">Fully functional online stores with secure payments and inventory management.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">03<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Landing Pages<\/h3>\r\n        <p class=\"ztm-s2-p\">High-converting pages designed to capture leads and drive sales.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">04<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"><\/rect><rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"><\/rect><line x1=\"9\" y1=\"1\" x2=\"9\" y2=\"4\"><\/line><line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"4\"><\/line><line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"23\"><\/line><line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"23\"><\/line><line x1=\"20\" y1=\"9\" x2=\"23\" y2=\"9\"><\/line><line x1=\"20\" y1=\"14\" x2=\"23\" y2=\"14\"><\/line><line x1=\"1\" y1=\"9\" x2=\"4\" y2=\"9\"><\/line><line x1=\"1\" y1=\"14\" x2=\"4\" y2=\"14\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Web Applications<\/h3>\r\n        <p class=\"ztm-s2-p\">Complex, interactive systems built around your specific business workflows.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">05<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Mobile Apps<\/h3>\r\n        <p class=\"ztm-s2-p\">Native and cross-platform mobile experiences for Android and iOS.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">06<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"><\/ellipse><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\"><\/path><path d=\"M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5\"><\/path><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Dashboards & Portals<\/h3>\r\n        <p class=\"ztm-s2-p\">Data-driven admin panels and customer-facing portals.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">07<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"><\/path><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">Custom Business Systems<\/h3>\r\n        <p class=\"ztm-s2-p\">Tailored software solutions that automate and streamline operations.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s2-card\">\r\n        <span class=\"ztm-s2-num\">08<\/span>\r\n        <div class=\"ztm-s2-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"><\/path><\/svg><\/div>\r\n        <h3 class=\"ztm-s2-h3\">AI-Powered Solutions<\/h3>\r\n        <p class=\"ztm-s2-p\">Integrating AI and automation to give your business a competitive edge.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d53620 elementor-widget elementor-widget-html\" data-id=\"6d53620\" 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  .ztm-s3 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #f8fafc; }\r\n  .ztm-s3-container { max-width: 1200px; margin: 0 auto; }\r\n  .ztm-s3-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; }\r\n  .ztm-s3-sub { text-align: center; color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 32px; margin-bottom: 48px; }\r\n  .ztm-s3-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; height: 100%; }\r\n  .ztm-s3-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }\r\n  .ztm-s3-card h3 svg { width: 24px; height: 24px; color: #05BFF9; }\r\n  .ztm-s3-card p { color: #64748b; margin-bottom: 20px; }\r\n  .ztm-s3-tags { display: flex; flex-wrap: wrap; gap: 8px; }\r\n  .ztm-s3-tag { background: #f8fafc; color: #0f172a; padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; border: 1px solid #e2e8f0; }\r\n  \r\n  .ztm-s3-pipeline { background: #0f172a; border-radius: 16px; padding: 32px; position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }\r\n  .ztm-s3-pipe-line { position: absolute; top: 52px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, #05BFF9, #8EF012); z-index: 1; }\r\n  .ztm-s3-pipe-step { text-align: center; flex: 1; min-width: 80px; position: relative; z-index: 2; }\r\n  .ztm-s3-pipe-node { width: 36px; height: 36px; background: #05BFF9; color: #0f172a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 12px; font-size: 0.8rem; }\r\n  .ztm-s3-pipe-label { color: #f8fafc; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }\r\n  @media (max-width: 768px) { .ztm-s3-grid { grid-template-columns: 1fr; } .ztm-s3-pipeline { flex-direction: column; align-items: flex-start; } .ztm-s3-pipe-line { display: none; } .ztm-s3-pipe-step { display: flex; align-items: center; gap: 16px; text-align: left; width: 100%; } .ztm-s3-pipe-node { margin: 0; } }\r\n<\/style>\r\n\r\n<div class=\"ztm-s3\">\r\n  <div class=\"ztm-s3-container\">\r\n    <h2 class=\"ztm-s3-h2\">From Websites to Full Digital Applications<\/h2>\r\n    <p class=\"ztm-s3-sub\">Whether you need a customer-facing website or a complex internal system, we build it right.<\/p>\r\n    \r\n    <div class=\"ztm-s3-grid\">\r\n      <div class=\"ztm-s3-card\">\r\n        <h3><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"><\/line><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"><\/line><\/svg> Website Development<\/h3>\r\n        <p>Professional business websites, e-commerce stores, landing pages and customer-facing digital experiences.<\/p>\r\n        <div class=\"ztm-s3-tags\">\r\n          <span class=\"ztm-s3-tag\">Responsive UI<\/span><span class=\"ztm-s3-tag\">Modern UX<\/span><span class=\"ztm-s3-tag\">E-Commerce<\/span><span class=\"ztm-s3-tag\">Forms<\/span><span class=\"ztm-s3-tag\">WhatsApp<\/span><span class=\"ztm-s3-tag\">Payments<\/span><span class=\"ztm-s3-tag\">SEO-ready<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"ztm-s3-card\">\r\n        <h3><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg> Web Application Development<\/h3>\r\n        <p>Interactive systems designed around business workflows, user roles, and data management.<\/p>\r\n        <div class=\"ztm-s3-tags\">\r\n          <span class=\"ztm-s3-tag\">User Accounts<\/span><span class=\"ztm-s3-tag\">Admin Dashboards<\/span><span class=\"ztm-s3-tag\">Databases<\/span><span class=\"ztm-s3-tag\">Customer Portals<\/span><span class=\"ztm-s3-tag\">Authentication<\/span><span class=\"ztm-s3-tag\">APIs<\/span><span class=\"ztm-s3-tag\">Automation<\/span><span class=\"ztm-s3-tag\">AI Features<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ztm-s3-pipeline\">\r\n      <div class=\"ztm-s3-pipe-line\"><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">1<\/div><div class=\"ztm-s3-pipe-label\">IDEA<\/div><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">2<\/div><div class=\"ztm-s3-pipe-label\">UI<\/div><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">3<\/div><div class=\"ztm-s3-pipe-label\">CODE<\/div><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">4<\/div><div class=\"ztm-s3-pipe-label\">DATABASE<\/div><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">5<\/div><div class=\"ztm-s3-pipe-label\">API<\/div><\/div>\r\n      <div class=\"ztm-s3-pipe-step\"><div class=\"ztm-s3-pipe-node\">6<\/div><div class=\"ztm-s3-pipe-label\">APP<\/div><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c916fe elementor-widget elementor-widget-html\" data-id=\"7c916fe\" 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  .ztm-s4 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #ffffff; }\r\n  .ztm-s4-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }\r\n  .ztm-s4-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 16px; }\r\n  .ztm-s4-p { font-size: 1.125rem; color: #64748b; margin-bottom: 32px; }\r\n  .ztm-s4-tags { display: flex; flex-wrap: wrap; gap: 10px; }\r\n  .ztm-s4-tag { background: #f8fafc; color: #0f172a; padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; border: 1px solid #e2e8f0; transition: all 0.3s; }\r\n  .ztm-s4-tag:hover { border-color: #05BFF9; color: #05BFF9; }\r\n  \r\n  .ztm-s4-visual { display: flex; justify-content: center; }\r\n  .ztm-s4-phone { background: #0f172a; border-radius: 32px; padding: 12px; max-width: 280px; width: 100%; border: 4px solid #334155; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); position: relative; }\r\n  .ztm-s4-phone::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 60px; height: 6px; background: #334155; border-radius: 10px; z-index: 2; }\r\n  .ztm-s4-screen { background: #ffffff; border-radius: 24px; height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }\r\n  .ztm-s4-screen svg { width: 48px; height: 48px; color: #05BFF9; margin-bottom: 16px; }\r\n  .ztm-s4-screen h4 { font-weight: 700; color: #0f172a; margin-bottom: 12px; }\r\n  .ztm-s4-bar { width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; margin-bottom: 8px; }\r\n  .ztm-s4-bar.short { width: 70%; }\r\n  .ztm-s4-btn-mock { width: 100%; height: 40px; background: #05BFF9; border-radius: 8px; margin-top: 16px; }\r\n  @media (max-width: 992px) { .ztm-s4-container { grid-template-columns: 1fr; text-align: center; } .ztm-s4-tags { justify-content: center; } .ztm-s4-visual { order: -1; } }\r\n<\/style>\r\n\r\n<div class=\"ztm-s4\">\r\n  <div class=\"ztm-s4-container\">\r\n    <div class=\"ztm-s4-visual\">\r\n      <div class=\"ztm-s4-phone\">\r\n        <div class=\"ztm-s4-screen\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg>\r\n          <h4>Mobile UI<\/h4>\r\n          <div class=\"ztm-s4-bar\"><\/div>\r\n          <div class=\"ztm-s4-bar short\"><\/div>\r\n          <div class=\"ztm-s4-btn-mock\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"ztm-s4-text\">\r\n      <h2 class=\"ztm-s4-h2\">Mobile Apps Built For Your Next Idea<\/h2>\r\n      <p class=\"ztm-s4-p\">We can design and develop mobile experiences for Android and iOS based on your project requirements.<\/p>\r\n      <div class=\"ztm-s4-tags\">\r\n        <span class=\"ztm-s4-tag\">Android<\/span>\r\n        <span class=\"ztm-s4-tag\">iOS<\/span>\r\n        <span class=\"ztm-s4-tag\">Mobile UI<\/span>\r\n        <span class=\"ztm-s4-tag\">Backend\/API<\/span>\r\n        <span class=\"ztm-s4-tag\">User Accounts<\/span>\r\n        <span class=\"ztm-s4-tag\">Push Notifications<\/span>\r\n        <span class=\"ztm-s4-tag\">Database<\/span>\r\n      <\/ a>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df53658 elementor-widget elementor-widget-html\" data-id=\"df53658\" 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  .ztm-s5 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #f8fafc; }\r\n  .ztm-s5-container { max-width: 1200px; margin: 0 auto; text-align: center; }\r\n  .ztm-s5-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 16px; }\r\n  .ztm-s5-sub { color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s5-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 48px; }\r\n  .ztm-s5-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px 16px; text-align: center; font-weight: 600; color: #0f172a; transition: all 0.3s; }\r\n  .ztm-s5-card:hover { border-color: #05BFF9; transform: translateY(-3px); }\r\n  .ztm-s5-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }\r\n  .ztm-s5-feat { background: #ffffff; color: #0f172a; padding: 10px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; border: 1px solid #e2e8f0; transition: all 0.3s; }\r\n  .ztm-s5-feat:hover { border-color: #8EF012; color: #0f172a; background: #f0fdf4; }\r\n<\/style>\r\n\r\n<div class=\"ztm-s5\">\r\n  <div class=\"ztm-s5-container\">\r\n    <h2 class=\"ztm-s5-h2\">Built Around How Your Business Works<\/h2>\r\n    <p class=\"ztm-s5-sub\">We don't just design pages. We build functional digital systems tailored to your industry.<\/p>\r\n    \r\n    <div class=\"ztm-s5-grid\">\r\n      <div class=\"ztm-s5-card\">E-Commerce<\/div>\r\n      <div class=\"ztm-s5-card\">Restaurants \/ Food<\/div>\r\n      <div class=\"ztm-s5-card\">Education<\/div>\r\n      <div class=\"ztm-s5-card\">Real Estate<\/div>\r\n      <div class=\"ztm-s5-card\">Professional Services<\/div>\r\n      <div class=\"ztm-s5-card\">Agencies<\/div>\r\n      <div class=\"ztm-s5-card\">Startups \/ SaaS<\/div>\r\n      <div class=\"ztm-s5-card\">Personal Brands<\/div>\r\n    <\/div>\r\n\r\n    <h3 style=\"font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; color: #64748b;\">Core Functionality<\/h3>\r\n    <div class=\"ztm-s5-strip\">\r\n      <span class=\"ztm-s5-feat\">Payments<\/span>\r\n      <span class=\"ztm-s5-feat\">Bookings<\/span>\r\n      <span class=\"ztm-s5-feat\">User Accounts<\/span>\r\n      <span class=\"ztm-s5-feat\">Dashboards<\/span>\r\n      <span class=\"ztm-s5-feat\">Databases<\/span>\r\n      <span class=\"ztm-s5-feat\">Advanced Search<\/span>\r\n      <span class=\"ztm-s5-feat\">APIs<\/span>\r\n      <span class=\"ztm-s5-feat\">Automation<\/span>\r\n      <span class=\"ztm-s5-feat\">AI Features<\/span>\r\n      <span class=\"ztm-s5-feat\">WhatsApp Integration<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11e0d5a elementor-widget elementor-widget-html\" data-id=\"11e0d5a\" 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  .ztm-s6 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #ffffff; }\r\n  .ztm-s6-container { max-width: 1200px; margin: 0 auto; }\r\n  .ztm-s6-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; }\r\n  .ztm-s6-sub { text-align: center; color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s6-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }\r\n  .ztm-s6-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; position: relative; transition: all 0.3s; }\r\n  .ztm-s6-card:hover { border-color: #05BFF9; box-shadow: 0 10px 30px rgba(5, 191, 249, 0.1); }\r\n  .ztm-s6-num { font-size: 0.8rem; font-weight: 700; color: #8EF012; margin-bottom: 12px; display: block; }\r\n  .ztm-s6-h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; color: #0f172a; }\r\n  .ztm-s6-p { font-size: 0.95rem; color: #64748b; line-height: 1.5; margin: 0; }\r\n  .ztm-s6-icon { position: absolute; top: 32px; right: 32px; color: #e2e8f0; }\r\n  .ztm-s6-icon svg { width: 24px; height: 24px; }\r\n<\/style>\r\n\r\n<div class=\"ztm-s6\">\r\n  <div class=\"ztm-s6-container\">\r\n    <h2 class=\"ztm-s6-h2\">From Idea to Launch<\/h2>\r\n    <p class=\"ztm-s6-sub\">A transparent, structured development pipeline that keeps your project on track.<\/p>\r\n    \r\n    <div class=\"ztm-s6-grid\">\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">01<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">DISCOVER<\/h3>\r\n        <p class=\"ztm-s6-p\">Understand the business, goals, and technical requirements.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">02<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">PLAN<\/h3>\r\n        <p class=\"ztm-s6-p\">Define structure, features, database schema and project scope.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">03<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"><\/polygon><polyline points=\"2 17 12 22 22 17\"><\/polyline><polyline points=\"2 12 12 17 22 12\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">DESIGN<\/h3>\r\n        <p class=\"ztm-s6-p\">Create the UI\/UX experience, wireframes and visual identity.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">04<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">DEVELOP<\/h3>\r\n        <p class=\"ztm-s6-p\">Build the website, application or custom software system.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">05<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">TEST<\/h3>\r\n        <p class=\"ztm-s6-p\">Check functionality, responsiveness, security and user experience.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s6-card\">\r\n        <span class=\"ztm-s6-num\">06<\/span>\r\n        <div class=\"ztm-s6-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s6-h3\">LAUNCH<\/h3>\r\n        <p class=\"ztm-s6-p\">Deploy the approved solution and provide ongoing support.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <!-- Connecting visual element -->\r\n    <div style=\"text-align: center; margin-top: 40px; color: #cbd5e1; font-size: 0.8rem; letter-spacing: 2px;\">DISCOVER \u2192 PLAN \u2192 DESIGN \u2192 DEVELOP \u2192 TEST \u2192 LAUNCH<\/div>\r\n\\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fea373 elementor-widget elementor-widget-html\" data-id=\"8fea373\" 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  .ztm-s7 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #f8fafc; }\r\n  .ztm-s7-container { max-width: 1200px; margin: 0 auto; }\r\n  .ztm-s7-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; }\r\n  .ztm-s7-sub { text-align: center; color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s7-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }\r\n  .ztm-s7-card { background: #ffffff; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; transition: all 0.3s ease; }\r\n  .ztm-s7-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); }\r\n  .ztm-s7-img { height: 160px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }\r\n  .ztm-s7-img.c1 { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #0284c7; }\r\n  .ztm-s7-img.c2 { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }\r\n  .ztm-s7-img.c3 { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #9333ea; }\r\n  .ztm-s7-img.c4 { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }\r\n  .ztm-s7-info { padding: 20px; }\r\n  .ztm-s7-cat { font-size: 0.75rem; font-weight: 700; color: #05BFF9; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }\r\n  .ztm-s7-title { font-size: 1.1rem; font-weight: 600; color: #0f172a; margin: 0; }\r\n<\/style>\r\n\r\n<div class=\"ztm-s7\" id=\"work\">\r\n  <div class=\"ztm-s7-container\">\r\n    <h2 class=\"ztm-s7-h2\">Selected Digital Work<\/h2>\r\n    <p class=\"ztm-s7-sub\">A glimpse into the digital products and systems we've engineered.<\/p>\r\n    \r\n    <div class=\"ztm-s7-grid\">\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c1\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">E-Commerce<\/div><h4 class=\"ztm-s7-title\">Fashion Store<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c2\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Web App<\/div><h4 class=\"ztm-s7-title\">Inventory System<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c3\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Website<\/div><h4 class=\"ztm-s7-title\">Agency Portfolio<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c4\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Mobile App<\/div><h4 class=\"ztm-s7-title\">Food Delivery<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c1\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Dashboard<\/div><h4 class=\"ztm-s7-title\">Analytics Portal<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c2\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">E-Commerce<\/div><h4 class=\"ztm-s7-title\">Electronics Shop<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c3\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Web App<\/div><h4 class=\"ztm-s7-title\">Booking System<\/h4><\/div><\/div>\r\n      <div class=\"ztm-s7-card\"><div class=\"ztm-s7-img c4\">Project Screenshot<\/div><div class=\"ztm-s7-info\"><div class=\"ztm-s7-cat\">Website<\/div><h4 class=\"ztm-s7-title\">Real Estate<\/h4><\/div><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c88d3c elementor-widget elementor-widget-html\" data-id=\"9c88d3c\" 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  .ztm-s8 { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; padding: 80px 24px; background: #ffffff; }\r\n  .ztm-s8-container { max-width: 1200px; margin: 0 auto; }\r\n  .ztm-s8-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; }\r\n  .ztm-s8-sub { text-align: center; color: #64748b; font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n  .ztm-s8-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 60px; }\r\n  .ztm-s8-card { background: #f8fafc; border: none; border-radius: 16px; padding: 32px; text-align: center; transition: all 0.3s; }\r\n  .ztm-s8-card:hover { background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }\r\n  .ztm-s8-icon { width: 48px; height: 48px; background: #f0f9ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #05BFF9; }\r\n  .ztm-s8-icon svg { width: 24px; height: 24px; }\r\n  .ztm-s8-h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; color: #0f172a; }\r\n  .ztm-s8-p { font-size: 0.95rem; color: #64748b; margin: 0; }\r\n  .ztm-s8-reviews { background: #f8fafc; border-radius: 16px; padding: 40px; text-align: center; border: 2px dashed #e2e8f0; }\r\n  .ztm-s8-reviews p { color: #94a3b8; font-size: 0.875rem; margin: 0; }\r\n<\/style>\r\n\r\n<div class=\"ztm-s8\">\r\n  <div class=\"ztm-s8-container\">\r\n    <h2 class=\"ztm-s8-h2\">Why Build With ZTM?<\/h2>\r\n    <p class=\"ztm-s8-sub\">We combine technical expertise with a deep understanding of business goals.<\/p>\r\n    \r\n    <div class=\"ztm-s8-grid\">\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Business-First Approach<\/h3>\r\n        <p class=\"ztm-s8-p\">Every line of code serves a business objective.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Modern UI\/UX<\/h3>\r\n        <p class=\"ztm-s8-p\">Clean, intuitive interfaces that users love.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" ry=\"2\"><\/rect><rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"><\/rect><line x1=\"9\" y1=\"1\" x2=\"9\" y2=\"4\"><\/line><line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"4\"><\/line><line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"23\"><\/line><line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"23\"><\/line><line x1=\"20\" y1=\"9\" x2=\"23\" y2=\"9\"><\/line><line x1=\"20\" y1=\"14\" x2=\"23\" y2=\"14\"><\/line><line x1=\"1\" y1=\"9\" x2=\"4\" y2=\"9\"><\/line><line x1=\"1\" y1=\"14\" x2=\"4\" y2=\"14\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Custom Functionality<\/h3>\r\n        <p class=\"ztm-s8-p\">No cookie-cutter templates. Built for your needs.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Responsive Development<\/h3>\r\n        <p class=\"ztm-s8-p\">Flawless performance on every device and screen.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"><\/polyline><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"><\/line><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Scalable Solutions<\/h3>\r\n        <p class=\"ztm-s8-p\">Architecture that grows as your business grows.<\/p>\r\n      <\/div>\r\n      <div class=\"ztm-s8-card\">\r\n        <div class=\"ztm-s8-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg><\/div>\r\n        <h3 class=\"ztm-s8-h3\">Clear Project Scope<\/h3>\r\n        <p class=\"ztm-s8-p\">Transparent timelines, deliverables and pricing.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ztm-s8-reviews\">\r\n      <p>[ Insert Site Reviews Shortcode Here via Elementor Shortcode Widget ]<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d2f4c61 e-con e-atomic-element e-flexbox-base e-default-div e-a2c3dca \" data-id=\"d2f4c61\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d2f4c61\">\n    \t\t<div class=\"elementor-element elementor-element-bc83d87 elementor-widget elementor-widget-html\" data-id=\"bc83d87\" 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<!-- ZTM REVIEWS SLIDER WIDGET \u2014 Homepage\r\nHOW TO USE: Copy this entire code into an Elementor HTML widget on the Homepage page.\r\nThis widget is configured for data-review-category=\"all\".\r\nAll page widgets use the same Supabase reviews table; only the category filter changes.\r\n-->\r\n<div class=\"ztm-review-widget\" data-review-category=\"all\">\r\n  <style>\r\n    .ztm-review-widget{--zg:#b6ff4a;--zbg:#080b0a;--zcard:#111713;--zborder:rgba(182,255,74,.2);--ztext:#f5f8f2;--zmuted:#a1aaa2;color:var(--ztext);background:radial-gradient(ellipse at 50% 0%,rgba(126,211,33,.09),transparent 48%),var(--zbg);font-family:Inter,system-ui,-apple-system,sans-serif;padding:20px 14px 24px;border:1px solid rgba(182,255,74,.10);border-radius:16px;overflow:hidden}\r\n    .ztm-review-widget *{box-sizing:border-box}.ztm-review-widget .zw-wrap{max-width:760px;margin:auto}.ztm-review-widget .zw-head{text-align:center;margin:0 auto 12px}.ztm-review-widget .zw-kicker{display:inline-flex;gap:8px;align-items:center;color:var(--zg);font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;border:1px solid var(--zborder);border-radius:99px;padding:8px 12px;background:rgba(182,255,74,.04)}.ztm-review-widget .zw-kicker:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--zg);box-shadow:0 0 10px var(--zg)}\r\n    .ztm-review-widget h2{color:#fff;font-size:clamp(25px,4vw,38px);line-height:1.15;letter-spacing:-.7px;margin:15px 0 10px;font-weight:850}.ztm-review-widget .zw-head p{color:var(--zmuted);font-size:13px;line-height:1.7;margin:0}.ztm-review-widget .zw-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:17px}.ztm-review-widget .zw-stat{border:1px solid var(--zborder);border-radius:12px;padding:9px 15px;background:rgba(255,255,255,.025);font-size:11px;color:var(--zmuted)}.ztm-review-widget .zw-stat strong{font-size:17px;color:var(--zg);margin-right:5px}\r\n    .ztm-review-widget .zw-track{display:flex;gap:14px;align-items:stretch;transition:transform .55s cubic-bezier(.22,.8,.25,1);will-change:transform}.ztm-review-widget .zw-slider{overflow:hidden;padding:5px 0 10px;max-width:660px;margin:0 auto}.ztm-review-widget .zw-card{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;padding:clamp(17px,3vw,24px);background:linear-gradient(145deg,#151c16,#0c100d);border:1px solid #29352a;border-radius:17px;min-height:185px;animation:zwCardIn .38s ease both}.ztm-review-widget .zw-card.zw-active{border-color:rgba(182,255,74,.42);box-shadow:0 8px 24px rgba(126,211,33,.06)}@keyframes zwCardIn{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.ztm-review-widget .zw-cardtop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}.ztm-review-widget .zw-stars{color:var(--zg);letter-spacing:1px;font-size:13px;white-space:nowrap}.ztm-review-widget .zw-tag{font-size:9px;color:#d8ffb3;background:rgba(182,255,74,.07);border:1px solid rgba(182,255,74,.17);border-radius:6px;padding:5px 7px;line-height:1.4}.ztm-review-widget .zw-card h3{color:#fff;font-size:15px;line-height:1.45;margin:0 0 7px;overflow-wrap:anywhere}.ztm-review-widget .zw-copy{color:#c0c8bf;font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 13px}.ztm-review-widget .zw-author{margin-top:auto;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}.ztm-review-widget .zw-avatar{width:35px;height:35px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:rgba(182,255,74,.1);border:1px solid var(--zborder);color:var(--zg);font-weight:850}.ztm-review-widget .zw-name{color:#f0f5ed;font-size:11px;font-weight:800;overflow-wrap:anywhere}.ztm-review-widget .zw-date{color:#7f897f;font-size:10px;margin-top:4px}.ztm-review-widget .zw-controls{display:flex;justify-content:center;align-items:center;gap:11px;margin:3px 0 13px}.ztm-review-widget .zw-arrow{width:33px;height:33px;border-radius:50%;border:1px solid #344134;background:#111711;color:var(--zg);font-size:19px;cursor:pointer;transition:background .2s,transform .2s}.ztm-review-widget .zw-arrow:active{transform:scale(.93)}.ztm-review-widget .zw-arrow:hover{background:var(--zg);color:#10160b}.ztm-review-widget .zw-dots{display:flex;gap:6px;align-items:center}.ztm-review-widget .zw-dot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:#485347;cursor:pointer}.ztm-review-widget .zw-dot.active{width:20px;background:var(--zg)}\r\n    .ztm-review-widget .zw-empty,.ztm-review-widget .zw-status{border:1px dashed #344134;border-radius:15px;padding:24px 15px;text-align:center;color:var(--zmuted);font-size:13px;line-height:1.8}.ztm-review-widget .zw-empty strong{display:block;color:#f0f5ed;font-size:16px;margin-bottom:5px}.ztm-review-widget .zw-actions{text-align:center;margin-top:8px}.ztm-review-widget .zw-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:10px 15px;border:1px solid var(--zg);border-radius:10px;background:var(--zg);color:#10160b;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s}.ztm-review-widget .zw-btn:hover{background:#c8ff78;color:#10160b;transform:translateY(-1px)}.ztm-review-widget .zw-btn.secondary{background:transparent;color:var(--zg);border-color:var(--zborder)}.ztm-review-widget .zw-form-panel{max-width:760px;margin:24px auto 0;padding:clamp(17px,3vw,27px);background:linear-gradient(145deg,#121813,#0b0e0c);border:1px solid var(--zborder);border-radius:18px;scroll-margin-top:30px;animation:zwReveal .25s ease}.ztm-review-widget .zw-form-panel[hidden]{display:none!important}@keyframes zwReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}.ztm-review-widget .zw-form-title{text-align:center;font-size:22px;margin:0 0 6px;color:#fff}.ztm-review-widget .zw-form-intro{text-align:center;color:var(--zmuted);font-size:12px;line-height:1.6;margin:0 0 20px}.ztm-review-widget .zw-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.ztm-review-widget .zw-field{min-width:0}.ztm-review-widget .zw-full{grid-column:1\/-1}.ztm-review-widget label{display:block;color:#e5ece4;font-size:11px;font-weight:750;margin-bottom:7px}.ztm-review-widget input,.ztm-review-widget select,.ztm-review-widget textarea{display:block;width:100%;max-width:100%;background:#080c09;border:1px solid #29332b;color:#f5f8f2;border-radius:10px;padding:12px;font:inherit;font-size:13px;outline:none}.ztm-review-widget input:focus,.ztm-review-widget select:focus,.ztm-review-widget textarea:focus{border-color:var(--zg);box-shadow:0 0 0 3px rgba(182,255,74,.07)}.ztm-review-widget textarea{min-height:105px;resize:vertical}.ztm-review-widget .zw-rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.ztm-review-widget .zw-starbtn{border:0;background:none;color:#465044;padding:0;font-size:30px;line-height:1;cursor:pointer}.ztm-review-widget .zw-starbtn.active{color:var(--zg)}.ztm-review-widget .zw-ratinglabel{font-size:11px;color:var(--zmuted);margin-left:4px}.ztm-review-widget .zw-formnote{color:#879187;font-size:10px;line-height:1.7;margin:11px 0 0}.ztm-review-widget .zw-message{display:none;margin-top:12px;padding:11px;border-radius:10px;font-size:12px;line-height:1.6}.ztm-review-widget .zw-message.success{display:block;color:#d8ffb3;background:rgba(126,211,33,.09);border:1px solid rgba(126,211,33,.25)}.ztm-review-widget .zw-message.error{display:block;color:#ffb8b8;background:rgba(255,70,70,.08);border:1px solid rgba(255,70,70,.2)}.ztm-review-widget .zw-loading{padding:25px;text-align:center;color:var(--zmuted);font-size:12px}\r\n    @media(max-width:580px){.ztm-review-widget{padding:17px 10px 20px;border-radius:13px}.ztm-review-widget .zw-card{flex-basis:100%;padding:16px;min-height:170px}.ztm-review-widget .zw-track{gap:12px}.ztm-review-widget .zw-grid{grid-template-columns:1fr}.ztm-review-widget .zw-full{grid-column:auto}.ztm-review-widget .zw-form-panel{padding:17px 13px}}\r\n  <\/style>\r\n  <div class=\"zw-wrap\">\r\n    <header class=\"zw-head\">\r\n      <h2 style=\"font-size:clamp(22px,3vw,29px);letter-spacing:-.5px;margin:0;color:#fff;font-weight:800\">Reviews<\/h2>\r\n    <\/header>\r\n    <div class=\"zw-results\"><div class=\"zw-loading\">Loading ZTM reviews\u2026<\/div><\/div>\r\n    <div class=\"zw-controls\" hidden><button type=\"button\" class=\"zw-arrow zw-prev\" aria-label=\"Previous review\">\u2039<\/button><div class=\"zw-dots\"><\/div><button type=\"button\" class=\"zw-arrow zw-next\" aria-label=\"Next review\">\u203a<\/button><\/div>\r\n    <div class=\"zw-actions\"><button type=\"button\" class=\"zw-btn zw-open\">\u270d Submit Your Review<\/button><\/div>\r\n    <section class=\"zw-form-panel\" hidden>\r\n      <h3 class=\"zw-form-title\">Share Your Experience<\/h3><p class=\"zw-form-intro\">Please share an honest review based on your own experience.<\/p>\r\n      <form class=\"zw-form\"><div class=\"zw-grid\">\r\n        <div class=\"zw-field\"><label>Your Name *<\/label><input class=\"zw-name\" name=\"name\" type=\"text\" minlength=\"2\" maxlength=\"100\" autocomplete=\"name\" required placeholder=\"Enter your name\"><\/div>\r\n        <div class=\"zw-field\"><label>Email <span style=\"color:#879187;font-weight:400\">(Optional)<\/span><\/label><input class=\"zw-email\" name=\"email\" type=\"email\" maxlength=\"254\" autocomplete=\"email\" placeholder=\"you@example.com\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>What are you reviewing? *<\/label><select class=\"zw-service\" name=\"review_for\" required><option value=\"general\">ZTM \u2014 General Experience<\/option><option value=\"ad_agency\">Ad Agency & Creative Services<\/option><option value=\"web_development\">Web Development<\/option><option value=\"ai_tools\">Apps & AI Tools<\/option><option value=\"digital_products\">Digital Products & Courses<\/option><option value=\"ztm_brand\">ZTM Overall<\/option><\/select><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Your Rating *<\/label><div class=\"zw-rating\"><button type=\"button\" class=\"zw-starbtn\" data-rating=\"1\" aria-label=\"1 star\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"2\" aria-label=\"2 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"3\" aria-label=\"3 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"4\" aria-label=\"4 stars\">\u2605<\/button><button type=\"button\" class=\"zw-starbtn\" data-rating=\"5\" aria-label=\"5 stars\">\u2605<\/button><span class=\"zw-ratinglabel\">Select your rating<\/span><\/div><input class=\"zw-rating-value\" type=\"hidden\" value=\"0\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Review Title (Optional)<\/label><input class=\"zw-title\" name=\"review_title\" type=\"text\" maxlength=\"160\" placeholder=\"Summarize your experience\"><\/div>\r\n        <div class=\"zw-field zw-full\"><label>Your Review *<\/label><textarea class=\"zw-text\" name=\"review_text\" minlength=\"10\" maxlength=\"3000\" required placeholder=\"Tell us about your genuine experience...\"><\/textarea><\/div>\r\n        <div class=\"zw-field zw-full\"><button type=\"submit\" class=\"zw-btn zw-submit\">Submit Review \u2192<\/button><button type=\"button\" class=\"zw-btn secondary zw-close\" style=\"margin-left:7px\">Close<\/button><p class=\"zw-formnote\">Your email is optional and will not be displayed publicly. Please do not include private or sensitive information.<\/p><div class=\"zw-message\" role=\"status\" aria-live=\"polite\"><\/div><\/div>\r\n      <\/div><\/form>\r\n    <\/section>\r\n  <\/div>\r\n  <script>\r\n  (()=>{\r\n    const root=document.currentScript&&document.currentScript.closest('.ztm-review-widget');\r\n    if(!root||root.dataset.ready==='1')return;root.dataset.ready='1';\r\n    const URL='https:\/\/zwwmulpydkmfqimgpttw.supabase.co';\r\n    const KEY='sb_publishable_KhUUCbcOtXDTzIywg_Nl3Q_QJQRFVM8';\r\n    const names={ad_agency:'Ad Agency',web_development:'Web Development',ai_tools:'Apps & AI Tools',digital_products:'Products & Courses',ztm_brand:'ZTM Overall',general:'General Experience'};\r\n    const category=(root.dataset.reviewCategory||'all').trim();\r\n    const $=s=>root.querySelector(s);let client=null,reviews=[],index=0,rating=0,touchX=0,touchY=0;\r\n    const esc=v=>String(v??'').replace(\/[&<>\"']\/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]));\r\n    const results=$('.zw-results'),controls=$('.zw-controls'),form=$('.zw-form'),panel=$('.zw-form-panel'),open=$('.zw-open'),service=$('.zw-service'),msg=$('.zw-message');\r\n    if(names[category]){service.value=category;service.disabled=true;service.style.opacity='.85';}\r\n    function setRating(n){rating=n;root.querySelectorAll('.zw-starbtn').forEach(b=>{b.classList.toggle('active',+b.dataset.rating<=n);b.setAttribute('aria-pressed',String(+b.dataset.rating===n))});$('.zw-ratinglabel').textContent=n?`${n} out of 5 stars`:'Select your rating'}\r\n    root.querySelectorAll('.zw-starbtn').forEach(b=>b.addEventListener('click',()=>setRating(+b.dataset.rating)));\r\n    function date(v){if(!v)return '';const d=new Date(v);return Number.isNaN(d.getTime())?'':d.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}\r\n    function visible(){return category==='all'?reviews:reviews.filter(r=>r.review_for===category)}\r\n    function render(){const list=visible();index=Math.max(0,Math.min(index,Math.max(0,list.length-1)));if(!list.length){controls.hidden=true;results.innerHTML='<div class=\"zw-empty\"><strong>No reviews here yet.<\/strong>Be the first to share your genuine experience.<\/div>';return}\r\n      results.innerHTML='<div class=\"zw-slider\"><div class=\"zw-track\">'+list.map((r,i)=>{const stars='\u2605'.repeat(Math.max(0,Math.min(5,+r.rating)))+'\u2606'.repeat(5-Math.max(0,Math.min(5,+r.rating)));return `<article class=\"zw-card\" data-card=\"${i}\"><div class=\"zw-cardtop\"><span class=\"zw-stars\" aria-label=\"${+r.rating} out of 5 stars\">${stars}<\/span><span class=\"zw-tag\">${esc(names[r.review_for]||'ZTM')}<\/span><\/div><h3>${esc(r.review_title||'Customer Experience')}<\/h3><p class=\"zw-copy\">${esc(r.review_text)}<\/p><div class=\"zw-author\"><div class=\"zw-avatar\">${esc((r.name||'Z').trim().charAt(0).toUpperCase())}<\/div><div><div class=\"zw-name\">${esc(r.name)}<\/div><div class=\"zw-date\">${esc(date(r.created_at))}<\/div><\/div><\/div><\/article>`}).join('')+'<\/div><\/div>';\r\n      controls.hidden=list.length<2;$('.zw-dots').innerHTML=list.map((_,i)=>`<button type=\"button\" class=\"zw-dot ${i===index?'active':''}\" data-index=\"${i}\" aria-label=\"Go to review ${i+1}\"><\/button>`).join('');$('.zw-dots').querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>{index=+b.dataset.index;update()}));update();const slider=$('.zw-slider');slider.addEventListener('touchstart',e=>{if(e.touches.length){touchX=e.touches[0].clientX;touchY=e.touches[0].clientY}},{passive:true});slider.addEventListener('touchend',e=>{if(!e.changedTouches.length)return;const dx=e.changedTouches[0].clientX-touchX,dy=e.changedTouches[0].clientY-touchY;if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy))move(dx<0?1:-1)},{passive:true})}\r\n    function update(){const track=$('.zw-track');if(!track)return;const cards=[...track.children],card=cards[index];if(!card)return;const target=card.offsetLeft+card.offsetWidth\/2-track.parentElement.clientWidth\/2,max=Math.max(0,track.scrollWidth-track.parentElement.clientWidth);track.style.transform=`translateX(${-Math.max(0,Math.min(target,max))}px)`;cards.forEach((c,i)=>c.classList.toggle('zw-active',i===index));$('.zw-dots').querySelectorAll('button').forEach((b,i)=>b.classList.toggle('active',i===index))}\r\n    function move(d){const list=visible();if(list.length<2)return;index=(index+d+list.length)%list.length;update()}\r\n    $('.zw-prev').addEventListener('click',()=>move(-1));$('.zw-next').addEventListener('click',()=>move(1));window.addEventListener('resize',()=>{clearTimeout(root._zwResize);root._zwResize=setTimeout(update,150)});\r\n    function showForm(){panel.hidden=false;open.textContent='\u2715 Close Review Form';open.setAttribute('aria-expanded','true');if(names[category])service.value=category;panel.scrollIntoView({behavior:'smooth',block:'start'});setTimeout(()=>$('.zw-form .zw-name').focus({preventScroll:true}),350)}\r\n    function hideForm(){panel.hidden=true;open.textContent='\u270d Submit Your Review';open.setAttribute('aria-expanded','false')}\r\n    open.setAttribute('aria-expanded','false');open.addEventListener('click',()=>panel.hidden?showForm():hideForm());$('.zw-close').addEventListener('click',hideForm);\r\n    async function load(){if(!client)return;let q=client.from('reviews').select('id,name,rating,review_title,review_text,review_for,created_at').eq('status','approved').order('created_at',{ascending:false}).limit(300);if(category!=='all'&&names[category])q=q.eq('review_for',category);const {data,error}=await q;if(error){console.error('ZTM slider load error:',error);if(!reviews.length)results.innerHTML='<div class=\"zw-empty\"><strong>Reviews could not be loaded.<\/strong>Please refresh the page in a moment.<\/div>';return}reviews=data||[];render()}\r\n    form.addEventListener('submit',async e=>{e.preventDefault();msg.className='zw-message';msg.textContent='';if(!client){msg.textContent='Connection is not ready. Please refresh the page.';msg.className='zw-message error';return}const name=$('.zw-form .zw-name').value.trim(),email=$('.zw-email').value.trim(),text=$('.zw-text').value.trim(),title=$('.zw-title').value.trim(),serviceValue=category!=='all'&&names[category]?category:service.value;if(rating<1||rating>5){msg.textContent='Please select a star rating first.';msg.className='zw-message error';return}if(name.length<2||text.length<10){msg.textContent='Enter your name and a review of at least 10 characters.';msg.className='zw-message error';return}if(email&&!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)){msg.textContent='Enter a valid email address or leave it blank.';msg.className='zw-message error';return}const submit=$('.zw-submit');submit.disabled=true;submit.textContent='Submitting\u2026';try{const {error}=await client.from('reviews').insert({name,email:email||null,review_for:serviceValue,rating,review_title:title||null,review_text:text,status:'approved'});if(error)throw error;form.reset();setRating(0);if(names[category])service.value=category;msg.textContent='Thank you! Your review has been published.';msg.className='zw-message success';await load()}catch(err){console.error('ZTM review submit error:',err);msg.textContent='Could not submit: '+(err&&err.message?err.message:'Unknown error')+' Please check Supabase table permissions\/policies.';msg.className='zw-message error'}finally{submit.disabled=false;submit.textContent='Submit Review \u2192'}});\r\n    async function start(){try{if(!window.supabase){await new Promise((resolve,reject)=>{const s=document.createElement('script');s.src='https:\/\/cdn.jsdelivr.net\/npm\/@supabase\/supabase-js@2';s.onload=resolve;s.onerror=()=>reject(new Error('Supabase client failed to load'));document.head.appendChild(s)})}client=window.supabase.createClient(URL,KEY);await load();setInterval(load,20000)}catch(e){console.error('ZTM slider connection error:',e);results.innerHTML='<div class=\"zw-empty\"><strong>Could not connect to ZTM Reviews.<\/strong>Please refresh the page later.<\/div>'}}\r\n    start();\r\n  })();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-33f8f00 e-con e-atomic-element e-flexbox-base e-default-div e-36c5bc9 \" data-id=\"33f8f00\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"33f8f00\">\n    \t\t<div class=\"elementor-element elementor-element-36567cd elementor-widget elementor-widget-html\" data-id=\"36567cd\" 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    \/* =========================================\r\n       GLOBAL VARIABLES & RESET (needed for below sections)\r\n       ========================================= *\/\r\n    :root {\r\n        --ztm-blue: #05BFF9;\r\n        --ztm-green: #8EF012;\r\n        --ztm-dark: #0f172a;\r\n        --ztm-gray: #64748b;\r\n        --ztm-light: #f8fafc;\r\n        --ztm-border: #e2e8f0;\r\n    }\r\n    * { margin: 0; padding: 0; box-sizing: border-box; }\r\n    body {\r\n        font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n        color: var(--ztm-dark);\r\n        background-color: #ffffff;\r\n        line-height: 1.6;\r\n        overflow-x: hidden;\r\n    }\r\n    body.modal-open { overflow: hidden; }\r\n    a { text-decoration: none; color: inherit; }\r\n    button { font-family: inherit; cursor: pointer; border: none; }\r\n\r\n    .ztm-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }\r\n    .ztm-section { padding: 80px 0; }\r\n    .ztm-section-alt { background-color: var(--ztm-light); }\r\n\r\n    \/* =========================================\r\n       MODAL & MULTI-STEP FORM CSS\r\n       ========================================= *\/\r\n    .ztm-modal-overlay {\r\n        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;\r\n        background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px);\r\n        z-index: 9999; align-items: center; justify-content: center; padding: 20px;\r\n    }\r\n    .ztm-modal-overlay.active { display: flex; }\r\n    .ztm-modal-content {\r\n        background: #0f172a; border-radius: 24px; max-width: 650px; width: 100%;\r\n        max-height: 90vh; overflow-y: auto; position: relative;\r\n        border: 1px solid #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n        animation: modalSlide 0.3s ease;\r\n    }\r\n    @keyframes modalSlide { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }\r\n    \r\n    .ztm-modal-close {\r\n        position: absolute; top: 20px; right: 20px; background: #334155; border: none;\r\n        width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #94a3b8;\r\n        font-size: 1.25rem; display: flex; align-items: center; justify-content: center;\r\n        transition: all 0.3s; z-index: 10;\r\n    }\r\n    .ztm-modal-close:hover { background: #475569; color: #ffffff; }\r\n\r\n    .ztm-form-header {\r\n        padding: 32px 32px 24px; border-bottom: 1px solid #1e293b;\r\n        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);\r\n    }\r\n    .ztm-form-header h2 { color: #ffffff; font-size: 1.5rem; margin-bottom: 8px; }\r\n    .ztm-form-header p { color: #94a3b8; font-size: 0.95rem; margin: 0; }\r\n\r\n    .ztm-form-body { padding: 32px; }\r\n    .ztm-form-step { display: none; animation: fadeIn 0.3s ease; }\r\n    .ztm-form-step.active { display: block; }\r\n    @keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }\r\n\r\n    .ztm-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }\r\n    .ztm-progress-dot {\r\n        width: 32px; height: 4px; border-radius: 2px; background: #334155; transition: all 0.3s;\r\n    }\r\n    .ztm-progress-dot.active { background: var(--ztm-blue); width: 48px; }\r\n    .ztm-progress-dot.completed { background: var(--ztm-green); }\r\n\r\n    .ztm-form-group { margin-bottom: 20px; }\r\n    .ztm-form-label { display: block; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; margin-bottom: 8px; }\r\n    .ztm-form-label .req { color: #ef4444; }\r\n    .ztm-form-input, .ztm-form-select, .ztm-form-textarea {\r\n        width: 100%; padding: 12px 16px; border: 1px solid #334155; border-radius: 10px;\r\n        font-size: 0.95rem; color: #f8fafc; background: #1e293b; transition: all 0.3s; font-family: inherit;\r\n    }\r\n    .ztm-form-input:focus, .ztm-form-select:focus, .ztm-form-textarea:focus {\r\n        outline: none; border-color: var(--ztm-blue); box-shadow: 0 0 0 3px rgba(5, 191, 249, 0.15);\r\n    }\r\n    .ztm-form-textarea { min-height: 100px; resize: vertical; }\r\n    .ztm-form-hint { font-size: 0.8rem; color: #64748b; margin-top: 6px; }\r\n    .ztm-form-error { font-size: 0.8rem; color: #ef4444; margin-top: 6px; display: none; }\r\n    .ztm-form-group.error .ztm-form-input, .ztm-form-group.error .ztm-form-select, .ztm-form-group.error .ztm-form-textarea { border-color: #ef4444; }\r\n    .ztm-form-group.error .ztm-form-error { display: block; }\r\n\r\n    .ztm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\r\n    \r\n    .ztm-form-nav { display: flex; justify-content: space-between; margin-top: 32px; gap: 16px; }\r\n    .ztm-btn-form {\r\n        padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;\r\n        transition: all 0.3s; display: inline-flex; align-items: center; gap: 8px;\r\n    }\r\n    .ztm-btn-back { background: #334155; color: #f8fafc; }\r\n    .ztm-btn-back:hover { background: #475569; }\r\n    .ztm-btn-next { background: var(--ztm-blue); color: #0f172a; margin-left: auto; }\r\n    .ztm-btn-next:hover { background: #0ea5e9; transform: translateY(-1px); }\r\n    .ztm-btn-submit { background: var(--ztm-green); color: #0f172a; width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px; }\r\n    .ztm-btn-submit:hover { background: #7dd30e; transform: translateY(-1px); }\r\n\r\n    .ztm-review-box {\r\n        background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 20px; margin-bottom: 24px;\r\n    }\r\n    .ztm-review-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #334155; font-size: 0.9rem; }\r\n    .ztm-review-item:last-child { border-bottom: none; }\r\n    .ztm-review-label { color: #94a3b8; }\r\n    .ztm-review-value { color: #f8fafc; font-weight: 500; text-align: right; max-width: 60%; }\r\n\r\n    .ztm-success-state { text-align: center; padding: 40px 20px; display: none; }\r\n    .ztm-success-state.active { display: block; }\r\n    .ztm-success-icon {\r\n        width: 64px; height: 64px; background: rgba(142, 240, 18, 0.1); color: var(--ztm-green);\r\n        border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n        margin: 0 auto 24px; font-size: 2rem;\r\n    }\r\n    .ztm-success-state h3 { color: #ffffff; font-size: 1.5rem; margin-bottom: 12px; }\r\n    .ztm-success-state p { color: #94a3b8; margin-bottom: 32px; line-height: 1.6; }\r\n    .ztm-success-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\r\n    .ztm-btn-whatsapp {\r\n        background: #25D366; color: #ffffff; padding: 14px 28px; border-radius: 10px;\r\n        font-weight: 600; display: inline-flex; align-items: center; gap: 8px;\r\n        transition: all 0.3s; text-decoration: none;\r\n    }\r\n    .ztm-btn-whatsapp:hover { background: #20ba5a; transform: translateY(-1px); }\r\n    .ztm-btn-whatsapp svg { width: 20px; height: 20px; }\r\n    .ztm-btn-close-success {\r\n        background: #334155; color: #f8fafc; padding: 14px 28px; border-radius: 10px;\r\n        font-weight: 600; transition: all 0.3s;\r\n    }\r\n    .ztm-btn-close-success:hover { background: #475569; }\r\n\r\n    \/* =========================================\r\n       FAQ CSS\r\n       ========================================= *\/\r\n    .ztm-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: 16px; letter-spacing: -0.01em; }\r\n    .ztm-subtitle { text-align: center; color: var(--ztm-gray); font-size: 1.125rem; max-width: 600px; margin: 0 auto 48px; }\r\n    .ztm-faq-item {\r\n        background: #ffffff; border: 1px solid var(--ztm-border); border-radius: 12px;\r\n        margin-bottom: 16px; overflow: hidden; transition: all 0.3s;\r\n    }\r\n    .ztm-faq-q {\r\n        padding: 20px 24px; font-weight: 600; cursor: pointer; display: flex;\r\n        justify-content: space-between; align-items: center; color: var(--ztm-dark);\r\n    }\r\n    .ztm-faq-a { padding: 0 24px 20px; color: var(--ztm-gray); display: none; line-height: 1.6; }\r\n    .ztm-faq-item.active .ztm-faq-a { display: block; }\r\n    .ztm-faq-item.active .ztm-faq-icon { transform: rotate(45deg); }\r\n    .ztm-faq-icon { transition: transform 0.3s ease; color: var(--ztm-blue); font-size: 1.5rem; line-height: 1; }\r\n\r\n    \/* =========================================\r\n       CTA BOX CSS\r\n       ========================================= *\/\r\n    .ztm-cta-box {\r\n        background: linear-gradient(135deg, var(--ztm-dark) 0%, #1e293b 100%);\r\n        border-radius: 24px; padding: 60px 40px; text-align: center; color: #ffffff;\r\n        position: relative; overflow: hidden; margin-top: 60px;\r\n    }\r\n    .ztm-cta-box::before {\r\n        content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px;\r\n        background: radial-gradient(circle, rgba(5,191,249,0.15) 0%, transparent 70%); border-radius: 50%;\r\n    }\r\n    .ztm-cta-box h2 { color: #ffffff; position: relative; z-index: 2; font-size: 2rem; margin-bottom: 16px; }\r\n    .ztm-cta-box p { color: #94a3b8; position: relative; z-index: 2; font-size: 1.125rem; margin-bottom: 32px; }\r\n    .ztm-cta-btn {\r\n        background: var(--ztm-green); color: var(--ztm-dark); padding: 16px 40px; border-radius: 50px;\r\n        font-weight: 700; text-decoration: none; display: inline-block; transition: all 0.3s;\r\n        position: relative; z-index: 2; font-size: 1.1rem; border: none; cursor: pointer;\r\n    }\r\n    .ztm-cta-btn:hover { background: #7dd30e; transform: translateY(-2px); }\r\n\r\n    \/* =========================================\r\n       RESPONSIVE DESIGN (relevant parts only)\r\n       ========================================= *\/\r\n    @media (max-width: 768px) {\r\n        .ztm-section { padding: 60px 0; }\r\n        .ztm-form-row { grid-template-columns: 1fr; }\r\n        .ztm-modal-content { max-height: 95vh; border-radius: 16px; }\r\n        .ztm-form-body { padding: 24px; }\r\n        .ztm-cta-box { padding: 40px 24px; }\r\n    }\r\n<\/style>\r\n\r\n<!-- FAQ SECTION -->\r\n<section class=\"ztm-section ztm-section-alt\">\r\n    <div class=\"ztm-container\">\r\n        <h2 class=\"ztm-h2\">Frequently Asked Questions<\/h2>\r\n        <p class=\"ztm-subtitle\">Everything you need to know before starting your project.<\/p>\r\n\r\n        <div class=\"ztm-faq-list\" style=\"max-width: 800px; margin: 0 auto;\">\r\n            <div class=\"ztm-faq-item\">\r\n                <div class=\"ztm-faq-q\">\r\n                    <span>How much does a website cost?<\/span>\r\n                    <span class=\"ztm-faq-icon\">+<\/span>\r\n                <\/div>\r\n                <div class=\"ztm-faq-a\">Pricing depends on the scope of your project \u2014 the number of pages, features, and complexity involved. Once we understand your requirements, we'll give you a clear, upfront quote with no hidden costs.<\/div>\r\n            <\/div>\r\n            <div class=\"ztm-faq-item\">\r\n                <div class=\"ztm-faq-q\">\r\n                    <span>How long does development take?<\/span>\r\n                    <span class=\"ztm-faq-icon\">+<\/span>\r\n                <\/div>\r\n                <div class=\"ztm-faq-a\">Most business websites take 1-3 weeks depending on complexity, while custom web applications can take longer. We'll give you a realistic timeline after reviewing your project details.<\/div>\r\n            <\/div>\r\n            <div class=\"ztm-faq-item\">\r\n                <div class=\"ztm-faq-q\">\r\n                    <span>Can you build custom functionality?<\/span>\r\n                    <span class=\"ztm-faq-icon\">+<\/span>\r\n                <\/div>\r\n                <div class=\"ztm-faq-a\">Yes \u2014 from booking systems and payment gateways to custom dashboards and automation tools, we build features tailored specifically to your business workflow.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- CTA SECTION -->\r\n        <div class=\"ztm-cta-box\">\r\n            <h2>Have a Website, App or Software Idea?<\/h2>\r\n            <p>Tell us what you want to build. We'll turn your vision into a powerful digital reality.<\/p>\r\n            <button class=\"ztm-cta-btn ztm-open-modal\">Start Your Project \u2192<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n<!-- END FAQ + CTA SECTION -->\r\n\r\n<!-- PROJECT INQUIRY MODAL -->\r\n<div class=\"ztm-modal-overlay\" id=\"projectModal\">\r\n    <div class=\"ztm-modal-content\">\r\n        <button class=\"ztm-modal-close\" id=\"modalClose\">\u00d7<\/button>\r\n        \r\n        <div class=\"ztm-form-header\">\r\n            <h2>Start Your Project<\/h2>\r\n            <p>Tell us about your project and we'll get back to you within 24 hours<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"ztm-form-body\">\r\n            <div class=\"ztm-progress\">\r\n                <div class=\"ztm-progress-dot active\" data-step=\"1\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"2\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"3\"><\/div>\r\n                <div class=\"ztm-progress-dot\" data-step=\"4\"><\/div>\r\n            <\/div>\r\n\r\n            <form id=\"projectForm\">\r\n                <!-- Step 1: Contact Information -->\r\n                <div class=\"ztm-form-step active\" data-step=\"1\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Full Name <span class=\"req\">*<\/span><\/label>\r\n                        <input type=\"text\" class=\"ztm-form-input\" name=\"fullName\" required>\r\n                        <div class=\"ztm-form-error\">Please enter your full name<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-row\">\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">WhatsApp Number <span class=\"req\">*<\/span><\/label>\r\n                            <input type=\"tel\" class=\"ztm-form-input\" name=\"whatsapp\" placeholder=\"03XX XXXXXXX\" required>\r\n                            <div class=\"ztm-form-error\">Please enter a valid WhatsApp number<\/div>\r\n                        <\/div>\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Email<\/label>\r\n                            <input type=\"email\" class=\"ztm-form-input\" name=\"email\">\r\n                            <div class=\"ztm-form-error\">Please enter a valid email<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Business Category<\/label>\r\n                        <select class=\"ztm-form-select\" name=\"businessCategory\">\r\n                            <option value=\"\">Select category<\/option>\r\n                            <option>E-Commerce \/ Retail<\/option>\r\n                            <option>Healthcare \/ Medical<\/option>\r\n                            <option>Education \/ Training<\/option>\r\n                            <option>Real Estate<\/option>\r\n                            <option>Restaurant \/ Food<\/option>\r\n                            <option>Finance \/ Banking<\/option>\r\n                            <option>Technology \/ SaaS<\/option>\r\n                            <option>Professional Services<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 2: Project Details -->\r\n                <div class=\"ztm-form-step\" data-step=\"2\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Type <span class=\"req\">*<\/span><\/label>\r\n                        <select class=\"ztm-form-select\" name=\"projectType\" required>\r\n                            <option value=\"\">Select project type<\/option>\r\n                            <option>Business Website<\/option>\r\n                            <option>E-Commerce Store<\/option>\r\n                            <option>Web Application<\/option>\r\n                            <option>Mobile App<\/option>\r\n                            <option>Landing Page<\/option>\r\n                            <option>Portfolio Website<\/option>\r\n                            <option>Blog \/ News Site<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                        <div class=\"ztm-form-error\">Please select a project type<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Goal <span class=\"req\">*<\/span><\/label>\r\n                        <select class=\"ztm-form-select\" name=\"projectGoal\" required>\r\n                            <option value=\"\">Select your goal<\/option>\r\n                            <option>Launch new business online<\/option>\r\n                            <option>Improve existing website<\/option>\r\n                            <option>Automate business processes<\/option>\r\n                            <option>Increase sales \/ conversions<\/option>\r\n                            <option>Build custom software<\/option>\r\n                            <option>Other<\/option>\r\n                        <\/select>\r\n                        <div class=\"ztm-form-error\">Please select your project goal<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Project Description <span class=\"req\">*<\/span><\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"projectDescription\" placeholder=\"Briefly describe what you want to build...\" required><\/textarea>\r\n                        <div class=\"ztm-form-error\">Please describe your project<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 3: Requirements -->\r\n                <div class=\"ztm-form-step\" data-step=\"3\">\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Required Pages (if website)<\/label>\r\n                        <input type=\"text\" class=\"ztm-form-input\" name=\"requiredPages\" placeholder=\"e.g., Home, About, Services, Contact\">\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Required Features<\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"requiredFeatures\" placeholder=\"List any specific features you need (payment gateway, booking system, etc.)\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-row\">\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Budget Range<\/label>\r\n                            <select class=\"ztm-form-select\" name=\"budget\">\r\n                                <option value=\"\">Select budget<\/option>\r\n                                <option>Under PKR 50,000<\/option>\r\n                                <option>PKR 50,000 - 100,000<\/option>\r\n                                <option>PKR 100,000 - 250,000<\/option>\r\n                                <option>PKR 250,000 - 500,000<\/option>\r\n                                <option>PKR 500,000+<\/option>\r\n                                <option>Not decided yet<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"ztm-form-group\">\r\n                            <label class=\"ztm-form-label\">Timeline<\/label>\r\n                            <select class=\"ztm-form-select\" name=\"timeline\">\r\n                                <option value=\"\">Select timeline<\/option>\r\n                                <option>ASAP (1-2 weeks)<\/option>\r\n                                <option>1 month<\/option>\r\n                                <option>2-3 months<\/option>\r\n                                <option>Flexible<\/option>\r\n                                <option>Not decided yet<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Reference Website<\/label>\r\n                        <input type=\"url\" class=\"ztm-form-input\" name=\"referenceWebsite\" placeholder=\"https:\/\/example.com\">\r\n                        <div class=\"ztm-form-hint\">Any website you like for design inspiration<\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-next\">Next \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Step 4: Review & Submit -->\r\n                <div class=\"ztm-form-step\" data-step=\"4\">\r\n                    <div class=\"ztm-review-box\">\r\n                        <h3 style=\"color: #ffffff; margin-bottom: 16px; font-size: 1.1rem;\">Review Your Information<\/h3>\r\n                        <div id=\"reviewContent\"><\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-group\">\r\n                        <label class=\"ztm-form-label\">Additional Requirements<\/label>\r\n                        <textarea class=\"ztm-form-textarea\" name=\"additionalRequirements\" placeholder=\"Any other details or special requirements...\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <div class=\"ztm-form-nav\">\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-back\">\u2190 Back<\/button>\r\n                        <button type=\"button\" class=\"ztm-btn-form ztm-btn-submit\" id=\"submitForm\">Send to WhatsApp \u2192<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/form>\r\n\r\n            <!-- Success State -->\r\n            <div class=\"ztm-success-state\" id=\"successState\">\r\n                <div class=\"ztm-success-icon\">\u2713<\/div>\r\n                <h3>Your project brief is ready!<\/h3>\r\n                <p>Click the button below to open WhatsApp with your project details. Just press Send to contact us.<\/p>\r\n                <div class=\"ztm-success-btns\">\r\n                    <a href=\"#\" class=\"ztm-btn-whatsapp\" id=\"whatsappLink\" target=\"_blank\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n                        Open WhatsApp\r\n                    <\/a>\r\n                    <button type=\"button\" class=\"ztm-btn-close-success\" id=\"closeSuccess\">Close<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    \/\/ Modal Elements\r\n    const modal = document.getElementById('projectModal');\r\n    const modalClose = document.getElementById('modalClose');\r\n    const form = document.getElementById('projectForm');\r\n    const successState = document.getElementById('successState');\r\n    const submitBtn = document.getElementById('submitForm');\r\n    const whatsappLink = document.getElementById('whatsappLink');\r\n    const closeSuccess = document.getElementById('closeSuccess');\r\n\r\n    let currentStep = 1;\r\n    const totalSteps = 4;\r\n    let whatsappURL = '';\r\n\r\n    \/\/ FAQ Accordion Toggle\r\n    document.querySelectorAll('.ztm-faq-q').forEach(q => {\r\n        q.addEventListener('click', () => {\r\n            const item = q.closest('.ztm-faq-item');\r\n            item.classList.toggle('active');\r\n        });\r\n    });\r\n\r\n    \/\/ Open Modal\r\n    document.querySelectorAll('.ztm-open-modal').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            openModal();\r\n        });\r\n    });\r\n\r\n    function openModal() {\r\n        modal.classList.add('active');\r\n        document.body.classList.add('modal-open');\r\n        resetForm();\r\n    }\r\n\r\n    function closeModal() {\r\n        modal.classList.remove('active');\r\n        document.body.classList.remove('modal-open');\r\n    }\r\n\r\n    \/\/ Close Modal\r\n    modalClose.addEventListener('click', closeModal);\r\n    modal.addEventListener('click', (e) => {\r\n        if (e.target === modal) closeModal();\r\n    });\r\n    document.addEventListener('keydown', (e) => {\r\n        if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();\r\n    });\r\n\r\n    \/\/ Form Navigation\r\n    document.addEventListener('click', (e) => {\r\n        if (e.target.classList.contains('ztm-btn-next')) {\r\n            if (validateStep(currentStep)) {\r\n                currentStep++;\r\n                showStep(currentStep);\r\n            }\r\n        }\r\n        if (e.target.classList.contains('ztm-btn-back')) {\r\n            currentStep--;\r\n            showStep(currentStep);\r\n        }\r\n    });\r\n\r\n    function showStep(step) {\r\n        document.querySelectorAll('.ztm-form-step').forEach(s => s.classList.remove('active'));\r\n        document.querySelector(`.ztm-form-step[data-step=\"${step}\"]`).classList.add('active');\r\n        \r\n        document.querySelectorAll('.ztm-progress-dot').forEach((dot, i) => {\r\n            dot.classList.remove('active', 'completed');\r\n            if (i + 1 < step) dot.classList.add('completed');\r\n            if (i + 1 === step) dot.classList.add('active');\r\n        });\r\n\r\n        if (step === 4) buildReview();\r\n    }\r\n\r\n    \/\/ Validation\r\n    function validateStep(step) {\r\n        const stepEl = document.querySelector(`.ztm-form-step[data-step=\"${step}\"]`);\r\n        const requiredFields = stepEl.querySelectorAll('[required]');\r\n        let valid = true;\r\n\r\n        requiredFields.forEach(field => {\r\n            const group = field.closest('.ztm-form-group');\r\n            if (!field.value.trim()) {\r\n                group.classList.add('error');\r\n                valid = false;\r\n            } else {\r\n                group.classList.remove('error');\r\n            }\r\n\r\n            if (field.type === 'email' && field.value && !isValidEmail(field.value)) {\r\n                group.classList.add('error');\r\n                valid = false;\r\n            }\r\n\r\n            if (field.name === 'whatsapp' && field.value) {\r\n                const phone = field.value.replace(\/\\D\/g, '');\r\n                if (phone.length < 10) {\r\n                    group.classList.add('error');\r\n                    valid = false;\r\n                }\r\n            }\r\n        });\r\n\r\n        return valid;\r\n    }\r\n\r\n    function isValidEmail(email) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n    }\r\n\r\n    \/\/ Clear errors on input\r\n    form.addEventListener('input', (e) => {\r\n        const group = e.target.closest('.ztm-form-group');\r\n        if (group) group.classList.remove('error');\r\n    });\r\n\r\n    \/\/ Build Review\r\n    function buildReview() {\r\n        const data = new FormData(form);\r\n        const reviewContent = document.getElementById('reviewContent');\r\n        \r\n        const fields = [\r\n            { label: 'Name', value: data.get('fullName') },\r\n            { label: 'WhatsApp', value: data.get('whatsapp') },\r\n            { label: 'Email', value: data.get('email') || 'Not provided' },\r\n            { label: 'Business Category', value: data.get('businessCategory') || 'Not provided' },\r\n            { label: 'Project Type', value: data.get('projectType') },\r\n            { label: 'Project Goal', value: data.get('projectGoal') },\r\n            { label: 'Description', value: data.get('projectDescription') },\r\n            { label: 'Required Pages', value: data.get('requiredPages') || 'Not provided' },\r\n            { label: 'Required Features', value: data.get('requiredFeatures') || 'Not provided' },\r\n            { label: 'Reference Website', value: data.get('referenceWebsite') || 'Not provided' },\r\n            { label: 'Budget', value: data.get('budget') || 'Not decided' },\r\n            { label: 'Timeline', value: data.get('timeline') || 'Not decided' }\r\n        ];\r\n\r\n        reviewContent.innerHTML = fields\r\n            .filter(f => f.value && f.value !== 'Not provided')\r\n            .map(f => `\r\n                <div class=\"ztm-review-item\">\r\n                    <span class=\"ztm-review-label\">${f.label}<\/span>\r\n                    <span class=\"ztm-review-value\">${f.value}<\/span>\r\n                <\/div>\r\n            `).join('');\r\n    }\r\n\r\n    \/\/ ===== ZTM Supabase order intake (added) =====\r\n    function ztmRef(){try{var u=new URLSearchParams(location.search).get('ref');if(u){localStorage.setItem('ztm_ref',u.replace(\/[^A-Za-z0-9]\/g,'').slice(0,12));}return localStorage.getItem('ztm_ref')||'';}catch(e){return '';}}\r\n    const ZTM_SB_URL = 'https:\/\/otbsvumischupdvorusq.supabase.co';\r\n    const ZTM_SB_KEY = 'sb_publishable_yrsEFtts8UVebfRx_Chi_w_spjcYCT-';\r\n    function ztmSaveOrder(payload) {\r\n        return fetch(ZTM_SB_URL + '\/rest\/v1\/rpc\/submit_order', {\r\n            method: 'POST',\r\n            headers: { 'apikey': ZTM_SB_KEY, 'Content-Type': 'application\/json' },\r\n            body: JSON.stringify({ p: payload }),\r\n            keepalive: true\r\n        }).then(r => r.ok ? r.json() : null).catch(() => null);\r\n    }\r\n\r\n    \/\/ Submit Form\r\n    submitBtn.addEventListener('click', () => {\r\n        const data = new FormData(form);\r\n        const additionalReq = data.get('additionalRequirements');\r\n        \r\n        const message = `ZTM \u2014 NEW PROJECT REQUEST\r\n\r\n*Contact Information:*\r\nName: ${data.get('fullName')}\r\nWhatsApp: ${data.get('whatsapp')}\r\nEmail: ${data.get('email') || 'Not provided'}\r\nBusiness Category: ${data.get('businessCategory') || 'Not provided'}\r\n\r\n*Project Details:*\r\nProject Type: ${data.get('projectType')}\r\nProject Goal: ${data.get('projectGoal')}\r\nDescription: ${data.get('projectDescription')}\r\n\r\n*Requirements:*\r\nRequired Pages: ${data.get('requiredPages') || 'Not specified'}\r\nRequired Features: ${data.get('requiredFeatures') || 'Not specified'}\r\nReference Website: ${data.get('referenceWebsite') || 'Not provided'}\r\nBudget: ${data.get('budget') || 'Not decided'}\r\nTimeline: ${data.get('timeline') || 'Not decided'}\r\n${additionalReq ? `\\nAdditional Requirements: ${additionalReq}` : ''}\r\n\r\nPlease review my project and contact me on WhatsApp.`;\r\n\r\n        whatsappURL = `https:\/\/wa.me\/923274893933?text=${encodeURIComponent(message)}`;\r\n        whatsappLink.href = whatsappURL;\r\n\r\n        \/\/ Save to Supabase (WhatsApp flow above works even if this fails)\r\n        ztmSaveOrder({\r\n            service: 'web',\r\n            name: data.get('fullName'),\r\n            whatsapp: data.get('whatsapp'),\r\n            email: data.get('email') || null,\r\n            business: null,\r\n            source: location.href,\r\n            ref: ztmRef(),\r\n            website: '',\r\n            details: {\r\n                businessCategory: data.get('businessCategory'),\r\n                projectType: data.get('projectType'),\r\n                projectGoal: data.get('projectGoal'),\r\n                description: data.get('projectDescription'),\r\n                requiredPages: data.get('requiredPages'),\r\n                requiredFeatures: data.get('requiredFeatures'),\r\n                referenceWebsite: data.get('referenceWebsite'),\r\n                budget: data.get('budget'),\r\n                timeline: data.get('timeline'),\r\n                additionalRequirements: additionalReq\r\n            }\r\n        }).then(res => {\r\n            if (res && res.order_code) {\r\n                const m2 = message + '\\n\\nOrder ID: ' + res.order_code;\r\n                whatsappLink.href = `https:\/\/wa.me\/923274893933?text=${encodeURIComponent(m2)}`;\r\n            }\r\n        });\r\n\r\n        form.style.display = 'none';\r\n        successState.classList.add('active');\r\n    });\r\n\r\n    \/\/ Close Success State\r\n    closeSuccess.addEventListener('click', () => {\r\n        closeModal();\r\n    });\r\n\r\n    \/\/ Reset Form\r\n    function resetForm() {\r\n        form.reset();\r\n        form.style.display = 'block';\r\n        successState.classList.remove('active');\r\n        currentStep = 1;\r\n        showStep(1);\r\n        document.querySelectorAll('.ztm-form-group.error').forEach(g => g.classList.remove('error'));\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Web &#038; App Solutions Websites &#038; Web Apps Built Around Your Business From professional business websites to custom web applications, ZTM builds modern digital solutions designed around your goals, customers, and workflow. Start Your Project \u2192 View Our Work \u25c9 Web DevelopmentE-CommerceWeb AppsCustom Solutions Laptop Coding Plant\/Growth Book Mug Chart Security \u00d7 Start Your Project [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"_joinchat":[],"footnotes":""},"class_list":["post-2557","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2557"}],"version-history":[{"count":28,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2557\/revisions"}],"predecessor-version":[{"id":2877,"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=\/wp\/v2\/pages\/2557\/revisions\/2877"}],"wp:attachment":[{"href":"https:\/\/zenithtechmatrix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}