/* ==========================================================================
   NABDA Creativity — الصفحة الرئيسية
   الاتجاه المعتمد: «ج — الإطار الكامل»
   أسود خالص، إطارات كاملة العرض، الصورة تقود والنص يتأخر.
   الهوية: #003F91 كوبالت (مصدر الضوء) · #5DA9E9 سماوي · #E5F4E3 نعناعي · #6D326D بنفسجي
   كل الاتجاهات منطقية (logical properties) — نفس الملف يخدم RTL و LTR.
   ========================================================================== */

/* ---------- 1. الرموز ---------- */
:root{
  --cobalt:#003F91;
  --sky:#D8AD69;
  --mint:#F4F1EA;
  --plum:#6B4931;

  --void:#000000;
  --near:#08090B;
  --panel:#0E1116;

  --white:#FFFFFF;
  --text:#C8D2DC;
  --dim:#8D9AA8;
  --dim-2:#88939E;
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.05);

  --pad:clamp(20px,4.4vw,64px);
  --max:1680px;

  --ease:cubic-bezier(.2,.8,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.16,1,.3,1);

  --disp:"Almarai","Segoe UI",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--void);color:var(--white);
  font-family:var(--body);font-size:16px;line-height:1.75;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:800;line-height:1.22;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--sky);outline-offset:5px}
::selection{background:var(--cobalt);color:var(--white)}

.pad{padding-inline:var(--pad)}
.hold{width:min(var(--max),100%);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.js [data-in]{opacity:0;transform:translateY(30px);
  transition:opacity 1.1s var(--slow),transform 1.1s var(--slow)}
.js [data-in].on{opacity:1;transform:none}
.js [data-in][data-d="1"]{transition-delay:.12s}
.js [data-in][data-d="2"]{transition-delay:.24s}
.js [data-in][data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.js [data-in]{opacity:1;transform:none;transition:none}}

/* نبرة صغيرة موحّدة */
.tone{font-size:12px;letter-spacing:.18em;color:var(--dim-2);font-weight:400}
.tone--sky{color:var(--sky)}

/* خانة نائبة لمحتوى لم يُسلَّم بعد */
.ph{display:inline-block;padding:1px 9px;font-size:.8em;letter-spacing:.05em;
  color:#C9A6C9;border:1px dashed rgba(201,166,201,.42);background:rgba(109,50,109,.2)}

/* ---------- 3. الأزرار ---------- */
.act{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:16px 34px;font-size:15px;font-weight:600;
  background:var(--white);color:var(--void);
  transition:background .4s var(--ease),color .4s var(--ease)}
.act:hover{background:var(--sky);color:var(--void)}
.act--ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.28)}
.act--ghost:hover{background:var(--white);color:var(--void);border-color:var(--white)}
.act svg{width:16px;height:16px;flex:none}
[dir="rtl"] .act svg.arw{transform:scaleX(-1)}

.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:14px;font-weight:500;color:var(--white);
  border-block-end:1px solid rgba(255,255,255,.32);padding-block-end:3px}
.tlink:hover{border-block-end-color:var(--sky);color:var(--sky)}
.tlink svg{width:15px;height:15px;transition:transform .35s var(--ease)}
[dir="rtl"] .tlink svg{transform:scaleX(-1)}
.tlink:hover svg{transform:translateX(5px)}
[dir="rtl"] .tlink:hover svg{transform:scaleX(-1) translateX(5px)}

/* دائرة التشغيل */
.play{border-radius:50%;border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .55s var(--slow)}
.play svg{color:var(--white);transition:color .45s var(--ease)}
[dir="rtl"] .play svg{transform:scaleX(-1)}
.play:hover,button:hover>.play,a:hover .play{background:var(--white);border-color:var(--white)}
.play:hover svg,button:hover>.play svg,a:hover .play svg{color:var(--void)}

/* ---------- 4. الرأس ---------- */
.chrome{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:84px;padding-inline:var(--pad);
  transition:background .5s var(--ease),height .5s var(--ease)}
.chrome.solid{background:rgba(0,0,0,.82);backdrop-filter:blur(18px);height:70px}
.chrome img{height:34px;width:auto}
.chrome__r{display:flex;align-items:center;gap:26px}
.chrome__nav{display:flex;gap:28px;font-size:14px;color:var(--text)}
.chrome__nav a{transition:color .3s var(--ease)}
.chrome__nav a:hover{color:var(--white)}
.lang{display:flex;gap:6px;font-size:13px;color:var(--dim)}
.lang a{padding:6px 4px;transition:color .3s var(--ease)}
.lang a:hover{color:var(--text)}
.lang a[aria-current="true"]{color:var(--white);font-weight:600}
.menu{display:none;width:44px;height:44px;place-items:center}
.menu span{display:block;width:26px;height:1.5px;background:var(--white);
  box-shadow:0 7px 0 var(--white)}

.sheet{position:fixed;inset:0;z-index:95;background:var(--void);
  padding:24px var(--pad) 40px;display:flex;flex-direction:column;
  transform:translateY(-101%);transition:transform .6s var(--slow);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet__top{display:flex;align-items:center;justify-content:space-between;height:60px;margin-block-end:44px}
.sheet__top img{height:32px;width:auto}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{font-family:var(--disp);font-weight:700;font-size:28px;padding-block:18px;
  border-block-end:1px solid var(--hair-2)}
.sheet .act{margin-block-start:36px}
.sheet__end{margin-block-start:auto;display:flex;justify-content:space-between;align-items:center;
  padding-block-start:26px;border-block-start:1px solid var(--hair-2)}

/* ---------- 5. الإطار: الوحدة الأساسية للصفحة ---------- */
.frame{position:relative;overflow:hidden;isolation:isolate}
.frame__bed{position:absolute;inset:0;z-index:-2}
.frame__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 2px,transparent 2px 4px)}

/* الإطار الافتتاحي */
.open{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:120px 46px}
.open .frame__bed{
  background:
    radial-gradient(74% 78% at 66% 30%,rgba(0,63,145,.62),transparent 68%),
    radial-gradient(48% 52% at 10% 92%,rgba(109,50,109,.34),transparent 74%),
    radial-gradient(40% 40% at 92% 88%,rgba(93,169,233,.16),transparent 72%),
    linear-gradient(180deg,#06070A 0%,#000 66%)}
.open__meta{position:absolute;inset-block-start:120px;inset-inline-start:var(--pad);z-index:2}
.open__copy{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;
  gap:clamp(30px,5vw,90px);align-items:flex-end}
.open h1{font-size:clamp(32px,4.7vw,68px);line-height:1.26;max-width:15ch;font-weight:800}
.open h1 span{display:block;color:var(--sky);font-weight:300}
.open__side{max-width:330px}
.open__side .play{width:96px;height:96px;margin-block-end:24px}
.open__side .play svg{width:24px;height:24px}
.open__side p{font-size:15px;line-height:2;color:var(--dim)}
.open__foot{position:relative;z-index:2;display:flex;align-items:center;gap:14px;
  margin-block-start:clamp(34px,4.4vw,60px);
  padding-block-start:24px;border-block-start:1px solid var(--hair-2)}
.open__acts{display:flex;gap:12px;flex-wrap:wrap;margin-inline-end:auto}

/* الإطار البياني — نص فقط، هواء كثير */
.say{min-height:78svh;display:grid;place-items:center;text-align:start;
  padding-block:clamp(80px,12vw,170px)}
.say .frame__bed{background:
  radial-gradient(56% 60% at 50% 40%,rgba(0,63,145,.30),transparent 70%),
  var(--void)}
.say__in{position:relative;z-index:2;width:min(880px,100%)}
.say h2{font-size:clamp(26px,3.6vw,54px);line-height:1.34;font-weight:300;color:var(--text)}
.say h2 b{font-weight:800;color:var(--white);display:block}
.say p{margin-block-start:clamp(22px,2.8vw,34px);font-size:16px;line-height:2.05;
  color:var(--dim);max-width:56ch;margin-inline:auto}

/* ---------- 6. الأعمال: سلسلة لقطات ---------- */
.reel{padding-block:clamp(60px,8vw,110px) 0}
.reel__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;margin-block-end:clamp(26px,3.4vw,44px)}
.reel__head h2{font-size:clamp(24px,3vw,44px);max-width:16ch}
.paths{display:flex;gap:26px}
.paths button{font-size:14px;font-weight:500;color:var(--dim-2);min-height:44px;
  border-block-end:1px solid transparent;padding-block-end:4px;transition:color .3s var(--ease)}
.paths button[aria-selected="true"]{color:var(--white);border-block-end-color:var(--sky)}
.paths button:hover{color:var(--text)}

.pitch{width:min(820px,100%);margin-block-end:clamp(30px,4vw,52px)}
.pitch[hidden]{display:none}
.pitch p{font-family:var(--disp);font-weight:300;font-size:clamp(17px,1.7vw,25px);
  line-height:1.65;color:var(--text)}

.shots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shot{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--panel),#000);
  height:clamp(260px,40vw,470px);display:grid;place-items:center;width:100%;text-align:start;
  padding:0;border:0;color:inherit;font:inherit}
.shot[hidden]{display:none}
.shot--full{grid-column:span 2;height:clamp(300px,58vw,620px)}
.shot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--slow)}
.shot:hover .shot__img{transform:scale(1.03)}
.shot__slot{position:absolute;inset:0;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 16px,transparent 16px 32px),
    radial-gradient(56% 58% at 50% 42%,rgba(0,63,145,.34),transparent 72%);
  font-size:11px;letter-spacing:.18em;color:#4E5A67;text-align:center;padding:20px}
.shot::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.92))}
.shot__play{position:absolute;inset-block-start:24px;inset-inline-start:24px;z-index:3;
  width:52px;height:52px}
.shot__play svg{width:16px;height:16px}
.shot__cap{position:absolute;z-index:3;inset-block-end:26px;inset-inline:28px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.shot__cap b{font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.7vw,25px);
  display:block;margin-block-end:6px}
.shot__cap .tone{display:block}
.reel__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;margin-block-start:clamp(24px,3vw,40px)}
.reel__note{font-size:14px;line-height:1.9;color:var(--dim-2);max-width:58ch}

/* ---------- 7. المخاوف ---------- */
.fears{padding-block:clamp(76px,10vw,150px)}
.fears>.pad>h2{font-size:clamp(24px,3vw,44px);max-width:14ch;
  margin-block-end:clamp(36px,5vw,72px)}
.fear{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,5vw,80px);
  padding-block:clamp(34px,4.4vw,60px);border-block-start:1px solid var(--hair-2);
  align-items:start}
.fear:last-child{border-block-end:1px solid var(--hair-2)}
.fear__q{font-family:var(--disp);font-weight:300;font-size:clamp(21px,2.5vw,36px);
  line-height:1.45;color:var(--white);max-width:18ch}
.fear__a b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;
  color:var(--sky);margin-block-end:12px}
.fear__a p{font-size:15.5px;line-height:2.05;color:var(--dim);max-width:48ch}

/* ---------- 8. الطريقة ---------- */
.how{padding-block:clamp(76px,10vw,150px);position:relative;overflow:hidden}
.how .frame__bed{background:
  radial-gradient(50% 56% at 88% 6%,rgba(0,63,145,.34),transparent 70%),var(--void)}
.how__head{position:relative;z-index:2;width:min(760px,100%);margin-block-end:clamp(40px,5.4vw,80px)}
.how__head h2{font-size:clamp(24px,3vw,44px);max-width:16ch}
.how__head p{margin-block-start:22px;font-size:16px;line-height:2.05;color:var(--dim)}
.steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,42px)}
.step{border-block-start:1px solid var(--hair);padding-block-start:24px}
.step__n{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--sky);
  letter-spacing:.06em}
.step h3{font-size:clamp(17px,1.5vw,22px);font-weight:700;margin-block:16px 12px;line-height:1.4}
.step p{font-size:14.5px;line-height:1.95;color:var(--dim)}
.step em{display:block;font-style:normal;margin-block-start:14px;font-size:13.5px;
  color:var(--mint);line-height:1.8}

/* ---------- 9. الخدمات ---------- */
.svcs{padding-block:clamp(60px,8vw,120px)}
.svcs>.pad>h2{font-size:clamp(24px,3vw,44px);max-width:18ch;
  margin-block-end:clamp(30px,4vw,54px)}
.svc{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,3vw,52px);
  align-items:start;padding-block:clamp(24px,2.8vw,38px);
  border-block-start:1px solid var(--hair-2);transition:padding-inline .5s var(--ease)}
.svc:last-of-type{border-block-end:1px solid var(--hair-2)}
.svc:hover{padding-inline:clamp(8px,1.4vw,22px)}
.svc__n{font-size:13px;color:var(--dim-2);letter-spacing:.1em}
.svc__t{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.1vw,32px);
  line-height:1.35;transition:color .4s var(--ease)}
.svc:hover .svc__t{color:var(--sky)}
.svc__d{display:block;font-size:13.5px;color:var(--sky);margin-block-start:8px}
.svc__s{font-size:14.5px;line-height:2;color:var(--dim)}

/* ---------- 10. التأهيل: الإطار الأخير ---------- */
.ask{position:relative;overflow:hidden;padding-block:clamp(78px,10vw,150px)}
.ask .frame__bed{background:
  radial-gradient(62% 64% at 74% 4%,rgba(0,63,145,.5),transparent 68%),
  radial-gradient(44% 48% at 8% 96%,rgba(109,50,109,.3),transparent 72%),
  var(--void)}
.ask__grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(34px,5.4vw,92px);align-items:start}
.ask h2{font-size:clamp(24px,3.2vw,48px);max-width:14ch}
.ask__lead{margin-block-start:22px;font-size:16px;line-height:2.05;color:var(--text);max-width:46ch}
.ask__ok{margin-block-start:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.ask__ok li{display:flex;gap:12px;align-items:flex-start;color:var(--dim);font-size:14.5px;line-height:1.8}
.ask__ok svg{width:15px;height:15px;color:var(--mint);flex:none;margin-block-start:5px}

.set{margin-block-end:clamp(26px,3vw,38px);border:0;padding:0}
.set legend{padding:0;margin-block-end:16px}
.opts{display:flex;flex-wrap:wrap;gap:10px 22px}
.opt{min-height:44px;font-size:15px;color:var(--dim);padding-block:8px;
  border-block-end:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.opt:hover{color:var(--text)}
.opt[aria-pressed="true"]{color:var(--white);border-block-end-color:var(--sky);font-weight:600}
.ask__go{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-block-start:1px solid var(--hair-2);padding-block-start:26px}
.ask__hint{font-size:13px;color:var(--dim-2);line-height:1.85;max-width:36ch}

/* ---------- 11. الذيل ---------- */
.end{border-block-start:1px solid var(--hair-2);padding-block:clamp(52px,6.4vw,88px) 26px}
.end__top{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:clamp(28px,4vw,56px);
  margin-block-end:clamp(42px,5.4vw,72px)}
.end__say{font-family:var(--disp);font-weight:300;font-size:clamp(21px,2.4vw,34px);
  line-height:1.45;max-width:15ch;margin-block-end:26px}
.end h4{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--dim-2)}
.end li{margin-block-end:11px;color:var(--dim);font-size:14.5px}
.end a:hover{color:var(--white)}
.end__c li{display:flex;align-items:center;gap:11px}
.end__c svg{width:16px;height:16px;color:var(--sky);flex:none}
.social{display:flex;gap:16px;margin-block-start:22px}
.social a{width:44px;height:44px;display:grid;place-items:center;color:var(--dim);
  transition:color .3s var(--ease)}
.social a:hover{color:var(--white)}
.social svg{width:19px;height:19px}
.end__bot{border-block-start:1px solid var(--hair-2);padding-block-start:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.end__bot,.end__bot a{color:var(--dim-2);font-size:13px}

/* ---------- 12. نافذة الفيديو ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.94)}
.modal[hidden]{display:none}
.modal__box{width:min(1200px,100%);aspect-ratio:16/9;background:#000;overflow:hidden}
.modal__box iframe{width:100%;height:100%;border:0;display:block}
.modal__none{width:100%;height:100%;display:grid;place-items:center;text-align:center;
  padding:32px;color:var(--dim);font-size:14.5px;line-height:2;white-space:pre-line;
  background:linear-gradient(150deg,var(--panel),#000)}
.modal__x{position:absolute;inset-block-start:26px;inset-inline-end:26px;width:48px;height:48px;
  display:grid;place-items:center;color:var(--white)}
.modal__x:hover{color:var(--sky)}
.modal__x svg{width:22px;height:22px}

/* ---------- 13. الاستجابة ---------- */
@media (max-width:1100px){
  .steps{grid-template-columns:1fr 1fr;gap:30px}
  .ask__grid{grid-template-columns:1fr}
  .end__top{grid-template-columns:1fr 1fr}
  .fear{grid-template-columns:1fr;gap:18px}
}

@media (max-width:860px){
  .chrome__nav,.lang{display:none}
  .chrome .act{display:none}
  .menu{display:grid}
  .open{min-height:100svh;padding-block:126px 40px}
  .open__meta{position:static;margin-block-end:clamp(60px,16vw,120px)}
  .open__copy{grid-template-columns:1fr;gap:36px}
  .open__side{max-width:none;display:flex;align-items:center;gap:20px}
  .open__side .play{width:70px;height:70px;margin-block-end:0;flex:none}
  .open__foot{flex-direction:column;align-items:stretch}
  .open__acts{width:100%}
  .open__acts .act{flex:1}
    .shots{grid-template-columns:1fr}
  .shot--full{grid-column:span 1}
  .shot__cap{flex-direction:column;align-items:flex-start;gap:8px}
  .svc{grid-template-columns:auto 1fr}
  .svc__d{display:none}
  .end__top{grid-template-columns:1fr;gap:34px}
}

@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .paths{gap:18px}
  .open__acts{flex-direction:column}
  .say__in{max-width:none}
}


/* ---------- 17. صفحة طلب عرض السعر ---------- */
.ask--page{min-height:100svh;padding-block:clamp(120px,14vw,180px) clamp(70px,9vw,120px)}
.ask--page h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,50px);
  line-height:1.22;max-width:14ch}

.qform{background:rgba(255,255,255,.028);border:1px solid var(--hair);
  padding:clamp(22px,3vw,42px)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block-end:clamp(24px,3vw,34px)}
.qf{display:flex;flex-direction:column;gap:9px}
.qf--full{margin-block:clamp(20px,2.6vw,30px)}
.qf>span{font-size:13px;letter-spacing:.06em;color:var(--dim)}
.qf>span i{font-style:normal;color:var(--dim-2);font-size:12px}
.qf input,.qf textarea{background:transparent;border:0;border-block-end:1px solid var(--hair);
  color:var(--white);font:inherit;font-size:16px;padding:12px 2px;min-height:48px;
  transition:border-color .3s var(--ease)}
.qf textarea{min-height:120px;resize:vertical;line-height:1.9}
.qf input:focus,.qf textarea:focus{outline:0;border-block-end-color:var(--sky)}
.qf input::placeholder{color:var(--dim-2)}

.opt--radio{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border-block-end:1px solid transparent}
.opt--radio input{position:absolute;opacity:0;width:0;height:0}
.opt--radio span{transition:color .3s var(--ease)}
.opt--radio:hover span{color:var(--text)}
.opt--radio:has(input:checked) span{color:var(--white);font-weight:600}
.opt--radio:has(input:checked){border-block-end-color:var(--sky)}
.opt--radio:has(input:focus-visible){outline:2px solid var(--sky);outline-offset:5px}

.agree{display:flex;align-items:flex-start;gap:12px;margin-block-end:clamp(22px,2.6vw,32px);
  color:var(--dim);font-size:14.5px;line-height:1.75;cursor:pointer}
.agree input{width:20px;height:20px;accent-color:var(--sky);flex:none;margin-block-start:3px}

.alert{border:1px solid rgba(201,166,201,.5);background:rgba(109,50,109,.18);
  padding:16px 20px;margin-block-end:26px;color:#E7D3E7;font-size:14.5px;line-height:1.9}
.alert ul{padding-inline-start:18px;list-style:disc}

.trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.sent{max-width:52ch}
.sent h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.24}
.sent p{margin-block:22px 34px;font-size:17px;line-height:2;color:var(--text)}

@media (max-width:760px){
  .qgrid{grid-template-columns:1fr}
}


/* ---------- 18. من نحن ---------- */
.about{position:relative;overflow:hidden;isolation:isolate;min-height:min(900px,90svh);padding-block:clamp(90px,12vw,180px)}
.about__media--backdrop{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:var(--near);pointer-events:none}
.about__media--backdrop img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 58%;filter:saturate(.78) contrast(1.08)}
.about::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.9) 88%),linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.2) 62%,rgba(0,0,0,.56))}
[dir="ltr"] .about::before{background:linear-gradient(-90deg,rgba(0,0,0,.48),rgba(0,0,0,.9) 88%),linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.2) 62%,rgba(0,0,0,.56))}
.about .frame__bed{z-index:1;background:radial-gradient(52% 56% at 16% 10%,rgba(0,63,145,.22),transparent 70%)}
.about>.pad{position:relative;z-index:3}
.about__grid{position:relative;z-index:3;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,5vw,90px);align-items:start}
.about h2{font-size:clamp(24px,3vw,44px);max-width:14ch}
.about__body{font-size:clamp(16px,1.35vw,19px);line-height:2.05;color:var(--text)}
.about__bts{margin-block-start:clamp(30px,4vw,52px);padding-block-start:clamp(24px,3vw,34px);
  border-block-start:1px solid var(--hair-2)}
.about__bts b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;
  color:var(--mint);margin-block-end:10px}
.about__bts p{font-size:15.5px;line-height:2;color:var(--dim)}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:26px}
}


/* ---------- 19. زر واتساب العائم ---------- */
.wa{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:130;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#062b14;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 38px rgba(37,211,102,.35)}
.wa svg{width:30px;height:30px}
@media (max-width:620px){.wa{width:52px;height:52px;inset-block-end:16px;inset-inline-end:16px}.wa svg{width:27px;height:27px}}

/* ---------- 20. الصفحات الداخلية ---------- */
.page{position:relative;overflow:hidden;padding-block:clamp(120px,14vw,190px) clamp(40px,5vw,66px)}
.page .frame__bed{background:
  radial-gradient(58% 62% at 78% 6%,rgba(0,63,145,.46),transparent 68%),
  radial-gradient(42% 46% at 8% 96%,rgba(109,50,109,.26),transparent 72%),var(--void)}
.page__in{position:relative;z-index:2}
.page h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.2vw,62px);
  line-height:1.2;max-width:16ch;margin-block-start:14px}
.page__lead{margin-block-start:clamp(18px,2.4vw,28px);font-size:clamp(16px,1.4vw,19px);
  line-height:2;color:var(--text);max-width:58ch}

.crumbs{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--dim-2);flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{opacity:.5}

/* شبكة الأعمال في صفحة الأعمال */
.grid-works{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-block-start:clamp(30px,4vw,50px)}
.filters{display:flex;flex-wrap:wrap;gap:22px;margin-block-start:clamp(24px,3vw,38px)}
.filters a{font-size:14px;color:var(--dim);min-height:44px;display:inline-flex;align-items:center;
  border-block-end:1px solid transparent;padding-block-end:4px;transition:color .3s var(--ease)}
.filters a:hover{color:var(--text)}
.filters a[aria-current="true"]{color:var(--white);font-weight:600;border-block-end-color:var(--sky)}

/* بطاقة خدمة موسّعة */
.svc-card{border-block-start:1px solid var(--hair-2);padding-block:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start}
.svc-card:last-of-type{border-block-end:1px solid var(--hair-2)}
.svc-card__n{font-family:var(--mono,var(--body));font-size:13px;color:var(--sky);letter-spacing:.1em}
.svc-card h2{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.4vw,34px);line-height:1.3}
.svc-card__d{display:block;margin-block-start:10px;font-size:15px;color:var(--sky)}
.svc-card p{margin-block-start:18px;font-size:15.5px;line-height:2.05;color:var(--dim);max-width:70ch}
.svc-card__cta{margin-block-start:20px}

/* المدونة */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);
  margin-block-start:clamp(30px,4vw,50px)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--hair-2);
  transition:border-color .4s var(--ease),transform .5s var(--ease-out)}
.post-card:hover{border-color:rgba(93,169,233,.5);transform:translateY(-4px)}
.post-card__img{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--panel),#000)}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h2{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.45}
.post-card p{font-size:14.5px;line-height:1.9;color:var(--dim)}
.post-card time{font-size:12.5px;color:var(--dim-2);margin-block-start:auto}

.article{position:relative;padding-block:clamp(30px,4vw,56px) clamp(60px,8vw,110px)}
.article__cover{width:100%;aspect-ratio:16/8;object-fit:cover;margin-block-end:clamp(28px,3.6vw,48px)}
.article__body{max-width:72ch;font-size:17px;line-height:2.1;color:var(--text)}
.article__body p{margin-block-end:1.4em}
.article__body h2{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.2vw,30px);
  margin-block:1.8em .7em;line-height:1.35}
.article__body h3{font-family:var(--disp);font-weight:700;font-size:20px;margin-block:1.5em .6em}
.article__body ul{list-style:disc;padding-inline-start:1.4em;margin-block-end:1.4em}
.article__body li{margin-block-end:.5em}
.article__body a{color:var(--sky);border-block-end:1px solid currentColor}

.empty-note{padding-block:clamp(40px,6vw,80px);color:var(--dim);font-size:16px;line-height:2}

@media (max-width:900px){
  .posts{grid-template-columns:1fr 1fr}
  .svc-card{grid-template-columns:1fr;gap:12px}
  .grid-works{grid-template-columns:1fr}
}
@media (max-width:600px){
  .posts{grid-template-columns:1fr}
}


/* ---------- 21. الأسئلة الشائعة ---------- */
.faq h2{font-family:var(--disp);font-weight:800;font-size:clamp(23px,2.8vw,40px);
  line-height:1.25;max-width:20ch;margin-block-end:clamp(26px,3.4vw,44px)}
.faq__item{border-block-start:1px solid var(--hair-2)}
.faq__item:last-of-type{border-block-end:1px solid var(--hair-2)}
.faq__item summary{list-style:none;cursor:pointer;padding-block:clamp(18px,2.2vw,26px);
  font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.5vw,21px);line-height:1.5;
  display:flex;align-items:center;gap:16px;transition:color .3s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";margin-inline-start:auto;font-weight:400;
  font-size:24px;color:var(--sky);transition:transform .3s var(--ease);flex:none}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--sky)}
.faq__item p{padding-block-end:clamp(20px,2.4vw,30px);font-size:15.5px;line-height:2.05;
  color:var(--dim);max-width:74ch}

/* ---------- 22. صفحة العمل التفصيلية ---------- */
.case__meta{display:flex;flex-wrap:wrap;gap:12px 34px;margin-block-start:clamp(20px,2.6vw,32px);
  font-size:14.5px;color:var(--dim)}
.case__meta b{color:var(--dim-2);font-weight:400;margin-inline-end:8px}
.case__stage{position:relative;background:var(--near)}
.case__player{display:block;width:100%;position:relative;padding:0;border:0;cursor:pointer;
  aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,var(--panel),#000)}
.case__player img,.case__cover{width:100%;height:100%;object-fit:cover;display:block}
.case__cover{aspect-ratio:16/9}
.case__player::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);
  transition:background .4s var(--ease)}
.case__player:hover::after{background:rgba(0,0,0,.12)}
.case__play{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);width:88px;height:88px;z-index:2}
[dir="ltr"] .case__play{transform:translate(-50%,-50%)}
.case__play svg{width:26px;height:26px}
.case__body{padding-block:clamp(44px,6vw,84px)}
.case__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.case__lead{font-size:clamp(17px,1.7vw,23px);line-height:1.9;color:var(--text)}
.case__block{margin-block-end:clamp(24px,3vw,36px)}
.case__block b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;
  color:var(--sky);margin-block-end:10px}
.case__block p{font-size:15.5px;line-height:2.05;color:var(--dim)}
.case__gallery{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.case__gallery img{width:100%;height:clamp(240px,32vw,460px);object-fit:cover;display:block}

/* ---------- 23. شعارات وشهادات العملاء ---------- */
.proof{padding-block:clamp(46px,6vw,80px)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4.4vw,64px);
  margin-block-start:clamp(22px,2.8vw,36px)}
.logos img{height:clamp(30px,3.4vw,46px);width:auto;object-fit:contain;
  opacity:.62;filter:grayscale(1);transition:opacity .4s var(--ease),filter .4s var(--ease)}
.logos a:hover img,.logos img:hover{opacity:1;filter:none}
.logos__name{font-family:var(--disp);font-weight:700;font-size:clamp(16px,1.7vw,22px);color:#3A4654}

.quotes{padding-block:clamp(46px,6vw,90px)}
.quotes h2{font-family:var(--disp);font-weight:800;font-size:clamp(23px,3vw,42px);
  max-width:18ch;margin-block-end:clamp(26px,3.4vw,44px)}
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
.quote{margin:0;border:1px solid var(--hair-2);padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .4s var(--ease)}
.quote:hover{border-color:rgba(93,169,233,.45)}
.quote__stars{color:var(--sky);letter-spacing:.18em;font-size:14px}
.quote blockquote{margin:0;font-size:15.5px;line-height:2;color:var(--text)}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-block-start:auto;
  padding-block-start:16px;border-block-start:1px solid var(--hair-2)}
.quote figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.quote figcaption b{display:block;font-size:14.5px}
.quote figcaption .tone{display:block;font-size:12.5px}

@media (max-width:1000px){
  .case__cols{grid-template-columns:1fr;gap:22px}
  .quotes__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .case__gallery{grid-template-columns:1fr}
  .quotes__grid{grid-template-columns:1fr}
  .case__play{width:66px;height:66px}
}

/* ---------- الهوية السينمائية المعتمدة ---------- */
.cinematic-hero{position:relative;isolation:isolate;min-height:100svh;background:#050505}
.cinematic-hero__media{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;pointer-events:none}
.cinematic-hero__media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.08);transform:scale(1.015)}
.cinematic-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.84) 82%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.12) 65%,rgba(0,0,0,.45) 100%)}
[dir="ltr"] .cinematic-hero::before{background:linear-gradient(-90deg,rgba(0,0,0,.2),rgba(0,0,0,.84) 82%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.12) 65%,rgba(0,0,0,.45) 100%)}
.cinematic-hero .frame__bed{z-index:1;background:radial-gradient(60% 75% at 72% 46%,rgba(216,173,105,.08),transparent 72%)}
.cinematic-hero .frame__grid{z-index:2}
.cinematic-hero>.hold{position:relative;z-index:3;width:100%}
.cinematic-hero h1{font-size:clamp(38px,6.2vw,94px);line-height:1.08;letter-spacing:-.045em;text-shadow:0 5px 35px rgba(0,0,0,.55)}
.cinematic-hero h1 span{color:#f3efe8;font-weight:300}
.cinematic-hero .act:not(.act--ghost){background:var(--sky);border-color:var(--sky);color:#100c07}
.bts-film{display:grid;grid-template-columns:1.25fr .75fr;gap:6px;margin-block-start:clamp(28px,4vw,56px)}.bts-film figure{margin:0;overflow:hidden;min-height:180px}.bts-film figure:first-child{grid-row:span 2}.bts-film img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .8s var(--ease-out),filter .5s var(--ease)}.bts-film figure:hover img{transform:scale(1.035);filter:saturate(1)}.svc{grid-template-columns:auto minmax(0,.75fr) minmax(0,1fr) minmax(180px,.65fr)}.svc__media{width:100%;height:clamp(120px,13vw,190px);object-fit:cover;border-radius:2px;filter:saturate(.75);transition:filter .4s var(--ease),transform .6s var(--ease-out)}.svc:hover .svc__media{filter:saturate(1);transform:scale(1.015)}
@media (max-width:860px){.sheet .lang{display:flex}.cinematic-hero{min-height:100svh;padding-block:132px 36px}.cinematic-hero__media img{object-position:58% center}.cinematic-hero::before{background:linear-gradient(0deg,#000 2%,rgba(0,0,0,.45) 68%,rgba(0,0,0,.62))}.svc{grid-template-columns:auto 1fr}.svc__s,.svc__media{grid-column:2}.svc__media{height:220px}.bts-film{grid-template-columns:1fr 1fr}.bts-film figure:first-child{grid-column:1/-1;grid-row:auto;min-height:280px}}
@media (max-width:560px){.cinematic-hero h1{font-size:clamp(38px,12vw,58px)}.bts-film{grid-template-columns:1fr}.bts-film figure,.bts-film figure:first-child{grid-column:auto;min-height:220px}.svc__media{height:180px}}
@media (prefers-reduced-motion:reduce){.cinematic-hero__media img,.bts-film img,.about__media img,.svc__media{transform:none!important}}

/* ==========================================================================
   المقال: تنسيق مخرجات المحرّر الغني + كتل محرّكات الإجابة
   (صندوق الخلاصة، أهم النقاط، جدول المحتويات، الأسئلة، المصادر)
   ========================================================================== */

.article__meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-block-start:18px;color:var(--dim);font-size:14px}
.article__meta > *:not(:last-child)::after{content:"·";margin-inline-start:20px;color:var(--hair)}

.article__body h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.35;margin-block:1.8em .6em;color:var(--white);scroll-margin-block-start:100px}
.article__body h3{scroll-margin-block-start:100px}
.article__body h4{font-family:var(--disp);font-weight:700;font-size:17px;margin-block:1.4em .5em;color:var(--white);scroll-margin-block-start:100px}
.article__body ol{list-style:decimal;padding-inline-start:1.5em;margin-block-end:1.4em}
.article__body strong{color:var(--white);font-weight:700}
.article__body mark{background:rgba(216,173,105,.25);color:var(--white);padding:0 .2em}
.article__body blockquote{margin:2em 0;padding:.2em 1.4em;border-inline-start:2px solid var(--sky);color:var(--white);font-family:var(--disp);font-size:19px;line-height:1.8}
.article__body pre{margin-block-end:1.6em;padding:20px;border:1px solid var(--hair);border-radius:10px;background:var(--panel);overflow-x:auto;direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.8}
.article__body :not(pre) > code{background:var(--panel);border:1px solid var(--hair-2);border-radius:5px;padding:.1em .4em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;direction:ltr;unicode-bidi:embed}
.article__body figure{margin:2.2em 0}
.article__body img{width:100%;height:auto;border-radius:6px}
.article__body figcaption{margin-block-start:12px;color:var(--dim);font-size:14px;text-align:center}
.article__body hr{border:0;border-block-start:1px solid var(--hair);margin:2.6em 0}
.article__body table{width:100%;border-collapse:collapse;margin-block-end:1.8em;font-size:15px}
.article__body th,.article__body td{border:1px solid var(--hair);padding:12px 14px;text-align:start}
.article__body th{background:var(--panel);color:var(--white);font-weight:600}
.article__body .table-wrap{overflow-x:auto}

.answer-box{max-width:72ch;margin-block-end:clamp(28px,3vw,40px);padding:clamp(20px,2.4vw,28px);border:1px solid var(--hair);border-inline-start:2px solid var(--sky);border-radius:6px;background:var(--panel)}
.answer-box__label{display:block;margin-block-end:10px;color:var(--sky);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.answer-box p{color:var(--white);font-size:17px;line-height:1.95}

.takeaways{max-width:72ch;margin-block-end:clamp(28px,3vw,40px)}
.takeaways h2{font-family:var(--disp);font-size:18px;margin-block-end:14px;color:var(--white)}
.takeaways ul{display:grid;gap:10px;list-style:none;padding:0}
.takeaways li{position:relative;padding-inline-start:26px;color:var(--text);line-height:1.9}
.takeaways li::before{content:"";position:absolute;inset-inline-start:6px;inset-block-start:13px;width:6px;height:6px;border-radius:50%;background:var(--sky)}

.toc{max-width:72ch;margin-block-end:clamp(30px,3.4vw,44px);padding:clamp(18px,2vw,24px);border:1px solid var(--hair);border-radius:6px}
.toc strong{display:block;margin-block-end:12px;font-family:var(--disp);font-size:14px;letter-spacing:.02em}
.toc ol{list-style:none;display:grid;gap:8px;padding:0;counter-reset:toc}
.toc li{counter-increment:toc}
.toc li::before{content:counter(toc) ".";margin-inline-end:8px;color:var(--dim-2);font-size:13px}
.toc__l3{padding-inline-start:18px}
.toc__l4{padding-inline-start:34px}
.toc a{color:var(--text);font-size:15px;border-block-end:1px solid transparent}
.toc a:hover{color:var(--white);border-color:currentColor}

.faq{max-width:72ch;margin-block-start:clamp(44px,5vw,70px)}
.faq h2{font-family:var(--disp);font-size:clamp(20px,2.2vw,26px);margin-block-end:18px}
.faq details{border-block-end:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;color:var(--white);font-size:16px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sky);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding-block-end:20px;color:var(--text);line-height:2}

.sources{max-width:72ch;margin-block-start:clamp(40px,4.4vw,60px);padding-block-start:26px;border-block-start:1px solid var(--hair)}
.sources h2{font-family:var(--disp);font-size:16px;margin-block-end:14px}
.sources ol{list-style:decimal;padding-inline-start:1.4em;display:grid;gap:8px}
.sources li{color:var(--dim)}
.sources a{color:var(--text);font-size:14px;border-block-end:1px solid var(--hair)}
.sources a:hover{color:var(--white)}