Files
calls24-landing/index-v4.html
T

3261 lines
123 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">
<head>
<!-- Yandex.Metrika -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calls24 — Анализ звонков для любого бизнеса</title>
<meta name="description" content="Узнайте, сколько денег теряет ваш бизнес. Анализ каждого звонка с операторами за 24 часа.">
<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=Inter:wght@300;400;500;600;700;800;900&display=swap&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ═══════════════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
/* Backgrounds */
--bg-primary: #0a0a0a;
--bg-secondary: #0f0f0f;
--bg-surface: #161616;
--bg-card: #1a1a1a;
--bg-elevated: #222222;
/* Borders */
--border: #222222;
--border-hairline: rgba(255, 255, 255, 0.06);
--border-hover: #333333;
/* Text */
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--text-tertiary: #52525b;
/* Semantic colors */
--color-primary: var(--accent);
--color-secondary: var(--accent-secondary);
--color-tertiary: var(--accent-tertiary);
--color-warning: var(--warning);
--color-error: var(--error);
--color-success: var(--accent-secondary);
--color-info: var(--info);
/* Accent colors */
--accent: #ff3d00;
--accent-hover: #ff6e40;
--accent-secondary: #22c55e;
--accent-tertiary: #3b82f6;
--warning: #f59e0b;
--error: #ef4444;
--info: #0ea5e9;
/* Border radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-full: 100px;
/* Spacing scale (8px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Typography scale */
--text-xs: 0.6875rem;
--text-sm: 0.75rem;
--text-base: 0.875rem;
--text-lg: 1rem;
--text-xl: 1.125rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3rem;
--text-6xl: 4rem;
/* Z-index scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-tooltip: 500;
/* Transitions */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.15s;
--transition-base: 0.2s;
--transition-slow: 0.3s;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* ═══════════════════════════════════════════
ACCESSIBILITY
═══════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════
ABSTRACT GEOMETRY BACKGROUND (Bauhaus)
═══════════════════════════════════════════ */
.geo-bg {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.geo-shape {
position: absolute;
opacity: 0.03;
}
.geo-circle {
width: 600px; height: 600px;
border-radius: 50%;
border: 2px solid var(--accent);
}
.geo-circle-1 { top: -200px; right: -200px; }
.geo-circle-2 { width: 400px; height: 400px; top: 40vh; left: -100px; border-color: var(--accent-secondary); }
.geo-circle-3 { width: 300px; height: 300px; bottom: 10vh; right: 10vw; border-color: var(--accent-tertiary); }
.geo-square {
width: 200px; height: 200px;
border: 2px solid var(--accent);
transform: rotate(45deg);
}
.geo-square-1 { top: 20vh; left: 5vw; }
.geo-square-2 { width: 150px; height: 150px; bottom: 30vh; right: 5vw; border-color: var(--accent-secondary); }
.geo-line {
height: 2px;
background: var(--accent);
width: 400px;
}
.geo-line-1 { top: 30vh; right: 10vw; }
.geo-line-2 { bottom: 20vh; left: 10vw; width: 300px; background: var(--accent-secondary); }
.geo-dots {
display: grid;
grid-template-columns: repeat(5, 8px);
gap: 20px;
}
.geo-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
}
.geo-dots-1 { top: 60vh; left: 15vw; }
.geo-dots-2 { bottom: 40vh; right: 20vw; }
/* ═══════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════ */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
section {
padding: 6rem 0;
position: relative;
}
/* ═══════════════════════════════════════════
HEADER
═══════════════════════════════════════════ */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border-hairline);
transition: all 0.3s var(--ease-out);
}
.header.scrolled {
background: rgba(10, 10, 10, 0.95);
box-shadow: 0 1px 0 var(--border);
}
.header-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0.875rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-weight: 900;
font-size: 1.375rem;
letter-spacing: -0.03em;
text-decoration: none;
color: var(--text-primary);
transition: opacity 0.2s var(--ease-out);
}
.logo:hover { opacity: 0.8; }
.logo span { color: var(--accent); }
.nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8125rem;
font-weight: 500;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-md);
transition: all 0.2s var(--ease-out);
position: relative;
}
.nav a:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}
.nav-cta {
margin-left: 0.5rem;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
cursor: pointer;
border: none;
transition: all 0.15s var(--ease-out);
font-family: inherit;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
will-change: transform;
}
.report-tab.active {
background: var(--accent);
color: white;
border-color: var(--accent);
}
/* Report Tab Content */
.report-tab-content {
display: block;
}
.report-tab-content:not(.active) {
display: none;
}
/* Details Grid */
.details-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.detail-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.detail-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
.detail-value {
font-size: 0.9375rem;
font-weight: 600;
}
.detail-section {
margin-bottom: 2rem;
}
.operator-detail {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.operator-detail-row {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.operator-detail-row span:first-child {
min-width: 120px;
font-weight: 500;
}
.operator-detail-bar {
flex: 1;
height: 8px;
background: var(--border);
border-radius: 4px;
overflow: hidden;
}
.operator-detail-fill {
height: 100%;
border-radius: 4px;
transition: width 0.8s var(--ease-smooth);
}
.operator-detail-row span:last-child {
min-width: 50px;
text-align: right;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
.script-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.script-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.script-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.script-item-header strong {
font-size: 0.9375rem;
line-height: 1.4;
}
.script-item-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
background: rgba(255, 61, 0, 0.15);
color: var(--accent);
white-space: nowrap;
}
/* Recommendations */
.recommendations-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.recommendation-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.recommendation-priority {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
white-space: nowrap;
min-width: 60px;
text-align: center;
}
.recommendation-priority.high {
background: rgba(239, 68, 68, 0.15);
color: var(--error);
}
.recommendation-priority.medium {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.recommendation-priority.low {
background: rgba(59, 130, 246, 0.15);
color: var(--accent-tertiary);
}
.recommendation-content strong {
display: block;
font-size: 0.9375rem;
margin-bottom: 0.25rem;
}
.recommendation-summary {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02));
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: var(--radius-lg);
padding: 1.5rem;
text-align: center;
margin-top: 0.5rem;
}
.summary-value {
font-size: 2rem;
font-weight: 800;
color: var(--accent-secondary);
letter-spacing: -0.03em;
}
.summary-label {
font-size: 0.8125rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.btn-primary:hover {
background: var(--accent-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 24px -4px rgba(255, 61, 0, 0.5);
}
.btn-primary:active {
transform: scale(0.97);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 8px -2px rgba(255, 61, 0, 0.3);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border);
}
.btn-secondary:hover {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.04);
}
.btn-secondary:active {
transform: scale(0.98);
}
.btn-green {
background: var(--accent-secondary);
color: #000;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 16px -4px rgba(34, 197, 94, 0.4);
}
.btn-green:hover {
background: #16a34a;
}
.btn-green:active {
transform: scale(0.97);
}
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero {
padding-top: 140px;
padding-bottom: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 400px;
background: radial-gradient(ellipse at center, rgba(255, 61, 0, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6875rem;
font-weight: 500;
color: var(--accent);
padding: 0.375rem 0.875rem;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: rgba(255, 61, 0, 0.04);
margin-bottom: 2rem;
letter-spacing: 0.02em;
}
.badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.045em;
margin-bottom: 1.5rem;
}
.hero h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.hero-trust {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
font-size: 0.8125rem;
color: var(--text-muted);
}
.hero-trust span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-trust .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-secondary);
}
/* ═══════════════════════════════════════════
NUMBERS STRIP
═══════════════════════════════════════════ */
.numbers-strip {
padding: 4rem 0;
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
background: var(--bg-secondary);
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.number-item { padding: 1.5rem 1rem; }
.number-value {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 0.5rem;
}
.number-value.red { color: var(--error); }
.number-value.green { color: var(--accent-secondary); }
.number-value.blue { color: var(--accent-tertiary); }
.number-value.yellow { color: var(--warning); }
.number-label {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* ═══════════════════════════════════════════
FEATURES
═══════════════════════════════════════════ */
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem;
}
.section-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 1rem;
}
.section-header h2 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.15;
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.0625rem;
line-height: 1.6;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
transition: all 0.3s var(--ease-out);
}
.feature-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.feature-icon {
width: 2.5rem; height: 2.5rem;
border-radius: var(--radius-md);
background: rgba(255, 61, 0, 0.08);
border: 1px solid rgba(255, 61, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: var(--accent);
flex-shrink: 0;
}
.feature-icon svg {
width: 1.25rem; height: 1.25rem;
}
.feature-card h3 {
font-size: 1.0625rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.feature-card p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ═══════════════════════════════════════════
REPORT PREVIEW
═══════════════════════════════════════════ */
.report-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
}
.report-preview {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
max-width: 1000px;
margin: 0 auto;
}
.report-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.report-header h3 {
font-weight: 700;
font-size: 1rem;
}
.report-tabs {
display: flex;
gap: 0.25rem;
}
.report-tab {
padding: 0.375rem 0.875rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: var(--radius-md);
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s var(--ease-out);
border: none;
background: none;
font-family: inherit;
}
.report-tab.active {
background: var(--accent);
color: white;
border-color: var(--accent);
}
/* Report Tab Content */
.report-tab-content {
display: block;
}
.report-tab-content:not(.active) {
display: none;
}
/* Details Grid */
.details-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.detail-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.detail-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
.detail-value {
font-size: 0.9375rem;
font-weight: 600;
}
.detail-section {
margin-bottom: 2rem;
}
.operator-detail {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.operator-detail-row {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.operator-detail-row span:first-child {
min-width: 120px;
font-weight: 500;
}
.operator-detail-bar {
flex: 1;
height: 8px;
background: var(--border);
border-radius: 4px;
overflow: hidden;
}
.operator-detail-fill {
height: 100%;
border-radius: 4px;
transition: width 0.8s var(--ease-smooth);
}
.operator-detail-row span:last-child {
min-width: 50px;
text-align: right;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
.script-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.script-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
}
.script-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.script-item-header strong {
font-size: 0.9375rem;
line-height: 1.4;
}
.script-item-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
background: rgba(255, 61, 0, 0.15);
color: var(--accent);
white-space: nowrap;
}
/* Recommendations */
.recommendations-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.recommendation-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.recommendation-priority {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
white-space: nowrap;
min-width: 60px;
text-align: center;
}
.recommendation-priority.high {
background: rgba(239, 68, 68, 0.15);
color: var(--error);
}
.recommendation-priority.medium {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.recommendation-priority.low {
background: rgba(59, 130, 246, 0.15);
color: var(--accent-tertiary);
}
.recommendation-content strong {
display: block;
font-size: 0.9375rem;
margin-bottom: 0.25rem;
}
.recommendation-summary {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.02));
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: var(--radius-lg);
padding: 1.5rem;
text-align: center;
margin-top: 0.5rem;
}
.summary-value {
font-size: 2rem;
font-weight: 800;
color: var(--accent-secondary);
letter-spacing: -0.03em;
}
.summary-label {
font-size: 0.8125rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.report-body {
padding: 2rem;
}
.report-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.report-metric {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.report-metric-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.report-metric-value {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.report-metric-change {
font-size: 0.75rem;
margin-top: 0.25rem;
}
.report-metric-change.positive { color: var(--accent-secondary); }
.report-metric-change.negative { color: var(--error); }
.report-chart {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 2rem;
margin-bottom: 2rem;
}
.chart-bar-container {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.chart-bar-label {
width: 120px;
font-size: 0.8125rem;
color: var(--text-secondary);
flex-shrink: 0;
}
.chart-bar-track {
flex: 1;
height: 24px;
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
overflow: hidden;
}
.chart-bar {
height: 100%;
border-radius: 4px;
transition: width 1s var(--ease-spring);
}
.chart-bar.red { background: linear-gradient(90deg, var(--error), #f97316); }
.chart-bar.green { background: linear-gradient(90deg, var(--accent-secondary), #10b981); }
.chart-bar.blue { background: linear-gradient(90deg, var(--accent-tertiary), #0ea5e9); }
.chart-bar.yellow { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.chart-bar-value {
width: 40px;
text-align: right;
font-size: 0.8125rem;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.report-call-list {
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.report-call-list h4 {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.report-call {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
margin-bottom: 0.5rem;
transition: all 0.2s var(--ease-out);
cursor: pointer;
}
.report-call:hover {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.02);
}
.report-call-score {
width: 40px; height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 700;
font-family: 'JetBrains Mono', monospace;
flex-shrink: 0;
}
.report-call-score.high {
background: rgba(34, 197, 94, 0.15);
color: var(--accent-secondary);
}
.report-call-score.medium {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.report-call-score.low {
background: rgba(239, 68, 68, 0.15);
color: var(--error);
}
.report-call-info {
flex: 1;
}
.report-call-number {
font-size: 0.875rem;
font-weight: 600;
}
.report-call-meta {
font-size: 0.75rem;
color: var(--text-muted);
}
.report-call-tags {
display: flex;
gap: 0.375rem;
}
.report-tag {
font-size: 0.625rem;
padding: 0.1875rem 0.5rem;
border-radius: var(--radius-full);
font-weight: 500;
}
.report-tag.pass {
background: rgba(34, 197, 94, 0.1);
color: var(--accent-secondary);
}
.report-tag.fail {
background: rgba(239, 68, 68, 0.1);
color: var(--error);
}
/* ═══════════════════════════════════════════
EMPLOYEE DASHBOARD
═══════════════════════════════════════════ */
.dashboard-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
}
.dashboard-preview {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
max-width: 1000px;
margin: 0 auto;
}
/* Dashboard header removed - table view only on desktop, cards on mobile */
.dashboard-body {
padding: 2rem;
}
/* ═══════ TABLE VIEW ═══════ */
.employee-table-view {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.employee-row {
display: grid;
grid-template-columns: 2fr 0.7fr 1.1fr 1.1fr 0.9fr 0.9fr 0.8fr;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
transition: all 0.2s var(--ease-out);
}
.employee-row:hover {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.02);
}
.employee-row.rank-1 { border-left: 3px solid var(--accent-secondary); }
.employee-row.rank-5 { border-left: 3px solid var(--error); }
.employee-row.header {
background: transparent;
border: none;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.5rem;
}
.employee-row.header span {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.employee-name {
display: flex;
align-items: center;
gap: 0.75rem;
}
.employee-role {
font-size: 0.6875rem;
color: var(--text-muted);
margin-top: 0.125rem;
}
.employee-avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
.employee-avatar.av1 { background: rgba(59, 130, 246, 0.15); color: var(--accent-tertiary); }
.employee-avatar.av2 { background: rgba(34, 197, 94, 0.15); color: var(--accent-secondary); }
.employee-avatar.av3 { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.employee-avatar.av4 { background: rgba(255, 61, 0, 0.15); color: var(--error); }
.employee-avatar.av5 { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.employee-name-text {
font-size: 0.875rem;
font-weight: 600;
}
.employee-score-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.employee-score {
font-size: 0.875rem;
font-weight: 700;
font-family: "JetBrains Mono", monospace;
}
.score-bar {
width: 100%;
height: 4px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.score-fill {
height: 100%;
border-radius: 2px;
transition: width 0.8s var(--ease-smooth);
}
.score-high { color: var(--accent-secondary); }
.score-medium { color: var(--warning); }
.score-low { color: var(--error); }
.trend-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
font-family: "JetBrains Mono", monospace;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.trend-up { color: var(--accent-secondary); background: rgba(34, 197, 94, 0.1); }
.trend-down { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.employee-stat {
font-size: 0.875rem;
font-family: "JetBrains Mono", monospace;
color: var(--text-secondary);
}
/* ═══════ CARD VIEW ═══════ */
.employee-card-view {
display: none;
flex-direction: column;
gap: 1rem;
}
.employee-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: all 0.3s var(--ease-out);
position: relative;
overflow: hidden;
}
.employee-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
}
.employee-card.rank-1::before { background: var(--accent-secondary); }
.employee-card.rank-2::before { background: var(--accent-secondary); }
.employee-card.rank-3::before { background: var(--warning); }
.employee-card.rank-4::before { background: var(--warning); }
.employee-card.rank-5::before { background: var(--error); }
.employee-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.card-rank-badge {
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: var(--bg-elevated);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
font-family: "JetBrains Mono", monospace;
color: var(--text-muted);
flex-shrink: 0;
}
.card-trend {
margin-left: auto;
font-size: 0.75rem;
font-weight: 600;
font-family: "JetBrains Mono", monospace;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.card-trend-up { color: var(--accent-secondary); background: rgba(34, 197, 94, 0.1); }
.card-trend-down { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.card-score-ring {
width: 120px;
height: 120px;
margin: 0 auto 1.25rem;
position: relative;
}
.card-score-ring svg { width: 100%; height: 100%; }
.card-score-value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
font-weight: 800;
font-family: "JetBrains Mono", monospace;
letter-spacing: -0.04em;
}
.card-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}
.card-metric {
text-align: center;
padding: 0.75rem 0.5rem;
background: var(--bg-primary);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.card-metric-value {
display: block;
font-size: 1.125rem;
font-weight: 700;
font-family: "JetBrains Mono", monospace;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.card-metric-label {
font-size: 0.6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-weakness {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(245, 158, 11, 0.05);
border: 1px solid rgba(245, 158, 11, 0.15);
border-radius: var(--radius-md);
font-size: 0.75rem;
color: var(--warning);
}
/* ═══════ Toggle visibility ═══════ */
.employee-table-view.hidden { display: none; }
.employee-card-view.hidden { display: none; }
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
position: relative;
}
.step {
text-align: center;
padding: 2rem 1.5rem;
}
.step-number {
width: 3rem; height: 3rem;
border-radius: 50%;
background: var(--bg-card);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 800;
margin: 0 auto 1.5rem;
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
}
.step h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.step p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ═══════════════════════════════════════════
PRICING
═══════════════════════════════════════════ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
max-width: 1000px;
margin: 0 auto;
}
.pricing-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.3s var(--ease-out);
position: relative;
}
.pricing-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.pricing-card.featured {
border-color: var(--accent);
}
.pricing-card.featured::before {
content: "Популярный";
position: absolute;
top: -0.625rem;
left: 50%;
transform: translateX(-50%);
padding: 0.25rem 1rem;
background: var(--accent);
color: white;
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Enterprise pricing card */
/* Pricing enterprise styles */
.pricing-card.enterprise {
border-color: var(--accent-secondary);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--bg-card) 100%);
position: relative;
}
.pricing-label-custom {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
background: rgba(34, 197, 94, 0.1);
color: var(--accent-secondary);
display: inline-block;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pricing-card.enterprise .pricing-price {
color: var(--accent-secondary);
}
.pricing-card.enterprise .pricing-features li::before {
content: "✓";
color: var(--accent-secondary);
font-weight: 700;
}
/* Report tab content */
.report-tab-content {
display: block;
}
.report-tab-content:not(.active) {
display: none;
}
.pricing-name {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
.pricing-desc {
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.pricing-price {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 0.25rem;
}
.pricing-price span {
font-size: 0.875rem;
font-weight: 400;
color: var(--text-muted);
}
.pricing-features {
list-style: none;
margin: 1.5rem 0 2rem;
text-align: left;
}
.pricing-features li {
padding: 0.375rem 0;
font-size: 0.875rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.pricing-features li::before {
content: "✓";
color: var(--accent-secondary);
font-weight: 700;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
CTA SECTION
═══════════════════════════════════════════ */
.cta-section {
text-align: center;
position: relative;
overflow: hidden;
padding: 8rem 0;
}
.cta-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(255, 61, 0, 0.06) 0%, transparent 60%);
}
.cta-section h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.04em;
max-width: 600px;
margin: 0 auto 1.5rem;
}
.cta-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto 2.5rem;
line-height: 1.6;
}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer {
padding: 4rem 0 2rem;
border-top: 1px solid var(--border-hairline);
font-size: 0.875rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand p {
color: var(--text-secondary);
margin-top: 0.75rem;
font-size: 0.8125rem;
max-width: 18rem;
line-height: 1.6;
}
.footer-col h4 {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 0.5rem;
}
.footer-col a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8125rem;
transition: color 0.2s var(--ease-out);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-contact {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-contact a {
color: var(--text-secondary);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
transition: color 0.2s var(--ease-out);
}
.footer-contact a:hover { color: var(--text-primary); }
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid var(--border-hairline);
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 640px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.footer-legal {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.7;
}
.footer-legal a {
color: var(--text-secondary);
text-decoration: none;
}
.footer-legal a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════
COOKIE BANNER
═══════════════════════════════════════════ */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--bg-surface);
border-top: 1px solid var(--border);
padding: 1.25rem 1.5rem;
transform: translateY(100%);
transition: transform 0.5s var(--ease-spring);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}
.cookie-banner.visible {
transform: translateY(0);
}
.cookie-inner {
max-width: 800px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.cookie-text {
font-size: 0.8125rem;
color: var(--text-secondary);
line-height: 1.5;
flex: 1;
}
.cookie-text a {
color: var(--accent);
text-decoration: none;
}
.cookie-text a:hover { text-decoration: underline; }
.cookie-buttons {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
PRIVACY PAGE (modal)
═══════════════════════════════════════════ */
.privacy-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s var(--ease-out);
}
.privacy-overlay.active {
opacity: 1;
visibility: visible;
}
.privacy-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
max-width: 700px;
max-height: 80vh;
overflow-y: auto;
padding: 2.5rem;
margin: 1.5rem;
position: relative;
}
.privacy-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.25rem;
padding: 0.5rem;
border-radius: var(--radius-md);
transition: all 0.2s var(--ease-out);
}
.privacy-close:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}
.privacy-modal h2 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.03em;
}
.privacy-modal h3 {
font-size: 1.125rem;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.privacy-modal p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 0.75rem;
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
.nav { display: none; }
.hero { padding-top: 100px; }
.section { padding: 4rem 0; }
.features-grid { grid-template-columns: 1fr; }
.numbers-grid { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.report-metrics { grid-template-columns: repeat(2, 1fr); }
.employee-table-view { display: none; }
.employee-card-view { display: flex; }
.employee-card { padding: 1.25rem; }
.card-score-ring { width: 100px; height: 100px; }
.card-score-value { font-size: 1.5rem; }
.card-metric { padding: 0.5rem 0.25rem; }
.card-metric-value { font-size: 1rem; }
.cookie-inner { flex-direction: column; text-align: center; }
.dashboard-preview, .report-preview { border-radius: var(--radius-lg); }
/* Report mobile */
.report-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
.report-tabs { flex-wrap: wrap; }
.report-call { flex-direction: column; align-items: flex-start; }
.report-call-tags { flex-direction: column; width: 100%; margin-top: 0.5rem; }
.report-tag { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; }
/* Details mobile */
.details-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
.detail-card { padding: 0.875rem 1rem; }
.detail-label { font-size: 0.625rem; }
.detail-value { font-size: 0.8125rem; word-break: break-word; }
}
@media (max-width: 480px) {
.numbers-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.details-grid { grid-template-columns: 1fr !important; }
}
</style>
</head>
<body>
<!-- Skip link -->
<!-- Abstract Geometry Background -->
<div class="geo-bg">
<div class="geo-shape geo-circle geo-circle-1"></div>
<div class="geo-shape geo-circle geo-circle-2"></div>
<div class="geo-shape geo-circle geo-circle-3"></div>
<div class="geo-shape geo-square geo-square-1"></div>
<div class="geo-shape geo-square geo-square-2"></div>
<div class="geo-shape geo-line geo-line-1"></div>
<div class="geo-shape geo-line geo-line-2"></div>
<div class="geo-shape geo-dots geo-dots-1">
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div>
</div>
<div class="geo-shape geo-dots geo-dots-2">
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div><div class="geo-dot"></div>
<div class="geo-dot"></div><div class="geo-dot"></div>
</div>
</div>
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner">
<a href="#" class="logo">calls<span>24</span></a>
<nav class="nav" aria-label="Основная навигация">
<a href="#features">Возможности</a>
<a href="#report">Отчёты</a>
<a href="#dashboard">Дашборд</a>
<a href="#pricing">Тарифы</a>
<a href="#contact">Контакты</a>
</nav>
<a href="#audit" class="btn btn-green nav-cta">Начать бесплатно</a>
</div>
</header>
<!-- Hero -->
<main id="main">
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="badge">
<span class="badge-dot"></span>
<span>Автоматический анализ звонков за 24 часа</span>
</div>
<h1>Узнайте, сколько денег теряет<br><em>ваш бизнес каждый месяц</em></h1>
<p class="hero-subtitle">
90% операторов не называют компанию, 85% не обсуждают бюджет.
Мы покажем где теряете клиентов — за 24 часа.
</p>
<div class="hero-buttons">
<a href="#audit" class="btn btn-green">Узнать, сколько теряете →</a>
<a href="#report" class="btn btn-secondary">Посмотреть пример отчёта</a>
</div>
<div class="hero-trust">
<span><span class="dot"></span> Бесплатно для первого анализа</span>
<span>152-ФЗ</span>
</div>
</div>
</div>
</section>
<!-- Numbers Strip -->
<section class="numbers-strip">
<div class="container">
<div class="numbers-grid">
<div class="number-item">
<div class="number-value red">90%</div>
<div class="number-label">Операторов не называют<br>компанию</div>
</div>
<div class="number-item">
<div class="number-value red">85%</div>
<div class="number-label">Не обсуждают бюджет<br>сделки</div>
</div>
<div class="number-item">
<div class="number-value red">80%</div>
<div class="number-label">Не берут контакт<br>клиента</div>
</div>
<div class="number-item">
<div class="number-value green">40%</div>
<div class="number-label">Лидов теряется<br>на этапе звонка</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="section">
<div class="container">
<div class="section-header">
<div class="section-label">Возможности</div>
<h2>Всё, что нужно. Ничего лишнего.</h2>
<p>Простой анализ звонков, который показывает конкретные ошибки и как их исправить. Для любого бизнеса.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
</svg>
</div>
<h3>Анализ по скрипту</h3>
<p>ИИ проверяет каждый звонок по пунктам вашего скрипта: приветствие, потребности, бюджет, встреч...</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
</svg>
</div>
<h3>Детальный отчёт</h3>
<p>HTML-отчёт: что было хорошо, что плохо, конкретные фразы, рекомендации по скрипту.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</svg>
</div>
<h3>За 24 часа</h3>
<p>Отправьте 5–10 записей звонков — получите отчёт в течение суток. WAV, MP3, M4A.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</div>
<h3>Анализ каждого звонка</h3>
<p>Каждый звонок получает детальный разбор: оценки по критериям, ключевые фразы, рекомендации.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
</div>
<h3>152-ФЗ</h3>
<p>Обработка данных строго по закону. Ваши звонки и данные клиентов в безопасности.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
</svg>
</div>
<h3>Интеграция с CRM</h3>
<p>Подключаемся к вашей CRM, получаем данные о звонках автоматически, без ручного ввода.</p>
</div>
</div>
</div>
</section>
<!-- Report Preview -->
<section id="report" class="report-section section">
<div class="container">
<div class="section-header">
<div class="section-label">Пример отчёта</div>
<h2>Наглядный отчёт, который понимают все</h2>
<p>Не таблицы Excel. Не распмытые заметки. Красивый HTML-отчёт с метриками, графиками и рекомендациями.</p>
</div>
<div class="report-preview">
<div class="report-header">
<h3>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:0.5rem;flex-shrink:0"><rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" opacity="0.3"/><rect x="10" y="7" width="4" height="14" rx="1" fill="currentColor" opacity="0.5"/><rect x="17" y="3" width="4" height="18" rx="1" fill="currentColor" opacity="0.7"/></svg>
Отчёт по звонкам
</h3>
<div class="report-tabs">
<button class="report-tab active" data-tab="overview">Обзор</button>
<button class="report-tab" data-tab="details">Детали</button>
<button class="report-tab" data-tab="recommendations">Рекомендации</button>
</div>
</div>
<div class="report-body">
<!-- TAB: Обзор -->
<div class="report-tab-content active" id="tab-overview">
<div class="report-metrics">
<div class="report-metric">
<div class="report-metric-label">Всего звонков</div>
<div class="report-metric-value">99</div>
<div class="report-metric-change positive">↑ 12% vs прошлый месяц</div>
</div>
<div class="report-metric">
<div class="report-metric-label">Средний балл</div>
<div class="report-metric-value green">6.2</div>
<div class="report-metric-change positive">↑ 0.8 vs прошлый месяц</div>
</div>
<div class="report-metric">
<div class="report-metric-label">Операторов</div>
<div class="report-metric-value blue">12</div>
<div class="report-metric-change">В работе</div>
</div>
<div class="report-metric">
<div class="report-metric-label">Потенциал сделок</div>
<div class="report-metric-value green">~45</div>
<div class="report-metric-change negative">↓ 40% потеряно</div>
</div>
</div>
<div class="report-chart">
<h3 style="font-size:0.875rem;font-weight:600;margin-bottom:1.25rem;">Ошибки по категориям</h3>
<div class="chart-bar-container">
<span class="chart-bar-label">Не представились</span>
<div class="chart-bar-track">
<div class="chart-bar red" style="width:90%;"></div>
</div>
<span class="chart-bar-value">90%</span>
</div>
<div class="chart-bar-container">
<span class="chart-bar-label">Не назвали компанию</span>
<div class="chart-bar-track">
<div class="chart-bar red" style="width:90%;"></div>
</div>
<span class="chart-bar-value">90%</span>
</div>
<div class="chart-bar-container">
<span class="chart-bar-label">Не обсудили бюджет</span>
<div class="chart-bar-track">
<div class="chart-bar red" style="width:85%;"></div>
</div>
<span class="chart-bar-value">85%</span>
</div>
<div class="chart-bar-container">
<span class="chart-bar-label">Не задали вопросы</span>
<div class="chart-bar-track">
<div class="chart-bar yellow" style="width:78%;"></div>
</div>
<span class="chart-bar-value">78%</span>
</div>
<div class="chart-bar-container">
<span class="chart-bar-label">Не спросили имя</span>
<div class="chart-bar-track">
<div class="chart-bar yellow" style="width:80%;"></div>
</div>
<span class="chart-bar-value">80%</span>
</div>
</div>
<div class="report-call-list">
<h3>Последние звонки</h3>
<div class="report-call">
<div class="report-call-score high">8.0</div>
<div class="report-call-info">
<div class="report-call-number">Зарипова Р. — 15:32</div>
<div class="report-call-meta">Длительность: 4 мин 12 сек · 15.06.2025</div>
</div>
<div class="report-call-tags">
<span class="report-tag pass">Приветствие ✓</span>
<span class="report-tag pass">Бюджет ✓</span>
<span class="report-tag fail">Имя ✗</span>
</div>
</div>
<div class="report-call">
<div class="report-call-score low">1.5</div>
<div class="report-call-info">
<div class="report-call-number">Иванов С. — 14:15</div>
<div class="report-call-meta">Длительность: 1 мин 47 сек · 15.06.2025</div>
</div>
<div class="report-call-tags">
<span class="report-tag fail">Приветствие ✗</span>
<span class="report-tag fail">Бюджет ✗</span>
<span class="report-tag fail">Контакт ✗</span>
</div>
</div>
<div class="report-call">
<div class="report-call-score medium">5.0</div>
<div class="report-call-info">
<div class="report-call-number">Петрова А. — 13:45</div>
<div class="report-call-meta">Длительность: 3 мин 28 сек · 14.06.2025</div>
</div>
<div class="report-call-tags">
<span class="report-tag pass">Приветствие ✓</span>
<span class="report-tag fail">Бюджет ✗</span>
<span class="report-tag pass">Имя ✓</span>
</div>
</div>
</div>
</div>
<!-- TAB: Детали -->
<div class="report-tab-content" id="tab-details" style="display:none">
<div class="details-grid">
<div class="detail-card">
<div class="detail-label">Агентство</div>
<div class="detail-value">Недвижимость Плюс</div>
</div>
<div class="detail-card">
<div class="detail-label">Период</div>
<div class="detail-value">01.06 — 15.06.2025</div>
</div>
<div class="detail-card">
<div class="detail-label">Источник</div>
<div class="detail-value">IP-телефония</div>
</div>
<div class="detail-card">
<div class="detail-label">Обработано</div>
<div class="detail-value">99 звонков · 87 329 символов</div>
</div>
</div>
<div class="detail-section">
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Детализация по операторам</h3>
<div class="operator-detail">
<div class="operator-detail-row">
<span>Зарипова Р.</span>
<div class="operator-detail-bar">
<div class="operator-detail-fill" style="width:95%;background:var(--accent-secondary)"></div>
</div>
<span>8.0/10</span>
</div>
<div class="operator-detail-row">
<span>Сидоров К.В.</span>
<div class="operator-detail-bar">
<div class="operator-detail-fill" style="width:82%;background:var(--accent-secondary)"></div>
</div>
<span>6.8/10</span>
</div>
<div class="operator-detail-row">
<span>Петрова А.</span>
<div class="operator-detail-bar">
<div class="operator-detail-fill" style="width:62%;background:var(--warning)"></div>
</div>
<span>5.2/10</span>
</div>
<div class="operator-detail-row">
<span>Иванов С.</span>
<div class="operator-detail-bar">
<div class="operator-detail-fill" style="width:18%;background:var(--error)"></div>
</div>
<span>1.5/10</span>
</div>
</div>
</div>
<div class="detail-section">
<h3 style="font-size:1rem;font-weight:700;margin-bottom:1rem;">Скрипты клиентов</h3>
<div class="script-list">
<div class="script-item">
<div class="script-item-header">
<strong>«Подскажите, а вы работаете с ипотекой?»</strong>
<span class="script-item-badge">Высокий интерес</span>
</div>
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Встречается в 34% звонков. Клиент готов к обсуждению условий</p>
</div>
<div class="script-item">
<div class="script-item-header">
<strong>«Нужна квартира в центре, до 15 млн»</strong>
<span class="script-item-badge" style="background:rgba(34,197,94,0.15);color:var(--accent-secondary)">Горячий лид</span>
</div>
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Чёткий бюджет и требования — 22% звонков</p>
</div>
<div class="script-item">
<div class="script-item-header">
<strong>«Просто посмотрю, пока»</strong>
<span class="script-item-badge" style="background:rgba(239,68,68,0.15);color:var(--error)">Холодный</span>
</div>
<p style="color:var(--text-secondary);font-size:0.8125rem;margin-top:0.25rem;">Клиент не готов к разговору — 44% звонков</p>
</div>
</div>
</div>
</div>
<!-- TAB: Рекомендации -->
<div class="report-tab-content" id="tab-recommendations" style="display:none">
<div class="recommendations-list">
<div class="recommendation-item">
<div class="recommendation-priority high">Высокий</div>
<div class="recommendation-content">
<strong>90% операторов не называют компанию</strong>
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Это первая критическая ошибка. Добавьте скрипт приветствия с названием компании. Ожидаемый рост конверсии: +15-20%</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-priority high">Высокий</div>
<div class="recommendation-content">
<strong>85% не обсуждают бюджет</strong>
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Операторы боятся спрашивать о бюджете. Внедрите вопрос «Какой диапазон бюджета вы рассматриваете?» после описания проблемы клиента</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-priority medium">Средний</div>
<div class="recommendation-content">
<strong>80% не спрашивают имя клиента</strong>
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Персонализация повышает доверие. Добавьте вопрос «Как к вам обращаться?» после первого представления</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-priority medium">Средний</div>
<div class="recommendation-content">
<strong>78% не задают уточняющие вопросы</strong>
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Обучите операторов технике «3 вопроса» — задайте минимум 3 уточняющих вопроса перед предложением</p>
</div>
</div>
<div class="recommendation-item">
<div class="recommendation-priority low">Низкий</div>
<div class="recommendation-content">
<strong>Петрова А. — зона внимания</strong>
<p style="color:var(--text-secondary);font-size:0.875rem;margin-top:0.25rem;">Средний балл 5.2. Рекомендуется прослушать 10 звонков и провести индивидуальный разбор с менеджером</p>
</div>
</div>
<div class="recommendation-summary">
<div class="summary-value">~180 000 ₽</div>
<div class="summary-label">Потенциальный доп. доход при исправлении всех ошибок</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Employee Dashboard -->
<section
id="dashboard"
class="dashboard-section section"
style="scroll-margin-top: 100px"
>
<div class="container">
<div class="section-header">
<div class="section-label">Дашборд по сотрудникам</div>
<h2>Видьте кто продаёт, а кто сливает</h2>
<p>
Рейтинг операторов, конкретные ошибки каждого,
рекомендации по обучению.
</p>
</div>
<div class="dashboard-preview">
<div class="dashboard-body">
<!-- TABLE VIEW -->
<div class="employee-list employee-table-view">
<div class="employee-row header">
<span>Сотрудник</span>
<span>Звонки</span>
<span>Балл</span>
<span>Скрипт</span>
<span>Конверсия</span>
<span>Ср. время</span>
<span>Тренд</span>
</div>
<!-- Зарипова Р. — топ -->
<div class="employee-row rank-1">
<div class="employee-name">
<div class="employee-avatar av2">РМ</div>
<div>
<span class="employee-name-text">Зарипова Р.</span>
<div class="employee-role">Старший оператор</div>
</div>
</div>
<span class="employee-stat">47</span>
<div class="employee-score-cell">
<span class="employee-score score-high">7.8</span>
<div class="score-bar"><div class="score-fill" style="width:78%;background:var(--accent-secondary)"></div></div>
</div>
<div class="employee-score-cell">
<span class="employee-score score-high">92%</span>
<div class="score-bar"><div class="score-fill" style="width:92%;background:var(--accent-secondary)"></div></div>
</div>
<span class="employee-stat">18.3%</span>
<span class="employee-stat">4:12</span>
<span class="trend-indicator trend-up">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+0.8
</span>
</div>
<!-- Петрова А. -->
<div class="employee-row rank-2">
<div class="employee-name">
<div class="employee-avatar av1">АП</div>
<div>
<span class="employee-name-text">Петрова А.</span>
<div class="employee-role">Оператор</div>
</div>
</div>
<span class="employee-stat">38</span>
<div class="employee-score-cell">
<span class="employee-score score-medium">5.4</span>
<div class="score-bar"><div class="score-fill" style="width:54%;background:var(--warning)"></div></div>
</div>
<div class="employee-score-cell">
<span class="employee-score score-high">85%</span>
<div class="score-bar"><div class="score-fill" style="width:85%;background:var(--accent-secondary)"></div></div>
</div>
<span class="employee-stat">12.1%</span>
<span class="employee-stat">3:28</span>
<span class="trend-indicator trend-down">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
-0.3
</span>
</div>
<!-- Козлов Д. -->
<div class="employee-row rank-3">
<div class="employee-name">
<div class="employee-avatar av3">ДК</div>
<div>
<span class="employee-name-text">Козлов Д.</span>
<div class="employee-role">Оператор</div>
</div>
</div>
<span class="employee-stat">52</span>
<div class="employee-score-cell">
<span class="employee-score score-medium">4.6</span>
<div class="score-bar"><div class="score-fill" style="width:46%;background:var(--warning)"></div></div>
</div>
<div class="employee-score-cell">
<span class="employee-score score-medium">68%</span>
<div class="score-bar"><div class="score-fill" style="width:68%;background:var(--warning)"></div></div>
</div>
<span class="employee-stat">8.7%</span>
<span class="employee-stat">2:45</span>
<span class="trend-indicator trend-up">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+0.4
</span>
</div>
<!-- Сидорова Е. -->
<div class="employee-row rank-4">
<div class="employee-name">
<div class="employee-avatar av5">ЕС</div>
<div>
<span class="employee-name-text">Сидорова Е.</span>
<div class="employee-role">Младший оператор</div>
</div>
</div>
<span class="employee-stat">33</span>
<div class="employee-score-cell">
<span class="employee-score score-medium">5.8</span>
<div class="score-bar"><div class="score-fill" style="width:58%;background:var(--warning)"></div></div>
</div>
<div class="employee-score-cell">
<span class="employee-score score-medium">78%</span>
<div class="score-bar"><div class="score-fill" style="width:78%;background:var(--warning)"></div></div>
</div>
<span class="employee-stat">10.5%</span>
<span class="employee-stat">3:15</span>
<span class="trend-indicator trend-up">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>
+1.2
</span>
</div>
<!-- Иванов С. — худший -->
<div class="employee-row rank-5">
<div class="employee-name">
<div class="employee-avatar av4">СИ</div>
<div>
<span class="employee-name-text">Иванов С.</span>
<div class="employee-role">Младший оператор</div>
</div>
</div>
<span class="employee-stat">29</span>
<div class="employee-score-cell">
<span class="employee-score score-low">2.1</span>
<div class="score-bar"><div class="score-fill" style="width:21%;background:var(--error)"></div></div>
</div>
<div class="employee-score-cell">
<span class="employee-score score-low">33%</span>
<div class="score-bar"><div class="score-fill" style="width:33%;background:var(--error)"></div></div>
</div>
<span class="employee-stat">4.2%</span>
<span class="employee-stat">1:47</span>
<span class="trend-indicator trend-down">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
-0.5
</span>
</div>
</div>
<!-- CARD VIEW (mobile-optimized) -->
<div class="employee-list employee-card-view">
<div class="employee-card rank-1">
<div class="card-header">
<div class="card-rank-badge">1</div>
<div class="employee-name">
<div class="employee-avatar av2">РМ</div>
<div>
<span class="employee-name-text">Зарипова Р.</span>
<div class="employee-role">Старший оператор</div>
</div>
</div>
<span class="card-trend card-trend-up">+0.8</span>
</div>
<div class="card-score-ring">
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--accent-secondary)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="74" stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>
<span class="card-score-value">7.8</span>
</div>
<div class="card-metrics">
<div class="card-metric">
<span class="card-metric-value">47</span>
<span class="card-metric-label">Звонки</span>
</div>
<div class="card-metric">
<span class="card-metric-value">92%</span>
<span class="card-metric-label">Скрипт</span>
</div>
<div class="card-metric">
<span class="card-metric-value">18.3%</span>
<span class="card-metric-label">Конв.</span>
</div>
</div>
<div class="card-weakness">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Не всегда берёт контакт</span>
</div>
</div>
<div class="employee-card rank-2">
<div class="card-header">
<div class="card-rank-badge">2</div>
<div class="employee-name">
<div class="employee-avatar av1">АП</div>
<div>
<span class="employee-name-text">Петрова А.</span>
<div class="employee-role">Оператор</div>
</div>
</div>
<span class="card-trend card-trend-down">-0.3</span>
</div>
<div class="card-score-ring">
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="150" stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>
<span class="card-score-value">5.4</span>
</div>
<div class="card-metrics">
<div class="card-metric">
<span class="card-metric-value">38</span>
<span class="card-metric-label">Звонки</span>
</div>
<div class="card-metric">
<span class="card-metric-value">85%</span>
<span class="card-metric-label">Скрипт</span>
</div>
<div class="card-metric">
<span class="card-metric-value">12.1%</span>
<span class="card-metric-label">Конв.</span>
</div>
</div>
<div class="card-weakness">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Редко обсуждает бюджет</span>
</div>
</div>
<div class="employee-card rank-3">
<div class="card-header">
<div class="card-rank-badge">3</div>
<div class="employee-name">
<div class="employee-avatar av3">ДК</div>
<div>
<span class="employee-name-text">Козлов Д.</span>
<div class="employee-role">Оператор</div>
</div>
</div>
<span class="card-trend card-trend-up">+0.4</span>
</div>
<div class="card-score-ring">
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="196" stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>
<span class="card-score-value">4.6</span>
</div>
<div class="card-metrics">
<div class="card-metric">
<span class="card-metric-value">52</span>
<span class="card-metric-label">Звонки</span>
</div>
<div class="card-metric">
<span class="card-metric-value">68%</span>
<span class="card-metric-label">Скрипт</span>
</div>
<div class="card-metric">
<span class="card-metric-value">8.7%</span>
<span class="card-metric-label">Конв.</span>
</div>
</div>
<div class="card-weakness">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Не задаёт уточняющие вопросы</span>
</div>
</div>
<div class="employee-card rank-4">
<div class="card-header">
<div class="card-rank-badge">4</div>
<div class="employee-name">
<div class="employee-avatar av5">ЕС</div>
<div>
<span class="employee-name-text">Сидорова Е.</span>
<div class="employee-role">Младший оператор</div>
</div>
</div>
<span class="card-trend card-trend-up">+1.2</span>
</div>
<div class="card-score-ring">
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--warning)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="138" stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>
<span class="card-score-value">5.8</span>
</div>
<div class="card-metrics">
<div class="card-metric">
<span class="card-metric-value">33</span>
<span class="card-metric-label">Звонки</span>
</div>
<div class="card-metric">
<span class="card-metric-value">78%</span>
<span class="card-metric-label">Скрипт</span>
</div>
<div class="card-metric">
<span class="card-metric-value">10.5%</span>
<span class="card-metric-label">Конв.</span>
</div>
</div>
<div class="card-weakness">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Долгие паузы в разговоре</span>
</div>
</div>
<div class="employee-card rank-5">
<div class="card-header">
<div class="card-rank-badge">5</div>
<div class="employee-name">
<div class="employee-avatar av4">СИ</div>
<div>
<span class="employee-name-text">Иванов С.</span>
<div class="employee-role">Младший оператор</div>
</div>
</div>
<span class="card-trend card-trend-down">-0.5</span>
</div>
<div class="card-score-ring">
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" stroke-width="8"/>
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--error)" stroke-width="8" stroke-dasharray="327" stroke-dashoffset="259" stroke-linecap="round" transform="rotate(-90 60 60)"/>
</svg>
<span class="card-score-value">2.1</span>
</div>
<div class="card-metrics">
<div class="card-metric">
<span class="card-metric-value">29</span>
<span class="card-metric-label">Звонки</span>
</div>
<div class="card-metric">
<span class="card-metric-value">33%</span>
<span class="card-metric-label">Скрипт</span>
</div>
<div class="card-metric">
<span class="card-metric-value">4.2%</span>
<span class="card-metric-label">Конв.</span>
</div>
</div>
<div class="card-weakness">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Не представляет компанию</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-header">
<div class="section-label">Как это работает</div>
<h2>Три простых шага</h2>
</div>
<div class="steps-grid">
<div class="step">
<div class="step-number">1</div>
<h3>Загружаете звонки</h3>
<p>Отправьте 5–10 записей звонков в любом формате: WAV, MP3, M4A</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Локальная ИИ анализирует</h3>
<p>Наш ИИ проверяет по чек-листу: скрипт, тон, ключевые фразы, ошибки</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Получаете отчёт</h3>
<p>Детальный HTML-отчёт с метриками, графиками и рекомендациями</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="section">
<div class="container">
<div class="section-header">
<div class="section-label">Тарифы</div>
<h2>Простые и прозрачные цены</h2>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-name">Бесплатный аудит</div>
<div class="pricing-desc">Попробуйте без обязательств</div>
<div class="pricing-price">0 ₽</div>
<ul class="pricing-features">
<li>До 20 звонков</li>
<li>Базовый отчёт</li>
<li>Общий балл по звонкам</li>
</ul>
<a href="#" class="btn btn-secondary" style="width:100%;justify-content:center;">Загрузить звонки</a>
</div>
<div class="pricing-card featured">
<div class="pricing-label-popular">Популярный</div>
<div class="pricing-name">База</div>
<div class="pricing-desc">Для растущих команд</div>
<div class="pricing-price">4 999 ₽ <span>/мес</span></div>
<ul class="pricing-features">
<li>Неограниченные звонки</li>
<li>Полный отчёт + рекомендации</li>
<li>Дашборд сотрудников</li>
<li>История за 1 месяц</li>
<li>Email-поддержка</li>
</ul>
<a href="#audit" class="btn btn-green" style="width:100%;justify-content:center;">Начать бесплатно</a>
</div>
<div class="pricing-card enterprise">
<div class="pricing-label-custom">Индивидуально</div>
<div class="pricing-name">Бизнес</div>
<div class="pricing-desc">Для компаний с высокими требованиями</div>
<div class="pricing-price">от 30 000 ₽</div>
<ul class="pricing-features">
<li>Всё из тарифа «База»</li>
<li>Интеграция с вашей CRM (Bitrix24, amoCRM, etc.)</li>
<li>Доработка под задачи вашего бизнеса</li>
<li>Кастомные метрики и KPI</li>
<li>Выделенный менеджер</li>
<li>Обучение команды</li>
<li>API-доступ</li>
</ul>
<a href="https://t.me/n1kt4r" target="_blank" class="btn btn-green" style="width:100%;justify-content:center;">Обсудить проект</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container">
<h2>Каждый день без анализа звонков =<br>потерянные деньги клиентов</h2>
<p class="cta-subtitle">
90% операторов не называют компанию. 85% не обсуждают бюджет.
Загрузите 5–10 звонков — узнайте, сколько потеряли и как исправить.
</p>
<div class="hero-buttons">
<a href="#audit" class="btn btn-green">Узнать, сколько потеряли →</a>
<a href="https://t.me/n1kt4r" class="btn btn-green" target="_blank" rel="noopener">Написать в Telegram</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" role="contentinfo" id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo" style="font-size:1.25rem;">calls<span>24</span></a>
<p>Анализ звонков для любого бизнеса. Узнайте, где теряете клиентов — за 24 часа.</p>
<div style="margin-top:1.5rem;">
<a href="https://t.me/n1kt4r" class="btn btn-green" target="_blank" rel="noopener" style="font-size:0.8125rem;">Написать в Telegram</a>
</div>
</div>
<div class="footer-col">
<h5>Продукт</h5>
<ul>
<li><a href="#features">Возможности</a></li>
<li><a href="#pricing">Тарифы</a></li>
<li><a href="#report">Пример отчёта</a></li>
<li><a href="#dashboard">Дашборд</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Компания</h5>
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#" id="privacy-link">Политика конфиденциальности</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Контакты</h5>
<div class="footer-contact">
<a href="https://t.me/n1kt4r" target="_blank" rel="noopener">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3l-4.61-1.47c-1-.316-.966-1 .19-1.5l15.97-6.16c.73-.33 1.43.18 1.15 1.5l-2.72 12.81c-.19.91-.74 1.12-1.5.7l-4.16-3.07-3.88 3.74c-.42.42-.78.78-1.6.78l.21-4.43z"/></svg>
Telegram: @n1kt4r
</a>
<a href="tel:+79177776086">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+7 (917) 777-60-86
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="footer-legal">
<strong>ИП Тарасов Н.О.</strong> · ИНН 164409454858 · ОГРНИП 325046600060241<br>
450000, Республика Башкортостан, г. Уфа<br>
<a href="#" id="privacy-link-footer">Политика конфиденциальности</a>
</div>
<span>© 2026 calls24 · ИП Тарасов Н.О. Все права защищены.</span>
</div>
</div>
</footer>
<!-- Cookie Banner -->
<div class="cookie-banner" id="cookie-banner" role="dialog" aria-label="Cookie consent">
<div class="cookie-inner">
<p class="cookie-text">
Мы используем файлы cookie для персонализации сервисов и повышения удобства работы с сайтом.
Если вы не согласны на их обработку, <a href="#" id="privacy-cookie-link">измените настройки браузера</a>.
</p>
<div class="cookie-buttons">
<button class="btn btn-secondary" id="cookie-decline" style="padding:0.5rem 1rem;font-size:0.8125rem;">Отклонить</button>
<button class="btn btn-green" id="cookie-accept" style="padding:0.5rem 1rem;font-size:0.8125rem;">Принять</button>
</div>
</div>
</div>
<!-- Privacy Policy Modal -->
<div class="privacy-overlay" id="privacy-overlay">
<div class="privacy-modal">
<button class="privacy-close" id="privacy-close">&times;</button>
<h2>Политика конфиденциальности</h2>
<h3>1. Общие положения</h3>
<p>Настоящая Политика конфиденциальности действует в отношении персональных данных пользователя, которые ИП Тарасов Н.О. (далее — «Оператор») может получить от пользователя во время использования сайта calls24.</p>
<h3>2. Персональные данные</h3>
<p>Оператор собирает и хранит следующие персональные данные пользователя: имя, адрес электронной почты, номер телефона, записи телефонных разговоров. Все данные обрабатываются в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
<h3>3. Цели обработки</h3>
<p>Персональные данные используются исключительно для предоставления услуг по анализу звонков, связи с клиентом, улучшения качества сервиса. Оператор не передаёт персональные данные третьим лицам, кроме случаев, предусмотренных законодательством РФ.</p>
<h3>4. Файлы cookie</h3>
<p>Сайт использует файлы cookie для обеспечения корректной работы, аналитики и персонализации контента. Пользователь может отключить использование cookie в настройках своего браузера.</p>
<h3>5. Защита данных</h3>
<p>Оператор принимает необходимые организационные и технические меры для защиты персональных данных пользователя от неправомерного доступа, изменения, раскрытия или уничтожения.</p>
<h3>6. Контактные данные</h3>
<p>ИП Тарасов Н.О.<br>
ИНН 164409454858<br>
ОГРНИП 325046600060241<br>
Telegram: <a href="https://t.me/n1kt4r" style="color:var(--accent);">@n1kt4r</a><br>
Телефон: <a href="tel:+79177776086" style="color:var(--accent);">+7 (917) 777-60-86</a></p>
</div>
</div>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
// ═══════════════════════════════════════════
// HEADER SCROLL EFFECT
// ═══════════════════════════════════════════
const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 50);
});
// ═══════════════════════════════════════════
// COOKIE BANNER
// ═══════════════════════════════════════════
const cookieBanner = document.getElementById('cookie-banner');
const cookieAccept = document.getElementById('cookie-accept');
const cookieDecline = document.getElementById('cookie-decline');
if (!localStorage.getItem('cookie-consent')) {
setTimeout(() => cookieBanner.classList.add('visible'), 1000);
}
cookieAccept.addEventListener('click', () => {
localStorage.setItem('cookie-consent', 'accepted');
cookieBanner.classList.remove('visible');
});
cookieDecline.addEventListener('click', () => {
localStorage.setItem('cookie-consent', 'declined');
cookieBanner.classList.remove('visible');
});
// ═══════════════════════════════════════════
// PRIVACY MODAL
// ═══════════════════════════════════════════
const privacyOverlay = document.getElementById('privacy-overlay');
const privacyClose = document.getElementById('privacy-close');
function openPrivacy() {
privacyOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closePrivacy() {
privacyOverlay.classList.remove('active');
document.body.style.overflow = '';
}
document.getElementById('privacy-link').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
document.getElementById('privacy-link-footer').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
document.getElementById('privacy-cookie-link').addEventListener('click', e => { e.preventDefault(); openPrivacy(); });
privacyClose.addEventListener('click', closePrivacy);
privacyOverlay.addEventListener('click', e => { if (e.target === privacyOverlay) closePrivacy(); });
// ═══════════════════════════════════════════
// GSAP ANIMATIONS
// ═══════════════════════════════════════════
gsap.registerPlugin(ScrollTrigger);
// Header entrance
gsap.from('.header-inner', {
y: -30,
opacity: 0,
duration: 0.8,
ease: 'power3.out'
});
// Hero content
gsap.from('.badge', {
opacity: 0,
y: 20,
duration: 0.6,
delay: 0.2,
ease: 'power2.out'
});
gsap.from('.hero h1', {
opacity: 0,
y: 40,
duration: 0.8,
delay: 0.3,
ease: 'power3.out'
});
gsap.from('.hero-subtitle', {
opacity: 0,
y: 30,
duration: 0.6,
delay: 0.5,
ease: 'power2.out'
});
gsap.from('.hero-buttons', {
opacity: 0,
y: 20,
duration: 0.5,
delay: 0.7,
ease: 'power2.out'
});
gsap.from('.hero-trust', {
opacity: 0,
y: 20,
duration: 0.5,
delay: 0.85,
ease: 'power2.out'
});
// Numbers strip
gsap.from('.numbers-strip', {
scrollTrigger: {
trigger: '.numbers-strip',
start: 'top 80%',
},
opacity: 0,
y: 30,
duration: 0.6,
ease: 'power2.out'
});
gsap.utils.toArray('.number-item').forEach((item, i) => {
gsap.from(item, {
scrollTrigger: {
trigger: item,
start: 'top 85%',
},
opacity: 0,
y: 20,
duration: 0.5,
delay: i * 0.1,
ease: 'power2.out'
});
});
// Features
gsap.from('.section-header', {
scrollTrigger: {
trigger: '.section-header',
start: 'top 80%',
},
opacity: 0,
y: 30,
duration: 0.6,
ease: 'power2.out'
});
gsap.utils.toArray('.feature-card').forEach((card, i) => {
gsap.from(card, {
scrollTrigger: {
trigger: card,
start: 'top 85%',
},
opacity: 0,
y: 30,
duration: 0.5,
delay: i * 0.08,
ease: 'power2.out'
});
});
// Report section
gsap.from('.report-preview', {
scrollTrigger: {
trigger: '.report-section',
start: 'top 75%',
},
opacity: 0,
y: 40,
duration: 0.8,
ease: 'power3.out'
});
// Chart bars animation
gsap.utils.toArray('.chart-bar').forEach(bar => {
const width = bar.style.width;
bar.style.width = '0%';
gsap.to(bar, {
scrollTrigger: {
trigger: bar,
start: 'top 90%',
},
width: width,
duration: 1,
ease: 'power3.out',
delay: 0.3
});
});
// Dashboard
gsap.from('.dashboard-preview', {
scrollTrigger: {
trigger: '.dashboard-section',
start: 'top 75%',
},
opacity: 0,
y: 40,
duration: 0.8,
ease: 'power3.out'
});
gsap.utils.toArray('.employee-row:not(.header), .employee-card').forEach((row, i) => {
gsap.from(row, {
scrollTrigger: {
trigger: row,
start: 'top 85%',
},
opacity: 0,
x: i % 2 === 0 ? -20 : 20,
duration: 0.2,
delay: i * 0.03,
ease: 'power2.out'
});
});
// Steps
gsap.utils.toArray('.step').forEach((step, i) => {
gsap.from(step, {
scrollTrigger: {
trigger: step,
start: 'top 85%',
},
opacity: 0,
y: 30,
duration: 0.5,
delay: i * 0.15,
ease: 'power2.out'
});
});
// Pricing (no animation)
// CTA
gsap.from('.cta-section', {
scrollTrigger: {
trigger: '.cta-section',
start: 'top 75%',
},
opacity: 0,
y: 30,
duration: 0.6,
ease: 'power2.out'
});
// ═══════════════════════════════════════════
// PHYSICS-BASED INTERACTIONS
// ═══════════════════════════════════════════
// Button press effect
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mousedown', () => {
gsap.to(btn, {
scale: 0.97,
duration: 0.08,
ease: 'power2.in',
onComplete: () => {
gsap.to(btn, {
scale: 1,
duration: 0.25,
ease: 'elastic.out(1, 0.4)',
});
}
});
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(link.getAttribute('href'));
if (target) {
gsap.to(window, {
scrollTo: { y: target, offsetY: 80 },
duration: 0.8,
ease: 'power3.inOut'
});
}
});
});
</script>
<!-- GSAP ScrollTo plugin (inline minimal) -->
<script>
// Minimal ScrollTo for anchor links
window.gsapScrollTo = function(target, offsetY) {
const el = typeof target === 'string' ? document.querySelector(target) : target;
if (!el) return;
const top = el.getBoundingClientRect().top + window.pageYOffset - (offsetY || 80);
window.scrollTo({ top: top, behavior: 'smooth' });
};
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(link.getAttribute('href'));
if (target) {
const top = target.getBoundingClientRect().top + window.pageYOffset - 80;
window.scrollTo({ top: top, behavior: 'smooth' });
}
});
});
</script>
<!-- Report Tab Switching -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const tabs = document.querySelectorAll(".report-tab");
tabs.forEach(function(tab) {
tab.addEventListener("click", function() {
const targetTab = this.getAttribute("data-tab");
// Remove active from all tabs
tabs.forEach(function(t) { t.classList.remove("active"); });
this.classList.add("active");
// Hide all content (including inline styles)
var contents = document.querySelectorAll(".report-tab-content");
contents.forEach(function(c) {
c.classList.remove("active");
c.style.display = "none";
});
// Show target
var target = document.getElementById("tab-" + targetTab);
if (target) {
target.classList.add("active");
target.style.display = "block";
}
});
});
});
</script>
</body>
</html>