fix(docs): Update Readme.md

Update Base.astro with new js
fix(style): Change IOS buttons style
2026-05-21 10:19:30 +08:00 · 2026-05-21 10:15:47 +08:00 · 2026-05-20 16:17:12 +08:00 · 2026-05-20 06:37:35 +00:00 · 2026-05-20 11:36:04 +08:00 · 2026-05-19 03:31:02 +00:00
74 changed files with 8844 additions and 1098 deletions
--- a/.env.deploy.example
+++ b/.env.deploy.example
@@ -0,0 +1,10 @@
 # Copy to .env.deploy for local runs: set -a && source .env.deploy && set +a && ./scripts/deploy-talkpro.sh
 #
 # Gitea Actions: only this secret is required (Settings → Secrets → Actions):
 #   TALKPRO_SSH_PRIVATE_KEY = full PEM file contents
 # Host/user/path defaults are in .gitea/workflows/deploy-talkpro.yml
 TALKPRO_HOST=13.214.179.69
 TALKPRO_USER=ubuntu
 TALKPRO_REMOTE_ROOT=/home/ubuntu/talkpro
 TALKPRO_SSH_KEY_FILE=/absolute/path/to/luis-only.pem
--- a/.gitea/workflows/deploy-talkpro.yml
+++ b/.gitea/workflows/deploy-talkpro.yml
@@ -0,0 +1,57 @@
 # Build talk-pro and rsync dist/ to the marketing VPS (talkpro.info).
 #
 # Required Gitea repo secret (Settings → Secrets → Actions):
 #   TALKPRO_SSH_PRIVATE_KEY  full PEM for ubuntu@talkpro (same as luis-only.pem)
 #
 # Host/user/path defaults are in the `env:` block below (edit there if needed).
 #
 # Requires a runner with: node 22+, ssh, ssh-keyscan, tar (rsync optional; no sudo needed).
 name: Deploy to talkpro
 on:
  push:
    branches:
      - main
      - master
  workflow_dispatch:
 env:
  TALKPRO_HOST: "13.214.179.69"
  TALKPRO_USER: ubuntu
  TALKPRO_REMOTE_ROOT: /home/ubuntu/talkpro
 jobs:
  build-and-sync:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: npm
      - name: Check deploy secrets
        env:
          TALKPRO_SSH_PRIVATE_KEY: ${{ secrets.TALKPRO_SSH_PRIVATE_KEY }}
        run: |
          if [ -z "${TALKPRO_SSH_PRIVATE_KEY}" ]; then
            echo "ERROR: Missing Gitea secret TALKPRO_SSH_PRIVATE_KEY"
            echo "Add it under Repository → Settings → Secrets (Actions)."
            echo "Value: full contents of your ubuntu@talkpro SSH private key (PEM)."
            exit 1
          fi
      - name: Trust host key
        run: |
          mkdir -p ~/.ssh
          chmod 700 ~/.ssh
          ssh-keyscan -H "$TALKPRO_HOST" >> ~/.ssh/known_hosts 2>/dev/null || true
      - name: Build and deploy to talkpro
        env:
          TALKPRO_SSH_PRIVATE_KEY: ${{ secrets.TALKPRO_SSH_PRIVATE_KEY }}
        run: bash scripts/deploy-talkpro.sh
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ dist/
 .env
 .env.*
 !.env.example
 !.env.deploy.example
 .env.deploy
--- a/README.md
+++ b/README.md
@@ -0,0 +1,134 @@
 # Talk Pro
 Marketing landing page for Talk Pro — a modern messaging app designed for clear, simple, and reliable communication.
 ## Stack
 - [Astro 6](https://astro.build) — static site generator, zero client-side JS
 - [UnoCSS](https://unocss.dev) — atomic CSS engine (Tailwind-compatible, faster HMR)
 - TypeScript (strict)
 - Inter — Google Fonts
 ## Getting Started
 ```bash
 npm install
 npm run dev
 ```
 Open [http://localhost:4321](http://localhost:4321)
 ## Commands
 | Command | Description |
 |---------|-------------|
 | `npm run dev` | Start dev server at `localhost:4321` |
 | `npm run build` | Build for production into `dist/` |
 | `npm run preview` | Preview production build locally |
 ## Deploy (Gitea Actions → talkpro.info)
 Pushes to **`main`** or **`master`** run [`.gitea/workflows/deploy-talkpro.yml`](.gitea/workflows/deploy-talkpro.yml): `npm ci` → `npm run build` → `rsync` `dist/` to the marketing server (`/home/ubuntu/talkpro`).
 **Repository secret** (Gitea → Settings → Secrets → Actions) — **required**:
 | Secret | Value |
 |--------|--------|
 | `TALKPRO_SSH_PRIVATE_KEY` | Full PEM text of the `ubuntu@talkpro` deploy key |
 Host (`13.214.179.69`), user (`ubuntu`), and web root (`/home/ubuntu/talkpro`) are set in the workflow. Optional secrets `TALKPRO_HOST`, `TALKPRO_USER`, `TALKPRO_REMOTE_ROOT` override those defaults.
 Manual deploy from this repo:
 ```bash
 cp .env.deploy.example .env.deploy   # edit paths
 set -a && source .env.deploy && set +a
 bash scripts/deploy-talkpro.sh
 ```
 `/api/site-links` (APK / App Store URLs) is still updated via the parent **talkpro** repo: `./scripts/post-talkpro-site-links.sh` on your laptop.
 ## Project Structure
 ```
 talk-pro/
 ├── public/
 │   └── assets/          # Images downloaded from Figma
 ├── src/
 │   ├── layouts/
 │   │   └── Base.astro   # HTML shell, Inter font, meta
 │   ├── components/
 │   │   ├── Header.astro      # Sticky frosted-glass nav
 │   │   ├── Hero.astro        # Hero with phone mockup
 │   │   ├── CoreSystem.astro  # 6-feature card grid
 │   │   ├── UseCases.astro    # 3 identity cards
 │   │   ├── DownloadCTA.astro # Store badges
 │   │   └── Footer.astro      # Links + copyright
 │   ├── pages/
 │   │   └── index.astro  # Composes all sections
 │   └── styles/
 │       └── global.css
 ├── uno.config.ts        # Design tokens + UnoCSS config
 └── astro.config.mjs
 ```
 ## Design Tokens
 Defined in `uno.config.ts`:
 | Token | Value |
 |-------|-------|
 | `brand` | `#f28a4b` |
 | `text-primary` | `#2e2a28` |
 | `text-secondary` | `#7a726d` |
 | `surface` | `#f8f3ee` |
 | `surface-alt` | `#f2eae3` |
 | `surface-footer` | `#efe6de` |
 | `border-light` | `#e3d9d1` |
 ## Assets
 Figma assets are stored in `public/assets/`. To re-download them (valid for 7 days from Figma export):
 ```bash
 bash scripts/download-assets.sh
 ```
 ## Cloudflare Cache & the `site-links-client.js` Version Flag
 The site is proxied through **Cloudflare**, which aggressively caches static files. Astro's built CSS/JS bundles are safe because they get **content-hashed filenames** on every build (e.g. `_astro/index.Bx3kF9.js`) — Cloudflare never has an old copy because the filename itself changes.
 `public/site-links-client.js` is the exception. It lives in `public/` so it always deploys to the same URL (`/site-links-client.js`). Cloudflare caches this URL and will keep serving the old version until either:
 - The Cloudflare cache is **purged** (Caching → Purge Everything in the dashboard), or
 - The script URL is **versioned** so Cloudflare treats it as a new file.
 The URL is versioned in `src/layouts/Base.astro`:
 ```html
 <script src="/site-links-client.js?v=2" defer></script>
 ```
 **Every time you change `site-links-client.js`**, bump this number (`?v=2` → `?v=3`, etc.) and redeploy. Cloudflare will fetch the latest file immediately without needing a cache purge.
 | Change type | Cache action needed |
 |---|---|
 | CSS / Astro component change | None — hashed filename handles it |
 | `site-links-client.js` change | Bump `?v=N` in `Base.astro` and redeploy |
 | Emergency full reset | Cloudflare dashboard → Caching → Purge Everything |
 ## i18n — Adding or Updating Translations
 All page copy lives in `src/i18n/translations.ts`. The English (`en`) entry is the base — every other language only needs to override the keys it wants to change; missing keys fall back to English automatically.
 Supported languages: `en`, `zh-cn`, `zh-tw`, `es`, `vi`, `pt`, `de`, `fr`, `hi`, `ar`, `ru`, `id`, `ur`, `ja`, `ko`, `ms`.
 To add a new language:
 1. Add the locale code to the `languages` array at the top of `translations.ts`.
 2. Add its label to `languageLabels` and `languageNames`.
 3. Add a translation object under `translations` (only the keys you want to override are required).
 4. Create the page route: copy `src/pages/[lang]/index.astro` if it doesn't exist.
 ## Design Source
 Figma: [Talk Pro — Home Page Desktop](https://www.figma.com/design/Gb8WMJ2RLlcZ0bigoiOQx9/Talk-Pro?node-id=9505-537&m=dev)
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,6 +1,6 @@
 import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
+import UnoCSS from '@unocss/astro';
 export default defineConfig({
-  integrations: [tailwind()],
+  integrations: [UnoCSS({ injectReset: true })],
 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,10 @@
    "astro": "^6.3.1"
  },
  "devDependencies": {
-    "@astrojs/tailwind": "^6.0.2",
+    "@unocss/astro": "^66.6.8",
-    "tailwindcss": "^3.4.19"
+    "unocss": "^66.6.8"
  },
  "overrides": {
    "vite": "^7"
  }
 }
--- a/public/assets/core-halftone-bg.png
+++ b/public/assets/core-halftone-bg.png
--- a/public/assets/core-icon-channels.png
+++ b/public/assets/core-icon-channels.png
--- a/public/assets/core-icon-groups.png
+++ b/public/assets/core-icon-groups.png
--- a/public/assets/core-icon-media.png
+++ b/public/assets/core-icon-media.png
--- a/public/assets/core-icon-private.png
+++ b/public/assets/core-icon-private.png
--- a/public/assets/core-icon-video.png
+++ b/public/assets/core-icon-video.png
--- a/public/assets/core-icon-voice.png
+++ b/public/assets/core-icon-voice.png
--- a/public/assets/cta-android-icon.svg
+++ b/public/assets/cta-android-icon.svg
@@ -0,0 +1,13 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_9846_29800)">
 <path d="M3.79923 9.12891H3.7275C2.80804 9.12891 2.05835 9.88098 2.05835 10.7981V18.0653C2.05835 18.986 2.80804 19.7356 3.7275 19.7356H3.80045C4.71991 19.7356 5.4696 18.9835 5.4696 18.0653V10.798C5.46838 9.88098 4.71753 9.12891 3.79923 9.12891Z" fill="white"/>
 <path d="M6.26831 20.8732C6.26831 21.7173 6.95819 22.4048 7.80233 22.4048H9.4416V26.3302C9.4416 27.252 10.1937 28.0017 11.1108 28.0017H11.1825C12.1032 28.0017 12.854 27.2509 12.854 26.3302V22.4048H15.1449V26.3302C15.1449 27.252 15.8994 28.0017 16.8165 28.0017H16.887C17.8077 28.0017 18.5573 27.2509 18.5573 26.3302V22.4048H20.1978C21.0407 22.4048 21.7306 21.7173 21.7306 20.8732V9.39844H6.26831V20.8732Z" fill="white"/>
 <path d="M17.8506 2.43795L19.1527 0.428069C19.2364 0.301301 19.1993 0.127973 19.0714 0.045438C18.9447 -0.0382608 18.7713 -0.00356184 18.6887 0.126753L17.3389 2.20603C16.3262 1.79114 15.1951 1.558 14.0006 1.558C12.8049 1.558 11.6762 1.79114 10.6611 2.20603L9.3136 0.126753C9.23112 -0.00356184 9.05651 -0.0382608 8.92858 0.045438C8.80065 0.127917 8.76357 0.301301 8.84727 0.428069L10.1505 2.43795C7.80103 3.58939 6.2168 5.75951 6.2168 8.24886C6.2168 8.4019 6.22639 8.55256 6.23952 8.70199H21.7628C21.7759 8.55256 21.7843 8.4019 21.7843 8.24886C21.7843 5.75951 20.1989 3.58939 17.8506 2.43795ZM10.4016 6.03688C9.98912 6.03688 9.65432 5.70447 9.65432 5.2908C9.65432 4.87713 9.98912 4.54588 10.4016 4.54588C10.8165 4.54588 11.1489 4.87707 11.1489 5.2908C11.1489 5.70453 10.8141 6.03688 10.4016 6.03688ZM17.5983 6.03688C17.1858 6.03688 16.851 5.70447 16.851 5.2908C16.851 4.87713 17.1858 4.54588 17.5983 4.54588C18.012 4.54588 18.3444 4.87707 18.3444 5.2908C18.3444 5.70447 18.012 6.03688 17.5983 6.03688Z" fill="white"/>
 <path d="M24.2714 9.12891H24.2021C23.2826 9.12891 22.5305 9.88098 22.5305 10.7981V18.0653C22.5305 18.986 23.2838 19.7356 24.2021 19.7356H24.2726C25.1932 19.7356 25.9418 18.9835 25.9418 18.0653V10.798C25.9418 9.88098 25.1909 9.12891 24.2714 9.12891Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_9846_29800">
 <rect width="28" height="28" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/public/assets/cta-apple-icon.svg
+++ b/public/assets/cta-apple-icon.svg
@@ -0,0 +1,6 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.0004 26.9856" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group">
 <path id="Vector" d="M16.1918 0C16.2546 0 16.3174 0 16.3838 0C16.5378 1.90308 15.8115 3.32506 14.9286 4.35481C14.0624 5.37746 12.8762 6.36929 10.9578 6.21879C10.8298 4.34297 11.5574 3.02645 12.439 1.99907C13.2566 1.0416 14.7556 0.189597 16.1918 0Z" fill="var(--fill-0, white)"/>
 <path id="Vector_2" d="M22.0004 19.8082C22.0004 19.8271 22.0004 19.8437 22.0004 19.8615C21.4612 21.4944 20.6922 22.8939 19.7537 24.1926C18.8969 25.3717 17.847 26.9584 15.9724 26.9584C14.3525 26.9584 13.2766 25.9168 11.6164 25.8883C9.86025 25.8599 8.89449 26.7593 7.28883 26.9856C7.10516 26.9856 6.92149 26.9856 6.74137 26.9856C5.56231 26.815 4.61077 25.8812 3.91756 25.0399C1.87346 22.5538 0.293876 19.3425 0 15.233C0 14.8301 0 14.4284 0 14.0255C0.124423 11.0843 1.55351 8.69304 3.45304 7.53413C4.45554 6.91794 5.83367 6.39299 7.36823 6.62762C8.02589 6.72953 8.69778 6.95467 9.28672 7.17745C9.84484 7.39193 10.5428 7.77231 11.204 7.75217C11.6519 7.73913 12.0975 7.50569 12.549 7.34098C13.8714 6.86343 15.1678 6.31597 16.8765 6.57311C18.9301 6.88357 20.3876 7.79601 21.2882 9.20377C19.551 10.3094 18.1776 11.9754 18.4123 14.8206C18.6208 17.405 20.1234 18.9171 22.0004 19.8082Z" fill="var(--fill-0, white)"/>
 </g>
 </svg>
--- a/public/assets/cta-bg-pattern.svg
+++ b/public/assets/cta-bg-pattern.svg
@@ -0,0 +1,339 @@
 <svg preserveAspectRatio="xMidYMid slice" width="1920" height="923" overflow="visible" style="display: block;" viewBox="0 0 1920 923" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Layer_1" clip-path="url(#clip0_0_4)">
 <path id="Vector" d="M12.1851 -29.997L0.00488281 -17.7969L12.1851 -5.59676L24.3653 -17.7969L12.1851 -29.997Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_2" d="M102.45 -30.0001L90.2725 -17.7969L102.45 -5.59361L114.627 -17.7969L102.45 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_3" d="M192.717 -30.0001L180.54 -17.7969L192.717 -5.59361L204.894 -17.7969L192.717 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_4" d="M282.985 -30.0001L270.808 -17.7969L282.985 -5.59361L295.162 -17.7969L282.985 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_5" d="M373.252 -30.0001L361.075 -17.7969L373.252 -5.59361L385.429 -17.7969L373.252 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_6" d="M463.519 -30.0001L451.342 -17.7969L463.519 -5.59361L475.696 -17.7969L463.519 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_7" d="M553.787 -29.9894L541.61 -17.7861L553.787 -5.58287L565.964 -17.7861L553.787 -29.9894Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_8" d="M644.065 -29.9894L631.888 -17.7861L644.065 -5.58287L656.242 -17.7862L644.065 -29.9894Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_9" d="M734.329 -29.9972L722.152 -17.7939L734.329 -5.59068L746.506 -17.7939L734.329 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_10" d="M824.607 -29.9972L812.43 -17.7939L824.607 -5.59068L836.784 -17.7939L824.607 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_11" d="M914.875 -29.9972L902.698 -17.7939L914.875 -5.59068L927.052 -17.794L914.875 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_12" d="M1005.14 -29.9972L992.965 -17.7939L1005.14 -5.59068L1017.32 -17.7939L1005.14 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_13" d="M1095.4 -29.9973L1083.22 -17.7939L1095.4 -5.59068L1107.58 -17.794L1095.4 -29.9973Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_14" d="M1185.68 -29.9972L1173.5 -17.7939L1185.68 -5.59068L1197.85 -17.7939L1185.68 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_15" d="M1275.94 -29.9972L1263.77 -17.7939L1275.94 -5.59068L1288.12 -17.7939L1275.94 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_16" d="M1366.22 -29.9943L1354.04 -17.791L1366.22 -5.58775L1378.4 -17.791L1366.22 -29.9943Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_17" d="M1456.49 -29.9934L1444.31 -17.79L1456.49 -5.58677L1468.66 -17.7901L1456.49 -29.9934Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_18" d="M1546.75 -30.0001L1534.57 -17.7969L1546.75 -5.59358L1558.93 -17.7968L1546.75 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_19" d="M1637.02 -29.9973L1624.84 -17.7939L1637.02 -5.59075L1649.2 -17.7941L1637.02 -29.9973Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_20" d="M1727.29 -29.9982L1715.11 -17.7949L1727.29 -5.59163L1739.46 -17.7949L1727.29 -29.9982Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_21" d="M1817.56 -29.9953L1805.38 -17.792L1817.56 -5.58873L1829.73 -17.792L1817.56 -29.9953Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_22" d="M1907.82 -29.9952L1895.65 -17.792L1907.82 -5.58872L1920 -17.792L1907.82 -29.9952Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_23" d="M12.1871 44.9044L0.00683594 57.1045L12.1871 69.3046L24.3673 57.1045L12.1871 44.9044Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_24" d="M102.451 44.9012L90.2744 57.1045L102.451 69.3078L114.629 57.1045L102.451 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_25" d="M192.718 44.9012L180.541 57.1045L192.718 69.3078L204.895 57.1045L192.718 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_26" d="M282.987 44.9012L270.81 57.1045L282.987 69.3078L295.164 57.1045L282.987 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_27" d="M373.253 44.9012L361.076 57.1045L373.253 69.3078L385.43 57.1045L373.253 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_28" d="M463.521 44.9012L451.344 57.1045L463.521 69.3078L475.698 57.1045L463.521 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_29" d="M553.789 44.9012L541.612 57.1045L553.789 69.3078L565.966 57.1045L553.789 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_30" d="M644.056 44.911L631.879 57.1143L644.056 69.3175L656.233 57.1142L644.056 44.911Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_31" d="M734.33 44.8934L722.153 57.0967L734.33 69.2999L746.507 57.0967L734.33 44.8934Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_32" d="M824.598 44.9042L812.421 57.1074L824.598 69.3107L836.775 57.1074L824.598 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_33" d="M914.876 44.9041L902.699 57.1074L914.876 69.3107L927.053 57.1074L914.876 44.9041Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_34" d="M1005.14 44.9042L992.967 57.1074L1005.14 69.3107L1017.32 57.1074L1005.14 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_35" d="M1095.4 44.9041L1083.22 57.1074L1095.4 69.3107L1107.58 57.1074L1095.4 44.9041Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_36" d="M1185.68 44.9042L1173.5 57.1074L1185.68 69.3107L1197.86 57.1074L1185.68 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_37" d="M1275.95 44.9042L1263.77 57.1074L1275.95 69.3107L1288.12 57.1074L1275.95 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_38" d="M1366.22 44.8973L1354.04 57.1006L1366.22 69.3038L1378.4 57.1006L1366.22 44.8973Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_39" d="M1456.48 44.9002L1444.31 57.1035L1456.48 69.3068L1468.66 57.1034L1456.48 44.9002Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_40" d="M1546.75 44.8993L1534.57 57.1026L1546.75 69.3058L1558.93 57.1026L1546.75 44.8993Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_41" d="M1637.02 44.9021L1624.84 57.1055L1637.02 69.3087L1649.2 57.1053L1637.02 44.9021Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_42" d="M1727.29 44.9012L1715.11 57.1045L1727.29 69.3078L1739.46 57.1045L1727.29 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_43" d="M1817.56 44.9042L1805.38 57.1074L1817.56 69.3107L1829.73 57.1074L1817.56 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_44" d="M1907.82 44.9051L1895.65 57.1084L1907.82 69.3117L1920 57.1084L1907.82 44.9051Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_45" d="M12.189 119.805L0.00878906 132.005L12.189 144.205L24.3692 132.005L12.189 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_46" d="M102.452 119.802L90.2754 132.005L102.452 144.208L114.63 132.005L102.452 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_47" d="M192.72 119.802L180.543 132.005L192.72 144.208L204.897 132.005L192.72 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_48" d="M282.989 119.802L270.812 132.005L282.989 144.208L295.166 132.005L282.989 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_49" d="M373.255 119.802L361.078 132.005L373.255 144.208L385.432 132.005L373.255 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_50" d="M463.523 119.802L451.346 132.005L463.523 144.208L475.7 132.005L463.523 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_51" d="M553.79 119.802L541.613 132.005L553.79 144.208L565.967 132.005L553.79 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_52" d="M644.058 119.802L631.881 132.005L644.058 144.208L656.235 132.005L644.058 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_53" d="M734.332 119.795L722.155 131.998L734.332 144.201L746.509 131.998L734.332 119.795Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_54" d="M824.6 119.805L812.423 132.008L824.6 144.211L836.777 132.008L824.6 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_55" d="M914.868 119.805L902.69 132.008L914.867 144.211L927.045 132.008L914.868 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_56" d="M1005.14 119.805L992.958 132.008L1005.14 144.211L1017.31 132.008L1005.14 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_57" d="M1095.4 119.795L1083.23 131.998L1095.4 144.201L1107.58 131.998L1095.4 119.795Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_58" d="M1185.68 119.805L1173.5 132.008L1185.68 144.211L1197.86 132.008L1185.68 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_59" d="M1275.95 119.805L1263.77 132.008L1275.95 144.211L1288.13 132.008L1275.95 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_60" d="M1366.22 119.798L1354.05 132.001L1366.22 144.204L1378.4 132.001L1366.22 119.798Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_61" d="M1456.48 119.8L1444.31 132.003L1456.48 144.206L1468.66 132.003L1456.48 119.8Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_62" d="M1546.75 119.798L1534.57 132.001L1546.75 144.204L1558.93 132.001L1546.75 119.798Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_63" d="M1637.02 119.802L1624.84 132.005L1637.02 144.208L1649.2 132.005L1637.02 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_64" d="M1727.29 119.8L1715.11 132.003L1727.29 144.206L1739.46 132.003L1727.29 119.8Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_65" d="M1817.56 119.804L1805.38 132.007L1817.56 144.21L1829.73 132.007L1817.56 119.804Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_66" d="M1907.82 119.805L1895.65 132.008L1907.82 144.211L1920 132.008L1907.82 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_67" d="M12.191 194.695L0.0107422 206.896L12.191 219.096L24.3712 206.896L12.191 194.695Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_68" d="M102.454 194.703L90.2773 206.906L102.454 219.109L114.631 206.906L102.454 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_69" d="M192.722 194.703L180.545 206.906L192.722 219.109L204.899 206.906L192.722 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_70" d="M282.991 194.703L270.813 206.906L282.991 219.109L295.168 206.906L282.991 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_71" d="M373.257 194.703L361.08 206.906L373.257 219.109L385.434 206.906L373.257 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_72" d="M463.525 194.703L451.348 206.906L463.525 219.109L475.702 206.906L463.525 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_73" d="M553.792 194.703L541.615 206.906L553.792 219.109L565.969 206.906L553.792 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_74" d="M644.06 194.703L631.883 206.906L644.06 219.109L656.237 206.906L644.06 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_75" d="M734.334 194.696L722.157 206.899L734.334 219.103L746.511 206.899L734.334 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_76" d="M824.602 194.696L812.425 206.899L824.602 219.103L836.779 206.899L824.602 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_77" d="M914.869 194.706L902.692 206.909L914.869 219.112L927.047 206.909L914.869 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_78" d="M1005.14 194.706L992.96 206.909L1005.14 219.112L1017.31 206.909L1005.14 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_79" d="M1095.4 194.696L1083.23 206.899L1095.4 219.103L1107.58 206.899L1095.4 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_80" d="M1185.67 194.706L1173.49 206.909L1185.67 219.112L1197.85 206.909L1185.67 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_81" d="M1275.94 194.706L1263.76 206.909L1275.94 219.112L1288.12 206.909L1275.94 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_82" d="M1366.21 194.699L1354.04 206.902L1366.21 219.106L1378.39 206.902L1366.21 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_83" d="M1456.48 194.699L1444.31 206.902L1456.48 219.106L1468.66 206.902L1456.48 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_84" d="M1546.75 194.697L1534.57 206.9L1546.75 219.104L1558.93 206.9L1546.75 194.697Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_85" d="M1637.02 194.701L1624.84 206.904L1637.02 219.107L1649.2 206.904L1637.02 194.701Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_86" d="M1727.29 194.699L1715.11 206.902L1727.29 219.106L1739.46 206.902L1727.29 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_87" d="M1817.56 194.703L1805.38 206.906L1817.56 219.109L1829.73 206.906L1817.56 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_88" d="M1907.82 194.704L1895.65 206.907L1907.82 219.11L1920 206.907L1907.82 194.704Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_89" d="M12.1822 269.597L0.00195312 281.797L12.1822 293.997L24.3624 281.797L12.1822 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_90" d="M102.446 269.594L90.2686 281.797L102.446 294L114.623 281.797L102.446 269.594Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_91" d="M192.724 269.604L180.547 281.808L192.724 294.011L204.901 281.808L192.724 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_92" d="M282.992 269.604L270.814 281.808L282.992 294.011L295.169 281.808L282.992 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_93" d="M373.259 269.604L361.082 281.808L373.259 294.011L385.436 281.808L373.259 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_94" d="M463.526 269.604L451.349 281.808L463.526 294.011L475.703 281.808L463.526 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_95" d="M553.794 269.604L541.617 281.808L553.794 294.011L565.971 281.808L553.794 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_96" d="M644.062 269.604L631.885 281.808L644.062 294.011L656.239 281.808L644.062 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_97" d="M734.336 269.597L722.159 281.8L734.336 294.003L746.513 281.8L734.336 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_98" d="M824.603 269.597L812.426 281.8L824.603 294.003L836.78 281.8L824.603 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_99" d="M914.871 269.596L902.694 281.8L914.871 294.003L927.049 281.8L914.871 269.596Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_100" d="M1005.14 269.597L992.962 281.8L1005.14 294.003L1017.32 281.8L1005.14 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_101" d="M1095.41 269.596L1083.23 281.8L1095.41 294.003L1107.58 281.8L1095.41 269.596Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_102" d="M1185.67 269.607L1173.5 281.811L1185.67 294.014L1197.85 281.811L1185.67 269.607Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_103" d="M1275.94 269.607L1263.76 281.811L1275.94 294.014L1288.12 281.811L1275.94 269.607Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_104" d="M1366.22 269.598L1354.04 281.801L1366.22 294.004L1378.39 281.801L1366.22 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_105" d="M1456.48 269.598L1444.31 281.802L1456.48 294.005L1468.66 281.802L1456.48 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_106" d="M1546.75 269.597L1534.57 281.8L1546.75 294.003L1558.93 281.8L1546.75 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_107" d="M1637.02 269.6L1624.84 281.804L1637.02 294.007L1649.2 281.804L1637.02 269.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_108" d="M1727.29 269.598L1715.11 281.802L1727.29 294.005L1739.46 281.802L1727.29 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_109" d="M1817.56 269.602L1805.38 281.806L1817.56 294.009L1829.73 281.806L1817.56 269.602Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_110" d="M1907.82 269.603L1895.65 281.807L1907.82 294.01L1920 281.807L1907.82 269.603Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_111" d="M12.1841 344.498L0.00390625 356.698L12.1841 368.898L24.3644 356.698L12.1841 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_112" d="M102.448 344.495L90.2705 356.698L102.448 368.901L114.625 356.698L102.448 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_113" d="M192.716 344.495L180.539 356.698L192.716 368.901L204.893 356.698L192.716 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_114" d="M282.983 344.495L270.806 356.698L282.983 368.901L295.16 356.698L282.983 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_115" d="M373.25 344.495L361.073 356.698L373.25 368.901L385.427 356.698L373.25 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_116" d="M463.528 344.505L451.351 356.708L463.528 368.911L475.705 356.708L463.528 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_117" d="M553.796 344.505L541.619 356.708L553.796 368.911L565.973 356.708L553.796 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_118" d="M644.063 344.505L631.886 356.708L644.063 368.911L656.24 356.708L644.063 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_119" d="M734.338 344.498L722.161 356.701L734.338 368.904L746.515 356.701L734.338 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_120" d="M824.605 344.498L812.428 356.701L824.605 368.904L836.782 356.701L824.605 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_121" d="M914.873 344.498L902.696 356.701L914.873 368.904L927.05 356.701L914.873 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_122" d="M1005.14 344.498L992.964 356.701L1005.14 368.904L1017.32 356.701L1005.14 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_123" d="M1095.41 344.498L1083.23 356.701L1095.41 368.904L1107.58 356.701L1095.41 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_124" d="M1185.68 344.508L1173.5 356.711L1185.68 368.914L1197.85 356.711L1185.68 344.508Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_125" d="M1275.94 344.508L1263.77 356.711L1275.94 368.914L1288.12 356.711L1275.94 344.508Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_126" d="M1366.22 344.497L1354.04 356.7L1366.22 368.904L1378.39 356.7L1366.22 344.497Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_127" d="M1456.48 344.498L1444.31 356.701L1456.48 368.904L1468.66 356.701L1456.48 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_128" d="M1546.75 344.496L1534.57 356.699L1546.75 368.902L1558.93 356.699L1546.75 344.496Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_129" d="M1637.02 344.499L1624.84 356.702L1637.02 368.905L1649.2 356.702L1637.02 344.499Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_130" d="M1727.29 344.498L1715.11 356.701L1727.29 368.904L1739.46 356.701L1727.29 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_131" d="M1817.56 344.501L1805.38 356.704L1817.56 368.907L1829.73 356.704L1817.56 344.501Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_132" d="M1907.82 344.503L1895.65 356.706L1907.82 368.909L1920 356.706L1907.82 344.503Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_133" d="M12.1851 419.399L0.00488281 431.599L12.1851 443.799L24.3653 431.599L12.1851 419.399Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_134" d="M102.45 419.396L90.2725 431.599L102.45 443.802L114.627 431.599L102.45 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_135" d="M192.718 419.396L180.541 431.599L192.718 443.802L204.895 431.599L192.718 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_136" d="M282.985 419.396L270.808 431.599L282.985 443.802L295.162 431.599L282.985 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_137" d="M373.252 419.396L361.075 431.599L373.252 443.802L385.429 431.599L373.252 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_138" d="M463.519 419.406L451.342 431.609L463.519 443.813L475.696 431.609L463.519 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_139" d="M553.787 419.406L541.61 431.609L553.787 443.813L565.964 431.609L553.787 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_140" d="M644.054 419.406L631.877 431.609L644.054 443.813L656.231 431.609L644.054 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_141" d="M734.329 419.398L722.152 431.602L734.329 443.805L746.506 431.602L734.329 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_142" d="M824.607 419.398L812.43 431.602L824.607 443.805L836.784 431.602L824.607 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_143" d="M914.875 419.398L902.698 431.602L914.875 443.805L927.052 431.602L914.875 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_144" d="M1005.14 419.398L992.965 431.602L1005.14 443.805L1017.32 431.602L1005.14 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_145" d="M1095.4 419.398L1083.22 431.602L1095.4 443.805L1107.58 431.602L1095.4 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_146" d="M1185.68 419.398L1173.5 431.602L1185.68 443.805L1197.85 431.602L1185.68 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_147" d="M1275.94 419.409L1263.77 431.612L1275.94 443.816L1288.12 431.612L1275.94 419.409Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_148" d="M1366.22 419.396L1354.04 431.599L1366.22 443.802L1378.39 431.599L1366.22 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_149" d="M1456.48 419.396L1444.31 431.6L1456.48 443.803L1468.66 431.599L1456.48 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_150" d="M1546.75 419.396L1534.57 431.599L1546.75 443.802L1558.93 431.599L1546.75 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_151" d="M1637.02 419.398L1624.84 431.602L1637.02 443.805L1649.2 431.601L1637.02 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_152" d="M1727.29 419.397L1715.11 431.601L1727.29 443.804L1739.46 431.601L1727.29 419.397Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_153" d="M1817.56 419.401L1805.38 431.605L1817.56 443.808L1829.73 431.605L1817.56 419.401Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_154" d="M1907.82 419.402L1895.65 431.605L1907.82 443.809L1920 431.605L1907.82 419.402Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_155" d="M12.1871 494.3L0.00683594 506.5L12.1871 518.7L24.3673 506.5L12.1871 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_156" d="M102.451 494.297L90.2744 506.5L102.452 518.703L114.629 506.5L102.451 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_157" d="M192.718 494.297L180.541 506.5L192.718 518.703L204.895 506.5L192.718 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_158" d="M282.987 494.297L270.81 506.5L282.987 518.703L295.164 506.5L282.987 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_159" d="M373.254 494.297L361.077 506.5L373.254 518.703L385.431 506.5L373.254 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_160" d="M463.521 494.297L451.344 506.5L463.521 518.703L475.698 506.5L463.521 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_161" d="M553.789 494.297L541.612 506.5L553.789 518.703L565.966 506.5L553.789 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_162" d="M644.056 494.308L631.879 506.511L644.056 518.714L656.233 506.511L644.056 494.308Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_163" d="M734.331 494.289L722.154 506.492L734.331 518.696L746.508 506.492L734.331 494.289Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_164" d="M824.598 494.3L812.421 506.503L824.598 518.706L836.775 506.503L824.598 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_165" d="M914.867 494.3L902.689 506.503L914.867 518.706L927.044 506.503L914.867 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_166" d="M1005.13 494.3L992.956 506.503L1005.13 518.706L1017.31 506.503L1005.13 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_167" d="M1095.4 494.3L1083.22 506.503L1095.4 518.706L1107.58 506.503L1095.4 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_168" d="M1185.68 494.3L1173.5 506.503L1185.68 518.706L1197.86 506.503L1185.68 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_169" d="M1275.94 494.302L1263.76 506.505L1275.94 518.708L1288.12 506.505L1275.94 494.302Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_170" d="M1366.22 494.295L1354.04 506.498L1366.22 518.701L1378.39 506.498L1366.22 494.295Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_171" d="M1456.48 494.296L1444.31 506.499L1456.48 518.702L1468.66 506.499L1456.48 494.296Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_172" d="M1546.75 494.295L1534.57 506.498L1546.75 518.701L1558.93 506.498L1546.75 494.295Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_173" d="M1637.02 494.299L1624.84 506.502L1637.02 518.705L1649.2 506.502L1637.02 494.299Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_174" d="M1727.29 494.297L1715.11 506.5L1727.29 518.703L1739.46 506.5L1727.29 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_175" d="M1817.56 494.301L1805.38 506.504L1817.56 518.707L1829.73 506.504L1817.56 494.301Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_176" d="M1907.82 494.302L1895.65 506.505L1907.82 518.708L1920 506.505L1907.82 494.302Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_177" d="M12.189 569.201L0.00878906 581.401L12.189 593.601L24.3693 581.401L12.189 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_178" d="M102.453 569.198L90.2764 581.401L102.453 593.605L114.631 581.401L102.453 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_179" d="M192.72 569.198L180.543 581.401L192.72 593.605L204.897 581.401L192.72 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_180" d="M282.989 569.198L270.812 581.401L282.989 593.605L295.166 581.401L282.989 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_181" d="M373.255 569.198L361.078 581.401L373.255 593.605L385.432 581.401L373.255 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_182" d="M463.523 569.198L451.346 581.401L463.523 593.605L475.7 581.401L463.523 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_183" d="M553.791 569.198L541.614 581.401L553.791 593.605L565.968 581.401L553.791 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_184" d="M644.058 569.198L631.881 581.401L644.058 593.605L656.235 581.401L644.058 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_185" d="M734.332 569.19L722.155 581.393L734.332 593.597L746.509 581.394L734.332 569.19Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_186" d="M824.6 569.201L812.423 581.404L824.6 593.608L836.777 581.404L824.6 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_187" d="M914.869 569.201L902.691 581.404L914.869 593.608L927.046 581.404L914.869 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_188" d="M1005.14 569.201L992.958 581.404L1005.14 593.608L1017.31 581.404L1005.14 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_189" d="M1095.4 569.19L1083.23 581.393L1095.4 593.597L1107.58 581.393L1095.4 569.19Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_190" d="M1185.67 569.201L1173.49 581.404L1185.67 593.608L1197.85 581.404L1185.67 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_191" d="M1275.94 569.201L1263.76 581.404L1275.94 593.608L1288.12 581.404L1275.94 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_192" d="M1366.22 569.194L1354.04 581.398L1366.22 593.601L1378.39 581.398L1366.22 569.194Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_193" d="M1456.48 569.195L1444.31 581.398L1456.48 593.602L1468.66 581.398L1456.48 569.195Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_194" d="M1546.75 569.194L1534.57 581.398L1546.75 593.601L1558.93 581.398L1546.75 569.194Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_195" d="M1637.02 569.198L1624.84 581.401L1637.02 593.605L1649.2 581.401L1637.02 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_196" d="M1727.29 569.196L1715.11 581.399L1727.29 593.603L1739.46 581.399L1727.29 569.196Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_197" d="M1817.56 569.2L1805.38 581.403L1817.56 593.607L1829.73 581.403L1817.56 569.2Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_198" d="M1907.82 569.201L1895.65 581.404L1907.82 593.608L1920 581.404L1907.82 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_199" d="M12.191 644.092L0.0107422 656.292L12.191 668.492L24.3712 656.292L12.191 644.092Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_200" d="M102.454 644.098L90.2773 656.302L102.454 668.505L114.632 656.302L102.454 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_201" d="M192.722 644.098L180.545 656.302L192.722 668.505L204.899 656.302L192.722 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_202" d="M282.991 644.098L270.813 656.302L282.991 668.505L295.168 656.302L282.991 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_203" d="M373.257 644.098L361.08 656.302L373.257 668.505L385.434 656.302L373.257 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_204" d="M463.525 644.098L451.348 656.302L463.525 668.505L475.702 656.302L463.525 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_205" d="M553.792 644.099L541.615 656.302L553.792 668.505L565.969 656.302L553.792 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_206" d="M644.06 644.098L631.883 656.302L644.06 668.505L656.237 656.302L644.06 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_207" d="M734.334 644.091L722.157 656.295L734.334 668.498L746.511 656.295L734.334 644.091Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_208" d="M824.602 644.101L812.425 656.305L824.602 668.508L836.779 656.305L824.602 644.101Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_209" d="M914.869 644.102L902.692 656.306L914.869 668.509L927.047 656.306L914.869 644.102Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_210" d="M1005.14 644.101L992.96 656.305L1005.14 668.508L1017.31 656.305L1005.14 644.101Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_211" d="M1095.4 644.091L1083.23 656.295L1095.4 668.498L1107.58 656.295L1095.4 644.091Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_212" d="M1185.67 644.098L1173.5 656.302L1185.67 668.505L1197.85 656.302L1185.67 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_213" d="M1275.94 644.099L1263.76 656.303L1275.94 668.506L1288.12 656.303L1275.94 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_214" d="M1366.22 644.093L1354.04 656.297L1366.22 668.5L1378.39 656.297L1366.22 644.093Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_215" d="M1456.48 644.094L1444.31 656.298L1456.48 668.501L1468.66 656.298L1456.48 644.094Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_216" d="M1546.75 644.093L1534.57 656.296L1546.75 668.499L1558.93 656.296L1546.75 644.093Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_217" d="M1637.02 644.097L1624.84 656.3L1637.02 668.503L1649.2 656.3L1637.02 644.097Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_218" d="M1727.29 644.094L1715.11 656.298L1727.29 668.501L1739.46 656.298L1727.29 644.094Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_219" d="M1817.56 644.098L1805.38 656.302L1817.56 668.505L1829.73 656.302L1817.56 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_220" d="M1907.82 644.099L1895.65 656.303L1907.82 668.506L1920 656.303L1907.82 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_221" d="M12.1822 718.993L0.00195312 731.193L12.1822 743.394L24.3624 731.194L12.1822 718.993Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_222" d="M102.447 718.99L90.2695 731.193L102.447 743.397L114.624 731.194L102.447 718.99Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_223" d="M192.714 719L180.537 731.203L192.714 743.406L204.891 731.203L192.714 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_224" d="M282.992 719L270.814 731.203L282.992 743.406L295.169 731.203L282.992 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_225" d="M373.259 719L361.082 731.203L373.259 743.406L385.436 731.203L373.259 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_226" d="M463.527 719L451.35 731.203L463.527 743.406L475.704 731.203L463.527 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_227" d="M553.794 719L541.617 731.203L553.794 743.406L565.971 731.203L553.794 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_228" d="M644.062 719L631.885 731.203L644.062 743.406L656.239 731.203L644.062 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_229" d="M734.336 718.992L722.159 731.195L734.336 743.399L746.513 731.195L734.336 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_230" d="M824.604 718.992L812.427 731.195L824.604 743.399L836.781 731.195L824.604 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_231" d="M914.871 718.992L902.694 731.195L914.871 743.399L927.049 731.195L914.871 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_232" d="M1005.14 719.004L992.962 731.207L1005.14 743.41L1017.32 731.207L1005.14 719.004Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_233" d="M1095.41 718.992L1083.23 731.195L1095.41 743.399L1107.58 731.195L1095.41 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_234" d="M1185.67 718.998L1173.5 731.201L1185.67 743.405L1197.85 731.201L1185.67 718.998Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_235" d="M1275.94 719L1263.76 731.203L1275.94 743.406L1288.12 731.203L1275.94 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_236" d="M1366.22 718.992L1354.04 731.195L1366.22 743.399L1378.39 731.195L1366.22 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_237" d="M1456.48 718.994L1444.31 731.197L1456.48 743.401L1468.66 731.197L1456.48 718.994Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_238" d="M1546.75 718.992L1534.57 731.195L1546.75 743.399L1558.93 731.195L1546.75 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_239" d="M1637.02 718.996L1624.84 731.199L1637.02 743.402L1649.2 731.199L1637.02 718.996Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_240" d="M1727.29 718.994L1715.11 731.197L1727.29 743.401L1739.46 731.197L1727.29 718.994Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_241" d="M1817.56 718.998L1805.38 731.201L1817.56 743.405L1829.73 731.201L1817.56 718.998Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_242" d="M1907.82 719L1895.65 731.203L1907.82 743.406L1920 731.203L1907.82 719Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_243" d="M12.1841 793.893L0.00390625 806.093L12.1842 818.293L24.3644 806.093L12.1841 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_244" d="M102.448 793.89L90.2705 806.093L102.448 818.296L114.625 806.093L102.448 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_245" d="M192.716 793.89L180.539 806.093L192.716 818.296L204.893 806.093L192.716 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_246" d="M282.983 793.9L270.806 806.103L282.983 818.307L295.16 806.103L282.983 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_247" d="M373.25 793.89L361.073 806.093L373.25 818.296L385.427 806.093L373.25 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_248" d="M463.518 793.9L451.341 806.103L463.518 818.307L475.695 806.103L463.518 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_249" d="M553.785 793.9L541.608 806.103L553.785 818.307L565.963 806.103L553.785 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_250" d="M644.064 793.9L631.887 806.103L644.064 818.307L656.241 806.103L644.064 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_251" d="M734.338 793.893L722.161 806.097L734.338 818.3L746.515 806.097L734.338 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_252" d="M824.605 793.893L812.428 806.097L824.605 818.3L836.782 806.097L824.605 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_253" d="M914.873 793.893L902.696 806.097L914.873 818.3L927.05 806.097L914.873 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_254" d="M1005.14 793.893L992.964 806.097L1005.14 818.3L1017.32 806.097L1005.14 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_255" d="M1095.41 793.893L1083.23 806.097L1095.41 818.3L1107.58 806.097L1095.41 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_256" d="M1185.67 793.897L1173.5 806.1L1185.67 818.304L1197.85 806.1L1185.67 793.897Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_257" d="M1275.94 793.898L1263.76 806.102L1275.94 818.305L1288.12 806.102L1275.94 793.898Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_258" d="M1366.22 793.892L1354.04 806.095L1366.22 818.298L1378.39 806.095L1366.22 793.892Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_259" d="M1456.48 793.893L1444.31 806.096L1456.48 818.299L1468.66 806.096L1456.48 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_260" d="M1546.75 793.891L1534.57 806.094L1546.75 818.297L1558.93 806.094L1546.75 793.891Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_261" d="M1637.02 793.895L1624.84 806.099L1637.02 818.302L1649.2 806.099L1637.02 793.895Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_262" d="M1727.29 793.893L1715.11 806.096L1727.29 818.299L1739.46 806.096L1727.29 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_263" d="M1817.56 793.897L1805.38 806.1L1817.56 818.304L1829.73 806.1L1817.56 793.897Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_264" d="M1907.82 793.898L1895.65 806.102L1907.82 818.305L1920 806.102L1907.82 793.898Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_265" d="M12.1861 868.794L0.00585938 880.994L12.1861 893.194L24.3663 880.994L12.1861 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_266" d="M102.45 868.791L90.2725 880.994L102.45 893.197L114.627 880.994L102.45 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_267" d="M192.718 868.791L180.541 880.994L192.718 893.197L204.895 880.994L192.718 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_268" d="M282.985 868.791L270.808 880.994L282.985 893.197L295.162 880.994L282.985 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_269" d="M373.252 868.791L361.075 880.994L373.252 893.197L385.429 880.994L373.252 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_270" d="M463.52 868.802L451.343 881.005L463.52 893.208L475.697 881.005L463.52 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_271" d="M553.787 868.802L541.61 881.005L553.787 893.208L565.965 881.005L553.787 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_272" d="M644.055 868.802L631.878 881.005L644.055 893.208L656.232 881.005L644.055 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_273" d="M734.329 868.794L722.152 880.997L734.329 893.2L746.506 880.997L734.329 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_274" d="M824.597 868.794L812.42 880.997L824.597 893.2L836.774 880.997L824.597 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_275" d="M914.875 868.794L902.698 880.997L914.875 893.2L927.052 880.997L914.875 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_276" d="M1005.14 868.794L992.965 880.997L1005.14 893.2L1017.32 880.997L1005.14 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_277" d="M1095.4 868.793L1083.23 880.996L1095.4 893.199L1107.58 880.996L1095.4 868.793Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_278" d="M1185.67 868.797L1173.5 881L1185.67 893.203L1197.85 881L1185.67 868.797Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_279" d="M1275.94 868.798L1263.76 881.001L1275.94 893.204L1288.12 881.001L1275.94 868.798Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_280" d="M1366.22 868.791L1354.04 880.994L1366.22 893.197L1378.39 880.994L1366.22 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_281" d="M1456.48 868.792L1444.31 880.995L1456.48 893.198L1468.66 880.995L1456.48 868.792Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_282" d="M1546.75 868.79L1534.57 880.993L1546.75 893.196L1558.93 880.993L1546.75 868.79Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_283" d="M1637.02 868.795L1624.84 880.998L1637.02 893.201L1649.2 880.998L1637.02 868.795Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_284" d="M1727.29 868.792L1715.11 880.995L1727.29 893.198L1739.46 880.995L1727.29 868.792Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_285" d="M1817.56 868.797L1805.38 881L1817.56 893.203L1829.73 881L1817.56 868.797Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_286" d="M1907.82 868.798L1895.65 881.001L1907.82 893.204L1920 881.001L1907.82 868.798Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_287" d="M12.1871 943.695L0.00683594 955.896L12.1871 968.096L24.3673 955.896L12.1871 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_288" d="M102.451 943.692L90.2744 955.896L102.452 968.099L114.629 955.896L102.451 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_289" d="M192.719 943.692L180.542 955.896L192.719 968.099L204.896 955.896L192.719 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_290" d="M282.987 943.692L270.81 955.896L282.987 968.099L295.164 955.896L282.987 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_291" d="M373.254 943.692L361.077 955.896L373.254 968.099L385.431 955.896L373.254 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_292" d="M463.521 943.692L451.344 955.896L463.521 968.099L475.698 955.896L463.521 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_293" d="M553.789 943.703L541.612 955.906L553.789 968.109L565.966 955.906L553.789 943.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_294" d="M644.056 943.703L631.879 955.906L644.056 968.109L656.233 955.906L644.056 943.703Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_295" d="M734.331 943.684L722.154 955.888L734.331 968.091L746.508 955.888L734.331 943.684Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_296" d="M824.598 943.695L812.421 955.898L824.598 968.102L836.775 955.898L824.598 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_297" d="M914.867 943.695L902.689 955.898L914.867 968.102L927.044 955.898L914.867 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_298" d="M1005.13 943.695L992.956 955.898L1005.13 968.102L1017.31 955.898L1005.13 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_299" d="M1095.41 943.692L1083.23 955.896L1095.41 968.099L1107.58 955.895L1095.41 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_300" d="M1185.67 943.696L1173.5 955.9L1185.67 968.103L1197.85 955.9L1185.67 943.696Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_301" d="M1275.94 943.697L1263.76 955.9L1275.94 968.104L1288.12 955.9L1275.94 943.697Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_302" d="M1366.22 943.69L1354.04 955.894L1366.22 968.097L1378.39 955.894L1366.22 943.69Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_303" d="M1456.48 943.692L1444.31 955.896L1456.48 968.099L1468.66 955.895L1456.48 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_304" d="M1546.75 943.689L1534.57 955.893L1546.75 968.096L1558.93 955.893L1546.75 943.689Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_305" d="M1637.02 943.694L1624.84 955.897L1637.02 968.101L1649.2 955.897L1637.02 943.694Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_306" d="M1727.29 943.691L1715.11 955.895L1727.29 968.098L1739.46 955.895L1727.29 943.691Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_307" d="M1817.56 943.696L1805.38 955.9L1817.56 968.103L1829.73 955.9L1817.56 943.696Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_308" d="M1907.82 943.697L1895.65 955.9L1907.82 968.104L1920 955.9L1907.82 943.697Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_309" d="M12.189 1018.6L0.00878906 1030.8L12.189 1043L24.3693 1030.8L12.189 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_310" d="M102.453 1018.59L90.2764 1030.8L102.453 1043L114.631 1030.8L102.453 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_311" d="M192.72 1018.59L180.543 1030.8L192.72 1043L204.897 1030.8L192.72 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_312" d="M282.989 1018.59L270.812 1030.8L282.989 1043L295.166 1030.8L282.989 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_313" d="M373.256 1018.59L361.079 1030.8L373.256 1043L385.433 1030.8L373.256 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_314" d="M463.523 1018.6L451.346 1030.81L463.523 1043.01L475.7 1030.81L463.523 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_315" d="M553.791 1018.6L541.614 1030.81L553.791 1043.01L565.968 1030.81L553.791 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_316" d="M644.058 1018.6L631.881 1030.81L644.058 1043.01L656.235 1030.81L644.058 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_317" d="M734.333 1018.6L722.156 1030.8L734.333 1043L746.51 1030.8L734.333 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_318" d="M824.6 1018.6L812.423 1030.8L824.6 1043L836.777 1030.8L824.6 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_319" d="M914.869 1018.6L902.691 1030.8L914.869 1043L927.046 1030.8L914.869 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_320" d="M1005.14 1018.6L992.958 1030.8L1005.14 1043L1017.31 1030.8L1005.14 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_321" d="M1095.41 1018.59L1083.23 1030.8L1095.41 1043L1107.58 1030.8L1095.41 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_322" d="M1185.67 1018.59L1173.5 1030.8L1185.67 1043L1197.85 1030.8L1185.67 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_323" d="M1275.94 1018.59L1263.76 1030.8L1275.94 1043L1288.12 1030.8L1275.94 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_324" d="M1366.22 1018.59L1354.04 1030.79L1366.22 1043L1378.39 1030.79L1366.22 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_325" d="M1456.48 1018.59L1444.31 1030.79L1456.48 1043L1468.66 1030.79L1456.48 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_326" d="M1546.75 1018.59L1534.57 1030.79L1546.75 1043L1558.93 1030.79L1546.75 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_327" d="M1637.02 1018.59L1624.84 1030.8L1637.02 1043L1649.2 1030.79L1637.02 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_328" d="M1727.29 1018.59L1715.11 1030.8L1727.29 1043L1739.46 1030.8L1727.29 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_329" d="M1817.56 1018.59L1805.38 1030.8L1817.56 1043L1829.73 1030.8L1817.56 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 <path id="Vector_330" d="M1907.82 1018.59L1895.65 1030.8L1907.82 1043L1920 1030.8L1907.82 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
 </g>
 <defs>
 <clipPath id="clip0_0_4">
 <rect width="1920" height="923" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/public/assets/cta-phone-art.png
+++ b/public/assets/cta-phone-art.png
--- a/public/assets/cta-talkpro-logo.svg
+++ b/public/assets/cta-talkpro-logo.svg
@@ -0,0 +1,14 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 187.801 72" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Frame 175584">
 <path id="Vector" d="M98.5724 56.3166C105.506 56.2187 112.442 56.3695 119.363 56.7677C139.793 57.9357 161.687 61.7026 181.076 68.5661C182.332 69.0109 184.68 69.7326 185.539 70.686C186.04 73.7965 174.791 70.4433 173.623 70.1805C151.914 65.356 129.759 62.7571 107.511 62.4274C79.8146 61.5564 50.3772 65.6841 23.4228 71.8478C22.387 72.0842 20.7438 72.1091 20.2019 71.0375C20.4422 69.5599 25.0328 68.1695 26.4037 67.6983C49.4098 59.7943 74.3118 56.8874 98.5724 56.3166Z" fill="var(--fill-0, #F28A4B)"/>
 <path id="Vector_2" d="M75.4035 6.21199C76.7201 6.19147 79.1802 5.90736 80.0807 6.88122C80.1912 8.30019 78.1779 17.6553 77.7802 19.6472C77.2517 22.2942 76.3512 27.9716 75.6538 30.486C78.383 28.2763 81.1036 25.653 83.6485 23.3327C86.8357 20.4285 87.7271 18.8091 92.4044 19.3757C93.6438 19.5257 95.8122 18.8675 96.518 20.1633C96.4756 20.599 96.5059 20.659 96.148 21.0078C92.2107 24.8448 87.7751 28.2905 83.7268 32.0076C85.7591 36.0561 88.8657 40.9428 91.2019 44.9614C91.7282 45.8011 92.2751 46.5019 92.3641 47.4758C92.2416 47.8688 92.1027 48.0266 91.7456 48.2413C90.3863 49.0589 85.5677 48.8789 84.0591 48.3896C82.4325 47.864 77.9547 38.1996 77.0221 36.3813C76.0324 37.2178 75.047 38.0591 74.0661 38.9067C73.4359 41.399 73.3222 44.0222 72.7116 46.4877C72.0698 48.931 70.0181 48.7874 68.1382 48.6785C65.2884 48.5128 63.8111 49.3651 64.5221 45.7427C65.0535 43.0373 65.7052 40.1157 66.2335 37.4435L69.572 20.4317C70.3942 16.4084 71.1016 12.3567 71.9067 8.33019C72.3425 6.15044 73.518 6.24829 75.4035 6.21199Z" fill="var(--fill-0, #2E2A28)"/>
 <path id="Vector_3" d="M2.26688 7.06162C7.84809 6.79575 13.5415 7.01572 19.1336 7.01572C23.1192 7.01572 27.689 6.75302 31.6032 7.04105C31.937 7.06637 32.1813 7.10594 32.4709 7.28952C32.7869 7.48892 32.8937 7.88455 32.917 8.2343C32.9949 9.40064 31.9229 13.0658 31.0763 13.8555C29.9695 14.8874 21.8044 14.3588 19.9426 14.343C17.9995 22.5928 16.5948 31.243 14.729 39.6005C14.2627 41.8192 13.8554 46.4166 12.5416 48.0846C11.7926 49.0341 5.81729 49.1022 4.7692 47.9501C4.55502 46.5685 10.5752 17.9765 11.2797 14.3762C8.96011 14.3271 1.48486 14.8557 0.129146 13.7068C-0.147233 13.1038 0.0772667 12.0783 0.270193 11.4532C0.837388 9.61586 0.304144 7.98741 2.26688 7.06162Z" fill="var(--fill-0, #2E2A28)"/>
 <path id="Vector_4" d="M61.3185 6.19364C62.4629 6.17462 65.1478 6.02728 66.1459 6.51209C67.1634 7.00798 66.1443 10.2305 65.95 11.3205C65.7031 12.7036 65.3428 14.2943 65.0538 15.7487L62.0133 31.2053C61.0281 36.2799 60.238 41.4178 59.2086 46.4877C58.8027 48.4871 58.4112 48.7516 56.489 48.7548C55.0398 48.7326 52.0926 49.0859 51.0794 48.1939C50.8676 48.0086 50.8634 47.9294 50.8898 47.5919C51.2324 43.1923 52.5386 38.4171 53.3681 34.1157L56.7259 16.6565C57.2967 13.7413 57.8475 10.8183 58.4947 7.91896C58.8906 6.14611 59.8524 6.23166 61.3185 6.19364Z" fill="var(--fill-0, #2E2A28)"/>
 <g id="Vector_5">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M172.511 18.4678C179.813 17.8626 186.731 21.2812 187.682 29.1226C188.224 33.7457 186.906 38.396 184.018 42.0481C180.612 46.3068 176.228 48.4003 170.885 48.9772C163.285 49.7083 156.062 46.239 155.27 37.9863C154.853 33.2608 156.328 28.5619 159.375 24.924C162.79 20.8638 167.327 18.9391 172.511 18.4678ZM177.677 38.0589C180.95 32.2679 180.364 24.3375 171.813 25.0562C166.51 26.1061 163.575 30.6158 163.622 35.8739C163.664 40.746 166.59 42.866 171.278 42.4893C174.03 41.873 176.284 40.5239 177.677 38.0589Z" fill="var(--fill-0, #F28A4B)"/>
 <path d="M154.323 18.1443C155.081 18.0545 157.117 18.3623 157.124 19.09C157.141 20.7764 155.914 25.1174 155.125 26.4767C154.068 26.5344 152.803 26.4367 151.758 26.5601C145.24 27.3231 144.18 32.3085 143.166 37.5632C142.72 39.8683 142.315 42.1831 141.951 44.5043C141.477 47.4554 141.657 49.1851 138.015 48.7346C136.711 48.5727 134.325 49.1482 133.381 48.2537C133.113 47.6846 133.163 47.6686 133.255 47.0611C134.12 43.4831 138.198 20.1112 138.967 19.3866C139.38 18.9971 140.247 18.8752 140.781 18.8496C141.93 18.7951 145.228 18.6268 146.021 19.3449C146.474 20.2378 145.87 22.8571 145.717 24.0418C147.895 20.7684 150.316 18.545 154.323 18.1443Z" fill="var(--fill-0, #F28A4B)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M117.845 6.5344C122.685 6.53913 128.878 6.45055 132.584 10.0897C137.724 15.1383 135.648 25.2847 130.794 29.8605C125.591 34.7686 119.629 35.0041 112.919 34.9584L111.04 34.9454C110.65 36.8636 109.09 47.2003 108.28 47.976C107.387 48.8318 103.97 48.5673 102.667 48.5783C101.84 48.5846 101 48.5431 100.382 47.9378C100.063 46.6792 103.641 30.1446 104.083 27.7993L106.598 14.8972C107.036 12.6685 107.406 10.3927 107.907 8.17661C108.12 7.2357 108.586 7.05573 109.39 6.59864C110.052 6.57815 110.716 6.5622 111.378 6.55116C113.534 6.53225 115.689 6.5281 117.845 6.5344ZM122.145 13.9942C119.913 13.6852 117.433 13.8019 115.162 13.8145C114.659 16.6043 114.134 19.3895 113.584 22.1698C113.259 23.8422 112.725 26.2246 112.615 27.8654C116.55 27.8859 119.441 28.1819 122.962 26.2623C127.653 23.2959 129.119 14.9558 122.145 13.9942Z" fill="var(--fill-0, #F28A4B)"/>
 </g>
 <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M35.7559 18.7795C47.4524 17.4446 50.8083 23.7072 48.0883 34.0974C47.7767 35.2873 46.6482 40.6423 46.4982 41.7071C45.7424 47.0851 49.1571 48.8275 41.216 48.6967C38.6382 48.6304 38.2689 47.2962 38.3859 45.025C34.9164 48.5399 31.0461 50.1656 26.0144 48.9695C24.1421 48.5234 22.93 47.432 21.7078 46.0323C18.7908 41.4867 20.9746 35.2155 25.6206 32.796C30.1405 30.4427 35.8227 30.5767 40.8138 30.4695C41.9075 25.0553 38.9224 23.9042 34.0355 25.1761C31.8107 25.7545 30.9207 26.9825 29.0809 28.1505L28.9134 28.2557C28.716 28.1533 28.5217 28.0449 28.3315 27.9298C22.041 24.1817 27.5943 20.9045 31.9017 19.5363C33.2009 19.1234 34.4071 18.9465 35.7559 18.7795ZM39.6827 35.7192C38.1738 35.7144 36.5907 35.6734 35.094 35.8057C34.1157 35.9019 33.4599 35.9877 32.3896 36.2005C29.5592 36.7632 26.623 40.4941 29.5948 42.7544C30.4858 43.4336 31.9375 43.5058 33.1027 43.4349C37.3247 42.4782 39.1261 39.8362 39.6827 35.7192Z" fill="var(--fill-0, #2E2A28)"/>
 </g>
 </svg>
--- a/public/assets/exp-card-1.png
+++ b/public/assets/exp-card-1.png
--- a/public/assets/exp-card-2.png
+++ b/public/assets/exp-card-2.png
--- a/public/assets/exp-card-3.png
+++ b/public/assets/exp-card-3.png
--- a/public/assets/footer-android-icon.svg
+++ b/public/assets/footer-android-icon.svg
@@ -0,0 +1,6 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Icon">
 <rect width="44" height="44" rx="12" fill="var(--fill-0, #D55F31)"/>
 <path id="Vector" d="M23.8954 10H15.6259C14.728 10 14 10.8028 14 11.793V32.207C14 33.1972 14.728 34 15.6259 34H28.3741C29.272 34 30 33.1972 30 32.207V16.7328C30 16.1165 29.7778 15.5252 29.3827 15.0895L25.3848 10.6807C24.9897 10.245 24.4536 10 23.8947 10H23.8954Z" fill="var(--fill-0, white)"/>
 </g>
 </svg>
--- a/public/assets/footer-apple-icon.svg
+++ b/public/assets/footer-apple-icon.svg
@@ -0,0 +1,6 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.0004 26.9856" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group">
 <path id="Vector" d="M16.1918 0C16.2546 0 16.3174 0 16.3838 0C16.5378 1.90308 15.8115 3.32506 14.9286 4.35481C14.0624 5.37746 12.8762 6.36929 10.9578 6.21879C10.8298 4.34297 11.5574 3.02645 12.439 1.99907C13.2566 1.0416 14.7556 0.189597 16.1918 0Z" fill="var(--fill-0, white)"/>
 <path id="Vector_2" d="M22.0004 19.8082C22.0004 19.8271 22.0004 19.8437 22.0004 19.8615C21.4612 21.4944 20.6922 22.8939 19.7537 24.1926C18.8969 25.3717 17.847 26.9584 15.9724 26.9584C14.3525 26.9584 13.2766 25.9168 11.6164 25.8883C9.86025 25.8599 8.89449 26.7593 7.28883 26.9856C7.10516 26.9856 6.92149 26.9856 6.74137 26.9856C5.56231 26.815 4.61077 25.8812 3.91756 25.0399C1.87346 22.5538 0.293876 19.3425 0 15.233C0 14.8301 0 14.4284 0 14.0255C0.124423 11.0843 1.55351 8.69304 3.45304 7.53413C4.45554 6.91794 5.83367 6.39299 7.36823 6.62762C8.02589 6.72953 8.69778 6.95467 9.28672 7.17745C9.84484 7.39193 10.5428 7.77231 11.204 7.75217C11.6519 7.73913 12.0975 7.50569 12.549 7.34098C13.8714 6.86343 15.1678 6.31597 16.8765 6.57311C18.9301 6.88357 20.3876 7.79601 21.2882 9.20377C19.551 10.3094 18.1776 11.9754 18.4123 14.8206C18.6208 17.405 20.1234 18.9171 22.0004 19.8082Z" fill="var(--fill-0, white)"/>
 </g>
 </svg>
--- a/public/assets/footer-logo.png
+++ b/public/assets/footer-logo.png
--- a/public/assets/header-globe.svg
+++ b/public/assets/header-globe.svg
@@ -0,0 +1,5 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Electric Cars, Solar &#38; Clean Energy _ Tesla-6 1">
 <path id="Vector" d="M23.8327 13.0003C23.8327 18.9836 18.9826 23.8337 12.9993 23.8337C7.0161 23.8337 2.16602 18.9836 2.16602 13.0003C2.16602 7.01708 7.0161 2.16699 12.9993 2.16699C18.9826 2.16699 23.8327 7.01708 23.8327 13.0003ZM10.0245 21.7179C9.69954 21.2484 9.4209 20.7484 9.19252 20.2251C8.75485 19.2392 8.41035 18.0747 8.1796 16.792H4.6046C5.12443 17.9392 5.87339 18.968 6.80545 19.8151C7.73752 20.6622 8.83298 21.3098 10.0245 21.7179ZM10.6778 19.5642C11.0418 20.3843 11.4556 20.9986 11.8727 21.3951C12.2865 21.7894 12.6657 21.9378 12.9993 21.9378C13.333 21.9378 13.7122 21.7894 14.126 21.3962C14.5431 20.9986 14.9569 20.3843 15.3209 19.5653C15.6687 18.7821 15.9579 17.8428 16.1659 16.792H9.83168C10.0397 17.8428 10.3289 18.7821 10.6767 19.5653L10.6778 19.5642ZM9.47852 13.0003C9.47852 13.7489 9.51751 14.4737 9.5901 15.167H16.4086C16.4812 14.4737 16.5202 13.7489 16.5202 13.0003C16.5202 12.2517 16.4812 11.527 16.4086 10.8337H9.5901C9.51751 11.527 9.47852 12.2517 9.47852 13.0003ZM7.95643 10.8337H4.04777C3.87684 11.5432 3.79066 12.2705 3.79102 13.0003C3.79102 13.7467 3.87985 14.4726 4.04777 15.167H7.95643C7.81688 13.7259 7.81688 12.2747 7.95643 10.8337ZM9.83276 9.20866H16.1648C15.959 8.15783 15.6687 7.21858 15.3209 6.43533C14.9569 5.61633 14.5431 5.00208 14.126 4.60449C13.7122 4.21124 13.333 4.06283 12.9993 4.06283C12.6657 4.06283 12.2865 4.21124 11.8727 4.60449C11.4556 5.00208 11.0418 5.61633 10.6778 6.43533C10.33 7.21858 10.0408 8.15783 9.83276 9.20866ZM18.0412 10.8337C18.1809 12.2747 18.1809 13.7259 18.0412 15.167H21.952C22.1226 14.4574 22.2084 13.7301 22.2077 13.0003C22.2081 12.2705 22.1219 11.5432 21.9509 10.8337H18.0412ZM21.393 9.20866C20.8733 8.06154 20.1245 7.03282 19.1926 6.18572C18.2608 5.33862 17.1655 4.69102 15.9742 4.28274C16.2851 4.72474 16.5624 5.22849 16.8062 5.77558C17.2438 6.76141 17.5883 7.92599 17.8191 9.20866H21.3941H21.393ZM8.1796 9.20866C8.41035 7.92599 8.75485 6.76033 9.19252 5.77558C9.43627 5.22849 9.71251 4.72474 10.0245 4.28274C8.83318 4.69102 7.73793 5.33862 6.80606 6.18572C5.87419 7.03282 5.12539 8.06154 4.60568 9.20866H8.1796ZM16.8062 20.2251C16.5624 20.7722 16.2862 21.2759 15.9742 21.7179C17.1655 21.3096 18.2608 20.662 19.1926 19.8149C20.1245 18.9678 20.8733 17.9391 21.393 16.792H17.818C17.5883 18.0747 17.2438 19.2403 16.8062 20.2251Z" fill="var(--fill-0, #2E2A28)"/>
 </g>
 </svg>
--- a/public/assets/header-logo-icon.png
+++ b/public/assets/header-logo-icon.png
--- a/public/assets/header-logo-wordmark.svg
+++ b/public/assets/header-logo-wordmark.svg
@@ -0,0 +1,14 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 77.9999 27.3466" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 8">
 <path id="Vector" d="M40.9405 20.8327C43.8201 20.792 46.7009 20.8546 49.5757 21.02C58.0611 21.5051 67.1544 23.0697 75.207 25.9203C75.7287 26.1051 76.704 26.4048 77.0609 26.8008C77.2687 28.0927 72.5969 26.7 72.1119 26.5908C63.0951 24.587 53.8933 23.5076 44.6529 23.3707C33.1497 23.0089 20.9234 24.7233 9.72826 27.2833C9.29807 27.3815 8.61557 27.3918 8.39051 26.9468C8.49032 26.3331 10.397 25.7556 10.9663 25.5599C20.5216 22.2771 30.8642 21.0698 40.9405 20.8327Z" fill="var(--fill-0, #F28A4B)"/>
 <path id="Vector_2" d="M31.318 0.0224661C31.8649 0.0139438 32.8866 -0.104058 33.2606 0.300423C33.3065 0.889771 32.4703 4.77527 32.3052 5.60259C32.0856 6.70196 31.7116 9.06001 31.422 10.1043C32.5555 9.18653 33.6855 8.09699 34.7424 7.13332C36.0662 5.92709 36.4364 5.25449 38.3791 5.48983C38.8939 5.55211 39.7945 5.27874 40.0876 5.81696C40.07 5.99789 40.0826 6.0228 39.9339 6.16768C38.2986 7.76135 36.4564 9.19244 34.775 10.7363C35.619 12.4178 36.9093 14.4474 37.8796 16.1165C38.0982 16.4652 38.3254 16.7563 38.3624 17.1608C38.3115 17.324 38.2538 17.3896 38.1055 17.4787C37.5409 17.8183 35.5396 17.7435 34.913 17.5403C34.2374 17.322 32.3776 13.308 31.9903 12.5528C31.5792 12.9003 31.1699 13.2497 30.7626 13.6017C30.5008 14.6369 30.4536 15.7264 30.2 16.7504C29.9334 17.7652 29.0813 17.7055 28.3005 17.6603C27.1169 17.5915 26.5033 17.9455 26.7986 16.441C27.0193 15.3173 27.29 14.1039 27.5094 12.994L28.896 5.9284C29.2375 4.25738 29.5313 2.57456 29.8657 0.90223C30.0467 -0.00309788 30.5349 0.0375439 31.318 0.0224661Z" fill="var(--fill-0, #2E2A28)"/>
 <path id="Vector_3" d="M0.941515 0.37534C3.25959 0.264915 5.62425 0.356276 7.94687 0.356276C9.60223 0.356276 11.5002 0.247168 13.1259 0.366795C13.2646 0.377311 13.366 0.393748 13.4863 0.469994C13.6176 0.552812 13.6619 0.717133 13.6716 0.862394C13.704 1.34682 13.2587 2.8691 12.9071 3.19709C12.4474 3.62564 9.05615 3.40611 8.28287 3.39953C7.47585 6.82599 6.89241 10.4187 6.11747 13.8899C5.92381 14.8114 5.75465 16.7208 5.20897 17.4136C4.89788 17.808 2.41612 17.8363 1.98082 17.3577C1.89186 16.7839 4.39226 4.90867 4.68484 3.41333C3.72145 3.39296 0.616716 3.61249 0.0536389 3.1353C-0.061151 2.88487 0.0320916 2.45895 0.11222 2.19932C0.347797 1.43621 0.126322 0.759855 0.941515 0.37534Z" fill="var(--fill-0, #2E2A28)"/>
 <path id="Vector_4" d="M25.4674 0.0148448C25.9427 0.00694851 27.0579 -0.0542471 27.4724 0.147108C27.895 0.35307 27.4717 1.69149 27.391 2.14421C27.2885 2.71866 27.1388 3.37932 27.0188 3.98339L25.756 10.4031C25.3468 12.5107 25.0186 14.6447 24.5911 16.7504C24.4225 17.5808 24.2599 17.6907 23.4616 17.692C22.8596 17.6828 21.6356 17.8295 21.2147 17.4591C21.1268 17.3821 21.125 17.3492 21.136 17.209C21.2783 15.3817 21.8208 13.3984 22.1653 11.6119L23.56 4.36044C23.797 3.14967 24.0258 1.93562 24.2946 0.731434C24.459 -0.00489494 24.8585 0.0306374 25.4674 0.0148448Z" fill="var(--fill-0, #2E2A28)"/>
 <g id="Vector_5">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M71.6495 5.11303C74.6824 4.86166 77.5554 6.28123 77.9503 9.53783C78.1755 11.4579 77.6281 13.3892 76.4288 14.906C75.0142 16.6748 73.1939 17.5443 70.9747 17.7839C67.818 18.0877 64.8171 16.6472 64.4884 13.2195C64.3149 11.2569 64.9282 9.30557 66.1935 7.79467C67.6121 6.10827 69.4964 5.30877 71.6495 5.11303ZM71.3595 7.84935C69.1568 8.28547 67.9375 10.1587 67.9572 12.3425C67.975 14.3657 69.1902 15.2459 71.1368 15.0896C72.2798 14.8336 73.2163 14.2735 73.795 13.2497C75.1541 10.8445 74.911 7.55083 71.3595 7.84935Z" fill="var(--fill-0, #F28A4B)"/>
 <path d="M64.0954 4.9784C64.4103 4.94111 65.2562 5.06895 65.2588 5.37122C65.2661 6.07163 64.7563 7.87458 64.4288 8.43917C63.9897 8.46314 63.4642 8.42253 63.0303 8.47379C60.3232 8.79071 59.8827 10.8613 59.4615 13.0438C59.2766 14.0012 59.1082 14.9626 58.957 15.9266C58.7602 17.1524 58.8349 17.8707 57.3221 17.6837C56.7807 17.6164 55.7896 17.8554 55.3974 17.4839C55.2865 17.2476 55.3069 17.2409 55.3452 16.9886C55.7044 15.5025 57.3981 5.79532 57.7177 5.49439C57.8893 5.3326 58.2492 5.282 58.471 5.27135C58.9484 5.24871 60.3179 5.1788 60.6474 5.47707C60.8355 5.84792 60.5846 6.93582 60.5212 7.42784C61.4258 6.0683 62.4315 5.14485 64.0954 4.9784Z" fill="var(--fill-0, #F28A4B)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.9446 0.1562C50.955 0.158164 53.5275 0.122138 55.0666 1.63374C57.201 3.7307 56.339 7.94429 54.3235 9.84468C52.1625 11.8833 49.6855 11.9808 46.8987 11.9619L46.1184 11.957C45.9559 12.7548 45.3084 17.0471 44.9719 17.3691C44.6001 17.7241 43.1814 17.6145 42.6409 17.6191C42.2972 17.6217 41.9482 17.6038 41.6916 17.3525C41.5596 16.8275 43.0455 9.96145 43.2288 8.98823L44.2737 3.62983C44.4556 2.70432 44.6085 1.7591 44.8166 0.838817C44.905 0.448118 45.0992 0.373253 45.4329 0.183544C45.7078 0.175033 45.9841 0.168595 46.259 0.164012C47.1544 0.15616 48.0492 0.153582 48.9446 0.1562ZM47.8303 3.18061C47.6215 4.33916 47.4035 5.49572 47.175 6.65034C47.0402 7.34484 46.8186 8.33409 46.7727 9.01557C48.4072 9.0241 49.6081 9.14689 51.0706 8.34956C53.0184 7.11729 53.6271 3.65427 50.7307 3.25483C49.8037 3.12652 48.7737 3.17538 47.8303 3.18061Z" fill="var(--fill-0, #F28A4B)"/>
 </g>
 <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M14.8502 5.24274C19.7083 4.68825 21.102 7.28866 19.9723 11.6041C19.8429 12.0983 19.3743 14.3233 19.3122 14.7652C18.9984 16.9987 20.4166 17.7218 17.1188 17.6675C16.048 17.64 15.8944 17.0865 15.943 16.1431C14.502 17.603 12.8943 18.2777 10.8043 17.7808C10.0268 17.5955 9.52384 17.1424 9.01625 16.5611C7.80468 14.6731 8.71157 12.0689 10.6413 11.064C12.5185 10.0867 14.8779 10.1417 16.9508 10.0972C17.405 7.84867 16.1659 7.37086 14.1364 7.89899C13.2123 8.13925 12.8419 8.64924 12.0778 9.13434L12.0084 9.17829C11.9265 9.13578 11.8462 9.09028 11.7672 9.04255C9.15458 7.48582 11.4606 6.12449 13.2497 5.55622C13.7891 5.38473 14.2902 5.31212 14.8502 5.24274ZM16.4821 12.2779C15.8553 12.2759 15.1975 12.2591 14.5758 12.314C14.1695 12.354 13.8972 12.3897 13.4528 12.4781C12.2772 12.7118 11.0575 14.261 12.2916 15.1998C12.6616 15.4819 13.2647 15.5124 13.7487 15.483C15.5022 15.0856 16.2509 13.9879 16.4821 12.2779Z" fill="var(--fill-0, #2E2A28)"/>
 </g>
 </svg>
--- a/public/assets/hero-bg.png
+++ b/public/assets/hero-bg.png
--- a/public/assets/hero-phone.png
+++ b/public/assets/hero-phone.png
--- a/public/assets/preview-arrow-left.svg
+++ b/public/assets/preview-arrow-left.svg
@@ -0,0 +1,5 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Frame 175571">
 <path id="Vector" d="M5.5925 11.0298L14.0925 4.33982C15.1125 3.52982 16.6125 4.25982 16.6125 5.55982V18.9398C16.6125 20.2398 15.1125 20.9698 14.0925 20.1598L5.5925 13.4698C4.8025 12.8498 4.8025 11.6498 5.5925 11.0198V11.0298Z" fill="var(--fill-0, white)"/>
 </g>
 </svg>
--- a/public/assets/preview-arrow-right.svg
+++ b/public/assets/preview-arrow-right.svg
@@ -0,0 +1,5 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Frame 175571">
 <path id="Vector" d="M5.5925 11.0298L14.0925 4.33982C15.1125 3.52982 16.6125 4.25982 16.6125 5.55982V18.9398C16.6125 20.2398 15.1125 20.9698 14.0925 20.1598L5.5925 13.4698C4.8025 12.8498 4.8025 11.6498 5.5925 11.0198V11.0298Z" fill="var(--fill-0, white)"/>
 </g>
 </svg>
--- a/public/assets/preview-phone.png
+++ b/public/assets/preview-phone.png
--- a/public/assets/trust-divider.svg
+++ b/public/assets/trust-divider.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1 118" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Vector 16" d="M0.5 0V118" stroke="var(--stroke-0, #F08458)" stroke-opacity="0.5"/>
 </svg>
--- a/public/assets/trust-icon-improvement.png
+++ b/public/assets/trust-icon-improvement.png
--- a/public/assets/trust-icon-sprite.png
+++ b/public/assets/trust-icon-sprite.png
--- a/public/assets/why-icon-connected.svg
+++ b/public/assets/why-icon-connected.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44.0005 43.9141" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Vector" d="M30.717 41.8428C27.9992 43.2162 25.0668 43.9141 22.0002 43.9141C18.9337 43.914 16.0021 43.2162 13.2844 41.8428L14.4474 39.542C19.1554 41.9236 24.845 41.9235 29.5529 39.542L30.717 41.8428ZM3.22186 28.0195C6.36294 26.2075 10.2762 27.349 12.0265 30.3789C13.8073 33.4615 12.7515 37.4018 9.66717 39.1836C6.57694 40.9653 2.64108 39.9046 0.861506 36.8242C-0.914556 33.7465 0.144168 29.797 3.22186 28.0195ZM31.9738 30.3789C33.7241 27.3491 37.6372 26.2075 40.7785 28.0195C43.8563 29.7971 44.9151 33.7464 43.1388 36.8242C41.3615 39.9009 37.4278 40.968 34.3332 39.1836C31.2509 37.4029 30.1921 33.4632 31.9738 30.3789ZM12.8234 10.5527C8.38347 13.4645 5.55977 18.3585 5.26776 23.6406L2.69451 23.499C3.02938 17.4013 6.28762 11.757 11.4084 8.39844L12.8234 10.5527ZM32.592 8.39844C37.7129 11.757 40.9709 17.4013 41.3058 23.499L38.7326 23.6406C38.4406 18.3585 35.6169 13.4654 31.1769 10.5537L32.592 8.39844ZM22.0002 0C25.5539 0 28.4455 2.89155 28.4455 6.44531C28.4455 9.99907 25.5539 12.8906 22.0002 12.8906C18.4465 12.8906 15.5549 9.99903 15.5549 6.44531C15.5549 2.89159 18.4465 6.78247e-05 22.0002 0Z" fill="var(--fill-0, white)"/>
 </svg>
--- a/public/assets/why-icon-familiar.svg
+++ b/public/assets/why-icon-familiar.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 38 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Vector" d="M38 0V40H0V0H38ZM20.5771 2.35254V37.6475H35.4229V2.35254H20.5771Z" fill="var(--fill-0, white)"/>
 </svg>
--- a/public/assets/why-icon-modern.svg
+++ b/public/assets/why-icon-modern.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24.168 44.001" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Union" d="M24.168 36.0859V44.001H0V24.0576L24.168 36.0859ZM6.02539 36.1299C5.60296 37.1749 4.75786 38.0199 3.71289 38.4424C4.75786 38.8648 5.60296 39.7099 6.02539 40.7549C6.44783 39.7099 7.29292 38.8648 8.33789 38.4424C7.29292 38.0199 6.44783 37.1749 6.02539 36.1299ZM24.168 21.1445V28.8379L0 16.8096V9.09375L24.168 21.1445ZM24.168 18.9658L0 6.9375V0H24.168V18.9658Z" fill="var(--fill-0, white)"/>
 </svg>
--- a/public/assets/why-icon-simple.svg
+++ b/public/assets/why-icon-simple.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44.001 43.9639" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Vector" d="M31.7793 34.1846L22.001 43.9639L12.2217 34.1846L22.001 24.4062L31.7793 34.1846ZM19.5576 22.0107L9.77832 31.7891L0 22.0107L9.77832 12.2314L19.5576 22.0107ZM44.001 21.9902L34.2227 31.7686L24.4434 21.9902L34.2227 12.2109L44.001 21.9902ZM31.7529 9.7793L21.9746 19.5576L12.1953 9.7793L21.9746 0L31.7529 9.7793Z" fill="var(--fill-0, white)"/>
 </svg>
--- a/public/assets/why-illustration.mp4
+++ b/public/assets/why-illustration.mp4
--- a/public/assets/why-illustration.png
+++ b/public/assets/why-illustration.png
--- a/public/assets/why-underline.svg
+++ b/public/assets/why-underline.svg
@@ -0,0 +1,3 @@
 <svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 295.5 1" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="Vector 15" d="M0 0.5H295.5" stroke="var(--stroke-0, #F08458)"/>
 </svg>
--- a/public/site-links-client.js
+++ b/public/site-links-client.js
@@ -0,0 +1,310 @@
 /**
 * Mirrors talkpro static site: /api/site-links, APK default, in-app + App Store modals.
 * Strings come from #site-links-i18n (JSON) rendered by DownloadCTA.astro.
 */
 (function () {
  const DEFAULT_APK = 'https://talkspro.xyz/download';
  let apkDownloadUrl = DEFAULT_APK;
  function getApkDownloadUrl() {
    return apkDownloadUrl;
  }
  function getI18n() {
    const el = document.getElementById('site-links-i18n');
    if (!el || !el.textContent.trim()) return {};
    try {
      return JSON.parse(el.textContent);
    } catch {
      return {};
    }
  }
  function detectInAppBrowser() {
    const ua = navigator.userAgent || '';
    if (/MicroMessenger/i.test(ua)) return 'wechat';
    try {
      if (typeof window.WeixinJSBridge !== 'undefined') return 'wechat';
    } catch {
      /* ignore */
    }
    if (/QQ\//i.test(ua) && /MQQBrowser/i.test(ua)) return 'qq';
    if (/Weibo/i.test(ua)) return 'weibo';
    return '';
  }
  function isIOSDevice() {
    const ua = navigator.userAgent || '';
    if (/iPhone|iPad|iPod/i.test(ua)) return true;
    if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) return true;
    return false;
  }
  function isAndroidDevice() {
    const ua = navigator.userAgent || '';
    return /Android/i.test(ua) && !isIOSDevice();
  }
  const MODAL_WRAP =
    'position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;';
  const MODAL_BACK = 'position:absolute;inset:0;background:rgba(0,0,0,.45);cursor:pointer;';
  const MODAL_PANEL =
    'position:relative;max-width:420px;width:100%;margin:auto;padding:20px 22px;border-radius:12px;background:#fff;color:#1a1a1a;font:15px/1.45 system-ui,-apple-system,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.18);';
  const MODAL_TITLE = 'margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.25;';
  const MODAL_BODY = 'margin:0 0 18px;font-size:14px;color:#444;';
  const MODAL_ACTIONS = 'display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;';
  const BTN =
    'cursor:pointer;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #ccc;background:#f5f5f5;color:#1a1a1a;';
  const BTN_PRIMARY = 'border-color:#1a6cff;background:#1a6cff;color:#fff;';
  const BTN_ORANGE = 'cursor:pointer;border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #f28a4b;background:#f28a4b;color:#fff;';
  function initInAppBrowserModal() {
    if (document.getElementById('inapp-browser-modal')) return;
    const wrap = document.createElement('div');
    wrap.id = 'inapp-browser-modal';
    wrap.setAttribute('role', 'dialog');
    wrap.setAttribute('aria-modal', 'true');
    wrap.setAttribute('aria-hidden', 'true');
    wrap.style.cssText = MODAL_WRAP + 'display:none;';
    wrap.innerHTML =
      '<div data-inapp-close style="' +
      MODAL_BACK +
      '"></div>' +
      '<div style="' +
      MODAL_PANEL +
      '">' +
      '<h3 id="inapp-modal-title" style="' +
      MODAL_TITLE +
      '"></h3>' +
      '<p id="inapp-modal-body" style="' +
      MODAL_BODY +
      '"></p>' +
      '<div style="' +
      MODAL_ACTIONS +
      '">' +
      '<button type="button" id="inapp-copy-apk" style="' +
      BTN +
      BTN_PRIMARY +
      '"></button>' +
      '<button type="button" id="inapp-try-chrome" style="' +
      BTN +
      '" hidden></button>' +
      '<button type="button" id="inapp-got-it" data-inapp-close style="' +
      BTN +
      '"></button>' +
      '</div></div>';
    document.body.appendChild(wrap);
    const close = () => {
      wrap.style.display = 'none';
      wrap.setAttribute('aria-hidden', 'true');
    };
    wrap.querySelectorAll('[data-inapp-close]').forEach((el) => {
      el.addEventListener('click', close);
    });
    const i18n = () => getI18n();
    document.getElementById('inapp-copy-apk').addEventListener('click', async () => {
      const btn = document.getElementById('inapp-copy-apk');
      const dict = i18n();
      const done = dict.inapp_browser_copied || 'Copied';
      try {
        await navigator.clipboard.writeText(getApkDownloadUrl());
        const prev = btn.textContent;
        btn.textContent = done;
        setTimeout(() => {
          btn.textContent = dict.inapp_browser_copy || prev;
        }, 1600);
      } catch {
        window.prompt(dict.inapp_browser_copy || 'Copy', getApkDownloadUrl());
      }
    });
    document.getElementById('inapp-try-chrome').addEventListener('click', () => {
      const enc = encodeURIComponent(getApkDownloadUrl());
      const intent =
        getApkDownloadUrl().replace(/^https:/i, 'intent:') +
        '#Intent;' +
        'scheme=https;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;' +
        'package=com.android.chrome;S.browser_fallback_url=' +
        enc +
        ';end';
      window.location.href = intent;
    });
  }
  function openInAppBrowserModal() {
    const modal = document.getElementById('inapp-browser-modal');
    if (!modal) return;
    const dict = getI18n();
    const tryChrome = modal.querySelector('#inapp-try-chrome');
    const showChrome = isAndroidDevice() && !!detectInAppBrowser();
    if (tryChrome) {
      tryChrome.hidden = !showChrome;
      tryChrome.setAttribute('aria-hidden', showChrome ? 'false' : 'true');
    }
    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
    const titleEl = modal.querySelector('#inapp-modal-title');
    const bodyEl = modal.querySelector('#inapp-modal-body');
    if (titleEl) titleEl.textContent = dict.inapp_browser_title || '';
    if (bodyEl) {
      const iosWechat = isIOSDevice() && detectInAppBrowser() === 'wechat';
      const bodyKey = iosWechat ? 'inapp_browser_body_ios' : 'inapp_browser_body';
      bodyEl.innerHTML =
        dict[bodyKey] || dict.inapp_browser_body || '';
    }
    const copyBtn = modal.querySelector('#inapp-copy-apk');
    const gotBtn = modal.querySelector('#inapp-got-it');
    if (copyBtn) copyBtn.textContent = dict.inapp_browser_copy || '';
    if (tryChrome) tryChrome.textContent = dict.inapp_browser_try_chrome || '';
    if (gotBtn) gotBtn.textContent = dict.inapp_browser_got_it || 'OK';
  }
  function initAppStoreSoonModal() {
    if (document.getElementById('app-store-soon-modal')) return;
    const wrap = document.createElement('div');
    wrap.id = 'app-store-soon-modal';
    wrap.setAttribute('role', 'dialog');
    wrap.setAttribute('aria-modal', 'true');
    wrap.setAttribute('aria-hidden', 'true');
    wrap.style.cssText = MODAL_WRAP + 'display:none;';
    wrap.innerHTML =
      '<div data-app-soon-close style="' +
      MODAL_BACK +
      '"></div>' +
      '<div style="' +
      MODAL_PANEL +
      '">' +
      '<h3 id="app-soon-title" style="' +
      MODAL_TITLE +
      '"></h3>' +
      '<p id="app-soon-body" style="' +
      MODAL_BODY +
      '"></p>' +
      '<div style="' +
      MODAL_ACTIONS +
      '">' +
      '<button type="button" data-app-soon-close style="' +
      BTN_ORANGE +
      '"></button>' +
      '</div></div>';
    document.body.appendChild(wrap);
    const close = () => {
      wrap.style.display = 'none';
      wrap.setAttribute('aria-hidden', 'true');
    };
    wrap.querySelectorAll('[data-app-soon-close]').forEach((el) => {
      el.addEventListener('click', close);
    });
  }
  function openAppStoreSoonModal() {
    const modal = document.getElementById('app-store-soon-modal');
    if (!modal) return;
    const dict = getI18n();
    const tEl = modal.querySelector('#app-soon-title');
    const bEl = modal.querySelector('#app-soon-body');
    const ok = modal.querySelector('button[data-app-soon-close]');
    if (tEl) tEl.textContent = dict.app_store_soon_title || '';
    if (bEl) bEl.innerHTML = dict.app_store_soon_body || '';
    if (ok) ok.textContent = dict.app_store_soon_ok || 'OK';
    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
  }
  function bindBrowserDownloadLinks() {
    document.querySelectorAll('a.store-badge--browser').forEach((a) => {
      const openForInApp = (e) => {
        if (!detectInAppBrowser()) return;
        e.preventDefault();
        e.stopPropagation();
        openInAppBrowserModal();
      };
      a.addEventListener('click', openForInApp);
      a.addEventListener(
        'touchend',
        (e) => {
          if (!detectInAppBrowser()) return;
          e.preventDefault();
          openInAppBrowserModal();
        },
        { passive: false }
      );
    });
  }
  function bindAppStoreAppleBadges() {
    document.querySelectorAll('a.store-badge--apple[data-app-soon]').forEach((a) => {
      const stopAndOpen = (e) => {
        e.preventDefault();
        e.stopPropagation();
        openAppStoreSoonModal();
      };
      a.addEventListener('click', stopAndOpen);
      a.addEventListener(
        'touchend',
        (e) => {
          e.preventDefault();
          e.stopPropagation();
          openAppStoreSoonModal();
        },
        { passive: false }
      );
    });
  }
  function loadSiteLinksThenBind() {
    if (window.location.protocol === 'file:') {
      bindBrowserDownloadLinks();
      bindAppStoreAppleBadges();
      return;
    }
    fetch('/api/site-links', { credentials: 'same-origin' })
      .then((r) => {
        if (!r.ok) throw new Error('bad status');
        return r.json();
      })
      .then((j) => {
        const apk = String(j.apk_download_url || '').trim();
        const ios = String(j.app_store_url || '').trim();
        if (apk.startsWith('https://')) apkDownloadUrl = apk;
        document.querySelectorAll('a.store-badge--browser').forEach((a) => {
          if (apk.startsWith('https://')) a.setAttribute('href', apk);
        });
        document.querySelectorAll('a.store-badge--apple').forEach((a) => {
          if (ios.startsWith('https://')) {
            a.setAttribute('href', ios);
            a.removeAttribute('data-app-soon');
            a.setAttribute('rel', 'noopener noreferrer');
            a.setAttribute('target', '_blank');
          }
        });
        const meta = document.getElementById('site-links-meta');
        if (meta) {
          const dict = getI18n();
          const u = String(j.updated_at || '').trim();
          if (u) {
            meta.textContent =
              (dict.linksMetaPrefix || 'Store links file updated: ') +
              u +
              (dict.linksMetaSuffix || ' (GMT+8)');
            meta.hidden = false;
          } else {
            meta.hidden = true;
          }
        }
      })
      .catch(() => {
        /* keep defaults */
      })
      .finally(() => {
        bindBrowserDownloadLinks();
        bindAppStoreAppleBadges();
      });
  }
  initInAppBrowserModal();
  initAppStoreSoonModal();
  loadSiteLinksThenBind();
 })();
--- a/scripts/deploy-talkpro.sh
+++ b/scripts/deploy-talkpro.sh
@@ -0,0 +1,71 @@
 #!/usr/bin/env bash
 # Build Astro dist/ and sync to the Talk Pro marketing host (talkpro.info).
 # Used by Gitea Actions and for manual deploys from this repo.
 #
 # Required (CI): TALKPRO_SSH_PRIVATE_KEY — PEM contents (Gitea secret)
 # Optional: TALKPRO_SSH_KEY_FILE — path to PEM (local)
 # Defaults match .env.deploy.example / Gitea workflow job env:
 #   TALKPRO_HOST=13.214.179.69  TALKPRO_USER=ubuntu  TALKPRO_REMOTE_ROOT=/home/ubuntu/talkpro
 set -euo pipefail
 ROOT="$(cd "$(dirname "$0")/.." && pwd)"
 cd "$ROOT"
 HOST="${TALKPRO_HOST:-13.214.179.69}"
 USER="${TALKPRO_USER:-ubuntu}"
 REMOTE_ROOT="${TALKPRO_REMOTE_ROOT:-/home/ubuntu/talkpro}"
 [[ -n "$HOST" ]] || HOST=13.214.179.69
 [[ -n "$USER" ]] || USER=ubuntu
 [[ -n "$REMOTE_ROOT" ]] || REMOTE_ROOT=/home/ubuntu/talkpro
 KEY_FILE="${TALKPRO_SSH_KEY_FILE:-}"
 TMP_KEY=""
 cleanup() {
  [[ -n "$TMP_KEY" && -f "$TMP_KEY" ]] && rm -f "$TMP_KEY"
 }
 trap cleanup EXIT
 if [[ -n "${TALKPRO_SSH_PRIVATE_KEY:-}" ]]; then
  TMP_KEY="$(mktemp)"
  chmod 600 "$TMP_KEY"
  printf '%s\n' "$TALKPRO_SSH_PRIVATE_KEY" | tr -d '\r' > "$TMP_KEY"
  KEY_FILE="$TMP_KEY"
 elif [[ -z "$KEY_FILE" || ! -f "$KEY_FILE" ]]; then
  echo "ERROR: Set TALKPRO_SSH_PRIVATE_KEY (Gitea secret / env) or TALKPRO_SSH_KEY_FILE (local path)" >&2
  exit 1
 fi
 if [[ ! -s "$KEY_FILE" ]]; then
  echo "ERROR: SSH key file is empty — check TALKPRO_SSH_PRIVATE_KEY secret in Gitea" >&2
  exit 1
 fi
 chmod 600 "$KEY_FILE"
 SSH_OPTS=(-i "$KEY_FILE" -o BatchMode=yes -o StrictHostKeyChecking=accept-new)
 RSYNC_SSH="ssh -i \"$KEY_FILE\" -o BatchMode=yes -o StrictHostKeyChecking=accept-new"
 REMOTE="${USER}@${HOST}"
 if [[ -f package-lock.json ]]; then
  npm ci
 else
  npm install
 fi
 npm run build
 command -v ssh >/dev/null || { echo "ERROR: ssh not found (install openssh-client)" >&2; exit 127; }
 ssh "${SSH_OPTS[@]}" "$REMOTE" "mkdir -p ${REMOTE_ROOT}"
 if command -v rsync >/dev/null 2>&1; then
  echo "Uploading with rsync..."
  rsync -avz --delete \
    -e "$RSYNC_SSH" \
    dist/ \
    "${REMOTE}:${REMOTE_ROOT}/"
 else
  command -v tar >/dev/null || { echo "ERROR: need rsync or tar on the runner" >&2; exit 127; }
  echo "Uploading with tar over ssh (rsync not available on runner)..."
  ssh "${SSH_OPTS[@]}" "$REMOTE" "mkdir -p ${REMOTE_ROOT} && rm -rf ${REMOTE_ROOT:?}/*"
  tar -C dist -cf - . | ssh "${SSH_OPTS[@]}" "$REMOTE" "tar -C ${REMOTE_ROOT} -xf -"
 fi
 echo "Deployed dist/ → ${REMOTE}:${REMOTE_ROOT}/"
--- a/scripts/download-assets.sh
+++ b/scripts/download-assets.sh
@@ -0,0 +1,19 @@
 #!/bin/bash
 set -e
 mkdir -p public/assets
 curl -sL "https://www.figma.com/api/mcp/asset/81b107f5-6e2b-4877-9cd6-d2af7b9fc4e4" -o public/assets/logo-icon.png
 curl -sL "https://www.figma.com/api/mcp/asset/642480ed-2bdc-40f0-8b34-4d868443be3a" -o public/assets/logo-wordmark.png
 curl -sL "https://www.figma.com/api/mcp/asset/92f03ea0-0710-41ca-a84c-eff4af034455" -o public/assets/hero-bg.png
 curl -sL "https://www.figma.com/api/mcp/asset/9e59170a-ac6c-48fd-a869-34bcd7beec0c" -o public/assets/hero-phone.png
 curl -sL "https://www.figma.com/api/mcp/asset/86a3a493-f756-4e82-a055-2857ad1bb127" -o public/assets/icon-messaging.png
 curl -sL "https://www.figma.com/api/mcp/asset/d8131626-0de4-4be3-98a0-d01c310c7e2d" -o public/assets/icon-groups.png
 curl -sL "https://www.figma.com/api/mcp/asset/e9d23aa1-7e10-4382-b1bd-b9ac755e2a5f" -o public/assets/icon-channels.png
 curl -sL "https://www.figma.com/api/mcp/asset/ac45f93c-45ed-464a-8a9c-c389ba20555f" -o public/assets/icon-voice.png
 curl -sL "https://www.figma.com/api/mcp/asset/67edb5de-858a-4a14-86bf-ac815f6681d1" -o public/assets/icon-video.png
 curl -sL "https://www.figma.com/api/mcp/asset/c54dcf64-c5ff-4e2e-9573-c80e3946d1fc" -o public/assets/icon-media.png
 curl -sL "https://www.figma.com/api/mcp/asset/295181b7-7046-42dc-a5f2-234957c85c27" -o public/assets/badge-android-icon.png
 curl -sL "https://www.figma.com/api/mcp/asset/c1b2603d-7e44-4235-ba42-5ca5983bd926" -o public/assets/badge-ios-icon.png
 curl -sL "https://www.figma.com/api/mcp/asset/62960bde-f21e-494f-8e9d-f2f0b7a55547" -o public/assets/footer-divider.png
 echo "Done. $(ls public/assets | wc -l) assets downloaded."
--- a/src/assets.ts
+++ b/src/assets.ts
@@ -0,0 +1,5 @@
 const assetVersion = '20260518-1'
 export function assetPath(path: string) {
  return `${path}?v=${assetVersion}`
 }
--- a/src/components/AppPreview.astro
+++ b/src/components/AppPreview.astro
@@ -0,0 +1,91 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['preview']
 }
 const { t } = Astro.props
 const slides = [
  assetPath("/assets/preview-phone.png"),
  assetPath("/assets/preview-phone.png"),
  assetPath("/assets/preview-phone.png"),
 ]
 const arrowLeft = assetPath("/assets/preview-arrow-left.svg")
 const arrowRight = assetPath("/assets/preview-arrow-right.svg")
 ---
 <section class="app-preview">
  <div class="app-preview__header">
    <p class="app-preview__title">
      {t.title}
    </p>
    <p class="app-preview__description">
      {t.description}
    </p>
  </div>
  <div class="app-preview__carousel" id="carousel">
    <div class="app-preview__side-phone">
      <img id="phone-left" alt="" class="app-preview__phone-image" src={slides[slides.length - 1]} />
    </div>
    <div class="app-preview__control-wrap">
      <div class="app-preview__control-inner">
        <button id="btn-prev" class="app-preview__button">
          <img alt={t.previous} class="app-preview__button-icon" src={arrowLeft} />
        </button>
      </div>
    </div>
    <div class="app-preview__center-phone">
      <img id="phone-center" alt={t.phoneAlt} class="app-preview__phone-image" src={slides[0]} />
    </div>
    <div class="app-preview__control-wrap">
      <div class="app-preview__control-inner">
        <button id="btn-next" class="app-preview__button">
          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src={arrowRight} />
        </button>
      </div>
    </div>
    <div class="app-preview__side-phone">
      <img id="phone-right" alt="" class="app-preview__phone-image" src={slides[1]} />
    </div>
  </div>
 </section>
 <script>
  const carousel = document.getElementById('carousel')!;
  const allSlides: string[] = JSON.parse(carousel.dataset.slides || '[]');
  const leftImg = document.getElementById('phone-left') as HTMLImageElement;
  const centerImg = document.getElementById('phone-center') as HTMLImageElement;
  const rightImg = document.getElementById('phone-right') as HTMLImageElement;
  const btnPrev = document.getElementById('btn-prev')!;
  const btnNext = document.getElementById('btn-next')!;
  let current = 0;
  function mod(n: number, m: number) { return ((n % m) + m) % m; }
  function transition(next: number) {
    [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '0'));
    setTimeout(() => {
      current = mod(next, allSlides.length);
      if (leftImg) leftImg.src = allSlides[mod(current - 1, allSlides.length)];
      if (centerImg) centerImg.src = allSlides[current];
      if (rightImg) rightImg.src = allSlides[mod(current + 1, allSlides.length)];
      [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '1'));
    }, 200);
  }
  if (btnPrev) btnPrev.addEventListener('click', () => transition(current - 1));
  if (btnNext) btnNext.addEventListener('click', () => transition(current + 1));
 </script>
 <script define:vars={{ slides }}>
  document.getElementById('carousel').dataset.slides = JSON.stringify(slides);
 </script>
--- a/src/components/CoreSystem.astro
+++ b/src/components/CoreSystem.astro
@@ -0,0 +1,47 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['core']
 }
 const { t } = Astro.props
 const halftone = assetPath("/assets/core-halftone-bg.png");
 const icons = [
  assetPath("/assets/core-icon-private.png"),
  assetPath("/assets/core-icon-groups.png"),
  assetPath("/assets/core-icon-channels.png"),
  assetPath("/assets/core-icon-voice.png"),
  assetPath("/assets/core-icon-video.png"),
  assetPath("/assets/core-icon-media.png"),
 ]
 ---
 <section id="features" class="features">
  <img alt="" class="features__bg" src={halftone} />
  <div class="features__header">
    <div class="section-eyebrow">
      <span class="section-eyebrow__text">{t.eyebrow}</span>
    </div>
    <p class="features__title">{t.title}</p>
    <p class="features__description">
      {t.description}
    </p>
  </div>
  <div class="features__grid">
    {t.cards.map((card, index) => (
      <div class="feature-card">
        <div class="feature-card__icon-frame">
          <img alt={card.title} class="feature-card__icon" src={icons[index]} />
        </div>
        <div class="feature-card__copy">
          <p class="feature-card__title">{card.title}</p>
          <p class="feature-card__description">{card.desc}</p>
        </div>
      </div>
    ))}
  </div>
 </section>
--- a/src/components/DownloadCTA.astro
+++ b/src/components/DownloadCTA.astro
@@ -0,0 +1,81 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['download']
  siteLinks: Translations['siteLinks']
 }
 const { t, siteLinks } = Astro.props
 const bgPattern = assetPath("/assets/cta-bg-pattern.svg");
 const talkproLogo = assetPath("/assets/cta-talkpro-logo.svg");
 const androidIcon = assetPath("/assets/cta-android-icon.svg");
 const appleIcon = assetPath("/assets/cta-apple-icon.svg");
 const phoneArt = assetPath("/assets/cta-phone-art.png");
 const defaultApkHref = "https://talkspro.xyz/download";
 const siteLinksJson = JSON.stringify(siteLinks);
 ---
 <section id="download" class="download-cta">
  <img alt="" class="download-cta__pattern" src={bgPattern} />
  <div class="download-cta__inner">
    <div class="download-cta__content">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>
      <div class="download-cta__copy">
        <div class="download-cta__heading">
          <p class="download-cta__title">{t.title}</p>
          <div class="download-cta__logo-frame">
            <img alt={t.logoAlt} class="download-cta__logo" src={talkproLogo} />
          </div>
        </div>
        <p class="download-cta__description">
          {t.description}
        </p>
      </div>
      <div class="store-badges">
        <a
          class="store-badge store-badge--android store-badge--browser"
          href={defaultApkHref}
          rel="noopener noreferrer"
          target="_blank"
        >
          <div class="store-badge__icon-frame">
            <img alt={t.androidAlt} class="store-badge__android-icon" src={androidIcon} />
          </div>
          <div class="store-badge__copy">
            <p class="store-badge__platform">{t.android}</p>
            <p class="store-badge__label">{t.androidCta}</p>
          </div>
        </a>
        <a
          class="store-badge store-badge--ios store-badge--apple"
          href="#"
          data-app-soon="1"
        >
          <div class="store-badge__icon-frame">
            <img alt={t.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
          </div>
          <div class="store-badge__copy">
            <p class="store-badge__platform">{t.ios}</p>
            <p class="store-badge__label">{t.iosCta}</p>
          </div>
        </a>
      </div>
    </div>
    <div class="download-cta__phone">
      <div class="download-cta__phone-crop">
        <img alt={t.phoneAlt} class="download-cta__phone-image" src={phoneArt} />
      </div>
    </div>
  </div>
 </section>
 <script type="application/json" id="site-links-i18n" set:html={siteLinksJson} />
--- a/src/components/Experience.astro
+++ b/src/components/Experience.astro
@@ -0,0 +1,52 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['experience']
 }
 const { t } = Astro.props
 const images = [
  assetPath("/assets/exp-card-1.png"),
  assetPath("/assets/exp-card-2.png"),
  assetPath("/assets/exp-card-3.png"),
 ]
 const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
 ---
 <section id="experience" class="experience">
  <div class="experience__inner">
    <div class="experience__heading">
      <p class="experience__title">
        {t.title}
      </p>
      <p class="experience__caption">
        {t.caption}
      </p>
    </div>
    <div class="experience__body">
      <div class="experience__grid">
        {t.cards.map((card, index) => (
          <div class="experience-card">
            <div class={`experience-card__media ${index > 0 ? 'experience-card__media--tinted' : ''}`}>
              <div class="experience-card__media-crop">
                <img
                  alt={card.alt}
                  class={`experience-card__image ${imageClasses[index]}`}
                  src={images[index]}
                />
              </div>
            </div>
            <div class="experience-card__copy">
              <p class="experience-card__title">{card.title}</p>
              <p class="experience-card__description">{card.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
 </section>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,34 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['footer']
 }
 const { t } = Astro.props
 const logoFull = assetPath("/assets/footer-logo.png");
 ---
 <footer class="site-footer">
  <div class="site-footer__inner">
    <div class="site-footer__top">
      <div class="site-footer__brand">
        <div class="site-footer__logo-frame">
          <img alt={t.logoAlt} class="site-footer__logo" src={logoFull} />
        </div>
        <p class="site-footer__description">
          {t.description}
        </p>
      </div>
    </div>
    <div class="site-footer__divider"></div>
    <div class="site-footer__bottom">
      <p class="site-footer__legal">{t.copyright}</p>
      <div class="site-footer__spacer"></div>
      <p class="site-footer__legal">{t.legal}</p>
    </div>
  </div>
 </footer>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,181 @@
 ---
 import { assetPath } from '../assets'
 import { getLocalePath, languageLabels, languageNames, languages, type Lang, type Translations } from '../i18n/translations'
 export interface Props {
  lang: Lang
  t: Translations['header']
 }
 const { lang, t } = Astro.props
 const logoIcon = assetPath("/assets/header-logo-icon.png");
 const logoWordmark = assetPath("/assets/header-logo-wordmark.svg");
 const globeIcon = assetPath("/assets/header-globe.svg");
 const navItems = [
  { href: '#hero', label: t.nav.home },
  { href: '#features', label: t.nav.features },
  { href: '#experience', label: t.nav.experience },
  { href: '#use-cases', label: t.nav.useCases },
  { href: '#reliability', label: t.nav.reliability },
 ]
 const languageOptions = languages.map(item => ({
  lang: item,
  href: getLocalePath(item),
  label: `${languageLabels[item]} - ${languageNames[item]}`,
 }))
 ---
 <header id="site-header" class="site-header">
  <div class="site-header__bar">
    <div class="site-header__brand">
      <a href={getLocalePath(lang)} class="site-logo">
        <div class="site-logo__icon-frame">
          <img alt={t.logoIconAlt} class="site-logo__icon" src={logoIcon} />
        </div>
        <div class="site-logo__wordmark-frame">
          <img alt={t.logoAlt} class="site-logo__wordmark" src={logoWordmark} />
        </div>
      </a>
    </div>
    <nav class="site-nav" aria-label={t.navLabel}>
      {navItems.map((item, index) => (
        <a href={item.href} class={`site-nav__link ${index === 0 ? 'is-active' : ''}`} data-nav-link>{item.label}</a>
      ))}
    </nav>
    <div class="site-header__actions">
      <div class="language-switcher">
        <button
          id="language-toggle"
          class="language-switcher__button"
          type="button"
          aria-label={t.languageAlt}
          aria-expanded="false"
          aria-controls="language-menu"
        >
          <img alt="" class="language-switcher__icon" src={globeIcon} />
          <span class="language-switcher__current">{languageLabels[lang]}</span>
        </button>
        <div id="language-menu" class="language-switcher__menu is-hidden" aria-hidden="true">
          {languageOptions.map(option => (
            <a
              href={option.href}
              class={`language-switcher__option ${option.lang === lang ? 'is-active' : ''}`}
              aria-current={option.lang === lang ? 'page' : undefined}
            >
              {option.label}
            </a>
          ))}
        </div>
      </div>
      <a href="#download" class="site-header__download">
        <span class="site-header__download-label">{t.download}</span>
      </a>
      <button
        id="menu-toggle"
        class="menu-toggle"
        type="button"
        aria-label={t.openMenu}
        aria-expanded="false"
        aria-controls="mobile-nav"
        data-open-label={t.openMenu}
        data-close-label={t.closeMenu}
      >
        <span id="bar-1" class="menu-toggle__bar"></span>
        <span id="bar-2" class="menu-toggle__bar"></span>
        <span id="bar-3" class="menu-toggle__bar"></span>
      </button>
    </div>
  </div>
  <div id="mobile-nav" class="mobile-nav is-hidden" aria-hidden="true">
    <ul class="mobile-nav__list">
      {navItems.map((item, index) => (
        <li><a href={item.href} class={`mobile-nav__link ${index === navItems.length - 1 ? 'mobile-nav__link--last' : ''}`} data-nav-link>{item.label}</a></li>
      ))}
      <li class="mobile-nav__languages">
        {languages.map(item => (
          <a href={getLocalePath(item)} class={`mobile-nav__language-link ${item === lang ? 'is-active' : ''}`} aria-current={item === lang ? 'page' : undefined}>
            {languageNames[item]}
          </a>
        ))}
      </li>
      <li class="mobile-nav__download-item">
        <a href="#download" class="mobile-nav__download">
          {t.download}
        </a>
      </li>
    </ul>
  </div>
 </header>
 <script>
  const toggle = document.getElementById('menu-toggle') as HTMLButtonElement;
  const nav = document.getElementById('mobile-nav') as HTMLDivElement;
  const bar1 = document.getElementById('bar-1') as HTMLSpanElement;
  const bar2 = document.getElementById('bar-2') as HTMLSpanElement;
  const bar3 = document.getElementById('bar-3') as HTMLSpanElement;
  const languageToggle = document.getElementById('language-toggle') as HTMLButtonElement | null;
  const languageMenu = document.getElementById('language-menu') as HTMLDivElement | null;
  function closeLanguageMenu() {
    if (!languageToggle || !languageMenu) return;
    languageToggle.setAttribute('aria-expanded', 'false');
    languageMenu.classList.add('is-hidden');
    languageMenu.setAttribute('aria-hidden', 'true');
  }
  function openLanguageMenu() {
    if (!languageToggle || !languageMenu) return;
    languageToggle.setAttribute('aria-expanded', 'true');
    languageMenu.classList.remove('is-hidden');
    languageMenu.removeAttribute('aria-hidden');
  }
  function openMenu() {
    toggle.setAttribute('aria-expanded', 'true');
    toggle.setAttribute('aria-label', toggle.dataset.closeLabel || 'Close menu');
    nav.classList.remove('is-hidden');
    nav.removeAttribute('aria-hidden');
    bar1.style.transform = 'translateY(7px) rotate(45deg)';
    bar2.style.opacity = '0';
    bar3.style.transform = 'translateY(-7px) rotate(-45deg)';
  }
  function closeMenu() {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.setAttribute('aria-label', toggle.dataset.openLabel || 'Open menu');
    nav.classList.add('is-hidden');
    nav.setAttribute('aria-hidden', 'true');
    bar1.style.transform = '';
    bar2.style.opacity = '';
    bar3.style.transform = '';
  }
  toggle.addEventListener('click', () => {
    toggle.getAttribute('aria-expanded') === 'true' ? closeMenu() : openMenu();
  });
  languageToggle?.addEventListener('click', event => {
    event.stopPropagation();
    languageToggle.getAttribute('aria-expanded') === 'true' ? closeLanguageMenu() : openLanguageMenu();
  });
  languageMenu?.addEventListener('click', event => event.stopPropagation());
  document.addEventListener('click', closeLanguageMenu);
  document.addEventListener('keydown', event => {
    if (event.key === 'Escape') closeLanguageMenu();
  });
  nav.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMenu));
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) closeMenu();
    if (window.innerWidth < 1024) closeLanguageMenu();
  });
 </script>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,83 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['hero']
  download: Translations['download']
 }
 const { t, download } = Astro.props
 const heroBg = assetPath("/assets/hero-bg.png");
 const phoneMockup = assetPath("/assets/hero-phone.png");
 const androidIcon = assetPath("/assets/cta-android-icon.svg");
 const appleIcon = assetPath("/assets/cta-apple-icon.svg");
 const defaultApkHref = "https://talkspro.xyz/download";
 ---
 <section id="hero" class="hero">
  <img alt="" class="hero__bg" src={heroBg} />
  <div class="hero__inner">
    <div class="hero__phone-column">
      <div class="hero__phone-frame">
        <div class="hero__phone-crop">
          <img alt={t.phoneAlt} class="hero__phone" src={phoneMockup} />
        </div>
      </div>
    </div>
    <div class="hero__content">
      <div class="hero__badge">
        <p class="hero__badge-text">{t.badge}</p>
      </div>
      <div class="hero__copy">
        <div class="hero__title">
          <p class="hero__title-line">{t.titleLine1}</p>
          <p class="hero__title-line">{t.titleLine2}</p>
        </div>
        <p class="hero__description">
          {t.description}
        </p>
        <div class="hero__actions">
          <a
            href={defaultApkHref}
            class="store-badge store-badge--android store-badge--browser hero__store-badge"
            rel="noopener noreferrer"
            target="_blank"
          >
            <div class="store-badge__icon-frame">
              <img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.android}</p>
              <p class="store-badge__label">{download.androidCta}</p>
            </div>
          </a>
          <a
            href="#"
            class="store-badge store-badge--ios store-badge--apple hero__store-badge"
            data-app-soon="1"
          >
            <div class="store-badge__icon-frame">
              <img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.ios}</p>
              <p class="store-badge__label">{download.iosCta}</p>
            </div>
          </a>
        </div>
      </div>
      <div class="hero__tags">
        {t.tags.map(tag => (
          <div class="hero__tag">
            <span class="hero__tag-text">{tag}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
 </section>
--- a/src/components/Trust.astro
+++ b/src/components/Trust.astro
@@ -0,0 +1,62 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['trust']
 }
 const { t } = Astro.props
 const trustIconSprite = assetPath("/assets/trust-icon-sprite.png")
 const trustIconImprovement = assetPath("/assets/trust-icon-improvement.png")
 const trustDivider = assetPath("/assets/trust-divider.svg")
 const iconClasses = [
  'trust-card__icon--one',
  'trust-card__icon--two',
  'trust-card__icon--three',
  'trust-card__icon--four',
 ]
 ---
 <section id="reliability" class="trust">
  <div class="trust__inner">
    <div class="trust__header">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>
      <p class="trust__title">{t.title}</p>
      <p class="trust__description">
        {t.description}
      </p>
    </div>
    <div class="trust__grid">
      {t.cards.map((card, index) => (
        <>
          <div class="trust-card">
            <div class="trust-card__icon-frame">
              <div class="trust-card__icon-crop">
                <img
                  alt=""
                  class={`trust-card__icon ${iconClasses[index]}`}
                  src={index === 3 ? trustIconImprovement : trustIconSprite}
                />
              </div>
            </div>
            <div class="trust-card__copy">
              <p class="trust-card__title">{card.title}</p>
              <p class="trust-card__description">{card.desc}</p>
            </div>
          </div>
          {index < t.cards.length - 1 && (
            <div class="trust__divider">
              <div class="trust__divider-frame">
                <img alt="" class="trust__divider-image" src={trustDivider} />
              </div>
            </div>
          )}
        </>
      ))}
    </div>
  </div>
 </section>
--- a/src/components/UseCases.astro
+++ b/src/components/UseCases.astro
@@ -0,0 +1,38 @@
 ---
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['useCases']
 }
 const { t } = Astro.props
 ---
 <section id="use-cases" class="use-cases">
  <div class="use-cases__inner">
    <div class="use-cases__copy">
      <div class="section-eyebrow">
        <span class="section-eyebrow__text">{t.eyebrow}</span>
      </div>
      <p class="use-cases__title">
        {t.title}
      </p>
      <p class="use-cases__description">
        {t.description}
      </p>
    </div>
    <div class="use-cases__rows">
      {t.rows.map(row => (
        <div class="use-case-row">
          <div class="use-case-row__title-cell">
            <p class="use-case-row__title">{row.title}</p>
          </div>
          <div class="use-case-row__description-cell">
            <p class="use-case-row__description">{row.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
 </section>
--- a/src/components/WhyTalkPro.astro
+++ b/src/components/WhyTalkPro.astro
@@ -0,0 +1,73 @@
 ---
 import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 export interface Props {
  t: Translations['why']
 }
 const { t } = Astro.props
 const underline = assetPath("/assets/why-underline.svg");
 const icons = [
  assetPath("/assets/why-icon-simple.svg"),
  assetPath("/assets/why-icon-familiar.svg"),
  assetPath("/assets/why-icon-connected.svg"),
  assetPath("/assets/why-icon-modern.svg"),
 ]
 const illustrationVideo = assetPath("/assets/why-illustration.mp4")
 const iconClasses = ['why-card__icon--simple', 'why-card__icon--familiar', 'why-card__icon--connected', 'why-card__icon--modern']
 ---
 <section class="why">
  <div class="why__inner">
    <div class="why__intro">
      <div class="why__copy">
        <div class="section-eyebrow">
          <span class="section-eyebrow__text">{t.eyebrow}</span>
        </div>
        <div class="why__text">
          <div class="why__title">
            <p class="why__title-line">{t.titleLine1}</p>
            <p class="why__title-line">{t.titleLine2}</p>
          </div>
          <div class="why__underline">
            <div class="why__underline-frame">
              <img alt="" class="why__underline-image" src={underline} />
            </div>
          </div>
          <p class="why__description">
            {t.description}
          </p>
        </div>
      </div>
      <div class="why__illustration">
        <video
          aria-label={t.illustrationAlt}
          class="why__illustration-image"
          autoplay
          loop
          muted
          playsinline
          preload="metadata"
        >
          <source src={illustrationVideo} type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="why__grid">
      {t.cards.map((card, index) => (
        <div class="why-card">
          <div class="why-card__icon-frame">
            <img alt="" class={`why-card__icon ${iconClasses[index]}`} src={icons[index]} />
          </div>
          <div class="why-card__copy">
            <p class="why-card__title">{card.title}</p>
            <p class="why-card__description">{card.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
 </section>
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -0,0 +1,108 @@
 ---
 import '../styles/global.css'
 export interface Props {
  title?: string
  description?: string
  lang?: string
 }
 const {
  title = 'Talk Pro - One User. Multiple Worlds.',
  description = 'Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls.',
  lang = 'en',
 } = Astro.props
 ---
 <!doctype html>
 <html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  </head>
  <body class="bg-surface font-sans overflow-x-hidden">
    <slot />
    <script src="/site-links-client.js?v=2" defer></script>
    <script>
      (() => {
        const header = document.getElementById('site-header');
        const getOffset = () => header ? header.offsetHeight : 0;
        let activeScrollAnimation = 0;
        const easeInOutCubic = (t: number) => (
          t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
        );
        const animateScrollTo = (targetTop: number) => {
          const startTop = window.scrollY;
          const distance = targetTop - startTop;
          if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            window.scrollTo(0, targetTop);
            return;
          }
          if (activeScrollAnimation) {
            cancelAnimationFrame(activeScrollAnimation);
          }
          const duration = Math.min(1300, Math.max(650, Math.abs(distance) * 0.7));
          const startTime = performance.now();
          const step = (now: number) => {
            const elapsed = now - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const easedProgress = easeInOutCubic(progress);
            window.scrollTo(0, startTop + distance * easedProgress);
            if (progress < 1) {
              activeScrollAnimation = requestAnimationFrame(step);
            } else {
              activeScrollAnimation = 0;
            }
          };
          activeScrollAnimation = requestAnimationFrame(step);
        };
        document.querySelectorAll('a[href^="#"]').forEach(link => {
          link.addEventListener('click', e => {
            const href = link.getAttribute('href');
            if (!href || href === '#') return;
            const target = document.querySelector(href);
            if (!target) return;
            e.preventDefault();
            const top = target.getBoundingClientRect().top + window.scrollY - getOffset();
            animateScrollTo(top);
            history.pushState(null, '', href);
          });
        });
        const navLinks = document.querySelectorAll('[data-nav-link]');
        const sections = Array.from(navLinks)
          .map(l => document.querySelector(l.getAttribute('href') ?? ''))
          .filter(Boolean) as Element[];
        if ('IntersectionObserver' in window && sections.length) {
          const observer = new IntersectionObserver(entries => {
            const visible = entries
              .filter(e => e.isIntersecting)
              .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
            if (!visible) return;
            navLinks.forEach(link => {
              const active = link.getAttribute('href') === `#${visible.target.id}`;
              link.classList.toggle('is-active', active);
            });
          }, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });
          sections.forEach(s => observer.observe(s));
        }
      })();
    </script>
  </body>
 </html>
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -0,0 +1,36 @@
 ---
 import Base from '../../layouts/Base.astro'
 import Header from '../../components/Header.astro'
 import Hero from '../../components/Hero.astro'
 import WhyTalkPro from '../../components/WhyTalkPro.astro'
 import CoreSystem from '../../components/CoreSystem.astro'
 import Experience from '../../components/Experience.astro'
 import UseCases from '../../components/UseCases.astro'
 import Trust from '../../components/Trust.astro'
 import DownloadCTA from '../../components/DownloadCTA.astro'
 import Footer from '../../components/Footer.astro'
 import { defaultLang, getTranslations, isLang, languages } from '../../i18n/translations'
 export function getStaticPaths() {
  return languages
    .filter(lang => lang !== defaultLang)
    .map(lang => ({ params: { lang } }))
 }
 const currentLang = Astro.params.lang
 const lang = isLang(currentLang) ? currentLang : defaultLang
 const t = getTranslations(lang)
 ---
 <Base lang={lang} title={t.meta.title} description={t.meta.description}>
  <Header lang={lang} t={t.header} />
  <Hero t={t.hero} download={t.download} />
  <WhyTalkPro t={t.why} />
  <CoreSystem t={t.core} />
  <Experience t={t.experience} />
  <UseCases t={t.useCases} />
  <Trust t={t.trust} />
  <!-- AppPreview section disabled per lead request. -->
  <DownloadCTA t={t.download} siteLinks={t.siteLinks} />
  <Footer t={t.footer} />
 </Base>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,29 @@
 ---
-import '../styles/global.css';
+import Base from '../layouts/Base.astro'
 import Header from '../components/Header.astro'
 import Hero from '../components/Hero.astro'
 import WhyTalkPro from '../components/WhyTalkPro.astro'
 import CoreSystem from '../components/CoreSystem.astro'
 import Experience from '../components/Experience.astro'
 import UseCases from '../components/UseCases.astro'
 import Trust from '../components/Trust.astro'
 import DownloadCTA from '../components/DownloadCTA.astro'
 import Footer from '../components/Footer.astro'
 import { defaultLang, getTranslations } from '../i18n/translations'
 const lang = defaultLang
 const t = getTranslations(lang)
 ---
-<!doctype html>
+<Base lang={lang} title={t.meta.title} description={t.meta.description}>
-<html lang="en">
+  <Header lang={lang} t={t.header} />
-  <head>
+  <Hero t={t.hero} download={t.download} />
-    <meta charset="UTF-8" />
+  <WhyTalkPro t={t.why} />
-    <meta name="viewport" content="width=device-width" />
+  <CoreSystem t={t.core} />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <Experience t={t.experience} />
-    <meta name="generator" content={Astro.generator} />
+  <UseCases t={t.useCases} />
-    <title>Talk Pro</title>
+  <Trust t={t.trust} />
-  </head>
+  <!-- AppPreview section disabled per lead request. -->
-  <body class="bg-white text-gray-900">
+  <DownloadCTA t={t.download} siteLinks={t.siteLinks} />
-    <h1 class="text-4xl font-bold p-8">Talk Pro</h1>
+  <Footer t={t.footer} />
-  </body>
+</Base>
 </html>
--- a/src/styles/download.css
+++ b/src/styles/download.css
@@ -0,0 +1,344 @@
 .download-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #eec8b8;
 }
 .download-cta__pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    max-width: none;
    height: 923px;
    pointer-events: none;
    transform: translate(-50%, -50%);
 }
 .download-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    gap: 0px;
    margin: 0 auto;
    padding: 60px 16px;
 }
 .download-cta__content {
    display: flex;
    order: 2;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 36px;
    overflow: clip;
    text-align: center;
 }
 .download-cta__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
 }
 .download-cta__heading {
    --download-heading-title-size: 32px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
    max-width: 100%;
 }
 .download-cta__title {
    position: relative;
    top: -4px;
    margin: 0;
    flex-shrink: 0;
    font-size: var(--download-heading-title-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-32);
    color: #1a1a1a;
    white-space: nowrap;
 }
 .download-cta__logo-frame {
    position: relative;
    flex-shrink: 0;
    width: calc(var(--download-heading-title-size) * 3.9167);
    height: calc(var(--download-heading-title-size) * 1.5);
 }
 .download-cta__logo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
 }
 .download-cta__description {
    max-width: 542px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-16);
    color: #7a726d;
    text-align: center;
 }
 .store-badges {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    gap: 16px;
    overflow: clip;
 }
 .store-badge {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 260px;
    max-width: 100%;
    height: 70px;
    gap: 8px;
    padding: 12px 16px;
    overflow: clip;
    border-radius: 20px;
 }
 a.store-badge {
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
 }
 .download-cta__links-meta {
    font-size: 13px;
    color: #7a726d;
    margin: 14px auto 0;
    max-width: min(1180px, calc(100% - 40px));
    text-align: center;
 }
 .store-badge--android {
    background: #f28a4b;
    border: 1px solid #c5834e;
 }
 .store-badge--ios {
    background: #121212F0;
    border: 1px solid #2C2C2C;
 }
 .store-badge__icon {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
 }
 .store-badge__icon-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #323232;
    border-radius: 12px;
 }
 .store-badge__apple-icon {
    display: block;
    width: 22px;
    height: 27px;
 }
 .store-badge--android .store-badge__icon-frame {
    background: #d55f31;
 }
 .store-badge__android-icon {
    display: block;
    width: 28px;
    height: 28px;
 }
 .store-badge__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 3px;
    overflow: clip;
    white-space: nowrap;
 }
 .store-badge__platform {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--ls-13);
 }
 .store-badge--android .store-badge__platform {
    color: #ffd6bc;
 }
 .store-badge--ios .store-badge__platform {
    color: #949494;
 }
 .store-badge__label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--ls-15);
    color: #fff;
 }
 .download-cta__phone {
    position: relative;
    display: block;
    order: 1;
    flex-shrink: 0;
    width: 240px;
    height: 292px;
 }
@media (min-width: 578px) {
    .download-cta__phone {
        width: min(418px, calc(100vw - 32px));
        height: auto;
        aspect-ratio: 418 / 510;
    }
 }
 .download-cta__phone-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
 }
 .download-cta__phone-image {
    position: absolute;
    top: -18.05%;
    left: 3.8%;
    width: 92.43%;
    max-width: none;
    height: 136.1%;
 }
@media (max-width: 397px) {
    .download-cta__heading {
        --download-heading-title-size: clamp(24px, 8vw, 32px);
        gap: clamp(8px, 2.5vw, 12px);
    }
    .download-cta__title {
        line-height: 1;
    }
 }
@media (max-width: 569px) {
    .store-badge {
        width: min(100%, calc(100vw - 32px));
    }
 }
@media (min-width: 570px) {
    .download-cta__heading {
        --download-heading-title-size: 40px;
    }
    .download-cta__title {
        letter-spacing: var(--ls-40);
    }
    .download-cta__description {
        font-size: 18px;
        letter-spacing: var(--ls-18);
    }
    .store-badges {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
 }
@media (min-width: 1024px) {
    .download-cta {
        height: 600px;
    }
    .download-cta__inner {
        flex-direction: row;
        gap: 16px;
        padding: 0 24px;
    }
    .download-cta__content {
        order: 1;
        align-items: flex-start;
        text-align: left;
    }
    .download-cta__copy {
        align-items: flex-start;
    }
    .download-cta__description {
        text-align: left;
    }
    .store-badges {
        justify-content: flex-start;
    }
    .download-cta__heading {
        --download-heading-title-size: 48px;
    }
    .download-cta__title {
        letter-spacing: var(--ls-48);
    }
    .download-cta__phone {
        order: 2;
        width: 418px;
    }
 }
@media (min-width: 1280px) {
    .download-cta__inner {
        padding: 0;
    }
 }
--- a/src/styles/features.css
+++ b/src/styles/features.css
@@ -0,0 +1,209 @@
 .features {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 60px;
  padding: 60px 0;
  overflow: hidden;
 }
 .features__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2363px;
  height: 1319px;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
  transform: translate(-50%, -50%);
 }
 .features__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1280px;
  gap: 24px;
  margin: 0 auto;
  padding: 0 16px;
  overflow: clip;
 }
 .features__title {
  width: 100%;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-28);
  color: #1a1a1a;
  text-align: center;
 }
 .features__description {
  width: 100%;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-15);
  color: #7a726d;
  text-align: center;
 }
 .features__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1280px;
  gap: 22px;
  margin: 0 auto;
  padding: 0 16px;
 }
 .feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 36px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 30px;
 }
 .feature-card__icon-frame {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  overflow: hidden;
 }
 .feature-card__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
 }
 .feature-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  text-align: center;
 }
 .feature-card__title {
  width: 100%;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: var(--ls-20);
  color: #2e2a28;
 }
 .feature-card__description {
  width: 100%;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-15);
  color: #7a726d;
 }
@media (min-width: 440px) {
  .features__header,
  .features__grid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .features__title {
    font-size: 32px;
    letter-spacing: var(--ls-32);
  }
 }
@media (min-width: 576px) {
  .features__header,
  .features__grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  .features__title {
    font-size: 36px;
    letter-spacing: var(--ls-36);
  }
 }
@media (min-width: 768px) {
  .features__header,
  .features__grid {
    padding-left: 36px;
    padding-right: 36px;
  }
  .features__title {
    font-size: 42px;
    letter-spacing: var(--ls-42);
  }
  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-card__title {
    font-size: 24px;
    letter-spacing: var(--ls-24);
  }
 }
@media (min-width: 1024px) {
  .features__header {
    padding: 0 clamp(36px, 14vw, 180px);
  }
  .features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 36px;
  }
 }
@media (min-width: 1200px) {
  .features__title {
    font-size: 48px;
    letter-spacing: var(--ls-48);
  }
  .features__description {
    font-size: 18px;
    letter-spacing: var(--ls-18);
  }
 }
@media (min-width: 1280px) {
  .features__grid {
    padding: 0;
  }
 }
@media (min-width: 1376px) {
  .features {
    padding-top: 120px;
    padding-bottom: 120px;
  }
 }
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -0,0 +1,131 @@
 .site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60px 0;
  background: #fef0eb;
 }
 .site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1280px;
  gap: 36px;
  margin: 0 auto;
  padding: 0 16px;
 }
 .site-footer__top {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 40px;
 }
 .site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  gap: 24px;
  overflow: clip;
 }
 .site-footer__logo-frame {
  position: relative;
  width: 220px;
  height: 64px;
 }
 .site-footer__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
 }
 .site-footer__description {
  max-width: 320px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-14);
  color: #7a726d;
 }
 .site-footer__divider {
  width: 100%;
  height: 1px;
  background: #e3d9d1;
 }
 .site-footer__bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
  overflow: clip;
 }
 .site-footer__legal {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: var(--ls-14);
  color: #7a726d;
 }
 .site-footer__spacer {
  display: none;
 }
@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .site-footer__spacer {
    display: block;
    flex: 1;
    min-width: 0;
  }
 }
@media (min-width: 1024px) {
  .site-footer {
    padding: 60px 0;
  }
  .site-footer__inner {
    padding: 0 24px;
  }
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }
 }
@media (min-width: 1280px) {
  .site-footer__inner {
    padding: 0;
  }
  .site-footer__legal {
    white-space: nowrap;
  }
 }
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3 +1,79 @@
-@tailwind base;
+/* UnoCSS handles reset and utilities via astro.config.mjs injectReset */
-@tailwind components;
+@import './header.css';
-@tailwind utilities;
+@import './hero.css';
@import './sections.css';
@import './download.css';
@import './footer.css';
@import './why.css';
@import './features.css';
@import './trust.css';
@import './preview.css';
 body {
  font-family: "Inter", sans-serif;
  --ls-12: 0.01px;
  --ls-13: -0.04px;
  --ls-14: -0.09px;
  --ls-15: -0.13px;
  --ls-16: -0.18px;
  --ls-17: -0.22px;
  --ls-18: -0.26px;
  --ls-19: -0.30px;
  --ls-20: -0.33px;
  --ls-21: -0.37px;
  --ls-22: -0.40px;
  --ls-23: -0.44px;
  --ls-24: -0.47px;
  --ls-25: -0.50px;
  --ls-26: -0.53px;
  --ls-27: -0.56px;
  --ls-28: -0.59px;
  --ls-29: -0.61px;
  --ls-30: -0.64px;
  --ls-31: -0.67px;
  --ls-32: -0.69px;
  --ls-33: -0.72px;
  --ls-34: -0.74px;
  --ls-35: -0.77px;
  --ls-36: -0.79px;
  --ls-37: -0.81px;
  --ls-38: -0.84px;
  --ls-39: -0.86px;
  --ls-40: -0.89px;
  --ls-41: -0.91px;
  --ls-42: -0.93px;
  --ls-43: -0.95px;
  --ls-44: -0.98px;
  --ls-45: -1.00px;
  --ls-46: -1.02px;
  --ls-47: -1.05px;
  --ls-48: -1.07px;
  --ls-49: -1.09px;
  --ls-50: -1.11px;
  --ls-51: -1.14px;
  --ls-52: -1.16px;
  --ls-53: -1.18px;
  --ls-54: -1.20px;
  --ls-55: -1.23px;
  --ls-56: -1.25px;
  --ls-57: -1.27px;
  --ls-58: -1.29px;
  --ls-59: -1.32px;
  --ls-60: -1.34px;
  --ls-61: -1.36px;
  --ls-62: -1.38px;
  --ls-63: -1.40px;
  --ls-64: -1.43px;
  --ls-65: -1.45px;
  --ls-66: -1.47px;
  --ls-67: -1.49px;
  --ls-68: -1.52px;
  --ls-69: -1.54px;
  --ls-70: -1.56px;
  --ls-71: -1.58px;
  --ls-72: -1.61px;
 }
 :target {
  scroll-margin-top: 72px;
 }
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -0,0 +1,354 @@
 .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e3d9d1;
 }
 .site-header__bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    height: 72px;
    gap: 24px;
    margin: 0 auto;
    padding: 0 16px;
 }
 .site-header__brand,
 .site-header__actions {
    display: flex;
    flex: 1;
    min-width: 0;
 }
 .site-header__brand {
    align-items: center;
 }
 .site-header__actions {
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
 }
 .site-logo {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 143px;
    height: 42px;
 }
 .site-logo__icon-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 53px;
    height: 42px;
    overflow: hidden;
 }
 .site-logo__icon {
    position: absolute;
    top: -13.49%;
    left: 0;
    width: 100%;
    max-width: none;
    height: 126.98%;
 }
 .site-logo__wordmark-frame {
    position: absolute;
    inset: 26.97% 0 7.92% 45.45%;
 }
 .site-logo__wordmark {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
 }
 .site-nav {
    display: none;
    align-items: center;
    flex-shrink: 0;
    gap: 32px;
 }
 .site-nav__link {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #7a726d;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease;
 }
 .site-nav__link:hover,
 .site-nav__link.is-active {
    color: #f28a4b;
 }
 .language-switcher {
    position: relative;
    display: none;
    flex-shrink: 0;
 }
 .language-switcher__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    gap: 8px;
    padding: 0 16px 0 12px;
    background: #fff;
    border: 1px solid rgba(46, 42, 40, 0.3);
    border-radius: 17px;
    cursor: pointer;
    transition: border-color 160ms ease;
 }
 .language-switcher__button:hover,
 .language-switcher__button[aria-expanded="true"] {
    border-color: #f28a4b;
 }
 .language-switcher__icon {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
 }
 .language-switcher__current {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: var(--ls-14);
    color: #2e2a28;
    white-space: nowrap;
 }
 .language-switcher__menu {
    position: absolute;
    top: 52px;
    right: 0;
    z-index: 60;
    width: 240px;
    max-height: min(520px, calc(100vh - 96px));
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3d9d1;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(46, 42, 40, 0.16);
 }
 .language-switcher__menu.is-hidden {
    display: none;
 }
 .language-switcher__option {
    display: block;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #7a726d;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
 }
 .language-switcher__option:hover {
    color: #f28a4b;
    background: #fef0eb;
 }
 .language-switcher__option.is-active {
    color: #2e2a28;
    background: #f8f3ee;
 }
 .site-header__download {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 13px 22px;
    background: #f28a4b;
    border-radius: 17px;
    text-decoration: none;
    transition: background-color 160ms ease;
 }
 .site-header__download:hover {
    background: #e07a3b;
 }
 .site-header__download-label {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #fff;
    white-space: nowrap;
 }
 .menu-toggle {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    padding: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
 }
 .menu-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #2e2a28;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 240ms ease,
        opacity 240ms ease;
 }
 .mobile-nav {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid #e3d9d1;
 }
 .mobile-nav.is-hidden {
    display: none;
 }
 .mobile-nav__list {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    margin: 0;
    list-style: none;
 }
 .mobile-nav__link {
    display: block;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: var(--ls-16);
    color: #2e2a28;
    text-decoration: none;
    border-bottom: 1px solid #e3d9d1;
    transition: color 160ms ease;
 }
 .mobile-nav__link.is-active {
    color: #f28a4b;
 }
 .mobile-nav__link--last {
    border-bottom: 0;
 }
 .mobile-nav__languages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px 16px;
    padding: 16px 0;
    border-top: 1px solid #e3d9d1;
 }
 .mobile-nav__language-link {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: var(--ls-14);
    color: #2e2a28;
    text-align: center;
    text-decoration: none;
 }
 .mobile-nav__language-link.is-active {
    color: #f28a4b;
 }
@media (max-width: 500px) {
    .mobile-nav__languages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
 }
@media (min-width: 501px) and (max-width: 1024px) {
    .mobile-nav__languages {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
 }
 .mobile-nav__download-item {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
 }
 .mobile-nav__download {
    display: block;
    width: 250px;
    max-width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: var(--ls-15);
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: #f28a4b;
    border-radius: 17px;
    transition: background-color 160ms ease;
 }
 .mobile-nav__download:hover {
    background: #e07a3b;
 }
@media (min-width: 1024px) {
    .site-header__bar {
        padding: 0 24px;
    }
    .site-nav,
    .language-switcher,
    .site-header__download {
        display: flex;
    }
    .menu-toggle {
        display: none;
    }
    .mobile-nav {
        display: none !important;
    }
 }
--- a/src/styles/hero.css
+++ b/src/styles/hero.css
@@ -0,0 +1,382 @@
 .hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
 }
 .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
 }
 .hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    gap: 40px;
    margin: 0 auto;
    padding: 0 16px;
 }
 .hero__phone-column {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 24px;
    pointer-events: none;
 }
 .hero__phone-frame {
    position: relative;
    z-index: 2;
    width: min(320px, 100%);
    height: 527px;
 }
 .hero__phone-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
 }
 .hero__phone {
    position: absolute;
    top: -7.18%;
    left: -2.67%;
    width: 105.35%;
    max-width: none;
    height: 114.36%;
 }
 .hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    gap: 60px;
    padding: 32px 0;
    overflow: clip;
 }
 .hero__badge {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 16px;
    overflow: clip;
    background: #fff;
    border: 1px solid #f08458;
    border-radius: 999px;
 }
 .hero__badge-text {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #0d0d0d;
 }
 .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    width: 100%;
    gap: 24px;
 }
 .hero__title {
    width: 100%;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-36);
    color: #2e2a28;
 }
 .hero__title-line {
    margin: 0;
    line-height: 1.1;
 }
 .hero__description {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
 }
 .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 100%;
    gap: 14px;
    overflow: clip;
 }
 .hero__store-badge {
    text-decoration: none;
    transition:
        transform 160ms ease,
        filter 160ms ease;
 }
 .hero__store-badge:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
 }
 .hero__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
    overflow: clip;
 }
 .hero__tag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 9px 14px;
    overflow: clip;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid #fff;
    border-radius: 999px;
 }
 .hero__tag-text {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #7a726d;
    white-space: nowrap;
 }
@media (max-width: 433px) {
    .hero__store-badge {
        min-width: 0;
    }
 }
@media (max-width: 1024px) {
    .hero__actions {
        flex-wrap: nowrap;
    }
    .hero__store-badge {
        flex: 1 1 calc((100% - 14px) / 2);
        width: calc((100% - 14px) / 2);
        min-width: 0;
        padding-right: 10px;
        padding-left: 10px;
    }
    .hero__store-badge .store-badge__copy,
    .hero__store-badge .store-badge__label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
 }
@media (max-width: 540px) {
    .hero__actions {
        flex-direction: column;
    }
    .hero__store-badge {
        flex-basis: auto;
        width: min(100%, calc(100vw - 32px));
    }
    .hero__tags {
        justify-content: center;
        width: 100%;
    }
 }
@media (min-width: 440px) {
    .hero__title {
        font-size: 42px;
        letter-spacing: var(--ls-42);
    }
 }
@media (min-width: 576px) {
    .hero__title {
        font-size: 48px;
        letter-spacing: var(--ls-48);
    }
 }
@media (min-width: 768px) {
    .hero__title {
        font-size: 56px;
        letter-spacing: var(--ls-56);
    }
    .hero__phone-column {
        padding-top: 60px;
    }
    .hero__phone-frame {
        width: min(580px, 100%);
        height: auto;
        aspect-ratio: 116 / 191;
    }
    .hero__phone-crop {
        position: relative;
        inset: auto;
        overflow: visible;
    }
    .hero__phone {
        position: static;
        width: 100%;
        height: auto;
    }
 }
@media (min-width: 1024px) {
    .hero {
        height: 891px;
    }
    .hero__inner {
        flex-direction: row;
        padding: 0 24px;
    }
    .hero__phone-column {
        position: relative;
        flex: 1;
        min-width: 0;
        height: 100%;
        overflow: hidden;
    }
    .hero__phone-frame {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .hero__phone-crop {
        position: relative;
        inset: auto;
        height: 100%;
        overflow: visible;
    }
    .hero__phone {
        position: static;
        width: auto;
        height: 100%;
    }
    .hero__actions {
        flex-wrap: nowrap;
    }
    .hero__store-badge {
        flex: 0 1 auto;
        min-width: 0;
    }
    .hero__content {
        width: clamp(560px, 44vw, 600px);
        padding: 0;
    }
 }
@media (min-width: 1200px) {
    .hero__title {
        font-size: 64px;
        letter-spacing: var(--ls-64);
    }
    .hero__description {
        font-size: 18px;
        letter-spacing: var(--ls-18);
    }
 }
@media (min-width: 1280px) {
    .hero__inner {
        padding: 0;
    }
    .hero__phone-column {
        align-items: flex-start;
        padding-top: 60px;
    }
    .hero__phone-frame {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        overflow: visible;
        flex: 1 0 0;
        width: auto;
        max-width: calc(955px * 116 / 191);
        height: 955px;
        aspect-ratio: 116 / 191;
    }
    .hero__phone-crop {
        height: auto;
    }
    .hero__phone {
        width: 100%;
        height: 100%;
    }
    .hero__content {
        width: clamp(560px, 52vw, 660px);
    }
 }
@media (min-width: 1376px) {
    .hero__title {
        font-size: 72px;
        letter-spacing: var(--ls-72);
    }
 }
--- a/src/styles/preview.css
+++ b/src/styles/preview.css
@@ -0,0 +1,243 @@
 .app-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 60px;
    padding: 64px 16px 0;
    overflow: hidden;
    background: #fef0eb;
 }
 .app-preview__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 940px;
    gap: 40px;
    margin: 0 auto;
    overflow: clip;
 }
 .app-preview__title {
    width: 100%;
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    text-align: center;
 }
 .app-preview__description {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
    text-align: center;
 }
 .app-preview__carousel {
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    gap: 24px;
    padding: 0 16px;
    overflow: hidden;
 }
 .app-preview__side-phone {
    position: relative;
    display: none;
    flex-shrink: 0;
    width: 336px;
    height: 396px;
    overflow: hidden;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 300ms ease;
 }
 .app-preview__phone-image {
    position: absolute;
    top: -0.03%;
    left: 0;
    width: 100%;
    max-width: none;
    height: 175.34%;
    transition: opacity 300ms ease;
 }
 .app-preview__control-wrap {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    flex-shrink: 0;
 }
 .app-preview__control-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
 }
 .app-preview__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #f08458;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        transform 160ms ease;
 }
 .app-preview__button:hover {
    background: #e07a3b;
 }
 .app-preview__button:active {
    transform: scale(0.95);
 }
 .app-preview__button-icon {
    display: block;
    width: 24px;
    height: 24px;
 }
 .app-preview__button-icon--next {
    transform: rotate(180deg);
 }
 .app-preview__center-phone {
    position: relative;
    flex-shrink: 0;
    width: min(420px, calc(100vw - 168px));
    aspect-ratio: 459 / 542;
    overflow: hidden;
    pointer-events: none;
 }
@media (max-width: 594px) {
    .app-preview__carousel {
        gap: 12px;
    }
    .app-preview__button {
        width: 40px;
        height: 40px;
    }
    .app-preview__button-icon {
        width: 20px;
        height: 20px;
    }
    .app-preview__center-phone {
        width: min(420px, calc(100vw - 120px));
    }
 }
@media (max-width: 554px) {
    .app-preview__carousel {
        gap: 8px;
        padding: 0 12px;
    }
    .app-preview__button {
        width: 36px;
        height: 36px;
    }
    .app-preview__button-icon {
        width: 18px;
        height: 18px;
    }
    .app-preview__center-phone {
        width: min(420px, calc(100vw - 104px));
    }
 }
@media (max-width: 540px) {
    .app-preview__center-phone {
        width: min(390px, calc(100vw - 120px));
    }
 }
@media (min-width: 768px) {
    .app-preview__title {
        font-size: 40px;
    }
    .app-preview__carousel {
        gap: clamp(10px, 1.4vw, 16px);
        padding: 0 clamp(16px, 3vw, 32px);
    }
    .app-preview__side-phone,
    .app-preview__control-wrap {
        display: flex;
    }
    .app-preview__side-phone {
        display: block;
        width: clamp(128px, 17vw, 190px);
        height: auto;
        aspect-ratio: 336 / 396;
    }
    .app-preview__center-phone {
        width: clamp(220px, 31vw, 320px);
    }
 }
@media (min-width: 1024px) {
    .app-preview {
        padding: 120px clamp(32px, 6vw, 130px) 0;
    }
    .app-preview__title {
        font-size: 48px;
    }
    .app-preview__description {
        font-size: 18px;
        letter-spacing: var(--ls-18);
    }
    .app-preview__side-phone,
    .app-preview__control-wrap {
        display: flex;
    }
    .app-preview__carousel {
        gap: clamp(16px, 1.4vw, 20px);
        padding: 0;
    }
    .app-preview__side-phone {
        display: block;
        width: clamp(190px, 20vw, 336px);
    }
    .app-preview__center-phone {
        width: clamp(300px, 27vw, 459px);
        height: auto;
        aspect-ratio: 459 / 542;
    }
 }
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -0,0 +1,488 @@
 .experience {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 60px 16px;
    background: #fff;
 }
 .experience__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1008px;
    gap: 40px;
    margin: 0 auto;
 }
 .experience__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
 }
 .experience__title {
    width: 100%;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-28);
    color: #1a1a1a;
    text-align: center;
 }
 .experience__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
 }
 .experience__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    width: 100%;
    gap: 24px;
 }
 .experience-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 36px;
    padding: 0 0 36px;
    overflow: hidden;
    background: linear-gradient(to bottom, #fef0eb, #fff);
    border-radius: 30px 30px 0 0;
 }
 .experience-card__media {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 320 / 232;
    overflow: hidden;
 }
 .experience-card__media--tinted {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffeddf;
 }
 .experience-card__media-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
 }
 .experience-card__image {
    position: absolute;
    max-width: none;
 }
 .experience-card__image--one {
    top: -86.5%;
    left: 0;
    width: 100%;
    height: 298.5%;
 }
 .experience-card__image--two {
    top: -137.86%;
    left: -3.13%;
    width: 130.62%;
    height: 389.91%;
 }
 .experience-card__image--three {
    top: -115.66%;
    left: 0;
    width: 100%;
    height: 298.5%;
 }
 .experience-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
    max-width: 248px;
    padding: 0;
    overflow: clip;
    text-align: center;
 }
 .experience-card__title {
    width: 100%;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--ls-24);
    color: #0d0d0d;
 }
 .experience-card__description {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--ls-16);
    color: #7a726d;
 }
 .experience__caption {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
    text-align: center;
 }
 .use-cases {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 60px 16px;
    background: #fef0eb;
 }
 .use-cases__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 1280px;
    gap: 32px;
    margin: 0 auto;
 }
 .use-cases__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
    overflow: clip;
 }
@media (max-width: 1294px) {
    .use-cases__inner {
        grid-template-columns: minmax(0, 1128px);
        justify-content: center;
    }
    .use-cases__copy {
        justify-self: start;
        width: min(580px, 100%);
        max-width: 580px;
        margin: 0;
    }
    .use-cases__title,
    .use-cases__description {
        max-width: 100%;
    }
 }
 .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 12px 24px;
    background: #fff;
    border: 1px solid #fbbfa3;
    border-radius: 9999px;
 }
 .section-eyebrow__text {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: var(--ls-14);
    color: #f08458;
    text-align: center;
    white-space: nowrap;
 }
 .use-cases__title {
    width: 100%;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-28);
    color: #1a1a1a;
    text-align: left;
 }
 .use-cases__description {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
    text-align: left;
 }
@media (max-width: 768px) {
    .use-cases__copy {
        align-items: flex-start;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        text-align: left;
    }
    .use-cases__title,
    .use-cases__description {
        text-align: left;
    }
 }
 .use-cases__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 1128px;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;
    gap: 1px;
 }
 .use-case-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    overflow: hidden;
    background: #faede8;
 }
 .use-case-row__title-cell,
 .use-case-row__description-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 16px 24px;
 }
 .use-case-row__title-cell {
    background: #f08458;
 }
 .use-case-row__description-cell {
    background: #fff;
 }
 .use-case-row__title {
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--ls-18);
    color: #fff;
 }
 .use-case-row__description {
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
 }
@media (max-width: 578px) {
    .use-cases__rows {
        gap: 24px;
        overflow: visible;
        border-radius: 0;
    }
    .use-case-row {
        overflow: hidden;
        background: #fff;
        border-radius: 16px;
    }
    .use-case-row__title-cell,
    .use-case-row__description-cell {
        padding: 24px;
    }
    .use-case-row__title {
        font-size: 20px;
        letter-spacing: var(--ls-20);
    }
 }
@media (min-width: 440px) {
    .experience,
    .use-cases {
        padding-left: 20px;
        padding-right: 20px;
    }
    .experience__title,
    .use-cases__title {
        font-size: 32px;
        letter-spacing: var(--ls-32);
    }
 }
@media (min-width: 576px) {
    .experience,
    .use-cases {
        padding-left: 24px;
        padding-right: 24px;
    }
    .experience__title,
    .use-cases__title {
        font-size: 36px;
        letter-spacing: var(--ls-36);
    }
 }
@media (min-width: 578px) {
    .experience__grid {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }
    .experience-card {
        max-width: 320px;
        justify-self: center;
    }
    .experience-card:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
 }
@media (min-width: 578px) {
    .use-case-row {
        grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
        height: 120px;
    }
    .use-case-row__title-cell,
    .use-case-row__description-cell {
        padding: 24px 36px;
    }
    .use-case-row__title {
        font-size: 20px;
        letter-spacing: var(--ls-20);
    }
 }
@media (min-width: 768px) {
    .experience,
    .use-cases {
        padding-left: 36px;
        padding-right: 36px;
    }
    .experience__title,
    .use-cases__title {
        font-size: 42px;
        letter-spacing: var(--ls-42);
    }
 }
@media (min-width: 1200px) {
    .experience__grid {
        grid-template-columns: repeat(3, minmax(0, 320px));
    }
    .experience-card:nth-child(3):last-child {
        grid-column: auto;
    }
 }
@media (min-width: 576px) {
    .experience-card__title {
        white-space: nowrap;
    }
 }
@media (min-width: 1024px) {
    .experience {
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 36px;
        padding-right: 36px;
    }
 }
@media (min-width: 1200px) {
    .experience__title,
    .use-cases__title {
        font-size: 48px;
        letter-spacing: var(--ls-48);
    }
    .experience__caption,
    .use-cases__description {
        font-size: 18px;
        letter-spacing: var(--ls-18);
    }
 }
@media (min-width: 1201px) {
    .use-cases {
        padding: 60px 64px;
    }
    .use-cases__inner {
        grid-template-columns: minmax(420px, 540px) minmax(560px, 1fr);
        align-items: center;
        gap: 40px;
    }
 }
@media (min-width: 1376px) {
    .experience {
        padding-top: 120px;
        padding-bottom: 120px;
        padding-left: 0;
        padding-right: 0;
    }
    .use-cases {
        padding-top: 120px;
        padding-bottom: 120px;
    }
 }
@media (min-width: 1440px) {
    .use-cases {
        padding-right: 130px;
        padding-left: 130px;
    }
 }
--- a/src/styles/trust.css
+++ b/src/styles/trust.css
@@ -0,0 +1,328 @@
 .trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 60px 16px;
    background: #fff;
 }
 .trust__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1280px;
    gap: 40px;
    margin: 0 auto;
 }
 .trust__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
    overflow: clip;
 }
 .trust__title {
    width: 100%;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--ls-28);
    color: #1a1a1a;
 }
 .trust__description {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
 }
 .trust__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 32px;
 }
 .trust-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 16px;
    padding: 24px;
    border-radius: 30px;
 }
 .trust-card__icon-frame {
    position: relative;
    flex-shrink: 0;
    width: 128px;
    height: 128px;
 }
 .trust-card__icon-crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
 }
 .trust-card__icon {
    position: absolute;
    max-width: none;
 }
 .trust-card__icon--one {
    top: 7.04%;
    left: -31.48%;
    width: 312.73%;
    height: 174.55%;
 }
 .trust-card__icon--two {
    top: 3.1%;
    left: -164.72%;
    width: 335.61%;
    height: 187.32%;
 }
 .trust-card__icon--three {
    top: -105.62%;
    left: -187.93%;
    width: 378.86%;
    height: 211.46%;
 }
 .trust-card__icon--four {
    top: 0;
    left: 4.14%;
    width: 100%;
    height: 100%;
 }
 .trust-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
 }
 .trust-card__title {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: var(--ls-16);
    color: #0d0d0d;
 }
 .trust-card__description {
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
    color: #7a726d;
 }
 .trust__divider {
    position: relative;
    display: none; /* shown only in desktop flex row via 1023px breakpoint */
    flex-shrink: 0;
    width: 0;
    height: 118px;
 }
 .trust__divider-frame {
    position: absolute;
    inset: 0 -0.5px;
 }
 .trust__divider-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
 }
@media (max-width: 1023px) {
    .trust-card__copy {
        align-items: center;
        text-align: center;
    }
    .trust-card__title,
    .trust-card__description {
        text-align: center;
    }
 }
@media (min-width: 440px) {
    .trust {
        padding-left: 20px;
        padding-right: 20px;
    }
    .trust__title {
        font-size: 32px;
        letter-spacing: var(--ls-32);
    }
 }
@media (min-width: 576px) {
    .trust {
        padding-left: 24px;
        padding-right: 24px;
    }
    .trust__title {
        font-size: 36px;
        letter-spacing: var(--ls-36);
    }
 }
@media (min-width: 768px) {
    .trust {
        padding-left: 36px;
        padding-right: 36px;
    }
    .trust__title {
        font-size: 42px;
        letter-spacing: var(--ls-42);
    }
    .trust__grid {
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
 }
@media (min-width: 768px) and (max-width: 1023px) {
    .trust__grid > .trust-card:nth-child(1),
    .trust__grid > .trust-card:nth-child(5) {
        position: relative;
    }
    .trust__grid > .trust-card:nth-child(1)::after,
    .trust__grid > .trust-card:nth-child(5)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -16px;
        transform: translateY(-50%);
        width: 0;
        height: 118px;
        border-left: 1px solid rgba(240, 132, 88, 0.5);
    }
 }
@media (min-width: 1024px) {
    .trust {
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 28px;
        padding-right: 28px;
    }
    .trust__grid {
        display: flex;
        gap: 14px;
    }
    .trust-card {
        flex: 1;
        padding: 16px 8px;
    }
    .trust-card__icon-frame {
        width: 112px;
        height: 112px;
    }
    .trust-card__copy {
        align-items: center;
        text-align: center;
    }
    .trust-card__title {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: var(--ls-15);
        text-align: center;
    }
    .trust-card__description {
        font-size: 14px;
        line-height: 1.45;
        letter-spacing: var(--ls-14);
        text-align: center;
    }
    .trust__divider {
        display: block;
    }
 }
@media (min-width: 1200px) {
    .trust__title {
        font-size: 48px;
        letter-spacing: var(--ls-48);
    }
    .trust__description {
        font-size: 18px;
        letter-spacing: var(--ls-18);
    }
    .trust__grid {
        gap: 24px;
    }
    .trust-card {
        padding: 24px;
    }
    .trust-card__icon-frame {
        width: 128px;
        height: 128px;
    }
    .trust-card__title {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: var(--ls-16);
    }
    .trust-card__description {
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: var(--ls-15);
    }
 }
@media (min-width: 1376px) {
    .trust {
        padding-top: 120px;
        padding-bottom: 120px;
        padding-left: 120px;
        padding-right: 120px;
    }
 }
--- a/src/styles/why.css
+++ b/src/styles/why.css
@@ -0,0 +1,317 @@
 .why {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 60px 16px;
    background: #fff;
 }
 .why__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1280px;
    gap: 40px;
    margin: 0 auto;
 }
 .why__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 36px;
    overflow: clip;
 }
 .why__copy {
    display: flex;
    order: 2;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 36px;
 }
 .why__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 24px;
 }
 .why__title {
    width: 100%;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: var(--ls-28);
    color: #1a1a1a;
 }
 .why__title-line {
    margin: 0;
    line-height: 1.2;
 }
 .why__underline {
    position: relative;
    flex-shrink: 0;
    width: 295.5px;
    height: 0;
 }
 .why__underline-frame {
    position: absolute;
    inset: -0.5px 0;
 }
 .why__underline-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
 }
 .why__description {
  width: 100%;
  margin: 0;
  font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-15);
  color: #7a726d;
 }
@media (min-width: 1200px) {
  .why__description {
    font-size: 18px;
    letter-spacing: var(--ls-18);
  }
 }
 .why__illustration {
  position: relative;
  display: block;
    order: 1;
    align-self: center;
    flex-shrink: 0;
    width: 480px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vw - 32px);
 }
 .why__illustration-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
 }
 .why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 24px;
 }
 .why-card {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 20px;
    padding: 20px 16px;
    overflow: clip;
    background: #fef0eb;
    border: 1px solid #e8e4de;
    border-radius: 30px;
 }
 .why-card__icon-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    overflow: clip;
    background: #f08458;
    border-radius: 9999px;
 }
 .why-card__icon {
    display: block;
 }
 .why-card__icon--simple {
    width: 33.001px;
    height: 32.973px;
 }
 .why-card__icon--familiar {
    width: 28.5px;
    height: 30px;
 }
 .why-card__icon--connected {
    width: 33px;
    height: 32.936px;
 }
 .why-card__icon--modern {
    width: 18.125px;
    height: 33px;
 }
 .why-card__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
    overflow: clip;
 }
 .why-card__title {
    width: 100%;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: var(--ls-20);
    color: #0d0d0d;
 }
 .why-card__description {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--ls-16);
    color: #7a726d;
 }
@media (min-width: 440px) {
    .why {
        padding-left: 20px;
        padding-right: 20px;
    }
    .why-card {
        gap: 24px;
    }
    .why-card__icon-frame {
        width: 80px;
        height: 80px;
    }
    .why-card__icon--simple {
        width: 44.001px;
        height: 43.964px;
    }
    .why-card__icon--familiar {
        width: 38px;
        height: 40px;
    }
    .why-card__icon--connected {
        width: 44px;
        height: 43.914px;
    }
    .why-card__icon--modern {
        width: 24.168px;
        height: 44px;
    }
    .why__title {
        font-size: 32px;
        letter-spacing: var(--ls-32);
    }
 }
@media (min-width: 576px) {
    .why {
        padding-left: 24px;
        padding-right: 24px;
    }
    .why__title {
        font-size: 36px;
        letter-spacing: var(--ls-36);
    }
 }
@media (min-width: 768px) {
    .why {
        padding-left: 36px;
        padding-right: 36px;
    }
    .why__title {
        font-size: 42px;
        letter-spacing: var(--ls-42);
    }
    .why-card {
        padding: 36px;
        min-height: 152px;
    }
    .why-card__title {
        font-size: 24px;
        letter-spacing: var(--ls-24);
    }
 }
@media (min-width: 1024px) {
    .why {
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 36px;
        padding-right: 36px;
    }
    .why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .why__intro {
        flex-direction: row;
    }
    .why__copy {
        order: 1;
    }
    .why__illustration {
        order: 2;
    }
 }
@media (min-width: 1200px) {
    .why__title {
        font-size: 48px;
        letter-spacing: var(--ls-48);
    }
 }
@media (min-width: 1376px) {
    .why {
        padding-top: 120px;
        padding-bottom: 120px;
        padding-left: 0;
        padding-right: 0;
    }
 }
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,21 +0,0 @@
 /** @type {import('tailwindcss').Config} */
 export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#f28a4b',
        'text-primary': '#2e2a28',
        'text-secondary': '#7a726d',
        surface: '#f8f3ee',
        'surface-alt': '#f2eae3',
        'surface-footer': '#efe6de',
        'border-light': '#e3d9d1',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,3 @@
 {
-  "extends": "astro/tsconfigs/strict",
+  "extends": "./node_modules/astro/tsconfigs/strict.json"
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {}
  }
 }
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -0,0 +1,19 @@
 import { defineConfig, presetWind } from 'unocss'
 export default defineConfig({
  presets: [presetWind()],
  theme: {
    colors: {
      brand: '#f28a4b',
      'text-primary': '#2e2a28',
      'text-secondary': '#7a726d',
      surface: '#f8f3ee',
      'surface-alt': '#f2eae3',
      'surface-footer': '#efe6de',
      'border-light': '#e3d9d1',
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
 })
Author	SHA1	Message	Date
SeekingGamer	f3ee755f47	fix(docs): Update Readme.md All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 29s Details	2026-05-21 10:19:30 +08:00
SeekingGamer	f8d97f46c5	Update Base.astro with new js All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 31s Details	2026-05-21 10:15:47 +08:00
SeekingGamer	edec5370b6	fix(style): Change IOS buttons style Some checks failed Deploy to talkpro / build-and-sync (push) Has been cancelled Details	2026-05-20 16:17:12 +08:00
Finn	08699e6d0d	Merge pull request 'fix(style): fix gaps and pop up screen ui' (#13 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 35s Details Reviewed-on: #13	2026-05-20 06:37:35 +00:00
SeekingGamer	74793fbc11	fix(style): fix gaps and pop up screen ui	2026-05-20 11:36:04 +08:00
Finn	1de7b09ceb	Merge pull request 'fix(docs): Update Translation ts' (#12 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 28s Details Reviewed-on: #12	2026-05-19 03:31:02 +00:00
SeekingGamer	a8229e543e	fix(docs): Update Translation ts	2026-05-19 11:30:10 +08:00
Finn	b34e4b8538	Merge pull request 'fix(style):Removed the site link in Downloads astro' (#11 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 29s Details Reviewed-on: #11	2026-05-19 03:00:49 +00:00
SeekingGamer	37055ca74a	fix(style):Removed the site link in Downloads astro	2026-05-19 10:59:27 +08:00
Finn	9f58001a56	Merge pull request 'finn-staging' (#10 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 33s Details Reviewed-on: #10	2026-05-19 02:55:57 +00:00
SeekingGamer	2a2d5fb9e5	fix(feat): Change styling for responsive layout	2026-05-19 10:51:38 +08:00
SeekingGamer	0220aa5ff8	fix(style): compact reliability row at 1024	2026-05-18 16:03:09 +08:00
SeekingGamer	7f7b44415e	fix(style): keep reliability grid at tablet widths	2026-05-18 15:58:05 +08:00
Finn	265a867602	Merge pull request 'fix(asset): bust cached public assets' (#9 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 37s Details Reviewed-on: #9	2026-05-18 07:42:03 +00:00
SeekingGamer	61ef7c14de	fix(asset): bust cached public assets	2026-05-18 15:39:38 +08:00
thomas	b8103ea072	1 All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 27s Details	2026-05-18 15:23:09 +08:00
thomas	a481c382a6	CI deploy without sudo: tar over ssh when rsync missing All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 33s Details Remove apt/sudo install step (act runners lack sudo). Use rsync when available; otherwise clear remote web root and stream dist/ via tar\|ssh. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:19:16 +08:00
thomas	5f9e8db7e5	CI: install rsync and openssh-client before deploy Some checks failed Deploy to talkpro / build-and-sync (push) Failing after 11s Details Gitea/act runners often lack rsync; apt/apk/dnf install step runs before ssh/rsync in deploy-talkpro.sh. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:17:13 +08:00
thomas	fe14ca30ff	Fix deploy script: use SSH_OPTS array for ssh mkdir Some checks failed Deploy to talkpro / build-and-sync (push) Failing after 31s Details Typo SSH[@] left ssh out of the command so the shell tried to run ubuntu@host as a program (exit 127). Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:15:31 +08:00
thomas	cf9cbb6134	Fix CI: remove optional secret overrides step Some checks failed Deploy to talkpro / build-and-sync (push) Failing after 31s Details Empty optional secrets made [ -n ... ] && echo fail under set -e. Job env already defines host, user, and deploy path. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:13:48 +08:00
thomas	77485eee63	Fix CI deploy: default talkpro host, require only SSH secret Some checks failed Deploy to talkpro / build-and-sync (push) Failing after 14s Details Gitea workflow no longer needs TALKPRO_HOST secret; defaults match talkpro VPS. Fail fast with a clear message if TALKPRO_SSH_PRIVATE_KEY is missing. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:06:14 +08:00
thomas	6e90a4adb6	Add Gitea Actions deploy workflow for talkpro.info Some checks failed Deploy to talkpro / build-and-sync (push) Failing after 18s Details Build Astro on push to main/master and rsync dist/ to the marketing server via SSH. Includes deploy-talkpro.sh, env example, and README. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 15:01:58 +08:00
thomas	3933cf42c0	1	2026-05-18 14:58:09 +08:00
Finn	df6cff4895	Merge pull request 'fix(style): Changes responsive layout breakpoint' (#8 ) from finn-staging into main Reviewed-on: #8	2026-05-18 06:41:21 +00:00
SeekingGamer	7b45ca94a6	fix(style): Changes responsive layout breakpoint	2026-05-18 14:39:56 +08:00
Finn	82e3a23df3	Merge pull request 'fix(feat): Refine responsive layout and section spacing' (#7 ) from finn-staging into main Reviewed-on: #7	2026-05-15 09:46:01 +00:00
SeekingGamer	c09ba76350	fix(feat): Refine responsive layout and section spacing	2026-05-15 17:44:31 +08:00
Finn	66f52a2d6e	Merge pull request 'fix(feat): add locales and refine responsive landing page UI' (#6 ) from finn-staging into main Reviewed-on: #6	2026-05-15 05:41:46 +00:00
SeekingGamer	ff7e4395ea	fix(feat): add locales and refine responsive landing page UI	2026-05-15 13:17:37 +08:00
Finn	b6e6178466	Merge pull request 'finn-staging' (#5 ) from finn-staging into main Reviewed-on: #5	2026-05-14 10:02:48 +00:00
Finn	ce1095088d	Merge branch 'main' into finn-staging	2026-05-14 10:02:00 +00:00
SeekingGamer	a8474fd208	fix(feat): Rearrange the element to fix the responsive layout	2026-05-14 17:58:14 +08:00
SeekingGamer	c587df063b	fix(feat): Adjust button and cards position when screen size change	2026-05-14 12:03:42 +08:00
SeekingGamer	c7a205e40c	fix(feat): Add and Rearrange the img container after screen change	2026-05-14 11:20:49 +08:00
SeekingGamer	92bd81aed4	Merge finn-staging into main	2026-05-13 15:09:28 +08:00
SeekingGamer	33b1f7f9dd	fix(style): Change the css styling for different screen size	2026-05-13 14:57:52 +08:00
TerryM	d31a13cbbe	Revert "fix(style): Seperate CSS style to src\styles" This reverts commit `dbda554d28`.	2026-05-13 14:55:01 +08:00
TerryM	6f8d36140a	Revert "style: Seperate and Reformat inline style into css seperate files" This reverts commit `93049e9044`.	2026-05-13 14:55:01 +08:00
Finn	e5bcb7bad2	Merge pull request 'main' (#1 ) from main into finn-staging Reviewed-on: #1	2026-05-13 05:51:12 +00:00
SeekingGamer	dbda554d28	fix(style): Seperate CSS style to src\styles	2026-05-13 13:46:21 +08:00
SeekingGamer	93049e9044	style: Seperate and Reformat inline style into css seperate files	2026-05-13 11:48:22 +08:00
TerryM	a6bd0ca864	feat: enhance header and mobile navigation with smooth scrolling and active link highlighting	2026-05-12 22:39:36 +08:00
TerryM	dbaad19d0b	fix: resolve tsconfig extends path for Vite/esbuild compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 18:46:00 +08:00
TerryM	4134aec1f8	fix: responsive layout for 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) - Footer/DownloadCTA: responsive padding and container widths Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 18:35:29 +08:00
TerryM	a23dcf0a95	refactor: update layout and styling for multiple components to enhance responsiveness and visual consistency	2026-05-12 18:30:55 +08:00
TerryM	b0329e3863	fix: ensure layout works at 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 17:45:23 +08:00
TerryM	ede669051b	chore: fix SVG assets and remove unused PNGs - Rename cta-talkpro-logo, cta-bg-pattern, header-globe, header-logo-wordmark, cta/footer store badge icons, preview arrows from .png to .svg - Refresh cta-bg-pattern from Figma node 9505:754 - Delete 12 unused PNGs leftover from previous design Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 17:30:21 +08:00
TerryM	02102dd046	feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 17:14:50 +08:00
TerryM	3d1d674419	docs: fix Figma design link in README	2026-05-12 16:48:14 +08:00
TerryM	376755889d	docs: add README and fix Vite 7 override Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 16:40:16 +08:00
TerryM	a071a85121	feat: add Footer component	2026-05-12 16:34:58 +08:00
TerryM	a573a1e571	feat: add Download CTA section	2026-05-12 16:34:26 +08:00
TerryM	bafa1ba6d4	feat: add Use Cases section	2026-05-12 16:33:59 +08:00
TerryM	1e81796aee	feat: add Core System section	2026-05-12 16:32:14 +08:00
TerryM	14b528f02b	feat: add Hero section	2026-05-12 16:30:36 +08:00
TerryM	316dbe3c78	feat: add Header component	2026-05-12 16:28:30 +08:00
TerryM	213d6c49bc	feat: add Base layout with Inter font	2026-05-12 16:27:03 +08:00
TerryM	c06d6bc3c3	feat: replace Tailwind with UnoCSS Faster dev HMR, native Astro 6 support, same utility class names. Tokens migrated to uno.config.ts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 16:26:01 +08:00
TerryM	264f66bea5	feat: download Figma assets to public/assets Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 16:22:26 +08:00