update 1.2

2025-05-04 16:09:55 +00:00
parent 93e4c9297d
commit d74bae32b8
20 changed files with 411 additions and 195 deletions
--- a/README.md
+++ b/README.md
@@ -19,19 +19,21 @@

 ## Быстрый старт

-1. Убедитесь, что у вас установлен Docker
+1. Убедитесь, что у вас установлен Docker.
 2. Запустите проект командой:
 ```bash
-docker-compose up
+docker-compose up -d
 ```
 3. Откройте в браузере: http://localhost

 ## Структура проекта

 Основные директории:
- `lang/` - файлы для разных языков
- `css/` - стили
- `js/` - скрипты
+- `lang/` - файлы для разных языков (JSON и HTML)
+- `css/` - стили (включая Tailwind CSS)
+- `js/` - скрипты (включая ECharts)
 - `images/` - изображения
+- `items/` - HTML файлы для "Флипбука"
+- `pages/` - HTML файлы основных страниц (например, FAQ, Products)

 Подробное описание структуры смотрите в [project_description.md](project_description.md).
--- a/index.html
+++ b/index.html
@@ -37,6 +37,7 @@
      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
    </nav>
    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      Заказать сейчас
@@ -159,7 +160,7 @@
          <p class="text-gray-300 mb-4 product-description">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(1)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -177,7 +178,7 @@
          <p class="text-gray-300 mb-4 product-description">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(2)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -195,7 +196,7 @@
          <p class="text-gray-300 mb-4 product-description">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(3)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-4gb.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -213,7 +214,7 @@
          <p class="text-gray-300 mb-4 product-description">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(4)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-workstation.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -231,7 +232,7 @@
          <p class="text-gray-300 mb-4 product-description">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(5)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-ai.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -249,7 +250,7 @@
          <p class="text-gray-300 mb-4 product-description">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(6)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-shop.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -287,15 +288,6 @@
    <div class="mt-6 text-gray-300 text-base">Действительно до <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1&nbsp;июня 2025</span> или пока не кончится запас.</div>
  </section>
  
-  <!-- PRODUCT DETAILS MODAL -->
-  <div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
-    <div class="modal-content relative">
-      <span class="modal-close" onclick="hideProductDetails()">&times;</span>
-      <h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
-      <p id="modalDescription" class="text-gray-300 mb-6"></p>
-      <button class="w-full py-3 buy-btn text-lg modal-buy-btn">Купить сейчас</button>
-    </div>
-  </div>

  <!-- TESTIMONIALS -->
  <section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
@@ -344,9 +336,57 @@
      <span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
    </div>
  </footer>
+
+  <!-- PRODUCT DETAILS MODAL -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Купить сейчас</button>
+    </div>
+  </div>
+
+  <!-- CRYPTO PAYMENT MODAL -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Оплата криптовалютой</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="LTC QR код" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Сумма к оплате: [Сумма]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Инструкция по оплате:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Откройте крипто-кошелек на вашем устройстве</li>
+              <li>2. Нажмите "Отправить" и выберите крипто-кошелекLTC</li>
+              <li>3. Отсканируйте соответствующий QR-код</li>
+              <li>4. Укажите точную сумму</li>
+              <li>5. Подтвердите транзакцию</li>
+              <li>6. После подтверждения сети (обычно 2-5 min) ваш заказ будет обработан</li>
+              <li>7. Войдите в наш телеграмм бот и введите 3 параметра, кошелк с которого вы отправили деньги, точное время и точную сумму, бот вам вышлет доступ в личный кабинет.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
  <script src="/js/features.js"></script>
+  <script src="/js/flipbook.js"></script>
  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
--- a/items/boxes/blackbox-4gb.html
+++ b/items/boxes/blackbox-4gb.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/blackbox-ai.html
+++ b/items/boxes/blackbox-ai.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/blackbox-privacy.html
+++ b/items/boxes/blackbox-privacy.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/blackbox-shop.html
+++ b/items/boxes/blackbox-shop.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/blackbox-vpn.html
+++ b/items/boxes/blackbox-vpn.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/blackbox-workstation.html
+++ b/items/boxes/blackbox-workstation.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/boxes/template.html
+++ b/items/boxes/template.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/anonymous-email.html
+++ b/items/services/anonymous-email.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/cloud-storage.html
+++ b/items/services/cloud-storage.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/crypto-wallet.html
+++ b/items/services/crypto-wallet.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/data-protection.html
+++ b/items/services/data-protection.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/decentralized-hosting.html
+++ b/items/services/decentralized-hosting.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/private-chat.html
+++ b/items/services/private-chat.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/items/services/template.html
+++ b/items/services/template.html
@@ -15,9 +15,13 @@
      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
    </a>
-    <a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
-      <i class="fas fa-arrow-left mr-2"></i>Назад к сервисам
-    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
+    </nav>
  </header>

  <main class="container mx-auto px-4 py-8">
--- a/lang/en/index.html
+++ b/lang/en/index.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <title>BlackBox – Privacy and Security Ecosystem</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
-  <meta name="description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations. Deep dynamic comparison - in one device.">
+  <meta name="description" content="BlackBox — physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations. Deep dynamic comparison — all in one device.">
  <meta name="keywords" content="BlackBox, privacy, security, VPN, ecosystem, router, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations">
  <link href="/css/tailwind.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
@@ -13,16 +13,16 @@
  <link rel="stylesheet" href="/css/style.css">
 <!-- Open Graph Meta Tags for Social Media -->
  <meta property="og:title" content="BlackBox – Privacy and Security Ecosystem">
-  <meta property="og:description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
-  <meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
-  <meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
+  <meta property="og:description" content="BlackBox — physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
+  <meta property="og:image" content="/images/scales.webp">
+  <meta property="og:url" content="https://bbox.wtf">
  <meta property="og:type" content="website">
-
+  
  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="BlackBox – Privacy and Security Ecosystem">
-  <meta name="twitter:description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
-  <meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
+  <meta name="twitter:description" content="BlackBox — physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
+  <meta name="twitter:image" content="/images/scales.webp">
 </head>
 <body class="gradient-bg overflow-x-hidden">

@@ -37,6 +37,7 @@
      <a href="/en/#supercompare" class="hover:text-cyan-400 transition-colors">Comparison</a>
      <a href="/en/#pricing" class="hover:text-cyan-400 transition-colors">Pricing</a>
      <a href="/en/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonials</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Catalog</a>
    </nav>
    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      Order Now
@@ -44,18 +45,18 @@
    </a>
  </header>

-  <!-- HERO SECTION -->
+  <!-- MAIN SECTION -->
  <section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
    <div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
      <h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
-        <span class="font-montserrat-alternates font-medium">A complete</span><br class="hidden md:inline">
-        <span class="font-bebas-neue">ECOSYSTEM</span><br class="hidden lg:inline">
-        <span class="font-montserrat-alternates font-medium">of Privacy</span><br>
+        <span class="font-montserrat-alternates font-medium">Complete</span><br class="hidden md:inline">
+        <span class="font-bebas-neue">PRIVACY</span><br class="hidden lg:inline">
+        <span class="font-montserrat-alternates font-medium">Ecosystem</span><br>
        <span class="text-cyan-400 font-montserrat">in one device</span>
      </h1>
      <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
        BlackBox is not just a VPN.<br>
-        It is an innovative hardware solution that combines privacy, communication, and tracking blocking tools at a level impossible with ordinary VPN services and routers!
+        It's an innovative hardware solution that combines privacy tools, communication and tracking protection at a level impossible with regular VPN services and routers!
      </p>
      <div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
        <a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Buy with discount</a>
@@ -69,12 +70,12 @@
    <div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
      <span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
        <i class="fas fa-bolt text-yellow-300 mr-2"></i>
-        30% discount on pre-order until June 1!
+        30% discount on pre-orders until June 1st!
      </span>
    </div>
  </section>
-
-  <!-- DYNAMIC COMPARISON -->
+  
+  <!-- SUPER DYNAMIC COMPARISON -->
  <section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
    <h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
      Dynamic comparison:&nbsp;<span class="text-white">BlackBox</span> vs VPN and routers
@@ -82,7 +83,7 @@
    <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
      <span class="text-cyan-300 font-bold">BlackBox</span> is a <span class="underline">privacy ecosystem</span>. See how feature support expands compared to simple VPN services and hardware routers.
    </p>
-
+    
    <div class="glass-card shadow-3d p-8 mb-8">
      <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="col-span-1 font-bold text-gray-300 text-right pr-4">Features</div>
@@ -90,11 +91,11 @@
        <div class="col-span-1 font-bold text-blue-400 text-center">VPN Router</div>
        <div class="col-span-1 font-bold text-purple-400 text-center">VPN Service</div>
      </div>
-
+      
      <div id="featuresContainer">
        <!-- Features will be inserted here by JS -->
      </div>
-
+      
      <div class="text-gray-400 mt-6 text-base">
        <i class="fas fa-info-circle text-cyan-300"></i>
        <span class="ml-1">Hover over a row to see details about each feature</span>
@@ -106,45 +107,45 @@

  <!-- FEATURES -->
  <section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
-    <h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ecosystem advantages</h2>
+    <h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ecosystem Advantages</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">All privacy tools</h3>
-        <p class="text-gray-300">VPN, messenger, email, files, wallet, and hosting - in one mini-computer. No more searching for separate services!</p>
+        <p class="text-gray-300">VPN, messenger, email, files, wallet and hosting — in one mini-computer. No need to search for separate services!</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Anonymous internet & darknet</h3>
-        <p class="text-gray-300">Secure access to all services, including onion and decentralized internet - even if they are blocked by your provider.</p>
+        <p class="text-gray-300">Secure access to all services, including onion and decentralized internet — even if blocked by your provider.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Personal secure messenger</h3>
-        <p class="text-gray-300">Your own platform for group and private chats without the risk of "leaks". All data is only yours!</p>
+        <p class="text-gray-300">Own platform for group and private chats without "leak" risks. All data stays with you!</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
-        <h3 class="font-bold text-xl mb-2">Anonymous email and file sharing</h3>
-        <p class="text-gray-300">Create an email address in 1 click, share files without intermediaries and censorship.</p>
+        <h3 class="font-bold text-xl mb-2">Anonymous email & file sharing</h3>
+        <p class="text-gray-300">Create email addresses in 1 click, share files without intermediaries or censorship.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Isolated crypto wallet</h3>
-        <p class="text-gray-300">Cold-wallet for storing and performing cryptocurrency operations with maximum isolation from internet threats.</p>
+        <p class="text-gray-300">Cold-wallet for storing and operating cryptocurrencies with maximum isolation from internet threats.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Platform for all devices</h3>
-        <p class="text-gray-300">BlackBox works for a single user, as well as for the whole family or business group. Unlimited number of connected devices.</p>
+        <p class="text-gray-300">BlackBox works for single users as well as families or business groups. Unlimited connected devices.</p>
      </div>
    </div>
  </section>

  <!-- PRODUCT SHOWCASE -->
  <section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
-    <h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">BlackBox Model Range</h2>
-
+    <h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">BlackBox Product Line</h2>
+    
    <div class="flipbook-container relative h-96 md:h-[36rem] w-full">
      <!-- BlackBox VPN (far left) -->
      <div class="flipbook-page" data-page="1">
@@ -156,10 +157,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>99 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Creates a secure VPN Wi-Fi access point. 512 MB RAM.</p>
+          <p class="text-gray-300 mb-4 product-description">Creates a Wi-Fi hotspot with protected VPN. 512 MB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(1)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -174,10 +175,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>199 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Integrated Matrix messenger or Nextcloud. 1 GB RAM. Full control over your data.</p>
+          <p class="text-gray-300 mb-4 product-description">Built-in Matrix Messenger or Nextcloud. 1 GB RAM. Full control over your data.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(2)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -192,10 +193,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>299 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">All functions of previous models + remote desktop (Workspace). 4 GB RAM.</p>
+          <p class="text-gray-300 mb-4 product-description">All features of first models + remote desktop (Workspace). 4 GB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(3)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-4gb.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -210,10 +211,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>499 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Complete workstation. All functions of previous models.</p>
+          <p class="text-gray-300 mb-4 product-description">Full workstation. All features of previous models.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(4)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-workstation.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -231,7 +232,7 @@
          <p class="text-gray-300 mb-4 product-description">Includes all BlackBox technologies. Private artificial intelligence. Maximum autonomy and protection.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(5)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-ai.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -246,10 +247,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
            <span>from 499 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Create a Telegram store via bot. Product upload, description, price. Payment via cryptocurrency. Total anonymity for seller and buyer.</p>
+          <p class="text-gray-300 mb-4 product-description">Create a Telegram store via bot. Upload products, descriptions, prices. Pay for goods with cryptocurrency. Complete anonymity for seller and buyer.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Buy</button>
-            <button onclick="showProductDetails(6)" class="details-btn product-details-btn">Details</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-shop.html'" class="details-btn product-details-btn">Details</button>
          </div>
        </div>
      </div>
@@ -266,36 +267,27 @@
    <div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      -30% Only now!
    </div>
-    <h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Order BlackBox WorkStation with a <span class="text-cyan-400">350&nbsp;USD</span> discount</h2>
-    <p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">One-time payment - no subscriptions.<br> Worldwide delivery. The number of devices on promotion is limited!</p>
+    <h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Order BlackBox WorkStation with <span class="text-cyan-400">350&nbsp;USD</span> discount</h2>
+    <p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">One-time payment — no subscriptions.<br> Worldwide shipping. Limited quantity available!</p>
    <div class="flex flex-wrap items-center justify-center gap-8 mb-7">
      <div class="text-left bg-gray-800/70 rounded-2xl p-6">
        <div class="text-2xl">
          <span class="text-cyan-400 font-bold">149&nbsp;USD</span>
          <span class="line-through text-gray-500 ml-2 text-lg">499&nbsp;USD</span>
        </div>
-        <div class="text-gray-400 text-xs mt-1">Special price for the first 10 buyers</div>
-        <div class="mt-3 text-base text-green-300 font-bold">+ Free update within a year</div>
+        <div class="text-gray-400 text-xs mt-1">Special price for first 10 buyers</div>
+        <div class="mt-3 text-base text-green-300 font-bold">+ Free updates for one year</div>
      </div>
      <ul class="text-left space-y-2 text-sm text-gray-200">
-        <li><i class="fas fa-check mr-2 text-cyan-400"></i>30-day money-back guarantee</li>
-        <li><i class="fas fa-check mr-2 text-cyan-400"></i>Worldwide delivery</li>
+        <li><i class="fas fa-check mr-2 text-cyan-400"></i>30-day money back guarantee</li>
+        <li><i class="fas fa-check mr-2 text-cyan-400"></i>Worldwide shipping</li>
        <li><i class="fas fa-check mr-2 text-cyan-400"></i>Personal support</li>
      </ul>
    </div>
-    <a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Order</a>
-    <div class="mt-6 text-gray-300 text-base">Valid until <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">June 1, 2025</span> or while supplies last.</div>
+    <a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Order Now</a>
+    <div class="mt-6 text-gray-300 text-base">Valid until <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">June&nbsp;1&nbsp;2025</span> or while supplies last.</div>
  </section>
-
-  <!-- PRODUCT DETAILS MODAL -->
-  <div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
-    <div class="modal-content relative">
-      <span class="modal-close" onclick="hideProductDetails()">&times;</span>
-      <h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
-      <p id="modalDescription" class="text-gray-300 mb-6"></p>
-      <button class="w-full py-3 buy-btn text-lg modal-buy-btn">Buy now</button>
-    </div>
-  </div>
+  

  <!-- TESTIMONIALS -->
  <section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
@@ -303,18 +295,18 @@
    <div class="grid md:grid-cols-3 gap-7 lg:gap-12">
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
-        <div class="mb-2 font-bold text-lg text-emerald-300">Andrey, startup founder</div>
+        <div class="mb-2 font-bold text-lg text-emerald-300">Andrew, startup founder</div>
        <div class="text-gray-300 italic">"BlackBox is the first gadget I trust with my personal data. No logs, fast operation, great for working from anywhere in the world."</div>
      </div>
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
        <div class="mb-2 font-bold text-lg text-cyan-300">Maria, mother</div>
-        <div class="text-gray-300 italic">"For us, BlackBox is a guarantee of internet security for the whole family. Even children can use it without any setup."</div>
+        <div class="text-gray-300 italic">"For us, BlackBox is a guarantee of internet safety for the whole family. Even children can use it without any setup."</div>
      </div>
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
        <div class="mb-2 font-bold text-lg text-purple-300">Vlad, programmer</div>
-        <div class="text-gray-300 italic">"Linux, open source, anonymity - everything works fast and thoughtfully. A great alternative to VPN services and routers."</div>
+        <div class="text-gray-300 italic">"Linux, open source, anonymity — everything works fast and thoughtfully. Great alternative to VPN services and routers."</div>
      </div>
    </div>
  </section>
@@ -336,18 +328,65 @@
    <div>
      <a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Support</a>
      &nbsp;|&nbsp;
-      <a href="/en/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
+      <a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
      &nbsp;|&nbsp;
-      <a href="https://bbox.rocks" class="hover:underline">Old unsupported website</a>
+      <a href="https://bbox.rocks" class="hover:underline">Old unsupported site</a>
    </div>
    <div class="mt-4">
-      <span class="text-gray-400">bbox.wtf - next-generation landing page: BlackBox is not just a VPN, it's an ecosystem and your digital privacy.</span>
+      <span class="text-gray-400">bbox.wtf — next generation landing: BlackBox is not just a VPN, it's an ecosystem and your digital privacy.</span>
    </div>
  </footer>
+
+  <!-- PRODUCT DETAILS MODAL -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Buy Now</button>
+    </div>
+  </div>
+
+  <!-- CRYPTO PAYMENT MODAL -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Crypto Payment</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="LTC QR code" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Payment amount: [Amount]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Payment instructions:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Open crypto wallet on your device</li>
+              <li>2. Click "Send" and select LTC wallet</li>
+              <li>3. Scan the corresponding QR code</li>
+              <li>4. Enter exact amount</li>
+              <li>5. Confirm transaction</li>
+              <li>6. After network confirmation (usually 2-5 min) your order will be processed</li>
+              <li>7. Log in to our Telegram bot and enter 3 parameters: sending wallet, exact time and exact amount, the bot will give you access to your personal account.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
  <script src="/js/features.js"></script>
  <script src="/js/flipbook.js"></script>
  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
@@ -355,7 +394,7 @@
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
-
+ 
    ym(55764994, "init", {
         clickmap:true,
         trackLinks:true,
--- a/lang/es/index.html
+++ b/lang/es/index.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <title>BlackBox – Ecosistema de Privacidad y Seguridad</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
-  <meta name="description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas. Comparación dinámica profunda - en un solo dispositivo.">
+  <meta name="description" content="BlackBox — dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas. Comparación dinámica profunda — todo en un solo dispositivo.">
  <meta name="keywords" content="BlackBox, privacidad, seguridad, VPN, ecosistema, router, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas">
  <link href="/css/tailwind.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
@@ -13,7 +13,7 @@
  <link rel="stylesheet" href="/css/style.css">
 <!-- Open Graph Meta Tags for Social Media -->
  <meta property="og:title" content="BlackBox – Ecosistema de Privacidad y Seguridad">
-  <meta property="og:description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
+  <meta property="og:description" content="BlackBox — dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
  <meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
  <meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
  <meta property="og:type" content="website">
@@ -21,7 +21,7 @@
  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="BlackBox – Ecosistema de Privacidad y Seguridad">
-  <meta name="twitter:description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
+  <meta name="twitter:description" content="BlackBox — dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
  <meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
 </head>
 <body class="gradient-bg overflow-x-hidden">
@@ -35,16 +35,17 @@
    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
      <a href="/es/#features" class="hover:text-cyan-400 transition-colors">Características</a>
      <a href="/es/#supercompare" class="hover:text-cyan-400 transition-colors">Comparación</a>
-      <a href="/es/#pricing" class="hover:text-cyan-400 transition-colors">Precios</a>
+      <a href="/es/#pricing" class="hover:text-cyan-400 transition-colors">Precio</a>
      <a href="/es/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonios</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Catálogo</a>
    </nav>
    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
-      Pedir Ahora
+      Ordenar ahora
      <i class="fas fa-lock ml-2"></i>
    </a>
  </header>

-  <!-- HERO SECTION -->
+  <!-- MAIN SECTION -->
  <section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
    <div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
      <h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
@@ -55,7 +56,7 @@
      </h1>
      <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
        BlackBox no es solo una VPN.<br>
-        ¡Es una solución de hardware innovadora que combina herramientas de privacidad, comunicación y bloqueo de seguimiento a un nivel imposible con los servicios VPN y routers ordinarios!
+        Es una solución de hardware innovadora que combina herramientas de privacidad, comunicación y bloqueo de rastreo a un nivel imposible con los servicios VPN y routers habituales.
      </p>
      <div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
        <a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Comprar con descuento</a>
@@ -69,18 +70,18 @@
    <div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
      <span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
        <i class="fas fa-bolt text-yellow-300 mr-2"></i>
-        ¡30% de descuento en pre-pedido hasta el 1 de junio!
+        ¡30% de descuento en pre-pedidos hasta el 1 de junio!
      </span>
    </div>
  </section>

-  <!-- DYNAMIC COMPARISON -->
+  <!-- COMPARACIÓN SUPER DINÁMICA -->
  <section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
    <h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
      Comparación dinámica:&nbsp;<span class="text-white">BlackBox</span> vs VPN y routers
    </h2>
    <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
-      <span class="text-cyan-300 font-bold">BlackBox</span> es un <span class="underline">ecosistema de privacidad</span>. Vea cómo se expande el soporte de funciones en comparación con los servicios VPN simples y los routers de hardware.
+      <span class="text-cyan-300 font-bold">BlackBox</span> es un <span class="underline">ecosistema de privacidad</span>. Vea cómo el soporte de funciones se expande en comparación con los servicios VPN simples y los routers de hardware.
    </p>

    <div class="glass-card shadow-3d p-8 mb-8">
@@ -97,53 +98,53 @@

      <div class="text-gray-400 mt-6 text-base">
        <i class="fas fa-info-circle text-cyan-300"></i>
-        <span class="ml-1">Pase el cursor sobre una fila para ver detalles sobre cada función</span>
+        <span class="ml-1">Pase el cursor sobre una fila para ver detalles sobre cada característica</span>
      </div>
      <div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
    </div>
  </section>


-  <!-- FEATURES -->
+  <!-- CARACTERÍSTICAS -->
  <section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
-    <h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ventajas del ecosistema</h2>
+    <h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ventajas del Ecosistema</h2>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Todas las herramientas de privacidad</h3>
-        <p class="text-gray-300">VPN, mensajero, correo electrónico, archivos, billetera y alojamiento, todo en una mini-computadora. ¡Ya no necesita buscar servicios separados!</p>
+        <p class="text-gray-300">VPN, mensajero, correo electrónico, archivos, billetera y alojamiento — en un mini-ordenador. ¡Ya no necesita buscar servicios separados!</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Internet anónimo y darknet</h3>
-        <p class="text-gray-300">Acceso seguro a todos los servicios, incluyendo onion e internet descentralizado, incluso si están bloqueados por su proveedor.</p>
+        <p class="text-gray-300">Acceso seguro a todos los servicios, incluyendo onion e internet descentralizado — incluso si están bloqueados por su proveedor.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
-        <h3 class="font-bold text-xl mb-2">Mensajero privado seguro</h3>
-        <p class="text-gray-300">Su propia plataforma para chats grupales y privados sin riesgo de "fugas". ¡Todos los datos son solo suyos!</p>
+        <h3 class="font-bold text-xl mb-2">Mensajero personal seguro</h3>
+        <p class="text-gray-300">Plataforma propia para chats grupales y privados sin riesgo de "fugas". ¡Todos los datos se quedan con usted!</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Correo electrónico anónimo y uso compartido de archivos</h3>
-        <p class="text-gray-300">Cree una dirección de correo electrónico en 1 clic, comparta archivos sin intermediarios ni censura.</p>
+        <p class="text-gray-300">Creación de direcciones de correo electrónico en 1 clic, uso compartido de archivos sin intermediarios ni censura.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Billetera criptográfica aislada</h3>
-        <p class="text-gray-300">Billetera fría para almacenar y realizar operaciones con criptomonedas con máxima aislamiento de las amenazas de internet.</p>
+        <p class="text-gray-300">Billetera fría para almacenar y operar con criptomonedas con máxima aislamiento de amenazas de internet.</p>
      </div>
      <div class="glass-card shadow-3d p-8 transition hover:scale-105">
        <i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
        <h3 class="font-bold text-xl mb-2">Plataforma para todos los dispositivos</h3>
-        <p class="text-gray-300">BlackBox funciona para un solo usuario, as well as for the whole family or business group. Unlimited number of connected devices.</p>
+        <p class="text-gray-300">BlackBox funciona tanto para usuarios individuales como para familias o grupos de negocios. Cantidad ilimitada de dispositivos conectados.</p>
      </div>
    </div>
  </section>

-  <!-- PRODUCT SHOWCASE -->
+  <!-- ESCAPARATE DE PRODUCTOS -->
  <section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
-    <h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Gama de Modelos BlackBox</h2>
+    <h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Línea de Productos BlackBox</h2>

    <div class="flipbook-container relative h-96 md:h-[36rem] w-full">
      <!-- BlackBox VPN (far left) -->
@@ -156,10 +157,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>99 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Crea un punto de acceso Wi-Fi con VPN segura. 512 MB RAM.</p>
+          <p class="text-gray-300 mb-4 product-description">Crea un punto de acceso Wi-Fi con VPN protegida. 512 MB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(1)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -174,10 +175,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>199 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Mensajero Matrix o Nextcloud integrado. 1 GB RAM. Control total sobre sus datos.</p>
+          <p class="text-gray-300 mb-4 product-description">Matrix Messenger o Nextcloud integrados. 1 GB RAM. Control total sobre sus datos.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(2)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -192,10 +193,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>299 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Todas las funciones de los primeros modelos + escritorio remoto (Workspace). 4 GB RAM.</p>
+          <p class="text-gray-300 mb-4 product-description">Todas las características de los primeros modelos + escritorio remoto (Workspace). 4 GB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(3)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-4gb.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -210,10 +211,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
            <span>499 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Estación de trabajo completa. Todas las funciones de modelos anteriores.</p>
+          <p class="text-gray-300 mb-4 product-description">Estación de trabajo completa. Todas las características de los modelos anteriores.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(4)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-workstation.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -231,7 +232,7 @@
          <p class="text-gray-300 mb-4 product-description">Incluye todas las tecnologías BlackBox. Inteligencia artificial privada. Máxima autonomía y protección.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(5)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-ai.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -246,10 +247,10 @@
          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
            <span>desde 499 €</span>
          </div>
-          <p class="text-gray-300 mb-4 product-description">Creación de una tienda en Telegram a través de un bot. Carga de productos, descripción, precio. Pago de bienes a través de criptomoneda. Anonimato total del vendedor y comprador.</p>
+          <p class="text-gray-300 mb-4 product-description">Creación de tienda en Telegram a través de bot. Carga de productos, descripciones, precios. Pago de productos con criptomoneda. Anonimato completo para vendedor y comprador.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Comprar</button>
-            <button onclick="showProductDetails(6)" class="details-btn product-details-btn">Detalles</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-shop.html'" class="details-btn product-details-btn">Detalles</button>
          </div>
        </div>
      </div>
@@ -261,13 +262,13 @@
  </section>


-  <!-- PRICING & ORDER -->
+  <!-- PRECIOS Y PEDIDO -->
  <section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
    <div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      ¡-30% Solo ahora!
    </div>
    <h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Pida BlackBox WorkStation con un descuento de <span class="text-cyan-400">350&nbsp;USD</span></h2>
-    <p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Pago único - sin suscripciones.<br> Envío a todo el mundo. ¡El número de dispositivos en promoción es limitado!</p>
+    <p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Pago único — sin suscripciones.<br> Envío a todo el mundo. ¡Cantidad de dispositivos en promoción limitada!</p>
    <div class="flex flex-wrap items-center justify-center gap-8 mb-7">
      <div class="text-left bg-gray-800/70 rounded-2xl p-6">
        <div class="text-2xl">
@@ -275,7 +276,7 @@
          <span class="line-through text-gray-500 ml-2 text-lg">499&nbsp;USD</span>
        </div>
        <div class="text-gray-400 text-xs mt-1">Precio especial para los primeros 10 compradores</div>
-        <div class="mt-3 text-base text-green-300 font-bold">+ Actualización gratuita durante un año</div>
+        <div class="mt-3 text-base text-green-300 font-bold">+ Actualizaciones gratuitas durante un año</div>
      </div>
      <ul class="text-left space-y-2 text-sm text-gray-200">
        <li><i class="fas fa-check mr-2 text-cyan-400"></i>Garantía de devolución de dinero de 30 días</li>
@@ -283,27 +284,18 @@
        <li><i class="fas fa-check mr-2 text-cyan-400"></i>Soporte personalizado</li>
      </ul>
    </div>
-    <a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Pedir</a>
-    <div class="mt-6 text-gray-300 text-base">Válido hasta el <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1 de junio de 2025</span> o hasta agotar existencias.</div>
+    <a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Ordenar</a>
+    <div class="mt-6 text-gray-300 text-base">Válido hasta el <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1&nbsp;de junio de 2025</span> o hasta agotar existencias.</div>
  </section>

-  <!-- PRODUCT DETAILS MODAL -->
-  <div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
-    <div class="modal-content relative">
-      <span class="modal-close" onclick="hideProductDetails()">&times;</span>
-      <h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
-      <p id="modalDescription" class="text-gray-300 mb-6"></p>
-      <button class="w-full py-3 buy-btn text-lg">Comprar ahora</button>
-    </div>
-  </div>

-  <!-- TESTIMONIALS -->
+  <!-- TESTIMONIOS -->
  <section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
    <h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">¿Qué dicen nuestros usuarios?</h2>
    <div class="grid md:grid-cols-3 gap-7 lg:gap-12">
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
-        <div class="mb-2 font-bold text-lg text-emerald-300">Andrey, fundador de startup</div>
+        <div class="mb-2 font-bold text-lg text-emerald-300">Andrey, emprendedor</div>
        <div class="text-gray-300 italic">"BlackBox es el primer gadget en el que confío mis datos personales. Sin registros, funcionamiento rápido, genial para trabajar desde cualquier parte del mundo."</div>
      </div>
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
@@ -314,12 +306,12 @@
      <div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
        <div class="mb-2 font-bold text-lg text-purple-300">Vlad, programador</div>
-        <div class="text-gray-300 italic">"Linux, código abierto, anonimato: todo funciona rápido y de manera inteligente. Una excelente alternativa a los servicios VPN y routers."</div>
+        <div class="text-gray-300 italic">"Linux, código abierto, anonimato — todo funciona rápido y de manera inteligente. Excelente alternativa a los servicios VPN y routers."</div>
      </div>
    </div>
  </section>

-  <!-- FOOTER -->
+  <!-- PIE DE PÁGINA -->
  <footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
    <img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
    <div class="mb-2">
@@ -336,18 +328,65 @@
    <div>
      <a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Soporte</a>
      &nbsp;|&nbsp;
-      <a href="/es/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
+      <a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
      &nbsp;|&nbsp;
-      <a href="https://bbox.rocks" class="hover:underline">Sitio web antiguo no compatible</a>
+      <a href="https://bbox.rocks" class="hover:underline">Sitio antiguo no soportado</a>
    </div>
    <div class="mt-4">
-      <span class="text-gray-400">bbox.wtf - página de destino de próxima generación: BlackBox no es solo una VPN, es un ecosistema y su privacidad digital.</span>
+      <span class="text-gray-400">bbox.wtf — landing de nueva generación: BlackBox no es solo una VPN, es un ecosistema y su privacidad digital.</span>
    </div>
  </footer>
+
+  <!-- MODAL DE DETALLES DEL PRODUCTO -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Comprar ahora</button>
+    </div>
+  </div>
+
+  <!-- MODAL DE PAGO CON CRIPTOMONEDAS -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Pago con criptomonedas</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="Código QR de LTC" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Cantidad a pagar: [Cantidad]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Instrucciones de pago:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Abra la billetera criptográfica en su dispositivo</li>
+              <li>2. Haga clic en "Enviar" y seleccione la billetera LTC</li>
+              <li>3. Escanee el código QR correspondiente</li>
+              <li>4. Ingrese la cantidad exacta</li>
+              <li>5. Confirme la transacción</li>
+              <li>6. Después de la confirmación de la red (generalmente 2-5 min) su pedido será procesado</li>
+              <li>7. Inicie sesión en nuestro bot de Telegram e ingrese 3 parámetros: billetera de envío, hora exacta y cantidad exacta, el bot le dará acceso a su cuenta personal.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
  <script src="/js/features.js"></script>
  <script src="/js/flipbook.js"></script>
  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
--- a/lang/ru/index.html
+++ b/lang/ru/index.html
@@ -37,6 +37,7 @@
      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
    </nav>
    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      Заказать сейчас
@@ -159,7 +160,7 @@
          <p class="text-gray-300 mb-4 product-description">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(1)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -177,7 +178,7 @@
          <p class="text-gray-300 mb-4 product-description">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(2)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -195,7 +196,7 @@
          <p class="text-gray-300 mb-4 product-description">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(3)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-4gb.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -213,7 +214,7 @@
          <p class="text-gray-300 mb-4 product-description">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(4)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-workstation.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -231,7 +232,7 @@
          <p class="text-gray-300 mb-4 product-description">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(5)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-ai.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -249,7 +250,7 @@
          <p class="text-gray-300 mb-4 product-description">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
          <div class="flex justify-center gap-3">
            <button class="buy-btn product-buy-btn">Купить</button>
-            <button onclick="showProductDetails(6)" class="details-btn product-details-btn">Подробнее</button>
+            <button onclick="window.location.href='/items/boxes/blackbox-shop.html'" class="details-btn product-details-btn">Подробнее</button>
          </div>
        </div>
      </div>
@@ -287,15 +288,6 @@
    <div class="mt-6 text-gray-300 text-base">Действительно до <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1&nbsp;июня 2025</span> или пока не кончится запас.</div>
  </section>
  
-  <!-- PRODUCT DETAILS MODAL -->
-  <div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
-    <div class="modal-content relative">
-      <span class="modal-close" onclick="hideProductDetails()">&times;</span>
-      <h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
-      <p id="modalDescription" class="text-gray-300 mb-6"></p>
-      <button class="w-full py-3 buy-btn text-lg modal-buy-btn">Купить сейчас</button>
-    </div>
-  </div>

  <!-- TESTIMONIALS -->
  <section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
@@ -344,10 +336,57 @@
      <span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
    </div>
  </footer>
+
+  <!-- PRODUCT DETAILS MODAL -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Купить сейчас</button>
+    </div>
+  </div>
+
+  <!-- CRYPTO PAYMENT MODAL -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Оплата криптовалютой</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="LTC QR код" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Сумма к оплате: [Сумма]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Инструкция по оплате:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Откройте крипто-кошелек на вашем устройстве</li>
+              <li>2. Нажмите "Отправить" и выберите крипто-кошелекLTC</li>
+              <li>3. Отсканируйте соответствующий QR-код</li>
+              <li>4. Укажите точную сумму</li>
+              <li>5. Подтвердите транзакцию</li>
+              <li>6. После подтверждения сети (обычно 2-5 min) ваш заказ будет обработан</li>
+              <li>7. Войдите в наш телеграмм бот и введите 3 параметра, кошелк с которого вы отправили деньги, точное время и точную сумму, бот вам вышлет доступ в личный кабинет.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
  <script src="/js/features.js"></script>
  <script src="/js/flipbook.js"></script>
  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
--- a/pages/products.html
+++ b/pages/products.html
@@ -26,6 +26,7 @@
      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+      <a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
    </nav>
    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
      Заказать сейчас