diff --git a/README.md b/README.md
index fc4f52e..3e48ade 100644
--- a/README.md
+++ b/README.md
@@ -10,16 +10,24 @@
 
 ## 📌 О проекте
 
-Лендинг-страница для VPN-сервиса **DmitriyVPN**. Сайт рассказывает о тарифах, преимуществах сервиса и помогает пользователям быстро подключиться через Telegram-бот.
+Лендинг-страница для VPN-сервиса **DmitriyVPN**, полностью переработанная в соответствии с дизайн-системой **Surfshark** (`DESIGN.md`).
+Дизайн выполнен в концепции светлого SaaS с контрастными тёмными панелями (ритм «dark → light → dark»), фирменным акцентом Surfshark Teal (`#1ebfbf`), конверсионными кнопками Coral Pulse (`#fa3556`) и промо-баннером Promo Gold (`#ffc200`).
 
 ---
 
-## 🛠 Технологии
+## 🛠 Технологии и дизайн-система
 
-- **HTML5** — семантическая разметка
-- **CSS3** — стили, анимации, адаптив
-- **Vanilla JS** — интерактивность (аккордеон FAQ, бургер-меню, тогл тарифов, scroll reveal)
-- **Google Fonts** — Inter, Fira Code
+- **HTML5** — семантическая разметка с чистой иерархией
+- **CSS3** — полная система токенов Surfshark Design System:
+  - Шрифтовая система: исключительно **Inter** (веса 400, 600, 700; дисплейный трекинг -1.5px на 60px)
+  - Цветовая палитра: Surfshark Teal (`#1ebfbf`), Coral Pulse (`#fa3556`), Promo Gold (`#ffc200`), Charcoal Ink (`#16191c`), Tide Tint (`#e8f7f8`), Ash Gray (`#dadadd`), Deep Abyss (`#1e2327`)
+  - Скругления: 48px для карточек, 12px для стандартных кнопок, 64px для Hero-карточки, 96px для pill-элементов
+  - Плоский современный стиль без теней (elevation через контраст и 1px hairline-границы)
+- **Vanilla JS** — интерактивность:
+  - Динамический переключатель периодов тарифов (1 мес, 3 мес со скидкой -10%, 12 мес со скидкой -20%)
+  - Интерактивный плавный аккордеон FAQ
+  - Адаптивное бургер-меню для мобильных устройств
+  - Плавная анимация появления контента при скролле (Scroll Reveal)
 
 ---
 
@@ -27,9 +35,10 @@
 
 ```
 dmitriyvpn/
-├── index.html       # Основная HTML-разметка
-├── styles.css       # Таблица стилей
-├── script.js        # Клиентские скрипты
+├── DESIGN.md        # Спецификация дизайн-системы Surfshark
+├── index.html       # Основная HTML-разметка страницы
+├── styles.css       # Таблица стилей (токены и компоненты)
+├── script.js        # Клиентские скрипты интерактивности
 └── README.md        # Документация проекта
 ```
 
@@ -38,19 +47,17 @@ dmitriyvpn/
 ## 🚀 Запуск локально
 
 ```bash
-# Открыть страницу в браузере
+# Открыть страницу в браузеру
 start index.html
 ```
 
-Или через расширение **Live Server** в VS Code.
-
 ---
 
 ## 📋 Тарифы
 
 | Тариф | Устройства | Цена |
 |---|---|---|
-| Бесплатный | 1 | 0 ₽ |
+| Бесплатный | 1 | 0 ₽ / навсегда |
 | Standard | 1 | от 87.38 до 109.22 ₽/мес |
 | Pro | 5 | от 155.53 до 194.41 ₽/мес |
 | Premium | 15 | от 233.30 до 291.62 ₽/мес |
diff --git a/assets/icons/android-tv.svg b/assets/icons/android-tv.svg
new file mode 100644
index 0000000..1dc5075
--- /dev/null
+++ b/assets/icons/android-tv.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <!-- TV Body -->
+  <rect x="2" y="5" width="28" height="18" rx="3" stroke="#1ebfbf" stroke-width="2.5"/>
+  <!-- TV Stand -->
+  <path d="M12 28L14.5 23H17.5L20 28" stroke="#1ebfbf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Play triangle inside TV -->
+  <polygon points="14,11 20,14 14,17" fill="#1ebfbf"/>
+</svg>
diff --git a/assets/icons/android.svg b/assets/icons/android.svg
new file mode 100644
index 0000000..79580fd
--- /dev/null
+++ b/assets/icons/android.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <!-- Antennae -->
+  <line x1="10" y1="5" x2="7" y2="1.5" stroke="#1ebfbf" stroke-width="2" stroke-linecap="round"/>
+  <line x1="22" y1="5" x2="25" y2="1.5" stroke="#1ebfbf" stroke-width="2" stroke-linecap="round"/>
+  <!-- Head -->
+  <path d="M7 13C7 8.03 11.03 4 16 4C20.97 4 25 8.03 25 13H7Z" fill="#1ebfbf"/>
+  <circle cx="12" cy="9" r="1.25" fill="#ffffff"/>
+  <circle cx="20" cy="9" r="1.25" fill="#ffffff"/>
+  <!-- Body -->
+  <path d="M7 15C7 14.45 7.45 14 8 14H24C24.55 14 25 14.45 25 15V24C25 25.1 24.1 26 23 26H9C7.9 26 7 25.1 7 24V15Z" fill="#1ebfbf"/>
+  <!-- Arms -->
+  <rect x="3" y="15" width="2.5" height="8" rx="1.25" fill="#1ebfbf"/>
+  <rect x="26.5" y="15" width="2.5" height="8" rx="1.25" fill="#1ebfbf"/>
+  <!-- Legs -->
+  <rect x="11" y="26" width="2.5" height="5" rx="1.25" fill="#1ebfbf"/>
+  <rect x="18.5" y="26" width="2.5" height="5" rx="1.25" fill="#1ebfbf"/>
+</svg>
diff --git a/assets/icons/ios.svg b/assets/icons/ios.svg
new file mode 100644
index 0000000..7360e76
--- /dev/null
+++ b/assets/icons/ios.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <rect x="7" y="2" width="18" height="28" rx="4.5" stroke="#1ebfbf" stroke-width="2.5"/>
+  <line x1="13" y1="5.5" x2="19" y2="5.5" stroke="#1ebfbf" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="16" cy="25.5" r="1.5" fill="#1ebfbf"/>
+</svg>
diff --git a/assets/icons/linux.svg b/assets/icons/linux.svg
new file mode 100644
index 0000000..f16ac49
--- /dev/null
+++ b/assets/icons/linux.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <!-- Tux Penguin silhouette -->
+  <path d="M16 2C12.5 2 10.5 4.5 10.5 8C10.5 9.5 10 11.5 8.5 13C6.5 15 5 18 5 21C5 24.5 7.5 27 11 27C12.5 27 13.5 26.5 16 26.5C18.5 26.5 19.5 27 21 27C24.5 27 27 24.5 27 21C27 18 25.5 15 23.5 13C22 11.5 21.5 9.5 21.5 8C21.5 4.5 19.5 2 16 2Z" fill="#1ebfbf"/>
+  <ellipse cx="16" cy="18" rx="6" ry="7.5" fill="#ffffff" opacity="0.3"/>
+  <circle cx="13.5" cy="7.5" r="1.5" fill="#ffffff"/>
+  <circle cx="18.5" cy="7.5" r="1.5" fill="#ffffff"/>
+  <!-- Beak -->
+  <path d="M14 9.5C14 9.5 15.5 11.5 16 11.5C16.5 11.5 18 9.5 18 9.5L14 9.5Z" fill="#ffc200"/>
+  <!-- Feet -->
+  <path d="M7 27C6 27 6 29 8 30C10 31 13 30 13 28.5L7 27Z" fill="#ffc200"/>
+  <path d="M25 27C26 27 26 29 24 30C22 31 19 30 19 28.5L25 27Z" fill="#ffc200"/>
+</svg>
diff --git a/assets/icons/macos.svg b/assets/icons/macos.svg
new file mode 100644
index 0000000..9729477
--- /dev/null
+++ b/assets/icons/macos.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <path d="M19.8 4.2C20.9 2.8 21.6 0.9 21.4 0C19.7 0.1 17.6 1.1 16.5 2.5C15.5 3.7 14.6 5.6 14.9 7.4C16.8 7.5 18.7 6.4 19.8 4.2Z" fill="#1ebfbf"/>
+  <path d="M21.5 16.3C21.5 12.3 24.8 10.3 24.9 10.2C23 7.5 20.2 7.1 19.2 7C16.8 6.8 14.4 8.5 13.2 8.5C11.9 8.5 10 7.1 8 7.1C5.4 7.1 3 8.6 1.7 10.9C-1 15.6 1 22.5 3.6 26.3C4.9 28.1 6.3 30.1 8.3 30C10.2 29.9 11 28.7 13.2 28.7C15.4 28.7 16.1 29.9 18.1 30C20.2 30.1 21.5 28.2 22.8 26.4C24.3 24.2 24.9 22.1 25 22C24.9 21.9 21.5 20.6 21.5 16.3Z" fill="#1ebfbf"/>
+</svg>
diff --git a/assets/icons/windows.svg b/assets/icons/windows.svg
new file mode 100644
index 0000000..f832688
--- /dev/null
+++ b/assets/icons/windows.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none">
+  <path d="M3 6.8L13.8 5.3V15H3V6.8Z" fill="#1ebfbf"/>
+  <path d="M15.8 5V3.3L29 1.5V15H15.8V5Z" fill="#1ebfbf"/>
+  <path d="M3 17H13.8V26.7L3 25.2V17Z" fill="#1ebfbf"/>
+  <path d="M15.8 17H29V30.5L15.8 28.7V17Z" fill="#1ebfbf"/>
+</svg>
diff --git a/index.html b/index.html
index 8963ec5..9d64909 100644
--- a/index.html
+++ b/index.html
@@ -1,342 +1,797 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="ru" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DmitriyVPN — Быстрый и стабильный VPN для всех устройств</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+    <title>DmitriyVPN — Надежный интернет без ограничений</title>
+    <!-- Inter is exclusively used throughout the product as specified in DESIGN.md -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
-
+    <script>
+        // Apply theme early to prevent flash of wrong theme
+        (function() {
+            const saved = localStorage.getItem('dmitriyvpn_theme');
+            if (saved === 'dark') {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            } else {
+                document.documentElement.setAttribute('data-theme', 'light');
+            }
+        })();
+    </script>
 </head>
 <body>
 
-    <!-- Mobile nav overlay -->
-    <nav class="mobile-nav" id="mobileNav">
-        <a href="#features" onclick="closeMobile()">Преимущества</a>
-        <a href="#devices" onclick="closeMobile()">Устройства</a>
-        <a href="#pricing" onclick="closeMobile()">Тарифы</a>
-        <a href="#faq" onclick="closeMobile()">FAQ</a>
-        <a href="#reviews" onclick="closeMobile()">Отзывы</a>
-        <a href="#support" onclick="closeMobile()">Поддержка</a>
-        <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-tg-nav">Telegram Канал</a>
-    </nav>
+    <!-- ==========================================================================
+         Promo Banner
+         Role: Top-of-page limited-time deal strip
+         Full-width 40px tall bar with #ffc200 background, centered 14px Inter 400 black
+         ========================================================================== -->
+    <div class="promo-banner">
+        <span>⚡ <strong>Ограниченное предложение:</strong> Скидка до 20% при оформлении подписки на 12 месяцев! <a href="#pricing">Выбрать тариф →</a></span>
+    </div>
 
-    <header>
+    <!-- ==========================================================================
+         Primary Navigation
+         Role: Sticky top navigation bar, 64px height, Pure White (#ffffff), hairline border
+         ========================================================================== -->
+    <header class="header-nav">
         <div class="container header-wrap">
-            <a href="#" class="logo">Dmitriy<span>VPN</span></a>
-            <nav>
+            <a href="#" class="brand-logo" aria-label="DmitriyVPN Главная">
+                <svg class="brand-logo-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M16 2L4 7V15C4 22.38 9.12 29.22 16 31C22.88 29.22 28 22.38 28 15V7L16 2Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M11 16L14.5 19.5L21 12.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="brand-name"><span>Dmitriy</span>VPN</span>
+            </a>
+
+            <nav class="main-nav">
                 <a href="#features">Преимущества</a>
                 <a href="#devices">Устройства</a>
+                <a href="#connect">Подключение</a>
                 <a href="#pricing">Тарифы</a>
                 <a href="#faq">FAQ</a>
                 <a href="#reviews">Отзывы</a>
                 <a href="#support">Поддержка</a>
-                <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-tg-nav">Telegram Канал</a>
             </nav>
-            <button class="burger" id="burger" onclick="toggleMobile()" aria-label="Открыть меню">
-                <span></span><span></span><span></span>
-            </button>
+
+            <div class="nav-actions">
+                <!-- Theme Toggle Button (Light by default, Dark toggleable) -->
+                <button type="button" class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" aria-label="Переключить тему оформления" title="Переключить тему">
+                    <svg class="theme-icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="5"></circle>
+                        <line x1="12" y1="1" x2="12" y2="3"></line>
+                        <line x1="12" y1="21" x2="12" y2="23"></line>
+                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                        <line x1="1" y1="12" x2="3" y2="12"></line>
+                        <line x1="21" y1="12" x2="23" y2="12"></line>
+                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                    </svg>
+                    <svg class="theme-icon moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                </button>
+
+                <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-dark" rel="noopener noreferrer">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
+                    </svg>
+                    Telegram Канал
+                </a>
+                <button class="burger-btn" id="burger" onclick="toggleMobile()" aria-label="Открыть мобильное меню">
+                    <span></span><span></span><span></span>
+                </button>
+            </div>
         </div>
     </header>
 
+    <!-- Mobile Navigation Overlay -->
+    <nav class="mobile-nav-overlay" id="mobileNav">
+        <a href="#features" onclick="closeMobile()">Преимущества</a>
+        <a href="#devices" onclick="closeMobile()">Устройства</a>
+        <a href="#connect" onclick="closeMobile()">Подключение</a>
+        <a href="#pricing" onclick="closeMobile()">Тарифы</a>
+        <a href="#faq" onclick="closeMobile()">FAQ</a>
+        <a href="#reviews" onclick="closeMobile()">Отзывы</a>
+        <a href="#support" onclick="closeMobile()">Поддержка</a>
+        <div class="mobile-theme-row">
+            <span>Тема оформления</span>
+            <button type="button" class="theme-toggle-btn" onclick="toggleTheme()" aria-label="Переключить тему">
+                <svg class="theme-icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="5"></circle>
+                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                </svg>
+                <svg class="theme-icon moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                </svg>
+            </button>
+        </div>
+        <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-dark" onclick="closeMobile()" rel="noopener noreferrer">
+            Открыть Telegram Канал
+        </a>
+    </nav>
+
     <main class="container">
 
-        <!-- HERO -->
-        <section class="hero reveal">
+        <!-- ==========================================================================
+             Hero Card (Dark)
+             Role: Full-bleed conversion-focused hero, #16191c background, 64px radius,
+             60px Inter 700 display headline (-1.5px tracking), teal inline accent,
+             white checkmark bullet list, Coral CTA button
+             ========================================================================== -->
+        <section class="hero-card-dark reveal">
             <div class="hero-left">
-                <div class="badge">Для всех устройств</div>
-                <h1>Надежный интернет без <span>ограничений</span></h1>
-                <p class="hero-text">
-                    DmitriyVPN — современное, легковесное решение для вашей безопасности. Стабильный обход блокировок, минимальный пинг в играх и мгновенная скорость на любом устройстве.
+                <div class="pill-badge dark-mode">
+                    <span class="pulse-dot"></span>
+                    VLESS XTLS-Reality 2026 · Без Блокировок
+                </div>
+
+                <h1 class="hero-headline">Надежный интернет без <span class="text-teal">ограничений</span></h1>
+
+                <p class="hero-description">
+                    DmitriyVPN — современное легковесное решение для вашей безопасности. Стабильный обход блокировок и DPI, минимальный пинг в играх и мгновенная скорость на любом устройстве.
                 </p>
-                <div class="hero-btns">
-                    <a href="#pricing" class="btn-main">Выбрать тариф</a>
-                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-sec">В Telegram-канал</a>
+
+                <!-- Checkmark Feature List -->
+                <div class="checkmark-list">
+                    <div class="checkmark-item">
+                        <svg class="checkmark-icon" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                        </svg>
+                        <span>Необнаруживаемый протокол VLESS XTLS-Reality (маскировка под HTTPS)</span>
+                    </div>
+                    <div class="checkmark-item">
+                        <svg class="checkmark-icon" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                        </svg>
+                        <span>Скорость до 1 Гбит/с без троттлинга трафика и лимитов</span>
+                    </div>
+                    <div class="checkmark-item">
+                        <svg class="checkmark-icon" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                        </svg>
+                        <span>Строгая политика No-Logs — абсолютная конфиденциальность данных</span>
+                    </div>
+                </div>
+
+                <!-- CTA group: One Coral Filled Button per view -->
+                <div class="hero-cta-group">
+                    <a href="#pricing" class="btn-coral">Выбрать тариф</a>
+                    <a href="https://t.me/DmitriyVPN" target="_blank" class="text-link-arrow" rel="noopener noreferrer">В Telegram-канал →</a>
                 </div>
             </div>
+
             <div class="hero-right">
-                <div class="shield-graphic">
-                    <div class="shield-icon">🛡️</div>
-                    <div class="shield-label">DMITRIY_CORE V2</div>
-                </div>
-            </div>
-        </section>
-
-        <!-- FEATURES -->
-        <section id="features" class="reveal">
-            <h2 class="section-title">Почему выбирают нас</h2>
-            <p class="section-sub">Всё что нужно для быстрого, безопасного и стабильного интернета</p>
-            <div class="grid-features">
-                <div class="feature-card">
-                    <span class="feature-icon">🚀</span>
-                    <div class="feature-title">Максимальная скорость</div>
-                    <div class="feature-desc">До 1 Гбит/с без троттлинга и ограничений трафика на всех тарифах.</div>
-                </div>
-                <div class="feature-card">
-                    <span class="feature-icon">🔒</span>
-                    <div class="feature-title">Без логов</div>
-                    <div class="feature-desc">Мы не храним никаких данных о вашей активности. Абсолютная приватность.</div>
-                </div>
-                <div class="feature-card">
-                    <span class="feature-icon">🌍</span>
-                    <div class="feature-title">20 локаций</div>
-                    <div class="feature-desc">Серверы по всему миру: Европа, Азия, Америка — выбери ближайший.</div>
-                </div>
-                <div class="feature-card">
-                    <span class="feature-icon">⚡</span>
-                    <div class="feature-title">Пинг &lt;100 мс</div>
-                    <div class="feature-desc">Оптимизировано для игр. Никаких потерь пакетов и лагов.</div>
-                </div>
-            </div>
-        </section>
-
-        <!-- DEVICES -->
-        <section id="devices" class="reveal">
-            <h2 class="section-title">Поддерживаемые устройства</h2>
-            <p class="section-sub">Один аккаунт — все ваши гаджеты</p>
-            <div class="grid-devices">
-                <div class="device-card">
-                    <span class="device-icon">🖥️</span>
-                    <div class="device-name">Windows</div>
-                </div>
-                <div class="device-card">
-                    <span class="device-icon">🍎</span>
-                    <div class="device-name">macOS</div>
-                </div>
-                <div class="device-card">
-                    <span class="device-icon">🤖</span>
-                    <div class="device-name">Android</div>
-                </div>
-                <div class="device-card">
-                    <span class="device-icon">📱</span>
-                    <div class="device-name">iOS</div>
-                </div>
-                <div class="device-card">
-                    <span class="device-icon">🐧</span>
-                    <div class="device-name">Linux</div>
-                </div>
-                <div class="device-card">
-                    <span class="device-icon">📺</span>
-                    <div class="device-name">Android TV</div>
-                </div>
-            </div>
-        </section>
-
-        <!-- HOW TO CONNECT -->
-        <section id="connect" class="reveal">
-            <h2 class="section-title">Подключение за 3 шага</h2>
-            <p class="section-sub">Никаких сложных настроек — просто работает</p>
-            <div class="steps">
-                <div class="step-card">
-                    <div class="step-num">1</div>
-                    <div class="step-title">Открой Telegram-бот</div>
-                    <div class="step-desc">Перейди в наш бот @DmitriyVPN и нажми Старт. Регистрация не требуется.</div>
-                </div>
-                <div class="step-card">
-                    <div class="step-num">2</div>
-                    <div class="step-title">Выбери тариф</div>
-                    <div class="step-desc">Выбери подходящий план и оплати удобным способом — всё внутри бота.</div>
-                </div>
-                <div class="step-card">
-                    <div class="step-num">3</div>
-                    <div class="step-title">Подключись за 1 минуту</div>
-                    <div class="step-desc">Получи конфиг или QR-код и импортируй его в приложение. Готово!</div>
-                </div>
-            </div>
-        </section>
-
-        <!-- PRICING -->
-        <section id="pricing" class="reveal">
-            <h2 class="section-title">Гибкие тарифные планы</h2>
-            <p class="section-sub">Выбери период — сэкономь больше</p>
-
-            <div class="billing-toggle">
-                <button class="billing-btn active" data-period="month" onclick="setBilling('month', this)">1 месяц</button>
-                <button class="billing-btn" data-period="3month" onclick="setBilling('3month', this)">
-                    3 месяца <span class="save-badge">−10%</span>
-                </button>
-                <button class="billing-btn" data-period="year" onclick="setBilling('year', this)">
-                    12 месяцев <span class="save-badge">−20%</span>
-                </button>
-            </div>
-
-            <div class="grid-pricing">
-
-                <!-- Бесплатный -->
-                <div class="price-card">
-                    <div class="card-name">Бесплатный</div>
-                    <div class="card-price">0 ₽<span>/ навсегда</span></div>
-                    <ul class="card-features">
-                        <li>Медленная скорость работы</li>
-                        <li>Доступно всего 5 локаций</li>
-                        <li class="disabled">Обход жестких глушилок</li>
-                        <li class="disabled">Приоритетная поддержка</li>
-                    </ul>
-                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-sec">Подключить</a>
-                </div>
-
-                <!-- Платные -->
-                <div class="price-card featured">
-                    <div class="card-name">Платные тарифы</div>
-                    <div class="card-price">
-                        от <span id="price-from" class="price-val">109.22</span> ₽<span>/ мес.</span>
+                <!-- Concept VPN Visual Card -->
+                <div class="hero-visual-card">
+                    <div class="visual-header">
+                        <div class="visual-status-pill">
+                            <span class="pulse-dot"></span>
+                            Соединение активно
+                        </div>
+                        <div class="visual-protocol">VLESS Reality</div>
                     </div>
-                    <ul class="card-features">
-                        <li><strong>Максимальная скорость соединения</strong></li>
-                        <li><strong>20 доступных локаций</strong></li>
-                        <li><strong>Полный обход глушилок</strong></li>
-                        <li>Высокая стабильность работы</li>
+
+                    <div class="visual-main-shield">
+                        <div class="shield-svg-wrap">
+                            <svg viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle cx="48" cy="48" r="44" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4" opacity="0.4"/>
+                                <path d="M48 16L24 26V42C24 57 34.2 70.8 48 76C61.8 70.8 72 57 72 42V26L48 16Z" fill="#1e2327" stroke="currentColor" stroke-width="3"/>
+                                <path d="M38 46L45 53L58 39" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </div>
+                        <div class="visual-shield-title">DMITRIY_CORE V2</div>
+                        <div class="visual-shield-sub">Frankfurt, Germany · 1 Gbps</div>
+                    </div>
+
+                    <div class="visual-metrics-grid">
+                        <div class="metric-box">
+                            <div class="metric-label">Пинг в играх</div>
+                            <div class="metric-value text-teal">&lt; 100 мс</div>
+                        </div>
+                        <div class="metric-box">
+                            <div class="metric-label">Потери пакетов</div>
+                            <div class="metric-value">0.00%</div>
+                        </div>
+                        <div class="metric-box">
+                            <div class="metric-label">Шифрование</div>
+                            <div class="metric-value">Reality</div>
+                        </div>
+                        <div class="metric-box">
+                            <div class="metric-label">Хранение логов</div>
+                            <div class="metric-value text-teal">0 (No-Log)</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================================================
+             Reviewer Avatar Strip & Social Proof
+             ========================================================================== -->
+        <section class="social-proof-strip reveal">
+            <div class="avatar-stack">
+                <div class="avatar-circle c1">С</div>
+                <div class="avatar-circle c2">D</div>
+                <div class="avatar-circle c3">М</div>
+                <div class="avatar-circle c4">А</div>
+                <div class="avatar-circle c5">И</div>
+            </div>
+            <div class="pill-badge light-mode">
+                <span class="stars-gold">★★★★★</span>
+                <strong>4.9 / 5.0</strong> на основе более 1 500+ отзывов
+            </div>
+            <div class="social-proof-caption">Более 5 000+ довольных пользователей выбирают DmitriyVPN каждый день</div>
+        </section>
+
+        <!-- ==========================================================================
+             Features Section (Light)
+             Role: Product feature highlights
+             #ffffff background cards, 48px border-radius, 32px padding, no shadow, 1px #dadadd border
+             ========================================================================== -->
+        <section id="features" class="section-wrapper reveal">
+            <div class="section-header">
+                <h2 class="section-title">Почему выбирают DmitriyVPN</h2>
+                <p class="section-sub">Всё необходимое для ультрабыстрого, безопасного и стабильного интернета без цензуры</p>
+            </div>
+
+            <div class="grid-features-light">
+                <div class="feature-card-light">
+                    <div class="feature-icon-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title-light">Максимальная скорость</h3>
+                    <p class="feature-desc-light">До 1 Гбит/с без троттлинга провайдеров и ограничений трафика. Идеально для 4K HDR стриминга и торрентов.</p>
+                </div>
+
+                <div class="feature-card-light">
+                    <div class="feature-icon-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title-light">Без логов и слежки</h3>
+                    <p class="feature-desc-light">Мы не сохраняем никаких логов вашей активности, истории посещений или IP-адресов. Полная анонимность.</p>
+                </div>
+
+                <div class="feature-card-light">
+                    <div class="feature-icon-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="2" y1="12" x2="22" y2="12"></line>
+                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title-light">20+ локаций по миру</h3>
+                    <p class="feature-desc-light">Выделенные серверы в Европе, США и Азии. Автоматический подбор самого быстрого маршрута в 1 клик.</p>
+                </div>
+
+                <div class="feature-card-light">
+                    <div class="feature-icon-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+                            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                        </svg>
+                    </div>
+                    <h3 class="feature-title-light">Пинг &lt;100 мс</h3>
+                    <p class="feature-desc-light">Оптимизировано для сетевых игр. Никаких потерь пакетов, лагов и скачков задержки.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================================================
+             Supported Devices Section (Tide Tint Surface Wash)
+             All 6 icons loaded from dedicated SVG files in assets/icons/
+             ========================================================================== -->
+        <section id="devices" class="section-wrapper reveal">
+            <div class="devices-container">
+                <div class="section-header" style="margin-bottom: 24px;">
+                    <h2 class="section-title">Поддерживаемые устройства</h2>
+                    <p class="section-sub">Один аккаунт — для всех ваших смартфонов, ПК и телевизоров</p>
+                </div>
+
+                <div class="grid-devices-list">
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/windows.svg" alt="Windows" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">Windows</div>
+                        <div class="device-badge-app">v2rayN / Hiddify</div>
+                    </div>
+
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/macos.svg" alt="macOS" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">macOS</div>
+                        <div class="device-badge-app">Sing-Box / FoXray</div>
+                    </div>
+
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/android.svg" alt="Android" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">Android</div>
+                        <div class="device-badge-app">v2rayNG / Hiddify</div>
+                    </div>
+
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/ios.svg" alt="iOS" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">iOS (iPhone)</div>
+                        <div class="device-badge-app">Shadowrocket / Streisand</div>
+                    </div>
+
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/linux.svg" alt="Linux" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">Linux</div>
+                        <div class="device-badge-app">CLI / Sing-Box</div>
+                    </div>
+
+                    <div class="device-item-card">
+                        <div class="device-icon-wrap">
+                            <img src="assets/icons/android-tv.svg" alt="Android TV" class="device-icon-img" width="36" height="36">
+                        </div>
+                        <div class="device-title">Android TV</div>
+                        <div class="device-badge-app">v2rayNG / Smart TV</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================================================
+             How to Connect (Dark Feature Panel)
+             ========================================================================== -->
+        <section id="connect" class="section-wrapper reveal">
+            <div class="feature-panel-dark">
+                <div class="panel-header-dark">
+                    <h2 class="panel-title-dark">Подключение за 3 простых шага</h2>
+                    <p class="panel-sub-dark">Никаких сложных регистраций и заполнения форм — всё работает через Telegram за 1 минуту</p>
+                </div>
+
+                <div class="grid-steps-three">
+                    <div class="step-card-dark">
+                        <div class="step-num-badge">1</div>
+                        <h3 class="step-title-dark">Открой Telegram-бот</h3>
+                        <p class="step-desc-dark">Перейди в официальный бот @DmitriyVPN и нажми кнопку «Старт». Аккаунт создаётся моментально.</p>
+                    </div>
+
+                    <div class="step-card-dark">
+                        <div class="step-num-badge">2</div>
+                        <h3 class="step-title-dark">Выбери тариф</h3>
+                        <p class="step-desc-dark">Выбери подходящий период и оплати через СБП, карту любого банка РФ или криптовалюту прямо в боте.</p>
+                    </div>
+
+                    <div class="step-card-dark">
+                        <div class="step-num-badge">3</div>
+                        <h3 class="step-title-dark">Подключись за 30 сек</h3>
+                        <p class="step-desc-dark">Получи персональный ключ или QR-код и импортируй его в клиент на своём устройстве. Свободный интернет готов!</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================================================
+             Pricing Section (Light)
+             Flexible billing toggle (1 month, 3 months -10%, 12 months -20%)
+             48px card radii, single primary Coral button for conversion
+             ========================================================================== -->
+        <section id="pricing" class="pricing-section reveal">
+            <div class="section-header">
+                <h2 class="section-title">Гибкие тарифные планы</h2>
+                <p class="section-sub">Выберите подходящий период — экономьте больше при годовой оплате</p>
+            </div>
+
+            <!-- Billing Toggle -->
+            <div class="billing-toggle-wrapper">
+                <div class="billing-toggle-pill">
+                    <button type="button" class="billing-opt-btn active" data-period="month" onclick="setBilling('month', this)">
+                        1 месяц
+                    </button>
+                    <button type="button" class="billing-opt-btn" data-period="3month" onclick="setBilling('3month', this)">
+                        3 месяца <span class="promo-discount-badge">−10%</span>
+                    </button>
+                    <button type="button" class="billing-opt-btn" data-period="year" onclick="setBilling('year', this)">
+                        12 месяцев <span class="promo-discount-badge">−20%</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Pricing Cards Grid -->
+            <div class="grid-pricing-cards">
+
+                <!-- Plan 1: Free -->
+                <div class="pricing-card">
+                    <div class="pricing-plan-name">Бесплатный</div>
+                    <div class="pricing-plan-price">
+                        0 ₽ <span class="term">/ навсегда</span>
+                    </div>
+
+                    <ul class="pricing-features-list">
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            Базовая скорость соединения
+                        </li>
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            Доступно 5 базовых локаций
+                        </li>
+                        <li class="disabled-feature">
+                            <svg class="pricing-cross-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                            </svg>
+                            Полный обход
+                        </li>
+                        <li class="disabled-feature">
+                            <svg class="pricing-cross-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                            </svg>
+                            Приоритетная техподдержка
+                        </li>
                     </ul>
-                    <div class="bot-sub-list">
-                        <div class="bot-sub-item">
+
+                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-dark" rel="noopener noreferrer">Подключить бесплатно</a>
+                </div>
+
+                <!-- Plan 2: Paid Plans (FEATURED with single Coral Primary Button) -->
+                <div class="pricing-card featured-plan">
+                    <div class="pricing-card-badge">ПОЛНЫЙ ОБХОД</div>
+
+                    <div class="pricing-plan-name">Платные тарифы</div>
+                    <div class="pricing-plan-price">
+                        от <span id="price-from" class="price-val">109.22</span> ₽ <span class="term">/ мес.</span>
+                    </div>
+
+                    <div class="sub-plan-list">
+                        <div class="sub-plan-row">
                             <span>Standard | 1 устр.</span>
-                            <strong><span class="price-val" id="price-standard">109.22</span> ₽</strong>
+                            <strong><span id="price-standard" class="price-val">109.22</span> ₽/мес</strong>
                         </div>
-                        <div class="bot-sub-item">
+                        <div class="sub-plan-row">
                             <span>Pro | 5 устр.</span>
-                            <strong><span class="price-val" id="price-pro">194.41</span> ₽</strong>
+                            <strong><span id="price-pro" class="price-val">194.41</span> ₽/мес</strong>
                         </div>
-                        <div class="bot-sub-item">
+                        <div class="sub-plan-row">
                             <span>Premium | 15 устр.</span>
-                            <strong><span class="price-val" id="price-premium">291.62</span> ₽</strong>
+                            <strong><span id="price-premium" class="price-val">291.62</span> ₽/мес</strong>
                         </div>
                     </div>
-                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-primary">Открыть в Telegram</a>
-                </div>
 
-                <!-- Пробный -->
-                <div class="price-card">
-                    <div class="card-name">Пробный тест</div>
-                    <div class="card-price">0 ₽<span>/ 3 дня</span></div>
-                    <ul class="card-features">
-                        <li>Высокая скорость работы</li>
-                        <li>Доступно 10 локаций</li>
-                        <li class="disabled">Обход жестких глушилок</li>
-                        <li class="disabled">Приоритетная поддержка</li>
+                    <ul class="pricing-features-list">
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            <strong>Максимальная скорость (до 1 Гбит/с)</strong>
+                        </li>
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            <strong>20 мировых высокоскоростных локаций</strong>
+                        </li>
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            <strong>Полный обход</strong>
+                        </li>
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            Мгновенная выдача и круглосуточная поддержка
+                        </li>
                     </ul>
-                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-sec">Попробовать</a>
+
+                    <!-- Single Coral Action Button in this viewport -->
+                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-coral" rel="noopener noreferrer">Оформить в Telegram</a>
+                </div>
+
+                <!-- Plan 3: Trial -->
+                <div class="pricing-card">
+                    <div class="pricing-plan-name">Пробный тест</div>
+                    <div class="pricing-plan-price">
+                        0 ₽ <span class="term">/ 3 дня</span>
+                    </div>
+
+                    <ul class="pricing-features-list">
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            Высокая скорость работы
+                        </li>
+                        <li>
+                            <svg class="pricing-check-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                            </svg>
+                            Доступно 10 локаций
+                        </li>
+                        <li class="disabled-feature">
+                            <svg class="pricing-cross-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                            </svg>
+                            Полный обход
+                        </li>
+                        <li class="disabled-feature">
+                            <svg class="pricing-cross-icon" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                            </svg>
+                            Приоритетная техподдержка
+                        </li>
+                    </ul>
+
+                    <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-dark" rel="noopener noreferrer">Попробовать 3 дня</a>
                 </div>
 
             </div>
         </section>
 
-        <!-- FAQ -->
-        <section id="faq" class="reveal">
-            <h2 class="section-title">Часто задаваемые вопросы</h2>
-            <p class="section-sub">Ответы на самые популярные вопросы</p>
-            <div class="faq-list">
-
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Работает ли VPN в России в 2026 году?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Да. DmitriyVPN использует современные протоколы, разработанные для обхода глубокой инспекции пакетов (DPI). Платные тарифы имеют полный обход жёстких блокировок и стабильно работают на территории РФ.</div>
-                    </div>
+        <!-- ==========================================================================
+             FAQ Section (Light Accordion)
+             ========================================================================== -->
+        <section id="faq" class="section-wrapper reveal">
+            <div class="faq-section-wrapper">
+                <div class="section-header">
+                    <h2 class="section-title">Часто задаваемые вопросы</h2>
+                    <p class="section-sub">Ответы на самые популярные вопросы о подключении и работе сервиса</p>
                 </div>
 
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Какой протокол используется?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Мы используем VLESS / XTLS-Reality — один из самых современных и необнаруживаемых протоколов. Он маскирует трафик под обычный HTTPS, что делает его практически невидимым для блокировок.</div>
-                    </div>
-                </div>
-
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Как быстро активируется подписка после оплаты?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Мгновенно. Бот автоматически выдаёт конфиг сразу после подтверждения оплаты — обычно не более 30 секунд.</div>
-                    </div>
-                </div>
-
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Можно ли использовать на телефоне и Android TV?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Да, VPN работает на Android, iOS, Android TV, Windows, macOS и Linux. Для подключения используется v2rayNG (Android / Android TV) или Shadowrocket (iOS). Установка занимает 1–2 минуты.</div>
-                    </div>
-                </div>
-
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Сохраняются ли логи моей активности?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Нет. Мы придерживаемся строгой политики No-Log. Никакие данные о вашем трафике, посещённых сайтах или IP-адресах не сохраняются и не передаются третьим лицам.</div>
-                    </div>
-                </div>
-
-                <div class="faq-item">
-                    <button class="faq-q" onclick="toggleFaq(this)">
-                        Что делать если VPN перестал работать?
-                        <div class="faq-icon">+</div>
-                    </button>
-                    <div class="faq-a">
-                        <div class="faq-a-inner">Напишите в техподдержку @Gioramily — проблема обычно решается за несколько минут. Также можно попробовать сменить локацию сервера прямо в боте.</div>
-                    </div>
-                </div>
-
-            </div>
-        </section>
-
-        <!-- REVIEWS -->
-        <section id="reviews" class="reveal">
-            <h2 class="section-title">Что говорят пользователи</h2>
-            <p class="section-sub">Реальные отзывы от наших клиентов</p>
-            <div class="grid-reviews">
-                <div class="review-card">
-                    <div class="review-header">
-                        <div class="review-avatar">С</div>
-                        <div>
-                            <div class="review-stars">★★★★★</div>
-                            <div class="review-user">Сергей К.</div>
-                            <div class="review-verified">✓ Проверенный покупатель</div>
+                <div class="faq-accordion-list">
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Работает ли VPN в России в 2026 году?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Да, абсолютно. DmitriyVPN использует современный протокол VLESS XTLS-Reality, специально разработанный для эффективного обхода глубокой инспекции пакетов (DPI). Платные тарифы имеют полный обход любых региональных блокировок и работают стабильно на мобильном интернете и проводных провайдерах.
+                            </div>
                         </div>
                     </div>
-                    <p class="review-text">«Брал премиум чисто ради того, чтобы нормально смотреть видосы в 4К на компе, так как стандартные методы перестали работать. Всё летает, задержек нет вообще. Топ за свои деньги.»</p>
-                </div>
-                <div class="review-card">
-                    <div class="review-header">
-                        <div class="review-avatar">D</div>
-                        <div>
-                            <div class="review-stars">★★★★★</div>
-                            <div class="review-user">Dima_Gamer</div>
-                            <div class="review-verified">✓ Проверенный покупатель</div>
+
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Какой протокол используется для шифрования?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Мы используем VLESS с XTLS-Reality — один из самых защищённых и необнаруживаемых протоколов в мире. Он идеально маскирует ваш трафик под обычный защищённый веб-трафик (HTTPS), что делает его незаметным для блокирующих систем.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Как быстро активируется подписка после оплаты?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Мгновенно. Наш Telegram-бот автоматически формирует ваш персональный конфиг и QR-код сразу же после подтверждения транзакции. Весь процесс занимает менее 30 секунд.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Можно ли использовать на телефоне, ПК и Android TV?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Да, сервис поддерживается на Android, iOS, Windows, macOS, Linux и Android TV. В боте есть пошаговые видео-инструкции по настройке бесплатных приложений (v2rayNG, Shadowrocket, Hiddify).
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Сохраняются ли логи моей сетевой активности?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Нет. Мы строго придерживаемся политики No-Logs. Никакие данные о передаваемом трафике, посещённых доменах, DNS-запросах или реальных IP-адресах пользователей никогда не записываются на серверах.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <button type="button" class="faq-question-btn" onclick="toggleFaq(this)">
+                            <span>Что делать, если возникнут сложности с подключением?</span>
+                            <div class="faq-toggle-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                                </svg>
+                            </div>
+                        </button>
+                        <div class="faq-answer-collapse">
+                            <div class="faq-answer-content">
+                                Вы можете в любой момент написать напрямую нашему специалисту техподдержки @Gioramily в Telegram. Мы помогаем с пошаговой настройкой каждого устройства и решаем любые технические вопросы в течение нескольких минут.
+                            </div>
                         </div>
                     </div>
-                    <p class="review-text">«Респект разработчику за пинг! Играю в онлайн-шутеры, с этим впном пакеты не теряются, коннект стабильный. Главное — на ПК настраивается за полминуты.»</p>
                 </div>
             </div>
         </section>
 
-        <!-- SUPPORT -->
-        <section id="support" class="reveal">
-            <div class="support-card">
-                <h3>Возникли вопросы или нужна помощь?</h3>
-                <p>Наша техническая поддержка работает оперативно. Если не получается настроить клиент или есть вопросы по оплате — напишите нам напрямую.</p>
-                <a href="https://t.me/Gioramily" target="_blank" class="btn-support">Связаться с техподдержкой</a>
+        <!-- ==========================================================================
+             Testimonial Block & Review Cards
+             ========================================================================== -->
+        <section id="reviews" class="section-wrapper reveal">
+            <div class="testimonial-block-hero">
+                <blockquote class="testimonial-quote">
+                    «DmitriyVPN полностью решил вопрос со стабильным интернетом и YouTube в 4K. Никаких тормозов, нулевой пинг и настройка за минуту.»
+                </blockquote>
+                <div class="testimonial-author">АЛЕКСЕЙ М.</div>
+                <div class="testimonial-subinfo">Активный подписчик DmitriyVPN Pro · 1 год использования</div>
+                <a href="https://t.me/DmitriyVPN" target="_blank" class="btn-pill-dark" rel="noopener noreferrer">
+                    Все отзывы в Telegram-канале →
+                </a>
+            </div>
+
+            <div class="grid-reviews-two">
+                <div class="review-item-card">
+                    <div class="review-card-top">
+                        <div class="review-avatar-box">С</div>
+                        <div>
+                            <div class="stars-gold">★★★★★</div>
+                            <div class="review-user-name">Сергей К.</div>
+                            <div class="review-verified-badge">✓ Проверенный покупатель</div>
+                        </div>
+                    </div>
+                    <p class="review-quote-text">
+                        «Брал тариф Premium чисто ради того, чтобы нормально смотреть видео в 4К на ТВ и ноутбуке, так как остальные решения перестали работать. Всё летает, задержек нет вообще. Топ за свои деньги!»
+                    </p>
+                </div>
+
+                <div class="review-item-card">
+                    <div class="review-card-top">
+                        <div class="review-avatar-box">D</div>
+                        <div>
+                            <div class="stars-gold">★★★★★</div>
+                            <div class="review-user-name">Dima_Gamer</div>
+                            <div class="review-verified-badge">✓ Проверенный покупатель</div>
+                        </div>
+                    </div>
+                    <p class="review-quote-text">
+                        «Огромный респект за пинг! Играю в онлайн-шутеры, с DmitriyVPN пакеты не теряются, коннект кристально чистый. И главное — на ПК настроил буквально за 30 секунд.»
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================================================
+             Support CTA Section (Dark Panel)
+             #16191c background, 48px border-radius, white headings
+             ========================================================================== -->
+        <section id="support" class="section-wrapper reveal">
+            <div class="support-panel-dark">
+                <h2 class="support-title">Возникли вопросы или нужна помощь с настройкой?</h2>
+                <p class="support-desc">
+                    Наша техническая поддержка работает оперативно. Если не получается настроить клиент или есть вопросы по оплате — напишите нам напрямую в Telegram.
+                </p>
+                <a href="https://t.me/Gioramily" target="_blank" class="btn-pill-dark" style="background-color: #ffffff; color: #16191c;" rel="noopener noreferrer">
+                    Написать в техподдержку @Gioramily →
+                </a>
             </div>
         </section>
 
     </main>
 
-    <footer>
+    <!-- ==========================================================================
+         Site-Wide Footer
+         ========================================================================== -->
+    <footer class="site-footer">
         <div class="container">
-            <p>© 2026 DmitriyVPN. Все права защищены. Разработано для всех типов устройств.</p>
+            <div class="footer-top-row">
+                <a href="#" class="footer-logo">
+                    <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M16 2L4 7V15C4 22.38 9.12 29.22 16 31C22.88 29.22 28 22.38 28 15V7L16 2Z" stroke="#1ebfbf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M11 16L14.5 19.5L21 12.5" stroke="#1ebfbf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span class="brand-name"><span>Dmitriy</span>VPN</span>
+                </a>
+                <div class="footer-tagline">Надежный и безопасный интернет без ограничений на базе VLESS XTLS-Reality</div>
+            </div>
+
+            <div class="footer-columns-grid">
+                <div>
+                    <div class="footer-col-title">ПРОДУКТ</div>
+                    <ul class="footer-links-list">
+                        <li><a href="#features">Преимущества</a></li>
+                        <li><a href="#devices">Устройства</a></li>
+                        <li><a href="#connect">Как подключить</a></li>
+                        <li><a href="#pricing">Тарифные планы</a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <div class="footer-col-title">ПЛАТФОРМЫ</div>
+                    <ul class="footer-links-list">
+                        <li><a href="#devices">Windows</a></li>
+                        <li><a href="#devices">macOS</a></li>
+                        <li><a href="#devices">iOS (iPhone)</a></li>
+                        <li><a href="#devices">Android &amp; Android TV</a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <div class="footer-col-title">ИНФОРМАЦИЯ</div>
+                    <ul class="footer-links-list">
+                        <li><a href="#faq">Вопросы и ответы</a></li>
+                        <li><a href="#reviews">Отзывы покупателей</a></li>
+                        <li><a href="#pricing">Пробный период 3 дня</a></li>
+                        <li><a href="https://t.me/DmitriyVPN" target="_blank" rel="noopener noreferrer">Новости сервиса</a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <div class="footer-col-title">ПОДДЕРЖКА</div>
+                    <ul class="footer-links-list">
+                        <li><a href="https://t.me/Gioramily" target="_blank" rel="noopener noreferrer">Техподдержка @Gioramily</a></li>
+                        <li><a href="https://t.me/DmitriyVPN" target="_blank" rel="noopener noreferrer">Telegram Бот @DmitriyVPN</a></li>
+                        <li><a href="https://t.me/DmitriyVPN" target="_blank" rel="noopener noreferrer">Канал сообщества</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom-bar">
+                <div>© 2026 DmitriyVPN. Все права защищены. Разработано для всех типов устройств.</div>
+                <div>Протокол VLESS XTLS-Reality · Политика конфиденциальности No-Logs</div>
+            </div>
         </div>
     </footer>
 
     <script src="script.js"></script>
-
 </body>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 146e0a7..a876ab5 100644
--- a/script.js
+++ b/script.js
@@ -1,7 +1,33 @@
-/* ===== BURGER MENU ===== */
+/* ==========================================================================
+   DmitriyVPN Client Scripts
+   Interactive UI: Theme Toggle, Burger Menu, Billing Toggle, FAQ, Scroll Reveal
+   ========================================================================== */
+
+/* ===== THEME TOGGLE (Light standard, Dark toggleable) ===== */
+function initTheme() {
+    const savedTheme = localStorage.getItem('dmitriyvpn_theme');
+    if (savedTheme === 'dark') {
+        document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+    }
+}
+
+function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || 'light';
+    const next = current === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('dmitriyvpn_theme', next);
+}
+
+// Initialize theme immediately
+initTheme();
+
+/* ===== BURGER & MOBILE NAVIGATION ===== */
 function toggleMobile() {
     const burger = document.getElementById('burger');
     const nav = document.getElementById('mobileNav');
+    if (!burger || !nav) return;
     const isOpen = burger.classList.toggle('open');
     nav.classList.toggle('open', isOpen);
     document.body.style.overflow = isOpen ? 'hidden' : '';
@@ -15,6 +41,11 @@ function closeMobile() {
     document.body.style.overflow = '';
 }
 
+// Close mobile nav on escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeMobile();
+});
+
 /* ===== SCROLL REVEAL ===== */
 const revealObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
@@ -29,16 +60,18 @@ document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
 
 /* ===== BILLING TOGGLE ===== */
 const prices = {
-    month:  { standard: 109.22, pro: 194.41, premium: 291.62 },
+    month:    { standard: 109.22, pro: 194.41, premium: 291.62 },
     '3month': { standard: 98.30,  pro: 174.97, premium: 262.46 },
-    year:   { standard: 87.38,  pro: 155.53, premium: 233.30 }
+    year:     { standard: 87.38,  pro: 155.53, premium: 233.30 }
 };
 
 function setBilling(period, btn) {
-    document.querySelectorAll('.billing-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.billing-opt-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
 
     const p = prices[period];
+    if (!p) return;
+
     const els = {
         'price-from': p.standard,
         'price-standard': p.standard,
@@ -53,27 +86,33 @@ function setBilling(period, btn) {
             setTimeout(() => {
                 el.textContent = val.toFixed(2);
                 el.classList.remove('updating');
-            }, 150);
+            }, 120);
         }
     });
 }
 
 /* ===== FAQ ACCORDION ===== */
 function toggleFaq(btn) {
-    const item = btn.parentElement;
-    const answer = item.querySelector('.faq-a');
+    const item = btn.closest('.faq-item');
+    if (!item) return;
+    const answer = item.querySelector('.faq-answer-collapse');
     const isOpen = item.classList.contains('open');
 
-    // Close all
+    // Close all other open FAQ items
     document.querySelectorAll('.faq-item').forEach(i => {
-        i.classList.remove('open');
-        const a = i.querySelector('.faq-a');
-        if (a) a.style.maxHeight = null;
+        if (i !== item) {
+            i.classList.remove('open');
+            const a = i.querySelector('.faq-answer-collapse');
+            if (a) a.style.maxHeight = null;
+        }
     });
 
-    // Open if was closed
+    // Toggle current item
     if (!isOpen && answer) {
         item.classList.add('open');
         answer.style.maxHeight = answer.scrollHeight + 'px';
+    } else if (answer) {
+        item.classList.remove('open');
+        answer.style.maxHeight = null;
     }
 }
diff --git a/styles.css b/styles.css
index 14dba37..87f7cb2 100644
--- a/styles.css
+++ b/styles.css
@@ -1,843 +1,1596 @@
+/* ==========================================================================
+   Surfshark Design System Implementation for DmitriyVPN
+   Theme: Light mode consumer-SaaS by default with Dark mode toggle
+   Tokens & specifications as defined in DESIGN.md
+   ========================================================================== */
+
 :root {
-    --bg-main: #0a0b0d;
-    --bg-card: #121418;
-    --bg-card-hover: #16191f;
-    --border: #1f242e;
-    --border-hover: #2f3747;
-    --text-main: #ffffff;
-    --text-sub: #94a3b8;
-    --accent: #38bdf8;
-    --accent-glow: rgba(56, 189, 248, 0.15);
-    --font-main: 'Inter', sans-serif;
+  /* Colors */
+  --color-surfshark-teal: #1ebfbf;
+  --color-coral-pulse: #fa3556;
+  --color-promo-gold: #ffc200;
+  --color-charcoal-ink: #16191c;
+  --color-pure-white: #ffffff;
+  --color-fog-white: #f9f9f9;
+  --color-tide-tint: #e8f7f8;
+  --color-ash-gray: #dadadd;
+  --color-mist-gray: #bfbfc0;
+  --color-slate: #5b6065;
+  --color-graphite: #393e41;
+  --color-carbon: #000000;
+  --color-deep-abyss: #1e2327;
+
+  /* Typography — Font Families (Inter exclusively) */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Typography — Scale */
+  --text-caption: 12px;
+  --leading-caption: 1.5;
+  --tracking-caption: 0.17px;
+  --text-body-sm: 14px;
+  --leading-body-sm: 1.71;
+  --tracking-body-sm: 0.24px;
+  --text-body: 16px;
+  --leading-body: 1.75;
+  --text-subheading: 18px;
+  --leading-subheading: 1.67;
+  --text-heading-sm: 24px;
+  --leading-heading-sm: 1.33;
+  --text-heading: 32px;
+  --leading-heading: 1.3;
+  --text-heading-lg: 40px;
+  --leading-heading-lg: 1.21;
+  --text-display: 60px;
+  --leading-display: 1.07;
+  --tracking-display: -1.5px;
+
+  /* Typography — Weights */
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Spacing */
+  --spacing-unit: 4px;
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+  --spacing-96: 96px;
+  --spacing-200: 200px;
+
+  /* Layout */
+  --page-max-width: 1200px;
+  --section-gap: 64px;
+  --card-padding: 32px;
+  --element-gap: 8px;
+
+  /* Border Radius */
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 32px;
+  --radius-full: 48px;
+  --radius-full-2: 64px;
+  --radius-full-3: 96px;
+
+  /* Named Radii */
+  --radius-cards: 48px;
+  --radius-links: 8px;
+  --radius-pills: 96px;
+  --radius-small: 8px;
+  --radius-buttons: 12px;
+
+  /* Surfaces (Default: Light) */
+  --surface-canvas: #f9f9f9;
+  --surface-card: #ffffff;
+  --surface-tinted-wash: #e8f7f8;
+  --surface-dark-panel: #16191c;
+  --surface-deep-abyss: #1e2327;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html { scroll-behavior: smooth; }
+/* ==========================================================================
+   Dark Theme Overrides
+   ========================================================================== */
+[data-theme="dark"] {
+  --surface-canvas: #0c0e12;
+  --surface-card: #15181d;
+  --surface-tinted-wash: #121c22;
+  --surface-dark-panel: #101317;
+  --surface-deep-abyss: #0a0c0f;
+
+  --color-charcoal-ink: #f3f4f6;
+  --color-fog-white: #15181d;
+  --color-ash-gray: #242931;
+  --color-mist-gray: #545c68;
+  --color-slate: #9ca3af;
+  --color-graphite: #323842;
+}
+
+/* ==========================================================================
+   CSS Reset & Base Settings
+   ========================================================================== */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 16px;
+}
 
 body {
-    font-family: var(--font-main);
-    background-color: var(--bg-main);
-    color: var(--text-main);
-    line-height: 1.5;
-    overflow-x: hidden;
-}
-
-body::before {
-    content: '';
-    position: fixed;
-    top: -10%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 600px;
-    height: 400px;
-    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
-    z-index: -1;
-    pointer-events: none;
+  font-family: var(--font-inter);
+  background-color: var(--surface-canvas);
+  color: var(--color-charcoal-ink);
+  line-height: var(--leading-body);
+  font-size: var(--text-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
+/* Base Container */
 .container {
-    width: 100%;
-    max-width: 1140px;
-    margin: 0 auto;
-    padding: 0 24px;
+  width: 100%;
+  max-width: var(--page-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-24);
+  padding-right: var(--spacing-24);
 }
 
-/* ===== HEADER ===== */
-header {
-    padding: 20px 0;
-    border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(12px);
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background: rgba(10, 11, 13, 0.88);
+/* Links & Typography reset */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img, svg {
+  display: block;
+  max-width: 100%;
+}
+
+button {
+  font-family: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+/* Text accents */
+.text-teal {
+  color: var(--color-surfshark-teal);
+}
+
+.text-muted {
+  color: var(--color-slate);
+}
+
+/* ==========================================================================
+   Promo Banner
+   Full-width 40px tall bar with #ffc200 background, centered 14px Inter 400 black
+   ========================================================================== */
+.promo-banner {
+  background-color: var(--color-promo-gold);
+  color: var(--color-carbon);
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--tracking-body-sm);
+  line-height: 1.4;
+  padding: 8px 16px;
+  position: relative;
+  z-index: 1002;
+}
+
+.promo-banner strong {
+  font-weight: var(--font-weight-bold);
+}
+
+.promo-banner a {
+  text-decoration: underline;
+  margin-left: var(--spacing-8);
+  font-weight: var(--font-weight-semibold);
+  transition: opacity 0.2s ease;
+}
+
+.promo-banner a:hover {
+  opacity: 0.8;
+}
+
+/* ==========================================================================
+   Primary Navigation (Sticky, 64px height, Pure White, hairline border)
+   ========================================================================== */
+.header-nav {
+  height: 64px;
+  background-color: var(--surface-card);
+  border-bottom: 1px solid var(--color-ash-gray);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.25s ease, border-color 0.25s ease;
 }
 
 .header-wrap {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.logo {
-    font-weight: 800;
-    font-size: 1.25rem;
-    letter-spacing: -0.5px;
-    text-decoration: none;
-    color: var(--text-main);
-    z-index: 1001;
-    position: relative;
+.brand-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-heading-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-charcoal-ink);
+  letter-spacing: -0.5px;
+  user-select: none;
 }
 
-.logo span { color: var(--accent); }
-
-nav {
-    display: flex;
-    align-items: center;
-    gap: 28px;
+.brand-logo-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--color-surfshark-teal);
+  flex-shrink: 0;
 }
 
-nav a {
-    color: #94a3b8;
-    text-decoration: none;
-    font-size: 0.875rem;
-    font-weight: 500;
-    transition: color 0.2s;
+.brand-name {
+  display: inline-flex;
+  align-items: baseline;
+  letter-spacing: -0.4px;
 }
 
-nav a:hover { color: var(--text-main); }
-
-.btn-tg-nav {
-    background: #1e293b;
-    border: 1px solid var(--border);
-    padding: 8px 16px;
-    border-radius: 8px;
-    color: var(--text-main);
-    font-size: 0.85rem;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.2s;
-    white-space: nowrap;
+.brand-name span {
+  color: var(--color-surfshark-teal);
 }
 
-.btn-tg-nav:hover {
-    background: #0284c7;
-    border-color: #38bdf8;
+nav.main-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-32);
 }
 
-/* ===== BURGER ===== */
-.burger {
-    display: none;
-    flex-direction: column;
-    gap: 5px;
-    cursor: pointer;
-    padding: 4px;
-    background: none;
-    border: none;
-    z-index: 1001;
-    position: relative;
+nav.main-nav a {
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-slate);
+  transition: color 0.2s ease;
+  padding: 6px 0;
+  position: relative;
 }
 
-.burger span {
-    display: block;
-    width: 24px;
-    height: 2px;
-    background: var(--text-main);
-    border-radius: 2px;
-    transition: all 0.3s ease;
+nav.main-nav a:hover {
+  color: var(--color-charcoal-ink);
 }
 
-.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
-.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
-.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
-
-/* ===== MOBILE NAV ===== */
-.mobile-nav {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(10, 11, 13, 0.97);
-    backdrop-filter: blur(20px);
-    z-index: 999;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 32px;
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
 }
 
-.mobile-nav.open { display: flex; }
-
-.mobile-nav a {
-    color: var(--text-main);
-    text-decoration: none;
-    font-size: 1.4rem;
-    font-weight: 700;
-    transition: color 0.2s;
+/* Theme Toggle Button */
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-buttons);
+  border: 1px solid var(--color-ash-gray);
+  background-color: var(--surface-card);
+  color: var(--color-charcoal-ink);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 
-.mobile-nav a:hover { color: var(--accent); }
-
-.mobile-nav .btn-tg-nav {
-    font-size: 1rem;
-    padding: 12px 28px;
+.theme-toggle-btn:hover {
+  border-color: var(--color-surfshark-teal);
+  color: var(--color-surfshark-teal);
 }
 
-@media (max-width: 900px) {
-    .burger { display: flex; }
-    nav { display: none; }
+.theme-icon {
+  width: 20px;
+  height: 20px;
 }
 
-/* ===== SCROLL REVEAL ===== */
-.reveal {
-    opacity: 0;
-    transform: translateY(32px);
-    transition: opacity 0.65s ease, transform 0.65s ease;
+/* Default Light Theme: show Moon icon */
+.theme-icon.sun-icon {
+  display: none;
+}
+.theme-icon.moon-icon {
+  display: block;
 }
 
-.reveal.visible {
-    opacity: 1;
-    transform: translateY(0);
+/* Dark Theme: show Sun icon */
+[data-theme="dark"] .theme-icon.sun-icon {
+  display: block;
+}
+[data-theme="dark"] .theme-icon.moon-icon {
+  display: none;
 }
 
-/* ===== SECTIONS BASE ===== */
-section {
-    padding: 80px 0;
-    border-top: 1px solid var(--border);
+/* Secondary Action / Dark Button */
+.btn-dark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--color-charcoal-ink);
+  color: var(--color-pure-white);
+  border-radius: var(--radius-buttons);
+  padding: 12px 20px;
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-semibold);
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .btn-dark {
+  background-color: #242a33;
+  color: var(--color-pure-white);
+  border: 1px solid var(--color-graphite);
+}
+
+.btn-dark:hover {
+  opacity: 0.9;
+}
+
+/* Burger Button for Mobile */
+.burger-btn {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  padding: 6px;
+  background: transparent;
+  cursor: pointer;
+  z-index: 1001;
+}
+
+.burger-btn span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: var(--color-charcoal-ink);
+  border-radius: 2px;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.burger-btn.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.burger-btn.open span:nth-child(2) {
+  opacity: 0;
+}
+
+.burger-btn.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Mobile Nav Drawer */
+.mobile-nav-overlay {
+  display: none;
+  position: fixed;
+  inset: 64px 0 0 0;
+  background-color: var(--surface-card);
+  z-index: 999;
+  padding: 32px 24px;
+  flex-direction: column;
+  gap: 20px;
+  border-top: 1px solid var(--color-ash-gray);
+  overflow-y: auto;
+}
+
+.mobile-nav-overlay.open {
+  display: flex;
+}
+
+.mobile-nav-overlay a {
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-charcoal-ink);
+  padding: 10px 0;
+  border-bottom: 1px solid var(--color-ash-gray);
+}
+
+.mobile-theme-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-charcoal-ink);
+  border-bottom: 1px solid var(--color-ash-gray);
+}
+
+.mobile-nav-overlay .btn-dark {
+  margin-top: 12px;
+  padding: 14px 24px;
+  font-size: var(--text-body);
+}
+
+/* ==========================================================================
+   Buttons System (Strictly as specified in DESIGN.md)
+   ========================================================================== */
+
+/* Coral Filled Button: Sole primary conversion action. 1 per viewport! */
+.btn-coral {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background-color: var(--color-coral-pulse);
+  color: var(--color-pure-white);
+  border-radius: var(--radius-buttons);
+  padding: 16px 28px;
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-semibold);
+  transition: opacity 0.2s ease, transform 0.15s ease;
+  white-space: nowrap;
+}
+
+.btn-coral:hover {
+  opacity: 0.92;
+  transform: translateY(-1px);
+}
+
+/* Dark Pill Button */
+.btn-pill-dark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--color-charcoal-ink);
+  color: var(--color-pure-white);
+  border-radius: var(--radius-pills);
+  padding: 12px 24px;
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-semibold);
+  transition: opacity 0.2s ease, transform 0.15s ease;
+}
+
+[data-theme="dark"] .btn-pill-dark {
+  background-color: #242a33;
+  border: 1px solid var(--color-graphite);
+}
+
+.btn-pill-dark:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* Text link with trailing arrow */
+.text-link-arrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-pure-white);
+  transition: gap 0.2s ease, opacity 0.2s ease;
+}
+
+.text-link-arrow:hover {
+  gap: 12px;
+  opacity: 0.9;
+}
+
+.text-link-arrow.dark-text {
+  color: var(--color-charcoal-ink);
+}
+
+/* ==========================================================================
+   Pill Tag / Rating Badges
+   ========================================================================== */
+.pill-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--radius-pills);
+  padding: 6px 14px;
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-caption);
+  text-transform: uppercase;
+}
+
+.pill-badge.dark-mode {
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--color-graphite);
+  color: var(--color-surfshark-teal);
+}
+
+.pill-badge.light-mode {
+  background-color: var(--surface-card);
+  border: 1px solid var(--color-ash-gray);
+  color: var(--color-charcoal-ink);
+  text-transform: none;
+  font-size: var(--text-body-sm);
+  padding: 8px 18px;
+}
+
+/* ==========================================================================
+   Section Rhythm & General Typography
+   ========================================================================== */
+.section-wrapper {
+  padding-top: var(--section-gap);
+  padding-bottom: var(--section-gap);
+}
+
+.section-header {
+  text-align: center;
+  max-width: 720px;
+  margin: 0 auto 48px auto;
 }
 
 .section-title {
-    text-align: center;
-    font-size: 2.25rem;
-    font-weight: 800;
-    margin-bottom: 10px;
-    letter-spacing: -1px;
+  font-size: var(--text-heading);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-heading);
+  color: var(--color-charcoal-ink);
+  margin-bottom: var(--spacing-12);
 }
 
 .section-sub {
-    text-align: center;
-    color: #94a3b8;
-    font-size: 1rem;
-    margin-bottom: 48px;
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-slate);
 }
 
-@media (max-width: 768px) {
-    section { padding: 60px 0; }
-    .section-title { font-size: 1.75rem; }
+/* ==========================================================================
+   Hero Card (Dark)
+   #16191c background with 64px border-radius, full width up to 1200px max.
+   Generous bottom padding (80px) to give the CTA buttons ample room from the 64px corner.
+   ========================================================================== */
+.hero-card-dark {
+  background-color: var(--surface-dark-panel);
+  border-radius: var(--radius-full-2);
+  padding: 64px 60px 84px 60px; /* Generous bottom padding to fix corner cutoff */
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  align-items: center;
+  gap: var(--spacing-48);
+  color: var(--color-pure-white);
+  position: relative;
+  overflow: hidden;
+  margin-top: var(--spacing-32);
+  border: 1px solid var(--color-graphite);
 }
 
-/* ===== HERO ===== */
-.hero {
-    padding: 80px 0 100px;
-    display: grid;
-    grid-template-columns: 1.2fr 0.8fr;
-    align-items: center;
-    gap: 48px;
-    border-top: none;
+.hero-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-@media (max-width: 768px) {
-    .hero {
-        grid-template-columns: 1fr;
-        text-align: center;
-        padding: 52px 0 64px;
-    }
-    .hero-right { display: flex; justify-content: center; }
+.hero-headline {
+  font-size: var(--text-display);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  color: var(--color-pure-white);
+  margin-top: var(--spacing-16);
+  margin-bottom: var(--spacing-20);
 }
 
-.badge {
-    display: inline-block;
-    padding: 6px 12px;
-    background: rgba(56, 189, 248, 0.06);
-    border: 1px solid rgba(56, 189, 248, 0.2);
-    color: var(--accent);
-    border-radius: 100px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+.hero-description {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-mist-gray);
+  margin-bottom: var(--spacing-24);
+  max-width: 540px;
 }
 
-h1 {
-    font-size: 3.5rem;
-    font-weight: 800;
-    line-height: 1.1;
-    letter-spacing: -1.5px;
-    margin-bottom: 24px;
+/* Checkmark Feature List */
+.checkmark-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  margin-bottom: var(--spacing-32);
+  width: 100%;
 }
 
-h1 span {
-    background: linear-gradient(to right, #38bdf8, #a855f7);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.checkmark-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+  font-size: var(--text-body);
+  line-height: 1.5;
+  color: var(--color-pure-white);
 }
 
-.hero-text {
-    color: #94a3b8;
-    font-size: 1.1rem;
-    margin-bottom: 36px;
+.checkmark-item.dark-text {
+  color: var(--color-charcoal-ink);
 }
 
-.hero-btns {
-    display: flex;
-    gap: 16px;
+.checkmark-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--color-surfshark-teal);
+  flex-shrink: 0;
+  margin-top: 3px;
 }
 
-@media (max-width: 768px) {
-    .hero-btns { justify-content: center; flex-wrap: wrap; }
-    h1 { font-size: 2.4rem; }
-}
-
-.btn-main {
-    display: inline-block;
-    background: var(--text-main);
-    color: var(--bg-main);
-    padding: 14px 28px;
-    border-radius: 10px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: transform 0.2s, opacity 0.2s;
-}
-
-.btn-main:hover { transform: translateY(-2px); opacity: 0.9; }
-
-.btn-sec {
-    display: inline-block;
-    border: 1px solid var(--border);
-    color: var(--text-main);
-    padding: 14px 28px;
-    border-radius: 10px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: background 0.2s, border-color 0.2s;
-}
-
-.btn-sec:hover {
-    background: rgba(255,255,255,0.04);
-    border-color: var(--border-hover);
+.hero-cta-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-24);
+  flex-wrap: wrap;
 }
 
+/* Hero Right Visual Column */
 .hero-right {
-    position: relative;
-    display: flex;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.shield-graphic {
-    width: 280px;
-    height: 320px;
-    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-    border: 2px solid var(--border);
-    border-radius: 20px 20px 140px 140px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
-    animation: float 4s ease-in-out infinite;
+.hero-visual-card {
+  width: 100%;
+  max-width: 440px;
+  background-color: var(--surface-deep-abyss);
+  border: 1px solid var(--color-graphite);
+  border-radius: var(--radius-3xl);
+  padding: var(--spacing-32);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
 }
 
-.shield-icon {
-    font-size: 4rem;
-    margin-bottom: 12px;
-    filter: drop-shadow(0 0 15px var(--accent));
+.visual-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-graphite);
+  padding-bottom: var(--spacing-16);
 }
 
-.shield-label {
-    font-family: 'Fira Code', monospace;
-    font-size: 0.85rem;
-    color: var(--accent);
-    letter-spacing: 1px;
+.visual-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-caption);
+  color: var(--color-surfshark-teal);
+  font-weight: var(--font-weight-semibold);
 }
 
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-12px); }
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-surfshark-teal);
 }
 
-/* ===== FEATURES ===== */
-.grid-features {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
+.visual-protocol {
+  font-size: var(--text-caption);
+  color: var(--color-mist-gray);
+  font-weight: var(--font-weight-semibold);
 }
 
-@media (max-width: 900px) { .grid-features { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 480px) { .grid-features { grid-template-columns: 1fr; } }
-
-.feature-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 28px 24px;
-    transition: all 0.3s;
+.visual-main-shield {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-16) 0;
+  text-align: center;
 }
 
-.feature-card:hover {
-    border-color: rgba(56,189,248,0.3);
-    transform: translateY(-4px);
-    background: var(--bg-card-hover);
+.shield-svg-wrap {
+  width: 96px;
+  height: 96px;
+  margin-bottom: var(--spacing-16);
+  color: var(--color-surfshark-teal);
 }
 
-.feature-icon {
-    font-size: 2rem;
-    margin-bottom: 14px;
-    display: block;
+.visual-shield-title {
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  margin-bottom: 4px;
 }
 
-.feature-title {
-    font-size: 1rem;
-    font-weight: 700;
-    margin-bottom: 8px;
+.visual-shield-sub {
+  font-size: var(--text-body-sm);
+  color: var(--color-mist-gray);
 }
 
-.feature-desc {
-    color: #94a3b8;
-    font-size: 0.875rem;
-    line-height: 1.6;
+.visual-metrics-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-12);
 }
 
-/* ===== DEVICES ===== */
-.grid-devices {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    gap: 16px;
+.metric-box {
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--color-graphite);
+  border-radius: var(--radius-xl);
+  padding: 12px 14px;
 }
 
-@media (max-width: 900px) { .grid-devices { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 480px) { .grid-devices { grid-template-columns: repeat(2, 1fr); } }
-
-.device-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 14px;
-    padding: 28px 16px;
-    text-align: center;
-    transition: all 0.3s;
+.metric-label {
+  font-size: var(--text-caption);
+  color: var(--color-mist-gray);
+  margin-bottom: 4px;
 }
 
-.device-card:hover {
-    border-color: rgba(56,189,248,0.35);
-    background: var(--bg-card-hover);
-    transform: translateY(-4px);
+.metric-value {
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
 }
 
-.device-icon {
-    font-size: 2.4rem;
-    margin-bottom: 10px;
-    display: block;
+/* ==========================================================================
+   Reviewer Avatar Strip & Trust Bar
+   ========================================================================== */
+.social-proof-strip {
+  padding-top: var(--spacing-48);
+  padding-bottom: var(--spacing-48);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-16);
 }
 
-.device-name {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: #94a3b8;
+.avatar-stack {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* ===== HOW TO CONNECT ===== */
-.steps {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-    position: relative;
+.avatar-circle {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 3px solid var(--surface-canvas);
+  margin-left: -12px;
+  background-color: var(--color-ash-gray);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  overflow: hidden;
+  user-select: none;
 }
 
-@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
-
-.step-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 32px 24px;
-    text-align: center;
-    transition: border-color 0.3s;
+.avatar-circle:first-child {
+  margin-left: 0;
 }
 
-.step-card:hover { border-color: var(--border-hover); }
+.avatar-circle.c1 { background: #3b82f6; }
+.avatar-circle.c2 { background: #1ebfbf; }
+.avatar-circle.c3 { background: #8b5cf6; }
+.avatar-circle.c4 { background: #fa3556; }
+.avatar-circle.c5 { background: #10b981; }
 
-.step-num {
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #0284c7, #a855f7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 800;
-    font-size: 1.1rem;
-    margin: 0 auto 18px;
-    box-shadow: 0 0 20px rgba(2,132,199,0.3);
+.stars-gold {
+  color: #ffb800;
+  letter-spacing: 2px;
 }
 
-.step-title {
-    font-size: 1rem;
-    font-weight: 700;
-    margin-bottom: 10px;
+.social-proof-caption {
+  font-size: var(--text-body-sm);
+  color: var(--color-slate);
 }
 
-.step-desc {
-    color: #94a3b8;
-    font-size: 0.875rem;
-    line-height: 1.6;
+/* ==========================================================================
+   Feature Cards (Light)
+   #ffffff background, 48px border-radius, 32px padding, no shadow, 1px #dadadd border
+   ========================================================================== */
+.grid-features-light {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-24);
 }
 
-/* ===== BILLING TOGGLE ===== */
-.billing-toggle {
-    display: flex;
-    justify-content: center;
-    gap: 4px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 4px;
-    width: fit-content;
-    margin: 0 auto 40px;
+.feature-card-light {
+  background-color: var(--surface-card);
+  border-radius: var(--radius-cards);
+  padding: var(--card-padding);
+  border: 1px solid var(--color-ash-gray);
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.2s ease, background-color 0.25s ease;
 }
 
-.billing-btn {
-    background: none;
-    border: none;
-    padding: 9px 20px;
-    border-radius: 7px;
-    color: #64748b;
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-family: var(--font-main);
-    position: relative;
+.feature-card-light:hover {
+  border-color: var(--color-surfshark-teal);
 }
 
-.billing-btn.active {
-    background: #0284c7;
-    color: #fff;
+.feature-icon-badge {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-2xl);
+  background-color: var(--surface-tinted-wash);
+  color: var(--color-surfshark-teal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--spacing-24);
+  flex-shrink: 0;
 }
 
-.save-badge {
-    position: absolute;
-    top: -9px;
-    right: -6px;
-    background: #22c55e;
-    color: #fff;
-    font-size: 0.58rem;
-    padding: 2px 5px;
-    border-radius: 4px;
-    font-weight: 700;
-    line-height: 1.4;
+.feature-icon-badge svg {
+  width: 28px;
+  height: 28px;
 }
 
-/* ===== PRICING ===== */
-.grid-pricing {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
+.feature-title-light {
+  font-size: var(--text-heading-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-charcoal-ink);
+  line-height: var(--leading-heading-sm);
+  margin-bottom: var(--spacing-12);
 }
 
-@media (max-width: 950px) {
-    .grid-pricing { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
+.feature-desc-light {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-slate);
 }
 
-.price-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
+/* ==========================================================================
+   Supported Devices Section (Tide Tint surface wash)
+   ========================================================================== */
+.devices-container {
+  background-color: var(--surface-tinted-wash);
+  border-radius: var(--radius-cards);
+  padding: 48px 36px;
+  border: 1px solid var(--color-ash-gray);
+  transition: background-color 0.25s ease, border-color 0.25s ease;
 }
 
-.price-card:hover {
-    transform: translateY(-4px);
-    border-color: var(--border-hover);
-    background: var(--bg-card-hover);
+.grid-devices-list {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--spacing-16);
+  margin-top: var(--spacing-32);
 }
 
-.price-card.featured {
-    border-color: #0284c7;
-    background: linear-gradient(180deg, #12151c 0%, #0d1015 100%);
+.device-item-card {
+  background-color: var(--surface-card);
+  border-radius: var(--radius-2xl);
+  padding: 24px 16px;
+  border: 1px solid var(--color-ash-gray);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  transition: border-color 0.2s ease, transform 0.15s ease, background-color 0.25s ease;
 }
 
-.price-card.featured::before {
-    content: 'ОБХОД ГЛУШИЛОК';
-    position: absolute;
-    top: 24px;
-    right: -35px;
-    background: #0284c7;
-    color: #fff;
-    font-size: 0.6rem;
-    font-weight: 700;
-    padding: 4px 35px;
-    transform: rotate(45deg);
+.device-item-card:hover {
+  border-color: var(--color-surfshark-teal);
+  transform: translateY(-2px);
 }
 
-.card-name {
-    font-size: 1.1rem;
-    font-weight: 700;
-    margin-bottom: 8px;
+.device-icon-wrap {
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--spacing-12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.card-price {
-    font-size: 2rem;
-    font-weight: 800;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: baseline;
-    gap: 4px;
+.device-icon-img {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
 }
 
-.card-price span {
-    font-size: 0.9rem;
-    color: #64748b;
-    font-weight: 400;
+.device-title {
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-charcoal-ink);
+  margin-bottom: 4px;
 }
 
-.card-price .price-val {
-    font-size: inherit;
-    color: inherit;
-    font-weight: inherit;
+.device-badge-app {
+  font-size: var(--text-caption);
+  color: var(--color-slate);
 }
 
-.card-features {
-    list-style: none;
-    margin-bottom: 24px;
-    flex-grow: 1;
+/* ==========================================================================
+   Feature Card (Dark) — How to Connect Section
+   ========================================================================== */
+.feature-panel-dark {
+  background-color: var(--surface-dark-panel);
+  border-radius: var(--radius-cards);
+  padding: 56px 48px;
+  color: var(--color-pure-white);
+  border: 1px solid var(--color-graphite);
 }
 
-.card-features li {
-    font-size: 0.9rem;
-    color: #94a3b8;
-    margin-bottom: 12px;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
+.panel-header-dark {
+  text-align: center;
+  max-width: 680px;
+  margin: 0 auto 48px auto;
 }
 
-.card-features li.disabled {
-    color: #475569;
-    text-decoration: line-through;
+.panel-title-dark {
+  font-size: var(--text-heading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  margin-bottom: var(--spacing-12);
 }
 
-.card-features li::before {
-    content: '✓';
-    color: var(--accent);
-    font-weight: bold;
-    flex-shrink: 0;
+.panel-sub-dark {
+  font-size: var(--text-body);
+  color: var(--color-mist-gray);
 }
 
-.card-features li.disabled::before {
-    content: '✕';
-    color: #475569;
+.grid-steps-three {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-24);
 }
 
-.bot-sub-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 24px;
+.step-card-dark {
+  background-color: var(--surface-deep-abyss);
+  border-radius: var(--radius-3xl);
+  padding: var(--card-padding);
+  border: 1px solid var(--color-graphite);
+  display: flex;
+  flex-direction: column;
 }
 
-.bot-sub-item {
-    background: rgba(255,255,255,0.03);
-    border: 1px solid var(--border);
-    padding: 10px 14px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.85rem;
+.step-num-badge {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 2px solid var(--color-surfshark-teal);
+  color: var(--color-surfshark-teal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-heading-sm);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--spacing-20);
 }
 
-.bot-sub-item span { color: #94a3b8; }
-.bot-sub-item strong { color: #fff; }
-
-.price-val { transition: opacity 0.15s; }
-.price-val.updating { opacity: 0; }
-
-.btn-card {
-    display: block;
-    text-align: center;
-    padding: 12px;
-    border-radius: 8px;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-    margin-top: auto;
+.step-title-dark {
+  font-size: var(--text-heading-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  margin-bottom: var(--spacing-12);
 }
 
-.btn-card-sec {
-    background: #1e293b;
-    color: var(--text-main);
-    border: 1px solid var(--border);
+.step-desc-dark {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-mist-gray);
 }
-.btn-card-sec:hover { background: #334155; }
 
-.btn-card-primary { background: #0284c7; color: #fff; }
-.btn-card-primary:hover { background: #0369a1; box-shadow: 0 0 15px rgba(2,132,199,0.3); }
+/* ==========================================================================
+   Pricing Section
+   ========================================================================== */
+.pricing-section {
+  padding-top: var(--section-gap);
+  padding-bottom: var(--section-gap);
+}
 
-/* ===== FAQ ===== */
-.faq-list {
-    max-width: 760px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+.billing-toggle-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 48px;
+}
+
+.billing-toggle-pill {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--surface-card);
+  border: 1px solid var(--color-ash-gray);
+  border-radius: var(--radius-pills);
+  padding: 4px;
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+
+.billing-opt-btn {
+  border-radius: var(--radius-pills);
+  padding: 10px 24px;
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-slate);
+  transition: all 0.2s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.billing-opt-btn.active {
+  background-color: var(--color-charcoal-ink);
+  color: var(--color-pure-white);
+}
+
+[data-theme="dark"] .billing-opt-btn.active {
+  background-color: #242a33;
+  color: var(--color-pure-white);
+}
+
+.promo-discount-badge {
+  background-color: var(--color-promo-gold);
+  color: var(--color-carbon);
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-bold);
+  padding: 2px 8px;
+  border-radius: var(--radius-links);
+  line-height: 1.2;
+}
+
+.grid-pricing-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-24);
+  align-items: stretch;
+}
+
+.pricing-card {
+  background-color: var(--surface-card);
+  border-radius: var(--radius-cards);
+  padding: 40px 32px;
+  border: 1px solid var(--color-ash-gray);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+
+/* Featured card in pricing */
+.pricing-card.featured-plan {
+  border: 2px solid var(--color-surfshark-teal);
+  background-color: var(--surface-card);
+}
+
+.pricing-card-badge {
+  position: absolute;
+  top: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--color-surfshark-teal);
+  color: var(--color-charcoal-ink);
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-bold);
+  padding: 4px 18px;
+  border-radius: var(--radius-pills);
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .pricing-card-badge {
+  color: #0c0e12;
+}
+
+.pricing-plan-name {
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-charcoal-ink);
+  margin-bottom: var(--spacing-8);
+}
+
+.pricing-plan-price {
+  font-size: var(--text-heading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-charcoal-ink);
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: var(--spacing-24);
+}
+
+.pricing-plan-price span.term {
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-slate);
+}
+
+.price-val {
+  transition: opacity 0.15s ease;
+}
+
+.price-val.updating {
+  opacity: 0;
+}
+
+/* Sub-plan tier chips */
+.sub-plan-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  margin-bottom: var(--spacing-24);
+  padding: 12px;
+  background-color: var(--surface-canvas);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-ash-gray);
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+
+.sub-plan-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--text-body-sm);
+  color: var(--color-charcoal-ink);
+}
+
+.sub-plan-row span {
+  color: var(--color-slate);
+}
+
+.sub-plan-row strong {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Pricing features checkmarks */
+.pricing-features-list {
+  list-style: none;
+  margin-bottom: var(--spacing-32);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+}
+
+.pricing-features-list li {
+  font-size: var(--text-body-sm);
+  line-height: 1.5;
+  color: var(--color-charcoal-ink);
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.pricing-features-list li.disabled-feature {
+  color: var(--color-mist-gray);
+  text-decoration: line-through;
+}
+
+.pricing-check-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-surfshark-teal);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.pricing-cross-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-mist-gray);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.pricing-card .btn-coral,
+.pricing-card .btn-dark {
+  width: 100%;
+  margin-top: auto;
+}
+
+/* ==========================================================================
+   FAQ Accordion List
+   ========================================================================== */
+.faq-section-wrapper {
+  max-width: 840px;
+  margin: 0 auto;
+}
+
+.faq-accordion-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
 }
 
 .faq-item {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    overflow: hidden;
-    transition: border-color 0.25s;
+  background-color: var(--surface-card);
+  border: 1px solid var(--color-ash-gray);
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  transition: border-color 0.2s ease, background-color 0.25s ease;
 }
 
-.faq-item.open { border-color: rgba(56,189,248,0.3); }
-
-.faq-q {
-    width: 100%;
-    background: none;
-    border: none;
-    padding: 20px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    color: var(--text-main);
-    font-size: 0.95rem;
-    font-weight: 600;
-    font-family: var(--font-main);
-    text-align: left;
-    gap: 16px;
+.faq-item.open {
+  border-color: var(--color-surfshark-teal);
 }
 
-.faq-q:hover { background: rgba(255,255,255,0.02); }
-
-.faq-icon {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    border: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-    flex-shrink: 0;
-    transition: all 0.3s;
-    color: var(--accent);
-    line-height: 1;
+.faq-question-btn {
+  width: 100%;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+  text-align: left;
+  font-size: var(--text-subheading);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-charcoal-ink);
+  cursor: pointer;
+  background: transparent;
 }
 
-.faq-item.open .faq-icon {
-    transform: rotate(45deg);
-    border-color: var(--accent);
+.faq-toggle-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--surface-tinted-wash);
+  color: var(--color-surfshark-teal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
 }
 
-.faq-a {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.35s ease;
+.faq-toggle-icon svg {
+  width: 16px;
+  height: 16px;
 }
 
-.faq-a-inner {
-    padding: 0 24px 22px;
-    color: #94a3b8;
-    font-size: 0.9rem;
-    line-height: 1.7;
+.faq-item.open .faq-toggle-icon {
+  transform: rotate(45deg);
 }
 
-/* ===== REVIEWS ===== */
-.grid-reviews {
-    display: grid;
+.faq-answer-collapse {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.35s ease;
+}
+
+.faq-answer-content {
+  padding: 0 24px 24px 24px;
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-slate);
+}
+
+/* ==========================================================================
+   Testimonial Block & Review Strip
+   ========================================================================== */
+.testimonial-block-hero {
+  background-color: var(--surface-card);
+  border-radius: var(--radius-cards);
+  border: 1px solid var(--color-ash-gray);
+  padding: 56px 48px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: var(--spacing-48);
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+
+.testimonial-quote {
+  font-size: var(--text-heading);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-heading);
+  color: var(--color-charcoal-ink);
+  max-width: 820px;
+  margin-bottom: var(--spacing-24);
+}
+
+.testimonial-author {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-caption);
+  text-transform: uppercase;
+  color: var(--color-charcoal-ink);
+  margin-bottom: 4px;
+}
+
+.testimonial-subinfo {
+  font-size: var(--text-body-sm);
+  color: var(--color-slate);
+  margin-bottom: var(--spacing-32);
+}
+
+.grid-reviews-two {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-24);
+}
+
+.review-item-card {
+  background-color: var(--surface-card);
+  border: 1px solid var(--color-ash-gray);
+  border-radius: var(--radius-3xl);
+  padding: var(--card-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+
+.review-card-top {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+
+.review-avatar-box {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--color-charcoal-ink);
+  color: var(--color-pure-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-subheading);
+  flex-shrink: 0;
+}
+
+[data-theme="dark"] .review-avatar-box {
+  background-color: #242a33;
+}
+
+.review-user-name {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-body);
+  color: var(--color-charcoal-ink);
+}
+
+.review-verified-badge {
+  font-size: var(--text-caption);
+  color: #10b981;
+  font-weight: var(--font-weight-semibold);
+}
+
+.review-quote-text {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-slate);
+}
+
+/* ==========================================================================
+   Support CTA Panel (Dark Panel)
+   ========================================================================== */
+.support-panel-dark {
+  background-color: var(--surface-dark-panel);
+  border-radius: var(--radius-cards);
+  padding: 56px 48px;
+  color: var(--color-pure-white);
+  border: 1px solid var(--color-graphite);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.support-title {
+  font-size: var(--text-heading);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  margin-bottom: var(--spacing-16);
+  max-width: 680px;
+}
+
+.support-desc {
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-mist-gray);
+  max-width: 580px;
+  margin-bottom: var(--spacing-32);
+}
+
+/* ==========================================================================
+   Site-Wide Footer
+   ========================================================================== */
+.site-footer {
+  background-color: var(--surface-dark-panel);
+  color: var(--color-pure-white);
+  padding-top: var(--spacing-48);
+  padding-bottom: var(--spacing-48);
+  border-top: 1px solid var(--color-graphite);
+  margin-top: var(--section-gap);
+}
+
+.footer-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--spacing-32);
+  border-bottom: 1px solid var(--color-graphite);
+  margin-bottom: var(--spacing-40);
+  flex-wrap: wrap;
+  gap: var(--spacing-20);
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-heading-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+}
+
+.footer-logo .brand-name {
+  color: var(--color-pure-white);
+}
+
+.footer-logo .brand-name span {
+  color: var(--color-surfshark-teal);
+}
+
+.footer-tagline {
+  font-size: var(--text-body-sm);
+  color: var(--color-mist-gray);
+}
+
+.footer-columns-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-32);
+  margin-bottom: var(--spacing-48);
+}
+
+.footer-col-title {
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-pure-white);
+  margin-bottom: var(--spacing-16);
+  letter-spacing: 0.5px;
+}
+
+.footer-links-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+}
+
+.footer-links-list a {
+  font-size: var(--text-body);
+  color: var(--color-mist-gray);
+  transition: color 0.2s ease;
+}
+
+.footer-links-list a:hover {
+  color: var(--color-surfshark-teal);
+}
+
+.footer-bottom-bar {
+  padding-top: var(--spacing-24);
+  border-top: 1px solid var(--color-graphite);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--text-caption);
+  color: var(--color-mist-gray);
+  flex-wrap: wrap;
+  gap: var(--spacing-12);
+}
+
+/* ==========================================================================
+   Scroll Reveal Animations
+   ========================================================================== */
+.reveal {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ==========================================================================
+   Responsive Breakpoints
+   ========================================================================== */
+@media (max-width: 1024px) {
+  .hero-card-dark {
+    grid-template-columns: 1fr;
+    border-radius: var(--radius-cards);
+    padding: 48px 36px 64px 36px;
+  }
+
+  .hero-headline {
+    font-size: var(--text-heading-lg);
+    line-height: var(--leading-heading-lg);
+  }
+
+  .grid-features-light {
     grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
+  }
+
+  .grid-devices-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid-pricing-cards {
+    grid-template-columns: 1fr;
+    max-width: 480px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .grid-steps-three {
+    grid-template-columns: 1fr;
+  }
+
+  .grid-reviews-two {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-columns-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
-@media (max-width: 768px) { .grid-reviews { grid-template-columns: 1fr; } }
+@media (max-width: 820px) {
+  nav.main-nav,
+  .nav-actions .btn-dark {
+    display: none;
+  }
 
-.review-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 24px;
-    transition: border-color 0.2s;
-}
-
-.review-card:hover { border-color: var(--border-hover); }
-
-.review-header {
+  .burger-btn {
     display: flex;
-    align-items: center;
-    gap: 14px;
-    margin-bottom: 14px;
-}
+  }
 
-.review-avatar {
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #0284c7, #a855f7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-    font-size: 1rem;
-    flex-shrink: 0;
-}
+  .hero-card-dark {
+    padding: 40px 24px 56px 24px;
+    border-radius: var(--radius-3xl);
+  }
 
-.review-stars {
-    color: #fbbf24;
-    font-size: 0.8rem;
-    margin-bottom: 2px;
-}
+  .hero-headline {
+    font-size: 34px;
+    line-height: 1.15;
+    letter-spacing: -1px;
+  }
 
-.review-user {
-    font-weight: 700;
-    font-size: 0.95rem;
-}
+  .section-title,
+  .panel-title-dark,
+  .testimonial-quote,
+  .support-title {
+    font-size: var(--text-heading-sm);
+  }
 
-.review-verified {
-    font-size: 0.73rem;
-    color: #22c55e;
-}
+  .grid-features-light {
+    grid-template-columns: 1fr;
+  }
 
-.review-text {
-    color: #94a3b8;
-    font-size: 0.9rem;
-    line-height: 1.65;
-}
+  .devices-container {
+    padding: 32px 20px;
+  }
 
-/* ===== SUPPORT ===== */
-.support-inner {
-    text-align: center;
-}
+  .grid-devices-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-.support-card {
-    background: linear-gradient(135deg, #11141a 0%, #0a0c10 100%);
-    border: 1px solid var(--border);
-    padding: 52px 48px;
-    border-radius: 20px;
-    max-width: 700px;
-    margin: 0 auto;
-}
+  .footer-columns-grid {
+    grid-template-columns: 1fr;
+  }
 
-.support-card h3 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 12px;
-}
-
-.support-card p {
-    color: #94a3b8;
-    margin-bottom: 28px;
-    font-size: 0.95rem;
-}
-
-.btn-support {
-    display: inline-block;
-    background: #22c55e;
-    color: #fff;
-    padding: 12px 28px;
-    border-radius: 8px;
-    font-weight: 600;
-    text-decoration: none;
-    transition: all 0.2s;
-}
-
-.btn-support:hover {
-    background: #16a34a;
-    box-shadow: 0 0 20px rgba(34,197,94,0.25);
-    transform: translateY(-1px);
-}
-
-/* ===== FOOTER ===== */
-footer {
-    padding: 40px 0;
-    text-align: center;
-    border-top: 1px solid var(--border);
-    color: #475569;
-    font-size: 0.85rem;
+  .footer-top-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }