From 63fe7a18861256ea8a50a1cfc3df8acae3b78bfd Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Thu, 25 Jun 2026 20:45:43 +0500
Subject: [PATCH] New dashboard: permanent rows (profit/turnover/cash/debt) +
 CPA/Conv/LTV tabs with sparklines and descriptions

---
 index_ibm.html | 857 +++++++++++++++++++++++--------------------------
 1 file changed, 396 insertions(+), 461 deletions(-)

diff --git a/index_ibm.html b/index_ibm.html
index 2cec787..59fd7ad 100644
--- a/index_ibm.html
+++ b/index_ibm.html
@@ -11,10 +11,8 @@
 <style>
 /* ============================================================
    IBM DESIGN LANGUAGE — LIGHT & DARK THEMES
-   Carbon Design System principles: clarity, consistency, motion
    ============================================================ */
 
-/* ── DARK THEME (default) ── */
 [data-theme="dark"] {
     --bg: #050507;
     --surface: #0c0c0f;
@@ -42,7 +40,6 @@
     --nav-scrolled: rgba(5,5,7,0.92);
 }
 
-/* ── LIGHT THEME (IBM Carbon light mode) ── */
 [data-theme="light"] {
     --bg: #f4f4f4;
     --surface: #ffffff;
@@ -87,7 +84,6 @@ body {
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* ── BACKGROUND — grid + ambient gradient ── */
 body::before {
     content: ''; position: fixed; inset: 0; z-index: 0;
     pointer-events: none;
@@ -96,11 +92,6 @@ body::before {
         linear-gradient(90deg, rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px);
     background-size: calc(var(--grid) * 12) calc(var(--grid) * 12);
 }
-[data-theme="dark"] body::before {
-    background-image:
-        linear-gradient(rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px);
-}
 [data-theme="light"] body::before {
     background-image:
         linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
@@ -124,10 +115,7 @@ a { text-decoration: none; color: inherit; }
 img { max-width: 100%; display: block; }
 ul { list-style: none; }
 
-/* ── LAYOUT ── */
-.wrap {
-    max-width: 1280px; margin: 0 auto; padding: 0 32px;
-}
+.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
 section { padding: 120px 0; position: relative; z-index: 1; }
 
 .section-label {
@@ -159,9 +147,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
     background: var(--nav-scrolled);
     border-bottom-color: var(--border);
 }
-[data-theme="light"] .header.scrolled {
-    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
-}
+[data-theme="light"] .header.scrolled { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 .header .wrap {
     display: flex; align-items: center; justify-content: space-between; width: 100%;
 }
@@ -196,24 +182,19 @@ section { padding: 120px 0; position: relative; z-index: 1; }
 }
 .header-phone:hover { color: var(--text); }
 
-/* Theme toggle */
 .theme-toggle {
     width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border);
     background: transparent; cursor: pointer; display: flex; align-items: center;
     justify-content: center; color: var(--text-sec); transition: all 0.3s var(--ease-out);
     flex-shrink: 0;
 }
-.theme-toggle:hover {
-    background: var(--accent-dim); color: var(--accent);
-    border-color: var(--accent);
-}
+.theme-toggle:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
 .theme-toggle svg { width: 18px; height: 18px; }
 .theme-toggle .icon-sun { display: none; }
 .theme-toggle .icon-moon { display: block; }
 [data-theme="light"] .theme-toggle .icon-sun { display: block; }
 [data-theme="light"] .theme-toggle .icon-moon { display: none; }
 
-/* Buttons */
 .btn {
     display: inline-flex; align-items: center; justify-content: center;
     gap: 8px; padding: 10px 20px; border-radius: 4px;
@@ -233,8 +214,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
 [data-theme="light"] .btn-accent { color: #fff; }
 .btn-accent:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-dim); }
 .btn-outline {
-    background: transparent; border: 1px solid var(--border-strong);
-    color: var(--text);
+    background: transparent; border: 1px solid var(--border-strong); color: var(--text);
 }
 .btn-outline:hover { border-color: var(--text); background: rgba(128,128,128,0.05); }
 .btn-lg { padding: 14px 28px; font-size: 0.875rem; }
@@ -258,9 +238,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
     margin-bottom: 24px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
     display: flex; align-items: center; gap: 8px;
 }
-.hero-label::before {
-    content: ''; width: 16px; height: 1px; background: var(--accent);
-}
+.hero-label::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
 
 h1 {
     font-size: clamp(3rem, 6vw, 5rem); font-weight: 700;
@@ -282,9 +260,7 @@ h1 {
     border-top: 1px solid var(--border);
     display: flex; gap: 48px;
 }
-.hero-meta-item {
-    display: flex; flex-direction: column; gap: 4px;
-}
+.hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
 .hero-meta-value {
     font-size: 1.75rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
     letter-spacing: -0.03em;
@@ -309,16 +285,12 @@ h1 {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-6px); }
 }
-
-/* ── 3D TILT (Feature #7) ── */
 .hero-right.tilt-active {
     animation: none;
     transition: transform 0.15s var(--ease-out), box-shadow 0.3s var(--ease-out);
     box-shadow: 0 20px 60px rgba(34,197,94,0.08), 0 0 1px var(--border);
 }
-.hero-right.tilt-active .dash-glow {
-    opacity: calc(var(--dash-glow-opacity) * 1.8);
-}
+.hero-right.tilt-active .dash-glow { opacity: calc(var(--dash-glow-opacity) * 1.8); }
 
 .dash-glow {
     position: absolute; top: -40%; left: -20%; width: 140%; height: 140%;
@@ -331,11 +303,11 @@ h1 {
 
 .dash-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 16px 24px; border-bottom: 1px solid var(--border);
+    padding: 12px 20px; border-bottom: 1px solid var(--border);
     position: relative; z-index: 1;
 }
 .dash-brand {
-    font-size: 0.75rem; font-weight: 500; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    font-size: 0.6875rem; font-weight: 500; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
     letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;
 }
 .dash-brand svg { flex-shrink: 0; }
@@ -352,160 +324,161 @@ h1 {
     50% { opacity:0.3; box-shadow: 0 0 0 4px transparent; }
 }
 
-/* ── LIVE CLOCK (Feature #5) ── */
 .dash-clock {
     font-size: 0.625rem; color: var(--text-dim); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
     letter-spacing: 0.05em;
 }
 .dash-clock .clock-time { color: var(--text-sec); }
 
-.dash-body { display: grid; position: relative; z-index: 1; }
+/* ── DASHBOARD BODY ── */
+.dash-body { position: relative; z-index: 1; }
 
-.dash-big {
-    grid-column: 1 / -1; padding: 40px 24px;
-    border-bottom: 1px solid var(--border); text-align: right;
+/* Permanent row: profit + turnover */
+.dash-perm {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
 }
-.dash-big-label {
-    font-size: 0.6875rem; color: var(--text-dim);
-    text-transform: uppercase; letter-spacing: 0.12em;
-    margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+.dash-perm-left { text-align: left; }
+.dash-perm-right { text-align: right; }
+.dash-perm-label {
+    font-size: 0.625rem; color: var(--text-dim);
+    text-transform: uppercase; letter-spacing: 0.1em;
+    margin-bottom: 4px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
 }
-.dash-big-value {
-    font-size: clamp(3rem, 5vw, 5rem); font-weight: 700;
-    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    line-height: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
+.dash-perm-value {
+    font-size: 1.75rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    letter-spacing: -0.03em; line-height: 1.1;
 }
-.dash-big-value .accent { color: var(--accent); }
-.dash-big-value .count-up { display: inline-block; }
-.dash-big-trend {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-size: 0.875rem; color: var(--accent);
-    font-weight: 600;
+.dash-perm-value .accent { color: var(--accent); }
+.dash-perm-sub {
+    font-size: 0.75rem; color: var(--text-sec);
+    margin-top: 2px;
 }
-.trend-icon { width: 14px; height: 14px; }
 
-.dash-cell {
-    padding: 24px; border-bottom: 1px solid var(--border);
+/* Permanent row: cash + debt */
+.dash-perm-row {
+    display: grid; grid-template-columns: 1fr 1fr;
+    border-bottom: 1px solid var(--border);
+}
+.dash-perm-cell {
+    padding: 14px 24px;
     border-right: 1px solid var(--border);
 }
-.dash-cell:nth-child(2n) { border-right: none; }
-.dash-cell-label {
-    font-size: 0.6875rem; color: var(--text-dim);
+.dash-perm-cell:last-child { border-right: none; }
+.dash-perm-cell .dash-perm-label {
+    font-size: 0.5625rem; margin-bottom: 2px;
+}
+.dash-perm-cell .dash-perm-value {
+    font-size: 1.125rem;
+}
+
+/* Tab bar */
+.dash-tabs {
+    display: flex; border-bottom: 1px solid var(--border);
+    padding: 0 8px;
+}
+.dash-tab {
+    flex: 1; padding: 12px 16px; border: none; background: transparent;
+    font-size: 0.75rem; color: var(--text-dim); cursor: pointer;
+    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    letter-spacing: 0.08em; transition: all 0.3s var(--ease-out);
+    border-right: 1px solid var(--border); position: relative;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    font-weight: 500;
+}
+.dash-tab:last-child { border-right: none; }
+.dash-tab::before {
+    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
+    height: 2px; background: var(--accent);
+    transform: scaleX(0); transition: transform 0.3s var(--ease-out);
+}
+.dash-tab.active, .dash-tab:hover {
+    background: var(--accent-dim); color: var(--accent);
+}
+.dash-tab.active::before, .dash-tab:hover::before { transform: scaleX(1); }
+.dash-tab svg.spark-tab {
+    width: 32px; height: 12px; flex-shrink: 0;
+}
+
+/* Tab content */
+.dash-tab-content { position: relative; overflow: hidden; }
+.dash-tab-panel {
+    padding: 0;
+    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
+}
+.dash-tab-panel.hidden {
+    display: none;
+}
+
+/* Big values row */
+.dash-big {
+    display: grid; grid-template-columns: 1fr 1fr;
+    border-bottom: 1px solid var(--border);
+}
+.dash-big-cell {
+    padding: 28px 24px;
+    border-right: 1px solid var(--border);
+    text-align: left;
+}
+.dash-big-cell:last-child { border-right: none; }
+.dash-big-label {
+    font-size: 0.625rem; color: var(--text-dim);
     text-transform: uppercase; letter-spacing: 0.1em;
     margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
 }
-.dash-cell-value {
-    font-size: 1.5rem; font-weight: 600; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    letter-spacing: -0.02em; margin-bottom: 4px;
-    transition: color 0.3s;
+.dash-big-value {
+    font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
+    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    line-height: 1; display: flex; align-items: baseline; gap: 8px;
 }
-.dash-cell-sub {
-    font-size: 0.75rem; color: var(--text-sec);
-    transition: color 0.3s;
+.dash-big-value .accent { color: var(--accent); }
+.dash-big-value .count-up { display: inline-block; }
+.dash-big-desc {
+    font-size: 0.6875rem; color: var(--text);
+    margin-top: 4px; line-height: 1.4;
+    opacity: 0.85;
 }
 
+/* Mini cells row */
 .dash-tri { display: grid; grid-template-columns: 1fr 1fr 1fr; }
 .dash-mini {
-    padding: 20px; border-right: 1px solid var(--border); text-align: center;
+    padding: 20px 16px; border-right: 1px solid var(--border); text-align: center;
+    position: relative; overflow: hidden;
 }
 .dash-mini:last-child { border-right: none; }
 .dash-mini-label {
     font-size: 0.625rem; color: var(--text-dim);
     text-transform: uppercase; letter-spacing: 0.1em;
     margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    position: relative; z-index: 1;
 }
 .dash-mini-value {
     font-size: 1.25rem; font-weight: 600; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    margin-bottom: 4px;
+    margin-bottom: 4px; position: relative; z-index: 1;
     transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out);
 }
+.dash-mini-desc {
+    font-size: 0.6875rem; color: var(--text);
+    position: relative; z-index: 1;
+    opacity: 0.7;
+}
 .dash-mini-bar {
     height: 3px; border-radius: 2px;
     background: var(--border); overflow: hidden; margin-top: 8px;
+    position: relative; z-index: 1;
 }
 .dash-mini-fill {
     height: 100%; border-radius: 2px; background: var(--accent);
     width: 0; transition: width 1.2s var(--ease-out), background 0.4s;
+    position: relative; z-index: 1;
 }
-
-.dash-toggle { display: flex; border-top: 1px solid var(--border); }
-.dash-toggle-btn {
-    flex: 1; padding: 10px; border: none; background: transparent;
-    font-size: 0.6875rem; color: var(--text-dim); cursor: pointer;
-    font-family: 'IBM Plex Mono', 'SF Mono', monospace; text-transform: uppercase;
-    letter-spacing: 0.08em; transition: all 0.3s var(--ease-out);
-    border-right: 1px solid var(--border); position: relative;
-}
-.dash-toggle-btn:last-child { border-right: none; }
-.dash-toggle-btn::before {
-    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
-    height: 2px; background: var(--accent);
-    transform: scaleX(0); transform-origin: center;
-    transition: transform 0.3s var(--ease-out);
-}
-.dash-toggle-btn.active, .dash-toggle-btn:hover {
-    background: var(--accent-dim); color: var(--accent);
-}
-.dash-toggle-btn.active::before, .dash-toggle-btn:hover::before {
-    transform: scaleX(1);
-}
-
-/* ── DATA FLOW (Feature #3) ── */
-.data-flow {
-    border-bottom: 1px solid var(--border);
-    padding: 64px 0;
-    overflow: hidden;
-    position: relative;
-}
-.flow-inner {
-    display: flex; align-items: center; justify-content: center; gap: 0;
-    max-width: 900px; margin: 0 auto;
-}
-.flow-node {
-    display: flex; flex-direction: column; align-items: center; gap: 12px;
-    padding: 20px; position: relative; z-index: 1;
-}
-.flow-icon {
-    width: 56px; height: 56px; border-radius: 12px;
-    border: 1px solid var(--border);
-    display: flex; align-items: center; justify-content: center;
-    background: var(--surface);
-    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    font-size: 0.6875rem; font-weight: 700; color: var(--accent);
-    transition: all 0.4s var(--ease-out);
-}
-.flow-node:hover .flow-icon {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 4px var(--accent-dim);
-    transform: translateY(-2px);
-}
-.flow-icon svg { width: 24px; height: 24px; stroke: var(--text-sec); fill: none; stroke-width: 1.5; }
-.flow-node:hover .flow-icon svg { stroke: var(--accent); }
-.flow-name {
-    font-size: 0.75rem; color: var(--text-sec); text-align: center;
-    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-}
-.flow-arrow {
-    display: flex; align-items: center; padding: 0 8px;
-    opacity: 0.3;
-}
-.flow-arrow svg { width: 40px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 2; }
-.flow-arrow .arrow-dash {
-    stroke-dasharray: 6 4;
-    animation: flowDash 1s linear infinite;
-}
-@keyframes flowDash {
-    to { stroke-dashoffset: -10; }
-}
-.flow-pulse {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: var(--accent);
-    animation: flowPulse 2s ease-in-out infinite;
-    box-shadow: 0 0 8px var(--accent-glow);
-}
-@keyframes flowPulse {
-    0%, 100% { transform: scale(1); opacity: 0.4; }
-    50% { transform: scale(1.5); opacity: 1; }
+/* Sparkline bg in mini cells */
+.dash-mini-spark {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    height: 16px; opacity: 0.15; pointer-events: none;
 }
 
 /* ── MANIFESTO ── */
@@ -517,8 +490,7 @@ h1 {
 }
 .manifesto-number {
     font-size: 8rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    letter-spacing: -0.05em; line-height: 0.9;
-    color: var(--text-dim);
+    letter-spacing: -0.05em; line-height: 0.9; color: var(--text-dim);
 }
 .manifesto-number .accent { color: var(--accent); }
 .manifesto-content h2 {
@@ -530,7 +502,7 @@ h1 {
     margin-bottom: 16px; max-width: 480px;
 }
 
-/* ── PROBLEMS — horizontal row ── */
+/* ── PROBLEMS ── */
 .problem-card {
     padding: 40px 32px; border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
@@ -540,40 +512,25 @@ h1 {
 }
 .problem-card:nth-child(3n) { border-right: none; }
 .problem-card:nth-last-child(-n+3) { border-bottom: none; }
-.problem-card:hover {
-    background: var(--accent-dim);
-}
+.problem-card:hover { background: var(--accent-dim); }
 .problem-icon {
     flex-shrink: 0; width: 80px; height: 80px;
-    border: 1px solid rgba(239,68,68,0.15);
-    border-radius: 12px; display: flex; align-items: center;
-    justify-content: center; margin: 0;
-    color: var(--red); opacity: 0.7;
-    transition: all 0.4s var(--ease-out);
+    border: 1px solid rgba(239,68,68,0.15); border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--red); opacity: 0.7; transition: all 0.4s var(--ease-out);
     background: var(--red-dim);
 }
-[data-theme="light"] .problem-icon {
-    border-color: rgba(218,30,40,0.15);
-}
 .problem-card:hover .problem-icon {
-    opacity: 1; transform: scale(1.08);
-    box-shadow: 0 0 0 4px var(--red-dim);
+    opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 4px var(--red-dim);
 }
 .problem-icon svg { width: 36px; height: 36px; stroke-width: 1.2; }
-.problem-body {
-    display: flex; flex-direction: column; gap: 12px;
-}
+.problem-body { display: flex; flex-direction: column; gap: 12px; }
 .problem-num {
     font-size: 0.6875rem; color: var(--text-dim);
     font-family: 'IBM Plex Mono', 'SF Mono', monospace; letter-spacing: 0.05em;
 }
-.problem-card h3 {
-    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em;
-}
-.problem-card p {
-    font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6;
-    max-width: 400px;
-}
+.problem-card h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
+.problem-card p { font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6; max-width: 400px; }
 
 /* ── SOLUTION ── */
 .solution-section { border-bottom: 1px solid var(--border); }
@@ -582,45 +539,31 @@ h1 {
     padding: 48px 32px; border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     transition: all 0.4s var(--ease-out); position: relative;
-    background: var(--surface);
-    box-shadow: var(--shadow-card);
+    background: var(--surface); box-shadow: var(--shadow-card);
 }
 .sol-card:nth-child(3n) { border-right: none; }
 .sol-card:nth-last-child(-n+3) { border-bottom: none; }
 .sol-card:hover {
-    background: var(--accent-dim);
-    transform: translateY(-2px);
+    background: var(--accent-dim); transform: translateY(-2px);
     box-shadow: var(--shadow-card-hover);
 }
 .sol-icon {
     width: 80px; height: 80px; border: 2px solid var(--accent);
     border-radius: 16px; display: flex; align-items: center;
     justify-content: center; margin-bottom: 28px;
-    transition: all 0.3s var(--ease-out);
-    background: var(--accent-dim);
-}
-.sol-card:hover .sol-icon {
-    transform: scale(1.05);
-    box-shadow: 0 0 0 4px var(--accent-dim);
-}
-.sol-card h3 {
-    font-size: 1.125rem; font-weight: 700; margin-bottom: 10px;
-    letter-spacing: -0.01em;
-}
-.sol-card p {
-    font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
+    transition: all 0.3s var(--ease-out); background: var(--accent-dim);
 }
+.sol-card:hover .sol-icon { transform: scale(1.05); box-shadow: 0 0 0 4px var(--accent-dim); }
+.sol-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
+.sol-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
 
-/* ── COMPARISON TABLE ── */
+/* ── COMPARISON ── */
 .comparison { background: var(--surface); border-bottom: 1px solid var(--border); }
-.comp-table {
-    width: 100%; border-collapse: collapse; font-size: 0.875rem;
-}
+.comp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
 .comp-table thead th {
-    text-align: left; padding: 20px 24px;
-    font-weight: 500; font-size: 0.6875rem;
-    color: var(--text-dim); text-transform: uppercase;
-    letter-spacing: 0.12em; border-bottom: 1px solid var(--border-strong);
+    text-align: left; padding: 20px 24px; font-weight: 500; font-size: 0.6875rem;
+    color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em;
+    border-bottom: 1px solid var(--border-strong);
 }
 .comp-table thead th:last-child { color: var(--accent); }
 .comp-table tbody td {
@@ -631,7 +574,7 @@ h1 {
 .comp-yes { color: var(--accent); font-weight: 600; }
 .comp-no { color: var(--text-dim); }
 
-/* ── HOW IT WORKS ── */
+/* ── STEPS ── */
 .steps { border-bottom: 1px solid var(--border); }
 .steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
 .step {
@@ -642,8 +585,7 @@ h1 {
 .step:hover { background: var(--accent-dim); }
 .step-num {
     font-size: 2.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    color: var(--accent); letter-spacing: -0.03em;
-    margin-bottom: 16px; line-height: 1; opacity: 0.6;
+    color: var(--accent); letter-spacing: -0.03em; margin-bottom: 16px; line-height: 1; opacity: 0.6;
     transition: opacity 0.3s;
 }
 .step:hover .step-num { opacity: 1; }
@@ -659,15 +601,11 @@ h1 {
     border: 1px solid var(--border-strong); padding: 48px 32px;
     text-align: center; position: relative;
     transition: all 0.4s var(--ease-out);
-    background: var(--surface);
-    box-shadow: var(--shadow-card);
-}
-.price-card.featured {
-    flex: 1.3; max-width: 420px;
+    background: var(--surface); box-shadow: var(--shadow-card);
 }
+.price-card.featured { flex: 1.3; max-width: 420px; }
 .price-card:hover {
-    border-color: var(--accent);
-    box-shadow: var(--shadow-card-hover);
+    border-color: var(--accent); box-shadow: var(--shadow-card-hover);
     transform: translateY(-4px);
 }
 .price-card.featured::before {
@@ -687,8 +625,7 @@ h1 {
 }
 .price-amount {
     font-size: 3.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    letter-spacing: -0.04em; margin-bottom: 8px;
-    transition: color 0.3s;
+    letter-spacing: -0.04em; margin-bottom: 8px; transition: color 0.3s;
 }
 .price-amount .unit { font-size: 0.25em; color: var(--text-sec); font-weight: 400; }
 .price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 32px; line-height: 1.6; }
@@ -696,8 +633,7 @@ h1 {
 .price-features li {
     padding: 10px 0; border-bottom: 1px solid var(--border);
     font-size: 0.8125rem; color: var(--text-sec);
-    display: flex; align-items: flex-start; gap: 10px;
-    transition: color 0.2s;
+    display: flex; align-items: flex-start; gap: 10px; transition: color 0.2s;
 }
 .price-features li:hover { color: var(--text); }
 .price-features li::before {
@@ -708,11 +644,10 @@ h1 {
 }
 .price-cta { margin-top: 8px; }
 .price-guarantee {
-    margin-top: 24px; font-size: 0.75rem; color: var(--text-dim);
-    font-style: italic;
+    margin-top: 24px; font-size: 0.75rem; color: var(--text-dim); font-style: italic;
 }
 
-/* ── FAQ — Enhanced (Feature #8) ── */
+/* ── FAQ ── */
 .faq-list { max-width: 800px; margin: 0 auto; }
 .faq-item { border-bottom: 1px solid var(--border); }
 .faq-q {
@@ -730,32 +665,24 @@ h1 {
     border-radius: 4px; border: 1px solid var(--border);
 }
 .faq-item.open .faq-q::after {
-    transform: rotate(45deg);
-    color: var(--accent);
-    border-color: var(--accent);
+    transform: rotate(45deg); color: var(--accent); border-color: var(--accent);
 }
 .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }
 .faq-item.open .faq-a { max-height: 500px; }
 .faq-a-inner {
     padding: 0 0 24px; font-size: 0.875rem; color: var(--text-sec);
     line-height: 1.7;
-    opacity: 0;
-    transform: translateY(-8px);
+    opacity: 0; transform: translateY(-8px);
     transition: opacity 0.4s var(--ease-out) 0.1s, transform 0.4s var(--ease-out) 0.1s;
 }
-.faq-item.open .faq-a-inner {
-    opacity: 1;
-    transform: translateY(0);
-}
+.faq-item.open .faq-a-inner { opacity: 1; transform: translateY(0); }
 
 /* ── FOOTER ── */
 .footer {
     padding: 64px 0; border-top: 1px solid var(--border);
     font-size: 0.75rem; color: var(--text-dim);
 }
-.footer-inner {
-    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px;
-}
+.footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; }
 .footer-col h4 {
     font-size: 0.6875rem; text-transform: uppercase;
     letter-spacing: 0.12em; color: var(--text-sec);
@@ -816,8 +743,6 @@ h1 {
     .step:nth-child(2) { border-right: none; }
     .step:nth-child(n+3) { border-top: 1px solid var(--border); }
     .footer-inner { grid-template-columns: 1fr 1fr; }
-    .flow-inner { flex-wrap: wrap; gap: 16px; }
-    .flow-arrow { transform: rotate(90deg); }
 }
 @media (max-width: 640px) {
     .wrap { padding: 0 16px; }
@@ -835,13 +760,19 @@ h1 {
     .nav { display: none; }
     .price-card { padding: 40px 24px; }
     .price-amount { font-size: 3rem; }
-    .flow-arrow { display: none; }
+    .dash-big { grid-template-columns: 1fr; }
+    .dash-big-cell { border-right: none; border-bottom: 1px solid var(--border); }
+    .dash-perm { grid-template-columns: 1fr; }
+    .dash-perm-right { text-align: left; }
+    .dash-perm-row { grid-template-columns: 1fr; }
+    .dash-perm-cell { border-right: none; border-bottom: 1px solid var(--border); }
+    .dash-tab { font-size: 0.625rem; padding: 10px 8px; }
+    .dash-tab svg { display: none; }
 }
 </style>
 </head>
 <body>
 
-<!-- ── HEADER ── -->
 <header class="header" id="header">
     <div class="wrap">
         <div class="logo">
@@ -852,7 +783,7 @@ h1 {
             <a href="#solution">Решение</a>
             <a href="#how">Как работает</a>
             <a href="#compare">Сравнение</a>
-            <a href="#pricing">Тариф</a>
+            <a href="#pricing">Тарифы</a>
             <a href="#faq">FAQ</a>
         </nav>
         <div class="header-actions">
@@ -932,93 +863,199 @@ h1 {
                         <span class="dash-status"><span class="dash-dot"></span> LIVE</span>
                     </div>
                 </div>
-                <div class="dash-body">
-                    <div class="dash-big">
-                        <div class="dash-big-label">Выручка за 30 дней</div>
-                        <div class="dash-big-value" id="bigValue">
-                            <span class="count-up">12.4</span><span class="accent">М ₽</span>
-                            <span class="dash-big-trend">
-                                <svg class="trend-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                                    <path d="M8 12V4M8 4l-3 3M8 4l3 3"/>
-                                </svg>
-                                12%
-                            </span>
-                        </div>
-                    </div>
-                    <div class="dash-cell">
-                        <div class="dash-cell-label">Маржа</div>
-                        <div class="dash-cell-value" style="color: var(--accent);" id="marginValue"><span class="count-up">23.4</span>%</div>
-                        <div class="dash-cell-sub" id="marginNote">↑ 2.1% к прошлому месяцу</div>
-                    </div>
-                    <div class="dash-cell">
-                        <div class="dash-cell-label">Касса</div>
-                        <div class="dash-cell-value" id="cashValue"><span class="count-up">4.8</span>М ₽</div>
-                        <div class="dash-cell-sub" id="cashNote">Дебиторка: 1.2М</div>
-                    </div>
-                    <div class="dash-tri" id="dashTri">
-                        <div class="dash-mini">
-                            <div class="dash-mini-label">Конверсия</div>
-                            <div class="dash-mini-value" style="color: var(--blue);" id="mini1Val"><span class="count-up">2.8</span>%</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" id="mini1Bar" style="width:0%; background: var(--blue);"></div></div>
-                        </div>
-                        <div class="dash-mini">
-                            <div class="dash-mini-label">CAC</div>
-                            <div class="dash-mini-value" style="color: var(--amber);" id="mini2Val"><span class="count-up">890</span>₽</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" id="mini2Bar" style="width:0%; background: var(--amber);"></div></div>
-                        </div>
-                        <div class="dash-mini">
-                            <div class="dash-mini-label">ROI рекл.</div>
-                            <div class="dash-mini-value" style="color: var(--accent);" id="mini3Val"><span class="count-up">91</span>%</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" id="mini3Bar" style="width:0%; background: var(--accent);"></div></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="dash-toggle">
-                    <button class="dash-toggle-btn active">E-com</button>
-                    <button class="dash-toggle-btn">Услуги</button>
-                    <button class="dash-toggle-btn">Производство</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
 
-<!-- ── DATA FLOW ── -->
-<section class="data-flow">
-    <div class="wrap">
-        <div class="flow-inner reveal">
-            <div class="flow-node">
-                <div class="flow-icon">
-                    <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" stroke="none" fill="currentColor" opacity="0.1"/><path d="M4 4h16v16H4z" rx="2"/><path d="M8 4v16M16 4v16M4 12h16"/></svg>
+                <div class="dash-body">
+                    <!-- Permanent row 1: Profit today + Turnover -->
+                    <div class="dash-perm">
+                        <div class="dash-perm-left">
+                            <div class="dash-perm-label">Прибыль за сегодня</div>
+                            <div class="dash-perm-value accent"><span class="count-up">24 500</span> ₽</div>
+                            <div class="dash-perm-sub">Оборот за месяц: <strong style="color:var(--text);">12.4М ₽</strong></div>
+                        </div>
+                        <div class="dash-perm-right">
+                            <div class="dash-perm-label">Кассовый разрыв</div>
+                            <div class="dash-perm-value" style="color: var(--accent);">Нет риска</div>
+                            <div class="dash-perm-sub">На 14 дней хватит</div>
+                        </div>
+                    </div>
+
+                    <!-- Permanent row 2: Cash + Debt -->
+                    <div class="dash-perm-row">
+                        <div class="dash-perm-cell">
+                            <div class="dash-perm-label">Касса</div>
+                            <div class="dash-perm-value"><span class="count-up">4.8</span>М ₽</div>
+                        </div>
+                        <div class="dash-perm-cell">
+                            <div class="dash-perm-label">Дебиторка</div>
+                            <div class="dash-perm-value"><span class="count-up">1.2</span>М ₽</div>
+                        </div>
+                    </div>
+
+                    <!-- Tab bar -->
+                    <div class="dash-tabs">
+                        <button class="dash-tab active" data-tab="cpa">
+                            CPA
+                            <svg class="spark-tab" viewBox="0 0 32 12" fill="none">
+                                <path d="M0 8L4 6L8 9L12 3L16 5L20 1L24 4L28 0L32 2" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
+                            </svg>
+                        </button>
+                        <button class="dash-tab" data-tab="conv">
+                            Конверсии
+                            <svg class="spark-tab" viewBox="0 0 32 12" fill="none">
+                                <path d="M0 10L4 8L8 7L12 9L16 6L20 4L24 3L28 5L32 2" stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
+                            </svg>
+                        </button>
+                        <button class="dash-tab" data-tab="ltv">
+                            LTV
+                            <svg class="spark-tab" viewBox="0 0 32 12" fill="none">
+                                <path d="M0 11L4 9L8 10L12 7L16 8L20 5L24 3L28 4L32 1" stroke="var(--amber)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
+                            </svg>
+                        </button>
+                    </div>
+
+                    <!-- Tab content area -->
+                    <div class="dash-tab-content">
+
+                    <!-- Tab: CPA -->
+                    <div class="dash-tab-panel" id="tab-cpa">
+                        <div class="dash-big">
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">CAC</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">890</span><span class="accent">₽</span>
+                                </div>
+                                <div class="dash-big-desc">Средняя стоимость за привлечённого клиента</div>
+                            </div>
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">Расход на рекламу</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">148</span><span class="accent"> 000 ₽</span>
+                                </div>
+                                <div class="dash-big-desc">Общий расход на все каналы за 30 дней</div>
+                            </div>
+                        </div>
+                        <div class="dash-tri">
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 8L5 6L10 9L15 5L20 7L25 3L30 4L35 2L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">CPL</div>
+                                <div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">2 150</span>₽</div>
+                                <div class="dash-mini-desc">Стоимость одной заявки</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 10L5 9L10 8L15 6L20 5L25 4L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">ROI</div>
+                                <div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">3.1</span>x</div>
+                                <div class="dash-mini-desc">Возврат на рекламные инвестиции</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 9L5 8L10 10L15 7L20 5L25 4L30 6L35 3L40 2" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Продажи</div>
+                                <div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">156</span></div>
+                                <div class="dash-mini-desc">За 30 дней</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Tab: Конверсии -->
+                    <div class="dash-tab-panel hidden" id="tab-conv">
+                        <div class="dash-big">
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">Конверсия</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">3.2</span><span class="accent">%</span>
+                                </div>
+                                <div class="dash-big-desc">Конверсия из посещения в продажу</div>
+                            </div>
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">Заявки</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">1 240</span>
+                                </div>
+                                <div class="dash-big-desc">Заявки за 30 дней</div>
+                            </div>
+                        </div>
+                        <div class="dash-tri">
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 10L5 8L10 9L15 7L20 6L25 4L30 5L35 3L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Посетители</div>
+                                <div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">5 400</span></div>
+                                <div class="dash-mini-desc">За 30 дней</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 9L5 10L10 7L15 6L20 5L25 4L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Заявки → Оплата</div>
+                                <div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">68</span>%</div>
+                                <div class="dash-mini-desc">Конверсия в продажу</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 11L5 9L10 10L15 8L20 6L25 5L30 4L35 3L40 2" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Квалификация</div>
+                                <div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">24.5</span>%</div>
+                                <div class="dash-mini-desc">Заявок → квалифицированных</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Tab: LTV -->
+                    <div class="dash-tab-panel hidden" id="tab-ltv">
+                        <div class="dash-big">
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">Средний LTV</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">45 200</span><span class="accent"> ₽</span>
+                                </div>
+                                <div class="dash-big-desc">Средний срок жизни клиента, ₽</div>
+                            </div>
+                            <div class="dash-big-cell">
+                                <div class="dash-big-label">LTV / CAC</div>
+                                <div class="dash-big-value">
+                                    <span class="count-up">31</span><span class="accent">:1</span>
+                                </div>
+                                <div class="dash-big-desc">Соотношение LTV к затратам на привлечение</div>
+                            </div>
+                        </div>
+                        <div class="dash-tri">
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 10L5 9L10 8L15 7L20 6L25 5L30 4L35 3L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">CAC</div>
+                                <div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">1 450</span>₽</div>
+                                <div class="dash-mini-desc">Затраты на привлечение</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 11L5 9L10 10L15 8L20 7L25 5L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Удержание 30д</div>
+                                <div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">78</span>%</div>
+                                <div class="dash-mini-desc">Клиентов через 30 дней</div>
+                            </div>
+                            <div class="dash-mini">
+                                <svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
+                                    <path d="M0 10L5 8L10 9L15 7L20 6L25 5L30 4L35 3L40 1" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
+                                </svg>
+                                <div class="dash-mini-label">Удержание 90д</div>
+                                <div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">52</span>%</div>
+                                <div class="dash-mini-desc">Клиентов через 90 дней</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    </div>
                 </div>
-                <span class="flow-name">1С / CRM</span>
-            </div>
-            <div class="flow-arrow">
-                <svg viewBox="0 0 40 12"><path class="arrow-dash" d="M2 6h32M32 2l4 4-4 4"/></svg>
-            </div>
-            <div class="flow-node">
-                <div class="flow-icon">
-                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" fill="none"/><path d="M3 9h18M9 3v18"/></svg>
-                </div>
-                <span class="flow-name">Агрегатор</span>
-            </div>
-            <div class="flow-arrow">
-                <svg viewBox="0 0 40 12"><path class="arrow-dash" d="M2 6h32M32 2l4 4-4 4"/></svg>
-            </div>
-            <div class="flow-node">
-                <div class="flow-icon">
-                    <svg viewBox="0 0 24 24"><path d="M3 15l5-5 4 4 4-6 5 5" stroke="none" fill="var(--accent)" opacity="0.3"/><path d="M3 15l5-5 4 4 4-6 5 5" stroke="var(--accent)" stroke-width="1.5" fill="none"/></svg>
-                </div>
-                <span class="flow-name">Реклама</span>
-            </div>
-            <div class="flow-arrow">
-                <svg viewBox="0 0 40 12"><path class="arrow-dash" d="M2 6h32M32 2l4 4-4 4"/></svg>
-            </div>
-            <div class="flow-node">
-                <div class="flow-icon">
-                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3" stroke="var(--accent)" fill="none" stroke-width="1.5"/><path d="M8 12h8M12 8v8"/></svg>
-                </div>
-                <span class="flow-name" style="color: var(--accent); font-weight: 600;">ROI24</span>
             </div>
         </div>
     </div>
@@ -1281,7 +1318,7 @@ h1 {
                 <h4>Решение</h4>
                 <a href="#solution">О решении</a>
                 <a href="#compare">Сравнение</a>
-                <a href="#pricing">Тариф</a>
+                <a href="#pricing">Тарифы</a>
                 <a href="#faq">FAQ</a>
             </div>
             <div class="footer-col">
@@ -1304,15 +1341,10 @@ h1 {
 /* ── THEME TOGGLE ── */
 const html = document.documentElement;
 const themeToggle = document.getElementById('themeToggle');
-
 const savedTheme = localStorage.getItem('roi24-theme');
-if (savedTheme) {
-    html.setAttribute('data-theme', savedTheme);
-}
-
+if (savedTheme) html.setAttribute('data-theme', savedTheme);
 themeToggle.addEventListener('click', () => {
-    const current = html.getAttribute('data-theme');
-    const next = current === 'dark' ? 'light' : 'dark';
+    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
     html.setAttribute('data-theme', next);
     localStorage.setItem('roi24-theme', next);
 });
@@ -1327,20 +1359,6 @@ window.addEventListener('scroll', () => {
 window.addEventListener('load', () => {
     document.getElementById('heroLeft').classList.add('loaded');
     document.getElementById('heroRight').classList.add('loaded');
-
-    setTimeout(() => {
-        document.querySelectorAll('.dash-mini-fill').forEach(bar => {
-            const target = bar.dataset.targetWidth || bar.style.width;
-            bar.style.width = '0';
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    bar.style.width = target;
-                });
-            });
-        });
-    }, 800);
-
-    // ── Feature #2: Counter Animation ──
     animateCounters();
 });
 
@@ -1349,53 +1367,42 @@ function animateCounters() {
     document.querySelectorAll('.count-up').forEach(el => {
         if (el.dataset.animated) return;
         el.dataset.animated = 'true';
-
         const text = el.textContent;
-        const match = text.match(/^(\d+\.?\d*)/);
+        const match = text.match(/^([\d\s]+\.?\d*)/);
         if (!match) return;
-
-        const target = parseFloat(match[1]);
+        const target = parseFloat(match[1].replace(/\s/g, ''));
         const prefix = text.substring(0, text.indexOf(match[1]));
         const suffix = text.substring(text.indexOf(match[1]) + match[1].length);
         const duration = 1500;
         const startTime = performance.now();
-        const startVal = 0;
 
         function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }
-
         function update(now) {
             const elapsed = now - startTime;
             const progress = Math.min(elapsed / duration, 1);
-            const easedProgress = easeOutQuart(progress);
-            const currentVal = startVal + (target - startVal) * easedProgress;
-
+            const eased = easeOutQuart(progress);
+            const currentVal = target * eased;
             let display;
             if (text.includes('.')) {
                 display = prefix + currentVal.toFixed(1) + suffix;
             } else {
-                display = prefix + Math.round(currentVal) + suffix;
+                const rounded = Math.round(currentVal);
+                display = prefix + rounded.toLocaleString('ru-RU').replace(/,/g, ' ') + suffix;
             }
-
             el.textContent = display;
-
-            if (progress < 1) {
-                requestAnimationFrame(update);
-            } else {
-                el.textContent = text;
-            }
+            if (progress < 1) requestAnimationFrame(update);
+            else el.textContent = text;
         }
-
         requestAnimationFrame(update);
     });
 }
 
 /* ── Feature #5: Live Clock ── */
 function updateClock() {
-    const now = new Date();
-    const timeStr = now.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
     const clockEl = document.getElementById('dashClock');
     if (clockEl) {
-        clockEl.querySelector('.clock-time').textContent = timeStr;
+        clockEl.querySelector('.clock-time').textContent =
+            new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
     }
 }
 setInterval(updateClock, 1000);
@@ -1410,107 +1417,38 @@ const revealObserver = new IntersectionObserver((entries) => {
         }
     });
 }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
-
 document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
 
-/* ── DASHBOARD SEGMENT TOGGLE ── */
-const SEGMENTS = {
-    ecom: {
-        revenue: '12.4', revenueTrend: '+12%',
-        margin: '23.4', marginNote: '↑ 2.1% к прошлому месяцу',
-        cash: '4.8', cashNote: 'Дебиторка: 1.2М',
-        mini: [
-            { label: 'Конверсия', value: '2.8', pct: 28, color: 'var(--blue)' },
-            { label: 'CAC', value: '890', pct: 45, color: 'var(--amber)' },
-            { label: 'ROI рекл.', value: '91', pct: 91, color: 'var(--accent)' }
-        ],
-        suffixes: ['М ₽', '%', 'М ₽', '%', '', '%']
-    },
-    services: {
-        revenue: '3.8', revenueTrend: '+8%',
-        margin: '31.2', marginNote: '↑ 1.4%',
-        cash: '2.1', cashNote: 'Пайплайн: 8.5М',
-        mini: [
-            { label: 'Загрузка', value: '78', pct: 78, color: 'var(--blue)' },
-            { label: 'Марж. проект', value: '34', pct: 68, color: 'var(--amber)' },
-            { label: 'LTV', value: '185', pct: 82, color: 'var(--accent)' }
-        ],
-        suffixes: ['М ₽', '%', 'М ₽', '%', '', 'К']
-    },
-    production: {
-        revenue: '28.7', revenueTrend: '+5%',
-        margin: '18.7', marginNote: '↓ 0.8%',
-        cash: '6.2', cashNote: 'OEE: 72%',
-        mini: [
-            { label: 'План/факт', value: '94', pct: 94, color: 'var(--blue)' },
-            { label: 'OEE', value: '72', pct: 72, color: 'var(--amber)' },
-            { label: 'Качество', value: '99.1', pct: 99, color: 'var(--accent)' }
-        ],
-        suffixes: ['М ₽', '%', 'М ₽', '%', '', '%']
-    }
-};
+/* ── DASHBOARD TABS ── */
+const tabs = document.querySelectorAll('.dash-tab');
+const panels = document.querySelectorAll('.dash-tab-panel');
 
-const toggleBtns = document.querySelectorAll('.dash-toggle-btn');
-toggleBtns.forEach(btn => {
-    btn.addEventListener('click', () => {
-        const key = btn.textContent.toLowerCase().includes('e-com') ? 'ecom' :
-                    btn.textContent.toLowerCase().includes('услуг') ? 'services' : 'production';
-        const seg = SEGMENTS[key];
+tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+        const target = tab.dataset.tab;
 
-        toggleBtns.forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
+        tabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
 
-        const bigValue = document.getElementById('bigValue');
-        bigValue.style.opacity = '0';
-        bigValue.style.transform = 'translateY(-8px)';
-        bigValue.style.transition = 'opacity 0.3s, transform 0.3s';
-
-        setTimeout(() => {
-            bigValue.innerHTML = `<span class="count-up">${seg.revenue}</span><span class="accent">${seg.suffixes[0]}</span><span class="dash-big-trend"><svg class="trend-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 12V4M8 4l-3 3M8 4l3 3"/></svg>${seg.revenueTrend}</span>`;
-            bigValue.style.opacity = '1';
-            bigValue.style.transform = 'translateY(0)';
-            animateCounters();
-        }, 300);
-
-        const marginValue = document.getElementById('marginValue');
-        const marginNote = document.getElementById('marginNote');
-        const cashValue = document.getElementById('cashValue');
-        const cashNote = document.getElementById('cashNote');
-
-        [marginValue, marginNote, cashValue, cashNote].forEach(el => {
-            el.style.transition = 'opacity 0.25s';
-            el.style.opacity = '0';
-        });
-
-        setTimeout(() => {
-            marginValue.innerHTML = `<span class="count-up">${seg.margin}</span>%`;
-            marginNote.textContent = seg.marginNote;
-            cashValue.innerHTML = `<span class="count-up">${seg.cash}</span>${seg.suffixes[2]}`;
-            cashNote.textContent = seg.cashNote;
-            [marginValue, marginNote, cashValue, cashNote].forEach(el => { el.style.opacity = '1'; });
-            animateCounters();
-        }, 280);
-
-        seg.mini.forEach((m, i) => {
-            const miniVal = document.getElementById(`mini${i+1}Val`);
-            const miniBar = document.getElementById(`mini${i+1}Bar`);
-            miniVal.style.opacity = '0';
-            miniVal.style.transform = 'translateY(-4px)';
-
-            setTimeout(() => {
-                miniVal.innerHTML = `<span class="count-up">${m.value}</span>${seg.suffixes[4 + i] || ''}`;
-                miniVal.style.color = m.color;
-                miniVal.style.opacity = '1';
-                miniVal.style.transform = 'translateY(0)';
-                miniVal.style.transition = 'opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out)';
-                miniBar.style.width = m.pct + '%';
-                miniBar.style.background = m.color;
-            }, 200 + i * 80);
+        panels.forEach(panel => {
+            if (panel.id === 'tab-' + target) {
+                panel.classList.remove('hidden');
+                panel.style.opacity = '0';
+                panel.style.transform = 'translateY(8px)';
+                requestAnimationFrame(() => {
+                    panel.style.transition = 'opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out)';
+                    panel.style.opacity = '1';
+                    panel.style.transform = 'translateY(0)';
+                    animateCounters();
+                });
+            } else {
+                panel.classList.add('hidden');
+            }
         });
     });
 });
 
-/* ── Feature #8: Enhanced FAQ Accordion ── */
+/* ── FAQ ACCORDION ── */
 document.querySelectorAll('.faq-q').forEach(q => {
     q.addEventListener('click', () => {
         const item = q.parentElement;
@@ -1520,7 +1458,7 @@ document.querySelectorAll('.faq-q').forEach(q => {
     });
 });
 
-/* ── Feature #7: 3D Tilt on Dashboard ── */
+/* ── Feature #7: 3D Tilt ── */
 const hero = document.getElementById('hero');
 const heroRight = document.getElementById('heroRight');
 
@@ -1532,19 +1470,16 @@ hero.addEventListener('mousemove', (e) => {
     heroRight.style.transform = `perspective(1200px) rotateX(${y * -8}deg) rotateY(${x * 8}deg) translateY(0)`;
     heroRight.style.boxShadow = `${x * -30}px ${y * -30 + 20}px 80px rgba(34,197,94,0.06), 0 0 1px var(--border)`;
 });
-
 hero.addEventListener('mouseleave', () => {
     heroRight.classList.remove('tilt-active');
     heroRight.style.transform = '';
     heroRight.style.boxShadow = '';
     setTimeout(() => {
         heroRight.style.transition = 'transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out)';
-        setTimeout(() => {
-            heroRight.style.transition = '';
-        }, 600);
+        setTimeout(() => { heroRight.style.transition = ''; }, 600);
     }, 100);
 });
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file