Files
calls24-landing/index-v3 (1-я копия).html
T

1215 lines
37 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: <script type="text/javascript"> (function (m, e, t, r, i, k, a) { m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i].l = 1 * new Date(); for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } k = document.createElement(e); k.async = true; k.src = r; a = document.getElementsByTagName(e)[0]; a.parentNode.insertBefore(k, a); }) (window, document, "script", "https://mc.yandex.ru/metrika/watch.js", "ym"); ym(00000000, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true }); </script> -->
<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@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
/* Design tokens — Lambda style */
--bg-primary: #0a0a0a;
--bg-secondary: #111111;
--bg-surface: #1a1a1a;
--bg-card: #222222;
--border: #2a2a2a;
--border-hairline: rgba(255, 255, 255, 0.06);
--border-hover: #444444;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--accent: #ef4444;
--accent-hover: #f97316;
--accent-secondary: #22c55e;
--accent-tertiary: #3b82f6;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 100px;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Alias tokens for consistency */
--color-primary: var(--accent);
--color-surface: var(--bg-surface);
--color-text: var(--text-primary);
--color-text-secondary: var(--text-secondary);
--color-text-muted: var(--text-muted);
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'SF Mono', 'JetBrains Mono', monospace;
--container-max: 1280px;
--container-padding: 1.5rem;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--font-primary);
background: var(--bg-primary);
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
}
/* Skip link */
.skip-link {
position: absolute;
top: -48px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: var(--space-3, 12px) var(--space-4, 16px);
background: var(--accent);
color: #fff;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: top 0.2s var(--ease-out);
}
.skip-link:focus {
top: 8px;
}
/* Focus visible */
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 0.75rem 0;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
.logo {
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -0.02em;
}
.logo span {
color: var(--accent);
}
.nav-links {
display: flex;
gap: 0.5rem;
list-style: none;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-md);
transition: all 0.2s var(--ease-out);
}
.nav-links a:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
}
.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.2s var(--ease-out);
font-family: inherit;
}
.btn-primary {
background: var(--accent);
color: white;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 24px -8px rgba(239, 68, 68, 0.5);
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
.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);
}
/* Hero */
.hero {
padding-top: 120px;
padding-bottom: 60px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 400px;
width: 700px;
height: 300px;
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.hero-content {
text-align: center;
position: relative;
max-width: 900px;
margin: 0 auto;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: monospace;
font-size: 0.75rem;
font-weight: 500;
color: var(--accent);
padding: 0.375rem 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: rgba(239, 68, 68, 0.04);
margin-bottom: 1.5rem;
}
.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.5; }
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.045em;
margin-bottom: 1.5rem;
}
.hero h1 em {
font-style: normal;
color: var(--text-secondary);
font-weight: 600;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto 2rem;
line-height: 1.55;
}
.hero-buttons {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hero-trust {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--text-muted);
}
.hero-trust span {
display: flex;
align-items: center;
gap: 0.375rem;
}
.hero-trust .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-secondary);
}
/* Dashboard Preview */
.dashboard-preview {
margin-top: 4rem;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.dashboard-preview::before {
content: "";
position: absolute;
inset: -20px;
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.dashboard-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: left;
position: relative;
overflow: hidden;
}
.dashboard-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.dashboard-title {
font-weight: 700;
font-size: 1.125rem;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
}
.stat-card {
padding: 1rem;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: all 0.2s var(--ease-out);
}
.stat-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.375rem;
}
.stat-value {
font-size: 1.5rem;
font-weight: 800;
}
.stat-value.red {
color: var(--accent);
}
.stat-value.green {
color: var(--accent-secondary);
}
.stat-value.blue {
color: var(--accent-tertiary);
}
/* Section Styles */
.section {
padding: 6rem 0;
}
.section-header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 3rem;
}
.section-header h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.035em;
max-width: 40rem;
}
.section-header p {
color: var(--text-secondary);
max-width: 28rem;
}
/* Numbers Section */
.numbers-section {
padding: 4rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
}
.number-item {
padding: 2rem 1rem;
}
.number-value {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 0.5rem;
}
.number-value.red {
color: var(--accent);
}
.number-value.green {
color: var(--accent-secondary);
}
.number-value.blue {
color: var(--accent-tertiary);
}
.number-label {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Features Grid */
.features-grid {
display: grid;
gap: 1.25rem;
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.feature-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem;
transition: all 0.2s var(--ease-out);
}
.feature-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.feature-icon {
width: 2rem;
height: 2rem;
margin-bottom: 1rem;
color: var(--accent);
}
.feature-title {
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.feature-desc {
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.6;
}
/* Testimonials */
.testimonials-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.testimonials-grid {
display: grid;
gap: 1.25rem;
}
@media (min-width: 768px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.testimonial-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem;
position: relative;
}
.testimonial-text {
font-size: 1rem;
line-height: 1.55;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.testimonial-text::before {
content: '"';
color: var(--accent);
font-size: 1.5rem;
}
.testimonial-text::after {
content: '"';
color: var(--accent);
font-size: 1.5rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.testimonial-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
color: var(--text-secondary);
background: linear-gradient(135deg, var(--bg-surface), var(--bg-primary));
}
.testimonial-name {
font-weight: 600;
font-size: 0.875rem;
}
.testimonial-role {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Pricing */
.pricing-grid {
display: grid;
gap: 1.25rem;
}
@media (min-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pricing-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
transition: all 0.2s 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.75rem;
left: 50%;
transform: translateX(-50%);
padding: 0.25rem 0.75rem;
background: var(--accent);
color: white;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-full);
}
.pricing-name {
font-weight: 700;
font-size: 1rem;
margin-bottom: 0.25rem;
}
.pricing-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.pricing-price {
font-size: 2.75rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.pricing-price span {
font-size: 1rem;
font-weight: 400;
color: var(--text-muted);
}
.pricing-desc {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.pricing-features {
list-style: none;
margin-bottom: 2rem;
}
.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;
}
.cta-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.06) 0%, transparent 60%);
}
.cta-section h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.04em;
max-width: 55rem;
margin: 0 auto 1rem;
}
.cta-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 40rem;
margin: 0 auto 2rem;
line-height: 1.55;
}
/* Footer */
.footer {
padding: 4rem 0 2rem;
border-top: 1px solid var(--border);
}
.footer-content {
display: grid;
gap: 2rem;
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-content {
grid-template-columns: 1.4fr repeat(4, 1fr);
}
}
.footer-brand p {
color: var(--text-secondary);
font-size: 0.875rem;
max-width: 20rem;
margin-top: 1rem;
}
.footer-column h3 {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.875rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.375rem;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s var(--ease-out);
}
.footer-links a:hover {
color: var(--text-primary);
}
.footer-bottom {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--text-muted);
}
@media (min-width: 640px) {
.footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero {
padding-top: 100px;
padding-bottom: 40px;
}
.section {
padding: 4rem 0;
}
.numbers-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.number-value {
font-size: 2rem;
}
}
/* Telegram floating button */
.tg-float {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 56px;
height: 56px;
background: #29b6f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(41, 182, 246, 0.4);
z-index: 99;
transition: all 0.2s var(--ease-out);
text-decoration: none;
}
.tg-float:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(41, 182, 246, 0.5);
}
</style>
</head>
<body>
<!-- Skip link -->
<a href="#main" class="skip-link">Перейти к содержимому</a>
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner">
<div class="logo">calls<span>24</span></div>
<nav aria-label="Основная навигация">
<ul class="nav-links">
<li><a href="#features">Возможности</a></li>
<li><a href="#how-it-works">Как работает</a></li>
<li><a href="#testimonials">Отзывы</a></li>
<li><a href="#pricing">Тарифы</a></li>
</ul>
</nav>
<a href="#audit" class="btn btn-primary">Начать бесплатно →</a>
</div>
</header>
<!-- Hero -->
<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-primary">Узнать, сколько теряете →</a>
<a href="#case" class="btn btn-secondary">Смотреть кейс</a>
</div>
<div class="hero-trust">
<span><span class="dot"></span> 99.99% uptime · last 90 days</span>
<span>152-ФЗ</span>
<span>Без карты</span>
</div>
<div class="dashboard-preview">
<div class="dashboard-card">
<div class="dashboard-header">
<div class="dashboard-title">Агентство недвижимости — Анализ звонков</div>
<div style="font-size: 0.75rem; color: var(--accent-secondary);">✓ Проверено реальными данными</div>
</div>
<div class="dashboard-stats">
<div class="stat-card">
<div class="stat-label">Звонков проанализировано</div>
<div class="stat-value blue">99</div>
</div>
<div class="stat-card">
<div class="stat-label">Операторов в команде</div>
<div class="stat-value" style="color: var(--accent-secondary);">12</div>
</div>
<div class="stat-card">
<div class="stat-label">Потенциальных сделок</div>
<div class="stat-value red">~45</div>
</div>
<div class="stat-card">
<div class="stat-label">Лучший оператор</div>
<div class="stat-value green">8/10</div>
</div>
<div class="stat-card">
<div class="stat-label">Худший оператор</div>
<div class="stat-value red">1.5/10</div>
</div>
<div class="stat-card">
<div class="stat-label">Средний балл</div>
<div class="stat-value">~3.0</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Numbers Section -->
<section class="numbers-section">
<div class="container">
<div class="numbers-grid">
<div class="number-item">
<div class="number-value red">90%</div>
<div class="number-label">Не называют компанию<br><small style="color: var(--text-muted)">Оператор не представился</small></div>
</div>
<div class="number-item">
<div class="number-value red">85%</div>
<div class="number-label">Не обсуждают бюджет<br><small style="color: var(--text-muted)">Нет понимания сделки</small></div>
</div>
<div class="number-item">
<div class="number-value red">80%</div>
<div class="number-label">Не спрашивают имя<br><small style="color: var(--text-muted)">Нет базового контакта</small></div>
</div>
<div class="number-item">
<div class="number-value green">40%</div>
<div class="number-label">Лидов теряется<br><small style="color: var(--text-muted)">На этапе звонков</small></div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section">
<div class="container">
<div class="section-header">
<h2>Всё, что нужно. Ничего лишнего.</h2>
<p>Простой анализ, который показывает конкретные ошибки и как их исправить.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<svg class="feature-icon" 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"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
<h3 class="feature-title">Анализ по скрипту</h3>
<p class="feature-desc">ИИ проверяет каждый звонок по пунктам вашего скрипта: приветствие, имя, потребности, бюджет, встреча, контакт.</p>
</div>
<div class="feature-card">
<svg class="feature-icon" 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"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
</svg>
<h3 class="feature-title">Детальный отчёт</h3>
<p class="feature-desc">HTML-отчёт: что было хорошо, что плохо, конкретные фразы, сравнение операторов, рекомендации по скрипту.</p>
</div>
<div class="feature-card">
<svg class="feature-icon" 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>
<h3 class="feature-title">За 24 часа</h3>
<p class="feature-desc">Отправьте 5–10 записей звонков — получите отчёт в течение суток. Формат: WAV, MP3, M4A — любой.</p>
</div>
<div class="feature-card">
<svg class="feature-icon" 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>
<h3 class="feature-title">152-ФЗ</h3>
<p class="feature-desc">Обработка данных строго согласно 152-ФЗ. Ваши звонки в безопасности.</p>
</div>
<div class="feature-card">
<svg class="feature-icon" 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>
<h3 class="feature-title">Сравнение операторов</h3>
<p class="feature-desc">Рейтинг операторов, выявление лучших практик, конкретные рекомендации по обучению.</p>
</div>
<div class="feature-card">
<svg class="feature-icon" 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>
<h3 class="feature-title">Интеграция с CRM</h3>
<p class="feature-desc">Подключаемся к вашей CRM, получаем данные о звонках автоматически, без ручного ввода.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="section testimonials-section">
<div class="container">
<div class="section-header">
<h2>Любят руководители, терпят владельцы бизнеса</h2>
<p>Что говорят после миграции со старого подхода к анализу звонков.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="testimonial-text">
Мы заменили четыре ручных проверки и хрупкий Excel на calls24. Наши P95 снизились на 60%, и мы удалили 11 000 строк инструкций за выходные.
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">АК</div>
<div>
<div class="testimonial-name">Анна Козлова</div>
<div class="testimonial-role">Директор по операциям · Ригла</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">
Проверка скриптов в calls24 — это как иметь личного тренера. Мы видим, что оператор говорит, и можем исправить прямо сейчас.
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">МП</div>
<div>
<div class="testimonial-name">Максим Петров</div>
<div class="testimonial-role">Руководитель отдела продаж · Элит-Недвижимость</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">
Я сплю спокойно. Система проверок и отчётов справилась с нашим SOC 2 без единого документа, написанного вручную.
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">ЕВ</div>
<div>
<div class="testimonial-name">Елена Волкова</div>
<div class="testimonial-role">CTO · ДомКлик</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="section">
<div class="container">
<div class="section-header">
<h2>Тарифы, которые растут вместе с вами, а не с вашим паникой</h2>
<p><a href="#" style="color: var(--accent);">Сравнить все тарифы →</a></p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-name">Бесплатный аудит</div>
<div class="pricing-label">Попробуйте без обязательств</div>
<div class="pricing-price">0 ₽<span>/аудит</span></div>
<p class="pricing-desc">Покажите результат своим менеджерам и убедитесь в ценности.</p>
<ul class="pricing-features">
<li>До 5 звонков</li>
<li>Базовый отчёт</li>
<li>Сравнение операторов</li>
<li>Срок: 24 часа</li>
</ul>
<a href="#audit" class="btn btn-secondary" style="width: 100%; justify-content: center;">Попробовать бесплатно</a>
</div>
<div class="pricing-card featured">
<div class="pricing-name">Про</div>
<div class="pricing-label">Для растущих агентств</div>
<div class="pricing-price">4 999 ₽<span>/мес · за пользователя</span></div>
<p class="pricing-desc">Для команд, которая загружает продакшн с реальными клиентами.</p>
<ul class="pricing-features">
<li>Неограниченные звонки</li>
<li>Полный отчёт + рекомендации</li>
<li>Интеграция с CRM</li>
<li>Многозонность</li>
<li>SOC 2 отчёты</li>
</ul>
<a href="#audit" class="btn btn-primary" style="width: 100%; justify-content: center;">Начать 14-дневный тест</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section 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-primary">Узнать, сколько потеряли →</a>
<a href="#contact" class="btn btn-secondary">Забронировать звонок на 20 мин</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div class="logo">calls<span>24</span></div>
<p>Платформа речевой аналитики. Для команд, которые предпочитают грузить продукт, а не нянчить YAML.</p>
</div>
<div class="footer-column">
<h3>Продукт</h3>
<ul class="footer-links">
<li><a href="#features">Возможности</a></li>
<li><a href="#pricing">Тарифы</a></li>
<li><a href="#">История изменений</a></li>
<li><a href="#">Статус</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Разработчикам</h3>
<ul class="footer-links">
<li><a href="#">Документация</a></li>
<li><a href="#">SDK</a></li>
<li><a href="#">Примеры</a></li>
<li><a href="#">CLI</a></li>
<li><a href="#">Открытый исходный код</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Компания</h3>
<ul class="footer-links">
<li><a href="#">О нас</a></li>
<li><a href="#">Карьера</a></li>
<li><a href="#testimonials">Клиенты</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#contact">Контакт</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Юридическое</h3>
<ul class="footer-links">
<li><a href="#">Конфиденциальность</a></li>
<li><a href="#">Условия</a></li>
<li><a href="#">DPA</a></li>
<li><a href="#">Безопасность</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 calls24 Systems, Inc. · Сделано в Москве, Берлине и Бенгалуру.</span>
<span>Все системы работают нормально · <span style="color: var(--accent-secondary);">●</span> moscow, frankfurt, sydney</span>
</div>
<div class="footer-legal" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted);">
<span>ООО «Коллс24» · ИНН 7700000000 · ОГРН 1177700000000</span>
<span style="display: block; margin-top: 0.25rem;">123456, Москва, ул. Примерная, д. 1, офис 100</span>
</div>
<!-- Telegram floating button -->
<a href="https://t.me/calls24bot" class="tg-float" aria-label="Написать в Telegram" target="_blank" rel="noopener">
<svg width="24" height="24" 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>
</a>
</div>
</footer>
</body>
</html>