/* =====================================================================
   Rukn Contracting v4.3 — تحسينات الجلسة الثالثة
   معالجة ملاحظات المراجعة البصرية:
   - تباين أرقام الأقسام (section-number) أغمق على الخلفيات الفاتحة
   - تحسين تباين العناصر العائمة على صورة البداية
   - توازن صف بطاقات الخدمات الأخير (8 خدمات = 3+3+2)
   - توسيع مساحة الأسئلة الشائعة بين السؤال والإجابة
   - توحيد محاذاة أيقونات بطاقات الخدمات
   - تحسين أحجام النصوص الصغيرة في الفوتر على الموبايل
   - إضافة شريط تقدم القراءة (reading progress bar)
   - زر العودة للأعلى يظهر بعد التمرير
   ===================================================================== */

/* 1) شريط تقدم القراءة — يظهر أعلى الصفحة ويتحرك مع التمرير */
.reading-progress-bar{position:fixed;inset-block-start:0;inset-inline:0;z-index:110;height:3px;background:linear-gradient(90deg,var(--accent),#f7c95c 60%,var(--accent-strong));transform-origin:0 0;transform:scaleX(0);transition:transform var(--t-fast) linear;pointer-events:none}
.reading-progress-bar[aria-hidden=true]{opacity:0}
@media(prefers-reduced-motion:reduce){.reading-progress-bar{transition:none}}

/* 2) تباين أعمق لأرقام الأقسام: الرمادي الفاتح (#c3d2e0) ضعيف على الأبيض.
      النسخة الأصلية في main.css تستخدم -webkit-text-stroke فقط — نضيف تعبئة
      أغمق عبر لون شفاف على الخلفية الفاتحة، وأخف على الخلفيات الداكنة. */
.section-number{color:var(--accent-strong);opacity:.18;-webkit-text-stroke:0;fill:currentColor}
.section-number{color:transparent;-webkit-text-stroke:2px var(--border)} /* keep outline look but use --border which is darker than #c3d2e0 */
/* Override on dark/amber sections to stay readable */
.dark-section .section-number,.stats-v2 .section-number,.cta-section .section-number,.guarantee-section .section-number,.hero .section-number{-webkit-text-stroke-color:#ffffff3d}
@media(max-width:599px){.section-number{display:none}} /* too small to be useful on mobile, also saves space */

/* 3) تحسين تباين العناصر العائمة على صورة البداية — إضافة ظل نصي خفيف
      للبيانات الحساسة (الاسم/التقييم) فوق خلفية الصورة */
.hero-float strong,.hero-float small{text-shadow:none}
.hero h1, .hero .hero-title{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;text-shadow:0 3px 24px rgba(0,0,0,0.75)!important}
.hero-description{color:#f1f5f9!important;-webkit-text-fill-color:#f1f5f9!important;text-shadow:0 1px 6px rgba(0,0,0,0.5)!important}
.hero-chip{text-shadow:none;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
.hero-trust li{text-shadow:none;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
.hero-baseline span,.hero-baseline a{text-shadow:none}

/* 4) توازن صف بطاقات الخدمات الأخير (3+3+2) — أعيدت كتابته في v4.4.
      المشكلة: مع 8 بطاقات و3 أعمدة يقف في الصف الأخير بطاقتان ويبقى ثلث
      الشبكة فارغًا. محاولة v4.3 السابقة (margin-inline:auto مع
      max-inline-size:calc(100%/3 - var(--gap))) كانت معطوبة: الهوامش
      التلقائية على عنصر شبكي لا تمدد بلا بل تقزّمه إلى عرض المحتوى
      (بطاقات 106px عمودية مكسورة).
      الحل الصحيح: شبكة أساس من 6 مسارات (كل بطاقة تمتد مسارين = 3 أعمدة
      مرئية)، وعندما يقف في الصف الأخير بطاقتان تمتد كل منهما 3 مسارات
      فيمتلئ الصف بالكامل، وعندما تقف بطاقة واحدة تتوسّط. يعمل مع أي عدد.
      القوالب تضيف صنف svc-cols-N من إعداد "أعمدة الخدمات". */
@media(min-width:1000px){
.service-grid.svc-cols-3{grid-template-columns:repeat(6,minmax(0,1fr))}
.service-grid.svc-cols-3>.service-card{grid-column:span 2}
/* الصف الأخير بطاقتان → كل بطاقة تمتد 3 مسارات */
.service-grid.svc-cols-3>.service-card:nth-last-child(2):nth-child(3n+1),
.service-grid.svc-cols-3>.service-card:nth-last-child(2):nth-child(3n+1)+.service-card{grid-column:span 3}
/* الصف الأخير بطاقة واحدة → تتمركز */
.service-grid.svc-cols-3>.service-card:last-child:nth-child(3n+1){grid-column:3/span 2}
/* 4 أعمدة: نفس الفكرة على شبكة 12 مسارًا */
.service-grid.svc-cols-4{grid-template-columns:repeat(12,minmax(0,1fr))}
.service-grid.svc-cols-4>.service-card{grid-column:span 3}
.service-grid.svc-cols-4>.service-card:nth-last-child(3):nth-child(4n+1),
.service-grid.svc-cols-4>.service-card:nth-last-child(3):nth-child(4n+1)+.service-card,
.service-grid.svc-cols-4>.service-card:nth-last-child(3):nth-child(4n+1)+.service-card+.service-card{grid-column:span 4}
.service-grid.svc-cols-4>.service-card:nth-last-child(2):nth-child(4n+1),
.service-grid.svc-cols-4>.service-card:nth-last-child(2):nth-child(4n+1)+.service-card{grid-column:span 6}
.service-grid.svc-cols-4>.service-card:last-child:nth-child(4n+1){grid-column:5/span 3}
}

/* 5) توسيع مساحة الأسئلة الشائعة — المسافة بين السؤال والإجابة ضيقة جدًا. */
.faq-list details p{padding-block-start:var(--space-3);border-block-start:1px solid var(--border)}
.faq-list details[open] summary{margin-block-end:0}
.faq-list summary{padding-block:var(--space-4) var(--space-5)} /* was var(--space-4) */
.faq-list details + details{margin-block-start:var(--space-2)} /* gap between items */

/* 6) توحيد محاذاة أيقونات بطاقات الخدمات — كانت متباينة العمود. */
.service-card .svc-media{position:relative;display:flex;flex-direction:column}
.svc-icon{inset-block-end:calc(-1 * var(--space-6));inset-inline-start:var(--space-4)} /* explicit reset */
.svc-order{inset-block-start:var(--space-3);inset-inline-end:var(--space-3)} /* explicit reset */
.svc-body{padding-block-start:calc(var(--space-6) + var(--space-2))} /* keep space for the overhanging icon */

/* 7) تحسين أحجام النصوص الصغيرة في الفوتر على الموبايل — كانت أقل من 12px. */
@media(max-width:599px){
.site-footer{font-size:max(var(--fs-xs),.8125rem)} /* guarantee ≥13px */
.footer-bottom{font-size:max(var(--fs-xs),.8125rem);line-height:1.7}
.footer-copy,.footer-legal,.footer-top{font-size:max(var(--fs-xs),.8125rem)}
.footer-contact a,.footer-contact span{font-size:max(var(--fs-sm),.9rem);min-height:44px} /* bump touch targets */
}

/* 8) زر العودة للأعلى — يظهر بعد التمرير 600px. زر موجود أصلاً في الفوتر،
      لكن نضيف زرًا عائمًا صغيرًا (مستقل عن الأزرار العائمة). */
.back-to-top{position:fixed;inset-block-end:calc(var(--float-offset) + var(--float-size) + var(--space-4));inset-inline-end:var(--float-offset);z-index:190;display:grid;place-items:center;inline-size:44px;block-size:44px;background:var(--white);border:1px solid var(--border);border-radius:50%;color:var(--primary);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear 0s}
.back-to-top:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-decoration:none}
.back-to-top svg{inline-size:20px;block-size:20px}
@media(max-width:599px){.back-to-top{inset-block-end:calc(var(--float-offset) + var(--float-size) + var(--space-5))}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none;transform:none}}

/* 9) دعم تمرير اللمس للأقسام الأفقية على الموبايل (filter-bar في المشاريع) */
@media(max-width:599px){
.filter-bar{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-block-end:var(--space-2);-webkit-overflow-scrolling:touch}
.filter-button{flex-shrink:0;scroll-snap-align:start}
.filter-bar::-webkit-scrollbar{block-size:4px}
.filter-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
}

/* 10) الوضع الداكن — تباين أعمق للأرقام الشبحية وأطراف البطاقات. */
:root[data-theme=dark] .section-number{-webkit-text-stroke-color:#ffffff40}
:root[data-theme=dark] .faq-list details p{border-block-start-color:#ffffff1a}
:root[data-theme=dark] .back-to-top{background:var(--surface);border-color:#ffffff1a;color:var(--text)}
:root[data-theme=dark] .back-to-top:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-theme=dark] .reading-progress-bar{background:linear-gradient(90deg,var(--accent),#f7c95c 60%,var(--accent-strong))}

/* 11) تباين النص الثانوي في التذييل على الوضع الداكن — أكثر سطوعًا */
:root[data-theme=dark] .site-footer{color:#c6d4e2}
:root[data-theme=dark] .footer-copy{color:#a5b8cc}
:root[data-theme=dark] .footer-bottom{border-block-start-color:#ffffff20}

/* 12) تحسين تباين نص بطاقة آراء العملاء في الوضع الداكن */
:root[data-theme=dark] .testimonial-slide blockquote{color:var(--text)}
:root[data-theme=dark] .testimonial-slide{background:var(--surface)}

/* 13) ضمان عدم تجاوز صور الـ Hero لحدود الحاوية على الموبايل الصغير */
@media(max-width:360px){
.hero-image{aspect-ratio:4/3}
.hero-float-exp{inset-block-end:auto;inset-block-start:var(--space-3)}
}

/* 14) تحسين التباين على بطاقة الضمان — النص الثانوي أكثر وضوحًا */
.guarantee-card p{color:var(--text);font-weight:500}
.guarantee-section .section-number{-webkit-text-stroke-color:#ecd9ae}

/* 15) ضمان أحجام لمس ≥ 44px للأزرار الصغيرة في بطاقات الخدمات */
.svc-wa,.svc-link,.project-zoom{min-block-size:44px;min-inline-size:44px}
.svc-link{display:inline-flex;align-items:center;justify-content:flex-start}

/* 16) تحسين focus-visible على الأزرار الشفافة (الوصولية) */
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:calc(var(--radius) * .5)}
.icon-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 17) احتواء الصور الطويلة في المقالات (منع كسر التخطيط) */
.entry-content img{max-block-size:80vh;object-fit:contain}
.entry-content figure{margin-block:var(--space-6)}

/* 18) دعم focus state أوضح في قسم المشاريع على الفلاتر */
.filter-button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* 19) تحسين تباين الروابط في النص */
.entry-content a,.entry-content a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:5px}

/* 20) تحسين المسافة بين خطوات العمل على الموبايل */
@media(max-width:599px){
.steps-v2{gap:var(--space-4)}
.step-item{padding:var(--space-4)}
.step-number{inline-size:44px;block-size:44px;font-size:1.1rem}
}

/* 21) تحسين تباين نص بطاقة "لماذا نحن" */
.why-v2 p{color:var(--text)}
.why-v2 .why-item:hover h3{color:var(--accent-strong)}

/* 22) دعم اختصارات لوحة المفاتيح لتنقل أفضل في القائمة الجوّالة */
.mobile-nav a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* 23) تحسين تباين زر "إلى أعلى" في الفوتر (الذي كان لون أصفر فاتح) */
.footer-top{color:var(--accent-strong);font-weight:800;background:#ffffff10;padding-inline:var(--space-3);padding-block:var(--space-2);border-radius:var(--radius-pill);border:1px solid #ffffff20;display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px}
.footer-top:hover{background:#ffffff1f;color:#fff;text-decoration:none}

/* 24) v4.4: محاذاة روابط بطاقات المشاريع في الأسفل — كانت تختلف ارتفاعًا
      بين بطاقات الصف الواحد حسب طول العناوين. */
.project-body{flex-grow:1}
.project-body .text-link{margin-block-start:auto}

/* 25) v4.4: بطاقة المقال على الرئيسية — بعد إصلاح الشبكة (عمود واحد → ثلاثة)
      نضمن ثبات ارتفاع الصورة وامتلاء البطاقة. */
.post-card-body{display:flex;flex-direction:column}

/* 26) v4.4: توازن شبكة مقالات الرئيسية بنفس أسلوب الخدمات:
      مقالتان فقط (أو أي صف أخير ناقص) يملآن الصف بعرضين متساويين
      بدل بطاقتين وثلث فارغ، ومقالة وحيدة تتوسّط. محصورة بـ .blog-section
      كي لا تمس شبكات المدونة الداخلية أو المقالات ذات الصلة. */
@media(min-width:1000px){
.blog-section .post-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.blog-section .post-grid>.post-card{grid-column:span 2}
.blog-section .post-grid>.post-card:nth-last-child(2):nth-child(3n+1),
.blog-section .post-grid>.post-card:nth-last-child(2):nth-child(3n+1)+.post-card{grid-column:span 3}
.blog-section .post-grid>.post-card:last-child:nth-child(3n+1){grid-column:3/span 2}
}

/* =====================================================================
   27) v4.5: هوية فاخرة موحدة وتحسين التباين البصري والوضوح
   - تصحيح تباين نصوص البداية (العنوان والوصف والمميزات)
   - توحيد ألوان الأزرار (أمبر ذهبي فاخر + واتساب زمردي متوازن)
   - ترقية قسم الإحصائيات الفردي الموحد ليكون واجهة هندسية راقية
   - تفعيل زر "عرض المزيد" في قسم المقالات بتصميم بارز
   - تنظيف خلفيات الضمان وبطاقات الخدمات وإزالة أي ألوان غير مريحة
   ===================================================================== */

/* تباين نصوص وقسم البداية (Hero) */
.hero h1, .hero .hero-title{color:#ffffff!important;font-weight:850!important;text-shadow:0 3px 20px rgba(0,0,0,0.65)!important;line-height:1.32}
.hero .hero-description{color:#e2e8f0!important;font-size:clamp(1.05rem,1.8vw,1.18rem)!important;line-height:1.85!important;text-shadow:0 1px 4px rgba(0,0,0,0.4)!important}
.hero .hero-chip{background:rgba(255,255,255,0.09)!important;border:1px solid rgba(255,255,255,0.22)!important;color:#ffffff!important;text-shadow:none!important}
.hero .hero-chip svg{color:#fbbf24!important}
.hero .hero-trust li{background:rgba(255,255,255,0.09)!important;border:1px solid rgba(255,255,255,0.2)!important;color:#ffffff!important;text-shadow:none!important;font-weight:700}
.hero .hero-trust svg{color:#fbbf24!important}
.hero-baseline span{color:#e2e8f0}
.hero-baseline a{color:#fbbf24;font-weight:800}

/* توحيد فخامة الأزرار */
.button:not(.button-outline):not(.button-light):not(.button-wa):not(.button-ghost),
.hero-cta-btn,
.header-cta{background:linear-gradient(135deg,#d97706,#b45309)!important;color:#ffffff!important;border:1px solid #d97706!important;font-weight:800!important;box-shadow:0 4px 16px rgba(217,119,6,0.32)!important;border-radius:calc(var(--radius)*0.8)!important}
.button:not(.button-outline):not(.button-light):not(.button-wa):not(.button-ghost):hover,
.hero-cta-btn:hover,
.header-cta:hover{background:linear-gradient(135deg,#b45309,#92400e)!important;color:#ffffff!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(217,119,6,0.45)!important;text-decoration:none}

.button-wa,
.hero-wa-btn{background-color:#10b981!important;color:#ffffff!important;border:1px solid #059669!important;font-weight:800!important;box-shadow:0 4px 16px rgba(16,185,129,0.3)!important;border-radius:calc(var(--radius)*0.8)!important}
.button-wa:hover,
.hero-wa-btn:hover{background-color:#059669!important;color:#ffffff!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.42)!important;text-decoration:none}

/* زر عرض المزيد في قسم المقالات */
.blog-actions{display:flex;align-items:center;justify-content:center;margin-block-start:clamp(36px,5vw,56px);width:100%}
.blog-more-button{min-height:54px;padding:14px 44px;border:2px solid var(--accent)!important;background-color:#ffffff!important;color:var(--accent-strong)!important;border-radius:var(--radius)!important;font-weight:850!important;font-size:1.05rem!important;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);text-decoration:none!important;box-shadow:0 4px 14px rgba(0,0,0,0.06);transition:all .28s var(--ease)}
.blog-more-button:hover{background-color:var(--accent)!important;color:#ffffff!important;border-color:var(--accent)!important;transform:translateY(-3px);box-shadow:0 10px 26px rgba(217,119,6,0.35);text-decoration:none!important}
.blog-more-button svg{transition:transform .28s var(--ease)}
[dir=rtl] .blog-more-button:hover svg{transform:translateX(-6px)}
[dir=ltr] .blog-more-button:hover svg{transform:translateX(6px)}

/* قسم الإحصائيات الموحد (الاحترافي) */
.stats-section,.stats-v2{background-color:#0a192f!important;background-image:linear-gradient(135deg,#070f1e 0%,#0a192f 55%,#112240 100%)!important;padding-block:clamp(54px,7vw,90px)!important;color:#ffffff!important;border-block:1px solid rgba(255,255,255,0.08)!important}
.stats-v2 .section-heading{margin-block-end:clamp(28px,4vw,44px)}
.stats-v2 .eyebrow{color:#fbbf24!important;font-size:var(--fs-sm);font-weight:800}
.stats-v2 .eyebrow:before{background:#fbbf24!important}
.stats-v2 h2{color:#ffffff!important;font-weight:850;font-size:clamp(1.7rem,3vw,2.3rem)}
.stats-v2 .section-number{-webkit-text-stroke-color:rgba(255,255,255,0.2)!important}
.stat-item.stat-card,.stats-v2 .stat-item{background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.12)!important;border-radius:var(--radius-lg)!important;padding:clamp(24px,3.2vw,36px) var(--space-4)!important;backdrop-filter:blur(8px);transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3)}
.stat-item.stat-card:hover,.stats-v2 .stat-item:hover{transform:translateY(-6px)!important;background:rgba(255,255,255,0.08)!important;border-color:rgba(217,119,6,0.6)!important;box-shadow:0 18px 40px rgba(0,0,0,0.35)!important}
.stat-icon-wrap,.stats-v2 .stat-icon{display:grid;place-items:center;inline-size:62px;block-size:62px;margin-inline:auto;background:linear-gradient(135deg,#d97706,#b45309)!important;border-radius:calc(var(--radius)*1.1);color:#ffffff!important;box-shadow:0 6px 18px rgba(217,119,6,0.35);transition:transform var(--t) var(--ease)}
.stat-item:hover .stat-icon-wrap,.stats-v2 .stat-item:hover .stat-icon{transform:scale(1.08)}
.stat-icon-wrap svg,.stats-v2 .stat-icon svg{inline-size:28px;block-size:28px;color:#ffffff}
.stat-info{display:flex;flex-direction:column;align-items:center;gap:6px}
.stat-item strong.stat-value,.stats-v2 .stat-item strong{display:inline-flex;align-items:center;justify-content:center;color:#ffffff!important;font:850 clamp(2.1rem,3.8vw,2.85rem)/1.15 Cairo,Arial,sans-serif!important;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-plus{color:#fbbf24!important;font-style:normal;font-weight:800;margin-inline-start:2px}
.stat-label,.stats-v2 .stat-item span{color:#e2e8f0!important;font-size:var(--fs-sm)!important;font-weight:700!important;line-height:1.55}

/* تباين عناوين ونصوص الأقسام الفاتحة */
.eyebrow:not(#hero .eyebrow):not(#stats .eyebrow):not(#cta .eyebrow){color:#b45309!important;font-weight:800!important;letter-spacing:0.5px}
.eyebrow:not(#hero .eyebrow):not(#stats .eyebrow):not(#cta .eyebrow):before{background:var(--accent)!important}
.section:not(#hero):not(#stats):not(#cta) h1,
.section:not(#hero):not(#stats):not(#cta) h2,
.section:not(#hero):not(#stats):not(#cta) h3,
.section:not(#hero):not(#stats):not(#cta) h4,
.section:not(#hero):not(#stats):not(#cta) h5{color:#0a192f!important;font-weight:800}
.section:not(#hero):not(#stats):not(#cta) p,
.svc-body p, .post-card-body>p, .why-item p, .step-item p, .faq-list details p, .about-copy p, .contact-grid p{color:#334155!important;line-height:1.85}

/* تباين كامل لعناصر التذييل (Footer) الداكن */
.site-footer h2, .site-footer h3, .site-footer .footer-brand{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:800!important}
.site-footer p, .site-footer .footer-about{color:#cbd5e1!important;-webkit-text-fill-color:#cbd5e1!important}
.site-footer a{color:#e2e8f0;transition:color var(--t-fast) linear}
.site-footer a:hover{color:#fbbf24!important;text-decoration:none}
.site-footer .footer-contact svg, .site-footer .footer-brand svg{color:#fbbf24!important}
.site-footer .footer-copy{color:#94a3b8!important}

/* تنظيف خلفية قسم الضمان من أي تدرج أصفر */
.guarantee-section{background-color:var(--surface)!important;background-image:linear-gradient(180deg,#ffffff 0%,var(--surface) 100%)!important}
.guarantee-card{background:#ffffff!important;border:1px solid var(--border)!important;border-block-start:4px solid var(--accent)!important;box-shadow:var(--shadow-1)!important}
.guarantee-card:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-3)!important;transform:translateY(-5px)}
.guarantee-card h3{color:#0a192f!important;font-weight:750}
.guarantee-card p{color:#334155!important;font-weight:500;line-height:1.85}
.guarantee-card .service-icon{background:linear-gradient(135deg,#d97706,#b45309)!important;border-color:transparent!important;color:#ffffff!important;box-shadow:0 4px 14px rgba(217,119,6,0.25)}
.guarantee-section .section-number{-webkit-text-stroke-color:#cbd5e1!important}

/* بطاقات الخدمات */
.service-card{border-color:#e2e8f0;background:#ffffff}
.service-card:hover{border-color:var(--accent);box-shadow:var(--shadow-3)}
.svc-body h3 a{color:#0a192f!important;font-weight:750}
.svc-body h3 a:hover{color:var(--accent)!important}
.svc-link{color:var(--accent-strong)!important;font-weight:800}
.svc-link:hover{color:var(--accent)!important}

/* =====================================================================
   28) الفاصل المعماري الفاخر بين أقسام الصفحة الرئيسية
   ===================================================================== */
.rukn-architectural-divider {
	position: relative;
	display: block;
	width: 100%;
	padding-block: clamp(22px, 3.5vw, 42px);
	background: transparent;
	overflow: hidden;
}
.rukn-architectural-divider .sep-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.4vw, 26px);
	max-width: min(100% - 32px, 1140px);
	margin-inline: auto;
}
.rukn-architectural-divider .sep-rail {
	position: relative;
	flex: 1 1 0;
	height: 2px;
	border-radius: 999px;
}
.rukn-architectural-divider .sep-rail-start {
	background: linear-gradient(90deg, transparent 0%, #cbd5e1 35%, rgba(217, 119, 6, 0.5) 75%, #d97706 100%);
}
[dir=rtl] .rukn-architectural-divider .sep-rail-start {
	background: linear-gradient(-90deg, transparent 0%, #cbd5e1 35%, rgba(217, 119, 6, 0.5) 75%, #d97706 100%);
}
.rukn-architectural-divider .sep-rail-end {
	background: linear-gradient(90deg, #d97706 0%, rgba(217, 119, 6, 0.5) 25%, #cbd5e1 65%, transparent 100%);
}
[dir=rtl] .rukn-architectural-divider .sep-rail-end {
	background: linear-gradient(-90deg, #d97706 0%, rgba(217, 119, 6, 0.5) 25%, #cbd5e1 65%, transparent 100%);
}
.rukn-architectural-divider .sep-centerpiece {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.rukn-architectural-divider .sep-diamond-bead {
	display: block;
	width: 8px;
	height: 8px;
	background: #d97706;
	border-radius: 2px;
	transform: rotate(45deg);
	box-shadow: 0 0 10px rgba(217, 119, 6, 0.45);
}
.rukn-architectural-divider .sep-diamond-badge {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: linear-gradient(135deg, #0a192f 0%, #1e3a5f 100%);
	border: 2px solid #d97706;
	border-radius: 10px;
	transform: rotate(45deg);
	box-shadow: 0 6px 18px rgba(10, 25, 47, 0.35), 0 0 14px rgba(217, 119, 6, 0.3);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rukn-architectural-divider:hover .sep-diamond-badge {
	transform: rotate(45deg) scale(1.12);
	box-shadow: 0 8px 24px rgba(10, 25, 47, 0.45), 0 0 22px rgba(217, 119, 6, 0.5);
}
.rukn-architectural-divider .sep-diamond-badge svg {
	transform: rotate(-45deg);
	color: #fbbf24;
	width: 17px;
	height: 17px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* إيقاع تبادلي فاخر لخلفيات أقسام الصفحة الرئيسية يضمن التمايز والفصل */
#trustbar.trustbar { background-color: #ffffff !important; border-block-end: 1px solid rgba(226, 232, 240, 0.7); }
#services.services-section { background-color: #f8fafc !important; }
#about.section { background-color: #ffffff !important; }
#why.why-v2 { background-color: #f8fafc !important; }
#process.section { background-color: #ffffff !important; }
#projects.section { background-color: #f8fafc !important; }
#faq.section { background-color: #ffffff !important; }
#guarantee.guarantee-section { background-color: #f8fafc !important; }
#blog.blog-section { background-color: #ffffff !important; }
#contact.section { background-color: #f8fafc !important; }