/* =============================================================================
   الرؤيا العميقة — الطبقة العصرية
   تُحمَّل بعد ‎deep.css‎ وتُرجَّح عليه. الأساس هناك يبقى مرجعاً للألوان والخطوط.

   لماذا طبقة منفصلة لا تعديل في الأصل:
     الأساس مُقاس ومُختبَر (تباين، تجاوب، ترتيب). الطبقة هنا تغيّر المظهر لا
     البنية — فإن لم تُعجب، حذف سطر واحد من الصفحات يُعيد النسخة الهادئة كما
     هي بلا أثر.
   ============================================================================= */

:root {
  --g1: #1B4A6B;
  --g2: #2F5D86;
  --g3: #4A87B8;
  --glass: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* =============================================================================
   البطل — داكن حيّ لا مسطّح
   شفقٌ يتحرّك ببطء شديد خلف الحبر. الحركة هنا ليست زينة: السطح الساكن يقرأه
   العين صورةً، والسطح الذي يتنفّس يقرؤه واجهةً حيّة.
   ============================================================================= */

.hero {
  background: #0B1A26;
  color: #C3D3E0;
  border-bottom: 0;
  isolation: isolate;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.hero::before {
  width: 46rem; height: 34rem;
  inset-block-start: -14rem; inset-inline-end: -10rem;
  background: radial-gradient(circle, rgba(74,135,184,.55), transparent 68%);
  animation: drift1 22s var(--ease) infinite alternate;
}
.hero::after {
  width: 38rem; height: 30rem;
  inset-block-end: -16rem; inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(27,74,107,.6), transparent 66%);
  animation: drift2 27s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(-5rem, 4rem, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(4rem, -3rem, 0) scale(1.1); } }

/* شبكة دقيقة تحت الشفق — إشارة إلى الجداول التي تبنيها هذه الأنظمة */
.hero > .wrap::before {
  content: "";
  position: absolute; inset: -50% -10%;
  z-index: -1; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 72%);
}
.hero > .wrap { position: relative; }

.hero h1 { color: #fff; letter-spacing: -.025em; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(105deg, #6FB4E8 0%, #A9D6F5 55%, #6FB4E8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lead { color: #9FB4C6; }

/* الشارة زجاجية */
.hero .eyebrow {
  color: #A9D6F5;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  padding: .35rem .95rem;
  backdrop-filter: blur(8px);
}
.hero .eyebrow::before { background: #6FB4E8; box-shadow: 0 0 12px #6FB4E8; }

.hero-shot {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
}

/* =============================================================================
   الأزرار — لمعة تمرّ لا لون ثابت
   ============================================================================= */

.btn { position: relative; overflow: hidden; }
.btn-brand {
  background: linear-gradient(135deg, var(--g2) 0%, var(--g1) 100%);
  box-shadow: 0 6px 18px -8px rgba(47,93,134,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-brand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn-brand:hover::after { transform: translateX(120%); }
.btn-brand:hover { box-shadow: 0 10px 26px -10px rgba(47,93,134,.9), inset 0 1px 0 rgba(255,255,255,.22); }

.hero .btn-quiet {
  background: var(--glass); color: #E7F0F7; border-color: var(--glass-line);
  backdrop-filter: blur(8px);
}
.hero .btn-quiet:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.28); }

/* =============================================================================
   شريط الأرقام — ملتصق بالبطل
   ============================================================================= */

.stats {
  background: #0E2130;
  border: 0;
  border-block-end: 1px solid var(--rule);
  gap: 0;
}
.stats div {
  background: transparent;
  border-inline-start: 1px solid rgba(255,255,255,.07);
  position: relative;
}
.stats div:first-child { border-inline-start: 0; }
.stats b { color: #fff; }
.stats small { color: #8FA6B8; }

/* =============================================================================
   فهرس الأنظمة — بطاقات لا قائمة
   ============================================================================= */

.index-list {
  border: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.index-item {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  padding: 1.6rem;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  align-items: center;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.index-item::after { display: none; }
.index-item:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--g3), 0 18px 40px -22px rgba(27,74,107,.55);
  background: var(--surface);
}
.index-item .n {
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: linear-gradient(140deg, var(--brand-050), var(--brand-100));
  color: var(--g1); display: grid; place-items: center;
  font-size: .9rem; font-weight: 600; padding: 0;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.index-item:hover .n {
  background: linear-gradient(140deg, var(--g2), var(--g1)); color: #fff;
}
.index-item > span:nth-child(2) { grid-column: 1 / -1; }
.index-item .go { grid-column: 1 / -1; margin-top: .3rem; }
.index-item:hover .go { transform: translateX(-4px); }

/* =============================================================================
   شريط العملاء المتحرّك — اثنا عشر اسماً حقيقياً تستحقّ أن تُرى
   ============================================================================= */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--surface);
  padding-block: 1.6rem;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--dis); font-weight: 700; font-size: 1.05rem;
  color: var(--muted); white-space: nowrap; letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.marquee span:hover { color: var(--g2); }
@keyframes slide { to { transform: translateX(50%); } }

/* =============================================================================
   بطاقات التجربة — حدّ متدرّج يدور عند التحويم
   ============================================================================= */

.try { border-radius: 18px; }
.try::before {
  height: 100%; inset: 0;
  background: linear-gradient(140deg, var(--g3), transparent 40%, transparent 60%, var(--g2));
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; border-radius: inherit;
  transition: opacity .35s var(--ease);
}
.try:hover::before { opacity: 1; }
.try:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -26px rgba(27,74,107,.5); }
.try .kind {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, var(--brand-050), var(--brand-100));
  color: var(--g1); border-radius: 7px; padding: .18rem .6rem;
  align-self: flex-start;
}

/* =============================================================================
   سجلّ العملاء
   ============================================================================= */

.roster div { transition: background .25s var(--ease), transform .25s var(--ease); }
.roster div:hover { background: var(--brand-050); transform: translateY(-2px); }

/* =============================================================================
   الأقسام الداكنة
   ============================================================================= */

.on-ink { background: linear-gradient(140deg, #14344A 0%, #0E2333 55%, #0B1A26 100%); position: relative; overflow: hidden; }
.on-ink::before {
  content: ""; position: absolute; width: 30rem; height: 22rem;
  inset-block-start: -10rem; inset-inline-end: -6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,135,184,.35), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.site-foot { background: linear-gradient(160deg, #0F2739 0%, #0A1621 100%); }

/* =============================================================================
   الترويسة — تتغيّر عند التمرير
   ============================================================================= */

.site-head { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-head.stuck {
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(11,26,38,.5);
}
.site-nav a { position: relative; transition: color .22s var(--ease); }
.site-nav a::after {
  content: ""; position: absolute; inset-inline: .8rem; inset-block-end: .25rem;
  height: 2px; border-radius: 2px; background: var(--g2);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a:hover { background: transparent; color: var(--g1); }
.site-nav a[aria-current="page"] { background: transparent; color: var(--g1); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* =============================================================================
   حركة الظهور — أسرع وأقرب
   ============================================================================= */

[data-reveal] { transform: translateY(20px) scale(.985); transition-duration: .5s; }
[data-reveal].in { transform: none; }

/* =============================================================================
   احترام تقليل الحركة — كل ما سبق يتوقّف
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .marquee-track { animation: none !important; }
  .btn-brand::after { display: none; }
  .index-item:hover, .try:hover, .roster div:hover, .hero-shot { transform: none !important; }
}

@media (max-width: 44rem) {
  .marquee span { font-size: .95rem; }
  .marquee-track { gap: 2.25rem; }
}

/* =============================================================================
   ضبط ثانٍ — الخطّ واللون والحركة
   ============================================================================= */

/* ---------- الخطّ ----------
   Almarai 800 كان عريضاً حادّ الأطراف: يملأ السطر ويثقل الشاشة. Readex Pro
   عربيّ حديث ليّن الحواف، ووزن 500 فيه يقرأ كعنوان بلا أن يصرخ.
   والأحجام كلّها نزلت درجة: العنوان كان يبتلع البطل. */
:root {
  --dis: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ar:  "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}

body { font-size: 15.5px; line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4 { font-family: var(--dis); font-weight: 500; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); line-height: 1.42; letter-spacing: 0; font-weight: 600; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.5; letter-spacing: 0; font-weight: 500; }
h3 { font-size: 1.02rem; font-weight: 500; line-height: 1.6; }
.lead { font-size: clamp(.98rem, 1.4vw, 1.06rem); line-height: 1.9; font-weight: 300; }
p, li { font-weight: 300; }
.btn { font-family: var(--dis); font-weight: 500; font-size: .92rem; padding: .78rem 1.45rem; }
.btn-sm { font-size: .85rem; padding: .52rem 1.05rem; }
.eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .1em; }
.stats b { font-weight: 500; font-size: clamp(1.45rem, 2.8vw, 1.95rem); }
.stats small { font-size: .82rem; font-weight: 300; }
.site-nav a { font-family: var(--dis); font-weight: 400; font-size: .89rem; }
.brand b { font-family: var(--dis); font-weight: 600; font-size: .98rem; }
.brand span { font-weight: 300; }
.marquee span { font-weight: 400; font-size: .95rem; }
.roster b { font-weight: 500; font-size: .94rem; }
.sec-head { margin-bottom: 2.4rem; }

/* ---------- اللون: عودة إلى الشعار ----------
   الدرجة الفولاذية السابقة ابتعدت عن العلامة. هذه مسحوبة من الشعار نفسه
   (‎#005ED2‎–‎#297FF6‎) وأُنزلت درجة واحدة لتبقى راكزة لا صارخة. */
:root {
  --brand:      #0F5CBF;
  --brand-2:    #0B4894;
  --brand-lite: #7FB4F0;
  --brand-soft: #E8F1FC;
  --brand-050:  #F2F7FE;
  --brand-100:  #DCEAFB;
  --brand-700:  #0B4894;
  --brand-900:  #073366;
  --g1: #0A4590;
  --g2: #0F5CBF;
  --g3: #3D89E8;
}

.hero { background: #07203D; }
.hero::before { background: radial-gradient(circle, rgba(61,137,232,.5), transparent 68%); }
.hero::after  { background: radial-gradient(circle, rgba(10,69,144,.62), transparent 66%); }
.hero .lead { color: #9DB6D2; }
.hero { color: #C2D5EA; }
.hero h1 em {
  background: linear-gradient(105deg, #6FA9F2 0%, #A9CDF8 55%, #6FA9F2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .eyebrow { color: #A9CDF8; }
.hero .eyebrow::before { background: #6FA9F2; box-shadow: 0 0 12px #6FA9F2; }
.stats { background: #0A2748; }
.stats small { color: #8FA9C6; }
.on-ink { background: linear-gradient(140deg, #0E3565 0%, #0A2748 55%, #07203D 100%); }
.on-ink::before { background: radial-gradient(circle, rgba(61,137,232,.32), transparent 70%); }
.site-foot { background: linear-gradient(160deg, #0B2B50 0%, #061A31 100%); }

/* ---------- حركات إضافية ---------- */

/* خطّ يُرسَم تحت عنوان القسم عند ظهوره */
.sec-head h2 { position: relative; padding-bottom: .7rem; }
.sec-head h2::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2px; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--g2), var(--g3));
  transition: width .8s var(--ease) .18s;
}
.sec-head[data-reveal].in h2::after { width: 3.2rem; }

/* اللقطة تُكشف من أسفل */
.hero-shot img, .shot img { transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.03); }

/* سهم الرابط يتحرّك ويظهر */
.index-item .go::after {
  content: ""; display: inline-block; width: 0; overflow: hidden;
  transition: width .28s var(--ease);
}
.index-item:hover .go::after { width: .5rem; }

/* نبضة خفيفة حول زرّ الديمو الحيّ — إشارة إلى أنّه يفتح شيئاً فعلاً */
.try .btn-brand { position: relative; }
.try .btn-brand::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid var(--g3); opacity: 0;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.06); }
  100% { opacity: 0;   transform: scale(1.06); }
}

/* الشعار يتنفّس */
.brand img { transition: transform .45s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }

/* بطاقات الأرقام: خطّ علويّ يتلوّن */
.stats div::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--g3), transparent);
  transform: scaleX(0); transition: transform .5s var(--ease);
}
.stats div:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .try .btn-brand::before { animation: none; opacity: 0; }
  .sec-head h2::after { transition: none; width: 3.2rem; }
}

/* =============================================================================
   الضبط الثالث — الخطّ الأجمل، ألوان الشعار كاملةً، وحركات إضافية
   ============================================================================= */

/* ---------- Tajawal ----------
   أجمل ما يُكتب به العربي على الويب اليوم: حروف هندسية دافئة، وأوزان خفيفة
   تُقرأ فعلاً (٣٠٠ ليس باهتاً كما في أكثر الخطوط العربية). Readex Pro يبقى
   بديلاً أوّل قبل خطوط النظام. */
:root {
  --dis: "Tajawal", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --ar:  "Tajawal", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}

body { font-family: var(--ar); font-size: 16px; line-height: 1.85; font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--dis); }
h1 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.7rem); line-height: 1.45; }
h2 { font-weight: 700; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.5; }
h3 { font-weight: 500; font-size: 1.05rem; }
.lead, p, li { font-weight: 300; }
.lead { font-size: clamp(1rem, 1.5vw, 1.1rem); }
.btn { font-family: var(--dis); font-weight: 500; }
.brand b { font-weight: 700; }
.brand span { font-weight: 300; }
.site-nav a { font-family: var(--dis); font-weight: 400; }
.marquee span { font-weight: 500; }
.roster b { font-weight: 500; }
.stats b { font-weight: 700; }
.eyebrow { font-weight: 500; }

/* الأرقام واللاتيني داخل النصّ العربي تبقى على Outfit — أوضح وأنظف */
.num, code, .filemeta, bdi { font-family: var(--lat); }

/* ---------- عزل اتجاهي عامّ ----------
   الرقم داخل نصّ عربي ينقلب: ‎0780 880 443‎ تُعرَض ‎443 880 0780‎. الحلّ ليس
   تجميلاً بل صحّة: زبون يتّصل برقم مقلوب لا يصل. */
bdi, .num, [dir="ltr"] { unicode-bidi: isolate; }
a[href^="tel:"], a[href^="https://wa.me"] { unicode-bidi: plaintext; }

/* ---------- ألوان الشعار كاملةً ----------
   الشعار ليس أزرق وحده: فيه رماديّ فحميّ للحروف ‎DEEP‎. استعماله ثانياً يربط
   الصفحة بالعلامة أكثر من الأزرق وحده. */
:root {
  --charcoal:   #333E48;   /* من حروف الشعار */
  --charcoal-2: #46535F;
  --sky:        #297FF6;   /* أفتح درجة في الشعار */
  --sky-soft:   #E9F2FE;
}

.index-item .n { color: var(--charcoal); }
.index-item:hover .n { background: linear-gradient(140deg, var(--sky), var(--g2)); color: #fff; }
.eyebrow { color: var(--g2); }
.eyebrow::before { background: var(--sky); }
.stats b { color: #fff; }
.roster b { color: var(--charcoal); }
h1, h2, h3 { color: var(--charcoal); }
.hero h1 { color: #fff; }
.on-ink h1, .on-ink h2, .on-ink h3 { color: #fff; }
.try .kind { background: var(--sky-soft); color: var(--g2); }
.card::before, .try::before { background: linear-gradient(140deg, var(--sky), transparent 40%, transparent 60%, var(--g2)); }
.marquee span:hover { color: var(--sky); }
.btn-brand { background: linear-gradient(135deg, var(--sky) 0%, var(--g2) 55%, var(--g1) 100%); }
.btn-brand:hover { background: linear-gradient(135deg, var(--g2) 0%, var(--g1) 100%); }

/* ---------- حركات إضافية ---------- */

/* الشعار يلمع مرّة عند تحميل الصفحة */
@keyframes markIn {
  from { opacity: 0; transform: translateY(-6px) rotate(-10deg) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.brand img { animation: markIn .7s var(--ease) both; }

/* روابط القائمة تتتالى */
@keyframes navIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (min-width: 62.01rem) {
  .site-nav a { animation: navIn .45s var(--ease) both; }
  .site-nav a:nth-child(1){animation-delay:.05s} .site-nav a:nth-child(2){animation-delay:.10s}
  .site-nav a:nth-child(3){animation-delay:.15s} .site-nav a:nth-child(4){animation-delay:.20s}
  .site-nav a:nth-child(5){animation-delay:.25s} .site-nav a:nth-child(6){animation-delay:.30s}
  .site-nav a:nth-child(7){animation-delay:.35s} .site-nav a:nth-child(8){animation-delay:.40s}
}

/* عنوان البطل يظهر كلمةً كلمة */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero h1, .hero .eyebrow, .hero .lead, .hero-actions { animation: riseIn .75s var(--ease) both; }
.hero .eyebrow { animation-delay: .10s; }
.hero h1       { animation-delay: .20s; }
.hero .lead    { animation-delay: .34s; }
.hero-actions  { animation-delay: .46s; }
.hero-shot     { animation: riseIn .9s var(--ease) .3s both; }

/* التدرّج داخل الكلمة المميّزة يتحرّك ببطء */
.hero h1 em { background-size: 220% 100%; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* بطاقة التجربة: الشارة تكبر قليلاً */
.try .kind { transition: transform .28s var(--ease), background .28s var(--ease); }
.try:hover .kind { transform: scale(1.06); background: linear-gradient(135deg, var(--sky), var(--g2)); color: #fff; }

/* صفّ العملاء: ارتفاع متتابع عند الظهور */
.roster div { transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.roster div:hover { box-shadow: inset 0 0 0 1px var(--sky); }

/* زرّ العودة والواتساب: دخول ناعم */
#totop, .wa-float { transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.wa-float { animation: riseIn .6s var(--ease) 1s both; }

@media (prefers-reduced-motion: reduce) {
  .brand img, .site-nav a, .hero h1, .hero .eyebrow, .hero .lead,
  .hero-actions, .hero-shot, .hero h1 em, .wa-float { animation: none !important; }
  .try:hover .kind { transform: none; }
}