<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">Mobile Apps</title>
  <desc id="desc">iOS and Android products for real workflows</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2A2420"/>
    </linearGradient>
    <linearGradient id="screen-bg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#F8F5F0"/>
      <stop offset="1" stop-color="#EDE8E0"/>
    </linearGradient>
    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </linearGradient>
    <linearGradient id="dark-screen" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2D2926"/>
    </linearGradient>
    <filter id="phone-shadow">
      <feDropShadow dx="0" dy="24" stdDeviation="30" flood-color="#000" flood-opacity="0.5"/>
    </filter>
    <filter id="glow">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <rect width="1200" height="720" fill="url(#bg)"/>
  <!-- Background glow circles -->
  <circle cx="400" cy="360" r="280" fill="#CF6A3C" opacity="0.04"/>
  <circle cx="800" cy="360" r="280" fill="#7B6ABA" opacity="0.04"/>
  <circle cx="600" cy="700" r="200" fill="#CF6A3C" opacity="0.06"/>

  <!-- Label -->
  <text x="600" y="60" fill="#6B6560" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle" letter-spacing="3">MOBILE APPS · iOS &amp; ANDROID</text>

  <!-- Phone 1: Home / Dashboard screen -->
  <rect x="220" y="80" width="260" height="540" rx="36" fill="#0A0A0A" filter="url(#phone-shadow)"/>
  <rect x="226" y="86" width="248" height="528" rx="30" fill="#1A1614"/>
  <!-- Notch -->
  <rect x="306" y="86" width="88" height="20" rx="10" fill="#0A0A0A"/>
  <!-- Status bar -->
  <text x="240" y="116" fill="#9B9490" font-size="8" font-family="system-ui">9:41</text>
  <text x="456" y="116" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="end">●●●</text>
  <!-- Screen content: dark mode app -->
  <text x="244" y="144" fill="#F5F0E8" font-size="14" font-weight="700" font-family="system-ui">Good morning,</text>
  <text x="244" y="162" fill="#CF6A3C" font-size="14" font-weight="700" font-family="system-ui">Kwame 👋</text>
  <text x="244" y="180" fill="#6B6560" font-size="9" font-family="system-ui">Monday, 28 April 2026</text>
  <!-- Summary cards row -->
  <rect x="238" y="192" width="110" height="64" rx="12" fill="#252220"/>
  <text x="250" y="214" fill="#6B6560" font-size="7" font-family="system-ui">TODAY'S TASKS</text>
  <text x="250" y="236" fill="#F5F0E8" font-size="22" font-weight="800" font-family="system-ui">7</text>
  <rect x="250" y="245" width="56" height="4" rx="2" fill="#CF6A3C"/>
  <rect x="356" y="192" width="110" height="64" rx="12" fill="#252220"/>
  <text x="368" y="214" fill="#6B6560" font-size="7" font-family="system-ui">COMPLETED</text>
  <text x="368" y="236" fill="#28CA42" font-size="22" font-weight="800" font-family="system-ui">12</text>
  <rect x="368" y="245" width="56" height="4" rx="2" fill="#28CA42" opacity="0.7"/>
  <!-- Activity feed -->
  <text x="244" y="278" fill="#9B9490" font-size="9" font-weight="600" font-family="system-ui">RECENT ACTIVITY</text>
  <rect x="238" y="284" width="230" height="48" rx="10" fill="#252220"/>
  <circle cx="256" cy="308" r="14" fill="#CF6A3C" opacity="0.3"/>
  <text x="256" y="312" fill="#CF6A3C" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">AK</text>
  <text x="278" y="302" fill="#F5F0E8" font-size="9" font-weight="600" font-family="system-ui">Invoice approved</text>
  <text x="278" y="316" fill="#6B6560" font-size="8" font-family="system-ui">INV-2847 · GHS 4,250</text>
  <text x="456" y="302" fill="#28CA42" font-size="8" font-family="system-ui" text-anchor="end">✓</text>
  <rect x="238" y="338" width="230" height="48" rx="10" fill="#252220"/>
  <circle cx="256" cy="362" r="14" fill="#7B6ABA" opacity="0.3"/>
  <text x="256" y="366" fill="#7B6ABA" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">SB</text>
  <text x="278" y="356" fill="#F5F0E8" font-size="9" font-weight="600" font-family="system-ui">New message</text>
  <text x="278" y="370" fill="#6B6560" font-size="8" font-family="system-ui">From Sofia · 3 mins ago</text>
  <text x="456" y="356" fill="#CF6A3C" font-size="8" font-family="system-ui" text-anchor="end">●</text>
  <!-- Quick actions -->
  <text x="244" y="406" fill="#9B9490" font-size="9" font-weight="600" font-family="system-ui">QUICK ACTIONS</text>
  <rect x="238" y="412" width="106" height="80" rx="12" fill="#252220"/>
  <rect x="270" y="428" width="40" height="28" rx="8" fill="#CF6A3C" opacity="0.2"/>
  <text x="290" y="446" fill="#CF6A3C" font-size="16" font-family="system-ui" text-anchor="middle">+</text>
  <text x="290" y="472" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">New Task</text>
  <rect x="354" y="412" width="106" height="80" rx="12" fill="#252220"/>
  <rect x="386" y="428" width="40" height="28" rx="8" fill="#7B6ABA" opacity="0.2"/>
  <text x="406" y="446" fill="#7B6ABA" font-size="16" font-family="system-ui" text-anchor="middle">📋</text>
  <text x="406" y="472" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Reports</text>
  <!-- Bottom nav -->
  <rect x="226" y="564" width="248" height="50" rx="0" fill="#252220"/>
  <rect x="226" y="604" width="248" height="10" rx="0" fill="#252220"/>
  <text x="284" y="592" fill="#CF6A3C" font-size="18" font-family="system-ui" text-anchor="middle">⌂</text>
  <text x="350" y="592" fill="#6B6560" font-size="18" font-family="system-ui" text-anchor="middle">◫</text>
  <text x="416" y="592" fill="#6B6560" font-size="18" font-family="system-ui" text-anchor="middle">☆</text>
  <rect x="326" y="608" width="48" height="4" rx="2" fill="#F5F0E8"/>

  <!-- Phone 2: Checkout / Form screen -->
  <rect x="720" y="80" width="260" height="540" rx="36" fill="#0A0A0A" filter="url(#phone-shadow)"/>
  <rect x="726" y="86" width="248" height="528" rx="30" fill="#FDFAF7"/>
  <rect x="806" y="86" width="88" height="20" rx="10" fill="#0A0A0A"/>
  <text x="740" y="116" fill="#6B6560" font-size="8" font-family="system-ui">9:41</text>
  <text x="956" y="116" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="end">●●●</text>
  <!-- Back nav -->
  <text x="744" y="142" fill="#CF6A3C" font-size="11" font-family="system-ui">←</text>
  <text x="850" y="142" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui" text-anchor="middle">Checkout</text>
  <!-- Progress -->
  <rect x="738" y="152" width="228" height="6" rx="3" fill="#E8E4DC"/>
  <rect x="738" y="152" width="152" height="6" rx="3" fill="#CF6A3C"/>
  <text x="738" y="170" fill="#9B9490" font-size="8" font-family="system-ui">Step 2 of 3 — Payment</text>
  <!-- Form -->
  <text x="738" y="196" fill="#1C1714" font-size="10" font-weight="600" font-family="system-ui">Order summary</text>
  <rect x="738" y="202" width="228" height="52" rx="8" fill="#F0EDE8"/>
  <text x="750" y="222" fill="#6B6560" font-size="8" font-family="system-ui">Organic Linen Tee × 2</text>
  <text x="950" y="222" fill="#1C1714" font-size="9" font-weight="600" font-family="system-ui" text-anchor="end">GHS 290</text>
  <text x="750" y="238" fill="#6B6560" font-size="8" font-family="system-ui">Canvas Tote Bag × 1</text>
  <text x="950" y="238" fill="#1C1714" font-size="9" font-weight="600" font-family="system-ui" text-anchor="end">GHS 89</text>
  <line x1="738" y1="244" x2="966" y2="244" stroke="#DDD8D0" stroke-width="1"/>
  <text x="750" y="248" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui">Total</text>
  <text x="950" y="248" fill="#CF6A3C" font-size="11" font-weight="800" font-family="system-ui" text-anchor="end">GHS 379</text>
  <!-- Card input -->
  <text x="738" y="274" fill="#1C1714" font-size="10" font-weight="600" font-family="system-ui">Card details</text>
  <rect x="738" y="280" width="228" height="36" rx="8" fill="#F0EDE8" stroke="#CF6A3C" stroke-width="1.5"/>
  <text x="752" y="302" fill="#1C1714" font-size="10" font-family="system-ui">•••• •••• •••• 4242</text>
  <text x="950" y="302" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="end">Visa ✓</text>
  <rect x="738" y="322" width="108" height="36" rx="8" fill="#F0EDE8"/>
  <text x="752" y="344" fill="#6B6560" font-size="9" font-family="system-ui">MM / YY</text>
  <rect x="856" y="322" width="110" height="36" rx="8" fill="#F0EDE8"/>
  <text x="870" y="344" fill="#6B6560" font-size="9" font-family="system-ui">CVV</text>
  <!-- Mobile pay option -->
  <text x="738" y="378" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">— or pay with —</text>
  <rect x="738" y="386" width="228" height="36" rx="18" fill="#1C1714"/>
  <text x="852" y="408" fill="#F5F0E8" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle"> Pay</text>
  <!-- CTA -->
  <rect x="738" y="432" width="228" height="44" rx="22" fill="#CF6A3C"/>
  <text x="852" y="458" fill="#FFFCF8" font-size="13" font-weight="700" font-family="system-ui" text-anchor="middle">Place Order →</text>
  <text x="852" y="492" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">256-bit SSL · Secured by Stripe</text>
  <!-- Trust badges -->
  <rect x="738" y="504" width="72" height="26" rx="6" fill="#F0EDE8"/>
  <text x="774" y="520" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">🔒 Secure</text>
  <rect x="818" y="504" width="72" height="26" rx="6" fill="#F0EDE8"/>
  <text x="854" y="520" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">↩ Returns</text>
  <rect x="898" y="504" width="72" height="26" rx="6" fill="#F0EDE8"/>
  <text x="934" y="520" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">★ 4.9</text>
  <!-- Bottom bar -->
  <rect x="726" y="564" width="248" height="50" rx="0" fill="#F0EDE8"/>
  <rect x="726" y="604" width="248" height="10" rx="0" fill="#F0EDE8"/>
  <text x="784" y="592" fill="#6B6560" font-size="18" font-family="system-ui" text-anchor="middle">⌂</text>
  <text x="850" y="592" fill="#6B6560" font-size="18" font-family="system-ui" text-anchor="middle">◫</text>
  <text x="916" y="592" fill="#6B6560" font-size="18" font-family="system-ui" text-anchor="middle">☆</text>
  <rect x="826" y="608" width="48" height="4" rx="2" fill="#1C1714"/>

  <!-- Side annotations -->
  <text x="600" y="310" fill="#6B6560" font-size="10" font-weight="700" font-family="system-ui" text-anchor="middle">iOS &amp; Android</text>
  <text x="600" y="328" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">One codebase</text>
  <text x="600" y="346" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">React Native</text>
  <line x1="484" y1="340" x2="558" y2="340" stroke="#3A3530" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="642" y1="340" x2="716" y2="340" stroke="#3A3530" stroke-width="1" stroke-dasharray="3,3"/>

  <!-- Footer labels -->
  <text x="350" y="660" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="middle">Dark mode · Push notifications</text>
  <text x="350" y="676" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Offline-first · Biometric auth</text>
  <text x="850" y="660" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="middle">Mobile-optimised checkout</text>
  <text x="850" y="676" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Stripe · Apple Pay · Mobile Money</text>
</svg>
