<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="760" viewBox="0 0 1400 760">

  <defs>
    <style>
      .title { font: 600 24px system-ui, -apple-system, Segoe UI, Roboto; fill:#0f172a }
      .section { font: 600 14px system-ui, -apple-system, Segoe UI, Roboto; fill:#334155 }
      .label { font: 12px system-ui, -apple-system, Segoe UI, Roboto; fill:#0f172a }
      .muted { font: 12px system-ui, -apple-system, Segoe UI, Roboto; fill:#475569 }
      .box { fill:#ffffff; stroke:#cbd5e1; stroke-width:1.5 }
      .group { fill:#f8fafc; stroke:#cbd5e1; stroke-width:1.5 }
      .control { fill:#eef2ff; stroke:#6366f1; stroke-width:1.5 }
      .ops { fill:#ecfeff; stroke:#0891b2; stroke-width:1.5 }
      .signal { fill:#f0fdf4; stroke:#16a34a; stroke-width:1.5 }
      .warn { fill:#fff7ed; stroke:#f97316; stroke-width:1.5 }
      .arrow { stroke:#334155; stroke-width:2; fill:none; marker-end:url(#arrow) }
      .dashed { stroke-dasharray:6 6; }
    </style>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="3" orient="auto">
      <path d="M0,0 L0,6 L6,3 z" fill="#334155"/>
    </marker>
  </defs>

  <text x="700" y="36" text-anchor="middle" class="title">Enterprise CI/CD Platform</text>

  <!-- Delivery Control Plane -->
  <rect x="80" y="80" width="1240" height="170" rx="18" class="control"/>
  <text x="100" y="110" class="section">Delivery Control Plane</text>

  <rect x="160" y="140" width="260" height="60" rx="10" class="box"/>
  <text x="290" y="168" text-anchor="middle" class="label">Source Control</text>
  <text x="290" y="190" text-anchor="middle" class="muted">GitHub/Azure DevOps</text>

  <rect x="460" y="140" width="260" height="60" rx="10" class="box"/>
  <text x="590" y="168" text-anchor="middle" class="label">Pipeline Orchestrator</text>
  <text x="590" y="190" text-anchor="middle" class="muted">Build • Test • Deploy</text>

  <rect x="760" y="140" width="260" height="60" rx="10" class="box"/>
  <text x="890" y="168" text-anchor="middle" class="label">Artifact Registry</text>
  <text x="890" y="190" text-anchor="middle" class="muted">Images • Packages</text>

  <rect x="1060" y="140" width="220" height="60" rx="10" class="box"/>
  <text x="1170" y="168" text-anchor="middle" class="label">Secrets</text>
  <text x="1170" y="190" text-anchor="middle" class="muted">Vault/KeyVault</text>

  <line x1="420" y1="170" x2="460" y2="170" class="arrow"/>
  <line x1="720" y1="170" x2="760" y2="170" class="arrow"/>
  <line x1="1020" y1="170" x2="1060" y2="170" class="arrow"/>

  <!-- Pipeline Flow -->
  <rect x="80" y="280" width="1240" height="260" rx="18" class="group"/>
  <text x="100" y="310" class="section">Pipeline Flow (Standardized)</text>

  <rect x="150" y="370" width="170" height="70" rx="12" class="box"/>
  <text x="235" y="402" text-anchor="middle" class="label">Build</text>
  <text x="235" y="424" text-anchor="middle" class="muted">SBOM</text>

  <rect x="360" y="370" width="170" height="70" rx="12" class="box"/>
  <text x="445" y="402" text-anchor="middle" class="label">Test</text>
  <text x="445" y="424" text-anchor="middle" class="muted">Unit/Integration</text>

  <rect x="570" y="350" width="210" height="110" rx="14" class="warn"/>
  <text x="675" y="395" text-anchor="middle" class="label">Security Gates</text>
  <text x="675" y="418" text-anchor="middle" class="muted">SAST • DAST • Policy</text>

  <rect x="820" y="370" width="190" height="70" rx="12" class="box"/>
  <text x="915" y="402" text-anchor="middle" class="label">Deploy</text>
  <text x="915" y="424" text-anchor="middle" class="muted">Canary/Blue-Green</text>

  <rect x="1050" y="370" width="190" height="70" rx="12" class="box"/>
  <text x="1145" y="402" text-anchor="middle" class="label">Verify</text>
  <text x="1145" y="424" text-anchor="middle" class="muted">SLO-based</text>

  <line x1="320" y1="405" x2="360" y2="405" class="arrow"/>
  <line x1="530" y1="405" x2="570" y2="405" class="arrow"/>
  <line x1="780" y1="405" x2="820" y2="405" class="arrow"/>
  <line x1="1010" y1="405" x2="1050" y2="405" class="arrow"/>

  <!-- Ops Outcomes -->
  <rect x="80" y="580" width="1240" height="120" rx="18" class="ops"/>
  <text x="100" y="610" class="section">Operational Outcomes</text>

  <text x="700" y="650" text-anchor="middle" class="label">
    Repeatable Releases • Compliance-by-Design • Reduced Change Failure Rate • Faster Recovery
  </text>
  <text x="700" y="675" text-anchor="middle" class="muted">
    Standard templates • Guardrails • Audit trails • Rollback patterns
  </text>
</svg>
