<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="AI route planning: optimized delivery route with numbered stops">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1d2429"/>
      <stop offset="1" stop-color="#12171a"/>
    </linearGradient>
    <linearGradient id="route" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0" stop-color="#714B67"/>
      <stop offset="0.55" stop-color="#a07ea0"/>
      <stop offset="1" stop-color="#54c7bd"/>
    </linearGradient>
    <radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#54c7bd" stop-opacity="0.5"/>
      <stop offset="1" stop-color="#54c7bd" stop-opacity="0"/>
    </radialGradient>
    <filter id="soft" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur stdDeviation="6"/>
    </filter>
  </defs>

  <!-- Map base -->
  <rect width="800" height="500" fill="url(#bg)"/>

  <!-- City blocks -->
  <g fill="#ffffff" opacity="0.025">
    <rect x="60" y="60" width="150" height="110" rx="10"/>
    <rect x="240" y="60" width="220" height="80" rx="10"/>
    <rect x="500" y="60" width="240" height="120" rx="10"/>
    <rect x="60" y="210" width="120" height="150" rx="10"/>
    <rect x="220" y="180" width="180" height="120" rx="10"/>
    <rect x="440" y="220" width="150" height="120" rx="10"/>
    <rect x="620" y="220" width="120" height="160" rx="10"/>
    <rect x="120" y="400" width="200" height="70" rx="10"/>
    <rect x="360" y="380" width="180" height="90" rx="10"/>
    <rect x="580" y="410" width="160" height="60" rx="10"/>
  </g>

  <!-- Street grid -->
  <g stroke="#ffffff" stroke-width="1" opacity="0.05">
    <path d="M0 90 H800 M0 190 H800 M0 300 H800 M0 390 H800"/>
    <path d="M120 0 V500 M300 0 V500 M470 0 V500 M620 0 V500"/>
  </g>

  <!-- Soft glow under the route -->
  <ellipse cx="430" cy="300" rx="320" ry="170" fill="url(#glow)" opacity="0.6"/>

  <!-- Optimized route -->
  <g fill="none" stroke="url(#route)" stroke-linecap="round" stroke-linejoin="round">
    <path d="M110 405 L205 300 L330 350 L445 215 L575 295 L675 150" stroke-width="14" opacity="0.25" filter="url(#soft)"/>
    <path d="M110 405 L205 300 L330 350 L445 215 L575 295 L675 150" stroke-width="6" stroke-dasharray="2 16" opacity="0.9"/>
    <path d="M110 405 L205 300 L330 350 L445 215 L575 295 L675 150" stroke-width="4"/>
  </g>

  <!-- Depot (start) -->
  <g transform="translate(110 405)">
    <circle r="26" fill="#714B67"/>
    <circle r="26" fill="none" stroke="#a07ea0" stroke-width="2" opacity="0.6"/>
    <g transform="translate(-11 -10)" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M0 9 L11 1 L22 9 V21 H0 Z"/>
      <path d="M0 13 H22"/>
      <path d="M9 21 V14 H13 V21"/>
    </g>
  </g>

  <!-- Numbered stops -->
  <g font-family="'Lato', system-ui, sans-serif" font-weight="700" font-size="17" text-anchor="middle">
    <g transform="translate(205 300)">
      <circle r="19" fill="#13191c" stroke="#54c7bd" stroke-width="3"/>
      <text y="6" fill="#ffffff">1</text>
    </g>
    <g transform="translate(330 350)">
      <circle r="19" fill="#13191c" stroke="#54c7bd" stroke-width="3"/>
      <text y="6" fill="#ffffff">2</text>
    </g>
    <g transform="translate(445 215)">
      <circle r="19" fill="#13191c" stroke="#54c7bd" stroke-width="3"/>
      <text y="6" fill="#ffffff">3</text>
    </g>
    <g transform="translate(575 295)">
      <circle r="19" fill="#13191c" stroke="#54c7bd" stroke-width="3"/>
      <text y="6" fill="#ffffff">4</text>
    </g>
  </g>

  <!-- Destination flag pin (end) -->
  <g transform="translate(675 150)">
    <circle r="22" fill="#54c7bd"/>
    <g transform="translate(-8 -10)" fill="none" stroke="#13191c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2 1 V20"/>
      <path d="M2 2 H15 L11 7 L15 12 H2"/>
    </g>
  </g>

  <!-- Van travelling the route -->
  <g transform="translate(330 350)">
    <circle r="22" fill="#1d2429" stroke="#a07ea0" stroke-width="1.5" opacity="0.9"/>
    <g transform="translate(-13 -8)" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M0 3 H16 V13 H0 Z"/>
      <path d="M16 6 H22 L26 10 V13 H16 Z"/>
      <circle cx="6" cy="13" r="2.4" fill="#13191c"/>
      <circle cx="21" cy="13" r="2.4" fill="#13191c"/>
    </g>
  </g>

  <!-- AI badge -->
  <g transform="translate(672 372)" font-family="'Lato', system-ui, sans-serif">
    <rect x="-58" y="-22" width="116" height="44" rx="22" fill="#13191c" opacity="0.85" stroke="#2c3338" stroke-width="1"/>
    <g transform="translate(-32 0)" fill="none" stroke="#54c7bd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M0 -7 L2 -2 L7 0 L2 2 L0 7 L-2 2 L-7 0 L-2 -2 Z"/>
    </g>
    <text x="12" y="6" fill="#e8ebec" font-weight="800" font-size="18" text-anchor="middle" letter-spacing="1">AI</text>
  </g>
</svg>
