<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 844">
  <defs>
    <linearGradient id="growthLine" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#991B1B" stop-opacity="0.2"/>
      <stop offset="30%" stop-color="#991B1B" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#991B1B" stop-opacity="1"/>
    </linearGradient>
    <linearGradient id="growthFill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#991B1B" stop-opacity="0.2"/>
      <stop offset="70%" stop-color="#991B1B" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#991B1B" stop-opacity="0"/>
    </linearGradient>
    <clipPath id="screenClip">
      <rect x="0" y="0" width="390" height="844" rx="44"/>
    </clipPath>
  </defs>

  <!-- Phone frame -->
  <rect width="390" height="844" rx="44" fill="#0A0A0C"/>

  <g clip-path="url(#screenClip)">
    <!-- Subtle background grid -->
    <line x1="97" y1="0" x2="97" y2="844" stroke="rgba(255,255,255,0.02)" stroke-width="0.5"/>
    <line x1="195" y1="0" x2="195" y2="844" stroke="rgba(255,255,255,0.02)" stroke-width="0.5"/>
    <line x1="293" y1="0" x2="293" y2="844" stroke="rgba(255,255,255,0.02)" stroke-width="0.5"/>

    <!-- Status bar -->
    <text x="36" y="58" fill="rgba(255,255,255,0.6)" font-family="sans-serif" font-size="14" font-weight="600">9:41</text>
    <rect x="300" y="48" width="4" height="6" rx="1" fill="rgba(255,255,255,0.4)"/>
    <rect x="307" y="45" width="4" height="9" rx="1" fill="rgba(255,255,255,0.5)"/>
    <rect x="314" y="42" width="4" height="12" rx="1" fill="rgba(255,255,255,0.6)"/>
    <rect x="321" y="39" width="4" height="15" rx="1" fill="rgba(255,255,255,0.7)"/>
    <rect x="338" y="43" width="22" height="11" rx="2.5" stroke="rgba(255,255,255,0.5)" stroke-width="1" fill="none"/>
    <rect x="340" y="45.5" width="16" height="6" rx="1" fill="rgba(255,255,255,0.5)"/>
    <rect x="361" y="47" width="1.5" height="3" rx="0.5" fill="rgba(255,255,255,0.3)"/>

    <!-- Nav bar -->
    <text x="28" y="105" fill="rgba(255,255,255,0.4)" font-family="sans-serif" font-size="15" font-weight="500">&#8592; Analytics</text>

    <!-- Toggle tabs -->
    <rect x="200" y="86" width="162" height="30" rx="8" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <rect x="202" y="88" width="52" height="26" rx="6" fill="rgba(153,27,27,0.3)"/>
    <text x="228" y="106" fill="white" font-family="sans-serif" font-size="11" font-weight="600" text-anchor="middle">1Y</text>
    <text x="282" y="106" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="11" text-anchor="middle">5Y</text>
    <text x="336" y="106" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="11" text-anchor="middle">All</text>

    <line x1="28" y1="125" x2="362" y2="125" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>

    <!-- Title section -->
    <text x="28" y="158" fill="rgba(255,255,255,0.4)" font-family="sans-serif" font-size="13" letter-spacing="2">REVENUE MILESTONE</text>
    <text x="28" y="195" fill="white" font-family="sans-serif" font-size="24" font-weight="700">$0 to $100M</text>
    <text x="28" y="220" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="13">Brand growth trajectory with key milestones</text>

    <line x1="28" y1="244" x2="362" y2="244" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>

    <!-- Chart area -->
    <!-- Y-axis labels -->
    <text x="28" y="280" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$100M</text>
    <text x="28" y="340" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$75M</text>
    <text x="28" y="400" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$50M</text>
    <text x="28" y="460" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$25M</text>
    <text x="28" y="520" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$10M</text>
    <text x="28" y="580" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$1M</text>
    <text x="28" y="630" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$0</text>

    <!-- Chart grid lines -->
    <line x1="70" y1="276" x2="370" y2="276" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="336" x2="370" y2="336" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="396" x2="370" y2="396" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="456" x2="370" y2="456" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="516" x2="370" y2="516" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="576" x2="370" y2="576" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="626" x2="370" y2="626" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>

    <!-- Exponential growth curve - fill area -->
    <path d="M70,626 C100,625 130,624 155,622 C180,618 200,610 220,595 C240,575 260,540 280,490 C300,430 320,360 340,310 C355,285 365,278 370,276 L370,626 Z" fill="url(#growthFill)"/>

    <!-- Exponential growth curve - line -->
    <path d="M70,626 C100,625 130,624 155,622 C180,618 200,610 220,595 C240,575 260,540 280,490 C300,430 320,360 340,310 C355,285 365,278 370,276" fill="none" stroke="url(#growthLine)" stroke-width="2.5" stroke-linecap="round"/>

    <!-- Milestone markers -->
    <!-- $1M milestone -->
    <circle cx="165" cy="576" r="5" fill="#0A0A0C" stroke="#991B1B" stroke-width="1.5"/>
    <line x1="165" y1="582" x2="165" y2="600" stroke="rgba(153,27,27,0.3)" stroke-width="0.5" stroke-dasharray="2,2"/>
    <rect x="135" y="601" width="60" height="20" rx="4" fill="rgba(153,27,27,0.2)" stroke="rgba(153,27,27,0.3)" stroke-width="0.5"/>
    <text x="165" y="615" fill="#991B1B" font-family="monospace" font-size="10" font-weight="600" text-anchor="middle">$1M</text>

    <!-- $10M milestone -->
    <circle cx="233" cy="516" r="5" fill="#0A0A0C" stroke="#991B1B" stroke-width="1.5"/>
    <line x1="233" y1="522" x2="233" y2="540" stroke="rgba(153,27,27,0.3)" stroke-width="0.5" stroke-dasharray="2,2"/>
    <rect x="203" y="541" width="60" height="20" rx="4" fill="rgba(153,27,27,0.2)" stroke="rgba(153,27,27,0.3)" stroke-width="0.5"/>
    <text x="233" y="555" fill="#991B1B" font-family="monospace" font-size="10" font-weight="600" text-anchor="middle">$10M</text>

    <!-- $50M milestone -->
    <circle cx="305" cy="396" r="5" fill="#0A0A0C" stroke="#991B1B" stroke-width="1.5"/>
    <line x1="305" y1="402" x2="305" y2="420" stroke="rgba(153,27,27,0.3)" stroke-width="0.5" stroke-dasharray="2,2"/>
    <rect x="275" y="421" width="60" height="20" rx="4" fill="rgba(153,27,27,0.2)" stroke="rgba(153,27,27,0.3)" stroke-width="0.5"/>
    <text x="305" y="435" fill="#991B1B" font-family="monospace" font-size="10" font-weight="600" text-anchor="middle">$50M</text>

    <!-- $100M milestone - current -->
    <circle cx="370" cy="276" r="7" fill="#991B1B" opacity="0.3"/>
    <circle cx="370" cy="276" r="4" fill="#991B1B"/>
    <rect x="310" y="256" width="56" height="20" rx="4" fill="#991B1B"/>
    <text x="338" y="270" fill="white" font-family="monospace" font-size="10" font-weight="700" text-anchor="middle">$100M</text>

    <!-- X-axis labels -->
    <text x="70" y="648" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">Y1</text>
    <text x="145" y="648" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">Y2</text>
    <text x="220" y="648" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">Y3</text>
    <text x="295" y="648" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">Y4</text>
    <text x="370" y="648" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10" text-anchor="end">Y5</text>

    <!-- Divider -->
    <line x1="28" y1="670" x2="362" y2="670" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>

    <!-- Bottom stats row -->
    <rect x="28" y="688" width="106" height="68" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <text x="42" y="710" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10">Time to $1M</text>
    <text x="42" y="738" fill="white" font-family="monospace" font-size="18" font-weight="700">8 mo</text>

    <rect x="142" y="688" width="106" height="68" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <text x="156" y="710" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10">Time to $10M</text>
    <text x="156" y="738" fill="white" font-family="monospace" font-size="18" font-weight="700">2.1 yr</text>

    <rect x="256" y="688" width="106" height="68" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <text x="270" y="710" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10">Growth Rate</text>
    <text x="270" y="738" fill="#22C55E" font-family="monospace" font-size="18" font-weight="700">312%</text>

    <!-- Bottom nav -->
    <rect x="0" y="790" width="390" height="54" fill="rgba(255,255,255,0.02)"/>
    <line x1="0" y1="790" x2="390" y2="790" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <circle cx="78" cy="814" r="3" fill="rgba(255,255,255,0.2)"/>
    <circle cx="156" cy="814" r="3" fill="#991B1B"/>
    <circle cx="234" cy="814" r="3" fill="rgba(255,255,255,0.2)"/>
    <circle cx="312" cy="814" r="3" fill="rgba(255,255,255,0.2)"/>

    <!-- Home indicator -->
    <rect x="130" y="832" width="130" height="4" rx="2" fill="rgba(255,255,255,0.15)"/>
  </g>

  <!-- Phone border -->
  <rect width="390" height="844" rx="44" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
</svg>