/* ===== Tokens (no section background) ===== */
    #mq-courses.mq-courses{
      --blue:#2a7de1; --blue-700:#1e56b5; --navy:#0e4f78;
      --sky:#eaf4ff; --mint:#dff9f1; --teal:#07bfa6; --sun:#ffd857;
      --ink:#0f2333; --muted:#2a3d4a; --white:#fff;
      --r:20px; --pill:999px;
      --shadow-sm:0 8px 18px rgba(0,0,0,.06);
      --shadow-md:0 16px 36px rgba(0,0,0,.10);
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
      color:var(--ink);
      padding:clamp(28px,6vw,64px) 16px;
      background:transparent; /* لا خلفية للقسم */
    }

    /* ===== Heading ===== */
    #mq-courses .head{ max-width:1180px; margin:0 auto clamp(12px,2.2vw,22px); text-align:center }
    #mq-courses .head h2{
      margin:0; font-weight:900; line-height:1.12; letter-spacing:.2px;
      color:var(--blue-700); font-size:clamp(22px,3vw,38px);
    }
    #mq-courses .head p{
      margin:8px auto 0; color:var(--muted); font-size:clamp(14px,1.15vw,17px);
      max-width:62ch; line-height:1.75;
    }
    #mq-courses .head .u{
      display:block; width:min(320px,46%); height:8px; border-radius:999px;
      margin:12px auto 0;
      background:linear-gradient(90deg, var(--sun), #f4b73e);
      box-shadow:0 10px 20px rgba(244,183,62,.28);
    }

    /* ===== Grid ===== */
    #mq-courses .wrap{
      max-width:1180px; margin:0 auto;
      display:grid; gap:clamp(16px,2.2vw,24px);
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      align-items:stretch;
    }

    /* ===== Ticket Card ===== */
    .course{
      position:relative; isolation:isolate; height:100%;
      display:grid; grid-template-rows:auto auto 1fr auto; gap:10px;
      background:var(--white); border-radius:var(--r);
      border:1px solid color-mix(in oklab, var(--blue) 14%, white);
      box-shadow:var(--shadow-sm); padding:clamp(16px,2.2vw,22px);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      overflow:hidden;
    }
    .course:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--blue) 24%, white) }
    .course:focus-within{ box-shadow:var(--shadow-md) }

    /* Left colored rail (no mask) */
    .course::before{
      content:""; position:absolute; inset:0 auto 0 0; width:8px;
      background:var(--rail, var(--mint));
    }
    .is-mint{ --rail:linear-gradient(180deg, color-mix(in oklab, var(--mint) 85%, white), color-mix(in oklab, var(--teal) 70%, white)) }
    .is-sun { --rail:linear-gradient(180deg, var(--sun), #f4b73e) }

    /* Badge on top */
    .badge{
      place-self:center; z-index:1;
      font-weight:900; font-size:13px; letter-spacing:.2px; color:#063b34;
      background:color-mix(in oklab, var(--mint) 80%, white);
      border:1px dashed color-mix(in oklab, var(--teal) 35%, white);
      padding:7px 12px; border-radius:var(--pill);
    }
    .is-sun .badge{ background:color-mix(in oklab, var(--sun) 55%, white); color:#4b3000; border-color:#f0c46e }

    /* Icon */
    .icon{
      width:88px; height:88px; border-radius:22px; margin:6px auto 2px; display:grid; place-items:center;
      background:linear-gradient(180deg, #fff, #f7fafc);
      box-shadow:inset 0 0 0 8px rgba(255,255,255,.6), 0 10px 22px rgba(0,0,0,.08);
      border:1px solid color-mix(in oklab, var(--blue) 16%, white);
    }
    .icon svg{ width:44px; height:44px; stroke:color-mix(in oklab, var(--blue-700) 90%, black); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

    /* Text */
    .title{
      margin:4px 0 2px; font-weight:900; line-height:1.25; text-align:center;
      font-size:clamp(18px,2vw,22px); color:var(--navy);
    }
    .desc{
      margin:0 auto; text-align:center; color:var(--muted); line-height:1.7; font-size:15.5px; max-width:50ch;
    }

    /* CTA */
    .cta{
      justify-self:center; margin-top:8px; display:inline-flex; align-items:center; gap:10px;
      font-weight:800; text-decoration:none; border-radius:var(--pill); padding:11px 16px;
      background:#fff; color:#0f2333; border:2px solid color-mix(in oklab, var(--blue) 18%, white);
      transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }
    .cta:hover{ transform:translateY(-2px); border-color:color-mix(in oklab, var(--blue) 32%, white); background:color-mix(in oklab, var(--sky) 10%, white) }
    .cta:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--blue) 35%, white) }

    /* Subtle appear */
    @keyframes riseIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
    #mq-courses .wrap > *{ animation:riseIn .45s ease-out both }
    #mq-courses .wrap > *:nth-child(2){ animation-delay:.04s }
    #mq-courses .wrap > *:nth-child(3){ animation-delay:.08s }
    #mq-courses .wrap > *:nth-child(4){ animation-delay:.12s }
    #mq-courses .wrap > *:nth-child(5){ animation-delay:.16s }
    #mq-courses .wrap > *:nth-child(6){ animation-delay:.2s }

    /* Mobile tweaks */
    @media (max-width:640px){
      .course{ padding:18px }
      .cta{ width:100%; justify-content:center }
    }
    @media (prefers-reduced-motion:reduce){
      #mq-courses .wrap > *{ animation:none }
    }
    /* === Unify course card titles to brand blue === */
#mq-courses .course .title,
#mq-courses h3.title{
  color: var(--blue-700) !important;  /* الأزرق المعتمد */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* (اختياري) توحيد بعض اللمسات مع الأزرق المعتمد */
#mq-courses .icon svg{ stroke: var(--blue-700) !important; }
#mq-courses .cta{
  border-color: color-mix(in oklab, var(--blue-700) 28%, white) !important;
}
#mq-courses .cta:hover{
  border-color: color-mix(in oklab, var(--blue-700) 40%, white) !important;
}