feat: rename Rates & SUITES to Order & Pricing, add Custom Quote modal

- Change section header to 'Order & Pricing'
- Add 'Get Custom Quote' button that opens modal with name, email, requirements fields
- Requirements field has placeholder: 'Describe your requirements (how many users? onsite, cloud? how many workers?)'
- Submit to https://n8n.odoo4projects.com/webhook/ODOO4projects/crm with UTM tracking
- Empire 'Get Custom Quote' button now opens modal instead of Order Widget
- Add CSS for modal overlay, form styling, and mobile responsiveness

index.html

@@ -181,7 +181,16 @@
       .oca-icon-link:hover{color:var(--brass-bright);transform:scale(1.2)}
       .oca-empty{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-style:italic;display:none}
       .oca-loading{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-size:.88rem}
-      @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}}
+      /* Custom Quote Modal */
+      .ow-sub{font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:1.5rem}
+      .ow-panel input[type="text"],.ow-panel textarea{width:100%;padding:.8rem 1rem;border-radius:var(--radius);border:1px solid var(--line-brass);background:rgba(255,255,255,.05);color:#fff;font-family:Inter,sans-serif;font-size:.88rem;outline:none;transition:border-color .2s,background .2s;box-sizing:border-box}
+      .ow-panel input[type="text"]:focus,.ow-panel textarea:focus{border-color:var(--brass);background:rgba(255,255,255,.08)}
+      .ow-panel textarea{min-height:100px;resize:vertical}
+      .ow-panel textarea::placeholder{color:rgba(255,255,255,.3)}
+      .ow-panel input[type="email"]::placeholder{color:rgba(255,255,255,.3)}
+      .ow-close{background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;position:absolute;right:1rem;top:1rem;transition:color .2s}
+      .ow-close:hover{color:var(--brass)}
+      @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}.ow-panel{left:5%;right:5%}.ow-close{top:.5rem;right:.5rem;font-size:1.6rem}}
     </style>
     <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
     <noscript><link rel="stylesheet" href="style.css" /></noscript>
@@ -344,7 +353,7 @@
     <!-- Pricing -->
     <section class="section-dark" id="pricing">
       <div class="container">
-        <p class="section-kicker">Rates & Suites</p>
+        <p class="section-kicker">Order & Pricing</p>
         <h2 class="section-title">Your Plan, Your Timing: Upgrade Anytime</h2>
         <div class="pricing-server-row">
           <label for="pricingServerLocation">Server Location</label>
@@ -426,7 +435,7 @@
                 <div class="price-save"></div>
               </div>
               <p class="desc">"My house! My Horse! My Server!"</p>
-              <a href="javascript:void(0)" class="btn btn-brass btn-empire" data-plan="Empire" data-price="950.00" data-is-empire="true">Get Custom Quote</a>
+              <a href="javascript:void(0)" class="btn btn-brass btn-empire">Get Custom Quote</a>
               <ul>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Our service on your server</li>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> All modules & features</li>
@@ -475,6 +484,37 @@
       </div>
     </div>
 
+    <!-- Custom Quote Modal -->
+    <div id="customQuoteModal" class="ow-overlay" onclick="if(event.target===this)closeCustomQuoteModal()">
+      <div id="customQuotePanel" class="ow-panel" style="display:none">
+        <button class="ow-close" onclick="closeCustomQuoteModal()">&times;</button>
+        <div class="ow-content">
+          <h2 class="ow-title">Get Custom Quote</h2>
+          <p class="ow-sub">Tell us about your needs and we'll prepare a tailored offer.</p>
+          <form id="customQuoteForm" class="biz-form" style="text-align:left">
+            <div class="biz-field">
+              <label for="cqName">Name</label>
+              <input type="text" id="cqName" placeholder="Your full name" required />
+            </div>
+            <div class="biz-field">
+              <label for="cqEmail">Email</label>
+              <input type="email" id="cqEmail" placeholder="your@email.com" required />
+            </div>
+            <div class="biz-field">
+              <label for="cqRequirements">Your Requirements</label>
+              <textarea id="cqRequirements" placeholder="Describe your requirements (how many users? onsite, cloud? how many workers?)" required></textarea>
+            </div>
+            <button type="submit" class="btn btn-brass btn-lg">Submit Request</button>
+          </form>
+          <div class="biz-success" id="customQuoteSuccess" style="display:none">
+            <i class="fas fa-check-circle"></i>
+            <h3>Request received</h3>
+            <p>We'll review your requirements and get back to you shortly.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Blog -->
     <section class="blog-section blog-section-light" id="blog">
       <div class="container">

script.js

@@ -796,10 +796,74 @@ var si = 0,
 
                 document.querySelectorAll('.btn-empire').forEach(function(btn) {
                     btn.addEventListener('click', function() {
-                        var plan = this.getAttribute('data-plan');
+                        openCustomQuoteModal();
-                        var price = parseFloat(this.getAttribute('data-price'));
+                    });
-                        var isEmpire = this.getAttribute('data-is-empire') === 'true';
+                });
-                        if (plan) openOrderWidget(plan, price, isEmpire);
+
+                /* ---- Custom Quote Modal ---- */
+                function openCustomQuoteModal() {
+                    document.getElementById('customQuotePanel').style.display = 'block';
+                    document.getElementById('customQuoteModal').style.display = 'flex';
+                }
+                function closeCustomQuoteModal() {
+                    document.getElementById('customQuoteModal').style.display = 'none';
+                    document.getElementById('customQuoteForm').reset();
+                    document.getElementById('customQuoteSuccess').style.display = 'none';
+                }
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === 'Escape') {
+                        var modal = document.getElementById('customQuoteModal');
+                        if (modal && modal.style.display === 'flex') {
+                            closeCustomQuoteModal();
+                        }
+                    }
+                });
+
+                /* Submit custom quote form */
+                var customQuoteForm = document.getElementById('customQuoteForm');
+                if (customQuoteForm) {
+                    customQuoteForm.addEventListener('submit', function(e) {
+                        e.preventDefault();
+                        var name = document.getElementById('cqName').value.trim();
+                        var email = document.getElementById('cqEmail').value.trim();
+                        var requirements = document.getElementById('cqRequirements').value.trim();
+
+                        if (!name || !email || !requirements) return;
+
+                        var submitBtn = customQuoteForm.querySelector('.btn-lg');
+                        submitBtn.textContent = 'Sending...';
+                        submitBtn.disabled = true;
+
+                        fetch('https://n8n.odoo4projects.com/webhook/ODOO4projects/crm', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(UTM.inject({
+                                name: name,
+                                email: email,
+                                requirements: requirements
+                            }))
+                        }).then(function() {
+                            customQuoteForm.style.display = 'none';
+                            document.getElementById('customQuoteSuccess').style.display = 'block';
+                            submitBtn.textContent = 'Submit Request';
+                            submitBtn.disabled = false;
+                        }).catch(function() {
+                            submitBtn.textContent = 'Submit Request';
+                            submitBtn.disabled = false;
+                            var errorMsg = document.createElement('div');
+                            errorMsg.style.marginTop = '1rem';
+                            errorMsg.style.color = '#dc3545';
+                            errorMsg.textContent = 'Something went wrong. Please try again.';
+                            customQuoteForm.appendChild(errorMsg);
+                            setTimeout(function() { if(errorMsg.parentNode) errorMsg.parentNode.removeChild(errorMsg); }, 3000);
+                        });
+                    });
+                }
+
+                /* Attach "Get Custom Quote" click handlers to Empire buttons */
+                document.querySelectorAll('.btn-empire').forEach(function(btn) {
+                    btn.addEventListener('click', function() {
+                        openCustomQuoteModal();
                     });
                 });
             })();