<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700" fill="none">
  <defs>
    <linearGradient id="bg-gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#EEF2FF"/>
      <stop offset="55%" stop-color="#F8FAFF"/>
      <stop offset="100%" stop-color="#F5F3FF"/>
    </linearGradient>
    <linearGradient id="node-generic" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#67E8F9"/>
      <stop offset="55%" stop-color="#5B9DFE"/>
      <stop offset="100%" stop-color="#8B5CF6"/>
    </linearGradient>
    <linearGradient id="node-cloud" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#2EE6FF"/>
      <stop offset="55%" stop-color="#4F6BFF"/>
      <stop offset="100%" stop-color="#8A4BFF"/>
    </linearGradient>
    <linearGradient id="node-cicd" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#FF8A4C"/>
      <stop offset="55%" stop-color="#FF4ECD"/>
      <stop offset="100%" stop-color="#6A5CFF"/>
    </linearGradient>
    <linearGradient id="node-security" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#22D3EE"/>
      <stop offset="45%" stop-color="#0EA5E9"/>
      <stop offset="100%" stop-color="#2563EB"/>
    </linearGradient>
    <linearGradient id="node-observability" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#34D399"/>
      <stop offset="50%" stop-color="#14B8A6"/>
      <stop offset="100%" stop-color="#38BDF8"/>
    </linearGradient>
    <linearGradient id="node-docs" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#A3B8FF"/>
      <stop offset="55%" stop-color="#7C8BFF"/>
      <stop offset="100%" stop-color="#5B6BFF"/>
    </linearGradient>
    <linearGradient id="node-governance" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#94A3B8"/>
      <stop offset="55%" stop-color="#64748B"/>
      <stop offset="100%" stop-color="#334155"/>
    </linearGradient>
    <pattern id="hex-grid" width="80" height="70" patternUnits="userSpaceOnUse">
      <path d="M20 4h40l20 32-20 32H20L0 36Z" fill="none" stroke="rgba(79,163,255,0.18)" stroke-width="1"/>
      <path d="M40 20l12 16-12 16-12-16Z" fill="rgba(106,92,255,0.1)"/>
    </pattern>
    <marker id="arrow-head" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
      <path d="M0 0L12 6L0 12Z" fill="#CBD5F5"/>
    </marker>
    <filter id="node-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="rgba(24,34,61,0.25)" />
    </filter>
  </defs>

  <rect x="0" y="0" width="1200" height="700" rx="32" fill="url(#bg-gradient)"/>
  <rect x="40" y="40" width="1120" height="620" rx="28" fill="white" stroke="#E2E8F0" stroke-width="2"/>
  <rect x="80" y="110" width="1040" height="520" rx="24" fill="url(#hex-grid)"/>

  <g filter="url(#node-shadow)">
    <polygon points="210,120 290,120 330,180 290,240 210,240 170,180" fill="url(#node-generic)"/>
    <polygon points="480,100 560,100 600,160 560,220 480,220 440,160" fill="url(#node-cloud)"/>
    <polygon points="860,160 940,160 980,220 940,280 860,280 820,220" fill="url(#node-cicd)"/>
    <polygon points="940,340 1020,340 1060,400 1020,460 940,460 900,400" fill="url(#node-security)"/>
    <polygon points="320,480 400,480 440,540 400,600 320,600 280,540" fill="url(#node-observability)"/>
    <polygon points="140,320 220,320 260,380 220,440 140,440 100,380" fill="url(#node-docs)"/>
    <polygon points="610,280 690,280 730,340 690,400 610,400 570,340" fill="url(#node-governance)"/>
  </g>

  <g fill="white" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="600" text-anchor="middle">
    <text x="250" y="185">Template</text>
    <text x="540" y="165">Provisioning</text>
    <text x="900" y="225">Build + Tests</text>
    <text x="1000" y="405">Policy Check</text>
    <text x="360" y="545">SLO + Alerts</text>
    <text x="200" y="385">Runbook</text>
    <text x="650" y="345">Approval</text>
  </g>

  <g stroke="#CBD5F5" stroke-width="2" stroke-dasharray="8 10" opacity="0.9" marker-end="url(#arrow-head)">
    <path d="M330 180L480 160">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
    <path d="M600 160L860 220">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
    <path d="M980 220L1000 340">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
    <path d="M1000 460L700 360">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
    <path d="M700 360L440 520">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
    <path d="M440 540L260 380">
      <animate attributeName="stroke-dashoffset" values="0;-36" dur="2.4s" repeatCount="indefinite" />
    </path>
  </g>

  <g>
    <rect x="80" y="60" width="280" height="36" rx="18" fill="#EEF2FF" stroke="#E2E8F0"/>
    <text x="220" y="83" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="14" fill="#475569">
      Module Studio (preview)
    </text>
  </g>
</svg>
