---
---

<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
  <div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
    <div class="h-[15px]"></div>
    <div class="font-bold text-text-primary text-[44px] text-center tracking-[-2.2px] leading-[1.04] max-w-[1076px]">
      <p>Start with one conversation.</p>
      <p>Build your own communication space.</p>
    </div>
    <div class="h-5"></div>
    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
      Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
    </p>
    <div class="h-8"></div>

    <div class="flex gap-2 items-center">
      <!-- Android badge -->
      <div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
        <img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
        <div class="flex flex-col gap-[3px]">
          <p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
          <p class="font-bold text-white text-[15px]">Download APK</p>
        </div>
      </div>

      <!-- iOS badge -->
      <div class="bg-[rgba(18,18,18,0.94)] border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
        <div class="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
          <img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
        </div>
        <div class="flex flex-col gap-[3px]">
          <p class="font-bold text-[#ccc] text-[11px] tracking-[0.66px]">IOS</p>
          <p class="font-bold text-white text-[15px]">Coming on App Store</p>
        </div>
      </div>
    </div>
  </div>
</section>