/* ===== مكين v6.6 — رحلة العميل كطريق ===== */
.cjx{ position:relative; --ch:236px; --pin:76px; margin-top:34px; padding:6px 0; }
.cjx__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.cjx__svg path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cjx__base{ stroke:rgba(255,255,255,.07); stroke-width:22; }
.cjx__dash{ stroke:rgba(255,255,255,.28); stroke-width:1.6; stroke-dasharray:2 12; }
.cjx__fill{ stroke:var(--gold); stroke-width:4; filter:drop-shadow(0 0 8px rgba(216,185,104,.55)); }
.cjx__list{ position:relative; z-index:2; list-style:none; margin:0; padding:0 46px; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:14px; }
.cjx__st{ display:grid; grid-template-rows:var(--ch) var(--pin) var(--ch); justify-items:center; }
.cjx__pin{ grid-row:2; position:relative; width:var(--pin); height:var(--pin); border-radius:50%; display:grid; place-items:center; background:var(--navy-deep,#001a45); border:2px solid rgba(255,255,255,.22); color:var(--gold-2); font-size:24px; box-shadow:0 0 0 8px rgba(0,26,69,.55); transition:background .5s, border-color .5s, color .5s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.cjx__st.is-up .cjx__pin{ transform:translateY(-26px); }
.cjx__st.is-down .cjx__pin{ transform:translateY(26px); }
.cjx__pin b{ position:absolute; top:-8px; inset-inline-end:-8px; min-width:30px; height:30px; padding:0 6px; border-radius:20px; background:var(--gold); color:var(--navy-deep,#001a45); font:700 12px/30px var(--f-head); text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.cjx__card{ position:relative; width:100%; padding:16px 14px; border-radius:16px; text-align:center; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(2px); transition:border-color .5s, background .5s, transform .5s cubic-bezier(.22,1,.36,1), opacity .6s; }
.cjx__st.is-up .cjx__card{ grid-row:1; align-self:end; margin-bottom:34px; }
.cjx__st.is-down .cjx__card{ grid-row:3; align-self:start; margin-top:34px; }
/* سهم صغير يربط الكارت بالمحطة */
.cjx__card::after{ content:""; position:absolute; inset-inline-start:50%; width:1px; height:24px; background:linear-gradient(rgba(216,185,104,.6),rgba(216,185,104,0)); transform:translateX(50%); }
.cjx__st.is-up .cjx__card::after{ top:100%; background:linear-gradient(rgba(216,185,104,.6),rgba(216,185,104,0)); }
.cjx__st.is-down .cjx__card::after{ bottom:100%; background:linear-gradient(rgba(216,185,104,0),rgba(216,185,104,.6)); }
.cjx__k{ display:block; font-size:11.5px; letter-spacing:.04em; color:var(--gold-2); margin-bottom:4px; }
.cjx__card strong{ display:block; font-family:var(--f-head); font-weight:600; font-size:18px; color:#fff; margin-bottom:6px; }
.cjx__card p{ margin:0; font-size:13px; line-height:1.75; color:rgba(255,255,255,.62); }
.cjx__note{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 10px; border-radius:20px; font-style:normal; font-size:12px; color:var(--gold-2); background:rgba(216,185,104,.1); border:1px solid rgba(216,185,104,.25); }
/* الوصول للمحطة */
.cjx__st.is-reached .cjx__pin{ background:var(--gold); border-color:var(--gold-2); color:var(--navy-deep,#001a45); box-shadow:0 0 0 8px rgba(197,160,71,.16), 0 0 30px rgba(216,185,104,.45); }
.cjx__st.is-reached .cjx__pin b{ background:#fff; }
.cjx__st.is-reached .cjx__card{ border-color:rgba(216,185,104,.55); background:rgba(255,255,255,.07); }
.cjx__st:hover .cjx__card{ transform:translateY(-4px); border-color:var(--gold-2); }
.cjx__st:hover .cjx__pin{ border-color:var(--gold-2); }
/* المسافر */
.cjx__walker{ position:absolute; z-index:3; top:0; left:0; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--navy,#002663); font-size:18px; box-shadow:0 0 0 6px rgba(216,185,104,.35), 0 8px 24px rgba(0,0,0,.4); opacity:0; transition:opacity .4s; will-change:transform; pointer-events:none; }
.cjx.is-ready .cjx__walker{ opacity:1; }
.cjx__walker::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--gold-2); animation:cjxPing 1.8s ease-out infinite; }
@keyframes cjxPing{ from{ transform:scale(.9); opacity:.9; } to{ transform:scale(1.6); opacity:0; } }
.cjx.is-done .cjx__walker{ background:var(--gold); color:#fff; }
/* بداية ونهاية الطريق */
.cjx__flag{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--gold-2); opacity:0; transition:opacity .4s; }
.cjx.is-ready .cjx__flag{ opacity:1; }
.cjx__flag i{ font-size:18px; }
.cjx__flag--end{ width:40px; height:40px; justify-content:center; border-radius:50%; border:1.5px dashed rgba(216,185,104,.6); }
.cjx.is-done .cjx__flag--end{ background:var(--gold); color:var(--navy-deep,#001a45); border-style:solid; }
.cjx__cta{ margin-top:34px; display:flex; justify-content:center; }
/* ظهور تدريجي */
.js .cjx__card{ opacity:0; transform:translateY(14px); }
.js .cjx__st.is-down .cjx__card{ transform:translateY(-14px); }
.js .cjx.is-in .cjx__card{ opacity:1; transform:none; transition-delay:calc(var(--k) * 90ms); }
/* أخفِ الخط القديم إن وُجد */
#journey .cj__line{ display:none; }

@media (max-width:1180px){ .cjx{ --ch:256px; --pin:66px; } .cjx__list{ padding:0 34px; gap:10px; } .cjx__card strong{ font-size:16px; } .cjx__card p{ font-size:12.5px; } }
/* الموبايل والتابلت: طريق رأسي */
@media (max-width:980px){
  .cjx{ --pin:60px; max-width:560px; margin-inline:auto; padding:48px 0 54px; }
  .cjx__list{ grid-template-columns:1fr; gap:26px; padding:0; }
  .cjx__st{ grid-template-rows:auto; grid-template-columns:var(--pin) 1fr; align-items:center; column-gap:22px; justify-items:stretch; }
  .cjx__pin, .cjx__st.is-up .cjx__pin, .cjx__st.is-down .cjx__pin{ grid-row:1; grid-column:1; font-size:20px; }
  .cjx__st.is-up .cjx__pin{ transform:translateX(-10px); }
  .cjx__st.is-down .cjx__pin{ transform:translateX(10px); }
  .cjx__st.is-up .cjx__card, .cjx__st.is-down .cjx__card{ grid-row:1; grid-column:2; margin:0; text-align:start; align-self:center; }
  .cjx__card::after{ display:none; }
  .js .cjx__card, .js .cjx__st.is-down .cjx__card{ transform:translateX(-14px); }
  .js .cjx.is-in .cjx__card{ transform:none; }
  .cjx__base{ stroke-width:16; }
}
@media (prefers-reduced-motion:reduce){ .cjx__walker::after{ animation:none; } .js .cjx__card{ opacity:1; transform:none; } }