document.addEventListener("DOMContentLoaded", function () {
  const section = `
  <section class="mf-transform-section" dir="rtl">
    <div class="mf-transform-wrap">

      <div class="mf-transform-text">
        <span class="mf-kicker">من ملف عادي إلى نظام احترافي</span>
        <h2>شاهد كيف يتحول Excel إلى لوحة قرارات</h2>
        <p>حوّل بياناتك المبعثرة إلى تقارير واضحة ومؤشرات ذكية تساعدك على اتخاذ قرارات أفضل خلال دقائق.</p>
        <a href="/categories" class="mf-btn">استكشف الأنظمة ←</a>
      </div>

      <div class="mf-visual-scene">

        <div class="mf-flow-line">
          <span></span><span></span><span></span><span></span>
        </div>

        <div class="mf-before-card mf-card">
          <div class="mf-big-x">×</div>
          <div class="mf-card-label bad">قبل ملفك</div>
          <h3>ملف بيانات فوضوي</h3>

          <div class="mf-chaos-grid">
            <span>NULL</span><span>dup</span><span>392</span><span class="err">#REF!</span>
            <span>test</span><span class="err">#VALUE!</span><span>125</span><span>-</span>
            <span>ERR</span><span>-</span><span class="err">#N/A</span><span>91</span>
            <span class="err">#REF!</span><span>dup</span><span>-</span><span>451</span>
          </div>

          <div class="mf-problem-list">
            <div><b>×</b> بيانات مكررة</div>
            <div><b>×</b> أخطاء في المعادلات</div>
            <div><b>×</b> لا توجد تقارير واضحة</div>
          </div>
        </div>

        <div class="mf-after-card mf-card">
          <div class="mf-big-check">✓</div>
          <div class="mf-card-label good">بعد ملفك</div>
          <h3>لوحة قرارات احترافية</h3>

          <div class="mf-kpi-row">
            <div><small>إجمالي الإيرادات</small><strong>482,000</strong></div>
            <div><small>معدل النمو</small><strong class="green">+24%</strong></div>
          </div>

          <div class="mf-chart-area">
            <div class="mf-ring"><div><strong>78%</strong><small>الهدف</small></div></div>
            <div class="mf-bars"><span></span><span></span><span></span><span></span><span></span><span></span></div>
          </div>

          <div class="mf-clean-table">
            <div><b>المؤشر</b><b>الحالة</b></div>
            <div><span>المبيعات</span><em>ممتاز</em></div>
            <div><span>المصروفات</span><em>منضبط</em></div>
            <div><span>العملاء</span><em>نمو</em></div>
          </div>
        </div>

        <div class="mf-progress-card">
          <div><b class="red-dot">×</b><span>1 بيانات فوضوية</span></div>
          <strong class="mf-step-arrow">»</strong>
          <div><b>2</b><span>معالجة وتنظيم</span></div>
          <strong class="mf-step-arrow">»</strong>
          <div><b class="check-dot">✓</b><span>3 لوحة قرارات</span></div>
          <span class="mf-progress-line"></span>
        </div>

        <div class="mf-safe-note">تحويل احترافي آمن ودقيق لبياناتك</div>
      </div>

    </div>
  </section>

  <style>
    .mf-transform-section{
      background:#fff;
      padding:95px 20px 120px;
      font-family:inherit;
      overflow:hidden;
    }

    .mf-transform-wrap{
      max-width:1240px;
      margin:auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:76px;
      align-items:center;
      direction:rtl;
    }

    .mf-transform-text{
      text-align:right;
      order:1;
    }

    .mf-transform-text h2{
      color:#1F2F2A;
      font-size:52px;
      line-height:1.18;
      font-weight:900;
      margin:18px 0;
      letter-spacing:-1px;
    }

    .mf-transform-text p{
      color:#6B7280;
      font-size:19px;
      line-height:1.9;
      margin-bottom:30px;
      max-width:580px;
    }

    .mf-kicker{
      display:inline-block;
      background:#F0F8F0;
      color:#5FA85B;
      border:1px solid rgba(95,168,91,.25);
      padding:9px 18px;
      border-radius:999px;
      font-weight:900;
    }

    .mf-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#5FA85B;
      color:#fff!important;
      padding:16px 34px;
      border-radius:16px;
      text-decoration:none;
      font-weight:900;
      box-shadow:0 16px 34px rgba(95,168,91,.26);
      transition:.3s ease;
    }

    .mf-btn:hover{
      transform:translateY(-3px);
      background:#7CCB73;
    }

    .mf-visual-scene{
      position:relative;
      order:2;
      min-height:650px;
      perspective:1200px;
    }

    .mf-card{
      position:absolute;
      width:54%;
      aspect-ratio:1 / 1;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(10px);
      border:1px solid #EEF2EF;
      border-radius:34px;
      padding:24px;
      box-shadow:0 28px 80px rgba(31,47,42,.12);
    }

    .mf-before-card{
      right:0;
      top:112px;
      z-index:1;
      opacity:.70;
      transform:rotate(-3deg);
      animation:mf-before-loop 5s infinite ease-in-out;
    }

    .mf-after-card{
      left:0;
      top:58px;
      z-index:4;
      transform:rotate(1deg);
      border-color:rgba(95,168,91,.25);
      animation:mf-after-loop 5s infinite ease-in-out;
    }

    .mf-before-card h3,
    .mf-after-card h3{
      color:#1F2F2A;
      font-size:20px;
      font-weight:900;
      text-align:center;
      margin:10px 0 16px;
    }

    .mf-card-label{
      display:block;
      width:max-content;
      margin:0 auto;
      padding:7px 16px;
      border-radius:999px;
      font-weight:900;
      font-size:13px;
    }

    .mf-card-label.bad{background:#FDECEC;color:#D9534F;}
    .mf-card-label.good{background:#F0F8F0;color:#5FA85B;}

    .mf-big-x,
    .mf-big-check{
      position:absolute;
      top:-30px;
      width:74px;
      height:74px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:46px;
      font-weight:900;
      color:#fff;
      box-shadow:0 14px 30px rgba(0,0,0,.16);
      z-index:9;
      animation:mf-icon-pulse 2.2s infinite ease-in-out;
    }

    .mf-big-x{right:-22px;background:#E85B5B;}
    .mf-big-check{left:-22px;background:#5FA85B;}

    .mf-chaos-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      overflow:hidden;
      border:1px solid #EEF2EF;
      border-radius:18px;
      background:#fff;
      margin-bottom:14px;
    }

    .mf-chaos-grid span{
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-left:1px solid #EEF2EF;
      border-bottom:1px solid #EEF2EF;
      color:#8F98A6;
      font-weight:900;
      font-size:13px;
      animation:mf-chaos-blink 2.4s infinite ease-in-out;
    }

    .mf-chaos-grid .err{
      color:#D9534F;
      background:#FDECEC;
      animation:mf-error-glow 1.45s infinite ease-in-out;
    }

    .mf-problem-list{
      border:1px solid #EEF2EF;
      border-radius:18px;
      overflow:hidden;
      background:#fff;
    }

    .mf-problem-list div{
      padding:10px 14px;
      border-bottom:1px solid #EEF2EF;
      color:#1F2F2A;
      font-weight:800;
      font-size:13px;
    }

    .mf-problem-list div:last-child{border-bottom:0;}

    .mf-problem-list b{
      display:inline-flex;
      width:20px;
      height:20px;
      background:#E85B5B;
      color:#fff;
      border-radius:50%;
      align-items:center;
      justify-content:center;
      margin-left:8px;
      animation:mf-error-icon 1.45s infinite ease-in-out;
    }

    .mf-flow-line{
      position:absolute;
      z-index:8;
      right:32%;
      top:222px;
      width:250px;
      height:112px;
      border-top:4px dashed rgba(95,168,91,.72);
      border-radius:50%;
      transform:rotate(-18deg);
      pointer-events:none;
      filter:drop-shadow(0 10px 16px rgba(95,168,91,.14));
    }

    .mf-flow-line span{
      position:absolute;
      width:15px;
      height:15px;
      border-radius:50%;
      background:#5FA85B;
      box-shadow:0 0 0 8px rgba(95,168,91,.16);
      animation:mf-flow-dot 2.4s infinite linear;
    }

    .mf-flow-line span:nth-child(1){animation-delay:0s}
    .mf-flow-line span:nth-child(2){animation-delay:.35s}
    .mf-flow-line span:nth-child(3){animation-delay:.7s}
    .mf-flow-line span:nth-child(4){animation-delay:1.05s}

    .mf-kpi-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-bottom:12px;
    }

    .mf-kpi-row div,
    .mf-ring,
    .mf-bars{
      border:1px solid #EEF2EF;
      border-radius:18px;
      background:#fff;
    }

    .mf-kpi-row div{
      padding:14px 12px;
      text-align:center;
    }

    .mf-kpi-row small{
      color:#6B7280;
      display:block;
      margin-bottom:6px;
      font-size:12px;
    }

    .mf-kpi-row strong{
      color:#1F2F2A;
      font-size:21px;
      font-weight:900;
    }

    .mf-kpi-row .green{color:#5FA85B;}

    .mf-chart-area{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:12px;
      margin-bottom:12px;
    }

    .mf-bars{
      height:132px;
      padding:16px;
      display:flex;
      align-items:flex-end;
      gap:8px;
    }

    .mf-bars span{
      flex:1;
      border-radius:12px 12px 4px 4px;
      background:linear-gradient(180deg,#7CCB73,#5FA85B);
      animation:mf-bars 1.6s infinite ease-in-out;
      transform-origin:bottom;
    }

    .mf-bars span:nth-child(1){height:42%;animation-delay:.1s}
    .mf-bars span:nth-child(2){height:58%;animation-delay:.25s}
    .mf-bars span:nth-child(3){height:82%;animation-delay:.4s}
    .mf-bars span:nth-child(4){height:62%;animation-delay:.55s}
    .mf-bars span:nth-child(5){height:74%;animation-delay:.7s}
    .mf-bars span:nth-child(6){height:52%;animation-delay:.85s;background:linear-gradient(180deg,#FFD54A,#F1C232)}

    .mf-ring{
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .mf-ring div{
      width:92px;
      height:92px;
      border-radius:50%;
      background:conic-gradient(#F1C232 0 78%, #EEF2EF 78% 100%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      animation:mf-ring 2.4s infinite ease-in-out;
    }

    .mf-ring strong{
      font-size:20px;
      font-weight:900;
      color:#1F2F2A;
    }

    .mf-ring small{
      color:#6B7280;
      font-size:11px;
    }

    .mf-clean-table{
      border:1px solid #EEF2EF;
      border-radius:16px;
      overflow:hidden;
      background:#fff;
    }

    .mf-clean-table div{
      display:grid;
      grid-template-columns:1fr 1fr;
      padding:9px 12px;
      border-bottom:1px solid #EEF2EF;
      font-size:13px;
    }

    .mf-clean-table div:last-child{border-bottom:0;}
    .mf-clean-table b{color:#1F2F2A;}

    .mf-clean-table em{
      justify-self:start;
      font-style:normal;
      color:#5FA85B;
      background:#F0F8F0;
      border-radius:999px;
      padding:3px 10px;
      font-weight:800;
      font-size:11px;
    }

    .mf-progress-card{
      position:absolute;
      bottom:4px;
      right:22px;
      left:22px;
      z-index:10;
      background:#fff;
      border:1px solid #EEF2EF;
      border-radius:24px;
      box-shadow:0 18px 50px rgba(31,47,42,.12);
      padding:20px 42px 32px;
      display:grid;
      grid-template-columns:1fr auto 1fr auto 1fr;
      align-items:center;
      gap:18px;
      font-weight:900;
      min-height:92px;
    }

    .mf-progress-card div{
      color:#1F2F2A;
      white-space:nowrap;
      text-align:center;
      font-size:14px;
    }

    .mf-progress-card .mf-step-arrow{
      color:#5FA85B;
      font-size:28px;
      animation:mf-step-arrow-desktop 1.3s infinite ease-in-out;
    }

    .mf-progress-card b{
      display:inline-flex;
      width:26px;
      height:26px;
      border-radius:50%;
      align-items:center;
      justify-content:center;
      margin-left:6px;
      background:#5FA85B;
      color:#fff;
      font-size:14px;
    }

    .red-dot{background:#E85B5B!important;}
    .check-dot{background:#5FA85B!important;}

    .mf-progress-line{
      position:absolute;
      right:42px;
      left:42px;
      bottom:15px;
      height:4px;
      border-radius:999px;
      background:#EEF2EF;
      overflow:hidden;
    }

    .mf-progress-line::after{
      content:"";
      display:block;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,#E85B5B,#F1C232,#5FA85B);
      animation:mf-progress 3s infinite ease-in-out;
    }

    .mf-safe-note{
      position:absolute;
      bottom:-62px;
      right:0;
      left:0;
      text-align:center;
      color:#6B7280;
      font-weight:800;
    }

    .mf-safe-note::before{
      content:"♡";
      color:#5FA85B;
      margin-left:8px;
    }

    @keyframes mf-before-loop{
      0%,100%{transform:rotate(-3deg) translateY(0); opacity:.70}
      50%{transform:rotate(-2deg) translateY(8px); opacity:.58}
    }

    @keyframes mf-after-loop{
      0%,100%{transform:rotate(1deg) translateY(0)}
      50%{transform:rotate(.5deg) translateY(-8px)}
    }

    @keyframes mf-flow-dot{
      0%{right:4%;top:38px;opacity:0;transform:scale(.65)}
      12%{opacity:1}
      50%{right:50%;top:-11px;opacity:1;transform:scale(1)}
      88%{opacity:1}
      100%{right:94%;top:36px;opacity:0;transform:scale(.65)}
    }

    @keyframes mf-error-glow{
      0%,100%{background:#FDECEC;color:#D9534F;box-shadow:inset 0 0 0 rgba(217,83,79,0)}
      50%{background:#FFE1E1;color:#C7362F;box-shadow:inset 0 0 20px rgba(217,83,79,.16)}
    }

    @keyframes mf-error-icon{
      0%,100%{transform:scale(1);opacity:.85}
      50%{transform:scale(1.12);opacity:1}
    }

    @keyframes mf-icon-pulse{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.08)}
    }

    @keyframes mf-chaos-blink{
      0%,100%{opacity:.75}
      50%{opacity:1}
    }

    @keyframes mf-bars{
      0%,100%{transform:scaleY(.62); opacity:.76}
      50%{transform:scaleY(1); opacity:1}
    }

    @keyframes mf-ring{
      0%,100%{filter:saturate(.85)}
      50%{filter:saturate(1.7)}
    }

    @keyframes mf-progress{
      0%{transform:translateX(100%)}
      50%{transform:translateX(0)}
      100%{transform:translateX(-100%)}
    }

    @keyframes mf-step-arrow-desktop{
      0%,100%{transform:translateX(0)}
      50%{transform:translateX(-5px)}
    }

    @media(max-width:900px){
      .mf-transform-section{
        padding:55px 12px 70px;
      }

      .mf-transform-wrap{
        grid-template-columns:1fr;
        gap:30px;
      }

      .mf-transform-text{
        order:1;
        text-align:center;
      }

      .mf-transform-text h2{
        font-size:27px;
        line-height:1.28;
      }

      .mf-transform-text p{
        font-size:14px;
        margin-inline:auto;
      }

      .mf-visual-scene{
        order:2;
        min-height:auto;
        display:flex;
        flex-direction:column;
        gap:18px;
      }

      .mf-before-card,
      .mf-after-card,
      .mf-progress-card,
      .mf-safe-note{
        position:relative;
        inset:auto;
        width:100%;
        aspect-ratio:auto;
        min-height:auto;
        transform:none!important;
        animation:none!important;
      }

      .mf-before-card{
        order:1;
        opacity:1;
      }

      .mf-flow-line{
        order:2;
        position:relative;
        right:auto;
        top:auto;
        width:4px;
        height:88px;
        margin:0 auto;
        border-top:0;
        border-right:4px dashed rgba(95,168,91,.78);
        border-radius:0;
        transform:none;
        filter:drop-shadow(0 8px 14px rgba(95,168,91,.18));
      }

      .mf-flow-line::before{
        content:"";
        position:absolute;
        top:-6px;
        right:-8px;
        width:18px;
        height:18px;
        background:#5FA85B;
        border-radius:50%;
        box-shadow:0 0 0 8px rgba(95,168,91,.15);
        animation:mf-mobile-head 1.6s infinite ease-in-out;
      }

      .mf-flow-line::after{
        content:"";
        position:absolute;
        bottom:-4px;
        right:-7px;
        width:18px;
        height:18px;
        border-right:4px solid #5FA85B;
        border-bottom:4px solid #5FA85B;
        transform:rotate(45deg);
      }

      .mf-flow-line span{
        right:-6px!important;
        top:0!important;
        animation:mf-flow-dot-mobile 1.7s infinite linear;
      }

      .mf-flow-line span:nth-child(2){animation-delay:.3s}
      .mf-flow-line span:nth-child(3){animation-delay:.6s}
      .mf-flow-line span:nth-child(4){animation-delay:.9s}

      .mf-after-card{
        order:3;
      }

      .mf-progress-card{
        order:4;
        grid-template-columns:1fr;
        padding:24px 28px 36px;
        gap:8px;
        text-align:center;
      }

      .mf-progress-card .mf-step-arrow{
        display:block;
        font-size:0;
        height:30px;
        position:relative;
        animation:none;
      }

      .mf-progress-card .mf-step-arrow::before{
        content:"";
        position:absolute;
        top:2px;
        left:50%;
        width:3px;
        height:26px;
        transform:translateX(-50%);
        border-radius:999px;
        background:linear-gradient(180deg,#5FA85B,#7CCB73);
      }

      .mf-progress-card .mf-step-arrow::after{
        content:"";
        position:absolute;
        bottom:0;
        left:50%;
        width:12px;
        height:12px;
        border-right:3px solid #5FA85B;
        border-bottom:3px solid #5FA85B;
        transform:translateX(-50%) rotate(45deg);
        animation:mf-down-arrow 1.2s infinite ease-in-out;
      }

      .mf-progress-line{
        right:46px;
        left:46px;
      }

      .mf-safe-note{
        order:5;
        bottom:auto;
        margin-top:6px;
      }

      .mf-big-x,
      .mf-big-check{
        display:none;
      }
    }

    @media(max-width:520px){
      .mf-after-card,
      .mf-before-card{
        padding:18px;
        border-radius:24px;
      }

      .mf-kpi-row,
      .mf-chart-area{
        grid-template-columns:1fr;
      }

      .mf-bars{
        height:128px;
      }

      .mf-ring{
        min-height:130px;
      }

      .mf-chaos-grid span{
        min-height:44px;
        font-size:12px;
      }

      .mf-progress-card div{
        font-size:13px;
      }
    }

    @keyframes mf-flow-dot-mobile{
      0%{top:0!important;opacity:0;transform:scale(.65)}
      12%{opacity:1}
      50%{opacity:1;transform:scale(1)}
      88%{opacity:1}
      100%{top:82px!important;opacity:0;transform:scale(.65)}
    }

    @keyframes mf-mobile-head{
      0%,100%{transform:scale(1);opacity:.65}
      50%{transform:scale(1.2);opacity:1}
    }

    @keyframes mf-down-arrow{
      0%,100%{bottom:0;opacity:.7}
      50%{bottom:-5px;opacity:1}
    }
  </style>
  `;

  const oldSection = document.querySelector(".mf-transform-section");
  if (oldSection) oldSection.remove();

  const target = document.querySelector(".s-block:nth-of-type(2)") || document.querySelector("main") || document.body;
  target.insertAdjacentHTML("afterend", section);
});