<svg width="720" height="260" viewBox="0 0 720 260" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="generic-card" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#EEF2FF"/>
      <stop offset="100%" stop-color="#DBEAFE"/>
    </linearGradient>
    <linearGradient id="generic-accent" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#3B82F6"/>
      <stop offset="100%" stop-color="#0EA5E9"/>
    </linearGradient>
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#0F172A" flood-opacity="0.12"/>
    </filter>
  </defs>

  <rect x="24" y="24" width="672" height="212" rx="24" fill="white" stroke="#E5E7EB" filter="url(#shadow)"/>

  <!-- Title -->
  <text x="48" y="64" fill="#0F172A" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="600">
    High-level Flow
  </text>
  <text x="48" y="84" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12">
    From user action to reliable production outcome
  </text>

  <!-- User -->
  <rect x="64" y="110" width="140" height="70" rx="18" fill="url(#generic-card)" stroke="#BFDBFE"/>
  <circle cx="92" cy="138" r="14" fill="#3B82F6" opacity="0.12"/>
  <circle cx="92" cy="136" r="6" fill="#3B82F6"/>
  <path d="M84 150C86 146 89 144 92 144C95 144 98 146 100 150" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round"/>
  <text x="124" y="138" text-anchor="middle" fill="#1F2933" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600">
    User
  </text>
  <text x="134" y="158" text-anchor="middle" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    UI / Client
  </text>

  <!-- Arrow 1 -->
  <line x1="204" y1="145" x2="268" y2="145" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
  <polygon points="268,145 260,140 260,150" fill="#9CA3AF"/>

  <!-- Middle service -->
  <rect x="268" y="110" width="184" height="70" rx="18" fill="url(#generic-card)" stroke="#BFDBFE"/>
  <rect x="284" y="124" width="32" height="32" rx="8" fill="#EEF2FF" stroke="#3B82F6" stroke-width="1.2"/>
  <path d="M292 144L304 132M292 132L304 144" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round"/>
  <text x="376" y="138" text-anchor="middle" fill="#1F2937" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600">
    Application Layer
  </text>
  <text x="376" y="158" text-anchor="middle" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Validation · Logic · Orchestration
  </text>

  <!-- Arrow 2 -->
  <line x1="452" y1="145" x2="516" y2="145" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
  <polygon points="516,145 508,140 508,150" fill="#9CA3AF"/>

  <!-- Data / External -->
  <rect x="516" y="110" width="140" height="70" rx="18" fill="url(#generic-card)" stroke="#BFDBFE"/>
  <rect x="532" y="124" width="24" height="32" rx="6" fill="#EEF2FF" stroke="#0EA5E9" stroke-width="1.2"/>
  <line x1="538" y1="132" x2="550" y2="132" stroke="#0EA5E9" stroke-width="1.2"/>
  <line x1="538" y1="138" x2="550" y2="138" stroke="#0EA5E9" stroke-width="1.2"/>
  <text x="586" y="138" text-anchor="middle" fill="#1F2937" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600">
    Data / Services
  </text>
  <text x="586" y="158" text-anchor="middle" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    DB · APIs · LLMs
  </text>

  <!-- Legend -->
  <rect x="64" y="198" width="210" height="26" rx="13" fill="rgba(15,23,42,0.02)"/>
  <circle cx="82" cy="211" r="4" fill="url(#generic-accent)"/>
  <text x="94" y="214" fill="#6B7280" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11">
    Request flow · validation · safe handling
  </text>
</svg>


