/* متجر الخدمات: السلة والعقد والدفع والبدء وحاسبة السيو، وبطاقات الطلب في الكتالوج. */

.ck .wrap { display: flex; flex-direction: column; gap: var(--sp-6); }
.ck-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.ck-steps__i { display: flex; align-items: center; gap: var(--sp-2); flex: 1 0 auto; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--c-text-faint); border: 1px solid var(--c-border-subtle); white-space: nowrap; }
.ck-steps__n { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: var(--r-pill); background: var(--c-panel-2); font-weight: var(--fw-bold); font-size: var(--fs-2xs); }
.ck-steps__i.is-done { color: var(--c-text-muted); }
.ck-steps__i.is-done .ck-steps__n { background: var(--c-primary-dim); color: var(--c-primary); }
.ck-steps__i.is-now { color: var(--c-text-strong); border-color: var(--c-border-live); background: var(--c-glass); }
.ck-steps__i.is-now .ck-steps__n { background: var(--c-primary); color: var(--c-on-primary); }

.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
@media (max-width: 960px) { .ck-grid { grid-template-columns: 1fr; } }
.ck-main { display: flex; flex-direction: column; gap: var(--sp-5); min-inline-size: 0; }
.ck-card { background: var(--c-panel-1); border: 1px solid var(--c-border-subtle); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 560px) { .ck-card { padding: var(--sp-5); } }
.ck-sticky { position: sticky; top: calc(var(--ly-header) + var(--sp-4)); }
.ck-h { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); margin: 0; }
.ck-note { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: var(--lh-normal); margin: 0; }
.ck-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: space-between; margin-block-start: var(--sp-4); }
.ck-empty { text-align: center; display: flex; flex-direction: column; gap: var(--sp-5); align-items: center; padding-block: var(--sp-8); color: var(--c-text-muted); }

.ck-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ck-line { display: flex; gap: var(--sp-5); justify-content: space-between; background: var(--c-panel-1); border: 1px solid var(--c-border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); transition: border-color var(--mo-fast) var(--mo-ease); }
.ck-line:hover { border-color: var(--c-border-default); }
@media (max-width: 640px) { .ck-line { flex-direction: column; } }
.ck-line__main { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }
.ck-line__name { font-weight: var(--fw-bold); color: var(--c-text-strong); margin: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.ck-line__scope { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.ck-line__ctl { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-2); }
.ck-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex-shrink: 0; }
@media (max-width: 640px) { .ck-line__side { flex-direction: row; align-items: center; justify-content: space-between; } }
.ck-line__price { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--c-text-strong); margin: 0; }
.ck-line__term { font-size: var(--fs-2xs); color: var(--c-primary); margin: 0; }
.ck-ctl { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-2xs); color: var(--c-text-faint); min-inline-size: 180px; }
.ck-ctl .field__input { min-block-size: 40px; padding-block: var(--sp-2); font-size: var(--fs-sm); }

.ck-sum__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-body); }
.ck-sum__list li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.ck-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--c-border-subtle); margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ck-sum__total strong { font-size: var(--fs-h3); color: var(--c-text-strong); font-weight: var(--fw-black); }
.ck-big { font-size: var(--fs-h1); font-weight: var(--fw-black); color: var(--c-primary); margin: 0; line-height: var(--lh-tight); }
.ck-big small { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: var(--fw-regular); }
.ck-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.ck-trust li::before { content: '✓'; color: var(--c-primary); margin-inline-end: var(--sp-2); font-weight: var(--fw-bold); }

.ck-check { display: flex; gap: var(--sp-3); align-items: center; margin: 0; color: var(--c-text-body); }
.ck-check input { inline-size: 20px; block-size: 20px; accent-color: var(--c-primary); flex-shrink: 0; }
.ck-sig { font-size: var(--fs-lg); }

.ck-doc { background: var(--c-well); color: var(--c-on-well); border-radius: var(--r-lg); padding: var(--sp-7); line-height: var(--lh-relaxed); font-size: var(--fs-sm); max-block-size: 70vh; overflow-y: auto; }
@media (max-width: 560px) { .ck-doc { padding: var(--sp-5); max-block-size: 60vh; } }
.ck-doc__head { text-align: center; padding-block-end: var(--sp-4); border-block-end: 1px solid currentColor; margin-block-end: var(--sp-5); }
.ck-doc__brand { font-weight: var(--fw-black); margin: 0; }
.ck-doc__title { font-size: var(--fs-h3); margin: var(--sp-2) 0; }
.ck-doc__meta { display: flex; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; margin: 0; font-size: var(--fs-xs); }
.ck-doc__meta div { display: flex; gap: var(--sp-2); }
.ck-doc__meta dd { margin: 0; font-weight: var(--fw-bold); }
.ck-doc__parties p { margin: 0 0 var(--sp-3); }
.ck-doc__arts { padding-inline-start: 0; list-style: none; margin: 0; }
.ck-doc__arts > li { margin-block-end: var(--sp-4); }
.ck-doc__arts h3 { font-size: var(--fs-body); margin: 0 0 var(--sp-2); }
.ck-doc__arts p { margin: 0 0 var(--sp-2); }
.ck-doc__arts ol { margin: 0; padding-inline-start: var(--sp-5); }
.ck-doc__sign { border-block-start: 1px solid currentColor; padding-block-start: var(--sp-4); }
.ck-doc__hash code { font-size: var(--fs-2xs); word-break: break-all; }

.ck-q { border: 1px solid var(--c-border-subtle); margin: 0; }
.ck-q legend { padding-inline: var(--sp-2); }
.ck-qs { display: flex; flex-direction: column; gap: var(--sp-5); }
.ck-done { align-items: flex-start; }
.ck-ok { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: var(--r-pill); border: 2px solid var(--c-primary); color: var(--c-primary); font-size: var(--fs-h3); font-weight: var(--fw-black); box-shadow: var(--sh-glow); }
.ck-kv { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: 0; }
.ck-kv dt { font-size: var(--fs-2xs); color: var(--c-text-faint); }
.ck-kv dd { margin: 0; font-weight: var(--fw-bold); color: var(--c-text-strong); }
.ck-wait { flex-direction: row; align-items: center; }
.ck-spin { inline-size: 28px; block-size: 28px; border-radius: var(--r-pill); border: 3px solid var(--c-border-default); border-block-start-color: var(--c-primary); animation: ck-spin 0.9s linear infinite; flex-shrink: 0; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spin { animation: none; } }

.ck-scan__row { display: flex; gap: var(--sp-3); }
.ck-scan__row .field__input { flex: 1; min-inline-size: 0; }
@media (max-width: 560px) { .ck-scan__row { flex-direction: column; } }
.ck-host { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); margin: 0; }
.ck-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.ck-finds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.ck-finds li { display: flex; gap: var(--sp-3); align-items: baseline; color: var(--c-text-body); }
.ck-finds span { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-black); flex-shrink: 0; }
.ck-finds .is-ok span { background: var(--c-primary-dim); color: var(--c-primary); }
.ck-finds .is-bad span { background: var(--c-danger); color: var(--c-on-danger); }
.ck-score { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--c-border-subtle); }
.ck-score__n { margin: 0; display: grid; place-items: center; inline-size: 7rem; block-size: 7rem; border-radius: 50%; border: 6px solid currentColor; flex-shrink: 0; line-height: 1; }
.ck-score__n b { font-size: var(--fs-h1); font-weight: var(--fw-black); }
.ck-score__n small { font-size: var(--fs-2xs); color: var(--c-text-muted); }
.ck-score__k { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.ck-score.is-bad .ck-score__n { color: var(--c-danger); } .ck-score.is-warn .ck-score__n { color: color-mix(in srgb, var(--c-danger) 55%, var(--c-primary)); } .ck-score.is-ok .ck-score__n { color: var(--c-primary); }
.stat--bad .stat__n { color: var(--c-danger); }
.ck-issues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ck-issues li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: color-mix(in srgb, var(--c-danger) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c-danger) 28%, transparent); }
.ck-issues li.sev-2 { background: color-mix(in srgb, color-mix(in srgb, var(--c-danger) 55%, var(--c-primary)) 6%, transparent); border-color: color-mix(in srgb, color-mix(in srgb, var(--c-danger) 55%, var(--c-primary)) 25%, transparent); }
.ck-issues__mark { display: inline-grid; place-items: center; inline-size: 1.625rem; block-size: 1.625rem; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-on-danger); font-weight: var(--fw-black); flex-shrink: 0; }
.ck-issues .sev-2 .ck-issues__mark { background: color-mix(in srgb, var(--c-danger) 55%, var(--c-primary)); color: var(--c-on-danger); }
.ck-issues p { margin: 0; }
.ck-issues__area { font-size: var(--fs-2xs); color: var(--c-text-muted); }
.ck-issues__t { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-text-strong); margin-block: 2px 6px !important; }
.ck-lock { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-2xs); color: var(--c-text-body); }
.ck-lock__blur { filter: blur(4px); opacity: .55; user-select: none; letter-spacing: 1px; }
.ck-lock span:last-child::before { content: "🔒 "; }
.ck-passed { font-size: var(--fs-sm); color: var(--c-text-body); }
.ck-passed summary { cursor: pointer; margin-block-end: var(--sp-2); }

/* بطاقات الكتالوج: مستويات الخدمة وزر الطلب */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-block-start: var(--sp-4); }
@media (max-width: 760px) { .tiers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: var(--sp-1); } .tiers::-webkit-scrollbar { display: none; } .tier { scroll-snap-align: start; } .tier:hover { transform: none; } .tiers--one { grid-auto-columns: 100%; } }
.tier { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-border-subtle); border-radius: var(--r-md); background: var(--c-bg-deep); transition: border-color var(--mo-fast) var(--mo-ease), transform var(--mo-fast) var(--mo-ease); }
.tier:hover { border-color: var(--c-border-live); transform: translateY(-2px); }
.tier__name { font-size: var(--fs-2xs); color: var(--c-text-faint); font-weight: var(--fw-bold); margin: 0; }
.tier__price { font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--c-text-strong); margin: 0; }
.tier__price small { font-size: var(--fs-2xs); color: var(--c-text-muted); font-weight: var(--fw-regular); }
.tier__scope { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; flex: 1; }
.tier .btn { margin-block-start: var(--sp-2); }

.ck-doc h2, .ck-doc h3, .ck-doc strong { color: inherit; }
.ck-card .ck-card { padding: 0; border: 0; background: none; }
.ck-sum__total strong { white-space: nowrap; }
.ck-q legend { float: inline-start; inline-size: 100%; padding: 0; }

/* بطاقة خدمة في الكتالوج */
.items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.item { background: var(--c-panel-1); border: 1px solid var(--c-border-subtle); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; scroll-margin-block-start: calc(var(--ly-header) + var(--sp-9)); }
@media (max-width: 560px) { .item { padding: var(--sp-5); } }
.item:target { border-color: var(--c-border-live); box-shadow: var(--sh-glow); }
.item__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.item__name { font-size: var(--fs-h4); margin: 0; }
.item__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.item__tags .chip { font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-3); }
.item__brief { color: var(--c-text-muted); font-size: var(--fs-sm); margin-block: var(--sp-3) 0; max-width: 70ch; }
.tier--mid { border-color: var(--c-border-default); background: var(--c-panel-2); }
.tiers--one { grid-template-columns: minmax(0, 28rem); }

/* بطل المتجر ونموذج الطلب */
.hero--store { overflow-x: clip; }
.hero--store .hero__title { max-width: 18ch; }
.mock { position: relative; margin: 0; background: var(--c-panel-1); border: 1px solid var(--c-border-default); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--c-border-subtle); background: var(--c-bg-deep); }
.mock__bar span { inline-size: 10px; block-size: 10px; border-radius: var(--r-pill); background: var(--c-panel-3); }
.mock__bar p { margin: 0 auto; font-size: var(--fs-2xs); color: var(--c-text-faint); font-family: var(--font-mono); }
.mock__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.mock__title { margin: 0; font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mock__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mock__lines li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-subtle); border-radius: var(--r-md); background: var(--c-bg-deep); }
.mock__lines span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.mock__lines b { font-size: var(--fs-sm); color: var(--c-text-strong); font-weight: var(--fw-medium); }
.mock__lines small { font-size: var(--fs-2xs); color: var(--c-text-faint); }
.mock__lines strong, .mock__total strong { white-space: nowrap; color: var(--c-text-strong); }
.mock__total { display: flex; justify-content: space-between; margin: 0; padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--c-border-default); font-weight: var(--fw-bold); }
.mock__total strong { font-size: var(--fs-h4); color: var(--c-primary); }
.mock__pay { margin: 0; text-align: center; padding: var(--sp-3); border-radius: var(--r-pill); background: var(--c-primary); color: var(--c-on-primary); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.mock__steps { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.mock__steps li { font-size: var(--fs-2xs); color: var(--c-text-faint); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--c-border-subtle); }
.mock__steps li.is-done { color: var(--c-primary); border-color: var(--c-primary-dim); }
.mock figcaption { font-size: var(--fs-2xs); color: var(--c-text-faint); padding: 0 var(--sp-5) var(--sp-4); text-align: center; }

/* أقسام الكتالوج في الرئيسية */
.groups { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
.groupc a { display: flex; flex-direction: column; gap: var(--sp-2); block-size: 100%; padding: var(--sp-5); border: 1px solid var(--c-border-subtle); border-radius: var(--r-lg); background: var(--c-panel-1); color: inherit; text-decoration: none; transition: border-color var(--mo-fast) var(--mo-ease), transform var(--mo-fast) var(--mo-ease); }
.groupc a:hover { border-color: var(--c-border-live); transform: translateY(-3px); }
.groupc__n { font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--c-primary-dim); line-height: 1; }
.groupc__name { font-size: var(--fs-lg); margin: 0; color: var(--c-text-strong); }
.groupc__brief { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; flex: 1; }
.groupc__meta { display: flex; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-border-subtle); font-size: var(--fs-xs); color: var(--c-text-faint); }
.groupc__meta strong { color: var(--c-primary); }

/* المعاينة قبل الدفع ومعرض النماذج */
.preview { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); align-items: center; }
@media (max-width: 960px) { .preview { grid-template-columns: 1fr; gap: var(--sp-7); } }
.preview__steps { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.preview__steps li { display: flex; gap: var(--sp-3); align-items: center; color: var(--c-text-body); font-size: var(--fs-sm); }
.preview__steps span { flex: none; display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--r-pill); background: var(--c-primary-dim); color: var(--c-primary); font-weight: var(--fw-bold); font-size: var(--fs-xs); }
.samples { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
@media (max-width: 560px) { .samples { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--sp-2); } .sample { scroll-snap-align: center; } }
.sample figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.sample__frame { position: relative; aspect-ratio: 9 / 16; border-radius: calc(var(--r-xl) * 1.4); border: 7px solid var(--c-panel-3); background: var(--c-bg-deep); overflow: hidden; box-shadow: var(--sh-lg); }
.sample__frame img { display: block; inline-size: 100%; block-size: auto; }
.sample figcaption { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.sample figcaption b { font-size: var(--fs-sm); color: var(--c-text-strong); }
.sample figcaption span { font-size: var(--fs-2xs); color: var(--c-text-faint); }

/* الباقات بمددها */
.plans--store .plan { background: var(--c-panel-1); border: 1px solid var(--c-border-subtle); border-radius: var(--r-lg); }
.plans--store .plan--featured { border-color: var(--c-border-live); }
.plan__inc { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.plan__inc li { position: relative; padding-inline-start: var(--sp-5); font-size: var(--fs-sm); color: var(--c-text-body); }
.plan__inc li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: 8px; block-size: 8px; border-radius: var(--r-pill); background: var(--c-primary); }
.terms { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: auto; }
.term { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-default); border-radius: var(--r-md); color: var(--c-text-body); text-decoration: none; font-size: var(--fs-sm); transition: border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease); }
.term strong { color: var(--c-text-strong); white-space: nowrap; }
.term:hover { border-color: var(--c-border-live); background: var(--c-glass); }
.term--main { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.term--main strong { color: var(--c-on-primary); }
.term--main:hover { background: var(--c-primary-soft); border-color: var(--c-primary-soft); }

.steps--four { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.table__group th { background: var(--c-panel-2); color: var(--c-primary); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); }


/* ═══ طبقة الحركة: الطلب يركّب نفسه، والنماذج تُتصفَّح، والضوء يتبع المؤشر ═══ */

@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* البطل: هالة تدور خلف الطلب، والبطاقة تميل مع المؤشر */
.mockwrap { position: relative; isolation: isolate; perspective: 1400px; }
.mockwrap__orb { position: absolute; inset: -14% -10%; z-index: -1; border-radius: var(--r-pill); background: conic-gradient(from 0deg, transparent 0 55%, var(--c-glow-mid) 72%, transparent 88%); filter: blur(48px); opacity: .9; pointer-events: none; animation: orbit calc(var(--mo-ambient) * 0.9) linear infinite; }
.mock { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform var(--mo-slow) var(--mo-ease); will-change: transform; }
.js .mock::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 36%; background: linear-gradient(90deg, transparent, var(--c-glow-soft), transparent); transform: translate3d(-140%, 0, 0); animation: sweep calc(var(--mo-ambient) * 0.55) var(--mo-ease) 2.4s infinite; pointer-events: none; }

/* أسطر الطلب تنزل واحداً بعد الآخر */
.js .mock__lines li { opacity: 0; transform: translate3d(0, var(--sp-3), 0) scale(.98); animation: line-in var(--mo-slow) var(--mo-spring) forwards; animation-delay: calc(var(--i) * 380ms + 600ms); }
.js .mock__total { opacity: 0; animation: line-in var(--mo-slow) var(--mo-ease) 1.7s forwards; }

/* زر الدفع: لمعة تعبره، ثم ضغطة كل دورة */
.mock__pay { position: relative; overflow: hidden; }
.js .mock__pay { animation: press 6s var(--mo-ease) 3s infinite; }
.js .mock__pay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--c-glass-strong) 50%, transparent 70%); transform: translate3d(-120%, 0, 0); animation: shine 6s var(--mo-ease) 2.2s infinite; }
@keyframes shine { 0% { transform: translate3d(-120%, 0, 0); } 30%, 100% { transform: translate3d(120%, 0, 0); } }
@keyframes press { 0%, 44%, 56%, 100% { transform: scale(1); } 50% { transform: scale(.95); box-shadow: var(--sh-glow); } }

/* مراحل الطلب: ضوء يمشي عليها من الخدمات إلى البدء */
.js .mock__steps li { animation: walk 6s var(--mo-ease) infinite; animation-delay: calc(var(--i) * 1.2s + 3s); }
@keyframes walk { 0%, 22%, 100% { background: transparent; } 4%, 16% { background: var(--c-primary-dim); color: var(--c-primary); border-color: var(--c-primary); } }

/* إشعارات الطلب تظهر بالتتابع */
.mock__toasts { display: none; }
.js .mock__toasts { display: block; position: absolute; inset-inline-end: -6%; inset-block-start: 16%; list-style: none; margin: 0; padding: 0; z-index: 2; pointer-events: none; }
.mock__toasts li { position: absolute; inset-inline-end: 0; inset-block-start: 0; display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-radius: var(--r-pill); background: var(--c-glass-strong); border: 1px solid var(--c-border-live); backdrop-filter: blur(14px); box-shadow: var(--sh-md); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-strong); opacity: 0; animation: toast 9s var(--mo-ease) infinite; animation-delay: calc(var(--i) * 3s + 3.2s); }
.mock__toasts li::before { content: "✓"; display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: var(--r-pill); background: var(--c-primary); color: var(--c-on-primary); font-size: var(--fs-2xs); }
@keyframes toast { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.94); } 5%, 28% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } 34%, 100% { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); } }
@media (max-width: 960px) { .js .mock__toasts { inset-inline-end: var(--sp-3); inset-block-start: calc(var(--sp-7) * -1); } }

/* ضوء يتبع المؤشر داخل البطاقات */
.groupc a:hover, .item:hover, .plans--store .plan:hover, .tier:hover, .term:hover { background-image: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 0%), var(--c-glow-soft), transparent 70%); }
.item { transition: border-color var(--mo-base) var(--mo-ease); }
.item:hover { border-color: var(--c-border-default); }
.groupc__n { transition: color var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-spring); display: inline-block; }
.groupc a:hover .groupc__n { color: var(--c-primary); transform: translate3d(0, -3px, 0) scale(1.08); }

/* الباقة المميزة: حدّ مضيء يدور حولها */
.plans--store { align-items: stretch; }
.plans--store .plan { position: relative; }
.plans--store .plan--featured::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--beam), transparent 0 58%, var(--c-primary) 80%, transparent 96%); -webkit-mask: linear-gradient(var(--c-bg-deep) 0 0) content-box, linear-gradient(var(--c-bg-deep) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--c-bg-deep) 0 0) content-box exclude, linear-gradient(var(--c-bg-deep) 0 0); animation: beam 5s linear infinite; pointer-events: none; }
@keyframes beam { to { --beam: 360deg; } }

/* النماذج: جوالات بمنظور مروحي، كل جوال يتصفح موقعه */
.samples { perspective: 1400px; }
.sample figure { transition: transform var(--mo-slow) var(--mo-spring); }
.sample:first-child figure { transform: rotateY(-12deg) translate3d(0, var(--sp-4), 0); }
.sample:nth-child(2) figure { transform: translate3d(0, calc(var(--sp-6) * -1), 0); }
.sample:last-child figure { transform: rotateY(12deg) translate3d(0, var(--sp-4), 0); }
[dir="ltr"] .sample:first-child figure { transform: rotateY(12deg) translate3d(0, var(--sp-4), 0); }
[dir="ltr"] .sample:last-child figure { transform: rotateY(-12deg) translate3d(0, var(--sp-4), 0); }
.samples:hover .sample figure { transform: none; }
.sample:hover .sample__frame { border-color: var(--c-primary-dim); box-shadow: var(--sh-glow), var(--sh-lg); }
.sample__frame { transition: border-color var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease); }
.js .sample__frame img { animation: browse 16s var(--mo-ease) infinite alternate; animation-delay: calc(var(--i) * -5s); will-change: transform; }
.sample:hover .sample__frame img { animation-play-state: paused; }
@keyframes browse { 0%, 10% { transform: translate3d(0, 0, 0); } 90%, 100% { transform: translate3d(0, -52%, 0); } }
.sample__frame::before { content: ""; position: absolute; z-index: 1; inset-block-start: var(--sp-2); inset-inline-start: 50%; translate: -50% 0; inline-size: 30%; block-size: 14px; border-radius: var(--r-pill); background: var(--c-bg-deep); }
[dir="rtl"] .sample__frame::before { translate: 50% 0; }
@media (max-width: 560px) { .sample figure, .sample:first-child figure, .sample:last-child figure, .sample:nth-child(2) figure { transform: none; } }

/* المعاينة: كل خطوة تنبض بدورها */
.preview__steps span { position: relative; }
.js .preview__steps span::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); border: 1px solid var(--c-primary); opacity: 0; animation: ping 3.6s var(--mo-ease) infinite; animation-delay: calc(var(--i) * 1.2s); }

/* الخطوات الأربع: خط يرتسم بينها، والأرقام تبرز */
.steps--four .step::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: linear-gradient(90deg, var(--c-primary-dim), var(--c-primary)); transform: scaleX(0); transform-origin: right; transition: transform 900ms var(--mo-ease); transition-delay: calc(var(--i) * 220ms + 200ms); }
[dir="ltr"] .steps--four .step::after { transform-origin: left; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dim)); }
.steps--four.is-in .step::after, html:not(.js) .steps--four .step::after { transform: scaleX(1); }
.js .steps--four.is-in .step__n { animation: pop var(--mo-slow) var(--mo-spring) both; animation-delay: calc(var(--i) * 220ms + 300ms); }

@media (prefers-reduced-motion: reduce) {
  .mockwrap__orb, .js .mock::after, .js .mock__pay::after, .js .mock__toasts { display: none !important; }
  .js .mock__lines li, .js .mock__total { opacity: 1 !important; transform: none !important; }
  .js .sample__frame img { animation: none !important; }
  .steps--four .step::after { transform: scaleX(1) !important; }
  .mock, .sample figure { transform: none !important; }
}

/* حقل الجوال: رمز الدولة ثم الرقم */
.tel { display: flex; gap: var(--sp-2); }
.tel__cc { flex: none; inline-size: 7.5rem; padding-inline: var(--sp-3); text-align: left; }
.tel__num { flex: 1; min-inline-size: 0; }

/* بيانات التواصل من اللوحة: تسمية خافتة فوق كل قيمة في التذييل، وسطر واحد في النصوص. */
.ct { display: flex; flex-direction: column; gap: var(--sp-1); }
.ct > a[dir="ltr"], .side__list a[dir="ltr"] { align-self: flex-start; }
.ct__k { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--c-text-faint); }
.ct-inline { white-space: nowrap; }
.ct-inline a { unicode-bidi: isolate; }