/*
  ╔══════════════════════════════════════════════════════════════╗
  ║        فولتشر قولد — ملف CSS الرئيسي (style.css)           ║
  ║   نظام تصميم لانس × ألوان وهوية فولتشر قولد               ║
  ╠══════════════════════════════════════════════════════════════╣
  ║  الفهرس:                                                    ║
  ║  01. Variables    ← متغيرات التصميم (ألوان VG الأصلية)    ║
  ║  02. Reset+Base   ← إعادة الضبط والأساسيات                ║
  ║  03. Utilities    ← كلاسات مشتركة                         ║
  ║  04. Topbar                                                ║
  ║  05. Navbar                                                ║
  ║  06. Hero                                                  ║
  ║  07. Stats                                                 ║
  ║  08. Features                                              ║
  ║  09. Devices                                               ║
  ║  10. Packages                                              ║
  ║  11. Kids Section                                          ║
  ║  12. How It Works                                          ║
  ║  13. Trust                                                 ║
  ║  14. FAQ                                                   ║
  ║  15. Final CTA                                             ║
  ║  16. Footer                                                ║
  ║  17. WhatsApp Float                                        ║
  ║  18. Animations                                            ║
  ║  19. Media Queries                                         ║
  ╚══════════════════════════════════════════════════════════════╝
*/


/* ════════════════════════════════════════════════════════════
   01. CSS VARIABLES — متغيرات التصميم
   ──────────────────────────────────────────────────────────
   ألوان فولتشر قولد الأصلية من ملف styles.css الأصلي
   ════════════════════════════════════════════════════════════ */
:root {
  /*
    ╔══════════════════════════════════════════════════════╗
    ║  ألوان مستخرجة مباشرة من لوغو فولتشر قولد          ║
    ║  الطائر الأزرق الملكي + البرتقالي + الكريمي        ║
    ╚══════════════════════════════════════════════════════╝
  */

  /* ── خلفيات: مستوحاة من الأزرق الداكن في اللوغو ── */
  --bg-deep:      #060C18;               /* أزرق أسود عميق = خلفية اللوغو */
  --bg-night:     #0A1220;               /* أزرق ليلي للأقسام الثانوية */
  --bg-elevated:  #101A2E;               /* أزرق داكن للبطاقات */
  --bg-glass:     rgba(13,27,62,0.60);   /* زجاجي أزرق داكن شفاف */

  /* ── اللون الأساسي: أزرق ملكي اللوغو ── */
  --gold:         #1E6FD4;               /* أزرق ملكي (ريش النسر) */
  --gold-bright:  #3D8FEF;               /* أزرق فاتح للـ hover */
  --gold-soft:    #6AABF5;               /* أزرق ناعم للتأثيرات */
  --gold-deep:    #1450A0;               /* أزرق داكن للـ active */
  --gold-muted:   rgba(30,111,212,0.12); /* أزرق شفاف للخلفيات */
  --gold-strong:  rgba(30,111,212,0.30); /* أزرق شفاف أقوى للحدود */

  /* ── اللون الثانوي: البرتقالي (المنقار والمخالب) ── */
  --accent:       #E87020;               /* برتقالي اللوغو — للـ CTA والتمييز */
  --accent-bright:#F5903A;               /* برتقالي فاتح للـ hover */
  --accent-muted: rgba(232,112,32,0.12); /* برتقالي شفاف */
  --accent-strong:rgba(232,112,32,0.30);

  /* ── الكريمي (outline اللوغو) ── */
  --cream:        #F0E8D0;               /* كريمي الحدود في اللوغو */
  --cream-muted:  rgba(240,232,208,0.08);

  /* ── ألوان تكميلية ── */
  --live-green:   #25D366;               /* أخضر واتساب/LIVE */
  --ink:          #EEF2FF;               /* أبيض مائل للأزرق = ينسجم مع الثيم */
  --ink-soft:     #C5CDE8;               /* نص ثانوي أزرق فاتح */
  --ink-mute:     #8A9AB8;               /* نص خفيف */
  --ink-faint:    #4A5A78;               /* نص خفي جداً */

  /* ── التوهجات ── */
  --glow-gold:        0 0 40px rgba(30,111,212,0.40);
  --glow-gold-strong: 0 0 80px rgba(61,143,239,0.60);
  --glow-accent:      0 0 40px rgba(232,112,32,0.40);
  --glow-green:       0 14px 40px -10px rgba(37,211,102,0.5);
  --shadow-card:      0 24px 64px rgba(0,0,0,0.60);

  /* ── التدرجات ── */
  /* التدرج الرئيسي: أزرق ملكي → أزرق ساطع (مثل ريش اللوغو) */
  --gradient-gold:    linear-gradient(135deg, #1E6FD4, #3D8FEF);
  /* تدرج الـ CTA: برتقالي → برتقالي ساطع */
  --gradient-accent:  linear-gradient(135deg, #E87020, #F5903A);
  /* تدرجات الخلفية */
  --gradient-dark:    linear-gradient(180deg, var(--bg-deep), var(--bg-night));
  --gradient-card:    linear-gradient(145deg, var(--bg-elevated), #0D1525);
  --gradient-hero:    radial-gradient(ellipse at 60% 50%, rgba(30,111,212,0.10) 0%, transparent 60%);

  /* ── الخطوط ── */
  --font-display: 'Almarai', 'Tajawal', system-ui, sans-serif;
  --font-body:    'Tajawal', 'Almarai', system-ui, sans-serif;
  --font-luxe:    'Cormorant Garamond', Georgia, serif;

  /* ── أحجام الخط ── */
  --fs-hero:    clamp(2.5rem, 7vw, 5rem);
  --fs-display: clamp(2rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.1rem, 1.5vw, 1.5rem);
  --fs-body:    clamp(1rem, 0.5vw + 0.875rem, 1.1rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* ── المسافات ── */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  5rem;
  --space-4xl:  8rem;

  /* ── الزوايا ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-full: 999px;

  /* ── الانتقالات ── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   200ms;
  --dur-med:    380ms;

  /* ── أبعاد Layout ── */
  --container-max: 1240px;

}


/* ════════════════════════════════════════════════════════════
   02. RESET + BASE
   ════════════════════════════════════════════════════════════ */

/* prefers-reduced-motion: يُقلّل الحركة للمستخدمين الذين يفضلون ذلك */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* box-sizing: border-box = العرض يشمل padding + border */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* scroll-padding: يمنع الـ navbar من إخفاء رأس القسم عند الانتقال */
  scroll-padding-top: calc(var(--topbar-h) + var(--navbar-h) + 16px);
}

body {
  font-family:  var(--font-body);
  font-size:    var(--fs-body);
  line-height:  1.7;
  color:        var(--ink);
  background:   var(--bg-deep);
  direction:    rtl;
  overflow-x:   hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul, ol  { list-style: none; }
a       { text-decoration: none; color: inherit; transition: color var(--dur-fast) var(--ease-out); }
img     { max-width: 100%; display: block; height: auto; }
button  { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; color: var(--ink); }

/* النص اللاتيني (VULTURE GOLD) يستخدم خط Cormorant الفاخر */
[lang="en"] { font-family: var(--font-luxe); letter-spacing: 0.03em; }

/* تحديد النص بالذهبي */
::selection { background: var(--gold); color: var(--bg-deep); }

/* focus-visible: حدود ذهبية عند التنقل بلوحة المفاتيح */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }

section { position: relative; padding-block: var(--space-4xl); }


/* ════════════════════════════════════════════════════════════
   03. UTILITIES — كلاسات مشتركة
   ════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-xl);
}

/*
  .highlight: نص بتدرج ذهبي
  background-clip: text + -webkit-text-fill-color: transparent
  → الـ gradient يظهر خلف النص الشفاف
*/
.highlight {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.num-highlight {
  color: var(--gold-bright);
  font-weight: 800;
  font-family: var(--font-display);
}

/* رأس القسم: توسيط + حد أقصى للعرض */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.section-header p {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* وسم صغير فوق العنوان */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-muted);
  border: 1px solid var(--gold-strong);
  padding: 6px var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.3px;
}

/* أزرار */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-med) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn--primary {
  background: var(--gradient-accent);
  color: #FFFFFF;
  box-shadow: var(--glow-accent);
}

.btn--primary:hover  { transform: translateY(-3px); box-shadow: 0 0 80px rgba(232,112,32,0.65); }
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--gold-bright);
  border-color: var(--gold-strong);
}

.btn--outline:hover { background: var(--gold-muted); border-color: var(--gold-bright); transform: translateY(-3px); }

/* أحجام الأزرار */
.btn--sm { padding: 9px 20px; font-size: var(--fs-sm); }
.btn--lg { padding: 18px 36px; font-size: 1.1rem; }

/* .included: قائمة مزايا بعلامة ✓ */
.included {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}

.included::before {
  content: '✓';
  color: var(--live-green);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ════════════════════════════════════════════════════════════
   05. NAVBAR — مستوحى من تصميم lanse.uk
   ──────────────────────────────────────────────────────────
   هيكل: [شعار يمين] | [روابط وسط] | [زر تواصل يسار]
   مثل lanse.uk بالضبط:
   • شعار في أقصى اليمين
   • روابط مُوسَّطة (flex:1 + justify-content:center)
   • زر CTA في أقصى اليسار
   • بدون topbar — الـ navbar مباشرة في الأعلى
   ════════════════════════════════════════════════════════════ */

/*
  --navbar-h: الارتفاع الثابت للـ navbar
  scroll-padding-top: يمنع القسم من الاختفاء خلف الـ navbar عند الانتقال
*/
:root {
  --navbar-h: 78px;
}

html {
  scroll-padding-top: calc(var(--navbar-h) + 16px);
}

/*
  .navbar:
  position: sticky → يبقى في الأعلى عند التمرير
  top: 0            → ملتصق بأعلى الـ viewport مباشرة (بدون topbar)
  z-index: 1000     → فوق كل المحتوى
  backdrop-filter   → تأثير زجاجي يُضبّب الخلفية
*/
.navbar {
  position: sticky;
  top: 0;
  height: var(--navbar-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(6,12,24,0.75);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

/*
  .scrolled ← JS يُضيفه عند window.scrollY > 50px
  خلفية أكثف + ظل لإبراز الـ navbar عن المحتوى
*/
.navbar.scrolled {
  background: rgba(6,12,24,0.97);
  border-bottom-color: rgba(30,111,212,0.15);
  box-shadow: 0 4px 40px rgba(0,0,0,0.40);
}

/*
  .navbar__inner:
  ثلاثة أعمدة بـ flexbox
  [شعار] ←→ [روابط] ←→ [actions]
*/
.navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* ── الشعار (العمود الأيمن) ── */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  text-decoration: none;
}

.navbar__logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(30,111,212,0.45));
  transition: filter var(--dur-fast);
}

.navbar__logo:hover .navbar__logo-img {
  filter: drop-shadow(0 0 16px rgba(30,111,212,0.70));
}

.navbar__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}

.logo-vg {
  font-family: var(--font-luxe);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: var(--ink-mute);
  font-weight: 600;
}

.logo-gold {
  font-family: var(--font-luxe);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 700;
}

/*
  ── روابط التنقل (العمود الأوسط) ──
  flex: 1 → تأخذ كل المساحة المتاحة بين الشعار والـ actions
  justify-content: center → توسيط الروابط تلقائياً
*/
.navbar__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;              /* ← هذا يُوسّط الروابط مثل lanse.uk */
  list-style: none;
}

.navbar__links a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-mute);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
  position: relative;
}

.navbar__links a:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.06);
}

/* رابط القسم النشط */
.navbar__links a.active-link {
  color: var(--gold-bright);
  background: var(--gold-muted);
}

/* خط تحت الرابط النشط */
.navbar__links a.active-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 14px;
  left: 14px;
  height: 2px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
}

/*
  ── navbar__actions (العمود الأيسر) ──
  يحتوي: زر التواصل + زر hamburger (الجوال)
  flex-shrink: 0 → لا ينكمش عند ضيق المساحة
*/
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  /*
    margin-inline-start: auto
    يدفع الـ actions لأقصى اليسار تلقائياً
    يعمل في RTL و LTR بدون تعديل
  */
  margin-inline-start: auto;
}

/*
  زر "تواصل معنا" في الـ navbar
  مثل lanse.uk: زر برتقالي/أساسي في أقصى اليسار
*/
.navbar__cta-btn {
  white-space: nowrap;
  font-size: var(--fs-sm) !important;
  padding: 10px 20px !important;
}

/*
  زر Hamburger (☰) — يظهر فقط في الجوال
  display: none في الديسكتوب
  display: flex في شاشات < 768px (عبر media query)
*/
.navbar__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid rgba(30,111,212,0.20);
  border-radius: var(--radius-md);
  background: rgba(30,111,212,0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.navbar__burger:hover {
  border-color: rgba(30,111,212,0.45);
  background: rgba(30,111,212,0.12);
}

/* الخطوط الثلاثة */
.navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-mute);
  border-radius: var(--radius-full);
  transition: transform 0.35s ease, opacity 0.25s ease, background 0.2s;
  transform-origin: center;
}

/* .open → ☰ يتحول لـ ✕ */
.navbar__burger.open span:first-child  { transform: translateY(7px) rotate(45deg);  background: var(--gold); }
.navbar__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__burger.open span:last-child   { transform: translateY(-7px) rotate(-45deg); background: var(--gold); }

/* ════════════════════════════════════════════════════════════
   06. HERO
/* ════════════════════════════════════════════════════════════
   06. HERO
   ════════════════════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: var(--space-3xl);
  min-height: calc(100vh - var(--navbar-h));
  padding: var(--space-3xl) var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  overflow: visible; /* إصلاح: visible بدلاً من hidden لإظهار المحتوى */
}

/* إلغاء الـ padding العام من section على hero */
#hero {
  padding-block: 0;
  position: relative;
  overflow: hidden;
}

/* خلفية الـ hero: أكوار ضبابية + شبكة */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

/* الكرة الذهبية الكبيرة (اليمين) */
.hero__orb--1 {
  width: 600px; height: 600px;
  background: rgba(30,111,212,0.15);
  top: -150px; right: -100px;
  animation: float-shape 14s ease-in-out infinite;
}

/* الكرة الزرقاء الداكنة (اليسار) */
.hero__orb--2 {
  width: 400px; height: 400px;
  background: rgba(30,50,120,0.15);
  bottom: -100px; left: 5%;
  animation: float-shape 18s ease-in-out infinite reverse;
}

/* الكرة الذهبية الصغيرة (وسط) */
.hero__orb--3 {
  width: 250px; height: 250px;
  background: rgba(232,112,32,0.07);
  top: 40%; left: 40%;
  animation: float-shape 22s ease-in-out infinite 2s;
}

/* خطوط الشبكة الزخرفية */
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,111,212,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,111,212,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
}

.hero__content { position: relative; z-index: 1; }

/* VULTURE GOLD eyebrow */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-luxe);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--cream);
  background: var(--cream-muted);
  border: 1px solid rgba(240,232,208,0.20);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
  animation: fade-up 0.8s ease both;
}

/* العنوان الرئيسي h1 */
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  animation: fade-up 0.8s ease 0.1s both;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: var(--space-xl);
  animation: fade-up 0.8s ease 0.2s both;
}

.hero__tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  animation: fade-up 0.8s ease 0.3s both;
}

.hero__tags span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 7px 14px;
  border-radius: var(--radius-full);
}

.tag-check { color: var(--live-green); }

.hero__cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  animation: fade-up 0.8s ease 0.4s both;
}

.hero__caption {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  animation: fade-up 0.8s ease 0.5s both;
}

/* الجانب المرئي (التلفاز) */
.hero__visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-up 0.8s ease 0.3s both;
}

.hero__tv-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* التلفاز */
.hero__tv { position: relative; animation: card-float 5s ease-in-out infinite; }

/* إطار التلفاز */
.tv-bezel {
  background: linear-gradient(145deg, #1A2035, #0E1220);
  border: 1px solid rgba(30,111,212,0.25);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-card), var(--glow-gold);
}

/* شاشة التلفاز */
.tv-screen {
  background: linear-gradient(145deg, #070B14, #111827);
  border-radius: 8px;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-screen__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  width: 100%;
}

.tv-logo {
  width: 40px; height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.6));
}

.tv-brand {
  font-family: var(--font-luxe);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--gold-soft);
  font-weight: 600;
}

/* شريط التقدم المتحرك */
.tv-progress {
  width: 80%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tv-progress__bar {
  height: 100%;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  width: 0%;
  animation: progress-fill 4s ease-in-out infinite;
}

/* محاكاة بطاقات المحتوى */
.tv-cards {
  display: flex;
  gap: 6px;
  width: 90%;
}

.tv-card {
  height: 28px;
  border-radius: 4px;
  flex: 1;
  background: rgba(255,255,255,0.06);
  animation: shimmer 2s ease-in-out infinite;
}

.tv-card--1 { animation-delay: 0s; flex: 1.5; }
.tv-card--2 { animation-delay: 0.3s; }
.tv-card--3 { animation-delay: 0.6s; }
.tv-card--4 { animation-delay: 0.9s; flex: 0.8; }

/* نقطة LIVE الخضراء */
.tv-live {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: white;
  background: rgba(37,211,102,0.9);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.live-dot {
  width: 5px; height: 5px;
  background: white;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* حامل التلفاز */
.tv-stand { display: flex; flex-direction: column; align-items: center; }
.tv-stand__neck { width: 24px; height: 20px; background: #1A2035; border-left: 1px solid rgba(212,175,55,0.1); border-right: 1px solid rgba(212,175,55,0.1); }
.tv-stand__base { width: 80px; height: 8px; background: linear-gradient(90deg, transparent, #1A2035, transparent); border-radius: 4px; }

/* شارات عائمة */
.floating-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fbadge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-muted);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  animation: fade-up 0.6s ease both;
  white-space: nowrap;
}

.fbadge:hover { border-color: var(--gold-strong); transform: translateY(-2px); }
.fbadge__icon { font-size: 1.1rem; }

/* مواضع الشارات */
.fbadge:nth-child(1) { top: 5%;  inset-inline-start: -10%; }
.fbadge:nth-child(2) { top: 30%; inset-inline-end: -12%; }
.fbadge:nth-child(3) { bottom: 25%; inset-inline-start: -8%; }
.fbadge:nth-child(4) { bottom: 5%; inset-inline-end: -10%; }


/* ════════════════════════════════════════════════════════════
   07. STATS — إحصائيات المكتبة
   ════════════════════════════════════════════════════════════ */
.stats {
  padding-block: var(--space-2xl);
  background: var(--bg-night);
  border-block: 1px solid rgba(212,175,55,0.08);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stat-item {
  text-align: center;
  padding: var(--space-xl);
  background: var(--bg-elevated);
  border: 1px solid rgba(212,175,55,0.1);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-med) var(--ease-out);
}

.stat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(212,175,55,0.05), transparent 70%);
  pointer-events: none;
}

.stat-item:hover { border-color: var(--gold-strong); transform: translateY(-4px); box-shadow: var(--glow-gold); }

.stat-num-wrap { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: var(--space-xs); }

/* الرقم الكبير بتدرج ذهبي */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-plus { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.stat-label { font-size: var(--fs-sm); color: var(--ink-mute); font-weight: 600; display: block; margin-bottom: var(--space-sm); }
.stat-icon { font-size: 1.5rem; }


/* ════════════════════════════════════════════════════════════
   08. FEATURES — فئات المحتوى
   ════════════════════════════════════════════════════════════ */
.features { background: var(--bg-deep); }

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* بطاقة فئة محتوى */
.feature-card {
  background: var(--gradient-card);
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              border-color var(--dur-med), box-shadow var(--dur-med);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-end: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(212,175,55,0.06), transparent 70%);
  pointer-events: none;
}

.feature-card.visible { opacity: 1; transform: translateY(0); }
.feature-card:hover { border-color: var(--gold-strong); transform: translateY(-6px); box-shadow: var(--shadow-card); }

/* ألوان مميزة لكل فئة */
.feature-card--sport .feature-card__icon  { filter: drop-shadow(0 0 8px rgba(37,211,102,0.4)); }
.feature-card--movies .feature-card__icon { filter: drop-shadow(0 0 8px rgba(212,175,55,0.4)); }
.feature-card--arabic .feature-card__icon { filter: drop-shadow(0 0 8px rgba(232,194,92,0.5)); }
.feature-card--kids .feature-card__icon   { filter: drop-shadow(0 0 8px rgba(255,183,197,0.4)); }

/* البطاقة المميزة */
.feature-card--featured {
  background: linear-gradient(145deg, #1A1A2E, #16213E);
  border-color: var(--gold-strong);
  box-shadow: 0 0 40px rgba(212,175,55,0.06);
}

.feature-card--featured:hover {
  border-color: rgba(212,175,55,0.5);
  box-shadow: var(--glow-gold-strong), var(--shadow-card);
}

.feature-card__icon { font-size: 2.5rem; line-height: 1; }
.feature-card h3 { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 800; }
.feature-card p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; flex: 1; }
.feature-card p strong { color: var(--gold-bright); }

.feature-card__count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-muted);
  border: 1px solid var(--gold-strong);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.feature-card__cta {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--dur-fast);
}

.feature-card__cta:hover { gap: 10px; }

/* Staggered animation: كل بطاقة تظهر بتأخير */
.feature-card:nth-child(1) { transition-delay: 0.05s; }
.feature-card:nth-child(2) { transition-delay: 0.10s; }
.feature-card:nth-child(3) { transition-delay: 0.15s; }
.feature-card:nth-child(4) { transition-delay: 0.20s; }
.feature-card:nth-child(5) { transition-delay: 0.25s; }
.feature-card:nth-child(6) { transition-delay: 0.30s; }


/* ════════════════════════════════════════════════════════════
   09. DEVICES — الأجهزة المدعومة
   ════════════════════════════════════════════════════════════ */
.devices { background: var(--bg-night); }

.devices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.device-card {
  background: var(--gradient-card);
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: all var(--dur-med) var(--ease-out);
}

.device-card:hover { border-color: var(--gold-strong); transform: translateY(-5px); box-shadow: var(--glow-gold); }

.device-card--featured { border-color: var(--gold-strong); background: linear-gradient(145deg, #18182A, #1e1e38); }

.device-card__icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--space-xs); }
.device-card h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; }
.device-card p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.6; }

.devices__note {
  text-align: center;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--space-lg);
  background: var(--gold-muted);
  border: 1px solid var(--gold-strong);
  border-radius: var(--radius-xl);
  max-width: 600px;
  margin: 0 auto;
}


/* ════════════════════════════════════════════════════════════
   10. PACKAGES — الباقات والأسعار
   ════════════════════════════════════════════════════════════ */
.packages { background: var(--bg-deep); }

/* Toggle العملة */
.currency-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.curr-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-mute);
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.07);
  transition: all var(--dur-fast);
  cursor: pointer;
}

.curr-btn:hover { color: var(--gold); border-color: var(--gold-strong); }

/* الزر النشط: ذهبي */
.curr-btn.active {
  background: var(--gradient-accent);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: var(--glow-gold);
}

.curr-btn small { font-size: var(--fs-xs); opacity: 0.7; }

/* Toggle نوع الباقة */
.pkg-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--bg-elevated);
  border: 1px solid rgba(212,175,55,0.1);
  padding: 6px;
  border-radius: var(--radius-2xl);
  width: fit-content;
  margin: 0 auto var(--space-2xl);
}

.pkg-toggle__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-mute);
  transition: all var(--dur-med) var(--ease-out);
  cursor: pointer;
}

.pkg-toggle__sub { font-size: var(--fs-xs); font-weight: 400; opacity: 0.7; }
.pkg-toggle__btn:hover { color: var(--gold); }
.pkg-toggle__btn.active { background: var(--gradient-accent); color: #FFFFFF; box-shadow: var(--glow-accent); }
.pkg-toggle__btn.active .pkg-toggle__sub { opacity: 0.8; color: rgba(255,255,255,0.8); }

.pkg-panel { animation: fade-up 0.4s ease both; }
.pkg-panel--hidden { display: none; }

/* شبكة بطاقات الباقات (يُملؤها JS) */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.plans-grid--center { max-width: 560px; margin: 0 auto var(--space-xl); }

/* بطاقة باقة واحدة (يُنشئها JS) */
.plan-card {
  background: var(--gradient-card);
  border: 1px solid rgba(212,175,55,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: all var(--dur-med) var(--ease-out);
  position: relative;
}

.plan-card:hover { transform: translateY(-6px); border-color: var(--gold-strong); box-shadow: var(--shadow-card); }

/* البطاقة المميزة (الأكثر شعبية / أفضل قيمة) */
.plan-card--featured {
  background: linear-gradient(145deg, #1A1A30, #20203A);
  border-color: var(--gold-strong);
  box-shadow: 0 0 40px rgba(212,175,55,0.08);
}

.plan-card--featured:hover { box-shadow: var(--glow-gold-strong), var(--shadow-card); border-color: rgba(212,175,55,0.6); }

/* شارة "الأكثر شعبية" */
.plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--gradient-accent);
  color: var(--bg-deep);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* في RTL: translate(-50%) يُوسَّط من اليمين */
:root[dir="rtl"] .plan-badge { transform: translateX(50%); }

.plan-name { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 800; }
.plan-devices { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 600; }

.plan-price { display: flex; align-items: baseline; gap: 4px; }

.plan-price .amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-price .currency { font-size: 1.1rem; font-weight: 700; color: var(--gold-bright); }

.plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.plan-features li { font-size: var(--fs-sm); color: var(--ink-mute); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.plan-features li::before { content: '✓'; color: var(--live-green); font-weight: 900; flex-shrink: 0; }

/* زر الاشتراك */
.cta-btn {
  display: block;
  text-align: center;
  padding: 13px var(--space-xl);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: all var(--dur-med) var(--ease-out);
  text-decoration: none;
  border: 2px solid transparent;
}

.cta-gold { background: var(--gradient-accent); color: #FFFFFF; box-shadow: var(--glow-accent); }
.cta-gold:hover { transform: translateY(-2px); box-shadow: 0 0 60px rgba(232,112,32,0.65); }

/* قسم طرق الدفع */
.packages__payments {
  text-align: center;
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--bg-elevated);
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: var(--radius-xl);
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--space-2xl);
}

.packages__payments p { font-size: var(--fs-sm); color: var(--ink-mute); margin-bottom: var(--space-md); }

.payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.payment-icons img,
.payment-icons svg { opacity: 0.8; transition: opacity var(--dur-fast); }
.payment-icons img:hover,
.payment-icons svg:hover { opacity: 1; }

.payments__note { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: 0; }


/* ════════════════════════════════════════════════════════════
   11. KIDS SECTION — باقة الأطفال
   ════════════════════════════════════════════════════════════ */
.kids-section { background: var(--bg-night); }

.kids-inner {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  background: linear-gradient(135deg, rgba(30,111,212,0.06), rgba(232,112,32,0.05));
  border: 1px solid rgba(30,111,212,0.18);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
}

.kids-visual {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* فقاعات زخرفية للأطفال */
.kids-bubble {
  position: absolute;
  font-size: 2.5rem;
  animation: float-shape 6s ease-in-out infinite;
}

.kids-bubble--1 { top: 10%; right: 10%; animation-delay: 0s; }
.kids-bubble--2 { top: 50%; left: 5%; animation-delay: 1s; font-size: 2rem; }
.kids-bubble--3 { bottom: 10%; right: 20%; animation-delay: 2s; font-size: 3rem; }

.kids-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,183,197,0.08);
  border: 1px solid rgba(255,183,197,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  font-size: 3.5rem;
}

.kids-badge span:last-child {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #FFB7C5;
}

/* محتوى باقة الأطفال */
.kids-content h2 { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.kids-content p { color: var(--ink-soft); line-height: 1.8; margin-bottom: var(--space-xl); }

.kids-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}


/* ════════════════════════════════════════════════════════════
   12. HOW IT WORKS — خطوات البدء
   ════════════════════════════════════════════════════════════ */
.how-it-works { background: var(--bg-deep); }

.steps--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  position: relative;
  margin-bottom: var(--space-2xl);
}

/* خط واصل بين الخطوات */
.steps--3::before {
  content: '';
  position: absolute;
  top: 28px;
  right: calc(16.5% - 10px);
  left: calc(16.5% - 10px);
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold-strong), var(--gold-strong), transparent);
  pointer-events: none;
}

.step { text-align: center; padding: var(--space-xl); position: relative; z-index: 1; }

/* رقم الخطوة: دائرة ذهبية */
.step__number {
  width: 56px; height: 56px;
  background: var(--gradient-accent);
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: var(--glow-accent);
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
}

.step__icon { font-size: 2rem; margin-bottom: var(--space-sm); }
.step h3 { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 800; margin-bottom: var(--space-sm); }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }

.how-it-works__cta { text-align: center; }


/* ════════════════════════════════════════════════════════════
   13. TRUST — إحصائيات الثقة
   ════════════════════════════════════════════════════════════ */
.trust { background: var(--bg-night); border-block: 1px solid rgba(212,175,55,0.08); }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.trust-stat {
  text-align: center;
  padding: var(--space-xl);
  background: var(--bg-elevated);
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: var(--radius-xl);
  transition: all var(--dur-med);
}

.trust-stat:hover { border-color: var(--gold-strong); transform: translateY(-4px); box-shadow: var(--glow-gold); }

.trust-num-wrap { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: var(--space-xs); }

.trust-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-plus { font-size: 1.4rem; font-weight: 800; color: var(--gold); }
.trust-label { font-size: var(--fs-sm); color: var(--ink-mute); font-weight: 600; display: block; }


/* ════════════════════════════════════════════════════════════
   14. FAQ — الأسئلة الشائعة
   ════════════════════════════════════════════════════════════ */
.faq { background: var(--bg-deep); }

.faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--gradient-card);
  border: 1px solid rgba(212,175,55,0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--dur-med), box-shadow var(--dur-med);
}

.faq-item.open { border-color: var(--gold-strong); box-shadow: 0 0 30px rgba(212,175,55,0.05); }

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background var(--dur-fast);
}

.faq-item__question:hover { background: rgba(212,175,55,0.03); }

.faq-item__question span:first-child {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  line-height: 1.5;
  font-family: var(--font-display);
}

/* أيقونة +/× */
.faq-icon {
  width: 32px; height: 32px;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--gold-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast);
}

/* .open: + يتحول لـ × بدوران 45° */
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--gold-muted); }

.faq-item__answer { padding: 0 var(--space-xl) var(--space-xl); }
.faq-item__answer[hidden] { display: none; }
.faq-item__answer p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }


/* ════════════════════════════════════════════════════════════
   15. FINAL CTA — دعوة نهائية
   ════════════════════════════════════════════════════════════ */
.final-cta { background: var(--bg-night); overflow: hidden; }

.final-cta__inner {
  position: relative;
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
}

/* أكوار خلفية */
.final-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.cta-orb--1 { width: 400px; height: 400px; background: rgba(30,111,212,0.14); top: -100px; right: -50px; animation: float-shape 12s ease-in-out infinite; }
.cta-orb--2 { width: 300px; height: 300px; background: rgba(232,112,32,0.08); bottom: -80px; left: 5%; animation: float-shape 16s ease-in-out infinite reverse; }

.final-cta__content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.final-cta__title { font-size: var(--fs-display); font-weight: 800; margin-bottom: var(--space-md); }
.final-cta__content > p { color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.8; margin-bottom: var(--space-2xl); }

.final-cta__buttons { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xl); }

.final-cta__tel { font-size: var(--fs-sm); color: var(--ink-mute); }
.final-cta__tel a { color: var(--gold); font-weight: 700; direction: ltr; display: inline-block; }
.final-cta__tel a:hover { color: var(--gold-bright); }


/* ════════════════════════════════════════════════════════════
   16. FOOTER
   ════════════════════════════════════════════════════════════ */
.footer {
  padding: var(--space-3xl) 0 var(--space-xl);
  background: var(--bg-deep);
  border-top: 1px solid rgba(212,175,55,0.08);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.footer__logo img { width: 36px; height: 36px; object-fit: contain; }
.footer__logo span { font-family: var(--font-luxe); font-size: 1.2rem; letter-spacing: 0.12em; color: var(--accent); font-weight: 600; }

.footer__col--brand p { font-size: var(--fs-sm); color: var(--ink-mute); line-height: 1.8; margin-bottom: var(--space-lg); max-width: 280px; }

.footer__socials { display: flex; gap: var(--space-sm); }

.footer__socials a {
  width: 38px; height: 38px;
  background: var(--bg-elevated);
  border: 1px solid rgba(212,175,55,0.1);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  transition: all var(--dur-fast);
}

.footer__socials a:hover { color: var(--gold); border-color: var(--gold-strong); background: var(--gold-muted); transform: translateY(-2px); }

.footer__col h4 { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); margin-bottom: var(--space-lg); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__col ul li a { font-size: var(--fs-sm); color: var(--ink-mute); transition: color var(--dur-fast); display: block; }
.footer__col ul li a:hover { color: var(--gold); }
.footer__col ul li { font-size: var(--fs-sm); color: var(--ink-faint); }

.footer__bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(212,175,55,0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__bottom p { font-size: var(--fs-xs); color: var(--ink-faint); }
.footer__tagline { font-family: var(--font-luxe); letter-spacing: 0.05em; font-size: var(--fs-xs); color: var(--accent); opacity: 0.6; }


/* ════════════════════════════════════════════════════════════
   17. WHATSAPP FLOAT
   ════════════════════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 9999;
  width: 62px; height: 62px;
  background: var(--live-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.40);
  transition: transform var(--dur-med), box-shadow var(--dur-med);
  animation: wa-pulse 3.5s ease-in-out infinite;
}

.whatsapp-float svg { width: 33px; height: 33px; color: white; }

.whatsapp-float:hover { transform: scale(1.12) translateY(-4px); box-shadow: 0 8px 36px rgba(37,211,102,0.55); animation-play-state: paused; }

.whatsapp-float__tooltip {
  position: absolute;
  left: calc(100% + 14px);
  white-space: nowrap;
  background: var(--bg-elevated);
  border: 1px solid rgba(30,111,212,0.25);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px var(--space-md);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med);
}

.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--bg-elevated);
}

.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; }


/* ════════════════════════════════════════════════════════════
   10b. PAY BADGES — بطاقات طرق الدفع
   ──────────────────────────────────────────────────────────
   تصميم مطابق لصورة "الحل الصحيح":
   • كل بطاقة: مستطيل موحّد بزوايا منحنية
   • خلفية داكنة موحّدة
   • المحتوى (نص أو أيقونة) مُوسَّط تماماً
   ════════════════════════════════════════════════════════════ */

/*
  .payment-icons: حاوية flex تُوزّع البطاقات بشكل متساوٍ
  gap موحّد + wrap للجوال
*/
.payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/*
  .pay-badge: الحاوية الموحّدة لكل بطاقة دفع
  ─────────────────────────────────────────────
  width: 130px  ← عرض ثابت لكل البطاقات
  height: 70px  ← ارتفاع ثابت لكل البطاقات
  display: flex + center ← المحتوى مُوسَّط دائماً
  overflow: hidden ← يمنع أي محتوى من الخروج
*/
.pay-badge {
  width: 130px;
  height: 70px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  overflow: hidden;
  transition: border-color var(--dur-fast),
              background   var(--dur-fast),
              transform    var(--dur-fast);
  cursor: default;
}

.pay-badge:hover {
  border-color: rgba(30, 111, 212, 0.40);
  background: rgba(30, 111, 212, 0.08);
  transform: translateY(-3px);
}

/*
  .pay-badge__svg: SVG الأيقونة داخل البطاقة
  ─────────────────────────────────────────────
  width: 100% + height: 100% ← يملأ الحاوية
  overflow: visible ← يضمن ظهور كل العناصر
*/
.pay-badge__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/*
  .pay-badge__img: صورة SVG خارجية (مثل Apple Pay)
  max-width/height: تضمن عدم تجاوز حدود البطاقة
  object-fit: contain ← يحافظ على النسبة بدون قص
*/
.pay-badge__img {
  max-width: 90%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: brightness(1.05);
}

/* ════════════════════════════════════════════════════════════
   17b. SVG ICONS — أيقونات SVG الأصلية
   ──────────────────────────────────────────────────────────
   .icon = الأيقونة الأساسية (تأخذ لون النص تلقائياً)
   كل قسم يُعيّن حجم الأيقونة عبر width/height في CSS
   ════════════════════════════════════════════════════════════ */

/*
  .icon: الأيقونة SVG الأساسية
  display: block ← تمنع المساحة الإضافية أسفل الـ inline SVG
  flex-shrink: 0 ← لا تنكمش داخل flex container
*/
.icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* .icon--inline: أيقونة داخل نص (مثل قفل الدفع) */
.icon--inline {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 6px;
  width: 16px;
  height: 16px;
}

/*
  أيقونات شارات الـ Hero
  نريدها صغيرة ومتوسطة اللون
*/
.fbadge__icon .icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

/*
  أيقونات الإحصائيات
  أكبر وبلون ذهبي للإبراز
*/
.stat-icon .icon {
  width: 28px;
  height: 28px;
  color: var(--gold);
  margin: 0 auto;
  opacity: 0.8;
}

/*
  أيقونات بطاقات المحتوى (رياضة، أفلام...)
  كبيرة وبلون ذهبي
*/
.feature-card__icon .icon {
  width: 40px;
  height: 40px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

/* ألوان مخصصة لكل فئة */
.feature-card--sport  .feature-card__icon .icon { color: #48D494; }
.feature-card--movies .feature-card__icon .icon { color: var(--accent-bright); }
.feature-card--arabic .feature-card__icon .icon { color: var(--gold-bright); }
.feature-card--news   .feature-card__icon .icon { color: #64B5F6; }
.feature-card--docs   .feature-card__icon .icon { color: #CE93D8; }
.feature-card--kids   .feature-card__icon .icon { color: #FFB7C5; }

/*
  أيقونات بطاقات الأجهزة
  متوسطة الحجم، ذهبية
*/
.device-card__icon .icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin: 0 auto var(--space-xs);
  transition: color var(--dur-fast), transform var(--dur-med) var(--ease-out);
}

.device-card:hover .device-card__icon .icon {
  color: var(--gold-bright);
  transform: scale(1.1);
}

/*
  أيقونات خطوات البدء
  كبيرة وملونة
*/
.step__icon .icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  margin: 0 auto var(--space-sm);
}

/*
  أيقونات فقاعات باقة الأطفال
  بألوان ناعمة للأطفال
*/
.kids-bubble .icon {
  width: 36px;
  height: 36px;
}

.kids-bubble--1 .icon { color: var(--gold-soft); }
.kids-bubble--2 .icon { color: #A8E6CF; } /* أخضر نعناعي */
.kids-bubble--3 .icon { color: #FFB7C5; } /* وردي ناعم */

/* أيقونة درع الأطفال في الـ badge */
.kids-badge span .icon {
  width: 50px;
  height: 50px;
  color: #FFB7C5;
}

/* أيقونة درع في قسم الإحصائيات */
.stat-icon .icon[data-type="shield"] { color: var(--live-green); }

/*
  أيقونات toggle الباقات
  صغيرة بجانب النص
*/
.pkg-toggle__btn .icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

/*
  أيقونات السوشيال في الـ Footer
  ترث لون الرابط تلقائياً
*/
.footer__socials a .icon {
  width: 18px;
  height: 18px;
}

/* ════════════════════════════════════════════════════════════
   18. ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* fade-up: ظهور من الأسفل للأعلى مع زيادة الشفافية */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* float-shape: حركة عشوائية ناعمة للأكوار الخلفية */
@keyframes float-shape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(25px, -18px) scale(1.04); }
  66%       { transform: translate(-18px, 12px) scale(0.97); }
}

/* card-float: ارتفاع وهبوط بطيء للتلفاز */
@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(0.5deg); }
}

/* pulse-dot: نقطة نابضة */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.7; }
}

/* wa-pulse: نبضة خضراء لزر واتساب */
@keyframes wa-pulse {
  0%   { box-shadow: 0 4px 20px rgba(37,211,102,0.40); }
  50%  { box-shadow: 0 4px 30px rgba(37,211,102,0.65), 0 0 0 12px rgba(37,211,102,0.10); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,0.40); }
}

/* progress-fill: شريط التقدم في شاشة TV */
@keyframes progress-fill {
  0%   { width: 0%; }
  70%  { width: 75%; }
  100% { width: 75%; }
}

/* shimmer: تأثير لمعان لبطاقات TV */
@keyframes shimmer {
  0%, 100% { background: rgba(255,255,255,0.04); }
  50%       { background: rgba(255,255,255,0.09); }
}


/* ════════════════════════════════════════════════════════════
   19. MEDIA QUERIES — استجابة الجوال
   ════════════════════════════════════════════════════════════ */

/* ── تابلت: 1024px وأصغر ── */
/* ════════════════════════════════════════════════════════════
   RESPONSIVE — تابلت (1024px وأصغر)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* hero: عمود واحد مع padding-top يعوّض الـ navbar العائم */
  #hero .hero { grid-template-columns: 1fr; text-align: center; padding-block: var(--space-2xl); }
  /* في الجوال: الـ navbar fixed يحتاج فراغ أعلى الـ hero */
  #hero { padding-top: 86px; }
  .hero__visual { order: -1; }
  .hero__tags, .hero__cta { justify-content: center; }
  .hero__subtitle { margin-inline: auto; }

  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .devices__grid  { grid-template-columns: repeat(3, 1fr); }
  .steps--3       { grid-template-columns: repeat(3, 1fr); }
  .stats__grid    { grid-template-columns: repeat(2, 1fr); }
  .trust__grid    { grid-template-columns: repeat(2, 1fr); }
  .footer__grid   { grid-template-columns: 1fr 1fr; }

  .kids-inner    { grid-template-columns: 1fr; text-align: center; }
  .kids-visual   { height: 180px; }
  .kids-features { align-items: center; }

  /* أزرار أصغر في التابلت */
  .btn { padding: 13px 22px; font-size: 0.95rem; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — جوال (768px وأصغر)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  section { padding-block: var(--space-xl); }

  /*
    ── Navbar عائم في الجوال ──
    مثل صورة الحل بالضبط:
    • فراغ من الأعلى والجانبين (margin)
    • حواف مستديرة (border-radius)
    • يبدو كبطاقة عائمة في الهواء
    ─────────────────────────────────────
    position: fixed → يبقى ثابتاً أثناء التمرير
    top: 12px       → فراغ من الأعلى
    margin: 0 12px  → فراغ من الجانبين
    width: calc(100% - 24px) → يأخذ العرض الكامل ناقص الهوامش
  */
  .navbar {
    position: fixed;
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    height: 58px;
    border-radius: 18px;
    background: rgba(6, 12, 24, 0.82);
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid rgba(30, 111, 212, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                0 2px 8px rgba(0, 0, 0, 0.25);
  }

  /*
    .navbar.scrolled في الجوال:
    يزيد شفافية الخلفية عند التمرير
  */
  .navbar.scrolled {
    background: rgba(6, 12, 24, 0.95);
    border-color: rgba(30, 111, 212, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.60),
                0 2px 8px rgba(0, 0, 0, 0.30);
  }

  /*
    scroll-padding: يعوّض الـ navbar العائم + فراغ
    top(12px) + height(58px) + هامش إضافي(16px) = 86px
  */
  html {
    scroll-padding-top: 86px;
  }

  .navbar__inner {
    padding-inline: var(--space-md);
  }

  /* إظهار hamburger + إخفاء زر التواصل في الجوال */
  .navbar__burger   { display: flex; }
  .navbar__cta-btn  { display: none; }

  /*
    ── قائمة الجوال المنسدلة ──
    تظهر كبطاقة عائمة تحت الـ navbar مباشرة
    top = navbar top(12) + height(58) + gap(8) = 78px
    نفس هوامش الـ navbar من الجانبين (12px)
    border-radius مطابق للـ navbar
  */
  .navbar__links {
    position: fixed;
    top: 78px;
    right: 12px;
    left: 12px;
    width: auto;
    z-index: 999;
    background: rgba(6, 12, 24, 0.96);
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid rgba(30, 111, 212, 0.18);
    border-radius: 18px;
    flex-direction: column;
    padding: var(--space-md) var(--space-lg);
    gap: 2px;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity   0.28s ease;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  }

  .navbar__links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .navbar__links a {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px var(--space-md);
    text-align: center;
    border-radius: var(--radius-md);
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .navbar__links a:last-child { border-bottom: none; }

  .navbar__links a:hover,
  .navbar__links a.active-link {
    background: rgba(30, 111, 212, 0.10);
    color: var(--gold-bright);
  }

  /* ── شبكات متعددة تصبح عموداً واحداً ── */
  .features__grid { grid-template-columns: 1fr; }
  .devices__grid  { grid-template-columns: repeat(2, 1fr); }
  .steps--3       { grid-template-columns: 1fr; }
  .steps--3::before { display: none; }
  .stats__grid    { grid-template-columns: repeat(2, 1fr); }
  .trust__grid    { grid-template-columns: repeat(2, 1fr); }
  .footer__grid   { grid-template-columns: 1fr; }
  .plans-grid     { grid-template-columns: repeat(2, 1fr); }

  .pkg-toggle {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-inline: 0;
    border-radius: var(--radius-xl);
  }

  .container { padding-inline: var(--space-md); }

  /* إخفاء الشارات العائمة في الجوال (تأخذ مساحة) */
  .floating-badges { display: none; }

  /* تصغير شاشة TV */
  .hero__tv-wrap { max-width: 280px; margin: 0 auto; }

  /* ── أحجام الأزرار في الجوال ──
     أصغر من الديسكتوب لتناسب الشاشات الصغيرة */
  .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  .btn--lg {
    padding: 14px 24px;
    font-size: 1rem;
  }

  /* ── بطاقات الدفع في الجوال ── */
  .pay-badge {
    width: 100px;
    height: 54px;
  }

  .payment-icons { gap: 8px; }

  /* ── Hero في الجوال ── */
  .hero__title { letter-spacing: -0.5px; }

  .hero__tags { gap: var(--space-xs); }
  .hero__tags span { font-size: 0.8rem; padding: 5px 10px; }

  /* ── section-header ── */
  .section-header h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* ── stats ── */
  .stat-num  { font-size: clamp(1.6rem, 5vw, 2rem); }
  .trust-num { font-size: clamp(1.6rem, 5vw, 2rem); }

  /* ── packages ── */
  .price-amount { font-size: clamp(1.8rem, 5vw, 2.5rem); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — جوال صغير (480px وأصغر)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* أزرار CTA بعرض كامل */
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  .stats__grid    { grid-template-columns: 1fr 1fr; }
  .trust__grid    { grid-template-columns: 1fr 1fr; }
  .devices__grid  { grid-template-columns: 1fr 1fr; }
  .plans-grid     { grid-template-columns: 1fr; }

  .final-cta__buttons { flex-direction: column; align-items: center; }
  .final-cta__buttons .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* currency toggle أصغر */
  .currency-toggle { gap: 4px; flex-wrap: wrap; }
  .curr-btn { padding: 7px 10px; font-size: 0.72rem; }

  /* أزرار أصغر */
  .btn { padding: 11px 18px; font-size: 0.85rem; }
  .btn--lg { padding: 13px 22px; font-size: 0.9rem; }

  /* بطاقات الدفع أصغر */
  .pay-badge { width: 82px; height: 46px; padding: 8px 10px; }
  .payment-icons { gap: 6px; }

  /* topbar: اكتفاء بزر فقط */
  /* جوال صغير: تقليل الهوامش + hero padding */
  #hero { padding-top: 78px; }
  .navbar {
    top: 10px;
    right: 10px;
    left: 10px;
    height: 54px;
    border-radius: 16px;
  }
  html { scroll-padding-top: 78px; }
  .navbar__links {
    top: 72px;
    right: 10px;
    left: 10px;
    border-radius: 16px;
  }

  /* Hero */
  .hero__eyebrow { font-size: 0.65rem; padding: 5px 12px; letter-spacing: 0.25em; }

  /* تصغير شاشة TV */
  .hero__tv-wrap { max-width: 240px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — جوال صغير جداً (375px وأصغر)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .btn { padding: 10px 16px; font-size: 0.82rem; }
  .pay-badge { width: 68px; height: 40px; }
  .stats__grid    { grid-template-columns: 1fr; }
  .trust__grid    { grid-template-columns: 1fr; }
}