/*
   شِعاري — طبقة هوية موحّدة (Flat Identity)
   تُحمَّل بعد styles.css على كل الصفحات.
   أهدافها:
     - الألوان الحصرية الثلاثة: الغامق #110A05، المربعات #DBE4FF، الخلفية #C5D8FF.
     - بلا ظلال، بلا تدرّجات، بلا أي ألوان/تأثيرات خارج الهوية (في الوضعَين).
     - الخط الأساسي "IBM Plex Sans Arabic" في كل النصوص دون استثناء.
*/

/* ============ 1) توكنات الهوية (فاتح) ============ */
:root{
  --espresso:#110A05;
  --pearl:#DBE4FF;
  --pearl-2:#DBE4FF;
  --sky-sand:#C5D8FF;
  --sand:#DBE4FF;
  --sand-light:#DBE4FF;
  --sand-strong:#110A05;
  --sand-bg:rgba(17,10,5,.05);
  --ink:#110A05;
  --ink-fixed:#110A05;
  --bg:#C5D8FF;
  --paper:#DBE4FF;
  --paper-2:#DBE4FF;
  --text:#110A05;
  --body-text:#110A05;
  --muted:rgba(17,10,5,.72);
  --muted-2:rgba(17,10,5,.55);
  --card-border:rgba(17,10,5,.28);
  --line:rgba(17,10,5,.22);
  --line-strong:rgba(17,10,5,.36);
  --dark:#110A05;
  --dark-2:#110A05;
  --success:rgba(17,10,5,.85);
  --warning:rgba(17,10,5,.7);
  --danger:rgba(17,10,5,.9);
  --info:rgba(17,10,5,.65);

  --gold:#110A05;
  --gold-deep:#110A05;
  --gold-soft:#DBE4FF;
  --gold-line:rgba(17,10,5,.3);

  --shadow:none;
  --shadow-sm:none;
  --shadow-hover:none;
  --card-shadow:none;
  --card-shadow-hover:none;

  --font-heading-primary:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif !important;
  --font-heading-secondary:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif !important;
  --font-body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --font-english:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ============ 2) توكنات الهوية (داكن) ============ */
html.dark-mode{
  --espresso:#110A05;
  --pearl:#DBE4FF;
  --pearl-2:#DBE4FF;
  --sky-sand:#C5D8FF;
  --sand:#DBE4FF;
  /* الأقسام والخلفيات في الداكن: حبر غامق حقيقي (بلا ألوان خارجة عن
     الهوية الثلاثة) — الوضع الداكن كان يبقى فاتحًا حتى الآن لأنه كان
     يغذّي نفس قيم الفاتح، وهذا خلل قديم يُصلح هنا. */
  --sand-light:#110A05;
  --sand-strong:#110A05;
  --sand-bg:rgba(219,228,255,.07);
  --ink:#DBE4FF;
  --ink-fixed:#110A05; /* الأسطح التي يجب أن تبقى حبرًا في الوضعَين */
  --bg:#110A05;
  --paper:rgba(219,228,255,.06);
  --paper-2:rgba(219,228,255,.09);
  --text:#DBE4FF;
  --body-text:#DBE4FF;
  --muted:rgba(219,228,255,.7);
  --muted-2:rgba(219,228,255,.55);
  --card-border:rgba(219,228,255,.16);
  --line:rgba(219,228,255,.12);
  --line-strong:rgba(219,228,255,.24);
  --dark:#DBE4FF;
  --dark-2:#DBE4FF;
  --success:rgba(219,228,255,.85);
  --warning:rgba(219,228,255,.72);
  --danger:rgba(219,228,255,.9);
  --info:rgba(219,228,255,.65);

  --gold:#DBE4FF;
  --gold-deep:#DBE4FF;
  --gold-soft:rgba(219,228,255,.14);
  --gold-line:rgba(219,228,255,.3);
}

/* ============ 3) تعطيل الظلال والتدرّجات والزخارف القديمة ============ */
*,*::before,*::after{
  box-shadow:none !important;
  text-shadow:none !important;
}
.fab-toggle svg{ filter:none !important; }

/* شريط CTA: خلفية مسطّحة من الحبر الغامق بلا ظل ولا نسج — لون لوحة التحكم
   (page.*.cta_bar_color عبر --cta-bar-bg) له الأولوية متى ضُبط، وإلا الحبر. */
.cta-band-inner{ background:var(--cta-bar-bg, var(--sand-strong)) !important; }
.cta-band-inner::before,
.cta-band-inner::after{ display:none !important; }
.cta-band h3{ color:#DBE4FF !important; }
.cta-band p{ color:#C5D8FF !important; opacity:1 !important; }
.cta-eyebrow{ background:var(--sand-strong) !important; color:#DBE4FF !important; border-color:transparent !important; }
.cta-eyebrow::before{ color:#DBE4FF !important; }
.cta-band .cta-btn{ border:1px solid rgba(219,228,255,.42) !important; }

/* إزالة تدرّجات/أنسجة عالقة إن وُجدت */
.hero-bg-overlay,
.latest-work,
.section-muted{ background:none !important; }

/* خلفية موحّدة والبطاقات بلون المربعات */
body{ background:var(--bg) !important; }
.section,
.section-muted,
.latest-work,
.quick-action-bar{ background:var(--bg) !important; }
.section .card,
.service-card,
.process-card,
.why-item,
.review-card,
.package-card,
.project-card,
.stat-block,
.mv-card,
.about-card,
.article-card,
.ticket-card{ background:var(--paper) !important; border:1px solid var(--card-border) !important; }

/* ============ 4) العناوين الكبيرة — خطوط سليمة بلا التصاق ============ */
.hero-copy h1{
  font-size:clamp(2.7rem, 7.4vw, 5.1rem) !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  word-spacing:normal !important;
}
.about-hero-inner h1,
.notfound-section h1{
  font-size:clamp(2.3rem, 5.6vw, 4rem) !important;
  line-height:1.14 !important;
}
.section-title h2,
.latest-work__heading h2{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem) !important;
  line-height:1.16 !important;
  font-weight:800 !important;
}
.service-card h3{ font-size:1.32rem !important; }
.process-card h3{ font-size:1.25rem !important; font-weight:700 !important; }
.work-card h3{ font-size:1.32rem !important; font-weight:700 !important; color:var(--ink) !important; }
.package-card h3{ font-size:1.4rem !important; font-weight:700 !important; }

/* خط زخرفي بالحبر يترسّم تحت العنوان الكبير عند دخول الهيرو */
.hero-copy h1{ position:relative; padding-bottom:10px; }
.hero-copy h1::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:clamp(90px, 24%, 190px); height:5px; border-radius:999px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:center;
}
html.df-reveal-ready .hero-copy.in h1::after,
.hero-copy.in h1::after{ animation:dfDrawLine .75s cubic-bezier(.2,.7,.2,1) .3s forwards; }
@keyframes dfDrawLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero-copy h1::after{
  background:#110A05 !important;
}

/* ============ 5) الأوصاف بالحبر فقط ============ */
.eyebrow{
  color:var(--ink) !important;
  font-weight:700 !important;
}
.section-title > p:not(.eyebrow),
.hero-copy > p,
.latest-work__heading > p:not(.eyebrow),
.about-hero-inner > p:not(.eyebrow),
.about-copy > p:not(.eyebrow),
.story-copy > p:not(.eyebrow){
  color:var(--ink) !important;
  font-weight:600 !important;
  font-size:1.14em !important;
  line-height:1.9 !important;
}

/* نصوص الأجسام تبقى مريحة بوضوح عالٍ */
.service-card p,
.process-card p,
.work-card p,
.why-item p,
.review-card p{ color:var(--muted) !important; }

/* ============ 6) لمسات موحّدة بالحبر ============ */
.catalog-price strong,
.process-num{ color:var(--ink) !important; }

.pill{
  background:var(--paper) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--ink) !important;
}
.pill:hover{ border-color:var(--ink) !important; }
.pill.is-active{
  background:var(--sand-strong) !important;
  border-color:var(--sand-strong) !important;
  color:#DBE4FF !important;
  font-weight:700 !important;
}

.work-card__category{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--paper) !important;
  color:var(--ink) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:999px;
  padding:6px 13px;
  font-size:.8rem; font-weight:700;
}

/* ============ 7) الحالات الدلالية — حبر فقط (لا ألوان خارج الهوية) ============ */
#portalShell .cp-item-badge{ background:#110A05 !important; color:#DBE4FF !important; }
#portalShell .cp-status-pill{ color:#110A05 !important; background:rgba(17,10,5,.08) !important; }
#portalShell .cp-payment-pending-note{ color:#110A05 !important; }
#portalShell .cpml-pay-pill.cpml-paid,
#portalShell .cpml-pay-pill.cpml-pending,
#portalShell .cpml-pay-pill.cpml-review,
#portalShell .cpml-pay-pill.cpml-rejected{ color:#110A05 !important; background:rgba(17,10,5,.08) !important; }
#portalShell .cpml-rejection{ color:#110A05 !important; }
#portalShell .cpml-review-done{ color:#110A05 !important; }
.pt-badge-danger{ background:rgba(17,10,5,.08) !important; color:#110A05 !important; }
.pt-step-done .pt-timeline-dot{ color:#DBE4FF !important; }
.cp-quick-badge{ background:#110A05 !important; color:#DBE4FF !important; }
.cp-cd-filled{ color:#110A05 !important; }

/* ============ 8) إبراز ملفات العمل ============ */
.works-carousel{ height:560px; }
.work-card{
  background:var(--paper) !important;
  border:1px solid var(--card-border) !important;
}
.work-card__image{ transition:transform .7s ease; }
.work-card:hover .work-card__image{ transform:scale(1.06); }
.work-card .work-card__content{ padding:20px 22px 22px; }
.work-card:hover .work-card__content{ transform:translateY(-4px); transition:transform .45s ease; }
.work-card .work-card__overlay{ opacity:.25 !important; }

.work-arrow{
  background:var(--paper) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--ink) !important;
}
.work-arrow:hover{ background:var(--paper-2) !important; border-color:var(--ink) !important; }

/* ============ 9) حركة إبداعية خفيفة ============ */

/* مرور متدرّج متأخّر لبطاقات الشبكات عند الدخول */
.services-grid .service-card.in:nth-child(2),
.process-grid .process-card.in:nth-child(2),
.why-grid .why-item.in:nth-child(2),
.reviews-grid .review-card.in:nth-child(2){ transition-delay:.09s; }
.services-grid .service-card.in:nth-child(3),
.process-grid .process-card.in:nth-child(3),
.why-grid .why-item.in:nth-child(3),
.reviews-grid .review-card.in:nth-child(3){ transition-delay:.18s; }
.services-grid .service-card.in:nth-child(4),
.process-grid .process-card.in:nth-child(4),
.why-grid .why-item.in:nth-child(4),
.reviews-grid .review-card.in:nth-child(4){ transition-delay:.27s; }
.services-grid .service-card.in:nth-child(5),
.process-grid .process-card.in:nth-child(5),
.why-grid .why-item.in:nth-child(5),
.reviews-grid .review-card.in:nth-child(5){ transition-delay:.36s; }
.services-grid .service-card.in:nth-child(6),
.process-grid .process-card.in:nth-child(6),
.why-grid .why-item.in:nth-child(6),
.reviews-grid .review-card.in:nth-child(6){ transition-delay:.45s; }

/* نقر خفيف لأيقونة البطاقة عند التحويم */
@keyframes dfBob{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } }
@media (hover:hover){
  .service-card:hover .svc-icon,
  .process-card:hover .svc-icon{ animation:dfBob .5s ease; }
  .service-card:hover,
  .process-card:hover{ transform:translateY(-4px); }
}

/* الأزرار: حركة بسيطة عند الضغط والتحويم */
.btn{ transition:transform .22s ease, background-color .22s ease, border-color .22s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }

/* ============ 10) تركيز وإتاحة — بالحبر ============ */
:focus-visible{
  outline:2px solid var(--sand-strong);
  outline-offset:2px;
}

/* ============ 11) احترام طلب تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce){
  .work-card__image,
  .work-card .work-card__content,
  .service-card:hover .svc-icon,
  .process-card:hover .svc-icon,
  .service-card:hover,
  .process-card:hover,
  .btn,
  .hero-copy h1::after{ animation:none !important; transition:none !important; transform:none !important; }
  .hero-copy h1::after{ transform:scaleX(1) !important; opacity:.35 !important; }
}

/* قفل الهوية ضد أي حقن ألوان وقت التشغيل (الإعدادات/الـJS) —
   لا يمكن لأي لون رابع التسرّب مهما كانت قيم الإعدادات */
:root{ --bg:#C5D8FF !important; --paper:#DBE4FF !important; --paper-2:#DBE4FF !important; --text:#110A05 !important; --body-text:#110A05 !important; --ink:#110A05 !important; --ink-fixed:#110A05 !important; --muted:rgba(17,10,5,.72) !important; --muted-2:rgba(17,10,5,.55) !important; --sand:#DBE4FF !important; --sand-light:#DBE4FF !important; --sand-strong:#110A05 !important; --card-border:rgba(17,10,5,.28) !important; --line:rgba(17,10,5,.22) !important; --line-strong:rgba(17,10,5,.36) !important; }
html.dark-mode{ --bg:#110A05 !important; --paper:rgba(219,228,255,.06) !important; --paper-2:rgba(219,228,255,.09) !important; --text:#DBE4FF !important; --body-text:#DBE4FF !important; --ink:#DBE4FF !important; --ink-fixed:#110A05 !important; --muted:rgba(219,228,255,.7) !important; --muted-2:rgba(219,228,255,.55) !important; --sand:#DBE4FF !important; --sand-light:#110A05 !important; --sand-strong:#110A05 !important; --card-border:rgba(219,228,255,.16) !important; --line:rgba(219,228,255,.12) !important; --line-strong:rgba(219,228,255,.24) !important; }

/* ============ 12) إصلاح تباين بوابات الحسابات داخل صفحة الموقع ============
   في صفحات الموقع العامة: --ink = نص غامق على أسطح فاتحة، --sand = سطح فاتح.
   أما داخل هيكل لوحة التحكم (بوابة العميل والبوابة المشتركة) فيستخدمها
   dashboard.css بالعكس: --ink لونُ النص فوق أسطح الحبر و--sand لونُ سطح
   الحبر نفسه — وهذا التعارض هو ما جعل نص الأزرار النشطة والفقاعات يختفي
   (حبر على حبر). هنا نعيد المعنين الصحيحين داخل المغلف فقط، مع إلزام
   صريح للأسطح التفاعلية + تطبيق الهوية نفسها في الوضعين فاتح/داكن. */
#portalShell, #cpChatPanel, .cp-chat-panel,
body[data-page="client-portal"] .dash-shell,
body[data-page="client-portal"] .dash-shell .sidebar{
  --ink:#DBE4FF !important;
  --ink-fixed:#DBE4FF !important;
  --sand:#110A05 !important;
  --sand-light:#110A05 !important;
  --sand-strong:#110A05 !important;
}
#portalShell .sidebar-nav .tab-btn.is-active,
#portalShell .ic-mode-tabs button.is-active,
#portalShell .notif-bell-btn.is-accent,
#portalShell .user-chip em,
#portalShell .cp-msg.is-mine .cp-msg-bubble,
#cpChatPanel .cp-msg.is-mine .cp-msg-bubble,
.cp-chat-panel .cp-msg.is-mine .cp-msg-bubble{
  background:#110A05 !important;
  color:#DBE4FF !important;
}

/* ============ 13) بساطة وتناغم — أيقونات وأسعار وأزرار وعرض ============

العرض: المحتوى لا يمتد بطرفي الشاشة — تنسيق مريح وموسّط */
.container, .section > .container{ max-width:1120px; }
.hero-grid, .quick-action-inner, .about-grid, .story-grid{ max-width:1180px; }
.section-title{ max-width:560px; margin:0 auto 46px; }

/* خط موحّد واحد للعناوين والفقرات (بطاقة + وصف فقط) */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,summary,label{
  font-family:"IBM Plex Sans Arabic",sans-serif !important;
}

/* أيقونات المحتوى أكبر وأوضح — حبر على لوحة فاتحة ناعمة */
.svc-icon, .mv-icon, .why-icon{
  width:62px !important; height:62px !important; border-radius:19px !important;
  background:rgba(17,10,5,.05) !important; color:#110A05 !important;
  border:1px solid rgba(17,10,5,.18) !important;
  margin-bottom:16px !important;
}
.svc-icon svg, .mv-icon svg, .why-icon svg,
.section-title svg{ stroke-width:2 !important; }
.svc-icon svg{ width:27px !important; height:27px !important; }
.mv-icon svg, .why-icon svg{ width:26px !important; height:26px !important; }
.service-card:hover .svc-icon, .process-card:hover .svc-icon{
  background:#110A05 !important; color:#DBE4FF !important;
  transform:rotate(-5deg) scale(1.06);
}

/* رقم الخطوة — لوحة فاتحة ناعمة بحبر واضح (بلا نقاط متقطعة) */
.process-num{
  background:rgba(17,10,5,.07) !important; color:#110A05 !important;
  border-color:rgba(17,10,5,.22) !important; font-weight:800; font-size:12.5px;
}

/* أيقونة/سعر الخدمات (صفحة الخدمات) أكبر وأوضح */
body[data-page="services"] .catalog-card .svc-icon{ width:74px !important; height:74px !important; border-radius:22px !important; }
body[data-page="services"] .catalog-card .svc-icon svg{ width:33px !important; height:33px !important; }
.catalog-price{ display:flex; align-items:baseline; gap:8px; font-size:14.5px !important; }
.catalog-price strong{ font-size:20px !important; }
.package-price{ font-size:33px !important; }
.package-price span{ font-size:15px !important; }
.pc-pkg-price strong{ font-size:21px !important; }
.pc-item-price{ font-size:15px !important; }

/* أزرار الإجراءات تتميّز: الحبر الغامق بنص فاتح، الثانوية بحر بالحبر */
.btn-sand, .btn-sand-sm{
  background:#110A05 !important; color:#DBE4FF !important;
  border-color:#110A05 !important;
}
.btn-sand{ padding:14px 28px !important; font-size:15px !important; }
.btn-sand:hover, .btn-sand-sm:hover{ background:#110A05 !important; opacity:.93; }
.btn-outline{ border-color:rgba(17,10,5,.4) !important; color:#110A05 !important; background:transparent !important; }
.btn-outline:hover{ background:rgba(17,10,5,.06) !important; }

/* ============ 14) بطاقات "من خدماتنا" بالرئيسية — بأسلوب الباقات ============
   كل بطاقة تتميّز عن أختها (رقم تسلسلي + شريط علوي متناوب + أيقونة
   معكوسة التلوين بالتناوب) بحيث لا تتشابه المربعات كلها، مع موازنة
   الأيقونة في الوسط بدل الالتصاق بالحافة. كل شيء ضمن اللونين فقط
   (#110A05/#DBE4FF). */
#servicesGrid .service-card{
  counter-increment:svc-card;
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:38px;
  border-radius:22px !important;
}
#servicesGrid{ counter-reset:svc-card; }
/* رقم تسلسلي — شارة حبر صغيرة أعلى كل بطاقة (مثل رقم الباقة) */
#servicesGrid .service-card::before{
  content:"0" counter(svc-card);
  position:absolute; top:14px; inset-inline-end:16px;
  font-size:11.5px; font-weight:800; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px;
  background:#110A05; color:#DBE4FF;
}
/* شريط علوي متناوب يميّز البطاقات: نصفها بشريط حبر سفلي ناعم تحت العنوان
   حتى تبدو كلها مرتبة لكن غير متكررة الشكل تمامًا */
#servicesGrid .service-card:nth-child(even)::after{
  content:""; position:absolute; top:0; inset-inline:0;
  height:4px; border-radius:22px 22px 0 0;
  background:#110A05; opacity:.85;
}
#servicesGrid .service-card:nth-child(odd)::after{
  content:""; position:absolute; top:0; inset-inline:0;
  height:4px; border-radius:22px 22px 0 0;
  background:#110A05; opacity:.28;
}
/* الأيقونة متوازنة في الوسط — بلا التصاق بالحافة وبلا تشويه */
#servicesGrid .service-card .svc-icon{
  margin-inline:auto; margin-bottom:18px;
  width:74px !important; height:74px !important; border-radius:22px !important;
}
#servicesGrid .service-card .svc-icon svg{ width:32px !important; height:32px !important; }
/* تناوب تلوين الأيقونة بين البطاقات (حبر ↔ فاتح) — تمييز إضافي */
#servicesGrid .service-card:nth-child(even) .svc-icon{
  background:#110A05 !important; color:#DBE4FF !important;
  border-color:#110A05 !important;
}
#servicesGrid .service-card:nth-child(even) .svc-icon svg{ color:#DBE4FF; }
#servicesGrid .service-card:nth-child(odd) .svc-icon{
  background:rgba(17,10,5,.06) !important; color:#110A05 !important;
  border:1px solid rgba(17,10,5,.18) !important;
}
#servicesGrid .service-card h3{ margin-top:2px; }
#servicesGrid .service-card p{ max-width:280px; }

/* ============ 15) إصلاح الوضع الداكن للمكوّنات ذات الألوان الثابتة ============
   في الداكن الخلفية حبر غامق والنصوص لؤلؤية؛ كل ما كان مُجمّدًا بألوان
   الحبر/الفاتح الثابتة (مثل الأيقونات والأزرار والأرقام) يُعكس هنا حتى
   يبقى واضحًا ومقروءًا على الأسطح الداكنة. */
html.dark-mode{
  /* أيقونات المحتوى: لوحة لؤلؤية شفافة بأيقونة لؤلؤية بدل الفاتح */
  --svc-tint:rgba(219,228,255,.12);
}
html.dark-mode .svc-icon,
html.dark-mode .mv-icon,
html.dark-mode .why-icon{
  background:rgba(219,228,255,.12) !important;
  color:#DBE4FF !important;
  border:1px solid rgba(219,228,255,.26) !important;
}
html.dark-mode .svc-icon svg,
html.dark-mode .mv-icon svg,
html.dark-mode .why-icon svg{ color:#DBE4FF !important; }
html.dark-mode .service-card:hover .svc-icon,
html.dark-mode .process-card:hover .svc-icon{
  background:#DBE4FF !important; color:#110A05 !important;
}
html.dark-mode .process-num{
  background:rgba(219,228,255,.1) !important; color:#DBE4FF !important;
  border-color:rgba(219,228,255,.24) !important;
}
html.dark-mode .catalog-price strong,
html.dark-mode .service-card h3,
html.dark-mode .process-card h3,
html.dark-mode .why-item h3,
html.dark-mode .reason-card h3,
html.dark-mode .about-stat-box{ color:#DBE4FF !important; }
html.dark-mode .btn-outline{
  border-color:rgba(219,228,255,.4) !important; color:#DBE4FF !important;
  background:transparent !important;
}
html.dark-mode .btn-outline:hover{ background:rgba(219,228,255,.08) !important; }
html.dark-mode .pill.is-active{
  background:#DBE4FF !important; color:#110A05 !important;
  border-color:#DBE4FF !important;
}
html.dark-mode .hero-copy h1::after{ background:#DBE4FF !important; }
html.dark-mode .cta-eyebrow{ background:#DBE4FF !important; color:#110A05 !important; }
html.dark-mode .cta-eyebrow::before{ color:#110A05 !important; }
html.dark-mode .work-arrow{
  background:rgba(219,228,255,.06) !important;
  border-color:rgba(219,228,255,.3) !important;
  color:#DBE4FF !important;
}
html.dark-mode .work-arrow:hover{
  background:#DBE4FF !important; border-color:#DBE4FF !important; color:#110A05 !important;
}
html.dark-mode .section-label{ color:#DBE4FF !important; }
html.dark-mode .section-label::before{ background:#DBE4FF; }
/* بطاقات "من خدماتنا" بالداكن — الجذر الفاتح للأيقونات والمجسمات */
html.dark-mode #servicesGrid .service-card::before{
  background:#DBE4FF !important; color:#110A05 !important;
}
html.dark-mode #servicesGrid .service-card:nth-child(even)::after{ background:#DBE4FF !important; opacity:.85; }
html.dark-mode #servicesGrid .service-card:nth-child(odd)::after{ background:#DBE4FF !important; opacity:.3; }
html.dark-mode #servicesGrid .service-card:nth-child(even) .svc-icon{
  background:#DBE4FF !important; color:#110A05 !important;
  border-color:#DBE4FF !important;
}
html.dark-mode #servicesGrid .service-card:nth-child(even) .svc-icon svg{ color:#110A05 !important; }
html.dark-mode #servicesGrid .service-card:nth-child(odd) .svc-icon{
  background:rgba(219,228,255,.12) !important; color:#DBE4FF !important;
  border:1px solid rgba(219,228,255,.26) !important;
}
html.dark-mode #servicesGrid .service-card:nth-child(odd) .svc-icon svg{ color:#DBE4FF !important; }
/* ============ 16) قسم "عندك سؤال؟" — مسارات الباقات + نسخة الباقات للرئيسية + عداد CTA ============
       مسارات الباقات (أساسية/احترافية/مميزة) بخط ونقاط مرقمة، والوسطى = الأكثر طلبًا؛
       نسخة الباقات بنفس أسلوب packages.html، وعداد الأعمال بشريط الدعوة. ألوان --ink/--paper تتبع التبديل الفاتح/الداكن تلقائيًا. */

/* --- مسارات الباقات: خط الرابط + النقاط المرقمة (وسطها "الأكثر طلبًا") --- */
.faq-paths{
  position:relative; display:flex; justify-content:space-between; gap:14px;
  margin:0 auto 42px; max-width:860px; padding-top:6px;
}
.faq-path-rail{
  position:absolute; top:32px; left:11%; right:11%; height:2px;
  background:rgba(17,10,5,.18); pointer-events:none;
}
.faq-path-node{
  position:relative; flex:1; min-width:0; text-align:center;
  padding:8px 10px 0;
}
.faq-path-node__step{
  position:relative; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
  background:#110A05; color:#DBE4FF; font-weight:800; font-size:15px;
  border:3px solid var(--bg);
}
.faq-path-node h4{ margin:0 0 4px; font-size:16px; font-weight:800; color:var(--ink); }
.faq-path-node p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--muted); }
.faq-path-node.is-mid .faq-path-node__step{
  width:52px; height:52px; font-size:17px;
  background:#DBE4FF; color:#110A05; border-color:#DBE4FF;
  box-shadow:0 8px 20px -6px rgba(219,228,255,.7);
}
.faq-path-node.is-mid{ transform:translateY(-4px); }
.faq-path-node__badge{
  position:absolute; top:-12px; inset-inline:0; margin-inline:auto; width:fit-content;
  background:#DBE4FF; color:#110A05; font-size:11px; font-weight:800;
  padding:4px 12px; border-radius:999px; z-index:3;
}
@media (max-width:680px){
  .faq-paths{ gap:6px; margin-bottom:30px; }
  .faq-path-rail{ top:26px; }
  .faq-path-node__step{ width:36px; height:36px; font-size:13px; border-width:2px; }
  .faq-path-node.is-mid .faq-path-node__step{ width:42px; height:42px; font-size:15px; }
  .faq-path-node h4{ font-size:14px; }
  .faq-path-node p{ font-size:11.5px; }
}
html.dark-mode .faq-path-rail{ background:rgba(219,228,255,.22); }
html.dark-mode .faq-path-node__step{ border-color:#110A05; }
html.dark-mode .faq-path-node.is-mid .faq-path-node__step{ border-color:#DBE4FF; }

/* --- أسئلة شائعة للرئيسية: صناديق إبداعية بدائرة +/− --- */
.faq-list--home{ max-width:700px; margin-inline:auto; }
.faq-list--home .faq-item{
  background:var(--paper-2); border:1px solid var(--card-border);
  border-radius:18px; padding:16px 20px; cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.faq-list--home .faq-item[open]{ border-color:var(--sand-strong); }
.faq-list--home .faq-item summary{ font-size:15px; }
.faq-list--home .faq-item summary::after{
  width:26px; height:26px; border-radius:50%;
  background:#110A05; color:#DBE4FF;
  display:grid; place-items:center; content:'+'; font-size:16px; line-height:1;
}
.faq-list--home .faq-item[open] summary::after{ content:'−'; }
html.dark-mode .faq-list--home .faq-item summary::after{ background:#DBE4FF; color:#110A05; }

/* --- نسخة الباقات للرئيسية (بطاقات مثل packages.html) --- */
.hp-packages{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-bottom:30px; }
.hp-packages:empty{ min-height:150px; }
.hp-pkg-card .hp-pkg-open{ width:100%; justify-content:center; margin-top:auto; }
.hp-packages-cta{ text-align:center; }
.hp-pkg-card.is-popular{ background:var(--paper) !important; }

/* --- عداد إحصائيات شريط الدعوة (عدد الأعمال) --- */
.cta-stats{ display:flex; align-items:stretch; gap:10px; margin-top:20px; flex-wrap:wrap; }
.cta-stat{
  display:flex; align-items:baseline; gap:8px;
  background:rgba(219,228,255,.1); border:1px solid rgba(219,228,255,.28);
  border-radius:999px; padding:10px 20px;
}
.cta-stat strong{ font-size:30px; font-weight:800; color:#DBE4FF; line-height:1; }
.cta-stat span{ font-size:13px; font-weight:600; color:#C5D8FF; }




/* ============ 17) فرض الوضع الداكن — كل الخلفيات لون غامق واحد والنصوص فاتحة بكل الموقع ============
   الوضع الداكن يقلب الموقع بالكامل إلى سطح واحد (#110A05) وحبر فاتح (#DBE4FF): أي
   عنصر/حقل/جدول/لوحة لم تصل إليه الكتل السابقة يُجبر هنا بأولوية قصوى (آخر تحميل
   بأعلى خصوصية +)!important)، فيتفوق على أي لون من لوحة التحكم في الوضع الداكن.
   الوضع الفاتح يظل خاضعًا بالكامل لإعدادات لوحة التحكم كما هو — القيد داكن فقط. */
html.dark-mode{ color-scheme:dark; --bg:#110A05 !important; --paper:#110A05 !important; --paper-2:rgba(219,228,255,.05) !important; --ink:#DBE4FF !important; --ink-fixed:#110A05 !important; --text:#DBE4FF !important; --body-text:#DBE4FF !important; --muted:rgba(219,228,255,.78) !important; --muted-2:rgba(219,228,255,.62) !important; --card-border:rgba(219,228,255,.18) !important; --line:rgba(219,228,255,.13) !important; --line-strong:rgba(219,228,255,.26) !important; --sand:#DBE4FF !important; --sand-strong:#110A05 !important; --sand-light:#DBE4FF !important; --dark:#110A05 !important; --dark-2:#110A05 !important; }
html.dark-mode,
html.dark-mode body{ background-color:#110A05 !important; color:#DBE4FF !important; }
html.dark-mode .hero,
html.dark-mode .site-footer,
html.dark-mode .msg-panel,
html.dark-mode .messages-toggle,
html.dark-mode .toast,
html.dark-mode .lightbox,
html.dark-mode .popup-overlay,
html.dark-mode .popup-box{ background-color:#110A05 !important; }

/* كل الأقسام والصناديق: سطح غامق واحد — والفصل بالحدود فقط */
html.dark-mode section[id]:not(#__shiary_dark),
html.dark-mode article,
html.dark-mode aside,
html.dark-mode fieldset,
html.dark-mode .card,
html.dark-mode .service-card,
html.dark-mode .fs-card,
html.dark-mode .why-item,
html.dark-mode .work-card,
html.dark-mode .mv-card,
html.dark-mode .process-card,
html.dark-mode .reason-card,
html.dark-mode .form-card,
html.dark-mode .project-card,
html.dark-mode .story-quote,
html.dark-mode .about-plate,
html.dark-mode .about-stat-box,
html.dark-mode .contact-card-dark,
html.dark-mode .ticket-card,
html.dark-mode .faq-item,
html.dark-mode .pt-card,
html.dark-mode .pc-card,
html.dark-mode .pc-pkg-card,
html.dark-mode .review-card,
html.dark-mode .notfound-card,
html.dark-mode .order-tracking-bar,
html.dark-mode .careers-track-result,
html.dark-mode .quick-action-bar,
html.dark-mode .cta-stats,
html.dark-mode .cta-stat{ background-color:#110A05 !important; color:#DBE4FF !important; }

/* الحواف الفاصلة فقط على الأسطح الغامقة */
html.dark-mode section[id]:not(#__shiary_dark),
html.dark-mode .card,
html.dark-mode .service-card,
html.dark-mode .fs-card,
html.dark-mode .why-item,
html.dark-mode .work-card,
html.dark-mode .mv-card,
html.dark-mode .process-card,
html.dark-mode .reason-card,
html.dark-mode .form-card,
html.dark-mode .project-card,
html.dark-mode .story-quote,
html.dark-mode .about-plate,
html.dark-mode .about-stat-box,
html.dark-mode .ticket-card,
html.dark-mode .faq-item,
html.dark-mode .pt-card,
html.dark-mode .pc-card,
html.dark-mode .pc-pkg-card,
html.dark-mode .review-card,
html.dark-mode .notfound-card,
html.dark-mode .order-tracking-bar,
html.dark-mode .careers-track-result,
html.dark-mode .quick-action-bar{ border-color:rgba(219,228,255,.16) !important; }

/* النصوص: فاتحة في كل مكان */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .section-title,
html.dark-mode .section-label,
html.dark-mode .eyebrow,
html.dark-mode .catalog-price strong,
html.dark-mode .notfound-title,
html.dark-mode .pt-card h1{ color:#DBE4FF !important; }
html.dark-mode p:not(.eyebrow),
html.dark-mode li,
html.dark-mode dd,
html.dark-mode dt,
html.dark-mode label,
html.dark-mode small,
html.dark-mode figcaption,
html.dark-mode blockquote,
html.dark-mode td,
html.dark-mode th,
html.dark-mode .notfound-text,
html.dark-mode .pt-client,
html.dark-mode .pt-order-number{ color:rgba(219,228,255,.88) !important; }
html.dark-mode strong,
html.dark-mode b{ color:#DBE4FF !important; }
html.dark-mode a:not(.btn):not(.btn-sand):not(.btn-sand-sm):not(.btn-outline):not(.fab-whatsapp):not(.fab-call):not(.fab-message){ color:#DBE4FF !important; }
html.dark-mode a:not(.btn):not(.btn-sand):not(.btn-sand-sm):not(.btn-outline):not(.fab-whatsapp):not(.fab-call):not(.fab-message):hover{ color:rgba(219,228,255,.8) !important; }

/* الحقول والقوائم والجداول */
html.dark-mode ::placeholder{ color:rgba(219,228,255,.5) !important; }
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea{
  background-color:rgba(219,228,255,.06) !important;
  color:#DBE4FF !important;
  border-color:rgba(219,228,255,.28) !important;
}
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus{ border-color:rgba(219,228,255,.55) !important; }
html.dark-mode hr{ border-color:rgba(219,228,255,.16) !important; }
html.dark-mode table,
html.dark-mode tr,
html.dark-mode td,
html.dark-mode th{ border-color:rgba(219,228,255,.16) !important; }
html.dark-mode ::selection{ background:#DBE4FF !important; color:#110A05 !important; }

/* ============ 17b) بنر الدعوة — توحيد مع الوضع الداكن وكشف الوسائط ============
   الوضع الداكن: سطح موحّد #110A05 مهما كان لون اللوحة (يظل للوحة سلطته في
   الفاتح عبر --cta-bar-bg). والوسائط (صورة/فيديو/صورة متحركة) تُحفظ تحتها
   طبقة تعتيم خفيفة لبقاء النصوص الفاتحة مقروءة. */
html.dark-mode .cta-band-inner{ background:#110A05 !important; }
html.dark-mode .cta-band-inner .shiary-cta-scrim{ background:linear-gradient(rgba(17,10,5,.36), rgba(17,10,5,.55)); }
.shiary-cta-scrim{
  position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(17,10,5,.36), rgba(17,10,5,.55));
}
img#shiary-cta-media{ width:100%; height:100%; object-fit:cover; display:block; }

/* أزرار تبويب/بوابات الاستعلام والحسابات في الوضع الداكن: بطاقات زجاجية
   داكنة تنسجم مع السطح الغامق، والنشط فاتح بنص غامق (عكس الافتراضي). */
html.dark-mode .client-auth-tab{ background:rgba(219,228,255,.06); border-color:rgba(219,228,255,.2); color:#DBE4FF; }
html.dark-mode .client-auth-tab::before{ background:rgba(219,228,255,.45); }
html.dark-mode .client-auth-tab:not(.is-active):hover{ border-color:rgba(219,228,255,.45); background:rgba(219,228,255,.1); }
html.dark-mode .client-auth-tab.is-active{ background:#DBE4FF; border-color:#DBE4FF; color:#110A05; box-shadow:0 12px 26px rgba(0,0,0,.35); }
html.dark-mode .client-auth-tab.is-active::before{ background:#110A05; }

/* ============ 17c) قسم الخدمات بالرئيسية — عرض تصاعدي مثل "أحدث الأعمال" ============
   بطاقات الخدمات (عنوانها "من الفكرة الأولى إلى التطبيق النهائي") تظهر في صف
   واحد بتدرّج تصاعدي: الوسط هو الأكبر والتي تليها يمينًا ويسارًا أصغر تدريجيًا —
   بدل الصف المسطّح "صورة جنب صورة". وأُزيل الشريط (الخط) العلوي من كل بطاقة. */
#servicesGrid{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 1.6vw, 18px); counter-reset:svc-card;
}
#servicesGrid .service-card{ flex:0 1 auto; width:min(300px, 23vw); }
#servicesGrid .service-card:nth-child(1){ transform:scale(.78); }
#servicesGrid .service-card:nth-child(2){ transform:scale(.92); }
#servicesGrid .service-card:nth-child(3){ transform:scale(1.06); margin-block:8px; }
#servicesGrid .service-card:nth-child(4){ transform:scale(.92); }
#servicesGrid .service-card:nth-child(5){ transform:scale(.78); }
/* إزالة الشريط (الخط) العلوي للبطاقات كاملًا */
#servicesGrid .service-card:nth-child(even)::after,
#servicesGrid .service-card:nth-child(odd)::after{ display:none !important; }
/* على الشاشات التي لا تتسع: تمرير أفقي مع التثبيت على المركز */
@media (max-width:900px){
  #servicesGrid{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:10px; }
  #servicesGrid .service-card{ flex:0 0 min(74vw, 300px); scroll-snap-align:center; }
  #servicesGrid .service-card:nth-child(3){ margin-block:8px; }
}

/* ============ 17d) الخدمات بالرئيسية — دوران تلقائي تصاعدي (بدل شريط التمرير) ============
   تُدار بواسطة cms-connector.js كل 3.4ث: الوسط الأكبر والجوانب أصغر تدريجيًا،
   بلا شريط تمرير إطلاقًا، العنوان كبير والمحتوى صغير، ومتناسقة مع الجوال. */
#servicesGrid{ position:relative; display:block; height:clamp(340px, 40vw, 470px); overflow:hidden; counter-reset:svc-card; }
#servicesGrid .service-card{
  position:absolute; top:50%; left:50%;
  width:min(300px, 30vw);
  height:clamp(215px, 21vw, 310px);
  justify-content:center;
  box-sizing:border-box;
  will-change:transform, opacity;
  transition:transform .75s cubic-bezier(.22,.61,.36,1), opacity .75s ease, box-shadow .75s ease;
}
#servicesGrid .service-card h3{ font-size:clamp(21px, 2.4vw, 30px) !important; line-height:1.25 !important; }
#servicesGrid .service-card p{ font-size:13.5px !important; line-height:1.7 !important; max-width:230px; }
@media (max-width:760px){
  #servicesGrid{ height:clamp(320px, 80vw, 420px); }
  #servicesGrid .service-card{ width:min(250px, 64vw); }
}

/* ============ 17e) صفحة بوابة الدخول — بلا مربع في الخلفية، النص بلون الهوية ============
   على client-login.html فقط: شريحة العنوان ولوحة التعريف التي بجوار بطاقة
   الدخول بلا خلفية صندوق، مندمجتان في خلفية الصفحة الطبيعية، والنصوص بحبر
   الهوية (#110A05 فاتح / #DBE4FF غامق). إضاءة الألوان تتحول تلقائيًا مع
   متغيرات الوضع الداكن (قسم 17 أعلاه يقلب --ink/--muted/--text). */
body[data-page="client-login"] #contact-hero{
  background:transparent; padding:64px 0 20px;
}
body[data-page="client-login"] #contact-hero h1{ color:var(--ink); }
body[data-page="client-login"] #contact-hero .eyebrow,
body[data-page="client-login"] .auth-brand-eyebrow{
  background:rgba(35,21,14,.06); border-color:rgba(35,21,14,.18);
}
html.dark-mode body[data-page="client-login"] #contact-hero .eyebrow,
html.dark-mode body[data-page="client-login"] .auth-brand-eyebrow{
  background:rgba(219,228,255,.1); border-color:rgba(219,228,255,.28);
}
body[data-page="client-login"] .auth-brand-panel{
  background:transparent; border:0; border-radius:0;
  padding:0; min-height:0; color:var(--ink);
}
body[data-page="client-login"] .auth-brand-inner{ max-width:440px; }
body[data-page="client-login"] .auth-brand-badge{
  color:var(--ink); background:rgba(35,21,14,.06); border-color:rgba(35,21,14,.18);
}
html.dark-mode body[data-page="client-login"] .auth-brand-badge{
  color:var(--ink); background:rgba(219,228,255,.1); border-color:rgba(219,228,255,.3);
}
body[data-page="client-login"] .auth-brand-panel h2{ color:var(--ink); }
body[data-page="client-login"] .auth-brand-panel > .auth-brand-inner > p{ color:var(--muted); }
body[data-page="client-login"] .auth-brand-features li{ color:var(--text); }
body[data-page="client-login"] .auth-brand-features svg{ color:var(--ink); }
/* شعار النشاط فوق بطاقة تسجيل الدخول — يظهر افتراضيًا ويُستبدل من
   إعدادات اللوحة إن رُفع شعار مخصص (عبر cms-connector). */
.auth-card-logo{
  display:block; margin:0 auto 22px; max-height:58px; max-width:210px;
  width:auto; object-fit:contain;
}
html.dark-mode .auth-card-logo{ filter:brightness(0) invert(1); opacity:.95; }

/* ============ 17f) الهوية بلا صندوق — شريط «ابدأ قصتك» + بطاقة «شِعاري» + زرا الاستعلام ============
   المحتوى يبقى في مكانه كما هو، لكن الخلفية الصندوقية تُزال ويُعاد تأليفه
   بلون الهوية: النصوص بحبر (#110A05 فاتح / #DBE4FF غامق) تتحول تلقائيًا عبر
   متغيرات الوضع الداكن (قسم 17). الاستثناء: عندما يرفع المالك صورة/فيديو
   لخلفية الشريط تبقى حالته الحالية كما هي. */

/* ---- شريط CTA «ابدأ قصتك» بلا صندوق (كل الصفحات، الوضع الافتراضي فقط) ---- */
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]),
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background:transparent !important; box-shadow:none !important;
  border-radius:0 !important; padding-inline:0 !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before{
  display:block !important;
  background:
    radial-gradient(560px 300px at 84% -18%, rgba(219,228,255,.9), transparent 70%),
    repeating-linear-gradient(55deg, var(--line) 0 1px, transparent 1px 46px);
  opacity:.55; animation:ctaFlow 30s linear infinite;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before{
  background:
    radial-gradient(560px 300px at 84% -18%, rgba(219,228,255,.1), transparent 70%),
    repeating-linear-gradient(55deg, rgba(219,228,255,.06) 0 1px, transparent 1px 46px);
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after{
  display:block !important; content:""; position:absolute; inset:auto auto -26px -26px;
  width:72px; height:72px; border-radius:20px; z-index:0; pointer-events:none; opacity:.55;
  border:2px solid var(--line-strong); transform:rotate(14deg);
  background:repeating-linear-gradient(45deg, transparent 0 8px, var(--line) 8px 9px);
  animation:none;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after{
  border-color:rgba(219,228,255,.2);
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) h3{ color:var(--ink) !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) p{ color:var(--muted) !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow{
  background:var(--paper) !important; color:var(--ink) !important;
  border:1px solid var(--line-strong) !important; box-shadow:none !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow::before{ color:var(--ink) !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn{
  background:var(--ink) !important; border-color:var(--ink) !important;
  color:#F7FAFF !important; box-shadow:none !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn{ color:#110A05 !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost{
  background:var(--paper-2) !important; border-color:var(--line-strong) !important; color:var(--ink) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn:hover{ transform:translateY(-3px); }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost:hover{ background:var(--paper) !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn .ripple{ background:rgba(219,228,255,.3); }

/* ---- بطاقة التواصل «شِعاري» بلا صندوق (صفحة النشاط) — المحتوى مكانه ---- */
body[data-page="about"] .contact-card-dark{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:6px 4px 0 !important;
}
body[data-page="about"] .contact-card-logo{ height:64px; margin-bottom:14px; }
body[data-page="about"] .contact-card-dark h3{ color:var(--ink) !important; }
body[data-page="about"] .contact-dark-desc{ color:var(--muted) !important; }
body[data-page="about"] .contact-dark-sub,
body[data-page="about"] .contact-socials-tagline{ color:var(--muted) !important; border-color:var(--line) !important; }
body[data-page="about"] .contact-list li{ color:var(--text) !important; }
body[data-page="about"] .contact-list svg{ color:var(--ink) !important; }
body[data-page="about"] .contact-phone-link:hover{ color:var(--ink) !important; }
body[data-page="about"] .tagline-link{ color:var(--ink) !important; }
body[data-page="about"] .tagline-link:hover{ color:var(--ink) !important; opacity:.75; }

/* ---- زرا الاستعلام: بطاقتان إبداعيتان متوازنتان بأيقونة وعنوان ووصف وسهم ---- */
body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:26px;
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  justify-content:flex-start; gap:14px; padding:18px 18px; border-radius:18px;
  background:var(--paper); border:1.5px solid var(--line-strong);
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab::before{ display:none; }
body[data-page="inquiry"] .client-auth-tab__ic{
  flex-shrink:0; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sand); color:var(--ink-fixed);
  border:1px solid rgba(35,21,14,.14);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
body[data-page="inquiry"] .client-auth-tab__t{ display:flex; flex-direction:column; min-width:0; text-align:start; }
body[data-page="inquiry"] .client-auth-tab__title{ font-weight:800; font-size:15.5px; line-height:1.3; }
body[data-page="inquiry"] .client-auth-tab__sub{ font-size:12px; color:var(--muted); margin-top:2px; }
body[data-page="inquiry"] .client-auth-tab__arr{
  margin-inline-start:auto; flex-shrink:0; color:var(--muted);
  transition:transform .2s ease, color .2s ease;
}
body[data-page="inquiry"] .client-auth-tab:not(.is-active):hover .client-auth-tab__arr{ transform:translateX(-4px); color:var(--ink); }
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active{
  background:var(--ink); border-color:var(--ink); color:#F7FAFF;
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__ic{
  background:rgba(219,228,255,.14); color:#F7FAFF; border-color:transparent;
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__sub{ color:rgba(219,228,255,.72); }
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__arr{ color:#F7FAFF; }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  background:rgba(219,228,255,.06); border-color:rgba(219,228,255,.2);
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab__ic{
  background:rgba(219,228,255,.1); color:#DBE4FF; border-color:transparent;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active{
  background:#DBE4FF; border-color:#DBE4FF; color:#110A05;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__ic{
  background:rgba(17,10,5,.12); color:#110A05;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__sub{ color:rgba(17,10,5,.66); }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__arr{ color:#110A05; }
@media (max-width:560px){
  body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{ grid-template-columns:1fr; }
}

/* 17g) Fixes: CTA band visible+working, inquiry buttons compact, contact card clear,
        login portal data bigger and clearer. */

/* ---- CTA band (default state): visible colored background + colors + working button ---- */
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) {
  background: var(--cta-bar-bg, #110A05) !important;
  border: 1px solid rgba(219, 228, 255, .16) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  padding: clamp(30px, 4.2vw, 52px) clamp(22px, 3.2vw, 42px) !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) {
  background: #110A05 !important;
  border-color: rgba(219, 228, 255, .14) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) h3 {
  color: #DBE4FF !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) p {
  color: #C5D8FF !important;
  opacity: 1 !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow {
  background: rgba(219, 228, 255, .1) !important;
  border: 1px solid rgba(219, 228, 255, .28) !important;
  color: #DBE4FF !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn {
  background: #DBE4FF !important;
  color: #110A05 !important;
  border: 1px solid rgba(17, 10, 5, .06) !important;
  min-width: 190px !important;
  padding: 16px 28px !important;
  justify-content: center !important;
  transition: transform .22s ease, background .22s ease !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn:hover {
  background: #C5D8FF !important;
  transform: translateY(-3px) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost {
  background: rgba(219, 228, 255, .08) !important;
  color: #DBE4FF !important;
  border: 1px solid rgba(219, 228, 255, .42) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost:hover {
  background: #DBE4FF !important;
  color: #110A05 !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .ripple {
  background: rgba(255, 255, 255, .38) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before {
  display: block !important;
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(60% 130% at 90% -20%, rgba(219, 228, 255, .22), transparent 62%),
    repeating-linear-gradient(112deg, rgba(219, 228, 255, .045) 0 1px, transparent 1px 14px);
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after {
  display: block !important;
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
  inset: auto auto -38px -38px;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 1px solid rgba(219, 228, 255, .22);
  background: rgba(219, 228, 255, .05);
  transform: rotate(45deg);
}

/* ---- Inquiry action buttons: short, balanced ---- */
body[data-page="inquiry"] .client-auth-tabs {
  gap: 14px !important;
}
body[data-page="inquiry"] .client-auth-tab {
  min-height: 0 !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  gap: 12px !important;
  align-items: center !important;
}
body[data-page="inquiry"] .client-auth-tab__ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  flex: 0 0 auto !important;
}
body[data-page="inquiry"] .client-auth-tab__ic svg {
  width: 19px !important;
  height: 19px !important;
}
body[data-page="inquiry"] .client-auth-tab__title {
  font-size: 14.5px !important;
  line-height: 1.4 !important;
}
body[data-page="inquiry"] .client-auth-tab__sub {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  margin-top: 3px !important;
}
body[data-page="inquiry"] .client-auth-tab__arr {
  width: 22px !important;
  height: 22px !important;
  opacity: .65 !important;
}
@media (max-width: 560px) {
  body[data-page="inquiry"] .client-auth-tab { padding: 12px 13px !important; }
}

/* ---- Service cards: text always visible ---- */
#servicesGrid .service-card h3 {
  white-space: normal !important;
  overflow: visible !important;
}
#servicesGrid .service-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Shiary contact card: clear readable identity card ---- */
body[data-page="about"] .contact-card-dark {
  background: #F7FAFF !important;
  border: 1px solid #DDE5F2 !important;
  border-radius: 20px !important;
  padding: 34px 30px !important;
  box-shadow: none !important;
}
html.dark-mode body[data-page="about"] .contact-card-dark {
  background: rgba(219, 228, 255, .05) !important;
  border-color: rgba(219, 228, 255, .15) !important;
}
body[data-page="about"] .contact-card-dark .contact-card-logo {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 18px !important;
}
body[data-page="about"] .contact-card-dark h3 {
  color: var(--ink) !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
}
body[data-page="about"] .contact-card-dark .contact-dark-desc {
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 2 !important;
}
body[data-page="about"] .contact-card-dark .contact-list {
  gap: 12px !important;
}
body[data-page="about"] .contact-card-dark .contact-list li {
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  gap: 10px !important;
}
body[data-page="about"] .contact-card-dark .contact-list a {
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(17, 10, 5, .3) !important;
}
body[data-page="about"] .contact-card-dark .contact-socials-tagline {
  color: var(--muted) !important;
  font-size: 14px !important;
}
body[data-page="about"] .contact-card-dark .tagline-link {
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- Login portal data: bigger, clearer, arranged ---- */
body[data-page="client-login"] .auth-brand-badge {
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  margin-bottom: 24px !important;
}
body[data-page="client-login"] .auth-brand-panel h2 {
  font-size: clamp(30px, 3.1vw, 40px) !important;
  line-height: 1.35 !important;
  margin: 0 0 16px !important;
}
body[data-page="client-login"] .auth-brand-panel .auth-brand-inner > p:not(.auth-brand-eyebrow) {
  font-size: 17px !important;
  line-height: 2.05 !important;
  max-width: 470px !important;
}
body[data-page="client-login"] .auth-brand-features {
  gap: 18px !important;
  margin-top: 28px !important;
}
body[data-page="client-login"] .auth-brand-features li {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  gap: 13px !important;
}
body[data-page="client-login"] .auth-brand-eyebrow {
  font-size: 13.5px !important;
  letter-spacing: .06em !important;
}
body[data-page="client-login"] .client-auth-card {
  padding: 36px 30px !important;
}
body[data-page="client-login"] .client-auth-card label {
  font-size: 14px !important;
}
body[data-page="client-login"] .client-auth-card input {
  font-size: 16px !important;
  padding: 14px 16px !important;
}

/* ---- Login portal: "what your account manages" block + signup CTA ---- */
body[data-page="client-login"] .auth-brand-more{
  margin-top: 32px !important;
  padding-top: 26px !important;
  border-top: 1px solid rgba(35,21,14,.12);
}
html.dark-mode body[data-page="client-login"] .auth-brand-more{
  border-top-color: rgba(219,228,255,.2);
}
body[data-page="client-login"] .auth-brand-more h3{
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
  line-height: 1.45 !important;
}
body[data-page="client-login"] .auth-brand-manage{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px;
}
body[data-page="client-login"] .auth-brand-manage li{
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; font-weight: 600; line-height: 1.8; color: var(--ink);
}
body[data-page="client-login"] .auth-brand-manage svg{
  color: var(--ink); flex-shrink: 0; margin-top: 4px;
}
body[data-page="client-login"] .auth-brand-more-cta{
  margin-top: 24px !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 18px;
  border: 1px solid rgba(35,21,14,.14); border-radius: 16px;
  background: rgba(35,21,14,.04);
}
html.dark-mode body[data-page="client-login"] .auth-brand-more-cta{
  border-color: rgba(219,228,255,.22);
  background: rgba(219,228,255,.07);
}
body[data-page="client-login"] .auth-brand-more-cta p{
  margin: 0 !important; font-size: 13.5px; line-height: 1.8; color: var(--ink);
  max-width: 300px;
}
body[data-page="client-login"] .auth-brand-more-cta .btn{
  margin: 0 !important; white-space: nowrap;
}
/* The CTA inside the brand panel: light pearl fill + unified dark text —
   overrides the site-wide dark .btn-sand (white text) so nothing stays white. */
body[data-page="client-login"] .auth-brand-more-cta .btn-sand,
body[data-page="client-login"] .auth-brand-more-cta .btn-sand:hover{
  background:#DBE4FF !important;
  color:#110A05 !important;
  border-color:#110A05 !important;
  box-shadow:none !important;
}
@media (max-width:520px){
  body[data-page="client-login"] .auth-brand-more-cta{ align-items: stretch; flex-direction: column; }
  body[data-page="client-login"] .auth-brand-more-cta .btn{ width: 100%; }
}

/* ---- Login portal: centered logo + unified dark text ----
   الشعار فوق المحتوى يتوسّط، وجميع نصوص اللوحة (العنوان وصف الثغور ونقاط
   الإدارة والشريط التحفيزي) موحّدة باللون الغامق (--ink) — خط متجانس أوضح. */
body[data-page="client-login"] .portal-brand-logo{
  display:block !important; margin:0 auto 22px !important;
}
body[data-page="client-login"] .auth-brand-eyebrow{
  display:flex !important; justify-content:center !important;
  width:fit-content !important; margin:0 auto 16px !important; color:var(--ink) !important;
}
body[data-page="client-login"] .auth-brand-panel h2{ color:var(--ink) !important; }
body[data-page="client-login"] .auth-brand-panel > .auth-brand-inner > p{ color:var(--ink) !important; }
body[data-page="client-login"] .auth-brand-features li{ color:var(--ink) !important; }
body[data-page="client-login"] .auth-brand-features svg{ color:var(--ink) !important; }

/* ---- Login portal: hollow box at the same level as the login card ----
   اللوحة الإبداعية تصبح «مربعًا مفرغًا» (حدود فقط بلا تعبئة) بنفس إطار
   بطاقة الدخول المجاورة، والعمودان بنفس الارتفاع — نفس المستوى البصري. */
body[data-page="client-login"] .auth-split{ align-items:stretch !important; }
body[data-page="client-login"] .auth-brand-panel{
  background:transparent !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:36px 32px !important;
  min-height:0 !important;
}
@media (max-width:900px){
  body[data-page="client-login"] .auth-split{ align-items:center !important; }
}

/* 17h) FINAL fix pass. Every selector matches or beats earlier blocks so it ALWAYS wins.
   1) CTA band: solid visible panel + pearl text + real working action button (buttons/background
      never transparent, decorations removed to avoid layering leaks).
   2) Inquiry action buttons: compact + balanced (uses #inquiry-tracker to beat 17f).
   3) Services cards: text never truncated or hidden, larger legible side cards.
   4) Shiary contact card: clear readable card with a real WhatsApp button.
   5) Login portal: bigger clearer type, organized spacing. */

/* ---- 1) CTA band: visible background + colors + heading + working button ---- */
.cta-band-inner{ position:relative; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background:var(--cta-bar-bg, #110A05) !important;
  border:1px solid rgba(219,228,255,.18) !important;
  border-radius:26px !important;
  box-shadow:none !important;
  padding:clamp(32px,4.4vw,54px) clamp(20px,3.4vw,44px) !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background:rgba(219,228,255,.06) !important;
  border-color:rgba(219,228,255,.2) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after,
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before,
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after{
  display:none !important; content:none !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow{
  background:rgba(219,228,255,.12) !important;
  border:1px solid rgba(219,228,255,.3) !important;
  color:#DBE4FF !important;
  padding:.6em 1.1em !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow::before{ color:#C5D8FF !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) h3{ color:#DBE4FF !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) p{ color:#C5D8FF !important; opacity:1 !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-actions{ flex-wrap:wrap; gap:14px; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn{
  background:#DBE4FF !important; color:#110A05 !important;
  border:1px solid rgba(17,10,5,.08) !important;
  border-radius:14px !important;
  padding:15px 26px !important; min-width:190px !important;
  justify-content:center !important; font-weight:700 !important;
  box-shadow:none !important;
  transition:transform .22s ease, background .22s ease !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn:hover{
  background:#C5D8FF !important; transform:translateY(-3px) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost{
  background:rgba(219,228,255,.08) !important; color:#DBE4FF !important;
  border:1px solid rgba(219,228,255,.45) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost:hover{
  background:#DBE4FF !important; color:#110A05 !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn .ripple{ background:rgba(255,255,255,.4) !important; }

/* ---- 2) Inquiry action buttons: short, balanced, identical in both themes ---- */
body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:22px;
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  justify-content:flex-start; gap:10px; padding:11px 12px; border-radius:14px;
  background:var(--paper); border:1.5px solid var(--line-strong); min-height:0;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  background:rgba(219,228,255,.06) !important; border-color:rgba(219,228,255,.2) !important;
}
body[data-page="inquiry"] .client-auth-tab__ic{
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sand); color:var(--ink-fixed); border:1px solid rgba(35,21,14,.14);
}
body[data-page="inquiry"] .client-auth-tab__ic svg{ width:18px; height:18px; }
html.dark-mode body[data-page="inquiry"] .client-auth-tab__ic{
  background:rgba(219,228,255,.12) !important; color:#DBE4FF !important; border-color:transparent !important;
}
body[data-page="inquiry"] .client-auth-tab__title{ font-weight:800; font-size:13.8px; line-height:1.35; }
body[data-page="inquiry"] .client-auth-tab__sub{ font-size:11px; color:var(--muted); line-height:1.35; margin-top:2px; }
body[data-page="inquiry"] .client-auth-tab__arr{ margin-inline-start:auto; flex-shrink:0; width:20px; height:20px; color:var(--muted); opacity:.7; }
body[data-page="inquiry"] .client-auth-tab:not(.is-active):hover .client-auth-tab__arr{ transform:translateX(-4px); color:var(--ink); }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active{
  background:#DBE4FF !important; border-color:#DBE4FF !important; color:#110A05 !important;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__sub{ color:rgba(17,10,5,.66) !important; }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__arr{ color:#110A05 !important; }
@media (max-width:560px){
  body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{ grid-template-columns:1fr; }
  body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{ padding:10px 11px; }
}

/* ---- 3) Services cards: text fully visible, never truncated ---- */
#servicesGrid .service-card{ overflow:visible !important; }
#servicesGrid .service-card h3{
  white-space:normal !important; overflow:visible !important; display:block !important;
}
#servicesGrid .service-card p{
  display:block !important; -webkit-line-clamp:unset !important;
  overflow:visible !important; max-width:none !important; opacity:1 !important;
}

/* ---- 4) Shiary contact card: clear readable card + WhatsApp button ---- */
body[data-page="about"] .contact-card-dark{
  background:#F7FAFF !important; border:1px solid #DDE5F2 !important;
  border-radius:22px !important; padding:36px 32px !important;
  box-shadow:none !important; text-align:right;
}
html.dark-mode body[data-page="about"] .contact-card-dark{
  background:rgba(219,228,255,.05) !important; border-color:rgba(219,228,255,.16) !important;
  box-shadow:none !important;
}
body[data-page="about"] .contact-card-dark .contact-card-logo{
  display:block; height:66px !important; margin:0 auto 20px !important;
}
body[data-page="about"] .contact-card-dark h3{
  text-align:center; color:var(--ink) !important; font-size:25px !important;
  line-height:1.3 !important; margin-bottom:8px !important;
}
body[data-page="about"] .contact-card-dark .contact-dark-desc{
  text-align:center; color:var(--muted) !important; font-size:16px !important;
  line-height:2 !important; max-width:400px; margin:0 auto 22px !important;
}
body[data-page="about"] .contact-card-dark .contact-list{
  gap:14px !important; margin-bottom:24px !important;
}
body[data-page="about"] .contact-card-dark .contact-list li{
  display:flex; align-items:center; gap:11px;
  color:var(--text) !important; font-size:15.5px !important; line-height:1.8 !important;
}
body[data-page="about"] .contact-card-dark .contact-list svg{
  flex-shrink:0; width:19px !important; height:19px !important; color:var(--ink) !important;
}
body[data-page="about"] .contact-card-dark .contact-list a{
  color:var(--ink) !important; font-weight:600 !important; font-size:16px !important;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(17,10,5,.35);
}
body[data-page="about"] .contact-card-dark .contact-socials-tagline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  border-top:1px solid var(--line) !important; padding-top:18px !important;
  margin-top:4px !important; color:var(--muted) !important; font-size:14.5px !important;
}
body[data-page="about"] .contact-card-dark .tagline-link{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--ink) !important; color:#F7FAFF !important;
  padding:9px 16px !important; border-radius:12px !important;
  font-weight:700 !important; font-size:14.5px !important;
}
html.dark-mode body[data-page="about"] .contact-card-dark .tagline-link{
  background:var(--ink) !important; color:#110A05 !important;
}
body[data-page="about"] .contact-card-dark .tagline-link:hover{ transform:translateY(-2px); opacity:.9; }

/* ---- 5) Login portal: bigger clearer type, better spacing ---- */
body[data-page="client-login"] #contact-hero{ padding:52px 0 24px; }
body[data-page="client-login"] #contact-hero h1{ font-size:clamp(31px,4.2vw,46px) !important; line-height:1.3 !important; }
body[data-page="client-login"] #contact-hero .about-hero-inner > p{ font-size:17px !important; line-height:2.05 !important; max-width:560px !important; }
body[data-page="client-login"] .auth-brand-badge{ width:60px !important; height:60px !important; border-radius:18px !important; }
body[data-page="client-login"] .auth-brand-panel h2{ font-size:clamp(30px,3.2vw,42px) !important; line-height:1.35 !important; margin:0 0 16px !important; }
body[data-page="client-login"] .auth-brand-panel .auth-brand-inner > p:not(.eyebrow){ font-size:17.5px !important; line-height:2.05 !important; max-width:470px !important; }
body[data-page="client-login"] .auth-brand-features{ gap:18px !important; margin-top:30px !important; }
body[data-page="client-login"] .auth-brand-features li{ font-size:15.5px !important; line-height:1.8 !important; gap:13px !important; }
body[data-page="client-login"] .auth-brand-features svg{ width:17px !important; height:17px !important; }
body[data-page="client-login"] .auth-brand-eyebrow{ font-size:13.5px !important; letter-spacing:.05em !important; }
body[data-page="client-login"] .client-auth-card{ padding:36px 28px !important; }
body[data-page="client-login"] .client-auth-card label{ font-size:14.5px !important; }
body[data-page="client-login"] .client-auth-card input{ font-size:16px !important; padding:14px 16px !important; }

/* ---- 6) About contact: creative Shiary contact banner ----
   بطاقة التواصل تصبح «بانر تواصل إبداعي» عريضًا: عمود بيان (شعار + وصف +
   زر واتساب) وعمود شبكة معلومات (موقع/جوال/بريد/دوام) بهالة وهالة نصية
   خلفية، بأسلوب شِعاري الفاتح الجذاب. تحافظ كل الخصائص
   data-cms / data-contact على عملها للتحرير والمزامنة. */
body[data-page="about"] .contact-banner{
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 38px !important;
  align-items: center !important;
  overflow: hidden !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 48px 44px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #C7D9F6 0%, #B6CBF1 55%, #C2D4F5 100%) !important;
  border: 1px solid #DDE5F2 !important;
  box-shadow: 0 26px 60px -34px rgba(17, 10, 5, .22) !important;
  text-align: right !important;
}
html.dark-mode body[data-page="about"] .contact-banner{
  background: linear-gradient(135deg, rgba(219,228,255,.07) 0%, rgba(219,228,255,.02) 55%, rgba(219,228,255,.05) 100%) !important;
  border-color: rgba(219,228,255,.16) !important;
  box-shadow: none !important;
}
body[data-page="about"] .contact-banner__halo{
  position: absolute !important;
  bottom: -26px !important;
  left: -8px !important;
  font-size: clamp(70px, 11vw, 150px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: rgba(17, 10, 5, .06) !important;
  white-space: nowrap !important;
  user-select: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: rotate(-90deg) !important;
  transform-origin: left bottom !important;
}
html.dark-mode body[data-page="about"] .contact-banner__halo{ color: rgba(219,228,255,.06) !important; }
body[data-page="about"] .contact-banner__ring{
  position: absolute !important;
  top: -70px !important;
  right: -70px !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 50% !important;
  border: 26px solid rgba(17, 10, 5, .05) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html.dark-mode body[data-page="about"] .contact-banner__ring{ border-color: rgba(219,228,255,.06) !important; }

body[data-page="about"] .contact-banner__main,
body[data-page="about"] .contact-banner__side{ position: relative !important; z-index: 1 !important; }

body[data-page="about"] .contact-banner__main{ text-align: center !important; }
body[data-page="about"] .contact-banner__main .contact-card-logo{
  width: 66px !important; height: 66px !important;
  margin: 0 auto 18px !important;
}
body[data-page="about"] .contact-banner__main h3{
  color: var(--ink) !important;
  font-size: 27px !important; line-height: 1.3 !important;
  margin: 0 0 10px !important;
}
body[data-page="about"] .contact-banner__desc{
  color: var(--ink) !important;
  font-size: 16px !important; line-height: 2 !important;
  max-width: 340px !important; margin: 0 auto 26px !important;
}
body[data-page="about"] .contact-banner__cta{
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; justify-content: center !important;
  gap: 14px !important;
}
body[data-page="about"] .contact-banner__wa{
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  background: #110A05 !important; color: #F7FAFF !important;
  padding: 13px 22px !important; border-radius: 14px !important;
  font-weight: 700 !important; font-size: 15px !important;
  box-shadow: 0 14px 28px -16px rgba(17,10,5,.5) !important;
  text-decoration: none !important;
}
html.dark-mode body[data-page="about"] .contact-banner__wa{
  background: #DBE4FF !important; color: #110A05 !important;
}
body[data-page="about"] .contact-banner__wa:hover{ transform: translateY(-2px) !important; opacity: .92 !important; }
body[data-page="about"] .contact-banner__tag{
  color: var(--ink) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
}

body[data-page="about"] .contact-tiles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body[data-page="about"] .contact-tile{
  display: flex !important; align-items: center !important; gap: 13px !important;
  background: rgba(255,255,255,.8) !important;
  border: 1px solid #E2EAF6 !important;
  border-radius: 18px !important;
  padding: 15px 16px !important;
  box-shadow: 0 10px 22px -18px rgba(17,10,5,.2) !important;
  min-width: 0 !important;
}
html.dark-mode body[data-page="about"] .contact-tile{
  background: rgba(219,228,255,.06) !important;
  border-color: rgba(219,228,255,.14) !important;
  box-shadow: none !important;
}
body[data-page="about"] .contact-tile__ic{
  flex-shrink: 0 !important;
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important;
  display: grid !important; place-items: center !important;
  background: #110A05 !important; color: #F7FAFF !important;
}
html.dark-mode body[data-page="about"] .contact-tile__ic{ background: rgba(219,228,255,.16) !important; }
body[data-page="about"] .contact-tile__text{
  display: flex !important; flex-direction: column !important;
  gap: 3px !important; min-width: 0 !important;
}
body[data-page="about"] .contact-tile__label{
  font-size: 12px !important; font-weight: 700 !important;
  color: var(--ink) !important; letter-spacing: .02em !important;
}
body[data-page="about"] .contact-tile__value{
  font-size: 14.5px !important; font-weight: 600 !important;
  color: var(--ink) !important; line-height: 1.6 !important;
  word-break: break-word !important;
}
body[data-page="about"] .contact-tile .contact-phone-link{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(17,10,5,.3) !important;
}
body[data-page="about"] .contact-tile .contact-phone-link:hover{ opacity: .75 !important; }

/* The tile icons sit on dark ink chips — force their stroke light so the
   older `.contact-list svg{color:var(--ink)}` rule can't make them
   invisible on the dark background. */
body[data-page="about"] .contact-banner .contact-tile__ic svg{
  color: #F7FAFF !important;
}
html.dark-mode body[data-page="about"] .contact-banner .contact-tile__ic svg{
  color: #F7FAFF !important;
}

@media (max-width: 960px){
  body[data-page="about"] .contact-banner{
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 40px 28px !important;
    gap: 30px !important;
  }
  body[data-page="about"] .contact-banner__halo{ display: none !important; }
}
@media (max-width: 520px){
  body[data-page="about"] .contact-tiles{ grid-template-columns: minmax(0, 1fr) !important; }
  body[data-page="about"] .contact-banner__ring{ display: none !important; }
}

/* ---- 3) بطاقتا الاستعلام (المربعين): قصيرتان، متساويتان بالحجم، سطر واحد فقط ---- */
body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  align-items: stretch !important;
}
body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 54px !important;
  height: auto !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--line-strong) !important;
  box-shadow: none !important;
}
body[data-page="inquiry"] .client-auth-tab__t{
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  text-align: start !important;
  gap: 0 !important;
}
body[data-page="inquiry"] .client-auth-tab__title{
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}
body[data-page="inquiry"] .client-auth-tab__sub{ display: none !important; }
body[data-page="inquiry"] .client-auth-tab__ic{
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
body[data-page="inquiry"] .client-auth-tab__ic svg{ width: 17px !important; height: 17px !important; }
body[data-page="inquiry"] .client-auth-tab__arr{
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  opacity: .7 !important;
}
@media (max-width: 560px){
  body[data-page="inquiry"] #inquiry-tracker .client-auth-tabs{ grid-template-columns: 1fr !important; }
  body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{ min-height: 50px !important; }
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab{
  background: rgba(219,228,255,.06) !important;
  border-color: rgba(219,228,255,.2) !important;
  box-shadow: none !important;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active{
  background: #DBE4FF !important;
  border-color: #DBE4FF !important;
  color: #110A05 !important;
}
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .client-auth-tab.is-active .client-auth-tab__ic{
  background: rgba(17,10,5,.12) !important;
  color: #110A05 !important;
}

/* ---- 4) صندوقا الاستعلام متجاوران (بدل التبويبات): كل صندوق باستعلام مستقل،
       والرأس قصير بطول زرار ---- */
body[data-page="inquiry"] #inquiry-tracker .container.narrow{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
@media (max-width: 820px){
  body[data-page="inquiry"] #inquiry-tracker .container.narrow{ grid-template-columns: 1fr !important; }
}
body[data-page="inquiry"] #inquiry-tracker .form-card{
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
}
body[data-page="inquiry"] .inq-panel-head{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 46px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  background: #C5D8FF !important;
  border: 1.5px solid #C5D8FF !important;
  color: #110A05 !important;
  margin-bottom: 16px !important;
}
body[data-page="inquiry"] .inq-panel-head svg{ flex: 0 0 auto !important; width: 18px !important; height: 18px !important; }
body[data-page="inquiry"] .inq-panel-head span{ font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.3 !important; white-space: nowrap !important; }
html.dark-mode body[data-page="inquiry"] .inq-panel-head{
  background: #DBE4FF !important;
  border-color: #DBE4FF !important;
  color: #110A05 !important;
}
body[data-page="inquiry"] #inquiry-tracker .form-grid{ gap: 12px !important; }
body[data-page="inquiry"] #inquiry-tracker .btn{ height: 46px !important; }
body[data-page="inquiry"] #inquiry-tracker .careers-track-result{ margin-top: 16px !important; }

/* ---- 5) بانر التواصل: أيقونة بدل الشعار، توسيط النصوص، والمربعات
       بلون الهوية ونصوصها بنفس الهوية بدرجة غامقة ---- */
body[data-page="about"] .contact-banner__main{ align-items: center !important; text-align: center !important; }
body[data-page="about"] .contact-banner__cta{ justify-content: center !important; }
body[data-page="about"] .contact-banner__logo-ic{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 54px !important; height: 54px !important; border-radius: 16px !important;
  background: #C5D8FF !important; color: #110A05 !important;
  border: 1.5px solid rgba(17,10,5,.22) !important; flex: 0 0 auto;
}
body[data-page="about"] .contact-banner__desc{ font-weight: 700 !important; color: #110A05 !important; }
body[data-page="about"] .contact-banner .contact-tile{ background: #C5D8FF !important; border-color: rgba(17,10,5,.22) !important; }
body[data-page="about"] .contact-banner .contact-tile__ic{ background: rgba(17,10,5,.10) !important; border-color: transparent !important; }
body[data-page="about"] .contact-banner .contact-tile__ic svg{ color: #110A05 !important; }
body[data-page="about"] .contact-banner .contact-tile__label,
body[data-page="about"] .contact-banner .contact-tile__value{ color: #110A05 !important; }
body[data-page="about"] .contact-banner__tag{ color: #110A05 !important; }

/* ---- 6) صفحة الاستعلام: جميع النصوص بلون الهوية الغامق (الوضع الفاتح)،
       والوضع الداكن يبقى فاتحًا ---- */
body[data-page="inquiry"] #inquiry-tracker .inq-panel-head span,
body[data-page="inquiry"] #inquiry-tracker .field-hint,
body[data-page="inquiry"] #inquiry-tracker label,
body[data-page="inquiry"] #inquiry-tracker input,
body[data-page="inquiry"] #inquiry-tracker .btn,
body[data-page="inquiry"] #inquiry-tracker .careers-track-result-status,
body[data-page="inquiry"] #inquiry-tracker .careers-track-result p{ color: #110A05 !important; }
body[data-page="inquiry"] #inquiry-tracker input::placeholder{ color: rgba(17,10,5,.55) !important; }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .inq-panel-head span,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .field-hint,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker label,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker input,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .btn,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .careers-track-result-status,
html.dark-mode body[data-page="inquiry"] #inquiry-tracker .careers-track-result p{ color: #DBE4FF !important; }
html.dark-mode body[data-page="inquiry"] #inquiry-tracker input::placeholder{ color: rgba(219,228,255,.55) !important; }

/* ---- 7) بنرات الدعوة أسفل الصفحات: خلفية بلون الهوية الفاتح (أفتح شوي)
       وجميع النصوص بلون الهوية الغامق + إظهار صورة/فيديو الخلفية ---- */
.cta-band-inner[data-cta-bg="image"],
.cta-band-inner[data-cta-bg="video"]{ background: transparent !important; }
.shairy-cta-scrim{ background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.45)); }
html.dark-mode .cta-band-inner .shiary-cta-scrim{ background: linear-gradient(rgba(17,10,5,.4), rgba(17,10,5,.6)); }

.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background: var(--cta-bar-bg, linear-gradient(150deg, #EAF2FF 0%, #DEE9FF 55%, #E7F0FF 100%)) !important;
  border: 1.5px solid rgba(17,10,5,.14) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 40px -32px rgba(35,21,14,.28) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before{
  background-image:
    repeating-linear-gradient(55deg, rgba(17,10,5,.05) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(-55deg, rgba(17,10,5,.035) 0 1px, transparent 1px 74px),
    radial-gradient(560px 360px at 16% -10%, rgba(197,216,255,.9), transparent 65%),
    radial-gradient(480px 320px at 92% 118%, rgba(219,228,255,.95), transparent 60%),
    radial-gradient(360px 260px at 78% -20%, rgba(255,255,255,.9), transparent 55%);
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow::before,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) h3,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) p,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn svg,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn span,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost{ color: #110A05 !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn{
  background: #C5D8FF !important;
  border: 1.5px solid #110A05 !important;
  box-shadow: none !important;
  color: #110A05 !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn:hover{
  background: #DBE4FF !important;
  transform: translateY(-3px) !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost{
  background: rgba(17,10,5,.05) !important;
  border: 1.5px solid rgba(17,10,5,.35) !important;
  color: #110A05 !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost:hover{ background: #C5D8FF !important; }
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn .ripple{ background: rgba(17,10,5,.25) !important; }

html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background: #110A05 !important;
  border-color: rgba(219,228,255,.16) !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) h3{ color: #DBE4FF !important; }
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) p{ color: #C5D8FF !important; opacity: 1 !important; }
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-eyebrow{ color: #DBE4FF !important; }
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn{
  background: #DBE4FF !important; border-color: #DBE4FF !important; color: #110A05 !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn:hover{ background: #C5D8FF !important; }
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost{
  background: rgba(219,228,255,.08) !important; border-color: rgba(219,228,255,.45) !important; color: #DBE4FF !important;
}
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]) .cta-btn--ghost:hover{ background: #DBE4FF !important; color: #110A05 !important; }

/* ---- 8) بوابة الدخول الموحد: كل نصوص اللوحة الإبداعية بنفس الحجم وبلون الهوية الغامق ---- */
body[data-page="client-login"] .auth-brand-eyebrow,
body[data-page="client-login"] .auth-brand-panel h2,
body[data-page="client-login"] .auth-brand-panel .auth-brand-inner > p:not(.eyebrow),
body[data-page="client-login"] .auth-brand-more h3,
body[data-page="client-login"] .auth-brand-manage li,
body[data-page="client-login"] .auth-brand-more-cta p{
  font-size:17.5px !important;
  line-height:2.05 !important;
  color:#110A05 !important;
}
body[data-page="client-login"] .auth-brand-eyebrow{
  font-weight:700 !important; letter-spacing:.05em !important; padding:9px 20px !important;
}
body[data-page="client-login"] .auth-brand-panel h2{ font-weight:700 !important; }
body[data-page="client-login"] .auth-brand-manage li{ display:flex; align-items:center; gap:10px; }
body[data-page="client-login"] .auth-brand-manage svg,
body[data-page="client-login"] .auth-brand-features svg{ color:#110A05 !important; }
html.dark-mode body[data-page="client-login"] .auth-brand-eyebrow,
html.dark-mode body[data-page="client-login"] .auth-brand-panel h2,
html.dark-mode body[data-page="client-login"] .auth-brand-panel .auth-brand-inner > p:not(.eyebrow),
html.dark-mode body[data-page="client-login"] .auth-brand-more h3,
html.dark-mode body[data-page="client-login"] .auth-brand-manage li,
html.dark-mode body[data-page="client-login"] .auth-brand-more-cta p,
html.dark-mode body[data-page="client-login"] .auth-brand-manage svg,
html.dark-mode body[data-page="client-login"] .auth-brand-features svg{ color:#DBE4FF !important; }

/* ============ 9) كرد الخدمات: النصوص + الرقم الكبير + زر الإجراء البارز ============ */
.catalog-eyebrow{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
  color:var(--ink) !important;
  margin-bottom:7px !important;
}
.catalog-price{ font-size:16px !important; gap:10px !important; }
.catalog-price strong{
  font-size:52px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
}
.catalog-details-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin-top:15px !important;
  padding:12px 22px !important;
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--pearl) !important;
  background:var(--espresso) !important;
  border:1.5px solid var(--espresso) !important;
  border-radius:999px !important;
  transition:transform .18s ease, opacity .18s ease !important;
}
.catalog-details-link:hover{
  color:var(--pearl) !important;
  background:var(--espresso) !important;
  opacity:.85 !important;
  transform:translateY(-1px) !important;
}

/* ============ 10) الخدمات في الرئيسية: الرقم الكبير + زر الإجراء البارز ============ */
.fs-card .fs-cat,
.fs-card h3,
.fs-card .fs-desc,
.fs-card .fs-price{ color:var(--ink) !important; }
.fs-price{
  display:flex !important;
  align-items:baseline !important;
  font-size:16px !important;
  gap:10px !important;
  color:var(--ink) !important;
}
.fs-price strong{
  font-size:52px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  color:var(--ink) !important;
}
.fs-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:11px 20px !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--pearl) !important;
  background:var(--espresso) !important;
  border:1.5px solid var(--espresso) !important;
  border-radius:999px !important;
  transition:transform .18s ease, opacity .18s ease !important;
}
.fs-cta:hover{
  color:var(--pearl) !important;
  background:var(--espresso) !important;
  opacity:.85 !important;
  transform:translateY(-1px) !important;
}

/* ============ 11) بنرات الدعوة النهائية أسفل الصفحات: خلفية #C5D8FF + نصوص #190E09
       + خلفية إبداعية متحركة (خطوط نسجية، توهجات عائمة، لمعة ضوئية) ============ */
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]),
html.dark-mode .cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"]){
  background:#C5D8FF !important;
  border:1.5px solid rgba(25,14,9,.18) !important;
  border-radius:28px !important;
  box-shadow:0 16px 40px -32px rgba(25,14,9,.3) !important;
}
.cta-band,
html.dark-mode .cta-band{
  background-color:#C5D8FF !important;
  background-image:none !important;
}
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::before,
.cta-band-inner:not([data-cta-bg="image"]):not([data-cta-bg="video"])::after{
  display:none !important;
  content:none !important;
}
.cta-caret{
  display:inline-block;
  width:3px;
  height:.96em;
  margin-inline-start:5px;
  vertical-align:-2px;
  background:#190E09;
  animation:ctaCaret 1s steps(1) infinite;
}
@keyframes ctaCaret{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* ============ 12) البنر الأول في الرئيسية: النصوص كلها بلون الهوية الغامق #190E09 ============ */
body[data-page="home"] .hero-copy h1,
body[data-page="home"] .hero-copy > p,
body[data-page="home"] .hero-copy .eyebrow,
body[data-page="home"] .quick-action-btn .p-text,
html.dark-mode body[data-page="home"] .hero-copy h1,
html.dark-mode body[data-page="home"] .hero-copy > p,
html.dark-mode body[data-page="home"] .hero-copy .eyebrow,
html.dark-mode body[data-page="home"] .quick-action-btn .p-text{
  color:#190E09 !important;
}
.cta-band-inner .cta-eyebrow,
.cta-band-inner .cta-eyebrow::before,
.cta-band-inner h3,
.cta-band-inner p,
html.dark-mode .cta-band-inner .cta-eyebrow,
html.dark-mode .cta-band-inner .cta-eyebrow::before,
html.dark-mode .cta-band-inner h3,
html.dark-mode .cta-band-inner p{
  color:#190E09 !important;
  opacity:1 !important;
}
.cta-band-inner .shiary-cta-scrim,
html.dark-mode .cta-band-inner .shiary-cta-scrim{
  background:linear-gradient(rgba(197,216,255,.38), rgba(219,228,255,.55)) !important;
}
.cta-band-inner .cta-btn{
  background:#190E09 !important;
  border:1.5px solid #190E09 !important;
  box-shadow:none !important;
  color:#DBE4FF !important;
}
.cta-band-inner .cta-btn svg,
.cta-band-inner .cta-btn span{
  color:#DBE4FF !important;
}
.cta-band-inner .cta-btn:hover{
  background:#0E0703 !important;
  border-color:#0E0703 !important;
  opacity:.92 !important;
}
.cta-band-inner .cta-btn--ghost,
html.dark-mode .cta-band-inner .cta-btn--ghost{
  background:rgba(25,14,9,.06) !important;
  border:1.5px solid rgba(25,14,9,.35) !important;
  color:#190E09 !important;
}
.cta-band-inner .cta-btn--ghost:hover,
html.dark-mode .cta-band-inner .cta-btn--ghost:hover{
  background:#DBE4FF !important;
  border-color:#190E09 !important;
  color:#190E09 !important;
}