<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 844">
  <defs>
    <linearGradient id="curveGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#991B1B" stop-opacity="0.3"/>
      <stop offset="50%" stop-color="#991B1B" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#991B1B" stop-opacity="1"/>
    </linearGradient>
    <linearGradient id="curveFill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#991B1B" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="#991B1B" stop-opacity="0.01"/>
    </linearGradient>
    <clipPath id="screenClip">
      <rect x="0" y="0" width="390" height="844" rx="44"/>
    </clipPath>
    <filter id="glow">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

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

  <g clip-path="url(#screenClip)">
    <!-- Subtle background grid -->
    <line x1="0" y1="150" x2="390" y2="150" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
    <line x1="0" y1="250" x2="390" y2="250" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
    <line x1="0" y1="350" x2="390" y2="350" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
    <line x1="0" y1="450" x2="390" y2="450" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
    <line x1="0" y1="550" x2="390" y2="550" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
    <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; Overview</text>
    <circle cx="360" cy="100" r="14" fill="rgba(255,255,255,0.06)"/>
    <text x="355" y="105" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="14">&#8942;</text>

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

    <!-- Label -->
    <text x="195" y="175" fill="rgba(255,255,255,0.4)" font-family="sans-serif" font-size="14" font-weight="500" text-anchor="middle" letter-spacing="3">TOTAL CAREER SALES</text>

    <!-- Big number -->
    <text x="195" y="260" fill="white" font-family="monospace" font-size="80" font-weight="800" text-anchor="middle">$1B+</text>

    <!-- Subtitle -->
    <text x="195" y="295" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="14" text-anchor="middle">Lifetime across all brands and channels</text>

    <!-- Badge -->
    <rect x="140" y="312" width="110" height="28" rx="14" fill="rgba(34,197,94,0.12)"/>
    <text x="195" y="331" fill="#22C55E" font-family="monospace" font-size="13" font-weight="600" text-anchor="middle">All-Time High</text>

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

    <!-- Growth curve chart area -->
    <text x="28" y="395" fill="rgba(255,255,255,0.5)" font-family="sans-serif" font-size="12" font-weight="600" letter-spacing="1">GROWTH TRAJECTORY</text>

    <!-- Y-axis labels -->
    <text x="28" y="430" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$1B</text>
    <text x="28" y="490" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$750M</text>
    <text x="28" y="550" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$500M</text>
    <text x="28" y="610" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$250M</text>
    <text x="28" y="670" fill="rgba(255,255,255,0.2)" font-family="monospace" font-size="10">$0</text>

    <!-- Chart grid lines -->
    <line x1="70" y1="425" x2="370" y2="425" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="485" x2="370" y2="485" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="545" x2="370" y2="545" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="605" x2="370" y2="605" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
    <line x1="70" y1="665" x2="370" y2="665" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>

    <!-- Smooth exponential growth curve - fill -->
    <path d="M70,665 C120,663 160,658 200,648 C230,640 255,620 280,585 C300,555 320,500 340,450 C355,415 365,430 370,425 L370,665 Z" fill="url(#curveFill)"/>

    <!-- Smooth exponential growth curve - line -->
    <path d="M70,665 C120,663 160,658 200,648 C230,640 255,620 280,585 C300,555 320,500 340,450 C355,415 365,430 370,425" fill="none" stroke="url(#curveGrad)" stroke-width="2.5" stroke-linecap="round"/>

    <!-- Endpoint glow dot -->
    <circle cx="370" cy="425" r="6" fill="#991B1B" opacity="0.3"/>
    <circle cx="370" cy="425" r="3" fill="#991B1B"/>

    <!-- X-axis labels -->
    <text x="70" y="688" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">2015</text>
    <text x="145" y="688" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">2017</text>
    <text x="220" y="688" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">2019</text>
    <text x="295" y="688" fill="rgba(255,255,255,0.2)" font-family="sans-serif" font-size="10" text-anchor="middle">2022</text>
    <text x="370" y="688" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10" text-anchor="end">Now</text>

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

    <!-- Bottom stats -->
    <rect x="28" y="726" width="160" height="56" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <text x="44" y="748" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10">Brands Built</text>
    <text x="44" y="770" fill="white" font-family="monospace" font-size="20" font-weight="700">5+</text>

    <rect x="202" y="726" width="160" height="56" rx="10" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
    <text x="218" y="748" fill="rgba(255,255,255,0.3)" font-family="sans-serif" font-size="10">Years Active</text>
    <text x="218" y="770" fill="white" font-family="monospace" font-size="20" font-weight="700">10+</text>

    <!-- 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>