<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 400" fill="none">
  <defs>
    <linearGradient id="demoGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#833AB4"/>
      <stop offset="100%" stop-color="#E1306C"/>
    </linearGradient>
  </defs>
  <rect width="300" height="400" rx="20" fill="#0a0a0a"/>
  <!-- Header -->
  <rect x="0" y="0" width="300" height="80" rx="20" fill="url(#demoGrad1)"/>
  <rect x="0" y="60" width="300" height="20" fill="url(#demoGrad1)"/>
  <text x="150" y="45" font-family="Inter,-apple-system,sans-serif" font-weight="700" font-size="18" fill="white" text-anchor="middle">Connect Instagram</text>
  <!-- Instagram icon area -->
  <rect x="100" y="100" width="100" height="100" rx="24" fill="url(#demoGrad1)" opacity="0.2" stroke="url(#demoGrad1)" stroke-width="2"/>
  <text x="150" y="162" font-family="Arial" font-size="48" text-anchor="middle">📸</text>
  <!-- Instructions -->
  <text x="150" y="230" font-family="Inter,-apple-system,sans-serif" font-weight="600" font-size="14" fill="white" text-anchor="middle">Connect your account</text>
  <text x="150" y="252" font-family="Inter,-apple-system,sans-serif" font-size="11" fill="#9E9E9E" text-anchor="middle">We only access your saved posts</text>
  <text x="150" y="268" font-family="Inter,-apple-system,sans-serif" font-size="11" fill="#9E9E9E" text-anchor="middle">🔒 Bank-level security</text>
  <!-- CTA Button -->
  <rect x="40" y="300" width="220" height="50" rx="25" fill="url(#demoGrad1)"/>
  <text x="150" y="331" font-family="Inter,-apple-system,sans-serif" font-weight="700" font-size="15" fill="white" text-anchor="middle">Connect with Instagram</text>
  <!-- Privacy note -->
  <text x="150" y="375" font-family="Inter,-apple-system,sans-serif" font-size="10" fill="#555" text-anchor="middle">✅ Your data is private and secure</text>
</svg>
