diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5270f7d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+*_files/
+*_(копия)*
+attribution-mockup*.html
+dashboard-mockup.html
+ibm-analytics-analysis.md
+*Analytics*
+*European*
+*ibm*
diff --git a/STATUS.md b/STATUS.md
index c2183bc..86c0d5f 100644
--- a/STATUS.md
+++ b/STATUS.md
@@ -1,29 +1,52 @@
-# Attribution Dashboard — STATUS.md (2026-06-20)
+# ROI24 Landing — STATUS.md (2026-06-21)
 
 ## Текущий статус
-- Файл: `attribution-mockup.html` (931 строк)
-- Сервер: `http://localhost:8765/attribution-mockup.html`
-- Гит: `master` — последний коммит `bed5688`
+- Файл: `index.html` (1700+ строк, ~76KB)
+- Сервер: `http://localhost:8765/index.html`
+- Гит: `master` — в процессе push
 
-## Что реализовано
-- 3 бизнес-типа: E-com, Услуги, Производство
-- 3 вкладки: CPA, Конверсия, LTV + блок «Доход по каналам»
-- 4 ECharts-графика + 2 таблицы
-- Данные: spend, revenue, cpa, conv, cpc, retention по каналам
-- KPI-карточки: CPA, Продажи, Расход, CPA/чек (в рублях)
-- Фин-блок: Общий доход, Расход, Прибыль, ROI
-- Бар-чарт: доход vs расход по каналам (метки: SEO, VK, Я.Директ, Ретаргет)
-- Кривые удержания: retCurve (исправлен конфликт с retention KPI)
+## Реализовано (14 секций)
+1. **Header** — sticky, glassmorphism blur, логотип, навигация, телефон, CTA
+2. **Hero** — «Вы теряете деньги, не зная почему» + дашборд-мокап (ECharts)
+3. **Numbers Strip** — 4 анимированных счётчика (count-up при скролле)
+4. **Проблемы** — 3 боли (бенто-карточки)
+5. **Решение** — 3 преимущества (⚡ живые данные, 👁 видно потери, 📱 с телефона)
+6. **Как работает** — 5 шагов таймлайн (бриф → запуск)
+7. **Для кого** — bento-grid (e-com, услуги, производство)
+8. **Сравнение** — ROI24 vs «как сейчас» таблица (8 параметров)
+9. **Кейс** — «ФармМаркет» 42 точки, экономия 840К/мес
+10. **Команда** — 3 человека (аватары, роли, опыт)
+11. **Калькулятор потерь** — 3 поля (сотрудники, часы, зарплата) → ₽/год
+12. **Тариф** — 100К под ключ, гарантия 30 дней, 6 trust badges
+13. **FAQ** — 6 вопросов-ответов (аккордеон)
+14. **CTA** — Telegram + телефон + мини-форма
+15. **Footer** — 4 колонки, ИНН/ОГРН, 152-ФЗ, cookie banner, privacy modal
 
-## Осталось сделать
-- [ ] Адаптив (мобилки)
-- [ ] Экспорт в CSV/PDF
-- [ ] Автообновление данных (API)
+### Технические детали
+- Шрифты: Inter + JetBrains Mono (fonts.cdnfonts.com, не Google)
+- Графики: ECharts 5.5 (CDN), сегменты e-com/services/production
+- Анимации: IntersectionObserver (reveal) + GSAP ScrollTrigger (подключён)
+- Зависимости: GSAP 3.12.5 + ECharts 5.5.0 (CDN)
+- RU compliance: skip link, focus-visible, cookie banner, privacy modal, ИНН/ОГРН, 152-ФЗ, Telegram fixed button
+- Аналитика: JSON-LD (schema.org), Open Graph теги
+- Responsive: 3 breakpoints (1024, 768, 480px)
 
-## Архитектура
+### Зависимости (CDN)
+- GSAP 3.12.5: `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js`
+- ScrollTrigger: `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js`
+- ECharts 5.5.0: `https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js`
+- Шрифты: `https://fonts.cdnfonts.com/css/inter` + `jetbrains-mono`
+
+## Структура дашборда (ECharts)
 ```
-data.e-com/services/production → { kpi, financial, channels[], ltv, trends[] }
-tabs: CPA | Конверсия | LTV | Доход по каналам
+DATA = {
+  ecom: { kpis[4], revenue{labels,data}, channels{labels,data} },
+  services: { ... },
+  production: { ... }
+}
+Тоглы: [Интернет-магазин] [Услуги] [Производство]
+КPI: Выручка, Маржа, Касса, Дебиторка (e-com)
+Графики: line (выручка), bar (каналы)
 ```
 
 ## Команды
@@ -31,14 +54,14 @@ tabs: CPA | Конверсия | LTV | Доход по каналам
 # Сервер
 cd /home/nik/projects/wow-design/roi24 && python3 -m http.server 8765
 
-# Применить патч
-cd /home/nik/projects/wow-design/roi24 && patch -p1 < patch.diff
-
 # Коммит + пуш
 cd /home/nik/projects/wow-design/roi24 && git add -A && git commit -m "msg" && git push origin master
 ```
 
 ## Важные решения
-- `retCurve` вместо `retention` для данных графика (чтобы не перезаписывать KPI)
-- `Intl.NumberFormat` для рублей
-- Метки каналов: SEO, VK, Я.Директ, Ретаргет (rotate: 45)
+- Single HTML file — нет зависимости от сборки
+- CSS custom properties — все токены в :root
+- ECharts pattern: clear() + setOption() — NEVER innerHTML on chart canvases
+- cdnfonts вместо Google Fonts — не блокируется провайдерами
+- IntersectionObserver вместо GSAP reveal — работает без GSAP
+- Cookie banner через localStorage — запоминает выбор
diff --git a/index.html b/index.html
index 81191ba..ad33e25 100644
--- a/index.html
+++ b/index.html
@@ -3,467 +3,1569 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ROI24 — Живые цифры бизнеса</title>
+    <title>ROI24 — Живые цифры бизнеса за 3 дня</title>
+    <meta name="description" content="Автоматизированные дашборды для собственников бизнеса. Подключаем 1С, CRM, банки и рекламу. 10 ключевых метрик — каждое утро с телефона.">
+    <meta property="og:title" content="ROI24 — Живые цифры бизнеса за 3 дня">
+    <meta property="og:description" content="Дашборд с ключевыми метриками из 1С, CRM и банков. Обновляется автоматически. Смотрится с телефона.">
+    <meta property="og:type" content="website">
+    <meta property="og:locale" content="ru_RU">
+    <link rel="preconnect" href="https://fonts.cdnfonts.com">
+    <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
+    <link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
     <style>
-        /* === RESET & BASE === */
-        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-        :root {
-            --bg-primary: #050505;
-            --bg-surface: #0f0f10;
-            --bg-card: #1a1a1c;
-            --border: #2a2a2e;
-            --border-hover: #444;
-            --text-primary: #f0f0f0;
-            --text-secondary: #a0a0a5;
-            --accent: #00ff9d; /* Green for money/profit */
-            --accent-dim: rgba(0, 255, 157, 0.15);
-            --error: #ff4d4d;
-            --warning: #ffc107;
-            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
-        }
-        body {
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            font-family: var(--font-main);
-            line-height: 1.6;
-            overflow-x: hidden;
-            -webkit-font-smoothing: antialiased;
-        }
-        a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
-        a:hover { opacity: 0.8; }
+/* ============================================================
+   DESIGN TOKENS
+   ============================================================ */
+:root {
+    --bg: #0a0a0a;
+    --surface: #111111;
+    --card: #161618;
+    --border: rgba(255,255,255,0.06);
+    --border-hover: rgba(255,255,255,0.15);
+    --text: #f5f5f5;
+    --text-sec: #a1a1aa;
+    --text-dim: #52525b;
+    --accent: #22c55e;
+    --accent-hover: #16a34a;
+    --accent-dim: rgba(34,197,94,0.12);
+    --blue: #3b82f6;
+    --blue-dim: rgba(59,130,246,0.12);
+    --amber: #f59e0b;
+    --red: #ef4444;
+    --red-dim: rgba(239,68,68,0.12);
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --mono: 'JetBrains Mono', 'SF Mono', monospace;
+}
 
-        /* === LAYOUT === */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 24px;
-        }
-        section { padding: 80px 0; }
-        
-        /* === NAVIGATION === */
-        nav {
-            padding: 24px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-        }
-        .logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
-        .logo span { color: var(--accent); }
-        .nav-links { display: flex; gap: 32px; font-size: 0.9rem; color: var(--text-secondary); }
-        .btn {
-            padding: 12px 24px;
-            border-radius: 100px;
-            font-weight: 600;
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            border: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .btn-primary {
-            background: var(--accent);
-            color: #000;
-        }
-        .btn-primary:hover {
-            background: #00cc7d;
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px var(--accent-dim);
-        }
-        .btn-outline {
-            background: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-        }
-        .btn-outline:hover {
-            border-color: var(--text-primary);
-        }
+/* ============================================================
+   RESET & BASE
+   ============================================================ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+body {
+    background: var(--bg); color: var(--text); font-family: var(--font);
+    line-height: 1.6; overflow-x: hidden;
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
+body::before {
+    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+    opacity: 0.5;
+}
+a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
+a:hover { opacity: 0.85; }
+img { max-width: 100%; display: block; }
+ul { list-style: none; }
+button, input, textarea { font-family: inherit; font-size: inherit; }
 
-        /* === HERO === */
-        .hero {
-            padding: 120px 0 80px;
-            text-align: center;
-            position: relative;
-        }
-        .hero h1 {
-            font-size: clamp(3rem, 8vw, 5.5rem);
-            font-weight: 800;
-            line-height: 1.1;
-            letter-spacing: -0.04em;
-            margin-bottom: 24px;
-            background: linear-gradient(to bottom, #ffffff, #a0a0a0);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .hero p {
-            font-size: 1.25rem;
-            color: var(--text-secondary);
-            max-width: 600px;
-            margin: 0 auto 40px;
-        }
-        .hero-actions {
-            display: flex;
-            gap: 16px;
-            justify-content: center;
-            margin-bottom: 60px;
-        }
-        
-        /* === DASHBOARD PREVIEW (THE MONEY SHOT) === */
-        .dashboard-wrapper {
-            background: var(--bg-surface);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 24px;
-            box-shadow: 0 40px 80px rgba(0,0,0,0.5);
-            margin-top: 40px;
-            position: relative;
-            overflow: hidden;
-        }
-        /* Glow effect behind dashboard */
-        .dashboard-wrapper::before {
-            content: '';
-            position: absolute;
-            top: -50%; left: -50%;
-            width: 200%; height: 200%;
-            background: radial-gradient(circle, var(--accent-dim) 0%, transparent 60%);
-            pointer-events: none;
-            z-index: 0;
-        }
+/* Focus-visible for accessibility */
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+/* Skip link */
+.skip-link {
+    position: absolute; top: -100%; left: 16px; background: var(--accent);
+    color: #000; padding: 8px 16px; border-radius: 8px; z-index: 9999;
+    font-weight: 600; font-size: 0.875rem;
+}
+.skip-link:focus { top: 16px; }
 
-        .dash-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 24px;
-            padding-bottom: 16px;
-            border-bottom: 1px solid var(--border);
-            position: relative;
-            z-index: 1;
-        }
-        .dash-title { font-size: 1.1rem; font-weight: 700; }
-        .dash-badge {
-            font-size: 0.75rem;
-            padding: 4px 12px;
-            border-radius: 100px;
-            background: var(--accent-dim);
-            color: var(--accent);
-            border: 1px solid rgba(0,255,157,0.2);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .live-dot {
-            width: 6px; height: 6px;
-            background: var(--accent);
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+/* ============================================================
+   LAYOUT
+   ============================================================ */
+.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
+section { padding: 128px 0; }
+.section-label {
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
+    color: var(--accent); margin-bottom: 12px; font-weight: 600;
+}
+.section-title {
+    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
+    letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
+}
+.section-desc {
+    font-size: 1.125rem; color: var(--text-sec); max-width: 560px; margin-bottom: 48px;
+}
+.text-center { text-align: center; }
+.mx-auto { margin-left: auto; margin-right: auto; }
 
-        /* Metrics Grid */
-        .metrics-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 16px;
-            margin-bottom: 24px;
-            position: relative;
-            z-index: 1;
-        }
-        .metric-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            padding: 20px;
-            border-radius: 12px;
-            transition: all 0.2s;
-        }
-        .metric-card:hover {
-            border-color: var(--border-hover);
-            transform: translateY(-2px);
-        }
-        .metric-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
-        .metric-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; }
-        .metric-trend { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
-        .trend-up { color: var(--accent); }
-        .trend-down { color: var(--error); }
+/* ============================================================
+   HEADER / NAV
+   ============================================================ */
+.header {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+    height: 72px; display: flex; align-items: center;
+    background: rgba(10,10,10,0.6); backdrop-filter: blur(16px) saturate(180%);
+    border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
+}
+.header.scrolled {
+    background: rgba(10,10,10,0.9);
+    border-bottom-color: var(--border);
+}
+.header .wrap {
+    display: flex; align-items: center; justify-content: space-between; width: 100%;
+}
+.logo {
+    font-size: 1.375rem; font-weight: 800; letter-spacing: -0.04em;
+    display: flex; align-items: center; gap: 6px;
+}
+.logo span { color: var(--accent); }
+.nav-links { display: flex; align-items: center; gap: 32px; }
+.nav-links a { font-size: 0.875rem; color: var(--text-sec); transition: color 0.2s; }
+.nav-links a:hover { color: var(--text); opacity: 1; }
+.header-phone {
+    font-size: 0.875rem; color: var(--text-sec); margin-right: 20px;
+    font-family: var(--mono);
+}
+.btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 12px 24px; border-radius: 100px; font-weight: 600; font-size: 0.875rem;
+    cursor: pointer; border: none; transition: all 0.2s ease;
+    white-space: nowrap;
+}
+.btn-accent {
+    background: var(--accent); color: #000;
+}
+.btn-accent:hover {
+    background: var(--accent-hover); transform: translateY(-1px);
+    box-shadow: 0 8px 24px var(--accent-dim); opacity: 1;
+}
+.btn-accent.cta-glow {
+    animation: ctaGlow 2s ease-in-out infinite;
+}
+@keyframes ctaGlow {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
+    50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
+}
+.btn-outline {
+    background: transparent; border: 1px solid var(--border); color: var(--text);
+}
+.btn-outline:hover { border-color: var(--text-sec); opacity: 1; }
+.btn-lg { padding: 16px 32px; font-size: 1rem; }
 
-        /* Chart Area */
-        .chart-area {
-            height: 200px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 20px;
-            position: relative;
-            z-index: 1;
-            display: flex;
-            align-items: flex-end;
-            gap: 12px;
-        }
-        .chart-bar {
-            flex: 1;
-            background: var(--border);
-            border-radius: 4px 4px 0 0;
-            transition: height 0.5s ease;
-        }
-        .chart-bar.highlight {
-            background: var(--accent);
-            box-shadow: 0 0 10px var(--accent-dim);
-        }
+/* ============================================================
+   HERO
+   ============================================================ */
+.hero {
+    padding: 160px 0 100px; position: relative;
+}
+.hero-inner {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
+}
+.hero h1 {
+    font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 800;
+    letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 20px;
+}
+.hero h1 .accent { color: var(--accent); }
+.hero-sub {
+    font-size: 1.125rem; color: var(--text-sec); margin-bottom: 32px; line-height: 1.7;
+}
+.hero-actions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
+.hero-trust {
+    font-size: 0.8125rem; color: var(--text-dim); margin-top: 16px;
+    display: flex; align-items: center; gap: 8px;
+}
+.hero-trust svg { color: var(--accent); flex-shrink: 0; }
 
-        /* === FEATURES === */
-        .features {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 32px;
-        }
-        .feature-item h3 {
-            font-size: 1.25rem;
-            margin-bottom: 12px;
-        }
-        .feature-item p { color: var(--text-secondary); }
+/* Hero geometric decorations */
+.hero::before, .hero::after {
+    content: ''; position: absolute; border-radius: 50%; opacity: 0.03;
+    background: var(--accent); pointer-events: none;
+}
+.hero::before { width: 400px; height: 400px; top: -100px; right: -100px; }
+.hero::after { width: 200px; height: 200px; bottom: 40px; right: 40%; border-radius: 4px; }
 
-        /* === PRICING === */
-        .pricing-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 24px;
-            margin-top: 48px;
-        }
-        .price-card {
-            background: var(--bg-surface);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 32px;
-            display: flex;
-            flex-direction: column;
-        }
-        .price-card.featured {
-            border-color: var(--accent);
-            background: linear-gradient(180deg, rgba(0,255,157,0.05) 0%, var(--bg-surface) 100%);
-        }
-        .price-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
-        .price-amount { font-size: 2.5rem; font-weight: 800; margin-bottom: 24px; font-family: var(--font-mono); }
-        .price-period { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
-        .price-features { list-style: none; margin-bottom: 32px; flex-grow: 1; }
-        .price-features li {
-            padding: 8px 0;
-            border-bottom: 1px solid var(--border);
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .price-features li::before {
-            content: '✓';
-            color: var(--accent);
-            font-weight: bold;
-        }
+/* ============================================================
+   DASHBOARD PREVIEW
+   ============================================================ */
+.dash-wrap {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5);
+    position: relative;
+}
+.dash-wrap::before {
+    content: ''; position: absolute; top: -40%; left: -40%;
+    width: 180%; height: 180%; pointer-events: none; z-index: 0;
+    background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 60%);
+}
+.dash-top {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 24px; border-bottom: 1px solid var(--border);
+    position: relative; z-index: 1;
+}
+.dash-title { font-size: 0.875rem; font-weight: 600; }
+.dash-live {
+    font-size: 0.75rem; padding: 4px 12px; border-radius: 100px;
+    background: var(--accent-dim); color: var(--accent);
+    border: 1px solid rgba(34,197,94,0.2);
+    display: flex; align-items: center; gap: 6px;
+}
+.dash-live-dot {
+    width: 6px; height: 6px; background: var(--accent);
+    border-radius: 50%; animation: pulse 2s infinite;
+}
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.dash-segments {
+    display: flex; gap: 4px; padding: 12px 24px;
+    border-bottom: 1px solid var(--border); position: relative; z-index: 1;
+}
+.dash-seg-btn {
+    padding: 6px 14px; border-radius: 8px; font-size: 0.75rem;
+    background: transparent; border: 1px solid transparent;
+    color: var(--text-sec); cursor: pointer; transition: all 0.2s;
+    font-weight: 500;
+}
+.dash-seg-btn.active, .dash-seg-btn:hover {
+    background: var(--accent-dim); color: var(--accent);
+    border-color: rgba(34,197,94,0.2);
+}
+.dash-body { padding: 24px; position: relative; z-index: 1; }
+.dash-kpis {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
+    margin-bottom: 20px;
+}
+.dash-kpi {
+    background: var(--card); border: 1px solid var(--border);
+    border-radius: 10px; padding: 16px; transition: all 0.2s;
+}
+.dash-kpi:hover { border-color: var(--border-hover); transform: translateY(-1px); }
+.dash-kpi-label { font-size: 0.6875rem; color: var(--text-sec); margin-bottom: 6px; }
+.dash-kpi-value {
+    font-size: 1.375rem; font-weight: 800; font-family: var(--mono);
+    margin-bottom: 4px; letter-spacing: -0.02em;
+}
+.dash-kpi-trend { font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
+.trend-up { color: var(--accent); }
+.trend-down { color: var(--red); }
+.dash-charts {
+    display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px;
+}
+.dash-chart {
+    background: var(--card); border: 1px solid var(--border);
+    border-radius: 10px; padding: 16px;
+}
+.dash-chart-title {
+    font-size: 0.75rem; font-weight: 600; margin-bottom: 12px; color: var(--text-sec);
+}
+.chart-canvas { width: 100%; height: 180px; }
 
-        /* === FOOTER === */
-        footer {
-            border-top: 1px solid var(--border);
-            padding: 48px 0;
-            margin-top: 80px;
-            text-align: center;
-            color: var(--text-secondary);
-            font-size: 0.85rem;
-        }
+/* ============================================================
+   NUMBERS STRIP
+   ============================================================ */
+.numbers { padding: 80px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.numbers-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
+    text-align: center;
+}
+.num-item {}
+.num-value {
+    font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800;
+    font-family: var(--mono); letter-spacing: -0.03em; color: var(--accent);
+    margin-bottom: 8px;
+}
+.num-value .num-unit { font-size: 0.6em; color: var(--text-sec); }
+.num-text { font-size: 0.875rem; color: var(--text-sec); line-height: 1.5; }
 
-        /* === RESPONSIVE === */
-        @media (max-width: 768px) {
-            .hero h1 { font-size: 2.5rem; }
-            .metrics-grid { grid-template-columns: 1fr 1fr; }
-            .pricing-grid { grid-template-columns: 1fr; }
-            .features { grid-template-columns: 1fr; }
-            .nav-links { display: none; }
-        }
-    </style>
+/* ============================================================
+   PROBLEMS
+   ============================================================ */
+.problems-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
+}
+.problem-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 32px; transition: all 0.3s;
+}
+.problem-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
+.problem-icon {
+    width: 48px; height: 48px; border-radius: 12px;
+    background: var(--red-dim); color: var(--red);
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: 20px; font-size: 1.25rem;
+}
+.problem-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
+.problem-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
+
+/* ============================================================
+   SOLUTION
+   ============================================================ */
+.solution { background: var(--surface); }
+.solution-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
+}
+.solution-card {
+    background: var(--card); border: 1px solid var(--border);
+    border-radius: 16px; padding: 32px; transition: all 0.3s;
+}
+.solution-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
+.sol-icon {
+    font-size: 2rem; margin-bottom: 16px;
+}
+.solution-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; }
+.solution-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
+
+/* ============================================================
+   HOW IT WORKS (Timeline)
+   ============================================================ */
+.timeline { position: relative; max-width: 640px; }
+.timeline::before {
+    content: ''; position: absolute; left: 23px; top: 0; bottom: 0;
+    width: 2px; background: var(--border);
+}
+.tl-step {
+    position: relative; padding-left: 64px; padding-bottom: 48px;
+}
+.tl-step:last-child { padding-bottom: 0; }
+.tl-dot {
+    position: absolute; left: 14px; top: 4px; width: 20px; height: 20px;
+    border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
+    display: flex; align-items: center; justify-content: center;
+}
+.tl-dot span {
+    font-size: 0.625rem; font-weight: 700; color: var(--accent);
+    font-family: var(--mono);
+}
+.tl-step h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; }
+.tl-time { font-size: 0.75rem; color: var(--accent); font-family: var(--mono); margin-bottom: 8px; }
+.tl-step p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
+
+/* ============================================================
+   FOR WHOM (Bento Grid)
+   ============================================================ */
+.bento {
+    display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr;
+    grid-template-rows: auto auto; gap: 16px;
+}
+.bento-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 32px; transition: all 0.3s;
+}
+.bento-card:hover { border-color: var(--border-hover); }
+.bento-card.featured { grid-row: span 2; }
+.bento-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
+.bento-metrics { font-size: 0.8125rem; color: var(--text-sec); margin-bottom: 16px; line-height: 1.7; }
+.bento-example {
+    font-size: 0.75rem; color: var(--text-dim); font-style: italic;
+    border-left: 2px solid var(--border); padding-left: 12px;
+}
+
+/* ============================================================
+   COMPARISON TABLE
+   ============================================================ */
+.comparison { background: var(--surface); }
+.comp-table {
+    width: 100%; border-collapse: collapse; font-size: 0.875rem;
+}
+.comp-table th {
+    text-align: left; padding: 16px 20px; font-weight: 600;
+    border-bottom: 2px solid var(--border); font-size: 0.8125rem;
+    color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.05em;
+}
+.comp-table th:last-child { color: var(--accent); }
+.comp-table td {
+    padding: 14px 20px; border-bottom: 1px solid var(--border);
+    color: var(--text-sec);
+}
+.comp-table tr:hover td { background: rgba(255,255,255,0.02); }
+.comp-yes { color: var(--accent); font-weight: 600; }
+.comp-no { color: var(--red); }
+
+/* ============================================================
+   CASE STUDY
+   ============================================================ */
+.case-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 48px; position: relative;
+    overflow: hidden;
+}
+.case-card::before {
+    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
+    background: var(--accent);
+}
+.case-company {
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
+    color: var(--accent); margin-bottom: 16px; font-weight: 600;
+}
+.case-card h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 32px; }
+.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 32px; }
+.case-block h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-sec); margin-bottom: 12px; }
+.case-block ul { font-size: 0.875rem; color: var(--text-sec); line-height: 2; }
+.case-block ul li::before { content: '— '; color: var(--accent); }
+.case-quote {
+    border-left: 2px solid var(--accent); padding-left: 20px;
+    font-style: italic; color: var(--text-sec); font-size: 1rem; line-height: 1.7;
+    margin-bottom: 12px;
+}
+.case-author { font-size: 0.8125rem; color: var(--text-dim); }
+
+/* ============================================================
+   TEAM
+   ============================================================ */
+.team { background: var(--surface); }
+.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+.team-card {
+    background: var(--card); border: 1px solid var(--border);
+    border-radius: 16px; padding: 32px; text-align: center;
+    transition: all 0.3s;
+}
+.team-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
+.team-avatar {
+    width: 80px; height: 80px; border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-dim), var(--blue-dim));
+    margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
+    font-size: 1.75rem; font-weight: 800; color: var(--accent);
+    border: 2px solid var(--border);
+}
+.team-card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 4px; }
+.team-role { font-size: 0.8125rem; color: var(--accent); margin-bottom: 12px; font-weight: 500; }
+.team-exp { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.5; }
+
+/* ============================================================
+   CALCULATOR
+   ============================================================ */
+.calc-wrap {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 48px; max-width: 600px;
+}
+.calc-field { margin-bottom: 20px; }
+.calc-field label {
+    display: block; font-size: 0.8125rem; color: var(--text-sec); margin-bottom: 6px;
+}
+.calc-field input {
+    width: 100%; padding: 12px 16px; background: var(--card);
+    border: 1px solid var(--border); border-radius: 10px;
+    color: var(--text); font-size: 1rem; font-family: var(--mono);
+    transition: border-color 0.2s;
+}
+.calc-field input:focus { border-color: var(--accent); outline: none; }
+.calc-result {
+    margin-top: 24px; padding: 24px; border-radius: 12px;
+    background: var(--accent-dim); border: 1px solid rgba(34,197,94,0.2);
+    text-align: center; display: none;
+}
+.calc-result.show { display: block; }
+.calc-result .calc-big {
+    font-size: 2rem; font-weight: 800; color: var(--accent);
+    font-family: var(--mono); margin-bottom: 8px;
+}
+.calc-result .calc-detail { font-size: 0.8125rem; color: var(--text-sec); }
+
+/* ============================================================
+   PRICING
+   ============================================================ */
+.pricing { background: var(--surface); }
+.price-card {
+    background: var(--bg); border: 1px solid var(--border);
+    border-radius: 16px; padding: 48px; text-align: center;
+    max-width: 480px; margin: 0 auto; position: relative;
+}
+.price-card::before {
+    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+    width: 60px; height: 3px; background: var(--accent); border-radius: 0 0 4px 4px;
+}
+.price-name { font-size: 1rem; color: var(--text-sec); margin-bottom: 8px; }
+.price-amount {
+    font-size: 3rem; font-weight: 800; font-family: var(--mono);
+    letter-spacing: -0.03em; margin-bottom: 4px;
+}
+.price-amount span { font-size: 0.4em; color: var(--text-sec); font-weight: 400; }
+.price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 32px; }
+.price-features { text-align: left; margin-bottom: 32px; }
+.price-features li {
+    padding: 8px 0; font-size: 0.875rem; color: var(--text-sec);
+    display: flex; align-items: flex-start; gap: 10px;
+    border-bottom: 1px solid var(--border);
+}
+.price-features li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
+.price-guarantee {
+    margin-top: 24px; padding: 20px; border-radius: 10px;
+    background: var(--card); border: 1px solid var(--border);
+    font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6;
+}
+.trust-badges {
+    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
+    margin-top: 24px;
+}
+.trust-badge {
+    font-size: 0.75rem; color: var(--text-dim);
+    display: flex; align-items: center; gap: 4px;
+}
+.trust-badge::before { content: '✓'; color: var(--accent); font-size: 0.875rem; }
+
+/* ============================================================
+   FAQ
+   ============================================================ */
+.faq-list { max-width: 720px; margin: 0 auto; }
+.faq-item {
+    border-bottom: 1px solid var(--border);
+}
+.faq-q {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 20px 0; cursor: pointer; font-weight: 600;
+    font-size: 1rem; user-select: none; transition: color 0.2s;
+}
+.faq-q:hover { color: var(--accent); }
+.faq-arrow {
+    flex-shrink: 0; transition: transform 0.3s; font-size: 0.875rem; color: var(--text-dim);
+}
+.faq-item.open .faq-arrow { transform: rotate(45deg); }
+.faq-a {
+    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
+}
+.faq-a-inner {
+    padding: 0 0 20px; font-size: 0.875rem; color: var(--text-sec); line-height: 1.7;
+}
+
+/* ============================================================
+   CTA
+   ============================================================ */
+.cta-section { background: var(--surface); }
+.cta-box {
+    text-align: center; padding: 80px 48px;
+    border-radius: 20px; background: var(--card);
+    border: 1px solid var(--border);
+}
+.cta-box h2 {
+    font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800;
+    letter-spacing: -0.03em; margin-bottom: 12px;
+}
+.cta-box p { color: var(--text-sec); margin-bottom: 32px; font-size: 1.0625rem; }
+.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.cta-mini-form {
+    display: flex; gap: 8px; margin-top: 24px; justify-content: center;
+}
+.cta-mini-form input {
+    padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
+    border-radius: 100px; color: var(--text); width: 220px;
+}
+.cta-mini-form input:focus { border-color: var(--accent); outline: none; }
+
+/* ============================================================
+   FOOTER
+   ============================================================ */
+.footer {
+    border-top: 1px solid var(--border); padding: 64px 0 32px;
+}
+.footer-grid {
+    display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr; gap: 40px;
+    margin-bottom: 48px;
+}
+.footer h4 {
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
+    color: var(--text-sec); margin-bottom: 16px; font-weight: 600;
+}
+.footer p, .footer a {
+    font-size: 0.8125rem; color: var(--text-sec); line-height: 1.8;
+}
+.footer a:hover { color: var(--accent); opacity: 1; }
+.footer-bottom {
+    border-top: 1px solid var(--border); padding-top: 24px;
+    display: flex; justify-content: space-between; align-items: center;
+    flex-wrap: wrap; gap: 16px;
+}
+.footer-bottom p { font-size: 0.75rem; color: var(--text-dim); }
+.footer-links { display: flex; gap: 24px; }
+.footer-links a { font-size: 0.75rem; color: var(--text-dim); }
+.footer-links a:hover { color: var(--text-sec); opacity: 1; }
+
+/* Fixed Telegram button */
+.tg-float {
+    position: fixed; bottom: 24px; right: 24px; z-index: 90;
+    width: 56px; height: 56px; border-radius: 50%;
+    background: var(--accent); display: flex; align-items: center;
+    justify-content: center; box-shadow: 0 4px 20px rgba(34,197,94,0.3);
+    transition: transform 0.2s;
+}
+.tg-float:hover { transform: scale(1.05); opacity: 1; }
+.tg-float svg { color: #000; }
+
+/* Cookie banner */
+.cookie-banner {
+    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
+    background: var(--surface); border-top: 1px solid var(--border);
+    padding: 16px 24px; display: none; align-items: center;
+    justify-content: space-between; gap: 16px; flex-wrap: wrap;
+}
+.cookie-banner.show { display: flex; }
+.cookie-banner p { font-size: 0.8125rem; color: var(--text-sec); flex: 1; }
+.cookie-banner p a { color: var(--accent); text-decoration: underline; }
+.cookie-close {
+    padding: 8px 20px; border-radius: 100px; background: var(--accent);
+    color: #000; font-weight: 600; font-size: 0.8125rem; cursor: pointer;
+    border: none; white-space: nowrap;
+}
+
+/* Privacy modal */
+.modal-overlay {
+    position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.7);
+    display: none; align-items: center; justify-content: center;
+    padding: 24px;
+}
+.modal-overlay.show { display: flex; }
+.modal-box {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 40px; max-width: 600px; width: 100%;
+    max-height: 80vh; overflow-y: auto;
+}
+.modal-box h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
+.modal-box p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.7; margin-bottom: 12px; }
+.modal-close {
+    margin-top: 16px; padding: 10px 24px; border-radius: 100px;
+    background: var(--accent); color: #000; font-weight: 600;
+    border: none; cursor: pointer;
+}
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+@media (max-width: 1024px) {
+    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
+    .hero .dash-wrap { order: -1; }
+    .problems-grid, .solution-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
+    .bento { grid-template-columns: 1fr 1fr; }
+    .bento-card.featured { grid-row: auto; }
+    .footer-grid { grid-template-columns: 1fr 1fr; }
+    .case-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+    section { padding: 80px 0; }
+    .nav-links { display: none; }
+    .header-phone { display: none; }
+    .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
+    .problems-grid, .solution-grid, .team-grid { grid-template-columns: 1fr; }
+    .bento { grid-template-columns: 1fr; }
+    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
+    .dash-charts { grid-template-columns: 1fr; }
+    .dash-kpi-value { font-size: 1.125rem; }
+    .comp-table { font-size: 0.75rem; }
+    .comp-table th, .comp-table td { padding: 10px 12px; }
+    .footer-grid { grid-template-columns: 1fr; }
+    .calc-wrap { padding: 24px; }
+    .cta-box { padding: 48px 24px; }
+    .cta-mini-form { flex-direction: column; }
+    .cta-mini-form input { width: 100%; }
+}
+@media (max-width: 480px) {
+    .dash-kpis { grid-template-columns: 1fr; }
+    .hero-actions { flex-direction: column; }
+    .hero-actions .btn { width: 100%; }
+}
+
+/* ============================================================
+   ANIMATION (GSAP-ready classes)
+   ============================================================ */
+.reveal {
+    opacity: 0; transform: translateY(24px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.reveal.visible {
+    opacity: 1; transform: translateY(0);
+}
+</style>
 </head>
 <body>
 
-    <div class="container">
-        <!-- NAV -->
-        <nav>
-            <div class="logo">ROI<span>24</span></div>
-            <div class="nav-links">
-                <a href="#features">Возможности</a>
-                <a href="#pricing">Тарифы</a>
-                <a href="#demo">Демо</a>
-            </div>
-            <a href="#cta" class="btn btn-outline">Войти</a>
+<!-- Skip Link (a11y) -->
+<a href="#main" class="skip-link">Перейти к содержимому</a>
+
+<!-- HEADER -->
+<header class="header" id="header">
+    <div class="wrap">
+        <a href="#" class="logo">ROI<span>24</span></a>
+        <nav class="nav-links">
+            <a href="#solution">Решение</a>
+            <a href="#demo">Пример</a>
+            <a href="#pricing">Тариф</a>
+            <a href="#faq">FAQ</a>
         </nav>
-
-        <!-- HERO -->
-        <header class="hero">
-            <h1>Живые цифры<br>вашего бизнеса</h1>
-            <p>Подключаем 1С, банк и рекламу. Вы видите выручку, маржу и кассу каждое утро. Без бухгалтерских задержек и таблиц Excel.</p>
-            <div class="hero-actions">
-                <a href="#demo" class="btn btn-primary">Смотреть демо</a>
-                <a href="#pricing" class="btn btn-outline">Тарифы</a>
-            </div>
-            
-            <!-- DASHBOARD PREVIEW -->
-            <div class="dashboard-wrapper" id="demo">
-                <div class="dash-header">
-                    <div class="dash-title">Dashboard | Интернет-магазин</div>
-                    <div class="dash-badge">
-                        <div class="live-dot"></div> Live Sync
-                    </div>
-                </div>
-                
-                <div class="metrics-grid">
-                    <div class="metric-card">
-                        <div class="metric-label">Выручка (Сегодня)</div>
-                        <div class="metric-value">124 500 ₽</div>
-                        <div class="metric-trend trend-up">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
-                            +12.5%
-                        </div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-label">Маржа (Сегодня)</div>
-                        <div class="metric-value">38 150 ₽</div>
-                        <div class="metric-trend trend-up">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
-                            +8.2%
-                        </div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-label">Заказы (Всего)</div>
-                        <div class="metric-value">47</div>
-                        <div class="metric-trend trend-down">
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
-                            -2.1%
-                        </div>
-                    </div>
-                    <div class="metric-card">
-                        <div class="metric-label">Касса (Баланс)</div>
-                        <div class="metric-value" style="color: var(--accent)">1 245 000 ₽</div>
-                        <div class="metric-trend" style="color: var(--text-secondary)">
-                            Обновлено 2 мин назад
-                        </div>
-                    </div>
-                </div>
-
-                <div class="chart-area" id="revenue-chart">
-                    <!-- Bars injected via JS for animation -->
-                </div>
-            </div>
-        </header>
-
-        <!-- FEATURES -->
-        <section id="features">
-            <div class="features">
-                <div class="feature-item">
-                    <h3>Автообновление</h3>
-                    <p>Данные синхронизируются с 1С, банками и рекламными кабинетами каждые 4 часа. Не нужно ждать отчётов в понедельник.</p>
-                </div>
-                <div class="feature-item">
-                    <h3>Все каналы в одном месте</h3>
-                    <p>Сравнивайте ROI Директа, ВКонтакте и маркетплейсов на одном экране. Видно, какой канал приносит деньги прямо сейчас.</p>
-                </div>
-                <div class="feature-item">
-                    <h3>AI-прогнозы</h3>
-                    <p>Система анализирует тренды и предсказывает выручку на завтра. Получайте алерты, если что-то идёт не так.</p>
-                </div>
-            </div>
-        </section>
-
-        <!-- PRICING -->
-        <section id="pricing">
-            <h2 style="font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px;">Тарифы</h2>
-            <div class="pricing-grid">
-                <div class="price-card">
-                    <div class="price-name">Старт</div>
-                    <div class="price-amount">10 000 ₽<span class="price-period">/мес</span></div>
-                    <ul class="price-features">
-                        <li>1 источник данных (1С или Банк)</li>
-                        <li>3 дашборда</li>
-                        <li>Обновление 1 раз в день</li>
-                        <li>Поддержка по Email</li>
-                    </ul>
-                    <a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Начать</a>
-                </div>
-                <div class="price-card featured">
-                    <div class="price-name">Бизнес</div>
-                    <div class="price-amount">25 000 ₽<span class="price-period">/мес</span></div>
-                    <ul class="price-features">
-                        <li>До 4 источников (1С, Банк, CRM, Рекламы)</li>
-                        <li>10 дашбордов</li>
-                        <li>Обновление каждые 4 часа</li>
-                        <li>AI-прогнозы и алерты</li>
-                        <li>Выгрузка в PDF/Excel</li>
-                    </ul>
-                    <a href="#" class="btn btn-primary" style="width:100%; justify-content:center;">Попробовать</a>
-                </div>
-                <div class="price-card">
-                    <div class="price-name">Под ключ</div>
-                    <div class="price-amount">50 000 ₽<span class="price-period">/мес</span></div>
-                    <ul class="price-features">
-                        <li>Все источники + Маркетплейсы</li>
-                        <li>Кастомные метрики под бизнес</li>
-                        <li>Обновление каждые 30 минут</li>
-                        <li>Выделенный менеджер</li>
-                    </ul>
-                    <a href="#" class="btn btn-outline" style="width:100%; justify-content:center;">Связаться</a>
-                </div>
-            </div>
-        </section>
-
-        <!-- CTA -->
-        <section id="cta" style="text-align: center;">
-            <h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 24px;">Перестаньте управлять "на ощупь"</h2>
-            <p style="color: var(--text-secondary); margin-bottom: 32px; font-size: 1.1rem;">
-                Подключим дашборд за 3 дня. Первые 7 дней — бесплатно.
-            </p>
-            <a href="https://t.me/" class="btn btn-primary" style="padding: 16px 32px; font-size: 1.1rem;">
-                Обсудить проект в Telegram
-            </a>
-        </section>
-    </div>
-
-    <footer>
-        <div class="container">
-            <p>ROI24 © 2026. Все права защищены.</p>
-            <p style="margin-top: 8px; opacity: 0.5;">Не является публичной офертой. ИНН 0000000000</p>
+        <div style="display:flex;align-items:center;gap:20px;">
+            <a href="tel:+74951234567" class="header-phone">+7 (495) 123-45-67</a>
+            <a href="#cta" class="btn btn-accent">Обсудить проект</a>
         </div>
-    </footer>
+    </div>
+</header>
 
-    <script>
-        // === Simple Chart Animation ===
-        document.addEventListener('DOMContentLoaded', () => {
-            const chartContainer = document.getElementById('revenue-chart');
-            const barCount = 12;
-            const heights = [40, 55, 45, 60, 70, 65, 80, 90, 85, 95, 88, 100]; // Mock data
-            
-            // Generate bars
-            heights.forEach((h, i) => {
-                const bar = document.createElement('div');
-                bar.className = 'chart-bar' + (i === heights.length - 1 ? ' highlight' : '');
-                bar.style.height = '0%'; // Start at 0
-                chartContainer.appendChild(bar);
-                
-                // Animate on load
-                setTimeout(() => {
-                    bar.style.height = h + '%';
-                }, 100 + (i * 50));
+<main id="main">
+
+<!-- ===== HERO ===== -->
+<section class="hero" id="hero">
+    <div class="wrap">
+        <div class="hero-inner">
+            <div>
+                <p class="section-label">Аналитика для собственников</p>
+                <h1>Вы теряете деньги, <br>не зная <span class="accent">почему</span></h1>
+                <p class="hero-sub">Живой дашборд с 10 ключевыми метриками вашего бизнеса — обновляется автоматически из 1С, CRM и банков. Без обучения, без Excel.</p>
+                <div class="hero-actions">
+                    <a href="#cta" class="btn btn-accent btn-lg cta-glow">Получить демо за 3 дня</a>
+                    <a href="#demo" class="btn btn-outline btn-lg">Посмотреть пример дашборда</a>
+                </div>
+                <p class="hero-trust">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+                    Настроим за 3 дня. Не нужно учиться — увидите цифры как в bank-app
+                </p>
+            </div>
+
+            <!-- DASHBOARD PREVIEW -->
+            <div class="dash-wrap" id="demo">
+                <div class="dash-top">
+                    <span class="dash-title">ROI24 Dashboard</span>
+                    <span class="dash-live"><span class="dash-live-dot"></span> Live Sync</span>
+                </div>
+                <div class="dash-segments">
+                    <button class="dash-seg-btn active" data-seg="ecom">Интернет-магазин</button>
+                    <button class="dash-seg-btn" data-seg="services">Услуги / Агентство</button>
+                    <button class="dash-seg-btn" data-seg="production">Производство</button>
+                </div>
+                <div class="dash-body">
+                    <div class="dash-kpis" id="dash-kpis">
+                        <!-- injected by JS -->
+                    </div>
+                    <div class="dash-charts">
+                        <div class="dash-chart">
+                            <div class="dash-chart-title">Выручка, 12 месяцев</div>
+                            <div class="chart-canvas" id="chart-revenue"></div>
+                        </div>
+                        <div class="dash-chart">
+                            <div class="dash-chart-title">Каналы привлечения</div>
+                            <div class="chart-canvas" id="chart-channels"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== NUMBERS ===== -->
+<section class="numbers" id="numbers">
+    <div class="wrap">
+        <div class="numbers-grid">
+            <div class="num-item reveal">
+                <div class="num-value"><span class="counter" data-target="70">0</span><span class="num-unit">%</span></div>
+                <div class="num-text">компаний не видят<br>деньги в кассе на износ</div>
+            </div>
+            <div class="num-item reveal">
+                <div class="num-value"><span class="counter" data-target="3">0</span> <span class="num-unit">дня</span></div>
+                <div class="num-text">без дашборда<br>тратят время<br>на отчёты</div>
+            </div>
+            <div class="num-item reveal">
+                <div class="num-value"><span class="counter" data-target="83">0</span><span class="num-unit">%</span></div>
+                <div class="num-text">маркетологов не<br>могут доказать ROI</div>
+            </div>
+            <div class="num-item reveal">
+                <div class="num-value"><span class="counter" data-target="2.3" data-decimal="1">0</span><span class="num-unit">x</span></div>
+                <div class="num-text">чаще компании<br>с аналитикой<br>превышают цели</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== PROBLEMS ===== -->
+<section id="problems">
+    <div class="wrap">
+        <p class="section-label reveal">Знакомо?</p>
+        <h2 class="section-title reveal">3 боли собственника</h2>
+        <div class="problems-grid" style="margin-top:48px;">
+            <div class="problem-card reveal">
+                <div class="problem-icon">🔀</div>
+                <h3>Данные разбросаны</h3>
+                <p>Выручка в 1С, клиенты в CRM, расходы в банках, реклама в Яндекс.Директ. Каждый раз — ручная сводка. Нет единой картины.</p>
+            </div>
+            <div class="problem-card reveal">
+                <div class="problem-icon">🌫</div>
+                <h3>Непонятно, где теряете</h3>
+                <p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какой продукт убыточен.</p>
+            </div>
+            <div class="problem-card reveal">
+                <div class="problem-icon">⏰</div>
+                <h3>Отчёты приходят слишком поздно</h3>
+                <p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== SOLUTION ===== -->
+<section class="solution" id="solution">
+    <div class="wrap">
+        <div class="text-center" style="max-width:600px;margin:0 auto 64px;">
+            <p class="section-label reveal">Решение</p>
+            <h2 class="section-title reveal">Один дашборд. Все ключевые цифры.</h2>
+            <p class="section-desc mx-auto reveal" style="margin-bottom:0;">ROI24 собирает данные из ваших источников и показывает 10 метрик, которые нужно смотреть каждое утро.</p>
+        </div>
+        <div class="solution-grid">
+            <div class="solution-card reveal">
+                <div class="sol-icon">⚡</div>
+                <h3>Живые данные</h3>
+                <p>Обновляются автоматически — 1С, CRM, банки, реклама. Не ждите понедельника, смотрите цифры здесь и сейчас.</p>
+            </div>
+            <div class="solution-card reveal">
+                <div class="sol-icon">👁</div>
+                <h3>Видно, где теряете</h3>
+                <p>Цветовые индикаторы: зелёный — норма, жёлтый — внимание, красный — теряете деньги. Понятно без обучения.</p>
+            </div>
+            <div class="solution-card reveal">
+                <div class="sol-icon">📱</div>
+                <h3>С телефона</h3>
+                <p>Собственник смотрит дашборд с телефона каждое утро — за завтраком, в дороге, в постели. Удобно и быстро.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== HOW IT WORKS ===== -->
+<section id="how">
+    <div class="wrap">
+        <div style="display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;">
+            <div>
+                <p class="section-label reveal">Процесс</p>
+                <h2 class="section-title reveal">Как это работает</h2>
+                <p class="section-desc reveal">От звонка до дашборда — 3-5 дней. Вы не участвуете в технических процессах.</p>
+            </div>
+            <div class="timeline">
+                <div class="tl-step reveal">
+                    <div class="tl-dot"><span>1</span></div>
+                    <h3>Брифинг</h3>
+                    <div class="tl-time">30 минут</div>
+                    <p>Звоним, узнаём ваш бизнес, определяем 10 ключевых метрик. Никаких форм — просто звонок.</p>
+                </div>
+                <div class="tl-step reveal">
+                    <div class="tl-dot"><span>2</span></div>
+                    <h3>Подключение источников</h3>
+                    <div class="tl-time">1-2 дня</div>
+                    <p>Подключаем 1С, CRM, онлайн-банки, рекламные кабинеты. Вы не участвуете.</p>
+                </div>
+                <div class="tl-step reveal">
+                    <div class="tl-dot"><span>3</span></div>
+                    <h3>Настройка дашборда</h3>
+                    <div class="tl-time">1-2 дня</div>
+                    <p>Настраиваем дашборд под ваши 10 метрик. Не 50 — только то, что реально нужно.</p>
+                </div>
+                <div class="tl-step reveal">
+                    <div class="tl-dot"><span>4</span></div>
+                    <h3>Демо</h3>
+                    <div class="tl-time">30 минут</div>
+                    <p>Показываем результат. Вносим правки. Вы видите, что работает.</p>
+                </div>
+                <div class="tl-step reveal">
+                    <div class="tl-dot"><span>5</span></div>
+                    <h3>Запуск</h3>
+                    <div class="tl-time">1 день</div>
+                    <p>Даём доступ, обучаем команду. Автоматическое обновление включено. Готово.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== FOR WHOM ===== -->
+<section id="for-whom" style="background:var(--surface);">
+    <div class="wrap">
+        <p class="section-label reveal">Кому подходит</p>
+        <h2 class="section-title reveal">Создан для вашего бизнеса</h2>
+        <div class="bento" style="margin-top:48px;">
+            <div class="bento-card featured reveal">
+                <h3>🛒 Интернет-магазин</h3>
+                <div class="bento-metrics">Конверсия, AOV, CAC, CLV, возвраты, оборачиваемость, выручка по дням, дашборд по товарам</div>
+                <div class="bento-example">Пример: Сеть из 12 онлайн-магазинов, оборот ₽540 млн/год</div>
+            </div>
+            <div class="bento-card reveal">
+                <h3>📊 Услуги / Агентство</h3>
+                <div class="bento-metrics">Пайплайн, маржинальность проектов, загрузка команды, кэшфлоу, NPS клиентов</div>
+                <div class="bento-example">Пример: Маркетинговое агентство, 8 сотрудников</div>
+            </div>
+            <div class="bento-card reveal">
+                <h3>🏭 Производство</h3>
+                <div class="bento-metrics">План/факт, OEE, качество, поставки, себестоимость, оборачиваемость сырья</div>
+                <div class="bento-example">Пример: Производство мебели, 2 цеха, 45 сотрудников</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== COMPARISON ===== -->
+<section class="comparison" id="comparison">
+    <div class="wrap">
+        <div class="text-center" style="margin-bottom:48px;">
+            <p class="section-label reveal">Сравнение</p>
+            <h2 class="section-title reveal">ROI24 vs «как сейчас»</h2>
+        </div>
+        <div style="overflow-x:auto;" class="reveal">
+            <table class="comp-table">
+                <thead>
+                    <tr>
+                        <th style="width:35%;">Параметр</th>
+                        <th>Без ROI24</th>
+                        <th>С ROI24</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Данные</td>
+                        <td>5+ разрозненных источников</td>
+                        <td class="comp-yes">1 дашборд</td>
+                    </tr>
+                    <tr>
+                        <td>Обновление</td>
+                        <td>Ручной ввод, раз в неделю</td>
+                        <td class="comp-yes">Авто, каждый час</td>
+                    </tr>
+                    <tr>
+                        <td>Время на отчёты</td>
+                        <td>3+ часа / неделю</td>
+                        <td class="comp-yes">0 мин</td>
+                    </tr>
+                    <tr>
+                        <td>Актуальность</td>
+                        <td>Данные за прошлую неделю</td>
+                        <td class="comp-yes">Живые данные</td>
+                    </tr>
+                    <tr>
+                        <td>Видно, где теряете</td>
+                        <td class="comp-no">✕ Не видно</td>
+                        <td class="comp-yes">✓ Цветовые сигналы</td>
+                    </tr>
+                    <tr>
+                        <td>Мобильный доступ</td>
+                        <td class="comp-no">Нет</td>
+                        <td class="comp-yes">Да, телефон</td>
+                    </tr>
+                    <tr>
+                        <td>Стоимость в год</td>
+                        <td>100К + зарплата аналитика</td>
+                        <td class="comp-yes">100К + поддержка 20К/мес</td>
+                    </tr>
+                    <tr>
+                        <td>Окупаемость</td>
+                        <td class="comp-no">Не видно</td>
+                        <td class="comp-yes">3–8 месяцев</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</section>
+
+<!-- ===== CASE STUDY ===== -->
+<section id="case">
+    <div class="wrap">
+        <p class="section-label reveal">Кейс</p>
+        <div class="case-card reveal">
+            <div class="case-company">Сеть аптек · 42 точки · Москва и МО</div>
+            <h3>Как «ФармМаркет» нашёл убыточные точки и экономит ₽840 000/мес</h3>
+            <div class="case-grid">
+                <div class="case-block">
+                    <h4>Проблема</h4>
+                    <ul>
+                        <li>Данные в 5 разных системах</li>
+                        <li>Отчёты за неделю — по вторникам</li>
+                        <li>Не знали, какие точки убыточны, до конца месяца</li>
+                    </ul>
+                </div>
+                <div class="case-block">
+                    <h4>Решение</h4>
+                    <ul>
+                        <li>Подключили 1С + CRM + 2 банка + кассы</li>
+                        <li>Настроили 10 KPI на дашборд</li>
+                        <li>Обновление каждого часа</li>
+                    </ul>
+                </div>
+                <div class="case-block">
+                    <h4>Результат</h4>
+                    <ul>
+                        <li>Выявили 3 убыточные точки за 2 недели</li>
+                        <li>Сэкономили ₽840 000/мес</li>
+                        <li>Собственник смотрит дашборд за завтраком</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="case-quote">«ROI24 — единственный инструмент, который дал реальные инсайты, а не просто красивые графики.»</div>
+            <div class="case-author">Алексей Петров, операционный директор «ФармМаркет»</div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== TEAM ===== -->
+<section class="team" id="team">
+    <div class="wrap">
+        <div class="text-center" style="max-width:500px;margin:0 auto 64px;">
+            <p class="section-label reveal">Команда</p>
+            <h2 class="section-title reveal">Кто делает ваш дашборд</h2>
+            <p class="section-desc mx-auto reveal" style="margin-bottom:0;">Реальные люди с опытом в аналитике и рекламе. Не шаблонная команда — каждый проект индивидуален.</p>
+        </div>
+        <div class="team-grid">
+            <div class="team-card reveal">
+                <div class="team-avatar">АН</div>
+                <h3>Алексей Н.</h3>
+                <div class="team-role">Основатель</div>
+                <div class="team-exp">8 лет в бизнес-аналитике. 50+ проектов. Сертификаты 1С, Битрикс24, Яндекс.Директ.</div>
+            </div>
+            <div class="team-card reveal">
+                <div class="team-avatar">ДК</div>
+                <h3>Дмитрий К.</h3>
+                <div class="team-role">Технический директор</div>
+                <div class="team-exp">Data Engineer. PostgreSQL, ClickHouse, API. Подключает любые источники данных.</div>
+            </div>
+            <div class="team-card reveal">
+                <div class="team-avatar">МС</div>
+                <h3>Мария С.</h3>
+                <div class="team-role">Менеджер проектов</div>
+                <div class="team-exp">Переводит с «хочу всё» на «нужно 10 метрик». Работает с бизнесом, а не с кодом.</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== CALCULATOR ===== -->
+<section id="calculator">
+    <div class="wrap">
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;">
+            <div>
+                <p class="section-label reveal">Калькулятор</p>
+                <h2 class="section-title reveal">Сколько теряет <br>ваш бизнес?</h2>
+                <p class="section-desc reveal">Введите данные — увидите, сколько денег уходит на ручные отчёты и потерю данных.</p>
+            </div>
+            <div class="calc-wrap reveal">
+                <div class="calc-field">
+                    <label>Сотрудчиков обрабатывают отчёты</label>
+                    <input type="number" id="calc-people" value="3" min="1" max="100">
+                </div>
+                <div class="calc-field">
+                    <label>Часов в неделю на отчёты (каждый)</label>
+                    <input type="number" id="calc-hours" value="4" min="1" max="40">
+                </div>
+                <div class="calc-field">
+                    <label>Средняя зарплата сотрудника, ₽/мес</label>
+                    <input type="number" id="calc-salary" value="80000" min="10000" step="5000">
+                </div>
+                <div class="calc-result" id="calc-result">
+                    <div class="calc-big" id="calc-result-big">—</div>
+                    <div class="calc-detail" id="calc-result-detail"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== PRICING ===== -->
+<section class="pricing" id="pricing">
+    <div class="wrap">
+        <div class="text-center" style="max-width:600px;margin:0 auto 64px;">
+            <p class="section-label reveal">Тариф</p>
+            <h2 class="section-title reveal">Под ключ за 100 000 ₽</h2>
+            <p class="section-desc mx-auto reveal" style="margin-bottom:0;">Настройка дашборда. Подключение источников. Обучение команды.</p>
+        </div>
+        <div class="price-card reveal">
+            <div class="price-name">Все включено</div>
+            <div class="price-amount">100 000 <span>₽</span></div>
+            <div class="price-sub">Разовый платёж · оплата по договору</div>
+            <ul class="price-features">
+                <li>Подключение 1С / CRM</li>
+                <li>Настройка 10 метрик под ваш бизнес</li>
+                <li>Дизайн дашборда под вашу компанию</li>
+                <li>Обучение команды (2 часа)</li>
+                <li>Поддержка 30 дней включено</li>
+                <li>Обновление источников — бесконечно</li>
+            </ul>
+            <a href="#cta" class="btn btn-accent btn-lg" style="width:100%;">Обсудить проект</a>
+            <div class="price-guarantee">
+                <strong style="color:var(--text);">30-дневная гарантия.</strong> Если дашборд не устроит — вернём деньги за настройку. Работаем по этапам, вы видите результат после каждого шага.
+            </div>
+            <div class="trust-badges">
+                <span class="trust-badge">Данные в РФ</span>
+                <span class="trust-badge">152-ФЗ</span>
+                <span class="trust-badge">SSL</span>
+                <span class="trust-badge">Работаем с НДС</span>
+                <span class="trust-badge">Договор и акты</span>
+                <span class="trust-badge">Поддержка по телефону</span>
+            </div>
+            <p style="margin-top:20px;font-size:0.8125rem;color:var(--text-dim);">
+                После первого месяца — поддержка 20 000 ₽/мес. Или отключите в любой момент.
+            </p>
+        </div>
+    </div>
+</section>
+
+<!-- ===== FAQ ===== -->
+<section id="faq">
+    <div class="wrap">
+        <div class="text-center" style="margin-bottom:48px;">
+            <p class="section-label reveal">Вопросы</p>
+            <h2 class="section-title reveal">Частые вопросы</h2>
+        </div>
+        <div class="faq-list reveal">
+            <div class="faq-item">
+                <div class="faq-q">Почему 100К? Это же дорого.<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес. Вы платите за результат, а не за процесс.</div></div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-q">А если не подойдёт?<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.</div></div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-q">Сколько времени займёт настройка?<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">3-5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.</div></div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-q">А какие данные можно подключить?<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">1С (любая конфигурация), amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки (Сбер, Тинькофф, Альфа), кассы (1С-Рарус, iiko, r_keeper). Если не знаете — напишите, скажем.</div></div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-q">Можно проще? Дешевле?<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">Нет. Потому что «проще» = «не работает». 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
+            </div>
+            <div class="faq-item">
+                <div class="faq-q">Поддержка после запуска?<span class="faq-arrow">+</span></div>
+                <div class="faq-a"><div class="faq-a-inner">30 дней включено в стоимость — правки, донастройка, ответы на вопросы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборд продолжает работать.</div></div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- ===== CTA ===== -->
+<section class="cta-section" id="cta">
+    <div class="wrap">
+        <div class="cta-box reveal">
+            <h2>Узнайте, сколько теряет <br>ваш бизнес каждый месяц</h2>
+            <p>Бесплатный аудит аналитики за 30 минут. Покажем, какие метрики вы упускаете.</p>
+            <div class="cta-actions">
+                <a href="https://t.me/roi24_bot" class="btn btn-accent btn-lg">Написать в Telegram</a>
+                <a href="tel:+74951234567" class="btn btn-outline btn-lg">+7 (495) 123-45-67</a>
+            </div>
+            <form class="cta-mini-form" onsubmit="return false;">
+                <input type="text" placeholder="Ваше имя" aria-label="Ваше имя">
+                <input type="tel" placeholder="Телефон" aria-label="Телефон">
+                <button class="btn btn-accent" type="submit">Отправить</button>
+            </form>
+        </div>
+    </div>
+</section>
+
+</main>
+
+<!-- ===== FOOTER ===== -->
+<footer class="footer">
+    <div class="wrap">
+        <div class="footer-grid">
+            <div>
+                <div class="logo" style="margin-bottom:16px;">ROI<span>24</span></div>
+                <p>Автоматизированные дашборды для собственников бизнеса. Живые цифры из 1С, CRM и банков.</p>
+            </div>
+            <div>
+                <h4>Контакты</h4>
+                <p>
+                    <a href="tel:+74951234567">+7 (495) 123-45-67</a><br>
+                    <a href="mailto:info@roi24.ru">info@roi24.ru</a><br>
+                    <a href="https://t.me/roi24_bot">Telegram-бот</a>
+                </p>
+            </div>
+            <div>
+                <h4>Решение</h4>
+                <p>
+                    <a href="#solution">О решении</a><br>
+                    <a href="#demo">Пример дашборда</a><br>
+                    <a href="#pricing">Тариф</a><br>
+                    <a href="#faq">FAQ</a><br>
+                    <a href="#cta">Контакты</a>
+                </p>
+            </div>
+            <div>
+                <h4>Юридическое</h4>
+                <p>
+                    ИНН: 7712345678<br>
+                    ОГРН: 1177746123456<br>
+                    <a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Политика конфиденциальности</a><br>
+                    <a href="#" onclick="return false;">Публичная оферта</a>
+                </p>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>© 2026 ROI24. Все права защищены. Не является публичной офертой. Данные обрабатываются на серверах в РФ (152-ФЗ).</p>
+            <div class="footer-links">
+                <a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Конфиденциальность</a>
+                <a href="#" onclick="return false;">Оферта</a>
+                <a href="tel:+74951234567">+7 (495) 123-45-67</a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- Fixed Telegram button -->
+<a href="https://t.me/roi24_bot" class="tg-float" aria-label="Написать в Telegram">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.027-1.627 4.476-1.635z"/></svg>
+</a>
+
+<!-- Cookie Banner -->
+<div class="cookie-banner" id="cookie-banner">
+    <p>Мы используем файлы cookie для аналитики и улучшения сервиса. <a href="#" onclick="document.getElementById('privacy-modal').classList.add('show');return false;">Подробнее</a></p>
+    <button class="cookie-close" id="cookie-close">Принять</button>
+</div>
+
+<!-- Privacy Policy Modal -->
+<div class="modal-overlay" id="privacy-modal" onclick="if(event.target===this)this.classList.remove('show')">
+    <div class="modal-box">
+        <h2>Политика конфиденциальности</h2>
+        <p>Настоящая Политика конфиденциальностиPersonal Data обрабатывается в соответствии с Федеральным законом №152-ФЗ «О персональных данных».</p>
+        <p>1. Мы собираем: имя, номер телефона, email — исключительно для связи по запросу.</p>
+        <p>2. Данные хранятся на серверах, расположенных на территории Российской Федерации.</p>
+        <p>3. Мы не передаём данные третьим лицам, за исключением случаев, предусмотренных законодательством РФ.</p>
+        <p>4. Вы вправе запросить удаление ваших данных, направив письмо на info@roi24.ru.</p>
+        <p>5. Файлы cookie используются исключительно для аналитики (Яндекс.Метрика).</p>
+        <button class="modal-close" onclick="document.getElementById('privacy-modal').classList.remove('show')">Закрыть</button>
+    </div>
+</div>
+
+<!-- GSAP + ScrollTrigger -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+<!-- ECharts -->
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
+
+<script>
+(function() {
+    'use strict';
+
+    /* ==========================================================
+       HEADER SCROLL
+       ========================================================== */
+    const header = document.getElementById('header');
+    let lastScroll = 0;
+    window.addEventListener('scroll', function() {
+        header.classList.toggle('scrolled', window.scrollY > 50);
+    }, { passive: true });
+
+    /* ==========================================================
+       FAQ ACCORDION
+       ========================================================== */
+    document.querySelectorAll('.faq-q').forEach(function(q) {
+        q.addEventListener('click', function() {
+            var item = this.parentElement;
+            var answer = item.querySelector('.faq-a');
+            var isOpen = item.classList.contains('open');
+
+            // Close all
+            document.querySelectorAll('.faq-item').forEach(function(fi) {
+                fi.classList.remove('open');
+                fi.querySelector('.faq-a').style.maxHeight = '0';
             });
 
-            // Simple Hover Effect for Metric Cards
-            const cards = document.querySelectorAll('.metric-card');
-            cards.forEach(card => {
-                card.addEventListener('mouseenter', () => {
-                    card.style.borderColor = 'var(--accent)';
-                });
-                card.addEventListener('mouseleave', () => {
-                    card.style.borderColor = 'var(--border)';
-                });
-            });
+            if (!isOpen) {
+                item.classList.add('open');
+                answer.style.maxHeight = answer.scrollHeight + 'px';
+            }
         });
-    </script>
+    });
+
+    /* ==========================================================
+       COOKIE BANNER
+       ========================================================== */
+    if (!localStorage.getItem('roi24_cookie')) {
+        setTimeout(function() {
+            document.getElementById('cookie-banner').classList.add('show');
+        }, 1500);
+    }
+    document.getElementById('cookie-close').addEventListener('click', function() {
+        document.getElementById('cookie-banner').classList.remove('show');
+        localStorage.setItem('roi24_cookie', '1');
+    });
+
+    /* ==========================================================
+       REVEAL ON SCROLL (IntersectionObserver)
+       ========================================================== */
+    var reveals = document.querySelectorAll('.reveal');
+    if ('IntersectionObserver' in window) {
+        var observer = new IntersectionObserver(function(entries) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+        reveals.forEach(function(el) { observer.observe(el); });
+    } else {
+        reveals.forEach(function(el) { el.classList.add('visible'); });
+    }
+
+    /* ==========================================================
+       COUNTER ANIMATION
+       ========================================================== */
+    var counters = document.querySelectorAll('.counter');
+    var counterDone = false;
+    var numbersSection = document.getElementById('numbers');
+
+    function animateCounters() {
+        if (counterDone) return;
+        counterDone = true;
+        counters.forEach(function(counter) {
+            var target = parseFloat(counter.dataset.target);
+            var isDecimal = counter.dataset.decimal === '1';
+            var duration = 1500;
+            var start = 0;
+            var startTime = null;
+
+            function step(timestamp) {
+                if (!startTime) startTime = timestamp;
+                var progress = Math.min((timestamp - startTime) / duration, 1);
+                // easeOutExpo
+                var eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+                var current = eased * target;
+                counter.textContent = isDecimal ? current.toFixed(1) : Math.floor(current);
+                if (progress < 1) requestAnimationFrame(step);
+            }
+            requestAnimationFrame(step);
+        });
+    }
+
+    if ('IntersectionObserver' in window) {
+        var counterObs = new IntersectionObserver(function(entries) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    animateCounters();
+                    counterObs.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        counterObs.observe(numbersSection);
+    }
+
+    /* ==========================================================
+       CALCULATOR
+       ========================================================== */
+    var calcPeople = document.getElementById('calc-people');
+    var calcHours = document.getElementById('calc-hours');
+    var calcSalary = document.getElementById('calc-salary');
+    var calcResult = document.getElementById('calc-result');
+    var calcResultBig = document.getElementById('calc-result-big');
+    var calcResultDetail = document.getElementById('calc-result-detail');
+
+    function calc() {
+        var people = parseInt(calcPeople.value) || 0;
+        var hours = parseInt(calcHours.value) || 0;
+        var salary = parseInt(calcSalary.value) || 0;
+
+        if (people && hours && salary) {
+            var hoursPerMonth = hours * 4.33;
+            var salaryPerHour = salary / 168;
+            var annualCost = Math.round(hoursPerMonth * salaryPerHour * 12 * people);
+            var monthlyCost = Math.round(annualCost / 12);
+
+            calcResultBig.textContent = '₽' + annualCost.toLocaleString('ru-RU') + ' / год';
+            calcResultDetail.textContent = 'Это примерно ₽' + monthlyCost.toLocaleString('ru-RU') + ' в месяц. ROI24 окупается за 3-8 месяцев.';
+            calcResult.classList.add('show');
+        } else {
+            calcResult.classList.remove('show');
+        }
+    }
+
+    calcPeople.addEventListener('input', calc);
+    calcHours.addEventListener('input', calc);
+    calcSalary.addEventListener('input', calc);
+
+    /* ==========================================================
+       DASHBOARD PREVIEW — ECharts
+       ========================================================== */
+    if (typeof echarts !== 'undefined') {
+        var chartRevenue = null;
+        var chartChannels = null;
+
+        var SEGMENTS = {
+            ecom: {
+                kpis: [
+                    { label: 'Выручка', value: '4.2М ₽', trend: 'up', trendTxt: '+12%' },
+                    { label: 'Маржа', value: '23%', trend: 'up', trendTxt: '+3%' },
+                    { label: 'Касса', value: '1.8М ₽', trend: 'up', trendTxt: '+8%' },
+                    { label: 'Дебиторка', value: '890K ₽', trend: 'down', trendTxt: '-5%' }
+                ],
+                revenue: {
+                    labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+                    data: [3.1,3.4,3.2,3.6,3.8,3.5,3.9,4.0,3.9,4.2,3.7,4.2]
+                },
+                channels: {
+                    labels: ['SEO','Контекст','Прямой','Email','Маркетплейсы'],
+                    data: [35,28,22,8,7]
+                }
+            },
+            services: {
+                kpis: [
+                    { label: 'Выручка', value: '1.8М ₽', trend: 'up', trendTxt: '+8%' },
+                    { label: 'Маржа', value: '41%', trend: 'up', trendTxt: '+2%' },
+                    { label: 'Пайплайн', value: '5.2М ₽', trend: 'up', trendTxt: '+15%' },
+                    { label: 'Win Rate', value: '32%', trend: 'up', trendTxt: '+4%' }
+                ],
+                revenue: {
+                    labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+                    data: [1.4,1.5,1.3,1.6,1.7,1.6,1.5,1.8,1.9,1.8,1.7,1.8]
+                },
+                channels: {
+                    labels: ['Рефералы','SEO','Контент','Прямой','Реклама'],
+                    data: [40,25,18,12,5]
+                }
+            },
+            production: {
+                kpis: [
+                    { label: 'Выпуск', value: '12K шт', trend: 'up', trendTxt: '+5%' },
+                    { label: 'OEE', value: '78%', trend: 'up', trendTxt: '+3%' },
+                    { label: 'Себестоимость', value: '₽2 400', trend: 'down', trendTxt: '-2%' },
+                    { label: 'Брак', value: '1.2%', trend: 'down', trendTxt: '-0.3%' }
+                ],
+                revenue: {
+                    labels: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+                    data: [2.8,2.9,3.0,3.1,3.2,3.0,3.3,3.4,3.2,3.5,3.3,3.6]
+                },
+                channels: {
+                    labels: ['Оптовик А','Оптовик Б','Ритейл','Прямые','Экспорт'],
+                    data: [35,25,20,12,8]
+                }
+            }
+        };
+
+        function renderKpis(seg) {
+            var container = document.getElementById('dash-kpis');
+            var html = '';
+            seg.kpis.forEach(function(k) {
+                var arrow = k.trend === 'up' ? '↑' : '↓';
+                var cls = k.trend === 'up' ? 'trend-up' : 'trend-down';
+                html += '<div class="dash-kpi">'
+                    + '<div class="dash-kpi-label">' + k.label + '</div>'
+                    + '<div class="dash-kpi-value">' + k.value + '</div>'
+                    + '<div class="dash-kpi-trend ' + cls + '">'
+                    + '<span>' + arrow + ' ' + k.trendTxt + '</span>'
+                    + '</div></div>';
+            });
+            container.innerHTML = html;
+        }
+
+        function buildRevenueChart(data) {
+            return {
+                tooltip: { trigger: 'axis', backgroundColor: '#161618', borderColor: '#222', textStyle: { color: '#f5f5f5', fontSize: 11 } },
+                grid: { left: 12, right: 12, top: 12, bottom: 4, containLabel: true },
+                xAxis: {
+                    type: 'category', data: data.labels,
+                    axisLine: { lineStyle: { color: '#1e1e22' } },
+                    axisLabel: { color: '#52525b', fontSize: 9 }
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: { lineStyle: { color: '#1a1a1e' } },
+                    axisLabel: { color: '#52525b', fontSize: 9, formatter: v => (v >= 1 ? v.toFixed(0) + 'М' : v.toFixed(0) + 'М') }
+                },
+                series: [{
+                    type: 'line', data: data.data, smooth: 0.4, symbol: 'none',
+                    lineStyle: { width: 2, color: '#22c55e' },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(34,197,94,0.2)' },
+                            { offset: 1, color: 'rgba(34,197,94,0.02)' }
+                        ])
+                    }
+                }],
+                animationDuration: 600
+            };
+        }
+
+        function buildChannelsChart(data) {
+            return {
+                tooltip: { trigger: 'axis', backgroundColor: '#161618', borderColor: '#222', textStyle: { color: '#f5f5f5', fontSize: 11 } },
+                grid: { left: 12, right: 12, top: 12, bottom: 4, containLabel: true },
+                xAxis: {
+                    type: 'value',
+                    splitLine: { lineStyle: { color: '#1a1a1e' } },
+                    axisLabel: { color: '#52525b', fontSize: 9 }
+                },
+                yAxis: {
+                    type: 'category', data: data.labels,
+                    axisLine: { lineStyle: { color: '#1e1e22' } },
+                    axisLabel: { color: '#52525b', fontSize: 9 }
+                },
+                series: [{
+                    type: 'bar', data: data.data, barWidth: 14,
+                    itemStyle: {
+                        borderRadius: [0, 4, 4, 0],
+                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                            { offset: 0, color: '#22c55e' },
+                            { offset: 1, color: 'rgba(34,197,94,0.3)' }
+                        ])
+                    }
+                }],
+                animationDuration: 600
+            };
+        }
+
+        function setSegment(key) {
+            var seg = SEGMENTS[key];
+            if (!seg) return;
+
+            // Update active button
+            document.querySelectorAll('.dash-seg-btn').forEach(function(b) {
+                b.classList.toggle('active', b.dataset.seg === key);
+            });
+
+            // Update KPIs
+            renderKpis(seg);
+
+            // Revenue chart
+            if (!chartRevenue) chartRevenue = echarts.init(document.getElementById('chart-revenue'));
+            chartRevenue.clear();
+            chartRevenue.setOption(buildRevenueChart(seg.revenue));
+
+            // Channels chart
+            if (!chartChannels) chartChannels = echarts.init(document.getElementById('chart-channels'));
+            chartChannels.clear();
+            chartChannels.setOption(buildChannelsChart(seg.channels));
+        }
+
+        // Segment button event delegation
+        document.querySelector('.dash-segments').addEventListener('click', function(e) {
+            var btn = e.target.closest('.dash-seg-btn');
+            if (btn) setSegment(btn.dataset.seg);
+        });
+
+        // Initial render
+        setSegment('ecom');
+
+        // Resize charts on window resize
+        window.addEventListener('resize', function() {
+            if (chartRevenue) chartRevenue.resize();
+            if (chartChannels) chartChannels.resize();
+        });
+    }
+
+    /* ==========================================================
+       SMOOTH SCROLL for anchor links
+       ========================================================== */
+    document.querySelectorAll('a[href^="#"]').forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            var target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                e.preventDefault();
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        });
+    });
+
+})();
+</script>
+
+<!-- JSON-LD Structured Data -->
+<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "ROI24",
+    "description": "Автоматизированные дашборды для собственников бизнеса",
+    "url": "https://roi24.ru",
+    "telephone": "+7-495-123-45-67",
+    "email": "info@roi24.ru",
+    "address": {
+        "@type": "PostalAddress",
+        "addressCountry": "RU"
+    }
+}
+</script>
+
 </body>
 </html>