diff --git a/index.html b/index.html
index 02eb1df..95354a0 100644
--- a/index.html
+++ b/index.html
@@ -1,77 +1,131 @@
-<!doctype html>
-<html lang="ru">
+<!DOCTYPE html>
+<html lang="ru" data-theme="auto">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Красивое позирование на фото</title>
-<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Поза — красивое позирование на фото</title>
+<link rel="icon" href="design-system/brand/kt-ai-logo.png">
+<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
+<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
+<link rel="stylesheet" href="design-system/kt-ai-components.css">
+<link rel="stylesheet" href="design-system/kt-ai-page.css">
 <style>
-  * { margin: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #14100e; color: #f7f3ee; }
-  .slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; }
-  .slide.on { display: flex; }
-  .slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; }
-  .slide li { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.6; margin-bottom: 10px; list-style: none; padding-left: 28px; position: relative; }
-  .slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: #e8b04b; }
-  .num { position: fixed; bottom: 18px; right: 22px; color: #9a938c; font-size: 14px; }
-  .nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
-  .nav button { border: 1px solid #3a332d; background: #1f1915; color: #f7f3ee; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
-  .nav .pptx { border-color: #e8b04b; color: #f2d3a0; }
-  @media print {
-    .nav, .num { display: none; }
-    .slide { display: flex; page-break-after: always; min-height: 100vh; }
-  }
+  a.kt-ai-btn { text-decoration: none; }
+  .pose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-9); }
+  .pose-card .kt-icon-lg { margin-bottom: var(--kt-ai-space-4); color: var(--kt-ai-primary); }
+  .pose-card h3 { margin: 0 0 var(--kt-ai-space-3); font-size: var(--kt-ai-text-lg); }
+  .pose-card p { margin: 0; color: var(--kt-ai-fg-muted); line-height: 1.55; }
+  .rules { margin: var(--kt-ai-space-9) 0 0; padding: 0; list-style: none; display: grid; gap: var(--kt-ai-space-4); }
+  .rules li { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; color: var(--kt-ai-fg); line-height: 1.5; }
+  .rules .kt-icon { flex-shrink: 0; margin-top: 4px; color: var(--kt-ai-primary); }
+  .photo { width: 100%; border-radius: var(--kt-ai-radius-3xl);   width: 100%; border-radius: var(--kt-ai-radius-3xl); display: block; margin-top: var(--kt-ai-space-8); }
 </style>
 </head>
 <body>
-<div id="deck"></div>
-<div class="nav">
-  <button onclick="go(-1)">Назад</button>
-  <button onclick="go(1)">Вперёд</button>
-  <button class="pptx" onclick="downloadPptx()">Скачать .pptx</button>
-</div>
-<div class="num" id="num"></div>
-<script>
-// ============ ВСЁ СОДЕРЖАНИЕ ПРЕЗЕНТАЦИИ — ТОЛЬКО В ЭТОМ МАССИВЕ ============
-var SLIDES = [
-  { title: "Красивое позирование на фото", bullets: ["Как не стоять доской", "Автор / дата"] },
-  { title: "Золотые правила", bullets: ["Расслабься и дыши", "Наклон корпуса чуть вперёд", "Взгляд — чуть выше объектива", "Двигайся между кадрами"] },
-  { title: "Позы для всего тела", bullets: ["Открытая стойка под 45°", "Вес на одну ногу", "Плечи со сдвигом", "Шаг-раздвоение"] },
-  { title: "Руки и детали", bullets: ["Руки: в карманы, на талию, у лица", "Не прижимай локти", "Плечо, талия, колено — в линию", "Одна конечность всегда свободная"] },
-  { title: "Портрет и верх по пояс", bullets: ["Опора — рука, стол, стена", "Плечи вниз и назад", "Подбородок чуть вперёд", "Отойди от камеры на полшага"] },
-  { title: "Лицо и взгляд", bullets: ["Расслабь челюсть", "Мягкая улыбка", "Взгляд чуть выше объектива", "Моргай между дёрганиями затвора"] },
-  { title: "Типичные ошибки", bullets: ["Стоишь «доской»", "Локти прижаты к телу", "Зажатая шея", "Параллель встать к камере"] },
-  { title: "Практика и итоги", bullets: ["Сними 20 кадров одной позы", "Сравни и выбери лучшие", "Главное: движение + дыхание"] }
-];
-// ============================================================================
-var cur = 0;
-function render() {
-  var deck = document.getElementById("deck");
-  deck.innerHTML = SLIDES.map(function (s, i) {
-    return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' +
-      s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>";
-  }).join("");
-  document.getElementById("num").textContent = (cur + 1) + " / " + SLIDES.length;
-}
-function go(d) { cur = Math.min(SLIDES.length - 1, Math.max(0, cur + d)); render(); }
-document.addEventListener("keydown", function (e) {
-  if (e.key === "ArrowRight" || e.key === " ") go(1);
-  if (e.key === "ArrowLeft") go(-1);
-});
-function downloadPptx() {
-  var p = new PptxGenJS();
-  p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
-  p.layout = "W";
-  SLIDES.forEach(function (s) {
-    var sl = p.addSlide();
-    sl.background = { color: "14100E" };
-    sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1.2, fontSize: 36, bold: true, color: "F7F3EE" });
-    sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
-      { x: 0.9, y: 2.0, w: 11.5, h: 4.8, fontSize: 20, color: "E8E0D8", lineSpacingMultiple: 1.4 });
-  });
-  p.writeFile({ fileName: "pozovanie.pptx" });
-}
-render();
-</script>
+
+<header class="kt-ai-pagehead">
+  <div class="kt-ai-wrap kt-ai-pagehead-in">
+    <strong>Поза</strong>
+    <span class="kt-ai-spacer"></span>
+    <a class="kt-ai-btn" data-variant="ghost" href="#rules">Правила</a>
+    <a class="kt-ai-btn" data-variant="primary" href="#pozy">Позы</a>
+  </div>
+</header>
+
+<section class="kt-ai-hero" data-align="center">
+  <div class="kt-ai-wrap">
+    <h1>Хватит стоять доской на фото</h1>
+    <p class="kt-ai-hero-sub">Пять простых правил и восемь поз, которые работают с любым фотоаппаратом — от смартфона до студийного света.</p>
+    <div class="kt-ai-hero-actions">
+      <a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#pozy">Смотреть позы</a>
+      <a class="kt-ai-btn" data-size="lg" href="#rules">Правила</a>
+    </div>
+    <img class="photo" src="https://loremflickr.com/1200/600/pose,studio" alt="Позирование в студии">
+  </div>
+</section>
+
+<section id="rules" class="kt-ai-section" data-divider="true">
+  <div class="kt-ai-wrap">
+    <div class="kt-ai-section-head">
+      <h2>Пять золотых правил</h2>
+      <p>Их проще всего нарушить именно на съёмке, поэтому держи их перед глазами.</p>
+    </div>
+    <ul class="rules">
+      <li><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#sun"></use></svg>Дыши и расслабляйся: зажатость видно даже издалека, вдох-выдох снимает скованность</li>
+      <li><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#arrowRight"></use></svg>Взгляд чуть выше объектива: так лицо выглядит уверенным, а не испуганным</li>
+      <li><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#sync"></use></svg>Переноши вес: вся стойка «доской» лечится тем, что стоишь на одной ноге</li>
+      <li><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#help"></use></svg>Локти никогда не прижимаем к телу: это самая частая ошибка новичков</li>
+      <li><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#refresh"></use></svg>Двигайся между кадрами: позы меняются, тогда из двадцати кадров всегда найдётся хороший</li>
+    </ul>
+  </div>
+</section>
+
+<section id="pozy" class="kt-ai-section" data-divider="true">
+  <div class="kt-ai-wrap">
+    <div class="kt-ai-section-head">
+      <h2>Восемь поз, которые всегда работают</h2>
+      <p>Всякие: тело целиком, портрет и «для компании». Берёшь и пробуешь.</p>
+    </div>
+    <div class="pose-grid">
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#arrowRight"></use></svg>
+        <h3>Открытая стойка под 45°</h3>
+        <p>Плечи смотрят в камеру с боку — это добавляет объёма и убирает «прямую» позу.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#user"></use></svg>
+        <h3>Шаг-раздвоение</h3>
+        <p>Одна нога впереди, вес на задней: талия и плечи естественно сдвигаются.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#sparkles"></use></svg>
+        <h3>Руки в карманах</h3>
+        <p>Классика для одежды с карманами: спина и плечи расправляются сами собой.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#lightbulb"></use></svg>
+        <h3>Рука у лица</h3>
+        <p>Ладонь чуть касается щеки или подбородка: лицо выглядит собранно и интересно.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#layers"></use></svg>
+        <h3>Портрет с опорой</h3>
+        <p>Руки сложены перед собой на столе: плечи падают вниз, исчезает зажатость.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#clipboard"></use></svg>
+        <h3>Спина к камере</h3>
+        <p>Глянешь поверх плеча в камеру: эффектно, а тело прячется в позу.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#building"></use></svg>
+        <h3>Опора на стену</h3>
+        <p>Одно плечо или спина к стене: поворот корпуса и «лишние руки» больше не проблема.</p>
+      </article>
+      <article class="kt-ai-card pose-card">
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#check"></use></svg>
+        <h3>Свободный шаг</h3>
+        <p>Идёшь в камеру, фото делают на ходу: всё живое, ничего не надо «ставить».</p>
+      </article>
+    </div>
+    <img class="photo" src="https://loremflickr.com/1200/600/pose,studio" alt="Разные позы перед камерой">
+  </div>
+</section>
+
+<section class="kt-ai-cta">
+  <div class="kt-ai-wrap">
+    <h2>Попробуй прямо сейчас</h2>
+    <p>Сними себя по одной позе — 20 кадров. Потом сравни 8 лучших: разница сразу видна.</p>
+    <a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://wa.me/77001112233?text=Пришли%20мне%20свои%20лучшие%20кадры">Оставить заявку в WhatsApp</a>
+  </div>
+</section>
+
+<footer class="kt-ai-wrap kt-ai-pagefoot">
+  <span>© 2026 Поза — уроки красивого позирования</span>
+  <span class="kt-ai-spacer"></span>
+  <span>7 700 111 22 33</span>
+</footer>
+
+<script src="design-system/icons/kt-ai-icons.js"></script>
 </body>
 </html>
