<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">AI Automation</title>
  <desc id="desc">Connected workflows, intelligent routing, and live automation monitoring</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2D2926"/>
    </linearGradient>
    <linearGradient id="node-a" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </linearGradient>
    <linearGradient id="node-b" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#7B6ABA"/>
      <stop offset="1" stop-color="#9B8CD8"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="6" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#000" flood-opacity="0.4"/>
    </filter>
  </defs>

  <rect width="1200" height="720" fill="url(#bg)"/>

  <!-- Grid pattern -->
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#2F2A26" stroke-width="1"/>
  </pattern>
  <rect width="1200" height="720" fill="url(#grid)" opacity="0.6"/>

  <!-- Glowing orbs -->
  <circle cx="600" cy="360" r="300" fill="#CF6A3C" opacity="0.04"/>
  <circle cx="200" cy="200" r="150" fill="#7B6ABA" opacity="0.06"/>
  <circle cx="1000" cy="500" r="180" fill="#2F80ED" opacity="0.05"/>

  <!-- Top status bar -->
  <rect x="60" y="40" width="1080" height="44" rx="10" fill="#2D2926" stroke="#3A3530" stroke-width="1" filter="url(#card-shadow)"/>
  <circle cx="82" cy="62" r="6" fill="#28CA42" opacity="0.9"/>
  <text x="96" y="66" fill="#28CA42" font-size="10" font-family="system-ui" font-weight="600">● LIVE</text>
  <text x="150" y="66" fill="#6B6560" font-size="10" font-family="system-ui">Automation Engine v3.2</text>
  <text x="900" y="66" fill="#9B9490" font-size="10" font-family="system-ui">271 runs today · 99.1% success rate · 0 failures</text>

  <!-- Workflow title -->
  <text x="600" y="120" fill="#F5F0E8" font-size="13" font-weight="700" font-family="system-ui" text-anchor="middle" opacity="0.5">Invoice Processing Workflow</text>

  <!-- Flow nodes row 1 — trigger -->
  <!-- Node: Email Trigger -->
  <rect x="80" y="140" width="160" height="80" rx="12" fill="#2D2926" stroke="#CF6A3C" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="80" y="140" width="160" height="6" rx="3" fill="url(#node-a)"/>
  <text x="160" y="176" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Email Trigger</text>
  <text x="160" y="192" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Gmail · Watch inbox</text>
  <circle cx="160" cy="220" r="5" fill="#CF6A3C"/>

  <!-- Arrow 1 -->
  <line x1="240" y1="180" x2="300" y2="180" stroke="#CF6A3C" stroke-width="1.5" stroke-dasharray="4,3"/>
  <polygon points="298,176 308,180 298,184" fill="#CF6A3C"/>

  <!-- Node: Extract Data -->
  <rect x="308" y="140" width="160" height="80" rx="12" fill="#2D2926" stroke="#7B6ABA" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="308" y="140" width="160" height="6" rx="3" fill="url(#node-b)"/>
  <text x="388" y="176" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">GPT-4o Extract</text>
  <text x="388" y="192" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">OpenAI · Parse fields</text>

  <line x1="468" y1="180" x2="528" y2="180" stroke="#7B6ABA" stroke-width="1.5" stroke-dasharray="4,3"/>
  <polygon points="526,176 536,180 526,184" fill="#7B6ABA"/>

  <!-- Node: Match Records -->
  <rect x="536" y="140" width="160" height="80" rx="12" fill="#2D2926" stroke="#28CA42" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="536" y="140" width="160" height="6" rx="3" fill="#28CA42" opacity="0.7"/>
  <text x="616" y="176" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Match Records</text>
  <text x="616" y="192" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Google Sheets · Verify</text>

  <!-- Conditional split -->
  <line x1="696" y1="180" x2="756" y2="180" stroke="#28CA42" stroke-width="1.5" stroke-dasharray="4,3"/>
  <polygon points="754,176 764,180 754,184" fill="#28CA42"/>

  <!-- Decision diamond -->
  <polygon points="800,155 840,180 800,205 760,180" fill="#2D2926" stroke="#FFBD2E" stroke-width="1.5"/>
  <text x="800" y="184" fill="#FFBD2E" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Match?</text>

  <!-- Yes branch -->
  <line x1="840" y1="180" x2="900" y2="180" stroke="#28CA42" stroke-width="1.5"/>
  <polygon points="898,176 908,180 898,184" fill="#28CA42"/>
  <text x="870" y="172" fill="#28CA42" font-size="8" font-family="system-ui">Yes</text>
  <rect x="908" y="140" width="140" height="80" rx="12" fill="#2D2926" stroke="#28CA42" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="908" y="140" width="140" height="6" rx="3" fill="#28CA42" opacity="0.7"/>
  <text x="978" y="176" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Auto-file</text>
  <text x="978" y="192" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Drive · Archive</text>

  <!-- No branch -->
  <line x1="800" y1="205" x2="800" y2="250" stroke="#FFBD2E" stroke-width="1.5"/>
  <polygon points="796,248 800,258 804,248" fill="#FFBD2E"/>
  <text x="812" y="238" fill="#FFBD2E" font-size="8" font-family="system-ui">No</text>
  <rect x="720" y="258" width="160" height="70" rx="12" fill="#2D2926" stroke="#FFBD2E" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="720" y="258" width="160" height="6" rx="3" fill="#FFBD2E" opacity="0.7"/>
  <text x="800" y="289" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Flag for Review</text>
  <text x="800" y="305" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Slack · Notify team</text>

  <!-- Notify -->
  <line x1="978" y1="220" x2="978" y2="258" stroke="#28CA42" stroke-width="1.5"/>
  <polygon points="974,256 978,266 982,256" fill="#28CA42"/>
  <rect x="908" y="258" width="140" height="70" rx="12" fill="#2D2926" stroke="#2F80ED" stroke-width="1.5" filter="url(#card-shadow)"/>
  <rect x="908" y="258" width="140" height="6" rx="3" fill="#2F80ED" opacity="0.7"/>
  <text x="978" y="289" fill="#F5F0E8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Notify Finance</text>
  <text x="978" y="305" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Gmail · Confirm</text>

  <!-- Live run log -->
  <rect x="60" y="368" width="540" height="300" rx="12" fill="#252220" stroke="#3A3530" stroke-width="1" filter="url(#card-shadow)"/>
  <text x="76" y="394" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui">Run Log</text>
  <circle cx="560" cy="388" r="5" fill="#28CA42"/>
  <text x="548" y="394" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="end">Live</text>
  <!-- Log rows -->
  <rect x="76" y="400" width="508" height="18" rx="4" fill="rgba(40,202,66,0.08)"/>
  <text x="84" y="412" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:42:11</text>
  <text x="148" y="412" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2847 · Accra Freight · GHS 4,250 →</text>
  <text x="500" y="412" fill="#28CA42" font-size="9" font-weight="600" font-family="'Courier New', monospace">FILED</text>
  <rect x="76" y="422" width="508" height="18" rx="4" fill="transparent"/>
  <text x="84" y="434" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:41:58</text>
  <text x="148" y="434" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2846 · TechSup Ghana · GHS 1,800 →</text>
  <text x="500" y="434" fill="#28CA42" font-size="9" font-weight="600" font-family="'Courier New', monospace">FILED</text>
  <rect x="76" y="444" width="508" height="18" rx="4" fill="rgba(255,189,46,0.06)"/>
  <text x="84" y="456" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:41:30</text>
  <text x="148" y="456" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2845 · Delta Logistics · GHS 9,100 →</text>
  <text x="490" y="456" fill="#FFBD2E" font-size="9" font-weight="600" font-family="'Courier New', monospace">FLAGGED</text>
  <text x="84" y="478" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:40:11</text>
  <text x="148" y="478" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2844 · Office Supplies · GHS 320 →</text>
  <text x="500" y="478" fill="#28CA42" font-size="9" font-weight="600" font-family="'Courier New', monospace">FILED</text>
  <text x="84" y="500" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:38:44</text>
  <text x="148" y="500" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2843 · Kumasi Warehousing · GHS 6,750 →</text>
  <text x="500" y="500" fill="#28CA42" font-size="9" font-weight="600" font-family="'Courier New', monospace">FILED</text>
  <text x="84" y="522" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">07:35:19</text>
  <text x="148" y="522" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">INV-2842 · Lagos Export Co · GHS 14,200 →</text>
  <text x="500" y="522" fill="#28CA42" font-size="9" font-weight="600" font-family="'Courier New', monospace">FILED</text>
  <!-- Stats at bottom of log -->
  <line x1="76" y1="534" x2="568" y2="534" stroke="#3A3530" stroke-width="1"/>
  <text x="84" y="552" fill="#6B6560" font-size="9" font-family="system-ui">Today: 271 filed · 41 flagged · 0 errors · running since 00:00</text>

  <!-- Right panel: stats -->
  <rect x="620" y="368" width="520" height="136" rx="12" fill="#252220" stroke="#3A3530" stroke-width="1" filter="url(#card-shadow)"/>
  <text x="636" y="394" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui">Today's Summary</text>
  <rect x="636" y="406" width="110" height="64" rx="8" fill="#2D2926"/>
  <text x="691" y="430" fill="#CF6A3C" font-size="26" font-weight="800" font-family="system-ui" text-anchor="middle">87%</text>
  <text x="691" y="448" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">automated</text>
  <rect x="756" y="406" width="110" height="64" rx="8" fill="#2D2926"/>
  <text x="811" y="430" fill="#28CA42" font-size="26" font-weight="800" font-family="system-ui" text-anchor="middle">312</text>
  <text x="811" y="448" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">processed</text>
  <rect x="876" y="406" width="110" height="64" rx="8" fill="#2D2926"/>
  <text x="931" y="430" fill="#FFBD2E" font-size="26" font-weight="800" font-family="system-ui" text-anchor="middle">41</text>
  <text x="931" y="448" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">flagged</text>
  <rect x="996" y="406" width="110" height="64" rx="8" fill="#2D2926"/>
  <text x="1051" y="430" fill="#F5F0E8" font-size="22" font-weight="800" font-family="system-ui" text-anchor="middle">3 days</text>
  <text x="1051" y="448" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">saved / week</text>
  <text x="636" y="488" fill="#6B6560" font-size="9" font-family="system-ui">Running 24/7 · Make.com · OpenAI · Gmail API · Google Sheets</text>

  <!-- Integrations strip -->
  <rect x="620" y="516" width="520" height="152" rx="12" fill="#252220" stroke="#3A3530" stroke-width="1" filter="url(#card-shadow)"/>
  <text x="636" y="542" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui">Connected Integrations</text>
  <rect x="636" y="554" width="100" height="36" rx="8" fill="#2D2926" stroke="#3A3530" stroke-width="1"/>
  <text x="686" y="576" fill="#F5F0E8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">Make.com</text>
  <rect x="746" y="554" width="100" height="36" rx="8" fill="#2D2926" stroke="#3A3530" stroke-width="1"/>
  <text x="796" y="576" fill="#F5F0E8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">OpenAI</text>
  <rect x="856" y="554" width="100" height="36" rx="8" fill="#2D2926" stroke="#3A3530" stroke-width="1"/>
  <text x="906" y="576" fill="#F5F0E8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">Gmail</text>
  <rect x="966" y="554" width="100" height="36" rx="8" fill="#2D2926" stroke="#3A3530" stroke-width="1"/>
  <text x="1016" y="576" fill="#F5F0E8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">Sheets</text>
  <rect x="1076" y="554" width="48" height="36" rx="8" fill="#2D2926" stroke="#3A3530" stroke-width="1"/>
  <text x="1100" y="576" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="middle">+12</text>
  <text x="636" y="622" fill="#6B6560" font-size="9" font-family="system-ui">Slack · Zapier · Stripe · Notion · Airtable · HubSpot · WhatsApp · Typeform · more</text>
  <text x="636" y="648" fill="#9B9490" font-size="8" font-family="system-ui">All integrations are no-code — deployed without changing your existing stack</text>
</svg>
