:root {
      /* ===== Makany Brand System (Purple + Gold) ===== */
      --mk-bg: #070510;
      --mk-surface: rgba(255, 255, 255, .06);
      --mk-surface-2: rgba(255, 255, 255, .08);
      --mk-border: rgba(255, 255, 255, .12);

      --mk-text: rgba(255, 255, 255, .92);
      --mk-muted: rgba(255, 255, 255, .72);
      --mk-muted-2: rgba(255, 255, 255, .60);

      --mk-primary: #7C3AED;
      /* purple 600 */
      --mk-primary-2: #A855F7;
      /* purple 500 */
      --mk-accent: #22D3EE;
      /* cyan 400 */
      --mk-gold: #f2aa31;
      --mk-gold-2: #e69a14;

      --mk-card: #0B0818;
      --mk-shadow: 0 20px 60px rgba(0, 0, 0, .38);
      --mk-radius: 22px;

      --w-regular: 400;
      --w-medium: 500;
      --w-semibold: 700;

      --mk-ease: cubic-bezier(.2, .9, .2, 1);
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    /* ==========================================================
       FIX 1) Stable background layer (بدون تكسير ألوان)
       - شيلنا خلفية body القديمة وحطيناها في ::before ثابتة
       ========================================================== */
    body {
      margin: 0;
      font-family: "Cairo", system-ui, -apple-system, Segoe UI, Tahoma, Arial;
      background: none;
      /* مهم */
      color: var(--mk-text);
      overflow-x: hidden;
      color-scheme: dark;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(1100px 620px at 18% 18%, rgba(124, 58, 237, .26), transparent 60%),
        radial-gradient(900px 520px at 82% 22%, rgba(34, 211, 238, .14), transparent 62%),
        radial-gradient(850px 520px at 52% 88%, rgba(168, 85, 247, .16), transparent 65%),
        linear-gradient(180deg, #05040C 0%, #070510 45%, #08051A 100%);
    }

    /* Noise خفيف (اختياري) يقلل banding */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .06;
      background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
      mix-blend-mode: overlay;
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      max-width: 100%;
      display: block
    }

    code {
      color: #e9d5ff
    }

    /* ===== Container width (premium / أقل تمدد) ===== */
    .container {
      max-width: 1120px;
    }

    /* ===== Sticky Header ===== */
    .mk-header {
      position: relative
    }

    .mk-topbar {
      position: sticky;
      top: 0;
      z-index: 998;
      backdrop-filter: blur(12px);
      background: rgba(7, 5, 16, .55);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .mk-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
    }

    .mk-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 240px
    }

    .mk-logo {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      object-fit: cover;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .22)
    }

    .mk-brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15
    }

    .mk-brand-title {
      font-weight: var(--w-semibold);
      letter-spacing: .2px
    }

    .mk-brand-sub {
      font-weight: var(--w-regular);
      opacity: .78;
      font-size: 13px
    }

    .mk-links {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .mk-links a {
      opacity: .82;
      font-weight: var(--w-regular);
      position: relative;
      padding: 8px 2px;
    }

    .mk-links a:hover {
      opacity: 1
    }

    .mk-links a.active {
      opacity: 1;
      color: #fff;
    }

    .mk-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .95), transparent);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 220ms var(--mk-ease), transform 220ms var(--mk-ease);
    }

    .mk-links a:hover::after {
      opacity: 1;
      transform: translateY(0);
    }

    .mk-links a.active::after {
      opacity: 1;
      transform: translateY(0);
    }

    .mk-link-pill {
      padding: 10px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(242, 170, 49, .22), rgba(124, 58, 237, .25));
      border: 1px solid rgba(242, 170, 49, .22);
      box-shadow: 0 18px 40px rgba(124, 58, 237, .18);
    }

    .mk-actions {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .mk-burger {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .10);
      color: #fff;
    }

    /* ===== Buttons ===== */
    .mk-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 16px;
      font-weight: var(--w-medium);
      border: 1px solid transparent;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      white-space: nowrap;
    }

    .mk-btn:active {
      transform: translateY(1px)
    }

    .mk-btn-primary {
      background: linear-gradient(135deg, var(--mk-primary), var(--mk-primary-2));
      box-shadow: 0 18px 45px rgba(124, 58, 237, .28);
    }

    .mk-btn-primary:hover {
      box-shadow: 0 22px 60px rgba(124, 58, 237, .35)
    }

    .mk-btn-gold {
      background: linear-gradient(135deg, var(--mk-gold), var(--mk-gold-2));
      color: #1a1206;
      box-shadow: 0 18px 45px rgba(242, 170, 49, .22);
      border-color: rgba(242, 170, 49, .18);
    }

    .mk-btn-gold:hover {
      box-shadow: 0 26px 70px rgba(242, 170, 49, .26);
      transform: translateY(-2px);
    }

    .mk-btn-light {
      background: rgba(255, 255, 255, .10);
      border-color: rgba(255, 255, 255, .14);
    }

    .mk-btn-light:hover {
      background: rgba(255, 255, 255, .14)
    }

    .mk-btn-ghost {
      background: transparent;
      border-color: rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .92);
    }

    .mk-btn-ghost:hover {
      background: rgba(255, 255, 255, .06)
    }

    .mk-btn:hover {
      transform: translateY(-2px)
    }

    /* ===== Drawer ===== */
    .mk-drawer {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(10px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 18px;
      z-index: 999;
    }

    .mk-drawer-card {
      width: min(520px, 100%);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(15, 10, 32, .96), rgba(10, 8, 22, .96));
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--mk-shadow);
      padding: 16px;
    }

    .mk-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px
    }

    .mk-drawer-brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .mk-drawer-close {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      color: #fff;
    }

    .mk-drawer-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 6px
    }

    .mk-drawer-links a {
      padding: 12px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .mk-drawer-links a:hover {
      background: rgba(255, 255, 255, .06)
    }

    /* ===== Hero ===== */
    .mk-hero {
      position: relative;
      padding: 22px 0 48px
    }

    .mk-hero-grid {
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 26px;
      align-items: center
    }

    .mk-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .85);
      font-size: 13px;
    }

    .mk-hero-text h1 {
      margin: 14px 0 6px;
      font-weight: var(--w-semibold);
      letter-spacing: .2px;
      font-size: 44px;
    }

    .mk-hero-text h2 {
      margin: 0 0 10px;
      font-weight: var(--w-medium);
      opacity: .92;
      font-size: 28px;
    }

    .mk-hero-text p {
      margin: 0 0 18px;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.9;
    }

    .mk-hero-cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px
    }

    .mk-kpis {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .mk-kpi {
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .10);
      min-width: 170px;
    }

    .mk-kpi-num {
      font-weight: var(--w-semibold);
      font-size: 18px
    }

    .mk-kpi-label {
      font-size: 13px;
      color: rgba(255, 255, 255, .72)
    }

    .mk-kpi small {
      display: block;
      color: rgba(255, 255, 255, .55);
      margin-top: 2px
    }

    .mk-hero-media {
      position: relative
    }

    .mk-mock {
      border-radius: 26px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--mk-shadow);
    }

    .mk-mock-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, .25);
      border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .mk-mock-top span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .20)
    }

    .mk-mock-pill {
      margin-inline-start: auto;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(168, 85, 247, .18);
      border: 1px solid rgba(168, 85, 247, .24);
    }

    /* Hero shot + mini carousel */
    .mk-shot {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: rgba(0, 0, 0, .25);
    }

    .mk-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.02);
      filter: saturate(1.08) contrast(1.02);
      transition: opacity 420ms var(--mk-ease);
    }

    .mk-shot::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(800px 400px at 20% 10%, rgba(242, 170, 49, .10), transparent 60%),
        radial-gradient(800px 400px at 90% 20%, rgba(34, 211, 238, .10), transparent 60%);
      pointer-events: none;
    }

    .mk-shot-badges {
      position: absolute;
      inset: 14px;
      pointer-events: none;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      z-index: 2;
    }

    .mk-badges-top {
      justify-self: start;
      align-self: start;
    }

    .mk-badges-left {
      justify-self: start;
      align-self: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mk-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(18, 18, 26, 0.85), rgba(25, 25, 35, 0.9));
      border: 1px solid rgba(255, 255, 255, .22);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      font-weight: var(--w-medium);
      font-size: clamp(11px, 1.1vw, 13px);
      line-height: 1.25;
      max-width: min(320px, 86%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
      color: rgba(255, 255, 255, .95);
    }

    .mk-shot-dots {
      position: absolute;
      bottom: 12px;
      left: 12px;
      display: flex;
      gap: 8px;
      z-index: 3;
    }

    .mk-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .22);
      border: 1px solid rgba(255, 255, 255, .18);
      cursor: pointer;
      transition: transform 180ms var(--mk-ease), background 180ms var(--mk-ease);
    }

    .mk-dot.active {
      background: rgba(242, 170, 49, .85);
      transform: scale(1.2);
    }

    .mk-hero-glow {
      position: absolute;
      inset: auto -10% -120px -10%;
      height: 240px;
      background: radial-gradient(closest-side, rgba(124, 58, 237, .35), transparent 70%);
      filter: blur(20px);
      pointer-events: none;
    }

    /* ===== Sections ===== */
    .mk-section {
      padding: 76px 0
    }

    .mk-section-soft {
      background: transparent;
    }

    /* ==========================================================
       FIX 2) Section overlay موحّد (ده اللي يمنع إحساس "مكسورة")
       ========================================================== */
    .mk-section,
    .mk-section-soft {
      position: relative;
      isolation: isolate;
    }

    .mk-section::before,
    .mk-section-soft::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(7, 5, 16, .38);
      border-top: 1px solid rgba(255, 255, 255, .06);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .mk-section-soft::before {
      background: rgba(7, 5, 16, .50);
    }

    .mk-section-head {
      text-align: center;
      max-width: 920px;
      margin: 0 auto 26px
    }

    .mk-pretitle {
      display: inline-block;
      font-size: 13px;
      color: rgba(255, 255, 255, .70);
      margin-bottom: 6px
    }

    .mk-section-head h3 {
      margin: 0 0 10px;
      font-weight: var(--w-semibold);
      font-size: 30px
    }

    .mk-section-head p {
      margin: 0;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.9
    }

    /* ===== Cards ===== */
    .mk-card {
      height: 100%;
      padding: 18px 16px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: 0 16px 45px rgba(0, 0, 0, .22);
      transition: transform 220ms var(--mk-ease), box-shadow 220ms var(--mk-ease), border-color 220ms var(--mk-ease);
    }

    .mk-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 26px 75px rgba(0, 0, 0, .33);
    }

    .mk-ic {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(124, 58, 237, .18);
      border: 1px solid rgba(168, 85, 247, .20);
      margin-bottom: 10px;
    }

    .mk-card h4 {
      margin: 0 0 6px;
      font-weight: var(--w-medium);
      font-size: 18px
    }

    .mk-card p {
      margin: 0;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.85;
      font-size: 13.5px
    }

    /* ===== Pills ===== */
    .mk-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 18px
    }

    .mk-pill {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .85);
      font-size: 13px;
      transition: transform 220ms var(--mk-ease), border-color 220ms var(--mk-ease);
    }

    .mk-pill:hover {
      transform: translateY(-2px);
      border-color: rgba(168, 85, 247, .26);
    }

    /* ===== Callout ===== */
    .mk-callout {
      margin-top: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding: 18px 18px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(34, 211, 238, .10));
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .mk-callout h4 {
      margin: 0 0 6px;
      font-weight: var(--w-semibold);
      font-size: 20px
    }

    .mk-callout p {
      margin: 0;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.85
    }

    /* ===== Numbers / Stats ===== */
    .mk-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 18px;
    }

    .mk-stat {
      border-radius: 22px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      padding: 16px 14px;
      text-align: center;
    }

    .mk-stat b {
      display: block;
      font-size: 22px
    }

    .mk-stat span {
      display: block;
      color: rgba(255, 255, 255, .72);
      font-size: 13px;
      margin-top: 4px
    }

    /* ===== Showcase / Gallery ===== */
    .mk-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 18px 0 10px;
    }

    .mk-tab {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .86);
      cursor: pointer;
      transition: transform 220ms var(--mk-ease), background 220ms var(--mk-ease), border-color 220ms var(--mk-ease);
      user-select: none;
    }

    .mk-tab:hover {
      transform: translateY(-2px);
      border-color: rgba(242, 170, 49, .18);
    }

    .mk-tab.active {
      background: linear-gradient(135deg, rgba(242, 170, 49, .18), rgba(124, 58, 237, .18));
      border-color: rgba(242, 170, 49, .22);
      color: #fff;
    }

    .mk-gallery {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
    }

    .mk-shot-card {
      grid-column: span 4;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03);
      box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
      position: relative;
      cursor: pointer;
      transition: transform 220ms var(--mk-ease), box-shadow 220ms var(--mk-ease);
    }

    .mk-shot-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 85px rgba(0, 0, 0, .33);
    }

    .mk-shot-card img {
      width: 100%;
      height: 230px;
      object-fit: cover;
      filter: saturate(1.06);
    }

    .mk-shot-cap {
      padding: 12px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
      position: absolute;
      inset: auto 0 0 0;
    }

    .mk-shot-cap b {
      font-size: 13px
    }

    .mk-shot-cap span {
      font-size: 12px;
      color: rgba(255, 255, 255, .72)
    }

    .mk-shot-tag {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .45);
      border: 1px solid rgba(255, 255, 255, .12);
      font-size: 12px;
      backdrop-filter: blur(10px);
    }

    /* Lightbox */
    .mk-lightbox {
      position: fixed;
      inset: 0;
      display: none;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(8px);
      z-index: 1000;
      padding: 18px;
      align-items: center;
      justify-content: center;
    }

    .mk-lightbox.show {
      display: flex;
    }

    .mk-lb-card {
      width: min(1050px, 100%);
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(12, 10, 27, .92);
      box-shadow: 0 30px 120px rgba(0, 0, 0, .55);
      position: relative;
    }

    .mk-lb-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .10);
      background: rgba(0, 0, 0, .18);
    }

    .mk-lb-top b {
      font-size: 13px
    }

    .mk-lb-top span {
      font-size: 12px;
      color: rgba(255, 255, 255, .70)
    }

    .mk-lb-x {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      color: #fff;
    }

    .mk-lb-img {
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
    }

    .mk-lb-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .mk-lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .14);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mk-lb-prev {
      left: 12px;
    }

    .mk-lb-next {
      right: 12px;
    }

    .mk-lb-foot {
      padding: 12px 14px;
      border-top: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .78);
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* ===== Use cases ===== */
    .mk-use {
      border-radius: 26px;
      background: linear-gradient(135deg, rgba(242, 170, 49, .10), rgba(124, 58, 237, .12));
      border: 1px solid rgba(255, 255, 255, .12);
      padding: 18px;
    }

    .mk-use h4 {
      margin: 0 0 10px;
      font-weight: var(--w-semibold)
    }

    .mk-use ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px
    }

    .mk-use li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 12px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      color: rgba(255, 255, 255, .82);
      font-size: 13px;
      line-height: 1.8;
    }

    .mk-use i {
      color: rgba(242, 170, 49, .95);
      margin-top: 4px
    }

    /* ===== Pricing toggle + compare ===== */
    .mk-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 14px 0 18px;
    }

    .mk-switch {
      width: 54px;
      height: 30px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .14);
      position: relative;
      cursor: pointer;
    }

    .mk-switch::after {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: rgba(242, 170, 49, .95);
      top: 2px;
      right: 2px;
      transition: transform 220ms var(--mk-ease);
    }

    .mk-switch.on::after {
      transform: translateX(-24px);
    }

    .mk-toggle span {
      color: rgba(255, 255, 255, .78);
      font-size: 13px
    }

    .mk-save {
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(242, 170, 49, .14);
      border: 1px solid rgba(242, 170, 49, .18);
      color: rgba(255, 255, 255, .92);
      font-size: 12px;
    }

    .mk-price-card {
      height: 100%;
      padding: 18px 16px;
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: 0 18px 55px rgba(0, 0, 0, .26);
      position: relative;
      transition: transform 220ms var(--mk-ease), box-shadow 220ms var(--mk-ease);
    }

    .mk-price-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 95px rgba(0, 0, 0, .33);
    }

    .mk-price-top h4 {
      margin: 0 0 10px;
      font-weight: var(--w-semibold)
    }

    .mk-price-top p {
      margin: 6px 0 0;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.85
    }

    .mk-price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap
    }

    .mk-price-num {
      font-size: 34px;
      font-weight: var(--w-semibold)
    }

    .mk-price-cur {
      opacity: .85
    }

    .mk-price-per {
      opacity: .7
    }

    .mk-price-list {
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .mk-price-list li {
      display: flex;
      gap: 10px;
      align-items: center;
      color: rgba(255, 255, 255, .82);
      font-weight: var(--w-regular)
    }

    .mk-price-list i {
      color: #d8b4fe
    }

    .mk-price-featured {
      background: linear-gradient(180deg, rgba(124, 58, 237, .22), rgba(255, 255, 255, .04));
      border-color: rgba(168, 85, 247, .28);
    }

    .mk-featured-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(168, 85, 247, .22);
      border: 1px solid rgba(168, 85, 247, .24);
      font-size: 13px;
    }

    .mk-compare {
      margin-top: 16px;
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .03);
    }

    .mk-compare table {
      width: 100%;
      border-collapse: collapse;
    }

    .mk-compare th,
    .mk-compare td {
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      font-size: 13px;
      color: rgba(255, 255, 255, .82);
      text-align: center;
      vertical-align: middle;
    }

    .mk-compare th {
      background: rgba(0, 0, 0, .18);
      font-weight: var(--w-medium);
    }

    .mk-compare td:first-child,
    .mk-compare th:first-child {
      text-align: right;
    }

    .mk-yes {
      color: rgba(34, 211, 238, .95);
    }

    .mk-no {
      color: rgba(255, 255, 255, .30);
    }

    /* ===== Testimonials ===== */
    .mk-test {
      border-radius: 26px;
      padding: 18px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      height: 100%;
    }

    .mk-test p {
      margin: 10px 0 0;
      color: rgba(255, 255, 255, .74);
      line-height: 1.9;
      font-size: 13.5px;
    }

    .mk-test b {
      display: block;
      margin-top: 10px;
    }

    .mk-test small {
      color: rgba(255, 255, 255, .58);
    }

    /* ===== FAQ ===== */
    .mk-faq {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .mk-faq-item {
      border-radius: 22px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .10);
      overflow: hidden;
    }

    .mk-faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 16px 16px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, .92);
      font-weight: var(--w-medium);
      text-align: start;
    }

    .mk-faq-q i {
      opacity: .85;
      transition: transform .2s ease
    }

    .mk-faq-a {
      padding: 0 16px 14px;
      color: var(--mk-muted);
      font-weight: var(--w-regular);
      line-height: 1.85;
      display: none;
    }

    .mk-faq-item.open .mk-faq-a {
      display: block
    }

    .mk-faq-item.open .mk-faq-q i {
      transform: rotate(180deg)
    }

    /* ===== Footer ===== */
    .mk-footer {
      padding: 46px 0 18px;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
      border-top: 1px solid rgba(255, 255, 255, .10);
    }

    .mk-footer h5 {
      margin: 0 0 12px;
      font-weight: var(--w-medium)
    }

    .mk-footer a {
      display: block;
      color: rgba(255, 255, 255, .78);
      margin: 8px 0;
      font-weight: var(--w-regular)
    }

    .mk-footer a:hover {
      color: #fff
    }

    .mk-foot-brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .mk-foot-p {
      margin: 12px 0 0;
      color: var(--mk-muted);
      line-height: 1.9;
      font-weight: var(--w-regular)
    }

    .mk-foot-line {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .78);
      margin: 10px 0;
      font-weight: var(--w-regular)
    }

    .mk-news {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .mk-news input {
      flex: 1;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
      color: #fff;
      outline: none;
    }

    .mk-social {
      display: flex;
      gap: 10px;
      margin-top: 12px
    }

    .mk-social a {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .10);
    }

    .mk-subfooter {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, .10);
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      color: rgba(255, 255, 255, .68);
    }

    .mk-subfooter a {
      display: inline;
      margin: 0;
      color: rgba(255, 255, 255, .82)
    }

    .mk-subfooter-dot {
      opacity: .55
    }

    /* ===== WhatsApp ===== */
    .mk-wa {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999
    }

    .mk-wa-fab {
      width: 58px;
      height: 58px;
      border-radius: 22px;
      background: linear-gradient(135deg, #25D366, #128C7E);
      border: 0;
      box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      position: relative;
    }

    .mk-wa-badge {
      position: absolute;
      top: -6px;
      left: -6px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--mk-primary);
      border: 2px solid rgba(0, 0, 0, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: var(--w-semibold);
    }

    .mk-wa-card {
      width: 320px;
      margin-bottom: 12px;
      border-radius: 22px;
      background: rgba(10, 8, 22, .92);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: 0 18px 65px rgba(0, 0, 0, .45);
      backdrop-filter: blur(12px);
      padding: 14px;
      display: none;
    }

    .mk-wa-card.show {
      display: block
    }

    .mk-wa-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px
    }

    .mk-wa-avatar {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      background: rgba(37, 211, 102, .12);
      border: 1px solid rgba(37, 211, 102, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px
    }

    .mk-wa-title {
      font-weight: var(--w-medium)
    }

    .mk-wa-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .72)
    }

    .mk-wa-x {
      margin-inline-start: auto;
      width: 36px;
      height: 36px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .10);
      color: #fff
    }

    .mk-wa-msg {
      color: rgba(255, 255, 255, .78);
      line-height: 1.85;
      margin-bottom: 10px;
      font-weight: var(--w-regular)
    }

    /* ===== Responsive ===== */
    @media (max-width: 992px) {
      .mk-links {
        display: none
      }

      .mk-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center
      }

      .mk-hero-grid {
        grid-template-columns: 1fr;
      }

      .mk-hero-text h1 {
        font-size: 36px
      }

      .mk-hero-text h2 {
        font-size: 22px
      }

      .mk-badges-left {
        display: none
      }

      .mk-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .mk-shot-card {
        grid-column: span 6;
      }

      .mk-use ul {
        grid-template-columns: 1fr
      }

      .container {
        max-width: 960px;
      }
    }

    @media (max-width: 576px) {
      .mk-shot-card {
        grid-column: span 12;
      }

      .mk-wa-card {
        width: 290px
      }

      .mk-kpi {
        min-width: auto;
        width: 100%;
      }

      .container {
        max-width: 100%;
      }
    }

    /* ===== Motion (Light) ===== */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
    }

    .mk-reveal {
      opacity: 0;
      transform: translateY(14px) scale(.985);
      filter: blur(10px);
      transition:
        opacity 650ms var(--mk-ease),
        transform 650ms var(--mk-ease),
        filter 650ms var(--mk-ease);
      will-change: opacity, transform, filter;
    }

    .mk-reveal.is-in {
      opacity: 1;
      transform: translate(0, 0) scale(1);
      filter: blur(0);
    }

    /* ==========================================================
       HERO BADGES FIX (ثابتة على الصورة ومش بتكسر)
       ========================================================== */
    .mk-shot {
      position: relative;
      overflow: hidden;
    }

    .mk-shot img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
    }

    .mk-shot-badges {
      position: absolute;
      inset: 0;
      padding: 16px;
      z-index: 3;
      pointer-events: none;
    }

    .mk-badges-top {
      position: absolute;
      inset-block-start: 14px;
      inset-inline-end: 14px;
      display: flex;
      justify-content: flex-end;
    }

    .mk-badges-left {
      position: absolute;
      inset-block-end: 14px;
      inset-inline-end: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
    }

    .mk-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(18, 18, 26, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
      color: #fff;
      max-width: min(260px, calc(100% - 28px));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mk-badge i {
      flex: 0 0 auto;
      opacity: .95;
    }

    @media (max-width: 991px) {
      .mk-shot-badges {
        padding: 12px;
      }

      .mk-badges-top {
        inset-block-start: 10px;
        inset-inline-end: 10px;
      }

      .mk-badges-left {
        inset-block-end: 10px;
        inset-inline-end: 10px;
        gap: 8px;
      }

      .mk-badge {
        max-width: min(320px, calc(100% - 20px));
        padding: 9px 11px;
        font-size: 13px;
      }
    }

    @media (max-width: 520px) {
      .mk-badges-left {
        inset-inline: 10px;
        align-items: stretch;
      }

      .mk-badge {
        max-width: 100%;
        justify-content: space-between;
      }
    }

    /* ==========================================================
       FIX 3) توحيد الـ surfaces والظلال (Premium / مش مبقّع)
       ========================================================== */
    .mk-card,
    .mk-test,
    .mk-price-card,
    .mk-use,
    .mk-compare,
    .mk-faq-item,
    .mk-callout {
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .035)) !important;
      border: 1px solid rgba(255, 255, 255, .10) !important;
    }

    .mk-callout {
      background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(34, 211, 238, .10)) !important;
    }

    .mk-card,
    .mk-price-card,
    .mk-test,
    .mk-use {
      box-shadow: 0 14px 40px rgba(0, 0, 0, .24) !important;
    }

    .mk-card p,
    .mk-test p,
    .mk-price-top p,
    .mk-faq-a,
    .mk-use li,
    .mk-section-head p {
      color: rgba(255, 255, 255, .74) !important;
    }

    .mk-section-head h3,
    .mk-card h4,
    .mk-price-top h4 {
      color: rgba(255, 255, 255, .94) !important;
    }

    /* ==========================================================
   MOBILE FIX PACK — No Horizontal Scroll + Clean Header
   ضع هذا البلوك في آخر الـ CSS
   ========================================================== */

    /* 1) امنع أي تمدد أفقي (الأهم) */
    html,
    body {
      max-width: 100%;
      overflow-x: clip;
    }

    @supports not (overflow-x: clip) {

      html,
      body {
        overflow-x: hidden;
      }
    }

    /* 2) أي سكشن فيه عناصر مطلّعة برا (glow/shadows) نقصّها */
    .mk-topbar,
    .mk-hero,
    .mk-section,
    .mk-section-soft {
      overflow-x: clip;
    }

    @supports not (overflow-x: clip) {

      .mk-topbar,
      .mk-hero,
      .mk-section,
      .mk-section-soft {
        overflow-x: hidden;
      }
    }

    /* 3) امنع أي ابن داخل الجريد/الفليكس يعمل overflow بسبب min-content */
    .mk-hero-grid {
      min-width: 0;
    }

    .mk-hero-grid>* {
      min-width: 0;
    }

    .mk-nav {
      min-width: 0;
    }

    /* 4) الـ glow اللي عنده inset سالب بيزود عرض الصفحة على الموبايل */
    @media (max-width: 992px) {
      .mk-hero-glow {
        inset: auto 0 -120px 0 !important;
        /* بدل -10% يمين/شمال */
        width: 100% !important;
      }
    }

    /* 5) هيدر الموبايل: خلي البراند ما يزقّش العناصر ويعمل عرض زائد */
    @media (max-width: 576px) {
      .mk-nav {
        padding: 12px 10px !important;
        gap: 10px !important;
      }

      .mk-brand {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 10px !important;
      }

      .mk-brand-text {
        min-width: 0 !important;
        max-width: 48vw !important;
      }

      .mk-brand-title,
      .mk-brand-sub {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      /* اختياري: اخفاء الساب تايتل لتقليل الزحمة */
      .mk-brand-sub {
        display: none !important;
      }

      .mk-logo {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
      }

      .mk-actions {
        flex: 0 0 auto !important;
        gap: 8px !important;
      }

      .mk-actions .mk-btn {
        padding: 9px 10px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
      }

      /* اختياري: اخفاء زر "الأسعار" من الهيدر وخليه في القائمة فقط */
      .mk-actions .mk-btn-ghost {
        display: none !important;
      }

      .mk-burger {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
      }
    }

    /* ===== Growth Pack (ERP Star / ROI / Academy) ===== */
    .mk-module-switch {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .mk-module-chip {
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .86);
      padding: 8px 12px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background 220ms var(--mk-ease), border-color 220ms var(--mk-ease);
    }

    .mk-module-chip.active {
      background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .2));
      border-color: rgba(168, 85, 247, .66);
      color: #fff;
    }

    .mk-build-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .mk-build-stack span {
      border-radius: 12px;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .06);
      font-size: 12px;
      color: rgba(255, 255, 255, .86);
      animation: mkLift 4.2s ease-in-out infinite;
    }

    .mk-build-stack span:nth-child(2) {
      animation-delay: .2s
    }

    .mk-build-stack span:nth-child(3) {
      animation-delay: .4s
    }

    .mk-build-stack span:nth-child(4) {
      animation-delay: .6s
    }

    @keyframes mkLift {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    .mk-stack-card,
    .mk-erp-compare,
    .mk-local-card,
    .mk-roi-wrap,
    .mk-industry-card,
    .mk-migrate,
    .mk-model-card,
    .mk-academy-card,
    .mk-bot-card {
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04));
      box-shadow: 0 14px 42px rgba(0, 0, 0, .24);
      padding: 20px;
      height: 100%;
    }

    .mk-stack-card h4,
    .mk-erp-compare h4,
    .mk-local-card h4,
    .mk-industry-card h4,
    .mk-model-card h4,
    .mk-academy-card h4,
    .mk-bot-card h4 {
      margin: 0 0 8px;
      font-weight: var(--w-semibold);
      color: rgba(255, 255, 255, .95);
    }

    .mk-stack-card p,
    .mk-local-card p,
    .mk-model-card p,
    .mk-bot-card p {
      margin: 0 0 12px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.9;
    }

    .mk-stack-visual {
      display: grid;
      gap: 10px;
      margin: 14px 0 16px;
    }

    .mk-stack-block {
      border-radius: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05);
      font-weight: var(--w-medium);
      text-align: center;
    }

    .mk-stack-block:nth-child(1) {
      margin-inline-start: 0
    }

    .mk-stack-block:nth-child(2) {
      margin-inline-start: 14px
    }

    .mk-stack-block:nth-child(3) {
      margin-inline-start: 28px
    }

    .mk-stack-block:nth-child(4) {
      margin-inline-start: 42px
    }

    .mk-erp-compare table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .mk-erp-compare th,
    .mk-erp-compare td {
      border-bottom: 1px solid rgba(255, 255, 255, .10);
      padding: 11px 10px;
      text-align: right;
      font-weight: var(--w-regular);
      color: rgba(255, 255, 255, .82);
    }

    .mk-erp-compare th {
      color: #fff;
      font-weight: var(--w-medium);
      background: rgba(255, 255, 255, .03);
    }

    .mk-local-card {
      text-align: start;
    }

    .mk-local-card i {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(124, 58, 237, .2);
      border: 1px solid rgba(168, 85, 247, .36);
      margin-bottom: 10px;
    }

    .mk-roi-wrap {
      padding: 22px;
    }

    .mk-roi-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .mk-roi-grid label {
      display: flex;
      flex-direction: column;
      gap: 7px;
      font-size: 14px;
      color: rgba(255, 255, 255, .86);
      font-weight: var(--w-medium);
    }

    .mk-roi-grid input,
    .mk-bot-input input {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .06);
      color: #fff;
      padding: 12px 12px;
      outline: none;
      width: 100%;
    }

    .mk-roi-actions {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    .mk-roi-result {
      border-radius: 14px;
      border: 1px solid rgba(34, 211, 238, .32);
      background: rgba(34, 211, 238, .12);
      color: #dff9ff;
      padding: 11px 13px;
      font-weight: var(--w-medium);
      flex: 1;
      min-width: 220px;
    }

    .mk-industry-card ul,
    .mk-academy-card ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .mk-industry-card li,
    .mk-academy-card li {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .82);
      line-height: 1.8;
    }

    .mk-migrate {
      display: grid;
      gap: 14px;
      align-items: center;
    }

    .mk-migrate-head h3 {
      margin: 8px 0 0;
    }

    .mk-migrate-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .mk-step {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      padding: 12px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .86);
      font-weight: var(--w-medium);
    }

    .mk-step b {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: rgba(242, 170, 49, .2);
      border: 1px solid rgba(242, 170, 49, .35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .mk-model-card .mk-chip {
      width: fit-content;
      margin-bottom: 10px;
    }

    .mk-bot-input {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-top: 8px;
    }

    .mk-bot-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .mk-bot-q {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .04);
      color: rgba(255, 255, 255, .84);
      padding: 6px 10px;
      font-size: 13px;
    }

    .mk-bot-answer {
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .05);
      padding: 10px 12px;
      color: rgba(255, 255, 255, .86);
      line-height: 1.85;
    }

    @media (max-width: 992px) {
      .mk-roi-grid {
        grid-template-columns: 1fr;
      }

      .mk-migrate-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 576px) {
      .mk-bot-input {
        grid-template-columns: 1fr;
      }

      .mk-migrate-steps {
        grid-template-columns: 1fr;
      }
    }