2633 lines
114 KiB
HTML
2633 lines
114 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ROI24 — Контролируйте прибыль в реальном времени</title>
|
||
<meta name="description" content="Контролируйте прибыль в реальном времени">
|
||
<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: 2rem; font-weight: 700; letter-spacing: -0.03em;
|
||
display: flex; align-items: center; gap: 3px;
|
||
}
|
||
.logo-pixel {
|
||
display: grid; grid-template-columns: repeat(4, 6px); gap: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
.logo-pixel .px {
|
||
width: 6px; height: 6px; border-radius: 2px;
|
||
background: var(--accent);
|
||
animation: pxLogo 2.5s ease-in-out infinite;
|
||
}
|
||
.logo-pixel .px:nth-child(odd) { animation-name: pxLogoBlink; }
|
||
.logo-pixel .px:nth-child(1){animation-delay:0s}
|
||
.logo-pixel .px:nth-child(2){animation-delay:0.15s}
|
||
.logo-pixel .px:nth-child(3){animation-delay:0.3s}
|
||
.logo-pixel .px:nth-child(4){animation-delay:0.45s}
|
||
.logo-pixel .px:nth-child(5){animation-delay:0.6s}
|
||
.logo-pixel .px:nth-child(6){animation-delay:0.75s}
|
||
.logo-pixel .px:nth-child(7){animation-delay:0.9s}
|
||
.logo-pixel .px:nth-child(8){animation-delay:1.05s}
|
||
.logo-pixel .px:nth-child(9){animation-delay:1.2s}
|
||
.logo-pixel .px:nth-child(10){animation-delay:0.1s}
|
||
.logo-pixel .px:nth-child(11){animation-delay:0.25s}
|
||
.logo-pixel .px:nth-child(12){animation-delay:0.4s}
|
||
.logo-pixel .px:nth-child(13){animation-delay:0.55s}
|
||
.logo-pixel .px:nth-child(14){animation-delay:0.7s}
|
||
.logo-pixel .px:nth-child(15){animation-delay:0.85s}
|
||
.logo-pixel .px:nth-child(16){animation-delay:1s}
|
||
@keyframes pxLogo{0%,100%{opacity:0.3;transform:scale(0.85)}50%{opacity:1;transform:scale(1.1)}}
|
||
@keyframes pxLogoBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}}
|
||
.logo:hover .logo-pixel { filter: drop-shadow(0 0 6px var(--accent-glow)); }
|
||
.logo-num { color: var(--accent); margin-left: -2px; }
|
||
.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: 44px; height: 44px; 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, 3.7rem); 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);
|
||
overflow: hidden;
|
||
}
|
||
.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: -20%; left: -10%; width: 120%; height: 120%;
|
||
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);
|
||
z-index: 0;
|
||
}
|
||
.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;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.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;
|
||
z-index: 1;
|
||
}
|
||
.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.3rem; 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;
|
||
}
|
||
|
||
/* ── Rule-Based Recommendations ── */
|
||
.dash-recs {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 16px 20px;
|
||
background: var(--accent-dim);
|
||
}
|
||
.dash-recs-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.625rem;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
margin-bottom: 12px;
|
||
}
|
||
.dash-recs-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.dash-rec-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 10px 12px;
|
||
border-radius: 6px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
font-size: 0.75rem;
|
||
transition: all 0.3s var(--ease-out);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.dash-rec-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
opacity: 0.6;
|
||
}
|
||
.dash-rec-warn::before { background: var(--amber); }
|
||
.dash-rec-ok::before { background: var(--accent); }
|
||
.dash-rec-danger::before { background: var(--red); }
|
||
.dash-rec-info::before { background: var(--blue); }
|
||
|
||
.dash-rec-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-top: 3px;
|
||
}
|
||
.dash-rec-warn .dash-rec-dot { background: var(--amber); }
|
||
.dash-rec-ok .dash-rec-dot { background: var(--accent); }
|
||
.dash-rec-danger .dash-rec-dot { background: var(--red); }
|
||
.dash-rec-info .dash-rec-dot { background: var(--blue); }
|
||
|
||
.dash-rec-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.dash-rec-label {
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
margin-bottom: 2px;
|
||
line-height: 1.3;
|
||
}
|
||
.dash-rec-desc {
|
||
color: var(--text-sec);
|
||
font-size: 0.6875rem;
|
||
line-height: 1.4;
|
||
}
|
||
.dash-rec-action {
|
||
font-size: 0.6875rem;
|
||
color: var(--accent);
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.dash-rec-item:hover {
|
||
border-color: var(--accent);
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 640px) {
|
||
.dash-recs {
|
||
padding: 12px 16px;
|
||
}
|
||
.dash-rec-item {
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.dash-rec-action {
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
[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); }
|
||
|
||
/* Founding Partner card */
|
||
.price-card.founding { flex: 1.3; max-width: 420px; border-color: var(--accent); position: relative; overflow: hidden; }
|
||
.price-card.founding::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-glow), var(--accent)); }
|
||
.price-card.founding:hover { border-color: var(--accent); box-shadow: 0 8px 40px rgba(34,197,94,0.12), 0 0 1px var(--accent); }
|
||
.price-badge { display: inline-block; background: var(--accent-dim); color: var(--accent); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.02em; }
|
||
.price-card.founding .price-amount { color: var(--accent); }
|
||
|
||
/* ── FOUNDING PARTNER SECTION ── */
|
||
.founding-section {
|
||
padding: 100px 0 120px;
|
||
background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.founding-inner {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.founding-badge-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.founding-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--accent-dim);
|
||
border: 1px solid rgba(34,197,94,0.2);
|
||
color: var(--accent);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
padding: 8px 16px;
|
||
border-radius: 24px;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
}
|
||
.founding-badge .badge-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--accent);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
.founding-spots {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-dim);
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
}
|
||
.founding-spots strong {
|
||
color: var(--accent);
|
||
}
|
||
.founding-title {
|
||
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
|
||
font-weight: 700;
|
||
letter-spacing: -0.03em;
|
||
line-height: 1.15;
|
||
margin-bottom: 20px;
|
||
}
|
||
.founding-accent {
|
||
color: var(--accent);
|
||
}
|
||
.founding-sub {
|
||
font-size: 1.0625rem;
|
||
color: var(--text-sec);
|
||
max-width: 560px;
|
||
margin: 0 auto 64px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* 4 cards grid */
|
||
.founding-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
margin-bottom: 64px;
|
||
}
|
||
.founding-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 32px 24px;
|
||
text-align: left;
|
||
transition: all 0.4s var(--ease-out);
|
||
}
|
||
.founding-card:hover {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 8px 32px rgba(34,197,94,0.06);
|
||
transform: translateY(-4px);
|
||
}
|
||
.founding-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
color: var(--accent);
|
||
}
|
||
.founding-icon svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.founding-card h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.founding-card p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-sec);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* Highlight row */
|
||
.founding-highlight {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
padding: 32px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.highlight-item {
|
||
text-align: center;
|
||
}
|
||
.highlight-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
color: var(--accent);
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.highlight-label {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-dim);
|
||
line-height: 1.4;
|
||
}
|
||
.highlight-divider {
|
||
width: 1px;
|
||
height: 40px;
|
||
background: var(--border);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* CTA */
|
||
.founding-cta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.founding-cta-note {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.founding-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.founding-highlight {
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
.highlight-divider {
|
||
width: 40px;
|
||
height: 1px;
|
||
}
|
||
.founding-spots {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.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: 2.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.25rem;
|
||
color: var(--text-dim); transition: all 0.4s var(--ease-spring);
|
||
flex-shrink: 0; margin-left: 16px; width: 44px; height: 44px;
|
||
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; margin: 0 auto; }
|
||
.hero-left { padding-top: 0; }
|
||
.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 COMPACT MOBILE ── */
|
||
.hero { padding-top: 100px; padding-bottom: 40px; min-height: auto; }
|
||
.hero-inner { grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
|
||
.hero-left { padding-top: 0; }
|
||
.hero-right { max-height: 60vh; overflow: hidden; }
|
||
h1 { font-size: clamp(2rem, 9vw, 2.75rem); margin-bottom: 16px; }
|
||
.hero-label { margin-bottom: 12px; font-size: 0.625rem; }
|
||
.hero-sub { font-size: 0.9375rem; margin-bottom: 16px; max-width: none; }
|
||
.hero-tagline { font-size: 0.875rem; margin-bottom: 20px; max-width: none; }
|
||
.hero-meta { margin-top: 20px; padding-top: 16px; gap: 16px; flex-wrap: wrap; }
|
||
.hero-meta-value { font-size: 1.375rem; }
|
||
.hero-meta-label { font-size: 0.625rem; }
|
||
|
||
/* ── DASHBOARD COMPACT MOBILE ── */
|
||
.dash-header { padding: 8px 12px !important; }
|
||
.dash-brand { font-size: 0.5rem !important; letter-spacing: 0.02em !important; }
|
||
.dash-clock { font-size: 0.5rem !important; }
|
||
.dash-status { font-size: 0.5rem !important; }
|
||
.dash-dot { width: 5px; height: 5px !important; }
|
||
|
||
.dash-perm { padding: 10px 12px !important; gap: 12px !important; }
|
||
.dash-perm-value { font-size: 1rem !important; }
|
||
.dash-perm-sub { font-size: 0.5625rem !important; margin-top: 0 !important; }
|
||
.dash-perm-cell { padding: 8px 12px !important; }
|
||
.dash-perm-cell .dash-perm-value { font-size: 0.8125rem !important; }
|
||
|
||
.dash-tabs { padding: 0 4px !important; }
|
||
.dash-tab {
|
||
padding: 12px 8px !important;
|
||
font-size: 0.75rem !important;
|
||
letter-spacing: 0 !important;
|
||
min-height: 48px !important;
|
||
gap: 4px !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
.dash-tab svg { display: none !important; }
|
||
|
||
.dash-big { }
|
||
.dash-big-cell { padding: 10px !important; }
|
||
.dash-big-label { font-size: 0.5rem !important; margin-bottom: 2px !important; }
|
||
.dash-big-value { font-size: 1.25rem !important; gap: 2px !important; }
|
||
.dash-big-desc { font-size: 0.5625rem !important; margin-top: 2px !important; line-height: 1.2 !important; }
|
||
|
||
.dash-mini { padding: 8px 6px !important; }
|
||
.dash-mini-label { font-size: 0.5rem !important; margin-bottom: 2px !important; }
|
||
.dash-mini-value { font-size: 0.875rem !important; margin-bottom: 0 !important; }
|
||
.dash-mini-desc { font-size: 0.5625rem !important; line-height: 1.2 !important; }
|
||
.dash-mini-spark { display: none !important; }
|
||
.dash-mini-bar { height: 2px !important; margin-top: 2px !important; }
|
||
|
||
/* Hide glow on mobile — it overflows and blocks tap targets */
|
||
.dash-glow { display: none !important; }
|
||
}
|
||
|
||
/* Mobile typography improvements */
|
||
@media (max-width: 640px) {
|
||
/* Ensure minimum readable text */
|
||
.dash-perm-label { font-size: 0.75rem !important; line-height: 1.3; }
|
||
.dash-big-label { font-size: 0.6875rem !important; }
|
||
.dash-big-desc { font-size: 0.8125rem !important; }
|
||
.dash-mini-label { font-size: 0.6875rem !important; }
|
||
.dash-mini-desc { font-size: 0.8125rem !important; }
|
||
.hero-sub { font-size: 1rem !important; }
|
||
.problem-card h3 { font-size: 1.125rem; }
|
||
.problem-card p { font-size: 0.875rem; }
|
||
.sol-card h3 { font-size: 1rem; }
|
||
.sol-card p { font-size: 0.875rem; }
|
||
.faq-q { font-size: 0.9375rem !important; }
|
||
.faq-a-inner { font-size: 0.875rem !important; }
|
||
.footer-col a, .footer-col p { font-size: 0.8125rem; }
|
||
.section-label { font-size: 0.75rem; }
|
||
.who-card h3 { font-size: 0.9375rem; }
|
||
.who-card p { font-size: 0.875rem; }
|
||
.founding-card h3 { font-size: 0.9375rem; }
|
||
.founding-card p { font-size: 0.875rem; }
|
||
/* Ensure touch targets */
|
||
a, button, .btn { min-height: 44px; }
|
||
.nav a { min-height: 44px; }
|
||
.hamburger-line { width: 24px; height: 2.5px; }
|
||
}
|
||
|
||
/* ── CALLS24 BANNER ── */
|
||
.calls24-banner {
|
||
width: 100%;
|
||
padding: 80px 0;
|
||
background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
|
||
position: relative;
|
||
z-index: 1;
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
color: var(--text);
|
||
}
|
||
.calls24-banner * {
|
||
color: inherit;
|
||
}
|
||
.calls24-inner {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 48px;
|
||
}
|
||
.calls24-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
}
|
||
.calls24-head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
max-width: 720px;
|
||
}
|
||
.calls24-title {
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
font-weight: 800;
|
||
letter-spacing: -0.03em;
|
||
line-height: 1.1;
|
||
color: var(--text);
|
||
}
|
||
.calls24-title-accent {
|
||
color: var(--text-sec);
|
||
font-weight: 400;
|
||
}
|
||
.calls24-desc {
|
||
font-size: 1.0625rem;
|
||
color: var(--text-sec);
|
||
line-height: 1.65;
|
||
max-width: 600px;
|
||
}
|
||
.calls24-cta {
|
||
margin-top: 8px;
|
||
}
|
||
.calls24-features {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.calls24-f {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px 24px;
|
||
transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
|
||
}
|
||
.calls24-f:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 32px var(--accent-dim);
|
||
}
|
||
.calls24-f-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
.calls24-f-title {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.calls24-f-desc {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-sec);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* Light theme overrides */
|
||
[data-theme="light"] .calls24-banner {
|
||
background: linear-gradient(180deg, var(--bg) 0%, #f8f8f8 50%, var(--bg) 100%);
|
||
}
|
||
[data-theme="light"] .calls24-f {
|
||
background: #fff;
|
||
border-color: rgba(0,0,0,0.08);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.calls24-banner {
|
||
padding: 48px 0;
|
||
}
|
||
.calls24-inner {
|
||
padding: 0 20px;
|
||
gap: 32px;
|
||
}
|
||
.calls24-features {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
.calls24-f {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
/* ── КОМУ ПОДОБХОДИТ ── */
|
||
.who-section {
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 120px 0;
|
||
}
|
||
.who-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
max-width: 1100px;
|
||
margin: 0 auto 64px;
|
||
}
|
||
.who-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 32px 28px;
|
||
transition: all 0.4s var(--ease-out);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.who-card:hover {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 8px 32px var(--accent-dim);
|
||
transform: translateY(-4px);
|
||
}
|
||
.who-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 10px;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
flex-shrink: 0;
|
||
}
|
||
.who-card h3 {
|
||
font-size: 1.0625rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1.3;
|
||
}
|
||
.who-card p {
|
||
font-size: 0.875rem;
|
||
color: var(--text-sec);
|
||
line-height: 1.6;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
/* Security badges row */
|
||
.who-badges {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
padding: 32px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.who-badge-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
text-align: center;
|
||
}
|
||
.who-badge-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
}
|
||
.who-badge-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.who-badge-text div:first-child {
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
}
|
||
.who-badge-text div:last-child {
|
||
font-size: 0.75rem;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.who-grid { grid-template-columns: 1fr; }
|
||
.who-badges { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.who-badges { grid-template-columns: 1fr; }
|
||
.who-section { padding: 80px 0; }
|
||
}
|
||
|
||
/* ── HAMBURGER MENU ── */
|
||
.hamburger {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 8px 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s var(--ease-out);
|
||
z-index: 200;
|
||
}
|
||
.hamburger:hover, .hamburger.active {
|
||
border-color: var(--accent);
|
||
background: var(--accent-dim);
|
||
}
|
||
.hamburger-line {
|
||
display: block;
|
||
width: 22px;
|
||
height: 2px;
|
||
background: var(--text-sec);
|
||
border-radius: 1px;
|
||
transition: all 0.3s var(--ease-out);
|
||
transform-origin: center;
|
||
}
|
||
.hamburger.active .hamburger-line:nth-child(1) {
|
||
transform: translateY(7px) rotate(45deg);
|
||
}
|
||
.hamburger.active .hamburger-line:nth-child(2) {
|
||
opacity: 0;
|
||
transform: scaleX(0);
|
||
}
|
||
.hamburger.active .hamburger-line:nth-child(3) {
|
||
transform: translateY(-7px) rotate(-45deg);
|
||
}
|
||
.hamburger-menu {
|
||
display: none;
|
||
position: fixed;
|
||
top: 64px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: var(--bg);
|
||
z-index: 150;
|
||
padding: 32px 20px;
|
||
overflow-y: auto;
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
transition: all 0.3s var(--ease-out);
|
||
}
|
||
.hamburger-menu.open {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.hamburger-menu nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
.hamburger-menu nav a {
|
||
display: block;
|
||
padding: 16px 0;
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: color 0.2s, padding-left 0.2s;
|
||
}
|
||
.hamburger-menu nav a:hover {
|
||
color: var(--accent);
|
||
padding-left: 8px;
|
||
}
|
||
.hamburger-menu .mobile-cta {
|
||
margin-top: 32px;
|
||
padding: 0;
|
||
}
|
||
.hamburger-menu .mobile-cta a {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 16px;
|
||
background: var(--accent);
|
||
color: #000;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
border: none;
|
||
}
|
||
.hamburger-menu .mobile-phone {
|
||
margin-top: 24px;
|
||
text-align: center;
|
||
color: var(--text-sec);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
font-family: 'IBM Plex Mono', 'SF Mono', monospace;
|
||
}
|
||
|
||
/* Mobile: show hamburger, hide desktop nav */
|
||
@media (max-width: 768px) {
|
||
.hamburger {
|
||
display: flex;
|
||
}
|
||
.hamburger-menu {
|
||
display: block;
|
||
}
|
||
.nav {
|
||
display: none !important;
|
||
}
|
||
.header-phone {
|
||
display: none;
|
||
}
|
||
.header-actions .btn-accent {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header" id="header">
|
||
<div class="wrap">
|
||
<div class="logo">
|
||
<div class="logo-pixel">
|
||
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
|
||
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
|
||
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
|
||
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
|
||
</div>
|
||
ROI<span class="logo-num">24</span>
|
||
</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>
|
||
<button class="hamburger" id="hamburger" aria-label="Меню" type="button">
|
||
<span class="hamburger-line"></span>
|
||
<span class="hamburger-line"></span>
|
||
<span class="hamburger-line"></span>
|
||
</button>
|
||
<div class="header-actions">
|
||
<span class="header-phone">+7 917 777 6086</span>
|
||
<a href="tel:+79177776086" 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>
|
||
|
||
<!-- ── HAMBURGER MENU ── -->
|
||
<div class="hamburger-menu" id="hamburgerMenu">
|
||
<nav>
|
||
<a href="#solution" data-menu-link>Решение</a>
|
||
<a href="#how" data-menu-link>Как работает</a>
|
||
<a href="#compare" data-menu-link>Сравнение</a>
|
||
<a href="#pricing" data-menu-link>Тарифы</a>
|
||
<a href="#faq" data-menu-link>FAQ</a>
|
||
</nav>
|
||
<div class="mobile-cta">
|
||
<a href="tel:+79177776086">Обсудить проект</a>
|
||
</div>
|
||
<div class="mobile-phone">+7 917 777 6086</div>
|
||
</div>
|
||
|
||
<!-- ── 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">
|
||
Дашборд, который объединяет все источники данных вашего бизнеса.
|
||
Обновляется автоматически, показывает прибыль в реальном времени,
|
||
даёт рекомендации по 50+ правилам.
|
||
</p>
|
||
<div class="hero-tagline">
|
||
Контролируйте прибыль компании в реальном времени.<br>
|
||
Автоматические рекомендации на основе <span class="accent">50+ правил</span>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<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 class="hero-meta-item">
|
||
<span class="hero-meta-value" data-count="50">50+</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>
|
||
|
||
<!-- Rule-Based Recommendations -->
|
||
<div class="dash-recs">
|
||
<div class="dash-recs-title">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||
</svg>
|
||
Рекомендации
|
||
</div>
|
||
<div class="dash-recs-list">
|
||
<div class="dash-rec-item dash-rec-warn">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">CAC вырос на 23%</div>
|
||
<div class="dash-rec-desc">Перерасход бюджета в Яндекс.Директ</div>
|
||
</div>
|
||
<div class="dash-rec-action">Смотреть →</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-ok">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">ROI 3.1x — в норме</div>
|
||
<div class="dash-rec-desc">Выше порога 2.5x</div>
|
||
</div>
|
||
<div class="dash-rec-action">OK</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-info">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">CPL 890₽ — ниже рынка</div>
|
||
<div class="dash-rec-desc">Увеличьте ставки для роста объёма</div>
|
||
</div>
|
||
<div class="dash-rec-action">+20%</div>
|
||
</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>
|
||
|
||
<!-- Rule-Based Recommendations -->
|
||
<div class="dash-recs">
|
||
<div class="dash-recs-title">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||
</svg>
|
||
Рекомендации
|
||
</div>
|
||
<div class="dash-recs-list">
|
||
<div class="dash-rec-item dash-rec-ok">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">Конверсия 3.2%</div>
|
||
<div class="dash-rec-desc">В норме для вашей ниши</div>
|
||
</div>
|
||
<div class="dash-rec-action">OK</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-warn">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">ВКонтакте: CTR упал</div>
|
||
<div class="dash-rec-desc">Реклама устарела — обновите креативы</div>
|
||
</div>
|
||
<div class="dash-rec-action">ВК →</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-danger">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">Квалификация 24.5%</div>
|
||
<div class="dash-rec-desc">Низкое качество лидов — проверьте источники</div>
|
||
</div>
|
||
<div class="dash-rec-action">! Важно</div>
|
||
</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>
|
||
<!-- Rule-Based Recommendations -->
|
||
<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>
|
||
<!-- Rule-Based Recommendations -->
|
||
<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>
|
||
<!-- Rule-Based Recommendations -->
|
||
<div class="dash-recs">
|
||
<div class="dash-recs-title">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="12" height="12">
|
||
<path d="M8 1l2 4h-4l2 4-3-3-3 3 2-4H6z"/>
|
||
</svg>
|
||
Рекомендации
|
||
</div>
|
||
<div class="dash-recs-list">
|
||
<div class="dash-rec-item dash-rec-ok">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">LTV/CAC 31:1 — норма</div>
|
||
<div class="dash-rec-desc">Соотношение выше порога — бизнес окупается</div>
|
||
</div>
|
||
<div class="dash-rec-action">OK</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-ok">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">Удержание 30д: 78%</div>
|
||
<div class="dash-rec-desc">Клиенты возвращаются — отлично</div>
|
||
</div>
|
||
<div class="dash-rec-action">OK</div>
|
||
</div>
|
||
<div class="dash-rec-item dash-rec-info">
|
||
<div class="dash-rec-dot"></div>
|
||
<div class="dash-rec-text">
|
||
<div class="dash-rec-label">LTV 45 200₽</div>
|
||
<div class="dash-rec-desc">Выше среднего по отрасли на 12%</div>
|
||
</div>
|
||
<div class="dash-rec-action">→</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- ── CALLS24 BANNER ── -->
|
||
<section class="calls24-banner">
|
||
<div class="calls24-inner">
|
||
<div class="calls24-badge">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
<rect x="1" y="1" width="6" height="6" rx="1.5" fill="#22c55e"/>
|
||
<rect x="9" y="1" width="6" height="6" rx="1.5" fill="#22c55e" opacity="0.4"/>
|
||
<rect x="1" y="9" width="6" height="6" rx="1.5" fill="#22c55e" opacity="0.4"/>
|
||
<rect x="9" y="9" width="6" height="6" rx="1.5" fill="#22c55e"/>
|
||
</svg>
|
||
<span>ПАРТНЁР-РЕШЕНИЕ</span>
|
||
</div>
|
||
<div class="calls24-head">
|
||
<h2 class="calls24-title">
|
||
<span>Calls24</span>
|
||
<span class="calls24-title-accent"> — анализ звонков для вашего бизнеса</span>
|
||
</h2>
|
||
<p class="calls24-desc">
|
||
Узнайте, сколько денег теряет ваш бизнес. AI-анализ каждого звонка, скрипты продаж, слабые места операторов — всё в одном дашборде за 24 часа.
|
||
</p>
|
||
<div class="calls24-cta">
|
||
<a href="https://calls24.ru" target="_blank" class="btn btn-accent btn-lg">Узнать подробнее</a>
|
||
</div>
|
||
</div>
|
||
<div class="calls24-features">
|
||
<div class="calls24-f">
|
||
<div class="calls24-f-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.5">
|
||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||
<line x1="8" y1="23" x2="16" y2="23"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="calls24-f-title">Каждый звонок</h3>
|
||
<p class="calls24-f-desc">AI-транскрипция и анализ всех разговоров с клиентами в реальном времени</p>
|
||
</div>
|
||
<div class="calls24-f">
|
||
<div class="calls24-f-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.5">
|
||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="calls24-f-title">Скрипты продаж</h3>
|
||
<p class="calls24-f-desc">Контроль соблюдения скриптов и выявление точек оттока клиентов</p>
|
||
</div>
|
||
<div class="calls24-f">
|
||
<div class="calls24-f-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.5">
|
||
<rect x="3" y="3" width="7" height="7"/>
|
||
<rect x="14" y="3" width="7" height="7"/>
|
||
<rect x="14" y="14" width="7" height="7"/>
|
||
<rect x="3" y="14" width="7" height="7"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="calls24-f-title">Дашборд сотрудников</h3>
|
||
<p class="calls24-f-desc">Рейтинг операторов, баллы, слабые места — визуальная аналитика</p>
|
||
</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>
|
||
|
||
<!-- ── 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="who" class="who-section">
|
||
<div class="wrap">
|
||
<div class="section-label reveal" style="text-align:center;display:flex;justify-content:center;">Сфера применения</div>
|
||
<h2 class="section-title reveal" style="text-align:center;max-width:600px;margin:16px auto 16px;">Кому подходит ROI24</h2>
|
||
<p class="reveal" style="text-align:center;color:var(--text-sec);max-width:560px;margin:0 auto 64px;line-height:1.7;font-size:1rem;">
|
||
Мы создаём систему для бизнеса, где решения принимаются на основе данных — а не интуиции.
|
||
</p>
|
||
|
||
<div class="reveal" style="text-align:center;margin:0 auto 48px;">
|
||
<div class="section-label" style="justify-content:center;">Возможности</div>
|
||
<p style="color:var(--text-sec);max-width:640px;margin:0 auto;font-size:0.9375rem;line-height:1.7;">
|
||
Если у вас есть API телефония — подключим и получим <strong style="color:var(--text);">умный анализ звонков с рекомендациями по каждому сотруднику</strong>: скрипты, возражения, скоринг, точки потери клиентов.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div class="who-grid">
|
||
<div class="who-card reveal reveal-delay-1">
|
||
<div class="who-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
|
||
<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>E-commerce и интернет-магазины</h3>
|
||
<p>Связка рекламных кабинетов, CRM и складского учёта. Видите маржу с каждого заказа в реальном времени, а не в конце месяца.</p>
|
||
</div>
|
||
|
||
<div class="who-card reveal reveal-delay-2">
|
||
<div class="who-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
|
||
<path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Производство и услуги</h3>
|
||
<p>Контролируйте рентабельность каждого направления. Автоматические алерты при отклонении от плана — реагируйте сразу.</p>
|
||
</div>
|
||
|
||
<div class="who-card reveal reveal-delay-3">
|
||
<div class="who-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
|
||
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Компании с оборотом от 10М₽/мес</h3>
|
||
<p>Когда бизнес вырос за пределы Excel, но ещё нет аналитической команды. ROI24 заменяет первого аналитика.</p>
|
||
</div>
|
||
|
||
<div class="who-card reveal reveal-delay-4">
|
||
<div class="who-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Бизнесы с отделом продаж и маркетинга</h3>
|
||
<p>Синхронизируйте маркетинг и продажи. Видите, какие каналы приносят прибыль, а не просто лиды.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Security badges row -->
|
||
<div class="who-badges reveal">
|
||
<div class="who-badge-item">
|
||
<div class="who-badge-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="who-badge-text">
|
||
<div>Договор NDA</div>
|
||
<div>Юридическая защита данных</div>
|
||
</div>
|
||
</div>
|
||
<div class="who-badge-item">
|
||
<div class="who-badge-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c-1.5-2-4-3-9-3m0-6c1.5 2 4 3 9 3m-9-9a9 9 0 0 0-9 9m9-9h9m-9 0a9 9 0 0 1 9-9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="who-badge-text">
|
||
<div>Коробочное решение</div>
|
||
<div>Данные на вашем сервере</div>
|
||
</div>
|
||
</div>
|
||
<div class="who-badge-item">
|
||
<div class="who-badge-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l3 3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="who-badge-text">
|
||
<div>Пилотный проект</div>
|
||
<div>2 недели на тест</div>
|
||
</div>
|
||
</div>
|
||
<div class="who-badge-item">
|
||
<div class="who-badge-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="who-badge-text">
|
||
<div>ROI за первый месяц</div>
|
||
<div>Окупаемость или возврат</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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="tel:+79177776086" 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="tel:+79177776086" class="btn btn-accent btn-lg price-cta">Обсудить проект</a>
|
||
<div class="price-guarantee">30-дневная гарантия. Если дашборд не устроит — вернём деньги.</div>
|
||
</div>
|
||
<div class="price-card featured reveal reveal-delay-2">
|
||
<div class="price-badge">Коробочное решение</div>
|
||
<div class="price-name">Лицензия — on-premise</div>
|
||
<div class="price-amount">500 000 <span class="unit">₽</span></div>
|
||
<div class="price-sub">Полный пакет на вашем сервере. Поддержка 80 000 ₽/мес.</div>
|
||
<ul class="price-features">
|
||
<li>Установка на ваш сервер — данные не уходят</li>
|
||
<li>Полная копия всех функций дашборда</li>
|
||
<li>Шифрование, аудит доступа, 152-ФЗ</li>
|
||
<li>Настраиваемые метрики под ваш бизнес</li>
|
||
<li>Выделенная техподдержка и мониторинг</li>
|
||
<li>Обновления и доработки по SLA</li>
|
||
<li>Перед началом — NDA</li>
|
||
</ul>
|
||
<a href="tel:+79177776086" class="btn btn-accent btn-lg price-cta">Обсудить внедрение</a>
|
||
<div class="price-guarantee">Пилотный проект: 2 недели на тест перед покупкой лицензии.</div>
|
||
</div>
|
||
<div class="price-card featured founding reveal reveal-delay-2">
|
||
<div class="price-badge">Лимитировано • 5 мест</div>
|
||
<div class="price-name">Founding Partner — Pro</div>
|
||
<div class="price-amount">1 000 000 <span class="unit">₽</span></div>
|
||
<div class="price-sub">Полный пакет Pro + ML-анализ звонков.<br>Эксклюзив для первых 5 партнёров.<br>Осталось <strong>3 из 5</strong> мест.</div>
|
||
<ul class="price-features">
|
||
<li>Всё из «Под ключ» +</li>
|
||
<li>Rule Engine: авто-алерты по 50+ правилам</li>
|
||
<li>ML-анализ звонков (скрипты, возражения, скоринг)</li>
|
||
<li>Авто-оптимизация рекламы через API</li>
|
||
<li>Персональный AI-ассистент (LLM-инсайты)</li>
|
||
<li>Влияние на roadmap — ваш голос, что строить</li>
|
||
<li>Цена заморозится навсегда — даже после ML и API</li>
|
||
</ul>
|
||
<a href="https://t.me/n1kt4r" target="_blank" class="btn btn-accent btn-lg price-cta">Стать Founding Partner</a>
|
||
<div class="price-guarantee">Только 5 компаний. Мы строим продукт вместе — вы влияете на приоритеты.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── FOUNDING PARTNER ── -->
|
||
<section class="founding-section">
|
||
<div class="wrap">
|
||
<div class="founding-inner">
|
||
<div class="founding-badge-row">
|
||
<div class="founding-badge">
|
||
<span class="badge-dot"></span>
|
||
Founding Partner
|
||
</div>
|
||
<div class="founding-spots">Осталось <strong>3 из 5</strong> мест</div>
|
||
</div>
|
||
|
||
<h2 class="founding-title reveal">
|
||
Строим ROI24 Pro<br>
|
||
<span class="founding-accent">вместе с вами</span>
|
||
</h2>
|
||
|
||
<p class="founding-sub">
|
||
Мы не просто продаём продукт — мы создаём его для вас.<br>
|
||
Первые 5 компаний получают Pro по цене Founding Partner, навсегда.
|
||
</p>
|
||
|
||
<div class="founding-grid">
|
||
<div class="founding-card reveal reveal-delay-1">
|
||
<div class="founding-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Rule Engine из коробки</h3>
|
||
<p>Авто-алерты по 50+ бизнес-правилам: CAC вырос, звонков мало, касса просела. Работает сразу после подключения.</p>
|
||
</div>
|
||
|
||
<div class="founding-card reveal reveal-delay-2">
|
||
<div class="founding-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
|
||
<path d="M12 6v6l4 2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>ML-анализ звонков</h3>
|
||
<p>Скрипты, возражения, скоринг менеджеров. Система слушает все звонки и подсказывает, где теряете деньги.</p>
|
||
</div>
|
||
|
||
<div class="founding-card reveal reveal-delay-3">
|
||
<div class="founding-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 20V10M18 20V4M6 20v-4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Авто-оптимизация рекламы</h3>
|
||
<p>Через API рекламных кабинетов: снижает ставки, переключает бюджеты, останавливает неэффективные креативы.</p>
|
||
</div>
|
||
|
||
<div class="founding-card reveal reveal-delay-4">
|
||
<div class="founding-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="3"/>
|
||
<path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Персональный AI-ассистент</h3>
|
||
<p>LLM-инсайты на естественном языке. Спросите «почему упала прибыль?» — получите ответ с рекомендациями.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="founding-highlight reveal">
|
||
<div class="highlight-item">
|
||
<div class="highlight-value">1 000 000 ₽</div>
|
||
<div class="highlight-label">эксклюзив для первых 5 партнёров</div>
|
||
</div>
|
||
<div class="highlight-divider"></div>
|
||
<div class="highlight-item">
|
||
<div class="highlight-value">навсегда</div>
|
||
<div class="highlight-label">цена заморозится — даже после ML и API</div>
|
||
</div>
|
||
<div class="highlight-divider"></div>
|
||
<div class="highlight-item">
|
||
<div class="highlight-value">ваш голос</div>
|
||
<div class="highlight-label">влияете на roadmap — строим то, что нужно вам</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="founding-cta reveal">
|
||
<a href="https://t.me/neo24h" target="_blank" class="btn btn-accent btn-lg">Стать Founding Partner</a>
|
||
<span class="founding-cta-note">Только 5 компаний. Заявка через Telegram — ответим за 2 часа.</span>
|
||
</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 open" id="faq-security">
|
||
<div class="faq-q" onclick="toggleFaq('faq-security')">
|
||
Как защищены мои данные? Можно развернуть на своём сервере?
|
||
</div>
|
||
<div class="faq-a">
|
||
<div class="faq-a-inner">
|
||
<p style="margin-bottom:12px;">Да. Вы можете выбрать <strong>облачную</strong> или <strong>коробочную</strong> модель:</p>
|
||
<p style="margin-bottom:12px;"><strong>Облачная</strong> — данные хранятся на защищённых серверах с шифрованием AES-256 и ежедневными бэкапами.</p>
|
||
<p style="margin-bottom:12px;"><strong>Коробочная</strong> — полный пакет устанавливается на ваш сервер. Данные не покидают ваш контур. Подходит для требований ФСТЭК и 152-ФЗ.</p>
|
||
<p>Перед началом работ подписываем NDA. Полный аудит доступа предоставляется по запросу.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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>Автоматизированные дашборды для собственников.</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');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
/* ── HAMBURGER MENU ── */
|
||
const hamburger = document.getElementById('hamburger');
|
||
const hamburgerMenu = document.getElementById('hamburgerMenu');
|
||
hamburger.addEventListener('click', () => {
|
||
const isOpen = hamburger.classList.toggle('active');
|
||
hamburgerMenu.classList.toggle('open');
|
||
document.body.style.overflow = isOpen ? 'hidden' : '';
|
||
});
|
||
document.querySelectorAll('[data-menu-link]').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
hamburger.classList.remove('active');
|
||
hamburgerMenu.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
});
|
||
});
|
||
|
||
/* ── 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>
|