/* =====================================================================
   SPONSORED ACADEMY · HOME 2026 « ممول »
   الصق هذا الملف وحده في خانة CSS في سلة (بعد حذف كل ما فيها).
   القسم 1: الزجاج السائل للهيدر والقائمة الجانبية ونافذة الدخول (كل الصفحات)
   القسم 2: الصفحة الرئيسية (داخل #spx-home فقط، ولا يؤثر على أي صفحة أخرى)
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

/* =====================================================================
   1) LIQUID GLASS — كل صفحات المتجر
   ===================================================================== */
:root {
  --spx-hh: 72px;
  --spx-ease: cubic-bezier(.22, 1, .36, 1);
  --spx-tint: linear-gradient(115deg, rgba(29, 119, 229, .11) 0%, rgba(255, 255, 255, .30) 36%, rgba(255, 255, 255, .24) 64%, rgba(242, 48, 85, .10) 100%);
  --spx-tint-dark: linear-gradient(115deg, rgba(29, 119, 229, .24) 0%, rgba(9, 13, 24, .50) 38%, rgba(9, 13, 24, .50) 62%, rgba(242, 48, 85, .18) 100%);
}

html.spx-gh-on body { padding-top: var(--spx-hh) !important; }
html.spx-home-page body { padding-top: 0 !important; }
html.spx-home-page,
html.spx-home-page body { overflow-x: clip; }

/* الهيدر: الزجاج على طبقة وهمية حتى لا تتأثر القوائم المنسدلة داخله */
.spx-gh {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: auto !important;
  margin: 0 !important;
  border-color: transparent !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  transition: top .6s var(--spx-ease), right .6s var(--spx-ease), left .6s var(--spx-ease), border-radius .6s var(--spx-ease) !important;
}

.spx-gh::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--spx-tint), rgba(255, 255, 255, .46);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 rgba(255, 255, 255, .28),
    0 12px 32px -14px rgba(9, 16, 34, .22);
  content: "";
  pointer-events: none;
  transition: background .5s ease, box-shadow .5s ease;
}

.spx-gh::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .16) 30%, rgba(29, 119, 229, .36) 64%, rgba(242, 48, 85, .42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.spx-gh.is-capsule {
  top: 10px !important;
  right: 12px !important;
  left: 12px !important;
  border-radius: 24px !important;
}

.spx-gh.is-capsule::after { opacity: 1; }

.spx-gh .spx-gh-unfix {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
}

.spx-gh .spx-gh-bar { transition: border-radius .6s var(--spx-ease); }
.spx-gh.is-capsule .spx-gh-bar { border-radius: 24px 24px 0 0; }

.spx-gh :is(.header-inner, .main-nav-container),
.spx-gh .spx-gh-clear {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.spx-gh img { transition: filter .5s ease; }

/* فوق الأقسام الداكنة في الرئيسية يتحول الزجاج إلى داكن والأيقونات إلى بيضاء */
.spx-gh.is-dark::before {
  background: var(--spx-tint-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 12px 32px -14px rgba(0, 0, 0, .55);
}

/* فوق الأقسام الصفراء في صفحة سناب */
.spx-gh.is-snap::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .55), rgba(255, 253, 190, .42) 50%, rgba(255, 255, 255, .5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 12px 32px -14px rgba(90, 80, 0, .28);
}

.spx-gh.is-snap::after { background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 40%, rgba(10, 10, 10, .18)); }

.spx-gh.is-dark,
.spx-gh.is-dark :is(a, button, span, i, p, b, strong, small, label, [class*="sicon"]) {
  color: #fff !important;
}

.spx-gh.is-dark img { filter: brightness(0) invert(1); }

/* القائمة الجانبية */
.spx-gpanel,
.mm-ocd__content {
  overflow: hidden;
  background: var(--spx-tint), rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(30px) saturate(185%) !important;
  backdrop-filter: blur(30px) saturate(185%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 30px 80px -24px rgba(9, 16, 34, .38) !important;
}

.spx-gpanel.is-right,
.mm-ocd--right .mm-ocd__content { border-radius: 28px 0 0 28px !important; }
.spx-gpanel.is-left,
.mm-ocd--left .mm-ocd__content { border-radius: 0 28px 28px 0 !important; }

.spx-gpanel .spx-gh-clear,
.mm-ocd__content .mm-spn,
.mm-ocd__content .mm-spn ul {
  background: transparent !important;
  box-shadow: none !important;
}

.spx-gbackdrop,
.mm-ocd__backdrop {
  background: rgba(6, 10, 20, .3) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

.mm-ocd__content .mm-spn,
.spx-gpanel { color: #0b1020 !important; }

/* نافذة تسجيل الدخول */
salla-login-modal .s-modal-body,
.s-login-modal .s-modal-body,
.spx-gmodal {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 28px !important;
  background: var(--spx-tint), rgba(255, 255, 255, .66) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 40px 100px -30px rgba(9, 16, 34, .5) !important;
}

.s-login-modal .s-modal-close,
.s-login-modal [class*="close"] { color: #0b1020 !important; }

salla-login-modal .s-modal-overlay,
.s-login-modal .s-modal-overlay,
.spx-gmodal-overlay {
  background: rgba(6, 10, 20, .34) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

salla-login-modal :is(select, textarea, input),
.s-login-modal :is(select, textarea, input),
.spx-gmodal :is(select, textarea, input) {
  border-color: rgba(11, 16, 32, .12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .58) !important;
}

@media (prefers-reduced-transparency: reduce) {
  .spx-gh::before { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .spx-gh.is-dark::before { background: rgba(9, 13, 24, .96); }
}

/* =====================================================================
   2) HOME — الصفحة الرئيسية فقط
   ===================================================================== */
/* إلغاء هوامش غلاف سلة حول الرئيسية */
section.s-block:has(#spx-home),
section.s-block:has(#spx-home) :is(salla-custom-component, .container, [class*="s-block"]):has(#spx-home) {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#spx-home {
  --ink: #05070d;
  --ink-2: #0a0f1c;
  --ink-3: #121a2c;
  --paper: #f4f5f9;
  --paper-2: #e9ecf3;
  --text: #0b1020;
  --muted: #5a6376;
  --muted-d: rgba(232, 238, 250, .64);
  --line: rgba(11, 16, 32, .1);
  --line-d: rgba(255, 255, 255, .1);
  --blue: #1d77e5;
  --blue-hi: #6aa9ff;
  --red: #f23055;
  --red-hi: #ff7891;
  --ok: #34c759;
  --snap: #fffc00;
  --tt-c: #25f4ee;
  --tt-p: #fe2c55;
  --ig-1: #fcaf45;
  --ig-2: #e1306c;
  --ig-3: #833ab4;
  --g-b: #4285f4;
  --g-r: #ea4335;
  --g-y: #fbbc05;
  --g-g: #34a853;
  --f-d: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);

  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  color: var(--text);
  background: var(--paper);
  font-family: var(--f-b);
  font-size: 16px;
  line-height: 1.8;
  text-align: right;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

#spx-home *,
#spx-home *::before,
#spx-home *::after { box-sizing: border-box; }

#spx-home :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dt, dd, blockquote) { margin: 0; padding: 0; }
#spx-home :where(ul, ol) { list-style: none; }
#spx-home a { color: inherit; text-decoration: none; }
#spx-home img,
#spx-home svg { display: block; max-width: 100%; }
#spx-home button { margin: 0; padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
#spx-home bdi { unicode-bidi: isolate; }
#spx-home [hidden] { display: none !important; }
#spx-home :focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; border-radius: 12px; }
#spx-home .spx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#spx-home .spx-wrap {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}

#spx-home .spx-sec {
  position: relative;
  padding-block: clamp(88px, 11vw, 156px);
}

#spx-home .spx-dark { overflow: clip; color: #eef2fa; background: var(--ink); }

/* حبيبات فيلمية خفيفة على الأقسام الداكنة */
#spx-home .spx-dark::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  content: "";
  pointer-events: none;
}

/* ---------- typography ---------- */
#spx-home .spx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font: 600 13px/1.4 var(--f-b);
}

#spx-home .spx-eyebrow::before {
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

#spx-home .spx-dark .spx-eyebrow { color: var(--blue-hi); }

#spx-home .spx-h2 {
  margin-top: 18px;
  font-family: var(--f-d);
  font-size: clamp(31px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.38;
  text-wrap: balance;
}

#spx-home .spx-lead {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.95;
  text-wrap: pretty;
}

#spx-home .spx-dark .spx-lead { color: var(--muted-d); }

/* وسم «ممول» */
#spx-home .spx-adtag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  background: linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 600 13px/1 var(--f-b);
  white-space: nowrap;
}

#spx-home .spx-adtag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-hi), var(--red));
  box-shadow: 0 0 0 4px rgba(106, 169, 255, .14);
}

#spx-home .spx-adtag b {
  color: rgba(255, 255, 255, .55);
  font-family: var(--f-d);
  font-weight: 500;
  letter-spacing: .02em;
}

#spx-home .spx-adtag--light {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, .7);
}

#spx-home .spx-adtag--light b { color: var(--muted); }

/* ---------- buttons ---------- */
#spx-home .spx-btn {
  --bg: #fff;
  --fg: var(--ink);
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 0 26px;
  border-radius: 999px;
  color: var(--fg);
  background: var(--bg);
  font: 700 15px/1 var(--f-d);
  white-space: nowrap;
  isolation: isolate;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .5s var(--ease), box-shadow .4s ease, background .3s ease;
}

#spx-home .spx-btn::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  content: "";
  transform: translateX(120%);
  transition: transform .9s var(--ease);
}

#spx-home .spx-btn:hover::after { transform: translateX(-120%); }
#spx-home .spx-btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
#spx-home .spx-btn:hover svg { transform: translateX(-4px); }

#spx-home .spx-btn--light { box-shadow: 0 18px 40px -16px rgba(255, 255, 255, .45); }

#spx-home .spx-btn--ink {
  --bg: var(--ink);
  --fg: #fff;
  box-shadow: 0 18px 40px -18px rgba(5, 7, 13, .7);
}

#spx-home .spx-btn--ink::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%); }

#spx-home .spx-btn--glass {
  --bg: rgba(255, 255, 255, .06);
  --fg: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#spx-home .spx-btn--glass::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); }

/* =====================================================================
   HERO
   ===================================================================== */
#spx-home .spx-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  padding: calc(var(--spx-hh, 72px) + 64px) 0 150px;
}

#spx-home .spx-aura {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

#spx-home .spx-aura span {
  position: absolute;
  border-radius: 50%;
  opacity: .9;
  will-change: transform;
}

#spx-home .spx-aura span:nth-child(1) {
  top: -18%;
  left: -12%;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, rgba(29, 119, 229, .30), transparent);
  animation: spx-drift 22s ease-in-out infinite alternate;
}

#spx-home .spx-aura span:nth-child(2) {
  right: -16%;
  bottom: -30%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(closest-side, rgba(242, 48, 85, .20), transparent);
  animation: spx-drift 26s ease-in-out -8s infinite alternate-reverse;
}

#spx-home .spx-aura span:nth-child(3) {
  top: 30%;
  left: 30%;
  width: 30vmax;
  height: 30vmax;
  background: radial-gradient(closest-side, rgba(255, 252, 0, .06), transparent);
  animation: spx-drift 18s ease-in-out -4s infinite alternate;
}

#spx-home .spx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

#spx-home .spx-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
}

#spx-home .spx-h1 {
  margin-top: 26px;
  font-family: var(--f-d);
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 800;
  line-height: 1.24;
  text-wrap: balance;
}

#spx-home .spx-h1 > span { display: block; }

#spx-home .spx-h1 .spx-inline-tag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-inline-start: .3em;
  padding: .32em .7em;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--f-b);
  font-size: .2em;
  font-weight: 600;
  line-height: 1;
  vertical-align: .55em;
  white-space: nowrap;
}

#spx-home .spx-h1 .spx-inline-tag i {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-hi), var(--red));
}

#spx-home .spx-h1 em {
  background: linear-gradient(100deg, #8fc0ff 0%, #ffffff 45%, #ff8ba1 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  animation: spx-sheen 9s ease-in-out infinite alternate;
}

#spx-home .spx-hero .spx-lead { max-width: 54ch; margin-top: 24px; }

#spx-home .spx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* stories */
#spx-home .spx-stories {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  margin-top: 46px;
}

#spx-home .spx-story {
  display: grid;
  width: 74px;
  justify-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .86);
  text-align: center;
}

#spx-home .spx-story__ring {
  position: relative;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: transform .5s var(--spring);
}

#spx-home .spx-story__ring::before {
  position: absolute;
  inset: 0;
  padding: 2.5px;
  border-radius: 50%;
  background: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
}

#spx-home .spx-story__ring > span {
  display: grid;
  width: calc(100% - 9px);
  height: calc(100% - 9px);
  place-items: center;
  border-radius: 50%;
  background: var(--ink-3);
}

#spx-home .spx-story__ring svg { width: 24px; height: 24px; }
#spx-home .spx-story__ring img { width: 60%; height: 60%; object-fit: contain; }

#spx-home .spx-story--live .spx-story__ring {
  background: conic-gradient(from 0deg, var(--snap), #fff6a8, var(--snap), #f5d400, var(--snap));
  animation: spx-spin 6s linear infinite;
}

#spx-home .spx-story--live .spx-story__ring > span {
  color: #0b0b06;
  background: var(--snap);
  animation: spx-spin 6s linear infinite reverse;
}

#spx-home .spx-story--live:hover .spx-story__ring { transform: scale(1.07); }

#spx-home .spx-story--tt .spx-story__ring > span { color: #fff; background: #0b0b10; }
#spx-home .spx-story--tt .spx-story__ring > span svg { filter: drop-shadow(-1.5px 0 0 var(--tt-c)) drop-shadow(1.5px 0 0 var(--tt-p)); }
#spx-home .spx-story--ig .spx-story__ring > span { color: #fff; background: linear-gradient(135deg, var(--ig-1), var(--ig-2) 55%, var(--ig-3)); }
#spx-home .spx-story--gg .spx-story__ring > span { color: var(--g-b); background: #fff; }

#spx-home .spx-story:not(.spx-story--live) .spx-story__ring { background: rgba(255, 255, 255, .18); }
#spx-home .spx-story:not(.spx-story--live) .spx-story__ring > span { opacity: .82; }

#spx-home .spx-story > b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

#spx-home .spx-story > small {
  margin-top: -6px;
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  line-height: 1.2;
}

#spx-home .spx-story--live > small { color: var(--snap); }

/* stage: قطع المنصات الزجاجية */
#spx-home .spx-stage-wrap {
  --k: 1;
  position: relative;
  height: calc(560px * var(--k));
}

#spx-home .spx-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 540px;
  height: 560px;
  margin-left: -270px;
  transform: scale(var(--k));
  transform-origin: 50% 0;
}

#spx-home .spx-frag {
  --depth: 1;
  --gx: 0px;
  --gy: 0px;
  position: absolute;
  opacity: calc(1 - var(--sp, 0) * .85);
  translate:
    calc(var(--px, 0) * var(--depth) * 14px + var(--gx) * var(--sp, 0))
    calc(var(--py, 0) * var(--depth) * 14px + var(--gy) * var(--sp, 0));
  scale: calc(1 - var(--sp, 0) * .22);
  will-change: translate, scale;
}

#spx-home .spx-frag__in {
  position: relative;
  animation: spx-float 7s ease-in-out infinite;
}

#spx-home .spx-glass-d {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 34px 70px -24px rgba(0, 0, 0, .7);
}

#spx-home .spx-mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, .62);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

#spx-home .spx-mini-tag::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#spx-home .spx-skel {
  display: block;
  height: 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .16);
}

/* story fragment */
#spx-home .spx-frag--story { top: 10px; right: 14px; --depth: 1.6; --gx: -150px; --gy: 260px; }
#spx-home .spx-frag--story .spx-frag__in { width: 214px; padding: 16px; animation-delay: -1s; }

#spx-home .spx-fs__row { display: flex; align-items: center; gap: 12px; }

#spx-home .spx-fs__ring {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--snap) 0 72%, rgba(255, 255, 255, .16) 0);
  animation: spx-spin 12s linear infinite;
}

#spx-home .spx-fs__ring span {
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink-2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbb0, var(--snap) 55%, #d9c900);
}

#spx-home .spx-fs__lines { display: grid; flex: 1; gap: 7px; }
#spx-home .spx-fs__lines .spx-skel:nth-child(2) { width: 62%; }

#spx-home .spx-fs__bars { display: flex; gap: 4px; margin-top: 14px; }

#spx-home .spx-fs__bars i {
  position: relative;
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
}

#spx-home .spx-fs__bars i:first-child { background: #fff; }

#spx-home .spx-fs__bars i:nth-child(2)::after {
  position: absolute;
  inset: 0;
  background: #fff;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  animation: spx-fill 4s linear infinite;
}

#spx-home .spx-frag--story .spx-mini-tag { margin-top: 12px; }

/* reel fragment */
#spx-home .spx-frag--reel { top: 36px; left: 6px; --depth: 2.2; --gx: 170px; --gy: 230px; }

#spx-home .spx-frag--reel .spx-frag__in {
  width: 164px;
  height: 284px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(170deg, rgba(20, 22, 30, .82), rgba(5, 6, 10, .9));
  box-shadow:
    -2px 0 0 rgba(37, 244, 238, .55),
    2px 0 0 rgba(254, 44, 85, .55),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 40px 80px -24px rgba(0, 0, 0, .8);
  animation-delay: -3s;
}

#spx-home .spx-fr__bars { position: absolute; top: 14px; right: 14px; left: 14px; display: flex; gap: 4px; }
#spx-home .spx-fr__bars i { height: 3px; flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .22); }
#spx-home .spx-fr__bars i:first-child { background: #fff; }

#spx-home .spx-fr__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#spx-home .spx-fr__play svg {
  width: 22px;
  height: 22px;
  color: #fff;
  filter: drop-shadow(-1.5px 0 0 var(--tt-c)) drop-shadow(1.5px 0 0 var(--tt-p));
}

#spx-home .spx-fr__glow {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(37, 244, 238, .22), transparent 70%),
    radial-gradient(40% 30% at 70% 60%, rgba(254, 44, 85, .24), transparent 70%);
  animation: spx-drift 9s ease-in-out infinite alternate;
}

#spx-home .spx-fr__foot { position: absolute; right: 14px; bottom: 16px; left: 14px; display: grid; gap: 8px; }
#spx-home .spx-fr__foot .spx-skel:nth-child(3) { width: 70%; }

#spx-home .spx-fr__side {
  position: absolute;
  bottom: 70px;
  left: 12px;
  display: grid;
  gap: 12px;
}

#spx-home .spx-fr__side i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

/* capsule */
#spx-home .spx-capsule-wrap {
  position: absolute;
  top: 236px;
  left: 50%;
  z-index: 3;
  width: 330px;
  margin-left: -165px;
  --depth: .6;
  --gx: 0px;
  --gy: 120px;
}

#spx-home .spx-capsule {
  position: relative;
  display: grid;
  height: 104px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(100deg, rgba(29, 119, 229, .62) 0%, rgba(120, 170, 255, .16) 34%, rgba(255, 255, 255, .08) 50%, rgba(255, 120, 150, .16) 66%, rgba(242, 48, 85, .58) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -10px 24px rgba(0, 0, 0, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 30px 80px -20px rgba(29, 119, 229, .55),
    0 30px 80px -30px rgba(242, 48, 85, .6);
  animation: spx-breathe 6s ease-in-out infinite;
}

#spx-home .spx-capsule::before {
  position: absolute;
  top: 6px;
  right: 14%;
  left: 14%;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  content: "";
  filter: blur(1px);
}

#spx-home .spx-capsule::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
  content: "";
  transform: translateX(-130%);
  animation: spx-glint 7s ease-in-out 1.5s infinite;
}

/* عند إضافة صورة الوسم الزجاجية: الصورة تحل محل الكبسولة المبنية بالكود */
#spx-home .spx-capsule > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45));
  pointer-events: none;
}

#spx-home .spx-capsule.has-img {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#spx-home .spx-capsule.has-img::before,
#spx-home .spx-capsule.has-img::after { display: none; }

#spx-home .spx-capsule.has-img .spx-capsule__word {
  transform: rotate(-7deg);
  text-shadow: 0 2px 18px rgba(10, 20, 60, .45);
}

#spx-home .spx-capsule.has-img .spx-capsule__word small {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(10, 20, 60, .7);
}

#spx-home .spx-capsule__word {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
  line-height: 1;
}

#spx-home .spx-capsule__word small {
  color: rgba(255, 255, 255, .78);
  font: 600 13px/1 var(--f-b);
}

#spx-home .spx-capsule__word b {
  color: #fff;
  font: 600 42px/1.05 var(--f-d);
  letter-spacing: -.01em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

#spx-home .spx-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 470px;
  height: 160px;
  margin: -80px 0 0 -235px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}

#spx-home .spx-orbit::after {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px 4px rgba(106, 169, 255, .7);
  content: "";
}

@supports (offset-path: ellipse(10px 10px at 50% 50%)) {
  #spx-home .spx-orbit::after {
    top: 0;
    left: 0;
    offset-path: ellipse(235px 80px at 50% 50%);
    offset-rotate: 0deg;
    animation: spx-orbit 16s linear infinite;
  }
}

@keyframes spx-orbit { to { offset-distance: 100%; } }

/* post fragment */
#spx-home .spx-frag--post { right: 0; bottom: 6px; --depth: 1.8; --gx: -120px; --gy: -60px; }
#spx-home .spx-frag--post .spx-frag__in { width: 208px; padding: 12px; animation-delay: -5s; }

#spx-home .spx-fp__head { display: flex; align-items: center; gap: 9px; }

#spx-home .spx-fp__av {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ig-1), var(--ig-2), var(--ig-3));
}

#spx-home .spx-fp__av span { display: block; width: 100%; height: 100%; border: 2px solid var(--ink-2); border-radius: 50%; background: #2a2f3d; }
#spx-home .spx-fp__head > div { display: grid; flex: 1; gap: 5px; }
#spx-home .spx-fp__head .spx-skel { width: 64%; }

#spx-home .spx-fp__img {
  position: relative;
  height: 150px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(252, 175, 69, .9), transparent 70%),
    radial-gradient(70% 70% at 70% 75%, rgba(131, 58, 180, .95), transparent 70%),
    linear-gradient(135deg, var(--ig-1), var(--ig-2) 55%, var(--ig-3));
}

#spx-home .spx-fp__img::after {
  position: absolute;
  inset: 22% 26%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  content: "";
  transform: rotate(-8deg);
}

#spx-home .spx-fp__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
#spx-home .spx-fp__icons { display: flex; gap: 10px; color: rgba(255, 255, 255, .85); }
#spx-home .spx-fp__icons svg { width: 18px; height: 18px; }
#spx-home .spx-fp__icons svg:first-child { color: var(--red-hi); animation: spx-beat 2.6s ease-in-out infinite; }

/* search fragment */
#spx-home .spx-frag--search { bottom: 4px; left: 0; --depth: 1.3; --gx: 130px; --gy: -80px; }
#spx-home .spx-frag--search .spx-frag__in { width: 270px; padding: 14px 16px; animation-delay: -2s; }

#spx-home .spx-fq__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
}

#spx-home .spx-fq__bar svg { width: 14px; height: 14px; flex: 0 0 14px; }
#spx-home .spx-fq__bar span { overflow: hidden; white-space: nowrap; }

#spx-home .spx-fq__caret {
  width: 1.5px;
  height: 14px;
  margin-inline-start: -4px;
  background: var(--g-b);
  animation: spx-caret 1s steps(1) infinite;
}

#spx-home .spx-fq__res { display: grid; gap: 4px; margin-top: 12px; }
#spx-home .spx-fq__res .spx-mini-tag { color: #fff; font-weight: 700; }
#spx-home .spx-fq__res .spx-mini-tag::before { display: none; }
#spx-home .spx-fq__url { color: rgba(255, 255, 255, .5); font-size: 11px; direction: ltr; text-align: right; }
#spx-home .spx-fq__title { color: #8ab4ff; font-size: 14px; font-weight: 600; line-height: 1.5; }
#spx-home .spx-fq__res .spx-skel { width: 88%; height: 6px; margin-top: 3px; }

#spx-home .spx-fq__dots { display: flex; gap: 4px; margin-top: 12px; }
#spx-home .spx-fq__dots i { width: 6px; height: 6px; border-radius: 50%; }
#spx-home .spx-fq__dots i:nth-child(1) { background: var(--g-b); }
#spx-home .spx-fq__dots i:nth-child(2) { background: var(--g-r); }
#spx-home .spx-fq__dots i:nth-child(3) { background: var(--g-y); }
#spx-home .spx-fq__dots i:nth-child(4) { background: var(--g-g); }

#spx-home .spx-scrollcue {
  position: absolute;
  z-index: 3;
  bottom: 96px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
  transform: translateX(-50%);
}

#spx-home .spx-scrollcue i {
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}

#spx-home .spx-scrollcue i::after {
  position: absolute;
  inset: 0;
  background: #fff;
  content: "";
  animation: spx-drop 2.2s var(--ease) infinite;
}

/* =====================================================================
   PROOF
   ===================================================================== */
#spx-home .spx-proof {
  position: relative;
  z-index: 6;
  margin-top: -78px;
}

#spx-home .spx-proof__bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 30px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .99), rgba(255, 255, 255, .96));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 40px 90px -36px rgba(5, 7, 13, .5);
}

#spx-home .spx-proof__item {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 26px 28px;
}

#spx-home .spx-proof__item + .spx-proof__item::before {
  position: absolute;
  top: 30px;
  right: 0;
  bottom: 30px;
  width: 1px;
  background: var(--line);
  content: "";
}

#spx-home .spx-proof__num {
  color: var(--text);
  font: 800 clamp(30px, 3.3vw, 46px)/1.1 var(--f-d);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: right;
}

#spx-home .spx-proof__num sup {
  margin-left: 2px;
  color: var(--blue);
  font-size: .5em;
  vertical-align: .85em;
}

#spx-home .spx-proof__lbl { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* =====================================================================
   COURSES
   ===================================================================== */
#spx-home .spx-courses { padding-top: clamp(84px, 8vw, 112px); }

#spx-home .spx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 26px 40px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

#spx-home .spx-head > div { max-width: 760px; }

#spx-home .spx-method {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

#spx-home .spx-method span {
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--muted);
  font: 700 14px/1 var(--f-d);
}

#spx-home .spx-method span:nth-child(2) { color: #fff; background: var(--ink); }

#spx-home .spx-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  perspective: 1200px;
}

#spx-home .spx-card {
  --c1: #fff;
  --rx: 0deg;
  --ry: 0deg;
  --gxp: 50%;
  --gyp: 30%;
  position: relative;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  padding: 18px;
  border-radius: 30px;
  color: #fff;
  background: var(--card-bg, #0b0d14);
  box-shadow: 0 34px 70px -36px rgba(5, 7, 13, .6);
  isolation: isolate;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

#spx-home .spx-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--card-glow);
  content: "";
  transition: transform 1.2s var(--ease);
}

#spx-home .spx-card::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--gxp) var(--gyp), rgba(255, 255, 255, .16), transparent 45%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

#spx-home .spx-card:hover::after { opacity: 1; }
#spx-home .spx-card:hover::before { transform: scale(1.08); }

#spx-home .spx-card > * { position: relative; z-index: 2; }

#spx-home a.spx-card:hover { box-shadow: 0 44px 90px -36px rgba(5, 7, 13, .75); }

#spx-home .spx-card__bars { display: flex; gap: 4px; }
#spx-home .spx-card__bars i { position: relative; height: 3px; flex: 1; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .2); }
#spx-home .spx-card__bars i.is-on { background: rgba(255, 255, 255, .95); }

#spx-home .spx-card--snap .spx-card__bars i.is-on { background: rgba(255, 255, 255, .25); }

#spx-home .spx-card--snap .spx-card__bars i.is-on::after {
  position: absolute;
  inset: 0;
  background: #fff;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  animation: spx-fill 5s linear infinite;
}

#spx-home .spx-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

#spx-home .spx-plat { display: flex; align-items: center; gap: 9px; min-width: 0; }

#spx-home .spx-plat__ic {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--c1);
  color: var(--ic-fg, #000);
}

#spx-home .spx-plat__ic svg { width: 17px; height: 17px; }
#spx-home .spx-plat__ic img { width: 62%; height: 62%; object-fit: contain; }

#spx-home .spx-plat__name { display: grid; line-height: 1.25; }
#spx-home .spx-plat__name b { font: 600 13.5px/1.25 var(--f-d); }
#spx-home .spx-plat__name small { color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 600; }

#spx-home .spx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#spx-home .spx-badge--live::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52, 199, 89, .7);
  content: "";
  animation: spx-ping 2s ease-out infinite;
}

#spx-home .spx-badge--upd svg { width: 12px; height: 12px; animation: spx-spin 1.6s linear infinite; }

#spx-home .spx-card__art {
  position: relative;
  display: grid;
  flex: 0 0 236px;
  place-items: center;
  margin-block: 8px;
}

#spx-home .spx-card__art > img {
  position: absolute;
  inset: -4% -2%;
  width: 104%;
  height: 108%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
  transition: transform 1s var(--ease);
}

#spx-home .spx-card:hover .spx-card__art > img { transform: translateY(-8px) scale(1.04); }
#spx-home .spx-card__art.has-img .spx-art { display: none; }

#spx-home .spx-art { position: relative; width: 180px; height: 180px; transition: transform 1s var(--ease); }
#spx-home .spx-card:hover .spx-art { transform: translateY(-6px) scale(1.04); }

/* snap art: حلقة قصة */
#spx-home .spx-art--snap::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--snap), #fff9a6 25%, var(--snap) 50%, #e8d600 75%, var(--snap));
  box-shadow: 0 0 80px rgba(255, 252, 0, .28);
  content: "";
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  animation: spx-spin 14s linear infinite;
}

#spx-home .spx-art--snap::after {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9), rgba(255, 252, 0, .95) 30%, #e2cf00 70%, #a69800);
  box-shadow: inset 0 -12px 24px rgba(120, 100, 0, .45), inset 0 8px 16px rgba(255, 255, 255, .6);
  content: "";
}

/* tiktok art: لوح عمودي */
#spx-home .spx-art--tt::before {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 98px;
  height: 172px;
  margin-left: -49px;
  border-radius: 22px;
  background: linear-gradient(165deg, #2a2d38, #07080c 60%);
  box-shadow:
    -4px 0 0 rgba(37, 244, 238, .85),
    4px 0 0 rgba(254, 44, 85, .85),
    -14px 0 40px rgba(37, 244, 238, .35),
    14px 0 40px rgba(254, 44, 85, .35),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  content: "";
  transform: rotate(-8deg);
}

#spx-home .spx-art--tt::after {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -14px 0 0 -8px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid rgba(255, 255, 255, .92);
  content: "";
  filter: drop-shadow(-2px 0 0 var(--tt-c)) drop-shadow(2px 0 0 var(--tt-p));
  transform: rotate(-8deg);
}

/* instagram art: بطاقات مفرودة */
#spx-home .spx-art--ig i {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 112px;
  height: 112px;
  margin-left: -56px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(252, 175, 69, .92), rgba(225, 48, 108, .9) 55%, rgba(131, 58, 180, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 24px 40px -14px rgba(0, 0, 0, .5);
}

#spx-home .spx-art--ig i:nth-child(1) { opacity: .55; transform: translateX(-38px) rotate(-16deg); }
#spx-home .spx-art--ig i:nth-child(2) { opacity: .8; transform: translateX(-12px) rotate(-6deg); }
#spx-home .spx-art--ig i:nth-child(3) { transform: translateX(18px) rotate(6deg); }

/* google art: عدسة */
#spx-home .spx-art--gg::before {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .55), transparent 40%),
    conic-gradient(from 0deg, rgba(66, 133, 244, .55), rgba(234, 67, 53, .5), rgba(251, 188, 5, .5), rgba(52, 168, 83, .5), rgba(66, 133, 244, .55));
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, .12),
    inset 0 -14px 30px rgba(0, 0, 0, .35),
    0 30px 60px -20px rgba(66, 133, 244, .45);
  content: "";
  animation: spx-spin 18s linear infinite;
}

#spx-home .spx-art--gg::after {
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .04) 60%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  content: "";
}

#spx-home .spx-card__body h3 { font: 700 clamp(17px, 1.32vw, 20px)/1.45 var(--f-d); }
#spx-home .spx-card__body p { margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: 13.5px; line-height: 1.75; }

#spx-home .spx-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

#spx-home .spx-card__meta span {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .05);
  font-size: 11.5px;
  font-weight: 600;
}

#spx-home .spx-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

#spx-home .spx-card__body { margin-bottom: 16px; }

#spx-home .spx-price { display: flex; align-items: baseline; gap: 8px; }
#spx-home .spx-price strong { font: 800 30px/1 var(--f-d); }
#spx-home .spx-price span { color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; }
#spx-home .spx-price del { color: rgba(255, 255, 255, .38); font-size: 13px; }

#spx-home .spx-go {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  color: #0b0b06;
  background: var(--snap);
  box-shadow: 0 10px 30px -8px rgba(255, 252, 0, .6);
  transition: transform .5s var(--spring);
}

#spx-home .spx-go svg { width: 20px; height: 20px; }
#spx-home a.spx-card:hover .spx-go { transform: translateX(-4px) scale(1.06); }

#spx-home .spx-card__note { color: rgba(255, 255, 255, .55); font-size: 12.5px; font-weight: 600; }

#spx-home .spx-card--snap {
  --card-bg: #0d0d08;
  --card-glow: radial-gradient(120% 70% at 50% 34%, rgba(255, 252, 0, .30), transparent 62%), radial-gradient(90% 60% at 50% 100%, rgba(255, 252, 0, .1), transparent 70%);
  --c1: var(--snap);
}

#spx-home .spx-card--tt {
  --card-bg: #06070b;
  --card-glow: radial-gradient(70% 50% at 30% 36%, rgba(37, 244, 238, .22), transparent 70%), radial-gradient(70% 50% at 72% 46%, rgba(254, 44, 85, .24), transparent 70%);
  --c1: #111;
  --ic-fg: #fff;
}

#spx-home .spx-card--ig {
  --card-bg: #0d0710;
  --card-glow: radial-gradient(80% 55% at 40% 32%, rgba(225, 48, 108, .34), transparent 70%), radial-gradient(70% 50% at 70% 60%, rgba(131, 58, 180, .3), transparent 70%), radial-gradient(60% 40% at 30% 70%, rgba(252, 175, 69, .16), transparent 70%);
  --c1: linear-gradient(135deg, var(--ig-1), var(--ig-2) 55%, var(--ig-3));
  --ic-fg: #fff;
}

#spx-home .spx-card--ig .spx-plat__ic { background: var(--c1); }

#spx-home .spx-card--gg {
  --card-bg: #070a12;
  --card-glow: radial-gradient(60% 45% at 35% 35%, rgba(66, 133, 244, .3), transparent 70%), radial-gradient(50% 40% at 70% 40%, rgba(234, 67, 53, .18), transparent 70%), radial-gradient(50% 40% at 40% 65%, rgba(52, 168, 83, .16), transparent 70%), radial-gradient(40% 30% at 70% 70%, rgba(251, 188, 5, .14), transparent 70%);
  --c1: #fff;
  --ic-fg: var(--g-b);
}

#spx-home .spx-card.is-off { cursor: default; }
#spx-home .spx-card.is-off .spx-card__body h3 { color: rgba(255, 255, 255, .92); }

#spx-home .spx-swipe { display: none; }

/* =====================================================================
   PERKS (notifications)
   ===================================================================== */
#spx-home .spx-perks .spx-wrap {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

#spx-home .spx-perks__aura {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 18%;
  width: 640px;
  height: 640px;
  margin-top: -320px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(29, 119, 229, .35), transparent 70%),
    radial-gradient(closest-side at 70% 70%, rgba(242, 48, 85, .25), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: spx-drift 16s ease-in-out infinite alternate;
}

#spx-home .spx-notis {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin-inline: auto;
}

#spx-home .spx-noti {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 24px 50px -26px rgba(0, 0, 0, .8);
  transition: transform .5s var(--ease), background .4s ease;
}

#spx-home .spx-noti:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07)); transform: scale(1.015); }

#spx-home .spx-noti__ic {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(140deg, #2b86f0, #1d5fc2 50%, #c3214a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(29, 119, 229, .7);
}

#spx-home .spx-noti__ic svg { width: 22px; height: 22px; }

#spx-home .spx-noti--gold .spx-noti__ic {
  color: #3a2a00;
  background: linear-gradient(140deg, #fff1c4, #e7c66f 45%, #b98a2b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px -8px rgba(231, 198, 111, .8);
}

#spx-home .spx-noti__ic img { width: 128%; max-width: none; height: 128%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }

#spx-home .spx-noti__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, .5);
  font-size: 11.5px;
  font-weight: 600;
}

#spx-home .spx-noti__top b { color: rgba(255, 255, 255, .62); font-family: var(--f-d); font-weight: 500; letter-spacing: .02em; }
#spx-home .spx-noti h3 { margin-top: 3px; color: #fff; font: 700 16px/1.5 var(--f-d); }
#spx-home .spx-noti p { margin-top: 2px; color: rgba(255, 255, 255, .68); font-size: 13.5px; line-height: 1.75; }

/* =====================================================================
   FOUNDER (profile)
   ===================================================================== */
#spx-home .spx-founder__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

#spx-home .spx-portrait {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}

#spx-home .spx-portrait__ring {
  position: relative;
  padding: 4px;
  border-radius: 44px;
  background: conic-gradient(from 140deg, var(--blue), #7db6ff, var(--red), #ff9db0, var(--blue));
  box-shadow: 0 50px 100px -40px rgba(29, 119, 229, .45);
}

#spx-home .spx-portrait__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 5px solid var(--paper);
  border-radius: 40px;
  background: #dfe4ee;
}

#spx-home .spx-portrait__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 1.2s var(--ease);
}

#spx-home .spx-portrait:hover .spx-portrait__img img { transform: scale(1.04); }

#spx-home .spx-verified {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: -14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 24px 50px -20px rgba(5, 7, 13, .35);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

#spx-home .spx-verified svg { width: 28px; height: 28px; flex: 0 0 28px; color: var(--blue); }
#spx-home .spx-verified b { display: block; font: 700 13px/1.35 var(--f-d); }
#spx-home .spx-verified small { color: var(--muted); font-size: 11.5px; }

#spx-home .spx-profile {
  margin-top: 30px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 70px -44px rgba(5, 7, 13, .35);
}

#spx-home .spx-profile__name { display: flex; align-items: center; gap: 8px; font: 800 clamp(24px, 2.4vw, 32px)/1.3 var(--f-d); }
#spx-home .spx-profile__name svg { width: 24px; height: 24px; color: var(--blue); }
#spx-home .spx-profile__role { margin-top: 4px; color: var(--muted); font-size: 14.5px; }

#spx-home .spx-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
  text-align: center;
}

#spx-home .spx-counts div + div { border-inline-start: 1px solid var(--line); }
#spx-home .spx-counts b { display: block; font: 800 clamp(22px, 2.2vw, 30px)/1.2 var(--f-d); direction: ltr; }
#spx-home .spx-counts span { display: block; margin-top: 4px; padding-inline: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

#spx-home .spx-profile__bio { margin-top: 18px; color: #3b4356; font-size: 15.5px; line-height: 2; }

#spx-home .spx-cert {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 14px;
  color: var(--blue);
  background: rgba(29, 119, 229, .08);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

#spx-home .spx-cert svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* brands */
#spx-home .spx-brands {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

#spx-home .spx-brands__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; }
#spx-home .spx-brands__row + .spx-brands__row { margin-top: 22px; }
#spx-home .spx-brands__lbl { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

#spx-home .spx-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

#spx-home .spx-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 56px;
  padding-inline-start: 56px;
  animation: spx-marquee 34s linear infinite;
}

#spx-home .spx-marquee:hover .spx-marquee__track { animation-play-state: paused; }

#spx-home .spx-brand {
  display: inline-flex;
  height: 40px;
  align-items: center;
  color: #8b93a3;
  font: 700 20px/1 var(--f-d);
  white-space: nowrap;
  transition: color .3s ease;
}

#spx-home .spx-brand:hover { color: var(--text); }
#spx-home .spx-brand img { width: auto; height: 34px; max-width: 150px; object-fit: contain; filter: grayscale(1) opacity(.62); transition: filter .3s ease; }
#spx-home .spx-brand:hover img { filter: none; }
#spx-home .spx-brand--served { color: var(--blue); }

/* =====================================================================
   CONSULT (incoming call)
   ===================================================================== */
#spx-home .spx-consult .spx-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}

#spx-home .spx-facts { display: grid; gap: 12px; margin-top: 30px; }

#spx-home .spx-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
}

#spx-home .spx-facts svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 6px;
  border: 1px solid var(--line-d);
  border-radius: 10px;
  color: var(--blue-hi);
  background: rgba(255, 255, 255, .04);
}

#spx-home .spx-call-wrap { position: relative; display: grid; place-items: center; }

#spx-home .spx-call-wrap > img.spx-hour {
  position: absolute;
  z-index: 0;
  top: -56px;
  left: max(-40px, calc(50% - 280px));
  width: 150px;
  max-width: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
  rotate: -12deg;
  animation: spx-float 8s ease-in-out infinite;
}

#spx-home .spx-call {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  padding: 34px 28px 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 40px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(29, 119, 229, .3), transparent 60%),
    linear-gradient(170deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 60px 120px -50px rgba(0, 0, 0, .9);
  text-align: center;
}

#spx-home .spx-call__state { color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 600; }
#spx-home .spx-call__state i { display: inline-block; animation: spx-dots 1.4s steps(4) infinite; overflow: hidden; vertical-align: bottom; width: 1.1em; text-align: start; }

#spx-home .spx-call__av {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 26px auto 0;
}

#spx-home .spx-call__av img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

#spx-home .spx-call__av i {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1.5px solid rgba(106, 169, 255, .6);
  border-radius: 50%;
  animation: spx-ripple 3s var(--ease) infinite;
}

#spx-home .spx-call__av i:nth-of-type(2) { animation-delay: 1s; }
#spx-home .spx-call__av i:nth-of-type(3) { animation-delay: 2s; }

#spx-home .spx-call h3 { margin-top: 22px; font: 800 26px/1.3 var(--f-d); }
#spx-home .spx-call__sub { margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: 14px; }

#spx-home .spx-call__meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

#spx-home .spx-call__meta span {
  padding: 7px 13px;
  border: 1px solid var(--line-d);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 700;
}

#spx-home .spx-call__meta span:first-child { font-family: var(--f-d); direction: ltr; }

#spx-home .spx-call__acts {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

#spx-home .spx-call__btn {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .8);
  font-size: 12.5px;
  font-weight: 600;
}

#spx-home .spx-call__btn span {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .5s var(--spring), box-shadow .4s ease;
}

#spx-home .spx-call__btn svg { width: 26px; height: 26px; }
#spx-home .spx-call__btn:hover span { transform: scale(1.08); }

#spx-home .spx-call__btn--ok span {
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52, 199, 89, .6);
  animation: spx-ping-lg 2.2s ease-out infinite;
}

#spx-home .spx-call__btn--ok span svg { animation: spx-ring 2.2s ease-in-out infinite; }

/* =====================================================================
   FAQ
   ===================================================================== */
#spx-home .spx-faq .spx-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

#spx-home .spx-faq__intro { position: sticky; top: calc(var(--spx-hh, 72px) + 40px); }

#spx-home .spx-qa { border-top: 1px solid var(--line); }
#spx-home .spx-qa__item { border-bottom: 1px solid var(--line); }

#spx-home .spx-qa__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font: 700 clamp(16px, 1.3vw, 18px)/1.6 var(--f-d);
  text-align: right;
}

#spx-home .spx-qa__q i {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .5s var(--spring), background .3s ease, border-color .3s ease, color .3s ease;
}

#spx-home .spx-qa__q i::before,
#spx-home .spx-qa__q i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

#spx-home .spx-qa__q i::after { transform: translate(-50%, -50%) rotate(90deg); }

#spx-home .spx-qa__item.is-open .spx-qa__q i {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
  transform: rotate(45deg);
}

#spx-home .spx-qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

#spx-home .spx-qa__item.is-open .spx-qa__a { grid-template-rows: 1fr; }
#spx-home .spx-qa__a > div { min-height: 0; overflow: hidden; }
#spx-home .spx-qa__a p { max-width: 64ch; padding-bottom: 24px; color: var(--muted); font-size: 15.5px; line-height: 2; }

/* =====================================================================
   FINAL
   ===================================================================== */
#spx-home .spx-final {
  overflow: clip;
  padding-block: clamp(110px, 13vw, 190px);
  text-align: center;
}

#spx-home .spx-feedtext {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 18px;
  opacity: .06;
  pointer-events: none;
}

#spx-home .spx-feedtext div {
  display: flex;
  width: max-content;
  gap: 40px;
  padding-inline-start: 40px;
  font: 800 clamp(48px, 7vw, 110px)/1 var(--f-d);
  white-space: nowrap;
  animation: spx-marquee 60s linear infinite;
}

#spx-home .spx-feedtext div:nth-child(2) { animation-direction: reverse; animation-duration: 70s; }
#spx-home .spx-feedtext div:nth-child(3) { animation-duration: 80s; }

#spx-home .spx-final .spx-wrap { display: grid; justify-items: center; }
#spx-home .spx-final .spx-h2 { max-width: 18ch; font-size: clamp(34px, 5.4vw, 74px); }
#spx-home .spx-final .spx-lead { margin-inline: auto; }

#spx-home .spx-final .spx-capsule-wrap {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 520px);
  margin: 46px auto 0;
}

#spx-home .spx-final .spx-capsule { height: clamp(110px, 14vw, 160px); }
#spx-home .spx-final .spx-capsule__word b { font-size: clamp(44px, 6vw, 68px); }

#spx-home .spx-final .spx-btn { margin-top: 44px; min-height: 62px; padding-inline: 34px; font-size: 16px; }
#spx-home .spx-final small { display: block; margin-top: 16px; color: rgba(255, 255, 255, .45); font-size: 13px; }

/* =====================================================================
   «المحفظة» — قسم «أكثر من دورة»: كل منتج خارج دورات المنصات بطاقة في محفظة
   ===================================================================== */
#spx-home .spx-more { padding-top: clamp(8px, 2vw, 24px); }

#spx-home .spx-wallet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding-top: 18px;
  perspective: 1400px;
}

#spx-home .spx-pass {
  --rot: 0deg;
  --ty: 0px;
  --sy: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --gxp: 50%;
  --gyp: 20%;
  --pc: #fff;
  --pc-ink: #0b1020;
  --pass-bg: #0b1020;
  --pass-glow: none;
  position: relative;
  display: flex;
  min-height: 486px;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: 26px;
  color: #fff;
  background: var(--pass-glow), var(--pass-bg);
  box-shadow: 0 30px 60px -34px rgba(5, 7, 13, .55), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .22);
  isolation: isolate;
  transform: translateY(calc(var(--ty) + var(--sy))) rotate(var(--rot)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}

/* المروحة على الشاشات الكبيرة */
#spx-home .spx-pass:nth-child(4n+1) { --rot: -3deg; --ty: 16px; z-index: 1; }
#spx-home .spx-pass:nth-child(4n+2) { --rot: -1deg; --ty: 0px; z-index: 2; }
#spx-home .spx-pass:nth-child(4n+3) { --rot: 1deg; --ty: 0px; z-index: 3; }
#spx-home .spx-pass:nth-child(4n+4) { --rot: 3deg; --ty: 16px; z-index: 4; }
#spx-home .spx-pass + .spx-pass { margin-inline-start: -18px; }
#spx-home .spx-pass:nth-child(4n+1) { margin-inline-start: 0; }
/* البطاقة التالية تغطي طرف البطاقة السابقة، فنبعد المحتوى عن هذا الطرف */
#spx-home .spx-pass:not(:nth-child(4n)):not(:last-child) { padding-inline-end: 38px; }

#spx-home .spx-pass:hover,
#spx-home .spx-pass:focus-visible {
  z-index: 6;
  --rot: 0deg;
  --ty: -14px;
  box-shadow: 0 46px 80px -36px rgba(5, 7, 13, .6), inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* لمعة تتبع المؤشر */
#spx-home .spx-pass::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--gxp) var(--gyp), rgba(255, 255, 255, .16), transparent 45%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#spx-home .spx-pass:hover::after { opacity: 1; }

/* ألوان البطاقات */
#spx-home .spx-pass--blue {
  --pc-ink: #0f4ea3;
  --pass-bg: linear-gradient(160deg, #3a8cf2 0%, #1d77e5 46%, #145bbf 100%);
  --pass-glow: radial-gradient(90% 60% at 15% 0%, rgba(255, 255, 255, .22), transparent 60%);
}
#spx-home .spx-pass--ink {
  --pc-ink: #0b1020;
  --pass-bg: linear-gradient(160deg, #151d33 0%, #0b1020 55%, #05070d 100%);
  --pass-glow: radial-gradient(80% 55% at 85% 0%, rgba(29, 119, 229, .45), transparent 65%);
}
#spx-home .spx-pass--red {
  --pc-ink: #b3123a;
  --pass-bg: linear-gradient(160deg, #ff4a6d 0%, #f23055 48%, #cf1a42 100%);
  --pass-glow: radial-gradient(90% 60% at 15% 0%, rgba(255, 255, 255, .2), transparent 60%);
}
#spx-home .spx-pass--night {
  --pc-ink: #9e0e2e;
  --pass-bg: linear-gradient(170deg, #0a1024 0%, #060915 70%);
  --pass-glow: radial-gradient(85% 55% at 20% 0%, rgba(242, 47, 87, .42), transparent 62%), radial-gradient(70% 45% at 100% 100%, rgba(31, 120, 229, .28), transparent 65%);
}

#spx-home .spx-pass > * { position: relative; z-index: 2; }

#spx-home .spx-pass__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

#spx-home .spx-pass__kind { display: grid; line-height: 1.25; }
#spx-home .spx-pass__kind strong { font: 700 14px/1.35 var(--f-d); }
#spx-home .spx-pass__kind small {
  color: rgba(255, 255, 255, .62);
  font: 600 9.5px/1.4 var(--f-b);
  letter-spacing: .22em;
  direction: ltr;
  text-align: right;
}

#spx-home .spx-pass__brand {
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font: 700 10px/1 var(--f-d);
  letter-spacing: .04em;
}

#spx-home .spx-pass__art {
  display: grid;
  height: 132px;
  margin: 10px 0 4px;
  place-items: center start;
}
#spx-home .spx-pass__art img {
  width: auto;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .28));
  transition: transform .9s var(--spring);
}
#spx-home .spx-pass:hover .spx-pass__art img { transform: translateY(-6px) rotate(-4deg) scale(1.04); }

#spx-home .spx-pass__ic {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .4), 0 18px 30px -16px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#spx-home .spx-pass__ic svg { width: 34px; height: 34px; }
#spx-home .spx-pass__art.has-img .spx-pass__ic { display: none; }

#spx-home .spx-pass__title {
  margin-top: 6px;
  font: 700 clamp(19px, 1.55vw, 22px)/1.45 var(--f-d);
  text-wrap: balance;
}

#spx-home .spx-pass__line {
  margin-top: 6px;
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
  line-height: 1.75;
}

#spx-home .spx-pass__note {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--pc-ink);
  background: #fff;
  font-size: 12.5px;
  line-height: 1.4;
}
#spx-home .spx-pass__note strong { font-family: var(--f-d); }

#spx-home .spx-pass__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
#spx-home .spx-pass__fields dt { color: rgba(255, 255, 255, .6); font-size: 11.5px; line-height: 1.4; }
#spx-home .spx-pass__fields dd { font: 700 14.5px/1.5 var(--f-d); }

#spx-home .spx-pass__code {
  display: block;
  height: 20px;
  margin-top: 14px;
  color: #fff;
  opacity: .28;
}
#spx-home .spx-pass__code svg { width: 100%; height: 20px; }

/* خط القطع مع الثقبين */
#spx-home .spx-pass__cut {
  height: 0;
  margin: auto -20px 0;
  padding-top: 16px;
  border-bottom: 1.5px dashed rgba(255, 255, 255, .28);
}
#spx-home .spx-pass__cut::before,
#spx-home .spx-pass__cut::after {
  position: absolute;
  bottom: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  content: "";
}
#spx-home .spx-pass__cut::before { right: -11px; }
#spx-home .spx-pass__cut::after { left: -11px; }

#spx-home .spx-pass__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}

#spx-home .spx-pass__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#spx-home .spx-pass__price strong { font: 800 26px/1 var(--f-d); font-variant-numeric: tabular-nums; }
#spx-home .spx-pass__price small { color: rgba(255, 255, 255, .72); font-size: 12px; }
#spx-home .spx-pass__price del { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
#spx-home .spx-pass__price .is-free { font-size: 24px; }

#spx-home .spx-pass__cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--pc-ink);
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
  transition: gap .4s var(--ease), padding .4s var(--ease);
}
#spx-home .spx-pass__cta strong { font-family: var(--f-d); }
#spx-home .spx-pass__cta svg { width: 17px; height: 17px; flex: none; }
#spx-home .spx-pass:hover .spx-pass__cta { gap: 12px; padding-inline-end: 12px; }

@media (max-width: 1100px) {
  #spx-home .spx-wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  #spx-home .spx-pass + .spx-pass,
  #spx-home .spx-pass:nth-child(4n+1) { margin-inline-start: 0; }
  #spx-home .spx-pass:not(:nth-child(4n)):not(:last-child) { padding-inline-end: 20px; }
  #spx-home .spx-pass:nth-child(odd) { --rot: -1.2deg; --ty: 0px; }
  #spx-home .spx-pass:nth-child(even) { --rot: 1.2deg; --ty: 10px; }
  #spx-home .spx-pass:hover,
  #spx-home .spx-pass:focus-visible { --rot: 0deg; --ty: -10px; }
}

/* الجوال: البطاقات مكدسة مثل المحفظة ثم تنفرد عند الوصول للقسم */
@media (max-width: 700px) {
  #spx-home .spx-wallet { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 4px; }
  #spx-home .spx-pass,
  #spx-home .spx-pass:nth-child(n) { --rot: 0deg; --ty: 0px; min-height: 0; }
  #spx-home .spx-pass__art { height: 112px; }
  #spx-home .spx-pass__art img { height: 112px; }
  #spx-home .spx-wallet.is-stacked .spx-pass { transition: transform .95s var(--ease) calc(var(--i, 0) * .11s), box-shadow .7s var(--ease); }
  #spx-home .spx-wallet.is-stacked:not(.is-open) .spx-pass { --sy: var(--stack-y, 0px); }
}

/* =====================================================================
   REVEAL (يعمل فقط بعد جاهزية السكربت حتى لا يختفي المحتوى أبداً)
   ===================================================================== */
/* الظهور يستخدم translate وscale المستقلين حتى لا يتعارض مع إمالة البطاقات */
#spx-home.spx-ready [data-spx-reveal]:not([data-spx-split]) {
  opacity: 0;
  filter: blur(12px);
  translate: 0 22px;
  scale: .985;
  transition:
    opacity 1s var(--ease) var(--d, 0s),
    filter 1s var(--ease) var(--d, 0s),
    translate 1.1s var(--ease) var(--d, 0s),
    scale 1.1s var(--ease) var(--d, 0s);
}

#spx-home.spx-ready [data-spx-reveal]:not([data-spx-split]).is-in { opacity: 1; filter: none; translate: none; scale: none; }

#spx-home.spx-ready .spx-noti[data-spx-reveal] {
  translate: 0 -28px;
  scale: .94;
  transition:
    opacity .9s var(--ease) var(--d, 0s),
    filter .9s var(--ease) var(--d, 0s),
    translate 1s var(--spring) var(--d, 0s),
    scale 1s var(--spring) var(--d, 0s),
    transform .5s var(--ease),
    background .4s ease;
}

#spx-home .spx-noti__ic.has-img { background: none; box-shadow: none; }

#spx-home.spx-ready .spx-w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(.3em);
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--wd, 0) * 55ms + var(--d, 0s));
}

#spx-home.spx-ready .is-in .spx-w,
#spx-home.spx-ready .is-in.spx-w { opacity: 1; filter: blur(0); transform: none; }

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes spx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.12); } }
@keyframes spx-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes spx-spin { to { transform: rotate(360deg); } }
@keyframes spx-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes spx-fill { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes spx-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes spx-glint { 0%, 60% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
@keyframes spx-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.25); } 86% { transform: scale(.95); } }
@keyframes spx-caret { 50% { opacity: 0; } }
@keyframes spx-drop { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes spx-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } }
@keyframes spx-ping-lg { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 80%, 100% { box-shadow: 0 0 0 22px rgba(52, 199, 89, 0); } }
@keyframes spx-ring { 0%, 50%, 100% { transform: rotate(0); } 8%, 24%, 40% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(14deg); } }
@keyframes spx-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes spx-dots { from { width: 0; } to { width: 1.1em; } }
@keyframes spx-frost { 0% { background-position: 120% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }
@keyframes spx-marquee { to { transform: translateX(50%); } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  #spx-home .spx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spx-home .spx-card { min-height: 520px; }
}

@media (max-width: 900px) {
  #spx-home .spx-hero { min-height: auto; padding-bottom: 130px; }
  #spx-home .spx-hero__grid,
  #spx-home .spx-perks .spx-wrap,
  #spx-home .spx-founder__grid,
  #spx-home .spx-consult .spx-wrap,
  #spx-home .spx-faq .spx-wrap { grid-template-columns: minmax(0, 1fr); }
  #spx-home .spx-stage-wrap { margin-top: 12px; }
  #spx-home .spx-scrollcue { display: none; }
  #spx-home .spx-proof__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spx-home .spx-proof__item:nth-child(3)::before { display: none; }
  #spx-home .spx-proof__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  #spx-home .spx-faq__intro { position: static; }
  #spx-home .spx-call-wrap { margin-top: 10px; }
}

@media (max-width: 700px) {
  #spx-home .spx-wrap { width: min(100% - 32px, 1240px); }
  #spx-home .spx-sec { padding-block: 76px; }
  #spx-home .spx-hero { padding-top: calc(var(--spx-hh, 72px) + 40px); padding-bottom: 118px; }
  #spx-home .spx-courses { padding-top: 92px; }
  #spx-home .spx-final { padding-block: 96px 110px; }
  #spx-home .spx-stage-wrap { --k: .62; }
  #spx-home .spx-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #spx-home .spx-actions .spx-btn { width: 100%; }
  #spx-home .spx-stories { justify-content: space-between; gap: 6px; }
  #spx-home .spx-story { width: 68px; }
  #spx-home .spx-story__ring { width: 62px; height: 62px; }
  #spx-home .spx-proof { margin-top: -64px; }
  #spx-home .spx-proof__item { min-height: 124px; padding: 20px 16px; }
  #spx-home .spx-proof__lbl { font-size: 12px; }
  #spx-home .spx-method { display: none; }

  #spx-home .spx-cards {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding: 6px 16px 18px;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: none;
  }

  #spx-home .spx-cards::-webkit-scrollbar { display: none; }
  #spx-home .spx-card { min-height: 500px; flex: 0 0 82%; scroll-snap-align: center; transform: none; }

  #spx-home .spx-swipe { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
  #spx-home .spx-swipe i { width: 18px; height: 4px; border-radius: 4px; background: var(--line); transition: width .4s var(--ease), background .3s ease; }
  #spx-home .spx-swipe i.is-on { width: 34px; background: var(--ink); }

  #spx-home .spx-noti { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 15px; border-radius: 22px; }
  #spx-home .spx-noti__ic { width: 40px; height: 40px; border-radius: 11px; }
  #spx-home .spx-verified { left: 8px; bottom: 16px; }
  #spx-home .spx-counts span { font-size: 11.5px; }
  #spx-home .spx-brands__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #spx-home .spx-marquee { margin-inline: -16px; }
  #spx-home .spx-call { padding: 30px 20px 24px; border-radius: 34px; }
  #spx-home .spx-call-wrap > img.spx-hour { z-index: 2; width: 78px; top: -46px; left: 6px; rotate: -14deg; }
  #spx-home .spx-final .spx-capsule-wrap { margin-top: 36px; }
}

@media (hover: none) {
  #spx-home .spx-card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #spx-home *,
  #spx-home *::before,
  #spx-home *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  #spx-home.spx-ready [data-spx-reveal],
  #spx-home.spx-ready .spx-w { opacity: 1 !important; filter: none !important; transform: none !important; }
  #spx-home .spx-frag { translate: none !important; scale: none !important; opacity: 1 !important; }
  .spx-gh { transition: none !important; }
}

/* =====================================================================
   3) SNAP COURSE PAGE — صفحة دورة سناب فقط (داخل #spx-snap)
   ===================================================================== */
html.spx-snap-page body { padding-top: 0 !important; }
html.spx-snap-page,
html.spx-snap-page body { overflow-x: clip; }
.spx-sn-hide { display: none !important; }
.spx-sn-float { transition: transform .6s cubic-bezier(.34, 1.45, .64, 1) !important; }
html.spx-sn-sticky-on .spx-sn-float { transform: translateY(-78px) !important; }

#spx-snap {
  --snap: #fffc00;
  --snap-2: #fff35c;
  --snap-deep: #f4e400;
  --ink: #0a0a0a;
  --ink-2: #141414;
  --ink-3: #1d1d1f;
  --paper: #ffffff;
  --mist: #f4f4f2;
  --line: rgba(10, 10, 10, .1);
  --line-d: rgba(255, 255, 255, .12);
  --muted: #5f5f5f;
  --muted-d: rgba(255, 255, 255, .62);
  --c-blue: #0eadff;
  --c-red: #f23c57;
  --c-purple: #a05dcd;
  --c-green: #20c06a;
  --gold: #e9c46a;
  --f-d: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);

  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--f-b);
  font-size: 16px;
  line-height: 1.8;
  text-align: right;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

#spx-snap *,
#spx-snap *::before,
#spx-snap *::after { box-sizing: border-box; }
#spx-snap :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) { margin: 0; padding: 0; }
#spx-snap :where(ul, ol) { list-style: none; }
#spx-snap a { color: inherit; text-decoration: none; }
#spx-snap img,
#spx-snap svg,
#spx-snap video { display: block; max-width: 100%; }
#spx-snap button { margin: 0; padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
#spx-snap bdi { unicode-bidi: isolate; }
#spx-snap [hidden] { display: none !important; }
#spx-snap :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; border-radius: 14px; }
#spx-snap [data-sn-ic] { display: inline-grid; place-items: center; font-style: normal; }
#spx-snap [data-sn-ic] svg { width: 1em; height: 1em; }

#spx-snap .sn-wrap { position: relative; z-index: 2; width: min(100% - 32px, 1200px); margin-inline: auto; }
#spx-snap .sn-sec { position: relative; padding-block: clamp(80px, 10vw, 140px); }

#spx-snap [data-spx-tone="dark"] { color: #f4f4f4; background: var(--ink); }
#spx-snap [data-spx-tone="light"] { background: var(--mist); }
#spx-snap [data-spx-tone="snap"] { background: var(--snap); }

/* ---------- typography ---------- */
#spx-snap .sn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--snap);
  font: 700 13.5px/1.4 var(--f-b);
}

#spx-snap .sn-eyebrow::before {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}

#spx-snap .sn-eyebrow--ink,
#spx-snap [data-spx-tone="light"] .sn-eyebrow { color: var(--ink); }
#spx-snap [data-spx-tone="light"] .sn-eyebrow::before { background: var(--snap); box-shadow: 0 0 0 1.5px var(--ink); }

#spx-snap .sn-h2 {
  margin-top: 16px;
  font: 800 clamp(30px, 4.2vw, 56px)/1.32 var(--f-d);
  text-wrap: balance;
}

#spx-snap .sn-h2--wide { max-width: 22ch; }
#spx-snap .sn-h2--xl { font-size: clamp(38px, 6.4vw, 92px); line-height: 1.2; }

#spx-snap .sn-p {
  max-width: 58ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.95;
}

#spx-snap [data-spx-tone="dark"] .sn-p { color: var(--muted-d); }
#spx-snap [data-spx-tone="snap"] .sn-p { color: rgba(10, 10, 10, .74); }

/* ---------- buttons ---------- */
#spx-snap .sn-btn {
  position: relative;
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 0 26px;
  border-radius: 999px;
  font: 800 15.5px/1 var(--f-d);
  white-space: nowrap;
  isolation: isolate;
  transition: transform .5s var(--spring), box-shadow .4s ease, background .3s ease, color .3s ease;
}

#spx-snap .sn-btn:active { transform: scale(.97); }
#spx-snap .sn-btn [data-sn-ic] { font-size: 19px; transition: transform .45s var(--ease); }
#spx-snap .sn-btn:hover [data-sn-ic] { transform: translateX(-5px); }

#spx-snap .sn-btn--ink {
  color: var(--snap);
  background: var(--ink);
  box-shadow: 0 18px 40px -18px rgba(10, 10, 10, .65);
}

#spx-snap .sn-btn--ink::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 252, 0, .28) 50%, transparent 70%);
  content: "";
  transform: translateX(120%);
  animation: sn-sheen 4.5s var(--ease) 2s infinite;
}

#spx-snap .sn-btn--line { border: 2px solid var(--ink); color: var(--ink); }
#spx-snap .sn-btn--line:hover { color: var(--snap); background: var(--ink); }
#spx-snap .sn-btn--ghost { border: 1px solid var(--line-d); color: #fff; background: rgba(255, 255, 255, .06); }
#spx-snap .sn-btn--full { width: 100%; }
#spx-snap .sn-btn.is-busy { pointer-events: none; opacity: .75; }
#spx-snap .sn-btn.is-busy [data-sn-ic] { animation: sn-spin .9s linear infinite; }

/* =====================================================================
   STORY BARS (شريط التقدم بأسلوب القصص)
   ===================================================================== */
#spx-snap .sn-bars {
  position: fixed;
  z-index: 1001;
  top: max(3px, env(safe-area-inset-top, 0px));
  right: 18px;
  left: 18px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

#spx-snap .sn-bars.is-on { opacity: 1; }

#spx-snap .sn-bars i {
  position: relative;
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(10, 10, 10, .18);
}

#spx-snap .sn-bars i::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  content: "";
  transform: scaleX(var(--p, 0));
  transform-origin: right;
}

#spx-snap .sn-bars.is-dark i { background: rgba(255, 255, 255, .22); }
#spx-snap .sn-bars.is-dark i::after { background: #fff; }

/* =====================================================================
   HERO — الكاميرا
   ===================================================================== */
#spx-snap .sn-hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--spx-hh, 72px) + 44px) 0 0;
  background:
    radial-gradient(70% 55% at 75% 35%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(244, 228, 0, .9), transparent 70%),
    var(--snap);
}

#spx-snap .sn-hero__grain,
#spx-snap .sn-final::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  content: "";
  pointer-events: none;
}

#spx-snap .sn-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}

#spx-snap .sn-hero__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

#spx-snap .sn-ghostmark {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
}

#spx-snap .sn-ghostmark__logo { position: relative; display: block; width: 38px; animation: sn-ghostin .8s var(--spring) .15s both; }

/* إطار التركيز يضيق حول الشعار ثم يثبت */
#spx-snap .sn-ghostmark__frame { position: absolute; inset: 0; animation: sn-focus 1.2s var(--spring) .45s both; }

#spx-snap .sn-ghostmark__frame i {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--ink);
}

#spx-snap .sn-ghostmark__frame i:nth-child(1) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 6px; }
#spx-snap .sn-ghostmark__frame i:nth-child(2) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 6px; }
#spx-snap .sn-ghostmark__frame i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }
#spx-snap .sn-ghostmark__frame i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 6px; }

#spx-snap .sn-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

#spx-snap .sn-kicker__new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--snap);
  background: var(--ink);
  font: 700 13px/1 var(--f-b);
}

#spx-snap .sn-kicker__new i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
  animation: sn-rec 1.6s ease-in-out infinite;
}

#spx-snap .sn-kicker__meta { font: 700 14px/1 var(--f-b); }

#spx-snap .sn-h1 {
  margin-top: 22px;
  font: 900 clamp(40px, 5.6vw, 84px)/1.2 var(--f-d);
  letter-spacing: -.01em;
  text-wrap: balance;
}

#spx-snap .sn-h1 > span { display: block; }
#spx-snap .sn-h1__b { margin-top: 6px; font-size: .56em; font-weight: 700; line-height: 1.35; }

/* شريط الكابشن الكلاسيكي في سناب */
#spx-snap .sn-mark {
  display: inline-block;
  padding: .02em .32em .1em;
  color: #fff;
  background: rgba(10, 10, 10, .9);
  rotate: -2deg;
  white-space: nowrap;
}

#spx-snap .sn-lead { max-width: 52ch; margin-top: 22px; color: rgba(10, 10, 10, .78); font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.95; }

#spx-snap .sn-method {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font: 800 clamp(20px, 2vw, 26px)/1 var(--f-d);
}

#spx-snap .sn-method i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

#spx-snap .sn-buybox { margin-top: 30px; }

#spx-snap .sn-price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
#spx-snap .sn-price strong { font: 900 clamp(52px, 5vw, 68px)/.9 var(--f-d); font-variant-numeric: tabular-nums; }
#spx-snap .sn-price > span { display: grid; padding-bottom: 6px; font: 800 17px/1.1 var(--f-d); }
#spx-snap .sn-price > span small { color: rgba(10, 10, 10, .6); font: 600 12px/1.4 var(--f-b); }

#spx-snap .sn-price del {
  align-self: center;
  padding: 4px 12px;
  border: 1.5px solid rgba(10, 10, 10, .25);
  border-radius: 999px;
  color: rgba(10, 10, 10, .55);
  font: 700 14px/1.2 var(--f-b);
}

#spx-snap .sn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

#spx-snap .sn-micro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(10, 10, 10, .72);
  font-size: 13.5px;
  font-weight: 600;
}

#spx-snap .sn-micro [data-sn-ic] { font-size: 17px; }

/* camera phone */
#spx-snap .sn-cam-wrap { position: relative; display: grid; place-items: center; padding-block: 8px 20px; }

#spx-snap .sn-cam {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 9 / 18.6;
  padding: 9px;
  border-radius: 52px;
  background: linear-gradient(150deg, #2b2b2b, #050505 55%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .14),
    0 60px 90px -40px rgba(60, 50, 0, .55),
    0 30px 40px -30px rgba(0, 0, 0, .5);
  rotate: -3deg;
  translate: 0 var(--camY, 0px);
  transition: rotate 1.2s var(--ease);
}

#spx-snap .sn-cam:hover { rotate: 0deg; }

#spx-snap .sn-cam__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background:
    radial-gradient(60% 40% at 50% 46%, rgba(255, 252, 0, .38), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(255, 140, 0, .22), transparent 70%),
    linear-gradient(180deg, #1f1d14, #0b0b08 70%);
  isolation: isolate;
}

#spx-snap .sn-cam__glow {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg at 50% 46%, transparent, rgba(255, 252, 0, .14), transparent 30%, rgba(255, 252, 0, .1), transparent 60%);
  animation: sn-spin 14s linear infinite;
}

/* فتحة العدسة عند الدخول */
#spx-snap .sn-cam__iris {
  position: absolute;
  z-index: 9;
  inset: 9px;
  border-radius: 44px;
  background: #050505;
  clip-path: circle(0% at 50% 46%);
  pointer-events: none;
}

/* تغطي الشاشة حتى تظهر، ثم تنفتح كغالق الكاميرا */
#spx-snap.sn-ready .sn-cam-wrap:not(.is-in) .sn-cam__iris { clip-path: circle(150% at 50% 46%); }
#spx-snap.sn-ready .sn-cam-wrap.is-in .sn-cam__iris { animation: sn-iris 1.5s var(--ease) .35s both; }

#spx-snap .sn-cam__top {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#spx-snap .sn-cam__sp { flex: 1; }

#spx-snap .sn-cam__avatar {
  width: 40px;
  height: 40px;
  padding: 2.5px;
  border-radius: 50%;
  background: var(--snap);
}

#spx-snap .sn-cam__avatar img { width: 100%; height: 100%; border: 2px solid #111; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }

#spx-snap .sn-cam__icon,
#spx-snap .sn-cam__tools span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 18px;
}

#spx-snap .sn-cam__tools {
  position: absolute;
  z-index: 3;
  top: 72px;
  left: 14px;
  display: grid;
  gap: 10px;
  padding: 8px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
}

#spx-snap .sn-cam__tools span { width: 34px; height: 34px; background: transparent; font-size: 19px; }

#spx-snap .sn-cam__subject {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 74%;
  place-items: center;
  transform: translate(-50%, -54%);
}

#spx-snap .sn-cam__lens { position: relative; display: grid; width: 100%; aspect-ratio: 1; place-items: center; }
#spx-snap .sn-cam__lens > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); animation: sn-floaty 7s ease-in-out infinite; }

#spx-snap .sn-cam__lens:not(.has-img)::before {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0b0b08 0 22%, transparent 23%),
    conic-gradient(from 20deg, #fffc00, #fff8a0, #f2dd00, #fffc00, #e8d400, #fffc00);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .25), 0 0 80px rgba(255, 252, 0, .4);
  content: "";
  animation: sn-spin 16s linear infinite;
}


#spx-snap .sn-cam__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 600 11px/1 var(--f-b);
}

#spx-snap .sn-cam__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--snap); }

#spx-snap .sn-cam__chip {
  position: absolute;
  z-index: 10;
  display: grid;
  gap: 2px;
  padding: 12px 15px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .4);
  animation: sn-floaty 6s ease-in-out infinite;
}

#spx-snap .sn-cam__chip b { font: 900 22px/1 var(--f-d); direction: ltr; text-align: right; }
#spx-snap .sn-cam__chip small { color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
#spx-snap .sn-cam__chip--a { top: 20%; right: -40px; }
#spx-snap .sn-cam__chip--b { bottom: 32%; left: -44px; animation-delay: -3s; }

#spx-snap .sn-cam__lenses {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 30px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#spx-snap .sn-lensdot {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  color: #111;
  background: rgba(255, 255, 255, .9);
  font-size: 18px;
  transition: transform .6s var(--spring), opacity .6s ease;
}

#spx-snap .sn-lensdot:nth-child(1),
#spx-snap .sn-lensdot:nth-child(7) { opacity: .45; transform: scale(.8); }

#spx-snap .sn-lensdot.is-hot { color: #111; background: var(--snap); transform: scale(1.08); }

#spx-snap .sn-shutter {
  display: grid;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .15);
  animation: sn-shutter 5s var(--ease) infinite;
}

#spx-snap .sn-shutter span { width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: sn-shutter-core 5s var(--ease) infinite; }

#spx-snap .sn-cam__flash {
  position: absolute;
  z-index: 8;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: sn-flash 5s ease-out infinite;
}

/* proof row */
#spx-snap .sn-proof { position: relative; z-index: 2; margin-top: clamp(24px, 4vw, 48px); border-top: 1.5px solid rgba(10, 10, 10, .12); }
#spx-snap .sn-proof__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#spx-snap .sn-proof__row > div { display: grid; gap: 2px; padding: 22px 0; text-align: center; }
#spx-snap .sn-proof__row > div + div { border-inline-start: 1.5px solid rgba(10, 10, 10, .12); }
#spx-snap .sn-proof__row b { font: 900 clamp(20px, 2.2vw, 30px)/1.2 var(--f-d); }
#spx-snap .sn-proof__row span { color: rgba(10, 10, 10, .66); font-size: 13px; font-weight: 600; }

/* =====================================================================
   TICKER
   ===================================================================== */
#spx-snap .sn-ticker { overflow: hidden; padding-block: 18px; }

#spx-snap .sn-ticker__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: sn-marquee 32s linear infinite;
}

#spx-snap .sn-ticker__track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-inline-start: 26px;
  color: var(--snap);
  font: 800 clamp(18px, 2vw, 24px)/1 var(--f-d);
  white-space: nowrap;
}

#spx-snap .sn-ticker__track span::after {
  width: 10px;
  height: 10px;
  border: 2px solid var(--snap);
  border-radius: 3px;
  content: "";
  rotate: 45deg;
}

/* =====================================================================
   VIDEO
   ===================================================================== */
#spx-snap .sn-video__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

#spx-snap .sn-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 30px;
  background:
    var(--poster, radial-gradient(60% 70% at 50% 45%, rgba(255, 252, 0, .2), transparent 70%)) center / cover no-repeat,
    #0d0d0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 100px -40px rgba(255, 252, 0, .28);
  isolation: isolate;
}

#spx-snap .sn-player::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 28%, transparent 62%, rgba(0, 0, 0, .55));
  content: "";
  pointer-events: none;
  transition: opacity .5s ease;
}

#spx-snap .sn-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
#spx-snap .sn-player.is-playing video { opacity: 1; }
#spx-snap .sn-player.is-playing::after { opacity: .3; }

#spx-snap .sn-player__bars { position: absolute; z-index: 3; top: 14px; right: 16px; left: 16px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .3); }
#spx-snap .sn-player__bars i { display: block; height: 100%; background: #fff; transform: scaleX(var(--vp, 0)); transform-origin: right; }

#spx-snap .sn-player__head {
  position: absolute;
  z-index: 3;
  top: 28px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

#spx-snap .sn-player__av { width: 38px; height: 38px; padding: 2px; border-radius: 50%; background: var(--snap); }
#spx-snap .sn-player__av img { width: 100%; height: 100%; border: 2px solid #000; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
#spx-snap .sn-player__head b { display: block; font: 700 14px/1.2 var(--f-d); }
#spx-snap .sn-player__head small { color: rgba(255, 255, 255, .75); font-size: 11.5px; }

#spx-snap .sn-player__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--snap);
  box-shadow: 0 0 0 0 rgba(255, 252, 0, .6);
  font-size: 30px;
  transform: translate(-50%, -50%);
  animation: sn-ping 2.4s ease-out infinite;
  transition: transform .5s var(--spring), opacity .3s ease;
}

#spx-snap .sn-player__play:hover { transform: translate(-50%, -50%) scale(1.08); }
#spx-snap .sn-player.is-playing .sn-player__play { opacity: 0; pointer-events: none; }

#spx-snap .sn-player__swipe {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: 14px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  font: 700 12.5px/1.2 var(--f-d);
  transform: translateX(50%);
}

#spx-snap .sn-player__swipe [data-sn-ic] { font-size: 22px; animation: sn-swipe 1.8s var(--ease) infinite; }
#spx-snap .sn-player__swipe span { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* =====================================================================
   CHAT — المشكلة والحل
   ===================================================================== */
#spx-snap .sn-chat__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

#spx-snap .sn-chat__intro { position: sticky; top: calc(var(--spx-hh, 72px) + 40px); }
#spx-snap .sn-chat__img { display: block; width: 180px; margin-top: 34px; }
#spx-snap .sn-chat__img:not(.has-img) { display: none; }
#spx-snap .sn-chat__img img { width: 100%; animation: sn-floaty 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(120, 100, 0, .3)); }

#spx-snap .sn-phone {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .35);
}

#spx-snap .sn-phone__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

#spx-snap .sn-phone__back,
#spx-snap .sn-phone__ic { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--mist); font-size: 18px; }
#spx-snap .sn-phone__av { width: 38px; height: 38px; padding: 2px; border-radius: 50%; background: var(--snap); }
#spx-snap .sn-phone__av img { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
#spx-snap .sn-phone__who { display: grid; flex: 1; line-height: 1.3; }
#spx-snap .sn-phone__who b { font: 700 15px/1.3 var(--f-d); }
#spx-snap .sn-phone__who small { color: var(--muted); font-size: 12px; }

#spx-snap .sn-phone__body { display: grid; gap: 16px; padding: 20px 18px 24px; }

#spx-snap .sn-day { justify-self: center; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

#spx-snap .sn-msg { display: grid; gap: 4px; }
#spx-snap .sn-msg__who { font: 800 12px/1 var(--f-d); letter-spacing: .02em; }
#spx-snap .sn-msg--me .sn-msg__who { color: var(--c-red); }
#spx-snap .sn-msg--them .sn-msg__who,
#spx-snap .sn-msg__who--them { color: var(--c-blue); }

#spx-snap .sn-msg__body {
  padding: 2px 12px 2px 0;
  border-inline-start: 3px solid var(--c-red);
  color: #222;
  font-size: 15px;
  line-height: 1.85;
}

#spx-snap .sn-msg__body > b { display: block; color: var(--ink); font: 700 15.5px/1.6 var(--f-d); }
#spx-snap .sn-msg--them .sn-msg__body { border-color: var(--c-blue); }

#spx-snap .sn-steps { display: grid; gap: 10px; margin-top: 12px; }

#spx-snap .sn-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--mist);
  font-size: 14px;
  line-height: 1.7;
}

#spx-snap .sn-steps li > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--snap);
  background: var(--ink);
  font: 800 13px/1 var(--f-d);
}

#spx-snap .sn-steps strong { display: block; color: var(--ink); font: 800 16px/1.4 var(--f-d); }

#spx-snap .sn-typing { display: flex; align-items: center; gap: 4px; height: 0; overflow: hidden; opacity: 0; transition: height .35s var(--ease), opacity .3s ease; }
#spx-snap .sn-typing .sn-msg__who { margin-inline-end: 6px; }
#spx-snap .sn-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); animation: sn-dot 1.1s ease-in-out infinite; }
#spx-snap .sn-typing i:nth-child(3) { animation-delay: .15s; }
#spx-snap .sn-typing i:nth-child(4) { animation-delay: .3s; }
#spx-snap .sn-typing.is-on { height: 22px; opacity: 1; }

#spx-snap .sn-phone__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--line);
}

#spx-snap .sn-phone__cam { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #fff; background: var(--c-blue); font-size: 18px; }
#spx-snap .sn-phone__input { flex: 1; padding: 10px 16px; border-radius: 999px; color: var(--muted); background: var(--mist); font-size: 13.5px; }

/* الرسائل تظهر تباعاً */
#spx-snap.sn-ready [data-sn-chatbox] [data-sn-msg] {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transform-origin: right bottom;
  transition: opacity .55s var(--ease), transform .7s var(--spring);
}

#spx-snap.sn-ready [data-sn-chatbox] [data-sn-msg].is-shown { opacity: 1; transform: none; }

/* =====================================================================
   BUILD — بطاقات Discover
   ===================================================================== */
#spx-snap .sn-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(32px, 4vw, 52px);
}

#spx-snap .sn-tile {
  position: relative;
  display: flex;
  min-height: 380px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 20px;
  border-radius: 26px;
  background: var(--tile-bg);
  isolation: isolate;
  transition: transform .7s var(--spring);
}

#spx-snap .sn-tile:hover { transform: translateY(-6px); }

#spx-snap .sn-tile::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55));
  content: "";
}

#spx-snap .sn-tile--1 { --tile-bg: radial-gradient(90% 60% at 50% 30%, #3a3a12, #121208 75%); }
#spx-snap .sn-tile--2 { --tile-bg: radial-gradient(90% 60% at 50% 30%, #ffffff, #e9e8e1 80%); color: var(--ink); }
#spx-snap .sn-tile--3 { --tile-bg: radial-gradient(90% 60% at 50% 30%, #2a2a2a, #0f0f0f 75%); }
#spx-snap .sn-tile--4 { --tile-bg: radial-gradient(90% 60% at 50% 30%, #ffffff, #e9e8e1 80%); color: var(--ink); }
#spx-snap .sn-tile--2::after,
#spx-snap .sn-tile--4::after { background: linear-gradient(180deg, transparent 45%, rgba(255, 252, 0, .22)); }

#spx-snap .sn-tile__n {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font: 800 12px/1 var(--f-d);
}

#spx-snap .sn-tile--2 .sn-tile__n,
#spx-snap .sn-tile--4 .sn-tile__n { background: rgba(10, 10, 10, .1); }

#spx-snap .sn-tile__art {
  position: absolute;
  top: 46px;
  right: 50%;
  display: grid;
  width: 64%;
  aspect-ratio: 1;
  place-items: center;
  transform: translateX(50%);
  transition: transform 1s var(--ease);
}

#spx-snap .sn-tile:hover .sn-tile__art { transform: translateX(50%) translateY(-8px) scale(1.04); }
#spx-snap .sn-tile__art > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .4)); }
#spx-snap .sn-tile__art.has-img > [data-sn-ic] { display: none; }

#spx-snap .sn-tile__art > [data-sn-ic] {
  display: grid;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 34%;
  color: var(--ink);
  background: linear-gradient(145deg, #fffef0, var(--snap) 60%, #e2cc00);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 30px 50px -20px rgba(0, 0, 0, .55);
  font-size: 46px;
}

#spx-snap .sn-tile--2 .sn-tile__art > [data-sn-ic],
#spx-snap .sn-tile--4 .sn-tile__art > [data-sn-ic] { color: var(--snap); background: linear-gradient(145deg, #333, #0a0a0a); }

#spx-snap .sn-tile h3 { position: relative; font: 800 20px/1.4 var(--f-d); }
#spx-snap .sn-tile p { position: relative; margin-top: 6px; opacity: .78; font-size: 14px; line-height: 1.75; }

#spx-snap .sn-fit {
  margin-top: 18px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line-d);
  border-radius: 28px;
  background: var(--ink-2);
}

#spx-snap .sn-fit__head { display: grid; gap: 4px; }
#spx-snap .sn-fit__head span { color: var(--snap); font-size: 13px; font-weight: 700; }
#spx-snap .sn-fit__head strong { font: 800 clamp(20px, 2vw, 26px)/1.4 var(--f-d); }
#spx-snap .sn-fit__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

#spx-snap .sn-fit__chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--snap);
  font: 700 14px/1.2 var(--f-d);
}

#spx-snap .sn-fit__chips [data-sn-ic] { font-size: 17px; }
#spx-snap .sn-fit p { max-width: 70ch; margin-top: 16px; color: var(--muted-d); font-size: 14px; line-height: 1.9; }

#spx-snap .sn-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  counter-reset: none;
}

#spx-snap .sn-flow li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--line-d);
  border-radius: 24px;
}

#spx-snap .sn-flow b { color: var(--snap); font: 800 13px/1 var(--f-d); }
#spx-snap .sn-flow strong { font: 800 18px/1.4 var(--f-d); }
#spx-snap .sn-flow span { color: var(--muted-d); font-size: 14px; line-height: 1.7; }

/* =====================================================================
   CURRICULUM — العدسات
   ===================================================================== */
#spx-snap .sn-curr__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
}

#spx-snap .sn-dur {
  position: relative;
  display: grid;
  min-width: 230px;
  gap: 2px;
  padding: 22px 24px 22px 90px;
  border-radius: 26px;
  color: #fff;
  background: var(--ink);
}

#spx-snap .sn-dur strong { color: var(--snap); font: 900 36px/1.1 var(--f-d); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
#spx-snap .sn-dur span { font-weight: 700; font-size: 14px; }
#spx-snap .sn-dur small { color: var(--muted-d); font-size: 12px; }
#spx-snap .sn-dur__img { position: absolute; top: -24px; left: 10px; width: 74px; rotate: -10deg; }
#spx-snap .sn-dur__img img { width: 100%; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5)); animation: sn-floaty 6s ease-in-out infinite; }
#spx-snap .sn-dur__img:not(.has-img) { display: none; }
#spx-snap .sn-dur:has(.sn-dur__img:not(.has-img)) { padding-left: 24px; }

#spx-snap .sn-intro-lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(10, 10, 10, .08);
}

#spx-snap .sn-intro-lesson__tag { padding: 6px 12px; border-radius: 999px; color: var(--snap); background: var(--ink); font: 700 12px/1 var(--f-d); }
#spx-snap .sn-intro-lesson strong { flex: 1; font: 700 15px/1.6 var(--f-d); }
#spx-snap .sn-intro-lesson b { font: 800 14px/1 var(--f-d); direction: ltr; }

#spx-snap .sn-lenses { margin-top: 18px; padding: clamp(18px, 3vw, 30px); border-radius: 34px; background: var(--ink); color: #fff; }
#spx-snap .sn-lenses__hint { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted-d); font-size: 13px; }
#spx-snap .sn-lenses__hint [data-sn-ic] { font-size: 16px; }

#spx-snap .sn-lenses__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 18px);
  margin-top: 16px;
  padding: 10px 4px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#spx-snap .sn-lenses__row::-webkit-scrollbar { display: none; }

#spx-snap .sn-lens { display: grid; flex: 0 0 auto; justify-items: center; gap: 8px; scroll-snap-align: center; }

#spx-snap .sn-lens__c {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 22px;
  transition: width .6s var(--spring), height .6s var(--spring), background .4s ease, color .4s ease, box-shadow .4s ease;
}

#spx-snap .sn-lens small { color: var(--muted-d); font: 700 11px/1 var(--f-d); transition: color .3s ease; }
#spx-snap .sn-lens:hover .sn-lens__c { background: rgba(255, 255, 255, .18); }

#spx-snap .sn-lens.is-on .sn-lens__c {
  width: 78px;
  height: 78px;
  color: var(--ink);
  background: var(--snap);
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px #fff, 0 16px 40px -10px rgba(255, 252, 0, .6);
  font-size: 28px;
}

#spx-snap .sn-lens.is-on small { color: var(--snap); }

#spx-snap .sn-phase {
  margin-top: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 26px;
  color: var(--ink);
  background: #fff;
}

#spx-snap .sn-phase__head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

#spx-snap .sn-phase__n {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: var(--ink);
  background: var(--snap);
  font: 900 17px/1 var(--f-d);
}

#spx-snap .sn-phase__head strong { display: block; font: 800 clamp(18px, 1.8vw, 22px)/1.4 var(--f-d); }
#spx-snap .sn-phase__head small { color: var(--muted); font-size: 13px; font-weight: 600; }

#spx-snap .sn-phase__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 14px; }

#spx-snap .sn-phase__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
}

#spx-snap .sn-phase__list li b { color: var(--muted); font: 700 12.5px/1 var(--f-d); font-variant-numeric: tabular-nums; }

#spx-snap .sn-phase.is-swap .sn-phase__head,
#spx-snap .sn-phase.is-swap .sn-phase__list { opacity: 0; transform: translateY(8px); }
#spx-snap .sn-phase__head,
#spx-snap .sn-phase__list { transition: opacity .35s ease, transform .5s var(--ease); }

#spx-snap .sn-curr__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .55);
}

#spx-snap .sn-curr__cta strong { display: block; font: 800 18px/1.5 var(--f-d); }
#spx-snap .sn-curr__cta > div span { color: rgba(10, 10, 10, .7); font-size: 14px; }

/* =====================================================================
   PERKS — قائمة الدردشات
   ===================================================================== */
#spx-snap .sn-perks__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

#spx-snap .sn-list { overflow: hidden; border-radius: 30px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(255, 252, 0, .2); }
#spx-snap .sn-list__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
#spx-snap .sn-list__head b { font: 800 20px/1 var(--f-d); }
#spx-snap .sn-list__head span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--mist); font-size: 17px; }

#spx-snap .sn-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  transition: background .3s ease;
}

#spx-snap .sn-row:hover { background: #fafafa; }

#spx-snap .sn-row__av {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
}

#spx-snap .sn-row__av--blue { background: var(--c-blue); }
#spx-snap .sn-row__av--purple { background: var(--c-purple); }
#spx-snap .sn-row__av--red { background: var(--c-red); }
#spx-snap .sn-row__av--ink { color: var(--snap); background: var(--ink); }
#spx-snap .sn-row__av--gold { color: #3a2a00; background: linear-gradient(140deg, #fff1c4, #e7c66f 50%, #b98a2b); }
#spx-snap .sn-row__av.has-img { background: none; }
#spx-snap .sn-row__av.has-img > [data-sn-ic] { display: none; }
#spx-snap .sn-row__av > img { width: 112%; max-width: none; height: 112%; object-fit: contain; }

#spx-snap .sn-row strong { display: block; font: 800 16px/1.45 var(--f-d); }
#spx-snap .sn-row p { margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
#spx-snap .sn-row small { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }

#spx-snap .sn-st { width: 11px; height: 11px; border-radius: 3px; }
#spx-snap .sn-st--blue { background: var(--c-blue); }
#spx-snap .sn-st--purple { background: var(--c-purple); }
#spx-snap .sn-st--red { background: var(--c-red); }
#spx-snap .sn-st--ink { background: var(--ink); }
#spx-snap .sn-st--gold { background: var(--gold); }

#spx-snap.sn-ready [data-sn-row] { opacity: 0; transform: translateX(-18px); transition: opacity .6s var(--ease), transform .8s var(--spring); }
#spx-snap.sn-ready .is-in [data-sn-row],
#spx-snap.sn-ready [data-sn-row].is-shown { opacity: 1; transform: none; }

/* =====================================================================
   COACH — البروفايل
   ===================================================================== */
#spx-snap .sn-coach__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

#spx-snap .sn-profile {
  position: relative;
  overflow: hidden;
  padding: 0 24px 24px;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .3);
  text-align: center;
}

#spx-snap .sn-profile__cover {
  height: 130px;
  margin: 0 -24px;
  background:
    radial-gradient(60% 80% at 70% 20%, rgba(255, 255, 255, .6), transparent 70%),
    var(--snap);
}

#spx-snap .sn-profile__ring {
  width: 148px;
  height: 148px;
  margin: -80px auto 0;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(var(--snap), #fff59a, var(--snap), #f1d800, var(--snap));
  box-shadow: 0 0 0 6px #fff;
}

#spx-snap .sn-profile__ring img { width: 100%; height: 100%; border: 4px solid #fff; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }

#spx-snap .sn-profile__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font: 900 26px/1.3 var(--f-d);
}

#spx-snap .sn-profile__name [data-sn-ic] { color: var(--c-blue); font-size: 22px; }
#spx-snap .sn-profile__role { color: var(--muted); font-size: 14px; }

#spx-snap .sn-profile__cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--mist);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

#spx-snap .sn-profile__cert [data-sn-ic] { font-size: 17px; }

#spx-snap .sn-profile__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

#spx-snap .sn-profile__stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 14px 10px;
  border-radius: 18px;
  background: var(--mist);
}

#spx-snap .sn-profile__stats dd { font: 900 26px/1.1 var(--f-d); direction: ltr; }
#spx-snap .sn-profile__stats dt { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; }

#spx-snap .sn-vs { margin-top: 26px; overflow: hidden; border-radius: 24px; background: #fff; }
#spx-snap .sn-vs__head,
#spx-snap .sn-vs__row { display: grid; grid-template-columns: 1fr 1fr; }
#spx-snap .sn-vs__head > *,
#spx-snap .sn-vs__row > * { padding: 14px 18px; }
#spx-snap .sn-vs__head span { color: var(--muted); font-size: 13px; font-weight: 700; }
#spx-snap .sn-vs__head strong { color: var(--ink); background: var(--snap); font: 800 13.5px/1.4 var(--f-d); }
#spx-snap .sn-vs__row { border-top: 1px solid var(--line); }
#spx-snap .sn-vs__row span { color: var(--muted); font-size: 14px; text-decoration: line-through; text-decoration-color: rgba(242, 60, 87, .5); }
#spx-snap .sn-vs__row strong { display: flex; align-items: center; gap: 8px; background: rgba(255, 252, 0, .16); font: 700 14.5px/1.5 var(--f-d); }
#spx-snap .sn-vs__row strong::before { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fffc00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; content: ""; }

/* =====================================================================
   REVIEWS — فقاعات المحادثة
   ===================================================================== */
#spx-snap .sn-reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 22px 40px; }
#spx-snap .sn-reviews__head > div:first-child { max-width: 720px; }

#spx-snap .sn-score { display: grid; gap: 6px; padding: 18px 22px; border-radius: 24px; background: var(--ink-3); }
#spx-snap .sn-score > div { display: flex; align-items: center; gap: 12px; }
#spx-snap .sn-score b { color: var(--snap); font: 900 40px/1 var(--f-d); }
#spx-snap .sn-score p { color: var(--muted-d); font-size: 13px; }

#spx-snap .sn-stars { display: inline-flex; gap: 3px; }
#spx-snap .sn-stars i { width: 16px; height: 16px; background: var(--snap); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

#spx-snap .sn-wall { columns: 3 300px; column-gap: 14px; margin-top: clamp(30px, 4vw, 48px); }

#spx-snap .sn-bub {
  display: inline-block;
  width: 100%;
  margin-bottom: 14px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: var(--ink-3);
  break-inside: avoid;
}

#spx-snap .sn-bub__top { display: flex; align-items: center; gap: 10px; }

#spx-snap .sn-bub__av {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--av, var(--snap));
  font: 800 15px/1 var(--f-d);
}

#spx-snap .sn-bub__name { display: grid; line-height: 1.35; }
#spx-snap .sn-bub__name b { color: var(--nc, var(--c-blue)); font: 800 14px/1.35 var(--f-d); }
#spx-snap .sn-bub__name small { color: var(--muted-d); font-size: 11.5px; }
#spx-snap .sn-bub .sn-stars { margin-inline-start: auto; }
#spx-snap .sn-bub .sn-stars i { width: 12px; height: 12px; }

#spx-snap .sn-bub p {
  margin-top: 12px;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--nc, var(--c-blue));
  color: rgba(255, 255, 255, .88);
  font-size: 14.5px;
  line-height: 1.9;
}

#spx-snap .sn-bub__ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--c-green); font-size: 11.5px; font-weight: 700; }
#spx-snap .sn-bub__ok [data-sn-ic] { font-size: 14px; }

#spx-snap .sn-bub { animation: sn-pop .7s var(--spring) both; animation-delay: var(--bd, 0s); }

#spx-snap .sn-wall__foot { display: grid; justify-items: center; gap: 14px; margin-top: 10px; text-align: center; }
#spx-snap .sn-wall__foot p { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-d); font-size: 13px; }
#spx-snap .sn-wall__foot [data-sn-ic] { color: var(--c-green); font-size: 16px; }

/* =====================================================================
   OFFER — التذكرة
   ===================================================================== */
#spx-snap .sn-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

#spx-snap .sn-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 26px; }

#spx-snap .sn-incl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 700 15px/1.6 var(--f-d);
}

#spx-snap .sn-incl li::before {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 2px;
  border-radius: 7px;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fffc00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  content: "";
}

#spx-snap .sn-ticket {
  position: relative;
  padding: 28px 26px 24px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 60px 100px -50px rgba(60, 50, 0, .55);
  -webkit-mask: radial-gradient(circle 18px at 0 64%, transparent 98%, #000) , radial-gradient(circle 18px at 100% 64%, transparent 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 18px at 0 64%, transparent 98%, #000), radial-gradient(circle 18px at 100% 64%, transparent 98%, #000);
  mask-composite: intersect;
}

#spx-snap .sn-ticket__img { position: absolute; z-index: 2; top: -46px; left: 14px; width: 138px; rotate: -12deg; pointer-events: none; animation: sn-floaty 7s ease-in-out infinite; }
#spx-snap .sn-ticket__img:not(.has-img) { display: none; }
#spx-snap .sn-ticket__img img { width: 100%; filter: drop-shadow(0 16px 22px rgba(40, 34, 0, .45)); }
#spx-snap .sn-ticket-wrap { position: relative; }
#spx-snap .sn-ticket-wrap:has(.sn-ticket__img.has-img) .sn-ticket__top { padding-left: 116px; }

#spx-snap .sn-ticket__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#spx-snap .sn-ticket__save { padding: 8px 14px; border-radius: 999px; color: #fff; background: var(--c-red); font: 800 13.5px/1 var(--f-d); }
#spx-snap .sn-ticket__old { color: var(--muted); font-size: 13px; }
#spx-snap .sn-ticket__price { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 20px; }
#spx-snap .sn-ticket__price strong { font: 900 clamp(64px, 7vw, 92px)/.85 var(--f-d); font-variant-numeric: tabular-nums; }
#spx-snap .sn-ticket__price span { display: grid; padding-bottom: 8px; font: 800 20px/1.1 var(--f-d); }
#spx-snap .sn-ticket__price small { color: var(--muted); font: 600 12px/1.4 var(--f-b); }
#spx-snap .sn-ticket .sn-btn--ink { min-height: 62px; font-size: 16.5px; }

#spx-snap .sn-ticket__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 14px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
#spx-snap .sn-ticket__trust span { display: inline-flex; align-items: center; gap: 5px; }
#spx-snap .sn-ticket__trust [data-sn-ic] { color: var(--ink); font-size: 15px; }

#spx-snap .sn-ticket__cut { height: 0; margin: 22px -26px 20px; border-top: 2px dashed rgba(10, 10, 10, .15); }

#spx-snap .sn-guarantee { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; }

#spx-snap .sn-guarantee__ic {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: #3a2a00;
  background: linear-gradient(140deg, #fff1c4, #e7c66f 50%, #b98a2b);
  font-size: 24px;
}

#spx-snap .sn-guarantee__ic.has-img { background: none; }
#spx-snap .sn-guarantee__ic.has-img > [data-sn-ic] { display: none; }
#spx-snap .sn-guarantee__ic > img { width: 120%; max-width: none; height: 120%; object-fit: contain; }
#spx-snap .sn-guarantee strong { display: block; font: 800 15px/1.5 var(--f-d); }
#spx-snap .sn-guarantee span { color: var(--muted); font-size: 13px; line-height: 1.75; }

/* =====================================================================
   FAQ
   ===================================================================== */
#spx-snap .sn-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

#spx-snap .sn-faq__intro { position: sticky; top: calc(var(--spx-hh, 72px) + 40px); }
#spx-snap .sn-qa { display: grid; gap: 10px; }
#spx-snap .sn-qa__item { overflow: hidden; border-radius: 22px; background: #fff; transition: box-shadow .4s ease; }
#spx-snap .sn-qa__item.is-open { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .25); }

#spx-snap .sn-qa__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  font: 700 clamp(15.5px, 1.25vw, 17px)/1.6 var(--f-d);
  text-align: right;
}

#spx-snap .sn-qa__q i {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--mist);
  transition: transform .5s var(--spring), background .3s ease;
}

#spx-snap .sn-qa__q i::before,
#spx-snap .sn-qa__q i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  content: "";
  transform: translate(-50%, -50%);
}

#spx-snap .sn-qa__q i::after { transform: translate(-50%, -50%) rotate(90deg); }
#spx-snap .sn-qa__item.is-open .sn-qa__q i { background: var(--snap); transform: rotate(45deg); }
#spx-snap .sn-qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
#spx-snap .sn-qa__item.is-open .sn-qa__a { grid-template-rows: 1fr; }
#spx-snap .sn-qa__a > div { min-height: 0; overflow: hidden; }
#spx-snap .sn-qa__a p { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.95; }

/* =====================================================================
   FINAL — زر الالتقاط
   ===================================================================== */
#spx-snap .sn-final { position: relative; overflow: clip; padding-block: clamp(100px, 13vw, 180px) clamp(130px, 14vw, 190px); text-align: center; }
#spx-snap .sn-final__in { display: grid; justify-items: center; }
#spx-snap .sn-final .sn-p { margin-inline: auto; }

#spx-snap .sn-final__rings { position: absolute; z-index: 0; top: 50%; left: 50%; width: 0; height: 0; }

#spx-snap .sn-final__rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70vmin;
  height: 70vmin;
  border: 2px solid rgba(10, 10, 10, .12);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  animation: sn-ring 6s var(--ease) infinite;
}

#spx-snap .sn-final__rings i:nth-child(2) { animation-delay: 2s; }
#spx-snap .sn-final__rings i:nth-child(3) { animation-delay: 4s; }

/* شعار الشبح: يُعرض كما هو تماماً، بلا ظل أو شفافية أو أي مؤثر (وفق إرشادات Snap)،
   وعلى الخلفيات الفاتحة والصفراء فقط لأن الملف هو نسخة الخلفيات الفاتحة */
#spx-snap .sn-final__brand {
  position: relative;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  margin-bottom: 22px;
}

#spx-snap .sn-final__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ink) 0 72%, rgba(10, 10, 10, .14) 72% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: sn-spin 9s linear infinite;
}

#spx-snap .sn-final__ghost { position: relative; display: block; width: 74px; animation: sn-ghostin .9s var(--spring) .2s both; }
#spx-snap .sn-final__ghost img,
#spx-snap .sn-ghostmark__logo img { display: block; width: 100%; height: auto; filter: none !important; opacity: 1 !important; }

#spx-snap .sn-capture { display: grid; justify-items: center; gap: 16px; margin-top: 40px; }

#spx-snap .sn-capture__ring {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 8px solid var(--ink);
  border-radius: 50%;
  transition: transform .5s var(--spring);
  animation: sn-breathe 2.6s ease-in-out infinite;
}

#spx-snap .sn-capture__ring span { width: 78px; height: 78px; border-radius: 50%; background: var(--ink); transition: transform .4s var(--spring); }
#spx-snap .sn-capture:hover .sn-capture__ring { transform: scale(1.06); }
#spx-snap .sn-capture:active .sn-capture__ring span { transform: scale(.82); }

#spx-snap .sn-capture__label {
  padding: 14px 24px;
  border-radius: 999px;
  color: var(--snap);
  background: var(--ink);
  font: 800 16.5px/1.2 var(--f-d);
}

#spx-snap .sn-final__note { display: block; margin-top: 18px; color: rgba(10, 10, 10, .66); font-size: 13.5px; font-weight: 600; }

/* =====================================================================
   STICKY BUY BAR
   ===================================================================== */
#spx-snap .sn-sticky {
  position: fixed;
  z-index: 990;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  left: 12px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(130%);
  transition: transform .7s var(--spring), opacity .4s ease;
}

#spx-snap .sn-sticky.is-on { pointer-events: auto; opacity: 1; transform: none; }

#spx-snap .sn-sticky__in {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  padding-inline-start: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 10, 10, .88);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55);
}

#spx-snap .sn-sticky__info { display: grid; min-width: 0; line-height: 1.3; }
#spx-snap .sn-sticky__info b { overflow: hidden; font: 700 13px/1.4 var(--f-d); text-overflow: ellipsis; white-space: nowrap; }
#spx-snap .sn-sticky__info > span { color: rgba(255, 255, 255, .7); font-size: 12px; }
#spx-snap .sn-sticky__info strong { color: var(--snap); font: 900 18px/1 var(--f-d); }
#spx-snap .sn-sticky__info del { margin-inline-start: 4px; opacity: .6; }

#spx-snap .sn-sticky__btn {
  display: inline-flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 0 20px 0 22px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--snap);
  font: 800 15px/1 var(--f-d);
}

#spx-snap .sn-sticky__dot { width: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 50%; }
#spx-snap .sn-sticky__btn.is-busy .sn-sticky__dot { border-top-color: transparent; animation: sn-spin .8s linear infinite; }

/* =====================================================================
   REVEAL
   ===================================================================== */
#spx-snap.sn-ready [data-sn-reveal]:not([data-spx-split]) {
  opacity: 0;
  filter: blur(10px);
  translate: 0 24px;
  transition:
    opacity .9s var(--ease) var(--d, 0s),
    filter .9s var(--ease) var(--d, 0s),
    translate 1.1s var(--ease) var(--d, 0s);
}

#spx-snap.sn-ready [data-sn-reveal]:not([data-spx-split]).is-in { opacity: 1; filter: none; translate: none; }

#spx-snap.sn-ready .spx-w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.35em);
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform .9s var(--spring);
  transition-delay: calc(var(--wd, 0) * 50ms + var(--d, 0s));
}

#spx-snap.sn-ready .is-in .spx-w,
#spx-snap.sn-ready .is-in.spx-w { opacity: 1; filter: none; transform: none; }
#spx-snap .sn-mark.spx-w { rotate: -2deg; }

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes sn-spin { to { transform: rotate(360deg); } }
@keyframes sn-ghostin { from { transform: scale(.55); } to { transform: none; } }
@keyframes sn-focus { 0% { transform: scale(1.55); opacity: 0; } 35% { opacity: 1; } 70% { transform: scale(.94); } 100% { transform: none; opacity: 1; } }
@keyframes sn-sheen { 0%, 55% { transform: translateX(120%); } 85%, 100% { transform: translateX(-120%); } }
@keyframes sn-rec { 50% { opacity: .25; } }
@keyframes sn-iris { from { clip-path: circle(150% at 50% 46%); } to { clip-path: circle(0% at 50% 46%); } }
@keyframes sn-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sn-shutter { 0%, 76%, 100% { transform: scale(1); } 80% { transform: scale(.88); } 86% { transform: scale(1.04); } }
@keyframes sn-shutter-core { 0%, 76%, 92%, 100% { width: 0; height: 0; } 80% { width: 46px; height: 46px; } }
@keyframes sn-flash { 0%, 79% { opacity: 0; } 81% { opacity: .55; } 90%, 100% { opacity: 0; } }
@keyframes sn-marquee { to { transform: translateX(50%); } }
@keyframes sn-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 252, 0, .6); } 80%, 100% { box-shadow: 0 0 0 26px rgba(255, 252, 0, 0); } }
@keyframes sn-swipe { 0%, 100% { transform: translateY(2px); opacity: .6; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes sn-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes sn-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sn-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes sn-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 10, 10, .25); } 50% { box-shadow: 0 0 0 16px rgba(10, 10, 10, 0); } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1000px) {
  #spx-snap .sn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #spx-snap .sn-hero__grid,
  #spx-snap .sn-video__grid,
  #spx-snap .sn-chat__grid,
  #spx-snap .sn-perks__grid,
  #spx-snap .sn-coach__grid,
  #spx-snap .sn-offer__grid,
  #spx-snap .sn-faq__grid { grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-chat__intro,
  #spx-snap .sn-faq__intro { position: static; }
  #spx-snap .sn-chat__img { display: none !important; }
  #spx-snap .sn-curr__head { grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-dur { justify-self: start; }
}

@media (max-width: 700px) {
  #spx-snap .sn-wrap { width: min(100% - 32px, 1200px); }
  #spx-snap .sn-sec { padding-block: 72px; }
  #spx-snap .sn-hero { padding-top: calc(var(--spx-hh, 72px) + 30px); }
  #spx-snap .sn-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-actions .sn-btn { width: 100%; }
  #spx-snap .sn-cam { width: min(78%, 300px); }
  #spx-snap .sn-cam__chip--a { right: -26px; }
  #spx-snap .sn-cam__chip--b { left: -26px; }
  #spx-snap .sn-cam__chip { padding: 10px 12px; border-radius: 16px; }
  #spx-snap .sn-cam__chip b { font-size: 18px; }
  #spx-snap .sn-proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spx-snap .sn-proof__row > div:nth-child(3) { border-inline-start: 0; }
  #spx-snap .sn-proof__row > div:nth-child(-n+2) { border-bottom: 1.5px solid rgba(10, 10, 10, .12); }
  #spx-snap .sn-player { border-radius: 24px; }
  #spx-snap .sn-player__play { width: 68px; height: 68px; font-size: 24px; }

  #spx-snap .sn-tiles {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding: 4px 16px 10px;
    overflow-x: auto;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #spx-snap .sn-tiles::-webkit-scrollbar { display: none; }
  #spx-snap .sn-tile { min-height: 340px; flex: 0 0 74%; scroll-snap-align: center; }
  #spx-snap .sn-flow { grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-lenses { margin-inline: -8px; border-radius: 28px; }
  #spx-snap .sn-lenses__row { justify-content: flex-start; margin-inline: -18px; padding: 16px 22px 14px; }
  #spx-snap .sn-phase__list { grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-curr__cta .sn-btn { width: 100%; }
  #spx-snap .sn-incl { grid-template-columns: minmax(0, 1fr); }
  #spx-snap .sn-ticket { padding: 24px 20px 22px; }
  #spx-snap .sn-ticket__cut { margin-inline: -20px; }
  #spx-snap .sn-vs__head > *,
  #spx-snap .sn-vs__row > * { padding: 12px 12px; }
  #spx-snap .sn-vs__row span,
  #spx-snap .sn-vs__row strong { font-size: 13px; }
  #spx-snap .sn-wall { columns: 1; }
  #spx-snap .sn-bars { right: 14px; left: 14px; }
}

@media (hover: none) {
  #spx-snap .sn-cam { rotate: -2deg; }
}

@media (prefers-reduced-motion: reduce) {
  #spx-snap *,
  #spx-snap *::before,
  #spx-snap *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  #spx-snap.sn-ready [data-sn-reveal],
  #spx-snap.sn-ready .spx-w,
  #spx-snap.sn-ready [data-sn-msg],
  #spx-snap.sn-ready [data-sn-row] { opacity: 1 !important; filter: none !important; transform: none !important; translate: none !important; }
  #spx-snap .sn-cam__iris { display: none; }
}

/* =====================================================================
   4) صفحة «السفر إلى الصين خطوة بخطوة» (#spx-china)
   قالب ملاك يفرض أوزان وأحجام خطوط وحدوداً على كل العناصر،
   فنعيد إعدادات المتصفح الافتراضية داخل الصفحة فقط، ليظهر التصميم المعتمد كما هو.
   ===================================================================== */
#spx-china :where(.sr, .sr *) { font-weight: inherit !important; border-style: none; border-color: currentColor; }
#spx-china .sr *::before, #spx-china .sr *::after { border-style: none; border-color: currentColor; }
#spx-china :where(.sr) { font-weight: 400 !important; }
#spx-china :where(.sr h1, .sr h2, .sr h3, .sr h4, .sr h5, .sr h6, .sr th) { font-weight: bold !important; line-height: inherit; }
#spx-china :where(.sr b, .sr strong) { font-weight: bolder !important; }
#spx-china :where(.sr h1) { font-size: 2em; }
#spx-china :where(.sr h2) { font-size: 1.5em; }
#spx-china :where(.sr h3) { font-size: 1.17em; }
#spx-china :where(.sr h4) { font-size: 1em; }
#spx-china :where(.sr small) { font-size: smaller; }
#spx-china :where(.sr svg, .sr img) { vertical-align: baseline; }
#spx-china :where(.sr a) { transition: all 0s ease 0s; }

/* السفر إلى الصين — Sponsored Marketing
   Layout: night-city hero > boarding pass > outcomes > route map + 23 stops > porcelain stamp sheet > moon-gate bio > FAQ > lacquer CTA.
   Everything is scoped to .sr so it can sit inside a Salla "HTML content" block. */
#spx-china .sr{
  --ink:#060915; --ink-2:#0A1024; --ink-3:#101936; --line:rgba(150,175,230,.14); --line-2:rgba(150,175,230,.26);
  --fg:#EEF2FA; --muted:#98A4C0; --blue:#1F78E5; --blue-hi:#62A6FF; --red:#F22F57; --red-deep:#9E0E2E;
  --paper:#F2F5FA; --paper-2:#E6ECF6; --paper-ink:#0B1630; --paper-muted:#4B5A7A; --cobalt:#1D4BA6;
  --f-disp:'Alexandria','IBM Plex Sans Arabic',Tahoma,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --f-han:'Ma Shan Zheng','Noto Serif SC','Songti SC','SimSun',serif;
  --wrap:1180px; --gut:20px; --r:14px;
  position:relative; background:var(--ink); color:var(--fg); font-family:var(--f-body); font-size:17px; line-height:1.8;
  text-align:right; -webkit-font-smoothing:antialiased; color-scheme:dark;
}
#spx-china .sr,#spx-china .sr *,#spx-china .sr *::before,#spx-china .sr *::after{box-sizing:border-box}
#spx-china .sr *{font-family:inherit}
#spx-china .sr :where(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote){margin:0;padding:0}
#spx-china .sr :where(ul,ol){list-style:none}
#spx-china .sr :where(a){color:inherit;text-decoration:none}
#spx-china .sr img,#spx-china .sr svg{display:block;max-width:100%}
#spx-china .sr bdi{unicode-bidi:isolate}
#spx-china .sr .han{font-family:var(--f-han);font-style:normal;font-weight:400!important;line-height:1}
#spx-china .sr a:focus-visible,#spx-china .sr summary:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:8px}
#spx-china .sr-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative}
#spx-china .sr-sec{position:relative;padding-block:clamp(72px,9vw,120px);overflow-x:clip}

/* ---------- shared bits ---------- */
#spx-china .sr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;
  font-family:var(--f-disp);font-weight:700!important;font-size:17px;line-height:1;white-space:nowrap;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
#spx-china .sr-btn svg{width:20px;height:20px;flex:none}
#spx-china .sr-btn--red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(242,47,87,.8)}
#spx-china .sr-btn--red:hover{background:#ff3d66;transform:translateY(-2px)}
#spx-china .sr-btn--ghost{border:1.5px solid var(--line-2);color:var(--fg)}
#spx-china .sr-btn--ghost:hover{border-color:var(--fg)}
#spx-china .sr-btn--white{background:#fff;color:var(--red-deep)}
#spx-china .sr-btn--white:hover{transform:translateY(-2px)}
#spx-china .sr-btn--line-w{border:1.5px solid rgba(255,255,255,.55);color:#fff}
#spx-china .sr-btn--line-w:hover{background:rgba(255,255,255,.1)}
#spx-china .sr-btn--sm{min-height:46px;padding:0 20px;font-size:15px}

#spx-china .sr-seal{display:inline-grid;place-items:center;background:var(--red);color:#fff;border-radius:7px;box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 3.5px rgba(255,255,255,.85);
  font-family:var(--f-han);line-height:1;transform:rotate(-4deg)}
#spx-china .sr-seal--sm{width:46px;height:46px;font-size:28px}
#spx-china .sr-seal--inv{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--red)}
#spx-china .sr-head--flush{margin-bottom:0}
#spx-china .sr-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
#spx-china .sr-head__row{display:flex;align-items:center;gap:14px}
#spx-china .sr-kicker{font-family:var(--f-disp);font-weight:700!important;font-size:15px;letter-spacing:.02em;color:var(--red)}
#spx-china .sr-h2{font-family:var(--f-disp);font-weight:800!important;font-size:clamp(28px,4.1vw,48px);line-height:1.55;text-wrap:balance}
#spx-china .sr-sub{color:var(--muted);font-size:18px;max-width:62ch}

/* ---------- top bar ---------- */
#spx-china .sr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
#spx-china .sr-logo{display:flex;align-items:center;gap:12px}
#spx-china .sr-logo svg:first-child{height:40px;width:auto}
#spx-china .sr-logo svg:last-child{height:22px;width:auto}
#spx-china .sr-top__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:8px 14px;border:1px solid var(--line);border-radius:999px}
#spx-china .sr-top__link:hover{color:var(--fg);border-color:var(--line-2)}
#spx-china .sr-top__link svg{width:16px;height:16px;color:var(--red)}
#spx-china .sr-top__s{display:none}

/* ---------- hero ---------- */
#spx-china .sr-hero{position:relative;overflow:clip;background:
  radial-gradient(48% 55% at 22% 34%,rgba(242,47,87,.20),transparent 70%),
  radial-gradient(45% 60% at 88% 18%,rgba(31,120,229,.22),transparent 72%),var(--ink)}
#spx-china .sr-hero__han{position:absolute;inset-inline-end:-.06em;top:120px;writing-mode:vertical-rl;font-size:clamp(180px,26vw,380px);color:rgba(255,255,255,.035);pointer-events:none;user-select:none}
#spx-china .sr-hero__grid{display:grid;justify-items:center;text-align:center;padding-block:clamp(28px,5vw,64px) 0;position:relative;z-index:2}
#spx-china .sr-hero__copy{display:grid;justify-items:center;max-width:860px}
#spx-china .sr-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600!important;color:var(--fg);padding:7px 14px 7px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
#spx-china .sr-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(242,47,87,.2)}
#spx-china .sr-h1{font-family:var(--f-disp);font-weight:900!important;line-height:1.3;margin-top:24px;letter-spacing:-.01em}
#spx-china .sr-h1>span{display:block;font-size:clamp(34px,5.4vw,66px);font-weight:800!important;line-height:1.45;color:var(--fg)}
#spx-china .sr-h1 em{display:inline-block;position:relative;font-style:normal;color:var(--red);font-size:clamp(78px,12.5vw,158px);line-height:1.3;margin-top:.04em;text-shadow:0 18px 50px rgba(242,47,87,.35)}
#spx-china .sr-h1 small{display:block;font-size:clamp(20px,2.4vw,28px);font-weight:700!important;line-height:1.6;color:var(--blue-hi);margin-top:8px}
#spx-china .sr-lead{margin-top:22px;font-size:clamp(17px,1.6vw,19.5px);color:#C9D2E6;max-width:60ch}
#spx-china .sr-h1__seal{position:absolute;top:.62em;left:-2.6em;width:2.5em;height:2.5em;font-size:clamp(17px,2.2vw,30px);grid-template-rows:1fr 1fr;padding:.22em 0;line-height:1;text-shadow:none;transform:rotate(-10deg);box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 4px rgba(255,255,255,.85),0 12px 24px rgba(0,0,0,.45)}
#spx-china .sr-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
#spx-china .sr-hero .sr-ctas,#spx-china .sr-hero .sr-micro{justify-content:center}
#spx-china .sr-micro{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:14px;color:var(--muted)}
#spx-china .sr-micro li{display:flex;align-items:center;gap:7px}
#spx-china .sr-micro svg{width:16px;height:16px;color:var(--blue-hi)}

#spx-china .sr-skyline{display:block;width:100%;height:clamp(170px,22vw,320px);margin-top:clamp(-20px,-1vw,0px);position:relative;z-index:1}
#spx-china .sr-lat{stroke-dasharray:4 6;animation:srflow 7s linear infinite}
@keyframes srflow{to{stroke-dashoffset:-100}}

/* ---------- boarding pass ---------- */
#spx-china .sr-passsec{background:var(--ink-2);padding-bottom:clamp(20px,3vw,40px)}
#spx-china .sr-pass{position:relative;z-index:3;margin-top:clamp(-64px,-4vw,-36px);display:grid;grid-template-columns:minmax(0,1fr) 270px;background:var(--paper);color:var(--paper-ink);border-radius:20px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
#spx-china .sr-pass__main{padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px);min-width:0}
#spx-china .sr-pass__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1.5px dashed #C6D1E4}
#spx-china .sr-pass__head p{display:flex;align-items:baseline;gap:10px;font-family:var(--f-disp);font-weight:800!important;font-size:18px;color:var(--cobalt)}
#spx-china .sr-pass__head p span{font-size:11px;letter-spacing:.24em;color:var(--paper-muted);font-weight:700!important}
#spx-china .sr-pass__head svg{height:30px;width:auto}
#spx-china .sr-pass__route{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:18px;padding-block:18px 14px}
#spx-china .sr-pass__route b{display:block;font-family:var(--f-disp);font-weight:900!important;font-size:clamp(36px,4.6vw,56px);line-height:1;letter-spacing:.02em;direction:ltr;text-align:right}
#spx-china .sr-pass__route div:last-child b{text-align:left}
#spx-china .sr-pass__route small{display:block;margin-top:6px;font-size:14px;color:var(--paper-muted);font-weight:600!important}
#spx-china .sr-pass__route small .han{font-size:18px;color:var(--red);margin-inline-start:4px}
#spx-china .sr-pass__route div:last-child{text-align:left}
#spx-china .sr-pass__path{position:relative;height:30px;color:var(--cobalt)}
#spx-china .sr-pass__path::before{content:"";position:absolute;inset-inline:0;top:50%;border-top:2px dotted #9AAACB}
#spx-china .sr-pass__path svg{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%) scaleX(-1);background:var(--paper);padding:2px}
#spx-china .sr-pass__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px;padding-top:16px;border-top:1px solid #DCE3EF}
#spx-china .sr-pass__fields dt{font-size:12px;font-weight:600!important;color:var(--paper-muted);letter-spacing:.02em}
#spx-china .sr-pass__fields dd{font-family:var(--f-disp);font-weight:700!important;font-size:16.5px;line-height:1.5}
#spx-china .sr-pass__fields dd.is-red{color:#D4163F}
#spx-china .sr-pass__stub{position:relative;padding:clamp(20px,2.6vw,30px) 24px;border-inline-start:2px dashed #C6D1E4;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
#spx-china .sr-pass__stub::before,#spx-china .sr-pass__stub::after{content:"";position:absolute;inset-inline-start:-15px;width:28px;height:28px;border-radius:50%;background:var(--ink-2)}
#spx-china .sr-pass__stub::before{top:-14px}#spx-china .sr-pass__stub::after{bottom:-14px}
#spx-china .sr-pass__stub dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#spx-china .sr-pass__stub dt{font-size:12px;font-weight:600!important;color:var(--paper-muted)}
#spx-china .sr-pass__stub dd{font-family:var(--f-disp);font-weight:700!important;font-size:16px}
#spx-china .sr-barcode{height:52px;width:100%;color:var(--paper-ink)}
#spx-china .sr-pass__stub .sr-btn{width:100%;min-height:48px;font-size:16px}

/* ---------- outcomes ---------- */
#spx-china .sr-learn{background:var(--ink-2)}
#spx-china .sr-learn__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
#spx-china .sr-learn__grid li{padding:30px 0 32px;padding-inline:0 28px;border-bottom:1px solid var(--line);display:grid;gap:12px;align-content:start}
#spx-china .sr-learn__grid li:not(:nth-child(3n+1)){padding-inline-start:28px;border-inline-start:1px solid var(--line)}
#spx-china .sr-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(31,120,229,.12);color:var(--blue-hi)}
#spx-china .sr-learn__grid li:nth-child(even) .sr-ico{background:rgba(242,47,87,.12);color:#FF6B88}
#spx-china .sr-ico svg{width:28px;height:28px}
#spx-china .sr-learn__grid h3{font-family:var(--f-disp);font-weight:700!important;font-size:20px;line-height:1.6}
#spx-china .sr-learn__grid p{color:var(--muted);font-size:16px;line-height:1.85}
#spx-china .sr-refs{font-size:13px;font-weight:600!important;color:var(--blue-hi)}
#spx-china .sr-for{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;align-items:center;margin-top:44px;padding:24px 28px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
#spx-china .sr-for h3{font-family:var(--f-disp);font-weight:700!important;font-size:18px;line-height:1.6;white-space:nowrap}
#spx-china .sr-for ul{display:flex;flex-wrap:wrap;gap:10px}
#spx-china .sr-for li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:15px}
#spx-china .sr-for li svg{width:16px;height:16px;color:var(--red)}

/* ---------- route + lessons ---------- */
#spx-china .sr-map text{font:600 11px 'IBM Plex Sans Arabic',sans-serif;font-weight:600!important}
#spx-china .sr-map text.h{font:20px 'Ma Shan Zheng',serif;font-weight:normal!important}
#spx-china .sr-map text.s{font:500 8.5px 'IBM Plex Sans Arabic',sans-serif;font-weight:500!important;letter-spacing:.04em}
#spx-china .sr-map text.n{font-size:14px}
#spx-china .sr-sprite{position:absolute;width:0;height:0;overflow:hidden}
#spx-china .sr-route{background:var(--ink)}
#spx-china .sr-route__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,56px);align-items:start}
#spx-china .sr-map{position:sticky;top:24px;border-radius:20px;background:var(--ink-3);border:1px solid var(--line);padding:18px;display:grid;gap:16px}
#spx-china .sr-map>svg{width:100%;height:auto;border-radius:12px}
#spx-china .sr-map__legend{display:grid;gap:8px;font-size:13.5px;color:var(--muted)}
#spx-china .sr-map__legend li{display:flex;align-items:center;gap:10px}
#spx-china .sr-map__legend i{width:26px;height:0;border-top:3px solid var(--red);flex:none}
#spx-china .sr-map__legend li:nth-child(2) i{border-top:2px dashed var(--blue-hi)}
#spx-china .sr-map__stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:14px;text-align:center}
#spx-china .sr-map__stats div+div{border-inline-start:1px solid var(--line)}
#spx-china .sr-map__stats b{display:block;font-family:var(--f-disp);font-weight:800!important;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
#spx-china .sr-map__stats span{font-size:12.5px;color:var(--muted)}
#spx-china .sr-map .sr-btn{width:100%}

#spx-china .sr-stations{display:grid;gap:18px;counter-reset:none}
#spx-china .sr-station{border-radius:18px;background:var(--ink-2);border:1px solid var(--line);overflow:hidden}
#spx-china .sr-station__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,rgba(31,120,229,.07))}
#spx-china .sr-city{display:grid;place-items:center;width:62px;height:62px;border-radius:12px;background:rgba(242,47,87,.12);border:1px solid rgba(242,47,87,.35);color:#FF6B88;text-align:center}
#spx-china .sr-city .han{font-size:24px;letter-spacing:-.04em}
#spx-china .sr-city small{display:block;font-size:11px;font-weight:600!important;color:#FFB3C2;margin-top:2px;line-height:1.2}
#spx-china .sr-station:nth-child(3) .sr-city,#spx-china .sr-station:nth-child(6) .sr-city{background:rgba(31,120,229,.14);border-color:rgba(31,120,229,.45);color:var(--blue-hi)}
#spx-china .sr-station:nth-child(3) .sr-city small,#spx-china .sr-station:nth-child(6) .sr-city small{color:#AFCFFF}
#spx-china .sr-station__k{font-size:13px;font-weight:600!important;color:var(--muted)}
#spx-china .sr-station h3{font-family:var(--f-disp);font-weight:700!important;font-size:clamp(18px,1.8vw,21px);line-height:1.65;text-wrap:balance}
#spx-china .sr-station__meta{font-size:13px;color:var(--muted);white-space:nowrap;text-align:center}
#spx-china .sr-station__meta b{display:block;font-family:var(--f-disp);font-size:18px;color:var(--fg);font-variant-numeric:tabular-nums}
#spx-china .sr-lesson{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--line)}
#spx-china .sr-lessons li:first-child .sr-lesson{border-top:0}
#spx-china .sr-lesson__n{font-family:var(--f-disp);font-weight:800!important;font-size:17px;color:var(--blue-hi);font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
#spx-china .sr-lesson__t{font-size:16px;font-weight:500!important;line-height:1.55}
#spx-china .sr-lesson__d{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
#spx-china .sr-lesson__d svg{width:15px;height:15px}
#spx-china .sr-more{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;border:1.5px dashed var(--line-2);color:var(--muted)}
#spx-china .sr-more b{display:block;font-family:var(--f-disp);font-weight:700!important;color:var(--fg);font-size:17px;line-height:1.6}
#spx-china .sr-more .sr-ico{flex:none}

/* ---------- how to get it ---------- */
#spx-china .sr-steps{background:var(--ink-2)}
#spx-china .sr-steps__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,32px);counter-reset:none;position:relative}
#spx-china .sr-steps__list::before{content:"";position:absolute;top:28px;inset-inline:16%;border-top:2px dashed var(--line-2)}
#spx-china .sr-steps__list li{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;padding:0 8px}
#spx-china .sr-steps__n{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800!important;font-size:22px;background:var(--ink-2);border:2px solid var(--red);color:#fff;position:relative;z-index:1}
#spx-china .sr-steps__list li:nth-child(2) .sr-steps__n{border-color:var(--blue)}
#spx-china .sr-steps__list li:nth-child(3) .sr-steps__n{background:var(--red);border-color:var(--red)}
#spx-china .sr-steps__list h3{font-family:var(--f-disp);font-weight:700!important;font-size:19px;line-height:1.6;margin-top:6px;text-wrap:balance}
#spx-china .sr-steps__list p{color:var(--muted);font-size:15.5px;max-width:30ch}
#spx-china .sr-steps__cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,44px)}
#spx-china .sr-steps .sr-head{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- porcelain / stamps ---------- */
#spx-china .sr-porc{background:var(--paper);color:var(--paper-ink)}
#spx-china .sr-porc::before,#spx-china .sr-porc::after{content:"";position:absolute;inset-inline:0;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2726%27%3E%3Cpath d=%27M0 1H28M0 25H28M0 21H28M22 21V5H6V17H16V9H11%27 fill=%27none%27 stroke=%27%231D4BA6%27 stroke-width=%271.8%27/%3E%3C/svg%3E") repeat-x center/auto 26px}
#spx-china .sr-porc::before{top:18px}#spx-china .sr-porc::after{bottom:18px}
#spx-china .sr-porc .sr-sub{color:var(--paper-muted)}
#spx-china .sr-porc .sr-kicker{color:#D4163F}
#spx-china .sr-stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
#spx-china .sr-stamp{position:relative;filter:drop-shadow(0 14px 18px rgba(11,22,48,.14));transition:transform .3s ease}
#spx-china .sr-stamp:nth-child(odd){transform:rotate(-1.2deg)}#spx-china .sr-stamp:nth-child(even){transform:rotate(1deg)}
#spx-china .sr-stamp:hover{transform:rotate(0) translateY(-4px)}
#spx-china .sr-stamp__paper{background:#fff;padding:12px;
  -webkit-mask:radial-gradient(5px at 6px 6px,#0000 96%,#000) -6px -6px/12px 12px round,linear-gradient(#000 0 0) content-box;
  mask:radial-gradient(5px at 6px 6px,#0000 96%,#000) -6px -6px/12px 12px round,linear-gradient(#000 0 0) content-box}
#spx-china .sr-stamp__in{border:1.5px solid var(--cobalt);padding:12px 12px 14px;display:grid;gap:10px;color:var(--cobalt);background:#FBFCFE}
#spx-china .sr-stamp__top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700!important;letter-spacing:.12em;direction:ltr}
#spx-china .sr-stamp__top .han{font-size:18px;letter-spacing:0}
#spx-china .sr-stamp__top b{font-family:var(--f-disp);font-size:20px;letter-spacing:0;color:#D4163F}
#spx-china .sr-stamp__art{aspect-ratio:10/9;background:repeating-linear-gradient(0deg,rgba(29,75,166,.10) 0 1px,transparent 1px 5px)}
#spx-china .sr-stamp__art svg{width:100%;height:100%}
#spx-china .sr-stamp__cap{display:flex;justify-content:space-between;align-items:end;gap:10px}
#spx-china .sr-stamp__cap h3{font-family:var(--f-disp);font-weight:700!important;font-size:17px;line-height:1.55;color:var(--paper-ink)}
#spx-china .sr-stamp__cap p{font-size:13px;color:var(--paper-muted);line-height:1.4}
#spx-china .sr-stamp__cap .han{font-size:24px;color:var(--cobalt);white-space:nowrap}
#spx-china .sr-postmark{position:absolute;top:22%;inset-inline-start:-14px;width:92px;height:92px;border-radius:50%;border:2.5px solid rgba(212,22,63,.85);color:rgba(212,22,63,.92);
  display:grid;place-content:center;text-align:center;font-family:var(--f-disp);font-weight:800!important;font-size:13px;line-height:1.35;transform:rotate(-14deg);background:rgba(255,255,255,.35)}
#spx-china .sr-postmark::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(212,22,63,.6)}
#spx-china .sr-postmark small{display:block;font-size:11px;font-weight:700!important}
#spx-china .sr-porc__note{margin-top:clamp(36px,5vw,52px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 26px;border-radius:var(--r);background:#fff;border:1px solid #D7E0EE}
#spx-china .sr-porc__note p{font-size:16.5px;color:var(--paper-muted);max-width:62ch}
#spx-china .sr-porc__note b{color:var(--paper-ink);font-family:var(--f-disp);font-weight:700!important}
#spx-china .sr-porc .sr-btn--ghost{border-color:#B9C6DC;color:var(--paper-ink)}
#spx-china .sr-porc .sr-btn--ghost:hover{border-color:var(--paper-ink)}

/* ---------- about ---------- */
#spx-china .sr-about{background:var(--ink-2)}
#spx-china .sr-about__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,90px);align-items:center}
#spx-china .sr-moon{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;border-radius:24px;display:grid;place-items:center;
  background:
   repeating-linear-gradient(0deg,rgba(150,175,230,.10) 0 2px,transparent 2px 28px),
   repeating-linear-gradient(90deg,rgba(150,175,230,.10) 0 2px,transparent 2px 28px),var(--ink-3);border:1px solid var(--line)}
#spx-china .sr-moon__ring{width:78%;aspect-ratio:1;border-radius:50%;padding:12px;background:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 30px 60px -20px rgba(0,0,0,.8)}
#spx-china .sr-moon__img{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--ink-3);box-shadow:0 0 0 2px var(--red)}
#spx-china .sr-moon__img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#spx-china .sr-moon__seal{position:absolute;bottom:9%;inset-inline-start:8%;width:64px;height:64px;font-size:30px;transform:rotate(6deg)}
#spx-china .sr-moon figcaption{position:absolute;top:18px;left:14px;writing-mode:vertical-rl;font-size:13px;letter-spacing:.2em;color:var(--muted)}
#spx-china .sr-about h2{font-size:clamp(34px,5vw,58px)}
#spx-china .sr-about__from{font-size:18px;font-weight:600!important;color:var(--blue-hi);margin-top:-4px}
#spx-china .sr-about__bio{margin-top:22px;display:grid;gap:14px;color:#C9D2E6;font-size:17.5px;max-width:58ch}
#spx-china .sr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px;border-block:1px solid var(--line)}
#spx-china .sr-stats div{padding:20px 0 18px;padding-inline:0 16px}
#spx-china .sr-stats div+div{padding-inline-start:18px;border-inline-start:1px solid var(--line)}
#spx-china .sr-stats dt{font-family:var(--f-disp);font-weight:900!important;font-size:clamp(32px,4vw,46px);line-height:1.1;color:var(--fg)}
#spx-china .sr-stats dt em{font-style:normal;color:var(--red)}
#spx-china .sr-stats dd{font-size:14px;color:var(--muted);line-height:1.6;margin-top:6px}
#spx-china .sr-about .sr-ctas{margin-top:28px}

/* ---------- faq ---------- */
#spx-china .sr-faq{background:var(--ink)}
#spx-china .sr-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start}
#spx-china .sr-faq .sr-head{margin-bottom:0;position:sticky;top:24px}
#spx-china .sr-qa{border-top:1px solid var(--line)}
#spx-china .sr-qa details{border-bottom:1px solid var(--line)}
#spx-china .sr-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-family:var(--f-disp);font-weight:700!important;font-size:18px;line-height:1.65}
#spx-china .sr-qa summary::-webkit-details-marker{display:none}
#spx-china .sr-qa summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .25s ease,background-color .25s ease}
#spx-china .sr-qa summary i::before,#spx-china .sr-qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
#spx-china .sr-qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
#spx-china .sr-qa details[open] summary i{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
#spx-china .sr-qa details p{padding:0 0 24px;color:var(--muted);font-size:16.5px;max-width:64ch}

/* ---------- final ---------- */
#spx-china .sr-final{position:relative;overflow:clip;text-align:center;color:#fff;padding-block:clamp(90px,11vw,150px);
  background:radial-gradient(70% 90% at 50% 0%,#FF4B70 0%,transparent 70%),linear-gradient(180deg,#E3234C,#A20F31)}
#spx-china .sr-final__han{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(200px,34vw,460px);color:rgba(255,255,255,.07);pointer-events:none;user-select:none;letter-spacing:-.05em}
#spx-china .sr-lantern{position:absolute;top:0;width:clamp(54px,7vw,86px);height:auto;transform-origin:50% 0;animation:srsway 5s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(80,0,10,.5))}
#spx-china .sr-lantern--a{inset-inline-start:7%}
#spx-china .sr-lantern--b{inset-inline-end:9%;width:clamp(42px,5.4vw,66px);animation-delay:-2.2s;animation-duration:6s}
@keyframes srsway{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-2.5deg)}}
#spx-china .sr-final .sr-wrap{display:grid;justify-items:center;gap:20px}
#spx-china .sr-final h2{font-family:var(--f-disp);font-weight:900!important;font-size:clamp(34px,5.6vw,68px);line-height:1.5;text-wrap:balance;max-width:16ch}
#spx-china .sr-final p{font-size:clamp(17px,1.7vw,20px);color:rgba(255,255,255,.88);max-width:52ch}
#spx-china .sr-final .sr-ctas{justify-content:center;margin-top:10px}
#spx-china .sr-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:14px;font-weight:600!important;font-size:15px}
#spx-china .sr-promise li{display:flex;align-items:center;gap:8px}
#spx-china .sr-promise svg{width:18px;height:18px}

/* ---------- footer + sticky ---------- */
#spx-china .sr-foot{background:var(--ink);border-top:1px solid var(--line);padding-block:30px}
#spx-china .sr-foot .sr-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}
#spx-china .sr-foot .sr-logo svg:first-child{height:32px}#spx-china .sr-foot .sr-logo svg:last-child{height:18px}
#spx-china .sr-sticky{display:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  #spx-china .sr-route__grid{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-map{position:relative;top:0;order:-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  #spx-china .sr-map>svg{grid-row:span 3}
  #spx-china .sr-faq__grid{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-faq .sr-head{position:static;margin-bottom:8px}
}
@media (max-width:860px){
  #spx-china .sr-pass{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-pass__stub{border-inline-start:0;border-top:2px dashed #C6D1E4}
  #spx-china .sr-pass__stub::before,#spx-china .sr-pass__stub::after{top:-15px;bottom:auto;inset-inline-start:auto}
  #spx-china .sr-pass__stub::before{right:-14px}#spx-china .sr-pass__stub::after{left:-14px}
  #spx-china .sr-pass__stub{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
  #spx-china .sr-learn__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #spx-china .sr-learn__grid li,#spx-china .sr-learn__grid li:not(:nth-child(3n+1)){padding-inline:0 22px;border-inline-start:0}
  #spx-china .sr-learn__grid li:nth-child(even){padding-inline:22px 0;border-inline-start:1px solid var(--line)}
  #spx-china .sr-for{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-stamps{grid-template-columns:repeat(2,minmax(0,1fr))}
  #spx-china .sr-about__grid{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-moon{order:-1;max-width:340px}
}
@media (max-width:640px){
  #spx-china .sr{font-size:16px}
  #spx-china .sr-steps__list{grid-template-columns:minmax(0,1fr);gap:26px}
  #spx-china .sr-steps__list::before{top:20px;bottom:20px;inset-inline:auto;right:28px;border-top:0;border-right:2px dashed var(--line-2)}
  #spx-china .sr-steps__list li{grid-template-columns:58px minmax(0,1fr);justify-items:start;text-align:right;column-gap:16px;row-gap:2px;padding:0}
  #spx-china .sr-steps__n{grid-row:span 2}
  #spx-china .sr-steps__list h3{margin-top:0;align-self:end}
  #spx-china .sr-steps .sr-head{text-align:right;justify-items:start;margin-inline:0}
  #spx-china .sr-top__l{display:none}#spx-china .sr-top__s{display:inline}
  #spx-china .sr-pass__fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #spx-china .sr-pass__route{gap:10px}
  #spx-china .sr-map{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-map>svg{grid-row:auto}
  #spx-china .sr-learn__grid{grid-template-columns:minmax(0,1fr)}
  #spx-china .sr-learn__grid li,#spx-china .sr-learn__grid li:nth-child(even),#spx-china .sr-learn__grid li:not(:nth-child(3n+1)){padding-inline:0;border-inline-start:0;padding-block:22px;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:6px}
  #spx-china .sr-learn__grid .sr-ico{width:48px;height:48px;grid-row:span 3}
  #spx-china .sr-learn__grid h3{font-size:18.5px;align-self:center;line-height:1.55}
  #spx-china .sr-station__head{grid-template-columns:auto minmax(0,1fr);padding:16px}
  #spx-china .sr-station__meta{grid-column:2;text-align:start;display:flex;gap:6px;align-items:baseline}
  #spx-china .sr-station__meta b{display:inline;font-size:15px}
  #spx-china .sr-lesson{grid-template-columns:34px minmax(0,1fr) auto;padding:13px 16px;gap:10px}
  #spx-china .sr-lesson__t{font-size:15.5px}
  #spx-china .sr-stamp__in{padding:10px}
  #spx-china .sr-stamp__cap{flex-direction:column;align-items:start;gap:4px}
  #spx-china .sr-stamp__cap h3{font-size:15px}
  #spx-china .sr-stamp__cap .han{font-size:20px}
  #spx-china .sr-postmark{width:74px;height:74px;font-size:11px;inset-inline-start:-8px}
  #spx-china .sr-stats div,#spx-china .sr-stats div+div{padding-inline:0 10px}
  #spx-china .sr-stats div+div{padding-inline-start:12px}
  #spx-china .sr-stats dd{font-size:12.5px}
  #spx-china .sr-sticky{display:flex;position:sticky;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(6,9,21,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  #spx-china .sr-sticky b{display:block;font-family:var(--f-disp);font-size:15px;line-height:1.3}
  #spx-china .sr-sticky span{font-size:12.5px;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  #spx-china .sr *{animation:none!important;transition:none!important}
}

/* إضافات الدمج في سلة فقط، ولا تغيّر شيئاً في التصميم:
   زر «استعرض الدروس» ينزل للدروس بدون أن يغطيها الهيدر الثابت */
html.spx-china-page,
html.spx-china-page body { overflow-x: clip; }
#spx-china #sr-lessons { scroll-margin-top: calc(var(--spx-hh, 72px) + 12px); }
/* الخريطة وعنوان الأسئلة يثبتان على بعد 24px تحت الهيدر الثابت، كما في التصميم */
@media (min-width: 1021px) {
  #spx-china .sr-map,
  #spx-china .sr-faq .sr-head { top: calc(var(--spx-hh, 72px) + 34px); }
}

/* =====================================================================
   5) صفحة «منتجات سبونسورد» — مدير الإعلانات (#spx-shop)
   ===================================================================== */
html.spx-shop-page,
html.spx-shop-page body { overflow-x: clip; }

#spx-shop {
  --ink: #0b1020;
  --paper: #f4f5f9;
  --muted: #5a6376;
  --line: rgba(11, 16, 32, .09);
  --blue: #1d77e5;
  --red: #f23055;
  --ok: #1f9d4a;
  --f-d: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: block;
  padding-bottom: clamp(56px, 7vw, 96px);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--f-b);
  font-size: 16px;
  line-height: 1.75;
  text-align: right;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* قالب ملاك يفرض أوزان الخطوط وحدوداً على كل العناصر، فنعيد الافتراضي داخل الصفحة */
#spx-shop :where(*), #spx-shop :where(*)::before, #spx-shop :where(*)::after { box-sizing: border-box; border-style: none; font-weight: inherit !important; }
#spx-shop :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) { margin: 0; padding: 0; }
#spx-shop :where(h1, h2, h3, strong, b) { font-weight: 700 !important; }
#spx-shop :where(ul, ol) { list-style: none; }
#spx-shop :where(a) { color: inherit; text-decoration: none; }
#spx-shop :where(img, svg) { display: block; max-width: 100%; vertical-align: baseline; }
#spx-shop :where(button) { margin: 0; padding: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
#spx-shop [hidden] { display: none !important; }
#spx-shop :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 12px; }

#spx-shop .shop-wrap { width: min(100% - 32px, 1240px); margin-inline: auto; }

/* ---------- الرأس ---------- */
#spx-shop .shop-hero { padding: clamp(26px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
#spx-shop .shop-crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
#spx-shop .shop-crumbs a:hover { color: var(--blue); }
#spx-shop .shop-hero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; margin-top: 18px; }
#spx-shop .shop-hero__copy { max-width: 640px; }

#spx-shop .shop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 15px;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 600 13px/1.3 var(--f-b);font-weight:600!important;
}
#spx-shop .shop-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); animation: shop-pulse 2.2s ease-out infinite; }
#spx-shop .shop-kicker--soft { color: var(--blue); background: rgba(29, 119, 229, .08); box-shadow: none; }

#spx-shop h1 { margin-top: 14px; font: 700 clamp(34px, 5vw, 58px)/1.25 var(--f-d);font-weight:700!important; letter-spacing: -.01em; }
#spx-shop .shop-lead { margin-top: 12px; color: var(--muted); font-size: clamp(15.5px, 1.4vw, 18px); max-width: 56ch; }

#spx-shop .shop-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: min(100%, 420px); }
#spx-shop .shop-kpis div { padding: 14px 16px 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -24px rgba(11, 16, 32, .35); }
#spx-shop .shop-kpis dt { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
#spx-shop .shop-kpis dd { margin-top: 4px; font: 800 clamp(26px, 2.6vw, 34px)/1.1 var(--f-d);font-weight:800!important; font-variant-numeric: tabular-nums; }
#spx-shop .shop-kpis div:nth-child(2) dd { color: var(--ok); }
#spx-shop .shop-kpis div:nth-child(3) dd { color: var(--red); }

/* ---------- شريط الأهداف ---------- */
#spx-shop .shop-bar {
  position: sticky;
  z-index: 20;
  top: calc(var(--spx-hh, 72px) + 6px);
  padding: 10px 0;
  background: rgba(244, 245, 249, .86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
#spx-shop .shop-bar .shop-wrap { display: flex; align-items: center; gap: 14px; }
#spx-shop .shop-bar__label { flex: none; color: var(--muted); font-size: 13px; }
#spx-shop .shop-goals { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
#spx-shop .shop-goals::-webkit-scrollbar { display: none; }
#spx-shop .spx-goal {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
#spx-shop .spx-goal strong { font: 600 14px/1 var(--f-b);font-weight:600!important; }
#spx-shop .spx-goal span {
  display: grid;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper);
  font: 700 12px/1 var(--f-d);font-weight:700!important;
}
#spx-shop .spx-goal:hover { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .22); }
#spx-shop .spx-goal.is-on { color: #fff; background: var(--ink); box-shadow: 0 10px 22px -14px rgba(11, 16, 32, .8); }
#spx-shop .spx-goal.is-on span { color: var(--ink); background: #fff; }

/* ---------- البطاقات (معاينة إعلان) ---------- */
#spx-shop .shop-list { padding-top: 14px; }
#spx-shop .shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; perspective: 1400px; }

#spx-shop .spx-ad {
  --rx: 0deg;
  --ry: 0deg;
  --cr-bg: #0b1020;
  --cr-glow: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 26px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -38px rgba(11, 16, 32, .45);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity .7s var(--ease), translate .6s var(--ease), scale .6s var(--ease), transform .5s var(--ease), box-shadow .45s var(--ease);
}
#spx-shop .spx-ad:hover { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .14), 0 34px 60px -36px rgba(11, 16, 32, .55); }
#spx-shop .shop-grid.is-ready .spx-ad:not(.is-in) { opacity: 0; translate: 0 26px; transition-delay: calc(var(--i, 0) * 70ms); }

#spx-shop .spx-ad__head { display: flex; align-items: center; gap: 10px; }
#spx-shop .spx-ad__avatar {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
#spx-shop .spx-ad__avatar svg { width: auto; height: 24px; }
#spx-shop .spx-ad__who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
#spx-shop .spx-ad__who strong { font: 700 14px/1.35 var(--f-d);font-weight:700!important; direction: ltr; text-align: right; }
#spx-shop .spx-ad__who small { color: var(--muted); font-size: 12px; }

#spx-shop .spx-ad__status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--ok);
  background: rgba(52, 199, 89, .12);
  font: 600 12px/1.3 var(--f-b);font-weight:600!important;
}
#spx-shop .spx-ad__status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#spx-shop .is-live .spx-ad__status i { animation: shop-pulse 2.2s ease-out infinite; }
#spx-shop .is-updating .spx-ad__status { color: #b86a00; background: rgba(255, 159, 10, .14); }
#spx-shop .is-soon .spx-ad__status { color: var(--muted); background: rgba(11, 16, 32, .06); }

#spx-shop .spx-ad__text { color: #2b3245; font-size: 14.5px; line-height: 1.75; }

#spx-shop .spx-ad__creative {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  place-items: center;
  border-radius: 18px;
  background: var(--cr-glow), var(--cr-bg);
  isolation: isolate;
}
#spx-shop .spx-ad__creative img.is-glass {
  width: auto;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35));
  transition: transform 1s cubic-bezier(.34, 1.4, .64, 1);
}
#spx-shop .spx-ad__creative img.is-cover { width: 100%; height: 100%; object-fit: cover; }
#spx-shop .spx-ad:hover .spx-ad__creative img.is-glass { transform: translateY(-8px) rotate(-5deg) scale(1.05); }
#spx-shop .is-soon .spx-ad__creative img,
#spx-shop .is-updating .spx-ad__creative img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .35)) saturate(.75); opacity: .85; }

#spx-shop .spx-ad__off {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font: 700 12.5px/1.3 var(--f-d);font-weight:700!important;
  direction: ltr;
}

/* ألوان منطقة الإعلان */
#spx-shop .spx-ad--snap { --cr-bg: #0d0d08; --cr-glow: radial-gradient(90% 70% at 50% 40%, rgba(255, 252, 0, .32), transparent 62%); }
#spx-shop .spx-ad--tt { --cr-bg: #06070b; --cr-glow: radial-gradient(60% 55% at 32% 40%, rgba(37, 244, 238, .24), transparent 70%), radial-gradient(60% 55% at 70% 52%, rgba(254, 44, 85, .26), transparent 70%); }
#spx-shop .spx-ad--ig { --cr-bg: #0d0710; --cr-glow: radial-gradient(70% 60% at 40% 36%, rgba(225, 48, 108, .36), transparent 70%), radial-gradient(60% 55% at 70% 62%, rgba(131, 58, 180, .32), transparent 70%), radial-gradient(50% 40% at 30% 72%, rgba(252, 175, 69, .18), transparent 70%); }
#spx-shop .spx-ad--gg { --cr-bg: #070a12; --cr-glow: radial-gradient(55% 50% at 35% 38%, rgba(66, 133, 244, .32), transparent 70%), radial-gradient(45% 40% at 70% 42%, rgba(234, 67, 53, .2), transparent 70%), radial-gradient(45% 40% at 42% 70%, rgba(52, 168, 83, .18), transparent 70%), radial-gradient(35% 30% at 72% 72%, rgba(251, 188, 5, .16), transparent 70%); }
#spx-shop .spx-ad--blue { --cr-bg: linear-gradient(155deg, #3a8cf2, #1d77e5 50%, #145bbf); --cr-glow: radial-gradient(70% 60% at 30% 10%, rgba(255, 255, 255, .24), transparent 65%); }
#spx-shop .spx-ad--ink { --cr-bg: linear-gradient(160deg, #151d33, #0b1020 55%, #05070d); --cr-glow: radial-gradient(70% 60% at 75% 10%, rgba(29, 119, 229, .5), transparent 65%); }
#spx-shop .spx-ad--red { --cr-bg: linear-gradient(155deg, #ff4a6d, #f23055 50%, #cf1a42); --cr-glow: radial-gradient(70% 60% at 30% 10%, rgba(255, 255, 255, .22), transparent 65%); }
#spx-shop .spx-ad--night { --cr-bg: linear-gradient(170deg, #0a1024, #060915 70%); --cr-glow: radial-gradient(75% 60% at 30% 15%, rgba(242, 47, 87, .45), transparent 62%), radial-gradient(60% 50% at 95% 100%, rgba(31, 120, 229, .3), transparent 65%); }

/* شريط الرابط تحت الإعلان */
#spx-shop .spx-ad__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 16px;
  background: var(--paper);
}
#spx-shop .spx-ad__name { min-width: 0; }
#spx-shop .spx-ad__name small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; text-align: right; }
#spx-shop .spx-ad__name h3 { font: 700 16px/1.5 var(--f-d);font-weight:700!important; text-wrap: balance; }
#spx-shop .spx-ad__name h3 a:hover { color: var(--blue); }

#spx-shop .spx-ad__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  transition: gap .4s var(--ease), padding .4s var(--ease), background-color .3s ease;
}
#spx-shop .spx-ad__btn strong { font: 600 14px/1 var(--f-d);font-weight:600!important; }
#spx-shop .spx-ad__btn svg { width: 17px; height: 17px; }
#spx-shop .spx-ad__btn:hover { gap: 12px; padding-inline-end: 12px; background: var(--blue); }
#spx-shop .spx-ad__btn.is-off { color: var(--muted); background: rgba(11, 16, 32, .07); cursor: default; }

#spx-shop .spx-ad__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px 4px 2px; }
#spx-shop .spx-ad__metrics div { min-width: 0; }
#spx-shop .spx-ad__metrics dt { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
#spx-shop .spx-ad__metrics dd { font: 700 14px/1.5 var(--f-d);font-weight:700!important; }
#spx-shop .spx-ad__metrics dd small { color: var(--muted); font-size: 11.5px; }
#spx-shop .spx-ad__metrics dd del { color: var(--muted); font-size: 12px; }
#spx-shop .spx-ad__note { padding: 0 4px; color: var(--muted); font-size: 13.5px; }

/* ---------- التعليقات ---------- */
#spx-shop .shop-reviews { padding-top: clamp(56px, 7vw, 96px); }
#spx-shop .shop-reviews__head { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: clamp(26px, 3.4vw, 40px); }
#spx-shop .shop-reviews__head h2 { font: 700 clamp(28px, 3.6vw, 42px)/1.35 var(--f-d);font-weight:700!important; }
#spx-shop .shop-reviews__head p { color: var(--muted); font-size: 16px; }
#spx-shop .shop-cmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
#spx-shop .spx-cmt { display: flex; gap: 12px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
#spx-shop .spx-cmt__av {
  display: grid;
  flex: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--red));
  font: 700 17px/1 var(--f-d);font-weight:700!important;
}
#spx-shop .spx-cmt__body { min-width: 0; flex: 1; }
#spx-shop .spx-cmt__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#spx-shop .spx-cmt__top strong { font: 700 14.5px/1.4 var(--f-d);font-weight:700!important; }
#spx-shop .spx-cmt__ok { padding: 2px 9px; border-radius: 999px; color: var(--ok); background: rgba(52, 199, 89, .12); font-size: 11.5px; line-height: 1.6; }
#spx-shop .spx-cmt__stars { display: block; margin-top: 2px; color: #f5b400; font-size: 13px; letter-spacing: 2px; }
#spx-shop .spx-cmt p { margin-top: 4px; color: #2b3245; font-size: 14.5px; line-height: 1.8; overflow-wrap: anywhere; }
#spx-shop .spx-cmt__on { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
#spx-shop .shop-more {
  display: flex;
  margin: 26px auto 0;
  min-height: 46px;
  align-items: center;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .18);
  font: 600 14.5px/1 var(--f-d);font-weight:600!important;
}
#spx-shop .shop-more:hover { color: #fff; background: var(--ink); }

@keyframes shop-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); }
  70% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

@media (max-width: 1100px) {
  #spx-shop .shop-grid,
  #spx-shop .shop-cmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #spx-shop .shop-hero__row { gap: 18px; }
  #spx-shop .shop-kpis { width: 100%; min-width: 0; gap: 8px; }
  #spx-shop .shop-kpis div { padding: 11px 12px 10px; border-radius: 16px; }
  #spx-shop .shop-bar__label { display: none; }
  #spx-shop .shop-bar { top: calc(var(--spx-hh, 72px) + 2px); }
  #spx-shop .shop-goals { margin-inline: -16px; padding-inline: 16px; }
  #spx-shop .shop-grid,
  #spx-shop .shop-cmts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #spx-shop .spx-ad { border-radius: 24px; }
  #spx-shop .spx-ad__name h3 { font-size: 15px; }
  #spx-shop .spx-ad__btn { min-height: 40px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #spx-shop *, #spx-shop *::before, #spx-shop *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   6) صفحة السلة — «مراجعة قبل النشر» (html.spx-cart-page)
   ===================================================================== */
html.spx-cart-page {
  --c-ink: #0b1020;
  --c-paper: #f4f5f9;
  --c-muted: #5a6376;
  --c-line: rgba(11, 16, 32, .09);
  --c-blue: #1d77e5;
  --c-red: #f23055;
  --c-ok: #1f9d4a;
  --c-fd: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --c-fb: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --c-ease: cubic-bezier(.22, 1, .36, 1);
}
html.spx-cart-page body { background: var(--c-paper) !important; }
html.spx-cart-page .spx-c-hide { display: none !important; }
html.spx-cart-page [hidden] { display: none !important; }

/* ---------- الرأس ---------- */
.spx-c-hero { padding: clamp(26px, 4vw, 44px) 0 6px; font-family: var(--c-fb); text-align: right; }
.spx-c-hero__in { display: grid; gap: 14px; }
.spx-c-kicker {
  display: inline-flex;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 15px;
  border-radius: 999px;
  color: var(--c-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-line);
  font: 600 13px/1.3 var(--c-fb);font-weight:600!important;
}
.spx-c-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); box-shadow: 0 0 0 4px rgba(29, 119, 229, .16); }
.spx-c-kicker--soft { color: var(--c-blue); background: rgba(29, 119, 229, .08); box-shadow: none; }
.spx-c-hero__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.spx-c-hero h1 { margin: 0; color: var(--c-ink); font: 700 clamp(28px, 4vw, 46px)/1.3 var(--c-fd);font-weight:700!important; letter-spacing: -.01em; }
.spx-c-count { color: var(--c-muted); font: 500 15px/1.4 var(--c-fb);font-weight:500!important; }

.spx-c-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; max-width: 520px; }
.spx-c-steps li { display: flex; flex: 1; align-items: center; gap: 9px; color: var(--c-muted); font: 500 13.5px/1.3 var(--c-fb);font-weight:500!important; }
.spx-c-steps li:last-child { flex: none; }
.spx-c-steps li:not(:last-child)::after { flex: 1; height: 2px; margin-inline: 10px; border-radius: 2px; background: rgba(11, 16, 32, .12); content: ""; }
.spx-c-steps li.is-done::after { background: var(--c-blue); }
.spx-c-steps span {
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--c-muted);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(11, 16, 32, .14);
  font: 700 13px/1 var(--c-fd);font-weight:700!important;
}
.spx-c-steps span svg { width: 16px; height: 16px; }
.spx-c-steps b { font: 600 13.5px/1.3 var(--c-fb);font-weight:600!important; white-space: nowrap; }
.spx-c-steps .is-done span { color: #fff; background: var(--c-blue); box-shadow: none; }
.spx-c-steps .is-done b { color: var(--c-ink); }
.spx-c-steps .is-now span { color: #fff; background: var(--c-ink); box-shadow: 0 0 0 5px rgba(11, 16, 32, .1); }
.spx-c-steps .is-now b { color: var(--c-ink); }

/* ---------- بطاقات المنتجات ---------- */
html.spx-cart-page .main-content { font-family: var(--c-fb); }
html.spx-cart-page .main-content form.p-form { margin: 0; }
html.spx-cart-page section.spx-c-item {
  position: relative;
  margin-bottom: 14px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--c-line), 0 22px 44px -36px rgba(11, 16, 32, .45);
  transition: box-shadow .4s var(--c-ease), transform .4s var(--c-ease);
}
html.spx-cart-page section.spx-c-item:hover { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .14), 0 28px 50px -34px rgba(11, 16, 32, .5); }
html.spx-cart-page .spx-c-item > div:first-of-type > div:first-child { padding-bottom: 0 !important; align-items: center; }
html.spx-cart-page .spx-c-item img {
  width: 104px !important;
  height: 104px !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
html.spx-cart-page .spx-c-item h2 { margin: 0; padding-inline-end: 52px; line-height: 1.5 !important; }
html.spx-cart-page .spx-c-item h2 a { color: var(--c-ink); font: 700 16.5px/1.5 var(--c-fd) !important;font-weight:700!important; }
html.spx-cart-page .spx-c-item h2 a:hover { color: var(--c-blue); }
html.spx-cart-page .spx-c-item .offer-wrapper { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
html.spx-cart-page .spx-c-item .item-price { color: var(--c-ink) !important; font: 700 16px/1.4 var(--c-fd) !important;font-weight:700!important; }
html.spx-cart-page .spx-c-item .item-original-price,
html.spx-cart-page .spx-c-item .item-regular-price { color: var(--c-muted) !important; font-size: 13px !important; }
html.spx-cart-page .spx-c-free .offer-wrapper > span:not(.spx-c-freetag) { display: none !important; }
html.spx-cart-page .spx-c-freetag { color: var(--c-red); font: 700 16px/1.4 var(--c-fd);font-weight:700!important; }

html.spx-cart-page .spx-c-ready {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--c-ok);
  background: rgba(52, 199, 89, .12);
  font: 600 12px/1.4 var(--c-fb);font-weight:600!important;
}
html.spx-cart-page .spx-c-ready i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* المنتجات رقمية تُشترى مرة واحدة: نخفي الكمية والمجموع المكرر وزر الأمنيات */
html.spx-cart-page .spx-c-qty { display: none !important; }
html.spx-cart-page .spx-c-row { padding: 0 !important; border: 0 !important; }
html.spx-cart-page .spx-c-row > div:first-child { display: none !important; }
html.spx-cart-page .spx-c-item .btn--wishlist { display: none !important; }
html.spx-cart-page .spx-c-item salla-button.btn--delete {
  position: absolute !important;
  top: 14px;
  left: 14px;
  padding: 0 !important;
}
html.spx-cart-page .spx-c-item salla-button.btn--delete button {
  display: grid !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--c-muted) !important;
  background: var(--c-paper) !important;
  transition: color .25s ease, background-color .25s ease;
}
html.spx-cart-page .spx-c-item salla-button.btn--delete button:hover { color: #fff !important; background: var(--c-red) !important; }
html.spx-cart-page .spx-c-item salla-button.btn--delete .s-button-text { display: none !important; }
/* أيقونة الحذف مرسومة بالتنسيق حتى لا يمسحها مكوّن سلة عند إعادة رسمه */
html.spx-cart-page .spx-c-item salla-button.btn--delete button::before {
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M9.5%207V4.5h5V7M6.5%207l1%2013h9l1-13M10%2011v5.5M14%2011v5.5%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M9.5%207V4.5h5V7M6.5%207l1%2013h9l1-13M10%2011v5.5M14%2011v5.5%22/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

/* ---------- الملخص (الميزانية) ---------- */
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--desktop {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 20px !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--c-line), 0 28px 56px -40px rgba(11, 16, 32, .5) !important;
  font-family: var(--c-fb);
}
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--desktop::before {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--c-blue);
  background: rgba(29, 119, 229, .08);
  font: 600 12px/1.4 var(--c-fb);font-weight:600!important;
  content: "الميزانية";
}
html.spx-cart-page .s-cart-summary-card-sheet-title { color: var(--c-ink) !important; font: 700 19px/1.5 var(--c-fd) !important;font-weight:700!important; }
html.spx-cart-page .s-cart-summary-card-line { color: var(--c-muted); font-size: 14.5px; }
html.spx-cart-page .s-cart-summary-card-line b { color: var(--c-ink); font: 600 15px/1.5 var(--c-fd);font-weight:600!important; }
html.spx-cart-page .s-cart-summary-card-bar { border-top: 1px dashed rgba(11, 16, 32, .16) !important; }
html.spx-cart-page .s-cart-summary-card-bar-label-text { color: var(--c-ink); font: 700 16px/1.4 var(--c-fd);font-weight:700!important; }
html.spx-cart-page .s-cart-summary-card-bar-count { color: var(--c-muted); font-size: 12.5px; }
html.spx-cart-page .s-cart-summary-card-bar-total { color: var(--c-ink); font: 800 24px/1.2 var(--c-fd) !important;font-weight:800!important; }

html.spx-cart-page #s-cart-summary-card-submit button,
html.spx-cart-page .s-cart-summary-card-action salla-button button {
  min-height: 56px;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--c-blue) !important;
  box-shadow: 0 16px 30px -16px rgba(29, 119, 229, .9);
  font: 700 16.5px/1 var(--c-fd) !important;font-weight:700!important;
  transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease), background-color .3s ease;
}
html.spx-cart-page #s-cart-summary-card-submit button:hover { background: #1667cc !important; transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(29, 119, 229, .95); }
html.spx-cart-page #s-cart-summary-card-submit .s-button-text { display: inline-flex; align-items: center; gap: 10px; }
html.spx-cart-page #s-cart-summary-card-submit .s-button-text::after { font-size: 19px; line-height: 1; content: "←"; }

html.spx-cart-page .spx-c-pay { display: grid; justify-items: center; gap: 8px; margin-top: 12px; color: var(--c-muted); font: 500 12px/1.4 var(--c-fb);font-weight:500!important; text-align: center; }
html.spx-cart-page .spx-c-pay salla-payments ul,
html.spx-cart-page .spx-c-pay .s-payments-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
html.spx-cart-page .spx-c-pay img { height: 22px; width: auto; }
html.spx-cart-page .s-cart-summary-card--mobile .spx-c-pay { display: none; }

/* الجوال: الشريط السفلي */
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--mobile .s-cart-summary-card-bar,
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--mobile .s-cart-summary-card-action { background: #fff !important; }
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--mobile .s-cart-summary-card-bar { border-top: 0 !important; border-radius: 24px 24px 0 0; box-shadow: 0 -18px 40px -24px rgba(11, 16, 32, .35); }
html.spx-cart-page salla-cart-summary-card.s-cart-summary-card--mobile .s-cart-summary-card-sheet { border-radius: 24px 24px 0 0 !important; }

/* ---------- السلة الفارغة ---------- */
.spx-c-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 8px auto 0;
  padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 40px);
  max-width: 760px;
  border-radius: 28px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-line), 0 30px 60px -44px rgba(11, 16, 32, .5);
  font-family: var(--c-fb);
  text-align: center;
}
.spx-c-empty__art { display: grid; width: 150px; height: 120px; place-items: center; }
.spx-c-empty__art img { width: auto; max-height: 120px; filter: drop-shadow(0 22px 26px rgba(11, 16, 32, .25)); animation: spx-c-float 5s ease-in-out infinite; }
.spx-c-empty h2 { margin: 0; color: var(--c-ink); font: 700 clamp(24px, 3.4vw, 34px)/1.4 var(--c-fd);font-weight:700!important; }
.spx-c-empty > p { margin: 0; max-width: 46ch; color: var(--c-muted); font-size: 16px; line-height: 1.8; }
.spx-c-cta {
  display: inline-flex;
  margin-top: 6px;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--c-ink);
  font-size: 15.5px;
  text-decoration: none !important;
  transition: gap .4s var(--c-ease), background-color .3s ease;
}
.spx-c-cta strong { font: 700 15.5px/1 var(--c-fd);font-weight:700!important; }
.spx-c-cta svg { width: 18px; height: 18px; }
.spx-c-cta:hover { gap: 14px; background: var(--c-blue); }

.spx-c-sugs { display: grid; gap: 10px; width: 100%; margin-top: 20px; padding-top: 22px; border-top: 1px dashed rgba(11, 16, 32, .14); text-align: right; }
.spx-c-sugs__t { color: var(--c-muted); font: 600 13px/1.4 var(--c-fb);font-weight:600!important; }
.spx-c-sug {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 18px;
  color: var(--c-ink) !important;
  background: var(--c-paper);
  text-decoration: none !important;
  transition: background-color .3s ease, transform .4s var(--c-ease);
}
.spx-c-sug:hover { background: #eceef4; transform: translateX(-4px); }
.spx-c-sug__art { display: grid; flex: none; width: 64px; height: 64px; place-items: center; border-radius: 14px; background: #0b1020; overflow: hidden; }
.spx-c-sug__art img { width: auto; height: 46px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.spx-c-sug--snap .spx-c-sug__art { background: radial-gradient(80% 70% at 50% 40%, rgba(255, 252, 0, .35), transparent 65%), #0d0d08; }
.spx-c-sug--night .spx-c-sug__art { background: radial-gradient(80% 70% at 30% 20%, rgba(242, 47, 87, .5), transparent 65%), #060915; }
.spx-c-sug--blue .spx-c-sug__art { background: linear-gradient(155deg, #3a8cf2, #1d77e5 50%, #145bbf); }
.spx-c-sug--ink .spx-c-sug__art { background: radial-gradient(80% 70% at 75% 15%, rgba(29, 119, 229, .5), transparent 65%), #0b1020; }
.spx-c-sug--red .spx-c-sug__art { background: linear-gradient(155deg, #ff4a6d, #f23055 50%, #cf1a42); }
.spx-c-sug__body { display: grid; flex: 1; min-width: 0; gap: 1px; }
.spx-c-sug__body small { color: var(--c-muted); font-size: 11.5px; line-height: 1.4; }
.spx-c-sug__body strong { font: 700 15px/1.45 var(--c-fd);font-weight:700!important; }
.spx-c-sug__price { display: flex; align-items: baseline; gap: 5px; color: var(--c-ink); font-size: 13px; }
.spx-c-sug__price strong { font: 700 14px/1.3 var(--c-fd);font-weight:700!important; }
.spx-c-sug__price small { color: var(--c-muted); font-size: 11.5px; }
.spx-c-sug__price del { color: var(--c-muted); font-size: 11.5px; }
.spx-c-sug__price .is-free { color: var(--c-red); }
.spx-c-sug__go { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: var(--c-ink); }
.spx-c-sug__go svg { width: 17px; height: 17px; }

@keyframes spx-c-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

@media (max-width: 700px) {
  html.spx-cart-page .spx-c-item img { width: 84px !important; height: 84px !important; border-radius: 14px !important; }
  html.spx-cart-page .spx-c-item h2 a { font-size: 15.5px !important; }
  .spx-c-steps b { font-size: 12.5px; }
  .spx-c-steps li:not(:last-child)::after { margin-inline: 6px; }
  .spx-c-empty { border-radius: 24px; }
  /* المساحة السفلية محجوزة لشريط الإتمام الثابت، ولا داعي لها في السلة الفارغة */
  html.spx-cart-empty .spx-c-wrap { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spx-c-empty__art img { animation: none; }
  html.spx-cart-page section.spx-c-item,
  .spx-c-cta, .spx-c-sug { transition: none; }
}