feat(ui): GorillaVPN SPA design + Katyusha emblem logo & RKN wall-breaker hero art + exact 239/649/1219/2299 tariffs

This commit is contained in:
Hermes Virtual Office Bot 2026-10-21 13:05:22 +00:00
parent f8e13f8456
commit b08309827c
3 changed files with 1269 additions and 299 deletions

View File

@ -5,7 +5,7 @@
## Источники и референсы, переданные в UX/UI и Frontend: ## Источники и референсы, переданные в UX/UI и Frontend:
### 1. [🎯 Ваш референс-образец: Gorilla](https://gorillavpn.pro/) ### 1. [🎯 Ваш референс-образец: Gorilla](https://gorillavpn.pro/)
- **URL:** https://gorillavpn.pro/ - **URL:** https://gorillavpn.pro/
- **Что берём в проект:** Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов. - **Что берём в проект:** Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽
### 2. [Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)](https://mullvad.net/en) ### 2. [Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)](https://mullvad.net/en)
- **URL:** https://mullvad.net/en - **URL:** https://mullvad.net/en

View File

@ -3,210 +3,695 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title> <title>Катюша VPN — Свободный интернет без стен и блокировок</title>
<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=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg-deep: #04100b;
--bg-card: #081d14;
--bg-card-hover: #0d2b1e;
--mint: #4ade80;
--mint-bright: #22c55e;
}
body {
font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep);
color: #ecfdf5;
background-image:
radial-gradient(circle at 75% 22%, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.10) 0%, transparent 50%),
linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}
.font-unbounded {
font-family: 'Unbounded', sans-serif;
}
/* GorillaVPN signature chamfered corners */
.gorilla-card {
background: linear-gradient(165deg, rgba(11, 37, 26, 0.92) 0%, rgba(5, 19, 13, 0.96) 100%);
border: 1px solid rgba(74, 222, 128, 0.22);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(74, 222, 128, 0.15);
}
.gorilla-btn {
background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
color: #03150c;
font-weight: 800;
transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.35);
}
.gorilla-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 38px rgba(74, 222, 128, 0.6);
filter: brightness(1.05);
}
@keyframes radarSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.radar-sweep {
background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.38) 0deg, rgba(74, 222, 128, 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.node-pulse {
animation: pulseGlow 2.2s infinite;
}
</style>
</head> </head>
<body class="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white"> <body class="min-h-screen selection:bg-emerald-400 selection:text-slate-950">
<!-- Navbar -->
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30"> <!-- Top Navbar (GorillaVPN Pill Header Style + Custom Circular Katyusha Emblem Logo) -->
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <header class="sticky top-0 z-40 px-4 pt-3">
<div class="flex items-center gap-3"> <div class="max-w-7xl mx-auto bg-[#061810]/90 backdrop-blur-xl border border-emerald-500/25 rounded-2xl px-5 py-3 flex items-center justify-between shadow-2xl">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div> <a href="#" class="flex items-center gap-3.5 group">
<div class="relative w-12 h-12 rounded-full p-0.5 bg-gradient-to-tr from-emerald-400 via-green-300 to-rose-500 shadow-lg shadow-emerald-500/25">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-[#04100b]" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-400 border-2 border-[#04100b]"></span>
</div>
<div> <div>
<span class="font-bold text-lg tracking-tight">Катюша VPN </span> <span class="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white group-hover:text-emerald-300 transition">Катюша VPN</span>
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span> <span class="block text-[10px] uppercase tracking-widest text-emerald-400/90 font-semibold">Пробиваем любые стены · VLESS Reality</span>
</div> </div>
</div> </a>
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
<a href="#features" class="hover:text-white">Преимущества</a> <nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-emerald-100/80">
<a href="#servers" class="hover:text-white">Локации (42 страны)</a> <a href="#how-it-works" class="hover:text-emerald-300 transition">Как подключить</a>
<a href="#pricing" class="hover:text-white">Тарифы</a> <a href="#art-showcase" class="hover:text-emerald-300 transition">Катюша в деле</a>
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a> <a href="#tariffs" class="hover:text-emerald-300 transition">Тарифы</a>
<a href="#cabinet" class="hover:text-emerald-300 transition">Кабинет</a>
<a href="#faq" class="hover:text-emerald-300 transition">FAQ</a>
</nav> </nav>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a> <button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#0b251a] hover:bg-[#113828] border border-emerald-500/30 text-xs font-bold text-emerald-200 transition">
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a> 🔑 Личный кабинет
</button>
<a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight">
Подключить →
</a>
</div> </div>
</div> </div>
</header> </header>
<main class="max-w-6xl mx-auto px-6 py-12 space-y-20"> <main class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 pb-24 space-y-28">
<!-- Hero Section -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center"> <!-- HERO SECTION (GorillaVPN Layout: Left Unbounded Typography + Katyusha Wall-Breaker Card, Right Chamfered Trial & Interactive Radar) -->
<div class="lg:col-span-7 space-y-6"> <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs"> <!-- Left Column (7 cols) -->
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span> <div class="lg:col-span-7 flex flex-col justify-between space-y-6">
<div class="space-y-5">
<div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-emerald-950/90 border border-emerald-400/30 text-emerald-300 text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div> </div>
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок <h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[52px] leading-[1.08] tracking-tight uppercase text-white">
КАТЮША <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-green-400 to-emerald-200">ПРОБИВАЕТ СТЕНЫ</span> БЛОКИРОВОК
</h1> </h1>
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении. <p class="text-emerald-100/80 text-base sm:text-lg leading-relaxed max-w-2xl">
Быстрый VPN без сложной настройки: подключите телефон, ноутбук и телевизор за пару минут. Протокол <b class="text-emerald-300">Xray VLESS Reality</b> сносит любые фаерволы и замедления — YouTube 4K, Instagram, Discord и ChatGPT летают на полной скорости.
</p> </p>
<div class="flex flex-wrap gap-4 pt-2">
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition"> <div class="flex flex-wrap items-center gap-4 pt-1">
🚀 Получить доступ (от 199 ₽/мес) <button onclick="openTrialModal()" class="gorilla-btn px-7 py-4 rounded-xl text-sm sm:text-base inline-flex items-center gap-2.5">
<span>Получить 2 дня за 0 ₽</span>
<span class="text-lg">→</span>
</button>
<a href="#tariffs" class="px-6 py-4 rounded-xl bg-[#092117] hover:bg-[#0f3324] border border-emerald-400/30 text-emerald-100 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес)
</a> </a>
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition"> </div>
⚡ Тестовый ключ на 24 часа </div>
<!-- Katyusha Hero Artwork Card (Custom Generated Art: Katyusha Firing Laser Cannon Through RKN Wall) -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group">
<div class="relative rounded-xl overflow-hidden border border-emerald-400/30 aspect-[16/9] bg-[#030c08]">
<img src="/assets/vpn-7561/hero.jpg" alt="Катюша пробивает стену блокировок РКН" class="w-full h-full object-cover object-center group-hover:scale-[1.02] transition duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-[#030d08] via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2">
<div class="bg-[#04120c]/90 backdrop-blur-md border border-emerald-400/30 rounded-xl px-3.5 py-2">
<div class="text-[10px] uppercase tracking-widest text-emerald-400 font-bold">🔥 Фирменный дизайн-код · Катюша против блокировок</div>
<div class="text-xs sm:text-sm font-bold text-white">Прямой плазменный пробой DPI и стен цензуры без потери скорости</div>
</div>
<span class="px-3 py-1.5 rounded-lg bg-emerald-400 text-[#03150c] font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов
</span>
</div>
</div>
</div>
</div>
<!-- Right Column (5 cols): Authentic GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar -->
<div class="lg:col-span-5 flex">
<div class="gorilla-card w-full p-6 sm:p-7 flex flex-col justify-between space-y-6">
<div class="space-y-4">
<div class="flex items-start justify-between gap-3">
<div>
<div class="text-[11px] uppercase tracking-widest text-emerald-400/80 font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Katyusha Trial · 2 дня</h2>
</div>
<span class="px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 text-xs font-bold whitespace-nowrap">
● Активен
</span>
</div>
<!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5">
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-emerald-400 mt-0.5">∞ ГБ</div>
</div>
</div>
</div>
<!-- Interactive Circular Radar (GorillaVPN Signature Element) -->
<div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border border-emerald-500/30 bg-[#030f0a] flex items-center justify-center overflow-hidden shadow-inner">
<!-- Rotating radar sweep -->
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div>
<!-- Concentric rings -->
<div class="absolute w-48 h-48 rounded-full border border-emerald-500/20 pointer-events-none"></div>
<div class="absolute w-28 h-28 rounded-full border border-emerald-500/25 pointer-events-none"></div>
<div class="absolute inset-x-0 h-px bg-emerald-500/15 pointer-events-none"></div>
<div class="absolute inset-y-0 w-px bg-emerald-500/15 pointer-events-none"></div>
<!-- Center Katyusha Emblem Node -->
<div class="relative z-10 w-14 h-14 rounded-full p-0.5 bg-emerald-400 shadow-lg shadow-emerald-500/50">
<img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" />
</div>
<!-- Country Nodes on the Radar -->
<button onclick="selectRadarCountry('Нидерланды · Амстердам', '14 мс', '940 Мбит/с')" class="absolute top-5 left-10 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition node-pulse">
🇳🇱 Нидерланды
</button>
<button onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇩🇪 Германия
</button>
<button onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇫🇮 Финляндия
</button>
<button onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇹🇷 Турция
</button>
<button onclick="selectRadarCountry('Польша · Варшава', '16 мс', '925 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 left-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇵🇱 Польша
</button>
<button onclick="selectRadarCountry('Швеция · Стокгольм', '15 мс', '950 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 right-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇸🇪 Швеция
</button> </button>
</div> </div>
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div> <!-- Selected Radar Node Status + CTA -->
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div> <div class="space-y-3">
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div> <div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div>
<span class="text-emerald-200/60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div>
<div class="text-right">
<span id="radarPing" class="text-emerald-400 font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] text-emerald-200/70">Канал: 940 Мбит/с</span>
</div> </div>
</div> </div>
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) --> <button onclick="openTrialModal()" class="gorilla-btn w-full py-4 rounded-xl text-sm sm:text-base flex items-center justify-center gap-2">
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5"> <span>Начать пробный доступ</span>
<span>→</span>
</button>
</div>
</div>
</div>
</section>
<!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты (Exact GorillaVPN Device Tabs + 4 Steps) -->
<section id="how-it-works" class="space-y-8">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">КАК ПОДКЛЮЧИТЬ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2>
</div>
<p class="text-sm text-emerald-100/70 max-w-md">
Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик.
</p>
</div>
<!-- 5 Interactive Platform Pills -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" id="deviceTabs">
<button onclick="selectDeviceTab(this, 'iOS', 'Streisand / V2Box из App Store')" class="device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg">
<div class="font-unbounded text-sm">📱 iOS</div>
<div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div>
</button>
<button onclick="selectDeviceTab(this, 'Android', 'Hiddify / v2rayNG из Google Play или APK')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Смартфоны и планшеты</div>
</button>
<button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs text-emerald-200/60 mt-0.5">MacBook и iMac</div>
</button>
<button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs text-emerald-200/60 mt-0.5">ПК и ноутбуки</div>
</button>
<button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Телевизоры и приставки</div>
</button>
</div>
<!-- 4 Connection Steps (GorillaVPN Structure) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="text-emerald-300">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="text-emerald-300">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Катюша пробивает любые блокировки: открывайте YouTube 4K, Instagram, звонки и игры без ограничений.
</p>
</div>
</div>
</section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽ + Promo & Gift Controls) -->
<section id="tariffs" class="space-y-8">
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2>
<p class="text-sm text-emerald-100/75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p>
</div>
<!-- Promo Code & Gift Toggle (From GorillaVPN Tariffs Block) -->
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center bg-[#071c13] border border-emerald-500/30 rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-emerald-200/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 ml-2">Применить</button>
</div>
<label class="cursor-pointer inline-flex items-center gap-2 bg-[#071c13] border border-emerald-500/30 rounded-xl px-3.5 py-2 text-xs text-emerald-100">
<input type="checkbox" id="giftToggle" class="accent-emerald-400 rounded" />
<span>🎁 Подарить подписку другу</span>
</label>
</div>
</div>
<div id="promoBanner" class="hidden bg-emerald-500/15 border border-emerald-400/40 rounded-xl px-4 py-2.5 text-xs text-emerald-300 font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div>
<!-- 4 Tariff Cards Grid (Exact GorillaVPN Numbers) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<!-- Plan 1: 1 Month (239 ₽) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span> <span class="font-unbounded font-bold text-lg text-white">1 месяц</span>
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span> <span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-950 border border-emerald-500/30 text-emerald-300">Старт</span>
</div> </div>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
<div> <div>
<div class="text-xs text-slate-400">Текущая локация</div> <div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</div>
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div> <div class="text-xs text-emerald-300/80 mt-1">239 ₽/мес · Попробовать на месяц</div>
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</div>
</div> </div>
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs"> <ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option> <li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option> <li class="flex items-center gap-2">✅ <span>Все локации (VLESS Reality)</span></li>
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option> <li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option> </ul>
</select>
</div> </div>
<div class="grid grid-cols-2 gap-3 text-xs"> <button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3"> Оформить за 239 ₽ →
<span class="text-slate-400">Download</span> </button>
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
</div> </div>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
<span class="text-slate-400">Upload</span> <!-- Plan 2: 3 Months (649 ₽ — Популярный, Экономия 10%) -->
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</div> <div class="gorilla-card p-6 flex flex-col justify-between relative ring-2 ring-emerald-400/70">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">3 месяца</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-400 text-[#03150c] font-extrabold uppercase">Популярный</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-emerald-300">649 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-white font-semibold">216 ₽/мес</span>
<span class="text-[11px] px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-bold">Экономия 10%</span>
</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Оптимальный старт</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Приоритетный канал YouTube 4K</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('3 месяца', '649 ₽', '216 ₽/мес (Экономия 10%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Выбрать 3 месяца →
</button>
</div>
<!-- Plan 3: 6 Months (1 219 ₽ — Экономия 15%) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">6 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 font-bold">Экономия 15%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">1 219 ₽</div>
<div class="text-xs text-emerald-300/80 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Защита от DPI и авто-ротация узлов</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('6 месяцев', '1 219 ₽', '203 ₽/мес (Экономия 15%)')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
Выбрать 6 месяцев →
</button>
</div>
<!-- Plan 4: 12 Months (2 299 ₽ — Выгодно, Экономия 20%) -->
<div class="gorilla-card p-6 flex flex-col justify-between relative border-emerald-400/50">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">12 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-amber-400 text-slate-950 font-extrabold uppercase">Выгодно · -20%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">2 299 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-emerald-300 font-bold">191 ₽/мес</span>
<span class="text-[11px] text-emerald-200/60">Максимальная выгода</span>
</div> </div>
</div> </div>
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1"> <ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li>
<span class="text-emerald-400 font-mono">AES-256-GCM</span> <li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>VIP-серверы с минимальным пингом</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('12 месяцев', '2 299 ₽', '191 ₽/мес (Экономия 20%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Забрать год за 2 299 ₽ →
</button>
</div> </div>
</div> </div>
</section> </section>
<!-- Pricing Section --> <!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ — Всё управление в одном кабинете (GorillaVPN Section) -->
<section id="pricing" class="space-y-8"> <section id="cabinet" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="text-center max-w-2xl mx-auto space-y-2"> <div class="lg:col-span-5 space-y-5">
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2> <div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете
</h2>
<p class="text-sm text-emerald-100/75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p>
<div class="grid grid-cols-2 gap-3 pt-2">
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">5 устройств</div>
<div class="text-xs text-emerald-100/70 mt-1">на одну подписку без доплат</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">6 платформ</div>
<div class="text-xs text-emerald-100/70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs text-emerald-100/70 mt-1">для мгновенного подключения</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs text-emerald-100/70 mt-1">прозрачная история платежей</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 1 Month -->
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
<div>
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
<li>✅ До 5 устройств одновременно</li>
<li>✅ Все 42 страны (10 Gbps)</li>
<li>✅ Протоколы VLESS Reality + WireGuard</li>
<li>✅ YouTube 4K без рекламы</li>
</ul>
</div> </div>
<button onclick="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
</div> </div>
<!-- 1 Year (Best Value) --> <!-- Interactive Cabinet Preview Mock -->
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl"> <div class="lg:col-span-7 gorilla-card p-6 sm:p-8 space-y-5">
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span> <div class="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-emerald-500/20">
<div class="flex items-center gap-3">
<img src="/assets/vpn-7561/logo.jpg" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div> <div>
<div class="text-sm font-semibold text-emerald-300">На 1 год</div> <div class="font-unbounded font-bold text-sm text-white">Кабинет бойца · #KTY-7561</div>
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div> <div class="text-xs text-emerald-400">Подписка активна · Тариф «Оптимальный»</div>
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
<li>✅ До 10 устройств + роутер</li>
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
</ul>
</div> </div>
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button> </div>
<button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl bg-emerald-400/15 hover:bg-emerald-400/25 border border-emerald-400/40 text-emerald-300 text-xs font-bold transition">
📲 Показать QR-код ключа
</button>
</div> </div>
<!-- 6 Months --> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between"> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<div> <span class="text-emerald-200/60">Активные устройства</span>
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div> <div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div>
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div> <div class="text-[11px] text-emerald-400 mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div> </div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-300"> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<li>✅ До 5 устройств одновременно</li> <span class="text-emerald-200/60">Протокол маскировки</span>
<li>✅ Все 42 страны (10 Gbps)</li> <div class="font-unbounded font-bold text-base text-emerald-300 mt-1">VLESS Reality</div>
<li>✅ Защита от утечек WebRTC и DNS</li> <div class="text-[11px] text-emerald-200/60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
<li>✅ Гарантия возврата 30 дней</li> </div>
</ul> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<span class="text-emerald-200/60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div>
<div class="text-[11px] text-emerald-400 mt-0.5">Мгновенное продление</div>
</div> </div>
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
</div> </div>
</div> </div>
</section> </section>
<!-- Web References Analyzed by PM --> <!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) -->
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4"> <section id="faq" class="space-y-6">
<div> <div>
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3> <div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ВОПРОСЫ И ОТВЕТЫ</div>
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<details class="gorilla-card p-5 group open:border-emerald-400/50">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Почему Катюша VPN не блокируется провайдерами?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Сколько устройств можно подключить по одной подписке?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Какими способами можно оплатить подписку?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Режет ли VPN скорость и работает ли YouTube в 4K?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Все узлы подключены к каналам 10 Гбит/с в Нидерландах, Германии, Финляндии, Польше, Швеции и Турции. Видео 4K 60fps загружается мгновенно и без рекламы.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Можно ли подарить подписку другу?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Да! В блоке тарифов включите галочку «🎁 Подарить подписку другу» — после оплаты вы получите подарочный купон-ссылку, которую можно переслать в Telegram.
</p>
</details>
</div>
</section>
<!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t border-emerald-500/20 space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2">
<div>
<h3 class="text-xs font-unbounded font-bold text-emerald-400 uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3>
<p class="text-xs text-emerald-100/60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + сгенерированы фирменные ассеты Катюши (`logo.jpg` и `hero.jpg`)</p>
</div>
<a href="/" class="text-xs text-emerald-300 hover:underline">← Вернуться в панель управления Виртуальным Офисом</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="https://gorillavpn.pro/" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://gorillavpn.pro/" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div> <div class="text-xs font-bold text-emerald-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div>
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽</p>
</a> </a>
<a href="https://mullvad.net/en" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://mullvad.net/en" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div> <div class="text-xs font-bold text-emerald-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://mullvad.net/en</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a> </a>
<a href="https://protonvpn.com" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://protonvpn.com" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div> <div class="text-xs font-bold text-emerald-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://protonvpn.com</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
</a> </a>
<a href="https://amnezia.org" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://amnezia.org" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div> <div class="text-xs font-bold text-emerald-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://amnezia.org</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a> </a>
</div> </div>
</section> </section>
</main> </main>
<!-- Checkout / Free Trial Modal --> <!-- Interactive Checkout / Free Trial Modal -->
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div id="checkoutModal" class="hidden fixed inset-0 bg-black/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4"> <div class="gorilla-card max-w-lg w-full p-6 sm:p-7 space-y-5">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4> <div class="flex items-center gap-3">
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button> <img src="/assets/vpn-7561/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Katyusha Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs text-emerald-400">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div> </div>
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
</div> </div>
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button> <button onclick="closeCheckoutModal()" class="text-emerald-200/60 hover:text-white text-lg font-bold">✕</button>
</div>
<div class="bg-[#030d08] border border-emerald-500/30 rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] text-emerald-300">
<span>Ваша персональная VLESS Reality ссылка подписки:</span>
<button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button>
</div>
<div id="vlessKey" class="font-mono text-[11px] text-emerald-400 break-all select-all">
vless://katyusha-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Katyusha_VPN_10Gbps
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold">
<div class="bg-[#072015] border border-emerald-400/40 rounded-lg py-2 text-emerald-300">⚡ СБП QR</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💎 USDT / TON</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">⭐ TG Stars</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💳 Карта РФ</div>
</div>
<button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Подключить в 1 клик →
</button>
</div> </div>
</div> </div>
<script> <script>
function openCheckout(plan) { function selectRadarCountry(name, ping, speed) {
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan; document.getElementById('radarLoc').innerText = name;
document.getElementById('keyModal').classList.remove('hidden'); document.getElementById('radarPing').innerText = 'Пинг: ' + ping;
document.getElementById('radarSpeed').innerText = 'Канал: ' + speed;
}
function selectDeviceTab(btn, platform, appName) {
document.querySelectorAll('.device-tab').forEach(el => {
el.className = 'device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition';
});
btn.className = 'device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg';
document.getElementById('activeDeviceName').innerText = platform;
document.getElementById('activeDeviceApp').innerText = appName;
}
function applyPromo() {
const val = document.getElementById('promoInput').value.trim();
if (val) {
document.getElementById('promoBanner').classList.remove('hidden');
}
}
function openTrialModal() {
document.getElementById('modalTitle').innerText = 'Katyusha Trial · 48 часов за 0 ₽';
document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCheckoutModal(period, price, sub) {
const isGift = document.getElementById('giftToggle') && document.getElementById('giftToggle').checked;
document.getElementById('modalTitle').innerText = (isGift ? '🎁 Подарок: ' : 'Тариф: ') + period + ' — ' + price;
document.getElementById('modalSub').innerText = sub + ' · СБП / QR / Крипто / Stars';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCabinetModal() {
openTrialModal();
}
function closeCheckoutModal() {
document.getElementById('checkoutModal').classList.add('hidden');
} }
</script> </script>
</body> </body>

View File

@ -3,210 +3,695 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Катюша VPN — Быстрый VPN нового поколения (VLESS / WireGuard)</title> <title>Катюша VPN — Свободный интернет без стен и блокировок</title>
<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=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg-deep: #04100b;
--bg-card: #081d14;
--bg-card-hover: #0d2b1e;
--mint: #4ade80;
--mint-bright: #22c55e;
}
body {
font-family: 'Manrope', sans-serif;
background-color: var(--bg-deep);
color: #ecfdf5;
background-image:
radial-gradient(circle at 75% 22%, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
radial-gradient(circle at 20% 60%, rgba(16, 185, 129, 0.10) 0%, transparent 50%),
linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}
.font-unbounded {
font-family: 'Unbounded', sans-serif;
}
/* GorillaVPN signature chamfered corners */
.gorilla-card {
background: linear-gradient(165deg, rgba(11, 37, 26, 0.92) 0%, rgba(5, 19, 13, 0.96) 100%);
border: 1px solid rgba(74, 222, 128, 0.22);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(74, 222, 128, 0.15);
}
.gorilla-btn {
background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
color: #03150c;
font-weight: 800;
transition: all 0.2s ease;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.35);
}
.gorilla-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 38px rgba(74, 222, 128, 0.6);
filter: brightness(1.05);
}
@keyframes radarSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.radar-sweep {
background: conic-gradient(from 0deg, rgba(74, 222, 128, 0.38) 0deg, rgba(74, 222, 128, 0.0) 90deg, transparent 360deg);
animation: radarSweep 5s linear infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.node-pulse {
animation: pulseGlow 2.2s infinite;
}
</style>
</head> </head>
<body class="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white"> <body class="min-h-screen selection:bg-emerald-400 selection:text-slate-950">
<!-- Navbar -->
<header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30"> <!-- Top Navbar (GorillaVPN Pill Header Style + Custom Circular Katyusha Emblem Logo) -->
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <header class="sticky top-0 z-40 px-4 pt-3">
<div class="flex items-center gap-3"> <div class="max-w-7xl mx-auto bg-[#061810]/90 backdrop-blur-xl border border-emerald-500/25 rounded-2xl px-5 py-3 flex items-center justify-between shadow-2xl">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div> <a href="#" class="flex items-center gap-3.5 group">
<div class="relative w-12 h-12 rounded-full p-0.5 bg-gradient-to-tr from-emerald-400 via-green-300 to-rose-500 shadow-lg shadow-emerald-500/25">
<img src="/assets/vpn-7561/logo.jpg" alt="Катюша VPN Logo" class="w-full h-full object-cover rounded-full bg-[#04100b]" onerror="this.style.display='none'" />
<span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-emerald-400 border-2 border-[#04100b]"></span>
</div>
<div> <div>
<span class="font-bold text-lg tracking-tight">Катюша VPN </span> <span class="font-unbounded font-extrabold text-base md:text-lg tracking-wider uppercase text-white group-hover:text-emerald-300 transition">Катюша VPN</span>
<span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span> <span class="block text-[10px] uppercase tracking-widest text-emerald-400/90 font-semibold">Пробиваем любые стены · VLESS Reality</span>
</div> </div>
</div> </a>
<nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
<a href="#features" class="hover:text-white">Преимущества</a> <nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-emerald-100/80">
<a href="#servers" class="hover:text-white">Локации (42 страны)</a> <a href="#how-it-works" class="hover:text-emerald-300 transition">Как подключить</a>
<a href="#pricing" class="hover:text-white">Тарифы</a> <a href="#art-showcase" class="hover:text-emerald-300 transition">Катюша в деле</a>
<a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a> <a href="#tariffs" class="hover:text-emerald-300 transition">Тарифы</a>
<a href="#cabinet" class="hover:text-emerald-300 transition">Кабинет</a>
<a href="#faq" class="hover:text-emerald-300 transition">FAQ</a>
</nav> </nav>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a> <button onclick="openCabinetModal()" class="hidden sm:inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[#0b251a] hover:bg-[#113828] border border-emerald-500/30 text-xs font-bold text-emerald-200 transition">
<a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a> 🔑 Личный кабинет
</button>
<a href="#tariffs" class="gorilla-btn px-5 py-2.5 rounded-xl text-xs sm:text-sm tracking-tight">
Подключить →
</a>
</div> </div>
</div> </div>
</header> </header>
<main class="max-w-6xl mx-auto px-6 py-12 space-y-20"> <main class="max-w-7xl mx-auto px-4 sm:px-6 pt-10 pb-24 space-y-28">
<!-- Hero Section -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center"> <!-- HERO SECTION (GorillaVPN Layout: Left Unbounded Typography + Katyusha Wall-Breaker Card, Right Chamfered Trial & Interactive Radar) -->
<div class="lg:col-span-7 space-y-6"> <section class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-stretch">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs"> <!-- Left Column (7 cols) -->
<span>🛡 Протоколы Xray VLESS Reality + WireGuard</span> <div class="lg:col-span-7 flex flex-col justify-between space-y-6">
<div class="space-y-5">
<div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-emerald-950/90 border border-emerald-400/30 text-emerald-300 text-[11px] font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
УСТАНОВКА ЗА 3 МИНУТЫ · ПРОБНЫЙ ДОСТУП 48 ЧАСОВ
</div> </div>
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок <h1 class="font-unbounded font-black text-3xl sm:text-5xl xl:text-[52px] leading-[1.08] tracking-tight uppercase text-white">
КАТЮША <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-green-400 to-emerald-200">ПРОБИВАЕТ СТЕНЫ</span> БЛОКИРОВОК
</h1> </h1>
<p class="text-slate-300 text-base leading-relaxed max-w-2xl">
Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении. <p class="text-emerald-100/80 text-base sm:text-lg leading-relaxed max-w-2xl">
Быстрый VPN без сложной настройки: подключите телефон, ноутбук и телевизор за пару минут. Протокол <b class="text-emerald-300">Xray VLESS Reality</b> сносит любые фаерволы и замедления — YouTube 4K, Instagram, Discord и ChatGPT летают на полной скорости.
</p> </p>
<div class="flex flex-wrap gap-4 pt-2">
<a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition"> <div class="flex flex-wrap items-center gap-4 pt-1">
🚀 Получить доступ (от 199 ₽/мес) <button onclick="openTrialModal()" class="gorilla-btn px-7 py-4 rounded-xl text-sm sm:text-base inline-flex items-center gap-2.5">
<span>Получить 2 дня за 0 ₽</span>
<span class="text-lg">→</span>
</button>
<a href="#tariffs" class="px-6 py-4 rounded-xl bg-[#092117] hover:bg-[#0f3324] border border-emerald-400/30 text-emerald-100 font-bold text-sm sm:text-base transition">
Выбрать тариф (от 191 ₽/мес)
</a> </a>
<button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition"> </div>
⚡ Тестовый ключ на 24 часа </div>
<!-- Katyusha Hero Artwork Card (Custom Generated Art: Katyusha Firing Laser Cannon Through RKN Wall) -->
<div id="art-showcase" class="gorilla-card p-3 sm:p-4 relative overflow-hidden group">
<div class="relative rounded-xl overflow-hidden border border-emerald-400/30 aspect-[16/9] bg-[#030c08]">
<img src="/assets/vpn-7561/hero.jpg" alt="Катюша пробивает стену блокировок РКН" class="w-full h-full object-cover object-center group-hover:scale-[1.02] transition duration-500" />
<div class="absolute inset-0 bg-gradient-to-t from-[#030d08] via-transparent to-transparent opacity-80"></div>
<div class="absolute bottom-3 left-3 right-3 flex flex-wrap items-end justify-between gap-2">
<div class="bg-[#04120c]/90 backdrop-blur-md border border-emerald-400/30 rounded-xl px-3.5 py-2">
<div class="text-[10px] uppercase tracking-widest text-emerald-400 font-bold">🔥 Фирменный дизайн-код · Катюша против блокировок</div>
<div class="text-xs sm:text-sm font-bold text-white">Прямой плазменный пробой DPI и стен цензуры без потери скорости</div>
</div>
<span class="px-3 py-1.5 rounded-lg bg-emerald-400 text-[#03150c] font-unbounded font-extrabold text-xs uppercase shadow-lg">
10 Гбит/с · 0 логов
</span>
</div>
</div>
</div>
</div>
<!-- Right Column (5 cols): Authentic GorillaVPN Chamfered Trial Card + Interactive 6-Country Radar -->
<div class="lg:col-span-5 flex">
<div class="gorilla-card w-full p-6 sm:p-7 flex flex-col justify-between space-y-6">
<div class="space-y-4">
<div class="flex items-start justify-between gap-3">
<div>
<div class="text-[11px] uppercase tracking-widest text-emerald-400/80 font-bold">ПРОБНЫЙ ДОСТУП</div>
<h2 class="font-unbounded font-extrabold text-xl sm:text-2xl text-white mt-0.5">Katyusha Trial · 2 дня</h2>
</div>
<span class="px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-400/40 text-emerald-300 text-xs font-bold whitespace-nowrap">
● Активен
</span>
</div>
<!-- 3 GorillaVPN Stat Boxes -->
<div class="grid grid-cols-3 gap-2.5">
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Срок</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">48 часов</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Устройства</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-white mt-0.5">5</div>
</div>
<div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl p-3">
<div class="text-[11px] text-emerald-200/60">Трафик</div>
<div class="font-unbounded font-bold text-sm sm:text-base text-emerald-400 mt-0.5">∞ ГБ</div>
</div>
</div>
</div>
<!-- Interactive Circular Radar (GorillaVPN Signature Element) -->
<div class="relative mx-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border border-emerald-500/30 bg-[#030f0a] flex items-center justify-center overflow-hidden shadow-inner">
<!-- Rotating radar sweep -->
<div class="absolute inset-0 rounded-full radar-sweep pointer-events-none"></div>
<!-- Concentric rings -->
<div class="absolute w-48 h-48 rounded-full border border-emerald-500/20 pointer-events-none"></div>
<div class="absolute w-28 h-28 rounded-full border border-emerald-500/25 pointer-events-none"></div>
<div class="absolute inset-x-0 h-px bg-emerald-500/15 pointer-events-none"></div>
<div class="absolute inset-y-0 w-px bg-emerald-500/15 pointer-events-none"></div>
<!-- Center Katyusha Emblem Node -->
<div class="relative z-10 w-14 h-14 rounded-full p-0.5 bg-emerald-400 shadow-lg shadow-emerald-500/50">
<img src="/assets/vpn-7561/logo.jpg" alt="Center Radar" class="w-full h-full rounded-full object-cover" />
</div>
<!-- Country Nodes on the Radar -->
<button onclick="selectRadarCountry('Нидерланды · Амстердам', '14 мс', '940 Мбит/с')" class="absolute top-5 left-10 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition node-pulse">
🇳🇱 Нидерланды
</button>
<button onclick="selectRadarCountry('Германия · Франкфурт', '18 мс', '910 Мбит/с')" class="absolute top-12 right-4 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇩🇪 Германия
</button>
<button onclick="selectRadarCountry('Финляндия · Хельсинки', '11 мс', '980 Мбит/с')" class="absolute bottom-14 left-3 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇫🇮 Финляндия
</button>
<button onclick="selectRadarCountry('Турция · Стамбул', '29 мс', '860 Мбит/с')" class="absolute bottom-6 right-8 z-20 px-2.5 py-1 rounded-full bg-[#072217]/95 border border-emerald-400/50 text-[11px] font-bold text-emerald-200 hover:bg-emerald-400 hover:text-slate-950 transition">
🇹🇷 Турция
</button>
<button onclick="selectRadarCountry('Польша · Варшава', '16 мс', '925 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 left-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇵🇱 Польша
</button>
<button onclick="selectRadarCountry('Швеция · Стокгольм', '15 мс', '950 Мбит/с')" class="absolute top-1/2 -translate-y-1/2 right-2 z-20 px-2 py-0.5 rounded-full bg-[#072217]/90 border border-emerald-400/40 text-[10px] font-semibold text-emerald-300 hover:bg-emerald-400 hover:text-slate-950 transition">
🇸🇪 Швеция
</button> </button>
</div> </div>
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
<div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div> <!-- Selected Radar Node Status + CTA -->
<div><b class="text-white text-base block">5 устройств</b>По одной подписке</div> <div class="space-y-3">
<div><b class="text-white text-base block">0 логов</b>Независимый аудит</div> <div class="bg-[#04120c]/90 border border-emerald-500/25 rounded-xl px-4 py-2.5 flex items-center justify-between text-xs">
<div>
<span class="text-emerald-200/60 block text-[10px] uppercase">Выбранный узел пробоя</span>
<b id="radarLoc" class="text-white font-bold">Нидерланды · Амстердам</b>
</div>
<div class="text-right">
<span id="radarPing" class="text-emerald-400 font-mono font-bold block">Пинг: 14 мс</span>
<span id="radarSpeed" class="text-[11px] text-emerald-200/70">Канал: 940 Мбит/с</span>
</div> </div>
</div> </div>
<!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) --> <button onclick="openTrialModal()" class="gorilla-btn w-full py-4 rounded-xl text-sm sm:text-base flex items-center justify-center gap-2">
<div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5"> <span>Начать пробный доступ</span>
<span>→</span>
</button>
</div>
</div>
</div>
</section>
<!-- SECTION 2: КАК ПОДКЛЮЧИТЬ — Установка за 3 минуты (Exact GorillaVPN Device Tabs + 4 Steps) -->
<section id="how-it-works" class="space-y-8">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">КАК ПОДКЛЮЧИТЬ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Установка за 3 минуты</h2>
</div>
<p class="text-sm text-emerald-100/70 max-w-md">
Выберите ваше устройство — мы дадим готовую ссылку подписки, которая настраивает всё сама в один клик.
</p>
</div>
<!-- 5 Interactive Platform Pills -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3" id="deviceTabs">
<button onclick="selectDeviceTab(this, 'iOS', 'Streisand / V2Box из App Store')" class="device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg">
<div class="font-unbounded text-sm">📱 iOS</div>
<div class="text-xs opacity-80 mt-0.5">iPhone и iPad</div>
</button>
<button onclick="selectDeviceTab(this, 'Android', 'Hiddify / v2rayNG из Google Play или APK')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🤖 Android</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Смартфоны и планшеты</div>
</button>
<button onclick="selectDeviceTab(this, 'macOS', 'Hiddify / Streisand для Mac (M1/M2/M3/Intel)')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">💻 macOS</div>
<div class="text-xs text-emerald-200/60 mt-0.5">MacBook и iMac</div>
</button>
<button onclick="selectDeviceTab(this, 'Windows', 'Hiddify Next для Windows 10 / 11')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">🖥 Windows</div>
<div class="text-xs text-emerald-200/60 mt-0.5">ПК и ноутбуки</div>
</button>
<button onclick="selectDeviceTab(this, 'Android TV', 'v2rayNG / Hiddify TV для YouTube 4K на телевизоре')" class="device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition">
<div class="font-unbounded text-sm">📺 Android TV</div>
<div class="text-xs text-emerald-200/60 mt-0.5">Телевизоры и приставки</div>
</button>
</div>
<!-- 4 Connection Steps (GorillaVPN Structure) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">01</span>
<h3 class="font-unbounded font-bold text-base text-white">Выберите устройство</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Сейчас выбрана платформа: <b id="activeDeviceName" class="text-emerald-300">iOS</b>. Подписка работает сразу на 5 устройствах одновременно.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">02</span>
<h3 class="font-unbounded font-bold text-base text-white">Скачайте приложение</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Рекомендуемый клиент: <b id="activeDeviceApp" class="text-emerald-300">Streisand / V2Box из App Store</b>. Установка занимает 20 секунд.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">03</span>
<h3 class="font-unbounded font-bold text-base text-white">Активируйте в 1 клик</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Нажмите «Добавить подписку» в личном кабинете или Telegram-боте — все локации появятся автоматически.
</p>
</div>
<div class="gorilla-card p-6 space-y-3">
<span class="font-unbounded font-black text-2xl text-emerald-400">04</span>
<h3 class="font-unbounded font-bold text-base text-white">Готово — вы под защитой</h3>
<p class="text-xs text-emerald-100/75 leading-relaxed">
Катюша пробивает любые блокировки: открывайте YouTube 4K, Instagram, звонки и игры без ограничений.
</p>
</div>
</div>
</section>
<!-- SECTION 3: ТАРИФЫ (Exact 4 GorillaVPN Plans: 239 ₽ / 649 ₽ / 1 219 ₽ / 2 299 ₽ + Promo & Gift Controls) -->
<section id="tariffs" class="space-y-8">
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-4">
<div>
<div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ТАРИФЫ</div>
<h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Один тариф — все возможности</h2>
<p class="text-sm text-emerald-100/75 mt-2">
Никаких урезанных версий: на любом сроке доступны все локации 10 Гбит/с, 5 устройств и безлимитный трафик.
</p>
</div>
<!-- Promo Code & Gift Toggle (From GorillaVPN Tariffs Block) -->
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center bg-[#071c13] border border-emerald-500/30 rounded-xl px-3 py-2">
<input id="promoInput" type="text" placeholder="Промокод (напр. KATYUSHA)" class="bg-transparent text-xs text-white placeholder-emerald-200/40 outline-none w-44" />
<button onclick="applyPromo()" class="text-xs font-bold text-emerald-400 hover:text-emerald-300 ml-2">Применить</button>
</div>
<label class="cursor-pointer inline-flex items-center gap-2 bg-[#071c13] border border-emerald-500/30 rounded-xl px-3.5 py-2 text-xs text-emerald-100">
<input type="checkbox" id="giftToggle" class="accent-emerald-400 rounded" />
<span>🎁 Подарить подписку другу</span>
</label>
</div>
</div>
<div id="promoBanner" class="hidden bg-emerald-500/15 border border-emerald-400/40 rounded-xl px-4 py-2.5 text-xs text-emerald-300 font-semibold">
🔥 Промокод активирован! Дополнительные +7 дней бонусом к любому выбранному тарифу.
</div>
<!-- 4 Tariff Cards Grid (Exact GorillaVPN Numbers) -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<!-- Plan 1: 1 Month (239 ₽) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span> <span class="font-unbounded font-bold text-lg text-white">1 месяц</span>
<span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span> <span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-950 border border-emerald-500/30 text-emerald-300">Старт</span>
</div> </div>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
<div> <div>
<div class="text-xs text-slate-400">Текущая локация</div> <div class="font-unbounded font-black text-3xl sm:text-4xl text-white">239 ₽</div>
<div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div> <div class="text-xs text-emerald-300/80 mt-1">239 ₽/мес · Попробовать на месяц</div>
<div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</div>
</div> </div>
<select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs"> <ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option> <li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option> <li class="flex items-center gap-2">✅ <span>Все локации (VLESS Reality)</span></li>
<option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option> <li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
<option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option> </ul>
</select>
</div> </div>
<div class="grid grid-cols-2 gap-3 text-xs"> <button onclick="openCheckoutModal('1 месяц', '239 ₽', '239 ₽/мес')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3"> Оформить за 239 ₽ →
<span class="text-slate-400">Download</span> </button>
<div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
</div> </div>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
<span class="text-slate-400">Upload</span> <!-- Plan 2: 3 Months (649 ₽ — Популярный, Экономия 10%) -->
<div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</div> <div class="gorilla-card p-6 flex flex-col justify-between relative ring-2 ring-emerald-400/70">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">3 месяца</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-400 text-[#03150c] font-extrabold uppercase">Популярный</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-emerald-300">649 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-white font-semibold">216 ₽/мес</span>
<span class="text-[11px] px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-bold">Экономия 10%</span>
</div>
<div class="text-[11px] text-emerald-200/60 mt-0.5">Оптимальный старт</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Приоритетный канал YouTube 4K</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('3 месяца', '649 ₽', '216 ₽/мес (Экономия 10%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Выбрать 3 месяца →
</button>
</div>
<!-- Plan 3: 6 Months (1 219 ₽ — Экономия 15%) -->
<div class="gorilla-card p-6 flex flex-col justify-between">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">6 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 font-bold">Экономия 15%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">1 219 ₽</div>
<div class="text-xs text-emerald-300/80 mt-1">203 ₽/мес · Полгода спокойствия</div>
</div>
<ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<li class="flex items-center gap-2">✅ <span><b>5 устройств</b> одновременно</span></li>
<li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>Защита от DPI и авто-ротация узлов</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('6 месяцев', '1 219 ₽', '203 ₽/мес (Экономия 15%)')" class="mt-7 w-full py-3.5 rounded-xl bg-[#0d2e20] hover:bg-emerald-400 hover:text-[#03150c] border border-emerald-400/30 font-unbounded font-bold text-xs uppercase transition">
Выбрать 6 месяцев →
</button>
</div>
<!-- Plan 4: 12 Months (2 299 ₽ — Выгодно, Экономия 20%) -->
<div class="gorilla-card p-6 flex flex-col justify-between relative border-emerald-400/50">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="font-unbounded font-bold text-lg text-white">12 месяцев</span>
<span class="text-[11px] px-2.5 py-0.5 rounded-full bg-amber-400 text-slate-950 font-extrabold uppercase">Выгодно · -20%</span>
</div>
<div>
<div class="font-unbounded font-black text-3xl sm:text-4xl text-white">2 299 ₽</div>
<div class="flex items-center gap-2 mt-1">
<span class="text-xs text-emerald-300 font-bold">191 ₽/мес</span>
<span class="text-[11px] text-emerald-200/60">Максимальная выгода</span>
</div> </div>
</div> </div>
<div class="text-[11px] text-slate-400 flex items-center justify-between pt-1"> <ul class="space-y-2.5 text-xs text-emerald-100/85 pt-3 border-t border-emerald-500/20">
<span>Платформы: iOS • Android • macOS • Windows • SmartTV</span> <li class="flex items-center gap-2">✅ <span><b>5 устройств</b> + настройка роутера</span></li>
<span class="text-emerald-400 font-mono">AES-256-GCM</span> <li class="flex items-center gap-2">✅ <span><b>Безлимитный</b> трафик (∞ ГБ)</span></li>
<li class="flex items-center gap-2">✅ <span>VIP-серверы с минимальным пингом</span></li>
<li class="flex items-center gap-2">💳 <span class="text-emerald-300/80">СБП · QR-код · Крипто · Telegram Stars</span></li>
</ul>
</div>
<button onclick="openCheckoutModal('12 месяцев', '2 299 ₽', '191 ₽/мес (Экономия 20%)')" class="gorilla-btn mt-7 w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Забрать год за 2 299 ₽ →
</button>
</div> </div>
</div> </div>
</section> </section>
<!-- Pricing Section --> <!-- SECTION 4: ЛИЧНЫЙ КАБИНЕТ — Всё управление в одном кабинете (GorillaVPN Section) -->
<section id="pricing" class="space-y-8"> <section id="cabinet" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="text-center max-w-2xl mx-auto space-y-2"> <div class="lg:col-span-5 space-y-5">
<h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2> <div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ЛИЧНЫЙ КАБИНЕТ</div>
<p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white leading-tight">
Всё управление в одном кабинете
</h2>
<p class="text-sm text-emerald-100/75 leading-relaxed">
Никаких сложных конфигов и ручных переключений. Управляйте своими устройствами, продлевайте доступ через СБП и делитесь QR-кодом прямо в браузере или Telegram.
</p>
<div class="grid grid-cols-2 gap-3 pt-2">
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">5 устройств</div>
<div class="text-xs text-emerald-100/70 mt-1">на одну подписку без доплат</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-xl text-emerald-400">6 платформ</div>
<div class="text-xs text-emerald-100/70 mt-1">iOS, Android, Win, Mac, Linux, TV</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">QR и ссылка</div>
<div class="text-xs text-emerald-100/70 mt-1">для мгновенного подключения</div>
</div>
<div class="bg-[#071c13] border border-emerald-500/25 rounded-2xl p-4">
<div class="font-unbounded font-extrabold text-sm text-white">Без автосписаний</div>
<div class="text-xs text-emerald-100/70 mt-1">прозрачная история платежей</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 1 Month -->
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
<div>
<div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
<div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-300">
<li>✅ До 5 устройств одновременно</li>
<li>✅ Все 42 страны (10 Gbps)</li>
<li>✅ Протоколы VLESS Reality + WireGuard</li>
<li>✅ YouTube 4K без рекламы</li>
</ul>
</div> </div>
<button onclick="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
</div> </div>
<!-- 1 Year (Best Value) --> <!-- Interactive Cabinet Preview Mock -->
<div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl"> <div class="lg:col-span-7 gorilla-card p-6 sm:p-8 space-y-5">
<span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span> <div class="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-emerald-500/20">
<div class="flex items-center gap-3">
<img src="/assets/vpn-7561/logo.jpg" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div> <div>
<div class="text-sm font-semibold text-emerald-300">На 1 год</div> <div class="font-unbounded font-bold text-sm text-white">Кабинет бойца · #KTY-7561</div>
<div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div> <div class="text-xs text-emerald-400">Подписка активна · Тариф «Оптимальный»</div>
<div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-200">
<li>✅ До 10 устройств + роутер</li>
<li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
<li>✅ Авто-обход DPI провайдеров (Stealth)</li>
<li>✅ Приоритетная поддержка в Telegram 24/7</li>
</ul>
</div> </div>
<button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button> </div>
<button onclick="openTrialModal()" class="px-3.5 py-2 rounded-xl bg-emerald-400/15 hover:bg-emerald-400/25 border border-emerald-400/40 text-emerald-300 text-xs font-bold transition">
📲 Показать QR-код ключа
</button>
</div> </div>
<!-- 6 Months --> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
<div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between"> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<div> <span class="text-emerald-200/60">Активные устройства</span>
<div class="text-sm font-semibold text-slate-300">На 6 месяцев</div> <div class="font-unbounded font-bold text-base text-white mt-1">3 из 5 подключено</div>
<div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div> <div class="text-[11px] text-emerald-400 mt-0.5">iPhone 16 Pro · MacBook · Sony TV</div>
<div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div> </div>
<ul class="mt-6 space-y-2.5 text-xs text-slate-300"> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<li>✅ До 5 устройств одновременно</li> <span class="text-emerald-200/60">Протокол маскировки</span>
<li>✅ Все 42 страны (10 Gbps)</li> <div class="font-unbounded font-bold text-base text-emerald-300 mt-1">VLESS Reality</div>
<li>✅ Защита от утечек WebRTC и DNS</li> <div class="text-[11px] text-emerald-200/60 mt-0.5">Порт 443 · TLS 1.3 Stealth</div>
<li>✅ Гарантия возврата 30 дней</li> </div>
</ul> <div class="bg-[#04120c] border border-emerald-500/20 rounded-xl p-3.5">
<span class="text-emerald-200/60">Быстрая оплата</span>
<div class="font-unbounded font-bold text-base text-white mt-1">СБП / Stars</div>
<div class="text-[11px] text-emerald-400 mt-0.5">Мгновенное продление</div>
</div> </div>
<button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
</div> </div>
</div> </div>
</section> </section>
<!-- Web References Analyzed by PM --> <!-- SECTION 5: ЧАСТЫЕ ВОПРОСЫ (9 GorillaVPN FAQ Items) -->
<section id="references" class="pt-8 border-t border-slate-800/80 space-y-4"> <section id="faq" class="space-y-6">
<div> <div>
<h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3> <div class="text-xs uppercase tracking-widest text-emerald-400 font-bold">ВОПРОСЫ И ОТВЕТЫ</div>
<p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p> <h2 class="font-unbounded font-extrabold text-2xl sm:text-4xl text-white mt-1">Частые вопросы</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<details class="gorilla-card p-5 group open:border-emerald-400/50">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Как получить пробный доступ на 48 часов за 0 ₽?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Нажмите кнопку «Получить 2 дня за 0 ₽» — вы сразу получите готовую ссылку подписки VLESS Reality на 48 часов для 5 устройств без привязки банковской карты.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Почему Катюша VPN не блокируется провайдерами?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Мы используем современный протокол Xray VLESS Reality с маскировкой под обычный HTTPS-трафик зарубежных сайтов. Системы ТСПУ/DPI не могут отличить его от обычного серфинга.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Сколько устройств можно подключить по одной подписке?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
До 5 устройств одновременно: например, ваш смартфон, ноутбук, планшет, домашний ПК и телевизор Android TV / Apple TV.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Какими способами можно оплатить подписку?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Доступна моментальная оплата через СБП (по QR-коду любого российского банка), криптовалюту (USDT/TON) и Telegram Stars. Никаких скрытых автосписаний.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Режет ли VPN скорость и работает ли YouTube в 4K?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Все узлы подключены к каналам 10 Гбит/с в Нидерландах, Германии, Финляндии, Польше, Швеции и Турции. Видео 4K 60fps загружается мгновенно и без рекламы.
</p>
</details>
<details class="gorilla-card p-5 group">
<summary class="font-unbounded font-bold text-sm text-white cursor-pointer flex items-center justify-between">
<span>Можно ли подарить подписку другу?</span>
<span class="text-emerald-400 group-open:rotate-45 transition">+</span>
</summary>
<p class="text-xs text-emerald-100/75 mt-3 leading-relaxed">
Да! В блоке тарифов включите галочку «🎁 Подарить подписку другу» — после оплаты вы получите подарочный купон-ссылку, которую можно переслать в Telegram.
</p>
</details>
</div>
</section>
<!-- PM Reference Analysis Footer Block -->
<section class="pt-8 border-t border-emerald-500/20 space-y-4">
<div class="flex flex-wrap items-center justify-between gap-2">
<div>
<h3 class="text-xs font-unbounded font-bold text-emerald-400 uppercase">🔍 Исследованный референс и дизайн-система (`contracts/WEB_REFERENCES.md`)</h3>
<p class="text-xs text-emerald-100/60">Спарсено из React SPA бандла <code>gorillavpn.pro</code> + сгенерированы фирменные ассеты Катюши (`logo.jpg` и `hero.jpg`)</p>
</div>
<a href="/" class="text-xs text-emerald-300 hover:underline">← Вернуться в панель управления Виртуальным Офисом</a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="https://gorillavpn.pro/" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://gorillavpn.pro/" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div> <div class="text-xs font-bold text-emerald-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://gorillavpn.pro/</div>
<p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Шрифты: Manrope, Unbounded • Блоки и тексты SPA: Тарифы | Установка | Кабинет | Вопросы | Навигация по сайту | Открыть кабинет | Меню | Меню Gorilla VPN | Разделы сайта Gorilla VPN | Мобильное меню | Нидерланды | Амстердам | Германия | Франкфурт | Турция | Стамбул | Польша | Варшава • Точные тарифы с сайта: 1 месяц: 239 ₽, 3 месяца: 649 ₽, 6 месяцев: 1219 ₽, 12 месяцев: 2299 ₽</p>
</a> </a>
<a href="https://mullvad.net/en" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://mullvad.net/en" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div> <div class="text-xs font-bold text-emerald-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://mullvad.net/en</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
</a> </a>
<a href="https://protonvpn.com" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://protonvpn.com" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div> <div class="text-xs font-bold text-emerald-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://protonvpn.com</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
</a> </a>
<a href="https://amnezia.org" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition"> <a href="https://amnezia.org" target="_blank" class="block bg-[#071a12]/90 hover:bg-[#0c291d] border border-emerald-500/20 rounded-2xl p-4 transition">
<div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div> <div class="text-xs font-bold text-emerald-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
<div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div> <div class="text-[11px] text-emerald-200/50 truncate mt-0.5 font-mono">https://amnezia.org</div>
<p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p> <p class="text-xs text-emerald-100/80 mt-2 line-clamp-3">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
</a> </a>
</div> </div>
</section> </section>
</main> </main>
<!-- Checkout / Free Trial Modal --> <!-- Interactive Checkout / Free Trial Modal -->
<div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div id="checkoutModal" class="hidden fixed inset-0 bg-black/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
<div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4"> <div class="gorilla-card max-w-lg w-full p-6 sm:p-7 space-y-5">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4> <div class="flex items-center gap-3">
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button> <img src="/assets/vpn-7561/logo.jpg" alt="Logo" class="w-10 h-10 rounded-full object-cover border border-emerald-400" />
<div>
<h4 id="modalTitle" class="font-unbounded font-bold text-base text-white">Katyusha Trial · 48 часов за 0 ₽</h4>
<p id="modalSub" class="text-xs text-emerald-400">5 устройств · Безлимитный трафик · VLESS Reality</p>
</div> </div>
<p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
<div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
</div> </div>
<button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button> <button onclick="closeCheckoutModal()" class="text-emerald-200/60 hover:text-white text-lg font-bold">✕</button>
</div>
<div class="bg-[#030d08] border border-emerald-500/30 rounded-xl p-4 space-y-2">
<div class="flex items-center justify-between text-[11px] text-emerald-300">
<span>Ваша персональная VLESS Reality ссылка подписки:</span>
<button onclick="navigator.clipboard.writeText(document.getElementById('vlessKey').innerText);this.innerText='✅ Скопировано!'" class="font-bold underline">Скопировать</button>
</div>
<div id="vlessKey" class="font-mono text-[11px] text-emerald-400 break-all select-all">
vless://katyusha-7561-reality@nl-amsterdam.vo-office.com:443?security=reality&sni=www.cloudflare.com&fp=chrome&pbk=KatyushaLaser2026&type=grpc#Katyusha_VPN_10Gbps
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-[11px] font-bold">
<div class="bg-[#072015] border border-emerald-400/40 rounded-lg py-2 text-emerald-300">⚡ СБП QR</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💎 USDT / TON</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">⭐ TG Stars</div>
<div class="bg-[#072015] border border-emerald-500/20 rounded-lg py-2 text-emerald-100/80">💳 Карта РФ</div>
</div>
<button onclick="closeCheckoutModal()" class="gorilla-btn w-full py-3.5 rounded-xl font-unbounded text-xs uppercase">
Подключить в 1 клик →
</button>
</div> </div>
</div> </div>
<script> <script>
function openCheckout(plan) { function selectRadarCountry(name, ping, speed) {
document.getElementById('modalTitle').innerText = 'Оформление: ' + plan; document.getElementById('radarLoc').innerText = name;
document.getElementById('keyModal').classList.remove('hidden'); document.getElementById('radarPing').innerText = 'Пинг: ' + ping;
document.getElementById('radarSpeed').innerText = 'Канал: ' + speed;
}
function selectDeviceTab(btn, platform, appName) {
document.querySelectorAll('.device-tab').forEach(el => {
el.className = 'device-tab bg-[#081d14] hover:bg-[#0d2b1e] border border-emerald-500/25 text-white rounded-2xl p-4 text-left transition';
});
btn.className = 'device-tab bg-emerald-400 text-[#03150c] rounded-2xl p-4 text-left transition font-bold shadow-lg';
document.getElementById('activeDeviceName').innerText = platform;
document.getElementById('activeDeviceApp').innerText = appName;
}
function applyPromo() {
const val = document.getElementById('promoInput').value.trim();
if (val) {
document.getElementById('promoBanner').classList.remove('hidden');
}
}
function openTrialModal() {
document.getElementById('modalTitle').innerText = 'Katyusha Trial · 48 часов за 0 ₽';
document.getElementById('modalSub').innerText = 'Пробный доступ на 2 дня · 5 устройств · ∞ ГБ';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCheckoutModal(period, price, sub) {
const isGift = document.getElementById('giftToggle') && document.getElementById('giftToggle').checked;
document.getElementById('modalTitle').innerText = (isGift ? '🎁 Подарок: ' : 'Тариф: ') + period + ' — ' + price;
document.getElementById('modalSub').innerText = sub + ' · СБП / QR / Крипто / Stars';
document.getElementById('checkoutModal').classList.remove('hidden');
}
function openCabinetModal() {
openTrialModal();
}
function closeCheckoutModal() {
document.getElementById('checkoutModal').classList.add('hidden');
} }
</script> </script>
</body> </body>