{"id":127,"date":"2026-10-08T09:20:03","date_gmt":"2026-10-08T09:20:03","guid":{"rendered":"https:\/\/intouch.my.id\/web\/?page_id=127"},"modified":"2026-10-08T11:07:47","modified_gmt":"2026-10-08T11:07:47","slug":"commercial-architecture-strategic-proposal","status":"publish","type":"page","link":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/","title":{"rendered":"Commercial Architecture &amp; Strategic Proposal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"127\" class=\"elementor elementor-127\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ef4e57 e-flex e-con-boxed e-con e-parent\" data-id=\"7ef4e57\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8538654 elementor-widget elementor-widget-html\" data-id=\"8538654\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Commercial Proposal \u2014 shellaweb.com<\/title>\n    <style>\n        \/* System Typography & Variables Setup *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');\n\n        :root {\n            --bg-primary: #FDFBF7;\n            --bg-secondary: #F4EFF6;\n            --bg-tertiary: #EAE3ED;\n            --text-dark: #1A202C;\n            --text-muted: #5A6578;\n            --text-light: #8C98A9;\n            --accent-gold: #C5A059;\n            --accent-charcoal: #2D3748;\n            --accent-orange: #C05621;\n            --bg-orange-light: #FFFAF0;\n            --border-color: #E2E8F0;\n            --border-dark: #cbd5e0;\n            --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);\n            --shadow-md: 0 4px 12px rgba(0,0,0,0.05);\n            --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);\n            --font-serif: 'Cormorant Garamond', Georgia, serif;\n            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n            --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n\n            \/* Embedded Tech Proposal Theme Colors *\/\n            --tech-primary: #0284c7;\n            --tech-primary-dark: #0369a1;\n            --tech-secondary: #0f172a;\n            --tech-surface: #f8fafc;\n        }\n\n        \/* Copy Protection & Base Styles *\/\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n        }\n\n        body {\n            background-color: var(--bg-primary);\n            color: var(--text-dark);\n            font-family: var(--font-sans);\n            font-size: 15px;\n            line-height: 1.6;\n            letter-spacing: -0.01em;\n            -webkit-font-smoothing: antialiased;\n            overflow-x: hidden;\n        }\n\n        \/* Layout Container *\/\n        .app-container {\n            max-width: 1280px;\n            margin: 0 auto;\n            padding: 20px 40px 80px 40px;\n        }\n\n        \/* Top Header & Branding System *\/\n        header.brand-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-end;\n            padding-bottom: 30px;\n            border-bottom: 1px solid var(--border-color);\n            margin-bottom: 40px;\n        }\n\n        .brand-title {\n            font-family: var(--font-serif);\n            font-size: 2.8rem;\n            font-weight: 400;\n            letter-spacing: 0.02em;\n            color: var(--text-dark);\n            line-height: 1;\n        }\n\n        .brand-subtitle {\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            letter-spacing: 0.15em;\n            color: var(--text-muted);\n            margin-top: 8px;\n            font-weight: 500;\n        }\n\n        .proposal-meta {\n            text-align: right;\n            font-size: 0.85rem;\n            color: var(--text-muted);\n        }\n\n        .proposal-meta span {\n            display: block;\n        }\n\n        .meta-id {\n            font-weight: 600;\n            color: var(--text-dark);\n        }\n\n        \/* IP Banner & Notice *\/\n        .ip-banner {\n            background-color: var(--bg-orange-light);\n            border-left: 4px solid var(--accent-orange);\n            padding: 16px 20px;\n            margin-bottom: 35px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            border-radius: 0 4px 4px 0;\n        }\n\n        .ip-banner-text {\n            color: #7B341E;\n            font-size: 0.88rem;\n            line-height: 1.4;\n        }\n\n        .ip-banner-text strong {\n            font-weight: 600;\n        }\n\n        .badge-expiration {\n            background-color: #DD6B20;\n            color: white;\n            font-size: 0.72rem;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            padding: 6px 12px;\n            border-radius: 20px;\n            font-weight: 600;\n            white-space: nowrap;\n        }\n\n        \/* Fluid Navigation Tab Bed System *\/\n        .tab-bed-wrapper {\n            position: sticky;\n            top: 0;\n            z-index: 100;\n            background-color: var(--bg-primary);\n            padding-top: 10px;\n            padding-bottom: 15px;\n            border-bottom: 1px solid var(--border-color);\n            margin-bottom: 40px;\n        }\n\n        .tab-bed {\n            display: flex;\n            gap: 8px;\n            overflow-x: auto;\n            scrollbar-width: none;\n            -ms-overflow-style: none;\n        }\n\n        .tab-bed::-webkit-scrollbar {\n            display: none;\n        }\n\n        .tab-btn {\n            background: transparent;\n            border: 1px solid var(--border-color);\n            padding: 12px 20px;\n            font-family: var(--font-sans);\n            font-size: 0.82rem;\n            font-weight: 500;\n            color: var(--text-muted);\n            cursor: pointer;\n            transition: var(--transition);\n            white-space: nowrap;\n            border-radius: 2px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .tab-btn:hover {\n            border-color: var(--text-dark);\n            color: var(--text-dark);\n            background-color: #ffffff;\n        }\n\n        .tab-btn.active {\n            background-color: var(--text-dark);\n            color: #ffffff;\n            border-color: var(--text-dark);\n        }\n\n        .tab-btn .tab-num {\n            font-family: var(--font-serif);\n            font-style: italic;\n            opacity: 0.7;\n        }\n\n        \/* Tab Content Panel Systems *\/\n        .tab-content {\n            display: none;\n            animation: fadeIn 0.4s ease-in-out;\n        }\n\n        .tab-content.active {\n            display: block;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(6px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* Editorial Typography & Component Layouts *\/\n        .section-header {\n            margin-bottom: 35px;\n        }\n\n        .section-title {\n            font-family: var(--font-serif);\n            font-size: 2.2rem;\n            font-weight: 400;\n            color: var(--text-dark);\n            margin-bottom: 8px;\n        }\n\n        .section-desc {\n            font-size: 0.95rem;\n            color: var(--text-muted);\n            max-width: 750px;\n        }\n\n        .grid-2col {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 30px;\n            margin-bottom: 30px;\n        }\n\n        .grid-3col {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 24px;\n            margin-bottom: 30px;\n        }\n\n        .card {\n            background-color: #ffffff;\n            border: 1px solid var(--border-color);\n            padding: 30px;\n            border-radius: 4px;\n            box-shadow: var(--shadow-sm);\n        }\n\n        .card-header-sm {\n            font-family: var(--font-serif);\n            font-size: 1.35rem;\n            margin-bottom: 15px;\n            color: var(--text-dark);\n            border-bottom: 1px solid var(--bg-secondary);\n            padding-bottom: 10px;\n        }\n\n        p {\n            margin-bottom: 15px;\n            color: var(--text-muted);\n            font-size: 0.95rem;\n        }\n\n        ul.styled-list {\n            list-style: none;\n            margin-bottom: 15px;\n        }\n\n        ul.styled-list li {\n            position: relative;\n            padding-left: 20px;\n            margin-bottom: 10px;\n            font-size: 0.9rem;\n            color: var(--text-muted);\n        }\n\n        ul.styled-list li::before {\n            content: \"\u2014\";\n            position: absolute;\n            left: 0;\n            color: var(--accent-gold);\n        }\n\n        \/* Matrix Tables *\/\n        .data-table-wrapper {\n            background: #ffffff;\n            border: 1px solid var(--border-color);\n            border-radius: 4px;\n            overflow: hidden;\n            margin-bottom: 30px;\n        }\n\n        table.data-table {\n            width: 100%;\n            border-collapse: collapse;\n            text-align: left;\n            font-size: 0.88rem;\n        }\n\n        table.data-table th {\n            background-color: var(--bg-secondary);\n            padding: 14px 18px;\n            font-weight: 600;\n            text-transform: uppercase;\n            font-size: 0.72rem;\n            letter-spacing: 0.08em;\n            color: var(--text-dark);\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        table.data-table td {\n            padding: 16px 18px;\n            border-bottom: 1px solid var(--border-color);\n            color: var(--text-muted);\n        }\n\n        table.data-table tr:last-child td {\n            border-bottom: none;\n        }\n\n        table.data-table tr.highlight-row {\n            background-color: #FAF5FF;\n        }\n\n        .badge-tag {\n            display: inline-block;\n            padding: 4px 8px;\n            border-radius: 3px;\n            font-size: 0.7rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n        }\n\n        .badge-recommended {\n            background-color: #FEFCBF;\n            color: #744210;\n            border: 1px solid #F6E05E;\n        }\n\n        .badge-speed {\n            background-color: #C6F6D5;\n            color: #22543D;\n            border: 1px solid #9AE6B4;\n        }\n\n        .badge-standard {\n            background-color: #EDF2F7;\n            color: #4A5568;\n        }\n\n        \/* Section 04: Interactive Sandbox Storefront Simulator *\/\n        .sandbox-container {\n            border: 1px solid var(--border-dark);\n            border-radius: 6px;\n            background-color: #ffffff;\n            overflow: hidden;\n            margin-top: 25px;\n            position: relative;\n            box-shadow: var(--shadow-md);\n        }\n\n        .sandbox-topbar {\n            background-color: var(--text-dark);\n            color: #ffffff;\n            padding: 12px 20px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            font-size: 0.8rem;\n            letter-spacing: 0.05em;\n        }\n\n        .sandbox-topbar-title {\n            text-transform: uppercase;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .sandbox-topbar-title::before {\n            content: \"\";\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            background-color: #48BB78;\n            border-radius: 50%;\n        }\n\n        .sandbox-viewport {\n            display: grid;\n            grid-template-columns: 1fr 340px;\n            min-height: 580px;\n        }\n\n        .sandbox-catalog {\n            padding: 24px;\n            background-color: #FAF9F6;\n            border-right: 1px solid var(--border-color);\n        }\n\n        .catalog-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 20px;\n        }\n\n        .product-card {\n            background: #ffffff;\n            border: 1px solid var(--border-color);\n            border-radius: 4px;\n            padding: 12px;\n            display: flex;\n            flex-direction: column;\n            transition: var(--transition);\n        }\n\n        .product-card:hover {\n            box-shadow: var(--shadow-sm);\n            border-color: var(--border-dark);\n        }\n\n        .product-image-container {\n            aspect-ratio: 3\/4;\n            background-color: var(--bg-secondary);\n            margin-bottom: 12px;\n            border-radius: 2px;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n        }\n\n        .product-image-svg {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        .product-title {\n            font-family: var(--font-serif);\n            font-size: 1.1rem;\n            color: var(--text-dark);\n            margin-bottom: 4px;\n        }\n\n        .product-price {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 10px;\n        }\n\n        .swatch-group {\n            display: flex;\n            gap: 6px;\n            margin-bottom: 12px;\n        }\n\n        .swatch-dot {\n            width: 16px;\n            height: 16px;\n            border-radius: 50%;\n            cursor: pointer;\n            border: 2px solid #ffffff;\n            box-shadow: 0 0 0 1px var(--border-color);\n            transition: var(--transition);\n        }\n\n        .swatch-dot.active {\n            box-shadow: 0 0 0 2px var(--text-dark);\n        }\n\n        .btn-add-cart {\n            margin-top: auto;\n            background-color: var(--text-dark);\n            color: #ffffff;\n            border: none;\n            padding: 10px;\n            font-size: 0.75rem;\n            text-transform: uppercase;\n            letter-spacing: 0.08em;\n            font-weight: 600;\n            cursor: pointer;\n            border-radius: 2px;\n            transition: var(--transition);\n            width: 100%;\n        }\n\n        .btn-add-cart:hover {\n            background-color: #2D3748;\n        }\n\n        \/* AJAX Side Cart Drawer *\/\n        .sandbox-cart-panel {\n            background-color: #ffffff;\n            display: flex;\n            flex-direction: column;\n            padding: 20px;\n        }\n\n        .cart-header {\n            font-family: var(--font-serif);\n            font-size: 1.3rem;\n            padding-bottom: 12px;\n            border-bottom: 1px solid var(--border-color);\n            margin-bottom: 15px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .cart-items-container {\n            flex-grow: 1;\n            overflow-y: auto;\n            max-height: 360px;\n            padding-right: 4px;\n        }\n\n        .cart-item {\n            display: flex;\n            gap: 12px;\n            padding-bottom: 12px;\n            margin-bottom: 12px;\n            border-bottom: 1px solid var(--bg-secondary);\n        }\n\n        .cart-item-thumb {\n            width: 50px;\n            height: 65px;\n            background-color: var(--bg-secondary);\n            border-radius: 2px;\n            flex-shrink: 0;\n            overflow: hidden;\n        }\n\n        .cart-item-details {\n            flex-grow: 1;\n        }\n\n        .cart-item-title {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            line-height: 1.2;\n        }\n\n        .cart-item-meta {\n            font-size: 0.75rem;\n            color: var(--text-light);\n            margin-top: 2px;\n        }\n\n        .cart-item-price {\n            font-size: 0.8rem;\n            font-weight: 600;\n            margin-top: 4px;\n        }\n\n        .cart-qty-ctrl {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            margin-top: 6px;\n        }\n\n        .qty-btn {\n            background: var(--bg-secondary);\n            border: 1px solid var(--border-color);\n            width: 20px;\n            height: 20px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            font-size: 0.8rem;\n            line-height: 1;\n        }\n\n        .qty-val {\n            font-size: 0.8rem;\n            font-weight: 600;\n        }\n\n        .cart-summary {\n            border-top: 1px solid var(--border-color);\n            padding-top: 15px;\n            margin-top: auto;\n        }\n\n        .summary-row {\n            display: flex;\n            justify-content: space-between;\n            font-size: 0.85rem;\n            margin-bottom: 8px;\n            color: var(--text-muted);\n        }\n\n        .summary-row.total {\n            font-weight: 700;\n            color: var(--text-dark);\n            font-size: 1.05rem;\n            border-top: 1px dashed var(--border-color);\n            padding-top: 8px;\n            margin-top: 8px;\n        }\n\n        .btn-checkout {\n            width: 100%;\n            background-color: var(--accent-gold);\n            color: #ffffff;\n            border: none;\n            padding: 12px;\n            font-size: 0.8rem;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            font-weight: 600;\n            cursor: pointer;\n            margin-top: 12px;\n            border-radius: 2px;\n            transition: var(--transition);\n        }\n\n        .btn-checkout:hover {\n            background-color: #B38E46;\n        }\n\n        \/* Gateway Overlay Modal *\/\n        .gateway-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(26, 32, 44, 0.88);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 50;\n            backdrop-filter: blur(4px);\n        }\n\n        .gateway-modal {\n            background-color: #ffffff;\n            border-radius: 6px;\n            width: 380px;\n            padding: 30px;\n            text-align: center;\n            box-shadow: var(--shadow-lg);\n        }\n\n        .gateway-title {\n            font-family: var(--font-serif);\n            font-size: 1.5rem;\n            margin-bottom: 6px;\n        }\n\n        .gateway-status {\n            font-size: 0.8rem;\n            color: var(--accent-gold);\n            text-transform: uppercase;\n            letter-spacing: 0.08em;\n            margin-bottom: 20px;\n            font-weight: 600;\n        }\n\n        .qris-box {\n            background-color: #ffffff;\n            border: 2px solid var(--text-dark);\n            padding: 15px;\n            border-radius: 4px;\n            display: inline-block;\n            margin-bottom: 20px;\n        }\n\n        .btn-close-modal {\n            background-color: var(--bg-secondary);\n            border: 1px solid var(--border-color);\n            color: var(--text-dark);\n            padding: 8px 16px;\n            font-size: 0.8rem;\n            cursor: pointer;\n            border-radius: 2px;\n            width: 100%;\n            font-weight: 600;\n        }\n\n        \/* Commercial Rates Packages *\/\n        .tier-card {\n            background: #ffffff;\n            border: 1px solid var(--border-color);\n            border-radius: 4px;\n            padding: 30px;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .tier-card.featured {\n            border: 2px solid var(--text-dark);\n            box-shadow: var(--shadow-md);\n        }\n\n        .tier-badge {\n            position: absolute;\n            top: -12px;\n            right: 20px;\n            background: var(--text-dark);\n            color: #ffffff;\n            font-size: 0.68rem;\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n            padding: 4px 10px;\n            border-radius: 2px;\n        }\n\n        .tier-name {\n            font-family: var(--font-serif);\n            font-size: 1.6rem;\n            color: var(--text-dark);\n            margin-bottom: 8px;\n        }\n\n        .tier-price {\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: var(--text-dark);\n            margin-bottom: 20px;\n        }\n\n        .tier-price span {\n            font-size: 0.85rem;\n            font-weight: 400;\n            color: var(--text-muted);\n        }\n\n        \/* Sign Off Area *\/\n        .signoff-container {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 40px;\n            margin-top: 40px;\n            padding-top: 30px;\n            border-top: 2px solid var(--border-color);\n        }\n\n        .signoff-box {\n            background-color: #ffffff;\n            border: 1px solid var(--border-color);\n            padding: 30px;\n            border-radius: 4px;\n        }\n\n        .signoff-title {\n            font-family: var(--font-serif);\n            font-size: 1.2rem;\n            color: var(--text-dark);\n            margin-bottom: 20px;\n            padding-bottom: 8px;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .signature-line {\n            margin-top: 60px;\n            border-bottom: 1px solid var(--text-dark);\n            position: relative;\n        }\n\n        .signature-label {\n            font-size: 0.78rem;\n            text-transform: uppercase;\n            letter-spacing: 0.08em;\n            color: var(--text-muted);\n            margin-top: 8px;\n        }\n\n        \/* Tab 08: Live Demo Styles derived from SHELLA Laundry & Dry Clean Surabaya.html *\/\n        .demo-wrapper {\n            background-color: #f1f5f9;\n            padding: 1.5rem;\n            border-radius: 12px;\n            border: 1px solid var(--border-color);\n        }\n\n        .demo-container {\n            max-width: 1000px;\n            margin: 0 auto;\n            background: #ffffff;\n            border-radius: 12px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n            overflow: hidden;\n        }\n\n        .demo-header {\n            background: var(--tech-secondary);\n            color: #ffffff;\n            padding: 2.5rem 2rem;\n            border-bottom: 4px solid var(--tech-primary);\n        }\n\n        .demo-header .brand {\n            font-size: 0.875rem;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n            color: var(--tech-primary);\n            font-weight: 700;\n            margin-bottom: 0.5rem;\n        }\n\n        .demo-header h1 {\n            font-size: 2rem;\n            font-weight: 800;\n            margin-bottom: 0.5rem;\n            color: #ffffff;\n        }\n\n        .demo-header p {\n            color: #94a3b8;\n            font-size: 1rem;\n            margin-bottom: 0;\n        }\n\n        .demo-meta-bar {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 1.5rem;\n            background: var(--tech-surface);\n            padding: 1rem 2rem;\n            border-bottom: 1px solid var(--border-color);\n            font-size: 0.875rem;\n        }\n\n        .demo-meta-item strong {\n            color: var(--tech-secondary);\n        }\n\n        .demo-content {\n            padding: 2rem;\n        }\n\n        .demo-section {\n            margin-bottom: 2.5rem;\n        }\n\n        .demo-section h2 {\n            font-size: 1.35rem;\n            color: var(--tech-secondary);\n            border-bottom: 2px solid var(--tech-surface);\n            padding-bottom: 0.5rem;\n            margin-bottom: 1.25rem;\n            font-family: var(--font-sans);\n            font-weight: 700;\n        }\n\n        .demo-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 1.5rem;\n            margin-top: 1rem;\n        }\n\n        .demo-card {\n            background: var(--tech-surface);\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            padding: 1.25rem;\n            transition: transform 0.2s, box-shadow 0.2s;\n        }\n\n        .demo-card:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n        }\n\n        .demo-card h3 {\n            font-size: 1.1rem;\n            color: var(--tech-primary-dark);\n            margin-bottom: 0.5rem;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            font-family: var(--font-sans);\n            font-weight: 600;\n        }\n\n        .demo-card ul {\n            list-style-type: none;\n            padding-left: 0;\n            font-size: 0.9rem;\n        }\n\n        .demo-card li {\n            margin-bottom: 0.5rem;\n            position: relative;\n            padding-left: 1.2rem;\n            color: var(--text-muted);\n        }\n\n        .demo-card li::before {\n            content: \"\u2022\";\n            color: var(--tech-primary);\n            font-weight: bold;\n            position: absolute;\n            left: 0;\n        }\n\n        .demo-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-top: 1rem;\n            font-size: 0.9rem;\n        }\n\n        .demo-table th, .demo-table td {\n            text-align: left;\n            padding: 0.75rem 1rem;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .demo-table th {\n            background-color: var(--tech-surface);\n            color: var(--tech-secondary);\n            font-weight: 600;\n        }\n\n        .demo-badge {\n            display: inline-block;\n            background: #e0f2fe;\n            color: var(--tech-primary-dark);\n            padding: 0.2rem 0.6rem;\n            border-radius: 4px;\n            font-size: 0.75rem;\n            font-weight: 600;\n        }\n\n        .demo-cta-box {\n            background: linear-gradient(135deg, var(--tech-secondary), #1e293b);\n            color: white;\n            padding: 2rem;\n            border-radius: 8px;\n            text-align: center;\n            margin-top: 2rem;\n        }\n\n        .demo-cta-box h3 {\n            margin-bottom: 0.5rem;\n            color: #ffffff;\n            font-family: var(--font-sans);\n            font-weight: 700;\n        }\n\n        .demo-cta-box p {\n            color: #cbd5e1;\n            margin-bottom: 1.5rem;\n        }\n\n        .demo-btn {\n            display: inline-block;\n            background: var(--tech-primary);\n            color: white;\n            text-decoration: none;\n            padding: 0.75rem 1.5rem;\n            border-radius: 6px;\n            font-weight: 600;\n            transition: background 0.2s;\n        }\n\n        .demo-btn:hover {\n            background: var(--tech-primary-dark);\n            color: #ffffff;\n            text-decoration: none;\n        }\n\n        .demo-footer {\n            text-align: center;\n            padding: 1.5rem;\n            font-size: 0.8rem;\n            color: #64748b;\n            border-top: 1px solid var(--border-color);\n        }\n\n        \/* Responsive Breakpoints *\/\n        @media (max-width: 1024px) {\n            .sandbox-viewport {\n                grid-template-columns: 1fr;\n            }\n            .sandbox-cart-panel {\n                border-top: 1px solid var(--border-color);\n            }\n            .catalog-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n            .grid-3col {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .app-container {\n                padding: 15px 18px 40px 18px;\n            }\n            header.brand-header {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 15px;\n            }\n            .proposal-meta {\n                text-align: left;\n            }\n            .grid-2col {\n                grid-template-columns: 1fr;\n            }\n            .catalog-grid {\n                grid-template-columns: 1fr;\n            }\n            .signoff-container {\n                grid-template-columns: 1fr;\n            }\n            .demo-wrapper {\n                padding: 0.5rem;\n            }\n            .demo-header {\n                padding: 1.5rem 1rem;\n            }\n            .demo-content {\n                padding: 1rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"app-container\">\n\n        <!-- Top Header & Branding System -->\n        <header class=\"brand-header\">\n            <div>\n                <h1 class=\"brand-title\">shellaweb.com<\/h1>\n                <div class=\"brand-subtitle\">Commercial Architecture & Strategic Proposal<\/div>\n            <\/div>\n            <div class=\"proposal-meta\">\n                <span>PREPARED FOR: <strong>Premium Landing Page Laundry<\/strong><\/span>\n                <span>ISSUED: <strong>October 08, 2026<\/strong><\/span>\n                <span class=\"meta-id\">REF: SW-2026-SHELLA-001<\/span>\n            <\/div>\n        <\/header>\n\n        <!-- Intellectual Property & Expiration Notice -->\n        <div class=\"ip-banner\">\n            <div class=\"ip-banner-text\">\n                <strong>INTELLECTUAL PROPERTY & PROPRIETARY NOTICE:<\/strong> The technical architecture, commercial rates, content models, and custom code specifications detailed herein represent confidential property of <strong>shellaweb.com<\/strong>.\n            <\/div>\n            <div class=\"badge-expiration\">EXPIRATION: 14 DAYS FROM ISSUANCE<\/div>\n        <\/div>\n\n        <!-- Fluid Navigation Tab Bed System -->\n        <nav class=\"tab-bed-wrapper\">\n            <div class=\"tab-bed\" id=\"tabBed\">\n                <button class=\"tab-btn active\" onclick=\"switchTab(0)\">\n                    <span class=\"tab-num\">01<\/span> Direction\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(1)\">\n                    <span class=\"tab-num\">02<\/span> Content Matrix\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(2)\">\n                    <span class=\"tab-num\">03<\/span> Experience\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(3)\">\n                    <span class=\"tab-num\">04<\/span> Scope & Grid\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(4)\">\n                    <span class=\"tab-num\">05<\/span> Production\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(5)\">\n                    <span class=\"tab-num\">06<\/span> Commercial\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(6)\">\n                    <span class=\"tab-num\">07<\/span> Next Steps\n                <\/button>\n                <button class=\"tab-btn\" onclick=\"switchTab(7)\">\n                    <span class=\"tab-num\">08<\/span> Live Demo\n                <\/button>\n            <\/div>\n        <\/nav>\n\n        <!-- TAB 01: DIRECTION -->\n        <section id=\"tab-0\" class=\"tab-content active\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">01 \u00b7 Direction & Strategic Focus<\/h2>\n                <p class=\"section-desc\">Establishing a digital footprint that reflects luxury, quiet elegance, and modern technical performance for luxury boutique fashion retail.<\/p>\n            <\/div>\n\n            <div class=\"grid-2col\">\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Executive Overview<\/h3>\n                    <p>In the luxury e-commerce ecosystem, your digital store is not merely a transaction portal; it is the ultimate expression of brand heritage, material quality, and exclusive customer care. <strong>shellaweb.com<\/strong> proposes to engineer an ultra-performant, editorial-grade digital boutique built on custom WooCommerce infrastructure.<\/p>\n                    <p>By blending minimal aesthetic principles with high-speed web optimization, we ensure an uninterrupted browsing environment tailored to elevated high-net-worth customer expectations.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Core Objectives<\/h3>\n                    <ul class=\"styled-list\">\n                        <li><strong>Quiet Luxury Digital Aesthetics:<\/strong> High-end magazine layout featuring editorial typography and subtle interactive hover states.<\/li>\n                        <li><strong>Instantaneous Page Performance:<\/strong> WebP image pipelines and dynamic caching guaranteeing load times under 1.2 seconds.<\/li>\n                        <li><strong>Seamless Localized Commerce:<\/strong> Direct API alignment with domestic gateways (Midtrans \/ Xendit) and automatic QRIS generation.<\/li>\n                        <li><strong>Mobile-First Luxury:<\/strong> Optimized gesture interactions for mobile touchscreens ensuring premium shopping fluidity.<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 02: CONTENT MATRIX -->\n        <section id=\"tab-1\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">02 \u00b7 Content Matrix & Architecture<\/h2>\n                <p class=\"section-desc\">Structured content mapping, page archetypes, and asset pipeline specifications designed for high-end catalog presentation.<\/p>\n            <\/div>\n\n            <div class=\"data-table-wrapper\">\n                <table class=\"data-table\">\n                    <thead>\n                        <tr>\n                            <th>Page Archetype<\/th>\n                            <th>Target Purpose<\/th>\n                            <th>Key Structural Components<\/th>\n                            <th>Asset Pipeline & Specs<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td><strong>Hero \/ Cover Storefront<\/strong><\/td>\n                            <td>Brand immersion & editorial storytelling<\/td>\n                            <td>Full-bleed lookbook banner, curated seasonal drops, brand narrative snippet<\/td>\n                            <td>WebP\/AVIF images (1920x1080), lazy-loaded, max 250KB<\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Collection Index (PLP)<\/strong><\/td>\n                            <td>Product discovery & intuitive filtering<\/td>\n                            <td>Multi-attribute filter (Fabric, Size, Shade), fast aspect ratio grid, AJAX cart quick-add<\/td>\n                            <td>3:4 aspect ratio portraits (1200x1600), WebP lossy, auto-responsive sizes<\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Product Detail (PDP)<\/strong><\/td>\n                            <td>Conversion & craftsmanship proof<\/td>\n                            <td>Micro-details zoom, interactive shade swatches, size guide modal, fabric care instructions<\/td>\n                            <td>High-res macro shots (2000x2667), progressive decoding, dynamic gallery switchers<\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Brand Heritage Page<\/strong><\/td>\n                            <td>Trust building & artisan proof<\/td>\n                            <td>Atelier timeline, sustainable fabric certifications, custom craftsman quotes<\/td>\n                            <td>Inline vector graphics, optimized inline video loops (MP4\/H.265 muted)<\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 03: EXPERIENCE -->\n        <section id=\"tab-2\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">03 \u00b7 User Experience Layout Direction<\/h2>\n                <p class=\"section-desc\">Refined layout architecture designed around editorial whitespace, harmonious typography scales, and responsive interaction design.<\/p>\n            <\/div>\n\n            <div class=\"grid-3col\">\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Typographic Hierarchy<\/h3>\n                    <p>Primary headlines utilize <strong>Cormorant Garamond<\/strong> to convey heritage, elegance, and fashion authority. All functional UI elements, product prices, checkout labels, and technical parameters rely on <strong>Inter<\/strong> for crisp legibility across high-density retina screens.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Editorial Whitespace<\/h3>\n                    <p>Data density is systematically reduced. Generous padding grids (80px+ vertical spacing on desktop) give every apparel piece maximum visual impact, creating an atmosphere reminiscent of physical high-end physical boutiques.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Micro-Interactions<\/h3>\n                    <p>Subtle, high-precision transition states (250ms cubic-bezier) applied to color swatches, button hover states, and drawer slide-ins provide touch-point feedback without distracting from catalog visuals.<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 04: SCOPE & GRID + INLINE STORE SIMULATOR -->\n        <section id=\"tab-3\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">04 \u00b7 Scope, Technical Stack & Store Sandbox<\/h2>\n                <p class=\"section-desc\">Functional stack specifications combined with a live interactive e-commerce sandbox widget demonstrating the proposed user purchase experience.<\/p>\n            <\/div>\n\n            <!-- Storefront Simulator -->\n            <div class=\"sandbox-container\">\n                <div class=\"sandbox-topbar\">\n                    <div class=\"sandbox-topbar-title\">SHELLAWEB INTERACTIVE SANDBOX STOREFRONT<\/div>\n                    <div>LIVE E-COMMERCE DEMO ENVIRONMENT<\/div>\n                <\/div>\n                <div class=\"sandbox-viewport\">\n                    <!-- Product Catalog -->\n                    <div class=\"sandbox-catalog\">\n                        <div class=\"catalog-grid\">\n                            <!-- Product 1 -->\n                            <div class=\"product-card\" id=\"prod-1\">\n                                <div class=\"product-image-container\">\n                                    <svg class=\"product-image-svg\" viewBox=\"0 0 300 400\" id=\"img-prod-1\">\n                                        <rect width=\"300\" height=\"400\" fill=\"#EAE3ED\"\/>\n                                        <path d=\"M100 80 Q150 110 200 80 L220 320 Q150 340 80 320 Z\" fill=\"#2D3748\" opacity=\"0.85\"\/>\n                                        <text x=\"150\" y=\"370\" font-family=\"Inter\" font-size=\"12\" fill=\"#5A6578\" text-anchor=\"middle\">Atelier Silk Robe<\/text>\n                                    <\/svg>\n                                <\/div>\n                                <div class=\"product-title\">Atelier Silk Robe<\/div>\n                                <div class=\"product-price\">IDR 3.450.000<\/div>\n                                <div class=\"swatch-group\">\n                                    <div class=\"swatch-dot active\" style=\"background-color: #2D3748;\" onclick=\"changeSwatch('prod-1', '#2D3748', 'Charcoal')\"><\/div>\n                                    <div class=\"swatch-dot\" style=\"background-color: #C5A059;\" onclick=\"changeSwatch('prod-1', '#C5A059', 'Raw Gold')\"><\/div>\n                                    <div class=\"swatch-dot\" style=\"background-color: #718096;\" onclick=\"changeSwatch('prod-1', '#718096', 'Slate')\"><\/div>\n                                <\/div>\n                                <button class=\"btn-add-cart\" onclick=\"addToCart('Atelier Silk Robe', 3450000, 'Charcoal')\">Add to Selection<\/button>\n                            <\/div>\n\n                            <!-- Product 2 -->\n                            <div class=\"product-card\" id=\"prod-2\">\n                                <div class=\"product-image-container\">\n                                    <svg class=\"product-image-svg\" viewBox=\"0 0 300 400\" id=\"img-prod-2\">\n                                        <rect width=\"300\" height=\"400\" fill=\"#EAE3ED\"\/>\n                                        <path d=\"M90 100 L210 100 L190 310 L110 310 Z\" fill=\"#C5A059\" opacity=\"0.85\"\/>\n                                        <text x=\"150\" y=\"370\" font-family=\"Inter\" font-size=\"12\" fill=\"#5A6578\" text-anchor=\"middle\">Cashmere Trench Coat<\/text>\n                                    <\/svg>\n                                <\/div>\n                                <div class=\"product-title\">Cashmere Trench Coat<\/div>\n                                <div class=\"product-price\">IDR 8.200.000<\/div>\n                                <div class=\"swatch-group\">\n                                    <div class=\"swatch-dot active\" style=\"background-color: #C5A059;\" onclick=\"changeSwatch('prod-2', '#C5A059', 'Raw Gold')\"><\/div>\n                                    <div class=\"swatch-dot\" style=\"background-color: #1A202C;\" onclick=\"changeSwatch('prod-2', '#1A202C', 'Obsidian')\"><\/div>\n                                <\/div>\n                                <button class=\"btn-add-cart\" onclick=\"addToCart('Cashmere Trench Coat', 8200000, 'Raw Gold')\">Add to Selection<\/button>\n                            <\/div>\n\n                            <!-- Product 3 -->\n                            <div class=\"product-card\" id=\"prod-3\">\n                                <div class=\"product-image-container\">\n                                    <svg class=\"product-image-svg\" viewBox=\"0 0 300 400\" id=\"img-prod-3\">\n                                        <rect width=\"300\" height=\"400\" fill=\"#EAE3ED\"\/>\n                                        <path d=\"M110 120 L190 120 L200 330 L100 330 Z\" fill=\"#4A5568\" opacity=\"0.85\"\/>\n                                        <text x=\"150\" y=\"370\" font-family=\"Inter\" font-size=\"12\" fill=\"#5A6578\" text-anchor=\"middle\">Pleated Linen Trousers<\/text>\n                                    <\/svg>\n                                <\/div>\n                                <div class=\"product-title\">Pleated Linen Trousers<\/div>\n                                <div class=\"product-price\">IDR 2.150.000<\/div>\n                                <div class=\"swatch-group\">\n                                    <div class=\"swatch-dot active\" style=\"background-color: #4A5568;\" onclick=\"changeSwatch('prod-3', '#4A5568', 'Ash')\"><\/div>\n                                    <div class=\"swatch-dot\" style=\"background-color: #E2E8F0;\" onclick=\"changeSwatch('prod-3', '#E2E8F0', 'Off-White')\"><\/div>\n                                <\/div>\n                                <button class=\"btn-add-cart\" onclick=\"addToCart('Pleated Linen Trousers', 2150000, 'Ash')\">Add to Selection<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- AJAX Side Cart Drawer -->\n                    <div class=\"sandbox-cart-panel\">\n                        <div class=\"cart-header\">\n                            <span>Your Selection<\/span>\n                            <span id=\"cartCount\" style=\"font-size: 0.85rem; color: var(--accent-gold);\">(0)<\/span>\n                        <\/div>\n                        <div class=\"cart-items-container\" id=\"cartItemsList\">\n                            <div style=\"text-align: center; color: var(--text-light); margin-top: 80px; font-size: 0.85rem;\">\n                                Your bag is currently empty.\n                            <\/div>\n                        <\/div>\n                        <div class=\"cart-summary\">\n                            <div class=\"summary-row\">\n                                <span>Subtotal<\/span>\n                                <span id=\"cartSubtotal\">IDR 0<\/span>\n                            <\/div>\n                            <div class=\"summary-row\">\n                                <span>Estimated Courier<\/span>\n                                <span>Calculated at Checkout<\/span>\n                            <\/div>\n                            <div class=\"summary-row total\">\n                                <span>Total Amount<\/span>\n                                <span id=\"cartTotal\">IDR 0<\/span>\n                            <\/div>\n                            <button class=\"btn-checkout\" onclick=\"triggerCheckout()\">Proceed to Checkout<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Gateway Overlay Modal -->\n                <div class=\"gateway-overlay\" id=\"gatewayModal\">\n                    <div class=\"gateway-modal\">\n                        <div class=\"gateway-title\">Midtrans \/ Xendit Gateway<\/div>\n                        <div class=\"gateway-status\">Simulated API Endpoint Active<\/div>\n                        <div class=\"qris-box\">\n                            <!-- QRIS Mock SVG -->\n                            <svg width=\"150\" height=\"150\" viewBox=\"0 0 100 100\">\n                                <rect width=\"100\" height=\"100\" fill=\"#ffffff\"\/>\n                                <path d=\"M10 10 h30 v30 h-30 z M15 15 v20 h20 v-20 z M20 20 h10 v10 h-10 z\" fill=\"#000\"\/>\n                                <path d=\"M60 10 h30 v30 h-30 z M65 15 v20 h20 v-20 z M70 20 h10 v10 h-10 z\" fill=\"#000\"\/>\n                                <path d=\"M10 60 h30 v30 h-30 z M15 65 v20 h20 v-20 z M20 70 h10 v10 h-10 z\" fill=\"#000\"\/>\n                                <rect x=\"50\" y=\"50\" width=\"10\" height=\"10\" fill=\"#000\"\/>\n                                <rect x=\"70\" y=\"50\" width=\"15\" height=\"10\" fill=\"#000\"\/>\n                                <rect x=\"50\" y=\"70\" width=\"10\" height=\"20\" fill=\"#000\"\/>\n                                <rect x=\"70\" y=\"75\" width=\"20\" height=\"15\" fill=\"#000\"\/>\n                            <\/svg>\n                        <\/div>\n                        <p style=\"font-size: 0.8rem; margin-bottom: 20px;\">Scan QRIS with GoPay, OVO, ShopeePay, or Mobile Banking to test completion.<\/p>\n                        <button class=\"btn-close-modal\" onclick=\"closeCheckout()\">Close Simulation<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 05: PRODUCTION -->\n        <section id=\"tab-4\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">05 \u00b7 Production Roadmap & QA Checklist<\/h2>\n                <p class=\"section-desc\">Structured 5-week execution schedule and comprehensive quality assurance protocol to guarantee flawless deployment.<\/p>\n            <\/div>\n\n            <div class=\"grid-2col\">\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Development Timeline (5 Weeks)<\/h3>\n                    <ul class=\"styled-list\">\n                        <li><strong>Week 1: Wireframing & Design Tokens:<\/strong> Figma layout approval, typographic scale setup, color palette lock-in.<\/li>\n                        <li><strong>Week 2: Core WooCommerce Stack:<\/strong> Custom theme installation, database architecture, category structure initialization.<\/li>\n                        <li><strong>Week 3: Visual Customization & Catalog:<\/strong> Editorial layout implementation, product gallery zoom integration, shade swatches setup.<\/li>\n                        <li><strong>Week 4: Payment & Logistics API Integrations:<\/strong> Midtrans\/Xendit merchant configuration, automated courier tariff calculator setup.<\/li>\n                        <li><strong>Week 5: Quality Assurance & Launch:<\/strong> Cross-browser testing, security hardening, image optimization, DNS migration.<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Comprehensive QA Checklist<\/h3>\n                    <ul class=\"styled-list\">\n                        <li><strong>Performance:<\/strong> Mobile Google PageSpeed Insights score &ge; 90+.<\/li>\n                        <li><strong>Security:<\/strong> SSL configuration, HTTP headers hardening, login brute-force protection.<\/li>\n                        <li><strong>Cross-Device:<\/strong> Tested on iOS Safari, Android Chrome, MacOS Safari, and Windows Chrome\/Edge.<\/li>\n                        <li><strong>Transaction Flow:<\/strong> Successful order generation, automated email invoice delivery, QRIS webhook confirmation.<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 06: COMMERCIAL -->\n        <section id=\"tab-5\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">06 \u00b7 Commercial Packages, Hosting & Maintenance SLA<\/h2>\n                <p class=\"section-desc\">Clear financial models, recommended server infrastructure options, and ongoing operational maintenance tiers.<\/p>\n            <\/div>\n\n            <!-- 6.1 Development Rates -->\n            <div class=\"grid-3col\">\n                <!-- Foundation -->\n                <div class=\"tier-card\">\n                    <div class=\"tier-name\">Foundation<\/div>\n                    <div class=\"tier-price\">IDR 5.500.000 <span>\/ one-time<\/span><\/div>\n                    <p style=\"font-size: 0.85rem;\">Essential digital boutique setup for upcoming fashion brands.<\/p>\n                    <ul class=\"styled-list\" style=\"margin-top: 15px;\">\n                        <li>Standard Luxury Theme Setup<\/li>\n                        <li>Up to 15 Products Manual Upload<\/li>\n                        <li>Basic Payment Gateway Integration<\/li>\n                        <li>Mobile Responsive Layout<\/li>\n                        <li>1 Round Design Revision<\/li>\n                    <\/ul>\n                <\/div>\n\n                <!-- Signature -->\n                <div class=\"tier-card featured\">\n                    <div class=\"tier-badge\">Recommended Choice<\/div>\n                    <div class=\"tier-name\">Signature<\/div>\n                    <div class=\"tier-price\">IDR 12.500.000 <span>\/ one-time<\/span><\/div>\n                    <p style=\"font-size: 0.85rem;\">Customized editorial experience with advanced commercial features.<\/p>\n                    <ul class=\"styled-list\" style=\"margin-top: 15px;\">\n                        <li>Custom UI Layout Modifications<\/li>\n                        <li>Up to 30 Products Upload & WebP Processing<\/li>\n                        <li>Midtrans \/ Xendit Full Integration<\/li>\n                        <li>Automated Courier Tariff Integration<\/li>\n                        <li>AJAX Quick-Cart Drawer System<\/li>\n                        <li>3 Rounds Design Revisions<\/li>\n                    <\/ul>\n                <\/div>\n\n                <!-- Atelier -->\n                <div class=\"tier-card\">\n                    <div class=\"tier-name\">Atelier<\/div>\n                    <div class=\"tier-price\">IDR 24.500.000 <span>\/ one-time<\/span><\/div>\n                    <p style=\"font-size: 0.85rem;\">Bespoke digital store solution for established high-end fashion labels.<\/p>\n                    <ul class=\"styled-list\" style=\"margin-top: 15px;\">\n                        <li>100% Bespoke Editorial Theme Coding<\/li>\n                        <li>Unlimited Catalog Architecture Mapping<\/li>\n                        <li>Custom AJAX Filter & Micro-interactions<\/li>\n                        <li>Multi-currency \/ International Ready<\/li>\n                        <li>Priority Launch Protocol & Performance Guarantee<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n\n            <!-- 6.2 Hosting Matrix -->\n            <h3 style=\"font-family: var(--font-serif); font-size: 1.5rem; margin: 30px 0 15px 0;\">Indonesian Web Hosting Komparasi Table<\/h3>\n            <p style=\"margin-bottom: 20px;\">Evaluated Indonesian providers suitable for hosting WooCommerce with 200\u2013500 WebP catalog images:<\/p>\n\n            <div class=\"data-table-wrapper\">\n                <table class=\"data-table\">\n                    <thead>\n                        <tr>\n                            <th>Provider<\/th>\n                            <th>Package Plan<\/th>\n                            <th>Estimated Rate<\/th>\n                            <th>Hardware Allocation & Key Specs<\/th>\n                            <th>Evaluation & Recommendation Tag<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td><strong>Biznet Gio<\/strong><\/td>\n                            <td>NEO Web Hosting Personal Small<\/td>\n                            <td>\u00b1 Rp180.000 \/ year<\/td>\n                            <td>2GB SSD, entry-level domestic network routing<\/td>\n                            <td><span class=\"badge-tag badge-standard\">Budget Entry<\/span><\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Rumahweb<\/strong><\/td>\n                            <td>Hosting Small<\/td>\n                            <td>\u00b1 Rp212.000 \/ year<\/td>\n                            <td>1GB RAM, free .COM domain included<\/td>\n                            <td><span class=\"badge-tag badge-standard\">Low-Value Basic<\/span><\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>DomaiNesia<\/strong><\/td>\n                            <td>Nimbus One<\/td>\n                            <td>\u00b1 Rp216.000 \/ year<\/td>\n                            <td>2GB NVMe SSD, fast image delivery<\/td>\n                            <td><span class=\"badge-tag badge-standard\">Fast Entry<\/span><\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Jagoan Hosting<\/strong><\/td>\n                            <td>WordPress ICON<\/td>\n                            <td>\u00b1 Rp300.000 \/ year<\/td>\n                            <td>1GB RAM, pre-optimized WooCommerce environment<\/td>\n                            <td><span class=\"badge-tag badge-standard\">Woo-Optimized<\/span><\/td>\n                        <\/tr>\n                        <tr>\n                            <td><strong>Hostinger ID<\/strong><\/td>\n                            <td>Premium<\/td>\n                            <td>\u00b1 Rp298.800 \/ year<\/td>\n                            <td>20GB SSD, LiteSpeed Web Server Caching<\/td>\n                            <td><span class=\"badge-tag badge-standard\">LiteSpeed Cache<\/span><\/td>\n                        <\/tr>\n                        <tr class=\"highlight-row\">\n                            <td><strong>Rumahweb<\/strong><\/td>\n                            <td>Hosting Medium<\/td>\n                            <td>\u00b1 Rp317.000 \/ year<\/td>\n                            <td>2GB RAM, Turbo Booster feature enabled<\/td>\n                            <td><span class=\"badge-tag badge-recommended\">BEST OVERALL BUDGET<\/span><\/td>\n                        <\/tr>\n                        <tr class=\"highlight-row\">\n                            <td><strong>DomaiNesia<\/strong><\/td>\n                            <td>Nimbus Go<\/td>\n                            <td>\u00b1 Rp384.000 \/ year<\/td>\n                            <td>15GB NVMe SSD, optimized throughput for WebP catalogs<\/td>\n                            <td><span class=\"badge-tag badge-speed\">BEST OVERALL SPEED<\/span><\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n\n            <!-- 6.3 Payment Schedule -->\n            <div class=\"card\" style=\"margin-bottom: 30px;\">\n                <h3 class=\"card-header-sm\">Payment Schedule<\/h3>\n                <div class=\"grid-3col\" style=\"margin-bottom: 0;\">\n                    <div>\n                        <strong>Term 1: 50% Deposit<\/strong>\n                        <p style=\"font-size: 0.85rem; margin-top: 4px;\">Due upon formal sign-off to initiate wireframing and architecture.<\/p>\n                    <\/div>\n                    <div>\n                        <strong>Term 2: 30% Milestone<\/strong>\n                        <p style=\"font-size: 0.85rem; margin-top: 4px;\">Due upon completion of core catalog design and payment API testing.<\/p>\n                    <\/div>\n                    <div>\n                        <strong>Term 3: 20% Final Launch<\/strong>\n                        <p style=\"font-size: 0.85rem; margin-top: 4px;\">Due prior to final server DNS migration and live deployment.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 6.4 & 6.5 SLA & Legal Boundaries -->\n            <div class=\"grid-2col\">\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Maintenance Retainers (SLA)<\/h3>\n                    <ul class=\"styled-list\">\n                        <li><strong>Essentials Care (Rp1.500.000\/mo):<\/strong> Core updates, weekly offsite backups, uptime monitoring. (Up to 3 hrs support\/mo).<\/li>\n                        <li><strong>Growth Optimization (Rp3.500.000\/mo):<\/strong> Essentials + speed tuning, promotional banner updates. (Up to 8 hrs support\/mo).<\/li>\n                        <li><strong>Atelier Dedicated Care (Rp6.000.000\/mo):<\/strong> Priority SLA response (&lt;2 hrs), dedicated dev support. (Up to 15 hrs support\/mo).<\/li>\n                    <\/ul>\n                    <p style=\"font-size: 0.78rem; color: var(--text-light); font-style: italic;\">*Support hours are capped monthly, strictly non-cumulative, and do not roll over to future periods.<\/p>\n                <\/div>\n                <div class=\"card\">\n                    <h3 class=\"card-header-sm\">Out-of-Scope Boundaries<\/h3>\n                    <p style=\"font-size: 0.88rem;\">To maintain timeline and cost transparency, the following items are strictly excluded from development fees:<\/p>\n                    <ul class=\"styled-list\">\n                        <li>Professional product photography or video production.<\/li>\n                        <li>Manual content\/product input exceeding 30 catalog items.<\/li>\n                        <li>Hosting downtime caused by third-party provider server failures.<\/li>\n                        <li>Midtrans\/Xendit merchant legal compliance (KYC) onboarding and transaction MDR fees (e.g., GoPay 2%).<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 07: NEXT STEPS -->\n        <section id=\"tab-6\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">07 \u00b7 Next Steps & Formal Authorization<\/h2>\n                <p class=\"section-desc\">Administrative onboarding procedures and binding authorization block to initiate project development.<\/p>\n            <\/div>\n\n            <div class=\"card\" style=\"margin-bottom: 30px;\">\n                <h3 class=\"card-header-sm\">Onboarding Requirements<\/h3>\n                <p>To commence the engagement following sign-off, the client must provide:<\/p>\n                <ul class=\"styled-list\">\n                    <li>Copy of Authorized Signatory Identity Card (KTP).<\/li>\n                    <li>Active Corporate Email address for account registrations.<\/li>\n                    <li>Brand assets (vector logo files, high-res lookbook images).<\/li>\n                    <li>Business entity details for Midtrans\/Xendit merchant onboarding.<\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Formal Written Sign-off Block -->\n            <div class=\"signoff-container\">\n                <!-- Client Box -->\n                <div class=\"signoff-box\">\n                    <div class=\"signoff-title\">AUTHORIZATION \u2014 THE CLIENT<\/div>\n                    <p style=\"font-size: 0.82rem; margin-bottom: 20px;\">By signing below, the client agrees to the scope, commercial terms, and out-of-scope boundaries detailed herein.<\/p>\n                    \n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Entity \/ Brand:<\/strong> ___________________________\n                    <\/div>\n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Authorized Name:<\/strong> ___________________________\n                    <\/div>\n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Title \/ Position:<\/strong> ___________________________\n                    <\/div>\n\n                    <div class=\"signature-line\"><\/div>\n                    <div class=\"signature-label\">AUTHORIZED SIGNATURE & STAMP \/ DATE<\/div>\n                <\/div>\n\n                <!-- Provider Box -->\n                <div class=\"signoff-box\">\n                    <div class=\"signoff-title\">DEVELOPMENT PARTNER \u2014 SHELLAWEB.COM<\/div>\n                    <p style=\"font-size: 0.82rem; margin-bottom: 20px;\">Prepared and confirmed by shellaweb.com architectural solutions team.<\/p>\n\n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Provider:<\/strong> shellaweb.com\n                    <\/div>\n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Lead Architect:<\/strong> Web Infrastructure Solutions\n                    <\/div>\n                    <div style=\"margin-bottom: 12px; font-size: 0.85rem;\">\n                        <strong>Contact:<\/strong> projects@shellaweb.com\n                    <\/div>\n\n                    <div class=\"signature-line\"><\/div>\n                    <div class=\"signature-label\">SHELLAWEB.COM AUTHORIZED STAMP \/ DATE<\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- TAB 08: LIVE DEMO (TECHNICAL ARCHITECTURE PROPOSAL) -->\n        <section id=\"tab-7\" class=\"tab-content\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">08 \u00b7 Live Demo & Technical Architecture Proposal<\/h2>\n                <p class=\"section-desc\">Interactive technical proposal demo specifically tailored for SHELLA Laundry & Dry Clean Surabaya platform modernization.<\/p>\n            <\/div>\n\n            <div class=\"demo-wrapper\">\n                <div class=\"demo-container\">\n                    <header class=\"demo-header\">\n                        <div class=\"brand\">Technical Proposal<\/div>\n                        <h1>Web Application & Digital Infrastructure Enhancement<\/h1>\n                        <p>Prepared for SHELLA Laundry & Dry Clean Surabaya (<a href=\"https:\/\/shellaweb.com\" target=\"_blank\" style=\"color: #38bdf8;\">shellaweb.com<\/a>)<\/p>\n                    <\/header>\n\n                    <div class=\"demo-meta-bar\">\n                        <div class=\"demo-meta-item\"><strong>Target Domain:<\/strong> shellaweb.com<\/div>\n                        <div class=\"demo-meta-item\"><strong>Scope:<\/strong> Fast-Order, Track-Order, Multi-Lang & SEO<\/div>\n                        <div class=\"demo-meta-item\"><strong>Status:<\/strong> Proposed Strategy<\/div>\n                    <\/div>\n\n                    <div class=\"demo-content\">\n                        <!-- Executive Summary -->\n                        <section class=\"demo-section\">\n                            <h2>Executive Summary<\/h2>\n                            <p>\n                                As <strong>SHELLA Laundry & Dry Clean Surabaya<\/strong> continues to expand its premium laundry, dry cleaning, specialty shoe care, and commercial pickup services, upgrading its digital interface is critical. This proposal outlines a targeted technical overhaul for <a href=\"https:\/\/shellaweb.com\" target=\"_blank\">shellaweb.com<\/a> to elevate customer UX, increase order conversion, and capture high-intent search traffic across East Java.\n                            <\/p>\n                        <\/section>\n\n                        <!-- Technical Application Stack -->\n                        <section class=\"demo-section\">\n                            <h2>Core Technical Applications & Modules<\/h2>\n                            <div class=\"demo-grid\">\n                                \n                                <!-- Fast-Order Module -->\n                                <div class=\"demo-card\">\n                                    <h3>\u26a1 1. Fast-Order Engine<\/h3>\n                                    <span class=\"demo-badge\">Conversion Optimization<\/span>\n                                    <ul style=\"margin-top: 0.75rem;\">\n                                        <li><strong>Step-Free Form Integration:<\/strong> Interactive service selection (Kilo, Express, Dry Clean, Shoes, Carpet) directly on landing pages.<\/li>\n                                        <li><strong>Real-Time Instant WhatsApp Routing:<\/strong> Auto-formats order selections, item counts, and delivery details into pre-filled WhatsApp messages to +62 813-2623-5096.<\/li>\n                                        <li><strong>Geo-Location Tagging:<\/strong> Native auto-fill for customer Surabaya pickup & delivery addresses.<\/li>\n                                    <\/ul>\n                                <\/div>\n\n                                <!-- Track-Order Module -->\n                                <div class=\"demo-card\">\n                                    <h3>\ud83d\udce6 2. Order Tracking System<\/h3>\n                                    <span class=\"demo-badge\">Customer Retention<\/span>\n                                    <ul style=\"margin-top: 0.75rem;\">\n                                        <li><strong>Live Status Portal:<\/strong> Dedicated <code>\/track-order\/<\/code> portal allowing real-time status lookups via Phone Number or Invoice ID.<\/li>\n                                        <li><strong>Process Pipeline Visibility:<\/strong> Transparent updates (Collection \u2192 Assessment \u2192 Stain Treatment \u2192 Steam Finishing \u2192 Ready for Delivery).<\/li>\n                                        <li><strong>Automated Notifications:<\/strong> Direct integration triggers for status changes via WhatsApp\/SMS gateway.<\/li>\n                                    <\/ul>\n                                <\/div>\n\n                                <!-- Multi-Language Infrastructure -->\n                                <div class=\"demo-card\">\n                                    <h3>\ud83c\udf10 3. Multi-Language Framework<\/h3>\n                                    <span class=\"demo-badge\">Global & Local Reach<\/span>\n                                    <ul style=\"margin-top: 0.75rem;\">\n                                        <li><strong>Dual Language Support:<\/strong> Full parity between English (<code>\/en\/<\/code>) and Bahasa Indonesia (<code>\/id\/<\/code>) for local residents and international visitors.<\/li>\n                                        <li><strong>Hreflang Implementation:<\/strong> Clean <code>hreflang=\"en-ID\"<\/code> and <code>hreflang=\"id-ID\"<\/code> tags to prevent duplicate content penalties.<\/li>\n                                        <li><strong>Dynamic Session Switching:<\/strong> Seamless language toggling with persistent user preference storage.<\/li>\n                                    <\/ul>\n                                <\/div>\n\n                                <!-- Technical & Local SEO -->\n                                <div class=\"demo-card\">\n                                    <h3>\ud83d\ude80 4. Advanced Technical SEO<\/h3>\n                                    <span class=\"demo-badge\">Organic Growth<\/span>\n                                    <ul style=\"margin-top: 0.75rem;\">\n                                        <li><strong>Local Schema Markup:<\/strong> Implementation of JSON-LD <code>DryCleaningOrLaundry<\/code> & <code>LocalBusiness<\/code> structured data.<\/li>\n                                        <li><strong>Core Web Vitals Optimization:<\/strong> Image compression (WebP), asset minification, and browser caching to ensure &lt;1.5s mobile load times.<\/li>\n                                        <li><strong>Programmatic Landing Pages:<\/strong> Optimized silo architecture targeting service + location queries (e.g., <em>Dry Cleaning Nginden<\/em>, <em>Express Laundry Surabaya<\/em>).<\/li>\n                                    <\/ul>\n                                <\/div>\n\n                            <\/div>\n                        <\/section>\n\n                        <!-- Technical Roadmap & Deliverables -->\n                        <section class=\"demo-section\">\n                            <h2>Implementation Roadmap<\/h2>\n                            <table class=\"demo-table\">\n                                <thead>\n                                    <tr>\n                                        <th>Phase<\/th>\n                                        <th>Milestone \/ Objective<\/th>\n                                        <th>Key Deliverables<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody>\n                                    <tr>\n                                        <td><strong>Phase 1<\/strong><\/td>\n                                        <td>Core SEO & Schema Architecture<\/td>\n                                        <td>JSON-LD Schema implementation, XML Sitemap optimization, core Web Vitals fixes on shellaweb.com.<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><strong>Phase 2<\/strong><\/td>\n                                        <td>Fast-Order & UX Streamlining<\/td>\n                                        <td>Interactive service selector form, localized address auto-complete, and automated WhatsApp API link generation.<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><strong>Phase 3<\/strong><\/td>\n                                        <td>Multi-Language Integration<\/td>\n                                        <td>Setting up dynamic language router (ID\/EN), translating localized service assets, and configuring hreflang tags.<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><strong>Phase 4<\/strong><\/td>\n                                        <td>Track-Order System & Final Audit<\/td>\n                                        <td>Deployment of client-facing lookup dashboard, database state sync, and comprehensive cross-device QA testing.<\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                        <\/section>\n\n                        <!-- CTA Callout -->\n                        <div class=\"demo-cta-box\">\n                            <h3>Ready to Elevate shellaweb.com?<\/h3>\n                            <p>Streamline customer bookings, enhance trackability, and dominate Surabaya local search results.<\/p>\n                            <a href=\"https:\/\/shellaweb.com\" target=\"_blank\" class=\"demo-btn\">Explore Current Live Platform<\/a>\n                        <\/div>\n                    <\/div>\n\n                    <footer class=\"demo-footer\">\n                        &copy; 2026 SHELLA Laundry & Dry Clean Surabaya | Developed for shellaweb.com\n                    <\/footer>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/div>\n\n    <!-- Application Logic & Scripts -->\n    <script>\n        \/* Tab Navigation Logic *\/\n        function switchTab(index) {\n            const buttons = document.querySelectorAll('.tab-btn');\n            const contents = document.querySelectorAll('.tab-content');\n\n            buttons.forEach((btn, i) => {\n                if (i === index) {\n                    btn.classList.add('active');\n                } else {\n                    btn.classList.remove('active');\n                }\n            });\n\n            contents.forEach((content, i) => {\n                if (i === index) {\n                    content.classList.add('active');\n                } else {\n                    content.classList.remove('active');\n                }\n            });\n\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n\n        \/* Swatch Selection Handling *\/\n        function changeSwatch(productId, colorHex, colorName) {\n            const card = document.getElementById(productId);\n            const swatches = card.querySelectorAll('.swatch-dot');\n            swatches.forEach(sw => sw.classList.remove('active'));\n            event.target.classList.add('active');\n\n            const path = card.querySelector('path');\n            if (path) {\n                path.setAttribute('fill', colorHex);\n            }\n\n            \/\/ Update button data state\n            const btn = card.querySelector('.btn-add-cart');\n            const title = card.querySelector('.product-title').innerText;\n            const priceText = card.querySelector('.product-price').innerText;\n            const price = parseInt(priceText.replace(\/[^0-9]\/g, ''));\n            \n            btn.onclick = function() {\n                addToCart(title, price, colorName);\n            };\n        }\n\n        \/* Cart State & Management *\/\n        let cart = [];\n\n        function addToCart(title, price, color) {\n            const existingIndex = cart.findIndex(item => item.title === title && item.color === color);\n            \n            if (existingIndex > -1) {\n                cart[existingIndex].qty += 1;\n            } else {\n                cart.push({\n                    title: title,\n                    price: price,\n                    color: color,\n                    qty: 1\n                });\n            }\n\n            renderCart();\n        }\n\n        function updateQty(index, delta) {\n            cart[index].qty += delta;\n            if (cart[index].qty <= 0) {\n                cart.splice(index, 1);\n            }\n            renderCart();\n        }\n\n        function renderCart() {\n            const cartItemsList = document.getElementById('cartItemsList');\n            const cartCount = document.getElementById('cartCount');\n            const cartSubtotal = document.getElementById('cartSubtotal');\n            const cartTotal = document.getElementById('cartTotal');\n\n            if (cart.length === 0) {\n                cartItemsList.innerHTML = `\n                    <div style=\"text-align: center; color: var(--text-light); margin-top: 80px; font-size: 0.85rem;\">\n                        Your bag is currently empty.\n                    <\/div>\n                `;\n                cartCount.innerText = '(0)';\n                cartSubtotal.innerText = 'IDR 0';\n                cartTotal.innerText = 'IDR 0';\n                return;\n            }\n\n            let html = '';\n            let total = 0;\n            let totalItems = 0;\n\n            cart.forEach((item, index) => {\n                const itemTotal = item.price * item.qty;\n                total += itemTotal;\n                totalItems += item.qty;\n\n                html += `\n                    <div class=\"cart-item\">\n                        <div class=\"cart-item-thumb\">\n                            <svg viewBox=\"0 0 100 130\" width=\"100%\" height=\"100%\">\n                                <rect width=\"100\" height=\"130\" fill=\"#EAE3ED\"\/>\n                                <rect x=\"25\" y=\"25\" width=\"50\" height=\"80\" fill=\"#2D3748\" opacity=\"0.6\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"cart-item-details\">\n                            <div class=\"cart-item-title\">${item.title}<\/div>\n                            <div class=\"cart-item-meta\">Shade: ${item.color}<\/div>\n                            <div class=\"cart-item-price\">IDR ${item.price.toLocaleString('id-ID')}<\/div>\n                            <div class=\"cart-qty-ctrl\">\n                                <button class=\"qty-btn\" onclick=\"updateQty(${index}, -1)\">-<\/button>\n                                <span class=\"qty-val\">${item.qty}<\/span>\n                                <button class=\"qty-btn\" onclick=\"updateQty(${index}, 1)\">+<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n            });\n\n            cartItemsList.innerHTML = html;\n            cartCount.innerText = `(${totalItems})`;\n            cartSubtotal.innerText = `IDR ${total.toLocaleString('id-ID')}`;\n            cartTotal.innerText = `IDR ${total.toLocaleString('id-ID')}`;\n        }\n\n        \/* Gateway Overlay Logic *\/\n        function triggerCheckout() {\n            if (cart.length === 0) {\n                alert('Your cart is empty. Add a product to test checkout.');\n                return;\n            }\n            document.getElementById('gatewayModal').style.display = 'flex';\n        }\n\n        function closeCheckout() {\n            document.getElementById('gatewayModal').style.display = 'none';\n        }\n\n        \/* Copy Protection Scripts *\/\n        \/\/ Disable Right Click\n        document.addEventListener('contextmenu', function(e) {\n            e.preventDefault();\n        });\n\n        \/\/ Block Inspection Keyboard Shortcuts\n        document.addEventListener('keydown', function(e) {\n            \/\/ Block F12\n            if (e.key === 'F12') {\n                e.preventDefault();\n            }\n            \/\/ Block Ctrl+Shift+I, Ctrl+Shift+C, Ctrl+U\n            if (e.ctrlKey && (e.shiftKey && (e.key === 'I' || e.key === 'i' || e.key === 'C' || e.key === 'c'))) {\n                e.preventDefault();\n            }\n            if (e.ctrlKey && (e.key === 'U' || e.key === 'u')) {\n                e.preventDefault();\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Commercial Proposal \u2014 shellaweb.com shellaweb.com Commercial Architecture &#038; Strategic Proposal PREPARED FOR: Premium Landing Page Laundry ISSUED: October 08, 2026 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":134,"parent":86,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","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":"default","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-127","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Commercial Architecture &amp; Strategic Proposal - Intouch Software Solutions<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Commercial Architecture &amp; Strategic Proposal\" \/>\n<meta property=\"og:description\" content=\"Commercial Proposal \u2014 shellaweb.com shellaweb.com Commercial Architecture &#038; Strategic Proposal PREPARED FOR: Premium Landing Page Laundry ISSUED: October 08, 2026 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/\" \/>\n<meta property=\"og:site_name\" content=\"Intouch Software Solutions\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-08T11:07:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/Shella-Laundry-Surabaya-Hero-Banner.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1672\" \/>\n\t<meta property=\"og:image:height\" content=\"940\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/\",\"name\":\"Commercial Architecture &amp; Strategic Proposal - Intouch Software Solutions\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Shella-Laundry-Surabaya-Hero-Banner.webp\",\"datePublished\":\"2026-10-08T09:20:03+00:00\",\"dateModified\":\"2026-10-08T11:07:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/#primaryimage\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Shella-Laundry-Surabaya-Hero-Banner.webp\",\"contentUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Shella-Laundry-Surabaya-Hero-Banner.webp\",\"width\":1672,\"height\":940},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/commercial-architecture-strategic-proposal\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Proposal\",\"item\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Commercial Architecture &amp; Strategic Proposal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#website\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\",\"name\":\"Intouch Software Solutions\",\"description\":\"Web design, AI-optimized SEO, and desktop software built around the way your business works.\",\"publisher\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#organization\",\"name\":\"Intouch Software Solutions\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-Logo-Intouch.jpg\",\"contentUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-Logo-Intouch.jpg\",\"width\":1149,\"height\":496,\"caption\":\"Intouch Software Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/github.com\\\/adhitya1978\",\"https:\\\/\\\/www.instagram.com\\\/arksolution.id\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Commercial Architecture &amp; Strategic Proposal - Intouch Software Solutions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/","og_locale":"en_US","og_type":"article","og_title":"Commercial Architecture &amp; Strategic Proposal","og_description":"Commercial Proposal \u2014 shellaweb.com shellaweb.com Commercial Architecture &#038; Strategic Proposal PREPARED FOR: Premium Landing Page Laundry ISSUED: October 08, 2026 [&hellip;]","og_url":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/","og_site_name":"Intouch Software Solutions","article_modified_time":"2026-10-08T11:07:47+00:00","og_image":[{"width":1672,"height":940,"url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/Shella-Laundry-Surabaya-Hero-Banner.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/","url":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/","name":"Commercial Architecture &amp; Strategic Proposal - Intouch Software Solutions","isPartOf":{"@id":"https:\/\/intouch.my.id\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/#primaryimage"},"image":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/#primaryimage"},"thumbnailUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/Shella-Laundry-Surabaya-Hero-Banner.webp","datePublished":"2026-10-08T09:20:03+00:00","dateModified":"2026-10-08T11:07:47+00:00","breadcrumb":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/#primaryimage","url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/Shella-Laundry-Surabaya-Hero-Banner.webp","contentUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/Shella-Laundry-Surabaya-Hero-Banner.webp","width":1672,"height":940},{"@type":"BreadcrumbList","@id":"https:\/\/intouch.my.id\/web\/proposal\/commercial-architecture-strategic-proposal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/intouch.my.id\/web\/"},{"@type":"ListItem","position":2,"name":"Proposal","item":"https:\/\/intouch.my.id\/web\/proposal\/"},{"@type":"ListItem","position":3,"name":"Commercial Architecture &amp; Strategic Proposal"}]},{"@type":"WebSite","@id":"https:\/\/intouch.my.id\/web\/#website","url":"https:\/\/intouch.my.id\/web\/","name":"Intouch Software Solutions","description":"Web design, AI-optimized SEO, and desktop software built around the way your business works.","publisher":{"@id":"https:\/\/intouch.my.id\/web\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/intouch.my.id\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/intouch.my.id\/web\/#organization","name":"Intouch Software Solutions","url":"https:\/\/intouch.my.id\/web\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/intouch.my.id\/web\/#\/schema\/logo\/image\/","url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/cropped-Logo-Intouch.jpg","contentUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/cropped-Logo-Intouch.jpg","width":1149,"height":496,"caption":"Intouch Software Solutions"},"image":{"@id":"https:\/\/intouch.my.id\/web\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/adhitya1978","https:\/\/www.instagram.com\/arksolution.id\/"]}]}},"_links":{"self":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":7,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/127\/revisions\/137"}],"up":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/86"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/media\/134"}],"wp:attachment":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/media?parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}