From bd2a063e39d1f20f781e5abf9bcc7d435dc04279 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:38:23 +0700
Subject: [PATCH] Restyle whitepaper to match site UI

---
 app/pages/whitepaper.vue | 986 ++++++++++++---------------------------
 1 file changed, 297 insertions(+), 689 deletions(-)

diff --git a/app/pages/whitepaper.vue b/app/pages/whitepaper.vue
index 95b25c7..eaa9966 100644
--- a/app/pages/whitepaper.vue
+++ b/app/pages/whitepaper.vue
@@ -1,716 +1,324 @@
 <template>
-  <div class="whitepaper">
-    <div class="grain" aria-hidden="true"></div>
-    <header class="hero">
-      <nav class="nav">
-        <div class="logo">Optovia</div>
-        <div class="nav-actions">
-          <button
-            class="lang-toggle"
-            :class="{ active: lang === 'ru' }"
-            @click="lang = 'ru'"
-          >
-            RU
-          </button>
-          <button
-            class="lang-toggle"
-            :class="{ active: lang === 'en' }"
-            @click="lang = 'en'"
-          >
-            EN
-          </button>
-          <button class="cta">Запросить демо</button>
-        </div>
-      </nav>
+  <div class="pb-16">
+    <section class="container mx-auto px-4 mt-10">
+      <div class="rounded-3xl bg-base-200/70 border border-base-300/70 p-8 md:p-12 relative overflow-hidden">
+        <div class="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/20 blur-3xl" />
+        <div class="absolute -bottom-28 -left-20 h-72 w-72 rounded-full bg-secondary/20 blur-3xl" />
 
-      <div class="hero-grid">
-        <div class="hero-text">
-          <div class="eyebrow">White Paper</div>
-          <h1>Инфраструктура цифровых инструментов, которая стирает границы</h1>
-          <p class="lead">
-            Optovia — платформа, которая помогает участникам рынка получать
-            первоклассные цифровые инструменты и выстраивать процессы KYC и
-            мониторинга как единую, прозрачную систему.
-          </p>
-          <div class="hero-actions">
-            <button class="cta">Скачать PDF</button>
-            <button class="ghost">Связаться с командой</button>
+        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6 relative">
+          <div>
+            <div class="text-xs uppercase tracking-[0.3em] text-base-content/50 mb-4">White paper</div>
+            <h1 class="text-3xl md:text-5xl font-bold text-base-content max-w-3xl">
+              {{ content.hero.title }}
+            </h1>
+            <p class="mt-5 text-lg text-base-content/70 max-w-2xl">
+              {{ content.hero.subtitle }}
+            </p>
+            <div class="mt-8 flex flex-wrap gap-3">
+              <button class="btn btn-primary">{{ content.hero.ctaPrimary }}</button>
+              <button class="btn btn-ghost border border-base-300">{{ content.hero.ctaSecondary }}</button>
+            </div>
           </div>
-          <div class="hero-meta">
-            <div class="meta-card">
-              <span class="meta-title">Фокус</span>
-              <span class="meta-value">KYC / Monitoring</span>
-            </div>
-            <div class="meta-card">
-              <span class="meta-title">Формат</span>
-              <span class="meta-value">B2B / API-first</span>
-            </div>
-            <div class="meta-card">
-              <span class="meta-title">Стадия</span>
-              <span class="meta-value">Private beta</span>
-            </div>
+
+          <div class="flex items-center gap-2">
+            <button
+              class="btn btn-xs"
+              :class="lang === 'ru' ? 'btn-primary' : 'btn-ghost'"
+              @click="lang = 'ru'"
+            >
+              RU
+            </button>
+            <button
+              class="btn btn-xs"
+              :class="lang === 'en' ? 'btn-primary' : 'btn-ghost'"
+              @click="lang = 'en'"
+            >
+              EN
+            </button>
           </div>
         </div>
-        <div class="hero-visual">
-          <div class="card flow-card">
-            <div class="card-header">
-              <span>Flow View</span>
-              <span class="pill">Live</span>
-            </div>
-            <div class="flow">
-              <div class="flow-node success">User</div>
-              <div class="flow-node success">Team</div>
-              <div class="flow-node success">KYC App</div>
-              <div class="flow-node warn">Temporo</div>
-              <div class="flow-node success">Business</div>
-              <div class="flow-node success">KSC Monitoring</div>
-              <div class="flow-node success">Daxter</div>
-            </div>
-            <div class="flow-footer">
-              <div>
-                <span class="badge ok"></span>В синке: 996
-              </div>
-              <div>
-                <span class="badge bad"></span>Не в синке: 4
-              </div>
+
+        <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="card bg-base-100 border border-base-300/60">
+            <div class="card-body p-5">
+              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[0].label }}</p>
+              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[0].value }}</p>
             </div>
           </div>
-          <div class="card stats-card">
-            <div class="stat">
-              <span class="label">Всего профилей</span>
-              <span class="value">1 000</span>
+          <div class="card bg-base-100 border border-base-300/60">
+            <div class="card-body p-5">
+              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[1].label }}</p>
+              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[1].value }}</p>
             </div>
-            <div class="stat">
-              <span class="label">Ошибки</span>
-              <span class="value error">4</span>
+          </div>
+          <div class="card bg-base-100 border border-base-300/60">
+            <div class="card-body p-5">
+              <p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[2].label }}</p>
+              <p class="text-lg font-semibold text-base-content">{{ content.hero.cards[2].value }}</p>
             </div>
           </div>
         </div>
       </div>
-    </header>
+    </section>
 
-    <main>
-      <section v-if="lang === 'ru'" class="section" id="ru">
-        <div class="section-header">
-          <h2>О платформе</h2>
-          <p>
-            Мы строим инфраструктуру, которая делает цифровые процессы понятными,
-            управляемыми и доверенными. Optovia связывает команды, данные и
-            комплаенс в единый контур.
-          </p>
-        </div>
-        <div class="grid two">
-          <div class="card">
-            <h3>Проблема рынка</h3>
-            <ul>
-              <li>Сложные KYC-процессы разорваны по системам</li>
-              <li>Низкая наблюдаемость и нет единого статуса</li>
-              <li>Высокая доля ручных действий и человеческий фактор</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>Наше решение</h3>
-            <ul>
-              <li>Единый пайплайн KYC и мониторинга</li>
-              <li>Прозрачный статус актуальности данных</li>
-              <li>API-first подход и гибкие интеграции</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'ru'" class="section">
-        <div class="section-header">
-          <h2>Как это работает</h2>
-          <p>
-            Прозрачный процесс с контролем статусов и истории на каждом шаге.
-          </p>
-        </div>
-        <div class="timeline">
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Создание команды</h4>
-              <p>Пользователь создает команду и инициирует KYC application.</p>
-            </div>
-          </div>
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Процессинг</h4>
-              <p>Temporo запускает процедуру и передает управление бизнес-этапам.</p>
-            </div>
-          </div>
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Мониторинг</h4>
-              <p>KSC Monitoring фиксирует состояние, Daxter следит за актуальностью.</p>
+    <section class="container mx-auto px-4 mt-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card bg-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h2 class="card-title text-2xl">{{ content.vision.title }}</h2>
+            <p class="text-base-content/70">{{ content.vision.body }}</p>
+            <div class="mt-4 space-y-3">
+              <div class="flex items-start gap-3">
+                <Icon name="lucide:sparkles" class="text-primary" />
+                <div>
+                  <p class="font-semibold">{{ content.vision.points[0].title }}</p>
+                  <p class="text-sm text-base-content/60">{{ content.vision.points[0].text }}</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-3">
+                <Icon name="lucide:globe" class="text-primary" />
+                <div>
+                  <p class="font-semibold">{{ content.vision.points[1].title }}</p>
+                  <p class="text-sm text-base-content/60">{{ content.vision.points[1].text }}</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-3">
+                <Icon name="lucide:layers" class="text-primary" />
+                <div>
+                  <p class="font-semibold">{{ content.vision.points[2].title }}</p>
+                  <p class="text-sm text-base-content/60">{{ content.vision.points[2].text }}</p>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </section>
 
-      <section v-if="lang === 'ru'" class="section">
-        <div class="section-header">
-          <h2>Технологии</h2>
-          <p>Сильная инженерия, измеримость и надежность.</p>
-        </div>
-        <div class="grid three">
-          <div class="card">
-            <h3>Архитектура</h3>
-            <p>Микросервисы, событийная оркестрация, масштабирование по нагрузке.</p>
-          </div>
-          <div class="card">
-            <h3>Наблюдаемость</h3>
-            <p>Метрики, трассировка, алерты. Понимаем, где узкие места.</p>
-          </div>
-          <div class="card">
-            <h3>Данные</h3>
-            <p>PostgreSQL и MongoDB как основа для надежного хранения и поиска.</p>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'ru'" class="section">
-        <div class="section-header">
-          <h2>Безопасность</h2>
-          <p>Доступ, токены и аудит — встроены в архитектуру.</p>
-        </div>
-        <div class="grid two">
-          <div class="card">
-            <h3>Контроль доступа</h3>
-            <ul>
-              <li>m2m-токены</li>
-              <li>Изоляция сервисов</li>
-              <li>Аудит действий</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>Надежность</h3>
-            <ul>
-              <li>Failover и очереди</li>
-              <li>Восстановление процессов</li>
-              <li>История событий</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'ru'" class="section">
-        <div class="section-header">
-          <h2>Roadmap</h2>
-          <p>Черновик, дополним вместе.</p>
-        </div>
-        <div class="grid three">
-          <div class="card">
-            <h3>Q1</h3>
-            <p>Private beta + пилоты с партнерами.</p>
-          </div>
-          <div class="card">
-            <h3>Q2</h3>
-            <p>Автоматизация мониторинга, алерты, отчеты.</p>
-          </div>
-          <div class="card">
-            <h3>Q3</h3>
-            <p>Масштабирование и выход в новые вертикали.</p>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'en'" class="section" id="en">
-        <div class="section-header">
-          <h2>About the platform</h2>
-          <p>
-            We build infrastructure that makes digital processes transparent and
-            trusted. Optovia connects teams, data, and compliance into a single
-            system.
-          </p>
-        </div>
-        <div class="grid two">
-          <div class="card">
-            <h3>Market problem</h3>
-            <ul>
-              <li>KYC processes are fragmented</li>
-              <li>Low observability and no single status view</li>
-              <li>Heavy manual work and human error</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>Our solution</h3>
-            <ul>
-              <li>Unified KYC & monitoring pipeline</li>
-              <li>Clear profile freshness status</li>
-              <li>API-first integrations</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'en'" class="section" id="en-more">
-        <div class="section-header">
-          <h2>How it works</h2>
-          <p>Transparent flow with status control at each step.</p>
-        </div>
-        <div class="timeline">
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Team creation</h4>
-              <p>User creates a team and submits a KYC application.</p>
+        <div class="card bg-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h2 class="card-title text-2xl">{{ content.mission.title }}</h2>
+            <p class="text-base-content/70">{{ content.mission.body }}</p>
+            <div class="mt-6 grid grid-cols-1 gap-3">
+              <div class="rounded-2xl bg-base-200/70 p-4">
+                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[0].label }}</p>
+                <p class="text-lg font-semibold">{{ content.mission.cards[0].value }}</p>
+              </div>
+              <div class="rounded-2xl bg-base-200/70 p-4">
+                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[1].label }}</p>
+                <p class="text-lg font-semibold">{{ content.mission.cards[1].value }}</p>
+              </div>
+              <div class="rounded-2xl bg-base-200/70 p-4">
+                <p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[2].label }}</p>
+                <p class="text-lg font-semibold">{{ content.mission.cards[2].value }}</p>
+              </div>
             </div>
           </div>
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Processing</h4>
-              <p>Temporo orchestrates the procedure and business steps.</p>
-            </div>
-          </div>
-          <div class="step">
-            <div class="dot"></div>
-            <div>
-              <h4>Monitoring</h4>
-              <p>KSC Monitoring stores state, Daxter tracks freshness.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'en'" class="section" id="en-tech">
-        <div class="section-header">
-          <h2>Technology</h2>
-          <p>Strong engineering, measurable outcomes, reliability.</p>
-        </div>
-        <div class="grid three">
-          <div class="card">
-            <h3>Architecture</h3>
-            <p>Microservices, event-driven orchestration, scalable design.</p>
-          </div>
-          <div class="card">
-            <h3>Observability</h3>
-            <p>Metrics, tracing, alerts. We see bottlenecks early.</p>
-          </div>
-          <div class="card">
-            <h3>Data</h3>
-            <p>PostgreSQL and MongoDB as the reliable data backbone.</p>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'en'" class="section" id="en-security">
-        <div class="section-header">
-          <h2>Security</h2>
-          <p>Access control, tokens, and audit built in.</p>
-        </div>
-        <div class="grid two">
-          <div class="card">
-            <h3>Access control</h3>
-            <ul>
-              <li>m2m tokens</li>
-              <li>Service isolation</li>
-              <li>Audit trail</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>Reliability</h3>
-            <ul>
-              <li>Failover and queues</li>
-              <li>Process recovery</li>
-              <li>Event history</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <section v-if="lang === 'en'" class="section" id="en-roadmap">
-        <div class="section-header">
-          <h2>Roadmap</h2>
-          <p>Draft, we will refine together.</p>
-        </div>
-        <div class="grid three">
-          <div class="card">
-            <h3>Q1</h3>
-            <p>Private beta + partner pilots.</p>
-          </div>
-          <div class="card">
-            <h3>Q2</h3>
-            <p>Monitoring automation, alerts, reporting.</p>
-          </div>
-          <div class="card">
-            <h3>Q3</h3>
-            <p>Scale and expand into new verticals.</p>
-          </div>
-        </div>
-      </section>
-    </main>
-
-    <footer class="footer">
-      <div class="footer-content">
-        <div>
-          <div class="logo">Optovia</div>
-          <p>White Paper v0.1</p>
-        </div>
-        <div>
-          <p>Контакты: <span class="muted">to be added</span></p>
-          <p>Команда: <span class="muted">to be added</span></p>
         </div>
       </div>
-    </footer>
+    </section>
+
+    <section class="container mx-auto px-4 mt-16">
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h3 class="text-xl font-semibold">{{ content.principles[0].title }}</h3>
+            <p class="text-base-content/70">{{ content.principles[0].text }}</p>
+          </div>
+        </div>
+        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h3 class="text-xl font-semibold">{{ content.principles[1].title }}</h3>
+            <p class="text-base-content/70">{{ content.principles[1].text }}</p>
+          </div>
+        </div>
+        <div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h3 class="text-xl font-semibold">{{ content.principles[2].title }}</h3>
+            <p class="text-base-content/70">{{ content.principles[2].text }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="container mx-auto px-4 mt-16">
+      <div class="rounded-3xl bg-base-100 border border-base-300/60 p-8 md:p-12">
+        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+          <div>
+            <h2 class="text-2xl md:text-3xl font-bold">{{ content.trust.title }}</h2>
+            <p class="mt-4 text-base-content/70 max-w-2xl">{{ content.trust.body }}</p>
+          </div>
+          <div class="grid grid-cols-1 gap-3 w-full max-w-sm">
+            <div class="rounded-2xl bg-base-200/70 p-4">
+              <p class="text-sm text-base-content/60">{{ content.trust.items[0] }}</p>
+            </div>
+            <div class="rounded-2xl bg-base-200/70 p-4">
+              <p class="text-sm text-base-content/60">{{ content.trust.items[1] }}</p>
+            </div>
+            <div class="rounded-2xl bg-base-200/70 p-4">
+              <p class="text-sm text-base-content/60">{{ content.trust.items[2] }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="container mx-auto px-4 mt-16">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="card bg-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h3 class="text-xl font-semibold">{{ content.team.title }}</h3>
+            <p class="text-base-content/60">{{ content.team.body }}</p>
+          </div>
+        </div>
+        <div class="card bg-base-100 border border-base-300/60">
+          <div class="card-body">
+            <h3 class="text-xl font-semibold">{{ content.roadmap.title }}</h3>
+            <ul class="mt-3 space-y-2 text-base-content/70">
+              <li v-for="item in content.roadmap.items" :key="item">• {{ item }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="container mx-auto px-4 mt-16">
+      <div class="rounded-3xl bg-gradient-to-r from-primary/80 via-secondary/70 to-accent/80 text-primary-content p-10 md:p-14">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+          <div>
+            <h2 class="text-2xl md:text-3xl font-bold">{{ content.cta.title }}</h2>
+            <p class="mt-2 text-primary-content/80">{{ content.cta.body }}</p>
+          </div>
+          <button class="btn bg-base-100 text-base-content border-0">{{ content.cta.button }}</button>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-const lang = ref<'ru' | 'en'>('ru');
+const lang = ref<'ru' | 'en'>('ru')
 
-definePageMeta({
-  layout: false,
-});
+const copy = {
+  ru: {
+    hero: {
+      title: 'Инфраструктура цифровых инструментов, которая стирает границы',
+      subtitle:
+        'Optovia строит единое пространство для участников рынка: чтобы процессы были прозрачными, доверенными и простыми, а команды могли работать быстрее и безопаснее.',
+      ctaPrimary: 'Запросить демо',
+      ctaSecondary: 'Связаться с командой',
+      cards: [
+        { label: 'Идея', value: 'Стираем границы и упрощаем рынок' },
+        { label: 'Подход', value: 'Инфраструктура вместо точечных продуктов' },
+        { label: 'Форма', value: 'B2B / API-first / экосистема' },
+      ],
+    },
+    vision: {
+      title: 'Видение',
+      body:
+        'Мы делаем инфраструктуру, которая позволяет компаниям быстрее доверять друг другу и прозрачнее работать с данными. Наша цель — убрать шум, убрать барьеры и дать рынку работающий цифровой фундамент.',
+      points: [
+        { title: 'Стираем границы', text: 'Объединяем процессы и участников рынка в единый контур.' },
+        { title: 'Делаем проще', text: 'Снижаем сложность и убираем ручные операции.' },
+        { title: 'Строим фундамент', text: 'Даем основу, на которой бизнес может расти.' },
+      ],
+    },
+    mission: {
+      title: 'Что мы строим',
+      body:
+        'Optovia — это инфраструктура для цифровых операций: от доверия и безопасности до мониторинга и прозрачности.',
+      cards: [
+        { label: 'Единая экосистема', value: 'Команды, данные, процессы — в одной системе.' },
+        { label: 'Прозрачность', value: 'Статусы и история действий в реальном времени.' },
+        { label: 'Масштабируемость', value: 'Подходит для компаний любого размера.' },
+      ],
+    },
+    principles: [
+      { title: 'Прозрачность', text: 'Каждый процесс наблюдаем и измерим.' },
+      { title: 'Надежность', text: 'Стабильная инфраструктура и контроль рисков.' },
+      { title: 'Скорость', text: 'Ускоряем рутину и даем бизнесу скорость решений.' },
+    ],
+    trust: {
+      title: 'Доверие и безопасность',
+      body:
+        'Мы строим технологию, которая поддерживает надежность на всех уровнях — от доступа до мониторинга данных. Безопасность не отдельный слой, а часть ДНК платформы.',
+      items: [
+        'Токены и изоляция сервисов',
+        'Аудит действий и история событий',
+        'Контроль доступа и права команд',
+      ],
+    },
+    team: {
+      title: 'Команда',
+      body: 'Скоро добавим блок о команде и опыте. (заглушка)',
+    },
+    roadmap: {
+      title: 'Roadmap',
+      items: ['Private beta и пилоты', 'Усиление мониторинга и алертов', 'Масштабирование и новые вертикали'],
+    },
+    cta: {
+      title: 'Хотите узнать больше?',
+      body: 'Расскажем о платформе и покажем, как Optovia может помочь вашему бизнесу.',
+      button: 'Связаться',
+    },
+  },
+  en: {
+    hero: {
+      title: 'Infrastructure for digital tools that removes borders',
+      subtitle:
+        'Optovia builds a shared space for market participants: transparent, trusted, and simple processes that let teams move faster and safer.',
+      ctaPrimary: 'Request demo',
+      ctaSecondary: 'Contact team',
+      cards: [
+        { label: 'Idea', value: 'Remove borders and simplify the market' },
+        { label: 'Approach', value: 'Infrastructure, not isolated products' },
+        { label: 'Form', value: 'B2B / API-first / ecosystem' },
+      ],
+    },
+    vision: {
+      title: 'Vision',
+      body:
+        'We build infrastructure that helps companies trust each other faster and work with data more transparently. Our goal is to remove noise, remove barriers, and deliver a working digital foundation.',
+      points: [
+        { title: 'Remove borders', text: 'Unite processes and participants into one flow.' },
+        { title: 'Make it simple', text: 'Reduce complexity and manual actions.' },
+        { title: 'Build the foundation', text: 'Give the market a reliable base to grow.' },
+      ],
+    },
+    mission: {
+      title: 'What we build',
+      body:
+        'Optovia is infrastructure for digital operations: from trust and safety to monitoring and transparency.',
+      cards: [
+        { label: 'Unified ecosystem', value: 'Teams, data, and processes in one system.' },
+        { label: 'Transparency', value: 'Statuses and history in real time.' },
+        { label: 'Scalability', value: 'Fits businesses of any size.' },
+      ],
+    },
+    principles: [
+      { title: 'Transparency', text: 'Every process is observable and measurable.' },
+      { title: 'Reliability', text: 'Stable infrastructure and risk control.' },
+      { title: 'Speed', text: 'Faster operations and decision making.' },
+    ],
+    trust: {
+      title: 'Trust & security',
+      body:
+        'Security is embedded in the platform DNA: access, monitoring, and auditability built-in from day one.',
+      items: ['Tokens and service isolation', 'Audit trails and event history', 'Access control and team permissions'],
+    },
+    team: {
+      title: 'Team',
+      body: 'We will add the team and experience section soon. (placeholder)',
+    },
+    roadmap: {
+      title: 'Roadmap',
+      items: ['Private beta and pilots', 'Monitoring and alerts expansion', 'Scaling and new verticals'],
+    },
+    cta: {
+      title: 'Want to learn more?',
+      body: 'We will show how Optovia can help your business.',
+      button: 'Contact us',
+    },
+  },
+} as const
+
+const content = computed(() => copy[lang.value])
 </script>
-
-<style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
-
-:global(body) {
-  margin: 0;
-  font-family: 'IBM Plex Sans', sans-serif;
-  color: #13100f;
-  background: radial-gradient(circle at top left, #fef9f0 0%, #f5f1ea 55%, #efe7dd 100%);
-}
-
-.whitepaper {
-  position: relative;
-}
-
-.grain {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0.35;
-  mix-blend-mode: multiply;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
-}
-
-.hero {
-  padding: 48px 72px 80px;
-  background: linear-gradient(135deg, rgba(31, 91, 158, 0.08), rgba(232, 123, 42, 0.05));
-  border-bottom: 1px solid rgba(19, 16, 15, 0.12);
-}
-
-.nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 48px;
-}
-
-.logo {
-  font-family: 'Fraunces', serif;
-  font-size: 28px;
-  letter-spacing: 0.02em;
-}
-
-.nav-actions {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.lang-toggle {
-  border: 1px solid rgba(19, 16, 15, 0.12);
-  background: transparent;
-  padding: 6px 10px;
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 12px;
-  letter-spacing: 0.08em;
-}
-
-.lang-toggle.active {
-  background: #13100f;
-  color: white;
-}
-
-.cta {
-  background: #1f5b9e;
-  color: white;
-  border: none;
-  padding: 10px 16px;
-  border-radius: 12px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.ghost {
-  background: transparent;
-  border: 1px solid #13100f;
-  padding: 10px 16px;
-  border-radius: 12px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.hero-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 48px;
-  align-items: center;
-}
-
-.hero-text h1 {
-  font-family: 'Fraunces', serif;
-  font-size: 48px;
-  line-height: 1.1;
-  margin: 8px 0 20px;
-}
-
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  font-size: 12px;
-  color: #6c6661;
-}
-
-.lead {
-  font-size: 18px;
-  color: #6c6661;
-  max-width: 520px;
-}
-
-.hero-actions {
-  margin-top: 24px;
-  display: flex;
-  gap: 16px;
-}
-
-.hero-meta {
-  margin-top: 32px;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.meta-card {
-  background: #ffffff;
-  border: 1px solid rgba(19, 16, 15, 0.12);
-  padding: 12px 14px;
-  border-radius: 12px;
-}
-
-.meta-title {
-  display: block;
-  font-size: 11px;
-  color: #6c6661;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.meta-value {
-  font-weight: 600;
-}
-
-.hero-visual {
-  display: grid;
-  gap: 16px;
-}
-
-.card {
-  background: #ffffff;
-  border-radius: 20px;
-  padding: 20px;
-  border: 1px solid rgba(19, 16, 15, 0.12);
-  box-shadow: 0 20px 60px rgba(15, 17, 19, 0.15);
-}
-
-.flow-card {
-  padding: 20px 24px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-  color: #6c6661;
-}
-
-.pill {
-  background: #e7f3ff;
-  color: #1f5b9e;
-  font-size: 11px;
-  padding: 4px 8px;
-  border-radius: 999px;
-}
-
-.flow {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin: 18px 0;
-}
-
-.flow-node {
-  text-align: center;
-  padding: 10px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  border: 1px solid rgba(19, 16, 15, 0.12);
-  background: #f9f7f3;
-}
-
-.flow-node.success {
-  border-color: rgba(31, 91, 158, 0.4);
-}
-
-.flow-node.warn {
-  border-color: rgba(232, 123, 42, 0.6);
-  background: rgba(232, 123, 42, 0.08);
-}
-
-.flow-footer {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #6c6661;
-}
-
-.badge {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 6px;
-}
-
-.badge.ok {
-  background: #1f5b9e;
-}
-
-.badge.bad {
-  background: #e23b2a;
-}
-
-.stats-card {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.stat {
-  background: #f9f7f3;
-  border-radius: 14px;
-  padding: 14px;
-}
-
-.label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #6c6661;
-}
-
-.value {
-  display: block;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.value.error {
-  color: #e23b2a;
-}
-
-.section {
-  padding: 72px;
-}
-
-.section-header {
-  max-width: 640px;
-  margin-bottom: 32px;
-}
-
-.section-header h2 {
-  font-family: 'Fraunces', serif;
-  font-size: 34px;
-  margin-bottom: 12px;
-}
-
-.grid {
-  display: grid;
-  gap: 20px;
-}
-
-.grid.two {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid.three {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.timeline {
-  display: grid;
-  gap: 18px;
-}
-
-.step {
-  display: grid;
-  grid-template-columns: 22px 1fr;
-  gap: 16px;
-  align-items: start;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #1f5b9e;
-  margin-top: 6px;
-}
-
-.footer {
-  padding: 40px 72px 60px;
-  border-top: 1px solid rgba(19, 16, 15, 0.12);
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #6c6661;
-}
-
-.muted {
-  color: #6c6661;
-  font-style: italic;
-}
-
-@media (max-width: 980px) {
-  .hero {
-    padding: 36px 24px 60px;
-  }
-
-  .hero-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-text h1 {
-    font-size: 36px;
-  }
-
-  .section {
-    padding: 52px 24px;
-  }
-
-  .grid.two,
-  .grid.three {
-    grid-template-columns: 1fr;
-  }
-
-  .footer-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-  }
-}
-</style>