/* ============================================================
   Najma Clean — enhance.css
   طبقة التطوير الاحترافية: تأثيرات + تنظيم أقوى
   (تُحمّل بعد bento.css لتطغى عليها)
   ============================================================ */

/* ---------- متغيرات إضافية للعمق ---------- */
:root {
  --nc-shadow-soft: 0 10px 30px rgba(10,34,64,.08);
  --nc-shadow-lift: 0 26px 60px rgba(10,34,64,.18);
  --nc-shadow-cyan: 0 22px 50px rgba(22,166,201,.28);
  --nc-shadow-gold: 0 22px 50px rgba(246,180,10,.30);
}

/* ---------- شريط تقدّم القراءة ---------- */
.nc-progress {
  position: fixed; top: 0; right: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--nc-cyan-400), var(--nc-gold-500));
  z-index: 1000; transition: width .1s linear; box-shadow: 0 0 12px rgba(22,166,201,.6);
}

/* ---------- طبقة حبيبات ضوئية (grain) فاخرة وخفيفة ---------- */
.nc-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- نص متدرّج ---------- */
.nc-grad-text {
  background: linear-gradient(120deg, var(--nc-gold-400), #FFE9A8 50%, var(--nc-gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- إمالة ثلاثية الأبعاد للبطاقات (3D tilt) ---------- */
.nc-tile, .nc-service, .nc-quote {
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
  transform-style: preserve-3d;
  transition: transform .35s var(--nc-ease), box-shadow .35s var(--nc-ease), border-color .35s;
  will-change: transform;
}
.nc-tile:hover, .nc-service:hover, .nc-quote:hover { --ty: -7px; }
.nc-tile:hover { box-shadow: var(--nc-shadow-lift), 0 0 0 1px rgba(43,184,214,.25); }
.nc-tile--navy:hover, .nc-tile--cyan:hover { box-shadow: var(--nc-shadow-cyan); }
.nc-tile--gold:hover { box-shadow: var(--nc-shadow-gold); }
.nc-service:hover, .nc-quote:hover { box-shadow: var(--nc-shadow-lift); }

/* رفع بسيط للعناصر الداخلية لإحساس العمق */
.nc-tile__inner > * { transform: translateZ(18px); }

/* ---------- حافة متدرّجة مضيئة للبلاطات المميزة ---------- */
.nc-ring { position: relative; }
.nc-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(43,184,214,.9), rgba(246,180,10,.7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3;
  opacity: .8; transition: opacity .35s;
}
.nc-ring:hover::before { opacity: 1; }

/* ---------- توهّج يتبع الماوس على الأقسام الداكنة ---------- */
.nc-section--dark { position: relative; overflow: hidden; }
.nc-section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px circle at var(--mx,50%) var(--my,30%), rgba(22,166,201,.16), transparent 60%);
  opacity: 0; transition: opacity .5s var(--nc-ease);
}
.nc-section--dark:hover::before { opacity: 1; }
.nc-section--dark > .nc-container { position: relative; z-index: 1; }

/* ---------- خلفية متدرّجة متحرّكة للبلاطات الكحلية ---------- */
.nc-tile--navy, .nc-cta__box {
  background-size: 180% 180%;
  animation: nc-grad-move 14s var(--nc-ease) infinite;
}
@keyframes nc-grad-move {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ---------- توهّجات الهيرو المتحرّكة ---------- */
.nc-tile__glow { animation: nc-drift 12s var(--nc-ease) infinite alternate; }
.nc-tile__glow--cyan { animation-duration: 16s; animation-delay: -4s; }
@keyframes nc-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(26px,-22px) scale(1.12); }
}

/* ---------- أزرار: لمعة تمر عند المرور + رفع ---------- */
.nc-btn { position: relative; overflow: hidden; isolation: isolate; }
.nc-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  inset-inline-start: -60%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: inset-inline-start .6s var(--nc-ease);
}
.nc-btn:hover::after { inset-inline-start: 130%; }

/* ---------- روابط القائمة: خط سفلي متحرّك ---------- */
.nc-nav a { position: relative; }
.nc-nav a::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 6px; height: 2px;
  background: var(--nc-grad-cyan); border-radius: 2px; transform: scaleX(0);
  transform-origin: right; transition: transform .3s var(--nc-ease);
}
.nc-nav a:hover::after, .nc-nav .current-menu-item > a::after { transform: scaleX(1); }

/* ---------- هيدر يتقلّص عند النزول ---------- */
.nc-header.is-stuck .nc-header__inner { padding-block: 7px; }
.nc-header.is-stuck .nc-logo img { height: 44px; transition: height .35s var(--nc-ease); }
.nc-logo img { transition: height .35s var(--nc-ease); }
.nc-header__bar { transition: background .35s, box-shadow .35s; }
.nc-header.is-stuck .nc-header__bar { background: rgba(255,255,255,.92); }

/* ---------- ظهور أنعم: تدرّج + ضباب + مقياس ---------- */
.nc-reveal {
  opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px);
  transition: opacity .7s var(--nc-ease), transform .7s var(--nc-ease), filter .7s var(--nc-ease);
}
.nc-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- شارات/أيقونات: نبض خفيف للأزرار العائمة ---------- */
.nc-float a { position: relative; }
.nc-float__wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: nc-pulse 2.4s infinite;
}
@keyframes nc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- بطاقات الخدمة: تحسين العمق والأيقونة ---------- */
.nc-service__icon, .nc-tile__ic { transition: transform .35s var(--nc-ease), background .35s; }
.nc-service:hover .nc-service__icon { transform: translateZ(30px) scale(1.06) rotate(-4deg); }
.nc-tile:hover .nc-tile__ic { transform: scale(1.06); }

/* ---------- فاصل موجي علوي للأقسام الداكنة ---------- */
.nc-wave-top { position: relative; }
.nc-wave-top::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 60px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,90 1080,-10 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat center/cover;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,90 1080,-10 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat center/cover;
}

/* ---------- تحسين شريط المدن ---------- */
.nc-marquee { box-shadow: var(--nc-shadow-soft); }
.nc-marquee__track span { transition: color .3s; }
.nc-marquee__track span:hover { color: var(--nc-cyan-600); }

/* ---------- تحسينات تنظيمية ---------- */
.nc-section { isolation: isolate; }
.nc-bento { gap: 20px; }
.nc-tile { border-radius: 28px; }
.nc-head h2, .nc-bento-head h2, .nc-pagehero h1 { letter-spacing: -.5px; }

/* ---------- اتجاه الأرقام (يمنع قلب +/% في RTL) ---------- */
.nc-tile__num, .nc-tile__big, .nc-stat__num, .nc-glass-stat b {
  direction: ltr; unicode-bidi: isolate;
}

/* ---------- علاج فراغات البلاطات: توسيط المحتوى ---------- */
.nc-tile:not(.nc-tile--navy):not(.nc-tile--ba) { justify-content: center; gap: 14px; }
.nc-tile--action { justify-content: center; }
/* بلاطات الخدمات: أيقونة أوضح ومسافات متّسقة */
.nc-service .nc-service__icon { width: 60px; height: 60px; }

/* ---------- ارتفاعات بنتو أنعم (أقل فراغًا) ---------- */
.nc-bento { grid-auto-rows: minmax(146px, auto); }
.nc-bento--hero { grid-auto-rows: minmax(160px, auto); }

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .nc-tile, .nc-service, .nc-quote { transform: none !important; }
  .nc-tile--navy, .nc-cta__box, .nc-tile__glow, .nc-float__wa::before { animation: none !important; }
  .nc-progress { display: none; }
}

/* ---------- شاشات اللمس: إلغاء الإمالة ---------- */
@media (pointer: coarse) {
  .nc-tile, .nc-service, .nc-quote { transform: none !important; }
  .nc-tile__inner > * { transform: none; }
}

/* ============================================================
   Polish Pass — تلميع نهائي
   ============================================================ */

/* --- بطاقات الخدمات: مصمّمة وممتلئة --- */
.nc-bento--services { grid-auto-rows: minmax(150px, auto); }
.nc-bento--services .nc-tile:not(.nc-tile--img):not(.nc-tile--cyan) {
  justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
}
.nc-bento--services .nc-tile:not(.nc-tile--img):not(.nc-tile--cyan)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at 88% 112%, rgba(22,166,201,.12), transparent 60%);
  opacity: 0; transition: opacity .4s var(--nc-ease);
}
.nc-bento--services .nc-tile:not(.nc-tile--img):not(.nc-tile--cyan):hover::after { opacity: 1; }
.nc-bento--services .nc-tile:not(.nc-tile--img) > * { position: relative; z-index: 1; }
.nc-bento--services .nc-tile__ic {
  background: var(--nc-grad-cyan); color: #fff; box-shadow: 0 8px 18px rgba(22,166,201,.30);
}
.nc-bento--services .nc-tile:hover .nc-tile__ic { transform: scale(1.08) rotate(-5deg); }
.nc-bento--services .nc-tile__label {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nc-bento--services .nc-tile__cta { margin-top: auto; }
.nc-bento--services .nc-tile--cyan { box-shadow: var(--nc-shadow-cyan); }

/* --- خط علوي يظهر عند المرور على بطاقة الخدمة --- */
.nc-bento--services .nc-tile:not(.nc-tile--img):not(.nc-tile--cyan)::before {
  content: ""; position: absolute; top: 0; inset-inline: 26px; height: 3px; z-index: 2;
  background: var(--nc-grad-cyan); border-radius: 0 0 4px 4px;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--nc-ease);
}
.nc-bento--services .nc-tile:not(.nc-tile--img):not(.nc-tile--cyan):hover::before { transform: scaleX(1); }

/* --- اقتباس أكبر وأنيق --- */
.nc-bigquote { width: 56px !important; height: 56px !important; }

/* --- رقائق المدن: تفاعل --- */
.nc-tile__chips span { transition: transform .25s var(--nc-ease), background .25s; }
.nc-tile__chips span:hover { transform: translateY(-2px); background: rgba(255,255,255,.22) !important; }

/* --- بطاقة العميل (avatar) داخل الاقتباس: توهج --- */
.nc-quote__avatar, .nc-ava-stack span { box-shadow: 0 6px 16px rgba(22,166,201,.30); }

/* --- إحصاءات: تباعد أنعم --- */
.nc-tile--dark .nc-tile__num, .nc-tile--gold .nc-tile__big { margin-bottom: 4px; }

/* --- ترويسة الأقسام: تباعد متّسق --- */
.nc-bento-head { margin-bottom: 34px; }
.nc-bento-head .nc-eyebrow { margin-bottom: 14px; }

/* --- الأزرار العائمة: حجم أنسب --- */
.nc-float a { width: 58px; height: 58px; }