{"id":230,"date":"2025-05-29T16:06:27","date_gmt":"2025-05-29T13:06:27","guid":{"rendered":"https:\/\/mechanogurus.ru\/wordpress\/?page_id=230"},"modified":"2026-03-25T11:14:22","modified_gmt":"2026-03-25T08:14:22","slug":"pdm","status":"publish","type":"page","link":"https:\/\/mechanogurus.ru\/?page_id=230","title":{"rendered":"\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0430\u0448 \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432: \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e"},"content":{"rendered":"\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&#038;family=DM+Sans:wght@400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* =========================================================\n   MG BPMN Tool \u2014 WordPress-safe normalized block\n   Fixes: width, padding, no horizontal scroll, wider hero text\n   ========================================================= *\/\n\n\/* \u2705 Scoped box-sizing only (do NOT nuke margins\/paddings globally) *\/\n.mg-bpmn-tool,\n.mg-bpmn-tool *,\n.mg-bpmn-tool *::before,\n.mg-bpmn-tool *::after { box-sizing: border-box; }\n\n.mg-bpmn-tool{\n  \/* Theme variables *\/\n  --primary-gold:    #F2B839;\n  --primary-orange:  #E1830F;\n  --accent-gradient: linear-gradient(135deg, #F2B839 0%, #E1830F 100%);\n  --bg-dark:         #0a0a0f;\n  --bg-card:         rgba(255,255,255,0.03);\n  --bg-glass:        rgba(255,255,255,0.05);\n  --border-glass:    rgba(255,255,255,0.08);\n  --text-primary:    #ffffff;\n  --text-secondary:  rgba(255,255,255,0.7);\n  --text-muted:      rgba(255,255,255,0.4);\n\n  --bpmn-event:      #4fc3f7;\n  --bpmn-activity:   #66bb6a;\n  --bpmn-gateway:    #ffa726;\n  --bpmn-flow:       #ba68c8;\n  --bpmn-participant:#ef5350;\n  --bpmn-data:       #26c6da;\n\n  \/* Layout controls (single source of truth) *\/\n  --mg-maxw:   1400px;\n  --mg-gutter: clamp(16px, 2.2vw, 25px);\n\n  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n  color: var(--text-primary);\n  line-height: 1.6;\n  width: 100%;\n  max-width: 100%;\n  display: block;\n\n  \/* Prevent accidental overflow from inner transforms\/vw math *\/\n  overflow-x: clip;\n}\n\n\/* \u2705 Standard container = same width as your other \u201cheader-wide\u201d blocks *\/\n.mg-bpmn-tool .container{\n  width: 100%;\n  max-width: var(--mg-maxw);\n  margin: 0 auto;\n  padding-left:  var(--mg-gutter);\n  padding-right: var(--mg-gutter);\n  position: relative;\n  z-index: 1;\n}\n\n\/* \u2500\u2500 Hero \u2500\u2500 *\/\n.mg-bpmn-tool .hero{\n  padding: 40px 0 60px;\n  text-align: center;\n}\n\n.mg-bpmn-tool .hero-badge{\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--bg-glass);\n  border: 1px solid var(--border-glass);\n  border-radius: 100px;\n  font-size: 0.85rem;\n  color: var(--text-secondary);\n  margin-bottom: 24px;\n  animation: mg-bpmn-fadeup 0.6s ease-out;\n}\n\n.mg-bpmn-tool .hero-badge-dot{\n  width: 8px;\n  height: 8px;\n  background: var(--bpmn-activity);\n  border-radius: 50%;\n  animation: mg-bpmn-pulse 2s infinite;\n}\n\n@keyframes mg-bpmn-pulse{\n  0%,100%{ opacity:1; transform:scale(1); }\n  50%{ opacity:.5; transform:scale(1.2); }\n}\n\n.mg-bpmn-tool .hero h1{\n  font-size: clamp(1.6rem, 3.5vw, 3.2rem);\n  font-weight: 800;\n  line-height: 1.15;\n  margin: 0 auto 20px;\n\n  \/* \u2705 WIDER heading *\/\n  max-width: 1100px;\n\n  animation: mg-bpmn-fadeup 0.6s ease-out 0.1s both;\n}\n\n.mg-bpmn-tool .gradient-text{\n  background: var(--accent-gradient);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.mg-bpmn-tool .hero-subtitle{\n  font-size: clamp(0.95rem, 2vw, 1.25rem);\n  color: var(--text-secondary);\n  font-weight: 400;\n\n  \/* \u2705 WIDER subtitle *\/\n  max-width: 980px;\n\n  margin: 0 auto 40px;\n  animation: mg-bpmn-fadeup 0.6s ease-out 0.2s both;\n}\n\n@keyframes mg-bpmn-fadeup{\n  from{ opacity:0; transform:translateY(20px); }\n  to{ opacity:1; transform:translateY(0); }\n}\n\n\/* \u2500\u2500 Editor section \u2500\u2500 *\/\n\/* \u2705 \u201cFull-bleed feel\u201d without 100vw+padding causing horizontal scroll *\/\n.mg-bpmn-tool .editor-section{\n  width: min(100%, 100vw);\n  margin: 0 auto 60px;\n  padding-left:  var(--mg-gutter);\n  padding-right: var(--mg-gutter);\n  animation: mg-bpmn-fadeup 0.6s ease-out 0.3s both;\n}\n\n\/* \u2705 Inner editor container aligned exactly to container width *\/\n.mg-bpmn-tool .editor-container{\n  width: 100%;\n  max-width: var(--mg-maxw);\n  margin: 0 auto;\n  background: var(--bg-glass);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid var(--border-glass);\n  border-radius: 16px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mg-bpmn-tool .editor-toolbar{\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--border-glass);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  background: rgba(0,0,0,0.2);\n}\n\n.mg-bpmn-tool .editor-title{\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.mg-bpmn-tool .editor-title h2{\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0;\n}\n\n.mg-bpmn-tool .editor-status{\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  background: rgba(102,187,106,0.15);\n  border-radius: 100px;\n  font-size: 0.75rem;\n  color: var(--bpmn-activity);\n  white-space: nowrap;\n}\n\n.mg-bpmn-tool .editor-status-dot{\n  width: 6px;\n  height: 6px;\n  background: var(--bpmn-activity);\n  border-radius: 50%;\n}\n\n.mg-bpmn-tool .editor-actions{\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.mg-bpmn-tool .btn{\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 0.85rem;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;\n  text-decoration: none;\n  border: none;\n}\n\n.mg-bpmn-tool .btn-primary{\n  background: var(--accent-gradient);\n  color: var(--bg-dark);\n}\n\n.mg-bpmn-tool .btn-primary:hover{\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(242,184,57,0.3);\n}\n\n.mg-bpmn-tool .btn-secondary{\n  background: transparent;\n  color: var(--text-secondary);\n  border: 1px solid var(--border-glass);\n}\n\n.mg-bpmn-tool .btn-secondary:hover{\n  background: var(--bg-glass);\n  color: var(--text-primary);\n  border-color: var(--primary-gold);\n}\n\n.mg-bpmn-tool .btn svg{\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n\/* \u2705 Frame wrapper: stable height and no double min-height fighting *\/\n.mg-bpmn-tool .editor-frame-wrapper{\n  width: 100%;\n  background: #fff;\n  min-height: clamp(520px, 65vh, 780px);\n}\n\n.mg-bpmn-tool .editor-frame{\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  border: none;\n  display: block;\n}\n\n\/* \u2500\u2500 Reference section \u2500\u2500 *\/\n.mg-bpmn-tool .reference-section{ padding: 80px 0; }\n\n.mg-bpmn-tool .section-header{\n  text-align: center;\n  margin-bottom: 60px;\n}\n\n.mg-bpmn-tool .section-header h2{\n  font-size: clamp(1.8rem, 3vw, 2.5rem);\n  font-weight: 700;\n  margin: 0 0 16px;\n}\n\n.mg-bpmn-tool .section-header p{\n  color: var(--text-secondary);\n  font-size: 1.1rem;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n\/* \u2705 Responsive grid without overflow *\/\n.mg-bpmn-tool .ref-visual-grid{\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px;\n  margin-bottom: 48px;\n}\n\n.mg-bpmn-tool .ref-visual-card{\n  background: var(--bg-glass);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid var(--border-glass);\n  border-radius: 16px;\n  padding: 28px;\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.mg-bpmn-tool .ref-visual-card::before{\n  content:'';\n  position:absolute;\n  top:0; left:0;\n  width:4px;\n  height:100%;\n  background: var(--card-color);\n  opacity:.6;\n  transition: opacity .2s ease;\n}\n\n.mg-bpmn-tool .ref-visual-card:hover{\n  transform: translateY(-4px);\n  border-color: var(--card-color);\n  box-shadow: 0 16px 48px rgba(0,0,0,0.25);\n}\n\n.mg-bpmn-tool .ref-visual-card:hover::before{ opacity:1; }\n\n.mg-bpmn-tool .ref-visual-icon{\n  flex-shrink: 0;\n  width: 90px;\n  height: 70px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background: rgba(0,0,0,0.2);\n  border-radius: 12px;\n}\n\n.mg-bpmn-tool .ref-visual-content{ flex: 1; min-width: 0; }\n\n.mg-bpmn-tool .ref-visual-content h4{\n  font-size: 1.1rem;\n  font-weight: 700;\n  margin: 0 0 6px;\n  color: var(--text-primary);\n}\n\n.mg-bpmn-tool .ref-visual-simple{\n  font-size: 0.85rem;\n  color: var(--card-color);\n  font-weight: 600;\n  margin: 0 0 10px;\n  text-transform: uppercase;\n  letter-spacing: .5px;\n}\n\n.mg-bpmn-tool .ref-visual-desc{\n  font-size: 0.9rem;\n  color: var(--text-secondary);\n  line-height: 1.6;\n  margin: 0;\n}\n\n\/* \u2500\u2500 Tips \u2500\u2500 *\/\n.mg-bpmn-tool .ref-tips{\n  background: linear-gradient(135deg, rgba(242,184,57,0.08) 0%, rgba(225,131,15,0.05) 100%);\n  border: 1px solid rgba(242,184,57,0.2);\n  border-radius: 16px;\n  padding: 32px;\n}\n\n.mg-bpmn-tool .ref-tips-header{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-bottom:24px;\n}\n\n.mg-bpmn-tool .ref-tips-icon{ font-size: 1.5rem; }\n\n.mg-bpmn-tool .ref-tips-header h4{\n  font-size: 1.2rem;\n  font-weight: 700;\n  color: var(--primary-gold);\n  margin: 0;\n}\n\n.mg-bpmn-tool .ref-tips-grid{\n  display:grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 20px;\n}\n\n.mg-bpmn-tool .ref-tip{\n  display:flex;\n  gap:12px;\n  align-items:flex-start;\n}\n\n.mg-bpmn-tool .ref-tip-num{\n  flex-shrink:0;\n  width:28px;\n  height:28px;\n  background: var(--primary-gold);\n  color: var(--bg-dark);\n  border-radius: 50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size: .85rem;\n  font-weight: 700;\n}\n\n.mg-bpmn-tool .ref-tip p{\n  font-size: .9rem;\n  color: var(--text-secondary);\n  line-height: 1.5;\n  margin: 0;\n}\n\n.mg-bpmn-tool .ref-tip strong{ color: var(--text-primary); }\n\n\/* \u2500\u2500 How-to \u2500\u2500 *\/\n.mg-bpmn-tool .howto-section{\n  padding: 80px 0;\n  background: linear-gradient(180deg, transparent 0%, rgba(242,184,57,0.02) 50%, transparent 100%);\n}\n\n.mg-bpmn-tool .howto-grid{\n  display:grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 16px;\n  position: relative;\n}\n\n.mg-bpmn-tool .howto-grid::before{\n  content:'';\n  position:absolute;\n  top:40px;\n  left:10%;\n  right:10%;\n  height:2px;\n  background: linear-gradient(90deg, transparent, var(--border-glass), var(--primary-gold), var(--border-glass), transparent);\n  z-index:0;\n}\n\n.mg-bpmn-tool .howto-step{\n  position:relative;\n  z-index:1;\n  text-align:center;\n}\n\n.mg-bpmn-tool .howto-number{\n  width:80px;\n  height:80px;\n  margin: 0 auto 16px;\n  border: 2px solid var(--border-glass);\n  border-radius: 50%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--text-muted);\n  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;\n}\n\n.mg-bpmn-tool .howto-step:hover .howto-number{\n  border-color: var(--primary-gold);\n  color: var(--primary-gold);\n  box-shadow: 0 0 40px rgba(242,184,57,0.2);\n}\n\n.mg-bpmn-tool .howto-icon{\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  height:50px;\n  margin-bottom:16px;\n}\n\n.mg-bpmn-tool .howto-step h4{\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0 0 8px;\n}\n\n.mg-bpmn-tool .howto-step p{\n  color: var(--text-muted);\n  font-size: .85rem;\n  margin: 0;\n}\n\n\/* \u2500\u2500 CTA \u2500\u2500 *\/\n.mg-bpmn-tool .cta-section{ padding: 100px 0; }\n\n.mg-bpmn-tool .cta-card{\n  background: var(--bg-glass);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  border: 1px solid var(--border-glass);\n  border-radius: 24px;\n  padding: 60px;\n  text-align:center;\n  position:relative;\n  overflow:hidden;\n}\n\n.mg-bpmn-tool .cta-card::before{\n  content:'';\n  position:absolute;\n  top:-100px;\n  left:50%;\n  transform:translateX(-50%);\n  width:400px;\n  height:400px;\n  background: radial-gradient(circle, rgba(242,184,57,0.1) 0%, transparent 70%);\n  pointer-events:none;\n}\n\n.mg-bpmn-tool .cta-card h2{\n  font-size: clamp(1.5rem, 3vw, 2rem);\n  font-weight: 700;\n  margin: 0 0 16px;\n  position:relative;\n}\n\n.mg-bpmn-tool .cta-card p{\n  color: var(--text-secondary);\n  font-size: 1.1rem;\n  max-width: 560px;\n  margin: 0 auto 32px;\n  position:relative;\n}\n\n.mg-bpmn-tool .cta-actions{\n  display:flex;\n  gap:16px;\n  justify-content:center;\n  position:relative;\n}\n\n.mg-bpmn-tool .mg-btn-wrap{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width:100%;\n}\n\n\/* CTA fancy button *\/\n.mg-bpmn-tool .mg-cta{\n  --mg-gold:       #F2B839;\n  --mg-navy:       #1B2A4A;\n  --mg-navy-deep:  #0F1E3C;\n  --mg-cream:      #FEF4EE;\n  --btn-height:    54px;\n  --btn-radius:    30px;\n  --circle-size:   40px;\n  --circle-offset: 7px;\n  --speed:         0.45s;\n  --ease:          cubic-bezier(0.4, 0, 0.15, 1);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: var(--btn-height);\n  padding: 0 calc(var(--circle-size) + var(--circle-offset) + 14px) 0 28px;\n  border: 2px solid rgba(242,184,57,0.15);\n  border-radius: var(--btn-radius);\n  background: var(--mg-cream);\n  cursor: pointer;\n  text-decoration: none;\n  overflow: hidden;\n  font-family: 'DM Sans', sans-serif;\n  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.mg-bpmn-tool .mg-cta::before{\n  content:'';\n  position:absolute;\n  right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n  top:50%;\n  width: var(--circle-size);\n  height: var(--circle-size);\n  background: var(--mg-gold);\n  border-radius: 50%;\n  transform: translate(50%, -50%) scale(1);\n  transition: transform var(--speed) var(--ease);\n  z-index:1;\n  pointer-events:none;\n}\n\n.mg-bpmn-tool .mg-cta:hover::before{ transform: translate(50%, -50%) scale(8); }\n\n.mg-bpmn-tool .mg-cta:hover{\n  border-color: var(--mg-gold);\n  box-shadow: 0 8px 32px rgba(242,184,57,0.25), 0 2px 8px rgba(0,0,0,0.2);\n}\n\n.mg-bpmn-tool .mg-cta__text{\n  position:relative;\n  z-index:2;\n  font-size: 15px;\n  font-weight: 500;\n  color: var(--mg-navy);\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n  line-height:1;\n  transition: color var(--speed) var(--ease);\n  pointer-events:none;\n}\n\n.mg-bpmn-tool .mg-cta:hover .mg-cta__text{ color: var(--mg-navy-deep); }\n\n.mg-bpmn-tool .mg-cta__arrow{\n  position:absolute;\n  z-index:3;\n  right: var(--circle-offset);\n  top:50%;\n  transform: translateY(-50%);\n  width: var(--circle-size);\n  height: var(--circle-size);\n  border-radius: 50%;\n  background: var(--mg-gold);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  transition: background var(--speed) var(--ease);\n  pointer-events:none;\n}\n\n.mg-bpmn-tool .mg-cta:hover .mg-cta__arrow{ background: transparent; }\n\n.mg-bpmn-tool .mg-cta__arrow svg{\n  width:18px;\n  height:18px;\n  stroke: var(--mg-navy-deep);\n  stroke-width: 2.5;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transition: transform var(--speed) var(--ease);\n}\n\n.mg-bpmn-tool .mg-cta:hover .mg-cta__arrow svg{ transform: translateX(4px); }\n\n.mg-bpmn-tool .mg-cta:focus-visible{\n  outline: 3px solid var(--mg-gold);\n  outline-offset: 4px;\n}\n\n\/* \u2500\u2500 Scroll animation \u2500\u2500 *\/\n.mg-bpmn-tool .animate-on-scroll{\n  opacity:0;\n  transform: translateY(30px);\n  transition: opacity .6s ease-out, transform .6s ease-out;\n}\n\n.mg-bpmn-tool .animate-on-scroll.visible{\n  opacity:1;\n  transform: translateY(0);\n}\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media (max-width: 1200px){\n  .mg-bpmn-tool .ref-visual-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }\n  .mg-bpmn-tool .ref-tips-grid   { grid-template-columns: repeat(3, minmax(0,1fr)); }\n  .mg-bpmn-tool .howto-grid      { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }\n  .mg-bpmn-tool .howto-grid::before{ display:none; }\n}\n\n@media (max-width: 768px){\n  .mg-bpmn-tool .hero{ padding: 16px 0 28px; }\n  .mg-bpmn-tool .hero h1{ font-size: clamp(1.5rem, 6vw, 2.2rem); max-width: 100%; }\n  .mg-bpmn-tool .hero-subtitle{ font-size:.95rem; max-width: 100%; }\n\n  .mg-bpmn-tool .ref-visual-grid{ grid-template-columns: 1fr; }\n  .mg-bpmn-tool .ref-tips-grid  { grid-template-columns: 1fr; }\n\n  .mg-bpmn-tool .ref-visual-card{ flex-direction: column; align-items:center; text-align:center; }\n  .mg-bpmn-tool .ref-visual-card::before{ width:100%; height:4px; }\n\n  .mg-bpmn-tool .editor-toolbar{ flex-direction: column; align-items: stretch; }\n  .mg-bpmn-tool .editor-actions{ justify-content:center; }\n  .mg-bpmn-tool .editor-actions .btn{ flex: 1; justify-content:center; min-width: 160px; }\n\n  .mg-bpmn-tool .howto-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }\n\n  .mg-bpmn-tool .reference-section,\n  .mg-bpmn-tool .howto-section{ padding: 48px 0; }\n  .mg-bpmn-tool .cta-section{ padding: 60px 0; }\n  .mg-bpmn-tool .cta-card{ padding: 40px 24px; }\n  .mg-bpmn-tool .cta-actions{ flex-direction: column; align-items:center; }\n}\n\n@media (max-width: 480px){\n  .mg-bpmn-tool .hero{ padding: 12px 0 24px; }\n  .mg-bpmn-tool .hero h1{ font-size: clamp(1.4rem, 7vw, 1.9rem); line-height: 1.2; }\n  .mg-bpmn-tool .hero-subtitle{ font-size:.9rem; margin-bottom: 28px; }\n  .mg-bpmn-tool .hero-badge{ font-size:.7rem; padding: 6px 12px; margin-bottom:16px; }\n\n  .mg-bpmn-tool .editor-frame-wrapper{ min-height: 480px; }\n\n  .mg-bpmn-tool .ref-tips{ padding: 20px 16px; }\n  .mg-bpmn-tool .howto-grid{ grid-template-columns: 1fr; }\n\n  .mg-bpmn-tool .cta-card{ padding: 28px 16px; border-radius: 16px; }\n\n  .mg-bpmn-tool .mg-cta{\n    --btn-height: 48px;\n    --circle-size: 36px;\n    --circle-offset: 6px;\n    padding-left: 22px;\n    padding-right: calc(var(--circle-size) + var(--circle-offset) + 12px);\n  }\n  .mg-bpmn-tool .mg-cta__text{ font-size: 14px; }\n  .mg-bpmn-tool .mg-cta__arrow svg{ width:16px; height:16px; }\n}\n\n@media (hover:none){\n  .mg-bpmn-tool .ref-visual-card:hover{ transform:none; }\n  .mg-bpmn-tool .howto-step:hover .howto-number{\n    border-color: var(--border-glass);\n    color: var(--text-muted);\n    box-shadow:none;\n  }\n  .mg-bpmn-tool .mg-cta:active::before{ transform: translate(50%, -50%) scale(8); }\n  .mg-bpmn-tool .mg-cta:active{\n    border-color: var(--mg-gold);\n    box-shadow: 0 8px 32px rgba(242,184,57,0.25), 0 2px 8px rgba(0,0,0,0.2);\n  }\n  .mg-bpmn-tool .mg-cta:active .mg-cta__text{ color: var(--mg-navy-deep); }\n  .mg-bpmn-tool .mg-cta:active .mg-cta__arrow{ background: transparent; }\n  .mg-bpmn-tool .mg-cta:active .mg-cta__arrow svg{ transform: translateX(4px); }\n}\n\n@media (prefers-reduced-motion: reduce){\n  .mg-bpmn-tool .animate-on-scroll{ transition:none; }\n  .mg-bpmn-tool .hero-badge-dot{ animation:none; }\n}\n<\/style>\n\n<div class=\"mg-bpmn-tool\">\n\n  <!-- Hero -->\n  <section class=\"hero\">\n    <div class=\"container\">\n      <div class=\"hero-badge\">\n        <span class=\"hero-badge-dot\"><\/span>\n        <span>BPMN 2.0 Compliant<\/span>\n      <\/div>\n      <h1>\n        \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n        <span class=\"gradient-text\">\u0432\u0430\u0448\u0438\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432<\/span>\n      <\/h1>\n      <p class=\"hero-subtitle\">\n        \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438.\n      <\/p>\n    <\/div>\n  <\/section>\n\n  <!-- Editor -->\n  <section id=\"editor\" class=\"editor-section\">\n    <div class=\"editor-container\">\n      <div class=\"editor-toolbar\">\n        <div class=\"editor-title\">\n          <h2>BPMN \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440<\/h2>\n          <div class=\"editor-status\">\n            <span class=\"editor-status-dot\"><\/span>\n            <span>\u0413\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"editor-actions\">\n          <button class=\"btn btn-secondary\" onclick=\"mgBpmnFullscreen()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"\/>\n            <\/svg>\n            \u041d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d\n          <\/button>\n          <button class=\"btn btn-primary\" id=\"mgDownloadBpmnBtn\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M12 16l-6-6h4V4h4v6h4l-6 6zm-8 2v2h16v-2H4z\"\/>\n            <\/svg>\n            \u0421\u043a\u0430\u0447\u0430\u0442\u044c .bpmn\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"editor-frame-wrapper\">\n        <iframe\n          id=\"mgBpmnEditorFrame\"\n          class=\"editor-frame\"\n          src=\"https:\/\/mechanogurus.ru\/bpmn-editor.html\"\n          title=\"BPMN Editor\"\n        ><\/iframe>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Reference -->\n  <section id=\"reference\" class=\"reference-section\">\n    <div class=\"container\">\n      <div class=\"section-header animate-on-scroll\">\n        <h2>\u0427\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 <span class=\"gradient-text\">\u044d\u0442\u0438 \u0444\u0438\u0433\u0443\u0440\u044b?<\/span><\/h2>\n        <p>\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438<\/p>\n      <\/div>\n\n      <div class=\"ref-visual-grid\">\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#4fc3f7\">\n          <div class=\"ref-visual-icon\"><svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\"><circle cx=\"32\" cy=\"32\" r=\"24\" stroke=\"#4fc3f7\" stroke-width=\"3\" fill=\"none\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83d\ude80 \u0421\u0442\u0430\u0440\u0442<\/h4>\n            <p class=\"ref-visual-simple\">\u041f\u0443\u0441\u0442\u043e\u0439 \u043a\u0440\u0443\u0436\u043e\u043a<\/p>\n            <p class=\"ref-visual-desc\">\u041e\u0442\u0441\u044e\u0434\u0430 \u0432\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0432\u0430\u0448\u0435\u0439 \u0441\u0445\u0435\u043c\u044b \u2014 \u044d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#4fc3f7\">\n          <div class=\"ref-visual-icon\"><svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\"><circle cx=\"32\" cy=\"32\" r=\"24\" stroke=\"#4fc3f7\" stroke-width=\"4\" fill=\"#4fc3f7\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83c\udfc1 \u0424\u0438\u043d\u0438\u0448<\/h4>\n            <p class=\"ref-visual-simple\">\u0417\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u0440\u0443\u0436\u043e\u043a<\/p>\n            <p class=\"ref-visual-desc\">\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d! \u0421\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0442\u043a\u0438. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043d\u0438\u0448\u0435\u0439.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#66bb6a\">\n          <div class=\"ref-visual-icon\"><svg width=\"80\" height=\"50\" viewBox=\"0 0 80 50\"><rect x=\"4\" y=\"4\" width=\"72\" height=\"42\" rx=\"6\" stroke=\"#66bb6a\" stroke-width=\"3\" fill=\"none\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83d\udccb \u0417\u0430\u0434\u0430\u0447\u0430<\/h4>\n            <p class=\"ref-visual-simple\">\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/p>\n            <p class=\"ref-visual-desc\">\u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u0442\u043e-\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443\u00bb \u0438\u043b\u0438 \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0438\u0441\u044c\u043c\u043e\u00bb.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#ba68c8\">\n          <div class=\"ref-visual-icon\"><svg width=\"80\" height=\"40\" viewBox=\"0 0 80 40\"><line x1=\"8\" y1=\"20\" x2=\"60\" y2=\"20\" stroke=\"#ba68c8\" stroke-width=\"3\"\/><polygon points=\"72,20 58,10 58,30\" fill=\"#ba68c8\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\u27a1\ufe0f \u0421\u0442\u0440\u0435\u043b\u043a\u0430<\/h4>\n            <p class=\"ref-visual-simple\">\u041b\u0438\u043d\u0438\u044f \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439<\/p>\n            <p class=\"ref-visual-desc\">\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a: \u0447\u0442\u043e \u0438\u0434\u0451\u0442 \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e. \u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#ffa726\">\n          <div class=\"ref-visual-icon\"><svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\"><path d=\"M32 6 L58 32 L32 58 L6 32 Z\" stroke=\"#ffa726\" stroke-width=\"3\" fill=\"none\"\/><text x=\"32\" y=\"40\" fill=\"#ffa726\" font-size=\"24\" font-weight=\"bold\" text-anchor=\"middle\">\u00d7<\/text><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83d\udd00 \u0420\u0430\u0437\u0432\u0438\u043b\u043a\u0430 \u00ab\u0418\u041b\u0418\u00bb<\/h4>\n            <p class=\"ref-visual-simple\">\u0420\u043e\u043c\u0431 \u0441 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c<\/p>\n            <p class=\"ref-visual-desc\">\u0412\u044b\u0431\u043e\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445. \u041a\u0430\u043a \u043d\u0430 \u043f\u0435\u0440\u0435\u043a\u0440\u0451\u0441\u0442\u043a\u0435: \u043d\u0430\u043b\u0435\u0432\u043e \u0418\u041b\u0418 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u043d\u043e \u043d\u0435 \u043e\u0431\u0430 \u0441\u0440\u0430\u0437\u0443.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#ffa726\">\n          <div class=\"ref-visual-icon\"><svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\"><path d=\"M32 6 L58 32 L32 58 L6 32 Z\" stroke=\"#ffa726\" stroke-width=\"3\" fill=\"none\"\/><line x1=\"32\" y1=\"18\" x2=\"32\" y2=\"46\" stroke=\"#ffa726\" stroke-width=\"3\"\/><line x1=\"18\" y1=\"32\" x2=\"46\" y2=\"32\" stroke=\"#ffa726\" stroke-width=\"3\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\u26a1 \u0420\u0430\u0437\u0432\u0438\u043b\u043a\u0430 \u00ab\u0418\u00bb<\/h4>\n            <p class=\"ref-visual-simple\">\u0420\u043e\u043c\u0431 \u0441 \u043f\u043b\u044e\u0441\u043e\u043c<\/p>\n            <p class=\"ref-visual-desc\">\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0412\u0441\u0435 \u043f\u0443\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u043b \u0441\u0440\u0430\u0437\u0443.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#4fc3f7\">\n          <div class=\"ref-visual-icon\"><svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\"><circle cx=\"32\" cy=\"32\" r=\"24\" stroke=\"#4fc3f7\" stroke-width=\"2\" fill=\"none\"\/><circle cx=\"32\" cy=\"32\" r=\"18\" stroke=\"#4fc3f7\" stroke-width=\"2\" fill=\"none\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\u23f8\ufe0f \u041e\u0436\u0438\u0434\u0430\u043d\u0438\u0435<\/h4>\n            <p class=\"ref-visual-simple\">\u0414\u0432\u043e\u0439\u043d\u043e\u0439 \u043a\u0440\u0443\u0436\u043e\u043a<\/p>\n            <p class=\"ref-visual-desc\">\u041f\u0430\u0443\u0437\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435. \u0416\u0434\u0451\u043c \u0447\u0435\u0433\u043e-\u0442\u043e: \u043e\u0442\u0432\u0435\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043e\u043f\u043b\u0430\u0442\u044b, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#ef5350\">\n          <div class=\"ref-visual-icon\"><svg width=\"80\" height=\"50\" viewBox=\"0 0 80 50\"><rect x=\"4\" y=\"4\" width=\"72\" height=\"42\" rx=\"3\" stroke=\"#ef5350\" stroke-width=\"2\" fill=\"none\"\/><line x1=\"20\" y1=\"4\" x2=\"20\" y2=\"46\" stroke=\"#ef5350\" stroke-width=\"2\"\/><text x=\"12\" y=\"28\" fill=\"#ef5350\" font-size=\"10\" text-anchor=\"middle\" transform=\"rotate(-90,12,28)\">\u041e\u0442\u0434\u0435\u043b<\/text><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83d\udc65 \u0423\u0447\u0430\u0441\u0442\u043d\u0438\u043a<\/h4>\n            <p class=\"ref-visual-simple\">\u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u043f\u043e\u043b\u043e\u0441\u043e\u0439<\/p>\n            <p class=\"ref-visual-desc\">\u041a\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0438: \u043e\u0442\u0434\u0435\u043b, \u0440\u043e\u043b\u044c \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f. \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0442\u043e \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"ref-visual-card animate-on-scroll\" style=\"--card-color:#26c6da\">\n          <div class=\"ref-visual-icon\"><svg width=\"50\" height=\"64\" viewBox=\"0 0 50 64\"><path d=\"M6 6 L34 6 L44 16 L44 58 L6 58 Z\" stroke=\"#26c6da\" stroke-width=\"2\" fill=\"none\"\/><path d=\"M34 6 L34 16 L44 16\" stroke=\"#26c6da\" stroke-width=\"2\" fill=\"none\"\/><\/svg><\/div>\n          <div class=\"ref-visual-content\">\n            <h4>\ud83d\udcc4 \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/h4>\n            <p class=\"ref-visual-simple\">\u041b\u0438\u0441\u0442\u043e\u043a \u0441 \u0437\u0430\u0433\u043d\u0443\u0442\u044b\u043c \u0443\u0433\u043b\u043e\u043c<\/p>\n            <p class=\"ref-visual-desc\">\u041b\u044e\u0431\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435: \u0434\u043e\u0433\u043e\u0432\u043e\u0440, \u0437\u0430\u044f\u0432\u043a\u0430, \u043e\u0442\u0447\u0451\u0442, email. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"ref-tips animate-on-scroll\">\n        <div class=\"ref-tips-header\">\n          <span class=\"ref-tips-icon\">\ud83d\udca1<\/span>\n          <h4>\u0421\u043e\u0432\u0435\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445<\/h4>\n        <\/div>\n        <div class=\"ref-tips-grid\">\n          <div class=\"ref-tip\"><span class=\"ref-tip-num\">1<\/span><p>\u0412\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0439\u0442\u0435 \u0441 <strong>\u043f\u0443\u0441\u0442\u043e\u0433\u043e \u043a\u0440\u0443\u0436\u043a\u0430<\/strong> \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0439\u0442\u0435 <strong>\u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u043c<\/strong><\/p><\/div>\n          <div class=\"ref-tip\"><span class=\"ref-tip-num\">2<\/span><p>\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u0445\u0435\u043c\u0443 <strong>\u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e<\/strong> \u0438 <strong>\u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437<\/strong> \u2014 \u043a\u0430\u043a \u043a\u043d\u0438\u0433\u0443<\/p><\/div>\n          <div class=\"ref-tip\"><span class=\"ref-tip-num\">3<\/span><p>\u041d\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 <strong>\u0433\u043b\u0430\u0433\u043e\u043b\u0430\u043c\u0438<\/strong>: \u00ab\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u00bb, \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb, \u00ab\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c\u00bb<\/p><\/div>\n          <div class=\"ref-tip\"><span class=\"ref-tip-num\">4<\/span><p>\u041d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0439\u0442\u0435 \u2014 <strong>\u0447\u0435\u043c \u043f\u0440\u043e\u0449\u0435, \u0442\u0435\u043c \u043b\u0443\u0447\u0448\u0435<\/strong>. \u0414\u0435\u0442\u0430\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043c<\/p><\/div>\n          <div class=\"ref-tip\"><span class=\"ref-tip-num\">5<\/span><p>\u0421\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0439 BPMN-\u0444\u0430\u0439\u043b \u043c\u043e\u0436\u043d\u043e <strong>\u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c LAKI<\/strong> \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/p><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- How-to -->\n  <section id=\"howto\" class=\"howto-section\">\n    <div class=\"container\">\n      <div class=\"section-header animate-on-scroll\">\n        <h2>\u041a\u0430\u043a <span class=\"gradient-text\">\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443<\/span><\/h2>\n        <p>\u041d\u0430\u0440\u0438\u0441\u0443\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430 5 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0448\u0430\u0433\u043e\u0432<\/p>\n      <\/div>\n      <div class=\"howto-grid\">\n        <div class=\"howto-step animate-on-scroll\">\n          <div class=\"howto-number\"><span>1<\/span><\/div>\n          <div class=\"howto-icon\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"16\" stroke=\"#4fc3f7\" stroke-width=\"2\" fill=\"none\"\/><\/svg><\/div>\n          <h4>\u0421\u0442\u0430\u0440\u0442<\/h4><p>\u041f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u0440\u0443\u0436\u043e\u043a \u2014 \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430<\/p>\n        <\/div>\n        <div class=\"howto-step animate-on-scroll\">\n          <div class=\"howto-number\"><span>2<\/span><\/div>\n          <div class=\"howto-icon\"><svg width=\"50\" height=\"34\" viewBox=\"0 0 50 34\"><rect x=\"2\" y=\"2\" width=\"46\" height=\"30\" rx=\"5\" stroke=\"#66bb6a\" stroke-width=\"2\" fill=\"none\"\/><\/svg><\/div>\n          <h4>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/h4><p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u2014 \u044d\u0442\u043e \u0448\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/p>\n        <\/div>\n        <div class=\"howto-step animate-on-scroll\">\n          <div class=\"howto-number\"><span>3<\/span><\/div>\n          <div class=\"howto-icon\"><svg width=\"60\" height=\"24\" viewBox=\"0 0 60 24\"><line x1=\"4\" y1=\"12\" x2=\"48\" y2=\"12\" stroke=\"#ba68c8\" stroke-width=\"2\"\/><polygon points=\"56,12 46,6 46,18\" fill=\"#ba68c8\"\/><\/svg><\/div>\n          <h4>\u0421\u0442\u0440\u0435\u043b\u043a\u0438<\/h4><p>\u0421\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u0435 \u0448\u0430\u0433\u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u043c\u0438 \u2014 \u043f\u043e\u043a\u0430\u0436\u0438\u0442\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/p>\n        <\/div>\n        <div class=\"howto-step animate-on-scroll\">\n          <div class=\"howto-number\"><span>4<\/span><\/div>\n          <div class=\"howto-icon\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><path d=\"M20 4 L36 20 L20 36 L4 20 Z\" stroke=\"#ffa726\" stroke-width=\"2\" fill=\"none\"\/><\/svg><\/div>\n          <h4>\u0420\u0430\u0437\u0432\u0438\u043b\u043a\u0438<\/h4><p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0440\u043e\u043c\u0431\u044b \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u00ab\u0434\u0430\u00bb \u0438\u043b\u0438 \u00ab\u043d\u0435\u0442\u00bb<\/p>\n        <\/div>\n        <div class=\"howto-step animate-on-scroll\">\n          <div class=\"howto-number\"><span>5<\/span><\/div>\n          <div class=\"howto-icon\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><circle cx=\"20\" cy=\"20\" r=\"16\" stroke=\"#4fc3f7\" stroke-width=\"3\" fill=\"#4fc3f7\"\/><\/svg><\/div>\n          <h4>\u0424\u0438\u043d\u0438\u0448<\/h4><p>\u041f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u044b\u0439 \u043a\u0440\u0443\u0436\u043e\u043a \u2014 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA -->\n  <section id=\"contact\" class=\"cta-section\">\n    <div class=\"container\">\n      <div class=\"cta-card animate-on-scroll\">\n        <h2>\u041d\u0443\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439?<\/h2>\n        <p>\u041d\u0430\u0448\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 BPM-\u0441\u0438\u0441\u0442\u0435\u043c \u0438 AI-\u0430\u0433\u0435\u043d\u0442\u043e\u0432<\/p>\n        <div class=\"cta-actions\">\n          <div class=\"mg-btn-wrap\">\n            <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"mg-cta\" role=\"button\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <span class=\"mg-cta__text\">\u0421\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0430\u043c\u0438<\/span>\n              <span class=\"mg-cta__arrow\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n              <\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  function mgBpmnFullscreen() {\n    var iframe = document.getElementById('mgBpmnEditorFrame');\n    if (!iframe) return;\n    if (iframe.requestFullscreen) iframe.requestFullscreen();\n    else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen();\n    else if (iframe.msRequestFullscreen) iframe.msRequestFullscreen();\n  }\n  window.mgBpmnFullscreen = mgBpmnFullscreen;\n\n  var dlBtn = document.getElementById('mgDownloadBpmnBtn');\n  if (dlBtn) {\n    dlBtn.addEventListener('click', function () {\n      var iframe = document.getElementById('mgBpmnEditorFrame');\n      try {\n        iframe.contentWindow.postMessage({ action: 'download' }, '*');\n      } catch (e) {\n        alert('\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \"Download .bpmn\" \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430');\n      }\n    });\n  }\n\n  if ('IntersectionObserver' in window) {\n    var observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry, index) {\n        if (entry.isIntersecting) {\n          setTimeout(function () { entry.target.classList.add('visible'); }, index * 100);\n        }\n      });\n    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n\n    document.querySelectorAll('.mg-bpmn-tool .animate-on-scroll').forEach(function (el) {\n      observer.observe(el);\n    });\n  } else {\n    document.querySelectorAll('.mg-bpmn-tool .animate-on-scroll').forEach(function (el) {\n      el.classList.add('visible');\n    });\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>BPMN 2.0 Compliant \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0430\u0448\u0438\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435. \u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438. BPMN \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0413\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u041d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d \u0421\u043a\u0430\u0447\u0430\u0442\u044c .bpmn \u0427\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u044d\u0442\u0438 \u0444\u0438\u0433\u0443\u0440\u044b? \u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \ud83d\ude80 \u0421\u0442\u0430\u0440\u0442 \u041f\u0443\u0441\u0442\u043e\u0439 \u043a\u0440\u0443\u0436\u043e\u043a \u041e\u0442\u0441\u044e\u0434\u0430 \u0432\u0441\u0451 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-blank-with-header","meta":{"footnotes":""},"class_list":["post-230","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=230"}],"version-history":[{"count":26,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/230\/revisions"}],"predecessor-version":[{"id":4269,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/230\/revisions\/4269"}],"wp:attachment":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}