Files
roi24/index_ibm.html
T

2501 lines
112 KiB
HTML
Raw Blame History

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