/* طبقةُ الحركة الواحدة للموقع العام (د. طلال ٢٧ سبتمبر: «تفاعليٌّ وفخمٌ كصفحة ويستيريا»).
   تُحمَّل رابطاً ثابتاً لا عبر حزم أودو، فلا يمرّ عليها rtlcss.
   المحتوى ظاهرٌ بلا سكربت: الإخفاءُ لا يقع إلا تحت html.sgm-on. تحويلٌ وشفافيةٌ فقط. */
.sgm-bar{position:fixed;top:0;inset-inline:0;height:3px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#0DA4DB,#10153A);transform-origin:right center;transform:scaleX(0)}
html.sgm-on [data-sgm]{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--sgm-i,0) * 70ms)}
html.sgm-on [data-sgm].sgm-in{opacity:1;transform:none}
.card,.kpi,.sheet,.sg-pub-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
@media (hover:hover){
  .card:hover,.sg-pub-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(16,21,58,.35)}
  .card img,.pl-cover img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .card:hover img,.pl-cover:hover img{transform:scale(1.05)}
}
@keyframes sgmKen{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero .ph,.sgm-ken{animation:sgmKen 22s ease-in-out infinite alternate;will-change:transform}
.hero{overflow:hidden}
header.nav,.sgx-nav{transition:box-shadow .3s ease,background-color .3s ease}
html.sgm-scrolled header.nav,html.sgm-scrolled .sgx-nav{
  background-color:rgba(16,21,58,.9);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 6px 24px -14px rgba(16,21,58,.4)}
/* شعارُ الصدر يرسم نفسه */
.sgm-logo{display:block;width:74px;height:auto;margin-block-end:14px}
.sgm-logo path{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:6;stroke-dasharray:6000;stroke-dashoffset:6000;
  animation:sgmDraw 2.4s cubic-bezier(.6,.1,.3,1) forwards,sgmFill .9s ease 2s forwards}
.sgm-logo path:nth-child(2){animation-delay:.35s,2.3s}
.sgm-logo{filter:drop-shadow(0 0 0 rgba(13,164,219,0));animation:sgmGlow 1.4s ease 2.4s forwards}
@keyframes sgmDraw{to{stroke-dashoffset:0}}
@keyframes sgmFill{to{fill-opacity:1;stroke-width:0}}
@keyframes sgmGlow{to{filter:drop-shadow(0 0 14px rgba(13,164,219,.55))}}
/* العدّ التنازلي للمزاد */
.sgm-cd{display:flex;gap:10px;margin-block:14px;flex-wrap:wrap;align-items:baseline}
.sgm-cd .l{font-size:.85rem;color:#6B6F80}
.sgm-cd b{font-variant-numeric:tabular-nums;font-size:1.25rem;color:#10153A;
  background:#F6F4EF;border-radius:10px;padding:4px 10px;min-width:3ch;text-align:center}
.sgm-cd small{font-size:.7rem;color:#6B6F80;margin-inline-start:3px}
/* معرضُ صور العقار: تلاشٍ متقاطع */
.sg-pub-hero{transition:opacity .5s ease}
.sg-pub-hero.sgm-fade{opacity:0}
.sg-pub-thumbs img{cursor:pointer;transition:opacity .25s ease,transform .25s ease}
.sg-pub-thumbs img:hover{opacity:.8;transform:translateY(-2px)}
@media (min-width:1024px){.sg-pub-side{position:sticky;top:84px;align-self:start}}
@media (prefers-reduced-motion:reduce){
  html.sgm-on [data-sgm]{opacity:1;transform:none;transition:none}
  .hero .ph,.sgm-ken,.sgm-logo,.sgm-logo path{animation:none}
  .sgm-logo path{fill-opacity:1;stroke-width:0;stroke-dashoffset:0}
  .card,.sg-pub-card,.card img,.sg-pub-hero,.sg-pub-thumbs img{transition:none}
  .card:hover,.sg-pub-card:hover,.card:hover img{transform:none}
  .sgm-bar{display:none}
}
/* مقطعُ الخلفية الاختياري يُخفى مع تقليل الحركة (٢٨ سبتمبر) */
@media (prefers-reduced-motion:reduce){ video.sg-hero-video{display:none} }

/* ═══ بصمة سجريكو الحركية — sgx (١ أكتوبر ٢٠٢٦): تنفّس الصورة، انقشاع الكحلي، خطٌّ ذهبي يُرسم من اليمين، صعود العنوان، ومضة الأيقونة.
   الملف خارج rtlcss فـtransform-origin:right مقصود (بداية السطر العربي). لا translateX هنا. ═══ */
.sgx-hero{position:relative;overflow:hidden;isolation:isolate}
.sgx-hero .sgx-img,.sgx-hero.sgx-bg::before{animation:sgxKen 24s ease-in-out infinite alternate;will-change:transform}
.sgx-hero.sgx-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sgx-bg) 30% center/cover no-repeat}
.sgx-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:#10153A;opacity:0;animation:sgxVeil 1.1s cubic-bezier(.2,.7,.2,1) both}
.sgx-rule{position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,#C9A227,#E4C784);transform:scaleX(0);transform-origin:right center;animation:sgxRule .9s cubic-bezier(.6,.1,.3,1) .5s forwards;z-index:2}
.sgx-hero h1,.sgx-hero .lede,.sgx-hero .eye{animation:sgxRise .8s cubic-bezier(.2,.7,.2,1) both}
.sgx-hero .eye{animation-delay:.25s}.sgx-hero h1{animation-delay:.34s}.sgx-hero .lede{animation-delay:.43s}
.sgx-mark{animation:sgxMark 1.6s ease-out 1s 1 both}
.sgx-years{font-variant-numeric:tabular-nums;color:#E4C784;font-weight:800}
@keyframes sgxKen{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes sgxVeil{from{opacity:.95}to{opacity:0}}
@keyframes sgxRule{to{transform:scaleX(1)}}
@keyframes sgxRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sgxMark{0%{filter:drop-shadow(0 0 0 rgba(13,164,219,0))}40%{filter:drop-shadow(0 0 16px rgba(13,164,219,.7))}100%{filter:drop-shadow(0 0 0 rgba(13,164,219,0))}}
@media (prefers-reduced-motion:reduce){
  .sgx-hero .sgx-img,.sgx-hero.sgx-bg::before,.sgx-hero::after,.sgx-hero h1,.sgx-hero .lede,.sgx-hero .eye,.sgx-mark{animation:none}
  .sgx-hero::after{opacity:0}.sgx-rule{animation:none;transform:none}
}

/* ═══ بصمة سجريكو الحركية (اعتمدها د. طلال ٢ أكتوبر ٢٠٢٦) ═══
   نمطٌ واحد لكل صدرٍ بصورة: صفحات المشاريع والتسويق والخدمات وصورة العقار. تُحقن الطبقة .sgx-fx بـsgmotion.js
   في كل .sgx-hero وفي صدر صفحة العقار: وهجٌ ذهبيٌّ أزرق يتنفّس، لمعةٌ مائلة تعبر الصورة، وذرّاتُ ضوءٍ تصعد.
   والشعارُ في «الجوهرة الزجاجية» .sgx-emb. الألوان ألوان الهوية: أزرق سجريكو #0DA4DB وذهب #E4C784. */
.sgx-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* المحتوى فوق الطبقة — والعناصرُ المطلقة بعدها (كخطّ الذهب أسفل الصدر) لا تُمسّ */
.sgx-fx ~ .wrap,.sgx-fx ~ .in{position:relative;z-index:1}
.sgx-fx .glow{position:absolute;left:-10%;right:-10%;bottom:-38%;height:75%;
  background:radial-gradient(60% 60% at 30% 50%,rgba(228,199,132,.30),transparent 70%),radial-gradient(50% 55% at 72% 55%,rgba(13,164,219,.28),transparent 70%);
  filter:blur(10px);animation:sgxGlow 9s ease-in-out infinite alternate}
@keyframes sgxGlow{from{opacity:.5;transform:translate3d(-2%,0,0) scale(1)}to{opacity:1;transform:translate3d(2%,-3%,0) scale(1.08)}}
.sgx-fx .sheen{position:absolute;top:-30%;bottom:-30%;left:-45%;width:34%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent 0%,rgba(255,236,190,0) 15%,rgba(255,236,190,.18) 50%,rgba(255,236,190,0) 85%,transparent 100%);
  animation:sgxSheen 9s ease-in-out 1.6s infinite}
@keyframes sgxSheen{0%,55%{left:-45%}100%{left:125%}}
.sgx-fx .mote{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:#F3DDA6;
  box-shadow:0 0 10px 3px rgba(243,221,166,.75);opacity:0;animation:sgxMote 11s linear infinite}
.sgx-fx .m1{left:8%}.sgx-fx .m2{left:22%;animation-delay:2.4s;width:3px;height:3px}
.sgx-fx .m3{left:37%;animation-delay:5.1s}.sgx-fx .m4{left:52%;animation-delay:1.3s;width:4px;height:4px;background:#9FDDF4;box-shadow:0 0 10px 3px rgba(159,221,244,.7)}
.sgx-fx .m5{left:66%;animation-delay:7.2s;width:3px;height:3px}.sgx-fx .m6{left:81%;animation-delay:3.6s}
.sgx-fx .m7{left:93%;animation-delay:8.8s;width:4px;height:4px;background:#9FDDF4;box-shadow:0 0 10px 3px rgba(159,221,244,.7)}
@keyframes sgxMote{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.9}70%{opacity:.6}100%{transform:translate3d(24px,-620px,0);opacity:0}}
/* الجوهرة الزجاجية */
.sgx-emb{position:relative;display:inline-block;width:104px;line-height:0;margin:40px 40px 30px}
.sgx-emb .mk{position:relative;z-index:2;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(228,199,132,.5));
  animation:sgxFloat 5s ease-in-out infinite}
@keyframes sgxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sgx-emb .halo{position:absolute;inset:-58px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(228,199,132,.40) 0%,rgba(13,164,219,.18) 45%,transparent 70%);animation:sgxHalo 6s ease-in-out infinite}
@keyframes sgxHalo{0%,100%{transform:scale(.86);opacity:.55}50%{transform:scale(1.1);opacity:1}}
.sgx-emb .plate{position:absolute;inset:-26px;border-radius:30px;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 24px 50px -22px rgba(0,0,0,.75),0 0 44px rgba(228,199,132,.28)}
.sgx-emb .plate::before{content:"";position:absolute;inset:-2px;border-radius:32px;padding:2px;
  background:conic-gradient(from var(--sgx-a,0deg),transparent 0 58%,#F3DDA6 72%,#fff 78%,#9FDDF4 86%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sgxConic 5.5s linear infinite}
@property --sgx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sgxConic{to{--sgx-a:360deg}}
.sgx-emb .spark{position:absolute;z-index:4;width:14px;height:14px;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 20%),linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;
  filter:drop-shadow(0 0 6px #F3DDA6);animation:sgxSpark 4.2s ease-in-out infinite}
.sgx-emb .s1{top:-34px;left:-18px}.sgx-emb .s2{top:-20px;right:-34px;animation-delay:1.1s;width:10px;height:10px}
.sgx-emb .s3{bottom:-30px;right:-12px;animation-delay:2.2s}.sgx-emb .s4{bottom:-14px;left:-36px;animation-delay:3.1s;width:9px;height:9px}
@keyframes sgxSpark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
.sgx-emb .shine{position:absolute;inset:0;z-index:3;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;background:linear-gradient(105deg,transparent 30%,rgba(255,245,215,.95) 50%,transparent 70%) no-repeat;
  background-size:260% 100%;background-position:140% 0;animation:sgxFloat 5s ease-in-out infinite,sgxShine 5.5s ease-in-out 1.2s infinite}
@keyframes sgxShine{0%,45%{background-position:140% 0}100%{background-position:-60% 0}}
@media (max-width:820px){.sgx-emb{width:84px;margin:36px 36px 24px}}
@media (prefers-reduced-motion:reduce){.sgx-fx *,.sgx-emb *,.sgx-emb .plate::before{animation:none !important}.sgx-fx .sheen,.sgx-fx .mote,.sgx-emb .spark{display:none}}

/* ═══ رموز الخدمات ببصمة سجريكو: علامةُ الشركة تُرسم في ركن الرمز ثم تمتلئ (٢ أكتوبر ٢٠٢٦ — بدل الانقلاب المتعب للعين) ═══ */
.rbi .sgi-draw path{fill:#19B8F0;stroke:#9FDDF4;stroke-width:26;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  animation:sgiDraw 7s ease-in-out infinite}
@keyframes sgiDraw{0%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}32%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1}
  46%,86%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}100%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:0}}
:nth-child(4n+2) > .rbi .sgi-draw path, :nth-child(4n+2) > a > .rbi .sgi-draw path{animation-delay:-1.7s}
:nth-child(4n+3) > .rbi .sgi-draw path, :nth-child(4n+3) > a > .rbi .sgi-draw path{animation-delay:-3.4s}
:nth-child(4n+4) > .rbi .sgi-draw path, :nth-child(4n+4) > a > .rbi .sgi-draw path{animation-delay:-5.1s}
@media (prefers-reduced-motion:reduce){.rbi .sgi-draw path{animation:none;stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}}

/* الشعار الزجاجي في صدور الصفحات العامة (تعميم ٣ أكتوبر ٢٠٢٦): أصغر من صدر رُبى ولا يزاحم العنوان */
.s4-hero .sgx-emb{width:64px;margin:6px 22px 34px;display:block}
@media (max-width:820px){.s4-hero .sgx-emb{width:52px;margin:4px 18px 28px}}