{"id":796,"date":"2026-10-19T17:35:26","date_gmt":"2026-10-19T14:35:26","guid":{"rendered":"https:\/\/sdwski.com\/?post_type=project&#038;p=796"},"modified":"2026-10-19T18:17:42","modified_gmt":"2026-10-19T15:17:42","slug":"chat-ai-for-shop","status":"publish","type":"project","link":"https:\/\/sdwski.com\/en\/post\/work\/chat-ai-for-shop","title":{"rendered":"<p>AI-powered chat assistant for online stores<\/p>\n"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>Ruzi &ndash; an AI-powered chat assistant for online stores (and more).<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Ruzi<\/strong> <strong>AI<\/strong> &ndash; <strong>is a true guardian of your website and a consultant for your business&mdash;one that responds quickly, knows your website (or product catalog), and doesn't go home at six in the evening.<\/strong><\/p><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">A visitor to your website asks the AI assistant a question and quickly receives an answer based on your website's content (and products), rather than on the AI's guesses. You can also upload a knowledge base to the AI assistant, which it will use to answer your customer's questions.<\/p>\n<\/div>\n<\/div><div data-sdwski_com-html-block=\"1\">\n<style>\n\n.demo {\n  display: flex;\n  justify-content: center;  \/* \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 *\/\n  align-items: center;      \/* \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 *\/     \n}\n\n\/* =================== ORB CSS (\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0441\u044e\u0434\u0430) =================== *\/\n.luma-trigger353 {\n  --lm-core: #4f3df0;   \/* \u0446\u0435\u043d\u0442\u0440 \u0448\u0430\u0440\u0430 *\/\n  --lm-edge: #d8d2fb;   \/* \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u043a\u0440\u0430\u0439 *\/\n  --lm-glow: #8fe8ff;   \/* \u0433\u043e\u043b\u0443\u0431\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0441\u043d\u0438\u0437\u0443 *\/\n  --lm-focus:  #7c6cf6;   \/* \u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 *\/\n  --lm-size: 68px;                 \/* \u0420\u0410\u0417\u041c\u0415\u0420 \u0448\u0430\u0440\u0430 \u2014 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0438\u043b\u0438 inline: style=\"--lm-size:120px\" *\/\n\n  position: relative;        \/* \u041d\u0415 fixed: \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 *\/\n  display: inline-block;\n  width: var(--lm-size);\n  height: var(--lm-size);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: none;\n  cursor: pointer;\n  vertical-align: middle;\n  filter: drop-shadow(0 6px 12px rgba(91,77,240,.25));\n  transition: transform .25s cubic-bezier(.2,.9,.25,1.3);\n}\n.luma-trigger353:hover { transform: scale(1.1); }\n.luma-trigger353:active { transform: scale(.95); }\n.luma-trigger353:focus-visible { outline: 3px solid var(--lm-focus); outline-offset: 4px; }\n\n.luma-sphere23 {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    radial-gradient(ellipse 80% 42% at 50% 104%, var(--lm-glow) 0%, rgba(143,232,255,0) 100%),\n    radial-gradient(circle at 50% 42%, var(--lm-core) 0%, var(--lm-core) 22%, #7567f5 56%, var(--lm-edge) 93%, #ece8fd 100%);\n  box-shadow:\n    0 calc(var(--lm-size) * .16) calc(var(--lm-size) * .22) calc(var(--lm-size) * -.06) rgba(110,100,240,.5),\n    0 0 calc(var(--lm-size) * .3) rgba(150,140,255,.25);\n}\n\/* \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0439 \u0431\u043b\u0438\u043a *\/\n.luma-sphere23::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  border-radius: 50%;\n  pointer-events: none;\n  background: radial-gradient(ellipse 46% 30% at 30% 14%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);\n  box-shadow: inset 0 0 calc(var(--lm-size) * .1) rgba(255,255,255,.55);\n}\n\/* \u0433\u043b\u0430\u0437\u0430 *\/\n.luma-gaze28 {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  transition: transform .12s ease-out;\n}\n.luma-dot903 {\n  position: absolute;\n  top: 31%;\n  width: 6.5%;\n  height: 18%;\n  border-radius: 999px;\n  background: rgba(255,255,255,.94);\n  box-shadow: 0 0 calc(var(--lm-size) * .04) rgba(255,255,255,.6);\n  animation: lm-blink78 5s infinite;\n}\n.luma-dot903:nth-child(1) { left: 33%; }\n.luma-dot903:nth-child(2) { left: 60.5%; }\n@keyframes lm-blink78 { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.1)} }\n\n@media (prefers-reduced-motion: reduce) {\n  .luma-dot903 { animation: none; }\n  .luma-trigger353 { transition: none; }\n}\n\/* =================== \/ORB CSS =================== *\/\n<\/style>\n\n<div class=\"pt-section-sss\">\n\n<div class=\"demo\">\n \n\n  <!-- &#1076;&#1088;&#1091;&#1075;&#1086;&#1081; &#1088;&#1072;&#1079;&#1084;&#1077;&#1088;: -->\n  <button type=\"button\" class=\"luma-trigger353\" style=\"--lm-size:220px\" aria-label=\"&#1054;&#1090;&#1082;&#1088;&#1099;&#1090;&#1100; &#1095;&#1072;&#1090;\">\n    <span class=\"luma-sphere23\" aria-hidden=\"true\">\n      <span class=\"luma-gaze28\"><span class=\"luma-dot903\"><\/span><span class=\"luma-dot903\"><\/span><\/span>\n    <\/span>\n  <\/button>\n<\/div><\/div>\n\n<!-- =================== ORB JS (&#1075;&#1083;&#1072;&#1079;&#1072; &#1089;&#1083;&#1077;&#1076;&#1103;&#1090; &#1079;&#1072; &#1082;&#1091;&#1088;&#1089;&#1086;&#1088;&#1086;&#1084;) =================== -->\n<script>\n(function () {\n  var orbs = document.querySelectorAll('.luma-trigger353');\n  if (!orbs.length) return;\n  var raf = 0, mx = 0, my = 0, last = Date.now();\n  var still = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function look(x, y) {\n    orbs.forEach(function (btn) {\n      var eyes = btn.querySelector('.luma-gaze28');\n      var r = btn.getBoundingClientRect();\n      if (!eyes || !r.width) return;\n      var dx = x - (r.left + r.width \/ 2);\n      var dy = y - (r.top + r.height \/ 2);\n      var d = Math.sqrt(dx * dx + dy * dy) || 1;\n      var k = Math.min(1, d \/ 160);\n      var tx = (dx \/ d) * k * r.width * 0.15;\n      var ty = (dy \/ d) * k * r.width * 0.12;\n      eyes.style.transform = 'translate(' + tx.toFixed(2) + 'px,' + ty.toFixed(2) + 'px)';\n    });\n  }\n\n  function onMove(e) {\n    var p = (e.touches && e.touches[0]) || e;\n    if (typeof p.clientX !== 'number') return;\n    mx = p.clientX; my = p.clientY; last = Date.now();\n    if (!raf) raf = requestAnimationFrame(function () { raf = 0; look(mx, my); });\n  }\n  ['pointermove', 'mousemove', 'touchmove'].forEach(function (ev) {\n    window.addEventListener(ev, onMove, { passive: true, capture: true });\n  });\n\n  \/\/ \u0431\u0435\u0437 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u0433\u043b\u0430\u0437\u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u00ab\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f\u00bb\n  if (!still) {\n    setInterval(function () {\n      if (Date.now() - last < 4000) return;\n      orbs.forEach(function (btn) {\n        var r = btn.getBoundingClientRect();\n        look(r.left + r.width \/ 2 + (Math.random() - 0.5) * 500,\n             r.top + r.height \/ 2 + (Math.random() - 0.5) * 400);\n      });\n    }, 2600);\n  }\n\n  \/\/ \u0412\u0430\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443:\n  orbs.forEach(function (btn) {\n    btn.addEventListener('click', function () { \/* \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0447\u0430\u0442 *\/ });\n  });\n})();\n<\/script>\n<\/div><h3 class=\"wp-block-heading\">The Challenge<\/h3><p class=\"wp-block-paragraph\">Every website has questions whose answers are just three clicks away from the visitor: &ldquo;Is size M available?&rdquo;, &ldquo;Where is my order?&rdquo;, &ldquo;How much is shipping?&rdquo;. Many people do not look for the answer themselves and simply leave. Meanwhile, managers spend their time answering the same questions and explaining the same things over and over.<\/p><p class=\"wp-block-paragraph\">I wanted to create an assistant that could be trusted to handle customer conversations: it does not make things up or promise more than it can deliver. If it cannot answer a question, it asks the customer to leave their contact details so that you can get in touch with them personally.<\/p><h3 class=\"wp-block-heading\">What the assistant can do<\/h3><p class=\"wp-block-paragraph\"><strong>Answers based on your website.<\/strong> It studies pages, articles, and products, and automatically updates its knowledge whenever the website changes. If the materials do not contain the answer, it says so honestly. I can configure the AI assistant to index only certain types of pages or exclude specific pages from the index.<\/p><p class=\"wp-block-paragraph\"><strong>Displays products<\/strong> It checks the catalog and provides the price, sizes, and colors, as well as a link to the product. If the requested color is unavailable, it will show the available options.<\/p><p class=\"wp-block-paragraph\"><strong>Provides order status updates.<\/strong> Registered customers only need to ask. A guest (an unregistered user of your online store) provides the order number and the e-mail address used at checkout. Other customers&rsquo; orders are never shown, and attempts to guess the details are blocked.<\/p><p class=\"wp-block-paragraph\"><strong>Accepts inquiries through a conversation.<\/strong> Instead of a lengthy form, the AI assistant asks for the customer&rsquo;s name, contact details, and a brief description of their request. The inquiry is sent by e-mail and saved in the website dashboard. Nothing is sent unless the visitor voluntarily provides their details and chooses to submit an inquiry.<\/p><p class=\"wp-block-paragraph\"><strong>Speaks multiple languages.<\/strong> Russian, English, and Lithuanian are supported out of the box. The language is determined by the site version, and the list can be customized.<\/p><div data-sdwski_com-html-block=\"1\">\n<style>\n\n.demo7 {\n  display: flex;\n  justify-content: center;  \/* \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 *\/\n  align-items: center;      \/* \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 *\/\n}\n\n\/* =================== LUMA ORB \u2014 CSS =================== *\/\n.luma-trigger35381 {\n  --lm-core: #4f3df0;   \/* \u0446\u0435\u043d\u0442\u0440 \u0448\u0430\u0440\u0430 *\/\n  --lm-edge: #d8d2fb;   \/* \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u043a\u0440\u0430\u0439 *\/\n  --lm-glow: #8fe8ff;   \/* \u0433\u043e\u043b\u0443\u0431\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0441\u043d\u0438\u0437\u0443 *\/\n  --lm-focus:  #7c6cf6;   \/* \u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 *\/\n  --lm-ink: rgba(255,255,255,.94);  \/* \u0446\u0432\u0435\u0442 \u0433\u043b\u0430\u0437 \u0438 \u0440\u0442\u0430 *\/\n  --lm-size: 68px;                 \/* \u0420\u0410\u0417\u041c\u0415\u0420 \u0448\u0430\u0440\u0430 \u2014 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0438\u043b\u0438 inline: style=\"--lm-size:120px\" *\/\n\n  position: relative;        \/* \u041d\u0415 fixed: \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 *\/\n  display: inline-block;\n  width: var(--lm-size);\n  height: var(--lm-size);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: none;\n  cursor: pointer;\n  vertical-align: middle;\n  filter: drop-shadow(0 6px 12px rgba(91,77,240,.25));\n  transition: transform .25s cubic-bezier(.2,.9,.25,1.3);\n  -webkit-tap-highlight-color: transparent;\n}\n.luma-trigger35381:hover { transform: scale(1.1); }\n.luma-trigger35381:active { transform: scale(.95); }\n.luma-trigger35381:focus-visible { outline: 3px solid var(--lm-focus); outline-offset: 4px; }\n.luma-trigger35381 *, .luma-trigger35381 *::before, .luma-trigger35381 *::after { box-sizing: border-box; }\n\n.luma-sphere2359 {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    radial-gradient(ellipse 80% 42% at 50% 104%, var(--lm-glow) 0%, rgba(143,232,255,0) 100%),\n    radial-gradient(circle at 50% 42%, var(--lm-core) 0%, var(--lm-core) 22%, #7567f5 56%, var(--lm-edge) 93%, #ece8fd 100%);\n  box-shadow:\n    0 calc(var(--lm-size) * .16) calc(var(--lm-size) * .22) calc(var(--lm-size) * -.06) rgba(110,100,240,.5),\n    0 0 calc(var(--lm-size) * .3) rgba(150,140,255,.25);\n}\n\/* \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0439 \u0431\u043b\u0438\u043a *\/\n.luma-sphere2359::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  border-radius: 50%;\n  pointer-events: none;\n  background: radial-gradient(ellipse 46% 30% at 30% 14%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);\n  box-shadow: inset 0 0 calc(var(--lm-size) * .1) rgba(255,255,255,.55);\n}\n\n\/* ----- \u043b\u0438\u0446\u043e ----- *\/\n.luma-gaze2846 {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  transition: transform .12s ease-out;\n}\n.luma-gaze2846::before, .luma-gaze2846::after {                \/* \u0440\u0443\u043c\u044f\u043d\u0435\u0446 *\/\n  content: \"\";\n  position: absolute; top: 56%;\n  width: 15%; height: 8%;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, rgba(255,130,205,.75), rgba(255,130,205,0));\n  opacity: 0;\n  transition: opacity .35s;\n}\n.luma-gaze2846::before { left: 20%; }\n.luma-gaze2846::after  { right: 20%; }\n\n\/* \u0433\u043b\u0430\u0437\u0430: \u0446\u0435\u043d\u0442\u0440\u044b \u043d\u0430 36.25% \u0438 63.75%, \u0448\u0438\u0440\u0438\u043d\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 --ew *\/\n.luma-dot90317 {\n  --ew: 6.5%;\n  position: absolute;\n  top: 31%;\n  width: var(--ew);\n  height: 18%;\n  border: 0 solid transparent;\n  border-radius: 999px;\n  background: var(--lm-ink);\n  box-shadow: 0 0 calc(var(--lm-size) * .04) rgba(255,255,255,.6);\n  transition: width .3s cubic-bezier(.3,1.4,.5,1), height .3s cubic-bezier(.3,1.4,.5,1), top .3s, left .3s,\n              border-radius .3s, background-color .25s, border-color .25s, box-shadow .25s;\n  animation: lm-blink78 5s infinite;\n}\n.luma-dot90317:nth-child(1) { left: calc(36.25% - var(--ew) \/ 2); }\n.luma-dot90317:nth-child(2) { left: calc(63.75% - var(--ew) \/ 2); animation-delay: .04s; }\n.luma-dot90317::after {                                      \/* \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u043e \u0434\u043b\u044f \u044d\u043c\u043e\u0446\u0438\u0438 \u00ab\u043b\u044e\u0431\u043e\u0432\u044c\u00bb *\/\n  content: \"\";\n  position: absolute; left: 50%; top: 50%;\n  width: calc(var(--lm-size) * .15); height: calc(var(--lm-size) * .15);\n  transform: translate(-50%,-50%);\n  background: linear-gradient(160deg, #ffd3ea, #ff6fae);\n  -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2 0 3.5 1 5.4 3 1.9-2 3.4-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.500 16.400 12 21 12 21z'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n          mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2 0 3.5 1 5.4 3 1.9-2 3.4-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.500 16.400 12 21 12 21z'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n  opacity: 0;\n  transition: opacity .25s;\n}\n\n\/* \u0440\u043e\u0442 *\/\n.luma-mouth4192 {\n  position: absolute; left: 50%; top: 58%;\n  width: 15%; height: 6.5%;\n  transform: translateX(-50%);\n  border: calc(var(--lm-size) * .024) solid;\n  border-color: transparent transparent var(--lm-ink) transparent;\n  border-radius: 0 0 50% 50% \/ 0 0 100% 100%;\n  background: transparent;\n  transition: width .3s cubic-bezier(.3,1.4,.5,1), height .3s cubic-bezier(.3,1.4,.5,1), top .3s,\n              border-radius .3s, border-color .25s, background-color .25s;\n}\n.luma-mouth4192::after {                                     \/* \u044f\u0437\u044b\u0447\u043e\u043a \u043f\u0440\u0438 \u0441\u043c\u0435\u0445\u0435 *\/\n  content: \"\";\n  position: absolute; left: 50%; bottom: -1px;\n  width: 52%; height: 48%;\n  transform: translateX(-50%);\n  border-radius: 50% 50% 0 0;\n  background: #ff7aa8;\n  opacity: 0;\n  transition: opacity .25s;\n}\n\n\/* ----- \u044d\u043c\u043e\u0446\u0438\u0438: \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c data-lm-mood (\u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) ----- *\/\n.luma-trigger35381[data-lm-mood=\"smile\"] .luma-mouth4192 { width: 22%; height: 10%; }\n\n.luma-trigger35381[data-lm-mood=\"happy\"] .luma-dot90317,\n.luma-trigger35381[data-lm-mood=\"laugh\"] .luma-dot90317 {      \/* \u0433\u043b\u0430\u0437\u0430-\u0434\u0443\u0433\u0438 ^ ^ *\/\n  --ew: 11%;\n  top: 36%; height: 8%; animation: none;\n  background-color: transparent;\n  border-color: var(--lm-ink) transparent transparent transparent;\n  border-top-width: calc(var(--lm-size) * .028);\n  border-radius: 50% 50% 0 0 \/ 100% 100% 0 0;\n  box-shadow: none; filter: drop-shadow(0 0 calc(var(--lm-size) * .02) rgba(255,255,255,.5));\n}\n.luma-trigger35381[data-lm-mood=\"happy\"] .luma-mouth4192 { width: 24%; height: 11%; }\n.luma-trigger35381[data-lm-mood=\"happy\"] .luma-gaze2846::before, .luma-trigger35381[data-lm-mood=\"happy\"] .luma-gaze2846::after { opacity: 1; }\n\n.luma-trigger35381[data-lm-mood=\"wink\"] .luma-dot90317:nth-child(2) { height: 2.5%; top: 40%; animation: none; }\n.luma-trigger35381[data-lm-mood=\"wink\"] .luma-mouth4192 { width: 20%; height: 9%; }\n\n.luma-trigger35381[data-lm-mood=\"wow\"] .luma-dot90317 { --ew: 9%; height: 9%; top: 34%; animation: none; }\n.luma-trigger35381[data-lm-mood=\"wow\"] .luma-mouth4192 {\n  width: 9%; height: 12%; top: 56%;\n  border-color: var(--lm-ink); border-radius: 50%;\n}\n\n.luma-trigger35381[data-lm-mood=\"laugh\"] .luma-mouth4192 {\n  width: 26%; height: 15%; top: 56%;\n  border-color: var(--lm-ink); background-color: var(--lm-ink);\n  overflow: hidden;\n}\n.luma-trigger35381[data-lm-mood=\"laugh\"] .luma-mouth4192::after { opacity: 1; }\n.luma-trigger35381[data-lm-mood=\"laugh\"] .luma-gaze2846::before, .luma-trigger35381[data-lm-mood=\"laugh\"] .luma-gaze2846::after { opacity: 1; }\n.luma-trigger35381[data-lm-mood=\"laugh\"] .luma-gaze2846 { animation: lm-giggle71 .5s ease-in-out 2; }\n\n.luma-trigger35381[data-lm-mood=\"sleepy\"] .luma-dot90317 { --ew: 9%; top: 41%; height: 3.5%; animation: none; }\n.luma-trigger35381[data-lm-mood=\"sleepy\"] .luma-mouth4192 { width: 8%; height: 3%; top: 59%; }\n\n.luma-trigger35381[data-lm-mood=\"love\"] .luma-dot90317 { background-color: transparent; box-shadow: none; animation: none; top: 34%; }\n.luma-trigger35381[data-lm-mood=\"love\"] .luma-dot90317::after { opacity: 1; animation: lm-beat67 .9s ease-in-out infinite; }\n.luma-trigger35381[data-lm-mood=\"love\"] .luma-mouth4192 { width: 20%; height: 9%; }\n.luma-trigger35381[data-lm-mood=\"love\"] .luma-gaze2846::before, .luma-trigger35381[data-lm-mood=\"love\"] .luma-gaze2846::after { opacity: 1; }\n\n\/* ----- \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 ----- *\/\n@keyframes lm-blink78 { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.1)} }\n@keyframes lm-giggle71 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--lm-size) * -.016)); } }\n@keyframes lm-beat67 { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.18); } }\n\n@media (prefers-reduced-motion: reduce) {\n  .luma-dot90317, .luma-dot90317::after, .luma-gaze2846 { animation: none !important; }\n  .luma-trigger35381 { transition: none; }\n}\n\/* =================== \/LUMA ORB \u2014 CSS =================== *\/\n<\/style>\n\n<div class=\"pt-section-sss5\">\n\n<div class=\"demo7\">\n\n  <!-- &#1088;&#1072;&#1079;&#1084;&#1077;&#1088; &#1084;&#1077;&#1085;&#1103;&#1077;&#1090;&#1089;&#1103; &#1079;&#1076;&#1077;&#1089;&#1100;: --lm-size -->\n  <button type=\"button\" class=\"luma-trigger35381\" style=\"--lm-size:220px\" data-lm-mood=\"calm\" aria-label=\"&#1054;&#1090;&#1082;&#1088;&#1099;&#1090;&#1100; &#1095;&#1072;&#1090;\">\n    <span class=\"luma-sphere2359\" aria-hidden=\"true\">\n      <span class=\"luma-gaze2846\"><span class=\"luma-dot90317\"><\/span><span class=\"luma-dot90317\"><\/span><span class=\"luma-mouth4192\"><\/span><\/span>\n    <\/span>\n  <\/button>\n<\/div><\/div>\n\n<!-- =================== LUMA ORB &mdash; JS =================== -->\n<script>\n(function () {\n  var orbs = Array.prototype.slice.call(document.querySelectorAll('.luma-trigger35381'));\n  if (!orbs.length) return;\n\n  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var MOODS = ['calm', 'smile', 'happy', 'wink', 'wow', 'laugh', 'sleepy', 'love'];\n  \/\/ \u041a\u0430\u043a\u0438\u0435 \u044d\u043c\u043e\u0446\u0438\u0438 \u0448\u0430\u0440 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0430\u043c \u0438 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u043e (\u0447\u0435\u043c \u0447\u0430\u0449\u0435 \u0441\u043b\u043e\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f, \u0442\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u0435\u0442)\n  var RANDOM = ['smile','smile','happy','happy','wink','wink','wow','laugh','love'];\n  var raf = 0, mx = 0, my = 0, last = Date.now();\n\n  function rnd(a, b) { return a + Math.random() * (b - a); }\n\n  \/\/ \u041f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u043c\u043e\u0446\u0438\u044e; hold \u2014 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0441 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u043c\u0443 \u043b\u0438\u0446\u0443 (0 = \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c)\n  function setMood(btn, mood, hold) {\n    clearTimeout(btn._lmT);\n    btn.setAttribute('data-lm-mood', mood);\n    btn._lmMood = mood;\n    if (hold && mood !== 'calm') {\n      btn._lmT = setTimeout(function () { if (!btn._lmHover) setMood(btn, 'calm', 0); }, hold);\n    }\n  }\n\n  \/\/ \u0413\u043b\u0430\u0437\u0430 \u0438 \u043b\u0438\u0446\u043e \u0441\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043a\u0443\u0440\u0441\u043e\u0440\u0430\n  function look(x, y) {\n    orbs.forEach(function (btn) {\n      var eyes = btn.querySelector('.luma-gaze2846');\n      var r = btn.getBoundingClientRect();\n      if (!eyes || !r.width) return;\n      var dx = x - (r.left + r.width \/ 2);\n      var dy = y - (r.top + r.height \/ 2);\n      var d = Math.sqrt(dx * dx + dy * dy) || 1;\n      var k = Math.min(1, d \/ 160);\n      var tx = (dx \/ d) * k * r.width * 0.15;\n      var ty = (dy \/ d) * k * r.width * 0.12;\n      eyes.style.transform = 'translate(' + tx.toFixed(2) + 'px,' + ty.toFixed(2) + 'px)';\n    });\n  }\n\n  function onMove(e) {\n    var p = (e.touches && e.touches[0]) || e;\n    if (typeof p.clientX !== 'number') return;\n    mx = p.clientX; my = p.clientY; last = Date.now();\n    \/\/ \u043f\u0440\u043e\u0441\u043d\u0443\u043b\u0441\u044f \u043e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\n    orbs.forEach(function (b) { if (b._lmMood === 'sleepy') setMood(b, 'wow', 900); });\n    if (!raf) raf = requestAnimationFrame(function () { raf = 0; look(mx, my); });\n  }\n\n  orbs.forEach(function (btn) {\n    setMood(btn, 'calm', 0);\n    btn.addEventListener('pointerenter', function () { btn._lmHover = true; setMood(btn, 'happy', 0); });\n    btn.addEventListener('pointerleave', function () { btn._lmHover = false; setMood(btn, 'calm', 0); });\n    btn.addEventListener('click', function () {\n      setMood(btn, 'laugh', 1600);\n      \/* >>> \u0412\u0430\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0447\u0430\u0442 <<< *\/\n    });\n  });\n\n  \/\/ \u0411\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439: \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u0435 \u043b\u0438\u0446\u043e \u0441 \u0443\u043b\u044b\u0431\u043a\u043e\u0439\n  if (reduce) {\n    orbs.forEach(function (btn) { setMood(btn, 'smile', 0); });\n    return;\n  }\n\n  ['pointermove', 'mousemove', 'touchmove'].forEach(function (ev) {\n    window.addEventListener(ev, onMove, { passive: true, capture: true });\n  });\n\n  \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u044d\u043c\u043e\u0446\u0438\u0438: \u043a\u0430\u0436\u0434\u044b\u0435 3\u20137 \u0441\u0435\u043a\u0443\u043d\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0440 \u00ab\u0447\u0442\u043e-\u0442\u043e \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u00bb\n  orbs.forEach(function (btn) {\n    (function loop() {\n      setTimeout(function () {\n        if (!document.hidden && !btn._lmHover && btn._lmMood !== 'sleepy') {\n          setMood(btn, RANDOM[Math.floor(Math.random() * RANDOM.length)], rnd(1500, 2800));\n        }\n        loop();\n      }, rnd(3000, 7000));\n    })();\n  });\n\n  \/\/ \u0411\u0435\u0437 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u00ab\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f\u00bb; \u043f\u043e\u0441\u043b\u0435 25 \u0441\u0435\u043a\u0443\u043d\u0434 \u0442\u0438\u0448\u0438\u043d\u044b \u0437\u0430\u0441\u044b\u043f\u0430\u0435\u0442\n  setInterval(function () {\n    var idle = Date.now() - last;\n    orbs.forEach(function (btn) {\n      var r = btn.getBoundingClientRect();\n      if (idle > 25000 && !btn._lmHover && btn._lmMood !== 'sleepy') setMood(btn, 'sleepy', 0);\n      if (idle > 4000 && btn._lmMood !== 'sleepy') {\n        look(r.left + r.width \/ 2 + (Math.random() - .5) * 500,\n             r.top + r.height \/ 2 + (Math.random() - .5) * 400);\n      }\n    });\n  }, 2600);\n\n  \/\/ \u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430: window.lumaOrb.mood(\u044d\u043b\u0435\u043c\u0435\u043d\u0442, 'love')\n  window.lumaOrb = { mood: setMood, moods: MOODS };\n})();\n<\/script>\n<!-- =================== \/LUMA ORB &mdash; JS =================== -->\n<\/div><h3 class=\"wp-block-heading\">What the site owner gets<\/h3><ul class=\"wp-block-list\">\n<li><strong>Conversation log.<\/strong> It shows what customers are asking about and what information is missing from the site. IP addresses are not stored, and old conversations are deleted automatically.<\/li>\n\n\n\n<li><strong>A list of inquiries<\/strong> with contact details and descriptions of the requests.<\/li>\n\n\n\n<li><strong>Protection against abuse:<\/strong> request limit per address and question length restriction.<\/li>\n\n\n\n<li><strong>Full customization.<\/strong> The greeting, tone, colors, size, and behavior can all be changed in the settings. <\/li>\n<\/ul><h3 class=\"wp-block-heading\">How it works<\/h3><p class=\"wp-block-paragraph\">The plugin for WordPress works with Microsoft Azure OpenAI. It searches the website content for excerpts relevant to the question and sends only those excerpts to the model, along with instructions (a prompt) to base its answer on that information. For online stores, tools are provided that can access the WooCommerce catalog and orders.<\/p><p class=\"wp-block-paragraph\"><strong>Technologies used: <\/strong><\/p><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" src=\"https:\/\/sdwski.com\/wp-content\/uploads\/2026\/10\/azure.webp\" alt=\"\" class=\"wp-image-742\" style=\"width:100px;height:auto\"><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p class=\"has-small-font-size wp-block-paragraph\"><strong>Azure OpenAI<\/strong><br>A fully managed cloud service from Microsoft that enables developers and businesses to securely integrate advanced AI models from OpenAI into their projects.<\/p>\n<\/div>\n<\/div><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" src=\"https:\/\/sdwski.com\/wp-content\/uploads\/2026\/10\/wordpress.webp\" alt=\"\" class=\"wp-image-743\" style=\"width:100px;height:auto\"><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p class=\"has-small-font-size wp-block-paragraph\"><strong>WordPress<\/strong><br>The world's most popular open-source content management system (CMS), written in PHP and using MySQL or MariaDB databases.<\/p>\n<\/div>\n<\/div><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"400\" src=\"https:\/\/sdwski.com\/wp-content\/uploads\/2026\/10\/woo.webp\" alt=\"\" class=\"wp-image-744\" style=\"width:100px;height:auto\"><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p class=\"has-small-font-size wp-block-paragraph\"><strong>WooCommerce<\/strong><br>This is the world's most popular free, open-source eCommerce plugin, built specifically for WordPress. According to analytics, it powers more than <strong>25% &#1084;&#1080;&#1088;&#1086;&#1074;&#1086;&#1075;&#1086; &#1088;&#1099;&#1085;&#1082;&#1072;<\/strong> of all online stores, surpassing many specialized competitors.<\/p>\n<\/div>\n<\/div><h3 class=\"wp-block-heading\">Design tailored to your brand<\/h3><p class=\"wp-block-paragraph\">An orb in the corner of the page is just one option. We tailor the assistant's appearance to your website and your requirements:<\/p><div data-sdwski_com-html-block=\"1\">\n<style>\n\n.frame98 { width: 100%;  display: flex; }\n.zone382 { width: 100%; display: flex; flex-direction: column; gap: 28px; align-items: center; justify-content: center; padding: 70px 20px; }\n.night26 { background: radial-gradient(circle at 50% 40%, #1a1466 0%, #07052a 70%); color: #e6e7ff !important; }\n\n\/* =================== NOVA ORB \u2014 CSS =================== *\/\n.nova-trigger63 {\n  --nv-s: 120px;                         \/* \u0420\u0410\u0417\u041c\u0415\u0420 \u0448\u0430\u0440\u0430 (\u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043b\u044c\u0446\u043e\u043c). \u041f\u0440\u0438\u043c\u0435\u0440: style=\"--nv-s:200px\" *\/\n  --nv-u: calc(var(--nv-s) \/ 100);       \/* \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u2014 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c *\/\n  --nv-ink: #ffffff;                     \/* \u0446\u0432\u0435\u0442 \u0433\u043b\u0430\u0437 \u0438 \u0440\u0442\u0430 *\/\n  --nv-deep: #08063a;                    \/* \u0442\u0451\u043c\u043d\u044b\u0439 \u0446\u0435\u043d\u0442\u0440 \u043b\u0438\u043d\u0437\u044b *\/\n  --nv-mid: #1a1680;\n  --nv-top: #2f2cc0;\n  --nv-c1: rgba(70,210,255,.34);          \/* \u0431\u0438\u0440\u044e\u0437\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 *\/\n  --nv-c2: rgba(150,100,255,.4);        \/* \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 *\/\n  --nv-c3: rgba(235,70,225,.34);         \/* \u0440\u043e\u0437\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 *\/\n  --nv-halo: 110,90,255;                 \/* RGB \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u043a\u0440\u0443\u0433 *\/\n\n  position: relative;                    \/* \u041d\u0415 fixed \u2014 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u043b\u044e\u0431\u043e\u0435 \u043c\u0435\u0441\u0442\u043e *\/\n  display: inline-block;\n  width: var(--nv-s);\n  height: var(--nv-s);\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: none;\n  cursor: pointer;\n  vertical-align: middle;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform .35s cubic-bezier(.2,.9,.25,1.3);\n}\n.nova-trigger63:hover { transform: scale(1.07); }\n.nova-trigger63:active { transform: scale(.94); }\n.nova-trigger63:focus-visible { outline: 3px solid #9d8cff; outline-offset: 8px; }\n.nova-trigger63 *, .nova-trigger63 *::before, .nova-trigger63 *::after { box-sizing: border-box; }\n\n\/* ----- \u0442\u0443\u043c\u0430\u043d\u043d\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0438 \u00ab\u043b\u0435\u043d\u0442\u044b\u00bb \u0432\u043e\u043a\u0440\u0443\u0433 ----- *\/\n.nova-mist948 {\n  position: absolute; inset: -42%;\n  border-radius: 50%;\n  pointer-events: none;\n  background: radial-gradient(circle, rgba(var(--nv-halo),.55) 0%, rgba(var(--nv-halo),.28) 30%, rgba(var(--nv-halo),0) 62%);\n  animation: nv-breathe18 5s ease-in-out infinite alternate;\n}\n.nova-ribbon54 {\n  position: absolute; inset: -40%;\n  border-radius: 50%;\n  pointer-events: none;\n  background: conic-gradient(from 0deg, transparent 0 8%, rgba(185,165,255,.85) 17%, transparent 30%, transparent 47%, rgba(120,210,255,.7) 58%, transparent 71%, rgba(205,135,255,.75) 85%, transparent 95%);\n  filter: blur(calc(var(--nv-u) * 1.4));\n  -webkit-mask: radial-gradient(circle, transparent 36%, #000 42%, #000 48%, transparent 66%);\n          mask: radial-gradient(circle, transparent 36%, #000 42%, #000 48%, transparent 66%);\n  transform: scale(1.1,.84);\n  animation: nv-spin362 19s linear infinite;\n}\n.nova-ribbon-b909 {\n  background: conic-gradient(from 90deg, transparent 0 12%, rgba(130,215,255,.75) 22%, transparent 36%, transparent 52%, rgba(205,130,255,.75) 64%, transparent 78%, rgba(150,140,255,.8) 90%, transparent 98%);\n  animation: nv-spinr51 27s linear infinite;\n}\n\n\/* ----- \u0431\u0435\u043b\u043e\u0435 \u0441\u0432\u0435\u0442\u044f\u0449\u0435\u0435\u0441\u044f \u043a\u043e\u043b\u044c\u0446\u043e ----- *\/\n.nova-bloom669 {\n  position: absolute; inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  box-shadow:\n    0 0 calc(var(--nv-u) * 3) rgba(255,255,255,.9),\n    0 0 calc(var(--nv-u) * 9) rgba(150,130,255,.9),\n    0 0 calc(var(--nv-u) * 20) rgba(var(--nv-halo),.65),\n    inset 0 0 calc(var(--nv-u) * 6) rgba(190,180,255,.7);\n  animation: nv-pulse08 4s ease-in-out infinite alternate;\n}\n.nova-rim688 {\n  position: absolute; inset: calc(var(--nv-u) * .8);\n  border-radius: 50%;\n  pointer-events: none;\n  background: conic-gradient(#fff, #c9c0ff 20%, #fff 40%, #a5ecff 62%, #fff 80%, #d9b8ff 92%, #fff);\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--nv-u) * 2.4), #000 calc(100% - var(--nv-u) * 2.4 + 1px));\n          mask: radial-gradient(farthest-side, transparent calc(100% - var(--nv-u) * 2.4), #000 calc(100% - var(--nv-u) * 2.4 + 1px));\n  animation: nv-spin362 7s linear infinite;\n}\n\n\/* ----- \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u0430\u044f \u043b\u0438\u043d\u0437\u0430 \u0441 \u0436\u0438\u0432\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 ----- *\/\n.nova-lens881 {\n  position: absolute; inset: calc(var(--nv-u) * 3.6);\n  border-radius: 50%;\n  overflow: hidden;\n  isolation: isolate;\n  background:\n    radial-gradient(ellipse 62% 46% at 18% 88%, rgba(40,214,245,.9) 0%, rgba(40,214,245,0) 100%),\n    radial-gradient(ellipse 56% 52% at 90% 80%, rgba(214,60,230,.8) 0%, rgba(214,60,230,0) 100%),\n    radial-gradient(circle at 50% 36%, var(--nv-top) 0%, var(--nv-mid) 48%, var(--nv-deep) 100%);\n}\n.nova-shape463 {\n  position: absolute;\n  width: 68%; height: 68%;\n  will-change: transform, border-radius;\n}\n.nova-sa160 { left: -10%; top: 14%; background: var(--nv-c1); animation: nv-ma784 11s ease-in-out infinite alternate; }\n.nova-sb243 { right: -14%; top: -8%; background: var(--nv-c2); animation: nv-mb450 14s ease-in-out infinite alternate; }\n.nova-sc06 { left: 22%; bottom: -30%; background: var(--nv-c3); animation: nv-mc063 17s ease-in-out infinite alternate; }\n.nova-gloss969 {\n  position: absolute; inset: 0; z-index: 4;\n  border-radius: 50%;\n  pointer-events: none;\n  background: radial-gradient(ellipse 44% 26% at 32% 10%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 100%);\n  box-shadow: inset 0 0 calc(var(--nv-u) * 7) rgba(255,255,255,.25);\n}\n\n\/* ----- \u043b\u0438\u0446\u043e ----- *\/\n.nova-face051 {\n  position: absolute; inset: 0; z-index: 3;\n  transition: transform .16s ease-out;\n}\n.nova-face051::before, .nova-face051::after {                 \/* \u0440\u0443\u043c\u044f\u043d\u0435\u0446 *\/\n  content: \"\";\n  position: absolute; top: 55%;\n  width: 16%; height: 9%;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, rgba(255,120,200,.7), rgba(255,120,200,0));\n  opacity: 0;\n  transition: opacity .35s;\n}\n.nova-face051::before { left: 21%; }\n.nova-face051::after  { right: 21%; }\n\n.nova-eye56 {\n  position: absolute; top: 33%;\n  width: 7%; height: 19%;\n  border: calc(var(--nv-u) * 2.6) solid transparent;\n  border-radius: 50%;\n  background: var(--nv-ink);\n  box-shadow: 0 0 calc(var(--nv-u) * 3) rgba(255,255,255,.55);\n  transition: width .3s cubic-bezier(.3,1.4,.5,1), height .3s cubic-bezier(.3,1.4,.5,1), top .3s, left .3s,\n              border-radius .3s, background-color .25s, border-color .25s, box-shadow .25s;\n  animation: nv-blink703 5.2s infinite;\n}\n.nova-eye56:nth-child(1) { left: 31.5%; }\n.nova-eye56:nth-child(2) { left: 61.5%; animation-delay: .04s; }\n.nova-eye56::after {                                    \/* \u0441\u0435\u0440\u0434\u0435\u0447\u043a\u043e \u0434\u043b\u044f \u044d\u043c\u043e\u0446\u0438\u0438 \u00ab\u043b\u044e\u0431\u043e\u0432\u044c\u00bb *\/\n  content: \"\";\n  position: absolute; left: 50%; top: 50%;\n  width: calc(var(--nv-u) * 12); height: calc(var(--nv-u) * 12);\n  transform: translate(-50%,-50%);\n  background: linear-gradient(160deg, #ffd3ea, #ff6fae);\n  -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2 0 3.5 1 5.4 3 1.9-2 3.4-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.500 16.400 12 21 12 21z'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n          mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2 0 3.5 1 5.4 3 1.9-2 3.4-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.500 16.400 12 21 12 21z'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n  opacity: 0;\n  transition: opacity .25s;\n}\n\n.nova-mouth354 {\n  position: absolute; left: 50%; top: 58%;\n  width: 15%; height: 6.5%;\n  transform: translateX(-50%);\n  border: calc(var(--nv-u) * 2.6) solid;\n  border-color: transparent transparent var(--nv-ink) transparent;\n  border-radius: 0 0 50% 50% \/ 0 0 100% 100%;\n  background: transparent;\n  transition: width .3s cubic-bezier(.3,1.4,.5,1), height .3s cubic-bezier(.3,1.4,.5,1), top .3s,\n              border-radius .3s, border-color .25s, background-color .25s;\n}\n.nova-mouth354::after {                                  \/* \u044f\u0437\u044b\u0447\u043e\u043a \u043f\u0440\u0438 \u0441\u043c\u0435\u0445\u0435 *\/\n  content: \"\";\n  position: absolute; left: 50%; bottom: -1px;\n  width: 52%; height: 48%;\n  transform: translateX(-50%);\n  border-radius: 50% 50% 0 0;\n  background: #ff7aa8;\n  opacity: 0;\n  transition: opacity .25s;\n}\n\n\/* ----- \u044d\u043c\u043e\u0446\u0438\u0438: \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c data-nv-mood (\u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) ----- *\/\n.nova-trigger63[data-nv-mood=\"smile\"] .nova-mouth354 { width: 22%; height: 10%; }\n.nova-trigger63[data-nv-mood=\"happy\"] .nova-eye56 {\n  top: 35%; width: 12%; height: 10%; animation: none;\n  background-color: transparent; border-color: var(--nv-ink) transparent transparent transparent;\n  border-left-width: 0; border-right-width: 0; border-bottom-width: 0;\n  border-top-width: calc(var(--nv-u) * 3);\n  border-radius: 50% 50% 0 0 \/ 100% 100% 0 0;\n  box-shadow: none; filter: drop-shadow(0 0 calc(var(--nv-u) * 2) rgba(255,255,255,.5));\n}\n.nova-trigger63[data-nv-mood=\"happy\"] .nova-mouth354 { width: 24%; height: 11%; }\n.nova-trigger63[data-nv-mood=\"happy\"] .nova-face051::before, .nova-trigger63[data-nv-mood=\"happy\"] .nova-face051::after { opacity: 1; }\n\n.nova-trigger63[data-nv-mood=\"wink\"] .nova-eye56:nth-child(2) { height: 2%; top: 42%; animation: none; }\n.nova-trigger63[data-nv-mood=\"wink\"] .nova-mouth354 { width: 20%; height: 9%; }\n\n.nova-trigger63[data-nv-mood=\"wow\"] .nova-eye56 { width: 10%; height: 10%; top: 33%; animation: none; }\n.nova-trigger63[data-nv-mood=\"wow\"] .nova-mouth354 {\n  width: 9%; height: 12%; top: 56%;\n  border-color: var(--nv-ink); border-radius: 50%;\n}\n\n.nova-trigger63[data-nv-mood=\"laugh\"] .nova-eye56 {\n  top: 35%; width: 12%; height: 10%; animation: none;\n  background-color: transparent; border-color: var(--nv-ink) transparent transparent transparent;\n  border-left-width: 0; border-right-width: 0; border-bottom-width: 0;\n  border-top-width: calc(var(--nv-u) * 3);\n  border-radius: 50% 50% 0 0 \/ 100% 100% 0 0;\n  box-shadow: none; filter: drop-shadow(0 0 calc(var(--nv-u) * 2) rgba(255,255,255,.5));\n}\n.nova-trigger63[data-nv-mood=\"laugh\"] .nova-mouth354 {\n  width: 26%; height: 15%; top: 56%;\n  border-color: var(--nv-ink); background-color: var(--nv-ink);\n  overflow: hidden;\n}\n.nova-trigger63[data-nv-mood=\"laugh\"] .nova-mouth354::after { opacity: 1; }\n.nova-trigger63[data-nv-mood=\"laugh\"] .nova-face051::before, .nova-trigger63[data-nv-mood=\"laugh\"] .nova-face051::after { opacity: 1; }\n.nova-trigger63[data-nv-mood=\"laugh\"] .nova-face051 { animation: nv-giggle71 .5s ease-in-out 2; }\n\n.nova-trigger63[data-nv-mood=\"sleepy\"] .nova-eye56 { top: 41%; width: 9%; height: 3.5%; animation: none; }\n.nova-trigger63[data-nv-mood=\"sleepy\"] .nova-mouth354 { width: 8%; height: 3%; top: 59%; }\n\n.nova-trigger63[data-nv-mood=\"love\"] .nova-eye56 { background-color: transparent; box-shadow: none; animation: none; top: 34%; }\n.nova-trigger63[data-nv-mood=\"love\"] .nova-eye56::after { opacity: 1; animation: nv-beat67 .9s ease-in-out infinite; }\n.nova-trigger63[data-nv-mood=\"love\"] .nova-mouth354 { width: 20%; height: 9%; }\n.nova-trigger63[data-nv-mood=\"love\"] .nova-face051::before, .nova-trigger63[data-nv-mood=\"love\"] .nova-face051::after { opacity: 1; }\n\n\/* ----- \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 ----- *\/\n@keyframes nv-spin362   { to { transform: rotate(360deg); } }\n@keyframes nv-spinr51  { from { transform: scale(1.1,.84) rotate(0deg); } to { transform: scale(1.1,.84) rotate(-360deg); } }\n@keyframes nv-breathe18{ from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }\n@keyframes nv-pulse08  { from { opacity: .8; } to { opacity: 1; } }\n@keyframes nv-blink703  { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }\n@keyframes nv-giggle71 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--nv-u) * -1.6)); } }\n@keyframes nv-beat67   { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.18); } }\n@keyframes nv-ma784 {\n  0%   { border-radius: 42% 58% 63% 37% \/ 41% 44% 56% 59%; transform: translate(0,0) rotate(0deg) scale(1); }\n  50%  { border-radius: 61% 39% 44% 56% \/ 55% 62% 38% 45%; transform: translate(12%,-6%) rotate(80deg) scale(1.1); }\n  100% { border-radius: 38% 62% 52% 48% \/ 60% 40% 60% 40%; transform: translate(-6%,8%) rotate(170deg) scale(.95); }\n}\n@keyframes nv-mb450 {\n  0%   { border-radius: 55% 45% 38% 62% \/ 48% 58% 42% 52%; transform: translate(0,0) rotate(20deg) scale(1); }\n  50%  { border-radius: 40% 60% 58% 42% \/ 62% 38% 62% 38%; transform: translate(-14%,10%) rotate(-60deg) scale(1.12); }\n  100% { border-radius: 63% 37% 46% 54% \/ 40% 56% 44% 60%; transform: translate(8%,-4%) rotate(-140deg) scale(.92); }\n}\n@keyframes nv-mc063 {\n  0%   { border-radius: 47% 53% 60% 40% \/ 52% 38% 62% 48%; transform: translate(0,0) rotate(-10deg) scale(1); }\n  50%  { border-radius: 58% 42% 41% 59% \/ 44% 60% 40% 56%; transform: translate(10%,-12%) rotate(90deg) scale(1.15); }\n  100% { border-radius: 39% 61% 55% 45% \/ 58% 42% 58% 42%; transform: translate(-10%,6%) rotate(200deg) scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .nova-trigger63 *, .nova-trigger63 *::after { animation: none !important; }\n  .nova-trigger63 { transition: none; }\n}\n\/* =================== \/NOVA ORB \u2014 CSS =================== *\/\n<\/style>\n\n\n<div class=\"frame98 pt-section-sss\">\n  <div class=\"zone382 night26\">\n    <!-- =================== NOVA ORB &mdash; HTML =================== -->\n    <button type=\"button\" class=\"nova-trigger63\" style=\"--nv-s:220px\" data-nv-mood=\"calm\" aria-label=\"&#1054;&#1090;&#1082;&#1088;&#1099;&#1090;&#1100; &#1095;&#1072;&#1090;\">\n      <span class=\"nova-mist948\"><\/span>\n      <span class=\"nova-ribbon54\"><\/span>\n      <span class=\"nova-ribbon54 nova-ribbon-b909\"><\/span>\n      <span class=\"nova-bloom669\"><\/span>\n      <span class=\"nova-rim688\"><\/span>\n      <span class=\"nova-lens881\">\n        <span class=\"nova-shape463 nova-sa160\"><\/span>\n        <span class=\"nova-shape463 nova-sb243\"><\/span>\n        <span class=\"nova-shape463 nova-sc06\"><\/span>\n        <span class=\"nova-face051\"><span class=\"nova-eye56\"><\/span><span class=\"nova-eye56\"><\/span><span class=\"nova-mouth354\"><\/span><\/span>\n        <span class=\"nova-gloss969\"><\/span>\n      <\/span>\n    <\/button>\n    <!-- =================== \/NOVA ORB &mdash; HTML =================== -->\n  <\/div>\n<\/div>\n\n<!-- =================== NOVA ORB &mdash; JS =================== -->\n<script>\n(function () {\n  var SEL = '.nova-trigger63';\n  var orbs = Array.prototype.slice.call(document.querySelectorAll(SEL));\n  if (!orbs.length) return;\n\n  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var MOODS = ['calm', 'smile', 'happy', 'wink', 'wow', 'laugh', 'sleepy', 'love'];\n  \/\/ \u041a\u0430\u043a\u0438\u0435 \u044d\u043c\u043e\u0446\u0438\u0438 \u0448\u0430\u0440 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0430\u043c \u0438 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u043e (\u0447\u0435\u043c \u0447\u0430\u0449\u0435 \u0441\u043b\u043e\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f, \u0442\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u044b\u043f\u0430\u0434\u0430\u0435\u0442)\n  var RANDOM = ['smile','smile','happy','happy','wink','wink','wow','laugh','love'];\n  var lastMove = Date.now();\n\n  function rnd(a, b) { return a + Math.random() * (b - a); }\n\n  \/\/ \u041f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u043c\u043e\u0446\u0438\u044e; hold \u2014 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0441 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u043c\u0443 \u043b\u0438\u0446\u0443 (0 = \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c)\n  function setMood(btn, mood, hold) {\n    clearTimeout(btn._nvT);\n    btn.setAttribute('data-nv-mood', mood);\n    btn._nvMood = mood;\n    if (hold && mood !== 'calm') {\n      btn._nvT = setTimeout(function () { if (!btn._nvHover) setMood(btn, 'calm', 0); }, hold);\n    }\n  }\n\n  \/\/ \u0413\u043b\u0430\u0437\u0430 \u0438 \u043b\u0438\u0446\u043e \u0441\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043a\u0443\u0440\u0441\u043e\u0440\u0430\n  var raf = 0, mx = 0, my = 0;\n  function look(x, y) {\n    orbs.forEach(function (btn) {\n      var face = btn.querySelector('.nova-face051');\n      var r = btn.getBoundingClientRect();\n      if (!face || !r.width) return;\n      var dx = x - (r.left + r.width \/ 2), dy = y - (r.top + r.height \/ 2);\n      var d = Math.sqrt(dx * dx + dy * dy) || 1;\n      var k = Math.min(1, d \/ 180);\n      face.style.transform = 'translate(' + ((dx \/ d) * k * r.width * 0.07).toFixed(2) + 'px,' +\n                                         ((dy \/ d) * k * r.width * 0.06).toFixed(2) + 'px)';\n    });\n  }\n  function onMove(e) {\n    var p = (e.touches && e.touches[0]) || e;\n    if (typeof p.clientX !== 'number') return;\n    mx = p.clientX; my = p.clientY;\n    \/\/ \u043f\u0440\u043e\u0441\u043d\u0443\u043b\u0441\u044f \u043e\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f\n    orbs.forEach(function (b) { if (b._nvMood === 'sleepy') setMood(b, 'wow', 900); });\n    lastMove = Date.now();\n    if (!raf) raf = requestAnimationFrame(function () { raf = 0; look(mx, my); });\n  }\n\n  orbs.forEach(function (btn) {\n    setMood(btn, 'calm', 0);\n    btn.addEventListener('pointerenter', function () { btn._nvHover = true; setMood(btn, 'happy', 0); });\n    btn.addEventListener('pointerleave', function () { btn._nvHover = false; setMood(btn, 'calm', 0); });\n    btn.addEventListener('click', function () {\n      setMood(btn, 'laugh', 1600);\n      \/* >>> \u0412\u0430\u0448\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0447\u0430\u0442 <<< *\/\n    });\n  });\n\n  \/\/ \u0411\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439: \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u0435 \u043b\u0438\u0446\u043e \u0441 \u0443\u043b\u044b\u0431\u043a\u043e\u0439\n  if (reduce) {\n    orbs.forEach(function (btn) { setMood(btn, 'smile', 0); });\n    return;\n  }\n\n  window.addEventListener('pointermove', onMove, { passive: true, capture: true });\n  window.addEventListener('touchmove', onMove, { passive: true, capture: true });\n\n  \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u044d\u043c\u043e\u0446\u0438\u0438: \u043a\u0430\u0436\u0434\u044b\u0435 3\u20137 \u0441\u0435\u043a\u0443\u043d\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0440 \u00ab\u0447\u0442\u043e-\u0442\u043e \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u00bb\n  orbs.forEach(function (btn) {\n    (function loop() {\n      setTimeout(function () {\n        if (!document.hidden && !btn._nvHover && btn._nvMood !== 'sleepy') {\n          setMood(btn, RANDOM[Math.floor(Math.random() * RANDOM.length)], rnd(1500, 2800));\n        }\n        loop();\n      }, rnd(3000, 7000));\n    })();\n  });\n\n  \/\/ \u0411\u0435\u0437 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043c\u044b\u0448\u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u00ab\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f\u00bb; \u043f\u043e\u0441\u043b\u0435 25 \u0441\u0435\u043a\u0443\u043d\u0434 \u0442\u0438\u0448\u0438\u043d\u044b \u0437\u0430\u0441\u044b\u043f\u0430\u0435\u0442\n  setInterval(function () {\n    var idle = Date.now() - lastMove;\n    orbs.forEach(function (btn) {\n      var r = btn.getBoundingClientRect();\n      if (idle > 25000 && !btn._nvHover && btn._nvMood !== 'sleepy') setMood(btn, 'sleepy', 0);\n      if (idle > 4000 && btn._nvMood !== 'sleepy') {\n        look(r.left + r.width \/ 2 + (Math.random() - .5) * 500, r.top + r.height \/ 2 + (Math.random() - .5) * 400);\n      }\n    });\n  }, 2600);\n\n  \/\/ \u0414\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430: window.novaOrb093.mood(\u044d\u043b\u0435\u043c\u0435\u043d\u0442, 'love')\n  window.novaOrb093 = { mood: setMood, moods: MOODS };\n})();\n<\/script>\n<!-- =================== \/NOVA ORB &mdash; JS =================== -->\n<\/div><p class=\"wp-block-paragraph\"><strong>The icon itself.<\/strong> It can be a soft glowing orb, like the one in our example. Alternatively, you can use a logo, mascot, icon, team member's avatar, or any other shape. The size, shape, glow, shadows, and animations are tailored to your needs, including blinking, following the cursor with its gaze, pulsing, fading in smoothly, and responding on hover.<\/p><p class=\"wp-block-paragraph\"><strong>Colors and style.<\/strong> The color palette, gradients, fonts, rounded corners, and shadows are adapted to match your brand identity. The assistant looks like part of your website rather than a third-party widget.<\/p><p class=\"wp-block-paragraph\"><strong>Chat pop-up window.<\/strong> We customize the entire window, including the header, message colors, input field, buttons, dimensions, and opening behavior. On mobile devices, the chat can expand to fill the entire screen.<\/p><p class=\"wp-block-paragraph\"><strong>Placement.<\/strong> The icon doesn't have to sit in the bottom-right corner. It can be placed on the left, in the header, within a section on the page, next to a product, or anywhere else on the website.<\/p><p class=\"wp-block-paragraph\"><strong>Copy and personality.<\/strong> The greeting, tone of voice (formal, friendly, or humorous), prompts, and labels are tailored to your audience. Each website language has its own copy.<\/p><p class=\"wp-block-paragraph\"><strong>A communication style tailored to your industry.<\/strong> You can define the assistant's role and rules: how to address customers, what to offer first, and which topics to avoid.<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Need a professional corporate chatbot for a bank or a colorful mascot for a toy store? Describe your project, and I'll propose a solution.<\/p>\n<\/blockquote><h3 class=\"wp-block-heading\">Results<\/h3><p class=\"wp-block-paragraph\">Visitors get instant answers in their own language, any time of day. Your team is freed from routine tasks. The business owner can see which issues matter most to customers and receive inquiries without unnecessary forms.<\/p><h3 class=\"wp-block-heading\">Want an assistant like this on your website?<\/h3><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">I'll integrate an AI assistant into your website, upload a knowledge base, index your website for the AI agent, and customize its tone of voice for customer interactions. I can also provide ongoing technical support for your website.<\/p>\n<\/blockquote><p class=\"wp-block-paragraph\">You can submit a request to create a unique assistant for your business <a href=\"https:\/\/sdwski.com\/ru\/contact\"><strong>here<\/strong><\/a>.<\/p><div data-sdwski_com-html-block=\"1\">\n<!--\n  &#1041;&#1083;&#1086;&#1082; &#1094;&#1077;&#1085; &#1076;&#1083;&#1103; &#1095;&#1072;&#1090;-&#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; SDWSKi_AI_Chat (&#1088;&#1072;&#1079;&#1084;&#1077;&#1090;&#1082;&#1072; &#1080; &#1082;&#1083;&#1072;&#1089;&#1089;&#1099; &#1090;&#1077; &#1078;&#1077;, &#1095;&#1090;&#1086; &#1074; &#1073;&#1083;&#1086;&#1082;&#1077; &#1094;&#1077;&#1085; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072;-&#1087;&#1077;&#1088;&#1077;&#1074;&#1086;&#1076;&#1095;&#1080;&#1082;&#1072;).\n  &#1063;&#1077;&#1090;&#1099;&#1088;&#1077; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;&#1072; (&#1094;&#1077;&#1085;&#1099; &#1073;&#1077;&#1079; &#1053;&#1044;&#1057;, &#1095;&#1077;&#1088;&#1085;&#1086;&#1074;&#1080;&#1082;):\n    1. &#1058;&#1086;&#1083;&#1100;&#1082;&#1086; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; ............................ &euro;250  (&#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; 2 &#1075;&#1086;&#1076;&#1072;)\n    2. &#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; ........... &euro;550  (&#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; 2 &#1075;&#1086;&#1076;&#1072;)\n    3. &#1055;&#1086;&#1078;&#1080;&#1079;&#1085;&#1077;&#1085;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1089; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1086;&#1081; ........ &euro;2000 (&#1086;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1080; &#1087;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1073;&#1077;&#1079; &#1089;&#1088;&#1086;&#1082;&#1072;)\n    4. &#1048;&#1085;&#1076;&#1080;&#1074;&#1080;&#1076;&#1091;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1072; &#1087;&#1086;&#1076; &#1073;&#1080;&#1079;&#1085;&#1077;&#1089; ..... &euro;3500 (&#1073;&#1077;&#1089;&#1089;&#1088;&#1086;&#1095;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103;)\n  &#1044;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072; &laquo;&#1040;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure + &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048;&raquo; ........... + &euro;150 (&#1074; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;&#1072;&#1093; 2, 3 &#1080; 4):\n    &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 2 &rarr; &euro;550 \/ &euro;700,  &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 3 &rarr; &euro;2000 \/ &euro;2150,  &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 4 &rarr; &euro;3500 \/ &euro;3650\n  &#1043;&#1076;&#1077; &#1084;&#1077;&#1085;&#1103;&#1090;&#1100; &#1094;&#1077;&#1085;&#1099;: data-toggle-default \/ data-toggle-checked &#1080; &#1090;&#1077;&#1082;&#1089;&#1090; &#1074;&#1085;&#1091;&#1090;&#1088;&#1080; <span data-toggle-item>.\n  &#1057;&#1089;&#1099;&#1083;&#1082;&#1072; &#1082;&#1085;&#1086;&#1087;&#1082;&#1080; &laquo;&#1050;&#1091;&#1087;&#1080;&#1090;&#1100; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&raquo; &#1089;&#1077;&#1081;&#1095;&#1072;&#1089; &#1074;&#1077;&#1076;&#1105;&#1090; &#1085;&#1072; \/contact: &#1087;&#1086;&#1076;&#1089;&#1090;&#1072;&#1074;&#1100;&#1090;&#1077; &#1089;&#1074;&#1086;&#1102; &#1089;&#1089;&#1099;&#1083;&#1082;&#1091; Stripe &#1076;&#1083;&#1103; &#1101;&#1090;&#1086;&#1075;&#1086; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072;.\n-->\n<div class=\"dark relative z-0\">\n\n    <div class=\"pointer-events-none overflow-x-clip absolute inset-0 -z-1 lg:px-2\">\n        <div class=\"size-full lg:rounded-32 bg-section-1\"><\/div>\n\n        <div class=\"absolute -z-1 pointer-events-none top-0 right-0 z-2 translate-x-2\/5 -translate-y-1\/2\">\n            <div class=\"size-[600px] md:size-[1000px] xl:size-[1940px] bg-[radial-gradient(circle,rgba(0,0,0,0.15)_0%,rgba(0,0,0,0)_65%)] dark:bg-[radial-gradient(circle,rgba(255,255,255,0.10)_0%,rgba(255,255,255,0)_65%)]\"><\/div>\n        <\/div>\n        <div class=\"absolute -z-1 pointer-events-none bottom-0 left-0 z-2 -translate-x-1\/2 translate-y-1\/2\">\n            <div class=\"size-[600px] md:size-[1000px] xl:size-[1940px] bg-[radial-gradient(circle,rgba(0,0,0,0.15)_0%,rgba(0,0,0,0)_65%)] dark:bg-[radial-gradient(circle,rgba(255,255,255,0.10)_0%,rgba(255,255,255,0)_65%)]\"><\/div>\n        <\/div>\n    <\/div>\n\n\n    <!-- Section start -->\n    <section class=\"pt-section-lg pb-section-md\">\n        <div class=\"container\">\n\n            <!-- SectionTitle start -->\n            <div class=\"grid-main\">\n\n                <div class=\"col-span-full lg:col-span-3\">\n                    <div class=\"flex items-center gap-1 sm:gap-2 lg:pt-4 mb-5 xl:mb-0\">\n                        <div class=\"size-1 sm:size-1.5 rounded-full bg-current opacity-40\"><\/div>\n                        <div class=\"text-12 md:text-14 leading-120 tracking-2 font-medium uppercase text-current opacity-50\">\n                            &#1063;&#1045;&#1058;&#1067;&#1056;&#1045; &#1057;&#1055;&#1054;&#1057;&#1054;&#1041;&#1040; &#1055;&#1054;&#1051;&#1059;&#1063;&#1048;&#1058;&#1068; &#1055;&#1051;&#1040;&#1043;&#1048;&#1053;\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"col-span-full md:col-span-9 lg:col-span-7\">\n                    <h2 class=\"text-60 sm:text-72 md:text-80 lg:text-100 xl:text-120\">\n                        &#1062;&#1077;&#1085;&#1099;\n                    <\/h2>\n                <\/div>\n\n                <div class=\"col-span-full md:col-span-3 lg:col-span-2\">\n                    <div class=\"flex md:justify-end max-lg:items-end h-full pt-6 md:pt-0 xl:pt-4\">\n                        <div class=\"text-10 md:text-12 leading-100 tracking-2 font-medium\">\n                            SDWSKi\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n            <!-- SectionTitle end -->\n\n\n            <!-- &#1055;&#1077;&#1088;&#1077;&#1082;&#1083;&#1102;&#1095;&#1072;&#1090;&#1077;&#1083;&#1100; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;&#1086;&#1074; -->\n            <div data-anim=\"slide-up delay-1\" class=\"grid-main pt-5 sm:pt-10 lg:pt-20 xl:pt-15\">\n                <div class=\"col-span-full xl:col-[4\/-1]\">\n                    <div class=\"toggleGroup\" data-price-switch=\"\" data-toggle-group=\"pricing\">\n                        <div class=\"relative flex\">\n                            <div class=\"toggleGroup__thumb\" data-price-switch-thumb=\"\"><\/div>\n\n                            <label class=\"toggleGroup__item is-active\" data-price-switch-item=\"\" data-cursor=\"\">\n                                <input class=\"sr-only\" type=\"radio\" name=\"pricingOption\" value=\"Per Project\" checked>\n                                &#1058;&#1086;&#1083;&#1100;&#1082;&#1086; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;\n                            <\/label><label class=\"toggleGroup__item\" data-price-switch-item=\"\" data-cursor=\"\">\n                                <input class=\"sr-only\" type=\"radio\" name=\"pricingOption\" value=\"Monthly\">\n                                &#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;\n                            <\/label><label class=\"toggleGroup__item\" data-price-switch-item=\"\" data-cursor=\"\">\n                                <input class=\"sr-only\" type=\"radio\" name=\"pricingOption\" value=\"Lifetime\">\n                                &#1055;&#1086;&#1078;&#1080;&#1079;&#1085;&#1077;&#1085;&#1085;&#1086;\n                            <\/label><label class=\"toggleGroup__item\" data-price-switch-item=\"\" data-cursor=\"\">\n                                <input class=\"sr-only\" type=\"radio\" name=\"pricingOption\" value=\"Custom\">\n                                &#1055;&#1086;&#1076; &#1082;&#1083;&#1102;&#1095;\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n\n            <div data-anim=\"slide-up delay-1\" class=\"grid-main pt-10\">\n\n                <!-- ============ &#1042;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 1: &#1090;&#1086;&#1083;&#1100;&#1082;&#1086; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; (&#1073;&#1077;&#1079; &#1076;&#1086;&#1073;&#1072;&#1074;&#1086;&#1082;) ============ -->\n                <div class=\"grid-main gap-1 drop-shadow-card-1 col-span-full row-start-1 transition-all duration-400\" data-toggle-group-target=\"pricing\" data-toggle-group-option=\"Per Project\" data-toggle-group-class=\"opacity-0 pointer-events-none\">\n\n                    <div class=\"col-span-full\">\n                        <div class=\"flex flex-col rounded-24 bg-card-1\">\n\n                            <div class=\"p-6 md:p-8 lg:px-10\">\n                                <div class=\"flex justify-between items-center font-medium leading-100 -tracking-2\">\n                                    <div class=\"text-16 sm:text-20\">\n                                        &#1050;&#1091;&#1087;&#1080;&#1090;&#1100; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1080;&#1090;&#1100; &#1089;&#1072;&#1084;&#1086;&#1084;&#1091;\n                                    <\/div>\n                                    <div class=\"size-1.5 rounded-full bg-current\"><\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"w-full h-px bg-line-1\"><\/div>\n\n                            <div class=\"p-6 py-7 md:p-8 lg:p-10\">\n                                <div class=\"grid sm:grid-cols-[0.8fr_1fr] sm:gap-x-10 md:gap-x-20 2xl:gap-x-45\">\n                                    <div>\n                                        <div class=\"flex items-end gap-1\">\n                                            <span class=\"relative whitespace-nowrap text-40 lg:text-56 leading-100 font-medium -tracking-2\">&euro;250<\/span>\n                                            <span class=\"text-content-1 ml-0.5\">+ &#1053;&#1044;&#1057; (21 %)<\/span>\n                                        <\/div>\n\n                                        <p class=\"leading-150 mt-5 md:mt-8\">\n                                            &#1054;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1074; &#1090;&#1077;&#1095;&#1077;&#1085;&#1080;&#1077; &#1076;&#1074;&#1091;&#1093; &#1083;&#1077;&#1090;. &#1042;&#1099; &#1087;&#1086;&#1083;&#1091;&#1095;&#1072;&#1077;&#1090;&#1077; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; &#1089; &#1080;&#1085;&#1089;&#1090;&#1088;&#1091;&#1082;&#1094;&#1080;&#1077;&#1081; &#1080; &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1072;&#1077;&#1090;&#1077; &#1077;&#1075;&#1086; &#1089;&#1072;&#1084;&#1080;. &#1053;&#1091;&#1078;&#1077;&#1085; &#1089;&#1086;&#1073;&#1089;&#1090;&#1074;&#1077;&#1085;&#1085;&#1099;&#1081; &#1082;&#1083;&#1102;&#1095; Microsoft Azure OpenAI.\n                                        <\/p>\n                                    <\/div>\n\n                                    <div class=\"flex flex-col gap-1 sm:gap-2 mt-8 sm:mt-0\">\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1083;&#1072;&#1075;&#1080;&#1085; SDWSKi_AI_Chat &#1080; &#1080;&#1085;&#1089;&#1090;&#1088;&#1091;&#1082;&#1094;&#1080;&#1103;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1051;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1085;&#1072; 2 &#1075;&#1086;&#1076;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1054;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1074; &#1090;&#1077;&#1095;&#1077;&#1085;&#1080;&#1077; 2 &#1083;&#1077;&#1090;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1063;&#1072;&#1090;-&#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090; &#1089; &#1087;&#1086;&#1080;&#1089;&#1082;&#1086;&#1084; &#1087;&#1086; &#1084;&#1072;&#1090;&#1077;&#1088;&#1080;&#1072;&#1083;&#1072;&#1084; &#1074;&#1072;&#1096;&#1077;&#1075;&#1086; &#1089;&#1072;&#1081;&#1090;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1056;&#1072;&#1073;&#1086;&#1090;&#1072; &#1095;&#1077;&#1088;&#1077;&#1079; Microsoft Azure OpenAI<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1053;&#1072;&#1083;&#1080;&#1095;&#1080;&#1077; &#1090;&#1086;&#1074;&#1072;&#1088;&#1086;&#1074; &#1080; &#1089;&#1090;&#1072;&#1090;&#1091;&#1089; &#1079;&#1072;&#1082;&#1072;&#1079;&#1086;&#1074; WooCommerce<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1059;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072;: &#1089;&#1072;&#1084;&#1086;&#1089;&#1090;&#1086;&#1103;&#1090;&#1077;&#1083;&#1100;&#1085;&#1086;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1054;&#1090;&#1074;&#1077;&#1090;&#1099; &#1085;&#1072; &#1074;&#1086;&#1087;&#1088;&#1086;&#1089;&#1099; &#1087;&#1086; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1091; [7 &#1076;&#1085;&#1077;&#1081;]<\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"max-sm:order-2 self-end max-w-[36ch] text-12 uppercase leading-150 tracking-2 text-content-1 mt-8 lg:mt-0\">\n                                        &#1044;&#1051;&#1071; &#1058;&#1045;&#1061;, &#1050;&#1058;&#1054; &#1043;&#1054;&#1058;&#1054;&#1042; &#1053;&#1040;&#1057;&#1058;&#1056;&#1054;&#1048;&#1058;&#1068; &#1057;&#1040;&#1052;&#1054;&#1057;&#1058;&#1054;&#1071;&#1058;&#1045;&#1051;&#1068;&#1053;&#1054;\n                                    <\/div>\n\n                                    <a href=\"https:\/\/sdwski.com\/contact\" target=\"_blank\" class=\"button whitespace-nowrap hover-textSlide -lg -solid -button-type-1 mt-10 md:mt-15 lg:mt-20\">\n                                        <span class=\"hover-textSlide__wrap\">\n                                            <span class=\"hover-textSlide__text\">&#1050;&#1091;&#1087;&#1080;&#1090;&#1100; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;<\/span>\n                                        <\/span>\n                                        <span class=\"hover-textSlide__dot size-1.5 md:size-2 rounded-full bg-current\"><\/span>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <!-- ============ &#1042;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 2: &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; (+ &#1076;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072; Azure) ============ -->\n                <div class=\"grid-main gap-1 drop-shadow-card-1 col-span-full row-start-1 transition-all duration-400 opacity-0 pointer-events-none\" data-toggle-group-target=\"pricing\" data-toggle-group-option=\"Monthly\" data-toggle-group-class=\"opacity-0 pointer-events-none\">\n\n                    <!-- &#1044;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072;: &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure + &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048; -->\n                    <div class=\"col-span-full lg:col-span-3 order-2 lg:order-1\">\n                        <div class=\"flex lg:flex-col max-md:flex-col justify-between h-full rounded-24 bg-card-1 p-6 py-7 md:p-8 lg:p-10\">\n\n                            <div>\n                                <h3 class=\"text-18 md:text-20 font-medium\">\n                                    &#1040;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048;\n                                <\/h3>\n\n                                <div class=\"max-w-[340px] leading-150 text-body-1 mt-4 lg:mt-6\">\n                                    &#1053;&#1077;&#1090; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090;&#1072; Microsoft Azure? &#1057;&#1086;&#1079;&#1076;&#1072;&#1084; &#1077;&#1075;&#1086;, &#1088;&#1072;&#1079;&#1074;&#1077;&#1088;&#1085;&#1091; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1076;&#1083;&#1103; &#1095;&#1072;&#1090;&#1072; &#1080; &#1087;&#1086;&#1080;&#1089;&#1082;&#1072; &#1087;&#1086; &#1089;&#1072;&#1081;&#1090;&#1091;, &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1091; &#1082; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1091; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1102; &#1083;&#1080;&#1084;&#1080;&#1090;&#1099; &#1088;&#1072;&#1089;&#1093;&#1086;&#1076;&#1086;&#1074; &#1089; &#1086;&#1087;&#1086;&#1074;&#1077;&#1097;&#1077;&#1085;&#1080;&#1103;&#1084;&#1080;. &#1054;&#1087;&#1083;&#1072;&#1090;&#1072; &#1089;&#1072;&#1084;&#1080;&#1093; &#1089;&#1077;&#1088;&#1074;&#1080;&#1089;&#1086;&#1074; Azure &#1080;&#1076;&#1105;&#1090; &#1086;&#1090;&#1076;&#1077;&#1083;&#1100;&#1085;&#1086;, &#1087;&#1086; &#1080;&#1093; &#1090;&#1072;&#1088;&#1080;&#1092;&#1072;&#1084;.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"flex flex-wrap items-center gap-5 max-md:mt-8 lg:mt-12\">\n                                <div class=\"text-20 md:text-28 font-medium -tracking-2\">\n                                    + &euro;150\n                                <\/div>\n\n                                <label class=\"switch\" data-cursor=\"\" data-toggle-name=\"pricing2\">\n                                    <span class=\"relative\">\n                                        <input type=\"checkbox\" class=\"sr-only\" aria-label=\"&#1044;&#1086;&#1073;&#1072;&#1074;&#1080;&#1090;&#1100; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1088;&#1072;&#1079;&#1074;&#1105;&#1088;&#1090;&#1099;&#1074;&#1072;&#1085;&#1080;&#1077; &#1084;&#1086;&#1076;&#1077;&#1083;&#1077;&#1081; &#1048;&#1048;\">\n                                        <span class=\"switch__item\"><\/span>\n                                    <\/span>\n                                <\/label>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                    <!-- &#1054;&#1089;&#1085;&#1086;&#1074;&#1085;&#1072;&#1103; &#1082;&#1072;&#1088;&#1090;&#1086;&#1095;&#1082;&#1072; -->\n                    <div class=\"col-span-full lg:col-span-9 order-1 lg:order-2\">\n                        <div class=\"flex flex-col h-full rounded-24 bg-card-1\">\n\n                            <div class=\"p-6 md:p-8 lg:px-10\">\n                                <div class=\"flex justify-between items-center font-medium leading-100 -tracking-2\">\n                                    <div class=\"text-16 sm:text-20\">\n                                        &#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;, &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; &#1080; &#1072;&#1076;&#1072;&#1087;&#1090;&#1072;&#1094;&#1080;&#1103; &#1087;&#1086;&#1076; &#1087;&#1088;&#1086;&#1077;&#1082;&#1090;\n                                    <\/div>\n                                    <div class=\"size-1.5 rounded-full bg-current\"><\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"w-full h-px bg-line-1\"><\/div>\n\n                            <div class=\"flex-1 p-6 py-7 md:p-8 lg:p-10\">\n                                <div class=\"grid h-full sm:grid-cols-[0.8fr_1fr] sm:gap-x-10 md:gap-x-20 2xl:gap-x-45\">\n                                    <div>\n                                        <div class=\"flex items-end gap-1\">\n                                            <span class=\"relative whitespace-nowrap text-40 lg:text-56 leading-100 font-medium -tracking-2\" data-toggle-target=\"pricing2\" data-toggle-default=\"&euro;550\" data-toggle-checked=\"&euro;700\" data-toggle-animate=\"\"><span data-toggle-item=\"\" aria-label=\"&euro;550\">&euro;550<\/span><\/span>\n                                            <span class=\"text-content-1 ml-0.5\">\/ &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1085;&#1072; 2 &#1075;&#1086;&#1076;&#1072;<\/span>\n                                        <\/div>\n\n                                        <p class=\"leading-150 mt-5 md:mt-8\">\n                                            &#1051;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1085;&#1072; 2 &#1075;&#1086;&#1076;&#1072; &#1080; &#1086;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1074; &#1090;&#1077;&#1095;&#1077;&#1085;&#1080;&#1077; &#1089;&#1088;&#1086;&#1082;&#1072; &#1076;&#1077;&#1081;&#1089;&#1090;&#1074;&#1080;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1080;. &#1071; &#1089;&#1072;&#1084; &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1083;&#1102; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;, &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1091; &#1048;&#1048;, &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1102; &#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090;&#1072; &#1087;&#1086;&#1076; &#1074;&#1072;&#1096; &#1087;&#1088;&#1086;&#1077;&#1082;&#1090; &#1080; &#1087;&#1088;&#1086;&#1074;&#1077;&#1088;&#1102;, &#1095;&#1090;&#1086; &#1074;&#1089;&#1105; &#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1077;&#1090;. &#1042;&#1072;&#1084; &#1086;&#1089;&#1090;&#1072;&#1105;&#1090;&#1089;&#1103; &#1076;&#1072;&#1090;&#1100; &#1076;&#1086;&#1089;&#1090;&#1091;&#1087; &#1082; &#1089;&#1072;&#1081;&#1090;&#1091;.\n                                        <\/p>\n                                    <\/div>\n\n                                    <div class=\"flex flex-col gap-1 sm:gap-2 mt-8 sm:mt-0\">\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1083;&#1072;&#1075;&#1080;&#1085; SDWSKi_AI_Chat<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1051;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1085;&#1072; 2 &#1075;&#1086;&#1076;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1054;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1074; &#1090;&#1077;&#1095;&#1077;&#1085;&#1080;&#1077; 2 &#1083;&#1077;&#1090;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1059;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072; &#1085;&#1072; &#1074;&#1072;&#1096; &#1089;&#1072;&#1081;&#1090; &#1080; &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1077;&#1085;&#1080;&#1077; Azure OpenAI<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1048;&#1085;&#1076;&#1077;&#1082;&#1089;&#1072;&#1094;&#1080;&#1103; &#1084;&#1072;&#1090;&#1077;&#1088;&#1080;&#1072;&#1083;&#1086;&#1074; &#1089;&#1072;&#1081;&#1090;&#1072; &#1080; &#1090;&#1086;&#1074;&#1072;&#1088;&#1086;&#1074;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1053;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; WooCommerce: &#1085;&#1072;&#1083;&#1080;&#1095;&#1080;&#1077; &#1090;&#1086;&#1074;&#1072;&#1088;&#1086;&#1074;, &#1089;&#1090;&#1072;&#1090;&#1091;&#1089; &#1079;&#1072;&#1082;&#1072;&#1079;&#1086;&#1074;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1053;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; &#1103;&#1079;&#1099;&#1082;&#1086;&#1074;, &#1087;&#1088;&#1080;&#1074;&#1077;&#1090;&#1089;&#1090;&#1074;&#1080;&#1103; &#1080; &#1089;&#1073;&#1086;&#1088;&#1072; &#1079;&#1072;&#1103;&#1074;&#1086;&#1082;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1040;&#1076;&#1072;&#1087;&#1090;&#1072;&#1094;&#1080;&#1103; &#1074;&#1080;&#1076;&#1078;&#1077;&#1090;&#1072; &#1087;&#1086;&#1076; &#1076;&#1080;&#1079;&#1072;&#1081;&#1085; &#1089;&#1072;&#1081;&#1090;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1088;&#1086;&#1074;&#1077;&#1088;&#1082;&#1072; &#1086;&#1090;&#1074;&#1077;&#1090;&#1086;&#1074; &#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090;&#1072; &#1085;&#1072; &#1082;&#1083;&#1102;&#1095;&#1077;&#1074;&#1099;&#1093; &#1074;&#1086;&#1087;&#1088;&#1086;&#1089;&#1072;&#1093;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1086;&#1089;&#1083;&#1077; &#1079;&#1072;&#1087;&#1091;&#1089;&#1082;&#1072; [14 &#1076;&#1085;&#1077;&#1081;]<\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"max-sm:order-2 self-end max-w-[36ch] text-12 uppercase leading-150 tracking-2 text-content-1 mt-8 lg:mt-0\">\n                                        &#1043;&#1054;&#1058;&#1054;&#1042;&#1067;&#1049; &#1056;&#1045;&#1047;&#1059;&#1051;&#1068;&#1058;&#1040;&#1058;\n                                    <\/div>\n\n                                    <a href=\"https:\/\/sdwski.com\/contact\" class=\"button whitespace-nowrap hover-textSlide -lg -solid -button-type-1 mt-10 md:mt-15 lg:mt-20\">\n                                        <span class=\"hover-textSlide__wrap\">\n                                            <span class=\"hover-textSlide__text\">&#1047;&#1072;&#1082;&#1072;&#1079;&#1072;&#1090;&#1100; &#1089; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1086;&#1081;<\/span>\n                                        <\/span>\n                                        <span class=\"hover-textSlide__dot size-1.5 md:size-2 rounded-full bg-current\"><\/span>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <!-- ============ &#1042;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 3: &#1087;&#1086;&#1078;&#1080;&#1079;&#1085;&#1077;&#1085;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103; &#1089; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1086;&#1081; (+ &#1076;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072; Azure) ============ -->\n                <div class=\"grid-main gap-1 drop-shadow-card-1 col-span-full row-start-1 transition-all duration-400 opacity-0 pointer-events-none\" data-toggle-group-target=\"pricing\" data-toggle-group-option=\"Lifetime\" data-toggle-group-class=\"opacity-0 pointer-events-none\">\n\n                    <!-- &#1044;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072;: &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure + &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048; -->\n                    <div class=\"col-span-full lg:col-span-3 order-2 lg:order-1\">\n                        <div class=\"flex lg:flex-col max-md:flex-col justify-between h-full rounded-24 bg-card-1 p-6 py-7 md:p-8 lg:p-10\">\n\n                            <div>\n                                <h3 class=\"text-18 md:text-20 font-medium\">\n                                    &#1040;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048;\n                                <\/h3>\n\n                                <div class=\"max-w-[340px] leading-150 text-body-1 mt-4 lg:mt-6\">\n                                    &#1053;&#1077;&#1090; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090;&#1072; Microsoft Azure? &#1057;&#1086;&#1079;&#1076;&#1072;&#1084; &#1077;&#1075;&#1086;, &#1088;&#1072;&#1079;&#1074;&#1077;&#1088;&#1085;&#1091; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1076;&#1083;&#1103; &#1095;&#1072;&#1090;&#1072; &#1080; &#1087;&#1086;&#1080;&#1089;&#1082;&#1072; &#1087;&#1086; &#1089;&#1072;&#1081;&#1090;&#1091;, &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1091; &#1082; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1091; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1102; &#1083;&#1080;&#1084;&#1080;&#1090;&#1099; &#1088;&#1072;&#1089;&#1093;&#1086;&#1076;&#1086;&#1074; &#1089; &#1086;&#1087;&#1086;&#1074;&#1077;&#1097;&#1077;&#1085;&#1080;&#1103;&#1084;&#1080;. &#1054;&#1087;&#1083;&#1072;&#1090;&#1072; &#1089;&#1072;&#1084;&#1080;&#1093; &#1089;&#1077;&#1088;&#1074;&#1080;&#1089;&#1086;&#1074; Azure &#1080;&#1076;&#1105;&#1090; &#1086;&#1090;&#1076;&#1077;&#1083;&#1100;&#1085;&#1086;, &#1087;&#1086; &#1080;&#1093; &#1090;&#1072;&#1088;&#1080;&#1092;&#1072;&#1084;.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"flex flex-wrap items-center gap-5 max-md:mt-8 lg:mt-12\">\n                                <div class=\"text-20 md:text-28 font-medium -tracking-2\">\n                                    + &euro;150\n                                <\/div>\n\n                                <label class=\"switch\" data-cursor=\"\" data-toggle-name=\"pricing3\">\n                                    <span class=\"relative\">\n                                        <input type=\"checkbox\" class=\"sr-only\" aria-label=\"&#1044;&#1086;&#1073;&#1072;&#1074;&#1080;&#1090;&#1100; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1088;&#1072;&#1079;&#1074;&#1105;&#1088;&#1090;&#1099;&#1074;&#1072;&#1085;&#1080;&#1077; &#1084;&#1086;&#1076;&#1077;&#1083;&#1077;&#1081; &#1048;&#1048;\">\n                                        <span class=\"switch__item\"><\/span>\n                                    <\/span>\n                                <\/label>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                    <!-- &#1054;&#1089;&#1085;&#1086;&#1074;&#1085;&#1072;&#1103; &#1082;&#1072;&#1088;&#1090;&#1086;&#1095;&#1082;&#1072; -->\n                    <div class=\"col-span-full lg:col-span-9 order-1 lg:order-2\">\n                        <div class=\"flex flex-col h-full rounded-24 bg-card-1\">\n\n                            <div class=\"p-6 md:p-8 lg:px-10\">\n                                <div class=\"flex justify-between items-center font-medium leading-100 -tracking-2\">\n                                    <div class=\"text-16 sm:text-20\">\n                                        &#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; + &#1087;&#1086;&#1078;&#1080;&#1079;&#1085;&#1077;&#1085;&#1085;&#1099;&#1077; &#1086;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1080; &#1087;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072;\n                                    <\/div>\n                                    <div class=\"size-1.5 rounded-full bg-current\"><\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"w-full h-px bg-line-1\"><\/div>\n\n                            <div class=\"flex-1 p-6 py-7 md:p-8 lg:p-10\">\n                                <div class=\"grid h-full sm:grid-cols-[0.8fr_1fr] sm:gap-x-10 md:gap-x-20 2xl:gap-x-45\">\n                                    <div>\n                                        <div class=\"flex items-end gap-1\">\n                                            <span class=\"relative whitespace-nowrap text-40 lg:text-56 leading-100 font-medium -tracking-2\" data-toggle-target=\"pricing3\" data-toggle-default=\"&euro;2000\" data-toggle-checked=\"&euro;2150\" data-toggle-animate=\"\"><span data-toggle-item=\"\" aria-label=\"&euro;2000\">&euro;2000<\/span><\/span>\n                                            <span class=\"text-content-1 ml-0.5\">\/ &#1073;&#1077;&#1089;&#1089;&#1088;&#1086;&#1095;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103;<\/span>\n                                        <\/div>\n\n                                        <p class=\"leading-150 mt-5 md:mt-8\">\n                                            &#1042;&#1089;&#1105; &#1080;&#1079; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;&#1072; &laquo;&#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;&raquo;, &#1085;&#1086; &#1086;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1080; &#1087;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1073;&#1077;&#1079; &#1086;&#1075;&#1088;&#1072;&#1085;&#1080;&#1095;&#1077;&#1085;&#1080;&#1103; &#1087;&#1086; &#1089;&#1088;&#1086;&#1082;&#1091;. &#1055;&#1086;&#1076;&#1093;&#1086;&#1076;&#1080;&#1090;, &#1077;&#1089;&#1083;&#1080; &#1048;&#1048;-&#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090; &mdash; &#1074;&#1072;&#1078;&#1085;&#1072;&#1103; &#1095;&#1072;&#1089;&#1090;&#1100; &#1073;&#1080;&#1079;&#1085;&#1077;&#1089;&#1072; &#1080; &#1076;&#1086;&#1083;&#1078;&#1077;&#1085; &#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1090;&#1100; &#1075;&#1086;&#1076;&#1072;&#1084;&#1080;.\n                                        <\/p>\n                                    <\/div>\n\n                                    <div class=\"flex flex-col gap-1 sm:gap-2 mt-8 sm:mt-0\">\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1042;&#1089;&#1105; &#1080;&#1079; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;&#1072; &laquo;&#1055;&#1083;&#1072;&#1075;&#1080;&#1085; + &#1091;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;&raquo;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1041;&#1077;&#1089;&#1089;&#1088;&#1086;&#1095;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1054;&#1073;&#1085;&#1086;&#1074;&#1083;&#1077;&#1085;&#1080;&#1103; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1073;&#1077;&#1079; &#1086;&#1075;&#1088;&#1072;&#1085;&#1080;&#1095;&#1077;&#1085;&#1080;&#1103; &#1087;&#1086; &#1089;&#1088;&#1086;&#1082;&#1091;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1086;&#1089;&#1090;&#1086;&#1103;&#1085;&#1085;&#1072;&#1103; &#1087;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1059;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;, &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; &#1080; &#1072;&#1076;&#1072;&#1087;&#1090;&#1072;&#1094;&#1080;&#1103; &#1087;&#1086;&#1076; &#1087;&#1088;&#1086;&#1077;&#1082;&#1090;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1057;&#1086;&#1074;&#1084;&#1077;&#1089;&#1090;&#1080;&#1084;&#1086;&#1089;&#1090;&#1100; &#1089; &#1090;&#1077;&#1084;&#1086;&#1081; &#1080; &#1076;&#1088;&#1091;&#1075;&#1080;&#1084;&#1080; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072;&#1084;&#1080;<\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"max-sm:order-2 self-end max-w-[36ch] text-12 uppercase leading-150 tracking-2 text-content-1 mt-8 lg:mt-0\">\n                                        &#1053;&#1040;&#1044;&#1054;&#1051;&#1043;&#1054; &#1048; &#1041;&#1045;&#1047; &#1047;&#1040;&#1041;&#1054;&#1058;\n                                    <\/div>\n\n                                    <a href=\"https:\/\/sdwski.com\/contact\" class=\"button whitespace-nowrap hover-textSlide -lg -solid -button-type-1 mt-10 md:mt-15 lg:mt-20\">\n                                        <span class=\"hover-textSlide__wrap\">\n                                            <span class=\"hover-textSlide__text\">&#1047;&#1072;&#1082;&#1072;&#1079;&#1072;&#1090;&#1100; &#1087;&#1086;&#1078;&#1080;&#1079;&#1085;&#1077;&#1085;&#1085;&#1099;&#1081; &#1074;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090;<\/span>\n                                        <\/span>\n                                        <span class=\"hover-textSlide__dot size-1.5 md:size-2 rounded-full bg-current\"><\/span>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <!-- ============ &#1042;&#1072;&#1088;&#1080;&#1072;&#1085;&#1090; 4: &#1080;&#1085;&#1076;&#1080;&#1074;&#1080;&#1076;&#1091;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1072; (+ &#1076;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072; Azure) ============ -->\n                <div class=\"grid-main gap-1 drop-shadow-card-1 col-span-full row-start-1 transition-all duration-400 opacity-0 pointer-events-none\" data-toggle-group-target=\"pricing\" data-toggle-group-option=\"Custom\" data-toggle-group-class=\"opacity-0 pointer-events-none\">\n\n                    <!-- &#1044;&#1086;&#1073;&#1072;&#1074;&#1082;&#1072;: &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure + &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048; -->\n                    <div class=\"col-span-full lg:col-span-3 order-2 lg:order-1\">\n                        <div class=\"flex lg:flex-col max-md:flex-col justify-between h-full rounded-24 bg-card-1 p-6 py-7 md:p-8 lg:p-10\">\n\n                            <div>\n                                <h3 class=\"text-18 md:text-20 font-medium\">\n                                    &#1040;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1048;&#1048;\n                                <\/h3>\n\n                                <div class=\"max-w-[340px] leading-150 text-body-1 mt-4 lg:mt-6\">\n                                    &#1053;&#1077;&#1090; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090;&#1072; Microsoft Azure? &#1057;&#1086;&#1079;&#1076;&#1072;&#1084; &#1077;&#1075;&#1086;, &#1088;&#1072;&#1079;&#1074;&#1077;&#1088;&#1085;&#1091; &#1084;&#1086;&#1076;&#1077;&#1083;&#1080; &#1076;&#1083;&#1103; &#1095;&#1072;&#1090;&#1072; &#1080; &#1087;&#1086;&#1080;&#1089;&#1082;&#1072; &#1087;&#1086; &#1089;&#1072;&#1081;&#1090;&#1091;, &#1087;&#1086;&#1076;&#1082;&#1083;&#1102;&#1095;&#1091; &#1082; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1091; &#1080; &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1102; &#1083;&#1080;&#1084;&#1080;&#1090;&#1099; &#1088;&#1072;&#1089;&#1093;&#1086;&#1076;&#1086;&#1074; &#1089; &#1086;&#1087;&#1086;&#1074;&#1077;&#1097;&#1077;&#1085;&#1080;&#1103;&#1084;&#1080;. &#1054;&#1087;&#1083;&#1072;&#1090;&#1072; &#1089;&#1072;&#1084;&#1080;&#1093; &#1089;&#1077;&#1088;&#1074;&#1080;&#1089;&#1086;&#1074; Azure &#1080;&#1076;&#1105;&#1090; &#1086;&#1090;&#1076;&#1077;&#1083;&#1100;&#1085;&#1086;, &#1087;&#1086; &#1080;&#1093; &#1090;&#1072;&#1088;&#1080;&#1092;&#1072;&#1084;.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"flex flex-wrap items-center gap-5 max-md:mt-8 lg:mt-12\">\n                                <div class=\"text-20 md:text-28 font-medium -tracking-2\">\n                                    + &euro;150\n                                <\/div>\n\n                                <label class=\"switch\" data-cursor=\"\" data-toggle-name=\"pricing4\">\n                                    <span class=\"relative\">\n                                        <input type=\"checkbox\" class=\"sr-only\" aria-label=\"&#1044;&#1086;&#1073;&#1072;&#1074;&#1080;&#1090;&#1100; &#1072;&#1082;&#1082;&#1072;&#1091;&#1085;&#1090; Azure &#1080; &#1088;&#1072;&#1079;&#1074;&#1105;&#1088;&#1090;&#1099;&#1074;&#1072;&#1085;&#1080;&#1077; &#1084;&#1086;&#1076;&#1077;&#1083;&#1077;&#1081; &#1048;&#1048;\">\n                                        <span class=\"switch__item\"><\/span>\n                                    <\/span>\n                                <\/label>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                    <!-- &#1054;&#1089;&#1085;&#1086;&#1074;&#1085;&#1072;&#1103; &#1082;&#1072;&#1088;&#1090;&#1086;&#1095;&#1082;&#1072; -->\n                    <div class=\"col-span-full lg:col-span-9 order-1 lg:order-2\">\n                        <div class=\"flex flex-col h-full rounded-24 bg-card-1\">\n\n                            <div class=\"p-6 md:p-8 lg:px-10\">\n                                <div class=\"flex justify-between items-center font-medium leading-100 -tracking-2\">\n                                    <div class=\"text-16 sm:text-20\">\n                                        &#1048;&#1085;&#1076;&#1080;&#1074;&#1080;&#1076;&#1091;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103; &#1088;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1072; &#1087;&#1086;&#1076; &#1074;&#1072;&#1096; &#1073;&#1080;&#1079;&#1085;&#1077;&#1089;\n                                    <\/div>\n                                    <div class=\"size-1.5 rounded-full bg-current\"><\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"w-full h-px bg-line-1\"><\/div>\n\n                            <div class=\"flex-1 p-6 py-7 md:p-8 lg:p-10\">\n                                <div class=\"grid h-full sm:grid-cols-[0.8fr_1fr] sm:gap-x-10 md:gap-x-20 2xl:gap-x-45\">\n                                    <div>\n                                        <div class=\"flex items-end gap-1\">\n                                            <span class=\"relative whitespace-nowrap text-40 lg:text-56 leading-100 font-medium -tracking-2\" data-toggle-target=\"pricing4\" data-toggle-default=\"&euro;3500\" data-toggle-checked=\"&euro;3650\" data-toggle-animate=\"\"><span data-toggle-item=\"\" aria-label=\"&euro;3500\">&euro;3500<\/span><\/span>\n                                            <span class=\"text-content-1 ml-0.5\">\/ &#1073;&#1077;&#1089;&#1089;&#1088;&#1086;&#1095;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103;<\/span>\n                                        <\/div>\n\n                                        <p class=\"leading-150 mt-5 md:mt-8\">\n                                            &#1045;&#1089;&#1083;&#1080; &#1089;&#1090;&#1072;&#1085;&#1076;&#1072;&#1088;&#1090;&#1085;&#1099;&#1093; &#1074;&#1086;&#1079;&#1084;&#1086;&#1078;&#1085;&#1086;&#1089;&#1090;&#1077;&#1081; &#1084;&#1072;&#1083;&#1086;, &#1103; &#1076;&#1086;&#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1102; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085; &#1087;&#1086;&#1076; &#1074;&#1072;&#1096;&#1080; &#1087;&#1088;&#1086;&#1094;&#1077;&#1089;&#1089;&#1099;: &#1089;&#1074;&#1086;&#1080; &#1089;&#1094;&#1077;&#1085;&#1072;&#1088;&#1080;&#1080;, &#1080;&#1085;&#1090;&#1077;&#1075;&#1088;&#1072;&#1094;&#1080;&#1080;, &#1076;&#1080;&#1079;&#1072;&#1081;&#1085; &#1080; &#1083;&#1086;&#1075;&#1080;&#1082;&#1072; &#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090;&#1072;. &#1054;&#1073;&#1089;&#1091;&#1076;&#1080;&#1084; &#1079;&#1072;&#1076;&#1072;&#1095;&#1091;, &#1089;&#1086;&#1075;&#1083;&#1072;&#1089;&#1091;&#1077;&#1084; &#1086;&#1073;&#1098;&#1105;&#1084; &#1088;&#1072;&#1073;&#1086;&#1090; &#1080; &#1080;&#1090;&#1086;&#1075;&#1086;&#1074;&#1091;&#1102; &#1094;&#1077;&#1085;&#1091; &#1079;&#1072;&#1088;&#1072;&#1085;&#1077;&#1077;.\n                                        <\/p>\n                                    <\/div>\n\n                                    <div class=\"flex flex-col gap-1 sm:gap-2 mt-8 sm:mt-0\">\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1056;&#1072;&#1079;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1072; &#1080; &#1076;&#1086;&#1088;&#1072;&#1073;&#1086;&#1090;&#1082;&#1072; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072; &#1087;&#1086;&#1076; &#1074;&#1072;&#1096;&#1080; &#1079;&#1072;&#1076;&#1072;&#1095;&#1080;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1057;&#1074;&#1086;&#1080; &#1089;&#1094;&#1077;&#1085;&#1072;&#1088;&#1080;&#1080; &#1080; &#1080;&#1085;&#1089;&#1090;&#1088;&#1091;&#1084;&#1077;&#1085;&#1090;&#1099; &#1072;&#1089;&#1089;&#1080;&#1089;&#1090;&#1077;&#1085;&#1090;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1048;&#1085;&#1090;&#1077;&#1075;&#1088;&#1072;&#1094;&#1080;&#1080;: CRM, Telegram, &#1087;&#1086;&#1095;&#1090;&#1072;, &#1074;&#1085;&#1077;&#1096;&#1085;&#1080;&#1077; &#1089;&#1077;&#1088;&#1074;&#1080;&#1089;&#1099;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1048;&#1085;&#1076;&#1080;&#1074;&#1080;&#1076;&#1091;&#1072;&#1083;&#1100;&#1085;&#1099;&#1081; &#1076;&#1080;&#1079;&#1072;&#1081;&#1085; &#1095;&#1072;&#1090;&#1072;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1041;&#1077;&#1089;&#1089;&#1088;&#1086;&#1095;&#1085;&#1072;&#1103; &#1083;&#1080;&#1094;&#1077;&#1085;&#1079;&#1080;&#1103;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1059;&#1089;&#1090;&#1072;&#1085;&#1086;&#1074;&#1082;&#1072;, &#1085;&#1072;&#1089;&#1090;&#1088;&#1086;&#1081;&#1082;&#1072; &#1080; &#1090;&#1077;&#1089;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1080;&#1077;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1057;&#1086;&#1074;&#1084;&#1077;&#1089;&#1090;&#1080;&#1084;&#1086;&#1089;&#1090;&#1100; &#1089; &#1090;&#1077;&#1084;&#1086;&#1081; &#1080; &#1076;&#1088;&#1091;&#1075;&#1080;&#1084;&#1080; &#1087;&#1083;&#1072;&#1075;&#1080;&#1085;&#1072;&#1084;&#1080;<\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center gap-2 text-14 md:text-16\">\n                                            <div class=\"size-1.5 rounded-full bg-current\/50\"><\/div>\n                                            <div>&#1055;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1087;&#1086;&#1089;&#1083;&#1077; &#1079;&#1072;&#1087;&#1091;&#1089;&#1082;&#1072; [30 &#1076;&#1085;&#1077;&#1081;]<\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <div class=\"max-sm:order-2 self-end max-w-[36ch] text-12 uppercase leading-150 tracking-2 text-content-1 mt-8 lg:mt-0\">\n                                        &#1055;&#1054;&#1044; &#1050;&#1051;&#1070;&#1063;, &#1055;&#1054;&#1044; &#1042;&#1040;&#1064; &#1041;&#1048;&#1047;&#1053;&#1045;&#1057;\n                                    <\/div>\n\n                                    <a href=\"https:\/\/sdwski.com\/contact\" class=\"button whitespace-nowrap hover-textSlide -lg -solid -button-type-1 mt-10 md:mt-15 lg:mt-20\">\n                                        <span class=\"hover-textSlide__wrap\">\n                                            <span class=\"hover-textSlide__text\">&#1054;&#1073;&#1089;&#1091;&#1076;&#1080;&#1090;&#1100; &#1087;&#1088;&#1086;&#1077;&#1082;&#1090;<\/span>\n                                        <\/span>\n                                        <span class=\"hover-textSlide__dot size-1.5 md:size-2 rounded-full bg-current\"><\/span>\n                                    <\/a>\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n    <\/section>\n    <!-- Section end -->\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ruzi &ndash; an AI-powered chat assistant for online stores (and more). Ruzi AI is a true guardian of your website and a consultant for your business&mdash;one that responds quickly, knows your website (or product catalog), and doesn't go home at six in the evening. Visitors to your website ask the AI consultant a question and quickly receive an answer based on your content (and products) [&hellip;]<\/p>\n","protected":false},"featured_media":785,"menu_order":0,"template":"","meta":{"plinth_client":"","plinth_year":"2026","plinth_lang":"","plinth_timeline":"4 \u043d\u0435\u0434\u0435\u043b\u0438","plinth_video":"https:\/\/sdwski.com\/files\/888000.mp4","plinth_poster":"","plinth_url":"","plinth_support":"1","plinth_budget":"pro"},"project_type":[],"class_list":["post-796","project","type-project","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/project\/796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/types\/project"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/media\/785"}],"wp:attachment":[{"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/media?parent=796"}],"wp:term":[{"taxonomy":"project_type","embeddable":true,"href":"https:\/\/sdwski.com\/en\/wp-json\/wp\/v2\/project_type?post=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}