<svg width="1200" height="320" viewBox="0 0 1200 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="File Picker for iOS and macOS">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4338CA"/>
      <stop offset="55%" stop-color="#2563EB"/>
      <stop offset="100%" stop-color="#06B6D4"/>
    </linearGradient>
    <linearGradient id="folderBack" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.30"/>
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.18"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1200" height="320" rx="28" fill="url(#bg)"/>

  <!-- Apple logo watermark, path from the official mark:
       https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg -->
  <g transform="translate(946.4,35) scale(0.23)" fill="#FFFFFF" opacity="0.14">
    <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
  </g>
  <circle cx="150" cy="30" r="10" fill="#FFFFFF" opacity="0.35"/>
  <circle cx="330" cy="55" r="6" fill="#FFFFFF" opacity="0.3"/>
  <circle cx="95" cy="230" r="7" fill="#FFFFFF" opacity="0.3"/>

  <!-- floating file cards -->
  <g transform="translate(150,150) rotate(-14)">
    <rect x="-46" y="-60" width="92" height="118" rx="14" fill="#FDBA74"/>
    <rect x="-30" y="-38" width="60" height="8" rx="4" fill="#FFFFFF" opacity="0.85"/>
    <rect x="-30" y="-20" width="60" height="8" rx="4" fill="#FFFFFF" opacity="0.65"/>
    <rect x="-30" y="-2" width="38" height="8" rx="4" fill="#FFFFFF" opacity="0.65"/>
  </g>

  <g transform="translate(238,128) rotate(9)">
    <rect x="-46" y="-62" width="92" height="122" rx="14" fill="#5EEAD4"/>
    <circle cx="-14" cy="-30" r="12" fill="#FFFFFF" opacity="0.9"/>
    <path d="M -32 8 L -8 -16 L 10 2 L 22 -10 L 34 2 L 34 8 Z" fill="#FFFFFF" opacity="0.85"/>
  </g>

  <g transform="translate(196,196) rotate(-3)">
    <rect x="-50" y="-64" width="100" height="128" rx="16" fill="#FFFFFF"/>
    <rect x="-32" y="-40" width="64" height="9" rx="4.5" fill="#93C5FD"/>
    <rect x="-32" y="-20" width="64" height="9" rx="4.5" fill="#BFDBFE"/>
    <rect x="-32" y="0" width="40" height="9" rx="4.5" fill="#BFDBFE"/>
    <path d="M -14 32 L -2 44 L 22 20" fill="none" stroke="#34D399" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- open folder in front -->
  <path d="M 60 250 L 340 250 L 322 168 Q 318 152 300 152 L 210 152 L 196 130 Q 190 120 176 120 L 96 120 Q 82 120 78 134 Z" fill="url(#folderBack)" stroke="#FFFFFF" stroke-opacity="0.5" stroke-width="2"/>

  <!-- title -->
  <text x="440" y="150" font-family="Helvetica, Arial, sans-serif" font-size="72" font-weight="700" fill="#FFFFFF">File Picker</text>
  <text x="442" y="196" font-family="Helvetica, Arial, sans-serif" font-size="26" font-weight="400" fill="#E0E7FF">iOS and macOS implementation</text>

  <!-- platform pills -->
  <g font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="600" fill="#1E293B">
    <rect x="442" y="228" width="70" height="38" rx="19" fill="#FFFFFF" opacity="0.92"/>
    <text x="477" y="253" text-anchor="middle">iOS</text>

    <rect x="524" y="228" width="90" height="38" rx="19" fill="#FFFFFF" opacity="0.92"/>
    <text x="569" y="253" text-anchor="middle">macOS</text>
  </g>
</svg>
