<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
  <defs>
    <radialGradient id="gGlow" cx="50%" cy="0%" r="80%"><stop offset="0%" stop-color="#0A84FF" stop-opacity="0.07"/><stop offset="100%" stop-color="#060C18" stop-opacity="0"/></radialGradient>
    <linearGradient id="gHero" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FF8C50"/><stop offset="60%" stop-color="#C2320A"/><stop offset="100%" stop-color="#0A0808"/></linearGradient>
    <linearGradient id="gHeroOvl" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.68)"/></linearGradient>
    <linearGradient id="gC1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0A84FF"/><stop offset="100%" stop-color="#0050A0"/></linearGradient>
    <linearGradient id="gC2" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#30D158"/><stop offset="100%" stop-color="#1A7032"/></linearGradient>
    <linearGradient id="gC3" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#BF5AF2"/><stop offset="100%" stop-color="#6B35FF"/></linearGradient>
    <filter id="fs"><feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.4"/></filter>
    <clipPath id="avClip"><circle cx="358" cy="73" r="20"/></clipPath>
    <clipPath id="heroClip"><rect x="16" y="106" width="358" height="198" rx="22"/></clipPath>
  </defs>
  <rect width="390" height="844" fill="#060C18"/>
  <rect width="390" height="400" fill="url(#gGlow)"/>
  <!-- Status bar -->
  <text x="22" y="29" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="600" dominant-baseline="middle">9:41</text>
  <rect x="308" y="22" width="3" height="7" rx="1.2" fill="white"/><rect x="313" y="20" width="3" height="9" rx="1.2" fill="white"/><rect x="318" y="18" width="3" height="11" rx="1.2" fill="white"/><rect x="323" y="16" width="3" height="13" rx="1.2" fill="white"/>
  <path d="M332 24 Q337 19 342 24" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round"/><path d="M334 27 Q337 24 340 27" fill="none" stroke="white" stroke-width="1.8" stroke-linecap="round"/><circle cx="337" cy="30" r="1.5" fill="white"/>
  <rect x="350" y="19" width="22" height="11" rx="3" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/><rect x="373" y="22" width="2" height="5" rx="1" fill="rgba(255,255,255,0.4)"/><rect x="352" y="21" width="16" height="7" rx="1.5" fill="#30D158"/>
  <!-- Roam brand header -->
  <text x="22" y="57" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Good morning, Alex</text>
  <path d="M22 65 Q22 57 30 57 Q38 57 38 65 Q38 73 30 81 Q22 73 22 65 Z" fill="#0A84FF" fill-opacity="0.18" stroke="#0A84FF" stroke-width="1.2"/>
  <circle cx="30" cy="65" r="3.5" fill="#0A84FF"/>
  <text x="46" y="93" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="28" font-weight="800" letter-spacing="-1">Roam</text>
  <circle cx="358" cy="73" r="20" fill="#1A2A3E"/>
  <circle cx="358" cy="68" r="9" fill="#FF6B35"/>
  <ellipse cx="358" cy="87" rx="13" ry="9" fill="#FF6B35" clip-path="url(#avClip)"/>
  <!-- Hero card: Santorini -->
  <rect x="16" y="106" width="358" height="198" rx="22" fill="url(#gHero)" filter="url(#fs)"/>
  <ellipse cx="195" cy="148" rx="200" ry="55" fill="#FF8850" fill-opacity="0.18"/>
  <path d="M16 255 L80 215 L130 238 L185 193 L238 226 L298 183 L348 214 L374 197 L374 304 L16 304 Z" fill="#5A0808" fill-opacity="0.55" clip-path="url(#heroClip)"/>
  <rect x="50" y="218" width="24" height="30" rx="4" fill="rgba(255,255,255,0.4)" clip-path="url(#heroClip)"/>
  <rect x="78" y="210" width="20" height="38" rx="4" fill="rgba(255,255,255,0.36)" clip-path="url(#heroClip)"/>
  <ellipse cx="62" cy="218" rx="12" ry="6" fill="rgba(100,160,255,0.5)" clip-path="url(#heroClip)"/>
  <rect x="16" y="106" width="358" height="198" rx="22" fill="url(#gHeroOvl)"/>
  <rect x="30" y="122" width="106" height="22" rx="11" fill="rgba(0,0,0,0.45)"/>
  <text x="83" y="137" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="middle">&#x2726; Editor's Pick</text>
  <text x="30" y="220" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="24" font-weight="800" letter-spacing="-0.5">Santorini, Greece</text>
  <text x="30" y="242" fill="rgba(255,255,255,0.7)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Iconic views &#xB7; Volcanic beaches</text>
  <rect x="30" y="255" width="144" height="30" rx="15" fill="rgba(0,0,0,0.4)"/>
  <text x="102" y="274" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="600" text-anchor="middle" dominant-baseline="middle">From $1,199 &#xB7; 8 nights</text>
  <text x="30" y="296" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">&#9733; 4.9</text>
  <text x="66" y="296" fill="rgba(255,255,255,0.5)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13"> &#xB7; 2.4k reviews</text>
  <path d="M344 118 L356 118 L356 142 L350 137 L344 142 Z" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
  <!-- Category chips -->
  <rect x="16" y="318" width="68" height="28" rx="14" fill="#0A84FF" fill-opacity="0.22"/>
  <text x="50" y="336" fill="#0A84FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" font-weight="700" text-anchor="middle" dominant-baseline="middle">Beach</text>
  <rect x="92" y="318" width="82" height="28" rx="14" fill="#0E1828"/>
  <text x="133" y="336" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle">Mountain</text>
  <rect x="182" y="318" width="52" height="28" rx="14" fill="#0E1828"/>
  <text x="208" y="336" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle">City</text>
  <rect x="242" y="318" width="66" height="28" rx="14" fill="#0E1828"/>
  <text x="275" y="336" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle">Culture</text>
  <!-- Trending section -->
  <text x="22" y="372" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="16" font-weight="700">Trending Now</text>
  <text x="338" y="372" fill="#0A84FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13" font-weight="600">See all</text>
  <!-- 3 destination cards -->
  <rect x="16" y="386" width="108" height="112" rx="18" fill="url(#gC1)" filter="url(#fs)"/>
  <rect x="54" y="424" width="11" height="38" rx="1.5" fill="rgba(255,255,255,0.35)"/>
  <path d="M40 424 L76 424 L72 412 L44 412 Z" fill="rgba(255,255,255,0.4)"/>
  <path d="M46 412 L70 412 L67 402 L49 402 Z" fill="rgba(255,255,255,0.35)"/>
  <text x="70" y="510" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="600" text-anchor="middle">Kyoto</text>
  <text x="70" y="524" fill="rgba(255,255,255,0.65)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Japan</text>
  <rect x="136" y="386" width="118" height="112" rx="18" fill="url(#gC2)" filter="url(#fs)"/>
  <path d="M181 428 L195 412 L209 428 Z" fill="rgba(255,255,255,0.4)"/>
  <path d="M175 438 L195 418 L215 438 Z" fill="rgba(255,255,255,0.35)"/>
  <rect x="193" y="438" width="4" height="14" rx="1" fill="rgba(255,255,255,0.3)"/>
  <text x="195" y="510" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="600" text-anchor="middle">Patagonia</text>
  <text x="195" y="524" fill="rgba(255,255,255,0.65)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Argentina</text>
  <rect x="266" y="386" width="108" height="112" rx="18" fill="url(#gC3)" filter="url(#fs)"/>
  <path d="M307 444 L320 444 L324 454 L322 454 L322 466 L312 466 L312 454 L310 454 Z" fill="rgba(255,255,255,0.35)"/>
  <path d="M309 444 L322 444 L320 438 L311 438 Z" fill="rgba(255,255,255,0.4)"/>
  <line x1="315" y1="438" x2="315" y2="430" stroke="rgba(255,255,255,0.5)" stroke-width="2"/>
  <text x="320" y="510" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="600" text-anchor="middle">Paris</text>
  <text x="320" y="524" fill="rgba(255,255,255,0.65)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">France</text>
  <!-- Weekend getaways -->
  <text x="22" y="550" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="16" font-weight="700">Weekend Getaways</text>
  <rect x="16" y="564" width="358" height="72" rx="16" fill="#0E1828" filter="url(#fs)"/>
  <rect x="28" y="576" width="50" height="48" rx="12" fill="#0A84FF" fill-opacity="0.22"/>
  <circle cx="50" cy="590" r="5" fill="#0A84FF"/>
  <path d="M36 596 Q50 584 64 596" fill="#0A84FF" fill-opacity="0.5" stroke="none"/>
  <text x="92" y="594" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="14" font-weight="600">Lake Tahoe</text>
  <text x="92" y="612" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">California &#xB7; 4h drive</text>
  <text x="92" y="628" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">&#9733; 4.7 <tspan fill="#636366"> &#xB7; $220/night</tspan></text>
  <text x="360" y="602" fill="#0A84FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" text-anchor="end" dominant-baseline="middle">&#x203A;</text>
  <rect x="16" y="646" width="358" height="72" rx="16" fill="#0E1828" filter="url(#fs)"/>
  <rect x="28" y="658" width="50" height="48" rx="12" fill="#30D158" fill-opacity="0.22"/>
  <path d="M42 680 L52 666 L62 680 Z" fill="#30D158" fill-opacity="0.6"/>
  <path d="M38 686 L52 670 L66 686 Z" fill="#30D158" fill-opacity="0.4"/>
  <rect x="50" y="686" width="4" height="12" rx="1" fill="#30D158" fill-opacity="0.5"/>
  <text x="92" y="676" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="14" font-weight="600">Yosemite Valley</text>
  <text x="92" y="694" fill="#636366" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">California &#xB7; 5h drive</text>
  <text x="92" y="710" fill="#FFD60A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">&#9733; 4.9 <tspan fill="#636366"> &#xB7; $160/night</tspan></text>
  <text x="360" y="684" fill="#0A84FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="22" text-anchor="end" dominant-baseline="middle">&#x203A;</text>
  <!-- Tab bar: Explore active -->
  <rect x="0" y="762" width="390" height="82" fill="#060C18"/>
  <line x1="0" y1="762" x2="390" y2="762" stroke="#0E1C2E" stroke-width="0.5"/>
  <path d="M42 785 A8 8 0 0 1 60 793 A8 8 0 0 1 42 793 Z" fill="none" stroke="#0A84FF" stroke-width="2"/>
  <circle cx="51" cy="789" r="3" fill="#0A84FF"/>
  <path d="M41 793 L61 793 L61 808 L41 808 Z" fill="none" stroke="#0A84FF" stroke-width="2" stroke-linejoin="round"/>
  <text x="51" y="822" fill="#0A84FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="600" text-anchor="middle">Explore</text>
  <path d="M121 786 L131 786 L131 808 L121 808 Z M125 786 L125 780 L133 780 M119 808 L133 808" fill="none" stroke="#48484A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <text x="126" y="822" fill="#48484A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Trips</text>
  <circle cx="195" cy="793" r="9" fill="none" stroke="#48484A" stroke-width="2"/>
  <line x1="201" y1="799" x2="207" y2="805" stroke="#48484A" stroke-width="2" stroke-linecap="round"/>
  <text x="195" y="822" fill="#48484A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Search</text>
  <path d="M253 784 L265 784 L265 808 L259 803 L253 808 Z" fill="none" stroke="#48484A" stroke-width="2" stroke-linejoin="round"/>
  <text x="259" y="822" fill="#48484A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Saved</text>
  <circle cx="341" cy="791" r="8" fill="none" stroke="#48484A" stroke-width="2"/><circle cx="341" cy="788" r="3" fill="#48484A"/>
  <path d="M333 799 Q341 795 349 799" fill="none" stroke="#48484A" stroke-width="2" stroke-linecap="round"/>
  <text x="341" y="822" fill="#48484A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Profile</text>
  <rect x="148" y="836" width="94" height="4" rx="2" fill="rgba(255,255,255,0.22)"/>
</svg>
