From 516d0018c0c451486c5ada0f301be8914d711baf Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 15:42:38 -0300
Subject: [PATCH 1/7] perf(landing): inline render-blocking CSS via
 experimental.inlineCss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enables Next.js experimental.inlineCss so the 3 stylesheet requests that
blocked the first render (global Tailwind 21.5KB + 2 component chunks
2.1/2.4KB) are merged into a single <style> tag in <head>.

PSI target: #2 render-blocking-resources, ~600ms LCP+FCP savings.
CSP already allows unsafe-inline for style-src — no CSP change needed.

Build evidence: index.html head now contains
  <style data-precedence="next" data-href="531c... b063... 67c5...">
with full Tailwind + component CSS inlined. Zero <link rel="stylesheet">
blocking tags remain.
---
 next.config.mjs | 2 ++
 1 file changed, 2 insertions(+)
diff --git a/next.config.mjs b/next.config.mjs
index 9b83cfca..ea2b65cc 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -20,6 +20,8 @@ const nextConfig = {
 
   // Experimental features for better performance
   experimental: {
+    // Inline critical CSS into <head> to eliminate render-blocking stylesheet requests
+    inlineCss: true,
     // Optimize memory usage and tree-shaking for large dependencies
     optimizePackageImports: [
       '@radix-ui/react-dialog',

From a5d5be697912365882154fb092b6abe5599bb178 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 15:42:47 -0300
Subject: [PATCH 2/7] perf(landing): add modern browserslist to eliminate SWC
 polyfills
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Targets chrome 111, safari 16.4, firefox 128, edge 111 — all ES2022-class,
matching the Telegram/Meta/X WebViews from spec 073 IAB gate.

Without an explicit browserslist Next.js ships SWC polyfills (Object.assign,
Object.fromEntries, globalThis shims etc.). These four targets already
support all ES2022 features natively so SWC emits no polyfill helpers.

PSI target: #3 legacy JS, ~12KB gzip / ~150ms savings off chunk 5028.
Verified: `npx browserslist` resolves to exactly {chrome 111, edge 111,
firefox 128, safari 16.4}.
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 0253e4ed..b362c446 100644
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },
+  "browserslist": ["chrome 111", "safari 16.4", "firefox 128", "edge 111"],
   "lint-staged": {
     "*.{ts,tsx}": [
       "eslint --fix",

From 0ff6e21296de5ea21876a8a6e66bbbf651a146c6 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 15:59:22 -0300
Subject: [PATCH 3/7] fix(a11y): add accessible names to nav links and wallet
 button

---
 src/features/wallet-connect/ui/LazyWalletButton.tsx | 9 ++++++++-
 src/widgets/navigation/Navigation.tsx               | 9 +++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/features/wallet-connect/ui/LazyWalletButton.tsx b/src/features/wallet-connect/ui/LazyWalletButton.tsx
index 0333879f..bdc0e926 100644
--- a/src/features/wallet-connect/ui/LazyWalletButton.tsx
+++ b/src/features/wallet-connect/ui/LazyWalletButton.tsx
@@ -61,7 +61,14 @@ function hasPersistedWalletConnection(): boolean {
  */
 function PlaceholderButton({ onClick, isLoading }: { onClick: () => void; isLoading: boolean }) {
   return (
-    <Button variant="outline" size="sm" className="gap-1.5" onClick={onClick} disabled={isLoading}>
+    <Button
+      variant="outline"
+      size="sm"
+      className="gap-1.5"
+      onClick={onClick}
+      disabled={isLoading}
+      aria-label={isLoading ? 'Loading wallet' : 'Connect wallet'}
+    >
       {isLoading ? (
         <>
           <Loader2Icon className="h-4 w-4 animate-spin" />
diff --git a/src/widgets/navigation/Navigation.tsx b/src/widgets/navigation/Navigation.tsx
index 3f1485f7..6b3fbed1 100644
--- a/src/widgets/navigation/Navigation.tsx
+++ b/src/widgets/navigation/Navigation.tsx
@@ -52,6 +52,7 @@ export function Navigation() {
             <div className="flex items-center gap-1.5 sm:gap-2">
               <Link
                 href="/history"
+                aria-label="History"
                 className={`inline-flex min-h-[44px] items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                   isHistory
                     ? 'bg-zinc-800 text-zinc-50'
@@ -62,12 +63,12 @@ export function Navigation() {
                 <span className="hidden sm:inline">History</span>
               </Link>
 
-              <Link href="/create">
-                <Button variant="outline" size="sm" className="gap-1.5">
+              <Button asChild variant="outline" size="sm" className="gap-1.5" aria-label="Create">
+                <Link href="/create">
                   <PlusIcon className="h-4 w-4" />
                   <span className="hidden sm:inline">Create</span>
-                </Button>
-              </Link>
+                </Link>
+              </Button>
 
               {/* Separator */}
               <div className="mx-2 h-6 w-px bg-zinc-800" />

From fef0033dfdf2397498d1d7f6419ad8aaad779253 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 15:59:29 -0300
Subject: [PATCH 4/7] fix(a11y): add role=img to NetworkIcon spans

---
 src/shared/ui/network-icon/NetworkIcon.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/shared/ui/network-icon/NetworkIcon.tsx b/src/shared/ui/network-icon/NetworkIcon.tsx
index d4a97241..5613fc78 100644
--- a/src/shared/ui/network-icon/NetworkIcon.tsx
+++ b/src/shared/ui/network-icon/NetworkIcon.tsx
@@ -97,6 +97,7 @@ export const NetworkIcon = forwardRef<HTMLSpanElement, NetworkIconProps>(
       return (
         <span
           ref={ref}
+          role="img"
           className={cn(
             'inline-flex items-center justify-center',
             variant === 'mono' && 'grayscale',
@@ -117,6 +118,7 @@ export const NetworkIcon = forwardRef<HTMLSpanElement, NetworkIconProps>(
     return (
       <span
         ref={ref}
+        role="img"
         className={cn(
           'inline-flex items-center justify-center rounded-full text-white font-bold',
           variant === 'mono' ? 'bg-zinc-500' : bgColor,

From 4ee7f57e0e42bb21f3265f84ee33ccd831542670 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 15:59:43 -0300
Subject: [PATCH 5/7] fix(a11y): improve caption contrast and remove
 superfluous figcaption

---
 src/widgets/landing/comparison/ComparisonTable.tsx | 2 +-
 src/widgets/landing/video-section/VideoSection.tsx | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/widgets/landing/comparison/ComparisonTable.tsx b/src/widgets/landing/comparison/ComparisonTable.tsx
index b5166169..3cd2ee67 100644
--- a/src/widgets/landing/comparison/ComparisonTable.tsx
+++ b/src/widgets/landing/comparison/ComparisonTable.tsx
@@ -194,7 +194,7 @@ export function ComparisonTable() {
         </div>
 
         {/* Disclaimer */}
-        <Text variant="small" className="mt-6 text-center text-zinc-500">
+        <Text variant="small" className="mt-6 text-center text-zinc-400">
           Comparison based on public documentation as of April 2026. Features may vary.
         </Text>
         <div className="mt-4 text-center">
diff --git a/src/widgets/landing/video-section/VideoSection.tsx b/src/widgets/landing/video-section/VideoSection.tsx
index a3a79c46..43f4e76b 100644
--- a/src/widgets/landing/video-section/VideoSection.tsx
+++ b/src/widgets/landing/video-section/VideoSection.tsx
@@ -111,9 +111,6 @@ export function VideoSection() {
             />
           </div>
 
-          <figcaption className="px-4 py-3 text-sm text-zinc-500">
-            Silent by design. Captions tell the story.
-          </figcaption>
         </figure>
 
         {/* CTA */}

From e1e51ba24a2a6e3eef3f494ff6e7f8d7d3935e6f Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 17:54:50 -0300
Subject: [PATCH 6/7] feat(landing): add video captions VTT track and DOM
 transcript

---
 public/video/voidpay-9x16-v2.en.vtt           | 49 +++++++++++++++++++
 .../__snapshots__/NetworkSelect.test.tsx.snap |  3 ++
 .../landing/video-section/VideoSection.tsx    | 32 +++++++++++-
 .../__tests__/VideoSection.test.tsx           | 26 ++++++++--
 4 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 public/video/voidpay-9x16-v2.en.vtt

diff --git a/public/video/voidpay-9x16-v2.en.vtt b/public/video/voidpay-9x16-v2.en.vtt
new file mode 100644
index 00000000..721b28c7
--- /dev/null
+++ b/public/video/voidpay-9x16-v2.en.vtt
@@ -0,0 +1,49 @@
+WEBVTT
+
+00:00.167 --> 00:02.833
+Sending wallet addresses in Telegram?
+
+00:03.000 --> 00:05.333
+Create an invoice.
+
+00:05.667 --> 00:08.000
+No signup.
+
+00:08.333 --> 00:10.667
+No account. No KYC.
+
+00:11.000 --> 00:15.000
+Get a link.
+
+00:15.000 --> 00:17.333
+Invoice ready.
+
+00:17.667 --> 00:19.833
+The link is the invoice.
+
+00:20.167 --> 00:22.500
+Hash never leaves the browser.
+
+00:22.833 --> 00:24.833
+Share it anywhere.
+
+00:24.333 --> 00:26.667
+Payer opens the link.
+
+00:27.000 --> 00:29.500
+No intermediary.
+
+00:30.667 --> 00:33.333
+Unique amount. Unique payment.
+
+00:34.333 --> 00:37.000
+Exact on-chain match.
+
+00:37.000 --> 00:39.000
+Payment confirmed.
+
+00:39.000 --> 00:41.000
+Not our servers.
+
+00:41.000 --> 00:43.500
+Works even if we shut down.
diff --git a/src/features/wallet-connect/ui/__tests__/__snapshots__/NetworkSelect.test.tsx.snap b/src/features/wallet-connect/ui/__tests__/__snapshots__/NetworkSelect.test.tsx.snap
index 9abb2813..ce60a8cd 100644
--- a/src/features/wallet-connect/ui/__tests__/__snapshots__/NetworkSelect.test.tsx.snap
+++ b/src/features/wallet-connect/ui/__tests__/__snapshots__/NetworkSelect.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`NetworkSelect - Snapshots > should match snapshot with default state 1`
       <span
         aria-label="Ethereum"
         class="inline-flex items-center justify-center"
+        role="img"
       >
         <svg
           class="web3icons flex-shrink-0"
@@ -114,6 +115,7 @@ exports[`NetworkSelect - Snapshots > should match snapshot with different networ
       <span
         aria-label="Polygon"
         class="inline-flex items-center justify-center"
+        role="img"
       >
         <svg
           class="web3icons flex-shrink-0"
@@ -200,6 +202,7 @@ exports[`NetworkSelect - Snapshots > should match snapshot with disabled state 1
       <span
         aria-label="Arbitrum"
         class="inline-flex items-center justify-center"
+        role="img"
       >
         <svg
           class="web3icons flex-shrink-0"
diff --git a/src/widgets/landing/video-section/VideoSection.tsx b/src/widgets/landing/video-section/VideoSection.tsx
index 43f4e76b..94506031 100644
--- a/src/widgets/landing/video-section/VideoSection.tsx
+++ b/src/widgets/landing/video-section/VideoSection.tsx
@@ -108,9 +108,39 @@ export function VideoSection() {
               controls={prefersReducedMotion || isMobile}
               aria-label="VoidPay product walkthrough: creating and paying a crypto invoice"
               onPlay={handlePlay}
-            />
+            >
+              <track
+                kind="captions"
+                srcLang="en"
+                label="English"
+                src="/video/voidpay-9x16-v2.en.vtt"
+                default
+              />
+            </video>
           </div>
 
+          {/* Transcript — server-rendered crawlable text matching VTT cues. */}
+          <details className="px-4 py-3 text-left text-sm text-zinc-400">
+            <summary className="cursor-pointer select-none">Transcript</summary>
+            <ol className="mt-2 list-inside list-decimal space-y-1">
+              <li>Sending wallet addresses in Telegram?</li>
+              <li>Create an invoice.</li>
+              <li>No signup.</li>
+              <li>No account. No KYC.</li>
+              <li>Get a link.</li>
+              <li>Invoice ready.</li>
+              <li>The link is the invoice.</li>
+              <li>Hash never leaves the browser.</li>
+              <li>Share it anywhere.</li>
+              <li>Payer opens the link.</li>
+              <li>No intermediary.</li>
+              <li>Unique amount. Unique payment.</li>
+              <li>Exact on-chain match.</li>
+              <li>Payment confirmed.</li>
+              <li>Not our servers.</li>
+              <li>Works even if we shut down.</li>
+            </ol>
+          </details>
         </figure>
 
         {/* CTA */}
diff --git a/src/widgets/landing/video-section/__tests__/VideoSection.test.tsx b/src/widgets/landing/video-section/__tests__/VideoSection.test.tsx
index 6fe4e9d0..f702ca65 100644
--- a/src/widgets/landing/video-section/__tests__/VideoSection.test.tsx
+++ b/src/widgets/landing/video-section/__tests__/VideoSection.test.tsx
@@ -57,9 +57,9 @@ describe('VideoSection', () => {
       expect(screen.queryByText(/No account\. No server\./)).not.toBeInTheDocument()
     })
 
-    it('should render the figcaption', () => {
+    it('should render the transcript summary', () => {
       render(<VideoSection />)
-      expect(screen.getByText('Silent by design. Captions tell the story.')).toBeInTheDocument()
+      expect(screen.getByText('Transcript')).toBeInTheDocument()
     })
 
     it('should render the CTA button linking to /create', () => {
@@ -218,12 +218,28 @@ describe('VideoSection', () => {
       expect(heading).toBeInTheDocument()
     })
 
-    it('should wrap video in figure with figcaption', () => {
+    it('should wrap video in figure with a transcript', () => {
       render(<VideoSection />)
       const figure = document.querySelector('figure')
       expect(figure).toBeInTheDocument()
-      const figcaption = figure?.querySelector('figcaption')
-      expect(figcaption).toBeInTheDocument()
+      const details = figure?.querySelector('details')
+      expect(details).toBeInTheDocument()
+      expect(details?.querySelector('summary')).toBeInTheDocument()
+    })
+
+    it('should have a captions track on the video', () => {
+      render(<VideoSection />)
+      const track = document.querySelector('track')
+      expect(track).toBeInTheDocument()
+      expect(track).toHaveAttribute('kind', 'captions')
+      expect(track).toHaveAttribute('srclang', 'en')  // DOM attr is lowercase
+      expect(track).toHaveAttribute('src', '/video/voidpay-9x16-v2.en.vtt')
+    })
+
+    it('transcript should contain key caption text', () => {
+      render(<VideoSection />)
+      expect(screen.getByText('Works even if we shut down.')).toBeInTheDocument()
+      expect(screen.getByText('Payment confirmed.')).toBeInTheDocument()
     })
   })
 

From 4c7f75b03e134a040f143a4e4f735519b48c0870 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Fri, 5 Jun 2026 18:14:47 -0300
Subject: [PATCH 7/7] fix(landing): correct overlapping VTT cue timing

---
 public/video/voidpay-9x16-v2.en.vtt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/video/voidpay-9x16-v2.en.vtt b/public/video/voidpay-9x16-v2.en.vtt
index 721b28c7..d8ed82d9 100644
--- a/public/video/voidpay-9x16-v2.en.vtt
+++ b/public/video/voidpay-9x16-v2.en.vtt
@@ -27,7 +27,7 @@ Hash never leaves the browser.
 00:22.833 --> 00:24.833
 Share it anywhere.
 
-00:24.333 --> 00:26.667
+00:24.834 --> 00:26.667
 Payer opens the link.
 
 00:27.000 --> 00:29.500
