{"id":2378,"date":"2025-11-20T14:34:10","date_gmt":"2025-11-20T11:34:10","guid":{"rendered":"https:\/\/mechanogurus.ru\/?page_id=2378"},"modified":"2026-09-11T09:30:15","modified_gmt":"2026-09-11T06:30:15","slug":"home-page","status":"publish","type":"page","link":"https:\/\/mechanogurus.ru\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!-- ==========================================================\n     MECHANOGURUS HOMEPAGE HERO\n     WordPress Custom HTML block\n========================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link rel=\"preconnect\" href=\"https:\/\/cdnjs.cloudflare.com\" crossorigin=\"\">\n<link rel=\"preconnect\" href=\"https:\/\/cdn.jsdelivr.net\" crossorigin=\"\">\n\n<link rel=\"preload\" href=\"\/wp-content\/uploads\/2025\/06\/Economizer2.glb\" as=\"fetch\" type=\"model\/gltf-binary\" fetchpriority=\"high\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;600;700&amp;family=DM+Sans:wght@400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<script defer=\"\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\">\n<\/script>\n\n<script defer=\"\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\">\n<\/script>\n\n\n<style>\n\n\/* ==========================================================\n   RESET\n========================================================== *\/\n\n.mg-hero,\n.mg-hero * {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n\n\/* ==========================================================\n   HERO ROOT\n========================================================== *\/\n\n.mg-hero {\n  --mg-bg: #000000;\n  --mg-cream: #FEF4EE;\n  --mg-orange: #F28C00;\n  --mg-gold: #F2B839;\n  --mg-navy: #1B2A4A;\n  --mg-navy-deep: #0F1E3C;\n\n  position: relative;\n  z-index: 0;\n\n  width: 100%;\n  max-width: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  background: var(--mg-bg);\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  isolation: isolate;\n}\n\n\n\/* ==========================================================\n   MAIN CONTENT WIDTH\n========================================================== *\/\n\n.mg-hero__inner {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  padding:\n    clamp(58px, 5vw, 82px)\n    clamp(18px, 3vw, 30px)\n    0;\n}\n\n\n\/* ==========================================================\n   MAIN H1\n========================================================== *\/\n\n.mg-hero__heading-wrap {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  padding: 0 4px;\n\n  text-align: center;\n}\n\n\n.mg-hero__heading {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  \/*\n    Increased relative to previous version.\n\n    Large screens:\n    similar visual hierarchy to other homepage headings.\n  *\/\n  font-size: clamp(42px, 3.7vw, 58px);\n\n  font-weight: 700;\n\n  line-height: 1.04;\n\n  letter-spacing: -0.042em;\n\n  text-align: center;\n\n  text-wrap: balance;\n}\n\n\n.mg-hero__heading-accent {\n  color: var(--mg-orange);\n}\n\n\n\/* small orange accent *\/\n\n.mg-hero__heading::after {\n  content: \"\";\n\n  display: block;\n\n  width: 52px;\n  height: 3px;\n\n  margin: 22px auto 0;\n\n  border-radius: 99px;\n\n  background: var(--mg-orange);\n}\n\n\n\/* ==========================================================\n   3D MODEL AREA\n========================================================== *\/\n\n.mg-hero__model {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  height: clamp(430px, 48vw, 560px);\n\n  margin:\n    clamp(2px, 1vw, 10px)\n    auto\n    0;\n\n  overflow: hidden;\n\n  isolation: isolate;\n}\n\n\n\/* ==========================================================\n   WEBGL CANVAS\n========================================================== *\/\n\n#mg3d-canvas {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  opacity: 0;\n\n  outline: none;\n\n  pointer-events: none;\n\n  touch-action: pan-y pinch-zoom;\n\n  transition: opacity 0.6s ease;\n}\n\n\n#mg3d-canvas.loaded {\n  opacity: 1;\n}\n\n\n\/* ==========================================================\n   TEXT CONTRAST LAYER\n========================================================== *\/\n\n.mg-hero__service-shade {\n  position: absolute;\n\n  z-index: 3;\n\n  top: 48%;\n  left: 50%;\n\n  width: min(1050px, 115%);\n  height: 240px;\n\n  transform:\n    translate(-50%, -50%);\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse at center,\n      rgba(0,0,0,0.52) 0%,\n      rgba(0,0,0,0.25) 42%,\n      rgba(0,0,0,0) 74%\n    );\n}\n\n\n\/* ==========================================================\n   ROTATING SERVICE TEXT\n========================================================== *\/\n\n.mg-hero__service-wrap {\n  position: absolute;\n\n  z-index: 8;\n\n  top: 48%;\n  left: 50%;\n\n  width: 100%;\n  max-width: 1050px;\n\n  padding:\n    0\n    clamp(18px, 4vw, 50px);\n\n  transform:\n    translate(-50%, -50%);\n\n  text-align: center;\n\n  pointer-events: none;\n}\n\n\n.mg-hero__service {\n  margin: 0 auto;\n\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  font-size:\n    clamp(29px, 3vw, 40px);\n\n  font-weight: 700;\n\n  line-height: 1.13;\n\n  letter-spacing: -0.025em;\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  text-shadow:\n    0 2px 8px rgba(0,0,0,0.95),\n    0 6px 25px rgba(0,0,0,0.72);\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n  transition:\n    opacity 0.4s ease,\n    transform 0.4s ease;\n}\n\n\n.mg-hero__service.is-changing {\n  opacity: 0;\n\n  transform:\n    translateY(8px);\n}\n\n\n\/* ==========================================================\n   CTA POSITION\n========================================================== *\/\n\n.mg-hero__cta-wrap {\n  position: absolute;\n\n  z-index: 12;\n\n  left: 50%;\n\n  bottom:\n    clamp(34px, 4vw, 52px);\n\n  transform:\n    translateX(-50%);\n}\n\n\n\/* ==========================================================\n   CTA BUTTON\n========================================================== *\/\n\n.mg-cta {\n  --btn-height: 54px;\n  --btn-radius: 30px;\n\n  --circle-size: 40px;\n  --circle-offset: 7px;\n\n  --speed: 0.45s;\n  --ease: cubic-bezier(0.4, 0, 0.15, 1);\n\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n\n  height: var(--btn-height);\n\n  padding:\n    0\n    calc(\n      var(--circle-size) +\n      var(--circle-offset) +\n      14px\n    )\n    0\n    28px;\n\n  overflow: hidden;\n\n  border:\n    2px solid rgba(242,184,57,0.20);\n\n  border-radius:\n    var(--btn-radius);\n\n  background:\n    var(--mg-cream);\n\n  box-shadow:\n    0 8px 30px rgba(0,0,0,0.35);\n\n  cursor: pointer;\n\n  text-decoration: none;\n\n  font-family:\n    'DM Sans',\n    sans-serif;\n\n  transition:\n    border-color var(--speed) var(--ease),\n    box-shadow var(--speed) var(--ease);\n}\n\n\n.mg-cta::before {\n  content: '';\n\n  position: absolute;\n\n  z-index: 1;\n\n  right:\n    calc(\n      var(--circle-offset) +\n      var(--circle-size) \/ 2\n    );\n\n  top: 50%;\n\n  width:\n    var(--circle-size);\n\n  height:\n    var(--circle-size);\n\n  border-radius: 50%;\n\n  background:\n    var(--mg-gold);\n\n  transform:\n    translate(50%, -50%)\n    scale(1);\n\n  transition:\n    transform var(--speed) var(--ease);\n\n  pointer-events: none;\n}\n\n\n.mg-cta:hover::before {\n  transform:\n    translate(50%, -50%)\n    scale(8);\n}\n\n\n.mg-cta:hover {\n  border-color:\n    var(--mg-gold);\n\n  box-shadow:\n    0 8px 34px rgba(242,184,57,0.26),\n    0 3px 10px rgba(0,0,0,0.30);\n}\n\n\n\/* CTA text *\/\n\n.mg-cta__text {\n  position: relative;\n\n  z-index: 2;\n\n  color:\n    var(--mg-navy);\n\n  font-size: 15px;\n\n  font-weight: 500;\n\n  line-height: 1;\n\n  white-space: nowrap;\n\n  pointer-events: none;\n}\n\n\n\/* CTA arrow *\/\n\n.mg-cta__arrow {\n  position: absolute;\n\n  z-index: 3;\n\n  right:\n    var(--circle-offset);\n\n  top: 50%;\n\n  width:\n    var(--circle-size);\n\n  height:\n    var(--circle-size);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background:\n    var(--mg-gold);\n\n  transform:\n    translateY(-50%);\n\n  transition:\n    background var(--speed) var(--ease);\n\n  pointer-events: none;\n}\n\n\n.mg-cta__arrow svg {\n  width: 18px;\n  height: 18px;\n\n  fill: none;\n\n  stroke:\n    var(--mg-navy-deep);\n\n  stroke-width: 2.5;\n\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  transition:\n    transform var(--speed) var(--ease);\n}\n\n\n.mg-cta:hover .mg-cta__arrow {\n  background: transparent;\n}\n\n\n.mg-cta:hover .mg-cta__arrow svg {\n  transform:\n    translateX(4px);\n}\n\n\n.mg-cta:focus-visible {\n  outline:\n    3px solid var(--mg-gold);\n\n  outline-offset: 4px;\n}\n\n\n\/* ==========================================================\n   TAGLINE\n========================================================== *\/\n\n.mg-hero__tagline {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin:\n    clamp(5px, 1vw, 10px)\n    auto\n    0;\n\n  padding:\n    0\n    15px\n    clamp(32px, 4vw, 48px);\n\n  color:\n    rgba(254,244,238,0.88);\n\n  font-family:\n    'Roboto',\n    sans-serif;\n\n  font-size:\n    clamp(21px, 2vw, 27px);\n\n  font-weight: 400;\n\n  line-height: 1.24;\n\n  letter-spacing:\n    -0.015em;\n\n  text-align: center;\n\n  text-wrap: balance;\n}\n\n\n.mg-hero__tagline strong {\n  color:\n    var(--mg-cream);\n\n  font-weight: 500;\n}\n\n\n\/* ==========================================================\n   MODEL LOADER\n========================================================== *\/\n\n.mg3d-model-loader {\n  position: absolute;\n\n  z-index: 10;\n\n  left: 50%;\n  bottom: 8px;\n\n  transform:\n    translateX(-50%);\n\n  color:\n    rgba(254,244,238,0.70);\n\n  font-size: 12px;\n\n  text-align: center;\n\n  pointer-events: none;\n}\n\n\n.mg3d-model-loader.hidden {\n  display: none;\n}\n\n\n.mg3d-model-loader.error::before {\n  display: none;\n}\n\n\n.mg3d-model-loader::before {\n  content: \"\";\n\n  display: block;\n\n  width: 24px;\n  height: 24px;\n\n  margin:\n    0 auto 8px;\n\n  border:\n    3px solid rgba(254,244,238,0.20);\n\n  border-top-color:\n    var(--mg-gold);\n\n  border-radius: 50%;\n\n  animation:\n    mg-loader-spin\n    0.8s linear infinite;\n}\n\n\n@keyframes mg-loader-spin {\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n\/* ==========================================================\n   LARGE DESKTOP\n========================================================== *\/\n\n@media (min-width: 1281px) {\n\n  .mg-hero__heading {\n    font-size:\n      clamp(48px, 3.7vw, 58px);\n\n    max-width: 1200px;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(32px, 2.8vw, 40px);\n  }\n\n}\n\n\n\/* ==========================================================\n   LAPTOP \/ NORMAL SCREEN\n========================================================== *\/\n\n@media\n(min-width: 1025px)\nand\n(max-width: 1280px) {\n\n  .mg-hero__inner {\n    padding-top: 58px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(40px, 3.7vw, 50px);\n\n    line-height: 1.05;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(28px, 3vw, 37px);\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n========================================================== *\/\n\n@media\n(min-width: 769px)\nand\n(max-width: 1024px) {\n\n  .mg-hero__inner {\n    padding:\n      48px\n      18px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 12px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 900px;\n\n    font-size:\n      clamp(34px, 4.6vw, 44px);\n\n    line-height: 1.08;\n\n    letter-spacing:\n      -0.038em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(405px, 54vw, 500px);\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 47%;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(28px, 4vw, 37px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 40px;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n========================================================== *\/\n\n@media (max-width: 768px) {\n\n  .mg-hero__inner {\n    padding:\n      40px\n      12px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 10px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 650px;\n\n    font-size:\n      clamp(29px, 6.3vw, 38px);\n\n    line-height: 1.08;\n\n    letter-spacing:\n      -0.035em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__heading::after {\n    margin-top: 17px;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(390px, 78vw, 510px);\n\n    margin-top: 0;\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 47%;\n\n    padding:\n      0 22px;\n  }\n\n\n  .mg-hero__service {\n    max-width: 650px;\n\n    font-size:\n      clamp(27px, 5.2vw, 35px);\n\n    line-height: 1.13;\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 42px;\n  }\n\n\n  .mg-hero__tagline {\n    font-size:\n      clamp(20px, 3.5vw, 25px);\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE PHONE\n========================================================== *\/\n\n@media (max-width: 480px) {\n\n  .mg-hero__inner {\n    padding:\n      34px\n      7px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 7px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 430px;\n\n    font-size:\n      clamp(28px, 7.8vw, 34px);\n\n    line-height: 1.07;\n\n    letter-spacing:\n      -0.034em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__heading::after {\n    width: 42px;\n\n    margin-top: 15px;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(420px, 118vw, 505px);\n\n    margin-top: -2px;\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 46%;\n\n    padding:\n      0 13px;\n  }\n\n\n  .mg-hero__service {\n    max-width: 420px;\n\n    font-size:\n      clamp(24px, 6.8vw, 30px);\n\n    line-height: 1.12;\n  }\n\n\n  .mg-hero__service-shade {\n    top: 46%;\n\n    width: 135%;\n    height: 220px;\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 32px;\n  }\n\n\n  .mg-cta {\n    --btn-height: 48px;\n    --circle-size: 36px;\n    --circle-offset: 6px;\n\n    padding-left: 21px;\n  }\n\n\n  .mg-cta__text {\n    font-size: 14px;\n  }\n\n\n  .mg-cta__arrow svg {\n    width: 16px;\n    height: 16px;\n  }\n\n\n  .mg-hero__tagline {\n    max-width: 390px;\n\n    margin-top: 4px;\n\n    padding:\n      0\n      14px\n      34px;\n\n    font-size:\n      clamp(20px, 5.3vw, 23px);\n\n    line-height: 1.22;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n========================================================== *\/\n\n@media (max-width: 374px) {\n\n  .mg-hero__inner {\n    padding-top: 30px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(25px, 7.8vw, 29px);\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(380px, 120vw, 445px);\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(22px, 6.8vw, 26px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 28px;\n  }\n\n\n  .mg-hero__tagline {\n    font-size:\n      clamp(18px, 5.4vw, 21px);\n  }\n\n}\n\n\n\/* ==========================================================\n   LANDSCAPE MOBILE\n========================================================== *\/\n\n@media\n(max-height: 500px)\nand\n(orientation: landscape) {\n\n  .mg-hero__inner {\n    padding-top: 28px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(24px, 4vw, 32px);\n\n    line-height: 1.06;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(290px, 75vh, 370px);\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 44%;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(22px, 3.5vw, 29px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 20px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TOUCH\n========================================================== *\/\n\n@media (hover: none) {\n\n  .mg-cta:active::before {\n    transform:\n      translate(50%, -50%)\n      scale(8);\n  }\n\n\n  .mg-cta:active .mg-cta__arrow {\n    background: transparent;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-hero__service {\n    transition: none;\n  }\n\n\n  .mg3d-model-loader::before {\n    animation: none;\n  }\n\n}\n\n<\/style>\n\n\n<!-- ==========================================================\n     HTML\n========================================================== -->\n\n<section class=\"mg-hero\" aria-labelledby=\"mg-main-heading\" data-model-url=\"\/wp-content\/uploads\/2025\/06\/Economizer2.glb\">\n\n  <div class=\"mg-hero__inner\">\n\n\n    <!-- ======================================================\n         STATIC H1\n    ======================================================= -->\n\n    <div class=\"mg-hero__heading-wrap\">\n\n      <h1 id=\"mg-main-heading\" class=\"mg-hero__heading\">\n        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \n        <span class=\"mg-hero__heading-accent\">\n          \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430\n        <\/span>\n      <\/h1>\n\n    <\/div>\n\n\n    <!-- ======================================================\n         3D MODEL\n    ======================================================= -->\n\n    <div class=\"mg-hero__model\">\n\n\n      <canvas id=\"mg3d-canvas\" aria-label=\"\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\u0430\">\n      <\/canvas>\n\n\n      <!-- subtle dark area behind text -->\n\n      <div class=\"mg-hero__service-shade\" aria-hidden=\"true\">\n      <\/div>\n\n\n      <!-- ====================================================\n           ROTATING SERVICES\n      ===================================================== -->\n\n      <div class=\"mg-hero__service-wrap\">\n\n        <div id=\"mg3d-service\" class=\"mg-hero__service\">\n          \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f.\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ====================================================\n           CTA\n      ===================================================== -->\n\n      <div class=\"mg-hero__cta-wrap\">\n\n        <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"mg-cta\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 Mechanogurus\">\n\n          <span class=\"mg-cta__text\">\n            \u041e\u0431\u0441\u0443\u0434\u0438\u043c?\n          <\/span>\n\n\n          <span class=\"mg-cta__arrow\" aria-hidden=\"true\">\n\n            <svg viewBox=\"0 0 24 24\">\n\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\">\n              <\/line>\n\n              <polyline points=\"13 6 19 12 13 18\">\n              <\/polyline>\n\n            <\/svg>\n\n          <\/span>\n\n        <\/a>\n\n      <\/div>\n\n\n      <!-- loader -->\n\n      <div class=\"mg3d-model-loader\" id=\"mg3d-model-status\" role=\"status\" aria-live=\"polite\">\n        3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ======================================================\n         TAGLINE\n    ======================================================= -->\n\n    <div class=\"mg-hero__tagline\">\n\n      <strong>\n        \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e\n      <\/strong>\n\n      \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     ROTATING SERVICES\n========================================================== -->\n\n<script>\n(() => {\n\n  const initMGServices = () => {\n\n    const block =\n      document.querySelector('.mg-hero');\n\n\n    if (\n      !block ||\n      block.dataset.serviceReady === 'true'\n    ) {\n      return;\n    }\n\n\n    block.dataset.serviceReady =\n      'true';\n\n\n    const service =\n      block.querySelector('#mg3d-service');\n\n\n    if (!service) {\n      return;\n    }\n\n\n    const messages = [\n\n      '\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f.',\n\n      '\u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c CAD, PDM \u0438 PLM.',\n\n      '\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b.',\n\n      '\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b.'\n\n    ];\n\n\n    let currentIndex = 0;\n\n\n    const reducedMotion =\n      window.matchMedia(\n        '(prefers-reduced-motion: reduce)'\n      ).matches;\n\n\n    if (reducedMotion) {\n      return;\n    }\n\n\n    const changeService = () => {\n\n      service.classList.add(\n        'is-changing'\n      );\n\n\n      setTimeout(() => {\n\n        currentIndex =\n          (currentIndex + 1)\n          %\n          messages.length;\n\n\n        service.textContent =\n          messages[currentIndex];\n\n\n        service.classList.remove(\n          'is-changing'\n        );\n\n      }, 400);\n\n    };\n\n\n    setInterval(\n      changeService,\n      4000\n    );\n\n  };\n\n\n  if (\n    document.readyState === 'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initMGServices,\n      {\n        once: true\n      }\n    );\n\n  }\n\n  else {\n\n    initMGServices();\n\n  }\n\n})();\n<\/script>\n\n\n<!-- ==========================================================\n     THREE.JS\n========================================================== -->\n\n<script>\n(() => {\n\n  const initThreeJS = () => {\n\n    const block =\n      document.querySelector('.mg-hero');\n\n\n    if (\n      !block ||\n      block.dataset.viewerReady === 'true'\n    ) {\n      return;\n    }\n\n\n    const canvas =\n      block.querySelector('#mg3d-canvas');\n\n\n    const container =\n      block.querySelector('.mg-hero__model');\n\n\n    const loaderElement =\n      block.querySelector('#mg3d-model-status');\n\n\n    if (\n      !canvas ||\n      !container ||\n      !loaderElement\n    ) {\n      return;\n    }\n\n\n    block.dataset.viewerReady =\n      'true';\n\n\n    if (\n      !window.THREE ||\n      !THREE.GLTFLoader\n    ) {\n\n      loaderElement.textContent =\n        '\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 3D-\u043c\u043e\u0434\u0435\u043b\u0438.';\n\n\n      loaderElement.classList.add(\n        'error'\n      );\n\n\n      return;\n\n    }\n\n\n    const MODEL_URL =\n      block.dataset.modelUrl;\n\n\n    const reducedMotion =\n      window.matchMedia(\n        '(prefers-reduced-motion: reduce)'\n      ).matches;\n\n\n    const lowPowerDevice =\n      Boolean(\n\n        (\n          navigator.hardwareConcurrency\n            ?\n            navigator.hardwareConcurrency <= 4\n            :\n            false\n        )\n\n        ||\n\n        (\n          navigator.deviceMemory\n            ?\n            navigator.deviceMemory <= 4\n            :\n            false\n        )\n\n      );\n\n\n    \/* ======================================================\n       SCENE\n    ====================================================== *\/\n\n    const scene =\n      new THREE.Scene();\n\n\n    \/* ======================================================\n       CAMERA\n    ====================================================== *\/\n\n    const camera =\n      new THREE.PerspectiveCamera(\n\n        45,\n\n        container.clientWidth \/\n        container.clientHeight,\n\n        0.1,\n\n        1000\n\n      );\n\n\n    camera.position.set(\n      0,\n      1,\n      6\n    );\n\n\n    camera.lookAt(\n      0,\n      0,\n      0\n    );\n\n\n    \/* ======================================================\n       RENDERER\n    ====================================================== *\/\n\n    const renderer =\n      new THREE.WebGLRenderer({\n\n        canvas,\n\n        alpha: true,\n\n        antialias:\n          !(\n            lowPowerDevice ||\n            window.devicePixelRatio >= 2\n          ),\n\n        powerPreference:\n          'high-performance',\n\n        stencil: false,\n\n        depth: true\n\n      });\n\n\n    renderer.setSize(\n      container.clientWidth,\n      container.clientHeight\n    );\n\n\n    renderer.setPixelRatio(\n\n      Math.min(\n\n        window.devicePixelRatio,\n\n        lowPowerDevice\n          ? 1\n          : 1.5\n\n      )\n\n    );\n\n\n    renderer.shadowMap.enabled =\n      !lowPowerDevice;\n\n\n    renderer.shadowMap.type =\n      THREE.PCFSoftShadowMap;\n\n\n    renderer.outputEncoding =\n      THREE.sRGBEncoding;\n\n\n    \/* ======================================================\n       LIGHTS\n    ====================================================== *\/\n\n    const ambientLight =\n      new THREE.AmbientLight(\n        0xffffff,\n        0.6\n      );\n\n\n    scene.add(\n      ambientLight\n    );\n\n\n    const directionalLight1 =\n      new THREE.DirectionalLight(\n        0xffffff,\n        0.8\n      );\n\n\n    directionalLight1.position.set(\n      5,\n      8,\n      5\n    );\n\n\n    directionalLight1.castShadow =\n      !lowPowerDevice;\n\n\n    scene.add(\n      directionalLight1\n    );\n\n\n    const directionalLight2 =\n      new THREE.DirectionalLight(\n        0xe0e0e0,\n        0.4\n      );\n\n\n    directionalLight2.position.set(\n      -5,\n      3,\n      -5\n    );\n\n\n    scene.add(\n      directionalLight2\n    );\n\n\n    const fillLight =\n      new THREE.DirectionalLight(\n        0xb0b0b0,\n        0.3\n      );\n\n\n    fillLight.position.set(\n      0,\n      -5,\n      0\n    );\n\n\n    scene.add(\n      fillLight\n    );\n\n\n    \/* ======================================================\n       STATE\n    ====================================================== *\/\n\n    let model = null;\n\n    let isModelLoaded = false;\n\n    let animationFrameId = null;\n\n    let lastFrameTime = 0;\n\n\n    THREE.Cache.enabled = true;\n\n\n    \/* ======================================================\n       GLTF LOADER\n    ====================================================== *\/\n\n    const gltfLoader =\n      new THREE.GLTFLoader();\n\n\n    \/* ======================================================\n       MATERIAL\n    ====================================================== *\/\n\n    const sharedMaterial =\n      new THREE.MeshStandardMaterial({\n\n        color: 0xa0a0a0,\n\n        metalness: 0.3,\n\n        roughness: 0.6\n\n      });\n\n\n    const disposeMaterial =\n      material => {\n\n        if (\n          Array.isArray(material)\n        ) {\n\n          material.forEach(\n            disposeMaterial\n          );\n\n        }\n\n        else if (material) {\n\n          material.dispose();\n\n        }\n\n      };\n\n\n    \/* ======================================================\n       RENDER\n    ====================================================== *\/\n\n    const render = () => {\n\n      renderer.render(\n        scene,\n        camera\n      );\n\n    };\n\n\n    \/* ======================================================\n       ANIMATION\n    ====================================================== *\/\n\n    const animate =\n      currentTime => {\n\n        animationFrameId =\n          null;\n\n\n        if (\n          !isModelLoaded ||\n          document.hidden\n        ) {\n          return;\n        }\n\n\n        if (\n          currentTime -\n          lastFrameTime\n          >=\n          1000 \/ 30\n        ) {\n\n          const elapsed =\n            Math.min(\n\n              currentTime -\n              lastFrameTime,\n\n              100\n\n            );\n\n\n          lastFrameTime =\n            currentTime;\n\n\n          if (\n            !reducedMotion &&\n            model\n          ) {\n\n            model.rotation.y +=\n              0.00048 *\n              elapsed;\n\n          }\n\n\n          render();\n\n        }\n\n\n        if (\n          !reducedMotion\n        ) {\n\n          animationFrameId =\n            requestAnimationFrame(\n              animate\n            );\n\n        }\n\n      };\n\n\n    const startAnimation = () => {\n\n      if (\n        animationFrameId ||\n        !isModelLoaded ||\n        document.hidden\n      ) {\n        return;\n      }\n\n\n      lastFrameTime =\n        performance.now();\n\n\n      animationFrameId =\n        requestAnimationFrame(\n          animate\n        );\n\n    };\n\n\n    const stopAnimation = () => {\n\n      if (\n        animationFrameId\n      ) {\n\n        cancelAnimationFrame(\n          animationFrameId\n        );\n\n      }\n\n\n      animationFrameId =\n        null;\n\n    };\n\n\n    \/* ======================================================\n       MODEL LOADED\n    ====================================================== *\/\n\n    const onModelLoaded =\n      gltf => {\n\n\n        model =\n          gltf.scene;\n\n\n        model.traverse(\n          child => {\n\n            if (\n              child.isMesh\n            ) {\n\n              disposeMaterial(\n                child.material\n              );\n\n\n              child.material =\n                sharedMaterial;\n\n\n              child.castShadow =\n                !lowPowerDevice;\n\n\n              child.receiveShadow =\n                !lowPowerDevice;\n\n\n              child.frustumCulled =\n                true;\n\n            }\n\n          }\n        );\n\n\n        \/* Auto centre \/ scale *\/\n\n        const box =\n          new THREE.Box3()\n            .setFromObject(\n              model\n            );\n\n\n        const center =\n          box.getCenter(\n            new THREE.Vector3()\n          );\n\n\n        const size =\n          box.getSize(\n            new THREE.Vector3()\n          );\n\n\n        const maxDim =\n          Math.max(\n            size.x,\n            size.y,\n            size.z\n          );\n\n\n        const scale =\n          4.5 \/\n          maxDim;\n\n\n        model.scale.multiplyScalar(\n          scale\n        );\n\n\n        model.position\n          .copy(center)\n          .multiplyScalar(\n            -scale\n          );\n\n\n        scene.add(\n          model\n        );\n\n\n        isModelLoaded =\n          true;\n\n\n        loaderElement\n          .classList\n          .add('hidden');\n\n\n        canvas\n          .classList\n          .add('loaded');\n\n\n        render();\n\n        startAnimation();\n\n      };\n\n\n    \/* ======================================================\n       ERROR\n    ====================================================== *\/\n\n    const onLoadError =\n      error => {\n\n        console.error(\n          '\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438:',\n          error\n        );\n\n\n        loaderElement.textContent =\n          '\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u044c.';\n\n\n        loaderElement.classList.add(\n          'error'\n        );\n\n      };\n\n\n    \/* ======================================================\n       PROGRESS\n    ====================================================== *\/\n\n    const updateProgress =\n      xhr => {\n\n        if (\n          xhr.lengthComputable\n        ) {\n\n          const pct =\n            Math.round(\n\n              (\n                xhr.loaded \/\n                xhr.total\n              )\n              *\n              100\n\n            );\n\n\n          loaderElement.textContent =\n            `3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 ${pct}%`;\n\n        }\n\n      };\n\n\n    \/* ======================================================\n       LOAD MODEL\n    ====================================================== *\/\n\n    if (!MODEL_URL) {\n\n      onLoadError(\n        new Error(\n          'URL 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d.'\n        )\n      );\n\n      return;\n\n    }\n\n\n    gltfLoader.load(\n\n      MODEL_URL,\n\n      onModelLoaded,\n\n      updateProgress,\n\n      onLoadError\n\n    );\n\n\n    \/* ======================================================\n       RESIZE\n    ====================================================== *\/\n\n    let resizeFrameId;\n\n\n    const handleResize = () => {\n\n      cancelAnimationFrame(\n        resizeFrameId\n      );\n\n\n      resizeFrameId =\n        requestAnimationFrame(\n          () => {\n\n            const width =\n              container.clientWidth;\n\n\n            const height =\n              container.clientHeight;\n\n\n            if (\n              !width ||\n              !height\n            ) {\n              return;\n            }\n\n\n            camera.aspect =\n              width \/\n              height;\n\n\n            camera.updateProjectionMatrix();\n\n\n            renderer.setSize(\n              width,\n              height,\n              false\n            );\n\n\n            renderer.setPixelRatio(\n\n              Math.min(\n\n                window.devicePixelRatio,\n\n                lowPowerDevice\n                  ? 1\n                  : 1.5\n\n              )\n\n            );\n\n\n            render();\n\n          }\n        );\n\n    };\n\n\n    if (\n      'ResizeObserver'\n      in window\n    ) {\n\n      new ResizeObserver(\n        handleResize\n      ).observe(\n        container\n      );\n\n    }\n\n    else {\n\n      window.addEventListener(\n        'resize',\n        handleResize,\n        {\n          passive: true\n        }\n      );\n\n    }\n\n\n    \/* ======================================================\n       VISIBILITY\n    ====================================================== *\/\n\n    document.addEventListener(\n      'visibilitychange',\n      () => {\n\n        if (\n          document.hidden\n        ) {\n\n          stopAnimation();\n\n        }\n\n        else {\n\n          startAnimation();\n\n        }\n\n      }\n    );\n\n  };\n\n\n  \/* ========================================================\n     INIT\n  ======================================================== *\/\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initThreeJS,\n      {\n        once: true\n      }\n    );\n\n  }\n\n  else {\n\n    initThreeJS();\n\n  }\n\n})();\n<\/script>\n\n\n<noscript>\n\n  <p style=\"\n      color:#FEF4EE;\n      text-align:center;\n      font-family:Roboto,sans-serif;\n    \">\n    \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM,\n    \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432.\n  <\/p>\n\n<\/noscript>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!--\n  MG: Our Services \u2014 Homepage expanding panels\n  WordPress Custom HTML block \u2014 self-contained\n\n  MOBILE DESIGN:\n  Collapsed = service name only\n  Expanded = service name + pain + solution + description + CTA\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@500;600;700&#038;family=Manrope:wght@400;600;700&#038;display=swap\"\n  rel=\"stylesheet\"\n>\n\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/\n\n.mgp-wrap,\n.mgp-wrap *,\n.mgp-wrap *::before,\n.mgp-wrap *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n\n\/* ==========================================================\n   MAIN WRAPPER \u2014 DESKTOP\n   ========================================================== *\/\n\n.mgp-wrap {\n  display: flex;\n  flex-direction: row;\n\n  width: 100%;\n  max-width: 1400px;\n\n  margin: 0 auto;\n\n  gap: 10px;\n\n  height: 64vh;\n  min-height: 340px;\n}\n\n\n\/* ==========================================================\n   PANELS\n   ========================================================== *\/\n\n.mgp-panel {\n  position: relative;\n\n  flex: 1;\n\n  min-width: 80px;\n\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  border-radius: 10px;\n\n  cursor: pointer;\n\n  overflow: hidden;\n\n  transition:\n    flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n\n  outline: none;\n}\n\n\n\/* Dark overlay *\/\n\n.mgp-panel::before {\n  content: '';\n\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.32) 0%,\n      rgba(0,0,0,0.78) 100%\n    );\n\n  z-index: 1;\n\n  transition:\n    background 0.4s ease;\n}\n\n\n.mgp-panel:hover::before,\n.mgp-panel:focus-visible::before {\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.24) 0%,\n      rgba(0,0,0,0.72) 100%\n    );\n}\n\n\n.mgp-panel:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px #F2B839;\n}\n\n\n\/* Expanded desktop panel *\/\n\n.mgp-panel.active {\n  flex: 4;\n}\n\n\n.mgp-panel.active::before {\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.38) 0%,\n      rgba(0,0,0,0.82) 100%\n    );\n}\n\n\n\/* ==========================================================\n   PANEL CONTENT\n   ========================================================== *\/\n\n.mgp-inner {\n  position: absolute;\n  inset: 0;\n\n  z-index: 2;\n\n  display: flex;\n  flex-direction: column;\n\n  justify-content: center;\n  align-items: center;\n\n  padding: 24px 16px;\n\n  overflow: hidden;\n}\n\n\n\/* Expanded desktop content *\/\n\n.mgp-panel.active .mgp-inner {\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  padding: 36px;\n\n  top: 0;\n  bottom: auto;\n\n  height: auto;\n}\n\n\n\/* ==========================================================\n   TITLE\n   ========================================================== *\/\n\n.mgp-title {\n  font-family:\n    'Oswald',\n    'Arial Narrow',\n    sans-serif;\n\n  font-size: 22px;\n  font-weight: 600;\n\n  color: #fff;\n\n  letter-spacing: 4px;\n\n  text-transform: uppercase;\n\n  white-space: nowrap;\n\n  line-height: 1;\n\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n\n  transform: rotate(180deg);\n\n  flex-shrink: 0;\n}\n\n\n\/* Expanded title *\/\n\n.mgp-panel.active .mgp-title {\n  writing-mode: horizontal-tb;\n\n  transform: rotate(0deg);\n\n  font-size: 48px;\n\n  letter-spacing: 3px;\n\n  white-space: normal;\n\n  margin-bottom: 10px;\n\n  line-height: 1.05;\n}\n\n\n\/* ==========================================================\n   PAIN \/ QUESTION\n   ========================================================== *\/\n\n.mgp-pain {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 17px;\n\n  font-weight: 600;\n\n  color: #F2B839;\n\n  letter-spacing: 0.2px;\n\n  line-height: 1.45;\n\n  margin-bottom: 12px;\n\n  width: 100%;\n}\n\n\n.mgp-panel.active .mgp-pain {\n  display: block;\n}\n\n\n\/* ==========================================================\n   SHORT SOLUTION\n   ========================================================== *\/\n\n.mgp-solution {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 15px;\n\n  color: rgba(255,255,255,0.72);\n\n  font-style: italic;\n\n  margin-bottom: 16px;\n}\n\n\n.mgp-panel.active .mgp-solution {\n  display: block;\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   ========================================================== *\/\n\n.mgp-desc {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 15px;\n\n  color: rgba(255,255,255,0.88);\n\n  line-height: 1.65;\n\n  margin-bottom: 20px;\n\n  width: 100%;\n}\n\n\n.mgp-panel.active .mgp-desc {\n  display: block;\n}\n\n\n.mgp-desc ul {\n  list-style: none;\n\n  padding: 0;\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 8px;\n}\n\n\n.mgp-desc li {\n  padding-left: 22px;\n\n  position: relative;\n}\n\n\n.mgp-desc li::before {\n  content: '';\n\n  position: absolute;\n\n  left: 0;\n  top: 9px;\n\n  width: 8px;\n  height: 8px;\n\n  background: #E1830F;\n\n  border-radius: 50%;\n}\n\n\n\/* ==========================================================\n   CTA\n   ========================================================== *\/\n\n.mgp-cta {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  color: #fff;\n\n  text-decoration: none;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n\n  border-bottom: 2px solid #F2B839;\n\n  padding-bottom: 3px;\n}\n\n\n.mgp-cta:hover {\n  color: #F2B839;\n}\n\n\n.mgp-panel.active .mgp-cta {\n  display: inline-block;\n}\n\n\n\/* ==========================================================\n   PANEL BACKGROUNDS\n   ========================================================== *\/\n\n\n\/* 1 \u2014 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 *\/\n\n.mgp-panel:nth-child(1) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/reengineering.png');\n}\n\n\n\/* 2 \u2014 \u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f *\/\n\n.mgp-panel:nth-child(2) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/solidworks-pdm-implementation-service.jpg');\n}\n\n\n\/* 3 \u2014 \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 *\/\n\n.mgp-panel:nth-child(3) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Analysis_slider_tile.jpg');\n}\n\n\n\/* 4 \u2014 \u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 *\/\n\n.mgp-panel:nth-child(4) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Standard_procedures.jpg');\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media (max-width: 1024px) and (min-width: 769px) {\n\n  .mgp-wrap {\n    height: 56vh;\n  }\n\n\n  .mgp-panel {\n    min-width: 64px;\n  }\n\n\n  .mgp-title {\n    font-size: 18px;\n\n    letter-spacing: 3px;\n  }\n\n\n  .mgp-panel.active .mgp-title {\n    font-size: 36px;\n  }\n\n\n  .mgp-pain {\n    font-size: 15px;\n  }\n\n\n  .mgp-desc {\n    font-size: 14px;\n  }\n\n\n  .mgp-panel.active .mgp-inner {\n    padding: 24px;\n  }\n}\n\n\n\/* ==========================================================\n   MOBILE\n   OPTION 1:\n   CLOSED = TITLE ONLY\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n  \/* ----------------------------------------------------------\n     STACK\n     ---------------------------------------------------------- *\/\n\n  .mgp-wrap {\n    flex-direction: column;\n\n    width: 100%;\n\n    height: auto;\n    min-height: 0;\n\n    gap: 8px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED PANEL\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel {\n    flex: none;\n\n    width: 100%;\n\n    height: 70px;\n\n    min-width: 0;\n\n    border-radius: 9px;\n\n    background-position: center;\n\n    transition:\n      height 0.55s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n\n  \/* Slightly brighter image in closed state *\/\n\n  .mgp-panel::before {\n    background:\n      linear-gradient(\n        90deg,\n        rgba(0,0,0,0.68) 0%,\n        rgba(0,0,0,0.48) 55%,\n        rgba(0,0,0,0.62) 100%\n      );\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED PANEL\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active {\n    flex: none;\n\n    height: 400px;\n  }\n\n\n  .mgp-panel.active::before {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(0,0,0,0.38) 0%,\n        rgba(0,0,0,0.84) 100%\n      );\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED CONTENT\n     ---------------------------------------------------------- *\/\n\n  .mgp-inner {\n    flex-direction: row;\n\n    flex-wrap: nowrap;\n\n    justify-content: flex-start;\n\n    align-items: center;\n\n    padding:\n      0\n      46px\n      0\n      20px;\n\n    overflow: hidden;\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED CONTENT\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active .mgp-inner {\n    flex-direction: column;\n\n    flex-wrap: nowrap;\n\n    justify-content: flex-start;\n\n    align-items: flex-start;\n\n    padding: 20px;\n\n    top: 0;\n    bottom: auto;\n\n    height: auto;\n\n    overflow: hidden;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED TITLE\n     ---------------------------------------------------------- *\/\n\n  .mgp-title {\n    writing-mode: horizontal-tb;\n\n    transform: none;\n\n    width: 100%;\n\n    font-size:\n      clamp(\n        15px,\n        4.3vw,\n        18px\n      );\n\n    font-weight: 600;\n\n    letter-spacing:\n      clamp(\n        1.5px,\n        0.55vw,\n        2.4px\n      );\n\n    line-height: 1.1;\n\n    white-space: nowrap;\n\n    overflow: visible;\n\n    text-overflow: unset;\n\n    color: #fff;\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED TITLE\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active .mgp-title {\n    width: 100%;\n\n    font-size: 25px;\n\n    line-height: 1.08;\n\n    letter-spacing: 2px;\n\n    white-space: normal;\n\n    margin-bottom: 10px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     IMPORTANT:\n     PAIN IS HIDDEN WHILE CLOSED\n     ---------------------------------------------------------- *\/\n\n  .mgp-pain {\n    display: none;\n  }\n\n\n  .mgp-panel.active .mgp-pain {\n    display: block;\n\n    width: 100%;\n\n    font-size: 13.5px;\n\n    line-height: 1.45;\n\n    margin-bottom: 10px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     SOLUTION\n     ---------------------------------------------------------- *\/\n\n  .mgp-solution {\n    font-size: 12.5px;\n\n    line-height: 1.4;\n\n    margin-bottom: 12px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     DESCRIPTION\n     ---------------------------------------------------------- *\/\n\n  .mgp-desc {\n    font-size: 13px;\n\n    line-height: 1.55;\n\n    margin-bottom: 14px;\n  }\n\n\n  .mgp-desc ul {\n    gap: 6px;\n  }\n\n\n  .mgp-desc li {\n    padding-left: 18px;\n  }\n\n\n  .mgp-desc li::before {\n    width: 7px;\n    height: 7px;\n\n    top: 7px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CTA\n     ---------------------------------------------------------- *\/\n\n  .mgp-cta {\n    font-size: 12.5px;\n\n    letter-spacing: 0.9px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     ARROW\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel::after {\n    content: '\u203a';\n\n    position: absolute;\n\n    right: 18px;\n\n    top: 50%;\n\n    transform:\n      translateY(-52%);\n\n    z-index: 3;\n\n    font-family:\n      Arial,\n      sans-serif;\n\n    font-size: 25px;\n\n    font-weight: 300;\n\n    line-height: 1;\n\n    color:\n      rgba(\n        255,\n        255,\n        255,\n        0.58\n      );\n  }\n\n\n  .mgp-panel.active::after {\n    display: none;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/\n\n@media (max-width: 400px) {\n\n  .mgp-panel {\n    height: 68px;\n  }\n\n\n  .mgp-panel.active {\n    height: 410px;\n  }\n\n\n  .mgp-inner {\n    padding:\n      0\n      42px\n      0\n      17px;\n  }\n\n\n  .mgp-title {\n    font-size:\n      clamp(\n        14px,\n        4.2vw,\n        16px\n      );\n\n    letter-spacing: 1.6px;\n  }\n\n\n  .mgp-panel.active .mgp-inner {\n    padding: 18px;\n  }\n\n\n  .mgp-panel.active .mgp-title {\n    font-size: 22px;\n\n    letter-spacing: 1.7px;\n  }\n\n\n  .mgp-panel.active .mgp-pain {\n    font-size: 13px;\n  }\n\n\n  .mgp-desc {\n    font-size: 12.5px;\n  }\n\n\n  .mgp-panel::after {\n    right: 16px;\n  }\n}\n\n\n\/* ==========================================================\n   TOUCH DEVICES\n   ========================================================== *\/\n\n@media (hover: none) {\n\n  .mgp-panel:hover::before {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(0,0,0,0.32) 0%,\n        rgba(0,0,0,0.78) 100%\n      );\n  }\n\n\n  @media (max-width: 768px) {\n\n    .mgp-panel:hover::before {\n      background:\n        linear-gradient(\n          90deg,\n          rgba(0,0,0,0.68) 0%,\n          rgba(0,0,0,0.48) 55%,\n          rgba(0,0,0,0.62) 100%\n        );\n    }\n\n\n    .mgp-panel.active::before {\n      background:\n        linear-gradient(\n          160deg,\n          rgba(0,0,0,0.38) 0%,\n          rgba(0,0,0,0.84) 100%\n        );\n    }\n\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mgp-panel {\n    transition: none;\n  }\n\n}\n<\/style>\n\n\n<div class=\"mgp-wrap\">\n\n\n  <!-- ======================================================\n       1. \u0420\u0410\u0417\u0420\u0410\u0411\u041e\u0422\u041a\u0410 \u0418\u0417\u0414\u0415\u041b\u0418\u0419\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e\n          <\/li>\n\n          <li>\n            \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0430\u0441\u0441\u044b, \u043d\u0438\u0436\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c, \u043a\u043e\u0440\u043e\u0447\u0435 \u0441\u0440\u043e\u043a\u0438\n          <\/li>\n\n          <li>\n            \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043d\u0438\u0436\u0430\u044e\u0442 \u0440\u0438\u0441\u043a\u0438 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f\n          <\/li>\n\n          <li>\n            \u0410\u0432\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0434\u043e \u0441\u0434\u0430\u0447\u0438 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=1431\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       2. \u0426\u0418\u0424\u0420\u041e\u0412\u0410\u042f \u0418\u041d\u0416\u0415\u041d\u0415\u0420\u0418\u042f\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        CAD \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e \u2014 \u043d\u0435\u0442?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            SOLIDWORKS PDM \/ PLM \u2014 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043d\u0435\u0446 \u0445\u0430\u043e\u0441\u0443 \u0432\u0435\u0440\u0441\u0438\u0439\n          <\/li>\n\n          <li>\n            CAD-\u0441\u0435\u0440\u0432\u0435\u0440\u044b \u0438 VDI \u2014 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e, \u0431\u0435\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0435\u0432\n          <\/li>\n\n          <li>\n            Add-ins, PDM Loader \u0438 API \u2014 \u0440\u0443\u0442\u0438\u043d\u0430 \u0443\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0440\u0443\u043a \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\n          <\/li>\n\n          <li>\n            \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438, AI \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0439 \u043e\u0442\u0434\u0435\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=506\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       3. \u0410\u0412\u0422\u041e\u041c\u0410\u0422\u0418\u0417\u0410\u0426\u0418\u042f \u0411\u0418\u0417\u041d\u0415\u0421\u0410\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0430\u0439\u0442\u043e\u043c, CRM, \u043f\u043e\u0447\u0442\u043e\u0439 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            CRM, helpdesk, \u0441\u0430\u0439\u0442 \u0438 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\n          <\/li>\n\n          <li>\n            \u0417\u0430\u044f\u0432\u043a\u0438, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\n          <\/li>\n\n          <li>\n            API, n8n \u0438 AI \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438\n          <\/li>\n\n          <li>\n            \u041f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n        class=\"mgp-cta\"\n      >\n        \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       4. \u0410\u0414\u0414\u0418\u0422\u0418\u0412\u041d\u042b\u0415 \u0422\u0415\u0425\u041d\u041e\u041b\u041e\u0413\u0418\u0418\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u043b\u0438 \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0418\u0437\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            \u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439\n          <\/li>\n\n          <li>\n            3D-\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430\n          <\/li>\n\n          <li>\n            \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0438\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u043f\u043e \u0441\u043a\u0430\u043d\u0443\n          <\/li>\n\n          <li>\n            \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043a \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u044f\u043c \u0438 \u0441\u0435\u0440\u0438\u0439\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=1924\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n<\/div>\n\n\n<script>\n(function () {\n\n  const root =\n    document.currentScript &&\n    document.currentScript.previousElementSibling;\n\n\n  const wrap =\n    root &&\n    root.classList &&\n    root.classList.contains('mgp-wrap')\n      ? root\n      : document.querySelector('.mgp-wrap');\n\n\n  if (!wrap) {\n    return;\n  }\n\n\n  const panels =\n    wrap.querySelectorAll('.mgp-panel');\n\n\n  let timer = null;\n\n\n\n  \/* ========================================================\n     TIMER\n     ======================================================== *\/\n\n  function clearT() {\n\n    if (timer) {\n\n      clearTimeout(timer);\n\n      timer = null;\n\n    }\n\n  }\n\n\n\n  function startT() {\n\n    clearT();\n\n\n    timer =\n      setTimeout(function () {\n\n        panels.forEach(function (panel) {\n\n          setExpanded(\n            panel,\n            false\n          );\n\n        });\n\n      }, 6000);\n\n  }\n\n\n\n  \/* ========================================================\n     PANEL STATE\n     ======================================================== *\/\n\n  function setExpanded(\n    panel,\n    expanded\n  ) {\n\n    panel.classList.toggle(\n      'active',\n      expanded\n    );\n\n\n    panel.setAttribute(\n      'aria-expanded',\n      expanded\n        ? 'true'\n        : 'false'\n    );\n\n  }\n\n\n\n  function closeAll(except) {\n\n    panels.forEach(function (panel) {\n\n      if (panel !== except) {\n\n        setExpanded(\n          panel,\n          false\n        );\n\n      }\n\n    });\n\n  }\n\n\n\n  function togglePanel(panel) {\n\n    const isActive =\n      panel.classList.contains('active');\n\n\n    closeAll(panel);\n\n\n    if (!isActive) {\n\n      setExpanded(\n        panel,\n        true\n      );\n\n\n      startT();\n\n    }\n\n    else {\n\n      setExpanded(\n        panel,\n        false\n      );\n\n\n      clearT();\n\n    }\n\n  }\n\n\n\n  \/* ========================================================\n     EVENTS\n     ======================================================== *\/\n\n  panels.forEach(function (panel) {\n\n\n    \/* Click *\/\n\n    panel.addEventListener(\n      'click',\n      function (event) {\n\n        if (\n          event.target.closest('.mgp-cta')\n        ) {\n          return;\n        }\n\n\n        togglePanel(panel);\n\n      }\n    );\n\n\n    \/* Keyboard *\/\n\n    panel.addEventListener(\n      'keydown',\n      function (event) {\n\n        if (\n          event.target.closest('.mgp-cta')\n        ) {\n          return;\n        }\n\n\n        if (\n          event.key === 'Enter' ||\n          event.key === ' '\n        ) {\n\n          event.preventDefault();\n\n          togglePanel(panel);\n\n        }\n\n      }\n    );\n\n\n    \/* Desktop hover *\/\n\n    panel.addEventListener(\n      'mouseenter',\n      function () {\n\n        if (\n          panel.classList.contains('active')\n        ) {\n\n          startT();\n\n        }\n\n      }\n    );\n\n\n    \/* Keyboard focus *\/\n\n    panel.addEventListener(\n      'focusin',\n      function () {\n\n        if (\n          panel.classList.contains('active')\n        ) {\n\n          startT();\n\n        }\n\n      }\n    );\n\n  });\n\n})();\n<\/script>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- MECHANOGURUS | Engineering hero block | Option 1 | Russian site -->\n<!-- Paste this entire code into a WordPress Custom HTML block. -->\n\n<section class=\"mg-engineering-hero\" aria-labelledby=\"mg-engineering-hero-title\">\n  <div class=\"mg-engineering-hero__inner\">\n\n    <div class=\"mg-engineering-hero__visual\" aria-hidden=\"true\">\n      <img\n        src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/GasPiston_RUMO-02.png\"\n        alt=\"\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n      >\n    <\/div>\n\n    <div class=\"mg-engineering-hero__content\">\n      <h2 class=\"mg-engineering-hero__title\" id=\"mg-engineering-hero-title\">\n        <span>\u0412\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430.<\/span>\n        <span>\u041d\u0430\u0448\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/span>\n      <\/h2>\n\n      <p class=\"mg-engineering-hero__text\">\n        \u0411\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b\u043f\u0443\u0441\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f.\n      <\/p>\n\n      <a class=\"mg-engineering-hero__button\"\n         href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n         aria-label=\"\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 Mechanogurus\">\n        \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443\n        <span class=\"mg-engineering-hero__button-arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* Remove WordPress content-width restrictions around this block. *\/\n  .wp-block-html:has(.mg-engineering-hero),\n  .entry-content > .wp-block-html:has(.mg-engineering-hero),\n  .wp-block-post-content > .wp-block-html:has(.mg-engineering-hero),\n  .wp-block-group:has(.mg-engineering-hero),\n  .wp-block-group:has(.mg-engineering-hero) > .wp-block-group__inner-container,\n  .is-layout-constrained:has(.mg-engineering-hero),\n  .entry-content:has(.mg-engineering-hero) > .wp-block-html {\n    display: block !important;\n    width: 100% !important;\n    max-width: none !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n    float: none !important;\n  }\n\n  .mg-engineering-hero,\n  .mg-engineering-hero * {\n    box-sizing: border-box;\n  }\n\n  .mg-engineering-hero {\n    --mg-hero-width: 1400px;\n    --mg-hero-text: #fef4ee;\n    --mg-hero-muted: #d7d8da;\n    --mg-hero-accent: #f0b323;\n    position: relative;\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 auto !important;\n    overflow: hidden;\n    background: transparent;\n    color: var(--mg-hero-text);\n    font-family: \"DM Sans\", \"Roboto\", Arial, sans-serif;\n  }\n\n  \/* Option 1: image and centered copy share the same full-width stage. *\/\n  .mg-engineering-hero__inner {\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    place-items: center;\n    width: calc(100% - 40px);\n    max-width: var(--mg-hero-width);\n    min-height: clamp(500px, 42vw, 640px);\n    margin-inline: auto;\n    padding: clamp(32px, 3.5vw, 52px) clamp(20px, 4vw, 64px);\n    overflow: hidden;\n    background: transparent;\n  }\n\n  .mg-engineering-hero__visual {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    pointer-events: none;\n    background: transparent;\n  }\n\n  .mg-engineering-hero__visual img {\n    display: block;\n    width: 100%;\n    max-width: none;\n    height: 100%;\n    max-height: none;\n    object-fit: cover;\n    object-position: 50% 52%;\n    transform: scale(1.14);\n    transform-origin: 54% 52%;\n    background: transparent;\n  }\n\n  \/* Improves readability without adding a solid block background. *\/\n  .mg-engineering-hero__inner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    background: radial-gradient(\n      ellipse at center,\n      rgba(14, 17, 20, 0.62) 0%,\n      rgba(14, 17, 20, 0.30) 42%,\n      rgba(14, 17, 20, 0) 74%\n    );\n  }\n\n  .mg-engineering-hero__content {\n    position: relative;\n    z-index: 2;\n    width: min(100%, 1000px);\n    min-width: 0;\n    margin-inline: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n\n  .mg-engineering-hero__title {\n    margin: 0;\n    color: var(--mg-hero-text);\n    font-size: clamp(40px, 3.8vw, 68px);\n    font-weight: 700;\n    line-height: 0.98;\n    letter-spacing: -0.045em;\n    text-align: center;\n    text-wrap: balance;\n    overflow-wrap: normal;\n    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);\n  }\n\n  .mg-engineering-hero__title span {\n    display: block;\n  }\n\n  .mg-engineering-hero__title span + span {\n    margin-top: 0.16em;\n  }\n\n  .mg-engineering-hero__text {\n    width: min(100%, 760px);\n    margin: clamp(24px, 2.7vw, 38px) auto 0;\n    color: var(--mg-hero-muted);\n    font-size: clamp(17px, 1.35vw, 21px);\n    font-weight: 400;\n    line-height: 1.55;\n    text-align: center;\n    text-wrap: balance;\n    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);\n  }\n\n  .mg-engineering-hero__button {\n    min-height: 54px;\n    margin-top: clamp(30px, 3.2vw, 46px);\n    padding: 15px 22px 15px 25px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    border: 1px solid var(--mg-hero-accent);\n    border-radius: 999px;\n    background: var(--mg-hero-accent);\n    color: #16191d;\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 1;\n    text-decoration: none;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);\n    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;\n  }\n\n  .mg-engineering-hero__button:hover,\n  .mg-engineering-hero__button:focus-visible {\n    background: rgba(18, 21, 24, 0.82);\n    color: var(--mg-hero-text);\n    transform: translateY(-2px);\n  }\n\n  .mg-engineering-hero__button:focus-visible {\n    outline: 3px solid rgba(240, 179, 35, 0.35);\n    outline-offset: 4px;\n  }\n\n  .mg-engineering-hero__button-arrow {\n    font-size: 22px;\n    line-height: 0;\n  }\n\n  @media (max-width: 1180px) {\n    .mg-engineering-hero__title {\n      font-size: clamp(38px, 4.6vw, 56px);\n    }\n  }\n\n  @media (max-width: 900px) {\n    .mg-engineering-hero__inner {\n      width: calc(100% - 36px);\n      min-height: clamp(500px, 76vw, 610px);\n      padding: 38px clamp(18px, 5vw, 42px);\n    }\n\n    .mg-engineering-hero__visual img {\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      object-fit: cover;\n      object-position: 56% 52%;\n      transform: scale(1.18);\n      transform-origin: 57% 52%;\n    }\n\n    .mg-engineering-hero__title {\n      max-width: 720px;\n      font-size: clamp(40px, 8.5vw, 64px);\n    }\n  }\n\n  @media (max-width: 480px) {\n    .mg-engineering-hero__inner {\n      width: calc(100% - 24px);\n      min-height: 520px;\n      padding: 32px 16px;\n    }\n\n    .mg-engineering-hero__visual {\n      align-items: stretch;\n      padding-top: 0;\n    }\n\n    .mg-engineering-hero__visual img {\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      object-fit: cover;\n      object-position: 61% 52%;\n      transform: scale(1.24);\n      transform-origin: 62% 52%;\n    }\n\n    .mg-engineering-hero__content {\n      justify-content: center;\n    }\n\n    .mg-engineering-hero__title {\n      font-size: clamp(34px, 11vw, 48px);\n      line-height: 1.01;\n    }\n\n    .mg-engineering-hero__text {\n      margin-top: 22px;\n      font-size: 16px;\n      line-height: 1.5;\n    }\n\n    .mg-engineering-hero__button {\n      width: min(100%, 320px);\n      margin-top: 28px;\n    }\n  }\n\n  \/* Phone-only cinematic pan: right side of the image to the left, then back. *\/\n  @keyframes mg-engineering-mobile-pan {\n    0%, 8% {\n      object-position: 78% 52%;\n    }\n\n    92%, 100% {\n      object-position: 24% 52%;\n    }\n  }\n\n  @media (max-width: 767px) and (hover: none) and (pointer: coarse) {\n    .mg-engineering-hero__visual img {\n      animation: mg-engineering-mobile-pan 18s ease-in-out infinite alternate;\n      will-change: object-position;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .mg-engineering-hero__button {\n      transition: none;\n    }\n\n    .mg-engineering-hero__visual img {\n      animation: none !important;\n      object-position: 61% 52%;\n    }\n  }\n<\/style>\n<\/div>\n\n\n\n<!-- ==========================================================\n     MECHANOGURUS\n     ENGINEERING PROJECTS TEASER\n\n     UPDATED TYPOGRAPHY\n     - DM Sans throughout the heading hierarchy\n     - Main headings reduced by 20%\n     - Project titles reduced by 20%\n     - Responsive desktop \/ laptop \/ tablet \/ mobile\n     ========================================================== -->\n\n<script\n  type=\"module\"\n  src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\">\n<\/script>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n\n<link\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&amp;display=swap\"\n  rel=\"stylesheet\"\n>\n\n\n<style>\n\n\/* ==========================================================\n   BASE\n   ========================================================== *\/\n\n.mg-bento,\n.mg-bento *,\n.mg-bento *::before,\n.mg-bento *::after {\n  box-sizing: border-box;\n}\n\n\n.mg-bento {\n\n  --gold: #F2B839;\n  --orange: #E1830F;\n\n  --dark-bg: #0a0a0a;\n\n  --card-bg:\n    rgba(16,16,16,0.97);\n\n  --card-bg-alt:\n    rgba(20,16,8,0.95);\n\n  --glass-border:\n    rgba(242,184,57,0.18);\n\n  --glass-border-h:\n    rgba(242,184,57,0.45);\n\n  --text-primary:\n    #ffffff;\n\n  --text-secondary:\n    rgba(255,255,255,0.55);\n\n  --text-muted:\n    rgba(255,255,255,0.30);\n\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n\n  width: 100%;\n\n  max-width: 1400px;\n\n  margin:\n    0\n    auto;\n\n  padding:\n    0\n    25px;\n}\n\n\n\/* ==========================================================\n   SECTION\n   ========================================================== *\/\n\n.mg-bento .projects-section {\n\n  position: relative;\n\n  width:\n    calc(100% + 50px);\n\n  margin-left:\n    -25px;\n\n  padding:\n    clamp(48px, 5vw, 72px)\n    0;\n}\n\n\n\/* ==========================================================\n   SECTION HEADER\n   20% SMALLER THAN PREVIOUS VERSION\n   ========================================================== *\/\n\n.mg-bento .section-header {\n\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n\n  max-width: 1050px;\n\n  margin:\n    0\n    auto\n    clamp(32px, 3.5vw, 46px);\n\n  padding:\n    0\n    25px;\n\n  text-align: center;\n}\n\n\n\/* ==========================================================\n   MAIN HEADING\n   Previous max: 72px\n   New max: ~58px\n   ========================================================== *\/\n\n.mg-bento .apple-headline,\n.mg-bento .apple-subhead {\n\n  width: 100%;\n\n  max-width: 980px;\n\n  margin-left: auto;\n  margin-right: auto;\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(\n      34px,\n      3.2vw,\n      58px\n    );\n\n  font-weight: 700;\n\n  line-height: 1;\n\n  letter-spacing:\n    -0.043em;\n\n  color:\n    #fef4ee;\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  overflow-wrap: normal;\n\n  -webkit-font-smoothing:\n    antialiased;\n}\n\n\n.mg-bento .apple-headline {\n\n  margin-top: 0;\n\n  margin-bottom: 0;\n}\n\n\n.mg-bento .apple-subhead {\n\n  margin-top:\n    0.12em;\n\n  margin-bottom:\n    clamp(18px, 1.8vw, 24px);\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   BODY COPY REMAINS READABLE\n   ========================================================== *\/\n\n.mg-bento .apple-body-wrap {\n\n  position: relative;\n\n  overflow: hidden;\n\n  width: 100%;\n\n  max-width: 850px;\n\n  min-height: 3.2em;\n\n  margin:\n    0\n    auto;\n}\n\n\n.mg-bento .apple-body {\n\n  width: 100%;\n\n  max-width: 850px;\n\n  margin:\n    0\n    auto;\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n\n  font-size:\n    clamp(\n      16px,\n      1.2vw,\n      18px\n    );\n\n  font-weight: 400;\n\n  letter-spacing:\n    -0.01em;\n\n  line-height: 1.6;\n\n  color:\n    var(--text-secondary);\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  opacity: 0;\n\n  transform:\n    translateY(100%);\n\n  transition:\n    opacity\n    0.9s\n    cubic-bezier(0.22,1,0.36,1),\n\n    transform\n    0.9s\n    cubic-bezier(0.22,1,0.36,1);\n\n  -webkit-font-smoothing:\n    antialiased;\n}\n\n\n.mg-bento .apple-body.is-in {\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n}\n\n\n\/* ==========================================================\n   BENTO GRID\n   ========================================================== *\/\n\n.mg-bento .bento-grid {\n\n  position: relative;\n\n  z-index: 2;\n\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    1.7fr\n    1fr;\n\n  grid-template-rows:\n    auto\n    auto;\n\n  gap: 14px;\n\n  padding:\n    0\n    25px;\n}\n\n\n\/* ==========================================================\n   CARD\n   ========================================================== *\/\n\n.mg-bento .bento-card {\n\n  position: relative;\n\n  overflow: hidden;\n\n  background:\n    var(--card-bg);\n\n  border:\n    1px solid\n    var(--glass-border);\n\n  border-radius:\n    16px;\n\n  cursor: default;\n\n  transition:\n    border-color 0.35s ease,\n    transform 0.35s cubic-bezier(0.4,0,0.2,1),\n    box-shadow 0.35s ease;\n}\n\n\n.mg-bento .bento-card:hover {\n\n  border-color:\n    var(--glass-border-h);\n\n  transform:\n    translateY(-4px);\n\n  box-shadow:\n    0 16px 48px rgba(0,0,0,0.50),\n    0 0 24px rgba(242,184,57,0.10);\n}\n\n\n\/* ==========================================================\n   FEATURED CARD\n   ========================================================== *\/\n\n.mg-bento .bento-card.featured {\n\n  grid-column: 2;\n\n  grid-row:\n    1 \/ 3;\n\n  background:\n    var(--card-bg-alt);\n\n  border-color:\n    rgba(242,184,57,0.28);\n}\n\n\n.mg-bento\n.bento-grid\n> .bento-card:nth-child(2) {\n\n  grid-column: 1;\n  grid-row: 1;\n}\n\n\n.mg-bento\n.bento-grid\n> .bento-card:nth-child(3) {\n\n  grid-column: 3;\n  grid-row: 1;\n}\n\n\n.mg-bento\n.bento-grid\n> .bento-card:nth-child(4) {\n\n  grid-column: 1;\n  grid-row: 2;\n}\n\n\n.mg-bento\n.bento-grid\n> .bento-card:nth-child(5) {\n\n  grid-column: 3;\n  grid-row: 2;\n}\n\n\n.mg-bento\n.bento-card.featured:hover {\n\n  border-color:\n    rgba(242,184,57,0.60);\n\n  box-shadow:\n    0 24px 60px rgba(0,0,0,0.55),\n    0 0 40px rgba(242,184,57,0.15);\n}\n\n\n\/* ==========================================================\n   FEATURED BADGE\n   ========================================================== *\/\n\n.mg-bento .featured-badge {\n\n  position: absolute;\n\n  top: 16px;\n  right: 16px;\n\n  z-index: 10;\n\n  padding:\n    5px\n    11px;\n\n  border-radius: 5px;\n\n  background:\n    linear-gradient(\n      135deg,\n      var(--gold),\n      var(--orange)\n    );\n\n  color:\n    #0a0a0a;\n\n  font-size:\n    10px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    0.12em;\n\n  text-transform:\n    uppercase;\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   VIEWER\n   ========================================================== *\/\n\n.mg-bento .viewer-container {\n\n  position: relative;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      160deg,\n      #131313 0%,\n      #0a0a0a 100%\n    );\n}\n\n\n.mg-bento\n.bento-card.featured\n.viewer-container {\n\n  height: 320px;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.viewer-container {\n\n  height: 140px;\n}\n\n\n.mg-bento\n.viewer-container::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 50px;\n\n  background:\n    linear-gradient(\n      to top,\n      var(--card-bg) 0%,\n      transparent 100%\n    );\n\n  pointer-events: none;\n\n  z-index: 1;\n}\n\n\n.mg-bento\n.bento-card.featured\n.viewer-container::after {\n\n  height: 60px;\n\n  background:\n    linear-gradient(\n      to top,\n      var(--card-bg-alt) 0%,\n      transparent 100%\n    );\n}\n\n\n\/* ==========================================================\n   GRID OVERLAY\n   ========================================================== *\/\n\n.mg-bento\n.viewer-container::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  background-image:\n\n    linear-gradient(\n      rgba(242,184,57,0.03)\n      1px,\n      transparent\n      1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(242,184,57,0.03)\n      1px,\n      transparent\n      1px\n    );\n\n  background-size:\n    24px 24px;\n\n  pointer-events:\n    none;\n\n  z-index: 0;\n}\n\n\n\/* ==========================================================\n   MODEL VIEWER\n   ========================================================== *\/\n\n.mg-bento model-viewer {\n\n  width: 100%;\n\n  height: 100%;\n\n  --poster-color:\n    transparent;\n\n  filter:\n    contrast(1.06)\n    drop-shadow(\n      0\n      0\n      8px\n      rgba(242,184,57,0.12)\n    );\n\n  position: relative;\n\n  z-index: 1;\n}\n\n\n.mg-bento\nmodel-viewer::part(default-progress-bar) {\n\n  background:\n    var(--gold);\n\n  height: 2px;\n}\n\n\n\/* ==========================================================\n   ROTATE HINT\n   ========================================================== *\/\n\n.mg-bento .rotate-hint {\n\n  position: absolute;\n\n  bottom: 14px;\n\n  right: 14px;\n\n  width: 30px;\n\n  height: 30px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  background:\n    rgba(0,0,0,0.55);\n\n  border:\n    1px solid\n    rgba(255,255,255,0.10);\n\n  border-radius: 50%;\n\n  z-index: 3;\n\n  opacity: 0.50;\n\n  transition:\n    opacity 0.3s ease;\n\n  backdrop-filter:\n    blur(4px);\n}\n\n\n.mg-bento\n.bento-card:hover\n.rotate-hint {\n\n  opacity: 0;\n}\n\n\n.mg-bento\n.rotate-hint svg {\n\n  width: 14px;\n\n  height: 14px;\n\n  color:\n    rgba(255,255,255,0.70);\n\n  animation:\n    mg-bento-spin\n    5s\n    linear\n    infinite;\n}\n\n\n@keyframes mg-bento-spin {\n\n  from {\n    transform:\n      rotate(0deg);\n  }\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n\/* ==========================================================\n   CAROUSEL\n   ========================================================== *\/\n\n.mg-bento .img-carousel {\n\n  position: relative;\n\n  width: 100%;\n\n  height: 100%;\n\n  overflow: hidden;\n}\n\n\n.mg-bento .img-carousel-track {\n\n  display: flex;\n\n  height: 100%;\n\n  transition:\n    transform\n    0.5s\n    cubic-bezier(0.4,0,0.2,1);\n\n  will-change:\n    transform;\n}\n\n\n.mg-bento .img-carousel-slide {\n\n  flex:\n    0 0 100%;\n\n  height: 100%;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  background:\n    linear-gradient(\n      160deg,\n      #131313 0%,\n      #0a0a0a 100%\n    );\n}\n\n\n.mg-bento\n.img-carousel-slide img {\n\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n\n  padding: 16px;\n\n  object-fit: contain;\n\n  object-position: center;\n\n  user-select: none;\n\n  -webkit-user-drag:\n    none;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.img-carousel-slide img {\n\n  padding: 8px;\n\n  object-fit:\n    cover;\n}\n\n\n\/* ==========================================================\n   CAROUSEL ARROWS\n   ========================================================== *\/\n\n.mg-bento .carousel-arrow {\n\n  position: absolute;\n\n  top: 50%;\n\n  transform:\n    translateY(-50%);\n\n  z-index: 4;\n\n  width: 32px;\n\n  height: 32px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  padding: 0;\n\n  background:\n    rgba(0,0,0,0.60);\n\n  border:\n    1px solid\n    rgba(242,184,57,0.25);\n\n  border-radius: 50%;\n\n  cursor: pointer;\n\n  opacity: 0;\n\n  transition:\n    opacity 0.25s,\n    border-color 0.25s,\n    background 0.25s;\n\n  backdrop-filter:\n    blur(4px);\n\n  -webkit-backdrop-filter:\n    blur(4px);\n\n  appearance:\n    none;\n}\n\n\n.mg-bento\n.bento-card:hover\n.carousel-arrow {\n\n  opacity: 1;\n}\n\n\n.mg-bento\n.carousel-arrow:hover {\n\n  background:\n    rgba(242,184,57,0.18);\n\n  border-color:\n    rgba(242,184,57,0.60);\n}\n\n\n.mg-bento\n.carousel-arrow svg {\n\n  width: 14px;\n\n  height: 14px;\n\n  color:\n    var(--gold);\n\n  pointer-events:\n    none;\n}\n\n\n.mg-bento\n.carousel-arrow.prev {\n\n  left: 12px;\n}\n\n\n.mg-bento\n.carousel-arrow.next {\n\n  right: 12px;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.carousel-arrow {\n\n  width: 26px;\n\n  height: 26px;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.carousel-arrow.prev {\n\n  left: 8px;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.carousel-arrow.next {\n\n  right: 8px;\n}\n\n\n\/* ==========================================================\n   DOTS\n   ========================================================== *\/\n\n.mg-bento .carousel-dots {\n\n  position: absolute;\n\n  bottom: 14px;\n\n  left: 50%;\n\n  transform:\n    translateX(-50%);\n\n  display: flex;\n\n  gap: 5px;\n\n  z-index: 4;\n\n  pointer-events:\n    none;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.carousel-dots {\n\n  bottom: 8px;\n\n  gap: 4px;\n}\n\n\n.mg-bento\n.carousel-dot {\n\n  width: 5px;\n\n  height: 5px;\n\n  border-radius:\n    50%;\n\n  background:\n    rgba(255,255,255,0.25);\n\n  transition:\n    background 0.3s,\n    transform 0.3s;\n}\n\n\n.mg-bento\n.carousel-dot.active {\n\n  background:\n    var(--gold);\n\n  transform:\n    scale(1.4);\n}\n\n\n\/* ==========================================================\n   COUNTER\n   ========================================================== *\/\n\n.mg-bento\n.carousel-counter {\n\n  position: absolute;\n\n  top: 12px;\n\n  left: 14px;\n\n  z-index: 4;\n\n  color:\n    rgba(255,255,255,0.45);\n\n  font-size:\n    10px;\n\n  font-weight:\n    600;\n\n  letter-spacing:\n    0.12em;\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   CARD CONTENT\n   ========================================================== *\/\n\n.mg-bento\n.card-info {\n\n  padding:\n    16px\n    20px\n    20px;\n}\n\n\n.mg-bento\n.bento-card.featured\n.card-info {\n\n  padding:\n    20px\n    24px\n    24px;\n}\n\n\n\/* CATEGORY *\/\n\n.mg-bento\n.card-category {\n\n  display: block;\n\n  margin-bottom:\n    8px;\n\n  color:\n    var(--orange);\n\n  font-size:\n    10px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    0.12em;\n\n  line-height:\n    1.35;\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* ==========================================================\n   PROJECT TITLES\n   20% SMALLER\n   ========================================================== *\/\n\n.mg-bento\n.card-title {\n\n  display: block;\n\n  margin: 0;\n\n  color:\n    var(--text-primary);\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n\n  font-weight:\n    600;\n\n  letter-spacing:\n    -0.02em;\n\n  line-height:\n    1.22;\n\n  text-wrap:\n    balance;\n}\n\n\n.mg-bento\n.bento-card.featured\n.card-title {\n\n  font-size:\n    clamp(\n      20px,\n      1.6vw,\n      26px\n    );\n\n  margin-bottom:\n    10px;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.card-title {\n\n  font-size:\n    clamp(\n      16px,\n      1.1vw,\n      18px\n    );\n}\n\n\n\/* ==========================================================\n   CARD DESCRIPTIONS\n   ========================================================== *\/\n\n.mg-bento\n.card-desc {\n\n  margin:\n    8px\n    0\n    0;\n\n  color:\n    var(--text-secondary);\n\n  font-size:\n    13px;\n\n  font-weight:\n    400;\n\n  line-height:\n    1.55;\n\n  letter-spacing:\n    -0.01em;\n\n  display:\n    -webkit-box;\n\n  -webkit-box-orient:\n    vertical;\n\n  overflow:\n    hidden;\n}\n\n\n.mg-bento\n.bento-card.featured\n.card-desc {\n\n  font-size:\n    14px;\n\n  -webkit-line-clamp:\n    3;\n}\n\n\n.mg-bento\n.bento-card:not(.featured)\n.card-desc {\n\n  font-size:\n    12.5px;\n\n  -webkit-line-clamp:\n    2;\n}\n\n\n\/* ==========================================================\n   DIVIDER\n   ========================================================== *\/\n\n.mg-bento\n.card-divider {\n\n  height: 1px;\n\n  margin:\n    0\n    24px;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(242,184,57,0.30),\n      transparent\n    );\n}\n\n\n\/* ==========================================================\n   TAGS\n   ========================================================== *\/\n\n.mg-bento\n.card-tags {\n\n  display: flex;\n\n  gap: 6px;\n\n  flex-wrap:\n    wrap;\n\n  padding:\n    12px\n    24px\n    20px;\n}\n\n\n.mg-bento\n.card-tag {\n\n  padding:\n    4px\n    9px;\n\n  border:\n    1px solid\n    rgba(255,255,255,0.08);\n\n  border-radius:\n    4px;\n\n  background:\n    rgba(255,255,255,0.04);\n\n  color:\n    var(--text-muted);\n\n  font-size:\n    9px;\n\n  font-weight:\n    600;\n\n  letter-spacing:\n    0.10em;\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* ==========================================================\n   CTA\n   ========================================================== *\/\n\n.mg-bento\n.cta-container {\n\n  position: relative;\n\n  z-index: 2;\n\n  margin-top:\n    36px;\n\n  padding:\n    0\n    25px;\n\n  text-align:\n    center;\n}\n\n\n.mg-bento\n.view-all-btn {\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap: 12px;\n\n  padding:\n    14px\n    30px;\n\n  border-radius:\n    999px;\n\n  background:\n    linear-gradient(\n      135deg,\n      var(--gold),\n      var(--orange)\n    );\n\n  color:\n    var(--dark-bg);\n\n  font-size:\n    14px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    0.02em;\n\n  line-height:\n    1;\n\n  text-decoration:\n    none;\n\n  white-space:\n    nowrap;\n\n  box-shadow:\n    0 6px 28px\n    rgba(242,184,57,0.28);\n\n  transition:\n    transform 0.3s ease,\n    box-shadow 0.3s ease;\n}\n\n\n.mg-bento\n.view-all-btn:hover {\n\n  transform:\n    translateY(-3px);\n\n  box-shadow:\n    0 12px 40px\n    rgba(242,184,57,0.42);\n\n  color:\n    var(--dark-bg);\n\n  text-decoration:\n    none;\n}\n\n\n.mg-bento\n.view-all-btn svg {\n\n  width:\n    17px;\n\n  height:\n    17px;\n\n  flex-shrink:\n    0;\n\n  transition:\n    transform 0.3s ease;\n}\n\n\n.mg-bento\n.view-all-btn:hover svg {\n\n  transform:\n    translateX(5px);\n}\n\n\n\/* ==========================================================\n   LAPTOP\n   ========================================================== *\/\n\n@media (max-width: 1180px) {\n\n  .mg-bento\n  .apple-headline,\n\n  .mg-bento\n  .apple-subhead {\n\n    font-size:\n      clamp(\n        32px,\n        3.85vw,\n        48px\n      );\n  }\n\n\n  .mg-bento\n  .bento-grid {\n\n    grid-template-columns:\n      1fr\n      1.5fr\n      1fr;\n\n    gap:\n      12px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET LANDSCAPE\n   ========================================================== *\/\n\n@media (max-width: 1024px) {\n\n  .mg-bento\n  .section-header {\n\n    max-width:\n      860px;\n\n    padding:\n      0\n      22px;\n  }\n\n\n  .mg-bento\n  .apple-headline,\n\n  .mg-bento\n  .apple-subhead {\n\n    font-size:\n      clamp(\n        32px,\n        4.8vw,\n        46px\n      );\n  }\n\n\n  .mg-bento\n  .apple-body {\n\n    font-size:\n      clamp(\n        16px,\n        1.7vw,\n        18px\n      );\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .card-title {\n\n    font-size:\n      clamp(\n        20px,\n        2.4vw,\n        24px\n      );\n  }\n\n\n  .mg-bento\n  .bento-card:not(.featured)\n  .card-title {\n\n    font-size:\n      clamp(\n        16px,\n        1.6vw,\n        18px\n      );\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET PORTRAIT\n   ========================================================== *\/\n\n@media (max-width: 900px) {\n\n  .mg-bento\n  .bento-grid {\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n    grid-template-rows:\n      auto;\n  }\n\n\n  .mg-bento\n  .bento-card.featured {\n\n    grid-column:\n      1 \/ 3;\n\n    grid-row:\n      auto;\n  }\n\n\n  .mg-bento\n  .bento-grid\n  > .bento-card:not(.featured) {\n\n    grid-column:\n      auto;\n\n    grid-row:\n      auto;\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .viewer-container {\n\n    height:\n      280px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n  .mg-bento {\n\n    padding:\n      0\n      16px;\n  }\n\n\n  .mg-bento\n  .projects-section {\n\n    width:\n      calc(100% + 32px);\n\n    margin-left:\n      -16px;\n\n    padding:\n      44px\n      0;\n  }\n\n\n  .mg-bento\n  .section-header {\n\n    max-width:\n      650px;\n\n    margin-bottom:\n      30px;\n\n    padding:\n      0\n      18px;\n  }\n\n\n  .mg-bento\n  .apple-headline,\n\n  .mg-bento\n  .apple-subhead {\n\n    font-size:\n      clamp(\n        30px,\n        6.4vw,\n        45px\n      );\n\n    line-height:\n      1.02;\n  }\n\n\n  .mg-bento\n  .apple-subhead {\n\n    margin-top:\n      0.11em;\n\n    margin-bottom:\n      20px;\n  }\n\n\n  .mg-bento\n  .apple-body-wrap {\n\n    max-width:\n      600px;\n  }\n\n\n  .mg-bento\n  .apple-body {\n\n    font-size:\n      16px;\n\n    line-height:\n      1.55;\n  }\n\n\n  .mg-bento\n  .bento-grid {\n\n    gap:\n      12px;\n\n    padding:\n      0\n      16px;\n  }\n\n\n  .mg-bento\n  .cta-container {\n\n    padding:\n      0\n      16px;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 560px) {\n\n  .mg-bento\n  .bento-grid {\n\n    grid-template-columns:\n      1fr;\n  }\n\n\n  .mg-bento\n  .bento-card.featured {\n\n    grid-column:\n      1;\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .viewer-container {\n\n    height:\n      230px;\n  }\n\n\n  .mg-bento\n  .bento-card:not(.featured)\n  .viewer-container {\n\n    height:\n      165px;\n  }\n\n\n  .mg-bento\n  .card-info {\n\n    padding:\n      18px\n      18px\n      20px;\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .card-info {\n\n    padding:\n      20px\n      20px\n      22px;\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .card-title,\n\n  .mg-bento\n  .bento-card:not(.featured)\n  .card-title {\n\n    font-size:\n      clamp(\n        17px,\n        4.5vw,\n        20px\n      );\n  }\n\n\n  .mg-bento\n  .card-desc {\n\n    font-size:\n      14px;\n\n    line-height:\n      1.55;\n  }\n\n}\n\n\n\/* ==========================================================\n   PHONE\n   ========================================================== *\/\n\n@media (max-width: 480px) {\n\n  .mg-bento\n  .section-header {\n\n    width:\n      100%;\n\n    max-width:\n      420px;\n\n    margin-bottom:\n      27px;\n\n    padding:\n      0\n      14px;\n  }\n\n\n  .mg-bento\n  .apple-headline,\n\n  .mg-bento\n  .apple-subhead {\n\n    font-size:\n      clamp(\n        27px,\n        8.4vw,\n        38px\n      );\n\n    line-height:\n      1.03;\n\n    letter-spacing:\n      -0.038em;\n  }\n\n\n  .mg-bento\n  .apple-subhead {\n\n    margin-top:\n      0.13em;\n\n    margin-bottom:\n      19px;\n  }\n\n\n  .mg-bento\n  .apple-body {\n\n    max-width:\n      380px;\n\n    font-size:\n      16px;\n\n    line-height:\n      1.5;\n  }\n\n\n  .mg-bento\n  .bento-grid {\n\n    padding:\n      0\n      12px;\n  }\n\n\n  .mg-bento\n  .view-all-btn {\n\n    width:\n      min(\n        100%,\n        310px\n      );\n\n    min-height:\n      52px;\n\n    padding:\n      14px\n      22px;\n  }\n\n}\n\n\n\/* ==========================================================\n   VERY SMALL PHONE\n   ========================================================== *\/\n\n@media (max-width: 380px) {\n\n  .mg-bento\n  .apple-headline,\n\n  .mg-bento\n  .apple-subhead {\n\n    font-size:\n      clamp(\n        25px,\n        8.4vw,\n        32px\n      );\n  }\n\n\n  .mg-bento\n  .apple-body {\n\n    font-size:\n      15.5px;\n  }\n\n\n  .mg-bento\n  .bento-card.featured\n  .card-title,\n\n  .mg-bento\n  .bento-card:not(.featured)\n  .card-title {\n\n    font-size:\n      17px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TOUCH\n   ========================================================== *\/\n\n@media (hover: none) {\n\n  .mg-bento\n  .bento-card:hover {\n\n    transform:\n      none;\n\n    border-color:\n      var(--glass-border);\n\n    box-shadow:\n      none;\n  }\n\n\n  .mg-bento\n  .carousel-arrow {\n\n    opacity:\n      1;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-bento\n  .apple-body {\n\n    opacity:\n      1;\n\n    transform:\n      none;\n\n    transition:\n      none;\n  }\n\n\n  .mg-bento\n  .bento-card {\n\n    transition:\n      none;\n  }\n\n\n  .mg-bento\n  .rotate-hint svg {\n\n    animation:\n      none;\n  }\n\n}\n\n<\/style>\n\n\n\n<div class=\"mg-bento\">\n\n  <section class=\"projects-section\">\n\n\n    <!-- HEADER -->\n\n    <div class=\"section-header\">\n\n      <h2 class=\"apple-headline\">\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435.\n      <\/h2>\n\n      <p class=\"apple-subhead\">\n        \u041c\u044b \u0442\u043e\u0436\u0435.\n      <\/p>\n\n      <div class=\"apple-body-wrap\">\n\n        <p\n          class=\"apple-body\"\n          id=\"mg-apple-body\"\n        >\n          \u041c\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b\n          \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u043e\u0449\u0435,\n          \u0442\u043e\u0447\u043d\u0435\u0435 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0435.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- PROJECT GRID -->\n\n    <div class=\"bento-grid\">\n\n\n      <!-- FEATURED -->\n\n      <article class=\"bento-card featured\">\n\n        <div class=\"viewer-container\">\n\n          <div\n            class=\"img-carousel\"\n            id=\"kvou-carousel\"\n          >\n\n            <div\n              class=\"img-carousel-track\"\n              id=\"kvou-track\">\n            <\/div>\n\n\n            <button\n              class=\"carousel-arrow prev\"\n              id=\"kvou-prev\"\n              aria-label=\"\u041d\u0430\u0437\u0430\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M15 18l-6-6 6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <button\n              class=\"carousel-arrow next\"\n              id=\"kvou-next\"\n              aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M9 18l6-6-6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <div\n              class=\"carousel-dots\"\n              id=\"kvou-dots\">\n            <\/div>\n\n\n            <span\n              class=\"carousel-counter\"\n              id=\"kvou-counter\"\n            >\n              1 \/ 16\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"featured-badge\">\n          Featured\n        <\/div>\n\n\n        <div class=\"card-info\">\n\n          <span class=\"card-category\">\n            \u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437 \u00b7 \u0413\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438\n          <\/span>\n\n          <span class=\"card-title\">\n            \u041a\u0412\u041e\u0423 \u0434\u043b\u044f \u0413\u0422\u0423\n          <\/span>\n\n          <p class=\"card-desc\">\n            \u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u043e\u0435 \u0432\u043e\u0437\u0434\u0443\u0445\u043e\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f\n            \u0433\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a. \u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0443\u043f\u0435\u043d\u0447\u0430\u0442\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n            \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430 \u0441 \u0438\u043d\u0435\u0440\u0446\u0438\u043e\u043d\u043d\u044b\u043c,\n            \u043a\u043e\u0430\u043b\u0435\u0441\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u0438 \u0442\u043e\u043d\u043a\u043e\u0439 \u043e\u0447\u0438\u0441\u0442\u043a\u043e\u0439.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"card-divider\"><\/div>\n\n\n        <div class=\"card-tags\">\n\n          <span class=\"card-tag\">\n            SolidWorks\n          <\/span>\n\n          <span class=\"card-tag\">\n            \u041a\u0414 + \u0422\u0414\n          <\/span>\n\n          <span class=\"card-tag\">\n            3D-\u043c\u043e\u0434\u0435\u043b\u044c\n          <\/span>\n\n          <span class=\"card-tag\">\n            \u0420\u0430\u0441\u0447\u0451\u0442\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- \u041e\u042d\u042150 -->\n\n      <article class=\"bento-card\">\n\n        <div class=\"viewer-container\">\n\n          <div\n            class=\"img-carousel\"\n            id=\"oes50-carousel\"\n          >\n\n            <div\n              class=\"img-carousel-track\"\n              id=\"oes50-track\">\n            <\/div>\n\n\n            <button\n              class=\"carousel-arrow prev\"\n              id=\"oes50-prev\"\n              aria-label=\"\u041d\u0430\u0437\u0430\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M15 18l-6-6 6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <button\n              class=\"carousel-arrow next\"\n              id=\"oes50-next\"\n              aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M9 18l6-6-6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <div\n              class=\"carousel-dots\"\n              id=\"oes50-dots\">\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"card-info\">\n\n          <span class=\"card-category\">\n            \u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435\n          <\/span>\n\n          <span class=\"card-title\">\n            \u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043a\u043e-\u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u041e\u042d\u042150\n          <\/span>\n\n          <p class=\"card-desc\">\n            \u0412\u0441\u0435\u043f\u043e\u0433\u043e\u0434\u043d\u043e\u0435 \u0431\u043b\u043e\u0447\u043d\u043e-\u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u043b\u0435\u0441\u043a\u043e\u043f\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e\n            \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u0430 \u0441 \u043e\u0442\u043a\u0430\u0442\u043d\u043e\u0439 \u043a\u0440\u044b\u0448\u0435\u0439, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043f\u0440\u0438\u0432\u043e\u0434\u043e\u043c \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c\n            \u043a\u0440\u0430\u043d-\u0431\u0430\u043b\u043e\u0447\u043d\u044b\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- REACTOR -->\n\n      <article class=\"bento-card\">\n\n        <div class=\"viewer-container\">\n\n          <model-viewer\n            src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reactor2.glb\"\n            alt=\"\u0420\u0435\u0430\u043a\u0442\u043e\u0440\"\n            camera-controls=\"\"\n            disable-zoom=\"\"\n            auto-rotate=\"\"\n            rotation-per-second=\"25deg\"\n            shadow-intensity=\"1.2\"\n            shadow-softness=\"0\"\n            exposure=\"1.1\"\n            environment-image=\"neutral\"\n            camera-orbit=\"45deg 70deg 105%\"\n            interaction-prompt=\"none\"\n            loading=\"lazy\"\n          >\n          <\/model-viewer>\n\n\n          <div class=\"rotate-hint\">\n\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n            >\n              <path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"><\/path>\n            <\/svg>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"card-info\">\n\n          <span class=\"card-category\">\n            \u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f\n          <\/span>\n\n          <span class=\"card-title\">\n            \u0420\u0435\u0430\u043a\u0442\u043e\u0440 \u0442\u0435\u0440\u043c\u043e\u043a\u0430\u0442\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u044f\n          <\/span>\n\n          <p class=\"card-desc\">\n            \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0441\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u043e\u0434.\n            \u041e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u043b\u0430\u0436\u043d\u044b\u0445 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0432 \u043f\u0441\u0435\u0432\u0434\u043e\u043e\u0436\u0438\u0436\u0435\u043d\u043d\u043e\u043c \u0441\u043b\u043e\u0435.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- POWER PLANTS -->\n\n      <article class=\"bento-card\">\n\n        <div class=\"viewer-container\">\n\n          <div\n            class=\"img-carousel\"\n            id=\"porshn-carousel\"\n          >\n\n            <div\n              class=\"img-carousel-track\"\n              id=\"porshn-track\">\n            <\/div>\n\n\n            <button\n              class=\"carousel-arrow prev\"\n              id=\"porshn-prev\"\n              aria-label=\"\u041d\u0430\u0437\u0430\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M15 18l-6-6 6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <button\n              class=\"carousel-arrow next\"\n              id=\"porshn-next\"\n              aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M9 18l6-6-6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <div\n              class=\"carousel-dots\"\n              id=\"porshn-dots\">\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"card-info\">\n\n          <span class=\"card-category\">\n            \u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430\n          <\/span>\n\n          <span class=\"card-title\">\n            \u041f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438 0,75\u20131 \u041c\u0412\u0442\n          <\/span>\n\n          <p class=\"card-desc\">\n            \u0414\u0438\u0437\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u0433\u0430\u0437\u043e\u043f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438\n            \u0431\u043b\u043e\u0447\u043d\u043e-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.\n            \u0420\u0430\u0431\u043e\u0442\u0430 \u043d\u0430 \u043f\u043e\u043f\u0443\u0442\u043d\u043e\u043c \u0433\u0430\u0437\u0435 \u0438 \u0442\u044f\u0436\u0451\u043b\u043e\u043c \u0442\u043e\u043f\u043b\u0438\u0432\u0435.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n\n      <!-- FILTER -->\n\n      <article class=\"bento-card\">\n\n        <div class=\"viewer-container\">\n\n          <div\n            class=\"img-carousel\"\n            id=\"filter-carousel\"\n          >\n\n            <div\n              class=\"img-carousel-track\"\n              id=\"filter-track\">\n            <\/div>\n\n\n            <button\n              class=\"carousel-arrow prev\"\n              id=\"filter-prev\"\n              aria-label=\"\u041d\u0430\u0437\u0430\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M15 18l-6-6 6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <button\n              class=\"carousel-arrow next\"\n              id=\"filter-next\"\n              aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n              >\n                <path d=\"M9 18l6-6-6-6\"><\/path>\n              <\/svg>\n            <\/button>\n\n\n            <div\n              class=\"carousel-dots\"\n              id=\"filter-dots\">\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"card-info\">\n\n          <span class=\"card-category\">\n            \u0420\u0430\u0441\u0447\u0451\u0442\u044b\n          <\/span>\n\n          <span class=\"card-title\">\n            \u0420\u0430\u0441\u0447\u0451\u0442 \u043d\u0430 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0440\u043f\u0443\u0441\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0424\u0421-400-1\n          <\/span>\n\n          <p class=\"card-desc\">\n            \u0410\u043d\u0430\u043b\u0438\u0437 \u043d\u0430\u043f\u0440\u044f\u0436\u0451\u043d\u043d\u043e-\u0434\u0435\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u0440\u043f\u0443\u0441\u0430\n            \u0432 ANSYS \u043f\u043e \u0413\u041e\u0421\u0422 34233.1-2017. \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u044b \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c\n            \u0438 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n    <\/div>\n\n\n\n    <!-- CTA -->\n\n    <div class=\"cta-container\">\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=1714\"\n        class=\"view-all-btn\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n\n        \u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"M5 12h14M12 5l7 7-7 7\"><\/path>\n        <\/svg>\n\n      <\/a>\n\n    <\/div>\n\n\n  <\/section>\n\n<\/div>\n\n\n\n<script>\n\n(function () {\n\n\n  \/* ========================================================\n     BODY REVEAL\n     ======================================================== *\/\n\n  (function initAppleBody() {\n\n    var body =\n      document.getElementById(\n        \"mg-apple-body\"\n      );\n\n    if (!body) return;\n\n\n    function reveal() {\n\n      body.classList.add(\n        \"is-in\"\n      );\n\n    }\n\n\n    if (\n      \"IntersectionObserver\"\n      in window\n    ) {\n\n      var io =\n        new IntersectionObserver(\n\n          function (entries) {\n\n            entries.forEach(\n              function (entry) {\n\n                if (\n                  entry.isIntersecting\n                ) {\n\n                  setTimeout(\n                    reveal,\n                    280\n                  );\n\n                  io.disconnect();\n\n                }\n\n              }\n            );\n\n          },\n\n          {\n            threshold: 0.35\n          }\n\n        );\n\n\n      io.observe(\n        body.closest(\n          \".section-header\"\n        )\n        ||\n        body\n      );\n\n    }\n\n    else {\n\n      setTimeout(\n        reveal,\n        400\n      );\n\n    }\n\n  })();\n\n\n\n  \/* ========================================================\n     MODEL VIEWER\n     ======================================================== *\/\n\n  document\n    .querySelectorAll(\n      \".mg-bento model-viewer\"\n    )\n    .forEach(\n      function (viewer) {\n\n        viewer.addEventListener(\n          \"camera-change\",\n\n          function (e) {\n\n            if (\n              e.detail\n              &&\n              e.detail.source\n              ===\n              \"user-interaction\"\n            ) {\n\n              viewer.autoRotate =\n                false;\n\n\n              clearTimeout(\n                viewer._mgResume\n              );\n\n\n              viewer._mgResume =\n                setTimeout(\n\n                  function () {\n\n                    viewer.autoRotate =\n                      true;\n\n                  },\n\n                  3000\n\n                );\n\n            }\n\n          }\n\n        );\n\n      }\n\n    );\n\n\n\n  \/* ========================================================\n     CAROUSEL BUILDER\n     ======================================================== *\/\n\n  function initCarousel(opts) {\n\n    var BASE =\n      opts.base\n      ||\n      \"https:\/\/mechanogurus.ru\";\n\n\n    var images =\n      opts.images;\n\n\n    var track =\n      document.getElementById(\n        opts.trackId\n      );\n\n\n    var dotsEl =\n      document.getElementById(\n        opts.dotsId\n      );\n\n\n    var counter =\n      opts.counterId\n      ?\n      document.getElementById(\n        opts.counterId\n      )\n      :\n      null;\n\n\n    var prevBtn =\n      document.getElementById(\n        opts.prevId\n      );\n\n\n    var nextBtn =\n      document.getElementById(\n        opts.nextId\n      );\n\n\n    var carousel =\n      document.getElementById(\n        opts.carouselId\n      );\n\n\n    if (\n      !track\n      ||\n      !dotsEl\n      ||\n      !prevBtn\n      ||\n      !nextBtn\n      ||\n      !carousel\n    ) {\n\n      return;\n\n    }\n\n\n    var total =\n      images.length;\n\n\n    var current =\n      0;\n\n\n    var autoTimer;\n\n\n\n    images.forEach(\n\n      function (src, i) {\n\n        var slide =\n          document.createElement(\n            \"div\"\n          );\n\n\n        slide.className =\n          \"img-carousel-slide\";\n\n\n        var img =\n          document.createElement(\n            \"img\"\n          );\n\n\n        img.src =\n          src.indexOf(\"http\") === 0\n          ?\n          src\n          :\n          BASE + src;\n\n\n        img.alt =\n          (\n            opts.altPrefix\n            ||\n            \"\u0421\u043b\u0430\u0439\u0434\"\n          )\n          +\n          \" \"\n          +\n          (i + 1);\n\n\n        img.loading =\n          i === 0\n          ?\n          \"eager\"\n          :\n          \"lazy\";\n\n\n        img.draggable =\n          false;\n\n\n        slide.appendChild(\n          img\n        );\n\n\n        track.appendChild(\n          slide\n        );\n\n\n        var dot =\n          document.createElement(\n            \"span\"\n          );\n\n\n        dot.className =\n          \"carousel-dot\"\n          +\n          (\n            i === 0\n            ?\n            \" active\"\n            :\n            \"\"\n          );\n\n\n        dotsEl.appendChild(\n          dot\n        );\n\n      }\n\n    );\n\n\n    var dots =\n      dotsEl.querySelectorAll(\n        \".carousel-dot\"\n      );\n\n\n\n    function goTo(idx) {\n\n      if (idx < 0) {\n\n        idx =\n          total - 1;\n\n      }\n\n\n      if (\n        idx >= total\n      ) {\n\n        idx = 0;\n\n      }\n\n\n      current =\n        idx;\n\n\n      track.style.transform =\n        \"translateX(-\"\n        +\n        (current * 100)\n        +\n        \"%)\";\n\n\n      dots.forEach(\n\n        function (d, i) {\n\n          d.classList.toggle(\n            \"active\",\n            i === current\n          );\n\n        }\n\n      );\n\n\n      if (counter) {\n\n        counter.textContent =\n          (current + 1)\n          +\n          \" \/ \"\n          +\n          total;\n\n      }\n\n    }\n\n\n\n    function startAuto() {\n\n      clearInterval(\n        autoTimer\n      );\n\n\n      autoTimer =\n        setInterval(\n\n          function () {\n\n            goTo(\n              current + 1\n            );\n\n          },\n\n          opts.interval\n          ||\n          3500\n\n        );\n\n    }\n\n\n\n    function stopAuto() {\n\n      clearInterval(\n        autoTimer\n      );\n\n    }\n\n\n\n    prevBtn.addEventListener(\n\n      \"click\",\n\n      function () {\n\n        stopAuto();\n\n        goTo(\n          current - 1\n        );\n\n        startAuto();\n\n      }\n\n    );\n\n\n\n    nextBtn.addEventListener(\n\n      \"click\",\n\n      function () {\n\n        stopAuto();\n\n        goTo(\n          current + 1\n        );\n\n        startAuto();\n\n      }\n\n    );\n\n\n\n    var touchStartX =\n      0;\n\n\n    carousel.addEventListener(\n\n      \"touchstart\",\n\n      function (e) {\n\n        touchStartX =\n          e.changedTouches[0]\n            .clientX;\n\n        stopAuto();\n\n      },\n\n      {\n        passive: true\n      }\n\n    );\n\n\n    carousel.addEventListener(\n\n      \"touchend\",\n\n      function (e) {\n\n        var dx =\n          e.changedTouches[0]\n            .clientX\n          -\n          touchStartX;\n\n\n        if (\n          Math.abs(dx)\n          >\n          40\n        ) {\n\n          goTo(\n\n            current\n            +\n            (\n              dx < 0\n              ?\n              1\n              :\n              -1\n            )\n\n          );\n\n        }\n\n\n        startAuto();\n\n      },\n\n      {\n        passive: true\n      }\n\n    );\n\n\n    carousel.addEventListener(\n      \"mouseenter\",\n      stopAuto\n    );\n\n\n    carousel.addEventListener(\n      \"mouseleave\",\n      startAuto\n    );\n\n\n    if (counter) {\n\n      counter.textContent =\n        \"1 \/ \"\n        +\n        total;\n\n    }\n\n\n    startAuto();\n\n  }\n\n\n\n  \/* ========================================================\n     K\u0412\u041e\u0423\n     ======================================================== *\/\n\n  initCarousel({\n\n    carouselId:\n      \"kvou-carousel\",\n\n    trackId:\n      \"kvou-track\",\n\n    dotsId:\n      \"kvou-dots\",\n\n    counterId:\n      \"kvou-counter\",\n\n    prevId:\n      \"kvou-prev\",\n\n    nextId:\n      \"kvou-next\",\n\n    altPrefix:\n      \"\u041a\u0412\u041e\u0423\",\n\n    interval:\n      3500,\n\n    images: [\n\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FH_1_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FH_2_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_1_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_2_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_3_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_4_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_5_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FV_2_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-1FV_6_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FV_1_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FV_3_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FH_1_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FH_2_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-2FH_3_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-3FH_1_logo.png\",\n      \"\/wp-content\/uploads\/2026\/03\/KVOU-3FH_2_logo.png\"\n\n    ]\n\n  });\n\n\n\n  \/* ========================================================\n     POWER PLANTS\n     ======================================================== *\/\n\n  initCarousel({\n\n    carouselId:\n      \"porshn-carousel\",\n\n    trackId:\n      \"porshn-track\",\n\n    dotsId:\n      \"porshn-dots\",\n\n    prevId:\n      \"porshn-prev\",\n\n    nextId:\n      \"porshn-next\",\n\n    altPrefix:\n      \"\u041f\u043e\u0440\u0448\u043d\u0435\u0432\u0430\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u044f\",\n\n    interval:\n      4000,\n\n    images: [\n\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0977-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0976-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0830-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0841-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_1001-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0999-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0978-scaled.jpeg\",\n      \"\/wp-content\/uploads\/2026\/03\/IMG_0967.jpeg\"\n\n    ]\n\n  });\n\n\n\n  \/* ========================================================\n     \u041e\u042d\u042150\n     ======================================================== *\/\n\n  initCarousel({\n\n    carouselId:\n      \"oes50-carousel\",\n\n    trackId:\n      \"oes50-track\",\n\n    dotsId:\n      \"oes50-dots\",\n\n    prevId:\n      \"oes50-prev\",\n\n    nextId:\n      \"oes50-next\",\n\n    altPrefix:\n      \"\u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u041e\u042d\u042150\",\n\n    interval:\n      4200,\n\n    images: [\n\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-11.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-02.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-03.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-04.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-05.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-06.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-07.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-08.jpg\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-09.png\",\n      \"\/wp-content\/uploads\/2026\/04\/Telescope-10.png\"\n\n    ]\n\n  });\n\n\n\n  \/* ========================================================\n     FILTER STRENGTH\n     ======================================================== *\/\n\n  initCarousel({\n\n    carouselId:\n      \"filter-carousel\",\n\n    trackId:\n      \"filter-track\",\n\n    dotsId:\n      \"filter-dots\",\n\n    prevId:\n      \"filter-prev\",\n\n    nextId:\n      \"filter-next\",\n\n    altPrefix:\n      \"\u0420\u0430\u0441\u0447\u0451\u0442 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0424\u0421-400-1\",\n\n    interval:\n      3800,\n\n    images: [\n\n      \"\/wp-content\/uploads\/2026\/03\/filter_strength_1.jpg\",\n      \"\/wp-content\/uploads\/2026\/03\/filter_strength_4.jpg\",\n      \"\/wp-content\/uploads\/2026\/03\/filter_strength_3.jpg\",\n      \"\/wp-content\/uploads\/2026\/03\/filter_strength_2.jpg\"\n\n    ]\n\n  });\n\n\n})();\n\n<\/script>\n\n\n\n\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- MECHANOGURUS | Engineering Backbone | WordPress Custom HTML -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;600;700;800&amp;family=Montserrat:wght@700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* =========================================================\n   WORDPRESS WIDTH RESET\n   ========================================================= *\/\n\n.wp-block-html:has(.mg-backbone),\n.entry-content > .wp-block-html:has(.mg-backbone),\n.wp-block-post-content > .wp-block-html:has(.mg-backbone),\n.wp-block-group:has(.mg-backbone),\n.wp-block-group:has(.mg-backbone) > .wp-block-group__inner-container,\n.is-layout-constrained:has(.mg-backbone) {\n    display:block !important;\n    width:100% !important;\n    max-width:none !important;\n    margin-left:auto !important;\n    margin-right:auto !important;\n    padding-left:0 !important;\n    padding-right:0 !important;\n    float:none !important;\n}\n\n\n\/* =========================================================\n   ROOT\n   ========================================================= *\/\n\n.mg-backbone,\n.mg-backbone *,\n.mg-backbone *::before,\n.mg-backbone *::after {\n    box-sizing:border-box;\n}\n\n.mg-backbone {\n    --orange:#f2a51a;\n    --orange-soft:rgba(242,165,26,.10);\n    --text:#ffffff;\n    --muted:rgba(255,255,255,.68);\n    --border:rgba(255,255,255,.13);\n\n    width:100% !important;\n    max-width:1400px !important;\n\n    margin:clamp(32px,5vw,76px) auto !important;\n\n    padding:\n        0\n        clamp(18px,3vw,34px);\n\n    overflow:hidden;\n\n    color:var(--text);\n    background:transparent !important;\n\n    font-family:\n        \"Manrope\",\n        \"Segoe UI\",\n        sans-serif;\n\n    -webkit-font-smoothing:antialiased;\n}\n\n.mg-backbone h2,\n.mg-backbone h3,\n.mg-backbone p {\n    margin:0;\n    padding:0;\n    color:inherit !important;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.mg-backbone__header {\n    width:100%;\n    max-width:none;\n\n    margin:\n        0 auto\n        clamp(38px,4vw,58px);\n\n    padding:0;\n\n    text-align:center;\n}\n\n.mg-backbone__title {\n    width:100%;\n    max-width:1320px;\n\n    margin-left:auto !important;\n    margin-right:auto !important;\n\n    font-family:\n        \"Montserrat\",\n        \"Manrope\",\n        sans-serif;\n\n    \/*\n       Reduced to match the hierarchy of other\n       homepage section headings.\n    *\/\n    font-size:\n        clamp(\n            1.9rem,\n            1.25rem + 1.45vw,\n            2.85rem\n        );\n\n    font-weight:800;\n\n    line-height:1.08;\n\n    letter-spacing:-.035em;\n\n    text-wrap:normal;\n}\n\n.mg-backbone__brand {\n    color:var(--orange) !important;\n}\n\n.mg-backbone__lead {\n    width:100%;\n    max-width:900px;\n\n    margin:\n        clamp(14px,1.5vw,20px)\n        auto\n        0 !important;\n\n    color:var(--muted) !important;\n\n    font-size:\n        clamp(\n            .9rem,\n            .85rem + .12vw,\n            .98rem\n        );\n\n    line-height:1.6;\n}\n\n\n\/* =========================================================\n   TIMELINE\n   ========================================================= *\/\n\n.mg-backbone__flow {\n    position:relative;\n\n    width:100%;\n    max-width:1180px;\n\n    margin:0 auto;\n\n    display:flex;\n    flex-direction:column;\n\n    gap:\n        clamp(\n            22px,\n            3vw,\n            38px\n        );\n}\n\n\n\/* central line *\/\n\n.mg-backbone__flow::before {\n    content:\"\";\n\n    position:absolute;\n\n    top:80px;\n    bottom:80px;\n\n    left:50%;\n\n    width:2px;\n\n    transform:\n        translateX(-50%);\n\n    background:\n        linear-gradient(\n            to bottom,\n            transparent 0,\n            var(--orange) 5%,\n            var(--orange) 95%,\n            transparent 100%\n        );\n\n    box-shadow:\n        0 0 8px\n        rgba(242,165,26,.32);\n}\n\n\n\/* =========================================================\n   CENTRAL LOGO NODE\n   ========================================================= *\/\n\n.mg-backbone__brand-node {\n    position:relative;\n    z-index:5;\n\n    width:\n        clamp(\n            112px,\n            11vw,\n            150px\n        );\n\n    aspect-ratio:1;\n\n    margin:\n        0 auto\n        clamp(10px,1vw,18px);\n\n    display:grid;\n    place-items:center;\n\n    border-radius:22px;\n\n    border:\n        1px solid\n        rgba(242,165,26,.42);\n\n    background:\n        rgba(8,8,8,.96);\n\n    box-shadow:\n        0 0 0 8px rgba(255,255,255,.018),\n        0 18px 55px rgba(0,0,0,.45),\n        0 0 35px rgba(242,165,26,.09);\n}\n\n.mg-backbone__brand-node::before {\n    content:\"\";\n\n    position:absolute;\n\n    inset:10px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.12);\n\n    border-radius:15px;\n}\n\n.mg-backbone__brand-node img {\n    position:relative;\n    z-index:2;\n\n    display:block;\n\n    width:68%;\n    height:auto;\n\n    object-fit:contain;\n}\n\n.mg-backbone__brand-node::after {\n    content:\"\";\n\n    position:absolute;\n\n    left:50%;\n    top:100%;\n\n    width:2px;\n    height:42px;\n\n    transform:\n        translateX(-50%);\n\n    background:\n        var(--orange);\n\n    box-shadow:\n        0 0 8px\n        rgba(242,165,26,.4);\n}\n\n\n\/* =========================================================\n   ROW\n   ========================================================= *\/\n\n.mg-backbone__row {\n    position:relative;\n    z-index:2;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,1fr)\n        84px\n        minmax(0,1fr);\n\n    align-items:center;\n}\n\n.mg-backbone__row--left\n.mg-backbone__card {\n    grid-column:1;\n}\n\n.mg-backbone__row--right\n.mg-backbone__card {\n    grid-column:3;\n}\n\n\n\/* =========================================================\n   CENTRAL NODE\n   ========================================================= *\/\n\n.mg-backbone__node {\n    position:absolute;\n\n    left:50%;\n    top:50%;\n\n    width:16px;\n    height:16px;\n\n    transform:\n        translate(-50%,-50%);\n\n    border:\n        2px solid\n        var(--orange);\n\n    border-radius:50%;\n\n    background:#070707;\n\n    box-shadow:\n        0 0 0 6px rgba(242,165,26,.08),\n        0 0 18px rgba(242,165,26,.35);\n\n    z-index:4;\n\n    transition:\n        transform .28s ease,\n        box-shadow .28s ease,\n        background .28s ease;\n}\n\n\n\/* =========================================================\n   HORIZONTAL CONNECTORS\n   ========================================================= *\/\n\n.mg-backbone__row--left::after,\n.mg-backbone__row--right::after {\n    content:\"\";\n\n    position:absolute;\n\n    top:50%;\n\n    height:2px;\n\n    box-shadow:\n        0 0 7px\n        rgba(242,165,26,.24);\n\n    z-index:1;\n}\n\n.mg-backbone__row--left::after {\n    left:\n        calc(\n            50% - 42px\n        );\n\n    width:42px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(242,165,26,.28),\n            var(--orange)\n        );\n}\n\n.mg-backbone__row--right::after {\n    left:50%;\n\n    width:42px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--orange),\n            rgba(242,165,26,.28)\n        );\n}\n\n\n\/* =========================================================\n   CARD\n   ========================================================= *\/\n\n.mg-backbone__card {\n    position:relative;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        48px\n        minmax(0,1fr);\n\n    gap:16px;\n\n    padding:\n        clamp(\n            18px,\n            2vw,\n            25px\n        );\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.045),\n            rgba(255,255,255,.018)\n        );\n\n    box-shadow:\n        0 14px 35px\n        rgba(0,0,0,.14);\n\n    transition:\n        transform .3s ease,\n        background .3s ease,\n        border-color .3s ease,\n        box-shadow .3s ease;\n}\n\n.mg-backbone__card:hover,\n.mg-backbone__card:focus,\n.mg-backbone__card.is-active {\n    outline:none;\n\n    transform:\n        translateY(-3px);\n\n    border-color:\n        rgba(242,165,26,.52);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(242,165,26,.09),\n            rgba(255,255,255,.025)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(0,0,0,.25),\n        inset 0 0 0 1px rgba(242,165,26,.04);\n}\n\n\n\/* active node *\/\n\n.mg-backbone__row:has(.mg-backbone__card:hover)\n.mg-backbone__node,\n\n.mg-backbone__row:has(.mg-backbone__card:focus)\n.mg-backbone__node,\n\n.mg-backbone__row:has(.mg-backbone__card.is-active)\n.mg-backbone__node {\n    transform:\n        translate(-50%,-50%)\n        scale(1.25);\n\n    background:\n        var(--orange);\n\n    box-shadow:\n        0 0 0 7px rgba(242,165,26,.11),\n        0 0 24px rgba(242,165,26,.62);\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n.mg-backbone__icon {\n    width:48px;\n    height:48px;\n\n    display:grid;\n    place-items:center;\n\n    border:\n        1px solid\n        rgba(242,165,26,.34);\n\n    border-radius:13px;\n\n    color:\n        var(--orange);\n\n    background:\n        rgba(242,165,26,.09);\n}\n\n.mg-backbone__icon svg {\n    width:23px;\n    height:23px;\n\n    fill:none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:1.8;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n\/* =========================================================\n   COPY\n   ========================================================= *\/\n\n.mg-backbone__copy {\n    min-width:0;\n}\n\n.mg-backbone__card-title {\n    font-size:\n        clamp(\n            1.02rem,\n            .93rem + .25vw,\n            1.18rem\n        );\n\n    font-weight:800;\n\n    line-height:1.3;\n\n    letter-spacing:-.015em;\n}\n\n.mg-backbone__text {\n    margin-top:\n        8px !important;\n\n    color:\n        var(--muted) !important;\n\n    font-size:\n        clamp(\n            .84rem,\n            .79rem + .14vw,\n            .94rem\n        );\n\n    line-height:1.58;\n}\n\n\n\/* =========================================================\n   END NODE\n   ========================================================= *\/\n\n.mg-backbone__end {\n    position:relative;\n    z-index:3;\n\n    width:12px;\n    height:12px;\n\n    margin:\n        6px auto 0;\n\n    border-radius:50%;\n\n    border:\n        2px solid\n        var(--orange);\n\n    background:#080808;\n\n    box-shadow:\n        0 0 0 5px\n        rgba(242,165,26,.08);\n}\n\n\n\/* =========================================================\n   CTA\n   ========================================================= *\/\n\n.mg-backbone__cta-wrap {\n    display:flex;\n    justify-content:center;\n\n    margin-top:\n        clamp(\n            38px,\n            5vw,\n            68px\n        );\n}\n\n.mg-backbone__cta {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n\n    gap:10px;\n\n    min-height:54px;\n\n    padding:\n        14px 24px;\n\n    border-radius:999px;\n\n    color:#111 !important;\n\n    background:\n        var(--orange);\n\n    font-family:\n        \"Montserrat\",\n        \"Manrope\",\n        sans-serif;\n\n    font-weight:800;\n\n    text-decoration:none !important;\n\n    box-shadow:\n        0 12px 30px\n        rgba(242,165,26,.22);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n.mg-backbone__cta:hover {\n    color:#111 !important;\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 18px 38px\n        rgba(242,165,26,.32);\n}\n\n.mg-backbone__cta svg {\n    width:18px;\n    height:18px;\n\n    fill:none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:2;\n}\n\n\n\/* =========================================================\n   TABLET \/ IPAD PORTRAIT\n   ========================================================= *\/\n\n@media (max-width:900px) {\n\n    .mg-backbone {\n        padding:\n            0\n            clamp(\n                18px,\n                4vw,\n                34px\n            );\n    }\n\n    .mg-backbone__header {\n        width:100%;\n        max-width:none;\n\n        margin-bottom:36px;\n    }\n\n    .mg-backbone__title {\n        width:100%;\n        max-width:none;\n\n        font-size:\n            clamp(\n                1.8rem,\n                3.6vw,\n                2.35rem\n            );\n\n        line-height:1.09;\n\n        letter-spacing:-.032em;\n\n        text-wrap:normal;\n    }\n\n    .mg-backbone__flow {\n        max-width:760px;\n\n        gap:22px;\n    }\n\n    .mg-backbone__flow::before {\n        left:34px;\n\n        top:104px;\n        bottom:36px;\n\n        transform:none;\n    }\n\n    .mg-backbone__brand-node {\n        margin-left:0;\n        margin-right:auto;\n\n        width:100px;\n\n        border-radius:18px;\n    }\n\n    .mg-backbone__brand-node::before {\n        inset:8px;\n\n        border-radius:12px;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:33px;\n\n        transform:none;\n\n        height:44px;\n    }\n\n    .mg-backbone__row {\n        display:block;\n\n        padding-left:84px;\n    }\n\n    .mg-backbone__row--left\n    .mg-backbone__card,\n\n    .mg-backbone__row--right\n    .mg-backbone__card {\n        width:100%;\n    }\n\n    .mg-backbone__node {\n        left:34px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:34px;\n\n        width:50px;\n\n        top:50%;\n\n        background:\n            linear-gradient(\n                90deg,\n                var(--orange),\n                rgba(242,165,26,.28)\n            );\n    }\n\n    .mg-backbone__end {\n        margin-left:28px;\n        margin-right:0;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width:640px) {\n\n    .mg-backbone {\n        margin:\n            26px auto\n            38px !important;\n\n        padding:\n            0 14px;\n    }\n\n\n    \/* Header *\/\n\n    .mg-backbone__header {\n        width:100%;\n        max-width:none;\n\n        margin-bottom:30px;\n    }\n\n    .mg-backbone__title {\n        width:100%;\n        max-width:none;\n\n        font-size:\n            clamp(\n                1.62rem,\n                6.5vw,\n                2rem\n            );\n\n        line-height:1.1;\n\n        letter-spacing:-.03em;\n\n        text-wrap:normal;\n    }\n\n    .mg-backbone__lead {\n        width:100%;\n        max-width:560px;\n\n        margin-top:\n            13px !important;\n\n        font-size:.9rem;\n\n        line-height:1.55;\n    }\n\n\n    \/* flow *\/\n\n    .mg-backbone__flow {\n        gap:16px;\n    }\n\n    .mg-backbone__flow::before {\n        left:22px;\n\n        top:82px;\n        bottom:28px;\n    }\n\n\n    \/* logo *\/\n\n    .mg-backbone__brand-node {\n        width:72px;\n\n        margin-left:0;\n\n        border-radius:14px;\n\n        box-shadow:\n            0 12px 36px rgba(0,0,0,.35),\n            0 0 24px rgba(242,165,26,.08);\n    }\n\n    .mg-backbone__brand-node::before {\n        inset:6px;\n\n        border-radius:9px;\n    }\n\n    .mg-backbone__brand-node img {\n        width:70%;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:21px;\n\n        height:30px;\n    }\n\n\n    \/* rows *\/\n\n    .mg-backbone__row {\n        padding-left:56px;\n    }\n\n    .mg-backbone__node {\n        left:22px;\n\n        width:13px;\n        height:13px;\n\n        border-width:2px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:22px;\n\n        width:34px;\n    }\n\n\n    \/* card *\/\n\n    .mg-backbone__card {\n        grid-template-columns:\n            40px\n            minmax(0,1fr);\n\n        gap:12px;\n\n        padding:\n            16px 14px;\n\n        border-radius:13px;\n\n        background:\n            rgba(255,255,255,.035);\n\n        box-shadow:none;\n    }\n\n    .mg-backbone__card:hover,\n    .mg-backbone__card:focus,\n    .mg-backbone__card.is-active {\n        transform:none;\n    }\n\n\n    \/* icon *\/\n\n    .mg-backbone__icon {\n        width:40px;\n        height:40px;\n\n        border-radius:10px;\n    }\n\n    .mg-backbone__icon svg {\n        width:20px;\n        height:20px;\n    }\n\n\n    \/* copy *\/\n\n    .mg-backbone__card-title {\n        font-size:1rem;\n\n        line-height:1.28;\n    }\n\n    .mg-backbone__text {\n        margin-top:\n            7px !important;\n\n        font-size:.84rem;\n\n        line-height:1.52;\n    }\n\n\n    \/* end *\/\n\n    .mg-backbone__end {\n        width:10px;\n        height:10px;\n\n        margin-left:17px;\n    }\n\n\n    \/* CTA *\/\n\n    .mg-backbone__cta-wrap {\n        margin-top:32px;\n    }\n\n    .mg-backbone__cta {\n        width:100%;\n        max-width:360px;\n\n        min-height:50px;\n\n        padding:\n            14px 18px;\n    }\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width:380px) {\n\n    .mg-backbone {\n        padding:\n            0 10px;\n    }\n\n    .mg-backbone__title {\n        font-size:1.58rem;\n    }\n\n    .mg-backbone__row {\n        padding-left:49px;\n    }\n\n    .mg-backbone__flow::before,\n    .mg-backbone__node {\n        left:18px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:18px;\n\n        width:31px;\n    }\n\n    .mg-backbone__brand-node {\n        width:66px;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:17px;\n    }\n\n    .mg-backbone__card {\n        grid-template-columns:\n            36px\n            minmax(0,1fr);\n\n        gap:10px;\n\n        padding:\n            14px 11px;\n    }\n\n    .mg-backbone__icon {\n        width:36px;\n        height:36px;\n    }\n\n    .mg-backbone__icon svg {\n        width:18px;\n        height:18px;\n    }\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n    .mg-backbone__card,\n    .mg-backbone__node,\n    .mg-backbone__cta {\n        transition:none;\n    }\n\n    .mg-backbone__card:hover,\n    .mg-backbone__cta:hover {\n        transform:none;\n    }\n}\n<\/style>\n\n\n<section\n    class=\"mg-backbone\"\n    aria-labelledby=\"mg-backbone-title\"\n>\n\n    <!-- HEADER -->\n\n    <header class=\"mg-backbone__header\">\n\n        <h2\n            class=\"mg-backbone__title\"\n            id=\"mg-backbone-title\"\n        >\n            \u041a\u043e\u0433\u0434\u0430\n            <span class=\"mg-backbone__brand\">\n                Mechanogurus\n            <\/span>\n            \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d\n        <\/h2>\n\n        <p class=\"mg-backbone__lead\">\n            \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u043d\u0438\u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0432\u0430\u0448\u0443,\n            \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u043e\u043c\u043e\u0447\u044c.\n        <\/p>\n\n    <\/header>\n\n\n    <!-- ENGINEERING BACKBONE -->\n\n    <div class=\"mg-backbone__flow\">\n\n\n        <!-- MECHANOGURUS -->\n\n        <div\n            class=\"mg-backbone__brand-node\"\n            aria-label=\"Mechanogurus\"\n        >\n            <img decoding=\"async\"\n                src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/cropped-mg.png\"\n                alt=\"Mechanogurus\"\n            >\n        <\/div>\n\n\n        <!-- 01 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043e\u0432?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0431\u044f.\n                        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0447\u0435\u0440\u0442\u0435\u0436\u0438\n                        \u0432 SolidWorks \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430 \u043d\u043e\u0432\u044b\u0445 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 02 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                        <path d=\"M14 2v6h6\"><\/path>\n                        <path d=\"M8 13h8M8 17h8\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e PDF \u0438\u043b\u0438 DWG?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043c \u0441\u0442\u0430\u0440\u044b\u0435 \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435\n                        3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e\n                        \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 03 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"><\/path>\n                        <path d=\"M15 5l4 4\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u043d\u0435\u0441\u0451\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c,\n                        \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c\n                        \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0437\u0434\u0435\u043b\u0438\u044f.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 04 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                        <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u044b \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0447\u0435\u0440\u0442\u0435\u0436\u0435\u0439\n                        \u0434\u043b\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u043a\u0443\u043f\u043a\u0438,\n                        \u0441\u0432\u0430\u0440\u043a\u0438 \u0438 \u043c\u043e\u043d\u0442\u0430\u0436\u0430.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 05 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M3 3v18h18\"><\/path>\n                        <path d=\"M7 14l4-4 4 4 5-6\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u0434\u0435\u043b\u0438\u044f?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438,\n                        \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f,\n                        \u0447\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 06 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <path d=\"M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3\"><\/path>\n                        <path d=\"M12 17h.01\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u043d\u043e \u043d\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u043e\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0434\u0435\u044e \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u0435 \u2014\n                        \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0430\n                        \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- END -->\n\n        <div\n            class=\"mg-backbone__end\"\n            aria-hidden=\"true\"\n        ><\/div>\n\n    <\/div>\n\n\n    <!-- CTA -->\n\n    <div class=\"mg-backbone__cta-wrap\">\n\n        <a\n            class=\"mg-backbone__cta\"\n            href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\"\n        >\n\n            \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443\n\n            <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M5 12h14\"><\/path>\n                <path d=\"M13 6l6 6-6 6\"><\/path>\n            <\/svg>\n\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\n    var root =\n        document.querySelector(\".mg-backbone\");\n\n    if(!root) return;\n\n    var cards =\n        [].slice.call(\n            root.querySelectorAll(\n                \".mg-backbone__card\"\n            )\n        );\n\n    var timer = null;\n    var index = 0;\n\n    var reduce =\n        window.matchMedia(\n            \"(prefers-reduced-motion: reduce)\"\n        ).matches;\n\n\n    function activate(next){\n\n        cards.forEach(\n            function(card,i){\n\n                card.classList.toggle(\n                    \"is-active\",\n                    i === next\n                );\n\n            }\n        );\n\n    }\n\n\n    function start(){\n\n        if(reduce || timer) return;\n\n        activate(index);\n\n        timer =\n            window.setInterval(\n                function(){\n\n                    index =\n                        (index + 1) %\n                        cards.length;\n\n                    activate(index);\n\n                },\n                2400\n            );\n\n    }\n\n\n    function stop(){\n\n        if(timer){\n            window.clearInterval(timer);\n        }\n\n        timer = null;\n    }\n\n\n    cards.forEach(\n        function(card,i){\n\n            card.addEventListener(\n                \"mouseenter\",\n                function(){\n\n                    stop();\n\n                    index = i;\n\n                    activate(i);\n                }\n            );\n\n            card.addEventListener(\n                \"mouseleave\",\n                start\n            );\n\n            card.addEventListener(\n                \"focus\",\n                function(){\n\n                    stop();\n\n                    index = i;\n\n                    activate(i);\n                }\n            );\n\n            card.addEventListener(\n                \"blur\",\n                start\n            );\n\n        }\n    );\n\n\n    if(\"IntersectionObserver\" in window){\n\n        var observer =\n            new IntersectionObserver(\n                function(entries){\n\n                    if(entries[0].isIntersecting){\n                        start();\n                    }\n                    else{\n                        stop();\n                    }\n\n                },\n                {\n                    threshold:.18\n                }\n            );\n\n        observer.observe(root);\n\n    }\n    else{\n        start();\n    }\n\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-text-color has-link-color wp-elements-1 has-global-padding is-layout-constrained wp-container-core-group-is-layout-ca27d633 wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:51px\">\n<style>\n\/* =========================================================\n   MECHANOGURUS \u2014 MODERN ENGINEERING PROCESS\n   Simplified version: 4 sticky screens + 4 metrics\n   ========================================================= *\/\n\n\n\/* \u2500\u2500 WordPress \/ theme resets \u2500\u2500 *\/\n\n.wp-block-html:has(.mg-vdi),\n.entry-content .wp-block-html:has(.mg-vdi) {\n  display: block !important;\n  max-width: none !important;\n  width: 100% !important;\n  margin: 0 auto !important;\n  padding: 0 !important;\n  float: none !important;\n}\n\n.mg-vdi,\n.mg-vdi *,\n.mg-vdi *::before,\n.mg-vdi *::after {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n\n\/* \u2500\u2500 Root \u2500\u2500 *\/\n\n.mg-vdi {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    \"Open Sans\",\n    \"Helvetica Neue\",\n    sans-serif;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  position: relative;\n  isolation: isolate;\n\n  display: block;\n\n  width: 100% !important;\n  max-width: 1400px !important;\n\n  margin-left: auto !important;\n  margin-right: auto !important;\n\n  padding: 0 25px;\n\n  color: #fff;\n  line-height: 1.5;\n  background: transparent;\n}\n\n\n\/* \u2500\u2500 Reset theme typography \u2500\u2500 *\/\n\n.mg-vdi h2,\n.mg-vdi p {\n  font-family: inherit;\n  text-transform: none;\n  letter-spacing: inherit;\n  border: none;\n  background: none;\n}\n\n.mg-vdi h2::before,\n.mg-vdi p::before {\n  content: none;\n  display: none;\n}\n\n\n\/* \u2500\u2500 Full viewport black background \u2500\u2500 *\/\n\n.mg-vdi .card-bg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n\n  width: 100vw;\n  margin-left: -50vw;\n\n  z-index: 0;\n\n  background: #000;\n\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500 Sticky stack \u2500\u2500 *\/\n\n.mg-vdi .perfect-stack-container {\n  position: relative;\n  z-index: 0;\n\n  width: 100%;\n\n  \/* 4 screens instead of previous 6 *\/\n  min-height: 400vh;\n  min-height: 400svh;\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n\n.mg-vdi .stack-card {\n  position: -webkit-sticky;\n  position: sticky;\n\n  top: 0;\n\n  width: 100%;\n\n  align-self: stretch;\n\n  height: 100vh;\n  height: 100svh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  overflow: hidden;\n\n  margin: 0;\n\n  padding:\n    max(16px, env(safe-area-inset-top))\n    max(16px, env(safe-area-inset-right))\n    max(16px, env(safe-area-inset-bottom))\n    max(16px, env(safe-area-inset-left));\n}\n\n.mg-vdi .card-1 { z-index: 1; }\n.mg-vdi .card-2 { z-index: 2; }\n.mg-vdi .card-3 { z-index: 3; }\n.mg-vdi .card-4 { z-index: 4; }\n\n\n\/* \u2500\u2500 Content panel \u2500\u2500 *\/\n\n.mg-vdi .card-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  max-width: 100%;\n\n  min-height: 58%;\n  max-height: 92%;\n\n  overflow-y: auto;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  margin: 0;\n\n  flex: 0 1 auto;\n\n  background: rgba(15,15,15,0.95);\n\n  border-radius: 20px;\n\n  padding:\n    clamp(24px, 4vw, 46px)\n    clamp(20px, 5vw, 56px);\n\n  box-shadow:\n    0 16px 48px rgba(0,0,0,0.8),\n    inset 0 1px 0 rgba(242,184,57,0.12);\n\n  text-align: center;\n\n  position: relative;\n  z-index: 2;\n}\n\n.mg-vdi .card-content::-webkit-scrollbar {\n  display: none;\n}\n\n\n\/* \u2500\u2500 Glass effect desktop \u2500\u2500 *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  @supports\n    (backdrop-filter: blur(20px)) or\n    (-webkit-backdrop-filter: blur(20px)) {\n\n    .mg-vdi .card-content {\n      background: rgba(15,15,15,0.72);\n\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n    }\n  }\n}\n\n\n\/* \u2500\u2500 Typography \u2500\u2500 *\/\n\n.mg-vdi .card-content h2 {\n  width: 100%;\n\n  margin: 0 0 clamp(1rem, 2.2vw, 1.7rem);\n\n  padding-bottom: clamp(0.65rem, 1.3vw, 1rem);\n\n  position: relative;\n\n  font-size: clamp(1.65rem, 4vw, 3.15rem);\n  line-height: 1.16;\n  font-weight: 700;\n\n  color: #fff;\n\n  letter-spacing: -0.035em;\n}\n\n\n\/* Orange accent line *\/\n\n.mg-vdi .card-content h2::after {\n  content: \"\";\n\n  display: block;\n\n  width: 42px;\n  height: 3px;\n\n  margin:\n    clamp(0.6rem, 1vw, 0.85rem)\n    auto\n    0;\n\n  background: linear-gradient(\n    90deg,\n    #F2B839,\n    #E1830F\n  );\n\n  border-radius: 2px;\n}\n\n\n\/* Main copy *\/\n\n.mg-vdi .card-content p {\n  margin: 0 auto;\n\n  max-width: 1000px;\n\n  font-size: clamp(1rem, 2vw, 1.55rem);\n  line-height: 1.58;\n\n  color: rgba(255,255,255,0.82);\n\n  font-weight: 400;\n}\n\n\n\/* \u2500\u2500 Small pillar label \u2500\u2500 *\/\n\n.mg-vdi .mg-pillar-label {\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: clamp(12px, 1.6vw, 18px);\n\n  padding: 7px 12px;\n\n  border-radius: 999px;\n\n  border: 1px solid rgba(242,184,57,0.24);\n\n  background: rgba(242,184,57,0.07);\n\n  color: #F2B839;\n\n  font-size: clamp(0.68rem, 1vw, 0.82rem);\n  font-weight: 700;\n\n  line-height: 1;\n\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n\n\/* \u2500\u2500 Slide animation \u2500\u2500 *\/\n\n.mg-vdi .slide-in {\n  animation:\n    mg-vdi-slidein\n    0.95s\n    cubic-bezier(0.22,1,0.36,1)\n    forwards;\n}\n\n@keyframes mg-vdi-slidein {\n\n  from {\n    transform: translateY(22px) scale(0.97);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n}\n\n\n\/* =========================================================\n   PROGRESS DOTS\n   ========================================================= *\/\n\n.mg-vdi .mg-dots {\n  position: fixed;\n\n  right: 22px;\n  top: 50%;\n\n  transform: translateY(-50%);\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 11px;\n\n  z-index: 100;\n\n  pointer-events: none;\n\n  opacity: 0;\n\n  transition: opacity 0.35s ease;\n}\n\n.mg-vdi .mg-dots.visible {\n  opacity: 1;\n}\n\n.mg-vdi .mg-dot {\n  display: block;\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,0.20);\n\n  border:\n    1px solid\n    rgba(255,255,255,0.15);\n\n  transition:\n    background .3s,\n    transform .3s,\n    border-color .3s;\n}\n\n.mg-vdi .mg-dot.active {\n  background: #F2B839;\n  border-color: #F2B839;\n\n  transform: scale(1.5);\n\n  box-shadow:\n    0 0 7px\n    rgba(242,184,57,0.6);\n}\n\n\n\/* =========================================================\n   SCROLL HINT\n   ========================================================= *\/\n\n.mg-vdi .mg-scroll-hint {\n  display: none;\n\n  position: absolute;\n\n  bottom:\n    max(\n      20px,\n      env(safe-area-inset-bottom)\n    );\n\n  left: 50%;\n\n  transform: translateX(-50%);\n\n  flex-direction: column;\n  align-items: center;\n\n  gap: 4px;\n\n  z-index: 10;\n\n  pointer-events: none;\n\n  opacity: 0.5;\n\n  animation:\n    mg-hint-bounce\n    2s\n    ease-in-out\n    infinite;\n}\n\n.mg-vdi .card-1 .mg-scroll-hint {\n  display: flex;\n}\n\n.mg-vdi .mg-scroll-hint span {\n  font-size: 0.6rem;\n\n  letter-spacing: 0.12em;\n\n  color: rgba(255,255,255,0.6);\n\n  text-transform: uppercase;\n}\n\n.mg-vdi .mg-scroll-hint svg {\n  width: 16px;\n  height: 16px;\n\n  stroke: rgba(255,255,255,0.5);\n\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  fill: none;\n}\n\n@keyframes mg-hint-bounce {\n\n  0%,\n  100% {\n    transform:\n      translateX(-50%)\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateX(-50%)\n      translateY(5px);\n  }\n}\n\n\n\/* =========================================================\n   METRICS \u2014 4 ONLY\n   ========================================================= *\/\n\n.mg-vdi .mg-metrics {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, minmax(0, 1fr));\n\n  gap: 12px;\n\n  width: 100%;\n\n  margin-top:\n    clamp(1.5rem, 3vw, 2.5rem);\n}\n\n.mg-vdi .mg-metric {\n  min-width: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 6px;\n\n  min-height: 100px;\n\n  padding:\n    clamp(12px, 1.5vw, 18px)\n    clamp(8px, 1.2vw, 14px);\n\n  background:\n    rgba(242,184,57,0.065);\n\n  border:\n    1px solid\n    rgba(242,184,57,0.18);\n\n  border-radius: 13px;\n}\n\n.mg-vdi .mg-metric-val {\n  font-size:\n    clamp(1.25rem, 2.2vw, 1.9rem);\n\n  font-weight: 700;\n\n  color: #F2B839;\n\n  line-height: 1;\n\n  white-space: nowrap;\n}\n\n.mg-vdi .mg-metric-lbl {\n  max-width: 230px;\n\n  font-size:\n    clamp(0.68rem, 1vw, 0.82rem);\n\n  color:\n    rgba(255,255,255,0.52);\n\n  line-height: 1.35;\n\n  text-align: center;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media\n(hover: none) and\n(pointer: coarse) {\n\n  .mg-vdi .mg-dots {\n    display: none;\n  }\n\n  .mg-vdi .card-1 .mg-scroll-hint {\n    display: flex;\n  }\n}\n\n\n@media (max-width: 768px) {\n\n  .mg-vdi .card-content {\n    min-height: 56%;\n\n    padding:\n      24px\n      20px;\n  }\n\n  .mg-vdi .card-content h2 {\n    font-size:\n      clamp(1.45rem, 6vw, 2.2rem);\n\n    letter-spacing: -0.025em;\n  }\n\n  .mg-vdi .card-content p {\n    font-size:\n      clamp(1rem, 3.7vw, 1.2rem);\n\n    line-height: 1.5;\n  }\n\n  .mg-vdi .mg-metrics {\n    grid-template-columns:\n      repeat(2, minmax(0,1fr));\n\n    gap: 9px;\n\n    margin-top: 1.4rem;\n  }\n\n  .mg-vdi .mg-metric {\n    min-height: 88px;\n  }\n}\n\n\n\/* \u2500\u2500 Mobile landscape \u2500\u2500 *\/\n\n@media\n(max-width: 768px) and\n(orientation: landscape) {\n\n  .mg-vdi .card-content {\n    max-height: 96%;\n\n    padding: 17px 24px;\n\n    border-radius: 14px;\n\n    justify-content: flex-start;\n  }\n\n  .mg-vdi .mg-pillar-label {\n    margin-bottom: 8px;\n  }\n\n  .mg-vdi .card-content h2 {\n    font-size:\n      clamp(1.15rem, 3.5vw, 1.7rem);\n\n    margin-bottom: 0.5rem;\n\n    padding-bottom: 0.45rem;\n  }\n\n  .mg-vdi .card-content p {\n    font-size:\n      clamp(0.85rem, 2vw, 1.05rem);\n\n    line-height: 1.4;\n  }\n\n  .mg-vdi .mg-metrics {\n    grid-template-columns:\n      repeat(4, minmax(0,1fr));\n\n    margin-top: 0.8rem;\n\n    gap: 7px;\n  }\n\n  .mg-vdi .mg-metric {\n    min-height: 70px;\n\n    padding: 8px 6px;\n  }\n\n  .mg-vdi .mg-metric-val {\n    font-size:\n      clamp(1rem, 2vw, 1.35rem);\n  }\n\n  .mg-vdi .mg-metric-lbl {\n    font-size: 0.58rem;\n  }\n}\n\n\n\/* \u2500\u2500 Small phones \u2500\u2500 *\/\n\n@media (max-width: 480px) {\n\n  .mg-vdi {\n    padding: 0 16px;\n  }\n\n  .mg-vdi .card-content {\n    border-radius: 16px;\n  }\n\n  .mg-vdi .mg-pillar-label {\n    font-size: 0.64rem;\n\n    padding: 6px 10px;\n  }\n}\n\n\n@media (max-width: 360px) {\n\n  .mg-vdi .card-content h2 {\n    font-size: 1.35rem;\n\n    letter-spacing: 0;\n  }\n\n  .mg-vdi .card-content p {\n    font-size: 0.94rem;\n  }\n\n  .mg-vdi .mg-metrics {\n    gap: 6px;\n  }\n\n  .mg-vdi .mg-metric-val {\n    font-size: 1.05rem;\n  }\n\n  .mg-vdi .mg-metric-lbl {\n    font-size: 0.57rem;\n  }\n}\n\n\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-vdi .mg-scroll-hint {\n    animation: none !important;\n  }\n\n  .mg-vdi .slide-in {\n    animation: none !important;\n\n    opacity: 1;\n\n    transform: none;\n  }\n}\n\n<\/style>\n\n\n<div\n  class=\"mg-vdi wp-landing-block\"\n  data-mg-vdi=\"\"\n>\n\n  <!-- Progress dots -->\n  <div\n    class=\"mg-dots\"\n    aria-hidden=\"true\"\n  >\n    <span class=\"mg-dot active\"><\/span>\n    <span class=\"mg-dot\"><\/span>\n    <span class=\"mg-dot\"><\/span>\n    <span class=\"mg-dot\"><\/span>\n  <\/div>\n\n\n  <div class=\"perfect-stack-container\">\n\n\n    <!-- =====================================================\n         1 \u2014 INTRODUCTION\n         ===================================================== -->\n\n    <div class=\"stack-card card-1\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <h2>\n          \u041c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f\n          \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435\n        <\/h2>\n\n        <p>\n          \u041f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\n          \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b\n          \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435.\n          \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439,\n          \u043f\u0440\u043e\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0438 \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439\n          \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432.\n        <\/p>\n\n      <\/div>\n\n\n      <div\n        class=\"mg-scroll-hint\"\n        aria-hidden=\"true\"\n      >\n\n        <span>\u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435<\/span>\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <polyline\n            points=\"6 9 12 15 18 9\"\n          ><\/polyline>\n        <\/svg>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         2 \u2014 MANAGED PROCESS\n         ===================================================== -->\n\n    <div class=\"stack-card card-2\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          01 \/ \u041f\u0440\u043e\u0446\u0435\u0441\u0441\n        <\/div>\n\n        <h2>\n          \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\n        <\/h2>\n\n        <p>\n          \u0417\u0430\u0434\u0430\u0447\u0438, \u0441\u0440\u043e\u043a\u0438 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c\n          \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043a\u043e\u043d\u0442\u0443\u0440\u0435.\n          \u0421\u0442\u0430\u0442\u0443\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u0435\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u2014\n          \u043e\u0442 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e \u0432\u044b\u043f\u0443\u0441\u043a\u0430\n          \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         3 \u2014 ENGINEERING DATA\n         ===================================================== -->\n\n    <div class=\"stack-card card-3\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          02 \/ \u0414\u0430\u043d\u043d\u044b\u0435\n        <\/div>\n\n        <h2>\n          \u0415\u0434\u0438\u043d\u044b\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\n        <\/h2>\n\n        <p>\n          PDM, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438,\n          \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0438 \u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u0438\u0437\u0434\u0435\u043b\u0438\u0439\n          \u0438 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c\n          \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438\n          \u0438 \u043d\u0435\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         4 \u2014 AUTOMATION + METRICS\n         ===================================================== -->\n\n    <div class=\"stack-card card-4\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          03 \/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f\n        <\/div>\n\n        <h2>\n          \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\n        <\/h2>\n\n        <p>\n          \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b\n          \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u0443\u0441\u043a\u0430 \u041a\u0414 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u044e\u0442\n          \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.\n          \u0418\u043d\u0436\u0435\u043d\u0435\u0440 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f,\n          \u0430 \u043d\u0435 \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435.\n        <\/p>\n\n\n        <div class=\"mg-metrics\">\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              5300+\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445\n              \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              &lt;50 \u043c\u0441\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439\n              \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e \u0420\u0424\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              \u00d72\u20133\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445\n              \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              100%\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\n              \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 PDM\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n<\/div>\n\n\n<script>\n(function () {\n\n  'use strict';\n\n\n  function initMgVdi(vdi) {\n\n    if (\n      !vdi ||\n      vdi.dataset.mgVdiInit === '1'\n    ) {\n      return;\n    }\n\n\n    vdi.dataset.mgVdiInit = '1';\n\n\n    var cards =\n      vdi.querySelectorAll(\n        '.card-content'\n      );\n\n    var dots =\n      vdi.querySelectorAll(\n        '.mg-dot'\n      );\n\n    var dotsWrap =\n      vdi.querySelector(\n        '.mg-dots'\n      );\n\n    var TOTAL = dots.length;\n\n\n    var isTouch =\n      ('ontouchstart' in window) ||\n      (navigator.maxTouchPoints > 0);\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       CONTENT APPEARANCE\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      'IntersectionObserver'\n      in window\n    ) {\n\n      var io =\n        new IntersectionObserver(\n          function (entries) {\n\n            entries.forEach(\n              function (entry) {\n\n                if (\n                  entry.isIntersecting\n                ) {\n\n                  entry.target\n                    .classList\n                    .add('slide-in');\n\n                }\n\n              }\n            );\n\n          },\n          {\n            threshold: 0.08,\n            rootMargin:\n              '0px 0px -60px 0px'\n          }\n        );\n\n\n      cards.forEach(\n        function (card) {\n\n          io.observe(card);\n\n        }\n      );\n\n    } else {\n\n      cards.forEach(\n        function (card) {\n\n          card\n            .classList\n            .add('slide-in');\n\n        }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       DESKTOP PROGRESS DOTS\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      !isTouch &&\n      dotsWrap\n    ) {\n\n      function updateDots() {\n\n        var rect =\n          vdi.getBoundingClientRect();\n\n        var blockTop =\n          -rect.top;\n\n        var scrollable =\n          vdi.offsetHeight -\n          window.innerHeight;\n\n\n        if (\n          blockTop < 0 ||\n          blockTop > scrollable\n        ) {\n\n          dotsWrap\n            .classList\n            .remove('visible');\n\n          return;\n        }\n\n\n        dotsWrap\n          .classList\n          .add('visible');\n\n\n        var ratio =\n          scrollable > 0\n            ? blockTop \/ scrollable\n            : 0;\n\n\n        var idx =\n          Math.min(\n            Math.floor(\n              ratio * TOTAL\n            ),\n            TOTAL - 1\n          );\n\n\n        dots.forEach(\n          function (dot, i) {\n\n            dot\n              .classList\n              .toggle(\n                'active',\n                i === idx\n              );\n\n          }\n        );\n\n      }\n\n\n      window.addEventListener(\n        'scroll',\n        updateDots,\n        { passive: true }\n      );\n\n\n      window.addEventListener(\n        'resize',\n        updateDots,\n        { passive: true }\n      );\n\n\n      updateDots();\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       REDUCED MOTION\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      window\n        .matchMedia(\n          '(prefers-reduced-motion: reduce)'\n        )\n        .matches\n    ) {\n\n      cards.forEach(\n        function (card) {\n\n          card\n            .classList\n            .add('slide-in');\n\n        }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       MOBILE EDGE SCROLL PROTECTION\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (isTouch) {\n\n      var touchStartY = 0;\n\n\n      vdi.addEventListener(\n        'touchstart',\n        function (e) {\n\n          touchStartY =\n            e.touches[0].clientY;\n\n        },\n        { passive: true }\n      );\n\n\n      vdi.addEventListener(\n        'touchmove',\n        function (e) {\n\n          var delta =\n            e.touches[0].clientY -\n            touchStartY;\n\n\n          var atTop =\n            window.scrollY === 0;\n\n\n          var atBottom =\n            window.scrollY >=\n            document.documentElement\n              .scrollHeight -\n            window.innerHeight;\n\n\n          if (\n            (atTop && delta > 0) ||\n            (atBottom && delta < 0)\n          ) {\n\n            e.preventDefault();\n\n          }\n\n        },\n        { passive: false }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       VIEWPORT HEIGHT\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    function setVh() {\n\n      document\n        .documentElement\n        .style\n        .setProperty(\n          '--mg-vh',\n          (\n            window.innerHeight *\n            0.01\n          ) + 'px'\n        );\n\n    }\n\n\n    window.addEventListener(\n      'resize',\n      setVh,\n      { passive: true }\n    );\n\n\n    setVh();\n\n  }\n\n\n\n  function boot() {\n\n    document\n      .querySelectorAll(\n        '[data-mg-vdi]'\n      )\n      .forEach(initMgVdi);\n\n  }\n\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      boot\n    );\n\n  } else {\n\n    boot();\n\n  }\n\n})();\n<\/script>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!--\n  MECHANOGURUS \u2014 Automation Teasers\n  WordPress Custom HTML \u2014 self-contained\n\n  Updated:\n  - Equal image sizes\n  - Rounded image corners\n  - Proof line removed\n  - Large service description moved above image\n  - Visible \"Mechanogurus\" replaced with \"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n  - Reduced heading\/subheading sizes to better match other homepage blocks\n  - Max width 1400px\n  - Responsive for desktop, tablet and mobile\n-->\n\n<div class=\"mgas-wrap\" data-mgas>\n\n<style>\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n.mgas-wrap,\n.mgas-wrap *{\n  box-sizing:border-box;\n}\n\n.wp-block-html:has(.mgas-wrap),\n.entry-content > .wp-block-html:has(.mgas-wrap),\n.wp-block-post-content > .wp-block-html:has(.mgas-wrap){\n  display:block !important;\n  width:100% !important;\n  max-width:none !important;\n  margin-left:auto !important;\n  margin-right:auto !important;\n  padding:0 !important;\n  float:none !important;\n}\n\n\n\/* =========================================================\n   MAIN WRAPPER\n========================================================= *\/\n\n.mgas-wrap{\n\n  --mgas-max:1400px;\n  --mgas-gutter:20px;\n\n  --mgas-accent:#F59E0B;\n  --mgas-accent-hover:#ffb52d;\n\n  --mgas-text:#ffffff;\n  --mgas-muted:#d4d4d4;\n\n  width:100% !important;\n  max-width:var(--mgas-max) !important;\n\n  margin:\n    clamp(30px,4vw,64px)\n    auto;\n\n  padding-left:var(--mgas-gutter);\n  padding-right:var(--mgas-gutter);\n\n  color:var(--mgas-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n\n  overflow:visible;\n}\n\n\n\/* =========================================================\n   SHELL\n========================================================= *\/\n\n.mgas-shell{\n  position:relative;\n  width:100%;\n  min-width:0;\n}\n\n\n\/* =========================================================\n   TRACK\n========================================================= *\/\n\n.mgas-track{\n\n  display:flex;\n\n  width:100%;\n\n  overflow-x:auto;\n  overflow-y:hidden;\n\n  scroll-snap-type:x mandatory;\n  scroll-behavior:smooth;\n\n  overscroll-behavior-inline:contain;\n  -webkit-overflow-scrolling:touch;\n\n  scrollbar-width:none;\n\n  touch-action:pan-x pan-y;\n}\n\n.mgas-track::-webkit-scrollbar{\n  display:none;\n}\n\n\n\/* =========================================================\n   SLIDE\n========================================================= *\/\n\n.mgas-slide{\n\n  flex:0 0 100%;\n\n  width:100%;\n  min-width:100%;\n\n  scroll-snap-align:start;\n  scroll-snap-stop:always;\n\n  padding:\n    clamp(20px,2.5vw,34px)\n    0\n    clamp(22px,3vw,40px);\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   BADGE\n========================================================= *\/\n\n.mgas-badge{\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  min-height:38px;\n\n  max-width:100%;\n\n  margin:\n    0\n    auto\n    clamp(18px,2vw,24px);\n\n  padding:\n    9px\n    24px;\n\n  border-radius:999px;\n\n  background:var(--mgas-accent);\n\n  color:#fff;\n\n  font-size:\n    clamp(10.5px,.9vw,13px);\n\n  font-weight:800;\n\n  line-height:1.25;\n\n  letter-spacing:.75px;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   MAIN HEADLINE\n   Reduced to match other homepage blocks\n========================================================= *\/\n\n.mgas-title{\n\n  width:100%;\n  max-width:1050px;\n\n  margin:\n    0\n    auto\n    clamp(16px,2vw,22px);\n\n  padding:0;\n\n  color:#fff;\n\n  font-size:\n    clamp(1.7rem,2.7vw,2.7rem);\n\n  line-height:1.14;\n\n  font-weight:800;\n\n  letter-spacing:-.025em;\n\n  text-align:center;\n\n  text-wrap:balance;\n\n  border:0 !important;\n\n  overflow-wrap:normal;\n  word-break:normal;\n}\n\n\n\/* =========================================================\n   SERVICE DESCRIPTION\n   Larger than body text, but clearly below heading\n========================================================= *\/\n\n.mgas-lead{\n\n  width:100%;\n  max-width:980px;\n\n  margin:\n    0\n    auto\n    clamp(24px,2.6vw,32px);\n\n  padding:\n    0\n    20px;\n\n  color:var(--mgas-muted);\n\n  font-size:\n    clamp(1.15rem,1.65vw,1.55rem);\n\n  line-height:1.42;\n\n  font-weight:600;\n\n  letter-spacing:-.01em;\n\n  text-align:center;\n\n  text-wrap:balance;\n}\n\n\n.mgas-lead strong{\n\n  color:#fff;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   IMAGE AREA\n========================================================= *\/\n\n.mgas-visual{\n\n  width:100%;\n  max-width:100%;\n\n  margin:\n    0\n    auto\n    clamp(28px,3vw,38px);\n\n  padding:0;\n}\n\n\n\/* Equal display box for both images *\/\n\n.mgas-image-frame{\n\n  width:100%;\n  max-width:1200px;\n\n  aspect-ratio:16 \/ 7;\n\n  margin:0 auto;\n\n  overflow:hidden;\n\n  border-radius:\n    clamp(14px,1.5vw,22px);\n\n  background:#111;\n}\n\n\n\/* Both images always occupy the same visible rectangle *\/\n\n.mgas-image{\n\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  margin:0;\n\n  border:0;\n\n  object-fit:cover;\n\n  object-position:center;\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.mgas-button-container{\n\n  width:100%;\n\n  text-align:center;\n}\n\n\n.mgas-button{\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  min-height:48px;\n\n  padding:\n    15px\n    32px;\n\n  border-radius:11px;\n\n  background:var(--mgas-accent);\n\n  color:#fff !important;\n\n  font-size:\n    clamp(1rem,1.1vw,1.1rem);\n\n  font-weight:750;\n\n  line-height:1.25;\n\n  text-decoration:none !important;\n\n  white-space:nowrap;\n\n  transition:\n    background .22s ease,\n    transform .22s ease,\n    box-shadow .22s ease;\n}\n\n\n@media (hover:hover) and (pointer:fine){\n\n  .mgas-button:hover{\n\n    background:var(--mgas-accent-hover);\n\n    transform:translateY(-2px);\n\n    box-shadow:\n      0 12px 28px\n      rgba(245,158,11,.25);\n  }\n\n}\n\n\n\/* =========================================================\n   ARROWS\n========================================================= *\/\n\n.mgas-arrow{\n\n  position:absolute;\n\n  top:50%;\n\n  z-index:20;\n\n  display:grid;\n  place-items:center;\n\n  width:46px;\n  height:46px;\n\n  padding:0;\n\n  border:\n    1px solid\n    rgba(255,255,255,.15);\n\n  border-radius:50%;\n\n  background:\n    rgba(24,24,24,.92);\n\n  color:#fff;\n\n  font-family:inherit;\n\n  font-size:23px;\n\n  line-height:1;\n\n  cursor:pointer;\n\n  transform:\n    translateY(-50%);\n\n  backdrop-filter:blur(7px);\n  -webkit-backdrop-filter:blur(7px);\n\n  transition:\n    background .2s ease,\n    border-color .2s ease,\n    transform .2s ease;\n}\n\n\n.mgas-prev{\n  left:\n    calc(-1 * var(--mgas-gutter));\n}\n\n\n.mgas-next{\n  right:\n    calc(-1 * var(--mgas-gutter));\n}\n\n\n@media (hover:hover) and (pointer:fine){\n\n  .mgas-arrow:hover{\n\n    background:var(--mgas-accent);\n\n    border-color:var(--mgas-accent);\n\n    transform:\n      translateY(-50%)\n      scale(1.05);\n  }\n\n}\n\n\n\/* =========================================================\n   DOT NAVIGATION\n========================================================= *\/\n\n.mgas-bottom-nav{\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  margin-top:\n    clamp(5px,1vw,10px);\n}\n\n\n.mgas-dots{\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  gap:8px;\n}\n\n\n.mgas-dot{\n\n  width:9px;\n  height:9px;\n\n  padding:0;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#555;\n\n  cursor:pointer;\n\n  transition:\n    width .2s ease,\n    border-radius .2s ease,\n    background .2s ease;\n}\n\n\n.mgas-dot.is-active{\n\n  width:28px;\n\n  border-radius:999px;\n\n  background:var(--mgas-accent);\n}\n\n\n\/* =========================================================\n   MOBILE HINT\n========================================================= *\/\n\n.mgas-hint{\n\n  display:none;\n\n  margin:\n    10px\n    0\n    0;\n\n  color:#888;\n\n  font-size:12px;\n\n  line-height:1.4;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:960px){\n\n  .mgas-wrap{\n    --mgas-gutter:16px;\n  }\n\n\n  .mgas-title{\n\n    max-width:800px;\n\n    font-size:\n      clamp(1.65rem,4.5vw,2.35rem);\n  }\n\n\n  .mgas-lead{\n\n    max-width:780px;\n\n    font-size:\n      clamp(1.1rem,2.8vw,1.4rem);\n  }\n\n\n  .mgas-image-frame{\n\n    max-width:100%;\n\n    aspect-ratio:16 \/ 8;\n  }\n\n\n  .mgas-arrow{\n\n    width:42px;\n    height:42px;\n\n    font-size:21px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px){\n\n  .mgas-wrap{\n\n    --mgas-gutter:10px;\n\n    margin-top:22px;\n    margin-bottom:22px;\n  }\n\n\n  .mgas-slide{\n\n    padding:\n      16px\n      0\n      22px;\n  }\n\n\n  .mgas-badge{\n\n    min-height:34px;\n\n    margin-bottom:17px;\n\n    padding:\n      8px\n      17px;\n\n    font-size:10px;\n\n    letter-spacing:.55px;\n  }\n\n\n  .mgas-title{\n\n    margin-bottom:15px;\n\n    padding:\n      0\n      8px;\n\n    font-size:\n      clamp(1.55rem,6.8vw,2rem);\n\n    line-height:1.14;\n\n    letter-spacing:-.02em;\n  }\n\n\n  .mgas-title br{\n    display:none;\n  }\n\n\n  .mgas-lead{\n\n    max-width:100%;\n\n    margin-bottom:22px;\n\n    padding:\n      0\n      12px;\n\n    font-size:\n      clamp(1.05rem,4.6vw,1.28rem);\n\n    line-height:1.45;\n  }\n\n\n  .mgas-image-frame{\n\n    width:100%;\n\n    max-width:100%;\n\n    aspect-ratio:4 \/ 3;\n\n    border-radius:14px;\n  }\n\n\n  .mgas-visual{\n\n    margin-bottom:24px;\n  }\n\n\n  .mgas-button{\n\n    width:100%;\n\n    max-width:360px;\n\n    padding:\n      14px\n      22px;\n\n    white-space:normal;\n  }\n\n\n  .mgas-arrow{\n\n    width:36px;\n    height:36px;\n\n    font-size:18px;\n\n    background:\n      rgba(24,24,24,.86);\n  }\n\n\n  .mgas-prev{\n    left:-3px;\n  }\n\n\n  .mgas-next{\n    right:-3px;\n  }\n\n\n  .mgas-hint{\n    display:block;\n  }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:380px){\n\n  .mgas-wrap{\n    --mgas-gutter:7px;\n  }\n\n\n  .mgas-title{\n\n    font-size:\n      clamp(1.45rem,7vw,1.8rem);\n  }\n\n\n  .mgas-lead{\n\n    font-size:\n      clamp(1rem,4.8vw,1.18rem);\n  }\n\n\n  .mgas-arrow{\n\n    width:34px;\n    height:34px;\n\n    font-size:17px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce){\n\n  .mgas-track{\n    scroll-behavior:auto;\n  }\n\n\n  .mgas-button,\n  .mgas-arrow,\n  .mgas-dot{\n    transition:none !important;\n  }\n\n}\n\n<\/style>\n\n\n<div class=\"mgas-shell\">\n\n\n  <div\n    class=\"mgas-track\"\n    aria-label=\"\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n  >\n\n\n    <!-- ==================================================\n         BUSINESS AUTOMATION\n    =================================================== -->\n\n    <section\n      class=\"mgas-slide mgas-slide--business\"\n      data-mgas-slide\n      aria-labelledby=\"mgas-business-title\"\n    >\n\n\n      <div class=\"mgas-badge\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\n      <\/div>\n\n\n      <h2\n        class=\"mgas-title\"\n        id=\"mgas-business-title\"\n      >\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0440\u0443\u0442\u0438\u043d\u0443.<br>\n        \u0423\u0441\u043a\u043e\u0440\u044c\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438.\n      <\/h2>\n\n\n      <p class=\"mgas-lead\">\n\n        <strong>\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/strong> \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 CRM,\n        Helpdesk, \u0444\u0430\u0439\u043b\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0430\u043a,\n        \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.\n\n      <\/p>\n\n\n      <div class=\"mgas-visual\">\n\n        <div class=\"mgas-image-frame\">\n\n          <img\n            class=\"mgas-image\"\n            src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/BussinessAutomationTeaser.png\"\n            alt=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          >\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mgas-button-container\">\n\n        <a\n          class=\"mgas-button\"\n          href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n        >\n          \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2192\n        <\/a>\n\n      <\/div>\n\n\n    <\/section>\n\n\n\n    <!-- ==================================================\n         CAD \/ PDM \/ PLM AUTOMATION\n    =================================================== -->\n\n    <section\n      class=\"mgas-slide mgas-slide--cad\"\n      data-mgas-slide\n      aria-labelledby=\"mgas-cad-title\"\n    >\n\n\n      <div class=\"mgas-badge\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM, PLM\n      <\/div>\n\n\n      <h2\n        class=\"mgas-title\"\n        id=\"mgas-cad-title\"\n      >\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0440\u043e\u0433\u043e.<br>\n        \u041d\u0435 \u0442\u0440\u0430\u0442\u044c\u0442\u0435 \u0435\u0433\u043e \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u0443.\n      <\/h2>\n\n\n      <p class=\"mgas-lead\">\n\n        <strong>\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/strong> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442\n        \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 CAD \u0438 PDM,\n        \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438\n        \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0443\u0447\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\n\n      <\/p>\n\n\n      <div class=\"mgas-visual\">\n\n        <div class=\"mgas-image-frame\">\n\n          <img\n            class=\"mgas-image\"\n            src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/Automation_CAD_PDM_02.png\"\n            alt=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM \u0438 PLM \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          >\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mgas-button-container\">\n\n        <a\n          class=\"mgas-button\"\n          href=\"https:\/\/mechanogurus.ru\/?page_id=4606\"\n        >\n          \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u2192\n        <\/a>\n\n      <\/div>\n\n\n    <\/section>\n\n\n  <\/div>\n\n\n\n  <!-- ARROWS -->\n\n  <button\n    class=\"mgas-arrow mgas-prev\"\n    type=\"button\"\n    aria-label=\"\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0431\u043b\u043e\u043a\"\n  >\n    \u2039\n  <\/button>\n\n\n  <button\n    class=\"mgas-arrow mgas-next\"\n    type=\"button\"\n    aria-label=\"\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a\"\n  >\n    \u203a\n  <\/button>\n\n\n\n  <!-- DOTS -->\n\n  <div\n    class=\"mgas-bottom-nav\"\n    aria-label=\"\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438\"\n  >\n\n    <div class=\"mgas-dots\">\n\n\n      <button\n        class=\"mgas-dot is-active\"\n        type=\"button\"\n        aria-label=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\"\n        data-mgas-index=\"0\"\n      ><\/button>\n\n\n      <button\n        class=\"mgas-dot\"\n        type=\"button\"\n        aria-label=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM, PLM\"\n        data-mgas-index=\"1\"\n      ><\/button>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <p class=\"mgas-hint\">\n    \u041f\u0440\u043e\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u0432\u043b\u0435\u0432\u043e \u0438\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e\n  <\/p>\n\n\n<\/div>\n\n\n\n<script>\n\n(function(){\n\n  var root =\n    document.querySelector('[data-mgas]');\n\n  if(!root) return;\n\n\n  var track =\n    root.querySelector('.mgas-track');\n\n\n  var slides =\n    Array.prototype.slice.call(\n      root.querySelectorAll('[data-mgas-slide]')\n    );\n\n\n  var dots =\n    Array.prototype.slice.call(\n      root.querySelectorAll('.mgas-dot')\n    );\n\n\n  var prev =\n    root.querySelector('.mgas-prev');\n\n\n  var next =\n    root.querySelector('.mgas-next');\n\n\n  if(!track || slides.length < 2) return;\n\n\n  var activeIndex = 0;\n\n  var scrollTimer = null;\n\n  var autoplayTimer = null;\n\n  var autoplayDelay = 6000;\n\n\n  var reducedMotion =\n    window.matchMedia(\n      '(prefers-reduced-motion: reduce)'\n    ).matches;\n\n\n\n  function nearestIndex(){\n\n    var left =\n      track.scrollLeft;\n\n    var best = 0;\n\n    var distance =\n      Infinity;\n\n\n    slides.forEach(\n      function(slide,index){\n\n        var d =\n          Math.abs(\n            slide.offsetLeft -\n            left\n          );\n\n\n        if(d < distance){\n\n          distance = d;\n\n          best = index;\n\n        }\n\n      }\n    );\n\n\n    return best;\n\n  }\n\n\n\n  function update(index){\n\n    activeIndex =\n      Math.max(\n        0,\n        Math.min(\n          slides.length - 1,\n          index\n        )\n      );\n\n\n    dots.forEach(\n      function(dot,i){\n\n        dot.classList.toggle(\n          'is-active',\n          i === activeIndex\n        );\n\n\n        dot.setAttribute(\n          'aria-current',\n          i === activeIndex\n            ? 'true'\n            : 'false'\n        );\n\n      }\n    );\n\n  }\n\n\n\n  function goTo(index,manual){\n\n    var total =\n      slides.length;\n\n\n    var target =\n      ((index % total) + total)\n      % total;\n\n\n    track.scrollTo({\n\n      left:\n        slides[target].offsetLeft,\n\n      behavior:\n        reducedMotion\n          ? 'auto'\n          : 'smooth'\n\n    });\n\n\n    update(target);\n\n\n    if(manual){\n      restartAutoplay();\n    }\n\n  }\n\n\n\n  function startAutoplay(){\n\n    if(reducedMotion)\n      return;\n\n\n    stopAutoplay();\n\n\n    autoplayTimer =\n      window.setInterval(\n        function(){\n\n          goTo(\n            activeIndex + 1,\n            false\n          );\n\n        },\n        autoplayDelay\n      );\n\n  }\n\n\n\n  function stopAutoplay(){\n\n    if(autoplayTimer){\n\n      window.clearInterval(\n        autoplayTimer\n      );\n\n      autoplayTimer = null;\n\n    }\n\n  }\n\n\n\n  function restartAutoplay(){\n\n    stopAutoplay();\n    startAutoplay();\n\n  }\n\n\n\n  if(prev){\n\n    prev.addEventListener(\n      'click',\n      function(){\n\n        goTo(\n          activeIndex - 1,\n          true\n        );\n\n      }\n    );\n\n  }\n\n\n\n  if(next){\n\n    next.addEventListener(\n      'click',\n      function(){\n\n        goTo(\n          activeIndex + 1,\n          true\n        );\n\n      }\n    );\n\n  }\n\n\n\n  dots.forEach(\n    function(dot){\n\n      dot.addEventListener(\n        'click',\n        function(){\n\n          goTo(\n            Number(\n              dot.getAttribute(\n                'data-mgas-index'\n              )\n            ),\n            true\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n\n  track.addEventListener(\n    'scroll',\n    function(){\n\n      window.clearTimeout(\n        scrollTimer\n      );\n\n\n      scrollTimer =\n        window.setTimeout(\n          function(){\n\n            update(\n              nearestIndex()\n            );\n\n          },\n          100\n        );\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n\n  root.addEventListener(\n    'mouseenter',\n    stopAutoplay\n  );\n\n\n  root.addEventListener(\n    'mouseleave',\n    startAutoplay\n  );\n\n\n  root.addEventListener(\n    'focusin',\n    stopAutoplay\n  );\n\n\n  root.addEventListener(\n    'focusout',\n    function(){\n\n      window.setTimeout(\n        function(){\n\n          if(\n            !root.contains(\n              document.activeElement\n            )\n          ){\n\n            startAutoplay();\n\n          }\n\n        },\n        0\n      );\n\n    }\n  );\n\n\n\n  track.addEventListener(\n    'touchstart',\n    stopAutoplay,\n    {\n      passive:true\n    }\n  );\n\n\n  track.addEventListener(\n    'touchend',\n    function(){\n\n      window.setTimeout(\n        startAutoplay,\n        2500\n      );\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n\n  document.addEventListener(\n    'visibilitychange',\n    function(){\n\n      if(document.hidden){\n\n        stopAutoplay();\n\n      }\n      else{\n\n        startAutoplay();\n\n      }\n\n    }\n  );\n\n\n\n  var resizeTimer = null;\n\n\n  window.addEventListener(\n    'resize',\n    function(){\n\n      window.clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        window.setTimeout(\n          function(){\n\n            track.scrollTo({\n\n              left:\n                slides[activeIndex].offsetLeft,\n\n              behavior:'auto'\n\n            });\n\n          },\n          120\n        );\n\n    }\n  );\n\n\n\n  update(0);\n  startAutoplay();\n\n})();\n\n<\/script>\n\n\n<\/div>\n<!-- \/MECHANOGURUS AUTOMATION TEASERS -->\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- ==========================================================\n     MECHANOGURUS\n     ENGINEERING PROCESS AUDIT BLOCK\n     \n     UPDATED:\n     - Removed top \"\u0410\u0443\u0434\u0438\u0442...\" badge\n     - Main heading centered\n     - Problem subtitle moved directly below heading\n     - Removed bottom pills\n     - Added business-process image\n     - Left-to-right image fade \/ blur treatment\n     - Improved commercial hierarchy\n     - Responsive desktop \/ tablet \/ mobile\n     ========================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n<link\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&amp;display=swap\"\n  rel=\"stylesheet\"\n>\n\n\n<div class=\"mga-root\">\n\n<style>\n\n\/* ==========================================================\n   WORDPRESS WIDTH RESET\n   ========================================================== *\/\n\n.wp-block-html:has(.mga-root),\n.entry-content > .wp-block-html:has(.mga-root),\n.wp-block-post-content > .wp-block-html:has(.mga-root),\n.wp-block-group:has(.mga-root),\n.wp-block-group:has(.mga-root) > .wp-block-group__inner-container,\n.is-layout-constrained:has(.mga-root) {\n\n  display: block !important;\n\n  width: 100% !important;\n  max-width: none !important;\n\n  margin-left: auto !important;\n  margin-right: auto !important;\n\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n\n\/* ==========================================================\n   BASE\n   ========================================================== *\/\n\n.mga-root {\n\n  --gold: #F2B839;\n  --gold2: #E1830F;\n\n  --card-bg: #101214;\n\n  --text: #fef4ee;\n  --text-2: rgba(254,244,238,0.68);\n  --text-3: rgba(254,244,238,0.42);\n\n  --border: rgba(255,255,255,0.08);\n  --border-gold: rgba(242,184,57,0.24);\n\n  --gradient:\n    linear-gradient(\n      135deg,\n      #F2B839 0%,\n      #E1830F 100%\n    );\n\n  --mga-max: 1400px;\n  --mga-gutter: 20px;\n\n  width: 100% !important;\n\n  max-width:\n    var(--mga-max) !important;\n\n  margin:\n    clamp(36px, 4vw, 64px)\n    auto;\n\n  padding-left:\n    var(--mga-gutter);\n\n  padding-right:\n    var(--mga-gutter);\n\n  color:\n    var(--text);\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n\n  line-height:\n    1.55;\n\n  overflow-x:\n    clip;\n\n  -webkit-font-smoothing:\n    antialiased;\n}\n\n\n.mga-root *,\n.mga-root *::before,\n.mga-root *::after {\n  box-sizing: border-box;\n}\n\n\n.mga-root h3,\n.mga-root p {\n  margin: 0;\n}\n\n\n\/* ==========================================================\n   MAIN CARD\n   ========================================================== *\/\n\n.mga-card {\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    var(--border);\n\n  border-radius:\n    18px;\n\n  background:\n    var(--card-bg);\n\n  box-shadow:\n    0 16px 50px\n    rgba(0,0,0,0.20);\n\n  transition:\n    border-color 0.25s ease,\n    box-shadow 0.25s ease;\n}\n\n\n.mga-card:hover {\n\n  border-color:\n    var(--border-gold);\n\n  box-shadow:\n    0 20px 60px\n    rgba(0,0,0,0.28);\n}\n\n\n\/* Left accent *\/\n\n.mga-card::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  z-index: 6;\n\n  width: 3px;\n  height: 100%;\n\n  background:\n    var(--gradient);\n}\n\n\n\/* ==========================================================\n   IMAGE\n   ========================================================== *\/\n\n.mga-image {\n\n  position: absolute;\n\n  inset:\n    0\n    0\n    0\n    auto;\n\n  z-index: 0;\n\n  width: 58%;\n\n  height: 100%;\n\n  overflow: hidden;\n\n  pointer-events: none;\n}\n\n\n.mga-image img {\n\n  width: 100%;\n\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position:\n    center center;\n\n  transform:\n    scale(1.03);\n\n  filter:\n    contrast(1.02)\n    saturate(0.82);\n}\n\n\n\/* ==========================================================\n   IMAGE FADE\n   100% DARK ON LEFT -> IMAGE VISIBLE ON RIGHT\n   ========================================================== *\/\n\n.mga-image::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(16,18,20,1) 0%,\n      rgba(16,18,20,0.96) 15%,\n      rgba(16,18,20,0.80) 30%,\n      rgba(16,18,20,0.48) 52%,\n      rgba(16,18,20,0.16) 75%,\n      rgba(16,18,20,0.02) 100%\n    );\n\n  pointer-events:\n    none;\n}\n\n\n\/* Soft blur transition *\/\n\n.mga-image::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n\n  left: 0;\n\n  width: 44%;\n\n  height: 100%;\n\n  z-index: 1;\n\n  backdrop-filter:\n    blur(14px);\n\n  -webkit-backdrop-filter:\n    blur(14px);\n\n  mask-image:\n    linear-gradient(\n      90deg,\n      black 0%,\n      rgba(0,0,0,0.9) 35%,\n      transparent 100%\n    );\n\n  -webkit-mask-image:\n    linear-gradient(\n      90deg,\n      black 0%,\n      rgba(0,0,0,0.9) 35%,\n      transparent 100%\n    );\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   MAIN CONTENT WRAPPER\n   ========================================================== *\/\n\n.mga-content {\n\n  position: relative;\n\n  z-index: 3;\n\n  padding:\n    clamp(34px, 4vw, 54px)\n    clamp(26px, 4vw, 54px)\n    clamp(30px, 3.5vw, 46px);\n}\n\n\n\/* ==========================================================\n   HEADER\n   ========================================================== *\/\n\n.mga-header {\n\n  width: 100%;\n\n  max-width:\n    980px;\n\n  margin:\n    0\n    auto\n    clamp(28px, 3vw, 36px);\n\n  text-align:\n    center;\n}\n\n\n\/* ==========================================================\n   MAIN HEADING\n   ========================================================== *\/\n\n.mga-card h3 {\n\n  margin: 0;\n\n  color:\n    var(--text);\n\n  font-size:\n    clamp(\n      28px,\n      2.55vw,\n      46px\n    );\n\n  font-weight:\n    700;\n\n  line-height:\n    1.04;\n\n  letter-spacing:\n    -0.04em;\n\n  text-align:\n    center;\n\n  text-wrap:\n    balance;\n}\n\n\n.mga-gold-text {\n\n  background:\n    var(--gradient);\n\n  -webkit-background-clip:\n    text;\n\n  -webkit-text-fill-color:\n    transparent;\n\n  background-clip:\n    text;\n}\n\n\n\/* ==========================================================\n   SUBHEADING \/ PROBLEM\n   ========================================================== *\/\n\n.mga-hook {\n\n  max-width:\n    760px;\n\n  margin:\n    clamp(14px, 1.8vw, 20px)\n    auto\n    0;\n\n  color:\n    var(--text-2);\n\n  font-size:\n    clamp(\n      15px,\n      1.25vw,\n      18px\n    );\n\n  font-weight:\n    500;\n\n  line-height:\n    1.5;\n\n  text-align:\n    center;\n\n  text-wrap:\n    balance;\n}\n\n\n\/* ==========================================================\n   BODY GRID\n   ========================================================== *\/\n\n.mga-body {\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, 1.12fr)\n    minmax(260px, 0.88fr);\n\n  gap:\n    clamp(24px, 4vw, 60px);\n\n  align-items:\n    end;\n}\n\n\n\/* ==========================================================\n   SOLUTION\n   ========================================================== *\/\n\n.mga-solution {\n\n  position: relative;\n\n  padding:\n    clamp(18px, 2vw, 22px)\n    clamp(18px, 2.2vw, 24px);\n\n  border:\n    1px solid\n    rgba(242,184,57,0.13);\n\n  border-radius:\n    12px;\n\n  background:\n    rgba(10,12,14,0.70);\n\n  backdrop-filter:\n    blur(10px);\n\n  -webkit-backdrop-filter:\n    blur(10px);\n}\n\n\n.mga-solution-label {\n\n  margin-bottom:\n    13px;\n\n  color:\n    var(--gold);\n\n  font-size:\n    11px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    0.08em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.mga-solution-list {\n\n  display:\n    grid;\n\n  grid-template-columns:\n    1fr;\n\n  gap:\n    11px;\n\n  margin: 0;\n\n  padding: 0;\n\n  list-style:\n    none;\n}\n\n\n.mga-solution-list li {\n\n  display:\n    flex;\n\n  align-items:\n    flex-start;\n\n  gap:\n    10px;\n\n  color:\n    var(--text-2);\n\n  font-size:\n    clamp(\n      13px,\n      1vw,\n      15px\n    );\n\n  line-height:\n    1.5;\n}\n\n\n.mga-solution-list li::before {\n\n  content: \"\";\n\n  flex-shrink:\n    0;\n\n  width: 17px;\n\n  height: 17px;\n\n  margin-top:\n    2px;\n\n  border:\n    1px solid\n    rgba(242,184,57,0.28);\n\n  border-radius:\n    50%;\n\n  background-color:\n    rgba(242,184,57,0.10);\n\n  background-image:\n    url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23F2B839' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n\n  background-size:\n    10px 10px;\n\n  background-repeat:\n    no-repeat;\n\n  background-position:\n    center;\n}\n\n\n\/* ==========================================================\n   RIGHT SIDE \/ METRICS\n   ========================================================== *\/\n\n.mga-side {\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  gap:\n    18px;\n}\n\n\n\/* ==========================================================\n   METRICS\n   ========================================================== *\/\n\n.mga-metrics {\n\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(\n      2,\n      minmax(0,1fr)\n    );\n\n  overflow:\n    hidden;\n\n  border:\n    1px solid\n    rgba(255,255,255,0.10);\n\n  border-radius:\n    12px;\n\n  background:\n    rgba(10,12,14,0.62);\n\n  backdrop-filter:\n    blur(10px);\n\n  -webkit-backdrop-filter:\n    blur(10px);\n}\n\n\n.mga-metric {\n\n  min-width: 0;\n\n  padding:\n    15px\n    16px;\n\n  border-right:\n    1px solid\n    rgba(255,255,255,0.08);\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,0.08);\n}\n\n\n.mga-metric:nth-child(2n) {\n\n  border-right:\n    none;\n}\n\n\n.mga-metric:nth-child(n+3) {\n\n  border-bottom:\n    none;\n}\n\n\n.mga-metric-val {\n\n  margin-bottom:\n    5px;\n\n  color:\n    var(--gold);\n\n  font-size:\n    clamp(\n      18px,\n      1.8vw,\n      24px\n    );\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    -0.02em;\n\n  line-height:\n    1;\n}\n\n\n.mga-metric-lbl {\n\n  color:\n    var(--text-3);\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1.4;\n\n  letter-spacing:\n    0.03em;\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* ==========================================================\n   ACTIONS\n   ========================================================== *\/\n\n.mga-actions {\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    14px;\n}\n\n\n\/* ==========================================================\n   PRIMARY CTA\n   ========================================================== *\/\n\n.mga-cta {\n\n  --btn-h: 50px;\n  --r: 28px;\n  --circ: 38px;\n  --off: 6px;\n  --spd: 0.42s;\n  --ease: cubic-bezier(0.4,0,0.15,1);\n\n  position:\n    relative;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  height:\n    var(--btn-h);\n\n  padding:\n    0\n    calc(\n      var(--circ)\n      +\n      var(--off)\n      +\n      14px\n    )\n    0\n    24px;\n\n  overflow:\n    hidden;\n\n  border:\n    1px solid\n    rgba(242,184,57,0.22);\n\n  border-radius:\n    var(--r);\n\n  background:\n    #fef4ee;\n\n  text-decoration:\n    none;\n\n  transition:\n    border-color\n    var(--spd)\n    var(--ease),\n\n    box-shadow\n    var(--spd)\n    var(--ease);\n}\n\n\n.mga-cta::before {\n\n  content: \"\";\n\n  position:\n    absolute;\n\n  right:\n    calc(\n      var(--off)\n      +\n      var(--circ)\/2\n    );\n\n  top:\n    50%;\n\n  z-index:\n    1;\n\n  width:\n    var(--circ);\n\n  height:\n    var(--circ);\n\n  border-radius:\n    50%;\n\n  background:\n    var(--gold);\n\n  transform:\n    translate(\n      50%,\n      -50%\n    )\n    scale(1);\n\n  transition:\n    transform\n    var(--spd)\n    var(--ease);\n}\n\n\n.mga-cta:hover::before {\n\n  transform:\n    translate(\n      50%,\n      -50%\n    )\n    scale(9);\n}\n\n\n.mga-cta:hover {\n\n  border-color:\n    var(--gold);\n\n  box-shadow:\n    0 8px 28px\n    rgba(242,184,57,0.25);\n}\n\n\n.mga-cta__text {\n\n  position:\n    relative;\n\n  z-index:\n    2;\n\n  color:\n    #1b2a4a;\n\n  font-size:\n    14px;\n\n  font-weight:\n    600;\n\n  white-space:\n    nowrap;\n}\n\n\n.mga-cta__arrow {\n\n  position:\n    absolute;\n\n  z-index:\n    3;\n\n  right:\n    var(--off);\n\n  top:\n    50%;\n\n  width:\n    var(--circ);\n\n  height:\n    var(--circ);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--gold);\n\n  transform:\n    translateY(-50%);\n}\n\n\n.mga-cta__arrow svg {\n\n  width:\n    17px;\n\n  height:\n    17px;\n\n  fill:\n    none;\n\n  stroke:\n    #1b2a4a;\n\n  stroke-width:\n    2.5;\n\n  stroke-linecap:\n    round;\n\n  stroke-linejoin:\n    round;\n}\n\n\n\/* ==========================================================\n   SECONDARY LINK\n   ========================================================== *\/\n\n.mga-link {\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  color:\n    rgba(255,255,255,0.50);\n\n  font-size:\n    13px;\n\n  font-weight:\n    500;\n\n  text-decoration:\n    none;\n\n  transition:\n    color 0.2s ease;\n}\n\n\n.mga-link:hover {\n\n  color:\n    var(--gold);\n}\n\n\n\/* ==========================================================\n   LAPTOP\n   ========================================================== *\/\n\n@media (max-width: 1180px) {\n\n  .mga-card h3 {\n\n    font-size:\n      clamp(\n        27px,\n        3vw,\n        42px\n      );\n  }\n\n\n  .mga-image {\n\n    width:\n      55%;\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media (max-width: 900px) {\n\n  .mga-root {\n\n    --mga-gutter:\n      16px;\n  }\n\n\n  .mga-content {\n\n    padding:\n      30px\n      24px\n      28px;\n  }\n\n\n  .mga-card h3 {\n\n    font-size:\n      clamp(\n        26px,\n        5vw,\n        38px\n      );\n  }\n\n\n  .mga-body {\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      20px;\n  }\n\n\n  .mga-image {\n\n    width:\n      70%;\n\n    opacity:\n      0.55;\n  }\n\n\n  .mga-solution {\n\n    max-width:\n      720px;\n  }\n\n\n  .mga-side {\n\n    max-width:\n      720px;\n\n    width:\n      100%;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 700px) {\n\n  .mga-root {\n\n    --mga-gutter:\n      12px;\n  }\n\n\n  .mga-content {\n\n    padding:\n      27px\n      20px\n      24px;\n  }\n\n\n  .mga-card h3 {\n\n    font-size:\n      clamp(\n        25px,\n        7vw,\n        34px\n      );\n\n    line-height:\n      1.06;\n  }\n\n\n  .mga-hook {\n\n    font-size:\n      15px;\n  }\n\n\n  .mga-image {\n\n    width:\n      100%;\n\n    opacity:\n      0.40;\n  }\n\n\n  .mga-image::before {\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(16,18,20,0.96) 0%,\n        rgba(16,18,20,0.83) 35%,\n        rgba(16,18,20,0.60) 70%,\n        rgba(16,18,20,0.40) 100%\n      );\n  }\n\n\n  .mga-image::after {\n\n    display:\n      none;\n  }\n\n\n  .mga-solution-list li {\n\n    font-size:\n      14px;\n  }\n\n}\n\n\n\/* ==========================================================\n   PHONE\n   ========================================================== *\/\n\n@media (max-width: 560px) {\n\n  .mga-content {\n\n    padding:\n      24px\n      16px\n      22px;\n  }\n\n\n  .mga-card h3 {\n\n    font-size:\n      clamp(\n        24px,\n        7.5vw,\n        31px\n      );\n  }\n\n\n  .mga-metrics {\n\n    grid-template-columns:\n      1fr\n      1fr;\n  }\n\n\n  .mga-metric {\n\n    padding:\n      13px\n      12px;\n  }\n\n\n  .mga-actions {\n\n    flex-direction:\n      column;\n\n    align-items:\n      stretch;\n\n    gap:\n      10px;\n  }\n\n\n  .mga-cta {\n\n    width:\n      100%;\n\n    justify-content:\n      center;\n  }\n\n\n  .mga-link {\n\n    width:\n      100%;\n\n    justify-content:\n      center;\n\n    padding:\n      6px\n      0;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL PHONE\n   ========================================================== *\/\n\n@media (max-width: 380px) {\n\n  .mga-root {\n\n    --mga-gutter:\n      10px;\n  }\n\n\n  .mga-content {\n\n    padding:\n      21px\n      14px\n      19px;\n  }\n\n\n  .mga-card h3 {\n\n    font-size:\n      clamp(\n        23px,\n        7.8vw,\n        28px\n      );\n  }\n\n\n  .mga-metric-lbl {\n\n    font-size:\n      9px;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mga-card,\n  .mga-cta,\n  .mga-cta::before {\n\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\n\n\n<div class=\"mga-card\">\n\n\n  <!-- IMAGE -->\n\n  <div\n    class=\"mga-image\"\n    aria-hidden=\"true\"\n  >\n\n    <img\n      src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/09\/business-process-mapping.png\"\n      alt=\"\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    >\n\n  <\/div>\n\n\n\n  <!-- CONTENT -->\n\n  <div class=\"mga-content\">\n\n\n    <!-- HEADER -->\n\n    <div class=\"mga-header\">\n\n      <h3>\n\n        \u041d\u0430\u0439\u0434\u0451\u043c, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e\n        <span class=\"mga-gold-text\">\n          \u0442\u0435\u0440\u044f\u0435\u0442 \u0447\u0430\u0441\u044b \u043d\u0430 \u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0435\n        <\/span>\n\n      <\/h3>\n\n\n      <p class=\"mga-hook\">\n\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0439 \u043e\u0442\u0434\u0435\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0435,\n        \u0430 \u0441\u0440\u043e\u043a\u0438 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0441\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f?\n\n      <\/p>\n\n    <\/div>\n\n\n\n    <!-- BODY -->\n\n    <div class=\"mga-body\">\n\n\n      <!-- SOLUTION -->\n\n      <div class=\"mga-solution\">\n\n        <div class=\"mga-solution-label\">\n          \u0427\u0442\u043e \u0434\u0430\u0451\u0442 \u0430\u0443\u0434\u0438\u0442\n        <\/div>\n\n\n        <ul class=\"mga-solution-list\">\n\n          <li>\n            \u0412\u044b\u044f\u0432\u0438\u043c \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430: \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u041a\u0414,\n            \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0431\u043e\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f\n            \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432.\n          <\/li>\n\n          <li>\n            \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445 \u2014\n            \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0434\u043b\u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430.\n          <\/li>\n\n          <li>\n            \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u0447\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c,\n            \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0422\u041a\u041f\n            \u0438 \u0432\u044b\u043f\u0443\u0441\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\n          <\/li>\n\n          <li>\n            \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0434\u043e\u0440\u043e\u0436\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443\n            \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432.\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n\n\n      <!-- RIGHT SIDE -->\n\n      <div class=\"mga-side\">\n\n\n        <!-- METRICS -->\n\n        <div class=\"mga-metrics\">\n\n\n          <div class=\"mga-metric\">\n\n            <div class=\"mga-metric-val\">\n              \u0434\u043e 40%\n            <\/div>\n\n            <div class=\"mga-metric-lbl\">\n              \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u0435\u0440\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"mga-metric\">\n\n            <div class=\"mga-metric-val\">\n              2\u20136 \u043d\u0435\u0434.\n            <\/div>\n\n            <div class=\"mga-metric-lbl\">\n              \u0441\u0440\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u0442\u0430\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"mga-metric\">\n\n            <div class=\"mga-metric-val\">\n              8\n            <\/div>\n\n            <div class=\"mga-metric-lbl\">\n              \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"mga-metric\">\n\n            <div class=\"mga-metric-val\">\n              90%\n            <\/div>\n\n            <div class=\"mga-metric-lbl\">\n              \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u044b\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f\n            <\/div>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- ACTIONS -->\n\n        <div class=\"mga-actions\">\n\n\n          <a\n            class=\"mga-cta\"\n            href=\"https:\/\/n8n.mechanogurus.ru\/webhook\/2948d681-1b7a-4b6c-947e-783005ac2f47\/chat\"\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n\n            <span class=\"mga-cta__text\">\n              \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443\n            <\/span>\n\n\n            <span\n              class=\"mga-cta__arrow\"\n              aria-hidden=\"true\"\n            >\n\n              <svg viewBox=\"0 0 24 24\">\n\n                <line\n                  x1=\"5\"\n                  y1=\"12\"\n                  x2=\"19\"\n                  y2=\"12\">\n                <\/line>\n\n                <polyline\n                  points=\"13 6 19 12 13 18\">\n                <\/polyline>\n\n              <\/svg>\n\n            <\/span>\n\n          <\/a>\n\n\n          <a\n            class=\"mga-link\"\n            href=\"https:\/\/mechanogurus.ru\/?page_id=1147\"\n            rel=\"noopener\"\n          >\n            \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u043b\u0443\u0433\u0435 \u2192\n          <\/a>\n\n\n        <\/div>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n<\/div>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!--\n  MG: \u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u2014 Homepage Simplified Workflow\n  WordPress Custom HTML block \u2014 self-contained\n\n  How to use:\n  1. Editor \u2192 \"+\" \u2192 Custom HTML\n  2. Paste this entire file\n  3. Place at the same level as other homepage blocks (not inside a padded Group)\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-workflow,\n.mg-workflow *,\n.mg-workflow *::before,\n.mg-workflow *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n\/* \u2705 NO body\/html rules \u2014 inherits WP theme *\/\n.mg-workflow {\n  \/* CSS Variables scoped to .mg-workflow *\/\n  --line-bg: #1e2530;\n  --text: #e9edf5;\n  --muted: #a8b2c1;\n  --card-bg: rgba(255,255,255,0.03);\n  --card-border: 1px solid rgba(255,255,255,0.08);\n  --accent-orange: #ff6b35;\n  --accent-yellow: #f7931e;\n  --accent-green: #9fe870;\n  --glow-orange: rgba(255,107,53,0.6);\n  --glow-green: rgba(159,232,112,0.6);\n  --timeline-center: 50%;\n  --rail-width: 6px;\n  --dot-size: 20px;\n  --endpoint-size: 32px;\n  --card-gap: 60px;\n  --card-max-width: 920px;\n\n  position: relative;\n  z-index: 1;\n  color: var(--text);\n  font-family: \"Manrope\", \"Segoe UI\", sans-serif;\n  -webkit-font-smoothing: antialiased;\n  \n  \/* \u2705 Header method: max-width + margin:auto + padding for edge gap *\/\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: clamp(2.5rem, 4vw, 3.5rem) 25px clamp(3.5rem, 5vw, 5rem);\n}\n\n.mg-workflow .intro {\n  max-width: 720px;\n  margin: 0 auto 2.5rem;\n  text-align: center;\n}\n\n.mg-workflow .intro-title {\n  font-size: clamp(1.5rem, 3vw, 2rem);\n  font-weight: 800;\n  color: #fff;\n  margin-bottom: 0.75rem;\n  letter-spacing: -0.02em;\n}\n\n.mg-workflow .intro-desc {\n  color: var(--muted);\n  font-size: 15px;\n  line-height: 1.6;\n}\n\n.mg-workflow .intro-desc strong {\n  color: rgba(255,255,255,0.85);\n  font-weight: 600;\n}\n\n.mg-workflow .timeline {\n  position: relative;\n  max-width: 1360px;\n  margin: 0 auto;\n  overflow: visible;\n}\n\n\/* \u2500\u2500 Rail \u2500\u2500 *\/\n.mg-workflow .rail-container {\n  position: absolute;\n  top: 0;\n  left: var(--timeline-center);\n  width: var(--rail-width);\n  height: 100%;\n  transform: translateX(-50%);\n  pointer-events: none;\n  z-index: 0;\n}\n\n.mg-workflow .rail {\n  position: absolute;\n  top: calc(var(--endpoint-size) \/ 2 + 35px);\n  bottom: calc(var(--endpoint-size) \/ 2 + 35px);\n  left: 0;\n  width: 100%;\n  background: var(--line-bg);\n  border-radius: var(--rail-width);\n}\n\n.mg-workflow .rail-progress {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 0%;\n  background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #9fe870 100%);\n  border-radius: var(--rail-width);\n  transition: height 0.05s linear;\n}\n\n.mg-workflow .rail-glow {\n  position: absolute;\n  left: 50%;\n  top: 0%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 50px;\n  background: radial-gradient(circle, var(--glow-orange) 0%, transparent 70%);\n  border-radius: 50%;\n  opacity: 0.9;\n  pointer-events: none;\n  transition: top 0.05s linear;\n}\n\n\/* \u2500\u2500 Endpoints \u2500\u2500 *\/\n.mg-workflow .endpoint {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 70px;\n  z-index: 5;\n}\n\n.mg-workflow .endpoint-circle {\n  position: absolute;\n  left: var(--timeline-center);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mg-workflow .endpoint-core {\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n  box-shadow: \n    0 0 20px var(--glow-orange), \n    0 0 40px var(--glow-orange),\n    0 0 60px rgba(255,107,53,0.3);\n  z-index: 2;\n}\n\n.mg-workflow .endpoint.finish .endpoint-core {\n  background: linear-gradient(135deg, #9fe870 0%, #7ed957 100%);\n  box-shadow: \n    0 0 20px var(--glow-green), \n    0 0 40px var(--glow-green),\n    0 0 60px rgba(159,232,112,0.3);\n}\n\n.mg-workflow .endpoint-pulse {\n  position: absolute;\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  border-radius: 50%;\n  border: 2px solid var(--accent-orange);\n  animation: mg-wf-pulse 2s ease-out infinite;\n}\n\n.mg-workflow .endpoint.finish .endpoint-pulse { border-color: var(--accent-green); }\n\n@keyframes mg-wf-pulse {\n  0%   { transform: scale(1); opacity: 1; }\n  100% { transform: scale(2.5); opacity: 0; }\n}\n\n.mg-workflow .endpoint-label {\n  position: absolute;\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 3px;\n  white-space: nowrap;\n}\n\n.mg-workflow .endpoint.start .endpoint-label {\n  left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n  color: var(--accent-orange);\n  text-shadow: 0 0 20px var(--glow-orange);\n}\n\n.mg-workflow .endpoint.finish .endpoint-label {\n  right: calc(100% - var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n  color: var(--accent-green);\n  text-shadow: 0 0 20px var(--glow-green);\n}\n\n\/* \u2500\u2500 Timeline items \u2500\u2500 *\/\n.mg-workflow .item {\n  position: relative;\n  width: 100%;\n  padding: 24px 0;\n  display: flex;\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),\n              transform 0.6s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .item.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.mg-workflow .item.left {\n  justify-content: flex-start;\n  padding-right: calc(var(--timeline-center) + var(--card-gap));\n}\n\n.mg-workflow .item.right {\n  justify-content: flex-end;\n  padding-left: calc(var(--timeline-center) + var(--card-gap));\n}\n\n\/* \u2500\u2500 Dots \u2500\u2500 *\/\n.mg-workflow .dot {\n  position: absolute;\n  left: var(--timeline-center);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--dot-size);\n  height: var(--dot-size);\n  z-index: 5;\n}\n\n.mg-workflow .dot-core {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--dot-size);\n  height: var(--dot-size);\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n  box-shadow: 0 0 15px var(--glow-orange);\n  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .dot-ring {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(var(--dot-size) + 16px);\n  height: calc(var(--dot-size) + 16px);\n  border-radius: 50%;\n  border: 2px solid rgba(255,107,53,0.3);\n  opacity: 0;\n  transition: all 0.4s ease;\n}\n\n.mg-workflow .item.active .dot-core {\n  width: calc(var(--dot-size) + 6px);\n  height: calc(var(--dot-size) + 6px);\n  background: linear-gradient(135deg, #f7931e 0%, #9fe870 100%);\n  box-shadow: \n    0 0 25px var(--glow-orange), \n    0 0 50px var(--glow-orange);\n}\n\n.mg-workflow .item.active .dot-ring {\n  opacity: 1;\n  border-color: rgba(247,147,30,0.6);\n  animation: mg-wf-dot-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mg-wf-dot-pulse {\n  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }\n  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n}\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n.mg-workflow .card {\n  background: var(--card-bg);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border-radius: 20px;\n  padding: 28px 32px;\n  box-shadow: 0 4px 30px rgba(0,0,0,0.3);\n  border: var(--card-border);\n  max-width: var(--card-max-width);\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  transition: box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.mg-workflow .card::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);\n  opacity: 0;\n  transition: opacity 0.4s ease;\n}\n\n.mg-workflow .item.active .card::before { opacity: 1; }\n\n.mg-workflow .card:hover {\n  box-shadow: 0 8px 50px rgba(255,107,53,0.15);\n  border-color: rgba(255,107,53,0.2);\n}\n\n.mg-workflow .step-number {\n  position: absolute;\n  top: 12px;\n  right: 16px;\n  font-size: 12px;\n  font-weight: 800;\n  color: rgba(255,107,53,0.4);\n  letter-spacing: 1px;\n}\n\n.mg-workflow .title {\n  margin: 2px 0 8px;\n  font-weight: 700;\n  font-size: 17px;\n  color: #fff;\n  line-height: 1.3;\n}\n\n.mg-workflow .desc {\n  color: var(--muted);\n  line-height: 1.55;\n  font-size: 14px;\n}\n\n\/* \u2500\u2500 In-card button \u2500\u2500 *\/\n.mg-workflow .card-btn-wrap { margin-top: 18px; }\n\n.mg-workflow .card-btn {\n  --mg-gold: #F2B839;\n  --mg-navy-deep: #0F1E3C;\n  --btn-height: 46px;\n  --btn-radius: 26px;\n  --circle-size: 34px;\n  --circle-offset: 6px;\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) + 12px) 0 22px;\n  border: 2px solid rgba(242,184,57,0.25);\n  border-radius: var(--btn-radius);\n  background: rgba(242,184,57,0.08);\n  cursor: pointer;\n  text-decoration: none;\n  overflow: hidden;\n  font-family: 'Manrope', sans-serif;\n  transition:\n    border-color var(--speed) var(--ease),\n    box-shadow var(--speed) var(--ease);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.mg-workflow .card-btn::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-workflow .card-btn:hover::before { transform: translate(50%, -50%) scale(8); }\n.mg-workflow .card-btn:hover {\n  border-color: var(--mg-gold);\n  box-shadow: 0 6px 24px rgba(242,184,57,0.3);\n}\n\n.mg-workflow .card-btn__text {\n  position: relative;\n  z-index: 2;\n  font-size: 14px;\n  font-weight: 600;\n  color: #f7931e;\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-workflow .card-btn:hover .card-btn__text { color: var(--mg-navy-deep); }\n\n.mg-workflow .card-btn__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-workflow .card-btn:hover .card-btn__arrow { background: transparent; }\n\n.mg-workflow .card-btn__arrow svg {\n  width: 15px;\n  height: 15px;\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-workflow .card-btn:hover .card-btn__arrow svg { transform: translateX(3px); }\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media (max-width: 1200px) {\n  .mg-workflow { --card-max-width: 680px; }\n}\n\n@media (max-width: 900px) {\n  .mg-workflow {\n    --timeline-center: 30px;\n    --dot-size: 18px;\n    --endpoint-size: 28px;\n    --card-gap: 40px;\n    --card-max-width: 100%;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    justify-content: flex-start;\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n    padding-right: 0;\n  }\n  .mg-workflow .card { max-width: 100%; }\n  .mg-workflow .endpoint.start .endpoint-label,\n  .mg-workflow .endpoint.finish .endpoint-label {\n    left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 16px);\n    right: auto;\n  }\n}\n\n@media (max-width: 768px) {\n  .mg-workflow { padding-left: 12px; padding-right: 12px; }\n  .mg-workflow .intro { margin-bottom: 2rem; }\n  .mg-workflow .intro-desc { font-size: 14px; }\n}\n\n@media (max-width: 600px) {\n  .mg-workflow {\n    --timeline-center: 24px;\n    --rail-width: 4px;\n    --dot-size: 16px;\n    --endpoint-size: 24px;\n    --card-gap: 30px;\n    padding-top: clamp(1.875rem, 3vw, 2.5rem);\n    padding-bottom: clamp(2.5rem, 4vw, 3.75rem);\n  }\n  .mg-workflow .item { padding: 18px 0; }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n    padding-right: 8px;\n  }\n  .mg-workflow .card {\n    padding: 18px;\n    border-radius: 16px;\n  }\n  .mg-workflow .title { font-size: 15px; }\n  .mg-workflow .desc { font-size: 13px; }\n  .mg-workflow .step-number { font-size: 10px; }\n  .mg-workflow .endpoint-label {\n    font-size: 11px;\n    letter-spacing: 2px;\n  }\n  .mg-workflow .endpoint.start .endpoint-label,\n  .mg-workflow .endpoint.finish .endpoint-label {\n    left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 12px);\n    right: auto;\n  }\n  .mg-workflow .endpoint { height: 55px; }\n  .mg-workflow .rail {\n    top: calc(var(--endpoint-size) \/ 2 + 27px);\n    bottom: calc(var(--endpoint-size) \/ 2 + 27px);\n  }\n}\n\n@media (max-width: 480px) {\n  .mg-workflow { padding-left: 8px; padding-right: 8px; }\n}\n\n@media (max-width: 380px) {\n  .mg-workflow {\n    --timeline-center: 20px;\n    --dot-size: 14px;\n    --endpoint-size: 20px;\n    --card-gap: 24px;\n  }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n  }\n  .mg-workflow .card { padding: 14px; }\n  .mg-workflow .title { font-size: 14px; }\n  .mg-workflow .desc { font-size: 12px; }\n  .mg-workflow .endpoint { height: 45px; }\n  .mg-workflow .rail {\n    top: calc(var(--endpoint-size) \/ 2 + 22px);\n    bottom: calc(var(--endpoint-size) \/ 2 + 22px);\n  }\n}\n\n@media (hover: none) {\n  .mg-workflow .card-btn:active::before { transform: translate(50%, -50%) scale(8); }\n  .mg-workflow .card-btn:active { border-color: var(--mg-gold); }\n  .mg-workflow .card-btn:active .card-btn__text { color: var(--mg-navy-deep); }\n  .mg-workflow .card-btn:active .card-btn__arrow { background: transparent; }\n  .mg-workflow .card-btn:active .card-btn__arrow svg { transform: translateX(3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mg-workflow .item,\n  .mg-workflow .card,\n  .mg-workflow .dot-core,\n  .mg-workflow .rail-progress,\n  .mg-workflow .rail-glow {\n    transition: none;\n  }\n  .mg-workflow .endpoint-pulse,\n  .mg-workflow .item.active .dot-ring {\n    animation: none;\n  }\n  .mg-workflow .item {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@media (max-height: 500px) and (orientation: landscape) {\n  .mg-workflow .item { padding: 14px 0; }\n  .mg-workflow .endpoint { height: 40px; }\n}\n<\/style>\n\n<div class=\"mg-workflow\">\n  <div class=\"intro\">\n    <h2 class=\"intro-title\">\u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c<\/h2>\n    <p class=\"intro-desc\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043e\u0442 \u0438\u0434\u0435\u0438 \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0417\u0430 \u043a\u0443\u043b\u0438\u0441\u0430\u043c\u0438 \u043d\u0430\u0448\u0430 <strong>\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 AI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/strong> \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0435\u0435 \u2014 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n  <\/div>\n\n  <div class=\"timeline\" id=\"mgWfTimeline\">\n    \n    <div class=\"endpoint start\" id=\"mgWfTimelineStart\">\n      <div class=\"endpoint-circle\">\n        <div class=\"endpoint-pulse\"><\/div>\n        <div class=\"endpoint-core\"><\/div>\n      <\/div>\n      <span class=\"endpoint-label\">\u0421\u0422\u0410\u0420\u0422<\/span>\n    <\/div>\n\n    <div class=\"rail-container\">\n      <div class=\"rail\" aria-hidden=\"true\">\n        <div class=\"rail-progress\"><\/div>\n        <div class=\"rail-glow\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">01<\/div>\n        <div>\n          <div class=\"title\">\u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u043e \u0437\u0430\u0434\u0430\u0447\u0435<\/div>\n          <p class=\"desc\">\u041e\u043f\u0438\u0448\u0438\u0442\u0435 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u043e \u0446\u0435\u043b\u044f\u0445, \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0438 \u0441\u0440\u043e\u043a\u0430\u0445. \u041c\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433.<\/p>\n          <div class=\"card-btn-wrap\">\n            <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"card-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <span class=\"card-btn__text\">\u041d\u0430\u0447\u0430\u0442\u044c<\/span>\n              <span class=\"card-btn__arrow\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 6 19 12 13 18\"><\/polyline><\/svg>\n              <\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">02<\/div>\n        <div>\n          <div class=\"title\">\u0421\u043e\u0433\u043b\u0430\u0441\u0443\u0435\u043c \u044d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n          <p class=\"desc\">\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0441\u043a\u0438\u0437, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">03<\/div>\n        <div>\n          <div class=\"title\">\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/div>\n          <p class=\"desc\">\u0413\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u2014 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439 \u0438 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043f\u043b\u0430\u0442.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">04<\/div>\n        <div>\n          <div class=\"title\">\u0417\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u043e\u0433\u043e\u0432\u043e\u0440<\/div>\n          <p class=\"desc\">\u0415\u0441\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">05<\/div>\n        <div>\n          <div class=\"title\">\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/div>\n          <p class=\"desc\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u0412\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u043e\u0440\u0442\u0430\u043b\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate=\"\">\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">06<\/div>\n        <div>\n          <div class=\"title\">\u041f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/div>\n          <p class=\"desc\">\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0434\u0430\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"endpoint finish\" id=\"mgWfTimelineFinish\">\n      <div class=\"endpoint-circle\">\n        <div class=\"endpoint-pulse\"><\/div>\n        <div class=\"endpoint-core\"><\/div>\n      <\/div>\n      <span class=\"endpoint-label\">\u0424\u0418\u041d\u0418\u0428<\/span>\n    <\/div>\n\n  <\/div>\n<\/div><!-- \/.mg-workflow -->\n\n<script>\n(function() {\n  'use strict';\n  \n  var timeline = document.getElementById('mgWfTimeline');\n  var items = document.querySelectorAll('.mg-workflow .item[data-animate]');\n  var rail = document.querySelector('.mg-workflow .rail');\n  var railProgress = document.querySelector('.mg-workflow .rail-progress');\n  var railGlow = document.querySelector('.mg-workflow .rail-glow');\n  \n  if (!timeline || !items.length || !rail) return;\n  \n  var visibilityObserver = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if (entry.isIntersecting && entry.intersectionRatio > 0.15) {\n        entry.target.classList.add('visible');\n      }\n    });\n  }, {\n    root: null,\n    rootMargin: '-5% 0px -5% 0px',\n    threshold: [0, 0.15, 0.3]\n  });\n  \n  var activeObserver = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if (entry.isIntersecting && entry.intersectionRatio > 0.4) {\n        entry.target.classList.add('active');\n      } else {\n        entry.target.classList.remove('active');\n      }\n    });\n  }, {\n    root: null,\n    rootMargin: '-35% 0px -35% 0px',\n    threshold: [0, 0.4, 0.6, 1]\n  });\n  \n  items.forEach(function(item) {\n    visibilityObserver.observe(item);\n    activeObserver.observe(item);\n  });\n  \n  var currentProgress = 0;\n  var targetProgress = 0;\n  var rafId = null;\n  \n  function lerp(start, end, factor) { return start + (end - start) * factor; }\n  \n  function calculateProgress() {\n    var railRect = rail.getBoundingClientRect();\n    var viewHeight = window.innerHeight;\n    var scrollCenter = viewHeight * 0.5;\n    var railTop = railRect.top;\n    var railHeight = railRect.height;\n    var progressPoint = scrollCenter - railTop;\n    return Math.min(Math.max(progressPoint \/ railHeight, 0), 1) * 100;\n  }\n  \n  function animate() {\n    var diff = Math.abs(currentProgress - targetProgress);\n    if (diff > 0.1) {\n      currentProgress = lerp(currentProgress, targetProgress, 0.12);\n      updateRailVisuals(currentProgress);\n      rafId = requestAnimationFrame(animate);\n    } else {\n      currentProgress = targetProgress;\n      updateRailVisuals(targetProgress);\n      rafId = null;\n    }\n  }\n  \n  function updateRailVisuals(progress) {\n    railProgress.style.height = progress + '%';\n    railGlow.style.top = progress + '%';\n    \n    if (progress < 50) {\n      railGlow.style.background = 'radial-gradient(circle, rgba(255,107,53,0.8) 0%, transparent 70%)';\n    } else if (progress < 80) {\n      railGlow.style.background = 'radial-gradient(circle, rgba(247,147,30,0.8) 0%, transparent 70%)';\n    } else {\n      railGlow.style.background = 'radial-gradient(circle, rgba(159,232,112,0.8) 0%, transparent 70%)';\n    }\n  }\n  \n  function onScroll() {\n    targetProgress = calculateProgress();\n    if (!rafId) {\n      rafId = requestAnimationFrame(animate);\n    }\n  }\n  \n  var ticking = false;\n  function throttledScroll() {\n    if (!ticking) {\n      ticking = true;\n      requestAnimationFrame(function() {\n        onScroll();\n        ticking = false;\n      });\n    }\n  }\n  \n  window.addEventListener('scroll', throttledScroll, { passive: true });\n  window.addEventListener('resize', throttledScroll, { passive: true });\n  window.addEventListener('orientationchange', function() { setTimeout(throttledScroll, 100); });\n  \n  targetProgress = calculateProgress();\n  currentProgress = targetProgress;\n  updateRailVisuals(currentProgress);\n  \n  items.forEach(function(item) {\n    var rect = item.getBoundingClientRect();\n    if (rect.top < window.innerHeight * 0.85) {\n      item.classList.add('visible');\n    }\n  });\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-system-font-font-family has-large-font-size wp-elements-2\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b<\/strong><\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u2014 Mechanogurus<\/title>\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Onest:wght@400;500;600;700&family=Unbounded:wght@400;500;700&display=swap');\n\n  :root {\n    --mg-orange: #F2B839;\n    --mg-deep: #E1830F;\n    --mg-dark: #0D0D0D;\n    --mg-darker: #080808;\n    --mg-surface: #141414;\n    --mg-border: rgba(242, 184, 57, 0.12);\n    --mg-text: #e8e8e8;\n    --mg-text-dim: #888888;\n    --mg-glow: rgba(242, 184, 57, 0.08);\n  }\n\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n\n  body {\n    color: var(--mg-text);\n    font-family: 'Onest', sans-serif;\n    overflow-x: hidden;\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     OUR CLIENTS \u2014 INFINITE MARQUEE\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .mg-clients {\n    padding: 24px 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n\n\n  .mg-clients-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 40px;\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* \u2500\u2500 Header \u2500\u2500 *\/\n  .mg-clients-header {\n    text-align: center;\n    margin-bottom: 56px;\n  }\n\n  .mg-clients-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 18px;\n    border: 1px solid var(--mg-border);\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: var(--mg-text-dim);\n    margin-bottom: 24px;\n  }\n\n  .mg-clients-tag-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--mg-orange);\n    animation: mgPulse 2s ease-in-out infinite;\n  }\n\n  @keyframes mgPulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.3; }\n  }\n\n  .mg-clients-header h2 {\n    font-family: 'Unbounded', sans-serif;\n    font-size: clamp(28px, 4vw, 44px);\n    font-weight: 700;\n    color: var(--mg-text);\n    margin-bottom: 16px;\n    line-height: 1.15;\n  }\n\n  .mg-clients-header h2 span {\n    background: linear-gradient(135deg, var(--mg-orange), var(--mg-deep));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .mg-clients-header p {\n    font-size: 15px;\n    color: var(--mg-text-dim);\n    max-width: 460px;\n    margin: 0 auto;\n    line-height: 1.65;\n  }\n\n  \/* \u2500\u2500 Marquee \u2500\u2500 *\/\n  .mg-marquee-wrap {\n    position: relative;\n    overflow: hidden;\n    padding: 12px 0;\n  }\n\n  \/* Edge fade masks *\/\n  .mg-marquee-wrap::before,\n  .mg-marquee-wrap::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 140px;\n    z-index: 2;\n    pointer-events: none;\n  }\n  .mg-marquee-wrap::before {\n    left: 0;\n    background: linear-gradient(to right, var(--mg-darker), transparent);\n  }\n  .mg-marquee-wrap::after {\n    right: 0;\n    background: linear-gradient(to left, var(--mg-darker), transparent);\n  }\n\n  .mg-marquee-track {\n    display: flex;\n    gap: 40px;\n    width: max-content;\n    animation: mgMarquee 35s linear infinite;\n  }\n  .mg-marquee-track:hover {\n    animation-play-state: paused;\n  }\n\n  @keyframes mgMarquee {\n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n  }\n\n  \/* \u2500\u2500 Logo cards \u2500\u2500 *\/\n  .mg-logo-card {\n    flex-shrink: 0;\n    width: 190px;\n    height: 104px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 28px;\n    background: var(--mg-surface);\n    border: 1px solid var(--mg-border);\n    border-radius: 14px;\n    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* Bottom glow on hover *\/\n  .mg-logo-card::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(ellipse 80% 60% at 50% 110%, var(--mg-glow), transparent 70%);\n    opacity: 0;\n    transition: opacity 0.45s ease;\n  }\n\n  \/* Top-edge highlight line *\/\n  .mg-logo-card::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 20%;\n    width: 60%;\n    height: 1px;\n    background: linear-gradient(to right, transparent, rgba(242, 184, 57, 0.3), transparent);\n    opacity: 0;\n    transition: opacity 0.45s ease;\n  }\n\n  .mg-logo-card:hover {\n    border-color: rgba(242, 184, 57, 0.28);\n    transform: translateY(-5px);\n    box-shadow:\n      0 8px 24px rgba(0, 0, 0, 0.3),\n      0 12px 48px rgba(242, 184, 57, 0.06);\n  }\n  .mg-logo-card:hover::before { opacity: 1; }\n  .mg-logo-card:hover::after { opacity: 1; }\n\n  .mg-logo-card img {\n    max-width: 100%;\n    max-height: 60px;\n    object-fit: contain;\n    filter: grayscale(100%) brightness(1.8);\n    opacity: 0.5;\n    transition: all 0.45s ease;\n    position: relative;\n    z-index: 1;\n  }\n  .mg-logo-card:hover img {\n    filter: grayscale(0%) brightness(1);\n    opacity: 1;\n  }\n\n  \/* \u2500\u2500 Bottom section \u2500\u2500 *\/\n  .mg-clients-footer {\n    margin-top: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 32px;\n  }\n\n  .mg-clients-line {\n    flex: 1;\n    max-width: 120px;\n    height: 1px;\n    background: linear-gradient(to right, transparent, var(--mg-border), transparent);\n  }\n\n  .mg-clients-count {\n    font-size: 13px;\n    color: var(--mg-text-dim);\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n  }\n  .mg-clients-count strong {\n    color: var(--mg-orange);\n    font-weight: 700;\n    font-size: 24px;\n    margin-right: 6px;\n    font-family: 'Unbounded', sans-serif;\n  }\n\n  \/* \u2550\u2550\u2550 Responsive \u2550\u2550\u2550 *\/\n  @media (max-width: 768px) {\n    .mg-clients { padding: 20px 0; }\n    .mg-clients-inner { padding: 0 20px; }\n    .mg-marquee-wrap::before,\n    .mg-marquee-wrap::after { width: 60px; }\n    .mg-logo-card { width: 150px; height: 86px; padding: 16px 20px; border-radius: 10px; }\n    .mg-logo-card img { max-height: 48px; }\n    .mg-marquee-track { gap: 28px; }\n    .mg-clients-footer { gap: 20px; }\n    .mg-clients-line { max-width: 60px; }\n  }\n\n  @media (max-width: 480px) {\n    .mg-clients { padding: 16px 0; }\n    .mg-clients-header { margin-bottom: 36px; }\n    .mg-logo-card { width: 130px; height: 74px; padding: 14px 16px; }\n    .mg-logo-card img { max-height: 40px; }\n    .mg-marquee-track { gap: 20px; }\n    .mg-clients-count strong { font-size: 20px; }\n  }\n<\/style>\n<\/head>\n<body>\n\n<!-- \u2550\u2550\u2550 OUR CLIENTS BLOCK \u2550\u2550\u2550 -->\n<section class=\"mg-clients\">\n  <div class=\"mg-clients-inner\">\n\n    <!-- Marquee -->\n    <div class=\"mg-marquee-wrap\">\n      <div class=\"mg-marquee-track\">\n        <!-- \u2500\u2500 Original set \u2500\u2500 -->\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n        <\/div>\n\n        <!-- \u2500\u2500 Duplicate set (seamless loop) \u2500\u2500 -->\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n        <\/div>\n        <div class=\"mg-logo-card\">\n          <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&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-home-page","meta":{"footnotes":""},"class_list":["post-2378","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mechanogurus.ru\/\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\" \/>\n<meta property=\"og:description\" content=\"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mechanogurus.ru\/\" \/>\n<meta property=\"og:site_name\" content=\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-11T06:30:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 \u043c\u0438\u043d\u0443\u0442\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"name\":\"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"datePublished\":\"2025-11-20T11:34:10+00:00\",\"dateModified\":\"2026-09-11T06:30:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mechanogurus.ru\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"contentUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"width\":760,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mechanogurus.ru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#website\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"name\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"description\":\"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\",\"publisher\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#organization\"},\"alternateName\":\"Mechanogurus\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mechanogurus.ru\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#organization\",\"name\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"alternateName\":\"Mechanogurus\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/mg_enginalytics_side_rus-scaled.png\",\"contentUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/mg_enginalytics_side_rus-scaled.png\",\"width\":2560,\"height\":549,\"caption\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"},\"image\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mechanogurus.ru\/","og_locale":"ru_RU","og_type":"article","og_title":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","og_description":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&hellip;]","og_url":"https:\/\/mechanogurus.ru\/","og_site_name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","article_modified_time":"2026-09-11T06:30:15+00:00","og_image":[{"url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"12 \u043c\u0438\u043d\u0443\u0442"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mechanogurus.ru\/","url":"https:\/\/mechanogurus.ru\/","name":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","isPartOf":{"@id":"https:\/\/mechanogurus.ru\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mechanogurus.ru\/#primaryimage"},"image":{"@id":"https:\/\/mechanogurus.ru\/#primaryimage"},"thumbnailUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","datePublished":"2025-11-20T11:34:10+00:00","dateModified":"2026-09-11T06:30:15+00:00","breadcrumb":{"@id":"https:\/\/mechanogurus.ru\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mechanogurus.ru\/"]}]},{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/mechanogurus.ru\/#primaryimage","url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","contentUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","width":760,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/mechanogurus.ru\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mechanogurus.ru\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/mechanogurus.ru\/#website","url":"https:\/\/mechanogurus.ru\/","name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","description":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432","publisher":{"@id":"https:\/\/mechanogurus.ru\/#organization"},"alternateName":"Mechanogurus","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mechanogurus.ru\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/mechanogurus.ru\/#organization","name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","alternateName":"Mechanogurus","url":"https:\/\/mechanogurus.ru\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/mechanogurus.ru\/#\/schema\/logo\/image\/","url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/mg_enginalytics_side_rus-scaled.png","contentUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/mg_enginalytics_side_rus-scaled.png","width":2560,"height":549,"caption":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441"},"image":{"@id":"https:\/\/mechanogurus.ru\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378","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=2378"}],"version-history":[{"count":591,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions"}],"predecessor-version":[{"id":4865,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions\/4865"}],"wp:attachment":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}