<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none">
  <rect width="400" height="300" fill="#0A0A0A"/>

  <!-- Subtle grid -->
  <g stroke="rgba(255,255,255,0.03)" stroke-width="0.5">
    <line x1="0" y1="50" x2="400" y2="50"/>
    <line x1="0" y1="100" x2="400" y2="100"/>
    <line x1="0" y1="150" x2="400" y2="150"/>
    <line x1="0" y1="200" x2="400" y2="200"/>
    <line x1="0" y1="250" x2="400" y2="250"/>
    <line x1="80" y1="0" x2="80" y2="300"/>
    <line x1="160" y1="0" x2="160" y2="300"/>
    <line x1="240" y1="0" x2="240" y2="300"/>
    <line x1="320" y1="0" x2="320" y2="300"/>
  </g>

  <!-- Diagonal glow -->
  <linearGradient id="j-glow" x1="40" y1="260" x2="360" y2="40" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#991B1B" stop-opacity="0"/>
    <stop offset="40%" stop-color="#991B1B" stop-opacity="0.12"/>
    <stop offset="70%" stop-color="#991B1B" stop-opacity="0.18"/>
    <stop offset="100%" stop-color="#991B1B" stop-opacity="0.08"/>
  </linearGradient>
  <rect width="400" height="300" fill="url(#j-glow)"/>

  <!-- Main diagonal journey line -->
  <line x1="50" y1="255" x2="360" y2="40" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>

  <!-- Faint parallel track lines -->
  <line x1="45" y1="260" x2="355" y2="45" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
  <line x1="55" y1="250" x2="365" y2="35" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>

  <!-- Horizontal milestone reference lines -->
  <g stroke="rgba(255,255,255,0.04)" stroke-width="0.3" stroke-dasharray="4,6">
    <line x1="50" y1="255" x2="400" y2="255"/>
    <line x1="50" y1="212" x2="400" y2="212"/>
    <line x1="50" y1="169" x2="400" y2="169"/>
    <line x1="50" y1="126" x2="400" y2="126"/>
    <line x1="50" y1="83" x2="400" y2="83"/>
    <line x1="50" y1="40" x2="400" y2="40"/>
  </g>

  <!-- Milestone diamonds along the diagonal -->
  <!-- $0 - Start -->
  <g transform="translate(50, 255)">
    <rect x="-4" y="-4" width="8" height="8" rx="1" transform="rotate(45)" fill="white" opacity="0.1"/>
    <rect x="-2" y="-2" width="4" height="4" rx="0.5" transform="rotate(45)" fill="white" opacity="0.2"/>
  </g>

  <!-- $1M -->
  <g transform="translate(112, 212)">
    <rect x="-4.5" y="-4.5" width="9" height="9" rx="1" transform="rotate(45)" fill="white" opacity="0.12"/>
    <rect x="-2.5" y="-2.5" width="5" height="5" rx="0.5" transform="rotate(45)" fill="white" opacity="0.2"/>
  </g>

  <!-- $10M -->
  <g transform="translate(174, 169)">
    <rect x="-5" y="-5" width="10" height="10" rx="1" transform="rotate(45)" fill="white" opacity="0.14"/>
    <rect x="-3" y="-3" width="6" height="6" rx="0.5" transform="rotate(45)" fill="white" opacity="0.22"/>
  </g>

  <!-- $50M -->
  <g transform="translate(236, 126)">
    <rect x="-5.5" y="-5.5" width="11" height="11" rx="1" transform="rotate(45)" fill="#991B1B" opacity="0.2"/>
    <rect x="-3" y="-3" width="6" height="6" rx="0.5" transform="rotate(45)" fill="white" opacity="0.25"/>
  </g>

  <!-- $250M -->
  <g transform="translate(298, 83)">
    <rect x="-6" y="-6" width="12" height="12" rx="1.5" transform="rotate(45)" fill="#991B1B" opacity="0.25"/>
    <rect x="-3.5" y="-3.5" width="7" height="7" rx="0.5" transform="rotate(45)" fill="white" opacity="0.3"/>
  </g>

  <!-- $1B - Final milestone -->
  <g transform="translate(360, 40)">
    <circle r="14" fill="#991B1B" opacity="0.2"/>
    <rect x="-7" y="-7" width="14" height="14" rx="2" transform="rotate(45)" fill="#991B1B" opacity="0.35"/>
    <rect x="-4" y="-4" width="8" height="8" rx="1" transform="rotate(45)" fill="white" opacity="0.4"/>
  </g>

  <!-- Connecting dots between milestones (progress trail) -->
  <g fill="white" opacity="0.06">
    <circle cx="81" cy="234" r="1"/>
    <circle cx="93" cy="224" r="1"/>
    <circle cx="143" cy="191" r="1"/>
    <circle cx="155" cy="181" r="1"/>
    <circle cx="205" cy="148" r="1"/>
    <circle cx="217" cy="138" r="1"/>
    <circle cx="267" cy="105" r="1"/>
    <circle cx="279" cy="95" r="1"/>
    <circle cx="329" cy="62" r="1"/>
    <circle cx="341" cy="52" r="1"/>
  </g>

  <!-- Milestone labels -->
  <text x="55" y="270" font-family="system-ui" font-size="8" fill="white" opacity="0.25">$0</text>
  <text x="117" y="228" font-family="system-ui" font-size="8" fill="white" opacity="0.28">$1M</text>
  <text x="179" y="185" font-family="system-ui" font-size="8" fill="white" opacity="0.3">$10M</text>
  <text x="241" y="142" font-family="system-ui" font-size="8" fill="white" opacity="0.33">$50M</text>
  <text x="303" y="99" font-family="system-ui" font-size="9" fill="white" opacity="0.36">$250M</text>
  <text x="360" y="28" font-family="system-ui" font-size="12" fill="white" opacity="0.5" text-anchor="middle" font-weight="300">$1B+</text>

  <!-- Vertical era markers at bottom -->
  <g font-family="system-ui" font-size="6" fill="white" opacity="0.15">
    <text x="80" y="290" text-anchor="middle">LAUNCH</text>
    <text x="175" y="290" text-anchor="middle">GROWTH</text>
    <text x="270" y="290" text-anchor="middle">SCALE</text>
    <text x="355" y="290" text-anchor="middle">EMPIRE</text>
  </g>

  <!-- Thin era separator lines -->
  <g stroke="rgba(255,255,255,0.05)" stroke-width="0.3">
    <line x1="130" y1="270" x2="130" y2="285"/>
    <line x1="220" y1="270" x2="220" y2="285"/>
    <line x1="315" y1="270" x2="315" y2="285"/>
  </g>
</svg>