Improve landing: remove free tier, add gradient/grid background, enhance pricing cards

STATUS.md

@@ -10,9 +10,32 @@
     - На десктопе отображается таблица с новыми колонками (Балл, Скрипт, Конверсия, Ср. время, Тренд).
     - На мобильном (≤768px) автоматически отображаются карточки.
     - В карточках добавлены круговые диаграммы (score-ring) и блок "Слабое место" (weakness).
+- [x] Мобильный отчёт: заголовок + табы вертикально, теги звонков друг под другом.
+- [x] Детали на мобильном: `details-grid` → 2 колонки (≤768px), 1 колонка (≤480px).
+- [x] Заменено "Муталова Р." → "Зарипова Р." в отчёте.
+- [x] Заменено "ИП Тарасов И.А." → "ИП Тарасов Н.О." (footer + privacy policy).
+- [x] Удалено "Без карты" из hero-секции.
+- [x] Тариф "Про" → "База", "История за 12 месяцев" → "История за 1 месяц".
+- [x] Удалён тариф "Бизнес" полностью (с CSS).
+- [x] Удалён мусор "rks -->" после дашборда.
+- [x] Анимация карточек сотрудников ускорена (duration 0.5→0.2, delay 0.06→0.03).
+- [x] **Создан логотипный набор (7 концептов):** `logos/`
+    - logo-01: Wordmark + Sound Wave
+    - logo-02: Circle Sound Wave (иконка/фавикон)
+    - logo-03: Phone + Wave
+    - logo-04: Hex Data Grid (Bauhaus) → без рамки, зелёная волна
+    - logo-04a: Hex-Wave + "Calls24" — Inter шрифт ★ (выбран для интеграции)
+    - logo-04b: Hex-Wave + "Calls24" — Manrope шрифт
+    - logo-05: C-Wave (Apple-like letterform)
+    - logo-06: Hexagon + C-Wave (красная волна)
+    - Все: wordmark + icon-only + чёрная версия
+    - Превью: `logos/preview.html`
+- [x] **Логотип интегрирован в страницу:**
+    - Header: анимированная версия (непрерывная волна, пульсация "24", мерцающая линия)
+    - Footer: статичная версия (без анимации)
 
 ## 🚧 В процессе
-- Нет.
+- Выбор логотипа → интеграция в header/footer
 
 ## 🛠 Инструменты
 - **Git**: `/home/nik/projects/wow-design/calls24-landing/.git`
@@ -20,4 +43,8 @@
 - **Пресеты**: `prompts/` — адаптация, кнопки, дашборд
 
 ## 📝 План изменений
-- [ ] ...
+- [ ] Выбрать логотип из 7 вариантов (logo-04a Inter или 04b Manrope — рекомендуемые)
+- [ ] Интегрировать логотип в header (ref=e1)
+- [ ] Обновить footer logo (ref=e11)
+- [ ] Создать favicon (logo-04-icon-only.svg, 32px PNG)
+- [ ] Добавить Google Fonts import в HTML (Inter или Manrope) 

generate_favicons.py

@@ -0,0 +1,157 @@
+#!/usr/bin/env python3
+"""Generate favicons for calls24 landing page."""
+
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+COLOR_ACCENT = "#22c55e"
+COLOR_WHITE = "#ffffff"
+COLOR_DARK = "#0a0a0a"
+COLOR_GREEN_LIGHT = "#86efac"
+
+OUTPUT_DIR = os.path.dirname(os.path.abspath(__file__))
+LOGOS_DIR = os.path.join(OUTPUT_DIR, "logos")
+
+def create_gradient_bg(img, size, color1=COLOR_DARK, color2="#111111"):
+    """Create dark gradient background."""
+    for y in range(size):
+        ratio = y / size
+        r = int(color1[1:3], 16) + int((int(color2[1:3], 16) - int(color1[1:3], 16)) * ratio)
+        g = int(color1[3:5], 16) + int((int(color2[3:5], 16) - int(color1[3:5], 16)) * ratio)
+        b = int(color1[5:7], 16) + int((int(color2[5:7], 16) - int(color1[5:7], 16)) * ratio)
+        draw = ImageDraw.Draw(img)
+        draw.line([(0, y), (size, y)], fill=f"#{r:02x}{g:02x}{b:02x}")
+
+def draw_wave_icon(draw, cx, cy, size, color=COLOR_ACCENT, width=0.6):
+    """Draw the signature wave icon (bar chart style)."""
+    bar_w = size // 9
+    gap = size // 12
+    max_h = int(size * width)
+    heights = [0.35, 0.65, 1.0, 0.65, 0.35]  # Wave shape
+    
+    total_w = len(heights) * bar_w + (len(heights) - 1) * gap
+    start_x = cx - total_w // 2
+    
+    for i, h_ratio in enumerate(heights):
+        x = start_x + i * (bar_w + gap)
+        h = int(max_h * h_ratio)
+        y = cy - h // 2
+        
+        # Semi-transparent bars
+        alpha = int(255 * (0.3 + 0.7 * h_ratio / 1.0))
+        rgb = tuple(int(COLOR_ACCENT[i:i+2], 16) for i in (1, 3, 5))
+        fill_color = f"#{rgb[0]:02x}{rgb[1]:02x}{rgb[2]:02x}{alpha:02x}"
+        draw.rectangle([x, y, x + bar_w - 1, y + h], fill=fill_color)
+
+def draw_wave_with_dot(draw, cx, cy, size, color=COLOR_ACCENT):
+    """Draw wave icon with accent dot (center bar top)."""
+    bar_w = size // 9
+    gap = size // 12
+    max_h = int(size * 0.6)
+    heights = [0.35, 0.65, 1.0, 0.65, 0.35]
+    
+    total_w = len(heights) * bar_w + (len(heights) - 1) * gap
+    start_x = cx - total_w // 2
+    
+    # Draw bars
+    for i, h_ratio in enumerate(heights):
+        x = start_x + i * (bar_w + gap)
+        h = int(max_h * h_ratio)
+        y = cy - h // 2
+        
+        if i == 2:  # Center bar - full color
+            draw.rectangle([x, y, x + bar_w - 1, y + h], fill=color)
+        else:
+            alpha = int(255 * (0.3 + 0.7 * h_ratio))
+            rgb = tuple(int(color[ii:ii+2], 16) for ii in (1, 3, 5))
+            draw.rectangle([x, y, x + bar_w - 1, y + h], 
+                          fill=f"#{rgb[0]:02x}{rgb[1]:02x}{rgb[2]:02x}{alpha:02x}")
+        
+        # Dot at top of center bar
+        if i == 2:
+            dot_r = bar_w // 2
+            draw.ellipse([x + bar_w//2 - dot_r, y - dot_r, 
+                         x + bar_w//2 + dot_r, y + dot_r], fill=COLOR_GREEN_LIGHT)
+
+def generate_favicon_ico(png_files):
+    """Generate ICO file from PNG files using ImageMagick."""
+    png_paths = [os.path.join(LOGOS_DIR, f) for f in png_files]
+    ico_path = os.path.join(LOGOS_DIR, "favicon.ico")
+    
+    # Use ImageMagick to create multi-size ICO
+    os.system(f"convert {' '.join(png_paths)} -define icon:auto-resize=16,32,48 {ico_path} 2>/dev/null")
+    
+    if os.path.exists(ico_path):
+        print(f"✓ favicon.ico (from PNGs)")
+    else:
+        # Fallback: create from largest
+        os.system(f"convert {png_paths[-1]} -define icon:auto-resize=16,32,48 {ico_path} 2>/dev/null")
+        print("✓ favicon.ico (fallback)")
+
+def generate_png(size, filename):
+    """Generate PNG favicon."""
+    img = Image.new("RGBA", (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+    
+    cx, cy = size // 2, size // 2
+    
+    # Dark circle background with rounded corners
+    padding = size // 6
+    draw.rounded_rectangle([padding, padding, size-padding, size-padding], 
+                          radius=size//4, fill=COLOR_DARK)
+    
+    draw_wave_with_dot(draw, cx, cy, size - size//3)
+    
+    img.save(os.path.join(LOGOS_DIR, filename))
+    print(f"✓ {filename}")
+
+def generate_apple_touch_icon():
+    """Generate Apple Touch Icon (180x180)."""
+    img = Image.new("RGBA", (180, 180), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+    
+    # Dark background
+    draw.rounded_rectangle([0, 0, 179, 179], radius=36, fill=COLOR_DARK)
+    
+    cx, cy = 90, 90
+    draw_wave_with_dot(draw, cx, cy, 120)
+    
+    img.save(os.path.join(LOGOS_DIR, "apple-touch-icon.png"))
+    print("✓ apple-touch-icon.png")
+
+def generate_web_manifest():
+    """Generate site.webmanifest."""
+    manifest = {
+        "name": "calls24 — Анализ звонков",
+        "short_name": "calls24",
+        "description": "Автоматический анализ звонков за 24 часа",
+        "icons": [
+            {"src": "/logos/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
+            {"src": "/logos/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"},
+        ],
+        "theme_color": "#22c55e",
+        "background_color": "#0a0a0a",
+        "display": "standalone"
+    }
+    
+    import json
+    with open(os.path.join(LOGOS_DIR, "site.webmanifest"), "w") as f:
+        json.dump(manifest, f, ensure_ascii=False, indent=2)
+    print("✓ site.webmanifest")
+
+# Generate all favicons
+print("🎨 Generating favicons for calls24...\n")
+
+# Generate PNGs first
+generate_png(16, "favicon-16x16.png")
+generate_png(32, "favicon-32x32.png")
+generate_png(192, "android-chrome-192x192.png")
+generate_png(512, "android-chrome-512x512.png")
+generate_apple_touch_icon()
+generate_web_manifest()
+
+# Create ICO from PNGs
+print()
+generate_favicon_ico(["favicon-16x16.png", "favicon-32x32.png", "android-chrome-192x192.png"])
+
+print("\n✅ All favicons generated in logos/ folder")

logos/README.md

@@ -0,0 +1,102 @@
+# calls24 — Logo Set
+
+**Дата:** 19.06.2026  
+**Стек:** Pure SVG, без внешних зависимостей, полностью self-hosted
+
+## Файлы
+
+```
+logos/
+├── README.md                  ← этот файл
+├── preview.html               ← превью всех 5 логотипов
+│
+├── logo-01-wordmark-wave.svg           # Главный вариант
+├── logo-01-wordmark-wave-icon-only.svg # Иконка только (фавикон)
+├── logo-01-wordmark-wave-black.svg     # Чёрная версия
+│
+├── logo-02-circle-wave.svg
+├── logo-02-circle-wave-black.svg
+│
+├── logo-03-phone-wave.svg
+├── logo-03-phone-wave-black.svg
+│
+├── logo-04-hex-data.svg
+├── logo-04-hex-data-black.svg
+│
+├── logo-05-c-wave.svg
+└── logo-05-c-wave-black.svg
+```
+
+## Концепции
+
+### 01. Wordmark + Sound Wave (главный)
+- **Тип:** Словоформ с иконкой
+- **Формат:** Горизонтальный (320x60)
+- **Иконка:** 5 вертикальных баров — аудио-волна слева от текста
+- **Цвет:** Зелёный градиент (#22c55e → #16a34a)
+- **Текст:** `calls` белый, `24` зелёный
+- **Шрифт:** Inter Bold / SF Pro / -apple-system
+- **Использование:** header, футер, презентации, сайт
+- **Файлы:** wordmark + icon-only + black version
+
+### 02. Circle Sound Wave
+- **Тип:** Circular icon / Favicon
+- **Формат:** Квадрат 60x60, центрированный
+- **Форма:** Круг с аудио-волной внутри
+- **Использование:** фавикон, иконка приложения, avatars, дашборд
+
+### 03. Phone + Wave
+- **Тип:** Line-art icon
+- **Формат:** Квадрат 60x60
+- **Форма:** Телефонная трубка + исходящие волны
+- **Использование:** иконка раздела звонков, кнопки, иллюстрации
+
+### 04. Hex Data Grid
+- **Тип:** Geometric icon (Bauhaus)
+- **Формат:** Квадрат 60x60, гексагон
+- **Форма:** Гексагон с аудио-волной и точками данных
+- **Использование:** премиальный вариант, tech-ассоциация, дашборд
+
+### 05. C-Wave
+- **Тип:** Abstract letterform
+- **Формат:** Квадрат 60x60
+- **Форма:** Буква «C» → звуковая волна (непрерывный path)
+- **Использование:** минималистичный вариант, Apple-like, favicon
+
+## Цвета
+
+| Назначение | HEX |
+|-----------|-----|
+| Зелёный акцент | #22c55e |
+| Зелёный тёмный | #16a34a |
+| Зелёный глубокий | #15803d |
+| Белый | #ffffff |
+| Чёрный | #000000 |
+
+## Использование
+
+### В HTML
+```html
+<!-- Wordmark (header) -->
+<img src="logos/logo-01-wordmark-wave.svg" alt="calls24" height="48">
+
+<!-- Icon only (favicon / mobile header) -->
+<img src="logos/logo-01-wordmark-wave-icon-only.svg" alt="calls24" height="32">
+
+<!-- Icon variant -->
+<img src="logos/logo-02-circle-wave.svg" alt="calls24" height="32">
+```
+
+### В SVG (inline, рекомендуемо)
+```html
+<svg class="calls24-logo" role="img" aria-label="calls24">
+  <use href="logos/logo-01-wordmark-wave.svg"/>
+</svg>
+```
+
+### CSS
+```css
+/* Зелёный акцент из логотипа */
+.calls24 .cta { color: #22c55e; }
+.calls24 .accent { background: linear-gradient(135deg, #22c55e, #15803d); }
+```

logos/logo-01-wordmark-wave-black.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #01 — Чёрная версия (для печати, гравировки, светлого фона) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
+  <g transform="translate(4, 5)">
+    <rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000000"/>
+    <rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000000" opacity="0.85"/>
+    <rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000000" opacity="0.7"/>
+    <rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000000" opacity="0.85"/>
+    <rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000000" opacity="0.6"/>
+  </g>
+  <text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#000000">
+    calls<tspan fill="#22c55e">24</tspan>
+  </text>
+</svg>

logos/logo-01-wordmark-wave-icon-only.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #01 — Иконка только (для фавикона, шапки, мобильного) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="w1" 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, 3)">
+    <rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
+    <rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
+    <rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
+    <rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
+    <rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
+  </g>
+</svg>

logos/logo-01-wordmark-wave.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #01: Minimalist Wordmark + Sound Wave -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
+  <defs>
+    <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#16a34a"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Sound wave icon (left) -->
+  <g transform="translate(4, 5)">
+    <rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#waveGrad)"/>
+    <rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
+    <rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#waveGrad)" opacity="0.7"/>
+    <rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
+    <rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#waveGrad)" opacity="0.6"/>
+  </g>
+  
+  <!-- Wordmark -->
+  <text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#ffffff">
+    calls<tspan fill="#22c55e">24</tspan>
+  </text>
+</svg>

logos/logo-02-circle-wave-black.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #02 — Чёрная версия -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <circle cx="30" cy="30" r="28" fill="none" stroke="#000000" stroke-width="2" opacity="0.15"/>
+  <rect x="25" y="14" width="10" height="32" rx="5" fill="#000000"/>
+  <rect x="14" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
+  <rect x="6" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
+  <rect x="40" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
+  <rect x="48" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
+</svg>

logos/logo-02-circle-wave.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #02: Geometric Circle Sound Wave -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="waveGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Outer circle ring -->
+  <circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
+  
+  <!-- Sound wave bars inside circle -->
+  <g transform="translate(0, 0)">
+    <!-- Center vertical bar -->
+    <rect x="25" y="14" width="10" height="32" rx="5" fill="url(#waveGrad2)"/>
+    <!-- Left bars -->
+    <rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
+    <rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
+    <!-- Right bars -->
+    <rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
+    <rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
+  </g>
+</svg>

logos/logo-03-phone-wave-black.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #03 — Чёрная версия -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <g transform="translate(5, 2)">
+    <path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="round"/>
+    <path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+    <path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+    <path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+  </g>
+</svg>

logos/logo-03-phone-wave.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #03: Phone Handset + Sound Wave -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="phoneGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#16a34a"/>
+    </linearGradient>
+  </defs>
+  
+  <g transform="translate(5, 2)">
+    <!-- Phone handset outline -->
+    <path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round"/>
+    
+    <!-- Sound waves emanating -->
+    <path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+    <path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+    <path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+  </g>
+</svg>

logos/logo-04-animated-loop.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo — Animated Loop: continuous wave, no dots, pulsing 24 -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+    <style>
+      /* Wave bars — continuous breathing */
+      .w { 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); }
+      }
+      /* "24" bright pulse */
+      .b24 { animation: brightPulse 2.4s ease-in-out infinite; }
+      @keyframes brightPulse {
+        0%, 100% { fill: #22c55e; filter: drop-shadow(0 0 0px transparent); }
+        50% { fill: #4ade80; filter: drop-shadow(0 0 6px rgba(34,197,94,0.5)); }
+      }
+      /* Tech line — pulse */
+      .tech-line {
+        stroke-dasharray: 30;
+        animation: linePulse 3s ease-in-out infinite;
+      }
+      @keyframes linePulse {
+        0%, 100% { opacity: 0.8; }
+        50% { opacity: 0.2; }
+      }
+      /* Gradient shimmer */
+      .grad-stop { animation: shimmer 3s ease-in-out infinite; }
+      @keyframes shimmer {
+        0%, 100% { stop-color: #22c55e; }
+        50% { stop-color: #4ade80; }
+      }
+    </style>
+  </defs>
+
+  <!-- Animated Wave (no dots) -->
+  <g transform="translate(2, 2)">
+    <rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+    <rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+  </g>
+
+  <!-- Wordmark -->
+  <text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">Calls<tspan class="b24" font-weight="700">24</tspan></text>
+  
+  <!-- Tech line -->
+  <line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+</svg>

logos/logo-04-hex-data-black.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Чёрная версия -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <rect x="14" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
+  <rect x="22" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
+  <rect x="30" y="14" width="6" height="38" rx="3" fill="#000000"/>
+  <rect x="38" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
+  <rect x="46" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
+  <circle cx="17" cy="24" r="2" fill="#000000" opacity="0.3"/>
+  <circle cx="25" cy="18" r="2" fill="#000000" opacity="0.5"/>
+  <circle cx="33" cy="12" r="2" fill="#000000"/>
+  <circle cx="41" cy="18" r="2" fill="#000000" opacity="0.5"/>
+  <circle cx="49" cy="24" r="2" fill="#000000" opacity="0.3"/>
+</svg>

logos/logo-04-hex-data.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04: Hexagonal Data Grid (Bauhaus) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Internal data bars (sound wave inside hex boundary) -->
+  <rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+  <rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+  <rect x="30" y="14" width="6" height="38" rx="3" fill="url(#hexGrad)"/>
+  <rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+  <rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+  
+  <!-- Data points -->
+  <circle cx="17" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+  <circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+  <circle cx="33" cy="12" r="2" fill="#22c55e"/>
+  <circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+  <circle cx="49" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+</svg>

logos/logo-04-icon-only.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Иконка только (фавикон, мобильный header) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="hexGrad" 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(2, 2)">
+    <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+    <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+    <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+    <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+  </g>
+</svg>

logos/logo-04-wordmark-animated.svg

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Animated Wordmark: Icon + "Calls24" -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e">
+        <animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+    <style>
+      /* Wave bars */
+      .bar {
+        transform-origin: bottom center;
+        animation: barGrow 1.2s ease-out forwards;
+        opacity: 0;
+      }
+      .bar1 { animation-delay: 0.1s; }
+      .bar2 { animation-delay: 0.2s; }
+      .bar3 { animation-delay: 0.3s; }
+      .bar4 { animation-delay: 0.4s; }
+      .bar5 { animation-delay: 0.5s; }
+      @keyframes barGrow {
+        0% { transform: scaleY(0); opacity: 0; }
+        100% { transform: scaleY(1); opacity: 1; }
+      }
+      /* Pulse on center bar */
+      .bar3 { animation: barGrow 1.2s ease-out forwards, pulseBar 3s ease-in-out infinite 1.5s; }
+      @keyframes pulseBar {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.7; }
+      }
+      /* Data points */
+      .dot {
+        opacity: 0;
+        animation: dotIn 0.6s ease-out forwards;
+      }
+      .dot1 { animation-delay: 0.5s; }
+      .dot2 { animation-delay: 0.6s; }
+      .dot3 { animation-delay: 0.7s; }
+      .dot4 { animation-delay: 0.8s; }
+      .dot5 { animation-delay: 0.9s; }
+      @keyframes dotIn {
+        0% { opacity: 0; transform: scale(0); }
+        60% { transform: scale(1.3); }
+        100% { opacity: var(--o, 0.5); transform: scale(1); }
+      }
+      /* Text */
+      .wordmark {
+        opacity: 0;
+        transform: translateX(-10px);
+        animation: textIn 0.8s ease-out forwards;
+        animation-delay: 0.6s;
+      }
+      @keyframes textIn {
+        0% { opacity: 0; transform: translateX(-10px); }
+        100% { opacity: 1; transform: translateX(0); }
+      }
+      /* Tech line */
+      .tech-line {
+        stroke-dasharray: 30;
+        stroke-dashoffset: 30;
+        animation: lineDraw 0.6s ease-out forwards;
+        animation-delay: 1.2s;
+      }
+      @keyframes lineDraw {
+        0% { stroke-dashoffset: 30; }
+        100% { stroke-dashoffset: 0; }
+      }
+      /* Floating particles */
+      .particle {
+        opacity: 0;
+        animation: float 4s ease-in-out infinite;
+      }
+      .particle:nth-child(1) { animation-delay: 2s; }
+      .particle:nth-child(2) { animation-delay: 2.5s; }
+      @keyframes float {
+        0%, 100% { opacity: 0; transform: translateY(0); }
+        50% { opacity: 0.6; transform: translateY(-3px); }
+      }
+    </style>
+  </defs>
+
+  <!-- ===== ICON: Animated Sound Wave ===== -->
+  <g transform="translate(2, 2)">
+    <rect class="bar bar1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <rect class="bar bar2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect class="bar bar3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+    <rect class="bar bar4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect class="bar bar5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    
+    <!-- Data points -->
+    <circle class="dot dot1" cx="7" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
+    <circle class="dot dot2" cx="15" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
+    <circle class="dot dot3" cx="23" cy="6" r="2" fill="#22c55e" style="--o: 1" opacity="1"/>
+    <circle class="dot dot4" cx="31" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
+    <circle class="dot dot5" cx="39" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
+    
+    <!-- Floating particles -->
+    <circle class="particle" cx="23" cy="2" r="1" fill="#22c55e" opacity="0.4"/>
+    <circle class="particle" cx="15" cy="10" r="1.5" fill="#22c55e" opacity="0.3"/>
+  </g>
+
+  <!-- ===== WORDMARK ===== -->
+  <g class="wordmark">
+    <text x="56" y="40" 
+          font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" 
+          font-weight="300" 
+          font-size="30" 
+          fill="#ffffff" 
+          letter-spacing="-0.5">
+      Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+    </text>
+    
+    <!-- Tech underline -->
+    <line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+  </g>
+</svg>

logos/logo-04-wordmark-black.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Wordmark: Чёрная версия (для светлого фона) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+
+  <!-- ICON -->
+  <g transform="translate(2, 2)">
+    <rect x="4" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
+    <rect x="12" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
+    <rect x="20" y="8" width="6" height="50" rx="3" fill="#000000"/>
+    <rect x="28" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
+    <rect x="36" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
+    <circle cx="7" cy="24" r="2" fill="#000000" opacity="0.3"/>
+    <circle cx="15" cy="18" r="2" fill="#000000" opacity="0.5"/>
+    <circle cx="23" cy="6" r="2" fill="#000000"/>
+    <circle cx="31" cy="18" r="2" fill="#000000" opacity="0.5"/>
+    <circle cx="39" cy="24" r="2" fill="#000000" opacity="0.3"/>
+  </g>
+
+  <!-- WORDMARK — чёрный текст на белом фоне -->
+  <text x="56" y="40" 
+        font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" 
+        font-weight="300" 
+        font-size="30" 
+        fill="#000000" 
+        letter-spacing="-0.5">
+    Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+  </text>
+
+  <line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
+</svg>

logos/logo-04-wordmark-manrope.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Wordmark: Manrope (более характерный геометричный гротеск) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+
+  <!-- ICON -->
+  <g transform="translate(2, 2)">
+    <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+    <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+    <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+    <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+  </g>
+
+  <!-- Шрифт: Manrope — геометричный гротеск, характерный x-height -->
+  <text x="56" y="38" 
+        font-family="Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" 
+        font-weight="400" 
+        font-size="32" 
+        fill="#ffffff" 
+        letter-spacing="-0.3">
+    calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+  </text>
+
+  <!-- Двойная линия как tech-акцент -->
+  <line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+  <line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
+</svg>

logos/logo-04-wordmark.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #04 — Wordmark: Icon + "Calls24" -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
+  <defs>
+    <linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#15803d"/>
+    </linearGradient>
+  </defs>
+
+  <!-- ===== ICON (Logo-04: зелёная волна) ===== -->
+  <g transform="translate(2, 2)">
+    <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+    <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+    <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+    <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+    <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+    <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+    <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+  </g>
+
+  <!-- ===== WORDMARK ===== -->
+  <!-- Шрифт: Inter — геометричный гротеск, идеален для tech/SaaS -->
+  <!-- "Calls" — тонкий/regular белый, "24" — bold зелёный -->
+  <text x="56" y="40" 
+        font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" 
+        font-weight="300" 
+        font-size="30" 
+        fill="#ffffff" 
+        letter-spacing="-0.5">
+    Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+  </text>
+
+  <!-- Tech-подчёркивание: тонкая зелёная линия под "24" -->
+  <line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
+</svg>

logos/logo-05-c-wave-black.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #05 — Чёрная версия -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <path d="
+    M48 14 
+    C38 10, 26 12, 18 18 
+    C10 24, 8 34, 12 42 
+    C14 48, 22 52, 32 50
+    C40 48, 46 42, 48 36
+    C46 38, 40 42, 32 42
+    C24 42, 18 38, 16 32
+    C14 26, 16 18, 24 14
+    C30 10, 42 10, 48 14
+    Z
+  " fill="#000000"/>
+</svg>

logos/logo-05-c-wave.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #05: Letter "C" + Continuous Wave (Apple-like) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="cGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22c55e"/>
+      <stop offset="100%" stop-color="#16a34a"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- C shape morphed into wave -->
+  <path d="
+    M48 14 
+    C38 10, 26 12, 18 18 
+    C10 24, 8 34, 12 42 
+    C14 48, 22 52, 32 50
+    C40 48, 46 42, 48 36
+    C46 38, 40 42, 32 42
+    C24 42, 18 38, 16 32
+    C14 26, 16 18, 24 14
+    C30 10, 42 10, 48 14
+    Z
+  " fill="url(#cGrad)"/>
+</svg>

logos/logo-06-hex-cwave-icon-only.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #06 — Чёрная версия -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
+  <path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000000"/>
+  <circle cx="20" cy="18" r="1.5" fill="#000000" opacity="0.5"/>
+  <circle cx="12" cy="26" r="1.5" fill="#000000" opacity="0.35"/>
+  <circle cx="34" cy="12" r="1.5" fill="#000000" opacity="0.65"/>
+  <circle cx="40" cy="20" r="1.5" fill="#000000" opacity="0.5"/>
+  <circle cx="44" cy="32" r="1.5" fill="#000000" opacity="0.35"/>
+</svg>

logos/logo-06-hex-cwave.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- calls24 Logo #06: Hexagon + C-Wave (комбинированный) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
+  <defs>
+    <linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ef4444"/>
+      <stop offset="100%" stop-color="#dc2626"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Hexagon outline (Bauhaus, тонкая линия) -->
+  <polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
+  
+  <!-- C-shaped wave inside hexagon (красная, как на странице) -->
+  <path d="
+    M44 16 
+    C36 12, 24 14, 16 20 
+    C8 26, 6 36, 10 42 
+    C14 48, 22 50, 30 48
+    C38 46, 44 40, 46 34
+    C44 36, 38 40, 30 40
+    C22 40, 16 36, 14 30
+    C12 24, 14 18, 22 14
+    C28 10, 40 10, 44 16
+    Z
+  " fill="url(#hexC)"/>
+  
+  <!-- Data points (красные, полупрозрачные) -->
+  <circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
+  <circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
+  <circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
+  <circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
+  <circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
+</svg>

logos/preview-animated.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>calls24 — Animated Logo</title>
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;padding:40px 20px}
+  h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px}
+  .sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
+  .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:0 auto}
+  @media(max-width:600px){.grid{grid-template-columns:1fr}}
+  .card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
+  .card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
+  .card .name{font-size:14px;color:#ccc;margin-bottom:4px}
+  .card .desc{font-size:12px;color:#666;margin-bottom:24px;line-height:1.5}
+  .preview{background:#050505;border-radius:12px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:120px}
+</style>
+</head>
+<body>
+
+<h1>calls24 — Animated Logos</h1>
+<p class="sub">SVG CSS animations</p>
+
+<div class="grid">
+
+  <!-- Entrance -->
+  <div class="card" style="grid-column:1/-1">
+    <div class="label">Entrance</div>
+    <div class="name">Волна растёт, текст выезжает, линия рисуется</div>
+    <div class="desc">Однократная анимация появления. Идеальна для hero, загрузочных экранов.</div>
+    <div class="preview">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
+        <defs>
+          <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#22c55e"><animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/></stop>
+            <stop offset="100%" stop-color="#15803d"/>
+          </linearGradient>
+          <style>
+            .b{transform-origin:bottom center;animation:grow 1s ease-out forwards;opacity:0}
+            .b1{animation-delay:.1s}.b2{animation-delay:.2s}.b3{animation-delay:.3s}.b4{animation-delay:.4s}.b5{animation-delay:.5s}
+            @keyframes grow{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
+            .b3{animation:grow 1s ease-out forwards, pulse 3s ease-in-out infinite 1.2s}
+            @keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
+            .d{opacity:0;animation:dp .5s ease-out forwards}
+            .d1{animation-delay:.5s}.d2{animation-delay:.6s}.d3{animation-delay:.7s}.d4{animation-delay:.8s}.d5{animation-delay:.9s}
+            @keyframes dp{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}100%{opacity:var(--o);transform:scale(1)}}
+            .t{opacity:0;transform:translateX(-10px);animation:ti .7s ease-out forwards;animation-delay:.6s}
+            @keyframes ti{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
+            .l{stroke-dasharray:30;stroke-dashoffset:30;animation:ld .5s ease-out forwards;animation-delay:1s}
+            @keyframes ld{0%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
+          </style>
+        </defs>
+        <g transform="translate(2,2)">
+          <rect class="b b1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
+          <rect class="b b2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
+          <rect class="b b3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g1)"/>
+          <rect class="b b4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
+          <rect class="b b5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
+          <circle class="d d1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
+          <circle class="d d2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
+          <circle class="d d3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
+          <circle class="d d4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
+          <circle class="d d5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
+        </g>
+        <g class="t">
+          <text x="56" y="40" 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>
+          <line class="l" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+
+  <!-- Loop -->
+  <div class="card" style="grid-column:1/-1">
+    <div class="label">Loop</div>
+    <div class="name">Непрерывная волна + пульсация точек</div>
+    <div class="desc">Бесконечная анимация. Идеальна для header, лобби, загрузки.</div>
+    <div class="preview">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
+        <defs>
+          <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
+          </linearGradient>
+          <style>
+            .w{animation:wave 2.4s ease-in-out infinite}
+            .w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
+            @keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
+            .p{animation:dp 2.4s ease-in-out infinite}
+            .p1{animation-delay:0s}.p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}.p5{animation-delay:.4s}
+            @keyframes dp{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o)*.5);transform:scale(.8)}}
+            .ll{stroke-dasharray:30;animation:lp 3s ease-in-out infinite}
+            @keyframes lp{0%,100%{opacity:.8}50%{opacity:.3}}
+          </style>
+        </defs>
+        <g transform="translate(2,2)">
+          <rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
+          <rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
+          <rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g2)"/>
+          <rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
+          <rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
+          <circle class="p p1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
+          <circle class="p p2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
+          <circle class="p p3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
+          <circle class="p p4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
+          <circle class="p p5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
+        </g>
+        <text x="56" y="40" 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>
+        <line class="ll" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </div>
+  </div>
+
+</div>
+
+</body>
+</html>

logos/preview.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>calls24 — Logo Concepts</title>
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;padding:40px 20px}
+  h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px;color:#fff}
+  .sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
+  .grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;margin:0 auto}
+  @media(max-width:600px){.grid{grid-template-columns:1fr}}
+  .card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
+  .card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
+  .card .name{font-size:14px;color:#ccc;margin-bottom:4px}
+  .card .desc{font-size:12px;color:#666;line-height:1.5;margin-bottom:20px}
+  .logo-row{display:flex;align-items:center;gap:24px;padding:24px;background:#0a0a0a;border-radius:12px;margin-bottom:8px}
+  .icon-row{display:flex;gap:16px;justify-content:center;padding:16px;background:#0a0a0a;border-radius:12px}
+  .icon-row svg{max-height:48px;max-width:48px}
+</style>
+</head>
+<body>
+
+<h1>calls24 — Logo Concepts</h1>
+<p class="sub">5 вариантов логотипа • SVG • Pure code</p>
+
+<div class="grid">
+
+  <!-- Logo 01 -->
+  <div class="card">
+    <div class="label">01</div>
+    <div class="name">Wordmark + Sound Wave</div>
+    <div class="desc">Минималистичный словоформ с вертикальной аудио-волной слева. Зелёный акцент на «24».</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="160" height="30">
+        <defs>
+          <linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
+          </linearGradient>
+        </defs>
+        <g transform="translate(4,5)">
+          <rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
+          <rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
+          <rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
+          <rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
+          <rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
+        </g>
+        <text x="52" y="40" font-family="-apple-system,sans-serif" font-weight="700" font-size="32" fill="#ffffff">
+          calls<tspan fill="#22c55e">24</tspan>
+        </text>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <defs>
+          <linearGradient id="w1b" 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,3)">
+          <rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1b)"/>
+          <rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
+          <rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1b)" opacity="0.7"/>
+          <rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
+          <rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1b)" opacity="0.6"/>
+        </g>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <defs>
+          <linearGradient id="w1c" 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,3)">
+          <rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000"/>
+          <rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000" opacity="0.85"/>
+          <rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000" opacity="0.7"/>
+          <rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000" opacity="0.85"/>
+          <rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000" opacity="0.6"/>
+        </g>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрный</div>
+  </div>
+
+  <!-- Logo 02 -->
+  <div class="card">
+    <div class="label">02</div>
+    <div class="name">Circle Sound Wave</div>
+    <div class="desc">Круглый значок с аудио-волной внутри. Иконка / фавикон.</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
+        <defs>
+          <linearGradient id="w2" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
+          </linearGradient>
+        </defs>
+        <circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
+        <rect x="25" y="14" width="10" height="32" rx="5" fill="url(#w2)"/>
+        <rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
+        <rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
+        <rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
+        <rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <circle cx="30" cy="30" r="28" fill="none" stroke="#000" stroke-width="2" opacity="0.15"/>
+        <rect x="25" y="14" width="10" height="32" rx="5" fill="#000"/>
+        <rect x="14" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
+        <rect x="6" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
+        <rect x="40" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
+        <rect x="48" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
+  </div>
+
+  <!-- Logo 03 -->
+  <div class="card">
+    <div class="label">03</div>
+    <div class="name">Phone + Wave</div>
+    <div class="desc">Трубка с исходящими звуковыми волнами. Прямая ассоциация со звонками.</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
+        <g transform="translate(5,2)">
+          <path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/>
+          <path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
+          <path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+          <path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+        </g>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <g transform="translate(5,2)">
+          <path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000" stroke-width="2.5" stroke-linejoin="round"/>
+          <path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>
+          <path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
+          <path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+        </g>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
+  </div>
+
+  <!-- Logo 04 -->
+  <div class="card">
+    <div class="label">04</div>
+    <div class="name">Hex Data Grid</div>
+    <div class="desc">Гексагон с волной и точками данных. Bauhaus + tech.</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
+        <defs>
+          <linearGradient id="w4" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
+          </linearGradient>
+        </defs>
+        <rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+        <rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+        <rect x="30" y="14" width="6" height="38" rx="3" fill="url(#w4)"/>
+        <rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+        <rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+        <circle cx="33" cy="12" r="2" fill="#22c55e"/>
+        <circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+        <circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <rect x="14" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
+        <rect x="22" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
+        <rect x="30" y="14" width="6" height="38" rx="3" fill="#000"/>
+        <rect x="38" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
+        <rect x="46" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
+        <circle cx="33" cy="12" r="2" fill="#000"/>
+        <circle cx="25" cy="18" r="2" fill="#000" opacity="0.5"/>
+        <circle cx="41" cy="18" r="2" fill="#000" opacity="0.5"/>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
+  </div>
+
+  <!-- Logo 05 -->
+  <div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
+    <div class="label">05</div>
+    <div class="name">C-Wave (Apple-like)</div>
+    <div class="desc">Буква «C» от calls24 → звуковая волна. Непрерывный path, чистая геометрия.</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
+        <defs>
+          <linearGradient id="w5" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
+          </linearGradient>
+        </defs>
+        <path d="
+          M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50
+          C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32
+          C14 26,16 18,24 14 C30 10,42 10,48 14 Z
+        " fill="url(#w5)"/>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <path d="M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50 C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32 C14 26,16 18,24 14 C30 10,42 10,48 14 Z" fill="#000"/>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
+  </div>
+
+<!-- Logo 06 -->
+  <div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
+    <div class="label" style="color:#ef4444">06 ★</div>
+    <div class="name">Hexagon + C-Wave (комбинированный)</div>
+    <div class="desc">Гексагон (лого-04) + C-волна (лого-05). Волна красного #ef4444 как на странице. Точки данных по контуру.</div>
+    <div class="logo-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
+        <defs>
+          <linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#ef4444"/><stop offset="100%" stop-color="#dc2626"/>
+          </linearGradient>
+        </defs>
+        <polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
+        <path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="url(#hexC)"/>
+        <circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
+        <circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
+        <circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
+        <circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
+        <circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
+        <path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000"/>
+        <circle cx="20" cy="18" r="1.5" fill="#000" opacity="0.5"/>
+        <circle cx="12" cy="26" r="1.5" fill="#000" opacity="0.35"/>
+        <circle cx="34" cy="12" r="1.5" fill="#000" opacity="0.65"/>
+        <circle cx="40" cy="20" r="1.5" fill="#000" opacity="0.5"/>
+        <circle cx="44" cy="32" r="1.5" fill="#000" opacity="0.35"/>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрная версия</div>
+  </div>
+
+<!-- Logo 04 Wordmark variants -->
+  <div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
+    <div class="label" style="color:#22c55e">04a ★</div>
+    <div class="name">Hex-Wave + "Calls24" — Inter (Regular/Bold)</div>
+    <div class="desc">Иконка + словоформ. Шрифт Inter: тонкий "calls" (#300 weight), жирный "24" (#700). Зелёный градиент на волне. Tech-подчёркивание.</div>
+    <div class="logo-row" style="justify-content:center">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
+        <defs>
+          <linearGradient id="hexGrad" 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(2,2)">
+          <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
+          <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+          <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+          <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+        </g>
+        <text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">
+          Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+        </text>
+        <line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
+      </svg>
+    </div>
+    <div class="icon-row">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <defs><linearGradient id="h1" 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(2,2)">
+          <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#h1)"/>
+          <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+          <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+          <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+        </g>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
+        <g transform="translate(2,2)">
+          <rect x="4" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
+          <rect x="12" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
+          <rect x="20" y="8" width="6" height="50" rx="3" fill="#000"/>
+          <rect x="28" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
+          <rect x="36" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
+          <circle cx="7" cy="24" r="2" fill="#000" opacity="0.3"/>
+          <circle cx="15" cy="18" r="2" fill="#000" opacity="0.5"/>
+          <circle cx="23" cy="6" r="2" fill="#000"/>
+          <circle cx="31" cy="18" r="2" fill="#000" opacity="0.5"/>
+          <circle cx="39" cy="24" r="2" fill="#000" opacity="0.3"/>
+        </g>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной иконка • чёрная иконка</div>
+  </div>
+
+  <div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
+    <div class="label">04b</div>
+    <div class="name">Hex-Wave + "Calls24" — Manrope (Medium/Bold)</div>
+    <div class="desc">Тот же знак, другой шрифт. Manrope: более характерный, геометричный. Двойная tech-линия как акцент.</div>
+    <div class="logo-row" style="justify-content:center">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
+        <defs>
+          <linearGradient id="hexGrad2" 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(2,2)">
+          <rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad2)"/>
+          <rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
+          <rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
+          <circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+          <circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="23" cy="6" r="2" fill="#22c55e"/>
+          <circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
+          <circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
+        </g>
+        <text x="56" y="38" font-family="Manrope,-apple-system,sans-serif" font-weight="400" font-size="32" fill="#fff" letter-spacing="-0.3">
+          calls<tspan font-weight="700" fill="#22c55e">24</tspan>
+        </text>
+        <line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+        <line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
+      </svg>
+    </div>
+    <div style="text-align:center;font-size:10px;color:#444;margin-top:4px">Inter vs Manrope — выбери характер</div>
+  </div>
+
+</div>
+
+</body>
+</html>

logos/site.webmanifest

@@ -0,0 +1,20 @@
+{
+  "name": "calls24 — Анализ звонков",
+  "short_name": "calls24",
+  "description": "Автоматический анализ звонков за 24 часа",
+  "icons": [
+    {
+      "src": "/logos/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/logos/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#22c55e",
+  "background_color": "#0a0a0a",
+  "display": "standalone"
+}