/
Доработка сайта
Доработка сайта

01_Author_Hero_T123_v1_0.html
01_Author_Hero_T1
23_v1_0
.html
237 lines
HTML

ZADANIE_VERSTKA_I_DIZAYN_AVTOR_v1_0_2026-09-16.md
ZADANIE_VERSTKA_I_DIZAYN_AVTOR_v1_0_2
026-09-16
.md
MD

Рендер_1.png

Рендер_2.png

02_Author_Practice_T123_v1_0.html
02_Author_Practice_T1
23_v1_0
.html
HTML

Привет. Внимательно прочитай задание и изучи приложенные материалы. В файлах к Проекту изучи каноны дизайн-системы и CSS-фундамент




Pinned
Hide
Факторы успеха и провала Comm
2 days ago
Recents
Доработка страницы АВТОР на mmalova.com
8 minutes ago
Очистка устаревших файлов проекта
2 days ago
Проблемы с инструкцией к проекту
4 days ago
Профессиональное мировоззрение: целостная система управления коммуникациями
Aug 16
Доработка страницы Эксперт
Aug 15
ГЛАВНАЯ
Aug 14
Анализ направления доработки сайта перед сдачей
Aug 13
Улучшение навыков журналистского письма на русском
Aug 12
Оптимизация экспертного блока сайта коммуникационного стратега
Aug 11
Промпт для переструктурирования текстов сайта
Aug 11
Instructions
Ты опытный проектный менеджер с 20-летним стажем в профессии, управляющий опытной командой фронт и бэкэнд-разработки. В твоей команде также есть сильный эксперт-практик по управлению стратегическими и корпоративными коммуникациями с 30-летним опытом в крупном госсекторе и бизнесе, отлично знающий проблемы российских коммуникаций и корпоративные реалии менеджмента в 2026 году (не в 2020, 2010 или в 2000-м, а именно в 2026-м году!). Дорабатываем сайт mmalova.com. В работе ориентируйся на актуальные документы и инструкции в файлах Проекта. Приоритетами в работе над сайтом являются: 1. Четкая структура сайта, отвечающая самым передовым и проверенным требованиям usability и UA/UX-дизайна. 1. Связность, грамотность и читабельность контента; 2. Сторителлинговая логика сайта через взаимосвязанность и логичные переходы блоков и страниц; 3. Плотность и читабельность текста без лишнего пафоса, общих слов, воды и банальностей; 4. Экспертность фактуры в виде глубины, конкретики эксперта-практика и ценных инсайтов для целевой аудитории; 5. Стабильность функционала, включая seo/geo (позиции в поисковой и нейросетевой выдаче в Яндекс/Google) 6. Соответствие канонам дизайн-системы (VITRINA_dizayn-sistemy_v4_0_4_22-08-2026, КАНОН_сборки_страницы_живой_стиль_v1_2_22_08_2026 или их актуальным и утвержденным владельцем аналогам) 7. Тон и голос бренда см. в файле «videnie-i-ton-expert» или его аналогу, утвержденному владельцем. Для грамотной работы с текстом ориентируйся на правила стилистики и синтаксиса в русском языке, изучи репозитарий https://github.com/mikeshu2001/content-factory и «4_02_РЕГЛАМЕНТ_ТЕКСТА_v1_3_15-08-2026» (или его аналогу в файлах Проекта). Для целевого читателя сайта (стратегического коммуникатора, руководителя по коммуникациям в крупных организациях госсектора и бизнеса, первых лиц и CEO) как интеллектуально развитого носителя русского языка важны: логичность, связность, читабельность и грамотность текста — стилистическая, синтаксическая, морфологическая и орфографическая. Обрати также внимание на цель доработки сайта — решение проблемы перегруженности информацией. Задача сокращения пользовательских экранов состоит не в механическом сокращении информации (удалении блоков или их сворачивании в «витрины» — это метод и инструмент, но не цель), а в устранении дублирования, повторов информации и смыслов. Необходимо выстроить стройную сторителлинговую логику сайта, которая понятна читателю и будет держать его в напряженном ожидании продолжения чтения основных разделов и контента на сайте. Поэтому логичность и взаимосвязанность блоков и страниц является приоритетом. Примерная логика и структура сайта изложена в файлах Проекта. Если ее нет или ты с чем-то не согласен — настойчиво обрати внимание владельца на проблему и предложи решение. При сборке функционала сайта просьба строго руководствоваться основными документами к сайту в файлах к Проекту. При верстке html-блоков учитывай «CSS_Фундамент_v4_0_4_10-08-2026» или его аналогу в файлах Проекта (установлен в Настройках сайта — Вставка кода — Редактировать CSS), не создавай конфликтов ни с Ttilda, ни с сайтом. Обрати внимание, что сайт и приложение выполнены в одном визуальном стиле с сайтом, сохраняют общее направление стилистики, шрифты, цветовую гамму, премиальность визуала, но имеют различия как два проекта — сайт эксперта Мадины Маловой (стратегический коммуникатор-практик с опытом 22 лет в крупном госсекторе и бизнесе), автора книги «От PR к индустрии доверия» и цифровое приложение к книге М. Маловой с концепцией «живое издание» (обновляемость приложения в течение всего жизненного цикла книги; «живые» элементы в визуальном стиле: пульс-полоски, пульсирующая точка, двигающиеся блоки с закругленными углами, ховеры — см. КАНОН_сборки_страницы_живой_стиль_v1_2_22_08_2026 или его аналог в файлах Проекта). Предлагай для реализации проекта по пересборке и улучшению сайта оптимальные решения, которые учитывают: - высокий уровень экспертности автора, которая выражается не в сложном синтаксисе или сложных терминах, а в рабочих решениях практика, хорошо знающего свою сферу деятельности и востребованные организациями и первыми лицами проверенные и точные решения, свежие идеи и апробированные на парктике методики; - формирование репутации известного эксперта, автора книги и увлеченного отраслевого энтузиаста, решение задач имиджа и позиционирование как эксперта-стратега, практика и новатора; - внедрение полезных интерактивных элементов и сервисов, гибкость их поиска и удобство применения для пользователя, которые в том числе обеспечат высокую стабильность работы и устойчивость работы сайта в текущих геополитических условиях по всему миру: как в странах США и ЕС, так и в Восточной Европе, России и в других странах мира. В процессе работ жду от тебя уточняющие вопросы либо подтверждение понятности поставленной задачи. Не раздувай проект — его нужно закончить как можно скорее, но не как временное, а как оптимальное решение с высоким уровнем качества работы с точки зрения функциональности, удобства и полезности как для автора приложения, так и для целевого пользователя как конечного адресата сайта и приложения. Короткий результат выводи лаконичным сопроводительным текстом прямо в чате, а объемный результат (инструкцию, отчет и т.п.) в виде отдельного файла md.

Context
28% of project capacity used
Search mode

PATCH-01_DOPOLNENIE_A_2026-09-15.md
2.3kB

md




PATCH-01_ZHURNAL_I_MASTER-FAYLY_2026-09-15.md
17.4kB

md




RASKLADKA_AVTOR_4_EKRANA_v1_1_2026-09-15.md
29.6kB

md




INTEGRUM_Статистика цитируемости_исходные цифры_ФИНАЛ на 201020.docx
5.9kB

docx




00_README_FIRST_v2_4_2026-09-14.md
5.7kB

md




01_PROJECT_NAVIGATOR_v2_4_2026-09-14.md
10.8kB

md




03_PROJECT_INSTRUCTION_v4_3_2026-09-14.md
10.9kB

md




06_TEXT_REGULATION_v1_6_2026-09-14.md
32.2kB

md




15_SOURCE_MANIFEST_v2_4_2026-09-14.md
4.9kB

md




02_SITE_ECOSYSTEM_CONCEPT_v3_4_2026-09-14.md
11.7kB

md




04_URL_MAP_v2_4_2026-09-14.md
14.1kB

md




08_DECISIONS_ERRORS_LOG_v2_4_2026-09-14.md
17.9kB

md




05_T123_TECH_CANON_v1_4_2026-09-13.md
54kB

md




13_PRO_SYSTEM_GLOSSARY_v1_1_2026-09-06.md
40.8kB

md




12_PRO_SYSTEM_CORE_v4_0_2026-09-10.md
47.6kB

md




10_DESIGN_SYSTEM_SHOWCASE_v4_0_5_2026-09-13.html
39.9kB

html




11_SITE_ROADMAP_v2_2_2026-09-13.md
5.3kB

md




07_CSS_FOUNDATION_v4_0_5_2026-09-13.css
26kB

css




09_LIVE_STYLE_PAGE_CANON_v1_3_2026-09-13.md
23.2kB

md




INSTRUKTSIYA_RAZRABOTCHIKU_v1_0_2026-09-13.md
22.6kB

md




mmalova_ecosystem_map_v1_0_2026-09-11.md
22.4kB

md




Справка по концепции обновленного mmalova.com для экосистемной сборки.md
6.5kB

md




ECOSYSTEM_APP_CONCEPT_BRIEF_v1_0_2026-09-11.md
11kB

md




ПРИЛОЖЕНИЕ_3_МЕТОДИКА_ИЧК_v1_4_09-09-2026.md
38.3kB

md




ПРИЛОЖЕНИЕ_5_ОТРАСЛЬ_ГОСУДАРСТВО_И_НОВАЯ_РЕАЛЬНОСТЬ_v1_2_10-09-2026.md
43.8kB

md




ПРИЛОЖЕНИЕ_4_СТРАТЕГИЯ_КОММУНИКАЦИЙ_2_0_v1_1_07-09-2026.md
42.1kB

md




ПРИЛОЖЕНИЕ_2_ПРОЦЕССЫ_И_ФОРМЫ_v1_1_06-09-2026.md
44.1kB

md




ПАМЯТКА_ДЕЙСТВУЮЩИЕ_ФОРМУЛИРОВКИ_v2_1_07-09-2026.md
9.1kB

md




2_ВКЛАДЫШ_К_КОСТЯКУ_ЗАПИСКА_ПЕРВОМУ_ЛИЦУ_v1_0_10-09-2026.md
4kB

md




ПРОДУКТ_КОММУНИКАЦИОННАЯ_ЭКСПЕРТИЗА_карта_папки_v1_0_06-09-2026.md
6.4kB

md




ЦИТАТЫ О КНИГЕ И ИЗ КНИГИ.md
28.1kB

md




Сводная_справка_портфолио_Малова_v1_1_120726.md
14.8kB

md




МАСТЕР-ДОКУМЕНТ_КНИГА 1_MD.md
91.5kB

md




КНИГА 1_Весь текст_Апрель 2026_Текст.md
497.6kB

md




СВОД_интерактивные_сервисы_v1_2_05-08-2026.md
17.4kB

md



mmalova_ecosystem_map_v1_0_2026-09-11.pdf
pdf



Scheduled
Set up recurring tasks for this project.

10_DESIGN_SYSTEM_SHOWCASE_v4_0_5_2026-09-13.html


<!DOCTYPE html>




Дизайн-система · Индустрия доверия · витрина на Фундаменте v4.0.5</title>

 
<!-- ═══════════════════════════════════════════════════════════════════════════
     ВИТРИНА ДИЗАЙН-СИСТЕМЫ · v4.0.5 · 13.09.2026
     Цветовая семантика синхронизирована с CSS Фундаментом v4.0.5:
     мелкий текст нейтрален, focus/hover/action используют #E85114.
     Заменяет «Design_system_canon_bg · Строго каноническая · Final Main»
     (поколение v3.0.1, легаси-токены --color-*).
 
     ⛔ СТАТУС. Витрина — не источник правды. Источник правды по токенам
     и базовым правилам один: CSS_Фундамент_v4_0_4. Секции 1, 1-Б, 2-9 и 13
     этого файла скопированы из Фундамента дословно; при расхождении
     верен Фундамент.
 
     ⛔ ЧТО ИЗ ЭТОГО ФАЙЛА НЕ ПЕРЕНОСИТСЯ В БЛОКИ САЙТА:
     @font-face, :root, глобальный сброс, селекторы по тегу, position:fixed
     и служебная обвязка dsx-*. В блоках Tilda все это запрещено; здесь оно
     допустимо только потому, что витрина открывается отдельной страницей,
     где Фундамента нет.
     ═══════════════════════════════════════════════════════════════════════════ -->
 

/* ═══ 0. ШРИФТЫ · jsDelivr, кириллица и латиница ═══ */
@font-face{font-family:'Unbounded';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/unbounded/files/unbounded-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Unbounded';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/unbounded/files/unbounded-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2018-2019,U+201C-201D,U+2026,U+2212;}
@font-face{font-family:'Poiret One';font-weight:400;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/poiret-one/files/poiret-one-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Poiret One';font-weight:400;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/poiret-one/files/poiret-one-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2018-2019,U+201C-201D,U+2026,U+2212;}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2018-2019,U+201C-201D,U+2026,U+2212;}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2018-2019,U+201C-201D,U+2026,U+2212;}
 
/* ═══ 1. ТОКЕНЫ · из Фундамента v4.0.5 дословно ═══ */
:root{
  --mm-primary:#FF6B35; --mm-accent:#E85114; --mm-heading:#000000;
  --mm-body:#595959; --mm-meta:#6E6E6E; --mm-bg-page:#FAFAFA; --mm-bg-card:#FFFFFF;
  --mm-bg-soft:#FFF0EB; --mm-bg-warm:#FFF7F3; --mm-border:#CCCCCC; --mm-border-light:#E2E2E2;
  --mm-accent-text:var(--mm-meta);
  --mm-btn-bg:#E85114; --mm-btn-bg-hover:#CE4711; --mm-btn-text:#FFFFFF;
  --mm-btn-fs:19px; --mm-btn-fw:600; --mm-btn-h:48px; --mm-btn-pad:26px;
  --mm-font-system:'Unbounded',-apple-system,BlinkMacSystemFont,sans-serif;
  --mm-font-heading:'Poiret One','Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --mm-font-ui:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --mm-r-sm:4px; --mm-r-md:8px; --mm-r-lg:16px; --mm-r-pill:999px;
  --mm-shadow:0 4px 12px rgba(0,0,0,.04); --mm-shadow-hover:0 12px 28px rgba(255,107,53,.16);
  --mm-spring:cubic-bezier(0.34,1.56,0.64,1); --mm-t-fast:0.2s var(--mm-spring); --mm-t-base:0.25s ease-in-out;
}
/* ═══ 1-Б. МОСТ СОВМЕСТИМОСТИ · легаси-имена ВЫЧИСЛЯЮТСЯ из --mm-*.
   Направление одностороннее: бренд правится в одном месте. ═══ */
:root{
  --color-primary:var(--mm-primary); --color-accent-book:var(--mm-accent);
  --color-heading:var(--mm-heading); --color-body:var(--mm-body); --color-meta:var(--mm-meta);
  --color-border:var(--mm-border); --color-border-light:var(--mm-border-light);
  --color-accent-text:var(--mm-accent-text);
  --bg-page:var(--mm-bg-page); --bg-card:var(--mm-bg-card); --bg-soft:var(--mm-bg-soft);
  --font-system:var(--mm-font-system); --font-heading:var(--mm-font-heading); --font-ui:var(--mm-font-ui);
  --radius-sm:var(--mm-r-sm); --radius-md:var(--mm-r-md); --radius-lg:var(--mm-r-lg);
  --shadow-base:var(--mm-shadow); --shadow-hover:var(--mm-shadow-hover);
  --ease-spring:var(--mm-spring); --t-fast:var(--mm-t-fast); --t-base:var(--mm-t-base);
}
 
/* ═══ 2. БАЗА ═══ */
.mm,.mm *{box-sizing:border-box;}
.mm{font-family:var(--mm-font-ui);color:var(--mm-body);-webkit-font-smoothing:antialiased;}
.mm img{max-width:100%;display:block;}
.mm a{color:inherit;}
.mm b,.mm strong{font-weight:600;}
 
/* ═══ 3. ТИПОГРАФИКА ═══ */
.mm .h1{font-family:var(--mm-font-heading);font-weight:400;font-size:clamp(34px,5vw,48px);line-height:1.12;color:var(--mm-heading);word-spacing:-.045em;margin:0;}
.mm .h2{font-family:var(--mm-font-ui);font-weight:600;font-size:clamp(24px,2.8vw,32px);line-height:1.25;letter-spacing:-.02em;color:var(--mm-heading);margin:0;}
.mm .h3{font-family:var(--mm-font-ui);font-weight:600;font-size:18px;line-height:1.35;color:var(--mm-heading);margin:0;}
.mm .p{font-family:var(--mm-font-ui);font-weight:400;font-size:16px;line-height:1.6;color:var(--mm-body);margin:0;}
.mm .ps{font-family:var(--mm-font-ui);font-weight:400;font-size:13px;line-height:1.5;color:var(--mm-body);margin:0;}
.mm .lead{font-family:var(--mm-font-ui);font-size:clamp(16px,1.6vw,18px);line-height:1.62;color:var(--mm-body);margin:0;}
.mm .lbl{font-family:var(--mm-font-ui);font-weight:500;font-size:13px;color:var(--mm-meta);}
.mm .num{font-family:var(--mm-font-system);font-weight:600;}
.mm .tag{font-family:var(--mm-font-system);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-meta);}
.mm .muted{color:var(--mm-meta);}
.mm .eyebrow{display:inline-block;font-family:var(--mm-font-system);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-meta,#6E6E6E);margin-bottom:18px;}
.mm .blockquote{border-left:3px solid var(--mm-primary);padding-left:20px;margin:0;}
.mm .blockquote p{font-family:var(--mm-font-ui);font-size:18px;font-style:italic;color:var(--mm-body);line-height:1.6;margin:0;}
.mm .link{color:var(--mm-body);text-decoration:underline;text-decoration-color:var(--mm-primary);text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--mm-t-base);}
.mm .link:hover{color:var(--mm-heading,#000000);text-decoration-color:var(--mm-accent,#E85114);}
 
/* ═══ 4. КНОПКИ ═══
   Белый на #E85114 — 3,74:1. Норма берется по правилу крупного текста:
   порог 3:1 от 18,67px при весе 600. Отсюда 19px, а не 18px.
   ⛔ Кегль вниз не двигать: соответствие держится связкой заливки и кегля. */
.mm .btn{font-family:var(--mm-font-ui);font-weight:600;font-size:15px;border-radius:var(--mm-r-md);cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;max-width:100%;transition:background var(--mm-t-base),color var(--mm-t-base),transform var(--mm-t-fast);text-decoration:none;}
.mm .btn--primary{background:var(--mm-btn-bg,#E85114);color:var(--mm-btn-text,#FFFFFF);font-size:var(--mm-btn-fs,19px);font-weight:var(--mm-btn-fw,600);height:var(--mm-btn-h,48px);padding:0 var(--mm-btn-pad,26px);}
.mm .btn--primary:hover{background:var(--mm-btn-bg-hover,#CE4711);transform:translateY(-2px);}
.mm .btn--ghost{background:transparent;color:var(--mm-heading,#000000);border:1.5px solid var(--mm-accent,#E85114);}
.mm .btn--ghost:hover{background:rgba(193,64,15,.08);}
 
/* ═══ 5. КАРТОЧКИ ═══ */
.mm .card{background:var(--mm-bg-card);border-radius:var(--mm-r-md);box-shadow:var(--mm-shadow);transition:transform var(--mm-t-fast),box-shadow var(--mm-t-base);}
.mm .card--hover:hover{transform:translateY(-6px);box-shadow:var(--mm-shadow-hover);}
 
/* ═══ 6. ПОЛЯ ФОРМ ═══ */
.mm .input{font-family:var(--mm-font-ui);font-size:14px;font-weight:500;border:1.5px solid var(--mm-border-light);border-radius:var(--mm-r-md);padding:12px 16px;transition:border-color var(--mm-t-base);background:var(--mm-bg-card);width:100%;}
.mm .input:focus-visible{border-color:var(--mm-accent,#E85114);outline:2px solid var(--mm-accent,#E85114);outline-offset:2px;}
 
/* ═══ 7. СЕТКА ═══ */
.mm .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
 
/* ═══ 8. СВЕТЛАЯ ПРЕМИУМ-ПЛАШКА · единственная анимированная полоса
   в основной части страницы ═══ */
.mm .plate-soft{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFFFFF 0%,#FFF3EC 100%);border:1px solid var(--mm-border-light);border-radius:var(--mm-r-lg);box-shadow:var(--mm-shadow);}
.mm .plate-soft::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FF6B35,#E85114,#FF8B5E,#FF6B35);background-size:300% 100%;animation:mmpulse 6s linear infinite;}
@keyframes mmpulse{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
 
/* ═══ 13. REVEAL И ФОКУС ═══ */
.mm .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s var(--mm-spring);}
.mm .reveal.is-visible{opacity:1;transform:none;}
.mm.no-js .reveal{opacity:1;transform:none;}
.mm :focus-visible{outline:2px solid var(--mm-accent,#E85114);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .mm .reveal{opacity:1;transform:none;}
  .mm .plate-soft::before{animation:none;}
  .mm .btn--primary:hover{transform:none;}
  .mm .card--hover:hover{transform:none;}
}
</style>
 
<!-- ═══════════════════════════════════════════════════════════════════════════
     ЖИВЫЕ ЭЛЕМЕНТЫ · канонические редакции.
     Движение идет на transform: left и top пересчитывают геометрию каждый кадр.
     Имена @keyframes несут префикс своего узла — глобальное пространство имен
     общее на весь документ.
     ═══════════════════════════════════════════════════════════════════════════ -->

/* Ж1 · Горизонтальная пульс-полоска · сквозная, перед шапкой и перед футером */
.dsx-strip{position:relative;height:3px;overflow:hidden;background:var(--mm-bg-soft,#FFF0EB);}
.dsx-strip__run{position:absolute;top:0;left:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--mm-primary,#FF6B35),#FF8C5A,var(--mm-primary,#FF6B35),transparent);
  transform:translateX(-100%);animation:dsxStripRun 2.6s linear infinite;}
@keyframes dsxStripRun{from{transform:translateX(-100%);}to{transform:translateX(250%);}}
 
/* Ж2 · Вертикальный рельс с пробегающим проблеском.
   Проблеск — доля высоты, а не фиксированные пиксели: на короткой линии
   82px мигают почти всей линией, на длинной превращаются в точку. */
.dsx-rail{position:relative;flex:none;width:2px;min-height:120px;overflow:hidden;
  border-radius:2px;background:var(--mm-border-light,#E2E2E2);}
.dsx-rail::after{content:"";position:absolute;left:0;top:0;width:100%;height:32%;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--mm-primary,#FF6B35),transparent);
  transform:translateY(-100%);animation:dsxRailRun 3.4s linear infinite;}
@keyframes dsxRailRun{from{transform:translateY(-100%);}to{transform:translateY(313%);}}
 
/* Ж3 · Пульсирующая точка. Ядро 7px СТАТИЧНО, движется только ореол.
   Ядро, мигающее прозрачностью и масштабом одновременно с ореолом, дает
   два движения в точке размером семь пикселей и читается как индикатор
   зарядки устройства, а не как живой материал. */
.dsx-dot{position:relative;flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--mm-primary,#FF6B35);}
.dsx-dot::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,53,.5) 0%,rgba(255,107,53,.25) 30%,rgba(255,107,53,.08) 60%,rgba(255,107,53,0) 100%);
  animation:dsxDotHalo 2.8s ease-out infinite;}
@keyframes dsxDotHalo{0%{transform:scale(1);opacity:.8;}40%{opacity:.5;}100%{transform:scale(4);opacity:0;}}
 
/* Ж4 · Отклик некликабельного поля: полоса растет от левого края,
   фон теплеет, метка уходит в багровый. Курсор не меняется. */
.dsx-field{position:relative;padding:26px;transition:background var(--mm-t-base,.25s ease-in-out);}
.dsx-field__bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--mm-primary,#FF6B35);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--mm-spring,cubic-bezier(.34,1.56,.64,1));}
.dsx-field:hover{background:var(--mm-bg-warm,#FFF7F3);}
.dsx-field:hover .dsx-field__bar{transform:scaleX(1);}
.dsx-field:hover .dsx-field__lbl{color:var(--mm-meta,#6E6E6E);}
.dsx-field__lbl{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-weight:600;font-size:12px;
  line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-meta,#6E6E6E);
  margin:0 0 10px;transition:color var(--mm-t-fast,.2s ease);}
 
@media (prefers-reduced-motion:reduce){
  .dsx-strip__run,.dsx-rail::after,.dsx-dot::after{animation:none;}
  .dsx-rail::after{display:none;}
  .dsx-dot::after{display:none;}
  .dsx-field,.dsx-field__bar,.dsx-field__lbl{transition:none;}
}
</style>
 
<!-- ═══ Служебная обвязка витрины · класс dsx-*, в блоки сайта не переносится ═══ -->

html{scroll-behavior:smooth;}
body{margin:0;background:var(--mm-bg-page,#FAFAFA);}
.dsx-wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
@media(max-width:760px){.dsx-wrap{padding:0 18px;}}
.dsx-nav{position:sticky;top:0;z-index:1000;background:var(--mm-bg-page,#FAFAFA);border-bottom:1px solid var(--mm-border-light,#E2E2E2);}
.dsx-nav__row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.dsx-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--mm-font-heading,'Poiret One',sans-serif);font-size:21px;color:var(--mm-heading,#000);text-decoration:none;word-spacing:-.045em;}
.dsx-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.dsx-menu__link{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-weight:500;font-size:14px;color:var(--mm-body,#595959);text-decoration:none;transition:color var(--mm-t-base,.25s ease-in-out);}
.dsx-menu__link:hover{color:var(--mm-meta,#6E6E6E);}
@media(max-width:760px){.dsx-menu{display:none;}}
 
.dsx-hero{padding:58px 0 34px;}
.dsx-sec{padding:56px 0;border-top:1px solid var(--mm-border-light,#E2E2E2);}
.dsx-sec__head{display:flex;align-items:baseline;gap:14px;margin-bottom:32px;}
.dsx-n{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-weight:600;font-size:13px;color:var(--mm-meta,#6E6E6E);}
.dsx-note{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:14px;line-height:1.6;color:var(--mm-body,#595959);margin:20px 0 0;border-left:2px solid var(--mm-border-light,#E2E2E2);padding-left:16px;max-width:52em;}
.dsx-note b{font-weight:600;color:var(--mm-heading,#000);}
.dsx-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.dsx-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
@media(max-width:860px){.dsx-grid3{grid-template-columns:1fr;}}
 
/* Палитра */
.dsx-sw{border:1px solid var(--mm-border-light,#E2E2E2);border-radius:var(--mm-r-md,8px);overflow:hidden;background:#fff;}
.dsx-sw__c{height:84px;}
.dsx-sw__b{padding:12px 14px;}
.dsx-nm{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-weight:600;font-size:13px;color:var(--mm-heading,#000);}
.dsx-hx{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-size:12px;color:var(--mm-meta,#6E6E6E);margin-top:3px;}
.dsx-use{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:12px;line-height:1.45;color:var(--mm-body,#595959);margin-top:7px;}
.dsx-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:980px){.dsx-swatches{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.dsx-swatches{grid-template-columns:repeat(2,1fr);}}
 
/* Шкала оранжевого */
.dsx-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.dsx-scale__i{border:1px solid var(--mm-border-light,#E2E2E2);border-radius:var(--mm-r-md,8px);background:#fff;padding:20px;}
.dsx-scale__bar{height:44px;border-radius:var(--mm-r-sm,4px);margin-bottom:14px;}
.dsx-scale__r{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-size:12px;color:var(--mm-meta,#6E6E6E);margin-top:8px;}
@media(max-width:860px){.dsx-scale{grid-template-columns:1fr;}}
 
/* Типографика */
.dsx-type-row{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--mm-border-light,#E2E2E2);flex-wrap:wrap;}
.dsx-rmeta{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-size:12px;color:var(--mm-meta,#6E6E6E);width:230px;flex:none;}
@media(max-width:680px){.dsx-rmeta{width:100%;}}
 
/* Запрещенные образцы */
.dsx-stop{border:1px solid #F0CFC2;border-radius:var(--mm-r-md,8px);background:var(--mm-bg-warm,#FFF7F3);padding:20px;}
.dsx-stop__t{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-meta,#6E6E6E);margin:0 0 14px;}
.dsx-stop__i{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:13px;line-height:1.5;color:var(--mm-body,#595959);}
.dsx-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:var(--mm-r-md,8px);font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-weight:600;font-size:13px;}
 
/* Карточки витрины */
.dsx-cardx{position:relative;padding:28px;overflow:hidden;}
.dsx-cardx::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mm-primary,#FF6B35),var(--mm-accent,#E85114));
  transform:scaleX(0);transform-origin:left;transition:transform var(--mm-t-base,.25s ease-in-out);}
.dsx-cardx.card--hover:hover::before{transform:scaleX(1);}
 
/* Живые элементы: сцены */
.dsx-live{padding:26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;}
.dsx-stage{flex:1;display:flex;align-items:center;justify-content:center;}
.dsx-cap{font-family:var(--mm-font-system,'Unbounded',sans-serif);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-meta,#6E6E6E);}
.dsx-name{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-weight:600;font-size:15px;color:var(--mm-heading,#000);margin-top:6px;}
.dsx-fields{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--mm-border-light,#E2E2E2);border-radius:var(--mm-r-lg,16px);background:#fff;box-shadow:var(--mm-shadow,0 4px 12px rgba(0,0,0,.04));overflow:hidden;}
.dsx-fields .dsx-field+.dsx-field{border-left:1px solid var(--mm-border-light,#E2E2E2);}
@media(max-width:860px){
  .dsx-fields{grid-template-columns:1fr;}
  .dsx-fields .dsx-field+.dsx-field{border-left:0;border-top:1px solid var(--mm-border-light,#E2E2E2);}
}
 
/* Футер витрины */
.dsx-footer{border-top:1px solid var(--mm-border-light,#E2E2E2);background:#FFFDFB;margin-top:56px;}
.dsx-foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding:52px 0 34px;}
.dsx-foot__brand{font-family:var(--mm-font-heading,'Poiret One',sans-serif);font-size:23px;color:var(--mm-heading,#000);word-spacing:-.045em;}
.dsx-foot__pos{margin-top:12px;font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:13px;line-height:1.6;color:var(--mm-meta,#6E6E6E);max-width:28em;}
.dsx-foot__h{margin:0 0 14px;font-family:var(--mm-font-system,'Unbounded',sans-serif);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-heading,#000);}
.dsx-foot__list{list-style:none;margin:0;padding:0;}
.dsx-foot__list li{margin-bottom:9px;}
.dsx-foot__link{font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:14px;color:var(--mm-body,#595959);text-decoration:none;transition:color var(--mm-t-base,.25s ease-in-out);}
.dsx-foot__link:hover{color:var(--mm-meta,#6E6E6E);}
.dsx-foot__bottom{border-top:1px solid var(--mm-border-light,#E2E2E2);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mm-font-ui,'Montserrat',sans-serif);font-size:13px;color:var(--mm-meta,#6E6E6E);}
@media(max-width:760px){.dsx-foot__top{grid-template-columns:1fr 1fr;gap:26px;}}
</style>

 

 
<div class="dsx-strip" aria-hidden="true"><div class="dsx-strip__run"></div></div>
 
<header class="dsx-nav">
  <div class="dsx-wrap dsx-nav__row">
    <a class="dsx-brand" href="#top"><span class="dsx-dot" aria-hidden="true"></span>Мадина&nbsp;Малова</a>
    <nav aria-label="Разделы витрины">
      <ul class="dsx-menu">
        <a class="dsx-menu__link" href="#colors">Цвет</a></li>
        <a class="dsx-menu__link" href="#type">Типографика</a></li>
        <a class="dsx-menu__link" href="#cards">Компоненты</a></li>
        <a class="dsx-menu__link" href="#live">Живые элементы</a></li>
      </ul>
    </nav>
  </div>
</header>
 
<main class="dsx-wrap" id="top">
 
  <section class="dsx-hero">
    <span class="eyebrow">Дизайн-система · витрина на Фундаменте v4.0.5</span>
    <h1 class="h1">Светлая премиальная система со сдержанным живым характером</h1>
    <p class="lead" style="margin-top:20px;max-width:56ch;">Палитра, типографика и геометрия зафиксированы Фундаментом; витрина только показывает их в деле. Жизнь вносят три элемента: сквозная пульс-полоска, рельс с пробегающим проблеском и пульсирующая точка. Все остальное ощущение отзывчивости дают состояния — ховер и фокус.</p>
  </section>
 
  <!-- ЦВЕТ -->
  <section class="dsx-sec reveal" id="colors">
    <div class="dsx-sec__head"><span class="dsx-n">01</span><h2 class="h2">Палитра</h2></div>
    <div class="dsx-swatches">
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#FF6B35;"></div><div class="dsx-sw__b"><div class="dsx-nm">Primary</div><div class="dsx-hx">#FF6B35</div><div class="dsx-use">Графика и заливки. Текстом не бывает.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#E85114;"></div><div class="dsx-sw__b"><div class="dsx-nm">Accent</div><div class="dsx-hx">#E85114</div><div class="dsx-use">Текст от 18px, заливка кнопки.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#6E6E6E;"></div><div class="dsx-sw__b"><div class="dsx-nm">Meta · small text</div><div class="dsx-hx">#6E6E6E</div><div class="dsx-use">Мелкие подписи, эйбрау, типы и счетчики. Нейтральный.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#000000;"></div><div class="dsx-sw__b"><div class="dsx-nm">Heading</div><div class="dsx-hx">#000000</div><div class="dsx-use">Заголовки и акценты в тексте.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#595959;"></div><div class="dsx-sw__b"><div class="dsx-nm">Body</div><div class="dsx-hx">#595959</div><div class="dsx-use">Основной текст.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#6E6E6E;"></div><div class="dsx-sw__b"><div class="dsx-nm">Meta</div><div class="dsx-hx">#6E6E6E</div><div class="dsx-use">Вторичный текст. 4,89:1 на фоне страницы.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#FAFAFA;border-bottom:1px solid #E2E2E2;"></div><div class="dsx-sw__b"><div class="dsx-nm">BG · page</div><div class="dsx-hx">#FAFAFA</div><div class="dsx-use">Фон страницы.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#FFFFFF;border-bottom:1px solid #E2E2E2;"></div><div class="dsx-sw__b"><div class="dsx-nm">BG · card</div><div class="dsx-hx">#FFFFFF</div><div class="dsx-use">Карточка.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#FFF7F3;border-bottom:1px solid #E2E2E2;"></div><div class="dsx-sw__b"><div class="dsx-nm">BG · warm</div><div class="dsx-hx">#FFF7F3</div><div class="dsx-use">Теплый фон состояния. Токен есть.</div></div></div>
      <div class="dsx-sw"><div class="dsx-sw__c" style="background:#FFF0EB;"></div><div class="dsx-sw__b"><div class="dsx-nm">BG · soft</div><div class="dsx-hx">#FFF0EB</div><div class="dsx-use">Плашка-ядро, дорожка полоски.</div></div></div>
    </div>
 
    <h3 class="h3" style="margin:34px 0 16px;">Шкала оранжевого — главное правило цвета</h3>
    <div class="dsx-scale">
      <div class="dsx-scale__i">
        <div class="dsx-scale__bar" style="background:#FF6B35;"></div>
        <div class="dsx-nm">#FF6B35 · только графика</div>
        <div class="dsx-use">Тире эйбрау, пульс-полоса, точка, лента футера, декоративные акценты.</div>
        <div class="dsx-scale__r">Текстом 2,84:1 · границей 2,72:1 — не применяется</div>
      </div>
      <div class="dsx-scale__i">
        <div class="dsx-scale__bar" style="background:#E85114;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--mm-font-ui);font-weight:600;font-size:19px;">Текст 19px</div>
        <div class="dsx-nm">#E85114 · текст от 18px</div>
        <div class="dsx-use">Крупные цифры, метрики, заливка кнопки.</div>
        <div class="dsx-scale__r">3,74:1 — норма крупного текста, от 18,67px при весе 600</div>
      </div>
      <div class="dsx-scale__i">
        <div class="dsx-scale__bar" style="background:#FAFAFA;border:1px solid #E2E2E2;display:flex;align-items:center;justify-content:center;color:#6E6E6E;font-family:var(--mm-font-ui);font-weight:600;font-size:13px;">Текст 13px</div>
        <div class="dsx-nm">#6E6E6E · мелкий системный текст</div>
        <div class="dsx-use">Подписи, ссылки, эйбрау, счетчики, фокус-кольца.</div>
        <div class="dsx-scale__r">5,02:1 — норма при любом кегле</div>
      </div>
    </div>
 
    <p class="dsx-note">Обратная перестраховка тоже ошибка.</b> Уводить багровый на крупные заголовки и цифры значит терять фирменный тон. Багровый включается там, где кегль ниже 18px, и только там.</p>
  </section>
 
  <!-- ТИПОГРАФИКА -->
  <section class="dsx-sec reveal" id="type">
    <div class="dsx-sec__head"><span class="dsx-n">02</span><h2 class="h2">Типографика</h2></div>
    <div class="dsx-grid3" style="margin-bottom:32px;">
      <div class="card" style="padding:26px;text-align:center;">
        <div style="font-family:var(--mm-font-heading);font-size:32px;color:#000;word-spacing:-.045em;">Поиск смысла</div>
        <div class="dsx-cap" style="margin-top:16px;">Poiret One · только H1 первого экрана</div>
      </div>
      <div class="card" style="padding:26px;text-align:center;">
        <div class="num" style="font-size:40px;color:#000;line-height:1;">80 организаций</div>
        <div class="dsx-cap" style="margin-top:16px;">Unbounded · показатели и метки</div>
      </div>
      <div class="card" style="padding:26px;text-align:center;">
        <div style="font-family:var(--mm-font-ui);font-size:17px;color:#000;line-height:1.5;">Montserrat — интерфейс, заголовки H2 и основной текст</div>
        <div class="dsx-cap" style="margin-top:16px;">Montserrat · UI и body</div>
      </div>
    </div>
 
    <div class="dsx-type-row"><span class="dsx-rmeta">.h1 · Poiret One 400 · 34–48</span><span class="h1">Управление доверием</span></div>
    <div class="dsx-type-row"><span class="dsx-rmeta">.h2 · Montserrat 600 · 24–32</span><span class="h2">Три опоры стратегии</span></div>
    <div class="dsx-type-row"><span class="dsx-rmeta">.h3 · Montserrat 600 · 18</span><span class="h3">Ориентация на человека</span></div>
    <div class="dsx-type-row"><span class="dsx-rmeta">.lead · 16–18 · 56ch</span><span class="lead" style="max-width:42em;">Лид: доверие перестало быть мягкой темой и стало управленческой категорией.</span></div>
    <div class="dsx-type-row"><span class="dsx-rmeta">.p · Montserrat 400 · 16</span><span class="p" style="max-width:42em;">Основной текст блока. Нижняя граница тела — 15px; все, что мельче, это подпись.</span></div>
    <div class="dsx-type-row"><span class="dsx-rmeta">.tag · Unbounded 600 · 12</span><span class="tag" style="color:var(--mm-accent-text);">Почему именно сейчас</span></div>
    <div class="dsx-type-row" style="border-bottom:none;"><span class="dsx-rmeta">.eyebrow · Unbounded 600 · 11</span><span class="eyebrow" style="margin:0;">Эйбрау раздела</span></div>
 
    <p class="dsx-note">Poiret One живет только на H1 первого экрана</b> и обязательно с word-spacing:-.045em</code>. У Poiret запятая визуально неотличима от точки, поэтому display-гарнитура на кегле текста запрещена: H2 и цитаты идут на гротеске. Кегль H2 снижен намеренно — Montserrat 600 тяжелее Poiret 400 на том же размере и без снижения начинает перевешивать H1.</p>
  </section>
 
  <!-- КОМПОНЕНТЫ -->
  <section class="dsx-sec reveal" id="cards">
    <div class="dsx-sec__head"><span class="dsx-n">03</span><h2 class="h2">Кнопки, ссылки, поля</h2></div>
    <div class="dsx-row" style="margin-bottom:26px;">
      <a class="btn btn--primary" href="#cards">Обсудить задачу</a>
      <a class="btn btn--ghost" href="#cards">О книге</a>
      <a class="link" href="#cards">Текстовая ссылка</a>
    </div>
 
    <div class="dsx-grid3" style="align-items:start;">
      <div style="display:grid;gap:12px;">
        <input class="input" type="text" placeholder="Поле .input">
        <span class="lbl">Фокус проверяется клавиатурой: кольцо #E85114, 2px / offset 2px</span>
      </div>
      <div class="blockquote">Доверие нельзя назначить пресс-релизом — его выстраивают системно.</p></div>
      <div class="dsx-stop">
        <p class="dsx-stop__t">Выведено из оборота</p>
        <div class="dsx-stop__i"><span class="dsx-chip" style="background:#FF6B35;color:#fff;">Кнопка</span>Белый на #FF6B35 — 2,84:1. Провал AA при любом кегле.</span></div>
        <div class="dsx-stop__i"><span class="dsx-chip" style="background:#fff;border:1.5px solid #E85114;color:#E85114;">Контур</span>#E85114 текстом мельче 18px — 3,74:1 при норме 4,5:1.</span></div>
        <div class="dsx-stop__i"><span class="dsx-chip" style="background:#fff;border:1px solid #E2E2E2;color:#999999;">Мета</span>#999999 — 2,73:1. Заменен на #6E6E6E.</span></div>
      </div>
    </div>
 
    <h3 class="h3" style="margin:38px 0 16px;">Карточки</h3>
    <div class="dsx-grid3">
      <div class="card dsx-cardx"><h3 class="h3" style="margin:0 0 8px;">.card</h3><p class="ps" style="margin:0;">Базовая: белый фон, радиус 8, почти невидимая тень.</p></div>
      <div class="card card--hover dsx-cardx"><h3 class="h3" style="margin:0 0 8px;">.card--hover</h3><p class="ps" style="margin:0;">Наведите: подъем на 6px, усиление тени, полоса сверху. Только для кликабельных.</p></div>
      <div class="card dsx-cardx" style="background:var(--mm-bg-soft);"><h3 class="h3" style="margin:0 0 8px;">soft-вариант</h3><p class="ps" style="margin:0;">Карточка на теплом фоне для блоков-ядер.</p></div>
    </div>
    <p class="dsx-note">Исключение из ховера карточки.</b> Карточка, привязанная к внешней графике — точке на контурной линии, узлу схемы, — подъема не получает: она оторвется от своей точки и сломает геометрию. Вместо подъема граница rgba(255,107,53,.55)</code> и та же каноническая тень.</p>
  </section>
 
  <!-- ГЕОМЕТРИЯ -->
  <section class="dsx-sec reveal">
    <div class="dsx-sec__head"><span class="dsx-n">04</span><h2 class="h2">Геометрия и тени</h2></div>
    <div class="dsx-grid3">
      <div class="card" style="padding:20px;"><div class="dsx-cap">--mm-r-sm / md / lg</div><div class="dsx-name">4 · 8 · 16px</div><div style="display:flex;gap:10px;margin-top:14px;"><span style="flex:1;height:40px;background:var(--mm-bg-soft);border-radius:4px;"></span><span style="flex:1;height:40px;background:var(--mm-bg-soft);border-radius:8px;"></span><span style="flex:1;height:40px;background:var(--mm-bg-soft);border-radius:16px;"></span></div></div>
      <div class="card" style="padding:20px;"><div class="dsx-cap">--mm-shadow / hover</div><div class="dsx-name">0 4px 12px · 0 12px 28px</div><div style="display:flex;gap:14px;margin-top:14px;"><span style="flex:1;height:40px;background:#fff;border-radius:8px;box-shadow:var(--mm-shadow);"></span><span style="flex:1;height:40px;background:#fff;border-radius:8px;box-shadow:var(--mm-shadow-hover);"></span></div></div>
      <div class="card" style="padding:20px;"><div class="dsx-cap">--mm-spring</div><div class="dsx-name">cubic-bezier(.34,1.56,.64,1)</div><div style="height:40px;margin-top:14px;border-radius:8px;background:linear-gradient(90deg,var(--mm-primary),var(--mm-bg-soft));"></div></div>
    </div>
    <p class="dsx-note">Толщин линии всего две.</b> 1px --mm-border-light</code> — разделители, рамки, границы карточек. 2px — только тире эйбрау, акцентная полоса ховера и вертикальный рельс. Третьей толщины в системе нет.</p>
  </section>
 
  <!-- ЖИВЫЕ ЭЛЕМЕНТЫ -->
  <section class="dsx-sec reveal" id="live">
    <div class="dsx-sec__head"><span class="dsx-n">05</span><h2 class="h2">Живые элементы и бюджет движения</h2></div>
    <p class="p" style="max-width:52em;margin:0 0 26px;">Витрина показывает элементы рядом, чтобы их было видно. На боевой странице так не бывает: одновременно в поле зрения допустимо не более двух движущихся элементов, и одно из них всегда сквозная полоска. Первый экран не анимируется вовсе — там работают только состояния.</p>
 
    <div class="dsx-grid3" style="margin-bottom:26px;">
      <div class="card dsx-live">
        <div class="dsx-stage"><span class="dsx-dot" aria-hidden="true"></span></div>
        <div class="dsx-cap">7px · ореол 2,8 с</div><div class="dsx-name">Пульсирующая точка</div><p class="ps" style="margin:8px 0 0;">Ядро статично, движется только ореол и тает в ноль. В эйбрау первого экрана не ставится.</p></div>
      </div>
      <div class="card dsx-live">
        <div class="dsx-stage"><span class="dsx-rail" style="height:120px;" aria-hidden="true"></span></div>
        <div class="dsx-cap">32% высоты · 3,4 с</div><div class="dsx-name">Вертикальный рельс</div><p class="ps" style="margin:8px 0 0;">Оживляет длинную неподвижную колонку. Проблеск — доля высоты, не пиксели. На узких экранах снимается.</p></div>
      </div>
      <div class="card dsx-live">
        <div class="dsx-stage" style="align-items:stretch;"><span class="dsx-strip" style="width:100%;align-self:center;" aria-hidden="true"><span class="dsx-strip__run"></span></span></div>
        <div class="dsx-cap">40% ширины · 2,6 с</div><div class="dsx-name">Горизонтальная полоска</div><p class="ps" style="margin:8px 0 0;">Сквозная: перед шапкой и перед футером. Внутри контента третьей не бывает.</p></div>
      </div>
    </div>
 
    <h3 class="h3" style="margin:0 0 16px;">Состояния — главный источник жизни</h3>
    <div class="dsx-fields">
      <div class="dsx-field"><span class="dsx-field__bar" aria-hidden="true"></span><p class="dsx-field__lbl">Отклик поля</p><p class="ps" style="margin:0;">Полоса растет от левого края, фон теплеет, метка уходит в багровый. Курсор не меняется: поле не притворяется кнопкой.</p></div>
      <div class="dsx-field"><span class="dsx-field__bar" aria-hidden="true"></span><p class="dsx-field__lbl">Вне лимита движения</p><p class="ps" style="margin:0;">Анимация по состоянию — обратная связь интерфейса, а не декор, и в лимит на страницу не засчитывается.</p></div>
      <div class="dsx-field"><span class="dsx-field__bar" aria-hidden="true"></span><p class="dsx-field__lbl">Темп</p><p class="ps" style="margin:0;">Бесконечное движение — не быстрее 1,8 с. Отклик на действие — 0,2–0,45 с: он обязан успевать за рукой.</p></div>
    </div>
 
    <div class="plate-soft reveal" style="margin-top:26px;padding:44px 40px;">
      <h2 class="h2" style="margin:0 0 12px;">Светлая премиум-плашка</h2>
      <p class="p" style="max-width:46em;">Кинематографичный акцент строится на теплом градиенте с пульс-полосой, а не на темном прямоугольнике: система остается светлой и сохраняет премиальность. Это единственная анимированная полоса, разрешенная в основной части страницы, и она расходует лимит целиком.</p>
    </div>
 
    <p class="dsx-note">Не анимируется никогда:</b> цифры и счетчики, заголовки, портрет в покое, кнопка в покое, побуквенное появление текста. prefers-reduced-motion</code> гасит движение, а не элемент: линия остается линией, точка остается точкой.</p>
  </section>
 
</main>
 
<footer class="dsx-footer">
  <div class="dsx-wrap">
    <div class="dsx-foot__top">
      
        <div class="dsx-foot__brand">Мадина Малова</div>
        <p class="dsx-foot__pos">Витрина дизайн-системы экосистемы «Индустрия доверия» · редакция на Фундаменте v4.0.5 · 2026</p>
      </div>
      
        <p class="dsx-foot__h">Разделы</p>
        <ul class="dsx-foot__list">
          <a class="dsx-foot__link" href="#colors">Цвет</a></li>
          <a class="dsx-foot__link" href="#type">Типографика</a></li>
          <a class="dsx-foot__link" href="#cards">Компоненты</a></li>
          <a class="dsx-foot__link" href="#live">Живые элементы</a></li>
        </ul>
      </div>
      
        <p class="dsx-foot__h">Источник правды</p>
        <ul class="dsx-foot__list">
          <span class="dsx-foot__link">CSS_Фундамент_v4_0_4</span></li>
          <span class="dsx-foot__link">ТЕХКАНОН · §5, §6</span></li>
          <span class="dsx-foot__link">Канон сборки страницы v1.0</span></li>
        </ul>
      </div>
    </div>
    <div class="dsx-foot__bottom">
      © Мадина Малова, 2026</span>
      Витрина — не источник правды. При расхождении верен Фундамент.</span>
    </div>
  </div>
</footer>
 
<div class="dsx-strip" aria-hidden="true"><div class="dsx-strip__run"></div></div>