From c437874473b76bc3ab948f691037e6864a4c6f68 Mon Sep 17 00:00:00 2001
From: neo <neo@example.com>
Date: Thu, 25 Jun 2026 18:27:27 +0500
Subject: [PATCH] Premium polish: IBM Carbon icons, staggered animations,
 parallax hover, smooth crossfade dashboard

---
 index_ibm.html | 622 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 438 insertions(+), 184 deletions(-)

diff --git a/index_ibm.html b/index_ibm.html
index 5848323..f074747 100644
--- a/index_ibm.html
+++ b/index_ibm.html
@@ -11,7 +11,7 @@
 <style>
 /* ============================================================
    IBM-INSPIRED DESIGN TOKENS
-   Geometric, grid-visible, data-as-visual
+   Geometric · Data-as-visual · Premium polish
    ============================================================ */
 :root {
     --bg: #050507;
@@ -24,14 +24,18 @@
     --text-dim: #3f3f46;
     --accent: #22c55e;
     --accent-dim: rgba(34,197,94,0.08);
+    --accent-glow: rgba(34,197,94,0.25);
     --blue: #3b82f6;
     --blue-dim: rgba(59,130,246,0.08);
     --amber: #f59e0b;
+    --amber-dim: rgba(245,158,11,0.08);
     --red: #ef4444;
     --red-dim: rgba(239,68,68,0.08);
     --font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
     --mono: 'IBM Plex Mono', 'SF Mono', monospace;
     --grid: 8px;
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -43,16 +47,23 @@ body {
 }
 
 /* ============================================================
-   GRID OVERLAY — visible structure, IBM hallmark
+   PREMIUM BACKGROUND — noise + subtle gradient
    ============================================================ */
 body::before {
     content: ''; position: fixed; inset: 0; z-index: 0;
     pointer-events: none;
     background-image:
-        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
     background-size: calc(var(--grid) * 12) calc(var(--grid) * 12);
 }
+body::after {
+    content: ''; position: fixed; inset: 0; z-index: -1;
+    pointer-events: none;
+    background:
+        radial-gradient(ellipse 60% 40% at 50% 20%, rgba(34,197,94,0.03) 0%, transparent 100%),
+        radial-gradient(ellipse 40% 30% at 80% 70%, rgba(59,130,246,0.02) 0%, transparent 100%);
+}
 
 a { text-decoration: none; color: inherit; }
 img { max-width: 100%; display: block; }
@@ -71,66 +82,100 @@ section { padding: 120px 0; position: relative; z-index: 1; }
     letter-spacing: 0.18em; color: var(--accent);
     margin-bottom: 16px; font-weight: 600;
     font-family: var(--mono);
+    display: inline-flex; align-items: center; gap: 10px;
+}
+.section-label::after {
+    content: ''; flex: 0 0 auto; width: 24px; height: 1px;
+    background: var(--accent);
+    opacity: 0.5;
+}
+
+.section-title {
+    font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700;
+    letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
 }
 
 /* ============================================================
-   HEADER — IBM: minimal, structural
+   HEADER
    ============================================================ */
 .header {
     position: fixed; top: 0; left: 0; right: 0; z-index: 100;
     height: 64px; display: flex; align-items: center;
-    background: rgba(5,5,7,0.85); backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border);
+    background: rgba(5,5,7,0.7); backdrop-filter: blur(24px) saturate(180%);
+    border-bottom: 1px solid transparent;
+    transition: all 0.4s var(--ease-out);
+}
+.header.scrolled {
+    background: rgba(5,5,7,0.92);
+    border-bottom-color: var(--border);
 }
 .header .wrap {
     display: flex; align-items: center; justify-content: space-between; width: 100%;
 }
 .logo {
-    font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em;
-    display: flex; align-items: center; gap: 8px;
+    font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em;
+    display: flex; align-items: center; gap: 10px;
 }
 .logo-mark {
-    width: 28px; height: 28px; border-radius: 6px;
+    width: 32px; height: 32px; border-radius: 6px;
     background: var(--accent); display: flex; align-items: center;
     justify-content: center; font-family: var(--mono);
-    font-size: 0.75rem; font-weight: 700; color: #000;
+    font-size: 0.8125rem; font-weight: 700; color: #000;
+    transition: transform 0.3s var(--ease-out);
 }
+.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
 .nav { display: flex; align-items: center; gap: 40px; }
 .nav a {
     font-size: 0.8125rem; color: var(--text-sec);
     transition: color 0.2s; letter-spacing: 0.01em;
+    position: relative;
+}
+.nav a::after {
+    content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
+    height: 1px; background: var(--accent); transition: width 0.3s var(--ease-out);
 }
 .nav a:hover { color: var(--text); }
+.nav a:hover::after { width: 100%; }
 .header-actions { display: flex; align-items: center; gap: 20px; }
 .header-phone {
     font-size: 0.8125rem; color: var(--text-sec); font-family: var(--mono);
+    transition: color 0.2s;
 }
+.header-phone:hover { color: var(--text); }
 
 /* Buttons */
 .btn {
     display: inline-flex; align-items: center; justify-content: center;
     gap: 8px; padding: 10px 20px; border-radius: 4px;
     font-weight: 600; font-size: 0.8125rem; cursor: pointer;
-    border: none; transition: all 0.2s ease; letter-spacing: 0.01em;
+    border: none; transition: all 0.3s var(--ease-out);
+    letter-spacing: 0.01em; position: relative; overflow: hidden;
 }
+.btn::before {
+    content: ''; position: absolute; inset: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+    opacity: 0; transition: opacity 0.3s;
+}
+.btn:hover::before { opacity: 1; }
 .btn-accent {
     background: var(--accent); color: #000; font-family: var(--mono);
 }
-.btn-accent:hover { background: #16a34a; }
+.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);
 }
-.btn-outline:hover { border-color: var(--text); }
+.btn-outline:hover { border-color: var(--text); background: rgba(255,255,255,0.03); }
 .btn-lg { padding: 14px 28px; font-size: 0.875rem; }
 
 /* ============================================================
-   HERO — Split: left content, right data panel
+   HERO
    ============================================================ */
 .hero {
     padding: 160px 0 80px; min-height: 90vh;
     display: flex; align-items: center;
     border-bottom: 1px solid var(--border);
+    position: relative; overflow: hidden;
 }
 .hero-inner {
     display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
@@ -150,7 +195,7 @@ section { padding: 120px 0; position: relative; z-index: 1; }
 }
 
 h1 {
-    font-size: clamp(3rem, 6vw, 5rem); font-weight: 800;
+    font-size: clamp(3rem, 6vw, 5rem); font-weight: 700;
     letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 24px;
 }
 h1 .accent { color: var(--accent); }
@@ -171,7 +216,7 @@ h1 .accent { color: var(--accent); }
     display: flex; flex-direction: column; gap: 4px;
 }
 .hero-meta-value {
-    font-size: 1.75rem; font-weight: 800; font-family: var(--mono);
+    font-size: 1.75rem; font-weight: 700; font-family: var(--mono);
     letter-spacing: -0.03em;
 }
 .hero-meta-label {
@@ -180,21 +225,38 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   RIGHT PANEL — IBM Grid Dashboard
-   Asymmetric bento with visible borders
+   RIGHT PANEL — IBM Grid Dashboard (animated)
    ============================================================ */
 .hero-right {
     border: 1px solid var(--border);
     background: var(--surface);
+    position: relative;
+    animation: dashFloat 6s ease-in-out infinite;
 }
+@keyframes dashFloat {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-6px); }
+}
+
+.dash-glow {
+    position: absolute; top: -40%; left: -20%; width: 140%; height: 140%;
+    background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 50%);
+    pointer-events: none; opacity: 0;
+    transition: opacity 0.6s var(--ease-out);
+}
+.hero-right:hover .dash-glow { opacity: 1; }
+
 .dash-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 16px 24px; border-bottom: 1px solid var(--border);
+    position: relative; z-index: 1;
 }
 .dash-brand {
-    font-size: 0.75rem; font-weight: 600; font-family: var(--mono);
-    letter-spacing: 0.05em;
+    font-size: 0.75rem; font-weight: 500; font-family: var(--mono);
+    letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;
 }
+/* IBM Carbon icon — chart */
+.dash-brand svg { flex-shrink: 0; }
 .dash-status {
     display: flex; align-items: center; gap: 6px;
     font-size: 0.6875rem; color: var(--accent); font-family: var(--mono);
@@ -204,15 +266,14 @@ h1 .accent { color: var(--accent); }
     border-radius: 50%;
     animation: pulse 2s infinite;
 }
-@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
+@keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 0 0 var(--accent-glow); } 50% { opacity:0.3; box-shadow: 0 0 0 4px transparent; } }
 
-.dash-body { display: grid; }
+.dash-body { display: grid; position: relative; z-index: 1; }
 
-/* Row 1: Big number spanning full width */
+/* Row 1: Big number */
 .dash-big {
     grid-column: 1 / -1; padding: 40px 24px;
-    border-bottom: 1px solid var(--border);
-    text-align: right;
+    border-bottom: 1px solid var(--border); text-align: right;
 }
 .dash-big-label {
     font-size: 0.6875rem; color: var(--text-dim);
@@ -220,7 +281,7 @@ h1 .accent { color: var(--accent); }
     margin-bottom: 8px; font-family: var(--mono);
 }
 .dash-big-value {
-    font-size: clamp(3rem, 5vw, 5rem); font-weight: 800;
+    font-size: clamp(3rem, 5vw, 5rem); font-weight: 700;
     font-family: var(--mono); letter-spacing: -0.04em;
     line-height: 1;
 }
@@ -230,6 +291,8 @@ h1 .accent { color: var(--accent); }
     margin-left: 16px; font-size: 0.875rem; color: var(--accent);
     font-weight: 600;
 }
+/* Trend SVG icon */
+.trend-icon { width: 14px; height: 14px; }
 
 /* Row 2: Two columns */
 .dash-cell {
@@ -243,11 +306,13 @@ h1 .accent { color: var(--accent); }
     margin-bottom: 8px; font-family: var(--mono);
 }
 .dash-cell-value {
-    font-size: 1.5rem; font-weight: 700; font-family: var(--mono);
+    font-size: 1.5rem; font-weight: 600; font-family: var(--mono);
     letter-spacing: -0.02em; margin-bottom: 4px;
+    transition: color 0.3s;
 }
 .dash-cell-sub {
     font-size: 0.75rem; color: var(--text-sec);
+    transition: color 0.3s;
 }
 
 /* Row 3: Three mini cards */
@@ -265,8 +330,9 @@ h1 .accent { color: var(--accent); }
     margin-bottom: 8px; font-family: var(--mono);
 }
 .dash-mini-value {
-    font-size: 1.25rem; font-weight: 700; font-family: var(--mono);
+    font-size: 1.25rem; font-weight: 600; font-family: var(--mono);
     margin-bottom: 4px;
+    transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out);
 }
 .dash-mini-bar {
     height: 3px; border-radius: 2px;
@@ -275,7 +341,8 @@ h1 .accent { color: var(--accent); }
 .dash-mini-fill {
     height: 100%; border-radius: 2px;
     background: var(--accent);
-    transition: width 1s ease;
+    width: 0;
+    transition: width 1.2s var(--ease-out), background 0.4s;
 }
 
 /* Segment toggle */
@@ -286,35 +353,41 @@ h1 .accent { color: var(--accent); }
     flex: 1; padding: 10px; border: none; background: transparent;
     font-size: 0.6875rem; color: var(--text-dim); cursor: pointer;
     font-family: var(--mono); text-transform: uppercase;
-    letter-spacing: 0.08em; transition: all 0.2s;
-    border-right: 1px solid var(--border);
+    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);
+}
 
 /* ============================================================
-   SECTION: GRID MANIFESTO
-   Bold statement section
+   MANIFESTO
    ============================================================ */
-.manifesto {
-    padding: 160px 0;
-    border-bottom: 1px solid var(--border);
-}
+.manifesto { padding: 160px 0; border-bottom: 1px solid var(--border); }
 .manifesto-inner {
     max-width: 1280px; margin: 0 auto; padding: 0 32px;
     display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
     align-items: center;
 }
 .manifesto-number {
-    font-size: 8rem; font-weight: 800; font-family: var(--mono);
+    font-size: 8rem; font-weight: 700; font-family: var(--mono);
     letter-spacing: -0.05em; line-height: 0.9;
     color: var(--text-dim);
+    position: relative;
 }
 .manifesto-number .accent { color: var(--accent); }
 .manifesto-content h2 {
-    font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 800;
+    font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 700;
     letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 24px;
 }
 .manifesto-content p {
@@ -323,16 +396,12 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   SECTION: PROBLEMS — IBM card list
+   PROBLEMS — 3-column grid
    ============================================================ */
-.problems-grid {
-    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
-    border: 1px solid var(--border);
-}
 .problem-card {
     padding: 40px 32px; border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
-    transition: all 0.3s; position: relative;
+    position: relative; transition: all 0.4s var(--ease-out);
 }
 .problem-card:nth-child(3n) { border-right: none; }
 .problem-card:nth-last-child(-n+3) { border-bottom: none; }
@@ -351,28 +420,40 @@ h1 .accent { color: var(--accent); }
 .problem-card p {
     font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
 }
+/* IBM Carbon icon — warning triangle */
+.problem-icon {
+    width: 40px; height: 40px; border: 1px solid var(--red-dim);
+    border-radius: 8px; display: flex; align-items: center;
+    justify-content: center; margin-bottom: 20px;
+    color: var(--red); opacity: 0.7;
+    transition: all 0.3s var(--ease-out);
+}
+.problem-card:hover .problem-icon { opacity: 1; transform: scale(1.05); }
 
 /* ============================================================
-   SECTION: SOLUTION — Big feature
+   SOLUTION
    ============================================================ */
 .solution-section { border-bottom: 1px solid var(--border); }
-.solution-grid {
-    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
-    border: 1px solid var(--border);
-}
 .sol-card {
     padding: 48px 32px; border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
-    transition: all 0.3s;
+    transition: all 0.4s var(--ease-out); position: relative;
 }
 .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); }
+.sol-card:hover {
+    background: var(--accent-dim);
+    transform: translateY(-2px);
+}
 .sol-icon {
-    width: 40px; height: 40px; border: 1px solid var(--accent);
-    border-radius: 8px; display: flex; align-items: center;
+    width: 44px; height: 44px; border: 1px solid var(--accent);
+    border-radius: 10px; display: flex; align-items: center;
     justify-content: center; margin-bottom: 24px;
-    font-size: 1.25rem;
+    transition: all 0.3s var(--ease-out);
+}
+.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;
@@ -383,7 +464,7 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   SECTION: COMPARISON — IBM table
+   COMPARISON TABLE
    ============================================================ */
 .comparison { background: var(--surface); border-bottom: 1px solid var(--border); }
 .comp-table {
@@ -391,7 +472,7 @@ h1 .accent { color: var(--accent); }
 }
 .comp-table thead th {
     text-align: left; padding: 20px 24px;
-    font-weight: 600; font-size: 0.6875rem;
+    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);
 }
@@ -399,26 +480,31 @@ h1 .accent { color: var(--accent); }
 .comp-table tbody td {
     padding: 18px 24px; border-bottom: 1px solid var(--border);
     color: var(--text-sec);
+    transition: background 0.2s;
 }
 .comp-table tbody tr:hover td { background: rgba(255,255,255,0.01); }
 .comp-yes { color: var(--accent); font-weight: 600; }
 .comp-no { color: var(--text-dim); }
 
 /* ============================================================
-   SECTION: HOW IT WORKS — IBM Steps
+   HOW IT WORKS — 5 steps
    ============================================================ */
 .steps { border-bottom: 1px solid var(--border); }
 .steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
 .step {
     padding: 32px 24px; border-right: 1px solid var(--border);
-    position: relative;
+    position: relative; transition: all 0.3s var(--ease-out);
 }
 .step:last-child { border-right: none; }
+.step:hover { background: var(--accent-dim); }
 .step-num {
-    font-size: 2.5rem; font-weight: 800; font-family: var(--mono);
+    font-size: 2.5rem; font-weight: 700; font-family: var(--mono);
     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; }
 .step h3 {
     font-size: 1rem; font-weight: 700; margin-bottom: 6px;
     letter-spacing: -0.01em;
@@ -432,13 +518,19 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   SECTION: PRICING — IBM: stark, bold
+   PRICING
    ============================================================ */
 .pricing { border-bottom: 1px solid var(--border); }
 .price-card {
     max-width: 560px; margin: 0 auto;
     border: 1px solid var(--border-strong); padding: 64px 48px;
     text-align: center; position: relative;
+    transition: all 0.4s var(--ease-out);
+}
+.price-card:hover {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent), 0 24px 64px rgba(0,0,0,0.3);
+    transform: translateY(-4px);
 }
 .price-card::before {
     content: ''; position: absolute; top: 0; left: 0; right: 0;
@@ -450,8 +542,9 @@ h1 .accent { color: var(--accent); }
     font-family: var(--mono); margin-bottom: 24px;
 }
 .price-amount {
-    font-size: 4rem; font-weight: 800; font-family: var(--mono);
+    font-size: 4rem; font-weight: 700; font-family: var(--mono);
     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;
@@ -466,9 +559,14 @@ h1 .accent { color: var(--accent); }
     padding: 12px 0; border-bottom: 1px solid var(--border);
     font-size: 0.875rem; color: var(--text-sec);
     display: flex; align-items: flex-start; gap: 12px;
+    transition: color 0.2s;
 }
+.price-features li:hover { color: var(--text); }
 .price-features li::before {
-    content: '→'; color: var(--accent); font-weight: 600; flex-shrink: 0;
+    content: ''; display: inline-block; width: 16px; height: 16px;
+    flex-shrink: 0; margin-top: 2px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 13.5l-5-5 1.4-1.4L6.5 10.7l5.6-5.6 1.4 1.4z' fill='%2322c55e'/%3E%3C/svg%3E");
+    background-size: contain; background-repeat: no-repeat;
 }
 .price-cta { margin-top: 8px; }
 .price-guarantee {
@@ -477,12 +575,10 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   SECTION: FAQ — IBM accordion
+   FAQ
    ============================================================ */
 .faq-list { max-width: 800px; margin: 0 auto; }
-.faq-item {
-    border-bottom: 1px solid var(--border);
-}
+.faq-item { border-bottom: 1px solid var(--border); }
 .faq-q {
     display: flex; align-items: center; justify-content: space-between;
     padding: 24px 0; cursor: pointer; font-size: 1rem;
@@ -492,12 +588,12 @@ h1 .accent { color: var(--accent); }
 .faq-q:hover { color: var(--accent); }
 .faq-q::after {
     content: '+'; font-family: var(--mono); font-size: 1.25rem;
-    color: var(--text-dim); transition: transform 0.3s; flex-shrink: 0;
+    color: var(--text-dim); transition: transform 0.3s var(--ease-out); flex-shrink: 0;
     margin-left: 16px;
 }
 .faq-item.open .faq-q::after { transform: rotate(45deg); }
 .faq-a {
-    max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
+    max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out);
 }
 .faq-item.open .faq-a { max-height: 400px; }
 .faq-a-inner {
@@ -533,13 +629,36 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   REVEAL ANIMATION
+   REVEAL ANIMATIONS
    ============================================================ */
 .reveal {
-    opacity: 0; transform: translateY(24px);
-    transition: opacity 0.6s ease, transform 0.6s ease;
+    opacity: 0; transform: translateY(28px);
+    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
 }
 .reveal.visible { opacity: 1; transform: translateY(0); }
+.reveal-delay-1 { transition-delay: 0.1s; }
+.reveal-delay-2 { transition-delay: 0.2s; }
+.reveal-delay-3 { transition-delay: 0.3s; }
+.reveal-delay-4 { transition-delay: 0.4s; }
+
+/* Hero staggered reveals */
+.hero-left > * {
+    opacity: 0; transform: translateY(20px);
+    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
+}
+.hero-left.loaded > * { opacity: 1; transform: translateY(0); }
+.hero-left.loaded > *:nth-child(1) { transition-delay: 0.1s; }
+.hero-left.loaded > *:nth-child(2) { transition-delay: 0.2s; }
+.hero-left.loaded > *:nth-child(3) { transition-delay: 0.3s; }
+.hero-left.loaded > *:nth-child(4) { transition-delay: 0.4s; }
+.hero-left.loaded > *:nth-child(5) { transition-delay: 0.5s; }
+.hero-left.loaded > *:nth-child(6) { transition-delay: 0.6s; }
+
+.hero-right {
+    opacity: 0; transform: translateX(30px);
+    transition: opacity 0.8s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s;
+}
+.hero-right.loaded { opacity: 1; transform: translateX(0); }
 
 /* ============================================================
    RESPONSIVE
@@ -580,7 +699,7 @@ h1 .accent { color: var(--accent); }
 <!-- ============================================================
      HEADER
      ============================================================ -->
-<header class="header">
+<header class="header" id="header">
     <div class="wrap">
         <div class="logo">
             <div class="logo-mark">R</div>
@@ -603,11 +722,11 @@ h1 .accent { color: var(--accent); }
 <!-- ============================================================
      HERO
      ============================================================ -->
-<section class="hero">
+<section class="hero" id="hero">
     <div class="wrap">
         <div class="hero-inner">
             <!-- LEFT -->
-            <div class="hero-left">
+            <div class="hero-left" id="heroLeft">
                 <div class="hero-label">ДАННЫЕ. БЕЗ ШУМА.</div>
                 <h1>Вы теряете<br>деньги, <span class="accent">не зная</span><br>почему</h1>
                 <p class="hero-sub">
@@ -616,66 +735,89 @@ h1 .accent { color: var(--accent); }
                     Смотрится с телефона каждое утро.
                 </p>
                 <div class="hero-actions">
-                    <a href="#cta" class="btn btn-accent btn-lg">Получить демо за 3 дня</a>
+                    <a href="#cta" class="btn btn-accent btn-lg">
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <path d="M3 8h10M9 4l4 4-4 4"/>
+                        </svg>
+                        Получить демо за 3 дня
+                    </a>
                     <a href="#compare" class="btn btn-outline btn-lg">Сравнить</a>
                 </div>
                 <div class="hero-meta">
                     <div class="hero-meta-item">
-                        <span class="hero-meta-value">3 дня</span>
-                        <span class="hero-meta-label">Срок настройки</span>
+                        <span class="hero-meta-value" data-count="3">3</span>
+                        <span class="hero-meta-label">Дня настройки</span>
                     </div>
                     <div class="hero-meta-item">
-                        <span class="hero-meta-value">10</span>
+                        <span class="hero-meta-value" data-count="10">10</span>
                         <span class="hero-meta-label">Ключевых метрик</span>
                     </div>
                     <div class="hero-meta-item">
-                        <span class="hero-meta-value">5+</span>
-                        <span class="hero-meta-label">Источников данных</span>
+                        <span class="hero-meta-value" data-count="5">5+</span>
+                        <span class="hero-meta-label">Источников</span>
                     </div>
                 </div>
             </div>
 
             <!-- RIGHT — Dashboard Panel -->
-            <div class="hero-right">
+            <div class="hero-right" id="heroRight">
+                <div class="dash-glow"></div>
                 <div class="dash-header">
-                    <span class="dash-brand">ROI24 / DASHBOARD</span>
-                    <span class="dash-status"><span class="dash-dot"></span> LIVE</span>
+                    <span class="dash-brand">
+                        <!-- IBM Carbon icon — analytics/chart -->
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
+                            <rect x="2" y="8" width="3" height="6" rx="0.5"/>
+                            <rect x="6.5" y="5" width="3" height="9" rx="0.5"/>
+                            <rect x="11" y="2" width="3" height="12" rx="0.5"/>
+                        </svg>
+                        ROI24 / DASHBOARD
+                    </span>
+                    <span class="dash-status">
+                        <span class="dash-dot"></span> LIVE
+                    </span>
                 </div>
                 <div class="dash-body">
                     <!-- Big number row -->
                     <div class="dash-big">
                         <div class="dash-big-label">Выручка за 30 дней</div>
-                        <div class="dash-big-value">
-                            12.4М <span class="accent">₽</span><span class="dash-big-trend">↑ 12%</span>
+                        <div class="dash-big-value" id="bigValue">
+                            12.4М <span class="accent">₽</span>
+                            <span class="dash-big-trend">
+                                <!-- IBM Carbon icon — arrow up -->
+                                <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>
                     <!-- Two columns -->
                     <div class="dash-cell">
                         <div class="dash-cell-label">Маржа</div>
-                        <div class="dash-cell-value" style="color: var(--accent);">23.4%</div>
-                        <div class="dash-cell-sub">↑ 2.1% к прошлому месяцу</div>
+                        <div class="dash-cell-value" style="color: var(--accent);" id="marginValue">23.4%</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">4.8М ₽</div>
-                        <div class="dash-cell-sub">Дебиторка: 1.2М</div>
+                        <div class="dash-cell-value" id="cashValue">4.8М ₽</div>
+                        <div class="dash-cell-sub" id="cashNote">Дебиторка: 1.2М</div>
                     </div>
                     <!-- Tri row -->
-                    <div class="dash-tri">
+                    <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);">2.8%</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 28%;"></div></div>
+                            <div class="dash-mini-value" style="color: var(--blue);" id="mini1Val">2.8%</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);">890₽</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 45%; background: var(--amber);"></div></div>
+                            <div class="dash-mini-value" style="color: var(--amber);" id="mini2Val">890₽</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);">91%</div>
-                            <div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 91%;"></div></div>
+                            <div class="dash-mini-value" style="color: var(--accent);" id="mini3Val">91%</div>
+                            <div class="dash-mini-bar"><div class="dash-mini-fill" id="mini3Bar" style="width:0%; background: var(--accent);"></div></div>
                         </div>
                     </div>
                 </div>
@@ -695,10 +837,10 @@ h1 .accent { color: var(--accent); }
      ============================================================ -->
 <section class="manifesto">
     <div class="manifesto-inner">
-        <div class="manifesto-number">
+        <div class="manifesto-number reveal">
             70<span class="accent">%</span>
         </div>
-        <div class="manifesto-content">
+        <div class="manifesto-content reveal reveal-delay-2">
             <div class="section-label">Проблема</div>
             <h2>Компаний не видят<br>деньги в кассе<br>до конца месяца</h2>
             <p>
@@ -715,26 +857,47 @@ h1 .accent { color: var(--accent); }
 </section>
 
 <!-- ============================================================
-     PROBLEMS — 3-column grid
+     PROBLEMS
      ============================================================ -->
 <section>
     <div class="wrap">
-        <div class="section-label">Три боли</div>
-        <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
+        <div class="section-label reveal">Три боли</div>
+        <h2 class="section-title reveal reveal-delay-1">
             Почему вы принимаете решения в темноте
         </h2>
-        <div class="problems-grid">
-            <div class="problem-card reveal">
+        <div class="problems-grid" style="margin-top: 48px;">
+            <div class="problem-card reveal reveal-delay-1">
+                <div class="problem-icon">
+                    <!-- IBM Carbon icon — disconnect -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                        <circle cx="4" cy="8" r="2"/><circle cx="12" cy="8" r="2"/>
+                        <path d="M6 7l2-2M10 9l2-2"/>
+                    </svg>
+                </div>
                 <div class="problem-num">01</div>
                 <h3>Данные разбросаны</h3>
                 <p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
             </div>
-            <div class="problem-card reveal">
+            <div class="problem-card reveal reveal-delay-2">
+                <div class="problem-icon">
+                    <!-- IBM Carbon icon — eye off -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                        <path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
+                        <circle cx="8" cy="8" r="2"/><path d="M2 2l12 12"/>
+                    </svg>
+                </div>
                 <div class="problem-num">02</div>
                 <h3>Не видно, где теряете</h3>
                 <p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
             </div>
-            <div class="problem-card reveal">
+            <div class="problem-card reveal reveal-delay-3">
+                <div class="problem-icon">
+                    <!-- IBM Carbon icon — clock -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                        <circle cx="8" cy="8" r="6"/>
+                        <path d="M8 4v4l3 2"/>
+                    </svg>
+                </div>
                 <div class="problem-num">03</div>
                 <h3>Отчёты приходят поздно</h3>
                 <p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.</p>
@@ -748,23 +911,40 @@ h1 .accent { color: var(--accent); }
      ============================================================ -->
 <section id="solution" class="solution-section">
     <div class="wrap">
-        <div class="section-label">Решение</div>
-        <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
+        <div class="section-label reveal">Решение</div>
+        <h2 class="section-title reveal reveal-delay-1">
             Один дашборд. Все ключевые цифры.
         </h2>
         <div class="solution-grid">
-            <div class="sol-card reveal">
-                <div class="sol-icon">⚡</div>
+            <div class="sol-card reveal reveal-delay-1">
+                <div class="sol-icon">
+                    <!-- IBM Carbon icon — lightning bolt -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
+                        <path d="M9 2L4 8.5h4l-1 5.5L12 7.5H8L9 2z"/>
+                    </svg>
+                </div>
                 <h3>Живые данные</h3>
                 <p>Обновляются автоматически — 1С, CRM, банки, реклама. Вы не делаете ничего. Данные сами приходят в дашборд каждый час.</p>
             </div>
-            <div class="sol-card reveal">
-                <div class="sol-icon">👁</div>
+            <div class="sol-card reveal reveal-delay-2">
+                <div class="sol-icon">
+                    <!-- IBM Carbon icon — eye -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
+                        <path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
+                        <circle cx="8" cy="8" r="2"/>
+                    </svg>
+                </div>
                 <h3>Видно где теряете</h3>
                 <p>Цветовые индикаторы: зелёный, жёлтый, красный. Три секунды — и вы видите, какая метрика вышла за пределы нормы.</p>
             </div>
-            <div class="sol-card reveal">
-                <div class="sol-icon">📱</div>
+            <div class="sol-card reveal reveal-delay-3">
+                <div class="sol-icon">
+                    <!-- IBM Carbon icon — smartphone -->
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
+                        <rect x="4" y="2" width="8" height="12" rx="1.5"/>
+                        <line x1="7" y1="11.5" x2="9" y2="11.5"/>
+                    </svg>
+                </div>
                 <h3>С телефона</h3>
                 <p>Собственник смотрит дашборд за завтраком. Не нужно открывать ноутбук, логиниться в 1С, качать Excel.</p>
             </div>
@@ -773,34 +953,34 @@ h1 .accent { color: var(--accent); }
 </section>
 
 <!-- ============================================================
-     HOW IT WORKS — 5 steps
+     HOW IT WORKS
      ============================================================ -->
 <section id="how" class="steps">
     <div class="wrap">
-        <div class="section-label">Процесс</div>
-        <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
+        <div class="section-label reveal">Процесс</div>
+        <h2 class="section-title reveal reveal-delay-1">
             От звонка до дашборда — 3 дня
         </h2>
-        <div class="steps-grid">
-            <div class="step reveal">
+        <div class="steps-grid" style="margin-top: 48px;">
+            <div class="step reveal reveal-delay-1">
                 <div class="step-num">01</div>
                 <h3>Брифинг</h3>
                 <p>30 минут. Звоним, узнаём бизнес. Никаких форм — просто разговор.</p>
                 <div class="step-time">30 мин</div>
             </div>
-            <div class="step reveal">
+            <div class="step reveal reveal-delay-2">
                 <div class="step-num">02</div>
                 <h3>Подключение</h3>
                 <p>1С, CRM, онлайн-банки, реклама. Вы не участвуете.</p>
                 <div class="step-time">1–2 дня</div>
             </div>
-            <div class="step reveal">
+            <div class="step reveal reveal-delay-3">
                 <div class="step-num">03</div>
                 <h3>Настройка</h3>
                 <p>Дашборд под ваши 10 метрик. Не 50 — только реальное.</p>
                 <div class="step-time">1–2 дня</div>
             </div>
-            <div class="step reveal">
+            <div class="step reveal reveal-delay-4">
                 <div class="step-num">04</div>
                 <h3>Демо</h3>
                 <p>Показываем результат. Вносим правки. Вы видите, что работает.</p>
@@ -809,7 +989,7 @@ h1 .accent { color: var(--accent); }
             <div class="step reveal">
                 <div class="step-num">05</div>
                 <h3>Запуск</h3>
-                <p>Даём доступ, обучаем. Автоматическое обновление включено.</p>
+                <p>Даём доступ, обучаем. Авто-обновление включено.</p>
                 <div class="step-time">День запуска</div>
             </div>
         </div>
@@ -821,11 +1001,11 @@ h1 .accent { color: var(--accent); }
      ============================================================ -->
 <section id="compare" class="comparison">
     <div class="wrap">
-        <div class="section-label">Сравнение</div>
-        <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
+        <div class="section-label reveal">Сравнение</div>
+        <h2 class="section-title reveal reveal-delay-1">
             Без ROI24 / С ROI24
         </h2>
-        <table class="comp-table">
+        <table class="comp-table reveal reveal-delay-2" style="margin-top: 48px;">
             <thead>
                 <tr>
                     <th>Параметр</th>
@@ -885,8 +1065,8 @@ h1 .accent { color: var(--accent); }
 <section id="pricing" class="pricing">
     <div class="wrap">
         <div class="text-center" style="margin-bottom: 48px;">
-            <div class="section-label">Тариф</div>
-            <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em;">
+            <div class="section-label reveal" style="justify-content:center;">Тариф</div>
+            <h2 class="section-title reveal reveal-delay-1" style="margin:0 auto;">
                 Один тариф. Всё включено.
             </h2>
         </div>
@@ -915,34 +1095,34 @@ h1 .accent { color: var(--accent); }
      ============================================================ -->
 <section id="faq">
     <div class="wrap">
-        <div class="section-label">Вопросы</div>
-        <h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
+        <div class="section-label reveal">Вопросы</div>
+        <h2 class="section-title reveal reveal-delay-1" style="margin-bottom: 48px;">
             Возражения
         </h2>
         <div class="faq-list">
-            <div class="faq-item">
+            <div class="faq-item reveal reveal-delay-1">
                 <div class="faq-q">Почему 100К? Это же дорого.</div>
                 <div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес.</div></div>
             </div>
-            <div class="faq-item">
+            <div class="faq-item reveal reveal-delay-2">
                 <div class="faq-q">А если не подойдёт?</div>
                 <div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.</div></div>
             </div>
-            <div class="faq-item">
+            <div class="faq-item reveal reveal-delay-3">
                 <div class="faq-q">Сколько времени займёт настройка?</div>
                 <div class="faq-a"><div class="faq-a-inner">3–5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.</div></div>
             </div>
-            <div class="faq-item">
+            <div class="faq-item reveal reveal-delay-4">
                 <div class="faq-q">А какие данные можно подключить?</div>
                 <div class="faq-a"><div class="faq-a-inner">1С (любая конфигурация), amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки (Сбер, Тинькофф, Альфа), кассы (1С-Рарус, iiko, r_keeper). Если не знаете — напишите, скажем.</div></div>
             </div>
-            <div class="faq-item">
+            <div class="faq-item reveal">
                 <div class="faq-q">Можно проще? Дешевле?</div>
                 <div class="faq-a"><div class="faq-a-inner">Нет. Потому что "проще" = "не работает". 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
             </div>
-            <div class="faq-item">
+            <div class="faq-item reveal reveal-delay-1">
                 <div class="faq-q">Поддержка после запуска?</div>
-                <div class="faq-a"><div class="faq-a-inner">30 дней включено — правки, донастройка, ответы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборт продолжает работать.</div></div>
+                <div class="faq-a"><div class="faq-a-inner">30 дней включено — правки, донастройка, ответы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборд продолжает работать.</div></div>
             </div>
         </div>
     </div>
@@ -990,43 +1170,57 @@ h1 .accent { color: var(--accent); }
 
 <script>
 /* ============================================================
-   INTERSECTION OBSERVER — reveal on scroll
+   HEADER SCROLL STATE
    ============================================================ */
-const reveals = document.querySelectorAll('.reveal');
-const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry, i) => {
-        if (entry.isIntersecting) {
-            setTimeout(() => {
-                entry.target.classList.add('visible');
-            }, i * 60);
-            observer.unobserve(entry.target);
-        }
-    });
-}, { threshold: 0.1 });
-
-reveals.forEach(el => observer.observe(el));
+const header = document.getElementById('header');
+let lastScroll = 0;
+window.addEventListener('scroll', () => {
+    header.classList.toggle('scrolled', window.scrollY > 40);
+}, { passive: true });
 
 /* ============================================================
-   FAQ ACCORDION
+   HERO ENTRANCE ANIMATION
    ============================================================ */
-document.querySelectorAll('.faq-q').forEach(q => {
-    q.addEventListener('click', () => {
-        const item = q.parentElement;
-        const wasOpen = item.classList.contains('open');
-        // Close all
-        document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
-        // Toggle current
-        if (!wasOpen) item.classList.add('open');
-    });
+window.addEventListener('load', () => {
+    document.getElementById('heroLeft').classList.add('loaded');
+    document.getElementById('heroRight').classList.add('loaded');
+
+    // Animate dashboard bars after entrance
+    setTimeout(() => {
+        const bars = document.querySelectorAll('.dash-mini-fill');
+        bars.forEach(bar => {
+            const width = bar.style.width.replace('%','') || bar.dataset.width;
+            bar.style.width = '0';
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    bar.style.width = width + '%';
+                });
+            });
+        });
+    }, 800);
 });
 
 /* ============================================================
-   DASHBOARD SEGMENT TOGGLE
+   SCROLL REVEAL (IntersectionObserver)
+   ============================================================ */
+const revealObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            revealObserver.unobserve(entry.target);
+        }
+    });
+}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
+
+document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
+
+/* ============================================================
+   DASHBOARD SEGMENT TOGGLE — animated crossfade
    ============================================================ */
 const SEGMENTS = {
     ecom: {
         revenue: '12.4М', revenueTrend: '+12%', revenueAccent: true,
-        margin: '23.4%', marginNote: '↑ 2.1%',
+        margin: '23.4%', marginNote: '↑ 2.1% к прошлому месяцу',
         cash: '4.8М ₽', cashNote: 'Дебиторка: 1.2М',
         mini: [
             { label: 'Конверсия', value: '2.8%', pct: 28, color: 'var(--blue)' },
@@ -1068,36 +1262,96 @@ toggleBtns.forEach(btn => {
         toggleBtns.forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
 
-        // Update big number
-        const bigValue = document.querySelector('.dash-big-value');
-        bigValue.innerHTML = `${seg.revenue} <span class="accent">₽</span><span class="dash-big-trend">${seg.revenueTrend}</span>`;
+        // Animate big value — crossfade
+        const bigValue = document.getElementById('bigValue');
+        bigValue.style.opacity = '0';
+        bigValue.style.transform = 'translateY(-8px)';
+        bigValue.style.transition = 'opacity 0.3s, transform 0.3s';
 
-        // Update cells
-        document.querySelectorAll('.dash-cell-value')[0].textContent = seg.margin;
-        document.querySelectorAll('.dash-cell-value')[0].style.color = 'var(--accent)';
-        document.querySelectorAll('.dash-cell-sub')[0].textContent = seg.marginNote;
-        document.querySelectorAll('.dash-cell-value')[1].textContent = seg.cash;
-        document.querySelectorAll('.dash-cell-sub')[1].textContent = seg.cashNote;
+        setTimeout(() => {
+            bigValue.innerHTML = `${seg.revenue} <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>${seg.revenueTrend}</span>`;
+            bigValue.style.opacity = '1';
+            bigValue.style.transform = 'translateY(0)';
+        }, 300);
 
-        // Update mini cards
+        // Update cells with crossfade
+        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.textContent = seg.margin;
+            marginNote.textContent = seg.marginNote;
+            cashValue.textContent = seg.cash;
+            cashNote.textContent = seg.cashNote;
+            [marginValue, marginNote, cashValue, cashNote].forEach(el => {
+                el.style.opacity = '1';
+            });
+        }, 280);
+
+        // Update mini cards with animated bars
         const minis = document.querySelectorAll('.dash-mini');
         seg.mini.forEach((m, i) => {
-            minis[i].querySelector('.dash-mini-label').textContent = m.label;
-            minis[i].querySelector('.dash-mini-value').textContent = m.value;
-            minis[i].querySelector('.dash-mini-value').style.color = m.color;
-            minis[i].querySelector('.dash-mini-fill').style.width = m.pct + '%';
-            minis[i].querySelector('.dash-mini-fill').style.background = m.color;
+            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.textContent = m.value;
+                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);
         });
     });
 });
 
 /* ============================================================
-   HEADER SCROLL STATE
+   FAQ ACCORDION
    ============================================================ */
-const header = document.querySelector('.header');
-window.addEventListener('scroll', () => {
-    header.classList.toggle('scrolled', window.scrollY > 20);
-}, { passive: true });
+document.querySelectorAll('.faq-q').forEach(q => {
+    q.addEventListener('click', () => {
+        const item = q.parentElement;
+        const wasOpen = item.classList.contains('open');
+        document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
+        if (!wasOpen) item.classList.add('open');
+    });
+});
+
+/* ============================================================
+   HERO PARALLAX — subtle mouse tracking
+   ============================================================ */
+const hero = document.getElementById('hero');
+const heroRight = document.getElementById('heroRight');
+
+hero.addEventListener('mousemove', (e) => {
+    const rect = hero.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width - 0.5;
+    const y = (e.clientY - rect.top) / rect.height - 0.5;
+
+    // Subtle shift on dashboard panel
+    heroRight.style.transform = `translateY(${-6 + y * -4}px) perspective(800px) rotateY(${x * 1.5}deg) rotateX(${y * 1.5}deg)`;
+});
+
+hero.addEventListener('mouseleave', () => {
+    heroRight.style.transform = 'translateY(0) perspective(800px) rotateY(0) rotateX(0)';
+    heroRight.style.transition = 'transform 0.6s var(--ease-out)';
+    setTimeout(() => {
+        heroRight.style.transition = 'transform 0.1s, opacity 0.8s var(--ease-out) 0.3s';
+    }, 600);
+});
 </script>
 
 </body>