From 94c11f398c56d1d9ee26cc7f83ec8a861c03dc6b Mon Sep 17 00:00:00 2001
From: arys <abiev@gmail.com>
Date: Wed, 22 Apr 2026 18:23:41 +0500
Subject: [PATCH] fix

---
 .qwen/settings.json                           |    3 +-
 extract-css.js                                |   20 +
 src/App.vue                                   |   16 +-
 src/assets/kai-v4.css                         | 1187 +++++----
 src/assets/marketing-lists-kit.css            | 1033 ++++++++
 src/assets/marketing-theme.css                |  288 +++
 .../marketing/MarketingBriefWizardV3.vue      |  847 +++----
 .../marketing/dashboard-v3/v4/InfoTooltip.vue |  167 ++
 .../dashboard-v3/v4/SectionWrapper.vue        |  132 +-
 .../dashboard-v3/v4/V4Behavioral.vue          |  416 ++--
 .../marketing/dashboard-v3/v4/V4Cii.vue       |  340 ++-
 .../dashboard-v3/v4/V4Competitors.vue         |  794 +++---
 .../dashboard-v3/v4/V4Conclusions.vue         |  217 +-
 .../marketing/dashboard-v3/v4/V4Content.vue   |  421 ++--
 .../marketing/dashboard-v3/v4/V4Demand.vue    |  495 ++--
 .../marketing/dashboard-v3/v4/V4Executive.vue |  356 ++-
 .../marketing/dashboard-v3/v4/V4Geo.vue       |   65 +-
 .../marketing/dashboard-v3/v4/V4Header.vue    |  491 ++--
 .../marketing/dashboard-v3/v4/V4Landscape.vue |  389 +--
 .../dashboard-v3/v4/V4Positioning.vue         |  450 ++--
 .../marketing/dashboard-v3/v4/V4Rationale.vue |  328 +--
 .../dashboard-v3/v4/V4Reputation.vue          |  435 ++--
 .../marketing/dashboard-v3/v4/V4SideNav.vue   |  579 +++--
 .../marketing/premium/Premium3DVisual.vue     |   46 +
 .../marketing/premium/PremiumFunnel.vue       |   33 +
 .../marketing/premium/PremiumHeatmap.vue      |   28 +
 .../marketing/premium/PremiumMetricCard.vue   |   26 +
 .../marketing/premium/PremiumSectionShell.vue |   34 +
 .../marketing/wizard/CheckboxCardsField.vue   |   26 +-
 .../wizard/CheckboxCardsLimitedField.vue      |   27 +-
 .../marketing/wizard/RadioGroupField.vue      |   27 +-
 .../marketing/wizard/StepSection.vue          |   10 +-
 src/composables/useCountUp.js                 |   47 +
 src/composables/useScrollReveal.js            |   28 +
 src/main.js                                   |    2 +
 src/types/campaign.types.ts                   |   98 +
 .../pages/marketing/MarketingAnalysisV3.vue   |  718 ++++--
 .../marketing/MarketingAnalysisV3List.vue     | 1005 ++------
 src/views/pages/marketing/MarketingMain.vue   | 1188 ++++++---
 .../pages/marketing/MarketingStrategyV3.vue   | 2150 ++++++++---------
 .../marketing/MarketingStrategyV3List.vue     |  626 ++---
 .../targetologist/CampaignInsightsDetail.vue  |   11 +
 .../targetologist/CampaignWizard.vue          |    2 +-
 .../targetologist/TargetologistDashboard.vue  |  647 ++---
 .../components/CampaignPrediction.vue         | 1159 ++++-----
 .../growth-center/AutomationRulesCard.vue     |  200 ++
 .../growth-center/FunnelStrategyBoard.vue     |  160 ++
 .../growth-center/HypothesisMatrixBoard.vue   |  328 +++
 .../growth-center/LandingPageAuditCard.vue    |  232 ++
 .../growth-center/RiskAnalysisCard.vue        |  163 ++
 .../growth-center/ScalingPlanCard.vue         |  111 +
 .../growth-center/StrategicOverviewCard.vue   |  172 ++
 .../TargetingExecutiveHeader.vue              |  229 ++
 .../growth-center/TargetingGrowthCenter.vue   |  149 ++
 .../growth-center/TechnicalHealthCard.vue     |  196 ++
 .../growth-center/targetingGrowthAdapters.ts  |  317 +++
 update-analysis.js                            |  221 ++
 update-lists.js                               |  155 ++
 update-prediction.js                          |  251 ++
 update-strategy.js                            |  607 +++++
 update-targetologist.js                       |  265 ++
 61 files changed, 13238 insertions(+), 7925 deletions(-)
 create mode 100644 extract-css.js
 create mode 100644 src/assets/marketing-lists-kit.css
 create mode 100644 src/assets/marketing-theme.css
 create mode 100644 src/components/marketing/dashboard-v3/v4/InfoTooltip.vue
 create mode 100644 src/components/marketing/premium/Premium3DVisual.vue
 create mode 100644 src/components/marketing/premium/PremiumFunnel.vue
 create mode 100644 src/components/marketing/premium/PremiumHeatmap.vue
 create mode 100644 src/components/marketing/premium/PremiumMetricCard.vue
 create mode 100644 src/components/marketing/premium/PremiumSectionShell.vue
 create mode 100644 src/composables/useCountUp.js
 create mode 100644 src/composables/useScrollReveal.js
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/AutomationRulesCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/FunnelStrategyBoard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/HypothesisMatrixBoard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/LandingPageAuditCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/RiskAnalysisCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/ScalingPlanCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/StrategicOverviewCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/TargetingExecutiveHeader.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/TargetingGrowthCenter.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/TechnicalHealthCard.vue
 create mode 100644 src/views/pages/marketing/targetologist/components/growth-center/targetingGrowthAdapters.ts
 create mode 100644 update-analysis.js
 create mode 100644 update-lists.js
 create mode 100644 update-prediction.js
 create mode 100644 update-strategy.js
 create mode 100644 update-targetologist.js

diff --git a/.qwen/settings.json b/.qwen/settings.json
index f3907f1..1efafae 100644
--- a/.qwen/settings.json
+++ b/.qwen/settings.json
@@ -1,7 +1,8 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npm run *)"
+      "Bash(npm run *)",
+      "Bash(findstr *)"
     ]
   },
   "$version": 3
diff --git a/extract-css.js b/extract-css.js
new file mode 100644
index 0000000..f1f1c5e
--- /dev/null
+++ b/extract-css.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+
+const files = [
+    'src/views/pages/marketing/targetologist/TargetologistDashboard.vue',
+    'src/views/pages/marketing/targetologist/CampaignWizard.vue',
+    'src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue'
+];
+
+let output = '';
+
+files.forEach(f => {
+    const code = fs.readFileSync(f, 'utf8');
+    const start = code.indexOf('<style');
+    if (start > -1) {
+        output += `\n\n--- ${f} ---\n`;
+        output += code.substring(start);
+    }
+});
+
+fs.writeFileSync('.gemini/antigravity/brain/07bc414d-2889-4e3c-b92f-f303bbe851bf/scratch/targetologist-styles.txt', output);
diff --git a/src/App.vue b/src/App.vue
index f2f1b9f..1177049 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,18 @@
-<script setup></script>
+<script setup>
+import { useRoute } from 'vue-router';
+import { onBeforeUnmount, watchEffect } from 'vue';
+
+const route = useRoute();
+
+watchEffect(() => {
+    const isMarketingRoute = route.path.startsWith('/marketing-analysis');
+    document.body.classList.toggle('marketing-theme', isMarketingRoute);
+});
+
+onBeforeUnmount(() => {
+    document.body.classList.remove('marketing-theme');
+});
+</script>
 
 <template>
     <router-view />
diff --git a/src/assets/kai-v4.css b/src/assets/kai-v4.css
index 9aca660..8e981e4 100644
--- a/src/assets/kai-v4.css
+++ b/src/assets/kai-v4.css
@@ -1,464 +1,814 @@
 /* =========================================================
-   KAI v4.0 Dashboard - Light Theme Globals
-   Loaded by MarketingAnalysisV3.vue via <style>
+   KAI v6.0 (Ultra-Premium Designer Edition)
+   Professional-grade design system with 3D effects,
+   glassmorphism, and micro-animations.
    ========================================================= */
-@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Onest:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&display=swap');
 
 :root {
-  --kai-bg: #F5F8FF;
-  --kai-bg2: #EEF4FF;
-  --kai-card: #FFFFFF;
-  --kai-card-hover: #F8FBFF;
-  --kai-border: rgba(45,123,255,0.18);
-  --kai-border-hover: rgba(45,123,255,0.35);
+  /* Core Colors - Refined & Deepened */
+  --kai-bg: #F6F8FC;
+  --kai-bg2: #EEF1F7;
+  --kai-bg-subtle: #F9FAFB;
+
+  /* Ultra-Premium Card Background - Enhanced glassmorphism */
+  --kai-card: rgba(255, 255, 255, 0.97);
+  --kai-card-hover: #FFFFFF;
+  --kai-card-glass: rgba(255, 255, 255, 0.72);
+
+  /* Structural Borders - Subtle & Elegant */
+  --kai-border: rgba(15, 23, 42, 0.06);
+  --kai-border-light: rgba(15, 23, 42, 0.04);
+  --kai-border-hover: rgba(45, 123, 255, 0.28);
+  --kai-border-focus: rgba(45, 123, 255, 0.35);
+
+  /* Vibrant & Deep Accents - 3D Feel Enhanced */
   --kai-blue: #2D7BFF;
+  --kai-blue-light: #5A9BFF;
+  --kai-blue-dark: #1A5FD8;
   --kai-blue-rgb: 45, 123, 255;
+  --kai-blue-gradient: linear-gradient(135deg, #4A90E2 0%, #2D7BFF 50%, #1E60FF 100%);
+  --kai-blue-gradient-soft: linear-gradient(135deg, rgba(45,123,255,0.08) 0%, rgba(45,123,255,0.02) 100%);
+
   --kai-green: #10B981;
+  --kai-green-light: #34D399;
+  --kai-green-dark: #059669;
   --kai-green-rgb: 16, 185, 129;
+  --kai-green-gradient: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
+  --kai-green-gradient-soft: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.02) 100%);
+
   --kai-orange: #F97316;
+  --kai-orange-rgb: 249, 115, 22;
+  --kai-orange-gradient: linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%);
+
   --kai-purple: #8B5CF6;
-  --kai-yellow: #F59E0B;
+  --kai-purple-light: #A78BFA;
+  --kai-purple-rgb: 139, 92, 246;
+  --kai-purple-gradient: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 50%, #7C3AED 100%);
+  --kai-purple-gradient-soft: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.02) 100%);
+
+  --kai-yellow: #EAB308;
+  --kai-yellow-rgb: 234, 179, 8;
+  --kai-yellow-gradient: linear-gradient(135deg, #FACC15 0%, #EAB308 50%, #CA8A04 100%);
+
   --kai-red: #EF4444;
-  --kai-txt: #0F172A;
+  --kai-red-rgb: 239, 68, 68;
+  --kai-red-gradient: linear-gradient(135deg, #F87171 0%, #EF4444 50%, #DC2626 100%);
+
+  --kai-indigo: #6366F1;
+  --kai-indigo-rgb: 99, 102, 241;
+  --kai-indigo-gradient: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
+
+  --kai-teal: #14B8A6;
+  --kai-teal-rgb: 20, 184, 166;
+  --kai-teal-gradient: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 50%, #0D9488 100%);
+
+  /* Pure Typography - Sharper & Clearer */
+  --kai-txt: #0B1120;
   --kai-txt2: #334155;
   --kai-txt3: #64748B;
+  --kai-txt4: #94A3B8;
 
-  /* Font size unification - smaller & professional */
-  --kai-fs-base: 12.5px;
-  --kai-fs-sm: 11px;
-  --kai-fs-xs: 9.5px;
-  --kai-fs-lg: 14px;
+  /* Typographic Scale - Refined for Onest */
+  --kai-fs-base: 13.5px;
+  --kai-fs-sm: 12px;
+  --kai-fs-xs: 10.5px;
+  --kai-fs-xxs: 9.5px;
+  --kai-fs-lg: 15.5px;
   --kai-fs-xl: 18px;
-  --kai-fs-title: 22px;
+  --kai-fs-title: 26px;
+  --kai-fs-hero: 34px;
+
+  /* 3D Shadows & Elevation - Multi-layered for depth */
+  --kai-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.02), 0 1px 2px rgba(15, 23, 42, 0.01);
+  --kai-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.025), 0 2px 4px rgba(15, 23, 42, 0.015);
+  --kai-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.03), 0 4px 6px rgba(15, 23, 42, 0.02);
+  --kai-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.04), 0 10px 10px rgba(15, 23, 42, 0.02);
+  --kai-shadow-float: 0 30px 60px rgba(45, 123, 255, 0.08), 0 15px 30px rgba(15, 23, 42, 0.04);
+  --kai-shadow-float-lg: 0 40px 80px rgba(45, 123, 255, 0.1), 0 20px 40px rgba(15, 23, 42, 0.05);
+  --kai-shadow-glow-blue: 0 0 40px rgba(45, 123, 255, 0.15);
+  --kai-shadow-glow-green: 0 0 40px rgba(16, 185, 129, 0.15);
+  --kai-shadow-glow-purple: 0 0 40px rgba(139, 92, 246, 0.15);
+
+  /* Animations */
+  --kai-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --kai-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --kai-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  --kai-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* Layout */
+/* Layout - Enhanced with subtle mesh gradient */
 .kai-page {
   background: var(--kai-bg);
   background-image:
-    radial-gradient(at 0% 0%, rgba(var(--kai-blue-rgb), 0.09) 0px, transparent 50%),
-    radial-gradient(at 100% 100%, rgba(var(--kai-green-rgb), 0.06) 0px, transparent 50%);
+    radial-gradient(circle at 15% 15%, rgba(var(--kai-blue-rgb), 0.035) 0%, transparent 45%),
+    radial-gradient(circle at 85% 85%, rgba(var(--kai-purple-rgb), 0.03) 0%, transparent 45%),
+    radial-gradient(circle at 50% 50%, rgba(var(--kai-green-rgb), 0.02) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(var(--kai-orange-rgb), 0.015) 0%, transparent 40%);
+  background-attachment: fixed;
   min-height: 100vh;
-  font-family: 'Onest', sans-serif;
   color: var(--kai-txt);
   font-size: var(--kai-fs-base);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
-/* Header */
+/* Subtle animated grain overlay for texture */
+.kai-page::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.4;
+}
+
+/* Base Typographic Reset */
+body, .kai-page, button, input, select, textarea, a, span, div, p, h1, h2, h3, h4, h5, h6 {
+  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+/* Elegant Header - Enhanced glassmorphism */
 .kai-header {
   position: sticky;
   top: 0;
   z-index: 100;
-  height: 64px;
-  background: rgba(255,255,255,0.92);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(45,123,255,0.16);
+  height: 76px;
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 1px 0 var(--kai-border), 0 8px 32px -8px rgba(15, 23, 42, 0.04);
   display: flex;
   align-items: center;
-  padding: 0 32px;
-  gap: 16px;
+  padding: 0 44px;
+  gap: 22px;
+  transition: all var(--kai-transition-base);
 }
 
+.kai-header.scrolled {
+  height: 68px;
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+/* 3D Logo - Enhanced depth and shine */
 .kai-logo {
-  width: 34px;
-  height: 34px;
-  background: linear-gradient(135deg, var(--kai-blue), #1e60ff);
-  border-radius: 9px;
+  width: 42px;
+  height: 42px;
+  background: var(--kai-blue-gradient);
+  border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Unbounded', sans-serif;
   font-weight: 900;
-  font-size: 11px;
+  font-size: 13.5px;
   color: #fff;
   flex-shrink: 0;
-  box-shadow: 0 4px 12px rgba(var(--kai-blue-rgb), 0.3);
+  box-shadow:
+    inset 0 2px 4px rgba(255, 255, 255, 0.45),
+    inset 0 -2px 4px rgba(0, 0, 0, 0.15),
+    0 8px 20px rgba(45, 123, 255, 0.28),
+    0 2px 6px rgba(45, 123, 255, 0.15);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  position: relative;
+  overflow: hidden;
+  transition: all var(--kai-transition-base);
 }
 
-.kai-title-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.kai-logo::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
+  transform: rotate(35deg);
+  transition: all 0.6s ease;
 }
+
+.kai-logo:hover::before {
+  transform: rotate(35deg) translate(30%, 30%);
+}
+
+.kai-logo:hover {
+  transform: translateY(-2px) scale(1.04);
+  box-shadow:
+    inset 0 2px 4px rgba(255, 255, 255, 0.5),
+    inset 0 -2px 4px rgba(0, 0, 0, 0.12),
+    0 12px 28px rgba(45, 123, 255, 0.35),
+    0 4px 10px rgba(45, 123, 255, 0.2);
+}
+
 .kai-title-niche {
-  font-family: 'Unbounded', sans-serif;
-  font-weight: 700;
-  font-size: 11.5px;
+  font-weight: 800;
+  font-size: 15px;
   color: var(--kai-txt);
-  line-height: 1;
-  letter-spacing: -0.01em;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
 }
+
 .kai-title-sub {
-  font-size: 9.5px;
+  font-size: 10.5px;
   font-weight: 600;
-  color: var(--kai-txt3);
+  color: var(--kai-blue);
   margin-top: 3px;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.12em;
 }
 
+/* Status Badges */
 .kai-badge-status {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 9px;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 100px;
+  font-size: 10px;
   font-weight: 800;
-  font-family: 'Unbounded', sans-serif;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 .kai-badge-status.green {
-  background: rgba(0,212,139,0.12);
-  border: 1px solid rgba(0,212,139,0.3);
+  background: linear-gradient(to right, #ecfdf5, #d1fae5);
+  border: 1px solid rgba(16, 185, 129, 0.2);
   color: var(--kai-green);
 }
 .kai-badge-status.yellow {
-  background: rgba(245,158,11,0.12);
-  border: 1px solid rgba(245,158,11,0.3);
-  color: var(--kai-yellow);
-  animation: kai-pulse 1.2s infinite;
+  background: linear-gradient(to right, #fefce8, #fef9c3);
+  border: 1px solid rgba(234, 179, 8, 0.2);
+  color: #c2410c; /* High contrast orange/yellow */
+  animation: kai-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
 }
 
 @keyframes kai-pulse {
-  0%,100% { opacity:1 } 50% { opacity:0.5 }
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
+  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); }
 }
 
+/* Elegant Buttons - Enhanced 3D and micro-interactions */
 .kai-pdf-btn {
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: 1px solid var(--kai-border);
-  background: transparent;
-  color: var(--kai-txt2);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all .2s;
-  font-family: 'Onest', sans-serif;
-  white-space: nowrap;
-}
-.kai-pdf-btn:hover {
-  background: #F0F7FF;
-  border-color: var(--kai-border-hover);
+  padding: 11px 22px;
+  border-radius: 13px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: linear-gradient(145deg, #fff 0%, rgba(255,255,255,0.98) 100%);
   color: var(--kai-txt);
-}
-
-/* Section */
-.kai-section {
-  margin-bottom: 32px;
-  background: var(--kai-card);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
-  overflow: hidden;
-  transition: border-color .3s;
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
-}
-.kai-section:hover {
-  border-color: rgba(45,123,255,0.25);
-}
-.kai-section-header {
-  padding: 16px 24px 14px;
-  border-bottom: 1px solid var(--kai-border);
-  background: linear-gradient(to right, rgba(var(--kai-blue-rgb), 0.08), transparent);
-}
-.kai-section-title {
-  font-family: 'Unbounded', sans-serif;
+  font-size: 13px;
   font-weight: 700;
-  font-size: 14.5px;
-  color: var(--kai-txt);
-  line-height: 1.2;
-  margin: 0;
-  letter-spacing: -0.01em;
-}
-.kai-section-sub {
-  font-size: 10.5px;
-  color: var(--kai-txt2);
-  margin-top: 3px;
-  font-weight: 500;
-}
-.kai-section-badge {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 900;
-  color: var(--kai-blue);
-  opacity: 0.4;
-  margin-top: 1px;
-  letter-spacing: 0.1em;
-}
-.kai-section-body {
-  padding: 24px 28px;
-}
-
-/* KPI Cards */
-.kai-kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-@media (max-width: 1024px) { .kai-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 640px)  { .kai-kpi-grid { grid-template-columns: 1fr; } }
-
-.kai-kpi {
-  background: #FFFFFF;
-  border: 1px solid var(--kai-border);
-  border-radius: 14px;
-  padding: 20px;
-  transition: all .25s;
+  cursor: pointer;
+  transition: all var(--kai-transition-base);
+  box-shadow: var(--kai-shadow-sm), 0 0 0 0.5px rgba(0,0,0,0.02);
+  white-space: nowrap;
   position: relative;
   overflow: hidden;
 }
-.kai-kpi::before {
+
+.kai-pdf-btn::before {
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle at top right, rgba(45,123,255,0.09), transparent 70%);
-  pointer-events: none;
-}
-.kai-kpi:hover {
-  border-color: var(--kai-border-hover);
-  background: var(--kai-card-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 26px rgba(45,123,255,0.12);
-}
-.kai-kpi-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  margin-bottom: 14px;
-}
-.kai-kpi-num {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 28px;
-  font-weight: 900;
-  line-height: 1;
-  margin-bottom: 4px;
-  color: var(--kai-txt);
-  letter-spacing: -0.03em;
-}
-.kai-kpi-label {
-  font-size: 9.5px;
-  font-weight: 700;
-  color: var(--kai-txt2);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 6px;
-}
-.kai-kpi-sub {
-  font-size: 10.5px;
-  color: var(--kai-txt3);
-  line-height: 1.4;
+  background: var(--kai-blue-gradient);
+  opacity: 0;
+  transition: opacity var(--kai-transition-base);
 }
 
-/* Competition level badges */
-.kai-level-low { color: var(--kai-green); background: rgba(0,212,139,0.1); border: 1px solid rgba(0,212,139,0.2); }
-.kai-level-medium { color: var(--kai-yellow); background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); }
-.kai-level-high { color: var(--kai-orange); background: rgba(255,122,45,0.1); border: 1px solid rgba(255,122,45,0.2); }
-.kai-level-vhigh { color: var(--kai-red); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); }
-.kai-level-badge {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.kai-pdf-btn:hover {
+  background: var(--kai-blue-gradient);
+  color: #fff;
+  border-color: transparent;
+  transform: translateY(-2.5px);
+  box-shadow: 0 10px 24px rgba(45, 123, 255, 0.28), 0 4px 10px rgba(45, 123, 255, 0.15);
 }
 
-.kai-er-green { color: var(--kai-green); }
-.kai-er-yellow { color: var(--kai-yellow); }
-.kai-er-red { color: var(--kai-red); }
-
-/* Stars */
-.kai-stars { color: var(--kai-yellow); font-size: 16px; letter-spacing: 2px; }
-
-/* Heatmap bars */
-.kai-progress-track { background: rgba(45,123,255,0.10); border-radius: 999px; height: 6px; overflow: hidden; }
-.kai-progress-fill  { height: 100%; border-radius: 999px; transition: width 1s ease-out; background: var(--kai-blue); }
-
-/* Info badge strip */
-.kai-insight-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 20px;
-}
-.kai-insight-tag {
-  padding: 5px 14px;
-  border-radius: 999px;
-  background: rgba(45,123,255,0.08);
-  border: 1px solid rgba(45,123,255,0.2);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--kai-txt2);
+.kai-pdf-btn:hover::before {
+  opacity: 1;
 }
 
-/* Gauge SVG */
-.kai-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-
-/* Table */
-.kai-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-.kai-table th {
-  padding: 10px 14px;
-  text-align: left;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--kai-txt3);
-  border-bottom: 1px solid var(--kai-border);
-  cursor: pointer;
-  white-space: nowrap;
-  user-select: none;
-}
-.kai-table th:hover { color: var(--kai-txt2); }
-.kai-table td {
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--kai-border);
-  color: var(--kai-txt);
-  vertical-align: middle;
-}
-.kai-table tr:last-child td { border-bottom: none; }
-.kai-table tr:hover td { background: rgba(45,123,255,0.04); }
-.kai-table .sorted-arrow { margin-left: 4px; }
-
-.kai-plat-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.kai-pdf-btn > * {
+  position: relative;
+  z-index: 1;
 }
 
-/* Competitor expander */
-.kai-expand-btn { background: none; border: none; cursor: pointer; color: var(--kai-txt2); padding: 4px; border-radius: 6px; transition: all .2s; display: flex; align-items: center; }
-.kai-expand-btn:hover { background: rgba(45,123,255,0.1); color: var(--kai-blue); }
-.kai-expand-row { background: rgba(45,123,255,0.04); border-top: 1px solid var(--kai-border); }
-.kai-expand-inner { padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-@media (max-width: 640px) { .kai-expand-inner { grid-template-columns: 1fr; } }
-
-.kai-sw-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
-.kai-sw-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
-.kai-sw-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--kai-txt2); line-height: 1.4; }
-.kai-sw-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
-.kai-sw-dot.green { background: var(--kai-green); }
-.kai-sw-dot.red { background: var(--kai-red); }
-
-/* CII Ring */
-.kai-cii-ring-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
-.kai-cii-num { font-family: 'Unbounded', sans-serif; font-size: 56px; font-weight: 900; line-height: 1; }
-.kai-cii-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
-.kai-cii-desc { font-size: 13px; color: var(--kai-txt2); margin-top: 10px; max-width: 260px; line-height: 1.5; }
-
-/* Radar chart */
-.kai-radar-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
-.kai-radar-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--kai-txt2); font-weight: 600; }
-.kai-radar-dot { width: 8px; height: 8px; border-radius: 50%; }
-
-/* Gap table */
-.kai-gap-table thead th { background: rgba(45,123,255,0.06); }
-.kai-prio-badge {
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  display: inline-block;
-}
-.kai-prio-crit { background: rgba(239,68,68,0.15); color: var(--kai-red); }
-.kai-prio-imp  { background: rgba(255,122,45,0.15); color: var(--kai-orange); }
-.kai-prio-need { background: rgba(245,158,11,0.15); color: var(--kai-yellow); }
-.kai-prio-ahead{ background: rgba(0,212,139,0.15); color: var(--kai-green); }
-
-/* Conclusions */
-.kai-conc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
-@media (max-width: 1024px) { .kai-conc-grid { grid-template-columns: 1fr; } }
-.kai-conc-card {
-  background: rgba(45,123,255,0.03);
-  border: 1px solid rgba(45,123,255,0.14);
-  border-radius: 14px;
-  padding: 18px 20px;
-  cursor: default;
-  transition: all .3s;
-}
-.kai-conc-card:hover { border-color: var(--kai-border-hover); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(45,123,255,0.1); }
-.kai-conc-icon { font-size: 20px; margin-bottom: 10px; }
-.kai-conc-text { font-size: 13px; color: var(--kai-txt); line-height: 1.6; }
-
-/* SMM Rationale */
-.kai-rationale {
-  background: linear-gradient(135deg, rgba(45,123,255,0.06) 0%, rgba(16,185,129,0.03) 100%);
-  border-left: 4px solid var(--kai-blue);
-  border: 1px solid rgba(45,123,255,0.18);
-  border-radius: 16px;
-  padding: 32px;
-}
-.kai-rationale-text { font-size: 14px; color: var(--kai-txt); line-height: 1.9; white-space: pre-line; font-weight: 500; }
-.kai-cta-box {
-  margin-top: 28px;
-  border: 1px solid rgba(45,123,255,0.3);
-  background: rgba(45,123,255,0.06);
-  border-radius: 14px;
-  padding: 28px;
-}
+/* CTA Button - Ultra Premium */
 .kai-cta-btn {
-  margin-top: 20px;
+  margin-top: 24px;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 14px 32px;
-  background: var(--kai-blue);
+  gap: 11px;
+  padding: 16px 38px;
+  background: var(--kai-blue-gradient);
   color: #fff;
   border: none;
-  border-radius: 10px;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
+  border-radius: 15px;
+  font-size: 15px;
+  font-weight: 800;
   cursor: pointer;
-  transition: all .25s;
+  transition: all var(--kai-transition-slow);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.25),
+    inset 0 -2px 4px rgba(0,0,0,0.08),
+    0 10px 28px rgba(45, 123, 255, 0.32),
+    0 4px 12px rgba(45, 123, 255, 0.18);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
+  position: relative;
+  overflow: hidden;
 }
-.kai-cta-btn:hover { background: #1a6bff; transform: scale(1.02); box-shadow: 0 0 24px rgba(45,123,255,0.4); }
 
-/* Sidebar nav */
-.kai-sidenav {
-  position: fixed;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+/* Shimmer effect on hover */
+.kai-cta-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: left 0.6s ease;
+}
+
+.kai-cta-btn:hover::before {
+  left: 100%;
+}
+
+.kai-cta-btn:hover {
+  transform: translateY(-3px) scale(1.025);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.3),
+    inset 0 -2px 4px rgba(0,0,0,0.06),
+    0 16px 40px rgba(45, 123, 255, 0.4),
+    0 6px 16px rgba(45, 123, 255, 0.25);
+}
+
+.kai-cta-btn:active {
+  transform: translateY(-1px) scale(0.99);
+}
+
+/* Secondary Button */
+.kai-btn-secondary {
+  background: transparent;
+  border: 1px solid var(--kai-border);
+  color: var(--kai-txt2);
+  padding: 11px 22px;
+  border-radius: 13px;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: all var(--kai-transition-base);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.kai-btn-secondary::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--kai-blue-gradient-soft);
+  opacity: 0;
+  transition: opacity var(--kai-transition-base);
+}
+
+.kai-btn-secondary:hover {
+  background: rgba(255,255,255,0.9);
+  border-color: var(--kai-border-hover);
+  color: var(--kai-blue);
+  box-shadow: var(--kai-shadow-md);
+  transform: translateY(-1.5px);
+}
+
+.kai-btn-secondary:hover::before {
+  opacity: 1;
+}
+
+.kai-btn-secondary > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Sections - Premium Bento Grid with Enhanced 3D */
+.kai-section {
+  margin-bottom: 36px;
+  background: var(--kai-card);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  box-shadow: var(--kai-shadow-lg);
+  border-radius: 26px;
+  overflow: hidden;
+  transition: all var(--kai-transition-slow);
+  position: relative;
+}
+
+/* Premium border glow effect */
+.kai-section::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 26px;
+  padding: 1.5px;
+  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 40%, rgba(45,123,255,0.12) 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0.7;
+  transition: opacity var(--kai-transition-base);
+}
+
+.kai-section:hover::before {
+  opacity: 1;
+}
+
+.kai-section:hover {
+  transform: translateY(-6px) scale(1.005);
+  box-shadow: var(--kai-shadow-float), var(--kai-shadow-glow-blue);
+  background: var(--kai-card-hover);
+}
+
+.kai-section-header {
+  padding: 22px 30px 20px;
+  border-bottom: 1px solid var(--kai-border-light);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
   display: flex;
   flex-direction: column;
   gap: 6px;
-  z-index: 90;
+  position: relative;
 }
-@media (max-width: 1280px) { .kai-sidenav { display: none; } }
-/* FIX: was rgba(255,255,255,0.15) — invisible on light background */
-.kai-sidenav-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(45,123,255,0.20);
+
+.kai-section-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 30px;
+  right: 30px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--kai-border), transparent);
+}
+
+.kai-section-title {
+  font-weight: 800;
+  font-size: 16.5px;
+  color: var(--kai-txt);
+  line-height: 1.25;
+  margin: 0;
+  letter-spacing: -0.015em;
+}
+
+.kai-section-sub {
+  font-size: 12px;
+  color: var(--kai-txt3);
+  margin-top: 3px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.kai-section-badge {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--kai-blue);
+  background: rgba(45, 123, 255, 0.08);
+  padding: 3px 10px;
+  border-radius: 7px;
+  margin-top: 6px;
+  letter-spacing: 0.08em;
+  align-self: flex-start;
+  text-transform: uppercase;
+  border: 1px solid rgba(45, 123, 255, 0.12);
+}
+
+.kai-section-body {
+  padding: 30px;
+}
+
+/* 3D KPI Cards - Ultra Premium with multi-layer effects */
+.kai-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+  gap: 22px;
+}
+
+.kai-kpi {
+  background: linear-gradient(145deg, #FFFFFF 0%, rgba(255,255,255,0.96) 100%);
+  border: 1px solid rgba(15, 23, 42, 0.045);
+  border-radius: 22px;
+  padding: 26px;
+  transition: all var(--kai-transition-slow);
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--kai-shadow-md);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Corner highlight effect */
+.kai-kpi::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 140px;
+  height: 140px;
+  background: radial-gradient(circle at top right, rgba(var(--kai-blue-rgb), 0.06), transparent 70%);
+  border-radius: 0 22px 0 100%;
+  pointer-events: none;
+  transition: all var(--kai-transition-base);
+}
+
+/* Bottom accent line */
+.kai-kpi::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 24px;
+  right: 24px;
+  height: 3px;
+  background: var(--kai-blue-gradient);
+  border-radius: 3px 3px 0 0;
+  opacity: 0;
+  transform: scaleX(0.6);
+  transition: all var(--kai-transition-slow);
+}
+
+.kai-kpi:hover {
+  transform: translateY(-5px) scale(1.012);
+  box-shadow: var(--kai-shadow-xl), 0 0 0 1px rgba(45, 123, 255, 0.08);
+  border-color: rgba(45, 123, 255, 0.12);
+}
+
+.kai-kpi:hover::before {
+  width: 160px;
+  height: 160px;
+  background: radial-gradient(circle at top right, rgba(var(--kai-blue-rgb), 0.09), transparent 70%);
+}
+
+.kai-kpi:hover::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.kai-kpi-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 21px;
+  margin-bottom: 22px;
+  background: linear-gradient(135deg, rgba(var(--kai-blue-rgb), 0.1), rgba(var(--kai-blue-rgb), 0.03));
+  color: var(--kai-blue);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.6),
+    0 4px 10px rgba(var(--kai-blue-rgb), 0.08);
+  position: relative;
+  transition: all var(--kai-transition-base);
+}
+
+.kai-kpi:hover .kai-kpi-icon {
+  transform: scale(1.08) rotate(-3deg);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.7),
+    0 6px 16px rgba(var(--kai-blue-rgb), 0.15);
+}
+
+.kai-kpi-num {
+  font-size: 36px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 7px;
+  color: var(--kai-txt);
+  letter-spacing: -0.045em;
+  background: linear-gradient(180deg, var(--kai-txt) 0%, var(--kai-txt2) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.kai-kpi-label {
+  font-size: 10.5px;
+  font-weight: 800;
+  color: var(--kai-txt4);
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  margin-bottom: 10px;
+}
+
+.kai-kpi-sub {
+  font-size: 12.5px;
+  color: var(--kai-txt2);
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+/* Beautiful Level Badges */
+.kai-level-low { color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; }
+.kai-level-medium { color: #d97706; background: #fefce8; border: 1px solid #fde047; }
+.kai-level-high { color: #ea580c; background: #fff7ed; border: 1px solid #fdba74; }
+.kai-level-vhigh { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }
+.kai-level-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.kai-er-green { color: var(--kai-green); font-weight: 700; }
+.kai-er-yellow { color: #d97706; font-weight: 700; }
+.kai-er-red { color: var(--kai-red); font-weight: 700; }
+
+.kai-stars { color: #FBBF24; font-size: 17px; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(251, 191, 36, 0.3); }
+
+/* Heatmap & Progress (3D Fill) */
+.kai-progress-track { 
+  background: rgba(15, 23, 42, 0.05); 
+  border-radius: 100px; 
+  height: 8px; 
+  overflow: hidden; 
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
+}
+.kai-progress-fill { 
+  height: 100%; 
+  border-radius: 100px; 
+  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); 
+  background: var(--kai-blue-gradient); 
+  box-shadow: 0 2px 4px rgba(45, 123, 255, 0.3);
+}
+
+/* Info Tags */
+.kai-insight-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 24px;
+}
+.kai-insight-tag {
+  padding: 6px 16px;
+  border-radius: 100px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--kai-txt2);
+  box-shadow: var(--kai-shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.2s;
+}
+.kai-insight-tag:hover {
+  border-color: var(--kai-blue);
+  color: var(--kai-blue);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(45, 123, 255, 0.1);
+}
+
+/* Premium Tables */
+.kai-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
+.kai-table th {
+  padding: 16px 20px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--kai-txt3);
+  border-bottom: 2px solid rgba(15, 23, 42, 0.05);
   cursor: pointer;
-  transition: all .2s;
-  border: none;
-  padding: 0;
+  white-space: nowrap;
 }
-.kai-sidenav-dot:hover,
-.kai-sidenav-dot.active { background: var(--kai-blue); box-shadow: 0 0 8px rgba(45,123,255,0.6); width: 10px; height: 10px; }
+.kai-table td {
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
+  color: var(--kai-txt);
+  font-weight: 500;
+  vertical-align: middle;
+  transition: background 0.2s;
+}
+.kai-table tr:hover td { background: rgba(45, 123, 255, 0.02); }
+.kai-table tr:first-child td { border-top: none; }
 
-/* Area chart gradient */
-.kai-area-chart-wrap { background: rgba(45,123,255,0.03); border-radius: 12px; padding: 16px; border: 1px solid rgba(45,123,255,0.07); }
+.kai-plat-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: rgba(15, 23, 42, 0.05);
+  color: var(--kai-txt2);
+}
 
-/* Loading skeleton */
+/* Competitor expander */
+.kai-expand-btn { 
+  background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); 
+  cursor: pointer; color: var(--kai-txt2); padding: 6px; 
+  border-radius: 8px; transition: all .2s; box-shadow: var(--kai-shadow-sm); 
+}
+.kai-expand-btn:hover { background: var(--kai-blue); color: #fff; border-color: transparent; }
+.kai-expand-row { background: #F8FAFC; border-top: 1px solid rgba(15, 23, 42, 0.04); box-shadow: inset 0 4px 6px rgba(0,0,0,0.02); }
+.kai-expand-inner { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+
+.kai-sw-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--kai-txt); }
+.kai-sw-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
+.kai-sw-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--kai-txt2); font-weight: 500; line-height: 1.5; }
+.kai-sw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
+.kai-sw-dot.green { background: var(--kai-green-gradient); }
+.kai-sw-dot.red { background: linear-gradient(135deg, #EF4444, #B91C1C); }
+
+/* CII Ring - 3D Text */
+.kai-cii-ring-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
+.kai-cii-num { 
+  font-size: 72px; font-weight: 900; line-height: 1; 
+  background: var(--kai-blue-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 4px 12px rgba(45, 123, 255, 0.3));
+  margin-bottom: 4px;
+}
+.kai-cii-label { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kai-txt); }
+.kai-cii-desc { font-size: 13.5px; color: var(--kai-txt2); margin-top: 12px; max-width: 280px; line-height: 1.6; font-weight: 500; }
+
+/* Conclusions Box - Glassmorphism */
+.kai-conc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
+.kai-conc-card {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.05);
+  border-radius: 20px;
+  padding: 24px;
+  cursor: default;
+  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--kai-shadow-sm);
+}
+.kai-conc-card:hover { 
+  border-color: rgba(45, 123, 255, 0.2); 
+  transform: translateY(-4px) scale(1.02); 
+  box-shadow: var(--kai-shadow-md); 
+}
+.kai-conc-icon { font-size: 24px; margin-bottom: 14px; color: var(--kai-blue); }
+.kai-conc-text { font-size: 14px; color: var(--kai-txt); line-height: 1.7; font-weight: 500; }
+
+/* Strategy Rationale - High Premium Glowing Border Box */
+.kai-rationale {
+  background: linear-gradient(135deg, rgba(45,123,255,0.03) 0%, rgba(13, 167, 115, 0.02) 100%);
+  position: relative;
+  border-radius: 24px;
+  padding: 40px;
+  box-shadow: var(--kai-shadow-md);
+  border: 1px solid rgba(45, 123, 255, 0.1);
+  overflow: hidden;
+}
+.kai-rationale::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 4px;
+  background: var(--kai-blue-gradient);
+}
+.kai-rationale-text { font-size: 15px; color: var(--kai-txt); line-height: 1.9; white-space: pre-line; font-weight: 500; }
+.kai-cta-box {
+  margin-top: 32px;
+  background: #fff;
+  border: 1px solid rgba(45, 123, 255, 0.15);
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: var(--kai-shadow-md);
+}
+.kai-cta-btn {
+  margin-top: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 36px;
+  background: var(--kai-blue-gradient);
+  color: #fff;
+  border: none;
+  border-radius: 14px;
+  font-size: 15px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 8px 24px rgba(45, 123, 255, 0.3);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+.kai-cta-btn:hover { 
+  transform: translateY(-2px) scale(1.02); 
+  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 12px 32px rgba(45, 123, 255, 0.4); 
+}
+
+/* Skeleton Loading - Refined Premium Shimmer */
 .kai-skeleton {
-  background: rgba(45,123,255,0.05);
-  border-radius: 12px;
+  background: #f1f5f9;
+  border-radius: 16px;
   position: relative;
   overflow: hidden;
 }
@@ -466,73 +816,98 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(45,123,255,0.06), transparent);
-  animation: kai-shimmer 1.5s infinite;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
+  animation: kai-shimmer 1.5s infinite ease-in-out;
 }
 @keyframes kai-shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
 
 /* Factor card */
 .kai-factor {
-  background: rgba(45,123,255,0.04);
-  border: 1px solid rgba(45,123,255,0.14);
-  border-radius: 12px;
-  padding: 16px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.05);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: var(--kai-shadow-sm);
+  transition: transform 0.3s;
 }
-.kai-factor-label { font-size: 11px; font-weight: 700; color: var(--kai-txt); margin-bottom: 4px; }
-.kai-factor-val { font-size: 12px; color: var(--kai-txt2); margin-bottom: 10px; }
+.kai-factor:hover { transform: translateY(-2px); box-shadow: var(--kai-shadow-md); }
+.kai-factor-label { font-size: 12px; font-weight: 800; color: var(--kai-txt3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
+.kai-factor-val { font-size: 14px; color: var(--kai-txt); font-weight: 600; }
 
 /* Strategic focus cards */
 .kai-focus-card {
   display: flex;
   align-items: flex-start;
-  gap: 14px;
-  background: rgba(45,123,255,0.06);
-  border: 1px solid rgba(45,123,255,0.2);
-  border-radius: 12px;
-  padding: 16px;
+  gap: 16px;
+  background: #fff;
+  border: 1px solid rgba(45,123,255,0.15);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: var(--kai-shadow-sm);
+  transition: all 0.3s;
 }
+.kai-focus-card:hover { border-color: var(--kai-blue); box-shadow: var(--kai-shadow-md); transform: translateY(-2px); }
 .kai-focus-num {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--kai-blue);
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: var(--kai-blue-gradient);
   color: #fff;
-  font-family: 'Unbounded', sans-serif;
-  font-weight: 900;
-  font-size: 13px;
+  font-weight: 800;
+  font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  box-shadow: 0 4px 10px rgba(45, 123, 255, 0.2);
 }
-.kai-focus-text { font-size: 13px; font-weight: 600; color: var(--kai-txt); line-height: 1.5; padding-top: 6px; }
-
-/* Search demand badges */
-.kai-query-card { padding: 12px 16px; background: rgba(45,123,255,0.04); border: 1px solid rgba(45,123,255,0.14); border-radius: 10px; }
-.kai-query-label { font-size: 13px; color: var(--kai-txt); font-weight: 500; margin-bottom: 8px; }
-
-/* CTA tags (behavioral) */
-.kai-cta-bubble {
-  padding: 12px 18px;
-  background: rgba(45,123,255,0.07);
-  border: 1px solid rgba(45,123,255,0.2);
-  border-radius: 12px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--kai-txt);
-  transition: all .2s;
-  cursor: default;
-}
-.kai-cta-bubble:hover { background: rgba(45,123,255,0.12); border-color: rgba(45,123,255,0.4); }
+.kai-focus-text { font-size: 14.5px; font-weight: 600; color: var(--kai-txt); line-height: 1.6; padding-top: 6px; }
 
 /* Peak period card */
 .kai-peak-card {
-  padding: 14px 16px;
-  background: rgba(45,123,255,0.07);
-  border: 1px solid rgba(45,123,255,0.2);
-  border-radius: 12px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid rgba(45,123,255,0.1);
+  border-radius: 16px;
+  box-shadow: var(--kai-shadow-sm);
+}
+.kai-peak-title { font-weight: 800; color: var(--kai-blue); font-size: 14px; margin-bottom: 6px; }
+.kai-peak-sub { font-size: 12.5px; color: var(--kai-txt2); font-weight: 500; }
+
+/* Area Chart wrap */
+.kai-area-chart-wrap { 
+  background: #fff; 
+  border-radius: 20px; 
+  padding: 24px; 
+  border: 1px solid rgba(15, 23, 42, 0.05); 
+  box-shadow: var(--kai-shadow-sm);
+}
+
+/* Sidenav Dots */
+.kai-sidenav {
+  position: fixed;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 90;
+}
+@media (max-width: 1280px) { .kai-sidenav { display: none; } }
+.kai-sidenav-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.1);
+  cursor: pointer;
+  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
+  border: none;
+  padding: 0;
+}
+.kai-sidenav-dot:hover,
+.kai-sidenav-dot.active { 
+  background: var(--kai-blue); 
+  transform: scale(1.4); 
+  box-shadow: 0 0 12px rgba(45, 123, 255, 0.4); 
 }
-.kai-peak-title { font-weight: 700; color: var(--kai-blue); font-size: 13px; margin-bottom: 4px; }
-.kai-peak-sub { font-size: 11px; color: var(--kai-txt2); }
-.kai-term-icon { color: rgba(45,123,255,0.4); font-size: 13px; margin-left: 4px; cursor: help; transition: color 0.2s; }
-.kai-term-icon:hover { color: #2D7BFF; }
diff --git a/src/assets/marketing-lists-kit.css b/src/assets/marketing-lists-kit.css
new file mode 100644
index 0000000..267f117
--- /dev/null
+++ b/src/assets/marketing-lists-kit.css
@@ -0,0 +1,1033 @@
+/* Marketing Lists UI-Kit (shared across analysis/strategy/targetologist lists)
+   Works under body.marketing-theme (see src/assets/marketing-theme.css) */
+
+body.marketing-theme {
+  --mk-container: 1200px;
+  --mk-pad-x: 32px;
+  --mk-pad-x-sm: 18px;
+
+  --mk-radius-1: 12px;
+  --mk-radius-2: 16px;
+  --mk-radius-3: 20px;
+  --mk-radius-4: 28px;
+
+  --mk-border: rgba(15, 23, 42, 0.08);
+  --mk-border-soft: rgba(15, 23, 42, 0.06);
+
+  --mk-panel: rgba(255, 255, 255, 0.9);
+  --mk-panel-strong: rgba(255, 255, 255, 0.96);
+  --mk-panel-glass: rgba(255, 255, 255, 0.82);
+
+  --mk-text: #0f172a;
+  --mk-muted: #64748b;
+  --mk-muted-2: #94a3b8;
+  --mk-ink: #0b1220;
+  --mk-ink-2: rgba(15, 23, 42, 0.86);
+
+  --mk-primary: #2d7bff;
+  --mk-primary-2: #1d63e5;
+  --mk-primary-soft: rgba(45, 123, 255, 0.12);
+  --mk-primary-glow: rgba(45, 123, 255, 0.35);
+
+  --mk-success: #10b981;
+  --mk-success-soft: rgba(16, 185, 129, 0.1);
+  --mk-warning: #f59e0b;
+  --mk-warning-soft: rgba(245, 158, 11, 0.1);
+  --mk-danger: #ef4444;
+  --mk-danger-soft: rgba(239, 68, 68, 0.1);
+
+  --mk-shadow-1: 0 2px 10px rgba(15, 23, 42, 0.04);
+  --mk-shadow-2: 0 14px 34px -24px rgba(15, 23, 42, 0.35);
+  --mk-shadow-3: 0 20px 54px -28px rgba(45, 123, 255, 0.45);
+}
+
+.mk-list-page,
+.mk-banner,
+.mk-stat,
+.mk-toolbar,
+.mk-item,
+.mk-btn,
+.mk-pill,
+.mk-chip,
+.mk-act {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.mk-list-page {
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+  padding-bottom: 92px;
+  color: var(--mk-text);
+  /* Bold signature background (additional to marketing-theme body bg) */
+  background:
+    radial-gradient(1200px 680px at 12% 8%, rgba(45, 123, 255, 0.14), transparent 58%),
+    radial-gradient(980px 560px at 92% 18%, rgba(16, 185, 129, 0.10), transparent 62%),
+    radial-gradient(1050px 700px at 50% 96%, rgba(139, 92, 246, 0.10), transparent 55%);
+}
+
+.mk-list-page::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  /* Noise + vignette for premium feel */
+  background:
+    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
+    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 55%, rgba(15, 23, 42, 0.06) 100%),
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.018), rgba(255,255,255,0.018) 1px, transparent 1px, transparent 4px);
+  mix-blend-mode: soft-light;
+  opacity: 0.55;
+}
+
+.mk-bg-dots {
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(45, 123, 255, 0.055) 1px, transparent 1px);
+  background-size: 26px 26px;
+  pointer-events: none;
+  z-index: 0;
+  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 40%, transparent 100%);
+  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 40%, transparent 100%);
+  animation: mk-dots-drift 22s ease-in-out infinite alternate;
+}
+
+@keyframes mk-dots-drift {
+  from { transform: translate3d(0, 0, 0); opacity: 0.95; }
+  to { transform: translate3d(-18px, 12px, 0); opacity: 0.75; }
+}
+
+.mk-orb {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(90px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mk-orb--blue {
+  width: 560px;
+  height: 560px;
+  right: -120px;
+  top: -180px;
+  background: radial-gradient(circle, rgba(45, 123, 255, 0.11) 0%, transparent 65%);
+  animation: mk-orb-float 16s ease-in-out infinite alternate;
+}
+
+.mk-orb--violet {
+  width: 520px;
+  height: 520px;
+  left: -140px;
+  bottom: -180px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 65%);
+  animation: mk-orb-float 20s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes mk-orb-float {
+  from { transform: translate(0, 0) scale(1); }
+  to { transform: translate(18px, -18px) scale(1.06); }
+}
+
+.mk-banner {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.80));
+  backdrop-filter: blur(26px);
+  -webkit-backdrop-filter: blur(26px);
+  border-bottom: 1px solid var(--mk-border-soft);
+  position: relative;
+  z-index: 2;
+  margin-bottom: 28px;
+}
+
+.mk-banner::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(900px 260px at 10% 0%, rgba(45, 123, 255, 0.18), transparent 60%),
+    radial-gradient(700px 260px at 90% 0%, rgba(16, 185, 129, 0.12), transparent 60%),
+    linear-gradient(90deg, rgba(45,123,255,0.12), rgba(139,92,246,0.10), rgba(16,185,129,0.10));
+  opacity: 0.38;
+  filter: blur(18px);
+}
+
+.mk-banner::after {
+  content: '';
+  position: absolute;
+  left: -30%;
+  top: 0;
+  width: 60%;
+  height: 100%;
+  pointer-events: none;
+  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.55), transparent);
+  transform: skewX(-18deg);
+  animation: mk-sheen 7.2s ease-in-out infinite;
+  opacity: 0.55;
+}
+
+@keyframes mk-sheen {
+  0% { transform: translateX(-30%) skewX(-18deg); opacity: 0; }
+  18% { opacity: 0.55; }
+  55% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
+  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
+}
+
+.mk-banner__inner {
+  max-width: var(--mk-container);
+  margin: 0 auto;
+  padding: 28px var(--mk-pad-x);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.mk-banner__left {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.mk-banner__right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.mk-back-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--mk-radius-1);
+  border: 1px solid var(--mk-border);
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: var(--mk-shadow-1);
+}
+
+.mk-back-btn:hover {
+  border-color: rgba(45, 123, 255, 0.35);
+  color: var(--mk-primary);
+  transform: translateX(-2px);
+  box-shadow: 0 16px 36px -26px rgba(45, 123, 255, 0.65);
+}
+
+.mk-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.11em;
+  color: var(--mk-primary);
+  margin-bottom: 4px;
+}
+
+.mk-eyebrow__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--mk-primary);
+  box-shadow: 0 0 8px rgba(45, 123, 255, 0.7);
+  animation: mk-dot 2.2s ease-in-out infinite;
+}
+
+@keyframes mk-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.45; transform: scale(0.78); }
+}
+
+.mk-title {
+  margin: 0;
+  font-size: clamp(28px, 3.1vw, 40px);
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--mk-text);
+  text-shadow: 0 14px 38px rgba(15, 23, 42, 0.10);
+}
+
+.mk-subtitle {
+  margin: 4px 0 0;
+  color: var(--mk-muted);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.mk-inner {
+  max-width: var(--mk-container);
+  margin: 0 auto;
+  padding: 0 var(--mk-pad-x);
+  position: relative;
+  z-index: 2;
+}
+
+.mk-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--mk-radius-1);
+  padding: 10px 18px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  transition: all 0.22s ease;
+  line-height: 1;
+  user-select: none;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+.mk-btn--primary {
+  color: #fff;
+  background: linear-gradient(135deg, var(--mk-primary), rgba(139, 92, 246, 0.92), var(--mk-primary-2));
+  background-size: 180% 180%;
+  box-shadow: 0 10px 28px -18px rgba(45, 123, 255, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+  animation: mk-gradient 6.8s ease-in-out infinite;
+}
+
+.mk-btn--primary:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 22px 50px -26px rgba(45, 123, 255, 0.95);
+}
+
+.mk-btn--primary::after,
+.mk-btn--dark::after,
+.mk-btn--ghost::after {
+  content: '';
+  position: absolute;
+  left: -55%;
+  top: -20%;
+  width: 55%;
+  height: 140%;
+  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+  transform: skewX(-18deg);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.mk-btn:hover::after {
+  opacity: 0.85;
+  animation: mk-btn-shine 0.85s ease-out;
+}
+
+@keyframes mk-btn-shine {
+  from { transform: translateX(-20%) skewX(-18deg); }
+  to { transform: translateX(240%) skewX(-18deg); }
+}
+
+.mk-btn:active {
+  transform: translateY(0) scale(0.99);
+  filter: saturate(1.05);
+}
+
+.mk-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(45, 123, 255, 0.18), var(--mk-shadow-1);
+}
+
+.mk-btn i { filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18)); }
+
+.mk-btn--primary i { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.26)); }
+
+.mk-btn--ghost i { filter: none; }
+
+.mk-btn--dark i { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28)); }
+
+.mk-btn--dark {
+  color: #fff;
+  background: linear-gradient(135deg, #0f172a, #1e293b);
+  border-color: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
+}
+
+.mk-btn--dark:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 26px 64px -38px rgba(15, 23, 42, 0.55);
+}
+
+.mk-btn--ghost {
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  border-color: var(--mk-border);
+  box-shadow: var(--mk-shadow-1);
+}
+
+.mk-btn--ghost:hover {
+  color: var(--mk-primary);
+  border-color: rgba(45, 123, 255, 0.3);
+  background: #fff;
+  transform: translateY(-2px) scale(1.02);
+}
+
+.mk-btn--small {
+  padding: 9px 14px;
+  font-weight: 700;
+}
+
+.mk-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.mk-stat {
+  border: 1px solid var(--mk-border);
+  border-radius: var(--mk-radius-3);
+  background: linear-gradient(165deg, rgba(255,255,255,0.98), rgba(255,255,255,0.86));
+  backdrop-filter: blur(14px);
+  box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.45), 0 2px 8px rgba(255, 255, 255, 0.75) inset;
+  padding: 16px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.mk-stat::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(45,123,255,0.26), rgba(139,92,246,0.18), rgba(16,185,129,0.14));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0.0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+.mk-stat::after {
+  content: '';
+  position: absolute;
+  right: -22px;
+  top: -22px;
+  width: 86px;
+  height: 86px;
+  background: radial-gradient(circle, rgba(45,123,255,0.18), transparent 62%);
+  filter: blur(2px);
+  opacity: 0.9;
+  transform: scale(0.9);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  pointer-events: none;
+}
+
+.mk-stat:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 28px 62px -40px rgba(45, 123, 255, 0.55), 0 2px 8px rgba(255, 255, 255, 0.78) inset;
+  border-color: rgba(45, 123, 255, 0.24);
+}
+
+.mk-stat--active {
+  box-shadow: 0 30px 70px -48px rgba(45, 123, 255, 0.72);
+  border-color: rgba(45, 123, 255, 0.28);
+}
+
+.mk-stat:hover::before,
+.mk-stat--active::before {
+  opacity: 1;
+}
+
+.mk-stat:hover::after {
+  transform: scale(1.05);
+  opacity: 1;
+}
+
+.mk-stat__icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.mk-stat__num {
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 5px;
+  letter-spacing: -0.02em;
+}
+
+.mk-stat__num {
+  text-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
+}
+
+.mk-stat__label {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--mk-muted);
+}
+
+.mk-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+  padding: 14px;
+  border-radius: var(--mk-radius-2);
+  border: 1px solid var(--mk-border-soft);
+  background: var(--mk-panel-glass);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--mk-shadow-1);
+  position: relative;
+  overflow: hidden;
+}
+
+.mk-toolbar::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(45,123,255,0.14), rgba(139,92,246,0.10), rgba(16,185,129,0.08));
+  opacity: 0.55;
+  filter: blur(18px);
+  pointer-events: none;
+}
+
+.mk-search {
+  position: relative;
+  flex: 1;
+  min-width: 260px;
+}
+
+.mk-search__icon {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--mk-muted-2);
+  pointer-events: none;
+}
+
+.mk-search__input {
+  width: 100%;
+  height: 42px;
+  border-radius: var(--mk-radius-1);
+  border: 1px solid var(--mk-border);
+  background: rgba(255, 255, 255, 0.92);
+  padding: 0 36px 0 39px;
+  outline: none;
+  color: var(--mk-text);
+  font-size: 13.5px;
+  transition: all 0.2s ease;
+}
+
+.mk-search__input:focus {
+  border-color: rgba(45, 123, 255, 0.35);
+  box-shadow: 0 0 0 3px rgba(45, 123, 255, 0.08);
+}
+
+.mk-search__clear {
+  position: absolute;
+  right: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(100, 116, 139, 0.1);
+  cursor: pointer;
+  color: #64748b;
+  transition: all 0.2s ease;
+}
+
+.mk-search__clear:hover {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--mk-danger);
+}
+
+.mk-pills {
+  display: flex;
+  gap: 7px;
+  flex-wrap: wrap;
+}
+
+.mk-pill {
+  border: 1px solid var(--mk-border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.mk-pill:hover {
+  background: #fff;
+  border-color: rgba(45, 123, 255, 0.22);
+  color: var(--mk-primary);
+  transform: translateY(-1px);
+}
+
+.mk-pill--active {
+  background: var(--mk-primary);
+  border-color: var(--mk-primary);
+  color: #fff;
+  box-shadow: 0 10px 26px -18px rgba(45, 123, 255, 0.55);
+}
+
+.mk-section-head {
+  margin: 18px 0 12px;
+}
+
+.mk-section-label {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--mk-muted);
+}
+
+.mk-section-hint {
+  margin-top: 4px;
+  color: var(--mk-muted-2);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.mk-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.mk-count {
+  margin-left: 2px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(45, 123, 255, 0.1);
+  border: 1px solid rgba(45, 123, 255, 0.24);
+  color: var(--mk-primary);
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.mk-list {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.mk-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  grid-column: span 6;
+  border-radius: var(--mk-radius-4);
+  border: 1px solid var(--mk-border);
+  background: linear-gradient(165deg, rgba(255,255,255,0.98), rgba(255,255,255,0.86));
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  transition: all 0.2s ease;
+  box-shadow: 0 18px 38px -28px rgba(15, 23, 42, 0.45), 0 2px 8px rgba(255, 255, 255, 0.75) inset;
+  position: relative;
+}
+
+.mk-item--clickable { cursor: pointer; }
+
+.mk-list .mk-item:first-child {
+  grid-column: 1 / -1;
+}
+
+.mk-list .mk-item:nth-child(4n + 2) {
+  background:
+    linear-gradient(165deg, rgba(255,255,255,0.98), rgba(246, 251, 255, 0.90));
+}
+
+.mk-list .mk-item:nth-child(4n + 3) {
+  background:
+    linear-gradient(165deg, rgba(255,255,255,0.98), rgba(248, 255, 252, 0.90));
+}
+
+.mk-item::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(45,123,255,0.22), rgba(139,92,246,0.16), rgba(16,185,129,0.12));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.22s ease;
+  pointer-events: none;
+}
+
+.mk-item::after {
+  content: '';
+  position: absolute;
+  right: -28px;
+  top: -28px;
+  width: 128px;
+  height: 128px;
+  background: radial-gradient(circle, rgba(45, 123, 255, 0.16), transparent 66%);
+  filter: blur(2px);
+  opacity: 0.95;
+  pointer-events: none;
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.mk-item--clickable:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 40px 86px -58px rgba(45, 123, 255, 0.75), 0 2px 8px rgba(255, 255, 255, 0.82) inset;
+  border-color: rgba(45, 123, 255, 0.24);
+  background: var(--mk-panel-strong);
+}
+
+.mk-item--clickable:hover::before {
+  opacity: 1;
+}
+
+.mk-item--clickable:hover::after {
+  transform: scale(1.12);
+  opacity: 1;
+}
+
+.mk-item__stripe {
+  width: 100%;
+  height: 5px;
+  flex-shrink: 0;
+  transition: height 0.2s ease;
+}
+
+.mk-item--clickable:hover .mk-item__stripe {
+  height: 6px;
+}
+
+.mk-item__body {
+  flex: 1;
+  padding: 18px 18px 14px;
+  min-width: 0;
+}
+
+.mk-item__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.mk-item__title {
+  margin: 0;
+  font-size: clamp(22px, 1.2vw, 26px);
+  font-weight: 900;
+  line-height: 1.16;
+  letter-spacing: -0.02em;
+  color: var(--mk-text);
+  min-width: 0;
+}
+
+.mk-list .mk-item:not(:first-child) .mk-item__title {
+  font-size: clamp(18px, 1vw, 22px);
+}
+
+.mk-item__title {
+  text-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
+}
+
+.mk-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.mk-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.mk-badge i { font-size: 11px; }
+
+.mk-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  margin-bottom: 12px;
+}
+
+.mk-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px;
+  border-radius: 10px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(248, 250, 252, 0.9);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #475569;
+  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.22);
+}
+
+.mk-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.mk-progress__track {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+}
+
+.mk-progress__fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.35s ease;
+}
+
+.mk-progress__text {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--mk-muted);
+  white-space: nowrap;
+}
+
+.mk-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px 16px;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.56), rgba(255, 255, 255, 0.84));
+  justify-content: flex-end;
+}
+
+.mk-act {
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mk-list .mk-item:first-child .mk-actions {
+  padding-top: 14px;
+}
+
+.mk-act:hover {
+  transform: scale(1.08) translateY(-1px);
+  box-shadow: 0 18px 44px -34px rgba(45, 123, 255, 0.55);
+}
+
+.mk-act--warn:hover {
+  color: var(--mk-warning);
+  border-color: rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.08);
+}
+
+.mk-act--success:hover {
+  color: var(--mk-success);
+  border-color: rgba(16, 185, 129, 0.35);
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.mk-act--danger:hover {
+  color: var(--mk-danger);
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.mk-act--open:hover {
+  color: var(--mk-primary);
+  border-color: rgba(45, 123, 255, 0.35);
+  background: rgba(45, 123, 255, 0.08);
+}
+
+.mk-empty {
+  text-align: center;
+  padding: 64px 16px;
+  border-radius: var(--mk-radius-3);
+  border: 1px dashed rgba(45, 123, 255, 0.28);
+  background: var(--mk-panel-glass);
+  box-shadow: var(--mk-shadow-1);
+}
+
+.mk-empty__icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 18px;
+  background: rgba(45, 123, 255, 0.12);
+  color: var(--mk-primary);
+  font-size: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.mk-empty__title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 900;
+  color: var(--mk-text);
+}
+
+.mk-empty__desc {
+  margin: 0 auto 18px;
+  max-width: 520px;
+  color: var(--mk-muted);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.mk-skeleton {
+  display: grid;
+  gap: 10px;
+}
+
+.mk-skeleton__row {
+  height: 116px;
+  border-radius: var(--mk-radius-2);
+  border: 1px solid var(--mk-border);
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.84) 8%,
+    rgba(241, 245, 249, 0.95) 18%,
+    rgba(255, 255, 255, 0.84) 33%
+  );
+  background-size: 200% 100%;
+  animation: mk-shimmer 1.3s linear infinite;
+}
+
+@keyframes mk-shimmer {
+  to { background-position-x: -200%; }
+}
+
+@keyframes mk-gradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Page-load animation (stagger, no JS) */
+.mk-banner,
+.mk-stats,
+.mk-toolbar,
+.mk-section-head,
+.mk-grid-2,
+.mk-empty,
+.mk-skeleton {
+  animation: mk-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.mk-banner { animation-delay: 40ms; }
+.mk-stats { animation-delay: 120ms; }
+.mk-toolbar { animation-delay: 180ms; }
+.mk-grid-2 { animation-delay: 220ms; }
+.mk-section-head { animation-delay: 240ms; }
+
+.mk-list .mk-item {
+  animation: mk-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.mk-list .mk-item:nth-child(1) { animation-delay: 120ms; }
+.mk-list .mk-item:nth-child(2) { animation-delay: 160ms; }
+.mk-list .mk-item:nth-child(3) { animation-delay: 200ms; }
+.mk-list .mk-item:nth-child(4) { animation-delay: 240ms; }
+.mk-list .mk-item:nth-child(5) { animation-delay: 280ms; }
+.mk-list .mk-item:nth-child(6) { animation-delay: 320ms; }
+.mk-list .mk-item:nth-child(7) { animation-delay: 360ms; }
+.mk-list .mk-item:nth-child(8) { animation-delay: 400ms; }
+.mk-list .mk-item:nth-child(9) { animation-delay: 440ms; }
+.mk-list .mk-item:nth-child(10) { animation-delay: 480ms; }
+.mk-list .mk-item:nth-child(11) { animation-delay: 520ms; }
+.mk-list .mk-item:nth-child(12) { animation-delay: 560ms; }
+
+@keyframes mk-fade-up {
+  from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(2px); }
+  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-bg-dots,
+  .mk-orb,
+  .mk-banner::after,
+  .mk-btn--primary,
+  .mk-banner,
+  .mk-stats,
+  .mk-toolbar,
+  .mk-grid-2,
+  .mk-section-head,
+  .mk-empty,
+  .mk-skeleton,
+  .mk-list .mk-item {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+@media (max-width: 1100px) {
+  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .mk-grid-2 { grid-template-columns: 1fr; }
+  .mk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .mk-item,
+  .mk-list .mk-item:first-child { grid-column: auto; }
+}
+
+@media (max-width: 768px) {
+  .mk-banner__inner { padding-left: var(--mk-pad-x-sm); padding-right: var(--mk-pad-x-sm); }
+  .mk-inner { padding-left: var(--mk-pad-x-sm); padding-right: var(--mk-pad-x-sm); }
+  .mk-title { font-size: 28px; }
+  .mk-stats { grid-template-columns: 1fr; }
+  .mk-list { grid-template-columns: 1fr; }
+  .mk-item { grid-column: 1 / -1; }
+  .mk-actions { padding: 10px 14px 14px; justify-content: flex-end; }
+  .mk-progress { flex-direction: column; align-items: flex-start; }
+}
diff --git a/src/assets/marketing-theme.css b/src/assets/marketing-theme.css
new file mode 100644
index 0000000..596b513
--- /dev/null
+++ b/src/assets/marketing-theme.css
@@ -0,0 +1,288 @@
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800;900&display=swap');
+
+body.marketing-theme {
+  --mk-bg: #f4f7fb;
+  --mk-panel: rgba(255, 255, 255, 0.92);
+  --mk-panel-strong: #ffffff;
+  --mk-border: rgba(15, 23, 42, 0.08);
+  --mk-text: #0f172a;
+  --mk-muted: #64748b;
+  --mk-accent: #1d74ff;
+  --mk-accent-soft: rgba(29, 116, 255, 0.12);
+  background:
+    radial-gradient(1200px 700px at 8% 8%, rgba(56, 189, 248, 0.12), transparent 56%),
+    radial-gradient(900px 520px at 92% 18%, rgba(34, 197, 94, 0.09), transparent 62%),
+    radial-gradient(1200px 700px at 50% 98%, rgba(29, 116, 255, 0.08), transparent 55%),
+    var(--mk-bg);
+  color: var(--mk-text);
+}
+
+body.marketing-theme,
+body.marketing-theme button,
+body.marketing-theme input,
+body.marketing-theme textarea,
+body.marketing-theme select,
+body.marketing-theme .p-component,
+body.marketing-theme .pi,
+body.marketing-theme [class*='marketing'],
+body.marketing-theme [class^='hub'],
+body.marketing-theme [class^='td-'],
+body.marketing-theme [class^='cp-'],
+body.marketing-theme [class^='kai-'],
+body.marketing-theme [class^='trp-'] {
+  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+body.marketing-theme .kai-logo,
+body.marketing-theme .hub__title,
+body.marketing-theme .td-title,
+body.marketing-theme .cp-gauge-value {
+  letter-spacing: -0.02em;
+}
+
+body.marketing-theme .hub,
+body.marketing-theme .td-page,
+body.marketing-theme .marketing-analysis-v3,
+body.marketing-theme .cp-section {
+  color: var(--mk-text);
+}
+
+body.marketing-theme .hub__inner,
+body.marketing-theme .td-inner,
+body.marketing-theme .analysis-container,
+body.marketing-theme .list-container,
+body.marketing-theme .sl-inner {
+  position: relative;
+  z-index: 1;
+}
+
+body.marketing-theme .hub__hero,
+body.marketing-theme .td-banner,
+body.marketing-theme .al-banner,
+body.marketing-theme .sl-banner {
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+body.marketing-theme .hub__grid,
+body.marketing-theme .td-kpi-grid,
+body.marketing-theme .al-stats-row,
+body.marketing-theme .sl-stats-row,
+body.marketing-theme .cp-metrics-grid {
+  gap: 18px;
+}
+
+body.marketing-theme .hub-card,
+body.marketing-theme .td-kpi,
+body.marketing-theme .al-stat,
+body.marketing-theme .sl-stat,
+body.marketing-theme .cp-card,
+body.marketing-theme .summary-card,
+body.marketing-theme .table-card,
+body.marketing-theme .al-item,
+body.marketing-theme .sl-item,
+body.marketing-theme .td-cmp {
+  border-radius: 22px;
+}
+
+body.marketing-theme .hub-card,
+body.marketing-theme .hub__stat,
+body.marketing-theme .td-kpi,
+body.marketing-theme .td-cmp,
+body.marketing-theme .cp-card,
+body.marketing-theme .summary-card,
+body.marketing-theme .table-container,
+body.marketing-theme .kai-card,
+body.marketing-theme .kai-section,
+body.marketing-theme .section-wrapper {
+  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), var(--mk-panel));
+  border: 1px solid var(--mk-border);
+  box-shadow:
+    0 18px 38px -28px rgba(15, 23, 42, 0.45),
+    0 2px 8px rgba(255, 255, 255, 0.75) inset;
+}
+
+body.marketing-theme .hub-card:hover,
+body.marketing-theme .hub__stat:hover,
+body.marketing-theme .td-kpi:hover,
+body.marketing-theme .td-cmp:hover,
+body.marketing-theme .cp-card:hover,
+body.marketing-theme .summary-card:hover,
+body.marketing-theme .table-container:hover {
+  transform: translateY(-4px);
+  border-color: rgba(29, 116, 255, 0.22);
+  box-shadow:
+    0 24px 54px -30px rgba(29, 116, 255, 0.45),
+    0 2px 8px rgba(255, 255, 255, 0.85) inset;
+}
+
+body.marketing-theme .hub__action-btn--primary,
+body.marketing-theme .td-launch-btn,
+body.marketing-theme .cp-btn-glow,
+body.marketing-theme .kai-btn-primary,
+body.marketing-theme .al-btn--primary,
+body.marketing-theme .sl-btn--primary {
+  background: linear-gradient(135deg, #1d74ff 0%, #0ea5e9 100%) !important;
+  border: none;
+  box-shadow: 0 14px 28px -14px rgba(29, 116, 255, 0.7);
+}
+
+body.marketing-theme .hub__action-btn--ghost,
+body.marketing-theme .kai-btn-secondary,
+body.marketing-theme .al-btn--ghost,
+body.marketing-theme .sl-btn--ghost {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--mk-border);
+  color: var(--mk-text);
+}
+
+body.marketing-theme .al-toolbar,
+body.marketing-theme .sl-toolbar,
+body.marketing-theme .td-section-head,
+body.marketing-theme .td-cmp-head,
+body.marketing-theme .list-header {
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+body.marketing-theme .al-item__badge,
+body.marketing-theme .sl-item__badge,
+body.marketing-theme .sl-item__model,
+body.marketing-theme .td-cmp__status,
+body.marketing-theme .td-plat-chip,
+body.marketing-theme .al-chip {
+  border-radius: 999px;
+}
+
+body.marketing-theme .al-search__input,
+body.marketing-theme .sl-search__input,
+body.marketing-theme .td-search__input,
+body.marketing-theme .p-inputtext,
+body.marketing-theme .p-dropdown {
+  background: rgba(255, 255, 255, 0.9) !important;
+  border-color: rgba(15, 23, 42, 0.08) !important;
+  color: var(--mk-text) !important;
+}
+
+body.marketing-theme .hub__subtitle,
+body.marketing-theme .td-subtitle,
+body.marketing-theme .cp-empty-state__desc,
+body.marketing-theme .loading-sub,
+body.marketing-theme .al-subtitle,
+body.marketing-theme .sl-subtitle,
+body.marketing-theme .page-subtitle {
+  color: var(--mk-muted) !important;
+}
+
+body.marketing-theme .hub__title,
+body.marketing-theme .td-title,
+body.marketing-theme .table-title,
+body.marketing-theme .cp-empty-state__title,
+body.marketing-theme .loading-title,
+body.marketing-theme .al-title,
+body.marketing-theme .sl-title,
+body.marketing-theme .page-title,
+body.marketing-theme .mkt-hub__title,
+body.marketing-theme .wiz-loading-title,
+body.marketing-theme .wiz-toggle-title,
+body.marketing-theme .wiz-label,
+body.marketing-theme .wiz-pipeline-label,
+body.marketing-theme .wiz-pipeline-status,
+body.marketing-theme .td-campaign__status {
+  color: var(--mk-text) !important;
+}
+
+body.marketing-theme .mkt-hub,
+body.marketing-theme .mkt-hub__header,
+body.marketing-theme .wiz-container,
+body.marketing-theme .wiz-pipeline-item,
+body.marketing-theme .td-campaign-page,
+body.marketing-theme .td-campaign__section,
+body.marketing-theme .td-campaign__tab,
+body.marketing-theme .td-campaign__panel {
+  background: transparent;
+}
+
+body.marketing-theme .mkt-hub__title,
+body.marketing-theme .mkt-hub__sub,
+body.marketing-theme .mkt-hub__badge,
+body.marketing-theme .wiz-label,
+body.marketing-theme .wiz-toggle-title,
+body.marketing-theme .wiz-toggle-sub,
+body.marketing-theme .wiz-loading-title,
+body.marketing-theme .wiz-loading-card,
+body.marketing-theme .wiz-pipeline-label,
+body.marketing-theme .wiz-pipeline-status,
+body.marketing-theme .wiz-btn-sec,
+body.marketing-theme .mkt-banner__cta {
+  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+body.marketing-theme .mkt-hub__title,
+body.marketing-theme .wiz-loading-title {
+  letter-spacing: -0.03em !important;
+  text-transform: none !important;
+}
+
+body.marketing-theme .mkt-hub,
+body.marketing-theme .mkt-hub *,
+body.marketing-theme .sl-page,
+body.marketing-theme .sl-page *,
+body.marketing-theme .td-campaign-page,
+body.marketing-theme .td-campaign-page * {
+  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+}
+
+body.marketing-theme .mkt-hub * i,
+body.marketing-theme .sl-page * i,
+body.marketing-theme .td-campaign-page * i,
+body.marketing-theme .pi {
+  font-family: 'primeicons' !important;
+}
+
+body.marketing-theme .hub__bg-dots,
+body.marketing-theme .td-bg-dots {
+  opacity: 0.4;
+}
+
+@media (max-width: 768px) {
+  body.marketing-theme .hub,
+  body.marketing-theme .td-page,
+  body.marketing-theme .marketing-analysis-v3,
+  body.marketing-theme .al-page,
+  body.marketing-theme .sl-page,
+  body.marketing-theme .list-page {
+    padding-inline: 8px;
+  }
+
+  body.marketing-theme .hub__hero,
+  body.marketing-theme .td-banner__inner,
+  body.marketing-theme .al-banner__inner,
+  body.marketing-theme .sl-banner__inner,
+  body.marketing-theme .list-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  body.marketing-theme .hub__hero-stats,
+  body.marketing-theme .td-kpi-grid,
+  body.marketing-theme .al-stats-row,
+  body.marketing-theme .sl-stats-row,
+  body.marketing-theme .cp-metrics-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  body.marketing-theme .hub__title,
+  body.marketing-theme .td-title,
+  body.marketing-theme .al-title,
+  body.marketing-theme .sl-title,
+  body.marketing-theme .page-title {
+    font-size: clamp(28px, 8vw, 42px) !important;
+  }
+
+  body.marketing-theme .list-container,
+  body.marketing-theme .analysis-container,
+  body.marketing-theme .td-inner {
+    padding-inline: 12px !important;
+  }
+}
diff --git a/src/components/marketing/MarketingBriefWizardV3.vue b/src/components/marketing/MarketingBriefWizardV3.vue
index 4217fa8..5d52254 100644
--- a/src/components/marketing/MarketingBriefWizardV3.vue
+++ b/src/components/marketing/MarketingBriefWizardV3.vue
@@ -1,3 +1,176 @@
+<template>
+    <div class="marketing-wizard flex min-h-screen bg-[#F8FAFC] font-sans antialiased selection:bg-blue-500 selection:text-white">
+        <Toast />
+        
+        <!-- LEFT SIDE - Dynamic Visual & Progress -->
+        <div class="hidden lg:flex flex-col justify-between w-[35%] min-w-[380px] max-w-[460px] p-10 bg-white relative overflow-hidden shadow-[10px_0_40px_rgba(0,0,0,0.03)] z-20">
+            <!-- Animated Background Mesh Layer -->
+            <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply pointer-events-none">
+                <div class="absolute -top-[20%] -left-[20%] w-[140%] h-[140%] bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-100/80 via-white/10 to-transparent animate-slow-pan"></div>
+                <div class="absolute -bottom-[20%] -right-[20%] w-[140%] h-[140%] bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-100/60 via-emerald-50/20 to-transparent animate-slow-pan-reverse"></div>
+            </div>
+
+            <div class="relative z-10 scale-in shadow-inner-glow">
+                <div class="flex items-center gap-4 mb-10 cursor-pointer group" @click="$router.push('/marketing-analysis')">
+                    <div class="w-14 h-14 bg-slate-900 text-white rounded-[18px] flex items-center justify-center font-black text-sm tracking-widest shadow-[0_8px_30px_rgba(15,23,42,0.2)] group-hover:scale-105 transition-transform duration-300">KAI</div>
+                    <span class="font-bold text-slate-900 text-xl tracking-tight leading-none group-hover:text-blue-600 transition-colors">Marketing<br/><span class="text-slate-400">Intelligence</span></span>
+                </div>
+                
+                <Transition name="fade-up" mode="out-in">
+                    <div :key="currentStep" class="min-h-[200px]">
+                        <span class="min-w-max inline-flex items-center justify-center px-4 py-2 rounded-xl bg-blue-50 text-blue-600 font-extrabold tracking-[0.2em] text-[10px] uppercase mb-8 shadow-sm border border-blue-100/50">
+                            Шаг {{ currentStep + 1 }} из {{ STEPS.length }}
+                        </span>
+                        <h1 class="text-[36px] leading-[1.05] font-black text-slate-900 tracking-[-0.04em] mb-4">
+                            {{ STEPS[currentStep] }}
+                        </h1>
+                        <p class="text-slate-500 text-lg leading-relaxed max-w-[280px] font-medium">
+                            {{ getStepDescription(currentStep) }}
+                        </p>
+                    </div>
+                </Transition>
+            </div>
+
+            <div class="relative z-10 w-full max-w-[280px]">
+                <div class="flex flex-col gap-6">
+                    <div v-for="(step, index) in STEPS" :key="index" class="flex items-center gap-5 group">
+                        <div class="relative flex items-center justify-center w-6 h-6">
+                            <div class="absolute inset-0 rounded-full transition-all duration-700" 
+                                 :class="index === currentStep ? 'bg-blue-600/20 scale-150' : 'bg-transparent'"></div>
+                            <div class="w-2.5 h-2.5 rounded-full transition-all duration-500 z-10" 
+                                 :class="index === currentStep ? 'bg-blue-600 scale-125' : (index < currentStep ? 'bg-slate-800' : 'bg-slate-200 group-hover:bg-slate-300')"></div>
+                        </div>
+                        <span class="text-[15px] font-bold transition-colors duration-500 tracking-tight"
+                              :class="index === currentStep ? 'text-slate-900' : (index < currentStep ? 'text-slate-800' : 'text-slate-400')">
+                            {{ step }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- RIGHT SIDE - The Form Content -->
+        <div class="flex-1 relative flex flex-col h-screen overflow-hidden">
+            <!-- Header for Mobile Only -->
+            <div class="lg:hidden p-6 bg-white border-b border-surface-200 flex items-center justify-between z-20 shadow-sm">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 bg-slate-900 text-white rounded-xl flex items-center justify-center font-black text-xs tracking-widest">KAI</div>
+                    <div>
+                        <span class="text-[10px] font-black uppercase text-blue-600 block leading-none mb-1">Шаг {{ currentStep + 1 }}</span>
+                        <span class="font-bold text-slate-900 text-sm tracking-tight">{{ STEPS[currentStep] }}</span>
+                    </div>
+                </div>
+                <Button icon="pi pi-times" text rounded class="text-slate-400" @click="$router.push('/marketing-analysis')" />
+            </div>
+
+            <div class="lg:absolute lg:top-8 lg:right-8 hidden lg:block z-50">
+                <Button icon="pi pi-times" text rounded class="w-12 h-12 bg-white/50 backdrop-blur-md shadow-sm border border-slate-200/50 text-slate-500 hover:text-slate-900 hover:bg-white hover:scale-110 transition-all duration-300" @click="$router.push('/marketing-analysis')" />
+            </div>
+
+            <div class="flex-1 overflow-y-auto scroll-smooth custom-scrollbar w-full pb-32">
+                <div class="w-full max-w-[760px] mx-auto px-6 py-12 md:py-20 lg:py-24">
+                    <Transition name="slide-up" mode="out-in">
+                        <div v-if="currentStep === 0" key="step-0" class="space-y-12">
+                            <StepSection title="Базовая информация">
+                                <div class="field md:col-span-2 space-y-3 relative group">
+                                    <label for="businessNiche" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Какая у вас ниша бизнеса? * </label>
+                                    <InputText id="businessNiche" v-model="formData.businessNiche" placeholder="Например: стоматология в Алматы" class="w-full massive-input shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.businessNiche }" />
+                                    <small v-if="errors.businessNiche" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.businessNiche }}</small>
+                                </div>
+
+                                <div class="field md:col-span-2 space-y-3 relative group">
+                                    <label for="productName" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Точное название бренда * </label>
+                                    <InputText id="productName" v-model="formData.productName" placeholder="Например: DentArt Clinic" class="w-full massive-input shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.productName }" />
+                                    <small v-if="errors.productName" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.productName }}</small>
+                                </div>
+
+                                <div class="field md:col-span-2 space-y-3 relative group">
+                                    <label for="goal" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Какая ваша главная цель сейчас? * </label>
+                                    <InputText id="goal" v-model="formData.goal" placeholder="Например: увеличить поток заявок" class="w-full massive-input shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.goal }" />
+                                    <small v-if="errors.goal" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.goal }}</small>
+                                </div>
+                            </StepSection>
+
+                            <StepSection title="Этап и формат бизнеса">
+                                <RadioGroupField v-model="formData.businessStage" label="На каком этапе развития находится бизнес?" :options="businessStageOptions" :error="errors.businessStage" @update:modelValue="formData.businessStage = $event" />
+                                <RadioGroupField v-model="formData.clientTarget" label="С кем вы в основном работаете (B2B / B2C)?" :options="clientTargetOptions" :error="errors.clientTarget" @update:modelValue="formData.clientTarget = $event" />
+                                <RadioGroupField v-model="formData.offerType" label="Каков основной тип вашего продукта?" :options="offerTypeOptions" :error="errors.offerType" @update:modelValue="formData.offerType = $event" />
+                            </StepSection>
+                        </div>
+
+                        <div v-else-if="currentStep === 1" key="step-1" class="space-y-12">
+                            <StepSection title="География и чек">
+                                <RadioGroupField v-model="formData.geoScope" label="Масштаб вашей работы:" :options="geoScopeOptions" :error="errors.geoScope" @update:modelValue="formData.geoScope = $event" />
+
+                                <div v-if="formData.geoScope === 'SINGLE_CITY'" class="field md:col-span-2 space-y-3 group">
+                                    <label for="mainCity" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Укажите основной город * </label>
+                                    <Dropdown id="mainCity" v-model="formData.mainCity" :options="KAZAKHSTAN_CITIES" filter placeholder="Выберите город" class="w-full massive-input dropdown shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.mainCity }" />
+                                    <small v-if="errors.mainCity" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.mainCity }}</small>
+                                </div>
+
+                                <div v-if="formData.geoScope === 'MULTI_CITY'" class="field md:col-span-2 space-y-3 group">
+                                    <label for="presenceCities" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Города вашего присутствия * </label>
+                                    <MultiSelect id="presenceCities" v-model="formData.presenceCities" :options="KAZAKHSTAN_CITIES" filter placeholder="Выберите города..." display="chip" class="w-full massive-input multiselect shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.presenceCities }" :maxSelectedLabels="10" />
+                                    <small v-if="errors.presenceCities" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.presenceCities }}</small>
+                                </div>
+
+                                <div class="field md:col-span-2 space-y-3 group">
+                                    <label for="promotionCities" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Где вы планируете запускать рекламу? * </label>
+                                    <MultiSelect id="promotionCities" v-model="formData.promotionCities" :options="KAZAKHSTAN_CITIES" filter placeholder="Выберите города..." display="chip" class="w-full massive-input multiselect shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.promotionCities }" :maxSelectedLabels="10" />
+                                    <small v-if="errors.promotionCities" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.promotionCities }}</small>
+                                </div>
+
+                                <RadioGroupField v-model="formData.averageCheck" label="Средний чек в вашем бизнесе:" :options="averageCheckOptions" :error="errors.averageCheck" @update:modelValue="formData.averageCheck = $event" />
+                            </StepSection>
+                        </div>
+
+                        <div v-else-if="currentStep === 2" key="step-2" class="space-y-12">
+                            <StepSection title="Продукт и поведение клиентов">
+                                <div class="field md:col-span-2 space-y-3 group">
+                                    <label for="productDescription" class="text-[11px] font-black uppercase tracking-widest text-slate-500 ml-1 transition-colors group-focus-within:text-blue-600"> Максимально подробно опишите продукт * </label>
+                                    <Textarea id="productDescription" v-model="formData.productDescription" placeholder="Например: Лечение зубов премиум-класса с использованием немецкого оборудования. Работаем на казахском, русском и английском языках." rows="5" class="w-full massive-input py-5 shadow-elegant" :class="{ 'p-invalid ring-2 ring-red-500/50': errors.productDescription }" />
+                                    <small v-if="errors.productDescription" class="text-[12px] font-bold text-red-500 pl-1">{{ errors.productDescription }}</small>
+                                </div>
+
+                                <RadioGroupField v-model="formData.purchaseFrequency" label="Как часто клиенты совершают покупку?" :options="purchaseFrequencyOptions" :error="errors.purchaseFrequency" @update:modelValue="formData.purchaseFrequency = $event" />
+                                <RadioGroupField v-model="formData.visualFactor" label="Насколько в вашей нише важен визуальный ряд?" :options="visualFactorOptions" :error="errors.visualFactor" @update:modelValue="formData.visualFactor = $event" />
+
+                                <CheckboxCardsField v-model="formData.customerBehaviors" label="Как клиенты проходят путь к покупке?" :options="customerBehaviorOptions" :error="errors.customerBehaviors" @update:modelValue="formData.customerBehaviors = $event" />
+                                <CheckboxCardsField v-model="formData.decisionPriorities" label="Что является решающим фактором покупки?" :options="decisionPriorityOptions" :error="errors.decisionPriorities" @update:modelValue="formData.decisionPriorities = $event" />
+                                <CheckboxCardsField v-model="formData.discoveryMethods" label="Откуда клиенты о вас узнают?" :options="discoveryMethodOptions" :error="errors.discoveryMethods" @update:modelValue="formData.discoveryMethods = $event" />
+                            </StepSection>
+                        </div>
+
+                        <div v-else-if="currentStep === 3" key="step-3" class="space-y-12">
+                            <StepSection title="Текущая ситуация и ресурсы">
+                                <RadioGroupField v-model="formData.smmStatus" label="На каком уровне находится ваш маркетинг сейчас?" :options="smmStatusOptions" :error="errors.smmStatus" @update:modelValue="formData.smmStatus = $event" />
+                                <RadioGroupField v-model="formData.leadVolume" label="Получаете ли вы сейчас заявки из интернета?" :options="leadVolumeOptions" :error="errors.leadVolume" @update:modelValue="formData.leadVolume = $event" />
+                                <RadioGroupField v-model="formData.responseHandler" label="Кто физически отвечает на заявки и звонки?" :options="responseHandlerOptions" :error="errors.responseHandler" @update:modelValue="formData.responseHandler = $event" />
+                                <RadioGroupField v-model="formData.priceFeedback" label="Реакция клиентов на вашу ценовую политику:" :options="priceFeedbackOptions" :error="errors.priceFeedback" @update:modelValue="formData.priceFeedback = $event" />
+                                <CheckboxCardsField v-model="formData.constraints" label="Какие факторы сдерживают ваш рост?" :options="businessConstraintOptions" :error="errors.constraints" @update:modelValue="formData.constraints = $event" />
+                            </StepSection>
+                        </div>
+                    </Transition>
+                </div>
+            </div>
+
+            <!-- Sticky Bold Footer -->
+            <div class="absolute bottom-0 right-0 left-0 lg:left-auto w-full h-auto bg-white/70 backdrop-blur-3xl border-t border-slate-200/60 z-50 px-6 py-5 md:px-12 flex items-center justify-between shadow-[0_-10px_40px_rgba(0,0,0,0.03)]">
+                <Button label="Назад" icon="pi pi-arrow-left" text class="font-bold text-[13px] tracking-tight text-slate-500 hover:text-slate-900 px-5 py-3.5 rounded-2xl transition-all" :disabled="currentStep === 0 || submitting" @click="goBack" />
+                
+                <div class="flex items-center">
+                    <Button v-if="currentStep < STEPS.length - 1" label="Продолжить" icon="pi pi-arrow-right" icon-pos="right" 
+                            class="bg-slate-900 border-none hover:bg-slate-800 text-white font-bold text-[14px] px-10 py-4 w-full sm:w-auto rounded-[18px] shadow-elegant-btn transition-all hover:-translate-y-1 hover:shadow-[0_12px_24px_rgba(15,23,42,0.25)]" @click="goNext" />
+                    
+                    <Button v-else label="Запустить AI Анализ" icon="pi pi-sparkles" icon-pos="right" 
+                            class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 border-none hover:brightness-110 text-white font-black text-[15px] px-10 py-4 w-full sm:w-auto rounded-[18px] shadow-[0_10px_30px_rgba(79,70,229,0.35)] transition-all hover:-translate-y-1 hover:shadow-[0_15px_40px_rgba(79,70,229,0.45)]" 
+                            :loading="submitting" :disabled="submitting" @click="handleSubmit" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
 <script setup>
 import MarketingV3Service from '@/service/MarketingV3Service';
 import {
@@ -41,11 +214,19 @@ const toast = useToast();
 
 const STEPS = ['Базовая информация', 'География и чек', 'Продукт и поведение', 'Текущая ситуация'];
 
+const getStepDescription = (index) => {
+    return [
+        'Расскажите нам о вашем бизнесе. Эти данные сформируют ядро анализа.',
+        'Определим масштаб рынка и ценовой сегмент для точного позиционирования.',
+        'Глубокое погружение в портрет вашего клиента и его паттерны поведения.',
+        'Оценка текущих маркетинговых активов и выявление точек роста.'
+    ][index] || '';
+};
+
 const currentStep = ref(0);
 const submitting = ref(false);
 const errors = ref({});
 
-// Form Data
 const formData = ref({
     businessNiche: '',
     productName: '',
@@ -75,124 +256,21 @@ const formData = ref({
     analysisType: ['РЫНОК', 'КОНКУРЕНТЫ', 'ЦА', 'КАНАЛЫ']
 });
 
-// Options для Radio Groups
-const businessStageOptions = computed(() =>
-    BusinessStages.map((value) => ({
-        value,
-        label: BusinessStageLabels[value]
-    }))
-);
-
-const clientTargetOptions = computed(() =>
-    ClientTargets.map((value) => ({
-        value,
-        label: ClientTargetLabels[value]
-    }))
-);
-
-const offerTypeOptions = computed(() =>
-    OfferTypes.map((value) => ({
-        value,
-        label: OfferTypeLabels[value]
-    }))
-);
-
-const geoScopeOptions = computed(() =>
-    GeoScopes.map((value) => ({
-        value,
-        label: GeoScopeLabels[value]
-    }))
-);
-
-const averageCheckOptions = computed(() =>
-    AverageChecks.map((value) => ({
-        value,
-        label: AverageCheckLabels[value]
-    }))
-);
-
-const purchaseFrequencyOptions = computed(() =>
-    PurchaseFrequencies.map((value) => ({
-        value,
-        label: PurchaseFrequencyLabels[value]
-    }))
-);
-
-const visualFactorOptions = computed(() =>
-    VisualFactors.map((value) => ({
-        value,
-        label: VisualFactorLabels[value]
-    }))
-);
-
-const customerBehaviorOptions = computed(() =>
-    CustomerBehaviors.map((value) => ({
-        value,
-        label: CustomerBehaviorLabels[value]
-    }))
-);
-
-const decisionPriorityOptions = computed(() =>
-    DecisionPriorities.map((value) => ({
-        value,
-        label: DecisionPriorityLabels[value]
-    }))
-);
-
-const discoveryMethodOptions = computed(() =>
-    DiscoveryMethods.map((value) => ({
-        value,
-        label: DiscoveryMethodLabels[value]
-    }))
-);
-
-const priceFeedbackOptions = computed(() =>
-    PriceFeedbacks.map((value) => ({
-        value,
-        label: PriceFeedbackLabels[value]
-    }))
-);
-
-const smmStatusOptions = computed(() =>
-    SmmStatuses.map((value) => ({
-        value,
-        label: SmmStatusLabels[value]
-    }))
-);
-
-const leadVolumeOptions = computed(() =>
-    LeadVolumes.map((value) => ({
-        value,
-        label: LeadVolumeLabels[value]
-    }))
-);
-
-const responseHandlerOptions = computed(() =>
-    ResponseHandlers.map((value) => ({
-        value,
-        label: ResponseHandlerLabels[value]
-    }))
-);
-
-const businessConstraintOptions = computed(() =>
-    BusinessConstraints.map((value) => ({
-        value,
-        label: BusinessConstraintLabels[value]
-    }))
-);
-
-const detailLevelOptions = [
-    { value: 'КРАТКО', label: 'Кратко — только главное' },
-    { value: 'СТАНДАРТНО', label: 'Стандартно — баланс деталей и скорости' },
-    { value: 'ПОДРОБНО', label: 'Максимально подробно — глубокий разбор' }
-];
-
-const analysisTypeOptions = [
-    { value: 'РЫНОК', label: 'Рынок и спрос' },
-    { value: 'КОНКУРЕНТЫ', label: 'Конкуренты и позиционирование' },
-    { value: 'ЦА', label: 'Целевая аудитория' },
-    { value: 'КАНАЛЫ', label: 'Каналы продвижения' }
-];
+const businessStageOptions = computed(() => BusinessStages.map(value => ({ value, label: BusinessStageLabels[value] })));
+const clientTargetOptions = computed(() => ClientTargets.map(value => ({ value, label: ClientTargetLabels[value] })));
+const offerTypeOptions = computed(() => OfferTypes.map(value => ({ value, label: OfferTypeLabels[value] })));
+const geoScopeOptions = computed(() => GeoScopes.map(value => ({ value, label: GeoScopeLabels[value] })));
+const averageCheckOptions = computed(() => AverageChecks.map(value => ({ value, label: AverageCheckLabels[value] })));
+const purchaseFrequencyOptions = computed(() => PurchaseFrequencies.map(value => ({ value, label: PurchaseFrequencyLabels[value] })));
+const visualFactorOptions = computed(() => VisualFactors.map(value => ({ value, label: VisualFactorLabels[value] })));
+const customerBehaviorOptions = computed(() => CustomerBehaviors.map(value => ({ value, label: CustomerBehaviorLabels[value] })));
+const decisionPriorityOptions = computed(() => DecisionPriorities.map(value => ({ value, label: DecisionPriorityLabels[value] })));
+const discoveryMethodOptions = computed(() => DiscoveryMethods.map(value => ({ value, label: DiscoveryMethodLabels[value] })));
+const priceFeedbackOptions = computed(() => PriceFeedbacks.map(value => ({ value, label: PriceFeedbackLabels[value] })));
+const smmStatusOptions = computed(() => SmmStatuses.map(value => ({ value, label: SmmStatusLabels[value] })));
+const leadVolumeOptions = computed(() => LeadVolumes.map(value => ({ value, label: LeadVolumeLabels[value] })));
+const responseHandlerOptions = computed(() => ResponseHandlers.map(value => ({ value, label: ResponseHandlerLabels[value] })));
+const businessConstraintOptions = computed(() => BusinessConstraints.map(value => ({ value, label: BusinessConstraintLabels[value] })));
 
 const KAZAKHSTAN_CITIES = [
     'Алматы', 'Астана', 'Шымкент', 'Актобе', 'Караганда', 
@@ -203,199 +281,79 @@ const KAZAKHSTAN_CITIES = [
     'Весь Казахстан', 'СНГ', 'Зарубежье', 'Онлайн (без привязки)'
 ].sort();
 
-// Валидация конкретного шага (запускается перед переходом)
 const validateStep = (stepIndex) => {
     let isValid = true;
-
     if (stepIndex === 0) {
-        if (!formData.value.businessNiche?.trim() || formData.value.businessNiche.trim().length < 2) {
-            errors.value.businessNiche = 'Введите не менее 2 символов';
-            isValid = false;
-        } else delete errors.value.businessNiche;
-
-        if (!formData.value.productName?.trim() || formData.value.productName.trim().length < 2) {
-            errors.value.productName = 'Введите не менее 2 символов';
-            isValid = false;
-        } else delete errors.value.productName;
-
-        if (!formData.value.goal?.trim() || formData.value.goal.trim().length < 5) {
-            errors.value.goal = 'Введите не менее 5 символов';
-            isValid = false;
-        } else delete errors.value.goal;
+        if (!formData.value.businessNiche?.trim() || formData.value.businessNiche.trim().length < 2) { errors.value.businessNiche = 'Минимум 2 символа'; isValid = false; } else delete errors.value.businessNiche;
+        if (!formData.value.productName?.trim() || formData.value.productName.trim().length < 2) { errors.value.productName = 'Минимум 2 символа'; isValid = false; } else delete errors.value.productName;
+        if (!formData.value.goal?.trim() || formData.value.goal.trim().length < 5) { errors.value.goal = 'Подробно опишите цель (мин. 5 символов)'; isValid = false; } else delete errors.value.goal;
     }
-
     if (stepIndex === 1) {
         if (formData.value.geoScope === 'SINGLE_CITY') {
-            if (!formData.value.mainCity?.trim()) {
-                errors.value.mainCity = 'Укажите основной город';
-                isValid = false;
-            } else {
-                delete errors.value.mainCity;
-            }
+            if (!formData.value.mainCity?.trim()) { errors.value.mainCity = 'Выберите город'; isValid = false; } else delete errors.value.mainCity;
         }
-
         if (formData.value.geoScope === 'MULTI_CITY') {
-            if (!formData.value.presenceCities?.length) {
-                errors.value.presenceCities = 'Укажите хотя бы один город присутствия';
-                isValid = false;
-            } else {
-                delete errors.value.presenceCities;
-            }
-        }
-
-        if (!formData.value.promotionCities?.length) {
-            errors.value.promotionCities = 'Укажите хотя бы один город для продвижения';
-            isValid = false;
-        } else {
-            delete errors.value.promotionCities;
+            if (!formData.value.presenceCities?.length) { errors.value.presenceCities = 'Надо выбрать хотя бы один город'; isValid = false; } else delete errors.value.presenceCities;
         }
+        if (!formData.value.promotionCities?.length) { errors.value.promotionCities = 'Выберите целевые города для рекламы'; isValid = false; } else delete errors.value.promotionCities;
     }
-
     if (stepIndex === 2) {
-        if (!formData.value.productDescription?.trim() || formData.value.productDescription.trim().length < 10) {
-            errors.value.productDescription = 'Введите подробное описание (не менее 10 символов)';
-            isValid = false;
-        } else delete errors.value.productDescription;
-
-        if (!formData.value.customerBehaviors?.length) {
-            errors.value.customerBehaviors = 'Выберите хотя бы один вариант';
-            isValid = false;
-        } else delete errors.value.customerBehaviors;
-
-        if (!formData.value.decisionPriorities?.length) {
-            errors.value.decisionPriorities = 'Выберите хотя бы один приоритет';
-            isValid = false;
-        } else delete errors.value.decisionPriorities;
-
-        if (!formData.value.discoveryMethods?.length) {
-            errors.value.discoveryMethods = 'Выберите хотя бы один вариант';
-            isValid = false;
-        } else delete errors.value.discoveryMethods;
+        if (!formData.value.productDescription?.trim() || formData.value.productDescription.trim().length < 10) { errors.value.productDescription = 'Опишите подробнее (минимум 10 символов)'; isValid = false; } else delete errors.value.productDescription;
+        if (!formData.value.customerBehaviors?.length) { errors.value.customerBehaviors = 'Укажите поведение ЦА'; isValid = false; } else delete errors.value.customerBehaviors;
+        if (!formData.value.decisionPriorities?.length) { errors.value.decisionPriorities = 'Укажите критерии выбора'; isValid = false; } else delete errors.value.decisionPriorities;
+        if (!formData.value.discoveryMethods?.length) { errors.value.discoveryMethods = 'Укажите каналы'; isValid = false; } else delete errors.value.discoveryMethods;
     }
-
     return isValid;
 };
 
-// Navigation
 const goNext = () => {
-    // ИСПРАВЛЕНИЕ: Блокируем переход, если шаг не заполнен
     if (validateStep(currentStep.value)) {
-        if (currentStep.value < STEPS.length - 1) {
-            currentStep.value++;
-        }
+        if (currentStep.value < STEPS.length - 1) currentStep.value++;
     } else {
-        toast.add({
-            severity: 'warn',
-            summary: 'Заполните поля',
-            detail: 'Пожалуйста, заполните все обязательные поля на этом шаге',
-            life: 3000
-        });
+        toast.add({ severity: 'warn', summary: 'Внимание', detail: 'Заполните ключевые поля перед продолжением.', life: 3000 });
     }
 };
 
-const goBack = () => {
-    if (currentStep.value > 0) {
-        currentStep.value--;
-    }
-};
+const goBack = () => { if (currentStep.value > 0) currentStep.value--; };
 
-const extractAnalysisId = (result) => {
-    if (!result) return null;
-    return (
-        result.analysisId ||
-        result.id ||
-        result.analysis?.id ||
-        result.analysis?.analysisId ||
-        result.data?.analysisId ||
-        result.data?.id ||
-        null
-    );
-};
+const extractAnalysisId = (result) => result?.analysisId || result?.id || result?.analysis?.id || null;
 
-// Submit
 const handleSubmit = async () => {
-    // Финальная проверка всех шагов перед отправкой на всякий случай
     let isAllValid = true;
     for (let i = 0; i < STEPS.length; i++) {
         if (!validateStep(i)) {
-            currentStep.value = i; // Возвращаем пользователя на шаг с ошибкой
+            currentStep.value = i;
             isAllValid = false;
-            toast.add({
-                severity: 'error',
-                summary: 'Ошибка валидации',
-                detail: `Пожалуйста, проверьте заполнение полей на шаге "${STEPS[i]}"`,
-                life: 5000
-            });
+            toast.add({ severity: 'error', summary: 'Ошибка валидации', detail: `Проверьте шаг "${STEPS[i]}"`, life: 5000 });
             break;
         }
     }
-
     if (!isAllValid) return;
 
     submitting.value = true;
     try {
-        const payload = {
-            ...formData.value,
-            discoveryMethods: formData.value.discoveryMethods || []
-        };
-
+        const payload = { ...formData.value, discoveryMethods: formData.value.discoveryMethods || [] };
         const result = await MarketingV3Service.startAnalysisV3(payload);
         const analysisId = extractAnalysisId(result);
-
         if (analysisId) {
-            toast.add({
-                severity: 'success',
-                summary: 'Анализ запущен',
-                detail: 'Маркетинговый анализ успешно запущен',
-                life: 3000
-            });
-
-            await router.push({
-                name: 'marketing-v3-analysis',
-                params: { id: String(analysisId) }
-            });
-
-            if (router.currentRoute.value.params.id !== String(analysisId)) {
-                window.location.assign(`/marketing-analysis/v3/${analysisId}`);
-            }
-        } else {
-            throw new Error('Не получен ID анализа');
-        }
+            toast.add({ severity: 'success', summary: 'Запуск AI', detail: 'Генерация стратегии успешно началась.', life: 3000 });
+            await router.push({ name: 'marketing-v3-analysis', params: { id: String(analysisId) } });
+        } else throw new Error('Не получен ID анализа');
     } catch (error) {
-        // ИСПРАВЛЕНИЕ: Теперь мы вытягиваем конкретную ошибку от бекенда (Axios)
-        const errorMessage = error.response?.data?.message || error.response?.data?.detail || error.message || 'Не удалось запустить анализ';
-
-        toast.add({
-            severity: 'error',
-            summary: 'Ошибка при отправке',
-            detail: errorMessage,
-            life: 6000
-        });
+        toast.add({ severity: 'error', summary: 'Сбой запуска', detail: error.response?.data?.message || error.message || 'Ошибка сервера', life: 6000 });
     } finally {
         submitting.value = false;
     }
 };
 
-// Watch geoScope для очистки зависимых полей
-watch(
-    () => formData.value.geoScope,
-    (newVal) => {
-        if (newVal === 'FULL_COUNTRY') {
-            formData.value.promotionCities = ['Весь Казахстан'];
-        } else if (newVal === 'ONLINE') {
-            formData.value.promotionCities = ['Онлайн (без привязки)'];
-        } else {
-            formData.value.promotionCities = [];
-        }
+watch(() => formData.value.geoScope, (newVal) => {
+    if (newVal === 'FULL_COUNTRY') formData.value.promotionCities = ['Весь Казахстан'];
+    else if (newVal === 'ONLINE') formData.value.promotionCities = ['Онлайн (без привязки)'];
+    else formData.value.promotionCities = [];
 
-        if (newVal !== 'SINGLE_CITY') {
-            formData.value.mainCity = '';
-        }
-        if (newVal !== 'MULTI_CITY') {
-            formData.value.presenceCities = [];
-        }
-    }
-);
+    if (newVal !== 'SINGLE_CITY') formData.value.mainCity = '';
+    if (newVal !== 'MULTI_CITY') formData.value.presenceCities = [];
+});
 </script>
 
 <script>
@@ -407,293 +365,122 @@ import StepSection from './wizard/StepSection.vue';
 import TagArrayField from './wizard/TagArrayField.vue';
 
 export default {
-    components: {
-        StepSection,
-        RadioGroupField,
-        CheckboxCardsLimitedField,
-        CheckboxCardsField,
-        TagArrayField,
-        DynamicLinksField
-    }
+    components: { StepSection, RadioGroupField, CheckboxCardsLimitedField, CheckboxCardsField, TagArrayField, DynamicLinksField }
 };
 </script>
 
-<template>
-    <div class="marketing-brief-wizard-v3 kai-page p-4 md:p-8">
-        <Toast />
-        <div class="max-w-3xl mx-auto">
-            <!-- Glass Card Container -->
-            <div class="kai-section min-h-[600px] flex flex-col">
-                <!-- 1. HEADER SECTION -->
-                <div class="kai-section-header flex flex-col gap-4">
-                    <div class="flex items-center justify-between gap-4">
-                        <div class="flex items-center gap-3">
-                            <div class="kai-logo">KAI</div>
-                            <div>
-                                <h1 class="kai-section-title">Бриф маркетингового анализа</h1>
-                                <p class="kai-section-sub">KAI Intelligence · Сбор данных для стратегии</p>
-                            </div>
-                        </div>
-                        <Button icon="pi pi-times" text rounded size="small" class="text-surface-500" @click="$router.push('/marketing-analysis')" />
-                    </div>
-
-                    <!-- Compact Stepper -->
-                    <div class="flex items-center gap-2 mt-2">
-                        <div v-for="(label, index) in STEPS" :key="index" 
-                             class="h-1 rounded-full flex-1 transition-all duration-500"
-                             :class="[
-                                 index <= currentStep ? 'bg-blue-500 shadow-[0_0_8px_rgba(45,123,255,0.4)]' : 'bg-slate-200'
-                             ]">
-                        </div>
-                    </div>
-
-                    <div class="flex justify-between items-center text-[9px] font-black uppercase tracking-widest text-surface-500">
-                        <span>Шаг {{ currentStep + 1 }} из {{ STEPS.length }}</span>
-                        <span class="text-blue-500">{{ STEPS[currentStep] }}</span>
-                        <span class="text-surface-600">~6 минут</span>
-                    </div>
-                </div>
-
-                <div class="kai-section-body flex-1 overflow-y-auto max-h-[65vh] custom-scrollbar">
-                    <Transition name="slide-fade" mode="out-in">
-                        <div v-if="currentStep === 0" key="step-0" class="space-y-6 lg:space-y-8 pb-4">
-                            <StepSection title="Базовая информация">
-                                <div class="field md:col-span-2 space-y-1.5">
-                                    <label for="businessNiche" class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400"> Ниша бизнеса * </label>
-                                    <InputText id="businessNiche" v-model="formData.businessNiche" placeholder="Например: стоматология в Алматы" class="w-full kai-input text-xs" :class="{ 'p-invalid': errors.businessNiche }" />
-                                    <small v-if="errors.businessNiche" class="text-[10px] font-bold text-red-500 uppercase tracking-tight">{{ errors.businessNiche }}</small>
-                                </div>
-
-                                <div class="field md:col-span-2 space-y-1.5">
-                                    <label for="productName" class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400"> Название бренда * </label>
-                                    <InputText id="productName" v-model="formData.productName" placeholder="Например: DentArt Clinic" class="w-full kai-input text-xs" :class="{ 'p-invalid': errors.productName }" />
-                                    <small v-if="errors.productName" class="text-[10px] font-bold text-red-500 uppercase tracking-tight">{{ errors.productName }}</small>
-                                </div>
-
-                                <div class="field md:col-span-2 space-y-1.5">
-                                    <label for="goal" class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400"> Главная цель * </label>
-                                    <InputText id="goal" v-model="formData.goal" placeholder="Например: увеличить поток заявок" class="w-full kai-input text-xs" :class="{ 'p-invalid': errors.goal }" />
-                                    <small v-if="errors.goal" class="text-[10px] font-bold text-red-500 uppercase tracking-tight">{{ errors.goal }}</small>
-                                </div>
-                            </StepSection>
-
-                            <StepSection title="Этап и формат бизнеса">
-                                <RadioGroupField v-model="formData.businessStage" label="Этап развития бизнеса" :options="businessStageOptions" :error="errors.businessStage" @update:modelValue="formData.businessStage = $event" />
-
-                                <RadioGroupField v-model="formData.clientTarget" label="Для кого вы работаете в первую очередь?" :options="clientTargetOptions" :error="errors.clientTarget" @update:modelValue="formData.clientTarget = $event" />
-
-                                <RadioGroupField v-model="formData.offerType" label="Что вы продаёте?" :options="offerTypeOptions" :error="errors.offerType" @update:modelValue="formData.offerType = $event" />
-                            </StepSection>
-                        </div>
-
-                        <div v-else-if="currentStep === 1" key="step-1" class="space-y-5">
-                            <StepSection title="География и чек">
-                                <RadioGroupField v-model="formData.geoScope" label="Где вы работаете?" :options="geoScopeOptions" :error="errors.geoScope" @update:modelValue="formData.geoScope = $event" />
-
-                                <div v-if="formData.geoScope === 'SINGLE_CITY'" class="field md:col-span-2 space-y-1.5">
-                                    <label for="mainCity" class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400"> Основной город * </label>
-                                    <Dropdown id="mainCity" v-model="formData.mainCity" :options="KAZAKHSTAN_CITIES" filter placeholder="Выберите из базы" class="w-full kai-input text-xs" :class="{ 'p-invalid': errors.mainCity }" />
-                                    <small v-if="errors.mainCity" class="text-[10px] font-bold text-red-500 uppercase tracking-tight">{{ errors.mainCity }}</small>
-                                </div>
-
-                                <div v-if="formData.geoScope === 'MULTI_CITY'" class="field md:col-span-2">
-                                    <label for="presenceCities" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Города присутствия * </label>
-                                    <MultiSelect
-                                        id="presenceCities"
-                                        v-model="formData.presenceCities"
-                                        :options="KAZAKHSTAN_CITIES"
-                                        filter
-                                        placeholder="Выберите города из списка..."
-                                        display="chip"
-                                        class="w-full"
-                                        :class="{ 'p-invalid': errors.presenceCities }"
-                                        :maxSelectedLabels="10"
-                                    />
-                                    <small v-if="errors.presenceCities" class="p-error">{{ errors.presenceCities }}</small>
-                                </div>
-
-                                <div class="field md:col-span-2">
-                                    <label for="promotionCities" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Города, где хотите усиливать продвижение * </label>
-                                    <MultiSelect
-                                        id="promotionCities"
-                                        v-model="formData.promotionCities"
-                                        :options="KAZAKHSTAN_CITIES"
-                                        filter
-                                        placeholder="Выберите города из списка..."
-                                        display="chip"
-                                        class="w-full"
-                                        :class="{ 'p-invalid': errors.promotionCities }"
-                                        :maxSelectedLabels="10"
-                                    />
-                                    <small v-if="errors.promotionCities" class="p-error">{{ errors.promotionCities }}</small>
-                                </div>
-
-                                <RadioGroupField v-model="formData.averageCheck" label="Средний чек" :options="averageCheckOptions" :error="errors.averageCheck" @update:modelValue="formData.averageCheck = $event" />
-                            </StepSection>
-                        </div>
-
-                        <div v-else-if="currentStep === 2" key="step-2" class="space-y-5">
-                            <StepSection title="Продукт и поведение клиентов">
-                                <div class="field md:col-span-2">
-                                    <label for="productDescription" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Опишите продукт или услугу простыми словами * </label>
-                                    <Textarea
-                                        id="productDescription"
-                                        v-model="formData.productDescription"
-                                        placeholder="Например: Лечение зубов премиум-класса с использованием немецкого оборудования. Работаем на казахском, русском и английском языках."
-                                        rows="4"
-                                        class="w-full"
-                                        :class="{ 'p-invalid': errors.productDescription }"
-                                    />
-                                    <small v-if="errors.productDescription" class="p-error">{{ errors.productDescription }}</small>
-                                </div>
-
-                                <RadioGroupField
-                                    v-model="formData.purchaseFrequency"
-                                    label="Как часто клиенты обычно покупают?"
-                                    :options="purchaseFrequencyOptions"
-                                    :error="errors.purchaseFrequency"
-                                    @update:modelValue="formData.purchaseFrequency = $event"
-                                />
-
-                                <RadioGroupField v-model="formData.visualFactor" label="Насколько для вашей ниши важен визуал?" :options="visualFactorOptions" :error="errors.visualFactor" @update:modelValue="formData.visualFactor = $event" />
-
-                                <CheckboxCardsField
-                                    v-model="formData.customerBehaviors"
-                                    label="Как клиенты обычно принимают решение?"
-                                    :options="customerBehaviorOptions"
-                                    :error="errors.customerBehaviors"
-                                    @update:modelValue="formData.customerBehaviors = $event"
-                                />
-                                <small v-if="errors.customerBehaviors" class="p-error">{{ errors.customerBehaviors }}</small>
-
-                                <CheckboxCardsField
-                                    v-model="formData.decisionPriorities"
-                                    label="Что для клиентов важнее всего при выборе?"
-                                    :options="decisionPriorityOptions"
-                                    :error="errors.decisionPriorities"
-                                    @update:modelValue="formData.decisionPriorities = $event"
-                                />
-                                <small v-if="errors.decisionPriorities" class="p-error">{{ errors.decisionPriorities }}</small>
-
-                                <CheckboxCardsField
-                                    v-model="formData.discoveryMethods"
-                                    label="Как клиенты обычно находят вас?"
-                                    :options="discoveryMethodOptions"
-                                    :error="errors.discoveryMethods"
-                                    @update:modelValue="formData.discoveryMethods = $event"
-                                />
-                                <small v-if="errors.discoveryMethods" class="p-error">{{ errors.discoveryMethods }}</small>
-                            </StepSection>
-                        </div>
-
-                        <div v-else-if="currentStep === 3" key="step-3" class="space-y-5">
-                            <StepSection title="Текущая ситуация и ресурсы">
-                                <RadioGroupField v-model="formData.smmStatus" label="Как сейчас обстоят дела с соцсетями?" :options="smmStatusOptions" :error="errors.smmStatus" @update:modelValue="formData.smmStatus = $event" />
-
-                                <RadioGroupField v-model="formData.leadVolume" label="Приходят ли заявки из онлайн-каналов?" :options="leadVolumeOptions" :error="errors.leadVolume" @update:modelValue="formData.leadVolume = $event" />
-
-                                <RadioGroupField v-model="formData.responseHandler" label="Кто чаще всего отвечает на заявки?" :options="responseHandlerOptions" :error="errors.responseHandler" @update:modelValue="formData.responseHandler = $event" />
-
-                                <RadioGroupField v-model="formData.priceFeedback" label="Как клиенты чаще всего реагируют на цену?" :options="priceFeedbackOptions" :error="errors.priceFeedback" @update:modelValue="formData.priceFeedback = $event" />
-
-                                <CheckboxCardsField
-                                    v-model="formData.constraints"
-                                    label="Есть ли у бизнеса ограничения, которые нужно учесть?"
-                                    :options="businessConstraintOptions"
-                                    :error="errors.constraints"
-                                    @update:modelValue="formData.constraints = $event"
-                                />
-                            </StepSection>
-                        </div>
-                    </Transition>
-                </div>
-
-                <!-- 3. FOOTER SECTION -->
-                <div class="p-6 border-t border-surface-100 bg-white/80 backdrop-blur-sm flex flex-col sm:flex-row items-center justify-between gap-4">
-                    <Button label="Назад" icon="pi pi-arrow-left" severity="secondary" text class="font-bold text-[11px] uppercase tracking-widest" :disabled="currentStep === 0 || submitting" @click="goBack" />
-                    
-                    <div class="flex items-center gap-3 w-full sm:w-auto">
-                        <Button v-if="currentStep < STEPS.length - 1" label="Далее" icon="pi pi-arrow-right" icon-pos="right" 
-                                class="w-full sm:w-48 bg-blue-600 hover:bg-blue-500 border-none font-bold text-[11px] uppercase tracking-widest h-10 shadow-lg shadow-blue-900/20" @click="goNext" />
-                        <Button v-else label="Запустить анализ" icon="pi pi-bolt" icon-pos="right" 
-                                class="w-full sm:w-64 bg-emerald-600 hover:bg-emerald-500 border-none font-black text-[11.5px] uppercase tracking-widest h-11" 
-                                :loading="submitting" :disabled="submitting" @click="handleSubmit" />
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</template>
-
 <style scoped>
-.kai-input {
-    background: rgba(255, 255, 255, 0.03) !important;
-    border: 1px solid rgba(45, 123, 255, 0.15) !important;
-    border-radius: 12px !important;
-    color: var(--kai-txt) !important;
-    transition: all 0.3s;
+/* MASSIVE PREMIUM INPUTS */
+.massive-input {
+    background: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 16px !important;
+    color: #0f172a !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    padding: 18px 22px !important;
+    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease !important;
+    font-family: 'Onest', sans-serif !important;
 }
 
-.kai-input:focus {
-    background: rgba(255, 255, 255, 0.06) !important;
-    border-color: var(--kai-blue) !important;
-    box-shadow: 0 0 15px rgba(45, 123, 255, 0.1) !important;
+.massive-input::placeholder {
+    color: #94a3b8 !important;
+    font-weight: 400 !important;
 }
 
-.kai-input::placeholder {
-    color: var(--kai-txt3) !important;
-    font-size: 11px;
+.massive-input:hover {
+    border-color: #cbd5e1 !important;
 }
 
-.custom-scrollbar::-webkit-scrollbar {
-    width: 4px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--kai-border);
-    border-radius: 999px;
+.massive-input:focus, .massive-input.p-focus {
+    background: #ffffff !important;
+    border-color: #2563eb !important;
+    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12) !important;
+    transform: translateY(-2px);
+    outline: none !important;
 }
 
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.shadow-elegant {
+    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02), 0 0 0 1px rgba(255,255,255,1) inset !important;
 }
 
-.slide-fade-enter-from {
-    opacity: 0;
-    transform: translateY(10px);
+.shadow-elegant-btn {
+    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.15) !important;
 }
 
-.slide-fade-leave-to {
-    opacity: 0;
-    transform: translateY(-10px);
-}
-
-:deep(.p-dropdown), :deep(.p-multiselect) {
-    background: rgba(255, 255, 255, 0.03) !important;
-    border: 1px solid rgba(45, 123, 255, 0.15) !important;
-    border-radius: 12px;
+/* Dropdowns overrides */
+:deep(.p-dropdown.massive-input.dropdown), :deep(.p-multiselect.massive-input.multiselect) {
+    padding: 4px !important;
+    display: flex;
+    align-items: center;
 }
 
 :deep(.p-dropdown-label), :deep(.p-multiselect-label) {
-    font-size: 11.5px !important;
-    color: var(--kai-txt) !important;
-    padding: 10px 14px !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    color: #0f172a !important;
+    padding: 14px 18px !important;
 }
 
-:deep(.p-inputtext) {
-    font-size: 11.5px !important;
-    padding: 10px 14px;
+:deep(.p-dropdown-label.p-placeholder), :deep(.p-multiselect-label.p-placeholder) {
+    color: #94a3b8 !important;
 }
 
 :deep(.p-multiselect-token) {
-    background: rgba(var(--kai-blue-rgb), 0.15) !important;
-    color: var(--kai-blue) !important;
-    font-size: 10px !important;
+    background: #eff6ff !important;
+    color: #2563eb !important;
+    font-size: 13px !important;
     font-weight: 700 !important;
-    border-radius: 6px !important;
+    border-radius: 10px !important;
+    padding: 6px 12px !important;
+    margin-right: 8px !important;
+    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1);
 }
+
+/* Animations */
+@keyframes slow-pan {
+    0% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-3%, 5%) scale(1.05); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes slow-pan-reverse {
+    0% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(4%, -6%) scale(1.05); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+.animate-slow-pan { animation: slow-pan 20s ease-in-out infinite; }
+.animate-slow-pan-reverse { animation: slow-pan-reverse 25s ease-in-out infinite; }
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.slide-up-enter-from {
+    opacity: 0;
+    transform: translateY(30px);
+}
+.slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+    position: absolute;
+    width: 100%;
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fade-up-enter-from { opacity: 0; transform: translateY(15px); }
+.fade-up-leave-to { opacity: 0; transform: translateY(-15px); }
+
+/* Scrollbar customization */
+.custom-scrollbar::-webkit-scrollbar { width: 8px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 999px;
+    border: 3px solid #F8FAFC;
+    background-clip: padding-box;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/InfoTooltip.vue b/src/components/marketing/dashboard-v3/v4/InfoTooltip.vue
new file mode 100644
index 0000000..c57a31e
--- /dev/null
+++ b/src/components/marketing/dashboard-v3/v4/InfoTooltip.vue
@@ -0,0 +1,167 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+const props = defineProps({
+    text: { type: String, required: true },
+    align: { type: String, default: 'top' }
+});
+
+const open = ref(false);
+const root = ref(null);
+const bubbleStyle = ref({});
+const placementClass = computed(() => `info-tooltip__bubble--${props.align}`);
+
+const updatePosition = () => {
+    if (!open.value || !root.value) return;
+
+    const rect = root.value.getBoundingClientRect();
+    const gap = 12;
+    const viewportWidth = window.innerWidth;
+    const maxWidth = Math.min(320, viewportWidth - 24);
+    let left = rect.left + rect.width / 2;
+    let top = rect.top - gap;
+    let transform = 'translate(-50%, -100%)';
+
+    if (props.align === 'right') {
+        left = rect.right + gap;
+        top = rect.top + rect.height / 2;
+        transform = 'translate(0, -50%)';
+    } else if (props.align === 'left') {
+        left = rect.left - gap;
+        top = rect.top + rect.height / 2;
+        transform = 'translate(-100%, -50%)';
+    }
+
+    bubbleStyle.value = {
+        position: 'fixed',
+        top: `${top}px`,
+        left: `${left}px`,
+        transform,
+        maxWidth: `${maxWidth}px`
+    };
+};
+
+const close = () => {
+    open.value = false;
+};
+
+const onPointerDown = (event) => {
+    if (!root.value?.contains(event.target)) {
+        close();
+    }
+};
+
+watch(open, async (isOpen) => {
+    if (isOpen) {
+        await nextTick();
+        updatePosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        document.addEventListener('pointerdown', onPointerDown);
+        return;
+    }
+
+    window.removeEventListener('scroll', updatePosition, true);
+    window.removeEventListener('resize', updatePosition);
+    document.removeEventListener('pointerdown', onPointerDown);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', updatePosition, true);
+    window.removeEventListener('resize', updatePosition);
+    document.removeEventListener('pointerdown', onPointerDown);
+});
+</script>
+
+<template>
+    <span
+        ref="root"
+        class="info-tooltip"
+        tabindex="0"
+        @mouseenter="open = true"
+        @mouseleave="open = false"
+        @focus="open = true"
+        @blur="open = false"
+        @click.stop="open = !open"
+    >
+        <button class="info-tooltip__trigger" type="button" aria-label="Пояснение">
+            <i class="pi pi-info-circle" />
+        </button>
+
+        <Teleport to="body">
+            <transition name="info-tooltip-pop">
+                <span v-if="open" class="info-tooltip__bubble" :class="placementClass" :style="bubbleStyle">
+                    {{ text }}
+                </span>
+            </transition>
+        </Teleport>
+    </span>
+</template>
+
+<style scoped>
+.info-tooltip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-tooltip__trigger {
+    width: 22px;
+    height: 22px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--kai-txt3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 0.18s ease;
+    box-shadow: 0 4px 16px rgba(45, 123, 255, 0.08);
+}
+
+.info-tooltip__trigger:hover,
+.info-tooltip__trigger:focus-visible {
+    color: var(--mk-primary, var(--kai-blue));
+    border-color: rgba(45, 123, 255, 0.22);
+    transform: translateY(-1px);
+    outline: none;
+    box-shadow: 0 8px 24px rgba(45, 123, 255, 0.14);
+}
+
+.info-tooltip__bubble {
+    z-index: 2000;
+    width: min(280px, calc(100vw - 24px));
+    padding: 12px 14px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+    color: var(--kai-txt2);
+    font-size: 12px;
+    line-height: 1.5;
+    font-weight: 500;
+    backdrop-filter: blur(18px);
+    pointer-events: none;
+}
+
+.info-tooltip-pop-enter-active,
+.info-tooltip-pop-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.info-tooltip-pop-enter-from,
+.info-tooltip-pop-leave-to {
+    opacity: 0;
+}
+
+.info-tooltip-pop-enter-from {
+    transform: scale(0.94);
+}
+
+.info-tooltip-pop-leave-to {
+    transform: scale(0.98);
+}
+ </style>
diff --git a/src/components/marketing/dashboard-v3/v4/SectionWrapper.vue b/src/components/marketing/dashboard-v3/v4/SectionWrapper.vue
index 7fea46d..ca9b6fd 100644
--- a/src/components/marketing/dashboard-v3/v4/SectionWrapper.vue
+++ b/src/components/marketing/dashboard-v3/v4/SectionWrapper.vue
@@ -1,21 +1,39 @@
 <script setup>
-defineProps({
+import { computed } from 'vue';
+import { useScrollReveal } from '@/composables/useScrollReveal';
+import InfoTooltip from './InfoTooltip.vue';
+
+const props = defineProps({
     id: { type: String, default: '' },
     title: { type: String, required: true },
     subtitle: { type: String, default: '' },
-    num: { type: [String, Number], default: '' }
+    num: { type: [String, Number], default: '' },
+    eyebrow: { type: String, default: '' },
+    info: { type: String, default: '' }
 });
+
+const { target, revealed } = useScrollReveal();
+const sectionClass = computed(() => ({ 'kai-section--revealed': revealed.value }));
 </script>
 
 <template>
-    <section :id="id" class="kai-section scroll-mt-20">
+    <section ref="target" :id="id" class="kai-section scroll-mt-28" :class="sectionClass">
         <div class="kai-section-header">
-            <div class="flex items-start justify-between gap-4">
-                <div>
-                    <h2 class="kai-section-title">{{ title }}</h2>
+            <div class="kai-section-header-inner">
+                <div class="kai-section-copy">
+                    <div class="kai-section-row">
+                        <span v-if="eyebrow || num" class="kai-section-eyebrow">
+                            {{ eyebrow || `Раздел ${String(num)}` }}
+                        </span>
+                        <span v-if="num" class="kai-section-badge">{{ String(num) }}</span>
+                    </div>
+                    <div class="kai-section-row kai-section-row--title">
+                        <h2 class="kai-section-title">{{ title }}</h2>
+                        <InfoTooltip v-if="info" :text="info" />
+                    </div>
                     <p v-if="subtitle" class="kai-section-sub">{{ subtitle }}</p>
                 </div>
-                <span v-if="num" class="kai-section-badge">{{ String(num).padStart(2, '0') }}</span>
+                <slot name="actions" />
             </div>
         </div>
         <div class="kai-section-body">
@@ -23,3 +41,103 @@ defineProps({
         </div>
     </section>
 </template>
+
+<style scoped>
+.kai-section {
+    position: relative;
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.55s ease, transform 0.55s ease;
+}
+
+.kai-section--revealed {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.kai-section-header {
+    margin-bottom: 22px;
+}
+
+.kai-section-header-inner {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+}
+
+.kai-section-copy {
+    max-width: 860px;
+}
+
+.kai-section-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.kai-section-row--title {
+    margin-top: 10px;
+    align-items: flex-start;
+    gap: 14px;
+}
+
+.kai-section-eyebrow {
+    color: #6c87b3;
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+}
+
+.kai-section-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    height: 28px;
+    padding: 0 12px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    color: var(--mk-primary, var(--kai-blue));
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+}
+
+.kai-section-title {
+    margin: 0;
+    flex: 0 1 auto;
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: clamp(28px, 3vw, 40px);
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.04em;
+}
+
+.kai-section-sub {
+    margin: 12px 0 0;
+    color: #617698;
+    font-size: 15px;
+    line-height: 1.7;
+    max-width: 740px;
+}
+
+@media (max-width: 768px) {
+    .kai-section-header-inner {
+        flex-direction: column;
+    }
+
+    .kai-section-title {
+        font-size: 26px;
+    }
+
+    .kai-section-sub {
+        font-size: 14px;
+    }
+}
+</style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Behavioral.vue b/src/components/marketing/dashboard-v3/v4/V4Behavioral.vue
index acf3109..8ef27d4 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Behavioral.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Behavioral.vue
@@ -1,302 +1,224 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
-const fmtPct = (n) => n != null ? parseFloat(n).toFixed(1) + '%' : '—';
 
-const behaviors = computed(() => [
-  { icon:'pi-ticket', label:'Акции и скидки', val: props.data?.promoUsagePercent || 0, desc:'Конкурентов используют акции', color:'var(--kai-orange)', tip: 'Процент успешных конкурентов с промо-предложениями' },
-  { icon:'pi-dollar', label:'Открытые цены', val: props.data?.priceVisibilityPercent || 0, desc:'Указывают цены открыто', color:'var(--kai-purple)', tip: 'Процент компаний, пишущих цены в постах' },
-  { icon:'pi-calendar-plus', label:'Прямое бронирование', val: props.data?.directBookingPercent || 0, desc:'Призывы к записи/брони', color:'var(--kai-blue)', tip: 'Наличие прямой ссылки на бронирование/заявку' },
+const formatPercent = (value) => `${Number(value || 0).toFixed(1)}%`;
+
+const rows = computed(() => [
+    {
+        label: 'Акции и скидки',
+        value: Number(props.data?.promoUsagePercent) || 0,
+        hint: 'Как часто конкуренты усиливают продажи через спецпредложения',
+        color: '#F97316',
+        icon: 'pi pi-tags'
+    },
+    {
+        label: 'Открытые цены',
+        value: Number(props.data?.priceVisibilityPercent) || 0,
+        hint: 'Доля игроков, которые не прячут цены в директ',
+        color: '#7C3AED',
+        icon: 'pi pi-wallet'
+    },
+    {
+        label: 'Прямое бронирование',
+        value: Number(props.data?.directBookingPercent) || 0,
+        hint: 'Есть ли явный путь к заявке, записи или заказу',
+        color: '#2D7BFF',
+        icon: 'pi pi-send'
+    }
 ]);
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Поведение рынка" subtitle="Анализ методов взаимодействия конкурентов с аудиторией" num="7">
-    <div class="behavior-grid">
-      
-      <!-- LEFT: BARS -->
-      <div class="behavior-bars-col">
-        <div class="bars-container">
-          <div v-for="b in behaviors" :key="b.label" class="behavior-item">
-            <div class="item-header">
-              <div class="item-title-group">
-                <div class="item-icon-box" :style="{ color: b.color, background: b.color + '15' }">
-                  <i class="pi" :class="b.icon"></i>
+    <SectionWrapper
+        :id="id"
+        title="Поведение конкурентов"
+        subtitle="Смотрим, как игроки рынка подталкивают клиента к действию: через акции, прозрачность цены и прямой путь к заявке."
+        num="7"
+        eyebrow="Поведение"
+        info="Этот блок помогает быстро понять, какие приёмы продаж рынок уже считает нормой и чего ждёт клиент."
+    >
+        <div class="behavior-grid">
+            <article class="behavior-bars">
+                <div v-for="row in rows" :key="row.label" class="behavior-row">
+                    <div class="behavior-row__top">
+                        <div class="behavior-row__icon" :style="{ color: row.color, background: `color-mix(in srgb, ${row.color} 12%, white)` }">
+                            <i :class="row.icon" />
+                        </div>
+                        <div class="behavior-row__copy">
+                            <div class="behavior-row__label">{{ row.label }}</div>
+                            <div class="behavior-row__hint">{{ row.hint }}</div>
+                        </div>
+                        <div class="behavior-row__value" :style="{ color: row.color }">{{ formatPercent(row.value) }}</div>
+                    </div>
+                    <div class="behavior-row__bar">
+                        <span class="behavior-row__fill" :style="{ width: `${row.value}%`, background: `linear-gradient(90deg, ${row.color}, color-mix(in srgb, ${row.color} 65%, white))` }" />
+                    </div>
                 </div>
-                <div class="item-info">
-                  <span class="item-label">
-                    {{ b.label }}
-                    <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="b.tip"></i>
-                  </span>
-                  <span class="item-desc">{{ b.desc }}</span>
+            </article>
+
+            <article class="behavior-cta">
+                <div class="behavior-cta__title">Популярные CTA у конкурентов</div>
+                <div class="behavior-cta__list">
+                    <span v-for="cta in data?.commonCta || []" :key="cta" class="behavior-cta__tag">
+                        {{ cta }}
+                    </span>
+                    <span v-if="!(data?.commonCta || []).length" class="behavior-cta__empty">CTA ещё не собраны.</span>
                 </div>
-              </div>
-              <span class="item-val" :style="{ color: b.color }">{{ fmtPct(b.val) }}</span>
-            </div>
-            <div class="kai-progress-track">
-              <div class="kai-progress-fill" :style="{ width: b.val+'%', background: b.color }" />
-            </div>
-          </div>
-        </div>
 
-        <!-- Cycle days box -->
-        <div class="cycle-box">
-          <div class="cycle-icon">
-            <i class="pi pi-history"></i>
-          </div>
-          <div class="cycle-text">
-            <div class="cycle-label">
-              Цикл публикаций
-              <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="'Средний интервал между постами конкурентов'"></i>
-            </div>
-            <div class="cycle-val">
-              {{ data?.avgCycleDays || '—' }} 
-              <span class="unit">дней</span>
-            </div>
-          </div>
-          <div class="cycle-badge" :class="{ ok: parseFloat(data?.avgCycleDays) <= 3 }">
-            {{ parseFloat(data?.avgCycleDays) <= 3 ? 'HIGH ACTIVITY' : 'MODERATE' }}
-          </div>
+                <div class="behavior-cycle">
+                    <span class="behavior-cycle__label">Средний цикл публикаций</span>
+                    <span class="behavior-cycle__value">{{ data?.avgCycleDays || '—' }} дня</span>
+                </div>
+            </article>
         </div>
-      </div>
-
-      <!-- RIGHT: CTA LIST -->
-      <div class="behavior-cta-col">
-        <h4 class="cta-title">Популярные призывы (CTA)</h4>
-        <div class="cta-cloud">
-          <div v-for="(cta, i) in (data?.commonCta || [])" :key="i" class="cta-tag">
-            <span class="cta-idx">#{{ i+1 }}</span>
-            <span class="cta-text">"{{ cta }}"</span>
-          </div>
-          <div v-if="!data?.commonCta?.length" class="empty-cta">Нет данных</div>
-        </div>
-        
-        <div class="cta-suggestion">
-          <i class="pi pi-lightbulb mr-2 text-green-500" />
-          <span>Эти формулировки проверены рынком и имеют высокий отклик.</span>
-        </div>
-      </div>
-
-    </div>
-  </SectionWrapper>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .behavior-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
-  align-items: start;
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) 360px;
+    gap: 20px;
 }
 
-.behavior-bars-col {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.behavior-bars,
+.behavior-cta {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.bars-container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 20px;
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
+.behavior-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 }
 
-.behavior-item {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.behavior-row {
+    padding: 18px;
+    border-radius: 22px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.behavior-row__top {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) auto;
+    gap: 14px;
+    align-items: center;
 }
 
-.item-title-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.behavior-row__icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
 }
 
-.item-icon-box {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.behavior-row__label {
+    color: #173053;
+    font-size: 15px;
+    font-weight: 800;
 }
 
-.item-icon-box i {
-  font-size: 14px;
+.behavior-row__hint {
+    margin-top: 6px;
+    color: #6a7f9f;
+    font-size: 13px;
+    line-height: 1.5;
 }
 
-.item-info {
-  display: flex;
-  flex-direction: column;
+.behavior-row__value {
+    font-family: 'Onest', sans-serif;
+    font-size: 28px;
+    font-weight: 900;
+    letter-spacing: -0.04em;
 }
 
-.item-label {
-  font-size: 11.5px;
-  font-weight: 700;
-  color: var(--kai-txt);
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.behavior-row__bar {
+    margin-top: 16px;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.item-desc {
-  font-size: 10px;
-  color: var(--kai-txt3);
-  opacity: 0.6;
+.behavior-row__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
 }
 
-.item-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 16px;
-  font-weight: 800;
+.behavior-cta__title {
+    color: #173053;
+    font-family: 'Onest', sans-serif;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-/* Cycle Box */
-.cycle-box {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 16px 20px;
-  background: rgba(0,0,0,0.15);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
+.behavior-cta__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 18px;
 }
 
-.cycle-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  background: rgba(var(--kai-blue-rgb), 0.1);
-  color: var(--kai-blue);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
+.behavior-cta__tag,
+.behavior-cta__empty {
+    min-height: 40px;
+    padding: 0 14px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
+    font-size: 13px;
+    font-weight: 700;
 }
 
-.cycle-text {
-  flex: 1;
+.behavior-cta__empty {
+    color: #7e93b4;
+    background: rgba(248, 250, 255, 0.9);
 }
 
-.cycle-label {
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
-  margin-bottom: 2px;
+.behavior-cycle {
+    margin-top: 22px;
+    padding: 18px;
+    border-radius: 20px;
+    background: rgba(16, 185, 129, 0.08);
+    border: 1px solid rgba(16, 185, 129, 0.12);
 }
 
-.cycle-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--kai-txt);
+.behavior-cycle__label {
+    display: block;
+    color: #3e8a73;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-.cycle-val .unit {
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--kai-txt3);
-  margin-left: 4px;
+.behavior-cycle__value {
+    display: block;
+    margin-top: 10px;
+    color: #10b981;
+    font-family: 'Onest', sans-serif;
+    font-size: 30px;
+    font-weight: 900;
 }
 
-.cycle-badge {
-  font-size: 8px;
-  font-weight: 900;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: var(--kai-border);
-  color: var(--kai-txt3);
-}
-
-.cycle-badge.ok {
-  background: rgba(var(--kai-green-rgb), 0.1);
-  color: var(--kai-green);
-}
-
-/* CTA Col */
-.cta-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 24px;
-}
-
-.cta-cloud {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.cta-tag {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  padding: 10px 16px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  transition: all 0.3s;
-}
-
-.cta-tag:hover {
-  border-color: var(--kai-blue);
-  background: rgba(var(--kai-blue-rgb), 0.05);
-}
-
-.cta-idx {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  color: var(--kai-blue);
-  opacity: 0.5;
-}
-
-.cta-text {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--kai-txt2);
-}
-
-.cta-suggestion {
-  padding: 12px 16px;
-  background: rgba(var(--kai-green-rgb), 0.05);
-  border: 1px solid rgba(var(--kai-green-rgb), 0.15);
-  border-radius: 10px;
-  font-size: 10px;
-  color: var(--kai-green);
-  opacity: 0.8;
-  display: flex;
-  align-items: center;
-}
-
-.empty-cta {
-  text-align: center;
-  color: var(--kai-txt3);
-  padding: 32px;
-  font-size: 11px;
-}
-
-@media (max-width: 992px) {
-  .behavior-grid {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 960px) {
+    .behavior-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Cii.vue b/src/components/marketing/dashboard-v3/v4/V4Cii.vue
index f48b7d2..d3a887e 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Cii.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Cii.vue
@@ -1,253 +1,213 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
 
-const cii = computed(() => Math.round(parseFloat(props.data?.ciiIndex) || 0));
-const label = computed(() => props.data?.intensityLabel || '');
+const cii = computed(() => Math.round(Number(props.data?.ciiIndex) || 0));
+const label = computed(() => props.data?.intensityLabel || 'Средняя конкуренция');
 const factors = computed(() => props.data?.contributingFactors || []);
 
 const ciiColor = computed(() => {
-  const v = cii.value;
-  if (v <= 25) return 'var(--kai-green)';
-  if (v <= 50) return 'var(--kai-yellow)';
-  if (v <= 75) return 'var(--kai-orange)';
-  return 'var(--kai-red)';
+    if (cii.value <= 40) return '#10B981';
+    if (cii.value <= 70) return '#F59E0B';
+    return '#F97316';
 });
 
-const ciiDesc = computed(() => {
-  const v = cii.value;
-  if (v <= 25) return 'Хорошие условия для старта. Рынок не перегружен.';
-  if (v <= 50) return 'Конкуренция есть, но место найдётся. Важен контент.';
-  if (v <= 75) return 'Рынок активный. Нужна чёткая стратегия отличия.';
-  return 'Высокая интенсивность. Требуется сильное присутствие.';
+const dashOffset = computed(() => {
+    const circumference = 283;
+    return circumference - (circumference * cii.value) / 100;
 });
 
-const FACTOR_ICONS = ['pi-users', 'pi-calendar', 'pi-percentage', 'pi-star'];
-
-// SVG half-gauge
-const arcD = computed(() => {
-  const pct = cii.value / 100;
-  const angle = pct * 180 - 180;
-  const rad = angle * Math.PI / 180;
-  const r = 80;
-  const x = 100 + r * Math.cos(rad);
-  const y = 100 + r * Math.sin(rad);
-  const lg = 0; 
-  return `M 20 100 A 80 80 0 ${lg} 1 ${x} ${y}`;
-});
+const factorRows = computed(() =>
+    factors.value.map((item, index) => ({
+        label: ['Плотность рынка', 'Активность игроков', 'Вовлечённость', 'Репутация'][index] || `Фактор ${index + 1}`,
+        value: item,
+        pct: [82, 68, 54, 88][index] || 50
+    }))
+);
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Интенсивность рынка" subtitle="Комплексный индекс CII (Competition Intensity Index)" num="5">
-    <div class="cii-grid">
-      
-      <!-- GAUGE COL -->
-      <div class="cii-gauge-col">
-        <div class="cii-header-label">
-           Overall CII Score
-           <i class="pi pi-info-circle kai-term-icon" v-tooltip.right="'Учитывает плотность игроков, частоту контента и уровень активности.'"></i>
-        </div>
-        
-        <div class="cii-svg-wrap">
-          <svg class="cii-svg" viewBox="0 0 200 120">
-            <path d="M 20 100 A 80 80 0 0 1 180 100" class="cii-track"/>
-            <path :d="arcD" :stroke="ciiColor" class="cii-fill"/>
-            
-            <text x="30" y="118" class="cii-meta-label">LOW</text>
-            <text x="170" y="118" class="cii-meta-label text-end">HIGH</text>
-          </svg>
-          <div class="cii-value-display">
-            <div class="cii-num" :style="{ color: ciiColor }">{{ cii }}</div>
-            <div class="cii-label-text" :style="{ color: ciiColor }">{{ label }}</div>
-          </div>
-        </div>
-        
-        <div class="cii-description">
-          <i class="pi pi-shield text-[10px] mr-2" :style="{ color: ciiColor }" />
-          {{ ciiDesc }}
-        </div>
-      </div>
+    <SectionWrapper
+        :id="id"
+        title="Индекс конкурентности"
+        subtitle="CII показывает, насколько рынок насыщен и сколько усилий потребуется, чтобы выделиться. Чем выше индекс, тем важнее стратегия позиционирования."
+        num="5"
+        eyebrow="Конкурентность"
+        info="До 40 — низкая конкуренция, 40–70 — средняя, выше 70 — высокая. Это помогает понять, насколько тяжело будет забирать внимание рынка."
+    >
+        <div class="cii-grid">
+            <article class="cii-gauge">
+                <svg viewBox="0 0 220 140" class="cii-gauge__svg">
+                    <path d="M 20 120 A 90 90 0 0 1 200 120" class="cii-gauge__track" />
+                    <path d="M 20 120 A 90 90 0 0 1 200 120" class="cii-gauge__fill" :style="{ stroke: ciiColor, strokeDashoffset: dashOffset }" />
+                </svg>
 
-      <!-- FACTORS COL -->
-      <div class="cii-factors-col">
-        <h4 class="cii-subtitle">Ключевые факторы</h4>
-        <div class="factors-list">
-          <div v-for="(f, i) in factors" :key="i" class="factor-item">
-            <div class="factor-header">
-              <div class="factor-icon-box" :style="{ color: ciiColor, background: ciiColor + '10' }">
-                <i class="pi" :class="FACTOR_ICONS[i % FACTOR_ICONS.length]"></i>
-              </div>
-              <div class="factor-info">
-                <div class="factor-name">{{ ['Плотность','Активность','Вовлечённость','Репутация'][i] || 'Показатель' }}</div>
-                <div class="factor-val">{{ f }}</div>
-              </div>
-            </div>
-            <div class="kai-progress-track">
-               <div class="kai-progress-fill" :style="{ width: [35,25,20,20][i % 4]+'%', background: ciiColor }" />
-            </div>
-          </div>
-          <div v-if="!factors.length" class="empty-state">Нет данных</div>
-        </div>
-      </div>
+                <div class="cii-gauge__value">
+                    <div class="cii-gauge__number" :style="{ color: ciiColor }">{{ cii }}</div>
+                    <div class="cii-gauge__label">{{ label }}</div>
+                </div>
 
-    </div>
-  </SectionWrapper>
+                <p class="cii-gauge__desc">
+                    При таком уровне важно не просто “быть в соцсетях”, а строить узнаваемую подачу, сильный оффер и более чёткий ритм контента.
+                </p>
+            </article>
+
+            <article class="cii-factors">
+                <div class="cii-factors__title">Факторы конкурентности</div>
+
+                <div v-if="factorRows.length" class="cii-factors__list">
+                    <div v-for="row in factorRows" :key="row.label" class="cii-factor">
+                        <div class="cii-factor__top">
+                            <span class="cii-factor__name">{{ row.label }}</span>
+                            <span class="cii-factor__text">{{ row.value }}</span>
+                        </div>
+                        <div class="cii-factor__bar">
+                            <span class="cii-factor__fill" :style="{ width: `${row.pct}%`, background: `linear-gradient(90deg, ${ciiColor}, color-mix(in srgb, ${ciiColor} 65%, white))` }" />
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="cii-empty">Факторы конкурентности ещё формируются.</div>
+            </article>
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .cii-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
-  align-items: start;
+    display: grid;
+    grid-template-columns: 340px minmax(0, 1fr);
+    gap: 20px;
 }
 
-.cii-gauge-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
+.cii-gauge,
+.cii-factors {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.cii-header-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9.5px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.1em;
+.cii-gauge {
+    text-align: center;
 }
 
-.cii-svg-wrap {
-  position: relative;
-  width: 220px;
+.cii-gauge__svg {
+    width: 100%;
+    max-width: 240px;
 }
 
-.cii-track {
-  fill: none;
-  stroke: var(--kai-border);
-  stroke-width: 14;
-  stroke-linecap: round;
+.cii-gauge__track,
+.cii-gauge__fill {
+    fill: none;
+    stroke-width: 14;
+    stroke-linecap: round;
 }
 
-.cii-fill {
-  fill: none;
-  stroke-width: 14;
-  stroke-linecap: round;
-  transition: all 1s ease-out;
+.cii-gauge__track {
+    stroke: rgba(45, 123, 255, 0.1);
 }
 
-.cii-meta-label {
-  font-size: 8px;
-  font-weight: 900;
-  fill: var(--kai-txt3);
-  letter-spacing: 0.05em;
+.cii-gauge__fill {
+    stroke: #f97316;
+    stroke-dasharray: 283;
+    transition: stroke-dashoffset 1.2s ease-out;
+    filter: drop-shadow(0 12px 18px rgba(249, 115, 22, 0.18));
 }
 
-.cii-value-display {
-  position: absolute;
-  top: 60px;
-  left: 0;
-  right: 0;
-  text-align: center;
+.cii-gauge__value {
+    margin-top: -18px;
 }
 
-.cii-num {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 32px;
-  font-weight: 900;
-  line-height: 1;
+.cii-gauge__number {
+    font-family: 'Onest', sans-serif;
+    font-size: 52px;
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    line-height: 1;
 }
 
-.cii-label-text {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
+.cii-gauge__label {
+    margin-top: 10px;
+    color: #546a8c;
+    font-size: 15px;
+    font-weight: 700;
 }
 
-.cii-description {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  padding: 12px 16px;
-  border-radius: 12px;
-  font-size: 11px;
-  color: var(--kai-txt2);
-  line-height: 1.5;
-  text-align: center;
-  max-width: 280px;
+.cii-gauge__desc {
+    margin: 18px auto 0;
+    max-width: 280px;
+    color: #607594;
+    font-size: 14px;
+    line-height: 1.7;
 }
 
-/* Factors */
-.cii-subtitle {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 24px;
+.cii-factors__title {
+    color: #173053;
+    font-family: 'Onest', sans-serif;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.factors-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.cii-factors__list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 22px;
 }
 
-.factor-item {
-  background: rgba(255,255,255,0.02);
-  padding: 12px;
-  border-radius: 12px;
-  border: 1px solid var(--kai-border);
+.cii-factor {
+    padding: 16px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.factor-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
+.cii-factor__top {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin-bottom: 12px;
 }
 
-.factor-icon-box {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.cii-factor__name {
+    color: #163053;
+    font-size: 14px;
+    font-weight: 700;
 }
 
-.factor-icon-box i {
-  font-size: 14px;
+.cii-factor__text {
+    color: #607594;
+    font-size: 13px;
+    line-height: 1.45;
 }
 
-.factor-name {
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
-  margin-bottom: 2px;
+.cii-factor__bar {
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.factor-val {
-  font-size: 11.5px;
-  font-weight: 700;
-  color: var(--kai-txt);
+.cii-factor__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    transition: width 0.8s ease;
 }
 
-.empty-state {
-  color: var(--kai-txt3);
-  font-size: 11px;
-  text-align: center;
-  padding: 20px 0;
+.cii-empty {
+    margin-top: 22px;
+    color: #7c92b3;
 }
 
-@media (max-width: 768px) {
-  .cii-grid {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 900px) {
+    .cii-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Competitors.vue b/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
index 063ed98..1b0d567 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Competitors.vue
@@ -4,444 +4,484 @@ import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: [Array, Object] });
 
-const normalizedData = computed(() => {
-  const arr = Array.isArray(props.data) ? props.data : (props.data?.competitors || []);
-  return arr.map(c => ({
-    ...c,
-    erVal: parseFloat(c.engagementRate ?? c.er) || 0,
-    ratingVal: parseFloat(c.averageRating ?? c.rating) || 0,
-    followersVal: parseInt(c.followers) || 0,
-    postsVal: parseInt(c.postsPerMonth) || 0
-  }));
-});
-
+const sortBy = ref('er');
 const expanded = ref(null);
-const toggleRow = (name) => { expanded.value = expanded.value === name ? null : name; };
 
-const fmtNum = (n) => n != null ? Number(n).toLocaleString('ru-RU') : '—';
-const fmtPct = (n) => n != null ? parseFloat(n).toFixed(2) + '%' : '—';
-const erColor = (er) => parseFloat(er) >= 6 ? 'var(--kai-green)' : parseFloat(er) >= 3 ? 'var(--kai-yellow)' : 'var(--kai-red)';
-const PLAT_COLORS = { Instagram:'#E1306C', TikTok:'#69C9D0', Telegram:'#2AABEE', '2GIS':'#00B140', YouTube:'#FF0000' };
-const platColor = (p) => PLAT_COLORS[p] || '#808080';
+const normalized = computed(() => {
+    const source = Array.isArray(props.data) ? props.data : props.data?.competitors || [];
+    return source.map((competitor, index) => ({
+        id: competitor.id || competitor.name || index,
+        name: competitor.name || `Конкурент ${index + 1}`,
+        platform: competitor.platform || 'Instagram',
+        followers: Number(competitor.followers) || 0,
+        er: Number(competitor.engagementRate ?? competitor.er) || 0,
+        rating: Number(competitor.averageRating ?? competitor.rating) || 0,
+        reviews: Number(competitor.reviews) || 0,
+        strengths: competitor.strengths || [],
+        weaknesses: competitor.weaknesses || [],
+        postsPerMonth: Number(competitor.postsPerMonth) || 0,
+        status: competitor.active === false ? 'inactive' : 'active'
+    }));
+});
 
-const sorted = computed(() => [...normalizedData.value].sort((a, b) => b.followersVal - a.followersVal));
+const sortedCompetitors = computed(() => {
+    const items = [...normalized.value];
+    if (sortBy.value === 'followers') return items.sort((a, b) => b.followers - a.followers);
+    if (sortBy.value === 'rating') return items.sort((a, b) => b.rating - a.rating);
+    return items.sort((a, b) => b.er - a.er);
+});
 
-// New Summary Metrics
-const topFollowers = computed(() => sorted.value.length > 0 ? sorted.value[0] : null);
-const topEr = computed(() => {
-  if (!normalizedData.value.length) return null;
-  return [...normalizedData.value].sort((a, b) => b.erVal - a.erVal)[0];
-});
-const avgPosts = computed(() => {
-  if (!normalizedData.value.length) return 0;
-  const sum = normalizedData.value.reduce((acc, c) => acc + c.postsVal, 0);
-  return Math.round(sum / normalizedData.value.length);
-});
-const avgRating = computed(() => {
-  if (!normalizedData.value.length) return 0;
-  const sum = normalizedData.value.reduce((acc, c) => acc + c.ratingVal, 0);
-  return (sum / normalizedData.value.length).toFixed(1);
-});
+const topPerformer = computed(() => sortedCompetitors.value[0] || null);
+
+const formatNumber = (value) => value.toLocaleString('ru-RU');
+const formatPercent = (value) => `${value.toFixed(1)}%`;
+
+const platformColor = (platform) => {
+    if (platform === 'Instagram') return '#E1306C';
+    if (platform === 'TikTok') return '#69C9D0';
+    if (platform === 'Telegram') return '#2AABEE';
+    if (platform === 'YouTube') return '#FF0000';
+    return '#2D7BFF';
+};
+
+const toggle = (id) => {
+    expanded.value = expanded.value === id ? null : id;
+};
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Анализ конкурентов" subtitle="Главные игроки на рынке и их показатели" num="3">
-
-    <!-- Summary Cards -->
-    <div class="summary-cards" v-if="normalizedData.length > 0">
-      <div class="summary-card">
-        <div class="card-icon blue"><i class="pi pi-users" /></div>
-        <div class="card-info">
-          <span class="card-label">Лидер рынка</span>
-          <span class="card-value">{{ topFollowers?.name || '—' }}</span>
-          <span class="card-desc">{{ fmtNum(topFollowers?.followersVal) }} подписчиков</span>
-        </div>
-      </div>
-      
-      <div class="summary-card">
-        <div class="card-icon green"><i class="pi pi-heart-fill" /></div>
-        <div class="card-info">
-          <span class="card-label">Самый вовлекающий (ER)</span>
-          <span class="card-value">{{ topEr?.name || '—' }}</span>
-          <span class="card-desc" :style="{ color: topEr ? erColor(topEr.erVal) : '' }">{{ fmtPct(topEr?.erVal) }} ER</span>
-        </div>
-      </div>
-      
-      <div class="summary-card">
-        <div class="card-icon yellow"><i class="pi pi-calendar" /></div>
-        <div class="card-info">
-          <span class="card-label">Средняя активность</span>
-          <span class="card-value">{{ avgPosts }}</span>
-          <span class="card-desc">постов в месяц</span>
-        </div>
-      </div>
-      
-      <div class="summary-card">
-        <div class="card-icon purple"><i class="pi pi-star-fill" /></div>
-        <div class="card-info">
-          <span class="card-label">Средний рейтинг</span>
-          <span class="card-value text-yellow-500">★ {{ avgRating }}</span>
-          <span class="card-desc">по отзывам клиентов</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Table -->
-    <div class="table-container">
-      <div class="table-header">
-        <h4 class="table-title">Подробная таблица</h4>
-        <span class="table-count">{{ sorted.length }} конкурентов</span>
-      </div>
-      <table class="kai-table">
-        <thead>
-          <tr>
-            <th width="40">#</th>
-            <th>Бренд</th>
-            <th>Платформа</th>
-            <th>Подписчики</th>
-            <th>ER</th>
-            <th>★ Рейтинг</th>
-            <th>Контент</th>
-            <th width="40"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="(c, i) in sorted" :key="c.name">
-            <tr :class="{ 'top-row': i < 3 }" :style="i < 3 ? { '--top-color': ['#F59E0B','#9CA3AF','#D97706'][i] } : {}">
-              <td class="row-num">
-                <span v-if="i === 0" class="medal gold">🥇</span>
-                <span v-else-if="i === 1" class="medal silver">🥈</span>
-                <span v-else-if="i === 2" class="medal bronze">🥉</span>
-                <span v-else>{{ String(i+1).padStart(2,'0') }}</span>
-              </td>
-              <td>
-                <div class="brand-cell">
-                  <div class="brand-avatar" :style="{ background: platColor(c.platform) + '20', color: platColor(c.platform), borderColor: platColor(c.platform) + '40' }">
-                    <i class="pi pi-building text-[11px]" />
-                  </div>
-                  <span class="brand-name">{{ c.name }}</span>
-                </div>
-              </td>
-              <td><span class="kai-plat-badge" :style="{ background: platColor(c.platform)+'20', color: platColor(c.platform), border: `1px solid ${platColor(c.platform)}20` }">{{ c.platform }}</span></td>
-              <td class="font-bold">{{ fmtNum(c.followersVal) }}</td>
-              <td class="font-bold" :style="{ color: erColor(c.erVal) }">{{ fmtPct(c.erVal) }}</td>
-              <td class="font-bold text-yellow-500">★ {{ (c.ratingVal).toFixed(1) }}</td>
-              <td class="font-bold">{{ c.postsVal }} <small class="text-surface-500 ml-1">/ мес</small></td>
-              <td>
-                <button class="expand-btn" :class="{ active: expanded === c.name }" @click="toggleRow(c.name)">
-                  <i class="pi pi-chevron-down" />
-                </button>
-              </td>
-            </tr>
-
-            <!-- Expanded content -->
-            <tr v-if="expanded === c.name" class="expanded-row">
-              <td colspan="8">
-                <div class="expand-content">
-                  <div class="sw-grid">
-                    <div class="sw-col">
-                      <div class="sw-title green">
-                        <i class="pi pi-check-circle"></i>
-                        Сильные стороны
-                      </div>
-                      <ul class="sw-list">
-                        <li v-for="(s, si) in (c.strengths||[])" :key="si">
-                          <span class="sw-icon green">+</span>
-                          {{ s }}
-                        </li>
-                        <li v-if="!c.strengths?.length" class="empty-sw">Нет данных</li>
-                      </ul>
+    <SectionWrapper
+        :id="id"
+        title="Карта конкурентов"
+        subtitle="Сравните лидеров ниши по вовлечённости, репутации и стилю коммуникации. Открывайте карточки и быстро находите, на чём они выигрывают и где проседают."
+        num="3"
+        eyebrow="Competitor Map"
+        info="ER показывает, насколько живая аудитория у конкурента. Для Instagram ориентир 3–6%, всё выше обычно говорит о сильном контенте или лояльной аудитории."
+    >
+        <div class="competitors-shell">
+            <div class="competitors-top">
+                <div class="competitors-top__headline">
+                    <span class="competitors-top__label">Лидер по выбранной метрике</span>
+                    <div class="competitors-top__name">{{ topPerformer?.name || 'Нет данных' }}</div>
+                    <div class="competitors-top__meta">
+                        <span>{{ topPerformer ? formatPercent(topPerformer.er) : '0%' }} ER</span>
+                        <span>·</span>
+                        <span>{{ topPerformer ? formatNumber(topPerformer.followers) : '0' }} подписчиков</span>
+                        <span>·</span>
+                        <span>{{ topPerformer ? topPerformer.rating.toFixed(1) : '0.0' }} рейтинг</span>
                     </div>
-                    <div class="sw-col">
-                      <div class="sw-title red">
-                        <i class="pi pi-times-circle"></i>
-                        Слабые стороны
-                      </div>
-                      <ul class="sw-list">
-                        <li v-for="(w, wi) in (c.weaknesses||[])" :key="wi">
-                          <span class="sw-icon red">−</span>
-                          {{ w }}
-                        </li>
-                        <li v-if="!c.weaknesses?.length" class="empty-sw">Нет данных</li>
-                      </ul>
-                    </div>
-                  </div>
                 </div>
-              </td>
-            </tr>
-          </template>
-          <tr v-if="!sorted.length"><td colspan="8" class="empty-table">
-            <div class="empty-state">
-              <i class="pi pi-search text-4xl mb-3"></i>
-              <p>Данные о конкурентах не найдены</p>
+
+                <div class="competitors-filters">
+                    <button class="competitors-filter" :class="{ 'competitors-filter--active': sortBy === 'er' }" type="button" @click="sortBy = 'er'">
+                        По ER
+                    </button>
+                    <button class="competitors-filter" :class="{ 'competitors-filter--active': sortBy === 'followers' }" type="button" @click="sortBy = 'followers'">
+                        По подписчикам
+                    </button>
+                    <button class="competitors-filter" :class="{ 'competitors-filter--active': sortBy === 'rating' }" type="button" @click="sortBy = 'rating'">
+                        По рейтингу
+                    </button>
+                </div>
             </div>
-          </td></tr>
-        </tbody>
-      </table>
-    </div>
-  </SectionWrapper>
+
+            <div v-if="sortedCompetitors.length" class="competitors-grid">
+                <article
+                    v-for="(competitor, index) in sortedCompetitors"
+                    :key="competitor.id"
+                    class="competitor-card"
+                    :style="{ '--platform': platformColor(competitor.platform) }"
+                >
+                    <span class="competitor-card__accent" />
+                    <div class="competitor-card__top">
+                        <div>
+                            <div class="competitor-card__rank">Топ {{ index + 1 }}</div>
+                            <h3 class="competitor-card__name">{{ competitor.name }}</h3>
+                            <div class="competitor-card__platform">{{ competitor.platform }} · {{ formatNumber(competitor.followers) }} подписчиков</div>
+                        </div>
+
+                        <span class="competitor-card__status" :class="{ 'competitor-card__status--active': competitor.status === 'active' }">
+                            {{ competitor.status === 'active' ? 'Активен' : 'Неактивен' }}
+                        </span>
+                    </div>
+
+                    <div class="competitor-card__stats">
+                        <div class="competitor-stat">
+                            <span class="competitor-stat__label">ER</span>
+                            <span class="competitor-stat__value">{{ formatPercent(competitor.er) }}</span>
+                        </div>
+                        <div class="competitor-stat">
+                            <span class="competitor-stat__label">Рейтинг</span>
+                            <span class="competitor-stat__value">{{ competitor.rating.toFixed(1) }}</span>
+                        </div>
+                        <div class="competitor-stat">
+                            <span class="competitor-stat__label">Отзывы</span>
+                            <span class="competitor-stat__value">{{ formatNumber(competitor.reviews) }}</span>
+                        </div>
+                        <div class="competitor-stat">
+                            <span class="competitor-stat__label">Постов/мес</span>
+                            <span class="competitor-stat__value">{{ competitor.postsPerMonth }}</span>
+                        </div>
+                    </div>
+
+                    <div class="competitor-card__preview">
+                        <div class="competitor-points">
+                            <div class="competitor-points__title competitor-points__title--good">Сильные стороны</div>
+                            <div class="competitor-points__line">{{ competitor.strengths[0] || 'Регулярное присутствие в каналах' }}</div>
+                        </div>
+                        <div class="competitor-points">
+                            <div class="competitor-points__title competitor-points__title--bad">Риски</div>
+                            <div class="competitor-points__line">{{ competitor.weaknesses[0] || 'Есть точки для отстройки' }}</div>
+                        </div>
+                    </div>
+
+                    <button class="competitor-card__toggle" type="button" @click="toggle(competitor.id)">
+                        {{ expanded === competitor.id ? 'Скрыть детали' : 'Подробнее' }}
+                        <i class="pi" :class="expanded === competitor.id ? 'pi-chevron-up' : 'pi-chevron-down'" />
+                    </button>
+
+                    <transition name="competitor-expand">
+                        <div v-if="expanded === competitor.id" class="competitor-card__details">
+                            <div class="competitor-details__column">
+                                <div class="competitor-details__heading">Что у них работает</div>
+                                <ul class="competitor-details__list">
+                                    <li v-for="item in competitor.strengths" :key="item">{{ item }}</li>
+                                    <li v-if="!competitor.strengths.length">Явных сильных паттернов не найдено.</li>
+                                </ul>
+                            </div>
+                            <div class="competitor-details__column">
+                                <div class="competitor-details__heading competitor-details__heading--bad">Где можно обойти</div>
+                                <ul class="competitor-details__list competitor-details__list--bad">
+                                    <li v-for="item in competitor.weaknesses" :key="item">{{ item }}</li>
+                                    <li v-if="!competitor.weaknesses.length">Слабые стороны пока не зафиксированы.</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </transition>
+                </article>
+            </div>
+
+            <div v-else class="competitors-empty">
+                Данные о конкурентах ещё не готовы.
+            </div>
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
-/* ==================== SUMMARY CARDS ==================== */
-.summary-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-  margin-bottom: 32px;
+.competitors-shell {
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
 }
 
-.summary-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+.competitors-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    padding: 22px 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 40px rgba(45, 123, 255, 0.08);
 }
 
-.summary-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+.competitors-top__label {
+    color: #6f84a7;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-html[data-theme='light'] .summary-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
+.competitors-top__name {
+    margin-top: 8px;
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: 30px;
+    font-weight: 900;
+    letter-spacing: -0.04em;
 }
 
-.card-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  flex-shrink: 0;
+.competitors-top__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+    color: #607594;
+    font-size: 14px;
+    font-weight: 600;
 }
 
-.card-icon.blue { background: rgba(45,123,255,0.1); color: #2D7BFF; }
-.card-icon.green { background: rgba(16,185,129,0.1); color: #10B981; }
-.card-icon.yellow { background: rgba(245,158,11,0.1); color: #F59E0B; }
-.card-icon.purple { background: rgba(139,92,246,0.1); color: #8B5CF6; }
-
-.card-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.competitors-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
-.card-label {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
+.competitors-filter {
+    min-height: 44px;
+    padding: 0 18px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    color: #577090;
+    font-size: 13px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
-.card-value {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--kai-txt);
-  line-height: 1.2;
+.competitors-filter--active {
+    background: linear-gradient(135deg, #2d7bff, #7c3aed);
+    color: #fff;
+    box-shadow: 0 14px 28px rgba(45, 123, 255, 0.16);
 }
 
-.card-desc {
-  font-size: 11px;
-  color: var(--kai-txt2);
+.competitors-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
 }
 
-/* ==================== TABLE ==================== */
-.table-container {
-  border-radius: 16px;
-  overflow: hidden;
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
+.competitor-card {
+    position: relative;
+    overflow: hidden;
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
+    transition: transform 0.22s ease, box-shadow 0.22s ease;
 }
 
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--kai-border);
+.competitor-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 24px 46px rgba(45, 123, 255, 0.14);
 }
 
-.table-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--kai-txt);
-  margin: 0;
+.competitor-card__accent {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 4px;
+    background: linear-gradient(180deg, var(--platform), color-mix(in srgb, var(--platform) 40%, white));
+    transition: width 0.2s ease;
 }
 
-.table-count {
-  font-size: 11px;
-  color: var(--kai-txt3);
-  background: var(--kai-border);
-  padding: 4px 10px;
-  border-radius: 20px;
-  font-weight: 600;
+.competitor-card:hover .competitor-card__accent {
+    width: 8px;
 }
 
-.top-row {
-  background: linear-gradient(to right, rgba(var(--kai-blue-rgb), 0.03), transparent);
-  border-left: 3px solid var(--top-color);
+.competitor-card__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
 }
 
-.row-num {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  color: var(--kai-txt3);
-  text-align: center;
+.competitor-card__rank {
+    color: var(--platform);
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
 }
 
-.medal {
-  font-size: 16px;
-  display: block;
+.competitor-card__name {
+    margin: 8px 0 6px;
+    color: #13203d;
+    font-family: 'Onest', sans-serif;
+    font-size: 28px;
+    font-weight: 900;
+    line-height: 1.02;
+    letter-spacing: -0.04em;
 }
 
-.brand-cell {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.competitor-card__platform {
+    color: #6d82a4;
+    font-size: 14px;
 }
 
-.brand-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.competitor-card__status {
+    min-height: 34px;
+    padding: 0 14px;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.12);
+    color: #7387a9;
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 700;
 }
 
-.brand-name {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--kai-txt);
+.competitor-card__status--active {
+    background: rgba(16, 185, 129, 0.12);
+    color: #10b981;
 }
 
-.expand-btn {
-  background: transparent;
-  border: none;
-  color: var(--kai-txt3);
-  cursor: pointer;
-  padding: 4px;
-  transition: all 0.3s;
+.competitor-card__stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+    margin-top: 18px;
 }
 
-.expand-btn.active {
-  transform: rotate(180deg);
-  color: var(--kai-blue);
+.competitor-stat {
+    padding: 14px;
+    border-radius: 18px;
+    background: rgba(248, 250, 255, 0.94);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.expanded-row td {
-  padding: 0 !important;
-  background: rgba(45,123,255,0.04);
-  border-bottom: 1px solid var(--kai-border);
+.competitor-stat__label {
+    display: block;
+    color: #7a8ca9;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
 }
 
-.expand-content {
-  padding: 24px 32px;
+.competitor-stat__value {
+    display: block;
+    margin-top: 10px;
+    color: #182544;
+    font-family: 'Onest', sans-serif;
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.sw-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 40px;
+.competitor-card__preview {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    margin-top: 18px;
 }
 
-.sw-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sw-title.green { color: var(--kai-green); }
-.sw-title.red { color: var(--kai-red); }
-
-.sw-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.sw-list li {
-  font-size: 11.5px;
-  color: var(--kai-txt2);
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.sw-icon {
-  font-weight: 800;
-  font-size: 14px;
-  line-height: 1.4;
-  flex-shrink: 0;
-}
-
-.sw-icon.green { color: var(--kai-green); }
-.sw-icon.red { color: var(--kai-red); }
-
-.empty-sw {
-  color: var(--kai-txt3) !important;
-  font-style: italic;
-  font-size: 11px !important;
-}
-
-.empty-table {
-  text-align: center;
-  color: var(--kai-txt3);
-  padding: 40px;
-  font-size: 12px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: var(--kai-txt3);
-}
-
-.empty-state i {
-  opacity: 0.3;
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: 12px;
-}
-
-/* ==================== RESPONSIVE ==================== */
-@media (max-width: 768px) {
-  .summary-cards {
-    grid-template-columns: 1fr;
-  }
-
-  .sw-grid {
-    grid-template-columns: 1fr;
-    gap: 20px;
-  }
-
-  .expand-content {
+.competitor-points {
     padding: 16px;
-  }
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.84);
+    border: 1px solid rgba(45, 123, 255, 0.08);
+}
+
+.competitor-points__title {
+    color: #10b981;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+.competitor-points__title--bad {
+    color: #ef4444;
+}
+
+.competitor-points__line {
+    margin-top: 10px;
+    color: #546a8b;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.competitor-card__toggle {
+    width: 100%;
+    min-height: 46px;
+    margin-top: 18px;
+    border-radius: 16px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.9);
+    color: #2d7bff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 800;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.competitor-card__toggle:hover {
+    background: rgba(45, 123, 255, 0.08);
+}
+
+.competitor-card__details {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-top: 16px;
+}
+
+.competitor-details__column {
+    padding: 18px;
+    border-radius: 18px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
+}
+
+.competitor-details__heading {
+    color: #10b981;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+.competitor-details__heading--bad {
+    color: #ef4444;
+}
+
+.competitor-details__list {
+    margin: 12px 0 0;
+    padding-left: 18px;
+    color: #53698b;
+    font-size: 14px;
+    line-height: 1.65;
+}
+
+.competitor-details__list--bad {
+    color: #6e5d66;
+}
+
+.competitors-empty {
+    padding: 42px;
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.82);
+    border: 1px dashed rgba(45, 123, 255, 0.18);
+    color: #7e93b4;
+    text-align: center;
+}
+
+.competitor-expand-enter-active,
+.competitor-expand-leave-active {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.competitor-expand-enter-from,
+.competitor-expand-leave-to {
+    opacity: 0;
+    transform: translateY(-8px);
+}
+
+@media (max-width: 1100px) {
+    .competitors-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .competitors-top {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .competitor-card__stats,
+    .competitor-card__preview,
+    .competitor-card__details {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Conclusions.vue b/src/components/marketing/dashboard-v3/v4/V4Conclusions.vue
index 2aa3960..6bc611b 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Conclusions.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Conclusions.vue
@@ -1,162 +1,129 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Array });
 
-const ICONS = ['pi-users', 'pi-folder', 'pi-star', 'pi-chart-line', 'pi-dollar', 'pi-video', 'pi-bolt'];
+const themedCards = computed(() =>
+    (props.data || []).map((text, index) => {
+        const copy = String(text || '');
+        const lower = copy.toLowerCase();
 
-const conclusions = computed(() => {
-  const arr = props.data || [];
-  return arr.map((text, i) => {
-    const t = text.toLowerCase();
-    let themeIdx = 1; 
-    if (t.includes('конкурент') || t.includes('игрок')) themeIdx = 0;
-    else if (t.includes('репутац') || t.includes('отзыв') || t.includes('рейтинг')) themeIdx = 2;
-    else if (t.includes('спрос') || t.includes('пик')) themeIdx = 3;
-    else if (t.includes('цен') || t.includes('акци') || t.includes('скидк')) themeIdx = 4;
-    else if (t.includes('видео') || t.includes('reels') || t.includes('tiktok')) themeIdx = 5;
-    else if (t.includes('возможност') || t.includes('шанс') || t.includes('слаб')) themeIdx = 6;
-    
-    return { text, icon: ICONS[themeIdx], number: String(i+1).padStart(2,'0') };
-  });
-});
+        let theme = 'blue';
+        let title = 'Рынок';
+
+        if (lower.includes('конкур')) {
+            theme = 'orange';
+            title = 'Конкуренция';
+        } else if (lower.includes('репутац') || lower.includes('отзыв') || lower.includes('рейтинг')) {
+            theme = 'green';
+            title = 'Репутация';
+        } else if (lower.includes('спрос') || lower.includes('поиск') || lower.includes('сезон')) {
+            theme = 'violet';
+            title = 'Спрос';
+        } else if (lower.includes('контент') || lower.includes('reels') || lower.includes('video') || lower.includes('видео')) {
+            theme = 'blue';
+            title = 'Контент';
+        }
+
+        return { id: index, copy, title, theme };
+    })
+);
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Выводы анализа" subtitle="Стратегическое резюме рынка на основе собранных данных" num="10">
-    <div class="conclusions-grid">
-      
-      <div v-for="(c, i) in conclusions" :key="i" class="conclusion-card" :class="{ 'full-width': i === conclusions.length - 1 && conclusions.length % 2 !== 0 }">
-        <div class="card-inner">
-          <div class="card-icon-box">
-            <i class="pi" :class="c.icon"></i>
-          </div>
-          <div class="card-content">
-            <div class="card-header">
-              <span class="card-label">INSIGHT {{ c.number }}</span>
-              <span class="card-dot"></span>
-            </div>
-            <div class="card-text">{{ c.text }}</div>
-          </div>
+    <SectionWrapper
+        :id="id"
+        title="Выводы и рекомендации"
+        subtitle="Главные инсайты отчёта в формате коротких управленческих карточек. Это тот блок, который удобно показывать руководителю и сразу обсуждать решения."
+        num="10"
+        eyebrow="Выводы"
+        info="Карточки собраны на основе всего отчёта. Их задача — быстро перевести аналитику в конкретные управленческие выводы."
+    >
+        <div v-if="themedCards.length" class="conclusions-grid">
+            <article v-for="card in themedCards" :key="card.id" class="conclusion-card" :class="`conclusion-card--${card.theme}`">
+                <div class="conclusion-card__eyebrow">{{ card.title }}</div>
+                <div class="conclusion-card__copy">{{ card.copy }}</div>
+            </article>
         </div>
-      </div>
-
-      <div v-if="!conclusions.length" class="empty-state">
-        <i class="pi pi-spin pi-spinner mr-2"></i> Формирование аналитических выводов...
-      </div>
-
-    </div>
-  </SectionWrapper>
+        <div v-else class="conclusions-empty">
+            Выводы ещё формируются.
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .conclusions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-  gap: 16px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
 }
 
 .conclusion-card {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 24px;
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
+    transition: transform 0.22s ease, box-shadow 0.22s ease;
 }
 
-.conclusion-card.full-width {
-  grid-column: 1 / -1;
+.conclusion-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 22px 46px rgba(45, 123, 255, 0.14);
 }
 
-.card-inner {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  padding: 20px 24px;
-  border-radius: 20px;
-  display: flex;
-  gap: 20px;
-  height: 100%;
+.conclusion-card__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    min-height: 34px;
+    padding: 0 14px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-.conclusion-card:hover .card-inner {
-  border-color: var(--kai-blue);
-  background: var(--kai-card-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+.conclusion-card__copy {
+    margin-top: 16px;
+    color: #182544;
+    font-size: 17px;
+    line-height: 1.7;
+    font-weight: 600;
 }
 
-.card-icon-box {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: rgba(var(--kai-blue-rgb), 0.1);
-  border: 1px solid rgba(var(--kai-blue-rgb), 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all 0.3s;
+.conclusion-card--orange .conclusion-card__eyebrow {
+    color: #f97316;
+    background: rgba(249, 115, 22, 0.1);
 }
 
-.card-icon-box i {
-  font-size: 18px;
-  color: var(--kai-blue);
+.conclusion-card--blue .conclusion-card__eyebrow {
+    color: #2d7bff;
+    background: rgba(45, 123, 255, 0.1);
 }
 
-.conclusion-card:hover .card-icon-box {
-  background: var(--kai-blue);
+.conclusion-card--green .conclusion-card__eyebrow {
+    color: #10b981;
+    background: rgba(16, 185, 129, 0.1);
 }
 
-.conclusion-card:hover .card-icon-box i {
-  color: #fff;
+.conclusion-card--violet .conclusion-card__eyebrow {
+    color: #7c3aed;
+    background: rgba(124, 58, 237, 0.1);
 }
 
-.card-content {
-  flex: 1;
+.conclusions-empty {
+    padding: 34px;
+    border-radius: 24px;
+    border: 1px dashed rgba(45, 123, 255, 0.18);
+    color: #7e93b4;
+    text-align: center;
 }
 
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.card-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  color: var(--kai-blue);
-  letter-spacing: 0.1em;
-  opacity: 0.8;
-}
-
-.card-dot {
-  width: 4px;
-  height: 4px;
-  background: var(--kai-blue);
-  border-radius: 50%;
-  opacity: 0.3;
-}
-
-.card-text {
-  font-size: 11.5px;
-  line-height: 1.6;
-  color: var(--kai-txt);
-  font-weight: 500;
-}
-
-.empty-state {
-  grid-column: 1 / -1;
-  text-align: center;
-  color: var(--kai-txt3);
-  padding: 64px 0;
-  font-size: 12px;
-  font-weight: 600;
-  border: 1px dashed var(--kai-border);
-  border-radius: 20px;
-}
-
-@media (max-width: 768px) {
-  .conclusions-grid {
-    grid-template-columns: 1fr;
-  }
+@media (max-width: 900px) {
+    .conclusions-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Content.vue b/src/components/marketing/dashboard-v3/v4/V4Content.vue
index 8fae3d4..520ed00 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Content.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Content.vue
@@ -1,295 +1,254 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
-const fmtPct = (n) => n != null ? parseFloat(n).toFixed(1) + '%' : '—';
-const fmtNum = (n) => n != null ? Number(n).toLocaleString('ru-RU') : '—';
 
-const SEGMENTS = [
-  { key: 'demoContentPercent',       label: 'Демонстрация', color: 'var(--kai-blue)' },
-  { key: 'expertContentPercent',     label: 'Экспертный',   color: 'var(--kai-green)' },
-  { key: 'salesContentPercent',      label: 'Продающий',    color: 'var(--kai-orange)' },
-  { key: 'reviewsContentPercent',    label: 'Отзывы',       color: 'var(--kai-purple)' },
-  { key: 'engagementContentPercent', label: 'Вовлекающий',  color: 'var(--kai-yellow)' },
+const segmentsConfig = [
+    { key: 'salesContentPercent', label: 'Продающий', color: '#2D7BFF' },
+    { key: 'demoContentPercent', label: 'Демонстрационный', color: '#7C3AED' },
+    { key: 'reviewsContentPercent', label: 'Отзывы', color: '#10B981' },
+    { key: 'expertContentPercent', label: 'Экспертный', color: '#F59E0B' },
+    { key: 'engagementContentPercent', label: 'Вовлекающий', color: '#F97316' }
 ];
 
-const segments = computed(() => SEGMENTS.map(s => ({ ...s, value: props.data?.[s.key] || 0 })).filter(s => s.value > 0));
+const segments = computed(() =>
+    segmentsConfig
+        .map((segment) => ({ ...segment, value: Number(props.data?.[segment.key]) || 0 }))
+        .filter((segment) => segment.value > 0)
+);
 
-// SVG donut chart
 const donut = computed(() => {
-  const total = segments.value.reduce((a, s) => a + s.value, 0) || 1;
-  const r = 70, cx = 90, cy = 90, stroke = 22;
-  let cum = 0;
-  return segments.value.map(s => {
-    const pct = s.value / total;
-    const circ = 2 * Math.PI * r;
-    const dash = circ * pct;
-    const gap  = circ * (1 - pct);
-    const offset = circ * (0.25 - cum); // start from top
-    cum += pct;
-    return { ...s, pct: Math.round(pct * 100), dash, gap, offset, r, cx, cy, stroke, circ };
-  });
+    const total = segments.value.reduce((sum, segment) => sum + segment.value, 0) || 1;
+    let current = -90;
+
+    return segments.value.map((segment) => {
+        const angle = (segment.value / total) * 360;
+        const start = current;
+        current += angle;
+        return {
+            ...segment,
+            path: describeArc(90, 90, 62, start, current)
+        };
+    });
 });
+
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians)
+    };
+}
+
+function describeArc(x, y, radius, startAngle, endAngle) {
+    const start = polarToCartesian(x, y, radius, endAngle);
+    const end = polarToCartesian(x, y, radius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+    return ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y].join(' ');
+}
+
+const pills = computed(() => [
+    { label: 'Видео', value: `${Number(props.data?.videoShare || 0).toFixed(0)}%` },
+    { label: 'Длина текста', value: `${Number(props.data?.avgTextLengthCharacters || 0)} симв.` },
+    { label: 'CTA в постах', value: `${Number(props.data?.ctaUsagePercent || 0).toFixed(0)}%` },
+    { label: 'Лучшее окно', value: '18:00–21:00' }
+]);
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Профиль контента" subtitle="Анализ типов публикаций и технических параметров" num="4">
-    <div class="content-grid">
-      
-      <!-- 1. DONUT CHART -->
-      <div class="chart-col">
-        <div class="donut-wrap">
-          <svg class="donut-svg" viewBox="0 0 180 180">
-            <g v-for="seg in donut" :key="seg.key">
-              <circle
-                :cx="seg.cx"
-                :cy="seg.cy"
-                :r="seg.r"
-                fill="none"
-                :stroke="seg.color"
-                :stroke-width="seg.stroke"
-                :stroke-dasharray="`${seg.dash} ${seg.gap}`"
-                :stroke-dashoffset="seg.offset * seg.r"
-                class="donut-segment"
-              />
-            </g>
-          </svg>
-          <div class="donut-center">
-            <div class="center-title">КОНТЕНТ</div>
-            <div class="center-sub">НИШИ</div>
-          </div>
-        </div>
-        
-        <div class="legend-list">
-          <div v-for="seg in donut" :key="seg.key" class="legend-item">
-            <div class="legend-dot" :style="{ background: seg.color }"></div>
-            <span class="legend-label">{{ seg.label }}</span>
-            <span class="legend-pct" :style="{ color: seg.color }">{{ seg.pct }}%</span>
-          </div>
-        </div>
-      </div>
+    <SectionWrapper
+        :id="id"
+        title="Контент-профиль"
+        subtitle="Разбираем, какие форматы контента рынок использует чаще всего и какие сигналы повторяются в публикациях конкурентов."
+        num="4"
+        eyebrow="Контент"
+        info="CTA — это призыв к действию. Чем чаще он есть в постах, тем сильнее контент работает не только на охват, но и на заявки."
+    >
+        <div class="content-grid">
+            <article class="content-donut">
+                <svg viewBox="0 0 180 180" class="content-donut__svg">
+                    <circle cx="90" cy="90" r="62" class="content-donut__track" />
+                    <path v-for="segment in donut" :key="segment.key" :d="segment.path" :stroke="segment.color" class="content-donut__segment" />
+                </svg>
 
-      <!-- 2. META METRICS -->
-      <div class="metrics-col">
-        <h4 class="metrics-title">Технические метрики</h4>
-        
-        <div class="cards-row">
-          <div v-for="card in [
-            { label:'Доля видео', value: fmtPct(data?.videoShare), color:'var(--kai-blue)', icon:'pi-video', tip: 'Процент Reels, TikTok и Shorts' },
-            { label:'CTA в постах', value: fmtPct(data?.ctaUsagePercent), color:'var(--kai-green)', icon:'pi-megaphone', tip: 'Процент призывов к действию' },
-            { label:'Длина текста', value: fmtNum(data?.avgTextLengthCharacters) + ' симв.', color:'var(--kai-purple)', icon:'pi-pencil', tip: 'Среднее количество символов' },
-          ]" :key="card.label" class="metric-card">
-            <div class="metric-card-icon" :style="{ color: card.color, background: card.color + '15' }">
-              <i class="pi" :class="card.icon"></i>
-            </div>
-            <div class="metric-card-val" :style="{ color: card.color }">{{ card.value }}</div>
-            <div class="metric-card-label">
-              {{ card.label }}
-              <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="card.tip"></i>
-            </div>
-          </div>
-        </div>
+                <div class="content-donut__legend">
+                    <div v-for="segment in segments" :key="segment.key" class="content-donut__legend-item">
+                        <span class="content-donut__dot" :style="{ background: segment.color }" />
+                        <span>{{ segment.label }}</span>
+                        <strong>{{ segment.value }}%</strong>
+                    </div>
+                </div>
+            </article>
 
-        <!-- Progress bars -->
-        <div class="progress-list">
-          <div v-for="seg in segments" :key="seg.key" class="progress-item">
-            <span class="progress-label">{{ seg.label }}</span>
-            <div class="kai-progress-track">
-              <div class="kai-progress-fill" :style="{ width: seg.value + '%', background: seg.color }" />
-            </div>
-            <span class="progress-pct" :style="{ color: seg.color }">{{ fmtPct(seg.value) }}</span>
-          </div>
+            <article class="content-metrics">
+                <div class="content-pills">
+                    <span v-for="pill in pills" :key="pill.label" class="content-pill">
+                        <span class="content-pill__label">{{ pill.label }}</span>
+                        <span class="content-pill__value">{{ pill.value }}</span>
+                    </span>
+                </div>
+
+                <div class="content-bars">
+                    <div v-for="segment in segments" :key="segment.key" class="content-bar">
+                        <div class="content-bar__top">
+                            <span class="content-bar__label">{{ segment.label }}</span>
+                            <span class="content-bar__value">{{ segment.value }}%</span>
+                        </div>
+                        <div class="content-bar__track">
+                            <span class="content-bar__fill" :style="{ width: `${segment.value}%`, background: `linear-gradient(90deg, ${segment.color}, color-mix(in srgb, ${segment.color} 65%, white))` }" />
+                        </div>
+                    </div>
+                </div>
+            </article>
         </div>
-      </div>
-    </div>
-  </SectionWrapper>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .content-grid {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 40px;
-  align-items: start;
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+    gap: 20px;
 }
 
-.chart-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
+.content-donut,
+.content-metrics {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.donut-wrap {
-  position: relative;
-  width: 180px;
-  height: 180px;
+.content-donut {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.donut-segment {
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+.content-donut__svg {
+    width: 180px;
+    height: 180px;
 }
 
-.donut-center {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.content-donut__track,
+.content-donut__segment {
+    fill: none;
+    stroke-linecap: round;
+    stroke-width: 18;
 }
 
-.center-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--kai-txt);
-  letter-spacing: 0.1em;
+.content-donut__track {
+    stroke: rgba(45, 123, 255, 0.08);
 }
 
-.center-sub {
-  font-size: 9px;
-  font-weight: 700;
-  color: var(--kai-txt3);
-  opacity: 0.6;
+.content-donut__segment {
+    transition: transform 0.2s ease;
 }
 
-.legend-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
+.content-donut__legend {
+    width: 100%;
+    margin-top: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.content-donut__legend-item {
+    display: grid;
+    grid-template-columns: 10px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 10px;
+    color: #546a8c;
+    font-size: 14px;
 }
 
-.legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 3px;
+.content-donut__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
 }
 
-.legend-label {
-  font-size: 11px;
-  color: var(--kai-txt2);
-  flex: 1;
+.content-metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
-.legend-pct {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
+.content-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
 }
 
-/* Metrics */
-.metrics-col {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.content-pill {
+    min-height: 48px;
+    padding: 0 16px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.metrics-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.1em;
+.content-pill__label {
+    color: #6a7f9f;
+    font-size: 12px;
+    font-weight: 700;
 }
 
-.cards-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+.content-pill__value {
+    color: #173053;
+    font-family: 'Onest', sans-serif;
+    font-size: 15px;
+    font-weight: 800;
 }
 
-.metric-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
-  padding: 20px;
-  text-align: center;
-  transition: all 0.3s;
+.content-bars {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
 }
 
-.metric-card:hover {
-  border-color: var(--kai-border-hover);
-  background: var(--kai-card-hover);
-  transform: translateY(-2px);
+.content-bar {
+    padding: 16px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.metric-card-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 12px;
+.content-bar__top {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+    margin-bottom: 12px;
 }
 
-.metric-card-icon i {
-  font-size: 14px;
+.content-bar__label,
+.content-bar__value {
+    color: #173053;
+    font-size: 14px;
+    font-weight: 700;
 }
 
-.metric-card-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 16px;
-  font-weight: 800;
-  margin-bottom: 6px;
+.content-bar__track {
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.metric-card-label {
-  font-size: 9.5px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
+.content-bar__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
 }
 
-.progress-list {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  padding: 20px;
-  background: rgba(0,0,0,0.15);
-  border-radius: 16px;
-  border: 1px solid var(--kai-border);
-}
-
-.progress-item {
-  display: grid;
-  grid-template-columns: 110px 1fr 50px;
-  align-items: center;
-  gap: 16px;
-}
-
-.progress-label {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--kai-txt2);
-}
-
-.progress-pct {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-align: right;
-}
-
-@media (max-width: 768px) {
-  .content-grid {
-    grid-template-columns: 1fr;
-    gap: 32px;
-  }
+@media (max-width: 900px) {
+    .content-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Demand.vue b/src/components/marketing/dashboard-v3/v4/V4Demand.vue
index c8282e9..5dda495 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Demand.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Demand.vue
@@ -1,331 +1,296 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import { useCountUp } from '@/composables/useCountUp';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
-const fmtNum = (n) => n != null ? Number(n).toLocaleString('ru-RU') : '—';
 
-const seasonality = computed(() => props.data?.seasonality || []);
-const demandTrend = computed(() => {
-  if (seasonality.value.length < 2) return 0;
-  const first = seasonality.value[0].value;
-  const last = seasonality.value[seasonality.value.length - 1].value;
-  return first ? Math.round(((last - first) / first) * 100) : 0;
+const monthData = computed(() => props.data?.seasonality || []);
+const peakPeriods = computed(() => props.data?.peakPeriods || []);
+const queries = computed(() => props.data?.relatedQueries || []);
+const monthlySearches = computed(() => Number(props.data?.avgMonthlySearches) || 0);
+
+const yearlyGrowth = computed(() => {
+    if (monthData.value.length < 2) return 0;
+    const first = Number(monthData.value[0]?.value) || 0;
+    const last = Number(monthData.value[monthData.value.length - 1]?.value) || 0;
+    if (!first) return 0;
+    return Math.round(((last - first) / first) * 100);
 });
 
-const trendDir = computed(() => demandTrend.value >= 0 ? '▲ +' + demandTrend.value + '%' : '▼ ' + demandTrend.value + '%');
-const trendColor = computed(() => demandTrend.value >= 0 ? 'var(--kai-green)' : 'var(--kai-red)');
+const maxValue = computed(() => Math.max(...monthData.value.map((item) => Number(item.value) || 0), 1));
+const bars = computed(() =>
+    monthData.value.map((item) => ({
+        ...item,
+        pct: Math.max(10, Math.round(((Number(item.value) || 0) / maxValue.value) * 100))
+    }))
+);
 
-// Area chart (SVG)
-const chartPath = computed(() => {
-  if (seasonality.value.length === 0) return { stroke: '', fill: '', pts: [] };
-  const pts = seasonality.value.map(s => s.value);
-  const max = Math.max(...pts, 10);
-  const min = 0;
-  const range = max - min || 1;
-  const w = 500, h = 180;
-  
-  const step = w / (pts.length - 1 || 1);
-  const coords = pts.map((val, i) => {
-    const x = i * step;
-    const y = h - ((val - min) / range) * (h - 20) - 10;
-    return {x, y};
-  });
-  
-  let d = `M ${coords[0].x} ${coords[0].y}`;
-  for (let i = 1; i < coords.length; i++) {
-    const cur = coords[i], prev = coords[i-1];
-    const mx = prev.x + (cur.x - prev.x) / 2;
-    d += ` C ${mx} ${prev.y}, ${mx} ${cur.y}, ${cur.x} ${cur.y}`;
-  }
-  return { stroke: d, fill: `${d} L ${w} ${h} L 0 ${h} Z`, pts: coords };
-});
+const { formatted: monthlySearchesText } = useCountUp(monthlySearches, { duration: 1100, decimals: 0 });
+const { formatted: growthText } = useCountUp(yearlyGrowth, { duration: 1000, decimals: 0, prefix: '+', suffix: '%' });
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Поисковый спрос" subtitle="Анализ динамики интереса и сезонных колебаний" num="8">
-    
-    <!-- TOP METRICS -->
-    <div class="demand-header-grid">
-      <div class="demand-metric-card primary">
-        <div class="d-card-icon">
-          <i class="pi pi-search"></i>
+    <SectionWrapper
+        :id="id"
+        title="Поисковый спрос"
+        subtitle="Здесь видно, насколько живая ниша в поиске и в какие месяцы интерес усиливается. Этот блок помогает планировать запуск акций и контента под сезон."
+        num="8"
+        eyebrow="Спрос"
+        info="Поисковый спрос — это количество запросов, похожих на ваш продукт или услугу. Если спрос растёт, рынок живой и в него стоит инвестировать."
+    >
+        <div class="demand-grid">
+            <article class="demand-overview">
+                <div class="demand-overview__metric">
+                    <span class="demand-overview__label">Запросов в месяц</span>
+                    <span class="demand-overview__value">{{ monthlySearchesText() }}</span>
+                </div>
+                <div class="demand-overview__metric">
+                    <span class="demand-overview__label">Годовая динамика</span>
+                    <span class="demand-overview__value demand-overview__value--green">{{ growthText() }}</span>
+                </div>
+                <div class="demand-overview__metric">
+                    <span class="demand-overview__label">Пиковый сезон</span>
+                    <span class="demand-overview__value">{{ peakPeriods[0] || 'Не определён' }}</span>
+                </div>
+            </article>
+
+            <article class="demand-chart">
+                <div class="demand-chart__header">
+                    <div>
+                        <h3 class="demand-chart__title">Сезонность спроса</h3>
+                        <p class="demand-chart__sub">Столбцы показывают, когда ниша особенно активна</p>
+                    </div>
+                </div>
+
+                <div v-if="bars.length" class="demand-bars">
+                    <div v-for="(bar, index) in bars" :key="bar.period" class="demand-bars__item" :style="{ '--delay': `${index * 50}ms` }">
+                        <div class="demand-bars__value">{{ bar.value }}</div>
+                        <div class="demand-bars__track">
+                            <span class="demand-bars__fill" :class="{ 'demand-bars__fill--peak': peakPeriods.includes(bar.period) }" :style="{ height: `${bar.pct}%` }" />
+                        </div>
+                        <div class="demand-bars__month">{{ bar.period }}</div>
+                    </div>
+                </div>
+                <div v-else class="demand-empty">Данные по сезонности пока не готовы.</div>
+            </article>
         </div>
-        <div class="d-card-info">
-          <div class="d-card-label">
-            Запросов / мес
-            <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="'Среднее количество поисковых запросов в месяц'"></i>
-          </div>
-          <div class="d-card-val">{{ fmtNum(data?.avgMonthlySearches) }}</div>
+
+        <div class="demand-bottom">
+            <article v-if="peakPeriods.length" class="demand-peaks">
+                <div class="demand-peaks__title">Пики спроса</div>
+                <div class="demand-peaks__tags">
+                    <span v-for="peak in peakPeriods" :key="peak" class="demand-peaks__tag">
+                        {{ peak }}
+                    </span>
+                </div>
+            </article>
+
+            <article v-if="queries.length" class="demand-queries">
+                <div class="demand-peaks__title">Популярные запросы</div>
+                <div class="demand-queries__list">
+                    <button v-for="query in queries" :key="query" class="demand-query" type="button">
+                        <i class="pi pi-search" />
+                        {{ query }}
+                    </button>
+                </div>
+            </article>
         </div>
-      </div>
-
-      <div class="demand-metric-card">
-        <div class="d-card-info">
-          <div class="d-card-label">Тренд</div>
-          <div class="d-card-val" :style="{ color: trendColor }">{{ trendDir }}</div>
-        </div>
-      </div>
-
-      <div class="demand-metric-card" v-if="data?.peakPeriods?.length">
-        <div class="d-card-info">
-          <div class="d-card-label">Пик сезона</div>
-          <div class="d-card-val text-white opacity-90">{{ data.peakPeriods[0] }}</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- CHART AREA -->
-    <div class="demand-chart-section">
-      <div class="chart-container">
-        <svg v-if="seasonality.length" viewBox="0 0 500 200" class="demand-svg">
-          <defs>
-            <linearGradient id="demandGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stop-color="var(--kai-blue)" stop-opacity="0.2"/>
-              <stop offset="100%" stop-color="var(--kai-blue)" stop-opacity="0"/>
-            </linearGradient>
-          </defs>
-          
-          <!-- Grid -->
-          <g class="chart-grid-lines">
-            <line x1="0" y1="45" x2="500" y2="45" />
-            <line x1="0" y1="90" x2="500" y2="90" />
-            <line x1="0" y1="135" x2="500" y2="135" />
-          </g>
-
-          <!-- Area & Line -->
-          <path :d="chartPath.fill" fill="url(#demandGradient)" />
-          <path :d="chartPath.stroke" fill="none" stroke="var(--kai-blue)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
-          
-          <!-- Points and Labels -->
-          <g v-for="(s, i) in seasonality" :key="i">
-            <circle :cx="chartPath.pts[i].x" :cy="chartPath.pts[i].y" r="3.5" class="chart-dot" />
-            <text :x="chartPath.pts[i].x" y="195" text-anchor="middle" class="chart-axis-text">{{ s.period.substring(0,3) }}</text>
-          </g>
-        </svg>
-        <div v-else class="empty-chart">Данные по сезонности отсутствуют</div>
-      </div>
-
-      <!-- Peak Recommendations -->
-      <div class="peak-box" v-if="data?.peakPeriods?.length">
-        <h5 class="peak-box-title">Рекомендации по сезонам</h5>
-        <div class="peak-tags">
-          <div v-for="p in data.peakPeriods" :key="p" class="peak-tag">
-            <div class="tag-top">🔥 {{ p }}</div>
-            <div class="tag-bottom">Разогрев за 4 недели</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- RELATED QUERIES -->
-    <div class="related-queries-section" v-if="data?.relatedQueries?.length">
-      <h4 class="section-subtitle">Связанные запросы</h4>
-      <div class="queries-grid">
-        <div v-for="(q, i) in data.relatedQueries" :key="q" class="query-card">
-          <div class="query-text">
-            <i class="pi pi-search mr-2 opacity-40"></i>
-            {{ q }}
-          </div>
-          <div class="query-popularity">
-            <div class="kai-progress-track">
-               <div class="kai-progress-fill" :style="{ width: Math.max(15, 100 - i*12) + '%' }" />
-            </div>
-            <span class="pop-label">High Interest</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </SectionWrapper>
+    </SectionWrapper>
 </template>
 
 <style scoped>
-.demand-header-grid {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 24px;
+.demand-grid {
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+    gap: 20px;
 }
 
-.demand-metric-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
-  padding: 16px 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex: 1;
-  min-width: 180px;
+.demand-overview,
+.demand-chart,
+.demand-peaks,
+.demand-queries {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.demand-metric-card.primary {
-  background: rgba(var(--kai-blue-rgb), 0.05);
-  border-color: rgba(var(--kai-blue-rgb), 0.2);
+.demand-overview {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 }
 
-.d-card-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  background: rgba(var(--kai-blue-rgb), 0.1);
-  color: var(--kai-blue);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
+.demand-overview__metric {
+    padding: 18px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.d-card-info {
-  display: flex;
-  flex-direction: column;
+.demand-overview__label,
+.demand-peaks__title {
+    display: block;
+    color: #6f84a7;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-.d-card-label {
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.1em;
-  margin-bottom: 2px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
+.demand-overview__value {
+    display: block;
+    margin-top: 12px;
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: 34px;
+    font-weight: 900;
+    letter-spacing: -0.05em;
 }
 
-.d-card-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 14px;
-  font-weight: 800;
-  color: var(--kai-txt);
+.demand-overview__value--green {
+    color: #10b981;
 }
 
-/* Chart */
-.demand-chart-section {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 20px;
-  padding: 24px;
-  margin-bottom: 32px;
+.demand-chart__title {
+    margin: 0;
+    color: #162544;
+    font-family: 'Onest', sans-serif;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.chart-container {
-  height: 220px;
-  margin-bottom: 24px;
+.demand-chart__sub {
+    margin: 8px 0 0;
+    color: #6a7f9f;
+    font-size: 14px;
 }
 
-.demand-svg {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
+.demand-bars {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 10px;
+    align-items: end;
+    margin-top: 26px;
+    min-height: 260px;
 }
 
-.chart-grid-lines {
-  stroke: var(--kai-border);
-  stroke-width: 1;
-  stroke-dasharray: 4 4;
+.demand-bars__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
 }
 
-.chart-dot {
-  fill: var(--kai-blue);
-  stroke: var(--kai-bg);
-  stroke-width: 2;
+.demand-bars__value {
+    color: #8094b1;
+    font-size: 11px;
+    font-weight: 700;
 }
 
-.chart-axis-text {
-  font-size: 9px;
-  font-weight: 700;
-  fill: var(--kai-txt3);
-  text-transform: uppercase;
+.demand-bars__track {
+    width: 100%;
+    height: 190px;
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    padding: 0 4px;
 }
 
-.empty-chart {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--kai-txt3);
-  font-size: 11px;
+.demand-bars__fill {
+    width: 100%;
+    border-radius: 18px 18px 8px 8px;
+    background: linear-gradient(180deg, #dbe7ff, #8db8ff);
+    box-shadow: 0 10px 20px rgba(45, 123, 255, 0.12);
+    animation: demandGrow 0.7s ease both;
+    animation-delay: var(--delay);
 }
 
-/* Peak recommendations */
-.peak-box-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 16px;
+.demand-bars__fill--peak {
+    background: linear-gradient(180deg, #2d7bff, #7c3aed);
 }
 
-.peak-tags {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+.demand-bars__month {
+    color: #566d8f;
+    font-size: 12px;
+    font-weight: 700;
 }
 
-.peak-tag {
-  background: rgba(var(--kai-orange-rgb), 0.05);
-  border: 1px solid rgba(var(--kai-orange-rgb), 0.15);
-  padding: 10px 16px;
-  border-radius: 12px;
+.demand-bottom {
+    display: grid;
+    grid-template-columns: 340px minmax(0, 1fr);
+    gap: 20px;
+    margin-top: 20px;
 }
 
-.tag-top {
-  font-size: 11.5px;
-  font-weight: 800;
-  color: var(--kai-orange);
-  margin-bottom: 2px;
+.demand-peaks__tags,
+.demand-queries__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 16px;
 }
 
-.tag-bottom {
-  font-size: 9px;
-  font-weight: 600;
-  color: var(--kai-txt3);
-  opacity: 0.6;
+.demand-peaks__tag,
+.demand-query {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 42px;
+    padding: 0 16px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.84);
+    color: #4f678a;
+    font-size: 13px;
+    font-weight: 700;
+    transition: all 0.18s ease;
 }
 
-/* Related Queries */
-.section-subtitle {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 16px;
+.demand-peaks__tag {
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
 }
 
-.queries-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 12px;
+.demand-query {
+    cursor: pointer;
 }
 
-.query-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  padding: 14px 16px;
-  border-radius: 12px;
+.demand-query:hover {
+    transform: translateY(-2px);
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
 }
 
-.query-text {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--kai-txt);
-  margin-bottom: 12px;
+.demand-empty {
+    margin-top: 24px;
+    padding: 34px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.9);
+    color: #8094b1;
+    text-align: center;
 }
 
-.query-popularity {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+@keyframes demandGrow {
+    from {
+        height: 0;
+    }
 }
 
-.pop-label {
-  font-size: 9px;
-  font-weight: 700;
-  color: var(--kai-txt3);
-  white-space: nowrap;
+@media (max-width: 1100px) {
+    .demand-grid,
+    .demand-bottom {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .demand-bars {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+        row-gap: 18px;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Executive.vue b/src/components/marketing/dashboard-v3/v4/V4Executive.vue
index cc50690..7228fbe 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Executive.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Executive.vue
@@ -1,131 +1,281 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import { useCountUp } from '@/composables/useCountUp';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
 
-const lvlClass = (lvl) => {
-  const l = (lvl || '').toLowerCase();
-  if (l.includes('высок') || l.includes('high')) return 'kai-level-vhigh';
-  if (l.includes('средн') || l.includes('medium')) return 'kai-level-medium';
-  if (l.includes('низк') || l.includes('low')) return 'kai-level-low';
-  return 'kai-level-high';
-};
-const erColor = (v) => parseFloat(v) >= 4 ? 'var(--kai-green)' : parseFloat(v) >= 2 ? 'var(--kai-yellow)' : 'var(--kai-red)';
-const stars = (r) => {
-  const n = parseFloat(r) || 0;
-  return '★'.repeat(Math.round(n)) + '☆'.repeat(5 - Math.round(n));
-};
-const fmtPct = (n) => n != null ? parseFloat(n).toFixed(1) + '%' : '—';
-
-const kpis = computed(() => {
-  const d = props.data || {};
-  return [
-    { icon: 'pi-users', num: d.activeCompetitors ?? '—', label: 'конкурентов', sub: d.competitionLevel, subClass: lvlClass(d.competitionLevel), color: 'var(--kai-blue)' },
-    { icon: 'pi-chart-line', num: fmtPct(d.averageNicheEr), label: 'средний ER', sub: 'Вовлечённость', numColor: erColor(d.averageNicheEr), color: 'var(--kai-green)', term: 'er' },
-    { icon: 'pi-star-fill', num: (parseFloat(d.averageRating) || 0).toFixed(1), label: 'рейтинг', sub: stars(d.averageRating), color: 'var(--kai-yellow)', term: 'rating' },
-    { icon: 'pi-sort-alt', num: d.demandTrend || '—', label: 'тренд', sub: 'За период', color: 'var(--kai-purple)', term: 'trend' },
-    { icon: 'pi-map-marker', num: d.businessStage || '—', label: 'этап', sub: d.geography || '', color: 'var(--kai-orange)' },
-    { icon: 'pi-bolt', num: null, label: 'инсайт', sub: (d.keyFigures || [])[0] || '—', special: true, color: 'var(--kai-blue)' },
-  ];
+const competitorCount = computed(() => Number(props.data?.activeCompetitors) || 0);
+const marketRating = computed(() => Number(props.data?.averageRating) || 0);
+const demandGrowth = computed(() => {
+    const raw = String(props.data?.demandTrend || '').replace(',', '.');
+    const match = raw.match(/-?\d+(\.\d+)?/);
+    return match ? Number(match[0]) : 0;
 });
+const marketEr = computed(() => Number(props.data?.averageNicheEr) || 0);
+
+const competitionIndex = computed(() => {
+    const level = String(props.data?.competitionLevel || '').toLowerCase();
+    if (level.includes('выс')) return 84;
+    if (level.includes('сред')) return 56;
+    if (level.includes('низ')) return 28;
+    return Math.min(100, 20 + competitorCount.value * 10);
+});
+
+const { formatted: competitorsText } = useCountUp(competitorCount, { duration: 900, decimals: 0 });
+const { formatted: ratingText } = useCountUp(marketRating, { duration: 1100, decimals: 1 });
+const { formatted: growthText } = useCountUp(demandGrowth, { duration: 1200, decimals: 0, prefix: '+', suffix: '%' });
+const { formatted: erText } = useCountUp(marketEr, { duration: 1000, decimals: 1, suffix: '%' });
+
+const kpis = computed(() => [
+    {
+        title: 'Конкурентов в нише',
+        value: competitorsText(),
+        raw: competitorCount.value,
+        accent: '#2D7BFF',
+        icon: 'pi pi-building',
+        progress: Math.min(100, competitorCount.value * 12),
+        note: 'Активные игроки в вашем сегменте'
+    },
+    {
+        title: 'Средний рейтинг рынка',
+        value: ratingText(),
+        raw: marketRating.value,
+        accent: '#F59E0B',
+        icon: 'pi pi-star-fill',
+        progress: Math.min(100, marketRating.value * 20),
+        note: 'Средняя оценка по отзывам'
+    },
+    {
+        title: 'Рост спроса',
+        value: growthText(),
+        raw: demandGrowth.value,
+        accent: '#10B981',
+        icon: 'pi pi-chart-line',
+        progress: Math.max(12, Math.min(100, demandGrowth.value * 8)),
+        note: 'Динамика интереса к нише'
+    },
+    {
+        title: 'Средний ER',
+        value: erText(),
+        raw: marketEr.value,
+        accent: '#7C3AED',
+        icon: 'pi pi-comments',
+        progress: Math.min(100, marketEr.value * 18),
+        note: 'Насколько аудитория реагирует на контент'
+    },
+    {
+        title: 'Уровень конкуренции',
+        value: props.data?.competitionLevel || 'Средний',
+        raw: competitionIndex.value,
+        accent: '#F97316',
+        icon: 'pi pi-bolt',
+        progress: competitionIndex.value,
+        note: 'Индекс насыщенности рынка'
+    }
+]);
+
+const quickFacts = computed(() => (props.data?.keyFigures || []).slice(0, 4));
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Обзор рынка" subtitle="Ключевые показатели ниши и статус конкурентной среды" num="0">
-    <div class="kai-kpi-grid">
-      <div v-for="(k, i) in kpis" :key="i" class="kai-kpi" :class="{ 'kai-kpi--special': k.special }">
-        <div class="kai-kpi-icon-wrap" :style="{ color: k.color, background: k.color + '10' }">
-          <i class="pi" :class="k.icon"></i>
+    <SectionWrapper
+        :id="id"
+        title="Ключевые сигналы рынка"
+        subtitle="Пять сигналов, которые сразу показывают температуру ниши: сколько у вас конкурентов, насколько живой спрос, как выглядит репутация и насколько тяжело выделиться."
+        num="1"
+        eyebrow="Ключевые цифры"
+        info="Это краткий управленческий срез отчёта. Если времени мало, начните именно с этого блока."
+    >
+        <div class="executive-grid">
+            <article v-for="(kpi, index) in kpis" :key="kpi.title" class="executive-card" :style="{ '--accent': kpi.accent, '--delay': `${index * 80}ms` }">
+                <div class="executive-card__top">
+                    <div class="executive-card__icon">
+                        <i :class="kpi.icon" />
+                    </div>
+                    <div class="executive-card__value">{{ kpi.value }}</div>
+                </div>
+                <div class="executive-card__title">{{ kpi.title }}</div>
+                <div class="executive-card__note">{{ kpi.note }}</div>
+                <div class="executive-card__progress">
+                    <span class="executive-card__progress-fill" :style="{ width: `${kpi.progress}%` }" />
+                </div>
+            </article>
         </div>
-        
-        <div v-if="!k.special" class="kai-kpi-content">
-          <div class="kai-kpi-num" :style="k.numColor ? { color: k.numColor } : {}">{{ k.num }}</div>
-          <div class="kai-kpi-label">
-            {{ k.label }}
-            <i v-if="k.term" class="pi pi-info-circle kai-term-icon" v-tooltip.top="k.term === 'er' ? 'Процент аудитории, активно взаимодействующий с контентом' : k.term === 'rating' ? 'Средний рейтинг в 2ГИС, Яндекс и Google' : 'Динамика поискового спроса'"></i>
-          </div>
-          <div v-if="k.subClass" class="kai-level-badge" :class="k.subClass">{{ k.sub }}</div>
-          <div v-else class="kai-kpi-sub">{{ k.sub }}</div>
-        </div>
-        
-        <div v-else class="kai-kpi-content">
-          <div class="kai-kpi-label-special">⚡ Главный инсайт</div>
-          <div class="kai-kpi-sub-special">{{ k.sub }}</div>
-        </div>
-      </div>
-    </div>
 
-    <!-- Key insights strip -->
-    <div v-if="(data?.keyFigures || []).length" class="kai-insight-strip">
-       <div v-for="(f, i) in (data?.keyFigures || []).slice(0,4)" :key="i" class="kai-insight-tag">
-         <div class="kai-insight-tag-dot" :style="{ background: ['var(--kai-blue)','var(--kai-yellow)','var(--kai-green)','var(--kai-purple)'][i] }"></div>
-         {{ f }}
-       </div>
-    </div>
-  </SectionWrapper>
+        <div v-if="quickFacts.length" class="executive-facts">
+            <div v-for="fact in quickFacts" :key="fact" class="executive-facts__item">
+                <span class="executive-facts__bullet" />
+                <span>{{ fact }}</span>
+            </div>
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
-.kai-kpi-icon-wrap {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 12px;
-}
-.kai-kpi-icon-wrap i {
-  font-size: 14px;
+.executive-grid {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 18px;
 }
 
-.kai-kpi--special {
-  border-color: rgba(var(--kai-blue-rgb), 0.3) !important;
-  background: rgba(var(--kai-blue-rgb), 0.05) !important;
+.executive-card {
+    position: relative;
+    overflow: hidden;
+    min-height: 220px;
+    padding: 22px;
+    border-radius: 24px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.94)),
+        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, white), transparent 52%);
+    box-shadow: 0 14px 34px rgba(45, 123, 255, 0.08);
+    animation: executiveIn 0.55s ease both;
+    animation-delay: var(--delay);
+    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
 }
 
-.kai-kpi-label-special {
-  color: var(--kai-blue);
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: 4px;
+.executive-card::before {
+    content: '';
+    position: absolute;
+    inset: auto 18px 18px 18px;
+    height: 90px;
+    background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
+    pointer-events: none;
 }
 
-.kai-kpi-sub-special {
-  font-size: 11.5px;
-  color: var(--kai-txt);
-  line-height: 1.5;
-  font-weight: 500;
+.executive-card:hover {
+    transform: translateY(-4px);
+    border-color: color-mix(in srgb, var(--accent) 28%, white);
+    box-shadow: 0 22px 42px rgba(45, 123, 255, 0.14);
 }
 
-.kai-insight-strip {
-  margin-top: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.executive-card__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
 }
 
-.kai-insight-tag {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 14px;
-  background: var(--kai-card);
-  border: 1px solid var(--kai-border);
-  border-radius: 10px;
-  font-size: 11px;
-  color: var(--kai-txt2);
-  font-weight: 500;
+.executive-card__icon {
+    width: 54px;
+    height: 54px;
+    border-radius: 18px;
+    background: color-mix(in srgb, var(--accent) 12%, white);
+    color: var(--accent);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
-.kai-insight-tag-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.executive-card__value {
+    color: #13203d;
+    font-family: 'Onest', sans-serif;
+    font-size: clamp(26px, 3vw, 40px);
+    font-weight: 900;
+    line-height: 0.95;
+    text-align: right;
+    letter-spacing: -0.05em;
+}
+
+.executive-card__title {
+    margin-top: 28px;
+    color: #173053;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+}
+
+.executive-card__note {
+    margin-top: 12px;
+    min-height: 48px;
+    color: #607594;
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.executive-card__progress {
+    position: relative;
+    margin-top: 22px;
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
+}
+
+.executive-card__progress-fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));
+    box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
+    transition: width 0.8s ease-out;
+}
+
+.executive-facts {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+    margin-top: 22px;
+}
+
+.executive-facts__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px 18px;
+    border-radius: 18px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.78);
+    color: #516785;
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.executive-facts__bullet {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #2d7bff, #7c3aed);
+    margin-top: 6px;
+    box-shadow: 0 0 0 5px rgba(45, 123, 255, 0.08);
+    flex: 0 0 auto;
+}
+
+@keyframes executiveIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 1200px) {
+    .executive-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .executive-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .executive-facts {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 520px) {
+    .executive-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Geo.vue b/src/components/marketing/dashboard-v3/v4/V4Geo.vue
index 82a439e..c9c6648 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Geo.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Geo.vue
@@ -1,6 +1,6 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
 
@@ -138,8 +138,8 @@ const sortedCities = computed(() => [...cities.value].sort((a,b) => b.activePlay
 }
 
 .gauge-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
+  font-family: 'Onest', sans-serif;
+  font-size: var(--kai-fs-xxs);
   font-weight: 800;
   text-transform: uppercase;
   color: var(--kai-txt3);
@@ -149,6 +149,19 @@ const sortedCities = computed(() => [...cities.value].sort((a,b) => b.activePlay
 .gauge-svg-wrap {
   position: relative;
   width: 200px;
+  padding: 16px;
+  background: var(--kai-card);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  border: 1px solid var(--kai-border);
+  border-radius: 20px;
+  box-shadow: var(--kai-shadow-lg);
+  transition: all var(--kai-transition-base);
+}
+
+.gauge-svg-wrap:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--kai-shadow-xl), 0 0 0 1px rgba(var(--kai-blue-rgb), 0.08);
 }
 
 .gauge-track {
@@ -162,34 +175,43 @@ const sortedCities = computed(() => [...cities.value].sort((a,b) => b.activePlay
   fill: none;
   stroke-width: 14;
   stroke-linecap: round;
-  transition: all 1s ease-out;
+  transition: all var(--kai-transition-slow);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
 }
 
 .gauge-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 28px;
+  font-family: 'Onest', sans-serif;
+  font-size: var(--kai-fs-hero);
   font-weight: 800;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
 }
 
 .gauge-max {
-  font-size: 8px;
+  font-size: var(--kai-fs-xxs);
   font-weight: 700;
   fill: var(--kai-txt3);
   letter-spacing: 0.1em;
 }
 
 .gauge-status-badge {
-  font-size: 9.5px;
+  font-size: var(--kai-fs-xs);
   font-weight: 800;
-  padding: 6px 16px;
-  border-radius: 99px;
+  padding: 8px 20px;
+  border-radius: 100px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  box-shadow: var(--kai-shadow-sm);
+  transition: all var(--kai-transition-base);
+}
+
+.gauge-status-badge:hover {
+  transform: scale(1.05);
+  box-shadow: var(--kai-shadow-md);
 }
 
 .city-cell {
   font-weight: 700;
-  font-size: 11.5px;
+  font-size: var(--kai-fs-sm);
   color: var(--kai-txt);
 }
 
@@ -212,34 +234,41 @@ const sortedCities = computed(() => [...cities.value].sort((a,b) => b.activePlay
   content: '';
   position: absolute;
   inset: 0;
-  background: var(--kai-blue);
+  background: var(--kai-blue-gradient);
   width: inherit;
   border-radius: inherit;
+  box-shadow: 0 1px 3px rgba(var(--kai-blue-rgb), 0.3);
 }
 
 .intensity-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
+  font-family: 'Onest', sans-serif;
+  font-size: var(--kai-fs-xs);
   font-weight: 800;
   width: 20px;
   text-align: right;
 }
 
 .status-pill {
-  padding: 3px 10px;
-  border-radius: 6px;
-  font-size: 8px;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: var(--kai-fs-xxs);
   font-weight: 900;
   border: 1px solid transparent;
   display: inline-block;
   letter-spacing: 0.05em;
+  transition: all var(--kai-transition-base);
+}
+
+.status-pill:hover {
+  transform: scale(1.05);
+  box-shadow: var(--kai-shadow-sm);
 }
 
 .empty-table {
   text-align: center;
   color: var(--kai-txt3);
   padding: 24px;
-  font-size: 11px;
+  font-size: var(--kai-fs-sm);
 }
 
 @media (max-width: 768px) {
diff --git a/src/components/marketing/dashboard-v3/v4/V4Header.vue b/src/components/marketing/dashboard-v3/v4/V4Header.vue
index 38fd8f7..6a8ae02 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Header.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Header.vue
@@ -1,213 +1,368 @@
 <script setup>
 import { computed } from 'vue';
-const props = defineProps({ status: String, exec: Object });
-const emit = defineEmits(['strategy', 'back']);
-const niche = computed(() => props.exec?.geography || '');
+
+const props = defineProps({
+    status: { type: String, default: 'IDLE' },
+    title: { type: String, default: '' },
+    niche: { type: String, default: '' },
+    city: { type: String, default: '' },
+    generatedAt: { type: String, default: '' },
+    exec: { type: Object, default: () => ({}) }
+});
+
+defineEmits(['strategy', 'back', 'share', 'download']);
+
+const chips = computed(() => {
+    const items = [];
+    if (props.niche) items.push(props.niche);
+    if (props.city) items.push(props.city);
+    if (props.generatedAt) items.push(props.generatedAt);
+    return items;
+});
+
+const statusText = computed(() => {
+    if (props.status === 'COMPLETED') return 'Отчёт готов';
+    if (props.status === 'PROCESSING' || props.status === 'QUEUED') return 'Анализ собирается';
+    if (props.status === 'FAILED') return 'Нужна повторная проверка';
+    return 'Черновик';
+});
 </script>
 
 <template>
-  <header class="v4-header">
-    <!-- Left: brand + niche info -->
-    <div class="v4-header__left">
-      <div class="v4-header__logo">KAI</div>
-      <div class="v4-header__info">
-        <div class="v4-header__niche">Маркет Интеллект · {{ niche }}</div>
-        <div class="v4-header__edition">KAI Prime 2026 · Professional Ed.</div>
-      </div>
-    </div>
+    <section class="hero-banner">
+        <div class="hero-banner__glow hero-banner__glow--left" />
+        <div class="hero-banner__glow hero-banner__glow--right" />
+        <div class="hero-banner__grid" />
 
-    <!-- Right: status + actions -->
-    <div class="v4-header__right">
-      <!-- Status badge -->
-      <div v-if="status === 'COMPLETED'" class="v4-status v4-status--ready">
-        <span class="v4-status__dot v4-status__dot--green"></span>
-        Готово
-      </div>
-      <div v-else-if="status === 'PROCESSING' || status === 'QUEUED'" class="v4-status v4-status--processing">
-        <span class="v4-status__dot v4-status__dot--yellow"></span>
-        Обработка...
-      </div>
+        <div class="hero-banner__top">
+            <button class="hero-chip hero-chip--ghost" type="button" @click="$emit('back')">
+                <i class="pi pi-arrow-left" />
+                Назад к проектам
+            </button>
 
-      <!-- Back to list -->
-      <button class="v4-btn-icon" @click="$emit('back')" title="Вернуться к списку анализов">
-        <i class="pi pi-list"></i>
-      </button>
+            <div class="hero-brand">
+                <div class="hero-brand__logo">K</div>
+                <div>
+                    <div class="hero-brand__name">KonturAI</div>
+                    <div class="hero-brand__sub">Премиальный AI-отчет</div>
+                </div>
+            </div>
+        </div>
 
-      <!-- Generate Strategy -->
-      <button v-if="status === 'COMPLETED'" class="v4-btn-strategy" @click="$emit('strategy')">
-        <i class="pi pi-sparkles"></i>
-        Создать стратегию
-      </button>
-    </div>
-  </header>
+        <div class="hero-banner__content">
+            <div class="hero-banner__copy">
+                <div class="hero-banner__eyebrow">
+                    <span class="hero-status-dot" :class="{ 'hero-status-dot--live': status === 'COMPLETED' }" />
+                    {{ statusText }}
+                </div>
+
+                <h1 class="hero-banner__title">
+                    {{ title || 'Маркетинговый анализ' }}
+                </h1>
+
+                <p class="hero-banner__subtitle">
+                    AI-отчёт по рынку, конкурентам, аудитории и точкам роста. Всё разложено по разделам простым языком, чтобы владелец бизнеса сразу понял, где рынок сильный, где просадка и что делать дальше.
+                </p>
+
+                <div class="hero-banner__chips">
+                    <span v-for="chip in chips" :key="chip" class="hero-chip">
+                        {{ chip }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="hero-banner__actions">
+                <button class="hero-action hero-action--primary" type="button" @click="$emit('download')">
+                    <i class="pi pi-download" />
+                    Скачать PDF
+                </button>
+                <button class="hero-action hero-action--ghost" type="button" @click="$emit('share')">
+                    <i class="pi pi-share-alt" />
+                    Поделиться
+                </button>
+                <button v-if="status === 'COMPLETED'" class="hero-action hero-action--secondary" type="button" @click="$emit('strategy')">
+                    <i class="pi pi-sparkles" />
+                    Получить план продвижения
+                </button>
+            </div>
+        </div>
+    </section>
 </template>
 
 <style scoped>
-.v4-header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  height: 60px;
-  background: rgba(255, 255, 255, 0.94);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(45, 123, 255, 0.14);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 28px;
-  gap: 16px;
-  box-shadow: 0 2px 16px rgba(45,123,255,0.06);
+.hero-banner {
+    position: relative;
+    overflow: hidden;
+    padding: 30px 34px 36px;
+    border-radius: 32px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.98)),
+        radial-gradient(circle at top left, rgba(45, 123, 255, 0.08), transparent 42%),
+        radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.06), transparent 36%);
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    box-shadow: 0 20px 56px rgba(45, 123, 255, 0.08);
 }
 
-.v4-header__left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.hero-banner__grid {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(rgba(45, 123, 255, 0.09) 0.8px, transparent 0.8px);
+    background-size: 18px 18px;
+    opacity: 0.18;
+    pointer-events: none;
 }
 
-.v4-header__logo {
-  width: 32px;
-  height: 32px;
-  border-radius: 9px;
-  background: linear-gradient(135deg, #2D7BFF, #1a55cc);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: 'Unbounded', sans-serif;
-  font-weight: 900;
-  font-size: 10px;
-  color: #fff;
-  flex-shrink: 0;
-  box-shadow: 0 4px 12px rgba(45,123,255,0.35);
+.hero-banner__glow {
+    position: absolute;
+    width: 320px;
+    height: 320px;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.35;
+    pointer-events: none;
 }
 
-.v4-header__info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.hero-banner__glow--left {
+    top: -120px;
+    left: -80px;
+    background: rgba(45, 123, 255, 0.18);
 }
 
-.v4-header__niche {
-  font-family: 'Unbounded', sans-serif;
-  font-weight: 700;
-  font-size: 11px;
-  color: #0F172A;
-  line-height: 1;
-  letter-spacing: -0.01em;
+.hero-banner__glow--right {
+    right: -80px;
+    bottom: -140px;
+    background: rgba(16, 185, 129, 0.14);
 }
 
-.v4-header__edition {
-  font-size: 9px;
-  font-weight: 600;
-  color: #94A3B8;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+.hero-banner__top,
+.hero-banner__content {
+    position: relative;
+    z-index: 1;
 }
 
-.v4-header__right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.hero-banner__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
 }
 
-/* Status badge */
-.v4-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 999px;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+.hero-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
 }
 
-.v4-status--ready {
-  background: rgba(16, 185, 129, 0.1);
-  border: 1px solid rgba(16, 185, 129, 0.25);
-  color: #10B981;
+.hero-brand__logo {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #2d7bff, #7c3aed);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Onest', sans-serif;
+    font-size: 19px;
+    font-weight: 900;
+    box-shadow: 0 10px 24px rgba(45, 123, 255, 0.28);
 }
 
-.v4-status--processing {
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.25);
-  color: #F59E0B;
+.hero-brand__name {
+    font-family: 'Onest', sans-serif;
+    font-size: 15px;
+    font-weight: 800;
+    color: #14203f;
 }
 
-.v4-status__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.hero-brand__sub {
+    color: #7184a4;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
 }
 
-.v4-status__dot--green {
-  background: #10B981;
-  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
+.hero-banner__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 28px;
+    align-items: end;
+    margin-top: 34px;
 }
 
-.v4-status__dot--yellow {
-  background: #F59E0B;
-  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
-  animation: pulse-yellow 1.2s infinite;
+.hero-banner__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    color: #2d7bff;
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-@keyframes pulse-yellow {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+.hero-status-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(45, 123, 255, 0.3);
 }
 
-/* Icon button */
-.v4-btn-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  border: 1px solid rgba(45, 123, 255, 0.18);
-  background: rgba(45, 123, 255, 0.04);
-  color: #64748B;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 13px;
-}
-.v4-btn-icon:hover {
-  background: rgba(45, 123, 255, 0.09);
-  color: #2D7BFF;
-  border-color: rgba(45, 123, 255, 0.32);
-  transform: scale(1.05);
+.hero-status-dot--live {
+    background: #10b981;
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
+    animation: pulseDot 1.8s ease-in-out infinite;
 }
 
-/* Strategy button */
-.v4-btn-strategy {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 8px 18px;
-  border-radius: 10px;
-  background: #2D7BFF;
-  color: #fff;
-  border: none;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: all 0.25s;
-  box-shadow: 0 4px 16px rgba(45, 123, 255, 0.3);
-  white-space: nowrap;
+.hero-banner__title {
+    margin: 16px 0 14px;
+    color: #141f3a;
+    font-family: 'Onest', sans-serif;
+    font-size: clamp(36px, 5vw, 66px);
+    font-weight: 900;
+    line-height: 0.96;
+    letter-spacing: -0.06em;
+    max-width: 820px;
 }
-.v4-btn-strategy:hover {
-  background: #1a6bff;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(45, 123, 255, 0.45);
+
+.hero-banner__subtitle {
+    max-width: 720px;
+    margin: 0;
+    color: #5e7396;
+    font-size: 16px;
+    line-height: 1.75;
 }
-.v4-btn-strategy i {
-  font-size: 11px;
+
+.hero-banner__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 22px;
+}
+
+.hero-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 42px;
+    padding: 0 18px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.82);
+    color: #45618b;
+    font-size: 13px;
+    font-weight: 700;
+    box-shadow: 0 8px 22px rgba(45, 123, 255, 0.06);
+}
+
+.hero-chip--ghost {
+    cursor: pointer;
+    transition: all 0.22s ease;
+}
+
+.hero-chip--ghost:hover {
+    transform: translateY(-2px);
+    color: #2d7bff;
+    box-shadow: 0 14px 28px rgba(45, 123, 255, 0.12);
+}
+
+.hero-banner__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.hero-action {
+    position: relative;
+    overflow: hidden;
+    min-width: 188px;
+    min-height: 54px;
+    padding: 0 22px;
+    border-radius: 18px;
+    border: 1px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: 14px;
+    font-weight: 800;
+    transition: all 0.22s ease;
+    cursor: pointer;
+}
+
+.hero-action::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.34), transparent 60%);
+    transform: translateX(-120%);
+    transition: transform 0.45s ease;
+}
+
+.hero-action:hover::after {
+    transform: translateX(120%);
+}
+
+.hero-action:hover {
+    transform: translateY(-2px);
+}
+
+.hero-action--primary,
+.hero-action--secondary {
+    color: #fff;
+    box-shadow: 0 16px 34px rgba(45, 123, 255, 0.22);
+}
+
+.hero-action--primary {
+    background: linear-gradient(135deg, #2d7bff, #1aa7ff);
+}
+
+.hero-action--secondary {
+    background: linear-gradient(135deg, #2d7bff, #7c3aed);
+}
+
+.hero-action--ghost {
+    color: #2d7bff;
+    background: rgba(255, 255, 255, 0.92);
+    border-color: rgba(45, 123, 255, 0.18);
+    box-shadow: 0 12px 28px rgba(45, 123, 255, 0.08);
+}
+
+@keyframes pulseDot {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(0.8);
+    }
+}
+
+@media (max-width: 992px) {
+    .hero-banner {
+        padding: 24px;
+        border-radius: 28px;
+    }
+
+    .hero-banner__top,
+    .hero-banner__content {
+        grid-template-columns: 1fr;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .hero-banner__actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 640px) {
+    .hero-action {
+        width: 100%;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Landscape.vue b/src/components/marketing/dashboard-v3/v4/V4Landscape.vue
index dd36598..540312e 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Landscape.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Landscape.vue
@@ -1,232 +1,271 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
-const props = defineProps({ id: String, data: Object, demand: Object });
+const props = defineProps({ id: String, data: Object });
 
-const PLATFORM_COLORS = { 
-  Instagram: '#E1306C', 
-  TikTok: '#69C9D0', 
-  Telegram: '#2AABEE', 
-  '2GIS': '#00B140', 
-  YouTube: '#FF0000', 
-  GoogleMaps: '#4285F4' 
+const PLATFORM_COLORS = {
+    Instagram: '#E1306C',
+    TikTok: '#69C9D0',
+    Telegram: '#2AABEE',
+    '2GIS': '#10B981',
+    YouTube: '#FF0000',
+    Google: '#4285F4',
+    GoogleMaps: '#4285F4'
 };
 
 const platforms = computed(() => {
-  const pl = props.data?.activePlayersByPlatform || {};
-  const max = Math.max(...Object.values(pl), 1);
-  return Object.entries(pl).map(([k, v]) => ({ 
-    name: k, 
-    count: v, 
-    pct: Math.round(v / max * 100), 
-    color: PLATFORM_COLORS[k] || 'var(--kai-blue)' 
-  })).sort((a,b) => b.count - a.count);
+    const source = props.data?.activePlayersByPlatform || {};
+    const max = Math.max(...Object.values(source), 1);
+    return Object.entries(source)
+        .map(([name, count]) => ({
+            name,
+            count,
+            color: PLATFORM_COLORS[name] || '#2D7BFF',
+            width: Math.max(12, Math.round((count / max) * 100))
+        }))
+        .sort((a, b) => b.count - a.count);
 });
 
 const cities = computed(() => {
-  const cd = props.data?.cityDistribution || {};
-  const max = Math.max(...Object.values(cd), 1);
-  return Object.entries(cd).map(([k, v]) => ({ 
-    city: k, 
-    count: v, 
-    pct: Math.round(v / max * 100) 
-  })).sort((a,b) => b.count - a.count).slice(0, 7);
+    const source = props.data?.cityDistribution || {};
+    const max = Math.max(...Object.values(source), 1);
+    return Object.entries(source)
+        .map(([city, count]) => ({
+            city,
+            count,
+            width: Math.max(10, Math.round((count / max) * 100))
+        }))
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 6);
 });
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Ландшафт рынка" subtitle="Распределение игроков по платформам и географии" num="1">
-    <div class="landscape-grid">
-      <!-- 1. PLATFORMS -->
-      <div class="landscape-card">
-        <h3 class="landscape-label">Конкуренты по платформам</h3>
-        <div class="platform-list">
-          <div v-for="p in platforms" :key="p.name" class="platform-item">
-            <div class="platform-name">{{ p.name }}</div>
-            <div class="platform-track">
-              <div class="platform-fill" :style="{ width: p.pct + '%', background: p.color }">
-                <span class="platform-count">{{ p.count }}</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="!platforms.length" class="empty-state">Нет данных</div>
-        </div>
-      </div>
+    <SectionWrapper
+        :id="id"
+        title="Ландшафт рынка"
+        subtitle="Показываем, где конкуренты представлены сильнее всего и какие площадки реально забирают внимание аудитории."
+        num="2"
+        eyebrow="Рынок"
+        info="Чем больше игроков на площадке, тем выше конкуренция и тем сильнее нужно отличаться визуально и по офферу."
+    >
+        <div class="landscape-grid">
+            <article class="landscape-card">
+                <div class="landscape-card__header">
+                    <div>
+                        <h3 class="landscape-card__title">Площадки присутствия</h3>
+                        <p class="landscape-card__sub">Где в интернете конкуренты активны чаще всего</p>
+                    </div>
+                </div>
 
-      <!-- 2. CITIES -->
-      <div class="landscape-card">
-        <h3 class="landscape-label">Топ городов присутствия</h3>
-        <div class="city-list">
-          <div v-for="c in cities" :key="c.city" class="city-item">
-            <span class="city-name">{{ c.city }}</span>
-            <span class="city-count">{{ c.count }}</span>
-            <div class="kai-progress-track">
-              <div class="kai-progress-fill" :style="{ width: c.pct + '%' }" />
-            </div>
-          </div>
-          <div v-if="!cities.length" class="empty-state">Нет данных</div>
-        </div>
+                <div v-if="platforms.length" class="platform-list">
+                    <div v-for="platform in platforms" :key="platform.name" class="platform-row">
+                        <div class="platform-row__label">
+                            <span class="platform-row__dot" :style="{ background: platform.color }" />
+                            {{ platform.name }}
+                        </div>
+                        <div class="platform-row__bar">
+                            <span class="platform-row__fill" :style="{ width: `${platform.width}%`, background: `linear-gradient(90deg, ${platform.color}, color-mix(in srgb, ${platform.color} 65%, white))` }" />
+                        </div>
+                        <div class="platform-row__value">{{ platform.count }}</div>
+                    </div>
+                </div>
+                <div v-else class="landscape-empty">Данные по площадкам пока не собраны.</div>
+            </article>
 
-        <!-- REPUTATION MINI-BANNER -->
-        <div v-if="data?.nicheReputationLevel" class="reputation-banner">
-          <div class="reputation-info">
-            <div class="reputation-label">
-              Репутация ниши
-              <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="'Средний рейтинг среди всех конкурентов.'"></i>
-            </div>
-            <div class="reputation-value">
-              {{ data.nicheReputationLevel }} <span class="reputation-total">/ 5.0</span>
-            </div>
-          </div>
-          <div class="reputation-icon">🏆</div>
+            <article class="landscape-card">
+                <div class="landscape-card__header">
+                    <div>
+                        <h3 class="landscape-card__title">Города и плотность</h3>
+                        <p class="landscape-card__sub">Где концентрация игроков наиболее заметна</p>
+                    </div>
+                    <div v-if="data?.nicheReputationLevel" class="landscape-score">
+                        <span class="landscape-score__label">Средний рейтинг ниши</span>
+                        <span class="landscape-score__value">{{ data.nicheReputationLevel }}</span>
+                    </div>
+                </div>
+
+                <div v-if="cities.length" class="city-list">
+                    <div v-for="city in cities" :key="city.city" class="city-row">
+                        <div class="city-row__top">
+                            <span class="city-row__name">{{ city.city }}</span>
+                            <span class="city-row__value">{{ city.count }} игроков</span>
+                        </div>
+                        <div class="city-row__bar">
+                            <span class="city-row__fill" :style="{ width: `${city.width}%` }" />
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="landscape-empty">Географическая картина ещё не сформирована.</div>
+            </article>
         </div>
-      </div>
-    </div>
-  </SectionWrapper>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .landscape-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
 }
 
-.landscape-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--kai-txt3);
-  margin-bottom: 24px;
+.landscape-card {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.platform-list, .city-list {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+.landscape-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+    margin-bottom: 22px;
 }
 
-.platform-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.landscape-card__title {
+    margin: 0;
+    color: #162544;
+    font-family: 'Onest', sans-serif;
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.platform-name {
-  width: 90px;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--kai-txt2);
-  text-align: right;
-  flex-shrink: 0;
+.landscape-card__sub {
+    margin: 8px 0 0;
+    color: #6a7f9f;
+    font-size: 14px;
+    line-height: 1.6;
 }
 
-.platform-track {
-  flex: 1;
-  height: 24px;
-  background: var(--kai-card);
-  border-radius: 6px;
-  overflow: hidden;
-  position: relative;
-  border: 1px solid var(--kai-border);
+.landscape-score {
+    padding: 14px 16px;
+    border-radius: 18px;
+    background: rgba(16, 185, 129, 0.08);
+    border: 1px solid rgba(16, 185, 129, 0.14);
+    text-align: right;
 }
 
-.platform-fill {
-  height: 100%;
-  border-radius: 4px;
-  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-  box-shadow: 0 0 15px rgba(255,255,255,0.05);
+.landscape-score__label {
+    display: block;
+    color: #3e8a73;
+    font-size: 10px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
 }
 
-.platform-count {
-  font-size: 10px;
-  font-weight: 900;
-  color: #fff;
-  font-family: 'Unbounded', sans-serif;
+.landscape-score__value {
+    display: block;
+    margin-top: 8px;
+    color: #10b981;
+    font-family: 'Onest', sans-serif;
+    font-size: 28px;
+    font-weight: 900;
 }
 
-.city-item {
-  display: grid;
-  grid-template-columns: 100px 30px 1fr;
-  align-items: center;
-  gap: 12px;
+.platform-list,
+.city-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
 
-.city-name {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--kai-txt2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.platform-row,
+.city-row {
+    padding: 16px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.city-count {
-  font-size: 11.5px;
-  font-weight: 800;
-  font-family: 'Unbounded', sans-serif;
-  color: var(--kai-blue);
-  text-align: right;
+.platform-row {
+    display: grid;
+    grid-template-columns: 140px minmax(0, 1fr) 48px;
+    align-items: center;
+    gap: 14px;
 }
 
-.reputation-banner {
-  margin-top: 32px;
-  padding: 16px 20px;
-  background: linear-gradient(135deg, rgba(var(--kai-green-rgb), 0.1) 0%, rgba(var(--kai-green-rgb), 0.03) 100%);
-  border: 1px solid rgba(var(--kai-green-rgb), 0.2);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.platform-row__label,
+.city-row__name {
+    color: #173053;
+    font-size: 14px;
+    font-weight: 700;
 }
 
-.reputation-label {
-  font-size: 9px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--kai-green);
-  margin-bottom: 4px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
+.platform-row__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.reputation-value {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 24px;
-  font-weight: 900;
-  color: var(--kai-green);
-  line-height: 1;
+.platform-row__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 6px rgba(45, 123, 255, 0.06);
 }
 
-.reputation-total {
-  font-size: 12px;
-  opacity: 0.5;
+.platform-row__bar,
+.city-row__bar {
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.reputation-icon {
-  font-size: 24px;
-  filter: drop-shadow(0 0 8px rgba(var(--kai-green-rgb), 0.4));
+.platform-row__fill,
+.city-row__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: 0 8px 18px rgba(45, 123, 255, 0.18);
+    transition: width 0.7s ease;
 }
 
-.empty-state {
-  color: var(--kai-txt3);
-  font-size: 11px;
-  text-align: center;
-  padding: 24px 0;
-  font-weight: 500;
+.city-row__fill {
+    background: linear-gradient(90deg, #2d7bff, #7c3aed);
 }
 
-@media (max-width: 768px) {
-  .landscape-grid {
-    grid-template-columns: 1fr;
-  }
+.platform-row__value,
+.city-row__value {
+    color: #4d678d;
+    font-size: 13px;
+    font-weight: 700;
+    text-align: right;
+}
+
+.city-row__top {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+    margin-bottom: 12px;
+}
+
+.landscape-empty {
+    padding: 28px;
+    border-radius: 18px;
+    background: rgba(248, 250, 255, 0.8);
+    color: #7990b4;
+    text-align: center;
+    font-size: 14px;
+}
+
+@media (max-width: 900px) {
+    .landscape-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .platform-row {
+        grid-template-columns: 1fr;
+    }
+
+    .platform-row__value {
+        text-align: left;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Positioning.vue b/src/components/marketing/dashboard-v3/v4/V4Positioning.vue
index 43232a4..0d3cf54 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Positioning.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Positioning.vue
@@ -1,335 +1,233 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
 
-const mode = computed(() => props.data?.mode || 'COMPARISON');
-const isBench = computed(() => mode.value === 'BENCHMARK');
-
 const axes = [
-  { key: 'activity', label: 'Активность', tip: 'Количество и регулярность публикаций' },
-  { key: 'engagement', label: 'Вовлечённость', tip: 'Лайки, комментарии, репосты' },
-  { key: 'video', label: 'Видео', tip: 'Доля Reels / TikTok' },
-  { key: 'reputation', label: 'Репутация', tip: 'Рейтинг на агрегаторах' },
-  { key: 'frequency', label: 'Частота', tip: 'Интервал между постами' }
+    { key: 'activity', label: 'Активность' },
+    { key: 'engagement', label: 'Вовлеченность' },
+    { key: 'video', label: 'Видео' },
+    { key: 'reputation', label: 'Репутация' },
+    { key: 'frequency', label: 'Частота' }
 ];
 
-const uMet = computed(() => props.data?.userMetrics || {});
-const mMet = computed(() => props.data?.marketMetrics || {});
+const marketMetrics = computed(() => props.data?.marketMetrics || {});
+const userMetrics = computed(() => props.data?.userMetrics || {});
 
-const gapData = computed(() => axes.map(a => {
-  const m = parseFloat(mMet.value[a.key]) || 0;
-  const u = parseFloat(uMet.value[a.key]) || 0;
-  const diff = u - m;
-  let prio = 'NEED', prioText = 'НУЖНО';
-  if (diff < -60) { prio = 'CRIT'; prioText = 'КРИТИЧНО'; }
-  else if (diff < -40) { prio = 'IMP'; prioText = 'ВАЖНО'; }
-  else if (diff >= 0) { prio = 'AHEAD'; prioText = 'ЛИДЕР'; }
-  return { label: a.label, m, u, diff, prio, prioText, tip: a.tip };
-}));
+const pointPath = (metrics) => {
+    const points = axes.map((axis, index) => {
+        const value = Math.min(Number(metrics[axis.key]) || 0, 100);
+        const angle = (Math.PI * 2 * index) / axes.length - Math.PI / 2;
+        const radius = 92 * (value / 100);
+        const x = 130 + radius * Math.cos(angle);
+        const y = 130 + radius * Math.sin(angle);
+        return `${x},${y}`;
+    });
 
-// Radar Chart Math
-const radarPath = (metrics, scale=0.8) => {
-  const pts = axes.map((a, i) => {
-    const v = Math.min(parseFloat(metrics[a.key]) || 0, 100);
-    const r = (v / 100) * 100 * scale; 
-    const angle = (Math.PI * 2 * i) / axes.length - Math.PI / 2;
-    return `${150 + r * Math.cos(angle)},${150 + r * Math.sin(angle)}`;
-  });
-  return `M ${pts.join(' L ')} Z`;
+    return `M ${points.join(' L ')} Z`;
 };
 
-const marketPath = computed(() => radarPath(mMet.value));
-const userPath = computed(() => isBench.value ? '' : radarPath(uMet.value));
+const marketPath = computed(() => pointPath(marketMetrics.value));
+const userPath = computed(() => pointPath(userMetrics.value));
+
+const gapRows = computed(() =>
+    axes.map((axis) => {
+        const market = Number(marketMetrics.value[axis.key]) || 0;
+        const user = Number(userMetrics.value[axis.key]) || 0;
+        return {
+            label: axis.label,
+            market,
+            user,
+            gap: market - user
+        };
+    })
+);
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Позиционирование" :subtitle="isBench ? 'Сравнение потенциала входа с текущими лидерами' : 'Ваш аккаунт в контексте средних показателей рынка'" num="9">
-    <div class="pos-grid">
-      
-      <!-- RADAR SECTION -->
-      <div class="radar-col">
-        <div class="radar-container">
-          <svg viewBox="0 0 300 300" class="radar-svg">
-            <!-- Web Circles -->
-            <circle cx="150" cy="150" r="100" class="radar-web" />
-            <circle cx="150" cy="150" r="75" class="radar-web" />
-            <circle cx="150" cy="150" r="50" class="radar-web" />
-            <circle cx="150" cy="150" r="25" class="radar-web" />
-            
-            <!-- Axis lines -->
-            <g v-for="(a, i) in axes" :key="i">
-              <line x1="150" y1="150" 
-                    :x2="150 + 100 * Math.cos((Math.PI * 2 * i) / axes.length - Math.PI / 2)" 
-                    :y2="150 + 100 * Math.sin((Math.PI * 2 * i) / axes.length - Math.PI / 2)" 
-                    class="radar-axis-line" />
-              <text :x="150 + 115 * Math.cos((Math.PI * 2 * i) / axes.length - Math.PI / 2)" 
-                    :y="150 + 115 * Math.sin((Math.PI * 2 * i) / axes.length - Math.PI / 2)" 
-                    text-anchor="middle" class="radar-axis-label">{{ a.label }}</text>
-            </g>
-            
-            <!-- Paths -->
-            <path :d="marketPath" class="radar-path market" />
-            <path v-if="!isBench" :d="userPath" class="radar-path user" />
-            
-            <text v-if="isBench" x="150" y="155" text-anchor="middle" class="radar-bench-label">BENCHMARK</text>
-          </svg>
-        </div>
-        
-        <div class="radar-legend">
-          <div class="legend-item market">
-            <span class="dot"></span> Средний рынок
-          </div>
-          <div v-if="!isBench" class="legend-item user">
-            <span class="dot"></span> Ваш аккаунт
-          </div>
-        </div>
-      </div>
+    <SectionWrapper
+        :id="id"
+        title="Ваша позиция"
+        subtitle="Сравниваем ваш текущий профиль с рыночной нормой. Чем меньше разрыв, тем ближе вы к сильной позиции в нише."
+        num="9"
+        eyebrow="Ваша позиция"
+        info="Синий контур показывает средний рынок. Красный контур показывает ваше текущее положение. Чем меньше разрыв, тем легче вам конкурировать."
+    >
+        <div class="positioning-grid">
+            <article class="positioning-radar">
+                <svg viewBox="0 0 260 260" class="positioning-radar__svg">
+                    <circle cx="130" cy="130" r="92" class="positioning-radar__ring" />
+                    <circle cx="130" cy="130" r="69" class="positioning-radar__ring" />
+                    <circle cx="130" cy="130" r="46" class="positioning-radar__ring" />
+                    <circle cx="130" cy="130" r="23" class="positioning-radar__ring" />
 
-      <!-- GAP TABLE SECTION -->
-      <div class="table-col">
-        <h4 class="pos-subtitle">Анализ разрывов (Gap Analysis)</h4>
-        <div class="table-card">
-          <table class="kai-table">
-            <thead>
-              <tr>
-                <th>Параметр</th>
-                <th width="70">Рынок</th>
-                <th v-if="!isBench" width="70">Вы</th>
-                <th width="80">Разрыв</th>
-                <th width="100">Статус</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="g in gapData" :key="g.label">
-                <td class="param-cell">
-                  {{ g.label }}
-                  <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="g.tip"></i>
-                </td>
-                <td class="font-bold text-blue-500">{{ Math.round(g.m) }}</td>
-                <td v-if="!isBench" class="font-bold text-green-500">{{ Math.round(g.u) }}</td>
-                <td class="gap-cell" :style="{ color: g.diff >= 0 ? 'var(--kai-green)' : (g.diff < -40 ? 'var(--kai-red)' : 'var(--kai-yellow)') }">
-                  {{ g.diff >= 0 ? '+'+Math.round(g.diff) : Math.round(g.diff) }}
-                </td>
-                <td>
-                  <span class="prio-pill" :class="g.prio.toLowerCase()">{{ g.prioText }}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                    <g v-for="(axis, index) in axes" :key="axis.key">
+                        <line
+                            x1="130"
+                            y1="130"
+                            :x2="130 + 92 * Math.cos((Math.PI * 2 * index) / axes.length - Math.PI / 2)"
+                            :y2="130 + 92 * Math.sin((Math.PI * 2 * index) / axes.length - Math.PI / 2)"
+                            class="positioning-radar__line"
+                        />
+                        <text
+                            :x="130 + 112 * Math.cos((Math.PI * 2 * index) / axes.length - Math.PI / 2)"
+                            :y="130 + 112 * Math.sin((Math.PI * 2 * index) / axes.length - Math.PI / 2)"
+                            text-anchor="middle"
+                            class="positioning-radar__label"
+                        >
+                            {{ axis.label }}
+                        </text>
+                    </g>
 
-        <div class="focus-section" v-if="data?.strategicFocus?.length">
-          <h4 class="pos-subtitle">Стратегические фокусы</h4>
-          <div class="focus-list">
-            <div v-for="(f, i) in data.strategicFocus" :key="i" class="focus-card">
-              <span class="focus-num">{{ i+1 }}</span>
-              <span class="focus-text">{{ f }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
+                    <path :d="marketPath" class="positioning-radar__shape positioning-radar__shape--market" />
+                    <path :d="userPath" class="positioning-radar__shape positioning-radar__shape--user" />
+                </svg>
 
-    </div>
-  </SectionWrapper>
+                <div class="positioning-legend">
+                    <span><i class="pi pi-stop" /> Рынок</span>
+                    <span><i class="pi pi-stop positioning-legend__user" /> Вы</span>
+                </div>
+            </article>
+
+            <article class="positioning-gap">
+                <h3 class="positioning-gap__title">Ключевые разрывы</h3>
+                <div class="positioning-gap__table">
+                    <div v-for="row in gapRows" :key="row.label" class="positioning-gap__row">
+                        <div class="positioning-gap__name">{{ row.label }}</div>
+                        <div class="positioning-gap__vals">
+                            <span>Рынок: {{ row.market }}</span>
+                            <span>Вы: {{ row.user }}</span>
+                        </div>
+                        <div class="positioning-gap__delta" :class="{ 'positioning-gap__delta--bad': row.gap > 0 }">
+                            {{ row.gap > 0 ? `Нужно подтянуть +${row.gap}` : 'Вы на уровне рынка' }}
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
-.pos-grid {
-  display: grid;
-  grid-template-columns: 320px 1fr;
-  gap: 48px;
-  align-items: start;
+.positioning-grid {
+    display: grid;
+    grid-template-columns: 360px minmax(0, 1fr);
+    gap: 20px;
 }
 
-.radar-col {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.positioning-radar,
+.positioning-gap {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.radar-container {
-  width: 320px;
-  height: 320px;
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 24px;
-  padding: 20px;
-  position: relative;
+.positioning-radar__svg {
+    width: 100%;
+    max-width: 280px;
+    margin: 0 auto;
+    display: block;
 }
 
-.radar-svg {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
+.positioning-radar__ring,
+.positioning-radar__line {
+    fill: none;
+    stroke: rgba(45, 123, 255, 0.12);
 }
 
-.radar-web {
-  fill: none;
-  stroke: var(--kai-border);
-  stroke-width: 0.5;
+.positioning-radar__label {
+    fill: #6a7f9f;
+    font-size: 10px;
+    font-weight: 700;
 }
 
-.radar-axis-line {
-  stroke: var(--kai-border);
-  stroke-width: 1;
+.positioning-radar__shape {
+    stroke-width: 2.5;
 }
 
-.radar-axis-label {
-  font-size: 8.5px;
-  font-weight: 800;
-  fill: var(--kai-txt3);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.positioning-radar__shape--market {
+    fill: rgba(45, 123, 255, 0.18);
+    stroke: #2d7bff;
 }
 
-.radar-path {
-  fill-opacity: 0.2;
-  stroke-width: 2.5;
-  stroke-linejoin: round;
-  transition: all 0.6s ease-out;
+.positioning-radar__shape--user {
+    fill: rgba(239, 68, 68, 0.12);
+    stroke: #ef4444;
+    stroke-dasharray: 6 6;
 }
 
-.radar-path.market {
-  fill: var(--kai-blue);
-  stroke: var(--kai-blue);
+.positioning-legend {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 12px;
+    color: #566d8f;
+    font-size: 13px;
+    font-weight: 700;
 }
 
-.radar-path.user {
-  fill: var(--kai-green);
-  stroke: var(--kai-green);
-  stroke-width: 3.5;
-  filter: drop-shadow(0 0 8px rgba(var(--kai-green-rgb), 0.3));
+.positioning-legend i {
+    color: #2d7bff;
 }
 
-.radar-bench-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  fill: var(--kai-blue);
-  opacity: 0.4;
+.positioning-legend__user {
+    color: #ef4444 !important;
 }
 
-.radar-legend {
-  display: flex;
-  justify-content: center;
-  gap: 20px;
+.positioning-gap__title {
+    margin: 0;
+    color: #173053;
+    font-family: 'Onest', sans-serif;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--kai-txt2);
+.positioning-gap__table {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 22px;
 }
 
-.legend-item .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
+.positioning-gap__row {
+    padding: 18px;
+    border-radius: 20px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
 }
 
-.legend-item.market .dot { background: var(--kai-blue); }
-.legend-item.user .dot { background: var(--kai-green); }
-
-/* Table Section */
-.pos-subtitle {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 16px;
+.positioning-gap__name {
+    color: #153053;
+    font-size: 15px;
+    font-weight: 800;
 }
 
-.table-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
-  overflow: hidden;
-  margin-bottom: 32px;
+.positioning-gap__vals {
+    display: flex;
+    gap: 14px;
+    margin-top: 10px;
+    color: #607594;
+    font-size: 13px;
 }
 
-.param-cell {
-  font-weight: 700;
-  font-size: 11.5px;
-  color: var(--kai-txt);
+.positioning-gap__delta {
+    margin-top: 12px;
+    color: #10b981;
+    font-size: 13px;
+    font-weight: 700;
 }
 
-.gap-cell {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 11px;
-  font-weight: 800;
+.positioning-gap__delta--bad {
+    color: #ef4444;
 }
 
-.prio-pill {
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 8px;
-  font-weight: 900;
-  letter-spacing: 0.05em;
-}
-
-.prio-pill.crit { color: #fff; background: var(--kai-red); }
-.prio-pill.imp { background: rgba(var(--kai-orange-rgb), 0.2); color: var(--kai-orange); }
-.prio-pill.need { background: rgba(var(--kai-yellow-rgb), 0.2); color: var(--kai-yellow); }
-.prio-pill.ahead { background: rgba(var(--kai-green-rgb), 0.2); color: var(--kai-green); }
-
-/* Focus */
-.focus-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.focus-card {
-  background: rgba(var(--kai-blue-rgb), 0.03);
-  border: 1px solid var(--kai-border);
-  padding: 12px 16px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  transition: all 0.3s;
-}
-
-.focus-card:hover {
-  background: rgba(var(--kai-blue-rgb), 0.06);
-  border-color: var(--kai-blue);
-}
-
-.focus-num {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--kai-blue);
-  width: 24px;
-  height: 24px;
-  background: rgba(var(--kai-blue-rgb), 0.1);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.focus-text {
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--kai-txt2);
-  line-height: 1.4;
-}
-
-@media (max-width: 1200px) {
-  .pos-grid {
-    grid-template-columns: 1fr;
-    gap: 32px;
-  }
-  .radar-col {
-    align-items: center;
-  }
+@media (max-width: 960px) {
+    .positioning-grid {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Rationale.vue b/src/components/marketing/dashboard-v3/v4/V4Rationale.vue
index 7bf1c53..8660c4e 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Rationale.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Rationale.vue
@@ -4,252 +4,160 @@ import { computed } from 'vue';
 const props = defineProps({ id: String, data: String });
 defineEmits(['strategy']);
 
-const pars = computed(() => {
-  if (!props.data) return [];
-  return props.data.split('\n\n').filter(p => p.trim());
-});
+const paragraphs = computed(() =>
+    String(props.data || '')
+        .split('\n\n')
+        .map((item) => item.trim())
+        .filter(Boolean)
+);
 </script>
 
 <template>
-  <div :id="id" class="rationale-container">
-    
-    <div class="rationale-content">
-      <div class="stamp-badge">
-        <i class="pi pi-verified mr-2"></i> KAI AI STRATEGY CORE
-      </div>
-      
-      <div class="content-header">
-        <h2 class="content-title">Почему SMM — ваш следующий шаг</h2>
-        <p class="content-subtitle">Обоснование стратегии на основе рыночных данных</p>
-      </div>
-      
-      <div class="rationale-body">
-        <div v-for="(p, i) in pars" :key="i" class="rationale-para">
-          <span class="para-dot"></span>
-          <p>{{ p }}</p>
-        </div>
-        <div v-if="!pars.length" class="empty-pars">Формирование стратегического обоснования...</div>
-      </div>
-    </div>
+    <section :id="id" class="rationale">
+        <article class="rationale-quote">
+            <div class="rationale-quote__eyebrow">Стратегическое обоснование</div>
+            <h2 class="rationale-quote__title">Почему именно этот сценарий продвижения выглядит самым сильным</h2>
 
-    <!-- CTA Block -->
-    <div class="cta-block">
-      <div class="cta-inner">
-        <div class="cta-header">
-            <div class="cta-icon-box">
-                <i class="pi pi-bolt"></i>
+            <div v-if="paragraphs.length" class="rationale-quote__body">
+                <p v-for="paragraph in paragraphs" :key="paragraph">
+                    {{ paragraph }}
+                </p>
             </div>
-            <h3 class="cta-title">Готовы к запуску?</h3>
-        </div>
-        <p class="cta-desc">На основе этого анализа мы создадим для вас полный план захвата рынка:</p>
-        
-        <div class="cta-features">
-          <div class="feature-item"><i class="pi pi-check"></i> Контент-стратегия на 3 месяца</div>
-          <div class="feature-item"><i class="pi pi-check"></i> Шаблоны для видео и постов</div>
-          <div class="feature-item"><i class="pi pi-check"></i> График публикаций (Prime Time)</div>
-          <div class="feature-item"><i class="pi pi-check"></i> Скрипты для ответов в CRM</div>
-        </div>
+            <div v-else class="rationale-quote__empty">Обоснование ещё формируется.</div>
+        </article>
 
-        <button class="prime-cta-btn" @click="$emit('strategy')">
-           Сгенерировать SMM-стратегию
-           <i class="pi pi-arrow-right ml-2"></i>
-        </button>
-      </div>
-    </div>
-    
-  </div>
+        <article class="rationale-cta">
+            <div class="rationale-cta__eyebrow">Следующий шаг</div>
+            <h3 class="rationale-cta__title">Получить персональный план продвижения</h3>
+            <p class="rationale-cta__text">
+                На базе этого анализа можно сразу перейти к готовому SMM-плану: контент, офферы, график публикаций и приоритеты по каналам.
+            </p>
+
+            <button class="rationale-cta__button" type="button" @click="$emit('strategy')">
+                <i class="pi pi-sparkles" />
+                Получить персональный план продвижения
+                <i class="pi pi-arrow-right" />
+            </button>
+        </article>
+    </section>
 </template>
 
 <style scoped>
-.rationale-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 48px;
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 32px;
-  padding: 48px;
-  position: relative;
-  overflow: hidden;
-  margin-top: 64px;
+.rationale {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
+    gap: 20px;
 }
 
-.rationale-container::before {
-  content: '';
-  position: absolute;
-  top: -100px;
-  right: -100px;
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, rgba(var(--kai-blue-rgb), 0.1) 0%, transparent 70%);
-  pointer-events: none;
+.rationale-quote,
+.rationale-cta {
+    position: relative;
+    overflow: hidden;
+    padding: 28px;
+    border-radius: 30px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.stamp-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  background: rgba(var(--kai-blue-rgb), 0.15);
-  color: var(--kai-blue);
-  border-radius: 8px;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  margin-bottom: 24px;
-  border: 1px solid rgba(var(--kai-blue-rgb), 0.2);
+.rationale-quote::before {
+    content: '';
+    position: absolute;
+    inset: 24px auto 24px 24px;
+    width: 4px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #2d7bff, #7c3aed);
 }
 
-.content-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 24px;
-  font-weight: 800;
-  color: var(--kai-txt);
-  margin-bottom: 8px;
-  line-height: 1.2;
+.rationale-quote__eyebrow,
+.rationale-cta__eyebrow {
+    color: #6f84a7;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-.content-subtitle {
-  font-size: 14px;
-  color: var(--kai-txt3);
-  margin-bottom: 40px;
+.rationale-quote__title,
+.rationale-cta__title {
+    margin: 14px 0 0;
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: clamp(24px, 3vw, 34px);
+    font-weight: 900;
+    line-height: 1.08;
+    letter-spacing: -0.04em;
 }
 
-.rationale-body {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+.rationale-quote__body {
+    margin-top: 20px;
+    padding-left: 18px;
+    color: #526988;
+    font-size: 15px;
+    line-height: 1.8;
 }
 
-.rationale-para {
-  display: flex;
-  gap: 16px;
+.rationale-quote__body p {
+    margin: 0 0 16px;
 }
 
-.para-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--kai-blue);
-  margin-top: 8px;
-  flex-shrink: 0;
-  opacity: 0.5;
+.rationale-quote__empty {
+    margin-top: 18px;
+    color: #8094b1;
 }
 
-.rationale-para p {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--kai-txt2);
-  margin: 0;
+.rationale-cta__text {
+    margin: 16px 0 0;
+    color: #607594;
+    font-size: 15px;
+    line-height: 1.75;
 }
 
-.empty-pars {
-  color: var(--kai-txt3);
-  font-style: italic;
-  font-size: 12px;
-}
-
-/* CTA */
-.cta-block {
-    display: flex;
-    align-items: center;
-}
-
-.cta-inner {
-  background: rgba(255,255,255,0.03);
-  border: 1px solid var(--kai-border);
-  padding: 40px;
-  border-radius: 24px;
-  width: 100%;
-}
-
-.cta-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 12px;
-}
-
-.cta-icon-box {
-    width: 56px;
-    height: 56px;
-    background: var(--kai-blue);
-    color: white;
-    border-radius: 16px;
-    display: flex;
+.rationale-cta__button {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    min-height: 60px;
+    margin-top: 28px;
+    padding: 0 24px;
+    border: 0;
+    border-radius: 18px;
+    background: linear-gradient(135deg, #2d7bff, #7c3aed);
+    color: #fff;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
-    box-shadow: 0 8px 16px rgba(var(--kai-blue-rgb), 0.3);
+    gap: 12px;
+    font-size: 14px;
+    font-weight: 800;
+    cursor: pointer;
+    box-shadow: 0 16px 34px rgba(45, 123, 255, 0.22);
+    transition: transform 0.22s ease, box-shadow 0.22s ease;
 }
 
-.cta-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--kai-txt);
-  margin: 0;
-  text-align: center;
+.rationale-cta__button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28), transparent 60%);
+    transform: translateX(-120%);
+    animation: shimmer 2.2s linear infinite;
 }
 
-.cta-desc {
-  font-size: 12px;
-  color: var(--kai-txt3);
-  text-align: center;
-  margin-bottom: 24px;
+.rationale-cta__button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 22px 42px rgba(45, 123, 255, 0.26);
 }
 
-.cta-features {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 32px;
+@keyframes shimmer {
+    to {
+        transform: translateX(140%);
+    }
 }
 
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--kai-txt2);
-}
-
-.feature-item i {
-  color: var(--kai-green);
-  font-size: 10px;
-}
-
-.prime-cta-btn {
-  width: 100%;
-  background: var(--kai-blue);
-  color: white;
-  border: none;
-  padding: 16px;
-  border-radius: 14px;
-  font-family: 'Unbounded', sans-serif;
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  transition: all 0.3s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.prime-cta-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(var(--kai-blue-rgb), 0.4);
-  background: #3b8dff;
-}
-
-@media (max-width: 992px) {
-  .rationale-container {
-    grid-template-columns: 1fr;
-    padding: 32px;
-  }
+@media (max-width: 960px) {
+    .rationale {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4Reputation.vue b/src/components/marketing/dashboard-v3/v4/V4Reputation.vue
index 7ada3c1..5f61796 100644
--- a/src/components/marketing/dashboard-v3/v4/V4Reputation.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4Reputation.vue
@@ -1,315 +1,250 @@
 <script setup>
-import SectionWrapper from './SectionWrapper.vue';
 import { computed } from 'vue';
+import { useCountUp } from '@/composables/useCountUp';
+import SectionWrapper from './SectionWrapper.vue';
 
 const props = defineProps({ id: String, data: Object });
-const fmtNum = (n) => n != null ? Number(n).toLocaleString('ru-RU') : '—';
-const fmtPct = (n) => n != null ? (parseFloat(n) * 100).toFixed(0) + '%' : '—';
-const stars = (r) => { 
-  const n = Math.round(parseFloat(r) || 0);
-  return '★'.repeat(n) + '☆'.repeat(5 - n);
-};
 
-const starDist = computed(() => {
-  const d = props.data?.starDistribution || {};
-  return [5,4,3,2,1].map(n => ({ 
-    star: n, 
-    pct: parseFloat(d[String(n)]) || 0, 
-    color: ['var(--kai-green)','var(--kai-green)','var(--kai-yellow)','var(--kai-orange)','var(--kai-red)'][5-n] 
-  }));
+const averageRating = computed(() => Number(props.data?.avgNicheRating) || 0);
+const medianReviews = computed(() => Number(props.data?.medianReviews) || 0);
+const trustShare = computed(() => Number(props.data?.highTrustBusinessShare || 0) * 100);
+const responseHours = computed(() => Number(props.data?.avgOwnerResponseTimeHours) || 0);
+
+const stars = computed(() => {
+    const source = props.data?.starDistribution || {};
+    return [5, 4, 3, 2, 1].map((star) => ({
+        star,
+        value: Number(source[String(star)]) || 0
+    }));
 });
+
+const { formatted: averageRatingText } = useCountUp(averageRating, { duration: 1100, decimals: 1 });
 </script>
 
 <template>
-  <SectionWrapper :id="id" title="Репутация ниши" subtitle="Анализ доверия и качества обслуживания в сегменте" num="6">
-    <div class="rep-grid">
-      
-      <!-- LEFT: METRICS -->
-      <div class="rep-metrics-col">
-        <div class="rep-cards-row">
-          <div v-for="card in [
-            { icon:'pi-star-fill', val:(data?.avgNicheRating||0).toFixed(1), label:'Ср. рейтинг', sub: stars(data?.avgNicheRating), color:'var(--kai-yellow)', tip: 'Средняя оценка конкурентов в нише' },
-            { icon:'pi-comments', val: fmtNum(data?.medianReviews), label:'Медиана отзывов', sub:'на 1 бизнес', color:'var(--kai-blue)', tip: 'Типичное количество отзывов у игрока на рынке' },
-            { icon:'pi-shield', val: fmtPct(data?.highTrustBusinessShare), label:'High Trust', sub:'>4.3 rating', color:'var(--kai-green)', tip: 'Доля компаний с высоким уровнем доверия' },
-          ]" :key="card.label" class="rep-metric-card">
-            <div class="rep-card-icon" :style="{ color: card.color, background: card.color + '15' }">
-              <i class="pi" :class="card.icon"></i>
-            </div>
-            <div class="rep-card-val" :style="{ color: card.color }">{{ card.val }}</div>
-            <div class="rep-card-label">
-              {{ card.label }}
-              <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="card.tip"></i>
-            </div>
-            <div class="rep-card-sub" :class="{ 'star-sub': card.icon === 'pi-star-fill' }">{{ card.sub }}</div>
-          </div>
-        </div>
+    <SectionWrapper
+        :id="id"
+        title="Репутация ниши"
+        subtitle="Показываем, какой уровень доверия считается нормой для рынка: средний рейтинг, объём отзывов и скорость реакции бизнеса на обратную связь."
+        num="6"
+        eyebrow="Репутация"
+        info="Этот блок помогает понять ожидания клиентов. Если рынок держится на высоком рейтинге и быстрой реакции, без этого будет тяжело конкурировать."
+    >
+        <div class="rep-grid">
+            <article class="rep-score">
+                <span class="rep-score__label">Средний рейтинг ниши</span>
+                <div class="rep-score__value">{{ averageRatingText() }}</div>
+                <div class="rep-score__stars">★★★★★</div>
 
-        <div class="response-box">
-          <div class="response-icon">
-            <i class="pi pi-clock"></i>
-          </div>
-          <div class="response-info">
-            <div class="response-label">
-              Ср. время ответа владельца
-              <i class="pi pi-info-circle kai-term-icon" v-tooltip.top="'Скорость реакции бизнеса на отзывы клиентов'"></i>
-            </div>
-            <div class="response-val">
-              {{ data?.avgOwnerResponseTimeHours || '—' }} 
-              <span class="unit">часов</span>
-            </div>
-          </div>
-          <div class="response-status" :style="{ color: parseFloat(data?.avgOwnerResponseTimeHours) <= 24 ? 'var(--kai-green)' : 'var(--kai-orange)' }">
-            <i class="pi" :class="parseFloat(data?.avgOwnerResponseTimeHours) <= 24 ? 'pi-check-circle' : 'pi-exclamation-circle'"></i>
-          </div>
-        </div>
-      </div>
+                <div class="rep-metrics">
+                    <div class="rep-metric">
+                        <span class="rep-metric__name">Медиана отзывов</span>
+                        <span class="rep-metric__value">{{ medianReviews.toLocaleString('ru-RU') }}</span>
+                    </div>
+                    <div class="rep-metric">
+                        <span class="rep-metric__name">Высокое доверие</span>
+                        <span class="rep-metric__value">{{ trustShare.toFixed(0) }}%</span>
+                    </div>
+                    <div class="rep-metric">
+                        <span class="rep-metric__name">Ответ владельца</span>
+                        <span class="rep-metric__value">{{ responseHours || '—' }} ч</span>
+                    </div>
+                </div>
+            </article>
 
-      <!-- RIGHT: STAR DISTRIBUTION -->
-      <div class="rep-dist-col">
-        <h4 class="dist-title">Распределение оценок</h4>
-        <div class="dist-list">
-          <div v-for="s in starDist" :key="s.star" class="dist-item">
-            <div class="dist-label" :style="{ color: s.color }">{{ s.star }}★</div>
-            <div class="kai-progress-track">
-              <div class="kai-progress-fill" :style="{ width: s.pct + '%', background: s.color }" />
-            </div>
-            <div class="dist-pct" :style="{ color: s.color }">{{ s.pct.toFixed(1) }}%</div>
-          </div>
-        </div>
-        
-        <div class="dist-summary">
-          <div class="summary-line">
-            <span class="dot green"></span>
-            <span class="text">Положительные (4-5★)</span>
-            <span class="val">{{ (starDist[0].pct + starDist[1].pct).toFixed(1) }}%</span>
-          </div>
-          <div class="summary-line">
-            <span class="dot red"></span>
-            <span class="text">Отрицательные (1-2★)</span>
-            <span class="val">{{ (starDist[3].pct + starDist[4].pct).toFixed(1) }}%</span>
-          </div>
-        </div>
-      </div>
+            <article class="rep-bars">
+                <h3 class="rep-bars__title">Распределение оценок</h3>
+                <div class="rep-bars__list">
+                    <div v-for="row in stars" :key="row.star" class="rep-bar">
+                        <span class="rep-bar__label">{{ row.star }}★</span>
+                        <div class="rep-bar__track">
+                            <span class="rep-bar__fill" :style="{ width: `${row.value}%` }" />
+                        </div>
+                        <span class="rep-bar__value">{{ row.value.toFixed(0) }}%</span>
+                    </div>
+                </div>
 
-    </div>
-  </SectionWrapper>
+                <div class="rep-notes">
+                    <div class="rep-note rep-note--good">
+                        <span class="rep-note__title">Клиенты чаще хвалят</span>
+                        <span class="rep-note__text">Качество продукта, приятный сервис, вкус и аккуратную упаковку.</span>
+                    </div>
+                    <div class="rep-note rep-note--bad">
+                        <span class="rep-note__title">Основные жалобы</span>
+                        <span class="rep-note__text">Долгое ожидание, дорогая доставка и неравномерный уровень обслуживания.</span>
+                    </div>
+                </div>
+            </article>
+        </div>
+    </SectionWrapper>
 </template>
 
 <style scoped>
 .rep-grid {
-  display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
-  gap: 40px;
-  align-items: start;
+    display: grid;
+    grid-template-columns: 360px minmax(0, 1fr);
+    gap: 20px;
 }
 
-.rep-metrics-col {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+.rep-score,
+.rep-bars {
+    padding: 24px;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.92));
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
 }
 
-.rep-cards-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+.rep-score__label {
+    color: #6f84a7;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
 }
 
-.rep-metric-card {
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  padding: 20px 16px;
-  border-radius: 16px;
-  text-align: center;
-  transition: all 0.3s;
+.rep-score__value {
+    margin-top: 12px;
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: 68px;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.06em;
 }
 
-.rep-metric-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--kai-border-hover);
-  background: var(--kai-card-hover);
+.rep-score__stars {
+    margin-top: 10px;
+    color: #f59e0b;
+    font-size: 22px;
+    letter-spacing: 4px;
 }
 
-.rep-card-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 12px;
+.rep-metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 22px;
 }
 
-.rep-card-icon i {
-  font-size: 14px;
+.rep-metric {
+    padding: 16px;
+    border-radius: 18px;
+    background: rgba(248, 250, 255, 0.92);
+    border: 1px solid rgba(45, 123, 255, 0.08);
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
 }
 
-.rep-card-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 18px;
-  font-weight: 800;
-  margin-bottom: 4px;
+.rep-metric__name {
+    color: #607594;
+    font-size: 14px;
 }
 
-.rep-card-label {
-  font-size: 9.5px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
-  margin-bottom: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
+.rep-metric__value {
+    color: #15213d;
+    font-family: 'Onest', sans-serif;
+    font-size: 20px;
+    font-weight: 800;
 }
 
-.rep-card-sub {
-  font-size: 10px;
-  color: var(--kai-txt3);
-  opacity: 0.6;
+.rep-bars__title {
+    margin: 0;
+    color: #173053;
+    font-family: 'Onest', sans-serif;
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.03em;
 }
 
-.star-sub {
-  color: var(--kai-yellow) !important;
-  font-size: 12px !important;
-  letter-spacing: 2px;
-  opacity: 1 !important;
+.rep-bars__list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 22px;
 }
 
-/* Response time box */
-.response-box {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 20px 24px;
-  background: var(--kai-bg2);
-  border: 1px solid var(--kai-border);
-  border-radius: 16px;
+.rep-bar {
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr) 46px;
+    gap: 14px;
+    align-items: center;
 }
 
-.response-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: rgba(var(--kai-blue-rgb), 0.1);
-  color: var(--kai-blue);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
+.rep-bar__label,
+.rep-bar__value {
+    color: #556c8e;
+    font-size: 13px;
+    font-weight: 700;
 }
 
-.response-info {
-  flex: 1;
+.rep-bar__track {
+    height: 12px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.response-label {
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  letter-spacing: 0.05em;
-  margin-bottom: 4px;
+.rep-bar__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #f59e0b, #ffd978);
 }
 
-.response-val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--kai-txt);
+.rep-notes {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-top: 24px;
 }
 
-.response-val .unit {
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--kai-txt3);
-  margin-left: 4px;
+.rep-note {
+    padding: 18px;
+    border-radius: 20px;
+    font-size: 14px;
+    line-height: 1.6;
 }
 
-.response-status {
-  font-size: 20px;
+.rep-note--good {
+    background: rgba(16, 185, 129, 0.08);
+    border: 1px solid rgba(16, 185, 129, 0.12);
 }
 
-/* Dist Col */
-.dist-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-transform: uppercase;
-  color: var(--kai-txt3);
-  margin-bottom: 24px;
+.rep-note--bad {
+    background: rgba(239, 68, 68, 0.08);
+    border: 1px solid rgba(239, 68, 68, 0.12);
 }
 
-.dist-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 24px;
+.rep-note__title {
+    display: block;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    margin-bottom: 10px;
 }
 
-.dist-item {
-  display: grid;
-  grid-template-columns: 32px 1fr 48px;
-  align-items: center;
-  gap: 12px;
+.rep-note--good .rep-note__title {
+    color: #10b981;
 }
 
-.dist-label {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-align: right;
+.rep-note--bad .rep-note__title {
+    color: #ef4444;
 }
 
-.dist-pct {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  text-align: right;
+.rep-note__text {
+    color: #546a8c;
 }
 
-.dist-summary {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  background: rgba(0,0,0,0.15);
-  border-radius: 12px;
-  border: 1px solid var(--kai-border);
-}
+@media (max-width: 960px) {
+    .rep-grid {
+        grid-template-columns: 1fr;
+    }
 
-.summary-line {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.summary-line .dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.summary-line .dot.green { background: var(--kai-green); }
-.summary-line .dot.red { background: var(--kai-red); }
-
-.summary-line .text {
-  font-size: 10.5px;
-  color: var(--kai-txt2);
-  flex: 1;
-}
-
-.summary-line .val {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--kai-txt);
-}
-
-@media (max-width: 992px) {
-  .rep-grid {
-    grid-template-columns: 1fr;
-  }
+    .rep-notes {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
diff --git a/src/components/marketing/dashboard-v3/v4/V4SideNav.vue b/src/components/marketing/dashboard-v3/v4/V4SideNav.vue
index 04a15f4..7a9daf3 100644
--- a/src/components/marketing/dashboard-v3/v4/V4SideNav.vue
+++ b/src/components/marketing/dashboard-v3/v4/V4SideNav.vue
@@ -1,210 +1,467 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import InfoTooltip from './InfoTooltip.vue';
 
 const sections = [
-  { id: 's0',  label: 'Обзор',           icon: 'pi pi-home' },
-  { id: 's1',  label: 'Ландшафт',        icon: 'pi pi-map' },
-  { id: 's2',  label: 'География',       icon: 'pi pi-map-marker' },
-  { id: 's3',  label: 'Конкуренты',      icon: 'pi pi-users' },
-  { id: 's4',  label: 'Контент',         icon: 'pi pi-file' },
-  { id: 's5',  label: 'Интенсивность',   icon: 'pi pi-bolt' },
-  { id: 's6',  label: 'Репутация',       icon: 'pi pi-star' },
-  { id: 's7',  label: 'Поведение',       icon: 'pi pi-eye' },
-  { id: 's8',  label: 'Спрос',           icon: 'pi pi-chart-line' },
-  { id: 's9',  label: 'Позиционирование',icon: 'pi pi-crosshairs' },
-  { id: 's10', label: 'Выводы',          icon: 'pi pi-check-circle' },
-  { id: 's11', label: 'Стратегия',       icon: 'pi pi-sparkles' },
+    {
+        id: 's1',
+        label: 'Обзор рынка',
+        icon: 'pi pi-chart-bar',
+        info: 'Короткая сводка по рынку: сколько игроков в нише, какой спрос и насколько рынок насыщен.'
+    },
+    {
+        id: 's2',
+        label: 'Рынок',
+        icon: 'pi pi-globe',
+        info: 'Показываем, где именно активны конкуренты и какие площадки приносят больше всего внимания.'
+    },
+    {
+        id: 's3',
+        label: 'Конкуренты',
+        icon: 'pi pi-trophy',
+        info: 'Разбираем сильных игроков рынка, их вовлеченность, репутацию и слабые места.'
+    },
+    {
+        id: 's4',
+        label: 'Контент',
+        icon: 'pi pi-images',
+        info: 'Какие форматы и сообщения рынок использует чаще всего и что аудитория видит регулярно.'
+    },
+    {
+        id: 's5',
+        label: 'Конкурентность',
+        icon: 'pi pi-bolt',
+        info: 'Индекс насыщенности рынка: насколько сложно выделяться и где нужна самая сильная подача.'
+    },
+    {
+        id: 's6',
+        label: 'Репутация',
+        icon: 'pi pi-star',
+        info: 'Что клиенты ценят, на что жалуются и какой уровень доверия считается нормой в нише.'
+    },
+    {
+        id: 's7',
+        label: 'Поведение',
+        icon: 'pi pi-send',
+        info: 'Какие призывы к действию и механики продаж чаще всего используют конкуренты.'
+    },
+    {
+        id: 's8',
+        label: 'Спрос',
+        icon: 'pi pi-search',
+        info: 'Сколько людей ищут похожие услуги и в какие месяцы спрос усиливается.'
+    },
+    {
+        id: 's9',
+        label: 'Ваша позиция',
+        icon: 'pi pi-compass',
+        info: 'Сравнение с рынком по ключевым параметрам и список главных разрывов.'
+    },
+    {
+        id: 's10',
+        label: 'Выводы',
+        icon: 'pi pi-lightbulb',
+        info: 'Главные инсайты отчета и рекомендации, на чем сфокусироваться дальше.'
+    }
 ];
 
-const active = ref('s0');
+const active = ref('s1');
+const activeIndex = ref(0);
+const mobileItems = ref([]);
+let sectionElements = [];
+let frameId = 0;
+let scrollHost = window;
+let observer = null;
 
+const setMobileItemRef = (element, index) => {
+    if (!element) return;
+    mobileItems.value[index] = element;
+};
+
+const refreshSections = () => {
+    sectionElements = sections
+        .map((section) => document.getElementById(section.id))
+        .filter(Boolean);
+};
+
+const getScrollHost = (element) => {
+    if (!element) return window;
+
+    let current = element.parentElement;
+    while (current && current !== document.body) {
+        const style = window.getComputedStyle(current);
+        const canScrollY = /(auto|scroll)/.test(style.overflowY);
+        if (canScrollY && current.scrollHeight > current.clientHeight) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+
+    return window;
+};
+
+const getRootRect = () => {
+    if (scrollHost === window) {
+        return {
+            top: 0,
+            height: window.innerHeight,
+            bottom: window.innerHeight
+        };
+    }
+
+    const rect = scrollHost.getBoundingClientRect();
+    return {
+        top: rect.top,
+        height: scrollHost.clientHeight,
+        bottom: rect.top + scrollHost.clientHeight
+    };
+};
+
+const getSectionScore = (section, anchorLine, rootTop, rootBottom) => {
+    const rect = section.getBoundingClientRect();
+    const visibleTop = Math.max(rect.top, rootTop);
+    const visibleBottom = Math.min(rect.bottom, rootBottom);
+    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+    const anchorInside = rect.top <= anchorLine && rect.bottom >= anchorLine;
+    const anchorDistance = anchorInside
+        ? 0
+        : Math.min(Math.abs(rect.top - anchorLine), Math.abs(rect.bottom - anchorLine));
+
+    return {
+        id: section.id,
+        visibleHeight,
+        anchorDistance
+    };
+};
+
+const getNearBottom = () =>
+    scrollHost === window
+        ? window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 40
+        : scrollHost.scrollTop + scrollHost.clientHeight >= scrollHost.scrollHeight - 40;
+
+const setActiveSection = (id) => {
+    active.value = id;
+    activeIndex.value = Math.max(0, sections.findIndex((section) => section.id === id));
+
+    const mobileItem = mobileItems.value[activeIndex.value];
+    mobileItem?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+};
+
+const syncActiveByScroll = () => {
+    if (!sectionElements.length) refreshSections();
+    if (!sectionElements.length) return;
+
+    const rootRect = getRootRect();
+    const anchorLine = rootRect.top + Math.max(132, rootRect.height * 0.32);
+    const ranked = sectionElements
+        .map((section) => getSectionScore(section, anchorLine, rootRect.top, rootRect.bottom))
+        .sort((left, right) => {
+            if (right.visibleHeight !== left.visibleHeight) return right.visibleHeight - left.visibleHeight;
+            return left.anchorDistance - right.anchorDistance;
+        });
+
+    let current = ranked[0]?.id || sectionElements[0]?.id || 's1';
+
+    if (getNearBottom()) {
+        current = sectionElements[sectionElements.length - 1]?.id || current;
+    }
+
+    setActiveSection(current);
+};
+
+const handleScroll = () => {
+    if (frameId) cancelAnimationFrame(frameId);
+    frameId = requestAnimationFrame(syncActiveByScroll);
+};
+
 const go = (id) => {
-  const el = document.getElementById(id);
-  if (el) {
-    window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
-  }
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    setActiveSection(id);
+
+    const topOffset = 116;
+    if (scrollHost === window) {
+        const top = element.getBoundingClientRect().top + window.scrollY - topOffset;
+        window.scrollTo({ top, behavior: 'smooth' });
+        return;
+    }
+
+    const hostTop = scrollHost.getBoundingClientRect().top;
+    const top = element.getBoundingClientRect().top - hostTop + scrollHost.scrollTop - topOffset;
+    scrollHost.scrollTo({ top, behavior: 'smooth' });
+};
+
+const setupObserver = () => {
+    if (observer) observer.disconnect();
+
+    observer = new IntersectionObserver(
+        () => {
+            handleScroll();
+        },
+        {
+            root: scrollHost === window ? null : scrollHost,
+            threshold: [0.12, 0.25, 0.45, 0.65]
+        }
+    );
+
+    sectionElements.forEach((section) => observer.observe(section));
 };
 
-let obs;
 onMounted(() => {
-  obs = new IntersectionObserver(entries => {
-    entries.forEach(e => { if (e.isIntersecting) active.value = e.target.id; });
-  }, { threshold: 0.25, rootMargin: '-5% 0px -65% 0px' });
-  sections.forEach(s => { const el = document.getElementById(s.id); if (el) obs.observe(el); });
+    nextTick(() => {
+        refreshSections();
+        scrollHost = getScrollHost(sectionElements[0]);
+        setupObserver();
+        syncActiveByScroll();
+        window.setTimeout(() => {
+            refreshSections();
+            scrollHost = getScrollHost(sectionElements[0]);
+            setupObserver();
+            syncActiveByScroll();
+        }, 240);
+    });
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll);
+    window.addEventListener('load', handleScroll);
+
+    window.setTimeout(() => {
+        if (scrollHost !== window) {
+            scrollHost.addEventListener('scroll', handleScroll, { passive: true });
+        }
+    }, 0);
+});
+
+onUnmounted(() => {
+    if (frameId) cancelAnimationFrame(frameId);
+    if (observer) observer.disconnect();
+    window.removeEventListener('scroll', handleScroll);
+    window.removeEventListener('resize', handleScroll);
+    window.removeEventListener('load', handleScroll);
+    if (scrollHost && scrollHost !== window) {
+        scrollHost.removeEventListener('scroll', handleScroll);
+    }
 });
-onUnmounted(() => obs?.disconnect());
 </script>
 
 <template>
-  <nav class="kai-sidenav">
-    <div class="sidenav-inner">
-      <div class="sidenav-track">
-        <button
-          v-for="(s, i) in sections"
-          :key="s.id"
-          class="sidenav-item"
-          :class="{ active: active === s.id }"
-          @click="go(s.id)"
-          :title="s.label"
-        >
-          <!-- Active line indicator -->
-          <span class="sidenav-line" :class="{ 'sidenav-line--active': active === s.id }"></span>
-          
-          <!-- Number dot -->
-          <span class="sidenav-dot">
-            <i v-if="active === s.id" :class="s.icon" class="sidenav-icon-active"></i>
-            <span v-else class="sidenav-num">{{ i + 1 }}</span>
-          </span>
-          
-          <!-- Tooltip label -->
-          <span class="sidenav-label">{{ s.label }}</span>
-        </button>
-      </div>
-    </div>
-  </nav>
+    <aside class="side-nav">
+        <div class="side-nav__desktop">
+            <div class="side-nav__label">Навигация по отчету</div>
+
+            <div class="side-nav__items" :style="{ '--active-index': activeIndex }">
+                <div class="side-nav__active-pill" />
+
+                <button
+                    v-for="(section, index) in sections"
+                    :key="section.id"
+                    class="side-nav__item"
+                    :class="{ 'side-nav__item--active': active === section.id }"
+                    type="button"
+                    @click="go(section.id)"
+                >
+                    <span class="side-nav__num">{{ index + 1 }}</span>
+                    <span class="side-nav__icon">
+                        <i :class="section.icon" />
+                    </span>
+                    <span class="side-nav__text">{{ section.label }}</span>
+                    <InfoTooltip :text="section.info" align="right" />
+                </button>
+            </div>
+        </div>
+
+        <div class="side-nav__mobile">
+            <button
+                v-for="(section, index) in sections"
+                :key="section.id"
+                :ref="(el) => setMobileItemRef(el, index)"
+                class="side-nav__mobile-item"
+                :class="{ 'side-nav__mobile-item--active': active === section.id }"
+                type="button"
+                @click="go(section.id)"
+            >
+                <span class="side-nav__mobile-num">{{ index + 1 }}</span>
+                <i :class="section.icon" />
+                {{ section.label }}
+            </button>
+        </div>
+    </aside>
 </template>
 
 <style scoped>
-.kai-sidenav {
-  position: fixed;
-  left: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 200;
-  pointer-events: none;
+.side-nav {
+    position: relative;
+    width: 100%;
 }
 
-.sidenav-inner {
-  pointer-events: auto;
-  background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(45, 123, 255, 0.18);
-  border-radius: 20px;
-  padding: 10px 6px;
-  box-shadow: 0 8px 32px rgba(45, 123, 255, 0.1), 0 2px 8px rgba(0,0,0,0.06);
+.side-nav__desktop {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: 18px 16px;
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.84);
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    backdrop-filter: blur(18px);
+    box-shadow: 0 18px 42px rgba(45, 123, 255, 0.08);
+    overflow: hidden;
 }
 
-.sidenav-track {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.side-nav__label {
+    color: #8092b1;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
 }
 
-.sidenav-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0;
-  padding: 5px 4px;
-  border-radius: 10px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: visible;
+.side-nav__items {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    padding-right: 4px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(45, 123, 255, 0.2) transparent;
 }
 
-.sidenav-item:hover {
-  background: rgba(45, 123, 255, 0.06);
+.side-nav__items::-webkit-scrollbar {
+    width: 6px;
 }
 
-.sidenav-item.active {
-  background: rgba(45, 123, 255, 0.1);
+.side-nav__items::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.18);
 }
 
-/* Left accent line */
-.sidenav-line {
-  position: absolute;
-  left: -6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 0;
-  background: var(--kai-blue, #2D7BFF);
-  border-radius: 4px;
-  transition: height 0.25s ease;
-}
-.sidenav-line--active {
-  height: 60%;
+.side-nav__active-pill {
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 54px;
+    border-radius: 18px;
+    background: linear-gradient(90deg, rgba(45, 123, 255, 0.12), rgba(124, 58, 237, 0.08));
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    box-shadow: 0 14px 24px rgba(45, 123, 255, 0.08);
+    transform: translateY(calc(var(--active-index) * 62px));
+    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
+    pointer-events: none;
+    will-change: transform;
 }
 
-/* Dot */
-.sidenav-dot {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all 0.25s;
+.side-nav__item {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 26px 36px minmax(0, 1fr) 22px;
+    align-items: center;
+    gap: 10px;
+    min-height: 54px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: 18px;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    transition: transform 0.2s ease;
 }
 
-.sidenav-num {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 8.5px;
-  font-weight: 800;
-  color: #94A3B8;
-  transition: color 0.25s;
-  line-height: 1;
+.side-nav__item:hover {
+    transform: translateX(2px);
 }
 
-.sidenav-item:hover .sidenav-num {
-  color: #2D7BFF;
+.side-nav__item--active {
+    transform: translateX(0);
 }
 
-.sidenav-item.active .sidenav-num {
-  color: #2D7BFF;
+.side-nav__num,
+.side-nav__mobile-num {
+    color: #7c90b2;
+    font-family: 'JetBrains Mono', 'DM Mono', monospace;
+    font-size: 11px;
+    font-weight: 700;
 }
 
-.sidenav-icon-active {
-  font-size: 11px;
-  color: #2D7BFF;
+.side-nav__item--active .side-nav__num {
+    color: #2d7bff;
 }
 
-/* Tooltip */
-.sidenav-label {
-  position: absolute;
-  left: calc(100% + 12px);
-  top: 50%;
-  transform: translateY(-50%);
-  background: #0F172A;
-  color: #fff;
-  padding: 5px 10px;
-  border-radius: 8px;
-  font-size: 10px;
-  font-weight: 700;
-  font-family: 'Onest', sans-serif;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateY(-50%) translateX(-6px);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-  letter-spacing: 0.01em;
-}
-.sidenav-label::before {
-  content: '';
-  position: absolute;
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 5px solid transparent;
-  border-right-color: #0F172A;
+.side-nav__icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 14px;
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.sidenav-item:hover .sidenav-label {
-  opacity: 1;
-  transform: translateY(-50%) translateX(0);
+.side-nav__item:hover .side-nav__icon,
+.side-nav__item--active .side-nav__icon {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 20px rgba(45, 123, 255, 0.12);
 }
 
-.sidenav-item.active .sidenav-label {
-  opacity: 1;
-  transform: translateY(-50%) translateX(0);
+.side-nav__text {
+    color: #203153;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.3;
 }
 
-@media (max-width: 1400px) {
-  .kai-sidenav { display: none; }
+.side-nav__mobile {
+    display: none;
+}
+
+@media (max-width: 1100px) {
+    .side-nav__desktop {
+        display: none;
+    }
+
+    .side-nav__mobile {
+        display: flex;
+        gap: 10px;
+        overflow-x: auto;
+        padding: 10px 4px 10px 0;
+        scrollbar-width: none;
+    }
+
+    .side-nav__mobile::-webkit-scrollbar {
+        display: none;
+    }
+
+    .side-nav__mobile-item {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        border: 1px solid rgba(45, 123, 255, 0.12);
+        background: rgba(255, 255, 255, 0.92);
+        color: #577090;
+        font-size: 12px;
+        font-weight: 700;
+        box-shadow: 0 10px 22px rgba(45, 123, 255, 0.06);
+    }
+
+    .side-nav__mobile-item--active {
+        color: #fff;
+        background: linear-gradient(135deg, #2d7bff, #7c3aed);
+        box-shadow: 0 14px 28px rgba(45, 123, 255, 0.18);
+    }
+
+    .side-nav__mobile-item--active .side-nav__mobile-num {
+        color: rgba(255, 255, 255, 0.82);
+    }
 }
 </style>
diff --git a/src/components/marketing/premium/Premium3DVisual.vue b/src/components/marketing/premium/Premium3DVisual.vue
new file mode 100644
index 0000000..af1e784
--- /dev/null
+++ b/src/components/marketing/premium/Premium3DVisual.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="relative">
+        <div class="absolute inset-0 rounded-[2.5rem] bg-gradient-to-br from-sky-300/30 via-violet-300/20 to-fuchsia-300/20 blur-3xl"></div>
+        <div class="relative overflow-hidden rounded-[2.5rem] border border-white/80 bg-white/70 p-4 shadow-[0_30px_90px_rgba(15,23,42,0.12)] backdrop-blur-xl">
+            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.8),_transparent_50%)]"></div>
+            <div class="relative grid gap-4 md:grid-cols-2">
+                <div class="rounded-[1.6rem] border border-slate-200 bg-white p-5 shadow-sm">
+                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">Market layer</p>
+                    <div class="mt-5 space-y-3">
+                        <div class="h-3 rounded-full bg-slate-100"><div class="h-3 w-4/5 rounded-full bg-gradient-to-r from-sky-500 to-violet-500"></div></div>
+                        <div class="h-3 rounded-full bg-slate-100"><div class="h-3 w-3/5 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500"></div></div>
+                        <div class="h-3 rounded-full bg-slate-100"><div class="h-3 w-2/3 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500"></div></div>
+                    </div>
+                </div>
+
+                <div class="rounded-[1.6rem] border border-slate-200 bg-white p-5 shadow-sm">
+                    <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">Signal stack</p>
+                    <div class="mt-5 grid grid-cols-2 gap-3">
+                        <div class="h-24 rounded-3xl bg-gradient-to-t from-sky-500 to-sky-200 shadow-[0_15px_30px_rgba(59,130,246,0.18)]"></div>
+                        <div class="h-28 rounded-3xl bg-gradient-to-t from-violet-600 to-violet-200 shadow-[0_15px_30px_rgba(139,92,246,0.18)]"></div>
+                        <div class="col-span-2 h-4 rounded-full bg-slate-100">
+                            <div class="h-4 w-5/6 rounded-full bg-gradient-to-r from-sky-500 via-violet-500 to-fuchsia-500"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="relative mt-4 rounded-[1.9rem] border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-5">
+                <div class="flex items-center justify-between">
+                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Abstract 3D structure</p>
+                    <p class="text-sm font-semibold text-slate-900">Live system</p>
+                </div>
+                <div class="mt-5 flex items-end gap-3">
+                    <div class="h-28 w-20 rounded-3xl bg-gradient-to-t from-sky-500 to-sky-200 shadow-[0_15px_30px_rgba(59,130,246,0.22)]"></div>
+                    <div class="h-40 w-20 rounded-3xl bg-gradient-to-t from-violet-600 to-violet-200 shadow-[0_15px_30px_rgba(139,92,246,0.22)]"></div>
+                    <div class="h-32 w-20 rounded-3xl bg-gradient-to-t from-slate-900 to-slate-400 shadow-[0_15px_30px_rgba(15,23,42,0.18)]"></div>
+                    <div class="ml-auto flex-1 space-y-3">
+                        <div class="h-4 rounded-full bg-slate-100"><div class="h-4 w-3/4 rounded-full bg-gradient-to-r from-sky-500 to-violet-500"></div></div>
+                        <div class="h-4 rounded-full bg-slate-100"><div class="h-4 w-5/6 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500"></div></div>
+                        <div class="h-4 rounded-full bg-slate-100"><div class="h-4 w-2/3 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500"></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/components/marketing/premium/PremiumFunnel.vue b/src/components/marketing/premium/PremiumFunnel.vue
new file mode 100644
index 0000000..761ad79
--- /dev/null
+++ b/src/components/marketing/premium/PremiumFunnel.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">Sales funnel</div>
+        <div class="mt-5 space-y-3">
+            <div v-for="(step, index) in steps" :key="step.label">
+                <div class="mb-2 flex items-center justify-between text-sm">
+                    <span class="font-medium text-slate-700">{{ step.label }}</span>
+                    <span class="font-semibold text-slate-900">{{ step.value }}</span>
+                </div>
+                <div class="h-10 rounded-2xl bg-slate-100 p-1">
+                    <div
+                        class="h-full rounded-2xl bg-gradient-to-r from-sky-500 via-violet-500 to-fuchsia-500 transition-all duration-700"
+                        :style="{ width: step.value }"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    steps: {
+        type: Array,
+        default: () => [
+            { label: 'Awareness', value: '100%' },
+            { label: 'Interest', value: '68%' },
+            { label: 'Consideration', value: '42%' },
+            { label: 'Conversion', value: '21%' },
+        ],
+    },
+});
+</script>
diff --git a/src/components/marketing/premium/PremiumHeatmap.vue b/src/components/marketing/premium/PremiumHeatmap.vue
new file mode 100644
index 0000000..016d063
--- /dev/null
+++ b/src/components/marketing/premium/PremiumHeatmap.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="rounded-[1.75rem] border border-slate-200 bg-white p-5 shadow-sm">
+        <div class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">Heatmap</div>
+        <div class="mt-5 grid grid-cols-7 gap-2">
+            <div
+                v-for="(cell, index) in cells"
+                :key="index"
+                class="aspect-square rounded-xl transition-transform duration-300 hover:scale-105"
+                :class="tones[index % tones.length]"
+                :style="{ opacity: cell }"
+            />
+        </div>
+        <div class="mt-4 text-sm text-slate-500">
+            Channel intensity by time, audience and engagement signals.
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    cells: {
+        type: Array,
+        default: () => [0.6, 0.75, 0.5, 0.9, 0.55, 0.8, 0.65, 0.7, 0.95, 0.58, 0.82, 0.63, 0.88, 0.48, 0.74, 0.92, 0.64, 0.7, 0.98, 0.62, 0.77, 0.86, 0.53, 0.69, 0.91, 0.57, 0.83, 0.66],
+    },
+});
+
+const tones = ['bg-sky-200', 'bg-sky-300', 'bg-violet-300', 'bg-violet-400', 'bg-fuchsia-400', 'bg-emerald-300'];
+</script>
diff --git a/src/components/marketing/premium/PremiumMetricCard.vue b/src/components/marketing/premium/PremiumMetricCard.vue
new file mode 100644
index 0000000..1ee46fe
--- /dev/null
+++ b/src/components/marketing/premium/PremiumMetricCard.vue
@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+    label: { type: String, default: '' },
+    value: { type: String, default: '' },
+    delta: { type: String, default: '' },
+    icon: { type: String, default: 'pi pi-chart-line' },
+});
+</script>
+
+<template>
+    <div class="group rounded-[1.6rem] border border-slate-200 bg-white p-5 shadow-[0_14px_35px_rgba(15,23,42,0.06)] transition hover:-translate-y-1 hover:shadow-[0_22px_50px_rgba(15,23,42,0.1)]">
+        <div class="flex items-center justify-between">
+            <div class="inline-flex rounded-2xl bg-slate-50 p-3 text-slate-900">
+                <i :class="icon" class="text-base"></i>
+            </div>
+            <span v-if="delta" class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
+                {{ delta }}
+            </span>
+        </div>
+        <div class="mt-4 text-3xl font-black tracking-tight text-slate-950">{{ value }}</div>
+        <div class="mt-1 text-sm font-medium text-slate-500">{{ label }}</div>
+        <div class="mt-4 h-1.5 rounded-full bg-slate-100">
+            <div class="h-1.5 w-3/4 rounded-full bg-gradient-to-r from-sky-500 to-violet-500 transition-all duration-500 group-hover:w-full"></div>
+        </div>
+    </div>
+</template>
diff --git a/src/components/marketing/premium/PremiumSectionShell.vue b/src/components/marketing/premium/PremiumSectionShell.vue
new file mode 100644
index 0000000..c404005
--- /dev/null
+++ b/src/components/marketing/premium/PremiumSectionShell.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+    eyebrow: { type: String, default: '' },
+    title: { type: String, default: '' },
+    subtitle: { type: String, default: '' },
+});
+</script>
+
+<template>
+    <section class="mx-auto w-full max-w-7xl">
+        <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+            <div class="space-y-2">
+                <div
+                    v-if="eyebrow"
+                    class="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-700 shadow-sm"
+                >
+                    <span class="h-2 w-2 rounded-full bg-sky-500"></span>
+                    {{ eyebrow }}
+                </div>
+                <div>
+                    <h2 class="text-2xl font-black tracking-tight text-slate-950 sm:text-3xl">{{ title }}</h2>
+                    <p v-if="subtitle" class="mt-2 max-w-3xl text-sm leading-6 text-slate-500 sm:text-[15px]">{{ subtitle }}</p>
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                <slot name="actions" />
+            </div>
+        </div>
+
+        <div class="rounded-[2rem] border border-white/80 bg-white/75 p-4 shadow-[0_24px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl sm:p-6">
+            <slot />
+        </div>
+    </section>
+</template>
diff --git a/src/components/marketing/wizard/CheckboxCardsField.vue b/src/components/marketing/wizard/CheckboxCardsField.vue
index 6e41a69..d14ffeb 100644
--- a/src/components/marketing/wizard/CheckboxCardsField.vue
+++ b/src/components/marketing/wizard/CheckboxCardsField.vue
@@ -37,28 +37,28 @@ const toggle = (value) => {
 </script>
 
 <template>
-    <div class="field md:col-span-2 space-y-1.5">
-        <p class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400 mb-2">{{ label }}</p>
-        <div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+    <div class="field md:col-span-2 space-y-3">
+        <p class="text-[13px] font-semibold text-surface-800">{{ label }}</p>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
             <div
                 v-for="option in options"
                 :key="option.value"
-                class="flex items-center gap-2 rounded-xl border px-3 py-2.5 text-left text-[11.5px] transition-all cursor-pointer relative overflow-hidden"
+                class="flex items-center gap-3 rounded-xl border p-3 cursor-pointer transition-all duration-300"
                 :class="{
-                    'border-emerald-500/50 bg-emerald-500/10 text-emerald-500 ring-1 ring-emerald-500/20 shadow-[0_0_15px_rgba(16,185,129,0.1)]': isSelected(option.value),
-                    'border-surface-200/50 bg-white/5 text-surface-400 hover:border-emerald-500/30 hover:bg-white/10 dark:border-surface-800/50 dark:bg-black/20': !isSelected(option.value)
+                    'border-emerald-500/40 bg-emerald-50/50 text-emerald-900 shadow-[0_4px_12px_rgba(16,185,129,0.06)]': isSelected(option.value),
+                    'border-surface-200 bg-white text-surface-600 hover:border-surface-300 hover:bg-surface-50 hover:shadow-sm': !isSelected(option.value)
                 }"
                 @click="toggle(option.value)"
             >
-                <div v-if="isSelected(option.value)" class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_var(--kai-green)]"></div>
-                <div v-else class="w-1.5 h-1.5 rounded-full bg-surface-700/50"></div>
-                <span class="font-bold tracking-tight">{{ option.label }}</span>
-                
-                <div v-if="isSelected(option.value)" class="absolute top-0 right-0 p-1 opacity-20">
-                     <i class="pi pi-check text-[10px]" />
+                <div class="flex items-center justify-center w-4 h-4 rounded appearance-none border transition-colors duration-300"
+                     :class="isSelected(option.value) ? 'border-emerald-500 bg-emerald-500' : 'border-surface-300 bg-white'">
+                    <i v-if="isSelected(option.value)" class="pi pi-check text-[10px] text-white"></i>
                 </div>
+                <span class="text-[13px] font-medium leading-tight" :class="isSelected(option.value) ? 'text-emerald-900' : 'text-surface-700'">
+                    {{ option.label }}
+                </span>
             </div>
         </div>
-        <small v-if="error" class="text-[10px] font-bold text-red-500 mt-1 uppercase tracking-tight">{{ error }}</small>
+        <small v-if="error" class="text-xs font-medium text-red-500 mt-1 block">{{ error }}</small>
     </div>
 </template>
diff --git a/src/components/marketing/wizard/CheckboxCardsLimitedField.vue b/src/components/marketing/wizard/CheckboxCardsLimitedField.vue
index c0423c9..51514c6 100644
--- a/src/components/marketing/wizard/CheckboxCardsLimitedField.vue
+++ b/src/components/marketing/wizard/CheckboxCardsLimitedField.vue
@@ -49,27 +49,34 @@ const toggle = (value) => {
 </script>
 
 <template>
-    <div class="field md:col-span-2 space-y-2">
-        <p class="text-xs font-medium text-surface-600 dark:text-surface-300">
+    <div class="field md:col-span-2 space-y-3">
+        <p class="text-[13px] font-semibold text-surface-800">
             {{ label }}
-            <span class="font-normal text-surface-400">(можно выбрать до {{ max }})</span>
+            <span class="font-normal text-surface-500 ml-1">(можно выбрать до {{ max }})</span>
         </p>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
             <div
                 v-for="option in options"
                 :key="option.value"
-                class="flex items-start gap-2 rounded-xl border px-4 py-3 text-left text-sm transition cursor-pointer"
+                class="flex items-center gap-3 rounded-xl border p-3 cursor-pointer transition-all duration-300"
                 :class="{
-                    'border-primary-500 bg-primary-50 text-primary-900 shadow-sm dark:border-primary-400 dark:bg-primary-900/30 dark:text-primary-50': isSelected(option.value),
-                    'border-surface-200 bg-surface-0 text-surface-900 hover:border-primary-200 hover:bg-primary-50/40 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-100 dark:hover:border-primary-500/60':
-                        !isSelected(option.value) && !isDisabled(option.value),
-                    'opacity-50 cursor-not-allowed': isDisabled(option.value)
+                    'border-emerald-500/40 bg-emerald-50/50 text-emerald-900 shadow-[0_4px_12px_rgba(16,185,129,0.06)]': isSelected(option.value),
+                    'border-surface-200 bg-white text-surface-600 hover:border-surface-300 hover:bg-surface-50 hover:shadow-sm': !isSelected(option.value) && !isDisabled(option.value),
+                    'border-surface-100 bg-surface-50/50 text-surface-400 opacity-60 cursor-not-allowed': isDisabled(option.value)
                 }"
                 @click="toggle(option.value)"
             >
-                <span class="font-medium">{{ option.label }}</span>
+                <div class="flex items-center justify-center w-4 h-4 rounded appearance-none border transition-colors duration-300"
+                     :class="{
+                        'border-emerald-500 bg-emerald-500': isSelected(option.value),
+                        'border-surface-300 bg-white': !isSelected(option.value) && !isDisabled(option.value),
+                        'border-surface-200 bg-surface-100': isDisabled(option.value)
+                     }">
+                    <i v-if="isSelected(option.value)" class="pi pi-check text-[10px] text-white"></i>
+                </div>
+                <span class="text-[13px] font-medium leading-tight">{{ option.label }}</span>
             </div>
         </div>
-        <small v-if="error" class="p-error">{{ error }}</small>
+        <small v-if="error" class="text-xs font-medium text-red-500 mt-1 block">{{ error }}</small>
     </div>
 </template>
diff --git a/src/components/marketing/wizard/RadioGroupField.vue b/src/components/marketing/wizard/RadioGroupField.vue
index 5f9ad6c..2ce271c 100644
--- a/src/components/marketing/wizard/RadioGroupField.vue
+++ b/src/components/marketing/wizard/RadioGroupField.vue
@@ -22,29 +22,28 @@ defineEmits(['update:modelValue']);
 </script>
 
 <template>
-    <div class="field md:col-span-2 space-y-1.5">
-        <p class="text-[10px] font-black uppercase tracking-widest text-surface-500 dark:text-surface-400 mb-2">{{ label }}</p>
-        <div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+    <div class="field md:col-span-2 space-y-3">
+        <p class="text-[13px] font-semibold text-surface-800">{{ label }}</p>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
             <div
                 v-for="option in options"
                 :key="option.value"
-                class="flex items-center gap-2 rounded-xl border px-3 py-2.5 text-left text-[11.5px] transition-all cursor-pointer relative overflow-hidden"
+                class="flex items-center gap-3 rounded-xl border p-3 cursor-pointer transition-all duration-300"
                 :class="{
-                    'border-blue-500/50 bg-blue-500/10 text-blue-500 ring-1 ring-blue-500/20 shadow-[0_0_15px_rgba(45,123,255,0.1)]': modelValue === option.value,
-                    'border-surface-200/50 bg-white/5 text-surface-400 hover:border-blue-500/30 hover:bg-white/10 dark:border-surface-800/50 dark:bg-black/20': modelValue !== option.value
+                    'border-blue-500/40 bg-blue-50/50 text-blue-900 shadow-[0_4px_12px_rgba(45,123,255,0.06)]': modelValue === option.value,
+                    'border-surface-200 bg-white text-surface-600 hover:border-surface-300 hover:bg-surface-50 hover:shadow-sm': modelValue !== option.value
                 }"
                 @click="$emit('update:modelValue', option.value)"
             >
-                <div v-if="modelValue === option.value" class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse shadow-[0_0_8px_var(--kai-blue)]"></div>
-                <div v-else class="w-1.5 h-1.5 rounded-full bg-surface-700/50"></div>
-                <span class="font-bold tracking-tight">{{ option.label }}</span>
-                
-                <!-- Subtle indicator for selected -->
-                <div v-if="modelValue === option.value" class="absolute top-0 right-0 p-1 opacity-20">
-                     <i class="pi pi-check text-[10px]" />
+                <div class="flex items-center justify-center w-4 h-4 rounded-full border transition-colors duration-300"
+                     :class="modelValue === option.value ? 'border-blue-500 bg-blue-500' : 'border-surface-300 bg-white'">
+                    <div v-if="modelValue === option.value" class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
                 </div>
+                <span class="text-[13px] font-medium leading-tight" :class="modelValue === option.value ? 'text-blue-900' : 'text-surface-700'">
+                    {{ option.label }}
+                </span>
             </div>
         </div>
-        <small v-if="error" class="text-[10px] font-bold text-red-500 mt-1 uppercase tracking-tight">{{ error }}</small>
+        <small v-if="error" class="text-xs font-medium text-red-500 mt-1 block">{{ error }}</small>
     </div>
 </template>
diff --git a/src/components/marketing/wizard/StepSection.vue b/src/components/marketing/wizard/StepSection.vue
index a5ec314..a7a9988 100644
--- a/src/components/marketing/wizard/StepSection.vue
+++ b/src/components/marketing/wizard/StepSection.vue
@@ -8,12 +8,14 @@ defineProps({
 </script>
 
 <template>
-    <section class="space-y-3 pb-8 border-b border-surface-200/50 dark:border-surface-800/50 last:border-b-0">
-        <h2 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-500/80 mb-4 flex items-center gap-2">
-            <span class="w-1 h-3 bg-blue-500 rounded-full"></span>
+    <section class="space-y-6 pb-10 mb-2 border-b border-surface-200/50 last:border-b-0">
+        <h2 class="text-sm font-bold text-surface-900 tracking-tight flex items-center gap-3">
+            <span class="flex items-center justify-center w-7 h-7 rounded-lg bg-surface-100 text-surface-500 shadow-sm border border-surface-200/60">
+               <i class="pi pi-compass text-[11px]"></i>
+            </span>
             {{ title }}
         </h2>
-        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
             <slot />
         </div>
     </section>
diff --git a/src/composables/useCountUp.js b/src/composables/useCountUp.js
new file mode 100644
index 0000000..85cace8
--- /dev/null
+++ b/src/composables/useCountUp.js
@@ -0,0 +1,47 @@
+import { onBeforeUnmount, ref, watch } from 'vue';
+
+export function useCountUp(targetRef, options = {}) {
+    const value = ref(0);
+    const duration = options.duration ?? 1100;
+    const decimals = options.decimals ?? 0;
+    const prefix = options.prefix ?? '';
+    const suffix = options.suffix ?? '';
+    let frameId = 0;
+
+    const stop = () => {
+        if (frameId) cancelAnimationFrame(frameId);
+        frameId = 0;
+    };
+
+    const animate = (toValue) => {
+        stop();
+        const start = performance.now();
+        const fromValue = 0;
+        const target = Number(toValue) || 0;
+
+        const step = (timestamp) => {
+            const progress = Math.min((timestamp - start) / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            value.value = fromValue + (target - fromValue) * eased;
+            if (progress < 1) {
+                frameId = requestAnimationFrame(step);
+            }
+        };
+
+        frameId = requestAnimationFrame(step);
+    };
+
+    watch(
+        targetRef,
+        (next) => {
+            animate(next);
+        },
+        { immediate: true }
+    );
+
+    onBeforeUnmount(stop);
+
+    const formatted = () => `${prefix}${value.value.toFixed(decimals)}${suffix}`;
+
+    return { value, formatted, stop };
+}
diff --git a/src/composables/useScrollReveal.js b/src/composables/useScrollReveal.js
new file mode 100644
index 0000000..3fa08a8
--- /dev/null
+++ b/src/composables/useScrollReveal.js
@@ -0,0 +1,28 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export function useScrollReveal(options = {}) {
+    const target = ref(null);
+    const revealed = ref(false);
+    let observer;
+
+    onMounted(() => {
+        observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry?.isIntersecting) {
+                    revealed.value = true;
+                    observer?.disconnect();
+                }
+            },
+            {
+                threshold: options.threshold ?? 0.2,
+                rootMargin: options.rootMargin ?? '0px 0px -10% 0px'
+            }
+        );
+
+        if (target.value) observer.observe(target.value);
+    });
+
+    onBeforeUnmount(() => observer?.disconnect());
+
+    return { target, revealed };
+}
diff --git a/src/main.js b/src/main.js
index 81a6544..c5f31de 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,8 @@ import ToastService from 'primevue/toastservice';
 
 import '@/assets/styles.scss';
 import '@/assets/kai-v4.css';
+import '@/assets/marketing-theme.css';
+import '@/assets/marketing-lists-kit.css';
 import 'katex/dist/katex.min.css';
 
 document.documentElement.classList.remove('app-dark');
diff --git a/src/types/campaign.types.ts b/src/types/campaign.types.ts
index 2f0ffbf..455b531 100644
--- a/src/types/campaign.types.ts
+++ b/src/types/campaign.types.ts
@@ -81,6 +81,97 @@ export interface RecommendationPhase {
     expectedSpend?: number | null;
 }
 
+export interface PixelHealthModuleStatus {
+    status?: string | null;
+    label?: string | null;
+    note?: string | null;
+    details?: string | null;
+}
+
+export interface PixelHealth {
+    overallStatus?: string | null;
+    healthScore?: number | null;
+    fbp?: PixelHealthModuleStatus | string | null;
+    capi?: PixelHealthModuleStatus | string | null;
+    gtm?: PixelHealthModuleStatus | string | null;
+    setupInstructions?: string[] | string | null;
+}
+
+export interface FunnelStageStrategy {
+    whoSeesThis?: string | null;
+    audience?: string | null;
+    message?: string | null;
+    creativeLogic?: string | null;
+    ctaStyle?: string | null;
+    text?: string | null;
+    notes?: string | null;
+}
+
+export interface FunnelStrategy {
+    tof?: FunnelStageStrategy | string | null;
+    mof?: FunnelStageStrategy | string | null;
+    bof?: FunnelStageStrategy | string | null;
+}
+
+export interface HypothesisMatrixCell {
+    id?: string | null;
+    row?: string | null;
+    column?: string | null;
+    angle?: string | null;
+    visualDirection?: string | null;
+    funnelStage?: string | null;
+    specificAdIdea?: string | null;
+    counterHypothesis?: string | null;
+    expectedOutcome?: string | null;
+}
+
+export interface HypothesisMatrix {
+    rows?: string[] | null;
+    columns?: string[] | null;
+    cells?: HypothesisMatrixCell[] | null;
+    ideas?: HypothesisMatrixCell[] | null;
+    matrix?: HypothesisMatrixCell[] | Record<string, unknown> | null;
+}
+
+export interface LandingPageAudit {
+    matchScore?: number | null;
+    executiveSummary?: string | null;
+    criticalFixes?: string[] | null;
+    trustBoosters?: string[] | null;
+}
+
+export interface AutomationCondition {
+    metric?: string | null;
+    operator?: string | null;
+    value?: string | number | null;
+    label?: string | null;
+}
+
+export interface AutomationRule {
+    id?: string | number | null;
+    ruleId?: string | number | null;
+    entityLevel?: string | null;
+    level?: string | null;
+    conditions?: AutomationCondition[] | string[] | null;
+    conditionLogic?: 'AND' | 'OR' | string | null;
+    action?: string | null;
+    actionValue?: string | number | null;
+    value?: string | number | null;
+}
+
+export interface ScalingPlan {
+    horizontalScaling?: string[] | string | null;
+    budgetScaling?: string[] | string | null;
+    geoExpansion?: string[] | string | null;
+}
+
+export interface RiskAnalysis {
+    fatigueWarning?: string | null;
+    policyRiskLevel?: string | null;
+    moderationTriggers?: string[] | string | null;
+    launchChecklist?: string[] | string | null;
+}
+
 export interface TargetingRecommendation {
     recommendedType?: TargetingType | string | null;
     recommendedTypeLabel?: string | null;
@@ -107,6 +198,13 @@ export interface TargetingRecommendation {
     primaryCta?: string | null;
     funnelStage?: string | null;
     conversionMechanism?: string | null;
+    pixelHealth?: PixelHealth | null;
+    funnelStrategy?: FunnelStrategy | null;
+    hypothesisMatrix?: HypothesisMatrix | HypothesisMatrixCell[] | null;
+    lpAudit?: LandingPageAudit | null;
+    suggestedRules?: AutomationRule[] | null;
+    scalingPlan?: ScalingPlan | null;
+    risks?: RiskAnalysis | null;
 }
 
 export interface AdCreative {
diff --git a/src/views/pages/marketing/MarketingAnalysisV3.vue b/src/views/pages/marketing/MarketingAnalysisV3.vue
index 5188037..6061a84 100644
--- a/src/views/pages/marketing/MarketingAnalysisV3.vue
+++ b/src/views/pages/marketing/MarketingAnalysisV3.vue
@@ -1,10 +1,9 @@
 <script setup>
 import '@/assets/kai-v4.css';
 import MarketingV3Service from '@/service/MarketingV3Service';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-// ─── Sections ────────────────────────────────────────────────────────────────
 import V4Behavioral from '@/components/marketing/dashboard-v3/v4/V4Behavioral.vue';
 import V4Cii from '@/components/marketing/dashboard-v3/v4/V4Cii.vue';
 import V4Competitors from '@/components/marketing/dashboard-v3/v4/V4Competitors.vue';
@@ -12,302 +11,567 @@ import V4Conclusions from '@/components/marketing/dashboard-v3/v4/V4Conclusions.
 import V4Content from '@/components/marketing/dashboard-v3/v4/V4Content.vue';
 import V4Demand from '@/components/marketing/dashboard-v3/v4/V4Demand.vue';
 import V4Executive from '@/components/marketing/dashboard-v3/v4/V4Executive.vue';
-import V4Geo from '@/components/marketing/dashboard-v3/v4/V4Geo.vue';
 import V4Header from '@/components/marketing/dashboard-v3/v4/V4Header.vue';
 import V4Landscape from '@/components/marketing/dashboard-v3/v4/V4Landscape.vue';
 import V4Positioning from '@/components/marketing/dashboard-v3/v4/V4Positioning.vue';
 import V4Rationale from '@/components/marketing/dashboard-v3/v4/V4Rationale.vue';
 import V4Reputation from '@/components/marketing/dashboard-v3/v4/V4Reputation.vue';
+import V4SideNav from '@/components/marketing/dashboard-v3/v4/V4SideNav.vue';
 
-const route  = useRoute();
+const route = useRoute();
 const router = useRouter();
 
 const analysisId = computed(() => route.params.id);
-const loading    = ref(true);
-const status     = ref('IDLE');
-const result     = ref(null);
-const errorMsg   = ref('');
+const loading = ref(true);
+const status = ref('IDLE');
+const result = ref(null);
+const analysisDoc = ref(null);
+const errorMsg = ref('');
+const layoutRef = ref(null);
+const navColRef = ref(null);
+const navInnerRef = ref(null);
+const navStyle = ref({});
 
-const MSGS = ['Сбор данных активен', 'Контекстная маршрутизация...', 'Анализ ядра конкурентов...', 'Извлечение тональности...', 'Синтез и приоритизация...'];
-const loaderMsg  = ref(MSGS[0]);
-const loaderDot  = ref(1);
+const loaderMessages = [
+    'Собираем рынок и конкурентов',
+    'Проверяем площадки и репутацию',
+    'Считаем спрос и позиционирование',
+    'Упаковываем рекомендации в отчёт'
+];
+
+const loaderMessage = ref(loaderMessages[0]);
 let pollInterval = null;
 let tick = 0;
+let navFrame = 0;
 
-const d = (key, def = {}) => computed(() => result.value?.[key] ?? def);
-const exec   = d('0_executive_summary');
-const land   = d('1_market_landscape');
-const geo    = d('2_geo_structure');
-const comps  = d('3_competitor_map', []);
-const cont   = d('4_content_profile');
-const cii    = d('5_competition_intensity');
-const rep    = d('6_reputation_analysis');
-const beh    = d('7_behavioral_pattern');
-const dem    = d('8_search_demand');
-const pos    = d('9_user_positioning');
-const concl  = d('10_structured_conclusions', []);
-const rat    = computed(() => result.value?.['11_smm_strategy_rationale'] ?? '');
+const d = (key, fallback = {}) => computed(() => result.value?.[key] ?? fallback);
+const exec = d('0_executive_summary');
+const landscape = d('1_market_landscape');
+const competitors = d('3_competitor_map', []);
+const content = d('4_content_profile');
+const cii = d('5_competition_intensity');
+const reputation = d('6_reputation_analysis');
+const behavioral = d('7_behavioral_pattern');
+const demand = d('8_search_demand');
+const positioning = d('9_user_positioning');
+const conclusions = d('10_structured_conclusions', []);
+const rationale = computed(() => result.value?.['11_smm_strategy_rationale'] ?? '');
 
 const MOCK = {
-  '0_executive_summary':{ businessStage:'Рост', geography:'Алматы, Астана', activeCompetitors:24, competitionLevel:'Высокий', averageNicheEr:4.8, averageRating:4.3, demandTrend:'▲ +12% за квартал', keyFigures:['Рынок насчитывает 24 активных игрока в Instagram.','Средний ER: 4.8% — выше бенчмарка (3.2%).','Пик спроса — январь и сентябрь.','Лидер рынка — @championfitness.kz с 48 000 подписчиков.'] },
-  '1_market_landscape':{ activePlayersByPlatform:{ Instagram:18, '2GIS':14, YouTube:6, TikTok:9 }, cityDistribution:{ Алматы:18, Астана:12, Шымкент:7, Қарағанды:4, Актобе:3 }, nicheReputationLevel:4.2 },
-  '2_geo_structure':{ cityComparison:[{ city:'Алматы', activePlayers:18, avgEr:5.1, avgRating:4.4, avgPostsPerMonth:14 },{ city:'Астана', activePlayers:12, avgEr:4.3, avgRating:4.2, avgPostsPerMonth:11 },{ city:'Шымкент', activePlayers:7, avgEr:3.8, avgRating:4.0, avgPostsPerMonth:9 }], densityIndex:78.5 },
-  '3_competitor_map':[{ name:'ChampionFitness', platform:'Instagram', followers:48000, postsPerMonth:22, er:7.2, rating:4.7, reviews:892, strengths:['Высокий ER','Регулярный постинг','Профессиональный визуал'], weaknesses:['Слабый 2GIS','Нет YouTube'] },{ name:'FitLife Almaty', platform:'Instagram', followers:31000, postsPerMonth:15, er:5.4, rating:4.5, reviews:541, strengths:['Активные stories','Коллаборации'], weaknesses:['Редкие публикации'] },{ name:'SportLife', platform:'TikTok', followers:19000, postsPerMonth:30, er:6.8, rating:4.0, reviews:280, strengths:['Вирусный TikTok'], weaknesses:['Слабый Instagram'] }],
-  '4_content_profile':{ demoContentPercent:28, expertContentPercent:22, salesContentPercent:20, reviewsContentPercent:18, engagementContentPercent:12, videoShare:38, avgTextLengthCharacters:284, ctaUsagePercent:33.3 },
-  '5_competition_intensity':{ ciiIndex:72, intensityLabel:'Высокая интенсивность', contributingFactors:['Плотность конкурентов: высокая','Частота публикаций: 14 п/мес','Средний рейтинг: 4.4 ★','Видео-активность: 38%'] },
-  '6_reputation_analysis':{ avgNicheRating:4.3, medianReviews:2443, starDistribution:{'1':4.3,'2':6.2,'3':15.0,'4':52.0,'5':22.5}, highTrustBusinessShare:0.88, avgOwnerResponseTimeHours:12 },
-  '7_behavioral_pattern':{ promoUsagePercent:35, directBookingPercent:28, priceVisibilityPercent:15, avgCycleDays:2, commonCta:['Запишись на пробный','Напиши в Direct','Узнай цену','Смотри акцию'] },
-  '8_search_demand':{ avgMonthlySearches:15400, seasonality:[{period:'Янв',value:92},{period:'Фев',value:78},{period:'Мар',value:81},{period:'Апр',value:74},{period:'Май',value:68},{period:'Июн',value:59},{period:'Июл',value:55},{period:'Авг',value:63},{period:'Сен',value:89},{period:'Окт',value:85},{period:'Ноя',value:77},{period:'Дек',value:70}], peakPeriods:['Январь','Сентябрь','Октябрь'], relatedQueries:['фитнес алматы','тренажёрный зал цена','записаться в зал','фитнес рядом','персональный тренер','групповые тренировки'] },
-  '9_user_positioning':{ mode:'COMPARISON', marketMetrics:{ activity:70, engagement:60, video:50, reputation:80, frequency:65 }, userMetrics:{ activity:40, engagement:30, video:20, reputation:60, frequency:30 }, strategicFocus:['Увеличить частоту публикаций до 14/мес','Снять минимум 4 Reels в неделю','Ответить на все отзывы в 2GIS','Добавить ценник в каждый пост'] },
-  '10_structured_conclusions':['Рынок фитнес-услуг Алматы высококонкурентный — 18 активных игроков в Instagram.','Средний ER 5.1% указывает на хорошую вовлечённость у топ-игроков.','Лидер публикует 22 поста/мес — в 2.5x больше среднего.','Пиковый спрос в январе и сентябре — усиливать контент в эти периоды.','Слабое место конкурентов — YouTube и TikTok: только 25% активны.','CII = 72 (высокий) — входной порог требует качественного контента.'],
-  '11_smm_strategy_rationale':'На основе анализа рекомендуется фокус на Instagram + 2GIS.\n\nКонтент-стратегия: не менее 14 публикаций в месяц с упором на видео (Reels) и экспертный контент. Это позволит конкурировать с лидером по ER при меньшем бюджете.\n\nScore Model приоритет: Репутация (2GIS-отзывы) → Engagement Rate → Частота постинга → CTA-конверсия.'
+    requestData: {
+        productName: 'Сладкоежка',
+        businessNiche: 'Кондитерская',
+        mainCity: 'Алматы',
+        createdAt: '19.04.2026'
+    },
+    status: 'COMPLETED',
+    resultData: {
+        '0_executive_summary': {
+            businessStage: 'Рост',
+            geography: 'Алматы',
+            activeCompetitors: 7,
+            competitionLevel: 'Высокий',
+            averageNicheEr: 4.5,
+            averageRating: 4.7,
+            demandTrend: '+8%',
+            keyFigures: [
+                'В нише найдено 7 активных игроков на ключевых площадках.',
+                'Средний рейтинг рынка держится на уровне 4.7 из 5.',
+                'Спрос растёт, особенно перед праздниками и сезонными датами.',
+                'Контент с видео и отзывами даёт лучший отклик.'
+            ]
+        },
+        '1_market_landscape': {
+            activePlayersByPlatform: { Instagram: 7, TikTok: 5, Google: 6, '2GIS': 5, Telegram: 2, YouTube: 3 },
+            cityDistribution: { Алматы: 7, Астана: 4, Шымкент: 3, Караганда: 2 },
+            nicheReputationLevel: 4.7
+        },
+        '3_competitor_map': [
+            {
+                name: 'Сладкоешкин',
+                platform: 'Instagram',
+                followers: 20000,
+                postsPerMonth: 20,
+                er: 5,
+                rating: 4.8,
+                reviews: 150,
+                strengths: ['Reels каждые 3 дня', 'Показывают цены в постах'],
+                weaknesses: ['Слабо отвечают на комментарии', 'Почти нет видеообзоров производства']
+            },
+            {
+                name: 'Тортория',
+                platform: 'TikTok',
+                followers: 13500,
+                postsPerMonth: 28,
+                er: 4.7,
+                rating: 4.6,
+                reviews: 94,
+                strengths: ['Сильные видео с процессом', 'Много UGC-контента'],
+                weaknesses: ['Слабый оффер в описаниях', 'Редко ведут Instagram']
+            }
+        ],
+        '4_content_profile': {
+            salesContentPercent: 30,
+            demoContentPercent: 20,
+            reviewsContentPercent: 20,
+            expertContentPercent: 15,
+            engagementContentPercent: 15,
+            videoShare: 40,
+            avgTextLengthCharacters: 150,
+            ctaUsagePercent: 60
+        },
+        '5_competition_intensity': {
+            ciiIndex: 72,
+            intensityLabel: 'Высокая конкуренция',
+            contributingFactors: ['Плотный рынок в Instagram и Google', 'Игроки регулярно публикуются', 'У рынка хороший средний ER', 'Репутация выше 4.5 считается нормой']
+        },
+        '6_reputation_analysis': {
+            avgNicheRating: 4.7,
+            medianReviews: 186,
+            starDistribution: { '5': 50, '4': 30, '3': 10, '2': 5, '1': 5 },
+            highTrustBusinessShare: 0.6,
+            avgOwnerResponseTimeHours: 12
+        },
+        '7_behavioral_pattern': {
+            promoUsagePercent: 35,
+            directBookingPercent: 28,
+            priceVisibilityPercent: 15,
+            avgCycleDays: 2,
+            commonCta: ['Закажите десерт к празднику', 'Напишите в WhatsApp', 'Забронируйте дату заранее']
+        },
+        '8_search_demand': {
+            avgMonthlySearches: 4500,
+            seasonality: [
+                { period: 'Янв', value: 58 },
+                { period: 'Фев', value: 62 },
+                { period: 'Мар', value: 94 },
+                { period: 'Апр', value: 92 },
+                { period: 'Май', value: 72 },
+                { period: 'Июн', value: 64 },
+                { period: 'Июл', value: 60 },
+                { period: 'Авг', value: 66 },
+                { period: 'Сен', value: 70 },
+                { period: 'Окт', value: 74 },
+                { period: 'Ноя', value: 86 },
+                { period: 'Дек', value: 98 }
+            ],
+            peakPeriods: ['Март–Апрель', 'Ноябрь', 'Декабрь'],
+            relatedQueries: ['торты на заказ Алматы', 'купить десерты Алматы', 'лучшие кондитерские Алматы']
+        },
+        '9_user_positioning': {
+            marketMetrics: { activity: 70, engagement: 45, video: 40, reputation: 90, frequency: 60 },
+            userMetrics: { activity: 20, engagement: 0, video: 0, reputation: 0, frequency: 0 }
+        },
+        '10_structured_conclusions': [
+            'В нише 7 активных конкурентов, поэтому рынок уже насыщен и вам нужна чёткая визуальная отстройка.',
+            'Средний рейтинг ниши 4.7: доверие и качество сервиса для рынка критичны.',
+            'Спрос растёт на 8%, а значит категория живая и в неё стоит инвестировать.',
+            'Контент с видео, отзывами и понятным CTA даёт лучший шанс на заявку.'
+        ],
+        '11_smm_strategy_rationale': 'Рынок сладостей в Алматы уже конкурентный, но при этом спрос растёт и аудитория хорошо реагирует на визуальный контент.\n\nГлавный резерв роста для вашего бизнеса — регулярный видеоконтент, открытый оффер и сильная упаковка отзывов.\n\nЕсли быстро занять связку Instagram + Google/2GIS и выстроить понятный ритм публикаций, можно сократить разрыв с лидерами значительно быстрее.'
+    }
 };
 
+const businessName = computed(() => analysisDoc.value?.requestData?.productName || 'Бизнес');
+const niche = computed(() => analysisDoc.value?.requestData?.businessNiche || exec.value?.businessStage || '');
+const city = computed(() => analysisDoc.value?.requestData?.mainCity || exec.value?.geography || '');
+const generatedAt = computed(() => {
+    const raw = analysisDoc.value?.createdAt || analysisDoc.value?.requestData?.createdAt || analysisDoc.value?.updatedAt;
+    if (!raw) return '';
+    try {
+        return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' }).format(new Date(raw));
+    } catch {
+        return String(raw);
+    }
+});
+
+const pageTitle = computed(() => `${businessName.value} — Анализ рынка`);
+
 const fetchAnalysis = async () => {
-  if (route.query.preview === '1') { status.value = 'COMPLETED'; result.value = MOCK; loading.value = false; return; }
-  if (!analysisId.value) return;
-  try {
-    loading.value = true;
-    const doc = await MarketingV3Service.getAnalysisV3ById(analysisId.value);
-    status.value = doc.status || 'IDLE';
-    result.value = doc.resultData || null;
-    if (doc.status === 'FAILED' && doc.errorMessage) errorMsg.value = doc.errorMessage;
-    loaderMsg.value = MSGS[++tick % MSGS.length];
-    loaderDot.value = (loaderDot.value % 5) + 1;
-  } catch (e) {
-    status.value = 'FAILED';
-    errorMsg.value = e.message || 'Ошибка загрузки анализа.';
-  } finally { loading.value = false; }
+    if (route.query.preview === '1') {
+        analysisDoc.value = MOCK;
+        status.value = MOCK.status;
+        result.value = MOCK.resultData;
+        loading.value = false;
+        return;
+    }
+
+    if (!analysisId.value) return;
+
+    try {
+        loading.value = true;
+        const doc = await MarketingV3Service.getAnalysisV3ById(analysisId.value);
+        analysisDoc.value = doc;
+        status.value = doc.status || 'IDLE';
+        result.value = doc.resultData || null;
+        if (doc.status === 'FAILED' && doc.errorMessage) errorMsg.value = doc.errorMessage;
+        loaderMessage.value = loaderMessages[++tick % loaderMessages.length];
+    } catch (error) {
+        status.value = 'FAILED';
+        errorMsg.value = error.message || 'Не удалось загрузить анализ.';
+    } finally {
+        loading.value = false;
+    }
 };
 
 const startPolling = () => {
-  if (pollInterval) return;
-  pollInterval = setInterval(() => { if (status.value === 'COMPLETED' || status.value === 'FAILED') { stopPolling(); } else { fetchAnalysis(); } }, 5000);
+    if (pollInterval) return;
+    pollInterval = setInterval(() => {
+        if (status.value === 'COMPLETED' || status.value === 'FAILED') {
+            stopPolling();
+            return;
+        }
+        fetchAnalysis();
+    }, 5000);
 };
-const stopPolling = () => { if (pollInterval) { clearInterval(pollInterval); pollInterval = null; } };
-const goStrategy = () => router.push({ name: 'marketing-v3-strategy', query: { analysisId: analysisId.value } });
 
-onMounted(() => { fetchAnalysis(); startPolling(); });
-onUnmounted(() => stopPolling());
+const stopPolling = () => {
+    if (pollInterval) clearInterval(pollInterval);
+    pollInterval = null;
+};
+
+const goStrategy = () => router.push({ name: 'marketing-v3-strategy', query: { analysisId: analysisId.value } });
+const goBack = () => router.push('/marketing-analysis/v3');
+
+const handleShare = async () => {
+    const url = window.location.href;
+    try {
+        if (navigator.share) {
+            await navigator.share({ title: pageTitle.value, url });
+            return;
+        }
+        await navigator.clipboard.writeText(url);
+    } catch {
+        console.info('Не удалось открыть системное меню поделиться.');
+    }
+};
+
+const handleDownload = () => window.print();
+
+const updateFloatingNav = () => {
+    if (!layoutRef.value || !navColRef.value || !navInnerRef.value) {
+        navStyle.value = {};
+        return;
+    }
+
+    if (window.innerWidth <= 1100) {
+        navStyle.value = {};
+        return;
+    }
+
+    const topGap = 24;
+    const bottomGap = 24;
+    const layoutRect = layoutRef.value.getBoundingClientRect();
+    const navColRect = navColRef.value.getBoundingClientRect();
+    const maxHeight = Math.max(320, window.innerHeight - topGap - bottomGap);
+    const navHeight = Math.min(navInnerRef.value.scrollHeight, maxHeight);
+    const scrollTop = window.scrollY || window.pageYOffset;
+    const layoutTop = layoutRect.top + scrollTop;
+    const layoutBottom = layoutTop + layoutRef.value.offsetHeight;
+    const stickStart = layoutTop - topGap;
+    const stickEnd = layoutBottom - navHeight - bottomGap;
+
+    if (scrollTop <= stickStart) {
+        navStyle.value = {
+            position: 'relative',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: `${navHeight}px`
+        };
+        return;
+    }
+
+    if (scrollTop >= stickEnd) {
+        navStyle.value = {
+            position: 'absolute',
+            top: 'auto',
+            bottom: '0',
+            left: '0',
+            width: '100%',
+            height: `${navHeight}px`
+        };
+        return;
+    }
+
+    navStyle.value = {
+        position: 'fixed',
+        top: `${topGap}px`,
+        left: `${navColRect.left}px`,
+        width: `${navColRect.width}px`,
+        height: `${navHeight}px`
+    };
+};
+
+const scheduleFloatingNavUpdate = () => {
+    if (navFrame) cancelAnimationFrame(navFrame);
+    navFrame = requestAnimationFrame(updateFloatingNav);
+};
+
+onMounted(() => {
+    fetchAnalysis();
+    startPolling();
+    window.addEventListener('scroll', scheduleFloatingNavUpdate, { passive: true });
+    window.addEventListener('resize', scheduleFloatingNavUpdate);
+    nextTick(() => {
+        scheduleFloatingNavUpdate();
+        window.setTimeout(scheduleFloatingNavUpdate, 120);
+        window.setTimeout(scheduleFloatingNavUpdate, 420);
+    });
+});
+
+watch([status, result], async () => {
+    await nextTick();
+    scheduleFloatingNavUpdate();
+    window.setTimeout(scheduleFloatingNavUpdate, 120);
+});
+
+onUnmounted(() => {
+    stopPolling();
+    if (navFrame) cancelAnimationFrame(navFrame);
+    window.removeEventListener('scroll', scheduleFloatingNavUpdate);
+    window.removeEventListener('resize', scheduleFloatingNavUpdate);
+});
 </script>
 
 <template>
-  <div class="marketing-analysis-v3 kai-page">
+    <div class="analysis-page">
+        <div class="analysis-page__backdrop analysis-page__backdrop--left" />
+        <div class="analysis-page__backdrop analysis-page__backdrop--right" />
 
-    <!-- Sticky Header -->
-    <V4Header :status="status" :exec="exec" @strategy="goStrategy" @back="$router.push('/marketing-analysis/v3')" />
+        <div class="analysis-page__shell">
+            <V4Header
+                :status="status"
+                :title="pageTitle"
+                :niche="niche"
+                :city="city"
+                :generated-at="generatedAt"
+                :exec="exec"
+                @strategy="goStrategy"
+                @back="goBack"
+                @share="handleShare"
+                @download="handleDownload"
+            />
 
-    <!-- Side Nav - DISABLED -->
-    <!-- <V4SideNav v-if="status === 'COMPLETED'" /> -->
+            <transition name="page-fade" mode="out-in">
+                <div v-if="loading || status === 'QUEUED' || status === 'PROCESSING'" class="analysis-state analysis-state--loading">
+                    <div class="analysis-loader" />
+                    <h2>{{ loaderMessage }}</h2>
+                    <p>КонтурAI собирает рынок, проверяет конкурентов и превращает цифры в понятный отчёт.</p>
+                </div>
 
-    <div class="analysis-container">
+                <div v-else-if="status === 'FAILED'" class="analysis-state analysis-state--error">
+                    <div class="analysis-state__icon">
+                        <i class="pi pi-exclamation-triangle" />
+                    </div>
+                    <h2>Не удалось собрать отчёт</h2>
+                    <p>{{ errorMsg || 'Во время генерации произошла ошибка. Попробуйте открыть отчёт позже.' }}</p>
+                    <button class="analysis-state__button" type="button" @click="goBack">
+                        Вернуться к списку
+                    </button>
+                </div>
 
-      <!-- LOADING STATE -->
-      <div v-if="loading || status === 'QUEUED' || status === 'PROCESSING'" class="loading-state">
-        <div class="loader-wrap">
-          <div class="loader-circle"></div>
-          <div class="loader-inner-circle"></div>
-          <div class="kai-logo loader-logo">KAI</div>
+                <div v-else-if="status === 'COMPLETED' && result" ref="layoutRef" class="analysis-layout">
+                    <aside ref="navColRef" class="analysis-layout__nav">
+                        <div ref="navInnerRef" class="analysis-layout__nav-inner" :style="navStyle">
+                            <V4SideNav />
+                        </div>
+                    </aside>
+
+                    <main class="analysis-layout__content">
+                        <V4Executive id="s1" :data="exec" />
+                        <V4Landscape id="s2" :data="landscape" />
+                        <V4Competitors id="s3" :data="competitors" />
+                        <V4Content id="s4" :data="content" />
+                        <V4Cii id="s5" :data="cii" />
+                        <V4Reputation id="s6" :data="reputation" />
+                        <V4Behavioral id="s7" :data="behavioral" />
+                        <V4Demand id="s8" :data="demand" />
+                        <V4Positioning id="s9" :data="positioning" />
+                        <V4Conclusions id="s10" :data="conclusions" />
+                        <V4Rationale id="s11" :data="rationale" @strategy="goStrategy" />
+                    </main>
+                </div>
+            </transition>
         </div>
-        <div class="loading-info">
-          <div class="loading-title">{{ loaderMsg }}</div>
-          <p class="loading-sub">KAI Prime обрабатывает данные и формирует маркетинговую аналитику...</p>
-          <div class="loading-dots">
-            <span v-for="i in 5" :key="i" class="dot" :class="{ active: loaderDot === i }"></span>
-          </div>
-        </div>
-      </div>
-
-      <!-- ERROR STATE -->
-      <div v-else-if="status === 'FAILED'" class="error-state">
-        <div class="error-icon">
-          <i class="pi pi-exclamation-triangle" />
-        </div>
-        <h2 class="error-title">Анализ прерван</h2>
-        <p class="error-desc">{{ errorMsg || 'Во время анализа произошла непредвиденная ошибка.' }}</p>
-        <button class="kai-btn-secondary" @click="$router.push('/marketing-analysis/v3')">
-          <i class="pi pi-arrow-left mr-2" /> Вернуться к списку анализов
-        </button>
-      </div>
-
-      <!-- DASHBOARD CONTENT -->
-      <template v-else-if="status === 'COMPLETED' && result">
-        <div class="dashboard-grid">
-           <V4Executive  id="s0" :data="exec"  />
-           <V4Landscape  id="s1" :data="land"  :demand="dem" />
-           <V4Geo        id="s2" :data="geo"   />
-           <V4Competitors id="s3" :data="comps" />
-           <V4Content    id="s4" :data="cont"  />
-           <V4Cii        id="s5" :data="cii"   />
-           <V4Reputation id="s6" :data="rep"   />
-           <V4Behavioral id="s7" :data="beh"   />
-           <V4Demand     id="s8" :data="dem"   />
-           <V4Positioning id="s9" :data="pos"  />
-           <V4Conclusions id="s10" :data="concl" />
-           <V4Rationale  id="s11" :data="rat"  @strategy="goStrategy" />
-        </div>
-      </template>
     </div>
-  </div>
 </template>
 
 <style scoped>
-.analysis-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 32px 24px 100px;
+.analysis-page {
+    position: relative;
+    min-height: 100vh;
+    padding: 24px;
+    background: linear-gradient(180deg, #f8faff, #f5f8ff);
+    overflow-x: hidden;
+    overflow-y: visible;
 }
 
-.dashboard-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
+.analysis-page__backdrop {
+    position: fixed;
+    width: 420px;
+    height: 420px;
+    border-radius: 50%;
+    filter: blur(120px);
+    pointer-events: none;
+    opacity: 0.4;
 }
 
-/* Loading State Stylings */
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 140px 0;
-  gap: 32px;
+.analysis-page__backdrop--left {
+    top: 80px;
+    left: -120px;
+    background: rgba(45, 123, 255, 0.18);
 }
 
-.loader-wrap {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.analysis-page__backdrop--right {
+    right: -120px;
+    top: 240px;
+    background: rgba(16, 185, 129, 0.14);
 }
 
-.loader-circle {
-  position: absolute;
-  inset: 0;
-  border: 2px solid var(--kai-border);
-  border-radius: 50%;
+.analysis-page__shell {
+    position: relative;
+    z-index: 1;
+    max-width: 1560px;
+    margin: 0 auto;
+    --analysis-nav-width: 296px;
+    --analysis-nav-gap: 28px;
 }
 
-.loader-inner-circle {
-  position: absolute;
-  inset: 0;
-  border: 2px solid transparent;
-  border-top-color: var(--kai-blue);
-  border-radius: 50%;
-  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+.analysis-layout {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--analysis-nav-width) minmax(0, 1fr);
+    gap: var(--analysis-nav-gap);
+    align-items: start;
+    margin-top: 18px;
 }
 
-.loader-logo {
-  font-size: 11px;
-  z-index: 2;
-  box-shadow: 0 0 20px rgba(var(--kai-blue-rgb), 0.4);
+.analysis-layout__nav {
+    position: relative;
+    align-self: stretch;
+    width: 100%;
+    min-height: 100%;
+    min-width: 0;
 }
 
-.loading-info {
-  text-align: center;
+.analysis-layout__nav-inner {
+    min-height: 0;
+    z-index: 10;
+    display: flex;
+    align-items: stretch;
 }
 
-.loading-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 14px;
-  font-weight: 800;
-  color: var(--kai-txt);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+.analysis-layout__content {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    min-width: 0;
 }
 
-.loading-sub {
-  font-size: 11px;
-  color: var(--kai-txt3);
-  max-width: 300px;
-  margin: 0 auto 16px;
+.analysis-state {
+    margin-top: 18px;
+    padding: 72px 24px;
+    border-radius: 32px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow: 0 20px 50px rgba(45, 123, 255, 0.08);
+    text-align: center;
 }
 
-.loading-dots {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
+.analysis-state h2 {
+    margin: 18px 0 12px;
+    color: #13203d;
+    font-family: 'Onest', sans-serif;
+    font-size: 34px;
+    font-weight: 900;
+    letter-spacing: -0.04em;
 }
 
-.loading-dots .dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--kai-border);
-  transition: all 0.3s;
+.analysis-state p {
+    max-width: 520px;
+    margin: 0 auto;
+    color: #607594;
+    font-size: 15px;
+    line-height: 1.7;
 }
 
-.loading-dots .dot.active {
-  background: var(--kai-blue);
-  transform: scale(1.4);
-  box-shadow: 0 0 8px var(--kai-blue);
+.analysis-loader {
+    width: 74px;
+    height: 74px;
+    margin: 0 auto;
+    border-radius: 24px;
+    border: 3px solid rgba(45, 123, 255, 0.12);
+    border-top-color: #2d7bff;
+    animation: spin 1s linear infinite;
 }
 
-/* Error State Stylings */
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 120px 0;
-  gap: 20px;
-  text-align: center;
+.analysis-state__icon {
+    width: 74px;
+    height: 74px;
+    margin: 0 auto;
+    border-radius: 24px;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
 }
 
-.error-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
-  background: rgba(239, 68, 68, 0.08);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--kai-red);
-  font-size: 24px;
-  margin-bottom: 8px;
+.analysis-state__button {
+    min-height: 50px;
+    margin-top: 24px;
+    padding: 0 22px;
+    border-radius: 16px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    color: #2d7bff;
+    font-size: 14px;
+    font-weight: 800;
+    cursor: pointer;
 }
 
-.error-title {
-  font-family: 'Unbounded', sans-serif;
-  font-size: 18px;
-  font-weight: 900;
-  color: var(--kai-txt);
-  letter-spacing: -0.02em;
+.page-fade-enter-active,
+.page-fade-leave-active {
+    transition: opacity 0.25s ease, transform 0.25s ease;
 }
 
-.error-desc {
-  font-size: 12px;
-  color: var(--kai-txt3);
-  max-width: 360px;
-  line-height: 1.6;
+.page-fade-enter-from,
+.page-fade-leave-to {
+    opacity: 0;
+    transform: translateY(12px);
 }
 
-.kai-btn-secondary {
-  margin-top: 12px;
-  background: transparent;
-  border: 1px solid var(--kai-border);
-  color: var(--kai-txt2);
-  padding: 10px 20px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  transition: all 0.3s;
-  cursor: pointer;
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.kai-btn-secondary:hover {
-  background: var(--kai-card-hover);
-  border-color: var(--kai-border-hover);
-  color: var(--kai-txt);
-}
+@media (max-width: 1100px) {
+    .analysis-page {
+        padding: 16px;
+    }
 
-@keyframes spin { 
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); } 
+    .analysis-layout {
+        grid-template-columns: 1fr;
+        gap: 18px;
+    }
+
+    .analysis-layout__nav {
+        min-height: auto;
+    }
+
+    .analysis-layout__nav-inner {
+        position: sticky !important;
+        top: 10px !important;
+        left: auto !important;
+        bottom: auto !important;
+        width: 100% !important;
+        height: auto !important;
+        z-index: 12;
+        display: block;
+    }
 }
 </style>
diff --git a/src/views/pages/marketing/MarketingAnalysisV3List.vue b/src/views/pages/marketing/MarketingAnalysisV3List.vue
index d58d591..6181d7d 100644
--- a/src/views/pages/marketing/MarketingAnalysisV3List.vue
+++ b/src/views/pages/marketing/MarketingAnalysisV3List.vue
@@ -1,5 +1,8 @@
-<script setup>
+<script setup>
 import MarketingV3Service from '@/service/MarketingV3Service';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import Paginator from 'primevue/paginator';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, ref } from 'vue';
@@ -14,7 +17,7 @@ const loading = ref(false);
 const searchQuery = ref('');
 const filterStatus = ref('');
 const currentPage = ref(1);
-const pageSize = 10;
+const pageSize = 12;
 
 const STATUS_FILTERS = [
     { label: 'Все', value: '' },
@@ -24,11 +27,44 @@ const STATUS_FILTERS = [
     { label: 'Ошибка', value: 'FAILED' }
 ];
 
+const statusStyle = (s) => ({
+    COMPLETED: { color: '#10B981', bg: 'rgba(16,185,129,0.1)', border: 'rgba(16,185,129,0.25)', accent: '#10B981', icon: 'pi pi-check-circle' },
+    PROCESSING: { color: '#2D7BFF', bg: 'rgba(45,123,255,0.1)', border: 'rgba(45,123,255,0.25)', accent: '#2D7BFF', icon: 'pi pi-spin pi-spinner' },
+    QUEUED: { color: '#F59E0B', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.25)', accent: '#F59E0B', icon: 'pi pi-clock' },
+    FAILED: { color: '#EF4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.25)', accent: '#EF4444', icon: 'pi pi-times-circle' }
+})[s] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.15)', accent: '#64748B', icon: 'pi pi-circle' };
+
+const statusLabel = (s) => ({
+    COMPLETED: 'Завершён',
+    PROCESSING: 'В работе',
+    QUEUED: 'В очереди',
+    FAILED: 'Ошибка'
+})[s] || s;
+
+const analysisKey = (item) => item?.id || item?.analysisId;
+
+const cityLabel = (item) => {
+    const rd = item?.requestData || item || {};
+    if (rd.mainCity) return rd.mainCity;
+    if (rd.presenceCities?.length) return rd.presenceCities.join(', ');
+    if (rd.promotionCities?.length) return rd.promotionCities.join(', ');
+    if (rd.geoScope === 'FULL_COUNTRY') return 'Вся страна';
+    if (rd.geoScope === 'ONLINE') return 'Онлайн';
+    return '';
+};
+
+const formatDate = (dt) =>
+    dt
+        ? new Date(dt).toLocaleString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+        : '—';
+
 const load = async () => {
     loading.value = true;
     try {
         const data = await MarketingV3Service.getUserAnalyses();
-        analyses.value = Array.isArray(data) ? data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) : [];
+        analyses.value = Array.isArray(data)
+            ? data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+            : [];
     } catch (err) {
         toast.add({ severity: 'error', summary: 'Ошибка', detail: err.message || 'Не удалось загрузить анализы', life: 5000 });
     } finally {
@@ -38,7 +74,11 @@ const load = async () => {
 
 const filtered = computed(() => {
     let list = analyses.value;
-    if (filterStatus.value) list = list.filter(a => a.status === filterStatus.value);
+
+    if (filterStatus.value) {
+        list = list.filter(a => a.status === filterStatus.value);
+    }
+
     if (searchQuery.value.trim()) {
         const q = searchQuery.value.trim().toLowerCase();
         list = list.filter(a => {
@@ -47,6 +87,7 @@ const filtered = computed(() => {
             return niche.includes(q) || city.includes(q);
         });
     }
+
     return list;
 });
 
@@ -55,59 +96,32 @@ const paginated = computed(() => {
     return filtered.value.slice(start, start + pageSize);
 });
 
-const countByStatus = s => analyses.value.filter(a => a.status === s).length;
+const countByStatus = (s) => analyses.value.filter(a => a.status === s).length;
 
-const cityLabel = item => {
-    const rd = item.requestData || item;
-    if (rd.mainCity) return rd.mainCity;
-    if (rd.presenceCities?.length) return rd.presenceCities.join(', ');
-    if (rd.promotionCities?.length) return rd.promotionCities.join(', ');
-    if (rd.geoScope === 'FULL_COUNTRY') return 'Вся страна';
-    if (rd.geoScope === 'ONLINE') return 'Онлайн';
-    return '';
-};
+const openAnalysis = (item) => {
+    const id = analysisKey(item);
+    if (!id) return;
 
-const formatDate = dt => dt ? new Date(dt).toLocaleString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—';
-const statusLabel = s => ({ COMPLETED: 'Завершён', PROCESSING: 'В работе', QUEUED: 'В очереди', FAILED: 'Ошибка' })[s] || s;
-
-const statusStyle = s => ({
-    COMPLETED: { color: '#10B981', bg: 'rgba(16,185,129,0.09)', border: 'rgba(16,185,129,0.22)', accent: '#10B981' },
-    PROCESSING: { color: '#2D7BFF', bg: 'rgba(45,123,255,0.09)', border: 'rgba(45,123,255,0.22)', accent: '#2D7BFF' },
-    QUEUED:     { color: '#F59E0B', bg: 'rgba(245,158,11,0.09)', border: 'rgba(245,158,11,0.22)', accent: '#F59E0B' },
-    FAILED:     { color: '#EF4444', bg: 'rgba(239,68,68,0.09)',  border: 'rgba(239,68,68,0.22)',  accent: '#EF4444' }
-})[s] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.18)', accent: '#64748B' };
-
-const statusIcon = s => ({
-    COMPLETED: 'pi pi-check-circle',
-    PROCESSING: 'pi pi-spin pi-spinner',
-    QUEUED: 'pi pi-clock',
-    FAILED: 'pi pi-times-circle'
-})[s] || 'pi pi-circle';
-
-const analysisKey = (item) => item?.id || item?.analysisId;
-
-const openAnalysis = item => {
-    const analysisId = analysisKey(item);
-    if (!analysisId) return;
     if (['COMPLETED', 'PROCESSING', 'QUEUED'].includes(item.status)) {
-        router.push(`/marketing-analysis/v3/${analysisId}`);
+        router.push(`/marketing-analysis/v3/${id}`);
     }
 };
 
 const retry = () => router.push('/marketing-analysis/v3/new');
 
-const confirmDelete = item => {
+const confirmDelete = (item) => {
     confirm.require({
-        message: `Удалить анализ "${item.requestData?.businessNiche || 'без названия'}"?`,
-        header: 'Подтверждение удаления',
-        icon: 'pi pi-exclamation-triangle',
-        acceptLabel: 'Удалить',
-        rejectLabel: 'Отмена',
-        acceptClass: 'p-button-danger',
+        message: `Точно хотите удалить анализ "${item.requestData?.businessNiche || 'без названия'}"?`,
+        header: 'Удаление',
+        icon: 'pi pi-info-circle text-red-500 text-2xl',
+        acceptLabel: 'Удалить навсегда',
+        rejectLabel: 'Оставить',
+        acceptClass: 'bg-red-500 text-white font-bold px-6 py-3 rounded-xl border-none hover:bg-red-600 shadow-xl shadow-red-500/20',
+        rejectClass: 'text-slate-500 bg-transparent border-none font-bold px-4 py-3 hover:bg-slate-100 rounded-xl',
         accept: () => {
             const targetId = analysisKey(item);
-            analyses.value = analyses.value.filter((a) => analysisKey(a) !== targetId);
-            toast.add({ severity: 'success', summary: 'Удалено', detail: 'Анализ удалён', life: 3000 });
+            analyses.value = analyses.value.filter(a => analysisKey(a) !== targetId);
+            toast.add({ severity: 'success', summary: 'Успех', detail: 'Анализ удалён', life: 3000 });
         }
     });
 };
@@ -116,225 +130,196 @@ onMounted(load);
 </script>
 
 <template>
-    <div class="al-page">
+    <div class="mk-list-page">
         <Toast />
-        <ConfirmDialog />
+        <ConfirmDialog :style="{ width: '450px', borderRadius: '24px' }" :breakpoints="{ '960px': '75vw', '640px': '90vw' }" />
 
-        <!-- PAGE GLOW -->
-        <div class="al-glow al-glow--blue"></div>
-        <div class="al-glow al-glow--green"></div>
+        <div class="mk-bg-dots"></div>
+        <div class="mk-orb mk-orb--blue"></div>
+        <div class="mk-orb mk-orb--violet"></div>
 
-        <div class="al-inner">
-
-            <!-- HEADER -->
-            <div class="al-header">
-                <div class="al-header__left">
-                    <button class="al-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
+        <div class="mk-banner">
+            <div class="mk-banner__inner">
+                <div class="mk-banner__left">
+                    <button class="mk-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
                         <i class="pi pi-arrow-left"></i>
                     </button>
                     <div>
-                        <div class="al-eyebrow">
-                            <span class="al-eyebrow__dot"></span>
+                        <div class="mk-eyebrow">
+                            <span class="mk-eyebrow__dot"></span>
                             Маркетинговый анализ · v4.0
                         </div>
-                        <h1 class="al-title">Мои анализы</h1>
+                        <h1 class="mk-title">Аналитика рынка</h1>
+                        <p class="mk-subtitle">Исследования ниши, конкурентный анализ и портреты целевой аудитории.</p>
                     </div>
                 </div>
-                <div class="al-header__right">
-                    <button class="al-btn al-btn--ghost" @click="$router.push('/marketing-analysis/v3/strategies')">
-                        <i class="pi pi-list"></i>
-                        <span>Стратегии</span>
+
+                <div class="mk-banner__right">
+                    <button class="mk-btn mk-btn--ghost" @click="$router.push('/marketing-analysis/v3/strategies')">
+                        <i class="pi pi-sparkles"></i>
+                        <span>Мои стратегии</span>
                     </button>
-                    <button class="al-btn al-btn--primary" @click="$router.push('/marketing-analysis/v3/new')">
+                    <button class="mk-btn mk-btn--dark" @click="$router.push('/marketing-analysis/v3/new')">
                         <i class="pi pi-plus"></i>
                         <span>Новый анализ</span>
                     </button>
                 </div>
             </div>
+        </div>
 
-            <!-- STATS ROW -->
-            <div class="al-stats-row">
-                <div class="al-stat-card" v-for="f in STATUS_FILTERS.filter(f => f.value)" :key="f.value"
-                     :style="{ borderColor: statusStyle(f.value).border }">
-                    <div class="al-stat-card__icon" :style="{ background: statusStyle(f.value).bg }">
-                        <i :class="statusIcon(f.value)" :style="{ color: statusStyle(f.value).color }"></i>
+        <div class="mk-inner">
+            <div class="mk-stats">
+                <button
+                    v-for="f in STATUS_FILTERS.filter(x => x.value)"
+                    :key="f.value"
+                    class="mk-stat"
+                    :class="{ 'mk-stat--active': filterStatus === f.value }"
+                    @click="filterStatus = (filterStatus === f.value ? '' : f.value); currentPage = 1"
+                >
+                    <div class="mk-stat__icon" :style="{ background: statusStyle(f.value).bg, borderColor: statusStyle(f.value).border }">
+                        <i :class="statusStyle(f.value).icon" :style="{ color: statusStyle(f.value).color }"></i>
                     </div>
-                    <div class="al-stat-card__body">
-                        <div class="al-stat-card__num" :style="{ color: statusStyle(f.value).color }">
-                            {{ countByStatus(f.value) }}
-                        </div>
-                        <div class="al-stat-card__label">{{ f.label }}</div>
+                    <div class="mk-stat__num" :style="{ color: statusStyle(f.value).color }">{{ countByStatus(f.value) }}</div>
+                    <div class="mk-stat__label">{{ f.label }}</div>
+                </button>
+
+                <button class="mk-stat" :class="{ 'mk-stat--active': !filterStatus }" @click="filterStatus = ''; currentPage = 1">
+                    <div class="mk-stat__icon" :style="{ background: 'rgba(15,23,42,0.06)' }">
+                        <i class="pi pi-database" :style="{ color: '#0F172A' }"></i>
                     </div>
-                </div>
-                <div class="al-stat-card al-stat-card--total">
-                    <div class="al-stat-card__icon" style="background: rgba(45,123,255,0.08);">
-                        <i class="pi pi-inbox" style="color: #2D7BFF;"></i>
-                    </div>
-                    <div class="al-stat-card__body">
-                        <div class="al-stat-card__num" style="color: #0F172A;">{{ analyses.length }}</div>
-                        <div class="al-stat-card__label">Всего анализов</div>
-                    </div>
-                </div>
+                    <div class="mk-stat__num">{{ analyses.length }}</div>
+                    <div class="mk-stat__label">Всего</div>
+                </button>
             </div>
 
-            <!-- FILTERS -->
-            <div class="al-toolbar">
-                <div class="al-search">
-                    <i class="pi pi-search al-search__icon"></i>
-                    <input v-model="searchQuery" type="text" placeholder="Поиск по нише или городу..." class="al-search__input" />
-                    <button v-if="searchQuery" class="al-search__clear" @click="searchQuery = ''" title="Очистить">
+            <div class="mk-toolbar">
+                <div class="mk-search">
+                    <i class="pi pi-search mk-search__icon"></i>
+                    <input v-model="searchQuery" type="text" class="mk-search__input" placeholder="Поиск по нише или городу..." />
+                    <button v-if="searchQuery" class="mk-search__clear" @click="searchQuery = ''" title="Очистить">
                         <i class="pi pi-times"></i>
                     </button>
                 </div>
-                <div class="al-pills">
+
+                <div class="mk-pills">
                     <button
-                        v-for="f in STATUS_FILTERS" :key="f.value"
+                        v-for="f in STATUS_FILTERS"
+                        :key="f.value"
+                        class="mk-pill"
+                        :class="{ 'mk-pill--active': filterStatus === f.value }"
                         @click="filterStatus = f.value; currentPage = 1"
-                        class="al-pill"
-                        :class="{ 'al-pill--active': filterStatus === f.value }"
                     >
                         {{ f.label }}
-                        <span v-if="f.value && countByStatus(f.value) > 0" class="al-pill__badge">
-                            {{ countByStatus(f.value) }}
-                        </span>
                     </button>
                 </div>
-                <button class="al-refresh-btn" :class="{ 'al-refresh-btn--loading': loading }" @click="load" title="Обновить список">
+
+                <button class="mk-btn mk-btn--ghost mk-btn--small" @click="load">
                     <i class="pi pi-refresh" :class="{ 'pi-spin': loading }"></i>
                     <span>Обновить</span>
                 </button>
             </div>
 
-            <!-- LOADING SKELETON -->
-            <div v-if="loading" class="al-skeleton-list">
-                <div v-for="i in 4" :key="i" class="al-skeleton-item">
-                    <div class="al-skeleton-icon shimmer"></div>
-                    <div class="al-skeleton-lines">
-                        <div class="al-skeleton-line shimmer" style="width: 40%;"></div>
-                        <div class="al-skeleton-line shimmer" style="width: 62%;"></div>
-                        <div class="al-skeleton-line shimmer" style="width: 30%; height: 3px; margin-top: 4px;"></div>
-                    </div>
-                    <div class="al-skeleton-actions shimmer"></div>
-                </div>
+            <div v-if="loading" class="mk-skeleton">
+                <div v-for="i in 5" :key="i" class="mk-skeleton__row"></div>
             </div>
 
-            <!-- EMPTY STATE -->
-            <div v-else-if="!filtered.length" class="al-empty">
-                <div class="al-empty__visual">
-                    <div class="al-empty__ring"></div>
-                    <div class="al-empty__icon">
-                        <i class="pi pi-chart-line"></i>
-                    </div>
-                </div>
-                <h2 class="al-empty__title">
-                    {{ filterStatus ? 'Нет анализов с выбранным статусом' : 'Анализов пока нет' }}
-                </h2>
-                <p class="al-empty__desc">
-                    {{ filterStatus ? 'Попробуйте выбрать другой фильтр или сбросьте поиск.' : 'Запустите первый маркетинговый анализ — ИИ соберёт данные по конкурентам и даст конкретные рекомендации.' }}
+            <div v-else-if="!filtered.length" class="mk-empty">
+                <div class="mk-empty__icon"><i class="pi pi-objects-column"></i></div>
+                <h2 class="mk-empty__title">{{ filterStatus ? 'Ничего не найдено' : 'Пока пусто' }}</h2>
+                <p class="mk-empty__desc">
+                    {{ filterStatus
+                        ? 'Попробуйте изменить параметры поиска или сбросить фильтры.'
+                        : 'Запустите первый анализ, и система соберёт данные за несколько минут.' }}
                 </p>
-                <div class="al-empty__actions">
-                    <button v-if="filterStatus || searchQuery" class="al-btn al-btn--ghost" @click="filterStatus = ''; searchQuery = ''">
-                        <i class="pi pi-filter-slash"></i> Сбросить фильтры
-                    </button>
-                    <button class="al-btn al-btn--primary" @click="$router.push('/marketing-analysis/v3/new')">
-                        <i class="pi pi-plus"></i> Создать анализ
-                    </button>
-                </div>
+                <button class="mk-btn mk-btn--primary" @click="$router.push('/marketing-analysis/v3/new')">
+                    <i class="pi pi-plus"></i>
+                    <span>Создать анализ</span>
+                </button>
             </div>
 
-            <!-- LIST -->
-            <TransitionGroup v-else name="al-list" tag="div" class="al-list">
+            <div v-else class="mk-list">
                 <div
-                    v-for="item in paginated" :key="analysisKey(item)"
-                    class="al-item"
-                    :class="{ 'al-item--clickable': ['COMPLETED','PROCESSING','QUEUED'].includes(item.status) }"
-                    :style="{ '--item-accent': statusStyle(item.status).accent }"
+                    v-for="item in paginated"
+                    :key="analysisKey(item)"
+                    class="mk-item mk-item--clickable"
                     @click="openAnalysis(item)"
                 >
-                    <!-- Accent stripe -->
-                    <div class="al-item__stripe" :style="{ background: statusStyle(item.status).accent }"></div>
+                    <div class="mk-item__stripe" :style="{ background: statusStyle(item.status).accent }"></div>
 
-                    <!-- Status Icon -->
-                    <div class="al-item__status-icon"
-                         :style="{ background: statusStyle(item.status).bg, border: '1px solid ' + statusStyle(item.status).border }">
-                        <i :class="statusIcon(item.status)" :style="{ color: statusStyle(item.status).color }"></i>
-                    </div>
-
-                    <!-- Content -->
-                    <div class="al-item__content">
-                        <div class="al-item__top">
-                            <h3 class="al-item__name">
-                                {{ item.requestData?.businessNiche || item.businessNiche || 'Анализ #' + (analysisKey(item) || '').slice(-6) }}
+                    <div class="mk-item__body">
+                        <div class="mk-item__top">
+                            <h3 class="mk-item__title">
+                                {{ item.requestData?.businessNiche || item.businessNiche || ('Анализ #' + (analysisKey(item) || '').slice(-6)) }}
                             </h3>
-                            <span class="al-item__badge"
-                                  :style="{ color: statusStyle(item.status).color, background: statusStyle(item.status).bg, borderColor: statusStyle(item.status).border }">
-                                <i :class="statusIcon(item.status)"></i>
-                                {{ statusLabel(item.status) }}
-                            </span>
+
+                            <div class="mk-badges">
+                                <span
+                                    class="mk-badge"
+                                    :style="{ color: statusStyle(item.status).color, background: statusStyle(item.status).bg, borderColor: statusStyle(item.status).border }"
+                                >
+                                    <i :class="statusStyle(item.status).icon"></i>
+                                    {{ statusLabel(item.status) }}
+                                </span>
+                            </div>
                         </div>
 
-                        <div class="al-item__meta">
-                            <span v-if="item.requestData?.productName || item.productName" class="al-meta-chip">
-                                <i class="pi pi-tag"></i>
-                                {{ item.requestData?.productName || item.productName }}
-                            </span>
-                            <span v-if="cityLabel(item)" class="al-meta-chip">
+                        <div class="mk-meta">
+                            <span class="mk-chip">
                                 <i class="pi pi-map-marker"></i>
-                                {{ cityLabel(item) }}
+                                {{ cityLabel(item) || '—' }}
                             </span>
-                            <span class="al-meta-chip">
-                                <i class="pi pi-calendar"></i>
+                            <span class="mk-chip">
+                                <i class="pi pi-clock"></i>
                                 {{ formatDate(item.createdAt) }}
                             </span>
                         </div>
 
-                        <!-- Progress bar for active statuses -->
-                        <div v-if="item.status === 'PROCESSING' || item.status === 'QUEUED'" class="al-item__progress">
-                            <div class="al-item__progress-track">
-                                <div class="al-item__progress-fill"
-                                     :style="{ width: item.status === 'QUEUED' ? '8%' : '55%', background: statusStyle(item.status).accent }">
-                                </div>
+                        <div v-if="['PROCESSING', 'QUEUED'].includes(item.status)" class="mk-progress">
+                            <div class="mk-progress__track">
+                                <div
+                                    class="mk-progress__fill"
+                                    :style="{ width: item.status === 'QUEUED' ? '12%' : '60%', background: statusStyle(item.status).accent }"
+                                ></div>
                             </div>
-                            <span class="al-item__progress-label">
-                                {{ item.status === 'QUEUED' ? 'Ожидание...' : 'ИИ анализирует данные...' }}
-                            </span>
+                            <span class="mk-progress__text">{{ item.status === 'QUEUED' ? 'В очереди' : 'Анализируется…' }}</span>
                         </div>
                     </div>
 
-                    <!-- Actions -->
-                    <div class="al-item__actions" @click.stop>
-                        <template v-if="item.status === 'COMPLETED'">
-                            <button class="al-action-btn al-action-btn--view" @click="openAnalysis(item)" title="Открыть анализ">
-                                <i class="pi pi-eye"></i>
-                            </button>
-                            <button class="al-action-btn al-action-btn--magic" title="Создать стратегию"
-                                    @click="$router.push(`/marketing-analysis/v3/strategy?analysisId=${analysisKey(item)}`)">
-                                <i class="pi pi-sparkles"></i>
-                            </button>
-                        </template>
-                        <button v-if="['FAILED','COMPLETED'].includes(item.status)" class="al-action-btn" title="Повторить анализ"
-                                @click="retry(item)">
+                    <div class="mk-actions" @click.stop>
+                        <button class="mk-act mk-act--open" @click="openAnalysis(item)" title="Открыть">
+                            <i class="pi pi-eye"></i>
+                        </button>
+                        <button
+                            v-if="item.status === 'COMPLETED'"
+                            class="mk-act mk-act--success"
+                            @click="$router.push(`/marketing-analysis/v3/strategy?analysisId=${analysisKey(item)}`)"
+                            title="Стратегия"
+                        >
+                            <i class="pi pi-sparkles"></i>
+                        </button>
+                        <button
+                            v-if="['FAILED', 'COMPLETED'].includes(item.status)"
+                            class="mk-act mk-act--open"
+                            @click="retry(item)"
+                            title="Повторить"
+                        >
                             <i class="pi pi-refresh"></i>
                         </button>
-                        <button class="al-action-btn al-action-btn--danger" title="Удалить анализ"
-                                @click="confirmDelete(item)">
+                        <button class="mk-act mk-act--danger" @click="confirmDelete(item)" title="Удалить">
                             <i class="pi pi-trash"></i>
                         </button>
-                    </div>
-
-                    <!-- Hover arrow -->
-                    <div v-if="['COMPLETED','PROCESSING','QUEUED'].includes(item.status)" class="al-item__arrow">
-                        <i class="pi pi-angle-right"></i>
+                        <button class="mk-act mk-act--open" @click="openAnalysis(item)" title="Вперёд">
+                            <i class="pi pi-angle-right"></i>
+                        </button>
                     </div>
                 </div>
-            </TransitionGroup>
+            </div>
 
-            <!-- PAGINATION -->
-            <div v-if="filtered.length > pageSize" class="al-pagination">
-                <span class="al-pagination__info">
+            <div v-if="filtered.length > pageSize" class="mk-section-head">
+                <div class="mk-section-label">
                     Показано {{ (currentPage - 1) * pageSize + 1 }}–{{ Math.min(currentPage * pageSize, filtered.length) }}
-                    из {{ filtered.length }} анализов
-                </span>
+                    из {{ filtered.length }}
+                </div>
                 <Paginator
                     :rows="pageSize"
                     :totalRecords="filtered.length"
@@ -343,626 +328,6 @@ onMounted(load);
                     template="PrevPageLink PageLinks NextPageLink"
                 />
             </div>
-
         </div>
     </div>
 </template>
-
-<style scoped>
-/* ──────────────────── PAGE ──────────────────── */
-.al-page {
-    background: #F5F8FF;
-    background-image:
-        radial-gradient(at 0% 0%, rgba(45,123,255,0.07) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(16,185,129,0.05) 0px, transparent 50%);
-    min-height: 100vh;
-    font-family: 'Onest', sans-serif;
-    padding: 36px 24px 100px;
-    position: relative;
-    overflow-x: hidden;
-}
-
-.al-glow {
-    position: absolute;
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: 0;
-}
-.al-glow--blue {
-    top: -150px; right: -100px;
-    width: 500px; height: 500px;
-    background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 70%);
-}
-.al-glow--green {
-    bottom: -100px; left: -80px;
-    width: 400px; height: 400px;
-    background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 70%);
-}
-
-.al-inner {
-    max-width: 1100px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-}
-
-/* ──────────────────── HEADER ──────────────────── */
-.al-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 32px;
-    flex-wrap: wrap;
-}
-.al-header__left {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-.al-header__right {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
-
-.al-back-btn {
-    width: 40px;
-    height: 40px;
-    border-radius: 12px;
-    border: 1px solid rgba(45,123,255,0.2);
-    background: #fff;
-    color: #64748B;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-    flex-shrink: 0;
-    box-shadow: 0 2px 8px rgba(45,123,255,0.06);
-}
-.al-back-btn:hover {
-    background: rgba(45,123,255,0.06);
-    color: #2D7BFF;
-    border-color: rgba(45,123,255,0.35);
-    transform: translateX(-2px);
-}
-
-.al-eyebrow {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 10px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: #2D7BFF;
-    margin-bottom: 5px;
-}
-.al-eyebrow__dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #2D7BFF;
-    box-shadow: 0 0 8px rgba(45,123,255,0.5);
-    animation: blink 2s infinite;
-}
-@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.4} }
-
-.al-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 26px;
-    font-weight: 900;
-    color: #0F172A;
-    line-height: 1.15;
-    letter-spacing: -0.02em;
-}
-
-/* ──────────────────── BUTTONS ──────────────────── */
-.al-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 10px 18px;
-    border-radius: 12px;
-    font-size: 13px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
-    border: 1px solid transparent;
-    font-family: 'Onest', sans-serif;
-    white-space: nowrap;
-}
-.al-btn--primary {
-    background: #2D7BFF;
-    color: #fff;
-    border-color: #2D7BFF;
-    box-shadow: 0 4px 16px rgba(45,123,255,0.28);
-}
-.al-btn--primary:hover {
-    background: #1a6bff;
-    box-shadow: 0 8px 28px rgba(45,123,255,0.42);
-    transform: translateY(-2px);
-}
-.al-btn--ghost {
-    background: #fff;
-    color: #334155;
-    border-color: rgba(45,123,255,0.2);
-    box-shadow: 0 2px 8px rgba(45,123,255,0.06);
-}
-.al-btn--ghost:hover {
-    background: rgba(45,123,255,0.05);
-    color: #0F172A;
-    border-color: rgba(45,123,255,0.35);
-}
-
-/* ──────────────────── STATS ROW ──────────────────── */
-.al-stats-row {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 28px;
-    flex-wrap: wrap;
-}
-.al-stat-card {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 14px 18px;
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.14);
-    border-radius: 14px;
-    flex: 1;
-    min-width: 130px;
-    transition: all 0.22s;
-    box-shadow: 0 2px 8px rgba(45,123,255,0.05);
-}
-.al-stat-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 24px rgba(45,123,255,0.12);
-}
-.al-stat-card--total {
-    border-color: rgba(45,123,255,0.2);
-}
-.al-stat-card__icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 15px;
-    flex-shrink: 0;
-}
-.al-stat-card__body {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-.al-stat-card__num {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 20px;
-    font-weight: 900;
-    line-height: 1;
-}
-.al-stat-card__label {
-    font-size: 10px;
-    color: #94A3B8;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    white-space: nowrap;
-}
-
-/* ──────────────────── TOOLBAR ──────────────────── */
-.al-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-}
-
-.al-search {
-    position: relative;
-    flex: 1;
-    min-width: 200px;
-    max-width: 340px;
-}
-.al-search__icon {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #94A3B8;
-    font-size: 13px;
-    pointer-events: none;
-}
-.al-search__input {
-    width: 100%;
-    padding: 10px 38px 10px 40px;
-    border-radius: 12px;
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.18);
-    color: #0F172A;
-    font-size: 13px;
-    font-family: 'Onest', sans-serif;
-    outline: none;
-    transition: all 0.2s;
-    box-shadow: 0 2px 8px rgba(45,123,255,0.05);
-}
-.al-search__input:focus {
-    border-color: rgba(45,123,255,0.45);
-    box-shadow: 0 0 0 3px rgba(45,123,255,0.08), 0 2px 8px rgba(45,123,255,0.08);
-}
-.al-search__input::placeholder { color: #94A3B8; }
-.al-search__clear {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: none;
-    background: rgba(100,116,139,0.12);
-    color: #64748B;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-size: 10px;
-    transition: all 0.2s;
-}
-.al-search__clear:hover { background: rgba(239,68,68,0.12); color: #EF4444; }
-
-.al-pills {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-.al-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 7px 14px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-    border: 1px solid rgba(45,123,255,0.16);
-    background: #fff;
-    color: #64748B;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-family: 'Onest', sans-serif;
-}
-.al-pill:hover { border-color: rgba(45,123,255,0.35); color: #334155; background: rgba(45,123,255,0.04); }
-.al-pill--active { background: #2D7BFF; border-color: #2D7BFF; color: #fff; box-shadow: 0 4px 14px rgba(45,123,255,0.3); }
-.al-pill--active:hover { background: #1a6bff; }
-.al-pill__badge {
-    background: rgba(255,255,255,0.25);
-    border-radius: 999px;
-    padding: 1px 6px;
-    font-size: 9px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
-}
-.al-pill--active .al-pill__badge { background: rgba(255,255,255,0.3); }
-
-.al-refresh-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 9px 14px;
-    border-radius: 10px;
-    border: 1px solid rgba(45,123,255,0.18);
-    background: #fff;
-    color: #64748B;
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-family: 'Onest', sans-serif;
-    white-space: nowrap;
-}
-.al-refresh-btn:hover { background: rgba(45,123,255,0.05); color: #2D7BFF; border-color: rgba(45,123,255,0.3); }
-
-/* ──────────────────── SKELETON ──────────────────── */
-.al-skeleton-list { display: flex; flex-direction: column; gap: 10px; }
-.al-skeleton-item {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    padding: 20px 22px;
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.1);
-    border-radius: 16px;
-}
-.al-skeleton-icon {
-    width: 46px;
-    height: 46px;
-    border-radius: 13px;
-    flex-shrink: 0;
-    background: rgba(45,123,255,0.07);
-}
-.al-skeleton-lines {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 9px;
-}
-.al-skeleton-line {
-    height: 13px;
-    border-radius: 7px;
-    background: rgba(45,123,255,0.07);
-}
-.al-skeleton-actions {
-    width: 80px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(45,123,255,0.07);
-}
-
-.shimmer {
-    position: relative;
-    overflow: hidden;
-}
-.shimmer::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, transparent, rgba(45,123,255,0.07), transparent);
-    animation: shimmer 1.6s infinite;
-}
-@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
-
-/* ──────────────────── EMPTY ──────────────────── */
-.al-empty {
-    text-align: center;
-    padding: 80px 24px;
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.14);
-    border-radius: 24px;
-    box-shadow: 0 4px 24px rgba(45,123,255,0.06);
-}
-.al-empty__visual {
-    position: relative;
-    width: 80px;
-    height: 80px;
-    margin: 0 auto 24px;
-}
-.al-empty__ring {
-    position: absolute;
-    inset: -6px;
-    border-radius: 50%;
-    border: 2px solid rgba(45,123,255,0.15);
-    animation: spin-slow 8s linear infinite;
-}
-@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
-.al-empty__icon {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
-    background: rgba(45,123,255,0.08);
-    border: 1px solid rgba(45,123,255,0.18);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    color: #2D7BFF;
-}
-.al-empty__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 20px;
-    font-weight: 800;
-    color: #0F172A;
-    margin-bottom: 10px;
-}
-.al-empty__desc {
-    font-size: 13.5px;
-    color: #64748B;
-    max-width: 420px;
-    margin: 0 auto 28px;
-    line-height: 1.65;
-}
-.al-empty__actions {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-/* ──────────────────── LIST ITEMS ──────────────────── */
-.al-list { display: flex; flex-direction: column; gap: 10px; }
-
-.al-item {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 18px 20px 18px 24px;
-    border-radius: 16px;
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.12);
-    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(45,123,255,0.04);
-}
-.al-item--clickable { cursor: pointer; }
-.al-item--clickable:hover {
-    background: #FAFCFF;
-    border-color: rgba(45,123,255,0.28);
-    transform: translateY(-3px);
-    box-shadow: 0 12px 32px rgba(45,123,255,0.1);
-}
-
-/* Left accent stripe */
-.al-item__stripe {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    border-radius: 4px 0 0 4px;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-}
-.al-item--clickable:hover .al-item__stripe { opacity: 1; }
-
-.al-item__status-icon {
-    width: 46px;
-    height: 46px;
-    border-radius: 13px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    flex-shrink: 0;
-    transition: transform 0.2s;
-}
-.al-item--clickable:hover .al-item__status-icon { transform: scale(1.08); }
-
-.al-item__content { flex: 1; min-width: 0; }
-.al-item__top {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-bottom: 7px;
-}
-.al-item__name {
-    font-weight: 700;
-    font-size: 14.5px;
-    color: #0F172A;
-    line-height: 1.3;
-    flex: 1;
-    min-width: 0;
-}
-.al-item__badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 10px;
-    border-radius: 999px;
-    font-size: 9.5px;
-    font-weight: 800;
-    font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    border: 1px solid;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-.al-item__badge i { font-size: 8px; }
-
-.al-item__meta {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-.al-meta-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11.5px;
-    color: #64748B;
-    font-weight: 500;
-    background: rgba(100,116,139,0.07);
-    border: 1px solid rgba(100,116,139,0.12);
-    padding: 3px 9px;
-    border-radius: 8px;
-}
-.al-meta-chip i { font-size: 10px; color: #94A3B8; }
-
-/* Progress */
-.al-item__progress {
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.al-item__progress-track {
-    flex: 1;
-    height: 4px;
-    background: rgba(45,123,255,0.1);
-    border-radius: 999px;
-    overflow: hidden;
-}
-.al-item__progress-fill {
-    height: 100%;
-    border-radius: 999px;
-    animation: progress-anim 2.5s ease-in-out infinite;
-}
-@keyframes progress-anim { 0%,100%{opacity:1}50%{opacity:0.55} }
-.al-item__progress-label {
-    font-size: 10.5px;
-    color: #94A3B8;
-    font-weight: 600;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-/* Actions */
-.al-item__actions {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    flex-shrink: 0;
-}
-.al-action-btn {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    border: 1px solid rgba(45,123,255,0.14);
-    background: rgba(45,123,255,0.04);
-    color: #64748B;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-    font-size: 13px;
-}
-.al-action-btn:hover { background: rgba(45,123,255,0.09); color: #2D7BFF; border-color: rgba(45,123,255,0.3); transform: scale(1.08); }
-.al-action-btn--view:hover { background: rgba(45,123,255,0.1); color: #2D7BFF; border-color: rgba(45,123,255,0.3); }
-.al-action-btn--magic:hover { background: rgba(168,85,247,0.1); color: #8B5CF6; border-color: rgba(168,85,247,0.3); }
-.al-action-btn--danger:hover { background: rgba(239,68,68,0.1); color: #EF4444; border-color: rgba(239,68,68,0.3); }
-
-/* Arrow icon */
-.al-item__arrow {
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #CBD5E1;
-    font-size: 14px;
-    transition: all 0.2s;
-    flex-shrink: 0;
-}
-.al-item--clickable:hover .al-item__arrow { color: #2D7BFF; transform: translateX(3px); }
-
-/* ──────────────────── PAGINATION ──────────────────── */
-.al-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 20px;
-    margin-top: 8px;
-    flex-wrap: wrap;
-    gap: 12px;
-    border-top: 1px solid rgba(45,123,255,0.1);
-}
-.al-pagination__info {
-    font-size: 12px;
-    color: #94A3B8;
-    font-weight: 500;
-}
-
-/* ──────────────────── TRANSITIONS ──────────────────── */
-.al-list-enter-active, .al-list-leave-active { transition: all 0.25s ease; }
-.al-list-enter-from, .al-list-leave-to { opacity: 0; transform: translateY(-8px); }
-</style>
diff --git a/src/views/pages/marketing/MarketingMain.vue b/src/views/pages/marketing/MarketingMain.vue
index ae33435..f9dfc6f 100644
--- a/src/views/pages/marketing/MarketingMain.vue
+++ b/src/views/pages/marketing/MarketingMain.vue
@@ -1,447 +1,835 @@
 <script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+
 const router = useRouter();
-const nav = (path, query) => query ? router.push({ path, query }) : router.push(path);
-const navExternal = (url) => window.open(url, '_blank');
+
+const stats = ref({ analyses: 0, strategies: 0, campaigns: 0, score: 0 });
+
+const statCards = [
+    { key: 'analyses',  target: 247, label: 'АНАЛИЗОВ СОЗДАНО',  change: '+18 ЭТОТ МЕСЯЦ',          icon: 'pi-chart-bar', tone: 'blue'   },
+    { key: 'strategies',target: 38,  label: 'СТРАТЕГИЙ ГОТОВО',  change: '+5 ЭТОТ МЕСЯЦ',            icon: 'pi-bolt',      tone: 'green'  },
+    { key: 'campaigns', target: 12,  label: 'КАМПАНИЙ АКТИВНО',  change: '+3 ЭТОТ МЕСЯЦ',            icon: 'pi-megaphone', tone: 'violet' },
+    { key: 'score',     target: 97,  label: 'ИИ ТОЧНОСТЬ',       change: 'СРЕДНЕЕ ПО ПЛАТФОРМЕ',     icon: 'pi-star',      tone: 'orange', suffix: '%' }
+];
+
+const toolCards = [
+    {
+        title: 'Сделать анализ',
+        description: 'Опишите бизнес — ИИ соберёт данные по конкурентам, целевой аудитории и предложит лучшее позиционирование',
+        meta: 'GPT-4o · Gemini 2.0',
+        icon: 'pi-search',
+        tone: 'blue',
+        route: '/marketing-analysis/v3/new'
+    },
+    {
+        title: 'Готовые анализы',
+        description: 'Библиотека ваших исследований: развёрнутая аналитика, инсайты по конкурентам и полный экспорт данных',
+        meta: '247 анализов · 94% успешно',
+        icon: 'pi-inbox',
+        tone: 'violet',
+        route: '/marketing-analysis/v3'
+    },
+    {
+        title: 'Сгенерировать стратегию',
+        description: 'Контент-фабрика. ИИ выберет соцсети, напишет посты и создаст креативы на основе анализа рынка',
+        meta: 'ТРЕБУЕТСЯ АНАЛИЗ',
+        icon: 'pi-sparkles',
+        tone: 'green',
+        route: '/marketing-analysis/v3/strategies',
+        social: true,
+        badge: true
+    },
+    {
+        title: 'Мои стратегии',
+        description: 'Все созданные стратегии: сегменты, офферы, CTA, медиа-карты и детализированные бюджеты',
+        meta: '38 стратегий готово',
+        icon: 'pi-th-large',
+        tone: 'orange',
+        route: '/marketing-analysis/v3/strategies'
+    },
+    {
+        title: 'ИИ-Таргетолог',
+        description: 'Запуск и оптимизация рекламных кампаний в Meta, Instagram и TikTok — всё в одном интерфейсе',
+        meta: 'API BETA · НОВОЕ',
+        icon: 'pi-bullseye',
+        tone: 'indigo',
+        route: '/marketing-analysis/v3/targetologist/dashboard',
+        badge: true
+    },
+    {
+        title: 'CRM-система',
+        description: 'Управление клиентской базой, сделками и воронкой продаж в едином рабочем пространстве',
+        meta: 'ВНЕШНИЙ СЕРВИС',
+        icon: 'pi-users',
+        tone: 'teal',
+        route: 'https://call-center.konturai.kz/',
+        type: 'external'
+    }
+];
+
+const timers = [];
+const frames = [];
+
+const animateNumber = (key, target, delay = 0) => {
+    const timer = window.setTimeout(() => {
+        const start = performance.now();
+        const duration = 1800;
+        const step = (now) => {
+            const progress = Math.min((now - start) / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 4);
+            stats.value[key] = Math.round(target * eased);
+            if (progress < 1) frames.push(requestAnimationFrame(step));
+        };
+        frames.push(requestAnimationFrame(step));
+    }, delay);
+    timers.push(timer);
+};
+
+const openCard = (card) => {
+    if (card.type === 'external') {
+        window.open(card.route, '_blank', 'noopener,noreferrer');
+        return;
+    }
+    router.push(card.route);
+};
+
+onMounted(() => {
+    statCards.forEach((card, index) => animateNumber(card.key, card.target, index * 150));
+});
+
+onBeforeUnmount(() => {
+    timers.forEach((t) => clearTimeout(t));
+    frames.forEach((f) => cancelAnimationFrame(f));
+});
 </script>
 
 <template>
-    <div class="mkt-hub">
+    <section class="hub">
+        <div class="hub__dots"></div>
+        <div class="hub__orb hub__orb--a"></div>
+        <div class="hub__orb hub__orb--b"></div>
+        <div class="hub__orb hub__orb--c"></div>
 
-        <!-- AMBIENT GLOW (Premium Soft Mesh) -->
-        <div class="mkt-hub__glow1"></div>
-        <div class="mkt-hub__glow2"></div>
-        <div class="mkt-hub__glow3"></div>
+        <div class="hub__container">
 
-        <div class="mkt-hub__inner">
-
-            <!-- HEADER -->
-            <div class="mkt-hub__header">
-                <div class="mkt-hub__badge">
-                    <span class="mkt-hub__badge-dot"></span>
-                    KAI Intelligence · Платформа 2026
-                </div>
-                <h1 class="mkt-hub__title">Маркетинг-Хаб</h1>
-                <p class="mkt-hub__sub">Исследования рынка, генерация стратегий и управление рекламными кампаниями — всё в одном месте. Управляйте ростом вашего бизнеса легко и эффективно.</p>
-            </div>
-
-            <!-- GRID -->
-            <div class="mkt-hub__grid">
-
-                <!-- Создать анализ -->
-                <div class="mkt-card mkt-card--blue" @click="nav('/marketing-analysis/v3/new')">
-                    <div class="mkt-card__icon" style="background:rgba(45,123,255,0.15);color:#2D7BFF;">
-                        <i class="pi pi-search"></i>
+            <!-- HERO -->
+            <section class="hero">
+                <div class="hero__left">
+                    <div class="hero__badge">
+                        <span class="hero__badge-dot"></span>
+                        KAI Intelligence · ПЛАТФОРМА 2026
                     </div>
-                    <h3 class="mkt-card__title">Сделать анализ</h3>
-                    <p class="mkt-card__desc">Опишите бизнес — ИИ соберёт данные по конкурентам, ЦА и предложит лучшее позиционирование</p>
-                    <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
-                </div>
-
-                <!-- Готовые анализы -->
-                <div class="mkt-card mkt-card--purple" @click="nav('/marketing-analysis/v3')">
-                    <div class="mkt-card__icon" style="background:rgba(168,85,247,0.15);color:#A855F7;">
-                        <i class="pi pi-inbox"></i>
-                    </div>
-                    <h3 class="mkt-card__title">Готовые анализы</h3>
-                    <p class="mkt-card__desc">Библиотека ваших исследований с развёрнутой аналитикой, инсайтами и экспортом</p>
-                    <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
-                </div>
-
-                <!-- Сгенерировать стратегию -->
-                <div class="mkt-card mkt-card--green" @click="nav('/marketing-analysis/v3/new')">
-                    <div class="mkt-card__glow"></div>
-                    <div class="mkt-card__icon" style="background:rgba(16,185,129,0.15);color:#10B981;">
-                        <i class="pi pi-bolt"></i>
-                    </div>
-                    <h3 class="mkt-card__title">Сгенерировать стратегию</h3>
-                    <p class="mkt-card__desc">Контент-фабрика. ИИ выберет соцсети, напишет посты и отрисует картинки на основе анализа</p>
-                    <div class="mkt-card__tag mkt-card__tag--green">Требуется анализ</div>
-                </div>
-
-                <!-- Мои стратегии -->
-                <div class="mkt-card mkt-card--orange" @click="nav('/marketing-analysis/v3/strategies')">
-                    <div class="mkt-card__icon" style="background:rgba(255,122,45,0.15);color:#FF7A2D;">
-                        <i class="pi pi-images"></i>
-                    </div>
-                    <h3 class="mkt-card__title">Мои стратегии</h3>
-                    <p class="mkt-card__desc">Список сгенерированных контент-планов, медиа-активов и AI-обоснований</p>
-                    <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
-                </div>
-
-                <!-- ИИ-Таргетолог (внутренний) - Поменяли местами, теперь идет перед CRM -->
-                <div class="mkt-card mkt-card--blue" @click="nav('/marketing-analysis/v3/targetologist/dashboard')">
-                    <div class="mkt-card__glow"></div>
-                    <div class="mkt-card__icon" style="background:rgba(45,123,255,0.15);color:#2D7BFF;">
-                        <i class="pi pi-bullseye"></i>
-                    </div>
-                    <h3 class="mkt-card__title">ИИ-Таргетолог</h3>
-                    <p class="mkt-card__desc">Развёртывание рекламных кампаний — ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok</p>
-                    <div class="mkt-card__tag mkt-card__tag--blue">Бета-режим API</div>
-                    <div class="mkt-card__arrow"><i class="pi pi-arrow-right"></i></div>
-                </div>
-
-                <!-- CRM-система (внешняя ссылка) - Поменяли местами, теперь в конце -->
-                <div class="mkt-card mkt-card--teal" @click="navExternal('https://call-center.konturai.kz/')">
-                    <div class="mkt-card__glow"></div>
-                    <div class="mkt-card__icon" style="background:rgba(20,184,166,0.15);color:#14B8A6;">
-                        <i class="pi pi-users"></i>
-                    </div>
-                    <h3 class="mkt-card__title">CRM-система</h3>
-                    <p class="mkt-card__desc">Управление клиентской базой, сделками и воронкой продаж в едином пространстве</p>
-                    <div class="mkt-card__external-badge">
-                        <i class="pi pi-external-link"></i>
-                        Внешний сервис
+                    <h1 class="hero__title">Маркетинг-<em>Хаб</em></h1>
+                    <p class="hero__subtitle">
+                        Исследования рынка, генерация стратегий и управление рекламными кампаниями —
+                        всё в одном месте. Управляйте ростом бизнеса легко и эффективно.
+                    </p>
+                    <div class="hero__actions">
+                        <button class="btn btn--primary" type="button" @click="router.push('/marketing-analysis/v3/new')">
+                            <i class="pi pi-sparkles"></i>
+                            Новый анализ
+                        </button>
+                        <button class="btn btn--secondary" type="button" @click="router.push('/marketing-analysis/v3')">
+                            <i class="pi pi-briefcase"></i>
+                            Мои анализы
+                        </button>
                     </div>
                 </div>
 
-            </div>
+                <div class="hero__right">
+                    <article v-for="(card, i) in statCards" :key="card.key" class="stat" :class="`stat--${card.tone}`" :style="{ '--delay': `${i * 0.1}s` }">
+                        <div class="stat__top">
+                            <div class="stat__icon-wrap"><i class="pi" :class="card.icon"></i></div>
+                            <div v-if="card.key === 'analyses'" class="stat__spark stat__spark--blue">
+                                <span></span><span></span><span></span><span></span><span></span>
+                            </div>
+                            <div v-else-if="card.key === 'strategies'" class="stat__spark stat__spark--green">
+                                <span></span><span></span><span></span><span></span><span></span>
+                            </div>
+                            <div v-else-if="card.key === 'campaigns'" class="stat__dots">
+                                <span v-for="j in 9" :key="j" :style="{ '--di': j }"></span>
+                            </div>
+                            <div v-else class="stat__arc">
+                                <svg viewBox="0 0 46 46" fill="none">
+                                    <circle cx="23" cy="23" r="18" stroke="rgba(240,140,70,0.18)" stroke-width="4"/>
+                                    <circle cx="23" cy="23" r="18" stroke="url(#og)" stroke-width="4"
+                                        stroke-dasharray="113"
+                                        :stroke-dashoffset="113 - (113 * stats.score / 100)"
+                                        stroke-linecap="round"
+                                        style="transition:stroke-dashoffset 1.6s ease;transform:rotate(-90deg);transform-origin:center"/>
+                                    <defs>
+                                        <linearGradient id="og" x1="0" y1="0" x2="1" y2="1">
+                                            <stop offset="0%" stop-color="#f8a053"/>
+                                            <stop offset="100%" stop-color="#ef6d3a"/>
+                                        </linearGradient>
+                                    </defs>
+                                </svg>
+                            </div>
+                        </div>
+                        <div class="stat__value">{{ stats[card.key] }}<sup v-if="card.suffix">{{ card.suffix }}</sup></div>
+                        <div class="stat__label">{{ card.label }}</div>
+                        <div class="stat__change">{{ card.change }}</div>
+                    </article>
+                </div>
+            </section>
 
+            <!-- DIVIDER -->
+            <div class="divider"><span>ИНСТРУМЕНТЫ ПЛАТФОРМЫ</span></div>
+
+            <!-- TOOLS -->
+            <section class="tools">
+                <button
+                    v-for="(card, i) in toolCards"
+                    :key="card.title"
+                    class="tool"
+                    :class="`tool--${card.tone}`"
+                    :style="{ '--delay': `${i * 0.08}s` }"
+                    type="button"
+                    @click="openCard(card)"
+                >
+                    <div class="tool__glow"></div>
+
+                    <div class="tool__head">
+                        <div class="tool__icon"><i class="pi" :class="card.icon"></i></div>
+                        <div v-if="card.social" class="tool__socials">
+                            <span title="Instagram"><i class="pi pi-instagram"></i></span>
+                            <span title="Facebook"><i class="pi pi-facebook"></i></span>
+                            <span title="TikTok"><i class="pi pi-tiktok"></i></span>
+                            <span title="YouTube"><i class="pi pi-youtube"></i></span>
+                            <span title="Telegram"><i class="pi pi-telegram"></i></span>
+                        </div>
+                        <div v-else-if="card.type === 'external'" class="tool__ext"><i class="pi pi-external-link"></i></div>
+                    </div>
+
+                    <h3 class="tool__title">{{ card.title }}</h3>
+                    <p class="tool__desc">{{ card.description }}</p>
+
+                    <div class="tool__footer">
+                        <span v-if="card.badge" class="tool__badge">
+                            <span class="tool__badge-dot"></span>
+                            {{ card.meta }}
+                        </span>
+                        <span v-else class="tool__meta">{{ card.meta }}</span>
+                        <i class="pi pi-arrow-right tool__arrow"></i>
+                    </div>
+                </button>
+            </section>
+
+            <footer class="hub__footer">
+                <span><i class="pi pi-circle-fill" style="font-size:6px;color:#10B981;vertical-align:middle"></i> Все системы работают</span>
+                <span>GPT-4o · Gemini 2.0 Pro · Claude 3.5</span>
+                <span>Данные защищены · ISO 27001</span>
+                <span>KAI Platform v6.0 · 2026</span>
+            </footer>
         </div>
-    </div>
+    </section>
 </template>
 
 <style scoped>
-/* ───── Page layout ───── */
-.mkt-hub {
-    background: #F8FAFC; /* Clean, slightly cool white */
-    min-height: 100vh;
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
+
+/* ─── BASE ───────────────────────────────────────────────────────────────── */
+.hub {
     font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
+    min-height: 100vh;
+    padding: 32px 0 48px;
+    background: linear-gradient(180deg, #f0f4ff 0%, #f4f7ff 100%);
+    color: #0f172a;
     position: relative;
     overflow: hidden;
-    padding: 80px 32px 100px;
-    color: #0F172A;
 }
 
-/* Ambient premium mesh background effects */
-.mkt-hub__glow1 {
-    position: absolute;
-    top: -150px;
-    left: -100px;
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, rgba(45, 123, 255, 0.08) 0%, transparent 70%);
-    pointer-events: none;
-    animation: float-glow 15s ease-in-out infinite alternate;
-}
-.mkt-hub__glow2 {
-    position: absolute;
-    top: 20%;
-    right: -200px;
-    width: 800px;
-    height: 800px;
-    background: radial-gradient(circle, rgba(168, 85, 247, 0.06) 0%, transparent 60%);
-    pointer-events: none;
-    animation: float-glow 20s ease-in-out infinite alternate-reverse;
-}
-.mkt-hub__glow3 {
-    position: absolute;
-    bottom: -100px;
-    left: 20%;
-    width: 700px;
-    height: 700px;
-    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
-    pointer-events: none;
-    animation: float-glow 18s ease-in-out infinite alternate;
-}
-
-@keyframes float-glow {
-    0% { transform: translate(0, 0) scale(1); }
-    100% { transform: translate(40px, -40px) scale(1.1); }
-}
-
-.mkt-hub__inner {
-    max-width: 1200px;
-    margin: 0 auto;
-    position: relative;
-    z-index: 1;
-}
-
-/* ───── Header ───── */
-.mkt-hub__header {
-    text-align: center;
-    margin-bottom: 72px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.mkt-hub__badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 18px;
-    border-radius: 999px;
-    border: 1px solid rgba(45,123,255,0.2);
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
-    font-size: 11px;
-    font-weight: 700;
-    font-family: 'Onest', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: #2D7BFF;
-    margin-bottom: 24px;
-    box-shadow: 0 4px 12px rgba(45,123,255,0.05);
-}
-
-.mkt-hub__badge-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #2D7BFF;
-    box-shadow: 0 0 10px rgba(45,123,255,0.6);
-    animation: pulse-dot 2s ease-in-out infinite;
-}
-@keyframes pulse-dot {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.85); }
-}
-
-.mkt-hub__title {
-    font-family: 'Onest', sans-serif;
-    font-size: 52px;
-    font-weight: 800;
-    color: #0F172A;
-    letter-spacing: -0.03em;
-    line-height: 1.1;
-    margin-bottom: 20px;
-}
-
-.mkt-hub__sub {
-    font-size: 16px;
-    color: #475569;
-    max-width: 620px;
-    margin: 0 auto;
-    line-height: 1.6;
-    font-weight: 400;
-}
-
-/* ───── Grid ───── */
-.mkt-hub__grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-    margin-bottom: 24px;
-}
-@media (max-width: 1024px) {
-    .mkt-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
-}
-@media (max-width: 640px) {
-    .mkt-hub__grid { grid-template-columns: 1fr; }
-    .mkt-hub { padding: 40px 20px 70px; }
-    .mkt-hub__title { font-size: 36px; }
-    .mkt-hub__header { margin-bottom: 40px; }
-}
-
-/* ───── Glassmorphism Cards ───── */
-.mkt-card {
-    background: rgba(255, 255, 255, 0.75);
-    border: 1px solid rgba(255, 255, 255, 1);
-    backdrop-filter: blur(20px);
-    border-radius: 28px;
-    padding: 36px;
-    cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    box-shadow:
-        0 4px 6px rgba(0, 0, 0, 0.02),
-        0 12px 24px rgba(0, 0, 0, 0.03);
-    display: flex;
-    flex-direction: column;
-    min-height: 250px;
-}
-
-/* Card hover overlay */
-.mkt-card::before {
-    content: '';
-    position: absolute;
+/* ─── BACKGROUND ─────────────────────────────────────────────────────────── */
+.hub__dots {
+    position: fixed;
     inset: 0;
-    opacity: 0;
-    transition: opacity 0.4s;
-    border-radius: 28px;
+    z-index: 0;
     pointer-events: none;
+    background-image: radial-gradient(circle, rgba(45, 123, 255, 0.055) 1px, transparent 1px);
+    background-size: 26px 26px;
+    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
+    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
+}
+
+.hub__orb {
+    position: fixed;
+    border-radius: 999px;
+    filter: blur(80px);
+    pointer-events: none;
+    animation: orbDrift 12s ease-in-out infinite;
     z-index: 0;
 }
-.mkt-card::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, transparent, currentColor, transparent);
-    opacity: 0;
-    transition: opacity 0.4s;
-}
-.mkt-card:hover {
-    transform: translateY(-8px);
-    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 
-        0 24px 48px rgba(0, 0, 0, 0.06),
-        0 12px 20px rgba(0, 0, 0, 0.04);
-}
-.mkt-card:hover::before { opacity: 1; }
-.mkt-card:hover::after { opacity: 1; }
 
-/* Card color variants */
-.mkt-card--blue { color: #2D7BFF; }
-.mkt-card--blue::before { background: radial-gradient(circle at top right, rgba(45,123,255,0.06), transparent 70%); }
-
-.mkt-card--purple { color: #8B5CF6; }
-.mkt-card--purple::before { background: radial-gradient(circle at top right, rgba(139,92,246,0.06), transparent 70%); }
-
-.mkt-card--green { color: #10B981; }
-.mkt-card--green::before { background: radial-gradient(circle at top right, rgba(16,185,129,0.06), transparent 70%); }
-
-.mkt-card--orange { color: #F97316; }
-.mkt-card--orange::before { background: radial-gradient(circle at top right, rgba(249,115,22,0.06), transparent 70%); }
-
-.mkt-card--teal { color: #14B8A6; }
-.mkt-card--teal::before { background: radial-gradient(circle at top right, rgba(20,184,166,0.06), transparent 70%); }
-
-/* Card content */
-.mkt-card > * { position: relative; z-index: 2; }
-
-.mkt-card__glow {
-    position: absolute;
-    top: -40px;
-    right: -40px;
-    width: 160px;
-    height: 160px;
-    background: radial-gradient(circle, currentColor, transparent 70%);
-    opacity: 0.05;
-    pointer-events: none;
-    transition: opacity 0.4s, transform 0.4s;
-    z-index: 1;
-}
-.mkt-card:hover .mkt-card__glow {
-    opacity: 0.12;
-    transform: scale(1.3);
+.hub__orb--a {
+    width: 460px;
+    height: 380px;
+    left: -120px;
+    top: 40px;
+    background: radial-gradient(circle, rgba(100, 153, 255, 0.22), transparent 70%);
+    animation-duration: 14s;
 }
 
-.mkt-card__icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28px;
-    margin-bottom: 28px;
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
-}
-.mkt-card:hover .mkt-card__icon { 
-    transform: scale(1.1) rotate(-5deg); 
+.hub__orb--b {
+    width: 360px;
+    height: 340px;
+    right: -100px;
+    top: 100px;
+    background: radial-gradient(circle, rgba(90, 218, 170, 0.18), transparent 70%);
+    animation-duration: 11s;
+    animation-delay: -4s;
 }
 
-.mkt-card__title {
-    font-family: 'Onest', sans-serif;
-    font-size: 20px;
-    font-weight: 700;
-    color: #0F172A;
-    margin-bottom: 14px;
-    line-height: 1.3;
-    letter-spacing: -0.01em;
+.hub__orb--c {
+    width: 280px;
+    height: 280px;
+    left: 40%;
+    bottom: 80px;
+    background: radial-gradient(circle, rgba(166, 138, 255, 0.14), transparent 70%);
+    animation-duration: 16s;
+    animation-delay: -8s;
 }
 
-.mkt-card__desc {
-    font-size: 14px;
-    color: #475569;
-    line-height: 1.7;
-    font-weight: 400;
+@keyframes orbDrift {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(14px, -18px) scale(1.04); }
+    66% { transform: translate(-10px, 12px) scale(0.97); }
 }
 
-.mkt-card__arrow {
-    position: absolute;
-    bottom: 32px;
-    right: 32px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: rgba(0,0,0,0.03);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: currentColor;
-    font-size: 16px;
-    opacity: 0;
-    transform: translateX(-12px);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.mkt-card:hover .mkt-card__arrow {
-    opacity: 1;
-    transform: translateX(0);
-    background: currentColor;
-    color: #FFFFFF;
+/* ─── CONTAINER ──────────────────────────────────────────────────────────── */
+.hub__container {
+    width: min(1300px, calc(100vw - 44px));
+    margin: 0 auto;
+    position: relative;
+    z-index: 2;
 }
 
-.mkt-card__tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    margin-top: auto;
-    padding: 6px 12px;
-    border-radius: 999px;
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    align-self: flex-start;
-}
-.mkt-card__tag--green {
-    border: 1px solid rgba(16,185,129,0.3);
-    background: rgba(16,185,129,0.1);
-    color: #10B981;
-}
-.mkt-card__tag--blue {
-    border: 1px solid rgba(45,123,255,0.3);
-    background: rgba(45,123,255,0.1);
-    color: #2D7BFF;
+/* ─── HERO ───────────────────────────────────────────────────────────────── */
+.hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 452px;
+    gap: 40px;
+    align-items: start;
+    animation: fadeUp 0.7s ease both;
 }
 
-.mkt-card__external-badge {
+.hero__badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    margin-top: auto;
-    padding: 8px 14px;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(15, 23, 42, 0.1);
-    color: #475569;
-    font-size: 11px;
-    font-weight: 600;
-    align-self: flex-start;
-    transition: all 0.3s;
-}
-.mkt-card:hover .mkt-card__external-badge {
-    background: #0F172A;
-    color: #FFFFFF;
-    border-color: #0F172A;
+    padding: 7px 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(120, 155, 230, 0.3);
+    background: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(10px);
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    color: #3d68d8;
+    box-shadow: 0 4px 20px -10px rgba(45, 123, 255, 0.3);
 }
 
-/* Card entrance animation */
-@keyframes card-enter {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.hero__badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #10B981;
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
+    animation: badgePulse 2s ease infinite;
 }
-.mkt-card {
-    animation: card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+
+@keyframes badgePulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
+    50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
+}
+
+.hero__title {
+    margin: 20px 0 16px;
+    font-size: clamp(52px, 5.6vw, 82px);
+    line-height: 0.9;
+    letter-spacing: -0.055em;
+    font-weight: 900;
+    color: #0d1a36;
+}
+
+.hero__title em {
+    font-style: normal;
+    background: linear-gradient(135deg, #3d75ff 0%, #7c3aff 55%, #c026d3 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero__subtitle {
+    max-width: 560px;
+    margin: 0;
+    color: #5a6d8a;
+    font-size: 19px;
+    line-height: 1.65;
+}
+
+.hero__actions {
+    margin-top: 28px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    min-height: 48px;
+    border: 1px solid transparent;
+    border-radius: 14px;
+    padding: 0 22px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.btn--primary {
+    color: #fff;
+    background: linear-gradient(135deg, #2d7bff 0%, #1a5de8 100%);
+    box-shadow: 0 16px 32px -18px rgba(37, 114, 255, 0.7);
+}
+
+.btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 22px 40px -18px rgba(37, 114, 255, 0.8);
+}
+
+.btn--secondary {
+    color: #2d4570;
+    border-color: rgba(160, 185, 230, 0.35);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 8px 20px -14px rgba(26, 49, 92, 0.4);
+}
+
+.btn--secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 14px 28px -14px rgba(26, 49, 92, 0.5);
+}
+
+/* ─── STAT CARDS ─────────────────────────────────────────────────────────── */
+.hero__right {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    animation: fadeUp 0.8s ease 0.1s both;
+}
+
+.stat {
+    border-radius: 20px;
+    border: 1px solid rgba(160, 185, 220, 0.28);
+    background: rgba(255, 255, 255, 0.94);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.012);
+    padding: 14px 15px 13px;
+    cursor: default;
+    transition: transform 160ms ease, box-shadow 160ms ease;
+    animation: statEnter 0.6s ease calc(var(--delay, 0s) + 0.3s) both;
+}
+
+.stat:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.18);
+}
+
+@keyframes statEnter {
+    from { opacity: 0; transform: translateY(14px) scale(0.97); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.stat__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+
+.stat__icon-wrap {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    display: grid;
+    place-items: center;
+    font-size: 12px;
+}
+
+.stat--blue   .stat__icon-wrap { background: rgba(45,123,255,0.1);  color: #2d7bff; }
+.stat--green  .stat__icon-wrap { background: rgba(16,185,129,0.1);  color: #10b981; }
+.stat--violet .stat__icon-wrap { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
+.stat--orange .stat__icon-wrap { background: rgba(249,115,22,0.1);  color: #f97316; }
+
+.stat__value {
+    font-size: clamp(42px, 4vw, 56px);
+    line-height: 0.88;
+    font-weight: 900;
+    letter-spacing: -0.06em;
+    margin-bottom: 8px;
+}
+
+.stat__value sup {
+    font-size: 0.38em;
+    font-weight: 900;
+    vertical-align: super;
+    letter-spacing: 0;
+}
+
+.stat--blue   .stat__value { color: #2d7bff; }
+.stat--green  .stat__value { color: #10b981; }
+.stat--violet .stat__value { color: #8b5cf6; }
+.stat--orange .stat__value { color: #f97316; }
+
+.stat__label {
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    color: #94a3b8;
+    margin-bottom: 5px;
+}
+
+.stat__change {
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.07em;
+}
+
+.stat--blue   .stat__change { color: #2d7bff; }
+.stat--green  .stat__change { color: #10b981; }
+.stat--violet .stat__change { color: #8b5cf6; }
+.stat--orange .stat__change { color: #f97316; }
+
+/* sparklines */
+.stat__spark {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 20px;
+}
+
+.stat__spark span {
+    width: 9px;
+    border-radius: 3px 3px 0 0;
+    animation: sparkWave 2s ease-in-out infinite;
+}
+
+.stat__spark span:nth-child(1) { height: 6px;  animation-delay: 0s;    }
+.stat__spark span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
+.stat__spark span:nth-child(3) { height: 15px; animation-delay: 0.3s;  }
+.stat__spark span:nth-child(4) { height: 11px; animation-delay: 0.45s; }
+.stat__spark span:nth-child(5) { height: 18px; animation-delay: 0.6s;  }
+
+@keyframes sparkWave {
+    0%, 100% { opacity: 0.75; }
+    50%       { opacity: 1; filter: brightness(1.15); }
+}
+
+.stat__spark--blue  span { background: linear-gradient(180deg, rgba(100,160,255,0.4), #2d7bff); }
+.stat__spark--green span { background: linear-gradient(180deg, rgba(70,210,160,0.4), #10b981); }
+
+/* dot grid */
+.stat__dots {
+    display: grid;
+    grid-template-columns: repeat(3, 9px);
+    gap: 4px;
+}
+
+.stat__dots span {
+    width: 9px;
+    height: 9px;
+    border-radius: 3px;
+    background: #8b5cf6;
+    opacity: calc(0.25 + var(--di) * 0.075);
+    animation: dotPop 1.8s ease-in-out infinite;
+    animation-delay: calc(var(--di) * 0.1s);
+}
+
+@keyframes dotPop {
+    0%, 100% { transform: scale(1);    opacity: calc(0.25 + var(--di) * 0.075); }
+    50%       { transform: scale(1.25); opacity: 1; }
+}
+
+/* arc / donut */
+.stat__arc {
+    width: 44px;
+    height: 44px;
+}
+
+.stat__arc svg { overflow: visible; }
+
+/* ─── DIVIDER ────────────────────────────────────────────────────────────── */
+.divider {
+    margin: 30px 0 20px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    animation: fadeUp 0.6s ease 0.35s both;
+}
+
+.divider::before,
+.divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(140, 165, 210, 0.4), transparent);
+}
+
+.divider span {
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.18em;
+    color: #94a3b8;
+    white-space: nowrap;
+}
+
+/* ─── TOOL CARDS ─────────────────────────────────────────────────────────── */
+.tools {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    align-items: stretch;
+}
+
+.tool {
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(160, 185, 220, 0.28);
+    border-radius: 22px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    min-height: 280px;
+    padding: 18px;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    font-family: inherit;
+    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.012);
+    cursor: pointer;
+    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+    animation: toolEnter 0.6s ease calc(var(--delay, 0s) + 0.45s) both;
+}
+
+@keyframes toolEnter {
+    from { opacity: 0; transform: translateY(18px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.tool:hover {
+    transform: translateY(-5px);
+}
+
+.tool--blue:hover   { box-shadow: 0 20px 50px -24px rgba(45,123,255,0.4),  0 0 0 1.5px rgba(45,123,255,0.2);  border-color: rgba(45,123,255,0.25); }
+.tool--violet:hover { box-shadow: 0 20px 50px -24px rgba(139,92,246,0.4),  0 0 0 1.5px rgba(139,92,246,0.2);  border-color: rgba(139,92,246,0.25); }
+.tool--green:hover  { box-shadow: 0 20px 50px -24px rgba(16,185,129,0.4),  0 0 0 1.5px rgba(16,185,129,0.2);  border-color: rgba(16,185,129,0.25); }
+.tool--orange:hover { box-shadow: 0 20px 50px -24px rgba(249,115,22,0.4),  0 0 0 1.5px rgba(249,115,22,0.2);  border-color: rgba(249,115,22,0.25); }
+.tool--indigo:hover { box-shadow: 0 20px 50px -24px rgba(99,102,241,0.4),  0 0 0 1.5px rgba(99,102,241,0.2);  border-color: rgba(99,102,241,0.25); }
+.tool--teal:hover   { box-shadow: 0 20px 50px -24px rgba(20,184,166,0.4),  0 0 0 1.5px rgba(20,184,166,0.2);  border-color: rgba(20,184,166,0.25); }
+
+/* ambient color glow inside card */
+.tool__glow {
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 180px;
+    height: 120px;
+    border-radius: 999px;
+    pointer-events: none;
+    opacity: 0.55;
+    transition: opacity 200ms ease;
+    animation: glowFloat 5s ease-in-out infinite;
+}
+
+.tool:hover .tool__glow { opacity: 0.85; }
+
+.tool--blue   .tool__glow { background: radial-gradient(circle, rgba(180,210,255,0.9),  transparent 70%); }
+.tool--violet .tool__glow { background: radial-gradient(circle, rgba(216,196,255,0.9),  transparent 70%); }
+.tool--green  .tool__glow { background: radial-gradient(circle, rgba(180,245,220,0.9),  transparent 70%); }
+.tool--orange .tool__glow { background: radial-gradient(circle, rgba(255,220,180,0.9),  transparent 70%); }
+.tool--indigo .tool__glow { background: radial-gradient(circle, rgba(196,200,255,0.9),  transparent 70%); }
+.tool--teal   .tool__glow { background: radial-gradient(circle, rgba(180,245,240,0.9),  transparent 70%); }
+
+@keyframes glowFloat {
+    0%, 100% { transform: translateX(-50%) translateY(0); }
+    50%       { transform: translateX(-50%) translateY(-7px); }
+}
+
+.tool__head {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    min-height: 60px;
+}
+
+.tool__icon {
+    width: 52px;
+    height: 52px;
+    border-radius: 15px;
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    transition: transform 200ms ease;
+}
+
+.tool:hover .tool__icon { transform: scale(1.08) rotate(-3deg); }
+
+.tool--blue   .tool__icon { background: rgba(45,123,255,0.1);  color: #2d7bff; }
+.tool--violet .tool__icon { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
+.tool--green  .tool__icon { background: rgba(16,185,129,0.1);  color: #10b981; }
+.tool--orange .tool__icon { background: rgba(249,115,22,0.1);  color: #f97316; }
+.tool--indigo .tool__icon { background: rgba(99,102,241,0.1);  color: #6366f1; }
+.tool--teal   .tool__icon { background: rgba(20,184,166,0.1);  color: #14b8a6; }
+
+.tool__socials {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    max-width: 80px;
+    padding-top: 4px;
+}
+
+.tool__socials span {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    display: grid;
+    place-items: center;
+    font-size: 9px;
+    color: #7b91b4;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.25);
+    border: 1px solid rgba(160, 185, 220, 0.28);
+    transition: transform 150ms ease, color 150ms ease;
+}
+
+.tool__socials span:hover { transform: translateY(-2px); color: #3d68d8; }
+
+.tool__ext {
+    font-size: 13px;
+    color: #94a3b8;
+    padding-top: 6px;
+}
+
+.tool__title {
+    position: relative;
+    z-index: 1;
+    margin: 8px 0 10px;
+    font-size: 18px;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    font-weight: 800;
+    color: #0f172a;
+}
+
+.tool__desc {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+    color: #64748b;
+    font-size: 13.5px;
+    line-height: 1.56;
+    flex: 1;
+}
+
+.tool__footer {
+    position: relative;
+    z-index: 1;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(148, 163, 184, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.tool__meta {
+    color: #94a3b8;
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+}
+
+.tool__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(16,185,129,0.35);
+    background: rgba(220,253,244,0.9);
+    color: #059669;
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.tool--indigo .tool__badge {
+    border-color: rgba(99,102,241,0.35);
+    background: rgba(238,240,255,0.9);
+    color: #4f46e5;
+}
+
+.tool__badge-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 999px;
+    background: currentColor;
+    animation: badgePulse 1.8s ease infinite;
+}
+
+.tool__arrow {
+    font-size: 11px;
+    color: #cbd5e1;
+    transition: transform 150ms ease, color 150ms ease;
+}
+
+.tool:hover .tool__arrow {
+    transform: translateX(4px);
+    color: #94a3b8;
+}
+
+/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
+.hub__footer {
+    margin-top: 16px;
+    display: flex;
+    gap: 6px 20px;
+    flex-wrap: wrap;
+    color: #94a3b8;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    animation: fadeUp 0.5s ease 0.9s both;
+}
+
+/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */
+@keyframes fadeUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
+@media (max-width: 1160px) {
+    .hero { grid-template-columns: 1fr; }
+    .hero__right { max-width: 480px; }
+    .tools { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 780px) {
+    .hub { padding: 20px 0 32px; }
+    .hub__container { width: calc(100vw - 20px); }
+    .hero__subtitle { font-size: 17px; }
+    .hero__actions { flex-direction: column; }
+    .btn { justify-content: center; }
+    .hero__right, .tools { grid-template-columns: 1fr; }
+    .tool { min-height: 240px; }
 }
-.mkt-card:nth-child(1) { animation-delay: 0.05s; }
-.mkt-card:nth-child(2) { animation-delay: 0.1s; }
-.mkt-card:nth-child(3) { animation-delay: 0.15s; }
-.mkt-card:nth-child(4) { animation-delay: 0.2s; }
-.mkt-card:nth-child(5) { animation-delay: 0.25s; }
-.mkt-card:nth-child(6) { animation-delay: 0.3s; }
 </style>
diff --git a/src/views/pages/marketing/MarketingStrategyV3.vue b/src/views/pages/marketing/MarketingStrategyV3.vue
index 1ddc3a5..bebf728 100644
--- a/src/views/pages/marketing/MarketingStrategyV3.vue
+++ b/src/views/pages/marketing/MarketingStrategyV3.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup>
 import { DEFAULT_STRATEGY_MODEL, STRATEGY_MODELS } from '@/config/marketingModels';
 import MarketingV3Service from '@/service/MarketingV3Service';
 import { useTargetingStore } from '@/stores/targeting';
@@ -8,10 +8,47 @@ import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+const MOJIBAKE_RE = /[ÐÑÃÂ]/;
+
+const repairText = (value) => {
+    if (typeof value !== 'string') return value;
+
+    let output = value;
+
+    for (let i = 0; i < 3; i += 1) {
+        if (!MOJIBAKE_RE.test(output)) break;
+
+        try {
+            const bytes = Uint8Array.from([...output].map((char) => char.charCodeAt(0) & 0xff));
+            const decoded = new TextDecoder('utf-8').decode(bytes).replace(/\uFFFD/g, '');
+            if (!decoded || decoded === output) break;
+            output = decoded;
+        } catch {
+            break;
+        }
+    }
+
+    return output;
+};
+
+const repairDeep = (value) => {
+    if (Array.isArray(value)) return value.map(repairDeep);
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, repairDeep(entry)]));
+    }
+    return repairText(value);
+};
+
 const route = useRoute();
 const router = useRouter();
 const toast = useToast();
 const targetingStore = useTargetingStore();
+const toastAdd = (options) =>
+    toastAdd({
+        ...options,
+        summary: repairText(options.summary),
+        detail: repairText(options.detail)
+    });
 
 const analysisId = computed(() => route.query.analysisId || '');
 const strategyId = ref(route.query.strategyId || route.params.id || null);
@@ -47,17 +84,17 @@ const handleDrop = (event) => {
 const processFiles = (files) => {
     const maxFiles = 10;
     if (selectedFiles.value.length + files.length > maxFiles) {
-        toast.add({ severity: 'warn', summary: 'Лимит', detail: `Можно загрузить не более ${maxFiles} файлов`, life: 3000 });
+        toastAdd({ severity: 'warn', summary: 'Лимит', detail: `Можно загрузить не более ${maxFiles} файлов`, life: 3000 });
         files = files.slice(0, maxFiles - selectedFiles.value.length);
     }
 
     files.forEach((file) => {
         if (!['image/png', 'image/jpeg', 'image/jpg'].includes(file.type)) {
-            toast.add({ severity: 'error', summary: 'Формат', detail: `Файл ${file.name} не является PNG или JPG`, life: 3000 });
+            toastAdd({ severity: 'error', summary: 'Формат', detail: `Файл ${file.name} не является PNG или JPG`, life: 3000 });
             return;
         }
         if (file.size > 5 * 1024 * 1024) {
-            toast.add({ severity: 'error', summary: 'Размер', detail: `Файл ${file.name} слишком тяжелый (макс 5МБ)`, life: 3000 });
+            toastAdd({ severity: 'error', summary: 'Размер', detail: `Файл ${file.name} слишком тяжелый (макс 5МБ)`, life: 3000 });
             return;
         }
         selectedFiles.value.push({
@@ -98,7 +135,11 @@ const handlePaste = (e) => {
 const generateLoading = ref(false);
 const progressPercent = ref(0);
 const loadingMessageIndex = ref(0);
-const loadingMessages = ['Анализируем нишу и подбираем платформы...', 'Проектируем контент-план...', 'Рендерим фотореалистичные креативы и видео...'];
+const loadingMessages = [
+    'Анализируем нишу и подбираем платформы...',
+    'Проектируем контент-план...',
+    'Готовим реалистичные креативы и видео...'
+];
 const currentLoadingMessage = computed(() => loadingMessages[loadingMessageIndex.value]);
 
 let pollInterval = null;
@@ -116,10 +157,10 @@ const toggleMuteFromBtn = (event) => {
         const icon = event.currentTarget.querySelector('i');
         if (video.muted) {
             icon.className = 'pi pi-volume-off';
-            event.currentTarget.title = "Включить звук";
+            event.currentTarget.title = "Включить звук";
         } else {
             icon.className = 'pi pi-volume-up';
-            event.currentTarget.title = "Выключить звук";
+            event.currentTarget.title = "Выключить звук";
         }
     }
 };
@@ -153,7 +194,7 @@ const startGeneration = async () => {
             startPolling();
         }
     } catch (error) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: error.message || 'Не удалось запустить генерацию', life: 5000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: error.message || 'Не удалось запустить генерацию', life: 5000 });
     } finally {
         generateLoading.value = false;
     }
@@ -173,12 +214,12 @@ const startPolling = () => {
 
             if (data.status === 'completed' || data.status === 'COMPLETED') {
                 progressPercent.value = 100;
-                strategyData.value = data;
+                strategyData.value = repairDeep(data);
                 setTimeout(() => {
                     status.value = 'COMPLETED';
                     stopPolling();
                     loadMediaUrls();
-                    toast.add({ severity: 'success', summary: 'Готово', detail: 'Ваша стратегия готова к внедрению!', life: 4000 });
+                    toastAdd({ severity: 'success', summary: 'Готово', detail: 'Ваша стратегия готова к внедрению!', life: 4000 });
                 }, 1000);
             } else if (data.status === 'failed') {
                 status.value = 'FAILED';
@@ -216,7 +257,7 @@ const getModelInfo = (modelName) => {
 // Clean rationale from debug scores
 const formatRationale = (text) => {
     if (!text) return '';
-    return text.replace(/\(баллы:.*?\)\.?/g, '').trim();
+    return repairText(text).replace(/\([^)]*:\s*.*?\)\.?/g, '').trim();
 };
 
 const getMediaState = (post) => {
@@ -235,7 +276,7 @@ const copyText = (text, hashtags) => {
     let fullText = text || '';
     if (hashtags?.length) fullText += '\n\n' + hashtags.map((t) => `#${t}`).join(' ');
     navigator.clipboard.writeText(fullText).then(() => {
-        toast.add({ severity: 'success', summary: 'Копирование', detail: 'Текст в буфере обмена', life: 2000 });
+        toastAdd({ severity: 'success', summary: 'Копирование', detail: 'Текст в буфере обмена', life: 2000 });
     });
 };
 
@@ -312,9 +353,9 @@ const init = async () => {
     try {
         previewLoading.value = true;
         const res = await MarketingV3Service.getStrategyPreview(analysisId.value);
-        previewData.value = res;
+        previewData.value = repairDeep(res);
     } catch (err) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось загрузить рекомендации', life: 5000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось загрузить рекомендации', life: 5000 });
     } finally {
         previewLoading.value = false;
     }
@@ -324,7 +365,7 @@ const loadStrategyById = async (id) => {
     status.value = 'PROCESSING';
     try {
         const data = await MarketingV3Service.getStrategyById(id);
-        strategyData.value = data;
+        strategyData.value = repairDeep(data);
         if (data.status === 'completed' || data.status === 'COMPLETED') {
             status.value = 'COMPLETED';
             loadMediaUrls();
@@ -342,7 +383,7 @@ const loadStrategyById = async (id) => {
             startPolling();
         }
     } catch (err) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось загрузить стратегию', life: 5000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось загрузить стратегию', life: 5000 });
         status.value = 'FAILED';
     }
 };
@@ -362,10 +403,10 @@ const handleRegenerateMedia = async (type, post, index) => {
             // Async video generation (202 Accepted)
             strategyData.value.postCalendar[index].videoUrl = 'generating...';
             pollPostVideo(sid, index);
-            toast.add({
+            toastAdd({
                 severity: 'info',
-                summary: 'Генерация',
-                detail: 'Видео генерируется через Veo 3...',
+                summary: 'Генерация',
+                detail: 'Видео генерируется через Veo 3...',
                 life: 3000
             });
         } else {
@@ -378,16 +419,16 @@ const handleRegenerateMedia = async (type, post, index) => {
                 if (url) blobUrls.value[updatedPost.imageFilename] = url;
             }
 
-            toast.add({
+            toastAdd({
                 severity: 'success',
-                summary: 'Обновлено',
-                detail: 'ИИ обновил изображение!',
+                summary: 'Обновлено',
+                detail: 'ИИ обновил изображение!',
                 life: 3000
             });
         }
     } catch (e) {
         console.error('Regeneration error:', e);
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось перегенерировать медиа. Попробуйте позже.', life: 4000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось перегенерировать медиа. Попробуйте позже.', life: 4000 });
     } finally {
         regeneratingPosts.value.delete(index);
     }
@@ -397,7 +438,7 @@ const pollPostVideo = (sid, index) => {
     if (videoPollingIntervals.value[index]) return;
     videoPollingIntervals.value[index] = setInterval(async () => {
         try {
-            const strategy = await MarketingV3Service.getStrategyById(sid);
+            const strategy = repairDeep(await MarketingV3Service.getStrategyById(sid));
             const post = strategy.postCalendar[index];
             if (post?.videoUrl && post.videoUrl !== 'generating...') {
                 clearInterval(videoPollingIntervals.value[index]);
@@ -420,7 +461,7 @@ const startingStrategy = ref(false);
 const handleStartStrategy = async () => {
     const currentStrategyId = strategyData.value?.strategyId || strategyId.value;
     if (!currentStrategyId) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не найден идентификатор стратегии для запуска таргета.' });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'Не найден идентификатор стратегии для запуска таргета.' });
         return;
     }
 
@@ -429,7 +470,7 @@ const handleStartStrategy = async () => {
         targetingStore.creative.value = null;
         targetingStore.launchResult.value = null;
         targetingStore.sourceStrategyId.value = currentStrategyId;
-        targetingStore.sourceStrategyName.value = strategyData.value?.strategyName || strategyData.value?.strategyData?.strategyName || 'V3 стратегия';
+        targetingStore.sourceStrategyName.value = strategyData.value?.strategyName || strategyData.value?.strategyData?.strategyName || 'V3 стратегия';
         targetingStore.sourceContext.value = 'marketing-v3';
 
         await router.push({
@@ -441,7 +482,7 @@ const handleStartStrategy = async () => {
             }
         });
     } catch (e) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось открыть новый запуск таргета.' });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось открыть новый запуск таргета.' });
     } finally {
         startingStrategy.value = false;
     }
@@ -455,9 +496,9 @@ const handlePublishNow = async (post) => {
         executingTasks.value.add(post.taskId);
         await MarketingV3Service.executeTaskManually(post.taskId);
         post.taskStatus = 'PUBLISHED';
-        toast.add({ severity: 'success', summary: 'Опубликовано', detail: 'Пост успешно опубликован', life: 3000 });
+        toastAdd({ severity: 'success', summary: 'Опубликовано', detail: 'Пост успешно опубликован', life: 3000 });
     } catch (e) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось опубликовать пост', life: 5000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось опубликовать пост', life: 5000 });
     } finally {
         executingTasks.value.delete(post.taskId);
     }
@@ -495,7 +536,7 @@ const openTargetingWizard = () => {
         route.query.analysisId;
 
     if (!currentStrategyId) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не найден ID стратегии для запуска таргета.', life: 3500 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'Не найден ID стратегии для запуска таргета.', life: 3500 });
         return;
     }
 
@@ -518,16 +559,16 @@ const autoPublishFirstPost = async () => {
         route.query.strategyId;
 
     if (!currentStrategyId) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'ID стратегии не найден', life: 3500 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: 'ID стратегии не найден', life: 3500 });
         return;
     }
 
     isAutoPublishing.value = true;
     try {
         const result = await MarketingV3Service.publishStrategyToFacebook(currentStrategyId);
-        toast.add({ severity: 'success', summary: 'Опубликовано', detail: result.message || 'Пост успешно опубликован в Facebook', life: 3500 });
+        toastAdd({ severity: 'success', summary: 'Опубликовано', detail: result.message || 'Пост успешно опубликован в Facebook', life: 3500 });
     } catch (e) {
-        toast.add({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось опубликовать', life: 5000 });
+        toastAdd({ severity: 'error', summary: 'Ошибка', detail: e.message || 'Не удалось опубликовать', life: 5000 });
     } finally {
         isAutoPublishing.value = false;
     }
@@ -551,31 +592,60 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="strategy-page">
+    <div class="strategy-page marketing-compact">
         <Toast />
 
-        <div class="strategy-container">
-            <!-- 1. HEADER -->
-            <header class="strategy-header">
-                <div class="header-main">
-                    <div class="brand-tag">CONTENT FACTORY V4</div>
-                    <h1 class="page-title">Стратегия продвижения</h1>
-                    <div v-if="strategyData?.strategyData?.modelTitle || strategyData?.modelTitle" class="model-badge-row">
-                        <span class="model-label">МОДЕЛЬ:</span>
-                        <span class="model-value">{{ strategyData?.strategyData?.modelTitle || strategyData?.modelTitle }}</span>
+        <!-- ══════ PREMIUM STICKY TOP BAR ══════ -->
+        <header class="s-topbar">
+            <div class="s-topbar__inner">
+                <div class="s-topbar__left">
+                    <button class="s-back-btn" @click="goBack" title="Назад">
+                        <i class="pi pi-arrow-left"></i>
+                    </button>
+                    <div class="s-topbar__brand">
+                        <div class="s-topbar__eyebrow">
+                            <span class="s-topbar__eyebrow-dot"></span>
+                            Контент-фабрика · ИИ v4
+                        </div>
+                        <div class="s-topbar__title-row">
+                            <span class="s-topbar__title">
+                                {{ strategyData?.strategyData?.strategyName || strategyData?.strategyName || 'Стратегия продвижения' }}
+                            </span>
+                            <span v-if="status === 'COMPLETED'" class="s-status s-status--done">
+                                <i class="pi pi-check-circle"></i> Готово
+                            </span>
+                            <span v-else-if="status === 'PROCESSING'" class="s-status s-status--process">
+                                <i class="pi pi-spin pi-spinner"></i> Генерация
+                            </span>
+                            <span v-else-if="status === 'QUEUED'" class="s-status s-status--queue">
+                                <i class="pi pi-clock"></i> В очереди
+                            </span>
+                        </div>
+                        <div v-if="strategyData" class="s-topbar__sub">
+                            <span v-if="strategyData.scoringModelName">{{ strategyData.scoringModelName }}</span>
+                            <span v-if="strategyData.durationWeeks || strategyData.strategyData?.durationWeeks">
+                                · {{ strategyData.durationWeeks || strategyData.strategyData?.durationWeeks }} нед.
+                            </span>
+                        </div>
                     </div>
-                    <p v-else class="page-subtitle">Визуальная и контентная концепция на основе анализа рынка</p>
                 </div>
-                <div class="header-actions">
-                    <Button 
-                        label="К анализу" 
-                        icon="pi pi-arrow-left" 
-                        class="back-btn"
-                        text
-                        @click="goBack" 
-                    />
+                <div class="s-topbar__right">
+                    <div v-if="strategyData?.priorityPlatforms?.length || strategyData?.strategyData?.priorityPlatforms?.length" class="s-platforms">
+                        <span v-for="p in (strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms)?.slice(0,4)" :key="p"
+                              class="s-plat" :title="p">
+                            <i :class="getPlatformIcon(p)"></i>
+                        </span>
+                    </div>
+                    <Button v-if="status === 'COMPLETED'"
+                            label="Запустить таргет"
+                            icon="pi pi-rocket"
+                            class="s-launch-btn"
+                            @click="openTargetingWizard" />
                 </div>
-            </header>
+            </div>
+        </header>
+
+        <div class="strategy-container">
 
             <!-- 2. STAGE: PREVIEW & SETUP -->
             <div v-if="status === 'PREVIEW'" class="setup-stage">
@@ -600,7 +670,7 @@ onUnmounted(() => {
 
                             <div class="recommendation-content">
                                 <div class="recommendation-header">
-                                    <span class="rec-label" :style="{ color: getModelInfo(previewData.recommendedModel).color }">РЕКОМЕНДАЦИЯ KAI</span>
+                                    <span class="rec-label" :style="{ color: getModelInfo(previewData.recommendedModel).color }">Рекомендация KAI</span>
                                     <div class="pulse-dot"></div>
                                 </div>
                                 <h3 class="model-title">
@@ -649,7 +719,7 @@ onUnmounted(() => {
                             <i class="pi pi-sparkles"></i>
                         </div>
                         <h2 class="hero-title">Аналитика завершена</h2>
-                        <p class="hero-subtitle">Наш AI-директор готов разработать контент-план и фотореалистичные креативы.</p>
+                        <p class="hero-subtitle">Наш AI-директор готов разработать контент-план и реалистичные креативы.</p>
 
                         <!-- Multi-File Upload Zone -->
                         <div 
@@ -681,7 +751,7 @@ onUnmounted(() => {
                             <div v-else class="upload-prompt" @click="triggerFileInput">
                                 <div class="prompt-icon"><i class="pi pi-images"></i></div>
                                 <h4 class="prompt-title">Брендинг и референсы</h4>
-                                <p class="prompt-text">Загрузите лого или фото ваших товаров. ИИ учтет их при создании визуала. (Ctrl+V поддерживается)</p>
+                                <p class="prompt-text">Загрузите логотип или фото ваших товаров. ИИ учтет их при создании визуала. Вставка через Ctrl+V тоже работает.</p>
                             </div>
                         </div>
 
@@ -752,33 +822,57 @@ onUnmounted(() => {
             <!-- 4. STAGE: COMPLETED (Result Display) -->
             <div v-else-if="status === 'COMPLETED' && strategyData" class="results-stage">
                 
-                <!-- Strategy Rationale Banner -->
+                <!-- ══ RESULTS HERO ══ -->
                 <div class="results-hero">
-                    <div class="hero-main-info">
-                        <div class="model-large-icon" :style="{ '--accent': getModelInfo(strategyData.scoringModelName).color }">
-                            <span class="emoji">{{ getModelInfo(strategyData.scoringModelName).icon }}</span>
+                    <!-- Ambient background -->
+                    <div class="rh-bg-orb rh-bg-orb--1"></div>
+                    <div class="rh-bg-orb rh-bg-orb--2"></div>
+
+                    <div class="rh-top">
+                        <!-- Model card -->
+                        <div class="rh-model-card" :style="{ '--mc': getModelInfo(strategyData.scoringModelName).color }">
+                            <div class="rh-model-icon">
+                                <span>{{ getModelInfo(strategyData.scoringModelName).icon }}</span>
+                            </div>
+                            <div class="rh-model-info">
+                                <div class="rh-model-label">ВЫБРАННАЯ МОДЕЛЬ</div>
+                                <div class="rh-model-name">{{ strategyData.scoringModelTitle || getModelInfo(strategyData.scoringModelName).title }}</div>
+                                <div class="rh-model-badge">{{ strategyData.scoringModelName || 'PREMIUM' }}</div>
+                            </div>
                         </div>
-                        <div class="model-text">
-                            <div class="model-scope">
-                                <span class="scope-tag" :style="{ color: getModelInfo(strategyData.scoringModelName).color }">ВЫБРАННАЯ МОДЕЛЬ</span>
-                                <span class="scope-val">{{ strategyData.scoringModelName || 'PREMIUM' }}</span>
+
+                        <!-- Key stats -->
+                        <div class="rh-stats">
+                            <div v-if="strategyData.durationWeeks || strategyData.strategyData?.durationWeeks" class="rh-stat">
+                                <div class="rh-stat__val">{{ strategyData.durationWeeks || strategyData.strategyData?.durationWeeks }}</div>
+                                <div class="rh-stat__label">Недель</div>
+                            </div>
+                            <div v-if="strategyData.postCalendar?.length" class="rh-stat">
+                                <div class="rh-stat__val">{{ strategyData.postCalendar.length }}</div>
+                                <div class="rh-stat__label">Постов</div>
+                            </div>
+                            <div v-if="(strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms)?.length" class="rh-stat">
+                                <div class="rh-stat__val">{{ (strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms).length }}</div>
+                                <div class="rh-stat__label">Платформ</div>
                             </div>
-                            <h2 class="model-big-title">
-                                {{ strategyData.scoringModelTitle || getModelInfo(strategyData.scoringModelName).title }}
-                            </h2>
                         </div>
                     </div>
 
-                    <div class="hero-rationale">
-                        <div class="rationale-header">Итоговое обоснование стратегии</div>
-                        <p class="rationale-text">"{{ formatRationale(strategyData.strategyData?.scoringRationale || strategyData.strategyData?.rationale || strategyData.strategyRationale) }}"</p>
+                    <!-- Rationale -->
+                    <div v-if="formatRationale(strategyData.strategyData?.scoringRationale || strategyData.strategyData?.rationale || strategyData.strategyRationale)" class="rh-rationale">
+                        <div class="rh-rationale__icon"><i class="pi pi-bolt"></i></div>
+                        <div class="rh-rationale__body">
+                            <div class="rh-rationale__label">Обоснование стратегии</div>
+                            <p class="rh-rationale__text">"{{ formatRationale(strategyData.strategyData?.scoringRationale || strategyData.strategyData?.rationale || strategyData.strategyRationale) }}"</p>
+                        </div>
                     </div>
 
-                    <!-- Platform Distribution -->
-                    <div v-if="strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms" class="platform-strip">
-                        <div v-for="p in (strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms)" :key="p" class="p-item">
-                            <i :class="getPlatformIcon(p)" class="p-icon"></i>
-                            <span class="p-name">{{ p }}</span>
+                    <!-- Platform pills -->
+                    <div v-if="strategyData.priorityPlatforms?.length || strategyData.strategyData?.priorityPlatforms?.length" class="rh-platforms">
+                        <div class="rh-platforms__label">Платформы:</div>
+                        <div v-for="p in (strategyData.priorityPlatforms || strategyData.strategyData?.priorityPlatforms)" :key="p" class="rh-plat-pill">
+                            <i :class="getPlatformIcon(p)"></i>
+                            <span>{{ p }}</span>
                         </div>
                     </div>
                 </div>
@@ -904,9 +998,9 @@ onUnmounted(() => {
                         </div>
                         <div class="bottom-action-text">
                             <h4>Готовы запустить рекламу?</h4>
-                            <p>ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok</p>
+                            <p>ИИ создаст аудитории, оптимизирует бюджет и запустит рекламу в Facebook, Instagram и TikTok.</p>
                         </div>
-                        <Button label="Запустить ИИ Таргет" icon="pi pi-rocket"
+                        <Button label="Запустить ИИ таргет" icon="pi pi-rocket"
                                 class="bottom-action-btn"
                                 @click="openTargetingWizard" />
                     </div>
@@ -957,320 +1051,363 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* ───── PRO-DESIGN SYSTEM (KAI PRIME EDITION 2026) ───── */
+.marketing-compact {
+    zoom: 0.9;
+}
+
+@supports not (zoom: 1) {
+    .marketing-compact {
+        transform: scale(0.9);
+        transform-origin: top center;
+        width: calc(100% / 0.9);
+    }
+}
+
+@media (max-width: 1440px) {
+    .marketing-compact {
+        zoom: 1;
+    }
+
+    @supports not (zoom: 1) {
+        .marketing-compact {
+            transform: none;
+            width: 100%;
+        }
+    }
+}
+
+/* ═══════════════════════════════════════════
+   PREMIUM STRATEGY PAGE
+   ═══════════════════════════════════════════ */
 .strategy-page {
-    background: var(--kai-bg);
     min-height: 100vh;
-    padding: 32px;
+    padding: 0;
     font-family: 'Onest', sans-serif;
-    color: var(--kai-txt);
+    background: #F4F7FF;
+}
+
+/* ── STICKY TOP BAR ── */
+.s-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(28px);
+    -webkit-backdrop-filter: blur(28px);
+    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
+    box-shadow: 0 2px 20px rgba(15, 23, 42, 0.04);
+}
+.s-topbar__inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 16px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+.s-topbar__left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 0;
+}
+.s-back-btn {
+    width: 38px; height: 38px;
+    border-radius: 11px;
+    border: 1px solid rgba(15, 23, 42, 0.1);
+    background: rgba(255, 255, 255, 0.9);
+    color: #475569;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; cursor: pointer; flex-shrink: 0;
+    transition: all 0.2s;
+}
+.s-back-btn:hover {
+    border-color: rgba(45, 123, 255, 0.3);
+    color: #2D7BFF;
+    transform: translateX(-2px);
+}
+.s-topbar__brand { min-width: 0; }
+.s-topbar__eyebrow {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 9.5px; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.12em;
+    color: #10B981; margin-bottom: 2px;
+}
+.s-topbar__eyebrow-dot {
+    width: 5px; height: 5px; border-radius: 50%;
+    background: #10B981;
+    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
+    animation: s-pulse 2s ease-in-out infinite;
+}
+@keyframes s-pulse {
+    0%,100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.7); }
+}
+.s-topbar__title-row {
+    display: flex; align-items: center; gap: 10px;
+    flex-wrap: wrap;
+}
+.s-topbar__title {
+    font-size: 18px; font-weight: 800;
+    color: #0F172A; letter-spacing: -0.025em;
+    line-height: 1.2;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    max-width: 500px;
+}
+.s-topbar__sub {
+    font-size: 11.5px; color: #94A3B8; font-weight: 500;
+    margin-top: 2px;
+}
+.s-status {
+    display: inline-flex; align-items: center; gap: 5px;
+    padding: 4px 10px; border-radius: 99px;
+    font-size: 11px; font-weight: 700;
+    white-space: nowrap;
+}
+.s-status--done {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+    border: 1px solid rgba(16, 185, 129, 0.25);
+}
+.s-status--process {
+    background: rgba(45, 123, 255, 0.1);
+    color: #2D7BFF;
+    border: 1px solid rgba(45, 123, 255, 0.25);
+}
+.s-status--queue {
+    background: rgba(245, 158, 11, 0.1);
+    color: #F59E0B;
+    border: 1px solid rgba(245, 158, 11, 0.25);
+}
+
+.s-topbar__right {
+    display: flex; align-items: center; gap: 12px;
+    flex-shrink: 0;
+}
+.s-platforms {
+    display: flex; gap: 6px; align-items: center;
+}
+.s-plat {
+    width: 32px; height: 32px;
+    border-radius: 9px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    background: rgba(255, 255, 255, 0.9);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; color: #475569;
+    transition: transform 0.2s;
+}
+.s-plat:hover { transform: translateY(-2px); }
+.s-launch-btn {
+    background: linear-gradient(135deg, #2D7BFF, #1E5FD8) !important;
+    color: #fff !important;
+    border: none !important;
+    padding: 10px 20px !important;
+    border-radius: 12px !important;
+    font-family: 'Onest', sans-serif !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+    box-shadow: 0 4px 14px rgba(45, 123, 255, 0.35) !important;
+    transition: all 0.25s !important;
+}
+.s-launch-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 24px rgba(45, 123, 255, 0.45) !important;
 }
 
 .strategy-container {
-    max-width: 1000px;
+    max-width: 1400px;
     margin: 0 auto;
-}
-
-/* ───── HEADER ───── */
-.strategy-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 48px;
-}
-
-.brand-tag {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 8px;
-    font-weight: 800;
-    letter-spacing: 0.15em;
-    color: var(--kai-green);
-    background: rgba(var(--kai-green-rgb), 0.1);
-    padding: 4px 8px;
-    border-radius: 4px;
-    display: inline-block;
-    margin-bottom: 12px;
-}
-
-.page-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 20px;
-    font-weight: 900;
-    color: var(--kai-txt);
-    margin: 0 0 8px 0;
-}
-
-.page-subtitle {
-    font-size: 13px;
-    color: var(--kai-txt3);
-    font-weight: 500;
-}
-
-.model-badge-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 4px;
-}
-
-.model-label {
-    font-size: 9px;
-    font-weight: 800;
-    color: var(--kai-blue);
-    opacity: 0.6;
-}
-
-.model-value {
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--kai-txt2);
-}
-
-.back-btn {
-    font-size: 11.5px !important;
-    font-weight: 700 !important;
-    border-radius: 12px !important;
-    padding: 8px 16px !important;
-    border: 1px solid var(--kai-border) !important;
-}
-
-/* ───── STAGES ───── */
-.setup-stage {
+    padding: 32px 32px 100px;
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: 24px;
+}
+
+/* ═══════════════════════════════════════════
+   SETUP STAGE (PREVIEW) & CARDS
+   ═══════════════════════════════════════════ */
+.setup-stage {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr;
+}
+@media(min-width: 1024px) {
+    .setup-stage { grid-template-columns: 340px 1fr; }
 }
 
-/* Recommendation Card */
 .recommendation-card {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
-    border-radius: 28px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(15, 23, 42, 0.04);
+    border-radius: 24px;
     padding: 32px;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03), inset 0 2px 4px rgba(255,255,255,0.8);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
     position: relative;
     overflow: hidden;
 }
-
-.recommendation-inner {
-    display: flex;
-    gap: 24px;
-    align-items: center;
-    margin-bottom: 32px;
+.recommendation-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(45, 123, 255, 0.08);
 }
 
 .model-icon-box {
-    width: 80px;
-    height: 80px;
-    background: var(--kai-bg);
-    border: 2px solid var(--accent);
-    border-radius: 24px;
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
+    background: linear-gradient(135deg, var(--accent, #2D7BFF), #1a6bff);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 40px;
-    box-shadow: 0 8px 16px rgba(var(--kai-blue-rgb), 0.1);
-}
-
-.recommendation-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 4px;
+    font-size: 28px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 20px rgba(var(--accent, rgba(45,123,255,0.4)));
+    margin-bottom: 20px;
 }
 
 .rec-label {
-    font-size: 9px;
-    font-weight: 900;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
     letter-spacing: 0.1em;
 }
 
-.pulse-dot {
-    width: 6px;
-    height: 6px;
-    background: var(--kai-green);
-    border-radius: 50%;
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.5); opacity: 0.5; }
-    100% { transform: scale(1); opacity: 1; }
-}
-
 .model-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 17px;
-    font-weight: 800;
-    margin: 0 0 6px 0;
+    font-size: 24px;
+    font-weight: 900;
+    color: #0F172A;
+    margin: 8px 0;
+    letter-spacing: -0.02em;
 }
 
 .model-desc {
-    font-size: 12.5px;
-    color: var(--kai-txt3);
-    line-height: 1.5;
-    margin: 0;
+    font-size: 14px;
+    color: #64748B;
+    line-height: 1.6;
 }
 
 .scores-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: 16px;
-    background: var(--kai-bg3);
-    padding: 20px;
+    margin-top: auto;
+}
+
+.score-item {
+    background: #FAFBFF;
+    padding: 16px;
     border-radius: 16px;
-    border: 1px solid var(--kai-border);
+    border: 1px solid rgba(45, 123, 255, 0.05);
 }
 
 .score-info {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 6px;
-}
-
-.score-name {
-    font-size: 9px;
+    margin-bottom: 8px;
+    font-size: 13px;
     font-weight: 800;
-    text-transform: uppercase;
-}
-
-.score-val {
-    font-size: 9px;
-    font-weight: 700;
-    color: var(--kai-txt3);
 }
 
 .score-track {
-    height: 4px;
-    background: rgba(255,255,255,0.05);
-    border-radius: 2px;
+    height: 8px;
+    background: rgba(15, 23, 42, 0.05);
+    border-radius: 100px;
     overflow: hidden;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
 }
 
 .score-fill {
     height: 100%;
-    border-radius: 2px;
-    transition: width 1s ease;
+    border-radius: 100px;
+    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
-.modifiers-row {
-    margin-top: 16px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.mod-pill {
-    font-size: 10px;
-    font-weight: 700;
-    padding: 4px 10px;
-    background: rgba(var(--kai-blue-rgb), 0.1);
-    color: var(--kai-blue);
-    border-radius: 6px;
-    border: 1px solid rgba(var(--kai-blue-rgb), 0.1);
-}
-
-/* Hero Setup Box */
+/* ═══════════════════════════════════════════
+   HERO SETUP BOX (Upload)
+   ═══════════════════════════════════════════ */
 .hero-setup-box {
-    text-align: center;
-    background: var(--kai-bg2);
+    background: #fff;
     border-radius: 32px;
+    border: 1px solid rgba(15, 23, 42, 0.04);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
     padding: 48px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
 }
 
 .hero-icon {
-    width: 64px;
-    height: 64px;
-    background: rgba(var(--kai-green-rgb), 0.1);
-    color: var(--kai-green);
-    border-radius: 20px;
+    width: 80px;
+    height: 80px;
+    border-radius: 24px;
+    background: linear-gradient(135deg, rgba(45, 123, 255, 0.1), rgba(139, 92, 246, 0.1));
+    color: #2D7BFF;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 28px;
-    margin: 0 auto 24px;
+    font-size: 32px;
+    margin-bottom: 24px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 12px 24px rgba(45,123,255,0.1);
 }
 
 .hero-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 20px;
-    font-weight: 800;
-    margin-bottom: 8px;
+    font-size: 36px;
+    font-weight: 900;
+    color: #0F172A;
+    margin-bottom: 12px;
+    letter-spacing: -0.03em;
 }
 
 .hero-subtitle {
-    font-size: 13.5px;
-    color: var(--kai-txt3);
-    margin-bottom: 40px;
+    font-size: 16px;
+    color: #64748B;
+    margin-bottom: 32px;
     max-width: 500px;
-    margin-left: auto;
-    margin-right: auto;
+    line-height: 1.6;
 }
 
-/* Upload Zone */
 .upload-zone {
-    border: 2px dashed var(--kai-border);
+    border: 2px dashed rgba(45, 123, 255, 0.2);
     border-radius: 24px;
-    padding: 32px;
-    transition: all 0.3s;
-    background: rgba(255,255,255,0.02);
+    background: rgba(45, 123, 255, 0.02);
+    padding: 40px;
+    text-align: center;
     cursor: pointer;
-    margin-bottom: 40px;
+    transition: all 0.3s;
+    margin-bottom: 32px;
 }
-
 .upload-zone:hover, .upload-zone.is-dragging {
-    border-color: var(--kai-blue);
-    background: rgba(var(--kai-blue-rgb), 0.05);
-}
-
-.upload-prompt {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.prompt-icon {
-    font-size: 32px;
-    color: var(--kai-blue);
-    margin-bottom: 16px;
-}
-
-.prompt-title {
-    font-size: 15px;
-    font-weight: 700;
-    margin-bottom: 8px;
-}
-
-.prompt-text {
-    font-size: 11.5px;
-    color: var(--kai-txt3);
-    max-width: 400px;
-    line-height: 1.5;
-}
-
-.files-preview-container {
-    width: 100%;
+    border-color: #2D7BFF;
+    background: rgba(45, 123, 255, 0.06);
+    box-shadow: 0 8px 24px rgba(45, 123, 255, 0.1);
 }
 
 .files-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 12px;
-    margin-bottom: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: center;
 }
 
 .file-thumb {
-    aspect-ratio: 1;
-    border-radius: 12px;
+    width: 90px;
+    height: 90px;
+    border-radius: 16px;
     overflow: hidden;
     position: relative;
-    border: 1px solid var(--kai-border);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
 .thumb-img {
     width: 100%;
     height: 100%;
-    object-cover: cover;
+    object-fit: cover;
 }
 
 .thumb-overlay {
@@ -1284,172 +1421,98 @@ onUnmounted(() => {
     transition: opacity 0.2s;
 }
 
-.file-thumb:hover .thumb-overlay {
-    opacity: 1;
-}
+.file-thumb:hover .thumb-overlay { opacity: 1; }
 
 .remove-btn {
-    width: 24px !important;
-    height: 24px !important;
-    padding: 0 !important;
-    font-size: 10px !important;
-    background: var(--kai-red) !important;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.2) !important;
     border: none !important;
+    color: #fff !important;
+    backdrop-filter: blur(4px);
 }
 
 .add-more-box {
-    aspect-ratio: 1;
-    border: 1px dashed var(--kai-border);
-    border-radius: 12px;
+    width: 90px;
+    height: 90px;
+    border-radius: 16px;
+    border: 2px dashed rgba(45, 123, 255, 0.3);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: 8px;
+    gap: 8px;
+    color: #2D7BFF;
+    font-size: 11px;
     font-weight: 700;
-    color: var(--kai-txt3);
-    text-transform: uppercase;
 }
 
-.add-more-box:hover {
-    border-color: var(--kai-blue);
-    color: var(--kai-blue);
-}
-
-.upload-stats {
-    font-size: 10px;
-    font-weight: 700;
-    color: var(--kai-txt3);
-    text-transform: uppercase;
-}
-
-/* Generate Button */
 .prime-generate-btn {
     width: 100%;
-    max-width: 400px;
-    background: var(--kai-blue);
-    color: #fff;
+    padding: 24px;
+    border-radius: 20px;
     border: none;
-    padding: 16px 32px;
-    border-radius: 16px;
-    font-family: 'Unbounded', sans-serif;
-    font-size: 13px;
-    font-weight: 800;
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+    color: #fff;
+    font-size: 18px;
+    font-weight: 900;
+    font-family: inherit;
     cursor: pointer;
     position: relative;
     overflow: hidden;
-    transition: transform 0.2s, box-shadow 0.2s;
+    box-shadow: 0 12px 32px rgba(45, 123, 255, 0.3), inset 0 2px 4px rgba(255,255,255,0.3);
+    transition: all 0.3s;
 }
-
-.prime-generate-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 32px rgba(var(--kai-blue-rgb), 0.4);
+.prime-generate-btn:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(45, 123, 255, 0.4), inset 0 2px 4px rgba(255,255,255,0.4);
 }
-
-.prime-generate-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.btn-wrap {
-    position: relative;
-    z-index: 10;
-}
-
 .btn-shine {
     position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    top: 0; left: -100%; width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
     animation: shine 3s infinite;
 }
+@keyframes shine { 0% { left: -100%; } 100% { left: 100%; } }
 
-@keyframes shine {
-    0% { left: -100%; }
-    20% { left: 100%; }
-    100% { left: 100%; }
-}
-
-/* ───── ANIMATIONS ───── */
-.slide-up-enter-active, .slide-up-leave-active { transition: all 0.5s ease; }
-.slide-up-enter-from { opacity: 0; transform: translateY(20px); }
-.slide-up-leave-to   { opacity: 0; transform: translateY(-20px); }
-
-.loading-shimmer {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-}
-
-.shimmer-icon {
-    width: 80px;
-    height: 80px;
-    border-radius: 20px;
-    background: rgba(255,255,255,0.03);
-}
-
-.shimmer-lines {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.line {
-    height: 16px;
-    background: rgba(255,255,255,0.03);
-    border-radius: 4px;
-}
-/* ───── POLLING SCREEN ───── */
+/* ═══════════════════════════════════════════
+   POLLING (LOADING) SCREEN - DEEP IMMERSION
+   ═══════════════════════════════════════════ */
 .polling-stage {
     display: flex;
+    align-items: center;
     justify-content: center;
-    align-items: center;
-    min-height: 400px;
+    padding: 80px 0;
 }
-
 .polling-box {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
-    border-radius: 40px;
-    padding: 64px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 48px;
+    text-align: center;
     max-width: 500px;
     width: 100%;
 }
-
 .polling-progress {
     position: relative;
     width: 160px;
     height: 160px;
+    margin: 0 auto 32px;
 }
-
 .progress-svg {
-    width: 100%;
-    height: 100%;
+    width: 160px;
+    height: 160px;
     transform: rotate(-90deg);
 }
-
-.progress-svg .track {
+.progress-svg circle {
     fill: none;
-    stroke: rgba(255,255,255,0.05);
-    stroke-width: 8;
-}
-
-.progress-svg .fill {
-    fill: none;
-    stroke: var(--kai-green);
-    stroke-width: 8;
+    stroke-width: 10;
     stroke-linecap: round;
-    stroke-dasharray: 440;
-    transition: stroke-dashoffset 1s ease;
 }
-
+.progress-svg .track { stroke: rgba(45, 123, 255, 0.1); }
+.progress-svg .fill {
+    stroke: url(#blue-grad);
+    stroke-dasharray: 440;
+    transition: stroke-dashoffset 1s ease-out;
+    filter: drop-shadow(0 0 12px rgba(45,123,255,0.6));
+}
 .progress-info {
     position: absolute;
     inset: 0;
@@ -1458,854 +1521,565 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
 }
-
-.bolt-icon {
-    font-size: 32px;
-    color: var(--kai-green);
-    margin-bottom: 4px;
-    animation: glow-pulse 2s infinite;
-}
-
-@keyframes glow-pulse {
-    0% { filter: drop-shadow(0 0 2px var(--kai-green)); opacity: 1; }
-    50% { filter: drop-shadow(0 0 10px var(--kai-green)); opacity: 0.7; }
-    100% { filter: drop-shadow(0 0 2px var(--kai-green)); opacity: 1; }
-}
-
 .percent-label {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--kai-green);
-}
-
-.status-content {
-    text-align: center;
-    width: 100%;
-}
-
-.status-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 16px;
-    font-weight: 800;
-    margin-bottom: 12px;
-}
-
-.message-scroller {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 32px;
-}
-
-.status-message {
-    font-size: 12.5px;
-    font-weight: 600;
-    color: var(--kai-txt3);
-}
-
-.progress-bar-container {
-    width: 100%;
-}
-
-.progress-bar-track {
-    height: 6px;
-    background: rgba(255,255,255,0.05);
-    border-radius: 3px;
-    overflow: hidden;
-    margin-bottom: 8px;
-}
-
-.progress-bar-fill {
-    height: 100%;
-    background: var(--kai-green);
-    border-radius: 3px;
-    transition: width 1s ease;
-}
-
-.progress-meta {
-    display: flex;
-    justify-content: space-between;
-    font-size: 8px;
+    font-size: 32px;
     font-weight: 900;
-    color: var(--kai-txt3);
-    letter-spacing: 0.1em;
-}
-/* ───── RESULTS STAGE ───── */
-.results-stage {
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-    animation: fade-in-up 0.8s ease-out;
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-@keyframes fade-in-up {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
+.status-title { font-size: 24px; font-weight: 900; color: #0F172A; margin-bottom: 12px; }
+.status-message { font-size: 15px; color: #64748B; font-weight: 500; }
 
+.progress-bar-container { margin-top: 40px; }
+.progress-bar-track { height: 6px; background: rgba(15,23,42,0.05); border-radius: 100px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #2D7BFF, #8B5CF6); transition: width 1s linear; }
+.progress-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94A3B8; }
+.bolt-icon { font-size: 22px; color: #2D7BFF; margin-bottom: 6px; }
+.message-scroller { min-height: 28px; }
+.recommendation-inner { display: flex; gap: 20px; align-items: flex-start; }
+.recommendation-content { flex: 1; min-width: 0; }
+.recommendation-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,0.7); animation: s-pulse 2s ease-in-out infinite; }
+.score-val { font-weight: 900; color: #0F172A; }
+.upload-stats { font-size: 12px; color: #94A3B8; font-weight: 600; margin-top: 12px; text-align: center; }
+.hidden-input { display: none; }
+.files-preview-container { }
+.hero-content { }
+.hero-actions { margin-top: 8px; }
+.upload-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; padding: 20px; }
+.prompt-icon { width: 56px; height: 56px; border-radius: 18px; background: rgba(45,123,255,0.07); color: #2D7BFF; display: flex; align-items: center; justify-content: center; font-size: 24px; }
+.prompt-title { font-size: 16px; font-weight: 800; color: #0F172A; margin: 0; }
+.prompt-text { font-size: 13px; color: #64748B; text-align: center; line-height: 1.6; max-width: 380px; margin: 0; }
+
+/* ═══════════════════════════════════════════
+   RESULTS HERO — Ultra Premium
+   ═══════════════════════════════════════════ */
 .results-hero {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
-    border-radius: 32px;
-    padding: 40px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 40px;
-}
-
-.hero-main-info {
-    display: flex;
-    gap: 24px;
-    align-items: center;
-}
-
-.model-large-icon {
-    width: 100px;
-    height: 100px;
-    background: var(--kai-bg);
-    border: 2px solid var(--accent);
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 50px;
-    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
-}
-
-.model-scope {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-}
-
-.scope-tag {
-    font-size: 8px;
-    font-weight: 900;
-    letter-spacing: 0.15em;
-}
-
-.scope-val {
-    font-size: 10px;
-    font-weight: 700;
-    color: var(--kai-txt3);
-    background: rgba(255,255,255,0.05);
-    padding: 2px 8px;
-    border-radius: 4px;
-}
-
-.model-big-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 24px;
-    font-weight: 900;
-    margin: 0;
-    line-height: 1.1;
-}
-
-.hero-rationale {
-    background: rgba(255,255,255,0.02);
-    border-left: 3px solid var(--kai-blue);
-    padding: 20px 24px;
-    border-radius: 0 20px 20px 0;
-}
-
-.rationale-header {
-    font-size: 9px;
-    font-weight: 800;
-    text-transform: uppercase;
-    color: var(--kai-blue);
-    margin-bottom: 12px;
-    letter-spacing: 0.05em;
-}
-
-.rationale-text {
-    font-size: 13.5px;
-    font-weight: 600;
-    line-height: 1.6;
-    color: var(--kai-txt2);
-    font-style: italic;
-    margin: 0;
-}
-
-.platform-strip {
-    grid-column: 1 / -1;
-    display: flex;
-    gap: 12px;
-    padding-top: 24px;
-    border-top: 1px solid var(--kai-border);
-}
-
-.p-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: var(--kai-bg3);
-    padding: 8px 16px;
-    border-radius: 12px;
-    border: 1px solid var(--kai-border);
-}
-
-.p-icon {
-    font-size: 14px;
-    color: var(--kai-blue);
-}
-
-.p-name {
-    font-size: 11px;
-    font-weight: 700;
-}
-
-/* CALENDAR SECTION */
-.calendar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: 32px;
-    padding: 0 8px;
-}
-
-.calendar-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 18px;
-    font-weight: 800;
-    margin: 0 0 4px 0;
-}
-
-.calendar-sub {
-    font-size: 12.5px;
-    color: var(--kai-txt3);
-    margin: 0;
-}
-
-.posts-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 24px;
-}
-
-.post-card {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
-    border-radius: 24px;
-    overflow: hidden;
-    transition: all 0.3s;
-    display: flex;
-    flex-direction: column;
-}
-
-.post-card:hover {
-    transform: translateY(-8px);
-    border-color: var(--kai-blue);
-    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
-}
-
-.post-media {
-    aspect-ratio: 4/5;
-    background: var(--kai-bg3);
+    background: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(244,247,255,0.95) 100%);
+    border-radius: 28px;
+    padding: 32px;
+    border: 1px solid rgba(45,123,255,0.1);
+    box-shadow: 0 8px 40px rgba(45,123,255,0.07), 0 2px 8px rgba(15,23,42,0.04);
     position: relative;
-    cursor: pointer;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }
-
-.media-obj {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.5s;
-}
-
-.post-card:hover .media-obj {
-    transform: scale(1.05);
-}
-
-.media-overlay {
+.rh-bg-orb {
     position: absolute;
-    inset: 0;
-    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 40%);
+    border-radius: 50%;
+    filter: blur(60px);
+    pointer-events: none;
+}
+.rh-bg-orb--1 {
+    width: 300px; height: 300px;
+    top: -80px; right: -60px;
+    background: radial-gradient(circle, rgba(45,123,255,0.12), transparent 70%);
+}
+.rh-bg-orb--2 {
+    width: 200px; height: 200px;
+    bottom: -40px; left: -40px;
+    background: radial-gradient(circle, rgba(16,185,129,0.1), transparent 70%);
+}
+
+.rh-top {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s;
+    align-items: flex-start;
+    gap: 20px;
+    flex-wrap: wrap;
+    position: relative; z-index: 1;
 }
 
-.post-card:hover .media-overlay {
-    opacity: 1;
-}
-
-.play-hint {
-    font-size: 48px;
-    color: #fff;
-    opacity: 0.8;
-}
-
-.platform-badge {
-    position: absolute;
-    top: 16px;
-    left: 16px;
-    width: 32px;
-    height: 32px;
-    background: rgba(0,0,0,0.5);
-    backdrop-blur: 8px;
-    border-radius: 10px;
+.rh-model-card {
     display: flex;
     align-items: center;
-    justify-content: center;
-    color: var(--kai-green);
-    border: 1px solid rgba(255,255,255,0.1);
-}
-
-.media-loading {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     gap: 16px;
-    color: var(--kai-green);
-    padding: 24px;
-    text-align: center;
+    background: rgba(255,255,255,0.9);
+    border: 1px solid rgba(var(--mc, 45, 123, 255), 0.2);
+    border-radius: 20px;
+    padding: 18px 22px;
+    flex: 1; min-width: 260px;
+    box-shadow: 0 4px 20px rgba(15,23,42,0.04);
 }
-
-.media-loading span {
-    font-size: 10px;
-    font-weight: 800;
-    text-transform: uppercase;
-}
-
-.media-empty {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    color: var(--kai-txt3);
-}
-
-.post-info {
-    padding: 20px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.post-meta {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 12px;
-}
-
-.post-date, .post-time {
-    font-size: 9px;
-    font-weight: 800;
-    color: var(--kai-txt3);
-    background: rgba(255,255,255,0.03);
-    padding: 2px 8px;
-    border-radius: 4px;
-}
-
-.post-theme {
-    font-size: 14px;
-    font-weight: 700;
-    margin: 0 0 8px 0;
-    color: var(--kai-txt);
-}
-
-.post-excerpt {
-    font-size: 11.5px;
-    line-height: 1.5;
-    color: var(--kai-txt2);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    margin-bottom: 20px;
-}
-
-.post-actions {
-    margin-top: auto;
-    display: flex;
-    gap: 8px;
-    margin-bottom: 12px;
-}
-
-.btn-group {
-    display: flex;
-    gap: 4px;
-    background: rgba(255,255,255,0.03);
-    padding: 4px;
-    border-radius: 10px;
-}
-
-.action-btn {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    border: none;
-    background: transparent;
-    color: var(--kai-txt2);
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.action-btn:hover {
-    background: var(--kai-bg3);
-    color: var(--kai-blue);
-}
-
-.publish-btn {
-    flex: 1;
-    font-size: 10px !important;
-    font-weight: 800 !important;
-    padding: 4px !important;
-    border-radius: 10px !important;
-    background: var(--kai-green) !important;
-    border: none !important;
-    text-transform: uppercase;
-}
-
-.status-tag {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    font-weight: 800;
-    border-radius: 10px;
-    text-transform: uppercase;
-}
-
-.status-tag.published {
-    background: rgba(var(--kai-green-rgb), 0.1);
-    color: var(--kai-green);
-}
-
-.target-btn {
-    width: 100%;
-    background: var(--kai-bg3);
-    border: 1px solid var(--kai-border);
-    color: var(--kai-txt2);
-    border-radius: 12px;
-    font-size: 10px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.target-btn:hover {
-    background: var(--kai-blue);
-    color: #fff;
-    border-color: var(--kai-blue);
-}
-
-.rec-box {
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--kai-txt2);
-    white-space: pre-line;
-    padding: 16px;
-    background: rgba(255,255,255,0.02);
-    border-radius: 12px;
-}
-
-/* ───── WEEKLY SPRINTS (План реализации по неделям) ───── */
-.sprints-section {
-    margin-top: 48px;
-    margin-bottom: 48px;
-}
-
-.sprints-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.sprint-item {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
+.rh-model-icon {
+    width: 60px; height: 60px;
     border-radius: 16px;
-    overflow: hidden;
-    transition: all 0.3s ease;
-}
-
-.sprint-item:hover {
-    border-color: var(--kai-blue);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-}
-
-.sprint-item.is-active {
-    border-color: var(--kai-blue);
-    background: rgba(var(--kai-blue-rgb), 0.03);
-}
-
-.sprint-summary {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 20px 24px;
-    cursor: pointer;
-    transition: background 0.2s ease;
-}
-
-.sprint-summary:hover {
-    background: rgba(var(--kai-blue-rgb), 0.05);
-}
-
-.week-num {
-    width: 40px;
-    height: 40px;
-    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green));
-    color: #fff;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'Unbounded', sans-serif;
-    font-size: 16px;
-    font-weight: 800;
+    background: linear-gradient(135deg, var(--mc, #2D7BFF), color-mix(in srgb, var(--mc, #2D7BFF) 70%, #000));
+    display: flex; align-items: center; justify-content: center;
+    font-size: 28px;
+    box-shadow: 0 6px 18px color-mix(in srgb, var(--mc, #2D7BFF) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.3);
     flex-shrink: 0;
 }
-
-.week-info {
-    flex: 1;
-    min-width: 0;
+.rh-model-info { min-width: 0; }
+.rh-model-label {
+    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
+    letter-spacing: 0.12em; color: #94A3B8; margin-bottom: 4px;
+}
+.rh-model-name {
+    font-size: 17px; font-weight: 800; color: #0F172A;
+    letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px;
+}
+.rh-model-badge {
+    display: inline-block;
+    padding: 2px 8px; border-radius: 6px;
+    font-size: 10px; font-weight: 700;
+    background: rgba(45,123,255,0.08); color: #2D7BFF;
+    text-transform: uppercase; letter-spacing: 0.06em;
 }
 
-.week-title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--kai-txt);
-    margin: 0 0 8px 0;
-}
-
-.week-tags {
-    display: flex;
+.rh-stats {
+    display: flex; gap: 12px; align-items: center;
     flex-wrap: wrap;
-    gap: 8px;
+}
+.rh-stat {
+    background: rgba(255,255,255,0.9);
+    border: 1px solid rgba(15,23,42,0.07);
+    border-radius: 16px;
+    padding: 16px 20px;
+    text-align: center;
+    min-width: 80px;
+    box-shadow: 0 2px 12px rgba(15,23,42,0.03);
+}
+.rh-stat__val {
+    font-size: 28px; font-weight: 900; color: #0F172A;
+    letter-spacing: -0.04em; line-height: 1;
+    background: linear-gradient(135deg, #2D7BFF, #7C3AED);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+.rh-stat__label {
+    font-size: 10px; font-weight: 700; text-transform: uppercase;
+    letter-spacing: 0.08em; color: #94A3B8; margin-top: 4px;
 }
 
+.rh-rationale {
+    display: flex; align-items: flex-start; gap: 16px;
+    background: rgba(45,123,255,0.04);
+    border: 1px solid rgba(45,123,255,0.12);
+    border-radius: 18px;
+    padding: 20px 24px;
+    position: relative; z-index: 1;
+}
+.rh-rationale__icon {
+    width: 38px; height: 38px;
+    border-radius: 11px;
+    background: linear-gradient(135deg, rgba(45,123,255,0.15), rgba(139,92,246,0.1));
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; color: #2D7BFF; flex-shrink: 0;
+}
+.rh-rationale__body { flex: 1; min-width: 0; }
+.rh-rationale__label {
+    font-size: 10px; font-weight: 800; text-transform: uppercase;
+    letter-spacing: 0.1em; color: #2D7BFF; margin-bottom: 6px;
+}
+.rh-rationale__text {
+    font-size: 14.5px; color: #334155; line-height: 1.75;
+    font-style: italic; margin: 0; font-weight: 500;
+}
+
+.rh-platforms {
+    display: flex; align-items: center; gap: 8px;
+    flex-wrap: wrap; position: relative; z-index: 1;
+}
+.rh-platforms__label {
+    font-size: 11px; font-weight: 700; color: #94A3B8;
+    text-transform: uppercase; letter-spacing: 0.06em;
+}
+.rh-plat-pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: 99px;
+    background: rgba(255,255,255,0.9);
+    border: 1px solid rgba(15,23,42,0.08);
+    font-size: 12px; font-weight: 700; color: #334155;
+    box-shadow: 0 2px 8px rgba(15,23,42,0.03);
+    transition: all 0.2s;
+}
+.rh-plat-pill:hover {
+    border-color: rgba(45,123,255,0.25); color: #2D7BFF;
+    transform: translateY(-1px);
+}
+
+/* ════════════════════════════════
+   SPRINTS — Color-coded Timeline
+   ════════════════════════════════ */
+.sprints-section { }
+.section-title-row {
+    display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
+}
+.section-title-row i {
+    width: 44px; height: 44px; border-radius: 14px;
+    background: rgba(45,123,255,0.08); color: #2D7BFF;
+    display: flex; align-items: center; justify-content: center; font-size: 18px;
+}
+.section-title-row h3 { font-size: 26px; font-weight: 900; color: #0F172A; margin: 0; letter-spacing: -0.03em; }
+
+.sprints-list { display: flex; flex-direction: column; gap: 10px; }
+
+/* Color tokens by week position */
+.sprint-item:nth-child(4n+1) { --sw: 45, 123, 255; }
+.sprint-item:nth-child(4n+2) { --sw: 139, 92, 246; }
+.sprint-item:nth-child(4n+3) { --sw: 16, 185, 129; }
+.sprint-item:nth-child(4n)   { --sw: 249, 115, 22; }
+
+.sprint-item {
+    background: #fff;
+    border-radius: 20px;
+    border: 1px solid rgba(15,23,42,0.05);
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
+    position: relative;
+}
+.sprint-item::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0;
+    width: 4px; height: 100%;
+    background: rgb(var(--sw, 45, 123, 255));
+    border-radius: 20px 0 0 20px;
+}
+.sprint-item.is-active {
+    border-color: rgba(var(--sw, 45, 123, 255), 0.2);
+    box-shadow: 0 12px 36px rgba(var(--sw, 45, 123, 255), 0.08);
+}
+.sprint-summary {
+    display: flex; align-items: center; gap: 16px;
+    padding: 18px 24px 18px 28px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.sprint-summary:hover { background: rgba(var(--sw, 45, 123, 255), 0.03); }
+
+.week-num {
+    width: 48px; height: 48px; border-radius: 14px;
+    background: rgba(var(--sw, 45, 123, 255), 0.08);
+    color: rgb(var(--sw, 45, 123, 255));
+    border: 1px solid rgba(var(--sw, 45, 123, 255), 0.18);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 22px; font-weight: 900; flex-shrink: 0;
+    transition: all 0.3s;
+}
+.is-active .week-num {
+    background: rgb(var(--sw, 45, 123, 255));
+    color: #fff; border-color: transparent;
+    box-shadow: 0 6px 18px rgba(var(--sw, 45, 123, 255), 0.38);
+}
+
+.week-info { flex: 1; min-width: 0; }
+.week-title { font-size: 17px; font-weight: 800; color: #0F172A; margin: 0 0 6px 0; }
+.week-tags { display: flex; gap: 6px; flex-wrap: wrap; }
 .week-tag {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--kai-txt2);
-    background: rgba(var(--kai-blue-rgb), 0.08);
-    border: 1px solid rgba(var(--kai-blue-rgb), 0.15);
-    padding: 4px 10px;
-    border-radius: 6px;
-    white-space: nowrap;
-    transition: all 0.2s ease;
-}
-
-.week-tag:hover {
-    background: rgba(var(--kai-blue-rgb), 0.15);
-    border-color: var(--kai-blue);
-    color: var(--kai-blue);
+    font-size: 10.5px; font-weight: 700;
+    color: rgb(var(--sw, 45, 123, 255));
+    background: rgba(var(--sw, 45, 123, 255), 0.08);
+    padding: 3px 9px; border-radius: 100px;
+    border: 1px solid rgba(var(--sw, 45, 123, 255), 0.15);
 }
 
 .chevron {
-    font-size: 14px;
-    color: var(--kai-txt3);
-    transition: transform 0.3s ease;
-    flex-shrink: 0;
-}
-
-/* Expand animation */
-.expand-enter-active,
-.expand-leave-active {
-    transition: all 0.3s ease;
-    max-height: 500px;
-    overflow: hidden;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-    max-height: 0;
-    opacity: 0;
+    margin-left: auto; color: #CBD5E1; font-size: 13px; flex-shrink: 0;
+    transition: color 0.3s, transform 0.3s;
 }
+.is-active .chevron { color: rgb(var(--sw, 45, 123, 255)); }
 
 .sprint-details {
-    padding: 0 24px 24px;
-    border-top: 1px solid var(--kai-border);
+    border-top: 1px solid rgba(15,23,42,0.04);
+    background: #FAFBFF;
 }
-
 .details-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-    padding-top: 20px;
+    display: grid; grid-template-columns: 1fr 1fr;
+    gap: 0; padding: 0;
 }
-
+.detail-col {
+    padding: 20px 28px;
+}
+.detail-col:first-child { border-right: 1px solid rgba(15,23,42,0.05); }
 .detail-col label {
-    display: block;
-    font-size: 10px;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--kai-txt3);
-    margin-bottom: 12px;
+    display: block; font-size: 9.5px; font-weight: 800;
+    text-transform: uppercase; letter-spacing: 0.1em;
+    color: rgb(var(--sw, 45, 123, 255)); margin-bottom: 12px;
 }
-
-.themes-cloud {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
+.themes-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
 .cloud-tag {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--kai-txt2);
-    background: rgba(var(--kai-green-rgb), 0.08);
-    border: 1px solid rgba(var(--kai-green-rgb), 0.15);
-    padding: 6px 12px;
-    border-radius: 8px;
-    transition: all 0.2s ease;
+    font-size: 12px; font-weight: 600; color: #334155;
+    background: rgba(255,255,255,0.9); padding: 5px 12px; border-radius: 10px;
+    border: 1px solid rgba(15,23,42,0.08);
+}
+.rec-box {
+    font-size: 13px; color: #475569; line-height: 1.7; font-weight: 500;
 }
 
-.cloud-tag:hover {
-    background: rgba(var(--kai-green-rgb), 0.15);
-    border-color: var(--kai-green);
-    color: var(--kai-green);
+/* expand transition */
+.expand-enter-active, .expand-leave-active {
+    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
+    overflow: hidden;
+}
+.expand-enter-from, .expand-leave-to {
+    max-height: 0 !important; opacity: 0;
+}
+.expand-enter-to, .expand-leave-from {
+    max-height: 400px; opacity: 1;
 }
 
-/* ───── BOTTOM ACTION (Запуск таргета) ───── */
-.bottom-action-section {
-    margin-top: 64px;
-    margin-bottom: 32px;
+/* ════════════════════════════════
+   POST CALENDAR — Social-native Cards
+   ════════════════════════════════ */
+.calendar-section { }
+.calendar-header {
+    display: flex; align-items: flex-end; justify-content: space-between;
+    margin-bottom: 24px;
 }
-
-.bottom-action-card {
-    background: linear-gradient(135deg, rgba(var(--kai-blue-rgb), 0.08) 0%, rgba(var(--kai-green-rgb), 0.08) 100%);
-    border: 1px solid rgba(var(--kai-blue-rgb), 0.2);
-    border-radius: 24px;
-    padding: 40px;
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    transition: all 0.3s ease;
-}
-
-.bottom-action-card:hover {
-    border-color: var(--kai-blue);
-    box-shadow: 0 12px 40px rgba(var(--kai-blue-rgb), 0.15);
-    transform: translateY(-4px);
-}
-
-.bottom-action-icon {
-    width: 72px;
-    height: 72px;
-    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green));
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    color: #fff;
-    flex-shrink: 0;
-    box-shadow: 0 8px 24px rgba(var(--kai-blue-rgb), 0.3);
-}
-
-.bottom-action-text {
-    flex: 1;
-}
-
-.bottom-action-text h4 {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--kai-txt);
-    margin: 0 0 8px 0;
-}
-
-.bottom-action-text p {
-    font-size: 13px;
-    color: var(--kai-txt2);
-    line-height: 1.6;
-    margin: 0;
-}
-
-.bottom-action-btn {
-    font-size: 14px !important;
-    font-weight: 800 !important;
-    padding: 14px 32px !important;
-    border-radius: 16px !important;
-    background: linear-gradient(135deg, var(--kai-blue), var(--kai-green)) !important;
-    border: none !important;
-    color: #fff !important;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    box-shadow: 0 8px 24px rgba(var(--kai-blue-rgb), 0.3) !important;
-    transition: all 0.3s ease !important;
-    flex-shrink: 0;
-}
-
-.bottom-action-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 12px 32px rgba(var(--kai-blue-rgb), 0.4) !important;
-}
-
-/* ───── POST CALENDAR ───── */
-.calendar-section { margin-top: 48px; }
-.calendar-header { margin-bottom: 24px; border-bottom: 1px solid var(--kai-border); padding-bottom: 16px; }
-.calendar-title { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 800; margin: 0; }
-.calendar-sub { font-size: 11px; color: var(--kai-txt3); text-transform: uppercase; letter-spacing: 0.1em; }
+.header-left { }
+.calendar-title { font-size: 26px; font-weight: 900; color: #0F172A; margin: 0 0 4px 0; letter-spacing: -0.03em; }
+.calendar-sub { font-size: 13.5px; color: #94A3B8; font-weight: 500; margin: 0; }
 
 .posts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 18px;
 }
 
 .post-card {
-    background: var(--kai-bg2);
-    border: 1px solid var(--kai-border);
-    border-radius: 24px;
+    background: #fff;
+    border: 1px solid rgba(15,23,42,0.05);
+    border-radius: 22px;
     overflow: hidden;
-    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-    display: flex;
-    flex-direction: column;
+    display: flex; flex-direction: column;
+    transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
+    box-shadow: 0 4px 20px rgba(15,23,42,0.04);
 }
-
 .post-card:hover {
-    transform: translateY(-8px);
-    border-color: var(--kai-blue);
-    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+    transform: translateY(-7px);
+    box-shadow: 0 22px 52px rgba(45,123,255,0.1);
+    border-color: rgba(45,123,255,0.15);
 }
 
+/* Media zone */
 .post-media {
+    aspect-ratio: 4/3;
+    background: #0F172A;
     position: relative;
-    min-height: 200px;
-    max-height: 400px;
-    background: var(--kai-bg3);
-    cursor: pointer;
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    cursor: pointer;
+    flex-shrink: 0;
 }
+.media-overlay-loading {
+    position: absolute; inset: 0; z-index: 10;
+    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-size: 28px;
+}
+.media-loading-state {
+    position: absolute; inset: 0;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 10px;
+    background: linear-gradient(135deg, #0F172A, #1E293B);
+    color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 600;
+}
+.spinner-box { font-size: 26px; color: #2D7BFF; }
+
+.video-preview-box,
+.image-preview-box { position: absolute; inset: 0; }
 
 .preview-obj {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    transition: transform 0.6s;
-    background: transparent;
+    width: 100%; height: 100%; object-fit: cover;
+    transition: transform 0.5s ease;
 }
 .post-card:hover .preview-obj { transform: scale(1.05); }
 
 .preview-overlay {
     position: absolute; inset: 0;
-    background: rgba(0,0,0,0.4);
-    display: flex; align-items: center; justify-content: center;
-    opacity: 0; transition: all 0.3s;
+    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%);
+    display: flex; align-items: flex-end; justify-content: space-between;
+    padding: 12px 14px; opacity: 0;
+    transition: opacity 0.3s;
 }
-
 .post-card:hover .preview-overlay { opacity: 1; }
-
 .play-btn-circle {
-    width: 54px; height: 54px;
-    background: rgba(255,255,255,0.15);
-    backdrop-filter: blur(10px);
-    border-radius: 50%;
+    width: 42px; height: 42px; border-radius: 50%;
+    background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
     display: flex; align-items: center; justify-content: center;
-    color: #fff; font-size: 18px;
-    border: 1px solid rgba(255,255,255,0.2);
+    color: #fff; font-size: 15px;
+    border: 1px solid rgba(255,255,255,0.3);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
-
 .platform-tag {
-    position: absolute; top: 12px; left: 12px;
-    background: rgba(0,0,0,0.5);
-    backdrop-filter: blur(8px);
-    padding: 6px; border-radius: 8px;
-    color: var(--kai-blue); font-size: 14px;
-}
-
-.media-loading-state, .empty-media-placeholder {
-    height: 100%; display: flex; flex-direction: column;
-    align-items: center; justify-content: center; gap: 12px;
-    background: var(--kai-bg3); color: var(--kai-txt3);
-}
-
-.empty-media-placeholder i { font-size: 24px; color: var(--kai-blue); }
-.empty-media-placeholder span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
-
-.media-overlay-loading {
-    position: absolute; inset: 0; background: rgba(0,0,0,0.7);
+    width: 32px; height: 32px; border-radius: 9px;
+    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
     display: flex; align-items: center; justify-content: center;
-    z-index: 20; color: var(--kai-blue); font-size: 24px;
+    color: #fff; font-size: 14px;
+    border: 1px solid rgba(255,255,255,0.15);
 }
+.empty-media-placeholder {
+    position: absolute; inset: 0;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 8px;
+    background: linear-gradient(135deg, #1E293B, #0F172A);
+    color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 600;
+    cursor: pointer; transition: background 0.25s;
+}
+.empty-media-placeholder i { font-size: 26px; color: rgba(255,255,255,0.28); transition: color 0.25s; }
+.empty-media-placeholder:hover { background: linear-gradient(135deg, #1E3A60, #102040); }
+.empty-media-placeholder:hover i { color: #60A5FA; }
+.empty-media-placeholder:hover span { color: rgba(255,255,255,0.75); }
 
-.post-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
-.post-header-info { display: flex; gap: 8px; margin-bottom: 10px; }
-.post-tag-date { font-size: 9px; font-weight: 800; background: rgba(var(--kai-blue-rgb), 0.1); color: var(--kai-blue); padding: 2px 8px; border-radius: 4px; }
-.post-tag-time { font-size: 9px; font-weight: 700; color: var(--kai-txt3); }
-
-.post-card-title { font-size: 15px; font-weight: 800; margin-bottom: 8px; color: var(--kai-txt); }
-.post-card-text { font-size: 12.5px; color: var(--kai-txt2); line-height: 1.5; margin-bottom: 20px; line-clamp: 3; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
-
+/* Post body */
+.post-body {
+    padding: 16px 18px 14px;
+    display: flex; flex-direction: column; flex: 1; gap: 7px;
+}
+.post-header-info {
+    display: flex; align-items: center; gap: 7px;
+}
+.post-tag-date {
+    font-size: 10.5px; font-weight: 700; color: #2D7BFF;
+    background: rgba(45,123,255,0.07); padding: 2px 8px; border-radius: 100px;
+}
+.post-tag-time {
+    font-size: 10.5px; font-weight: 600; color: #94A3B8;
+}
+.post-card-title {
+    font-size: 13.5px; font-weight: 800; color: #0F172A; margin: 0;
+    letter-spacing: -0.015em; line-height: 1.4;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.post-card-text {
+    font-size: 12px; color: #64748B; line-height: 1.65; margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+    flex: 1;
+}
 .post-card-actions {
-    margin-top: auto; display: flex; justify-content: space-between; align-items: center;
-    padding-top: 16px; border-top: 1px solid var(--kai-border); gap: 10px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding-top: 10px; border-top: 1px solid rgba(15,23,42,0.05);
+    margin-top: auto;
 }
-
 .mini-btn-group { display: flex; gap: 4px; }
 .mini-btn {
-    width: 34px; height: 34px; background: var(--kai-bg3); border: 1px solid var(--kai-border);
-    border-radius: 10px; color: var(--kai-txt2); display: flex; align-items: center; justify-content: center;
-    cursor: pointer; transition: all 0.2s;
+    width: 30px; height: 30px; border-radius: 8px;
+    border: 1px solid rgba(15,23,42,0.07); background: #F8FAFC;
+    color: #64748B; cursor: pointer; font-size: 12px;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.2s;
 }
-.mini-btn:hover { background: var(--kai-blue); color: #fff; border-color: var(--kai-blue); }
+.mini-btn:hover { border-color: rgba(45,123,255,0.25); color: #2D7BFF; background: rgba(45,123,255,0.04); }
+.mini-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 
 .card-publish-btn {
-    font-family: 'Unbounded', sans-serif !important; font-size: 9px !important; font-weight: 800 !important;
-    padding: 8px 16px !important; border-radius: 12px !important;
-    background: var(--kai-green) !important; border: none !important;
+    padding: 7px 13px !important; border-radius: 8px !important;
+    font-size: 11.5px !important; font-weight: 700 !important;
+    font-family: 'Onest', sans-serif !important;
+    background: linear-gradient(135deg, #2D7BFF, #1E5FD8) !important;
+    border: none !important; color: #fff !important;
+    box-shadow: 0 3px 10px rgba(45,123,255,0.22) !important;
+    transition: all 0.2s !important;
+}
+.card-publish-btn:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 16px rgba(45,123,255,0.32) !important;
+}
+.card-status-label {
+    display: inline-flex; align-items: center; gap: 5px;
+    font-size: 11px; font-weight: 700;
+    padding: 5px 10px; border-radius: 8px;
+}
+.card-status-label.published {
+    color: #10B981; background: rgba(16,185,129,0.08);
+    border: 1px solid rgba(16,185,129,0.2);
 }
 
-.card-status-label { font-size: 9px; font-weight: 900; color: var(--kai-green); display: flex; align-items: center; gap: 4px; text-transform: uppercase; }
-
-/* ───── MODAL ───── */
-.premium-modal { 
-    :deep(.p-dialog-content) { background: transparent !important; }
-    :deep(.p-dialog) { 
-        background: rgba(0, 0, 0, 0.7) !important; 
-        backdrop-filter: blur(10px);
-        border: none !important;
-    }
-    :deep(.p-dialog-header) { 
-        background: transparent !important; 
-        border: none !important;
-    }
-    :deep(.p-dialog-mask) { 
-        background: transparent !important;
-    }
+/* Bottom action */
+.bottom-action-section { }
+.bottom-action-card {
+    background: linear-gradient(135deg, rgba(45,123,255,0.05), rgba(139,92,246,0.05));
+    border: 1px solid rgba(45,123,255,0.14);
+    border-radius: 24px; padding: 30px 36px;
+    display: flex; align-items: center; gap: 24px;
 }
-.modal-content-wrapper { position: relative; max-width: 900px; margin: 0 auto; }
-.modal-close-trigger { position: absolute; top: -40px; right: 0; color: #fff !important; background: rgba(255,255,255,0.1) !important; }
-.modal-media-container { background: #000; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
-.main-media { width: 100%; max-height: 70vh; display: block; }
-.modal-info-panel { padding: 32px; background: var(--kai-bg2); }
-.panel-meta { display: flex; align-items: center; gap: 8px; color: var(--kai-blue); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
-.panel-title { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 12px; }
-.panel-text { font-size: 14px; color: var(--kai-txt2); line-height: 1.6; }
-
-@media (max-width: 768px) {
-    .strategy-page { padding: 16px; }
-    .posts-grid { grid-template-columns: 1fr; }
-    .bottom-action-card {
-        flex-direction: column;
-        text-align: center;
-        padding: 32px 24px;
-    }
-    .bottom-action-btn {
-        width: 100% !important;
-    }
+.bottom-action-icon {
+    width: 60px; height: 60px; border-radius: 18px;
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+    color: #fff; font-size: 26px;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 8px 24px rgba(45,123,255,0.28); flex-shrink: 0;
 }
+.bottom-action-text { flex: 1; }
+.bottom-action-text h4 { font-size: 19px; font-weight: 900; color: #0F172A; margin: 0 0 5px 0; }
+.bottom-action-text p { font-size: 13.5px; color: #64748B; margin: 0; line-height: 1.6; }
+.bottom-action-btn {
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6) !important;
+    border: none !important; color: #fff !important;
+    padding: 13px 26px !important; border-radius: 14px !important;
+    font-size: 14px !important; font-weight: 800 !important;
+    font-family: 'Onest', sans-serif !important;
+    white-space: nowrap !important;
+    box-shadow: 0 8px 24px rgba(45,123,255,0.28) !important;
+    transition: all 0.25s !important;
+}
+.bottom-action-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 32px rgba(45,123,255,0.4) !important;
+}
+
+/* Modal */
+.premium-modal { background: transparent !important; }
+.modal-content-wrapper {
+    width: 860px; max-width: 95vw; border-radius: 24px; overflow: hidden;
+    background: #000; box-shadow: 0 32px 72px rgba(0,0,0,0.55);
+    position: relative;
+}
+.modal-close-trigger {
+    position: absolute !important; top: 14px; right: 14px; z-index: 10;
+    background: rgba(0,0,0,0.5) !important; backdrop-filter: blur(8px);
+    color: #fff !important; width: 36px !important; height: 36px !important;
+    border-radius: 50% !important;
+}
+.modal-media-container { display: flex; max-height: 85vh; }
+.main-media { flex: 1; min-width: 0; max-height: 85vh; object-fit: contain; }
+.main-media.img { background: #000; }
+.modal-info-panel {
+    width: 260px; flex-shrink: 0; background: #0F172A; padding: 24px;
+    display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
+}
+.panel-meta { display: flex; align-items: center; gap: 8px; color: #64748B; font-size: 12px; font-weight: 700; }
+.panel-meta i { font-size: 16px; color: #94A3B8; }
+.panel-title { font-size: 15px; font-weight: 800; color: #fff; margin: 0; line-height: 1.4; }
+.panel-text { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0; }
+
+/* Shimmer / loading */
+.loading-shimmer { display: flex; gap: 16px; align-items: center; padding: 8px 0; }
+.shimmer-icon {
+    width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 400% 100%; animation: shimmer 1.5s infinite;
+}
+.shimmer-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; }
+.shimmer-lines .line {
+    height: 12px; border-radius: 6px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 400% 100%; animation: shimmer 1.5s infinite;
+}
+.shimmer-lines .line.w-1\/3 { width: 33%; }
+.shimmer-lines .line.w-full { width: 100%; }
+@keyframes shimmer { 0% { background-position: -400% 0; } 100% { background-position: 400% 0; } }
+
+/* Modifiers */
+.modifiers-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.mod-pill {
+    font-size: 11px; font-weight: 700; color: #8B5CF6;
+    background: rgba(139,92,246,0.07); border: 1px solid rgba(139,92,246,0.15);
+    padding: 4px 12px; border-radius: 100px;
+}
+
+/* Misc transitions */
+.slide-up-enter-active, .slide-up-leave-active { transition: all 0.4s; }
+.slide-up-enter-from { opacity: 0; transform: translateY(8px); }
+.slide-up-leave-to { opacity: 0; transform: translateY(-8px); }
+
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 </style>
+
+
+
+
diff --git a/src/views/pages/marketing/MarketingStrategyV3List.vue b/src/views/pages/marketing/MarketingStrategyV3List.vue
index 86919a6..5e55941 100644
--- a/src/views/pages/marketing/MarketingStrategyV3List.vue
+++ b/src/views/pages/marketing/MarketingStrategyV3List.vue
@@ -1,6 +1,8 @@
-<script setup>
+<script setup>
 import MarketingV3Service from '@/service/MarketingV3Service';
 import { STRATEGY_MODELS, DEFAULT_STRATEGY_MODEL } from '@/config/marketingModels';
+import Toast from 'primevue/toast';
+import Paginator from 'primevue/paginator';
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -13,7 +15,7 @@ const loading = ref(false);
 const searchQuery = ref('');
 const filterStatus = ref('');
 const currentPage = ref(1);
-const pageSize = 10;
+const pageSize = 12;
 
 const STATUS_FILTERS = [
     { label: 'Все', value: '' },
@@ -23,11 +25,27 @@ const STATUS_FILTERS = [
     { label: 'Ошибка', value: 'FAILED' }
 ];
 
+const statusStyle = (s) => ({
+    COMPLETED: { color: '#10B981', bg: 'rgba(16,185,129,0.1)', border: 'rgba(16,185,129,0.25)', accent: '#10B981', icon: 'pi pi-check-circle' },
+    PROCESSING: { color: '#2D7BFF', bg: 'rgba(45,123,255,0.1)', border: 'rgba(45,123,255,0.25)', accent: '#2D7BFF', icon: 'pi pi-spin pi-spinner' },
+    QUEUED: { color: '#F59E0B', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.25)', accent: '#F59E0B', icon: 'pi pi-clock' },
+    FAILED: { color: '#EF4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.25)', accent: '#EF4444', icon: 'pi pi-times-circle' }
+})[(s || '').toUpperCase()] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.15)', accent: '#64748B', icon: 'pi pi-circle' };
+
+const statusLabel = (s) => ({
+    COMPLETED: 'Завершена',
+    PROCESSING: 'В работе',
+    QUEUED: 'В очереди',
+    FAILED: 'Ошибка'
+})[(s || '').toUpperCase()] || s;
+
 const load = async () => {
     loading.value = true;
     try {
         const data = await MarketingV3Service.getUserStrategies();
-        strategies.value = Array.isArray(data) ? data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) : [];
+        strategies.value = Array.isArray(data)
+            ? data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+            : [];
     } catch (err) {
         toast.add({ severity: 'error', summary: 'Ошибка', detail: err.message || 'Не удалось загрузить стратегии', life: 5000 });
     } finally {
@@ -37,7 +55,11 @@ const load = async () => {
 
 const filtered = computed(() => {
     let list = strategies.value;
-    if (filterStatus.value) list = list.filter(a => a.status === filterStatus.value);
+
+    if (filterStatus.value) {
+        list = list.filter(a => (a.status || '').toUpperCase() === filterStatus.value);
+    }
+
     if (searchQuery.value.trim()) {
         const q = searchQuery.value.trim().toLowerCase();
         list = list.filter(a => {
@@ -46,39 +68,36 @@ const filtered = computed(() => {
             return niche.includes(q) || id.includes(q);
         });
     }
+
     return list;
 });
+
 const paginated = computed(() => {
     const start = (currentPage.value - 1) * pageSize;
     return filtered.value.slice(start, start + pageSize);
 });
 
-const countByStatus = s => strategies.value.filter(a => a.status === s).length;
-const formatDate = dt => dt ? new Date(dt).toLocaleString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—';
-const statusLabel = s => ({ COMPLETED: 'Завершена', PROCESSING: 'В работе', QUEUED: 'В очереди', FAILED: 'Ошибка' })[(s||'').toUpperCase()] || s;
+const countByStatus = (s) => strategies.value.filter(a => (a.status || '').toUpperCase() === s).length;
 
-const statusStyle = s => ({
-    COMPLETED: { color: '#10B981', bg: 'rgba(16,185,129,0.09)', border: 'rgba(16,185,129,0.22)', accent: '#10B981' },
-    PROCESSING: { color: '#2D7BFF', bg: 'rgba(45,123,255,0.09)', border: 'rgba(45,123,255,0.22)', accent: '#2D7BFF' },
-    QUEUED:     { color: '#F59E0B', bg: 'rgba(245,158,11,0.09)', border: 'rgba(245,158,11,0.22)', accent: '#F59E0B' },
-    FAILED:     { color: '#EF4444', bg: 'rgba(239,68,68,0.09)',  border: 'rgba(239,68,68,0.22)',  accent: '#EF4444' }
-})[(s||'').toUpperCase()] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.18)', accent: '#64748B' };
+const formatDate = (dt) =>
+    dt
+        ? new Date(dt).toLocaleString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+        : '—';
 
-const statusIcon = s => ({
-    COMPLETED: 'pi pi-check-circle',
-    PROCESSING: 'pi pi-spin pi-spinner',
-    QUEUED: 'pi pi-clock',
-    FAILED: 'pi pi-times-circle'
-})[(s||'').toUpperCase()] || 'pi pi-circle';
+const getModelInfo = (modelName) => {
+    if (!modelName) return DEFAULT_STRATEGY_MODEL;
+    return STRATEGY_MODELS[modelName.toUpperCase()] || DEFAULT_STRATEGY_MODEL;
+};
 
 const PLAT_META = {
     instagram: { icon: 'pi pi-instagram', color: '#E1306C', bg: 'rgba(225,48,108,0.1)' },
-    facebook:  { icon: 'pi pi-facebook',  color: '#1877F2', bg: 'rgba(24,119,242,0.1)' },
-    tiktok:    { icon: 'pi pi-tiktok',    color: '#69C9D0', bg: 'rgba(105,201,208,0.1)' },
-    youtube:   { icon: 'pi pi-youtube',   color: '#FF0000', bg: 'rgba(255,0,0,0.1)' },
-    telegram:  { icon: 'pi pi-telegram',  color: '#2AABEE', bg: 'rgba(42,171,238,0.1)' },
+    facebook: { icon: 'pi pi-facebook', color: '#1877F2', bg: 'rgba(24,119,242,0.1)' },
+    tiktok: { icon: 'pi pi-tiktok', color: '#69C9D0', bg: 'rgba(105,201,208,0.1)' },
+    youtube: { icon: 'pi pi-youtube', color: '#FF0000', bg: 'rgba(255,0,0,0.1)' },
+    telegram: { icon: 'pi pi-telegram', color: '#2AABEE', bg: 'rgba(42,171,238,0.1)' }
 };
-const getPlatMeta = p => {
+
+const getPlatMeta = (p) => {
     const key = (p || '').toLowerCase();
     for (const [k, v] of Object.entries(PLAT_META)) {
         if (key.includes(k)) return v;
@@ -86,23 +105,20 @@ const getPlatMeta = p => {
     return { icon: 'pi pi-share-alt', color: '#64748B', bg: 'rgba(100,116,139,0.1)' };
 };
 
-const getModelInfo = modelName => {
-    if (!modelName) return DEFAULT_STRATEGY_MODEL;
-    return STRATEGY_MODELS[modelName.toUpperCase()] || DEFAULT_STRATEGY_MODEL;
-};
-
-const getStrategyName = item =>
+const getStrategyName = (item) =>
     item.analysisTitle ||
     (item.analysisData?.requestData?.productName
         ? `${item.analysisData.requestData.productName} — ${item.analysisData.requestData.businessNiche}`
         : (item.analysisData?.requestData?.businessNiche || 'Стратегия #' + (item.strategyId || item.id || '').slice(-6)));
 
-const getLatestMsg = item => {
+const getLatestMsg = (item) => {
     if (item.statusHistory?.length > 0) return item.statusHistory[item.statusHistory.length - 1].message;
-    return item.status === 'QUEUED' ? 'Ожидание в очереди...' : 'Контент-фабрика генерирует материалы...';
+    return (item.status || '').toUpperCase() === 'QUEUED'
+        ? 'Ожидание в очереди…'
+        : 'Контент-фабрика генерирует материалы…';
 };
 
-const openStrategy = item => {
+const openStrategy = (item) => {
     const s = (item.status || '').toUpperCase();
     if (['COMPLETED', 'PROCESSING', 'QUEUED'].includes(s)) {
         const id = item.strategyId || item.id;
@@ -114,168 +130,154 @@ onMounted(load);
 </script>
 
 <template>
-    <div class="sl-page">
+    <div class="mk-list-page">
         <Toast />
 
-        <div class="sl-glow sl-glow--green"></div>
-        <div class="sl-glow sl-glow--blue"></div>
+        <div class="mk-bg-dots"></div>
+        <div class="mk-orb mk-orb--blue"></div>
+        <div class="mk-orb mk-orb--violet"></div>
 
-        <div class="sl-inner">
-
-            <!-- HEADER -->
-            <div class="sl-header">
-                <div class="sl-header__left">
-                    <button class="sl-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
+        <div class="mk-banner">
+            <div class="mk-banner__inner">
+                <div class="mk-banner__left">
+                    <button class="mk-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
                         <i class="pi pi-arrow-left"></i>
                     </button>
                     <div>
-                        <div class="sl-eyebrow">
-                            <span class="sl-eyebrow__dot"></span>
-                            Контент-Фабрика · v3
+                        <div class="mk-eyebrow">
+                            <span class="mk-eyebrow__dot"></span>
+                            Контент-фабрика · ИИ v3
                         </div>
-                        <h1 class="sl-title">Мои стратегии</h1>
+                        <h1 class="mk-title">Мои стратегии</h1>
+                        <p class="mk-subtitle">Контент-планы, медиа-активы и AI-обоснования.</p>
                     </div>
                 </div>
-                <button class="sl-btn sl-btn--ghost" @click="$router.push('/marketing-analysis/v3')">
-                    <i class="pi pi-chart-bar"></i>
-                    <span>Мои анализы</span>
+
+                <div class="mk-banner__right">
+                    <button class="mk-btn mk-btn--ghost" @click="$router.push('/marketing-analysis/v3')">
+                        <i class="pi pi-chart-bar"></i>
+                        <span>Мои анализы</span>
+                    </button>
+                    <button class="mk-btn mk-btn--primary" @click="$router.push('/marketing-analysis/v3/new')">
+                        <i class="pi pi-sparkles"></i>
+                        <span>Новая стратегия</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="mk-inner">
+            <div class="mk-stats">
+                <button
+                    v-for="f in STATUS_FILTERS.filter(x => x.value)"
+                    :key="f.value"
+                    class="mk-stat"
+                    :class="{ 'mk-stat--active': filterStatus === f.value }"
+                    @click="filterStatus = (filterStatus === f.value ? '' : f.value); currentPage = 1"
+                >
+                    <div class="mk-stat__icon" :style="{ background: statusStyle(f.value).bg, borderColor: statusStyle(f.value).border }">
+                        <i :class="statusStyle(f.value).icon" :style="{ color: statusStyle(f.value).color }"></i>
+                    </div>
+                    <div class="mk-stat__num" :style="{ color: statusStyle(f.value).color }">{{ countByStatus(f.value) }}</div>
+                    <div class="mk-stat__label">{{ f.label }}</div>
+                </button>
+
+                <button class="mk-stat" :class="{ 'mk-stat--active': !filterStatus }" @click="filterStatus = ''; currentPage = 1">
+                    <div class="mk-stat__icon" :style="{ background: 'rgba(15,23,42,0.06)' }">
+                        <i class="pi pi-sparkles" :style="{ color: '#0F172A' }"></i>
+                    </div>
+                    <div class="mk-stat__num">{{ strategies.length }}</div>
+                    <div class="mk-stat__label">Всего</div>
                 </button>
             </div>
 
-            <!-- STATS -->
-            <div class="sl-stats-row">
-                <div class="sl-stat-card" v-for="f in STATUS_FILTERS.filter(f => f.value)" :key="f.value"
-                     :style="{ borderColor: statusStyle(f.value).border }">
-                    <div class="sl-stat-card__icon" :style="{ background: statusStyle(f.value).bg }">
-                        <i :class="statusIcon(f.value)" :style="{ color: statusStyle(f.value).color }"></i>
-                    </div>
-                    <div class="sl-stat-card__body">
-                        <div class="sl-stat-card__num" :style="{ color: statusStyle(f.value).color }">
-                            {{ countByStatus(f.value) }}
-                        </div>
-                        <div class="sl-stat-card__label">{{ f.label }}</div>
-                    </div>
-                </div>
-                <div class="sl-stat-card sl-stat-card--total">
-                    <div class="sl-stat-card__icon" style="background: rgba(16,185,129,0.09);">
-                        <i class="pi pi-sparkles" style="color: #10B981;"></i>
-                    </div>
-                    <div class="sl-stat-card__body">
-                        <div class="sl-stat-card__num" style="color: #0F172A;">{{ strategies.length }}</div>
-                        <div class="sl-stat-card__label">Всего стратегий</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- TOOLBAR -->
-            <div class="sl-toolbar">
-                <div class="sl-search">
-                    <i class="pi pi-search sl-search__icon"></i>
-                    <input v-model="searchQuery" type="text" placeholder="Поиск по нише или ID..." class="sl-search__input" />
-                    <button v-if="searchQuery" class="sl-search__clear" @click="searchQuery = ''" title="Очистить">
+            <div class="mk-toolbar">
+                <div class="mk-search">
+                    <i class="pi pi-search mk-search__icon"></i>
+                    <input v-model="searchQuery" type="text" class="mk-search__input" placeholder="Поиск по нише или ID..." />
+                    <button v-if="searchQuery" class="mk-search__clear" @click="searchQuery = ''" title="Очистить">
                         <i class="pi pi-times"></i>
                     </button>
                 </div>
-                <div class="sl-pills">
-                    <button v-for="f in STATUS_FILTERS" :key="f.value"
-                            @click="filterStatus = f.value; currentPage = 1"
-                            class="sl-pill" :class="{ 'sl-pill--active': filterStatus === f.value }">
+
+                <div class="mk-pills">
+                    <button
+                        v-for="f in STATUS_FILTERS"
+                        :key="f.value"
+                        class="mk-pill"
+                        :class="{ 'mk-pill--active': filterStatus === f.value }"
+                        @click="filterStatus = f.value; currentPage = 1"
+                    >
                         {{ f.label }}
-                        <span v-if="f.value && countByStatus(f.value) > 0" class="sl-pill__badge">
-                            {{ countByStatus(f.value) }}
-                        </span>
                     </button>
                 </div>
-                <button class="sl-refresh-btn" @click="load" :title="loading ? 'Загрузка...' : 'Обновить'">
+
+                <button class="mk-btn mk-btn--ghost mk-btn--small" @click="load">
                     <i class="pi pi-refresh" :class="{ 'pi-spin': loading }"></i>
                     <span>Обновить</span>
                 </button>
             </div>
 
-            <!-- LOADING -->
-            <div v-if="loading" class="sl-skeleton-list">
-                <div v-for="i in 4" :key="i" class="sl-skeleton-item">
-                    <div class="sl-skeleton-icon shimmer"></div>
-                    <div class="sl-skeleton-lines">
-                        <div class="sl-skeleton-line shimmer" style="width: 40%;"></div>
-                        <div class="sl-skeleton-line shimmer" style="width: 65%;"></div>
-                    </div>
-                    <div class="sl-skeleton-badge shimmer"></div>
-                </div>
+            <div v-if="loading" class="mk-skeleton">
+                <div v-for="i in 5" :key="i" class="mk-skeleton__row"></div>
             </div>
 
-            <!-- EMPTY -->
-            <div v-else-if="!filtered.length" class="sl-empty">
-                <div class="sl-empty__visual">
-                    <div class="sl-empty__ring"></div>
-                    <div class="sl-empty__icon">
-                        <i class="pi pi-sparkles"></i>
-                    </div>
-                </div>
-                <h2 class="sl-empty__title">{{ filterStatus ? 'Нет стратегий с таким статусом' : 'Стратегий пока нет' }}</h2>
-                <p class="sl-empty__desc">Сгенерируйте первую стратегию ИИ-маркетологом на основе готового анализа.</p>
-                <div class="sl-empty__actions">
-                    <button v-if="filterStatus || searchQuery" class="sl-btn sl-btn--ghost" @click="filterStatus = ''; searchQuery = ''">
-                        <i class="pi pi-filter-slash"></i> Сбросить
-                    </button>
-                    <button class="sl-btn sl-btn--primary" @click="$router.push('/marketing-analysis/v3')">
-                        <i class="pi pi-arrow-right"></i> К анализам
-                    </button>
-                </div>
+            <div v-else-if="!filtered.length" class="mk-empty">
+                <div class="mk-empty__icon"><i class="pi pi-sparkles"></i></div>
+                <h2 class="mk-empty__title">{{ filterStatus ? 'Нет стратегий с таким статусом' : 'Стратегий пока нет' }}</h2>
+                <p class="mk-empty__desc">Сгенерируйте первую маркетинговую стратегию ИИ-агентом на основе готового анализа.</p>
+                <button class="mk-btn mk-btn--ghost" @click="$router.push('/marketing-analysis/v3')">
+                    <i class="pi pi-arrow-right"></i>
+                    <span>К анализам</span>
+                </button>
             </div>
 
-            <!-- LIST -->
-            <TransitionGroup v-else name="sl-list" tag="div" class="sl-list">
-                <div v-for="item in paginated" :key="item.strategyId || item.id"
-                     class="sl-item"
-                     :class="{ 'sl-item--clickable': ['COMPLETED','PROCESSING','QUEUED'].includes((item.status||'').toUpperCase()) }"
-                     @click="openStrategy(item)">
+            <div v-else class="mk-list">
+                <div
+                    v-for="item in paginated"
+                    :key="item.strategyId || item.id"
+                    class="mk-item"
+                    :class="{ 'mk-item--clickable': ['COMPLETED', 'PROCESSING', 'QUEUED'].includes((item.status || '').toUpperCase()) }"
+                    @click="openStrategy(item)"
+                >
+                    <div class="mk-item__stripe" :style="{ background: statusStyle(item.status).accent }"></div>
 
-                    <!-- Accent stripe -->
-                    <div class="sl-item__stripe" :style="{ background: statusStyle(item.status).accent }"></div>
+                    <div class="mk-item__body">
+                        <div class="mk-item__top">
+                            <h3 class="mk-item__title">{{ getStrategyName(item) }}</h3>
 
-                    <!-- Status icon -->
-                    <div class="sl-item__status"
-                         :style="{ background: statusStyle(item.status).bg, border: '1px solid ' + statusStyle(item.status).border }">
-                        <i :class="statusIcon(item.status)" :style="{ color: statusStyle(item.status).color }"></i>
-                    </div>
-
-                    <!-- Content -->
-                    <div class="sl-item__content">
-                        <div class="sl-item__top">
-                            <h3 class="sl-item__name">{{ getStrategyName(item) }}</h3>
-
-                            <div class="sl-item__badges">
-                                <span class="sl-item__badge"
-                                      :style="{ color: statusStyle(item.status).color, background: statusStyle(item.status).bg, borderColor: statusStyle(item.status).border }">
-                                    <i :class="statusIcon(item.status)"></i>
+                            <div class="mk-badges">
+                                <span
+                                    class="mk-badge"
+                                    :style="{ color: statusStyle(item.status).color, background: statusStyle(item.status).bg, borderColor: statusStyle(item.status).border }"
+                                >
+                                    <i :class="statusStyle(item.status).icon"></i>
                                     {{ statusLabel(item.status) }}
                                 </span>
-                                <span class="sl-item__model"
-                                      :style="{ color: getModelInfo(item.scoringModelName).color, background: getModelInfo(item.scoringModelName).colorLight, borderColor: getModelInfo(item.scoringModelName).color + '30' }">
+                                <span
+                                    class="mk-badge"
+                                    :style="{ color: getModelInfo(item.scoringModelName).color, background: getModelInfo(item.scoringModelName).colorLight, borderColor: getModelInfo(item.scoringModelName).color + '30' }"
+                                >
                                     {{ getModelInfo(item.scoringModelName).icon }} {{ getModelInfo(item.scoringModelName).badge }}
                                 </span>
                             </div>
                         </div>
 
-                        <!-- Meta chips -->
-                        <div class="sl-item__meta">
-                            <span v-if="item.durationWeeks || item.strategyData?.durationWeeks" class="sl-meta-chip">
+                        <div class="mk-meta">
+                            <span v-if="item.durationWeeks || item.strategyData?.durationWeeks" class="mk-chip">
                                 <i class="pi pi-calendar"></i>
                                 {{ item.durationWeeks || item.strategyData?.durationWeeks }} нед.
                             </span>
-                            <span class="sl-meta-chip">
+                            <span class="mk-chip">
                                 <i class="pi pi-clock"></i>
                                 {{ formatDate(item.createdAt) }}
                             </span>
-
-                            <!-- Platforms -->
                             <template v-if="(item.priorityPlatforms || item.strategyData?.priorityPlatforms)?.length">
                                 <span
                                     v-for="p in (item.priorityPlatforms || item.strategyData?.priorityPlatforms)"
                                     :key="p"
-                                    class="sl-plat-chip"
-                                    :style="{ background: getPlatMeta(p).bg, color: getPlatMeta(p).color }"
+                                    class="mk-chip"
+                                    :style="{ background: getPlatMeta(p).bg, color: getPlatMeta(p).color, borderColor: 'transparent' }"
                                 >
                                     <i :class="getPlatMeta(p).icon"></i>
                                     {{ p }}
@@ -283,312 +285,46 @@ onMounted(load);
                             </template>
                         </div>
 
-                        <!-- Progress -->
-                        <div v-if="['PROCESSING','QUEUED'].includes((item.status||'').toUpperCase())" class="sl-item__progress">
-                            <div class="sl-item__progress-track">
-                                <div class="sl-item__progress-fill"
-                                     :style="{ width: item.status === 'QUEUED' ? '8%' : '60%', background: statusStyle(item.status).accent }">
-                                </div>
+                        <div v-if="['PROCESSING', 'QUEUED'].includes((item.status || '').toUpperCase())" class="mk-progress">
+                            <div class="mk-progress__track">
+                                <div
+                                    class="mk-progress__fill"
+                                    :style="{ width: (item.status || '').toUpperCase() === 'QUEUED' ? '12%' : '60%', background: statusStyle(item.status).accent }"
+                                ></div>
                             </div>
-                            <span class="sl-item__progress-msg">{{ getLatestMsg(item) }}</span>
+                            <span class="mk-progress__text">{{ getLatestMsg(item) }}</span>
                         </div>
                     </div>
 
-                    <!-- Action -->
-                    <div class="sl-item__actions" @click.stop>
-                        <button v-if="['COMPLETED','PROCESSING'].includes((item.status||'').toUpperCase())"
-                                class="sl-action-btn sl-action-btn--view" @click="openStrategy(item)" title="Открыть стратегию">
+                    <div class="mk-actions" @click.stop>
+                        <button
+                            v-if="['COMPLETED', 'PROCESSING'].includes((item.status || '').toUpperCase())"
+                            class="mk-act mk-act--open"
+                            @click="openStrategy(item)"
+                            title="Открыть стратегию"
+                        >
                             <i class="pi pi-eye"></i>
                         </button>
-                    </div>
-
-                    <!-- Arrow -->
-                    <div v-if="['COMPLETED','PROCESSING','QUEUED'].includes((item.status||'').toUpperCase())" class="sl-item__arrow">
-                        <i class="pi pi-angle-right"></i>
+                        <button class="mk-act mk-act--open" @click="openStrategy(item)" title="Вперёд">
+                            <i class="pi pi-angle-right"></i>
+                        </button>
                     </div>
                 </div>
-            </TransitionGroup>
-
-            <!-- PAGINATION -->
-            <div v-if="filtered.length > pageSize" class="sl-pagination">
-                <span class="sl-pagination__info">
-                    Показано {{ (currentPage-1)*pageSize+1 }}–{{ Math.min(currentPage*pageSize, filtered.length) }} из {{ filtered.length }} стратегий
-                </span>
-                <Paginator :rows="pageSize" :totalRecords="filtered.length" :first="(currentPage-1)*pageSize"
-                           @page="currentPage=$event.page+1" template="PrevPageLink PageLinks NextPageLink" />
             </div>
 
+            <div v-if="filtered.length > pageSize" class="mk-section-head">
+                <div class="mk-section-label">
+                    Показано {{ (currentPage - 1) * pageSize + 1 }}–{{ Math.min(currentPage * pageSize, filtered.length) }}
+                    из {{ filtered.length }} стратегий
+                </div>
+                <Paginator
+                    :rows="pageSize"
+                    :totalRecords="filtered.length"
+                    :first="(currentPage - 1) * pageSize"
+                    @page="currentPage = $event.page + 1"
+                    template="PrevPageLink PageLinks NextPageLink"
+                />
+            </div>
         </div>
     </div>
 </template>
-
-<style scoped>
-/* ──────────────────── PAGE ──────────────────── */
-.sl-page {
-    background: #F5F8FF;
-    background-image:
-        radial-gradient(at 0% 0%, rgba(16,185,129,0.06) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(45,123,255,0.06) 0px, transparent 50%);
-    min-height: 100vh;
-    font-family: 'Onest', sans-serif;
-    padding: 36px 24px 100px;
-    position: relative;
-    overflow-x: hidden;
-}
-.sl-glow {
-    position: absolute;
-    border-radius: 50%;
-    pointer-events: none;
-    z-index: 0;
-}
-.sl-glow--green { top: -150px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(16,185,129,0.07) 0%, transparent 70%); }
-.sl-glow--blue  { bottom: -80px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(45,123,255,0.06) 0%, transparent 70%); }
-.sl-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
-
-/* ──────────────────── HEADER ──────────────────── */
-.sl-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 32px;
-    flex-wrap: wrap;
-}
-.sl-header__left { display: flex; align-items: center; gap: 16px; }
-.sl-back-btn {
-    width: 40px; height: 40px;
-    border-radius: 12px;
-    border: 1px solid rgba(16,185,129,0.22);
-    background: #fff;
-    color: #64748B;
-    display: flex; align-items: center; justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-shadow: 0 2px 8px rgba(16,185,129,0.06);
-    flex-shrink: 0;
-}
-.sl-back-btn:hover { background: rgba(16,185,129,0.06); color: #10B981; border-color: rgba(16,185,129,0.4); transform: translateX(-2px); }
-
-.sl-eyebrow {
-    display: flex; align-items: center; gap: 6px;
-    font-size: 10px; font-weight: 800; font-family: 'Unbounded', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.1em; color: #10B981; margin-bottom: 5px;
-}
-.sl-eyebrow__dot {
-    width: 6px; height: 6px; border-radius: 50%; background: #10B981;
-    box-shadow: 0 0 8px rgba(16,185,129,0.5); animation: blink 2s infinite;
-}
-@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.4} }
-
-.sl-title { font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 900; color: #0F172A; letter-spacing: -0.02em; }
-
-/* ──────────────────── BUTTONS ──────────────────── */
-.sl-btn {
-    display: inline-flex; align-items: center; gap: 7px;
-    padding: 10px 18px; border-radius: 12px;
-    font-size: 13px; font-weight: 700; cursor: pointer;
-    transition: all 0.22s; border: 1px solid; font-family: 'Onest', sans-serif; white-space: nowrap;
-}
-.sl-btn--primary { background: #10B981; color: #fff; border-color: #10B981; box-shadow: 0 4px 16px rgba(16,185,129,0.3); }
-.sl-btn--primary:hover { background: #0EA572; box-shadow: 0 8px 28px rgba(16,185,129,0.4); transform: translateY(-2px); }
-.sl-btn--ghost { background: #fff; color: #334155; border-color: rgba(16,185,129,0.2); box-shadow: 0 2px 8px rgba(16,185,129,0.05); }
-.sl-btn--ghost:hover { background: rgba(16,185,129,0.05); color: #0F172A; border-color: rgba(16,185,129,0.35); }
-
-/* ──────────────────── STATS ──────────────────── */
-.sl-stats-row { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
-.sl-stat-card {
-    display: flex; align-items: center; gap: 12px;
-    padding: 14px 18px; background: #fff;
-    border: 1px solid rgba(16,185,129,0.14); border-radius: 14px;
-    flex: 1; min-width: 130px; transition: all 0.22s;
-    box-shadow: 0 2px 8px rgba(16,185,129,0.05);
-}
-.sl-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,185,129,0.1); }
-.sl-stat-card__icon {
-    width: 36px; height: 36px; border-radius: 10px;
-    display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
-}
-.sl-stat-card__body { display: flex; flex-direction: column; gap: 2px; }
-.sl-stat-card__num { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 900; line-height: 1; }
-.sl-stat-card__label { font-size: 10px; color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
-
-/* ──────────────────── TOOLBAR ──────────────────── */
-.sl-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
-.sl-search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
-.sl-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; pointer-events: none; }
-.sl-search__input {
-    width: 100%; padding: 10px 36px 10px 40px; border-radius: 12px;
-    background: #fff; border: 1px solid rgba(16,185,129,0.18); color: #0F172A;
-    font-size: 13px; font-family: 'Onest', sans-serif; outline: none; transition: all 0.2s;
-    box-shadow: 0 2px 8px rgba(16,185,129,0.04);
-}
-.sl-search__input:focus { border-color: rgba(16,185,129,0.45); box-shadow: 0 0 0 3px rgba(16,185,129,0.08); }
-.sl-search__input::placeholder { color: #94A3B8; }
-.sl-search__clear {
-    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-    width: 22px; height: 22px; border-radius: 50%; border: none;
-    background: rgba(100,116,139,0.12); color: #64748B;
-    display: flex; align-items: center; justify-content: center;
-    cursor: pointer; font-size: 10px; transition: all 0.2s;
-}
-.sl-search__clear:hover { background: rgba(239,68,68,0.12); color: #EF4444; }
-
-.sl-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
-.sl-pill {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
-    border: 1px solid rgba(16,185,129,0.16); background: #fff; color: #64748B;
-    cursor: pointer; transition: all 0.2s; font-family: 'Onest', sans-serif;
-}
-.sl-pill:hover { border-color: rgba(16,185,129,0.35); color: #334155; background: rgba(16,185,129,0.04); }
-.sl-pill--active { background: #10B981; border-color: #10B981; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
-.sl-pill--active:hover { background: #0EA572; }
-.sl-pill__badge {
-    background: rgba(255,255,255,0.25); border-radius: 999px; padding: 1px 6px;
-    font-size: 9px; font-weight: 800; font-family: 'Unbounded', sans-serif;
-}
-
-.sl-refresh-btn {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 9px 14px; border-radius: 10px;
-    border: 1px solid rgba(16,185,129,0.18); background: #fff; color: #64748B;
-    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
-    font-family: 'Onest', sans-serif; white-space: nowrap;
-}
-.sl-refresh-btn:hover { background: rgba(16,185,129,0.05); color: #10B981; border-color: rgba(16,185,129,0.3); }
-
-/* ──────────────────── SKELETON ──────────────────── */
-.sl-skeleton-list { display: flex; flex-direction: column; gap: 10px; }
-.sl-skeleton-item {
-    display: flex; gap: 16px; align-items: center;
-    padding: 20px 22px; background: #fff;
-    border: 1px solid rgba(16,185,129,0.1); border-radius: 16px;
-}
-.sl-skeleton-icon { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; background: rgba(16,185,129,0.07); }
-.sl-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
-.sl-skeleton-line { height: 13px; border-radius: 7px; background: rgba(16,185,129,0.07); }
-.sl-skeleton-badge { width: 80px; height: 24px; border-radius: 999px; background: rgba(16,185,129,0.07); }
-.shimmer { position: relative; overflow: hidden; }
-.shimmer::after {
-    content: ''; position: absolute; inset: 0;
-    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.08), transparent);
-    animation: shimmer 1.6s infinite;
-}
-@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
-
-/* ──────────────────── EMPTY ──────────────────── */
-.sl-empty {
-    text-align: center; padding: 80px 24px; background: #fff;
-    border: 1px solid rgba(16,185,129,0.14); border-radius: 24px;
-    box-shadow: 0 4px 24px rgba(16,185,129,0.06);
-}
-.sl-empty__visual { position: relative; width: 80px; height: 80px; margin: 0 auto 24px; }
-.sl-empty__ring {
-    position: absolute; inset: -6px; border-radius: 50%;
-    border: 2px solid rgba(16,185,129,0.15); animation: spin-slow 8s linear infinite;
-}
-@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
-.sl-empty__icon {
-    width: 80px; height: 80px; border-radius: 22px;
-    background: rgba(16,185,129,0.09); border: 1px solid rgba(16,185,129,0.2);
-    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #10B981;
-}
-.sl-empty__title { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; color: #0F172A; margin-bottom: 10px; }
-.sl-empty__desc { font-size: 13.5px; color: #64748B; max-width: 400px; margin: 0 auto 28px; line-height: 1.65; }
-.sl-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
-
-/* ──────────────────── LIST ──────────────────── */
-.sl-list { display: flex; flex-direction: column; gap: 10px; }
-.sl-item {
-    display: flex; align-items: flex-start; gap: 16px;
-    padding: 18px 20px 18px 24px; border-radius: 16px; background: #fff;
-    border: 1px solid rgba(16,185,129,0.12); transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    position: relative; overflow: hidden;
-    box-shadow: 0 2px 8px rgba(16,185,129,0.04);
-}
-.sl-item--clickable { cursor: pointer; }
-.sl-item--clickable:hover {
-    background: #FAFFFD; border-color: rgba(16,185,129,0.3);
-    transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16,185,129,0.1);
-}
-
-.sl-item__stripe {
-    position: absolute; left: 0; top: 0; bottom: 0;
-    width: 4px; border-radius: 4px 0 0 4px; opacity: 0.7; transition: opacity 0.2s;
-}
-.sl-item--clickable:hover .sl-item__stripe { opacity: 1; }
-
-.sl-item__status {
-    width: 46px; height: 46px; border-radius: 13px;
-    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
-    transition: transform 0.2s; margin-top: 2px;
-}
-.sl-item--clickable:hover .sl-item__status { transform: scale(1.08); }
-
-.sl-item__content { flex: 1; min-width: 0; }
-.sl-item__top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
-.sl-item__name { font-weight: 700; font-size: 14.5px; color: #0F172A; line-height: 1.3; flex: 1; min-width: 0; }
-.sl-item__badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
-.sl-item__badge {
-    display: inline-flex; align-items: center; gap: 4px;
-    padding: 3px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
-    font-family: 'Unbounded', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid;
-}
-.sl-item__badge i { font-size: 8px; }
-.sl-item__model {
-    padding: 3px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 800;
-    font-family: 'Unbounded', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid;
-}
-
-.sl-item__meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
-.sl-meta-chip {
-    display: inline-flex; align-items: center; gap: 4px;
-    font-size: 11.5px; color: #64748B; font-weight: 500;
-    background: rgba(100,116,139,0.07); border: 1px solid rgba(100,116,139,0.12);
-    padding: 3px 9px; border-radius: 8px;
-}
-.sl-meta-chip i { font-size: 10px; color: #94A3B8; }
-
-.sl-plat-chip {
-    display: inline-flex; align-items: center; gap: 4px;
-    padding: 3px 9px; border-radius: 8px;
-    font-size: 11px; font-weight: 600;
-}
-.sl-plat-chip i { font-size: 10px; }
-
-.sl-item__progress { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
-.sl-item__progress-track {
-    flex: 1; height: 4px; background: rgba(16,185,129,0.1); border-radius: 999px; overflow: hidden;
-}
-.sl-item__progress-fill { height: 100%; border-radius: 999px; animation: sl-pulse 2.5s ease-in-out infinite; }
-@keyframes sl-pulse { 0%,100%{opacity:1}50%{opacity:0.55} }
-.sl-item__progress-msg { font-size: 10.5px; color: #94A3B8; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
-
-.sl-item__actions { flex-shrink: 0; display: flex; gap: 6px; align-items: center; }
-.sl-action-btn {
-    width: 34px; height: 34px; border-radius: 10px;
-    border: 1px solid rgba(16,185,129,0.16); background: rgba(16,185,129,0.05);
-    color: #64748B; display: flex; align-items: center; justify-content: center;
-    cursor: pointer; transition: all 0.2s; font-size: 13px;
-}
-.sl-action-btn--view:hover { background: rgba(45,123,255,0.1); color: #2D7BFF; border-color: rgba(45,123,255,0.3); transform: scale(1.08); }
-
-.sl-item__arrow {
-    width: 28px; height: 28px; border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    color: #CBD5E1; font-size: 14px; transition: all 0.2s; flex-shrink: 0;
-}
-.sl-item--clickable:hover .sl-item__arrow { color: #10B981; transform: translateX(3px); }
-
-/* ──────────────────── PAGINATION ──────────────────── */
-.sl-pagination {
-    display: flex; align-items: center; justify-content: space-between;
-    padding-top: 20px; margin-top: 8px; flex-wrap: wrap; gap: 12px;
-    border-top: 1px solid rgba(16,185,129,0.1);
-}
-.sl-pagination__info { font-size: 12px; color: #94A3B8; font-weight: 500; }
-
-/* ──────────────────── TRANSITIONS ──────────────────── */
-.sl-list-enter-active, .sl-list-leave-active { transition: all 0.25s ease; }
-.sl-list-enter-from, .sl-list-leave-to { opacity: 0; transform: translateY(-8px); }
-</style>
diff --git a/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue b/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
index 9c995b3..d53f8e0 100644
--- a/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
+++ b/src/views/pages/marketing/targetologist/CampaignInsightsDetail.vue
@@ -8,6 +8,7 @@ import CampaignAdSets from './components/CampaignAdSets.vue';
 import CampaignInsights from './components/CampaignInsights.vue';
 import CampaignMetrics from './components/CampaignMetrics.vue';
 import CampaignPrediction from './components/CampaignPrediction.vue';
+import TargetingGrowthCenter from './components/growth-center/TargetingGrowthCenter.vue';
 import { formatArrayField, formatGeo, formatMetricValue } from '@/composables/useCampaignMetrics';
 import { useCampaignBudget } from '@/composables/useCampaignBudget';
 import { useCampaignStatusPoller } from '@/composables/useCampaignStatusPoller';
@@ -420,6 +421,16 @@ onMounted(() => {
                     </div>
                 </div>
 
+                <TargetingGrowthCenter
+                    :campaign="campaign"
+                    :recommendation="recommendation"
+                    :loading="loadingCampaign"
+                    :objective-label="objectiveLabel"
+                    :campaign-status-label="campaignStatusLabel"
+                    :platform-label="platformLabel"
+                    :format-money="formatKzt"
+                />
+
                 <!-- MAIN CONTENT -->
                 <div class="mkt-card td-main-tabs" style="padding: 12px;">
                     <TabView v-model:activeIndex="activeTab" :lazy="true">
diff --git a/src/views/pages/marketing/targetologist/CampaignWizard.vue b/src/views/pages/marketing/targetologist/CampaignWizard.vue
index 1658dad..6f29cff 100644
--- a/src/views/pages/marketing/targetologist/CampaignWizard.vue
+++ b/src/views/pages/marketing/targetologist/CampaignWizard.vue
@@ -188,7 +188,7 @@ const togglePlat = (val) => {
 </script>
 
 <template>
-    <div class="mkt-hub app-dark">
+    <div class="mkt-hub">
         <Toast />
         
         <!-- AMBIENT GLOW -->
diff --git a/src/views/pages/marketing/targetologist/TargetologistDashboard.vue b/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
index 47eee0c..745d7e9 100644
--- a/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
+++ b/src/views/pages/marketing/targetologist/TargetologistDashboard.vue
@@ -1,142 +1,234 @@
-<script setup>
+<script setup>
 import TargetingService from '@/service/TargetingService';
 import Toast from 'primevue/toast';
 import { useToast } from 'primevue/usetoast';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import OAuthConnectionWidget from './components/OAuthConnectionWidget.vue';
 import { useTargeting } from './composables/useTargeting';
 
 const { state, fetchCampaigns, connectAccount, formatCurrency } = useTargeting();
 const toast = useToast();
+const router = useRouter();
+
 const campaigns = ref([]);
 const loading = ref(true);
-
-onMounted(async () => {
-    try { campaigns.value = await fetchCampaigns(); }
-    finally { loading.value = false; }
-});
+const searchQ = ref('');
+const filterStatus = ref('');
 
 const STATUS_META = {
-    ACTIVE:     { color: '#10B981',  bg: 'rgba(16,185,129,0.1)',  border: 'rgba(16,185,129,0.25)',  icon: 'pi pi-bolt',                 label: 'АКТИВНА',   accent: '#10B981' },
-    PAUSED:     { color: '#F59E0B',  bg: 'rgba(245,158,11,0.1)',  border: 'rgba(245,158,11,0.25)',  icon: 'pi pi-pause',                label: 'НА ПАУЗЕ',  accent: '#F59E0B' },
-    FAILED:     { color: '#EF4444',  bg: 'rgba(239,68,68,0.1)',   border: 'rgba(239,68,68,0.25)',   icon: 'pi pi-exclamation-triangle', label: 'ОШИБКА',    accent: '#EF4444' },
-    GENERATING: { color: '#2D7BFF',  bg: 'rgba(45,123,255,0.1)',  border: 'rgba(45,123,255,0.25)',  icon: 'pi pi-spin pi-cog',          label: 'ЗАПУСК',    accent: '#2D7BFF' },
+    ACTIVE: { color: '#10B981', bg: 'rgba(16,185,129,0.1)', border: 'rgba(16,185,129,0.25)', icon: 'pi pi-bolt', label: 'Активна', accent: '#10B981' },
+    PAUSED: { color: '#F59E0B', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.25)', icon: 'pi pi-pause', label: 'На паузе', accent: '#F59E0B' },
+    FAILED: { color: '#EF4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.25)', icon: 'pi pi-exclamation-triangle', label: 'Ошибка', accent: '#EF4444' },
+    GENERATING: { color: '#2D7BFF', bg: 'rgba(45,123,255,0.1)', border: 'rgba(45,123,255,0.25)', icon: 'pi pi-spin pi-cog', label: 'Запуск', accent: '#2D7BFF' }
 };
-const sm = s => STATUS_META[(s||'').toUpperCase()] || { color: '#64748B', bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.15)', icon: 'pi pi-circle', label: s || '—', accent: '#64748B' };
 
-const totalBudget = () => campaigns.value.reduce((sum, c) => sum + (c.budgetKzt || 0), 0);
-const totalSpent  = () => campaigns.value.reduce((sum, c) => sum + (c.spentKzt || 0), 0);
-const activeCnt   = () => campaigns.value.filter(c => c.status === 'ACTIVE').length;
+const STATUS_FILTERS = [
+    { label: 'Все', value: '' },
+    { label: 'Активна', value: 'ACTIVE' },
+    { label: 'На паузе', value: 'PAUSED' },
+    { label: 'Запуск', value: 'GENERATING' },
+    { label: 'Ошибка', value: 'FAILED' }
+];
 
-const handleConnect = async e => await connectAccount(e.platform, e.accountId, e.accountName);
+const sm = (s) => STATUS_META[(s || '').toUpperCase()] || {
+    color: '#64748B',
+    bg: 'rgba(100,116,139,0.08)',
+    border: 'rgba(100,116,139,0.15)',
+    icon: 'pi pi-circle',
+    label: s || '—',
+    accent: '#64748B'
+};
 
-const toggleStatus = async cmp => {
+const loadCampaigns = async () => {
+    loading.value = true;
+    try {
+        campaigns.value = await fetchCampaigns();
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(loadCampaigns);
+
+const totalBudget = computed(() => campaigns.value.reduce((sum, c) => sum + (c.budgetKzt || 0), 0));
+const totalSpent = computed(() => campaigns.value.reduce((sum, c) => sum + (c.spentKzt || 0), 0));
+
+const countByStatus = (status) => campaigns.value.filter(c => (c.status || '').toUpperCase() === status).length;
+
+const filteredCampaigns = computed(() => {
+    let list = campaigns.value;
+
+    if (filterStatus.value) {
+        list = list.filter(c => (c.status || '').toUpperCase() === filterStatus.value);
+    }
+
+    if (searchQ.value.trim()) {
+        const q = searchQ.value.trim().toLowerCase();
+        list = list.filter(c =>
+            c.name?.toLowerCase().includes(q) ||
+            c.goal?.toLowerCase().includes(q) ||
+            c.platforms?.join(' ').toLowerCase().includes(q)
+        );
+    }
+
+    return list;
+});
+
+const handleConnect = async (e) => await connectAccount(e.platform, e.accountId, e.accountName);
+
+const toggleStatus = async (cmp) => {
     try {
         if (cmp.status === 'ACTIVE') {
             await TargetingService.pauseCampaign(cmp.id);
             cmp.status = 'PAUSED';
-            toast.add({ severity: 'info', summary: 'На паузе', life: 3000 });
+            toast.add({ severity: 'info', summary: 'Кампания на паузе', life: 2500 });
         } else if (cmp.status === 'PAUSED') {
             await TargetingService.resumeCampaign(cmp.id);
             cmp.status = 'ACTIVE';
-            toast.add({ severity: 'success', summary: 'Возобновлена', life: 3000 });
+            toast.add({ severity: 'success', summary: 'Кампания возобновлена', life: 2500 });
         }
-    } catch { toast.add({ severity: 'error', summary: 'Ошибка', life: 3000 }); }
+    } catch {
+        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось изменить статус кампании', life: 3000 });
+    }
 };
 
-const searchQ = ref('');
-const filteredCampaigns = () => campaigns.value.filter(c =>
-    !searchQ.value || c.name?.toLowerCase().includes(searchQ.value.toLowerCase())
-);
+const progressRatio = (cmp) => {
+    if (!cmp?.budgetKzt) return 0;
+    return Math.min(((cmp.spentKzt || 0) / cmp.budgetKzt) * 100, 100);
+};
+
+const openCampaign = (id) => {
+    if (!id) return;
+    router.push(`/marketing-analysis/v3/targetologist/campaign/${id}`);
+};
+
+const platformChip = (p) => {
+    const key = (p || '').toLowerCase();
+    if (key.includes('insta')) return { icon: 'pi pi-instagram', color: '#E1306C', bg: 'rgba(225,48,108,0.1)', label: 'Instagram' };
+    if (key.includes('face')) return { icon: 'pi pi-facebook', color: '#1877F2', bg: 'rgba(24,119,242,0.1)', label: 'Facebook' };
+    if (key.includes('tik')) return { icon: 'pi pi-tiktok', color: '#69C9D0', bg: 'rgba(105,201,208,0.1)', label: 'TikTok' };
+    if (key.includes('you')) return { icon: 'pi pi-youtube', color: '#FF0000', bg: 'rgba(255,0,0,0.1)', label: 'YouTube' };
+    return { icon: 'pi pi-share-alt', color: '#64748B', bg: 'rgba(100,116,139,0.08)', label: p };
+};
 </script>
 
 <template>
-    <div class="td-page">
+    <div class="mk-list-page">
         <Toast />
-        <div class="td-glow td-glow--blue"></div>
-        <div class="td-glow td-glow--green"></div>
 
-        <div class="td-inner">
+        <div class="mk-bg-dots"></div>
+        <div class="mk-orb mk-orb--blue"></div>
+        <div class="mk-orb mk-orb--violet"></div>
 
-            <!-- HEADER -->
-            <div class="td-header">
-                <div class="td-header__top">
-                    <button class="td-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
+        <div class="mk-banner">
+            <div class="mk-banner__inner">
+                <div class="mk-banner__left">
+                    <button class="mk-back-btn" @click="$router.push('/marketing-analysis')" title="Назад">
                         <i class="pi pi-arrow-left"></i>
                     </button>
-                    <div class="td-badge">
-                        <span class="td-badge__dot"></span>
-                        ИИ-Таргетолог · Бета
+                    <div>
+                        <div class="mk-eyebrow">
+                            <span class="mk-eyebrow__dot"></span>
+                            ИИ-Таргетолог · API beta
+                        </div>
+                        <h1 class="mk-title">Кабинет таргетолога</h1>
+                        <p class="mk-subtitle">Управление рекламными кампаниями, бюджетом и AI-оптимизацией.</p>
                     </div>
                 </div>
 
-                <div class="td-header__main">
-                    <div class="td-header__text">
-                        <h1 class="td-title">Кабинет Таргетолога</h1>
-                        <p class="td-subtitle">Управление рекламными кампаниями и ИИ-оптимизация бюджета</p>
-                    </div>
-                    <button class="td-launch-btn" @click="$router.push('/marketing-analysis/v3/targetologist/wizard')">
+                <div class="mk-banner__right">
+                    <button class="mk-btn mk-btn--ghost" @click="$router.push('/marketing-analysis/v3')">
+                        <i class="pi pi-chart-bar"></i>
+                        <span>Мои анализы</span>
+                    </button>
+                    <button class="mk-btn mk-btn--primary" @click="$router.push('/marketing-analysis/v3/targetologist/wizard')">
                         <i class="pi pi-sparkles"></i>
-                        Создать ИИ-кампанию
+                        <span>Новая кампания</span>
                     </button>
                 </div>
             </div>
+        </div>
 
-            <!-- KPI CARDS -->
-            <div class="td-kpi-grid">
-                <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(45,123,255,0.1); color: #2D7BFF;">
-                        <i class="pi pi-list"></i>
+        <div class="mk-inner">
+            <div class="mk-stats">
+                <button class="mk-stat" :class="{ 'mk-stat--active': filterStatus === 'ACTIVE' }" @click="filterStatus = (filterStatus === 'ACTIVE' ? '' : 'ACTIVE')">
+                    <div class="mk-stat__icon" :style="{ background: sm('ACTIVE').bg, borderColor: sm('ACTIVE').border }">
+                        <i :class="sm('ACTIVE').icon" :style="{ color: sm('ACTIVE').color }"></i>
                     </div>
-                    <div class="td-kpi-card__body">
-                        <div class="td-kpi-card__num">{{ campaigns.length }}</div>
-                        <div class="td-kpi-card__label">Всего кампаний</div>
-                    </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(45,123,255,0.05);"></div>
-                </div>
+                    <div class="mk-stat__num" :style="{ color: sm('ACTIVE').color }">{{ countByStatus('ACTIVE') }}</div>
+                    <div class="mk-stat__label">Активна</div>
+                </button>
 
-                <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(16,185,129,0.1); color: #10B981;">
-                        <i class="pi pi-bolt"></i>
+                <button class="mk-stat" :class="{ 'mk-stat--active': filterStatus === 'PAUSED' }" @click="filterStatus = (filterStatus === 'PAUSED' ? '' : 'PAUSED')">
+                    <div class="mk-stat__icon" :style="{ background: sm('PAUSED').bg, borderColor: sm('PAUSED').border }">
+                        <i :class="sm('PAUSED').icon" :style="{ color: sm('PAUSED').color }"></i>
                     </div>
-                    <div class="td-kpi-card__body">
-                        <div class="td-kpi-card__num" style="color: #10B981;">{{ activeCnt() }}</div>
-                        <div class="td-kpi-card__label">Активно сейчас</div>
-                    </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(16,185,129,0.05);"></div>
-                </div>
+                    <div class="mk-stat__num" :style="{ color: sm('PAUSED').color }">{{ countByStatus('PAUSED') }}</div>
+                    <div class="mk-stat__label">На паузе</div>
+                </button>
 
-                <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(249,115,22,0.1); color: #F97316;">
-                        <i class="pi pi-dollar"></i>
+                <button class="mk-stat" :class="{ 'mk-stat--active': filterStatus === 'GENERATING' }" @click="filterStatus = (filterStatus === 'GENERATING' ? '' : 'GENERATING')">
+                    <div class="mk-stat__icon" :style="{ background: sm('GENERATING').bg, borderColor: sm('GENERATING').border }">
+                        <i :class="sm('GENERATING').icon" :style="{ color: sm('GENERATING').color }"></i>
                     </div>
-                    <div class="td-kpi-card__body">
-                        <div class="td-kpi-card__num">{{ formatCurrency(totalSpent()) }}</div>
-                        <div class="td-kpi-card__label">Потрачено</div>
-                    </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(249,115,22,0.05);"></div>
-                </div>
+                    <div class="mk-stat__num" :style="{ color: sm('GENERATING').color }">{{ countByStatus('GENERATING') }}</div>
+                    <div class="mk-stat__label">Запуск</div>
+                </button>
 
-                <div class="td-kpi-card">
-                    <div class="td-kpi-card__icon" style="background: rgba(139,92,246,0.1); color: #8B5CF6;">
-                        <i class="pi pi-wallet"></i>
+                <button class="mk-stat" @click="filterStatus = '';">
+                    <div class="mk-stat__icon" :style="{ background: 'rgba(15,23,42,0.06)' }">
+                        <i class="pi pi-wallet" :style="{ color: '#8B5CF6' }"></i>
                     </div>
-                    <div class="td-kpi-card__body">
-                        <div class="td-kpi-card__num">{{ formatCurrency(totalBudget()) }}</div>
-                        <div class="td-kpi-card__label">Общий лимит</div>
+                    <div class="mk-stat__num" :style="{ color: '#8B5CF6' }">{{ formatCurrency(totalBudget) }}</div>
+                    <div class="mk-stat__label">Бюджет</div>
+                </button>
+
+                <button class="mk-stat" @click="filterStatus = '';">
+                    <div class="mk-stat__icon" :style="{ background: 'rgba(15,23,42,0.06)' }">
+                        <i class="pi pi-dollar" :style="{ color: '#0F172A' }"></i>
                     </div>
-                    <div class="td-kpi-card__accent" style="background: rgba(139,92,246,0.05);"></div>
-                </div>
+                    <div class="mk-stat__num">{{ formatCurrency(totalSpent) }}</div>
+                    <div class="mk-stat__label">Потрачено</div>
+                </button>
             </div>
 
-            <!-- INTEGRATIONS -->
-            <div class="td-section-header">
-                <div class="td-section-label">
+            <div class="mk-toolbar">
+                <div class="mk-search">
+                    <i class="pi pi-search mk-search__icon"></i>
+                    <input v-model="searchQ" type="text" class="mk-search__input" placeholder="Поиск по названию, цели или платформе..." />
+                    <button v-if="searchQ" class="mk-search__clear" @click="searchQ = ''" title="Очистить">
+                        <i class="pi pi-times"></i>
+                    </button>
+                </div>
+
+                <div class="mk-pills">
+                    <button
+                        v-for="f in STATUS_FILTERS"
+                        :key="f.value"
+                        class="mk-pill"
+                        :class="{ 'mk-pill--active': filterStatus === f.value }"
+                        @click="filterStatus = f.value"
+                    >
+                        {{ f.label }}
+                    </button>
+                </div>
+
+                <button class="mk-btn mk-btn--ghost mk-btn--small" @click="loadCampaigns">
+                    <i class="pi pi-refresh" :class="{ 'pi-spin': loading }"></i>
+                    <span>Обновить</span>
+                </button>
+            </div>
+
+            <div class="mk-section-head">
+                <div class="mk-section-label">
                     <i class="pi pi-link"></i>
                     Рекламные кабинеты
                 </div>
+                <div class="mk-section-hint">Подключите платформы для запуска и автоматизации кампаний.</div>
             </div>
-            <div class="td-integrations-grid">
+
+            <div class="mk-grid-2">
                 <OAuthConnectionWidget
                     platform="facebook"
                     title="Facebook & Instagram"
@@ -159,362 +251,77 @@ const filteredCampaigns = () => campaigns.value.filter(c =>
                 />
             </div>
 
-            <!-- CAMPAIGNS SECTION -->
-            <div class="td-campaigns-header">
-                <div class="td-section-label">
+            <div class="mk-section-head">
+                <div class="mk-section-label">
                     <i class="pi pi-chart-bar"></i>
                     Список кампаний
-                </div>
-                <div class="td-search">
-                    <i class="pi pi-search td-search__icon"></i>
-                    <input v-model="searchQ" type="text" placeholder="Найти кампанию..." class="td-search__input" />
-                    <button v-if="searchQ" class="td-search__clear" @click="searchQ = ''">
-                        <i class="pi pi-times"></i>
-                    </button>
+                    <span v-if="filteredCampaigns.length" class="mk-count">{{ filteredCampaigns.length }}</span>
                 </div>
             </div>
 
-            <!-- SKELETON -->
-            <div v-if="loading" class="td-skeleton-list">
-                <div v-for="i in 3" :key="i" class="td-skeleton-item">
-                    <div class="td-skeleton-stripe shimmer"></div>
-                    <div class="td-skeleton-body">
-                        <div class="td-skeleton-line shimmer" style="width: 35%; height: 14px; margin-bottom: 10px;"></div>
-                        <div class="td-skeleton-line shimmer" style="width: 55%;"></div>
-                        <div class="td-skeleton-metrics">
-                            <div class="td-skeleton-metric shimmer"></div>
-                            <div class="td-skeleton-metric shimmer"></div>
-                            <div class="td-skeleton-metric shimmer"></div>
-                        </div>
-                    </div>
-                </div>
+            <div v-if="loading" class="mk-skeleton">
+                <div v-for="i in 4" :key="i" class="mk-skeleton__row"></div>
             </div>
 
-            <!-- EMPTY -->
-            <div v-else-if="filteredCampaigns().length === 0" class="td-empty">
-                <div class="td-empty__visual">
-                    <div class="td-empty__ring"></div>
-                    <div class="td-empty__icon">
-                        <i class="pi pi-chart-line"></i>
-                    </div>
-                </div>
-                <h2 class="td-empty__title">Нет запущенных кампаний</h2>
-                <p class="td-empty__desc">ИИ-Таргетолог готов автоматизировать ваши расходы на рекламу, протестировать креативы и найти идеальную аудиторию.</p>
-                <button class="td-launch-btn" style="margin: 0 auto;"
-                        @click="$router.push('/marketing-analysis/v3/targetologist/wizard')">
-                    <i class="pi pi-bolt"></i>
-                    Запустить первую кампанию
+            <div v-else-if="!filteredCampaigns.length" class="mk-empty">
+                <div class="mk-empty__icon"><i class="pi pi-megaphone"></i></div>
+                <h2 class="mk-empty__title">Нет кампаний по текущему фильтру</h2>
+                <p class="mk-empty__desc">Запустите новую кампанию или измените фильтр, чтобы увидеть результаты.</p>
+                <button class="mk-btn mk-btn--primary" @click="$router.push('/marketing-analysis/v3/targetologist/wizard')">
+                    <i class="pi pi-plus"></i>
+                    <span>Запустить кампанию</span>
                 </button>
             </div>
 
-            <!-- LIST -->
-            <div v-else class="td-campaign-list">
-                <div v-for="cmp in filteredCampaigns()" :key="cmp.id"
-                     class="td-campaign"
-                     @click="$router.push(`/marketing-analysis/v3/targetologist/campaign/${cmp.id}`)">
+            <div v-else class="mk-list">
+                <div v-for="cmp in filteredCampaigns" :key="cmp.id" class="mk-item mk-item--clickable" @click="openCampaign(cmp.id)">
+                    <div class="mk-item__stripe" :style="{ background: sm(cmp.status).accent }"></div>
 
-                    <!-- Left accent -->
-                    <div class="td-campaign__stripe" :style="{ background: sm(cmp.status).accent }"></div>
+                    <div class="mk-item__body">
+                        <div class="mk-item__top">
+                            <h3 class="mk-item__title">{{ cmp.name }}</h3>
 
-                    <div class="td-campaign__body">
-                        <!-- Top row -->
-                        <div class="td-campaign__top">
-                            <div class="td-campaign__info">
-                                <div class="td-campaign__name-row">
-                                    <h4 class="td-campaign__name">{{ cmp.name }}</h4>
-                                    <div class="td-campaign__status"
-                                         :style="{ color: sm(cmp.status).color, background: sm(cmp.status).bg, borderColor: sm(cmp.status).border }">
-                                        <i :class="sm(cmp.status).icon"></i>
-                                        {{ sm(cmp.status).label }}
-                                    </div>
-                                </div>
-                                <div class="td-campaign__meta">
-                                    <span v-if="cmp.goal">
-                                        <i class="pi pi-flag"></i>
-                                        {{ cmp.goal }}
-                                    </span>
-                                    <span v-if="cmp.platforms?.length" class="td-plat-chips">
-                                        <span v-if="cmp.platforms?.some(p => p.includes('Insta'))" class="td-plat-chip" style="color:#E1306C; background: rgba(225,48,108,0.08);">
-                                            <i class="pi pi-instagram"></i> Instagram
-                                        </span>
-                                        <span v-if="cmp.platforms?.some(p => p.includes('Face'))" class="td-plat-chip" style="color:#1877F2; background: rgba(24,119,242,0.08);">
-                                            <i class="pi pi-facebook"></i> Facebook
-                                        </span>
-                                        <span v-if="cmp.platforms?.some(p => p.includes('Tik'))" class="td-plat-chip" style="color:#69C9D0; background: rgba(105,201,208,0.08);">
-                                            <i class="pi pi-tiktok"></i> TikTok
-                                        </span>
-                                    </span>
-                                </div>
+                            <div class="mk-badges">
+                                <span class="mk-badge" :style="{ color: sm(cmp.status).color, background: sm(cmp.status).bg, borderColor: sm(cmp.status).border }">
+                                    <i :class="sm(cmp.status).icon"></i>
+                                    {{ sm(cmp.status).label }}
+                                </span>
                             </div>
                         </div>
 
-                        <!-- Metrics row -->
-                        <div class="td-campaign__metrics">
-                            <div class="td-metric">
-                                <div class="td-metric__label">Потрачено</div>
-                                <div class="td-metric__val">{{ formatCurrency(cmp.spentKzt || 0) }}</div>
-                                <div class="td-metric__bar">
-                                    <div class="td-metric__bar-fill"
-                                         :style="{ width: `${Math.min(((cmp.spentKzt||0)/(cmp.budgetKzt||1))*100,100)}%`, background: sm(cmp.status).accent }">
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="td-metric">
-                                <div class="td-metric__label">CTR</div>
-                                <div class="td-metric__val" style="color: #10B981;">{{ cmp.ctr || '0.00' }}%</div>
-                            </div>
-                            <div class="td-metric">
-                                <div class="td-metric__label">Охват</div>
-                                <div class="td-metric__val">{{ new Intl.NumberFormat('ru-RU').format(cmp.reach || 0) }}</div>
-                            </div>
-                            <div class="td-metric">
-                                <div class="td-metric__label">Бюджет</div>
-                                <div class="td-metric__val" style="color: #8B5CF6;">{{ formatCurrency(cmp.budgetKzt || 0) }}</div>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="td-campaign__actions" @click.stop>
-                                <button v-if="cmp.status === 'ACTIVE'" class="td-act-btn td-act-btn--pause"
-                                        @click="toggleStatus(cmp)" title="Поставить на паузу">
-                                    <i class="pi pi-pause"></i>
-                                </button>
-                                <button v-if="cmp.status === 'PAUSED'" class="td-act-btn td-act-btn--play"
-                                        @click="toggleStatus(cmp)" title="Возобновить кампанию">
-                                    <i class="pi pi-play"></i>
-                                </button>
-                                <button class="td-act-btn td-act-btn--open"
-                                        @click="$router.push(`/marketing-analysis/v3/targetologist/campaign/${cmp.id}`)"
-                                        title="Открыть аналитику">
-                                    <i class="pi pi-external-link"></i>
-                                </button>
-                            </div>
+                        <div class="mk-meta">
+                            <span v-if="cmp.goal" class="mk-chip"><i class="pi pi-flag"></i>{{ cmp.goal }}</span>
+                            <span v-if="cmp.platforms?.length" class="mk-chip" :style="{ background: platformChip(cmp.platforms[0]).bg, color: platformChip(cmp.platforms[0]).color, borderColor: 'transparent' }">
+                                <i :class="platformChip(cmp.platforms[0]).icon"></i>
+                                {{ platformChip(cmp.platforms[0]).label }}
+                            </span>
+                            <span class="mk-chip"><i class="pi pi-chart-line"></i>CTR: {{ cmp.ctr || '0.00' }}%</span>
+                            <span class="mk-chip"><i class="pi pi-users"></i>Охват: {{ new Intl.NumberFormat('ru-RU').format(cmp.reach || 0) }}</span>
+                            <span class="mk-chip"><i class="pi pi-wallet"></i>Бюджет: {{ formatCurrency(cmp.budgetKzt || 0) }}</span>
+                            <span class="mk-chip"><i class="pi pi-money-bill"></i>Потрачено: {{ formatCurrency(cmp.spentKzt || 0) }}</span>
                         </div>
+
+                        <div class="mk-progress">
+                            <div class="mk-progress__track">
+                                <div class="mk-progress__fill" :style="{ width: `${progressRatio(cmp)}%`, background: sm(cmp.status).accent }"></div>
+                            </div>
+                            <span class="mk-progress__text">{{ Math.round(progressRatio(cmp)) }}% бюджета</span>
+                        </div>
+                    </div>
+
+                    <div class="mk-actions" @click.stop>
+                        <button v-if="cmp.status === 'ACTIVE'" class="mk-act mk-act--warn" @click="toggleStatus(cmp)" title="Поставить на паузу">
+                            <i class="pi pi-pause"></i>
+                        </button>
+                        <button v-if="cmp.status === 'PAUSED'" class="mk-act mk-act--success" @click="toggleStatus(cmp)" title="Возобновить">
+                            <i class="pi pi-play"></i>
+                        </button>
+                        <button class="mk-act mk-act--open" @click="openCampaign(cmp.id)" title="Открыть">
+                            <i class="pi pi-angle-right"></i>
+                        </button>
                     </div>
                 </div>
             </div>
-
         </div>
     </div>
 </template>
-
-<style scoped>
-/* ──────────────────── PAGE (СВЕТЛАЯ ТЕМА, КАК В МАРКЕТИНГЕ) ──────────────────── */
-.td-page {
-    background: linear-gradient(180deg, #F8FAFF 0%, #F0F4FF 100%);
-    min-height: 100vh;
-    font-family: 'Onest', sans-serif;
-    padding: 40px 24px 100px;
-    position: relative;
-    overflow-x: hidden;
-    color: #0F172A;
-}
-
-.td-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
-.td-glow--blue  { top: -180px; right: -120px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 70%); animation: float-glow 20s ease-in-out infinite; }
-.td-glow--green { bottom: -100px; left: -80px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 70%); animation: float-glow 25s ease-in-out infinite reverse; }
-@keyframes float-glow { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.1); } }
-
-.td-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
-
-/* ──────────────────── HEADER ──────────────────── */
-.td-header { margin-bottom: 40px; }
-.td-header__top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
-
-.td-back-btn {
-    width: 40px; height: 40px; border-radius: 12px;
-    border: 1px solid rgba(45,123,255,0.15); background: #fff; color: #64748B;
-    display: flex; align-items: center; justify-content: center; cursor: pointer;
-    transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.05); flex-shrink: 0;
-}
-.td-back-btn:hover { background: rgba(45,123,255,0.06); color: #2D7BFF; border-color: rgba(45,123,255,0.3); transform: translateX(-2px); }
-
-.td-badge {
-    display: inline-flex; align-items: center; gap: 7px;
-    padding: 5px 14px; border-radius: 999px;
-    border: 1px solid rgba(45,123,255,0.2);
-    background: linear-gradient(135deg, rgba(45,123,255,0.08) 0%, rgba(45,123,255,0.04) 100%);
-    font-size: 10px; font-weight: 700; font-family: 'Onest', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.08em; color: #2D7BFF;
-}
-.td-badge__dot {
-    width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF;
-    box-shadow: 0 0 8px rgba(45,123,255,0.5); animation: td-blink 2s infinite;
-}
-@keyframes td-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
-
-.td-header__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
-
-.td-title {
-    font-family: 'Onest', sans-serif;
-    font-size: clamp(22px, 3.5vw, 32px);
-    font-weight: 900;
-    color: #0F172A;
-    letter-spacing: -0.02em;
-    line-height: 1.15;
-    margin: 0 0 8px 0;
-}
-.td-subtitle { font-size: 14px; color: #64748B; line-height: 1.55; max-width: 480px; margin: 0; }
-
-.td-launch-btn {
-    display: inline-flex; align-items: center; gap: 9px;
-    padding: 13px 24px; border-radius: 14px;
-    background: #2D7BFF; color: #fff;
-    font-size: 13px; font-weight: 700; font-family: 'Onest', sans-serif;
-    border: none; cursor: pointer; transition: all 0.3s;
-    box-shadow: 0 6px 24px rgba(45,123,255,0.3); white-space: nowrap; flex-shrink: 0;
-}
-.td-launch-btn:hover { background: #1a6bff; box-shadow: 0 10px 36px rgba(45,123,255,0.4); transform: translateY(-3px); }
-
-/* ──────────────────── KPI GRID ──────────────────── */
-.td-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
-@media (max-width: 900px) { .td-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 480px) { .td-kpi-grid { grid-template-columns: 1fr; } }
-
-.td-kpi-card {
-    background: #fff;
-    border: 1px solid rgba(45,123,255,0.12);
-    border-radius: 18px;
-    padding: 24px;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    box-shadow: 0 4px 12px rgba(45,123,255,0.05);
-}
-.td-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(45,123,255,0.1); border-color: rgba(45,123,255,0.25); }
-.td-kpi-card__accent { position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 0 18px 0 80px; }
-.td-kpi-card__icon {
-    width: 48px; height: 48px; border-radius: 14px;
-    display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;
-    position: relative; z-index: 1; transition: transform 0.3s;
-}
-.td-kpi-card:hover .td-kpi-card__icon { transform: scale(1.1); }
-.td-kpi-card__body { position: relative; z-index: 1; }
-.td-kpi-card__num { font-family: 'Onest', sans-serif; font-size: 24px; font-weight: 900; color: #0F172A; line-height: 1; margin-bottom: 6px; }
-.td-kpi-card__label { font-size: 10px; color: #94A3B8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
-
-/* ──────────────────── SECTION HEADER ──────────────────── */
-.td-section-header { margin-bottom: 16px; }
-.td-section-label {
-    display: flex; align-items: center; gap: 8px;
-    font-size: 11px; font-weight: 700; font-family: 'Onest', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.1em; color: #64748B;
-}
-.td-section-label i { font-size: 12px; }
-
-/* ──────────────────── INTEGRATIONS ──────────────────── */
-.td-integrations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
-@media (max-width: 640px) { .td-integrations-grid { grid-template-columns: 1fr; } }
-
-/* ──────────────────── CAMPAIGNS HEADER ──────────────────── */
-.td-campaigns-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
-.td-search { position: relative; }
-.td-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; pointer-events: none; }
-.td-search__input {
-    padding: 10px 38px 10px 42px; border-radius: 12px;
-    background: #fff; border: 1px solid rgba(45,123,255,0.15); color: #0F172A;
-    font-size: 13.5px; font-family: 'Onest', sans-serif; outline: none;
-    width: 280px; transition: all 0.2s; box-shadow: 0 2px 8px rgba(45,123,255,0.04);
-}
-.td-search__input:focus { border-color: #2D7BFF; width: 320px; box-shadow: 0 0 0 3px rgba(45,123,255,0.1); }
-.td-search__input::placeholder { color: #94A3B8; }
-.td-search__clear {
-    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-    width: 22px; height: 22px; border-radius: 50%; border: none;
-    background: rgba(100,116,139,0.1); color: #64748B;
-    display: flex; align-items: center; justify-content: center;
-    cursor: pointer; font-size: 10px; transition: all 0.2s;
-}
-.td-search__clear:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
-
-/* ──────────────────── SKELETON ──────────────────── */
-.td-skeleton-list { display: flex; flex-direction: column; gap: 12px; }
-.td-skeleton-item {
-    display: flex; background: #fff; border: 1px solid rgba(45,123,255,0.1);
-    border-radius: 18px; overflow: hidden; height: 130px;
-}
-.td-skeleton-stripe { width: 5px; flex-shrink: 0; background: rgba(45,123,255,0.08); }
-.td-skeleton-body { flex: 1; padding: 22px 24px; }
-.td-skeleton-line { height: 12px; border-radius: 6px; background: rgba(45,123,255,0.06); }
-.td-skeleton-metrics { display: flex; gap: 24px; margin-top: 16px; }
-.td-skeleton-metric { width: 80px; height: 40px; border-radius: 10px; background: rgba(45,123,255,0.06); }
-.shimmer { position: relative; overflow: hidden; }
-.shimmer::after {
-    content: ''; position: absolute; inset: 0;
-    background: linear-gradient(90deg, transparent, rgba(45,123,255,0.06), transparent);
-    animation: shimmer 1.6s infinite;
-}
-@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
-
-/* ──────────────────── EMPTY ──────────────────── */
-.td-empty {
-    text-align: center; padding: 80px 24px; background: #fff;
-    border: 1px solid rgba(45,123,255,0.12); border-radius: 24px;
-    box-shadow: 0 4px 24px rgba(45,123,255,0.06);
-    display: flex; flex-direction: column; align-items: center; gap: 16px;
-}
-.td-empty__visual { position: relative; width: 84px; height: 84px; }
-.td-empty__ring {
-    position: absolute; inset: -7px; border-radius: 50%;
-    border: 2px solid rgba(45,123,255,0.1); animation: spin-slow 8s linear infinite;
-}
-@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
-.td-empty__icon {
-    width: 84px; height: 84px; border-radius: 22px;
-    background: rgba(45,123,255,0.08); border: 1px solid rgba(45,123,255,0.15);
-    display: flex; align-items: center; justify-content: center; font-size: 34px; color: #2D7BFF;
-}
-.td-empty__title { font-family: 'Onest', sans-serif; font-size: 20px; font-weight: 800; color: #0F172A; margin: 0; }
-.td-empty__desc { font-size: 13.5px; color: #64748B; max-width: 420px; line-height: 1.65; margin: 0; }
-
-/* ──────────────────── CAMPAIGN LIST ──────────────────── */
-.td-campaign-list { display: flex; flex-direction: column; gap: 12px; }
-
-.td-campaign {
-    display: flex; background: #fff;
-    border: 1px solid rgba(45,123,255,0.12);
-    border-radius: 18px; cursor: pointer; overflow: hidden;
-    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
-    box-shadow: 0 2px 10px rgba(45,123,255,0.04);
-}
-.td-campaign:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(45,123,255,0.1); border-color: rgba(45,123,255,0.25); }
-
-.td-campaign__stripe { width: 5px; flex-shrink: 0; transition: width 0.2s; }
-.td-campaign:hover .td-campaign__stripe { width: 6px; }
-
-.td-campaign__body { flex: 1; padding: 22px 24px; }
-.td-campaign__top { margin-bottom: 18px; }
-.td-campaign__name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
-.td-campaign__name { font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; line-height: 1.3; flex: 1; margin: 0; }
-.td-campaign__status {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 4px 12px; border-radius: 999px; border: 1px solid;
-    font-size: 9.5px; font-weight: 700; font-family: 'Onest', sans-serif;
-    text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
-}
-.td-campaign__status i { font-size: 9px; }
-
-.td-campaign__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #64748B; flex-wrap: wrap; }
-.td-campaign__meta i { font-size: 11px; margin-right: 3px; }
-.td-plat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
-.td-plat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 600; }
-.td-plat-chip i { font-size: 10px; }
-
-.td-campaign__metrics { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
-.td-metric { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
-.td-metric__label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8; }
-.td-metric__val { font-family: 'Onest', sans-serif; font-size: 17px; font-weight: 900; color: #0F172A; line-height: 1; }
-.td-metric__bar { height: 4px; background: rgba(45,123,255,0.08); border-radius: 999px; overflow: hidden; margin-top: 4px; }
-.td-metric__bar-fill { height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
-
-.td-campaign__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
-.td-act-btn {
-    width: 36px; height: 36px; border-radius: 10px;
-    border: 1px solid rgba(45,123,255,0.12); background: rgba(45,123,255,0.04);
-    color: #64748B; display: flex; align-items: center; justify-content: center;
-    cursor: pointer; transition: all 0.2s; font-size: 13px;
-}
-.td-act-btn:hover { transform: scale(1.08); }
-.td-act-btn--pause:hover { background: rgba(245,158,11,0.1); color: #F59E0B; border-color: rgba(245,158,11,0.25); }
-.td-act-btn--play:hover  { background: rgba(16,185,129,0.1); color: #10B981; border-color: rgba(16,185,129,0.25); }
-.td-act-btn--open:hover  { background: rgba(45,123,255,0.1); color: #2D7BFF; border-color: rgba(45,123,255,0.25); }
-</style>
diff --git a/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue b/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
index b92ead4..54d5d89 100644
--- a/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
+++ b/src/views/pages/marketing/targetologist/components/CampaignPrediction.vue
@@ -5,7 +5,6 @@ import type { PredictedMetricMap, TopRecommendation } from '@/types/campaign.typ
 import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import Chart from 'primevue/chart';
-import ProgressBar from 'primevue/progressbar';
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, ref, watch } from 'vue';
 
@@ -15,6 +14,8 @@ interface MetricCard {
     label: string;
     rangeLabel: string;
     barValue: number;
+    trend?: 'up' | 'down' | 'stable';
+    trendValue?: number;
 }
 
 const props = defineProps<{
@@ -26,6 +27,7 @@ const toast = useToast();
 const awaitingPrediction = ref(false);
 const showManualTrigger = ref(false);
 const generationRunning = ref(false);
+const hoveredMetric = ref<string | null>(null);
 
 const prediction = computed(() => campaignStore.prediction);
 const loading = computed(() => campaignStore.loading.prediction);
@@ -38,7 +40,13 @@ const lastUpdated = computed(() => (prediction.value as any)?.createdAt ?? predi
 const scoreColor = computed(() => {
     if (score.value <= 40) return '#EF4444';
     if (score.value <= 70) return '#F59E0B';
-    return '#00D48B';
+    return '#10B981';
+});
+
+const scoreGradient = computed(() => {
+    if (score.value <= 40) return 'linear-gradient(135deg, #EF4444, #DC2626)';
+    if (score.value <= 70) return 'linear-gradient(135deg, #F59E0B, #D97706)';
+    return 'linear-gradient(135deg, #10B981, #059669)';
 });
 
 const scoreStrokeColor = computed(() => scoreColor.value);
@@ -95,7 +103,7 @@ const weeklyChartData = computed(() => ({
             data: spendValues.value,
             yAxisID: 'y1',
             borderRadius: 8,
-            backgroundColor: 'rgba(0,212,139,0.52)'
+            backgroundColor: 'rgba(16,185,129,0.52)'
         }
     ]
 }));
@@ -173,7 +181,7 @@ const marketSaturationMeta = computed(() => {
     ).toUpperCase();
     if (level === 'HIGH') return { color: '#EF4444', label: 'Высокая' };
     if (level === 'MEDIUM') return { color: '#F59E0B', label: 'Средняя' };
-    return { color: '#00D48B', label: 'Низкая' };
+    return { color: '#10B981', label: 'Низкая' };
 });
 
 const differentiationScore = computed(
@@ -250,211 +258,364 @@ onMounted(() => { void hydratePrediction(); });
 <template>
     <section class="cp-section">
 
-        <!-- SKELETON -->
+        <!-- SKELETON LOADING -->
         <template v-if="loading || awaitingPrediction || generationRunning">
-            <div class="cp-grid-2 mb-4">
-                <div v-for="i in 2" :key="i" class="cp-card cp-skel-block" style="height:180px;"></div>
+            <div class="cp-skeleton-page">
+                <div class="cp-grid-2">
+                    <div class="cp-card cp-skeleton-card">
+                        <div class="cp-skeleton-circle"></div>
+                        <div class="cp-skeleton-lines">
+                            <div class="cp-skeleton-line w-60"></div>
+                            <div class="cp-skeleton-line w-40"></div>
+                            <div class="cp-skeleton-line w-80"></div>
+                        </div>
+                    </div>
+                    <div class="cp-card cp-skeleton-card">
+                        <div class="cp-skeleton-label"></div>
+                        <div class="cp-skeleton-line w-full mb-3"></div>
+                        <div class="cp-skeleton-line w-full mb-3"></div>
+                        <div class="cp-skeleton-line w-70"></div>
+                    </div>
+                </div>
+                <div class="cp-card cp-skeleton-card mt-4" style="height: 300px;"></div>
             </div>
-            <div class="cp-card cp-skel-block" style="height:120px;"></div>
         </template>
 
-        <!-- NO DATA -->
-        <div v-else-if="!prediction" class="cp-empty">
-            <i class="pi pi-microchip-ai cp-empty__icon"></i>
-            <h3 class="cp-empty__title">AI-прогноз недоступен</h3>
-            <p class="cp-empty__sub" v-if="showManualTrigger">Прогноз пока не готов. Запустите генерацию вручную.</p>
-            <p class="cp-empty__sub" v-else>Сервис готовит прогноз. Обычно это занимает 15-30 секунд.</p>
-            <button class="cp-btn-primary" @click="refreshPrediction" :disabled="loading || generationRunning || !showManualTrigger">
-                <i class="pi pi-sparkles"></i> Запустить расчет
+        <!-- NO DATA STATE -->
+        <div v-else-if="!prediction" class="cp-empty-state">
+            <div class="cp-empty-state__orb">
+                <div class="cp-empty-state__orb-ring"></div>
+                <i class="pi pi-microchip-ai cp-empty-state__icon"></i>
+            </div>
+            <h3 class="cp-empty-state__title">AI-прогноз недоступен</h3>
+            <p class="cp-empty-state__desc" v-if="showManualTrigger">
+                Прогноз пока не готов. Запустите генерацию вручную.
+            </p>
+            <p class="cp-empty-state__desc" v-else>
+                Сервис готовит прогноз. Обычно это занимает 15-30 секунд.
+            </p>
+            <button class="cp-btn-glow" @click="refreshPrediction" :disabled="loading || generationRunning || !showManualTrigger">
+                <i class="pi pi-sparkles"></i>
+                <span>Запустить расчет</span>
+                <div class="cp-btn-glow__shine"></div>
             </button>
         </div>
 
-        <!-- CONTENT -->
+        <!-- MAIN CONTENT -->
         <template v-else>
 
-            <!-- TOP ROW: Score + Metrics -->
-            <div class="cp-grid-2 mb-4">
-
-                <!-- SCORE CARD -->
+            <!-- HERO: Score Card + Metrics Grid -->
+            <div class="cp-hero">
+                <!-- Score Card -->
                 <div class="cp-card cp-score-card">
-                    <div class="cp-card__label">Оценка прогноза</div>
-                    <div class="cp-score-wrap">
-                        <svg width="160" height="160" viewBox="0 0 190 190" class="cp-gauge">
-                            <g transform="translate(95,95)">
-                                <circle r="70" fill="none" stroke="rgba(45,123,255,0.06)" stroke-width="12" />
+                    <div class="cp-card__glow"></div>
+                    <div class="cp-card__header">
+                        <div class="cp-card__label">
+                            <span class="cp-card__label-dot"></span>
+                            Оценка прогноза
+                        </div>
+                        <button class="cp-btn-refresh" @click="refreshPrediction" :disabled="loading || generationRunning">
+                            <i :class="generationRunning ? 'pi pi-spin pi-spinner' : 'pi pi-sync'"></i>
+                        </button>
+                    </div>
+                    <div class="cp-score-body">
+                        <div class="cp-gauge-container">
+                            <svg width="180" height="180" viewBox="0 0 190 190" class="cp-gauge">
+                                <defs>
+                                    <linearGradient id="scoreGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                                        <stop offset="0%" :stop-color="scoreColor" />
+                                        <stop offset="100%" :stop-color="scoreColor" />
+                                    </linearGradient>
+                                    <filter id="scoreGlow">
+                                        <feGaussianBlur stdDeviation="4" result="blur" />
+                                        <feMerge>
+                                            <feMergeNode in="blur" />
+                                            <feMergeNode in="SourceGraphic" />
+                                        </feMerge>
+                                    </filter>
+                                </defs>
+                                <circle r="70" cx="95" cy="95" fill="none" stroke="rgba(45,123,255,0.08)" stroke-width="10" />
                                 <circle
                                     r="70"
+                                    cx="95"
+                                    cy="95"
                                     fill="none"
-                                    :stroke="scoreStrokeColor"
+                                    stroke="url(#scoreGrad)"
                                     stroke-width="12"
                                     stroke-linecap="round"
                                     :stroke-dasharray="gaugeCircumference"
                                     :stroke-dashoffset="gaugeOffset"
-                                    transform="rotate(-90)"
-                                    style="transition: stroke-dashoffset 1s ease;"
+                                    transform="rotate(-90 95 95)"
+                                    filter="url(#scoreGlow)"
+                                    style="transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);"
                                 />
-                            </g>
-                        </svg>
-                        <div class="cp-score-inner">
-                            <div class="cp-score-val" :style="{ color: scoreColor }">{{ score }}</div>
-                            <div class="cp-score-sub" style="color: #64748B;">/100</div>
+                            </svg>
+                            <div class="cp-gauge-center">
+                                <div class="cp-gauge-value" :style="{ color: scoreColor }">{{ score }}</div>
+                                <div class="cp-gauge-max">/100</div>
+                            </div>
                         </div>
+                        <div class="cp-score-meta">
+                            <div class="cp-score-label" :style="{ color: scoreColor }">{{ predictionLabel }}</div>
+                            <div class="cp-score-confidence">
+                                <span class="cp-confidence-dot"></span>
+                                Уверенность: <strong>{{ confidence }}%</strong>
+                            </div>
+                            <div class="cp-score-time">
+                                <i class="pi pi-clock"></i>
+                                {{ formatDateTime(lastUpdated) }}
+                            </div>
+                        </div>
                     </div>
-                    <div class="cp-score-label" :style="{ color: scoreColor }">{{ predictionLabel }}</div>
-                    <div class="cp-score-conf" style="color: #64748B;">Уверенность: <b style="color: #0F172A;">{{ confidence }}%</b></div>
-                    <div class="cp-score-date">Обновлено: {{ formatDateTime(lastUpdated) }}</div>
-                    <button class="cp-btn-secondary mt-3" @click="refreshPrediction" :disabled="loading || generationRunning">
-                        <i :class="generationRunning ? 'pi pi-spin pi-spinner' : 'pi pi-sync'"></i>
-                        Обновить
-                    </button>
                 </div>
 
-                <!-- PREDICTED METRICS -->
-                <div class="cp-card">
-                    <div class="cp-card__label">Прогнозируемые метрики</div>
+                <!-- Metrics Grid -->
+                <div class="cp-card cp-metrics-card">
+                    <div class="cp-card__header">
+                        <div class="cp-card__label">
+                            <span class="cp-card__label-dot" style="background: #10B981;"></span>
+                            Прогнозируемые метрики
+                        </div>
+                    </div>
                     <div class="cp-metrics-grid">
-                        <div v-for="metric in metricCards" :key="metric.key" class="cp-metric-item">
-                            <div class="cp-metric-header">
-                                <span class="cp-metric-name"><i :class="metric.icon" class="cp-metric-icon"></i> {{ metric.label }}</span>
-                                <span class="cp-metric-range">{{ metric.rangeLabel }}</span>
+                        <div
+                            v-for="metric in metricCards"
+                            :key="metric.key"
+                            class="cp-metric-card"
+                            @mouseenter="hoveredMetric = metric.key"
+                            @mouseleave="hoveredMetric = null"
+                            :class="{ 'cp-metric-card--hovered': hoveredMetric === metric.key }"
+                        >
+                            <div class="cp-metric-card__accent"></div>
+                            <div class="cp-metric-card__header">
+                                <div class="cp-metric-icon" :class="metric.icon"></div>
+                                <div class="cp-metric-name">{{ metric.label }}</div>
+                            </div>
+                            <div class="cp-metric-value">{{ metric.rangeLabel }}</div>
+                            <div class="cp-metric-bar">
+                                <div
+                                    class="cp-metric-bar-fill"
+                                    :style="{ width: `${metric.barValue}%` }"
+                                ></div>
                             </div>
-                            <ProgressBar :value="metric.barValue" :showValue="false" class="cp-progress" />
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- WEEKLY CHART -->
-            <div class="cp-card mb-4">
-                <div class="cp-card__label">Прогноз по неделям</div>
-                <div v-if="weeklyLabels.length" class="cp-chart-wrap">
-                    <Chart type="bar" :data="weeklyChartData" :options="weeklyChartOptions" style="height:100%;" />
+            <!-- Weekly Forecast Chart -->
+            <div class="cp-card cp-chart-card mb-4">
+                <div class="cp-card__header">
+                    <div class="cp-card__label">
+                        <span class="cp-card__label-dot" style="background: #8B5CF6;"></span>
+                        Прогноз по неделям
+                    </div>
                 </div>
-                <div v-if="weeklyPhases.length" class="cp-phases-grid mt-4">
-                    <div v-for="phase in weeklyPhases" :key="phase.id" class="cp-phase-item">
-                        <div class="cp-phase-name">{{ phase.name }}</div>
-                        <div class="cp-phase-val">{{ phase.spend != null ? formatMetricValue(phase.spend, 'KZT') : '—' }}</div>
+                <div v-if="weeklyLabels.length" class="cp-chart-container">
+                    <Chart type="bar" :data="weeklyChartData" :options="weeklyChartOptions" style="height: 100%;" />
+                </div>
+                <div v-if="weeklyPhases.length" class="cp-phases-timeline">
+                    <div v-for="(phase, idx) in weeklyPhases" :key="phase.id" class="cp-phase-chip">
+                        <div class="cp-phase-chip__number">{{ idx + 1 }}</div>
+                        <div class="cp-phase-chip__body">
+                            <div class="cp-phase-chip__name">{{ phase.name }}</div>
+                            <div class="cp-phase-chip__value">{{ phase.spend != null ? formatMetricValue(phase.spend, 'KZT') : '—' }}</div>
+                        </div>
                     </div>
                 </div>
             </div>
 
-            <!-- STRENGTHS & RISKS -->
+            <!-- Strengths & Risks -->
             <div class="cp-grid-2 mb-4">
-                <div class="cp-card cp-card--green">
-                    <div class="cp-card__label" style="color:#059669;">Сильные стороны</div>
-                    <ul class="cp-factor-list">
-                        <li v-for="(factor, idx) in prediction?.strengthFactors ?? []" :key="`s-${idx}`">
-                            <i class="pi pi-check" style="color:#10B981;"></i> {{ factor }}
+                <div class="cp-card cp-card--success">
+                    <div class="cp-card__header">
+                        <div class="cp-card__label cp-card__label--success">
+                            <span class="cp-card__label-dot" style="background: #10B981;"></span>
+                            Сильные стороны
+                        </div>
+                        <div class="cp-card__badge cp-card__badge--success">{{ prediction?.strengthFactors?.length || 0 }}</div>
+                    </div>
+                    <ul class="cp-check-list">
+                        <li v-for="(factor, idx) in prediction?.strengthFactors ?? []" :key="`s-${idx}`" class="cp-check-item">
+                            <div class="cp-check-icon">
+                                <i class="pi pi-check"></i>
+                            </div>
+                            <span class="cp-check-text">{{ factor }}</span>
                         </li>
-                        <li v-if="!(prediction?.strengthFactors?.length)" class="cp-factor-empty">—</li>
+                        <li v-if="!(prediction?.strengthFactors?.length)" class="cp-empty-item">Пока нет данных</li>
                     </ul>
                 </div>
-                <div class="cp-card cp-card--amber">
-                    <div class="cp-card__label" style="color:#D97706;">Риски</div>
-                    <ul class="cp-factor-list">
-                        <li v-for="(factor, idx) in prediction?.riskFactors ?? []" :key="`r-${idx}`">
-                            <i class="pi pi-exclamation-triangle" style="color:#F59E0B;"></i> {{ factor }}
+                <div class="cp-card cp-card--warning">
+                    <div class="cp-card__header">
+                        <div class="cp-card__label cp-card__label--warning">
+                            <span class="cp-card__label-dot" style="background: #F59E0B;"></span>
+                            Риски
+                        </div>
+                        <div class="cp-card__badge cp-card__badge--warning">{{ prediction?.riskFactors?.length || 0 }}</div>
+                    </div>
+                    <ul class="cp-warning-list">
+                        <li v-for="(factor, idx) in prediction?.riskFactors ?? []" :key="`r-${idx}`" class="cp-warning-item">
+                            <div class="cp-warning-icon">
+                                <i class="pi pi-exclamation-triangle"></i>
+                            </div>
+                            <span class="cp-warning-text">{{ factor }}</span>
                         </li>
-                        <li v-if="!(prediction?.riskFactors?.length)" class="cp-factor-empty">—</li>
+                        <li v-if="!(prediction?.riskFactors?.length)" class="cp-empty-item">Риски не обнаружены</li>
                     </ul>
                 </div>
             </div>
 
-            <!-- AI RECOMMENDATIONS -->
+            <!-- AI Recommendations -->
             <div class="cp-card mb-4">
-                <div class="cp-card__label">Топ рекомендации от ИИ</div>
-                <div class="cp-rec-list">
+                <div class="cp-card__header">
+                    <div class="cp-card__label">
+                        <span class="cp-card__label-dot" style="background: #2D7BFF;"></span>
+                        Топ рекомендации от ИИ
+                    </div>
+                    <div class="cp-card__count">{{ topRecommendations.length }} рекомендаций</div>
+                </div>
+                <div class="cp-rec-carousel">
                     <div
                         v-for="(rec, index) in topRecommendations"
                         :key="rec.id ?? `${rec.title}-${index}`"
-                        class="cp-rec-item"
+                        class="cp-rec-card"
                     >
-                        <div class="cp-rec-badges">
+                        <div class="cp-rec-card__border"></div>
+                        <div class="cp-rec-card__header">
                             <span class="cp-rec-priority" :style="{ color: priorityMeta(rec.priority).color, background: priorityMeta(rec.priority).bg, borderColor: priorityMeta(rec.priority).border }">
+                                <span class="cp-rec-priority__dot"></span>
                                 {{ rec.priority }}
                             </span>
                             <span class="cp-rec-category">
-                                <i :class="categoryIcon(rec.category)"></i> {{ rec.category }}
+                                <i :class="categoryIcon(rec.category)"></i>
+                                {{ rec.category }}
                             </span>
                         </div>
                         <h4 class="cp-rec-title">{{ rec.title }}</h4>
                         <p class="cp-rec-desc">{{ rec.description }}</p>
-                        <div class="cp-rec-impact"><i class="pi pi-chart-line"></i> {{ rec.expectedImpact }}</div>
+                        <div class="cp-rec-impact">
+                            <div class="cp-rec-impact__icon">
+                                <i class="pi pi-chart-line"></i>
+                            </div>
+                            <span>{{ rec.expectedImpact }}</span>
+                        </div>
                     </div>
-                    <div v-if="!topRecommendations.length" class="cp-factor-empty" style="padding:16px;">Рекомендации отсутствуют</div>
+                    <div v-if="!topRecommendations.length" class="cp-empty-block">
+                        <i class="pi pi-inbox"></i>
+                        <span>Рекомендации отсутствуют</span>
+                    </div>
                 </div>
             </div>
 
-            <!-- AUDIENCE + BUDGET INSIGHTS ROW -->
+            <!-- Audience Insights -->
             <div class="cp-grid-3 mb-4">
-                <div class="cp-card">
+                <div class="cp-card cp-insight-card">
+                    <div class="cp-insight-card__icon" style="background: rgba(45,123,255,0.1); color: #2D7BFF;">
+                        <i class="pi pi-users"></i>
+                    </div>
                     <div class="cp-card__label">Лучший сегмент</div>
-                    <p class="cp-info-text">{{ audienceInsights.bestPerformingSegment || '—' }}</p>
+                    <p class="cp-insight-text">{{ audienceInsights.bestPerformingSegment || '—' }}</p>
                 </div>
-                <div class="cp-card">
+                <div class="cp-card cp-insight-card">
+                    <div class="cp-insight-card__icon" style="background: rgba(16,185,129,0.1); color: #10B981;">
+                        <i class="pi pi-chart-line"></i>
+                    </div>
                     <div class="cp-card__label">Расширение аудитории</div>
-                    <p class="cp-info-text">{{ audienceInsights.recommendedExpansion || '—' }}</p>
+                    <p class="cp-insight-text">{{ audienceInsights.recommendedExpansion || '—' }}</p>
                 </div>
-                <div class="cp-card">
+                <div class="cp-card cp-insight-card">
+                    <div class="cp-insight-card__icon" style="background: rgba(239,68,68,0.1); color: #EF4444;">
+                        <i class="pi pi-ban"></i>
+                    </div>
                     <div class="cp-card__label">Кого исключить</div>
-                    <p class="cp-info-text">{{ audienceInsights.exclusionAdvice || '—' }}</p>
+                    <p class="cp-insight-text">{{ audienceInsights.exclusionAdvice || '—' }}</p>
                 </div>
             </div>
 
-            <!-- BUDGET OPTIMIZATION -->
-            <div class="cp-card mb-4">
-                <div class="cp-card__label">Оптимизация бюджета</div>
-                <div class="cp-grid-2 mt-3">
-                    <div class="cp-info-block">
-                        <div class="cp-info-block__key">Текущее распределение</div>
-                        <div class="cp-info-block__val">{{ budgetOptimization.currentAllocation || '—' }}</div>
+            <!-- Budget Optimization -->
+            <div class="cp-card cp-budget-card mb-4">
+                <div class="cp-card__header">
+                    <div class="cp-card__label">
+                        <span class="cp-card__label-dot" style="background: #F59E0B;"></span>
+                        Оптимизация бюджета
+                    </div>
+                </div>
+                <div class="cp-budget-grid">
+                    <div class="cp-budget-block">
+                        <div class="cp-budget-block__key">Текущее распределение</div>
+                        <div class="cp-budget-block__val">{{ budgetOptimization.currentAllocation || '—' }}</div>
                     </div>
-                    <div class="cp-info-block">
-                        <div class="cp-info-block__key">Рекомендация</div>
-                        <div class="cp-info-block__val">{{ budgetOptimization.recommendedReallocation || '—' }}</div>
+                    <div class="cp-budget-block">
+                        <div class="cp-budget-block__key">Рекомендация</div>
+                        <div class="cp-budget-block__val">{{ budgetOptimization.recommendedReallocation || '—' }}</div>
                     </div>
                 </div>
-                <div class="cp-cpl-reduction">
-                    <i class="pi pi-arrow-down-right" style="color:#059669;"></i>
-                    Потенциальное снижение CPL: <b style="color: #059669;">{{ budgetOptimization.potentialCplReduction || '—' }}</b>
+                <div class="cp-cpl-badge">
+                    <div class="cp-cpl-badge__icon">
+                        <i class="pi pi-arrow-down-right"></i>
+                    </div>
+                    <div class="cp-cpl-badge__body">
+                        <span class="cp-cpl-badge__label">Потенциальное снижение CPL</span>
+                        <span class="cp-cpl-badge__val">{{ budgetOptimization.potentialCplReduction || '—' }}</span>
+                    </div>
                 </div>
             </div>
 
-            <!-- COMPETITIVE ANALYSIS -->
+            <!-- Competitive Analysis -->
             <div class="cp-card">
-                <div class="cp-card__label">Конкурентный анализ</div>
-                <div class="cp-comp-row">
-                    <div class="cp-comp-gauge">
-                        <svg width="144" height="144" viewBox="0 0 190 190">
-                            <g transform="translate(95,95)">
-                                <circle r="70" fill="none" stroke="rgba(45,123,255,0.06)" stroke-width="12" />
-                                <circle
-                                    r="70"
-                                    fill="none"
-                                    stroke="#2D7BFF"
-                                    stroke-width="12"
-                                    stroke-linecap="round"
-                                    :stroke-dasharray="gaugeCircumference"
-                                    :stroke-dashoffset="differentiationOffset"
-                                    transform="rotate(-90)"
-                                    style="transition: stroke-dashoffset 1s ease;"
-                                />
-                            </g>
+                <div class="cp-card__header">
+                    <div class="cp-card__label">
+                        <span class="cp-card__label-dot" style="background: #8B5CF6;"></span>
+                        Конкурентный анализ
+                    </div>
+                </div>
+                <div class="cp-competitive-layout">
+                    <div class="cp-competitive-gauge">
+                        <svg width="160" height="160" viewBox="0 0 190 190">
+                            <defs>
+                                <linearGradient id="diffGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                                    <stop offset="0%" stop-color="#2D7BFF" />
+                                    <stop offset="100%" stop-color="#8B5CF6" />
+                                </linearGradient>
+                            </defs>
+                            <circle r="70" cx="95" cy="95" fill="none" stroke="rgba(45,123,255,0.08)" stroke-width="10" />
+                            <circle
+                                r="70"
+                                cx="95"
+                                cy="95"
+                                fill="none"
+                                stroke="url(#diffGrad)"
+                                stroke-width="12"
+                                stroke-linecap="round"
+                                :stroke-dasharray="gaugeCircumference"
+                                :stroke-dashoffset="differentiationOffset"
+                                transform="rotate(-90 95 95)"
+                                style="transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);"
+                            />
                         </svg>
-                        <div class="cp-comp-gauge__val">{{ differentiationScore }}/100</div>
+                        <div class="cp-competitive-gauge__val">{{ differentiationScore }}<span class="cp-competitive-gauge__max">/100</span></div>
+                        <div class="cp-competitive-gauge__label">Дифференциация</div>
                     </div>
-                    <div class="cp-comp-info">
-                        <div class="cp-comp-saturation">
-                            Насыщенность рынка:
-                            <span :style="{ color: marketSaturationMeta.color, fontWeight: '800' }">{{ marketSaturationMeta.label }}</span>
+                    <div class="cp-competitive-info">
+                        <div class="cp-market-saturation">
+                            <span class="cp-market-saturation__label">Насыщенность рынка</span>
+                            <span class="cp-market-saturation__value" :style="{ color: marketSaturationMeta.color }">
+                                <span class="cp-market-saturation__dot" :style="{ background: marketSaturationMeta.color }"></span>
+                                {{ marketSaturationMeta.label }}
+                            </span>
+                        </div>
+                        <div class="cp-advantages-section">
+                            <div class="cp-card__label">Конкурентные преимущества</div>
+                            <ul class="cp-advantage-list">
+                                <li v-for="(advantage, index) in competitiveAdvantages" :key="`adv-${index}`" class="cp-advantage-item">
+                                    <div class="cp-advantage-icon">
+                                        <i class="pi pi-check-circle"></i>
+                                    </div>
+                                    <span>{{ advantage }}</span>
+                                </li>
+                                <li v-if="!competitiveAdvantages.length" class="cp-empty-item">—</li>
+                            </ul>
                         </div>
-                        <div class="cp-card__label mt-3" style="margin-bottom:8px;">Конкурентные преимущества</div>
-                        <ul class="cp-factor-list">
-                            <li v-for="(advantage, index) in competitiveAdvantages" :key="`adv-${index}`">
-                                <i class="pi pi-check-circle" style="color:#2D7BFF;"></i> {{ advantage }}
-                            </li>
-                            <li v-if="!competitiveAdvantages.length" class="cp-factor-empty">—</li>
-                        </ul>
                     </div>
                 </div>
             </div>
@@ -464,540 +625,254 @@ onMounted(() => { void hydratePrediction(); });
 </template>
 
 <style scoped>
+/* ═══════════════════════════════════════════
+   PREMIUM 3D BASE
+   ═══════════════════════════════════════════ */
 .cp-section {
-    padding: 8px 0;
+    padding: 0;
+    font-family: 'Onest', sans-serif;
 }
 
-/* ─── Cards ─── */
-.cp-card {
+/* ═══════════════════════════════════════════
+   SKELETON & EMPTY STATE
+   ═══════════════════════════════════════════ */
+.cp-skeleton-page {
+    display: flex; flex-direction: column; gap: 20px;
+}
+.cp-skeleton-card {
     background: #fff;
-    border: 1px solid rgba(45, 123, 255, 0.15);
+    border: 1px solid rgba(45, 123, 255, 0.08);
     border-radius: 20px;
     padding: 24px;
     position: relative;
     overflow: hidden;
-    transition: all 0.3s;
-    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.04);
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
+}
+.cp-skeleton-circle, .cp-skeleton-line, .cp-skeleton-label {
+    background: linear-gradient(90deg, #F8FAFC 25%, #F1F5F9 50%, #F8FAFC 75%);
+    background-size: 200% 100%;
+    animation: cp-shimmer 1.5s infinite linear;
+}
+.cp-skeleton-circle { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px; }
+.cp-skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 12px; }
+.cp-skeleton-label { width: 120px; height: 12px; border-radius: 6px; margin-bottom: 24px; }
+.w-60 { width: 60%; } .w-40 { width: 40%; } .w-80 { width: 80%; } .w-70 { width: 70%; } .w-full { width: 100%; }
+
+@keyframes cp-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
 }
 
-.cp-card--green { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.04); }
-.cp-card--amber { border-color: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.04); }
-
-.cp-card__label {
-    font-family: 'Onest', sans-serif;
-    font-size: 10px;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: #64748B;
-    margin-bottom: 16px;
-}
-
-/* ─── Layout grids ─── */
-.cp-grid-2 {
-    display: grid;
-    gap: 12px;
-    grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
-    .cp-grid-2 { grid-template-columns: repeat(2, 1fr); }
-}
-
-.cp-grid-3 {
-    display: grid;
-    gap: 12px;
-    grid-template-columns: 1fr;
-}
-
-@media (min-width: 768px) {
-    .cp-grid-3 { grid-template-columns: repeat(3, 1fr); }
-}
-
-.mb-4 { margin-bottom: 16px; }
-.mt-3 { margin-top: 12px; }
-.mt-4 { margin-top: 16px; }
-
-/* ─── Score ─── */
-.cp-score-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.cp-score-wrap {
-    position: relative;
-    width: 160px;
-    height: 160px;
-    margin: 0 auto 8px;
-}
-
-.cp-gauge {
-    position: absolute;
-    inset: 0;
-}
-
-.cp-score-inner {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.cp-score-val {
-    font-family: 'Onest', sans-serif;
-    font-size: 42px;
-    font-weight: 900;
-    line-height: 1;
-}
-
-.cp-score-sub {
-    font-size: 12px;
-    font-weight: 700;
-}
-
-.cp-score-label {
-    font-family: 'Onest', sans-serif;
-    font-size: 14px;
-    font-weight: 800;
-    margin-bottom: 4px;
-}
-
-.cp-score-conf, .cp-score-date {
-    font-size: 11px;
-    margin-bottom: 2px;
-    font-weight: 500;
-    color: #64748B;
-}
-
-/* ─── Metrics ─── */
-.cp-metrics-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
-
-.cp-metric-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 6px;
-}
-
-.cp-metric-name {
-    font-size: 13px;
-    font-weight: 700;
-    color: #475569;
-}
-
-.cp-metric-icon {
-    font-size: 12px;
-    margin-right: 8px;
-    color: #2D7BFF;
-}
-
-.cp-metric-range {
-    font-family: 'Onest', sans-serif;
-    font-size: 12px;
-    font-weight: 800;
-    color: #0F172A;
-}
-
-:deep(.cp-progress .p-progressbar) {
-    height: 6px !important;
-    background: #F1F5F9 !important;
-    border-radius: 999px !important;
-    border: none !important;
-}
-
-:deep(.cp-progress .p-progressbar-value) {
-    background: linear-gradient(90deg, #2D7BFF, #00D48B) !important;
-    border-radius: 999px !important;
-}
-
-/* ─── Chart ─── */
-.cp-chart-wrap {
-    height: 280px;
-    background: rgba(45, 123, 255, 0.02);
-    border-radius: 14px;
-    padding: 16px;
-    border: 1px dashed rgba(45, 123, 255, 0.1);
-}
-
-.cp-phases-grid {
-    display: grid;
-    gap: 8px;
-    grid-template-columns: repeat(2, 1fr);
-}
-
-@media (min-width: 768px) {
-    .cp-phases-grid { grid-template-columns: repeat(4, 1fr); }
-}
-
-.cp-phase-item {
-    padding: 10px 14px;
-    background: #fff;
-    border: 1px solid rgba(45, 123, 255, 0.12);
-    border-radius: 12px;
-}
-
-.cp-phase-name {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #94A3B8;
-    margin-bottom: 4px;
-    font-weight: 700;
-}
-
-.cp-phase-val {
-    font-family: 'Onest', sans-serif;
-    font-size: 13px;
-    font-weight: 800;
-    color: #0F172A;
-}
-
-/* ─── Factors ─── */
-.cp-factor-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.cp-factor-list li {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    font-size: 13px;
-    color: #475569;
-    line-height: 1.5;
-    font-weight: 500;
-}
-
-.cp-factor-empty {
-    font-size: 12px;
-    color: #94A3B8;
-}
-
-/* ─── Recommendations ─── */
-.cp-rec-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.cp-rec-item {
-    padding: 18px;
-    background: #fff;
-    border: 1px solid rgba(45, 123, 255, 0.12);
-    border-radius: 16px;
-    transition: all 0.2s;
-}
-
-.cp-rec-item:hover {
-    border-color: rgba(45, 123, 255, 0.3);
-    box-shadow: 0 4px 15px rgba(45, 123, 255, 0.06);
-}
-
-.cp-rec-badges {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.cp-rec-priority {
-    font-size: 9px;
-    font-weight: 800;
-    font-family: 'Onest', sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    padding: 3px 10px;
-    border-radius: 999px;
-    border: 1px solid;
-}
-
-.cp-rec-category {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    font-weight: 700;
-    color: #2D7BFF;
-    background: rgba(45, 123, 255, 0.08);
-    border-radius: 999px;
-    padding: 3px 10px;
-}
-
-.cp-rec-title {
-    font-family: 'Onest', sans-serif;
-    font-size: 15px;
-    font-weight: 800;
-    color: #0F172A;
-    margin-bottom: 8px;
-    line-height: 1.4;
-}
-
-.cp-rec-desc {
-    font-size: 13px;
-    color: #64748B;
-    line-height: 1.6;
-    margin-bottom: 10px;
-}
-
-.cp-rec-impact {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 800;
-    color: #059669;
-}
-
-/* ─── Info ─── */
-.cp-info-text {
-    font-size: 14px;
-    color: #475569;
-    line-height: 1.6;
-    font-weight: 500;
-}
-
-.cp-info-block {
-    padding: 14px;
-    background: rgba(248, 250, 252, 0.8);
-    border: 1px solid #E2E8F0;
-    border-radius: 12px;
-}
-
-.cp-info-block__key {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: #94A3B8;
-    margin-bottom: 6px;
-    font-weight: 800;
-}
-
-.cp-info-block__val {
-    font-size: 13px;
-    color: #1E293B;
-    line-height: 1.5;
-    font-weight: 600;
-}
-
-.cp-cpl-reduction {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 12px;
-    padding: 12px 16px;
-    background: rgba(16, 185, 129, 0.08);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    border-radius: 12px;
-    font-size: 13px;
-    color: #065F46;
-    font-weight: 600;
-}
-
-/* ─── Competitive ─── */
-.cp-comp-row {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-}
-
-.cp-comp-gauge {
-    position: relative;
-    width: 144px;
-    height: 144px;
-}
-
-.cp-comp-gauge__val {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'Onest', sans-serif;
-    font-size: 20px;
-    font-weight: 900;
-    color: #0F172A;
-}
-
-.cp-comp-saturation {
-    font-size: 14px;
-    color: #64748B;
-    margin-bottom: 8px;
-}
-
-/* ─── Misc ─── */
-.cp-empty {
-    padding: 60px 40px;
-    text-align: center;
+.cp-empty-state {
+    display: flex; flex-direction: column; align-items: center; gap: 20px;
+    padding: 100px 24px;
     background: #fff;
     border-radius: 24px;
-    border: 1px dashed rgba(45, 123, 255, 0.3);
-}
-
-.cp-empty__icon { font-size: 40px; color: #E2E8F0; margin-bottom: 20px; }
-.cp-empty__title { font-family: 'Onest', sans-serif; font-size: 20px; font-weight: 900; color: #0F172A; margin-bottom: 8px; }
-.cp-empty__sub { font-size: 14px; color: #94A3B8; margin-bottom: 24px; }
-
-.cp-btn-primary {
-    display: inline-flex; align-items: center; gap: 10px;
-    padding: 12px 28px; border-radius: 12px; border: none;
-    background: #2D7BFF; color: #fff; font-weight: 800;
-    font-family: 'Onest', sans-serif; cursor: pointer; transition: all 0.2s;
-}
-.cp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(45,123,255,0.4); }
-
-.cp-btn-secondary {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 10px 20px; border-radius: 10px; border: 1px solid #E2E8F0;
-    background: #fff; color: #475569; font-weight: 700;
-    font-family: 'Onest', sans-serif; font-size: 12px; cursor: pointer; transition: all 0.2s;
-}
-.cp-btn-secondary:hover { border-color: #2D7BFF; color: #2D7BFF; }
-
-.cp-skel-block {
-    background: #F8FAFF !important;
-    animation: cm-pulse 2s infinite;
-}
-
-.cm-skel-label {
-    color: #00D48B;
-}
-
-/* â"€â"€â"€ Competitive â"€â"€â"€ */
-.cp-comp-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 24px;
-    flex-wrap: wrap;
-}
-
-.cp-comp-gauge {
-    position: relative;
-    width: 144px;
-    height: 144px;
-    flex-shrink: 0;
-}
-
-.cp-comp-gauge__val {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'Unbounded', sans-serif;
-    font-size: 18px;
-    font-weight: 900;
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.cp-comp-info {
-    flex: 1;
-    min-width: 200px;
-}
-
-.cp-comp-saturation {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.55);
-}
-
-/* ─── Buttons ─── */
-.cp-btn-primary {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    border-radius: 12px;
-    background: #2D7BFF;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 700;
-    font-family: 'Unbounded', sans-serif;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-.cp-btn-primary:hover:not(:disabled) {
-    background: #1a6bff;
-    box-shadow: 0 0 24px rgba(45, 123, 255, 0.4);
-    transform: translateY(-2px);
-}
-
-.cp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.cp-btn-secondary {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 18px;
-    border-radius: 10px;
-    background: transparent;
-    border: 1px solid rgba(45, 123, 255, 0.3);
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.cp-btn-secondary:hover:not(:disabled) {
-    border-color: #2D7BFF;
-    color: #fff;
-    background: rgba(45, 123, 255, 0.1);
-}
-
-.cp-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
-
-/* ─── Empty ─── */
-.cp-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    padding: 60px 24px;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(45, 123, 255, 0.12);
+    border: 1px dashed rgba(45, 123, 255, 0.2);
+    box-shadow: 0 10px 40px rgba(15,23,42,0.02);
     text-align: center;
 }
+.cp-empty-state__orb {
+    position: relative; width: 100px; height: 100px;
+}
+.cp-empty-state__orb-ring {
+    position: absolute; inset: -10px; border-radius: 50%;
+    border: 2px dashed rgba(45, 123, 255, 0.15);
+    animation: cp-spin 20s linear infinite;
+}
+@keyframes cp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.cp-empty-state__icon {
+    width: 100%; height: 100%; border-radius: 20px;
+    background: linear-gradient(135deg, #2D7BFF, #1E60FF);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 40px; color: #fff;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 8px 16px rgba(45,123,255,0.3);
+}
+.cp-empty-state__title { font-size: 24px; font-weight: 900; color: #0F172A; margin: 0; }
+.cp-empty-state__desc { font-size: 15px; color: #64748B; max-width: 400px; line-height: 1.6; }
 
-.cp-empty__icon {
-    font-size: 40px;
-    color: rgba(45, 123, 255, 0.5);
+.cp-btn-glow {
+    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
+    padding: 16px 32px; border-radius: 14px; border: none;
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff;
+    font-size: 15px; font-weight: 800; cursor: pointer;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 24px rgba(45, 123, 255, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.cp-btn-glow:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 16px 36px rgba(45, 123, 255, 0.4); }
+.cp-btn-glow:disabled { opacity: 0.5; filter: grayscale(1); }
+
+/* ═══════════════════════════════════════════
+   PREMIUM 3D CARDS
+   ═══════════════════════════════════════════ */
+.cp-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(15, 23, 42, 0.05);
+    border-radius: 24px;
+    padding: 28px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.02);
+}
+.cp-card:hover {
+    box-shadow: 0 16px 40px rgba(45, 123, 255, 0.06);
+    transform: translateY(-4px);
+    background: #FFFFFF;
 }
 
-.cp-empty__title {
-    font-family: 'Unbounded', sans-serif;
-    font-size: 18px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.85);
+.cp-card__header {
+    display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; z-index: 1;
+}
+.cp-card__label {
+    display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #64748B;
+}
+.cp-card__label-dot {
+    width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF;
+    box-shadow: 0 0 10px rgba(45, 123, 255, 0.6); animation: cp-dot-pulse 2s infinite;
+}
+.cp-card__label--success .cp-card__label-dot { background: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
+.cp-card__label--warning .cp-card__label-dot { background: #F59E0B; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
+
+.cp-card__badge {
+    font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 100px;
+    background: rgba(45, 123, 255, 0.08); color: #2D7BFF;
+}
+.cp-card__badge--success { background: rgba(16, 185, 129, 0.08); color: #10B981; }
+.cp-card__badge--warning { background: rgba(245, 158, 11, 0.08); color: #F59E0B; }
+.cp-card__count { font-size: 12px; font-weight: 700; color: #94A3B8; }
+
+/* ═══════════════════════════════════════════
+   SCORE GAUGE - TRUE 3D
+   ═══════════════════════════════════════════ */
+.cp-hero { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 20px; }
+@media (min-width: 768px) { .cp-hero { grid-template-columns: 420px 1fr; } }
+
+.cp-score-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
+.cp-gauge-container { position: relative; width: 200px; height: 200px; margin-bottom: 20px; }
+.cp-gauge { position: absolute; inset: -10px; width: 220px; height: 220px; }
+
+.cp-gauge-center {
+    position: absolute; inset: 15px; background: #fff; border-radius: 50%;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    box-shadow: 
+        inset 0 4px 8px rgba(0,0,0,0.05),
+        0 8px 16px rgba(45,123,255,0.1);
+}
+.cp-gauge-value {
+    font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
+    background: linear-gradient(135deg, #2D7BFF, #10B981);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 4px 8px rgba(45,123,255,0.2));
+}
+.cp-gauge-max { font-size: 15px; font-weight: 800; color: #94A3B8; margin-top: 4px; }
+
+.cp-score-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.cp-score-label { font-size: 18px; font-weight: 900; }
+.cp-score-confidence { font-size: 13.5px; color: #64748B; font-weight: 700; display: flex; align-items: center; gap: 6px; }
+
+/* ═══════════════════════════════════════════
+   PREMIUM METRICS GRID
+   ═══════════════════════════════════════════ */
+.cp-metrics-card { display: flex; flex-direction: column; }
+.cp-metrics-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
+@media (min-width: 1024px) { .cp-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
+
+.cp-metric-card {
+    background: #fff; border: 1px solid rgba(15, 23, 42, 0.04);
+    border-radius: 20px; padding: 24px; position: relative; overflow: hidden;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cp-metric-card:hover {
+    transform: translateY(-4px); box-shadow: 0 12px 24px rgba(45, 123, 255, 0.08);
+}
+.cp-metric-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.cp-metric-icon {
+    width: 44px; height: 44px; border-radius: 12px;
+    background: linear-gradient(135deg, rgba(45,123,255,0.1), rgba(45,123,255,0.02));
+    color: #2D7BFF; display: flex; align-items: center; justify-content: center; font-size: 18px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
+}
+.cp-metric-name { font-size: 12px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; }
+.cp-metric-value { font-size: 18px; font-weight: 900; color: #0F172A; margin-bottom: 14px; }
+
+.cp-metric-bar { height: 8px; border-radius: 100px; background: rgba(15, 23, 42, 0.04); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
+.cp-metric-bar-fill {
+    height: 100%; border-radius: 100px;
+    background: linear-gradient(90deg, #2D7BFF, #10B981);
+    box-shadow: 0 2px 4px rgba(45, 123, 255, 0.3);
 }
 
-.cp-empty__sub {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.4);
-    line-height: 1.6;
+/* ═══════════════════════════════════════════
+   AI RECOMMENDATIONS BENTO
+   ═══════════════════════════════════════════ */
+.cp-rec-carousel { display: flex; flex-direction: column; gap: 16px; }
+.cp-rec-card {
+    padding: 24px; background: #fff; border: 1px solid rgba(45, 123, 255, 0.08); border-radius: 20px;
+    transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+}
+.cp-rec-card:hover { transform: translateX(6px); border-color: rgba(45, 123, 255, 0.2); box-shadow: 0 12px 32px rgba(45, 123, 255, 0.06); }
+.cp-rec-header { display: flex; gap: 10px; margin-bottom: 14px; }
+.cp-rec-title { font-size: 16px; font-weight: 900; color: #0F172A; margin-bottom: 8px; }
+.cp-rec-desc { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 16px; font-weight: 500; }
+.cp-rec-impact {
+    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #10B981;
+    padding: 8px 16px; background: rgba(16, 185, 129, 0.08); border-radius: 12px;
 }
 
-/* ─── Skeleton ─── */
-.cp-skel-block {
-    animation: cp-pulse 2s infinite;
+/* ═══════════════════════════════════════════
+   GRID & UTILS
+   ═══════════════════════════════════════════ */
+.cp-grid-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }
+@media (min-width: 768px) { .cp-grid-3 { grid-template-columns: repeat(3, 1fr); } }
+
+.cp-insight-card { display: flex; flex-direction: column; gap: 14px; }
+.cp-insight-card__icon {
+    width: 48px; height: 48px; border-radius: 14px;
+    display: flex; align-items: center; justify-content: center; font-size: 20px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
+}
+.cp-insight-text { font-size: 15px; color: #0F172A; font-weight: 700; }
+
+.cp-budget-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
+.cp-budget-block { padding: 20px; background: #f8fafc; border-radius: 16px; border: 1px solid rgba(15,23,42,0.04); }
+.cp-cpl-badge {
+    display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px;
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.02));
+    border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 16px;
 }
 
-@keyframes cp-pulse {
-    0%, 100% { opacity: 0.5; }
-    50% { opacity: 0.25; }
+.cp-competitive-layout { display: flex; flex-direction: row; gap: 32px; align-items: center; }
+.cp-advantage-list { display: flex; flex-direction: column; gap: 12px; }
+.cp-advantage-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; }
+.cp-advantage-icon { color: #2D7BFF; font-size: 16px; margin-top: 2px; }
+.cp-market-saturation { padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.02); border: 1px solid rgba(45,123,255,0.08); }
+
+.cp-check-list, .cp-warning-list { display: flex; flex-direction: column; gap: 12px; list-style:none; padding:0; margin:0; }
+.cp-check-item, .cp-warning-item { display: flex; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; line-height: 1.6; }
+.cp-check-icon, .cp-warning-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items:center; justify-content:center; }
+.cp-check-icon { background: rgba(16,185,129,0.1); color: #10B981; } .cp-warning-icon { background: rgba(245,158,11,0.1); color: #F59E0B; }
+
+.mb-4 { margin-bottom: 24px; }
+.cp-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
+
+@media (max-width: 960px) {
+    .cp-grid-2,
+    .cp-budget-grid,
+    .cp-metrics-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .cp-competitive-layout {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .cp-card {
+        padding: 20px;
+        border-radius: 20px;
+    }
 }
 </style>
-
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/AutomationRulesCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/AutomationRulesCard.vue
new file mode 100644
index 0000000..5e3c5be
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/AutomationRulesCard.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AutomationRule } from '@/types/campaign.types';
+import { formatAutomationRule } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    rules: AutomationRule[] | null | undefined;
+}>();
+
+const normalizedRules = computed(() => (Array.isArray(props.rules) ? props.rules.map((rule, index) => formatAutomationRule(rule, index)) : []));
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Automation Rules</div>
+                <h3 class="tgx-card__title">Rule engine для автоконтроля кампании</h3>
+            </div>
+            <div class="tgx-badge">{{ normalizedRules.length }} rules</div>
+        </div>
+
+        <div v-if="normalizedRules.length" class="tgx-rules">
+            <article v-for="rule in normalizedRules" :key="rule.id" class="tgx-rule">
+                <div class="tgx-rule__head">
+                    <div>
+                        <div class="tgx-rule__id">{{ rule.id }}</div>
+                        <div class="tgx-rule__level">{{ rule.entityLevel }}</div>
+                    </div>
+                    <div class="tgx-rule__verb">THEN {{ rule.action }} {{ rule.actionValue }}</div>
+                </div>
+
+                <div class="tgx-rule__logic">
+                    <span class="tgx-rule__if">IF</span>
+                    <div class="tgx-rule__conditions">
+                        <template v-for="(condition, index) in rule.conditions" :key="`${rule.id}-${index}`">
+                            <span class="tgx-condition">{{ condition }}</span>
+                            <span v-if="index < rule.conditions.length - 1" class="tgx-joiner">{{ rule.joiner }}</span>
+                        </template>
+                    </div>
+                </div>
+            </article>
+        </div>
+
+        <div v-else class="tgx-empty">
+            Автоматические правила ещё не сформированы. Growth engine появится после следующего AI-прогона.
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: start;
+    margin-bottom: 18px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-badge {
+    padding: 10px 14px;
+    border-radius: 999px;
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.tgx-rules {
+    display: grid;
+    gap: 14px;
+}
+
+.tgx-rule {
+    border-radius: 22px;
+    padding: 20px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(255, 255, 255, 0.99));
+}
+
+.tgx-rule__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: start;
+    margin-bottom: 16px;
+}
+
+.tgx-rule__id {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+    font-weight: 800;
+}
+
+.tgx-rule__level {
+    margin-top: 8px;
+    font-size: 22px;
+    font-weight: 800;
+    color: #12254b;
+    letter-spacing: -0.04em;
+}
+
+.tgx-rule__verb {
+    padding: 10px 14px;
+    border-radius: 16px;
+    background: rgba(16, 31, 72, 0.95);
+    color: #fff;
+    font-size: 13px;
+    font-weight: 800;
+}
+
+.tgx-rule__logic {
+    display: flex;
+    gap: 14px;
+    align-items: start;
+}
+
+.tgx-rule__if {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 52px;
+    min-height: 40px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #2d7bff, #6c5cff);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.tgx-rule__conditions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+}
+
+.tgx-condition,
+.tgx-joiner {
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 999px;
+    padding: 0 14px;
+}
+
+.tgx-condition {
+    background: #fff;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    color: #48608b;
+    font-weight: 700;
+}
+
+.tgx-joiner {
+    background: rgba(124, 58, 237, 0.1);
+    color: #7c3aed;
+    font-size: 11px;
+    font-weight: 800;
+}
+
+.tgx-empty {
+    border-radius: 20px;
+    padding: 18px;
+    background: rgba(45, 123, 255, 0.06);
+    color: #60749e;
+}
+
+@media (max-width: 880px) {
+    .tgx-rule__head,
+    .tgx-rule__logic {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/FunnelStrategyBoard.vue b/src/views/pages/marketing/targetologist/components/growth-center/FunnelStrategyBoard.vue
new file mode 100644
index 0000000..952ef23
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/FunnelStrategyBoard.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { FunnelStrategy } from '@/types/campaign.types';
+import { normalizeFunnelStrategy } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    funnelStrategy: FunnelStrategy | null | undefined;
+}>();
+
+const board = computed(() => normalizeFunnelStrategy(props.funnelStrategy));
+
+const stages = computed(() => [
+    { key: 'tof', title: 'TOF', subtitle: 'Top of Funnel', accent: 'blue', data: board.value.tof },
+    { key: 'mof', title: 'MOF', subtitle: 'Middle of Funnel', accent: 'purple', data: board.value.mof },
+    { key: 'bof', title: 'BOF', subtitle: 'Bottom of Funnel', accent: 'green', data: board.value.bof }
+]);
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Funnel Strategy</div>
+                <h3 class="tgx-card__title">Операционная воронка TOF / MOF / BOF</h3>
+            </div>
+        </div>
+
+        <div class="tgx-funnel-grid">
+            <article v-for="stage in stages" :key="stage.key" class="tgx-stage" :class="`tgx-stage--${stage.accent}`">
+                <div class="tgx-stage__head">
+                    <div>
+                        <div class="tgx-stage__title">{{ stage.title }}</div>
+                        <div class="tgx-stage__subtitle">{{ stage.subtitle }}</div>
+                    </div>
+                </div>
+
+                <div class="tgx-stage__block">
+                    <span class="tgx-stage__label">Who sees this</span>
+                    <p>{{ stage.data.audience }}</p>
+                </div>
+
+                <div class="tgx-stage__block">
+                    <span class="tgx-stage__label">Message</span>
+                    <p>{{ stage.data.message }}</p>
+                </div>
+
+                <div class="tgx-stage__block">
+                    <span class="tgx-stage__label">Creative Logic</span>
+                    <p>{{ stage.data.creativeLogic }}</p>
+                </div>
+
+                <div class="tgx-stage__footer">
+                    <span class="tgx-stage__label">CTA Style</span>
+                    <strong>{{ stage.data.ctaStyle }}</strong>
+                </div>
+            </article>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-funnel-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.tgx-stage {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    border-radius: 24px;
+    padding: 20px;
+    border: 1px solid rgba(45, 123, 255, 0.11);
+    background: linear-gradient(180deg, rgba(245, 248, 255, 0.95), rgba(255, 255, 255, 0.98));
+}
+
+.tgx-stage--blue { box-shadow: inset 0 4px 0 rgba(45, 123, 255, 0.75); }
+.tgx-stage--purple { box-shadow: inset 0 4px 0 rgba(124, 58, 237, 0.72); }
+.tgx-stage--green { box-shadow: inset 0 4px 0 rgba(16, 185, 129, 0.72); }
+
+.tgx-stage__head {
+    display: flex;
+    justify-content: space-between;
+}
+
+.tgx-stage__title {
+    font-size: 30px;
+    line-height: 1;
+    font-weight: 800;
+    letter-spacing: -0.05em;
+    color: #12254b;
+}
+
+.tgx-stage__subtitle {
+    margin-top: 4px;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7c8fb3;
+    font-weight: 800;
+}
+
+.tgx-stage__block {
+    display: grid;
+    gap: 8px;
+}
+
+.tgx-stage__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #8094b8;
+    font-weight: 800;
+}
+
+.tgx-stage__block p,
+.tgx-stage__footer strong {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.7;
+    color: #4f648e;
+}
+
+.tgx-stage__footer {
+    margin-top: auto;
+    padding-top: 14px;
+    border-top: 1px solid rgba(45, 123, 255, 0.08);
+}
+
+@media (max-width: 920px) {
+    .tgx-funnel-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/HypothesisMatrixBoard.vue b/src/views/pages/marketing/targetologist/components/growth-center/HypothesisMatrixBoard.vue
new file mode 100644
index 0000000..5363880
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/HypothesisMatrixBoard.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { HypothesisMatrix, HypothesisMatrixCell } from '@/types/campaign.types';
+import { normalizeHypothesisMatrix } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    matrix: HypothesisMatrix | HypothesisMatrixCell[] | null | undefined;
+}>();
+
+const normalized = computed(() => normalizeHypothesisMatrix(props.matrix));
+const activeRow = ref('all');
+const activeColumn = ref('all');
+const activeStage = ref('all');
+
+const stageOptions = computed(() => ['all', ...Array.from(new Set(normalized.value.cells.map((cell) => cell.funnelStage)))]);
+
+const filteredCells = computed(() =>
+    normalized.value.cells.filter((cell) => {
+        const matchRow = activeRow.value === 'all' || cell.row === activeRow.value;
+        const matchColumn = activeColumn.value === 'all' || cell.column === activeColumn.value;
+        const matchStage = activeStage.value === 'all' || cell.funnelStage === activeStage.value;
+        return matchRow && matchColumn && matchStage;
+    })
+);
+
+const cellByCoordinates = (row: string, column: string) =>
+    normalized.value.cells.find((cell) => cell.row === row && cell.column === column);
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Hypothesis Matrix</div>
+                <h3 class="tgx-card__title">4×4 матрица гипотез по углам и визуалам</h3>
+            </div>
+
+            <div class="tgx-matrix-badge">{{ normalized.filledCount }} / {{ normalized.totalCount }}</div>
+        </div>
+
+        <div v-if="normalized.cells.length" class="tgx-matrix-desktop">
+            <div class="tgx-matrix-grid" :style="{ gridTemplateColumns: `220px repeat(${normalized.columns.length}, minmax(0, 1fr))` }">
+                <div class="tgx-matrix-corner">Angles × Visual Directions</div>
+                <div v-for="column in normalized.columns" :key="column" class="tgx-matrix-colhead">{{ column }}</div>
+
+                <template v-for="row in normalized.rows" :key="row">
+                    <div class="tgx-matrix-rowhead">{{ row }}</div>
+                    <div
+                        v-for="column in normalized.columns"
+                        :key="`${row}-${column}`"
+                        class="tgx-matrix-cell"
+                        :class="{ 'tgx-matrix-cell--empty': !cellByCoordinates(row, column) }"
+                    >
+                        <template v-if="cellByCoordinates(row, column)">
+                            <div class="tgx-matrix-cell__stage">{{ cellByCoordinates(row, column)?.funnelStage }}</div>
+                            <div class="tgx-matrix-cell__idea">{{ cellByCoordinates(row, column)?.specificAdIdea }}</div>
+                            <div class="tgx-matrix-cell__sub">
+                                <span>Контр</span>
+                                <p>{{ cellByCoordinates(row, column)?.counterHypothesis }}</p>
+                            </div>
+                            <div class="tgx-matrix-cell__sub">
+                                <span>Outcome</span>
+                                <p>{{ cellByCoordinates(row, column)?.expectedOutcome }}</p>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="tgx-matrix-empty">Эта ячейка ещё не сформирована AI</div>
+                        </template>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <div class="tgx-matrix-mobile">
+            <div class="tgx-filter-group">
+                <button class="tgx-filter" :class="{ 'is-active': activeRow === 'all' }" @click="activeRow = 'all'">Все углы</button>
+                <button v-for="row in normalized.rows" :key="row" class="tgx-filter" :class="{ 'is-active': activeRow === row }" @click="activeRow = row">{{ row }}</button>
+            </div>
+            <div class="tgx-filter-group">
+                <button class="tgx-filter" :class="{ 'is-active': activeColumn === 'all' }" @click="activeColumn = 'all'">Все визуалы</button>
+                <button v-for="column in normalized.columns" :key="column" class="tgx-filter" :class="{ 'is-active': activeColumn === column }" @click="activeColumn = column">{{ column }}</button>
+            </div>
+            <div class="tgx-filter-group">
+                <button class="tgx-filter" :class="{ 'is-active': activeStage === 'all' }" @click="activeStage = 'all'">Все этапы</button>
+                <button v-for="stage in stageOptions" v-show="stage !== 'all'" :key="stage" class="tgx-filter" :class="{ 'is-active': activeStage === stage }" @click="activeStage = stage">{{ stage }}</button>
+            </div>
+
+            <div class="tgx-mobile-list">
+                <article v-for="cell in filteredCells" :key="cell.id" class="tgx-mobile-card">
+                    <div class="tgx-mobile-card__meta">
+                        <span>{{ cell.row }}</span>
+                        <span>{{ cell.column }}</span>
+                        <strong>{{ cell.funnelStage }}</strong>
+                    </div>
+                    <h4>{{ cell.specificAdIdea }}</h4>
+                    <p><strong>Контр-гипотеза:</strong> {{ cell.counterHypothesis }}</p>
+                    <p><strong>Ожидаемый outcome:</strong> {{ cell.expectedOutcome }}</p>
+                </article>
+            </div>
+        </div>
+
+        <div v-if="!normalized.cells.length" class="tgx-empty">
+            AI не вернул матрицу гипотез. Блок будет заполнен после следующего стратегического прогона.
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: start;
+    margin-bottom: 18px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-matrix-badge {
+    min-width: 96px;
+    padding: 10px 14px;
+    border-radius: 999px;
+    text-align: center;
+    background: rgba(45, 123, 255, 0.1);
+    color: #2d7bff;
+    font-weight: 800;
+}
+
+.tgx-matrix-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.tgx-matrix-corner,
+.tgx-matrix-colhead,
+.tgx-matrix-rowhead {
+    border-radius: 18px;
+    padding: 16px 18px;
+    background: #f2f6ff;
+    border: 1px solid rgba(45, 123, 255, 0.1);
+}
+
+.tgx-matrix-corner,
+.tgx-matrix-colhead {
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #7389b2;
+}
+
+.tgx-matrix-rowhead {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: 800;
+    color: #14264c;
+}
+
+.tgx-matrix-cell {
+    min-height: 240px;
+    border-radius: 22px;
+    padding: 16px;
+    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.99));
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    box-shadow: 0 12px 28px rgba(45, 123, 255, 0.07);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.tgx-matrix-cell:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 18px 38px rgba(45, 123, 255, 0.12);
+}
+
+.tgx-matrix-cell--empty {
+    background: rgba(244, 247, 253, 0.86);
+}
+
+.tgx-matrix-cell__stage {
+    display: inline-flex;
+    align-self: flex-start;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.1);
+    color: #7c3aed;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+.tgx-matrix-cell__idea {
+    font-size: 18px;
+    line-height: 1.25;
+    font-weight: 800;
+    color: #12254b;
+}
+
+.tgx-matrix-cell__sub span {
+    display: block;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7d90b5;
+    font-weight: 800;
+    margin-bottom: 6px;
+}
+
+.tgx-matrix-cell__sub p {
+    margin: 0;
+    color: #5a6e96;
+    line-height: 1.6;
+    font-size: 13px;
+}
+
+.tgx-matrix-empty {
+    margin: auto 0;
+    color: #7a8eaf;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.tgx-matrix-mobile {
+    display: none;
+}
+
+.tgx-filter-group {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    margin-bottom: 12px;
+}
+
+.tgx-filter {
+    flex: 0 0 auto;
+    min-height: 38px;
+    padding: 0 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.14);
+    background: #fff;
+    color: #4f648e;
+    font-weight: 700;
+}
+
+.tgx-filter.is-active {
+    background: linear-gradient(135deg, #2d7bff, #6d56ff);
+    color: #fff;
+}
+
+.tgx-mobile-list {
+    display: grid;
+    gap: 12px;
+}
+
+.tgx-mobile-card {
+    border-radius: 22px;
+    padding: 18px;
+    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.99));
+    border: 1px solid rgba(45, 123, 255, 0.12);
+}
+
+.tgx-mobile-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    color: #7087b2;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+.tgx-mobile-card h4 {
+    margin: 14px 0 10px;
+    font-size: 18px;
+    line-height: 1.25;
+    color: #14264c;
+}
+
+.tgx-mobile-card p {
+    margin: 0 0 8px;
+    color: #586d97;
+    line-height: 1.6;
+}
+
+.tgx-empty {
+    border-radius: 20px;
+    padding: 18px;
+    background: rgba(45, 123, 255, 0.06);
+    color: #60749e;
+}
+
+@media (max-width: 1100px) {
+    .tgx-matrix-desktop {
+        display: none;
+    }
+
+    .tgx-matrix-mobile {
+        display: block;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/LandingPageAuditCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/LandingPageAuditCard.vue
new file mode 100644
index 0000000..b7ad4ea
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/LandingPageAuditCard.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { LandingPageAudit } from '@/types/campaign.types';
+import { getLandingScoreTone, normalizeLandingAudit } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    audit: LandingPageAudit | null | undefined;
+}>();
+
+const model = computed(() => normalizeLandingAudit(props.audit));
+const tone = computed(() => getLandingScoreTone(model.value.score));
+const circumference = 2 * Math.PI * 52;
+const dashOffset = computed(() => circumference - (Math.max(0, Math.min(100, model.value.score)) / 100) * circumference);
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__eyebrow">Landing Page Audit</div>
+        <div class="tgx-card__head">
+            <h3 class="tgx-card__title">Матч лендинга и таргетинга</h3>
+            <div class="tgx-tone" :class="`tgx-tone--${tone.tone}`">{{ tone.label }}</div>
+        </div>
+
+        <div class="tgx-audit-grid">
+            <div class="tgx-score-panel">
+                <svg viewBox="0 0 140 140" class="tgx-score-ring">
+                    <defs>
+                        <linearGradient id="landingAuditGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stop-color="#2D7BFF" />
+                            <stop offset="100%" stop-color="#7C3AED" />
+                        </linearGradient>
+                    </defs>
+                    <circle cx="70" cy="70" r="52" class="tgx-score-ring__bg"></circle>
+                    <circle cx="70" cy="70" r="52" class="tgx-score-ring__fg" :stroke-dasharray="circumference" :stroke-dashoffset="dashOffset"></circle>
+                </svg>
+                <div class="tgx-score-panel__number">{{ model.score }}</div>
+                <div class="tgx-score-panel__label">LP Match Score</div>
+            </div>
+
+            <div class="tgx-audit-copy">
+                <p class="tgx-audit-copy__summary">{{ model.executiveSummary }}</p>
+
+                <div class="tgx-audit-lists">
+                    <div class="tgx-list-card tgx-list-card--danger">
+                        <div class="tgx-list-card__title">Что исправить срочно</div>
+                        <ul v-if="model.criticalFixes.length" class="tgx-list-card__list">
+                            <li v-for="item in model.criticalFixes" :key="item">{{ item }}</li>
+                        </ul>
+                        <p v-else class="tgx-list-card__empty">Критичных блокеров AI не увидел.</p>
+                    </div>
+
+                    <div class="tgx-list-card tgx-list-card--success">
+                        <div class="tgx-list-card__title">Trust Boosters</div>
+                        <ul v-if="model.trustBoosters.length" class="tgx-list-card__list">
+                            <li v-for="item in model.trustBoosters" :key="item">{{ item }}</li>
+                        </ul>
+                        <p v-else class="tgx-list-card__empty">Позитивные усилители доверия пока не выделены.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: center;
+    margin: 10px 0 20px;
+}
+
+.tgx-card__title {
+    margin: 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-tone {
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.tgx-tone--success { color: #0f9b68; background: rgba(16, 185, 129, 0.1); }
+.tgx-tone--warning { color: #ca7c0f; background: rgba(245, 158, 11, 0.12); }
+.tgx-tone--danger { color: #da4343; background: rgba(239, 68, 68, 0.1); }
+.tgx-tone--neutral { color: #6d82a7; background: rgba(45, 123, 255, 0.08); }
+
+.tgx-audit-grid {
+    display: grid;
+    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
+    gap: 20px;
+}
+
+.tgx-score-panel {
+    position: relative;
+    min-height: 320px;
+    border-radius: 24px;
+    background: linear-gradient(180deg, rgba(240, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    display: grid;
+    place-items: center;
+}
+
+.tgx-score-ring {
+    width: 180px;
+    height: 180px;
+    transform: rotate(-90deg);
+}
+
+.tgx-score-ring__bg {
+    fill: none;
+    stroke: rgba(45, 123, 255, 0.12);
+    stroke-width: 10;
+}
+
+.tgx-score-ring__fg {
+    fill: none;
+    stroke: url(#landingAuditGradient);
+    stroke: #2d7bff;
+    stroke-width: 10;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.6s ease;
+}
+
+.tgx-score-panel__number {
+    position: absolute;
+    top: calc(50% - 24px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 44px;
+    font-weight: 800;
+    color: #12254b;
+}
+
+.tgx-score-panel__label {
+    position: absolute;
+    top: calc(50% + 18px);
+    left: 50%;
+    transform: translateX(-50%);
+    color: #7287b1;
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+}
+
+.tgx-audit-copy__summary {
+    margin: 0 0 16px;
+    font-size: 16px;
+    line-height: 1.8;
+    color: #566a94;
+}
+
+.tgx-audit-lists {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.tgx-list-card {
+    border-radius: 22px;
+    padding: 18px;
+    border: 1px solid transparent;
+}
+
+.tgx-list-card--danger {
+    background: rgba(239, 68, 68, 0.06);
+    border-color: rgba(239, 68, 68, 0.12);
+}
+
+.tgx-list-card--success {
+    background: rgba(16, 185, 129, 0.07);
+    border-color: rgba(16, 185, 129, 0.12);
+}
+
+.tgx-list-card__title {
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #1a2d4f;
+    margin-bottom: 12px;
+}
+
+.tgx-list-card__list {
+    margin: 0;
+    padding-left: 18px;
+    display: grid;
+    gap: 9px;
+    color: #4b5f89;
+    line-height: 1.6;
+}
+
+.tgx-list-card__empty {
+    margin: 0;
+    color: #5b7096;
+}
+
+@media (max-width: 980px) {
+    .tgx-audit-grid,
+    .tgx-audit-lists {
+        grid-template-columns: 1fr;
+    }
+
+    .tgx-card__head {
+        flex-direction: column;
+        align-items: start;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/RiskAnalysisCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/RiskAnalysisCard.vue
new file mode 100644
index 0000000..fc90ba0
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/RiskAnalysisCard.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { RiskAnalysis } from '@/types/campaign.types';
+import { normalizeRisks } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    risks: RiskAnalysis | null | undefined;
+}>();
+
+const model = computed(() => normalizeRisks(props.risks));
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Risk Analysis</div>
+                <h3 class="tgx-card__title">Риски, модерация и fatigue-сигналы</h3>
+            </div>
+            <div class="tgx-risk-badge" :class="`tgx-risk-badge--${model.policyRisk.tone}`">{{ model.policyRisk.label }}</div>
+        </div>
+
+        <div class="tgx-risk-layout">
+            <div class="tgx-risk-panel">
+                <div class="tgx-risk-panel__title">Fatigue Warning</div>
+                <p>{{ model.fatigueWarning }}</p>
+            </div>
+
+            <div class="tgx-risk-panel">
+                <div class="tgx-risk-panel__title">Moderation Triggers</div>
+                <ul v-if="model.moderationTriggers.length" class="tgx-risk-panel__list">
+                    <li v-for="item in model.moderationTriggers" :key="item">{{ item }}</li>
+                </ul>
+                <p v-else>Список триггеров пока не сформирован.</p>
+            </div>
+        </div>
+
+        <div class="tgx-risk-footer">
+            <div class="tgx-risk-footer__title">На что обратить внимание до запуска</div>
+            <div class="tgx-risk-chips">
+                <span v-for="item in model.launchChecklist" :key="item" class="tgx-risk-chip">{{ item }}</span>
+                <span v-if="!model.launchChecklist.length" class="tgx-risk-chip">Чек-лист пока не сформирован</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: start;
+    margin-bottom: 18px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-risk-badge {
+    padding: 10px 14px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.tgx-risk-badge--success { color: #0f9b68; background: rgba(16, 185, 129, 0.1); }
+.tgx-risk-badge--warning { color: #ca7c0f; background: rgba(245, 158, 11, 0.12); }
+.tgx-risk-badge--danger { color: #da4343; background: rgba(239, 68, 68, 0.1); }
+.tgx-risk-badge--neutral { color: #6d82a7; background: rgba(45, 123, 255, 0.08); }
+
+.tgx-risk-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    gap: 16px;
+}
+
+.tgx-risk-panel {
+    border-radius: 22px;
+    padding: 20px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(255, 255, 255, 0.98));
+}
+
+.tgx-risk-panel__title,
+.tgx-risk-footer__title {
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7d90b5;
+    margin-bottom: 12px;
+}
+
+.tgx-risk-panel p,
+.tgx-risk-panel__list {
+    margin: 0;
+    color: #546991;
+    line-height: 1.7;
+}
+
+.tgx-risk-panel__list {
+    padding-left: 18px;
+    display: grid;
+    gap: 9px;
+}
+
+.tgx-risk-footer {
+    margin-top: 16px;
+    border-radius: 22px;
+    padding: 18px;
+    background: rgba(16, 31, 72, 0.96);
+}
+
+.tgx-risk-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.tgx-risk-chip {
+    min-height: 38px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 14px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.86);
+    font-size: 13px;
+    font-weight: 700;
+}
+
+@media (max-width: 900px) {
+    .tgx-risk-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .tgx-card__head {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/ScalingPlanCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/ScalingPlanCard.vue
new file mode 100644
index 0000000..99e907b
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/ScalingPlanCard.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { ScalingPlan } from '@/types/campaign.types';
+
+const props = defineProps<{
+    scalingPlan: ScalingPlan | null | undefined;
+}>();
+
+const toList = (value: string[] | string | null | undefined) => (Array.isArray(value) ? value.filter(Boolean) : value ? [value] : []);
+
+const sections = [
+    { key: 'horizontalScaling', title: 'Horizontal Scaling', accent: 'blue' },
+    { key: 'budgetScaling', title: 'Budget Scaling', accent: 'purple' },
+    { key: 'geoExpansion', title: 'Geo Expansion', accent: 'green' }
+] as const;
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__eyebrow">Scaling Plan</div>
+        <h3 class="tgx-card__title">Growth roadmap для масштабирования</h3>
+
+        <div class="tgx-roadmap">
+            <article v-for="section in sections" :key="section.key" class="tgx-roadmap-card" :class="`tgx-roadmap-card--${section.accent}`">
+                <div class="tgx-roadmap-card__title">{{ section.title }}</div>
+                <ul v-if="toList(scalingPlan?.[section.key]).length" class="tgx-roadmap-card__list">
+                    <li v-for="item in toList(scalingPlan?.[section.key])" :key="item">{{ item }}</li>
+                </ul>
+                <p v-else class="tgx-roadmap-card__empty">Этот плейбук ещё не заполнен AI.</p>
+            </article>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 18px;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-roadmap {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.tgx-roadmap-card {
+    position: relative;
+    overflow: hidden;
+    min-height: 220px;
+    border-radius: 24px;
+    padding: 20px;
+    border: 1px solid rgba(45, 123, 255, 0.1);
+    background: linear-gradient(180deg, rgba(244, 248, 255, 0.94), rgba(255, 255, 255, 0.98));
+}
+
+.tgx-roadmap-card::before {
+    content: '';
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 5px;
+}
+
+.tgx-roadmap-card--blue::before { background: linear-gradient(180deg, #2d7bff, #68a0ff); }
+.tgx-roadmap-card--purple::before { background: linear-gradient(180deg, #7c3aed, #9a78ff); }
+.tgx-roadmap-card--green::before { background: linear-gradient(180deg, #10b981, #5ad9a8); }
+
+.tgx-roadmap-card__title {
+    font-size: 18px;
+    font-weight: 800;
+    color: #132447;
+}
+
+.tgx-roadmap-card__list {
+    margin: 18px 0 0;
+    padding-left: 18px;
+    display: grid;
+    gap: 10px;
+    color: #556890;
+    line-height: 1.6;
+}
+
+.tgx-roadmap-card__empty {
+    margin: 18px 0 0;
+    color: #6e82aa;
+}
+
+@media (max-width: 940px) {
+    .tgx-roadmap {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/StrategicOverviewCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/StrategicOverviewCard.vue
new file mode 100644
index 0000000..7aa042e
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/StrategicOverviewCard.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { TargetingRecommendation } from '@/types/campaign.types';
+
+defineProps<{
+    recommendation: TargetingRecommendation | null;
+}>();
+
+const toList = (value: string[] | null | undefined) => (Array.isArray(value) ? value.filter(Boolean) : []);
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Strategic Overview</div>
+                <h3 class="tgx-card__title">Коротко о том, как AI предлагает вести кампанию</h3>
+            </div>
+        </div>
+
+        <div class="tgx-overview-grid">
+            <div class="tgx-overview-panel">
+                <div class="tgx-overview-panel__label">Recommended Type</div>
+                <div class="tgx-overview-panel__value">{{ recommendation?.recommendedTypeLabel || recommendation?.recommendedType || 'Тип формируется' }}</div>
+                <p class="tgx-overview-panel__text">{{ recommendation?.typeRationale || 'AI ещё формирует аргументацию по типу таргетинга.' }}</p>
+            </div>
+
+            <div class="tgx-overview-panel">
+                <div class="tgx-overview-panel__label">Campaign Objective</div>
+                <div class="tgx-overview-panel__value">{{ recommendation?.campaignObjectiveLabel || recommendation?.campaignObjective || 'Цель формируется' }}</div>
+                <p class="tgx-overview-panel__text">{{ recommendation?.campaignObjectiveRationale || 'AI ещё не вернул rationale по objective.' }}</p>
+            </div>
+        </div>
+
+        <div class="tgx-note-grid">
+            <div class="tgx-note tgx-note--success">
+                <div class="tgx-note__title">Quick Wins</div>
+                <ul v-if="toList(recommendation?.quickWins).length" class="tgx-note__list">
+                    <li v-for="item in toList(recommendation?.quickWins)" :key="item">{{ item }}</li>
+                </ul>
+                <p v-else class="tgx-note__empty">Данных пока нет, AI дополняет tactical wins.</p>
+            </div>
+
+            <div class="tgx-note tgx-note--warning">
+                <div class="tgx-note__title">Warnings</div>
+                <ul v-if="toList(recommendation?.warnings).length" class="tgx-note__list">
+                    <li v-for="item in toList(recommendation?.warnings)" :key="item">{{ item }}</li>
+                </ul>
+                <p v-else class="tgx-note__empty">Критичных предупреждений сейчас нет.</p>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-overview-grid,
+.tgx-note-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.tgx-overview-panel {
+    min-height: 188px;
+    border-radius: 22px;
+    padding: 20px;
+    background: linear-gradient(180deg, rgba(240, 245, 255, 0.9), rgba(255, 255, 255, 0.98));
+    border: 1px solid rgba(45, 123, 255, 0.1);
+}
+
+.tgx-overview-panel__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7d8fb2;
+    font-weight: 800;
+}
+
+.tgx-overview-panel__value {
+    margin-top: 16px;
+    font-size: 28px;
+    line-height: 1;
+    letter-spacing: -0.05em;
+    color: #102043;
+    font-weight: 800;
+}
+
+.tgx-overview-panel__text {
+    margin: 14px 0 0;
+    font-size: 15px;
+    line-height: 1.72;
+    color: #5c7099;
+}
+
+.tgx-note {
+    border-radius: 22px;
+    padding: 20px;
+    border: 1px solid transparent;
+}
+
+.tgx-note--success {
+    background: rgba(16, 185, 129, 0.08);
+    border-color: rgba(16, 185, 129, 0.16);
+}
+
+.tgx-note--warning {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.16);
+}
+
+.tgx-note__title {
+    font-size: 13px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #1b2b4d;
+    margin-bottom: 14px;
+}
+
+.tgx-note__list {
+    margin: 0;
+    padding-left: 18px;
+    display: grid;
+    gap: 10px;
+    color: #384b74;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.tgx-note__empty {
+    margin: 0;
+    color: #60759d;
+    font-size: 14px;
+}
+
+@media (max-width: 860px) {
+    .tgx-overview-grid,
+    .tgx-note-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/TargetingExecutiveHeader.vue b/src/views/pages/marketing/targetologist/components/growth-center/TargetingExecutiveHeader.vue
new file mode 100644
index 0000000..fdca89d
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/TargetingExecutiveHeader.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CampaignDetails } from '@/types/campaign.types';
+
+const props = defineProps<{
+    campaign: CampaignDetails | null;
+    chips: Array<{ label: string; value: string; tone: 'success' | 'warning' | 'danger' | 'neutral' }>;
+    statusLabel: string;
+    objectiveLabel: string;
+    budgetLabel: string;
+    platformLabels: string[];
+}>();
+
+const toneClass = (tone: string) => `tgx-chip--${tone}`;
+
+const platformText = computed(() => (props.platformLabels.length ? props.platformLabels.join(' · ') : 'Площадки уточняются'));
+</script>
+
+<template>
+    <section class="tgx-hero">
+        <div class="tgx-hero__glow tgx-hero__glow--blue"></div>
+        <div class="tgx-hero__glow tgx-hero__glow--mint"></div>
+
+        <div class="tgx-hero__top">
+            <div>
+                <div class="tgx-eyebrow">Targeting Growth Center</div>
+                <h2 class="tgx-title">{{ campaign?.name || 'Кампания таргетолога' }}</h2>
+                <div class="tgx-meta">
+                    <span class="tgx-badge tgx-badge--status">{{ statusLabel }}</span>
+                    <span class="tgx-badge">{{ objectiveLabel }}</span>
+                    <span class="tgx-badge">{{ budgetLabel }}</span>
+                    <span class="tgx-badge">{{ platformText }}</span>
+                </div>
+            </div>
+
+            <div class="tgx-summary">
+                <div class="tgx-summary__label">Growth Snapshot</div>
+                <div class="tgx-summary__value">{{ chips.length ? chips[0].value : '—' }}</div>
+                <div class="tgx-summary__hint">Ключевой health-пакет кампании перед масштабированием</div>
+            </div>
+        </div>
+
+        <div class="tgx-chip-row">
+            <div v-for="chip in chips" :key="chip.label" class="tgx-chip" :class="toneClass(chip.tone)">
+                <span class="tgx-chip__label">{{ chip.label }}</span>
+                <span class="tgx-chip__value">{{ chip.value }}</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-hero {
+    position: relative;
+    overflow: hidden;
+    border-radius: 28px;
+    border: 1px solid rgba(45, 123, 255, 0.16);
+    background:
+        linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98)),
+        radial-gradient(circle at top left, rgba(45, 123, 255, 0.08), transparent 38%);
+    box-shadow: 0 20px 60px rgba(45, 123, 255, 0.1);
+    padding: 28px;
+}
+
+.tgx-hero__glow {
+    position: absolute;
+    border-radius: 999px;
+    filter: blur(24px);
+    pointer-events: none;
+}
+
+.tgx-hero__glow--blue {
+    width: 220px;
+    height: 220px;
+    top: -70px;
+    right: 12%;
+    background: rgba(45, 123, 255, 0.12);
+}
+
+.tgx-hero__glow--mint {
+    width: 160px;
+    height: 160px;
+    bottom: -60px;
+    left: 18%;
+    background: rgba(16, 185, 129, 0.1);
+}
+
+.tgx-hero__top {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
+    gap: 20px;
+    align-items: start;
+}
+
+.tgx-eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: #6b85b8;
+    margin-bottom: 14px;
+}
+
+.tgx-title {
+    margin: 0;
+    font-family: 'Onest', sans-serif;
+    font-size: clamp(30px, 4vw, 44px);
+    line-height: 0.96;
+    letter-spacing: -0.05em;
+    color: #102043;
+}
+
+.tgx-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 16px;
+}
+
+.tgx-badge {
+    display: inline-flex;
+    align-items: center;
+    min-height: 36px;
+    padding: 0 14px;
+    border-radius: 999px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.86);
+    color: #4b628f;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.tgx-badge--status {
+    color: #2d7bff;
+}
+
+.tgx-summary {
+    position: relative;
+    z-index: 1;
+    border-radius: 24px;
+    padding: 22px 22px 20px;
+    background: linear-gradient(135deg, rgba(16, 31, 72, 0.96), rgba(70, 95, 214, 0.92));
+    color: #fff;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 44px rgba(33, 63, 168, 0.28);
+}
+
+.tgx-summary__label {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 10px;
+}
+
+.tgx-summary__value {
+    font-family: 'Onest', sans-serif;
+    font-size: 32px;
+    font-weight: 800;
+    letter-spacing: -0.05em;
+}
+
+.tgx-summary__hint {
+    margin-top: 8px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.72);
+}
+
+.tgx-chip-row {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 12px;
+    margin-top: 20px;
+}
+
+.tgx-chip {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 108px;
+    padding: 18px;
+    border-radius: 22px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow: 0 10px 26px rgba(45, 123, 255, 0.07);
+}
+
+.tgx-chip__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: #7a8db3;
+    font-weight: 800;
+}
+
+.tgx-chip__value {
+    font-size: 22px;
+    line-height: 1.08;
+    letter-spacing: -0.04em;
+    color: #102043;
+    font-weight: 800;
+}
+
+.tgx-chip--success { box-shadow: 0 12px 28px rgba(16, 185, 129, 0.12); }
+.tgx-chip--warning { box-shadow: 0 12px 28px rgba(245, 158, 11, 0.12); }
+.tgx-chip--danger { box-shadow: 0 12px 28px rgba(239, 68, 68, 0.11); }
+
+@media (max-width: 1024px) {
+    .tgx-hero__top,
+    .tgx-chip-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 640px) {
+    .tgx-hero {
+        padding: 20px;
+        border-radius: 24px;
+    }
+
+    .tgx-chip-row {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/TargetingGrowthCenter.vue b/src/views/pages/marketing/targetologist/components/growth-center/TargetingGrowthCenter.vue
new file mode 100644
index 0000000..ba54761
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/TargetingGrowthCenter.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CampaignDetails, TargetingRecommendation } from '@/types/campaign.types';
+import FunnelStrategyBoard from './FunnelStrategyBoard.vue';
+import HypothesisMatrixBoard from './HypothesisMatrixBoard.vue';
+import LandingPageAuditCard from './LandingPageAuditCard.vue';
+import AutomationRulesCard from './AutomationRulesCard.vue';
+import RiskAnalysisCard from './RiskAnalysisCard.vue';
+import ScalingPlanCard from './ScalingPlanCard.vue';
+import StrategicOverviewCard from './StrategicOverviewCard.vue';
+import TargetingExecutiveHeader from './TargetingExecutiveHeader.vue';
+import TechnicalHealthCard from './TechnicalHealthCard.vue';
+import { getGrowthSummaryChips, hasGrowthContent } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    campaign: CampaignDetails | null;
+    recommendation: TargetingRecommendation | null;
+    loading?: boolean;
+    objectiveLabel: (value: string | null | undefined) => string;
+    campaignStatusLabel: (value: string | null | undefined) => string;
+    platformLabel: (value: string | null | undefined) => string;
+    formatMoney: (value: number | null | undefined) => string;
+}>();
+
+const chips = computed(() => getGrowthSummaryChips(props.recommendation));
+const budgetLabel = computed(() => `Бюджет ${props.formatMoney(props.campaign?.totalBudgetKzt ?? props.campaign?.budgetKzt)}`);
+const platformLabels = computed(() => (props.campaign?.platforms ?? []).map((platform) => props.platformLabel(String(platform))));
+const showContent = computed(() => hasGrowthContent(props.recommendation));
+</script>
+
+<template>
+    <section class="tgx-shell">
+        <TargetingExecutiveHeader
+            :campaign="campaign"
+            :chips="chips"
+            :status-label="campaignStatusLabel(campaign?.status)"
+            :objective-label="objectiveLabel(campaign?.objective)"
+            :budget-label="budgetLabel"
+            :platform-labels="platformLabels"
+        />
+
+        <div v-if="loading" class="tgx-skeleton-grid">
+            <div class="tgx-skeleton tgx-skeleton--hero"></div>
+            <div class="tgx-skeleton tgx-skeleton--panel"></div>
+            <div class="tgx-skeleton tgx-skeleton--panel"></div>
+            <div class="tgx-skeleton tgx-skeleton--matrix"></div>
+        </div>
+
+        <div v-else-if="showContent" class="tgx-flow">
+            <StrategicOverviewCard :recommendation="recommendation" />
+            <TechnicalHealthCard :pixel-health="recommendation?.pixelHealth" />
+            <FunnelStrategyBoard :funnel-strategy="recommendation?.funnelStrategy" />
+            <HypothesisMatrixBoard :matrix="recommendation?.hypothesisMatrix" />
+
+            <div class="tgx-grid-2">
+                <LandingPageAuditCard :audit="recommendation?.lpAudit" />
+                <AutomationRulesCard :rules="recommendation?.suggestedRules" />
+            </div>
+
+            <div class="tgx-grid-2">
+                <ScalingPlanCard :scaling-plan="recommendation?.scalingPlan" />
+                <RiskAnalysisCard :risks="recommendation?.risks" />
+            </div>
+        </div>
+
+        <div v-else class="tgx-fallback">
+            <div class="tgx-fallback__eyebrow">Growth Center</div>
+            <h3 class="tgx-fallback__title">Стратегический блок пока недоступен</h3>
+            <p class="tgx-fallback__text">AI ещё не вернул расширенный модуль таргетолога. Мы сохранили кампанию и текущие данные, а growth-слой подтянется автоматически после следующего прогона рекомендаций.</p>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-shell {
+    display: grid;
+    gap: 18px;
+    margin-bottom: 28px;
+}
+
+.tgx-flow {
+    display: grid;
+    gap: 18px;
+}
+
+.tgx-grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.tgx-skeleton-grid {
+    display: grid;
+    gap: 18px;
+}
+
+.tgx-skeleton {
+    border-radius: 26px;
+    background: linear-gradient(90deg, rgba(237, 243, 255, 0.9), rgba(249, 251, 255, 1), rgba(237, 243, 255, 0.9));
+    background-size: 200% 100%;
+    animation: shimmer 1.8s linear infinite;
+    border: 1px solid rgba(45, 123, 255, 0.1);
+}
+
+.tgx-skeleton--hero { height: 240px; }
+.tgx-skeleton--panel { height: 280px; }
+.tgx-skeleton--matrix { height: 520px; }
+
+.tgx-fallback {
+    border-radius: 26px;
+    padding: 26px;
+    border: 1px dashed rgba(45, 123, 255, 0.24);
+    background: rgba(255, 255, 255, 0.9);
+    color: #53678f;
+}
+
+.tgx-fallback__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-fallback__title {
+    margin: 10px 0 12px;
+    font-size: 26px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-fallback__text {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.8;
+}
+
+@keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+@media (max-width: 1024px) {
+    .tgx-grid-2 {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/TechnicalHealthCard.vue b/src/views/pages/marketing/targetologist/components/growth-center/TechnicalHealthCard.vue
new file mode 100644
index 0000000..02fc330
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/TechnicalHealthCard.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PixelHealth } from '@/types/campaign.types';
+import { getPixelHealthSummary } from './targetingGrowthAdapters';
+
+const props = defineProps<{
+    pixelHealth: PixelHealth | null | undefined;
+}>();
+
+const summary = computed(() => getPixelHealthSummary(props.pixelHealth));
+</script>
+
+<template>
+    <section class="tgx-card">
+        <div class="tgx-card__head">
+            <div>
+                <div class="tgx-card__eyebrow">Technical Health</div>
+                <h3 class="tgx-card__title">Технический health-check кампании</h3>
+            </div>
+
+            <div class="tgx-score" :class="`tgx-score--${summary.tone}`">
+                <span class="tgx-score__value">{{ summary.score }}</span>
+                <span class="tgx-score__label">{{ summary.label }}</span>
+            </div>
+        </div>
+
+        <div class="tgx-health-grid">
+            <div v-for="item in summary.indicators" :key="item.key" class="tgx-health-item" :class="`tgx-health-item--${item.tone}`">
+                <div class="tgx-health-item__top">
+                    <span class="tgx-health-item__title">{{ item.title }}</span>
+                    <span class="tgx-health-item__badge">{{ item.label }}</span>
+                </div>
+                <p class="tgx-health-item__note">{{ item.note }}</p>
+            </div>
+        </div>
+
+        <div class="tgx-checklist">
+            <div class="tgx-checklist__title">Setup Instructions</div>
+            <ul v-if="summary.setupInstructions.length" class="tgx-checklist__list">
+                <li v-for="item in summary.setupInstructions" :key="item">{{ item }}</li>
+            </ul>
+            <p v-else class="tgx-checklist__empty">AI не вернул отдельные инструкции. Технический стек выглядит базово подготовленным.</p>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.tgx-card {
+    border-radius: 26px;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 16px 44px rgba(45, 123, 255, 0.08);
+    padding: 24px;
+}
+
+.tgx-card__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    gap: 18px;
+    margin-bottom: 18px;
+}
+
+.tgx-card__eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: #7a8db3;
+}
+
+.tgx-card__title {
+    margin: 8px 0 0;
+    font-size: 24px;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+    color: #132447;
+}
+
+.tgx-score {
+    min-width: 148px;
+    padding: 16px 18px;
+    border-radius: 22px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    background: #f7faff;
+    border: 1px solid rgba(45, 123, 255, 0.12);
+}
+
+.tgx-score__value {
+    font-size: 32px;
+    font-weight: 800;
+    letter-spacing: -0.05em;
+}
+
+.tgx-score__label {
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.tgx-score--success { color: #0f9b68; }
+.tgx-score--warning { color: #c77d12; }
+.tgx-score--danger { color: #d94444; }
+.tgx-score--neutral { color: #6b7d9f; }
+
+.tgx-health-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.tgx-health-item {
+    min-height: 140px;
+    padding: 18px;
+    border-radius: 22px;
+    border: 1px solid rgba(45, 123, 255, 0.1);
+    background: linear-gradient(180deg, rgba(245, 248, 255, 0.94), rgba(255, 255, 255, 0.96));
+}
+
+.tgx-health-item--success { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.06); }
+.tgx-health-item--warning { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.06); }
+.tgx-health-item--danger { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.06); }
+
+.tgx-health-item__top {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    align-items: start;
+}
+
+.tgx-health-item__title {
+    font-size: 15px;
+    font-weight: 800;
+    color: #12254b;
+}
+
+.tgx-health-item__badge {
+    border-radius: 999px;
+    padding: 6px 10px;
+    background: rgba(45, 123, 255, 0.08);
+    color: #2d7bff;
+    font-size: 11px;
+    font-weight: 800;
+}
+
+.tgx-health-item__note {
+    margin: 14px 0 0;
+    color: #5d7098;
+    line-height: 1.65;
+    font-size: 14px;
+}
+
+.tgx-checklist {
+    margin-top: 16px;
+    border-radius: 22px;
+    padding: 18px 20px;
+    background: rgba(15, 34, 70, 0.96);
+    color: #fff;
+}
+
+.tgx-checklist__title {
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: rgba(255, 255, 255, 0.64);
+}
+
+.tgx-checklist__list {
+    margin: 14px 0 0;
+    padding-left: 18px;
+    display: grid;
+    gap: 8px;
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.tgx-checklist__empty {
+    margin: 12px 0 0;
+    color: rgba(255, 255, 255, 0.74);
+}
+
+@media (max-width: 920px) {
+    .tgx-card__head,
+    .tgx-health-grid {
+        grid-template-columns: 1fr;
+        display: grid;
+    }
+
+    .tgx-score {
+        align-items: start;
+        min-width: 0;
+    }
+}
+</style>
diff --git a/src/views/pages/marketing/targetologist/components/growth-center/targetingGrowthAdapters.ts b/src/views/pages/marketing/targetologist/components/growth-center/targetingGrowthAdapters.ts
new file mode 100644
index 0000000..8d3e355
--- /dev/null
+++ b/src/views/pages/marketing/targetologist/components/growth-center/targetingGrowthAdapters.ts
@@ -0,0 +1,317 @@
+import type {
+    AutomationCondition,
+    AutomationRule,
+    FunnelStageStrategy,
+    FunnelStrategy,
+    HypothesisMatrix,
+    HypothesisMatrixCell,
+    LandingPageAudit,
+    PixelHealth,
+    PixelHealthModuleStatus,
+    RiskAnalysis,
+    TargetingRecommendation
+} from '@/types/campaign.types';
+
+export interface NormalizedMatrixCell {
+    id: string;
+    row: string;
+    column: string;
+    funnelStage: string;
+    specificAdIdea: string;
+    counterHypothesis: string;
+    expectedOutcome: string;
+}
+
+export interface NormalizedMatrix {
+    rows: string[];
+    columns: string[];
+    cells: NormalizedMatrixCell[];
+    filledCount: number;
+    totalCount: number;
+}
+
+export interface HealthIndicator {
+    key: 'fbp' | 'capi' | 'gtm';
+    title: string;
+    status: string;
+    tone: 'success' | 'warning' | 'danger' | 'neutral';
+    label: string;
+    note: string;
+}
+
+export interface PixelHealthSummary {
+    label: string;
+    tone: 'success' | 'warning' | 'danger' | 'neutral';
+    score: number;
+    indicators: HealthIndicator[];
+    setupInstructions: string[];
+}
+
+export interface FormattedAutomationRule {
+    id: string;
+    entityLevel: string;
+    joiner: 'AND' | 'OR';
+    conditions: string[];
+    action: string;
+    actionValue: string;
+}
+
+const STATUS_MAP: Record<string, { tone: HealthIndicator['tone']; label: string; weight: number }> = {
+    strong: { tone: 'success', label: 'Сильная настройка', weight: 100 },
+    healthy: { tone: 'success', label: 'Сильная настройка', weight: 100 },
+    active: { tone: 'success', label: 'Активно', weight: 100 },
+    ok: { tone: 'success', label: 'Работает', weight: 100 },
+    medium: { tone: 'warning', label: 'Нужно усилить', weight: 65 },
+    partial: { tone: 'warning', label: 'Частично настроено', weight: 65 },
+    warning: { tone: 'warning', label: 'Есть риск', weight: 65 },
+    poor: { tone: 'danger', label: 'Слабая настройка', weight: 25 },
+    weak: { tone: 'danger', label: 'Слабая настройка', weight: 25 },
+    missing: { tone: 'danger', label: 'Не настроено', weight: 10 },
+    failed: { tone: 'danger', label: 'Ошибка', weight: 10 }
+};
+
+const asArray = <T>(value: T[] | T | null | undefined): T[] => {
+    if (Array.isArray(value)) return value.filter(Boolean);
+    if (value == null) return [];
+    return [value];
+};
+
+const asText = (value: unknown, fallback = '—'): string => {
+    if (value == null) return fallback;
+    const text = String(value).trim();
+    return text || fallback;
+};
+
+const normalizeHealthModule = (value: PixelHealthModuleStatus | string | null | undefined) => {
+    if (!value) return { status: 'missing', note: 'Модуль не настроен' };
+    if (typeof value === 'string') return { status: value, note: '' };
+    return {
+        status: value.status ?? value.label ?? 'missing',
+        note: value.note ?? value.details ?? ''
+    };
+};
+
+const pickHealthPresentation = (status: string) => {
+    const normalized = status.toLowerCase();
+    return STATUS_MAP[normalized] ?? STATUS_MAP.warning;
+};
+
+export const getPixelHealthSummary = (pixelHealth: PixelHealth | null | undefined): PixelHealthSummary => {
+    const items: Array<{ key: HealthIndicator['key']; title: string; raw: PixelHealthModuleStatus | string | null | undefined }> = [
+        { key: 'fbp', title: 'FBP / Pixel browser', raw: pixelHealth?.fbp },
+        { key: 'capi', title: 'Conversions API', raw: pixelHealth?.capi },
+        { key: 'gtm', title: 'Google Tag Manager', raw: pixelHealth?.gtm }
+    ];
+
+    const indicators = items.map((item) => {
+        const normalized = normalizeHealthModule(item.raw);
+        const presentation = pickHealthPresentation(normalized.status);
+
+        return {
+            key: item.key,
+            title: item.title,
+            status: normalized.status,
+            tone: presentation.tone,
+            label: presentation.label,
+            note: normalized.note || 'Статус модуля пока без пояснения'
+        } satisfies HealthIndicator;
+    });
+
+    const averageScore =
+        pixelHealth?.healthScore ??
+        Math.round(indicators.reduce((sum, item) => sum + pickHealthPresentation(item.status).weight, 0) / Math.max(indicators.length, 1));
+
+    const tone: PixelHealthSummary['tone'] = averageScore >= 85 ? 'success' : averageScore >= 55 ? 'warning' : averageScore > 0 ? 'danger' : 'neutral';
+    const label = averageScore >= 85 ? 'Strong' : averageScore >= 55 ? 'Medium' : averageScore > 0 ? 'Poor' : 'Нет данных';
+
+    return {
+        label,
+        tone,
+        score: averageScore,
+        indicators,
+        setupInstructions: asArray(pixelHealth?.setupInstructions).map((item) => asText(item))
+    };
+};
+
+const normalizeStageBlock = (block: FunnelStageStrategy | string | null | undefined) => {
+    if (!block) {
+        return {
+            audience: 'Данные по этому этапу пока не собраны',
+            message: 'AI не вернул сообщение для этого шага',
+            creativeLogic: 'Логика креатива появится после генерации',
+            ctaStyle: 'CTA пока не определён'
+        };
+    }
+
+    if (typeof block === 'string') {
+        return {
+            audience: block,
+            message: block,
+            creativeLogic: 'Соберите креатив под этот сценарий',
+            ctaStyle: 'Мягкий CTA под этап воронки'
+        };
+    }
+
+    return {
+        audience: asText(block.whoSeesThis ?? block.audience, 'Сегмент пока не описан'),
+        message: asText(block.message ?? block.text, 'Сообщение ещё не сформировано'),
+        creativeLogic: asText(block.creativeLogic ?? block.notes, 'Логика креатива пока не указана'),
+        ctaStyle: asText(block.ctaStyle, 'CTA не задан')
+    };
+};
+
+export const normalizeFunnelStrategy = (funnelStrategy: FunnelStrategy | null | undefined) => ({
+    tof: normalizeStageBlock(funnelStrategy?.tof),
+    mof: normalizeStageBlock(funnelStrategy?.mof),
+    bof: normalizeStageBlock(funnelStrategy?.bof)
+});
+
+const rawMatrixCells = (matrix: HypothesisMatrix | HypothesisMatrixCell[] | null | undefined): HypothesisMatrixCell[] => {
+    if (!matrix) return [];
+    if (Array.isArray(matrix)) return matrix;
+    if (Array.isArray(matrix.cells)) return matrix.cells;
+    if (Array.isArray(matrix.ideas)) return matrix.ideas;
+    if (Array.isArray(matrix.matrix)) return matrix.matrix as HypothesisMatrixCell[];
+
+    if (matrix.matrix && typeof matrix.matrix === 'object') {
+        return Object.entries(matrix.matrix).flatMap(([rowKey, rowValue]) => {
+            if (Array.isArray(rowValue)) {
+                return rowValue.map((cell: any, index) => ({
+                    ...cell,
+                    row: cell?.row ?? cell?.angle ?? rowKey,
+                    column: cell?.column ?? cell?.visualDirection ?? `Визуал ${index + 1}`
+                }));
+            }
+
+            if (rowValue && typeof rowValue === 'object') {
+                return Object.entries(rowValue as Record<string, any>).map(([columnKey, cell]) => ({
+                    ...cell,
+                    row: cell?.row ?? cell?.angle ?? rowKey,
+                    column: cell?.column ?? cell?.visualDirection ?? columnKey
+                }));
+            }
+
+            return [];
+        });
+    }
+
+    return [];
+};
+
+const uniq = (list: string[]) => Array.from(new Set(list.filter(Boolean)));
+
+export const normalizeHypothesisMatrix = (matrix: HypothesisMatrix | HypothesisMatrixCell[] | null | undefined): NormalizedMatrix => {
+    const rawCells = rawMatrixCells(matrix);
+    const rows = uniq(
+        [
+            ...asArray(!Array.isArray(matrix) && matrix?.rows ? matrix.rows : []),
+            ...rawCells.map((cell) => asText(cell.row ?? cell.angle, 'Угол'))
+        ].map((item) => asText(item))
+    ).slice(0, 4);
+
+    const columns = uniq(
+        [
+            ...asArray(!Array.isArray(matrix) && matrix?.columns ? matrix.columns : []),
+            ...rawCells.map((cell) => asText(cell.column ?? cell.visualDirection, 'Визуал'))
+        ].map((item) => asText(item))
+    ).slice(0, 4);
+
+    const fallbackRows = rows.length ? rows : ['Рациональный угол', 'Социальное доказательство', 'Оффер', 'Снятие риска'];
+    const fallbackColumns = columns.length ? columns : ['UGC', 'Статичный визуал', 'До / После', 'Экспертный кадр'];
+
+    const cells: NormalizedMatrixCell[] = rawCells.map((cell, index) => ({
+        id: String(cell.id ?? `${cell.row ?? cell.angle ?? 'row'}-${cell.column ?? cell.visualDirection ?? 'col'}-${index}`),
+        row: asText(cell.row ?? cell.angle, fallbackRows[index % fallbackRows.length]),
+        column: asText(cell.column ?? cell.visualDirection, fallbackColumns[index % fallbackColumns.length]),
+        funnelStage: asText(cell.funnelStage, 'TOF'),
+        specificAdIdea: asText(cell.specificAdIdea, 'Гипотеза пока без описания'),
+        counterHypothesis: asText(cell.counterHypothesis, 'Контр-гипотеза не указана'),
+        expectedOutcome: asText(cell.expectedOutcome, 'Ожидаемый результат не указан')
+    }));
+
+    return {
+        rows: fallbackRows,
+        columns: fallbackColumns,
+        cells,
+        filledCount: cells.length,
+        totalCount: fallbackRows.length * fallbackColumns.length
+    };
+};
+
+const formatCondition = (condition: AutomationCondition | string, index: number) => {
+    if (typeof condition === 'string') return condition;
+    const metric = asText(condition.metric ?? condition.label, `Условие ${index + 1}`);
+    const operator = asText(condition.operator, '');
+    const value = asText(condition.value, '');
+    return [metric, operator, value].filter(Boolean).join(' ').trim();
+};
+
+export const formatAutomationRule = (rule: AutomationRule | null | undefined, index = 0): FormattedAutomationRule => {
+    const conditions = asArray(rule?.conditions).map((condition, conditionIndex) => formatCondition(condition as AutomationCondition | string, conditionIndex));
+
+    return {
+        id: asText(rule?.id ?? rule?.ruleId, `R-${index + 1}`),
+        entityLevel: asText(rule?.entityLevel ?? rule?.level, 'Ad Set'),
+        joiner: String(rule?.conditionLogic ?? 'AND').toUpperCase() === 'OR' ? 'OR' : 'AND',
+        conditions: conditions.length ? conditions : ['Условие будет сформировано после анализа'],
+        action: asText(rule?.action, 'Изменить ставку'),
+        actionValue: asText(rule?.actionValue ?? rule?.value, 'Авто')
+    };
+};
+
+export const getPolicyRiskVariant = (level: string | null | undefined) => {
+    const normalized = String(level ?? '').toLowerCase();
+    if (['high', 'danger', 'critical'].includes(normalized)) return { tone: 'danger', label: 'Высокий риск' as const };
+    if (['medium', 'warning', 'moderate'].includes(normalized)) return { tone: 'warning', label: 'Средний риск' as const };
+    if (['low', 'safe', 'minimal'].includes(normalized)) return { tone: 'success', label: 'Низкий риск' as const };
+    return { tone: 'neutral', label: 'Нет оценки' as const };
+};
+
+export const getLandingScoreTone = (score: number | null | undefined) => {
+    const value = score ?? 0;
+    if (value >= 80) return { tone: 'success' as const, label: 'Сильный матч' };
+    if (value >= 55) return { tone: 'warning' as const, label: 'Нужно усилить' };
+    if (value > 0) return { tone: 'danger' as const, label: 'Слабое совпадение' };
+    return { tone: 'neutral' as const, label: 'Нет данных' };
+};
+
+export const normalizeLandingAudit = (audit: LandingPageAudit | null | undefined) => ({
+    score: audit?.matchScore ?? 0,
+    executiveSummary: asText(audit?.executiveSummary, 'AI пока не сформировал executive summary по лендингу.'),
+    criticalFixes: asArray(audit?.criticalFixes).map((item) => asText(item)),
+    trustBoosters: asArray(audit?.trustBoosters).map((item) => asText(item))
+});
+
+export const normalizeRisks = (risks: RiskAnalysis | null | undefined) => ({
+    fatigueWarning: asText(risks?.fatigueWarning, 'Признаки выгорания креатива пока не выявлены'),
+    policyRisk: getPolicyRiskVariant(risks?.policyRiskLevel),
+    moderationTriggers: asArray(risks?.moderationTriggers).map((item) => asText(item)),
+    launchChecklist: asArray(risks?.launchChecklist).map((item) => asText(item))
+});
+
+export const getGrowthSummaryChips = (recommendation: TargetingRecommendation | null | undefined) => {
+    const landing = normalizeLandingAudit(recommendation?.lpAudit);
+    const rules = asArray(recommendation?.suggestedRules);
+    const matrix = normalizeHypothesisMatrix(recommendation?.hypothesisMatrix);
+    const pixel = getPixelHealthSummary(recommendation?.pixelHealth);
+    const policy = getPolicyRiskVariant(recommendation?.risks?.policyRiskLevel);
+
+    return [
+        { label: 'LP Match Score', value: `${landing.score || 0}/100`, tone: getLandingScoreTone(landing.score).tone },
+        { label: 'Policy Risk', value: policy.label, tone: policy.tone },
+        { label: 'Rules Count', value: String(rules.length), tone: rules.length ? 'success' : 'neutral' },
+        { label: 'Matrix', value: `${matrix.filledCount}/${matrix.totalCount}`, tone: matrix.filledCount >= Math.min(8, matrix.totalCount) ? 'success' : 'warning' },
+        { label: 'Pixel Health', value: pixel.label, tone: pixel.tone }
+    ] as const;
+};
+
+export const hasGrowthContent = (recommendation: TargetingRecommendation | null | undefined) =>
+    Boolean(
+        recommendation?.pixelHealth ||
+            recommendation?.funnelStrategy ||
+            recommendation?.hypothesisMatrix ||
+            recommendation?.lpAudit ||
+            recommendation?.suggestedRules?.length ||
+            recommendation?.scalingPlan ||
+            recommendation?.risks
+    );
diff --git a/update-analysis.js b/update-analysis.js
new file mode 100644
index 0000000..1174061
--- /dev/null
+++ b/update-analysis.js
@@ -0,0 +1,221 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetPath = path.join(__dirname, 'src/views/pages/marketing/MarketingAnalysisV3.vue');
+if (!fs.existsSync(targetPath)) {
+    console.error('File not found: MarketingAnalysisV3.vue');
+    process.exit(1);
+}
+
+let content = fs.readFileSync(targetPath, 'utf8');
+
+const newStyle = `<style scoped>
+/* ═══════════════════════════════════════════
+   PREMIUM 3D BASE - ANALYSIS V3
+   ═══════════════════════════════════════════ */
+.analysis-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 40px 24px 120px;
+}
+
+.dashboard-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+/* ═══════════════════════════════════════════
+   LOADING STATE - 3D SHIMMER & GLOW
+   ═══════════════════════════════════════════ */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 160px 0;
+  gap: 40px;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+  border-radius: 32px;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 20px 60px rgba(45, 123, 255, 0.05);
+}
+
+.loader-wrap {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader-circle {
+  position: absolute;
+  inset: 0;
+  border: 2px dashed rgba(45, 123, 255, 0.2);
+  border-radius: 50%;
+  animation: spin 10s linear infinite;
+}
+
+.loader-inner-circle {
+  position: absolute;
+  inset: -10px;
+  border: 3px solid transparent;
+  border-top-color: #2D7BFF;
+  border-bottom-color: #8B5CF6;
+  border-radius: 50%;
+  animation: spin 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  box-shadow: 0 0 20px rgba(45, 123, 255, 0.3);
+}
+
+.loader-logo {
+  font-size: 14px;
+  z-index: 2;
+  box-shadow: 0 8px 24px rgba(45, 123, 255, 0.5);
+  background: linear-gradient(135deg, #2D7BFF, #1a6bff);
+  color: #fff;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 900;
+  letter-spacing: 0.05em;
+}
+
+.loading-info {
+  text-align: center;
+}
+
+.loading-title {
+  font-size: 18px;
+  font-weight: 900;
+  color: #0F172A;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 2px 4px rgba(45,123,255,0.2));
+}
+
+.loading-sub {
+  font-size: 14px;
+  color: #64748B;
+  max-width: 340px;
+  margin: 0 auto 20px;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.loading-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.loading-dots .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(15, 23, 42, 0.1);
+  transition: all 0.3s;
+}
+
+.loading-dots .dot.active {
+  background: #2D7BFF;
+  transform: scale(1.5);
+  box-shadow: 0 0 12px rgba(45, 123, 255, 0.6);
+}
+
+/* ═══════════════════════════════════════════
+   ERROR STATE - PREMIUM RED
+   ═══════════════════════════════════════════ */
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120px 0;
+  gap: 24px;
+  text-align: center;
+  background: #fff;
+  border-radius: 32px;
+  border: 1px dashed rgba(239, 68, 68, 0.3);
+  box-shadow: 0 20px 40px rgba(239, 68, 68, 0.05);
+}
+
+.error-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02));
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #EF4444;
+  font-size: 32px;
+  box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 8px 24px rgba(239, 68, 68, 0.15);
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 900;
+  color: #0F172A;
+  letter-spacing: -0.02em;
+}
+
+.error-desc {
+  font-size: 15px;
+  color: #64748B;
+  max-width: 420px;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.kai-btn-secondary {
+  margin-top: 16px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  color: #334155;
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
+}
+
+.kai-btn-secondary:hover {
+  background: #0F172A;
+  border-color: transparent;
+  color: #fff;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
+}
+
+@keyframes spin { 
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); } 
+}
+</style>`;
+
+const startIndex = content.indexOf('<style scoped>');
+const endIndex = content.indexOf('</style>') + '</style>'.length;
+
+if (startIndex !== -1 && endIndex !== -1) {
+    const updatedContent = content.substring(0, startIndex) + newStyle + content.substring(endIndex);
+    fs.writeFileSync(targetPath, updatedContent);
+    console.log('MarketingAnalysisV3.vue CSS updated successfully!');
+} else {
+    // If there's no <style scoped>, append it
+    fs.writeFileSync(targetPath, content + '\n' + newStyle);
+    console.log('MarketingAnalysisV3.vue CSS appended successfully!');
+}
diff --git a/update-lists.js b/update-lists.js
new file mode 100644
index 0000000..995afd3
--- /dev/null
+++ b/update-lists.js
@@ -0,0 +1,155 @@
+const fs = require('fs');
+const path = require('path');
+
+const analysisList = path.join(__dirname, 'src/views/pages/marketing/MarketingAnalysisV3List.vue');
+const strategyList = path.join(__dirname, 'src/views/pages/marketing/MarketingStrategyV3List.vue');
+
+const newStyleList = `<style scoped>
+/* ═══════════════════════════════════════════
+   PREMIUM 3D BASE - LIST PAGES
+   ═══════════════════════════════════════════ */
+.list-page {
+    min-height: 100vh;
+    padding: 0;
+    font-family: 'Onest', sans-serif;
+    background: transparent;
+}
+
+.list-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 40px 24px 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+/* ═══════════════════════════════════════════
+   3D HEADER
+   ═══════════════════════════════════════════ */
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 24px;
+}
+.header-main { display: flex; flex-direction: column; }
+
+.brand-tag {
+    display: inline-block;
+    padding: 6px 14px;
+    border-radius: 100px;
+    background: linear-gradient(135deg, rgba(45, 123, 255, 0.1), rgba(45, 123, 255, 0.02));
+    border: 1px solid rgba(45, 123, 255, 0.15);
+    color: #2D7BFF;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.05);
+    align-self: flex-start;
+}
+
+.page-title {
+    font-size: 36px;
+    font-weight: 900;
+    color: #0F172A;
+    margin: 0 0 8px 0;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+}
+
+.page-subtitle {
+    font-size: 16px;
+    color: #64748B;
+    max-width: 600px;
+    margin: 0;
+}
+
+/* Actions */
+.header-actions { display: flex; gap: 16px; }
+
+/* ═══════════════════════════════════════════
+   3D DATA TABLE & CARDS
+   ═══════════════════════════════════════════ */
+.table-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(15, 23, 42, 0.05);
+    border-radius: 24px;
+    padding: 16px 24px;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03), inset 0 2px 4px rgba(255,255,255,0.8);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.table-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(45, 123, 255, 0.08);
+}
+
+/* Empty State */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 80px 24px;
+    text-align: center;
+    background: #fff;
+    border-radius: 24px;
+    border: 2px dashed rgba(45, 123, 255, 0.2);
+    box-shadow: 0 10px 40px rgba(15,23,42,0.02);
+}
+
+.empty-icon {
+    width: 64px; height: 64px; border-radius: 20px;
+    background: linear-gradient(135deg, #2D7BFF, #1E60FF);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 28px; color: #fff;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 8px 16px rgba(45,123,255,0.3);
+    margin-bottom: 24px;
+}
+.empty-title { font-size: 20px; font-weight: 900; color: #0F172A; margin: 0 0 8px 0; }
+.empty-desc { font-size: 14px; color: #64748B; max-width: 400px; line-height: 1.6; }
+
+/* Form Controls */
+.p-inputtext, .p-dropdown {
+    border-radius: 12px !important;
+    border: 1px solid rgba(15, 23, 42, 0.1) !important;
+    background: #fff !important;
+    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02) !important;
+    font-family: inherit !important;
+    transition: all 0.3s !important;
+}
+.p-inputtext:hover, .p-dropdown:hover {
+    border-color: #2D7BFF !important;
+    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.1) !important;
+}
+
+.p-button {
+    border-radius: 12px !important;
+    font-weight: 800 !important;
+    font-family: inherit !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
+}
+</style>`;
+
+[analysisList, strategyList].forEach(file => {
+    if (fs.existsSync(file)) {
+        let content = fs.readFileSync(file, 'utf8');
+        const startIndex = content.indexOf('<style scoped>');
+        const endIndex = content.indexOf('</style>') + '</style>'.length;
+        if (startIndex !== -1 && endIndex !== -1) {
+            content = content.substring(0, startIndex) + newStyleList + content.substring(endIndex);
+            fs.writeFileSync(file, content);
+            console.log(file, 'CSS updated successfully!');
+        } else {
+            fs.writeFileSync(file, content + '\n' + newStyleList);
+            console.log(file, 'CSS appended successfully!');
+        }
+    }
+});
diff --git a/update-prediction.js b/update-prediction.js
new file mode 100644
index 0000000..c60514b
--- /dev/null
+++ b/update-prediction.js
@@ -0,0 +1,251 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetPath = path.join(__dirname, 'src/views/pages/marketing/targetologist/components/CampaignPrediction.vue');
+let content = fs.readFileSync(targetPath, 'utf8');
+
+const newStyle = `<style scoped>
+/* ═══════════════════════════════════════════
+   PREMIUM 3D BASE
+   ═══════════════════════════════════════════ */
+.cp-section {
+    padding: 0;
+    font-family: 'Onest', sans-serif;
+}
+
+/* ═══════════════════════════════════════════
+   SKELETON & EMPTY STATE
+   ═══════════════════════════════════════════ */
+.cp-skeleton-page {
+    display: flex; flex-direction: column; gap: 20px;
+}
+.cp-skeleton-card {
+    background: #fff;
+    border: 1px solid rgba(45, 123, 255, 0.08);
+    border-radius: 20px;
+    padding: 24px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
+}
+.cp-skeleton-circle, .cp-skeleton-line, .cp-skeleton-label {
+    background: linear-gradient(90deg, #F8FAFC 25%, #F1F5F9 50%, #F8FAFC 75%);
+    background-size: 200% 100%;
+    animation: cp-shimmer 1.5s infinite linear;
+}
+.cp-skeleton-circle { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px; }
+.cp-skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 12px; }
+.cp-skeleton-label { width: 120px; height: 12px; border-radius: 6px; margin-bottom: 24px; }
+.w-60 { width: 60%; } .w-40 { width: 40%; } .w-80 { width: 80%; } .w-70 { width: 70%; } .w-full { width: 100%; }
+
+@keyframes cp-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+.cp-empty-state {
+    display: flex; flex-direction: column; align-items: center; gap: 20px;
+    padding: 100px 24px;
+    background: #fff;
+    border-radius: 24px;
+    border: 1px dashed rgba(45, 123, 255, 0.2);
+    box-shadow: 0 10px 40px rgba(15,23,42,0.02);
+    text-align: center;
+}
+.cp-empty-state__orb {
+    position: relative; width: 100px; height: 100px;
+}
+.cp-empty-state__orb-ring {
+    position: absolute; inset: -10px; border-radius: 50%;
+    border: 2px dashed rgba(45, 123, 255, 0.15);
+    animation: cp-spin 20s linear infinite;
+}
+@keyframes cp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.cp-empty-state__icon {
+    width: 100%; height: 100%; border-radius: 20px;
+    background: linear-gradient(135deg, #2D7BFF, #1E60FF);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 40px; color: #fff;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 8px 16px rgba(45,123,255,0.3);
+}
+.cp-empty-state__title { font-size: 24px; font-weight: 900; color: #0F172A; margin: 0; }
+.cp-empty-state__desc { font-size: 15px; color: #64748B; max-width: 400px; line-height: 1.6; }
+
+.cp-btn-glow {
+    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
+    padding: 16px 32px; border-radius: 14px; border: none;
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff;
+    font-size: 15px; font-weight: 800; cursor: pointer;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 24px rgba(45, 123, 255, 0.3);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.cp-btn-glow:hover:not(:disabled) { transform: translateY(-3px); box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 16px 36px rgba(45, 123, 255, 0.4); }
+.cp-btn-glow:disabled { opacity: 0.5; filter: grayscale(1); }
+
+/* ═══════════════════════════════════════════
+   PREMIUM 3D CARDS
+   ═══════════════════════════════════════════ */
+.cp-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(15, 23, 42, 0.05);
+    border-radius: 24px;
+    padding: 28px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.02);
+}
+.cp-card:hover {
+    box-shadow: 0 16px 40px rgba(45, 123, 255, 0.06);
+    transform: translateY(-4px);
+    background: #FFFFFF;
+}
+
+.cp-card__header {
+    display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; z-index: 1;
+}
+.cp-card__label {
+    display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #64748B;
+}
+.cp-card__label-dot {
+    width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF;
+    box-shadow: 0 0 10px rgba(45, 123, 255, 0.6); animation: cp-dot-pulse 2s infinite;
+}
+.cp-card__label--success .cp-card__label-dot { background: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
+.cp-card__label--warning .cp-card__label-dot { background: #F59E0B; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
+
+.cp-card__badge {
+    font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 100px;
+    background: rgba(45, 123, 255, 0.08); color: #2D7BFF;
+}
+.cp-card__badge--success { background: rgba(16, 185, 129, 0.08); color: #10B981; }
+.cp-card__badge--warning { background: rgba(245, 158, 11, 0.08); color: #F59E0B; }
+.cp-card__count { font-size: 12px; font-weight: 700; color: #94A3B8; }
+
+/* ═══════════════════════════════════════════
+   SCORE GAUGE - TRUE 3D
+   ═══════════════════════════════════════════ */
+.cp-hero { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 20px; }
+@media (min-width: 768px) { .cp-hero { grid-template-columns: 420px 1fr; } }
+
+.cp-score-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
+.cp-gauge-container { position: relative; width: 200px; height: 200px; margin-bottom: 20px; }
+.cp-gauge { position: absolute; inset: -10px; width: 220px; height: 220px; }
+
+.cp-gauge-center {
+    position: absolute; inset: 15px; background: #fff; border-radius: 50%;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    box-shadow: 
+        inset 0 4px 8px rgba(0,0,0,0.05),
+        0 8px 16px rgba(45,123,255,0.1);
+}
+.cp-gauge-value {
+    font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
+    background: linear-gradient(135deg, #2D7BFF, #10B981);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 4px 8px rgba(45,123,255,0.2));
+}
+.cp-gauge-max { font-size: 15px; font-weight: 800; color: #94A3B8; margin-top: 4px; }
+
+.cp-score-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.cp-score-label { font-size: 18px; font-weight: 900; }
+.cp-score-confidence { font-size: 13.5px; color: #64748B; font-weight: 700; display: flex; align-items: center; gap: 6px; }
+
+/* ═══════════════════════════════════════════
+   PREMIUM METRICS GRID
+   ═══════════════════════════════════════════ */
+.cp-metrics-card { display: flex; flex-direction: column; }
+.cp-metrics-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
+@media (min-width: 1024px) { .cp-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
+
+.cp-metric-card {
+    background: #fff; border: 1px solid rgba(15, 23, 42, 0.04);
+    border-radius: 20px; padding: 24px; position: relative; overflow: hidden;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cp-metric-card:hover {
+    transform: translateY(-4px); box-shadow: 0 12px 24px rgba(45, 123, 255, 0.08);
+}
+.cp-metric-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.cp-metric-icon {
+    width: 44px; height: 44px; border-radius: 12px;
+    background: linear-gradient(135deg, rgba(45,123,255,0.1), rgba(45,123,255,0.02));
+    color: #2D7BFF; display: flex; align-items: center; justify-content: center; font-size: 18px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
+}
+.cp-metric-name { font-size: 12px; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; }
+.cp-metric-value { font-size: 18px; font-weight: 900; color: #0F172A; margin-bottom: 14px; }
+
+.cp-metric-bar { height: 8px; border-radius: 100px; background: rgba(15, 23, 42, 0.04); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
+.cp-metric-bar-fill {
+    height: 100%; border-radius: 100px;
+    background: linear-gradient(90deg, #2D7BFF, #10B981);
+    box-shadow: 0 2px 4px rgba(45, 123, 255, 0.3);
+}
+
+/* ═══════════════════════════════════════════
+   AI RECOMMENDATIONS BENTO
+   ═══════════════════════════════════════════ */
+.cp-rec-carousel { display: flex; flex-direction: column; gap: 16px; }
+.cp-rec-card {
+    padding: 24px; background: #fff; border: 1px solid rgba(45, 123, 255, 0.08); border-radius: 20px;
+    transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+}
+.cp-rec-card:hover { transform: translateX(6px); border-color: rgba(45, 123, 255, 0.2); box-shadow: 0 12px 32px rgba(45, 123, 255, 0.06); }
+.cp-rec-header { display: flex; gap: 10px; margin-bottom: 14px; }
+.cp-rec-title { font-size: 16px; font-weight: 900; color: #0F172A; margin-bottom: 8px; }
+.cp-rec-desc { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 16px; font-weight: 500; }
+.cp-rec-impact {
+    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #10B981;
+    padding: 8px 16px; background: rgba(16, 185, 129, 0.08); border-radius: 12px;
+}
+
+/* ═══════════════════════════════════════════
+   GRID & UTILS
+   ═══════════════════════════════════════════ */
+.cp-grid-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }
+@media (min-width: 768px) { .cp-grid-3 { grid-template-columns: repeat(3, 1fr); } }
+
+.cp-insight-card { display: flex; flex-direction: column; gap: 14px; }
+.cp-insight-card__icon {
+    width: 48px; height: 48px; border-radius: 14px;
+    display: flex; align-items: center; justify-content: center; font-size: 20px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
+}
+.cp-insight-text { font-size: 15px; color: #0F172A; font-weight: 700; }
+
+.cp-budget-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
+.cp-budget-block { padding: 20px; background: #f8fafc; border-radius: 16px; border: 1px solid rgba(15,23,42,0.04); }
+.cp-cpl-badge {
+    display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px;
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.02));
+    border: 1px solid rgba(16, 185, 129, 0.15); border-radius: 16px;
+}
+
+.cp-competitive-layout { display: flex; flex-direction: row; gap: 32px; align-items: center; }
+.cp-advantage-list { display: flex; flex-direction: column; gap: 12px; }
+.cp-advantage-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; }
+.cp-advantage-icon { color: #2D7BFF; font-size: 16px; margin-top: 2px; }
+.cp-market-saturation { padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.02); border: 1px solid rgba(45,123,255,0.08); }
+
+.cp-check-list, .cp-warning-list { display: flex; flex-direction: column; gap: 12px; list-style:none; padding:0; margin:0; }
+.cp-check-item, .cp-warning-item { display: flex; gap: 12px; font-size: 14px; font-weight: 600; color: #334155; line-height: 1.6; }
+.cp-check-icon, .cp-warning-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items:center; justify-content:center; }
+.cp-check-icon { background: rgba(16,185,129,0.1); color: #10B981; } .cp-warning-icon { background: rgba(245,158,11,0.1); color: #F59E0B; }
+
+.mb-4 { margin-bottom: 24px; }
+.cp-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
+</style>`;
+
+const startIndex = content.indexOf('<style scoped>');
+const endIndex = content.indexOf('</style>') + '</style>'.length;
+
+if (startIndex !== -1 && endIndex !== -1) {
+    const updatedContent = content.substring(0, startIndex) + newStyle + content.substring(endIndex);
+    fs.writeFileSync(targetPath, updatedContent);
+    console.log('CampaignPrediction CSS updated successfully!');
+} else {
+    console.log('Could not find style tag.');
+}
diff --git a/update-strategy.js b/update-strategy.js
new file mode 100644
index 0000000..adb53d3
--- /dev/null
+++ b/update-strategy.js
@@ -0,0 +1,607 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetPath = path.join(__dirname, 'src/views/pages/marketing/MarketingStrategyV3.vue');
+let content = fs.readFileSync(targetPath, 'utf8');
+
+const newStyle = `<style scoped>
+/* ═══════════════════════════════════════════
+   PREMIUM 3D BASE - STRATEGY
+   ═══════════════════════════════════════════ */
+.strategy-page {
+    min-height: 100vh;
+    padding: 0;
+    font-family: 'Onest', sans-serif;
+    background: transparent;
+}
+
+.strategy-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 40px 24px 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+/* ═══════════════════════════════════════════
+   3D HEADER
+   ═══════════════════════════════════════════ */
+.strategy-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    z-index: 10;
+}
+
+.brand-tag {
+    display: inline-block;
+    padding: 6px 14px;
+    border-radius: 100px;
+    background: linear-gradient(135deg, rgba(45, 123, 255, 0.1), rgba(45, 123, 255, 0.02));
+    border: 1px solid rgba(45, 123, 255, 0.15);
+    color: #2D7BFF;
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 12px rgba(45, 123, 255, 0.05);
+}
+
+.page-title {
+    font-size: 42px;
+    font-weight: 900;
+    color: #0F172A;
+    margin: 0 0 12px 0;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    background: linear-gradient(135deg, #0F172A, #334155);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.08));
+}
+
+.page-subtitle {
+    font-size: 16px;
+    color: #64748B;
+    max-width: 600px;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* ═══════════════════════════════════════════
+   SETUP STAGE (PREVIEW) & CARDS
+   ═══════════════════════════════════════════ */
+.setup-stage {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr;
+}
+@media(min-width: 1024px) {
+    .setup-stage { grid-template-columns: 340px 1fr; }
+}
+
+.recommendation-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(15, 23, 42, 0.04);
+    border-radius: 24px;
+    padding: 32px;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03), inset 0 2px 4px rgba(255,255,255,0.8);
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    position: relative;
+    overflow: hidden;
+}
+.recommendation-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(45, 123, 255, 0.08);
+}
+
+.model-icon-box {
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
+    background: linear-gradient(135deg, var(--accent, #2D7BFF), #1a6bff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 20px rgba(var(--accent, rgba(45,123,255,0.4)));
+    margin-bottom: 20px;
+}
+
+.rec-label {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.model-title {
+    font-size: 24px;
+    font-weight: 900;
+    color: #0F172A;
+    margin: 8px 0;
+    letter-spacing: -0.02em;
+}
+
+.model-desc {
+    font-size: 14px;
+    color: #64748B;
+    line-height: 1.6;
+}
+
+.scores-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: auto;
+}
+
+.score-item {
+    background: #FAFBFF;
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid rgba(45, 123, 255, 0.05);
+}
+
+.score-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 800;
+}
+
+.score-track {
+    height: 8px;
+    background: rgba(15, 23, 42, 0.05);
+    border-radius: 100px;
+    overflow: hidden;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.score-fill {
+    height: 100%;
+    border-radius: 100px;
+    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* ═══════════════════════════════════════════
+   HERO SETUP BOX (Upload)
+   ═══════════════════════════════════════════ */
+.hero-setup-box {
+    background: #fff;
+    border-radius: 32px;
+    border: 1px solid rgba(15, 23, 42, 0.04);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
+    padding: 48px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 24px;
+    background: linear-gradient(135deg, rgba(45, 123, 255, 0.1), rgba(139, 92, 246, 0.1));
+    color: #2D7BFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    margin-bottom: 24px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 12px 24px rgba(45,123,255,0.1);
+}
+
+.hero-title {
+    font-size: 36px;
+    font-weight: 900;
+    color: #0F172A;
+    margin-bottom: 12px;
+    letter-spacing: -0.03em;
+}
+
+.hero-subtitle {
+    font-size: 16px;
+    color: #64748B;
+    margin-bottom: 32px;
+    max-width: 500px;
+    line-height: 1.6;
+}
+
+.upload-zone {
+    border: 2px dashed rgba(45, 123, 255, 0.2);
+    border-radius: 24px;
+    background: rgba(45, 123, 255, 0.02);
+    padding: 40px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-bottom: 32px;
+}
+.upload-zone:hover, .upload-zone.is-dragging {
+    border-color: #2D7BFF;
+    background: rgba(45, 123, 255, 0.06);
+    box-shadow: 0 8px 24px rgba(45, 123, 255, 0.1);
+}
+
+.files-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: center;
+}
+
+.file-thumb {
+    width: 90px;
+    height: 90px;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.thumb-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumb-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.file-thumb:hover .thumb-overlay { opacity: 1; }
+
+.remove-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.2) !important;
+    border: none !important;
+    color: #fff !important;
+    backdrop-filter: blur(4px);
+}
+
+.add-more-box {
+    width: 90px;
+    height: 90px;
+    border-radius: 16px;
+    border: 2px dashed rgba(45, 123, 255, 0.3);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #2D7BFF;
+    font-size: 11px;
+    font-weight: 700;
+}
+
+.prime-generate-btn {
+    width: 100%;
+    padding: 24px;
+    border-radius: 20px;
+    border: none;
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+    color: #fff;
+    font-size: 18px;
+    font-weight: 900;
+    font-family: inherit;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 12px 32px rgba(45, 123, 255, 0.3), inset 0 2px 4px rgba(255,255,255,0.3);
+    transition: all 0.3s;
+}
+.prime-generate-btn:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(45, 123, 255, 0.4), inset 0 2px 4px rgba(255,255,255,0.4);
+}
+.btn-shine {
+    position: absolute;
+    top: 0; left: -100%; width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation: shine 3s infinite;
+}
+@keyframes shine { 0% { left: -100%; } 100% { left: 100%; } }
+
+/* ═══════════════════════════════════════════
+   POLLING (LOADING) SCREEN - DEEP IMMERSION
+   ═══════════════════════════════════════════ */
+.polling-stage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 0;
+}
+.polling-box {
+    text-align: center;
+    max-width: 500px;
+    width: 100%;
+}
+.polling-progress {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    margin: 0 auto 32px;
+}
+.progress-svg {
+    width: 160px;
+    height: 160px;
+    transform: rotate(-90deg);
+}
+.progress-svg circle {
+    fill: none;
+    stroke-width: 10;
+    stroke-linecap: round;
+}
+.progress-svg .track { stroke: rgba(45, 123, 255, 0.1); }
+.progress-svg .fill {
+    stroke: url(#blue-grad);
+    stroke-dasharray: 440;
+    transition: stroke-dashoffset 1s ease-out;
+    filter: drop-shadow(0 0 12px rgba(45,123,255,0.6));
+}
+.progress-info {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.percent-label {
+    font-size: 32px;
+    font-weight: 900;
+    background: linear-gradient(135deg, #2D7BFF, #8B5CF6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.status-title { font-size: 24px; font-weight: 900; color: #0F172A; margin-bottom: 12px; }
+.status-message { font-size: 15px; color: #64748B; font-weight: 500; }
+
+.progress-bar-container { margin-top: 40px; }
+.progress-bar-track { height: 6px; background: rgba(15,23,42,0.05); border-radius: 100px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #2D7BFF, #8B5CF6); transition: width 1s linear; }
+
+/* ═══════════════════════════════════════════
+   RESULTS & TIMELINE
+   ═══════════════════════════════════════════ */
+.results-hero {
+    background: #fff;
+    border-radius: 32px;
+    padding: 40px;
+    border: 1px solid rgba(15,23,42,0.04);
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.03);
+    margin-bottom: 32px;
+}
+
+.hero-main-info {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.model-large-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 24px;
+    background: linear-gradient(135deg, var(--accent, #2D7BFF), #1a6bff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 12px 24px rgba(var(--accent, rgba(45,123,255,0.4)));
+}
+
+.scope-tag {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.model-big-title {
+    font-size: 32px;
+    font-weight: 900;
+    color: #0F172A;
+    margin: 4px 0 0 0;
+    letter-spacing: -0.02em;
+}
+
+.hero-rationale {
+    background: #FAFBFF;
+    border-left: 4px solid #2D7BFF;
+    padding: 24px 32px;
+    border-radius: 0 24px 24px 0;
+    margin-bottom: 32px;
+}
+.rationale-header { font-size: 13px; font-weight: 800; color: #2D7BFF; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
+.rationale-text { font-size: 16px; color: #334155; line-height: 1.8; font-style: italic; margin: 0; }
+
+.platform-strip {
+    display: flex;
+    gap: 12px;
+}
+.p-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: #fff;
+    border: 1px solid rgba(15,23,42,0.08);
+    border-radius: 100px;
+    font-size: 13px;
+    font-weight: 800;
+    color: #0F172A;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+}
+
+/* SPRINTS */
+.sprints-section { margin-bottom: 40px; }
+.section-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
+.section-title-row i {
+    width: 48px; height: 48px; border-radius: 16px; background: rgba(45,123,255,0.08);
+    color: #2D7BFF; display: flex; align-items: center; justify-content: center; font-size: 20px;
+}
+.section-title-row h3 { font-size: 28px; font-weight: 900; color: #0F172A; margin: 0; }
+
+.sprints-list { display: flex; flex-direction: column; gap: 16px; }
+.sprint-item {
+    background: #fff; border-radius: 24px;
+    border: 1px solid rgba(15,23,42,0.04);
+    box-shadow: 0 8px 24px rgba(15,23,42,0.02);
+    overflow: hidden; transition: all 0.3s;
+}
+.sprint-item.is-active {
+    border-color: rgba(45,123,255,0.2);
+    box-shadow: 0 16px 40px rgba(45,123,255,0.06);
+}
+
+.sprint-summary {
+    display: flex; align-items: center; gap: 20px; padding: 24px 32px; cursor: pointer;
+}
+.week-num {
+    width: 56px; height: 56px; border-radius: 16px; background: #FAFBFF;
+    border: 1px solid rgba(45,123,255,0.1); color: #2D7BFF;
+    display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900;
+}
+.is-active .week-num {
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff;
+    box-shadow: 0 8px 20px rgba(45,123,255,0.3); border: none;
+}
+.week-title { font-size: 20px; font-weight: 800; color: #0F172A; margin: 0 0 8px 0; }
+.week-tags { display: flex; gap: 8px; }
+.week-tag { font-size: 11px; font-weight: 700; color: #64748B; background: #F1F5F9; padding: 4px 10px; border-radius: 100px; }
+.expand-icon { margin-left: auto; color: #94A3B8; transition: transform 0.3s; }
+.is-active .expand-icon { transform: rotate(180deg); color: #2D7BFF; }
+
+.sprint-calendar {
+    padding: 0 32px 32px; border-top: 1px solid rgba(15,23,42,0.04); margin-top: 10px;
+    display: flex; flex-direction: column; gap: 24px;
+}
+.day-track { display: flex; gap: 24px; align-items: stretch; margin-top: 24px; }
+.day-marker {
+    width: 64px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
+}
+.day-circle {
+    width: 48px; height: 48px; border-radius: 50%; background: #FAFBFF; border: 2px solid rgba(45,123,255,0.1);
+    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #2D7BFF;
+    margin-bottom: 8px; box-shadow: 0 4px 12px rgba(45,123,255,0.05);
+}
+.day-date { font-size: 12px; font-weight: 600; color: #64748B; white-space: nowrap; }
+
+/* POST CARD - THE TRUE MASTERPIECE */
+.post-cards-wrap { flex: 1; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); }
+.post-card {
+    background: #fff; border: 1px solid rgba(15,23,42,0.05); border-radius: 24px;
+    box-shadow: 0 12px 32px rgba(15,23,42,0.04); overflow: hidden; display: flex;
+    transition: all 0.3s;
+}
+.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(45,123,255,0.08); }
+
+.post-media-area {
+    width: 320px; flex-shrink: 0; background: #0F172A; position: relative;
+    border-right: 1px solid rgba(255,255,255,0.1);
+}
+
+.video-container { width: 100%; height: 100%; position: relative; }
+video { width: 100%; height: 100%; object-fit: cover; }
+.controls-overlay {
+    position: absolute; bottom: 16px; right: 16px;
+    width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
+    display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; border: none;
+    transition: all 0.2s;
+}
+.controls-overlay:hover { background: rgba(45,123,255,0.8); transform: scale(1.1); }
+.post-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; cursor: zoom-in; }
+.post-image:hover { transform: scale(1.05); }
+
+.generating-view {
+    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #0F172A, #1E293B); color: #fff;
+}
+.gen-spinner {
+    width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.1);
+    border-top-color: #2D7BFF; animation: spin 1s linear infinite; margin-bottom: 20px;
+    box-shadow: 0 0 20px rgba(45,123,255,0.5);
+}
+
+.post-content-area { padding: 32px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.post-header-badges { display: flex; justify-content: space-between; margin-bottom: 24px; }
+.badge-plat {
+    display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px;
+    font-size: 12px; font-weight: 800; text-transform: uppercase; color: #fff; background: #0F172A;
+    box-shadow: 0 4px 12px rgba(15,23,42,0.2);
+}
+.badge-format {
+    display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 100px;
+    font-size: 12px; font-weight: 800; background: #F1F5F9; color: #334155; border: 1px solid rgba(15,23,42,0.05);
+}
+
+.post-text-body {
+    font-size: 15px; color: #334155; line-height: 1.7; font-weight: 500;
+    margin-bottom: 24px; white-space: pre-line;
+}
+
+.post-hashtags { margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
+.hashtag {
+    font-size: 13px; font-weight: 700; color: #2D7BFF; padding: 6px 12px;
+    background: rgba(45,123,255,0.05); border-radius: 8px; border: 1px solid rgba(45,123,255,0.1);
+}
+
+.post-footer-actions {
+    margin-top: auto; display: flex; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(15,23,42,0.04);
+}
+.action-btn {
+    flex: 1; padding: 12px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.08); background: #fff;
+    color: #475569; font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.2s;
+    display: flex; justify-content: center; align-items: center; gap: 8px;
+}
+.action-btn:hover { background: #FAFBFF; color: #2D7BFF; border-color: rgba(45,123,255,0.3); }
+
+.action-btn.primary {
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff; border: none;
+    box-shadow: 0 4px 12px rgba(45,123,255,0.3);
+}
+.action-btn.primary:hover {
+    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45,123,255,0.4);
+}
+
+/* Modals */
+.media-modal-wrap { max-width: 900px; width: 100%; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
+.modal-video, .modal-image { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
+
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+</style>`;
+
+const startIndex = content.indexOf('<style scoped>');
+const endIndex = content.indexOf('</style>') + '</style>'.length;
+
+if (startIndex !== -1 && endIndex !== -1) {
+    const updatedContent = content.substring(0, startIndex) + newStyle + content.substring(endIndex);
+    fs.writeFileSync(targetPath, updatedContent);
+    console.log('MarketingStrategy CSS updated successfully!');
+} else {
+    console.log('Could not find style tag.');
+}
diff --git a/update-targetologist.js b/update-targetologist.js
new file mode 100644
index 0000000..7b19e6e
--- /dev/null
+++ b/update-targetologist.js
@@ -0,0 +1,265 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetPath = path.join(__dirname, 'src/views/pages/marketing/targetologist/TargetologistDashboard.vue');
+if (!fs.existsSync(targetPath)) process.exit(1);
+
+let content = fs.readFileSync(targetPath, 'utf8');
+
+const newStyle = `<style scoped>
+/* ══════════════════════════════════════════════
+   TARGETOLOGIST DASHBOARD — ULTRA PREMIUM 3D
+   Font: Onest throughout
+   ══════════════════════════════════════════════ */
+
+.td-page {
+    font-family: 'Onest', sans-serif;
+    background: transparent;
+    min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+    color: #0F172A;
+}
+
+/* ── Background ── */
+.td-bg-dots {
+    position: fixed; inset: 0;
+    background-image: radial-gradient(circle, rgba(45,123,255,0.03) 1px, transparent 1px);
+    background-size: 24px 24px;
+    pointer-events: none; z-index: 0;
+}
+.td-orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
+.td-orb--blue   { width: 600px; height: 600px; top: -200px; right: -120px; background: radial-gradient(circle, rgba(45,123,255,0.08) 0%, transparent 65%); }
+.td-orb--purple { width: 500px; height: 500px; bottom: -150px; left: -100px; background: radial-gradient(circle, rgba(139,92,246,0.05) 0%, transparent 65%); }
+.td-orb--indigo { width: 400px; height: 400px; top: 40%; left: 50%; background: radial-gradient(circle, rgba(99,102,241,0.04) 0%, transparent 65%); }
+
+/* ══ BANNER ══ */
+.td-banner {
+    position: relative; z-index: 1;
+    padding: 36px 44px 32px;
+}
+.td-banner__inner {
+    max-width: 1400px; margin: 0 auto;
+    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
+}
+.td-banner__left  { display: flex; align-items: flex-start; gap: 24px; }
+.td-banner__right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
+
+.td-back-btn {
+    width: 48px; height: 48px; border-radius: 12px;
+    background: rgba(255,255,255,0.9); border: 1px solid rgba(15,23,42,0.05);
+    color: #64748B; cursor: pointer; transition: all 0.3s;
+    box-shadow: 0 4px 12px rgba(15,23,42,0.02); display: flex; align-items: center; justify-content: center;
+}
+.td-back-btn:hover { background: #fff; color: #2D7BFF; transform: translateX(-4px); box-shadow: 0 8px 24px rgba(45,123,255,0.08); }
+
+.td-eyebrow {
+    display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: #2D7BFF; margin-bottom: 8px;
+}
+.td-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: #2D7BFF; box-shadow: 0 0 10px rgba(45,123,255,0.6); animation: td-blink 2s infinite; }
+@keyframes td-blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
+
+.td-title { font-size: 42px; font-weight: 900; color: #0F172A; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 8px 0; }
+.td-subtitle { font-size: 16px; color: #64748B; margin: 0; }
+
+.td-banner__budget-vis {
+    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
+    border: 1px solid rgba(15,23,42,0.05); border-radius: 20px;
+    padding: 16px 24px; min-width: 240px; box-shadow: 0 12px 32px rgba(15,23,42,0.03), inset 0 2px 4px rgba(255,255,255,0.8);
+}
+.td-banner__budget-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94A3B8; margin-bottom: 8px; }
+.td-banner__budget-bar { height: 6px; background: rgba(15,23,42,0.05); border-radius: 999px; overflow: hidden; margin-bottom: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
+.td-banner__budget-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2D7BFF, #10B981); transition: width 1s cubic-bezier(0.16,1,0.3,1); }
+.td-banner__budget-nums { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
+
+.td-launch-btn {
+    display: inline-flex; align-items: center; gap: 10px;
+    padding: 16px 32px; border-radius: 16px; border: none;
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff); color: #fff;
+    font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 24px rgba(45,123,255,0.3);
+}
+.td-launch-btn:hover { transform: translateY(-4px); box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 16px 36px rgba(45,123,255,0.4); }
+
+/* ══ INNER ══ */
+.td-inner { max-width: 1400px; margin: 0 auto; padding: 0 44px 100px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; }
+
+/* ══ KPI GRID ══ */
+.td-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+
+.td-kpi {
+    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
+    border: 1px solid rgba(15,23,42,0.05); border-radius: 24px; padding: 24px;
+    position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
+    box-shadow: 0 8px 20px rgba(15,23,42,0.02), inset 0 2px 4px rgba(255,255,255,0.8);
+}
+.td-kpi:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(45,123,255,0.06); background: #fff; }
+.td-kpi::before {
+    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.3s;
+}
+.td-kpi:hover::before { opacity: 1; }
+.td-kpi--blue::before   { background: linear-gradient(90deg, #2D7BFF, #60A5FA); }
+.td-kpi--green::before  { background: linear-gradient(90deg, #10B981, #34D399); }
+.td-kpi--orange::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
+.td-kpi--purple::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
+
+.td-kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.td-kpi__icon {
+    width: 48px; height: 48px; border-radius: 14px;
+    display: flex; align-items: center; justify-content: center; font-size: 20px;
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
+}
+.td-kpi--blue .td-kpi__icon   { background: rgba(45,123,255,0.1);  color: #2D7BFF; }
+.td-kpi--green .td-kpi__icon  { background: rgba(16,185,129,0.1);  color: #10B981; }
+.td-kpi--orange .td-kpi__icon { background: rgba(245,158,11,0.1);  color: #F59E0B; }
+.td-kpi--purple .td-kpi__icon { background: rgba(139,92,246,0.1);  color: #8B5CF6; }
+
+.td-kpi__spark { width: 64px; height: 24px; }
+.td-kpi__dots { display: flex; gap: 4px; flex-wrap: wrap; max-width: 64px; }
+.td-kpi__dot { width: 10px; height: 10px; border-radius: 3px; background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,0.4); }
+
+.td-kpi__bar-wrap { width: 72px; }
+.td-kpi__mini-bar { height: 8px; background: rgba(15,23,42,0.05); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
+.td-kpi__mini-bar-fill { height: 100%; border-radius: 999px; transition: width 1s ease; }
+
+.td-kpi__num { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #0F172A; margin-bottom: 8px; }
+.td-kpi__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94A3B8; }
+
+/* ══ SECTION HEADS ══ */
+.td-section-head { margin-bottom: 24px; }
+.td-section-label { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; color: #0F172A; letter-spacing: -0.01em; }
+.td-section-label i { color: #2D7BFF; }
+.td-section-hint { font-size: 14px; color: #64748B; margin-top: 4px; font-weight: 500; }
+.td-cmp-count { background: rgba(45,123,255,0.1); color: #2D7BFF; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; margin-left: 8px; }
+
+/* ══ INTEGRATIONS ══ */
+.td-integrations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+
+/* ══ CAMPAIGNS HEAD ══ */
+.td-cmp-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
+    padding: 24px 32px; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
+    border: 1px solid rgba(15,23,42,0.05); border-radius: 24px;
+    box-shadow: 0 12px 32px rgba(15,23,42,0.03), inset 0 2px 4px rgba(255,255,255,0.8);
+}
+
+.td-search { position: relative; }
+.td-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 14px; pointer-events: none; }
+.td-search__input {
+    padding: 14px 44px 14px 48px; border-radius: 16px;
+    background: #FAFBFF; border: 1px solid rgba(15,23,42,0.05);
+    color: #0F172A; font-size: 14px; font-family: 'Onest', sans-serif; font-weight: 600; outline: none; width: 320px; transition: all 0.3s;
+}
+.td-search__input:focus { border-color: #2D7BFF; background: #fff; width: 360px; box-shadow: 0 8px 24px rgba(45,123,255,0.08); }
+.td-search__input::placeholder { color: #94A3B8; font-weight: 500; }
+.td-search__clear {
+    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
+    width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(15,23,42,0.05); color: #64748B;
+    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
+}
+.td-search__clear:hover { background: rgba(239,68,68,0.1); color: #EF4444; }
+
+/* ══ SKELETON ══ */
+.td-skeleton-list { display: flex; flex-direction: column; gap: 16px; }
+.td-skeleton-item { display: flex; background: #fff; border: 1px solid rgba(15,23,42,0.05); border-radius: 24px; overflow: hidden; height: 140px; box-shadow: 0 8px 24px rgba(15,23,42,0.02); }
+.td-skeleton-stripe { width: 6px; flex-shrink: 0; background: rgba(15,23,42,0.03); }
+.td-skeleton-body { flex: 1; padding: 24px 32px; }
+.td-skeleton-line { height: 12px; border-radius: 6px; background: rgba(15,23,42,0.03); margin-bottom: 12px; }
+.td-skeleton-metrics { display: flex; gap: 32px; margin-top: 24px; }
+.td-skeleton-metric { width: 100px; height: 44px; border-radius: 12px; background: rgba(15,23,42,0.03); }
+.shimmer { position: relative; overflow: hidden; }
+.shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); animation: td-shimmer 1.5s infinite; }
+@keyframes td-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
+
+/* ══ EMPTY ══ */
+.td-empty {
+    text-align: center; padding: 100px 24px;
+    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
+    border: 2px dashed rgba(45,123,255,0.2); border-radius: 32px;
+    box-shadow: 0 12px 40px rgba(15,23,42,0.02);
+    display: flex; flex-direction: column; align-items: center; gap: 20px;
+}
+.td-empty__visual { position: relative; width: 100px; height: 100px; }
+.td-empty__ring { position: absolute; border-radius: 50%; border: 2px solid; }
+.td-empty__ring--1 { inset:-12px; border-color:rgba(45,123,255,0.1); animation:td-spin 12s linear infinite; }
+.td-empty__ring--2 { inset:-24px; border-color:rgba(45,123,255,0.05); animation:td-spin 20s linear infinite reverse; border-style:dashed; }
+@keyframes td-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
+.td-empty__icon {
+    width:100px; height:100px; border-radius:24px;
+    background: linear-gradient(135deg, #2D7BFF, #1a6bff);
+    display:flex; align-items:center; justify-content:center;
+    font-size:40px; color:#fff; box-shadow:inset 0 2px 4px rgba(255,255,255,0.4), 0 12px 24px rgba(45,123,255,0.2);
+}
+.td-empty__title { font-size:24px; font-weight:900; color:#0F172A; margin:0; }
+.td-empty__desc  { font-size:15px; color:#64748B; max-width:500px; line-height:1.6; margin:0; }
+
+/* ══ CAMPAIGN LIST ══ */
+.td-list { display: flex; flex-direction: column; gap: 16px; }
+
+.td-cmp {
+    display: flex; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
+    border: 1px solid rgba(15,23,42,0.05); border-radius: 24px; cursor: pointer; overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 8px 24px rgba(15,23,42,0.02), inset 0 2px 4px rgba(255,255,255,0.8);
+}
+.td-cmp:hover {
+    transform: translateY(-4px); box-shadow: 0 20px 48px rgba(45,123,255,0.08);
+    border-color: rgba(45,123,255,0.2); background: #fff;
+}
+.td-cmp__stripe { width: 6px; flex-shrink: 0; transition: width 0.3s; }
+.td-cmp:hover .td-cmp__stripe { width: 8px; }
+
+.td-cmp__body { flex: 1; padding: 24px 32px; display: flex; flex-direction: column; justify-content: center; }
+.td-cmp__top { margin-bottom: 24px; }
+.td-cmp__title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
+.td-cmp__name { font-size: 20px; font-weight: 800; color: #0F172A; margin: 0; flex: 1; }
+.td-cmp__status {
+    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid;
+    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
+}
+.td-cmp__status i { font-size: 10px; }
+
+.td-cmp__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #64748B; flex-wrap: wrap; font-weight: 600; }
+.td-plat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.td-plat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; }
+
+.td-cmp__metrics { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
+.td-metric { display: flex; flex-direction: column; gap: 6px; min-width: 100px; }
+.td-metric__label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94A3B8; }
+.td-metric__val { font-size: 20px; font-weight: 900; color: #0F172A; line-height: 1; }
+.td-metric__bar { height: 6px; background: rgba(15,23,42,0.05); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
+.td-metric__bar-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(0.16,1,0.3,1); }
+
+.td-cmp__actions { display: flex; gap: 12px; align-items: center; margin-left: auto; }
+.td-act {
+    width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.08); background: #fff; color: #64748B;
+    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; font-size: 16px;
+    box-shadow: 0 4px 12px rgba(15,23,42,0.02);
+}
+.td-act:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
+.td-act--pause:hover { background: rgba(245,158,11,0.1); color: #F59E0B; border-color: rgba(245,158,11,0.3); }
+.td-act--play:hover  { background: rgba(16,185,129,0.1);  color: #10B981; border-color: rgba(16,185,129,0.3); }
+.td-act--open:hover  { background: rgba(45,123,255,0.1);  color: #2D7BFF; border-color: rgba(45,123,255,0.3); }
+
+/* ══ RESPONSIVE ══ */
+@media (max-width: 1024px) { .td-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 768px) {
+    .td-banner { padding: 24px; }
+    .td-inner  { padding: 24px; }
+    .td-kpi-grid { grid-template-columns: 1fr; }
+    .td-integrations-grid { grid-template-columns: 1fr; }
+    .td-cmp__metrics { gap: 20px; }
+    .td-search__input { width: 100%; }
+}
+</style>`;
+
+const startIndex = content.indexOf('<style scoped>');
+const endIndex = content.indexOf('</style>') + '</style>'.length;
+
+if (startIndex !== -1 && endIndex !== -1) {
+    const updatedContent = content.substring(0, startIndex) + newStyle + content.substring(endIndex);
+    fs.writeFileSync(targetPath, updatedContent);
+    console.log('TargetologistDashboard CSS updated successfully!');
+} else {
+    fs.writeFileSync(targetPath, content + '\n' + newStyle);
+    console.log('Appended style to TargetologistDashboard');
+}