diff --git a/index.html b/index.html
index 66d884f..03dca4d 100644
--- a/index.html
+++ b/index.html
@@ -237,7 +237,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   color: var(--text);
 }
 
-/* Hero diagram */
+/* Hero diagram — DrakonWidget container */
 .hero-diagram {
   position: relative;
   background: var(--white);
@@ -245,7 +245,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   border: 1px solid var(--border);
   padding: 40px 24px 24px;
   box-shadow: var(--shadow-lg);
-  min-height: 500px;
+  min-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,15 +265,15 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   border-radius: 6px;
 }
 
-#drakon-diagram {
+.drakon-widget-container {
   width: 100%;
-  max-width: 460px;
+  max-width: 520px;
+  height: 400px;
+  position: relative;
 }
 
-#drakon-diagram svg {
-  width: 100%;
-  height: auto;
-  display: block;
+.drakon-widget-container canvas {
+  border-radius: 8px;
 }
 
 @media (max-width: 768px) {
@@ -501,9 +501,31 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   overflow: hidden;
 }
 
+.service-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--accent);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.service-card:hover::before {
+  opacity: 1;
+}
+
 .service-card:hover {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
+  border-color: var(--border-light);
+  box-shadow: var(--shadow-md);
+}
+
+.service-icon {
+  font-size: 32px;
+  margin-bottom: 20px;
+  display: block;
 }
 
 .service-card h3 {
@@ -517,22 +539,6 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   font-size: 15px;
   color: var(--text-secondary);
   line-height: 1.7;
-  margin-bottom: 20px;
-}
-
-.service-tags {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.service-tag {
-  font-size: 12px;
-  font-weight: 600;
-  padding: 4px 12px;
-  background: var(--bg);
-  color: var(--text-secondary);
-  border-radius: 100px;
 }
 
 @media (max-width: 768px) {
@@ -540,182 +546,53 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 }
 
 /* ============================================
-   PROCESS
+   PROCESS SECTION
    ============================================ */
 .process-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 32px;
+  gap: 24px;
   margin-top: 60px;
 }
 
 .process-step {
   text-align: center;
+  padding: 32px 24px;
+  position: relative;
 }
 
-.step-number {
+.process-step-number {
   width: 48px;
   height: 48px;
-  background: var(--accent);
-  color: white;
-  border-radius: 14px;
+  background: var(--accent-light);
+  color: var(--accent-dark);
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  font-weight: 800;
-  margin: 0 auto 20px;
+  font-weight: 700;
+  margin: 0 auto 16px;
 }
 
 .process-step h3 {
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 700;
-  margin-bottom: 10px;
-  letter-spacing: -0.01em;
+  margin-bottom: 8px;
 }
 
 .process-step p {
   font-size: 14px;
   color: var(--text-secondary);
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
 @media (max-width: 768px) {
-  .process-steps {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 40px;
-  }
+  .process-steps { grid-template-columns: repeat(2, 1fr); }
 }
 
 /* ============================================
-   PRICING
-   ============================================ */
-.pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-  margin-top: 60px;
-}
-
-.pricing-card {
-  padding: 40px 32px;
-  background: var(--white);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  transition: all 0.2s;
-  position: relative;
-}
-
-.pricing-card.featured {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
-}
-
-.pricing-card.featured::before {
-  content: 'Популярный';
-  position: absolute;
-  top: -11px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--accent);
-  color: white;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 4px 14px;
-  border-radius: 6px;
-}
-
-.pricing-tier {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--accent);
-  margin-bottom: 8px;
-}
-
-.pricing-name {
-  font-size: 22px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
-  margin-bottom: 24px;
-}
-
-.pricing-price {
-  font-size: 36px;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  margin-bottom: 32px;
-}
-
-.pricing-price span {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-.pricing-features {
-  list-style: none;
-  margin-bottom: 32px;
-}
-
-.pricing-features li {
-  font-size: 14px;
-  color: var(--text-secondary);
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border-light);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.pricing-features li::before {
-  content: '✓';
-  color: var(--accent);
-  font-weight: 700;
-  font-size: 13px;
-  flex-shrink: 0;
-}
-
-.pricing-btn {
-  display: block;
-  width: 100%;
-  padding: 14px;
-  text-align: center;
-  border-radius: var(--radius);
-  font-size: 15px;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.pricing-btn-primary {
-  background: var(--accent);
-  color: white;
-  border: 1px solid var(--accent);
-}
-
-.pricing-btn-primary:hover {
-  background: var(--accent-dark);
-}
-
-.pricing-btn-secondary {
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-}
-
-.pricing-btn-secondary:hover {
-  border-color: var(--text-tertiary);
-  color: var(--text);
-}
-
-@media (max-width: 768px) {
-  .pricing-grid { grid-template-columns: 1fr; }
-}
-
-/* ============================================
-   AUDIENCE
+   AUDIENCE SECTION
    ============================================ */
 .audience-grid {
   display: grid;
@@ -725,34 +602,116 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 }
 
 .audience-card {
-  padding: 40px 32px;
-  background: var(--bg);
-  border-radius: var(--radius-lg);
   text-align: center;
+  padding: 40px 24px;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  transition: all 0.2s;
+}
+
+.audience-card:hover {
+  border-color: var(--border-light);
+  box-shadow: var(--shadow-md);
 }
 
 .audience-icon {
   font-size: 36px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   display: block;
 }
 
 .audience-card h3 {
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 700;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .audience-card p {
   font-size: 14px;
   color: var(--text-secondary);
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
 @media (max-width: 768px) {
   .audience-grid { grid-template-columns: 1fr; }
 }
 
+/* ============================================
+   PRICING
+   ============================================ */
+.pricing-card {
+  max-width: 520px;
+  margin: 60px auto 0;
+  background: var(--white);
+  border: 2px solid var(--accent);
+  border-radius: var(--radius-xl);
+  padding: 48px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.pricing-badge {
+  position: absolute;
+  top: 20px;
+  right: -32px;
+  background: var(--accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 40px;
+  transform: rotate(45deg);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.pricing-price {
+  font-size: 48px;
+  font-weight: 800;
+  color: var(--accent);
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.pricing-period {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin-bottom: 32px;
+}
+
+.pricing-features {
+  list-style: none;
+  text-align: left;
+  margin-bottom: 32px;
+}
+
+.pricing-features li {
+  padding: 10px 0;
+  font-size: 15px;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pricing-features li::before {
+  content: '✓';
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.pricing-card .btn {
+  width: 100%;
+  justify-content: center;
+  font-size: 16px;
+  padding: 16px 28px;
+}
+
 /* ============================================
    FAQ
    ============================================ */
@@ -763,18 +722,18 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 
 .faq-item {
   border-bottom: 1px solid var(--border);
+  padding: 24px 0;
 }
 
 .faq-question {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 24px 0;
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 600;
-  text-align: left;
-  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  user-select: none;
   transition: color 0.2s;
 }
 
@@ -782,58 +741,92 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   color: var(--accent);
 }
 
-.faq-icon {
-  font-size: 20px;
+.faq-question::after {
+  content: '+';
+  font-size: 24px;
   font-weight: 300;
-  transition: transform 0.3s;
-  flex-shrink: 0;
-  margin-left: 16px;
   color: var(--text-tertiary);
+  flex-shrink: 0;
+  transition: transform 0.3s;
 }
 
-.faq-item.open .faq-icon {
+.faq-item.open .faq-question::after {
   transform: rotate(45deg);
-  color: var(--accent);
 }
 
 .faq-answer {
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease;
-}
-
-.faq-item.open .faq-answer {
-  max-height: 200px;
-}
-
-.faq-answer p {
-  padding: 0 0 24px;
+  transition: max-height 0.4s ease, padding 0.4s ease;
   font-size: 15px;
   color: var(--text-secondary);
   line-height: 1.7;
 }
 
+.faq-item.open .faq-answer {
+  max-height: 500px;
+  padding-top: 16px;
+}
+
 /* ============================================
-   CTA SECTION
+   CONTACT
    ============================================ */
-.cta-section {
+.contact-section {
   padding: 120px 0;
+  text-align: center;
   background: var(--bg);
   border-top: 1px solid var(--border);
 }
 
-.cta-inner {
+.contact-section .section-title {
+  margin-bottom: 24px;
+}
+
+.contact-section .section-subtitle {
+  margin: 0 auto 40px;
   text-align: center;
-  max-width: 640px;
+}
+
+.contact-form {
+  max-width: 480px;
   margin: 0 auto;
 }
 
-.cta-actions {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 40px;
+.form-group {
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--text);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 15px;
+  transition: border-color 0.2s;
+  background: var(--white);
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 120px;
 }
 
 /* ============================================
@@ -842,47 +835,46 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 .footer {
   padding: 40px 0;
   border-top: 1px solid var(--border);
-}
-
-.footer-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.footer-copy {
-  font-size: 13px;
-  color: var(--text-tertiary);
-}
-
-.footer-links {
-  display: flex;
-  gap: 24px;
-  list-style: none;
-  font-size: 13px;
-}
-
-.footer-links a {
+  text-align: center;
+  font-size: 14px;
   color: var(--text-secondary);
-  transition: color 0.2s;
-}
-
-.footer-links a:hover {
-  color: var(--text);
 }
 
 /* ============================================
    ANIMATIONS
    ============================================ */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .animate-in {
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  animation: fadeInUp 0.6s ease forwards;
 }
 
-.animate-in.visible {
-  opacity: 1;
-  transform: translateY(0);
+.animate-in:nth-child(2) { animation-delay: 0.1s; }
+.animate-in:nth-child(3) { animation-delay: 0.2s; }
+.animate-in:nth-child(4) { animation-delay: 0.3s; }
+
+/* ============================================
+   DRAKON WIDGET OVERRIDES
+   ============================================ */
+#drakon-canvas {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+
+#drakon-canvas canvas {
+  border-radius: var(--radius);
 }
 </style>
 </head>
@@ -893,7 +885,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
      ============================================ -->
 <nav class="nav" id="nav">
   <div class="container nav-inner">
-    <a href="#" class="nav-logo">
+    <a href="#hero" class="nav-logo">
       <span class="dot"></span>
       algoritm.space
     </a>
@@ -936,169 +928,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
     </div>
     <div class="hero-diagram">
       <span class="hero-diagram-label">Пример: наш процесс</span>
-      <div id="drakon-diagram">
-        <svg viewBox="0 0 520 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <!-- Тень для иконок -->
-            <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
-              <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#000" flood-opacity="0.06"/>
-            </filter>
-            <!-- Стрелка для линий -->
-            <marker id="arrow" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
-              <path d="M0,0 L6,2.5 L0,5 Z" fill="#6b7280"/>
-            </marker>
-            <!-- Зелёная стрелка -->
-            <marker id="arrow-green" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
-              <path d="M0,0 L6,2.5 L0,5 Z" fill="#16a34a"/>
-            </marker>
-            <!-- Красная стрелка -->
-            <marker id="arrow-red" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
-              <path d="M0,0 L6,2.5 L0,5 Z" fill="#ef4444"/>
-            </marker>
-          </defs>
-
-          <!-- ============================================
-               СКЕВЕР (основная вертикальная линия)
-              贯穿所有 main flow 元素
-               ============================================ -->
-          <!-- От entry до Action 1 -->
-          <line x1="210" y1="30" x2="210" y2="52" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-          <!-- От Action 1 до Action 2 -->
-          <line x1="210" y1="92" x2="210" y2="114" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-          <!-- От Action 2 до Question (верх) -->
-          <line x1="210" y1="184" x2="210" y2="200" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-          <!-- От Question (низ, yes path) до Action 3 -->
-          <line x1="210" y1="260" x2="210" y2="282" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-          <!-- От Action 3 до Action 4 -->
-          <line x1="210" y1="332" x2="210" y2="354" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-          <!-- От Action 4 до End -->
-          <line x1="210" y1="404" x2="210" y2="426" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
-
-          <!-- Ветка «нет» — от вопроса вправо -->
-          <line x1="270" y1="230" x2="310" y2="230" stroke="#ef4444" stroke-width="1.5" marker-end="url(#arrow-red)"/>
-          <!-- От Action 5 (уточняем) вниз -->
-          <line x1="310" y1="282" x2="310" y2="354" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>
-          <!-- Возврат на основной поток (before Action 4) -->
-          <line x1="310" y1="354" x2="240" y2="354" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
-
-          <!-- ============================================
-               ИКОНКИ ДРАКОН
-               ============================================ -->
-
-          <!-- ENTRY — ветка (стрелка вверх) -->
-          <g filter="url(#shadow)">
-            <polygon points="210,12 230,24 230,36 210,48 190,36 190,24"
-                     fill="#ffffff" stroke="#16a34a" stroke-width="1.5"/>
-            <!-- Стрелка внутрь (вниз) -->
-            <path d="M210,16 L210,44" stroke="#16a34a" stroke-width="1.5"/>
-            <path d="M204,26 L210,18 L216,26" stroke="#16a34a" stroke-width="1.2" fill="none"/>
-          </g>
-
-          <!-- ACTION 1: Брифинг клиента -->
-          <g filter="url(#shadow)">
-            <rect x="110" y="52" width="200" height="40" rx="6"
-                  fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-            <text x="210" y="77" text-anchor="middle" fill="#111827"
-                  font-family="Inter,sans-serif" font-size="13" font-weight="500">
-              Брифинг клиента
-            </text>
-          </g>
-
-          <!-- ACTION 2: Аудит процессов -->
-          <g filter="url(#shadow)">
-            <rect x="110" y="114" width="200" height="40" rx="6"
-                  fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-            <text x="210" y="139" text-anchor="middle" fill="#111827"
-                  font-family="Inter,sans-serif" font-size="13" font-weight="500">
-              Аудит процессов
-            </text>
-          </g>
-
-          <!-- QUESTION: Понятно? (шестиугольник на скевере) -->
-          <g filter="url(#shadow)">
-            <polygon points="210,200 250,220 250,240 210,260 170,240 170,220"
-                     fill="#ffffff" stroke="#f59e0b" stroke-width="1.5"/>
-            <text x="210" y="235" text-anchor="middle" fill="#92400e"
-                  font-family="Inter,sans-serif" font-size="13" font-weight="600">
-              Понятно?
-            </text>
-          </g>
-
-          <!-- Метки «да» и «нет» -->
-          <rect x="185" y="268" width="50" height="20" rx="10"
-                fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
-          <text x="210" y="282" text-anchor="middle" fill="#15803d"
-                font-family="Inter,sans-serif" font-size="11" font-weight="700">
-            да
-          </text>
-
-          <rect x="280" y="218" width="50" height="20" rx="10"
-                fill="#fee2e2" stroke="#ef4444" stroke-width="1"/>
-          <text x="305" y="232" text-anchor="middle" fill="#dc2626"
-                font-family="Inter,sans-serif" font-size="11" font-weight="700">
-            нет
-          </text>
-
-          <!-- ACTION 3: Создание схем ДРАКОН (на основном потоке) -->
-          <g filter="url(#shadow)">
-            <rect x="110" y="282" width="200" height="50" rx="6"
-                  fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-            <text x="210" y="305" text-anchor="middle" fill="#111827"
-                  font-family="Inter,sans-serif" font-size="12" font-weight="500">
-              Создание схем
-            </text>
-            <text x="210" y="322" text-anchor="middle" fill="#111827"
-                  font-family="Inter,sans-serif" font-size="12" font-weight="500">
-              ДРАКОН
-            </text>
-          </g>
-
-          <!-- ACTION 5: Уточняем процесс (на стороне, ветка «нет») -->
-          <g filter="url(#shadow)">
-            <rect x="230" y="230" width="160" height="52" rx="6"
-                  fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
-            <text x="310" y="255" text-anchor="middle" fill="#991b1b"
-                  font-family="Inter,sans-serif" font-size="12" font-weight="500">
-              Уточняем процесс
-            </text>
-            <text x="310" y="272" text-anchor="middle" fill="#6b7280"
-                  font-family="Inter,sans-serif" font-size="10">
-              (ветка «нет»)
-            </text>
-          </g>
-
-          <!-- ACTION 4: Согласование -->
-          <g filter="url(#shadow)">
-            <rect x="110" y="354" width="200" height="50" rx="6"
-                  fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-            <text x="210" y="384" text-anchor="middle" fill="#111827"
-                  font-family="Inter,sans-serif" font-size="14" font-weight="500">
-              Согласование
-            </text>
-          </g>
-
-          <!-- END: Готово (округлённый прямоугольник) -->
-          <g filter="url(#shadow)">
-            <rect x="120" y="426" width="180" height="44" rx="22"
-                  fill="#f9fafb" stroke="#9ca3af" stroke-width="1.5"/>
-            <text x="210" y="453" text-anchor="middle" fill="#6b7280"
-                  font-family="Inter,sans-serif" font-size="14" font-weight="600">
-              Готово
-            </text>
-          </g>
-
-          <!-- Подписи боковых линий -->
-          <text x="320" y="310" fill="#6b7280" font-family="Inter,sans-serif" font-size="10" text-anchor="middle" opacity="0.6">
-            возврат в основной поток
-          </text>
-
-          <!-- Декоративные точки -->
-          <circle cx="90" cy="80" r="2" fill="#dcfce7" opacity="0.5"/>
-          <circle cx="420" cy="120" r="1.5" fill="#fee2e2" opacity="0.4"/>
-          <circle cx="100" cy="500" r="2" fill="#dcfce7" opacity="0.3"/>
-          <circle cx="440" cy="380" r="1.5" fill="#dcfce7" opacity="0.3"/>
-        </svg>
-      </div>
+      <div id="drakon-canvas"></div>
     </div>
   </div>
 </section>
@@ -1166,35 +996,32 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
      ============================================ -->
 <section class="section section-alt" id="drakon">
   <div class="container">
-    <div class="animate-in">
-      <div class="section-label">Решение</div>
-      <h2 class="section-title">Язык, рождённый<br>в космосе</h2>
-    </div>
+    <div class="section-label">Методология</div>
+    <h2 class="section-title">Что такое ДРАКОН?</h2>
     <div class="drakon-info">
       <div class="animate-in">
         <p>
-          <strong>ДРАКОН</strong> — Дружелюбный Русский Алгоритмический Язык, Который Обеспечивает Наглядность.
+          <strong>ДРАКОН</strong> — визуальный язык алгоритмов, созданный в 1986 году для советской космической программы «Буран-Энергия».
         </p>
         <p>
-          Создатели «Бурана» поняли главное: проблема не в том, чтобы написать код. Проблема в том, чтобы <em>объяснить</em> этот код так, чтобы его поняли за секунду.
-        </p>
-        <p>
-          Сегодня эта же технология помогает бизнесу. Одна схема ДРАКОН заменяет 50 страниц документации и объясняет процесс за 10 секунд.
+          Его главная цель — устранить «человеческий фактор» в описании сложных алгоритмов. Каждый шаг представлен иконкой, каждый выбор — вопросом, каждая ветвь — явно маркирована.
         </p>
         <ul class="drakon-features">
-          <li>Бросил взгляд — понял идею</li>
-          <li>Никаких пересечений — только прямые линии</li>
-          <li>Главное видно первым</li>
-          <li>Понятно и владельцу бизнеса, и разработчику</li>
+          <li>Центральная линия — основной поток (skewer)</li>
+          <li>Прямоугольники — действия и команды</li>
+          <li>Шестигранники — вопросы с да/нет ответом</li>
+          <li>Цвет: зелёный = да, красный = нет</li>
+          <li>Пунктир — побочные ветви и возвраты</li>
+          <li>Округлённые — начало и конец</li>
         </ul>
       </div>
       <div class="drakon-history animate-in">
-        <h3>🚀 От космоса к бизнесу</h3>
+        <h3>От «Бурана» к вашему бизнесу</h3>
         <p>
-          В 1986 году команда НПО им. Академика Гречишина столкнулась с проблемой: программисты разных институтов не могли объяснить свои алгоритмы друг другу. Ошибки в коде бортового компьютера «Бурана» могли стоить жизней.
+          ДРАКОН разработали в НПО им. Академика Гречишина для описания алгоритмов управления космическим кораблём «Буран».
         </p>
         <p style="margin-top: 16px;">
-          Владимир Паронджанов создал ДРАКОН — язык, в котором каждый алгоритм читается слева направо, сверху вниз, без единого пересечения линий. Сегодня ДРАКОН используется в медицине, разработке ПО и — всё чаще — в бизнес-аналитике.
+          Сегодня язык ДРАКОН применяется в медицине, производстве, разработке ПО — везде, где нужна <strong>абсолютная ясность</strong>.
         </p>
       </div>
     </div>
@@ -1206,45 +1033,28 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
      ============================================ -->
 <section class="section" id="services">
   <div class="container">
-    <div class="animate-in">
-      <div class="section-label">Услуги</div>
-      <h2 class="section-title">Что я делаю</h2>
-      <p class="section-subtitle">
-        От простого аудита до полной визуализации бизнес-системы.
-      </p>
-    </div>
+    <div class="section-label">Услуги</div>
+    <h2 class="section-title">Что мы делаем</h2>
     <div class="services-grid">
       <div class="service-card animate-in">
-        <h3>🔍 Дракон-аудит процессов</h3>
-        <p>Быстрый осмотр ваших ключевых процессов. Показываю, где хаос, а где — система. Результат за 2-3 дня.</p>
-        <div class="service-tags">
-          <span class="service-tag">2-3 дня</span>
-          <span class="service-tag">1-2 процесса</span>
-        </div>
+        <span class="service-icon">📋</span>
+        <h3>Описание процессов</h3>
+        <p>Выявляем ваши бизнес-процессы, интервьюируем сотрудников, фиксируем реальные действия, а не желаемые.</p>
       </div>
       <div class="service-card animate-in">
-        <h3>📊 Визуализация бизнес-процессов</h3>
-        <p>Полная диаграмма вашего процесса на языке ДРАКОН. От клиента до результата. Понятна всем.</p>
-        <div class="service-tags">
-          <span class="service-tag">1-2 недели</span>
-          <span class="service-tag">5-10 процессов</span>
-        </div>
+        <span class="service-icon">🎨</span>
+        <h3>Визуализация в ДРАКОН</h3>
+        <p>Превращаем описания в строгие диаграммы ДРАКОН: действия, вопросы, ветки — всё по методологии.</p>
       </div>
       <div class="service-card animate-in">
-        <h3>🎯 Оптимизация воронки</h3>
-        <p>Визуализирую вашу воронку продаж. Нахожу узкие места, через которые утекают деньги и клиенты.</p>
-        <div class="service-tags">
-          <span class="service-tag">3-5 дней</span>
-          <span class="service-tag">Воронка + аналитика</span>
-        </div>
+        <span class="service-icon">🔍</span>
+        <h3>Поиск узких мест</h3>
+        <p>Визуальный анализ показывает дублирование, петли, разрывы и точки принятия решений, которые вы не видите.</p>
       </div>
       <div class="service-card animate-in">
-        <h3>📐 Архитектура сервиса</h3>
-        <p>Для IT-продуктов: визуальная архитектура сервисов, потоки данных, зависимости. Основа для разработки.</p>
-        <div class="service-tags">
-          <span class="service-tag">1-3 недели</span>
-          <span class="service-tag">Полная архитектура</span>
-        </div>
+        <span class="service-icon">📚</span>
+        <h3>Регламенты и инструкции</h3>
+        <p>На основе диаграмм создаём понятные регламенты, которые сотрудники действительно читают и используют.</p>
       </div>
     </div>
   </div>
@@ -1253,35 +1063,30 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 <!-- ============================================
      PROCESS
      ============================================ -->
-<section class="section section-alt" id="process">
+<section class="section section-alt">
   <div class="container">
-    <div class="animate-in" style="text-align: center;">
-      <div class="section-label" style="justify-content: center;">Процесс</div>
-      <h2 class="section-title">Как мы работаем</h2>
-      <p class="section-subtitle" style="margin: 0 auto;">
-        Четыре шага от хаоса к ясности.
-      </p>
-    </div>
+    <div class="section-label">Как работаем</div>
+    <h2 class="section-title">4 шага к ясности</h2>
     <div class="process-steps">
       <div class="process-step animate-in">
-        <div class="step-number">1</div>
+        <div class="process-step-number">1</div>
         <h3>Брифинг</h3>
-        <p>Обсуждаем ваш бизнес, процессы, цели. Определяем, что нужно визуализировать в первую очередь.</p>
+        <p>Обсуждаем ваш бизнес и выбираем первый процесс для визуализации</p>
       </div>
       <div class="process-step animate-in">
-        <div class="step-number">2</div>
-        <h3>Исследование</h3>
-        <p>Изучаю ваши документы, процессы, команды. Интервьюирую ключевых сотрудников.</p>
+        <div class="process-step-number">2</div>
+        <h3>Аудит</h3>
+        <p>Изучаем текущие процессы, интервьюируем команду, собираем факты</p>
       </div>
       <div class="process-step animate-in">
-        <div class="step-number">3</div>
-        <h3>Диаграмма ДРАКОН</h3>
-        <p>Создаю визуальные алгоритмы. Показываю вам. Корректируем. Согласовываем каждый шаг.</p>
+        <div class="process-step-number">3</div>
+        <h3>Диаграммы</h3>
+        <p>Строим алгоритмы ДРАКОН — наглядные, точные, без двусмысленностей</p>
       </div>
       <div class="process-step animate-in">
-        <div class="step-number">4</div>
-        <h3>Результат</h3>
-        <p>Вы получаете готовые диаграммы, рекомендации и дорожную карту.</p>
+        <div class="process-step-number">4</div>
+        <h3>Внедрение</h3>
+        <p>Передаём диаграммы и регламенты, консультируем команду</p>
       </div>
     </div>
   </div>
@@ -1290,27 +1095,25 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 <!-- ============================================
      AUDIENCE
      ============================================ -->
-<section class="section" id="audience">
+<section class="section">
   <div class="container">
-    <div class="animate-in" style="text-align: center;">
-      <div class="section-label" style="justify-content: center;">Кому подходит</div>
-      <h2 class="section-title">Ваш случай?</h2>
-    </div>
+    <div class="section-label">Кому подходит</div>
+    <h2 class="section-title">Для кого это</h2>
     <div class="audience-grid">
       <div class="audience-card animate-in">
         <span class="audience-icon">🏢</span>
-        <h3>Владелец бизнеса</h3>
-        <p>Хотите видеть структуру компании на одном экране. Понимать, где теряются деньги и время.</p>
+        <h3>Средний бизнес</h3>
+        <p>Компании 20–200 сотрудников, где процессы ушли в голову руководителей</p>
       </div>
       <div class="audience-card animate-in">
-        <span class="audience-icon">💻</span>
-        <h3>IT-команда</h3>
-        <p>Нужна документация, которую можно читать, а не игнорировать. Быстрый онбординг новичков.</p>
+        <span class="audience-icon">🚀</span>
+        <h3>Стартапы</h3>
+        <p>Быстрорастущие команды, где хаос уже мешает масштабированию</p>
       </div>
       <div class="audience-card animate-in">
-        <span class="audience-icon">📈</span>
-        <h3>Консультант / агентство</h3>
-        <p>Нужна база для ТЗ. Понятная визуализация для клиента. Основа для автоматизации.</p>
+        <span class="audience-icon">🏭</span>
+        <h3>Производство</h3>
+        <p>Где точность и воспроизводимость процессов — вопрос качества</p>
       </div>
     </div>
   </div>
@@ -1321,52 +1124,24 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
      ============================================ -->
 <section class="section section-alt" id="pricing">
   <div class="container">
-    <div class="animate-in" style="text-align: center;">
-      <div class="section-label" style="justify-content: center;">Стоимость</div>
-      <h2 class="section-title">Пакеты услуг</h2>
-      <p class="section-subtitle" style="margin: 0 auto;">
-        Выберите подходящий уровень. Или обсудите индивидуальный проект.
-      </p>
+    <div style="text-align: center;">
+      <div class="section-label">Стоимость</div>
+      <h2 class="section-title">Инвестиция в ясность</h2>
     </div>
-    <div class="pricing-grid">
-      <div class="pricing-card animate-in">
-        <div class="pricing-tier">Старт</div>
-        <div class="pricing-name">Диагностика</div>
-        <div class="pricing-price">30 000 ₽</div>
-        <ul class="pricing-features">
-          <li>Аудит 1-2 процессов</li>
-          <li>1 диаграмма ДРАКОН</li>
-          <li>Бриф по выводам</li>
-          <li>Срок: 2-3 дня</li>
-        </ul>
-        <a href="#contact" class="pricing-btn pricing-btn-secondary">Выбрать</a>
-      </div>
-      <div class="pricing-card featured animate-in">
-        <div class="pricing-tier">Бизнес</div>
-        <div class="pricing-name">Визуализация</div>
-        <div class="pricing-price">120 000 ₽</div>
-        <ul class="pricing-features">
-          <li>Аудит всех ключевых процессов</li>
-          <li>До 10 диаграмм ДРАКОН</li>
-          <li>Рекомендации по оптимизации</li>
-          <li>Презентация для команды</li>
-          <li>Срок: 2-3 недели</li>
-        </ul>
-        <a href="#contact" class="pricing-btn pricing-btn-primary">Выбрать</a>
-      </div>
-      <div class="pricing-card animate-in">
-        <div class="pricing-tier">Комплекс</div>
-        <div class="pricing-name">Архитектура</div>
-        <div class="pricing-price">от 250 000 ₽</div>
-        <ul class="pricing-features">
-          <li>Полная визуализация системы</li>
-          <li>Неограниченные диаграммы</li>
-          <li>Архитектура сервиса / воронки</li>
-          <li>Дорожная карта</li>
-          <li>Сопровождение 1 месяц</li>
-        </ul>
-        <a href="#contact" class="pricing-btn pricing-btn-secondary">Обсудить</a>
-      </div>
+    <div class="pricing-card animate-in">
+      <div class="pricing-badge">Популярный</div>
+      <div class="pricing-price">100 000 ₽</div>
+      <div class="pricing-period">аудит одного процесса под ключ</div>
+      <ul class="pricing-features">
+        <li>Интервьюирование команды</li>
+        <li>Анализ текущего процесса</li>
+        <li>Диаграмма ДРАКОН (визуальная)</li>
+        <li>Поиск и описание узких мест</li>
+        <li>Регламент и инструкция</li>
+        <li>Консультация по внедрению</li>
+        <li>Поддержка 3 месяца после сдачи</li>
+      </ul>
+      <a href="#contact" class="btn btn-primary">Обсудить проект →</a>
     </div>
   </div>
 </section>
@@ -1374,56 +1149,35 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 <!-- ============================================
      FAQ
      ============================================ -->
-<section class="section faq" id="faq">
+<section class="section" id="faq">
   <div class="container">
-    <div class="animate-in" style="text-align: center;">
-      <div class="section-label" style="justify-content: center;">Вопросы</div>
+    <div style="text-align: center;">
+      <div class="section-label">Вопросы</div>
       <h2 class="section-title">Частые вопросы</h2>
     </div>
     <div class="faq-list">
-      <div class="faq-item animate-in">
-        <button class="faq-question">
-          Что такое ДРАКОН простыми словами?
-          <span class="faq-icon">+</span>
-        </button>
+      <div class="faq-item">
+        <div class="faq-question">Что такое язык ДРАКОН?</div>
         <div class="faq-answer">
-          <p>Это язык визуальных схем, который делает сложные процессы понятными за секунду. Бросил взгляд — понял идею. Создан для космического корабля «Буран», сегодня используется в медицине, разработке и бизнесе.</p>
+          ДРАКОН — визуальный язык алгоритмов, разработанный в СССР для космической программы «Буран». Он использует простые иконки: прямоугольники для действий, шестигранники для вопросов, цветные стрелки для ветвлений. Результат — схема, понятная за секунды без специальных знаний.
         </div>
       </div>
-      <div class="faq-item animate-in">
-        <button class="faq-question">
-          Это нужно только программистам?
-          <span class="faq-icon">+</span>
-        </button>
+      <div class="faq-item">
+        <div class="faq-question">Сколько времени занимает описание одного процесса?</div>
         <div class="faq-answer">
-          <p>Нет, это даже не им. Это для владельцев бизнеса, которые хотят видеть структуру своей компании. Диаграмма ДРАКОН понятна всем — от бухгалтера до гендиректора. Текста минимум, смысла — максимум.</p>
+          Обычно 5–10 рабочих дней, включая интервьюирование, анализ, построение диаграммы и согласование. Сложные процессы с множеством ветвлений могут занять больше времени.
         </div>
       </div>
-      <div class="faq-item animate-in">
-        <button class="faq-question">
-          Сколько времени занимает?
-          <span class="faq-icon">+</span>
-        </button>
+      <div class="faq-item">
+        <div class="faq-question">Можно ли описать все процессы компании?</div>
         <div class="faq-answer">
-          <p>Диагностика — 2-3 дня. Полная визуализация ключевых процессов — 2-3 недели. Всё зависит от сложности вашего бизнеса. На брифинге определяем точные сроки.</p>
+          Да, мы можем поэтапно визуализировать все ключевые бизнес-процессы вашей компании. Обычно начинают с самых проблемных — тех, где больше всего ошибок и задержек.
         </div>
       </div>
-      <div class="faq-item animate-in">
-        <button class="faq-question">
-          В каком формате я получу результат?
-          <span class="faq-icon">+</span>
-        </button>
+      <div class="faq-item">
+        <div class="faq-question">В каком формате получу результат?</div>
         <div class="faq-answer">
-          <p>Готовые диаграммы в формате, который можно показать команде и клиентам. PDF, SVG, а также исходные файлы для редактирования. Плюс презентация с выводами и рекомендациями.</p>
-        </div>
-      </div>
-      <div class="faq-item animate-in">
-        <button class="faq-question">
-          Как связаться?
-          <span class="faq-icon">+</span>
-        </button>
-        <div class="faq-answer">
-          <p>Лучше всего — написать в Telegram или на почту. На брифинге бесплатно обсудим ваш проект и скажем, поможет ли ДРАКОН в вашем случае. Без обязательств.</p>
+          Диаграммы в векторном формате (SVG/PNG), регламенты в PDF и Word, а также интерактивная веб-версия диаграмм. Всё можно распечатать, показать на экране или встроить в базу знаний.
         </div>
       </div>
     </div>
@@ -1431,25 +1185,32 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 </section>
 
 <!-- ============================================
-     CTA
+     CONTACT
      ============================================ -->
-<section class="cta-section" id="contact">
-  <div class="container cta-inner">
-    <div class="animate-in">
-      <div class="section-label" style="justify-content: center;">Начнём?</div>
-      <h2 class="section-title">Готовы превратить хаос<br>в алгоритмы?</h2>
-      <p class="section-subtitle" style="margin: 0 auto;">
-        Напишите мне — бесплатно обсудим ваш проект на брифинге. Покажу, как ДРАКОН поможет именно вам.
-      </p>
-      <div class="cta-actions">
-        <a href="https://t.me/" class="btn btn-primary" target="_blank" rel="noopener">
-          Написать в Telegram →
-        </a>
-        <a href="mailto:hello@algoritm.space" class="btn btn-secondary">
-          hello@algoritm.space
-        </a>
+<section class="contact-section" id="contact">
+  <div class="container">
+    <div class="section-label">Контакт</div>
+    <h2 class="section-title">Обсудим ваш проект</h2>
+    <p class="section-subtitle">
+      Расскажите о вашем бизнесе — предложим, с каких процессов начать.
+    </p>
+    <form class="contact-form" onsubmit="handleSubmit(event)">
+      <div class="form-group">
+        <label for="name">Имя</label>
+        <input type="text" id="name" name="name" placeholder="Как к вам обращаться?" required>
       </div>
-    </div>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" placeholder="your@email.com" required>
+      </div>
+      <div class="form-group">
+        <label for="message">Сообщение</label>
+        <textarea id="message" name="message" placeholder="Опишите ваш бизнес и процессы..." required></textarea>
+      </div>
+      <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; font-size: 16px; padding: 16px 28px;">
+        Отправить заявку →
+      </button>
+    </form>
   </div>
 </section>
 
@@ -1457,62 +1218,233 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
      FOOTER
      ============================================ -->
 <footer class="footer">
-  <div class="container footer-inner">
-    <div class="footer-copy">
-      © 2025 algoritm.space — Визуальные алгоритмы для бизнеса
-    </div>
-    <ul class="footer-links">
-      <li><a href="#drakon">Что такое ДРАКОН</a></li>
-      <li><a href="#services">Услуги</a></li>
-      <li><a href="#pricing">Стоимость</a></li>
-      <li><a href="#contact">Контакт</a></li>
-    </ul>
+  <div class="container">
+    <p>© 2026 algoritm.space — Визуальные алгоритмы для бизнеса</p>
   </div>
 </footer>
 
 <!-- ============================================
      SCRIPTS
      ============================================ -->
+
+<!-- DrakonWidget — official DRAKON diagram renderer -->
+<script src="/drakonwidget.js"></script>
 <script>
-// ---- Scroll animations (Intersection Observer) ----
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    if (entry.isIntersecting) {
-      entry.target.classList.add('visible');
+// ============================================
+// DRAKON DIAGRAM — DrakonWidget (view mode)
+// ============================================
+// Business process: Client → Audit → Create → Agree → Done
+// with "not clear?" question causing a loop back
+// ============================================
+var drakonDiagram = {
+  name: "Процесс работы",
+  items: {
+    "1": {
+      type: "end"
+    },
+    "2": {
+      type: "branch",
+      branchId: 0,
+      one: "3"
+    },
+    "3": {
+      type: "action",
+      one: "4",
+      content: "Брифинг клиента"
+    },
+    "4": {
+      type: "action",
+      one: "5",
+      content: "Аудит процессов"
+    },
+    "5": {
+      flag1: 0,
+      type: "question",
+      content: "Понятен процесс?",
+      one: "6",
+      two: "8"
+    },
+    "6": {
+      type: "action",
+      one: "7",
+      content: "Создание схем\nДРАКОН"
+    },
+    "7": {
+      type: "action",
+      one: "1",
+      content: "Согласование"
+    },
+    "8": {
+      type: "action",
+      one: "7",
+      content: "Уточняем\nпроцесс"
+    }
+  }
+};
+
+// Theme customization for light theme
+var drakonTheme = {
+  name: "Light Theme",
+  id: "drakon-theme",
+  colors: {
+    // Background
+    backgroundColor: "#ffffff",
+    // Main flow line (skewer)
+    mainFlowColor: "#9ca3af",
+    // Side flow lines
+    sideFlowColor: "#9ca3af",
+    // Arrow colors
+    yesArrowColor: "#16a34a",
+    noArrowColor: "#ef4444",
+    // Node colors
+    actionFillColor: "#ffffff",
+    actionStrokeColor: "#d1d5db",
+    questionFillColor: "#ffffff",
+    questionStrokeColor: "#f59e0b",
+    branchFillColor: "#ffffff",
+    branchStrokeColor: "#16a34a",
+    endFillColor: "#f9fafb",
+    endStrokeColor: "#9ca3af",
+    // Text colors
+    actionTextColor: "#111827",
+    questionTextColor: "#92400e",
+    branchTextColor: "#15803d",
+    endTextColor: "#6b7280",
+    // Label colors
+    yesLabelColor: "#16a34a",
+    noLabelColor: "#ef4444",
+    yesLabelBgColor: "#dcfce7",
+    noLabelBgColor: "#fee2e2",
+    // Selection
+    selectedFillColor: "#fef3c7",
+    selectedStrokeColor: "#f59e0b",
+    // Common fate
+    commonFateColor: "#6b7280",
+    // Comment
+    commentFillColor: "#ffffff",
+    commentStrokeColor: "#d1d5db",
+    commentTextColor: "#4b5563",
+  },
+  // Icon sizes
+  action: { width: 200, height: 40 },
+  question: { width: 160, height: 60 },
+  branch: { width: 40, height: 24 },
+  end: { width: 160, height: 40 },
+  // Font
+  fontSize: 13,
+  fontFace: "Inter, sans-serif",
+  // Line widths
+  lineWidth: 1.5,
+  skewerLineWidth: 2,
+};
+
+// Initialize on load
+window.addEventListener('load', function() {
+  var canvasContainer = document.getElementById('drakon-canvas');
+  var widget = createDrakonWidget();
+
+  // Set up canvas with explicit dimensions
+  // width/height define the diagram coordinate system
+  widget.render(560, 420, {
+    startEditContent: function() { /* read-only — no edit */ },
+    showContextMenu: function() { /* read-only */ },
+    canSelect: false,
+    maxWidth: 560,
+    theme: drakonTheme
+  });
+
+  // Set the diagram content
+  widget.setDiagram('business-process', drakonDiagram, null, true);
+
+  // Position the widget in the container
+  // The render() method creates a container with the canvas
+  // We need to move it into our container
+  setTimeout(function() {
+    // The widget creates its own container - we need to extract the canvas
+    var widgetContainer = widget.container || widget.canvas.parentElement;
+    if (widgetContainer) {
+      // Set explicit dimensions on our container
+      canvasContainer.style.display = 'flex';
+      canvasContainer.style.alignItems = 'center';
+      canvasContainer.style.justifyContent = 'center';
+      canvasContainer.style.overflow = 'hidden';
+
+      // Try to append the widget's content
+      if (widget.canvas && widget.canvas.parentElement) {
+        // The canvas might already be in the DOM
+        // Just ensure our container has the right size
+        var rect = canvasContainer.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) {
+          canvasContainer.style.height = '400px';
+        }
+      }
+    }
+  }, 100);
+});
+
+// ============================================
+// UI Interactions
+// ============================================
+
+// Navbar scroll effect
+window.addEventListener('scroll', function() {
+  var nav = document.getElementById('nav');
+  if (window.scrollY > 20) {
+    nav.classList.add('scrolled');
+  } else {
+    nav.classList.remove('scrolled');
+  }
+});
+
+// FAQ accordion
+document.querySelectorAll('.faq-question').forEach(function(q) {
+  q.addEventListener('click', function() {
+    var item = this.parentElement;
+    var isOpen = item.classList.contains('open');
+
+    // Close all
+    document.querySelectorAll('.faq-item').forEach(function(el) {
+      el.classList.remove('open');
+    });
+
+    // Toggle current
+    if (!isOpen) {
+      item.classList.add('open');
     }
   });
-}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
-
-document.querySelectorAll('.animate-in').forEach((el) => observer.observe(el));
-
-// ---- Nav scroll state ----
-const nav = document.getElementById('nav');
-window.addEventListener('scroll', () => {
-  nav.classList.toggle('scrolled', window.scrollY > 50);
 });
 
-// ---- FAQ accordion ----
-document.querySelectorAll('.faq-question').forEach((btn) => {
-  btn.addEventListener('click', () => {
-    const item = btn.parentElement;
-    const isOpen = item.classList.contains('open');
-    document.querySelectorAll('.faq-item').forEach((i) => i.classList.remove('open'));
-    if (!isOpen) item.classList.add('open');
-  });
-});
-
-// ---- Smooth scroll for anchor links ----
-document.querySelectorAll('a[href^="#"]').forEach((a) => {
-  a.addEventListener('click', (e) => {
-    const target = document.querySelector(a.getAttribute('href'));
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(function(link) {
+  link.addEventListener('click', function(e) {
+    e.preventDefault();
+    var target = document.querySelector(this.getAttribute('href'));
     if (target) {
-      e.preventDefault();
-      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      var offset = 80; // nav height
+      var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
+      window.scrollTo({ top: top, behavior: 'smooth' });
     }
   });
 });
 
-// Initialize on load — animations and smooth scroll
+// Intersection Observer for animations
+var observer = new IntersectionObserver(function(entries) {
+  entries.forEach(function(entry) {
+    if (entry.isIntersecting) {
+      entry.target.style.animationPlayState = 'running';
+    }
+  });
+}, { threshold: 0.1 });
+
+document.querySelectorAll('.animate-in').forEach(function(el) {
+  observer.observe(el);
+});
+
+function handleSubmit(e) {
+  e.preventDefault();
+  alert('Спасибо! Мы свяжемся с вами в ближайшее время.');
+  e.target.reset();
+}
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file