{"id":25,"date":"2025-12-19T00:04:23","date_gmt":"2025-12-18T21:04:23","guid":{"rendered":"https:\/\/infospheraai.com.ua\/?page_id=25"},"modified":"2026-02-10T16:07:07","modified_gmt":"2026-02-10T13:07:07","slug":"%d0%b3%d0%bb%d0%b0%d0%b2%d0%bd%d0%b0%d1%8f","status":"publish","type":"page","link":"https:\/\/infospheraai.com.ua\/","title":{"rendered":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"25\" class=\"elementor elementor-25\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae447bd e-flex e-con-boxed e-con e-parent\" data-id=\"ae447bd\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-17597ab e-con-full e-flex e-con e-child\" data-id=\"17597ab\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-da9359f e-con-full e-flex e-con e-child\" data-id=\"da9359f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdc33cb elementor-widget elementor-widget-html\" data-id=\"fdc33cb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* --- Reset & Base --- *\/\r\n  .nav-island-wrap a, \r\n  .nav-island-wrap button {\r\n    text-decoration: none !important;\r\n    border: none;\r\n    outline: none;\r\n    box-shadow: none;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  :root {\r\n    \/* \u0420\u043e\u0431\u0438\u043c\u043e \u0444\u043e\u043d \u0431\u0456\u043b\u044c\u0448 \u043f\u0440\u043e\u0437\u043e\u0440\u0438\u043c \u0434\u043b\u044f \u0435\u0444\u0435\u043a\u0442\u0443 \u0441\u043a\u043b\u0430 *\/\r\n    --h-bg: rgba(255, 255, 255, 0.65); \r\n    --h-border: rgba(255, 255, 255, 0.4);\r\n    --h-stroke: rgba(0, 0, 0, 0.06);\r\n    --h-text: #0f172a;\r\n    --h-accent: #6366f1;\r\n    --h-radius: 20px;\r\n    \/* \u041f\u043b\u0430\u0432\u043d\u0456\u0448\u0430, \"\u0434\u043e\u0440\u043e\u0433\u0430\" \u0430\u043d\u0456\u043c\u0430\u0446\u0456\u044f *\/\r\n    --h-ease: cubic-bezier(0.2, 0.8, 0.2, 1); \r\n  }\r\n\r\n  body { margin: 0; font-family: 'Inter', sans-serif; background: #fdfdfd; }\r\n\r\n  \/* --- WRAPPER --- *\/\r\n  .nav-island-wrap {\r\n    position: fixed;\r\n    top: 24px;\r\n    left: 0; right: 0;\r\n    display: flex;\r\n    justify-content: center;\r\n    z-index: 9999;\r\n    padding: 0 20px;\r\n    pointer-events: none;\r\n    transition: top 0.6s var(--h-ease); \/* \u041f\u043e\u0432\u0456\u043b\u044c\u043d\u0456\u0448\u0438\u0439 \u0440\u0443\u0445 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u0456 *\/\r\n  }\r\n\r\n  .nav-island-wrap.scrolled {\r\n    top: 12px;\r\n  }\r\n\r\n  \/* --- THE GLASS ISLAND --- *\/\r\n  .nav-island {\r\n    pointer-events: auto;\r\n    position: relative;\r\nwidth: 100%;\r\n    height: 80px;\r\n    max-width: 1360px;\r\n    \/* GLASS EFFECT *\/\r\n    background: var(--h-bg);\r\n \r\n   \r\n    \r\n    border: 1px solid var(--h-border);\r\n    border-radius: var(--h-radius);\r\n    \r\n    \/* \u041c'\u044f\u043a\u0430 \u0442\u0456\u043d\u044c + \u043e\u0431\u0432\u043e\u0434\u043a\u0430 *\/\r\n    box-shadow: \r\n      0 0 0 1px var(--h-stroke),\r\n      0 10px 40px -10px rgba(0,0,0,0.05);\r\n      \r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 0 12px 0 24px;\r\n    transition: all 0.6s var(--h-ease);\r\n  }\r\n\r\n  .nav-island-wrap.scrolled .nav-island {\r\n    height: 70px;\r\n    max-width: 960px;\r\n    background: rgba(255, 255, 255, 0.85); \/* \u0422\u0440\u043e\u0445\u0438 \u0449\u0456\u043b\u044c\u043d\u0456\u0448\u0435 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u0456 *\/\r\n    box-shadow: 0 8px 30px rgba(0,0,0,0.08);\r\n  }\r\n\r\n  \/* --- LOGO --- *\/\r\n  .logo-link {\r\n    display: flex; align-items: center; height: 100%; min-width: 40px; \r\n    opacity: 0.9; transition: opacity 0.3s;\r\n  }\r\n  .logo-link:hover { opacity: 1; }\r\n  .logo-link img { height: 52px; width: auto; display: block; margin-left: 10px; }\r\n\r\n  \/* --- DESKTOP NAV --- *\/\r\n  .desktop-menu { display: flex; gap: 6px; }\r\n\r\n  .d-link {\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    color: #64748b !important;\r\n    padding: 10px 18px;\r\n    border-radius: 100px; \/* \u0422\u0430\u0431\u043b\u0435\u0442\u043a\u0430 *\/\r\n    transition: all 0.4s ease;\r\n    position: relative;\r\n  }\r\n\r\n  .d-link:hover {\r\n    color: var(--h-text) !important;\r\n    background: rgba(0,0,0,0.03); \/* \u0414\u0443\u0436\u0435 \u043b\u0435\u0433\u043a\u0438\u0439 \u0444\u043e\u043d \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u0456 *\/\r\n  }\r\n\r\n  \/* --- PREMIUM CTA BUTTON (\"Contacts\") --- *\/\r\n  .nav-btn {\r\n    position: relative;\r\n    background: #0f172a;\r\n    color: #ffffff !important;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    padding: 12px 24px;\r\n    border-radius: 100px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    overflow: hidden; \/* \u0414\u043b\u044f \u0431\u043b\u0456\u043a\u0430 *\/\r\n    \r\n    \/* \u041f\u043b\u0430\u0432\u043d\u0430 \u0430\u043d\u0456\u043c\u0430\u0446\u0456\u044f *\/\r\n    transition: all 0.5s var(--h-ease);\r\n    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);\r\n  }\r\n\r\n  \/* \u0415\u0444\u0435\u043a\u0442 \u0431\u043b\u0456\u043a\u0430 (Shine) *\/\r\n  .nav-btn::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: -100%; width: 50%; height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);\r\n    transform: skewX(-20deg);\r\n    transition: none; \/* \u0421\u043a\u0438\u0434\u0430\u0454\u043c\u043e \u0434\u043b\u044f \u043c\u0438\u0442\u0442\u0454\u0432\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u043d\u043d\u044f *\/\r\n  }\r\n\r\n  .nav-btn:hover {\r\n    transform: translateY(-2px);\r\n    background: var(--h-accent); \/* \u0406\u043d\u0434\u0438\u0433\u043e *\/\r\n    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4); \/* \u041a\u043e\u043b\u044c\u043e\u0440\u043e\u0432\u0430 \u0442\u0456\u043d\u044c *\/\r\n    padding-right: 28px; \/* \u0422\u0440\u043e\u0445\u0438 \u0440\u043e\u0437\u0448\u0438\u0440\u044e\u0454\u043c\u043e \u0434\u043b\u044f \u0441\u0442\u0440\u0456\u043b\u043a\u0438 *\/\r\n  }\r\n\r\n  .nav-btn:hover::after {\r\n    left: 150%;\r\n    transition: left 0.7s ease; \/* \u041f\u0440\u043e\u043b\u0456\u0442 \u0431\u043b\u0456\u043a\u0430 *\/\r\n  }\r\n\r\n  \/* \u0421\u0442\u0440\u0456\u043b\u043a\u0430 \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043a\u043d\u043e\u043f\u043a\u0438 *\/\r\n  .nav-btn svg { transition: transform 0.4s var(--h-ease); }\r\n  .nav-btn:hover svg { transform: translateX(3px) rotate(-45deg); }\r\n\r\n  .nav-island-wrap.scrolled .nav-btn { padding: 10px 20px; }\r\n\r\n  \/* --- BURGER BUTTON (FIXED) --- *\/\r\n  .burger-toggle {\r\n    display: none;\r\n    width: 44px; height: 44px;\r\n    background: transparent !important; \/* \u041f\u0420\u0418\u0411\u0420\u0410\u041b\u0418 \u0424\u041e\u041d *\/\r\n    border: none; outline: none;\r\n    cursor: pointer;\r\n    position: relative;\r\n    z-index: 10000;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0;\r\n    margin-left: 8px;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  \r\n  \/* \u0415\u0444\u0435\u043a\u0442 \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f (Scale) \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u0444\u043e\u043d\u0443 *\/\r\n  .burger-toggle:active { transform: scale(0.9); }\r\n  .burger-toggle:focus { background: transparent !important; }\r\n\r\n  .burger-icon { width: 22px; height: 12px; position: relative; }\r\n\r\n  .b-line {\r\n    position: absolute;\r\n    width: 100%; height: 2px;\r\n    background: #0f172a;\r\n    border-radius: 4px;\r\n    transition: transform 0.4s var(--h-ease), top 0.4s var(--h-ease);\r\n  }\r\n\r\n  .b-line:first-child { top: 0; }\r\n  .b-line:last-child { bottom: 0; }\r\n\r\n  \/* Burger Animation *\/\r\n  .burger-toggle.active .b-line:first-child {\r\n    top: 5px; transform: rotate(45deg);\r\n  }\r\n  .burger-toggle.active .b-line:last-child {\r\n    bottom: 5px; transform: rotate(-45deg);\r\n  }\r\n\r\n  \/* --- MOBILE DROPDOWN --- *\/\r\n  .mobile-dropdown {\r\n    position: absolute;\r\n    top: calc(100% + 10px);\r\n    right: 0; left: 0; margin: 0 auto;\r\n    width: 92%; max-width: 340px;\r\n    \r\n    background: rgba(255, 255, 255, 0.9);\r\n\r\n\r\n    \r\n    border: 1px solid rgba(255,255,255,0.5);\r\n    border-radius: 20px;\r\n    padding: 8px;\r\n    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);\r\n    \r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateY(-15px) scale(0.98);\r\n    transition: all 0.4s var(--h-ease);\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .mobile-dropdown.open {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0) scale(1);\r\n  }\r\n\r\n  .m-list {\r\n    display: flex; flex-direction: column; gap: 4px;\r\n    list-style: none; margin: 0; padding: 0;\r\n  }\r\n\r\n  .m-link {\r\n    display: block;\r\n    padding: 14px 16px;\r\n    font-size: 16px; font-weight: 600;\r\n    color: var(--h-text) !important;\r\n    border-radius: 12px;\r\n    transition: background 0.3s;\r\n    text-align: center;\r\n  }\r\n\r\n  .m-link:hover, .m-link:active {\r\n    background: #ffffff;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.05);\r\n    color: var(--h-accent) !important;\r\n  }\r\n\r\n  \/* --- RESPONSIVE --- *\/\r\n  @media (max-width: 960px) {\r\n    .desktop-menu, .nav-btn { display: none; }\r\n    .burger-toggle { display: flex; }\r\n    .nav-island { padding: 0 16px; height: 64px; }\r\n    .logo-link { flex-grow: 1; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"nav-island-wrap\" id=\"navWrap\">\r\n  <header class=\"nav-island\">\r\n    \r\n    <a href=\"#\" class=\"logo-link\">\r\n      <img decoding=\"async\" src=\"https:\/\/thinkvd.biz.ua\/site1812\/wp-content\/uploads\/2025\/12\/\u0412\u2022\u0430\u0432\u2122.-\u0427.png\" alt=\"Logo\"> \r\n    <\/a>\r\n\r\n    <nav class=\"desktop-menu\">\r\n      <a href=\"#about\" class=\"d-link\">\u041f\u0440\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044e<\/a>\r\n      <a href=\"#solutions\" class=\"d-link\">\u0420\u0456\u0448\u0435\u043d\u043d\u044f<\/a>\r\n      <a href=\"#benefits\" class=\"d-link\">\u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438<\/a>\r\n      <a href=\"#services\" class=\"d-link\">\u041f\u043e\u0441\u043b\u0443\u0433\u0438<\/a>\r\n      <a href=\"#faq\" class=\"d-link\">FAQ<\/a>\r\n    <\/nav>\r\n\r\n    <div style=\"display:flex; align-items:center;\">\r\n      \r\n      <a href=\"#contact\" class=\"nav-btn\">\r\n        \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0438\r\n        <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n      <\/a>\r\n\r\n      <button class=\"burger-toggle\" id=\"burgerToggle\" aria-label=\"Menu\">\r\n        <div class=\"burger-icon\">\r\n          <div class=\"b-line\"><\/div>\r\n          <div class=\"b-line\"><\/div>\r\n        <\/div>\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"mobile-dropdown\" id=\"mobDropdown\">\r\n      <div class=\"m-list\">\r\n        <a href=\"#about\" class=\"m-link\">\u041f\u0440\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044e<\/a>\r\n        <a href=\"#solutions\" class=\"m-link\">\u0420\u0456\u0448\u0435\u043d\u043d\u044f<\/a>\r\n        <a href=\"#benefits\" class=\"m-link\">\u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438<\/a>\r\n        <a href=\"#services\" class=\"m-link\">\u041f\u043e\u0441\u043b\u0443\u0433\u0438<\/a>\r\n        <a href=\"#faq\" class=\"m-link\">FAQ<\/a>\r\n        <div style=\"height:1px; background:rgba(0,0,0,0.05); margin: 6px 16px;\"><\/div>\r\n        <a href=\"#contact\" class=\"m-link\" style=\"color:#6366f1 !important;\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0438 \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/header>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const wrap = document.getElementById('navWrap');\r\n    const burger = document.getElementById('burgerToggle');\r\n    const menu = document.getElementById('mobDropdown');\r\n    const links = document.querySelectorAll('.m-link');\r\n\r\n    \/\/ 1. Scroll Effect\r\n    window.addEventListener('scroll', () => {\r\n      if (window.scrollY > 20) {\r\n        wrap.classList.add('scrolled');\r\n      } else {\r\n        wrap.classList.remove('scrolled');\r\n      }\r\n    });\r\n\r\n    \/\/ 2. Toggle Menu\r\n    burger.addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      burger.classList.toggle('active');\r\n      menu.classList.toggle('open');\r\n    });\r\n\r\n    \/\/ 3. Close on Link Click\r\n    links.forEach(link => {\r\n      link.addEventListener('click', () => {\r\n        burger.classList.remove('active');\r\n        menu.classList.remove('open');\r\n      });\r\n    });\r\n\r\n    \/\/ 4. Close on Outside Click\r\n    document.addEventListener('click', (e) => {\r\n      if (!menu.contains(e.target) && !burger.contains(e.target)) {\r\n        burger.classList.remove('active');\r\n        menu.classList.remove('open');\r\n      }\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d8d9a0 e-flex e-con-boxed e-con e-parent\" data-id=\"1d8d9a0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2227b75 elementor-widget elementor-widget-html\" data-id=\"2227b75\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tsparticles-slim@2.12.0\/tsparticles.slim.bundle.min.js\"><\/script>\r\n\r\n<style>\r\n  .is-hero-wrapper {\r\n    --is-text: #0f172a;\r\n    --is-text-soft: #475569;\r\n    --is-primary: #6366f1;\r\n    --is-accent: #8b5cf6;\r\n\r\n    font-family: 'Inter', system-ui, sans-serif !important;\r\n    position: relative;\r\n    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);\r\n    border-radius: 24px;\r\n    color: var(--is-text);\r\n    overflow: hidden;\r\n    min-height: 500px;\r\n  }\r\n\r\n  .is-hero-wrapper * { box-sizing: border-box; }\r\n\r\n  #ai-particles-js {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .is-container {\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n    display: grid;\r\n    grid-template-columns: 1.2fr 0.8fr; \r\n    gap: 40px;\r\n    align-items: center;\r\n    padding: 80px 40px;\r\n    background: rgba(255, 255, 255, 0.3);\r\n    border-radius: 24px;\r\n    border: 1px solid rgba(255,255,255,0.4);\r\n  }\r\n\r\n  .is-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 28px;\r\n    min-width: 0;\r\n  }\r\n\r\n  .is-badge {\r\n    font-family: 'Inter', system-ui, sans-serif !important;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 8px 16px;\r\n    background: #ffffff;\r\n    border: 1px solid rgba(99, 102, 241, 0.3);\r\n    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);\r\n    border-radius: 100px;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: var(--is-primary);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n  }\r\n  .is-badge::before {\r\n    content: '';\r\n    width: 8px;\r\n    height: 8px;\r\n    background: var(--is-primary);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);\r\n    animation: is-pulse 2s infinite;\r\n  }\r\n  @keyframes is-pulse {\r\n    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }\r\n    100% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }\r\n  }\r\n\r\n  .is-title {\r\n    font-family: 'Inter', system-ui, sans-serif !important;\r\n    font-size: clamp(36px, 4.5vw, 56px);\r\n    line-height: 1.1;\r\n    font-weight: 700;\r\n    letter-spacing: -0.02em;\r\n    margin: 0;\r\n    color: var(--is-text);\r\n  }\r\n  .is-title span {\r\n    background: linear-gradient(135deg, var(--is-primary), var(--is-accent));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n  }\r\n  .is-desc {\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n    color: var(--is-text-soft);\r\n    margin: 0;\r\n    max-width: 520px;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .is-actions {\r\n    display: flex;\r\n    gap: 16px;\r\n    flex-wrap: wrap;\r\n    margin-top: 10px;\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n  .is-btn {\r\n    position: relative;\r\n    padding: 12px 32px;\r\n    border-radius: 14px;\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    text-decoration: none !important;\r\n    transition: all 0.9s ease;\r\n    overflow: hidden;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .is-btn-secondary {\r\n    background: rgba(255, 255, 255, 0.8);\r\n    border: 2px solid rgba(15, 23, 42, 0.1);\r\n    color: var(--is-text) !important;\r\n  }\r\n  .is-btn-secondary:hover {\r\n    background: #ffffff;\r\n    border-color: var(--is-text-soft);\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  \/* --- \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f \u0410\u041d\u0418\u041c\u0410\u0426\u0418\u0418 --- *\/\r\n  .is-visual {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: auto; \r\n    min-width: 0;\r\n  }\r\n   \r\n  lottie-player {\r\n    width: 100%;\r\n    max-width: 450px; \/* \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 *\/\r\n    height: auto;\r\n  }\r\n\r\n  .is-hero-wrapper .flex { display: flex; align-items: center; gap: 5px; }\r\n\r\n  .is-hero-wrapper .btn {\r\n    border: none; padding: 12px 20px; border-radius: 10px;\r\n    display: flex; justify-content: center; align-items: center; gap: 12px;\r\n    background: #1C1A1C; cursor: pointer; transition: all 1s ease-in-out!important;\r\n  }\r\n.cp-c-value {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: var(--cp-text);\r\n    white-space: nowrap;\r\n    text-decoration: none! \/* \u0443\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 *\/\r\n}\r\n\r\n.cp-c-value:hover {\r\n    text-decoration: underline; \/* \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 *\/\r\n}\r\n\r\n  .is-hero-wrapper .sparkle { fill: #AAAAAA; transition: all 1s ease!important; }\r\n  .is-hero-wrapper .text { font-weight: 600; font-size: 15px!important; color: #AAAAAA; }\r\n\r\n  .is-hero-wrapper .btn:hover {\r\n    background: linear-gradient(0deg,#A47CF3,#683FEA);\r\n    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),\r\n    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),\r\n    0px 0px 0px 4px rgba(255, 255, 255, 0.2),\r\n    0px 0px 90px 0px #9917FF;\r\n    transform: translateY(-2px);\r\n  }\r\n  .is-hero-wrapper .btn:hover .text { color: white; }\r\n  .is-hero-wrapper .btn:hover .sparkle { fill: white; transform: scale(1.1); }\r\n\r\n  @media (max-width: 960px) {\r\n    .is-container {\r\n      grid-template-columns: 1fr;\r\n      text-align: center;\r\n      padding: 50px 20px;\r\n      gap: 40px;\r\n    }\r\n    .is-content { align-items: center; gap: 24px; }\r\n    .is-desc { text-align: center; max-width: 100%; }\r\n     \r\n    .is-visual { width: 100%; margin-top: 10px; }\r\n    lottie-player { max-width: 320px; }\r\n\r\n    .is-actions { flex-direction: column; gap: 12px; width: 100%; }\r\n    .is-hero-wrapper .btn, .is-btn { width: 100%; justify-content: center; padding: 14px 20px; }\r\n    .is-title { font-size: 32px; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"is-hero-wrapper\">\r\n  <div id=\"ai-particles-js\"><\/div>\r\n\r\n  <div class=\"is-container\">\r\n    <div class=\"is-content\">\r\n      <div class=\"is-badge\">\u0406\u043d\u0444\u043e\u0441\u0444\u0435\u0440\u0430 \u0428\u0406<\/div>\r\n\r\n      <h1 class=\"is-title\">\r\n        \u0406\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0456 CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u0438 <span>\u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u043e\u043b\u0456\u043d\u043d\u044f<\/span>\r\n      <\/h1>\r\n\r\n      <p class=\"is-desc\">\r\n        \u0406\u043d\u0444\u043e\u0441\u0444\u0435\u0440\u0430 \u0428\u0406 \u2014 \u0446\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0447\u043d\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044f, \u0449\u043e \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u0456\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u043e\u0437\u0440\u043e\u0431\u0446\u0456 \u0442\u0430 \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0435\u043d\u043d\u0456 CRM-\u0441\u0438\u0441\u0442\u0435\u043c \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c \u0448\u0442\u0443\u0447\u043d\u043e\u0433\u043e \u0456\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443. \u041c\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0440\u0456\u0448\u0435\u043d\u043d\u044f, \u044f\u043a\u0456 \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u044e\u0442\u044c \u0434\u0430\u043d\u0456 \u0442\u0430 \u043f\u0456\u0434\u0432\u0438\u0449\u0443\u044e\u0442\u044c \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u0431\u0456\u0437\u043d\u0435\u0441\u0443.\r\n      <\/p>\r\n\r\n      <div class=\"is-actions\">\r\n        <button class=\"btn\" type=\"button\" data-scroll-to=\"#demo\">\r\n          <svg height=\"24\" width=\"24\" fill=\"#FFFFFF\" viewBox=\"0 0 24 24\" data-name=\"Layer 1\" id=\"Layer_1\" class=\"sparkle\">\r\n            <path d=\"M10,21.236,6.755,14.745.264,11.5,6.755,8.255,10,1.764l3.245,6.491L19.736,11.5l-6.491,3.245ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.333,4.667,20.5,7l1.167-2.333L24,3.5,21.667,2.333,20.5,0,19.333,2.333,17,3.5Z\"><\/path>\r\n          <\/svg>\r\n          <span class=\"text\">Generate<\/span>\r\n        <\/button>\r\n\r\n        <a href=\"#details\" class=\"is-btn is-btn-secondary\">\u0414\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c \u0431\u0456\u043b\u044c\u0448\u0435<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"is-visual\">\r\n        <lottie-player \r\n            src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/Dashboard-Developer-1.json\" \r\n            background=\"transparent\" \r\n            speed=\"1\" \r\n            style=\"width: 100%; height: auto;\" \r\n            loop \r\n            autoplay>\r\n        <\/lottie-player>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", async function () {\r\n    const uibtn = document.querySelector(\".is-hero-wrapper .btn[data-scroll-to]\");\r\n    if (uibtn) {\r\n      uibtn.addEventListener(\"click\", function () {\r\n        const sel = this.getAttribute(\"data-scroll-to\") || \"#demo\";\r\n        const el = document.querySelector(sel);\r\n        if (el) el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n        else window.location.hash = sel;\r\n      });\r\n    }\r\n\r\n    if (typeof tsParticles === \"undefined\") return;\r\n\r\n    await tsParticles.load(\"ai-particles-js\", {\r\n      fullScreen: { enable: false, zIndex: 1 },\r\n      particles: {\r\n        number: { value: 70, density: { enable: true, value_area: 900 } },\r\n        color: { value: [\"#6366f1\", \"#8b5cf6\", \"#0ea5e9\"] },\r\n        shape: { type: \"circle\" },\r\n        opacity: {\r\n          value: 0.6,\r\n          random: true,\r\n          anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false }\r\n        },\r\n        size: { value: 3.5, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },\r\n        line_linked: { enable: true, distance: 160, color: \"#6366f1\", opacity: 0.3, width: 1.5 },\r\n        move: { enable: true, speed: 1.5, direction: \"none\", random: false, straight: false, out_mode: \"bounce\" }\r\n      },\r\n      interactivity: {\r\n        detect_on: \"canvas\",\r\n        events: { onhover: { enable: true, mode: \"grab\" }, onclick: { enable: true, mode: \"push\" }, resize: true },\r\n        modes: { grab: { distance: 200, line_linked: { opacity: 0.8 } }, push: { particles_nb: 3 } }\r\n      },\r\n      retina_detect: true\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d11a15 e-flex e-con-boxed e-con e-parent\" data-id=\"1d11a15\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b64712 elementor-widget elementor-widget-html\" data-id=\"9b64712\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .ms-light-wrapper {\r\n    --l-bg: #ffffff;\r\n    --l-card-bg: rgba(255, 255, 255, 0.8);\r\n    --l-text-main: #0f172a;\r\n    --l-text-muted: #64748b;\r\n    --l-accent: #6366f1;\r\n    --l-border: rgba(226, 232, 240, 0.8);\r\n    --l-border-hover: rgba(99, 102, 241, 0.3);\r\n    --l-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);\r\n    --l-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--l-bg);\r\n    padding: 100px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--l-text-main);\r\n  }\r\n  \r\n  .ms-light-wrapper * { box-sizing: border-box; }\r\n\r\n  .ms-bg-deco {\r\n    position: absolute; inset: 0;\r\n    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);\r\n    background-size: 24px 24px;\r\n    opacity: 0.6;\r\n    z-index: 0;\r\n    mask-image: linear-gradient(180deg, transparent, black 40%, black 80%, transparent);\r\n    -webkit-mask-image: linear-gradient(180deg, transparent, black 40%, black 80%, transparent);\r\n  }\r\n\r\n  .ms-blob {\r\n    position: absolute; width: 600px; height: 600px;\r\n    max-width: 100%;\r\n    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);\r\n    top: 50%; right: 0; transform: translate(20%, -50%);\r\n    z-index: 0; pointer-events: none;\r\n  }\r\n\r\n  .ms-container {\r\n    margin: 0 auto; position: relative; z-index: 1;\r\n\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .ms-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n  }\r\n\r\n  .ms-content { padding-right: 20px; text-align: left; }\r\n\r\n  \/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u0435\u0439\u0434\u0436\u0430 *\/\r\n  .ms-label-caps {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 12px; \r\n    font-weight: 700; \r\n    letter-spacing: 0.12em; \r\n    text-transform: uppercase;\r\n    color: var(--l-accent); \r\n    margin-bottom: 20px; \r\n    \r\n    display: inline-block; \/* \u0424\u043e\u043d \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 *\/\r\n    padding: 6px 12px;\r\n    background: #e0e7ff; \/* \u0421\u0432\u0435\u0442\u043b\u043e-\u0441\u0438\u043d\u0438\u0439 \u0444\u043e\u043d *\/\r\n    border-radius: 100px;\r\n  }\r\n\r\n  .ms-heading {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: clamp(32px, 4vw, 48px);\r\n    line-height: 1.1; font-weight: 800; margin-bottom: 24px;\r\n    color: var(--l-text-main);\r\n    letter-spacing: -0.02em;\r\n  }\r\n  \r\n  .ms-heading span {\r\n    font-family: 'Inter', sans-serif !important;\r\n    background: linear-gradient(135deg, var(--l-accent), #a855f7);\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  }\r\n\r\n  .ms-paragraph {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; line-height: 1.6; color: var(--l-text-muted);\r\n    font-weight: 400; max-width: 480px;\r\n  }\r\n\r\n  .ms-bento {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n  }\r\n\r\n  .ms-card {\r\n    background: var(--l-card-bg);\r\n    border: 1px solid var(--l-border);\r\n    border-radius: 20px;\r\n    padding: 24px;\r\n    display: flex; flex-direction: column; justify-content: space-between;\r\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    box-shadow: var(--l-shadow-card);\r\n    min-height: 200px;\r\n  }\r\n\r\n  .ms-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: var(--l-shadow-hover);\r\n    border-color: var(--l-border-hover);\r\n  }\r\n\r\n  .ms-card-wide { grid-column: span 2; }\r\n\r\n  .ms-card-head { \r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; font-weight: 700; color: var(--l-text-main); margin-bottom: 6px; \r\n  }\r\n  .ms-card-sub { \r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 14px; color: var(--l-text-muted); line-height: 1.5; \r\n  }\r\n\r\n  .ms-visual-area { height: 48px; margin-bottom: 16px; display: flex; align-items: center; position: relative;}\r\n\r\n  .ui-switch {\r\n    width: 44px; height: 26px; background: #e2e8f0; border-radius: 99px; position: relative;\r\n    transition: background 0.3s; animation: switch-bg 4s infinite ease-in-out;\r\n  }\r\n  .ui-switch::after {\r\n    content:''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; \r\n    background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n    animation: switch-knob 4s infinite ease-in-out;\r\n  }\r\n  @keyframes switch-bg { 0%, 5%, 95%, 100% { background: #e2e8f0; } 45%, 55% { background: var(--l-accent); } }\r\n  @keyframes switch-knob { 0%, 5%, 95%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(18px); } }\r\n\r\n  .ui-bars { display: flex; align-items: flex-end; gap: 6px; height: 32px; }\r\n  .ui-bar { width: 8px; border-radius: 4px; background: #cbd5e1; animation: bar-dance 2s infinite ease-in-out; }\r\n  .ui-bar.active { background: var(--l-accent); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); }\r\n  @keyframes bar-dance { 0%, 100% { height: 40%; } 50% { height: 90%; } }\r\n\r\n  .ui-avatars-wrap {\r\n    position: relative; display: flex; align-items: center; width: 100%; justify-content: space-between;\r\n  }\r\n  \r\n  .ui-animated-icon {\r\n    width: 36px; height: 36px; border-radius: 10px;\r\n    background: #eff6ff; color: var(--l-accent);\r\n    display: flex; align-items: center; justify-content: center;\r\n    position: relative;\r\n  }\r\n  \r\n  .ui-pulse-ring {\r\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n    width: 75%; height: 75%; border-radius: inherit;\r\n    border: 2px solid var(--l-accent);\r\n    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\r\n  }\r\n  .ui-pulse-ring:nth-child(2) { animation-delay: 0.4s; }\r\n  \r\n  .ui-flash-icon {\r\n    position: relative; z-index: 1;\r\n    animation: flash-bob 2s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes pulse-ring {\r\n    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }\r\n    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\r\n  }\r\n  @keyframes flash-bob {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-3px); }\r\n  }\r\n\r\n  .ui-avatars { display: flex; }\r\n  .ui-ava { \r\n    width: 36px; height: 36px; border-radius: 50%; border: 2px solid #ffffff; \r\n    margin-left: -10px; background-color: #f1f5f9; display: flex; align-items: center; justify-content: center;\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 10px; font-weight: 700; color: var(--l-text-muted); box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n  }\r\n  .ui-ava:first-child { margin-left: 0; background-image: url('https:\/\/i.pravatar.cc\/100?img=68'); background-size: cover; }\r\n  .ui-ava:nth-child(2) { background-image: url('https:\/\/i.pravatar.cc\/100?img=44'); background-size: cover; }\r\n  .ui-ava.add { background: #f8fafc; color: var(--l-accent); }\r\n\r\n  .ui-reaction {\r\n    position: absolute; right: 40px; top: -10px;\r\n    width: 32px; height: 32px; border-radius: 50%;\r\n    background: #ffffff;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n    display: flex; align-items: center; justify-content: center;\r\n    color: #ef4444;\r\n    animation: reaction-pop 3s infinite ease-in-out;\r\n    border: 1px solid #f1f5f9;\r\n  }\r\n  \r\n  @keyframes reaction-pop {\r\n    0%, 100% { transform: scale(0.8) translateY(5px); opacity: 0; }\r\n    20% { transform: scale(1.1) translateY(0); opacity: 1; }\r\n    80% { transform: scale(1) translateY(0); opacity: 1; }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .ms-light-wrapper { padding: 60px 0; }\r\n    .ms-grid { grid-template-columns: 1fr; gap: 40px; }\r\n    .ms-content { text-align: center; padding: 0; margin-bottom: 10px; }\r\n    .ms-paragraph { margin: 0 auto; }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .ms-bento { grid-template-columns: 1fr; }\r\n    .ms-card-wide { grid-column: span 1; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ms-light-wrapper\">\r\n  <div class=\"ms-bg-deco\"><\/div>\r\n  <div class=\"ms-blob\"><\/div>\r\n\r\n  <div class=\"ms-container\">\r\n    <div class=\"ms-grid\">\r\n      \r\n      <div class=\"ms-content\">\r\n        <span class=\"ms-label-caps\">\u041d\u0430\u0448\u0430 \u041c\u0456\u0441\u0456\u044f<\/span>\r\n        <h2 class=\"ms-heading\">\r\n          \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457, \u0449\u043e<br> \r\n          <span>\u0440\u043e\u0437\u0443\u043c\u0456\u044e\u0442\u044c \u0431\u0456\u0437\u043d\u0435\u0441<\/span>\r\n        <\/h2>\r\n        <p class=\"ms-paragraph\">\r\n          \u041c\u0438 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454\u043c\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044f\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0443\u0432\u0430\u0442\u0438 \u0440\u043e\u0431\u043e\u0442\u0443 \u0437 \u043a\u043b\u0456\u0454\u043d\u0442\u0430\u043c\u0438 \u0442\u0430 \u0437\u0431\u0456\u043b\u044c\u0448\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0434\u0430\u0436\u0456 \u0437\u0430\u0432\u0434\u044f\u043a\u0438 \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0435\u043d\u043d\u044e \u0456\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0438\u0445 CRM-\u0441\u0438\u0441\u0442\u0435\u043c, \u0430\u0434\u0430\u043f\u0442\u043e\u0432\u0430\u043d\u0438\u0445 \u0434\u043e \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0456\u0432.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ms-bento\">\r\n        \r\n        <div class=\"ms-card\">\r\n          <div class=\"ms-visual-area\">\r\n            <div class=\"ui-switch\"><\/div>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"ms-card-head\">\u0410\u0432\u0442\u043e\u043f\u0456\u043b\u043e\u0442<\/div>\r\n            <div class=\"ms-card-sub\">\u0420\u0443\u0442\u0438\u043d\u0430 \u0437\u043d\u0438\u043a\u0430\u0454. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0432\u0435\u0434\u0435 \u043a\u043b\u0456\u0454\u043d\u0442\u0430 \u0432\u043e\u0440\u043e\u043d\u043a\u043e\u044e 24\/7.<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ms-card\">\r\n          <div class=\"ms-visual-area\">\r\n            <div class=\"ui-bars\">\r\n              <div class=\"ui-bar\" style=\"height:40%; animation-delay:0s\"><\/div>\r\n              <div class=\"ui-bar active\" style=\"height:80%; animation-delay:0.2s\"><\/div>\r\n              <div class=\"ui-bar\" style=\"height:50%; animation-delay:0.4s\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"ms-card-head\">\u0420\u0456\u0441\u0442 \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432<\/div>\r\n            <div class=\"ms-card-sub\">AI \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0443\u0454 \u0443\u0433\u043e\u0434\u0438 \u0442\u0430 \u043f\u0456\u0434\u043a\u0430\u0437\u0443\u0454 \u043d\u0430\u0439\u043a\u0440\u0430\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ms-card ms-card-wide\">\r\n          <div class=\"ms-visual-area\">\r\n            <div class=\"ui-avatars-wrap\">\r\n              \r\n              <div class=\"ui-animated-icon\">\r\n                <div class=\"ui-pulse-ring\"><\/div>\r\n                <div class=\"ui-pulse-ring\"><\/div>\r\n                <svg class=\"ui-flash-icon\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n              <\/div>\r\n\r\n              <div style=\"display: flex; align-items: center; position: relative;\">\r\n                <div class=\"ui-avatars\">\r\n                  <div class=\"ui-ava\"><\/div>\r\n                  <div class=\"ui-ava\"><\/div>\r\n                  <div class=\"ui-ava add\">+4k<\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ui-reaction\">\r\n                  <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"ms-card-head\">\u0406\u0434\u0435\u0430\u043b\u044c\u043d\u0438\u0439 \u0441\u0435\u0440\u0432\u0456\u0441<\/div>\r\n            <div class=\"ms-card-sub\">\u0412\u0441\u044f \u0456\u0441\u0442\u043e\u0440\u0456\u044f \u043a\u043b\u0456\u0454\u043d\u0442\u0430 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u0432\u0456\u043a\u043d\u0456. \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f, \u044f\u043a\u0430 \u043f\u0456\u0434\u0432\u0438\u0449\u0443\u0454 \u043b\u043e\u044f\u043b\u044c\u043d\u0456\u0441\u0442\u044c \u0442\u0430 LTV.<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4663b41 e-flex e-con-boxed e-con e-parent\" data-id=\"4663b41\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d05f20b elementor-widget elementor-widget-html\" data-id=\"d05f20b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .ww-section {\r\n    --w-bg: #ffffff;\r\n    --w-text: #0f172a;\r\n    --w-text-muted: #64748b;\r\n    --w-primary: #6366f1;\r\n    --w-border: #e2e8f0;\r\n    --w-hover-border: #6366f1;\r\n    --w-hover-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.1);\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--w-bg);\r\n    padding: 60px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .ww-section * { box-sizing: border-box; }\r\n\r\n  .ww-container {\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n \r\n    padding: 0 20px;\r\n  }\r\n\r\n  .ww-header {\r\n    margin-bottom: 60px;\r\n    max-width: 700px;\r\n    text-align: left;\r\n  }\r\n\r\n  \/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0421\u0442\u0438\u043b\u0438 \u0431\u0435\u0439\u0434\u0436\u0430 (\u0444\u043e\u043d, \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435, \u043e\u0442\u0441\u0442\u0443\u043f\u044b) *\/\r\n  .ww-eyebrow {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 12px;\r\n    font-weight: 700!important;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.1em;\r\n    color: var(--w-primary);\r\n    margin-bottom: 16px;\r\n    \r\n    display: inline-block; \/* \u0427\u0442\u043e\u0431\u044b \u0444\u043e\u043d \u0431\u044b\u043b \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 *\/\r\n    padding: 6px 12px;\r\n    background: #e0e7ff; \/* \u0421\u0432\u0435\u0442\u043b\u043e-\u0441\u0438\u043d\u0438\u0439 \u0444\u043e\u043d *\/\r\n    border-radius: 100px;\r\n  }\r\n\r\n  .ww-title {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: clamp(32px, 4vw, 48px);\r\n    font-weight: 700!important;\r\n    color: var(--w-text);\r\n    line-height: 1.1;\r\n    margin: 0;\r\n    letter-spacing: -0.02em;\r\n  }\r\n\r\n  .ww-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n    gap: 24px;\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .ww-card {\r\n    background: #ffffff;\r\n    border: 1px solid var(--w-border);\r\n    border-radius: 20px;\r\n    padding: 32px;\r\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100%;\r\n  }\r\n\r\n  .ww-card:hover {\r\n    border-color: var(--w-hover-border);\r\n    transform: translateY(-5px);\r\n    box-shadow: var(--w-hover-shadow);\r\n  }\r\n\r\n  .ww-icon-wrap {\r\n    width: 48px;\r\n    height: 48px;\r\n    background: #f8fafc;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--w-primary);\r\n    margin-bottom: 24px;\r\n    border: 1px solid var(--w-border);\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .ww-card:hover .ww-icon-wrap {\r\n    background: var(--w-primary);\r\n    color: #ffffff;\r\n    border-color: var(--w-primary);\r\n  }\r\n\r\n  .ww-card-title {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    color: var(--w-text);\r\n    margin: 0 0 12px 0;\r\n  }\r\n\r\n  .ww-card-desc {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n    color: var(--w-text-muted);\r\n    margin: 0;\r\n  }\r\n\r\n  .ww-banner {\r\n    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);\r\n    border: 1px solid rgba(99, 102, 241, 0.2);\r\n    border-radius: 20px;\r\n    padding: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 30px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .ww-banner::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; right: 0;\r\n    width: 300px; height: 100%;\r\n    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .ww-banner-text {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 20px;\r\n    font-weight: 600;\r\n    color: var(--w-text);\r\n    line-height: 1.5;\r\n    max-width: 700px;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  \r\n  .ww-banner-icon {\r\n    width: 64px; height: 64px;\r\n    flex-shrink: 0;\r\n    background: #ffffff;\r\n    border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center;\r\n    color: var(--w-primary);\r\n    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);\r\n    position: relative; z-index: 1;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .ww-section { padding: 40px 0; }\r\n    .ww-grid { grid-template-columns: 1fr; }\r\n    .ww-card { padding: 24px; }\r\n    \r\n    .ww-header { margin: 0 auto 40px; text-align: center; }\r\n    \r\n    .ww-banner { flex-direction: column; text-align: center; padding: 24px; }\r\n    .ww-banner-text { font-size: 16px; }\r\n    .ww-banner-icon { width: 48px; height: 48px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ww-section\">\r\n  <div class=\"ww-container\">\r\n    \r\n    <div class=\"ww-header\">\r\n      <span class=\"ww-eyebrow\">\u041c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0456<\/span>\r\n      <h2 class=\"ww-title\">\u0429\u043e \u043c\u0438 \u0440\u043e\u0431\u0438\u043c\u043e<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"ww-grid\">\r\n      \r\n      <div class=\"ww-card\">\r\n        <div class=\"ww-icon-wrap\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"ww-card-title\">\u0410\u043d\u0430\u043b\u0456\u0437 \u043f\u043e\u0432\u0435\u0434\u0456\u043d\u043a\u0438<\/h3>\r\n        <p class=\"ww-card-desc\">\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0430\u043d\u0430\u043b\u0456\u0437\u0443\u044e\u0442\u044c \u0434\u0456\u0457 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432, \u0432\u0438\u044f\u0432\u043b\u044f\u044e\u0447\u0438 \u043f\u0430\u0442\u0435\u0440\u043d\u0438 \u0442\u0430 \u043f\u0440\u0438\u0445\u043e\u0432\u0430\u043d\u0456 \u043f\u043e\u0442\u0440\u0435\u0431\u0438.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ww-card\">\r\n        <div class=\"ww-icon-wrap\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\" \/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"ww-card-title\">\u041f\u0440\u043e\u0433\u043d\u043e\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432<\/h3>\r\n        <p class=\"ww-card-desc\">AI \u0440\u043e\u0437\u0440\u0430\u0445\u043e\u0432\u0443\u0454 \u0439\u043c\u043e\u0432\u0456\u0440\u043d\u0456\u0441\u0442\u044c \u0443\u0433\u043e\u0434\u0438 \u0442\u0430 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0443\u0454 \u043f\u043e\u043f\u0438\u0442, \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u044e\u0447\u0438 \u043f\u043b\u0430\u043d\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0438.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ww-card\">\r\n        <div class=\"ww-icon-wrap\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4\" \/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"ww-card-title\">\u041e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044f \u0440\u043e\u0431\u043e\u0442\u0438<\/h3>\r\n        <p class=\"ww-card-desc\">\u0406\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0456 \u043f\u0456\u0434\u043a\u0430\u0437\u043a\u0438 \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0456\u0432: \u043a\u043e\u043c\u0443 \u0434\u0437\u0432\u043e\u043d\u0438\u0442\u0438, \u0449\u043e \u043f\u0438\u0441\u0430\u0442\u0438 \u0456 \u043a\u043e\u043b\u0438 \u0437\u0430\u043a\u0440\u0438\u0432\u0430\u0442\u0438 \u0443\u0433\u043e\u0434\u0443.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ww-card\">\r\n        <div class=\"ww-icon-wrap\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" \/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"ww-card-title\">\u041f\u043e\u0448\u0443\u043a \u0441\u043b\u0430\u0431\u043a\u0438\u0445 \u043c\u0456\u0441\u0446\u044c<\/h3>\r\n        <p class=\"ww-card-desc\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043a\u0430\u043d\u0443\u0454 \u0432\u043e\u0440\u043e\u043d\u043a\u0443 \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432 \u0442\u0430 \u043f\u0456\u0434\u0441\u0432\u0456\u0447\u0443\u0454 \u0435\u0442\u0430\u043f\u0438, \u0434\u0435 \u0432\u0438 \u0432\u0442\u0440\u0430\u0447\u0430\u0454\u0442\u0435 \u043d\u0430\u0439\u0431\u0456\u043b\u044c\u0448\u0435 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ww-card\">\r\n        <div class=\"ww-icon-wrap\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\" \/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"ww-card-title\">\u0420\u0456\u0448\u0435\u043d\u043d\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 \u0434\u0430\u043d\u0438\u0445<\/h3>\r\n        <p class=\"ww-card-desc\">\u0417\u0430\u043c\u0456\u043d\u0456\u0442\u044c \u0456\u043d\u0442\u0443\u0457\u0446\u0456\u044e \u043d\u0430 \u0442\u043e\u0447\u043d\u0443 \u0430\u043d\u0430\u043b\u0456\u0442\u0438\u043a\u0443. \u0414\u0430\u0448\u0431\u043e\u0440\u0434\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0447\u0430\u0441\u0456 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0456\u0447\u043d\u0438\u0445 \u0440\u0456\u0448\u0435\u043d\u044c.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ww-banner\">\r\n      <div class=\"ww-banner-text\">\r\n        \u041a\u043e\u0436\u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u0442\u044c\u0441\u044f \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u043e, \u0437 \u0443\u0440\u0430\u0445\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0456\u043a\u0438 \u0431\u0456\u0437\u043d\u0435\u0441\u0443 \u0432\u0430\u0448\u043e\u0457 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0457 \u0442\u0430 \u0440\u0438\u043d\u043a\u0443.\r\n      <\/div>\r\n      <div class=\"ww-banner-icon\">\r\n        <svg width=\"32\" height=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" \/><\/svg>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f199c8f e-flex e-con-boxed e-con e-parent\" data-id=\"f199c8f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e0e610 elementor-widget elementor-widget-html\" data-id=\"1e0e610\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .ia-section {\r\n    --ia-bg: #ffffff;\r\n    --ia-surface: #ffffff;\r\n    --ia-surface-hover: #f8fafc;\r\n    --ia-text: #0f172a;\r\n    --ia-text-muted: #64748b;\r\n    --ia-primary: #6366f1;\r\n    --ia-border: #e2e8f0;\r\n    --ia-shadow-card: 0 4px 6px -1px rgba(0,0,0,0.02), 0 10px 15px -3px rgba(0,0,0,0.03);\r\n    --ia-shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.01);\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--ia-bg);\r\n    padding: 70px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .ia-section * { box-sizing: border-box; }\r\n\r\n  .ia-container {\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .ia-header {\r\n    text-align: left;\r\n    max-width: 700px;\r\n    margin: 0 0 40px 0;\r\n  }\r\n\r\n  \/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0441\u0442\u0438\u043b\u044c \u0431\u0435\u0439\u0434\u0436\u0430 (\u0444\u043e\u043d, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0440\u0430\u0434\u0438\u0443\u0441) *\/\r\n  .ia-label {\r\n    display: inline-block; \/* \u0427\u0442\u043e\u0431\u044b \u0444\u043e\u043d \u0431\u044b\u043b \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0430 *\/\r\n    padding: 6px 12px;\r\n    background: #e0e7ff; \/* \u0421\u0432\u0435\u0442\u043b\u043e-\u0441\u0438\u043d\u0438\u0439 \u0444\u043e\u043d *\/\r\n    border-radius: 100px;\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 12px; \r\n    font-weight: 700; \r\n    text-transform: uppercase; \r\n    letter-spacing: 0.1em;\r\n    color: var(--ia-primary); \r\n    margin-bottom: 16px; \r\n  }\r\n\r\n  .ia-title {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: clamp(32px, 4vw, 48px); font-weight: 700!important; color: var(--ia-text);\r\n    line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em;\r\n  }\r\n\r\n  .ia-desc {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; line-height: 1.6; color: var(--ia-text-muted);\r\n  }\r\n\r\n  .ia-process-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n    gap: 24px;\r\n    margin-bottom: 50px;\r\n    position: relative;\r\n  }\r\n\r\n  .ia-process-grid::before {\r\n    content: ''; position: absolute; top: 80px; left: 0; right: 0; height: 2px;\r\n    background: linear-gradient(90deg, var(--ia-border) 50%, transparent 100%);\r\n    z-index: 0; display: block;\r\n  }\r\n\r\n  .ia-step-card {\r\n    background: var(--ia-surface);\r\n    border: 1px solid var(--ia-border);\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    position: relative;\r\n    z-index: 1;\r\n    transition: all 0.3s ease;\r\n    height: 100%;\r\n    display: flex; flex-direction: column;\r\n  }\r\n\r\n  .ia-step-card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: var(--ia-shadow-hover);\r\n    border-color: var(--ia-primary);\r\n  }\r\n\r\n  .ia-step-num {\r\n    width: 48px; height: 48px;\r\n    background: #ffffff;\r\n    border: 2px solid var(--ia-border);\r\n    color: var(--ia-text-muted);\r\n    border-radius: 12px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 16px; font-weight: 700;\r\n    margin-bottom: 20px;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 0 0 8px var(--ia-bg); \r\n  }\r\n\r\n  .ia-step-card:hover .ia-step-num {\r\n    border-color: var(--ia-primary);\r\n    background: var(--ia-primary);\r\n    color: #ffffff;\r\n  }\r\n\r\n  .ia-step-title {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; font-weight: 700; color: var(--ia-text); margin-bottom: 10px; line-height: 1.3;\r\n  }\r\n\r\n  .ia-audience-wrap {\r\n    background: #f8fafc;\r\n    border-radius: 24px;\r\n    padding: 60px;\r\n    display: grid;\r\n    grid-template-columns: 0.4fr 1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n  }\r\n\r\n  .ia-audience-head h3 {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 32px; font-weight: 800; margin: 0 0 16px; color: var(--ia-text);\r\n  }\r\n  .ia-audience-head p {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 16px; color: var(--ia-text-muted); line-height: 1.6;\r\n  }\r\n\r\n  .ia-tags-grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 16px;\r\n  }\r\n\r\n  .ia-pill {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    background: #ffffff;\r\n    border: 1px solid var(--ia-border);\r\n    padding: 16px 24px;\r\n    border-radius: 100px;\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 16px; font-weight: 600; color: var(--ia-text);\r\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    cursor: default;\r\n    box-shadow: var(--ia-shadow-card);\r\n  }\r\n\r\n  .ia-pill:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n    box-shadow: var(--ia-shadow-hover);\r\n    border-color: var(--ia-primary);\r\n    color: var(--ia-primary);\r\n  }\r\n\r\n  .ia-pill-icon {\r\n    width: 32px; height: 32px;\r\n    border-radius: 50%;\r\n    background: #f1f5f9;\r\n    color: var(--ia-text-muted);\r\n    display: flex; align-items: center; justify-content: center;\r\n    transition: all 0.3s;\r\n  }\r\n\r\n  .ia-pill:hover .ia-pill-icon {\r\n    background: var(--ia-primary);\r\n    color: #ffffff;\r\n  }\r\n\r\n  @media (max-width: 1000px) {\r\n    .ia-section { padding: 50px 0; }\r\n    \r\n    .ia-header { text-align: center; margin: 0 auto 40px; }\r\n\r\n    .ia-process-grid { grid-template-columns: 1fr; gap: 16px; }\r\n    \r\n    .ia-process-grid::before { \r\n      width: 2px; height: 100%; left: 36px; top: 0; \r\n      background: linear-gradient(180deg, var(--ia-border) 50%, transparent 100%);\r\n    }\r\n    \r\n    .ia-step-card { flex-direction: row; align-items: center; gap: 20px; padding: 16px; }\r\n    .ia-step-num { margin-bottom: 0; width: 40px; height: 40px; flex-shrink: 0; font-size: 14px; }\r\n    .ia-step-title { margin: 0; font-size: 16px; }\r\n    \r\n    .ia-audience-wrap { grid-template-columns: 1fr; padding: 30px; gap: 30px; }\r\n    .ia-audience-head h3 { font-size: 24px; }\r\n    \r\n    .ia-tags-grid { gap: 10px; }\r\n    .ia-pill { width: 100%; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ia-section\">\r\n  <div class=\"ia-container\">\r\n    \r\n    <div class=\"ia-header\">\r\n      <span class=\"ia-label\">\u0406\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434<\/span>\r\n      <h2 class=\"ia-title\">\u041c\u0438 \u043d\u0435 \u043f\u0440\u043e\u043f\u043e\u043d\u0443\u0454\u043c\u043e <br>\u0448\u0430\u0431\u043b\u043e\u043d\u043d\u0456 \u0440\u0456\u0448\u0435\u043d\u043d\u044f<\/h2>\r\n      <p class=\"ia-desc\">\r\n        \u041a\u043e\u0436\u0435\u043d \u043f\u0440\u043e\u0454\u043a\u0442 \u043f\u043e\u0447\u0438\u043d\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u0433\u043b\u0438\u0431\u043e\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0456\u0437\u0443 \u0431\u0456\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0456\u0432, \u043f\u0456\u0441\u043b\u044f \u0447\u043e\u0433\u043e \u043c\u0438 \u0431\u0443\u0434\u0443\u0454\u043c\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u0440\u043e\u043a \u0437\u0430 \u043a\u0440\u043e\u043a\u043e\u043c.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ia-process-grid\">\r\n      \r\n      <div class=\"ia-step-card\">\r\n        <div class=\"ia-step-num\">01<\/div>\r\n        <div class=\"ia-step-title\">\u041f\u0440\u043e\u0454\u043a\u0442\u0443\u0454\u043c\u043e \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0443<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ia-step-card\">\r\n        <div class=\"ia-step-num\">02<\/div>\r\n        <div class=\"ia-step-title\">\u0406\u043d\u0442\u0435\u0433\u0440\u0443\u0454\u043c\u043e \u043c\u043e\u0434\u0443\u043b\u0456 \u0428\u0406<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ia-step-card\">\r\n        <div class=\"ia-step-num\">03<\/div>\r\n        <div class=\"ia-step-title\">\u041d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0454\u043c\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0443<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ia-step-card\">\r\n        <div class=\"ia-step-num\">04<\/div>\r\n        <div class=\"ia-step-title\">\u041d\u0430\u0432\u0447\u0430\u0454\u043c\u043e \u0441\u043f\u0456\u0432\u0440\u043e\u0431\u0456\u0442\u043d\u0438\u043a\u0456\u0432<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ia-step-card\">\r\n        <div class=\"ia-step-num\">05<\/div>\r\n        <div class=\"ia-step-title\">\u0422\u0435\u0445\u043d\u0456\u0447\u043d\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ia-audience-wrap\">\r\n      <div class=\"ia-audience-head\">\r\n        <h3>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u043d\u0430\u0448\u0456 \u0440\u0456\u0448\u0435\u043d\u043d\u044f?<\/h3>\r\n        <p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0431\u0443\u0434\u044c-\u044f\u043a\u0456 \u043f\u043e\u0442\u0440\u0435\u0431\u0438:<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"ia-tags-grid\">\r\n        \r\n        <div class=\"ia-pill\">\r\n          <div class=\"ia-pill-icon\">\r\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/><\/svg>\r\n          <\/div>\r\n          \u041c\u0430\u043b\u0438\u0439 \u0442\u0430 \u0441\u0435\u0440\u0435\u0434\u043d\u0456\u0439 \u0431\u0456\u0437\u043d\u0435\u0441\r\n        <\/div>\r\n\r\n        <div class=\"ia-pill\">\r\n          <div class=\"ia-pill-icon\">\r\n             <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\r\n          <\/div>\r\n          \u041a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0456 \u043a\u043b\u0456\u0454\u043d\u0442\u0438\r\n        <\/div>\r\n\r\n        <div class=\"ia-pill\">\r\n          <div class=\"ia-pill-icon\">\r\n            <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z\"\/><\/svg>\r\n          <\/div>\r\n          \u0412\u0456\u0434\u0434\u0456\u043b\u0438 \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432 \u0456 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0443\r\n        <\/div>\r\n\r\n        <div class=\"ia-pill\">\r\n          <div class=\"ia-pill-icon\">\r\n             <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z\"\/><\/svg>\r\n          <\/div>\r\n          \u0421\u0435\u0440\u0432\u0456\u0441\u043d\u0456 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0457\r\n        <\/div>\r\n\r\n        <div class=\"ia-pill\">\r\n          <div class=\"ia-pill-icon\">\r\n             <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg>\r\n          <\/div>\r\n          \u041e\u043d\u043b\u0430\u0439\u043d-\u0431\u0456\u0437\u043d\u0435\u0441 \u0442\u0430 E-commerce\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c143ed0 e-flex e-con-boxed e-con e-parent\" data-id=\"c143ed0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70590a2 elementor-widget elementor-widget-html\" data-id=\"70590a2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .why-final-section {\r\n    --w-bg: #ffffff;\r\n    --w-text: #0f172a;\r\n    --w-text-sub: #475569;\r\n    --w-border: rgba(226, 232, 240, 0.8);\r\n    \r\n    --c-indigo-bg: #e0e7ff; --c-indigo-text: #4338ca;\r\n    --c-green-bg: #dcfce7;  --c-green-text: #15803d;\r\n    --c-purple-bg: #f3e8ff; --c-purple-text: #7e22ce;\r\n    --c-blue-bg: #dbeafe;   --c-blue-text: #1e40af;\r\n    \r\n    --w-shadow-card: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -1px rgba(0,0,0,0.02);\r\n    --w-shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.01);\r\n\r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--w-bg);\r\n    padding: 80px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--w-text);\r\n  }\r\n  \r\n  .why-final-section * { box-sizing: border-box; }\r\n\r\n  .why-texture {\r\n    position: absolute; inset: 0; opacity: 0.4;\r\n    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);\r\n    background-size: 32px 32px;\r\n    mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);\r\n    -webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);\r\n    pointer-events: none; z-index: 0;\r\n  }\r\n\r\n  .why-container {\r\n    margin: 0 auto; position: relative; z-index: 2;\r\n\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .why-head { margin-bottom: 60px; max-width: 680px; }\r\n  \r\n  \/* \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u043e\u043d, \u043f\u0430\u0434\u0434\u0438\u043d\u0433\u0438 \u0438 \u0440\u0430\u0434\u0438\u0443\u0441 \u0434\u043b\u044f \u0431\u0435\u0439\u0434\u0436\u0430 *\/\r\n  .why-label {\r\n    display: inline-block;\r\n    padding: 6px 12px;\r\n    background: #e0e7ff; \/* \u0424\u043e\u043d (\u043a\u0430\u043a e0e7ff) *\/\r\n    border-radius: 100px;\r\n    font-size: 12px; \r\n    font-weight: 700; \r\n    text-transform: uppercase; \r\n    letter-spacing: 0.08em;\r\n    color: #6366f1; \/* \u0426\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 *\/\r\n    margin-bottom: 16px;\r\n  }\r\n  \r\n  .why-title {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em;\r\n  }\r\n  \r\n  .why-subtitle {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; color: var(--w-text-sub); line-height: 1.6;\r\n  }\r\n\r\n  .why-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 24px;\r\n    margin-bottom: 80px;\r\n  }\r\n\r\n  .why-card {\r\n    background: #ffffff;\r\n    border: 1px solid var(--w-border);\r\n    border-radius: 20px;\r\n    padding: 28px;\r\n    transition: all 0.3s ease;\r\n    display: flex; flex-direction: column; gap: 20px;\r\n    position: relative;\r\n  }\r\n\r\n  .why-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: var(--w-shadow-hover);\r\n    border-color: #cbd5e1;\r\n  }\r\n\r\n  .why-icon-box {\r\n    width: 56px; height: 56px;\r\n    border-radius: 14px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 26px;\r\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n  }\r\n  \r\n  .why-card:hover .why-icon-box { transform: scale(1.1) rotate(3deg); }\r\n\r\n  .box-ai       { background: var(--c-purple-bg); color: var(--c-purple-text); }\r\n  .box-scale    { background: var(--c-blue-bg); color: var(--c-blue-text); }\r\n  .box-secure   { background: var(--c-green-bg); color: var(--c-green-text); }\r\n  .box-result   { background: var(--c-indigo-bg); color: var(--c-indigo-text); }\r\n\r\n  .why-h { font-family: 'Inter', sans-serif !important; font-size: 18px; font-weight: 700; margin: 0; color: var(--w-text); }\r\n  .why-p { font-family: 'Inter', sans-serif !important; font-size: 15px; line-height: 1.5; color: var(--w-text-sub); margin: 0; }\r\n\r\n  .span-2 { grid-column: span 2; }\r\n  \r\n  .why-list { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }\r\n  .why-tag {\r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px;\r\n    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;\r\n  }\r\n\r\n  .google-cta-box {\r\n    position: relative;\r\n    border-radius: 24px;\r\n    padding: 3px; \r\n    background: #ffffff;\r\n    overflow: hidden;\r\n    width: 100%;\r\n    max-width: 1000px;\r\n    margin: 0 auto;\r\n    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.08);\r\n  }\r\n\r\n  .google-cta-box::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; left: -50%; width: 200%; height: 200%;\r\n    z-index: 0;\r\n    background: conic-gradient(\r\n      from 0deg,\r\n      #4285F4, #EA4335, #FBBC05, #34A853, #4285F4\r\n    );\r\n    animation: google-spin 4s linear infinite;\r\n  }\r\n\r\n  .google-cta-inner {\r\n    position: relative;\r\n    background: #ffffff;\r\n    border-radius: 21px;\r\n    padding: 60px 40px;\r\n    text-align: center;\r\n    z-index: 1;\r\n    height: 100%;\r\n    display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n  }\r\n\r\n  @keyframes google-spin {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n  }\r\n\r\n  .cta-h { \r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 32px; font-weight: 800; margin-bottom: 16px; color: #0f172a; \r\n  }\r\n  .cta-p { \r\n    font-family: 'Inter', sans-serif !important;\r\n    font-size: 18px; color: #64748b; margin-bottom: 32px; max-width: 600px; line-height: 1.6; \r\n  }\r\n\r\n  .cta-btn {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    padding: 16px 36px;\r\n    background: #0f172a; \r\n    color: #fff;\r\n    border-radius: 12px; \r\n    font-weight: 600; \r\n    text-decoration: none !important;\r\n    border-bottom: none !important;\r\n    font-family: 'Inter', sans-serif !important;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);\r\n    border: 2px solid transparent;\r\n  }\r\n\r\n  .cta-btn:hover { \r\n    transform: translateY(-2px); \r\n    background: #ffffff;\r\n    color: #6366f1 !important;\r\n    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.25);\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .why-final-section { padding: 60px 0; }\r\n    .why-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }\r\n    .span-2 { grid-column: span 1; }\r\n    .why-list { flex-wrap: wrap; }\r\n    .google-cta-inner { padding: 40px 24px; }\r\n    .cta-h { font-size: 26px; }\r\n    .cta-p { font-size: 16px; margin-bottom: 24px; }\r\n    .cta-btn { width: 100%; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"why-final-section\">\r\n  <div class=\"why-texture\"><\/div>\r\n\r\n  <div class=\"why-container\">\r\n    \r\n    <div class=\"why-head\">\r\n      <span class=\"why-label\">\u0427\u043e\u043c\u0443 \u043e\u0431\u0438\u0440\u0430\u044e\u0442\u044c \u043d\u0430\u0441<\/span>\r\n      <h2 class=\"why-title\">\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457, \u0449\u043e \u043f\u0440\u0430\u0446\u044e\u044e\u0442\u044c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h2>\r\n      <p class=\"why-subtitle\">\u041c\u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0443\u0454\u043c\u043e \u0441\u043e\u0444\u0442. \u041c\u0438 \u0441\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0435\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0434\u0435 \u043a\u043e\u0436\u0435\u043d \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0456\u0434\u0441\u0438\u043b\u044e\u0454 \u0432\u0430\u0448 \u0431\u0456\u0437\u043d\u0435\u0441.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"why-grid\">\r\n      \r\n      <div class=\"why-card\">\r\n        <div class=\"why-icon-box box-ai\">\r\n          <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\r\n        <\/div>\r\n        <div>\r\n          <h3 class=\"why-h\">\u0415\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430 \u0432 \u0428\u0406<\/h3>\r\n          <p class=\"why-p\" style=\"margin-top:8px\">\u0412\u043b\u0430\u0441\u043d\u0456 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u044f\u043a\u0456 \u0430\u0434\u0430\u043f\u0442\u0443\u044e\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0432\u0430\u0448\u0443 \u043d\u0456\u0448\u0443.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why-card\">\r\n        <div class=\"why-icon-box box-scale\">\r\n          <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\/><\/svg>\r\n        <\/div>\r\n        <div>\r\n          <h3 class=\"why-h\">\u0413\u043d\u0443\u0447\u043a\u0456\u0441\u0442\u044c \u0442\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431<\/h3>\r\n          <p class=\"why-p\" style=\"margin-top:8px\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 5 \u0434\u043e 5000 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0456\u0432 \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u0448\u0432\u0438\u0434\u043a\u043e\u0441\u0442\u0456.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why-card\">\r\n        <div class=\"why-icon-box box-secure\">\r\n          <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/><\/svg>\r\n        <\/div>\r\n        <div>\r\n          <h3 class=\"why-h\">\u0411\u0435\u0437\u043f\u0435\u043a\u0430 \u0434\u0430\u043d\u0438\u0445<\/h3>\r\n          <p class=\"why-p\" style=\"margin-top:8px\">\u0428\u0438\u0444\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 GDPR. \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u0431\u0435\u043a\u0430\u043f\u0438 \u0442\u0430 \u0437\u0430\u0445\u0438\u0441\u0442 \u0432\u0456\u0434 \u0430\u0442\u0430\u043a.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why-card span-2\">\r\n        <div style=\"display:flex; justify-content: space-between; align-items:flex-start;\">\r\n          <div>\r\n            <h3 class=\"why-h\">\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u043f\u0456\u0441\u043b\u044f \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0435\u043d\u043d\u044f<\/h3>\r\n            <p class=\"why-p\" style=\"margin-top:8px; max-width: 400px;\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0438\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u0442\u0430 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0438\u0439 \u0441\u0443\u043f\u0440\u043e\u0432\u0456\u0434 24\/7.<\/p>\r\n            <div class=\"why-list\">\r\n              <span class=\"why-tag\">\u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f<\/span>\r\n              <span class=\"why-tag\">\u041e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f<\/span>\r\n              <span class=\"why-tag\">\u041a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0456\u0457<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"why-icon-box box-result\" style=\"background:#f1f5f9; color:#475569;\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z\"\/><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"why-card\">\r\n        <div class=\"why-icon-box box-result\">\r\n          <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z\"\/><\/svg>\r\n        <\/div>\r\n        <div>\r\n          <h3 class=\"why-h\">\u041e\u0440\u0456\u0454\u043d\u0442\u0430\u0446\u0456\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\r\n          <p class=\"why-p\" style=\"margin-top:8px\">\u041c\u0438 \u0444\u043e\u043a\u0443\u0441\u0443\u0454\u043c\u043e\u0441\u044c \u043d\u0430 \u0437\u0440\u043e\u0441\u0442\u0430\u043d\u043d\u0456 \u0432\u0430\u0448\u043e\u0433\u043e ROI, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430 \u043a\u043e\u0434\u0456.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"google-cta-box\">\r\n      <div class=\"google-cta-inner\">\r\n        <h2 class=\"cta-h\">\u0413\u043e\u0442\u043e\u0432\u0456 \u0434\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0457 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457?<\/h2>\r\n        <p class=\"cta-p\">\r\n          \u0417\u0432\u2019\u044f\u0436\u0456\u0442\u044c\u0441\u044f \u0437 \u043d\u0430\u043c\u0438, \u0449\u043e\u0431 \u043e\u0431\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0454\u043a\u0442. \u041c\u0438 \u043f\u0456\u0434\u0433\u043e\u0442\u0443\u0454\u043c\u043e \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0438\u0439 \u0430\u043d\u0430\u043b\u0456\u0437 \u0442\u0430 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0443 \u043f\u0440\u043e\u043f\u043e\u0437\u0438\u0446\u0456\u044e \u0441\u0430\u043c\u0435 \u043f\u0456\u0434 \u0432\u0430\u0448 \u0431\u0456\u0437\u043d\u0435\u0441.\r\n        <\/p>\r\n        <a href=\"#form\" class=\"cta-btn\">\u041e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043f\u0440\u043e\u043f\u043e\u0437\u0438\u0446\u0456\u044e<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb6649f e-flex e-con-boxed e-con e-parent\" data-id=\"bb6649f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bbed7a elementor-widget elementor-widget-html\" data-id=\"1bbed7a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .about-pro-section {\r\n    --ab-bg: #ffffff;\r\n    --ab-text: #0f172a;\r\n    --ab-text-muted: #64748b;\r\n    --ab-accent: #6366f1;\r\n    --ab-card-bg: rgba(255, 255, 255, 0.7);\r\n    --ab-border: rgba(255, 255, 255, 0.8);\r\n    --ab-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 10px 15px -3px rgba(0,0,0,0.05);\r\n    --ab-hover-shadow: 0 20px 40px -5px rgba(99, 102, 241, 0.15);\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--ab-bg);\r\n    padding: 120px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--ab-text);\r\n  }\r\n\r\n  .about-pro-section * { box-sizing: border-box; }\r\n\r\n  .ab-blob {\r\n    position: absolute;\r\n    width: 600px; height: 600px;\r\n    border-radius: 50%;\r\n    filter: blur(80px);\r\n    opacity: 0.4;\r\n    z-index: 0;\r\n    animation: ab-float 10s ease-in-out infinite;\r\n  }\r\n  .ab-blob-1 { top: -100px; right: -100px; background: radial-gradient(#e0e7ff, transparent 70%); }\r\n  .ab-blob-2 { bottom: -100px; left: -100px; background: radial-gradient(#f3e8ff, transparent 70%); animation-delay: -5s; }\r\n\r\n  @keyframes ab-float {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    50% { transform: translate(20px, -20px) scale(1.05); }\r\n  }\r\n\r\n  .ab-grid-texture {\r\n    position: absolute; inset: 0;\r\n    background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),\r\n                      linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    z-index: 0;\r\n    mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);\r\n    -webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .ab-container {\r\n\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n    display: grid;\r\n    grid-template-columns: 0.9fr 1.1fr;\r\n    gap: 80px;\r\n    align-items: center;\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .ab-text-block { position: relative; }\r\n\r\n  .ab-label {\r\n    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;\r\n    background: #f1f5f9; color: var(--ab-accent); border-radius: 100px;\r\n    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  .ab-title {\r\n    font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.1; margin: 0 0 24px 0; letter-spacing: -0.02em;\r\n    background: linear-gradient(135deg, #0f172a 0%, #475569 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;     \r\n    font-family: 'Inter', sans-serif !important;\r\n  }\r\n\r\n  .ab-lead { font-size: 18px; line-height: 1.6; color: var(--ab-text); font-weight: 600; margin-bottom: 20px; }\r\n  .ab-desc { font-size: 16px; line-height: 1.7; color: var(--ab-text-muted); margin-bottom: 0; }\r\n\r\n  .ab-values-grid {\r\n    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;\r\n  }\r\n\r\n  .val-card {\r\n    background: var(--ab-card-bg);\r\n    border: 1px solid var(--ab-border);\r\n    border-radius: 24px;\r\n    padding: 30px;\r\n    display: flex; flex-direction: column; gap: 16px;\r\n    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    position: relative; overflow: hidden;\r\n    box-shadow: var(--ab-shadow);\r\n  }\r\n\r\n  .val-card::after {\r\n    content: '';\r\n    position: absolute; inset: 0; z-index: -1;\r\n    background-image: linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),\r\n                      linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);\r\n    background-size: 20px 20px;\r\n    opacity: 0.7;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .val-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: var(--ab-hover-shadow);\r\n    border-color: rgba(99, 102, 241, 0.4);\r\n    background: #ffffff;\r\n  }\r\n\r\n  .val-card::before {\r\n    content: '';\r\n    position: absolute; top: -50px; right: -50px; width: 100px; height: 100px;\r\n    background: radial-gradient(circle, var(--ab-accent) 0%, transparent 70%);\r\n    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; filter: blur(20px);\r\n  }\r\n  .val-card:hover::before { opacity: 0.2; }\r\n\r\n  .val-icon {\r\n    width: 48px; height: 48px; border-radius: 12px; background: #f8fafc; color: var(--ab-text);\r\n    display: flex; align-items: center; justify-content: center; font-size: 24px;\r\n    border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; z-index: 1;\r\n  }\r\n  .val-card:hover .val-icon {\r\n    background: var(--ab-accent); color: #ffffff; border-color: var(--ab-accent);\r\n    transform: scale(1.1) rotate(-3deg);\r\n  }\r\n\r\n  .val-title { font-size: 18px; font-weight: 700; margin: 0; position: relative; z-index: 1; }\r\n  \r\n  .val-num {\r\n    position: absolute; top: 20px; right: 20px; font-size: 14px; font-weight: 700; color: #cbd5e1;\r\n    transition: color 0.3s; z-index: 1;\r\n  }\r\n  .val-card:hover .val-num { color: var(--ab-accent); }\r\n\r\n  @media (max-width: 992px) {\r\n    .about-pro-section { padding: 60px 0; }\r\n    .ab-container { grid-template-columns: 1fr; gap: 50px; }\r\n    .ab-text-block { text-align: center; }\r\n    .ab-lead, .ab-desc { margin-left: auto; margin-right: auto; max-width: 700px; }\r\n  }\r\n  @media (max-width: 600px) {\r\n    .ab-values-grid { grid-template-columns: 1fr; }\r\n    .val-card { align-items: center; text-align: center; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"about-pro-section\" id=\"about\">\r\n  <div class=\"ab-grid-texture\"><\/div>\r\n  <div class=\"ab-blob ab-blob-1\"><\/div>\r\n  <div class=\"ab-blob ab-blob-2\"><\/div>\r\n\r\n  <div class=\"ab-container\">\r\n    \r\n    <div class=\"ab-text-block\">\r\n      <div class=\"ab-label\">\u041f\u0440\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044e<\/div>\r\n      <h2 class=\"ab-title\">\u0425\u0442\u043e \u043c\u0438<\/h2>\r\n      <p class=\"ab-lead\">\r\n        \u0406\u043d\u0444\u043e\u0441\u0444\u0435\u0440\u0430 \u0428\u0406 \u2014 \u0446\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0444\u0430\u0445\u0456\u0432\u0446\u0456\u0432 \u0443 \u0441\u0444\u0435\u0440\u0456 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0435\u043d\u043d\u044f, \u0430\u043d\u0430\u043b\u0456\u0442\u0438\u043a\u0438 \u0434\u0430\u043d\u0438\u0445 \u0442\u0430 \u0448\u0442\u0443\u0447\u043d\u043e\u0433\u043e \u0456\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443.\r\n      <\/p>\r\n      <p class=\"ab-desc\">\r\n        \u041c\u0438 \u043e\u0431\u2019\u0454\u0434\u043d\u0430\u043b\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0447\u043d\u0443 \u0435\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0443 \u0442\u0430 \u0431\u0456\u0437\u043d\u0435\u0441-\u043c\u0438\u0441\u043b\u0435\u043d\u043d\u044f, \u0449\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u0438, \u044f\u043a\u0456 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0432\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u044c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0439.\r\n        <br><br>\r\n        \u041c\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u043c\u043e \u0437 \u0431\u0456\u0437\u043d\u0435\u0441\u0430\u043c\u0438 \u0440\u0456\u0437\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443 \u2014 \u0432\u0456\u0434 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0456\u0432 \u0434\u043e \u0432\u0435\u043b\u0438\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0439 \u2014 \u0456 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454\u043c\u043e \u0457\u043c \u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044e \u0437 \u043a\u043b\u0456\u0454\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 \u0434\u0430\u043d\u0438\u0445.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ab-values-grid\">\r\n      \r\n      <div class=\"val-card\">\r\n        <span class=\"val-num\">01<\/span>\r\n        <div class=\"val-icon\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"val-title\">\u041e\u0440\u0456\u0454\u043d\u0442\u0430\u0446\u0456\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043b\u0456\u0454\u043d\u0442\u0430<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\">\r\n        <span class=\"val-num\">02<\/span>\r\n        <div class=\"val-icon\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"\/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"val-title\">\u041f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c \u0442\u0430 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0441\u0442\u0432\u043e<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\">\r\n        <span class=\"val-num\">03<\/span>\r\n        <div class=\"val-icon\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"val-title\">\u0406\u043d\u043d\u043e\u0432\u0430\u0446\u0456\u0457 \u0442\u0430 \u0440\u043e\u0437\u0432\u0438\u0442\u043e\u043a<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\">\r\n        <span class=\"val-num\">04<\/span>\r\n        <div class=\"val-icon\">\r\n          <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/><\/svg>\r\n        <\/div>\r\n        <h3 class=\"val-title\">\u042f\u043a\u0456\u0441\u0442\u044c \u0456 \u0431\u0435\u0437\u043f\u0435\u043a\u0430 \u0440\u0456\u0448\u0435\u043d\u044c<\/h3>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-af1c91a e-flex e-con-boxed e-con e-parent\" data-id=\"af1c91a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b3ff62 elementor-widget elementor-widget-html\" data-id=\"9b3ff62\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .solutions-pro {\r\n    --sp-bg: #ffffff;\r\n    --sp-text: #0f172a;\r\n    --sp-sub: #64748b;\r\n    --sp-border: #e2e8f0;\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--sp-bg);\r\n    padding: 60px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--sp-text);\r\n  }\r\n\r\n  .solutions-pro * { box-sizing: border-box; }\r\n\r\n  .sp-container { \r\n    margin: 0 auto; \r\n    position: relative; \r\n    z-index: 2; \r\n \r\n    padding: 0 20px;\r\n  }\r\n\r\n  \/* --- \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u043b\u0435\u0432\u043e \u0434\u043b\u044f \u041f\u041a --- *\/\r\n  .sp-head { \r\n    text-align: left;        \/* \u0422\u0435\u043a\u0441\u0442 \u0441\u043b\u0435\u0432\u0430 *\/\r\n    max-width: 800px; \r\n    margin: 0 0 60px 0;      \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c auto \u043f\u043e \u0431\u043e\u043a\u0430\u043c, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043d\u0438\u0437\u0443 *\/\r\n  }\r\n\r\n  .sp-tag {\r\n    display: inline-block; \r\n    padding: 6px 12px; \r\n    background: #f1f5f9; \r\n    border-radius: 100px;\r\n    font-size: 12px; \r\n    font-weight: 700; \r\n    text-transform: uppercase; \r\n    letter-spacing: 0.08em; \r\n    color: #6366f1; \r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .sp-title {\r\n    font-size: clamp(36px, 4vw, 56px); \r\n    font-weight: 700; \r\n    line-height: 1.1; \r\n    margin: 0;    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: linear-gradient(135deg, #0f172a 0%, #475569 100%); \r\n    -webkit-background-clip: text; \r\n    -webkit-text-fill-color: transparent;\r\n  }\r\n\r\n  .sp-grid {\r\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;\r\n    perspective: 1000px;\r\n  }\r\n\r\n  .sp-card {\r\n    position: relative;\r\n    background: #ffffff;\r\n    border-radius: 24px;\r\n    border: 1px solid var(--sp-border);\r\n    padding: 40px 32px;\r\n    display: flex; flex-direction: column;\r\n    overflow: hidden;\r\n    height: 100%;\r\n    transition: transform 0.1s ease, box-shadow 0.3s ease, border-color 0.3s ease;\r\n  }\r\n\r\n  .sp-card:hover {\r\n    border-color: rgba(0,0,0,0.1);\r\n    box-shadow: 0 25px 60px -10px rgba(0,0,0,0.12);\r\n  }\r\n\r\n  .sp-spotlight {\r\n    position: absolute; inset: 0; pointer-events: none; z-index: 0;\r\n    opacity: 0; transition: opacity 0.3s;\r\n    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), var(--glow-color), transparent 40%);\r\n  }\r\n  .sp-card:hover .sp-spotlight { opacity: 0.12; }\r\n\r\n  .sp-card[data-type=\"sales\"] { --accent: #3b82f6; --glow-color: #3b82f6; }\r\n  .sp-card[data-type=\"market\"] { --accent: #8b5cf6; --glow-color: #8b5cf6; }\r\n  .sp-card[data-type=\"service\"] { --accent: #10b981; --glow-color: #10b981; }\r\n\r\n  .sp-visual {\r\n    height: 160px; margin-bottom: 30px; position: relative; z-index: 1;\r\n    background: #f8fafc; border-radius: 20px; overflow: hidden;\r\n    display: flex; align-items: center; justify-content: center;\r\n    border: 1px solid #f1f5f9;\r\n  }\r\n\r\n  .graph-container {\r\n    display: flex; align-items: flex-end; gap: 10px; height: 80px; width: 100px;\r\n    position: relative;\r\n  }\r\n  \r\n  .graph-line {\r\n    position: absolute; top: 0; left: 0; right: 0; bottom: 0;\r\n    z-index: 2; pointer-events: none;\r\n  }\r\n  .g-bar {\r\n    width: 20px; border-radius: 6px 6px 0 0;\r\n    background: linear-gradient(180deg, var(--accent) 0%, rgba(255,255,255,0) 150%);\r\n    opacity: 0.8;\r\n    position: relative; overflow: hidden;\r\n    transform-origin: bottom;\r\n    animation: bar-grow 3s infinite cubic-bezier(0.4, 0, 0.2, 1);\r\n  }\r\n  \r\n  .g-bar::after {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;\r\n    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent);\r\n    transform: translateY(100%);\r\n    animation: bar-shine 3s infinite ease-in-out;\r\n  }\r\n\r\n  .g-bar:nth-child(1) { height: 40%; animation-delay: 0s; }\r\n  .g-bar:nth-child(1)::after { animation-delay: 0s; }\r\n  \r\n  .g-bar:nth-child(2) { height: 65%; animation-delay: 0.2s; }\r\n  .g-bar:nth-child(2)::after { animation-delay: 0.2s; }\r\n  \r\n  .g-bar:nth-child(3) { height: 100%; animation-delay: 0.4s; }\r\n  .g-bar:nth-child(3)::after { animation-delay: 0.4s; }\r\n\r\n  @keyframes bar-grow {\r\n    0%, 100% { transform: scaleY(0.9); opacity: 0.7; }\r\n    50% { transform: scaleY(1.05); opacity: 1; }\r\n  }\r\n  @keyframes bar-shine {\r\n    0% { transform: translateY(150%); }\r\n    50% { transform: translateY(-150%); }\r\n    100% { transform: translateY(-150%); }\r\n  }\r\n\r\n\r\n  .scan-wrap {\r\n    position: relative; width: 100px; height: 100px;\r\n    display: flex; align-items: center; justify-content: center;\r\n  }\r\n  \r\n  .scan-ring {\r\n    position: absolute; border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 50%;\r\n  }\r\n  .sr-1 { width: 100%; height: 100%; }\r\n  .sr-2 { width: 66%; height: 66%; }\r\n  .sr-3 { width: 33%; height: 33%; background: rgba(139, 92, 246, 0.1); }\r\n  \r\n  .scan-beam {\r\n    position: absolute; top: 0; left: 0; right: 0; bottom: 0;\r\n    background: conic-gradient(from 0deg, transparent 70%, rgba(139, 92, 246, 0.4));\r\n    border-radius: 50%;\r\n    animation: beam-spin 3s linear infinite;\r\n  }\r\n  \r\n  .scan-dot {\r\n    position: absolute; width: 8px; height: 8px; background: var(--accent); border-radius: 50%;\r\n    box-shadow: 0 0 10px var(--accent);\r\n    opacity: 0;\r\n    animation: dot-flash 3s linear infinite;\r\n  }\r\n  \r\n  .sd-1 { top: 20%; right: 20%; animation-delay: 0.4s; }\r\n  .sd-2 { bottom: 25%; left: 25%; animation-delay: 1.9s; }\r\n  .sd-3 { top: 15%; left: 45%; animation-delay: 2.5s; }\r\n\r\n  @keyframes beam-spin { to { transform: rotate(360deg); } }\r\n  @keyframes dot-flash {\r\n    0% { opacity: 0; transform: scale(0.5); }\r\n    10%, 30% { opacity: 1; transform: scale(1.2); }\r\n    100% { opacity: 0; transform: scale(0.5); }\r\n  }\r\n\r\n\r\n  .msg-wrap {\r\n    position: relative; width: 100px; height: 80px;\r\n  }\r\n  \r\n  .msg-bubble {\r\n    position: absolute; border-radius: 12px; padding: 10px 14px;\r\n    font-size: 10px; font-weight: 700;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n    opacity: 0; transform: translateY(10px) scale(0.8);\r\n  }\r\n  \r\n  .msg-1 {\r\n    top: 0; left: 0; background: #fff; color: #64748b;\r\n    border-bottom-left-radius: 2px;\r\n    animation: msg-pop-1 4s infinite ease;\r\n  }\r\n  \r\n  .msg-2 {\r\n    bottom: 0; right: 0; background: var(--accent); color: white;\r\n    border-bottom-right-radius: 2px;\r\n    display: flex; align-items: center; justify-content: center; gap: 4px;\r\n    animation: msg-pop-2 4s infinite ease;\r\n  }\r\n\r\n  .typing-dot {\r\n    width: 4px; height: 4px; background: rgba(255,255,255,0.8); border-radius: 50%;\r\n    animation: typing 1s infinite;\r\n  }\r\n  .typing-dot:nth-child(2) { animation-delay: 0.2s; }\r\n  .typing-dot:nth-child(3) { animation-delay: 0.4s; }\r\n\r\n  .msg-heart {\r\n    position: absolute; top: -10px; right: -5px; font-size: 16px;\r\n    opacity: 0; transform: translateY(10px) rotate(-10deg);\r\n    animation: heart-pop 4s infinite ease;\r\n  }\r\n\r\n  @keyframes msg-pop-1 {\r\n    0%, 100% { opacity: 0; transform: translateY(10px) scale(0.8); }\r\n    5%, 90% { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n  @keyframes msg-pop-2 {\r\n    0%, 30% { opacity: 0; transform: translateY(10px) scale(0.8); }\r\n    35%, 85% { opacity: 1; transform: translateY(0) scale(1); }\r\n    90%, 100% { opacity: 0; transform: translateY(0) scale(1); }\r\n  }\r\n  @keyframes typing {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-3px); }\r\n  }\r\n  @keyframes heart-pop {\r\n    0%, 50% { opacity: 0; transform: translateY(10px) scale(0.5); }\r\n    60%, 80% { opacity: 1; transform: translateY(-5px) scale(1.2) rotate(10deg); }\r\n    100% { opacity: 0; transform: translateY(-20px) scale(1); }\r\n  }\r\n\r\n  .sp-content { position: relative; z-index: 1; }\r\n  .sp-card-title { font-size: 20px; font-weight: 700; margin: 0 0 20px 0; color: var(--sp-text); }\r\n\r\n  .sp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }\r\n  .sp-item { font-size: 15px; color: var(--sp-sub); display: flex; align-items: flex-start; gap: 10px; }\r\n  .sp-check {\r\n    width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-top: 7px; opacity: 0.7;\r\n    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 0 3px var(--accent);\r\n  }\r\n\r\n  \/* --- \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u0415: \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f --- *\/\r\n  @media (max-width: 900px) {\r\n    \/* \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\r\n    .sp-head { text-align: center; margin: 0 auto 40px; }\r\n    \r\n    .sp-grid { grid-template-columns: 1fr; gap: 24px; }\r\n    .sp-card { transform: none !important; padding: 30px 24px; }\r\n    .sp-visual { height: 140px; }\r\n    .sp-title { font-size: 32px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"solutions-pro\" id=\"solutions\">\r\n  <div class=\"sp-container\">\r\n    \r\n    <div class=\"sp-head\">\r\n      <span class=\"sp-tag\">\u0420\u0456\u0448\u0435\u043d\u043d\u044f<\/span>\r\n      <h2 class=\"sp-title\">\u0406\u043d\u0442\u0435\u043b\u0435\u043a\u0442 \u0434\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0432\u0456\u0434\u0434\u0456\u043b\u0443<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"sp-grid\">\r\n      \r\n      <div class=\"sp-card\" data-type=\"sales\">\r\n        <div class=\"sp-spotlight\"><\/div>\r\n        <div class=\"sp-visual\">\r\n          <div class=\"graph-container\">\r\n            <div class=\"g-bar\"><\/div>\r\n            <div class=\"g-bar\"><\/div>\r\n            <div class=\"g-bar\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"sp-content\">\r\n          <h3 class=\"sp-card-title\">CRM \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432<\/h3>\r\n          <ul class=\"sp-list\">\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u044f \u0432\u043e\u0440\u043e\u043d\u043a\u0438<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0456\u0432<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0410\u043d\u0430\u043b\u0456\u0442\u0438\u043a\u0430 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0428\u0406-\u043f\u0456\u0434\u043a\u0430\u0437\u043a\u0438 \u0443\u0433\u043e\u0434<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"sp-card\" data-type=\"market\">\r\n        <div class=\"sp-spotlight\"><\/div>\r\n        <div class=\"sp-visual\">\r\n          <div class=\"scan-wrap\">\r\n            <div class=\"scan-ring sr-1\"><\/div>\r\n            <div class=\"scan-ring sr-2\"><\/div>\r\n            <div class=\"scan-ring sr-3\"><\/div>\r\n            <div class=\"scan-beam\"><\/div>\r\n            <div class=\"scan-dot sd-1\"><\/div>\r\n            <div class=\"scan-dot sd-2\"><\/div>\r\n            <div class=\"scan-dot sd-3\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"sp-content\">\r\n          <h3 class=\"sp-card-title\">CRM \u0434\u043b\u044f \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0443<\/h3>\r\n          <ul class=\"sp-list\">\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0410\u043d\u0430\u043b\u0456\u0437 \u0434\u0436\u0435\u0440\u0435\u043b \u043b\u0456\u0434\u0456\u0432<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0421\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u044f \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0456 \u043e\u0444\u0444\u0435\u0440\u0438<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u041e\u0446\u0456\u043d\u043a\u0430 \u043a\u0430\u043c\u043f\u0430\u043d\u0456\u0439<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"sp-card\" data-type=\"service\">\r\n        <div class=\"sp-spotlight\"><\/div>\r\n        <div class=\"sp-visual\">\r\n          <div class=\"msg-wrap\">\r\n            <div class=\"msg-bubble msg-1\">\u0414\u043e\u043f\u043e\u043c\u043e\u0436\u0435\u0442\u0435?<\/div>\r\n            <div class=\"msg-bubble msg-2\">\r\n              <div class=\"typing-dot\"><\/div>\r\n              <div class=\"typing-dot\"><\/div>\r\n              <div class=\"typing-dot\"><\/div>\r\n            <\/div>\r\n            <div class=\"msg-heart\">\u2764\ufe0f<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"sp-content\">\r\n          <h3 class=\"sp-card-title\">CRM \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0456\u0441\u0443<\/h3>\r\n          <ul class=\"sp-list\">\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0404\u0434\u0438\u043d\u0430 \u0431\u0430\u0437\u0430 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0406\u0441\u0442\u043e\u0440\u0456\u044f \u0437\u0432\u0435\u0440\u043d\u0435\u043d\u044c<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u0410\u0432\u0442\u043e-\u0440\u043e\u0437\u043f\u043e\u0434\u0456\u043b \u0437\u0430\u043f\u0438\u0442\u0456\u0432<\/li>\r\n            <li class=\"sp-item\"><div class=\"sp-check\"><\/div>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u044f\u043a\u043e\u0441\u0442\u0456<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const cards = document.querySelectorAll(\".sp-card\");\r\n\r\n    cards.forEach((card) => {\r\n      card.addEventListener(\"mousemove\", (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        card.style.setProperty(\"--mouse-x\", `${x}px`);\r\n        card.style.setProperty(\"--mouse-y\", `${y}px`);\r\n\r\n        if (window.innerWidth > 900) {\r\n            const centerX = rect.width \/ 2;\r\n            const centerY = rect.height \/ 2;\r\n            const rotateX = ((y - centerY) \/ centerY) * -4;\r\n            const rotateY = ((x - centerX) \/ centerX) * 4;\r\n            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;\r\n        }\r\n      });\r\n\r\n      card.addEventListener(\"mouseleave\", () => {\r\n        card.style.transform = \"perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)\";\r\n      });\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-239a27d e-flex e-con-boxed e-con e-parent\" data-id=\"239a27d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcae1ba elementor-widget elementor-widget-html\" data-id=\"fcae1ba\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .steps-section {\r\n    --st-bg: #f8fafc;\r\n    --st-text: #0f172a;\r\n    --st-sub: #64748b;\r\n    --st-accent: #6366f1;\r\n    --st-line: #e2e8f0;\r\n    border-radius: 20px;\r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--st-bg);\r\n    padding: 60px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--st-text);\r\n  }\r\n\r\n  .steps-section * { box-sizing: border-box; }\r\n\r\n  .st-glow {\r\n    position: absolute; top: 0; right: 0;\r\n    width: 600px; height: 600px;\r\n    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);\r\n    pointer-events: none; z-index: 0;\r\n  }\r\n\r\n  .st-container {\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n \r\n    padding: 0 20px;\r\n  }\r\n\r\n  .st-head { margin-bottom: 80px; text-align: left; }\r\n  \r\n  .st-label {\r\n    display: inline-block; padding: 6px 12px; background: #e0e7ff; border-radius: 100px;\r\n    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; \r\n    color: var(--st-accent); margin-bottom: 20px;\r\n  }\r\n\r\n  .st-title {\r\n    font-size: clamp(36px, 4vw, 52px); font-weight: 700; line-height: 1.1; margin: 0 0 20px 0;\r\n    background: linear-gradient(135deg, #0f172a 0%, #475569 100%);\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  }\r\n  \r\n  .st-desc {\r\n    font-size: 18px; color: var(--st-sub); line-height: 1.6; max-width: 600px;\r\n  }\r\n\r\n  .timeline-wrap {\r\n    position: relative;\r\n    padding-left: 40px;\r\n  }\r\n\r\n  .timeline-line {\r\n    position: absolute; top: 20px; bottom: 20px; left: 11px;\r\n    width: 2px; background: #e2e8f0; z-index: 0;\r\n  }\r\n\r\n  .timeline-progress {\r\n    position: absolute; top: 20px; left: 11px;\r\n    width: 2px;\r\n    background: var(--st-accent);\r\n    z-index: 1;\r\n    height: 0%; \r\n    transition: height 0.5s linear;\r\n    box-shadow: 0 0 10px var(--st-accent);\r\n  }\r\n\r\n  .step-item {\r\n    position: relative;\r\n    margin-bottom: 40px;\r\n    cursor: pointer;\r\n  }\r\n  .step-item:last-child { margin-bottom: 0; }\r\n\r\n  .step-node {\r\n    position: absolute; left: -34px; top: 75px;\r\n    width: 12px; height: 12px;\r\n    border-radius: 50%;\r\n    background: #ffffff;\r\n    border: 2px solid var(--st-line);\r\n    z-index: 2; \r\n    transition: all 0.4s ease;\r\n    box-shadow: 0 0 0 4px var(--st-bg);\r\n  }\r\n\r\n  .step-item.active .step-node,\r\n  .step-item:hover .step-node {\r\n    background: var(--st-accent);\r\n    border-color: var(--st-accent);\r\n    box-shadow: 0 0 0 4px var(--st-bg), 0 0 15px var(--st-accent);\r\n    transform: scale(1.3);\r\n  }\r\n\r\n  .step-card {\r\n    background: #ffffff;\r\n    border: 1px solid rgba(0,0,0,0.06);\r\n    border-radius: 20px;\r\n    padding: 32px 40px;\r\n    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: flex; gap: 30px; align-items: flex-start;\r\n  }\r\n\r\n  .step-item.active .step-card,\r\n  .step-item:hover .step-card {\r\n    transform: translateX(15px);\r\n    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15);\r\n    border-color: rgba(99, 102, 241, 0.4);\r\n  }\r\n\r\n .step-num {\r\n    font-size: 48px;\r\n    font-weight: 800;\r\n    line-height: 1;\r\n    background: linear-gradient(180deg, #e2e8f0 0%, #f8fafc 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    transition: all 0.4s ease;\r\n    flex-shrink: 0;\r\n    width: 80px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n  }\r\n  \r\n  .step-item.active .step-num,\r\n  .step-item:hover .step-num {\r\n    background: linear-gradient(180deg, var(--st-accent) 0%, #a5b4fc 100%);\r\n    -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .step-content { flex-grow: 1; }\r\n  \r\n  .step-title {\r\n    font-size: 24px;  font-weight: 700; color: var(--st-text); margin: 0 0 10px 0;    font-family: 'Inter', sans-serif !important;\r\n    transition: color 0.3s;\r\n  }\r\n  .step-item.active .step-title,\r\n  .step-item:hover .step-title { color: var(--st-accent); }\r\n\r\n  .step-desc {\r\n    font-size: 16px; color: var(--st-sub); line-height: 1.6; margin: 0;\r\n    transition: color 0.3s;\r\n  }\r\n  .step-item.active .step-desc { color: var(--st-text); }\r\n\r\n  @media (max-width: 900px) {\r\n    .st-head { text-align: center; margin-bottom: 40px; }\r\n    .timeline-wrap { padding-left: 0; }\r\n    .timeline-line, .timeline-progress, .step-node { display: none; }\r\n    .step-card { flex-direction: column; gap: 16px; padding: 24px; text-align: center; }\r\n    .step-num { width: 100%; font-size: 36px; margin-bottom: 0; }\r\n    .step-item.active .step-card, \r\n    .step-item:hover .step-card { transform: translateY(-5px); }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"steps-section\" id=\"process\">\r\n  <div class=\"st-glow\"><\/div>\r\n\r\n  <div class=\"st-container\">\r\n    \r\n    <div class=\"st-head\">\r\n      <span class=\"st-label\">\u042f\u043a \u043c\u0438 \u043f\u0440\u0430\u0446\u044e\u0454\u043c\u043e<\/span>\r\n      <h2 class=\"st-title\">\u0428\u043b\u044f\u0445 \u0434\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0457 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457<\/h2>\r\n      <p class=\"st-desc\">\u041c\u0438 \u0440\u043e\u0437\u0440\u043e\u0431\u0438\u043b\u0438 \u0447\u0456\u0442\u043a\u0438\u0439 \u0442\u0430 \u043f\u0440\u043e\u0437\u043e\u0440\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441 \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0435\u043d\u043d\u044f, \u0449\u043e\u0431 \u0432\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0448\u0432\u0438\u0434\u043a\u043e \u0442\u0430 \u0431\u0435\u0437 \u0441\u0442\u0440\u0435\u0441\u0443.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"timeline-wrap\">\r\n      <div class=\"timeline-line\"><\/div>\r\n      <div class=\"timeline-progress\" id=\"timelineProg\"><\/div>\r\n\r\n      <div class=\"step-item active\" data-index=\"0\">\r\n        <div class=\"step-node\"><\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-num\">01<\/div>\r\n          <div class=\"step-content\">\r\n            <h3 class=\"step-title\">\u0410\u043d\u0430\u043b\u0456\u0437<\/h3>\r\n            <p class=\"step-desc\">\u0413\u043b\u0438\u0431\u043e\u043a\u0435 \u0437\u0430\u043d\u0443\u0440\u0435\u043d\u043d\u044f \u0443 \u0432\u0430\u0448 \u0431\u0456\u0437\u043d\u0435\u0441. \u0412\u0438\u0432\u0447\u0430\u0454\u043c\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0438, \u0431\u043e\u043b\u0456, \u0446\u0456\u043b\u0456 \u0442\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u0457 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0443\u0432\u0430\u043d\u043d\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u0434\u0430\u043d\u043d\u044f.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"step-item\" data-index=\"1\">\r\n        <div class=\"step-node\"><\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-num\">02<\/div>\r\n          <div class=\"step-content\">\r\n            <h3 class=\"step-title\">\u041f\u0440\u043e\u0454\u043a\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/h3>\r\n            <p class=\"step-desc\">\u0410\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u0438\u0439 \u0435\u0442\u0430\u043f. \u0424\u043e\u0440\u043c\u0443\u0454\u043c\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 CRM, \u043b\u043e\u0433\u0456\u043a\u0443 \u0440\u043e\u0431\u043e\u0442\u0438 AI-\u043c\u043e\u0434\u0443\u043b\u0456\u0432 \u0442\u0430 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0456\u0432.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"step-item\" data-index=\"2\">\r\n        <div class=\"step-node\"><\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-num\">03<\/div>\r\n          <div class=\"step-content\">\r\n            <h3 class=\"step-title\">\u0420\u043e\u0437\u0440\u043e\u0431\u043a\u0430 \u0442\u0430 \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0436\u0435\u043d\u043d\u044f<\/h3>\r\n            <p class=\"step-desc\">\u0422\u0435\u0445\u043d\u0456\u0447\u043d\u0430 \u0440\u0435\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f. \u0421\u0442\u0432\u043e\u0440\u044e\u0454\u043c\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u0430\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0454\u043c\u043e \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u0457 \u0437 \u0456\u043d\u0448\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0456\u0441\u0430\u043c\u0438 \u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u043c\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0443 \u0440\u043e\u0431\u043e\u0442\u0443.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"step-item\" data-index=\"3\">\r\n        <div class=\"step-node\"><\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-num\">04<\/div>\r\n          <div class=\"step-content\">\r\n            <h3 class=\"step-title\">\u041d\u0430\u0432\u0447\u0430\u043d\u043d\u044f<\/h3>\r\n            <p class=\"step-desc\">\u041c\u0438 \u043d\u0435 \u0437\u0430\u043b\u0438\u0448\u0430\u0454\u043c\u043e \u0432\u0430\u0441 \u0441\u0430\u043c \u043d\u0430 \u0441\u0430\u043c \u0437 \u0441\u043e\u0444\u0442\u043e\u043c. \u041f\u0440\u043e\u0432\u043e\u0434\u0438\u043c\u043e \u0442\u0440\u0435\u043d\u0456\u043d\u0433\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0438, \u0449\u043e\u0431 \u043a\u043e\u0436\u0435\u043d \u0441\u043f\u0456\u0432\u0440\u043e\u0431\u0456\u0442\u043d\u0438\u043a \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0432 CRM.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"step-item\" data-index=\"4\">\r\n        <div class=\"step-node\"><\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-num\">05<\/div>\r\n          <div class=\"step-content\">\r\n            <h3 class=\"step-title\">\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430<\/h3>\r\n            <p class=\"step-desc\">\u0414\u043e\u0432\u0433\u043e\u0441\u0442\u0440\u043e\u043a\u043e\u0432\u0435 \u043f\u0430\u0440\u0442\u043d\u0435\u0440\u0441\u0442\u0432\u043e. \u0417\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454\u043c\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0438\u0439 \u0441\u0443\u043f\u0440\u043e\u0432\u0456\u0434, \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044e \u043f\u0440\u043e\u0446\u0435\u0441\u0456\u0432 \u0442\u0430 \u0440\u043e\u0437\u0432\u0438\u0442\u043e\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u043f\u0456\u0434 \u043d\u043e\u0432\u0456 \u0437\u0430\u0434\u0430\u0447\u0456.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const steps = document.querySelectorAll('.step-item');\r\n    const progressBar = document.getElementById('timelineProg');\r\n    let currentIndex = 0;\r\n    let autoPlayInterval;\r\n    let isPaused = false;\r\n\r\n    const activateStep = (index) => {\r\n      steps.forEach(step => step.classList.remove('active'));\r\n      \r\n      if(steps[index]) {\r\n        steps[index].classList.add('active');\r\n        \r\n        const totalSteps = steps.length;\r\n        const percent = (index \/ (totalSteps - 1)) * 100;\r\n        \r\n        progressBar.style.height = `${Math.min(percent, 100)}%`;\r\n      }\r\n    };\r\n\r\n    const startAutoPlay = () => {\r\n      autoPlayInterval = setInterval(() => {\r\n        if (!isPaused) {\r\n          currentIndex = (currentIndex + 1) % steps.length;\r\n          activateStep(currentIndex);\r\n        }\r\n      }, 3000); \r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          startAutoPlay();\r\n        } else {\r\n          clearInterval(autoPlayInterval);\r\n        }\r\n      });\r\n    }, { threshold: 0.3 });\r\n\r\n    const section = document.querySelector('.steps-section');\r\n    if(section) observer.observe(section);\r\n\r\n    steps.forEach((step, index) => {\r\n      step.addEventListener('mouseenter', () => {\r\n        isPaused = true;\r\n        currentIndex = index;\r\n        activateStep(currentIndex);\r\n      });\r\n      \r\n      step.addEventListener('mouseleave', () => {\r\n        isPaused = false;\r\n      });\r\n    });\r\n    \r\n    activateStep(0);\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52dca7f e-flex e-con-boxed e-con e-parent\" data-id=\"52dca7f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5dc340 elementor-widget elementor-widget-html\" data-id=\"b5dc340\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  .wa-section {\r\n    --wa-bg: #ffffff; \r\n    --wa-accent: #6366f1;\r\n    --wa-shadow-active: 0 25px 50px -12px rgba(0,0,0,0.25);\r\n\r\n    font-family: 'Inter', sans-serif !important;\r\n\r\n    padding: 50px 0px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .wa-section * { box-sizing: border-box; }\r\n\r\n  .wa-container {\r\n    margin: 0 auto;\r\n\r\n \r\n  }\r\n\r\n  .wa-head { \r\n    text-align: left; \r\n    margin: 0 0 60px 0; \r\n  }\r\n  \r\n  .wa-tag {\r\n    display: inline-block; padding: 6px 12px; background: #e0e7ff; border-radius: 100px;\r\n    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wa-accent); margin-bottom: 20px;\r\n  }\r\n  \r\n  .wa-title {\r\n    font-size: clamp(32px, 4vw, 48px); font-weight: 700; margin: 0; color: #0f172a;\r\n    font-family: 'Inter', sans-serif !important;\r\n  }\r\n\r\n  .wa-wrap {\r\n    display: flex;\r\n    gap: 16px;\r\n    height: 550px;\r\n    width: 100%;\r\n  }\r\n\r\n  .wa-card {\r\n    position: relative;\r\n    flex: 1;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s, box-shadow 0.3s;\r\n    display: flex; \r\n    flex-direction: column;\r\n    padding: 30px;\r\n    border: 1px solid rgba(255, 255, 255, 0.1); \r\n    \r\n    background-color: #1e293b; \r\n    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9)), var(--bg-img);\r\n    background-size: cover;\r\n    background-position: center;\r\n    color: #ffffff; \r\n  }\r\n\r\n  .wa-card.active {\r\n    flex: 4;\r\n    border-color: var(--wa-accent);\r\n    box-shadow: var(--wa-shadow-active);\r\n    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.8)), var(--bg-img);\r\n  }\r\n\r\n  .wa-vertical-txt {\r\n    position: absolute; left: 50%; top: 50%;\r\n    transform: translate(-50%, -50%) rotate(-90deg);\r\n    white-space: nowrap;\r\n    font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;\r\n    color: rgba(255, 255, 255, 0.7); \r\n    transition: opacity 0.3s;\r\n    opacity: 1;\r\n    pointer-events: none;\r\n    text-shadow: 0 2px 4px rgba(0,0,0,0.3);\r\n  }\r\n  .wa-card.active .wa-vertical-txt { opacity: 0; }\r\n\r\n  .wa-expand-btn {\r\n    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);\r\n    width: 40px; height: 40px; border-radius: 50%;\r\n    background: rgba(255, 255, 255, 0.2); \r\n    color: #ffffff;\r\n    \r\n    display: flex; align-items: center; justify-content: center;\r\n    transition: opacity 0.3s, background 0.3s;\r\n    opacity: 1;\r\n  }\r\n  .wa-card:hover .wa-expand-btn { background: var(--wa-accent); }\r\n  .wa-card.active .wa-expand-btn { opacity: 0; pointer-events: none; }\r\n\r\n  .wa-inner {\r\n    display: flex; flex-direction: column; height: 100%; justify-content: flex-end;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: all 0.4s ease;\r\n    min-width: 400px;\r\n  }\r\n\r\n  .wa-card.active .wa-inner {\r\n    opacity: 1; transform: translateY(0);\r\n    transition-delay: 0.2s;\r\n  }\r\n\r\n  .wa-icon {\r\n    width: 56px; height: 56px; border-radius: 16px;\r\n    background: var(--wa-accent); color: #fff;\r\n    display: flex; align-items: center; justify-content: center;\r\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\r\n    margin-bottom: 24px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .wa-card-title {\r\n    font-size: 32px; font-weight: 700; margin: 0 0 16px 0; line-height: 1.1; color: #ffffff;\r\n    text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n  }\r\n  .wa-card-desc {\r\n    font-size: 16px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; max-width: 480px; margin: 0;\r\n  }\r\n\r\n  .wa-num {\r\n    position: absolute; top: 30px; left: 30px;\r\n    font-size: 14px; font-weight: 700;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    padding: 4px 10px; border-radius: 100px;\r\n    transition: 0.3s;\r\n  }\r\n  .wa-card.active .wa-num { border-color: var(--wa-accent); color: #ffffff; background: var(--wa-accent); }\r\n\r\n\r\n  @media (max-width: 992px) {\r\n    .wa-head { text-align: center; margin: 0 auto 40px; } \r\n    .wa-wrap { flex-direction: column; height: auto; gap: 20px; }\r\n    .wa-card {\r\n      min-height: 200px; \r\n      flex: none !important;\r\n      padding: 24px;\r\n      display: grid !important;\r\n      grid-template-columns: auto 1fr auto;\r\n      align-items: start;\r\n      gap: 20px;\r\n      background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.85)), var(--bg-img);\r\n    }\r\n    \r\n    .wa-vertical-txt, .wa-expand-btn { display: none !important; }\r\n    .wa-inner {\r\n      opacity: 1 !important; transform: none !important; min-width: 0 !important; display: block;\r\n    }\r\n    .wa-icon {\r\n      margin: 0; width: 48px; height: 48px; font-size: 20px;\r\n      grid-column: 1; grid-row: 1 \/ span 2;\r\n    }\r\n    .wa-text-wrap { grid-column: 2; align-self: center; }\r\n    .wa-num {\r\n      position: static !important; grid-column: 3; grid-row: 1; margin: 0; font-size: 12px; padding: 2px 8px;\r\n      color: #fff; border-color: rgba(255,255,255,0.4);\r\n    }\r\n    .wa-card-title { font-size: 18px; margin-bottom: 8px; }\r\n    .wa-card-desc { font-size: 14px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"wa-section\" id=\"advantages\">\r\n  <div class=\"wa-container\">\r\n    \r\n    <div class=\"wa-head\">\r\n      <span class=\"wa-tag\">\u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438<\/span>\r\n      <h2 class=\"wa-title\">\u0427\u043e\u043c\u0443 \u043e\u0431\u0438\u0440\u0430\u044e\u0442\u044c \u043d\u0430\u0441<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"wa-wrap\" id=\"waWrapper\">\r\n\r\n      <div class=\"wa-card active\" style=\"--bg-img: url('https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2025\/12\/financial-company-with-nobody-in-it-at-midnight-2025-02-20-07-01-07-utc.webp');\">\r\n        <div class=\"wa-vertical-txt\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c<\/div>\r\n        <div class=\"wa-expand-btn\">\r\n          <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"wa-num\">01<\/div>\r\n\r\n        <div class=\"wa-inner\">\r\n          <div class=\"wa-icon\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"wa-text-wrap\">\r\n            <h3 class=\"wa-card-title\">CRM \u043f\u0456\u0434 \u0431\u0456\u0437\u043d\u0435\u0441<\/h3>\r\n            <p class=\"wa-card-desc\">\u0410\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u0431\u0443\u0434\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430\u0432\u043a\u043e\u043b\u043e \u0432\u0430\u0448\u0438\u0445 \u0443\u043d\u0456\u043a\u0430\u043b\u044c\u043d\u0438\u0445 \u0431\u0456\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0456\u0432.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"wa-card\" style=\"--bg-img: url('https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2025\/12\/business-team-discussing-and-using-technology-arti-2025-10-16-01-52-14-utc-1.webp');\">\r\n        <div class=\"wa-vertical-txt\">AI \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0456\u0457<\/div>\r\n        <div class=\"wa-expand-btn\">\r\n          <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"wa-num\">02<\/div>\r\n\r\n        <div class=\"wa-inner\">\r\n          <div class=\"wa-icon\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"wa-text-wrap\">\r\n            <h3 class=\"wa-card-title\">\u0428\u0442\u0443\u0447\u043d\u0438\u0439 \u0456\u043d\u0442\u0435\u043b\u0435\u043a\u0442<\/h3>\r\n            <p class=\"wa-card-desc\">\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e LLM-\u043c\u043e\u0434\u0435\u043b\u0456 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0456\u0432 \u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0456\u0457 \u0440\u0443\u0442\u0438\u043d\u0438.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"wa-card\" style=\"--bg-img: url('https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2025\/12\/portrait-of-smiling-multi-cultural-business-team-s-2024-10-20-23-27-57-utc.webp');\">\r\n        <div class=\"wa-vertical-txt\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431<\/div>\r\n        <div class=\"wa-expand-btn\">\r\n          <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"wa-num\">03<\/div>\r\n\r\n        <div class=\"wa-inner\">\r\n          <div class=\"wa-icon\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"wa-text-wrap\">\r\n            <h3 class=\"wa-card-title\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\u0430\u043d\u0456\u0441\u0442\u044c<\/h3>\r\n            <p class=\"wa-card-desc\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043b\u0435\u0433\u043a\u043e \u0432\u0438\u0442\u0440\u0438\u043c\u0443\u0454 \u0440\u0456\u0441\u0442 \u0432\u0456\u0434 10 \u0434\u043e 10 000 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0456\u0432 \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u0448\u0432\u0438\u0434\u043a\u043e\u0441\u0442\u0456.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"wa-card\" style=\"--bg-img: url('https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2025\/12\/malicious-man-hacking-stealing-credit-card-number-2025-02-20-07-38-55-utc.webp');\">\r\n        <div class=\"wa-vertical-txt\">\u0411\u0435\u0437\u043f\u0435\u043a\u0430<\/div>\r\n        <div class=\"wa-expand-btn\">\r\n          <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"wa-num\">04<\/div>\r\n\r\n        <div class=\"wa-inner\">\r\n          <div class=\"wa-icon\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"wa-text-wrap\">\r\n            <h3 class=\"wa-card-title\">\u0411\u0435\u0437\u043f\u0435\u043a\u0430 \u0434\u0430\u043d\u0438\u0445<\/h3>\r\n            <p class=\"wa-card-desc\">\u0428\u0438\u0444\u0440\u0443\u0432\u0430\u043d\u043d\u044f, \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u0431\u0435\u043a\u0430\u043f\u0438 \u0442\u0430 enterprise-\u0437\u0430\u0445\u0438\u0441\u0442 \u0432\u0456\u0434 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456\u0445 \u0437\u0430\u0433\u0440\u043e\u0437.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"wa-card\" style=\"--bg-img: url('https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2025\/12\/business-team-joining-hands-showing-unity-and-team-2025-08-11-01-23-05-utc.webp');\">\r\n        <div class=\"wa-vertical-txt\">\u041f\u0430\u0440\u0442\u043d\u0435\u0440\u0441\u0442\u0432\u043e<\/div>\r\n        <div class=\"wa-expand-btn\">\r\n          <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"wa-num\">05<\/div>\r\n\r\n        <div class=\"wa-inner\">\r\n          <div class=\"wa-icon\">\r\n            <svg width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"wa-text-wrap\">\r\n            <h3 class=\"wa-card-title\">\u0421\u043f\u0456\u0432\u043f\u0440\u0430\u0446\u044f<\/h3>\r\n            <p class=\"wa-card-desc\">\u0417\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454\u043c\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0443, \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0443 \u0442\u0430 \u0440\u043e\u0437\u0432\u0438\u0442\u043e\u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const initAccordion = () => {\r\n      if (window.innerWidth <= 992) return;\r\n      const cards = document.querySelectorAll('.wa-card');\r\n      cards.forEach(card => {\r\n        card.addEventListener('mouseenter', () => {\r\n          cards.forEach(c => c.classList.remove('active'));\r\n          card.classList.add('active');\r\n        });\r\n      });\r\n    };\r\n    initAccordion();\r\n    window.addEventListener('resize', initAccordion);\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-155e446 e-flex e-con-boxed e-con e-parent\" data-id=\"155e446\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29b67b4 elementor-widget elementor-widget-html\" data-id=\"29b67b4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n  .snr_root_v_final{\n    --x_primary:#a5b4fc!important;\n    --x_secondary:#f9a8d4!important;\n    --x_dark:#1e293b!important;\n    --x_gray:#64748b!important;\n    --x_bg:#ffffff!important;\n\n    --x_card_w:280px!important;\n    --x_card_h:320px!important;\n    --x_gap:32px!important;\n    --x_peek:0.35!important;\n\n    --x_view:calc((var(--x_card_w)*2)+var(--x_gap)+(var(--x_card_w)*var(--x_peek))+40px)!important;\n\n    font-family:'Inter',sans-serif!important;\n  }\n\n  .snr_root_v_final,.snr_root_v_final *{font-family:'Inter',sans-serif!important;box-sizing:border-box!important}\n\n  .sect_z99_wrap{\n    border-radius:20px;\n    background:var(--x_bg)!important;\n    padding:100px 0!important;\n    overflow:hidden!important;\n    position:relative!important;\n    width:100%!important;\n  }\n\n  .bg_atm_k2{\n    position:absolute!important;\n    top:50%!important;left:0!important;\n    transform:translateY(-50%)!important;\n    width:100%!important;height:100%!important;\n    background:radial-gradient(ellipse at left,rgba(165,180,252,.08) 0%,transparent 70%)!important;\n    pointer-events:none!important;z-index:0!important;\n  }\n\n  .grid_layout_x5{\n    max-width:1400px!important;\n    margin:0 auto!important;\n    padding:0 24px!important;\n    position:relative!important;\n    z-index:2!important;\n    display:grid!important;\n    grid-template-columns:400px 1fr!important;\n    gap:60px!important;\n    align-items:center!important;\n  }\n\n  .col_txt_m3{\n    display:flex!important;\n    flex-direction:column!important;\n    align-items:flex-start!important;\n    min-width:0!important;\n  }\n\n  .tag_pill_q1{\n    display:inline-block!important;\n    padding:8px 16px!important;\n    background:#f8fafc!important;\n    color:var(--x_primary)!important;\n    border-radius:100px!important;\n    font-size:12px!important;\n    font-weight:700!important;\n    text-transform:uppercase!important;\n    letter-spacing:.08em!important;\n    margin-bottom:24px!important;\n  }\n\n  .hd_title_w8{\n    font-size:42px!important;\n    font-weight:800!important;\n    color:var(--x_dark)!important;\n    line-height:1.1!important;\n    margin:0 0 24px 0!important;\n  }\n\n  .hd_desc_r4{\n    font-size:16px!important;\n    line-height:1.6!important;\n    color:var(--x_gray)!important;\n    margin:0 0 48px 0!important;\n  }\n\n  .nav_grp_y7{display:flex!important;gap:16px!important}\n\n  .nav_btn_j9{\n    width:52px!important;\n    height:52px!important;\n    border-radius:50%!important;\n    border:2px solid #e2e8f0!important;\n    background:transparent!important;\n    display:flex!important;\n    align-items:center!important;\n    justify-content:center!important;\n    color:var(--x_gray)!important;\n    cursor:pointer!important;\n    transition:all .3s cubic-bezier(.4,0,.2,1)!important;\n    outline:none!important;\n    padding:0!important;\n    -webkit-tap-highlight-color:transparent!important;\n    touch-action:manipulation!important;\n  }\n\n  .nav_btn_j9 svg{width:24px!important;height:24px!important;stroke-width:2px!important;display:block!important}\n\n  .nav_btn_j9:hover:not(:disabled){\n    border-color:var(--x_primary)!important;\n    color:var(--x_primary)!important;\n    transform:scale(1.05)!important;\n    background:rgba(165,180,252,.05)!important;\n  }\n\n  .nav_btn_j9:disabled{opacity:.3!important;cursor:default!important;border-color:#f1f5f9!important}\n\n  .col_slider_u2{\n    min-width:0!important;\n    position:relative!important;\n    width:100%!important;\n    max-width:var(--x_view)!important;\n    justify-self:start!important;\n  }\n\n  .col_slider_u2::after{\n    content:\"\"!important;\n    position:absolute!important;\n    top:0!important;\n    right:0!important;\n    width:90px!important;\n    height:100%!important;\n    pointer-events:none!important;\n    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1))!important;\n    z-index:3!important;\n  }\n\n  .track_rail_p5{\n    display:flex!important;\n    gap:var(--x_gap)!important;\n    overflow-x:auto!important;\n    padding:40px 20px 60px 20px!important;\n    scrollbar-width:none!important;\n    scroll-behavior:smooth!important;\n    -webkit-overflow-scrolling:touch!important;\n    scroll-snap-type:none!important;\n  }\n  .track_rail_p5::-webkit-scrollbar{display:none!important}\n\n  .card_itm_b6{\n    flex:0 0 auto!important;\n    width:var(--x_card_w)!important;\n    display:flex!important;\n    flex-direction:column!important;\n    align-items:center!important;\n    text-align:center!important;\n    cursor:pointer!important;\n    transition:transform .4s ease!important;\n    scroll-snap-align:start!important;\n    \n    \/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \"\u0441\u043f\u043b\u044e\u0449\u0438\u0432\u0430\u043d\u0438\u044f\" \u0441\u043b\u043e\u0435\u0432 *\/\n    transform-style: preserve-3d!important;\n  }\n\n  .card_itm_b6:hover{transform:translateY(-8px)!important}\n\n  \/* === MAIN FIX BLOCK === *\/\n  .vis_frame_c3{\n    position:relative!important;\n    width:260px!important;\n    height:300px!important;\n    margin-bottom:24px!important;\n    display:flex!important;\n    align-items:center!important;\n    justify-content:center!important;\n    \n    \/* \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f *\/\n    isolation: isolate!important;\n    z-index: 1!important;\n  }\n\n  .anim_glow_d4{\n    position:absolute!important;\n    inset:-10px!important; \n    background:conic-gradient(from 0deg,var(--x_secondary),var(--x_primary),var(--x_secondary))!important;\n    border-radius:60% 40% 30% 70% \/ 60% 30% 70% 40%!important;\n    animation:rot_anim_x 8s linear infinite!important;\n    filter:blur(15px)!important;\n    opacity:0.6!important;\n    transition:opacity .3s, inset .3s!important;\n    \n    \/* \u0421\u0422\u0420\u041e\u0413\u041e \u041d\u0410\u0417\u0410\u0414 *\/\n    z-index: -1!important; \n    transform: translateZ(-1px)!important; \/* \u0410\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 + \u0441\u0434\u0432\u0438\u0433 \u043d\u0430\u0437\u0430\u0434 *\/\n  }\n\n  .anim_border_e5 {\n    position: absolute!important;\n    inset: 4px!important;\n    background: linear-gradient(135deg, var(--x_primary), var(--x_secondary))!important;\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    padding: 1px!important;\n    border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%!important;\n    \n    \/* \u041f\u043e\u0432\u0435\u0440\u0445 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u043e\u0434 \u0444\u043e\u0442\u043e *\/\n    z-index: 2!important; \n    \n    animation: morph_anim_y 8s ease-in-out infinite alternate, border_drift_z 8s ease-in-out infinite!important;\n    opacity: .5!important;\n    pointer-events: none!important;\n  }\n\n  .img_mask_f6{\n    position:absolute!important;\n    inset:6px!important;\n    \n    \/* \u0411\u0435\u043b\u044b\u0439 \u0444\u043e\u043d \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u043b\u043e *\/\n    background:#ffffff!important;\n    \n    \/* \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0431\u0435\u043b\u0430\u044f \u0442\u0435\u043d\u044c \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \"\u0433\u0440\u044f\u0437\u043d\u044b\u0435\" \u043a\u0440\u0430\u044f \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f *\/\n    box-shadow: 0 0 0 1px #ffffff!important;\n    \n    border-radius:60% 40% 30% 70% \/ 60% 30% 70% 40%!important;\n    overflow:hidden!important;\n    \n    \/* \u0421\u0422\u0420\u041e\u0413\u041e \u0412\u0412\u0415\u0420\u0425 *\/\n    z-index: 10!important; \n    transform: translateZ(10px)!important; \/* \u042f\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u044a\u0435\u043c \u043d\u0430\u0434 \u0432\u0441\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c *\/\n    \n    animation:morph_anim_y 8s ease-in-out infinite alternate!important;\n  }\n  \/* === END FIX BLOCK === *\/\n\n  .real_img_g7{\n    width:100%!important;\n    height:100%!important;\n    object-fit:cover!important;\n    transition:transform .6s ease!important;\n    display:block!important; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 *\/\n  }\n\n  .card_itm_b6:hover .real_img_g7{transform:scale(1.1)!important}\n  \n  \/* \u041f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435, \u043d\u043e Z-index \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u043c *\/\n  .card_itm_b6:hover .anim_glow_d4{\n    opacity:0.9!important; \n    inset: -15px!important;\n  }\n\n  .info_name_h8{\n    font-size:20px!important;\n    font-weight:700!important;\n    color:var(--x_dark)!important;\n    margin:0 0 6px 0!important;\n  }\n\n  .info_role_i9{\n    font-size:14px!important;\n    font-weight:600!important;\n    text-transform:uppercase!important;\n    letter-spacing:.05em!important;\n    background:linear-gradient(90deg,var(--x_primary),var(--x_secondary))!important;\n    -webkit-background-clip:text!important;\n    -webkit-text-fill-color:transparent!important;\n  }\n\n  @keyframes rot_anim_x{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\n\n  @keyframes morph_anim_y{\n    0%{border-radius:60% 40% 30% 70% \/ 60% 30% 70% 40%!important}\n    50%{border-radius:30% 60% 70% 40% \/ 50% 60% 30% 60%!important}\n    100%{border-radius:60% 40% 30% 70% \/ 60% 30% 70% 40%!important}\n  }\n\n  @keyframes border_drift_z {\n    0% { transform: translate(0, 0) rotate(0deg); }\n    50% { transform: translate(2px, -1.5px) rotate(1deg); } \n    100% { transform: translate(0, 0) rotate(0deg); }\n  }\n\n  @media (max-width: 1024px){\n    .grid_layout_x5{\n      grid-template-columns:1fr!important;\n      gap:40px!important;\n      text-align:center!important;\n    }\n    .col_txt_m3{\n      align-items:center!important;\n      max-width:680px!important;\n      margin:0 auto!important;\n    }\n    .nav_grp_y7{justify-content:center!important}\n    .col_slider_u2{\n      width:100vw!important;\n      max-width:none!important;\n      margin-left:-24px!important;\n      justify-self:stretch!important;\n    }\n    .track_rail_p5{\n      padding-left:24px!important;\n      padding-right:24px!important;\n      scroll-snap-type:x mandatory!important;\n    }\n    .col_slider_u2::after{width:70px!important}\n  }\n\n  @media (max-width: 768px){\n    .sect_z99_wrap{padding:72px 0!important}\n    .grid_layout_x5{padding:0 18px!important;gap:28px!important}\n    .tag_pill_q1{margin-bottom:18px!important}\n    .hd_title_w8{font-size:32px!important;margin-bottom:16px!important}\n    .hd_desc_r4{font-size:15px!important;margin-bottom:26px!important}\n    .nav_btn_j9{width:50px!important;height:50px!important}\n    .snr_root_v_final{\n      --x_card_w:260px!important;\n      --x_gap:18px!important;\n      --x_peek:0.25!important;\n    }\n    .track_rail_p5{\n      padding:28px 18px 44px 18px!important;\n      gap:var(--x_gap)!important;\n      scroll-padding-left:18px!important;\n    }\n    .vis_frame_c3{width:248px!important;height:288px!important}\n  }\n\n  @media (max-width: 480px){\n    .sect_z99_wrap{padding:56px 0!important;border-radius:18px}\n    .grid_layout_x5{padding:0 14px!important;gap:22px!important}\n    .hd_title_w8{font-size:28px!important}\n    .hd_desc_r4{font-size:14px!important;line-height:1.65!important}\n    .nav_grp_y7{gap:12px!important}\n    .nav_btn_j9{width:48px!important;height:48px!important}\n    .snr_root_v_final{\n      --x_card_w:240px!important;\n      --x_gap:14px!important;\n      --x_peek:0.22!important;\n    }\n    .col_slider_u2{\n      margin-left:-14px!important;\n    }\n    .track_rail_p5{\n      padding:22px 14px 40px 14px!important;\n      scroll-padding-left:14px!important;\n    }\n    .col_slider_u2::after{width:64px!important}\n    .vis_frame_c3{width:236px!important;height:276px!important}\n    .info_name_h8{font-size:18px!important}\n    .info_role_i9{font-size:13px!important}\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .anim_glow_d4,.anim_border_e5,.img_mask_f6{animation:none!important}\n    .track_rail_p5{scroll-behavior:auto!important}\n    .card_itm_b6,.real_img_g7,.nav_btn_j9{transition:none!important}\n  }\n<\/style>\n\n<section class=\"sect_z99_wrap snr_root_v_final\" id=\"team_sec_v3\">\n  <div class=\"bg_atm_k2\"><\/div>\n\n  <div class=\"grid_layout_x5\">\n    <div class=\"col_txt_m3\">\n      <span class=\"tag_pill_q1\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430<\/span>\n      <h2 class=\"hd_title_w8\">\u041b\u044e\u0434\u0438, \u0449\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u044e\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h2>\n      <p class=\"hd_desc_r4\">\u041f\u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0442\u0435\u0441\u044f \u0437 \u043d\u0430\u0448\u0438\u043c\u0438 \u0435\u043a\u0441\u043f\u0435\u0440\u0442\u0430\u043c\u0438. \u041c\u0438 \u043f\u043e\u0454\u0434\u043d\u0443\u0454\u043c\u043e \u0433\u043b\u0438\u0431\u043e\u043a\u0456 \u0437\u043d\u0430\u043d\u043d\u044f \u0437 \u0456\u043d\u043d\u043e\u0432\u0430\u0446\u0456\u0439\u043d\u0438\u043c \u043f\u0456\u0434\u0445\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0432\u0438\u0440\u0456\u0448\u0435\u043d\u043d\u044f \u0432\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n\n      <div class=\"nav_grp_y7\">\n        <button class=\"nav_btn_j9\" id=\"btn_prev_z1\" aria-label=\"Prev\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M19 12H5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 19L5 12L12 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/button>\n        <button class=\"nav_btn_j9\" id=\"btn_next_z2\" aria-label=\"Next\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 5L19 12L12 19\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"col_slider_u2\">\n      <div class=\"track_rail_p5\" id=\"track_main_x9\">\n        \n        <div class=\"card_itm_b6\">\n          <div class=\"vis_frame_c3\">\n            <div class=\"anim_glow_d4\"><\/div>\n            <div class=\"anim_border_e5\"><\/div>\n            <div class=\"img_mask_f6\">\n              <img decoding=\"async\" class=\"real_img_g7\" src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/photo_2026-02-10_14-25-09.jpg\" alt=\"\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\">\n            <\/div>\n          <\/div>\n          <div class=\"info_blk_k0\">\n            <h3 class=\"info_name_h8\">\u0424\u0456\u043b\u0430\u0442\u043a\u0456\u043d \u0410\u043d\u0434\u0440\u0456\u0439<\/h3>\n            <span class=\"info_role_i9\">\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"card_itm_b6\">\n          <div class=\"vis_frame_c3\">\n            <div class=\"anim_glow_d4\" style=\"animation-delay:-2s!important;\"><\/div>\n            <div class=\"anim_border_e5\" style=\"animation-delay:-2s!important;\"><\/div>\n            <div class=\"img_mask_f6\" style=\"animation-delay:-2s!important;\">\n              <img decoding=\"async\" class=\"real_img_g7\" src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/photo_2026-02-10_14-25-13.jpg\" alt=\"\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\">\n            <\/div>\n          <\/div>\n          <div class=\"info_blk_k0\">\n            <h3 class=\"info_name_h8\">\u0414\u0443\u0434\u043d\u0438\u043a \u042f\u0440\u043e\u0441\u043b\u0430\u0432<\/h3>\n            <span class=\"info_role_i9\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"card_itm_b6\">\n          <div class=\"vis_frame_c3\">\n            <div class=\"anim_glow_d4\" style=\"animation-delay:-4s!important;\"><\/div>\n            <div class=\"anim_border_e5\" style=\"animation-delay:-4s!important;\"><\/div>\n            <div class=\"img_mask_f6\" style=\"animation-delay:-4s!important;\">\n              <img decoding=\"async\" class=\"real_img_g7\" src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/photo_2026-02-10_14-25-16.jpg\" alt=\"\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\">\n            <\/div>\n          <\/div>\n          <div class=\"info_blk_k0\">\n            <h3 class=\"info_name_h8\">\u0421\u0442\u0443\u043f\u0430\u043a \u0414\u0435\u043d\u0438\u0441<\/h3>\n            <span class=\"info_role_i9\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"card_itm_b6\">\n          <div class=\"vis_frame_c3\">\n            <div class=\"anim_glow_d4\" style=\"animation-delay:-1s!important;\"><\/div>\n            <div class=\"anim_border_e5\" style=\"animation-delay:-1s!important;\"><\/div>\n            <div class=\"img_mask_f6\" style=\"animation-delay:-1s!important;\">\n              <img decoding=\"async\" class=\"real_img_g7\" src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/photo_2026-02-10_14-25-19-e1770726501109.jpg\" alt=\"\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\">\n            <\/div>\n          <\/div>\n          <div class=\"info_blk_k0\">\n            <h3 class=\"info_name_h8\">\u0428\u0443\u043b\u044c\u0433\u0430\u043d \u0410\u0440\u0442\u0443\u0440<\/h3>\n            <span class=\"info_role_i9\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"card_itm_b6\">\n          <div class=\"vis_frame_c3\">\n            <div class=\"anim_glow_d4\" style=\"animation-delay:-3s!important;\"><\/div>\n            <div class=\"anim_border_e5\" style=\"animation-delay:-3s!important;\"><\/div>\n            <div class=\"img_mask_f6\" style=\"animation-delay:-3s!important;\">\n              <img decoding=\"async\" class=\"real_img_g7\" src=\"https:\/\/infospheraai.com.ua\/wp-content\/uploads\/2026\/02\/photo_2026-02-10_14-25-23-e1770726519213.jpg\" alt=\"\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\">\n            <\/div>\n          <\/div>\n          <div class=\"info_blk_k0\">\n            <h3 class=\"info_name_h8\">\u0421\u0430\u0454\u043d\u043a\u043e \u041f\u0430\u0432\u043b\u043e<\/h3>\n            <span class=\"info_role_i9\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    const track = document.getElementById('track_main_x9');\n    const prevBtn = document.getElementById('btn_prev_z1');\n    const nextBtn = document.getElementById('btn_next_z2');\n    if (!track || !prevBtn || !nextBtn) return;\n\n    const getScrollStep = () => {\n      const card = track.querySelector('.card_itm_b6');\n      if (!card) return 300;\n      const style = window.getComputedStyle(track);\n      const gap = parseFloat(style.gap) || parseFloat(style.columnGap) || 32;\n      return card.offsetWidth + gap;\n    };\n\n    const scrollByStep = (direction) => {\n      const step = getScrollStep();\n      const current = track.scrollLeft;\n      const target = direction === 'next' ? current + step : current - step;\n      track.scrollTo({ left: target, behavior: 'smooth' });\n    };\n\n    nextBtn.addEventListener('click', () => scrollByStep('next'));\n    prevBtn.addEventListener('click', () => scrollByStep('prev'));\n\n    let scrollTimeout;\n    const updateButtonState = () => {\n      const tolerance = 5;\n      const maxScroll = track.scrollWidth - track.clientWidth;\n      prevBtn.disabled = track.scrollLeft <= tolerance;\n      nextBtn.disabled = track.scrollLeft >= maxScroll - tolerance;\n    };\n\n    track.addEventListener('scroll', () => {\n      if (scrollTimeout) clearTimeout(scrollTimeout);\n      scrollTimeout = setTimeout(updateButtonState, 60);\n    });\n\n    updateButtonState();\n    window.addEventListener('resize', updateButtonState, { passive: true });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-80ef459 e-flex e-con-boxed e-con e-parent\" data-id=\"80ef459\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2af3bd elementor-widget elementor-widget-html\" data-id=\"e2af3bd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .faq-section {\r\n    --fq-bg: #ffffff;\r\n    --fq-text: #0f172a;\r\n    --fq-sub: #64748b;\r\n    --fq-border: #e2e8f0;\r\n    --fq-accent: #6366f1;\r\n    --fq-hover: #f8fafc;\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: var(--fq-bg);\r\n    padding: 70px 0px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--fq-text);\r\n  }\r\n\r\n  .faq-section * { box-sizing: border-box; }\r\n\r\n  .faq-container {\r\n    margin: 0 auto; position: relative; z-index: 2;\r\n    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px;\r\n\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .faq-sidebar {\r\n    position: sticky; top: 100px; align-self: start;\r\n  }\r\n\r\n  .faq-tag {\r\n    display: inline-block; padding: 6px 12px; background: #e0e7ff; border-radius: 100px;\r\n    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; \r\n    color: var(--fq-accent); margin-bottom: 24px;\r\n  }\r\n  .faq-trigger:focus{\r\n      background: none!important;\r\n  }\r\n  .faq-trigger:hover{\r\n      background: none!important;\r\n  }\r\n\r\n  .faq-title {\r\n    font-size: clamp(32px, 4vw, 42px); font-weight: 700; line-height: 1.1; margin: 0 0 24px 0;\r\n    color: var(--fq-text); letter-spacing: -0.02em;     font-family: 'Inter', sans-serif !important;\r\n  }\r\n\r\n  .faq-desc {\r\n    font-size: 16px; color: var(--fq-sub); line-height: 1.6; margin-bottom: 32px;\r\n  }\r\n\r\n  .faq-support-box {\r\n    background: #f8fafc; border: 1px solid var(--fq-border); border-radius: 16px; padding: 24px;\r\n  }\r\n  .fs-title { font-size: 16px; font-weight: 700; margin: 0 0 8px 0; }\r\n  .fs-text { font-size: 14px; color: var(--fq-sub); margin-bottom: 16px; }\r\n  .fs-link {\r\n    color: var(--fq-accent); font-weight: 600; text-decoration: none; font-size: 14px;\r\n    display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s;\r\n  }\r\n  .fs-link:hover { gap: 10px; }\r\n\r\n  .faq-list {\r\n    display: flex; flex-direction: column; gap: 16px;\r\n  }\r\n\r\n  .faq-item {\r\n    background: #ffffff;\r\n    border: 1px solid var(--fq-border);\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .faq-item:hover {\r\n    border-color: #cbd5e1;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.03);\r\n  }\r\n\r\n  .faq-item.active {\r\n    border-color: var(--fq-accent);\r\n    box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.1);\r\n  }\r\n\r\n  .faq-trigger {\r\n    width: 100%; text-align: left; padding: 24px;\r\n    background: transparent; \r\n    border: none; \r\n    cursor: pointer;\r\n    display: flex; justify-content: space-between; align-items: center; gap: 20px;\r\n    \r\n    outline: none !important;\r\n    box-shadow: none !important;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .faq-trigger:focus, \r\n  .faq-trigger:active, \r\n  .faq-trigger:focus-visible {\r\n    background: transparent !important;\r\n    background-color: transparent !important;\r\n    outline: none !important;\r\n    box-shadow: none !important;\r\n    color: inherit !important; \r\n  }\r\n\r\n  .faq-q-text {\r\n    font-size: 18px; \r\n    font-weight: 700;\r\n    color: var(--fq-text);\r\n    transition: color 0.3s;\r\n  }\r\n  \r\n  .faq-item.active .faq-q-text { color: var(--fq-accent); }\r\n\r\n  .faq-icon {\r\n    width: 24px; height: 24px; flex-shrink: 0; position: relative;\r\n    color: var(--fq-sub); transition: transform 0.4s ease, color 0.3s;\r\n  }\r\n  .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--fq-accent); }\r\n\r\n  .fi-line {\r\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n    background: currentColor; border-radius: 2px; transition: all 0.4s ease;\r\n  }\r\n  .fi-h { width: 14px; height: 2px; }\r\n  .fi-v { width: 2px; height: 14px; }\r\n  \r\n  .faq-item.active .fi-v { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }\r\n\r\n  .faq-answer {\r\n    max-height: 0; overflow: hidden;\r\n    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n  }\r\n  \r\n  .faq-answer-inner {\r\n    padding: 0 24px 24px 24px;\r\n    font-size: 16px; line-height: 1.6; color: var(--fq-sub);\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .faq-container { grid-template-columns: 1fr; gap: 40px; }\r\n    .faq-sidebar { position: static; text-align: center; }\r\n    .faq-support-box { display: none; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"faq-section\" id=\"faq\">\r\n  <div class=\"faq-container\">\r\n    \r\n    <aside class=\"faq-sidebar\">\r\n      <span class=\"faq-tag\">FAQ<\/span>\r\n      <h2 class=\"faq-title\">\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f<\/h2>\r\n      <p class=\"faq-desc\">\u0417\u0456\u0431\u0440\u0430\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0456 \u043d\u0430 \u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u044f\u043a\u0456 \u043d\u0430\u0439\u0447\u0430\u0441\u0442\u0456\u0448\u0435 \u0446\u0456\u043a\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0438\u0445 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432 \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u043c \u0441\u043f\u0456\u0432\u043f\u0440\u0430\u0446\u0456.<\/p>\r\n      \r\n      <div class=\"faq-support-box\">\r\n        <h4 class=\"fs-title\">\u041d\u0435 \u0437\u043d\u0430\u0439\u0448\u043b\u0438 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c?<\/h4>\r\n        <p class=\"fs-text\">\u041d\u0430\u043f\u0438\u0448\u0456\u0442\u044c \u043d\u0430\u043c, \u0456 \u043c\u0438 \u043f\u0440\u043e\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0443\u0454\u043c\u043e \u0432\u0430\u0441 \u043e\u0441\u043e\u0431\u0438\u0441\u0442\u043e.<\/p>\r\n        <a href=\"#form\" class=\"fs-link\">\u0417\u0432'\u044f\u0437\u0430\u0442\u0438\u0441\u044f \u0437 \u043d\u0430\u043c\u0438 \u2192<\/a>\r\n      <\/div>\r\n    <\/aside>\r\n\r\n    <div class=\"faq-list\">\r\n      \r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-trigger\">\r\n          <span class=\"faq-q-text\">\u0427\u0438 \u043f\u0456\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0430\u0448\u0430 CRM \u0434\u043b\u044f \u043c\u0430\u043b\u043e\u0433\u043e \u0431\u0456\u0437\u043d\u0435\u0441\u0443?<\/span>\r\n          <div class=\"faq-icon\">\r\n            <div class=\"fi-line fi-h\"><\/div>\r\n            <div class=\"fi-line fi-v\"><\/div>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">\r\n            \u0422\u0430\u043a, \u0431\u0435\u0437\u0443\u043c\u043e\u0432\u043d\u043e. \u041d\u0430\u0448\u0456 \u0440\u0456\u0448\u0435\u043d\u043d\u044f \u043c\u0430\u044e\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0426\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0454, \u0449\u043e \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0447\u0430\u0442\u0438 \u0437 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b\u0443 \u0434\u043b\u044f \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u043e\u0457 \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u0456 \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u0438 \u043d\u043e\u0432\u0456 \u043c\u043e\u0434\u0443\u043b\u0456 \u043f\u043e \u043c\u0456\u0440\u0456 \u0437\u0440\u043e\u0441\u0442\u0430\u043d\u043d\u044f \u0432\u0430\u0448\u043e\u0433\u043e \u0431\u0456\u0437\u043d\u0435\u0441\u0443, \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u043b\u0430\u0447\u0443\u044e\u0447\u0438 \u0437\u0430 \u0437\u0430\u0439\u0432\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0456.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-trigger\">\r\n          <span class=\"faq-q-text\">\u0427\u0438 \u043c\u043e\u0436\u043d\u0430 \u0456\u043d\u0442\u0435\u0433\u0440\u0443\u0432\u0430\u0442\u0438 CRM \u0437 \u0456\u043d\u0448\u0438\u043c\u0438 \u0441\u0435\u0440\u0432\u0456\u0441\u0430\u043c\u0438?<\/span>\r\n          <div class=\"faq-icon\">\r\n            <div class=\"fi-line fi-h\"><\/div>\r\n            <div class=\"fi-line fi-v\"><\/div>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">\r\n            \u0422\u0430\u043a, \u043c\u0438 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u043c\u043e \u0456\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0456\u044e \u0437 \u0431\u0456\u043b\u044c\u0448\u0456\u0441\u0442\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0456\u0441\u0456\u0432: \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0456\u044f (Binotel, Phonet), \u043c\u0435\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0438 (Telegram, Viber, WhatsApp), \u043f\u043e\u0448\u0442\u043e\u0432\u0456 \u0441\u0435\u0440\u0432\u0456\u0441\u0438, Google Analytics, \u0430 \u0442\u0430\u043a\u043e\u0436 1\u0421 \u0442\u0430 \u0456\u043d\u0448\u0456 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0456 \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 API.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-trigger\">\r\n          <span class=\"faq-q-text\">\u0427\u0438 \u043d\u0430\u0434\u0430\u0454\u0442\u0435 \u0432\u0438 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0443 \u043f\u0456\u0441\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0443?<\/span>\r\n          <div class=\"faq-icon\">\r\n            <div class=\"fi-line fi-h\"><\/div>\r\n            <div class=\"fi-line fi-v\"><\/div>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">\r\n            \u0422\u0430\u043a, \u043c\u0438 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454\u043c\u043e \u043f\u043e\u0432\u043d\u0438\u0439 \u0446\u0438\u043a\u043b \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438. \u0426\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0454 \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0438\u0439 \u0441\u0443\u043f\u0440\u043e\u0432\u0456\u0434, \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0456 \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u0431\u0435\u0437\u043f\u0435\u043a\u0438, \u0430 \u0442\u0430\u043a\u043e\u0436 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0456\u0457 \u0442\u0430 \u0434\u043e\u043e\u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043d\u043d\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u043f\u0456\u0434 \u0432\u0430\u0448\u0456 \u043d\u043e\u0432\u0456 \u0431\u0456\u0437\u043d\u0435\u0441-\u043f\u043e\u0442\u0440\u0435\u0431\u0438.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const accordions = document.querySelectorAll(\".faq-item\");\r\n\r\n    accordions.forEach((acc) => {\r\n      const trigger = acc.querySelector(\".faq-trigger\");\r\n      const answer = acc.querySelector(\".faq-answer\");\r\n\r\n      trigger.addEventListener(\"click\", () => {\r\n        const isActive = acc.classList.contains(\"active\");\r\n\r\n        accordions.forEach((otherAcc) => {\r\n          if (otherAcc !== acc) {\r\n            otherAcc.classList.remove(\"active\");\r\n            otherAcc.querySelector(\".faq-answer\").style.maxHeight = null;\r\n          }\r\n        });\r\n\r\n        if (isActive) {\r\n          acc.classList.remove(\"active\");\r\n          answer.style.maxHeight = null;\r\n        } else {\r\n          acc.classList.add(\"active\");\r\n          answer.style.maxHeight = answer.scrollHeight + \"px\";\r\n        }\r\n      });\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b9e738c e-flex e-con-boxed e-con e-parent\" data-id=\"b9e738c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2880454 elementor-widget elementor-widget-menu-anchor\" data-id=\"2880454\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"form\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8296f77 e-flex e-con-boxed e-con e-parent\" data-id=\"8296f77\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d32fcf5 elementor-widget elementor-widget-html\" data-id=\"d32fcf5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/css\/intlTelInput.css\" \/>\r\n\r\n<style>\r\n  .contact-pro-section {\r\n    --cp-bg: #f8fafc;\r\n    --cp-text: #0f172a;\r\n    --cp-sub: #64748b;\r\n    --cp-accent: #6366f1;\r\n    --cp-success: #22c55e;\r\n    \r\n    font-family: 'Inter', sans-serif !important;\r\n    border-radius: 20px;\r\n    background: var(--cp-bg);\r\n    padding: 70px 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: var(--cp-text);\r\n  }\r\n\r\n  .contact-pro-section * { box-sizing: border-box; }\r\n\r\n  .cp-orb {\r\n    position: absolute; border-radius: 50%; opacity: 0.5;\r\n    animation: orb-float 10s infinite ease-in-out; z-index: 0;\r\n  }\r\n  .cp-orb-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: #e0e7ff; animation-delay: 0s; }\r\n  .cp-orb-2 { bottom: -10%; right: -10%; width: 500px; height: 500px; background: #ede9fe; animation-delay: -3s; }\r\n   \r\n  @keyframes orb-float {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    50% { transform: translate(40px, -50px) scale(1.3); }\r\n  }\r\n\r\n  .cp-container {\r\n    margin: 0 auto; position: relative; z-index: 2;\r\n    display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center;\r\n    max-width: 1200px;\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .cp-info { padding-top: 0; }\r\n  .cp-tag {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 8px 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 100px;\r\n    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cp-accent);\r\n    margin-bottom: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n  }\r\n  .cp-tag::before { content:''; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }\r\n\r\n  .cp-title {\r\n    font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; margin: 0 0 24px 0;      \r\n    font-family: 'Inter', sans-serif !important;\r\n    background: linear-gradient(135deg, #0f172a 0%, #475569 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  }\r\n  .cp-desc { font-size: 18px; color: var(--cp-sub); line-height: 1.6; margin-bottom: 50px; max-width: 90%; }\r\n\r\n  .cp-contacts { display: flex; flex-direction: row; gap: 20px; }\r\n  .cp-contact-card {\r\n    flex: 1; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255,255,255,0.8); padding: 20px; border-radius: 20px;\r\n    display: flex; align-items: center; gap: 15px; text-decoration: none; color: inherit; transition: all 0.3s ease;\r\n  }\r\n  .cp-contact-card:hover {\r\n    background: #ffffff; transform: translateY(-5px);\r\n    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.1); border-color: var(--cp-accent);\r\n  }\r\n  .cp-contact-card {\r\n    text-decoration: none!important;\r\n}\r\n\r\n  .cp-c-value {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: var(--cp-text);\r\n    white-space: nowrap!important;\r\n    text-decoration: none!important; \/* \u0443\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 *\/\r\n}\r\n\r\n.cp-c-value:hover {\r\n    text-decoration: underline; \/* \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 *\/\r\n}\r\n\r\n  .cp-icon-box {\r\n    width: 50px; height: 50px; background: #ffffff; border-radius: 14px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    color: var(--cp-accent); box-shadow: 0 4px 10px rgba(0,0,0,0.05);\r\n    font-size: 24px; transition: transform 0.3s; flex-shrink: 0;\r\n  }\r\n  .cp-contact-card:hover .cp-icon-box { background: var(--cp-accent); color: #fff; }\r\n  \r\n  @keyframes phone-vibrate {\r\n    0%, 80%, 100% { transform: rotate(0) scale(1); }\r\n    85% { transform: rotate(-15deg) scale(1.1); }\r\n    90% { transform: rotate(15deg) scale(1.1); }\r\n    95% { transform: rotate(-15deg) scale(1.1); }\r\n  }\r\n  .cp-phone-anim .cp-icon-box svg { animation: phone-vibrate 4s infinite ease-in-out; transform-origin: center; }\r\n  @keyframes mail-pop {\r\n    0%, 80%, 100% { transform: translateY(0) scale(1); }\r\n    85% { transform: translateY(-5px) scale(1.1); }\r\n    90% { transform: translateY(0) scale(1.1); }\r\n    95% { transform: translateY(-2px) scale(1.05); }\r\n  }\r\n  .cp-email-anim .cp-icon-box svg { animation: mail-pop 4s infinite ease-in-out; animation-delay: 2s; }\r\n\r\n  .cp-c-label { font-size: 12px; font-weight: 700; color: var(--cp-sub); text-transform: uppercase; margin-bottom: 4px; white-space: nowrap; }\r\n  .cp-c-value { font-size: 16px; font-weight: 700; color: var(--cp-text); white-space: nowrap; }\r\n\r\n  .cp-form-wrapper {\r\n    background: rgba(255, 255, 255, 0.7);\r\n    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid #ffffff; border-radius: 32px; padding: 40px;\r\n    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);\r\n    position: relative;\r\n    min-height: 480px;\r\n    display: flex; flex-direction: column; justify-content: center;\r\n  }\r\n  .cp-form-wrapper::before {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n  }\r\n\r\n  .cp-success-modal {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(10px);\r\n    border-radius: 32px;\r\n    z-index: 100;\r\n    \r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    padding: 40px;\r\n    \r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateY(20px);\r\n    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n  }\r\n\r\n  .cp-success-modal.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .success-icon-wrap {\r\n    width: 80px; height: 80px;\r\n    background: #dcfce7;\r\n    border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center;\r\n    color: var(--cp-success);\r\n    margin-bottom: 24px;\r\n    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.3);\r\n  }\r\n  .success-icon-wrap svg { width: 40px; height: 40px; }\r\n\r\n  .success-title { font-size: 24px; font-weight: 800; color: var(--cp-text); margin-bottom: 12px; }\r\n  .success-text { font-size: 16px; color: var(--cp-sub); line-height: 1.5; }\r\n\r\n  .form-group { margin-bottom: 20px; position: relative; }\r\n  \r\n  .input-container {\r\n    position: relative; background: #ffffff; border-radius: 16px;\r\n    transition: all 0.3s; border: 1px solid transparent;\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.03);\r\n  }\r\n  .input-icon {\r\n    position: absolute; left: 16px; top: 58%; transform: translateY(-50%);\r\n    color: #94a3b8; z-index: 2; transition: color 0.3s;\r\n  }\r\n  input.form-input {\r\n    width: 100%; height: 55px; padding: 0 20px 0 50px !important;\r\n    background: #ffffff !important; border: 1px solid #e2e8f0 !important;\r\n    border-radius: 10px !important; font-size: 15px !important; color: #0f172a !important;\r\n    outline: none !important; box-shadow: none !important; transition: all 0.3s ease !important;\r\n  }\r\n  \r\n  .input-line {\r\n    position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;\r\n    background: var(--cp-accent); transition: all 0.4s ease; transform: translateX(-50%); z-index: 3;\r\n  }\r\n  .input-container:focus-within input.form-input {\r\n    border-color: transparent !important; box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.15) !important; transform: translateY(-2px);\r\n  }\r\n  .input-container:focus-within .input-icon { color: var(--cp-accent); }\r\n  .input-container:focus-within .input-line { width: 100%; }\r\n\r\n  .iti { width: 100%; display: block; }\r\n  .iti__flag-container { z-index: 10; border-top-left-radius: 16px; border-bottom-left-radius: 16px; }\r\n  .iti__selected-flag { background: transparent !important; padding: 0 12px 0 16px !important; }\r\n  input[name=\"phone\"] { padding-left: 100px !important; }\r\n  .iti__country-list { width: 300px !important; z-index: 9999 !important; font-family: 'Inter', sans-serif; }\r\n\r\n  .btn-uiverse {\r\n    --h-button: 55px; --w-button: 100%; --round: 10px;    \r\n    cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center;\r\n    overflow: hidden; transition: all 0.25s ease;\r\n    background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8);\r\n    border-radius: var(--round); border: none; outline: none; padding: 12px 18px;\r\n    width: var(--w-button); height: var(--h-button); margin-top: 10px;\r\n    box-shadow: 0 10px 20px -5px rgba(122, 90, 248, 0.4); text-decoration: none;\r\n  }\r\n  .btn-uiverse::before {\r\n    content: \"\"; position: absolute; inset: 1px; transition: all 0.5s ease-in-out; border-radius: 9px; z-index: 0;\r\n    background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);\r\n  }\r\n  .btn-uiverse::after {\r\n    content: \"\"; position: absolute; inset: 2px; transition: all 0.5s ease-in-out; border-radius: 8px; z-index: 0;\r\n    background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8);\r\n  }\r\n  .btn-uiverse:active { transform: scale(0.98); }\r\n  .fold {\r\n    z-index: 1; position: absolute; top: 0; right: 0; height: 1rem; width: 1rem; display: inline-block;\r\n    transition: all 0.5s ease-in-out; background: radial-gradient(100% 75% at 55%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%);\r\n    box-shadow: 0 0 3px black; border-bottom-left-radius: 0.5rem; border-top-right-radius: var(--round);\r\n  }\r\n  .fold::after {\r\n    content: \"\"; position: absolute; top: 0; right: 0; width: 150%; height: 150%;\r\n    transform: rotate(45deg) translateX(0%) translateY(-18px); background-color: #e8e8e8; pointer-events: none;\r\n  }\r\n  .btn-uiverse:hover .fold { margin-top: -1rem; margin-right: -1rem; }\r\n  .points_wrapper { overflow: hidden; width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: 1; }\r\n  .points_wrapper .point {\r\n    bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out;\r\n    pointer-events: none; width: 2px; height: 2px; background-color: #fff; border-radius: 9999px;\r\n  }\r\n  @keyframes floating-points {\r\n    0% { transform: translateY(0); } 85% { opacity: 0; } 100% { transform: translateY(-55px); opacity: 0; }\r\n  }\r\n  .inner {\r\n    z-index: 2; gap: 6px; position: relative; width: 100%; color: white;\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    font-size: 18px; font-weight: 600; line-height: 1.5; transition: color 0.2s ease-in-out;\r\n  }\r\n  .inner svg.icon { width: 18px; height: 18px; transition: fill 0.1s linear; }\r\n  .btn-uiverse:focus svg.icon { fill: white; }\r\n  .btn-uiverse:hover svg.icon { fill: transparent; animation: dasharray 1s linear forwards, filled 0.1s linear forwards 0.95s; }\r\n  @keyframes dasharray { from { stroke-dasharray: 0 0 0 0; } to { stroke-dasharray: 68 68 0 0; } }\r\n  @keyframes filled { to { fill: white; } }\r\n\r\n  @media (max-width: 900px) {\r\n    .contact-pro-section { padding: 40px 15px; }\r\n    .cp-container { grid-template-columns: 1fr; gap: 40px; }\r\n    .cp-info { text-align: center; padding-top: 0; }\r\n    .cp-form-wrapper { padding: 24px; min-height: auto; }\r\n    .cp-contacts { flex-direction: column; }\r\n    .cp-contact-card { text-align: left; }\r\n    .cp-desc { margin-bottom: 30px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"contact-pro-section\" id=\"contact\">\r\n  <div class=\"cp-orb cp-orb-1\"><\/div>\r\n  <div class=\"cp-orb cp-orb-2\"><\/div>\r\n\r\n  <div class=\"cp-container\">\r\n    \r\n    <div class=\"cp-info\">\r\n      <div class=\"cp-tag\">Online \u2022 \u0412\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454\u043c\u043e \u0437\u0430 15 \u0445\u0432<\/div>\r\n      <h2 class=\"cp-title\">\u0413\u043e\u0442\u043e\u0432\u0456 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0443\u0432\u0430\u0442\u0438 \u0432\u0430\u0448 \u0431\u0456\u0437\u043d\u0435\u0441?<\/h2>\r\n      <p class=\"cp-desc\">\r\n        \u041c\u0438 \u0442\u0443\u0442, \u0449\u043e\u0431 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0442\u0438 \u0432\u0430\u043c \u0432\u043f\u0440\u043e\u0432\u0430\u0434\u0438\u0442\u0438 \u0456\u0434\u0435\u0430\u043b\u044c\u043d\u0435 CRM-\u0440\u0456\u0448\u0435\u043d\u043d\u044f. \u0417\u0430\u043b\u0438\u0448\u0442\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0438, \u0456 \u043c\u0438 \u0437\u0432'\u044f\u0436\u0435\u043c\u043e\u0441\u044f \u0434\u043b\u044f \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e\u0457 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0456\u0457.\r\n      <\/p>\r\n\r\n      <div class=\"cp-contacts\">\r\n        <a href=\"tel:+380931146672\" class=\"cp-contact-card cp-phone-anim\">\r\n          <div class=\"cp-icon-box\">\r\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/><\/svg>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"cp-c-label\">\u0417\u0410\u0422\u0415\u041b\u0415\u0424\u041e\u041d\u0423\u0419\u0422\u0415 \u041d\u0410\u041c<\/div>\r\n            <div class=\"cp-c-value\">+38 (093) 114 66 72<\/div>\r\n          <\/div>\r\n        <\/a>\r\n\r\n        <a href=\"mailto:Filadron27@gmail.com\" class=\"cp-contact-card cp-email-anim\">\r\n          <div class=\"cp-icon-box\">\r\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"cp-c-label\">\u041d\u0410\u041f\u0418\u0428\u0406\u0422\u042c \u041d\u0410\u041c<\/div>\r\n            <div class=\"cp-c-value\">Filadron27@gmail.com<\/div>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"cp-form-wrapper\">\r\n      \r\n      <div class=\"cp-success-modal\" id=\"successModal\">\r\n        <div class=\"success-icon-wrap\">\r\n          <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n        <\/div>\r\n        <h3 class=\"success-title\">\u0414\u044f\u043a\u0443\u0454\u043c\u043e!<\/h3>\r\n        <p class=\"success-text\">\u0412\u0430\u0448\u0430 \u0437\u0430\u044f\u0432\u043a\u0430 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430.<br>\u041c\u0438 \u0437\u0432'\u044f\u0436\u0435\u043c\u043e\u0441\u044f \u0437 \u0432\u0430\u043c\u0438 \u043d\u0430\u0439\u0431\u043b\u0438\u0436\u0447\u0438\u043c \u0447\u0430\u0441\u043e\u043c.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cpmn-form placeholder-form\" id=\"dummyForm\">\r\n        \r\n        <div class=\"form-group\">\r\n          <div class=\"input-container\">\r\n            <div class=\"input-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg><\/div>\r\n            <input class=\"form-input\" type=\"text\" placeholder=\"\u0412\u0430\u0448\u0435 \u0456\u043c'\u044f\" \/>\r\n            <div class=\"input-line\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <div class=\"input-container\">\r\n            <div class=\"input-icon\">\r\n              <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/><\/svg>\r\n            <\/div>\r\n            <input class=\"form-input\" type=\"text\" placeholder=\"\u041f\u0440\u0456\u0437\u0432\u0438\u0449\u0435\" \/>\r\n            <div class=\"input-line\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <div class=\"input-container\">\r\n            <input class=\"form-input\" name=\"phone\" type=\"text\" id=\"phone_dummy\" \/>\r\n            <div class=\"input-line\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <div class=\"input-container\">\r\n            <div class=\"input-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/><\/svg><\/div>\r\n            <input class=\"form-input\" type=\"email\" placeholder=\"example@gmail.com\" \/>\r\n            <div class=\"input-line\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <button type=\"button\" class=\"btn-uiverse\" id=\"dummyBtn\">\r\n          <span class=\"fold\"><\/span>\r\n          <div class=\"points_wrapper\">\r\n            <i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i>\r\n            <i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i><i class=\"point\"><\/i>\r\n          <\/div>\r\n          <span class=\"inner\">\r\n            <svg class=\"icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\">\r\n              <polyline points=\"13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37\"><\/polyline>\r\n            <\/svg>\r\n            \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044f\r\n          <\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/intlTelInput.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/utils.min.js\"><\/script>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    var phoneInput = document.querySelector(\"#phone_dummy\");\r\n    if (phoneInput) {\r\n      window.intlTelInput(phoneInput, {\r\n        initialCountry: \"auto\",\r\n        separateDialCode: true,\r\n        preferredCountries: [\"ua\", \"pl\", \"de\", \"gb\"],\r\n        utilsScript: \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/utils.min.js\",\r\n        geoIpLookup: function(cb) { cb(\"ua\"); }\r\n      });\r\n    }\r\n\r\n    var btn = document.getElementById('dummyBtn');\r\n    var modal = document.getElementById('successModal');\r\n\r\n    btn.addEventListener('click', function() {\r\n      modal.classList.add('active');\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b1f5499 e-flex e-con-boxed e-con e-parent\" data-id=\"b1f5499\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83eebbc elementor-widget elementor-widget-text-editor\" data-id=\"83eebbc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u00a9 \u0406\u043d\u0444\u043e\u0441\u0444\u0435\u0440\u0430\u0428\u0406 2025. \u0423\u0441\u0456 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0445\u0438\u0449\u0435\u043d\u043e.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044e \u0420\u0456\u0448\u0435\u043d\u043d\u044f \u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438 \u041f\u043e\u0441\u043b\u0443\u0433\u0438 FAQ \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0438 \u041f\u0440\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0456\u044e \u0420\u0456\u0448\u0435\u043d\u043d\u044f \u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438 \u041f\u043e\u0441\u043b\u0443\u0433\u0438 FAQ \u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0438 \u2192 \u0406\u043d\u0444\u043e\u0441\u0444\u0435\u0440\u0430 \u0428\u0406 \u0406\u043d\u0442\u0435\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0456 CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u043d\u043e\u0432\u043e\u0433\u043e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":643,"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":736,"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/736"}],"wp:attachment":[{"href":"https:\/\/infospheraai.com.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}