/* ═══ صَوْل — ثلاثة ألوان، لون واحد لكل حقل، لغة واحدة لكل صفحة ═══ */

@font-face{font-family:'SF Mada';src:url('../fonts/sfmada-400.woff2')format('woff2');
  font-weight:400;font-display:swap;size-adjust:123%}
@font-face{font-family:'SF Mada';src:url('../fonts/sfmada-700.woff2')format('woff2');
  font-weight:700;font-display:swap;size-adjust:123%}
@font-face{font-family:'Open Sans';src:url('../fonts/os-300.woff2')format('woff2');
  font-weight:300;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/os-400.woff2')format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/os-600.woff2')format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/os-700.woff2')format('woff2');
  font-weight:700;font-display:swap}

:root{
  --purple:#380178; --beige:#E0DBD8; --grey:#BEBABB;
  --pad:clamp(22px,6vw,110px);
  --max:1420px;
  --hdr:76px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{font-family:'Open Sans','SF Mada',sans-serif;background:var(--beige);color:var(--purple);
  line-height:1.8;word-spacing:.11em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[lang="en"] body{word-spacing:normal;line-height:1.72}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--purple);color:var(--beige)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.lat{font-family:'Open Sans',sans-serif;word-spacing:normal;font-feature-settings:"tnum"}
.rk{display:inline;padding-left:.038em;padding-right:.038em}

/* ══ الترويسة ══ */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;height:var(--hdr);
  display:flex;align-items:center;gap:26px;padding:0 var(--pad);
  background:var(--purple);color:var(--beige);
  border-bottom:1px solid rgba(224,219,216,.14);
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.hdr.clear{background:transparent;border-color:transparent}
.hdr.clear.stuck{background:var(--purple);border-color:rgba(224,219,216,.14)}
.hdr .mark{display:flex;align-items:center;gap:13px;flex:none}
.hdr .mark svg{width:auto;color:var(--beige)}
.hdr .sym{height:30px}
.hdr .wd{height:22px}
html[lang="en"] .hdr .wd{height:9px;margin-bottom:-1px}
.hdr nav{display:flex;gap:clamp(12px,1.7vw,30px);margin-inline-start:auto;align-items:center}
.hdr nav>a{font-size:13.5px;padding:8px 0;position:relative;opacity:.78;
  transition:opacity .3s var(--ease)}
.hdr nav>a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:var(--o,right);
  transition:transform .4s var(--ease)}
html[dir="ltr"] .hdr nav>a::after{--o:left}
.hdr nav>a:hover,.hdr nav>a[aria-current]{opacity:1}
.hdr nav>a:hover::after,.hdr nav>a[aria-current]::after{transform:scaleX(1)}
.lang{font-family:'Open Sans',sans-serif;font-size:11.5px;letter-spacing:.16em;
  border:1px solid rgba(224,219,216,.42);padding:6px 13px;flex:none;
  transition:background .3s var(--ease),color .3s var(--ease);word-spacing:normal}
html[lang="en"] .lang{font-family:'SF Mada',sans-serif;letter-spacing:0;font-size:14px}
.lang:hover{background:var(--beige);color:var(--purple)}
.burger{display:none;flex:none;background:none;border:0;color:inherit;width:34px;height:34px;
  cursor:pointer;margin-inline-start:auto}
.burger span{display:block;height:1.5px;background:currentColor;margin:6px 0;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px)rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px)rotate(-45deg)}
main{padding-top:var(--hdr)}
body.dark-top main{padding-top:0}

@media(max-width:1040px){
  .burger{display:block}
  .hdr nav{position:fixed;inset:var(--hdr) 0 auto;background:var(--purple);flex-direction:column;
    align-items:stretch;gap:0;padding:6px var(--pad) 26px;margin:0;
    border-bottom:1px solid rgba(224,219,216,.14);
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:.3s var(--ease)}
  .hdr nav[data-open]{transform:none;opacity:1;visibility:visible}
  .hdr nav>a{font-size:17.5px;padding:14px 0;opacity:1;
    border-bottom:1px solid rgba(224,219,216,.11)}
  .hdr nav>a::after{display:none}
  .hdr .lang{margin-top:18px;align-self:flex-start}
}

/* ══ الغلاف ══ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--purple);color:var(--beige);position:relative;overflow:hidden;
  padding:calc(var(--hdr) + 40px) var(--pad) clamp(70px,9vw,120px)}
.hero .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(56,1,120,.14) 0%,rgba(45,0,98,.46) 46%,rgba(26,0,58,.9) 100%)}
.hero .in{position:relative;max-width:var(--max);margin:0 auto;width:100%}
.herologo{width:clamp(150px,16vw,225px);color:var(--beige);margin-bottom:clamp(30px,4.5vw,54px)}
html[lang="en"] .herologo{width:clamp(160px,17vw,240px)}
.hero h1{font-size:clamp(21px,2.45vw,33px);line-height:1.62;font-weight:700;max-width:17em;
  letter-spacing:-.005em}
html[lang="en"] .hero h1{line-height:1.24;letter-spacing:-.02em;max-width:15em}
.hmeta{display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,38px);
  font-size:12.5px;opacity:.7}
.hmeta span{display:inline-flex;gap:7px;align-items:baseline}
.hscroll{position:absolute;inset-inline-start:var(--pad);bottom:26px;width:1px;height:46px;
  background:rgba(224,219,216,.28);overflow:hidden}
.hscroll span{position:absolute;inset-inline:0;top:0;height:16px;background:var(--beige);
  animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-18px)}60%,100%{transform:translateY(48px)}}

/* ظهور متدرّج عند التحميل */
.a1,.a2,.a3{opacity:0;transform:translateY(20px)}
html.js .hero .a1{animation:rise .95s var(--ease) .12s forwards}
html.js .hero .a2{animation:rise .95s var(--ease) .28s forwards}
html.js .hero .a3{animation:rise .95s var(--ease) .46s forwards}
html:not(.js) .a1,html:not(.js) .a2,html:not(.js) .a3{opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}

/* ══ الحقول ══ */
.field{padding:clamp(66px,10vw,158px) var(--pad);position:relative}
.field.beige{background:var(--beige);color:var(--purple)}
.field.purple{background:var(--purple);color:var(--beige)}
.wrap{max-width:var(--max);margin:0 auto;width:100%}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;
  opacity:.55;margin-bottom:clamp(16px,2vw,26px);word-spacing:normal}
.eyebrow i{width:clamp(26px,4vw,58px);height:1px;background:currentColor;opacity:.6;flex:none}
h2.big{font-size:clamp(23px,2.85vw,38px);line-height:1.45;font-weight:700;letter-spacing:-.01em;
  max-width:16em}
html[lang="en"] h2.big{line-height:1.14;letter-spacing:-.025em}
h3{font-size:clamp(15.5px,1.25vw,18px);font-weight:700;line-height:1.6}
.lead{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.95;max-width:36em;
  margin-top:clamp(20px,2.6vw,32px)}
html[lang="en"] .lead{line-height:1.72}
.lead-first{margin-top:14px}
.note{font-size:13.5px;line-height:1.85;opacity:.74;max-width:38em}
.note.wide{max-width:56em}
.minor{font-size:12px;letter-spacing:.2em;opacity:.55;margin-bottom:16px;word-spacing:normal;
  padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.minor.mt{margin-top:clamp(30px,3.6vw,44px)}
.prose p+p{margin-top:1.15em}
.prose{font-size:14.5px;line-height:2}
html[lang="en"] .prose{line-height:1.78}
.hr{height:1px;background:currentColor;opacity:.22;margin:clamp(30px,4vw,54px) 0}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.split.top{margin-top:clamp(30px,4vw,56px)}
.split.pj{grid-template-columns:1fr 1.2fr}
@media(max-width:900px){.split,.split.pj{grid-template-columns:1fr;gap:34px}}

/* الفاصل بالرمز */
.fivemark{display:flex;justify-content:center;margin:clamp(46px,6vw,86px) 0}
.fivemark svg{height:clamp(30px,3.4vw,46px);width:auto;opacity:.3}

/* ══ الأرقام ══ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(24px,3.4vw,52px)}
.stats .v{font-size:clamp(30px,3.5vw,50px);font-weight:300;line-height:1;letter-spacing:-.02em}
.stats .k{font-size:13px;margin-top:14px;opacity:.78}

/* ══ القوائم المرقّمة ══ */
.nlist{display:grid;margin-top:clamp(34px,4.4vw,62px);
  border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.nlist .it{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,58px);
  padding:clamp(24px,3.2vw,40px) 0;
  border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.nlist .n{font-size:clamp(17px,1.7vw,23px);font-weight:300;opacity:.38;line-height:1;
  padding-top:.3em}
.nlist .d{margin-top:10px;opacity:.82;font-size:14.5px;max-width:46em}

/* ══ الخدمات ══ */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:clamp(34px,4.4vw,62px);
  border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.svc .c{display:flex;align-items:baseline;gap:16px;
  padding:clamp(20px,2.5vw,30px) clamp(14px,2vw,28px);
  border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-inline-start:1px solid color-mix(in srgb,currentColor 22%,transparent);
  transition:background .35s var(--ease)}
.svc .c:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.svc .n{font-size:11.5px;opacity:.42;flex:none}
.svc .t{font-size:15px;font-weight:700;line-height:1.5}

/* ══ بطاقات الأعمال ══ */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(20px,2.6vw,38px);margin-top:clamp(34px,4.4vw,62px)}
.card{display:block}
.card .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.12)}
.card .im img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.card .ov{position:absolute;inset:0;background:var(--purple);opacity:0;
  transition:opacity .5s var(--ease)}
.field.beige .card .ov{background:var(--purple)}
.card:hover .im img{transform:scale(1.06)}
.card:hover .ov{opacity:.16}
.card .tx{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  padding-top:18px;margin-top:16px;
  border-top:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.card .idx{font-size:11.5px;opacity:.45;grid-row:1/3;padding-top:.3em}
.card .t{font-size:17px;font-weight:700;line-height:1.45}
.card .meta{font-size:12.5px;opacity:.62}

/* ══ غلاف المشروع ══ */
.phero{position:relative;min-height:min(80svh,660px);display:flex;align-items:flex-end;
  background:var(--purple);color:var(--beige);overflow:hidden;
  padding:calc(var(--hdr) + 40px) var(--pad) clamp(48px,6vw,88px)}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .in{position:relative;max-width:var(--max);margin:0 auto;width:100%}
.phero h1{font-size:clamp(25px,3.4vw,46px);font-weight:700;line-height:1.3;letter-spacing:-.015em}
html[lang="en"] .phero h1{line-height:1.08;letter-spacing:-.03em}

.facts{display:grid;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.facts .r{display:grid;grid-template-columns:10em 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:14px}
.facts .r .k{opacity:.55;font-size:13.5px}
@media(max-width:520px){.facts .r{grid-template-columns:1fr;gap:4px}}
.scope{display:grid;gap:11px;margin-top:6px}
.scope div{font-size:13.5px;padding-inline-start:20px;position:relative;opacity:.85;line-height:1.65}
.scope div::before{content:"";position:absolute;inset-inline-start:0;top:.78em;width:9px;height:1px;
  background:currentColor;opacity:.55}

/* ══ المعرض ══ */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(14px,1.8vw,26px)}
.gal figure{margin:0;cursor:zoom-in}
@media(min-width:900px){.gal figure.wide{grid-column:span 2}}
.gal .im{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:color-mix(in srgb,currentColor 9%,transparent)}
.gal figure.wide .im{aspect-ratio:16/9}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal .ov{position:absolute;inset:0;background:var(--purple);opacity:0;
  transition:opacity .45s var(--ease)}
.gal figure:hover img{transform:scale(1.055)}
.gal figure:hover .ov{opacity:.14}
.gal figcaption{font-size:12.5px;margin-top:12px;opacity:.8;line-height:1.6}
.galgroup+.galgroup{margin-top:clamp(48px,6vw,86px)}
.galgroup .gt{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:15px;margin-bottom:clamp(20px,2.6vw,32px);
  border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.galgroup .gt h3{font-size:18px}
.galgroup .ct{font-size:12px;opacity:.42}

/* ══ العارض ══ */
.lb{position:fixed;inset:0;z-index:90;background:rgba(30,0,66,.97);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,64px)}
.lb[data-open]{display:flex}
.lb img{max-width:100%;max-height:76vh;object-fit:contain}
.lb .cap{position:absolute;inset-inline:var(--pad);bottom:clamp(20px,3vw,38px);text-align:center;
  color:var(--beige);font-size:14px;opacity:.85}
.lb button{position:absolute;background:none;border:0;color:var(--beige);cursor:pointer;
  font-family:'Open Sans',sans-serif;font-size:32px;line-height:1;padding:16px;opacity:.7;
  transition:opacity .3s}
.lb button:hover{opacity:1}
.lb .x{top:14px;inset-inline-end:14px;font-size:27px}
.lb .pv{inset-inline-start:4px;top:50%;transform:translateY(-50%)}
.lb .nx{inset-inline-end:4px;top:50%;transform:translateY(-50%)}

/* ══ المؤسس ══ */
.founder{padding-bottom:0;overflow:hidden}
.split.fnd{grid-template-columns:1.12fr .88fr;align-items:end;gap:clamp(24px,4vw,70px)}
.fcol{padding-bottom:clamp(52px,7vw,110px)}
.fcol .facts{margin-top:clamp(24px,3vw,38px)}
.fcol .prose{margin-top:clamp(24px,3vw,38px)}
.fcol blockquote{margin-top:clamp(26px,3.2vw,40px);font-size:clamp(15.5px,1.4vw,19px);
  font-weight:700;line-height:1.7;max-width:22em;
  padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.fimg img{width:100%;max-width:540px;margin-inline-start:auto;display:block}
@media(max-width:900px){.split.fnd{grid-template-columns:1fr}
  .fcol{padding-bottom:36px}.fimg img{max-width:340px;margin:0 auto}}

/* ══ المواقع ══ */
.regions{display:grid;margin-top:clamp(34px,4.4vw,62px);
  border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.regions .r{display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(20px,2.8vw,34px) 0;
  border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.regions .n{font-size:12px;opacity:.4}
.regions .t{font-size:clamp(17px,1.9vw,23px);font-weight:700}
.regions .d{font-size:14px;opacity:.68;text-align:end;max-width:26em}
@media(max-width:760px){.regions .r{grid-template-columns:auto 1fr}
  .regions .d{grid-column:1/-1;text-align:start;margin-top:6px}}

/* ══ التواصل ══ */
.ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,4vw,52px)}
.cta{display:flex;align-items:center;gap:18px;padding:clamp(22px,2.6vw,32px);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.cta:hover{background:color-mix(in srgb,currentColor 9%,transparent);border-color:currentColor}
.cta.solo{margin-top:18px}
.cta svg{width:26px;height:26px;flex:none;opacity:.82}
.cta>span{display:grid;gap:6px}
.cta .k{font-size:11.5px;opacity:.55;letter-spacing:.14em;word-spacing:normal}
.cta .v{font-size:15px}

form{display:grid;gap:20px}
label{display:grid;gap:9px;font-size:13.5px;opacity:.9}
input,textarea,select{font-family:inherit;font-size:15px;color:inherit;background:transparent;
  border:0;border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:12px 2px;border-radius:0;transition:border-color .3s var(--ease)}
input:focus,textarea:focus,select:focus{outline:0;border-color:currentColor}
textarea{resize:vertical;min-height:104px}
select option{color:#380178;background:#E0DBD8}

.btn{display:inline-flex;align-items:center;gap:12px;justify-content:center;
  border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  padding:14px 30px;font-family:inherit;font-size:14.5px;justify-self:start;
  margin-top:clamp(28px,3.6vw,46px);position:relative;overflow:hidden;
  transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(0);transform-origin:var(--o,right);
  transition:transform .5s var(--ease)}
html[dir="ltr"] .btn::before{--o:left}
.btn:hover::before{transform:scaleX(1)}
.btn>*{position:relative;z-index:1}
.field.purple .btn:hover{color:var(--purple)}
.field.beige .btn:hover{color:var(--beige)}
form .btn{margin-top:12px}
.btn svg{width:19px;height:19px}
.btn .arw{transition:transform .45s var(--ease)}
html[dir="rtl"] .btn .arw{transform:scaleX(-1)}
.btn:hover .arw{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .arw{transform:scaleX(-1)translateX(4px)}

.nextlink{display:inline-flex;align-items:center;gap:18px}
.nextlink .arw{width:clamp(24px,3vw,38px);height:auto;opacity:.6;
  transition:transform .5s var(--ease)}
html[dir="rtl"] .nextlink .arw{transform:scaleX(-1)}
.nextlink:hover .arw{transform:translateX(8px)}
html[dir="rtl"] .nextlink:hover .arw{transform:scaleX(-1)translateX(8px)}

.instab{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,2.8vw,38px)}
.instab.wide{margin-top:clamp(30px,4vw,52px)}
.instab .k{display:block;font-size:11.5px;letter-spacing:.14em;opacity:.5;word-spacing:normal}
.instab .v{display:block;font-size:14.5px;margin-top:9px;line-height:1.6}
.certbox h3{margin-top:8px;font-size:clamp(19px,2vw,26px);letter-spacing:.02em}

/* ══ التذييل ══ */
footer{background:var(--purple);color:var(--beige);padding:clamp(56px,7vw,96px) var(--pad) 36px}
footer .in{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1.3fr 1fr 1fr;gap:clamp(30px,4.5vw,70px)}
@media(max-width:820px){footer .in{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}}
@media(max-width:520px){footer .in{grid-template-columns:1fr}}
footer .logo{width:96px;color:var(--beige)}
html[lang="en"] footer .logo{width:112px}
footer .fname{margin-top:22px;font-size:14px;opacity:.74;max-width:24em}
footer .faddr{margin-top:9px;font-size:13.5px;opacity:.6;max-width:24em}
footer h4{font-size:11.5px;letter-spacing:.18em;opacity:.5;margin-bottom:18px;
  word-spacing:normal}
footer .in>div>a{display:block;font-size:13.5px;padding:6px 0;opacity:.8;
  transition:opacity .3s var(--ease)}
footer .in>div>a:hover{opacity:1}
footer .legal{max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;padding-top:24px;
  border-top:1px solid rgba(224,219,216,.18);display:flex;flex-wrap:wrap;
  gap:10px 28px;justify-content:space-between;font-size:12.5px;opacity:.58}

/* ══ الظهور بالتمرير ══ */
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
html.js .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js .rv,.a1,.a2,.a3{opacity:1!important;transform:none!important}
}

/* ═══════════ الغلاف: أسلوب المنتجات ═══════════ */
.hero.prod{background:#0c0020;min-height:auto;overflow:hidden;text-align:center;
  padding:calc(var(--hdr) + clamp(34px,5vw,68px)) var(--pad) clamp(56px,7vw,96px);
  display:block;isolation:isolate}
.hero.prod::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(58% 40% at 50% 6%,rgba(150,92,238,.34),transparent 68%),
    radial-gradient(80% 46% at 50% 78%,rgba(96,40,180,.28),transparent 72%),
    linear-gradient(180deg,#150029 0%,#0d001d 52%,#080016 100%)}

/* الأقواس المتحدة المركز */
.rings{position:absolute;inset-inline:0;top:-14%;height:118%;z-index:1;pointer-events:none;
  display:grid;place-items:center}
.rings span{grid-area:1/1;border-radius:50%;border:1px solid rgba(224,219,216,.13);
  aspect-ratio:1;
  -webkit-mask-image:linear-gradient(180deg,#000 6%,rgba(0,0,0,.5) 46%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 6%,rgba(0,0,0,.5) 46%,transparent 78%)}
.rings span:nth-child(1){width:min(38vw,420px)}
.rings span:nth-child(2){width:min(56vw,640px);border-color:rgba(224,219,216,.10)}
.rings span:nth-child(3){width:min(76vw,880px);border-color:rgba(224,219,216,.08)}
.rings span:nth-child(4){width:min(98vw,1160px);border-color:rgba(224,219,216,.06)}
.rings span:nth-child(5){width:min(124vw,1480px);border-color:rgba(224,219,216,.045)}
html.js .rings span{transform:scale(calc(.93 + var(--p,0) * .1));
  opacity:calc(.35 + var(--p,0) * .65);
  transition:transform .5s var(--ease),opacity .5s var(--ease)}

.hero.prod .in{position:relative;z-index:3;max-width:900px;margin:0 auto}
.hero.prod .tagpill{margin:0 auto clamp(22px,3vw,34px)}
.hero.prod h1{font-size:clamp(27px,3.8vw,50px);line-height:1.38;font-weight:700;
  letter-spacing:-.015em}
html[lang="en"] .hero.prod h1{line-height:1.1;letter-spacing:-.03em}
.hero.prod .hsub{font-size:14.5px;line-height:1.95;opacity:.6;max-width:34em;
  margin:clamp(18px,2.4vw,28px) auto 0}
.hero.prod .herocta{justify-content:center;margin-top:clamp(24px,3.2vw,36px)}

/* الأزرار الزجاجية */
.gpill{display:inline-flex;align-items:center;gap:14px;padding:11px 26px 11px 11px;
  border-radius:100px;font-size:14px;color:var(--beige);
  background:rgba(224,219,216,.07);border:1px solid rgba(224,219,216,.2);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
html[dir="rtl"] .gpill{padding:11px 11px 11px 26px}
.gpill:not(.primary){padding:13px 26px}
.gpill:hover{background:rgba(224,219,216,.14);border-color:rgba(224,219,216,.4);
  transform:translateY(-2px)}
.gpill .orb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 34% 30%,#d9c4ff,#8a4ad0 62%,#4a1490);
  box-shadow:0 0 22px 3px rgba(154,92,232,.6),inset 0 1px 2px rgba(255,255,255,.5)}
.gpill .orb svg{width:16px;height:16px;color:#fff}
html[dir="rtl"] .gpill .arw{transform:scaleX(-1)}
.gpill:hover .orb{box-shadow:0 0 30px 5px rgba(178,124,255,.75),inset 0 1px 2px rgba(255,255,255,.6)}
.herocta{display:flex;flex-wrap:wrap;gap:13px}

/* ═══ شريط الاختصار في الغلاف ═══ */
.launchwrap{position:relative;z-index:3;max-width:820px;margin:clamp(32px,4.4vw,56px) auto 0}
.launch{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;
  border-radius:100px;cursor:pointer;text-align:start;font-family:inherit;font-size:13.5px;
  color:var(--beige);background:rgba(224,219,216,.055);
  border:1px solid rgba(224,219,216,.18);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.launch:hover{background:rgba(224,219,216,.11);border-color:rgba(224,219,216,.38)}
.launch .lic{width:18px;height:18px;opacity:.55;flex:none}
.ltxt{flex:1;opacity:.55;line-height:1.5}
.launch kbd{font-size:10px;letter-spacing:.06em;padding:4px 9px;border-radius:6px;
  border:1px solid rgba(224,219,216,.22);opacity:.6;flex:none;word-spacing:normal}
.lstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:clamp(26px,3.4vw,42px);text-align:center}
.lstats .v{display:block;font-size:clamp(24px,3vw,38px);font-weight:300;line-height:1}
.lstats .k{display:block;font-size:11.5px;opacity:.5;margin-top:8px}

/* زر البحث في الترويسة */
.hsearch{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;
  background:none;border:1px solid rgba(224,219,216,.28);color:inherit;
  padding:6px 11px;border-radius:100px;font-family:inherit;margin-inline-start:14px;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.hsearch svg{width:15px;height:15px;opacity:.7}
.hsearch kbd{font-size:10px;opacity:.5;word-spacing:normal}
.hsearch:hover{background:rgba(224,219,216,.1);border-color:rgba(224,219,216,.5)}
@media(max-width:1040px){.hsearch{order:-1;margin-inline-start:auto;margin-inline-end:10px}
  .hsearch kbd{display:none}}

/* ═══ لوحة الاختصار ═══ */
body.palopen{overflow:hidden}
.pal[hidden]{display:none}
.pal{position:fixed;inset:0;z-index:210;display:grid;
  align-items:start;justify-items:center;
  padding:clamp(50px,10vh,120px) 16px 20px}
.palbg{position:absolute;inset:0;background:rgba(8,0,20,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.palbox{position:relative;width:min(660px,100%);max-height:min(72vh,620px);
  display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(34,6,72,.98),rgba(16,1,36,.99));
  border:1px solid rgba(224,219,216,.2);color:var(--beige);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(130,66,222,.28);
  animation:palin .28s var(--ease) both}
@keyframes palin{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
.palhead{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid rgba(224,219,216,.13)}
.palhead .palic{width:17px;height:17px;opacity:.5;flex:none}
#palq{flex:1;background:none;border:0;color:inherit;font-family:inherit;font-size:15px;
  padding:4px 0}
#palq:focus{outline:0}
#palq::-webkit-search-cancel-button{display:none}
.palx{background:none;border:1px solid rgba(224,219,216,.22);color:inherit;cursor:pointer;
  border-radius:6px;padding:4px 9px;font:inherit;font-size:10.5px;opacity:.55;
  word-spacing:normal}
.palx:hover{opacity:1}
.palstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 18px;
  border-bottom:1px solid rgba(224,219,216,.13)}
.palstats .v{display:block;font-size:20px;font-weight:300;line-height:1}
.palstats .k{display:block;font-size:10.5px;opacity:.45;margin-top:5px;line-height:1.4}
.palres{flex:1;overflow-y:auto;padding:8px}
.palg{font-size:10.5px;letter-spacing:.16em;opacity:.4;padding:12px 12px 6px;
  word-spacing:normal}
.palit{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  transition:background .16s var(--ease)}
.palit .pt{font-size:13.5px;flex:none}
.palit .ps{font-size:11.5px;opacity:.45;flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.palit .pn{font-size:11px;opacity:.5;flex:none}
.palit.on,.palit:hover{background:rgba(154,92,232,.3)}
.palit.on .ps{opacity:.7}
.palnone{padding:34px 14px;text-align:center;font-size:13px;opacity:.5}
.palfoot{padding:11px 18px;border-top:1px solid rgba(224,219,216,.13);
  font-size:10.5px;opacity:.42;word-spacing:normal}
@media(max-width:560px){
  .pal{padding-top:14px}
  .palbox{max-height:88vh}
  .palstats{grid-template-columns:repeat(2,1fr)}
  .palfoot{display:none}
  .lstats{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .launch .ltxt{font-size:12.5px}
  .launch kbd{display:none}
}

@media(max-width:560px){.hero.prod{padding-top:calc(var(--hdr) + 44px)}
  .hero.prod .herocta{flex-direction:column;align-items:stretch}
  .hero.prod .gpill{justify-content:center}}

/* ═══════════ مسار القدرة ═══════════ */
.capwrap{position:relative;margin-top:clamp(34px,4.4vw,60px);
  touch-action:pan-y}
.capsvg{width:100%;height:auto;overflow:visible;display:block;cursor:crosshair}
.capsvg .axis,.capsvg .tick{stroke:color-mix(in srgb,currentColor 26%,transparent);
  stroke-width:1}
.capfill{fill:url(#cf)}
html.js .capfill{opacity:0;transition:opacity 1.1s var(--ease) .5s}
html.js .cap-on .capfill{opacity:1}
.capline{fill:none;stroke:url(#cg);stroke-linecap:round;stroke-linejoin:round}
.capline.halo{stroke-width:14;opacity:.42;filter:url(#cglow)}
.capline.core{stroke-width:2.6}
html.js .capline{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000)}
html.js .cap-on .capline{transition:stroke-dashoffset 1.9s var(--ease);stroke-dashoffset:0}
.cnode{cursor:pointer}
.cnode .ring{fill:none;stroke:color-mix(in srgb,currentColor 42%,transparent);stroke-width:1.4}
.cnode .core{fill:var(--beige)}
html.js .cnode{opacity:0}
html.js .cap-on .cnode{opacity:1;transition:opacity .5s var(--ease)}
.cnode.on .core,.cnode:focus-visible .core{fill:#fff}
.cnode.on .ring{stroke:var(--beige);stroke-width:2}
.cursor .cdot{fill:#fff;filter:drop-shadow(0 0 12px rgba(224,219,216,.95))}
.captip{position:absolute;pointer-events:none;transform:translate(-50%,-140%);
  padding:11px 18px;border-radius:100px;white-space:nowrap;z-index:3;
  background:rgba(28,0,62,.72);border:1px solid rgba(224,219,216,.26);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 28px rgba(154,92,232,.42);
  transition:opacity .3s var(--ease)}
.captip b{display:block;font-size:14px;color:var(--beige)}
.captip span{display:block;font-size:11.5px;opacity:.6;margin-top:3px;word-spacing:normal}
.caplegend{display:flex;justify-content:space-between;gap:16px;margin-top:14px;
  font-size:11.5px;letter-spacing:.14em;opacity:.45;word-spacing:normal}

/* ═══════════ سكة التمرير بالرمز ═══════════ */
.rail{position:fixed;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  z-index:55;width:26px;height:150px;pointer-events:none;display:none}
@media(min-width:1180px){html.js .rail{display:block}}
.rail::before{content:"";position:absolute;inset-inline-start:12px;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--purple) 22%,transparent)}
body.dark-top .rail::before{background:rgba(224,219,216,.2)}
.railfill{position:absolute;inset-inline-start:0;top:0;width:26px;
  transform:translateY(calc(var(--p,0) * 124px))}
.railfill svg{width:26px;height:auto;color:var(--purple);opacity:.85}
body.dark-top .railfill svg{color:var(--beige)}

/* ═══════════ الانتقال بين الصفحات ═══════════ */
.pagefade{position:fixed;inset:0;z-index:200;background:#10002a;pointer-events:none;
  opacity:0;transition:opacity .34s var(--ease)}
html.js body.leaving .pagefade{opacity:1;pointer-events:auto}
html.js main{animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}

/* ═══════════ خريطة الانتشار ═══════════ */
.mapwrap{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(30px,4.5vw,76px);
  align-items:center;margin-top:clamp(34px,4.4vw,62px)}
@media(max-width:960px){.mapwrap{grid-template-columns:1fr;gap:34px}}
.mapbox{position:relative}
.samap{width:100%;height:auto;overflow:visible}
.samap .land{fill:color-mix(in srgb,var(--beige) 17%,transparent);
  stroke:color-mix(in srgb,var(--beige) 62%,transparent);stroke-width:3;
  stroke-linejoin:round}
html.js .samap .land{stroke-dasharray:1;stroke-dashoffset:0}
.pin{cursor:pointer;transform-origin:center;transform-box:view-box}
.pin .halo{fill:rgba(224,219,216,.13);opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pin .ring{fill:none;stroke:rgba(224,219,216,.5);stroke-width:1.6;
  stroke-dasharray:5 8}
.pin .hex{fill:var(--beige);stroke:none}
.pin .slot{stroke:var(--purple);stroke-width:4.2;stroke-linecap:butt}
.pin:hover .halo,.pin:focus-visible .halo,.pin.on .halo{opacity:1}
.pin .hex,.pin .slot,.pin .ring{transform-origin:center;transform-box:fill-box}
html.js .pin{opacity:0}
html.js .pin .hex,html.js .pin .slot{transform:rotate(-160deg) scale(.55)}
html.js .pin.set{opacity:1;transition:opacity .55s var(--ease)}
html.js .pin.set .hex,html.js .pin.set .slot{transform:none;
  transition:transform .95s var(--ease)}
html.js .pin.set .ring{animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.reglist{display:grid;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.reg{display:grid;grid-template-columns:auto 1fr auto;gap:6px clamp(14px,2.4vw,34px);
  align-items:baseline;padding:clamp(16px,2.2vw,26px) 0;width:100%;text-align:start;
  background:none;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);
  color:inherit;font-family:inherit;cursor:pointer;
  transition:padding-inline-start .4s var(--ease),opacity .35s var(--ease)}
.reg:hover,.reg:focus-visible,.reg.on{padding-inline-start:14px}
.reg .n{font-size:11.5px;opacity:.4}
.reg .t{font-size:clamp(15.5px,1.6vw,20px);font-weight:700}
.reg .d{grid-column:2;font-size:13.5px;opacity:.62;line-height:1.6}
.reg .c{grid-row:1/3;font-size:clamp(20px,2.4vw,31px);font-weight:300;opacity:.5;line-height:1}
.reg:hover .c,.reg.on .c{opacity:1}

/* ═══════════ الأيقونات ═══════════ */
.ic{width:24px;height:24px;flex:none}
.svc .c{align-items:center;gap:14px}
.svc .ic{width:26px;height:26px;opacity:.7;transition:opacity .35s var(--ease)}
.svc .c:hover .ic{opacity:1}
.svc .n{order:3;margin-inline-start:auto}
.cta .ic{width:26px;height:26px}
.btn .ic{width:19px;height:19px}

/* ═══════════ مرشّح الأعمال ═══════════ */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,50px)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;
  font-family:inherit;font-size:14px;color:inherit;background:transparent;
  border:1px solid color-mix(in srgb,currentColor 28%,transparent);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.chip span{font-size:11px;opacity:.5}
.chip:hover{border-color:currentColor}
.chip.on{background:var(--purple);color:var(--beige);border-color:var(--purple)}
.chip.on span{opacity:.7}
.works .card{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.works .card[hidden]{display:none}
.empty{margin-top:40px;font-size:15px;opacity:.65}


/* ═══════════ الخلفية الرقمية الحيّة ═══════════ */
canvas.fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;display:block}
.hero canvas.fx{z-index:3;opacity:.85}
.field.purple canvas.fx{opacity:.85}
.field.beige canvas.fx{opacity:.6}
.phero canvas.fx{z-index:2;opacity:.75}
footer canvas.fx{opacity:.7}
.field>.wrap{position:relative;z-index:6}
.phero .in{z-index:4}
footer .in,footer .legal{position:relative;z-index:6}
@media(max-width:640px){canvas.fx{opacity:.55}}


/* زر تحميل الملف */
.btn.dl{gap:12px;flex-wrap:wrap}
.btn.dl .sz{font-size:11px;opacity:.5;letter-spacing:.1em;padding-inline-start:6px}
.instab+.btn.dl{margin-top:clamp(26px,3.2vw,40px)}

/* ═══════════ فنيات مربوطة بتقدّم القسم ═══════════ */
html.js .field,html.js .hero{--p:0}
html:not(.js) .field,html:not(.js) .hero{--p:1}

/* الخط الشعري في العنوان يمتد مع القراءة */
html.js .eyebrow i{transform:scaleX(clamp(.06,calc(var(--p) * 3),1));
  transform-origin:var(--o2,right)}
html[dir="ltr"] .eyebrow i{--o2:left}

/* أيقونات الخدمات تُرسم خطًّا خطًّا وتكتمل مع نهاية القسم */
html.js .svc .c .ic *{stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - var(--o,0)) * 2.6),1));
  fill-opacity:clamp(0,calc((var(--p) - var(--o,0)) * 2.6),1)}
html.js .svc .c{opacity:calc(.35 + clamp(0,calc((var(--p) - var(--o,0)) * 4),1) * .65)}

/* سكة تقدّم عمودية في القوائم المرقّمة */
.nlist{position:relative}
.nlist::before{content:"";position:absolute;inset-inline-start:0;top:0;width:2px;
  height:100%;background:currentColor;opacity:.16}
.nlist::after{content:"";position:absolute;inset-inline-start:0;top:0;width:2px;
  background:currentColor;opacity:.75;
  height:clamp(0%,calc(var(--p) * 165%),100%)}
html[dir="rtl"] .nlist::before,html[dir="rtl"] .nlist::after{inset-inline-start:auto;
  inset-inline-end:0}
.nlist .it{padding-inline-start:clamp(14px,2vw,26px)}
html[dir="rtl"] .nlist .it{padding-inline-start:0;padding-inline-end:clamp(14px,2vw,26px)}
html.js .nlist .n{opacity:calc(.2 + clamp(0,calc((var(--p) - var(--o,0)) * 3.4),1) * .5)}

/* بطاقات الأعمال تصعد تدريجيًا مع القسم */
html.js .works .card{transform:translateY(calc((1 - clamp(0,calc(var(--p) * 2.4),1)) * 22px))}

/* شبكة المناطق: الأرقام تشتد مع التقدّم */
html.js .reg .c{opacity:calc(.35 + clamp(0,calc(var(--p) * 2.2),1) * .65)}

/* الخريطة داخل اللوحة */
.pmapwrap{min-height:0}
@media(prefers-reduced-motion:reduce){
  html.js .field,html.js .hero{--p:1!important}
}


/* ═══ أدوات بديلة عن الأنماط السطرية — تسمح بحظر style-src 'unsafe-inline' ═══ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.field.pt0{padding-top:0}
.herocta.mtg{margin-top:clamp(28px,4vw,44px)}
/* سلّم تأخير الظهور: خطوة 0.01 */
.o0{--o:0}.o1{--o:.01}.o2{--o:.02}.o3{--o:.03}.o4{--o:.04}.o5{--o:.05}.o6{--o:.06}.o7{--o:.07}.o8{--o:.08}.o9{--o:.09}.o10{--o:.10}.o11{--o:.11}.o12{--o:.12}.o13{--o:.13}.o14{--o:.14}.o15{--o:.15}.o16{--o:.16}.o17{--o:.17}.o18{--o:.18}.o19{--o:.19}.o20{--o:.20}.o21{--o:.21}.o22{--o:.22}.o23{--o:.23}.o24{--o:.24}.o25{--o:.25}.o26{--o:.26}.o27{--o:.27}.o28{--o:.28}.o29{--o:.29}.o30{--o:.30}.o31{--o:.31}.o32{--o:.32}.o33{--o:.33}.o34{--o:.34}.o35{--o:.35}.o36{--o:.36}.o37{--o:.37}.o38{--o:.38}.o39{--o:.39}.o40{--o:.40}.o41{--o:.41}.o42{--o:.42}.o43{--o:.43}.o44{--o:.44}.o45{--o:.45}