5251 lines
224 KiB
HTML
5251 lines
224 KiB
HTML
<!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">
|
||
×
|
||
</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>
|