Free Trial form in features grid: 2x3 layout, email + location + send

- features-grid changed to repeat(3, 1fr) for 2x3 layout
- 6th cell is a Free Trial card with midnight bg, brass border
- Email input, location dropdown (preselected to best ping server),
  brass Send button
- POST to webhook as JSON {email, location}
- On success: form hides, success message shown
- Responsive: 3col -> 2col -> 1col

index.html

@@ -137,6 +137,16 @@
             <h3>Support Bot &amp; Human Support</h3>
             <p>AI support bot for instant fixes. Human team for everything else. Your UUID is your key.</p>
           </div>
+          <div class="feature-card-trial" id="trialCard">
+            <h3>Free Trial</h3>
+            <p>Start your 30-day free trial. No credit card required.</p>
+            <form class="trial-form" id="trialForm">
+              <input type="email" id="trialEmail" placeholder="Your email address" required />
+              <select id="trialLocation"></select>
+              <button type="submit" class="btn btn-brass">Send</button>
+            </form>
+            <div class="trial-success" id="trialSuccess">&#10003; Check your inbox to confirm your email address.</div>
+          </div>
         </div>
       </div>
     </section>

script.js

@@ -527,6 +527,18 @@ var si = 0,
               /* Ping all servers, pick best, animate hero */
               var results = [];
               var pending = SERVERS.length;
+
+              /* Populate trial form location dropdown */
+              var trialLoc = document.getElementById('trialLocation');
+              if (trialLoc) {
+                SERVERS.forEach(function(s) {
+                  var opt = document.createElement('option');
+                  opt.value = s.host;
+                  opt.textContent = s.city;
+                  trialLoc.appendChild(opt);
+                });
+              }
+
               SERVERS.forEach(function(s) {
                 pingServer(s.host).then(function(r) {
                   results.push(r);
@@ -537,6 +549,15 @@ var si = 0,
                     valid.sort(function(a, b) { return a.time - b.time; });
                     var best = valid[0];
                     var bestServer = SERVERS.filter(function(s) { return s.host === best.host; })[0];
+                    /* Preselect best server in trial form */
+                    if (trialLoc && bestServer) {
+                      for (var i = 0; i < trialLoc.options.length; i++) {
+                        if (trialLoc.options[i].value === bestServer.host) {
+                          trialLoc.selectedIndex = i;
+                          break;
+                        }
+                      }
+                    }
                     if (bestServer && heroImages[best.host]) {
                       /* Highlight the matching server card */
                       var cards = document.querySelectorAll('.server-card');
@@ -554,6 +575,32 @@ var si = 0,
                   }
                 });
               });
+
+              /* Trial form submission */
+              var trialForm = document.getElementById('trialForm');
+              if (trialForm) {
+                trialForm.addEventListener('submit', function(e) {
+                  e.preventDefault();
+                  var email = document.getElementById('trialEmail').value.trim();
+                  var location = trialLoc.value;
+                  if (!email) return;
+                  var btn = trialForm.querySelector('.btn-brass');
+                  btn.textContent = 'Sending...';
+                  btn.disabled = true;
+                  fetch('https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: email, location: location })
+                  }).then(function() {
+                    trialForm.style.display = 'none';
+                    document.getElementById('trialSuccess').classList.add('visible');
+                  }).catch(function() {
+                    btn.textContent = 'Send';
+                    btn.disabled = false;
+                    alert('Something went wrong. Please try again.');
+                  });
+                });
+              }
             })();
 
             fetch("blog/index.json?_=" + Date.now())

style.css

@@ -382,7 +382,7 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
 /* ---- Features ---- */
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
 }
 .feature-card {
@@ -420,8 +420,88 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
 .feature-card p {
   font-size: 0.85rem;
   color: var(--ink-soft);
-  margin: 0;
-  line-height: 1.6;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+.feature-card-trial {
+  background: var(--midnight);
+  border: 1px solid var(--line-brass);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  text-align: center;
+  transition: all 0.25s;
+  box-shadow: var(--shadow-rest);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.feature-card-trial h3 {
+  font-family: Marcellus, Georgia, serif;
+  font-size: 1.05rem;
+  font-weight: 400;
+  margin-bottom: 0.35rem;
+  color: #fff;
+}
+.feature-card-trial p {
+  font-size: 0.8rem;
+  color: rgba(255,255,255,0.55);
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+.trial-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.trial-form input,
+.trial-form select {
+  padding: 0.6rem 0.8rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--line-brass);
+  background: rgba(255,255,255,0.06);
+  color: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 0.82rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.trial-form input::placeholder {
+  color: rgba(255,255,255,0.3);
+}
+.trial-form input:focus,
+.trial-form select:focus {
+  border-color: var(--brass);
+  background: rgba(255,255,255,0.1);
+}
+.trial-form select option {
+  background: var(--midnight);
+  color: #fff;
+}
+.trial-form .btn-brass {
+  padding: 0.6rem;
+  font-size: 0.82rem;
+  width: 100%;
+}
+.trial-success {
+  display: none;
+  font-size: 0.82rem;
+  color: #4ade80;
+  line-height: 1.4;
+  margin-top: 0.5rem;
+}
+.trial-success.visible {
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 576px) {
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* ---- FAQ ---- */