diff --git a/index.html b/index.html
index 104111e..aa9acd0 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ru" data-theme="auto">
+<html lang="ru" data-theme="dark">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -10,14 +10,52 @@
 <link rel="stylesheet" href="design-system/kt-ai-page.css">
 <style>
   a.kt-ai-btn { text-decoration: none; }
-  .product-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
-  .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--kt-ai-shadow); }
-  .product-card.selected { outline: 2px solid var(--kt-ai-primary); }
   .step { display: none; }
   .step.active { display: block; }
-  .role-chip { cursor: pointer; }
-  .role-chip.selected { background: var(--kt-ai-primary); color: white; }
-  .prompt-output { background: var(--kt-ai-bg-soft); padding: var(--kt-ai-space-6); border-radius: var(--kt-ai-radius-xl); font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-sm); white-space: pre-wrap; }
+  .kt-ai-hero { padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); }
+  .role-poster {
+    position: relative;
+    background: var(--kt-ai-card-bg);
+    border: 1px solid var(--kt-ai-border);
+    border-radius: var(--kt-ai-radius-2xl);
+    padding: var(--kt-ai-space-8);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    min-height: 280px;
+    display: flex;
+    flex-direction: column;
+  }
+  .role-poster:hover { transform: translateY(-8px); border-color: var(--kt-ai-primary); }
+  .role-poster.selected { outline: 2px solid var(--kt-ai-primary); }
+  .role-poster::before {
+    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
+    background: var(--role-accent, var(--kt-ai-primary));
+  }
+  .role-icon {
+    width: 64px; height: 64px; border-radius: var(--kt-ai-radius-xl);
+    background: var(--role-accent, var(--kt-ai-primary));
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: var(--kt-ai-space-5);
+  }
+  .role-icon svg { width: 28px; height: 28px; color: white; }
+  .role-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-3); }
+  .role-desc { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.5; flex-grow: 1; }
+  .product-card { cursor: pointer; transition: all 0.3s ease; }
+  .product-card:hover { transform: translateY(-4px); }
+  .product-card.selected { outline: 2px solid var(--kt-ai-primary); }
+  .product-icon {
+    width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg);
+    background: var(--kt-ai-primary);
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: var(--kt-ai-space-4);
+  }
+  .product-icon svg { width: 24px; height: 24px; color: white; }
+  .prompt-output {
+    background: var(--kt-ai-bg-soft); padding: var(--kt-ai-space-6); border-radius: var(--kt-ai-radius-xl);
+    font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-sm); white-space: pre-wrap;
+    border: 1px solid var(--kt-ai-border); max-height: 400px; overflow-y: auto;
+  }
 </style>
 </head>
 <body>
@@ -32,102 +70,132 @@
 
 <section class="kt-ai-hero" data-align="center">
   <div class="kt-ai-wrap">
-    <h1>Создай свой AI-сервис за 60 минут</h1>
-    <p class="kt-ai-hero-sub">Выбери продукт, настрой под себя и получи готовый промт для Vibe AI</p>
+    <h1 style="max-width: 720px; margin: 0 auto">Создай свой AI-сервис за 60 минут</h1>
+    <p class="kt-ai-hero-sub" style="max-width: 560px; margin: var(--kt-ai-space-4) auto 0">Выбери роль, настрой продукт и получи готовый промт для Vibe AI</p>
   </div>
 </section>
 
 <main class="kt-ai-wrap" style="padding: var(--kt-ai-space-12) 0">
   
-  <!-- Шаг 1: Выбор роли -->
   <div id="step1" class="step active">
-    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
+    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
       <h2>Кто вы?</h2>
       <p>Выберите роль — мы подберем подходящие сервисы</p>
     </div>
-    <div class="kt-ai-grid" data-cols="3" style="gap: var(--kt-ai-space-4); justify-content: center;">
-      <div class="kt-ai-chip role-chip" data-role="entrepreneur">Предприниматель</div>
-      <div class="kt-ai-chip role-chip" data-role="it">IT-специалист</div>
-      <div class="kt-ai-chip role-chip" data-role="hr">HR</div>
-      <div class="kt-ai-chip role-chip" data-role="marketing">Маркетолог</div>
-      <div class="kt-ai-chip role-chip" data-role="student">Студент</div>
-      <div class="kt-ai-chip role-chip" data-role="creator">Creator</div>
-      <div class="kt-ai-chip role-chip" data-role="beginner" style="grid-column: span 3">Просто хочу попробовать</div>
+    <div class="kt-ai-grid" data-cols="4" style="gap: var(--kt-ai-space-6)">
+      <div class="role-poster" data-role="entrepreneur" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
+        <div class="role-title">Предприниматель</div>
+        <div class="role-desc">Создаю бизнес-инструменты для роста и автоматизации</div>
+      </div>
+      <div class="role-poster" data-role="it" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#tool"></use></svg></div>
+        <div class="role-title">IT-специалист</div>
+        <div class="role-desc">Разрабатываю решения для коллег и клиентов</div>
+      </div>
+      <div class="role-poster" data-role="hr" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#users"></use></svg></div>
+        <div class="role-title">HR</div>
+        <div class="role-desc">Подбираю таланты и развиваю команду</div>
+      </div>
+      <div class="role-poster" data-role="marketing" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#megaphone"></use></svg></div>
+        <div class="role-title">Маркетолог</div>
+        <div class="role-desc">Продвигаю продукты и создаю контент</div>
+      </div>
+      <div class="role-poster" data-role="student" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#book"></use></svg></div>
+        <div class="role-title">Студент</div>
+        <div class="role-desc">Учусь и создаю проекты для портфолио</div>
+      </div>
+      <div class="role-poster" data-role="creator" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
+        <div class="role-title">Creator</div>
+        <div class="role-desc">Создаю контент для соцсетей и блогов</div>
+      </div>
+      <div class="role-poster" data-role="beginner" style="grid-column: span 2; --role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
+        <div class="role-title">Просто хочу попробовать</div>
+        <div class="role-desc">Любопытно создать свой первый AI-сервис</div>
+      </div>
+      <div class="role-poster" data-role="custom" style="--role-accent: var(--kt-ai-primary)">
+        <div class="role-icon"><svg class="kt-icon"><use href="#settings"></use></svg></div>
+        <div class="role-title">Своя идея</div>
+        <div class="role-desc">Хочу создать уникальный продукт с нуля</div>
+      </div>
     </div>
   </div>
 
-  <!-- Шаг 2: Выбор продукта -->
   <div id="step2" class="step">
-    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
+    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
       <h2>Выберите сервис</h2>
       <p>8 готовых AI-решений под вашу задачу</p>
     </div>
     <div class="kt-ai-grid" data-cols="2" style="gap: var(--kt-ai-space-6)">
       <article class="kt-ai-card product-card" data-product="trip">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#rocket"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">AI Trip Planner</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Персональный маршрут путешествия по бюджету, интересам и типу отдыха</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">AI Trip Planner</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Персональный маршрут путешествия по бюджету, интересам и типу отдыха</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="budget">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#chart"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">Smart Budget</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Анализ бюджета: доходы, расходы, прогноз и рекомендации</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#chart"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">Smart Budget</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Анализ бюджета: доходы, расходы, прогноз и рекомендации</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="learning">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#book"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">AI Learning Coach</h3>
-          <p style="color: var(--kt-ai-fg-muted)">План обучения: язык, программирование, любой навык</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#book"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">AI Learning Coach</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">План обучения: язык, программирование, любой навык</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="hr">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#users"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">HR Candidate Matcher</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Сопоставление резюме и вакансии: % соответствия, риски, вопросы</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#users"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">HR Candidate Matcher</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Сопоставление резюме и вакансии: % соответствия, риски, вопросы</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="content">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#sparkles"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">AI Content Studio</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Контент-план, идеи, Reels, посты для соцсетей</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">AI Content Studio</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Контент-план, идеи, Reels, посты для соцсетей</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="idea">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#lightbulb"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">Business Idea Analyzer</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Анализ бизнес-идеи: аудитория, риски, монетизация</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">Business Idea Analyzer</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Анализ бизнес-идеи: аудитория, риски, монетизация</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="event">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#calendar"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">Event Planner</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Программа мероприятия, расписание, маршрут участника</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#calendar"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">Event Planner</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Программа мероприятия, расписание, маршрут участника</p>
         </div>
       </article>
       <article class="kt-ai-card product-card" data-product="task">
         <div class="kt-ai-card-body">
-          <svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#checklist"></use></svg>
-          <h3 style="margin-top: var(--kt-ai-space-4)">Smart Task Planner</h3>
-          <p style="color: var(--kt-ai-fg-muted)">Приоритизация задач, планирование расписания</p>
+          <div class="product-icon"><svg class="kt-icon"><use href="#checklist"></use></svg></div>
+          <h3 style="margin-bottom: var(--kt-ai-space-2)">Smart Task Planner</h3>
+          <p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Приоритизация задач, планирование расписания</p>
         </div>
       </article>
     </div>
-    <div style="text-align: center; margin-top: var(--kt-ai-space-6)">
+    <div style="text-align: center; margin-top: var(--kt-ai-space-8)">
       <button class="kt-ai-btn" data-variant="ghost" onclick="goToStep(1)">← Назад</button>
     </div>
   </div>
 
-  <!-- Шаг 3: Кастомизация -->
   <div id="step3" class="step">
-    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
+    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
       <h2 id="productTitle">Настройка сервиса</h2>
       <p>Ответьте на 4 вопроса для персонализации</p>
     </div>
@@ -162,9 +230,8 @@
     </div>
   </div>
 
-  <!-- Шаг 4: Результат -->
   <div id="step4" class="step">
-    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
+    <div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
       <h2>Ваш промт готов!</h2>
       <p>Скопируйте или откройте в Vibe AI</p>
     </div>
@@ -188,10 +255,11 @@
 
 </main>
 
-<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-12)">
-  <span>© 2026 Vibe42 × Digital Bridge</span>
-  <span class="kt-ai-spacer"></span>
-  <span>Создай свой AI-сервис за 60 минут</span>
+<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-12); padding: var(--kt-ai-space-8) 0; border-top: 1px solid var(--kt-ai-divider)">
+  <div style="display: flex; justify-content: space-between; align-items: center">
+    <span style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">© 2026 Vibe42 × Digital Bridge</span>
+    <span style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Создай свой AI-сервис за 60 минут</span>
+  </div>
 </footer>
 
 <script src="design-system/icons/kt-ai-icons.js"></script>
@@ -361,17 +429,15 @@ AI-фичи:
   }
 };
 
-// Роли
-document.querySelectorAll('.role-chip').forEach(chip => {
-  chip.addEventListener('click', () => {
-    document.querySelectorAll('.role-chip').forEach(c => c.classList.remove('selected'));
-    chip.classList.add('selected');
-    selectedRole = chip.dataset.role;
+document.querySelectorAll('.role-poster').forEach(poster => {
+  poster.addEventListener('click', () => {
+    document.querySelectorAll('.role-poster').forEach(p => p.classList.remove('selected'));
+    poster.classList.add('selected');
+    selectedRole = poster.dataset.role;
     setTimeout(() => goToStep(2), 200);
   });
 });
 
-// Продукты
 document.querySelectorAll('.product-card').forEach(card => {
   card.addEventListener('click', () => {
     document.querySelectorAll('.product-card').forEach(c => c.classList.remove('selected'));
@@ -393,9 +459,7 @@ function generatePrompt() {
   const q2 = document.getElementById('q2').value || 'не указано';
   const q3 = document.getElementById('q3').value;
   const q4 = document.getElementById('q4').value || 'не указано';
-
   const basePrompt = productPrompts[selectedProduct].base;
-  
   const customPrompt = `${basePrompt}
 
 ---
@@ -413,22 +477,19 @@ function generatePrompt() {
 4. Все данные сохраняй в localStorage или data.json
 5. Опубликуй как веб-страницу в локальном git
 6. Убедись, что приложение работает автономно`;
-
   document.getElementById('promptOutput').textContent = customPrompt;
   goToStep(4);
 }
 
 function copyPrompt() {
   const text = document.getElementById('promptOutput').textContent;
-  navigator.clipboard.writeText(text).then(() => {
-    alert('Промт скопирован в буфер обмена!');
-  });
+  navigator.clipboard.writeText(text).then(() => alert('Промт скопирован!'));
 }
 
 function resetWizard() {
   selectedRole = null;
   selectedProduct = null;
-  document.querySelectorAll('.role-chip, .product-card').forEach(el => el.classList.remove('selected'));
+  document.querySelectorAll('.role-poster, .product-card').forEach(el => el.classList.remove('selected'));
   document.querySelectorAll('input').forEach(i => i.value = '');
   goToStep(1);
 }
diff --git a/screenshot-20260915-201927.png b/screenshot-20260915-201927.png
new file mode 100644
index 0000000..f30fc02
Binary files /dev/null and b/screenshot-20260915-201927.png differ
