/* تصميم مواقع القالب: كل لون وخط وزاوية من متغيرات الهوية، والتجاوب باستعلامات الحاوية */
.sx{container:sx/inline-size;background:var(--x-bg);color:var(--x-ink);font-family:var(--x-fb);font-size:16px;line-height:1.8;direction:rtl;text-align:right;position:relative;overflow:clip}
.sx *{box-sizing:border-box}
:where(.sx a){color:inherit;text-decoration:none}
:where(.sx button){font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:where(.sx img){max-width:100%;display:block}
:where(.sx h1,.sx h2,.sx h3,.sx p,.sx blockquote,.sx figure,.sx ul,.sx form){margin:0}
.sx h1,.sx h2,.sx h3,.sx b{font-weight:700}
.sx .i{width:1.15em;height:1.15em;flex-shrink:0}
.xs,.xsolid{--x-muted:color-mix(in srgb,var(--x-ink) 64%,var(--x-bg));--x-line:color-mix(in srgb,var(--x-ink) 13%,var(--x-bg))}
.xs{position:relative;padding-block:calc(64px*var(--x-sp));color:var(--x-ink)}
.xs[data-pad=s]{padding-block:calc(36px*var(--x-sp))}
.xs[data-pad=l]{padding-block:calc(96px*var(--x-sp))}
.xw{max-width:1160px;margin-inline:auto;padding-inline:24px;position:relative;z-index:1}
.num{font-variant-numeric:tabular-nums}
.c{text-align:center}
.xmut{color:var(--x-muted)}
.xsm{font-size:13px}

/* بطاقة صلبة: تحتفظ بألوان الهوية الأصلية فوق أي خلفية */
.xsolid{--x-ink:var(--x-inkB);--x-bg:var(--x-surfaceB);--x-ac:var(--x-acB);--x-on-ac:var(--x-on-acB);--x-soft:var(--x-softB);--x-surface:var(--x-surfaceB);background:var(--x-surfaceB);color:var(--x-ink);border:1px solid var(--x-line);border-radius:var(--x-r)}

/* الخلفيات */
.xs[data-bg=soft]{background:var(--x-soft)}
.xs[data-bg=surface]{background:var(--x-surfaceB)}
.xs[data-bg=accent],.xs[data-bg=grad]{--x-bg:var(--x-acB);--x-ink:var(--x-on-acB);--x-ac:var(--x-ac2B);--x-on-ac:var(--x-on-ac2);--x-soft:color-mix(in srgb,var(--x-on-acB) 10%,transparent);background:var(--x-acB)}
.xs[data-bg=grad]{background:linear-gradient(135deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 50%,var(--x-ac2B)))}
.xs[data-bg=dark]{--x-bg:var(--x-deep);--x-ink:#F3F4F2;--x-ac:var(--x-acL);--x-on-ac:var(--x-on-acL);--x-soft:rgba(255,255,255,.06);background:var(--x-deep)}
.xs[data-bg=mesh]::before,.xs[data-bg=geo]::before,.xs[data-bg=img]::before{content:"";position:absolute;inset:0;pointer-events:none}
.xs[data-bg=mesh]{background:var(--x-bg);overflow:hidden}
.xs[data-bg=mesh]::before{inset:-25%;background:radial-gradient(38% 38% at 22% 30%,color-mix(in srgb,var(--x-acB) 32%,transparent),transparent 70%),radial-gradient(34% 34% at 78% 62%,color-mix(in srgb,var(--x-ac2B) 40%,transparent),transparent 70%),radial-gradient(30% 30% at 50% 95%,color-mix(in srgb,var(--x-acB) 22%,transparent),transparent 70%);filter:blur(10px);animation:x-mesh 16s ease-in-out infinite alternate}
@keyframes x-mesh{to{transform:translate(6%,-5%) rotate(8deg) scale(1.08)}}
.xs[data-bg=geo]{background:var(--x-soft)}
.xs[data-bg=geo]::before{background:var(--x-acB);opacity:.13;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 4l10 26 26 10-26 10-10 26-10-26L4 40l26-10z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='80' cy='0' r='3'/%3E%3Ccircle cx='0' cy='80' r='3'/%3E%3Ccircle cx='80' cy='80' r='3'/%3E%3C/svg%3E") 0 0/80px 80px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 4l10 26 26 10-26 10-10 26-10-26L4 40l26-10z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='80' cy='0' r='3'/%3E%3Ccircle cx='0' cy='80' r='3'/%3E%3Ccircle cx='80' cy='80' r='3'/%3E%3C/svg%3E") 0 0/80px 80px}
.xs[data-bg=dots]{background:radial-gradient(color-mix(in srgb,var(--x-ink) 20%,transparent) 1.3px,transparent 1.6px) 0 0/22px 22px,var(--x-bg)}
.xs[data-bg=grid]{background:linear-gradient(color-mix(in srgb,var(--x-ink) 7%,transparent) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,color-mix(in srgb,var(--x-ink) 7%,transparent) 1px,transparent 1px) 0 0/40px 40px,var(--x-bg)}
.xs[data-bg=img]{background:var(--img,none) center/cover,var(--x-deep)}
.xs[data-bg=img][data-ov=dark]{--x-bg:#111;--x-ink:#fff;--x-ac:var(--x-acL);--x-on-ac:var(--x-on-acL);--x-soft:rgba(255,255,255,.08)}
.xs[data-bg=img][data-ov=dark]::before{background:linear-gradient(to left,rgba(0,0,0,.72),rgba(0,0,0,.35))}
.xs[data-bg=img][data-ov=accent]{--x-bg:var(--x-acB);--x-ink:var(--x-on-acB);--x-ac:var(--x-ac2B);--x-on-ac:var(--x-on-ac2);--x-soft:rgba(255,255,255,.1)}
.xs[data-bg=img][data-ov=accent]::before{background:color-mix(in srgb,var(--x-acB) 80%,transparent)}
.xs[data-bg=img][data-ov=light]::before{background:color-mix(in srgb,var(--x-bgB) 82%,transparent)}

/* الفواصل بين الأقسام: حافة علوية مشكّلة تتداخل مع القسم السابق */
.xs[data-div=wave],.xs[data-div=slant],.xs[data-div=arc],.xs[data-div=zig]{margin-top:-50px;padding-top:calc(64px*var(--x-sp) + 50px)}
.xs[data-div=wave]{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50V25C150 0 300 0 450 25S750 50 900 25 1100 0 1200 25V50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50V25C150 0 300 0 450 25S750 50 900 25 1100 0 1200 25V50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat}
.xs[data-div=slant]{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50L1200 0V50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50L1200 0V50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat}
.xs[data-div=arc]{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50Q600 -40 1200 50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50Q600 -40 1200 50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat}
.xs[data-div=zig]{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50L50 20 100 50 150 20 200 50 250 20 300 50 350 20 400 50 450 20 500 50 550 20 600 50 650 20 700 50 750 20 800 50 850 20 900 50 950 20 1000 50 1050 20 1100 50 1150 20 1200 50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50L50 20 100 50 150 20 200 50 250 20 300 50 350 20 400 50 450 20 500 50 550 20 600 50 650 20 700 50 750 20 800 50 850 20 900 50 950 20 1000 50 1050 20 1100 50 1150 20 1200 50z'/%3E%3C/svg%3E") top/100% 51px no-repeat,linear-gradient(#000,#000) 0 50px/100% 100% no-repeat}

/* الطباعة */
.xh1{font-family:var(--x-fd);font-size:calc(clamp(34px,6.4cqi,74px)*var(--x-scale));line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.xh2{font-family:var(--x-fd);font-size:calc(clamp(26px,4.1cqi,46px)*var(--x-scale));line-height:1.28;text-wrap:balance}
.xh3{font-family:var(--x-fd);font-size:calc(19px*var(--x-scale));line-height:1.45}
.xkick{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--x-ac);padding:4px 13px;border-radius:99px;background:color-mix(in srgb,var(--x-ac) 13%,transparent);width:max-content;max-width:100%}
.xlead{font-size:clamp(16px,2.1cqi,19px);color:var(--x-muted);max-width:56ch}
.xsub{color:var(--x-muted);max-width:62ch}
.xhead{display:grid;gap:12px;margin-bottom:32px;justify-items:start;max-width:780px}
.xhead.c{justify-items:center;text-align:center;margin-inline:auto}
.xhead.c .xsub{margin-inline:auto}
.xhead-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.xhead-row .xhead{margin:0}.xhead-row .xbtns{margin:0}
.xchk{list-style:none;padding:0;display:grid;gap:10px;margin-top:22px}
.xchk li{display:flex;gap:10px;align-items:flex-start}
.xchk .i{color:var(--x-ac);margin-top:5px;stroke-width:2.6}
.xchk.two{grid-template-columns:1fr 1fr}
.xlink{display:inline-flex;align-items:center;gap:6px;color:var(--x-ac);font-weight:600;margin-top:10px}
.xlink:hover .i{transform:translateX(-4px)}.xlink .i{transition:transform .3s}
.xstars{color:#E8A317;letter-spacing:1px;font-size:15px}.xstars i{font-style:normal;opacity:.25}.xstars i.on{opacity:1}
.xchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.xchips.c{justify-content:center}
.xchips span,.xchips button{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:99px;font-size:13.5px;border:1px solid var(--x-line);background:color-mix(in srgb,var(--x-ink) 3%,transparent)}
.xchips button.on{background:var(--x-ac);color:var(--x-on-ac);border-color:var(--x-ac)}

/* الأزرار */
.xbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.xh-center .xbtns,.xhead.c~.xbtns,.xhead.c+.xbtns,.xkin~.xbtns,.xctabig .xbtns{justify-content:center}
.xs[data-align=start] .xbtns{justify-content:flex-start}
.xs[data-align=center] .xbtns{justify-content:center}
.xs[data-align=end] .xbtns{justify-content:flex-end}
.xs[data-align=full] .xbtns .xb{flex:1 1 200px;justify-content:center}
.xb{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:.86em 1.65em;border-radius:calc(var(--x-r)*.75);font-weight:600;font-size:15.5px;line-height:1.2;position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;cursor:pointer;white-space:nowrap;border:1.5px solid transparent}
.xb.p{background:var(--x-ac);color:var(--x-on-ac)}
.xb.s{border-color:color-mix(in srgb,var(--x-ink) 28%,transparent);color:var(--x-ink)}
.xb.s:hover{border-color:var(--x-ac);color:var(--x-ac)}
.xb .i{width:18px;height:18px}
.xb.full,.xblock{display:flex;width:100%}
.xbt{display:inline-block}
.xarr{transition:transform .3s}
.xb:hover .xarr{transform:translateX(-5px)}
/* أشكال الأزرار */
.sx[data-btn=pill] .xb{border-radius:999px}
.sx[data-btn=sharp] .xb{border-radius:0}
.sx[data-btn=soft] .xb.p{background:color-mix(in srgb,var(--x-ac) 16%,transparent);color:var(--x-ac)}
.sx[data-btn=outline] .xb.p{background:transparent;color:var(--x-ac);border:2px solid var(--x-ac)}
.sx[data-btn=outline] .xb.p:hover{background:var(--x-ac);color:var(--x-on-ac)}
.sx[data-btn=gradient] .xb.p{background:linear-gradient(115deg,var(--x-ac),color-mix(in srgb,var(--x-ac) 40%,var(--x-ac2)));color:var(--x-on-ac);border-radius:999px}
.sx[data-btn=raised] .xb.p{box-shadow:0 5px 0 color-mix(in srgb,var(--x-ac) 55%,#000);margin-bottom:5px}
.sx[data-btn=raised] .xb.p:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--x-ac) 55%,#000)}
.sx[data-btn=glass] .xb.p{background:color-mix(in srgb,var(--x-ac) 72%,transparent);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -12px var(--x-ac);border-radius:16px}
.sx[data-btn=line] .xb.p{background:none;color:var(--x-ac);padding-inline:2px;border-radius:0}
.sx[data-btn=line] .xb.p::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:2px;background:currentColor;transform-origin:right;transition:transform .35s}
.sx[data-btn=line] .xb.p:hover::after{transform:scaleX(.35)}
.sx[data-btn=offset] .xb{border:2px solid var(--x-ink);border-radius:8px}
.sx[data-btn=offset] .xb.p{box-shadow:5px 5px 0 var(--x-ink)}
.sx[data-btn=offset] .xb.p:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--x-ink)}
/* مؤثرات الأزرار */
.sx[data-fx=shine] .xb.p::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(120%);animation:x-shine 3.4s ease-in-out infinite}
@keyframes x-shine{0%,55%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
.sx[data-fx=fill] .xb.p::before,.sx[data-fx=fill] .xb.s::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--x-ink);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.sx[data-fx=fill] .xb.s::before{background:var(--x-ac)}
.sx[data-fx=fill] .xb:hover::before{transform:scaleX(1)}
.sx[data-fx=fill] .xb.p:hover{color:var(--x-bg)}
.sx[data-fx=fill] .xb.s:hover{color:var(--x-on-ac);border-color:var(--x-ac)}
.sx[data-fx=lift] .xb:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--x-ac) 80%,#000)}
.sx[data-fx=pulse] .xb.p{animation:x-pulse 2s ease-out infinite}
@keyframes x-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--x-ac) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.sx[data-fx=arrow] .xb .xarr{animation:x-nudge 1.6s ease-in-out infinite}
@keyframes x-nudge{0%,100%{transform:none}50%{transform:translateX(-6px)}}
.sx[data-fx=glow] .xb.p{animation:x-glow 2.6s ease-in-out infinite}
@keyframes x-glow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--x-ac) 22%,transparent),0 12px 34px -8px var(--x-ac)}}
.sx[data-fx=roll] .xbt{text-shadow:0 2.5em currentColor;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.sx[data-fx=roll] .xb:hover .xbt{transform:translateY(-2.5em)}
.sx[data-fx=wiggle] .xb.p{animation:x-wig 4s ease-in-out infinite}
@keyframes x-wig{0%,86%,100%{transform:none}89%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}95%{transform:rotate(-2deg)}}
.xripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.55);animation:x-rip .7s ease-out forwards;pointer-events:none}
@keyframes x-rip{to{transform:scale(28);opacity:0}}
.sx[data-fx=magnet] .xb{transition:transform .18s ease-out}

/* الرموز */
.xic{width:54px;height:54px;display:grid;place-items:center;border-radius:calc(var(--x-r)*.85);flex-shrink:0;background:color-mix(in srgb,var(--x-ac) 13%,transparent);color:var(--x-ac);position:relative}
.xic .i{width:26px;height:26px}
.sx[data-icst=solid] .xic{background:var(--x-ac);color:var(--x-on-ac)}
.sx[data-icst=ring] .xic{background:none;border:2px solid color-mix(in srgb,var(--x-ac) 60%,transparent);border-radius:50%}
.sx[data-icst=plain] .xic{background:none;width:auto;height:auto;justify-content:start}
.sx[data-icst=plain] .xic .i{width:36px;height:36px}
.sx[data-icst=duo] .xic{background:color-mix(in srgb,var(--x-ac2) 35%,transparent);border-radius:16px 16px 16px 4px}
.sx[data-icst=duo] .xic::after{content:"";position:absolute;inset:auto auto -6px -6px;width:18px;height:18px;border-radius:6px;background:var(--x-ac);opacity:.85;z-index:-1}
.sx[data-icst=grad] .xic{background:linear-gradient(135deg,var(--x-ac),var(--x-ac2));color:#fff;border-radius:50%}

/* الظهور والحركة */
.sx[data-motion=on] .xs.in .rv{animation:x-rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*90ms)}
.sx[data-anim=zoom][data-motion=on] .xs.in .rv{animation-name:x-zoom}
.sx[data-anim=slide][data-motion=on] .xs.in .rv{animation-name:x-slide}
.sx[data-anim=blur][data-motion=on] .xs.in .rv{animation-name:x-blur}
.sx[data-anim=none] .xs.in .rv{animation:none}
@keyframes x-rise{from{opacity:.15;transform:translateY(28px)}}
@keyframes x-zoom{from{opacity:.15;transform:scale(.93)}}
@keyframes x-slide{from{opacity:.15;transform:translateX(-40px)}}
@keyframes x-blur{from{opacity:.2;filter:blur(10px)}}
.sx[data-motion=off] *,.sx[data-motion=off] *::before,.sx[data-motion=off] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.sx *,.sx *::before,.sx *::after{animation-duration:.001s!important;animation-iteration-count:1!important}}

/* الصور والرسوم */
.xim{position:relative;overflow:hidden;border-radius:var(--x-r);background:var(--x-soft)}
.xim>svg,.xim>img{width:100%;height:100%;object-fit:cover;display:block}
.xim.xr{aspect-ratio:4/3}
.xarch{border-radius:999px 999px var(--x-r) var(--x-r);aspect-ratio:4/5}
.xavatar{width:58px;height:58px;border-radius:50%;flex-shrink:0}.xavatar.sm{width:44px;height:44px}
.xcirc{width:150px;height:150px;border-radius:50%;margin-inline:auto}
.art-wave{animation:x-wave 5s linear infinite}.art-wave.b{animation-duration:3.4s}
@keyframes x-wave{to{transform:translateX(200px)}}
.art-sun{animation:x-sun 8s ease-in-out infinite alternate;transform-origin:center}
@keyframes x-sun{to{transform:translateY(-14px)}}
.art-grow{transform-origin:200px 250px;animation:x-grow 6s ease-in-out infinite alternate}
@keyframes x-grow{from{transform:scale(.94)}to{transform:scale(1.03)}}
.art-coin{animation:x-coin 3s ease-in-out infinite}.art-coin.b{animation-delay:-1.5s}
@keyframes x-coin{50%{transform:translateY(-16px)}}
.art-beat{transform-origin:220px 160px;animation:x-beat 1.6s ease-in-out infinite}
@keyframes x-beat{30%{transform:scale(1.12)}60%{transform:scale(.97)}}

/* الشريط والأشرطة */
.xbar{height:9px;border-radius:99px;background:color-mix(in srgb,var(--x-ink) 10%,transparent);overflow:hidden}
.xbar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--x-ac)}
.xbar.big{height:13px}
.xbar.hot i{background:linear-gradient(90deg,#E4572E,var(--x-ac2))}
.sx[data-motion=on] .xs.in .xbar i{animation:x-w 1.6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*120ms + 200ms)}
@keyframes x-w{from{width:0}}

/* البطاقات العامة */
.xcards{display:grid;gap:22px}
.xcards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.xcards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xcards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.xcard{padding:28px;display:grid;gap:12px;align-content:start;transition:transform .35s,box-shadow .35s}
.xcard:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px color-mix(in srgb,var(--x-inkB) 60%,transparent)}
.xcard.c{justify-items:center;text-align:center}
.xsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.xsplit.xmed{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.xnarrow{max-width:820px;margin-inline:auto}

/* الرأس */
.xt-header{padding-block:14px;z-index:6}
.xhd{display:flex;align-items:center;gap:28px;min-height:58px}
.xbrand{display:flex;align-items:center;gap:10px;font-family:var(--x-fd);font-size:21px;flex-shrink:0}
.xmark{width:32px;height:32px}
.xlogo{height:40px;width:auto;max-width:160px;object-fit:contain}
.xnav{display:flex;gap:26px;font-size:15px;flex:1;justify-content:center}
.xnav a{opacity:.82;transition:color .2s,opacity .2s;position:relative}
.xnav a:hover{opacity:1;color:var(--x-ac)}
.xhd .xbtns{margin:0}
.xhd .xb{padding:.7em 1.3em;font-size:14.5px}
.xburger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--x-line);flex-direction:column;justify-content:center;align-items:center;gap:4px}
.xburger i{width:18px;height:2px;background:currentColor;border-radius:2px}
.xt-header.xv1 .xhd{justify-content:center}
.xt-header.xv1 .xnav:first-child{justify-content:flex-start}
.xt-header.xv1 .xnav:nth-child(3){justify-content:flex-end}
.xt-header.xv2{position:sticky;top:0;background:transparent;padding-block:12px}
.xpill{background:color-mix(in srgb,var(--x-surfaceB) 88%,transparent);backdrop-filter:blur(12px);border:1px solid var(--x-line);border-radius:999px;padding:8px 22px 8px 10px;box-shadow:0 16px 40px -28px rgba(0,0,0,.45)}
.xt-header.xv3{padding-top:0}
.xtopbar{background:var(--x-deep);color:#EEF;font-size:13px;padding-block:7px;margin-bottom:12px}
.xtopbar .xw{display:flex;gap:22px;align-items:center}
.xtopbar span{display:inline-flex;align-items:center;gap:6px;opacity:.85}
.xtb-end{margin-inline-start:auto}

/* البطل: عام */
.xt-hero{padding-block:calc(56px*var(--x-sp)) calc(72px*var(--x-sp))}
.xh-copy{display:grid;justify-items:start;gap:16px;min-width:0}
.xh-copy .xbtns{margin-top:12px}
.xh-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.xh-split.xrev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.xh-center{display:grid;justify-items:center;text-align:center;max-width:900px;margin-inline:auto}
.xh-center .xh-copy{justify-items:center}
.xh-center .xlead{margin-inline:auto}
/* ٠ حملة */
.xt-hero.xv0{min-height:560px;display:flex;align-items:center;--x-ink:#fff;--x-muted:rgba(255,255,255,.78);--x-ac:var(--x-acL);--x-on-ac:var(--x-on-acL)}
.xt-hero.xv0 .xw{width:100%}
.xh-media{position:absolute;inset:0;z-index:0}
.xh-media .xim{position:absolute;inset:0;border-radius:0;height:100%}
.xh-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,color-mix(in srgb,var(--x-deep) 92%,transparent) 0%,color-mix(in srgb,var(--x-deep) 70%,transparent) 50%,color-mix(in srgb,var(--x-deep) 25%,transparent))}
.xh-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.xt-hero.xv0 .xh-copy .xkick{background:rgba(255,255,255,.14);color:#fff}
.xcamp{padding:26px;display:grid;gap:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.xcamp-top{display:flex;gap:14px;align-items:center}
.xcamp-top b{display:block;font-size:17px}.xcamp-top small{color:var(--x-muted)}
.xcamp-n{display:flex;justify-content:space-between;align-items:baseline}
.xcamp-n b{font-family:var(--x-fd);font-size:26px;color:var(--x-ac)}
.xamts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xamts.sm{grid-template-columns:repeat(2,auto)}
.xamt{border:1.5px solid var(--x-line)!important;border-radius:calc(var(--x-r)*.6);padding:9px 4px;font-size:14px;font-weight:600;transition:.2s}
.xamts.sm .xamt{padding:6px 12px}
.xamt.on{border-color:var(--x-ac)!important;background:color-mix(in srgb,var(--x-ac) 12%,transparent);color:var(--x-ac)}
.xsecure{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12.5px;color:var(--x-muted)}
.xcamp .xsm{text-align:center}
/* ١ نمو الوقف */
.xh-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--x-line)}
.xh-stats div{display:grid}
.xh-stats b{font-family:var(--x-fd);font-size:30px;color:var(--x-ac);line-height:1.2}
.xh-stats span{font-size:13px;color:var(--x-muted)}
.xflow{position:relative;display:grid;gap:0;justify-items:center;padding:24px 0}
.xflow-n{display:flex;align-items:center;gap:14px;background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);border-radius:var(--x-r);padding:12px 22px 12px 14px;min-width:260px;position:relative;z-index:2;box-shadow:0 14px 30px -22px rgba(0,0,0,.4)}
.xflow-n b{font-size:16px}
.xflow-l{width:3px;height:34px;position:relative;z-index:1;background:color-mix(in srgb,var(--x-ac) 25%,transparent);overflow:hidden}
.xflow-l i{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--x-ac) 0 8px,transparent 8px 16px);animation:x-flow 1s linear infinite}
@keyframes x-flow{to{transform:translateY(16px)}}
.xflow-art{position:absolute;width:62%;inset-inline-start:-14%;top:4%;opacity:.55;z-index:0}
/* ٢ القصص */
.xstories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:center}
.xstory{background:var(--x-surfaceB);color:var(--x-inkB);border-radius:calc(var(--x-r) + 6px);overflow:hidden;border:1px solid var(--x-line);box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
.xstory .xim{aspect-ratio:4/3;border-radius:0}
.xstory:nth-child(2){transform:translateY(-22px) scale(1.04)}
.xstory-b{padding:20px;display:grid;gap:8px}
.xstory-b p{font-family:var(--x-fd);font-size:17px}
.xq{width:30px;height:30px;color:var(--x-ac);opacity:.6}
/* ٣ الخريطة */
.xbig{display:grid;margin-top:6px}
.xbig b{font-family:var(--x-fd);font-size:clamp(44px,7cqi,76px);line-height:1.1;color:var(--x-ac)}
.xbig span{color:var(--x-muted)}
.xhex{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xhex span{aspect-ratio:1.1;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:color-mix(in srgb,var(--x-ac) calc(18% + var(--d)*7%),var(--x-soft));display:grid;place-items:center;font-size:12.5px;font-weight:600;position:relative;color:var(--x-ink)}
.xhex span:nth-child(4n+2),.xhex span:nth-child(4n+4){transform:translateY(50%)}
.xhex span i{position:absolute;top:22%;width:9px;height:9px;border-radius:50%;background:var(--x-ac2);animation:x-ping 2.4s ease-out infinite;animation-delay:calc(var(--d)*-.3s)}
@keyframes x-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--x-ac2) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* ٤ الصورة الشخصية */
.xport{position:relative;padding:30px}
.xport .xim{max-width:420px;margin-inline:auto;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.xorbit{position:absolute;inset:0}
.xorbit span{position:absolute;top:50%;left:50%;--r:min(46cqi,250px);transform:rotate(calc(var(--k)*120deg)) translate(var(--r)) rotate(calc(var(--k)*-120deg));background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);border-radius:99px;padding:7px 16px;font-weight:700;font-size:14px;white-space:nowrap;margin:-18px 0 0 -50px;box-shadow:0 12px 26px -16px rgba(0,0,0,.4);animation:x-bob2 5s ease-in-out infinite;animation-delay:calc(var(--k)*-1.6s)}
@keyframes x-bob2{50%{translate:0 -12px}}
@keyframes x-spin{to{transform:rotate(360deg)}}
.xsign{font-family:"Amiri","El Messiri",serif;font-size:30px;color:var(--x-ac);transform:rotate(-3deg);margin-top:4px}
.xcreds{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--x-muted)}
.xcreds span{display:flex;align-items:center;gap:6px}
/* ٥ الكتاب */
.xrate{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xbookw{position:relative;display:grid;place-items:center;perspective:1200px;padding:30px}
.xbook{position:relative;width:min(300px,70cqi);aspect-ratio:2/3;transform:rotateY(-24deg) rotateX(4deg);transform-style:preserve-3d;animation:x-book 7s ease-in-out infinite alternate}
@keyframes x-book{to{transform:rotateY(-12deg) rotateX(2deg) translateY(-10px)}}
.xbook-c{position:absolute;inset:0;border-radius:4px 12px 12px 4px;background:linear-gradient(150deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 55%,#000));color:#fff;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:24px 30px 60px -20px rgba(0,0,0,.55),inset 6px 0 0 rgba(255,255,255,.12);overflow:hidden}
.xbook-c::after{content:"";position:absolute;inset:auto -30% -30% auto;width:90%;aspect-ratio:1;border-radius:50%;border:22px solid var(--x-ac2B);opacity:.55}
.xbook-c b{font-family:var(--x-fd);font-size:clamp(26px,4.5cqi,40px);line-height:1.2;position:relative;z-index:1}
.xbook-c i{height:3px;width:50px;background:var(--x-ac2B)}
.xbook-c small{position:relative;z-index:1;font-size:15px;opacity:.9}
.xbook-p{position:absolute;top:2%;bottom:2%;inset-inline-start:100%;width:22px;transform:rotateY(90deg);transform-origin:left;background:repeating-linear-gradient(to bottom,#f4f1ea 0 2px,#e2ddd2 2px 3px)}
.xspark{position:absolute;color:var(--x-ac2B);animation:x-tw 3s ease-in-out infinite}
.xspark .i{width:30px;height:30px}
.xspark.s1{top:8%;inset-inline-end:16%}.xspark.s2{bottom:12%;inset-inline-start:10%;animation-delay:-1.5s}
@keyframes x-tw{50%{transform:scale(.6) rotate(30deg);opacity:.5}}
/* ٦ المعرض */
.xt-hero.xv6{padding-block:20px 60px}
.xcollage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:200px 200px;gap:12px;padding-inline:12px}
.xcollage .xim{height:100%;animation:x-drift 12s ease-in-out infinite alternate}
.xcollage .xc1{grid-row:span 2;grid-column:span 2}.xcollage .xc2{animation-delay:-3s}.xcollage .xc4{grid-column:span 1;animation-delay:-6s}
@keyframes x-drift{to{transform:translateY(-8px) scale(1.01)}}
.xh-over{margin-top:-120px;max-width:620px;padding:32px;box-shadow:0 40px 80px -40px rgba(0,0,0,.5);position:relative;z-index:2}
/* ٧ الحجز */
.xtrust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--x-muted);margin-top:6px}
.xtrust span{display:flex;align-items:center;gap:7px}
.xtrust .i{color:var(--x-ac)}
.xbook-w{padding:26px;display:grid;gap:10px;box-shadow:0 40px 80px -45px rgba(0,0,0,.45)}
.xbw-t{font-family:var(--x-fd);font-size:20px}
.xpick{display:flex;flex-wrap:wrap;gap:8px}
.xpick button{border:1.5px solid var(--x-line);border-radius:calc(var(--x-r)*.6);padding:7px 14px;font-size:13.5px;transition:.2s}
.xpick button.on{background:var(--x-ac);color:var(--x-on-ac);border-color:var(--x-ac)}
.xpick button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.xdays button{flex:1 1 70px;text-align:center}
.xtimes{display:grid;grid-template-columns:repeat(3,1fr)}
/* ٨ جدار الأرقام */
.xgridbg{position:absolute;inset:0;background:linear-gradient(var(--x-line) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,var(--x-line) 1px,transparent 1px) 0 0/60px 60px;-webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);opacity:.7}
.xwall{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-block:1px solid var(--x-line)}
.xwall>div{padding:28px 22px;display:grid;gap:4px}
.xwall>div+div{border-inline-start:1px solid var(--x-line)}
.xwall b{font-family:var(--x-fd);font-size:clamp(34px,5cqi,58px);line-height:1.1;color:var(--x-ac)}
.xwall svg{height:26px;width:100%;margin-top:8px}
.xwall path{fill:none;stroke:var(--x-ac2);stroke-width:2.5;vector-effect:non-scaling-stroke}
/* ٩ قبل وبعد */
.xba{position:relative;border-radius:calc(var(--x-r) + 6px);overflow:hidden;aspect-ratio:16/8;user-select:none}
.xba-hero{margin-top:40px}
.xba-a,.xba-b{position:absolute;inset:0}
.xba .xim{height:100%;border-radius:0}
.xba-a{filter:grayscale(1) contrast(.9) brightness(1.05)}
.xba-b{clip-path:inset(0 var(--ba) 0 0)}
.xba-h{position:absolute;top:0;bottom:0;right:var(--ba);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.xba-h::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.xba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;direction:rtl}
.xba-l{position:absolute;top:14px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:3px 12px;border-radius:99px;z-index:2}
.xba-l.r{right:14px}.xba-l.l{left:14px}
/* ١٠ كلمات متحركة */
.xkin{font-family:var(--x-fd);font-size:calc(clamp(40px,8.4cqi,104px)*var(--x-scale));line-height:1.1;font-weight:700;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline;margin-bottom:20px}
.xkin-w{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;color:var(--x-ac)}
.xkin-r{display:flex;flex-direction:column;animation:x-words 8s cubic-bezier(.7,0,.2,1) infinite}
.xkin-r b{height:1.2em;line-height:1.2}
@keyframes x-words{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-1.2em)}50%,70%{transform:translateY(-2.4em)}75%,95%{transform:translateY(-3.6em)}100%{transform:translateY(-4.8em)}}
.xmarq{overflow:hidden;margin-top:30px;white-space:nowrap;border-block:1px solid var(--x-line);padding-block:12px}
.xmarq div{display:inline-flex;gap:46px;animation:x-marq 26s linear infinite;font-family:var(--x-fd);font-size:clamp(22px,3.4cqi,40px);font-weight:700;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--x-ink) 55%,transparent)}
.xmarq.rev{margin-top:0;border-top:0}.xmarq.rev div{animation-direction:reverse;color:color-mix(in srgb,var(--x-ink) 18%,transparent);-webkit-text-stroke:0}
@keyframes x-marq{to{transform:translateX(50%)}}
/* ١١ واجهة منتج */
.xapp{position:relative;margin:48px auto 0;max-width:900px;display:grid;grid-template-columns:70px 1fr;background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);border-radius:calc(var(--x-r) + 6px);box-shadow:0 50px 100px -50px rgba(0,0,0,.55);min-height:320px}
.xapp-side{background:var(--x-softB);display:grid;align-content:start;gap:14px;padding:22px 18px;border-radius:0 calc(var(--x-r) + 6px) calc(var(--x-r) + 6px) 0}
.xapp-side i{height:34px;border-radius:10px;background:color-mix(in srgb,var(--x-acB) 22%,transparent)}
.xapp-side i:first-child{background:var(--x-acB)}
.xapp-main{padding:24px;display:grid;gap:20px;min-width:0}
.xapp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.xapp-row div{background:var(--x-softB);border-radius:12px;padding:12px 14px;display:grid}
.xapp-row small{color:var(--x-muted);font-size:12px}.xapp-row b{font-family:var(--x-fd);font-size:22px}
.xapp-ch{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px;border-bottom:1px solid var(--x-line)}
.xapp-ch i{flex:1;height:var(--h);border-radius:8px 8px 0 0;background:linear-gradient(to top,var(--x-acB),color-mix(in srgb,var(--x-acB) 50%,var(--x-ac2B)));animation:x-col 3s ease-in-out infinite alternate;animation-delay:calc(var(--d)*-.4s);transform-origin:bottom}
@keyframes x-col{from{transform:scaleY(.6)}}
.xfloat{position:absolute;display:flex;gap:8px;align-items:center;background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);border-radius:12px;padding:9px 14px;font-size:13.5px;font-weight:600;box-shadow:0 18px 40px -20px rgba(0,0,0,.45);animation:x-bob 5s ease-in-out infinite}
.xfloat .i{color:var(--x-acB)}
.xfloat.f1{top:-18px;inset-inline-start:-24px}.xfloat.f2{bottom:30px;inset-inline-end:-30px;animation-delay:-2.5s}
@keyframes x-bob{50%{transform:translateY(-10px)}}
/* ١٢ فعالية */
.xevent-m{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--x-muted);font-size:15px}
.xevent-m span{display:flex;gap:7px;align-items:center}
.xavs{display:flex;align-items:center;margin-top:8px}
.xavs i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;background:var(--x-ac);color:var(--x-on-ac);border:3px solid var(--x-bg);margin-inline-start:-10px}
.xavs i:first-child{margin:0}.xavs i:nth-child(2n){background:var(--x-ac2B);color:var(--x-on-ac2)}
.xavs span{margin-inline-start:12px;font-weight:600}
.xevent-cd{display:grid;gap:14px;justify-items:center;text-align:center}
.xcd{display:flex;gap:12px;direction:rtl}
.xcd>span{display:grid;justify-items:center;gap:2px}
.xcd b{font-family:var(--x-fd);font-variant-numeric:tabular-nums}
.xcd small{font-size:12px;color:var(--x-muted)}
.xcd-big>span{background:color-mix(in srgb,var(--x-ink) 7%,transparent);border:1px solid var(--x-line);border-radius:var(--x-r);padding:16px 10px;min-width:86px}
.xcd-big b{font-size:44px;line-height:1.1;color:var(--x-ac)}
/* ١٣ منتج رقمي */
.xprice{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.xprice b{font-family:var(--x-fd);font-size:40px;color:var(--x-ac)}
.xprice s{color:var(--x-muted);font-size:20px}
.xoff{background:var(--x-ac2B);color:var(--x-on-ac2);font-weight:700;font-size:13px;padding:3px 10px;border-radius:99px}
.xfan{position:relative;height:420px}
.xfan-c{position:absolute;top:50%;left:50%;width:min(230px,44cqi);aspect-ratio:3/4;margin:calc(min(230px,44cqi)*-.66) 0 0 calc(min(230px,44cqi)*-.5);border-radius:calc(var(--x-r) + 4px);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;color:#fff;background:linear-gradient(160deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 50%,#000));box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:rotate(calc((var(--k) - 1)*-12deg)) translateX(calc((var(--k) - 1)*-70px));transition:transform .5s;animation:x-fan 6s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-1s)}
.xfan-c:nth-child(2){background:linear-gradient(160deg,var(--x-ac2B),color-mix(in srgb,var(--x-ac2B) 55%,#000));z-index:2}
.xfan-c:nth-child(3){background:linear-gradient(160deg,var(--x-inkB),color-mix(in srgb,var(--x-inkB) 70%,var(--x-acB)))}
.xfan-c>i{position:absolute;top:22px;inset-inline-start:22px;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.xfan-c>i .i{width:28px;height:28px}
.xfan-c b{font-family:var(--x-fd);font-size:20px}.xfan-c small{opacity:.85}
@keyframes x-fan{to{transform:rotate(calc((var(--k) - 1)*-15deg)) translateX(calc((var(--k) - 1)*-84px)) translateY(-8px)}}
.xsticker{position:absolute;top:2%;inset-inline-end:4%;width:120px;height:120px;border-radius:50%;background:var(--x-ac2B);color:var(--x-on-ac2);display:grid;place-items:center;z-index:3;box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.xsticker svg{position:absolute;inset:0;animation:x-spin 14s linear infinite}
.xsticker text{font-size:11px;font-weight:700;fill:currentColor;letter-spacing:.5px}
.xsticker b{font-family:var(--x-fd);font-size:28px}
/* ١٤ فيديو بيعي */
.xvsl{position:relative;border-radius:calc(var(--x-r) + 6px);overflow:hidden;aspect-ratio:16/9;max-width:900px;margin:40px auto 0;box-shadow:0 50px 90px -45px rgba(0,0,0,.6)}
.xvsl .xim{position:absolute;inset:0;border-radius:0}
.xvsl::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 50%)}
.xplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:var(--x-acB);color:var(--x-on-acB)!important;display:grid;place-items:center;z-index:2;box-shadow:0 0 0 0 color-mix(in srgb,var(--x-acB) 60%,transparent);animation:x-playp 2s ease-out infinite}
.xplay .i{width:34px;height:34px;fill:currentColor;margin-inline-end:-4px}
.xplay.sm{width:58px;height:58px}.xplay.sm .i{width:22px;height:22px}
@keyframes x-playp{to{box-shadow:0 0 0 26px transparent}}
.xdur{position:absolute;bottom:14px;inset-inline-end:16px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:2px 10px;border-radius:6px;z-index:2}
.xurg{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--x-muted)}
.xurg b{color:var(--x-ac);font-family:var(--x-fd);font-variant-numeric:tabular-nums}
/* ١٥ بحث */
.xsearch{display:flex;align-items:center;gap:10px;background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);border-radius:999px;padding:8px 8px 8px 8px;padding-inline-start:22px;width:min(640px,100%);margin:28px auto 0;box-shadow:0 26px 60px -36px rgba(0,0,0,.45)}
.xsearch>.i{color:var(--x-muted)}
.xsearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:inherit;outline:none}
.xsearch .xb{border-radius:999px;padding:.75em 1.6em;flex-shrink:0}
.xfloaters span{position:absolute;color:var(--x-ac);opacity:.35;animation:x-bob 6s ease-in-out infinite;animation-delay:calc(var(--k)*-1s)}
.xfloaters .i{width:44px;height:44px}
.xfloaters span:nth-child(1){top:14%;right:8%}.xfloaters span:nth-child(2){top:60%;right:14%}.xfloaters span:nth-child(3){top:20%;left:10%}.xfloaters span:nth-child(4){top:66%;left:7%}.xfloaters span:nth-child(5){top:8%;left:40%}.xfloaters span:nth-child(6){bottom:8%;right:42%}

/* التذييل */
.xt-footer{padding-block:calc(64px*var(--x-sp)) 0}
.xft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:40px}
.xft>div{display:grid;gap:10px;align-content:start}
.xft b{font-size:15px;margin-bottom:4px}
.xft a{color:var(--x-muted);font-size:14.5px}.xft a:hover{color:var(--x-ac)}
.xft span{display:flex;gap:8px;align-items:center;color:var(--x-muted);font-size:14.5px}
.xft p{font-size:14.5px;max-width:34ch}
.xsoc{display:flex;gap:8px}
.xsoc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--x-line);display:grid;place-items:center;color:var(--x-ink)!important;transition:.2s}
.xsoc a:hover{background:var(--x-ac);color:var(--x-on-ac)!important;border-color:var(--x-ac)}
.xft-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--x-line);padding-block:18px;color:var(--x-muted);font-size:13px}
.xft-big{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--x-line)}
.xft-big>b{font-family:var(--x-fd);font-size:clamp(36px,7cqi,84px);line-height:1.1}
.xft-big .xbtns{margin:0}
.xft-min{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:30px}
.xft-min nav{display:flex;gap:22px;color:var(--x-muted);font-size:14.5px}

/* الضمان */
.xg-seal-w{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center}
.xseal{position:relative;width:min(300px,70cqi);aspect-ratio:1;margin-inline:auto;filter:drop-shadow(0 24px 30px rgba(120,80,0,.35))}
.xseal svg{width:100%;height:100%}
.xseal-o{fill:url(#none);fill:#D9A93B}
.xseal-r{fill:#F1CF6E;stroke:#B8861D;stroke-width:2;stroke-dasharray:3 4}
.xseal-t{transform-origin:100px 100px;animation:x-spin 30s linear infinite}
.xseal-t text{font-size:12.5px;font-weight:700;fill:#6E4A00;letter-spacing:1px}
.xseal-c{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#E2B13F);display:grid;place-items:center;align-content:center;color:#5A3A00;box-shadow:inset 0 -6px 12px rgba(120,70,0,.3)}
.xseal-c b{font-family:var(--x-fd);font-size:clamp(36px,7cqi,58px);line-height:1}
.xseal-c span{font-weight:700}
.xshield{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;padding:40px;align-items:center}
.xshield-i{width:120px;height:120px;border-radius:36px;display:grid;place-items:center;background:var(--x-ac);color:var(--x-on-ac);transform:rotate(-6deg);box-shadow:0 20px 40px -18px var(--x-ac)}
.xshield-i .i{width:62px;height:62px}
.xshield .xhead{margin:0}
.xshield-p{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px dashed var(--x-line);padding-top:22px}
.xshield-p span{display:flex;gap:10px;align-items:center;font-weight:600}
.xshield-p .i{color:var(--x-ac);width:24px;height:24px}
.xt-guarantee.xv2{padding-block:0}
.xribbon{background:var(--x-ink);color:var(--x-bg);overflow:hidden;padding-block:16px;white-space:nowrap;transform:rotate(-1.2deg);margin-block:30px}
.xribbon-in{display:inline-flex;gap:46px;animation:x-marq 30s linear infinite;font-weight:600}
.xribbon span{display:inline-flex;gap:8px;align-items:center}
.xribbon .i{color:var(--x-ac2B)}
.xgjourney{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.xgjourney::before{content:"";position:absolute;top:34px;inset-inline:16%;height:3px;background:linear-gradient(to left,var(--x-ac),var(--x-ac2))}
.xgjourney>div{display:grid;justify-items:center;text-align:center;gap:8px;padding-inline:16px;position:relative}
.xgjourney i{width:70px;height:70px;border-radius:50%;background:var(--x-surfaceB);border:3px solid var(--x-ac);display:grid;place-items:center;color:var(--x-ac)}
.xgjourney>div:last-child i{background:var(--x-ac);color:var(--x-on-ac)}
.xgjourney i .i{width:30px;height:30px}
.xgjourney b{font-family:var(--x-fd);font-size:20px}
.xgjourney span{color:var(--x-muted)}
.xcert{max-width:900px;margin-inline:auto;padding:14px;background:var(--x-surfaceB);color:var(--x-inkB);border-radius:6px;box-shadow:0 40px 80px -50px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.xcert-in{border:2px solid color-mix(in srgb,var(--x-acB) 60%,transparent);outline:1px solid color-mix(in srgb,var(--x-acB) 30%,transparent);outline-offset:-8px;padding:44px;display:grid;gap:12px;justify-items:center;text-align:center;background:radial-gradient(circle at 50% 0,var(--x-softB),transparent 60%)}
.xcert .xchk{justify-items:start}
.xcert-f{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:20px}
.xsig{font-family:"Amiri",serif;font-size:24px;border-top:1px solid var(--x-line);padding-top:6px;color:var(--x-muted)}
.xstamp{width:118px;height:118px;border-radius:50%;border:3px double var(--x-acB);color:var(--x-acB);display:grid;place-items:center;align-content:center;transform:rotate(-14deg);font-weight:700;line-height:1.1;opacity:.85}
.xstamp b{font-family:var(--x-fd);font-size:34px}
.xstamp span{font-size:12px}
.xscale{position:relative;max-width:820px;margin:20px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:70px}
.xscale-beam{position:absolute;top:0;inset-inline:6%;height:60px;display:grid;place-items:center}
.xscale-beam::before{content:"";position:absolute;top:14px;inset-inline:0;height:6px;border-radius:6px;background:var(--x-ink);transform:rotate(-5deg);animation:x-tilt 4s ease-in-out infinite alternate}
.xscale-beam i{width:18px;height:60px;background:var(--x-ink);border-radius:9px 9px 0 0;opacity:.85}
@keyframes x-tilt{from{transform:rotate(-3deg)}to{transform:rotate(-7deg)}}
.xscale-pan{border-radius:var(--x-r);padding:24px;display:grid;gap:8px;align-content:start}
.xscale-pan.l{background:color-mix(in srgb,var(--x-ink) 6%,transparent);margin-top:-30px}
.xscale-pan.r{background:var(--x-ac);color:var(--x-on-ac);margin-top:30px}
.xscale-pan b{font-family:var(--x-fd);font-size:20px}
.xscale-pan span{display:flex;gap:8px;align-items:center}

/* العروض */
.xoffer{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;padding:44px;overflow:hidden;align-items:center}
.xoffer .xhead{margin-bottom:0}
.xcorner{position:absolute;top:26px;left:-52px;width:210px;text-align:center;transform:rotate(-45deg);background:#D9412F;color:#fff;font-weight:700;padding:7px 0;font-size:14px;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.xoffer-p{display:grid;justify-items:center;text-align:center;gap:2px;padding:28px;border-radius:var(--x-r);background:var(--x-soft)}
.xoffer-p s{color:var(--x-muted);font-size:18px}
.xoffer-p>b{font-family:var(--x-fd);font-size:64px;line-height:1;color:var(--x-ac)}
.xoffer-p .xbtns{margin-top:16px;width:100%}.xoffer-p .xb{flex:1}
.xoffer-p small{margin-top:10px;display:flex;gap:6px;align-items:center}
.xbundle{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.xbundle-i{width:170px;display:grid;justify-items:center;text-align:center;gap:6px;padding:22px 14px;border-radius:var(--x-r);background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line);transition:transform .3s}
.xbundle-i:hover{transform:translateY(-6px) rotate(-2deg)}
.xbundle-i i{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--x-softB);color:var(--x-acB)}
.xbundle-i i .i{width:28px;height:28px}
.xbundle-i s{color:var(--x-muted);font-size:13.5px}
.xplus{font-family:var(--x-fd);font-size:34px;color:var(--x-ac)}
.xbundle-t{display:grid;justify-items:center;gap:2px;padding:22px 26px;border-radius:var(--x-r);background:var(--x-ac);color:var(--x-on-ac);box-shadow:0 20px 40px -20px var(--x-ac)}
.xbundle-t b{font-family:var(--x-fd);font-size:32px}
.xbundle-t span{background:var(--x-ac2B);color:var(--x-on-ac2);border-radius:99px;padding:2px 12px;font-size:13px;font-weight:700}
.xflash{padding:30px;display:grid;gap:16px;max-width:860px;margin-inline:auto}
.xflash-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xflash-h>b{font-family:var(--x-fd);font-size:20px}
.xbolt{width:40px;height:40px;border-radius:12px;background:#E4572E;color:#fff;display:grid;place-items:center;animation:x-beat 1.4s infinite}
.xflash-cd{margin-inline-start:auto;background:color-mix(in srgb,#E4572E 12%,transparent);color:#C2401D;border-radius:99px;padding:4px 14px;font-size:14px;font-weight:600}
.xflash-cd b{font-variant-numeric:tabular-nums}
.xflash-b{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.xstock{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.xstock b{color:#D9412F}
.xticket{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);max-width:820px;margin-inline:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.18))}
.xticket>div{background:var(--x-surfaceB);color:var(--x-inkB);padding:32px;display:grid;gap:8px;align-content:center}
.xticket-l{border-radius:var(--x-r) 0 0 var(--x-r);-webkit-mask:radial-gradient(circle at 0 50%,transparent 18px,#000 19px);mask:radial-gradient(circle at 0 50%,transparent 18px,#000 19px)}
.xticket-l{border-radius:0 var(--x-r) var(--x-r) 0;-webkit-mask:radial-gradient(circle at 0 0,transparent 16px,#000 17px) 0 0/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 16px,#000 17px) 0 100%/100% 51% no-repeat;mask:radial-gradient(circle at 0 0,transparent 16px,#000 17px) 0 0/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 16px,#000 17px) 0 100%/100% 51% no-repeat}
.xticket-l b{font-family:var(--x-fd);font-size:24px}
.xticket-r{border-radius:var(--x-r) 0 0 var(--x-r);border-inline-start:2px dashed var(--x-line);justify-items:center;text-align:center;background:var(--x-softB)!important;-webkit-mask:radial-gradient(circle at 100% 0,transparent 16px,#000 17px) 0 0/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 16px,#000 17px) 0 100%/100% 51% no-repeat;mask:radial-gradient(circle at 100% 0,transparent 16px,#000 17px) 0 0/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 16px,#000 17px) 0 100%/100% 51% no-repeat}
.xticket-r code{font-family:ui-monospace,Consolas,monospace;font-size:26px;font-weight:700;letter-spacing:3px;color:var(--x-acB);direction:ltr}
.xgift{display:grid;place-items:center;min-height:280px;position:relative}
.xgift-box{position:relative;width:180px;height:190px;display:block;transition:transform .4s}
.xgift-box:hover{transform:rotate(-4deg) scale(1.03)}
.xgift-body{position:absolute;bottom:0;left:10px;right:10px;height:120px;background:var(--x-ac);border-radius:10px}
.xgift-lid{position:absolute;top:40px;left:0;right:0;height:34px;background:color-mix(in srgb,var(--x-ac) 80%,#000);border-radius:8px;transition:transform .6s cubic-bezier(.3,1.6,.5,1);z-index:2}
.xgift-rib{position:absolute;top:40px;bottom:0;left:50%;width:26px;margin-left:-13px;background:var(--x-ac2B);z-index:3}
.xgift-rib::before,.xgift-rib::after{content:"";position:absolute;top:-30px;width:44px;height:34px;border:8px solid var(--x-ac2B);border-radius:50% 50% 0 50%}
.xgift-rib::before{right:10px;transform:rotate(20deg)}.xgift-rib::after{left:10px;transform:scaleX(-1) rotate(20deg)}
.xgift-box small{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--x-muted);font-size:13px}
.xgift-box{animation:x-wig 3s ease-in-out infinite}
.xgift-in{position:absolute;display:grid;justify-items:center;gap:6px;padding:28px 34px;border-radius:var(--x-r);background:var(--x-surfaceB);color:var(--x-inkB);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transform:scale(.3);opacity:0;pointer-events:none;transition:.5s cubic-bezier(.3,1.5,.5,1)}
.xgift-in b{font-family:ui-monospace,Consolas,monospace;font-size:30px;letter-spacing:3px;color:var(--x-acB)}
.xgift.open .xgift-in{transform:none;opacity:1;pointer-events:auto}
.xgift.open .xgift-box{opacity:.15;animation:none}
.xgift.open .xgift-lid{transform:translateY(-70px) rotate(-20deg)}
.xtiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:820px;margin-inline:auto}
.xtier{position:relative;border:2px solid var(--x-line)!important;border-radius:var(--x-r);padding:26px 16px;display:grid;justify-items:center;gap:2px;background:var(--x-surfaceB)!important;color:var(--x-inkB)!important;transition:.25s}
.xtier b{font-family:var(--x-fd);font-size:40px;color:var(--x-acB)}
.xtier.on{border-color:var(--x-acB)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--x-acB) 18%,transparent);transform:translateY(-6px)}
.xtier>i{position:absolute;top:-13px;background:var(--x-ac2B);color:var(--x-on-ac2);font-style:normal;font-size:12px;font-weight:700;padding:2px 12px;border-radius:99px}
.xseason{position:relative;overflow:hidden;border-radius:calc(var(--x-r) + 8px);background:linear-gradient(120deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 60%,#000));color:#fff;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:30px;padding:48px;align-items:center}
.xseason-pat{position:absolute;inset:0;opacity:.15;background:repeating-conic-gradient(from 45deg,#fff 0 25%,transparent 0 50%) 0 0/34px 34px;-webkit-mask:linear-gradient(to left,transparent,#000);mask:linear-gradient(to left,transparent,#000)}
.xseason-c{position:relative;display:grid;gap:10px}
.xseason .xkick{background:rgba(255,255,255,.16);color:#fff}
.xseason-b{position:relative;display:grid;justify-items:center;gap:6px}
.xseason-b>b{font-family:var(--x-fd);font-size:clamp(40px,7cqi,72px);color:var(--x-ac2B);line-height:1}
.xseason .xb.p{background:var(--x-ac2B);color:var(--x-on-ac2)}

/* العد التنازلي */
.xcd-flip{justify-content:center;gap:14px}
.xcd-flip>span{position:relative;background:var(--x-inkB);color:var(--x-bgB);border-radius:14px;padding:18px 10px 10px;min-width:96px;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.xcd-flip>span::before{content:"";position:absolute;top:50%;inset-inline:0;height:2px;background:var(--x-bgB);opacity:.25}
.xcd-flip b{font-size:54px;line-height:1}
.xcd-flip small{color:inherit;opacity:.7}
.xcd-rings{justify-content:center;gap:18px}
.xcd-rings>span{position:relative;width:120px;height:120px;place-content:center}
.xcd-rings svg{position:absolute;inset:0;transform:rotate(-90deg) scaleY(-1)}
.xcd-rings circle{fill:none;stroke:var(--x-line);stroke-width:7}
.xcd-rings circle.fg{stroke:var(--x-ac);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1));transition:stroke-dashoffset .6s}
.xcd-rings b{font-size:34px;line-height:1;position:relative}
.xcd-rings small{position:relative}
.xt-countdown.xv2{padding-block:0}
.xurgbar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px 20px;background:var(--x-ink);color:var(--x-bg)}
.xurgbar .xb{padding:.5em 1.2em;font-size:14px}
.xurg-t{display:flex;gap:6px;align-items:center;font-family:var(--x-fd);font-variant-numeric:tabular-nums;background:rgba(127,127,127,.25);padding:3px 12px;border-radius:8px}
.xpulse{width:10px;height:10px;border-radius:50%;background:#E4572E;animation:x-ping 1.6s infinite}
.xdrain{padding:36px;max-width:900px;margin-inline:auto}
.xdrain .xhead{margin-bottom:24px}
.xdrain-bar{height:18px;border-radius:99px;background:var(--x-soft);overflow:hidden}
.xdrain-bar i{display:block;height:100%;width:calc(var(--left,1)*100%);margin-inline-start:auto;border-radius:99px;background:linear-gradient(to left,var(--x-ac),#E4572E);transition:width 1s linear}
.xdrain-l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--x-muted);margin-top:8px}
.xdrain-l b{color:var(--x-ink);font-variant-numeric:tabular-nums}
.xcd-huge{justify-content:center;align-items:center;gap:6px}
.xcd-huge b{font-size:clamp(54px,12cqi,150px);line-height:1;color:var(--x-ac);letter-spacing:-.02em}
.xcd-huge i{font-style:normal;font-size:clamp(34px,7cqi,90px);opacity:.3}
.xcd-hl{display:grid;grid-template-columns:repeat(4,1fr);max-width:min(720px,90cqi);margin:6px auto 22px;text-align:center;color:var(--x-muted);font-size:14px}
.xh2.c{text-align:center}
.xseats{padding:36px;max-width:820px;margin-inline:auto}
.xseat-g{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-block:10px}
.xseat-g i{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--x-ac) 14%,transparent);color:var(--x-ac)}
.xseat-g i.t{background:color-mix(in srgb,var(--x-ink) 8%,transparent);color:var(--x-muted);opacity:.6}
.xseat-g i .i{width:55%;height:55%}
.xseat-n{font-size:18px}.xseat-n b{color:#D9412F;font-family:var(--x-fd);font-size:28px}
.xevcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;padding:30px;align-items:center}
.xevcard .xhead{margin-bottom:12px}
.xevcal{width:110px;border-radius:16px;overflow:hidden;text-align:center;border:1px solid var(--x-line);display:grid;background:var(--x-bg)}
.xevcal small{background:var(--x-ac);color:var(--x-on-ac);padding:4px;font-weight:600}
.xevcal b{font-family:var(--x-fd);font-size:46px;line-height:1.3}
.xevcal span{font-size:12px;color:var(--x-muted);padding-bottom:6px}
.xevside{display:grid;gap:10px;justify-items:center}
.xevside .xbtns{margin:0}
.xcd-mini b{font-size:22px;color:var(--x-ac)}
.xcd-mini>span{background:var(--x-soft);border-radius:10px;padding:6px 8px;min-width:54px}

/* المقارنات */
.xvs2{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:900px;margin-inline:auto}
.xvs-c{padding:30px;display:grid;gap:12px;border-radius:var(--x-r)}
.xvs-c>b{font-family:var(--x-fd);font-size:22px;margin-bottom:6px}
.xvs-c span{display:flex;gap:10px;align-items:center}
.xvs-c.them{background:color-mix(in srgb,var(--x-ink) 5%,transparent);color:var(--x-muted);border-radius:0 var(--x-r) var(--x-r) 0;margin-block:20px}
.xvs-c.us{background:var(--x-ac);color:var(--x-on-ac);box-shadow:0 30px 60px -30px var(--x-ac)}
.xvs-c span.n .i{opacity:.55}
.xvs-c.us span.n{opacity:.6;text-decoration:line-through}
.xtbl{overflow-x:auto;border-radius:var(--x-r);border:1px solid var(--x-line);background:var(--x-surfaceB);color:var(--x-inkB);max-width:980px;margin-inline:auto}
.xtbl table{width:100%;border-collapse:collapse;min-width:560px}
.xtbl th,.xtbl td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--x-line)}
.xtbl th:first-child,.xtbl td:first-child{text-align:right}
.xtbl th{font-family:var(--x-fd);font-size:17px;position:relative}
.xtbl th small{display:block;font-family:var(--x-fb);font-size:13px;color:var(--x-muted);font-weight:500}
.xtbl .hl{background:color-mix(in srgb,var(--x-acB) 9%,transparent)}
.xtbl th.hl{background:var(--x-acB);color:var(--x-on-acB)}
.xtbl th.hl small{color:inherit;opacity:.8}
.xtbl th i{display:block;font-style:normal;font-size:11.5px;font-family:var(--x-fb);opacity:.85}
.xtbl .ok{color:var(--x-acB);stroke-width:2.8}
.xtbl tr:last-child td{border-bottom:0}
.xtg{max-width:760px;margin-inline:auto;display:grid;gap:22px;justify-items:center}
.xtg-sw{display:inline-flex;align-items:center;gap:14px;font-weight:700;font-size:17px}
.xtg-sw i{width:66px;height:34px;border-radius:99px;background:color-mix(in srgb,var(--x-ink) 18%,transparent);position:relative;transition:.3s}
.xtg-sw i::after{content:"";position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:.35s cubic-bezier(.5,1.6,.5,1)}
.alt .xtg-sw i{background:var(--x-ac)}
.alt .xtg-sw i::after{right:36px}
.xtg-sw em{font-style:normal;font-size:12px;background:var(--x-ac2B);color:var(--x-on-ac2);border-radius:99px;padding:1px 8px;margin-inline-start:4px}
.xtg-list{display:grid;gap:12px;width:100%}
.xtg-i{position:relative;height:62px;perspective:800px}
.xtg-i span{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding-inline:22px;border-radius:var(--x-r);font-weight:600;backface-visibility:hidden;transition:transform .6s cubic-bezier(.5,0,.2,1)}
.xtg-i .a{background:color-mix(in srgb,var(--x-ink) 6%,transparent);color:var(--x-muted)}
.xtg-i .b{background:var(--x-ac);color:var(--x-on-ac);transform:rotateX(180deg)}
.alt .xtg-i .a{transform:rotateX(-180deg)}.alt .xtg-i .b{transform:none}
.alt .xtg-i:nth-child(2) span{transition-delay:.08s}.alt .xtg-i:nth-child(3) span{transition-delay:.16s}
.xcbars{max-width:820px;margin-inline:auto;display:grid;gap:22px}
.xcbars>div>b{display:block;margin-bottom:8px}
.xcb{display:grid;gap:6px}
.xcb span{height:30px;width:var(--w);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-inline:10px;color:#fff;font-weight:700;font-size:13px}
.xcb span em{font-style:normal}
.xcb .us{background:var(--x-ac);color:var(--x-on-ac)}
.xcb .them{background:color-mix(in srgb,var(--x-ink) 20%,transparent);color:var(--x-ink)}
.sx[data-motion=on] .xs.in .xcb span{animation:x-w 1.5s cubic-bezier(.2,.7,.2,1) both}
.sx[data-motion=on] .xs.in .xcb .them{animation-delay:.25s}
.xcb-leg{display:flex;gap:20px;font-size:14px}
.xcb-leg span{display:flex;gap:8px;align-items:center}
.xcb-leg span::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--x-ac)}
.xcb-leg .them::before{background:color-mix(in srgb,var(--x-ink) 20%,transparent)}
.xh2h{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;max-width:900px;margin-inline:auto}
.xh2h-c{padding:30px;display:grid;gap:10px;position:relative}
.xh2h-c>b{font-family:var(--x-fd);font-size:22px}
.xh2h-c span{display:flex;gap:8px;align-items:center}
.xh2h-c span.off{color:var(--x-muted);opacity:.6}
.xpr{font-family:var(--x-fd);font-size:30px!important;color:var(--x-ac);font-weight:700}
.xh2h-c.win{border:2px solid var(--x-acB);box-shadow:0 30px 60px -30px var(--x-acB);transform:scale(1.03)}
.xwin{position:absolute;top:-15px;inset-inline-start:24px;display:flex;gap:6px;align-items:center;background:var(--x-ac2B);color:var(--x-on-ac2);font-style:normal;font-weight:700;font-size:13px;padding:4px 12px;border-radius:99px}
.xvs{width:62px;height:62px;border-radius:50%;background:var(--x-ink);color:var(--x-bg);display:grid;place-items:center;font-weight:800;font-family:var(--x-fd);font-size:20px;box-shadow:0 0 0 8px var(--x-bg)}

/* الأسعار */
.xplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:center;margin-top:10px}
.xplan{padding:32px;display:grid;gap:14px;position:relative}
.xplan>b{font-family:var(--x-fd);font-size:20px}
.xplan-p{display:flex;align-items:baseline;gap:8px}
.xplan-p>span{font-family:var(--x-fd);font-size:48px;font-weight:700;line-height:1}
.xplan-p small{color:var(--x-muted)}
.xplan .xchk{margin:0}
.xplan .xb{width:100%}
.xplan.hl{background:var(--x-inkB);color:var(--x-bgB);--x-ink:var(--x-bgB);--x-bg:var(--x-inkB);padding-block:44px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.xplan.hl .xchk .i{color:var(--x-ac2B)}
.xplan-b{position:absolute;top:-14px;inset-inline-start:28px;background:var(--x-ac2B);color:var(--x-on-ac2);font-style:normal;font-size:12.5px;font-weight:700;padding:3px 14px;border-radius:99px}
.xplan .y,.alt .xplan .m{display:none}.alt .xplan .y{display:inline}
.xyr{display:grid;justify-items:center;gap:30px}
.xyr .xplans{width:100%}
.xone{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:40px;padding:44px;align-items:center;max-width:1000px;margin-inline:auto}
.xone .xhead{margin-bottom:0}
.xone-p{display:grid;justify-items:center;text-align:center;padding:30px;border-radius:var(--x-r);background:var(--x-soft)}
.xone-p>b{font-family:var(--x-fd);font-size:60px;line-height:1.1;color:var(--x-ac)}
.xone-p .xbtns{width:100%}.xone-p .xb{flex:1}
.xmini-seal{display:flex;gap:6px;align-items:center;margin-top:12px;font-weight:600;font-size:14px;color:#9A6B00}

/* التعريف والمحتوى */
.xvtl{display:grid;gap:0;position:relative;padding-inline-start:28px}
.xvtl::before{content:"";position:absolute;inset-inline-start:8px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--x-ac),var(--x-ac2))}
.xvtl>div{position:relative;padding-block:12px;display:grid}
.xvtl>div::before{content:"";position:absolute;inset-inline-start:-26px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--x-bg);border:3px solid var(--x-ac)}
.xvtl b{font-family:var(--x-fd);font-size:22px;color:var(--x-ac)}
.xquote{max-width:900px;margin-inline:auto;text-align:center;display:grid;justify-items:center;gap:20px}
.xquote .xq,.xbigq .xq{width:56px;height:56px}
.xquote blockquote,.xbigq blockquote{font-family:var(--x-fd);font-size:clamp(22px,3.4cqi,36px);line-height:1.55}
.xquote-w{display:flex;align-items:center;gap:12px}
.xquote-w>div{display:grid;text-align:right}
.xsign-s{font-family:"Amiri",serif;font-size:22px;color:var(--x-ac);margin-top:16px}
.xzig{display:grid;gap:40px}
.xzig-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.xzig-r>div{display:grid;gap:12px;justify-items:start}
.xzig-r:nth-child(even) .xim{order:2}
.xbento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(170px,auto);gap:18px}
.xbento-i{border-radius:var(--x-r);padding:26px;display:grid;gap:10px;align-content:start;background:var(--x-soft);position:relative;overflow:hidden}
.xbento-i p{color:var(--x-muted)}
.xbento-i.b0{grid-column:span 2;grid-row:span 2;background:var(--x-ac);color:var(--x-on-ac)}
.xbento-i.b0 p{color:inherit;opacity:.85}
.xbento-i.b0 .xic{background:rgba(255,255,255,.18);color:inherit}
.xbento-art{position:absolute;width:55%;bottom:-12%;inset-inline-end:-8%;opacity:.9}
.xbento-i.b3{grid-column:span 2}
.xbento-i.b5{background:var(--x-ink);color:var(--x-bg)}.xbento-i.b5 p{color:inherit;opacity:.75}
.xtabs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:start}
.xtabs-l{display:grid;gap:6px}
.xtabs-l button{display:flex;gap:10px;align-items:center;padding:14px 18px;border-radius:var(--x-r);font-weight:600;text-align:right;transition:.2s}
.xtabs-l button.on{background:var(--x-ac);color:var(--x-on-ac)}
.xtabs-l button:not(.on):hover{background:var(--x-soft)}
.xtabs-p>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center}
.xtabs-p>div>div{display:grid;gap:12px;justify-items:start}
.xtabs-p>div[hidden]{display:none}
.xnums{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.xnums>div{display:grid;justify-items:center;text-align:center;padding:10px 16px}
.xnums>div+div{border-inline-start:1px solid var(--x-line)}
.xnums b{font-family:var(--x-fd);font-size:clamp(36px,5.4cqi,62px);line-height:1.15;color:var(--x-ac)}
.xnums span{color:var(--x-muted)}
.xring{width:120px;height:120px;transform:rotate(-90deg) scaleY(-1)}
.xring circle{fill:none;stroke:var(--x-line);stroke-width:9}
.xring circle.fg{stroke:var(--x-ac);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.sx[data-motion=on] .xs.in .xring circle.fg{animation:x-dash 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes x-dash{from{stroke-dashoffset:1}}
.xnum{font-family:var(--x-fd);font-size:34px;line-height:1.2;color:var(--x-ac)}
.xband{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:30px;align-items:center;padding:36px 40px;border-radius:calc(var(--x-r) + 6px);background:linear-gradient(120deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 55%,var(--x-ac2B)));color:var(--x-on-acB)}
.xband>div{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xband span{display:grid}
.xband b{font-family:var(--x-fd);font-size:clamp(28px,4cqi,44px);line-height:1.2}
.xstat-i{display:flex;gap:16px;align-items:center}
.xsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.xsteps::before{content:"";position:absolute;top:36px;inset-inline:12%;height:2px;background:repeating-linear-gradient(to left,var(--x-ac) 0 10px,transparent 10px 18px);animation:x-dashmove 1.2s linear infinite}
@keyframes x-dashmove{to{background-position:-18px 0}}
.xsteps>div{display:grid;justify-items:center;text-align:center;gap:10px;position:relative}
.xsteps i{width:72px;height:72px;border-radius:50%;background:var(--x-bg);border:2px solid var(--x-ac);color:var(--x-ac);display:grid;place-items:center;position:relative}
.xsteps i .i{width:30px;height:30px}
.xsteps em{position:absolute;top:-6px;inset-inline-end:-6px;width:26px;height:26px;border-radius:50%;background:var(--x-ac);color:var(--x-on-ac);font-style:normal;font-size:13px;font-weight:700;display:grid;place-items:center}
.xalt{display:grid;gap:18px;max-width:820px;margin-inline:auto;position:relative}
.xalt::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--x-line)}
.xalt>div{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center}
.xalt>div>i{grid-column:2;width:44px;height:44px;border-radius:50%;background:var(--x-ac);color:var(--x-on-ac);font-style:normal;font-weight:700;display:grid;place-items:center;margin-inline:auto;position:relative;z-index:1;font-family:var(--x-fd)}
.xalt>div>.xcard{grid-column:1;grid-row:1;padding:20px}
.xalt>div:nth-child(even)>.xcard{grid-column:3}
.xchev{display:flex;gap:4px;flex-wrap:wrap}
.xchev>div{flex:1 1 180px;display:grid;gap:4px;justify-items:center;text-align:center;padding:22px 40px;background:var(--x-soft);clip-path:polygon(100% 0,calc(100% - 0px) 0,100% 0,85% 0,100% 0,100% 100%,0 100%,14% 50%,0 0);clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%,14% 50%);transform:scaleX(-1)}
.xchev>div>*{transform:scaleX(-1)}
.xchev>div:nth-child(odd){background:var(--x-ac);color:var(--x-on-ac)}
.xchev .i{width:28px;height:28px}
.xchev small{opacity:.8}

/* غير ربحي */
.xproj{overflow:hidden;display:grid;position:relative;padding:0;transition:transform .35s,box-shadow .35s}
.xproj:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.4)}
.xproj-im{aspect-ratio:16/10;border-radius:0}
.xtag{position:absolute;top:14px;inset-inline-start:14px;background:var(--x-surfaceB);color:var(--x-inkB);padding:2px 12px;border-radius:99px;font-size:12.5px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:1}
.xtag.in{position:static;box-shadow:none;background:var(--x-soft);display:inline-block;width:max-content}
.xproj-b{padding:20px;display:grid;gap:10px}
.xproj-n{display:flex;justify-content:space-between;font-size:14px}
.xproj-n b{color:var(--x-ac);font-family:var(--x-fd);font-size:17px}
.xproj-f{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.xproj-f .xb{padding:.6em 1.2em;font-size:14px}
.xfeat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px}
.xfeat-l{display:grid;gap:14px;align-content:start}
.xfl{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;border-radius:var(--x-r);background:var(--x-surfaceB);color:var(--x-inkB);border:1px solid var(--x-line)}
.xfl-im{aspect-ratio:1;border-radius:calc(var(--x-r)*.7)}
.xfl>div{display:grid;gap:6px}
.xfl .xb{padding:.55em 1em;font-size:13.5px}
.xstrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.xstrip>*{scroll-snap-align:start}
.xstrip.big{grid-auto-columns:minmax(380px,46%)}
.ximpact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;padding:40px;align-items:center}
.ximpact .xhead{margin-bottom:18px}
.xim-amt{font-family:var(--x-fd);font-size:46px;color:var(--x-ac);line-height:1.2}
.ximpact input[type=range]{width:100%;accent-color:var(--x-acB);margin-block:10px 20px}
.xim-u{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.xim-u>div{display:grid;justify-items:center;text-align:center;gap:4px;padding:14px 8px;border-radius:var(--x-r);background:var(--x-soft)}
.xim-u b{font-family:var(--x-fd);font-size:26px}
.xim-u span{font-size:13px;color:var(--x-muted)}
.xpicto{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:10px}
.xpicto i{aspect-ratio:1;display:grid;place-items:center;color:color-mix(in srgb,var(--x-ink) 18%,transparent);transition:color .3s,transform .3s}
.xpicto i.on{color:var(--x-ac);transform:scale(1.1)}
.xpicto .i{width:80%;height:80%}
.xpicto i.on .i{fill:currentColor}
.xshare{padding:28px;display:grid;gap:10px;justify-items:center;text-align:center}
.xshare svg{width:120px;height:120px}
.xshare>b{font-family:var(--x-fd);font-size:20px}
.xshare.hl{border:2px solid var(--x-acB);transform:translateY(-10px);box-shadow:0 30px 60px -36px var(--x-acB)}
.xwaqfc,.xzakat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:40px;align-items:start}
.xwaqfc .xhead,.xzakat .xhead{margin-bottom:20px}
.xfld{display:grid;gap:6px;font-size:14px;color:var(--x-muted);margin-bottom:14px}
.xfld input,.xfld textarea{font:inherit;font-size:16px;color:var(--x-ink);padding:11px 14px;border-radius:calc(var(--x-r)*.7);border:1.5px solid var(--x-line);background:var(--x-bg);width:100%}
.xfld input[type=range]{padding:0;border:0;accent-color:var(--x-acB)}
.xfld input:focus,.xfld textarea:focus{outline:none;border-color:var(--x-ac)}
.xfld b{color:var(--x-ink)}
.xwq-out,.xz-out{display:grid;gap:14px;padding:26px;border-radius:var(--x-r);background:var(--x-soft)}
.xwq-out>div:not(.xwq-bars),.xz-out>div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--x-line);padding-bottom:10px}
.xwq-out b,.xz-out b{font-family:var(--x-fd);font-size:24px}
.xwq-bars{display:flex;align-items:flex-end;gap:5px;height:120px}
.xwq-bars i{flex:1;background:var(--x-ac);border-radius:4px 4px 0 0;transition:height .5s,opacity .5s}
.xz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.xz-due-w b{font-size:38px;color:var(--x-ac)}
.xz-out .xbtns{margin-top:4px}
.xdonut-w{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.xdonut{width:200px;height:200px;transform:rotate(-90deg)}
.xdonut circle{fill:none;stroke-width:16}
.sx[data-motion=on] .xs.in .xdonut circle{animation:x-don 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*.15s)}
@keyframes x-don{from{stroke-dasharray:0 100}}
.xdonut-c{position:absolute;width:200px;height:200px;display:grid;place-content:center;text-align:center}
.xdonut-c b{font-family:var(--x-fd);font-size:22px}
.xdonut-c small{color:var(--x-muted)}
.xlegend{display:grid;gap:10px;min-width:0}
.xlegend>div{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14.5px}
.xlegend i{width:14px;height:14px;border-radius:4px}
.xlegend b{font-variant-numeric:tabular-nums}
.xdocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:30px}
.xdocs a{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--x-r);border:1px solid var(--x-line);transition:.2s}
.xdocs a:hover{border-color:var(--x-ac);color:var(--x-ac)}
.xdocs small{margin-inline-start:auto;font-size:11px;font-weight:700;background:var(--x-soft);padding:1px 8px;border-radius:6px}
.xhb{display:grid;gap:16px}
.xhb>div{display:grid;grid-template-columns:150px 1fr 48px;gap:12px;align-items:center;font-size:14px}
.xhtl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.xhtl::before{content:"";position:absolute;top:46px;inset-inline:0;height:2px;background:var(--x-line)}
.xhtl>div{display:grid;gap:8px;position:relative}
.xhtl-y{font-family:var(--x-fd);font-size:28px;color:var(--x-ac)}
.xhtl>div>i{width:16px;height:16px;border-radius:50%;background:var(--x-ac);box-shadow:0 0 0 6px color-mix(in srgb,var(--x-ac) 18%,transparent);margin-block:-2px 8px}
.xaward{padding:28px 20px;display:grid;gap:10px}
.xlaurel{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#B8861D;background:radial-gradient(circle,#FFF3CC,#F3D27A);box-shadow:0 0 0 6px color-mix(in srgb,#E2B13F 25%,transparent)}
.xlaurel .i{width:44px;height:44px}
.xcase{overflow:hidden;padding:0;display:grid}
.xcase-im{aspect-ratio:16/10;border-radius:0}
.xcase>div{padding:22px;display:grid;gap:12px}
.xcase>div>b{font-family:var(--x-fd);font-size:19px}
.xcase-m{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xcase-m span{display:grid;padding:12px;border-radius:12px;background:var(--x-soft)}
.xcase-m b{font-family:var(--x-fd);font-size:26px;color:var(--x-ac)}
.xcase-m small{color:var(--x-muted);font-size:12.5px}
.xbanum{display:grid;gap:14px;max-width:820px;margin-inline:auto}
.xbanum>div{display:grid;grid-template-columns:1fr auto auto auto;gap:22px;align-items:center;padding:20px 26px;border-radius:var(--x-r);background:var(--x-soft)}
.xbanum span{font-weight:600}
.xbanum s{color:var(--x-muted);font-size:18px}
.xbanum .i{color:var(--x-ac);width:26px;height:26px}
.xbanum b{font-family:var(--x-fd);font-size:28px;color:var(--x-ac)}
.xmasonry{columns:3;column-gap:18px;margin-top:26px}
.xmasonry .xtile{break-inside:avoid;margin-bottom:18px}
.xmasonry .xtile:nth-child(3n+1) .xim{aspect-ratio:3/4}.xmasonry .xtile:nth-child(3n+2) .xim{aspect-ratio:1}.xmasonry .xtile:nth-child(3n) .xim{aspect-ratio:4/3}
.xfilters{margin-top:0}
.xtile{position:relative;border-radius:var(--x-r);overflow:hidden}
.xtile .xim{aspect-ratio:4/3;transition:transform .6s}
.xtile:hover .xim{transform:scale(1.05)}
.xtile figcaption{position:absolute;inset:auto 0 0 0;padding:40px 18px 14px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);color:#fff;font-weight:700;transform:translateY(100%);transition:transform .35s}
.xtile:hover figcaption,.xtile.cap figcaption,.xtile.wide figcaption{transform:none}
.xtile.wide .xim{aspect-ratio:16/10}
.xbigq{max-width:900px;margin-inline:auto;display:grid;justify-items:center;text-align:center;gap:22px}
.xdots{display:flex;gap:8px}.xdots i{width:10px;height:10px;border-radius:99px;background:var(--x-line)}.xdots i.on{width:28px;background:var(--x-ac)}
.xwallq{columns:3;column-gap:16px}
.xnote{break-inside:avoid;margin-bottom:16px;padding:22px;border-radius:var(--x-r);display:grid;gap:10px}
.xnote.n0{background:var(--x-soft)}.xnote.n1{background:var(--x-ac);color:var(--x-on-ac)}.xnote.n2{background:color-mix(in srgb,var(--x-ac2B) 30%,var(--x-bg))}
.xnote:nth-child(odd){transform:rotate(-1deg)}.xnote:nth-child(even){transform:rotate(1deg)}
.xvidq{position:relative;border-radius:var(--x-r);overflow:hidden}
.xvidq .xim{aspect-ratio:3/4;border-radius:0}
.xvidq>div{position:absolute;inset:auto 0 0 0;padding:40px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;display:grid}
.xvidq .xplay{top:42%}
.xmember{display:grid;gap:4px;justify-items:center;text-align:center}
.xmember .xim{width:100%;margin-bottom:10px;transition:transform .4s}
.xmember:hover .xim{transform:translateY(-8px)}
.xcircles{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.xcircles>div{display:grid;justify-items:center;text-align:center;gap:4px;width:180px}
.xcircles .xcirc{border:4px solid var(--x-bg);box-shadow:0 0 0 2px var(--x-ac);margin-bottom:8px}
.xboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--x-line)}
.xboard>div{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px 6px;border-bottom:1px solid var(--x-line)}
.xini{grid-row:span 2;width:52px;height:52px;border-radius:14px;background:var(--x-soft);color:var(--x-ac);display:grid;place-items:center;font-family:var(--x-fd);font-size:20px;font-weight:700}
.xboard small{grid-row:span 2;grid-column:3;grid-row-start:1}
.xfaq{border-bottom:1px solid var(--x-line);padding-block:6px}
.xfaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px;font-weight:700;font-size:17px}
.xfaq summary::-webkit-details-marker{display:none}
.xfaq summary i{width:32px;height:32px;border-radius:50%;background:var(--x-soft);display:grid;place-items:center;font-style:normal;transition:transform .3s;flex-shrink:0;color:var(--x-ac)}
.xfaq[open] summary i{transform:rotate(45deg);background:var(--x-ac);color:var(--x-on-ac)}
.xfaq p{color:var(--x-muted);padding-bottom:14px}
.xhelp{padding:32px;display:grid;gap:12px;justify-items:start;align-self:start}
.xctaband{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.xctaband>div{display:grid;gap:10px;max-width:640px}
.xctaband .xbtns{margin:0}
.xctacard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;padding:0;overflow:hidden;align-items:center}
.xctacard .xim{height:100%;min-height:320px;border-radius:0}
.xctacard>div:last-child{padding:44px}
.xwa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:center}
.xwa-chat{background:var(--x-soft);border-radius:calc(var(--x-r) + 6px);padding:26px;display:grid;gap:12px;min-height:260px;align-content:end}
.xwa-chat span{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14.5px;box-shadow:0 4px 10px -6px rgba(0,0,0,.25)}
.xwa-chat .b1{justify-self:start;background:var(--x-surfaceB);color:var(--x-inkB);border-top-right-radius:4px}
.xwa-chat .b2{justify-self:end;background:var(--x-ac);color:var(--x-on-ac);border-top-left-radius:4px}
.sx[data-motion=on] .xs.in .xwa-chat .b1{animation:x-rise .6s .2s both}.sx[data-motion=on] .xs.in .xwa-chat .b2{animation:x-rise .6s 1.1s both}
.typing{justify-self:end;display:flex!important;gap:4px;background:var(--x-surfaceB)!important;width:max-content}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--x-muted);animation:x-type 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes x-type{50%{transform:translateY(-5px);opacity:.4}}
.xctabig{display:grid;justify-items:center;text-align:center;gap:20px}
.xctabig>b{font-family:var(--x-fd);font-size:clamp(60px,15cqi,190px);line-height:1;letter-spacing:-.02em}
.xcirc-btn{position:relative;width:150px;height:150px;border-radius:50%;background:var(--x-ac);color:var(--x-on-ac)!important;display:grid;place-items:center;transition:transform .4s}
.xcirc-btn:hover{transform:scale(1.08) rotate(-8deg)}
.xcirc-btn svg{position:absolute;inset:6px;animation:x-spin 16s linear infinite}
.xcirc-btn text{font-size:10.5px;font-weight:700;fill:currentColor;letter-spacing:1px}
.xcirc-btn>.i{width:40px;height:40px}
.xnlrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.xnlrow .xhead{margin:0}
.xnl{display:flex;gap:8px;padding:8px;border-radius:calc(var(--x-r) + 4px);border:1.5px solid var(--x-line);background:var(--x-bg)}
.xnl input{flex:1;min-width:0;border:0;background:none;font:inherit;padding-inline:12px;color:var(--x-ink);outline:none}
.xnlcard{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;padding:36px;align-items:center}
.xnl-art{aspect-ratio:1;border-radius:50%;overflow:hidden}
.xci{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.xci>div{display:grid}
.xform{padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.xform .full{grid-column:1/-1}
.xbranch{padding:0;overflow:hidden;display:grid;gap:4px;padding-bottom:20px}
.xbranch>*:not(.xbr-map){padding-inline:20px}
.xbr-map{height:150px;position:relative;margin-bottom:10px}
.xbr-map svg{width:100%;height:100%}
.xpin{position:absolute;top:50%;left:50%;transform:translate(-50%,-80%);color:var(--x-acB);animation:x-bob 2s ease-in-out infinite}
.xpin .i{width:44px;height:44px;fill:var(--x-surfaceB)}
.xbranch small{display:flex;gap:6px;align-items:center;color:var(--x-muted)}
.xquick{padding:26px;display:grid;gap:8px;justify-items:center;text-align:center;transition:transform .3s}
.xquick:hover{transform:translateY(-6px)}
.xpost{display:grid;gap:12px}
.xpost-im{aspect-ratio:16/10}
.xpost>div{display:grid;gap:4px}
.xpost b{font-family:var(--x-fd);font-size:18px;line-height:1.5}
.xpost:hover b{color:var(--x-ac)}
.xmag{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px}
.xmag>div{display:grid;gap:16px;align-content:start}
.xpost.big b{font-size:26px}
.xpost.row{grid-template-columns:150px minmax(0,1fr);align-items:center}
.xpost.row .xpost-im{aspect-ratio:4/3}
.xevl{display:grid;gap:14px}
.xev{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 20px}
.xevd{display:grid;justify-items:center;border-radius:14px;background:var(--x-ac);color:var(--x-on-ac);padding:8px}
.xevd b{font-family:var(--x-fd);font-size:30px;line-height:1.1}
.xev>div:nth-child(2){display:grid}
.xev small{display:flex;gap:6px;align-items:center}
.xagenda{display:grid;gap:0;max-width:860px}
.xagenda>div{display:grid;grid-template-columns:80px 30px minmax(0,1fr);gap:14px;align-items:center;padding-block:16px;border-bottom:1px solid var(--x-line)}
.xagenda>div>b{font-family:var(--x-fd);font-size:22px;color:var(--x-ac)}
.xagenda i{width:14px;height:14px;border-radius:50%;border:3px solid var(--x-ac)}
.xagenda>div>div{display:grid;gap:4px}
.xspk{display:grid;justify-items:center;text-align:center;gap:4px}
.xspk .xcirc{width:160px;height:160px;margin-bottom:10px;transition:transform .4s}
.xspk:hover .xcirc{transform:scale(1.05) rotate(-3deg)}
.xtrustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.xtrustrow>div{display:flex;gap:12px;align-items:center}
.xtrustrow>div>div{display:grid}
.xpayrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.xpayrow>span:first-child{display:flex;gap:6px;align-items:center;margin-inline-end:10px}
.xpay{padding:8px 16px;border-radius:10px;border:1px solid var(--x-line);font-weight:700;font-size:14px;background:var(--x-surfaceB);color:var(--x-inkB)}
.xlmarq{overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.xlmarq>div{display:inline-flex;gap:56px;animation:x-marq 32s linear infinite}
.xlg{display:inline-flex;align-items:center;gap:10px;font-family:var(--x-fd);font-size:20px;font-weight:700;color:var(--x-muted);opacity:.8;transition:.3s}
.xlg:hover{opacity:1;color:var(--x-ac)}
.xlg .i{width:28px;height:28px}
.xlogos{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--x-line);border-radius:var(--x-r);overflow:hidden}
.xlogos .xlg{justify-content:center;padding:30px 16px;border:1px solid var(--x-line);margin:-1px 0 0 -1px}
.xop{padding:26px;display:grid;gap:12px;justify-items:start}
.xop>b{font-family:var(--x-fd);font-size:19px}
.xop .xchips{margin:0}
.xcourse{overflow:hidden;padding:0;display:grid}
.xcourse-im{aspect-ratio:16/10;border-radius:0}
.xcourse>div{padding:20px;display:grid;gap:10px}
.xcourse>div>b{font-family:var(--x-fd);font-size:18px}
.xcourse-f{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--x-line);padding-top:12px}
.xcourse-f span{display:flex;gap:6px;align-items:center;font-size:14px}
.xcourse .xpr{font-size:22px!important}
.xcode{min-height:40px}

/* الإنفوجرافيك */
.xinfo{padding:36px;max-width:820px;margin-inline:auto}
.xif-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:center}
.xif-rings,.xif-radial{width:220px;height:220px;transform:rotate(-90deg) scaleY(-1)}
.xif-rings circle,.xif-radial circle{fill:none;stroke-width:15;stroke-linecap:round}
.xif-radial circle{stroke-width:12}
.xif-rings .bg,.xif-radial .bg{stroke:var(--x-soft)}
.xif-radial .bg{stroke-dasharray:.75 1}
.xif-rings .fg,.xif-radial .fg{stroke-dasharray:var(--p) 1}
.sx[data-motion=on] .xs.in .xif-rings .fg,.sx[data-motion=on] .xs.in .xif-radial .fg{animation:x-arc 1.8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.2s)}
@keyframes x-arc{from{stroke-dasharray:0 1}}
.xif-gauge{display:grid;justify-items:center;text-align:center;gap:4px}
.xif-gauge svg{width:min(360px,100%)}
.xif-gauge path{fill:none;stroke-width:18;stroke-linecap:round}
.xif-gauge .bg{stroke:var(--x-soft)}
.xif-gauge .fg{stroke:var(--x-ac);stroke-dasharray:var(--p) 1}
.sx[data-motion=on] .xs.in .xif-gauge .fg{animation:x-arc 2s cubic-bezier(.2,.7,.2,1) both}
.xneedle{transform-origin:100px 110px;transform:rotate(var(--a))}
.xneedle line{stroke:var(--x-ink);stroke-width:4;stroke-linecap:round}
.xneedle circle{fill:var(--x-ink)}
.sx[data-motion=on] .xs.in .xneedle{animation:x-needle 2s cubic-bezier(.3,1.4,.5,1) both}
@keyframes x-needle{from{transform:rotate(-90deg)}}
.xif-gauge>b{font-family:var(--x-fd);font-size:44px;line-height:1;margin-top:-10px}
.xwaffle{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:220px}
.xwaffle i{aspect-ratio:1;border-radius:3px;background:var(--x-soft)}
.xwaffle i.a{background:var(--x-ac)}.xwaffle i.b{background:var(--x-ac2B)}
.sx[data-motion=on] .xs.in .xwaffle i{animation:x-pop .4s both;animation-delay:calc(var(--d)*12ms)}
@keyframes x-pop{from{transform:scale(0)}}
.xif-picto{display:grid;justify-items:center;gap:16px;text-align:center}
.xif-picto>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.xif-picto i{color:color-mix(in srgb,var(--x-ink) 16%,transparent)}
.xif-picto i.on{color:var(--x-ac)}
.xif-picto .i{width:48px;height:48px}
.xif-picto i.on .i{fill:color-mix(in srgb,var(--x-ac) 30%,transparent)}
.sx[data-motion=on] .xs.in .xif-picto i.on{animation:x-pop .5s both;animation-delay:calc(var(--d)*120ms)}
.xif-picto p{font-size:18px}.xif-picto p b{font-family:var(--x-fd);font-size:26px;color:var(--x-ac)}
.xif-odo{display:grid;justify-items:center;gap:6px}
.xodo{display:flex;direction:ltr;font-family:var(--x-fd);font-size:clamp(46px,9cqi,84px);font-weight:700;color:var(--x-ac);line-height:1.2}
.xodo>span{height:1.2em;overflow:hidden;display:inline-block}
.xodo>span>span{display:flex;flex-direction:column;transform:translateY(calc(var(--n)*-1.2em))}
.xodo b{height:1.2em}
.sx[data-motion=on] .xs.in .xodo>span>span{animation:x-odo 2.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.12s)}
@keyframes x-odo{from{transform:translateY(0)}}
.xodo em{font-style:normal;opacity:.5}
.xif-hbar{display:grid;gap:14px}
.xif-hbar>div{display:grid;grid-template-columns:80px 1fr 64px;gap:12px;align-items:center}
.xif-hbar .xbar{height:18px;border-radius:6px}.xif-hbar .xbar i{border-radius:6px}
.xif-hbar>div:first-child .xbar i{background:var(--x-ac2B)}
.xif-hbar b{font-variant-numeric:tabular-nums;text-align:left}
.xif-cols{display:grid;grid-template-columns:34px 1fr;gap:8px}
.xcols-g{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--x-muted);height:200px;padding-bottom:22px}
.xcols{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;height:200px;background:linear-gradient(var(--x-line) 1px,transparent 1px) 0 0/100% 50%}
.xcols>div{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center}
.xcols i{align-self:end;height:var(--h);background:linear-gradient(to top,var(--x-ac),color-mix(in srgb,var(--x-ac) 50%,var(--x-ac2)));border-radius:8px 8px 2px 2px;position:relative;transform-origin:bottom}
.xcols>div:last-child i{background:var(--x-ac2B)}
.xcols em{position:absolute;top:-22px;inset-inline:0;font-style:normal;font-size:12px;font-weight:700}
.xcols small{font-size:11px;color:var(--x-muted);padding-top:6px;white-space:nowrap}
.sx[data-motion=on] .xs.in .xcols i{animation:x-colin 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*90ms)}
@keyframes x-colin{from{transform:scaleY(0)}}
.xif-area{width:100%;height:200px}
.xif-area line{stroke:var(--x-line);stroke-dasharray:4 5}
.xif-area .ar{fill:color-mix(in srgb,var(--x-ac) 18%,transparent)}
.xif-area .ln,.xif-kpi .ln{fill:none;stroke:var(--x-ac);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1}
.sx[data-motion=on] .xs.in .xif-area .ln,.sx[data-motion=on] .xs.in .xif-kpi .ln{animation:x-draw 2s ease both}
@keyframes x-draw{from{stroke-dashoffset:1}}
.xif-area circle{fill:var(--x-ac);stroke:var(--x-surfaceB);stroke-width:3;animation:x-ping 1.8s infinite}
.xif-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px}
.xif-cap b{color:var(--x-ac)}
.xif-stack{display:grid;gap:12px}
.xif-stack>div:not(.xlegend){display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.xstk{display:flex;height:34px;border-radius:8px;overflow:hidden}
.xstk i{display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:700}
.xstk i:nth-child(2){color:var(--x-on-ac2)}
.sx[data-motion=on] .xs.in .xstk{animation:x-w 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.15s)}
.xif-stack .xlegend{grid-template-columns:repeat(3,auto);justify-content:center;margin-top:8px}
.xif-mile{position:relative;padding-top:20px}
.xmile-l{position:absolute;top:31px;inset-inline:10%;height:4px;background:var(--x-soft);border-radius:4px}
.xmile-l i{display:block;height:100%;width:calc(var(--p)*100%);background:var(--x-ac);border-radius:4px}
.sx[data-motion=on] .xs.in .xmile-l i{animation:x-w 2s ease both}
.xmile{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;position:relative}
.xmile>div{display:grid;justify-items:center;gap:8px;font-size:13.5px}
.xmile i{width:26px;height:26px;border-radius:50%;background:var(--x-surfaceB);border:3px solid var(--x-line)}
.xmile .done i{border-color:var(--x-ac);background:var(--x-ac)}
.xmile .now i{box-shadow:0 0 0 6px color-mix(in srgb,var(--x-ac) 22%,transparent);animation:x-ping 1.8s infinite}
.xif-pyr{display:grid;gap:6px;justify-items:center}
.xif-pyr>div{width:calc(40% + var(--k)*20%);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);background:color-mix(in srgb,var(--x-ac) calc(100% - var(--k)*22%),var(--x-soft));color:var(--x-on-ac);padding:14px 30px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.xif-pyr>div:first-child{clip-path:polygon(50% 0,100% 100%,0 100%);justify-content:center;flex-direction:column;padding-top:26px;gap:0}
.xif-pyr>div:nth-child(n+3){color:var(--x-ink)}
.xif-pyr b{font-family:var(--x-fd);font-size:20px}
.sx[data-motion=on] .xs.in .xif-pyr>div{animation:x-zoom .7s both;animation-delay:calc(var(--d)*.15s)}
.xif-liquid{display:grid;justify-items:center;gap:6px}
.xif-liquid svg{width:220px;height:220px}
.xif-liquid .o{fill:none;stroke:var(--x-ac);stroke-width:3;opacity:.5}
.xif-liquid .bg{fill:var(--x-soft)}
.xlq{transform:translateY(calc((1 - var(--p))*200px))}
.xlq .w1{fill:color-mix(in srgb,var(--x-ac) 55%,transparent);animation:x-lq 4s linear infinite}
.xlq .w2{fill:var(--x-ac);animation:x-lq 2.6s linear infinite reverse}
@keyframes x-lq{to{transform:translateX(100px)}}
.xif-liquid text{font-family:var(--x-fd);font-size:40px;font-weight:700;fill:var(--x-ink);paint-order:stroke;stroke:var(--x-surfaceB);stroke-width:5px}
.xif-thermo{display:flex;gap:30px;align-items:center;justify-content:center}
.xth{position:relative;width:46px;height:260px}
.xth-t{position:absolute;top:0;bottom:30px;left:50%;width:26px;margin-left:-13px;border-radius:13px 13px 0 0;background:var(--x-soft);overflow:hidden}
.xth-t i{position:absolute;bottom:0;inset-inline:0;height:calc(var(--p)*100%);background:linear-gradient(to top,var(--x-ac),var(--x-ac2B))}
.sx[data-motion=on] .xs.in .xth-t i{animation:x-h 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes x-h{from{height:0}}
.xth-b{position:absolute;bottom:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--x-ac)}
.xth-s{display:grid;gap:14px}
.xth-s span{display:grid;color:var(--x-muted)}
.xth-s b{font-family:var(--x-fd);font-size:26px;color:var(--x-ink)}
.xif-funnel{display:grid;gap:6px;justify-items:center}
.xif-funnel>div{width:calc(100% - var(--k)*16%);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);background:color-mix(in srgb,var(--x-ac) calc(100% - var(--k)*18%),var(--x-soft));color:var(--x-on-ac);display:flex;justify-content:space-between;align-items:center;padding:14px 13%;gap:10px}
.xif-funnel>div:nth-child(n+3){color:var(--x-ink)}
.xif-funnel b{font-family:var(--x-fd);font-size:22px}
.sx[data-motion=on] .xs.in .xif-funnel>div{animation:x-rise .7s both;animation-delay:calc(var(--d)*.15s)}
.xif-tiles{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(7,52px);gap:5px;max-width:420px;margin-inline:auto}
.xif-tiles span{border-radius:10px;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:color-mix(in srgb,var(--x-ac) var(--v),var(--x-soft));color:var(--x-ink)}
.sx[data-motion=on] .xs.in .xif-tiles span{animation:x-pop .5s both;animation-delay:calc(var(--d)*60ms)}
.xif-bub{width:100%;max-height:300px}
.xif-bub text{font-size:12px;font-weight:700;fill:#fff;font-family:var(--x-fb)}
.xif-bub g{transform-box:fill-box;transform-origin:center}
.sx[data-motion=on] .xs.in .xif-bub g{animation:x-pop .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--d)*.12s)}
.xif-bub g:nth-child(2) text,.xif-bub g:nth-child(4) text{fill:var(--x-on-ac2)}
.xif-split{display:grid;gap:10px}
.xsp-bar{display:flex;height:70px;border-radius:var(--x-r);overflow:hidden}
.xsp-bar i{display:flex;align-items:center;padding-inline:20px;font-style:normal;font-family:var(--x-fd);font-size:24px;font-weight:700;gap:8px}
.xsp-bar i:first-child{width:var(--w);background:var(--x-ac);color:var(--x-on-ac)}
.xsp-bar i:last-child{flex:1;justify-content:flex-end;background:var(--x-ac2B);color:var(--x-on-ac2)}
.xsp-bar span{display:flex;gap:8px;align-items:center}
.sx[data-motion=on] .xs.in .xsp-bar i:first-child{animation:x-w 1.6s cubic-bezier(.2,.7,.2,1) both}
.xsp-l{display:flex;justify-content:space-between;color:var(--x-muted)}
.xif-kpi{display:grid;gap:6px;max-width:420px;margin-inline:auto}
.xif-kpi>div{display:flex;align-items:baseline;gap:12px}
.xif-kpi>div b{font-family:var(--x-fd);font-size:52px;line-height:1.1}
.xup{color:#178A4C;font-weight:700;background:color-mix(in srgb,#178A4C 14%,transparent);border-radius:99px;padding:2px 10px;font-size:14px}
.xif-kpi svg{width:100%;height:70px}
.xif-kpi .ar{fill:color-mix(in srgb,var(--x-ac) 18%,transparent)}
.xif-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:250px}
.xif-steps>div{height:calc(35% + var(--k)*21%);background:color-mix(in srgb,var(--x-ac) calc(40% + var(--k)*20%),var(--x-soft));border-radius:var(--x-r) var(--x-r) 0 0;display:grid;justify-items:center;align-content:start;padding-top:14px;gap:2px;color:var(--x-ink);transform-origin:bottom}
.xif-steps>div:nth-child(n+3){color:var(--x-on-ac)}
.xif-steps i .i{width:30px;height:30px}
.xif-steps b{font-family:var(--x-fd);font-size:17px}
.xif-steps span{font-size:12px;opacity:.85}
.sx[data-motion=on] .xs.in .xif-steps>div{animation:x-colin 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.15s)}

/* عناصر عائمة على مستوى الموقع */
.xfab{position:sticky;bottom:18px;z-index:20;display:flex;pointer-events:none;padding-inline:18px;margin-top:-76px;height:76px;align-items:center}
.xfab.l{justify-content:flex-end}
.xfab a{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--x-acB);color:var(--x-on-acB);border-radius:999px;padding:12px 20px 12px 14px;font-weight:700;box-shadow:0 18px 36px -14px rgba(0,0,0,.5);animation:x-bob 4s ease-in-out infinite}
.xfab a .i{width:26px;height:26px}
.xstickybar{position:sticky;bottom:0;z-index:19;display:flex;justify-content:center;gap:12px;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--x-surfaceB) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid color-mix(in srgb,var(--x-inkB) 12%,transparent);color:var(--x-inkB);font-weight:600}
.xstickybar .xb{padding:.6em 1.3em;font-size:14px}
.xsidetab{position:sticky;top:45%;z-index:19;height:0;display:flex;justify-content:flex-end}
.xsidetab a{writing-mode:vertical-rl;background:var(--x-ac2B);color:var(--x-on-ac2);padding:16px 8px;border-radius:0 12px 12px 0;font-weight:700;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);direction:rtl}

/* التجاوب حسب عرض الحاوية */
@container sx (max-width:900px){
  .xnav{display:none}.xburger{display:flex}
  .xt-header .xhd{justify-content:space-between}
  .xt-header.xv1 .xnav{display:none}
  .xh-split,.xh-split.xrev,.xh-grid,.xsplit,.xsplit.xmed,.xzig-r,.xtabs,.xtabs-p>div,.xoffer,.xone,.ximpact,.xwaqfc,.xzakat,.xg-seal-w,.xfeat,.xmag,.xnlrow,.xwa,.xctacard,.xevcard,.xseason,.xband,.xshield{grid-template-columns:minmax(0,1fr)}
  .xzig-r:nth-child(even) .xim{order:0}
  .xcards.c3,.xcards.c4,.xplans,.xstories,.xhtl,.xsteps,.xtrustrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xstory:nth-child(2){transform:none}
  .xwall,.xnums{grid-template-columns:repeat(2,1fr)}
  .xwall>div:nth-child(3),.xnums>div:nth-child(3){border-inline-start:0}
  .xft{grid-template-columns:1fr 1fr}
  .xbento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xmasonry,.xwallq{columns:2}
  .xh2h{grid-template-columns:minmax(0,1fr)}.xvs{margin-inline:auto}
  .xsteps::before,.xhtl::before,.xgjourney::before{display:none}
  .xcollage{grid-template-rows:150px 150px}
  .xh-over{margin-top:-60px}
  .xfan{height:360px}
  .xtabs-l{display:flex;overflow-x:auto}.xtabs-l button{white-space:nowrap}
  .xband>div{grid-template-columns:repeat(2,1fr)}
  .xdonut-w{grid-template-columns:minmax(0,1fr);justify-items:center}
  .xif-row{grid-template-columns:minmax(0,1fr);justify-items:center}
  .xif-row .xlegend{width:100%}
  .xboard{grid-template-columns:minmax(0,1fr)}
  .xseal{width:240px}
  .xt-hero.xv0{min-height:0}
  .xevside{justify-items:start}
}
@container sx (max-width:560px){
  .xw{padding-inline:16px}
  .xs{padding-block:calc(44px*var(--x-sp))}
  .xcards.c2,.xcards.c3,.xcards.c4,.xplans,.xstories,.xhtl,.xsteps,.xtrustrow,.xgjourney,.xtiers,.xvs2,.xft,.xstories,.xcase-m,.xim-u,.xz-grid,.xform,.xscale,.xshield-p,.xlogos,.xxx{grid-template-columns:minmax(0,1fr)}
  .xwall,.xnums,.xapp-row{grid-template-columns:repeat(2,1fr)}
  .xbento{grid-template-columns:minmax(0,1fr)}.xbento-i.b0,.xbento-i.b3{grid-column:auto;grid-row:auto}
  .xmasonry,.xwallq{columns:1}
  .xamts{grid-template-columns:repeat(2,1fr)}
  .xcd-big>span,.xcd-flip>span{min-width:0;flex:1}.xcd-big b{font-size:30px}.xcd-flip b{font-size:34px}
  .xcd-rings{flex-wrap:wrap}.xcd-rings>span{width:96px;height:96px}
  .xcollage{grid-template-columns:repeat(2,1fr);grid-template-rows:140px 140px 140px}
  .xcollage .xc1{grid-row:span 1}
  .xapp{grid-template-columns:1fr}.xapp-side{display:none}
  .xfloat{display:none}
  .xpost.row{grid-template-columns:110px minmax(0,1fr)}
  .xev{grid-template-columns:70px minmax(0,1fr)}.xev .xb{grid-column:1/-1}
  .xfl{grid-template-columns:70px minmax(0,1fr)}.xfl .xb{grid-column:1/-1}
  .xalt::before{left:22px}.xalt>div{grid-template-columns:44px minmax(0,1fr);gap:10px}.xalt>div>i{grid-column:1}.xalt>div>.xcard,.xalt>div:nth-child(even)>.xcard{grid-column:2;grid-row:1}
  .xticket{grid-template-columns:minmax(0,1fr)}.xticket>div{-webkit-mask:none!important;mask:none!important;border-radius:var(--x-r)!important}.xticket-r{border-inline-start:0;border-top:2px dashed var(--x-line)}
  .xbanum>div{grid-template-columns:1fr auto auto auto;gap:10px;padding:16px}
  .xhb>div{grid-template-columns:100px 1fr 40px}
  .xif-tiles{grid-template-rows:repeat(7,40px)}.xif-tiles span{font-size:9.5px}
  .xif-funnel>div{padding-inline:9%}
  .xseat-g{grid-template-columns:repeat(5,1fr)}
  .xmile span{font-size:11px}
  .xoffer,.xone,.ximpact,.xwaqfc,.xzakat,.xseason,.xshield,.xflash,.xdrain,.xseats,.xinfo,.xevcard{padding:24px}
  .xcorner{top:18px;left:-60px}
  .xflash-cd{margin-inline-start:0}
  .xorbit span{--r:min(40cqi,170px);font-size:12px}
  .xft-min nav{flex-wrap:wrap}
  .xtopbar span:not(:first-child){display:none}
  .xh-stats{gap:18px}
  .xif-steps{height:200px}.xif-steps b{font-size:13px}
}

.sx:not(.editing) .xhidden{display:none}