design: redesign product demo UI

.cursor/rules/accessibility-and-visual-qa.mdc

@@ -0,0 +1,22 @@
+---
+description: Accessibility and visual QA checklist for product demo
+alwaysApply: true
+---
+
+# Accessibility and Visual QA Rules
+
+- Контраст должен быть читаемым.
+- Фокус-состояния для кнопок обязательны.
+- Кнопки должны иметь понятные labels.
+- Не использовать только цвет для передачи смысла.
+- Текст должен быть читаемым на проекторе.
+- Проверить визуально:
+  - 1920×1080
+  - 1440×900
+  - 390×844
+- Проверить:
+  - нет horizontal scroll;
+  - hero понятен;
+  - CTA виден;
+  - demo section понятен;
+  - mobile layout не развален.

.cursor/rules/react-design-system.mdc

@@ -0,0 +1,24 @@
+---
+description: React design system and component boundaries for sorter demo
+globs: src/**/*.{tsx,ts,css}
+alwaysApply: false
+---
+
+# React Design System Rules
+
+- Не ломать domain logic.
+- UI-компоненты должны быть небольшими и понятными.
+- Переиспользовать данные scenarios / criteria / demoSteps.
+- Не добавлять тяжёлые UI-библиотеки.
+- Не добавлять 3D.
+- Не добавлять backend.
+- Компоненты:
+  - HeroSection
+  - ProductDemoSection
+  - StorylineStepper
+  - ScenarioCards
+  - CriteriaCards
+  - EngineeringDetails
+- Старые инженерные панели можно использовать внутри EngineeringDetails.
+- Стили централизовать в styles.css или небольших CSS-блоках.
+- Не делать хаотичный refactor всего проекта.

.cursor/rules/responsive-product-demo.mdc

@@ -0,0 +1,28 @@
+---
+description: Responsive breakpoints and layout rules for product demo
+alwaysApply: true
+---
+
+# Responsive Product Demo Rules
+
+Breakpoints:
+- desktop: >= 1200px
+- laptop/tablet landscape: 900–1199px
+- tablet: 640–899px
+- mobile: < 640px
+
+Требования:
+- body/html/#root не должны создавать horizontal scroll.
+- Проверять overflow-x.
+- Все секции используют width: min(100%, ...), max-width, padding через clamp().
+- На mobile:
+  - одна колонка;
+  - крупные кнопки;
+  - короткие тексты;
+  - инженерные детали свернуты;
+  - сцена масштабируется;
+  - сценарии идут карточками.
+- На desktop:
+  - Hero + demo в понятных секциях;
+  - 2 колонки только там, где хватает ширины;
+  - без внутреннего хаотичного скролла.

.cursor/rules/ui-ux-pro-max.mdc

@@ -0,0 +1,33 @@
+---
+description: UI/UX Pro Max — product demo page, not debug dashboard
+alwaysApply: true
+---
+
+# UI/UX Pro Max Rules
+
+Ты обязан проектировать интерфейс как demo product page, а не debug dashboard.
+
+Обязательные принципы:
+- Пользователь должен понять смысл проекта за 10 секунд.
+- Первый экран должен объяснять:
+  1. Что это за система.
+  2. Что она делает.
+  3. Как запустить демо.
+  4. Какой результат будет показан.
+- Главный интерфейс должен вести пользователя по цепочке:
+  Detection → Classification → Command → Routing.
+- Не показывать все инженерные панели сразу.
+- Инженерные детали должны быть ниже или в отдельном раскрываемом блоке.
+- Не должно быть горизонтального скролла.
+- Mobile-first адаптив обязателен.
+- Основной текст не меньше 16px.
+- Кнопки не меньше 44px по высоте.
+- На mobile всё в одну колонку.
+- На desktop допустима сетка 2 колонки.
+- Визуальная иерархия:
+  Hero → Demo → Result → Scenarios → Criteria → Engineering Details.
+- Запрещены мелкие debug-панели на первом экране.
+- Запрещены узкие внутренние scroll-панели для сценариев.
+- Запрещены fixed width больше viewport.
+- Использовать min-width: 0 для grid/flex children.
+- SVG/сцена должны масштабироваться через width: 100%, max-width: 100%.