/* ── قسم الدورة الواحدة: بطاقة عرض + مشهد SVG متحرك (CSS فقط) ── */
.cs-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 55%;align-items:center;gap:0;margin:.6rem auto 0;max-width:1180px;padding:2.6rem 2.6rem 2.8rem 1.6rem;border:0;background:none;filter:drop-shadow(0 14px 28px rgb(22 58 122 / .08))}
.cs-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;overflow:visible}
.cs-shape--tall{display:none}
.cs-scene{grid-column:2;grid-row:1;display:flex;justify-content:center;padding-inline:.6rem 1.6rem;min-width:0}
.cs-svg{display:block;width:100%;height:auto;max-width:33rem;margin-inline:auto;overflow:visible;font-family:var(--font-display,'Cairo',sans-serif)}
.cs-svg text{font-size:16px;font-weight:700;fill:#163a7a}
.cs-dot-wrap{cursor:pointer;outline:none}

/* ── الجانب النصي ── */
.cs-copy{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;text-align:start;padding:2.2rem 0 0 1.2rem}
.cs-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cs-badge{display:inline-flex;align-items:center;padding:.38rem .95rem;border-radius:999px;background:#dfeafb;color:#163a7a;font-family:var(--font-display);font-size:.82rem;font-weight:700}
.cs-badge--soft{background:#fff;border:1px solid #cfe0f6;color:#2a5aa0}
.cs-title{position:relative;margin:.1rem 0 0;padding-bottom:.8rem;font-family:var(--font-display);font-size:clamp(1.65rem,2.8vw,2.5rem);font-weight:800;line-height:1.35;color:#0f2a5f;letter-spacing:0}
.cs-title::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:3rem;height:4px;border-radius:4px;background:linear-gradient(90deg,#f5b400,#2f7fe0)}
.cs-title a{color:inherit;text-decoration:none}
.cs-title a:hover{color:#1e5bb8}
.cs-lead{margin:.1rem 0 0;color:#5d738c;font-size:1.02rem;line-height:1.9;max-width:30rem}
.cs-meta{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.cs-meta li{display:flex;align-items:center;gap:.6rem;color:#2f4a6d;font-size:.9rem;font-weight:600}
.cs-meta .nx-spot-ic{background:#fff;border:1px solid #d6e4f7;border-radius:.6rem}

/* ── الشريط السفلي: الزر + الرسوم ── */
.cs-foot{display:flex;align-items:stretch;gap:.9rem;flex-wrap:wrap;margin-top:.9rem;padding-top:1rem;border-top:1px solid #d6e4f7;width:100%}
.cs-go{display:inline-flex;align-items:center;justify-content:space-between;gap:1.2rem;flex:1 1 13rem;min-height:3.3rem;padding:.55rem .6rem .55rem 1.4rem;border-radius:.9rem;background:linear-gradient(135deg,#2563c7,#163a7a);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 10px 22px rgb(22 58 122 / .22),inset 0 1px 0 rgb(255 255 255 / .18);transition:transform .2s ease,box-shadow .2s ease}
.cs-go:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgb(22 58 122 / .3),inset 0 1px 0 rgb(255 255 255 / .18);color:#fff}
.cs-go i{position:relative;flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:.65rem;background:rgb(255 255 255 / .14);order:-1}
.cs-go i::before{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:2px;background:#fff;border-radius:2px;transform:translate(-50%,-50%)}
.cs-go i::after{content:"";position:absolute;left:calc(50% - .5rem);top:calc(50% - .3rem);width:.55rem;height:.55rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.cs-price{display:flex;flex-direction:column;justify-content:center;gap:.15rem;min-width:7.2rem;padding:.45rem 1rem;border-radius:.9rem;background:#fff;border:1px solid #d6e4f7;text-align:center}
.cs-price small{font-size:.68rem;font-weight:700;color:#7a8ea6;letter-spacing:.02em}
.cs-price strong{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:#0f2a5f;line-height:1.1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.2em}
.cs-price strong span{font-size:.78rem;font-weight:700;color:#5d738c}
.cs-sar{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;margin-inline-start:.15em;background:currentColor;-webkit-mask:url("../img/sar-symbol.png?v=20261022182221") center/contain no-repeat;mask:url("../img/sar-symbol.png?v=20261022182221") center/contain no-repeat}

/* ── الحركة: مشهد واحد مدته 10 ثوانٍ يتكرر بهدوء ── */
.cs-svg{--cs-loop:10s}
.cs-cursor{transform-box:fill-box;transform-origin:0 0;animation:csCursor var(--cs-loop) ease-in-out infinite}
.cs-box-check{stroke-dasharray:1;stroke-dashoffset:1;animation:csCheck var(--cs-loop) ease-out infinite}
.cs-box{animation:csBox var(--cs-loop) ease-out infinite}
.cs-spark{offset-path:path("M18 92 H150 Q178 92 178 120 V232 Q178 260 150 260 H132 Q108 260 108 284 V456 Q108 482 134 482 H530");offset-rotate:0deg;opacity:0;animation:csSpark var(--cs-loop) ease-in-out infinite}
.cs-dot{transform-box:fill-box;transform-origin:center;animation:csDot var(--cs-loop) ease-in-out infinite}
.cs-step--2 .cs-dot{animation-delay:.35s}
.cs-step--3 .cs-dot{animation-delay:.7s}
.cs-dot-wrap{transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cs-dot-wrap:hover,.cs-dot-wrap:focus-visible{transform:translateY(-7px)}
.cs-done{transform-box:fill-box;transform-origin:center;opacity:0;animation:csDone var(--cs-loop) cubic-bezier(.34,1.56,.64,1) infinite}
.cs-final{transform-box:fill-box;transform-origin:center;animation:csFinal var(--cs-loop) ease-in-out infinite}
.cs-rays{opacity:0;animation:csRays var(--cs-loop) ease-out infinite}

@keyframes csCursor{
  0%{transform:translate(-30px,70px);opacity:0}
  4%{opacity:1}
  16%{transform:translate(78px,-72px)}
  18%{transform:translate(78px,-72px) scale(.9)}
  20%{transform:translate(78px,-72px) scale(1)}
  34%{transform:translate(78px,-72px);opacity:1}
  44%{transform:translate(30px,10px);opacity:0}
  100%{transform:translate(-30px,70px);opacity:0}
}
@keyframes csBox{0%,17%{fill:#ffffff}19%,92%{fill:#e3ecfb}94%,100%{fill:#ffffff}}
@keyframes csCheck{0%,18%{stroke-dashoffset:1}25%,92%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes csSpark{0%,25%{offset-distance:0%;opacity:0}27%{opacity:1}44%{opacity:1}46%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes csDot{0%,28%{transform:translateY(0)}31%{transform:translateY(-12px)}34%{transform:translateY(0)}36%{transform:translateY(-4px)}38%,100%{transform:translateY(0)}}
@keyframes csDone{0%,44%{transform:translateX(70px);opacity:0}52%{transform:translateX(0);opacity:1}90%{transform:translateX(0);opacity:1}96%,100%{transform:translateX(40px);opacity:0}}
@keyframes csFinal{0%,52%{transform:scale(1)}56%{transform:scale(1.18)}60%,100%{transform:scale(1)}}
@keyframes csRays{0%,53%{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center}58%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}

/* ── تقليل الحركة: المشهد في حالته النهائية بلا تحريك ── */
@media (prefers-reduced-motion:reduce){
  .cs-cursor,.cs-box-check,.cs-box,.cs-spark,.cs-dot,.cs-done,.cs-final,.cs-rays{animation:none!important}
  .cs-cursor{transform:translate(78px,-72px);opacity:1}
  .cs-box-check{stroke-dashoffset:0}
  .cs-box{fill:#e3ecfb}
  .cs-done{opacity:1}
  .cs-rays{opacity:1}
  .cs-spark{opacity:0}
  .cs-go{transition:none}
}

/* ── الآيباد الأفقي والشاشات المتوسطة ── */
@media (max-width:1100px){
  .cs-card{grid-template-columns:minmax(0,1fr) 55%;gap:0;padding:2rem 1.6rem 2.2rem 1rem}
  .cs-scene{padding-inline:.6rem 1.2rem}
  .cs-copy{padding:1.6rem 0 0 .6rem}
  .cs-title{font-size:clamp(1.5rem,3vw,2.1rem)}
}

/* ── الآيباد العمودي والجوال: الشكل الطولي مع المشهد في الأعلى ── */
@media (max-width:860px){
  .cs-card{grid-template-columns:1fr;gap:.5rem;padding:1.5rem 1.1rem 1.3rem;margin-inline:auto;max-width:34rem}
  .cs-shape--wide{display:none}
  .cs-shape--tall{display:block}
  .cs-scene{grid-column:auto;grid-row:auto}
  .cs-copy{grid-column:auto;grid-row:auto}
  .cs-scene{padding:0}
  .cs-svg{max-width:24.5rem}
  .cs-svg text{font-size:18px}
  .cs-copy{align-items:flex-start;text-align:start;padding:0 .3rem 0;gap:.5rem}
  .cs-top{justify-content:flex-start}
  .cs-title{font-size:1.6rem;line-height:1.4;padding-bottom:.7rem}
  .cs-title::after{inset-inline-start:0;inset-inline-end:auto}
  .cs-lead{font-size:.95rem;line-height:1.8;max-width:none}
  .cs-meta{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:.45rem}
  .cs-meta li{padding:.3rem .7rem .3rem .4rem;border-radius:999px;background:#fff;border:1px solid #d6e4f7;font-size:.8rem;gap:.4rem}
  .cs-meta .nx-spot-ic{width:1.5rem;height:1.5rem;border:0;background:#eaf1fb}
  .cs-foot{margin-top:0;padding-top:.3rem;gap:.6rem;flex-wrap:nowrap;justify-content:space-between;align-items:center}
  .cs-go{flex:0 0 63%;min-height:2.8rem;font-size:.95rem;border-radius:.5rem;justify-content:center;padding:.35rem .8rem;position:relative;box-shadow:0 6px 14px rgb(22 58 122 / .18)}
  .cs-go i{width:1.8rem;height:1.8rem}
  .cs-go i::before{width:.8rem}
  .cs-go i{display:none}
  .cs-go span{padding:0}
  .cs-price{flex:0 1 auto;min-width:5.6rem;padding:.3rem .5rem;border-radius:.5rem;gap:.05rem}
  .cs-price small{font-size:.62rem}
  .cs-price strong{font-size:1.1rem}
}
@media (max-width:420px){
  .cs-card{padding:1.5rem .9rem 1.4rem}
  .cs-title{font-size:1.45rem}
  .cs-price{min-width:6.4rem}
}

/* ── شبكة بطاقات القالب المتحرك (دورتان فأكثر) ── */
.cs-grid{display:grid;gap:1.2rem;max-width:1180px;margin:.6rem auto 0;align-items:stretch}
.cs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-card.cs-card--sm{grid-template-columns:1fr;gap:.5rem;padding:1.5rem 1.1rem 1.3rem;margin:0;max-width:none;filter:drop-shadow(0 12px 24px rgb(22 58 122 / .08))}
.cs-card.cs-card--sm .cs-shape--wide{display:none}
.cs-card.cs-card--sm .cs-shape--tall{display:block}
.cs-card.cs-card--sm .cs-scene{grid-column:auto;grid-row:auto;padding:0}
.cs-card.cs-card--sm .cs-svg{max-width:22rem}
.cs-card.cs-card--sm .cs-svg text{font-size:18px}
.cs-card.cs-card--sm .cs-copy{grid-column:auto;grid-row:auto;align-items:flex-start;text-align:start;padding:0 .3rem;gap:.5rem}
.cs-card.cs-card--sm .cs-top{justify-content:flex-start}
.cs-card.cs-card--sm .cs-title{font-size:1.3rem;line-height:1.4;padding-bottom:.7rem}
.cs-card.cs-card--sm .cs-title::after{inset-inline-start:0;inset-inline-end:auto}
.cs-card.cs-card--sm .cs-lead{font-size:.92rem;line-height:1.75;max-width:none}
.cs-card.cs-card--sm .cs-meta{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:.4rem}
.cs-card.cs-card--sm .cs-meta li{padding:.28rem .65rem .28rem .4rem;border-radius:999px;background:#fff;border:1px solid #d6e4f7;font-size:.76rem;gap:.35rem}
.cs-card.cs-card--sm .cs-meta .nx-spot-ic{width:1.4rem;height:1.4rem;border:0;background:#eaf1fb}
.cs-card.cs-card--sm .cs-foot{margin-top:.1rem;padding-top:.6rem;gap:.6rem;flex-wrap:nowrap;justify-content:space-between;align-items:center}
.cs-card.cs-card--sm .cs-actions{flex:0 0 auto}
.cs-card.cs-card--sm .cs-go{flex:0 0 60%;min-height:2.7rem;font-size:.92rem;border-radius:.5rem;justify-content:center;padding:.35rem .8rem;box-shadow:0 6px 14px rgb(22 58 122 / .18)}
.cs-card.cs-card--sm .cs-go i{display:none}
.cs-card.cs-card--sm .cs-go span{padding:0}
.cs-card.cs-card--sm .cs-price{flex:0 1 auto;min-width:5.6rem;padding:.3rem .5rem;border-radius:.5rem;gap:.05rem}
.cs-card.cs-card--sm .cs-price small{font-size:.62rem}
.cs-card.cs-card--sm .cs-price strong{font-size:1.05rem}
@media (max-width:1100px){.cs-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-track,.cs-hint{display:none}
/* ── الجوال: البطاقات جنباً إلى جنب في مسار أفقي بانتقالية تركيز ── */
@media (max-width:760px){
  .cs-rail{position:relative;margin-inline:calc(50% - 50vw);timeline-scope:--csx}
  .cs-grid--2,.cs-grid--3{display:flex;gap:.9rem;max-width:none;margin:0;padding:.6rem max(8vw,calc(50% - 11.5rem)) 1rem;scroll-padding-inline:max(8vw,calc(50% - 11.5rem));
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-timeline:--csx inline;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-grid--2::-webkit-scrollbar,.cs-grid--3::-webkit-scrollbar{display:none}
  .cs-grid .cs-card.cs-card--sm{flex:0 0 84vw;max-width:23rem;scroll-snap-align:center;scroll-snap-stop:always;transform-origin:center;padding:1.1rem .9rem 1rem;gap:.35rem}
  .cs-grid .cs-card.cs-card--sm .cs-svg{max-width:16.5rem}
  .cs-grid .cs-card.cs-card--sm .cs-svg text{font-size:20px}
  .cs-grid .cs-card.cs-card--sm .cs-copy{gap:.4rem;padding:0 .15rem}
  .cs-grid .cs-card.cs-card--sm .cs-title{font-size:1.15rem;padding-bottom:.55rem}
  .cs-grid .cs-card.cs-card--sm .cs-lead{font-size:.86rem;line-height:1.65}
  .cs-grid .cs-card.cs-card--sm .cs-meta li{font-size:.72rem;padding:.22rem .55rem .22rem .35rem}
  .cs-grid .cs-card.cs-card--sm .cs-foot{padding-top:.5rem;margin-top:0}
  .cs-grid .cs-card.cs-card--sm .cs-go{min-height:2.5rem;font-size:.88rem}
  .cs-grid .cs-card.cs-card--sm .cs-price{min-width:5rem;padding:.25rem .45rem}
  .cs-track{display:block;position:relative;width:8.5rem;height:.3rem;margin:.2rem auto 0;border-radius:999px;background:#dbe6f6;overflow:hidden}
  .cs-track i{position:absolute;top:0;inset-inline-start:0;height:100%;width:50%;border-radius:999px;background:var(--af-grad,linear-gradient(90deg,#163a7a,#2a63c0))}
  .cs-grid--3 ~ .cs-track i{width:34%}
  .cs-hint{display:block;margin:.55rem 0 0;text-align:center;font-size:.78rem;color:#6b7fa3}
  @supports (animation-timeline: scroll()) {
    .cs-track i{animation:csThumb linear both;animation-timeline:--csx}
    .cs-grid--3 ~ .cs-track i{animation-name:csThumb3}
    .cs-n2{--n:2}.cs-n3{--n:3}.cs-n4{--n:4}.cs-n5{--n:5}.cs-n6{--n:6}
    .cs-k1{--k:1}.cs-k2{--k:2}.cs-k3{--k:3}.cs-k4{--k:4}.cs-k5{--k:5}.cs-k6{--k:6}
    .cs-grid .cs-card.cs-card--sm{animation:csFocus linear both;animation-timeline:--csx;animation-range:calc((var(--k) - 2) / (var(--n) - 1) * 100%) calc(var(--k) / (var(--n) - 1) * 100%)}
  }
}
@keyframes csThumb{from{inset-inline-start:0}to{inset-inline-start:50%}}
@keyframes csThumb3{from{inset-inline-start:0}to{inset-inline-start:66%}}
@keyframes csFocus{
  0%{transform:scale(.94) translateY(8px);opacity:.78}
  50%{transform:scale(1) translateY(0);opacity:1}
  100%{transform:scale(.94) translateY(8px);opacity:.78}
}