/* Start:/bitrix/templates/tgwidget/template_styles.css?17728999582692*/
/* Базовые настройки и плавный скролл */
html { scroll-behavior: smooth; font-family: 'Inter', sans-serif; scroll-padding-top: 2rem; }
body { background-color: #f8fafc; color: #0f172a; margin: 0; padding: 0; }

/* Скрытие скроллбара для плавающего меню */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Кастомный скроллбар для таблиц и контента */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Отступ при скролле для якорей */
.scroll-mt { scroll-margin-top: 2rem; }

/* Анимации появления (Reveal on Scroll) */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Декоративные фоны */
.bg-mesh {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0.03) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.03) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.03) 0, transparent 50%);
}

/* Анимация плавающих пятен в Hero */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 10s infinite; }
.animation-delay-2000 { animation-delay: 2s; }

/* Стилизация окон примеров (Mac OS стиль) */
.window-mockup { 
    border: 1px solid rgba(226, 232, 240, 0.8); 
    border-radius: 20px; 
    background: #ffffff; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.02); 
}
.window-header { 
    height: 48px; 
    background: #f8fafc; 
    border-bottom: 1px solid rgba(226, 232, 240, 0.8); 
    border-radius: 20px 20px 0 0;
    display: flex; 
    align-items: center; 
    padding: 0 20px; 
    gap: 8px; 
}
.window-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: #ff5f56; border: 1px solid #e0443e; } 
.dot-y { background: #ffbd2e; border: 1px solid #dea123; } 
.dot-g { background: #27c93f; border: 1px solid #1aab29; }
/* End */
/* /bitrix/templates/tgwidget/template_styles.css?17728999582692 */