Files

5251 lines
224 KiB
HTML
Raw Permalink 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 часа."
/>
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/logos/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logos/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/logos/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/logos/apple-touch-icon.png" />
<link rel="manifest" href="/logos/site.webmanifest" />
<meta name="theme-color" content="#22c55e" />
<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;
}
/* ═══════════════════════════════════════════
BACKGROUND
═══════════════════════════════════════════ */
.bg-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}
.bg-grid {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
}
/* ═══════════════════════════════════════════
ACCESSIBILITY
═══════════════════════════════════════════ */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════
ABSTRACT GEOMETRY BACKGROUND (Bauhaus)
═══════════════════════════════════════════ */
body {
position: relative;
}
.bg-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}
.bg-grid {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
}
.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
═══════════════════════════════════════════ */
.logo {
display: inline-flex;
align-items: center;
gap: 0;
text-decoration: none;
transition: opacity 0.2s var(--ease-out);
}
.logo:hover {
opacity: 0.8;
}
.logo svg {
height: 32px;
width: auto;
}
.logo-footer svg {
height: 26px;
width: auto;
}
.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(2, 1fr);
gap: 1.5rem;
max-width: 900px;
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;
overflow: hidden;
}
.pricing-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
opacity: 0;
transition: opacity 0.3s;
}
.pricing-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(255, 61, 0, 0.1);
}
.pricing-card:hover::before {
opacity: 1;
}
.pricing-card.featured {
border-color: var(--accent);
background: linear-gradient(
135deg,
rgba(255, 61, 0, 0.03) 0%,
var(--bg-card) 100%
);
}
.pricing-card.featured::before {
opacity: 1;
}
.pricing-card.featured::after {
content: "Популярный";
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.25rem 0.75rem;
background: var(--accent);
color: white;
font-size: 0.6875rem;
font-weight: 600;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-card.enterprise {
border-color: var(--accent-secondary);
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.05) 0%,
var(--bg-card) 100%
);
}
.pricing-card.enterprise::before {
background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary));
}
.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
═══════════════════════════════════════════ */
/* Report: standalone income block */
.report-income-block {
margin-top: 2rem;
}
.report-income-card {
background: linear-gradient(
135deg,
rgba(34, 197, 94, 0.12),
rgba(34, 197, 94, 0.02)
);
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
}
.report-income-label {
font-size: 0.8125rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
.report-income-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent-secondary);
letter-spacing: -0.03em;
margin-bottom: 0.5rem;
}
.report-income-note {
font-size: 0.875rem;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.report-income-card {
padding: 1.5rem;
}
.report-income-value {
font-size: 2rem;
}
}
@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;
}
/* Mobile nav-cta compact */
.nav-cta {
margin-left: 0;
}
.nav-cta .btn {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
border-radius: var(--radius-sm);
}
}
@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>
<!-- Background Effects -->
<div class="bg-gradient"></div>
<div class="bg-grid"></div>
<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>
<div class="geo-shape geo-dots geo-dots-2"></div>
</div>
<!-- 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">
<svg
viewBox="0 0 340 56"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="lg"
x1="0%"
y1="0%"
x2="100%"
y2="100%"
>
<stop offset="0%" stop-color="#22c55e" />
<stop offset="100%" stop-color="#15803d" />
</linearGradient>
<style>
.wb {
animation: wave 2.4s ease-in-out infinite;
}
.w1 {
animation-delay: 0s;
}
.w2 {
animation-delay: 0.15s;
}
.w3 {
animation-delay: 0.3s;
}
.w4 {
animation-delay: 0.45s;
}
.w5 {
animation-delay: 0.6s;
}
@keyframes wave {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.85);
}
}
.b24 {
animation: bp 2.4s ease-in-out infinite;
}
@keyframes bp {
0%,
100% {
fill: #22c55e;
}
50% {
fill: #86efac;
}
}
</style>
</defs>
<g transform="translate(3,2)">
<rect
class="w1 wb"
x="4"
y="26"
width="6"
height="14"
rx="3"
fill="#22c55e"
opacity=".4"
/>
<rect
class="w2 wb"
x="12"
y="20"
width="6"
height="26"
rx="3"
fill="#22c55e"
opacity=".6"
/>
<rect
class="w3 wb"
x="20"
y="8"
width="6"
height="50"
rx="3"
fill="url(#lg)"
/>
<rect
class="w4 wb"
x="28"
y="20"
width="6"
height="26"
rx="3"
fill="#22c55e"
opacity=".6"
/>
<rect
class="w5 wb"
x="36"
y="26"
width="6"
height="14"
rx="3"
fill="#22c55e"
opacity=".4"
/>
</g>
<text
x="56"
y="44"
font-family="Inter,-apple-system,sans-serif"
font-weight="300"
font-size="30"
fill="#fff"
letter-spacing="-.5"
>
Calls
<tspan class="b24" font-weight="700">24</tspan>
</text>
</svg>
</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="tel:+79177776086" 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">
87
</div>
<div
class="report-metric-change positive"
>
↑ 8% vs прошлый месяц
</div>
</div>
<div class="report-metric">
<div class="report-metric-label">
Средний балл
</div>
<div class="report-metric-value green">
6.3
</div>
<div
class="report-metric-change positive"
>
↑ 1.1 vs прошлый месяц
</div>
</div>
<div class="report-metric">
<div class="report-metric-label">
Агентов
</div>
<div class="report-metric-value blue">
8
</div>
<div class="report-metric-change">
В работе
</div>
</div>
<div class="report-metric">
<div class="report-metric-label">
Сделки в работе
</div>
<div class="report-metric-value green">
~32
</div>
<div
class="report-metric-change negative"
>
↓ 35% потеряно
</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: 88%"
></div>
</div>
<span class="chart-bar-value">88%</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: 82%"
></div>
</div>
<span class="chart-bar-value">82%</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: 75%"
></div>
</div>
<span class="chart-bar-value">75%</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: 68%"
></div>
</div>
<span class="chart-bar-value">68%</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: 70%"
></div>
</div>
<span class="chart-bar-value">70%</span>
</div>
</div>
<div class="report-call-list">
<h3>Последние звонки</h3>
<div class="report-call">
<div class="report-call-score high">
8.2
</div>
<div class="report-call-info">
<div class="report-call-number">
Смирнов А.Н. — 14:22
</div>
<div class="report-call-meta">
Длительность: 6 мин 45 сек ·
18.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 pass"
>Бюджет ✓</span
>
<span class="report-tag fail"
>Ипотека ✗</span
>
</div>
</div>
<div class="report-call">
<div class="report-call-score low">
2.1
</div>
<div class="report-call-info">
<div class="report-call-number">
Орлов Д.С. — 13:08
</div>
<div class="report-call-meta">
Длительность: 1 мин 12 сек ·
18.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.5
</div>
<div class="report-call-info">
<div class="report-call-number">
Белова Е.А. — 11:33
</div>
<div class="report-call-meta">
Длительность: 3 мин 48 сек ·
17.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 — 18.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">
87 звонков · 76 542 символов
</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: 92%;
background: var(
--accent-secondary
);
"
></div>
</div>
<span>7.8/10</span>
</div>
<div class="operator-detail-row">
<span>Орлова И.В.</span>
<div class="operator-detail-bar">
<div
class="operator-detail-fill"
style="
width: 85%;
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: 68%;
background: var(
--warning
);
"
></div>
</div>
<span>5.4/10</span>
</div>
<div class="operator-detail-row">
<span>Кузнецов И.А.</span>
<div class="operator-detail-bar">
<div
class="operator-detail-fill"
style="
width: 55%;
background: var(
--warning
);
"
></div>
</div>
<span>4.6/10</span>
</div>
<div class="operator-detail-row">
<span>Орлов Д.С.</span>
<div class="operator-detail-bar">
<div
class="operator-detail-fill"
style="
width: 28%;
background: var(
--error
);
"
></div>
</div>
<span>2.1/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;
"
>
Встречается в 42% звонков.
Клиент готов к обсуждению
условий финансирования
</p>
</div>
<div class="script-item">
<div class="script-item-header">
<strong
>«Нужна двухкомнатная в
новостройке, до 12 млн,
рядом метро»</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;
"
>
Чёткий бюджет, тип и требования
— 28% звонков
</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;
"
>
Клиент на этапе изучения — 38%
звонков
</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
>88% агентов не называют
агентство при звонке</strong
>
<p
style="
color: var(
--text-secondary
);
font-size: 0.875rem;
margin-top: 0.25rem;
"
>
Критическая ошибка. Внедрите
скрипт: «Агентство Простор,
[Имя], добрый день». Ожидаемый
рост доверия и конверсии:
+18-25%
</p>
</div>
</div>
<div class="recommendation-item">
<div
class="recommendation-priority high"
>
Высокий
</div>
<div class="recommendation-content">
<strong
>75% не выясняют задачу
клиента</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
>70% не уточняют бюджет</strong
>
<p
style="
color: var(
--text-secondary
);
font-size: 0.875rem;
margin-top: 0.25rem;
"
>
Без понимания бюджета агенты
тратят время на нерелевантные
варианты. Добавьте вопрос «Какой
бюджет вы планируете?» на 3-й
минуте разговора
</p>
</div>
</div>
<div class="recommendation-item">
<div
class="recommendation-priority medium"
>
Средний
</div>
<div class="recommendation-content">
<strong
>68% не задают уточняющие
вопросы</strong
>
<p
style="
color: var(
--text-secondary
);
font-size: 0.875rem;
margin-top: 0.25rem;
"
>
Обучите агентов технике «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.4 и 4.6.
Рекомендуется прослушать 10
звонков, отработать скрипты
выяснения задачи и бюджета
</p>
</div>
</div>
</div>
</div>
<!-- Income Block: standalone -->
<div class="report-income-block">
<div class="report-income-card">
<div class="report-income-label">
Потенциальный доп. доход
</div>
<div class="report-income-value">
~1 800 000 ₽
</div>
<div class="report-income-note">
при исправлении всех ошибок
</div>
</div>
</div>
</div>
<p
style="
text-align: center;
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0rem;
opacity: 0.7;
margin-bottom: 1em;
"
>
* Отчёт основан на реальном анализе звонков для
компании в сфере недвижимости. Название компании и
имена изменены.<br />
</p>
</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 av3">
БЕ
</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 av1">
ОИ
</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 av5">
КИ
</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 av5">
КИ
</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 class="employee-card rank-5">
<div class="card-header">
<div class="card-rank-badge">5</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-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"
>33</span
>
<span class="card-metric-label"
>Звонки</span
>
</div>
<div class="card-metric">
<span class="card-metric-value"
>28%</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 featured">
<div class="pricing-label-popular">Популярный</div>
<div class="pricing-name">База</div>
<div class="pricing-desc">Для растущих команд</div>
<div class="pricing-price">
10 000 ₽ <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, и
другие, даже самописные.)
</li>
<li>Доработка под задачи вашего бизнеса</li>
<li>Кастомные метрики и KPI</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 logo-footer">
<svg
viewBox="0 0 340 56"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="lg2"
x1="0%"
y1="0%"
x2="100%"
y2="100%"
>
<stop
offset="0%"
stop-color="#22c55e"
/>
<stop
offset="100%"
stop-color="#15803d"
/>
</linearGradient>
</defs>
<g transform="translate(3,2)">
<rect
x="4"
y="26"
width="6"
height="14"
rx="3"
fill="#22c55e"
opacity=".4"
/>
<rect
x="12"
y="20"
width="6"
height="26"
rx="3"
fill="#22c55e"
opacity=".6"
/>
<rect
x="20"
y="8"
width="6"
height="50"
rx="3"
fill="url(#lg2)"
/>
<rect
x="28"
y="20"
width="6"
height="26"
rx="3"
fill="#22c55e"
opacity=".6"
/>
<rect
x="36"
y="26"
width="6"
height="14"
rx="3"
fill="#22c55e"
opacity=".4"
/>
</g>
<text
x="56"
y="44"
font-family="Inter,-apple-system,sans-serif"
font-weight="300"
font-size="30"
fill="#fff"
letter-spacing="-.5"
>
Calls
<tspan font-weight="700" fill="#22c55e">
24
</tspan>
</text>
</svg>
</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>