Files
roi24/index_ibm.html
T

1496 lines
70 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROI24 — Данные. Без шума.</title>
<meta name="description" content="Один дашборд. Все ключевые цифры. Подключаем 1С, CRM, банки и рекламу.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
IBM DESIGN LANGUAGE — LIGHT & DARK THEMES
============================================================ */
[data-theme="dark"] {
--bg: #050507;
--surface: #0c0c0f;
--card: #111115;
--text: #f0f0f2;
--text-sec: #71717a;
--text-dim: #3f3f46;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.16);
--accent: #22c55e;
--accent-dim: rgba(34,197,94,0.08);
--accent-glow: rgba(34,197,94,0.25);
--blue: #3b82f6;
--blue-dim: rgba(59,130,246,0.08);
--amber: #f59e0b;
--amber-dim: rgba(245,158,11,0.08);
--red: #ef4444;
--red-dim: rgba(239,68,68,0.08);
--grid-opacity: 0.025;
--shadow-card: none;
--shadow-card-hover: none;
--dash-shadow: none;
--dash-glow-opacity: 0.06;
--nav-glass: rgba(5,5,7,0.7);
--nav-scrolled: rgba(5,5,7,0.92);
}
[data-theme="light"] {
--bg: #f4f4f4;
--surface: #ffffff;
--card: #fafafa;
--text: #161616;
--text-sec: #5b5b5b;
--text-dim: #8d8d8d;
--border: rgba(0,0,0,0.08);
--border-strong: rgba(0,0,0,0.16);
--accent: #0f62fe;
--accent-dim: rgba(15,98,254,0.06);
--accent-glow: rgba(15,98,254,0.15);
--blue: #0052cc;
--blue-dim: rgba(0,82,204,0.06);
--amber: #f7b32c;
--amber-dim: rgba(247,179,44,0.06);
--red: #da1e28;
--red-dim: rgba(218,30,40,0.06);
--grid-opacity: 0.03;
--shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.12);
--shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.16);
--dash-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.12);
--dash-glow-opacity: 0;
--nav-glass: rgba(244,244,244,0.85);
--nav-scrolled: rgba(255,255,255,0.95);
}
*, *::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.5; overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
:root {
--font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
--mono: 'IBM Plex Mono', 'SF Mono', monospace;
--grid: 8px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body::before {
content: ''; position: fixed; inset: 0; z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,var(--grid-opacity)) 1px, transparent 1px);
background-size: calc(var(--grid) * 12) calc(var(--grid) * 12);
}
[data-theme="light"] body::before {
background-image:
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
body::after {
content: ''; position: fixed; inset: 0; z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 60% 40% at 50% 20%, rgba(34,197,94,0.04) 0%, transparent 100%),
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(59,130,246,0.03) 0%, transparent 100%);
}
[data-theme="light"] body::after {
background:
radial-gradient(ellipse 60% 40% at 30% 10%, rgba(15,98,254,0.03) 0%, transparent 100%),
radial-gradient(ellipse 40% 30% at 70% 80%, rgba(247,179,44,0.02) 0%, transparent 100%);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
section { padding: 120px 0; position: relative; z-index: 1; }
.section-label {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--accent);
margin-bottom: 16px; font-weight: 600;
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
display: inline-flex; align-items: center; gap: 10px;
}
.section-label::after {
content: ''; flex: 0 0 auto; width: 24px; height: 1px;
background: var(--accent); opacity: 0.5;
}
.section-title {
font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700;
letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
}
/* ── HEADER ── */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 64px; display: flex; align-items: center;
background: var(--nav-glass); backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid transparent;
transition: all 0.4s var(--ease-out);
}
.header.scrolled {
background: var(--nav-scrolled);
border-bottom-color: var(--border);
}
[data-theme="light"] .header.scrolled { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.header .wrap {
display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.logo {
font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em;
display: flex; align-items: center; gap: 10px;
}
.logo-mark {
width: 32px; height: 32px; border-radius: 6px;
background: var(--accent); display: flex; align-items: center;
justify-content: center; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
font-size: 0.8125rem; font-weight: 700; color: #fff;
transition: transform 0.3s var(--ease-out);
}
[data-theme="dark"] .logo-mark { color: #000; }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
.nav { display: flex; align-items: center; gap: 40px; }
.nav a {
font-size: 0.8125rem; color: var(--text-sec);
transition: color 0.2s; letter-spacing: 0.01em; position: relative;
}
.nav a::after {
content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
height: 1px; background: var(--accent); transition: width 0.3s var(--ease-out);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
font-size: 0.8125rem; color: var(--text-sec); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
transition: color 0.2s;
}
.header-phone:hover { color: var(--text); }
.theme-toggle {
width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border);
background: transparent; cursor: pointer; display: flex; align-items: center;
justify-content: center; color: var(--text-sec); transition: all 0.3s var(--ease-out);
flex-shrink: 0;
}
.theme-toggle:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 10px 20px; border-radius: 4px;
font-weight: 600; font-size: 0.8125rem; cursor: pointer;
border: none; transition: all 0.3s var(--ease-out);
letter-spacing: 0.01em; position: relative; overflow: hidden;
}
.btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
opacity: 0; transition: opacity 0.3s;
}
.btn:hover::before { opacity: 1; }
.btn-accent {
background: var(--accent); color: #000; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
[data-theme="light"] .btn-accent { color: #fff; }
.btn-accent:hover { background: #16a34a; transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-dim); }
.btn-outline {
background: transparent; border: 1px solid var(--border-strong); color: var(--text);
}
.btn-outline:hover { border-color: var(--text); background: rgba(128,128,128,0.05); }
.btn-lg { padding: 14px 28px; font-size: 0.875rem; }
/* ── HERO ── */
.hero {
padding: 160px 0 80px; min-height: 90vh;
display: flex; align-items: center;
border-bottom: 1px solid var(--border);
position: relative;
}
.hero-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
.hero-left { padding-top: 20px; }
.hero-label {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.2em; color: var(--accent);
margin-bottom: 24px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
display: flex; align-items: center; gap: 8px;
}
.hero-label::before { content: ''; width: 16px; height: 1px; background: var(--accent); }
h1 {
font-size: clamp(3rem, 6vw, 5rem); font-weight: 700;
letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 24px;
background: linear-gradient(135deg, var(--text) 45%, var(--accent) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
}
.hero-sub {
font-size: 1.125rem; color: var(--text-sec);
margin-bottom: 40px; max-width: 440px; line-height: 1.65;
}
.hero-tagline {
font-size: 1rem; font-weight: 600;
margin-bottom: 32px; line-height: 1.5;
max-width: 440px;
color: rgba(255,255,255,0.85);
}
[data-theme="light"] .hero-tagline {
color: #161616;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta {
margin-top: 48px; padding-top: 32px;
border-top: 1px solid var(--border);
display: flex; gap: 48px;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero-meta-value {
font-size: 1.75rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.03em;
}
.hero-meta-label {
font-size: 0.75rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.08em;
}
/* ── DASHBOARD PANEL ── */
.hero-right {
border: 1px solid var(--border);
background: var(--surface);
position: relative;
box-shadow: var(--dash-shadow);
transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), transform 0.1s;
transform-style: preserve-3d;
perspective: 1000px;
}
.hero-right.tilt-active {
animation: none;
transition: transform 0.15s var(--ease-out), box-shadow 0.3s var(--ease-out);
box-shadow: 0 20px 60px rgba(34,197,94,0.08), 0 0 1px var(--border);
}
.hero-right.tilt-active .dash-glow { opacity: calc(var(--dash-glow-opacity) * 1.8); }
.dash-glow {
position: absolute; top: -40%; left: -20%; width: 140%; height: 140%;
background: radial-gradient(circle, var(--accent), transparent 50%);
pointer-events: none; opacity: var(--dash-glow-opacity);
transition: opacity 0.6s var(--ease-out);
filter: blur(60px);
}
.hero-right:hover .dash-glow { opacity: calc(var(--dash-glow-opacity) * 2.5); }
.dash-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; border-bottom: 1px solid var(--border);
position: relative; z-index: 1;
}
.dash-brand {
font-size: 0.6875rem; font-weight: 500; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;
}
.dash-brand svg { flex-shrink: 0; }
.dash-status {
display: flex; align-items: center; gap: 6px;
font-size: 0.6875rem; color: var(--accent); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
.dash-dot {
width: 6px; height: 6px; background: var(--accent);
border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse {
0%,100% { opacity:1; box-shadow: 0 0 0 0 var(--accent-glow); }
50% { opacity:0.3; box-shadow: 0 0 0 4px transparent; }
}
.dash-clock {
font-size: 0.625rem; color: var(--text-dim); font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: 0.05em;
}
.dash-clock .clock-time { color: var(--text-sec); }
/* ── DASHBOARD BODY ── */
.dash-body { position: relative; z-index: 1; }
/* Permanent row: profit + turnover */
.dash-perm {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dash-perm-left { text-align: left; }
.dash-perm-right { text-align: right; }
.dash-perm-label {
font-size: 0.625rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 4px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
.dash-perm-value {
font-size: 1.75rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.03em; line-height: 1.1;
}
.dash-perm-value .accent { color: var(--accent); }
.dash-perm-sub {
font-size: 0.75rem; color: var(--text-sec);
margin-top: 2px;
}
/* Permanent row: cash + debt */
.dash-perm-row {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.dash-perm-cell {
padding: 14px 24px;
border-right: 1px solid var(--border);
}
.dash-perm-cell:last-child { border-right: none; }
.dash-perm-cell .dash-perm-label {
font-size: 0.5625rem; margin-bottom: 2px;
}
.dash-perm-cell .dash-perm-value {
font-size: 1.125rem;
}
/* Tab bar */
.dash-tabs {
display: flex; border-bottom: 1px solid var(--border);
padding: 0 8px;
}
.dash-tab {
flex: 1; padding: 12px 16px; border: none; background: transparent;
font-size: 0.75rem; color: var(--text-dim); cursor: pointer;
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: 0.08em; transition: all 0.3s var(--ease-out);
border-right: 1px solid var(--border); position: relative;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 500;
}
.dash-tab:last-child { border-right: none; }
.dash-tab::before {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: var(--accent);
transform: scaleX(0); transition: transform 0.3s var(--ease-out);
}
.dash-tab.active, .dash-tab:hover {
background: var(--accent-dim); color: var(--accent);
}
.dash-tab.active::before, .dash-tab:hover::before { transform: scaleX(1); }
.dash-tab svg.spark-tab {
width: 32px; height: 12px; flex-shrink: 0;
}
/* Tab content */
.dash-tab-content { position: relative; overflow: hidden; }
.dash-tab-panel {
padding: 0;
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.dash-tab-panel.hidden {
display: none;
}
/* Big values row */
.dash-big {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.dash-big-cell {
padding: 28px 24px;
border-right: 1px solid var(--border);
text-align: left;
}
.dash-big-cell:last-child { border-right: none; }
.dash-big-label {
font-size: 0.625rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
.dash-big-value {
font-size: 2.7rem; font-weight: 700;
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
line-height: 1; display: flex; align-items: baseline; gap: 8px;
}
.dash-big-value .accent { color: var(--accent); }
.dash-big-value .count-up { display: inline-block; }
.dash-big-desc {
font-size: 0.6875rem; font-weight: 600;
margin-top: 4px; line-height: 1.4;
color: #000;
}
[data-theme="light"] .dash-big-desc {
color: #000;
}
[data-theme="dark"] .dash-big-desc {
color: #f0f0f2;
}
/* Mini cells row */
.dash-tri { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.dash-mini {
padding: 20px 16px; border-right: 1px solid var(--border); text-align: center;
position: relative; overflow: hidden;
}
.dash-mini:last-child { border-right: none; }
.dash-mini-label {
font-size: 0.625rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 8px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
position: relative; z-index: 1;
}
.dash-mini-value {
font-size: 1.25rem; font-weight: 600; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
margin-bottom: 4px; position: relative; z-index: 1;
transition: color 0.4s var(--ease-out), transform 0.3s var(--ease-out);
}
.dash-mini-desc {
font-size: 0.6875rem; font-weight: 600;
position: relative; z-index: 1;
color: #000;
}
[data-theme="light"] .dash-mini-desc {
color: #000;
}
[data-theme="dark"] .dash-mini-desc {
color: #f0f0f2;
}
.dash-mini-bar {
height: 3px; border-radius: 2px;
background: var(--border); overflow: hidden; margin-top: 8px;
position: relative; z-index: 1;
}
.dash-mini-fill {
height: 100%; border-radius: 2px; background: var(--accent);
width: 0; transition: width 1.2s var(--ease-out), background 0.4s;
position: relative; z-index: 1;
}
/* Sparkline bg in mini cells */
.dash-mini-spark {
position: absolute; bottom: 0; left: 0; right: 0;
height: 16px; opacity: 0.15; pointer-events: none;
}
/* ── MANIFESTO ── */
.manifesto { padding: 160px 0; border-bottom: 1px solid var(--border); }
.manifesto-inner {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: center;
}
.manifesto-number {
font-size: 8rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.05em; line-height: 0.9; color: var(--text-dim);
}
.manifesto-number .accent { color: var(--accent); }
.manifesto-content h2 {
font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 700;
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 24px;
}
.manifesto-content p {
font-size: 1rem; color: var(--text-sec); line-height: 1.7;
margin-bottom: 16px; max-width: 480px;
}
/* ── PROBLEMS ── */
.problem-card {
padding: 40px 32px; border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: relative; transition: all 0.4s var(--ease-out);
display: flex; gap: 32px; align-items: flex-start;
background: var(--surface);
}
.problem-card:nth-child(3n) { border-right: none; }
.problem-card:nth-last-child(-n+3) { border-bottom: none; }
.problem-card:hover { background: var(--accent-dim); }
.problem-icon {
flex-shrink: 0; width: 80px; height: 80px;
border: 1px solid rgba(239,68,68,0.15); border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--red); opacity: 0.7; transition: all 0.4s var(--ease-out);
background: var(--red-dim);
}
.problem-card:hover .problem-icon {
opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 4px var(--red-dim);
}
.problem-icon svg { width: 36px; height: 36px; stroke-width: 1.2; }
.problem-body { display: flex; flex-direction: column; gap: 12px; }
.problem-num {
font-size: 0.6875rem; color: var(--text-dim);
font-family: 'IBM Plex Mono', 'SF Mono', monospace; letter-spacing: 0.05em;
}
.problem-card h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.problem-card p { font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6; max-width: 400px; }
/* ── SOLUTION ── */
.solution-section { border-bottom: 1px solid var(--border); }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sol-card {
padding: 48px 32px; border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: all 0.4s var(--ease-out); position: relative;
background: var(--surface); box-shadow: var(--shadow-card);
}
.sol-card:nth-child(3n) { border-right: none; }
.sol-card:nth-last-child(-n+3) { border-bottom: none; }
.sol-card:hover {
background: var(--accent-dim); transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.sol-icon {
width: 80px; height: 80px; border: 2px solid var(--accent);
border-radius: 16px; display: flex; align-items: center;
justify-content: center; margin-bottom: 28px;
transition: all 0.3s var(--ease-out); background: var(--accent-dim);
}
.sol-card:hover .sol-icon { transform: scale(1.05); box-shadow: 0 0 0 4px var(--accent-dim); }
.sol-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.sol-card p { font-size: 0.875rem; color: var(--text-sec); line-height: 1.6; }
/* ── COMPARISON ── */
.comparison { background: var(--surface); border-bottom: 1px solid var(--border); }
.comp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.comp-table thead th {
text-align: left; padding: 20px 24px; font-weight: 500; font-size: 0.6875rem;
color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em;
border-bottom: 1px solid var(--border-strong);
}
.comp-table thead th:last-child { color: var(--accent); }
.comp-table tbody td {
padding: 18px 24px; border-bottom: 1px solid var(--border);
color: var(--text-sec); transition: background 0.2s;
}
.comp-table tbody tr:hover td { background: rgba(128,128,128,0.03); }
.comp-yes { color: var(--accent); font-weight: 600; }
.comp-no { color: var(--text-dim); }
/* ── STEPS ── */
.steps { border-bottom: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.step {
padding: 32px 24px; border-right: 1px solid var(--border);
position: relative; transition: all 0.3s var(--ease-out);
}
.step:last-child { border-right: none; }
.step:hover { background: var(--accent-dim); }
.step-num {
font-size: 2.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
color: var(--accent); letter-spacing: -0.03em; margin-bottom: 16px; line-height: 1; opacity: 0.6;
transition: opacity 0.3s;
}
.step:hover .step-num { opacity: 1; }
.step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.step p { font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6; }
.step-time { font-size: 0.6875rem; color: var(--text-dim); font-family: 'IBM Plex Mono', 'SF Mono', monospace; margin-top: 12px; }
/* ── PRICING ── */
.pricing { border-bottom: 1px solid var(--border); }
.price-cards { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.price-card {
flex: 1; min-width: 280px; max-width: 380px;
border: 1px solid var(--border-strong); padding: 48px 32px;
text-align: center; position: relative;
transition: all 0.4s var(--ease-out);
background: var(--surface); box-shadow: var(--shadow-card);
}
.price-card.featured { flex: 1.3; max-width: 420px; }
.price-card:hover {
border-color: var(--accent); box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
}
.price-card.featured::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--accent);
}
.price-card.economy::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--blue);
}
.price-card.economy { border-color: var(--blue-dim); }
.price-card.economy:hover { border-color: var(--blue); box-shadow: 0 8px 32px rgba(59,130,246,0.08), 0 0 1px var(--blue); }
.price-name {
font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.15em; color: var(--text-dim);
font-family: 'IBM Plex Mono', 'SF Mono', monospace; margin-bottom: 24px;
}
.price-amount {
font-size: 3.5rem; font-weight: 700; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
letter-spacing: -0.04em; margin-bottom: 8px; transition: color 0.3s;
}
.price-amount .unit { font-size: 0.25em; color: var(--text-sec); font-weight: 400; }
.price-sub { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 32px; line-height: 1.6; }
.price-features { text-align: left; margin-bottom: 32px; }
.price-features li {
padding: 10px 0; border-bottom: 1px solid var(--border);
font-size: 0.8125rem; color: var(--text-sec);
display: flex; align-items: flex-start; gap: 10px; transition: color 0.2s;
}
.price-features li:hover { color: var(--text); }
.price-features li::before {
content: ''; display: inline-block; width: 16px; height: 16px;
flex-shrink: 0; margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 13.5l-5-5 1.4-1.4L6.5 10.7l5.6-5.6 1.4 1.4z' fill='%2322c55e'/%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat;
}
.price-cta { margin-top: 8px; }
.price-guarantee {
margin-top: 24px; font-size: 0.75rem; color: var(--text-dim); font-style: italic;
}
/* ── FAQ ── */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 0; cursor: pointer; font-size: 1rem;
font-weight: 600; letter-spacing: -0.01em; transition: color 0.2s;
user-select: none;
}
.faq-q:hover { color: var(--accent); }
.faq-q::after {
content: '+'; font-family: 'IBM Plex Mono', 'SF Mono', monospace; font-size: 1.5rem;
color: var(--text-dim); transition: all 0.4s var(--ease-spring);
flex-shrink: 0; margin-left: 16px; width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px; border: 1px solid var(--border);
}
.faq-item.open .faq-q::after {
transform: rotate(45deg); color: var(--accent); border-color: var(--accent);
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out); }
.faq-item.open .faq-a { max-height: 500px; }
.faq-a-inner {
padding: 0 0 24px; font-size: 0.875rem; color: var(--text-sec);
line-height: 1.7;
opacity: 0; transform: translateY(-8px);
transition: opacity 0.4s var(--ease-out) 0.1s, transform 0.4s var(--ease-out) 0.1s;
}
.faq-item.open .faq-a-inner { opacity: 1; transform: translateY(0); }
/* ── FOOTER ── */
.footer {
padding: 64px 0; border-top: 1px solid var(--border);
font-size: 0.75rem; color: var(--text-dim);
}
.footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h4 {
font-size: 0.6875rem; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--text-sec);
margin-bottom: 16px; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
}
.footer-col a, .footer-col p {
display: block; color: var(--text-dim);
margin-bottom: 8px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
margin-top: 48px; padding-top: 24px;
border-top: 1px solid var(--border);
display: flex; justify-content: space-between;
}
/* ── ANIMATIONS ── */
.reveal {
opacity: 0; transform: translateY(28px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.hero-left > * {
opacity: 0; transform: translateY(20px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.hero-left.loaded > * { opacity: 1; transform: translateY(0); }
.hero-left.loaded > *:nth-child(1) { transition-delay: 0.1s; }
.hero-left.loaded > *:nth-child(2) { transition-delay: 0.2s; }
.hero-left.loaded > *:nth-child(3) { transition-delay: 0.3s; }
.hero-left.loaded > *:nth-child(4) { transition-delay: 0.4s; }
.hero-left.loaded > *:nth-child(5) { transition-delay: 0.5s; }
.hero-left.loaded > *:nth-child(6) { transition-delay: 0.6s; }
.hero-right {
opacity: 0; transform: translateX(30px);
transition: opacity 0.8s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s,
box-shadow 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.hero-right.loaded { opacity: 1; transform: translateX(0); }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.hero-right { max-width: 600px; }
.manifesto-inner { grid-template-columns: 1fr; gap: 32px; }
.manifesto-number { font-size: 4rem; }
.problems-grid, .solution-grid { grid-template-columns: 1fr; }
.problem-card, .sol-card { border-right: none; flex-direction: column; gap: 20px; }
.problem-icon { width: 60px; height: 60px; }
.problem-icon svg { width: 28px; height: 28px; }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.step:nth-child(2) { border-right: none; }
.step:nth-child(n+3) { border-top: 1px solid var(--border); }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.wrap { padding: 0 16px; }
section { padding: 80px 0; }
.hero { padding-top: 120px; }
h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
.hero-meta { gap: 24px; flex-wrap: wrap; }
.dash-tri { grid-template-columns: 1fr; }
.dash-cell { border-right: none; }
.steps-grid { grid-template-columns: 1fr; }
.step { border-right: none; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: none; }
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 12px; }
.nav { display: none; }
.price-card { padding: 40px 24px; }
.price-amount { font-size: 3rem; }
.dash-big { grid-template-columns: 1fr; }
.dash-big-cell { border-right: none; border-bottom: 1px solid var(--border); }
.dash-perm { grid-template-columns: 1fr; }
.dash-perm-right { text-align: left; }
.dash-perm-row { grid-template-columns: 1fr; }
.dash-perm-cell { border-right: none; border-bottom: 1px solid var(--border); }
.dash-tab { font-size: 0.625rem; padding: 10px 8px; }
.dash-tab svg { display: none; }
}
</style>
</head>
<body>
<header class="header" id="header">
<div class="wrap">
<div class="logo">
<div class="logo-mark">R</div>
ROI24
</div>
<nav class="nav">
<a href="#solution">Решение</a>
<a href="#how">Как работает</a>
<a href="#compare">Сравнение</a>
<a href="#pricing">Тарифы</a>
<a href="#faq">FAQ</a>
</nav>
<div class="header-actions">
<span class="header-phone">+7 917 777 6086</span>
<a href="#cta" class="btn btn-accent">Обсудить проект</a>
<button class="theme-toggle" id="themeToggle" aria-label="Переключить тему">
<svg class="icon-moon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 12.5A7.5 7.5 0 1 1 7.5 3a5.5 5.5 0 0 0 9.5 9.5z"/>
</svg>
<svg class="icon-sun" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="10" cy="10" r="4"/><path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.93 4.93l1.41 1.41M13.66 13.66l1.41 1.41M4.93 15.07l1.41-1.41M13.66 6.34l1.41-1.41"/>
</svg>
</button>
</div>
</div>
</header>
<!-- ── HERO ── -->
<section class="hero" id="hero">
<div class="wrap">
<div class="hero-inner">
<div class="hero-left" id="heroLeft">
<div class="hero-label">ДАННЫЕ. БЕЗ ШУМА.</div>
<h1>Вы теряете<br>деньги, <span style="-webkit-text-fill-color: var(--accent); color: var(--accent);">не зная</span><br>почему</h1>
<p class="hero-sub">
Один дашборд с 10 ключевыми метриками вашего бизнеса.
Обновляется автоматически из 1С, CRM и банков.
Смотрится с телефона каждое утро.
</p>
<p class="hero-tagline">Сквозная аналитика и панели мониторинга<br>для вашего бизнеса и департаментов под ключ</p>
<div class="hero-actions">
<a href="#cta" class="btn btn-accent btn-lg">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 8h10M9 4l4 4-4 4"/>
</svg>
Получить демо за 3 дня
</a>
<a href="#compare" class="btn btn-outline btn-lg">Сравнить</a>
</div>
<div class="hero-meta">
<div class="hero-meta-item">
<span class="hero-meta-value" data-count="3">3</span>
<span class="hero-meta-label">Дня настройки</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-value" data-count="10">10</span>
<span class="hero-meta-label">Ключевых метрик</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-value" data-count="5">5+</span>
<span class="hero-meta-label">Источников</span>
</div>
</div>
</div>
<div class="hero-right" id="heroRight">
<div class="dash-glow"></div>
<div class="dash-header">
<span class="dash-brand">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<rect x="2" y="8" width="3" height="6" rx="0.5"/>
<rect x="6.5" y="5" width="3" height="9" rx="0.5"/>
<rect x="11" y="2" width="3" height="12" rx="0.5"/>
</svg>
ROI24 / DASHBOARD
</span>
<div style="display:flex;align-items:center;gap:12px;">
<span class="dash-clock" id="dashClock"><span class="clock-time">--:--:--</span></span>
<span class="dash-status"><span class="dash-dot"></span> LIVE</span>
</div>
</div>
<div class="dash-body">
<!-- Permanent row 1: Profit today + Turnover -->
<div class="dash-perm">
<div class="dash-perm-left">
<div class="dash-perm-label">Прибыль за сегодня</div>
<div class="dash-perm-value accent"><span class="count-up">24 500</span> ₽</div>
<div class="dash-perm-sub">Оборот за месяц: <strong style="color:var(--text);">12.4М ₽</strong></div>
</div>
<div class="dash-perm-right">
<div class="dash-perm-label">Кассовый разрыв</div>
<div class="dash-perm-value" style="color: var(--accent);">Нет риска</div>
<div class="dash-perm-sub">На 14 дней хватит</div>
</div>
</div>
<!-- Permanent row 2: Cash + Debt -->
<div class="dash-perm-row">
<div class="dash-perm-cell">
<div class="dash-perm-label">Касса</div>
<div class="dash-perm-value"><span class="count-up">4.8</span>М ₽</div>
</div>
<div class="dash-perm-cell">
<div class="dash-perm-label">Дебиторка</div>
<div class="dash-perm-value"><span class="count-up">1.2</span>М ₽</div>
</div>
</div>
<!-- Tab bar -->
<div class="dash-tabs">
<button class="dash-tab active" data-tab="cpa">
CPA
<svg class="spark-tab" viewBox="0 0 32 12" fill="none">
<path d="M0 8L4 6L8 9L12 3L16 5L20 1L24 4L28 0L32 2" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
</svg>
</button>
<button class="dash-tab" data-tab="conv">
Конверсии
<svg class="spark-tab" viewBox="0 0 32 12" fill="none">
<path d="M0 10L4 8L8 7L12 9L16 6L20 4L24 3L28 5L32 2" stroke="var(--blue)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
</svg>
</button>
<button class="dash-tab" data-tab="ltv">
LTV
<svg class="spark-tab" viewBox="0 0 32 12" fill="none">
<path d="M0 11L4 9L8 10L12 7L16 8L20 5L24 3L28 4L32 1" stroke="var(--amber)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.5"/>
</svg>
</button>
</div>
<!-- Tab content area -->
<div class="dash-tab-content">
<!-- Tab: CPA -->
<div class="dash-tab-panel" id="tab-cpa">
<div class="dash-big">
<div class="dash-big-cell">
<div class="dash-big-label">CAC</div>
<div class="dash-big-value">
<span class="count-up">2 150</span><span class="accent">₽</span>
</div>
<div class="dash-big-desc">Средняя стоимость за привлечённого клиента</div>
</div>
<div class="dash-big-cell">
<div class="dash-big-label">Расход на рекламу</div>
<div class="dash-big-value">
<span class="count-up">148</span><span class="accent"> 000 ₽</span>
</div>
<div class="dash-big-desc">Общий расход на все каналы за 30 дней</div>
</div>
</div>
<div class="dash-tri">
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 8L5 6L10 9L15 5L20 7L25 3L30 4L35 2L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">CPL</div>
<div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">890</span>₽</div>
<div class="dash-mini-desc">Стоимость одной заявки</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 10L5 9L10 8L15 6L20 5L25 4L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">ROI</div>
<div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">3.1</span>x</div>
<div class="dash-mini-desc">Возврат на рекламные инвестиции</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 9L5 8L10 10L15 7L20 5L25 4L30 6L35 3L40 2" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Продажи</div>
<div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">156</span></div>
<div class="dash-mini-desc">За 30 дней</div>
</div>
</div>
</div>
<!-- Tab: Конверсии -->
<div class="dash-tab-panel hidden" id="tab-conv">
<div class="dash-big">
<div class="dash-big-cell">
<div class="dash-big-label">Конверсия</div>
<div class="dash-big-value">
<span class="count-up">3.2</span><span class="accent">%</span>
</div>
<div class="dash-big-desc">Конверсия из посещения в продажу</div>
</div>
<div class="dash-big-cell">
<div class="dash-big-label">Заявки</div>
<div class="dash-big-value">
<span class="count-up">1 240</span>
</div>
<div class="dash-big-desc">Заявки за 30 дней</div>
</div>
</div>
<div class="dash-tri">
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 10L5 8L10 9L15 7L20 6L25 4L30 5L35 3L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Посетители</div>
<div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">5 400</span></div>
<div class="dash-mini-desc">За 30 дней</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 9L5 10L10 7L15 6L20 5L25 4L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Заявки → Оплата</div>
<div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">68</span>%</div>
<div class="dash-mini-desc">Конверсия в продажу</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 11L5 9L10 10L15 8L20 6L25 5L30 4L35 3L40 2" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Квалификация</div>
<div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">24.5</span>%</div>
<div class="dash-mini-desc">Заявок → квалифицированных</div>
</div>
</div>
</div>
<!-- Tab: LTV -->
<div class="dash-tab-panel hidden" id="tab-ltv">
<div class="dash-big">
<div class="dash-big-cell">
<div class="dash-big-label">Средний LTV</div>
<div class="dash-big-value">
<span class="count-up">45 200</span><span class="accent"> ₽</span>
</div>
<div class="dash-big-desc">Срок: 8 мес</div>
</div>
<div class="dash-big-cell">
<div class="dash-big-label">LTV / CAC</div>
<div class="dash-big-value">
<span class="count-up">31</span><span class="accent">:1</span>
</div>
<div class="dash-big-desc">Соотношение LTV к затратам на привлечение</div>
</div>
</div>
<div class="dash-tri">
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 10L5 9L10 8L15 7L20 6L25 5L30 4L35 3L40 1" stroke="var(--blue)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">CAC</div>
<div class="dash-mini-value" style="color: var(--blue);"><span class="count-up">1 450</span>₽</div>
<div class="dash-mini-desc">Затраты на привлечение</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 11L5 9L10 10L15 8L20 7L25 5L30 3L35 2L40 1" stroke="var(--accent)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Удержание 30д</div>
<div class="dash-mini-value" style="color: var(--accent);"><span class="count-up">78</span>%</div>
<div class="dash-mini-desc">Клиентов через 30 дней</div>
</div>
<div class="dash-mini">
<svg class="dash-mini-spark" viewBox="0 0 40 12" fill="none" preserveAspectRatio="none">
<path d="M0 10L5 8L10 9L15 7L20 6L25 5L30 4L35 3L40 1" stroke="var(--amber)" stroke-width="1" fill="none" opacity="0.6"/>
</svg>
<div class="dash-mini-label">Удержание 90д</div>
<div class="dash-mini-value" style="color: var(--amber);"><span class="count-up">52</span>%</div>
<div class="dash-mini-desc">Клиентов через 90 дней</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── MANIFESTO ── -->
<section class="manifesto">
<div class="manifesto-inner">
<div class="manifesto-number reveal">70<span class="accent">%</span></div>
<div class="manifesto-content reveal reveal-delay-2">
<div class="section-label">Проблема</div>
<h2>Компаний не видят<br>деньги в кассе<br>до конца месяца</h2>
<p>Данные разбросаны по 1С, CRM, банкам, рекламным кабинетам. Каждый отчёт — ручная сводка за неделю. Когда увидели проблему — деньги уже потеряны.</p>
<p><strong style="color: var(--text);">ROI24 собирает всё в один дашборд.</strong> Обновляется автоматически. Вы видите цифры как в банковском приложении.</p>
</div>
</div>
</section>
<!-- ── PROBLEMS ── -->
<section>
<div class="wrap">
<div class="section-label reveal">Три боли</div>
<h2 class="section-title reveal reveal-delay-1">Почему вы принимаете решения в темноте</h2>
<div class="problems-grid" style="margin-top: 48px;">
<div class="problem-card reveal reveal-delay-1">
<div class="problem-icon">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<circle cx="4" cy="8" r="2"/><circle cx="12" cy="8" r="2"/>
<path d="M6 7l2-2M10 9l2-2"/>
</svg>
</div>
<div class="problem-body">
<div class="problem-num">01</div>
<h3>Данные разбросаны</h3>
<p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
</div>
</div>
<div class="problem-card reveal reveal-delay-2">
<div class="problem-icon">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
<circle cx="8" cy="8" r="2"/><path d="M2 2l12 12"/>
</svg>
</div>
<div class="problem-body">
<div class="problem-num">02</div>
<h3>Не видно, где теряете</h3>
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
</div>
</div>
<div class="problem-card reveal reveal-delay-3">
<div class="problem-icon">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
<circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 2"/>
</svg>
</div>
<div class="problem-body">
<div class="problem-num">03</div>
<h3>Отчёты приходят поздно</h3>
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ── SOLUTION ── -->
<section id="solution" class="solution-section">
<div class="wrap">
<div class="section-label reveal">Решение</div>
<h2 class="section-title reveal reveal-delay-1">Один дашборд. Все ключевые цифры.</h2>
<div class="solution-grid">
<div class="sol-card reveal reveal-delay-1">
<div class="sol-icon">
<svg width="32" height="32" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
<path d="M9 2L4 8.5h4l-1 5.5L12 7.5H8L9 2z"/>
</svg>
</div>
<h3>Живые данные</h3>
<p>Обновляются автоматически — 1С, CRM, банки, реклама. Данные сами приходят в дашборд каждый час.</p>
</div>
<div class="sol-card reveal reveal-delay-2">
<div class="sol-icon">
<svg width="32" height="32" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
<path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
<circle cx="8" cy="8" r="2"/>
</svg>
</div>
<h3>Видно где теряете</h3>
<p>Цветовые индикаторы: зелёный, жёлтый, красный. Три секунды — и вы видите, какая метрика вышла за нормы.</p>
</div>
<div class="sol-card reveal reveal-delay-3">
<div class="sol-icon">
<svg width="32" height="32" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.5">
<rect x="4" y="2" width="8" height="12" rx="1.5"/>
<line x1="7" y1="11.5" x2="9" y2="11.5"/>
</svg>
</div>
<h3>С телефона</h3>
<p>Собственник смотрит дашборд за завтраком. Не нужно открывать ноутбук, логиниться в 1С.</p>
</div>
</div>
</div>
</section>
<!-- ── HOW IT WORKS ── -->
<section id="how" class="steps">
<div class="wrap">
<div class="section-label reveal">Процесс</div>
<h2 class="section-title reveal reveal-delay-1">От звонка до дашборда — 3 дня</h2>
<div class="steps-grid" style="margin-top: 48px;">
<div class="step reveal reveal-delay-1">
<div class="step-num">01</div>
<h3>Брифинг</h3>
<p>30 минут. Звоним, узнаём бизнес.</p>
<div class="step-time">30 мин</div>
</div>
<div class="step reveal reveal-delay-2">
<div class="step-num">02</div>
<h3>Подключение</h3>
<p>1С, CRM, банки, реклама.</p>
<div class="step-time">1–2 дня</div>
</div>
<div class="step reveal reveal-delay-3">
<div class="step-num">03</div>
<h3>Настройка</h3>
<p>Дашборд под ваши 10 метрик.</p>
<div class="step-time">1–2 дня</div>
</div>
<div class="step reveal reveal-delay-4">
<div class="step-num">04</div>
<h3>Демо</h3>
<p>Показываем результат.</p>
<div class="step-time">30 мин</div>
</div>
<div class="step reveal">
<div class="step-num">05</div>
<h3>Запуск</h3>
<p>Доступ, обучение, авто-обновление.</p>
<div class="step-time">День запуска</div>
</div>
</div>
</div>
</section>
<!-- ── COMPARISON ── -->
<section id="compare" class="comparison">
<div class="wrap">
<div class="section-label reveal">Сравнение</div>
<h2 class="section-title reveal reveal-delay-1">Без ROI24 / С ROI24</h2>
<table class="comp-table reveal reveal-delay-2" style="margin-top: 48px;">
<thead>
<tr><th>Параметр</th><th>Без ROI24</th><th>С ROI24</th></tr>
</thead>
<tbody>
<tr><td>Данные</td><td class="comp-no">5+ источников</td><td class="comp-yes">1 дашборд</td></tr>
<tr><td>Обновление</td><td class="comp-no">Ручной ввод</td><td class="comp-yes">Авто, каждый час</td></tr>
<tr><td>Время на отчёты</td><td class="comp-no">3+ часа / неделя</td><td class="comp-yes">0 мин</td></tr>
<tr><td>Актуальность</td><td class="comp-no">30 дней</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 class="comp-no">100К + 40К зарплат</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>
</section>
<!-- ── PRICING ── -->
<section id="pricing" class="pricing">
<div class="wrap">
<div class="text-center" style="margin-bottom: 48px;">
<div class="section-label reveal" style="justify-content:center;">Тарифы</div>
<h2 class="section-title reveal reveal-delay-1" style="margin:0 auto;">Два варианта. Оба работают.</h2>
</div>
<div class="price-cards">
<div class="price-card economy reveal">
<div class="price-name">Эконом — бот</div>
<div class="price-amount">10 000 <span class="unit">₽</span></div>
<div class="price-sub">Настройка один раз.<br>Далее 1 000 ₽/мес за работу бота.</div>
<ul class="price-features">
<li>Бот в Telegram или Max</li>
<li>Ежедневная статистика по вашим метрикам</li>
<li>Подключение 1–3 источников данных</li>
<li>До 7 ключевых метрик</li>
<li>Настройка за 24 часа</li>
</ul>
<a href="#cta" class="btn btn-outline btn-lg price-cta">Выбрать тариф</a>
<div class="price-guarantee">Запустили за 24 часа. Получаете отчёт каждое утро.</div>
</div>
<div class="price-card featured reveal reveal-delay-1">
<div class="price-name">Под ключ — дашборд</div>
<div class="price-amount">100 000 <span class="unit">₽</span></div>
<div class="price-sub">Единоразово. Поддержка 20 000 ₽/мес после 30 дней.</div>
<ul class="price-features">
<li>Подключение 1С / CRM / банки / реклама</li>
<li>Настройка 10 ключевых метрик</li>
<li>Дашборд, заточенный под ваш бизнес</li>
<li>Обучение команды работе с дашбордом</li>
<li>30 дней поддержки и донастройки</li>
<li>Автоматическое обновление источников</li>
</ul>
<a href="#cta" class="btn btn-accent btn-lg price-cta">Обсудить проект</a>
<div class="price-guarantee">30-дневная гарантия. Если дашборд не устроит — вернём деньги.</div>
</div>
</div>
</div>
</section>
<!-- ── FAQ ── -->
<section id="faq">
<div class="wrap">
<div class="section-label reveal">Вопросы</div>
<h2 class="section-title reveal reveal-delay-1" style="margin-bottom: 48px;">Возражения</h2>
<div class="faq-list">
<div class="faq-item reveal reveal-delay-1">
<div class="faq-q">Почему 100К? Это же дорого.</div>
<div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников, ваше обучение команды. Шаблоны от 20К, но они бесполезны.</div></div>
</div>
<div class="faq-item reveal reveal-delay-2">
<div class="faq-q">А если не подойдёт?</div>
<div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если не то — останавливаемся и возвращаем деньги.</div></div>
</div>
<div class="faq-item reveal reveal-delay-3">
<div class="faq-q">Сколько времени займёт настройка?</div>
<div class="faq-a"><div class="faq-a-inner">3–5 дней. Первый дашборд — за 72 часа. Потом донастраиваем.</div></div>
</div>
<div class="faq-item reveal reveal-delay-4">
<div class="faq-q">А какие данные можно подключить?</div>
<div class="faq-a"><div class="faq-a-inner">1С, amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки, кассы. Если не знаете — напишите, скажем.</div></div>
</div>
<div class="faq-item reveal">
<div class="faq-q">Можно проще? Дешевле?</div>
<div class="faq-a"><div class="faq-a-inner">Да, есть тариф "Эконом" — бот в Telegram или Max за 10 000 ₽ настройка + 1 000 ₽/мес. Присылает статистику каждый день. Для тех, кто не готов к полному дашборду — отличный старт.</div></div>
</div>
<div class="faq-item reveal reveal-delay-1">
<div class="faq-q">Поддержка после запуска?</div>
<div class="faq-a"><div class="faq-a-inner">30 дней включено. Далее 20 000 ₽/мес: мониторинг, техподдержка. Или отключаете — дашборд продолжает работать.</div></div>
</div>
</div>
</div>
</section>
<!-- ── FOOTER ── -->
<footer class="footer">
<div class="wrap">
<div class="footer-inner">
<div class="footer-col">
<h4>ROI24</h4>
<p>Живые цифры бизнеса за 3 дня.</p>
<p>Автоматизированные дашборды для собственников.</p>
</div>
<div class="footer-col">
<h4>Контакты</h4>
<a href="tel:+79177776086">+7 917 777 6086</a>
<a href="#">Telegram</a>
<a href="#">hello@roi24.ru</a>
</div>
<div class="footer-col">
<h4>Решение</h4>
<a href="#solution">О решении</a>
<a href="#compare">Сравнение</a>
<a href="#pricing">Тарифы</a>
<a href="#faq">FAQ</a>
</div>
<div class="footer-col">
<h4>Юридическое</h4>
<p>ИП ТАРАСОВ Н.О.</p>
<p>ИНН: 027811542842</p>
<p>ОГРН: 312028011400236</p>
<a href="#">Политика конфиденциальности</a>
<a href="#">152-ФЗ</a>
<a href="#">Оферта</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 ROI24. Все права защищены.</span>
<span>Данные на серверах в Москве. SSL.</span>
</div>
</div>
</footer>
<script>
/* ── THEME TOGGLE ── */
const html = document.documentElement;
const themeToggle = document.getElementById('themeToggle');
const savedTheme = localStorage.getItem('roi24-theme');
if (savedTheme) html.setAttribute('data-theme', savedTheme);
themeToggle.addEventListener('click', () => {
const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('roi24-theme', next);
});
/* ── HEADER SCROLL ── */
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 40);
}, { passive: true });
/* ── HERO ENTRANCE ── */
window.addEventListener('load', () => {
document.getElementById('heroLeft').classList.add('loaded');
document.getElementById('heroRight').classList.add('loaded');
animateCounters();
});
/* ── Feature #2: Animated Counters ── */
function animateCounters() {
document.querySelectorAll('.count-up').forEach(el => {
if (el.dataset.animated) return;
el.dataset.animated = 'true';
const text = el.textContent;
const match = text.match(/^([\d\s]+\.?\d*)/);
if (!match) return;
const target = parseFloat(match[1].replace(/\s/g, ''));
const prefix = text.substring(0, text.indexOf(match[1]));
const suffix = text.substring(text.indexOf(match[1]) + match[1].length);
const duration = 1500;
const startTime = performance.now();
function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }
function update(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = easeOutQuart(progress);
const currentVal = target * eased;
let display;
if (text.includes('.')) {
display = prefix + currentVal.toFixed(1) + suffix;
} else {
const rounded = Math.round(currentVal);
display = prefix + rounded.toLocaleString('ru-RU').replace(/,/g, ' ') + suffix;
}
el.textContent = display;
if (progress < 1) requestAnimationFrame(update);
else el.textContent = text;
}
requestAnimationFrame(update);
});
}
/* ── Feature #5: Live Clock ── */
function updateClock() {
const clockEl = document.getElementById('dashClock');
if (clockEl) {
clockEl.querySelector('.clock-time').textContent =
new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
}
setInterval(updateClock, 1000);
updateClock();
/* ── SCROLL REVEAL ── */
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
/* ── DASHBOARD TABS ── */
const tabs = document.querySelectorAll('.dash-tab');
const panels = document.querySelectorAll('.dash-tab-panel');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
panels.forEach(panel => {
if (panel.id === 'tab-' + target) {
panel.classList.remove('hidden');
panel.style.opacity = '0';
panel.style.transform = 'translateY(8px)';
requestAnimationFrame(() => {
panel.style.transition = 'opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out)';
panel.style.opacity = '1';
panel.style.transform = 'translateY(0)';
animateCounters();
});
} else {
panel.classList.add('hidden');
}
});
});
});
/* ── FAQ ACCORDION ── */
document.querySelectorAll('.faq-q').forEach(q => {
q.addEventListener('click', () => {
const item = q.parentElement;
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
if (!wasOpen) item.classList.add('open');
});
});
/* ── Feature #7: 3D Tilt ── */
const hero = document.getElementById('hero');
const heroRight = document.getElementById('heroRight');
hero.addEventListener('mousemove', (e) => {
heroRight.classList.add('tilt-active');
const rect = hero.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
heroRight.style.transform = `perspective(1200px) rotateX(${y * -8}deg) rotateY(${x * 8}deg) translateY(0)`;
heroRight.style.boxShadow = `${x * -30}px ${y * -30 + 20}px 80px rgba(34,197,94,0.06), 0 0 1px var(--border)`;
});
hero.addEventListener('mouseleave', () => {
heroRight.classList.remove('tilt-active');
heroRight.style.transform = '';
heroRight.style.boxShadow = '';
setTimeout(() => {
heroRight.style.transition = 'transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out)';
setTimeout(() => { heroRight.style.transition = ''; }, 600);
}, 100);
});
</script>
</body>
</html>