&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Mark Zeidan — zeidan.ai (Built with OpenClaw)&lt;/title&gt;
  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;style&gt;
    * { box-sizing: border-box; }
    body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: #f8fafc; color: #1e293b; line-height: 1.7; }
    .container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
    .hero { padding: 6rem 0 4rem; text-align: center; background: white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
    .hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; margin: 0 0 1rem; color: #1e293b; }
    .subheadline { font-size: 1.4rem; max-width: 600px; margin: 0 auto 2.5rem; color: #64748b; }
    .cta { display: inline-block; background: #3b82f6; color: white; padding: 1rem 2.5rem; border-radius: 8px; font-size: 1.1rem; font-weight: 500; text-decoration: none; transition: background 0.2s; }
    .cta:hover { background: #2563eb; }
    .features, .how { padding: 5rem 0; }
    h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: #1e293b; }
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
    .card { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); transition: all 0.2s; }
    .card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
    .card h3 { font-size: 1.4rem; margin: 0 0 1rem; color: #1e293b; }
    .how { background: #f1f5f9; }
    .footer { padding: 3rem 0 2rem; text-align: center; color: #64748b; }
    .footer a { color: #3b82f6; text-decoration: none; }
    @media (max-width: 768px) { .container { padding: 0 1rem; } .hero { padding: 4rem 0 3rem; } }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header class=&quot;hero&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;zeidan.ai&lt;/h1&gt;
      &lt;p class=&quot;subheadline&quot;&gt;Personal AI landing page. Built autonomously by Mozap on OpenClaw — GitHub PRs, CI/CD, Cloudflare deploys.&lt;/p&gt;
      &lt;a href=&quot;#features&quot; class=&quot;cta&quot;&gt;See How It Works&lt;/a&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;section id=&quot;features&quot; class=&quot;features&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;h2&gt;Autonomous AI Engineering&lt;/h2&gt;
      &lt;div class=&quot;cards&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;h3&gt;OpenClaw Agent&lt;/h3&gt;
          &lt;p&gt;Mozap reads specs, edits code, runs npm lint/test/build.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;h3&gt;GitHub Flow&lt;/h3&gt;
          &lt;p&gt;New branch, commit, PR with validation summary. No main risks.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;h3&gt;Cloudflare Pages&lt;/h3&gt;
          &lt;p&gt;Auto-deploy on merge. Live on zeidan.ai instantly.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class=&quot;how&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;h2&gt;From Prompt to Live Site&lt;/h2&gt;
      &lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt; \\\&quot;Redesign like zeidandigital.com\\\" &lt;br&gt;
      &lt;strong&gt;Mozap:&lt;/strong&gt; Analyzes inspo, builds PR, validates, deploys. Zero manual Git.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;footer class=&quot;footer&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;p&gt;&amp;copy; &lt;span id=&quot;year&quot;&gt;&lt;/span&gt; Mark Zeidan. Powered by &lt;a href=&quot;https://openclaw.ai&quot;&gt;OpenClaw&lt;/a&gt;.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  &lt;script&gt;
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('year').textContent = new Date().getFullYear();
      const cta = document.querySelector('.cta');
      if (cta) {
        cta.addEventListener('click', function(e) {
          e.preventDefault();
          document.querySelector('#features').scrollIntoView({ behavior: 'smooth' });
        });
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;