<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1584 396" width="1584" height="396">
  <defs>
    <!-- Subtle vignette so edges feel softer than pure flat black -->
    <radialGradient id="bg" cx="50%" cy="50%" r="75%">
      <stop offset="0%" stop-color="#1a1a1a"/>
      <stop offset="100%" stop-color="#0a0a0a"/>
    </radialGradient>

    <!-- Fade the ring pattern so rings are strong on the right and dissolve toward the text/logo -->
    <linearGradient id="ringFade" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="25%" stop-color="#ffffff" stop-opacity="0.05"/>
      <stop offset="55%" stop-color="#ffffff" stop-opacity="0.22"/>
      <stop offset="80%" stop-color="#ffffff" stop-opacity="0.55"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.9"/>
    </linearGradient>

    <!-- Clip rings so they only appear inside the banner -->
    <clipPath id="frame">
      <rect x="0" y="0" width="1584" height="396"/>
    </clipPath>
  </defs>

  <!-- Background -->
  <rect width="1584" height="396" fill="url(#bg)"/>

  <!-- Concentric rings radiating from the right edge (two origin points for richer interference pattern) -->
  <g clip-path="url(#frame)" stroke="url(#ringFade)" fill="none" stroke-width="1.2">
    <circle cx="1560" cy="120" r="90"/>
    <circle cx="1560" cy="120" r="170"/>
    <circle cx="1560" cy="120" r="260"/>
    <circle cx="1560" cy="120" r="360"/>
    <circle cx="1560" cy="120" r="470"/>
    <circle cx="1560" cy="120" r="590"/>
    <circle cx="1560" cy="120" r="720"/>
    <circle cx="1560" cy="120" r="860"/>
    <circle cx="1560" cy="120" r="1010"/>
    <circle cx="1560" cy="120" r="1170"/>
    <circle cx="1560" cy="120" r="1340"/>
  </g>
  <g clip-path="url(#frame)" stroke="url(#ringFade)" fill="none" stroke-width="1" stroke-opacity="0.7">
    <circle cx="1500" cy="300" r="120"/>
    <circle cx="1500" cy="300" r="230"/>
    <circle cx="1500" cy="300" r="350"/>
    <circle cx="1500" cy="300" r="480"/>
    <circle cx="1500" cy="300" r="620"/>
    <circle cx="1500" cy="300" r="770"/>
    <circle cx="1500" cy="300" r="930"/>
    <circle cx="1500" cy="300" r="1100"/>
  </g>

  <!-- Diagonal accent lines, echoing the source banner -->
  <g clip-path="url(#frame)" stroke="#ffffff" fill="none">
    <line x1="620" y1="-40" x2="1700" y2="460" stroke-opacity="0.22" stroke-width="1"/>
    <line x1="900" y1="-40" x2="1820" y2="380" stroke-opacity="0.14" stroke-width="1"/>
  </g>

  <!-- Primary tagline (right side, echoing the source layout) -->
  <g font-family="Sora, system-ui, -apple-system, Segoe UI, sans-serif" fill="#ffffff">
    <text x="1488" y="186" text-anchor="end" font-size="64" font-weight="800" letter-spacing="-1.5">
      Building better infrastructure.
    </text>
    <text x="1488" y="226" text-anchor="end" font-size="22" font-weight="300" fill-opacity="0.75" letter-spacing="0.2">
      Cloud Native Engineering for the Enterprise
    </text>
  </g>

  <!-- Approach cadence chip row (Todea's four verbs, echoes the source's three-word rhythm) -->
  <g font-family="Sora, system-ui, -apple-system, Segoe UI, sans-serif"
     font-size="12" font-weight="600" letter-spacing="2.5" fill="#ffffff" fill-opacity="0.6"
     transform="translate(1488 256)" text-anchor="end">
    <text>ASSESS · ARCHITECT · IMPLEMENT · OPERATE</text>
  </g>
</svg>
