/* =====================================================================
   JPPRO — الحماية اليابانية
   نظام التصميم: Muted High-End Tech
   الملف الكامل: (أ) المتغيرات والأساسيات + (ب) مكوّنات Hero والنافذة
   ⚠ هذا الملف يجب أن يحل محل style.css القديم بالكامل
   ===================================================================== */

/* ---------- 1) المتغيرات الأساسية (Design Tokens) ---------- */
:root {
  /* الخلفيات الداكنة */
  --bg-base:      #0b0d12;
  --bg-raised:    #101218;
  --bg-deep:      #07080c;

  /* الألوان المميزة الهادئة */
  --crimson:      #dc2626;
  --crimson-soft: #e11d48;
  --blue:         #2563eb;
  --blue-soft:    #3b82f6;

  /* التوهج المحيطي الناعم */
  --glow-crimson: 0 0 40px -8px rgba(220, 38, 38, .35);
  --glow-blue:    0 0 40px -8px rgba(37, 99, 235, .30);

  /* النصوص */
  --text-hi:      #f5f7fa;
  --text-mid:     #a8b0bf;
  --text-low:     #6b7280;

  /* بطاقات الزجاج */
  --glass-bg:     rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(10px);

  /* الخط والقياسات */
  --font-main:    'Tajawal', sans-serif;
  --radius-lg:    1.25rem;
  --radius-md:    0.75rem;
  --transition:   .3s ease;
}

/* ---------- 2) الحاوية الخاصة بالتصميم الجديد ----------
   سُمّيت .shell (وليس .container) لتجنب التعارض مع كلاس
   .container الذي يولّده Tailwind تلقائيًا */
.shell {
  width: 100%; max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* المكوّنات الجديدة تستخدم خط Tajawal
   (بينما تبقى الأقسام القديمة على Almarai حتى اكتمال الترحيل) */
.hero, .promo-banner { font-family: var(--font-main); }

/* ---------- الشعار الديناميكي (JPPRO) ----------
   رسمة الشعار الحقيقية مدمجة مباشرة في كل موضع (هيدر/فوتر).
   التلوين بطريقتين معًا لأقصى موثوقية:
   ١) خصائص fill داخل الرسمة تقرأ المتغيرات
   ٢) قواعد CSS مباشرة على المجموعتين (تتغلب على أي شيء آخر)
   ▸ logo--dark  → JP أبيض + PRO أحمر (للخلفيات الداكنة)
   ▸ logo--light → الشعار كاملًا أسود (للخلفيات الفاتحة)      */
.logo-mark {
  display: block;
  aspect-ratio: 3190 / 479;   /* يضمن العرض الصحيح حتى لو تجاهل المتصفح w-auto */
}

/* السياق الداكن */
.logo--dark { --logo-jp-fill: #ffffff; --logo-pro-fill: #dc2626; }
.logo--dark .logo-jp  { fill: #ffffff; }
.logo--dark .logo-pro { fill: #dc2626; fill: var(--crimson, #dc2626); }

/* السياق الفاتح */
.logo--light { --logo-jp-fill: #0f172a; --logo-pro-fill: #0f172a; }
.logo--light .logo-jp,
.logo--light .logo-pro { fill: #0f172a; }

/* ---------- 3) السطر التمهيدي (Eyebrow) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--crimson-soft);
  font-size: .85rem; font-weight: 700; letter-spacing: .15em;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 2rem; height: 1px;
  background: var(--crimson); opacity: .6;
}

/* ---------- 4) بطاقة الزجاج ---------- */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur); /* دعم Safari */
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.glass-card:hover {
  border-color: rgba(220, 38, 38, .35);
  box-shadow: var(--glow-crimson);
  transform: translateY(-4px);
}
.glass-card--blue:hover {
  border-color: rgba(37, 99, 235, .35);
  box-shadow: var(--glow-blue);
}

/* ---------- 5) الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .9rem 1.75rem;
  border: none; cursor: pointer;
  border-radius: var(--radius-md);
  font-family: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none;
  transition: filter var(--transition), box-shadow var(--transition),
              border-color var(--transition), color var(--transition);
}
.btn--primary {
  background: linear-gradient(135deg, var(--crimson), var(--crimson-soft));
  color: #fff;
  box-shadow: var(--glow-crimson);
}
.btn--primary:hover { filter: brightness(1.12); }

.btn--ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-hi);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn--ghost:hover {
  border-color: var(--blue-soft);
  color: var(--blue-soft);
  box-shadow: var(--glow-blue);
}

/* ---------- 6) التوهجات المحيطية ---------- */
.ambient-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(60px);
}
.ambient-glow--crimson { background: rgba(220, 38, 38, .12); }
.ambient-glow--blue    { background: rgba(37, 99, 235, .10); }

/* =====================================================================
   (ب) مكوّن الـ HERO
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: 4rem; padding-bottom: 5rem;
  /* قيمة احتياطية صلبة أولًا، ثم التدرج — يمنع الخلفية البيضاء نهائيًا */
  background: #0b0d12;
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-base) 70%);
  text-align: center;
}
.hero__inner { position: relative; } /* فوق التوهجات */

.hero__title {
  color: var(--text-hi);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.3;
  margin: 1rem 0 0;
}
.hero__title-accent {
  display: block; margin-top: .5rem;
  font-size: .55em; font-weight: 700;
  background: linear-gradient(90deg, var(--crimson-soft), var(--blue-soft));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 640px; margin: 1.5rem auto 0;
  font-size: 1.1rem; line-height: 1.9;
  color: var(--text-mid);
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}

.hero__installment {
  margin-top: 1.25rem;
  font-size: .85rem;
  color: var(--text-low);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.hero__installment b { color: var(--text-mid); font-weight: 700; }
.hero__installment i { color: var(--crimson-soft); }

/* شبكة المزايا: عمودان على الجوال، أربعة على الشاشات الكبيرة */
.hero__badges {
  margin-top: 3.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .hero__badges { grid-template-columns: repeat(4, 1fr); }
}

.badge { padding: 1.5rem 1rem; text-align: center; }
.badge strong { display: block; color: var(--text-hi); font-size: 1rem; margin-top: .75rem; }
.badge span   { display: block; color: var(--text-low); font-size: .8rem; margin-top: .25rem; }
.badge__icon  { font-size: 1.6rem; }
.badge__icon--crimson { color: var(--crimson-soft); }
.badge__icon--blue    { color: var(--blue-soft); }

/* لوحة الإصلاح الذاتي داخل الـ Hero الجديد */
.hero__panel {
  max-width: 640px;
  margin: 3.5rem auto 0;
}

/* =====================================================================
   (ب) بانر العروض البارز (Promo Banner)
   ===================================================================== */
.promo-banner {
  position: relative;
  background: var(--bg-base);
  overflow: hidden;
  padding-top: 5.5rem; /* حشو لتجاوز الهيدر الثابت بما إنه أول قسم بالصفحة */
}
.promo-track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}
.promo-slide {
  flex: 0 0 100%;
  min-height: 320px;
}
.promo-slide--crimson {
  background: radial-gradient(circle at 15% 20%, rgba(220,38,38,.20), transparent 55%),
              linear-gradient(180deg, #14161d, var(--bg-base));
}
.promo-slide--blue {
  background: radial-gradient(circle at 15% 20%, rgba(37,99,235,.20), transparent 55%),
              linear-gradient(180deg, #12151d, var(--bg-base));
}
.promo-slide__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 3rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 320px;
}
.promo-slide__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 30rem; }
.promo-slide__icon {
  display: none;
  font-size: 7rem;
  color: rgba(255,255,255,.06);
}
@media (min-width: 900px) { .promo-slide__icon { display: block; } }

.promo-slide__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700;
  padding: .35rem .9rem; border-radius: 99px;
  color: var(--crimson-soft); background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.25);
}
.promo-slide__tag--blue { color: var(--blue-soft); background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.25); }

.promo-slide__title {
  color: var(--text-hi);
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.3;
  margin: 0;
}
.promo-slide__big {
  display: block;
  font-size: 2.2em; line-height: 1.1;
  background: linear-gradient(135deg, var(--crimson-soft), var(--blue-soft));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.promo-slide__sub { color: var(--text-mid); font-size: 1rem; line-height: 1.8; margin: 0; }

/* ---------- العداد التنازلي (معاد استخدامه) ---------- */
.countdown { display: flex; gap: .5rem; direction: ltr; /* الأرقام تُقرأ يسار→يمين */ }
.countdown__unit {
  min-width: 3.2rem;
  padding: .55rem .35rem;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.countdown__unit b    { color: var(--text-hi); font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__unit span { color: var(--text-low); font-size: .62rem; }

/* ---------- بطاقة الرقم البارز (99% مثلًا، معاد استخدامها) ---------- */
.slide__stat {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem 1.25rem; border-radius: var(--radius-md);
  background: var(--glass-bg); border: 1px solid rgba(220,38,38,.25);
}
.slide__stat b    { color: var(--crimson-soft); font-size: 2rem; line-height: 1; }
.slide__stat span { color: var(--text-mid); font-size: .78rem; max-width: 28ch; }

/* ---------- أسهم التنقل ---------- */
.promo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(7, 8, 12, .55); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-hi); font-size: .9rem;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.promo-nav--prev { right: 1rem; }  /* في RTL: السابق على اليمين */
.promo-nav--next { left:  1rem; }
.promo-nav:hover {
  border-color: var(--blue-soft); color: var(--blue-soft);
  box-shadow: var(--glow-blue);
}

/* ---------- المؤشرات النقطية ---------- */
.promo-dots {
  position: absolute; bottom: 1rem; inset-inline: 0; z-index: 5;
  display: flex; justify-content: center; gap: .5rem;
}
.dot {
  width: .55rem; height: .55rem;
  border-radius: 50%; cursor: pointer; border: none; padding: 0;
  background: rgba(255, 255, 255, .2);
  transition: background var(--transition), width var(--transition), box-shadow var(--transition);
}
.dot.active {
  width: 1.5rem; border-radius: 99px;   /* النقطة النشطة تتمدد لكبسولة */
  background: linear-gradient(90deg, var(--crimson), var(--crimson-soft));
  box-shadow: var(--glow-crimson);
}

@media (max-width: 640px) {
  .promo-slide__inner { flex-direction: column; text-align: center; padding: 2.75rem 1.25rem 3.25rem; }
  .promo-slide__text { align-items: center; }
}

/* ---------- الشريط المتحرك: لمحة بصرية عن الخدمات ---------- */
.marquee-section {
  background: var(--bg-base);
  padding: 2.5rem 0;
  overflow: hidden;
}
.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* نصف العرض فقط لأن البطاقات مكررة مرة واحدة */
}
.marquee-card {
  flex: 0 0 auto;
  width: 168px; height: 220px;
  border-radius: 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-hi);
}
.marquee-card i { font-size: 1.75rem; }
.marquee-card h3 { font-weight: 700; font-size: 1rem; }
.marquee-card span { font-size: .75rem; color: var(--text-mid); }
.marquee-card--crimson {
  background: radial-gradient(circle at 30% 20%, rgba(220,38,38,.22), var(--bg-raised) 70%);
  box-shadow: var(--glow-crimson);
}
.marquee-card--crimson i { color: var(--crimson-soft); }
.marquee-card--blue {
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.22), var(--bg-raised) 70%);
  box-shadow: var(--glow-blue);
}
.marquee-card--blue i { color: var(--blue-soft); }

/* ---------- إتاحة الوصول: تعطيل الحركة عند طلب المستخدم ---------- */
@media (prefers-reduced-motion: reduce) {
  .glass-card, .btn, .promo-track, .dot { transition: none; }
  .marquee-track { animation: none; }
  .marquee-viewport { overflow-x: auto; }
}