From d69f2146df28557cb49047114c472d67093409ba Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 10 Feb 2026 16:07:32 +0700
Subject: [PATCH] Move prototype to standalone iframe page and align phone
 right

---
 app/app.vue           | 658 ++++--------------------------------------
 public/prototype.html | 513 ++++++++++++++++++++++++++++++++
 2 files changed, 577 insertions(+), 594 deletions(-)
 create mode 100644 public/prototype.html

diff --git a/app/app.vue b/app/app.vue
index a66ec46..c533b08 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -9,7 +9,7 @@
       <main class="relative px-6 pb-16 pt-10 md:px-12 lg:px-20">
         <div class="grid gap-8 lg:grid-cols-[220px_1fr]">
           <aside class="hidden lg:block">
-            <div class="glass-panel sticky top-10 rounded-3xl border border-base-300 bg-base-100/90 p-5 shadow-soft">
+            <div class="glass-panel sticky top-10 rounded-3xl border border-base-300 p-5 shadow-soft">
               <div class="text-xs uppercase tracking-[0.2em] text-neutral/50">Навигация</div>
               <nav class="mt-4 space-y-2 text-sm">
                 <a class="nav-link block rounded-2xl px-3 py-2 text-neutral/70 border border-transparent" href="#context">Контекст</a>
@@ -54,21 +54,21 @@
               </div>
               <div class="slide-main">
                 <div class="grid gap-6 md:grid-cols-3 md:items-end">
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-8">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-8">
                     <h3 class="font-display text-2xl">Ожидания и реальность расходятся</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Нет общего понимания результата: стороны по-разному трактуют «готово» и «качественно».
                     </p>
                     <p class="mt-3 text-xs text-neutral/60">Заказчик: не уверен, что «сделано правильно». Исполнитель: не понимает, как это доказать.</p>
                   </div>
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-14">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-14">
                     <h3 class="font-display text-2xl">Критерии не зафиксированы</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Нет списка требований, допусков и контрольных точек — спор легко уходит в эмоции.
                     </p>
                     <p class="mt-3 text-xs text-neutral/60">Заказчик: нет прозрачной проверки. Исполнитель: нет единого регламента.</p>
                   </div>
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-4">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-4">
                     <h3 class="font-display text-2xl">Финансовый риск у обеих сторон</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Платежи завязаны на доверии, а не на факте качества — обе стороны боятся потерь.
@@ -90,7 +90,7 @@
                 </p>
               </div>
               <div class="slide-main">
-                <div class="glass-panel rounded-3xl border border-base-300 bg-base-100/90 p-6">
+                <div class="glass-panel rounded-3xl border border-base-300 p-6">
                   <div class="text-xs font-semibold text-neutral/60">Пример регламентной приемки</div>
                   <div class="mt-4 grid grid-cols-[1.1fr_1.3fr_0.9fr_1fr] gap-3 text-sm">
                     <div class="rounded-2xl bg-base-200 px-4 py-3 font-semibold text-neutral/70">Работа</div>
@@ -128,21 +128,21 @@
               </div>
               <div class="slide-main">
                 <div class="grid gap-6 md:grid-cols-3">
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
                     <div class="text-xs font-semibold text-neutral/60">Шаг 1</div>
                     <h3 class="mt-2 font-display text-2xl">Вход и расчет</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Заказчик загружает объект, система сразу считает смету и формирует план.
                     </p>
                   </div>
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
                     <div class="text-xs font-semibold text-neutral/60">Шаг 2</div>
                     <h3 class="mt-2 font-display text-2xl">Регламент и работа</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Этапы и критерии фиксируются, исполнитель ведет работы по чек-листам.
                     </p>
                   </div>
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
                     <div class="text-xs font-semibold text-neutral/60">Шаг 3</div>
                     <h3 class="mt-2 font-display text-2xl">Независимая проверка</h3>
                     <p class="mt-3 text-sm text-neutral/70">
@@ -164,14 +164,14 @@
               </div>
               <div class="slide-main">
                 <div class="grid gap-6 md:grid-cols-2">
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
                     <h3 class="font-display text-2xl">Заказчик</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Прозрачная смета, понятные критерии качества и независимая приемка. Деньги защищены
                       эскроу, а результат подтвержден экспертом.
                     </p>
                   </div>
-                  <div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
                     <h3 class="font-display text-2xl">Исполнитель</h3>
                     <p class="mt-3 text-sm text-neutral/70">
                       Четкий регламент работ, меньше спорных ситуаций и гарантированная оплата после проверки.
@@ -191,8 +191,8 @@
                   путь от объекта до понятной сметы, этапов и уведомлений. Окунитесь в то, как это может выглядеть.
                 </p>
               </div>
-              <div class="slide-main">
-                <div class="relative flex justify-center">
+              <div class="slide-main items-end">
+                <div class="relative flex w-full justify-end">
                   <div class="iphone-frame shadow-glow">
                     <span class="iphone-button iphone-button--mute" aria-hidden="true"></span>
                     <span class="iphone-button iphone-button--vol-up" aria-hidden="true"></span>
@@ -203,7 +203,7 @@
                       <iframe
                         class="iphone-iframe"
                         title="Прототип пользовательского пути"
-                        :srcdoc="prototypeSrcdoc"
+                        src="/prototype.html"
                       ></iframe>
                     </div>
                   </div>
@@ -221,38 +221,34 @@
                 </p>
               </div>
               <div class="slide-main">
-                <div class="glass-panel relative overflow-hidden rounded-3xl border border-base-300 bg-base-100/90 p-8">
-                  <div class="pointer-events-none absolute -left-16 top-10 h-36 w-36 rounded-full bg-primary/15 blur-3xl"></div>
-                  <div class="pointer-events-none absolute -right-10 bottom-0 h-40 w-40 rounded-full bg-secondary/20 blur-3xl"></div>
-                  <div class="relative grid gap-6 md:grid-cols-3">
-                    <div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
-                      <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
-                        <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
-                          <path d="M12 3v18M7 7h5a3 3 0 1 1 0 6H9a3 3 0 1 0 0 6h5" />
-                        </svg>
-                      </div>
-                      <h3 class="font-display text-2xl">Комиссия эскроу</h3>
-                      <p class="mt-3 text-sm text-neutral/70">Процент от подтвержденного этапа, удерживается сервисом.</p>
+                <div class="grid gap-6 md:grid-cols-3">
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
+                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
+                      <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
+                        <path d="M12 3v18M7 7h5a3 3 0 1 1 0 6H9a3 3 0 1 0 0 6h5" />
+                      </svg>
                     </div>
-                    <div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
-                      <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
-                        <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
-                          <path d="M4 20h16M6 20l2-10h8l2 10M9 10V6a3 3 0 0 1 6 0v4" />
-                        </svg>
-                      </div>
-                      <h3 class="font-display text-2xl">Инспекция</h3>
-                      <p class="mt-3 text-sm text-neutral/70">Плата за выезд и экспертизу, инициирует заказчик.</p>
+                    <h3 class="font-display text-2xl">Комиссия эскроу</h3>
+                    <p class="mt-3 text-sm text-neutral/70">Процент от подтвержденного этапа, удерживается сервисом.</p>
+                  </div>
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
+                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
+                      <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
+                        <path d="M4 20h16M6 20l2-10h8l2 10M9 10V6a3 3 0 0 1 6 0v4" />
+                      </svg>
                     </div>
-                    <div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
-                      <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
-                        <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
-                          <path d="M4 7h16l-2 10H6L4 7z" />
-                          <path d="M8 7V5a4 4 0 0 1 8 0v2" />
-                        </svg>
-                      </div>
-                      <h3 class="font-display text-2xl">Материалы</h3>
-                      <p class="mt-3 text-sm text-neutral/70">За материалы платит заказчик, сервис получает маржу.</p>
+                    <h3 class="font-display text-2xl">Инспекция</h3>
+                    <p class="mt-3 text-sm text-neutral/70">Плата за выезд и экспертизу, инициирует заказчик.</p>
+                  </div>
+                  <div class="glass-card rounded-3xl p-6 shadow-soft">
+                    <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
+                      <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
+                        <path d="M4 7h16l-2 10H6L4 7z" />
+                        <path d="M8 7V5a4 4 0 0 1 8 0v2" />
+                      </svg>
                     </div>
+                    <h3 class="font-display text-2xl">Материалы</h3>
+                    <p class="mt-3 text-sm text-neutral/70">За материалы платит заказчик, сервис получает маржу.</p>
                   </div>
                 </div>
               </div>
@@ -277,15 +273,15 @@
                     </p>
                   </div>
                   <div class="grid gap-4">
-                    <div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
+                    <div class="glass-card rounded-3xl border border-base-300 p-6">
                       <div class="text-xs font-semibold text-neutral/60">Качество</div>
                       <div class="mt-2 font-display text-xl">Доля зеленых приемок</div>
                     </div>
-                    <div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
+                    <div class="glass-card rounded-3xl border border-base-300 p-6">
                       <div class="text-xs font-semibold text-neutral/60">Скорость</div>
                       <div class="mt-2 font-display text-xl">Среднее время приемки этапа</div>
                     </div>
-                    <div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
+                    <div class="glass-card rounded-3xl border border-base-300 p-6">
                       <div class="text-xs font-semibold text-neutral/60">Точность</div>
                       <div class="mt-2 font-display text-xl">Отклонение сметы от факта</div>
                     </div>
@@ -304,7 +300,7 @@
                 </p>
               </div>
               <div class="slide-main">
-                <div class="glass-panel rounded-3xl border border-base-300 bg-base-100/90 p-6">
+                <div class="glass-panel rounded-3xl border border-base-300 p-6">
                   <div class="grid gap-4 text-sm">
                     <div class="grid grid-cols-6 gap-2 text-xs text-neutral/50">
                       <div>М1</div>
@@ -318,25 +314,25 @@
                     <div class="grid grid-cols-[160px_1fr] items-center gap-4">
                       <div class="text-neutral/70">Пилот и гипотезы</div>
                       <div class="grid grid-cols-6 gap-2">
-                        <div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М1–М2</div>
-                        <div class="col-span-4 rounded-full bg-base-200 py-2"></div>
+                        <div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М1–М2</div>
+                        <div class="col-span-4 rounded-full bg-base-300/70 py-2"></div>
                       </div>
                     </div>
 
                     <div class="grid grid-cols-[160px_1fr] items-center gap-4">
                       <div class="text-neutral/70">Встраивание в процессы</div>
                       <div class="grid grid-cols-6 gap-2">
-                        <div class="col-span-2 rounded-full bg-base-200 py-2"></div>
-                        <div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М3–М4</div>
-                        <div class="col-span-2 rounded-full bg-base-200 py-2"></div>
+                        <div class="col-span-2 rounded-full bg-base-300/70 py-2"></div>
+                        <div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М3–М4</div>
+                        <div class="col-span-2 rounded-full bg-base-300/70 py-2"></div>
                       </div>
                     </div>
 
                     <div class="grid grid-cols-[160px_1fr] items-center gap-4">
                       <div class="text-neutral/70">Масштабирование</div>
                       <div class="grid grid-cols-6 gap-2">
-                        <div class="col-span-4 rounded-full bg-base-200 py-2"></div>
-                        <div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М5–М6</div>
+                        <div class="col-span-4 rounded-full bg-base-300/70 py-2"></div>
+                        <div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М5–М6</div>
                       </div>
                     </div>
                   </div>
@@ -374,539 +370,7 @@ useHead({
   ]
 })
 
-const prototypeSrcdoc = `<!DOCTYPE html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Прототип</title>
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
 
-      * {
-        box-sizing: border-box;
-      }
-
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        font-family: 'Manrope', system-ui, sans-serif;
-        color: #171717;
-        background: #f4f1eb;
-      }
-
-      .app {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 34px 16px 18px;
-        background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 239, 232, 0.92));
-      }
-
-      .status {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 12px;
-        color: #2d2d2d;
-      }
-
-      .pill {
-        font-size: 10px;
-        letter-spacing: 0.18em;
-        text-transform: uppercase;
-        padding: 4px 10px;
-        border-radius: 999px;
-        background: rgba(26, 77, 122, 0.12);
-        color: #1a4d7a;
-        font-weight: 600;
-      }
-
-      .icons {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-
-      .dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 999px;
-        background: #1a4d7a;
-      }
-
-      .progress {
-        position: relative;
-        height: 6px;
-        background: rgba(26, 77, 122, 0.12);
-        border-radius: 999px;
-        overflow: hidden;
-      }
-
-      .progress__bar {
-        position: absolute;
-        inset: 0;
-        width: 10%;
-        background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
-        border-radius: inherit;
-        transition: width 0.35s ease;
-      }
-
-      .card {
-        background: rgba(255, 255, 255, 0.92);
-        border-radius: 18px;
-        border: 1px solid rgba(23, 23, 23, 0.08);
-        padding: 14px;
-        box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
-      }
-
-      .card.main {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-      }
-
-      .eyebrow {
-        font-size: 10px;
-        letter-spacing: 0.16em;
-        text-transform: uppercase;
-        color: rgba(23, 23, 23, 0.5);
-      }
-
-      .title {
-        font-size: 20px;
-        font-weight: 700;
-      }
-
-      .subtitle {
-        font-size: 12px;
-        color: rgba(23, 23, 23, 0.64);
-        margin: 0;
-      }
-
-      .list {
-        display: grid;
-        gap: 8px;
-        margin-top: 4px;
-      }
-
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 10px;
-        border-radius: 12px;
-        background: #f0ece6;
-        font-size: 12px;
-      }
-
-      .item strong {
-        font-weight: 600;
-      }
-
-      .tag {
-        padding: 2px 8px;
-        border-radius: 999px;
-        font-size: 10px;
-        font-weight: 600;
-      }
-
-      .tag.success {
-        background: rgba(31, 129, 84, 0.14);
-        color: #1f8154;
-      }
-
-      .tag.pending {
-        background: rgba(211, 135, 32, 0.15);
-        color: #b7741c;
-      }
-
-      .tag.info {
-        background: rgba(26, 77, 122, 0.14);
-        color: #1a4d7a;
-      }
-
-      .info-card {
-        font-size: 12px;
-        color: rgba(23, 23, 23, 0.7);
-        line-height: 1.4;
-      }
-
-      .actions {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 8px;
-      }
-
-      .actions .btn {
-        border: none;
-        border-radius: 14px;
-        padding: 10px 12px;
-        font-size: 12px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-      }
-
-      .actions .btn:active {
-        transform: scale(0.98);
-      }
-
-      .btn.primary {
-        background: #1a4d7a;
-        color: #fff;
-        box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
-        grid-column: span 2;
-      }
-
-      .btn.secondary {
-        background: rgba(26, 77, 122, 0.12);
-        color: #1a4d7a;
-      }
-
-      .btn.ghost {
-        background: rgba(23, 23, 23, 0.06);
-        color: rgba(23, 23, 23, 0.75);
-      }
-
-      .btn[disabled] {
-        opacity: 0.45;
-        cursor: not-allowed;
-        transform: none;
-        box-shadow: none;
-      }
-
-      .cta-row {
-        display: flex;
-        gap: 6px;
-        flex-wrap: wrap;
-      }
-
-      .cta {
-        padding: 6px 10px;
-        border-radius: 999px;
-        font-size: 11px;
-        font-weight: 600;
-        background: #1a4d7a;
-        color: #fff;
-      }
-
-      .cta.light {
-        background: rgba(26, 77, 122, 0.12);
-        color: #1a4d7a;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="app">
-      <div class="status">
-        <div>9:41</div>
-        <div class="pill">Контроль ремонта</div>
-        <div class="icons">
-          <span class="dot"></span>
-          <span class="dot"></span>
-          <span class="dot"></span>
-        </div>
-      </div>
-      <div class="progress">
-        <div class="progress__bar" id="progressBar"></div>
-      </div>
-      <div class="card main">
-        <div class="eyebrow" id="stepLabel"></div>
-        <div class="title" id="stepTitle"></div>
-        <p class="subtitle" id="stepSubtitle"></p>
-        <div id="stepContent"></div>
-      </div>
-      <div class="card info-card" id="helperCard"></div>
-      <div class="actions">
-        <button class="btn ghost" data-action="back">Назад</button>
-        <button class="btn secondary" data-action="primary">Добавить</button>
-        <button class="btn primary" data-action="next">Далее</button>
-      </div>
-    </div>
-    <script>
-      (function () {
-        var state = {
-          step: 0,
-          projectCreated: false,
-          addressAdded: false,
-          mediaAdded: false,
-          quoteApproved: false,
-          stageStarted: false,
-          accepted: false
-        };
-
-        function resetState() {
-          state.step = 0;
-          state.projectCreated = false;
-          state.addressAdded = false;
-          state.mediaAdded = false;
-          state.quoteApproved = false;
-          state.stageStarted = false;
-          state.accepted = false;
-        }
-
-        var steps = [
-          {
-            label: 'Шаг 1 из 6',
-            title: 'Старт проекта',
-            subtitle: 'Зафиксируйте объект, чтобы запустить сценарий.',
-            primaryLabel: 'Создать проект',
-            onPrimary: function () {
-              state.projectCreated = true;
-            },
-            ready: function () {
-              return state.projectCreated;
-            },
-            content: function () {
-              var status = state.projectCreated ? 'Проект создан' : 'Проект не создан';
-              var tagClass = state.projectCreated ? 'success' : 'pending';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Объект</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>План приемки</strong><span class="tag info">В подготовке</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.projectCreated
-                ? 'Проект создан. Теперь добавьте адрес и параметры объекта, чтобы расчет стал точным.'
-                : 'Нажмите «Создать проект», чтобы зафиксировать старт и открыть следующие шаги.';
-            }
-          },
-          {
-            label: 'Шаг 2 из 6',
-            title: 'Добавление объекта',
-            subtitle: 'Адрес и параметры нужны для точной сметы.',
-            primaryLabel: 'Добавить адрес',
-            onPrimary: function () {
-              state.addressAdded = true;
-            },
-            ready: function () {
-              return state.addressAdded;
-            },
-            content: function () {
-              var address = state.addressAdded ? 'Москва, ул. Правды, 12' : 'Адрес не указан';
-              var tagClass = state.addressAdded ? 'success' : 'pending';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Адрес</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                address +
-                '</span></div>' +
-                '<div class="item"><strong>Метраж</strong><span class="tag info">68 м²</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.addressAdded
-                ? 'Адрес сохранен. Переходим к медиа — это помогает зафиксировать стартовое состояние.'
-                : 'Добавьте адрес, чтобы расчет сметы учитывал реальный объект.';
-            }
-          },
-          {
-            label: 'Шаг 3 из 6',
-            title: 'Фото и видео',
-            subtitle: 'Фиксируем стартовое состояние объекта.',
-            primaryLabel: 'Добавить медиа',
-            onPrimary: function () {
-              state.mediaAdded = true;
-            },
-            ready: function () {
-              return state.mediaAdded;
-            },
-            content: function () {
-              var text = state.mediaAdded ? '12 фото, 2 видео' : 'Медиа не загружены';
-              var tagClass = state.mediaAdded ? 'success' : 'pending';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Загрузка</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                text +
-                '</span></div>' +
-                '<div class="item"><strong>Комментарий</strong><span class="tag info">Черновая стяжка</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.mediaAdded
-                ? 'Медиа загружены. Система сформирует смету и этапы на основании материалов.'
-                : 'Добавьте фото и видео, чтобы у обеих сторон была единая точка отсчета.';
-            }
-          },
-          {
-            label: 'Шаг 4 из 6',
-            title: 'Смета и этапы',
-            subtitle: 'Проверьте расчет и зафиксируйте этапы.',
-            primaryLabel: 'Согласовать смету',
-            onPrimary: function () {
-              state.quoteApproved = true;
-            },
-            ready: function () {
-              return state.quoteApproved;
-            },
-            content: function () {
-              var tagClass = state.quoteApproved ? 'success' : 'pending';
-              var status = state.quoteApproved ? 'Согласовано' : 'На согласовании';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Смета</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Этапы</strong><span class="tag info">6 этапов</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.quoteApproved
-                ? 'Смета согласована. Можно запускать работы по первому этапу.'
-                : 'Согласуйте смету, чтобы зафиксировать финансовую модель и регламент.';
-            }
-          },
-          {
-            label: 'Шаг 5 из 6',
-            title: 'Старт этапа',
-            subtitle: 'Исполнитель следует чек-листу и фиксирует ход.',
-            primaryLabel: 'Запустить этап 1',
-            onPrimary: function () {
-              state.stageStarted = true;
-            },
-            ready: function () {
-              return state.stageStarted;
-            },
-            content: function () {
-              var tagClass = state.stageStarted ? 'success' : 'pending';
-              var status = state.stageStarted ? 'В работе' : 'Не запущен';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Этап 1</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Чек-лист</strong><span class="tag info">12 пунктов</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.stageStarted
-                ? 'Этап запущен. Система подготовит уведомление о приемке.'
-                : 'Запустите этап, чтобы начать работу и фиксировать прогресс.';
-            }
-          },
-          {
-            label: 'Шаг 6 из 6',
-            title: 'Приемка и оплата',
-            subtitle: 'Подтвердите качество, чтобы закрыть этап и оплату.',
-            primaryLabel: 'Подтвердить качество',
-            onPrimary: function () {
-              state.accepted = true;
-            },
-            ready: function () {
-              return state.accepted;
-            },
-            content: function () {
-              var status = state.accepted ? 'Принято' : 'Ожидает';
-              var tagClass = state.accepted ? 'success' : 'info';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Инспекция</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Эскроу</strong><span class="tag info">1 250 000 ₽</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.accepted
-                ? 'Качество подтверждено. Средства автоматически переводятся исполнителю.'
-                : 'Подтвердите качество, чтобы выпустить оплату и закрыть этап.';
-            }
-          }
-        ];
-
-        var stepLabel = document.getElementById('stepLabel');
-        var stepTitle = document.getElementById('stepTitle');
-        var stepSubtitle = document.getElementById('stepSubtitle');
-        var stepContent = document.getElementById('stepContent');
-        var helperCard = document.getElementById('helperCard');
-        var progressBar = document.getElementById('progressBar');
-        var actions = document.querySelector('.actions');
-
-        function render() {
-          var step = steps[state.step];
-          stepLabel.textContent = step.label;
-          stepTitle.textContent = step.title;
-          stepSubtitle.textContent = step.subtitle;
-          stepContent.innerHTML = step.content();
-          helperCard.textContent = step.helper();
-          progressBar.style.width = ((state.step + 1) / steps.length) * 100 + '%';
-
-          var buttons = actions.querySelectorAll('button');
-          buttons.forEach(function (btn) {
-            var action = btn.getAttribute('data-action');
-            if (action === 'back') {
-              btn.disabled = state.step === 0;
-            }
-            if (action === 'primary') {
-              btn.textContent = step.primaryLabel || 'Действие';
-              btn.style.display = step.primaryLabel ? 'inline-flex' : 'none';
-            }
-            if (action === 'next') {
-              btn.textContent = state.step === steps.length - 1 ? 'Завершить' : 'Далее';
-              btn.disabled = !step.ready();
-            }
-          });
-        }
-
-        actions.addEventListener('click', function (event) {
-          var target = event.target;
-          if (!target || !target.getAttribute) return;
-          var action = target.getAttribute('data-action');
-          var step = steps[state.step];
-          if (action === 'back') {
-            state.step = Math.max(0, state.step - 1);
-            render();
-            return;
-          }
-          if (action === 'primary') {
-            if (step.onPrimary) {
-              step.onPrimary();
-            }
-            render();
-            return;
-          }
-          if (action === 'next') {
-            if (!step.ready()) return;
-            if (state.step >= steps.length - 1) {
-              resetState();
-              render();
-              return;
-            }
-            state.step += 1;
-            render();
-          }
-        });
-
-        render();
-      })();
-    <\\/script>
-  </body>
-</html>`;
 
 let granimInstance
 
@@ -966,10 +430,10 @@ html {
 }
 
 .nav-link:hover {
-  background: rgba(255, 255, 255, 0.5);
-  border-color: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(14px) saturate(1.1);
-  -webkit-backdrop-filter: blur(14px) saturate(1.1);
+  background: rgba(255, 255, 255, 0.42);
+  border-color: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(16px) saturate(1.05);
+  -webkit-backdrop-filter: blur(16px) saturate(1.05);
   color: rgba(20, 20, 20, 0.85);
 }
 
@@ -1018,12 +482,18 @@ html {
   gap: 1.5rem;
 }
 
-.glass-panel,
-.glass-card {
-  background: rgba(255, 255, 255, 0.6);
+.glass-panel {
+  background: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(18px) saturate(1.1);
-  -webkit-backdrop-filter: blur(18px) saturate(1.1);
+  backdrop-filter: blur(24px) saturate(1.15);
+  -webkit-backdrop-filter: blur(24px) saturate(1.15);
+}
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(16px) saturate(1.05);
+  -webkit-backdrop-filter: blur(16px) saturate(1.05);
 }
 
 .iphone-frame {
diff --git a/public/prototype.html b/public/prototype.html
new file mode 100644
index 0000000..6e8ce2c
--- /dev/null
+++ b/public/prototype.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Прототип</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: 'Manrope', system-ui, sans-serif;
+        color: #171717;
+        background: #f4f1eb;
+      }
+
+      .app {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 34px 16px 18px;
+        background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 239, 232, 0.92));
+      }
+
+      .status {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 12px;
+        color: #2d2d2d;
+      }
+
+      .pill {
+        font-size: 10px;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        padding: 4px 10px;
+        border-radius: 999px;
+        background: rgba(26, 77, 122, 0.12);
+        color: #1a4d7a;
+        font-weight: 600;
+      }
+
+      .icons {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 999px;
+        background: #1a4d7a;
+      }
+
+      .progress {
+        position: relative;
+        height: 6px;
+        background: rgba(26, 77, 122, 0.12);
+        border-radius: 999px;
+        overflow: hidden;
+      }
+
+      .progress__bar {
+        position: absolute;
+        inset: 0;
+        width: 10%;
+        background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
+        border-radius: inherit;
+        transition: width 0.35s ease;
+      }
+
+      .card {
+        background: rgba(255, 255, 255, 0.92);
+        border-radius: 18px;
+        border: 1px solid rgba(23, 23, 23, 0.08);
+        padding: 14px;
+        box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
+      }
+
+      .card.main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .eyebrow {
+        font-size: 10px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: rgba(23, 23, 23, 0.5);
+      }
+
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+      }
+
+      .subtitle {
+        font-size: 12px;
+        color: rgba(23, 23, 23, 0.64);
+        margin: 0;
+      }
+
+      .list {
+        display: grid;
+        gap: 8px;
+        margin-top: 4px;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        border-radius: 12px;
+        background: #f0ece6;
+        font-size: 12px;
+      }
+
+      .item strong {
+        font-weight: 600;
+      }
+
+      .tag {
+        padding: 2px 8px;
+        border-radius: 999px;
+        font-size: 10px;
+        font-weight: 600;
+      }
+
+      .tag.success {
+        background: rgba(31, 129, 84, 0.14);
+        color: #1f8154;
+      }
+
+      .tag.pending {
+        background: rgba(211, 135, 32, 0.15);
+        color: #b7741c;
+      }
+
+      .tag.info {
+        background: rgba(26, 77, 122, 0.14);
+        color: #1a4d7a;
+      }
+
+      .info-card {
+        font-size: 12px;
+        color: rgba(23, 23, 23, 0.7);
+        line-height: 1.4;
+      }
+
+      .actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+
+      .actions .btn {
+        border: none;
+        border-radius: 14px;
+        padding: 10px 12px;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+      }
+
+      .actions .btn:active {
+        transform: scale(0.98);
+      }
+
+      .btn.primary {
+        background: #1a4d7a;
+        color: #fff;
+        box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
+        grid-column: span 2;
+      }
+
+      .btn.secondary {
+        background: rgba(26, 77, 122, 0.12);
+        color: #1a4d7a;
+      }
+
+      .btn.ghost {
+        background: rgba(23, 23, 23, 0.06);
+        color: rgba(23, 23, 23, 0.75);
+      }
+
+      .btn[disabled] {
+        opacity: 0.45;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="app">
+      <div class="status">
+        <div>9:41</div>
+        <div class="pill">Контроль ремонта</div>
+        <div class="icons">
+          <span class="dot"></span>
+          <span class="dot"></span>
+          <span class="dot"></span>
+        </div>
+      </div>
+      <div class="progress">
+        <div class="progress__bar" id="progressBar"></div>
+      </div>
+      <div class="card main">
+        <div class="eyebrow" id="stepLabel"></div>
+        <div class="title" id="stepTitle"></div>
+        <p class="subtitle" id="stepSubtitle"></p>
+        <div id="stepContent"></div>
+      </div>
+      <div class="card info-card" id="helperCard"></div>
+      <div class="actions">
+        <button class="btn ghost" data-action="back">Назад</button>
+        <button class="btn secondary" data-action="primary">Добавить</button>
+        <button class="btn primary" data-action="next">Далее</button>
+      </div>
+    </div>
+    <script>
+      (function () {
+        var state = {
+          step: 0,
+          projectCreated: false,
+          addressAdded: false,
+          mediaAdded: false,
+          quoteApproved: false,
+          stageStarted: false,
+          accepted: false
+        };
+
+        function resetState() {
+          state.step = 0;
+          state.projectCreated = false;
+          state.addressAdded = false;
+          state.mediaAdded = false;
+          state.quoteApproved = false;
+          state.stageStarted = false;
+          state.accepted = false;
+        }
+
+        var steps = [
+          {
+            label: 'Шаг 1 из 6',
+            title: 'Старт проекта',
+            subtitle: 'Зафиксируйте объект, чтобы запустить сценарий.',
+            primaryLabel: 'Создать проект',
+            onPrimary: function () {
+              state.projectCreated = true;
+            },
+            ready: function () {
+              return state.projectCreated;
+            },
+            content: function () {
+              var status = state.projectCreated ? 'Проект создан' : 'Проект не создан';
+              var tagClass = state.projectCreated ? 'success' : 'pending';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Объект</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                status +
+                '</span></div>' +
+                '<div class="item"><strong>План приемки</strong><span class="tag info">В подготовке</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.projectCreated
+                ? 'Проект создан. Теперь добавьте адрес и параметры объекта, чтобы расчет стал точным.'
+                : 'Нажмите «Создать проект», чтобы зафиксировать старт и открыть следующие шаги.';
+            }
+          },
+          {
+            label: 'Шаг 2 из 6',
+            title: 'Добавление объекта',
+            subtitle: 'Адрес и параметры нужны для точной сметы.',
+            primaryLabel: 'Добавить адрес',
+            onPrimary: function () {
+              state.addressAdded = true;
+            },
+            ready: function () {
+              return state.addressAdded;
+            },
+            content: function () {
+              var address = state.addressAdded ? 'Москва, ул. Правды, 12' : 'Адрес не указан';
+              var tagClass = state.addressAdded ? 'success' : 'pending';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Адрес</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                address +
+                '</span></div>' +
+                '<div class="item"><strong>Метраж</strong><span class="tag info">68 м²</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.addressAdded
+                ? 'Адрес сохранен. Переходим к медиа — это помогает зафиксировать стартовое состояние.'
+                : 'Добавьте адрес, чтобы расчет сметы учитывал реальный объект.';
+            }
+          },
+          {
+            label: 'Шаг 3 из 6',
+            title: 'Фото и видео',
+            subtitle: 'Фиксируем стартовое состояние объекта.',
+            primaryLabel: 'Добавить медиа',
+            onPrimary: function () {
+              state.mediaAdded = true;
+            },
+            ready: function () {
+              return state.mediaAdded;
+            },
+            content: function () {
+              var text = state.mediaAdded ? '12 фото, 2 видео' : 'Медиа не загружены';
+              var tagClass = state.mediaAdded ? 'success' : 'pending';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Загрузка</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                text +
+                '</span></div>' +
+                '<div class="item"><strong>Комментарий</strong><span class="tag info">Черновая стяжка</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.mediaAdded
+                ? 'Медиа загружены. Система сформирует смету и этапы на основании материалов.'
+                : 'Добавьте фото и видео, чтобы у обеих сторон была единая точка отсчета.';
+            }
+          },
+          {
+            label: 'Шаг 4 из 6',
+            title: 'Смета и этапы',
+            subtitle: 'Проверьте расчет и зафиксируйте этапы.',
+            primaryLabel: 'Согласовать смету',
+            onPrimary: function () {
+              state.quoteApproved = true;
+            },
+            ready: function () {
+              return state.quoteApproved;
+            },
+            content: function () {
+              var tagClass = state.quoteApproved ? 'success' : 'pending';
+              var status = state.quoteApproved ? 'Согласовано' : 'На согласовании';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Смета</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                status +
+                '</span></div>' +
+                '<div class="item"><strong>Этапы</strong><span class="tag info">6 этапов</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.quoteApproved
+                ? 'Смета согласована. Можно запускать работы по первому этапу.'
+                : 'Согласуйте смету, чтобы зафиксировать финансовую модель и регламент.';
+            }
+          },
+          {
+            label: 'Шаг 5 из 6',
+            title: 'Старт этапа',
+            subtitle: 'Исполнитель следует чек-листу и фиксирует ход.',
+            primaryLabel: 'Запустить этап 1',
+            onPrimary: function () {
+              state.stageStarted = true;
+            },
+            ready: function () {
+              return state.stageStarted;
+            },
+            content: function () {
+              var tagClass = state.stageStarted ? 'success' : 'pending';
+              var status = state.stageStarted ? 'В работе' : 'Не запущен';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Этап 1</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                status +
+                '</span></div>' +
+                '<div class="item"><strong>Чек-лист</strong><span class="tag info">12 пунктов</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.stageStarted
+                ? 'Этап запущен. Система подготовит уведомление о приемке.'
+                : 'Запустите этап, чтобы начать работу и фиксировать прогресс.';
+            }
+          },
+          {
+            label: 'Шаг 6 из 6',
+            title: 'Приемка и оплата',
+            subtitle: 'Подтвердите качество, чтобы закрыть этап и оплату.',
+            primaryLabel: 'Подтвердить качество',
+            onPrimary: function () {
+              state.accepted = true;
+            },
+            ready: function () {
+              return state.accepted;
+            },
+            content: function () {
+              var status = state.accepted ? 'Принято' : 'Ожидает';
+              var tagClass = state.accepted ? 'success' : 'info';
+              return (
+                '<div class="list">' +
+                '<div class="item"><strong>Инспекция</strong><span class="tag ' +
+                tagClass +
+                '">' +
+                status +
+                '</span></div>' +
+                '<div class="item"><strong>Эскроу</strong><span class="tag info">1 250 000 ₽</span></div>' +
+                '</div>'
+              );
+            },
+            helper: function () {
+              return state.accepted
+                ? 'Качество подтверждено. Средства автоматически переводятся исполнителю.'
+                : 'Подтвердите качество, чтобы выпустить оплату и закрыть этап.';
+            }
+          }
+        ];
+
+        var stepLabel = document.getElementById('stepLabel');
+        var stepTitle = document.getElementById('stepTitle');
+        var stepSubtitle = document.getElementById('stepSubtitle');
+        var stepContent = document.getElementById('stepContent');
+        var helperCard = document.getElementById('helperCard');
+        var progressBar = document.getElementById('progressBar');
+        var actions = document.querySelector('.actions');
+
+        function render() {
+          var step = steps[state.step];
+          stepLabel.textContent = step.label;
+          stepTitle.textContent = step.title;
+          stepSubtitle.textContent = step.subtitle;
+          stepContent.innerHTML = step.content();
+          helperCard.textContent = step.helper();
+          progressBar.style.width = ((state.step + 1) / steps.length) * 100 + '%';
+
+          var buttons = actions.querySelectorAll('button');
+          buttons.forEach(function (btn) {
+            var action = btn.getAttribute('data-action');
+            if (action === 'back') {
+              btn.disabled = state.step === 0;
+            }
+            if (action === 'primary') {
+              btn.textContent = step.primaryLabel || 'Действие';
+              btn.style.display = step.primaryLabel ? 'inline-flex' : 'none';
+            }
+            if (action === 'next') {
+              btn.textContent = state.step === steps.length - 1 ? 'Завершить' : 'Далее';
+              btn.disabled = !step.ready();
+            }
+          });
+        }
+
+        actions.addEventListener('click', function (event) {
+          var target = event.target;
+          if (!target || !target.getAttribute) return;
+          var action = target.getAttribute('data-action');
+          var step = steps[state.step];
+          if (action === 'back') {
+            state.step = Math.max(0, state.step - 1);
+            render();
+            return;
+          }
+          if (action === 'primary') {
+            if (step.onPrimary) {
+              step.onPrimary();
+            }
+            render();
+            return;
+          }
+          if (action === 'next') {
+            if (!step.ready()) return;
+            if (state.step >= steps.length - 1) {
+              resetState();
+              render();
+              return;
+            }
+            state.step += 1;
+            render();
+          }
+        });
+
+        render();
+      })();
+    </script>
+  </body>
+</html>