/* ==========================================================================
   أفق التقنية — مكوّنات الموقع v2 (داكن متوهّج)
   ========================================================================== */

/* ---------- الرأس: شريط كبسولي عائم ---------- */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  padding-block:16px;transition:padding .35s var(--ease),background .35s var(--ease)}
.site-header.is-stuck{padding-block:9px;background:rgba(6,12,24,.72);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--hair)}
.site-header .container{display:flex;align-items:center;gap:18px}
.brand img{height:40px;width:auto}
.nav-pill{margin-inline:auto;display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.055);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:6px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-pill a{font-size:14.5px;font-weight:700;color:var(--fg-2);padding:10px 17px;white-space:nowrap;
  border-radius:var(--r-pill);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav-pill a:hover{color:var(--fg-1)}
.nav-pill a.is-active{color:var(--fg-1);background:rgba(255,255,255,.1)}
.header-actions{display:flex;align-items:center;gap:10px}
.lang-toggle{font-size:13.5px;font-weight:700;color:var(--fg-2);border:1px solid var(--hair);
  padding:9px 14px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease)}
.lang-toggle:hover{color:var(--fg-1);border-color:var(--hair-2)}
.nav-toggle{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--hair);
  background:var(--glass);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--fg-1);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1140px){
  .nav-pill{position:fixed;inset:84px 16px auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(10,20,36,.97);backdrop-filter:blur(20px);padding:14px;border-radius:var(--r);
    max-height:calc(100dvh - 110px);overflow-y:auto;
    transform:translateY(-10px);opacity:0;visibility:hidden;transition:all .28s var(--ease)}
  .nav-pill.is-open{transform:none;opacity:1;visibility:visible}
  .nav-pill a{padding:14px 16px;font-size:16px;border-radius:var(--r-sm)}
  .nav-toggle{display:flex}
  .header-actions .btn{display:none}
}

/* ---------- الواجهة: تكوين متمركز وشعاع ضوئي ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,#0C1B30 0%,#060C18 72%);
  padding-block:clamp(130px,16vw,190px) clamp(60px,7vw,90px);text-align:center}
.hero-beam{position:absolute;inset-block:0;inset-inline-start:50%;width:min(680px,92vw);
  transform:translateX(50%);pointer-events:none;z-index:0;
  background:
    radial-gradient(50% 58% at 50% 32%, rgba(64,186,236,.34) 0%, transparent 68%),
    radial-gradient(34% 46% at 50% 22%, rgba(47,191,160,.3) 0%, transparent 70%),
    radial-gradient(26% 36% at 50% 50%, rgba(242,177,0,.18) 0%, transparent 72%)}
.hero-beam::after{content:"";position:absolute;inset-block:0 34%;inset-inline-start:50%;width:1.5px;
  transform:translateX(50%);
  background:linear-gradient(180deg,transparent 6%,rgba(214,244,255,.8) 26%,rgba(150,226,255,.42) 48%,transparent 66%);
  box-shadow:0 0 90px 30px rgba(80,180,240,.42),0 0 220px 80px rgba(47,191,160,.18);
  animation:beam 7s var(--ease) infinite}
@keyframes beam{0%,100%{opacity:.6;transform:translateX(50%) scaleY(.94)}50%{opacity:1;transform:translateX(50%) scaleY(1)}}
.hero .container{position:relative;z-index:2}
.hero h1{margin-top:26px;max-width:16ch;margin-inline:auto}
.hero h1 .accent{background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{margin:22px auto 0;max-width:62ch;color:var(--fg-2);font-size:16.5px;line-height:2.05}
.hero-lead b{color:var(--fg-1);font-weight:700}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}

/* شريط الأجهزة أسفل الواجهة */
.hero-rail{position:relative;z-index:2;margin-top:clamp(52px,6vw,78px);
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,1.6vw,22px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hero-rail .dev{width:clamp(108px,12vw,168px);aspect-ratio:9/19.3;border-radius:22px;
  background:#090C14;padding:5px;border:1px solid var(--hair-2);flex:0 0 auto;
  transition:transform var(--dur-slow) var(--ease)}
.hero-rail .dev img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:18px}
.hero-rail .dev:nth-child(odd){transform:translateY(22px)}
.hero-rail .dev:hover{transform:translateY(-6px)}
@media (max-width:640px){.hero-rail .dev:nth-child(n+4){display:none}}

/* ---------- الأرقام ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  backdrop-filter:blur(14px)}
.stat{padding:clamp(26px,3vw,40px);border-inline-start:1px solid var(--hair);position:relative}
.stat:first-child{border-inline-start:0}
.stat b{display:block;font-size:clamp(34px,4vw,50px);font-weight:800;line-height:1;
  letter-spacing:-.04em;
  /* رقم لاتيني صرف داخل صفحة rtl: بلا هذين السطرين تقع علامة
     الزائد يمينا فتقرأ «150+». مقيس على /about.html. ولا يوضع
     هذا على سعر فيه كلمة «ريال» فيعكس قراءته. */
  direction:ltr;unicode-bidi:isolate;
  background:linear-gradient(135deg,#fff 0%,var(--gold-2) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;color:var(--fg-1);font-size:15px;font-weight:700;line-height:1.6}
.stat small{display:block;margin-top:5px;color:var(--fg-3);font-size:13px;line-height:1.7}
@media (max-width:880px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .stat{border-inline-start:0}.stat+.stat{border-top:1px solid var(--hair)}
}

/* ---------- الخدمات ---------- */
.svc{display:flex;flex-direction:column;padding:clamp(26px,2.8vw,34px);height:100%}
.svc h3{margin-top:22px}
.svc p{margin-top:12px;color:var(--fg-2);font-size:15px;line-height:1.95;flex:1}
.svc .link-arrow{margin-top:24px}

/* ---------- الأعمال ---------- */
.work-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.work-filters button{font-size:14.5px;font-weight:700;padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid var(--hair);color:var(--fg-2);background:var(--glass);
  transition:all var(--dur) var(--ease)}
.work-filters button:hover{color:var(--fg-1);border-color:var(--hair-2)}
.work-filters button[aria-selected="true"]{background:linear-gradient(135deg,var(--gold),#FFC637);
  border-color:transparent;color:#10233C}

.work{display:block;position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:var(--glass);border:1px solid var(--hair);
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.work::before{content:"";position:absolute;inset:-1px;z-index:-1;opacity:0;
  background:radial-gradient(70% 60% at 50% 0%,rgba(47,191,160,.34),transparent 72%);
  transition:opacity var(--dur-slow) var(--ease)}
.work:hover{transform:translateY(-6px);border-color:var(--hair-2)}
.work:hover::before{opacity:1}
.work-media,.work-body{display:block}
.work-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-0)}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover .work-media img{transform:scale(1.05)}
.work-badge{position:absolute;inset-block-start:14px;inset-inline-start:14px;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--fg-1);background:rgba(6,12,24,.72);
  backdrop-filter:blur(8px);border:1px solid var(--hair);padding:6px 14px;border-radius:var(--r-pill)}
.work-body{padding:22px 24px 26px}
.work-body h3{font-size:20px}
.work-kind{display:block;margin-top:4px;color:var(--gold-2);font-size:13.5px;font-weight:700}
.work-body p{margin-top:11px;color:var(--fg-2);font-size:14.5px;line-height:1.9;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* الشبكة تصير عمودا واحدا تحت 640، وعندها اختلاف ارتفاع البطاقات
   لا يضر. حد السطرين كان يقص السطر الثالث كاملا في الوصف
   الإنجليزي (83 بكسل محتوى داخل 55). مقيس على /en و/en/works
   عند 360: ثلاث بطاقات يضيع آخر سطر فيها. */
@media (max-width:640px){
  .work-body p{display:block;-webkit-line-clamp:none;overflow:visible}
}

/* ---------- مراحل العمل ---------- */
.steps{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(3,1fr);position:relative}
.steps::before{content:"";position:absolute;inset-inline:60px;top:35px;height:1px;z-index:0;display:none;
  background:linear-gradient(90deg,transparent,var(--hair-2),var(--hair-gold),var(--hair-2),transparent)}
.step{position:relative;z-index:1}
.step::before{content:"";position:absolute;inset-inline-start:-13%;top:35px;width:13%;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-gold),transparent)}
@media (max-width:1000px){.step::before{display:none}}
.step-num{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-1);border:1px solid var(--hair);font-size:19px;font-weight:800;
  color:var(--gold-2);letter-spacing:-.02em;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.step:hover .step-num{border-color:var(--hair-gold);box-shadow:0 0 0 6px rgba(242,177,0,.07),0 0 34px -6px rgba(242,177,0,.45)}
.step h3{margin-top:22px}
.step p{margin-top:9px;color:var(--fg-2);font-size:14.5px;line-height:1.95}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}}
@media (max-width:580px){.steps{grid-template-columns:1fr}}

/* ---------- لماذا نحن ---------- */
.why{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,74px);align-items:start}
@media (max-width:1000px){.why{grid-template-columns:1fr}}
.why-item{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--hair)}
.why-item:first-child{border-top:0;padding-top:0}
.why-item h3{font-size:18px}
.why-item p{margin-top:7px;color:var(--fg-2);font-size:14.5px;line-height:1.9}

/* ---------- التقنيات ---------- */
.tech-label{text-align:center;color:var(--fg-2);font-size:15px;font-weight:700;letter-spacing:0;
  margin:clamp(30px,3vw,44px) 0 20px}
.tech-label:first-of-type{margin-top:0}
.logo-strip{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.logo-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.logo-strip{grid-template-columns:repeat(2,1fr)}}
.logo-chip{display:grid;place-items:center;height:96px;padding:18px;border-radius:var(--r);
  background:#fff;border:1px solid var(--hair);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.logo-chip:hover{transform:translateY(-3px)}
.logo-chip img{max-height:34px;max-width:128px;width:auto;object-fit:contain;
  opacity:.9;transition:opacity var(--dur) var(--ease)}
.logo-chip:hover img{opacity:1}
.tech-disclaimer{margin-top:30px;text-align:center;color:var(--fg-3);font-size:13px;
  max-width:72ch;margin-inline:auto;line-height:1.85}

/* ---------- الأسئلة الشائعة ---------- */
.faq{max-width:880px;margin-inline:auto;display:grid;gap:12px}
.faq details{border:1px solid var(--hair);border-radius:var(--r);background:var(--glass);
  overflow:hidden;transition:border-color var(--dur) var(--ease)}
.faq details[open]{border-color:var(--hair-gold)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:700;color:var(--fg-1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:0 0 11px;margin-block-start:-5px;
  border-right:2px solid var(--gold-2);border-bottom:2px solid var(--gold-2);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-block-start:4px}
.faq-body{padding:0 26px 24px;color:var(--fg-2);font-size:15px;line-height:2;max-width:68ch}

/* ---------- نداء التواصل ---------- */
.cta-panel{position:relative;overflow:hidden;border-radius:var(--r-lg);text-align:center;
  padding:clamp(44px,6vw,80px) clamp(24px,4vw,56px);
  background:linear-gradient(145deg,rgba(242,177,0,.1),rgba(47,191,160,.07) 55%,transparent);
  border:1px solid var(--hair)}
.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%,rgba(242,177,0,.2),transparent 68%)}
.cta-panel>*{position:relative}
.cta-panel p{margin:18px auto 0;max-width:60ch;color:var(--fg-2);font-size:16px}
.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* ---------- التذييل ---------- */
.site-footer{background:var(--bg-0);border-top:1px solid var(--hair);
  padding-block:clamp(54px,6vw,84px) 0;position:relative;overflow:hidden}
.footer-top{display:grid;gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));position:relative}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.site-footer img.f-logo{height:46px;width:auto}
.site-footer p{margin-top:20px;font-size:14.5px;line-height:1.95;max-width:42ch;color:var(--fg-2)}
.site-footer h4{color:var(--fg-1);margin-bottom:18px}
.site-footer li+li{margin-top:0}
.site-footer li a,.site-footer li{font-size:14.5px;color:var(--fg-2)}
.site-footer li a{display:inline-block;padding-block:12px;min-height:44px}
.site-footer li:not(:has(a)){padding-block:12px}
.site-footer li a:hover{color:var(--gold-2)}
.f-social{display:flex;gap:10px;margin-top:24px}
.f-social a{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--glass);color:var(--fg-2);
  transition:all var(--dur) var(--ease)}
.f-social a:hover{color:var(--gold-2);border-color:var(--hair-gold);background:var(--glass-2)}
.f-social svg{width:17px;height:17px;fill:currentColor}
.footer-bottom{margin-top:clamp(36px,4vw,60px);padding-block:26px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--fg-3)}

/* زر واتساب عائم */
.wa-float{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#1FA855;display:grid;place-items:center;
  box-shadow:0 10px 32px -8px rgba(31,168,85,.75);transition:transform var(--dur) var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:27px;height:27px;fill:#fff}

/* ---------- صفحات داخلية ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--bg-0);text-align:center;
  padding-block:clamp(120px,14vw,170px) clamp(50px,6vw,74px)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{margin-top:22px}
.page-hero h1 .accent{background:linear-gradient(90deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{margin:20px auto 0;max-width:64ch;color:var(--fg-2);font-size:16px}
.avatar{width:84px;height:84px;border-radius:50%;margin-inline:auto;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(242,177,0,.26),rgba(47,191,160,.16));
  border:1px solid var(--hair);font-size:32px;font-weight:800;color:var(--fg-1)}

/* ---------- نموذج عرض السعر ---------- */
.quote-wrap{display:grid;gap:clamp(20px,2.4vw,30px);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
@media (max-width:1000px){.quote-wrap{grid-template-columns:1fr}}
.quote-aside{display:grid;gap:16px}
.quote-form{padding:clamp(26px,3vw,38px);display:grid;gap:20px}
.f-row{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.f-row{grid-template-columns:1fr}}
.field{display:grid;gap:9px}
.field>span{font-size:14.5px;font-weight:700;color:var(--fg-1)}
.field>span i{color:var(--gold);font-style:normal}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--fg-1);background:rgba(255,255,255,.04);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:14px 16px;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field textarea{resize:vertical;min-height:130px;line-height:1.9}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),
  linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(var(--gutter) - 8px) 50%,calc(var(--gutter) - 3px) 50%;
  background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--bg-2);color:var(--fg-1)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--hair-gold);box-shadow:0 0 0 4px rgba(242,177,0,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.form-note{color:var(--fg-3);font-size:13px}
.form-status{font-size:14.5px;min-height:1.4em}
.form-status.err{color:#FF8A80}
.form-status.ok{color:var(--teal-2)}
.num-list{counter-reset:n;margin-top:16px;display:grid;gap:12px}
.num-list li{counter-increment:n;display:flex;gap:13px;color:var(--fg-2);font-size:14.5px;line-height:1.85}
.num-list li::before{content:counter(n);flex:0 0 26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(242,177,0,.14);color:var(--gold-2);
  font-size:13px;font-weight:800;margin-top:4px}

/* ---------- ما يشمله كل مشروع ---------- */
.delivery-chip{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;
  color:var(--gold-2);background:rgba(242,177,0,.1);border:1px solid var(--hair-gold);
  padding:11px 20px;border-radius:var(--r-pill);white-space:nowrap}
.delivery-chip svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.inc-grid{display:grid;gap:4px 34px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.inc-grid{grid-template-columns:1fr}}
/* عشرة بنود في شبكة ثلاثية تترك بندا يتيما في آخر صف فيتوسط */
@media (min-width:1001px){.inc-grid>:last-child:nth-child(3n+1){grid-column:2}}
.inc{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--hair)}
.inc h3{font-size:17px}
.inc p{margin-top:6px;color:var(--fg-2);font-size:14px;line-height:1.85}
.inc-check{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,191,160,.16);border:1px solid rgba(47,191,160,.34);margin-top:3px}
.inc-check svg{width:16px;height:16px;stroke:var(--teal-2);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- بطاقات الدفع والتقسيط ---------- */
.pay-grid{display:grid;gap:16px;grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.pay-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.pay-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pay-grid{grid-template-columns:1fr}}
.pay{display:flex;flex-direction:column;gap:14px;
  padding:clamp(22px,2.2vw,28px) clamp(20px,2vw,26px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair);position:relative;isolation:isolate;
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.pay:hover{transform:translateY(-5px);border-color:var(--hair-2)}
.pay-logo{height:62px;display:grid;place-items:center;background:#fff;border-radius:var(--r-sm);
  padding:12px 16px}
.pay-logo img{height:30px;max-width:128px;width:auto;object-fit:contain}
.pay-name{font-size:16.5px;font-weight:800;color:var(--fg-1)}
.pay-desc{color:var(--fg-2);font-size:13.5px;line-height:1.8}
.pay-note{margin-top:28px;text-align:center;color:var(--fg-3);font-size:13px;
  max-width:76ch;margin-inline:auto;line-height:1.85}

/* ---------- شريط الدفع في التذييل ---------- */
.footer-pay{margin-top:clamp(34px,4vw,56px);padding-top:30px;border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-pay-label{font-size:14px;font-weight:700;color:var(--fg-1);white-space:nowrap}
.footer-pay-list{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.footer-pay-list li{display:grid;place-items:center;background:#fff;border-radius:10px;
  height:46px;padding:9px 14px}
.footer-pay-list img{height:24px;max-width:92px;width:auto;object-fit:contain}
.footer-pay-note{font-size:13px;color:var(--fg-3);margin-inline-start:auto}
@media (max-width:760px){.footer-pay-note{margin-inline-start:0;flex-basis:100%}}

/* ---------- لوح السنة الثانية ---------- */
.renewal{margin-top:clamp(34px,4vw,52px);padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(242,177,0,.1),rgba(47,191,160,.06) 60%,transparent);
  border:1px solid var(--hair-gold)}
.renewal h3{font-size:clamp(20px,2.2vw,26px)}
.renewal h3 .accent{background:linear-gradient(90deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.renewal-list{display:grid;gap:18px 32px;grid-template-columns:repeat(2,1fr);margin-top:24px}
@media (max-width:820px){.renewal-list{grid-template-columns:1fr}}
.renewal-list dt{font-size:14px;font-weight:700;color:var(--gold-2);margin-bottom:5px}
.renewal-list dd{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.9}

/* عناوين أعمدة التذييل: مستوى h2 دلالياً وحجم h4 بصرياً */
.site-footer .f-h{font-size:17px;font-weight:800;color:var(--fg-1);
  letter-spacing:-.01em;margin-bottom:18px}

/* ==========================================================================
   المشاريع الجاهزة والباقات
   لغة بصرية مأخوذة من إعلانات الشركة: لوح سعر أبيض على كحلي
   وبطاقات مزايا بعلامة صح تركوازية.
   ========================================================================== */

/* فتات المسار */
.crumbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:center;
  font-size:13.5px;color:var(--fg-3);margin-bottom:20px}
.crumbs a{color:var(--fg-2)}
.crumbs a:hover{color:var(--gold-2)}
.crumbs li{display:flex;gap:9px;align-items:center}
.crumbs li+li::before{content:"/";color:var(--fg-3);opacity:.6}
.crumbs [aria-current]{color:var(--fg-1);font-weight:700}

/* شارة العرض */
.offer-chip{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
  color:var(--teal-2);background:rgba(47,191,160,.1);border:1px solid rgba(47,191,160,.38);
  padding:9px 20px;border-radius:var(--r-pill)}
.offer-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-2);
  box-shadow:0 0 10px 2px rgba(91,227,198,.65)}

/* ---------- الباقات الثلاث ---------- */
.plans{display:grid;gap:clamp(16px,1.8vw,22px);grid-template-columns:repeat(3,1fr);align-items:start}
/* 900 لا 1040: على 1024 كانت الباقات الثلاث تتكدس رأسيا بعرض 620
   داخل نافذة 1024 فتترك 202 بكسل فراغا وتضيف 1657 بكسل تمريرا. */
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:620px;margin-inline:auto}}
.plan{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--hair);
  position:relative;isolation:isolate;height:100%;
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.plan:hover{transform:translateY(-5px);border-color:var(--hair-2)}
.plan--hot{border-color:var(--hair-gold);background:linear-gradient(165deg,rgba(242,177,0,.09),rgba(47,191,160,.05) 55%,transparent)}
.plan-badge{position:absolute;inset-block-start:-13px;inset-inline-end:26px;
  background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;
  font-size:13px;font-weight:800;padding:6px 18px;border-radius:var(--r-pill)}
.plan-name{font-size:clamp(20px,2vw,24px)}
.plan-for{margin-top:9px;color:var(--fg-2);font-size:14.5px;line-height:1.85;min-height:3.7em}

/* لوح السعر الأبيض كما في إعلانات الشركة */
.plan-price{margin-top:20px;background:#fff;border-radius:var(--r);padding:20px 24px;text-align:center}
.plan-price small{display:block;color:#5B6B80;font-size:13.5px;font-weight:700;line-height:1.7}
.plan-price b{display:block;margin-top:2px;font-size:clamp(40px,4.6vw,56px);font-weight:800;
  line-height:1.15;color:#10233C;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
/* الاتجاه يبقى RTL عمدا: الرقم وحده يُرسم LTR تلقائيا بقواعد bidi،
   فيقع الرقم يمين كلمة «ريال» ويُقرأ «599 ريال». وضع direction:ltr هنا
   كان يعكس الترتيب فيُقرأ «ريال 599». */
.plan-price b i{font-style:normal;font-size:.44em;color:#0E7A64;margin-inline-start:8px;
  letter-spacing:0;font-weight:700}
.plan-price span{display:block;margin-top:4px;color:#5B6B80;font-size:13px;line-height:1.7}

.plan-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.plan-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--fg-2);background:var(--glass);border:1px solid var(--hair);
  padding:8px 14px;border-radius:var(--r-pill)}
.plan-meta svg{width:15px;height:15px;stroke:var(--gold-2);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.plan-list{margin-top:20px;display:grid;gap:12px;flex:1}
.plan-list li{display:flex;gap:11px;color:var(--fg-2);font-size:14.5px;line-height:1.75;
  align-items:flex-start}
.plan-list li::before{content:"";flex:0 0 19px;width:19px;height:19px;margin-top:4px;border-radius:50%;
  background:rgba(47,191,160,.18) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235BE3C6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4'/%3E%3C/svg%3E") center/11px no-repeat;
  border:1px solid rgba(47,191,160,.3)}
.plan .btn{margin-top:24px;width:100%}

/* ---------- جدول المقارنة ---------- */
/* الجدول يُمرَّر أفقياً على الشاشات الضيّقة فيحتاج تلميحاً مرئياً */
.cmp-hint{display:none}
@media (max-width:760px){
  .cmp-hint{display:block;margin-bottom:12px;text-align:center;color:var(--fg-3);font-size:13px}
}
.cmp-wrap{position:relative;overflow-x:auto;border:1px solid var(--hair);
  border-radius:var(--r-lg);background:var(--glass)}
/* الحاوية موضَّعة عمداً: نص قارئ الشاشة داخلها مطلق التموضع
   وبدون ذلك يخرج من حاوية التمرير ويوسّع الصفحة 132 بكسل على الجوال. */
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--hair)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp th:first-child,.cmp td:first-child{text-align:start;color:var(--fg-1);font-weight:700;width:38%}
.cmp thead th{color:var(--fg-1);font-weight:800;font-size:15px;background:rgba(255,255,255,.04)}
.cmp thead th small{display:block;margin-top:3px;color:var(--gold-2);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.cmp thead th.is-hot{background:rgba(242,177,0,.1)}
.cmp td{color:var(--fg-2)}
.cmp .yes,.cmp .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%}
.cmp .yes{background:rgba(47,191,160,.16);border:1px solid rgba(47,191,160,.32)}
.cmp .no{background:rgba(255,255,255,.04);border:1px solid var(--hair)}
.cmp .yes svg{width:13px;height:13px;stroke:var(--teal-2);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.cmp .no span{width:9px;height:1.6px;background:var(--fg-3);border-radius:2px}

/* ---------- بطاقات المشاريع الجاهزة ---------- */
.ready-grid{display:grid;gap:clamp(16px,1.8vw,22px);grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.ready-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ready-grid{grid-template-columns:1fr}}
/* البطاقة اليتيمة في آخر صف تتوسّط بدل أن تترك فراغاً */
@media (min-width:1001px){.ready-grid>:last-child:nth-child(3n+1){grid-column:2}}
.ready-card{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);height:100%;
  border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--hair);
  position:relative;isolation:isolate;
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease),
             background var(--dur) var(--ease)}
.ready-card::before{content:"";position:absolute;inset:-1px;z-index:-1;opacity:0;border-radius:inherit;
  background:radial-gradient(80% 70% at 50% 0%,rgba(242,177,0,.22),transparent 70%);
  transition:opacity var(--dur-slow) var(--ease)}
.ready-card:hover{transform:translateY(-6px);border-color:var(--hair-2);background:var(--glass-2)}
.ready-card:hover::before{opacity:1}
.ready-card h3{margin-top:20px;font-size:19.5px}
.ready-card .r-tag{display:block;margin-top:7px;color:var(--gold-2);font-size:13.5px;font-weight:700;
  line-height:1.7}
.ready-card p{margin-top:12px;color:var(--fg-2);font-size:14.5px;line-height:1.9;flex:1}
.r-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.r-price{font-size:14px;color:var(--fg-3);line-height:1.5}
.r-price b{display:block;color:var(--fg-1);font-size:21px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.r-price b i{font-style:normal;font-size:.62em;color:var(--gold-2);margin-inline-start:5px}

/* ---------- مزايا المشروع ---------- */
.feat-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.feat-grid{grid-template-columns:1fr}}
.feat{display:flex;gap:14px;align-items:flex-start;
  padding:clamp(16px,1.6vw,20px) clamp(16px,1.8vw,22px);border-radius:var(--r);
  background:var(--glass);border:1px solid var(--hair);color:var(--fg-1);
  font-size:15px;font-weight:700;line-height:1.75}
.feat-check{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,191,160,.16);border:1px solid rgba(47,191,160,.34);margin-top:2px}
.feat-check svg{width:14px;height:14px;stroke:var(--teal-2);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- نموذج منفذ ---------- */
.model{display:grid;gap:clamp(20px,2.6vw,38px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair)}
@media (max-width:860px){.model{grid-template-columns:1fr}}
.model-img{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--bg-0)}
.model-img img{width:100%;height:100%;object-fit:cover}
.model h3{margin-top:14px}
.model p{margin-top:12px;color:var(--fg-2);font-size:15px;line-height:1.95}
.model .link-arrow{margin-top:20px}

/* ---------- ملاحظة أسفل رأس القسم ---------- */
.sec-note{margin-top:14px;color:var(--fg-3);font-size:14.5px;line-height:1.9}

/* ==========================================================================
   غلاف بطاقة المشروع الجاهز ولوحات السعر المدمجة
   ========================================================================== */

/* البطاقة صارت بصورة غلاف. العناصر span فلا بد من display:block صراحة
   وإلا حُسبت inline فأُهمل aspect-ratio وقُصّ المتن. */
.ready-card{padding:0;overflow:hidden}
.rc-media,.rc-body{display:block}
.rc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-0)}
.rc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ready-card:hover .rc-media img{transform:scale(1.05)}
.rc-media::after{content:"";position:absolute;inset:auto 0 0;height:58%;pointer-events:none;
  background:linear-gradient(to top,var(--bg-1) 2%,rgba(10,20,36,.55) 48%,transparent)}
.rc-media--plain{display:grid;place-items:center;
  background:radial-gradient(70% 90% at 50% 10%,rgba(47,191,160,.18),transparent 70%),var(--bg-0)}
.rc-media--plain .ico-box{width:72px;height:72px;flex:0 0 72px;border-radius:22px}
.rc-media--plain .ico-box svg{width:32px;height:32px}
.rc-media--plain{flex-direction:column;gap:0;align-content:center;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px),
                   radial-gradient(70% 90% at 50% 10%,rgba(47,191,160,.18),transparent 70%);
  background-size:44px 44px,44px 44px,100% 100%;background-color:var(--bg-0)}
.rc-plain-name{display:block;margin-top:16px;color:var(--fg-1);font-size:17px;font-weight:800;
  letter-spacing:-.02em;text-align:center;padding-inline:20px}
.rc-chip{position:absolute;z-index:1;inset-block-start:14px;inset-inline-end:14px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--fg-1);
  background:rgba(6,12,24,.72);backdrop-filter:blur(10px);
  border:1px solid var(--hair-2);padding:7px 14px;border-radius:var(--r-pill)}
.rc-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-2)}
.rc-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.rc-body h3{font-size:19.5px}
.rc-tag{display:block;margin-top:7px;color:var(--gold-2);font-size:13.5px;font-weight:700;line-height:1.7}
.rc-body p{margin-top:12px;color:var(--fg-2);font-size:14.5px;line-height:1.9;flex:1}
.rc-price{display:block;margin-top:20px;color:var(--fg-3);font-size:13.5px;line-height:1.5}
.rc-price b{color:var(--fg-1);font-size:21px;font-weight:800;display:inline-block;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-inline-start:7px}
.rc-price b i{font-style:normal;font-size:.62em;color:var(--gold-2);margin-inline-start:5px;
  letter-spacing:0}
.rc-cta{display:block;margin-top:16px;text-align:center;font-size:15px;font-weight:700;
  color:var(--fg-1);background:var(--glass);border:1px solid var(--hair-2);
  padding:14px 20px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease)}
.ready-card:hover .rc-cta{background:var(--glass-2);border-color:var(--hair-gold);color:var(--gold-2)}

/* ---------- كتلة العرض في صفحة المجال ---------- */
.offer2{display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:start}
@media (max-width:980px){.offer2{grid-template-columns:1fr}}
.offer2 h2 .accent{background:linear-gradient(90deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.offer2-lead{margin-top:16px;color:var(--fg-2);font-size:15.5px;line-height:2}
.offer2-h{margin-top:30px;font-size:17px;color:var(--fg-1)}

.tiles{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:26px;align-items:stretch}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
/* .offer2 يصير عمودين فوق 980 فتُحصر .tiles في 508 بكسل وتضيق البلاطة
   إلى 161 بكسل، أضيق مما هي عليه على 768. عمودان في هذا النطاق أنسب. */
@media (min-width:981px) and (max-width:1120px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:561px) and (max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:clamp(16px,1.6vw,20px) clamp(16px,1.8vw,22px);gap:12px;
  border-radius:var(--r);background:var(--glass);
  border:1px solid var(--hair);position:relative;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             background var(--dur) var(--ease)}
.tile:hover{transform:translateY(-3px);background:var(--glass-2);border-color:var(--hair-2)}
.tile small{color:var(--fg-2);font-size:13px;font-weight:700;line-height:1.6}
.tile b{font-size:clamp(25px,2.8vw,32px);font-weight:800;color:var(--fg-1);line-height:1.2;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile b i{font-style:normal;font-size:.46em;color:var(--teal-2);margin-inline-start:6px;
  letter-spacing:0;font-weight:700}
.tile--hot{background:linear-gradient(165deg,rgba(242,177,0,.14),rgba(47,191,160,.05) 60%,transparent);
  border-color:var(--hair-gold);padding-block-start:28px}
/* الشارة تطفو فوق حافة اللوح فيحتاج اللوح حشوة علوية تمنع تغطيتها للعنوان */
.tiles{align-items:stretch}
.tile--hot b{color:var(--gold-2)}
.tile-note{position:absolute;inset-block-start:-11px;inset-inline-start:50%;transform:translateX(-50%);
  white-space:nowrap;background:linear-gradient(135deg,var(--gold),#FFC637);color:#10233C;
  font-size:11.5px;font-weight:800;padding:4px 13px;border-radius:var(--r-pill)}
html[dir="rtl"] .tile-note{transform:translateX(50%)}

.incl-rows{margin-top:16px;display:grid;gap:12px}
.incl-rows li{display:flex;align-items:center;gap:13px;color:var(--fg-1);
  font-size:15px;font-weight:700;line-height:1.7}
.incl-rows svg{width:21px;height:21px;flex:0 0 21px;stroke:var(--teal-2);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pay-strip{display:flex;align-items:center;gap:12px;margin-top:24px;padding:15px 20px;
  border-radius:var(--r);background:var(--glass);border:1px solid var(--hair);
  color:var(--fg-2);font-size:14.5px;line-height:1.7}
.pay-strip svg{width:19px;height:19px;flex:0 0 19px;stroke:var(--gold-2);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.offer2 .btn-wa{margin-top:18px;width:100%}

.offer2-media{display:grid;gap:14px}
.offer2-shot{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair);
  background:var(--bg-0)}
.offer2-shot img{width:100%;height:auto;display:block}
.offer2-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* زر الطلب داخل لوح السعر */
.tile-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:700;color:#fff;background:#16803F;
  padding:9px 20px;border-radius:var(--r-pill);transition:background var(--dur) var(--ease)}
.tile-btn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.tile:hover .tile-btn{background:#18924A}

/* توضيح تحت وصف المجال: المشروع يبنى للعميل لا يسلم قالبا */
.offer2-note{margin-top:12px;color:var(--gold-2);font-size:14.5px;font-weight:700;line-height:1.8}

/* ==========================================================================
   أفق التقنية في أرقام
   ثلاثة أعمدة: النص يمينا والحلقة وسطا والأرقام يسارا في RTL
   ========================================================================== */
.figures{display:grid;gap:clamp(30px,4vw,60px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr) minmax(0,.95fr)}
@media (max-width:1100px){.figures{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.4vw,44px)}
  .fig-intro{grid-column:1/-1}}
@media (max-width:700px){.figures{grid-template-columns:1fr}}

.fig-intro h2{margin-top:22px}
.fig-intro h2 .accent{background:linear-gradient(90deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fig-intro p{margin-top:18px;color:var(--fg-2);font-size:16px;line-height:2;max-width:52ch}
.fig-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* الحلقة */
.fig-ring{position:relative;display:grid;place-items:center;
  width:min(100%,300px);aspect-ratio:1;margin-inline:auto}
.fig-ring::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(242,177,0,.2),rgba(47,191,160,.1) 55%,transparent 72%)}
.fig-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.fig-ring .r-track{fill:none;stroke:var(--hair);stroke-width:5}
.fig-ring .r-arc{fill:none;stroke:url(#ringGrad);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:603;stroke-dashoffset:603;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}
.figures.in .fig-ring .r-arc,.reveal.in .fig-ring .r-arc{stroke-dashoffset:109}
.r-core{position:relative;text-align:center}
.r-core b{display:block;font-size:clamp(58px,7vw,86px);font-weight:800;line-height:1;
  color:var(--fg-1);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.r-core span{display:block;margin-top:10px;color:var(--gold-2);font-size:15px;font-weight:700}
@media (prefers-reduced-motion:reduce){.fig-ring .r-arc{stroke-dashoffset:109;transition:none}}

/* الأرقام حول الحلقة */
.fig-grid{display:grid;gap:clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);
  grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){.fig-grid{grid-template-columns:1fr}}
/* هذه الأرقام لاتينية خالصة بلا حرف عربي، فاللاتيني هنا صحيح ويضع
   علامة + يسار الرقم و % يمينه. لا تنقل هذه القاعدة إلى الأسعار:
   هناك كلمة «ريال» عربية داخل العنصر فينعكس ترتيب القراءة. */
.fig b,.r-core b{direction:ltr;unicode-bidi:isolate}
.fig b{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--gold-2),var(--teal-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fig span{display:block;margin-top:8px;color:var(--fg-1);font-size:15.5px;font-weight:700;line-height:1.6}
.fig small{display:block;margin-top:5px;color:var(--fg-3);font-size:13.5px;line-height:1.7}

/* سطر الدليل: ما يميزنا عن أرقام بلا مرجع */
.fig-proof{margin-top:clamp(34px,4vw,52px);padding:18px 24px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair-gold);
  color:var(--fg-2);font-size:15px;line-height:1.95;text-align:center}
.fig-proof a{color:var(--gold-2);font-weight:700;display:inline-block;padding-block:6px}
.fig-proof a:hover{text-decoration:underline}

/* ==========================================================================
   طبقات المشروع
   مسار رأسي متوهج على الحافة البادئة، وكل طبقة محطة عليه.
   لا شبكة بلاطات موحدة: التقنية تظهر في موضعها من المشروع.
   ========================================================================== */
/* المسار على جهة البدء أي اليمين في RTL، لأن العين تبدأ منها. */
.stack{position:relative;display:grid;gap:0;max-width:980px;margin-inline:auto;
  padding-inline-start:clamp(26px,3vw,40px);padding-inline-end:0}
.stack::before{content:"";position:absolute;inset-block:26px;inset-inline-start:7px;width:2px;
  background:linear-gradient(180deg,transparent,var(--hair-gold) 14%,var(--hair-gold) 86%,transparent)}

.lane{display:grid;gap:clamp(14px,2vw,34px);align-items:center;
  grid-template-columns:minmax(0,210px) minmax(0,1fr);
  padding-block:clamp(20px,2.4vw,28px);position:relative}
.lane+.lane{border-top:1px solid var(--hair)}
@media (max-width:760px){.lane{grid-template-columns:1fr;gap:14px}}

.lane-head{position:relative}
.lane-head b{display:block;font-size:17px;font-weight:800;color:var(--fg-1);letter-spacing:-.02em}
.lane-head small{display:block;margin-top:6px;color:var(--fg-3);font-size:13.5px;line-height:1.7}
/* المحطة على المسار */
.lane-head::before{content:"";position:absolute;inset-inline-start:calc(-1 * clamp(26px,3vw,40px) - 1px);
  inset-block-start:6px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-0);border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(242,177,0,.1),0 0 16px -2px rgba(242,177,0,.6)}

.lane-chips{display:flex;gap:10px;flex-wrap:wrap}
.lane-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 14px;
  border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--hair);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.lane-chip:hover{background:var(--glass-2);border-color:var(--hair-2);transform:translateY(-2px)}
.lane-chip img{width:auto;height:22px;max-width:34px;object-fit:contain;opacity:.95}
.lane-chip b{font-size:14px;font-weight:700;color:var(--fg-2);direction:ltr;letter-spacing:.01em}
.lane-chip:hover b{color:var(--fg-1)}

/* التكاملات: الشعار ومعه ماذا يفعل */
.int-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(30px,3.6vw,46px)}
@media (max-width:980px){.int-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.int-grid{grid-template-columns:1fr}}
/* لوحة الشعار فوق النص لا بجانبه.
   السبب مقيس: نسب الشعارات تتراوح من 0.96 (سوبابيز مربع) إلى
   9.18 (ميسر شريط عريض). اللوحة القديمة 46×34 بحد عرض 36 بكسل
   كانت تهبط بميسر إلى 3.9 بكسل ارتفاعا وبأوثنتيكا إلى 7.2 بينما
   تعرض المربعة 22، فتظهر نصف الشعارات لطخة. اللوحة بعرض البطاقة
   تسمح بتوحيد الارتفاع على 22 بكسل للجميع. وهي بنية بطاقة الدفع
   .pay نفسها فلا تدخل شكلا جديدا على النظام. */
.int{display:flex;flex-direction:column;gap:13px;padding:16px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--hair);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.int:hover{background:var(--glass-2);border-color:var(--hair-2)}
.int-logo{width:100%;height:54px;display:grid;place-items:center;
  background:#fff;border-radius:var(--r-sm);padding:10px 14px}
.int-logo img{height:22px;max-width:100%;width:auto;object-fit:contain}
.int span{display:block;color:var(--fg-1);font-size:14.5px;font-weight:700;line-height:1.5}
.int small{display:block;margin-top:4px;color:var(--fg-3);font-size:13px;line-height:1.65}

/* شعار واتساب مملوء لا خطي */
.btn svg.i-fill,.wa-float svg{fill:currentColor;stroke:none}
.wa-float svg{fill:#fff}
/* ملف الأعمال أعلى اليسار: نص كامل على الشاشة الواسعة، وأيقونة وحدها
   حين يضيق الشريط، وداخل قائمة الجوال حين تنطوي القائمة. */
.hdr-profile svg{stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.nav-profile{display:none}
@media (max-width:1240px) and (min-width:1141px){
  .hdr-profile span{display:none}
  .hdr-profile{padding-inline:13px}
}
@media (max-width:1140px){
  .hdr-profile{display:none}
  .nav-profile{display:block}
}

/* سطر الدليل في معرض الأعمال: ينقل المقارنة من العدد إلى ما يُفتح */
.works-proof{margin:18px auto 0;max-width:62ch;color:var(--gold-2);
  font-size:15px;font-weight:700;line-height:1.95}

/* لوح «السنة الأولى علينا»: أبرز ما يميزنا فيأخذ تمييزا بصريا */
.free-banner{display:flex;gap:clamp(16px,2vw,24px);align-items:flex-start;
  max-width:860px;margin:clamp(26px,3vw,40px) auto 0;
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(242,177,0,.13),rgba(47,191,160,.07) 58%,transparent);
  border:1px solid var(--hair-gold)}
.free-badge{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,177,0,.16);border:1px solid var(--hair-gold)}
.free-badge svg{width:23px;height:23px;stroke:var(--gold-2);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.free-banner h3{font-size:clamp(18px,1.9vw,21px);color:var(--fg-1)}
.free-banner p{margin-top:10px;color:var(--fg-2);font-size:15px;line-height:1.95}
@media (max-width:560px){.free-banner{flex-direction:column;gap:14px}}

/* سطر «لماذا» تحت شرائح كل طبقة: يخاطب المراجع التقني */
.lane-why{margin-top:12px;color:var(--fg-3);font-size:13.5px;line-height:1.85;max-width:62ch}

/* معايير الهندسة */
.eng-wrap{margin-top:clamp(52px,6vw,84px);padding-top:clamp(44px,5vw,66px);
  border-top:1px solid var(--hair)}
.eng-grid{display:grid;gap:clamp(16px,1.8vw,22px);grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.eng-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.eng-grid{grid-template-columns:1fr}}
.eng{padding:clamp(22px,2.4vw,28px);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--hair);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             transform var(--dur-slow) var(--ease)}
.eng:hover{transform:translateY(-4px);border-color:var(--hair-gold);background:var(--glass-2)}
.eng h3{margin-top:18px;font-size:17.5px}
.eng p{margin-top:11px;color:var(--fg-2);font-size:14.5px;line-height:1.9}

/* زر الواتساب العائم يجلس في أسفل الشاشة من جهة البداية، وعند
   الوصول إلى آخر الصفحة يقع فوق سطر الحقوق في التذييل.
   مقيس بعد تمرير حقيقي إلى القاع (التحقق من atBottom لازم،
   فالقياس قبل استقرار التمرير يعطي صفر تداخل كاذبا):
     390 و430: تقاطع 56×27 أي ارتفاع السطر كله
     360: يغطي 78% من «ofqtech.com»
   يبدأ التداخل من 1100 فأقل. الحل مساحة خالصة أسفل التذييل
   بقدر الزر وحيّزه: 24 أسفل + 56 ارتفاعا + 16 فسحة.
   موضعه هنا لا في dark-skin.css لأن الصفحات المولدة لا تحمّل
   تلك الورقة، فالقاعدة هناك كانت تصلح المدونة وحدها. */
@media (max-width:1100px){
  .site-footer{padding-bottom:96px}
}

/* ---------- شريط التوثيق في التذييل ----------
   بنية شريط الدفع نفسها فلا يدخل شكلا جديدا. الأرقام لاتينية صرفة
   فتحتاج direction:ltr ليبقى ترتيبها صحيحا داخل صفحة rtl، وهو
   عكس ما يصح على السعر الذي فيه كلمة «ريال». */
.footer-trust{margin-top:clamp(34px,4vw,56px);padding-top:30px;border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-trust-label{font-size:14px;font-weight:700;color:var(--fg-1);white-space:nowrap}
.trust-ids{display:flex;gap:10px 26px;flex-wrap:wrap;margin:0}
.trust-ids div{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.trust-ids dt{font-size:13px;color:var(--fg-3);margin:0}
.trust-ids dd{margin:0;font-size:14px;font-weight:700;color:var(--fg-1);
  direction:ltr;unicode-bidi:isolate}
.trust-ids dd.is-valid{color:var(--teal-2);direction:rtl}
.trust-seal-slot{min-height:46px;display:flex;align-items:center}
.trust-seal-slot iframe{border:0;max-width:100%}
.trust-verify{font-size:13.5px;font-weight:700;color:var(--gold-2);
  margin-inline-start:auto;min-height:44px;display:inline-flex;align-items:center}
.trust-verify:hover{color:var(--gold)}
@media (max-width:860px){
  .trust-verify{margin-inline-start:0}
  .footer-trust{gap:14px}
}

/* ---------- الواجهة على الجوال ----------
   مقيس عند 390×844: الفقرة تسعة أسطر بارتفاع 304 بكسل بارتفاع
   سطر 2.05، فيقع زرا النداء عند y=694. هذا داخل شاشة المحاكي
   لكنه تحت الطيّة على آيفون حقيقي لأن شريط سفاري والشق يأكلان
   نحو 150 بكسل. النتيجة: الزائر يصل الواجهة فلا يرى زر البدء.
   نضغط الإيقاع العمودي وحده بلا حذف كلمة من النص. */
@media (max-width:640px){
  .hero{padding-block:clamp(112px,14vw,130px) clamp(44px,6vw,60px)}
  .hero h1{margin-top:18px}
  .hero-lead{margin-top:16px;font-size:15.5px;line-height:1.85}
  .hero-cta{margin-top:24px;gap:10px}
}

/* ---------- ملف الأعمال في رأس الجوال ----------
   كان يختفي تحت 1140 وينتقل إلى داخل القائمة المنطوية، فلا يراه
   زائر الجوال إلا بعد فتح القائمة. أعيد إلى الشريط بطلب المالك.
   القياس يحدد الصيغة: نص كامل حتى 400، ثم أيقونة وحدها فالشريط
   يضيق عن الأربعة معا (الشعار 123 + اللغة 44 + الملف + القائمة 46). */
@media (max-width:1140px){
  /* الأسبقية: قاعدة .header-actions .btn{display:none} أعلى من
     .hdr-profile وحدها، فيلزم مطابقتها لا تجاوزها بـimportant. */
  .header-actions .btn.hdr-profile{display:inline-flex}
  .nav-profile{display:none}
}
@media (max-width:640px){
  .hdr-profile{padding:9px 13px;font-size:13.5px;gap:7px}
  .hdr-profile svg{width:16px;height:16px;flex:0 0 16px}
  .header-actions{gap:8px}
}
/* النص يسع حتى 360 (مقيس: الشعار 102 والأزرار 192 داخل 312).
   أضيق من ذلك تبقى الأيقونة وحدها والنص الكامل داخل القائمة. */
@media (max-width:340px){
  .hdr-profile span{display:none}
  .hdr-profile{padding-inline:11px}
  .nav-profile{display:block}
}

/* زرا الواجهة على الجوال: كانا ينكسران إلى سطرين فيقع الثاني تحت
   الطيّة على آيفون (مقيس عند 390×664: الكتلة 573 إلى 709 من 664).
   حشو أضيق ونص أقصر يجلسان في سطر واحد كما في المرجع. */
@media (max-width:640px){
  .hero-cta .btn{padding:14px 20px;font-size:15px}
  .hero-cta .btn svg{width:17px;height:17px;flex:0 0 17px}
}

/* الجوال الضيق جدا: الزران الإنجليزيان أعرض لأن كلماتهما أطول،
   فيحتاجان خفضا إضافيا ليبقيا في سطر واحد داخل 312 بكسل. */
@media (max-width:380px){
  .hero-cta .btn{padding:13px 16px;font-size:14.5px;gap:8px}
  /* الفقرة الإنجليزية أطول بعشر كلمات من العربية، فتزيد سطرا عند
     360 ويخرج الزران من الطيّة بخمسة عشر بكسلا. */
  .hero-lead{font-size:15px;line-height:1.78}
  .hero{padding-block-start:100px}
}

/* الزر العائم مخفي ما دام نداء الواجهة ظاهرا (انظر js/site.js) */
.wa-float.is-away{opacity:0;visibility:hidden;transform:scale(.85);pointer-events:none}

/* ---------- بنر الأفق خلف نص الواجهة ----------
   حلقات بيضوية مرتكزة أسفل الوسط تتسع إلى أعلى، تملأ الفراغ على
   جانبي النص وتمر خافتة خلفه. شفافة بالكامل ولا تلمس التخطيط. */
.hero-sky{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 94%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 94%)}
.hero-sky i{position:absolute;display:block;left:50%;translate:-50% 0;border-radius:50%}

.ring{bottom:8%;aspect-ratio:2.05/1;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(47,191,160,.42),rgba(242,177,0,.24) 46%,transparent 74%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ring-1{width:min(620px,62vw)}
.ring-2{width:min(900px,92vw);opacity:.80}
.ring-3{width:min(1240px,128vw);opacity:.60}
.ring-4{width:min(1620px,168vw);opacity:.42}

/* هالة الشروق أسفل الوسط */
.sky-rise{bottom:-16%;width:min(1100px,112vw);aspect-ratio:2.4/1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,177,0,.26),rgba(47,191,160,.13) 54%,transparent 78%)}

/* نجوم متفرقة في أعلى الواجهة */
.sky-stars{inset:0;left:0;translate:none;border-radius:0;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%,#CFE6FF,transparent),
    radial-gradient(1.2px 1.2px at 27% 26%,#CFE6FF,transparent),
    radial-gradient(1.8px 1.8px at 41% 9%,#CFE6FF,transparent),
    radial-gradient(1.2px 1.2px at 58% 22%,#CFE6FF,transparent),
    radial-gradient(1.5px 1.5px at 73% 12%,#CFE6FF,transparent),
    radial-gradient(1.1px 1.1px at 86% 25%,#CFE6FF,transparent),
    radial-gradient(1.4px 1.4px at 94% 10%,#CFE6FF,transparent),
    radial-gradient(1.2px 1.2px at 5% 30%,#CFE6FF,transparent),
    radial-gradient(1.3px 1.3px at 65% 34%,#CFE6FF,transparent),
    radial-gradient(1.1px 1.1px at 33% 38%,#CFE6FF,transparent);
  background-repeat:no-repeat}

/* النص فوق الطبقة ويخفت ما تحته مباشرة فيبقى التباين كما قيس */
.hero .container{z-index:2}
.hero-sky::after{content:"";position:absolute;inset:0;
  background:radial-gradient(46% 34% at 50% 40%,rgba(6,12,24,.78) 0%,rgba(6,12,24,.40) 60%,transparent 84%)}

@media (max-width:640px){
  .ring-4,.sky-stars{display:none}
  .ring{bottom:14%}
}