feat(landing): add vs/pagerduty comparison page with FAQ and nav links

- Create /vs comparison page (EN) with Batida vs PagerDuty vs Grafana OnCall
- Create /vs.pt-br comparison page (PT-BR)
- Add FAQ item linking to comparison in both versions
- Add "Compare" nav link in desktop navigation

index.html

@@ -551,6 +551,7 @@
                     <a href="#integrations" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrations</a>
                     <a href="#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Pricing</a>
                     <a href="#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Compare</a>
                 </div>
                 
                 <!-- Right Side Actions -->
@@ -1237,7 +1238,7 @@
             <!-- Platform Highlights -->
             <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6 mb-12">
                 <div class="text-center card-surface rounded-2xl p-6">
-                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">14+</div>
+                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">3+</div>
                     <div class="text-sm" style="color: var(--text-secondary);">Integrations available</div>
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
@@ -1246,7 +1247,7 @@
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
                     <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">99.9%</div>
-                    <div class="text-sm" style="color: var(--text-secondary);">Uptime Guaranteed</div>
+                    <div class="text-sm" style="color: var(--text-secondary);">Uptime SLA</div>
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
                     <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-frost mb-2">$0</div>
@@ -1515,6 +1516,33 @@
         </div>
     </section>
 
+    <!-- TRUST METRICS -->
+    <section class="py-16 lg:py-20" style="background: var(--bg-canvas);">
+        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-10" style="color: var(--text-primary);">
+                Built for reliability
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">&lt;15min</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Setup Time</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">99.9%</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Uptime SLA</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-frost mb-1">&lt;2s</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">P95 API Latency</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-ember mb-1">3+</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Integrations</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- FAQ -->
     <section id="faq" class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
         <div class="absolute inset-0 bg-texture"></div>
@@ -1599,6 +1627,18 @@
                         Yes. AES-256 encryption, daily backups. LGPD/GDPR compliant. SOC 2 audit in progress.
                     </div>
                 </details>
+
+                <details class="group card-surface rounded-xl overflow-hidden">
+                    <summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
+                        <span>How does Batida compare to PagerDuty?</span>
+                        <svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </summary>
+                    <div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
+                        See our <a href="/vs" style="color: var(--color-primary);">detailed comparison</a> with PagerDuty and Grafana OnCall.
+                    </div>
+                </details>
             </div>
         </div>
     </section>

index.pt-br.html

@@ -551,6 +551,7 @@
                     <a href="#integrations" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Integrações</a>
                     <a href="#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a>
                     <a href="#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs.pt-br" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Comparar</a>
                 </div>
                 
                 <!-- Right Side Actions -->
@@ -1237,7 +1238,7 @@
             <!-- Platform Highlights -->
             <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-6 mb-12">
                 <div class="text-center card-surface rounded-2xl p-6">
-                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">14+</div>
+                    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">3+</div>
                     <div class="text-sm" style="color: var(--text-secondary);">Integrações disponíveis</div>
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
@@ -1246,7 +1247,7 @@
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
                     <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-ember mb-2">99.9%</div>
-                    <div class="text-sm" style="color: var(--text-secondary);">Uptime Garantido</div>
+                    <div class="text-sm" style="color: var(--text-secondary);">SLA de Uptime</div>
                 </div>
                 <div class="text-center card-surface rounded-2xl p-6">
                     <div class="text-3xl sm:text-4xl lg:text-5xl font-bold gradient-text-frost mb-2">$0</div>
@@ -1515,6 +1516,33 @@
         </div>
     </section>
 
+    <!-- TRUST METRICS -->
+    <section class="py-16 lg:py-20" style="background: var(--bg-canvas);">
+        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-2xl sm:text-3xl font-bold mb-10" style="color: var(--text-primary);">
+                Construído para confiabilidade
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">&lt;15min</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Tempo de Setup</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-amber mb-1">99.9%</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">SLA de Uptime</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-frost mb-1">&lt;2s</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Latência P95 da API</div>
+                </div>
+                <div class="card-surface rounded-2xl p-5 text-center">
+                    <div class="text-3xl font-bold gradient-text-ember mb-1">3+</div>
+                    <div class="text-xs" style="color: var(--text-secondary);">Integrações</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- FAQ -->
     <section id="faq" class="py-20 lg:py-28 relative" style="background: var(--bg-primary);">
         <div class="absolute inset-0 bg-texture"></div>
@@ -1599,6 +1627,18 @@
                         Sim. Criptografia AES-256, backups diários. LGPD/GDPR compliant. Auditoria SOC 2 em andamento.
                     </div>
                 </details>
+
+                <details class="group card-surface rounded-xl overflow-hidden">
+                    <summary class="flex items-center justify-between cursor-pointer px-6 py-5 font-semibold hover:text-ember-500 transition-colors" style="color: var(--text-primary);">
+                        <span>Como o Batida se compara ao PagerDuty?</span>
+                        <svg class="w-5 h-5 flex-shrink-0 ml-4 transition-transform duration-200" style="color: var(--text-muted);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </summary>
+                    <div class="px-6 pb-5 leading-relaxed" style="color: var(--text-secondary);">
+                        Veja nossa <a href="/vs.pt-br" style="color: var(--color-primary);">comparação detalhada</a> com PagerDuty e Grafana OnCall.
+                    </div>
+                </details>
             </div>
         </div>
     </section>

vs.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="alternate" hreflang="en" href="https://batida.io/vs">
+    <link rel="alternate" hreflang="pt-BR" href="https://batida.io/vs/pt-br">
+    <title>Batida vs PagerDuty vs Grafana OnCall — Feature Comparison</title>
+    <meta name="description" content="Compare Batida with PagerDuty and Grafana OnCall. See pricing, features, LGPD compliance, and why Brazilian teams choose Batida.">
+    <link rel="canonical" href="https://batida.io/vs">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://batida.io/vs">
+    <meta property="og:title" content="Batida vs PagerDuty vs Grafana OnCall — Feature Comparison">
+    <meta property="og:description" content="Compare incident management platforms. See why Batida is the best choice for Brazilian DevOps teams.">
+    <meta property="og:site_name" content="Batida">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Batida vs PagerDuty vs Grafana OnCall">
+    <meta name="twitter:description" content="Compare incident management platforms for Brazilian teams.">
+
+    <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@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                        'mono': ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        'ember': {
+                            50: '#FFF7ED', 100: '#FFEDD5', 200: '#FED7AA', 300: '#FDBA74',
+                            400: '#FB923C', 500: '#F97316', 600: '#EA580C', 700: '#C2410C',
+                            800: '#9A3412', 900: '#7C2D12',
+                        },
+                        'frost': {
+                            50: '#ECFEFF', 100: '#CFFAFE', 200: '#A5F3FC', 300: '#67E8F9',
+                            400: '#22D3EE', 500: '#06B6D4', 600: '#0891B2', 700: '#0E7490',
+                            800: '#155E75', 900: '#164E63',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+
+    <style>
+        :root, [data-theme="dark"] {
+            --bg-primary: #0C0C0F; --bg-secondary: #141419; --bg-raised: #1A1A22;
+            --bg-overlay: rgba(26, 26, 34, 0.8); --border-color: #2A2A35;
+            --border-hover: rgba(249, 115, 22, 0.3); --text-primary: #FAFAFA;
+            --text-secondary: #6B6B80; --text-muted: #4A4A5A;
+            --shadow-color: rgba(0, 0, 0, 0.4); --glow-ember: rgba(249, 115, 22, 0.15);
+            --card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
+        }
+        [data-theme="light"] {
+            --bg-primary: #FAFAF9; --bg-secondary: #F5F5F0; --bg-raised: #FFFFFF;
+            --bg-overlay: rgba(255, 255, 255, 0.9); --border-color: #E5E5E0;
+            --border-hover: rgba(249, 115, 22, 0.4); --text-primary: #1A1A1A;
+            --text-secondary: #52525B; --text-muted: #71717A;
+            --shadow-color: rgba(0, 0, 0, 0.08); --glow-ember: rgba(249, 115, 22, 0.08);
+            --card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
+        }
+        body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; }
+        html { scroll-behavior: smooth; }
+        a, button { font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }
+        .gradient-ember { background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%); }
+        .gradient-text-ember { background: linear-gradient(135deg, #F97316 0%, #FDBA74 50%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .btn-ember { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .btn-ember:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35); }
+        .card-surface { background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .theme-toggle { width: 56px; height: 28px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.3s ease; }
+        .theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #FB923C); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+        [data-theme="light"] .theme-toggle::after { transform: translateX(28px); background: linear-gradient(135deg, #06B6D4, #22D3EE); }
+        .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; transition: opacity 0.3s ease; }
+        .theme-toggle .icon-sun { left: 6px; opacity: 1; }
+        .theme-toggle .icon-moon { right: 6px; opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-sun { opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
+        ::selection { background: rgba(249, 115, 22, 0.25); color: inherit; }
+
+        .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
+        .compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
+        .compare-table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+        .compare-table tbody tr:hover { background: var(--bg-raised); }
+        .compare-table .feature-col { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
+        .compare-table .check { color: #22C55E; }
+        .compare-table .cross { color: #EF4444; }
+        .compare-table .partial { color: #F59E0B; }
+        .compare-table .batida-col { color: #F97316; font-weight: 600; }
+    </style>
+</head>
+<body class="antialiased">
+
+    <!-- NAVIGATION -->
+    <nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b" style="background: var(--bg-overlay); border-color: var(--border-color);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <a href="/" class="flex items-center gap-2 group">
+                    <div class="relative w-9 h-9 rounded-lg gradient-ember flex items-center justify-center font-bold text-lg text-white shadow-lg group-hover:scale-105 transition-transform">B</div>
+                    <span class="text-xl font-bold tracking-tight">Batida</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a href="/#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Features</a>
+                    <a href="/#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Pricing</a>
+                    <a href="/#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs" class="text-sm text-ember-500 font-medium">Compare</a>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
+                        <svg class="icon-sun" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
+                        <svg class="icon-moon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+                    </button>
+                    <a href="/vs.pt-br" class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium hover:text-ember-500 transition-colors" style="color: var(--text-secondary);"><span>🌐</span> PT</a>
+                    <a href="{{APP_URL}}/signup" class="hidden sm:inline-flex px-4 py-2 rounded-lg text-sm font-semibold text-white btn-ember">Start Free</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="pt-24 pb-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <!-- HEADER -->
+            <div class="text-center mb-12">
+                <h1 class="text-3xl sm:text-4xl font-bold mb-4">
+                    Batida vs <span class="gradient-text-ember">PagerDuty</span> vs Grafana OnCall
+                </h1>
+                <p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
+                    A feature-by-feature comparison for teams evaluating incident management tools — especially those in Brazil.
+                </p>
+            </div>
+
+            <!-- COMPARISON TABLE -->
+            <div class="card-surface rounded-2xl overflow-hidden mb-12">
+                <div class="overflow-x-auto">
+                    <table class="compare-table">
+                        <thead>
+                            <tr>
+                                <th class="feature-col">Feature</th>
+                                <th class="batida-col">Batida</th>
+                                <th>PagerDuty</th>
+                                <th>Grafana OnCall</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="feature-col">Price (Pro)</td>
+                                <td class="batida-col">R$59/seat/mo</td>
+                                <td>~R$300+/seat/mo</td>
+                                <td>Free (self-hosted)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Language</td>
+                                <td class="batida-col">PT-BR native</td>
+                                <td>EN only</td>
+                                <td>EN only</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">LGPD</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Native</td>
+                                <td><span class="partial">&#9679;</span> Extra add-on</td>
+                                <td><span class="cross">&#10007;</span> Manual</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">On-call Scheduling</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Add-on</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Escalation Policies</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">AI Postmortem</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="cross">&#10007;</span> Not available</td>
+                                <td><span class="cross">&#10007;</span> Not available</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Status Pages</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="partial">&#9679;</span> Extra (StatusPage.io)</td>
+                                <td><span class="partial">&#9679;</span> Plugin</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Incident Comments</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Included</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Audit Logs</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Included</td>
+                                <td><span class="check">&#10003;</span> Enterprise only</td>
+                                <td><span class="partial">&#9679;</span> Limited</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Open Source</td>
+                                <td class="batida-col"><span class="partial">&#9679;</span> Core modules</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="check">&#10003;</span> Yes (AGPL)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">PIX / Boleto</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Yes</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Brazilian Support</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Native</td>
+                                <td><span class="cross">&#10007;</span> No</td>
+                                <td><span class="cross">&#10007;</span> Community</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- BOTTOM CTA -->
+            <div class="text-center">
+                <a href="{{APP_URL}}/signup" class="inline-flex px-8 py-3 rounded-xl text-lg font-semibold text-white btn-ember">
+                    Start Free — No Credit Card
+                </a>
+                <p class="mt-4 text-sm" style="color: var(--text-muted);">
+                    Free plan includes 5 seats, 50 incidents/month. Upgrade when you're ready.
+                </p>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="border-t py-12" style="border-color: var(--border-color); background: var(--bg-secondary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-8 h-8 rounded-lg gradient-ember flex items-center justify-center font-bold text-white text-sm">B</div>
+                <span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
+            </div>
+            <p class="text-xs" style="color: var(--text-muted);">&copy; 2026 Batida IO Ltda.</p>
+        </div>
+    </footer>
+
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('batida-theme', newTheme);
+        }
+        (function() {
+            const saved = localStorage.getItem('batida-theme');
+            if (saved) { document.documentElement.setAttribute('data-theme', saved); }
+            else if (window.matchMedia('(prefers-color-scheme: light)').matches) { document.documentElement.setAttribute('data-theme', 'light'); }
+        })();
+    </script>
+</body>
+</html>

vs.pt-br.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="pt-BR" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="alternate" hreflang="en" href="https://batida.io/vs">
+    <link rel="alternate" hreflang="pt-BR" href="https://batida.io/vs/pt-br">
+    <title>Batida vs PagerDuty vs Grafana OnCall — Comparação de Recursos</title>
+    <meta name="description" content="Compare o Batida com PagerDuty e Grafana OnCall. Veja preços, recursos, conformidade LGPD e por que equipes brasileiras escolhem o Batida.">
+    <link rel="canonical" href="https://batida.io/vs/pt-br">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://batida.io/vs/pt-br">
+    <meta property="og:title" content="Batida vs PagerDuty vs Grafana OnCall — Comparação">
+    <meta property="og:description" content="Compare plataformas de gerenciamento de incidentes. Veja por que o Batida é a melhor escolha para equipes DevOps brasileiras.">
+    <meta property="og:site_name" content="Batida">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Batida vs PagerDuty vs Grafana OnCall">
+    <meta name="twitter:description" content="Compare plataformas de gerenciamento de incidentes para equipes brasileiras.">
+
+    <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@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                        'mono': ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        'ember': {
+                            50: '#FFF7ED', 100: '#FFEDD5', 200: '#FED7AA', 300: '#FDBA74',
+                            400: '#FB923C', 500: '#F97316', 600: '#EA580C', 700: '#C2410C',
+                            800: '#9A3412', 900: '#7C2D12',
+                        },
+                        'frost': {
+                            50: '#ECFEFF', 100: '#CFFAFE', 200: '#A5F3FC', 300: '#67E8F9',
+                            400: '#22D3EE', 500: '#06B6D4', 600: '#0891B2', 700: '#0E7490',
+                            800: '#155E75', 900: '#164E63',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+
+    <style>
+        :root, [data-theme="dark"] {
+            --bg-primary: #0C0C0F; --bg-secondary: #141419; --bg-raised: #1A1A22;
+            --bg-overlay: rgba(26, 26, 34, 0.8); --border-color: #2A2A35;
+            --border-hover: rgba(249, 115, 22, 0.3); --text-primary: #FAFAFA;
+            --text-secondary: #6B6B80; --text-muted: #4A4A5A;
+            --shadow-color: rgba(0, 0, 0, 0.4); --glow-ember: rgba(249, 115, 22, 0.15);
+            --card-bg: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.9));
+        }
+        [data-theme="light"] {
+            --bg-primary: #FAFAF9; --bg-secondary: #F5F5F0; --bg-raised: #FFFFFF;
+            --bg-overlay: rgba(255, 255, 255, 0.9); --border-color: #E5E5E0;
+            --border-hover: rgba(249, 115, 22, 0.4); --text-primary: #1A1A1A;
+            --text-secondary: #52525B; --text-muted: #71717A;
+            --shadow-color: rgba(0, 0, 0, 0.08); --glow-ember: rgba(249, 115, 22, 0.08);
+            --card-bg: linear-gradient(145deg, #FFFFFF, #F8F8F5);
+        }
+        body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; }
+        html { scroll-behavior: smooth; }
+        a, button { font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease; }
+        .gradient-ember { background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%); }
+        .gradient-text-ember { background: linear-gradient(135deg, #F97316 0%, #FDBA74 50%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .btn-ember { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); color: white; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .btn-ember:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 115, 22, 0.35); }
+        .card-surface { background: var(--card-bg); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+        .theme-toggle { width: 56px; height: 28px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.3s ease; }
+        .theme-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F97316, #FB923C); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
+        [data-theme="light"] .theme-toggle::after { transform: translateX(28px); background: linear-gradient(135deg, #06B6D4, #22D3EE); }
+        .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; transition: opacity 0.3s ease; }
+        .theme-toggle .icon-sun { left: 6px; opacity: 1; }
+        .theme-toggle .icon-moon { right: 6px; opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-sun { opacity: 0.3; }
+        [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; }
+        ::selection { background: rgba(249, 115, 22, 0.25); color: inherit; }
+
+        .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
+        .compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
+        .compare-table thead th { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+        .compare-table tbody tr:hover { background: var(--bg-raised); }
+        .compare-table .feature-col { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
+        .compare-table .check { color: #22C55E; }
+        .compare-table .cross { color: #EF4444; }
+        .compare-table .partial { color: #F59E0B; }
+        .compare-table .batida-col { color: #F97316; font-weight: 600; }
+    </style>
+</head>
+<body class="antialiased">
+
+    <!-- NAVIGATION -->
+    <nav class="fixed w-full z-50 top-0 left-0 right-0 backdrop-blur-xl border-b" style="background: var(--bg-overlay); border-color: var(--border-color);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <a href="/pt-br" class="flex items-center gap-2 group">
+                    <div class="relative w-9 h-9 rounded-lg gradient-ember flex items-center justify-center font-bold text-lg text-white shadow-lg group-hover:scale-105 transition-transform">B</div>
+                    <span class="text-xl font-bold tracking-tight">Batida</span>
+                </a>
+                <div class="hidden md:flex items-center gap-8">
+                    <a href="/pt-br#features" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Recursos</a>
+                    <a href="/pt-br#pricing" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">Preços</a>
+                    <a href="/pt-br#faq" class="text-sm hover:text-ember-500 transition-colors" style="color: var(--text-secondary);">FAQ</a>
+                    <a href="/vs.pt-br" class="text-sm text-ember-500 font-medium">Comparar</a>
+                </div>
+                <div class="flex items-center gap-3">
+                    <button class="theme-toggle" onclick="toggleTheme()" aria-label="Alternar tema">
+                        <svg class="icon-sun" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
+                        <svg class="icon-moon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+                    </button>
+                    <a href="/vs" class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium hover:text-ember-500 transition-colors" style="color: var(--text-secondary);"><span>🌐</span> EN</a>
+                    <a href="{{APP_URL}}/signup" class="hidden sm:inline-flex px-4 py-2 rounded-lg text-sm font-semibold text-white btn-ember">Comece Grátis</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="pt-24 pb-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <!-- HEADER -->
+            <div class="text-center mb-12">
+                <h1 class="text-3xl sm:text-4xl font-bold mb-4">
+                    Batida vs <span class="gradient-text-ember">PagerDuty</span> vs Grafana OnCall
+                </h1>
+                <p class="text-lg max-w-2xl mx-auto" style="color: var(--text-secondary);">
+                    Comparação detalhada de recursos para equipes avaliando ferramentas de gerenciamento de incidentes — especialmente no Brasil.
+                </p>
+            </div>
+
+            <!-- COMPARISON TABLE -->
+            <div class="card-surface rounded-2xl overflow-hidden mb-12">
+                <div class="overflow-x-auto">
+                    <table class="compare-table">
+                        <thead>
+                            <tr>
+                                <th class="feature-col">Recurso</th>
+                                <th class="batida-col">Batida</th>
+                                <th>PagerDuty</th>
+                                <th>Grafana OnCall</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="feature-col">Preço (Pro)</td>
+                                <td class="batida-col">R$59/seat/mês</td>
+                                <td>~R$300+/seat/mês</td>
+                                <td>Grátis (self-hosted)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Idioma</td>
+                                <td class="batida-col">PT-BR nativo</td>
+                                <td>Apenas EN</td>
+                                <td>Apenas EN</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">LGPD</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Nativo</td>
+                                <td><span class="partial">&#9679;</span> Add-on extra</td>
+                                <td><span class="cross">&#10007;</span> Manual</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Escala de Plantão</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Add-on</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Políticas de Escalação</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Postmortem com IA</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="cross">&#10007;</span> Não disponível</td>
+                                <td><span class="cross">&#10007;</span> Não disponível</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Status Pages</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="partial">&#9679;</span> Extra (StatusPage.io)</td>
+                                <td><span class="partial">&#9679;</span> Plugin</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Comentários em Incidentes</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Incluído</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Logs de Auditoria</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Incluído</td>
+                                <td><span class="check">&#10003;</span> Apenas Enterprise</td>
+                                <td><span class="partial">&#9679;</span> Limitado</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Open Source</td>
+                                <td class="batida-col"><span class="partial">&#9679;</span> Módulos core</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="check">&#10003;</span> Sim (AGPL)</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">PIX / Boleto</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Sim</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                            </tr>
+                            <tr>
+                                <td class="feature-col">Suporte Brasileiro</td>
+                                <td class="batida-col"><span class="check">&#10003;</span> Nativo</td>
+                                <td><span class="cross">&#10007;</span> Não</td>
+                                <td><span class="cross">&#10007;</span> Comunidade</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- BOTTOM CTA -->
+            <div class="text-center">
+                <a href="{{APP_URL}}/signup" class="inline-flex px-8 py-3 rounded-xl text-lg font-semibold text-white btn-ember">
+                    Comece Grátis — Sem Cartão de Crédito
+                </a>
+                <p class="mt-4 text-sm" style="color: var(--text-muted);">
+                    Plano gratuito inclui 5 seats, 50 incidentes/mês. Faça upgrade quando quiser.
+                </p>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- FOOTER -->
+    <footer class="border-t py-12" style="border-color: var(--border-color); background: var(--bg-secondary);">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-8 h-8 rounded-lg gradient-ember flex items-center justify-center font-bold text-white text-sm">B</div>
+                <span class="text-lg font-bold" style="color: var(--text-primary);">Batida</span>
+            </div>
+            <p class="text-xs" style="color: var(--text-muted);">&copy; 2026 Batida IO Ltda.</p>
+        </div>
+    </footer>
+
+    <script>
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('batida-theme', newTheme);
+        }
+        (function() {
+            const saved = localStorage.getItem('batida-theme');
+            if (saved) { document.documentElement.setAttribute('data-theme', saved); }
+            else if (window.matchMedia('(prefers-color-scheme: light)').matches) { document.documentElement.setAttribute('data-theme', 'light'); }
+        })();
+    </script>
+</body>
+</html>