Spaces:

timoon811
/

course21

Running

App Files Files Community

course21 / index.html

timoon811

Add 2 files

31e002d verified 12 months ago

raw

history blame contribute delete

70.5 kB

	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Traffic Master - Ты в Игре</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');

	:root {
	--neon-blue: #00f0ff;
	--neon-pink: #ff00f0;
	--neon-purple: #8a2be2;
	--gold: #ffd700;
	--dark-bg: #0a0a12;
	}

	body {
	font-family: 'Rajdhani', sans-serif;
	background-color: var(--dark-bg);
	color: white;
	overflow-x: hidden;
	scroll-behavior: smooth;
	}

	h1, h2, h3, h4, .neon-text {
	font-family: 'Orbitron', sans-serif;
	text-transform: uppercase;
	}

	.neon-blue {
	color: var(--neon-blue);
	text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
	}

	.neon-pink {
	color: var(--neon-pink);
	text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
	}

	.neon-purple {
	color: var(--neon-purple);
	text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
	}

	.gold-text {
	color: var(--gold);
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
	}

	.glow-box {
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
	border: 1px solid rgba(0, 240, 255, 0.3);
	}

	.glow-box:hover {
	box-shadow: 0 0 25px rgba(0, 240, 255, 0.8);
	}

	.pixel-border {
	position: relative;
	}

	.pixel-border::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 2px solid var(--neon-blue);
	z-index: -1;
	box-shadow: 0 0 15px var(--neon-blue);
	}

	.section {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	padding: 5rem 2rem;
	}

	.money-flow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.3;
	}

	.money-item {
	position: absolute;
	color: var(--gold);
	font-size: 2rem;
	animation: float linear infinite;
	text-shadow: 0 0 10px var(--gold);
	}

	@keyframes float {
	0% {
	transform: translateY(100vh) rotate(0deg);
	}
	100% {
	transform: translateY(-20vh) rotate(360deg);
	}
	}

	.hologram {
	position: relative;
	background: rgba(0, 240, 255, 0.05);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(0, 240, 255, 0.2);
	}

	.hologram::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, transparent 50%, rgba(255, 0, 240, 0.1) 100%);
	z-index: -1;
	}

	.character-card {
	transition: all 0.3s ease;
	transform-style: preserve-3d;
	}

	.character-card:hover {
	transform: translateY(-10px) rotateX(5deg);
	box-shadow: 0 20px 30px rgba(0, 240, 255, 0.3);
	}

	.inventory-item {
	transition: all 0.3s ease;
	}

	.inventory-item:hover {
	transform: scale(1.1);
	filter: drop-shadow(0 0 10px var(--neon-blue));
	}

	.progress-track {
	position: relative;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	}

	.progress-track::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var(--progress);
	background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
	}

	.checkpoint {
	position: relative;
	}

	.checkpoint::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--neon-blue);
	box-shadow: 0 0 15px var(--neon-blue);
	}

	.checkpoint.active::after {
	background: var(--gold);
	box-shadow: 0 0 20px var(--gold);
	}

	.treasure-chest {
	transition: all 0.5s ease;
	transform-style: preserve-3d;
	perspective: 1000px;
	}

	.treasure-chest:hover {
	transform: rotateY(15deg) translateY(-10px);
	}

	.treasure-chest:hover .chest-lid {
	transform: rotateX(-45deg);
	}

	.chest-lid {
	transform-origin: top center;
	transition: transform 0.5s ease;
	}

	.portal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
	box-shadow: 0 0 50px var(--neon-blue);
	animation: pulse 3s infinite alternate;
	}

	@keyframes pulse {
	0% {
	opacity: 0.7;
	transform: translate(-50%, -50%) scale(1);
	}
	100% {
	opacity: 0.3;
	transform: translate(-50%, -50%) scale(1.2);
	}
	}

	.door {
	position: relative;
	width: 300px;
	height: 400px;
	background: linear-gradient(135deg, #111, #333);
	border: 3px solid var(--gold);
	perspective: 1000px;
	transform-style: preserve-3d;
	transition: transform 1s;
	}

	.door.open {
	transform: rotateY(-60deg);
	}

	.door-handle {
	position: absolute;
	right: 20px;
	top: 50%;
	width: 20px;
	height: 60px;
	background: var(--gold);
	border-radius: 10px;
	box-shadow: 0 0 10px var(--gold);
	}

	.keyhole {
	position: absolute;
	right: 50px;
	top: 50%;
	width: 10px;
	height: 30px;
	background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
	box-shadow: 0 0 10px var(--gold);
	}

	.social-icon {
	transition: all 0.3s ease;
	}

	.social-icon:hover {
	transform: scale(1.2);
	filter: drop-shadow(0 0 10px var(--neon-blue));
	}

	/* New styles for improvements */
	.parallax-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover no-repeat;
	opacity: 0.1;
	}

	.progress-nav {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 15px;
	}

	.progress-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.progress-dot.active {
	background: var(--neon-blue);
	box-shadow: 0 0 10px var(--neon-blue);
	transform: scale(1.3);
	}

	.progress-dot.completed {
	background: var(--gold);
	}

	.avatar-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
	transition: all 0.3s ease;
	}

	.avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	border: 2px solid var(--neon-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.avatar:hover {
	transform: scale(1.1);
	box-shadow: 0 0 15px var(--neon-blue);
	}

	.achievement-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 25px;
	height: 25px;
	background: var(--gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: black;
	font-weight: bold;
	}

	.achievement-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.9);
	border: 2px solid var(--gold);
	padding: 20px;
	border-radius: 10px;
	z-index: 1000;
	display: none;
	text-align: center;
	max-width: 300px;
	animation: popIn 0.5s ease-out;
	}

	@keyframes popIn {
	0% {
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0;
	}
	100% {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	}
	}

	.micro-interaction {
	transition: all 0.2s ease;
	}

	.micro-interaction:hover {
	transform: translateY(-3px);
	}

	.cta-button {
	position: relative;
	overflow: hidden;
	}

	.cta-button::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
	transform: rotate(45deg);
	transition: all 0.6s ease;
	opacity: 0;
	}

	.cta-button:hover::after {
	opacity: 1;
	animation: shine 1.5s ease infinite;
	}

	@keyframes shine {
	0% {
	left: -50%;
	top: -50%;
	}
	100% {
	left: 150%;
	top: 150%;
	}
	}

	.tooltip {
	position: relative;
	}

	.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	}

	.tooltip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	width: max-content;
	max-width: 200px;
	transition: all 0.3s ease;
	pointer-events: none;
	}

	.tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
	}

	/* New animation styles */
	.pulse-animation {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	transform: scale(1);
	box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7);
	}
	70% {
	transform: scale(1.05);
	box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
	}
	100% {
	transform: scale(1);
	box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
	}
	}

	.section-divider {
	position: relative;
	height: 100px;
	width: 100%;
	overflow: hidden;
	}

	.section-divider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
	rgba(0, 240, 255, 0.1) 0%,
	rgba(255, 0, 240, 0.3) 50%,
	rgba(0, 240, 255, 0.1) 100%);
	transform: skewY(-3deg);
	}

	.money-animation-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
	}

	.xp-badge {
	position: absolute;
	background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
	color: white;
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: bold;
	animation: floatUp 2s ease-out forwards;
	opacity: 0;
	}

	@keyframes floatUp {
	0% {
	transform: translateY(0);
	opacity: 1;
	}
	100% {
	transform: translateY(-50px);
	opacity: 0;
	}
	}

	.fade-in {
	animation: fadeIn 1s ease-out forwards;
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.glitch-effect {
	position: relative;
	}

	.glitch-effect::before, .glitch-effect::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	}

	.glitch-effect::before {
	color: #0ff;
	z-index: -1;
	animation: glitch 3s infinite;
	}

	.glitch-effect::after {
	color: #f0f;
	z-index: -2;
	animation: glitch 2s infinite reverse;
	}

	@keyframes glitch {
	0% {
	transform: translate(0);
	}
	20% {
	transform: translate(-3px, 3px);
	}
	40% {
	transform: translate(-3px, -3px);
	}
	60% {
	transform: translate(3px, 3px);
	}
	80% {
	transform: translate(3px, -3px);
	}
	100% {
	transform: translate(0);
	}
	}

	@media (max-width: 768px) {
	.section {
	padding: 3rem 1rem;
	}

	.portal {
	width: 200px;
	height: 200px;
	}

	.door {
	width: 200px;
	height: 300px;
	}

	.progress-nav {
	right: 10px;
	gap: 10px;
	}

	.progress-dot {
	width: 8px;
	height: 8px;
	}
	}
	</style>
	</head>
	<body>
	<!-- Parallax Background -->
	<div class="parallax-bg" id="parallaxBg"></div>

	<!-- Money Flow Animation -->
	<div class="money-animation-container">
	<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_ilujvy3x.json" background="transparent" speed="1" loop autoplay></lottie-player>
	</div>

	<!-- Progress Navigation -->
	<div class="progress-nav" id="progressNav">
	<div class="progress-dot" data-section="level1"></div>
	<div class="progress-dot" data-section="level2"></div>
	<div class="progress-dot" data-section="level3"></div>
	<div class="progress-dot" data-section="level4"></div>
	<div class="progress-dot" data-section="level5"></div>
	<div class="progress-dot" data-section="level6"></div>
	<div class="progress-dot" data-section="level7"></div>
	<div class="progress-dot" data-section="level8"></div>
	<div class="progress-dot" data-section="level9"></div>
	<div class="progress-dot" data-section="level10"></div>
	<div class="progress-dot" data-section="level11"></div>
	<div class="progress-dot" data-section="level12"></div>
	</div>

	<!-- Avatar Container -->
	<div class="avatar-container" id="avatarContainer">
	<div class="avatar tooltip" id="userAvatar">
	<span>👤</span>
	<div class="tooltip-text">Ваш прогресс: 0%</div>
	</div>
	<div class="achievement-badge" id="achievementBadge" style="display: none;">0</div>
	</div>

	<!-- Achievement Popup -->
	<div class="achievement-popup" id="achievementPopup">
	<div class="text-4xl mb-2">🏆</div>
	<h3 class="text-xl font-bold mb-2 gold-text" id="achievementTitle">Достижение разблокировано!</h3>
	<p id="achievementDesc">Вы получили новое достижение</p>
	<button class="mt-4 bg-gold text-black px-4 py-1 rounded" onclick="closeAchievementPopup()">OK</button>
	</div>

	<!-- Level 1: Entrance - IMPROVED -->
	<section class="section flex items-center justify-center text-center" id="level1">
	<div class="portal"></div>
	<div class="max-w-4xl mx-auto relative z-10 fade-in">
	<h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text neon-blue glitch-effect" data-text="Ты в Игре">Ты в Игре</h1>
	<p class="text-xl md:text-2xl mb-4 neon-pink">"Если ты не арбитражишь — ты просто смотришь, как другие делают деньги"</p>
	<p class="text-lg md:text-xl mb-10">Traffic Master — курс, где учат зарабатывать, а не слушать лекции</p>
	<button class="bg-transparent border-2 border-neon-blue text-neon-blue px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 glow-box cta-button micro-interaction pulse-animation" onclick="scrollToLevel('level2')">
	Начать игру <i class="fas fa-gamepad ml-2"></i>
	</button>

	<!-- XP Badge Container -->
	<div id="xpBadgeContainer" class="absolute top-0 left-0 w-full h-full pointer-events-none"></div>
	</div>
	</section>

	<!-- Section Divider -->
	<div class="section-divider"></div>

	<!-- Level 2: Creator - IMPROVED -->
	<section class="section flex items-center" id="level2">
	<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
	<div class="hologram p-8 rounded-lg relative overflow-hidden fade-in">
	<div class="absolute inset-0 bg-gradient-to-br from-transparent via-neon-blue to-transparent opacity-10 animate-pulse"></div>
	<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text neon-purple">Создатель этой реальности</h2>
	<div class="flex items-center mb-6">
	<div class="w-24 h-24 rounded-full border-2 border-gold bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div>
	<div class="ml-6">
	<h3 class="text-2xl font-bold gold-text">Тимур В.</h3>
	<div class="flex space-x-2 mt-2">
	<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">🧠 Мастер арбитража</span>
	<span class="text-xs px-2 py-1 bg-gold bg-opacity-20 rounded">💰 $5M оборота</span>
	<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">🔥 TMT — топ-3 команда</span>
	</div>
	</div>
	</div>
	<div class="mt-6 p-4 border-l-4 border-neon-blue bg-black bg-opacity-30">
	<p class="italic">"Я создал этот мир, чтобы каждый мог изменить свою реальность. Здесь нет места слабым — только те, кто готов действовать, добьются успеха."</p>
	</div>

	<!-- XP Badge -->
	<div class="xp-badge" style="top: 20px; right: 20px;">+20 XP</div>
	</div>
	<div class="fade-in">
	<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Твой путь начинается здесь</h2>
	<p class="text-lg mb-6">Ты стоишь на пороге новой жизни. Впереди — обучение, которое перевернет твое представление о заработке в интернете.</p>
	<button class="bg-neon-blue text-black px-6 py-2 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 cta-button micro-interaction" onclick="scrollToLevel('level3')">
	Выбрать персонажа <i class="fas fa-arrow-down ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 3: Character Selection -->
	<section class="section flex items-center justify-center" id="level3">
	<div class="max-w-6xl mx-auto text-center">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 neon-text neon-blue">Выбери своего персонажа</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
	<!-- Character 1 -->
	<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('warrior')">
	<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-blue bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/44.jpg');"></div>
	<h3 class="text-2xl font-bold mb-2 neon-blue">Воин</h3>
	<p class="text-sm mb-4">Агрессивный подход, быстрые результаты, высокие риски</p>
	<div class="flex justify-center space-x-2">
	<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">⚔️ Агрессивный</span>
	<span class="text-xs px-2 py-1 bg-neon-blue bg-opacity-20 rounded">💨 Быстрый старт</span>
	</div>
	</div>

	<!-- Character 2 -->
	<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('strategist')">
	<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-purple bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
	<h3 class="text-2xl font-bold mb-2 neon-purple">Стратег</h3>
	<p class="text-sm mb-4">Продуманные ходы, аналитический подход, стабильный рост</p>
	<div class="flex justify-center space-x-2">
	<span class="text-xs px-2 py-1 bg-neon-purple bg-opacity-20 rounded">🧠 Аналитик</span>
	<span class="text-xs px-2 py-1 bg-neon-purple bg-opacity-20 rounded">📈 Стабильность</span>
	</div>
	</div>

	<!-- Character 3 -->
	<div class="character-card bg-black bg-opacity-50 p-6 rounded-lg cursor-pointer glow-box" onclick="selectCharacter('ninja')">
	<div class="w-32 h-32 mx-auto mb-4 rounded-full border-2 border-neon-pink bg-cover bg-center" style="background-image: url('https://randomuser.me/api/portraits/men/22.jpg');"></div>
	<h3 class="text-2xl font-bold mb-2 neon-pink">Ниндзя</h3>
	<p class="text-sm mb-4">Скрытые методы, нестандартные решения, минимальные вложения</p>
	<div class="flex justify-center space-x-2">
	<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">👤 Скрытность</span>
	<span class="text-xs px-2 py-1 bg-neon-pink bg-opacity-20 rounded">🔄 Нестандартный</span>
	</div>
	</div>
	</div>

	<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level4')">
	Подтвердить выбор <i class="fas fa-check ml-2"></i>
	</button>
	</div>
	</section>

	<!-- Level 4: Inventory -->
	<section class="section flex items-center justify-center" id="level4">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твой арсенал</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
	<div class="fade-in">
	<h3 class="text-2xl font-bold mb-6 neon-text">Что ты получишь:</h3>

	<div class="space-y-4">
	<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box">
	<div class="text-2xl mr-4 neon-blue">🔮</div>
	<div>
	<h4 class="font-bold text-lg">Кристалл знаний</h4>
	<p class="text-sm">Полный доступ к закрытому курсу по арбитражу трафика</p>
	</div>
	</div>

	<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box">
	<div class="text-2xl mr-4 neon-purple">🗺️</div>
	<div>
	<h4 class="font-bold text-lg">Карта офферов</h4>
	<p class="text-sm">Актуальные офферы с высоким CR и проверенные связки</p>
	</div>
	</div>

	<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box">
	<div class="text-2xl mr-4 neon-pink">⚔️</div>
	<div>
	<h4 class="font-bold text-lg">Оружие аналитики</h4>
	<p class="text-sm">Набор инструментов для анализа и оптимизации кампаний</p>
	</div>
	</div>

	<div class="inventory-item flex items-start p-4 bg-black bg-opacity-30 rounded-lg glow-box">
	<div class="text-2xl mr-4 gold-text">🛡️</div>
	<div>
	<h4 class="font-bold text-lg">Щит поддержки</h4>
	<p class="text-sm">Персональный ментор и доступ в закрытый чат команды</p>
	</div>
	</div>
	</div>
	</div>

	<div class="fade-in">
	<div class="hologram p-8 rounded-lg h-full flex flex-col justify-center">
	<h3 class="text-2xl font-bold mb-6 neon-text">Твой инвентарь:</h3>

	<div class="mb-6">
	<div class="flex justify-between mb-2">
	<span>Прогресс обучения</span>
	<span>0%</span>
	</div>
	<div class="progress-track" style="--progress: 0%"></div>
	</div>

	<div class="mb-6">
	<div class="flex justify-between mb-2">
	<span>Уровень доступа</span>
	<span>Новичок</span>
	</div>
	<div class="flex justify-between text-xs">
	<span>Level 1</span>
	<span>Level 10</span>
	</div>
	</div>

	<div class="mb-6">
	<div class="flex justify-between mb-2">
	<span>Доступные офферы</span>
	<span>0/50</span>
	</div>
	<div class="grid grid-cols-5 gap-2">
	<div class="h-2 bg-gray-700 rounded"></div>
	<div class="h-2 bg-gray-700 rounded"></div>
	<div class="h-2 bg-gray-700 rounded"></div>
	<div class="h-2 bg-gray-700 rounded"></div>
	<div class="h-2 bg-gray-700 rounded"></div>
	</div>
	</div>

	<button class="bg-neon-blue text-black px-6 py-3 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button mt-4" onclick="scrollToLevel('level5')">
	Продолжить <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Level 5: Training Path -->
	<section class="section flex items-center justify-center" id="level5">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твой путь обучения</h2>

	<div class="relative">
	<!-- Progress line -->
	<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-neon-blue to-neon-purple" style="top: 40px;"></div>

	<div class="space-y-20 pl-8 md:pl-0">
	<!-- Checkpoint 1 -->
	<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center">
	<div class="md:text-right md:pr-8 fade-in">
	<h3 class="text-2xl font-bold mb-2 neon-text">Базовый уровень</h3>
	<p>Основы арбитража, выбор ниши, первые шаги</p>
	</div>
	<div class="hologram p-6 rounded-lg fade-in">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">1</div>
	<div>
	<h4 class="font-bold">Введение в арбитраж</h4>
	<p class="text-sm">3 урока, 2 практических задания</p>
	</div>
	</div>
	<button class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded">Начать обучение</button>
	</div>
	</div>

	<!-- Checkpoint 2 -->
	<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center">
	<div class="md:order-2 md:text-left md:pl-8 fade-in">
	<h3 class="text-2xl font-bold mb-2 neon-text">Продвинутый уровень</h3>
	<p>Работа с офферами, аналитика, масштабирование</p>
	</div>
	<div class="hologram p-6 rounded-lg md:order-1 fade-in">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">2</div>
	<div>
	<h4 class="font-bold">Глубокий анализ</h4>
	<p class="text-sm">5 уроков, 4 практических задания</p>
	</div>
	</div>
	<button class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded">Заблокировано</button>
	</div>
	</div>

	<!-- Checkpoint 3 -->
	<div class="checkpoint relative grid md:grid-cols-2 gap-8 items-center">
	<div class="md:text-right md:pr-8 fade-in">
	<h3 class="text-2xl font-bold mb-2 neon-text">Мастер уровень</h3>
	<p>Автоматизация, сложные стратегии, управление командой</p>
	</div>
	<div class="hologram p-6 rounded-lg fade-in">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full bg-black bg-opacity-50 flex items-center justify-center text-2xl mr-4">3</div>
	<div>
	<h4 class="font-bold">Профессиональные техники</h4>
	<p class="text-sm">7 уроков, 6 практических заданий</p>
	</div>
	</div>
	<button class="text-xs bg-gray-700 text-gray-400 px-3 py-1 rounded">Заблокировано</button>
	</div>
	</div>
	</div>
	</div>

	<div class="text-center mt-16">
	<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level6')">
	Принять вызов <i class="fas fa-flag-checkered ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 6: Program -->
	<section class="section flex items-center justify-center" id="level6">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Программа курса</h2>

	<div class="grid md:grid-cols-3 gap-6 mb-12">
	<!-- Module 1 -->
	<div class="hologram p-6 rounded-lg glow-box fade-in">
	<div class="text-4xl mb-4 neon-blue">01</div>
	<h3 class="text-xl font-bold mb-3">Основы арбитража</h3>
	<ul class="text-sm space-y-2 mb-4">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Что такое арбитраж трафика</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Выбор ниши и офферов</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Первые шаги в рекламе</span>
	</li>
	</ul>
	<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">3 урока</div>
	</div>

	<!-- Module 2 -->
	<div class="hologram p-6 rounded-lg glow-box fade-in">
	<div class="text-4xl mb-4 neon-purple">02</div>
	<h3 class="text-xl font-bold mb-3">Работа с трафиком</h3>
	<ul class="text-sm space-y-2 mb-4">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Типы трафика и источники</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Настройка кампаний</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Оптимизация бюджета</span>
	</li>
	</ul>
	<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">5 уроков</div>
	</div>

	<!-- Module 3 -->
	<div class="hologram p-6 rounded-lg glow-box fade-in">
	<div class="text-4xl mb-4 neon-pink">03</div>
	<h3 class="text-xl font-bold mb-3">Аналитика и масштабирование</h3>
	<ul class="text-sm space-y-2 mb-4">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Ключевые метрики</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Инструменты аналитики</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Масштабирование успешных кампаний</span>
	</li>
	</ul>
	<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">4 урока</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level7')">
	Узнать больше <i class="fas fa-book-open ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 7: Rewards -->
	<section class="section flex items-center justify-center" id="level7">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Твои возможные награды</h2>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<!-- Reward 1 -->
	<div class="fade-in">
	<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full">
	<div class="chest-lid mb-6">
	<div class="w-24 h-12 mx-auto bg-yellow-800 rounded-t-lg border-b-4 border-yellow-900"></div>
	</div>
	<div class="w-32 h-16 mx-auto bg-yellow-700 rounded-b-lg"></div>

	<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 1</h3>
	<p class="text-sm mb-4">Первые $500-1000 в месяц</p>
	<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 1 месяц</div>
	</div>
	</div>

	<!-- Reward 2 -->
	<div class="fade-in">
	<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full">
	<div class="chest-lid mb-6">
	<div class="w-24 h-12 mx-auto bg-yellow-600 rounded-t-lg border-b-4 border-yellow-700"></div>
	</div>
	<div class="w-32 h-16 mx-auto bg-yellow-500 rounded-b-lg"></div>

	<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 2</h3>
	<p class="text-sm mb-4">$3000-5000 в месяц</p>
	<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 3 месяца</div>
	</div>
	</div>

	<!-- Reward 3 -->
	<div class="fade-in">
	<div class="treasure-chest bg-black bg-opacity-50 p-8 rounded-lg text-center h-full">
	<div class="chest-lid mb-6">
	<div class="w-24 h-12 mx-auto bg-yellow-400 rounded-t-lg border-b-4 border-yellow-500"></div>
	</div>
	<div class="w-32 h-16 mx-auto bg-yellow-300 rounded-b-lg"></div>

	<h3 class="text-xl font-bold mt-6 mb-3 gold-text">Уровень 3</h3>
	<p class="text-sm mb-4">$10 000+ в месяц</p>
	<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Достижимо за 6 месяцев</div>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-gold text-black px-8 py-3 text-lg font-bold hover:bg-yellow-400 hover:text-black transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level8')">
	Хочу эти результаты <i class="fas fa-trophy ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 8: Team -->
	<section class="section flex items-center justify-center" id="level8">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Наша команда</h2>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<!-- Team Member 1 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg text-center h-full">
	<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-blue bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div>
	<h3 class="text-xl font-bold mb-2 neon-blue">Тимур В.</h3>
	<p class="text-sm mb-3">Основатель TMT, 7 лет в арбитраже</p>
	<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">$5M+ оборот</div>
	</div>
	</div>

	<!-- Team Member 2 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg text-center h-full">
	<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-purple bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/women/42.jpg');"></div>
	<h3 class="text-xl font-bold mb-2 neon-purple">Анна К.</h3>
	<p class="text-sm mb-3">Специалист по Facebook Ads</p>
	<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">CR +35%</div>
	</div>
	</div>

	<!-- Team Member 3 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg text-center h-full">
	<div class="w-32 h-32 mx-auto rounded-full border-2 border-neon-pink bg-cover bg-center mb-4" style="background-image: url('https://randomuser.me/api/portraits/men/22.jpg');"></div>
	<h3 class="text-xl font-bold mb-2 neon-pink">Максим Р.</h3>
	<p class="text-sm mb-3">Аналитик, скрипты и автоматизация</p>
	<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">ROI +200%</div>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level9')">
	Присоединиться к команде <i class="fas fa-users ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 9: Packages -->
	<section class="section flex items-center justify-center" id="level9">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Выбери свой пакет</h2>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<!-- Package 1 -->
	<div class="fade-in">
	<div class="hologram p-8 rounded-lg h-full">
	<h3 class="text-2xl font-bold mb-4 neon-blue">Стандарт</h3>
	<div class="text-4xl font-bold mb-4 gold-text">$297</div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ к курсу</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Базовые офферы</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ в чат</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✗</span>
	<span>Персональный ментор</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✗</span>
	<span>Премиум офферы</span>
	</li>
	</ul>
	<button class="w-full bg-neon-blue text-black px-6 py-3 font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button">
	Выбрать <i class="fas fa-check ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Package 2 -->
	<div class="fade-in">
	<div class="hologram p-8 rounded-lg h-full border-2 border-gold relative">
	<div class="absolute top-0 right-0 bg-gold text-black text-xs font-bold px-3 py-1 rounded-bl">Популярный</div>
	<h3 class="text-2xl font-bold mb-4 neon-purple">Премиум</h3>
	<div class="text-4xl font-bold mb-4 gold-text">$597</div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ к курсу</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Базовые + премиум офферы</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ в чат</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Персональный ментор (1 месяц)</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Разбор ваших кампаний</span>
	</li>
	</ul>
	<button class="w-full bg-gold text-black px-6 py-3 font-bold hover:bg-yellow-400 hover:text-black transition-all duration-300 glow-box cta-button">
	Выбрать <i class="fas fa-crown ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Package 3 -->
	<div class="fade-in">
	<div class="hologram p-8 rounded-lg h-full">
	<h3 class="text-2xl font-bold mb-4 neon-pink">VIP</h3>
	<div class="text-4xl font-bold mb-4 gold-text">$1497</div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ к курсу</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Все офферы + эксклюзивы</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Доступ в VIP чат</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Персональный ментор (3 месяца)</span>
	</li>
	<li class="flex items-start">
	<span class="mr-2">✓</span>
	<span>Стратегия под ваш бюджет</span>
	</li>
	</ul>
	<button class="w-full bg-neon-pink text-black px-6 py-3 font-bold hover:bg-purple-600 hover:text-white transition-all duration-300 glow-box cta-button">
	Выбрать <i class="fas fa-star ml-2"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level10')">
	Узнать условия <i class="fas fa-info-circle ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 10: Testimonials -->
	<section class="section flex items-center justify-center" id="level10">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Отзывы игроков</h2>

	<div class="grid md:grid-cols-2 gap-8 mb-12">
	<!-- Testimonial 1 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg h-full">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full border-2 border-neon-blue bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/men/11.jpg');"></div>
	<div>
	<h3 class="font-bold">Александр К.</h3>
	<div class="flex text-yellow-400 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="mb-4">"За 2 месяца вышел на стабильные $1500 в месяц. До этого пытался сам, но без системы не получалось. Курс реально дает все инструменты для старта."</p>
	<div class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-3 py-1 rounded inline-block">Результат через 2 месяца</div>
	</div>
	</div>

	<!-- Testimonial 2 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg h-full">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full border-2 border-neon-purple bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/33.jpg');"></div>
	<div>
	<h3 class="font-bold">Елена С.</h3>
	<div class="flex text-yellow-400 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="mb-4">"Брала VIP пакет с ментором. Лучшее решение! За 4 месяца вышла на $5k в месяц. Ментор помог избежать всех ошибок, которые я бы точно совершила."</p>
	<div class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-3 py-1 rounded inline-block">Результат через 4 месяца</div>
	</div>
	</div>

	<!-- Testimonial 3 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg h-full">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full border-2 border-neon-pink bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/men/44.jpg');"></div>
	<div>
	<h3 class="font-bold">Дмитрий П.</h3>
	<div class="flex text-yellow-400 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="mb-4">"Прошел курс за 3 недели, сразу начал применять. Первый месяц - $800, второй - $3500, сейчас стабильно $7-10k. Система работает!"</p>
	<div class="text-xs bg-neon-pink bg-opacity-20 text-neon-pink px-3 py-1 rounded inline-block">Результат через 6 месяцев</div>
	</div>
	</div>

	<!-- Testimonial 4 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg h-full">
	<div class="flex items-center mb-4">
	<div class="w-16 h-16 rounded-full border-2 border-gold bg-cover bg-center mr-4" style="background-image: url('https://randomuser.me/api/portraits/women/22.jpg');"></div>
	<div>
	<h3 class="font-bold">Анна М.</h3>
	<div class="flex text-yellow-400 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="mb-4">"Начала с нуля, без опыта в маркетинге. Через месяц первые деньги, через 3 - $2500. Сейчас развиваю агентство на основе полученных знаний."</p>
	<div class="text-xs bg-gold bg-opacity-20 text-gold px-3 py-1 rounded inline-block">Результат через 3 месяца</div>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-neon-purple text-black px-8 py-3 text-lg font-bold hover:bg-neon-blue hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level11')">
	Хочу такие же результаты <i class="fas fa-rocket ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 11: FAQ -->
	<section class="section flex items-center justify-center" id="level11">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-4xl md:text-5xl font-bold mb-12 text-center neon-text neon-blue">Вопросы и ответы</h2>

	<div class="grid md:grid-cols-2 gap-8 mb-12">
	<!-- FAQ Column 1 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg mb-4">
	<h3 class="font-bold mb-2 neon-blue">Сколько времени нужно уделять?</h3>
	<p class="text-sm">Для первых результатов достаточно 2-3 часов в день. По мере роста кампаний время можно сократить до контроля и оптимизации.</p>
	</div>

	<div class="hologram p-6 rounded-lg mb-4">
	<h3 class="font-bold mb-2 neon-purple">Нужен ли начальный бюджет?</h3>
	<p class="text-sm">Минимальный бюджет для старта - $200-300. Это покрывает тестовые кампании. Дальше можно масштабироваться с прибыли.</p>
	</div>

	<div class="hologram p-6 rounded-lg">
	<h3 class="font-bold mb-2 neon-pink">Как быстро появятся первые результаты?</h3>
	<p class="text-sm">Первые продажи у большинства студентов происходят в течение 2-4 недель после начала обучения.</p>
	</div>
	</div>

	<!-- FAQ Column 2 -->
	<div class="fade-in">
	<div class="hologram p-6 rounded-lg mb-4">
	<h3 class="font-bold mb-2 neon-blue">Подойдет ли мне, если я новичок?</h3>
	<p class="text-sm">Курс рассчитан на полных новичков. Все объясняется от базовых понятий до сложных стратегий.</p>
	</div>

	<div class="hologram p-6 rounded-lg mb-4">
	<h3 class="font-bold mb-2 neon-purple">Есть ли гарантии результата?</h3>
	<p class="text-sm">Мы даем проверенную систему, но результат зависит от ваших действий. При серьезном подходе успех неизбежен.</p>
	</div>

	<div class="hologram p-6 rounded-lg">
	<h3 class="font-bold mb-2 neon-pink">Какой пакет выбрать?</h3>
	<p class="text-sm">Если бюджет ограничен - начните со Стандарта. Для быстрых результатов лучше Премиум или VIP с ментором.</p>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-neon-blue text-black px-8 py-3 text-lg font-bold hover:bg-neon-purple hover:text-white transition-all duration-300 glow-box cta-button" onclick="scrollToLevel('level12')">
	Готов начать! <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</section>

	<!-- Level 12: CTA -->
	<section class="section flex items-center justify-center" id="level12">
	<div class="max-w-4xl mx-auto text-center">
	<div class="door mx-auto mb-12" id="finalDoor">
	<div class="door-handle" onclick="openFinalDoor()"></div>
	<div class="keyhole"></div>
	</div>

	<h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text neon-blue">Твой новый уровень начинается сейчас</h2>
	<p class="text-xl mb-8">Если не сейчас — то когда? Начни путь с TMT уже сегодня.</p>

	<div class="max-w-md mx-auto">
	<form id="contactForm" class="space-y-4 mb-8">
	<input type="text" placeholder="Ваше имя" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
	<input type="email" placeholder="Email" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
	<input type="tel" placeholder="Телефон" class="w-full bg-black bg-opacity-50 border border-neon-blue text-white px-4 py-3 rounded focus:outline-none focus:ring-2 focus:ring-neon-blue">
	<button type="submit" class="w-full bg-gold text-black px-6 py-4 font-bold hover:bg-yellow-400 transition-all duration-300 glow-box cta-button text-lg">
	Войти в игру <i class="fas fa-door-open ml-2"></i>
	</button>
	</form>

	<div class="flex justify-center space-x-4">
	<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-blue hover:text-black">
	<i class="fab fa-telegram"></i>
	</a>
	<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-purple hover:text-black">
	<i class="fab fa-whatsapp"></i>
	</a>
	<a href="#" class="social-icon text-xl w-10 h-10 flex items-center justify-center rounded-full bg-black bg-opacity-50 hover:bg-neon-pink hover:text-black">
	<i class="fab fa-viber"></i>
	</a>
	</div>
	</div>
	</div>
	</section>

	<script>
	// User progress and achievements
	const userProgress = {
	currentLevel: 1,
	completedLevels: [],
	achievements: [],
	selectedCharacter: null,
	unlockedContent: [],
	xp: 0
	};

	// Achievement definitions
	const achievements = [
	{ id: 'start', title: 'Первые шаги', description: 'Вы начали свое путешествие в арбитраже', level: 1 },
	{ id: 'character', title: 'Выбор пути', description: 'Вы выбрали своего персонажа', level: 3 },
	{ id: 'inventory', title: 'Снаряжение', description: 'Вы ознакомились со своим арсеналом', level: 4 },
	{ id: 'halfway', title: 'Середина пути', description: 'Вы прошли половину программы', level: 6 },
	{ id: 'program', title: 'Знание - сила', description: 'Вы изучили программу курса', level: 7 },
	{ id: 'rewards', title: 'Охота за наградами', description: 'Вы узнали о своих возможных наградах', level: 8 },
	{ id: 'team', title: 'Командный дух', description: 'Вы познакомились с командой', level: 9 },
	{ id: 'packages', title: 'Выбор пакета', description: 'Вы рассмотрели варианты участия', level: 10 },
	{ id: 'contact', title: 'На связи', description: 'Вы связались с нами', level: 12 }
	];

	// Create XP badge
	function createXPBadge() {
	const container = document.getElementById('xpBadgeContainer');
	const badge = document.createElement('div');
	badge.className = 'xp-badge';
	badge.textContent = '+20 XP';
	badge.style.left = `${Math.random() * 80 + 10}%`;
	badge.style.top = `${Math.random() * 80 + 10}
	</html>