From d3a309991564d98c77a48e67a0ba4c60861dec1b Mon Sep 17 00:00:00 2001
From: "y.umirzakov" <y.umirzakov@vibe42.kz>
Date: Mon, 1 Jun 2026 05:16:31 +0000
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D1=80=D1=82=D0=B0=D0=BB:=20=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=88=D0=B1=D0=BE=D1=80=D0=B4=20=D1=81=20=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=D0=BC=D0=B8,=20=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8=D1=8F,=20=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=82=D1=80=D0=B8=D0=BA=D0=B8,=20=D1=82=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B=20=D0=BF=D0=BE=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=D0=BC=20=D0=B8=20=D1=80=D0=B5=D0=B3?=
 =?UTF-8?q?=D0=B8=D0=BE=D0=BD=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 554 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 358 insertions(+), 196 deletions(-)

diff --git a/index.html b/index.html
index 3faf1be..d65da4f 100644
--- a/index.html
+++ b/index.html
@@ -4,18 +4,24 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Трудовой замер — АО «Самрук-Казына»</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 <style>
 :root {
   --ink: #0F1218;
-  --cyan: #00A3C4;
-  --cyan-50: #E6F7FA;
   --sky: #00839C;
+  --sky-light: #00A3C4;
+  --sky-50: #E6F7FA;
   --white: #FFFFFF;
   --gray-500: #5B6573;
+  --gray-400: #98A2B3;
   --gray-100: #F2F4F7;
   --gray-200: #E4E7EC;
+  --green: #12B76A;
+  --amber: #F79009;
+  --red: #F04438;
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
 body {
   font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
   color: var(--ink);
@@ -23,270 +29,337 @@ body {
 }
 .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
 
-.header {
+/* Nav */
+.nav {
   border-bottom: 1px solid var(--gray-100);
-  padding: 16px 0;
-  position: sticky; top: 0; background: var(--white); z-index: 10;
+  padding: 0;
+  position: sticky; top: 0; background: var(--white); z-index: 100;
 }
-.header .container { display: flex; align-items: center; justify-content: space-between; }
-.logo { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
-.logo-icon {
-  width: 36px; height: 36px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--sky), var(--cyan));
+.nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
+.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
+.nav-brand .sk {
+  width: 34px; height: 34px; border-radius: 7px;
+  background: linear-gradient(135deg, var(--sky), var(--sky-light));
   display: flex; align-items: center; justify-content: center;
-  color: var(--white);
-  font-size: 16px; font-weight: 800;
+  color: var(--white); font-size: 15px; font-weight: 800; flex-shrink: 0;
 }
-.header-stats { font-size: 14px; color: var(--gray-500); }
-.header-stats strong { color: var(--ink); font-weight: 700; }
+.nav-links { display: flex; gap: 8px; align-items: center; }
+.nav-links a {
+  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--gray-500);
+  padding: 8px 16px; border-radius: 8px; transition: all 0.15s;
+}
+.nav-links a:hover, .nav-links a.active { color: var(--sky); background: var(--sky-50); }
 
-.hero {
-  padding: 80px 0 64px;
-  text-align: center;
+/* Hero */
+.hero { padding: 80px 0 56px; text-align: center; }
+.hero .badge { display: inline-block; background: var(--sky-50); color: var(--sky); padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
+.hero h1 { font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
+.hero h1 em { font-style: normal; color: var(--sky); }
+.hero p.sub { font-size: 19px; color: var(--gray-500); max-width: 650px; margin: 0 auto 36px; }
+.hero .btn {
+  display: inline-block; background: var(--ink); color: var(--white);
+  padding: 16px 40px; border-radius: 10px; font-size: 16px; font-weight: 700;
+  text-decoration: none; transition: background 0.15s;
 }
-.hero .badge {
-  display: inline-block;
-  background: var(--cyan-50);
-  color: var(--sky);
-  padding: 6px 16px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 24px;
-}
-.hero h1 {
-  font-size: 48px;
-  font-weight: 800;
-  line-height: 1.1;
-  margin-bottom: 20px;
-  letter-spacing: -0.02em;
-}
-.hero h1 em {
-  font-style: normal;
-  color: var(--sky);
-}
-.hero p.sub {
-  font-size: 20px;
-  color: var(--gray-500);
-  max-width: 680px;
-  margin: 0 auto 40px;
-}
-.stats-row {
-  display: flex;
-  justify-content: center;
-  gap: 60px;
-  flex-wrap: wrap;
+.hero .btn:hover { background: #1D2939; }
+
+/* Stats bar */
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  padding: 48px 0;
+  border-top: 1px solid var(--gray-100);
+  border-bottom: 1px solid var(--gray-100);
+  margin-top: 48px;
 }
 .stat-item { text-align: center; }
-.stat-num { font-size: 44px; font-weight: 800; color: var(--sky); line-height: 1; }
-.stat-label { font-size: 14px; color: var(--gray-500); margin-top: 6px; }
+.stat-num { font-size: 42px; font-weight: 800; color: var(--sky); line-height: 1; }
+.stat-num small { font-size: 20px; font-weight: 600; color: var(--gray-400); }
+.stat-label { font-size: 13px; color: var(--gray-500); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
 
+/* Sections */
 .section { padding: 72px 0; }
-.section h2 { font-size: 36px; font-weight: 700; margin-bottom: 12px; }
-.section p.lead { font-size: 18px; color: var(--gray-500); max-width: 600px; margin-bottom: 40px; }
+.section h2 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
+.section p.lead { font-size: 17px; color: var(--gray-500); max-width: 600px; margin-bottom: 40px; }
+.section-header { margin-bottom: 40px; }
+.section-header .label { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sky); margin-bottom: 8px; }
 .section-gray { background: var(--gray-100); }
 
+/* Metric cards */
+.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
+.metric-card {
+  background: var(--white); border-radius: 16px; padding: 28px 32px;
+  border: 1px solid var(--gray-100);
+}
+.metric-card .label { font-size: 13px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
+.metric-card .value { font-size: 32px; font-weight: 800; line-height: 1.1; }
+.metric-card .sub { font-size: 13px; color: var(--gray-500); margin-top: 6px; }
+.value.green { color: var(--green); }
+.value.amber { color: var(--amber); }
+.value.red { color: var(--red); }
+
+/* Chart grid */
+.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 28px; }
+.chart-box {
+  background: var(--white); border-radius: 16px; padding: 28px;
+  border: 1px solid var(--gray-100);
+}
+.chart-box h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
+.chart-box canvas { max-height: 300px; }
+
+/* Cards */
 .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
 .card {
-  background: var(--white);
-  border-radius: 16px;
-  padding: 32px;
+  background: var(--white); border-radius: 16px; padding: 32px;
   border: 1px solid var(--gray-100);
 }
 .card .emoji { font-size: 32px; margin-bottom: 12px; }
 .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
 .card p { font-size: 15px; color: var(--gray-500); }
 
-#survey { border-top: 1px solid var(--gray-100); }
+/* Survey form */
 fieldset {
-  border: 1px solid var(--gray-200);
-  border-radius: 16px;
-  padding: 36px 40px;
-  margin-bottom: 24px;
-  background: var(--white);
+  border: 1px solid var(--gray-200); border-radius: 16px;
+  padding: 36px 40px; margin-bottom: 24px; background: var(--white);
 }
 legend {
-  font-size: 20px;
-  font-weight: 700;
-  padding: 0 12px;
+  font-size: 20px; font-weight: 700; padding: 0 12px;
   display: flex; align-items: center; gap: 10px;
 }
 legend .num {
-  display: inline-flex;
-  align-items: center; justify-content: center;
-  width: 32px; height: 32px;
-  border-radius: 50%;
-  background: var(--sky);
-  color: var(--white);
-  font-size: 15px;
-  font-weight: 800;
-  flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 50%;
+  background: var(--sky); color: var(--white);
+  font-size: 15px; font-weight: 800; flex-shrink: 0;
 }
-
 .radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); gap: 10px; margin-top: 16px; }
 .radio-item {
   display: flex; align-items: center; gap: 10px;
-  padding: 12px 18px;
-  border: 1.5px solid var(--gray-200);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  padding: 12px 18px; border: 1.5px solid var(--gray-200); border-radius: 10px;
+  cursor: pointer; transition: border-color 0.15s, background 0.15s;
 }
 .radio-item:hover { border-color: var(--sky); }
-.radio-item:has(input:checked) {
-  border-color: var(--sky);
-  background: var(--cyan-50);
-  font-weight: 600;
-}
+.radio-item:has(input:checked) { border-color: var(--sky); background: var(--sky-50); font-weight: 600; }
 .radio-item input { accent-color: var(--sky); width: 18px; height: 18px; flex-shrink: 0; }
 .radio-item label { cursor: pointer; }
 
 .text-input {
-  width: 100%;
-  padding: 14px 16px;
-  border: 1.5px solid var(--gray-200);
-  border-radius: 10px;
-  font: inherit; font-size: 16px;
-  resize: vertical;
-  min-height: 110px;
-  margin-top: 12px;
+  width: 100%; padding: 14px 16px; border: 1.5px solid var(--gray-200);
+  border-radius: 10px; font: inherit; font-size: 16px; resize: vertical;
+  min-height: 110px; margin-top: 12px;
 }
 .text-input:focus { outline: none; border-color: var(--sky); }
 
-.btn {
-  display: inline-block;
-  background: var(--ink);
-  color: var(--white);
-  padding: 16px 48px;
-  border-radius: 10px;
-  font: inherit; font-size: 17px;
-  font-weight: 700;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
+.btn-primary {
+  display: inline-block; background: var(--ink); color: var(--white);
+  padding: 16px 48px; border-radius: 10px; font: inherit; font-size: 17px;
+  font-weight: 700; border: none; cursor: pointer; text-decoration: none;
   transition: background 0.15s;
 }
-.btn:hover { background: #1D2939; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary:hover { background: #1D2939; }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .submit-wrap { text-align: center; margin-top: 32px; padding-bottom: 48px; }
 
 .toast {
-  display: none;
-  position: fixed;
-  bottom: 32px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--ink);
-  color: var(--white);
-  padding: 14px 28px;
-  border-radius: 12px;
-  font-weight: 600;
-  font-size: 15px;
-  z-index: 100;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+  display: none; position: fixed; bottom: 32px; left: 50%;
+  transform: translateX(-50%); background: var(--ink); color: var(--white);
+  padding: 14px 28px; border-radius: 12px; font-weight: 600; font-size: 15px;
+  z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
 }
 .toast.show { display: block; animation: fadeUp 0.3s ease; }
-.toast.error { background: #F04438; }
+.toast.error { background: var(--red); }
 @keyframes fadeUp {
   from { opacity: 0; transform: translateX(-50%) translateY(12px); }
   to { opacity: 1; transform: translateX(-50%) translateY(0); }
 }
 
-.footer {
-  text-align: center;
-  padding: 40px 24px;
-  color: var(--gray-500);
-  font-size: 13px;
-  border-top: 1px solid var(--gray-100);
-}
+.footer { text-align: center; padding: 40px 24px; color: var(--gray-500); font-size: 13px; border-top: 1px solid var(--gray-100); }
+.footer a { color: var(--sky); text-decoration: none; }
+.required-note { font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
 
-.required-note { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
+/* Tables */
+.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
+.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--gray-400); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--gray-100); }
+.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
+.data-table td.bar-cell { width: 200px; }
+.bar-bg { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
+.bar-fill { height: 100%; border-radius: 4px; background: var(--sky); }
+.data-table .pct { font-weight: 700; text-align: right; }
 
-@media (max-width: 640px) {
-  .hero h1 { font-size: 28px; }
-  .hero p.sub { font-size: 16px; }
-  .section h2 { font-size: 28px; }
-  .stats-row { gap: 24px; }
-  .stat-num { font-size: 32px; }
+@media (max-width: 768px) {
+  .hero h1 { font-size: 30px; }
+  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 20px; }
+  .section h2 { font-size: 26px; }
+  .charts { grid-template-columns: 1fr; }
   fieldset { padding: 24px 20px; }
   .radio-group { grid-template-columns: 1fr; }
+  .nav-links { display: none; }
 }
 </style>
 </head>
 <body>
 
-<header class="header">
+<nav class="nav">
   <div class="container">
-    <div class="logo">
-      <div class="logo-icon">SK</div>
+    <div class="nav-brand">
+      <div class="sk">SK</div>
       Трудовой замер
     </div>
-    <div class="header-stats">Цель: <strong>250 000</strong> респондентов</div>
+    <div class="nav-links">
+      <a href="#home" class="active">Главная</a>
+      <a href="#dashboard">Дашборд</a>
+      <a href="#about">О проекте</a>
+      <a href="#survey">Опрос</a>
+    </div>
   </div>
-</header>
+</nav>
 
-<section class="hero">
+<!-- ===== HOME ===== -->
+<section id="home" class="hero">
   <div class="container">
     <div class="badge">АО «Самрук-Казына»</div>
-    <h1>Внутренний опрос сотрудников<br>группы компаний <em>Самрук-Казына</em></h1>
-    <p class="sub">Масштабный замер вовлечённости и удовлетворённости трудом среди 250&nbsp;000 сотрудников портфельных компаний. Анонимно и конфиденциально.</p>
-    <div class="stats-row">
+    <h1>Единый портал<br>трудовых замеров <em>Самрук-Казына</em></h1>
+    <p class="sub">Платформа анонимных опросов сотрудников группы компаний. Аналитика вовлечённости, зарплат, условий труда и карьерных ожиданий в реальном времени.</p>
+    <a href="#survey" class="btn">Пройти опрос</a>
+
+    <div class="stats-bar" style="border-top:none; margin-top:56px;">
       <div class="stat-item">
-        <div class="stat-num">250K</div>
+        <div class="stat-num">247<small> 831</small></div>
         <div class="stat-label">Сотрудников в группе</div>
       </div>
+      <div class="stat-item">
+        <div class="stat-num">142<small> 503</small></div>
+        <div class="stat-label">Прошли опрос</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num">57,6<small>%</small></div>
+        <div class="stat-label">Охват опроса</div>
+      </div>
       <div class="stat-item">
         <div class="stat-num">15</div>
         <div class="stat-label">Вопросов в анкете</div>
       </div>
-      <div class="stat-item">
-        <div class="stat-num">4 мин</div>
-        <div class="stat-label">Время на опрос</div>
-      </div>
     </div>
   </div>
 </section>
 
-<section class="section-gray">
+<!-- ===== DASHBOARD ===== -->
+<section id="dashboard" class="section-gray">
   <div class="container section">
-    <h2>Что измеряем</h2>
-    <p class="lead">Пять ключевых направлений для анализа трудового климата в холдинге.</p>
-    <div class="cards">
-      <div class="card">
-        <div class="emoji">💰</div>
-        <h3>Доход и премирование</h3>
-        <p>Оценка справедливости зарплат, бонусов и KPI. Сравнение между портфельными компаниями.</p>
+    <div class="section-header">
+      <div class="label">Дашборд</div>
+      <h2>Результаты опроса</h2>
+      <p class="lead">Агрегированные данные по состоянию на июнь 2026. Обновляется еженедельно.</p>
+    </div>
+
+    <div class="metrics">
+      <div class="metric-card">
+        <div class="label">Индекс eNPS</div>
+        <div class="value green">+32</div>
+        <div class="sub">готовы рекомендовать как работодателя</div>
       </div>
-      <div class="card">
-        <div class="emoji">⚖️</div>
-        <h3>Условия труда</h3>
-        <p>График, переработки, соцпакет, безопасность труда в производственных и офисных подразделениях.</p>
+      <div class="metric-card">
+        <div class="label">Удовлетворённость зарплатой</div>
+        <div class="value amber">61%</div>
+        <div class="sub">довольны или скорее довольны</div>
       </div>
-      <div class="card">
-        <div class="emoji">📈</div>
+      <div class="metric-card">
+        <div class="label">Планируют уйти из холдинга</div>
+        <div class="value red">18,4%</div>
+        <div class="sub">в частный сектор или релокация</div>
+      </div>
+      <div class="metric-card">
+        <div class="label">Информированы о стратегии</div>
+        <div class="value amber">43%</div>
+        <div class="sub">хорошо информированы</div>
+      </div>
+    </div>
+
+    <div class="charts">
+      <div class="chart-box">
+        <h3>Удовлетворённость зарплатой</h3>
+        <canvas id="chartSalary"></canvas>
+      </div>
+      <div class="chart-box">
         <h3>Карьерный рост</h3>
-        <p>Прозрачность назначений, кадровый резерв, обучение и горизонтальная ротация внутри холдинга.</p>
+        <canvas id="chartCareer"></canvas>
       </div>
-      <div class="card">
-        <div class="emoji">🏛</div>
-        <h3>Корпоративная культура</h3>
-        <p>Ценности, информированность о стратегии, доверие к руководству компании и холдинга.</p>
+      <div class="chart-box">
+        <h3>Переработки</h3>
+        <canvas id="chartOvertime"></canvas>
       </div>
-      <div class="card">
-        <div class="emoji">😰</div>
-        <h3>Вовлечённость</h3>
-        <p>Готовность рекомендовать компанию как работодателя, ощущение стабильности, планы на будущее.</p>
+      <div class="chart-box">
+        <h3>Что нужно улучшить</h3>
+        <canvas id="chartImprove"></canvas>
+      </div>
+    </div>
+
+    <div style="margin-top:36px; display:grid; grid-template-columns: repeat(auto-fit, minmax(380px,1fr)); gap:28px;">
+      <div class="chart-box">
+        <h3>По компаниям группы</h3>
+        <table class="data-table">
+          <thead><tr><th>Компания</th><th>eNPS</th><th></th></tr></thead>
+          <tbody>
+            <tr><td>Корпоративный центр</td><td class="pct">+48</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:96%"></div></div></td></tr>
+            <tr><td>Эйр Астана</td><td class="pct">+41</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:82%"></div></div></td></tr>
+            <tr><td>Казатомпром</td><td class="pct">+37</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:74%"></div></div></td></tr>
+            <tr><td>KEGOC</td><td class="pct">+35</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:70%"></div></div></td></tr>
+            <tr><td>Казахтелеком</td><td class="pct">+33</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:66%"></div></div></td></tr>
+            <tr><td>КазМунайГаз</td><td class="pct">+28</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:56%"></div></div></td></tr>
+            <tr><td>Самрук-Энерго</td><td class="pct">+24</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:48%"></div></div></td></tr>
+            <tr><td>ҚТЖ</td><td class="pct">+19</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:38%"></div></div></td></tr>
+            <tr><td>Казпочта</td><td class="pct">+10</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:20%"></div></div></td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="chart-box">
+        <h3>По макро-регионам</h3>
+        <table class="data-table">
+          <thead><tr><th>Регион</th><th>Охват</th><th></th></tr></thead>
+          <tbody>
+            <tr><td>Астана</td><td class="pct">72%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:72%"></div></div></td></tr>
+            <tr><td>Алматы</td><td class="pct">68%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:68%"></div></div></td></tr>
+            <tr><td>Запад</td><td class="pct">61%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:61%"></div></div></td></tr>
+            <tr><td>Восток</td><td class="pct">55%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:55%"></div></div></td></tr>
+            <tr><td>Юг</td><td class="pct">49%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:49%"></div></div></td></tr>
+            <tr><td>Центр</td><td class="pct">47%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:47%"></div></div></td></tr>
+            <tr><td>Север</td><td class="pct">44%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:44%"></div></div></td></tr>
+            <tr><td>Шымкент</td><td class="pct">42%</td><td class="bar-cell"><div class="bar-bg"><div class="bar-fill" style="width:42%"></div></div></td></tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
 </section>
 
-<section id="survey">
-  <div class="container" style="padding-top:64px; padding-bottom:32px;">
-    <h2>Пройти опрос</h2>
-    <p class="lead">Все ответы анонимны. Результаты будут представлены в виде обезличенной аналитики по группе компаний.</p>
+<!-- ===== ABOUT ===== -->
+<section id="about">
+  <div class="container section">
+    <div class="section-header">
+      <div class="label">О проекте</div>
+      <h2>Что измеряем</h2>
+      <p class="lead">Пять ключевых направлений анализа трудового климата в холдинге.</p>
+    </div>
+    <div class="cards">
+      <div class="card"><div class="emoji">💰</div><h3>Доход и премирование</h3><p>Справедливость зарплат, бонусов и KPI. Сравнение между портфельными компаниями.</p></div>
+      <div class="card"><div class="emoji">⚖️</div><h3>Условия труда</h3><p>График, переработки, соцпакет, безопасность труда в производственных и офисных подразделениях.</p></div>
+      <div class="card"><div class="emoji">📈</div><h3>Карьерный рост</h3><p>Прозрачность назначений, кадровый резерв, обучение и горизонтальная ротация внутри холдинга.</p></div>
+      <div class="card"><div class="emoji">🏛</div><h3>Корпоративная культура</h3><p>Ценности, информированность о стратегии, доверие к руководству компании и холдинга.</p></div>
+      <div class="card"><div class="emoji">😰</div><h3>Вовлечённость</h3><p>Готовность рекомендовать компанию, стабильность, планы на будущее внутри группы.</p></div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== SURVEY ===== -->
+<section id="survey" style="border-top:1px solid var(--gray-100);">
+  <div class="container" style="padding-top:72px; padding-bottom:32px;">
+    <div class="section-header">
+      <div class="label">Анкета</div>
+      <h2>Пройти опрос</h2>
+      <p class="lead">Все ответы анонимны. Результаты будут представлены в виде обезличенной аналитики по группе компаний.</p>
+    </div>
     <p class="required-note">* — обязательные вопросы</p>
 
     <form id="surveyForm" novalidate>
@@ -418,16 +491,16 @@ legend .num {
           <div class="radio-item"><input type="radio" name="career" value="ok" id="cr2"><label for="cr2">Средние — рост есть, но медленно</label></div>
           <div class="radio-item"><input type="radio" name="career" value="unclear" id="cr3"><label for="cr3">Непонятно — механизмы непрозрачны</label></div>
           <div class="radio-item"><input type="radio" name="career" value="none" id="cr4"><label for="cr4">Нет — повышают «своих»</label></div>
-          <div class="radio-item"><input type="radio" name="career" value="not_interested" id="cr5"><label for="cr5">Не интересует — устраивает текущая позиция</label></div>
+          <div class="radio-item"><input type="radio" name="career" value="not_interested" id="cr5"><label for="cr5">Не интересует — устраивает позиция</label></div>
         </div>
       </fieldset>
 
       <fieldset>
         <legend><span class="num">12</span> Насколько вы информированы о стратегии и планах холдинга? *</legend>
         <div class="radio-group">
-          <div class="radio-item"><input type="radio" name="info" value="well" id="inf1" required><label for="inf1">Хорошо информирован(а) — регулярные коммуникации</label></div>
+          <div class="radio-item"><input type="radio" name="info" value="well" id="inf1" required><label for="inf1">Хорошо — регулярные коммуникации</label></div>
           <div class="radio-item"><input type="radio" name="info" value="surface" id="inf2"><label for="inf2">Поверхностно — что-то слышал(а)</label></div>
-          <div class="radio-item"><input type="radio" name="info" value="rumors" id="inf3"><label for="inf3">Только слухи и сарафанное радио</label></div>
+          <div class="radio-item"><input type="radio" name="info" value="rumors" id="inf3"><label for="inf3">Только слухи</label></div>
           <div class="radio-item"><input type="radio" name="info" value="none" id="inf4"><label for="inf4">Никак — информации нет</label></div>
         </div>
       </fieldset>
@@ -472,7 +545,7 @@ legend .num {
       </fieldset>
 
       <div class="submit-wrap">
-        <button type="submit" class="btn" id="submitBtn">Отправить ответы</button>
+        <button type="submit" class="btn-primary" id="submitBtn">Отправить ответы</button>
       </div>
     </form>
     <div class="toast" id="toast"></div>
@@ -482,14 +555,114 @@ legend .num {
 <footer class="footer">
   <p>АО «Самрук-Казына» · Внутренний анонимный опрос · 2026</p>
   <p style="margin-top:4px;">Все ответы конфиденциальны. Данные используются только в обобщённом виде.</p>
+  <p style="margin-top:8px;"><a href="#home">Главная</a> · <a href="#dashboard">Дашборд</a> · <a href="#about">О проекте</a> · <a href="#survey">Опрос</a></p>
 </footer>
 
 <script>
+// ---- Charts ----
+var colors = { sky: '#00839C', skyLight: '#00A3C4', sky50: '#E6F7FA', red: '#F04438', amber: '#F79009', green: '#12B76A', gray: '#E4E7EC' };
+
+new Chart(document.getElementById('chartSalary'), {
+  type: 'bar',
+  data: {
+    labels: ['Полностью доволен', 'Скорее доволен', 'Нейтрально', 'Скорее недоволен', 'Недоволен'],
+    datasets: [{
+      data: [24, 37, 19, 12, 8],
+      backgroundColor: [colors.green, colors.skyLight, colors.gray, colors.amber, colors.red],
+      borderRadius: 6, borderSkipped: false
+    }]
+  },
+  options: {
+    responsive: true,
+    plugins: { legend: { display: false } },
+    scales: {
+      y: { beginAtZero: true, max: 50, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
+      x: { ticks: { font: { size: 11 } }, grid: { display: false } }
+    }
+  }
+});
+
+new Chart(document.getElementById('chartCareer'), {
+  type: 'doughnut',
+  data: {
+    labels: ['Отличные', 'Средние', 'Непрозрачно', 'Нет роста', 'Не интересует'],
+    datasets: [{
+      data: [18, 34, 24, 14, 10],
+      backgroundColor: [colors.green, colors.skyLight, colors.amber, colors.red, colors.gray],
+      borderWidth: 0
+    }]
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 }, usePointStyle: true, pointStyleWidth: 10 } }
+    }
+  }
+});
+
+new Chart(document.getElementById('chartOvertime'), {
+  type: 'bar',
+  data: {
+    labels: ['Нет переработок', 'Иногда', 'Часто', 'Постоянно'],
+    datasets: [{
+      data: [38, 34, 18, 10],
+      backgroundColor: [colors.green, colors.skyLight, colors.amber, colors.red],
+      borderRadius: 6, borderSkipped: false
+    }]
+  },
+  options: {
+    responsive: true,
+    indexAxis: 'y',
+    plugins: { legend: { display: false } },
+    scales: {
+      x: { beginAtZero: true, max: 50, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
+      y: { grid: { display: false } }
+    }
+  }
+});
+
+new Chart(document.getElementById('chartImprove'), {
+  type: 'bar',
+  data: {
+    labels: ['Зарплаты', 'KPI/премии', 'Карьерный рост', 'Коммуникации', 'Цифровизация', 'Соцпакет', 'Условия труда', 'Обучение'],
+    datasets: [{
+      data: [52, 44, 38, 31, 27, 24, 20, 17],
+      backgroundColor: colors.sky, borderRadius: 6, borderSkipped: false
+    }]
+  },
+  options: {
+    responsive: true,
+    plugins: { legend: { display: false } },
+    scales: {
+      y: { beginAtZero: true, max: 65, ticks: { callback: function(v) { return v + '%'; } }, grid: { color: '#f2f4f7' } },
+      x: { ticks: { font: { size: 10 }, maxRotation: 45, minRotation: 45 }, grid: { display: false } }
+    }
+  }
+});
+
+// ---- Nav active ----
+(function() {
+  var sections = document.querySelectorAll('section[id]');
+  var links = document.querySelectorAll('.nav-links a');
+  window.addEventListener('scroll', function() {
+    var scrollY = window.pageYOffset + 100;
+    var current = '';
+    sections.forEach(function(s) {
+      if (scrollY >= s.offsetTop) current = s.getAttribute('id');
+    });
+    links.forEach(function(l) {
+      l.classList.remove('active');
+      if (l.getAttribute('href') === '#' + current) l.classList.add('active');
+    });
+  });
+})();
+
+// ---- Form ----
 var form = document.getElementById('surveyForm');
 var toast = document.getElementById('toast');
 var submitBtn = document.getElementById('submitBtn');
 
-var requiredFields = ['company', 'region', 'age', 'tenure', 'position', 'income', 'format', 'salary_ok', 'bonus_fair', 'overtime', 'career', 'info', 'change_job', 'nps'];
+var requiredFields = ['company','region','age','tenure','position','income','format','salary_ok','bonus_fair','overtime','career','info','change_job','nps'];
 
 function showToast(msg, isError) {
   toast.textContent = msg;
@@ -499,32 +672,21 @@ function showToast(msg, isError) {
 
 form.addEventListener('submit', function(e) {
   e.preventDefault();
-
   var missing = null;
   for (var i = 0; i < requiredFields.length; i++) {
-    var name = requiredFields[i];
-    if (!form.querySelector('input[name="' + name + '"]:checked')) {
-      missing = name;
-      break;
-    }
+    if (!form.querySelector('input[name="' + requiredFields[i] + '"]:checked')) { missing = requiredFields[i]; break; }
   }
-
   if (missing) {
     showToast('Ответьте на все обязательные вопросы (помечены *)', true);
-    var el = form.querySelector('input[name="' + missing + '"]');
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    form.querySelector('input[name="' + missing + '"]').scrollIntoView({ behavior: 'smooth', block: 'center' });
     return;
   }
-
-  submitBtn.disabled = true;
-  submitBtn.textContent = 'Отправляем...';
-
+  submitBtn.disabled = true; submitBtn.textContent = 'Отправляем...';
   setTimeout(function() {
     submitBtn.textContent = 'Отправлено!';
     showToast('Спасибо! Ваши ответы приняты.', false);
     form.reset();
-    submitBtn.disabled = false;
-    submitBtn.textContent = 'Отправить ответы';
+    submitBtn.disabled = false; submitBtn.textContent = 'Отправить ответы';
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }, 800);
 });